:root { --error: #e74c3c; --critical: #c0392b; --warning: #f39c12; --info: #3498db; --debug: #95a5a6; --bg: #f5f6f8; --card: #fff; --ink: #2c3e50; --muted: #7f8c8d; --line: #e3e6ea; --link: #2f6fed; --ok-bg: #e8f5e9; /* Key Cyan — the one hue outside the severity scale, and it marks exactly one thing: the payload values that fed the fingerprint. Two surfaces, same mark: cyan on the dark payload block (10.7:1 on #1f2430), teal for the legend swatch on the light field (4.9:1 on --bg). See DESIGN.md § Colors. */ --key-cyan: #67e8f9; --key-cyan-ink: #0e7490; --key-cyan-tint: rgba(103, 232, 249, .13); /* Text on Console Dark — the three-step ramp every quoted-wire surface reads from (payload, stack trace). All three clear AA on #1f2430; see DESIGN.md § Evidence surfaces, which is also why --wire-dim is the floor. */ --wire-bright: #e6edf3; --wire-lifted: #cfd6e0; --wire-dim: #8b95a5; --state-new: #64748b; --state-work-item: #0e7490; --state-in-mr: #6d4fc4; --state-rolled-out: #157347; --state-resolved: #1a7a40; /* on --ok-bg: ≈4.9:1 */ --filter-label-w: 5.5rem; /* the shared label column of every .filter */ } * { box-sizing: border-box; } /* Clickable chrome shouldn't text-select on double/triple-click. Content (titles and payloads on detail pages, data tables) stays selectable. */ button, summary, nav a, .brand, a.dash, .chip, .badge, .pill, a.sortlink, a.rowlink, .rowact, a.row, a.legend-item { user-select: none; -webkit-user-select: none; } /* Stop iOS inflating monospace titles inside the 760px-wide (panning) errors table — Safari auto-sizes text in any block wider than the viewport. overflow-anchor: morph refreshes (sort, live updates) reorder rows in place; scroll anchoring would follow the moved row, so the page jumps on its own. The viewport must only move when the user scrolls. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-anchor: none; } body { margin: 0; font: 14px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--ink); } a { color: inherit; text-decoration: none; } /* Content links read as links: coloured + underlined. Structural links (whole-row cards, filter chips, primary actions, footer nav) opt out and keep their own styling — :where() zeroes the :not chain's specificity so any later component rule wins without a fight. */ .container a:where(:not(.row):not(.chip):not(.rowlink):not(.rowact):not(.sortlink):not(.switch):not(.primary-action):not(.headact):not(.kind-card)) { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .container a:where(:not(.row):not(.chip):not(.rowlink):not(.rowact):not(.sortlink):not(.switch):not(.primary-action):not(.headact):not(.kind-card)):hover { text-decoration: underline; filter: brightness(0.85); } /* sortable column headers keep header styling; active carries the ↓ */ a.sortlink { color: inherit; white-space: nowrap; } a.sortlink:hover { text-decoration: underline; text-underline-offset: 2px; } a.sortlink.active { font-weight: 700; } table a { font-weight: 600; } /* Nav entries (ApplicationHelper#nav_link + the project switcher's summary): the nav may never move under the pointer, and marking "you are here" with a heavier weight is what moved it — 600 is wider than 400, so the current entry grew and shoved everything after it sideways (3.6px in the topbar when the switcher took its chip, 6.5px in the footer nav). Every entry therefore reserves the width of its own bold rendering in both states: a zero-height, AT-hidden duplicate of the label at 600 (from data-label) sets the shrink-to-fit width, so the geometry is the same on every page. Weight, color and the underline seam still change — only the box stays put. Any new nav entry goes through nav_link and inherits this. */ .nav-label { white-space: nowrap; } .nav-label::after { content: attr(data-label); display: block; font-weight: 600; height: 0; overflow: hidden; visibility: hidden; } .topbar { display: flex; align-items: center; gap: 24px; background: #1f2430; color: #fff; padding: 0 24px; height: 52px; } .topbar .brand { font-weight: 700; font-size: 16px; white-space: nowrap; } /* Desktop: the plain nav renders inline (contents = children join the topbar flex); the hamburger doesn't exist. Mobile flips both (see @media below). */ .topbar .desktop-nav { display: contents; } .topbar .mobile-menu { display: none; } .topbar nav { display: flex; gap: 18px; align-items: center; } .topbar nav a { color: #b9c2cf; padding: 4px 0; } .topbar nav a:hover { color: #fff; } /* the current section: white plus a quiet underline seam (never a level color) */ .topbar nav a.current { color: #fff; box-shadow: inset 0 -2px 0 #5b6b7b; } /* standalone Dashboard link (left of the project switcher; hamburger on mobile). Same current treatment as a nav entry — it IS one, it just sits outside