/* Mondo design system
   Bright and playful at the edges, quiet and serious where the data is.
   Charts follow Our World in Data conventions: no chart junk, direct labels,
   one accent per series, generous whitespace. */

/* ---------------------------------------------------------------------------
   Design tokens.

   The look is newspaper rather than product: a serif column, hairline rules,
   square corners, and colour used to mean something rather than to decorate.
   The previous palette put eight bright hues on equal footing, which reads as
   friendly and makes a chart of eight countries look like a party rather than
   a comparison.

   No web fonts, deliberately. Two families loaded from a font CDN would get
   closer to a magazine masthead and would cost every reader on a slow
   connection a render-blocking round trip -- and the audience this platform
   was built for is explicitly the one with the worst connection. A system
   serif stack gets most of the way for nothing.
   --------------------------------------------------------------------------- */
:root {
  --paper: #ffffff;
  --paper-2: #f6f7f8;      /* panel fill, the newspaper's grey box */
  --ink: #121212;
  --ink-2: #3b4650;
  --muted: #6b7785;
  --line: #d9dee2;
  --rule: #121212;         /* the heavy rule under a section head */

  /* Data palette. Sequential in weight rather than in hue, so a chart of
     several series reads as a comparison and not as a set of brands. Red is
     reserved for emphasis and for the mark above a section head. */
  --c1: #006ba2;  /* blue    */
  --c2: #3ebcd2;  /* cyan    */
  --c3: #379a8b;  /* green   */
  --c4: #ebb434;  /* ochre   */
  --c5: #9a607f;  /* mauve   */
  --c6: #b4ba39;  /* olive   */
  --c7: #00588d;  /* deep blue */
  --c8: #e3120b;  /* red, sparingly */

  --accent: #e3120b;
  --accent-ink: #ffffff;

  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --wrap: 1320px;

  --font: Georgia, "Times New Roman", "Songti SC", "Hiragino Mincho ProN",
          "Noto Serif JP", "Noto Serif SC", serif;
  --font-ui: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
             "Noto Sans JP", "Noto Sans SC", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}


@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1113; --paper-2: #191c1f; --ink: #f4f4f2; --ink-2: #c3ccd4;
    --muted: #8e9aa6; --line: #2b3238; --rule: #f4f4f2; --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.mono { font-family: var(--mono); font-size: .9em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 99; border-radius: 8px; }

/* ---------- buttons, pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45em; cursor: pointer;
  padding: .55em 1em; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .93rem; text-decoration: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); }
.btn-accent { background: var(--c1); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: .35em .75em; font-size: .82rem; }
.pill {
  display: inline-block; padding: .18em .6em; border-radius: 999px;
  font-size: .76rem; font-weight: 600; background: var(--line); color: var(--ink-2);
  letter-spacing: .01em;
}
.pill-ok { background: rgba(6,195,154,.16); color: #04795f; }
.pill-warn { background: rgba(255,183,3,.2); color: #8a5b00; }
.pill-bad { background: rgba(255,77,109,.16); color: #b3123b; }
.pill-info { background: rgba(59,91,219,.14); color: #2540ac; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
.brand-name strong { color: var(--c1); }
.brand-dots { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.brand-dots i { width: 7px; height: 7px; border-radius: 2px; display: block; }
.brand-dots i:nth-child(1) { background: var(--c1); }
.brand-dots i:nth-child(2) { background: var(--c2); transform: rotate(12deg); }
.brand-dots i:nth-child(3) { background: var(--c3); transform: rotate(-8deg); }
.brand-dots i:nth-child(4) { background: var(--c4); }
.mainnav { display: flex; gap: 18px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a { color: var(--ink-2); font-size: .92rem; font-weight: 500; white-space: nowrap; }
.mainnav a:hover { color: var(--ink); text-decoration: none; }
.mainnav a[aria-current=page] { color: var(--ink); font-weight: 600; }
.searchbox { display: flex; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 2px 2px 12px; }
.searchbox input { border: 0; background: transparent; font: inherit; font-size: .88rem; color: var(--ink); width: 258px; padding: 6px 0; outline: none; }
.searchbox button { border: 0; background: var(--ink); color: var(--paper); width: 28px; height: 28px; border-radius: 999px; cursor: pointer; font-size: .9rem; }
.searchlink { display: none; color: var(--ink-2); padding: 6px; line-height: 0; }
.searchlink svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                  stroke-width: 1.8; stroke-linecap: round; }
.searchlink:hover { color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.langpick { position: relative; }
.langpick summary { cursor: pointer; list-style: none; font-size: .88rem; color: var(--ink-2); padding: 6px 8px; border-radius: 8px; }
.langpick summary::-webkit-details-marker { display: none; }
.langpick-menu { position: absolute; right: 0; top: 110%; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; display: grid; min-width: 150px; z-index: 50; }
.langpick-menu a { padding: 7px 10px; border-radius: 6px; color: var(--ink-2); font-size: .9rem; }
.langpick-menu a:hover { background: var(--line); text-decoration: none; }
.langpick-menu a.is-current { color: var(--ink); font-weight: 600; }
/* ---------- theme bar (second row) ---------- */
/* Not sticky: the themes are a way in, not something you need at every scroll
   position, and two sticky rows would eat 100px of every screen. */
.themebar { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.themebar-inner {
  display: flex; align-items: center; gap: 20px; height: 46px;
  overflow-x: auto; scrollbar-width: none;
}
/* Search sits at the end of the theme row and takes the slack. */
.themebar-inner .searchbox { margin-left: auto; flex: 0 0 auto; }
.themebar-inner .searchbox input { width: 340px; }
@media (max-width: 900px) {
  .themebar-inner .searchbox { margin-left: 12px; }
  .themebar-inner .searchbox input { width: 150px; }
}
.themebar-inner::-webkit-scrollbar { display: none; }
.themebar a {
  color: var(--ink-2); font-size: .88rem; white-space: nowrap;
  border-bottom: 2px solid transparent; padding: 2px 0; line-height: 1.4;
}
.themebar a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--c1); }
.themebar a[aria-current=page] { color: var(--ink); font-weight: 600; border-bottom-color: var(--c1); }

@media (max-width: 1080px) {
  .searchbox input { width: 150px; }
}
@media (max-width: 900px) {
  .topbar-inner { gap: 12px; }
}
@media (max-width: 620px) {
  .brand-name { display: none; }
  .topbar-inner { gap: 10px; }
  .themebar-inner { height: 38px; gap: 16px; }
}

/* ---------- hero ---------- */
.hero { padding: 56px 0 34px; position: relative; overflow: hidden; }
.hero h1 { max-width: 20ch; }
.hero-sub { font-size: 1.3rem; font-weight: 600; color: var(--ink); margin: -.2em 0 .5em; letter-spacing: -.01em; max-width: 34ch; }
.hero-lede { font-size: 1.15rem; color: var(--ink-2); max-width: 58ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.confetti i { position: absolute; width: 10px; height: 10px; border-radius: 2px; opacity: .8; }
main { position: relative; }
/* On a content page the sprinkle is a band behind the page header, not the whole page. */
.confetti-page { bottom: auto; height: 520px; overflow: hidden; }

.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 0; }
.stat { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat b { display: block; font-size: 1.5rem; letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: .82rem; }
@media (max-width: 760px) { .statrow { grid-template-columns: 1fr 1fr; } }

/* ---------- question cards ---------- */
.section { padding: 40px 0; }
/* `.section` zeroes the side padding `.wrap` gives, which left every `wrap section` page flush to the window edge. */
.wrap.section { padding-left: 20px; padding-right: 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.qcard {
  display: block; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; color: var(--ink);
  position: relative; overflow: hidden; transition: transform .1s ease, box-shadow .15s ease;
}
.qcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.qcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c1); }
.qcard:nth-child(4n+2)::before { background: var(--c3); }
.qcard:nth-child(4n+3)::before { background: var(--c2); }
.qcard:nth-child(4n+4)::before { background: var(--c5); }
.qcard h3 { font-size: 1.05rem; margin-bottom: .35em; }
.qcard p { margin: 0; color: var(--muted); font-size: .9rem; }
.qcard .pill { margin-bottom: 10px; }

.themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.themecard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); }
.themecard:hover { text-decoration: none; border-color: var(--ink); }
.themecard b { display: block; }
.themecard span { color: var(--muted); font-size: .87rem; }

/* ---------- tables & cards ---------- */
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 14px; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--line) 40%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- forms ---------- */
.form label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=number], .form input[type=search], .form select, .form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.form .field { margin-bottom: 14px; }
.form .check { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; }
.form .check input { margin-top: 4px; }
.form .errors { color: var(--c8); font-size: .84rem; margin: 4px 0 0; }
.form-narrow { max-width: 520px; }
.inline-form { display: inline; }

.flash { border-radius: var(--radius-sm); padding: 10px 14px; margin: 14px 0; font-size: .92rem; border: 1px solid var(--line); background: var(--paper-2); }
.flash-success { border-color: rgba(6,195,154,.5); }
.flash-error { border-color: rgba(255,77,109,.5); }

/* ---------- licence gate ---------- */
.gate { border: 2px dashed var(--c2); border-radius: var(--radius); padding: 20px; background: color-mix(in srgb, var(--c2) 8%, var(--paper-2)); }
.gate h3 { margin-bottom: .3em; }
.licence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.licence-fact { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--paper-2); }
.licence-fact b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ---------- chart ---------- */
.chart-shell { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.chart-title { font-weight: 700; font-size: 1.1rem; }
.chart-sub { color: var(--muted); font-size: .85rem; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid line { stroke: var(--line); stroke-width: 1; }
.chart-svg .axis text { fill: var(--muted); font-size: 11px; }
.chart-svg .series path { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-label { font-size: 11px; font-weight: 600; }
.chart-svg .hover-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.chart-note { color: var(--muted); font-size: .8rem; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.chart-picker { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chart-picker button { border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: .3em .8em; font: inherit; font-size: .82rem; cursor: pointer; }
.chart-picker button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chart-tooltip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font-size: .78rem; padding: 6px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 20; }
.chart-wrap { position: relative; }
.preview-banner { background: color-mix(in srgb, var(--c2) 14%, var(--paper-2)); border: 1px solid rgba(255,183,3,.5); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .88rem; margin-bottom: 12px; }

/* ---------- consent ---------- */
.consent { position: fixed; bottom: 14px; left: 14px; right: 14px; max-width: 720px; margin: 0 auto; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 8px; z-index: 60; font-size: .88rem; }
.consent-opt { display: inline-flex; gap: 7px; align-items: center; margin-right: 16px; color: var(--ink-2); }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 34px 0 44px; background: var(--paper-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.footer-grid a { display: block; color: var(--ink-2); font-size: .88rem; padding: 2px 0; }
.footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.footer-brand { font-size: 1.05rem; font-weight: 600; margin-bottom: .4em; }
.footer-brand strong { color: var(--c1); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- prose (legal, docs) ---------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose code { background: var(--line); padding: .12em .4em; border-radius: 5px; font-family: var(--mono); font-size: .88em; }
pre.code { background: var(--ink); color: #f4f4f2; padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; font-family: var(--mono); font-size: .84rem; line-height: 1.5; }
pre.code .c { color: #9aa1ad; }

/* ========================================================================== */
/* Step two: explorer, economy profiles, richer charts                        */
/* ========================================================================== */

/* ---------- chart chrome ---------- */
.chart-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chart-picker a {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: .3em .8em; font-size: .82rem; line-height: 1.5;
  text-decoration: none; display: inline-block;
}
.chart-picker a:hover { text-decoration: none; border-color: var(--ink); color: var(--ink); }
/* Links carry aria-current ("this is the view you are on"); real buttons carry
   aria-pressed. Both look the same and mean different things to a reader. */
.chart-picker a[aria-current=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chart-empty { padding: 40px 0; text-align: center; }
.chart-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px;
              border-top: 1px solid var(--line); padding-top: 12px; }
.chart-svg .grid line.zero { stroke: var(--ink-2); stroke-width: 1.2; }
.chart-svg .axis-title { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.chart-svg .bar-name { fill: var(--ink); font-size: 12px; dominant-baseline: middle; }
.chart-svg .bar-value { fill: var(--muted); font-size: 11px; dominant-baseline: middle; }
.chart-svg .point-label { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.chart-svg .bars rect { transition: opacity .12s ease; }
.chart-svg:hover .bars rect { opacity: .92; }
.chart-tooltip .key {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}
.chart-wrap[aria-busy=true] { opacity: .55; }

/* ---------- share / copy ---------- */
.share { margin-top: 4px; }
.share summary { cursor: pointer; font-size: .86rem; color: var(--ink-2); }
.share-body { padding-top: 10px; display: grid; gap: 6px; }
.copyrow { display: flex; gap: 8px; align-items: flex-start; }
.copyrow input, .copyrow textarea {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-2);
  font-family: var(--mono); font-size: .78rem; resize: vertical;
}

/* ---------- explorer ---------- */
.explorer { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 22px; }
.explorer-controls { display: grid; gap: 16px; position: sticky; top: 78px; }
.control { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.control > label, .control-head label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: 6px; }
.control-head { display: flex; justify-content: space-between; align-items: baseline; }
.control select, .control input[type=search], .control input[type=number] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem;
}
.control p { margin: 8px 0 0; }
.picklist {
  max-height: 260px; overflow-y: auto; margin: 8px 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper);
}
.picklist[aria-busy=true] { opacity: .5; }
.pickitem {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 6px 10px; font-size: .87rem; cursor: pointer;
}
.pickitem:hover { background: color-mix(in srgb, var(--line) 45%, transparent); }
.pickitem input { margin: 0; }
.pickitem[hidden] { display: none; }
.picklist-tall { max-height: 320px; }
/* Indicator names are long — "Lithium — Mine production, lithium content
   (production)". Squeezing them beside the dataset slug broke one label across
   eight lines, so the slug goes underneath on its own row instead. */
.pickitem-link { display: block; text-decoration: none; color: var(--ink); padding: 8px 10px; }
.pickitem-link > span { display: block; }
.pickitem-link > span:first-child { line-height: 1.35; }
.pickitem-link > span + span { margin-top: 2px; }
.pickitem-link:hover { text-decoration: none; }
.pickitem-link.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.pickactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.yearrange { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.explorer-chart { min-width: 0; }
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer-controls { position: static; }
}

/* ---------- economies ---------- */
.arealist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.areachip {
  display: inline-flex; align-items: baseline; gap: 7px; padding: .4em .8em;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); color: var(--ink);
}
.areachip:hover { text-decoration: none; border-color: var(--ink); }
.areachip[hidden] { display: none; }
.identity { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; color: var(--ink-2); font-size: .88rem; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.factcard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; }
.factcard[hidden] { display: none; }
.factcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.factcard h3 { font-size: .92rem; font-weight: 600; margin: 0 0 6px; }
.factcard p { margin: 0 0 4px; }
.spark { flex: 0 0 auto; width: 132px; opacity: .9; }
.spark svg { width: 100%; height: 30px; display: block; }
.factvalue { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.factunit { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: 5px; letter-spacing: 0; }
.up { color: #04795f; }
.down { color: #b3123b; }
@media (prefers-color-scheme: dark) { .up { color: #06c39a; } .down { color: #ff6b87; } }

/* ---------- embed ---------- */
.embed-body { margin: 0; padding: 8px; background: var(--paper-2); }
.embed-shell { border: 0; padding: 8px; }
.embed-credit { margin: 8px 0 0; font-size: .78rem; }
.embed-credit a { color: var(--muted); }
.embed-credit strong { color: var(--c1); }

/* ---------- source register ---------- */
.registergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.registeritem { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; }
.registeritem[hidden] { display: none; }
.registeritem h3 { font-size: 1rem; margin: 0; }
.registerhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.registerpills { display: flex; gap: 5px; flex-wrap: wrap; }
.registeritem p { margin: 6px 0 0; }
.assessment { font-size: .88rem; color: var(--ink-2); line-height: 1.55; border-left: 2px solid var(--line); padding-left: 10px; margin-top: 10px !important; }

/* ---------- choropleth ---------- */
.chart-map .map-countries path { stroke: var(--paper-2); stroke-width: .5; }
.chart-map .map-countries path.no-data { fill: var(--line); }
.chart-map .map-countries path.has-data:hover { stroke: var(--ink); stroke-width: 1.2; }
.chart-map .map-legend text { fill: var(--muted); font-size: 10px; }

/* ---------- click-through world map ---------- */
.worldmap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin: 22px 0 8px; align-items: start; }
@media (max-width: 860px) { .worldmap-layout { grid-template-columns: 1fr; } }
.worldmap { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 6px 4px; position: relative; }
.worldmap-svg { width: 100%; height: auto; display: block; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.worldmap-svg.is-zoomed { touch-action: none; cursor: grab; }
.worldmap-svg .country { fill: var(--line); stroke: none; opacity: .88; transition: opacity .12s ease; vector-effect: non-scaling-stroke; }
.worldmap-svg .country.is-flat { opacity: .55; }
.worldmap-svg .is-live { cursor: pointer; outline: none; }
/* Hover is a lift in brightness and a hairline, not a size change: a grown country covers its neighbours. */
.worldmap-svg .country.is-hover { opacity: 1; stroke: var(--ink); stroke-width: .8; }
.worldmap-svg .country.is-flat:hover { opacity: .8; }
.worldmap-svg .country.is-selected { opacity: 1; stroke: var(--ink); stroke-width: 1.8; }
.worldmap-svg .country.is-live:focus-visible { stroke: var(--ink); stroke-width: 1.8; }
.worldmap-svg .potato-hit { fill: transparent; }
.worldmap-svg .potato-body { stroke: var(--paper-2); stroke-width: .8; }
.worldmap-tip { position: absolute; z-index: 6; pointer-events: none; display: grid; gap: 1px; padding: 5px 9px; background: var(--ink); color: var(--paper); font-size: .82rem; line-height: 1.3; max-width: 240px; }
.worldmap-tip[hidden] { display: none; }
.worldmap-tip strong { font-weight: 700; }
.worldmap-tip span { opacity: .75; font-size: .74rem; }
.worldmap-zoom { position: absolute; top: 12px; right: 12px; display: grid; gap: 4px; }
.worldmap-zoom button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); }
.worldmap-zoom button:hover { border-color: var(--ink); }
.worldmap-zoom button[hidden] { display: none; }
.worldmap-hint { margin: 2px 4px 4px; text-align: right; }
.worldmap-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 2px 0; }
.worldmap-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.worldmap-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; transform: rotate(10deg); }
.worldmap-panel { position: sticky; top: 12px; }
.worldmap-panel h2 { font-size: 1.25rem; margin: 0 0 8px; }
.mapfacts { margin: 12px 0; display: grid; gap: 8px; }
.mapfact { border-top: 1px solid var(--line); padding-top: 7px; }
.mapfact dt { font-size: .78rem; color: var(--muted); }
.mapfact dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.mapfact dd b { font-size: 1.15rem; letter-spacing: -.01em; }

/* ---------- topic tree (data page) ---------- */
.topic-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 14px 0 6px; }
.topic-tools input[type=search] { flex: 1 1 280px; max-width: 460px; padding: .55em .8em; border: 1px solid var(--line); background: var(--paper-2); font: inherit; }
.topictree { display: grid; gap: 8px; margin-top: 10px; }
.topic { border: 1px solid var(--line); background: var(--paper-2); }
.topic[hidden], .topic-leaves li[hidden] { display: none; }
.topic > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.topic > summary::-webkit-details-marker { display: none; }
.topic > summary::before { content: "\25B8"; color: var(--muted); font-size: .8em; transition: transform .12s ease; }
.topic[open] > summary::before { transform: rotate(90deg); }
.topic-count { margin-left: auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.topic-chip { width: 10px; height: 10px; border-radius: 2px; background: var(--chip, var(--c1)); transform: rotate(12deg); align-self: center; flex: 0 0 auto; }
.topic > .topic-body { padding: 0 0 10px 18px; border-top: 1px solid var(--line); }
.topic .topic { border: 0; border-left: 2px solid var(--line); background: transparent; margin-top: 6px; }
.topic .topic > summary { font-weight: 500; padding: 7px 12px; }
.topic > .topic-body.topic-cards { padding: 14px; }
.topic-leaves { list-style: none; margin: 8px 0 0; padding: 0 14px 0 0; display: grid; gap: 5px; }
.topic-leaves li { padding: 2px 0; }
.topic-hits { list-style: none; padding: 0; display: grid; gap: 10px; }

/* ---------- loading: the confetti spinner ---------- */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--muted); }
.loading.is-inline { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 0; }
.confetti-spinner { position: relative; width: 52px; height: 52px; flex: 0 0 auto; animation: cs-turn 3.2s linear infinite; }
.is-inline .confetti-spinner { width: 34px; height: 34px; }
.confetti-spinner i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 2px; background: var(--c);
  transform: rotate(var(--a)) translateY(-20px) rotate(calc(var(--a) * -1));
  animation: cs-pop 1.2s ease-in-out infinite; animation-delay: calc(var(--n) * -.15s);
}
.is-inline .confetti-spinner i { width: 6px; height: 6px; margin: -3px 0 0 -3px; transform: rotate(var(--a)) translateY(-13px) rotate(calc(var(--a) * -1)); }
@keyframes cs-turn { to { transform: rotate(360deg); } }
@keyframes cs-pop { 0%, 100% { scale: .4; opacity: .3; rotate: 0deg; } 50% { scale: 1.2; opacity: 1; rotate: 50deg; } }
@media (prefers-reduced-motion: reduce) {
  .confetti-spinner { animation: none; }
  .confetti-spinner i { animation: cs-fade 1.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.2s); }
  @keyframes cs-fade { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
}

/* ---------- sankey ---------- */
.chart-svg .sankey-node { fill: var(--ink-2); }
.chart-svg .sankey-label { fill: var(--ink); font-size: 11px; }
.chart-svg .sankey-link { transition: fill-opacity .12s ease; }
.chart-svg .sankey-link:hover { fill-opacity: .8 !important; }

/* ---------- answer quality ---------- */
.quality { margin: 34px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.quality summary { cursor: pointer; list-style: none; display: flex; align-items: baseline;
                   gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.quality summary::-webkit-details-marker { display: none; }
.quality-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.quality-strong .quality-dot { background: var(--c3); }
.quality-partial .quality-dot { background: var(--c2); }
.quality-indicative .quality-dot { background: var(--c6); }
.quality-grade { font-weight: 600; color: var(--ink); }
.quality-body { padding: 10px 0 0 17px; }
.quality-body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; }
.quality-body dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
                   color: var(--muted); font-weight: 600; }
.quality-body dd { margin: 0; font-size: .88rem; color: var(--ink-2); }

/* ---- reader ratings -------------------------------------------------------
   Sits under .quality and has to read as a different kind of thing: that block
   is the author's claim about the page, this one is the readers' count of it.
   So: same restraint, but a panel rather than a rule, and the buttons are the
   only thing on the page that invites a click without going anywhere. */
.rating { margin: 30px 0 0; padding: 15px 17px; border: 1px solid var(--line);
          border-radius: var(--radius-sm); background: var(--paper-2); }
.rating-title { font-size: .92rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.rating-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.rating-btn { font: inherit; font-size: .84rem; line-height: 1.3; padding: 6px 13px;
              cursor: pointer; border: 1px solid var(--line); border-radius: 999px;
              background: var(--paper); color: var(--ink-2); transition: none; }
.rating-btn:hover { border-color: var(--accent); color: var(--accent); }
.rating-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rating-btn-small { font-size: .79rem; padding: 4px 11px; }
.rating-q { font-size: .84rem; color: var(--ink-2); margin-right: 2px; }
.rating-thanks { font-size: .88rem; color: var(--ink-2); margin: 0 0 9px; }
.rating-note, .rating-stats { margin: 9px 0 0; }
.rating-followup { margin-top: 2px; }
@media (max-width: 560px) { .rating-form { gap: 6px; } .rating-q { flex: 1 0 100%; } }

/* ---------------------------------------------------------------------------
   Newspaper layer.

   Everything above is the component set as it was built; this is the part the
   tokens cannot express. Three ideas do most of the work: a serif column with
   a sans user interface around it, hairlines instead of boxes, and a red mark
   that says "a section starts here" without spending a heading on it.
   --------------------------------------------------------------------------- */

body { font-family: var(--font); font-size: 17px; line-height: 1.55; }

/* Headings are sans and tight, which is the contrast the serif column needs.
   All-serif reads as a thesis; all-sans reads as a dashboard. */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  letter-spacing: -.017em;
  line-height: 1.12;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0 0 .35em; }
h2 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin: 1.9em 0 .5em; }
h3 { font-size: 1.05rem; }

/* The mark above a section head. The Economist's is a red rectangle over a
   rule; this is the same idea at the scale of a web page. Applied to the
   article headings only, so a card title does not sprout one. */
.wrap.section > h2::before,
.section-head > h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  background: var(--accent);
  margin: 0 0 .55em;
}

p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: 1.12rem; line-height: 1.5; color: var(--ink-2); }

/* Interface furniture stays sans: buttons, tables, labels, navigation. A serif
   number in a table column is harder to scan and a serif button looks like a
   mistake. */
.btn, .pill, table.data, .chart-picker, .topbar, .themebar,
.small, .muted, .mono, input, select, button, label, nav {
  font-family: var(--font-ui);
}

/* Flat tag, not a lozenge. */
.pill {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
  font-weight: 700;
  padding: 2px 6px;
}
.pill-info { border-color: var(--accent); color: var(--accent); }

.btn { border-radius: 0; font-weight: 600; letter-spacing: .01em; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #b60e08; border-color: #b60e08; }

/* Cards become ruled blocks. The border does the work the shadow used to. */
.card, .qcard, .stat, .chart-shell {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--line);
  background: var(--paper);
}
.qcard { transition: none; }
.qcard:hover { border-color: var(--ink); background: var(--paper-2); }
.qcard h3 { font-family: var(--font-ui); }
.qcard p { font-family: var(--font); font-size: .93rem; }

/* Tables: horizontal rules only, figures aligned and tabular, header in small
   caps. Vertical rules are the thing that makes a table look like a
   spreadsheet rather than a page. */
table.data { font-size: .92rem; border-collapse: collapse; }
table.data th {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
table.data td { border-bottom: 1px solid var(--line); padding: 7px 10px 7px 0; }
table.data td.num, table.data th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
table.data tbody tr:hover { background: var(--paper-2); }

/* Masthead: the one place the red is allowed to be loud. */
.topbar { border-bottom: 1px solid var(--rule); backdrop-filter: none; background: var(--paper); }
.brand-mark, .topbar .brand { font-family: var(--font-ui); font-weight: 800; letter-spacing: -.02em; }
.themebar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.themebar a { color: var(--ink-2); font-weight: 600; }
.themebar a[aria-current="page"] { color: var(--accent); }

.searchbox { border-radius: 0; border-color: var(--line); }

/* Chart furniture in the house style: bold sans title, grey subtitle, source
   note beneath in small type. */
.chart-title { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.01em; }
.chart-sub, .chart-note { font-family: var(--font-ui); color: var(--muted); font-size: .8rem; }
.chart-picker button { border-radius: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

/* The reader-rating block reads as a footnote rather than a call to action. */
.rating { border-radius: 0; background: var(--paper-2); border-color: var(--line); }
.rating-title { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; }
.rating-btn { border-radius: 0; font-family: var(--font-ui); font-size: .8rem; }

/* The author's quality note keeps its dot, but the dot is now the only colour
   in the block, which is the point of it. */
.quality-grade { font-family: var(--font-ui); }
.quality-strong .quality-dot { background: var(--c3); }
.quality-partial .quality-dot { background: var(--c4); }
.quality-indicative .quality-dot { background: var(--accent); }

code, .mono { font-family: var(--mono); font-size: .86em; }

/* Masthead flag. The four rotated coloured squares this replaces were a
   leftover from the project's first name, and they were the single most
   product-like thing on the page: a newspaper does not have a logo that
   sparkles. A solid red bar is the same gesture as the mark above a section
   head, at masthead scale, so the two read as one system. */
.brand-flag {
  display: block;
  width: 7px;
  height: 26px;
  background: var(--accent);
  flex: 0 0 auto;
}
.brand { gap: 11px; font-family: var(--font-ui); font-weight: 800; letter-spacing: -.022em; }
.brand-name strong { color: var(--accent); font-weight: 800; }
.footer-brand { font-family: var(--font-ui); }
.footer-brand strong { color: var(--accent); }

/* The search field was overflowing the theme row at narrow widths because it
   was sized for the old, shorter theme list. */
/* The theme row carries nine links and a search field. It was set to a fixed
   46px with overflow-x:auto, so once the links filled the row the search field
   did not shrink -- it scrolled out of sight, which is why you could barely
   see it. Wrapping is the honest behaviour for a row whose contents grew.
   The page is also wider now: a data site wants the width for tables and
   charts, and the reading column is capped separately at 68ch so prose does
   not stretch with it. */
.themebar-inner {
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 18px;
  height: auto;
  min-height: 46px;
  padding: 7px 0;
  overflow-x: visible;
}
.themebar-inner .searchbox {
  margin-left: auto;
  flex: 0 1 300px;
  min-width: 200px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.themebar-inner .searchbox input {
  font-family: var(--font-ui);
  font-size: .84rem;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
  min-width: 0;
}
@media (max-width: 900px) {
  .themebar-inner .searchbox { flex: 1 1 100%; margin-left: 0; }
  .themebar-inner .searchbox input { width: 100%; }
}