/* Console layout. Tokens: ../brand/site-tokens.css and console-tokens.css. */
.wrap { max-width: 1280px; }
.top { align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: var(--space-2); align-items: center; }
.chip.synthetic { color: var(--warn); border-color: var(--warn); }
/* The status line is secondary to the page: muted and smaller than the site's. */
.status-line { font-size: 13px; color: var(--muted); margin: var(--space-3) 0 var(--space-1); }
.fingerprint { font-family: var(--mono); font-size: 12px; word-spacing: 0.15em; }
.who { display: flex; gap: var(--space-3); align-items: center; margin-left: auto; flex-wrap: wrap; }
.key-line { display: flex; flex-direction: column; gap: var(--space-1); color: var(--muted); font-size: 13px; margin-top: var(--space-2); }
.key-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; }
.key-line .mono { overflow-wrap: anywhere; }
.dev-banner { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--warn); border-radius: var(--radius); color: var(--warn); font-size: 13px; }
.layout { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
nav { display: flex; flex-direction: column; gap: var(--space-4); }
.nav-title { display: block; color: var(--dim); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-1); }
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-links a { color: var(--muted); text-decoration: none; padding: 6px var(--space-2); border-radius: var(--radius); font-size: 14px; }
.nav-links a:hover { color: var(--fg); background: var(--row-hover); }
.nav-links a[aria-current="page"] { color: var(--fg); background: var(--surface-2); font-weight: 600; }
main { min-width: 0; }
main.loading > :not(.loading-note) { opacity: 0.6; }
.loading-note { color: var(--muted); font-size: 13px; padding: var(--space-4) 0; }
.loading-note::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border: 2px solid var(--line); border-top-color: var(--bronze); border-radius: 50%; animation: spin 0.9s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-note::before { animation: none; } }
main > .panel:first-child, main > .filters + .panel { margin-top: 0; }
.panel h2 { margin: 0 0 var(--space-3); }
.panel h3 { font-size: 13px; font-weight: 500; color: var(--muted); margin: var(--space-4) 0 var(--space-2); }
.small { font-size: 12px; }
.warn { color: var(--warn); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.filters .preset { color: var(--muted); text-decoration: none; border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 3px 12px; font-size: 13px; }
.filters .preset[aria-current="true"] { color: var(--fg); border-color: var(--bronze); }
select, input { background: var(--surface-2); color: var(--fg); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 4px 8px; font-family: var(--mono); font-size: 13px; }
.buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.tile { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.tile-label { color: var(--muted); font-size: 12px; }
.tile-value { font-family: var(--sans); font-weight: 500; font-size: 22px; margin-top: var(--space-1); }
.tile-action { margin-top: var(--space-2); padding: 3px 10px; font-size: 11px; }
.index-label { color: var(--dim); margin-top: var(--space-3); }
table.facts th { width: 260px; color: var(--muted); font-weight: 400; font-size: 13px; padding: 6px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.facts td { padding: 6px 10px; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
table.data { margin-top: var(--space-2); }
table.data td { font-variant-numeric: tabular-nums; }
/* The console is wider than the brand pages: its tables need the room. */
.wrap { max-width: 1440px; }
.seal-cell { min-width: 15ch; }
.seal-cell .seal:not(:empty) + button { margin-left: var(--space-2); }
/* A wide table scrolls inside its own box, so the card's heading never scrolls with it. */
.table-scroll { overflow-x: auto; }
td.num, .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.seal { font-family: var(--mono); font-size: 12px; }
.verify-box { margin: var(--space-3) 0 var(--space-4); }
.verify-box .verdict { margin: 0 0 var(--space-1); }
.check-line { font-family: var(--mono); font-size: 12px; display: flex; gap: var(--space-2); align-items: center; }
.verdict-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.checks li { display: flex; gap: var(--space-2); }

/* Charts (charts.js) */
.chart { margin: var(--space-4) 0; }
.chart figcaption { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-2); }
.chart-title { font-weight: 500; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--muted); font-size: 12px; }
.chart-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-swatch.hatch { background: repeating-linear-gradient(45deg, #686c74 0 2px, transparent 2px 5px); }
.chart-swatch.outline { border: 1px dashed var(--muted); }
.chart-swatch.pending { border: 1.5px solid var(--info); }
.chart-plot .before-record { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 2; }
.chart-plot .not-yet-stated { fill: none; stroke: var(--info); stroke-width: 1.5; }
.chart-plot .no-coverage { opacity: 0.55; }
.chart-plot .ref { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 6 4; }
.claim-state { white-space: nowrap; }
.reconcile td.total, .reconcile th.total { border-top: 1px solid var(--line); font-weight: 500; }
.chart-plot svg { width: 100%; height: auto; display: block; }
.chart-plot .grid { stroke: var(--hairline); stroke-width: 1; }
.chart-plot .tick, .chart-plot .label, .chart-plot .value { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.chart-plot .label { fill: var(--fg); font-family: var(--sans); font-size: 12px; }
.chart-plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .dot { stroke: var(--surface); stroke-width: 2; }
.chart-plot .mark { cursor: default; outline: none; }
.chart-plot .mark.lift path, .chart-plot .cell.lift { filter: brightness(1.25); }
.chart-plot .mark:focus-visible { outline: 2px solid var(--bronze-hi); }
.chart-toggle { margin-top: var(--space-2); }
.chart-note { color: var(--dim); font-size: 12px; margin-top: var(--space-1); }
.chart-table { margin-top: var(--space-2); }
.chart-tip { position: absolute; z-index: 10; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: 12px; pointer-events: none; max-width: 320px; }
.chart-tip-title { color: var(--muted); margin-bottom: var(--space-1); }
.chart-tip-row { display: flex; gap: var(--space-2); align-items: center; }
.chart-tip-key { width: 12px; height: 2px; display: inline-block; }

@media (max-width: 760px) {
  .wrap { padding: var(--space-4) var(--space-4) var(--space-7); }
  .layout { grid-template-columns: 1fr; gap: var(--space-4); }
  nav { flex-direction: row; flex-wrap: wrap; }
  table.facts th { width: auto; }
}

.nowrap { white-space: nowrap; }
.check-detail { margin: 0 0 var(--space-2) 18px; }
details > summary { cursor: pointer; color: var(--bronze); margin: var(--space-2) 0; }
/* Checks by claim: one line per claim, the rest behind it. */
details.claim-checks { border-top: 1px solid var(--hairline); padding: var(--space-1) 0; }
details.claim-checks > summary { color: var(--fg); line-height: 1.6; }
details.claim-checks > summary .ok { color: var(--ok); }
details.claim-checks > summary .warn { color: var(--warn); }
.claim-checks-body { padding: var(--space-2) 0 var(--space-3) 18px; }
.evidence-group { margin: var(--space-3) 0 var(--space-1); font-weight: 500; }