/* Archive chart kit (shared/archive_charts.php). Tokens only (css/vf-tokens.css). A data desk on paper: square ruled sheets,
   hairlines, serif titles, no cards, no shadows. Colour is never the only signal: every mark has a text label, a shape or a key. */

.ac-fig { container-type:inline-size; margin:0 0 30px; padding:14px 0 0; border-top:2px solid var(--vf-ink); color:var(--vf-ink); max-width:820px; }
.ac-cap { display:flex; flex-direction:column; gap:3px; margin:0 0 10px; }
.ac-kicker { font:700 .75rem/1.2 var(--vf-font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--vf-gold-text); }
.ac-title { font:700 1.3rem/1.2 var(--vf-font-head); letter-spacing:-.005em; text-wrap:balance; }
.ac-sub { font:400 1rem/1.4 var(--vf-font-head); color:var(--vf-ink-2); max-width:62ch; }
.ac-note { margin:10px 0 0; max-width:68ch; color:var(--vf-mute); font-size:.84rem; line-height:1.5; }
.ac-source { margin:10px 0 0; padding-top:8px; border-top:1px solid var(--vf-rule); color:var(--vf-mute); font-size:.8rem; line-height:1.45; }
.ac-source a { color:var(--vf-blue-text); }
.ac-empty { margin:6px 0 0; padding:14px 0; border-top:1px solid var(--vf-rule); border-bottom:1px solid var(--vf-rule); color:var(--vf-ink-2); font:400 1rem/1.5 var(--vf-font-head); max-width:62ch; }

/* colour classes: --ac-fill is the mark, --ac-on is the text written on it */
.ac-c-s1 { --ac-fill:var(--vf-blue); --ac-on:var(--vf-on-navy); }
.ac-c-s2 { --ac-fill:var(--vf-gold-text); --ac-on:var(--vf-on-navy); }
.ac-c-s3 { --ac-fill:var(--vf-green); --ac-on:var(--vf-on-navy); }
.ac-c-s4 { --ac-fill:var(--vf-ink-2); --ac-on:var(--vf-surface); }
.ac-c-s5 { --ac-fill:var(--vf-mute); --ac-on:var(--vf-surface); }
.ac-c-dem { --ac-fill:var(--vf-dem); --ac-on:var(--vf-on-navy); }
.ac-c-rep { --ac-fill:var(--vf-rep); --ac-on:var(--vf-on-navy); }
.ac-c-ind { --ac-fill:var(--vf-ind); --ac-on:var(--vf-on-navy); }
.ac-c-q1 { --ac-fill:color-mix(in srgb, var(--vf-blue) 12%, var(--vf-surface)); --ac-on:var(--vf-ink); }
.ac-c-q2 { --ac-fill:color-mix(in srgb, var(--vf-blue) 30%, var(--vf-surface)); --ac-on:var(--vf-ink); }
.ac-c-q3 { --ac-fill:color-mix(in srgb, var(--vf-blue) 52%, var(--vf-surface)); --ac-on:var(--vf-ink); }
.ac-c-q4 { --ac-fill:color-mix(in srgb, var(--vf-blue) 76%, var(--vf-surface)); --ac-on:var(--vf-on-navy); }
.ac-c-q5 { --ac-fill:var(--vf-navy); --ac-on:var(--vf-on-navy); }
.ac-c-none { --ac-fill:var(--vf-surface-2); --ac-on:var(--vf-mute); }
/* dark surfaces: the light-on-dark steps flip, so text stays readable */
:root[data-theme="dark"] .ac-c-ind { --ac-on:var(--vf-bg); }
:root[data-theme="dark"] .ac-c-s4, :root[data-theme="dark"] .ac-c-s5 { --ac-on:var(--vf-bg); }
:root[data-theme="dark"] .ac-c-q4, :root[data-theme="dark"] .ac-c-q5 { --ac-on:var(--vf-ink); }
:root[data-theme="dark"] .ac-c-q5 { --ac-fill:var(--vf-blue); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .ac-c-ind { --ac-on:var(--vf-bg); }
  :root:not([data-theme="light"]) .ac-c-s4, :root:not([data-theme="light"]) .ac-c-s5 { --ac-on:var(--vf-bg); }
  :root:not([data-theme="light"]) .ac-c-q4, :root:not([data-theme="light"]) .ac-c-q5 { --ac-on:var(--vf-ink); }
  :root:not([data-theme="light"]) .ac-c-q5 { --ac-fill:var(--vf-blue); }
}

/* plots: the wide drawing shows when the figure is wide enough; the other is hidden from everyone, screen readers included */
.ac-plot { margin:4px 0 0; }
.ac-svg { display:block; width:100%; height:auto; overflow:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.ac-wide { display:none; }
.ac-narrow { max-width:420px; }
@container (min-width:600px) { .ac-narrow { display:none; } .ac-wide { display:block; } }
.ac-grid { stroke:var(--vf-rule); stroke-width:1; }
.ac-base, .ac-zero { stroke:var(--vf-ink); stroke-width:1; }
.ac-xtick { stroke:var(--vf-rule-strong); stroke-width:1; }
.ac-tick { fill:var(--vf-mute); font:11px/1 var(--vf-font-body); font-variant-numeric:tabular-nums; }
.ac-halo { paint-order:stroke; stroke:var(--vf-surface); stroke-width:3px; }
.ac-end { fill:var(--vf-ink); font:700 12.5px/1 var(--vf-font-body); font-variant-numeric:tabular-nums; paint-order:stroke; stroke:var(--vf-surface); stroke-width:3px; }
.ac-leader { stroke:var(--vf-mute); stroke-width:1; }
.ac-rowname { fill:var(--vf-ink); font:600 13px/1 var(--vf-font-body); }
.ac-lane { fill:var(--vf-ink-2); font:700 11px/1 var(--vf-font-body); letter-spacing:.1em; text-transform:uppercase; }
.ac-gap { fill:var(--vf-mute); font:italic 12px/1 var(--vf-font-head); }
.ac-shade { fill:var(--vf-ink); fill-opacity:.1; }
.ac-shade-t { fill:var(--vf-mute); font:10px/1 var(--vf-font-body); letter-spacing:.06em; text-transform:uppercase; }

/* marks */
.ac-line { fill:none; stroke:var(--ac-fill); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ac-c-s2 .ac-line { stroke-dasharray:7 4; }
.ac-c-s3 .ac-line { stroke-dasharray:2 4; }
.ac-c-s4 .ac-line { stroke-dasharray:10 3 2 3; }
.ac-c-s5 .ac-line { stroke-dasharray:1 3; }
.ac-dot { fill:var(--ac-fill); stroke:var(--vf-surface); stroke-width:1.5; }
.ac-bar, .ac-seg, .ac-span-r { fill:var(--ac-fill); }
.ac-seg, .ac-span-r { stroke:var(--vf-surface); stroke-width:2; }
.ac-bar:hover, .ac-seg:hover { fill-opacity:.82; }
.ac-segtext { fill:var(--ac-on); font:700 11px/1 var(--vf-font-body); font-variant-numeric:tabular-nums; pointer-events:none; }
.ac-svg a:focus-visible { outline:3px solid var(--vf-blue); outline-offset:2px; }
.ac-svg a { cursor:pointer; }
.ac-rowline { stroke:var(--vf-rule-strong); stroke-width:1; }

/* keys */
.ac-legend { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 8px; padding:0; list-style:none; font-size:.84rem; color:var(--vf-ink-2); }
.ac-legend li { display:flex; align-items:center; gap:7px; }
.ac-key { flex:none; }
.ac-sw { fill:var(--ac-fill); stroke:var(--vf-ink); stroke-opacity:.35; stroke-width:1; }
.ac-c-none .ac-sw { stroke-dasharray:3 2; stroke-opacity:.8; }
.ac-key-line { stroke:var(--ac-fill); stroke-width:2.5; }
.ac-c-s2 .ac-key-line { stroke-dasharray:7 4; }
.ac-c-s3 .ac-key-line { stroke-dasharray:2 4; }
.ac-c-s4 .ac-key-line { stroke-dasharray:10 3 2 3; }
.ac-c-s5 .ac-key-line { stroke-dasharray:1 3; }
.ac-key-mark { fill:var(--ac-fill); }

/* small multiples: a ruled grid, not boxes */
.ac-multiples { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:6px 0 0; padding:0; list-style:none; border-top:1px solid var(--vf-rule); border-left:1px solid var(--vf-rule); }
.ac-m { display:flex; flex-direction:column; gap:2px; padding:9px 10px 10px; border-right:1px solid var(--vf-rule); border-bottom:1px solid var(--vf-rule); min-width:0; }
.ac-m-name { font:700 .95rem/1.25 var(--vf-font-head); }
.ac-m-name a { color:inherit; text-decoration-color:var(--vf-rule-strong); text-underline-offset:3px; }
.ac-m-meta { color:var(--vf-mute); font-size:.78rem; line-height:1.35; font-variant-numeric:tabular-nums; }
.ac-m-meta strong { color:var(--vf-ink); }
.ac-panel { max-width:100%; }

/* tile map and district map */
.ac-tiles { max-width:560px; }
.ac-tile-r { fill:var(--ac-fill); stroke:var(--vf-ink); stroke-opacity:.28; stroke-width:1; }
.ac-c-none .ac-tile-r { stroke-dasharray:3 2; stroke-opacity:.6; }
.ac-tt { fill:var(--ac-on); font:700 13px/1 var(--vf-font-body); }
.ac-tv { fill:var(--ac-on); font:600 10px/1 var(--vf-font-body); font-variant-numeric:tabular-nums; }
.ac-tile.ac-hl .ac-tile-r { stroke:var(--vf-ink); stroke-opacity:1; stroke-width:3; }
.ac-tile:hover .ac-tile-r { stroke-opacity:.9; stroke-width:2; }
@container (max-width:520px) { .ac-tv-num { display:none; } }
.ac-districts { max-height:560px; }
.ac-dist-p { fill:var(--ac-fill); stroke:var(--vf-surface); stroke-width:.6; vector-effect:non-scaling-stroke; }
.ac-c-none .ac-dist-p { stroke:var(--vf-rule-strong); }
.ac-dist.ac-hl .ac-dist-p { stroke:var(--vf-ink); stroke-width:2.2; }
.ac-dist:hover .ac-dist-p { stroke:var(--vf-ink); stroke-width:1.4; }

/* data table fallback */
.ac-data { margin-top:10px; font-size:.88rem; }
.ac-data summary { cursor:pointer; color:var(--vf-blue-text); font-weight:700; padding:6px 0; }
.ac-data summary:focus-visible { outline:3px solid var(--vf-blue); outline-offset:2px; }
.ac-table-wrap { max-width:100%; max-height:60vh; overflow:auto; }
.ac-table { width:100%; border-collapse:collapse; font-size:.88rem; font-variant-numeric:tabular-nums; }
.ac-table th, .ac-table td { padding:6px 10px; border-bottom:1px solid var(--vf-rule); text-align:left; vertical-align:top; }
.ac-table thead th { position:sticky; top:0; background:var(--vf-surface); border-bottom:2px solid var(--vf-ink); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vf-mute); white-space:nowrap; }
.ac-table tbody th { font-weight:700; }
.ac-table .ac-num { text-align:right; }
.ac-na { color:var(--vf-mute); font-size:.8rem; }
.ac-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:no-preference) { .ac-bar, .ac-seg, .ac-tile-r, .ac-dist-p { transition:fill-opacity 150ms var(--vf-ease, ease), stroke-width 150ms var(--vf-ease, ease); } }

/* print: the wide drawing, ink-friendly rules, tables open content is not forced but links print as text */
@media print {
  .ac-fig { break-inside:avoid; max-width:none; }
  .ac-narrow { display:none !important; }
  .ac-wide { display:block !important; }
  .ac-tv-num { display:inline !important; }
  .ac-data summary { display:none; }
  .ac-source a::after { content:" (" attr(href) ")"; word-break:break-all; }
}