/* ==========================================================================
   03-app.css — app chrome and internal components: shell (sidebar, topbar,
   mobile menu), sign-in, tabs, filters, charts, findings, fixes, vitals.
   Same rules as everywhere: two inks, hairlines, no boxes or pills.
   ========================================================================== */

/* ---------- Brand: two-tone text wordmark, like vsl<span>Safety</span> ---- */
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.25rem; font-weight: 500; letter-spacing: var(--track-head); line-height: 1; white-space: nowrap; color: var(--ink); text-decoration: none; }
.brand span { color: var(--grey); }
.brand:hover { color: var(--ink); }

/* ---------- Shell: sidebar (desktop) + topbar + content ------------------ */
.app-shell { display: grid; min-height: 100dvh; }
@media (min-width: 64rem) { .app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }

.app-sidebar { display: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto; flex-direction: column; gap: var(--s-2); padding: 10px var(--gutter) var(--s-5) clamp(20px, 2vw, 32px); }
@media (min-width: 64rem) { .app-sidebar { display: flex; } }
.app-sidebar > .brand { min-height: calc(var(--header-h) - 20px); }

.app-nav { display: grid; }
.app-nav__heading { padding: var(--s-5) 0 var(--s-2); font-size: var(--t-xs); color: var(--grey-text); text-transform: uppercase; letter-spacing: 0.06em; }
.app-nav__heading:first-child { padding-top: var(--s-3); }
.app-nav a { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 38px; color: var(--grey-text); transition: color 200ms var(--ease); }
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); }
.app-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
.app-nav .badge { margin-inline-start: auto; color: var(--ink); }
.app-nav .badge--alert { color: var(--danger); }

.app-user { margin-block-start: auto; padding-block-start: var(--s-4); border-top: 1px solid var(--rule); display: grid; gap: 2px; font-size: var(--t-s); }
.app-user strong { font-weight: 500; }
.app-user span { color: var(--grey-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user .btn--link { justify-self: start; min-height: 36px; font-size: var(--t-s); color: var(--grey-text); }
.app-user .btn--link:hover { color: var(--ink); }

/* Who's online (shared/_online_users, refreshed by presence_controller.js): sits above .app-user at the
   bottom of the sidebar and above the foot of the phone menu. Ink dot = online (as .chip--ok). */
.online-users { display: grid; gap: var(--s-2); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--t-s); }
.app-sidebar .online-users { margin-block-start: auto; }
.app-sidebar .online-users + .app-user { margin-block-start: 0; }
.mobile-nav .online-users { margin-block-end: var(--s-4); }
.online-users__title { margin: 0; color: var(--grey-text); }
.online-users__count { color: var(--ink); font-variant-numeric: tabular-nums; }
.online-users__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.online-users__list li { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-users__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.app-main { min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 64rem) { .app-main { border-left: 1px solid var(--rule); } }
.app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--rule); background: var(--scrim); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); }
.app-topbar .brand { display: none; }
.app-topbar__crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--t-s); color: var(--grey-text); }
.app-topbar__crumb span[aria-hidden] { color: var(--line-strong); }
.app-topbar__crumb strong { overflow: hidden; font-weight: 400; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.app-topbar__user { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-s); color: var(--grey-text); white-space: nowrap; }
.app-topbar__role { color: var(--ink); }
.menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: var(--t-body); }
@media (min-width: 64rem) { .app-topbar .menu-btn { display: none; } }
@media (max-width: 63.99rem) {
  .app-topbar .brand { display: inline-flex; }
  .app-topbar__crumb { display: none; }
}
@media (max-width: 30rem) { .app-topbar__user { display: none; } .app-topbar .menu-btn { margin-inline-start: auto; } }

/* Mobile menu: full-screen popover (no JS needed) */
.mobile-nav { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 var(--gutter) var(--s-6); border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; }
.mobile-nav::backdrop { background: transparent; }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; min-height: var(--header-h); border-bottom: 1px solid var(--rule); }
.mobile-nav__links { list-style: none; margin: var(--s-6) 0; padding: 0; font-size: var(--t-l); font-weight: 500; line-height: 1.25; letter-spacing: var(--track-display); }
.mobile-nav__links a { display: flex; align-items: baseline; gap: var(--s-3); padding-block: 6px; }
.mobile-nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.mobile-nav__links a:hover { color: var(--grey-text); }
.mobile-nav__links .badge { font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); }
.mobile-nav__foot { display: grid; gap: var(--s-3); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }

.sample-banner { display: flex; align-items: baseline; gap: 10px; padding: 10px var(--gutter); border-bottom: 1px solid var(--rule); background: var(--surface); font-size: var(--t-s); color: var(--grey-text); }
.sample-banner::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); transform: translateY(-1px); }

main { display: block; }

/* ---------- Sign in / passwords ----------------------------------------- */
.auth { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); padding: 0 var(--gutter); }
@media (min-width: 64rem) { .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-9); } }
.auth__panel { display: flex; flex-direction: column; gap: var(--s-6); width: 100%; max-width: 26rem; padding-block: var(--s-4) var(--s-8); }
.auth__panel > .brand { min-height: var(--header-h); }
.auth__panel h1 { font-size: var(--t-display); margin-block-start: auto; }
.auth__panel > :last-child { margin-block-end: auto; }
.auth__panel > h1 + p, .auth__panel > .muted { margin-block-start: calc(var(--s-2) - var(--s-6)); color: var(--grey-text); }
.auth__panel .form { max-width: none; }
.auth__panel .form-actions { border-top: 0; padding-block-start: var(--s-2); }
.auth__panel .btn--primary { width: 100%; min-height: 48px; }
.auth__foot { font-size: var(--t-s); color: var(--grey-text); margin-block-start: calc(var(--s-2) - var(--s-6)); }
.auth__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.auth__foot a:hover { color: var(--ink); }
.auth__statement { display: none; }
@media (min-width: 64rem) {
  .auth__statement { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-5); padding-block: var(--s-8); border-left: 1px solid var(--rule); padding-inline-start: var(--s-7); }
  .auth__statement p { max-width: 18em; font-size: var(--t-display); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); color: var(--grey); text-wrap: balance; }
  .auth__statement p strong { color: var(--ink); }
  .auth__statement small { color: var(--grey-text); }
}
.auth .flashes { padding-inline: 0; }

/* ---------- Period switch: text tokens, current one underlined ----------- */
.segmented { display: inline-flex; align-items: center; gap: var(--s-4); }
.segmented a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grey-text); font-size: var(--t-s); white-space: nowrap; transition: color 200ms var(--ease); }
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="true"], .segmented a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- Tabs: grey text, 1px ink underline on the current one -------- */
.tabs { display: flex; gap: var(--s-6); margin-block-end: var(--s-7); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 48px; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--grey-text); white-space: nowrap; transition: color 200ms var(--ease); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
@media (max-width: 47.99rem) { .tabs { gap: var(--s-5); } }

/* ---------- Filters ------------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-4); margin-block-end: var(--s-5); }
.filters .field { gap: 4px; }
.filters .field > label { font-size: var(--t-xs); color: var(--grey-text); font-weight: 400; }
.filters select, .filters input:not([type=checkbox]) { min-height: 40px !important; padding-block: 6px !important; font-size: var(--t-s) !important; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin-block-end: var(--s-4); }
.filter-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--grey-text); font-size: var(--t-s); white-space: nowrap; transition: color 200ms var(--ease); }
.filter-chips a:hover { color: var(--ink); }
.filter-chips a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.filter-chips a .count { color: var(--grey-text); font-variant-numeric: tabular-nums; }
.filter-chips .site-mark { width: 7px; height: 7px; }

/* ---------- Charts (inline SVG + HTML axes so text never scales) --------- */
.chart { margin: 0; position: relative; }
.chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--s-4); margin-block-end: var(--s-3); }
.chart__title { margin: 0; font-size: var(--t-s); font-weight: 500; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--grey-text); }
.chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart__key { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--key); }
.chart__key--dash { border-top-style: dashed; }
.chart__key--mark { width: 7px; height: 7px; border: 0; background: var(--key); transform: rotate(45deg); }
.chart__frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.chart__yaxis { position: relative; min-width: 28px; font-size: var(--t-xs); color: var(--grey-text); text-align: end; font-variant-numeric: tabular-nums; }
.chart__yaxis span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.chart__plot { position: relative; touch-action: pan-y; }
.chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__baseline { stroke: var(--ink); stroke-width: 1; }
.chart__line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { opacity: .06; }
.chart__line--1 { stroke: var(--series-1); }
.chart__line--2 { stroke: var(--series-2); stroke-width: 1.5; }
.chart__line--3 { stroke: var(--series-3); stroke-width: 1.5; }
.chart__area--1 { fill: var(--series-1); }
.chart__area--2 { fill: var(--series-2); }
.chart__area--3 { fill: var(--series-3); }
.chart__line--dash { stroke-dasharray: 4 3; }
.chart__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--dot, var(--series-1)); box-shadow: 0 0 0 2px var(--paper); pointer-events: none; }
.chart__endlabel { position: absolute; right: 0; transform: translate(0, -140%); padding: 0 3px; font-size: var(--t-xs); font-weight: 500; color: var(--ink); background: var(--paper); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart__xaxis { position: relative; height: 22px; margin-left: var(--yw, 38px); font-size: var(--t-xs); color: var(--grey-text); }
.chart__xaxis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.chart__xaxis span:first-child { transform: none; }
.chart__xaxis span:last-child { transform: translateX(-100%); }

.chart__marker { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--marker, var(--grey)) 60%, transparent); pointer-events: none; }
.chart__flag { position: absolute; top: -7px; left: 0; width: 14px; height: 14px; padding: 0; border: 0; background: none; transform: translateX(-50%); cursor: help; pointer-events: auto; }
.chart__flag::before { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; background: var(--marker, var(--grey)); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--paper); }
.chart__flag .chart__flagtip { display: none; position: absolute; top: 16px; left: 50%; z-index: 4; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--radius-small); background: var(--ink); color: var(--paper); font-size: var(--t-xs); line-height: 1.35; white-space: nowrap; text-align: start; }
.chart__flag:hover .chart__flagtip, .chart__flag:focus-visible .chart__flagtip { display: block; }
.marker--deploy { --marker: var(--ink); }
.marker--google_update { --marker: var(--signal); }
.marker--fix { --marker: var(--ink-2); }
.marker--note, .marker--tracking { --marker: var(--grey); }

.chart__crosshair { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ink); opacity: .35; pointer-events: none; display: none; }
.chart__tip { position: absolute; top: 4px; z-index: 3; display: none; min-width: 130px; padding: 8px 10px; border-top: 1px solid var(--ink); background: var(--paper); box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); font-size: var(--t-xs); white-space: nowrap; pointer-events: none; }
.chart__tip strong { display: block; margin-block-end: 4px; font-weight: 500; }
.chart__tip span { display: flex; justify-content: space-between; gap: 12px; color: var(--grey-text); }
.chart__tip b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart__tip i { display: inline-block; width: 10px; height: 2px; margin-inline-end: 6px; background: var(--key); vertical-align: middle; }
.chart.is-hovering .chart__crosshair, .chart.is-hovering .chart__tip { display: block; }

.sparkline { display: inline-block; vertical-align: middle; overflow: visible; }
.sparkline path { fill: none; stroke: var(--grey); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.sparkline .sparkline__area { fill: var(--ink); opacity: .05; stroke: none; }
.sparkline .sparkline__line--accent { stroke: var(--ink); }
.sparkline circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }

.barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.barlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); font-size: var(--t-s); }
.barlist__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist__value { text-align: end; font-variant-numeric: tabular-nums; color: var(--grey-text); }
.barlist__bar { grid-column: 1 / -1; height: 2px; background: var(--rule); }
.barlist__bar span { display: block; height: 100%; background: var(--ink); }
.barlist__bar--muted span { background: var(--grey); }

.split { display: flex; gap: 2px; height: 6px; overflow: hidden; }
.split span { display: block; height: 100%; background: var(--ink); }
.split span + span { background: var(--rule); }
.split--suspect span + span { background: var(--signal); }
.split-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s-3); margin-block-start: var(--s-2); font-size: var(--t-xs); color: var(--grey-text); }
.split-legend i { display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--ink); }
.split-legend i.k2 { background: var(--rule); box-shadow: inset 0 0 0 1px var(--grey); }
.split-legend i.k3 { background: var(--signal); }

/* ---------- Findings list: hairline rows, severity as a dot -------------- */
.finding-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.finding-row { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s-5); padding-block: 14px; border-bottom: 1px solid var(--rule); transition: background-color 160ms var(--ease); }
.finding-row:hover, .finding-row.is-selected { background: color-mix(in srgb, var(--field) 55%, transparent); }
.finding-row.is-selected { box-shadow: inset 2px 0 0 var(--ink); }
.finding-row__title { font-weight: 500; color: var(--ink); text-decoration: none; }
.finding-row__title::after { content: ""; position: absolute; inset: 0; }
.finding-row__title:focus-visible { outline: none; }
.finding-row:focus-within { outline: 2px solid var(--ink); outline-offset: -2px; }
.finding-row:hover .finding-row__title { color: var(--grey-text); }
.finding-row__meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); margin-block-start: 4px; font-size: var(--t-s); color: var(--grey-text); }
.finding-row__meta .mono { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.finding-row__meta .site-name { font-weight: 400; color: var(--grey-text); gap: 8px; }
.finding-row__impact { text-align: end; white-space: nowrap; }
.finding-row__impact strong { display: block; font-size: var(--t-m); font-weight: 500; font-variant-numeric: tabular-nums; }
.finding-row__impact span { font-size: var(--t-xs); color: var(--grey-text); }
.finding-row > .chip { justify-content: flex-start; }
.finding-row--compact { padding-block: 10px; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 2px var(--s-4); }
.finding-row--compact .finding-row__impact strong { font-size: var(--t-body); }
.sev--critical { --sev: var(--danger); }
.sev--warning { --sev: var(--signal); }
.sev--opportunity { --sev: var(--ink); }
.sev--info { --sev: var(--grey); }
@media (max-width: 40rem) {
  .finding-row, .finding-row--compact { grid-template-columns: minmax(0, 1fr) auto; }
  .finding-row > .chip { grid-column: 1 / -1; justify-self: start; }
}
.card > .finding-list, .card__header + .finding-list { border-top-color: var(--rule); }

.kbd-hint { font-size: var(--t-xs); color: var(--grey-text); }

/* ---------- Detail layouts ------------------------------------------------ */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-7) var(--s-8); align-items: start; }
@media (max-width: 64rem) { .detail { grid-template-columns: minmax(0, 1fr); } }
.detail__side > * + * { margin-block-start: var(--s-7); }
.detail__side .card + .card { margin-block-start: var(--s-7); }

.evidence > * + * { margin-block-start: var(--s-5); }
.evidence h3 { margin-block-end: var(--s-2); font-size: var(--t-s); font-weight: 500; color: var(--grey-text); }
.evidence ul.urls { margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--t-xs); }
.evidence ul.urls li { padding-block: 6px; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
.evidence ul.plain { margin: 0; padding-inline-start: 1.1em; }
.evidence ul.plain li + li { margin-block-start: 4px; }

.actions-list { display: grid; gap: var(--s-2); }
.actions-list .btn { width: 100%; justify-content: flex-start; }
.actions-list details > summary { list-style: none; }
.actions-list details > summary::-webkit-details-marker { display: none; }
.actions-list details[open] > summary { margin-block-end: var(--s-3); }
.actions-list .form-actions { border-top: 0; padding-block-start: 0; }

.drafting { display: flex; align-items: center; gap: var(--s-3); padding-block: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.drafting__pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; } }

/* ---------- Fix compare + SERP snippet ----------------------------------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); }
@media (max-width: 47.99rem) { .compare { grid-template-columns: minmax(0, 1fr); } }
.compare__label { display: flex; justify-content: space-between; gap: var(--s-2); margin-block-end: var(--s-2); font-size: var(--t-xs); color: var(--grey-text); text-transform: uppercase; letter-spacing: 0.06em; }
.compare__value { min-height: 48px; margin: 0; padding: 12px 14px; border-top: 1px solid var(--rule); background: var(--surface); font-family: var(--font); font-size: var(--t-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.compare__value--proposed { border-top-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }

/* The SERP preview mimics Google on purpose, so it keeps Google's colours. */
.serp { max-width: 600px; padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; color: #202124; font-family: Arial, sans-serif; letter-spacing: 0; }
.serp__site { display: flex; align-items: center; gap: 8px; margin-block-end: 4px; font-size: 12px; color: #202124; }
.serp__favicon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; font-size: 11px; font-weight: 700; color: #4d5156; }
.serp__site small { display: block; font-size: 12px; color: #4d5156; }
.serp__title { margin: 0 0 3px; font-size: 20px; line-height: 1.3; font-weight: 400; color: #1a0dab; overflow-wrap: anywhere; }
.serp__desc { margin: 0; font-size: 14px; line-height: 1.58; color: #4d5156; overflow-wrap: anywhere; }
.serp__changed { background: #fff6c2; }

.measure { width: 100%; }
.measure td.num.is-up { color: var(--up); font-weight: 500; }
.measure td.num.is-down { color: var(--down); font-weight: 500; }

/* ---------- Vitals bands --------------------------------------------------- */
.band { position: relative; display: flex; gap: 2px; height: 4px; margin: var(--s-3) 0 6px; }
.band span { display: block; height: 100%; }
.band__good { background: var(--ink); }
.band__ni { background: var(--grey); }
.band__poor { background: var(--danger); }
.band__marker { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.band-scale { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--grey-text); }
.vital__value { font-size: var(--t-l); font-weight: 500; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.score::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grey); }
.score--good::before { background: var(--ink); }
.score--ni::before { background: var(--signal); }
.score--poor { color: var(--danger); }
.score--poor::before { background: var(--danger); }

/* ---------- Token reveal, pattern tester, timeline, misc ----------------- */
.token-reveal { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--ink); background: var(--surface); }
.token-reveal code { display: block; margin: var(--s-2) 0; padding: 10px 12px; border-radius: var(--radius-small); background: var(--paper); font-size: 15px; overflow-wrap: anywhere; user-select: all; }

.pattern-results { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.pattern-results li { font-size: var(--t-s); color: var(--grey-text); }
.pattern-results li.is-match { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s-3); padding-block: 10px; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.card__header + .timeline li:first-child { border-top: 0; padding-block-start: 0; }
.timeline time { color: var(--grey-text); font-variant-numeric: tabular-nums; }
.timeline__kind { display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; background: var(--marker, var(--grey)); transform: rotate(45deg); }

.events { list-style: none; margin: 0; padding: 0; display: grid; }
.events li { display: grid; gap: 2px; padding-block: 8px; border-top: 1px solid var(--rule); font-size: var(--t-s); }

.site-head { display: flex; align-items: center; gap: 14px; }
.site-head .site-mark { width: 12px; height: 12px; border-radius: 2px; }

.footnote-mark { margin-inline-start: 2px; color: var(--grey-text); text-decoration: none; cursor: help; }

/* Errors */
.break-anywhere { overflow-wrap: anywhere; }
.error-message { margin: 0 0 var(--s-3); padding: 12px 14px; background: var(--surface); border-top: 1px solid var(--ink); font-size: var(--t-s); white-space: pre-wrap; overflow-wrap: anywhere; }
.backtrace { margin: 0; max-height: 420px; overflow: auto; padding: 12px 14px; background: var(--surface); font-size: var(--t-xs); line-height: 1.6; white-space: pre; }
.backtrace__lib { color: var(--grey-text); }
.backtrace__app { color: var(--ink); font-weight: 500; }
.backtrace-full { margin-top: var(--s-3); }
.backtrace-full summary { cursor: pointer; color: var(--grey-text); margin-bottom: var(--s-2); }
.error-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.error-spark span { flex: 1; height: max(2px, var(--h)); background: var(--ink); }