/* RunMyCampus three-engine viewport CSS (v4.00.0). * Driven by [data-rmc-viewport-class="A|B|C"] on . * * 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 ------------------------------- */ html[data-rmc-viewport-class="C"] [data-viewport-c-hide], html[data-rmc-viewport-class="C"] .rmc-data-table, html[data-rmc-viewport-class="C"] .rmc-bento-grid, html[data-rmc-viewport-class="C"] .rmc-multi-column, html[data-rmc-viewport-class="C"] .rmc-data-fanout { 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; }