/* campus_xray — Campus tab styles. Solid content on the shell's tokens; no glass here (the tab bar is the glass). */

/* The tab root lays sections out in an auto-sized grid column: without this, a long chip rail would widen the
 * column past the screen. Only our own section wrappers are touched. */
.feature-section[data-section^="campus_xray."] { min-width: 0; }
.cx { min-width: 0; }

.cx .cx-body { transition: opacity 0.18s ease; }
.cx .cx-wait { opacity: 0.55; }

/* Chip rails: one line that scrolls sideways inside itself (the page never scrolls sideways). */
.cx .cx-rail {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 -16px 10px; padding: 2px 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cx .cx-rail::-webkit-scrollbar { display: none; }
.cx .cx-rail .chip { flex: none; font-variant-numeric: tabular-nums; }

.cx .cx-summary {
  margin: 4px 4px 8px; font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums;
}
.cx .cx-note {
  margin: 8px 4px 12px; font-size: 15px; line-height: 1.4; color: var(--subtitle);
}
.cx .cx-note.cx-foot { margin-top: 4px; font-size: 13px; color: var(--hint); }
.cx .row-value { font-variant-numeric: tabular-nums; }

/* Status cards (one room, a teacher's now / next). */
.cx .cx-status { margin-bottom: 12px; }
.cx .cx-status.tappable { cursor: pointer; }
.cx .cx-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hint);
}
.cx .cx-status.accent .cx-eyebrow { color: inherit; opacity: 0.8; }
.cx .cx-headline { margin-top: 4px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.cx .cx-detail { margin-top: 4px; font-size: 15px; color: var(--subtitle); }
.cx .cx-status.accent .cx-detail { color: inherit; opacity: 0.85; }
.cx .cx-when { margin-top: 8px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Teacher search: a solid field (content, not glass). */
.cx .cx-search {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 6px 0 12px; margin-bottom: 10px;
  border-radius: 12px; background: var(--bg2); color: var(--hint);
}
.cx .cx-search .ico { flex: none; width: 20px; height: 20px; }
.cx .cx-search-input {
  flex: 1; min-width: 0; height: 44px; border: 0; padding: 0; background: none; color: var(--text);
  font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none;
}
.cx .cx-search-input::-webkit-search-cancel-button { display: none; }
.cx .cx-search-input::placeholder { color: var(--hint); }
.cx .cx-search:focus-within { box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.5); }
.cx .cx-clear {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--hint); cursor: pointer;
}
.cx .cx-clear .ico { width: 18px; height: 18px; }
.cx .cx-results .group { margin-top: 0; }

@media (prefers-contrast: more) {
  .cx .cx-search { box-shadow: inset 0 0 0 1px var(--sep); }
  .cx .cx-summary, .cx .cx-note.cx-foot { color: var(--subtitle); }
}
@media (prefers-reduced-motion: reduce) {
  .cx .cx-body { transition: none; }
}