/* PISA · 23signs
   Printed statistical annex, not a dashboard: hairlines and whitespace,
   no cards, no shadows, radius at most 2px. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bodonimoda-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bodonimoda-600.woff2') format('woff2');
}

/* ---------- tokens ---------- */

:root{ --bg:#fafafa; --fg:#111111; --muted:#6b6b6b; --rule:rgba(17,17,17,.14); --wash:#f2f2f2; --ref:#8f8f8f; --faint:rgba(17,17,17,.16);
  --pos:#256abf; --neg:#b5372f;
  --cat-1:#2a78d6; --cat-2:#eb6834; --cat-3:#1baf7a; --cat-4:#eda100; --cat-5:#e87ba4; --cat-6:#008300; --cat-7:#4a3aa7; --cat-8:#e34948;
  --seq-1:#cde2fb; --seq-2:#b7d3f6; --seq-3:#9ec5f4; --seq-4:#86b6ef; --seq-5:#6da7ec; --seq-6:#5598e7; --seq-7:#3987e5; --seq-8:#2a78d6; --seq-9:#256abf; --seq-10:#1c5cab; --seq-11:#184f95; --seq-12:#104281; --seq-13:#0d366b; }

:root[data-theme="dark"]{ --bg:#0c0c0d; --fg:#ededed; --muted:#8a8a8a; --rule:rgba(237,237,237,.16); --wash:#16161a; --ref:#767676; --faint:rgba(237,237,237,.18); --pos:#3987e5; --neg:#e06a5c;
  --cat-1:#3987e5; --cat-2:#d95926; --cat-3:#199e70; --cat-4:#c98500; --cat-5:#d55181; --cat-6:#008300; --cat-7:#9085e9; --cat-8:#e66767; }

/* Fallback for the (unexpected) case where data-theme is never set. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){ --bg:#0c0c0d; --fg:#ededed; --muted:#8a8a8a; --rule:rgba(237,237,237,.16); --wash:#16161a; --ref:#767676; --faint:rgba(237,237,237,.18); --pos:#3987e5; --neg:#e06a5c;
    --cat-1:#3987e5; --cat-2:#d95926; --cat-3:#199e70; --cat-4:#c98500; --cat-5:#d55181; --cat-6:#008300; --cat-7:#9085e9; --cat-8:#e66767; }
}

:root{
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: 'Bodoni Moda', Georgia, "Times New Roman", serif;
  --col: 68rem;
  --gut: clamp(1rem, 4vw, 3rem);
}

/* ---------- reset and base ---------- */

*{ margin:0; padding:0; box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:15px; line-height:1.6;
  min-height:100dvh; display:flex; flex-direction:column;
}
::selection{ background:var(--fg); color:var(--bg) }

a{ color:inherit; text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px }
a:hover{ opacity:.62 }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible, g:focus-visible{
  outline:2px solid var(--fg); outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:0 }
h1{ font-size:clamp(1.9rem,5.5vw,3rem); margin:0 0 .35em }
h2{ font-size:clamp(1.3rem,3.4vw,1.75rem); margin:2.4rem 0 .6rem }
h3{ font-size:1.1rem; margin:1.8rem 0 .5rem }
p{ max-width:66ch }
p + p{ margin-top:.9rem }
ul,ol{ margin:.6rem 0 .6rem 1.4rem }
li + li{ margin-top:.25rem }
small,.small{ font-size:.8rem }
strong,b{ font-weight:600 }
code,kbd{ font-family:var(--mono); font-size:.9em }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:.5rem; top:-3rem; z-index:20;
  background:var(--bg); color:var(--fg); border:1px solid var(--fg);
  padding:.4rem .7rem; text-decoration:none; border-radius:2px;
  transition:top .12s ease;
}
.skip:focus{ top:.5rem }
.num{ font-variant-numeric:tabular-nums }
.muted{ color:var(--muted) }
.hairline{ border:0; border-top:1px solid var(--rule); margin:1.6rem 0 }

/* ---------- shell ---------- */

.shell-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1.25rem;
  padding:1.1rem var(--gut) .8rem;
  border-bottom:1px solid var(--rule);
}
.brand{ margin-right:auto }
.wordmark{
  font-family:var(--serif); font-size:2rem; line-height:1;
  text-decoration:none; letter-spacing:.01em; display:inline-block;
}
.wordmark:hover{ opacity:1; text-decoration:underline; text-underline-offset:.2em }
.brand-sub{ font-size:.78rem; color:var(--muted); margin-top:.25rem }
.shell-nav{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.86rem }
.shell-nav a{ text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent }
.shell-nav a[aria-current="page"]{ border-bottom-color:var(--fg) }
.shell-nav a:hover{ border-bottom-color:var(--rule); opacity:1 }

.theme-btn{
  font:inherit; font-size:.8rem; color:inherit; background:none;
  border:1px solid var(--rule); border-radius:2px; padding:.25rem .6rem;
  cursor:pointer; min-height:24px;
}
.theme-btn:hover{ border-color:var(--fg) }

main{ flex:1 1 auto; padding:1.6rem var(--gut) 3rem; width:100%; }
main > *{ max-width:var(--col) }
main > .bleed{ max-width:none }
.loading, .errorbox{ color:var(--muted) }
.errorbox{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1rem 0; color:var(--fg) }

.shell-foot{
  border-top:1px solid var(--rule);
  padding:1.2rem var(--gut) 2rem;
  font-size:.74rem; color:var(--muted); line-height:1.55;
}
.shell-foot p{ max-width:88ch }
.shell-foot p + p{ margin-top:.5rem }

/* ---------- view furniture ---------- */

.lede{ font-size:1rem; color:var(--muted); max-width:62ch }
.figure{ font-family:var(--serif); font-size:clamp(2.6rem,9vw,4.6rem); line-height:1; font-variant-numeric:proportional-nums }
.figure-sub{ font-size:.82rem; color:var(--muted); margin-top:.4rem }
figure{ margin:1.4rem 0 }
figcaption{ font-size:.76rem; color:var(--muted); margin-top:.55rem; max-width:74ch }
.chart{ width:100%; position:relative }
.chart svg{ display:block; width:100%; height:auto; overflow:visible }

/* ---------- controls ---------- */

.controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  padding:.7rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin:1.2rem 0 1.4rem; font-size:.82rem;
}
.controls > * { min-height:24px }
.ctl{ display:flex; align-items:center; gap:.45rem }
.ctl > .ctl-label{ color:var(--muted) }

.seg{ display:flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden }
.seg label{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.28rem .65rem; min-height:24px; cursor:pointer; white-space:nowrap;
  border-left:1px solid var(--rule);
}
.seg label:first-of-type{ border-left:0 }
.seg input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.seg label:has(input:checked){ background:var(--fg); color:var(--bg) }
.seg label:has(input:focus-visible){ outline:2px solid var(--fg); outline-offset:2px }
.seg label:hover:not(:has(input:checked)){ background:var(--wash) }

input[type="search"], input[type="text"], select{
  font:inherit; font-size:.82rem; color:inherit; background:var(--bg);
  border:1px solid var(--rule); border-radius:2px; padding:.28rem .5rem; min-height:24px;
}
input[type="search"]{ min-width:12rem }
select{ min-width:9rem }
input[type="search"]:hover, select:hover{ border-color:var(--fg) }

.check{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; min-height:24px }
.check input{ width:14px; height:14px; accent-color:var(--fg); cursor:pointer }

.btn{
  font:inherit; font-size:.8rem; color:inherit; background:none; cursor:pointer;
  border:1px solid var(--rule); border-radius:2px; padding:.25rem .6rem; min-height:24px;
}
.btn:hover{ border-color:var(--fg) }
.btn[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.btn[disabled]{ opacity:.45; cursor:default }

.pins{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center }
.pin{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem;
  border:1px solid var(--rule); border-radius:2px; padding:.2rem .45rem; min-height:24px;
}
.pin .swatch{ width:10px; height:10px; border-radius:1px; flex:0 0 auto }
.pin button{ font:inherit; background:none; border:0; color:var(--muted); cursor:pointer; padding:0 .1rem; min-width:20px }
.pin button:hover{ color:var(--fg) }
.notice{ font-size:.78rem; color:var(--neg) }

/* ---------- tables ---------- */

.tablewrap{ overflow-x:auto; max-width:100%; border-top:1px solid var(--rule) }
table{ border-collapse:collapse; width:100%; font-size:.82rem }
caption{ text-align:left; font-size:.76rem; color:var(--muted); padding:.5rem 0; caption-side:bottom }
thead th{
  position:sticky; top:0; z-index:1; background:var(--bg);
  text-align:left; font-weight:600; white-space:nowrap;
  padding:.45rem .55rem; border-bottom:1px solid var(--fg);
}
tbody td, tbody th{ padding:.35rem .55rem; border-bottom:1px solid var(--rule); vertical-align:baseline }
tbody th{ text-align:left; font-weight:400 }
td.num, th.num, td.n, th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
tbody tr:hover{ background:var(--wash) }
tr[aria-selected="true"]{ background:var(--wash) }
th[aria-sort]{ cursor:pointer }
th[aria-sort] .arrow{ color:var(--muted) }
td.cell-chart{ width:8rem; padding:.2rem .55rem }
td.cell-chart svg{ display:block }
.caveat{ color:var(--muted) }

/* ---------- table twin ---------- */

.twin{ margin:.5rem 0 0; border-top:1px solid var(--rule); font-size:.8rem }
.twin > summary{
  cursor:pointer; padding:.4rem 0; color:var(--muted); list-style:none;
  display:flex; align-items:center; gap:.4rem; min-height:24px;
}
.twin > summary::-webkit-details-marker{ display:none }
.twin > summary::before{ content:'+'; width:1ch; display:inline-block }
.twin[open] > summary::before{ content:'\2212' }
.twin > summary:hover{ color:var(--fg) }
.twin .tablewrap{ border-top:0; max-height:26rem; overflow:auto; margin-bottom:.6rem }

/* ---------- tooltip ---------- */

#tip{
  position:fixed; z-index:30; pointer-events:none; visibility:hidden;
  max-width:22rem; background:var(--bg); color:var(--fg);
  border:1px solid var(--fg); border-radius:2px;
  padding:.4rem .55rem; font-family:var(--mono); font-size:12px; line-height:1.45;
}
#tip .tip-title{ color:var(--muted); margin-bottom:.2rem; white-space:nowrap }
#tip .tip-row{ display:flex; align-items:baseline; gap:.4rem; white-space:nowrap }
#tip .tip-key{ flex:0 0 14px; height:0; border-top-width:2px; border-top-style:solid; align-self:center }
#tip .tip-val{ font-weight:600; font-variant-numeric:tabular-nums }
#tip .tip-lbl{ color:var(--muted) }
#tip .tip-note{ color:var(--muted); white-space:normal }

/* ---------- chart primitives (classes used by js/charts/*) ---------- */

.c-grid{ stroke:var(--rule); stroke-width:1; shape-rendering:crispEdges }
.c-axis{ stroke:var(--rule); stroke-width:1; shape-rendering:crispEdges }
.c-tick{ fill:var(--muted); font-size:11px; font-family:var(--mono); font-variant-numeric:tabular-nums }
.c-lbl{ fill:var(--fg); font-size:11px; font-family:var(--mono) }
.c-lbl-num{ fill:var(--fg); font-size:11px; font-family:var(--mono); font-variant-numeric:tabular-nums }
.c-lbl-mut{ fill:var(--muted); font-size:11px; font-family:var(--mono) }
.c-ref{ stroke:var(--ref); fill:none }
.c-ref-t{ fill:var(--ref); font-size:11px; font-family:var(--mono) }
.c-faint{ stroke:var(--faint); fill:none; stroke-width:1 }
.c-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.c-hit{ fill:transparent; stroke:none }
.c-cross{ stroke:var(--rule); stroke-width:1; shape-rendering:crispEdges }
.c-mark{ cursor:pointer }
.c-mark:hover .c-halo, .c-mark[data-on="1"] .c-halo{ opacity:1 }
.c-halo{ opacity:0; fill:var(--wash) }
.c-seg-gap{ stroke:var(--bg); stroke-width:2 }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0s !important; animation-iteration-count:1 !important;
    transition-duration:0s !important; scroll-behavior:auto !important;
  }
}

/* ---------- narrow ---------- */

@media (max-width: 34rem){
  body{ font-size:14px }
  .shell-head{ align-items:flex-start }
  .brand{ flex:1 0 100% }
  table{ font-size:.78rem }
}

/* ---------- snapshot and trends ---------- */

/* The Field hero */
.field-hero{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1.2rem 0 1rem; margin:0 0 .2rem }
.hero-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.2rem 2.4rem }
.hero-fig{ flex:0 1 26rem; min-width:15rem }
.hero-strip{ flex:1 1 30rem; min-width:0 }
.hero-h{ font-size:.82rem; font-family:var(--mono); color:var(--muted); margin:0 0 .3rem; letter-spacing:.06em }
.hero-num{ font-size:clamp(3.5rem,11vw,8rem); margin:0 }
.hero-line{ font-size:.82rem; line-height:1.5; margin-top:.5rem; max-width:46ch }
.hero-note{ font-size:.76rem; color:var(--muted); margin-top:.7rem; max-width:74ch }
.hero-strip{ transition:opacity .2s ease }
.hero-strip.swapping{ opacity:.2 }

/* section headings inside a view */
.sec-h{ font-family:var(--mono); font-size:.86rem; font-weight:600; margin:1.6rem 0 .3rem }
.rank-note{ font-size:.78rem; margin-bottom:.4rem }

/* controls row extras */
.seg-short{ display:none }
@media (max-width: 37.5rem){
  .seg-long{ display:none }
  .seg-short{ display:inline }
}
.swatch{ display:inline-block; width:10px; height:10px; border-radius:1px; flex:0 0 auto; vertical-align:baseline }
.swatch-ref{ background:var(--ref) }
.pin-name{ white-space:nowrap }
.notice{ flex:1 0 100%; margin:0 }
.notice:empty{ display:none }

/* the searchable picker */
.picker{ position:relative; display:inline-flex }
.picker-pop{
  position:absolute; top:calc(100% + .3rem); left:0; z-index:15;
  min-width:19rem; max-width:min(24rem, 80vw);
  background:var(--bg); border:1px solid var(--fg); border-radius:2px; padding:.4rem;
}
.picker-pop[hidden]{ display:none }
.picker-input{ width:100% }
.picker-list{ list-style:none; margin:.35rem 0 0; padding:0; max-height:14rem; overflow:auto }
.picker-opt{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.2rem .35rem; margin:0; cursor:pointer; font-size:.8rem;
}
.picker-opt + .picker-opt{ margin-top:0 }
.picker-opt[aria-selected="true"]{ background:var(--fg); color:var(--bg) }
.picker-opt[aria-selected="true"] .picker-kind{ color:var(--bg) }
.picker-kind{ font-size:.72rem; white-space:nowrap }
.picker-count{ font-size:.72rem; margin:.35rem 0 0 }

/* ranking table */
.rank-wrap{ max-height:none }
table.rank{ min-width:44rem }
table.rank thead th{ vertical-align:bottom }
.th-sort{ padding:0 }
.th-btn{
  font:inherit; font-weight:600; color:inherit; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:.3rem; padding:.45rem .55rem; width:100%;
}
th.num .th-btn{ justify-content:flex-end }
.th-btn:hover{ color:var(--muted) }
.th-quiet{ font-weight:400; color:var(--muted); font-size:.74rem }
.t-pin{ width:2.2rem; padding:.2rem .2rem .2rem 0 }
.pinbtn{ padding:0; width:1.5rem; min-height:1.35rem; line-height:1.2; text-align:center; color:var(--muted) }
.pinbtn:hover{ color:var(--fg) }
.pinbtn[aria-pressed="true"]{ background:none; color:var(--fg); border-color:var(--fg) }
.t-rank{ width:4.5rem }
.t-name{ white-space:nowrap }
.t-name .swatch{ margin-right:.4rem }
.t-mean{ width:4rem }
.t-chart{ width:11rem }
table.rank td.cell-chart{ width:11rem }
table.rank td.cell-chart svg{ width:100%; height:16px }
.t-vs, .t-change{ width:7rem }
.caveat{ text-decoration:none; margin-left:.15rem; cursor:help }
.ref-row th, .ref-row td{ border-top:1px solid var(--fg); border-bottom:0; color:var(--ref) }
.ref-row .swatch{ margin-right:.4rem }
.diff{
  display:inline-block; min-width:3.9rem; padding:0 .3rem; border-radius:1px;
  font-variant-numeric:tabular-nums; text-align:right;
}
.diff.pos{ background:color-mix(in srgb, var(--pos) 15%, transparent) }
.diff.neg{ background:color-mix(in srgb, var(--neg) 15%, transparent) }
.diff.ns{ color:var(--muted) }

/* trends */
.trend-controls{ position:relative; z-index:5 }
.trend-chart-sec{ margin-top:.4rem }
.trend-note{ font-size:.82rem; color:var(--muted); margin-top:.8rem }
.trend-change{ margin-top:1.2rem }
.chg-list{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; font-size:.8rem }
.chg{ display:inline-flex; align-items:baseline; gap:.4rem; margin:0 }
.chg + .chg{ margin-top:0 }
.chg-key{ display:inline-block; width:14px; height:2px; align-self:center; flex:0 0 auto }
.chg-val{ font-variant-numeric:tabular-nums }
.trend-foot{ margin-top:1.1rem; border-top:1px solid var(--rule); padding-top:.6rem }
.trend-foot p{ max-width:80ch }
.trend-foot p + p{ margin-top:.3rem }

@media (max-width: 34rem){
  .seg{ flex-wrap:wrap }
  .seg label{ flex:1 1 auto }
  .hero-num{ font-size:clamp(3rem,18vw,4.6rem) }
  .hero-grid{ gap:1rem }
  .hero-fig, .hero-strip{ flex:1 1 100% }
  table.rank{ min-width:38rem }
  .t-chart, table.rank td.cell-chart{ width:5.5rem }
  .diff{ min-width:2.8rem }
  .picker-pop{ min-width:min(19rem, 86vw) }
}

/* ---------- compare, country, about ---------- */

/* PISA · 23signs
   Compare, Country, and About. Printed annex furniture only: hairlines,
   whitespace, no cards, no shadows. Merged into style.css later. */

/* ---------- small multiples ---------- */

.cc-grid{
  display:grid; gap:1.4rem 1.8rem;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  margin:1rem 0 .4rem;
}
.cc-panel{ min-width:0 }
.cc-panel > h3{ margin:0 0 .2rem; font-size:1rem }
.cc-panel-note{ font-size:.74rem; color:var(--muted); margin-top:.1rem }
.cc-panel figure{ margin:.2rem 0 0 }
.cc-panel figcaption{ font-size:.72rem }
.cc-note{ font-size:.8rem; color:var(--muted); max-width:74ch; margin:.3rem 0 .5rem }
.cc-guard{ margin:1rem 0; max-width:60ch }

/* ---------- add-system picker ---------- */

.cc-picker{ position:relative; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.cc-pick-body{ display:flex; flex-direction:column; gap:.3rem; position:relative }
.cc-pick-body[hidden]{ display:none }
.cc-pick-input{ min-width:13rem }
.cc-options{
  list-style:none; margin:0; padding:0;
  position:absolute; top:100%; left:0; z-index:15; min-width:15rem;
  max-height:15rem; overflow:auto;
  background:var(--bg); border:1px solid var(--fg); border-radius:2px;
  font-size:.8rem;
}
.cc-pick-body[hidden] + .cc-options{ display:none }
.cc-option{
  display:flex; align-items:center; gap:.45rem;
  padding:.25rem .5rem; margin:0; cursor:pointer; white-space:nowrap;
}
.cc-option + .cc-option{ border-top:1px solid var(--rule) }
.cc-option[aria-selected="true"]{ background:var(--wash) }
.cc-option .swatch{ width:9px; height:9px; border-radius:1px; flex:0 0 auto }
.cc-option-r{ color:var(--muted); margin-left:auto; padding-left:.8rem }
.cc-option-none{ color:var(--muted); cursor:default }
.cc-picker .notice:empty{ display:none }

/* ---------- country header ---------- */

.cc-meta{
  font-size:.82rem; color:var(--muted); margin:0 0 .3rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; max-width:none;
}
.cc-meta .swatch{ width:10px; height:10px; border-radius:1px; flex:0 0 auto }
.cc-flags{ margin:.7rem 0 0 }
.cc-flags p{ font-size:.78rem; color:var(--muted); max-width:78ch }
.cc-flags p + p{ margin-top:.35rem }
.cc-links{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.84rem; padding:.6rem 0 0 }

/* ---------- position versus the OECD average ---------- */

.cc-pos{ list-style:none; margin:.6rem 0 0; padding:0; border-top:1px solid var(--rule) }
.cc-pos li{
  margin:0; padding:.5rem 0; border-bottom:1px solid var(--rule);
  font-size:.86rem; font-variant-numeric:tabular-nums; max-width:none;
}
.cc-pos .cc-dom{ font-variant-numeric:normal }
.cc-pos .cc-sub{ display:block; color:var(--muted); font-size:.78rem; margin-top:.15rem }

.cc-readout{ font-size:.76rem; color:var(--muted); margin:.25rem 0 0 }

/* ---------- about ---------- */

.cc-about h2{ margin-top:2.6rem }
.cc-about h3{ font-size:1rem; margin:1.7rem 0 .5rem }
.cc-about p, .cc-about li{ max-width:66ch }
.cc-about .tablewrap{ margin:.8rem 0 1rem }
.cc-about table{ font-size:.8rem }
.cc-about dl{ margin:.8rem 0 }
.cc-about dt{ margin-top:.7rem }
.cc-about dd{ margin:0 0 0 1.4rem; color:var(--muted); max-width:64ch }
.cc-hash{ font-size:.76rem; word-break:break-all }
.cc-worked{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.8rem 0; margin:1rem 0;
}
.cc-worked dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.15rem .8rem; font-size:.84rem }
.cc-worked dt{ margin:0; color:var(--muted) }
.cc-worked dd{ margin:0; font-variant-numeric:tabular-nums; color:inherit }
.cc-facts{ list-style:none; margin:.6rem 0; padding:0 }
.cc-facts li{ padding:.15rem 0 }

/* ---------- narrow ---------- */

@media (max-width: 34rem){
  .cc-grid{ grid-template-columns:1fr; gap:1.1rem }
  .cc-options{ min-width:12rem; max-width:min(92vw, 20rem) }
  .cc-pick-input{ min-width:10rem }
  .cc-worked dl{ grid-template-columns:1fr; gap:0 }
  .cc-worked dt{ margin-top:.4rem }
}

/* Four panels read better as 2 by 2 than as 3 plus 1. */
.cc-grid-wide{ grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr)) }
@media (max-width: 34rem){ .cc-grid-wide{ grid-template-columns:1fr } }

.cc-about h4, .cc-h4{
  font-family:var(--mono); font-size:.86rem; font-weight:600;
  margin:1.1rem 0 .1rem;
}
.cc-worked-h{ font-size:.82rem; color:var(--muted); margin:0 0 .5rem }
.cc-adapt{ color:var(--muted); font-size:.82rem }
.cc-about ul{ font-size:.9rem }