/* ============================================================================ blotter.css — the design system for fairfieldscanner.com Serves six routes from one vocabulary: /blotter the record feed (3-col) /incident/:id one CAD record (2-col) /map the whole county, pinned (full bleed, §24) /digest the weekly written digest (2-col) /settings personal control matrix (responsive cards) /plus pricing + entitlements (2-col) /digest is served but is not in the primary navigation. Written against the approved prototype export. The prototype is a design-tool artifact: inline styles on a fixed 1280x836 canvas, with Handlebars placeholders and wrappers that are tooling, not markup. The inline styles are the visual spec; the canvas is not. Nothing here ships the 836px height, the 10px frame radius or the frame drop shadow — in production the frame is the viewport. ── TOKENS ──────────────────────────────────────────────────────────── blotter-tokens.css is GENERATED from packages/tokens/src/index.ts in the Blotter repo and is the source of truth. This file only consumes it. Load order matters: tokens first, then this. LIGHT MODE IS NOT DEFINED HERE, ON PURPOSE. tools/build-tokens.mjs emits a full light ramp under BOTH :root[data-theme="light"] and a @media (prefers-color-scheme: light) guard that already excludes an explicit data-theme="dark". The committed blotter-tokens.css carries both blocks. There is therefore nothing for this file to do, and duplicating the ramp here would create a second source of truth that silently drifts from the first. See the handoff notes for the one real problem: the shipped light ramp is a WEAKER ramp than the prototype's, and --faint currently lands at 3.97:1 on --bg, which is below WCAG AA for normal text. That is a fix for the token source, not for this file. A HEX LITERAL IN THIS FILE IS A BUG. Everything is var(--token). The only exception is rgba() used for shadows, which carry no semantic meaning, and alpha-only mask gradients, which carry no colour at all. ── COLOUR MEANING, NON-NEGOTIABLE ──────────────────────────────────── --accent (blue) the dispatch/CAD side, and primary actions. NEVER anything a model wrote. --tp/--ip/--ep (violet) A MACHINE WROTE THIS. Nothing else, ever. --plus (gold) Blotter+ only. Never a generic highlight. --unit (cyan) unit designators. Never severity, never state. --s5..--s0 severity rank only. Never department colours. Four token conflicts in the prototype are corrected here rather than copied. Each is commented at the rule that fixes it: 1. the /blotter digest card framed model prose in --accent (§8) 2. the watchlist "N new" badge was violet for a computed count (§8) 3. the "Dispatch record" chip was violet for CAD data (§5) 4. /plus painted its gold lockup with the cyan --radio ramp (§13) ── SEVERITY IS WIDTH AS WELL AS HUE ────────────────────────────────── Rank is carried by two channels at once so the ordering survives greyscale printing and colour blindness. Every rule that sets a severity colour sets the matching width in the same place. That is enforced structurally: §3 maps data-sev="N" to five locals at once (--sev, --sev-tint, --sev-ink, --sev-edge, --sev-stripe) and every severity-bearing element on every route reads those locals and nothing else. There is no way to set the hue without the width. ── RADIO IS OUT OF SCOPE ───────────────────────────────────────────── No player, no transcripts, no waveform, no talkgroups, no clip chips, no Listen. The --radio* ramp is absent from the generated tokens and is referenced nowhere below. Unit designators, which the prototype painted with --radio-bg/--radio-t, ship on --unit-bg/--unit: identical pixels in both themes, correct semantics, and the radio ramp can stay deleted. ============================================================================ */ /* ============================================================================ §1 MISSING TOKENS — derived, not invented ============================================================================ --accent-soft and --plus-soft exist in the prototype and are used by four routes (the live card, the digest card, the Blotter+ chip, the lock card, the plus price card). They are NOT in the generated blotter-tokens.css: the generator's CSS_NAMES map does not carry them. Rather than hand-edit a generated file or paste two rgba literals that would then need a light twin, they are derived from the tokens that DO ship. color-mix resolves against whichever --accent/--plus won the cascade, so one declaration covers dark, light and system-light with no duplication and no drift. The bare `transparent` line before each is a fallback for engines without color-mix: the wash disappears, the 1px ring survives, nothing breaks. These belong in packages/tokens/src/index.ts. They are here because the generator cannot currently see them. */ :root { --accent-soft: transparent; --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --plus-soft: transparent; --plus-soft: color-mix(in srgb, var(--plus) 12%, transparent); /* One card radius. The export drew cards at 8px, 9px and 10px across the six routes with no pattern behind it; that is export noise, not intent, and unifying it is exactly the dedup this file exists to do. */ --radius-card: 9px; /* ---- Motion ---------------------------------------------------------- THREE DURATIONS AND ONE CURVE, and nothing on this site may invent a fourth. A publication that animates is a publication that has decided to make a reader wait, so the ceiling is 240ms and the floor is a frame you can still perceive. --mo-1 a state a control is already showing you (press, hover) --mo-2 a thing arriving or leaving (a tile, a pin, a row) --mo-3 a thing moving across the screen (a card rising, a list settling under a row a poll just pushed in) The curve is ease-OUT and only ease-out: motion that starts fast and lands soft reads as physical, and motion that starts slow reads as the page thinking. Nothing here eases in — a reader should never be watching an animation begin. Every one of these is collapsed by §15's prefers-reduced-motion block, which zeroes duration globally rather than per rule. */ --mo-1: 120ms; --mo-2: 180ms; --mo-3: 240ms; --mo-ease: cubic-bezier(.22, .61, .36, 1); } /* 2026 information-architecture refresh: dedicated county Explore surface. */ .ex-page { height: 100%; overflow: auto; padding: 26px clamp(18px, 5vw, 72px) 64px; } .ex-page > * { max-width: 1180px; margin-left: auto; margin-right: auto; } .ex-hero { padding: 6px 0 18px; display: flex; align-items: end; justify-content: space-between; gap: 28px; } .ex-hero h1, .ex-page > h1 { font: 700 clamp(30px, 4vw, 48px)/1.02 var(--font-sans); letter-spacing: -.045em; max-width: 18ch; } .ex-hero > div > p { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 66ch; margin-top: 10px; } .ex-source-note { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; margin-bottom: 4px; } .ex-source-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .ex-metrics { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, var(--surface), var(--surface2)); overflow: hidden; } .ex-metric { padding: 16px 18px; border-right: 1px solid var(--line); } .ex-metric:last-child { border-right: 0; } .ex-metric__value { display: block; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.04em; white-space: nowrap; } .ex-metric__label { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .ex-metric small { color: var(--faint); } .ex-notice { margin-top: 16px; color: var(--muted); } .ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .ex-panel, .ex-directory { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px; } .ex-panel h2, .ex-directory h2 { font-size: 20px; letter-spacing: -.02em; } .ex-panel--wide { margin-top: 16px; } .ex-panelhead { display: flex; align-items: end; justify-content: space-between; gap: 20px; } .ex-panelhead > p { color: var(--faint); font-size: 11px; } .ex-pulse { height: 128px; display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 5px; margin-top: 18px; border-bottom: 1px solid var(--line2); } .ex-pulse__hour { height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; position: relative; } .ex-pulse__hour i { width: 100%; min-height: 5px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-w)); opacity: .72; transition: opacity .15s ease; } .ex-pulse__hour:hover i { opacity: 1; } .ex-pulse__hour span { position: absolute; top: calc(100% + 7px); color: var(--faint); font: 11px var(--font-mono); } .ex-bars { margin-top: 16px; } .ex-bars li { margin-top: 11px; } .ex-barline { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; } .ex-barline strong { color: var(--text); } .ex-bar { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: var(--line); } .ex-bar b { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .ex-severity { margin-top: 14px; } .ex-severity__row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 31px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; } .ex-severity__row b { color: var(--text); font-weight: 600; } .ex-network { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, 1fr); align-items: stretch; margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; } .ex-network > div { padding: 22px; } .ex-network h2 { font-size: 20px; letter-spacing: -.02em; } .ex-network .ex-metric { border-left: 1px solid var(--line); border-right: 0; } .ex-ranking { margin-top: 18px; } .ex-ranking li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); } .ex-ranking strong { color: var(--text); } .ex-directory { margin-top: 16px; } .ex-sectionhead { display: flex; align-items: end; justify-content: space-between; gap: 20px; } .ex-search input { width: min(280px, 40vw); border: 1px solid var(--line2); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); padding: 9px 14px; outline: 0; } .ex-search input:focus { border-color: var(--accent); } .ex-tabs { display: flex; gap: 6px; overflow-x: auto; margin-top: 22px; padding-bottom: 2px; } .ex-tab { cursor: pointer; white-space: nowrap; color: var(--faint); padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); } .ex-tab.is-on { color: var(--accent-t); border-color: var(--accent-w); background: var(--accent-soft); } .ex-resultcount { color: var(--faint); font-size: 11px; margin-top: 16px; } .ex-directory__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin-top: 6px; } .ex-directory__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; border-top: 1px solid var(--line); } .ex-directory__row strong, .ex-directory__row span { display: block; } .ex-directory__row div > span, .ex-directory__place { color: var(--faint); font-size: 11px; } .ex-directory__place { text-align: right; } @media (max-width: 860px) { .ex-page { padding-top: 24px; } .ex-hero { display: block; } .ex-source-note { margin-top: 16px; } .ex-metrics { grid-template-columns: repeat(2, 1fr); } .ex-metrics .ex-metric:nth-child(even) { border-right: 0; } .ex-metrics .ex-metric:nth-child(-n+4) { border-bottom: 1px solid var(--line); } .ex-grid, .ex-directory__list { grid-template-columns: 1fr; } .ex-network { grid-template-columns: repeat(2, 1fr); } .ex-network > div:first-child { grid-column: 1 / -1; } .ex-network .ex-metric:nth-child(even) { border-left: 0; } .ex-pulse { gap: 3px; height: 120px; } .ex-sectionhead { align-items: stretch; flex-direction: column; } .ex-search input { width: 100%; } } /* Explore prototype integration. The page keeps the shared shell above it, while restoring the prototype's editorial hierarchy and data density. */ .ex-page { padding: 26px clamp(18px, 5vw, 72px) 64px; } .ex-hero { padding: 8px 0 20px; } .ex-hero h1 { max-width: none; } .ex-hero-copy > p:last-child { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .ex-hero-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 13px; } .ex-source-note { margin: 0; font-size: 11px; } .ex-source-note > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 10%, transparent); } .ex-window { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); } .ex-window button { cursor: pointer; padding: 5px 10px; border-radius: var(--radius-pill); color: var(--faint); font-size: 11px; text-align: center; } .ex-window button.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-t); } .ex-metrics { grid-template-columns: 1.35fr repeat(5, 1fr); } .ex-metric { min-width: 0; padding: 15px 16px; border-right: 0; border-left: 1px solid var(--line); } .ex-metric:first-child { border-left: 0; } .ex-metric small, .ex-metric span { display: block; color: var(--faint); font-size: 11px; } .ex-metric small { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; } .ex-metric strong { display: block; margin-top: 3px; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.04em; } .ex-metric span { margin-top: 4px; color: var(--muted); font-size: 11px; } .ex-metric b { display: block; margin-top: 7px; color: var(--plus-t); font: 11px var(--font-mono); } .ex-metric--lead { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent); } .ex-metric--lead::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); } .ex-pulse-panel, .ex-panel, .ex-directory { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); } .ex-pulse-panel { margin-top: 16px; padding: 22px 24px 0; overflow: hidden; } .ex-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .ex-panel-head h2, .ex-panel h2, .ex-directory h2, .ex-network h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.025em; } .ex-signal { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; } .ex-signal i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--plus); box-shadow: 0 0 0 5px color-mix(in srgb, var(--plus) 8%, transparent); } .ex-signal span { color: var(--faint); font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; } .ex-signal strong { font-size: 12px; font-weight: 600; } .ex-chart-shell { position: relative; margin-top: 18px; padding: 0 2px 21px; background: repeating-linear-gradient(to top, transparent 0, transparent 43px, color-mix(in srgb, var(--line2) 27%, transparent) 44px); } .ex-pulse { height: 144px; margin: 0; display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 5px; border-bottom: 1px solid var(--line2); } .ex-pulse--6 { grid-template-columns: repeat(6, 1fr); gap: 10px; } .ex-pulse--168 { grid-template-columns: repeat(7, 1fr); gap: 10px; } .ex-pulse > i { display: block; min-height: 5px; border-radius: 3px 3px 0 0; background: linear-gradient(to top, var(--accent-w), var(--accent)); opacity: .75; transition: height .35s ease, opacity .15s ease; } .ex-pulse > i:hover { opacity: 1; } .ex-pulse > i.peak { background: linear-gradient(to top, color-mix(in srgb, var(--plus) 45%, var(--bg)), var(--plus-t)); opacity: 1; } .ex-axis { position: absolute; inset: auto 0 3px; display: flex; justify-content: space-between; color: var(--faint); font: 11px var(--font-mono); } .ex-insight { min-height: 58px; margin: 0 -24px; padding: 13px 24px; display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface2) 78%, transparent); } .ex-insight > span { color: var(--accent-t); font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .09em; } .ex-insight p { color: var(--muted); font-size: 11px; } .ex-insight em { color: var(--faint); font: normal 11px var(--font-mono); white-space: nowrap; } .ex-panel { margin-top: 16px; padding: 20px; } .ex-panel-head--compact { align-items: flex-start; } .ex-panel-head--compact > span { color: var(--faint); font: 11px var(--font-mono); white-space: nowrap; } .ex-bars { margin-top: 14px; } .ex-bars li { margin-top: 10px; } .ex-bar-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; } .ex-bar-label strong { color: var(--text); font: 600 11px var(--font-mono); text-align: right; } .ex-bar-track { display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: var(--line); } .ex-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .ex-bars--categories .ex-bar-track i { background: linear-gradient(90deg, var(--accent-w), var(--accent)); } .ex-donut-wrap { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; margin-top: 18px; } .ex-donut { width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative; } .ex-donut::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--surface); } .ex-donut strong, .ex-donut span { position: relative; } .ex-donut strong { font-size: 20px; } .ex-donut span { color: var(--faint); font-size: 11px; } .ex-severity { display: grid; gap: 7px; margin: 0; } .ex-severity-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; } .ex-severity-row i { display: block; width: var(--sev-stripe, 2px); height: 10px; border-radius: 2px; background: var(--sev, var(--s0)); } .ex-severity-row b { color: var(--text); font: 11px var(--font-mono); } .ex-panel-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; } .ex-network { grid-template-columns: minmax(240px, 1.5fr) repeat(4, 1fr); } .ex-network > div { padding: 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; } .ex-network > div:first-child { border-left: 0; } .ex-network-title span, .ex-network > div > span { color: var(--faint); font-size: 11px; } .ex-network > div > strong { font-size: 24px; letter-spacing: -.04em; } .ex-network > div:not(:first-child):hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .ex-directory { padding: 22px; } .ex-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .ex-section-head input { width: min(280px, 40vw); padding: 8px 13px; border: 1px solid var(--line2); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); outline: 0; } .ex-section-head input:focus { border-color: var(--accent); } .ex-tabs { margin-top: 18px; } .ex-tabs button { cursor: pointer; white-space: nowrap; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--faint); font-size: 11px; } .ex-tabs button.is-on { color: var(--accent-t); border-color: var(--accent-w); background: color-mix(in srgb, var(--accent) 12%, transparent); } .ex-result-count { margin-top: 13px; color: var(--faint); font-size: 11px; } .ex-directory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin-top: 4px; } .ex-directory-row { min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); } .ex-directory-row strong, .ex-directory-row small { display: block; overflow-wrap: anywhere; } .ex-directory-row strong { font-size: 11px; } .ex-directory-row small, .ex-directory-row > span { color: var(--faint); font-size: 11px; } .ex-directory-row > span { flex: 0 0 auto; text-align: right; } .ex-loading { padding-top: 52px; } @media (max-width: 860px) { .ex-hero-side { align-items: flex-start; margin-top: 15px; } .ex-metrics { grid-template-columns: repeat(2, 1fr); } .ex-metric { border-bottom: 1px solid var(--line); } .ex-metric:nth-child(odd) { border-left: 0; } .ex-grid, .ex-directory-list { grid-template-columns: 1fr; } .ex-network { grid-template-columns: repeat(2, 1fr); } .ex-network-title { grid-column: 1 / -1; } .ex-network > div:nth-child(even) { border-left: 0; } .ex-insight { grid-template-columns: 1fr; } .ex-insight em { display: none; } .ex-section-head { align-items: stretch; flex-direction: column; } .ex-section-head input { width: 100%; } } @media (max-width: 520px) { .ex-page { padding-inline: 16px; } .ex-pulse-panel { padding-inline: 15px; } .ex-insight { margin-inline: -15px; padding-inline: 15px; } .ex-panel-head { display: block; } .ex-signal { margin-top: 13px; } .ex-pulse { gap: 3px; } .ex-donut-wrap { grid-template-columns: 96px 1fr; } .ex-donut { width: 90px; height: 90px; } .ex-directory-row { align-items: flex-start; flex-direction: column; gap: 4px; padding: 10px 0; } .ex-directory-row > span { text-align: left; } } /* ============================================================================ §2 BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(circle at 18% -12%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 38%), var(--bg); color: var(--text); font: 15px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Nothing on this site may scroll sideways. Wide content gets .bl-scrollx. */ overflow-x: hidden; } img, svg { max-width: 100%; } svg { display: block; } h1, h2, h3, p, dl, dd, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--accent-t); text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; } input { font: inherit; } /* Numerals in any measured quantity line up column to column. */ .bl-num, [class*="-time"], [class*="-stat-v"] { font-variant-numeric: tabular-nums; } @keyframes fsPulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } /* ---- Focus ----------------------------------------------------------------- Every interactive element gets a visible ring. Two shapes, because half the components on this site clip their own overflow to hold a severity stripe: an outside ring on ordinary controls, an inset ring on anything with overflow:hidden, where outline-offset:2px would be clipped away entirely. */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .bl-card:focus-visible, .bl-lock:focus-visible, .bl-addr-card:focus-visible, .bl-note--plus:focus-visible, .bl-map:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: inherit; } /* Gold context keeps its own ring so focus does not import blue into a Blotter+ surface, where blue means "dispatch" and would misread. */ .bl-lock:focus-visible, .bl-note--plus:focus-visible, .bl-btn--plus:focus-visible, .bl-btn--ghost-plus:focus-visible, .fs-pluschip:focus-visible { outline-color: var(--plus); } /* Utility: the sanctioned wrapper for anything genuinely wider than a phone. Nothing else in this file is allowed to overflow the viewport. A REGION THAT SCROLLS MUST BE OPERABLE FROM A KEYBOARD (WCAG 2.1.1). Where the wrapper holds links — the feed's table does — tabbing through them scrolls it and there is nothing to add. Where it holds none, as on /plus's entitlement matrix, the wrapper itself takes tabindex="0" and this ring; without it the right-hand column of that table is reachable by mouse and touch only. The ring is inset because the box is already flush with the column it sits in. */ /* position:relative IS LOAD-BEARING, not decoration. overflow only clips a descendant this element is a containing block FOR, and .bl-vh below is position:absolute — so while this box was static, the matrix's dozen visually-hidden column labels were laid out against the initial containing block, sat at x≈416 inside the 460px-wide matrix, and were never clipped by the overflow above them. They dragged the whole PAGE sideways: 97px of it on /plus at 320px, 42px at 375px, while this element scrolled correctly and looked fine. Making it a containing block puts them back inside the scroller. Costs nothing visually. */ .bl-scrollx { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .bl-scrollx:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); } .bl-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================ §3 SEVERITY — the one place rank becomes paint ============================================================================ The API returns a COLOUR WORD, not a number: {"severity":"RED"}. Routes map it to a rank and stamp data-sev on the element (or on an ancestor): DARKRED -> 5 "Critical" 3.7% of records RED -> 4 "High" 27.3% ORANGE -> 3 "Medium" 22.8% GREEN -> 2 "Low-medium" 25.8% BLUE -> 1 "Low" 9.5% GREY -> 0 "Unspecified" 10.9% (also the fallback when absent) A "critical" count means rank 5 ALONE. Rank 4 lands on better than a quarter of the feed, and a number that is always high is a number people stop reading. Setting data-sev sets hue and width together — that is the whole point of doing it here instead of in each component. Consumers read the locals with a rank-0 fallback, so an element with no data-sev degrades to grey at the narrowest stripe, which is what "Unspecified" should look like. */ [data-sev="5"] { --sev: var(--s5); --sev-tint: var(--t5); --sev-ink: var(--i5); --sev-edge: var(--e5); --sev-stripe: var(--stripe-5); } [data-sev="4"] { --sev: var(--s4); --sev-tint: var(--t4); --sev-ink: var(--i4); --sev-edge: var(--e4); --sev-stripe: var(--stripe-4); } [data-sev="3"] { --sev: var(--s3); --sev-tint: var(--t3); --sev-ink: var(--i3); --sev-edge: var(--e3); --sev-stripe: var(--stripe-3); } [data-sev="2"] { --sev: var(--s2); --sev-tint: var(--t2); --sev-ink: var(--i2); --sev-edge: var(--e2); --sev-stripe: var(--stripe-2); } [data-sev="1"] { --sev: var(--s1); --sev-tint: var(--t1); --sev-ink: var(--i1); --sev-edge: var(--e1); --sev-stripe: var(--stripe-1); } [data-sev="0"] { --sev: var(--s0); --sev-tint: var(--t0); --sev-ink: var(--i0); --sev-edge: var(--e0); --sev-stripe: var(--stripe-0); } /* The card stripe. One rule, every route: hue and width arrive together and cannot be separated. Absolute against a position:relative,overflow:hidden card so it runs the full height whatever the content does. */ .bl-stripe { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: var(--sev-stripe, var(--stripe-0)); background: var(--sev, var(--s0)); } /* The /blotter feed draws its stripes exactly one pixel wider than the token at every rank (7/6/5/4 against 6/5/4/3). Expressed as calc so the ordering stays token-driven: change a --stripe-N and the feed follows. */ .bl-card--feed .bl-stripe { width: calc(var(--sev-stripe, var(--stripe-0)) + 1px); } /* Severity-filter swatch: a deliberately narrower ramp than the card stripe, because it sits in a 200px rail next to 12.5px text and the card widths would read as bars. SIX RANKS, SIX SIZES. This claimed "the rank ordering holds" while ranks 3 and 2 shared 3.5px/14px and ranks 1 and 0 had no rule at all, so both fell to the 3px/13px base. Three of the six ranks were therefore hue-only — invisible to a colour-blind reader and to a greyscale printer, in the one control whose entire job is picking a rank. The ramp is monotonic now: no two ranks are the same size, so the ordering is readable with the colour thrown away. Widths are half-pixels on purpose; the rail is dense and a whole-pixel ramp over six steps would be twice as wide as the text. */ .bl-sev-sw { display: block; border-radius: 2px; flex: 0 0 auto; background: var(--sev, var(--s0)); width: 2.5px; height: 11px; } [data-sev="5"].bl-sev-sw { width: 5px; height: 16px; } [data-sev="4"].bl-sev-sw { width: 4.5px; height: 15px; } [data-sev="3"].bl-sev-sw { width: 4px; height: 14px; } [data-sev="2"].bl-sev-sw { width: 3.5px; height: 13px; } [data-sev="1"].bl-sev-sw { width: 3px; height: 12px; } [data-sev="0"].bl-sev-sw { width: 2.5px; height: 11px; } /* Inline rank marker on a grouped/related record row. */ .bl-sev-bar { display: block; flex: 0 0 auto; border-radius: 2px; height: 15px; width: var(--sev-stripe, var(--stripe-0)); background: var(--sev, var(--s0)); } /* ============================================================================ §4 APP SHELL AND CHROME (shared by every route) ============================================================================ */ .fs-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%), radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--ip) 7%, transparent), transparent 30%), var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; } /* A DEFINITE HEIGHT ON THE DESKTOP FRAME. min-height alone is not a height, so `height: 100%` on a route inside .fs-route had nothing to resolve against and the map fell back to its 420px floor with the viewport empty beneath it. Scoped above 860px on purpose: below that §14 deliberately hands scrolling back to the document, and pinning the shell there would trap the page inside one screen. */ @media (min-width: 861px) { .fs-shell { height: 100svh; } } .fs-head { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; padding: 0 26px; height: 60px; border-bottom: 1px solid var(--line); } /* ---- Masthead -------------------------------------------------------------- The site's identity, back in the header. The risk with a wordmark that sits in the same row as the nav is that it reads as a fifth destination, so it is separated on three axes at once: weight (600 against the nav's 500), colour (--text against --faint, so the nav recedes and the name does not), and a hairline rule with real space either side. It also never takes the accent underline, because it carries no data-route for markNav() to find. */ .fs-brand { position: relative; display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; padding-right: 21px; margin-right: -1px; /* the rule sits in the header's own 22px gap */ white-space: nowrap; text-decoration: none; } /* An inset hairline rather than a border: a full-height rule would read as a second header divider, and this only has to separate two words from three links. */ .fs-brand::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: var(--line2); } /* The tower mark. 22px in a 60px bar: large enough that its 1.8-unit strokes land at 1.65 device pixels, small enough that it sits under the cap height of the 15.5px wordmark rather than towering over it. align-self:center because .fs-brand is align-items:baseline — correct for two runs of text, wrong for a glyph, which would otherwise hang its whole box off the wordmark's baseline and drop below the rule. It inherits the wordmark's --text through currentColor, so it is one object with the word in both themes and there is no hex here to keep in step with the ramp. */ .fs-brand-logo { width: 22px; height: 22px; flex: 0 0 auto; align-self: center; color: var(--text); } /* The mark stays when the header starts scrolling sideways: it is 22px, it is the identity, and it is the last thing that should go. */ .fs-brand-mark { font: 600 15.5px var(--font-sans); letter-spacing: -0.01em; color: var(--text); } .fs-brand-plus { align-self: center; margin-left: -3px; color: var(--plus-t); font: 800 17px/1 var(--font-sans); } .fs-brand-plus[hidden] { display: none !important; } /* The navigation landmark. It exists for semantics, not for layout: the same 22px the header itself uses, so wrapping the three links changed no pixel. The header's own gap then applies between this group and the masthead on one side and the spacer on the other, exactly as before. */ .fs-navgroup { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; } .fs-nav { font: 500 13.5px var(--font-sans); height: 60px; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto; color: var(--faint); text-decoration: none; } .fs-nav[hidden] { display: none !important; } /* The app's tab-bar glyphs, at the size the 13.5px label wants. They inherit currentColor, so the icon dims, brightens on hover and goes to --text with its label — the accent stays on the underline alone, which is the one thing that says "you are here". */ .fs-nav-ico { width: 16px; height: 16px; flex: 0 0 auto; } .fs-nav:hover { color: var(--muted); } /* Accent underline = you are here. Accent is the dispatch/primary colour and navigation is a primary action, so this is a correct use of it. */ .fs-nav.is-on, .fs-nav[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); } .fs-viewas { min-height: 38px; margin-left: 5px; padding: 0 2px 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-left: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--faint); font-family: var(--font-sans); white-space: nowrap; cursor: pointer; } .fs-viewas[hidden] { display: none !important; } .fs-viewas svg { width: 15px; height: 15px; flex: 0 0 auto; } .fs-viewas-copy { display: grid; gap: 1px; text-align: left; } .fs-viewas-label { color: var(--faint); font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; } .fs-viewas strong { color: var(--text); font: 700 12px/1.15 var(--font-sans); } .fs-viewas-short { display: none; } .fs-viewas:hover { color: var(--text); } .fs-viewas:hover .fs-viewas-full { text-decoration: underline; text-underline-offset: 3px; } .fs-viewas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fs-viewas[data-role="blotter_plus"] .fs-viewas-full { color: var(--plus-t); } .fs-head-spacer { flex: 1; } /* .fs-pills is gone: the nav links ARE .fs-nav, not children of a pill container, and nothing in the shell ever emitted the wrapper. */ /* 230px WIDE WHEN THERE IS ROOM, AND THE ONLY THING IN THE ROW THAT GIVES WHEN THERE IS NOT. This was min-width:230px, which is a floor, not a size — and a floor nothing could push through. Every other item in .fs-head is flex:0 0 auto and the header does not wrap, so between 861px (where §14's phone rules stop hiding this box and stop letting the header scroll itself) and about 952px (where the full row finally fits) the row was wider than the viewport. The Blotter+ chip hung 91px past the right edge at 861px and took THE WHOLE PAGE sideways with it, on every route. flex-basis carries the 230px instead, so the box still measures 230 wherever the row fits — the spacer absorbs the slack, not this — and min-width:0 lets it, and only it, absorb the shortfall below that. The search shrinks; the page never scrolls sideways. */ /* Blotter+ is a product destination, not account metadata. Give it the weight of a real CTA: the product name is the accessible link text, while the generated second line makes the destination explicit without adding decorative markup to the shell. Gold still means Blotter+ and nothing else. */ .fs-adminchip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: var(--radius-pill); color: var(--accent-t); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-w); font: 600 11px var(--font-sans); white-space: nowrap; text-decoration: none; flex: 0 0 auto; } .fs-adminchip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); } .fs-adminchip[hidden] { display: none !important; } .fs-pluschip { display: inline-flex; position: relative; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px 0 35px; border-radius: 9px; font: 700 11.5px/1.1 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--plus-w); color: var(--plus-t); background: linear-gradient(145deg, var(--plus-soft), var(--surface)); transition: transform var(--mo-1) var(--mo-ease), box-shadow var(--mo-1) var(--mo-ease), background-color var(--mo-1) var(--mo-ease); } .fs-pluschip[hidden] { display: none !important; } .fs-pluschip::before { content: "+"; position: absolute; left: 7px; top: 50%; width: 22px; height: 22px; margin-top: -11px; display: grid; place-items: center; border-radius: 7px; background: var(--plus); color: var(--bg); font: 800 15px/1 var(--font-sans); } .fs-pluschip::after { content: "View plans"; display: block; color: var(--muted); font: 600 11px/1 var(--font-sans); letter-spacing: .01em; } .fs-pluschip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--plus), 0 6px 18px var(--line); } .fs-pluschip:active { transform: translateY(0); } /* The content well. Desktop: the shell never scrolls and each route decides which of its columns do. Narrow: see §14 — the document scrolls instead, because nested scroll regions on a phone are a trap. */ .fs-route { flex: 1; min-height: 0; overflow: hidden; } /* The well is the skip link's target and is focused programmatically. It is not a control, so it takes no ring — the reader's next Tab lands on the first link inside the record, which is the whole point. */ .fs-route:focus { outline: none; } /* ---- The bare well --------------------------------------------------------- TWO THINGS LAND IN #bl-app WITH NO ROUTE CONTAINER AROUND THEM, and until now neither had a box. 1. The server-rendered body for /incident/:id. server.js substitutes between the BODY fences in app.html, so what arrives is a bare

and one or two

. Every one of those elements is margin:0 under §2's reset, and .fs-route carries no padding and overflow:hidden. The result was the site's entire organic acquisition channel rendered hard against the viewport edge, headline welded to body copy, and clipped at the fold with no scroll able to reach the rest. Those pages are what a crawler and a no-script reader see, so they are the ones that could least afford it. 2. The single paragraph BL.render drops there when a route throws, and the same from routes/plus.js when the plan objects are missing. .fs-fallback scrolls on its own rather than handing scroll to .fs-route, which stays overflow:hidden for the routes that manage their own columns. */ .fs-fallback { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 30px 26px 34px; } .fs-fallback h1 { font: 700 34px/1.14 var(--font-sans); letter-spacing: -.025em; color: var(--text); max-width: 22ch; text-wrap: balance; } .fs-fallback p { font: 400 15px/1.65 var(--font-sans); color: var(--muted); max-width: 68ch; margin-top: 14px; } .fs-fallback .bl-lede { margin: 14px 0 0; } .fs-fallback .bl-empty { max-width: 68ch; margin-top: 0; } /* The router's own failure paragraph, appended straight to the well. */ .fs-route > .bl-empty { margin: 26px; max-width: 68ch; } @media (max-width: 860px) { /* §14 hands scrolling to the document at this width, so the fallback must not keep a scroller of its own inside it — that is the nested-scroller trap, and on the one page a search engine sent someone to. */ .fs-fallback { height: auto; overflow: visible; padding: 22px 16px 28px; } .fs-fallback h1 { font-size: 27px; } .fs-route > .bl-empty { margin: 18px 16px; } } /* ============================================================================ §5 PRIMITIVES (deduplicated across every route) ============================================================================ */ /* ---- Eyebrow --------------------------------------------------------------- The all-caps hairline heading. Six routes described this separately as .bl-eyebrow, .bl-section-head, .bl-town-seclabel, .dg-card-label, .set-eyebrow and .plus-matrix__col. They are one thing. */ .bl-eyebrow { font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: .085em; color: var(--faint); margin: 0 0 10px; } .bl-eyebrow--flush { margin-bottom: 0; } .bl-eyebrow--gap { margin-bottom: 14px; } /* Settings' six section headings sit in a bordered list: the 2px bottom puts the section's first hairline rule 2px under the label, as drawn. */ .bl-eyebrow--section { padding: 22px 0 2px; margin: 0; } /* In-table group label. One notch smaller and one notch looser than a card eyebrow, deliberately — it is what tells a group label from a card title. */ .bl-eyebrow--group { font-size: 11px; letter-spacing: .09em; padding: 14px 4px 8px; margin: 0; } .bl-eyebrow--group-later { padding-top: 18px; } /* ---- Display type ---------------------------------------------------------- */ .bl-headline { font: 700 42px/1.1 var(--font-sans); letter-spacing: -.03em; color: var(--text); margin: 0; text-wrap: pretty; } .bl-headline--xl { font-size: 46px; line-height: 1.08; max-width: 17ch; } .bl-headline--tight { max-width: 20ch; } .bl-title { font: 700 36px/1.12 var(--font-sans); letter-spacing: -.028em; color: var(--text); margin: 0; text-wrap: balance; } .bl-deck { font: 400 15px/1.6 var(--font-sans); color: var(--muted); margin: 12px 0 0; max-width: 66ch; text-wrap: pretty; } .bl-deck--lg { font-size: 16px; line-height: 1.62; max-width: 60ch; } /* Long-form model-written prose. --text, not --muted: this is the primary content of the page it appears on, and --muted is a .62 alpha in dark. */ .bl-prose { font: 400 15px/1.7 var(--font-sans); color: var(--text); max-width: 70ch; text-wrap: pretty; } .bl-prose p { margin: 0 0 16px; } .bl-prose p:last-child { margin: 0; } /* One paragraph of orientation above a body of records. */ .bl-lede { font: 400 13px/1.6 var(--font-sans); color: var(--muted); margin: 0 0 20px; max-width: 68ch; text-wrap: pretty; } .bl-lede b { font-weight: 600; color: var(--text); } .bl-crumb { font: 400 12px var(--font-sans); color: var(--faint); } .bl-crumb a { color: inherit; text-decoration: none; } .bl-crumb a:hover { color: var(--muted); } /* ---- Hairline -------------------------------------------------------------- Every separator that eats remaining width. Real borders are reserved for structural edges (column dividers, the header rule, row rules). */ .bl-rule { flex: 1; height: 1px; background: var(--line); } /* ---- Section header with rule ---------------------------------------------- */ .bl-sechead { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .bl-secnote { font: 400 11.5px var(--font-sans); color: var(--faint); white-space: nowrap; } /* ---- Badges ---------------------------------------------------------------- One pill, six meanings. Severity reads the §3 locals so it can never be set without its rank width also being set on the card it belongs to. */ .bl-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 11px; font: 600 11px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; } .bl-badge--lg { padding: 3px 10px; } .bl-badge--sev { background: var(--sev-tint, var(--t0)); color: var(--sev-ink, var(--i0)); box-shadow: inset 0 0 0 1px var(--sev-edge, var(--e0)); } /* Status is not severity. A call is open when closed, cancelled AND filed are all null. Open borrows the rank-1 triple and closed the rank-0 triple because those read as "running" and "done" — it never touches --s4/--s5, which would say "this call is serious" when it means "this call is live". */ .bl-badge--open { background: var(--t1); color: var(--i1); box-shadow: inset 0 0 0 1px var(--e1); } .bl-badge--closed { background: var(--t0); color: var(--i0); box-shadow: inset 0 0 0 1px var(--e0); } /* A MACHINE WROTE THIS. The only sanctioned use of the violet ramp anywhere in this file. Put it on model-written prose, model-written titles, and model-inferred groupings — never on a count, a control, or CAD data. */ .bl-badge--ai { background: var(--tp); color: var(--ip); box-shadow: inset 0 0 0 1px var(--ep); font-size: 11px; letter-spacing: .055em; border-radius: 10px; padding: 2px 8px; } .bl-badge--ai-lg { font-size: 11px; letter-spacing: .06em; padding: 3px 10px; border-radius: 11px; } .bl-badge--plus { background: var(--plus-soft); color: var(--plus-t); box-shadow: inset 0 0 0 1px var(--plus-w); font-size: 11px; letter-spacing: .055em; border-radius: 10px; padding: 2px 7px; } /* Coverage capability, e.g. "Dispatch record". The prototype painted this violet — wrong: a coverage fact is asserted by us from the CAD feed, not written by a model. It moves to the accent family, which is the CAD side. */ .bl-badge--cap { background: var(--accent-soft); color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent-w); font: 600 11px var(--font-sans); letter-spacing: .06em; border-radius: var(--radius-pill); padding: 4px 10px; } /* Three-bar rank meter. Lead card only — it is what makes one card on the page louder than the rest, and it stops working the moment it is everywhere. currentColor, so it is always the badge's own ink. */ .bl-meter { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 8px; } .bl-meter i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; } .bl-meter i:nth-child(1) { height: 4px; } .bl-meter i:nth-child(2) { height: 6px; } .bl-meter i:nth-child(3) { height: 8px; } /* ---- Chips (selectable pills) ---------------------------------------------- The theme toggle and the export-scope picker are the same control. */ .bl-chip { display: inline-flex; align-items: center; padding: 0 12px; min-height: 30px; border-radius: var(--radius-pill); font: 500 12px var(--font-sans); white-space: nowrap; cursor: pointer; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line2); } .bl-chip:hover { color: var(--text); } .bl-chip.is-on, .bl-chip[aria-pressed="true"] { color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent); } /* .bl-chip--sm, the header-bar size, is gone: the header's only chip pair was the theme switch, which is now .fs-theme, and nothing else emitted it. */ .bl-chips { display: flex; gap: 6px; flex-wrap: wrap; } /* ---- Segmented control (Cards | Table) -------------------------------------- */ .bl-seg { display: inline-flex; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line2); flex: 0 0 auto; } .bl-seg-b { display: inline-flex; align-items: center; gap: 5px; /* only ever seen when a padlock is in front of the label */ padding: 5px 11px; font: 500 11.5px var(--font-sans); color: var(--muted); cursor: pointer; } .bl-seg-b:hover { color: var(--muted); } .bl-seg-b.is-on { color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent); } .bl-seg-b:focus-visible { outline-offset: -2px; } /* ---- The Blotter+ gate, as a control wears it ------------------------------- GOLD IS THE WHOLE MECHANISM. --plus means Blotter+ and means nothing else on this site, so a control painted with it is saying which tier it belongs to before anybody touches it — which is the one thing the gate has to do, given that the server cannot enforce any of it (one shared key, no accounts). A locked control is drawn at FULL SIZE and full opacity. It is not dimmed, not blurred and not removed: a reader who cannot see what the subscription is for has no reason to want it, and the last version of this gate hid the product and then handed back a smear. The padlock and the gold say "this one costs"; the control still answers when it is pressed, with a line naming the price. Nothing here is disabled, so all of it stays in the tab order and a keyboard reader meets the same offer. These come after .is-on deliberately. The two cannot co-occur in practice — a clamped preference lights the tier the reader actually has, not the one they stored — but if they ever did, the gate is the more important fact. */ .bl-seg-b.is-plus, .bl-chip.is-plus { color: var(--plus-t); background: var(--plus-soft); box-shadow: inset 0 0 0 1px var(--plus-w); } .bl-seg-b.is-plus:hover, .bl-chip.is-plus:hover { color: var(--plus-t); box-shadow: inset 0 0 0 1px var(--plus); } .bl-chip.is-plus { gap: 5px; } /* The padlock itself, in front of a label. flex:0 0 auto so a long department name cannot squeeze it into an ellipse. */ .bl-lock-glyph { flex: 0 0 auto; color: var(--plus-t); } /* The way out of a gate, inside the sub-line the gate just wrote. It is the only link that appears in a .bl-row-sub, which is why it is styled here rather than as a rule on that class — a sub-line is otherwise plain text and should not start underlining things. */ .bl-gate-link { color: var(--plus-t); text-decoration: none; white-space: nowrap; } .bl-gate-link:hover { text-decoration: underline; } /* One line of the gate list in the /settings rail: padlock, then the name of a control the reader can scroll up and look at. */ .bl-gate-item { display: flex; align-items: center; gap: 7px; margin-top: 7px; font: 400 12.5px var(--font-sans); color: var(--muted); } /* ---- Tabs ------------------------------------------------------------------- */ .bl-tabs { display: flex; gap: 5px; margin-top: 20px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .bl-tab { padding: 0 0 12px; font: 500 14px var(--font-sans); white-space: nowrap; cursor: pointer; color: var(--faint); } .bl-tab:hover { color: var(--muted); } .bl-tab { padding: 8px 11px; border-radius: 8px; } .bl-tab.is-on, .bl-tab[aria-selected="true"] { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-w); } .bl-tab:focus-visible { outline-offset: 2px; } /* ---- Buttons ----------------------------------------------------------------- */ .bl-btn { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line2); color: var(--muted); font: 500 12.5px var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none; } .bl-btn:hover { color: var(--text); } .bl-btn--primary { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-t); } /* Buying a subscription is a Blotter+ action, not a dispatch action, so the one primary control on /plus is still not painted --accent. */ .bl-btn--plus { box-shadow: inset 0 0 0 1px var(--plus-w); background: var(--plus-soft); color: var(--plus-t); font-size: 13px; } .bl-btn--ghost-plus { box-shadow: inset 0 0 0 1px var(--plus); background: none; color: var(--plus-t); } .bl-btn--lg { min-height: 48px; padding: 0 22px; font-size: 15px; } .bl-btn--auto { flex: 0 0 auto; } .bl-actions { display: flex; gap: 8px; } /* Quiet inline action — a text button that must not compete with a card. */ .bl-linkbtn { font: 500 11px var(--font-sans); color: var(--accent-t); cursor: pointer; } .bl-linkbtn:hover { text-decoration: underline; } /* ---- Notes / editorial cards ------------------------------------------------- Six routes described this box separately (privacy notes, rail cards, the "Delivered" card, the plus rail, the town empty state). It is one component: transparent, a 1px inset --line ring over the page ground, no fill. */ .bl-note { padding: 16px 18px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); background: none; } .bl-note--lg { padding: 18px 20px; } .bl-note--plus { box-shadow: inset 0 0 0 1px var(--plus-w); background: var(--plus-soft); display: block; text-decoration: none; } .bl-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .bl-note-head svg { color: var(--faint); flex: 0 0 auto; } .bl-note-title { font: 500 12.5px var(--font-sans); color: var(--text); margin: 0; } .bl-note-title--plus { font: 600 15px var(--font-sans); color: var(--plus-t); } .bl-note-body { font: 400 12.5px/1.65 var(--font-sans); color: var(--muted); margin: 0; } .bl-note-body + .bl-note-body { margin-top: 8px; } .bl-note-cta { display: block; font: 500 12.5px var(--font-sans); color: var(--plus-t); margin-top: 11px; } /* Absence, not a statement — same box, one step quieter than body copy. IT IS NOT ON --faint. This is the class every loading, empty, error and offline message on the site is built from, and --faint measures 3.74:1 in dark and 3.97:1 in light against --bg, below AA for normal text at any size. A reader who cannot read the failure message has been told nothing. --muted is 6.2:1 dark and 7.0:1 light and is the quietest ink a sentence may take here. When the token ramp is repaired (see the note at the top of this file) --faint becomes legal again — but a state message still wants the weight, so this stays. */ .bl-empty { padding: 16px 18px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); font: 400 12.5px/1.65 var(--font-sans); color: var(--muted); margin: 0; } /* ---- Unit chips -------------------------------------------------------------- From responses_all_depts[].unit. CAD data, not radio. --unit is the token that means "unit designator" and it means nothing else. */ .bl-units { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .bl-unit { padding: 2px 8px; border-radius: var(--radius-sm); font: 500 11px var(--font-mono); background: var(--unit-bg); color: var(--unit); } .bl-unit--lg { padding: 5px 10px; border-radius: 6px; font-size: 12px; } .bl-unit-more { font: 400 11px var(--font-sans); color: var(--faint); } .bl-unit-sp { flex: 1; } .bl-incid { font: 400 11px var(--font-mono); color: var(--faint); } /* ---- Load-more divider -------------------------------------------------------- A rule-label-rule, not a button, so the end of the window does not compete with the records above it. */ .bl-more { display: flex; align-items: center; gap: 12px; padding: 8px 2px; width: 100%; cursor: pointer; } .bl-more-label { font: 400 12px var(--font-sans); color: var(--faint); white-space: nowrap; } .bl-more:hover .bl-more-label { color: var(--muted); } /* ---- Stats -------------------------------------------------------------------- */ .bl-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; } .bl-stat-l { display: block; font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); white-space: nowrap; } .bl-stat-v { display: block; font: 600 17px/1.2 var(--font-mono); color: var(--text); margin-top: 4px; } /* Left-packed, capped at 150px, count-agnostic: grid-auto-flow:column means three cells or five cells both work with no template change, and justify-content:start keeps the strip from stretching to fill. */ .bl-statgrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 150px); justify-content: start; gap: 18px; margin: 24px 0 0; } .bl-statgrid .bl-stat-l { font-size: 11px; letter-spacing: .085em; } .bl-statgrid .bl-stat-v { font-size: 26px; line-height: 1.15; margin-top: 7px; } /* Key/value row form — a rule above every row including the first, so a hairline sits under the card's label. */ .bl-statrow { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); } .bl-statrow-k { font: 400 13px var(--font-sans); color: var(--muted); flex: 1; } .bl-statrow-v { font: 500 14px var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; } /* A value that is a name rather than a number leaves the mono face and drops a pixel — mono is reserved for measured quantities. */ .bl-statrow-v--text { font: 500 13px var(--font-sans); } /* ---- Map ---------------------------------------------------------------------- A CSS drawing in the prototype. A real tile layer must keep the height, the radius and the --map/--grid ground; pins come from latitude/longitude, and render nothing at all when either is null. */ .bl-map { position: relative; overflow: hidden; height: 96px; background: var(--map); } .bl-map--lg { height: 180px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line2); } /* The town's real municipal border, drawn as SVG from the same polygons reference.js uses to decide which town a call is in. What was here was .bl-map-grid — a repeating-linear-gradient street grid — and .bl-map-road, a single 74deg gradient standing in for a road. Both are gone. The pin over them was placed from the record's true coordinates, and that is precisely what made the fake street underneath dishonest rather than decorative. */ .bl-map-ground { position: absolute; inset: 0; overflow: hidden; } .bl-map-tile { position: absolute; width: 256px; height: 256px; /* Full strength. The pins carry their own halo and the border is a stroke, so neither needs the ground dimmed to stay legible — and a knocked-back basemap on a small panel just reads as fog. */ opacity: 1; transition: opacity var(--mo-2) var(--mo-ease); } /* THE GROUND ASSEMBLES, IT DOES NOT FLASH. An that has no bytes yet paints nothing, so a tile layer built without this arrives as a grid of rectangles snapping on one at a time in whatever order the network answered. BL.tileIn holds each tile here and clears the class a frame after its own load — or its own error, because a 404 tile stuck at zero would be a permanent hole that looks exactly like a bug. */ .bl-map-tile.is-loading { opacity: 0; } .bl-map-over { position: absolute; inset: 0; width: 100%; height: 100%; } /* The town's real municipal border, over the tiles. Same polygons reference.js uses to decide which town a call is in, so the outline and the record cannot disagree. Fill is a wash, not a block: the streets underneath are the reason the tiles are there. */ .bl-map-area { fill: var(--accent); fill-opacity: .07; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* Severity by fill AND radius, the same rule the stripes follow, so the ordering survives greyscale. The halo is the page background, so a pin stays findable over a busy tile. */ .bl-map-pin { fill: var(--s0); stroke: var(--bg); stroke-width: 2; paint-order: stroke; } .bl-map-pin[data-sev="5"] { fill: var(--s5); r: 6.5; } .bl-map-pin[data-sev="4"] { fill: var(--s4); r: 6; } .bl-map-pin[data-sev="3"] { fill: var(--s3); r: 5.5; } .bl-map-pin[data-sev="2"] { fill: var(--s2); r: 5; } .bl-map-pin[data-sev="1"] { fill: var(--s1); r: 4.5; } .bl-map-pin[data-sev="0"] { fill: var(--s0); r: 4; } .bl-map-credit { position: absolute; right: 4px; bottom: 3px; padding: 1px 5px; border-radius: var(--radius-sm, 4px); background: var(--bg); color: var(--faint); font: 400 11px var(--font-sans); opacity: .8; pointer-events: none; } /* The empty state of a map panel, so it follows .bl-empty off --faint. */ .bl-map-none { margin: 0; padding: 0 12px; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font: 400 11.5px var(--font-sans); } /* The absolutely-positioned .bl-pin system is gone. Three pin implementations existed at once; the two that survive are .bl-map-pin (the rail panels) and .bl-mappin (the map screen), both SVG circles that carry rank as radius as well as hue. */ /* ---- The mini map ------------------------------------------------------------- BL.miniMap, for a rail that is showing ONE call. .bl-map above answers "where in the county" — it fits an extent and traces a municipal border, so a single call comes out as a dot inside an outline of a town. This answers the question a reader of one incident is actually asking, which is WHICH ROAD. It is a different object and it has to look like one, or a reader will try to pan it. Four tells, none of them decoration: · a taller box with a radius and its own ring, so it reads as a plate rather than as the flush band .bl-map draws; · corner brackets — the viewfinder convention for "this is a crop"; · a reticle through the marker, so the marker is being POINTED AT rather than merely present; · a scale bar, which is the only element on the panel that states how tight the zoom is. That is the whole difference between this and the county map, and it is stated rather than implied. THERE IS NO STREET VIEW HERE and there is not going to be one. See the header over BL.miniMap in blotter.js: a Google panorama needs a billed Maps key and sends the incident's address to Google on page load for every reader, on a site whose disclaimer says nothing leaves the machine but a map tile. The road labels on the voyager ground are the honest version of what it was for. */ .bl-minimap { height: 128px; /* A stated height in a flex-column rail has to refuse to be squeezed: an empty box has a min-content height of zero, so without this the panel collapses the moment the rail is taller than its column. */ flex: 0 0 auto; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line2); } .bl-minimap--tall { height: 168px; } /* The viewfinder brackets. Two pseudo-elements, two corners — four would be a frame, and a frame reads as a border rather than as a crop. BOTH ARE AT THE TOP, which is not an aesthetic choice: the bottom edge of this panel is already carrying the scale bar on the left and the © credit on the right, and a bracket ruled through either of them is a hairline crossing text. The top edge is the only clear one. */ .bl-minimap::before, .bl-minimap::after { content: ""; position: absolute; top: 6px; z-index: 2; width: 11px; height: 11px; border-top: 1px solid var(--line2); pointer-events: none; opacity: .75; } .bl-minimap::before { left: 6px; border-left: 1px solid var(--line2); } .bl-minimap::after { right: 6px; border-right: 1px solid var(--line2); } /* The empty state fills the plate, so the brackets are not left framing nothing. */ .bl-minimap .bl-map-none { position: relative; z-index: 1; } /* The reticle. Hairline, low contrast, and BROKEN around the marker — lines crossing underneath a dot read as a defect in the tile, a gap reads as an instrument pointing at something. */ .bl-minimap-cross { stroke: var(--text); stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 2 4; } /* Halo, ring, dot: the page ground knocked back under the marker, the severity hue as an outline, and the severity hue solid. Rank is size AND colour here exactly as it is on a card stripe, so the marker survives greyscale. --sev comes from data-sev on .bl-minimap itself (§3). */ .bl-minimap-halo { fill: var(--bg); fill-opacity: .55; stroke: var(--sev, var(--s0)); stroke-opacity: .25; stroke-width: 1; } .bl-minimap-ring { fill: none; stroke: var(--sev, var(--s0)); stroke-opacity: .7; stroke-width: 1.5; } .bl-minimap-dot { fill: var(--sev, var(--s0)); stroke: var(--bg); stroke-width: 2; paint-order: stroke; r: 4.5; } [data-sev="5"] .bl-minimap-dot { r: 6; } [data-sev="4"] .bl-minimap-dot { r: 5.5; } [data-sev="3"] .bl-minimap-dot { r: 5; } [data-sev="2"] .bl-minimap-dot { r: 4.5; } [data-sev="1"] .bl-minimap-dot { r: 4; } [data-sev="0"] .bl-minimap-dot { r: 3.5; } /* Other calls that happen to be in frame. Deliberately plain — they are context, and a second marker with the same treatment as the first would make the panel ambiguous about which call it is a picture of. */ .bl-minimap-near { fill: var(--sev, var(--s0)); fill-opacity: .8; stroke: var(--bg); stroke-width: 1.5; paint-order: stroke; } /* The scale bar. Real distance, computed from the latitude and the zoom, in feet because this is a Connecticut street. It sits opposite the © credit so the two never collide. */ .bl-minimap-scale { position: absolute; left: 5px; bottom: 4px; z-index: 2; display: flex; align-items: flex-end; gap: 5px; padding: 2px 5px 1px; border-radius: var(--radius-sm, 4px); background: var(--bg); color: var(--faint); font: 400 11px var(--font-sans); opacity: .86; pointer-events: none; } .bl-minimap-scale i { display: block; height: 4px; border: 1px solid var(--faint); border-top: 0; opacity: .8; } /* ---- Locked prose: DELETED, and not to be written again ------------------------- There were two rules here, .bl-blur and .bl-blur--sm, which put a 5px smear over model-written paragraphs a free reader had not paid for. Nothing referenced them: routes/digest.js removed the last use and its header says why — the blur "is defeated by the element inspector, so it claimed an enforcement that did not exist, and it handed a reader who had asked for the week a 4px smear instead of an answer." They are deleted rather than left dead because dead CSS in a design system is an invitation. This is the failure this project shipped twice, and a ready-made class named for it is how it gets shipped a third time. WHAT TO USE INSTEAD, in every case: .bl-lock / BL.lockCard below. A gate that cannot be enforced has to be honest and legible — say what is behind it, say what it costs, and leave the text out of the DOM. Never render the thing and obscure it. */ /* ---- Blotter+ lock row / card --------------------------------------------------- A quiet outlined offer, never an error and never a denial. A reader who cannot have the third saved view is not doing anything wrong. */ .bl-lock { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--plus-w); background: var(--plus-soft); cursor: pointer; text-decoration: none; color: inherit; max-width: 640px; } .bl-lock-icon { color: var(--plus-t); flex: 0 0 auto; } .bl-lock-text { flex: 1; display: block; min-width: 0; } .bl-lock-title { display: block; font: 500 13.5px var(--font-sans); color: var(--text); } .bl-lock-sub { display: block; font: 400 11.5px/1.5 var(--font-sans); color: var(--muted); margin-top: 3px; } .bl-lock-cta { font: 500 12.5px var(--font-sans); color: var(--plus-t); white-space: nowrap; } /* ============================================================================ §6 INCIDENT CARD (the workhorse — /blotter and /town) ============================================================================ One shell, three densities and four states. The /blotter feed card and the /town dispatch card were specified separately; they are the same component at two type scales, so they are one component here. States: open+ranked, ranked with no status badge, closed (dimmed), and a single-line variant with no right-hand meta. */ .bl-card { position: relative; overflow: hidden; display: block; /* DO NOT LET A CARD SHRINK. .bl-feed is a flex column, and the moment the shell got a definite height every card started shrinking to fit the box instead of the box scrolling — with overflow:hidden above, that clipped every title top and bottom and turned the feed into twenty squashed bars. flex-shrink defaults to 1; a card is content, not a spacer. */ flex: 0 0 auto; background: var(--surface2); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); cursor: pointer; text-decoration: none; color: inherit; padding: 13px 16px 13px 24px; } .bl-card:hover { box-shadow: 0 0 0 1px var(--line2); } /* Closed records keep their text contrast: the severity the CAD assigned is still true after the call closes, so the stripe keeps its real rank. Rank 0 means "Unspecified", not "finished", and must never be used to mean closed. */ .bl-card.is-closed { opacity: 1; } /* The ordinary feed is a scan list. Its old 21px headline, 13px vertical padding and agency-reference footer made each row needlessly tall. */ .bl-card--feed { padding: 9px 13px 9px 19px; } .bl-card--feed .bl-titlerow { gap: 6px; } .bl-card--feed .bl-card-title { font: 600 16px/1.2 var(--font-sans); letter-spacing: 0; } .bl-card--feed .bl-time { font-size: 11px; } .bl-card--feed .bl-badge { padding: 1px 7px; font-size: 11px; } .bl-card--feed .bl-meta { font-size: 12px; } .bl-card--feed .bl-meta--solo { margin-top: 4px; } /* Rail density (/town's promoted list). Flat 21px left padding at every rank, NOT stripe-width + gap: titles must align down the column across severities or the list reads as ragged. The stripe still varies; the text does not. */ .bl-card--compact { padding: 12px 14px 12px 21px; box-shadow: inset 0 0 0 1px var(--line); background: none; margin-bottom: 7px; } .bl-card--compact:last-child { margin-bottom: 0; } /* "Featured" is carried by the surface and the accent ring. The prototype also widened its stripe to 5px at rank 3, which would lie about rank — the width channel belongs to severity alone, so it stays token-driven here. */ .bl-card--compact.is-featured { background: var(--surface); box-shadow: 0 0 0 1px var(--accent-w); } .bl-titlerow { display: flex; align-items: baseline; gap: 9px; } /* inc_category arrives SHOUTED and verbose when the model-written title is null ("PSYCH/ABN. BEHAVIOR/SUIC ATTEMPT -COLD"), which is the common case. The single-line ellipsis is load-bearing, and the fallback needs case-normalising before it reaches a 21px bold line. */ .bl-card-title { font: 700 21px/1.15 var(--font-sans); letter-spacing: -.015em; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .bl-card--compact .bl-card-title { font: 600 16px/1.2 var(--font-sans); letter-spacing: 0; } .bl-time { font: 500 12px var(--font-mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .bl-card--compact .bl-time { font-size: 11.5px; } /* Tinted elapsed is a THRESHOLD STATE — a call that has been open long enough to be worth noticing — not decoration. Routes must pick that threshold explicitly and only then add this class. */ .bl-elapsed { color: var(--i3); } .bl-metarow { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; } .bl-meta { font: 400 13.5px var(--font-sans); color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .bl-meta--solo { margin: 8px 0 0; flex: none; display: block; } .bl-card--compact .bl-meta { font-size: 12.5px; color: var(--faint); margin-top: 6px; } /* Reserved slot for a short right-hand qualifier. Kept because the layout depends on .bl-metarow having a flex:1 child plus an optional fixed one. */ .bl-meta-quiet { font: 400 11.5px var(--font-sans); color: var(--faint); white-space: nowrap; flex: 0 0 auto; } .bl-card .bl-units { margin-top: 10px; } /* ============================================================================ §7 GROUPED / RELATED RECORDS (/blotter lead card footer, /incident foot) ============================================================================ The other CAD records the dispatch centre opened for the same event — the second alarm, the cancelled smoke call next door. The violet pill is CORRECT here and is the only violet on either route: the grouping is inferred by a model, not asserted by the CAD. Members are held in secondary type so they read as subordinate without reducing contrast. */ .bl-group { padding: 11px 16px 13px 24px; border-top: 1px solid var(--line2); background: var(--surface2); } /* Standalone (on /incident it is a card at the foot of the scroll body, not a footer welded to another card). */ .bl-group--card { margin-top: 26px; padding: 11px 16px 13px; border-top: 0; border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line2); } .bl-group-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .bl-group-cap { font: 400 11px var(--font-sans); color: var(--faint); flex: 1; } .bl-group-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; opacity: 1; text-decoration: none; color: inherit; } .bl-group-row:hover { opacity: 1; } .bl-group-txt { font: 400 12.5px var(--font-sans); color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-group-time { font: 500 11px var(--font-mono); color: var(--faint); white-space: nowrap; } /* A group welded beneath a feed card is supporting context, not a second card. Keep the standalone /incident treatment roomy, but compress the feed footer so one related CAD record does not nearly double the row height. */ .bl-card--feed .bl-group { padding: 6px 13px 7px 19px; } .bl-card--feed .bl-group-top { margin-bottom: 2px; } .bl-card--feed .bl-group-row { gap: 8px; padding: 3px 0; } .bl-card--feed .bl-sev-bar { height: 12px; } /* ============================================================================ §8 ROUTE — /blotter three columns ============================================================================ 236px filter rail | fluid feed | 408px context rail. Each column scrolls independently; the grid itself never scrolls. The context rail is the only --surface2 field on the route. The feed sits directly on --bg and its standard cards are --surface2, so they read as the same value as the rail. That is deliberate: the lead card is the only thing on the page lifted to --surface. */ .bl-blotter { height: 100%; display: grid; grid-template-columns: 236px minmax(0, 1fr) 408px; overflow: hidden; } /* The loading, empty and failed states have no context rail: it held the standing privacy panel and nothing else. Two tracks rather than 408px of empty column beside a one-line message. */ .bl-blotter--noctx { grid-template-columns: 236px minmax(0, 1fr); } .bl-rail { border-right: 1px solid var(--line); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 20px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; } /* The browser default can become a heavy black gutter in a themed rail. Keep the affordance, but make it a narrow surface-coloured thumb with no contrasting track so it belongs to both the light and dark palettes. */ .bl-rail::-webkit-scrollbar { width: 8px; } .bl-rail::-webkit-scrollbar-track { background: transparent; } .bl-rail::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--line2); background-clip: padding-box; } .bl-rail::-webkit-scrollbar-thumb:hover { background-color: var(--muted); } .bl-feed { min-width: 0; overflow: auto; padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 6px; } .bl-ctx { border-left: 1px solid var(--line); background: var(--surface2); padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 18px; overflow: auto; } .bl-ctx .bl-eyebrow { margin-bottom: 11px; } /* ---- Live status card (filter rail) ---------------------------------------- */ .bl-live { padding: 12px 13px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--accent-w); background: var(--accent-soft); } .bl-live-top { display: flex; align-items: center; gap: 7px; } /* The prototype painted this dot --s1/--s0, which are SEVERITY RANK tokens. A poll indicator has no rank — it is status. It takes the same rank-1/rank-0 ink the open/closed status badge uses, so "green means running" stays one idea across the site without claiming a severity the call does not have. */ .bl-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--i0); display: block; flex: 0 0 auto; } .bl-live-dot.is-live { background: var(--i1); animation: fsPulse 2s ease-in-out infinite; } .bl-live-label { font: 500 11.5px var(--font-sans); flex: 1; } .bl-live-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; } /* Both clocks must reflect the real poll cadence (45s plus, 120s free) or the card is a lie about a product entitlement. */ .bl-live-next { font: 400 11px var(--font-sans); color: var(--muted); flex: 1; } /* ---- Compact feed filters ---------------------------------------------------- */ .bl-filterbox { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px; background: var(--surface2); } .bl-filterhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .bl-filterhead .bl-eyebrow { margin: 0; } .bl-filterall { cursor: pointer; border: 1px solid var(--line2); border-radius: var(--radius-pill); padding: 3px 8px; color: var(--faint); font: 600 11px var(--font-sans); } .bl-filterall.is-on { color: var(--accent-t); border-color: var(--accent-w); background: var(--accent-soft); } .bl-sev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; } .bl-sev-row { display: flex; align-items: center; gap: 7px; cursor: pointer; width: 100%; min-width: 0; } .bl-feedchip { min-height: 31px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .bl-feedchip.is-on { border-color: var(--accent-w); background: var(--accent-soft); } .bl-sev-name { min-width: 0; font: 400 12.5px var(--font-sans); color: var(--muted); flex: 1; } .bl-sev-row.is-on .bl-sev-name { color: var(--text); } .bl-sev-n { font: 400 11.5px var(--font-mono); color: var(--faint); font-variant-numeric: tabular-nums; } /* ---- Detailed feed filters -------------------------------------------------- */ .bl-filtercount { display: inline-grid; place-items: center; min-width: 42px; min-height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font: 600 11px var(--font-mono); box-shadow: inset 0 0 0 1px var(--line); } .bl-facet-form { display: grid; gap: 8px; } .bl-facet-field { display: grid; gap: 4px; min-width: 0; } .bl-facet-label { color: var(--faint); font: 600 11px/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; } .bl-facet-input { width: 100%; min-width: 0; min-height: 34px; padding: 0 9px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--text); font: 500 11.5px var(--font-sans); } .bl-facet-input::placeholder { color: var(--faint); } .bl-facet-input:focus { border-color: var(--accent); outline: 2px solid var(--accent-w); outline-offset: 1px; } .bl-facet-field .bl-menu { min-width: 0; width: 100%; } .bl-facet-field .bl-menu-button { min-height: 34px; padding-left: 9px; border-radius: 8px; background: var(--surface); font-size: 11.5px; } .bl-facet-actions { display: flex; align-items: center; gap: 9px; margin-top: 2px; } .bl-facet-apply { min-height: 32px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--bg); font: 700 11px var(--font-sans); cursor: pointer; } .bl-facet-apply:hover { filter: brightness(1.08); } .bl-facet-result { color: var(--faint); font: 400 11px/1.4 var(--font-sans); } /* ---- Watchlist --------------------------------------------------------------- */ .bl-watchbox { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px; background: var(--surface2); } .bl-watchhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .bl-watchhead .bl-eyebrow { margin: 0; } .bl-watchcount { display: inline-grid; place-items: center; min-width: 22px; min-height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font: 600 11px var(--font-mono); box-shadow: inset 0 0 0 1px var(--line); } .bl-watchbox-body { margin: 0; } .bl-watch-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); } .bl-watch-input { min-width: 0; min-height: 31px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--text); font: 500 11px var(--font-sans); } .bl-watch-input:focus { border-color: var(--plus-t); outline: 2px solid var(--plus-w); outline-offset: 1px; } .bl-watch-savebtn { min-height: 31px; padding: 0 10px; border: 1px solid var(--plus-t); border-radius: 8px; background: var(--plus-t); color: var(--surface); font: 700 11px var(--font-sans); cursor: pointer; } .bl-watch-note { grid-column: 1 / -1; color: var(--faint); font: 400 11px/1.35 var(--font-sans); } .bl-watch-note:empty { display: none; } .bl-watch-upgrade { display: block; padding-top: 9px; border-top: 1px solid var(--line); color: var(--plus-t); font: 650 11px/1.35 var(--font-sans); text-decoration: none; } .bl-wl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 5px; margin-bottom: 6px; } .bl-wl-wrap .bl-wl { margin-bottom: 0; } .bl-wl-remove { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--faint); cursor: pointer; font: 500 16px/1 var(--font-sans); } .bl-wl-remove:hover { border-color: var(--line2); color: var(--text); } .bl-wl { display: block; padding: 10px 12px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; margin-bottom: 6px; text-decoration: none; color: inherit; } .bl-wl.is-on { box-shadow: inset 0 0 0 1px var(--accent-w); } .bl-wl-top { display: flex; align-items: center; gap: 8px; } .bl-wl-name { font: 500 12.5px var(--font-sans); color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-wl.is-on .bl-wl-name { color: var(--text); } /* CORRECTED. The prototype painted this violet. Violet means a machine WROTE something; a count of records newly matching a saved view is computed, not written. It ships as an unread affordance on the accent family. */ .bl-wl-new { padding: 1px 7px; border-radius: var(--radius-pill); font: 600 11px var(--font-sans); text-transform: uppercase; letter-spacing: .05em; background: var(--accent-soft); color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent-w); white-space: nowrap; } .bl-wl-quiet { font: 400 11px var(--font-sans); color: var(--muted); white-space: nowrap; } .bl-wl-sub { display: block; font: 400 11px var(--font-sans); color: var(--muted); margin-top: 4px; } /* ---- Feed header --------------------------------------------------------------- */ .bl-feedhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 10px; } .bl-feedhead-copy { display: flex; align-items: center; gap: 11px; min-width: 0; } /* Brand mark. Ships as /img/mark-feed.svg — it carries four fixed brand hexes that belong to no token ramp, and inlining them here would be the exact bug the "no hex literals" rule is for. Sizing only. */ .bl-mark { flex: 0 0 auto; width: 24px; height: 24px; } .bl-feedtitle { font: 600 23px/1.15 var(--font-sans); letter-spacing: -.02em; margin: 0; } .bl-feedsub { font: 400 12.5px var(--font-sans); color: var(--muted); margin: 3px 0 0; } .bl-feedtools { display: flex; align-items: center; gap: 12px; min-width: 0; } .bl-feedsearch { display: flex; align-items: center; min-width: 210px; border: 1px solid var(--line2); border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; } .bl-feedsearch:focus-within { border-color: var(--accent); } .bl-feedsearch-in { width: 100%; min-width: 0; padding: 8px 4px 8px 12px; border: 0; outline: 0; background: none; color: var(--text); font: 400 12.5px var(--font-sans); } .bl-feedsearch-in::placeholder { color: var(--faint); } .bl-feedsearch-go { min-height: 34px; padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: var(--surface2); color: var(--muted); font: 600 11px var(--font-sans); cursor: pointer; } .bl-feedsearch-go:hover { color: var(--text); background: var(--accent-soft); } .bl-viewpicker { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .bl-viewlabel { font: 600 11px var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); } .bl-feedhead .bl-seg { border-radius: 9px; background: var(--surface2); } .bl-feedhead .bl-seg-b { min-height: 34px; padding: 0 14px; font-size: 12px; } .bl-feedhead .bl-seg-b.is-on { background: var(--accent-soft); } /* ---- Digest card (context rail) -------------------------------------------------- CORRECTED. The prototype framed this model-written paragraph in --accent-w / --accent-soft / --accent-t. Accent is the dispatch side and is forbidden for anything a model wrote, so the frame, the field, the icon and the footnote rule all move to the violet ramp — which is the ramp that means exactly this. The "Unlock" CTA stays on accent, because it is a primary action rather than model output. */ .bl-digestcard { border-radius: var(--radius-card); padding: 15px 16px; box-shadow: inset 0 0 0 1px var(--ep); background: var(--tp); } .bl-digestcard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .bl-digestcard-top svg { color: var(--ip); flex: 0 0 auto; } .bl-digestcard-title { font: 600 11.5px var(--font-sans); flex: 1; margin: 0; } .bl-digestcard-body { font: 400 12.5px/1.6 var(--font-sans); color: var(--muted); margin: 0; } .bl-digestcard-cta { display: block; font: 500 11.5px var(--font-sans); color: var(--accent-t); margin-top: 10px; text-decoration: none; } .bl-digestcard-foot { font: 400 11px/1.5 var(--font-sans); color: var(--faint); margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--ep); } /* ---- Address card (context rail) -------------------------------------------- */ .bl-addr-card { display: block; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; } .bl-addr-body { padding: 12px 14px; } .bl-addr-name { font: 600 15px var(--font-sans); margin: 0; } /* .bl-addr-note is gone with the copy it was for. It styled the export's "Six of the nine accidents sit between Judd Rd and Route 136" line, which cannot be derived from this feed and is deliberately not shipped — routes/feed.js addressCard(). If that derivation ever exists, the note comes back with it. */ /* ---- Department list ------------------------------------------------------------ Every row carries a border-top, first included, so the list separates itself from the eyebrow above it. */ .bl-dept { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; text-decoration: none; color: inherit; } .bl-dept-n { font: 400 13px var(--font-sans); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-dept-aid { font: 400 11px var(--font-sans); color: var(--faint); white-space: nowrap; } .bl-dept-c { font: 500 12px var(--font-mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ============================================================================ §9 ROUTE — /incident/:inc_id timeline + fact rail ============================================================================ */ .bl-inc { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 430px; overflow: hidden; } .bl-inc-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* The masthead wash is the SEVERITY TINT and must track rank. It is not a fixed brand gradient — a rank-0 record gets a rank-0 wash. */ .bl-inc-head { flex: 0 0 auto; padding: 26px 36px 0; background: linear-gradient(180deg, var(--sev-tint, var(--t0)), transparent); } .bl-inc-scroll { flex: 1; min-height: 0; overflow: auto; padding: 22px 36px 30px; } .bl-inc-rail { border-left: 1px solid var(--line); background: var(--surface2); padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 20px; overflow: auto; } .bl-inc-badges { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .bl-inc-id { font: 400 12px var(--font-mono); color: var(--faint); } /* ---- Provenance chips ------------------------------------------------------------ CORRECTED. The prototype painted the "Dispatch record · N entries" chip violet. A count of CAD entries is the opposite of machine-written — it is the most CAD thing on the page — so it takes the accent family. The violet trio is reserved for the model-attribution chip beside it, which is the only thing on this route that earns it. */ .bl-inc-src { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .bl-srcchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; font: 500 11.5px var(--font-sans); white-space: nowrap; } .bl-srcchip i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: 0 0 auto; } .bl-srcchip--cad { background: var(--accent-soft); color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent-w); } .bl-srcchip--cad i { background: var(--accent); } .bl-srcchip--ai { background: var(--tp); color: var(--ip); box-shadow: inset 0 0 0 1px var(--ep); } .bl-srcchip--ai i { background: var(--ip); } /* ---- Timeline --------------------------------------------------------------------- One grid per event. The continuity line is drawn inside each row's rail cell as a flex:1 bar, so rows butt against each other with no wrapper element and the line never outruns the last node. */ .bl-tl-item { display: grid; grid-template-columns: 58px 20px 1fr; gap: 0 14px; } .bl-tl-time { font: 500 12px/1.5 var(--font-mono); color: var(--muted); padding-top: 12px; font-variant-numeric: tabular-nums; } .bl-tl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 16px; } /* Square node = the CAD wrote this. It is the only node shape shipping this pass; the circular node was the radio transcript row. */ .bl-tl-node { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); display: block; flex: 0 0 auto; } .bl-tl-line { flex: 1; width: 1px; background: var(--line2); display: block; } .bl-tl-body { padding: 10px 0 14px; } .bl-tl-what { font: 500 14.5px/1.4 var(--font-sans); color: var(--text); } .bl-tl-meta { font: 400 12.5px/1.55 var(--font-sans); color: var(--faint); margin-top: 4px; } /* Terminal row: hollow ring, no trailing line, everything faint. This is where `status` is read — open means closed, cancelled AND filed are all null. */ .bl-tl-item.is-now .bl-tl-time { color: var(--faint); } .bl-tl-item.is-now .bl-tl-node { border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--line2); } .bl-tl-item.is-now .bl-tl-line { display: none; } .bl-tl-item.is-now .bl-tl-body { padding-bottom: 0; } .bl-tl-item.is-now .bl-tl-what { color: var(--faint); } /* detail === "skeleton": the dispatch centre published the call but not the times. Most records are this. It ends the timeline on an honest row instead of a page that looks broken. */ .bl-tl-item.is-thin .bl-tl-meta { max-width: 52ch; text-wrap: pretty; } /* Units is an operational response board, not a second timeline. */ .bl-response-board { padding-bottom: 26px; } .bl-response-boardhead { display: flex; align-items: end; justify-content: space-between; gap: 22px; } .bl-response-boardhead .bl-eyebrow { color: var(--unit); } .bl-response-boardhead h2 { margin-top: 5px; font: 700 24px/1.15 var(--font-sans); letter-spacing: -.025em; } .bl-response-boardhead .bl-lede { max-width: 66ch; margin-top: 7px; } .bl-response-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; } .bl-response-stats .bl-response-fact { border-color: color-mix(in srgb, var(--unit) 24%, var(--line)); background: color-mix(in srgb, var(--unit-bg) 46%, var(--surface2)); } .bl-response-list { display: grid; gap: 10px; margin-top: 12px; } .bl-response-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(135deg, var(--surface), var(--surface2)); transition: border-color var(--mo-1) var(--mo-ease), box-shadow var(--mo-1) var(--mo-ease); } .bl-response-card:hover { border-color: var(--line2); } .bl-response-card.is-open { border-color: color-mix(in srgb, var(--unit) 50%, var(--line)); box-shadow: 0 14px 32px rgba(3, 8, 18, .14), inset 0 1px 0 color-mix(in srgb, var(--unit) 10%, transparent); } .bl-response-summary { width: 100%; min-height: 72px; display: grid; grid-template-columns: 12px minmax(170px, 1fr) auto auto 18px; align-items: center; gap: 13px; padding: 13px 17px; cursor: pointer; } .bl-response-summary:hover { background: color-mix(in srgb, var(--unit) 5%, transparent); } .bl-response-mark { width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid var(--unit); background: transparent; box-shadow: none; } .bl-response-identity { min-width: 0; } .bl-response-identity strong { display: block; overflow: hidden; color: var(--text); font: 700 16px/1.25 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; } .bl-response-identity small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font: 400 12px/1.3 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; } .bl-response-time { min-width: 90px; color: var(--unit); font: 600 11.5px var(--font-mono); text-align: right; white-space: nowrap; } .bl-response-time.is-empty { visibility: hidden; } .bl-response-phase { min-width: 84px; padding: 5px 9px; border: 1px solid var(--line2); border-radius: var(--radius-pill); color: var(--muted); font: 650 11px var(--font-sans); text-align: center; white-space: nowrap; } .bl-response-phase[data-phase="scene"] { border-color: var(--unit); color: var(--unit); background: color-mix(in srgb, var(--unit-bg) 65%, transparent); } .bl-response-phase[data-phase="clear"] { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 9%, transparent); } .bl-response-chevron { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--mo-1) var(--mo-ease); } .bl-response-summary[aria-expanded="true"] .bl-response-chevron { transform: rotate(225deg) translate(-1px, -1px); } .bl-response-body { padding: 0 17px 16px 42px; } .bl-response-progress { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .bl-response-progress::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 23px; height: 1px; background: var(--line2); } .bl-response-stage { position: relative; z-index: 1; min-width: 0; text-align: center; } .bl-response-stage i { display: block; width: 9px; height: 9px; margin: 7px auto 9px; border: 2px solid var(--line2); border-radius: 50%; background: var(--surface2); } .bl-response-stage.is-done i { border-color: var(--unit); background: var(--unit); box-shadow: 0 0 10px color-mix(in srgb, var(--unit) 42%, transparent); } .bl-response-stage span { display: block; color: var(--faint); font: 600 11px var(--font-sans); letter-spacing: .07em; text-transform: uppercase; } .bl-response-stage strong { display: block; margin-top: 3px; color: var(--muted); font: 600 11px var(--font-mono); } .bl-response-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 15px; } .bl-response-fact { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface2); } .bl-response-fact span { display: block; color: var(--faint); font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; } .bl-response-fact strong { display: block; overflow: hidden; margin-top: 4px; color: var(--text); font: 600 12px/1.35 var(--font-sans); text-overflow: ellipsis; } .bl-response-note { margin-top: 10px; color: var(--faint); font: 400 11px/1.45 var(--font-sans); } @media (max-width: 720px) { .bl-response-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-response-summary { grid-template-columns: 12px minmax(0, 1fr) auto 16px; } .bl-response-time { display: none; } .bl-response-body { padding-left: 17px; } .bl-response-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .bl-response-boardhead { align-items: flex-start; } .bl-response-summary { gap: 10px; padding-left: 13px; padding-right: 13px; } .bl-response-phase { min-width: 0; padding-left: 7px; padding-right: 7px; } .bl-response-body { padding-left: 13px; padding-right: 13px; } .bl-response-progress { gap: 3px; } .bl-response-stage strong { font-size: 11px; } .bl-response-facts { grid-template-columns: minmax(0, 1fr); } } /* ---- Provenance table -------------------------------------------------------------- Fact, value, source dot. The page's honesty device. Every dot is a square accent dot this pass; the 46px dot column stays anyway, because it is what makes the claim legible the moment a second source exists. The key type here is NOT .bl-eyebrow: .08em tracking and a 1.6 line-height against the eyebrow's .085em and normal. Both values are drawn and both ship. */ .bl-prov-grid { display: grid; grid-template-columns: 82px 1fr 46px; gap: 9px 12px; align-items: baseline; font: 400 13px/1.5 var(--font-sans); margin: 0; } .bl-prov-grid dt { font: 500 11px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); } .bl-prov-grid dd { margin: 0; } .bl-prov-src { text-align: right; } .bl-prov { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } /* ============================================================================ §11 ROUTE — /digest the weekly written digest ============================================================================ The whole route is model output in a container. The route ships the container; it never ships the sentences. No severity badge, count or stripe appears anywhere here, so no --s* and no --stripe-* rule belongs in this section. This route also paints no panel fill at all: every card is a transparent box with a 1px inset --line ring over the page --bg. The lock card is the only thing with a background. */ .bl-digest { height: 100%; overflow: auto; padding: 40px 56px 44px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-content: start; } .bl-digest-main { min-width: 0; display: flex; flex-direction: column; gap: 26px; } .bl-digest-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; } /* Masthead has no flex gap — the badge/dateline row is its own flex row and the headline is spaced by its own margin. */ .bl-masthead-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .bl-dateline { font: 400 12px var(--font-sans); color: var(--faint); } .bl-digest .bl-headline { margin-top: 16px; } /* blur() bleeds about twice its radius past the box. The 70ch measure inside a 716px column leaves ~86px of slack, so nothing reaches the 52px gutter. Do not widen .bl-prose on this route. */ /* The provenance sentence — "a model wrote this and nobody read it". It is the most important paragraph on the route and it does not get to be the least legible one, so it sits on --muted rather than --faint. */ .bl-disclaimer { font: 400 11.5px/1.6 var(--font-sans); color: var(--muted); max-width: 70ch; padding-top: 16px; border-top: 1px solid var(--line); margin: 0; } .bl-crosslink { display: block; padding: 16px 18px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font: 400 13px/1.6 var(--font-sans); color: var(--muted); text-decoration: none; } .bl-crosslink:hover { color: var(--text); } /* ============================================================================ §12 ROUTE — /settings this browser's settings, every row a live control ============================================================================ */ .bl-settings { height: 100%; overflow: auto; padding: 34px clamp(20px, 5vw, 72px) 72px; } .bl-set-main { width: min(1240px, 100%); min-width: 0; margin: 0 auto; } .bl-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 0; } .bl-set-card { min-width: 0; padding: 24px 26px 10px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--accent)), var(--surface2)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent), 0 14px 34px rgba(4, 8, 18, .14); } .bl-set-card:first-child { grid-column: 1 / -1; } .bl-set-card > .bl-eyebrow { margin: 0 0 14px; color: var(--accent-t); font-size: 11px; letter-spacing: .13em; } .bl-set-card:has(.bl-account-settings) { grid-column: 1 / -1; scroll-margin-top: 82px; } .bl-set-card#map { scroll-margin-top: 82px; } .bl-account-settings { min-height: 72px; } .bl-account-settings.is-error { color: var(--s4); font-size: 12px; } .bl-account-identity { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 4px 0 18px; } .bl-account-avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--accent-w); border-radius: 11px; background: var(--accent-soft); color: var(--accent-t); font-weight: 760; } .bl-account-avatar img, .bl-profile-photo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .bl-account-identity strong, .bl-account-identity span { display: block; } .bl-account-identity strong { font-size: 16px; letter-spacing: -.02em; } .bl-account-identity div > span { margin-top: 2px; color: var(--faint); font-size: 11px; } .bl-account-identity em { padding: 5px 9px; border: 1px solid var(--plus-w); border-radius: 999px; background: var(--plus-soft); color: var(--plus-t); font: 700 11px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; } .bl-billing-card { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: color-mix(in srgb, var(--bg) 88%, var(--accent-soft)); } .bl-billing-card.is-plus { border-color: var(--plus-w); background: color-mix(in srgb, var(--bg) 90%, var(--plus-soft)); } .bl-billing-head { margin-bottom: 11px; } .bl-billing-head strong { font-size: 13px; } .bl-billing-summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; } .bl-billing-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-t); font: 800 15px var(--font-sans); } .bl-billing-card.is-plus .bl-billing-mark { background: var(--plus); color: var(--bg); } .bl-billing-plan strong, .bl-billing-plan span, .bl-billing-price strong, .bl-billing-price span { display: block; } .bl-billing-plan strong { font-size: 13px; } .bl-billing-plan span { margin-top: 2px; color: var(--faint); font-size: 11px; line-height: 1.35; } .bl-billing-price { min-width: 76px; text-align: right; } .bl-billing-price strong { font-size: 13px; } .bl-billing-price span { margin-top: 2px; color: var(--faint); font-size: 11px; } .bl-billing-action { text-decoration: none; } .bl-account-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bl-account-form { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); } .bl-account-formhead { min-height: 38px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bl-account-formhead strong { font-size: 14px; } .bl-account-formhead span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .bl-avatar-editor { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 15px; margin: 10px 0 3px; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 94%, var(--accent))); transition: opacity var(--mo-1) var(--mo-ease), border-color var(--mo-1) var(--mo-ease); } .bl-avatar-editor:focus-within { border-color: var(--accent-w); box-shadow: 0 0 0 3px var(--accent-soft); } .bl-avatar-editor.is-uploading { opacity: .62; } .bl-profile-photo-preview { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--accent-w); border-radius: 17px; background: var(--accent-soft); color: var(--accent-t); font-weight: 760; box-shadow: 0 8px 18px rgba(0,0,0,.12); } .bl-avatar-editor-copy strong, .bl-avatar-editor-copy > span { display: block; } .bl-avatar-editor-copy strong { font-size: 12px; letter-spacing: -.01em; } .bl-avatar-editor-copy > span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; } .bl-avatar-editor-copy small { display: block; margin-top: 7px; color: var(--faint); font-size: 11px; line-height: 1.3; } .bl-avatar-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .bl-avatar-action { min-height: 31px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface2); color: var(--text); font: 680 11px var(--font-sans); cursor: pointer; transition: border-color var(--mo-1) var(--mo-ease), background var(--mo-1) var(--mo-ease), color var(--mo-1) var(--mo-ease); } .bl-avatar-action:not(.bl-avatar-remove) { border-color: var(--accent-w); background: var(--accent-soft); color: var(--accent-t); } .bl-avatar-remove { color: var(--faint); } .bl-avatar-action:not(.bl-avatar-remove):hover { border-color: var(--accent); } .bl-avatar-remove:hover { border-color: color-mix(in srgb, var(--s4) 48%, var(--line2)); color: var(--s4); } .bl-avatar-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .bl-account-field { display: block; margin-top: 11px; color: var(--muted); font-size: 11px; font-weight: 650; } .bl-account-input { width: 100%; min-height: 39px; margin-top: 6px; padding: 8px 11px; border: 1px solid var(--line2); border-radius: 8px; outline: 0; background: var(--bg); color: var(--text); font: 13px var(--font-sans); } .bl-account-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .bl-account-form p { min-height: 31px; margin: 10px 0 12px; color: var(--faint); font-size: 11px; line-height: 1.45; } .bl-account-message { min-height: 18px; margin-top: 10px; color: var(--accent-t); font-size: 11px; } .bl-account-message.is-error { color: var(--s4); } .bl-account-signout { margin-top: 12px; } .bl-account-danger { margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--s4) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--s4) 5%, var(--surface2)); } .bl-account-dangerhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bl-account-dangerhead strong { font-size: 14px; color: var(--i4); } .bl-account-dangerhead span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .bl-account-danger p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .bl-account-danger .bl-account-field { margin-top: 12px; } .bl-account-delete { margin-top: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s4) 55%, var(--line2)); color: var(--s4); } .bl-account-delete:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--s4); background: color-mix(in srgb, var(--s4) 9%, transparent); } .bl-account-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; } /* Every row has a border-top and no border-bottom, so the list ends without a closing rule and the first rule of each section lands under its eyebrow. */ .bl-row { display: flex; align-items: center; gap: 16px; margin: 0 -10px; padding: 15px 10px; border-top: 1px solid var(--line); border-radius: 9px; transition: background-color var(--mo-1) var(--mo-ease), border-color var(--mo-1) var(--mo-ease); } .bl-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); border-top-color: var(--line2); } .bl-row-body { flex: 1; min-width: 0; } .bl-row-label { font: 600 14px var(--font-sans); color: var(--text); } .bl-row-sub { font: 400 12px/1.5 var(--font-sans); color: var(--faint); margin-top: 4px; } .bl-row-value { font: 400 13px var(--font-sans); color: var(--muted); white-space: nowrap; flex: 0 0 auto; } /* --i5 is the rank-5 severity INK used as the destructive colour. It is not a severity indicator: no stripe, no width, and never --s5. */ .bl-row-danger { color: var(--i5); } /* Toggle. A