/* Report template: same tokens and top bar as the map. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--w-regular) var(--text-sm)/var(--lh-sm) var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--ink); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.label { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--w-medium); color: var(--muted); }

.topbar { height: var(--bar-h); display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s4); background: var(--ink); color: var(--on-ink); position: sticky; top: 0; z-index: 3; }
.wordmark { font-size: var(--text-lg); font-weight: var(--w-bold); letter-spacing: -0.02em; color: var(--on-ink); text-decoration: none; }
.wordmark span { color: var(--p3); }
.nav { display: flex; height: 100%; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav a { display: flex; align-items: center; padding: 0 var(--s3); color: var(--on-ink-muted); text-decoration: none; font-weight: var(--w-medium); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--on-ink); }
.nav a[aria-current="page"] { color: var(--on-ink); border-bottom-color: var(--p3); }
.release { margin-left: auto; font-size: var(--text-xs); color: var(--on-ink-muted); white-space: nowrap; }
.release b { color: var(--on-ink); font-weight: var(--w-medium); }
.lang-switch { display: flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.08); }
.lang-switch button { height: 28px; padding: 0 var(--s2); border: 0; background: none; font: inherit; cursor: pointer; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: 0.02em; color: var(--on-ink-muted); }
.lang-switch button:hover { color: var(--on-ink); }
.lang-switch button[aria-pressed="true"] { background: var(--on-ink); color: var(--ink); }

.report { max-width: var(--report-w); margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
.section, .card { grid-template-columns: minmax(0, 1fr); }
.card > div > svg, .card > svg { min-width: 0; }
.card > div[style*="grid"] > * { min-width: 0; }
.report-head { display: grid; gap: var(--s3); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); }
.report-head h1 { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: var(--w-bold); letter-spacing: -0.01em; }
.lead { font-size: var(--text-md); line-height: var(--lh-md); color: var(--ink-soft); max-width: 700px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border-radius: var(--r-pill); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--w-medium); background: var(--surface-sunken); color: var(--ink-soft); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.is-verified { background: var(--verified-soft); color: var(--verified); }
.chip.is-accent { background: var(--accent-soft); color: var(--accent); }
.chip.is-demo { background: var(--demo-soft); color: var(--demo); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); }
.metric { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: var(--s3); display: grid; gap: 2px; align-content: start; }
.metric .value { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--w-bold); }
.metric .value.is-accent { color: var(--accent); }
.metric .hint { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); }

.banner { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface-sunken); }
.banner strong { display: block; font-weight: var(--w-bold); }
.banner.is-accent { background: var(--accent-soft); }
.banner.is-accent > svg { color: var(--accent); }
.banner.is-danger { background: var(--danger-soft); }
.banner.is-danger > svg { color: var(--danger); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--ink); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

.section { display: grid; gap: var(--s3); }
.section h2 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--w-bold); }
.section p { max-width: 720px; }
.section .muted, .caption { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); max-width: 720px; }
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s4); display: grid; gap: var(--s3); }

.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s2) var(--s4); }
.table { width: 100%; border-collapse: collapse; min-width: 520px; }
.table th { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--w-medium); color: var(--muted); text-align: right; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.table td { text-align: right; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th:first-child, .table td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.table tr:last-child td { border-bottom: 0; }
.table tr.is-current td { font-weight: var(--w-medium); background: var(--verified-soft); }
.tag { display: inline-block; margin-left: var(--s2); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--w-medium); color: var(--verified); background: var(--surface); padding: 0 6px; border-radius: var(--r-pill); }

.chart { width: 100%; height: auto; display: block; }
.chart text { font: var(--text-xs) var(--font); fill: var(--muted); }
.chart .t-ink { fill: var(--ink); }
.chart .t-strong { fill: var(--ink); font-weight: var(--w-bold); }
.chart .axis { stroke: var(--line-strong); }
.chart .grid { stroke: var(--line); }

.steps { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s2); max-width: 720px; }
.links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.links a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s3); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); text-decoration: none; font-size: var(--text-xs); font-weight: var(--w-medium); }
.links a:hover { background: var(--surface-sunken); }
code { font-size: var(--text-xs); color: var(--ink-soft); overflow-wrap: anywhere; }

@media (max-width: 1100px) { .release { display: none; } .lang-switch { margin-left: auto; } }
@media (max-width: 640px) {
  .topbar { height: 48px; gap: var(--s3); }
  .nav a { padding: 0 var(--s2); }
  .report { padding-top: var(--s5); gap: var(--s5); }
  .report-head h1 { font-size: 26px; line-height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }