/* theme.css — Broadsheet design tokens + light/dark/system switching. * * Broadsheet is newsprint set for the web: near-black serif on paper white, * with the two process inks — cyan and magenta — used small and deliberately, * like spot colour. Structure comes from the serif scale and negative space; * rules and boxes are the exception, not the grid. * * Loaded FIRST on every page, before the page-specific sheet, so page rules * can consume the tokens and override them if they must. * * Resolution order, weakest to strongest: * 1. :root → paper (the system's own default) * 2. @media (prefers-color-scheme: dark) → follow the OS when set to "system" * 3. :root[data-theme="light"|"dark"] → explicit user choice always wins * * theme.js stamps data-theme on ; "system" means it removes the * attribute entirely and lets the media query decide. * * Two token layers live here, and the split matters: * · --color-* / --font-* / --space-* / --radius-* / --shadow-* * are Broadsheet's own vocabulary. Style with these. * · --bg / --fg / --muted / --accent / --tl-* are the app's semantic * names, DERIVED from the layer above. timeline.js and player.js * resolve the --tl-* ones through getComputedStyle at draw time, so * they must stay real values, not aliases of aliases. */ /* ── 1. paper (default) ────────────────────────────────────── */ :root { /* — Broadsheet roles — */ --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-accent: #0088b0; --color-accent-2:#d6006c; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-100: #e9f8ff; --color-accent-200: #cbeeff; --color-accent-300: #99e0ff; --color-accent-400: #62c5ee; --color-accent-500: #38a6cf; --color-accent-600: #1186ac; --color-accent-700: #006786; --color-accent-800: #004961; --color-accent-900: #0a303e; --color-accent-2-100: #fff1f4; --color-accent-2-200: #ffdee6; --color-accent-2-300: #ffc0d0; --color-accent-2-400: #ff90b1; --color-accent-2-500: #ff458e; --color-accent-2-600: #d82071; --color-accent-2-700: #aa0b56; --color-accent-2-800: #790e3d; --color-accent-2-900: #4b1528; --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); /* — app semantics, derived — */ --bg: var(--color-bg); --panel: var(--color-bg); /* the page is one open sheet */ --raised: var(--color-surface); --sunken: var(--color-neutral-100); --border: var(--color-divider); --border-soft: color-mix(in srgb, var(--color-text) 8%, transparent); --hover: color-mix(in srgb, var(--color-text) 6%, transparent); --selected: var(--color-accent-100); --fg: var(--color-text); --muted: color-mix(in srgb, var(--color-text) 55%, transparent); --accent: var(--color-accent); --accent-ink: var(--color-accent-700); /* accent at body-copy contrast */ --on-accent: var(--color-bg); --ok: #2f7d4a; --warn: #a5661a; --bad: var(--color-accent-2-700); --pos: var(--color-accent-700); --neg: var(--color-accent-2-700); --scrim: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); --active-bg: var(--color-accent); --active-fg: var(--color-bg); --evidence-bg: var(--color-accent-2-100); --evidence-border: var(--color-accent-2-300); --evidence-fg: var(--color-accent-2-800); /* canvas tokens — timeline.js reads these via getComputedStyle at draw time. Cyan reads positive, magenta negative, ink reads as coverage. */ --tl-bg: #f8f4f4; --tl-hair: rgba(32, 30, 29, .22); --tl-track: #d7d3d3; --tl-buffered: #bab6b6; --tl-progress: #38a6cf; --tl-chapter: rgba(32, 30, 29, .40); --tl-playhead: #201e1d; --tl-cov-low: #d7d3d3; --tl-cov-mid: #38a6cf; --tl-cov-high: #006786; --tl-zero: rgba(32, 30, 29, .16); --tl-density: #1186ac; --tl-ribbon: 32, 30, 29; /* rgb triple, alpha applied per-bin */ --tl-mark-default: #7d7979; /* dashboard lane hues — the two process inks, plus one press violet for risk, which must not read as either accent */ --tl-rev-pos: #38a6cf; --tl-rev-neg: #d82071; --tl-marks: #006786; --tl-comments: #1186ac; --tl-risk: #8a4fbf; --tl-fixes: #a5661a; --tl-rewatch: #38a6cf; --tl-abandon: #aa0b56; /* — type, space, radius: identical in both themes — */ --font-heading: Georgia, 'Iowan Old Style', 'Times New Roman', 'Noto Serif', serif; --font-body: Georgia, 'Iowan Old Style', 'Times New Roman', 'Noto Serif', serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --font-heading-weight: 600; --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px; --space-6: 30px; --space-8: 40px; --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px; } /* ── 2. system → dark ──────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --color-bg: #1c1b1a; --color-surface: #262423; --color-text: #eceae7; --color-accent: #4db4d9; --color-accent-2:#ff6ba4; --color-divider: color-mix(in srgb, #eceae7 18%, transparent); --color-neutral-100: #242221; --color-neutral-200: #141312; --color-neutral-300: #3a3837; --color-neutral-400: #4e4b4a; --color-neutral-500: #8a8683; --color-neutral-600: #a3a09d; --color-neutral-700: #c2bfbc; --color-neutral-800: #dcd9d6; --color-neutral-900: #eceae7; --color-accent-100: #0a303e; --color-accent-200: #004961; --color-accent-300: #006786; --color-accent-400: #1186ac; --color-accent-500: #38a6cf; --color-accent-600: #62c5ee; --color-accent-700: #99e0ff; --color-accent-800: #cbeeff; --color-accent-900: #e9f8ff; --color-accent-2-100: #4b1528; --color-accent-2-200: #790e3d; --color-accent-2-300: #aa0b56; --color-accent-2-400: #d82071; --color-accent-2-500: #ff458e; --color-accent-2-600: #ff90b1; --color-accent-2-700: #ffc0d0; --color-accent-2-800: #ffdee6; --color-accent-2-900: #fff1f4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 3px 10px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); --ok: #6fbf85; --warn: #d9a441; --tl-bg: #242221; --tl-hair: rgba(236, 234, 231, .20); --tl-track: #3a3837; --tl-buffered: #4e4b4a; --tl-progress: #62c5ee; --tl-chapter: rgba(236, 234, 231, .38); --tl-playhead: #eceae7; --tl-cov-low: #3a3837; --tl-cov-mid: #38a6cf; --tl-cov-high: #99e0ff; --tl-zero: rgba(236, 234, 231, .16); --tl-density: #62c5ee; --tl-ribbon: 236, 234, 231; --tl-mark-default: #8a8683; --tl-rev-pos: #62c5ee; --tl-rev-neg: #ff458e; --tl-marks: #99e0ff; --tl-comments: #62c5ee; --tl-risk: #b98adf; --tl-fixes: #d9a441; --tl-rewatch: #38a6cf; --tl-abandon: #ff90b1; } } /* ── 3. explicit choice wins over the OS in BOTH directions ── * These two blocks repeat the values above rather than @extend-ing them * (CSS has no such thing) — keep the three copies in step when retuning. */ :root[data-theme="light"] { --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-accent: #0088b0; --color-accent-2:#d6006c; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-100: #e9f8ff; --color-accent-200: #cbeeff; --color-accent-300: #99e0ff; --color-accent-400: #62c5ee; --color-accent-500: #38a6cf; --color-accent-600: #1186ac; --color-accent-700: #006786; --color-accent-800: #004961; --color-accent-900: #0a303e; --color-accent-2-100: #fff1f4; --color-accent-2-200: #ffdee6; --color-accent-2-300: #ffc0d0; --color-accent-2-400: #ff90b1; --color-accent-2-500: #ff458e; --color-accent-2-600: #d82071; --color-accent-2-700: #aa0b56; --color-accent-2-800: #790e3d; --color-accent-2-900: #4b1528; --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); --ok: #2f7d4a; --warn: #a5661a; --tl-bg: #f8f4f4; --tl-hair: rgba(32, 30, 29, .22); --tl-track: #d7d3d3; --tl-buffered: #bab6b6; --tl-progress: #38a6cf; --tl-chapter: rgba(32, 30, 29, .40); --tl-playhead: #201e1d; --tl-cov-low: #d7d3d3; --tl-cov-mid: #38a6cf; --tl-cov-high: #006786; --tl-zero: rgba(32, 30, 29, .16); --tl-density: #1186ac; --tl-ribbon: 32, 30, 29; --tl-mark-default: #7d7979; --tl-rev-pos: #38a6cf; --tl-rev-neg: #d82071; --tl-marks: #006786; --tl-comments: #1186ac; --tl-risk: #8a4fbf; --tl-fixes: #a5661a; --tl-rewatch: #38a6cf; --tl-abandon: #aa0b56; } :root[data-theme="dark"] { --color-bg: #1c1b1a; --color-surface: #262423; --color-text: #eceae7; --color-accent: #4db4d9; --color-accent-2:#ff6ba4; --color-divider: color-mix(in srgb, #eceae7 18%, transparent); --color-neutral-100: #242221; --color-neutral-200: #141312; --color-neutral-300: #3a3837; --color-neutral-400: #4e4b4a; --color-neutral-500: #8a8683; --color-neutral-600: #a3a09d; --color-neutral-700: #c2bfbc; --color-neutral-800: #dcd9d6; --color-neutral-900: #eceae7; --color-accent-100: #0a303e; --color-accent-200: #004961; --color-accent-300: #006786; --color-accent-400: #1186ac; --color-accent-500: #38a6cf; --color-accent-600: #62c5ee; --color-accent-700: #99e0ff; --color-accent-800: #cbeeff; --color-accent-900: #e9f8ff; --color-accent-2-100: #4b1528; --color-accent-2-200: #790e3d; --color-accent-2-300: #aa0b56; --color-accent-2-400: #d82071; --color-accent-2-500: #ff458e; --color-accent-2-600: #ff90b1; --color-accent-2-700: #ffc0d0; --color-accent-2-800: #ffdee6; --color-accent-2-900: #fff1f4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 3px 10px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); --ok: #6fbf85; --warn: #d9a441; --tl-bg: #242221; --tl-hair: rgba(236, 234, 231, .20); --tl-track: #3a3837; --tl-buffered: #4e4b4a; --tl-progress: #62c5ee; --tl-chapter: rgba(236, 234, 231, .38); --tl-playhead: #eceae7; --tl-cov-low: #3a3837; --tl-cov-mid: #38a6cf; --tl-cov-high: #99e0ff; --tl-zero: rgba(236, 234, 231, .16); --tl-density: #62c5ee; --tl-ribbon: 236, 234, 231; --tl-mark-default: #8a8683; --tl-rev-pos: #62c5ee; --tl-rev-neg: #ff458e; --tl-marks: #99e0ff; --tl-comments: #62c5ee; --tl-risk: #b98adf; --tl-fixes: #d9a441; --tl-rewatch: #38a6cf; --tl-abandon: #ff90b1; } /* ── the fix that was missing ─────────────────────────────── * `hidden` is only `display: none` at UA specificity, so ANY explicit * `display` on the element (and this app sets display:flex on overlays, * the waveform, the transcript panel and the resume banner) silently * defeats it. Without this rule the comment overlay sits at * inset:0 / z-index:200 over the whole page forever and swallows every * click. Keep it — it is load-bearing, not cosmetic. */ [hidden] { display: none !important; } /* ══════════════════════════════════════════════════════════════ Base type and the Broadsheet component layer. Shared by both pages; page sheets add layout, never re-style these. ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 15px/1.55 var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; cursor: pointer; } a:hover { color: var(--color-accent-600); text-decoration: underline; } .mono { font: 12px/1.4 var(--font-mono); color: var(--muted); } .muted, .text-muted { color: var(--muted); } /* Interaction states are themed, never browser defaults. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — the label voice: every small uppercase caption on both pages — */ .label { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover:not(:disabled) { background: var(--color-accent-600); } .btn-primary:active:not(:disabled) { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active:not(:disabled) { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-danger { border-color: var(--color-divider); color: var(--color-accent-2-700); } .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent-2) 10%, transparent); } .btn-block { width: 100%; } .btn-sm { font-size: 12px; padding: 6px 12px; } /* — tags — */ .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* The ink dot that precedes a tag name everywhere — the one place a raw palette colour is allowed, because it comes from project config. */ .ink { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } /* — forms — */ .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input::placeholder { color: color-mix(in srgb, var(--color-text) 65%, transparent); opacity: 1; } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; line-height: 1.5; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: var(--radius-md); border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 3px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; background: transparent; color: var(--color-text); border: 0; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt[aria-pressed="true"], .seg-opt.is-on { background: var(--color-accent); color: var(--color-bg); } .seg-opt:not([aria-pressed="true"]):not(.is-on):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards: reserved for genuinely discrete listings, never for layout — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; line-height: 1.2; } .card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); font-family: var(--font-body); font-weight: 400; } .table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — kbd: the serif's own small caps, not a monospace box — */ kbd { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 11px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 1px 6px; color: var(--color-text); } /* — the coverage meter used in both reviewer tables — */ .meter { display: inline-block; width: 110px; height: 6px; background: var(--color-neutral-300); vertical-align: middle; } .meter > span { display: block; height: 6px; background: var(--color-accent-500); } /* ── theme switcher control ────────────────────────────────── */ .theme-switch { display: inline-flex; align-items: center; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; } .theme-switch button { background: transparent; color: var(--muted); border: 0; padding: 4px 9px; cursor: pointer; font: 11.5px/1 var(--font-body); min-width: 28px; } .theme-switch button + button { border-left: 1px solid var(--color-divider); } .theme-switch button:hover { background: var(--hover); color: var(--color-text); } .theme-switch button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }