/* hifi/styles.css Two fonts: DM Sans (UI) + JetBrains Mono (data). Dark by default; light mode via .light-medium-contrast on . light-mc.css overrides the same tokens for light mode. */ /* ════════════════════════════════════════════════════════════════════ TOKENS (dark defaults — light-mc.css overrides these) html specificity (0,0,1) loses to .light-medium-contrast (0,1,0) ════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ──────────────────────────────────────────────────── */ --paper: rgb(255 248 244); --surface: rgb(230 218 205); --surface-low: rgb(245 236 226); --surface-deep: rgb(255 255 255); --ink: rgb(19 17 14); --ink-2: rgb(61 53 43); --ink-3: rgb(110 95 78); --ink-4: rgb(162 145 125); /* was rgb(118 107 96) — too close to ink-3 */ --accent: rgb(221, 147, 20); /* was rgb(73 50 16) — now reads as a color */ --accent-dim: rgb(205 158 35); /* was rgb(180 140 60) — more saturated */ --accent-on: rgb(255 248 232); /* was rgb(230 192 147) — lighter for contrast */ --green: rgb(28 105 0); /* was rgb(24 82 0) */ --green-dim: rgb(88 138 52); /* was rgb(81 119 60) */ --green-on: rgb(255 255 255); --hairline: color-mix(in srgb, var(--ink-3) 16%, transparent); --hairline-strong: color-mix(in srgb, var(--ink-3) 32%, transparent); --hairline-dashed: color-mix(in srgb, var(--ink-3) 45%, transparent); --running: var(--green); --done: var(--ink-3); --failed: rgb(116 0 6); --queued: var(--ink-4); --run-1: var(--ink); /* add this back */ --run-2: rgb(185 110 0); --run-3: rgb(45 130 10); --run-4: rgb(175 25 15); --run-5: rgb(20 80 200); --run-6: rgb(78, 19, 161); --run-7: rgb(132, 15, 138); --run-8: rgb(18, 152, 150); --run-9: rgb(81, 185, 6); /* ── Typography ────────────────────────────────────────────────── */ --ui: 'DM Sans', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Type scale ────────────────────────────────────────────────── */ --t-xs: 12.5px; --t-sm: 14px; --t-md: 15.5px; --t-lg: 18px; --t-xl: 21px; --t-xxl: 26px; --t-display: 36px; /* ── Spacing ───────────────────────────────────────────────────── */ --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 24px; --sp-5: 32px; --sp-6: 44px; --sp-7: 56px; --radius-sm: 4px; --radius-md: 8px; /* ── Chart strokes ─────────────────────────────────────────────── */ --chart-axis-stroke: color-mix(in srgb, var(--ink) 18%, transparent); --chart-grid-stroke: color-mix(in srgb, var(--ink) 6%, transparent); --chart-zero-stroke: color-mix(in srgb, var(--ink) 16%, transparent); } .dark { /* ── Surfaces ──────────────────────────────────────────────────── */ --paper: rgb(24 19 11); /* main background */ --surface: rgb(45 39 31); /* elevated: cards, inputs */ --surface-low: rgb(34 29 21); /* recessed: left rail */ --surface-deep: rgb(11 7 3); /* player backdrop */ /* ── Ink ───────────────────────────────────────────────────────── */ --ink: rgb(236 225 212); --ink-2: rgb(210 196 180); --ink-3: rgb(155 143 128); --ink-4: rgb(79 69 57); /* ── Hairlines ─────────────────────────────────────────────────── */ --hairline: color-mix(in srgb, var(--ink-3) 16%, transparent); --hairline-strong: color-mix(in srgb, var(--ink-3) 32%, transparent); --hairline-dashed: color-mix(in srgb, var(--ink-3) 45%, transparent); /* ── Accent (amber) ────────────────────────────────────────────── */ --accent: rgb(233, 169, 30); --accent-on: rgb(111 73 0); --accent-dim: rgb(255 222 174); /* ── Green (running status, pins) ──────────────────────────────── */ --green: rgb(82 155 50); --green-dim: rgb(45 95 20); --green-on: rgb(8 30 0); /* ── Status ────────────────────────────────────────────────────── */ --running: var(--green); --done: var(--ink-3); --failed: rgb(255 180 171); --queued: var(--ink-4); } /* ════════════════════════════════════════════════════════════════════ BASE RESET + GLOBAL STYLES ════════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: var(--t-md); line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; overflow: hidden; } #root { width: 100%; height: 100%; display: flex; } /* Type utilities ---------------------------------------------------- */ .display { font-family: var(--ui); font-weight: 600; } .serif { font-family: var(--ui); } .mono { font-family: var(--mono); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .italic { font-style: italic; } .label-eyebrow { font-family: var(--ui); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .label-eyebrow.truncate { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .muted { font-size: var(--t-sm) !important; color: var(--ink-3); } .muted-soft { color: var(--ink-4); } .strong { font-weight: 600; color: var(--ink); } /* Layout helpers ---------------------------------------------------- */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .grow { flex: 1 1 auto; min-width: 0; min-height: 0; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } /* Hairlines --------------------------------------------------------- */ .hr-h { height: 1px; background: var(--hairline); width: 100%; } .hr-v { width: 1px; background: var(--hairline); height: 100%; } .border-r { border-right: 1px solid var(--hairline); } .border-l { border-left: 1px solid var(--hairline); } .border-t { border-top: 1px solid var(--hairline); } .border-b { border-bottom: 1px solid var(--hairline); } .border-b-strong { border-bottom: 1px solid var(--hairline-strong); } /* Tag chip ---------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font: 500 var(--t-xs) var(--ui); letter-spacing: 0.02em; color: var(--green-on); background: var(--green); border: 1px solid var(--hairline-strong); border-radius: 2px; white-space: nowrap; user-select: none; flex-shrink: 0; } .tag.solid { background: var(--ink); color: var(--surface); border-color: var(--ink); } .tag.accent { color: var(--accent); border-color: var(--accent-dim); background: color-mix(in srgb, var(--accent) 8%, transparent); } .tag.ghost { background: transparent; } .tag.dotted { border-style: dashed; color: var(--accent)} /* Status dot -------------------------------------------------------- */ .status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; } .status-dot.running { background: var(--running); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 38%, transparent); } } .status-dot.done { background: var(--ink-3); } .status-dot.failed { background: var(--failed); } .status-dot.queued { background: var(--queued); } /* Buttons ----------------------------------------------------------- */ .btn { border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); font: 500 var(--t-sm) var(--ui); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, border-color .12s, color .12s; user-select: none; white-space: nowrap; } .btn:hover { background: var(--paper); border-color: var(--ink-3); } .btn:active { background: var(--surface-low); } .btn.icon { padding: 1px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xl); } .btn.solid { background: var(--ink); color: var(--surface); border-color: var(--ink); } .btn.solid:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn.tert { background: var(--green); color: var(--green-on); border-color: var(--green); } .btn.tert:hover { filter: brightness(1.1); } .btn.active { background: var(--green); color: var(--green-on); border-color: var(--ink); } .btn.accent { background: var(--accent); color: var(--surface); border-color: var(--accent); } .btn.ghost { background: transparent; } /* Input ------------------------------------------------------------- */ .input { border: 1px solid var(--hairline-strong); background: var(--surface); font: 400 var(--t-sm) var(--ui); padding: 4px 8px; border-radius: var(--radius-sm); color: var(--ink); outline: none; width: 100%; } .input:focus { border-color: var(--accent-dim); background: var(--surface); } /* Selectable list rows --------------------------------------------- */ .run-row { display: grid; align-items: center; padding: 18px 20px !important; font-size: var(--t-md); border-bottom: 1px solid var(--hairline); cursor: pointer; position: relative; transition: background .1s; } .run-row:hover { background: var(--surface); } .run-row.active { background: var(--surface); } .run-row.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--accent), var(--green)); box-shadow: 2px 0 14px var(--accent); } /* Stats grid -------------------------------------------------------- */ .kv { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-4); row-gap: 10px; font-size: var(--t-sm); } .kv .k { color: var(--ink-3); font-family: var(--ui); white-space: nowrap; } .kv .v { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); white-space: nowrap; } .kv .v.changed { color: var(--accent); font-weight: 500; } .kv .v.old { color: var(--ink-4); text-decoration: line-through; font-size: var(--t-xs); } /* Sparkline / chart SVG defaults ----------------------------------- */ .chart-svg { display: block; } .chart-svg .axis { stroke: var(--chart-axis-stroke); stroke-width: 1; fill: none; } .chart-svg .grid { stroke: var(--chart-grid-stroke); stroke-width: 1; fill: none; } .chart-svg .focal { stroke: var(--run-1); stroke-width: 2; fill: none; } .chart-svg .ghost-1 { stroke: var(--run-2); stroke-width: 1.2; fill: none; stroke-dasharray: 4 2; opacity: .88; } .chart-svg .ghost-2 { stroke: var(--run-3); stroke-width: 1.2; fill: none; stroke-dasharray: 6 3; opacity: .88; } .chart-svg .ghost-3 { stroke: var(--run-4); stroke-width: 1.2; fill: none; stroke-dasharray: 2 2; opacity: .88; } .chart-svg .secondary { stroke: var(--ink-3); stroke-width: 1; fill: none; stroke-dasharray: 3 2; } .chart-svg .axis-text { fill: var(--ink-3); font: 11px var(--mono); } .chart-svg .playhead { stroke: var(--accent); stroke-width: 1.2; fill: none; } .chart-svg .playhead-soft { stroke: var(--accent); stroke-width: 1; fill: none; stroke-dasharray: 3 3; opacity: .8; } /* Scrollbar (subtle, mono-tone) ------------------------------------ */ .scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; } .scroll::-webkit-scrollbar { width: 6px; height: 6px; } .scroll::-webkit-scrollbar-track { background: transparent; } .scroll::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; } .scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* Card -------------------------------------------------------------- */ .card { background: var(--surface-low); border: 1px solid var(--hairline); } /* Dropdown ---------------------------------------------------------- */ .dropdown { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-sm) var(--ui); padding: 3px 8px; border: 1px solid var(--hairline-strong); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; user-select: none; white-space: nowrap; color: var(--ink-2); } .dropdown:hover { background: var(--paper); } .dropdown .caret { color: var(--ink-3); font-size: var(--t-xs); } /* Eyebrow rule: hairline + small caps title for sections */ .eyebrow-rule { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-2); } .eyebrow-rule::after { content: ''; flex: 1; height: 1px; background: var(--hairline); } /* Video / canvas frame container */ .player { position: relative; background: var(--surface-deep); border: 1px solid var(--hairline-strong); overflow: hidden; } .player canvas { display: block; width: 100%; height: 100%; } .player .ph { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 6px 10px; font: 500 var(--t-xs) var(--mono); color: rgb(244 241 234 / 0.85); pointer-events: none; } /* Missing-data / empty state ---------------------------------------- */ /* Dashed frame = "artifact absent". We never fabricate data — when a signal/metric/video is missing we say so plainly in this same vocabulary. */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); padding: var(--sp-4) var(--sp-3); text-align: center; border: 1px dashed var(--hairline-dashed); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 2.5%, transparent); } .empty-state__mark { font: 400 var(--t-xl) var(--mono); color: var(--ink-4); line-height: 1; } .empty-state__title { color: var(--ink-3); } .empty-state__detail { font: 400 var(--t-xs) var(--mono); color: var(--ink-4); max-width: 36ch; line-height: 1.5; } /* Missing video — a warm-dark "no signal" letterbox (theme-independent, so the light overlay captions stay legible) with a faint diagonal hatch + vignette. */ .player-missing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); background: repeating-linear-gradient(45deg, transparent, transparent 9px, rgb(255 255 255 / 0.035) 9px, rgb(255 255 255 / 0.035) 10px), radial-gradient(120% 120% at 50% 38%, rgb(40 32 24) 0%, rgb(15 11 7) 100%); } .player-missing__mark { font: 400 var(--t-display) var(--mono); color: rgb(244 241 234 / 0.40); line-height: 1; } .player-missing__title { font: 500 var(--t-sm) var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(244 241 234 / 0.72); } .player-missing__detail { font: 400 var(--t-xs) var(--mono); color: rgb(244 241 234 / 0.5); } /* Episode picker button */ .ep-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); cursor: pointer; font: 500 var(--t-sm) var(--ui); color: var(--ink-2); transition: background .1s, border-color .1s, color .1s; } .ep-btn:hover { border-color: var(--ink-3); } .ep-btn.active { background: var(--green); color: var(--green-on); border-color: var(--green); } .ep-btn.active .ep-icon { color: var(--accent);} .ep-btn .ep-icon { color: var(--green); font-size: var(--t-sm); } .ep-btn .ep-meta { font-family: var(--mono); font-size: var(--t-xs); opacity: .8; } /* Frame scrub track */ .scrub { display: flex; align-items: center; gap: 8px; font: 500 var(--t-xs) var(--mono); color: var(--ink-3); } .scrub .track { flex: 1; position: relative; height: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 2px; cursor: pointer; } .scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; } .scrub .head { position: absolute; top: -4px; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 1px 4px rgb(0 0 0 / .25); } /* Hairline divider w/ ornament */ .divider-ornament { display: flex; align-items: center; gap: 8px; color: var(--ink-4); font: 9px var(--mono); } .divider-ornament::before, .divider-ornament::after { content: ''; flex: 1; height: 1px; background: var(--hairline); } /* Heatmap dot grid */ .heatmap-grid { display: grid; gap: 2px; } .heatmap-grid > i { display: block; background: var(--ink); } /* Keyboard hint */ .kbd { font: 500 9.5px var(--mono); padding: 1px 5px; border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 3px; color: var(--ink-2); background: var(--surface); } /* Document title banner */ .doc-title { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0 var(--sp-3); min-width: 0; overflow: hidden; } .doc-title .crumb { font: 500 var(--t-md) var(--ui); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .doc-title .crumb .sep { margin: 0 6px; color: var(--ink-4); } .doc-title .crumb .current { color: var(--ink); font-weight: 600; } /* ════════════════════════════════════════════════════════════════════ RESPONSIVE LEFT/RIGHT RAILS On narrow screens the left/right rails collapse into slide-in overlay panels. When the rails are on wide screens none of this applies — the rails render in normal flow as before. ════════════════════════════════════════════════════════════════════ */ /* Dim scrim behind an open drawer. Click to dismiss (handled in JS). */ .drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.42); opacity: 0; animation: drawer-fade .16s ease forwards; } @keyframes drawer-fade { to { opacity: 1; } } /* Sliding panel. Pinned to the full viewport height on one edge; the inner rail sets its own width, so the panel hugs it. */ .drawer { position: fixed; top: 0; bottom: 0; z-index: 41; height: 100%; display: flex; box-shadow: 0 0 40px rgb(0 0 0 / 0.35); transition: transform .22s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .drawer-left { left: 0; transform: translateX(-100%); } .drawer-right { right: 0; transform: translateX(100%); } .drawer.open { transform: translateX(0); } /* Make a drawered rail fill the panel height and never overflow it. */ .drawer > * { height: 100%; max-width: 92vw; } @media (prefers-reduced-motion: reduce) { .drawer { transition: none; } .drawer-backdrop { animation: none; opacity: 1; } }