/* ============================================================================ Paper & Ink — shared theme (shared/theme.css) ---------------------------------------------------------------------------- The single source of truth for the IntelliView / Strelis visual system: design tokens (light + dark) + the reusable component and layout-pattern classes. Extracted verbatim from the four browser-verified reference files: library/redesign.html · dashboard/redesign-student.html dashboard/redesign-faculty.html · dashboard/redesign-flag-options.html Those files are the byte-accurate spec; where two of them disagreed, the theme-aware v2 dashboards win over the light-only library (noted inline). HOW TO USE (per-page migration): then delete the page's own :root token block + any component CSS this file supplies. Keep the tenant override triple (--primary / --primary-hover / --primary-dim) resolvable on :root — this file defines the defaults, and shared/tenant-branding.js overrides them at runtime for white-label tenants. CONTRACT (do not break — see PART 2 of the design doc): - Accent styling flows through --primary / --primary-hover / --primary-dim ONLY. Never hardcode the coral literals in a page. - Semantic --ok / --warn / --danger / --info stay INDEPENDENT of --primary. - --brand-primary / --brand-accent / --brand-logo-url are owned by tenant-branding.js; this file never sets them. - Solid button fill (--btn-fill) stays coral #C43D2B in BOTH themes so white-on-coral keeps its 5.2:1 contrast (dark --primary is too light to carry white text). THEME MECHANISM: light is the default. OS dark preference applies unless the page is explicitly forced light (data-theme="light"); an explicit data-theme="dark" always wins. The topbar/sidebar toggle stamps data-theme on and persists localStorage.iv_theme (wired in shared/topbar.js). ============================================================================ */ /* ============================ TOKENS — LIGHT ============================== */ :root { /* Branding contract — tenant-branding.js overrides these three at runtime. */ --primary: #C43D2B; /* deepened brand coral; 5.2:1 on white */ --primary-hover: #A93321; --primary-dim: rgba(196,61,43,0.08); /* Warm neutrals (replaces the Tailwind slate ramp). */ --paper: #FAF8F4; /* page canvas — warm off-white */ --card: #FFFFFF; /* raised surfaces */ --sunken: #F3F0EA; /* wells, thumb placeholders, tracks */ --hairline: #E5E0D6; /* 1px surface separators */ --hairline-soft: #EFEBE3; /* softer inner rules */ /* Ink ramp, derived from the wordmark navy #1B2138. */ --ink: #1F2436; --ink-2: #4C5268; --ink-3: #646A80; /* Semantic — independent of --primary. Each -dim is a low-alpha wash so it also reads correctly over the dark --card (why rgba, not solid hex). */ --ok: #2C6E49; --ok-dim: rgba(44,110,73,0.10); --warn: #93540A; --warn-dim: rgba(147,84,10,0.10); --danger: #AE2A19; --danger-dim: rgba(174,42,25,0.08); --info: #3D5A80; --info-dim: rgba(61,90,128,0.10); /* Brand statics (not tenant-overridable). --navy is the dark chrome bar; --coral-raw is for the logo/gradient only, never text. */ --navy: #1B2138; --coral-raw: #F0604D; /* Solid button fill — coral in both themes (see CONTRACT above). */ --btn-fill: #C43D2B; --btn-fill-hover: #A93321; /* Type. No webfont — keeps the no-build setup. */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "New York", ui-serif, Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radii — pills (999px) reserved for primary button / status badge / avatar. */ --r-control: 8px; /* buttons, inputs, selects */ --r-card: 10px; /* cards, panels */ --r-thumb: 6px; /* media thumbnails */ --r-tag: 5px; /* chips */ /* Elevation — cards get NO rest shadow (a hairline separates surfaces). --shadow-float is reserved for genuinely floating things (menus, modals, toasts, the selection bar, the drawer). */ --shadow-float: 0 2px 6px rgba(27,33,56,0.08), 0 12px 32px rgba(27,33,56,0.12); } /* ============================ TOKENS — DARK =============================== */ /* Two blocks by design: the media query auto-applies dark under an OS dark preference UNLESS the page is explicitly forced light; the attribute block lets an in-page toggle force dark. Both carry identical values. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #F27862; --primary-hover: #F5907E; --primary-dim: rgba(242,120,98,0.12); --paper: #141827; --card: #1C2135; --sunken: #232941; --hairline: #333A54; --hairline-soft: #2A3048; --ink: #ECEAE3; --ink-2: #B9BECF; --ink-3: #8C92A8; --ok: #7DC49A; --ok-dim: rgba(125,196,154,0.13); --warn: #E3AE63; --warn-dim: rgba(227,174,99,0.13); --danger: #F09080; --danger-dim: rgba(240,144,128,0.12); --info: #8FB3D9; --info-dim: rgba(143,179,217,0.13); --navy: #10131F; /* even darker chrome in dark mode */ --btn-fill: #C43D2B; /* stays coral (see CONTRACT) */ --btn-fill-hover: #D14C37; --shadow-float: 0 2px 6px rgba(0,0,0,0.35), 0 14px 40px rgba(0,0,0,0.5); } } :root[data-theme="dark"] { --primary: #F27862; --primary-hover: #F5907E; --primary-dim: rgba(242,120,98,0.12); --paper: #141827; --card: #1C2135; --sunken: #232941; --hairline: #333A54; --hairline-soft: #2A3048; --ink: #ECEAE3; --ink-2: #B9BECF; --ink-3: #8C92A8; --ok: #7DC49A; --ok-dim: rgba(125,196,154,0.13); --warn: #E3AE63; --warn-dim: rgba(227,174,99,0.13); --danger: #F09080; --danger-dim: rgba(240,144,128,0.12); --info: #8FB3D9; --info-dim: rgba(143,179,217,0.13); --navy: #10131F; --btn-fill: #C43D2B; --btn-fill-hover: #D14C37; --shadow-float: 0 2px 6px rgba(0,0,0,0.35), 0 14px 40px rgba(0,0,0,0.5); } /* ============================ BASE / RESET =============================== */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--font-ui); font-size: 14px; background: var(--paper); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Buttons inherit the page ink color. Without this, button-based list rows (.qrow / .mrow and any unstyled button) fall back to the UA `buttontext` default (black), which does NOT flip in dark mode — so their text renders black-on-dark. Styled buttons (.btn*, .snav, .seg, .tab, …) set their own color and override this. */ button { font-family: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:absolute; left:8px; top:-48px; z-index:1000; background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:6px; font-size:13px; text-decoration:none; transition:top .15s; } .skip-link:focus { top:8px; } /* ============================== BUTTONS ================================== */ /* One primary action per view. --btn-fill keeps the fill coral in both themes. */ .btn-primary { display:inline-flex; align-items:center; gap:7px; background:var(--btn-fill); color:#fff; border:none; border-radius:999px; height:38px; padding:0 20px; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s; } .btn-primary:hover { background:var(--btn-fill-hover); } .btn-quiet { display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--ink-2); border:1px solid var(--hairline); border-radius:var(--r-control); height:38px; padding:0 14px; font-size:13.5px; font-weight:500; cursor:pointer; transition:all .15s; } .btn-quiet:hover { border-color:var(--ink-3); color:var(--ink); } .icon-btn { border:1px solid var(--hairline); background:none; color:var(--ink-3); border-radius:var(--r-control); width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .icon-btn:hover { color:var(--ink); border-color:var(--ink-3); } .linklike { border:none; background:none; font-size:12.5px; color:var(--ink-3); cursor:pointer; padding:0; text-align:left; } .linklike:hover { color:var(--ink); text-decoration:underline; } /* =============================== MENU =================================== */ .menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-float); min-width:200px; padding:6px; display:none; z-index:60; } .menu.open { display:block; } .menu button { display:block; width:100%; text-align:left; background:none; border:none; padding:8px 10px; font-size:13.5px; color:var(--ink); border-radius:6px; cursor:pointer; } .menu button:hover { background:var(--sunken); } .menu .menu-note { padding:2px 10px 6px; font-size:12px; color:var(--ink-3); } .menu hr { border:none; border-top:1px solid var(--hairline-soft); margin:6px 4px; } /* ============================ PANELS / CARDS ============================= */ .panel, .tile { background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-card); padding:18px 20px; } .panel h2 { font-size:15px; font-weight:600; margin-bottom:4px; } .panel .p-sub { font-size:12.5px; color:var(--ink-3); margin-bottom:12px; } /* ====================== SIGNALS: dots / tags / flags ==================== */ /* The hard-won rule (design doc §1.6): .dot — a bare severity dot. .flag — a diagnostic SIGNAL: severity dot + colored text, NO box. .tag — the ONE true STATUS: a filled pill. Scarcity gives the hierarchy. .val-* — threshold-colored NUMBERS in table cells (not pills). Never a tinted-fill chip for everything — that repetition is the #1 AI tell. */ .dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; position:relative; top:-1px; } .dot-ok { background:var(--ok); } .dot-warn { background:var(--warn); } .dot-danger { background:var(--danger); } .dot-info { background:var(--info); } .dot-muted { background:var(--ink-3); } .tag { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; border:1px solid var(--hairline); border-radius:var(--r-tag); padding:2px 8px; color:var(--ink-2); } .tag-ok { color:var(--ok); border-color:transparent; background:var(--ok-dim); } .tag-warn { color:var(--warn); border-color:transparent; background:var(--warn-dim); } .tag-danger { color:var(--danger); border-color:transparent; background:var(--danger-dim); } .tag-info { color:var(--info); border-color:transparent; background:var(--info-dim); } .flags { display:flex; flex-wrap:wrap; gap:5px 16px; } .flag { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--sev); } .flag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--sev); flex:none; } .flag-ok { --sev:var(--ok); } .flag-warn { --sev:var(--warn); } .flag-danger { --sev:var(--danger); } .flag-info { --sev:var(--info); } .flag-more { color:var(--ink-3); font-size:12px; font-weight:500; } .val-ok { color:var(--ok); font-weight:600; } .val-warn { color:var(--warn); font-weight:600; } .val-danger { color:var(--danger); font-weight:600; } .val-info { color:var(--info); font-weight:600; } /* =============================== TABLES ================================= */ .dtable { width:100%; border-collapse:collapse; } .dtable th { font-size:12px; font-weight:600; color:var(--ink-3); text-align:left; padding:6px 10px 8px 0; border-bottom:1px solid var(--hairline); white-space:nowrap; } .dtable th.sortable { cursor:pointer; } .dtable th.sortable:hover { color:var(--ink); } .dtable td { font-size:13px; color:var(--ink-2); padding:10px 10px 10px 0; border-bottom:1px solid var(--hairline-soft); vertical-align:middle; } .dtable tr:last-child td { border-bottom:none; } .dtable .num { font-variant-numeric:tabular-nums; } .dtable .t { color:var(--ink); font-weight:600; } .dtable tr.rowlink { cursor:pointer; } .dtable tr.rowlink:hover td { background:var(--paper); } .barcell { display:flex; align-items:center; gap:10px; min-width:150px; } .barcell .num { width:38px; text-align:right; font-weight:600; color:var(--ink); font-size:12.5px; } /* ================================ BARS ================================== */ .track { position:relative; height:6px; background:var(--sunken); border-radius:3px; flex:1; min-width:48px; } .fill { position:absolute; left:0; top:0; bottom:0; border-radius:3px; } .fill-ok { background:var(--ok); } .fill-warn { background:var(--warn); } .fill-danger { background:var(--danger); } .fill-info { background:var(--info); } .tick { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-3); opacity:.55; } /* ========================= SEGMENTED CONTROL =========================== */ .seg { display:inline-flex; border:1px solid var(--hairline); border-radius:var(--r-control); overflow:hidden; } .seg button { border:none; background:none; font-size:12.5px; font-weight:500; color:var(--ink-3); padding:6px 12px; cursor:pointer; } .seg button.active { background:var(--sunken); color:var(--ink); font-weight:600; } .seg button + button { border-left:1px solid var(--hairline); } /* =========================== DISCLOSURE ================================ */ /* Default is the block treatment (full-width row, chevron pushed right). Add .disc-inline for the compact inline summary (chevron beside the text). */ details.disc { border-top:1px solid var(--hairline-soft); } details.disc summary { cursor:pointer; padding:12px 0; font-size:12.5px; font-weight:600; color:var(--ink-3); list-style:none; display:flex; align-items:center; } details.disc summary::-webkit-details-marker { display:none; } details.disc summary::after { content:"▾"; margin-left:auto; font-size:10px; } details.disc[open] summary::after { transform:rotate(180deg); } details.disc .disc-body { padding:0 0 12px; font-size:12.5px; color:var(--ink-2); } details.disc-inline { border-top:none; } details.disc-inline summary { padding:0; display:inline-flex; gap:5px; } details.disc-inline summary::after { margin-left:0; } details.disc-inline .disc-body { padding:10px 0 4px; } .def-row { display:flex; gap:8px; align-items:baseline; padding:4px 0; } .def-row .def-name { font-weight:600; min-width:104px; color:var(--ink); font-size:12.5px; } .disc-foot { font-size:11.5px; color:var(--ink-3); margin-top:8px; } /* ============================ EMPTY STATES ============================= */ .empty { padding:72px 24px; text-align:center; max-width:420px; margin:0 auto; } .empty h2 { font-family:var(--font-display); font-size:22px; font-weight:600; margin-bottom:8px; } .empty p { font-size:13.5px; color:var(--ink-2); margin-bottom:18px; } .empty .btn-quiet { display:inline-flex; } .empty-note { font-size:13px; color:var(--ink-3); padding:16px 0; } /* ============================== CALLOUT =============================== */ .callout { border:1px solid var(--hairline); border-left:3px solid var(--warn); border-radius:0 var(--r-control) var(--r-control) 0; background:var(--warn-dim); padding:10px 14px; font-size:12.5px; color:var(--ink-2); margin-top:12px; } /* =============================== MODAL ================================ */ .modal-overlay { position:fixed; inset:0; background:rgba(27,33,56,0.45); z-index:120; display:none; align-items:center; justify-content:center; padding:20px; } .modal-overlay.open { display:flex; } .modal { background:var(--card); border-radius:14px; width:100%; max-width:560px; box-shadow:var(--shadow-float); overflow:hidden; } .modal-head { padding:20px 24px 0; display:flex; align-items:flex-start; gap:12px; } .modal-head h2 { font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.3; flex:1; } .modal-head .modal-x { border:none; background:none; font-size:18px; color:var(--ink-3); cursor:pointer; padding:4px 8px; border-radius:6px; } .modal-head .modal-x:hover { background:var(--sunken); color:var(--ink); } .modal-sub { padding:2px 24px 0; font-size:12.5px; color:var(--ink-3); } .modal-body { padding:18px 24px 24px; } .mfield { margin-bottom:14px; } .mfield label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px; } .mfield .mrow { display:flex; gap:8px; } .mfield input, .mfield textarea { flex:1; border:1px solid var(--hairline); border-radius:var(--r-control); background:var(--paper); padding:8px 10px; font-size:12.5px; font-family:var(--font-mono); color:var(--ink-2); resize:none; min-width:0; } .mcopy { border:1px solid var(--hairline); background:var(--card); color:var(--ink-2); font-size:12.5px; font-weight:500; border-radius:var(--r-control); padding:0 14px; cursor:pointer; white-space:nowrap; } .mcopy:hover { border-color:var(--primary); color:var(--primary); } .mcopy.done { background:var(--ok-dim); border-color:var(--ok); color:var(--ok); } .modal-foot { padding:0 24px 22px; display:flex; gap:10px; justify-content:flex-end; } /* =============================== TOAST ================================ */ /* Text is --paper (not #fff) so it inverts correctly against --ink in dark. */ .toast { position:fixed; bottom:24px; right:24px; background:var(--ink); color:var(--paper); font-size:13px; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-float); opacity:0; transform:translateY(8px); transition:all .2s; z-index:140; pointer-events:none; } .toast.show { opacity:1; transform:none; } /* ========================= FLOATING SELECTION BAR ===================== */ .selbar { position:fixed; left:50%; transform:translate(-50%, 80px); bottom:24px; background:var(--navy); color:#fff; border-radius:999px; padding:10px 12px 10px 22px; display:flex; align-items:center; gap:4px; box-shadow:var(--shadow-float); transition:transform .2s ease; z-index:90; max-width:calc(100vw - 24px); flex-wrap:wrap; } .selbar.show { transform:translate(-50%, 0); } .selbar .sel-count { font-size:13.5px; font-weight:600; margin-right:12px; } .selbar button { border:none; background:none; color:#C9CDDE; font-size:13px; font-weight:500; padding:7px 12px; border-radius:999px; cursor:pointer; } .selbar button:hover { background:rgba(255,255,255,0.1); color:#fff; } .selbar button.sel-danger { color:#FFB4A8; } .selbar button.sel-danger:hover { background:rgba(174,42,25,0.35); color:#fff; } .selbar .sel-close { margin-left:6px; color:#8A90A8; font-size:15px; padding:7px 10px; } /* ============================================================================ LAYOUT PATTERNS (design doc §1.5) — the skeletons that win "not AI". ============================================================================ */ /* ---------------------------- App frame -------------------------------- */ /* 240–250px left sidebar + left-aligned main column; collapses to a horizontal rail under 940px. Pages set the exact sidebar width if needed. */ .app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; } .side { background:var(--card); border-right:1px solid var(--hairline); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:20px 14px 16px; overflow-y:auto; } .side-brand { display:flex; align-items:baseline; gap:8px; padding:0 10px; margin-bottom:20px; text-decoration:none; color:var(--ink); } .side-brand img { height:22px; width:auto; align-self:center; } .side-brand .bw { font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:0.13em; } .side-brand .bp { font-size:12px; color:var(--ink-3); } /* Identity card (student) / context card (faculty) — both sit in the sidebar. */ .side-id { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--hairline); border-radius:var(--r-card); margin-bottom:18px; } .side-id .nm { font-size:13.5px; font-weight:600; line-height:1.25; } .side-id .mt { font-size:11.5px; color:var(--ink-3); } .avatar { width:34px; height:34px; border-radius:50%; background:var(--coral-raw); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex:none; } .ctx { border:1px solid var(--hairline); border-radius:var(--r-card); padding:12px; margin-bottom:18px; display:flex; flex-direction:column; gap:10px; } .ctx .cx { display:flex; flex-direction:column; gap:4px; } .ctx label { font-size:11.5px; font-weight:600; color:var(--ink-3); } .ctx select { height:32px; border:1px solid var(--hairline); border-radius:var(--r-control); background:var(--card); color:var(--ink-2); font-size:12.5px; font-family:inherit; padding:0 8px; cursor:pointer; width:100%; } .ctx .meta { font-size:12px; color:var(--ink-3); } /* Sidebar nav */ .snav-label { font-size:11.5px; font-weight:600; color:var(--ink-3); padding:0 10px; margin:2px 0 6px; } .snav { display:flex; flex-direction:column; gap:2px; } .snav button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; font-size:13.5px; font-weight:500; color:var(--ink-2); padding:8px 10px; border-radius:7px; cursor:pointer; } .snav button:hover { background:var(--sunken); color:var(--ink); } .snav button.active { background:var(--primary-dim); color:var(--primary); font-weight:600; } .snav .badge { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--danger); background:var(--danger-dim); border-radius:999px; padding:0 7px; line-height:18px; } .side-sec { border-top:1px solid var(--hairline-soft); margin-top:16px; padding-top:14px; } .side-foot { margin-top:auto; border-top:1px solid var(--hairline-soft); padding-top:12px; display:flex; flex-direction:column; gap:10px; } .side-foot .linkrow { padding:0 10px; } .term-row { display:flex; flex-direction:column; gap:4px; padding:0 10px; } .term-row label { font-size:11.5px; font-weight:600; color:var(--ink-3); } .term-row select { height:32px; border:1px solid var(--hairline); border-radius:var(--r-control); background:var(--card); color:var(--ink-2); font-size:12.5px; font-family:inherit; padding:0 8px; } .foot-btns { display:flex; gap:8px; padding:0 10px; } .role-links { display:flex; gap:10px; padding:0 10px; font-size:12px; color:var(--ink-3); align-items:center; flex-wrap:wrap; } .role-links a { color:var(--ink-3); text-decoration:none; } .role-links a:hover { color:var(--ink); text-decoration:underline; } .role-links .cur { color:var(--ink); font-weight:600; } /* Main column + view header */ .main { padding:28px 36px 80px; min-width:0; } .content { max-width:1060px; } .view-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; } .view-head h1 { font-family:var(--font-display); font-size:25px; font-weight:600; letter-spacing:-0.01em; } .view-head .vh-sub { font-size:13px; color:var(--ink-3); } .view-head .right { margin-left:auto; display:flex; gap:8px; align-items:center; } .demo-tag { font-size:11px; font-weight:600; color:var(--ink-3); border:1px solid var(--hairline); border-radius:var(--r-tag); padding:1px 7px; } .view-intro { font-size:13px; color:var(--ink-3); margin-bottom:20px; } .view-intro .sep { margin:0 4px; color:var(--hairline); } .view { display:none; } .view.active { display:block; } .search-inline { height:34px; border:1px solid var(--hairline); border-radius:var(--r-control); background:var(--card); color:var(--ink); font-size:13px; font-family:inherit; padding:0 12px; min-width:220px; } .search-inline:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-dim); } /* --------------------------- Main + rail ------------------------------- */ .duo { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:34px; align-items:start; } .rail-mod { padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--hairline-soft); } .rail-mod:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } .rail-mod h3 { font-size:12.5px; font-weight:600; color:var(--ink-3); margin-bottom:9px; } .rail-kv { display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--ink-2); padding:3px 0; } .rail-kv .v { margin-left:auto; font-weight:650; font-variant-numeric:tabular-nums; color:var(--ink); } .rail-list { display:flex; flex-direction:column; gap:6px; } .rail-list .row { display:flex; align-items:baseline; gap:7px; font-size:12.5px; color:var(--ink-2); } .rail-list .row .k { font-size:11px; color:var(--ink-3); } .rail-list .row .v { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; } /* The one gradient moment lives in an SVG stroke; this styles its track. */ .ring-mod { display:flex; align-items:center; gap:14px; } .ring-track { stroke:var(--sunken); } .ring-cap { font-size:12px; color:var(--ink-3); line-height:1.4; } .ring-cap strong { display:block; font-size:13px; color:var(--ink); } /* -------------------------- Master–detail ------------------------------ */ .md { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; align-items:start; } .mlist { display:flex; flex-direction:column; gap:6px; } .mrow { text-align:left; border:1px solid var(--hairline); background:var(--card); border-radius:var(--r-card); padding:11px 13px; cursor:pointer; width:100%; } .mrow:hover { border-color:var(--ink-3); } .mrow.active { border-color:var(--primary); background:var(--primary-dim); } .mrow .mc { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; } .mrow .mn { font-size:12px; color:var(--ink-3); margin-top:1px; } .mrow .mb { display:flex; align-items:center; gap:8px; margin-top:8px; } .mrow .mb .num { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; } .md-detail { min-width:0; } .md-detail .dhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .md-detail .dhead h2 { font-size:16px; font-weight:600; } .md-detail .dhead .right { margin-left:auto; } /* --------------------------- Triage inbox ------------------------------ */ .inbox { display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px; align-items:start; } .queue-counts { display:flex; gap:14px; font-size:12.5px; color:var(--ink-2); margin-bottom:12px; flex-wrap:wrap; } .queue-counts span strong { font-variant-numeric:tabular-nums; } .queue { display:flex; flex-direction:column; gap:6px; } .qrow { text-align:left; width:100%; border:1px solid var(--hairline); background:var(--card); border-radius:var(--r-card); padding:11px 13px; cursor:pointer; } .qrow:hover { border-color:var(--ink-3); } .qrow.active { border-color:var(--primary); background:var(--primary-dim); } .qrow .qn { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; } .qrow .qn .tag { margin-left:auto; } .qrow .qs { display:flex; gap:4px 14px; flex-wrap:wrap; margin-top:8px; } .qrow .flag { font-size:12px; } .queue-more { font-size:12.5px; color:var(--ink-3); padding:8px 2px 0; } .queue-more button { border:none; background:none; color:var(--primary); font-weight:600; font-size:12.5px; cursor:pointer; padding:0; } .queue-more button:hover { text-decoration:underline; } .detail { min-width:0; } .detail-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--hairline); margin-bottom:14px; } .detail-head h2 { font-family:var(--font-display); font-size:21px; font-weight:600; } .detail-head .right { margin-left:auto; display:flex; gap:8px; } .detail h3 { font-size:12.5px; font-weight:600; color:var(--ink-3); margin:16px 0 8px; } .detail h3:first-of-type { margin-top:0; } .sugg { font-size:13px; color:var(--ink-2); background:var(--sunken); border-radius:var(--r-control); padding:10px 13px; margin-bottom:16px; } .sugg .lab { font-weight:600; color:var(--ink-3); } .detail-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start; } .orow { display:flex; align-items:center; gap:10px; padding:4px 0; font-size:13px; } .orow .onm { width:180px; flex:none; color:var(--ink-2); } .orow .num { width:36px; text-align:right; font-weight:600; font-size:12.5px; } .conf-block { border:1px solid var(--hairline); border-radius:var(--r-control); padding:10px 12px; margin-bottom:8px; font-size:13px; } .conf-block .cb-head { font-weight:600; display:flex; gap:8px; align-items:center; } .conf-block .cb-item { color:var(--ink-2); font-size:12.5px; margin-top:6px; } .conf-block .cb-vid { color:var(--ink-3); font-size:12px; } .tta { display:flex; gap:12px; } .tta .box { flex:1; border:1px solid var(--hairline); border-radius:var(--r-control); padding:9px 12px; } .tta .bv { font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; } .tta .bl { font-size:11.5px; color:var(--ink-3); } .chips { display:flex; gap:6px; flex-wrap:wrap; } /* -------------------- Analytics grid (mixed width) --------------------- */ .agrid { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; } .agrid .a4 { grid-column:span 4; } .agrid .a5 { grid-column:span 5; } .agrid .a6 { grid-column:span 6; } .agrid .a7 { grid-column:span 7; } .agrid .a8 { grid-column:span 8; } .agrid .a12 { grid-column:span 12; } .stat-strip { display:flex; gap:26px; flex-wrap:wrap; padding:2px 0 18px; } .stat-strip .s { display:flex; flex-direction:column; } .stat-strip .sv { font-size:22px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.2; } .stat-strip .sl { font-size:12px; color:var(--ink-3); } .dist { display:flex; height:20px; border-radius:6px; overflow:hidden; margin:4px 0 8px; } .legend { display:flex; gap:14px; font-size:12.5px; color:var(--ink-2); flex-wrap:wrap; } .legend .sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; position:relative; top:1px; } .gapbox { border-radius:var(--r-control); padding:11px 13px; margin-bottom:8px; } .gapbox .gv { font-size:16px; font-weight:650; } .gapbox .gl { font-size:12px; color:var(--ink-2); margin-top:1px; } /* ============================ RESPONSIVE =============================== */ @media (max-width: 1080px) { .agrid .a4, .agrid .a5, .agrid .a6, .agrid .a7, .agrid .a8 { grid-column:span 12; } .detail-cols { grid-template-columns:1fr; } } @media (max-width: 940px) { .app { grid-template-columns:1fr; } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; } .side-brand { margin:0; } .side-id, .ctx, .snav-label, .side-sec { display:none; } .snav { flex-direction:row; overflow-x:auto; flex:1; } .snav button { white-space:nowrap; } .side-foot { margin:0; border:none; padding:0; flex-direction:row; align-items:center; } .side-foot .linkrow, .term-row, .role-links { display:none; } .duo, .md, .inbox { grid-template-columns:1fr; } .main { padding:20px 16px 60px; } } @media (max-width: 480px) { .selbar { border-radius:16px; padding:8px 10px; } .selbar .sel-count { width:100%; padding:4px 10px 0; } }