/* Info Tracker — the layout and density rules from WEBSITE.md §8, painted entirely from the SeaCras brand kit. Reading instrument, not a dashboard demo: one accent, a colourblind-safe coding for the four streams, tier by letterform rather than colour, and exactly one warm surface reserved for human judgement. This file holds no palette of its own any more. Every colour is an alias onto docs/brand-kit (served as /static/sc-tokens.css, linked before this file), so light and dark come from the kit rather than being restated here. §8 still governs structure — density, the warm surface, tier letterforms, the stream coding; the kit governs colour. Two things here are deliberately NOT brand colour: - the stream ramp is categorical (--sc-viz-cat-*), because tenders, competition, science and news are categories, not states; - the warm surface is a literal, because the kit's neutral ramp is deliberately cool and has no warm equivalent. */ /* Every colour below is an alias onto the brand kit in docs/brand-kit. The kit's tokens are already theme-aware, so the three near-identical blocks this replaces — light, prefers-dark, forced-dark — collapse into one. Light/dark is the kit's job now, not this file's, and the toggle in app.js keeps working unchanged because it still only sets data-theme on . */ :root { --paper: var(--sc-surface-sunken); --panel: var(--sc-surface-raised); --panel-2: var(--sc-surface-hover); --ink: var(--sc-text); --ink-soft: var(--sc-text-muted); /* Both secondary tiers resolve to --sc-text-muted on purpose. The kit's --sc-text-subtle is checked only at the 3:1 "large/secondary" threshold and measures 3.52:1 on paper — fine for a caption, not for the 12.5px status row and item meta this drives. The tier separation is carried by size and weight instead of by a sub-AA colour. */ --muted: var(--sc-text-muted); --line: var(--sc-border); --line-soft: var(--sc-border); --accent: var(--sc-accent); --accent-ink: var(--sc-link); --accent-wash: var(--sc-accent-subtle); /* Status was a private amber/vermilion/green ramp. It is now the kit's status ramp, whose -text values are contrast-checked against their own surfaces in both themes, and whose fills are checked for colourblind separation. */ --amber: var(--sc-status-moderate-text); --verm: var(--sc-status-poor-text); --green: var(--sc-status-good-text); --sky: var(--sc-status-info-text); --danger: var(--sc-status-alert-text); --amber-fill: var(--sc-status-moderate-fill); --green-fill: var(--sc-status-good-fill); --warn-row: var(--sc-status-moderate-bg); /* The four streams are a categorical coding, not status, so they come from the kit's categorical ramp (minimum deltaE 19.5 across normal and colourblind vision). Those are chart-mark colours and are NOT text-safe, which is why a stream chip shows its colour as a dot and keeps the label on readable text. */ --stream-tenders: var(--sc-viz-cat-4); --stream-competition: var(--sc-viz-cat-5); --stream-science: var(--sc-viz-cat-7); --stream-news: var(--sc-viz-cat-1); --shadow: var(--sc-shadow-1); --radius: var(--sc-radius-sm); --sp: 4px; /* The one warm surface: entries a human owns. The kit has no warm token — its neutral ramp is deliberately cool — so this stays local, and it is the only colour in this file that still needs a per-theme value. */ --warm: #FBF6EA; --warm-line: #E8DCBF; --warm-ink: #6B5312; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warm: #2A2619; --warm-line: #4A4128; --warm-ink: #E8D9A8; } } [data-theme="dark"] { --warm: #2A2619; --warm-line: #4A4128; --warm-ink: #E8D9A8; } :root[data-density="compact"] { --sp: 3px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :where(a) { color: var(--accent-ink); text-underline-offset: 2px; } :where(a):hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .mono, code, .id, .num { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } /* ── masthead ─────────────────────────────────────────────────────────── */ .masthead { border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 40; } .masthead-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .nav-row { display: flex; align-items: center; gap: 18px; height: 52px; } /* The mark itself comes from sc-components.css; only its size is local. */ .brand { --sc-mark-size: 22px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 7px; } .brand .sc-org { font-weight: 500; color: var(--muted); } .nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; } .nav a { padding: 6px 11px; border-radius: 6px; text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; white-space: nowrap; } .nav a:hover { background: var(--panel-2); } .nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; } .nav a .badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px; background: var(--accent); color: var(--panel); border-radius: 9px; font-size: 11px; font-weight: 700; text-align: center; } .status-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 0 0 9px; font-size: 12.5px; color: var(--muted); } .data-age { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .data-age::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-fill); } .data-age.degraded { color: var(--amber); } .data-age.degraded::before { background: var(--amber-fill); } .data-age.stale { color: var(--danger); } .data-age.stale::before { background: var(--danger); } .spend-chip { margin-left: auto; } .banner { background: var(--warm); border-bottom: 1px solid var(--warm-line); color: var(--warm-ink); padding: 9px 20px; font-size: 14px; } .banner.alarm { background: color-mix(in srgb, var(--danger) 12%, var(--paper)); border-color: var(--danger); color: var(--ink); } /* ── layout ───────────────────────────────────────────────────────────── */ .page { max-width: 1180px; margin: 0 auto; padding: 26px 20px 90px; } .page.reading { max-width: 78ch; } .page.wide { max-width: 1500px; } h1 { font-size: 25px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; text-wrap: balance; } h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 34px 0 12px; font-weight: 700; } h2:first-of-type { margin-top: 20px; } h3 { font-size: 17px; margin: 22px 0 8px; } .lede { color: var(--ink-soft); margin: 0 0 20px; } .empty { color: var(--muted); font-style: italic; padding: 6px 0; } .stack { display: flex; flex-direction: column; gap: calc(var(--sp) * 3); } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .spacer { flex: 1; } /* ── item card ────────────────────────────────────────────────────────── */ .item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: calc(var(--sp) * 3) 0; border-bottom: 1px solid var(--line-soft); } .item:last-child { border-bottom: none; } .item.focused { background: var(--accent-wash); box-shadow: -12px 0 0 var(--accent-wash), 12px 0 0 var(--accent-wash); border-radius: 2px; } .item-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 3px; } .item-title a { color: var(--ink); text-decoration: none; } .item-title a:hover { color: var(--accent-ink); text-decoration: underline; } .item-why { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 6px; } .item-meta { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } /* tier badges: letterform + weight, never colour alone */ .tier { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font: 700 13px/1 ui-monospace, monospace; color: var(--ink); } .tier-A { border: 2px solid var(--ink); } .tier-B { border: 1.5px solid var(--ink-soft); color: var(--ink-soft); font-weight: 600; } .tier-C { border: 1px dashed var(--muted); color: var(--muted); font-weight: 500; } .tier-D { border: 1px dotted var(--line); color: var(--muted); font-weight: 400; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .chip[class*="s-"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; /* The kit's swatch rule: these fills are chosen for mutual separation, not for contrast against the page, so each carries its own 1px boundary. */ box-shadow: inset 0 0 0 1px var(--sc-border-strong); } .chip.s-tenders::before { background: var(--stream-tenders); } .chip.s-competition::before { background: var(--stream-competition); } .chip.s-science::before { background: var(--stream-science); } .chip.s-news::before { background: var(--stream-news); } .chip.human { background: var(--warm); border-color: var(--warm-line); color: var(--warm-ink); } .chip.pending { border-style: dashed; } .chip.pending::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-fill); } .chip.danger { color: var(--danger); border-color: currentColor; } /* ── vote ─────────────────────────────────────────────────────────────── */ .vote { display: inline-flex; gap: 3px; } .vote button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 13px; line-height: 1.5; transition: background .15s, border-color .15s, color .15s; } .vote button:hover { border-color: var(--accent); color: var(--accent-ink); } .vote button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); } .vote button[aria-pressed="true"].down { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border-color: var(--danger); color: var(--danger); } /* ── buttons & forms ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 7px 13px; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; } .btn:hover { border-color: var(--accent); color: var(--accent-ink); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-ink); color: #fff; } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.sm { padding: 4px 9px; font-size: 13px; } input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { font: inherit; font-size: 14.5px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; width: 100%; } textarea { min-height: 72px; resize: vertical; } label { font-size: 13px; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 4px; } .field { margin-bottom: 14px; } .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; } /* ── panels & tables ──────────────────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 18px; } .panel + .panel { margin-top: 14px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .tbl-scroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: 14px; } th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 2px solid var(--line); padding: 7px 12px 7px 0; white-space: nowrap; } td { border-bottom: 1px solid var(--line-soft); padding: 8px 12px 8px 0; vertical-align: top; } th.num, td.num { text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; } tr.warn td { background: var(--warn-row); } tr.bad td { background: color-mix(in srgb, var(--danger) 8%, transparent); } /* ── register board ───────────────────────────────────────────────────── */ .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; } .col { background: var(--panel-2); border-radius: var(--radius); padding: 10px; min-height: 130px; } .col.over { outline: 2px dashed var(--accent); outline-offset: -3px; } .col.locked { opacity: .72; } .col h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; } .card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 7px; padding: 9px 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); } .card:active { cursor: grabbing; } .card.dragging { opacity: .45; } .card.human { background: var(--warm); border-color: var(--warm-line); } .card-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin: 4px 0; } .card-title a { color: var(--ink); text-decoration: none; } .card-meta { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; } .deadline { font-weight: 700; font-family: ui-monospace, monospace; } .deadline.critical { color: var(--danger); } .deadline.soon { color: var(--amber); } .deadline.near { color: var(--ink-soft); } .deadline.past { color: var(--muted); text-decoration: line-through; } /* ── score sliders ────────────────────────────────────────────────────── */ .dims { display: grid; gap: 9px; } .dim { display: grid; grid-template-columns: 150px 1fr 26px; gap: 10px; align-items: center; font-size: 13.5px; } .dim input[type=range] { width: 100%; accent-color: var(--accent); } .dots { letter-spacing: 2px; color: var(--accent); font-size: 13px; } .score-total { font: 700 22px/1 ui-monospace, monospace; } /* ── activity grid ────────────────────────────────────────────────────── */ .heat { display: flex; gap: 2px; } .heat i { width: 13px; height: 15px; border-radius: 2px; background: var(--line-soft); display: block; } .heat i[data-n="1"] { background: color-mix(in srgb, var(--accent) 30%, var(--line-soft)); } .heat i[data-n="2"] { background: color-mix(in srgb, var(--accent) 55%, var(--line-soft)); } .heat i[data-n="3"] { background: color-mix(in srgb, var(--accent) 80%, var(--line-soft)); } .heat i[data-n="4"] { background: var(--accent); } /* ── radar ────────────────────────────────────────────────────────────── */ .rings { display: grid; gap: 18px; } .ring h3 { text-transform: capitalize; } .radar-row { display: grid; grid-template-columns: 1fr 90px 60px 60px 96px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .posture { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .posture.adopt { color: var(--green); } .posture.trial { color: var(--sky); } .posture.assess { color: var(--amber); } .posture.hold { color: var(--muted); } /* ── sparkline ────────────────────────────────────────────────────────── */ .spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; } .spark i { width: 9px; background: var(--accent); border-radius: 2px 2px 0 0; display: block; min-height: 2px; } /* ── misc ─────────────────────────────────────────────────────────────── */ .kbd { font: 600 11.5px/1 ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 3px 5px; background: var(--panel); color: var(--ink-soft); } .endmark { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 0 0; border-top: 1px solid var(--line); margin-top: 26px; } .prose { line-height: 1.68; } .prose h1 { font-size: 24px; margin-top: 0; } .prose h2 { font-size: 19px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 28px 0 10px; } .prose h3 { font-size: 16px; } .prose table { margin: 14px 0; } .prose code { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 4px; font-size: .88em; } .prose blockquote { border-left: 3px solid var(--accent); margin: 14px 0; padding: 2px 0 2px 14px; color: var(--ink-soft); } .prose img { max-width: 100%; } .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 8px; font-size: 14px; z-index: 90; box-shadow: var(--shadow); } dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 20px; max-width: 560px; width: calc(100% - 32px); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(10,20,22,.45); } .palette-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 300px; overflow-y: auto; } .palette-list li a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 14px; } .palette-list li a:hover, .palette-list li a.sel { background: var(--accent-wash); color: var(--accent-ink); } @media (max-width: 700px) { .nav { gap: 0; } .nav a { padding: 6px 8px; font-size: 13.5px; } .dim { grid-template-columns: 110px 1fr 24px; } .radar-row { grid-template-columns: 1fr 70px 46px; } .radar-row .hide-sm { display: none; } } @media print { /* W4 print styles. A brief is a thing people carry into a meeting, so this is a real output, not an afterthought. */ /* Force the light token set even when the reader is in dark theme. Setting only `body` was not enough: the tokens are defined on :root, so every card and rule kept its dark value and printed white-on-dark inside a white page -- unreadable, and a toner bill. */ :root, :root[data-theme="dark"] { --sc-surface: #fff; --sc-surface-sunken: #fff; --sc-text: #000; --sc-text-muted: #333; --sc-border: #999; --sc-link: #000; --sc-accent: #000; } .masthead, .vote, .btn, .no-print, .theme-toggle, nav, form { display: none !important; } body { background: #fff; color: #000; } .page { max-width: none; padding: 0; } a { color: #000; text-decoration: underline; } /* A printed link is dead unless its target is on the page. Internal links are skipped -- "(/i/aaaa1111)" after every title is noise, and the short id is already printed. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; } /* An item split across a page break is one somebody misreads. */ .item, .card, li, tr { break-inside: avoid; page-break-inside: avoid; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } /* Backgrounds do not print by default in most browsers, so anything that relied on one for meaning needs a border instead. */ .tier, .pill, .badge { border: 1px solid #000; background: none !important; } }