/* RunMyCampus three-engine viewport CSS (v4.00.0).
 * Driven by [data-rmc-viewport-class="A|B|C"] on <html>.
 *
 * Viewport A (>=1600 wide, 8+ cores, 4+GB) — desktop / 4K command center.
 * Viewport B — tablet / Chromebook (default for mid-range).
 * Viewport C (<=600 wide OR low-power OR slow connection) — mobile stream.
 *
 * Only structural rules live here; colors, type ramp, surfaces remain in the
 * design-token / personality cascade. Selectors prefer attribute roots so
 * nothing forks the .rmc-* grammar.
 */

/* ----- VIEWPORT A: multi-column command center -------------------------- */
html[data-rmc-viewport-class="A"] .rmc-data-fanout {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: var(--space-4, 1rem);
}

html[data-rmc-viewport-class="A"] [data-rmc-prewarm-on-hover] {
  /* JS picks up [data-rmc-prewarm-on-hover] and fires intersection-observed
   * background fetches so cross-record drawers feel instant. */
  cursor: pointer;
}

/* ----- VIEWPORT B: tablet / Chromebook ---------------------------------- */
html[data-rmc-viewport-class="B"] .rmc-touch-min,
html[data-rmc-viewport-class="B"] .rmc-data-table tbody td,
html[data-rmc-viewport-class="B"] .rmc-cmdk-trigger {
  min-block-size: 48px;
  min-inline-size: 48px;
}

html[data-rmc-viewport-class="B"] .rmc-cmdk-orb,
html[data-rmc-viewport-class="C"] .rmc-cmdk-orb {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 999px;
  background: var(--brand-primary, #4f46e5);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--elev-3, 0 18px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08));
  z-index: 950;
  border: 0;
  cursor: pointer;
}

html[data-rmc-viewport-class="B"] .rmc-cmdk-orb:focus-visible,
html[data-rmc-viewport-class="C"] .rmc-cmdk-orb:focus-visible {
  outline: 3px solid var(--focus-ring, #fbbf24);
  outline-offset: 4px;
}

/* Viewport A keeps the inline ⌘K bar; Viewport B/C surface the orb. */
html[data-rmc-viewport-class="A"] .rmc-cmdk-orb { display: none; }

/* ----- VIEWPORT C: mobile / parent stream ------------------------------- */
/* Only what a template explicitly opts out of. Never a data surface: until
   2026-10-14 this rule also hid every .rmc-data-table, .rmc-bento-grid,
   .rmc-multi-column and .rmc-data-fanout with display:none !important, and
   the .rmc-card-stream it was meant to make way for existed in no template.
   Class C was (and on narrow screens still is) common: a phone, or -- before
   the classifier stopped reading the network -- any desktop Chrome whose
   network-quality estimate said "3g" because the server was slow. Lists then
   showed their toolbar and pager around nothing, and came back only when the
   estimate recovered. Tables already scroll inside .table-responsive. */
html[data-rmc-viewport-class="C"] [data-viewport-c-hide] {
  display: none !important;
}

html[data-rmc-viewport-class="C"] .rmc-card-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

html[data-rmc-viewport-class="C"] .rmc-voice-prompt {
  position: sticky;
  inset-block-start: 0;
  padding: var(--space-3, 0.75rem);
  background: var(--surface-elevated, #fff);
  border-block-end: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
  z-index: 800;
}

html[data-rmc-viewport-class="C"] .rmc-voice-prompt__input {
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: 12px;
  border: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* Viewport-class-aware skeleton tweaks: kill blocking animations on C. */
html[data-rmc-no-animations="1"] *,
html[data-rmc-no-animations="1"] *::before,
html[data-rmc-no-animations="1"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}