/* Tracking the Gap, public site.

   The look since 2 Nov 2026: plain white, one green accent, Montserrat
   throughout, flat cards with thin borders, and no animation. Straight and
   professional, in the manner of an NGO report site. Every colour and size
   below is a token in :root, so the look can be refined in one place.

   Light only, by decision: the site is "plain white". Text colours meet
   WCAG AA on white (the green accent is 5.4:1). */

:root {
  /* Surfaces and text */
  --bg: #ffffff;
  --surface: #ffffff;
  --subtle: #f5f8f6;
  --ink: #18201b;
  --muted: #56615a;
  --line: #e1e7e3;

  /* The green accent */
  --brand: #0d7a3e;
  --brand-dark: #0a5f30;
  --brand-soft: #eaf5ee;

  /* Verdicts: traffic lights, always with a word beside the colour */
  --green: #1e7d4a;
  --green-soft: #e6f4ec;
  --amber: #9a5800;
  --amber-soft: #fdf2dc;
  --red: #b42318;
  --red-soft: #fde8e5;

  /* Damage avoided and caused: a blue and orange pair checked for colour
     blindness against white (dataviz validator). */
  --benefit: #2a78d6;
  --harm: #eb6834;

  /* Transport and farming when both are drawn together (4 Nov 2026): an
     indigo and an orchid, apart for every common colour blindness (OKLab
     difference 18 to 28) and clear of the verdict, damage and green colours.
     At least 3:1 against white, and always named beside the colour. */
  --transport: #4b3f9e;
  --farming: #c46aa6;

  /* The four countries on the Compare page (4 Nov 2026): teal, violet, gold
     and wine, in the site's country order. Every pair stays apart for every
     common colour blindness (OKLab difference at least 9.9) and for normal
     sight (at least 20); each at least 3.7:1 against white, and each line
     carries its country's name. */
  --kenya: #1b7f8f;
  --uganda: #7a4fd1;
  --tanzania: #b9770e;
  --rwanda: #8f2d56;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 8px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font); line-height: 1.25; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; font-weight: 700; margin-top: 1.6em; }
h3 { font-size: 1.12rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; margin: 1.2em 0 0.4em; }
p { margin: 0 0 0.9em; }

a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Wide: content runs close to the edges on large screens, with gutters that
   grow with the screen. Paragraphs keep their own reading width. */
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 4.5vw, 72px); }
.small { font-size: 0.875rem; }
.muted { color: var(--muted); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* Header: a thin green rule above a white bar */
.site-header { background: var(--surface); border-top: 4px solid var(--brand); border-bottom: 1px solid var(--line); }
/* The header spans the whole window, its logo and menu near the edges
   (Kelvin, 6 Nov 2026); the page's content keeps the 1,600 px column. */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; min-height: 80px; padding-top: 18px; padding-bottom: 18px; max-width: none; padding-left: clamp(16px, 2vw, 32px); padding-right: clamp(16px, 2vw, 32px); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.logo { width: 36px; height: 36px; flex: none; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.main-nav a, .nav-menu summary { color: var(--ink); text-decoration: none; padding: 8px 0; font-size: 0.97rem; font-weight: 500; border-bottom: 2px solid transparent; }
.main-nav a:hover, .nav-menu summary:hover { color: var(--brand); border-bottom-color: var(--brand); }
.main-nav a[aria-current="page"], .nav-menu summary.current { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }

/* The Countries menu: a disclosure, so it needs no script */
.nav-menu { position: relative; margin: 0; padding: 0; border: 0; }
.nav-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-menu[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.nav-menu-list { position: absolute; top: calc(100% + 8px); left: -16px; z-index: 20; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; display: grid; }
.nav-menu-list a { padding: 10px 16px; border-bottom: 0; }
.nav-menu-list a:hover { background: var(--brand-soft); border-bottom: 0; }
.nav-menu-list a[aria-current="page"] { border-bottom: 0; background: var(--brand-soft); }
.nav-menu-list .nav-menu-extra { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }

/* Right side of the header: the menu, then the account */
.header-right { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; }
.auth-links { display: flex; align-items: center; gap: 20px; }
.nav-login { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.97rem; }
.nav-login:hover { color: var(--brand); }
.auth-links .button { padding: 9px 18px; }

/* The avatar: initials, or the Google photo */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #ffffff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu summary.avatar { padding: 0; border: 2px solid transparent; cursor: pointer; }
.account-menu summary.avatar::after { display: none; }
.account-menu summary.avatar:hover, .account-menu[open] summary.avatar { border-color: var(--brand-dark); color: #ffffff; }
.account-menu .nav-menu-list { left: auto; right: 0; min-width: 240px; }
.account-who { margin: 0; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); display: grid; }
.account-who span { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.menu-button { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 16px; font: inherit; color: var(--ink); cursor: pointer; }
.menu-button:hover { background: var(--brand-soft); }
.avatar.big { width: 64px; height: 64px; font-size: 1.4rem; }

/* Page heading band: white, set off by a rule */
.hero { background: var(--bg); border-bottom: 1px solid var(--line); padding: 44px 0 36px; }
.hero h1 { max-width: 960px; }
.hero .lead { max-width: 820px; font-size: 1.12rem; color: var(--muted); }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6em; }
.crumbs a { color: var(--muted); }

/* Buttons: one solid green, one outlined */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 1.4em; }
.button { display: inline-block; background: var(--brand); color: #ffffff; border: 1px solid var(--brand); text-decoration: none; font: inherit; font-weight: 600; font-size: 0.95rem; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
.button:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #ffffff; text-decoration: none; }
.button.ghost { background: var(--surface); color: var(--brand); }
.button.ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }
.button.solid { background: var(--brand); color: #ffffff; }
a.on-dark { color: var(--brand); font-weight: 600; }

/* Landing page */
.landing-hero { border-bottom: 1px solid var(--line); padding: 56px 0 48px; }
.landing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 48px 72px; align-items: start; }
.landing-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 920px; }
.landing-hero .lead { max-width: 760px; font-size: 1.15rem; color: var(--muted); }
.key-figures { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--subtle); }
.key-total { margin-bottom: 0.6em; }
.teaser-table { font-size: 0.88rem; margin: 4px 0 14px; }
.teaser-table thead th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); padding: 6px 8px 6px 0; border-bottom: 2px solid var(--ink); }
.teaser-table th[scope="row"] { font-weight: 700; padding: 10px 8px 10px 0; }
.teaser-table td { padding: 10px 8px 10px 0; }
.teaser-table .verdict { white-space: normal; align-items: flex-start; }
.teaser-table .verdict::before { margin-top: 5px; }
.updated { margin: 0 0 6px; font-weight: 600; }
.updated .eyebrow { display: inline; margin-right: 6px; }
.key-total strong { display: block; font-size: 2.4rem; line-height: 1.1; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.key-total span { color: var(--muted); }
.key-figures dl { margin: 0 0 12px; }
.key-figures dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.key-figures dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.band { padding: 48px 0; }
.band.subtle { background: var(--subtle); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band h2 { margin-top: 0; }
.three-up { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.three-up h3 { margin-bottom: 0.4em; }
.three-up p { margin: 0; color: var(--muted); }
ol.three-up { counter-reset: step; }
ol.three-up li { counter-increment: step; border-top: 3px solid var(--brand); padding-top: 14px; }
ol.three-up li::before { content: counter(step); display: block; font-weight: 700; color: var(--brand); margin-bottom: 6px; }

.faq-wrap { max-width: 960px; }
.faq { border-top: 1px solid var(--line); margin: 0; padding: 0; }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { padding: 16px 0; font-size: 1.05rem; color: var(--ink); list-style-position: outside; }
.faq summary:hover { color: var(--brand); }
.faq[open] summary { margin-bottom: 0; }
.faq p, .faq .sources { margin-bottom: 0.9em; }
.faq > *:last-child { padding-bottom: 8px; }

.country-links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.country-links a { display: inline-block; padding: 10px 18px; border: 1px solid var(--brand); border-radius: 6px; font-weight: 600; text-decoration: none; background: var(--surface); }
.country-links a:hover { background: var(--brand-soft); }

/* Page layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 36px 56px; align-items: start; }
.layout-learn { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); padding-top: 28px; }
.side { display: grid; gap: 20px; margin-top: 2.2em; }
.prose { max-width: 760px; padding-bottom: 24px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
/* A highlighted panel: white, with the green rule on top */
/* A soft tinted panel, no accent bar (Kelvin, 3 Nov 2026). */
.dark-box { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); margin: 0 0 0.9em; }

/* Pills and lights: colour always comes with a word */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0.6em; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.firm { background: var(--brand-soft); color: var(--brand); }
.pill.quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
.pill.tag { background: var(--subtle); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; font-size: 0.72rem; font-weight: 500; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red { background: var(--red); }

/* Home: the scorecard table, set like a report table */
.section-intro { color: var(--muted); max-width: 720px; }
.scorecard { font-size: 0.95rem; margin: 8px 0 12px; }
.scorecard thead th { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); border-bottom: 2px solid var(--ink); padding: 10px 12px 8px 0; }
.scorecard th[scope="row"], .scorecard td { padding: 14px 12px 14px 0; vertical-align: top; }
.scorecard th[scope="row"] a { font-weight: 700; color: var(--ink); text-decoration: none; }
.scorecard th[scope="row"] a:hover { color: var(--brand); text-decoration: underline; }
.verdict { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.verdict::before { content: ""; width: 10px; height: 10px; background: currentColor; flex: none; }
.verdict.green { color: var(--green); }
.verdict.amber { color: var(--amber); }
.verdict.red { color: var(--red); }
.qualifier { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; padding-left: 18px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flag { font-size: 2rem; line-height: 1; }

.glance { margin: 0; display: grid; gap: 0; }
.glance div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.glance div:last-child { border-bottom: 0; }
.glance dt { color: var(--muted); }
.glance dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.doc-list li { display: grid; gap: 2px; justify-items: start; }

/* Country page */
section[id], article[id] { scroll-margin-top: 64px; }

.sector-card { margin-bottom: 20px; }
.verdict-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 0.5em; font-size: 0.95rem; }
.qualifier-inline { color: var(--muted); font-size: 0.85rem; }
.confidence { background: var(--subtle); border-radius: 6px; padding: 10px 14px; }
.tone-green { --tone: var(--green); }
.tone-amber { --tone: var(--amber); }
.tone-red { --tone: var(--red); }

.quote { margin: 0; }
.quote blockquote, .own-words blockquote { margin: 0 0 0.6em; padding-left: 14px; border-left: 3px solid var(--brand); font-size: 1rem; }
.notes { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 0.94rem; }

details { margin-top: 1em; border-top: 1px solid var(--line); padding-top: 0.6em; }
summary { cursor: pointer; font-weight: 600; color: var(--brand); }
summary:hover { color: var(--brand-dark); }
details[open] summary { margin-bottom: 0.6em; }
/* A heading straight after a collapsed section needs its own room and rule */
details + h3 { margin-top: 1.8em; padding-top: 1em; border-top: 1px solid var(--line); }

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--muted); font-size: 0.82rem; padding-bottom: 6px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-weight: 600; color: var(--muted); }
.numbers td, .numbers thead th { text-align: right; }
.numbers th[scope="row"] { text-align: left; }

.how-to-read { max-width: 820px; color: var(--muted); }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .guide-label, .chart .side-label { fill: var(--muted); font-size: 12px; font-weight: 600; font-family: var(--font); }
.chart-narrow { display: none; }
.chart .guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.chart .band { fill: var(--tone); opacity: 0.16; }
.chart .bau { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 4; }
.chart .path { fill: none; stroke: var(--tone); stroke-width: 2.5; }
.chart .observed { fill: none; stroke: var(--ink); stroke-width: 2; }
.chart .promise { fill: var(--brand); stroke: var(--surface); stroke-width: 1.5; }
.chart .own { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.chart .benefit { fill: var(--benefit); }
.chart .harm { fill: var(--harm); }
.chart .whisker { stroke: var(--muted); stroke-width: 1.5; }
.chart .zero { stroke: var(--muted); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart .year:hover .benefit, .chart .year:hover .harm { opacity: 0.8; }

.legend { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--ink); }
.key-bau { border-top: 2px dashed var(--muted); }
.key-path { border-top-color: var(--tone); }
.key-promise, .key-own { width: 10px; height: 10px; border: 0; transform: rotate(45deg); background: var(--brand); }
.key-own { background: var(--surface); border: 2px solid var(--brand); }
.key-benefit, .key-harm { width: 12px; height: 12px; border: 0; border-radius: 3px; background: var(--benefit); }
.key-harm { background: var(--harm); }
.key-whisker { width: 0; height: 14px; border: 0; border-left: 1.5px solid var(--muted); }

/* Each drawing chooses its size by its own width, not the screen's, so a
   chart in a narrow column keeps legible labels. */
.fallback-sector { container-type: inline-size; margin-top: 18px; }
.fallback-sector h4 { margin: 14px 0 4px; }
@container (max-width: 560px) {
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
}
.numbers .total th, .numbers .total td { font-weight: 600; border-top: 1px solid var(--line); }

.own-words { list-style: none; padding: 0; display: grid; gap: 12px; }
.figure-line { margin-bottom: 0.4em; }
.plain-list { padding-left: 18px; display: grid; gap: 6px; }
.sources { padding-left: 20px; overflow-wrap: anywhere; }

.pager { display: flex; justify-content: space-between; gap: 16px; padding: 32px 0; font-weight: 600; }

/* Learn */
.toc { position: sticky; top: 16px; }
.toc ol { padding-left: 20px; margin: 0 0 1em; display: grid; gap: 8px; font-size: 0.92rem; }
/* Panels that open and close: one question or term at a time */
.accordion-tools { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.link-button { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-button:hover { color: var(--brand-dark); }
details.explainer, details.term-card { margin: 0 0 12px; padding: 0; border: 1px solid var(--line); }
details.explainer > summary, details.term-card > summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); font-weight: 400; }
details.explainer > summary::-webkit-details-marker, details.term-card > summary::-webkit-details-marker { display: none; }
details.explainer > summary::after, details.term-card > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); margin-top: -4px; }
details.explainer[open] > summary::after, details.term-card[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
details.explainer > summary:hover h2, details.term-card > summary:hover .term-name { color: var(--brand); }
details.explainer > summary h2 { margin: 0; font-size: 1.12rem; }
details.explainer[open] > summary, details.term-card[open] > summary { border-bottom: 1px solid var(--line); }
.accordion-body { padding: 16px 22px 8px; }
details.term-card > summary { align-items: flex-start; }
details.term-card > summary .term-name { display: block; font-weight: 700; font-size: 1.02rem; }
details.term-card > summary .short { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 2px; }
details.term-card > summary > span:first-child { flex: 1; }
details.term-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
details.term-card > summary .term-name, details.term-card > summary .short { grid-column: 1; }
details.term-card > summary::after { grid-column: 2; grid-row: 1; margin-top: 6px; }
sup.cite a { text-decoration: none; font-weight: 700; padding: 0 1px; }
sup.cite-next::before { content: ","; }
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.term-card { scroll-margin-top: 16px; }

.term-card:target { outline: 3px solid var(--brand); }
a.term { color: inherit; text-decoration: underline dotted var(--brand); text-decoration-thickness: 2px; }
a.term:hover { color: var(--brand); }

.steps { padding-left: 20px; display: grid; gap: 12px; }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* About: one card per section, two to a row */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 28px 0 8px; align-items: stretch; }
.about-grid > section { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--subtle); }
.about-grid > section h2 { margin-top: 0; font-size: 1.2rem; }
.about-grid > section > :last-child { margin-bottom: 0; }
.about-grid.compact { padding: 4px 0 0; gap: 14px; }
.about-grid.compact > section { border: 1px solid var(--line); border-radius: 6px; background: var(--subtle); padding: 16px 18px; }
.about-grid.compact > section h2 { font-size: 1.02rem; }

/* Policy news */
.news-list { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 1100px; }
.news-item h3 { margin: 0.2em 0 0.4em; font-size: 1.05rem; }
.news-item h3 a { color: var(--ink); }
.news-item h3 a:hover { color: var(--brand); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.news-date { font-weight: 600; color: var(--ink); }
.flag-note { background: var(--amber-soft); border-left: 4px solid var(--amber); border-radius: 6px; padding: 8px 12px; }

/* News cards: the article's own preview image, linked and credited; a tile
   with the topic shows where there is none, or where a publisher blocks it */
.news-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.news-thumb, .mini-thumb { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--brand-soft); aspect-ratio: 16 / 10; }
.mini-thumb { aspect-ratio: 4 / 3; }
.news-thumb img, .mini-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The cover when an article has no photo: our own topic illustration */
.thumb-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; color: var(--brand); background: radial-gradient(circle at 1px 1px, rgba(13, 122, 62, 0.12) 1px, transparent 0) 0 0 / 14px 14px, linear-gradient(135deg, #f1f8f3, #dcefe3); }
.thumb-cover span { font-size: 0.78rem; font-weight: 600; color: var(--brand-dark); }
.topic-icon { width: 46%; max-width: 72px; height: auto; }
.mini-thumb .topic-icon { width: 56%; }
.news-body h3 { margin: 0.25em 0 0.4em; font-size: 1.08rem; }
.news-body h3 a { color: var(--ink); }
.news-body h3 a:hover { color: var(--brand); }
.news-scope { font-weight: 600; color: var(--brand); }
.mini-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mini-news li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; }
.mini-news li div { display: grid; gap: 2px; }
.mini-news a { font-weight: 500; }
.more-link { margin: 14px 0 0; }

/* Log in and sign up */
.auth-wrap { padding: 48px 0 24px; }
.auth-card { max-width: 460px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: var(--surface); }
.auth-card h1 { font-size: 1.7rem; }
.google-button { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); border-color: var(--line); }
.google-button:hover { color: var(--ink); background: var(--subtle); border-color: var(--muted); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
#email-form { display: grid; gap: 6px; }
#email-form label { font-weight: 600; font-size: 0.92rem; margin-top: 8px; }
#email-form input[type="text"], #email-form input[type="email"], #email-form input[type="password"], .delete-form input { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
#email-form input:focus-visible, .delete-form input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
/* The emailed code, the second step of a password sign-in (auth.js) */
.code-form { display: grid; gap: 6px; }
.code-form[hidden] { display: none; }
.code-form h2 { font-size: 1.2rem; margin: 0; }
.code-form p { margin: 0 0 4px; }
.code-form label { font-weight: 600; font-size: 0.92rem; margin-top: 8px; }
.code-form input { width: 100%; font: inherit; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.3em; text-align: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.code-form input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.code-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px !important; }
.hint { margin: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 0.9rem !important; }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.button.wide { width: 100%; margin-top: 14px; }
.button:disabled { opacity: 0.6; cursor: wait; }
.form-message { min-height: 1.4em; margin: 12px 0 0; font-size: 0.92rem; color: var(--muted); }
.form-message.error { color: var(--red); }
.switch { margin: 20px 0 0; text-align: center; }
.notice-line { background: var(--brand-soft); border-left: 4px solid var(--brand); padding: 10px 14px; border-radius: 6px; }
/* Reviewing suggested news (news_review.html), for the site's admins only */
.review-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 24px; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.review-item h2 { font-size: 1.2rem; margin: 4px 0 8px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.review-actions form { margin: 0; }
.review-edit form { display: grid; gap: 6px; margin-top: 10px; }
.review-edit label { font-weight: 600; font-size: 0.92rem; }
.review-edit input, .review-edit textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.review-edit button { justify-self: start; margin-top: 6px; }
.review-warn { color: var(--red); }
.review-error { border-left-color: var(--red); }

/* Interests: tiles you tick, as at sign-up */
.interests fieldset { border: 0; padding: 0; margin: 28px 0 0; }
.interests legend { font-weight: 700; font-size: 1.15rem; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile-body { display: grid; gap: 6px; justify-items: start; height: 100%; padding: 18px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.topic-tiles .tile-body { justify-items: center; text-align: center; }
.topic-tiles .topic-icon { width: 56px; color: var(--brand); }
.tile:hover .tile-body { border-color: var(--brand); }
.tile input:checked + .tile-body { border-color: var(--brand); background: var(--brand-soft); }
.tile input:checked + .tile-body::after { content: "Chosen"; font-size: 0.75rem; font-weight: 700; color: var(--brand); }
.tile input:focus-visible + .tile-body { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Settings */
.layout-settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 28px; }
.settings-nav { position: sticky; top: 16px; display: grid; gap: 4px; padding: 14px; }
.settings-nav a { padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-weight: 500; }
.settings-nav a:hover { background: var(--brand-soft); color: var(--brand); }
.settings-body { display: grid; gap: 20px; }
.settings-body section h2 { margin-top: 0; }
.profile-row { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.profile-row p { margin: 0; }
.profile-name { font-weight: 700; font-size: 1.1rem; }
.danger-zone { margin-top: 18px; }
.danger-zone summary { color: var(--red); }
.delete-form { display: grid; gap: 8px; max-width: 360px; }
.button.danger { background: var(--red); border-color: var(--red); }
.button.danger:hover { background: #8f1c13; border-color: #8f1c13; }
.about-in-settings h2 + section h2, .about-in-settings section h2 { font-size: 1.15rem; }
.four-up { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* News: order and filters */
.news-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 12px; }
.view-switch { display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.view-switch a { padding: 6px 14px; border-radius: 6px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.view-switch a:hover { background: var(--brand-soft); }
.view-switch a[aria-current="page"] { background: var(--brand); color: #ffffff; }
.news-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.news-filter label { font-weight: 600; font-size: 0.9rem; }
.news-filter select { font: inherit; font-size: 0.92rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.news-filter .button { padding: 8px 16px; }

/* Ask */
.ask-form { display: grid; gap: 10px; margin-top: 2.2em; }
.ask-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); resize: vertical; }
.ask-form textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.ask-actions { display: flex; align-items: center; gap: 12px; margin: 0; }
.notice { margin-top: 2.2em; border-left: 4px solid var(--amber); }
.answer { margin-top: 20px; }
.answer .question { font-size: 1.2rem; margin-top: 0; }
.answer.withheld { border-left: 4px solid var(--amber); }
.background { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 6px; }
.background .eyebrow { color: var(--muted); }

/* The chat, laid out like a chat app: your chats down the side, the
   conversation in a centred column, the message box pinned at the bottom.
   Only the conversation scrolls. */
body.chat-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.chat-page main { flex: 1; min-height: 0; display: flex; }
.chat-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.chat-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 12px; background: var(--subtle); border-right: 1px solid var(--line); }
.new-chat { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.chat-history { flex: 1; min-height: 0; overflow-y: auto; border: 0; margin: 0; padding: 0; }
.chat-history > summary { display: none; }
.chat-side-label { margin: 4px 10px 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chat-list a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.chat-list a:hover { background: #e9efeb; }
.chat-list a[aria-current="page"] { background: var(--brand-soft); font-weight: 600; }
.chat-none { padding: 0 10px; }
.chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-side-foot { margin: 0 10px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; border-bottom: 1px solid var(--line); }
.chat-name { font-size: 1.05rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.chat-column { max-width: 780px; margin: 0 auto; padding: 28px 28px 32px; }
.chat-empty { padding: 7vh 0 12px; }
.chat-empty h1 { font-size: 1.9rem; }
.example-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.example-list a { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 0.93rem; }
.example-list a:hover { border-color: var(--brand); background: var(--brand-soft); }
.doc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.msg { min-width: 0; }
.msg p:last-child { margin-bottom: 0; }
.msg.mine { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 16px; background: var(--brand-soft); border: 1px solid #cfe6d8; }
.msg.reply { justify-self: stretch; }
.msg.reply.withheld { border-left: 4px solid var(--amber); padding-left: 16px; }
.msg.reply.pending { color: var(--muted); font-style: italic; }
.msg-meta { margin-top: 10px; }
.msg-files { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; }
.msg .source-group { margin: 14px 0 4px; }
.msg .flag-note { margin: 10px 0; }
.source-quote { display: block; margin: 2px 0 6px; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.chat-bar form button { white-space: nowrap; }
.chip-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 0.85rem; color: var(--ink); }
.chip-file svg { flex: none; color: var(--brand); }
.chip-file .chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-file button { border: 0; background: none; padding: 0 2px; font: inherit; font-size: 1.05rem; line-height: 1; color: var(--muted); cursor: pointer; }
.chip-file button:hover { color: var(--red); }
.composer-wrap { width: 100%; max-width: 828px; margin: 0 auto; padding: 8px 28px 14px; box-sizing: border-box; }
.composer { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px 8px; background: var(--surface); box-shadow: 0 2px 8px rgba(24, 32, 27, 0.06); }
.composer:focus-within { border-color: var(--brand); }
.composer.dropping { border-color: var(--brand); background: var(--brand-soft); }
.composer textarea { border: 0; font: inherit; resize: none; min-height: 28px; max-height: 220px; padding: 6px 4px; background: transparent; color: var(--ink); line-height: 1.5; }
.composer textarea:focus-visible { outline: none; }
.attach-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.attach-chips:empty { display: none; }
.composer-row { display: flex; align-items: center; gap: 10px; }
.attach { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); cursor: pointer; }
.attach:hover, .attach:focus-within { background: var(--subtle); color: var(--ink); }
.attach:focus-within { outline: 3px solid var(--brand); outline-offset: 1px; }
.composer-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send { flex: none; }
.chat-message { margin: 8px 0 0; }
.chat-message:empty { display: none; }
.chat-message.error { color: var(--red); }
.chat-note { margin: 8px 4px 0; }

/* Footer */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--subtle); color: var(--muted); padding: 28px 0; font-size: 0.9rem; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .chat-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .chat-side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-history { flex: 1 1 100%; order: 3; max-height: 40vh; }
  .chat-history > summary { display: block; cursor: pointer; padding: 6px 0; }
  .chat-side-foot { display: none; }
  .chat-bar, .chat-column, .composer-wrap { padding-left: 16px; padding-right: 16px; }
  /* On a phone the page scrolls as a whole, as chat apps do there, and the
     message box stays at the bottom of the screen. */
  body.chat-page { height: auto; overflow: visible; display: block; }
  body.chat-page main, .chat-app, .chat-main { display: block; }
  .chat-scroll { overflow: visible; }
  .composer-wrap { position: sticky; bottom: 0; background: var(--bg); padding-top: 10px; box-shadow: 0 -10px 14px var(--bg); }
  .example-list { grid-template-columns: minmax(0, 1fr); }
  .composer-hint { display: none; }
  .layout-settings { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; }
  .landing-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .three-up { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .layout, .layout-learn { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .side { margin-top: 0; }
  .glossary { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}

@media (max-width: 640px) {
  .news-card { grid-template-columns: minmax(0, 1fr); }
  .scorecard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .scorecard, .scorecard tbody, .scorecard tr, .scorecard th, .scorecard td { display: block; width: 100%; }
  .scorecard tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .scorecard th[scope="row"], .scorecard td { border: 0; padding: 3px 0; }
  .scorecard td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; }
  .scorecard td::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; }
  .scorecard td .qualifier { grid-column: 2; }
}

@media (max-width: 520px) {
  .hero { padding: 30px 0 26px; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
}

/* A chat's menu (3 Nov 2026): rename, archive or restore, delete. The three
   dots show on hover or focus beside a chat, always on touch screens and in
   the open chat's bar. */
.chat-item { position: relative; }
.chat-item > a { padding-right: 38px; }
/* Not the site's fold-out sections: no rule above, no spacing. */
.chat-menu { position: absolute; top: 7px; right: 4px; margin: 0; padding: 0; border: 0; }
.chat-menu[open] > summary { margin-bottom: 0; }
.chat-bar .chat-menu { position: relative; top: auto; right: auto; margin-left: auto; }
.chat-bar .pill.tag { flex: none; }
.chat-menu > summary { list-style: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--muted); opacity: 0; }
.chat-menu > summary::-webkit-details-marker { display: none; }
.chat-item:hover .chat-menu > summary, .chat-item:focus-within .chat-menu > summary, .chat-menu[open] > summary, .chat-item a[aria-current="page"] + .chat-menu > summary, .chat-bar .chat-menu > summary { opacity: 1; }
.chat-menu > summary:hover, .chat-menu[open] > summary { background: #e1e9e4; color: var(--ink); }
.chat-menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 248px; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(24, 32, 27, 0.16); }
.chat-rename { display: grid; gap: 4px; padding: 2px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.chat-rename-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.chat-rename input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 0.9rem; }
.chat-rename .button { padding: 6px 12px; font-size: 0.88rem; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.92rem; color: var(--ink); text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--subtle); }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover { background: var(--red-soft); }
.chat-archived { margin: 16px 0 0; padding: 0; border: 0; }
.chat-archived[open] > summary { margin-bottom: 6px; }
.chat-archived > summary { cursor: pointer; margin: 4px 10px 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.chat-count { margin-left: 4px; font-weight: 500; }
@media (hover: none) { .chat-menu > summary { opacity: 1; } }

/* The trained model's part in an answer (3 Nov 2026): its labels under each
   sentence it marked, and a folded list of all it found for the question. */
.model-labels { display: block; margin-top: 2px; font-size: 0.85rem; font-style: italic; }
.model-found { margin: 16px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); }
.model-found > summary { list-style: none; padding: 10px 14px; font-size: 0.92rem; color: var(--brand); }
.model-found > summary::-webkit-details-marker { display: none; }
.model-found > summary::before { content: "+"; display: inline-block; width: 1.1em; font-weight: 700; }
.model-found[open] > summary::before { content: "\2212"; }
.model-found[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.model-found > p { margin: 10px 14px 0; }
.found-list { list-style: none; margin: 0; padding: 6px 14px 12px; display: grid; gap: 10px; font-size: 0.92rem; }
.found-where { display: block; font-weight: 600; }
.found-where .pill { margin-left: 6px; }

/* Home (3 Nov 2026), above and below the fold. Above: the title, then the
   verdicts and the counts side by side, ending together. Below a rule:
   full-width sections, each opening with its own heading, so no box is cut
   in half by the bottom of the screen. */
.home-top { padding-top: 32px; }
.home-head .section-intro { max-width: 780px; margin-bottom: 4px; }
.home-fold { margin-top: 12px; }
.home-fold .scorecard { margin-top: 0; }
.home-fold .scorecard th[scope="row"], .home-fold .scorecard td { padding: 11px 12px 11px 0; }
.home-below { margin-top: 40px; border-top: 1px solid var(--line); }
.home-section { padding-top: 32px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.home-section-head h2 { margin: 0; font-size: 1.35rem; }
.home-section-head a { font-weight: 600; }
.news-cards, .promise-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.news-cards li { display: grid; gap: 8px; align-content: start; }
.news-card-title { font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.news-card-title:hover { color: var(--brand); text-decoration: underline; }
.promise-cards { gap: 16px; }
.promise-cards li { display: grid; gap: 6px; justify-items: start; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--subtle); }
@media (max-width: 1000px) { .news-cards, .promise-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news-cards, .promise-cards { grid-template-columns: minmax(0, 1fr); } }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 14px; }
.footer-links a { color: var(--brand); font-weight: 600; }

/* ------------------------------------------------------------------------
   The country page since 4 Nov 2026: one sector at a time, chosen by a
   switch, and one chart for emissions and damage (static/country-chart.js).
   ------------------------------------------------------------------------ */
.s-transport { --s: var(--transport); }
.s-agriculture { --s: var(--farming); }
.s-KEN { --s: var(--kenya); }
.s-UGA { --s: var(--uganda); }
.s-TZA { --s: var(--tanzania); }
.s-RWA { --s: var(--rwanda); }

/* The Compare page */
.caveat { max-width: 900px; margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--subtle); border-radius: 0 6px 6px 0; }
.compare-links { list-style: none; padding: 0; margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; }

.hero-country { padding: 30px 0 24px; }
.hero-verdicts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.hero-verdicts li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hero-sector { font-weight: 700; }

.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 26px 0 18px; }
.section-head h2 { margin: 0; }

/* A row of buttons where one is chosen */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--subtle); }
.segmented button { font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(24 32 27 / 0.08); }
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }
.sector-switch button { font-size: 0.95rem; padding: 8px 20px; }

.sector-view .layout > .side { margin-top: 0; }
.verdicts { display: grid; gap: 20px; }
.verdicts .sector-card { margin-bottom: 0; }
/* The switch shows the chosen sector's text; without JavaScript, both show. */
.has-chart[data-show="transport"] [data-sector="agriculture"],
.has-chart[data-show="agriculture"] [data-sector="transport"] { display: none; }
.has-chart[data-show="both"] .verdicts { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.has-chart:not([data-show="both"]) .method-sector h4 { display: none; }

.chart-figure { margin: 20px 0 0; }
.chart-figure figcaption h3 { margin-bottom: 0.15em; }
.chart-figure figcaption p { margin: 0; }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 14px 0 6px; }
.control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.control-label { float: left; padding: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.layers label { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 0.86rem; cursor: pointer; }
.layers input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; }
.layers label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.to-year { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.to-year select { font: inherit; color: var(--ink); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.chart-box { position: relative; margin-top: 8px; }
.country-chart { overflow: visible; touch-action: pan-y; }
.country-chart:focus { outline: none; }
.country-chart:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 4px; }

.chart-tip { position: absolute; z-index: 3; pointer-events: none; max-width: min(360px, 92%); padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(24 32 27 / 0.12); font-size: 0.8rem; line-height: 1.4; }
.chart-tip[hidden] { display: none; }
.chart-tip .tip-year { margin: 0 0 4px; font-weight: 700; }
.chart-tip table { width: auto; font-size: 0.8rem; }
.chart-tip th, .chart-tip td { padding: 2px 10px 2px 0; border: 0; white-space: nowrap; text-align: left; }
.chart-tip th[scope="row"] { color: var(--muted); font-weight: 500; }
.chart-tip thead th { color: var(--ink); font-weight: 700; }
.chart-tip thead th::before, .chart-tip .tip-series::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: var(--s); }
/* Several series: wider, each figure over its range (country-chart.js fillTip) */
.chart-tip.is-multi { max-width: min(560px, 96%); }
.chart-tip .tip-second { color: var(--muted); }
.chart-tip .tip-series { margin: 8px 0 2px; font-weight: 700; }

/* Marks the interactive chart adds to the server's drawings */
.chart .panel-title { fill: var(--ink); font-size: 12.5px; font-weight: 700; font-family: var(--font); }
.chart .halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart .bau-band { fill: var(--muted); opacity: 0.08; }
.chart .gap-harm { fill: url(#hatch-harm); }
.chart .gap-benefit { fill: url(#hatch-benefit); }
.chart .hatch-ground-harm { fill: var(--harm); opacity: 0.1; }
.chart .hatch-ground-benefit { fill: var(--benefit); opacity: 0.1; }
.chart .hatch-line-harm, .chart .hatch-line-benefit { stroke-width: 1.7; opacity: 0.75; }
.chart .hatch-line-harm { stroke: var(--harm); }
.chart .hatch-line-benefit { stroke: var(--benefit); }
.chart .fit-bau, .chart .fit-path { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.chart .fit-bau { stroke: var(--muted); opacity: 0.22; }
.chart .fit-path { stroke: var(--tone); opacity: 0.22; }
.chart .promise-line { fill: none; stroke: var(--brand); stroke-width: 2.25; stroke-dasharray: 0.5 4.5; stroke-linecap: round; }
.chart .changepoint { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.chart .side-note { fill: var(--muted); font-size: 11.5px; font-style: italic; font-family: var(--font); }
.chart .direct-label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .benefit-line, .chart .harm-line { fill: none; stroke-width: 2; }
.chart .benefit-line { stroke: var(--benefit); }
.chart .harm-line { stroke: var(--harm); }
.chart .benefit-point { fill: var(--benefit); }
.chart .harm-point { fill: var(--harm); }
.chart .benefit-band { fill: var(--benefit); opacity: 0.14; }
.chart .harm-band { fill: var(--harm); opacity: 0.14; }
.chart .crosshair { stroke: var(--ink); stroke-width: 1; opacity: 0.45; }
.chart .focus-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.chart .path-dot { fill: var(--tone); }
.chart .bau-dot { fill: var(--muted); }
.chart .promise-dot { fill: var(--brand); }
.chart .benefit-dot { fill: var(--benefit); }
.chart .harm-dot { fill: var(--harm); }
.chart .hit { cursor: crosshair; }

/* Both sectors: colour says which sector, the line's pattern which line */
.chart.is-both .observed { stroke: var(--s); stroke-width: 2.25; }
.chart.is-both .path { stroke: var(--s); stroke-width: 2; stroke-dasharray: 7 4; }
.chart.is-both .bau { stroke: var(--s); stroke-width: 2; stroke-dasharray: 0.5 4.5; stroke-linecap: round; }
.chart.is-both .band { fill: var(--s); opacity: 0.12; }
.chart.is-both .bau-band { fill: var(--s); opacity: 0.06; }
.chart.is-both .promise { fill: var(--s); }
.chart.is-both .own { stroke: var(--s); }
.chart.is-both .benefit, .chart.is-both .harm, .chart.is-both .benefit-point, .chart.is-both .harm-point { fill: var(--s); }
.chart.is-both .benefit-line, .chart.is-both .harm-line { stroke: var(--s); }
.chart.is-both .benefit-band, .chart.is-both .harm-band { fill: var(--s); opacity: 0.12; }
.chart.is-both .focus-dot { fill: var(--s); }

/* Legend keys for the interactive chart */
.key-band, .key-band-neutral, .key-gap-harm, .key-gap-benefit { width: 16px; height: 10px; border: 0; border-radius: 2px; }
.key-band { background: color-mix(in srgb, var(--tone) 22%, transparent); }
.key-band-neutral { background: color-mix(in srgb, var(--muted) 20%, transparent); }
.key-gap-harm { background: repeating-linear-gradient(-45deg, var(--harm) 0 1.5px, color-mix(in srgb, var(--harm) 12%, transparent) 1.5px 4.5px); }
.key-gap-benefit { background: repeating-linear-gradient(45deg, var(--benefit) 0 1.5px, color-mix(in srgb, var(--benefit) 12%, transparent) 1.5px 4.5px); }
.key-fit-bau, .key-fit-path { width: 22px; height: 9px; border: 0; border-radius: 5px; }
.key-fit-bau { background: color-mix(in srgb, var(--muted) 26%, transparent); }
.key-fit-path { background: color-mix(in srgb, var(--tone) 26%, transparent); }
.key-promise-line { position: relative; width: 26px; border-top: 2.5px dotted var(--brand); }
.key-promise-line::after { content: ""; position: absolute; right: -3px; top: -6.5px; width: 8px; height: 8px; background: var(--brand); transform: rotate(45deg); }
.key-benefit-line { border-top-color: var(--benefit); }
.key-harm-line { border-top-color: var(--harm); }
.key-sector { width: 12px; height: 12px; border: 0; border-radius: 3px; background: var(--s); }
.key-path-dashed { border-top: 2px dashed var(--ink); }
.key-bau-dotted { border-top: 2.5px dotted var(--ink); }
.key-promise-plain { width: 9px; height: 9px; border: 0; transform: rotate(45deg); background: var(--ink); }
.key-up, .key-down { width: 10px; height: 12px; border: 0; background: var(--muted); }
.key-up { border-radius: 3px 3px 0 0; }
.key-down { border-radius: 0 0 3px 3px; }
.legend.is-both .s-transport, .legend.is-both .s-agriculture { color: var(--ink); font-weight: 600; }
.legend-group { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.legend-break { flex-basis: 100%; height: 0; }

.table-scroll { overflow-x: auto; }
.chart-numbers { font-size: 0.8rem; white-space: nowrap; }
.method h4 { margin: 0.8em 0 0.3em; font-size: 1rem; }
.method-sector p { max-width: 72ch; }
.own-words-fold .own-words { margin-top: 0.6em; }
.country-section { margin-top: 12px; }

/* The forecasting test on the Learn page */
.forecast-test { margin: 0.6em 0 1em; }
.forecast-test caption { line-height: 1.45; }
.forecast-test th[scope="row"] { font-weight: 500; }
.forecast-test .ours th, .forecast-test .ours td { font-weight: 700; background: var(--brand-soft); }
.factors { padding-left: 20px; display: grid; gap: 2px; }

/* On a phone the chart's controls stay compact, so the chart starts sooner. */
@media (max-width: 520px) {
  .chart-controls { gap: 8px 12px; }
  .control { gap: 4px 6px; }
  .control-label { width: 100%; }
  .segmented button { padding: 4px 9px; font-size: 0.8rem; }
  .sector-switch button { padding: 6px 14px; font-size: 0.9rem; }
  .layers label { margin-right: 4px; font-size: 0.8rem; }
  .to-year { font-size: 0.8rem; }
}

/* The admin area (admin.html, admin_accounts.html), for the site's admins
   only: counts as tiles and labelled bars, every number also in its table. */
.admin { padding-bottom: 48px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 22px 0 8px; border-bottom: 1px solid var(--line); }
.admin-tabs a { color: var(--ink); text-decoration: none; padding: 8px 0; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.admin-tabs a[aria-current="page"] { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.stat-tiles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat-tiles li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.85rem; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 40px; }
.admin-table { margin: 6px 0 18px; }
.admin-table .num { text-align: right; }
.admin-table th[scope="row"] { font-weight: 500; }
.admin-table thead th:first-child { text-align: left; }
.bar-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 9rem; }
.hbar { width: 6rem; height: 8px; flex: none; }
.hbar-track { fill: var(--subtle); }
.hbar-fill { fill: var(--brand); }
.accounts-table td, .accounts-table th { min-width: 7rem; }
.accounts-table th[scope="row"] { min-width: 13rem; }
.admin-delete summary { color: var(--red); font-weight: 600; }
.admin-delete form { display: grid; gap: 8px; margin-top: 8px; min-width: 15rem; }
.admin-delete label { font-size: 0.85rem; }
.admin-delete input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.button.danger { background: var(--red); border-color: var(--red); justify-self: start; }
.button.danger:hover { background: #8f1c13; border-color: #8f1c13; }

/* The dates under every chart: when the sources were checked, and the next check */
.chart-dates { margin: 4px 0 10px; }