/* Site chrome. Colour and type tokens come from report.css (loaded first). */
:root { --header: #0f2e4c; --header-ink: #f3f6f9; --header-muted: #a9bccd; --focus: #f2a541; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --header: #0b1a29; --header-ink: #e6e9ed; --header-muted: #8193a5; }
}
:root[data-theme="dark"] { --header: #0b1a29; --header-ink: #e6e9ed; --header-muted: #8193a5; }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; padding-block: 8px 32px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--panel); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; top: 8px; }
.muted { color: var(--muted); }

.site-header { background: var(--header); color: var(--header-ink); }
.site-header .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-block: 12px; }
.brand { color: var(--header-ink); text-decoration: none; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 26px; height: 14px; border-radius: 2px;
  background: linear-gradient(90deg, #2166ac 0 16%, #92c5de 16% 33%, #efefef 33% 50%, #f4a582 50% 66%, #d6604d 66% 83%, #b2182b 83%); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.site-nav a, .lang-switch a { color: var(--header-muted); text-decoration: none; }
.site-nav a:hover, .lang-switch a:hover { color: var(--header-ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--header-ink); font-weight: 600; }
.lang-switch { display: flex; gap: 10px; font-size: .9rem; }
.lang-switch [aria-current] { color: var(--header-ink); font-weight: 700; }

.hero { padding-block: 32px 8px; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; max-width: 22ch; text-wrap: balance; margin: 0 0 12px; }
.lede { max-width: 65ch; color: var(--muted); font-size: 1.05rem; margin: 0; }
h2 { font-size: 1.3rem; margin: 28px 0 12px; text-wrap: balance; }

.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.country-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.card-body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.card-body h3 { margin: 0; font-size: 1.35rem; }
.card-body p { margin: 0; }
.summary { max-width: 65ch; }
.hl-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.headline { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dchip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; background: var(--chip); color: var(--chip-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { display: inline-block; background: var(--accent); color: var(--bg); padding: 6px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.button:hover { filter: brightness(1.1); }
.report-list { padding-left: 18px; display: grid; gap: 6px; }

.stripes svg { display: block; width: 100%; height: 36px; }
.stripes.wide svg { height: 56px; border-radius: 4px; }
.stripes-figure { margin: 12px 0 0; }

.breadcrumb { font-size: .88rem; color: var(--muted); padding-block: 14px 0; }
.country-head h1, .report-head h1 { margin: 6px 0 6px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.latest-panel { display: grid; gap: 8px; }
.latest-panel h2 { margin-bottom: 4px; }
.latest-types { color: var(--muted); }
.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.overview figure { margin: 0; min-width: 0; }
.overview figcaption { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.overview svg { width: 100%; height: auto; display: block; }
.overview .axis { stroke: var(--line); }
.overview .zero { stroke: var(--muted); }
.overview text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.overview rect:hover { stroke: var(--ink); stroke-width: 1.5; }

.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.filters select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.filters output { color: var(--muted); font-size: .88rem; margin-left: auto; }
.archive td { vertical-align: middle; }

.report-head { padding-block: 4px 0; }
.report-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; align-items: flex-start;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 10px; margin-top: 10px; }
.small-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 4px; }
.downloads ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.downloads details ul { display: block; columns: 2; margin-top: 6px; font-size: .88rem; }
.pager { display: flex; gap: 18px; flex-wrap: wrap; }
.report-body { padding: 0; }
.report-body > .section:first-child { border-top: 0; }

.prose { max-width: 70ch; }
.prose h1 { margin-top: 24px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.site-footer p { margin: 8px 0; max-width: 80ch; }
.site-footer .wrap { padding-block: 16px 24px; }

@media print {
  .site-header, .site-footer, .breadcrumb, .report-actions, .skip { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.versions { font-size: .9rem; }
.versions summary { cursor: pointer; color: var(--muted); }
.versions ul { margin: 6px 0 0; padding-left: 18px; }