/* ============ VVT Hub design system ============ */ /* RESTYLE 2026-07-11 — self-hosted brand faces (assets/ already present; $0, offline, no CDN), metric-matched fallbacks so the swap is ~zero-CLS. Activates --font (Inter) + --font-serif (Fraunces display) so the Hub speaks the marketing site's editorial voice, not system default. */ @font-face { font-family:'Fraunces'; src:url('assets/fraunces-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face { font-family:'Inter'; src:url('assets/inter-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Inter-fallback'; src:local('Arial'); size-adjust:107%; ascent-override:90%; descent-override:22%; line-gap-override:0%; } @font-face { font-family:'Fraunces-fallback'; src:local('Georgia'); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%; } /* SPEC-DHSHELL D1 — Plus Jakarta Sans, staged by Fable (assets/plus-jakarta-var.woff2). DECLARATION ONLY this wave: it is the client-facing dark-cinematic display face (design-handoff/README.md); no internal-Hub selector switches to it here — that's a later wave once the client-facing surfaces (out of scope for DHSHELL) get redesigned. */ @font-face { font-family:'Plus Jakarta Sans'; src:url('assets/plus-jakarta-var.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; } /* SPEC267 quick-wins — a11y utilities: screen-reader-only text + keyboard skip link */ .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:fixed; top:8px; left:8px; z-index:200; transform:translateY(-150%); background:var(--panel); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; padding:10px 16px; font-weight: var(--fw-semibold); box-shadow:0 6px 20px rgba(0,0,0,.18); transition:transform .15s ease; } .skip-link:focus { transform:translateY(0); outline:2px solid var(--accent); outline-offset:2px; } .sched-drive { font-size:10.5px; padding:1px 0 1px 8px; display:flex; align-items:center; gap:3px; opacity:.8; } :root { --bg: #f6f6f4; /* SPEC175 — a whisper-warmer page neutral so cards read as paper, not cold screen */ --bg-2: #eef0f4; --panel: #ffffff; --card: var(--panel); /* SPEC198 — alias used by stat cards/chips/dividers; was undefined → transparent */ --text-soft: var(--muted); /* SPEC198 — secondary-label ink alias (was undefined) */ --subtle: #fbfbfa; /* SPEC175 — warmer soft fill (table headers, input wells) */ --hover: #f2f4f7; --chip-ink: #0b0d13; --border: #e4e7ec; --border-strong: #d0d5dd; --text: #101828; --muted: #565e6b; /* AA on all three light surfaces: 6.54 on --panel, 6.05 on --bg, 5.74 on --bg-2 */ --faint: #656d7b; /* AA on all three light surfaces: 5.22 on --panel, 4.82 on --bg, 4.57 on --bg-2; stays a visible step lighter than --muted */ --accent: #2b608f; /* RESTYLE 2026-07-11 — Deep Harbor steel-blue (from the VVT logo); was the AI-tell indigo #4f46e5 */ --accent-hover: #1e3f66; /* deeper cube navy — also the primary-button fill */ --accent-soft: #eaf1f7; /* soft steel wash (matches order.html exactly) */ --accent-warm: #b18f52; /* champagne — DECORATIVE ONLY (hairlines/dividers/delight edges), never text-on-fill */ --accent-warm-soft: #f0e6d4; --gold: #c19a4e; /* review stars / celebratory ticks ONLY */ --danger: #d92d20; --danger-soft: #fef3f2; --danger-ink: #b42318; /* RESILIENCE 07-30 — ink that sits ON a --danger FILL (toasts, unread badges). Light: white is fine (4.83:1). Dark: --danger flips to a LIGHT red (#f97066) but the text stayed #fff, measuring 2.79:1 — a FAIL on the error messages that matter most. Dark uses a near-black instead (6.12:1). --danger-ink stays text-on-surface; this is text-on-fill, which is the opposite problem. */ --on-danger: #ffffff; /* text-only red ink — AA on light (6.05 on --danger-soft, 6.57 on --panel). --danger stays the fill/stroke red. */ --ok: #079455; --ok-soft: #ecfdf3; --warn: #dc6803; --warn-soft: #fffaeb; --ok-ink: #067647; /* text-only green ink — AA on light (5.69 on --panel, 5.50 on --subtle, 5.40 on --ok-soft). --ok stays the fill/stroke green. */ --warn-ink: #b54708; /* text-only amber ink — AA on light (5.43 on --panel, 5.24 on --subtle, 5.20 on --warn-soft). --warn stays the fill/stroke amber. */ /* LAW-A 2026-08-15 (#19) — --info was the only state colour missing its text-ink sibling (--ok-ink/--warn-ink/--danger-ink already existed). Measured, WCAG relative-luminance: 5.99 on --panel, 5.53 on --bg, 5.78 on --subtle, 5.57 on --info-soft, 5.25 on --bg-2 — all AA. --info stays the fill/stroke blue; use --info-ink for text on a light/neutral surface. */ --info-ink: #175cd3; --info: #2e90fa; /* SPEC208 — a distinct blue for "healthy/neutral" status (was hardcoded #0ea5e9/#3b82f6) */ --info-soft: #eff8ff; --code-bg: #f6f8fa; /* SPEC208 — tokenized code blocks (were hardcoded dark, invisible in light mode) */ --code-text: #1a1a1a; --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; /* accent channel → theme-aware focus rings/glows (one RGB triple drives every ring) */ --ring-rgb: 43, 96, 143; --focus-ring: 0 0 0 3px rgba(var(--ring-rgb), .35); --focus-ring-soft: 0 0 0 3px rgba(var(--ring-rgb), .15); /* motion — one ease + a fast/base/slow scale by element heft */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.22, 1, .36, 1); --t-fast: 120ms; --t-base: 160ms; --t-slow: 260ms; /* elevation — SPEC175: a soft wide ambient layer under the contact shadow so every surface reads as floating paper, not flat. Real depth still in --shadow-lg. */ --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 1px rgba(16,24,40,.03); --shadow: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px -1px rgba(16,24,40,.08); --shadow-lg: 0 18px 40px -12px rgba(16,24,40,.18), 0 6px 14px -6px rgba(16,24,40,.08); --card-hi: inset 0 1px 0 rgba(255,255,255,.5); /* paper top-highlight */ --sidebar-hover: rgba(255,255,255,.06); /* SPEC175 — stepped below the accent-tinted active */ --sidebar-active-bg: color-mix(in srgb, var(--accent) 16%, transparent); /* SPEC175 — current location is unmistakable yet calm */ --font-serif: 'Fraunces', 'Fraunces-fallback', Georgia, Cambria, "Times New Roman", serif; /* RESTYLE — editorial display face (self-hosted, $0); marketing-site parity */ --sidebar-bg: #1e3f66; /* SPEC-DHSHELL D2 — Deep Harbor rail navy (design-handoff/README.md "Rail background"; was #16202e). Print re-pin at :9449 kept in step (r4/A5). */ --sidebar-border: #232639; /* SPEC-DHSHELL D2 — #9aa1b9 measured 6.38:1 against the OLD near-black #16202e rail but only 4.17:1 (a real AA FAIL, <4.5) against the new lighter #1e3f66 navy above; #aab1c6 restores 5.01:1 against #1e3f66 and stays the same muted slate-blue family. Dark theme's rail bg is untouched (still #0f1722, 7.01:1 with the original #9aa1b9 — see :189), so only this light value moves; print re-pin at :9580 kept in step (r4/A5). */ --sidebar-text: #aab1c6; --sidebar-active: #ffffff; /* SPEC267 — Inter first (self-host the woff2 in assets/ to activate; see GO-LIVE.md), gracefully degrading to the system stack until then so this is render-safe today. */ --font: 'Inter var', 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- SPEC119: dimensional scales (theme-independent → 100% dark-mode-safe). 4px spacing grid + ~7-role type scale + line-height/weight/tracking, the shared vocabulary Linear/Stripe/Notion/Vercel/M3 all converge on. ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --fs-micro: 11px; --fs-meta: 12px; --fs-caption: 13px; --fs-body: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-h1: 22px; --fs-display: 28px; --fs-hero: 34px; /* SPEC-DHSHELL D4 — README's page-title spec is 30-34px; --fs-display (28px, used by .tss-hero-title/an icon badge too) sits just under that range, and widening it would ripple into those unrelated components. Dedicated token, only .view-title uses it. */ --fs-page-title: 32px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --fw-heavy: 900; --ls-tight: -.02em; --ls-body: 0; --ls-label: .04em; --icon-sm: 16px; --icon-md: 24px; --icon-lg: 32px; --focus-offset: 2px; --shadow-xs: 0 0 0 1px var(--border); --shadow-pop: var(--shadow-lg); --ghost-border: transparent; /* D2 */ /* SPEC-DHSHELL D1 — token layer completion (design-handoff/README.md, Design tokens). Purely additive: nothing existing is renamed or removed, so no call site changes. Hairline/control borders (#e4e7ec/#d0d5dd) are already --border/--border-strong — nothing to add there. Semantic tone TRIPLES: bg/fg alias the existing --danger-soft/ --danger-ink (etc, values already match the README exactly) so they inherit the dark-theme swap for free; only the border leg + the neutral bg are genuinely new literals, so only those two get dark-block + print-block entries (r4/A4/A5). */ --tone-red-bg: var(--danger-soft); --tone-red-bd: rgba(217,45,32,.24); --tone-red-fg: var(--danger-ink); --tone-amber-bg: var(--warn-soft); --tone-amber-bd: rgba(220,104,3,.28); --tone-amber-fg: var(--warn-ink); --tone-green-bg: var(--ok-soft); --tone-green-bd: rgba(7,148,85,.26); --tone-green-fg: var(--ok-ink); --tone-neutral-bg: #f2f4f7; --tone-neutral-bd: var(--border); --tone-neutral-fg: var(--muted); /* radius scale — additive; existing --radius/--radius-sm/--radius-lg untouched */ --radius-1: 5px; --radius-2: 8px; --radius-3: 10px; --radius-4: 12px; --radius-pill: 999px; /* named shadow roles per README (card/popover/modal/dark-modal); existing --shadow-sm/ --shadow/--shadow-lg untouched, still used everywhere they already were */ --shadow-card: 0 1px 2px rgba(16,24,40,.04); --shadow-popover: 0 20px 44px -10px rgba(16,24,40,.28); --shadow-modal: 0 24px 60px -12px rgba(16,24,40,.35); --shadow-dark-modal: 0 30px 70px -16px rgba(0,0,0,.75); /* theme-invariant by design (already max-black) */ --t-motion: 180ms; /* the ~180ms/ease motion token named in the brief; existing --t-fast/--t-base/--t-slow untouched */ /* pipeline stage-ramp DEFAULTS ONLY — CSS vars, no call site yet. Real stage colors live in settings-stored statuses (App.state.settings.statuses); do NOT wire these to replace that — they exist so a future stage-band component has a documented fallback ramp to reach for, per the brief's explicit instruction. */ --stage-1: #b3d7e8; --stage-2: #8cc4dd; --stage-3: #67b3d5; --stage-4: #4492b6; --stage-5: #387e9f; --stage-6: #2b608f; --stage-7: #233e6b; /* SPEC-DHCLIENT D1 — client-facing dark-cinematic token group (design-handoff/README.md "Client-facing — dark cinematic"). Dedicated --cf- namespace, NOT an alias of the internal --bg/--panel/--text tokens above: those stay Deep Harbor light/navy-dark for the admin app's own light/dark toggle. The three client surfaces (portal.html, clientstatus.js's render + in-app preview, property.html) read these — scoped at each surface's own root container — so the look is a fixed luxury-dark brand identity, independent of theme state. Values verbatim from the README table. */ --cf-ground: #0d0d0d; --cf-card: #1e1e21; --cf-hairline: rgba(255,255,255,.10); --cf-hairline-hover: rgba(255,255,255,.24); --cf-text: #ffffff; --cf-text-2: rgba(255,255,255,.68); --cf-text-3: rgba(255,255,255,.5); --cf-text-4: rgba(255,255,255,.34); --cf-champagne: #e6d2b1; --cf-blue: #67b3d5; --cf-blue-hover: #8fc9e0; --cf-green: #5fbf9b; --cf-green-bg: rgba(18,128,92,.16); --cf-scrim: linear-gradient(to top, rgba(13,13,13,.78), rgba(13,13,13,0) 42%); --cf-font: 'Plus Jakarta Sans', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color-scheme: light; } /* ============ Dark mode — set html[data-theme="dark"]; everything reflows off these tokens. Surfaces step bg → bg-2 → panel → subtle → hover so depth still reads on a dark screen; accent is Deep Harbor steel (#5f92b4) — AA both as a button fill (white text) and as link text on the dark background. ============ */ html[data-theme="dark"] { --bg: #101722; /* RESTYLE — anchor the dark ground to logo navy (matches order.html) */ --bg-2: #16202e; /* logo blue-black */ --panel: #1f2433; /* D1 — was #1a1d27; lifts card:page contrast 1.07:1 → 1.16:1 */ --card: var(--panel); /* SPEC198 — re-aliased per theme so dark cards aren't transparent */ --text-soft: var(--muted); /* SPEC198 */ --subtle: #252b3c; /* D1 — was #20242f */ --hover: #2c3346; /* D1 — was #272c39 */ --chip-ink: #ffffff; --border: #333b4e; /* D1 — was #2a2f3c */ --border-strong: #47516a; /* D1 — was #3a4151 */ --text: #e7e9ee; --muted: #9aa1b3; --faint: #939bad; /* 6.03 on --panel, 6.45 on --bg, 5.88 on --bg-2; still dimmer than dark --muted #9aa1b3, so the hierarchy holds */ --accent: #5f92b4; /* RESTYLE — lighter steel, AA on dark for links/icons (was indigo #6366f1) */ --accent-hover: #7fadc9; --accent-soft: #182634; /* navy-black wash (matches order.html) */ --accent-warm: #c2a367; /* champagne, nudged lighter for AA on dark; DECORATIVE only */ --accent-warm-soft: #2a2318; --gold: #c9a659; --danger: #f97066; --danger-soft: #2b1a1a; --danger-ink: var(--danger); --on-danger: #2a0a08; --ok: #3ccb7f; --ok-soft: #13251d; --warn: #f5a524; --warn-soft: #2a2012; --ok-ink: var(--ok); --warn-ink: var(--warn); /* LAW-A 2026-08-15 (#19) — dark-mode sibling. Aliasing --info (matches how --ok-ink/ --warn-ink alias their fill colour on dark). Measured: 6.68 on --panel, 7.77 on --bg, 6.09 on --subtle — all AA. */ --info-ink: var(--info); --info: #53b1fd; /* SPEC208 */ --info-soft: #102a43; --code-bg: #14161f; /* SPEC208 */ --code-text: #e7eaf2; --ring-rgb: 95, 146, 180; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.6), 0 6px 14px -6px rgba(0,0,0,.45); /* SPEC175 — wider, softer ambient */ --card-hi: inset 0 1px 0 rgba(255,255,255,.07); /* D1 — was .04 */ --sidebar-bg: #0f1722; /* RESTYLE — navy-black, not neutral-black */ --sidebar-border: #1c2030; --sidebar-text: #9aa1b9; --sidebar-active: #ffffff; --sidebar-active-bg: color-mix(in srgb, var(--accent) 22%, transparent); /* SPEC175 — deeper accent tint on the dark rail */ --ghost-border: #3a4254; /* D2 — ghost buttons need a visible edge on dark */ /* SPEC-DHSHELL D1 dark counterparts — only the tokens that are genuine NEW literals in :root (the tone borders + neutral bg + the three named shadows) need a dark entry; the tone bg/fg legs alias existing tokens (--danger-soft etc) that already have their own dark values above, so they need no redeclaration here. Kept in step with the @media print re-pin below per r4/A4/A5. */ --tone-red-bd: rgba(249,112,102,.32); --tone-amber-bd: rgba(245,165,36,.32); --tone-green-bd: rgba(60,203,127,.32); --tone-neutral-bg: var(--subtle); --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-popover: 0 20px 44px -10px rgba(0,0,0,.55); --shadow-modal: 0 24px 60px -12px rgba(0,0,0,.6); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-body); } /* running prose keeps proportional figures + natural spacing */ .markdown-body, .view-sub, .chat-text, p { font-variant-numeric: normal; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* RESTYLE — editorial serif display at the TOP of the hierarchy only (restraint): page titles. Fraunces at a light weight + negative tracking against the Inter body is the single strongest "a person designed this" signal, and unifies the Hub with the marketing site. DESIGNA 2026-08-19 (RULING — Vincent: "aligned look") — the big money/KPI FIGURES moved OFF Fraunces and back to Inter: fraunces-var.woff2 ships NO `tnum` GSUB feature, so the tabular-nums declared below silently never worked ($1,111 vs $8,000 measured 23.4px apart in a stacked KPI column). Inter's tnum is real. Serif stays on titles/headings only — NEVER on numerals; do not route a numeric class back to var(--font-serif). */ .view-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--ls-tight); } .kpi-value, .stat-n, .cstatus-impact-n, .fin-n, .metric-big, .scoreboard-n { font-family: var(--font); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; } ::placeholder { color: var(--faint); } ::selection { background: var(--accent-soft); color: var(--text); } /* keyboard-only focus ring (mouse clicks stay clean); never strip outline without this */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); transition: box-shadow var(--t-fast) var(--ease); } /* refined scrollbars on the main scroll area */ #main { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } #main::-webkit-scrollbar { width: 10px; height: 10px; } #main::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } #main::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* slick pick — 120ms cross-fade on view switches (App.refresh / App._canViewTransition in core.js). Uses the existing --t-fast motion token so it matches every other quick transition in the app. The pseudo-element tree the View Transitions API creates lives outside the normal DOM, so the *,*::before,*::after reduced-motion net above doesn't reach it — hence the explicit rule below. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-fast); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ============ layout ============ */ #app { display: flex; height: 100vh; height: 100dvh; } /* SAFPOLISH 2026-08-25 D3 — dvh fallback, same two-line pattern as .chat-layout (:2603) */ /* SPEC-DHSHELL D3 — #content-col groups the new #topheader with #main so the header sits above the content and to the right of the rail (see index.html comment). #main keeps its own flex:1/overflow-y:auto below, unchanged. */ #content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* SPEC-V2POLISH1 D1 — re-measured against the prototype header (VVT-Hub-Owner.dc.html ~line 44: "height:54px;...gap:14px;padding:0 24px"). Height already matched (54px); gap 10→14 and padding 18→24 were the two hand-typed one-offs. */ #topheader { height: 54px; flex: 0 0 54px; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); z-index: 2; } /* SPEC-DHSHELL D3 — the four reparented controls (search/sync/bell/role-indicator) keep their existing classes/ids (see core.js buildSidebarSearch/buildNotifBell/ buildViewAsSwitcher); they were tuned for the dark rail (rgba(255,255,255,..) overlays), so they need a light-surface reskin now that they sit on --panel. */ #topheader .sidebar-search { /* SPEC-V2POLISH1 D1 — prototype's search field is a fixed 34px tall with 0 12px padding (min-width 260px, ours stays 320px — a real, wider search input, not a mockup placeholder, so the width difference is a deliberate product difference, not a fidelity miss). 7px 10px padding (no explicit height) rendered ~1-2px shorter and off the shared 34px rhythm the sync pill/bell/view-as button (see below) already sit on. */ height: 34px; width: 320px; max-width: 40vw; margin: 0; padding: 0 12px; border: 1px solid var(--border); background: var(--subtle); color: var(--muted); } #topheader .sidebar-search:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); } #topheader .sidebar-search .ss-kbd { color: var(--muted); background: var(--panel); border-color: var(--border-strong); } #topheader .sync-pill { background: var(--tone-neutral-bg); flex: 0 0 auto; } #topheader .view-as { background: var(--tone-neutral-bg); flex: 0 0 auto; } #topheader .view-as-select { background-color: var(--panel); color: var(--text); border-color: var(--border-strong); } #topheader .view-as-select:focus { border-color: var(--accent); } #topheader .spacer { flex: 1; } /* the bell collapses to an icon-only circular button in the header (was a labeled footer row); .notif-bell-badge's halo ring tracks --panel here, not the dark rail */ #topheader #notif-bell { flex-direction: row; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; color: var(--muted); } #topheader #notif-bell:hover { background: var(--hover); color: var(--text); } #topheader #notif-bell span:not(.help-q):not(.notif-bell-badge) { display: none; } #topheader #notif-bell .help-q { background: transparent; width: auto; height: auto; } #topheader .notif-bell-badge { box-shadow: 0 0 0 2px var(--panel); } #sidebar { width: 82px; flex: 0 0 82px; background: var(--sidebar-bg); color: var(--sidebar-text); /* align-items left at its flex default (stretch) — NOT center — so #nav/.nav-group/ .nav-item/#nav-shortcuts all stretch to the rail's own content width instead of sizing to their own (wider) content and bleeding out past the 82px edge, which is exactly what .nav-sc-head's "Shortcuts + [+]" row did with align-items:center. */ display: flex; flex-direction: column; padding: 14px 6px; gap: 4px; /* SPEC175 — a crisp inner edge + a faint cast shadow so the rail reads as a separate, slightly-raised surface (the expensive-app cue). */ box-shadow: inset -1px 0 0 var(--sidebar-border), 2px 0 14px -6px rgba(0,0,0,.4); z-index: 2; border-top: 3px solid var(--role-tint); /* SPEC209 L2 — ambient per-role context band */ } /* SPEC209 L2 — per-role context tint (calm ambient signal; Arc "Spaces" idea). Owner = brand accent (default, subtle), Manager = teal, Crew = amber. Never competes with the single primary accent — it's just a hairline that says which context you're in. */ :root { --role-tint: var(--accent); } html[data-tier="manager"] { --role-tint: #1e3f66; } /* RESTYLE — deep harbor (was teal #14a8a0) */ html[data-tier="crew"] { --role-tint: #b18f52; } /* RESTYLE — champagne (was amber #e0871d); one navy+brass system */ #main { flex: 1; overflow-y: auto; min-width: 0; } #view { padding: 26px 30px 60px; max-width: 1340px; margin: 0 auto; } /* SPEC-DHSHELL D2 — 82px rail: logo mark only (brand-text/name/sub return in the ≤860px labeled drawer, SPEC86 query). */ .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 14px; } .brand-text { display: none; } .brand-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, #3f77ab, #2b608f 55%, #1e3f66); /* RESTYLE — the logo cube navies (was indigo→violet) */ color: #fff; font-weight: var(--fw-black); font-size: 17px; display: flex; align-items: center; justify-content: center; } .brand-logo--img { background: #fff !important; } /* SPEC235 — a logo image overrides the gradient letter-mark */ .brand-name { color: #fff; font-weight: var(--fw-bold); font-size: 15px; letter-spacing: .2px; } .brand-sub { font-size: var(--fs-micro); color: var(--sidebar-text); } /* SPEC235 — subtle "Powered by [studio]" credit for client-facing pages (toggle-gated) */ .powered-by { font-size: var(--fs-micro); color: var(--muted); text-align: center; letter-spacing: var(--ls-label); opacity: .8; margin-top: 8px; } /* SPEC236 — demo-mode ribbon: an always-visible, non-dismissible safety signal. Fixed to the bottom-center so it never reflows the fixed shell; floats above everything. */ .demo-ribbon { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 14px; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #000 8%), var(--accent)); color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.12) inset; font-size: 12.5px; backdrop-filter: saturate(1.2); -webkit-backdrop-filter: saturate(1.2); /* SAFPOLISH 2026-08-25 D4 */ } .demo-ribbon-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(255,255,255,.25); animation: demoPulse 2s ease-in-out infinite; } @keyframes demoPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.22); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.08); } } .demo-ribbon-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo-ribbon-txt strong { font-weight: var(--fw-black); letter-spacing: .02em; } .demo-ribbon-sub { opacity: .9; } .demo-ribbon-acts { display: flex; gap: 6px; flex: 0 0 auto; } .demo-ribbon-acts .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); } .demo-ribbon-acts .btn:hover { background: rgba(255,255,255,.28); } .demo-ribbon-acts .btn-primary { background: #fff; color: var(--accent); border-color: #fff; font-weight: var(--fw-bold); } .demo-ribbon-acts .btn-primary:hover { background: #fff; opacity: .92; } @media (max-width: 640px) { .demo-ribbon-sub { display: none; } .demo-ribbon { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .demo-ribbon-dot { animation: none; } } #nav, #nav-bottom { display: flex; flex-direction: column; gap: 1px; } #nav { flex: 0 0 auto; } /* RAILFIT 2026-09-25 — the desktop rail (nav + Settings + avatar) measures ~896px tall, but #app is exactly one viewport tall and #sidebar never scrolled, so on any window under ~900px (every MacBook) the rail spilled out and the WHOLE window scrolled ~135px on every view (Vincent: "the pages are ever so slightly too big"). The rail now scrolls itself, scrollbar hidden; the page never does. Desktop only — ≤860px is the off-canvas drawer with its own rules. */ @media (min-width: 861px) { #sidebar { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; min-height: 0; } #sidebar::-webkit-scrollbar { display: none; } } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: var(--sidebar-text); cursor: pointer; font-weight: var(--fw-medium); font-size: 13.5px; border: none; background: none; width: 100%; text-align: left; font-family: inherit; } .nav-item { position: relative; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav-item:hover { background: var(--sidebar-hover); color: #fff; } .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active); font-weight: var(--fw-semibold); } /* SPEC175 — the active rail is a confident accent tab flush to the edge + an accent-lit icon */ .nav-item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 999px 999px 0; background: var(--accent); } .nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; } .nav-item.active svg { color: var(--accent); } /* SPEC28 D — grouped sidebar (App.NAV_GROUPS). A .nav-group wraps a small uppercase label + that group's nav-items. */ .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-group + .nav-group { margin-top: 11px; } .nav-group-label { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .8px; /* LAW-A 2026-08-15 (#22) — was var(--faint), a PAGE ink meant for the light --panel/--bg surfaces. The sidebar rail is #16202e in BOTH themes (--sidebar-bg), so the light-theme --faint (#656d7b) landed on it too. Measured on --sidebar-bg: --faint 3.15:1 (FAIL) → --sidebar-text 6.38:1 (PASS). Dark theme was already fine (--faint dark 6.46:1 → --sidebar-text 7.01:1) so this is a light-mode-only fix, no dark regression. */ color: var(--sidebar-text); padding: 2px 10px 4px; user-select: none; } /* first label hugs the search/brand a little less than inter-group gaps */ #nav > .nav-group:first-child { margin-top: 2px; } /* FLOWDROP 2026-08-20 — the nav 'More' fold (navMoreFold, core.js). .nav-group-body holds the folded items with the SAME rhythm as .nav-group itself; .nav-more-toggle is a plain .nav-item reused as the fold's own row so it costs nothing new visually. */ .nav-group-body { display: flex; flex-direction: column; gap: 1px; } .nav-more-toggle { opacity: .82; } .nav-more-toggle .nav-ico { font-weight: var(--fw-bold); font-size: 15px; justify-content: center; display: inline-flex; } /* ============================================================ SPEC-DHSHELL D2 — 82px icon rail: navItem() still emits the exact same two spans (.nav-ico + a plain label span) it always has; everything below is box-model only. Same #nav/#nav-bottom DOM, same residencyShows/canViewId/View-as filtering, same click handlers/ids, same badge elements — restyled to read as icon-over-label. Reverted for the ≤860px labeled drawer by the existing SPEC86 query further down. ============================================================ */ .nav-item { flex-direction: column; justify-content: center; gap: 3px; padding: 9px 3px; text-align: center; width: 100%; } .nav-item span:not(.nav-ico):not(.nav-badge) { font-size: 10px; line-height: 1.15; font-weight: var(--fw-medium); max-width: 100%; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; } /* the accent tab now spans the item's (much taller, stacked) height instead of a fixed centered 18px pill sized for the old single-line row */ .nav-item.active::before { top: 6px; bottom: 6px; height: auto; transform: none; } .nav-badge { position: absolute; top: 4px; right: 12px; margin-left: 0; /* was margin-left:auto, for the old horizontal row */ min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; border-radius: var(--radius-pill); } .nav-group-label { display: none; } /* icon-only rail; group rhythm still reads from .nav-group's own spacing below */ .nav-group + .nav-group { margin-top: 10px; } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 6px; width: 100%; } /* stretch (default), same overflow reasoning as #sidebar above */ .sync-pill { display: flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.05); cursor: default; } .sync-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex: 0 0 8px; } .sync-pill.ok .dot { background: var(--ok); } .sync-pill.syncing .dot { background: var(--warn); animation: pulse 1s infinite; } .sync-pill.error .dot { background: var(--danger); } /* SPEC237 — offline is EXPECTED, not broken: a calm slate dot, never alarming red. */ .sync-pill.offline .dot { background: #64748b; } @keyframes pulse { 50% { opacity: .5; } } /* SPEC237 — Field connectivity banner: honest "saved on your phone" reassurance. */ .field-conn-wrap { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; } .field-conn { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-radius: 12px; font-size: var(--fs-caption); line-height: var(--lh-normal); font-weight: var(--fw-semibold); } .field-conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; margin-top: 4px; } .field-conn.offline { background: color-mix(in srgb, #64748b 16%, var(--card)); color: var(--text); border: 1px solid color-mix(in srgb, #64748b 30%, transparent); } .field-conn.offline .field-conn-dot { background: #64748b; } .field-conn.pending { background: var(--accent-soft); color: var(--accent-hover); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .field-conn.pending .field-conn-dot { background: var(--accent); animation: pulse 1.2s infinite; } /* AUDIT 08-01 — "stalled": the phone thinks it is online but sync is not getting through (basement/garage/dying cell). Amber, not the calm grey of a known offline stint and not the red of a broken app — something IS wrong and only this person can act on it. */ .field-conn.stalled { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); } .field-conn.stalled .field-conn-dot { background: var(--warn); } .field-conn-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .field-conn-retry { min-height: 44px; flex: 0 0 auto; } /* a11y — ≥44px touch target, one-handed in the field */ .field-wrap.field-sun .field-conn.stalled { background: #ffffff; color: #7c2d12; border: 2px solid #b45309; } /* SPEC237 — Install-to-phone chip (Android prompt / iOS Add-to-Home-Screen hint). */ .install-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 13px; border-radius: 12px; font-size: var(--fs-caption); line-height: 1.45; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .install-chip-txt { display: flex; align-items: center; gap: 4px; flex: 1 1 220px; min-width: 0; color: var(--text); } .install-chip-acts { display: flex; gap: 6px; flex: 0 0 auto; } .install-chip-acts .btn { min-height: 44px; } /* SPEC237 a11y — ≥44px touch target on the field install chip */ /* SPEC31 — "View as" role previewer (sidebar footer, login-off only) */ .view-as { display: flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.05); } .view-as-label { color: var(--faint); white-space: nowrap; } .view-as-select { flex: 1; min-width: 0; font-size: 11.5px; padding: 4px 6px; border-radius: 6px; background-color: rgba(255,255,255,.07); color: inherit; border: 1px solid rgba(255,255,255,.12); cursor: pointer; } .view-as-select:focus { outline: none; border-color: var(--accent); } /* SPEC39 — back/forward nav arrows */ .nav-arrows { display: flex; gap: 6px; padding: 0 2px 6px; } .nav-arrow { flex: 1; height: 30px; border: 1px solid var(--sidebar-border); background: rgba(255,255,255,.04); color: var(--sidebar-text); border-radius: 7px; cursor: pointer; font-size: var(--fs-lg); line-height: 1; } .nav-arrow:hover:not(:disabled) { background: rgba(255,255,255,.1); color: #fff; } .nav-arrow:disabled { opacity: .5; cursor: not-allowed; } /* ============ view header & toolbar ============ */ /* SPEC175 — every view opens with a calm editorial masthead (serif title + hairline) echoing the freshly-cinematic client surfaces; this header IS the per-view chrome. */ .view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); flex-wrap: wrap; } /* SPEC-DHSHELL D4 — README type table: page title = Fraunces 600, 30-34px, -.02em. Weight was already 600 (--fw-semibold, the WIP font-swap had that half done); only the size was short at --fs-display (28px, shared with unrelated components — see --fs-page-title's own comment in :root). New dedicated token, nothing else touched. */ .view-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: var(--fs-page-title); font-weight: var(--fw-semibold); margin: 0; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } .view-title svg { color: var(--accent); } /* SPEC208 — title icons carry the brand accent for one consistent header language */ .view-sub { color: var(--muted); font-size: var(--fs-caption); margin-top: var(--space-2); } .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .spacer { flex: 1; } /* SPEC-PHONEBOARD 2026-09-04 — .toolbar already wraps (above), but MEASURED at 430px the Tracker's search and the Table/Kanban/Calendar/Timeline .seg refused to shrink and ran off the right edge with the Display and New-job buttons behind them. Under the phone breakpoint the search takes its own full row and a segmented control may wrap its buttons; nothing is hidden, nothing is resized — it just stops overflowing. */ @media (max-width: 700px) { /* specificity matters here: `.jt-view .toolbar .search-input { min-width: 190px }` (styles.css ~9991) is (0,3,0) and silently beat the first, lighter version of this rule — measured: the search box still ran off the edge with the rule "applied". */ .jt-view .toolbar .search-input, .toolbar > input, .toolbar > .input { flex: 1 1 100%; min-width: 0; width: 100%; } .jt-view .toolbar .select, .toolbar > .select { min-width: 0; flex: 1 1 auto; } .toolbar .seg { flex-wrap: wrap; } .toolbar .seg > button { flex: 1 1 auto; } .jt-header-btns { flex-wrap: wrap; } .jt-header-btns > * { flex: 1 1 auto; } } /* WORLD-CLASS ② — the tucked "More filters" row: reads as a secondary shelf under the toolbar (subtle inset panel) so revealing it feels like opening a drawer, not adding clutter. */ .toolbar-more { margin-top: -6px; margin-bottom: 14px; padding: 9px 11px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); animation: tile-in .2s var(--ease) both; } /* ============ buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; font-family: inherit; white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn:hover { background: var(--subtle); } .btn:active { transform: translateY(.5px); box-shadow: inset 0 2px 4px rgba(0,0,0,.12); } /* black darkens in both themes */ /* SPEC208 — clean, modern primary: a flat top-to-bottom accent gradient + a single soft tinted shadow (the old inset-white gloss read skeuomorphic / "templated"). */ .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-hover)); border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(var(--ring-rgb), .28); } .btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); box-shadow: 0 4px 12px -3px rgba(var(--ring-rgb), .45); transform: translateY(-.5px); } .btn-primary:active { background: var(--accent-hover); box-shadow: inset 0 2px 5px rgba(0,0,0,.18); transform: scale(.97); } /* SPEC-DHSHELL D1 — README motion spec: primary-button press is scale(.97), not a nudge */ .btn-primary:disabled { background: var(--bg-2); } /* RESTYLE — on dark the steel --accent is too light for white button text; fill with a deep harbor navy so white stays AA (9.6:1) and the button still pops off the dark ground. */ /* RESILIENCE 07-30 — a pure specificity bug with a real consequence. This selector is (0,2,1) and beat `.btn-primary:disabled` at (0,2,0), so in DARK MODE a disabled primary button painted pixel-identical to an enabled one (measured: both `linear-gradient(rgb(39,80,127), rgb(30,63,102))`). Every incomplete-form Save button in the app looked clickable and silently did nothing — light mode was fine, which is exactly why it survived. `:not(:disabled)` scopes the dark paint to enabled buttons and lets the disabled rule win, without touching either colour. */ html[data-theme="dark"] .btn-primary:not(:disabled) { background: linear-gradient(180deg, #27507f, #1e3f66); box-shadow: 0 1px 2px rgba(0,0,0,.45); } html[data-theme="dark"] .btn-primary:hover { background: linear-gradient(180deg, #2f5c90, #234978); } html[data-theme="dark"] .btn-primary:active { background: #1a3557; } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: var(--panel); } .btn-danger:hover { background: var(--danger-soft); } .btn-ghost { border-color: var(--ghost-border); background: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--hover); color: var(--text); } .btn-sm { padding: 6px 12px; font-size: var(--fs-meta); } .btn-icon { padding: 8px; line-height: 0; min-width: 32px; min-height: 32px; justify-content: center; } .btn svg { width: 15px; height: 15px; } .btn:disabled { color: var(--muted); background: var(--bg-2); border-color: var(--border); cursor: not-allowed; box-shadow: none; } /* ============ inputs ============ */ /* SPEC175 — fields rest as a soft inset well, then lift to white paper on focus */ .input, .select, .textarea { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-caption); font-family: inherit; background-color: var(--subtle); color: var(--text); outline: none; min-width: 0; } /* background-color (not the `background` shorthand) — a shorthand here would reset .select's custom chevron background-image to `none` on every rest/focus repaint */ .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background-color: var(--panel); box-shadow: var(--focus-ring-soft); outline: none; } .input, .select, .textarea { transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .input:hover, .select:hover, .textarea:hover { border-color: var(--muted); } .textarea { resize: vertical; min-height: 70px; line-height: var(--lh-normal); } .select { cursor: pointer; } .field { display: flex; flex-direction: column; gap: 5px; } .field > label { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--muted); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-grid .full { grid-column: 1 / -1; } .search-input { min-width: 200px; } /* ============ custom form controls — checkboxes, radios, selects, date/time, range ============ AUDIT-UI-FORMS-2026-07-30 — every checkbox/select/date/range in the Hub painted with the browser's own OS-native widget (a different look on macOS/Windows/iOS/Android, unmistakably default). Pure CSS, zero markup/JS changes: appearance:none + hand-drawn chrome built entirely from the existing token set — every fill/border below is a `var(--…)` reference, contrast-checked in both themes (numbers in the audit report). Targets the bare element (input[type=…], select) rather than a class, since these controls are created all over the codebase with different or no wrapper class — this way every existing call site inherits the new look for free, no JS/markup touched. */ /* ---- checkboxes + radios (206 checkbox call sites, 0 radios today but styled the same for whenever one appears) ---- */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0; padding: 0; flex: 0 0 auto; position: relative; /* --border-strong (the usual card/table hairline) reads too faint here — 1.47:1 / 1.65:1 against --panel, the exact kind of number this audit flags. A checkbox's whole job is showing on/off, so it gets the stricter --muted (6.54:1 / 6.50:1, clears the WCAG 1.4.11 3:1 non-text floor with real margin — see report). */ border: 1.5px solid var(--muted); border-radius: 5px; background-color: var(--panel); display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:not(:disabled):hover, input[type="radio"]:not(:disabled):hover { border-color: var(--accent); } /* checkmark — a two-border "tick" (no icon font, no SVG needed here), scaled to 0 at rest and springing in on check so the state change reads as a deliberate tap */ input[type="checkbox"]::before { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; /* white ink on a filled accent square — the same #fff-on-accent convention .btn-primary already uses */ transform: rotate(45deg) translate(-1px, -1px) scale(0); transition: transform var(--t-fast) var(--ease-spring); } input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate { background-color: var(--accent); border-color: var(--accent); } input[type="checkbox"]:checked::before { transform: rotate(45deg) translate(-1px, -1px) scale(1); } input[type="checkbox"]:indeterminate::before { width: 9px; height: 0; border-width: 0 0 2px 0; transform: scale(1); } /* dark theme: bare --accent only clears 3.36:1 for the white tick — a thin margin. Darken via color-mix (never a second hardcoded hex) so it stays 100% token-derived; lands at 5.15:1. */ html[data-theme="dark"] input[type="checkbox"]:checked, html[data-theme="dark"] input[type="checkbox"]:indeterminate { background-color: color-mix(in srgb, var(--accent) 78%, black); border-color: color-mix(in srgb, var(--accent) 78%, black); } /* radio — a ringed dot, not a filled square (the near-universal on/off-vs-choose-one visual split): the dot paints in --accent sitting on --panel, so the white-on-accent contrast question above never even arises here */ input[type="radio"]::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background-color: var(--accent); transform: scale(0); transition: transform var(--t-fast) var(--ease-spring); } input[type="radio"]:checked { border-color: var(--accent); } input[type="radio"]:checked::before { transform: scale(1); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: .55; } /* WCAG exempts inactive controls from the contrast floor — opacity is signal enough */ input[type="checkbox"]:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-1); } /* DHSWEEP W9 — was a literal 5px, exactly --radius-1's value; zero-diff token wire */ input[type="radio"]:focus-visible { box-shadow: var(--focus-ring); border-radius: 50%; } /* ---- selects (431 call sites) — kill the native arrow, draw our own ---- */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; /* chevron stroked with currentColor so it always matches the select's own text ink — zero hex baked into the icon, so it re-tints correctly in dark mode (and on the sidebar's `.view-as-select`, which uses `color: inherit` on a dark rail) with no extra rule. Verified 12.76–17.75:1 against every rest/focus background this select can sit on — nowhere close to the 3:1 floor (see report). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.2 10.5 2' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 11px 7px; } /* padding-right has to out-specificity .input/.select/.textarea's padding SHORTHAND above, so this matches it class-for-class rather than relying on the bare tag */ select.select, select.input, select.cell-input, select.view-as-select { padding-right: 30px; } select:disabled { background-color: var(--bg-2); color: var(--muted); cursor: not-allowed; border-color: var(--border); } /* ---- date / time — the OS still draws the calendar/clock GLYPH itself; we own its affordance (pointer cursor, a soft hover/focus halo) so it reads as part of the same field system as every text input, not a bolted-on OS widget. The field SHELL itself (border/padding/background) already comes free from the shared .input class every date/time site already carries. WebKit-only pseudo-element (Chrome/Edge/Safari); Firefox's compact date/time widget has no equivalent hook and already inherits the field's own border/background/color from .input. ---- */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: 4px; padding: 3px; margin-right: -3px; opacity: .7; transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } input[type="date"]:not(:disabled):hover::-webkit-calendar-picker-indicator, input[type="time"]:not(:disabled):hover::-webkit-calendar-picker-indicator, input[type="date"]:focus::-webkit-calendar-picker-indicator, input[type="time"]:focus::-webkit-calendar-picker-indicator { opacity: 1; background-color: var(--hover); } input[type="date"]:disabled, input[type="time"]:disabled { background-color: var(--bg-2); color: var(--muted); cursor: not-allowed; border-color: var(--border); } /* ---- range (7 call sites) — track + thumb, both engines. Excludes the two special image-comparison drag-handles (order.js's before/after slider, cstatus's revision slider) — those are already fully custom, invisible-track overlays for a completely different interaction (a full-bleed drag handle, not a value slider); this track/thumb design is for genuine VALUE sliders (Conditions' time-of-day dial, the self-review comfort/tone sliders). ---- */ input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range) { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 6px; padding-block: 12px; background: transparent; cursor: pointer; margin: 0; } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background-color: var(--border-strong); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background-color: var(--accent); border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; transition: transform var(--t-fast) var(--ease); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-moz-range-track { height: 6px; border-radius: 999px; background-color: var(--border-strong); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-moz-range-progress { height: 6px; border-radius: 999px; background-color: var(--accent); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; background-color: var(--accent); border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; transition: transform var(--t-fast) var(--ease); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range):not(:disabled):hover::-webkit-slider-thumb, input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range):not(:disabled):hover::-moz-range-thumb { transform: scale(1.1); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range):focus-visible { box-shadow: none; } /* suppress the sitewide bare :focus-visible ring on the (transparent, 6px-tall) outer element — the thumb below carries its own ring instead */ input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range):focus-visible::-webkit-slider-thumb, input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range):focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); } /* dark theme: the plain --accent thumb only clears 3.05:1 against the (dark) --border-strong track — thin margin. Swap to --accent-hover (dark theme's LIGHTER variant — an existing token, not a new color) for 4.25:1 instead. */ html[data-theme="dark"] input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-webkit-slider-thumb, html[data-theme="dark"] input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range)::-moz-range-thumb { background-color: var(--accent-hover); } input[type="range"]:not(.order-ba-range):not(.cstatus-lb-rev-range):disabled { opacity: .5; cursor: not-allowed; } /* ============ cards & KPIs ============ */ /* SPEC175 — cards read as floating paper: larger radius (matches kpi/modal) + the softened two-layer resting shadow. */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow), var(--card-hi); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); } .card.is-clickable { cursor: pointer; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .card.is-clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .card-pad { padding: 18px 20px; } .card-title { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 12px; } .card-title svg { flex: 0 0 auto; } /* SPEC208 — card icons inherit the muted title color (calm secondary-header hierarchy) */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; } /* WORLD-CLASS ① — a fixed 4-metric scoreboard row lays out 4-up on wide screens and a clean 2×2 on narrower ones, never an orphaned 3+1 (the mobile rules below take over ≤400). */ .kpi-row--quad { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1120px) { .kpi-row--quad { grid-template-columns: repeat(2, 1fr); } } .kpi-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm), var(--card-hi); padding: 15px 17px; transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .kpi-card:hover { box-shadow: var(--shadow), var(--card-hi); border-color: var(--border-strong); } /* ④ fix — a KPI card must be able to shrink inside its grid track (grid items floor at min-content by default) and its embedded revenue sparkline (a fixed 140px span) must scale down, so two-up never forces a horizontal scroll on ~360px phones. */ .kpi-card { min-width: 0; } .kpi-card .spark, .kpi-card .spark svg { max-width: 100%; } .kpi-label { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .kpi-value { font-size: 26px; font-weight: var(--fw-black); letter-spacing: var(--ls-tight); margin-top: 4px; } .kpi-hint { font-size: 11.5px; color: var(--faint); margin-top: 3px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* let cards shrink with their track instead of forcing min-content width (otherwise narrow viewports get horizontal page scroll) */ .grid-2 > *, .grid-3 > *, .settings-grid > * { min-width: 0; } /* WAVE0-A A11 (should-land polish, taken up by Section B in Wave 1) — the Media view's per-job browser (media.js): asset grid + a 300px sidebar, unreadably squeezed together on a phone; stacks at ≤640, sidebar second. */ .media-body-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; } @media (max-width: 640px) { .media-body-grid { grid-template-columns: 1fr; } } /* ============ tables ============ */ .table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm), var(--card-hi); } /* D17(a)/D22 — right-edge scroll affordance (App.wireScrollFade, core.js) so a horizontally-clipped mobile table/board signals "more this way" instead of just cutting content off mid-badge with no cue. Mobile-only: at desktop widths these containers rarely overflow, and the base table/board layout doesn't change here. */ @media (max-width: 640px) { .scroll-fade-x { position: relative; } .scroll-fade-x::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, var(--panel)); pointer-events: none; opacity: 1; transition: opacity var(--t-fast) var(--ease); } /* the mobile task board sits directly on the page ground, not a panel card */ .tk-board.scroll-fade-x::after { background: linear-gradient(to right, transparent, var(--bg)); } .scroll-fade-x.at-end::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .scroll-fade-x::after { transition: none; } } } table.table { border-collapse: collapse; width: 100%; font-size: var(--fs-caption); } /* SPEC175 — calmer, taller rows + crisper hairlines + a soft accent-tinted hover rail */ .table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--subtle); white-space: nowrap; position: relative; } .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table th:first-child, .table td:first-child { padding-left: 18px; } .table th:last-child, .table td:last-child { padding-right: 18px; } /* WAVE0-A A10 (should-land polish, taken up by Section B in Wave 1) — the Clients Directory table (clients.js: List AND Ranked modes both mark their cells with these cl-col-* hooks) hides its least decision-relevant columns at ≤1179 and keeps the Name column pinned while the rest scrolls, the same sticky-first-column idiom the Tracker table already uses (.jt-table-wrap ~9142 above) — mirrored here rather than reused directly since that block is checkbox-column-aware and this table never has one. */ @media (max-width: 1179px) { .cl-col-aov, .cl-col-last { display: none; } table.table thead th.cl-col-name { position: sticky; left: 0; z-index: 6; background: var(--subtle); } table.table tbody tr:not(.group-head) > td.cl-col-name { position: sticky; left: 0; z-index: 2; background: var(--panel); } /* sticky cells MUST be opaque */ table.table tbody tr:not(.group-head):hover > td.cl-col-name { background: var(--hover); } /* one-line Contact: the channel chip + email share a row, truncated; the phone (least urgent of the three at this width) steps aside — still one tap away in the client's own profile. */ .cl-col-contact { display: flex; align-items: center; gap: 6px; max-width: 230px; overflow: hidden; } .cl-col-contact > div:nth-child(1) { flex: none; margin-bottom: 0; } .cl-col-contact > div:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-col-contact > div:nth-child(3) { display: none; } } /* CONSOL-3 — row DENSITY presets (comfortable = the default above). The differences are REAL: compact shrinks padding + font + line-height AND the in-row controls (the status/ priority selects + chips dominate row height, so they must shrink too); big is roomy and expands the services. */ .table-wrap.density-compact table.table { font-size: 11.5px; line-height: var(--lh-tight); } .table-wrap.density-compact table.table td { padding: 1px 6px; } .table-wrap.density-compact table.table th { padding: 3px 6px; } .table-wrap.density-compact table.table th:first-child, .table-wrap.density-compact table.table td:first-child { padding-left: 10px; } .table-wrap.density-compact .btn, .table-wrap.density-compact .btn-sm, .table-wrap.density-compact select, .table-wrap.density-compact .select, .table-wrap.density-compact .chip, .table-wrap.density-compact .pill, .table-wrap.density-compact .status-select, .table-wrap.density-compact .svc-menu-trigger { font-size: var(--fs-micro); padding-top: 1px; padding-bottom: 1px; min-height: 0; line-height: 1.25; } .table-wrap.density-compact .clip-mini, .table-wrap.density-compact .row-sub, .table-wrap.density-compact .cell-sub { font-size: 10px; } .table-wrap.density-big table.table { font-size: 14.5px; line-height: 1.6; } .table-wrap.density-big table.table td { padding: 16px 16px; } .table-wrap.density-big table.table th { padding: 15px 16px; } .table-wrap.density-big select, .table-wrap.density-big .select, .table-wrap.density-big .btn-sm { font-size: 13.5px; } /* PEOPLE-PIPELINES-ACCESS 2026-09-26 Phase 3 — directory.js renders BOTH a desktop table and a phone card list (not one table with columns hidden, like .cl-col-* above): the plan's own test requirement is "at 375px there is no horizontal scroll", and .table-wrap's overflow-x:auto still lets a narrowed table scroll sideways. Below 641px the table hides outright and the card list (already a vertical stack, no fixed-width columns to overflow) takes over. */ .dir-mobile { display: none; } @media (max-width: 640px) { .dir-desktop { display: none; } .dir-mobile { display: flex; flex-direction: column; gap: 10px; } } /* CONSOL-3 — Excel-style column resize grip on the right edge of each header cell */ .col-resizable { position: relative; } .col-resize { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; } .col-resize::after { content: ''; position: absolute; top: 22%; bottom: 22%; right: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background var(--t-fast) var(--ease); } .col-resizable:hover .col-resize::after { background: var(--border-strong); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--t-fast) var(--ease); } .table tbody tr:hover { background: var(--hover); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } /* SPEC-V2CLICKEASE 2026-08-31 — an editable cell is no longer its OWN clickable thing (that was the double-click collision — a click meant for the row popped this cell's editor open instead). It reads as an ordinary cell of a clickable row now (tbody tr:hover above already washes the whole row), so the old whole-cell "this is special" outline is gone. What replaces it is `.jt-cell-pencil` — a small, quiet edit affordance, visible only on row hover/focus (mirrors the chat `--act` reveal, RULES.md §5.6) so editing reads as deliberate. position:relative on the td anchors the pencil's absolute placement without affecting cell text layout. */ .table td.editable { position: relative; } .table .row-click { cursor: pointer; } .jt-cell-pencil { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: 0; border-radius: 6px; border: 1px solid transparent; background: var(--panel); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease); z-index: 2; } .table tbody tr:hover .jt-cell-pencil, .table tbody tr:focus-within .jt-cell-pencil, .jt-cell-pencil:focus-visible { opacity: 1; } .jt-cell-pencil:hover { background: var(--hover); color: var(--text); border-color: var(--border); } .jt-cell-pencil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* SPEC-WAVE0-A A5 2026-09-02 — a mouse/trackpad laptop between 641px and 1279px had NO hover-reveal cue at all (opacity 0 at rest, only shown on a row hover it never got a signal to invite) — "hard to quickly edit", measured opacity 0 at 1440/1280/1180/1024/900 in reports-2026-09/audit- sys/inv-smallscreen.json. Pencils go permanently visible at <=1279px, but stay the SAME 22x22 mouse size here — the 44px TOUCH floor below is a separate concern (hover:none), untouched. */ @media (max-width: 1279px) { .jt-cell-pencil { opacity: 1; } } /* touch has no hover to reveal the pencil on — stay permanently visible there, at the 44px floor RULES.md §3.5 sets for any touch hit target. */ @media (max-width: 640px), (hover: none) { .jt-cell-pencil { opacity: 1; width: 44px; height: 44px; right: 0; top: 0; transform: none; border-radius: 0 4px 4px 0; background: transparent; } } .cell-input { width: 100%; border: 1px solid var(--accent); border-radius: 4px; padding: 4px 6px; font: inherit; outline: none; } .th-x { position: absolute; top: 2px; right: 2px; font-size: 10px; color: var(--faint); cursor: pointer; padding: 2px 4px; border-radius: 4px; display: none; background: none; border: none; font-family: inherit; line-height: 1; } .table th:hover .th-x { display: inline; } .th-x:hover { background: var(--danger-soft); color: var(--danger); } /* ============ chips & badges ============ */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: .1px; white-space: nowrap; line-height: 1.4; /* SPEC175 — a hairline ring in the chip's own hue (currentColor) → printed-label tactility */ box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent); } .chip.is-ok { background: var(--ok-soft); color: var(--ok-ink); } /* SPEC-A11Y — was var(--ok) (3.70:1 in light, fails AA); ink token is 5.40:1. Dark theme unaffected: --ok-ink aliases var(--ok) there. */ .chip.is-danger { background: var(--danger-soft); color: var(--danger-ink); } /* was var(--danger) (4.44:1 in light, fails AA); ink token is 6.05:1. Dark theme unaffected: --danger-ink aliases var(--danger) there. */ .chip.is-warn { background: var(--warn-soft); color: var(--warn-ink); } /* was var(--warn) (3.34:1 in light, fails AA); ink token is 5.20:1. Dark theme unaffected: --warn-ink aliases var(--warn) there. */ .chip.is-info { background: var(--accent-soft); color: var(--accent-hover); } /* SPEC198 — AA in dark (accent-on-accent-soft was 3.6:1) */ .chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; } /* SPEC127 — chip-x / view-chip-x are now