/* Phone Receipts — high-minimal. One ink, one green, receipt paper. */
:root {
  color-scheme: light;
  --ground: #F3F3F0;
  --paper: #FFFFFF;
  --ink: #141414;
  --ink-2: #57574F;
  --ink-3: #8C8C84;
  --rule: #E1E1DB;
  --rule-2: #CBCBC3;
  --green: #0B7A4B;
  --green-2: #0B7A4B1A;
  --nd: #C9C9C1;
  --false: #B3261E;
  --mis: #8A5A00;
  --shadow: 0 1px 1px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.07);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0E0F0E; --paper: #181917; --ink: #ECECE6; --ink-2: #A8A8A0; --ink-3: #74746D;
    --rule: #262724; --rule-2: #393A36; --green: #4CC38A; --green-2: #4CC38A22; --nd: #43443F;
    --false: #F2877F; --mis: #E3B454; --shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0E0F0E; --paper: #181917; --ink: #ECECE6; --ink-2: #A8A8A0; --ink-3: #74746D;
  --rule: #262724; --rule-2: #393A36; --green: #4CC38A; --green-2: #4CC38A22; --nd: #43443F;
  --false: #F2877F; --mis: #E3B454; --shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* filters toggle `hidden`; component display rules must not override it */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* hover styles sit behind (hover: hover) throughout: touch screens keep :hover on the last tapped element, so it would look stuck */
@media (hover: hover) { a:hover { color: var(--green); } }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.025em; }
p { margin: 0; }
/* side gutters clear the notch on a phone held sideways (viewport-fit=cover); 20px everywhere else */
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.num { font-variant-numeric: tabular-nums; }

/* Bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--rule); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.mark { width: 22px; height: 22px; }
.mark-s { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.mark-g { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.nav { display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); overflow-x: auto; scrollbar-width: none; }
.nav a { text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) { .nav { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font: 500 14px var(--sans); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
@media (hover: hover) { .btn:hover { border-color: var(--ink); color: var(--ink); } }
.btn-primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
@media (hover: hover) { .btn-primary:hover { background: var(--green); border-color: var(--green); color: #fff; } }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 72px 48px; }
.eyebrow, .label { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.04em; margin-top: 18px; }
/* phones: the eyebrow is two lines, so "sources linked throughout" takes the second one whole (no separator left dangling) with room between them */
@media (max-width: 700px) { .hero .eyebrow { line-height: 1.6; } .hero .eb-sep { display: none; } .hero .eb-end { display: block; } }
.lede { font-size: 18px; color: var(--ink-2); margin-top: 22px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-fig { margin: 0; display: grid; justify-items: center; gap: 16px; }
.waffle-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.waffle-tabs button { font: 500 12px var(--mono); padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--ink-3); cursor: pointer; }
@media (hover: hover) { .waffle-tabs button:hover { color: var(--ink); } }
.waffle-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--rule-2); background: var(--paper); }
.waffle-phone { padding: 14px 12px 18px; border: 2px solid var(--ink); border-radius: 30px; background: var(--paper); }
.waffle { display: grid; grid-template-columns: repeat(10, 14px); gap: 4px; }
.waffle i { position: relative; width: 14px; height: 14px; border-radius: 3px; background: var(--ink); transition: opacity .35s ease; transition-delay: calc(var(--i) * 2ms); }
/* the recycled and not-disclosed colours are layers that fade in and out (opacity only), so a brand change never animates background */
.waffle i::before, .waffle i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .35s ease; transition-delay: inherit; }
.waffle i::before { background: var(--nd); }
.waffle i::after { background: var(--green); }
.waffle i.nd::before, .waffle i.rec::after { opacity: 1; }
.waffle i.empty { background: transparent; }
.waffle-cap { text-align: center; max-width: 30em; font-size: 14px; color: var(--ink-2); min-height: 3.2em; }
.waffle-cap strong { color: var(--ink); font-weight: 600; }
.key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12px; color: var(--ink-2); }
.key li { display: flex; align-items: center; gap: 7px; }
.k { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.k-rec { background: var(--green); } .k-new { background: var(--ink); } .k-nd { background: var(--nd); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 44px 32px; } }
@media (max-width: 420px) { .waffle { grid-template-columns: repeat(10, 12px); gap: 3px; } .waffle i { width: 12px; height: 12px; } }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 22px 20px 20px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--rule); }
.stat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--ink-2); }
.stat a { font-size: 11px; color: var(--ink-3); margin-left: 4px; }
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--rule); } }

/* Sections */
.sec { padding-block: 96px 8px; }
.sec-head { max-width: 46em; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; margin-top: 14px; }
.sub { color: var(--ink-2); margin-top: 12px; max-width: 42em; }
h3 { font-size: 20px; line-height: 1.25; }
.h3-gap { margin-top: 64px; margin-bottom: 16px; }
.fine { font-size: 12px; color: var(--ink-3); margin-top: 20px; max-width: 60em; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pickers */
.pickers { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr; gap: 12px; margin-bottom: 28px; }
.picker label { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.picker select, .picker input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 15px var(--sans); }
@media (hover: hover) { .picker select:hover, .picker input:hover { border-color: var(--ink-3); } }
.picker-vs select { border-style: dashed; }
.search { position: relative; }
.results { position: absolute; z-index: 5; left: 0; right: 0; top: 48px; margin: 0; padding: 4px; list-style: none; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; }
.results li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.results li span { color: var(--ink-3); font: 12px var(--mono); }
.results li[aria-selected="true"] { background: var(--ground); }
@media (hover: hover) { .results li:hover { background: var(--ground); } }
@media (max-width: 820px) { .pickers { grid-template-columns: 1fr 1fr; } .picker:first-child { grid-column: 1 / -1; } }

/* Receipts */
.receipts { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.receipt {
  --tooth: 7px;
  width: 360px; max-width: 100%; background: var(--paper); color: var(--ink);
  font: 400 12.5px/1.5 var(--mono); padding: 26px 22px 34px;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) + 1px) no-repeat;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) + 1px) no-repeat;
}
.receipt.printing .pl { animation: print-line .32s cubic-bezier(.25,.8,.3,1) both; animation-delay: var(--pd, 0ms); }
@keyframes print-line { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.r-head { text-align: center; }
.r-logo { width: 26px; height: 26px; margin: 0 auto 8px; display: block; }
.r-brand { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.r-model { font: 600 20px/1.2 var(--sans); letter-spacing: -0.02em; margin-top: 4px; }
.r-meta { color: var(--ink-3); margin-top: 4px; }
.r-rule { border: 0; border-top: 1px dashed var(--rule-2); margin: 14px 0; }
.r-cols { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--ink-3); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.r-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; min-height: 38px; padding: 3px 0; }
.r-line .n { font-weight: 500; }
.r-line .p { display: block; color: var(--ink-3); font-size: 11px; line-height: 1.35; }.r-line .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-line.rec .v { color: var(--green); font-weight: 500; }
.r-line.rec .n::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; transform: translateY(-1px); }
.r-line.nd .v { color: var(--ink-3); }
.r-line.none .v { color: var(--ink-3); }
.r-line.na .n, .r-line.na .v { color: var(--ink-2); }   /* dimmed by colour, not opacity, so its small part text keeps full --ink-3 contrast */
.r-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 2px 0; }
.r-kv > span:first-child { white-space: nowrap; }   /* the label keeps its line ("Smelters & refiners"); a long value wraps beside it instead */
.r-kv .v { text-align: right; font-variant-numeric: tabular-nums; text-wrap: balance; }   /* a value that wraps splits evenly, never leaving one word on its last line */
.r-kv .v.nd { color: var(--ink-3); letter-spacing: .06em; font-size: 11px; }
.r-total { display: grid; grid-template-columns: 1fr auto; font: 600 15px var(--mono); padding: 4px 0; }
.r-total .v.rec { color: var(--green); }
.r-total .v.nd { color: var(--ink-3); font-size: 12px; letter-spacing: .06em; align-self: center; }
.r-note { color: var(--ink-2); font-size: 11px; margin-top: 6px; line-height: 1.45; }
.r-carbon { display: flex; height: 8px; margin: 8px 0 6px; gap: 2px; }
.r-carbon span { background: var(--ink); border-radius: 1px; }
.r-carbon span:nth-child(2) { background: var(--ink-2); } .r-carbon span:nth-child(3) { background: var(--ink-3); } .r-carbon span:nth-child(4) { background: var(--rule-2); }
.r-carbon-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--ink-3); }
.r-you { margin-top: 10px; padding: 10px 12px; background: var(--green-2); border-radius: 6px; color: var(--ink); font-size: 11.5px; line-height: 1.5; }
.r-bar { height: 34px; margin-top: 18px; background: repeating-linear-gradient(90deg, var(--ink) 0 var(--a), transparent var(--a) var(--b)); opacity: .85; }
.r-foot { text-align: center; color: var(--ink-3); font-size: 10.5px; margin-top: 8px; }
.r-src { margin-top: 10px; font-size: 10.5px; }
.r-src summary { cursor: pointer; color: var(--ink-3); list-style: none; }
.r-src summary::-webkit-details-marker { display: none; }
.r-src ol { margin: 6px 0 0; padding-left: 16px; }
.r-src li { margin: 3px 0; overflow-wrap: anywhere; }
.r-diff { color: var(--green); font-size: 10px; margin-left: 4px; }
/* the plain-language receipt: five question headings; each material row answers on the right with a grey line under it saying which part
   the figure is for; answer rows (label, short answer, detail under); stacked rows for longer answers; the carbon takeaway and key swatches */
.receipt .r-q { font: 600 14px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; text-wrap: balance; }
.r-cols { text-transform: none; letter-spacing: .02em; font-size: 11px; }
.r-cols .rec-h::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; transform: translateY(-1px); }
.receipt .r-line { min-height: 0; row-gap: 1px; padding: 4px 0; }
.receipt .r-line > div:first-child { display: contents; }
.receipt .r-line .n { grid-column: 1; grid-row: 1; } .receipt .r-line .v { grid-column: 2; grid-row: 1; } .receipt .r-line .p { grid-column: 1 / -1; grid-row: 2; }
.r-line.nd .v { letter-spacing: 0; font-size: inherit; } .r-line.brandwide .v { color: var(--ink-3); }   /* (not .co: that class belongs to the hero's company grid) */
.receipt .r-kv.r-ans { grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; row-gap: 1px; align-items: baseline; padding: 3px 0; }
.r-ans > span:first-child { white-space: normal; text-wrap: balance; }   /* a label that wraps splits evenly ("Names the metal plants / its suppliers use") */
.r-ans > .v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-ans > .v.raw { white-space: normal; text-wrap: balance; }   /* a value with no plain wording yet prints as it is, and may be long */
.r-ans > .v.nd { color: var(--ink-3); letter-spacing: 0; font-size: inherit; }
.r-ans > .d, .r-stack > .d { grid-column: 1 / -1; color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.receipt .r-kv.r-stack { grid-template-columns: minmax(0,1fr); gap: 1px; margin-top: 4px; } .r-stack > .v { text-align: left; color: var(--ink-2); text-wrap: pretty; }
.r-total { font: 600 14px var(--mono); } .r-total .v.nd { font: 400 12px var(--mono); letter-spacing: 0; }
.r-sub { color: var(--ink-2); font-size: 11.5px; line-height: 1.45; margin: 4px 0 0; text-wrap: pretty; }
.r-lead { color: var(--ink-3); font-size: 11px; line-height: 1.45; margin: -2px 0 8px; }
.r-take { color: var(--ink); font-size: 11.5px; line-height: 1.45; margin: 4px 0 0; }
.r-carbon-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 1px; background: var(--ink); }
.r-carbon-key span:nth-child(2)::before { background: var(--ink-2); } .r-carbon-key span:nth-child(3)::before { background: var(--ink-3); } .r-carbon-key span:nth-child(4)::before { background: var(--rule-2); }
.r-who { margin: 0 0 7px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } .r-who b { color: var(--ink); font-weight: 600; }
.r-close { color: var(--ink-3); font-size: 11px; margin: 0 0 2px; text-wrap: pretty; }   /* (pretty: no word left alone on its last line) */
.r-sc-no .v { color: var(--ink-3); }
.r-line.rec .p { color: var(--ink-2); }   /* on a recycled row the line under it limits the figure ("Only in: battery"), so it reads a step stronger */
.r-line.rec .p .lead { color: var(--ink); font-weight: 500; }
.r-code { margin-top: 18px; }   /* the barcode's wrapper; its space above is here, not inline, as lining receipts up clears inline margins (not .r-bar: an older rule) */
.receipt .v.has-def { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }   /* every answer with a definition, grey or green */
@media (max-width: 700px) {
  .r-sub, .r-take, .r-lead, .r-close, .r-ans > .d, .r-stack > .d { font-size: 12.5px; }
  .receipt .r-q { font-size: 15.5px; }
  .r-who, .r-stack > .v { font-size: 13px; }
  .r-cols { font-size: 12px; }
}
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.share-msg { font-size: 13px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .receipt.printing .pl { animation: none; } .waffle i { transition: none; } html { scroll-behavior: auto; } }

/* Disclosure matrix */
.matrix { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 13px; }
.matrix th, .matrix td { padding: 12px 8px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.matrix thead th { font: 500 11px/1.3 var(--sans); color: var(--ink-2); vertical-align: bottom; width: 7%; }
.matrix thead th:first-child, .matrix td:first-child { text-align: left; width: 12%; }
.matrix td:first-child { font-weight: 600; font-size: 15px; }
.matrix .score { text-align: left; width: 16%; }
.matrix .score-in { display: flex; align-items: center; gap: 10px; }
/* one scale for every bar: the score takes a fixed width that fits "7.5/10", so each track starts at the same point and is the same length */
.matrix .score b { font: 600 15px var(--mono); flex: none; width: 4em; }
.matrix .track { flex: 1; min-width: 48px; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.matrix .track i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.matrix tr.note td { border-bottom: 1px solid var(--rule); padding-top: 0; text-align: left; color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.matrix tbody tr.row td { border-bottom: 0; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.dot-1 { background: var(--ink); }
.dot-h { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dot-0 { box-shadow: inset 0 0 0 1.5px var(--ink-3); }   /* the only sign of "not published", and a button: a ring at 3:1 or more in both themes */
.key-inline { justify-content: flex-start; margin-top: 16px; }

.cobalt { margin-top: 64px; }
.cobalt-row { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.co { text-align: center; }
.co-cell { aspect-ratio: 1; max-width: 100%; border-radius: 12px; display: grid; place-items: center; font: 600 22px var(--mono); letter-spacing: -0.02em; border: 1px solid var(--rule); background: var(--paper); }
.co-cell.rec { background: var(--green); color: #fff; border-color: var(--green); }
.co-cell.nd { color: var(--ink-3); font-size: 11px; letter-spacing: .06em; font-weight: 500; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--rule) 6px 7px), var(--paper); }
.co b { display: block; font-size: 13px; margin-top: 8px; font-weight: 600; }
.co span { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 760px) { .cobalt-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Trend */
.trend-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.trend-controls button { font: 500 12px var(--mono); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.trend-controls button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.trend-controls button:disabled { opacity: .45; cursor: default; text-decoration: line-through; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid line { stroke: var(--rule); }
.chart .axis text { fill: var(--ink-2); font: 11px var(--mono); }   /* --ink-2: the section glow behind the chart lifts the ground, and --ink-3 fell just under 4.5:1 there */
.chart .ln { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .5; transition: opacity .2s, stroke .2s; }
.chart .pt { fill: var(--paper); stroke: var(--ink-3); stroke-width: 2; opacity: .6; }
.chart .lbl { fill: var(--ink-2); font: 500 12px var(--sans); }
.chart g.on .ln { stroke: var(--green); opacity: 1; stroke-width: 2.5; }
.chart g.on .pt { stroke: var(--green); opacity: 1; }
.chart g.on .lbl { fill: var(--ink); font-weight: 600; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .floor { fill: none; stroke: var(--ink-3); stroke-dasharray: 2 3; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--ground); font: 12px/1.4 var(--sans); padding: 8px 10px; border-radius: 8px; max-width: 240px; transform: translate(-50%, calc(-100% - 12px)); }
.never { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.never b { color: var(--ink); }
/* the table sits under its heading like the other tables; fixed layout gives the five years equal columns, so the same text wraps the same way in each */
.history { border-collapse: collapse; width: 100%; min-width: 760px; margin-top: 0; font-size: 13px; table-layout: fixed; }
.history thead th:first-child { width: 80px; }
.history th, .history td { padding: 10px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.history thead th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.history td:first-child { font-weight: 600; }
.history td .m { display: block; font-weight: 500; }
.history td .s { display: block; color: var(--ink-3); font: 11.5px var(--mono); margin-top: 2px; }
.history td .s.g { color: var(--green); }
.history td .s.nd { letter-spacing: .04em; }
.history td button { all: unset; cursor: pointer; }
@media (hover: hover) { .history td button:hover .m { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } }

/* Inside */
.mass { display: flex; gap: 2px; width: 100%; }
.mass-seg { min-width: 0; }
.mass-seg .b { height: 44px; background: var(--ink); border-radius: 3px; }
.mass-seg:nth-child(even) .b { background: var(--ink-2); }
.mass-seg .t { font-size: 12px; margin-top: 8px; line-height: 1.3; }
.mass-seg .t b { display: block; font: 600 13px var(--mono); }
.mass-seg .t span { color: var(--ink-2); }
@media (max-width: 700px) { .mass { flex-direction: column; gap: 6px; } .mass-seg { display: grid; grid-template-columns: minmax(0,1fr) 110px; align-items: center; gap: 10px; flex: none !important; } .mass-seg .b { height: 14px; width: var(--w); } .mass-seg .t { margin: 0; } }
/* an element picked below lights the parts it is used in, and the other parts step back. Opacity only, so nothing moves;
   the fade is off under both reduce-motion settings (the page-wide kill switches do this too) */
.mass-seg .b { transition: opacity .25s ease; }
.mass.picked .mass-seg:not(.lit) .b { opacity: .35; }
.mass.picked .mass-seg.lit .t span { color: var(--ink); }
/* every lit part is equally bright, so a lit even-numbered segment (normally the softer shade) reads as lit too */
.mass.picked .mass-seg.lit .b { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .mass-seg .b { transition: none; } }
:root[data-motion="reduced"] .mass-seg .b { transition: none; }
/* the line naming the picked element's parts: JS reserves the height of its longest version, so a pick never moves the page */
.mass-say { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 64em; }
.mass-say b { color: var(--ink); font-weight: 600; }
.mass-say + .mass-src { margin-top: 10px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.filters button { font: 500 12px var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.el { position: relative; aspect-ratio: 1 / 1.05; padding: 10px; border: 1px solid var(--rule); background: var(--paper); border-radius: 8px; text-align: left; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; transition: border-color .15s, opacity .2s, transform .15s; }
@media (hover: hover) { .el:hover { border-color: var(--ink); } }
.el[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.el.dim { opacity: .22; }
.el .sy { font: 600 26px/1 var(--sans); letter-spacing: -0.03em; margin-top: auto; }
.el .nm { font-size: 11.5px; line-height: 1.25; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }
.el .am { font: 500 11px var(--mono); color: var(--ink-3); }
.el .rc { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; }
.rc.yes { background: var(--green); } .rc.partly { background: linear-gradient(90deg, var(--green) 50%, var(--rule-2) 50%); } .rc.no { background: var(--rule-2); }
.el .tg { font: 500 9.5px var(--mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.el-detail { margin-top: 18px; padding: 22px 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 24px; }
.el-detail .big { font: 600 64px/1 var(--sans); letter-spacing: -0.04em; }
.el-detail .big small { display: block; font: 500 13px var(--sans); letter-spacing: 0; margin-top: 8px; color: var(--ink-2); }
.el-detail dl { margin: 0; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 8px 16px; font-size: 14px; }
.el-detail dt { color: var(--ink-3); font: 500 11px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.el-detail dd { margin: 0; max-width: 44em; }   /* a readable line length on wide screens */
.el-detail .el-pix { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }   /* which parts of the Pixel in the bar above hold this element */
@media (max-width: 640px) { .el-detail { grid-template-columns: 1fr; } .el-detail dl { grid-template-columns: 1fr; gap: 2px; } .el-detail dd { margin-bottom: 10px; } }

/* Claims */
.claims { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px; }
.claim { padding: 26px 0; border-top: 1px solid var(--rule); }
.claim-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.claim q { font: 600 21px/1.25 var(--sans); letter-spacing: -0.02em; quotes: "“" "”"; }
.verdict { flex: none; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 4px; border: 1px solid currentColor; }
.v-false { color: var(--false); } .v-misleading { color: var(--mis); } .v-accurate, .v-true, .v-mostly-true { color: var(--green); } .v-contested, .v-not-supported { color: var(--ink-2); } .v-partly-true { color: var(--mis); }
.claim p { color: var(--ink-2); font-size: 15px; margin-top: 12px; }
.claim .srcs { margin-top: 10px; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media (max-width: 800px) { .claims { grid-template-columns: 1fr; } }

/* Levers */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 2px solid var(--ink); border-image: linear-gradient(90deg, var(--ink) 88%, transparent) 1; }   /* a solid track from Mines to You (its dot ends at 86-87%), then the stub after You fades out */
/* each link spans four shared rows (who, control, figure, note), so every big figure in a row of links sits at the same height */
.chain li { padding: 18px 16px 18px 0; position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.chain li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.chain li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.chain li + li::before { left: 16px; }
.chain li.you::before { background: var(--green); }
.chain .who { font-weight: 600; font-size: 16px; }
.chain .ctrl { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.chain .fig { font: 600 28px var(--sans); letter-spacing: -0.03em; margin-top: 12px; }
.chain .fn { font-size: 12px; color: var(--ink-3); }
.chain li.you .fig { color: var(--green); }
@media (max-width: 900px) { .chain { grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 0; } .chain li, .chain li + li { padding: 16px 16px 16px 0; border-left: 0; border-top: 2px solid var(--ink); } .chain li:nth-child(even) { padding-left: 16px; } .chain li::before, .chain li + li::before { left: 0; } .chain li:nth-child(even)::before { left: 16px; } }

.laws { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
.laws th, .laws td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.laws thead th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.laws td:first-child { font-weight: 600; width: 20%; }
.laws td:nth-child(2) { color: var(--ink-3); font: 12px var(--mono); width: 11%; white-space: nowrap; }
.laws td:nth-child(3) { width: 34%; }
.laws td:nth-child(4) { color: var(--ink-2); }

.framing { margin-top: 64px; }
.framing-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.framing-list li { border-top: 1px solid var(--rule); padding-top: 14px; font-size: 14px; color: var(--ink-2); }
.framing-list b { display: block; font: 600 32px var(--sans); letter-spacing: -0.03em; color: var(--ink); margin-bottom: 8px; }
.framing-list a { font-size: 12px; color: var(--ink-3); }
@media (max-width: 760px) { .framing-list { grid-template-columns: 1fr; } }

/* Helps */
.helps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.help { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.help b { font-size: 22px; letter-spacing: -0.02em; }
.help p { font-size: 14px; color: var(--ink-2); }
.help .hst { font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto; }
.help .hst a { color: var(--ink-3); }
@media (max-width: 900px) { .helps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .helps { grid-template-columns: 1fr; } }

.method { max-width: 46em; display: grid; gap: 14px; color: var(--ink-2); }
.method strong { color: var(--ink); font-weight: 600; }

.foot { margin-top: 96px; border-top: 1px solid var(--rule); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--ink-3); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.rc-k { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* Who decides — sub-sections */
.sub-sec { margin-top: 88px; }
.sub-sec > h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin-top: 12px; max-width: 30em; }
.sub-sec > .sub { margin-bottom: 24px; }
.tag { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; border: 1px solid var(--rule-2); color: var(--ink-2); vertical-align: 1px; margin-right: 4px; }
.tag-find { border-color: var(--false); color: var(--false); }
.tag-link { border-color: var(--green); color: var(--green); }

/* Harm tracker */
.harm-top { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent) 1; padding-top: 20px; }   /* full-width rule: fades at both ends like .stat-row */
.harm-big b { display: block; font: 600 clamp(44px, 6vw, 72px)/1 var(--sans); letter-spacing: -0.04em; }
.harm-big span { display: block; color: var(--ink-2); margin-top: 10px; max-width: 26em; }
.harm-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; margin-top: 40px; }
.harm-grid h4, .c-cols h4 { margin: 0 0 12px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: 96px minmax(0,1fr) 40px; align-items: center; gap: 10px; font-size: 13px; }
.ht { height: 14px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.ht i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.hv { font: 500 13px var(--mono); text-align: right; }
.tops { list-style: none; margin: 0; padding: 0; }
.tops li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.tops em { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: 6px; }
.tops b { font: 600 14px var(--mono); }
.harm-facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.harm-facts b { color: var(--ink); }
@media (max-width: 760px) { .harm-top, .harm-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Owners */
.owners { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.owner { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; font-size: 13.5px; display: grid; gap: 10px; align-content: start; }
.owner header { display: grid; gap: 3px; }
.owner h4 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.o-full { font-size: 12px; color: var(--ink-3); margin: 0; }
.o-hq { font: 400 11.5px var(--mono); color: var(--ink-3); margin: 0; }
.o-share { display: grid; gap: 4px; }
.o-share b { font: 600 15px var(--mono); }
.o-state, .o-links { color: var(--ink-2); margin: 0; }
.o-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.o-list a, .o-share a, .c-cols a, .fn a, .b-top a { font-size: 12px; color: var(--ink-3); }
@media (max-width: 400px) { .owners { grid-template-columns: 1fr; } }

/* Countries */
.country-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 20px; }
.country-tabs button { font: 500 13px var(--sans); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.country-tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.country { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; }
.c-controls { font: 500 clamp(18px, 2vw, 22px)/1.4 var(--sans); letter-spacing: -0.01em; max-width: 44em; }
.c-min { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 22px 0 6px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.c-min b { display: block; font: 600 22px var(--sans); letter-spacing: -0.02em; }
.c-min span { font-size: 12px; color: var(--ink-3); }
.c-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px; margin-top: 22px; }   /* min(): one column never outgrows a narrow phone at the larger text sizes */
.c-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.c-cols li { font-size: 13.5px; }
.c-cols li p { color: var(--ink-2); margin-top: 4px; }
.c-cols .d { color: var(--ink-3); font: 12px var(--mono); }
@media (max-width: 600px) { .country { padding: 20px 18px; } }

/* Status pills */
.st { display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; border: 1px solid currentColor; }
.st-pending { color: var(--mis); } .st-weakened, .st-stalled { color: var(--false); } .st-passed, .st-inforce { color: var(--green); }

/* Bills */
.filters .n { font: 11px var(--mono); opacity: .85; margin-left: 2px; }
.bills { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.bill { border-top: 2px solid var(--ink); padding-top: 14px; font-size: 13.5px; display: grid; gap: 8px; align-content: start; }
.bill h4 { margin: 0; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.bill h4 a { text-decoration: none; }
@media (hover: hover) { .bill h4 a:hover { text-decoration: underline; } }
.b-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.b-jur { font: 500 11px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; text-align: right; }
.b-d { font: 12px var(--mono); color: var(--ink-3); }
.bill p { color: var(--ink-2); }
.b-gap b { color: var(--ink); font-weight: 600; }
.b-who { font-size: 12px; color: var(--ink-3); }
@media (max-width: 400px) { .bills { grid-template-columns: 1fr; } }

/* Watchdogs */
.watch { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 13px; }
.watch th, .watch td { padding: 12px 8px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: top; }
.watch thead th { font: 600 13px var(--sans); }
.watch thead th:first-child, .watch tbody th { text-align: left; }
.watch tbody th { font-weight: 600; width: 30%; }
.watch tbody th a { text-decoration: none; }
@media (hover: hover) { .watch tbody th a:hover { text-decoration: underline; } }
.watch tbody th span { display: block; font: 400 11.5px var(--mono); color: var(--ink-3); margin-top: 3px; }
.watch tbody th em { display: block; font: italic 400 11.5px var(--sans); color: var(--ink-3); margin-top: 3px; }
.watch td { font: 500 13px var(--mono); }
.watch td.na { color: var(--ink-3); }
.watch td.top { color: var(--green); font-weight: 600; }

/* Evidence */
.ev-h { margin: 48px 0 14px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ev { border-top: 1px solid var(--ink); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ev b { font: 600 28px var(--sans); letter-spacing: -0.03em; }
.ev p { font-size: 13.5px; color: var(--ink-2); }
.ev a { font-size: 12px; color: var(--ink-3); margin-top: auto; }

/* Sources index */
.sources { margin-top: 40px; border-top: 1px solid var(--rule); padding-top: 16px; }
.sources summary { cursor: pointer; font: 600 16px var(--sans); list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
/* the ▾ and ▴ arrows are decoration: "/ ''" gives them empty alternative text, so screen readers do not read them out after
   every row name (the plain content before it is the fallback for browsers without alternative text) */
.sources summary::after { content: " ▾"; content: " ▾" / ""; color: var(--ink-3); }
.sources[open] summary::after { content: " ▴"; content: " ▴" / ""; }
#src-count { font: 400 13px var(--mono); color: var(--ink-3); }
#src-list { columns: 3 280px; column-gap: 32px; margin-top: 20px; }
.src-g { break-inside: avoid; margin-bottom: 18px; }
.src-g h3 { margin: 0 0 6px; font: 500 12px var(--mono); letter-spacing: 0; color: var(--ink-2); }
.src-g h3 span { color: var(--ink-3); }
.src-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.src-g a { color: var(--ink-2); overflow-wrap: anywhere; }

/* Options */
.opt-controls { margin: 56px 0 18px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.opt-sec h3 { font-size: 19px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.opt-sec .sub { font-size: 13.5px; margin: 10px 0 0; }
.opt-sec ul { list-style: none; margin: 8px 0 0; padding: 0; }
.opt { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.opt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.opt-top a { font-weight: 600; font-size: 14.5px; text-decoration: none; }
@media (hover: hover) { .opt-top a:hover { text-decoration: underline; } }
.opt-reg { font: 500 10.5px var(--mono); color: var(--ink-3); letter-spacing: .04em; text-align: right; }
.opt p { color: var(--ink-2); margin-top: 4px; }
.opt-fact { color: var(--ink) !important; font-size: 12.5px; }
.opt-fact a { color: var(--ink-3); font-size: 11.5px; }
.opt-ev { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 40px; }
.market-box { margin: 0 0 22px; max-width: 42em; border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; background: var(--paper); }   /* the reading width of the text above it */
.market-box summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.market { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.market a { font-size: 12px; color: var(--ink-3); }

/* Read more */
.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.clamp.open, .clamp.clamp-fit { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.more { all: unset; cursor: pointer; font: 500 12px var(--sans); color: var(--green); margin-top: 2px; display: inline-block; }
@media (hover: hover) { .more:hover { text-decoration: underline; } }
.more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.owner h4 a { text-decoration: none; }
@media (hover: hover) { .owner h4 a:hover { text-decoration: underline; } }
.o-src { font-size: 12px; color: var(--ink-3); }
.o-src summary { cursor: pointer; }
.o-src ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.o-src a { overflow-wrap: anywhere; }
.o-list li { list-style: none; }
.o-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.o-meta a { font-size: 12px; color: var(--ink-3); }
.c-cols li > a { font-size: 12px; color: var(--ink-3); margin-left: 6px; }

/* Support */
#support { padding-block: 72px 8px; }
.support { max-width: 46em; border-top: 1px solid var(--rule); padding-top: 28px; }
.support h2 { font-size: 20px; line-height: 1.25; margin-top: 12px; }   /* an h2 (its own section), sized as the h3 it was */
.support-orgs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
@media (max-width: 520px) { .support-orgs { grid-template-columns: 1fr; } }
.support-orgs li { padding: 10px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.support-orgs a { font-weight: 600; font-size: 14px; text-decoration: none; }
@media (hover: hover) { .support-orgs a:hover { text-decoration: underline; } }
.support-orgs span { font-size: 12.5px; color: var(--ink-3); }




/* Small support link in the header */
.bar-support { flex: none; font: 500 12.5px var(--sans); color: var(--ink-2); text-decoration: none; padding: 5px 12px; border: 1px solid var(--rule-2); border-radius: 999px; }
@media (hover: hover) { .bar-support:hover { color: var(--ink); border-color: var(--ink-3); } }
.bar-in .nav { margin-left: auto; }


/* Theme toggle — pill beside Support, word before icon */
.theme-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: var(--ink-2); padding: 5px 10px 5px 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; cursor: pointer; }
@media (hover: hover) { .theme-btn:hover { color: var(--ink); border-color: var(--ink-3); } }
.theme-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: none; }
.theme-btn[data-mode="dark"] .i-dark, .theme-btn:not([data-mode]) .i-dark, .theme-btn[data-mode="light"] .i-light { display: block; }
.bar-in { gap: 8px; }
.bar-in { justify-content: flex-start; }
@media (max-width: 860px) { .a11y-btn { margin-left: auto; } }

/* ---------- Accessibility ---------- */
/* WCAG AA contrast for secondary text (was below 4.5:1 in light mode) */
:root { --ink-3: #5F5F58; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3: #8F8F87; } }
:root[data-theme="dark"] { --ink-3: #8F8F87; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.a11y-btn svg { display: block !important; }
.a11y-panel { position: relative; padding-block: 0 16px; }
.a11y-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 12px; font-size: 14px; }
.a11y-row { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px; }
.a11y-row legend { float: left; margin-right: 10px; font-weight: 600; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 999px; overflow: hidden; }
.seg button { font: 500 13px var(--sans); padding: 6px 12px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.a11y-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.a11y-sw input { width: 18px; height: 18px; accent-color: var(--green); }
.a11y-sw small { color: var(--ink-3); }
@media (max-width: 600px) { .a11y-btn .t-label { display: none; } .a11y-btn { padding: 6px 8px; } }

/* Text size (--z is the same zoom, for widths that must not grow with it, such as the full-width section glows) */
:root[data-size="lg"] { --z: 1.15; }
:root[data-size="xl"] { --z: 1.3; }
:root[data-size] body { zoom: var(--z, 1); }
/* High contrast */
:root[data-contrast="high"] { --ink-2: var(--ink); --ink-3: var(--ink); --rule: var(--ink-3); --rule-2: var(--ink); --nd: #9a9a92; --green: #005c33; --green-2: #005c3326; }
:root[data-contrast="high"][data-theme="dark"] { --green: #6ee3a8; --green-2: #6ee3a833; --nd: #6a6a64; }
/* Readable font */
:root[data-font="readable"] { --sans: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; --mono: "Atkinson Hyperlegible", ui-monospace, monospace; }
:root[data-font="readable"] body { letter-spacing: 0.01em; }
/* Underline links */
:root[data-links="underline"] a { text-decoration: underline !important; }
/* Reduce motion (html itself included: it carries the page's smooth scrolling) */
:root[data-motion="reduced"], :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.brand span { white-space: nowrap; }
@media (max-width: 420px) {
  .bar-in { gap: 6px; }
  .brand { gap: 7px; font-size: 15px; }
  .theme-btn, .bar-support { padding: 5px 9px; font-size: 12px; }
  .theme-btn { gap: 4px; }
}
@media (max-width: 350px) { .brand span { display: none; } }

/* Instagram contact link in the header */
.ig-link { text-decoration: none; }
.ig-link svg { display: block !important; }
.ig-link .dotf { fill: currentColor; stroke: none; }
@media (max-width: 860px) { .ig-link { margin-left: auto; } .a11y-btn { margin-left: 0; } }
@media (max-width: 600px) { .ig-link .t-label { display: none; } .ig-link { padding: 6px 8px; } }
@media (max-width: 440px) {
  .bar-in { gap: 5px; }
  .brand { gap: 6px; font-size: 14px; }
  .mark { width: 20px; height: 20px; }
  .theme-btn, .bar-support { padding: 4px 8px; font-size: 11.5px; }
  .ig-link, .a11y-btn { padding: 5px 6px; }
}
.glossary { border-top: 1px solid var(--rule); padding-top: 14px; }
.glossary summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.glossary dl { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 8px 18px; margin: 14px 0 0; font-size: 14px; }
.glossary dt { font-weight: 600; color: var(--ink); }
.glossary dd { margin: 0; }
@media (max-width: 560px) { .glossary dl { grid-template-columns: 1fr; gap: 2px; } .glossary dd { margin-bottom: 10px; } }

/* Header: brand + pills on row 1, section links on row 2 (desktop) */
.bar-in { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 0; padding-top: 10px; padding-bottom: 10px; }
.bar-in .nav { order: 10; flex-basis: 100%; margin-left: 0; gap: 24px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--rule); overflow-x: auto; }
.ig-link { margin-left: auto; }
html { scroll-padding-top: 110px; }
@media (max-width: 860px) { html { scroll-padding-top: 72px; } }

/* ---------- Section colour: a mineral glow per section, blending through black ----------
   Each section gets a full-bleed background (::before) that rises from transparent,
   peaks near the top in its mineral colour and fades back out, so neighbours flow into each other. */
:root { --ga: 13%; --gb: 5%; }                               /* light mode: pale tints */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ga: 17%; --gb: 7%; } }
:root[data-theme="dark"] { --ga: 17%; --gb: 7%; }
:root[data-contrast="high"] { --ga: 0%; --gb: 0%; }         /* high contrast: plain ground */
body { overflow-x: clip; }
.sec { position: relative; isolation: isolate; }
.sec::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -160px; bottom: -160px; left: 50%; width: calc(100vw / var(--z, 1)); transform: translateX(-50%);   /* the larger text sizes zoom 100vw too */
  background:
    radial-gradient(85% 45% at 20% 22%, color-mix(in srgb, var(--glow, transparent) var(--ga), transparent) 0%, transparent 72%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--glow, transparent) var(--gb), transparent) 30%, color-mix(in srgb, var(--glow, transparent) var(--gb), transparent) 60%, transparent 100%);
  /* feather every edge so no glow ever ends in a line; neighbours overlap by 160px */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 72%, transparent 100%);
}
#yours      { --glow: #3D6BFF; }  /* cobalt blue */
#disclosure { --glow: #8F7BFF; }  /* lithium violet */
#trend      { --glow: #3FB27A; }  /* nickel green */
#inside     { --glow: #E07A3C; }  /* copper orange */
#levers     { --glow: #C2412F; }  /* oxide red */
#claims     { --glow: #D9A93A; }  /* gold */
#helps      { --glow: #2FB3A0; }  /* verdigris */
#method, #support { --glow: transparent; }  /* back to black */

/* Full-width rules fade out at both ends — no hard lines across the page */
.bar { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--rule-2) 20%, var(--rule-2) 80%, transparent) 1; }
.bar-in .nav { border-top: 1px solid transparent; border-image: linear-gradient(90deg, var(--rule) 60%, transparent) 1; }
.stat-row { border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent) 1; }
.foot { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent) 1; }

/* Five things to know */
.five { padding-block: 48px 0; }
.five .label { margin: 0 0 16px; font-weight: 500; }
.five-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.five-card { position: relative; background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--rule); border-radius: 14px; display: flex; flex-direction: column; }
.five-link { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 10px; text-decoration: none; color: inherit; flex: 1; border-radius: 14px; }
@media (hover: hover) { .five-link:hover { color: inherit; } .five-card:hover { border-color: var(--ink-3); } }
.five-link b { font: 600 30px/1 var(--sans); letter-spacing: -0.03em; color: var(--green); }
.five-link h3 { font-size: 15px; line-height: 1.25; }
.five-link p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.five-more { font-size: 12px; color: var(--ink-3); margin-top: auto; }
.five-src { font-size: 11.5px; color: var(--ink-3); padding: 0 18px 14px; }
@media (max-width: 1100px) { .five-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .five-list { grid-template-columns: 1fr; } .five-link b { font-size: 26px; } }

/* Chapter rail (wide screens) */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 15; display: none; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; height: 18px; }
/* the bar grows 4px to 6px by scaling from its right edge (transform, not width) */
.rail-bar { width: 6px; height: 18px; border-radius: 2px; background: var(--c); opacity: .35; transform: scaleX(.667); transform-origin: right center; transition: transform .2s, opacity .2s; order: 2; }
.rail-label { font: 500 11.5px var(--sans); color: var(--ink-2); opacity: 0; transform: translateX(4px); transition: opacity .15s, transform .15s; white-space: nowrap; pointer-events: none; background: color-mix(in srgb, var(--ground) 85%, transparent); padding: 2px 6px; border-radius: 4px; }
.rail a:focus-visible .rail-label { opacity: 1; transform: none; }
.rail a.on .rail-bar { opacity: 1; transform: none; }
/* the current chapter's name stays shown only where it clears the content column (about 1426px and wider);
   narrower, the fuller bar marks it and the name shows on hover or keyboard focus */
@media (min-width: 1440px) { .rail a.on .rail-label { opacity: 1; transform: none; } }
@media (hover: hover) { .rail a:hover .rail-label { opacity: 1; transform: none; } .rail a:hover .rail-bar { opacity: 1; transform: none; } }
.rail a.on .rail-label { color: var(--ink); }
@media (min-width: 1300px) { .rail { display: block; } }
.bar .nav a.on { color: var(--ink); }

/* Phone section menu */
.menu-btn { display: none; }
.menu-btn svg { display: block !important; }
.menu-panel { padding-block: 0 14px; }
.menu-panel ul { list-style: none; margin: 0; padding: 8px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 12px; display: grid; gap: 2px; }
.menu-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 500; }
.menu-panel a::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--c); }
.menu-panel a.on { background: var(--ground); }
@media (hover: hover) { .menu-panel a:hover { background: var(--ground); } }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .bar-support { display: none; }
}
@media (max-width: 440px) { .menu-btn .t-label { display: none; } .menu-btn { padding: 5px 6px; } }
@media (min-width: 861px) { .menu-panel { display: none !important; } }

/* Mobile: pinned, swipeable section-link row (replaces the ☰ menu) */
@media (max-width: 860px) {
  .menu-btn { display: none !important; }
  .bar-support { display: inline-flex !important; }
  .bar-in .nav {
    display: flex; flex-wrap: nowrap; gap: 18px; font-size: 13px; white-space: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-top: 8px; margin-top: 8px; scroll-behavior: smooth;
    padding-inline: 6px;
    /* the rule above the links fades at both ends */
    border-image: linear-gradient(90deg, transparent, var(--rule) 10%, var(--rule) 60%, transparent) 1;
  }
  /* edge fades only where there is more to swipe that way (app.js edgeFade sets fade-l / fade-r) */
  .bar-in .nav.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .bar-in .nav.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
  .bar-in .nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); }
  .bar-in .nav::-webkit-scrollbar { display: none; }
  .bar-in .nav a { padding: 4px 0; }
  html { scroll-padding-top: 104px; }
}
.bar .nav a.on { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Map */
:root { --map-land: #DCDCD5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-land: #262724; } }
:root[data-theme="dark"] { --map-land: #262724; }
#map-minerals button { display: inline-flex; align-items: center; gap: 7px; }
.map-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
#map-minerals button[aria-pressed="true"] .map-dot { box-shadow: 0 0 0 2px var(--ground); }
.map-views { margin-top: 10px; }
.map-views::before { content: 'Show'; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); align-self: center; margin-right: 4px; }
.map-views button { font-size: 12.5px; }
/* phones: "Show" takes its own line, so the three views (bauxite's "Refined (alumina)" too) share the row below it */
@media (max-width: 700px) { .map-views::before { flex: 0 0 100%; margin: 0 0 2px; } }
/* the narrowest phones: slimmer view buttons so bauxite's 'Refined (alumina)' shares the row, like copper's */
@media (max-width: 380px) { .map-views button { padding-inline: 9px; } }
.map-wrap { position: relative; margin-top: 8px; }
.map { width: 100%; height: auto; display: block; }
.map path { stroke: var(--ground); stroke-width: .6; transition: fill .35s; }
.map path.click { cursor: pointer; }
.map path.click:focus-visible { stroke: var(--ink); stroke-width: 1.2; outline: none; }
@media (hover: hover) { .map path.has:hover, .map path.click:hover { stroke: var(--ink); stroke-width: 1.2; } }
.map-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--ground); font: 12px/1.45 var(--sans); padding: 8px 10px; border-radius: 8px; transform: translate(-50%, calc(-100% - 14px)); max-width: 260px; z-index: 2; box-shadow: 0 6px 24px #0004; }
.map-tip .tip-hint { opacity: .75; }
.map-legend { display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono); color: var(--ink-3); margin: 6px 0 0; flex-wrap: wrap; }
.map-legend > i { width: 120px; height: 8px; border-radius: 4px; }
.map-legend .lg-none { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.map-legend .lg-none i { width: 12px; height: 8px; border-radius: 2px; background: var(--map-land); border: 1px solid var(--rule-2); }
.map-legend .lg-wh i { background: repeating-linear-gradient(45deg, var(--map-land) 0 2px, var(--ink-3) 2px 3.5px); }
.map-side { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; margin-top: 22px; align-items: start; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.map-list li { display: grid; grid-template-columns: 136px minmax(0, 1fr) 52px; align-items: center; gap: 12px; font-size: 14px; }
.map-list .ml-head { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 4px; }
.map-list .ml-head b { font: inherit; }
.map-list .ml-other { color: var(--ink-2); }
.ml-name { overflow-wrap: anywhere; }
.ml-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-bar i { display: block; height: 10px; border-radius: 2px; flex: none; }
.ml-bar em { font: 12px var(--mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.map-list b { font: 600 13px var(--mono); text-align: right; }
.map-list a { color: var(--ink); }
#map-note { position: sticky; top: 130px; }
@media (max-width: 760px) {
  .map-side { grid-template-columns: 1fr; gap: 16px; }
  .map-list li { grid-template-columns: 104px minmax(0, 1fr) 46px; gap: 8px; font-size: 13.5px; }
  #map-note { position: static; }
}
@media (prefers-reduced-motion: reduce) { .map path { transition: none; } }
/* contrast: green cell text reads dark on the brighter dark-mode green */
:root[data-theme="dark"] .co-cell.rec { color: var(--ground); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .co-cell.rec { color: var(--ground); } }
.results li.q-none { cursor: default; color: var(--ink-2); background: none; }

/* Solutions: the stop-scrolling section. A green field that fades in and out (no edges), huge headline, lead card. */
:root { --stop: #CDEBD8; --stop-ink: #0A5A37; --stop-card: color-mix(in srgb, #FFFFFF 72%, transparent); --stop-rule: #0B7A4B33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --stop: #0D4A31; --stop-ink: #6EE3A8; --stop-card: color-mix(in srgb, #0E0F0E 45%, transparent); --stop-rule: #6EE3A833; } }
:root[data-theme="dark"] { --stop: #0D4A31; --stop-ink: #6EE3A8; --stop-card: color-mix(in srgb, #0E0F0E 45%, transparent); --stop-rule: #6EE3A833; }
/* extra room above the big headline; little below, since the next section's own top padding already gives the usual gap (the green field fades on its own) */
.sec-stop { padding-block: 140px 24px; }
.sec-stop::before {
  top: -220px; bottom: -220px;
  background:
    radial-gradient(70% 55% at 30% 28%, color-mix(in srgb, var(--stop-ink) 16%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom, transparent 0%, var(--stop) 24%, var(--stop) 76%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.stop-head { max-width: 62em; margin-bottom: 56px; }
.stop-label { display: inline-block; color: var(--stop-ink) !important; border: 1px solid var(--stop-rule); border-radius: 999px; padding: 5px 12px; }
.stop-head h2 { margin-top: 22px; }
.stop-big { display: block; font-size: clamp(48px, 9vw, 128px); line-height: .95; letter-spacing: -0.045em; color: var(--stop-ink); font-weight: 650; }
.stop-line { display: block; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.02em; margin-top: 22px; max-width: 24em; }
.stop-head .sub { font-size: 16px; max-width: 40em; margin-top: 18px; }
.sec-stop .helps { gap: 14px; }
.sec-stop .help { background: var(--stop-card); border-color: var(--stop-rule); padding: 26px; }   /* no backdrop blur: only a smooth gradient sits behind, and a blur under a card that slides in costs Safari every frame */
.sec-stop .help-n { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stop-ink); }
.sec-stop .help b { font-size: 26px; }
.sec-stop .help .hst { border-top-color: var(--stop-rule); }
.sec-stop .help-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 10px; padding: 36px; align-items: start; }
.sec-stop .help-lead .help-n, .sec-stop .help-lead b { grid-column: 1; }
.sec-stop .help-lead b { font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -0.035em; color: var(--stop-ink); }
.sec-stop .help-lead p { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; color: var(--ink); line-height: 1.5; align-self: center; }
.sec-stop .help-lead .hst { grid-column: 1 / -1; font-size: 13.5px; margin-top: 8px; }
.sec-stop .helps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .sec-stop .helps { grid-template-columns: 1fr; }
  .sec-stop .help-lead { grid-template-columns: 1fr; padding: 26px; }
  .sec-stop .help-lead p { grid-column: 1; grid-row: auto; font-size: 16px; }
  .sec-stop { padding-block: 100px 8px; }
}
:root[data-contrast="high"] .sec-stop::before { background: none; }
:root[data-contrast="high"] { --stop-ink: var(--green); --stop-card: var(--paper); }
.mail-link { text-decoration: none; }
.mail-link svg { display: block !important; }
@media (max-width: 1100px) { .mail-link .t-label { display: none; } .mail-link { padding: 6px 8px; } }
@media (max-width: 480px) { .mail-link { display: none; } }

/* ---------- Motion (calm, receipt-themed). JS adds .rv only when motion is allowed. ---------- */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }
.rv { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--rv, 0ms); }
.rv-rise:not(.in) { opacity: 0; transform: translateY(14px); }
/* cards feed out of a printer slot: revealed top-down while sliding down a touch */
.rv-feed:not(.in) { opacity: 0; transform: translateY(-10px); }
.rv-done { transition: none; transition-delay: 0ms; }
/* big headlines: each word rises out of its own line */
.rv-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.rv-words .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: var(--wi, 0ms); }
.rv-words.in .w > span { transform: none; }
/* trend lines draw, then points appear */
.chart.draw .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.chart.draw:not(.in) .pt, .chart.draw:not(.in) .lbl { opacity: 0; }
.chart.draw.in .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out), opacity .2s, stroke .2s; }
.chart.draw.in .pt, .chart.draw.in .lbl { transition: opacity .5s ease 1.1s; }
/* disclosure dots stamp in column by column */
.matrix.stamp .dot { transform: scale(0); }
.matrix.stamp.in .dot { transform: none; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--c, 0ms); }
/* map: countries fade in, largest share first; list bars grow */
.map.map-intro path.has { animation: map-in .7s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes map-in { from { opacity: 0; } }
.ml-bar i { transform-origin: left center; animation: bar-grow .7s var(--ease-out) both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
/* phones: shorter and lighter */
@media (max-width: 760px) {
  .rv { transition-duration: .5s; }
  .rv-rise:not(.in) { transform: translateY(8px); }
  .rv-feed:not(.in) { transform: translateY(-6px); }
  .rv-words .w > span { transition-duration: .6s; }
}
/* never hide anything when motion is reduced, or when printing */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-words .w > span { opacity: 1 !important; transform: none !important; }
  .ml-bar i, .map path { animation: none !important; }
}
:root[data-motion="reduced"] .rv, :root[data-motion="reduced"] .rv-words .w > span, :root[data-motion="reduced"] .chart.draw .ln, :root[data-motion="reduced"] .matrix.stamp .dot { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
:root[data-motion="reduced"] .chart.draw .pt, :root[data-motion="reduced"] .chart.draw .lbl { opacity: 1 !important; }
@media print { .rv, .rv-words .w > span { opacity: 1 !important; transform: none !important; } }

/* Wide tables on phones: brand/benchmark column stays put, edge fades hint there is more to swipe */
@media (max-width: 760px) {
  .table-scroll { position: relative; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .table-scroll.at-end { -webkit-mask-image: none; mask-image: none; }
  .table-scroll table tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 88px; max-width: 88px; background: color-mix(in srgb, var(--ground) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  /* brand notes under each matrix row stay readable instead of running off the edge */
  .matrix .m-note { position: sticky; left: 96px; width: calc(100vw - 180px); white-space: normal; }
}
/* touch targets: at least 24px tall on touch screens */
@media (pointer: coarse) {
  .more, details > summary, .ev a, .srcs a, .five-src a, .owner a, .o-links a, .claim .srcs a, #owner-list a, #evidence a { display: inline-block; min-height: 24px; padding-block: 4px; }
}
@media (max-width: 760px) { .map-wrap { margin-inline: -20px; } }

/* ---------- Phone layouts (desktop never sees these) ---------- */
.m-cards, .t-cards, .fold-btn { display: none; }
@media (max-width: 760px) {
  /* disclosure: cards instead of the wide matrix */
  #matrix { display: none; }
  .table-scroll:has(#matrix), .table-scroll:has(#watch), .table-scroll:has(#history) { display: none; }
  .m-cards { display: grid; gap: 8px; }
  .mc { background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--rule); border-radius: 14px; }
  .mc > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b s" "d d"; row-gap: 10px; padding: 14px 16px; cursor: pointer; }
  .mc > summary::-webkit-details-marker { display: none; }
  .mc-b { grid-area: b; font-size: 17px; }
  .mc-s { grid-area: s; font: 600 15px var(--mono); }
  .mc-s::after { content: ' ▾'; content: ' ▾' / ''; font-size: 11px; color: var(--ink-3); }
  .mc[open] .mc-s::after { content: ' ▴'; content: ' ▴' / ''; }
  .mc-dots { grid-area: d; display: flex; gap: 6px; }
  .mc-dots .dot { width: 14px; height: 14px; }
  .mc ul { list-style: none; margin: 0; padding: 0 16px 6px; display: grid; gap: 8px; }
  .mc li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
  .mc li em { font: 11px var(--mono); font-style: normal; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
  .mc > p { margin: 6px 16px 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
  /* watchdogs and five-year history: a card per row */
  .t-cards { display: grid; gap: 10px; }
  .tc { background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
  .tc-h { display: grid; gap: 3px; margin-bottom: 10px; font-weight: 600; }
  .tc-h a { color: var(--ink); }
  .tc-h span, .tc-h em { font-weight: 400; font-size: 12.5px; color: var(--ink-3); font-style: normal; }
  .tc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .tc li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px; }
  .tc li > span { color: var(--ink-3); font: 12px var(--mono); }
  .tc li.top > div { color: var(--green); font-weight: 600; }
  .tc-na { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
  /* long lists open on tap */
  .foldable:not(.open) .fold-body { display: none; }
  .fold-btn { display: inline-flex; align-items: center; min-height: 36px; margin-top: 10px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: none; color: var(--ink); font: 500 13px var(--sans); cursor: pointer; }
  .fold-btn::after { content: '▾'; content: '▾' / ''; margin-left: 8px; font-size: 11px; }
  .foldable.open > .fold-btn::after { content: '▴'; content: '▴' / ''; }
  .show-all::after { content: none; }
  /* chip rows: one swipeable line */
  .filters.swipe, [role=tablist].swipe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  /* edge fades only where there is more to swipe that way (app.js edgeFade sets fade-l / fade-r) */
  .filters.swipe.fade-r, [role=tablist].swipe.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .filters.swipe.fade-l, [role=tablist].swipe.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
  .filters.swipe.fade-l.fade-r, [role=tablist].swipe.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); }
  .filters.swipe::-webkit-scrollbar, [role=tablist].swipe::-webkit-scrollbar { display: none; }
  .filters.swipe > *, [role=tablist].swipe > * { flex: none; }
}
@media (max-width: 760px) {
  .tc li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .tc li > div button { all: unset; cursor: pointer; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
  .tc li > div .s { font-size: 13px; color: var(--ink-2); }
  .tc li > div .s.g { color: var(--green); }
  .tc li > div .s.nd { color: var(--ink-3); }
}
@media (max-width: 760px) {
  .capped > :nth-child(n+7) { display: none; }
  .tc.foldable:not(.open) li.fold-body { display: none; }
}
@media (max-width: 760px) { .capped.cap4 > :nth-child(n+5) { display: none; } }

/* Use this data */
.datause { margin: 36px 0 28px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.datause h3 { font-size: 20px; margin: 0 0 8px; color: var(--ink); }   /* full ink like the other footer headings (.method would make it grey) */
.datause > p:not(.dl-row) { max-width: 46rem; }   /* the card spans the column (see lane 2 below); its text keeps the reading width, in rem so the smaller "How to cite" line matches */
.dl-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.dl-row .btn { text-decoration: none; }

/* For policy makers */
#policy { --glow: #5E9FD6; }
.kit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.kit { display: grid; gap: 10px; }
.lever { border: 1px solid var(--rule); border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.lever > summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-areas: "n t i" "n w i"; column-gap: 12px; row-gap: 6px; padding: 20px 22px; cursor: pointer; }
.lever > summary::-webkit-details-marker { display: none; }
.lever > summary::after { grid-area: i; content: '▾'; content: '▾' / ''; color: var(--ink-3); align-self: start; }
.lever[open] > summary::after { content: '▴'; content: '▴' / ''; }
.lv-n { grid-area: n; font: 500 13px var(--mono); color: var(--ink-3); padding-top: 4px; }
.lv-t { grid-area: t; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.lv-w { grid-area: w; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 44em; }
.lv-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; padding: 4px 22px 24px 78px; }
.lv-body h4 { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 8px; }
.lv-body ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; }
.lv-body a, .lib a { color: var(--ink); }
.lv-read { grid-column: 1 / -1; }
.lv-read ul { max-width: 46em; }   /* the one full-width list keeps a readable line length */
.lib .d, .lv-body .d { color: var(--ink-3); font-size: 12.5px; }
.lib .w, .lv-body .w { color: var(--ink-2); font-size: 13.5px; }
.kit-lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-top: 44px; }
.kit-lib h3 { font-size: 19px; margin: 0 0 12px; }
.lib { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 760px) {
  .lever > summary { grid-template-columns: 30px minmax(0, 1fr) 16px; padding: 16px; }
  .lv-t { font-size: 17px; }
  .lv-w { font-size: 14px; }
  .lv-body { grid-template-columns: 1fr; padding: 0 16px 18px; }
  .kit-lib { grid-template-columns: 1fr; gap: 24px; }
}
/* print just the brief */
@media print {
  .print-kit body > *:not(main), .print-kit main > *:not(#policy), .print-kit .kit-actions, .print-kit .rail { display: none !important; }
  .print-kit #policy { padding: 0; }
  .print-kit #policy::before { display: none; }
  .print-kit .lever { break-inside: avoid-page; border-color: #999; }
  .print-kit, .print-kit body { background: #fff !important; color: #000 !important; }
  .print-kit * { color: #000 !important; }
}
.verdict-key { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 760px) {
  .lever:not([open]) .lv-w { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.beyond { margin: 0; display: grid; gap: 14px; }
.beyond p { margin: 0; }
.src-inline { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.src-inline a { color: var(--ink-3); margin-right: 8px; }

/* Keys and tap-to-explain definitions */
.tag-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.6; }
.tag-key .tag, .tag-key .st { margin-right: 0; }
.tag-key .tk-hint { color: var(--ink-3); font-size: 12.5px; }
.has-def { cursor: help; }
.has-def:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v.nd.has-def { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
.def-pop { position: absolute; z-index: 60; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--ground); font: 13px/1.5 var(--sans); box-shadow: 0 8px 28px #0005; }   /* the pointer can rest on it to read (app.js keeps it open) */
@media print { .def-pop, .tk-hint { display: none !important; } }
.tag-key .tk { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 10px; }
.tag-key .tk > :first-child { flex: none; white-space: nowrap; }   /* the pill keeps its one line; the description beside it wraps instead */
@media (max-width: 760px) { .tag-key { display: grid; gap: 8px; } .tag-key .tk { display: flex; gap: 8px; margin: 0; } }
.hint-tap { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-tap { display: inline; } }
abbr.gl { text-decoration: underline dotted color-mix(in srgb, var(--ink-3) 70%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }
@media (hover: none) { abbr.gl { text-decoration-color: var(--ink-3); } }

/* Compact expandable rows: laws and bills, mining companies */
.owners, .bills { display: block; border-top: 1px solid var(--rule); }
details.owner, details.bill { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0; display: block; font-size: 14px; }
.row-sum { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; }
.row-sum::-webkit-details-marker { display: none; }
.row-sum::after { content: '▾'; content: '▾' / ''; margin-left: auto; color: var(--ink-3); font-size: 12px; flex: none; }
details[open] > .row-sum::after { content: '▴'; content: '▴' / ''; }
@media (hover: hover) { .row-sum:hover .rs-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); } }
.rs-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rs-name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rs-sub { font-size: 12.5px; color: var(--ink-3); }
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; max-width: 45%; }
.rs-tags .tag { margin-right: 0; }
details.bill .row-sum .st { flex: none; min-width: 92px; text-align: center; }
.row-body { display: grid; gap: 10px; padding: 2px 4px 20px 4px; max-width: 44em; font-size: 14px; line-height: 1.6; }   /* about 75 to 90 characters a line */
details.bill .row-body { padding-left: 110px; }
details.owner .row-body header { display: grid; gap: 3px; }
@media (max-width: 760px) {
  .row-sum { flex-wrap: wrap; gap: 8px 10px; padding: 14px 2px; }
  .rs-main { flex-basis: calc(100% - 30px); order: 1; }
  details.bill .row-sum .st { order: 0; min-width: 0; }
  .row-sum::after { order: 2; }
  .rs-tags { order: 3; max-width: none; justify-content: flex-start; flex-basis: 100%; }
  details.bill .row-body { padding-left: 2px; }
}
@media (max-width: 760px) { .capped.cap12 > :nth-child(n+7) { display: revert; } .capped.cap12 > :nth-child(n+13) { display: none; } }
.lbl-def { text-decoration: underline dotted color-mix(in srgb, var(--ink-3) 80%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }

/* Solutions: first four per column, then "Show all" (every screen size) */
.opt-sec ul:not(.all) > .more-item { display: none; }
.fold-btn.opt-more { display: inline-flex; align-items: center; min-height: 36px; margin-top: 12px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: none; color: var(--ink); font: 500 13px var(--sans); cursor: pointer; }
.fold-btn.opt-more[hidden] { display: none; }
@media (hover: hover) { .fold-btn.opt-more:hover { border-color: var(--ink); } }
/* laws list: first eight on every screen until "Show all" */
.capped.cap8 > :nth-child(n+9) { display: none; }
@media (max-width: 760px) { .capped.cap8 > :nth-child(n+7):not(:nth-child(n+9)) { display: revert; } }

/* Claims carousel */
.car-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0 0 14px; }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
@media (hover: hover) { .car-btn:hover { border-color: var(--ink); } }
.car-count { font: 500 12.5px var(--mono); color: var(--ink-3); min-width: 72px; text-align: center; }
.claims.carousel > .car-in { animation: car-fade .45s var(--ease-out, ease) both; }
@keyframes car-fade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .claims.carousel > .car-in { animation: none; } }
:root[data-motion="reduced"] .claims.carousel > .car-in { animation: none; }
@media print { .claims.carousel > [hidden] { display: block !important; } .car-nav { display: none; } }
@media (max-width: 800px) { .car-nav { justify-content: space-between; } }
/* Solutions: four columns on wide screens, two on medium, one on phones */
.opts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1180px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 700px) { .opts { grid-template-columns: 1fr; } }
/* region codes sit on their own line under the title at every width, so they never squeeze it */
.opts .opt-top { flex-direction: column; align-items: flex-start; gap: 3px; }
.opts .opt-reg { text-align: left; }
@media (min-width: 1181px) { .opt-sec h3 { font-size: 18px; } }
/* cobalt tiles: one row of nine on wide screens and tablets (no 5 + 4 split), 3 x 3 on phones */
.cobalt-row { grid-template-columns: repeat(9, minmax(0, 1fr)); }
@media (max-width: 760px) { .cobalt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.co.has-def { cursor: help; border-radius: 12px; }
@media (hover: hover) { .co.has-def:hover .co-cell { outline: 2px solid var(--ink-3); outline-offset: 2px; } }
.el-detail .big-rc { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 13px var(--sans); letter-spacing: 0; color: var(--ink-2); }
.el-detail .big-rc .rc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* chain: the hopping green dot */
.chain { position: relative; }
.hopper { position: absolute; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent), 0 0 18px color-mix(in srgb, var(--green) 60%, transparent); z-index: 3; pointer-events: none; will-change: transform; }
.chain li.hit::before { animation: node-hit .45s ease-out; }
@keyframes node-hit { 0% { transform: scale(1); } 35% { transform: scale(1.6); background: var(--green); } 100% { transform: scale(1); } }
.chain li.you.hit::before { animation: node-land .7s ease-out; }
@keyframes node-land { 0% { transform: scale(1); } 40% { transform: scale(1.9); box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 25%, transparent); } 100% { transform: scale(1); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .hopper { display: none; } .chain li.hit::before { animation: none; } }
:root[data-motion="reduced"] .hopper { display: none; }

/* tag colours: Record red, Alleged orange, State stake yellow, On brand lists blue */
:root { --tag-orange: #9E4A14; --tag-yellow: #765A00; }   /* light: same hues, dark enough for 4.5:1 on the tinted rows (10-11px text) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tag-orange: #F2924E; --tag-yellow: #E6C34A; } }
:root[data-theme="dark"] { --tag-orange: #F2924E; --tag-yellow: #E6C34A; }
.tag[data-def="alleged"] { border-color: var(--tag-orange); color: var(--tag-orange); }
.tag[data-def="state"] { border-color: var(--tag-yellow); color: var(--tag-yellow); }
:root[data-contrast="high"] .tag[data-def="alleged"], :root[data-contrast="high"] .tag[data-def="state"] { border-width: 2px; }

/* verdict colours: none grey */
:root { --v-blue: #1F5FBF; --v-violet: #6A4BC4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-blue: #7FB0FF; --v-violet: #B9A4FF; } }
:root[data-theme="dark"] { --v-blue: #7FB0FF; --v-violet: #B9A4FF; }
.verdict.v-false { color: var(--false); }
.verdict.v-misleading { color: var(--mis); }
.verdict.v-partly-true { color: var(--tag-orange); }
.verdict.v-contested { color: var(--v-blue); }
.verdict.v-not-supported { color: var(--v-violet); }
.verdict.v-mostly-true, .verdict.v-true, .verdict.v-accurate { color: var(--green); }
.verdict { border-color: currentColor; }
.vkey { margin-top: 18px; }
.vkey .verdict { font-size: 10.5px; }

/* flags */
.flag { display: inline-block; width: 16px; height: 12px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); flex: none; }
.flag-globe { box-shadow: none; color: currentColor; }
.ml-name .flag { margin-right: 6px; }
details.bill .rs-sub .flag { margin-right: 6px; vertical-align: -1.5px; }
#opt-regions button, #country-tabs button { display: inline-flex; align-items: center; }

/* spacing audit (Sept 2026) */
.opt p { margin-top: 6px; line-height: 1.5; }
.opt p.opt-fact { margin-top: 8px; }
.o-meta { margin-bottom: 6px; }
.o-share { gap: 6px; }
.o-full { margin-top: 2px; }
.o-hq { margin-top: 3px; }
.chain .fn { display: block; margin-top: 6px; }
.o-hq + p { margin-top: 6px; }
#country-panel li p.clamp + p.d { margin-top: 6px; }

/* Three-phone comparison: brand + model dropdowns above each receipt */
.receipts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.slot { display: grid; gap: 16px; min-width: 0; }
.slot .receipt { width: 100%; }
.slot-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }   /* the brand list is as wide as its longest name; the model gets the rest */
.slot-pick label { display: grid; gap: 6px; min-width: 0; }
.slot-pick span { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-pick select { width: 100%; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 14.5px var(--sans); text-overflow: ellipsis; }
.slot-pick select:not(:disabled) { cursor: pointer; }
.slot-pick select { overflow: hidden; }   /* a long model name ("razr 60 ultra / razr ultra (2025)") never widens the page in Safari */
@media (hover: hover) { .slot-pick select:hover:not(:disabled) { border-color: var(--ink-3); } }
.slot-pick select:disabled { opacity: .5; }
.slot + .slot .slot-pick select { border-style: dashed; }
.slot.empty .slot-r { display: none; }
/* tablets and narrow windows: still three side by side (never two plus one far below), each receipt a little tighter */
@media (min-width: 701px) and (max-width: 1060px) {
  .receipts { gap: 14px; }
  .slot-pick { grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* brand above model */
  .slot .receipt { font-size: 11.5px; padding: 22px 14px 30px; }
  /* in a narrow receipt a label may take two lines (up to half the width), so its value is not squeezed to a word per line */
  .r-kv { grid-template-columns: fit-content(50%) minmax(0, 1fr); }
  .r-kv > span:first-child { white-space: normal; }
}
@media (max-width: 700px) {
  .receipts { grid-template-columns: 1fr; gap: 32px; }
  .slot-pick select { font-size: 16px; }
}
/* phones: one receipt, one selector, no comparison */
@media (max-width: 700px) {
  .slot + .slot, .web-only { display: none; }
}
.slot-pick span b { font-weight: inherit; }

/* Safari smoothness: each printing row gets its own layer while it prints (the receipt carries no filter: its zig-zag mask would hide a shadow anyway) */
.receipt.printing .pl { will-change: opacity, transform; }
/* hero words: each on its own GPU layer while rising (smooth in Safari), released afterwards
   (rv-settled on the hero headline; rv-done, added once a headline's rise has ended, on the others) */
.rv-words:not(.rv-settled):not(.rv-done) .w > span { will-change: transform; backface-visibility: hidden; }
[tabindex="-1"]:focus { outline: none; }

/* cobalt tiles: the green is a fill layer so it can rise from the bottom (transform only, smooth in Safari) */
.co-cell.rec { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); transition: border-color 1s ease 1.4s; }
.co-fill { position: absolute; inset: 0; z-index: -1; background: var(--green); transform-origin: 50% 100%; transform: scaleY(var(--p, 1)); }
.co-cell.rec em { font-style: normal; font-variant-numeric: tabular-nums; }
.co-wait .co-cell.rec { border-color: var(--rule); }
.co-wait .co-fill { transform: scaleY(0); }
.co-wait .co-cell.rec em { color: var(--ink-3); }
.co-go .co-fill { will-change: transform; }
.co-go .co-cell.rec em { transition: color .6s ease; transition-delay: 1200ms; }
@media (prefers-reduced-motion: reduce) { .co-wait .co-fill { transform: scaleY(var(--p, 1)); } .co-wait .co-cell.rec { border-color: var(--green); } .co-wait .co-cell.rec em { color: #fff; } }
:root[data-motion="reduced"] .co-wait .co-fill { transform: scaleY(var(--p, 1)); } :root[data-motion="reduced"] .co-wait .co-cell.rec { border-color: var(--green); } :root[data-motion="reduced"] .co-wait .co-cell.rec em { color: #fff; }
/* cobalt key: tells the two hatched tile types apart */
.co-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.co-key span { display: inline-flex; align-items: baseline; gap: 8px; }
.co-k { flex: none; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 3px 7px; border: 1px solid var(--rule); border-radius: 6px; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--rule) 6px 7px), var(--paper); }
@media (max-width: 700px) { .co-key { flex-direction: column; } }
.co-key i { font-style: normal; }
/* footer fine print: small and quiet, but no extra fading: it carries the "allegations are not findings" and "not affiliated" wording, so it keeps full --ink-3 contrast */
.foot-legal { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* Elements on phones: a scrolling column of elements on the left, its info box on the right (desktop unchanged) */
.el-split { display: contents; }
@media (max-width: 700px) {
  .el-split { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; align-items: stretch; }
  .el-split .elements { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; align-content: start; gap: 6px; height: 0; min-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity; padding-right: 2px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .el-split .el { aspect-ratio: auto; min-height: 70px; padding: 8px; scroll-snap-align: start; }
  .el-split .el .tg { display: none; }
  .el-split .el .sy { font-size: 22px; }
  .el-split .el .nm { font-size: 10.5px; }
  .el-split .el .am { font-size: 10px; }
  .el-split .el .rc { top: 8px; right: 8px; }
  /* a filter hides the elements that don't match, so the matches gather at the top of the column */
  .el-split .el.dim { display: none; }
  .el-split .el-detail { grid-column: 2; grid-row: 1; margin-top: 0; min-height: 440px; padding: 16px 14px; gap: 12px; align-content: start; }
  .el-split .el-detail .big { font-size: 44px; }
  .el-split .el-detail dl { font-size: 13.5px; }
  .el-split .key { grid-column: 1 / -1; grid-row: 2; margin: 4px 0 0; }
}
/* mineral dots outside the map: sit inline with the word they mark */
.map-dot:not(#map-minerals .map-dot) { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 1px; vertical-align: 0.05em; }
#owner-filters button .map-dot { margin-right: 6px; }
.min-dots { justify-self: start; display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 0.1em; cursor: help; }   /* only as wide as its dots, so the rest of the row header still opens the row */
.min-dots .map-dot:not(#map-minerals .map-dot) { margin: 0; width: 7px; height: 7px; }   /* as specific as the inline-dot rule above, so the cluster stays compact */
/* "On brand lists" is neutral information, not good news: blue, not green */
.tag-link, .tag[data-def="lists"] { border-color: var(--v-blue); color: var(--v-blue); }
/* "None recorded": nothing to tag in the sources checked, so a quiet grey that sits back from the coloured tags */
.tag-none { border-color: var(--rule-2); color: var(--ink-3); }

/* ---------- Colour system (Sept 2026 review) ----------
   Truth scale runs warm to cool, like fact-checkers' red-to-green: False red, Misleading orange, Partly true blue, True green.
   The two "we can't say" verdicts sit off that scale and carry a shape cue too, so colour is never the only signal:
   Contested violet with a double border (two sides), Not supported yellow with a dashed border (evidence missing). */
.verdict.v-false { color: var(--false); }
.verdict.v-misleading { color: var(--tag-orange); }
.verdict.v-partly-true { color: var(--v-blue); }
.verdict.v-mostly-true, .verdict.v-true, .verdict.v-accurate { color: var(--green); }
.verdict.v-contested { color: var(--v-violet); border-style: double; border-width: 3px; }
.verdict.v-not-supported { color: var(--tag-yellow); border-style: dashed; }
/* law status: in force green, passed (adopted, not yet in effect) blue, pending amber, weakened red, stalled or closed neutral with a dashed edge (stopped, neither good nor bad) */
.st-passed { color: var(--v-blue); }
.st-stalled { color: var(--ink-2); border-style: dashed; }
/* policy-maker library and datasets: first five until expanded */
.cap5:not(.cap5-open) > :nth-child(n+6) { display: none; }
@media print { .cap5 > * { display: revert !important; } .kit-lib .show-all { display: none; } }
/* How to read this: two balanced columns on wider screens, one on phones; the blocks below keep their reading width */
.method { max-width: none; }
.method > :not(.method-cols) { max-width: 46em; }
.method-cols { columns: 2; column-gap: 48px; }
.method-cols p { margin: 0 0 14px; break-inside: avoid; }
@media (max-width: 760px) { .method-cols { columns: 1; } }

/* bottom of the page: sources line matches the reading width above it; calmer gaps into Support and the footer */
#method .sources { max-width: 46em; margin-top: 32px; }
#support { padding-top: 40px; }
.foot { margin-top: 48px; }
/* Transsion / Fairphone continue the two columns on wider screens */
.method > .beyond { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
@media (max-width: 760px) { .method > .beyond { grid-template-columns: 1fr; } }
.method > .beyond-head { max-width: 46em; margin-top: 18px; }
.beyond-head h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.beyond-head p { margin: 0; }
/* Brands outside the comparison: their own dashed-edge panel (outside the nine), two columns inside */
.method > .beyond-card { max-width: none; margin-top: 18px; padding: 24px 26px 26px; border: 1px dashed var(--rule-2); border-radius: 14px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.beyond-card .beyond-head { margin: 0 0 18px; max-width: 46em; }
.beyond-card .beyond { margin: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
.beyond-card .beyond > p { padding-top: 14px; border-top: 1px solid var(--rule); }
.beyond-card .beyond > p > strong:first-child { display: block; margin-bottom: 6px; font-size: 15px; }
@media (max-width: 760px) { .method > .beyond-card { padding: 18px 16px 20px; } .beyond-card .beyond { grid-template-columns: 1fr; } }
.hopper.frag { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hopper.frag { display: none; } }
/* rubber-stamp verdicts */
.claim .verdict { display: inline-block; transform-origin: 50% 60%; }
#claims-list.claims-seen .claim .verdict.stamp { animation: stamp .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: var(--sd, 200ms); }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.3) rotate(-14deg); }
  55% { opacity: 1; transform: scale(.88) rotate(-3deg); }
  75% { transform: scale(1.06) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #claims-list .claim .verdict.stamp { animation: none; } }
/* tear and reprint */
.slot-r { position: relative; }
.receipt.torn { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; transform-origin: 30% 0; }
/* five things: made before you buy. --lo and --hi (set by app.js) are the lowest and highest share made before you buy in the brands' own studies */
.buy-bar { margin: 4px 18px 0; padding-top: 26px; }
.bb-track { position: relative; height: 10px; border-radius: 5px; background: var(--rule); overflow: visible; }
.bb-make, .bb-band, .bb-use { position: absolute; top: 0; bottom: 0; transform-origin: 0 50%; }
.bb-make { left: 0; width: var(--lo); background: var(--ink); border-radius: 5px 0 0 5px; }
/* where you buy it depends on the study: a soft band with no hard edge, one tick per brand */
.bb-band { left: var(--lo); width: calc(var(--hi) - var(--lo)); background: color-mix(in srgb, var(--ink) 40%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.bb-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.bb-use { left: var(--hi); right: 0; background: var(--green); border-radius: 0 5px 5px 0; }
/* "You buy it": a soft bracket over the band (a hairline that fades at both ends) */
.bb-mark { position: absolute; left: var(--lo); right: calc(100% - var(--hi)); bottom: calc(100% + 6px); height: 1px; background: linear-gradient(90deg, transparent, var(--green) 25%, var(--green) 75%, transparent); }
.bb-mark span { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
/* one 44px tap, hover and focus target over the band and its label, for the per-brand figures */
.bb-hit { position: absolute; left: calc(var(--lo) - 6px); right: calc(100% - var(--hi) - 6px); top: -26px; bottom: -8px; border-radius: 6px; }
.bb-keys { display: flex; justify-content: space-between; margin-top: 6px; font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.bb-more { display: block; padding: 12px 18px 10px; margin-top: 0; text-decoration: none; }
.bb-wait .bb-make, .bb-wait .bb-band, .bb-wait .bb-use { transform: scaleX(0); }
.bb-wait .bb-band, .bb-wait .bb-tick, .bb-wait .bb-mark { opacity: 0; }
.bb-wait .bb-tick { transform: translateY(-6px); }
/* about 3.4 s in all: making fills, the band and ticks settle, the bracket fades in, then use creeps along */
.bb-go .bb-make { animation: bb-make 1s cubic-bezier(.6, 0, .9, .5) both; }
.bb-go .bb-band { animation: bb-band .4s ease-out .95s both; }
.bb-go .bb-tick { animation: bb-tick .35s cubic-bezier(.3, 1.3, .5, 1) calc(1s + var(--k, 0) * 90ms) both; }
.bb-go .bb-mark { animation: bb-fade .45s ease-out 1.5s both; }
.bb-go .bb-use { animation: bb-grow 1.8s cubic-bezier(.2, .6, .4, 1) 1.6s both; }
@keyframes bb-make { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bb-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bb-band { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes bb-tick { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bb-fade { from { opacity: 0; } to { opacity: 1; } }
/* law status track */
.law-track { --lt-gap: 9px; position: relative; height: 96px; margin: 8px 0 22px; }
.lt-line { position: absolute; left: 0; right: 0; bottom: 30px; height: 2px; background: var(--rule-2); border-radius: 1px; }
.lt-stop { position: absolute; bottom: 30px; width: 0; }
.lt-dot { position: absolute; left: -3.5px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translate(var(--dx), var(--dy)); }
.lt-dot.st-stalled { background: none; border: 1px dashed currentColor; }
.lt-lbl { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.lt-lbl b { font-weight: 600; }
.lt-stop::after { content: ""; position: absolute; left: -1px; top: -4px; width: 2px; height: 10px; background: var(--rule-2); }
.lt-wait .lt-dot { opacity: 0; }
@media (max-width: 700px) { .law-track { height: 104px; } .lt-lbl { font-size: 9px; letter-spacing: .02em; } .lt-lbl b { display: block; text-align: center; } }
/* the narrowest phones: smaller, closer dots so the end clusters (pushed inside the track) never run into their neighbours */
@media (max-width: 380px) { .law-track { --lt-gap: 7px; } .lt-dot { width: 6px; height: 6px; left: -3px; } }
/* narrow phones: every other label drops a line (Pending, Weakened), so neighbouring labels never run together */
@media (max-width: 400px) { .law-track { height: 138px; } .law-track .lt-line, .law-track .lt-stop { bottom: 58px; } .lt-lbl.st-pending, .lt-lbl.st-weakened { top: 36px; } }
/* element recycling dot: a piece that drops for "partly recovered" */
.el-detail .big-rc { position: relative; }
.rc-bit { position: absolute; width: 5px; height: 10px; border-radius: 10px 0 0 10px; background: var(--green); pointer-events: none; }
/* map: refining pulse from the top refiner */
.ref-pulse { pointer-events: none; }
.rp-dot { fill: var(--c); stroke: var(--ground); stroke-width: 1.5; }
/* forwards, not both: the rings stay hidden until they start, rather than sitting frozen on the map while they wait */
.rp-ring { fill: none; stroke: var(--c); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: rp-ring 1.6s cubic-bezier(.2,.6,.3,1) 1.4s 2 forwards; }
.rp-2 { animation-delay: 1.9s; }
.rp-lbl { font: 600 13px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 4px; stroke-linejoin: round; opacity: 0; animation: rp-lbl .5s ease 1.6s both; }
.rp-dot { opacity: 0; animation: rp-lbl .4s ease 1.3s both; }
@keyframes rp-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes rp-lbl { from { opacity: 0; } to { opacity: 1; } }
.rp-still .rp-ring { display: none; } .rp-still .rp-lbl, .rp-still .rp-dot { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rp-ring { display: none; } .rp-lbl, .rp-dot { animation: none; opacity: 1; } }
.lt-lbl { border: 0; padding: 0; }

/* ===== v2.0: motion and JS (lane 1) ===== */
/* reduce motion: the OS setting stops every animation, transition and smooth scroll, exactly as the Accessibility panel's switch does */
@media (prefers-reduced-motion: reduce) {
  html, *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* map: plain land under the countries, so a producer fading in rises from grey land, never from a hole in the map */
.map .map-base { fill: var(--map-land); pointer-events: none; transition: none; }
/* while producers light up, their new colour arrives with the fade rather than as a second cross-fade */
.map.map-intro path.has { transition: none; }
/* waiting states (JS sets them only when motion is allowed): producers until the map is on screen,
   receipts as blank paper until they first print, verdicts until they stamp */
.map.map-wait path.has { opacity: 0; }
.print-wait .receipt:not(.torn) > * { opacity: 0; }
#claims-list.stamp-wait .claim .verdict.stamp { opacity: 0; }
/* phone disclosure cards: each card's dots stamp in as the card feeds in, like the table's on wider screens */
@media (max-width: 760px) {
  .mc.rv:not(.in) .mc-dots .dot { transform: scale(0); }
  .mc.rv .mc-dots .dot { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) var(--c, 0ms); }
}
/* reduce motion switched on mid-visit: anything still waiting shows its final frame (the OS setting, then the Accessibility panel) */
@media (prefers-reduced-motion: reduce) {
  .map.map-wait path.has, .print-wait .receipt > *, .stamp-wait .verdict, .lt-wait .lt-dot, .bb-wait .bb-mark, .chart.draw .pt, .chart.draw .lbl { opacity: 1 !important; }
  .bb-wait .bb-make, .bb-wait .bb-use, .bb-wait .bb-mark, .mc .mc-dots .dot { transform: none !important; }
  .chart.draw .ln { stroke-dashoffset: 0 !important; }
}
:root[data-motion="reduced"] .map.map-wait path.has, :root[data-motion="reduced"] .print-wait .receipt > *, :root[data-motion="reduced"] .stamp-wait .verdict, :root[data-motion="reduced"] .lt-wait .lt-dot, :root[data-motion="reduced"] .bb-wait .bb-mark { opacity: 1 !important; }
:root[data-motion="reduced"] .bb-wait .bb-make, :root[data-motion="reduced"] .bb-wait .bb-use, :root[data-motion="reduced"] .bb-wait .bb-mark, :root[data-motion="reduced"] .mc .mc-dots .dot { transform: none !important; }
:root[data-motion="reduced"] .rp-ring { display: none; }
:root[data-motion="reduced"] .rp-lbl, :root[data-motion="reduced"] .rp-dot { opacity: 1; }
@media print { .map.map-wait path.has, .print-wait .receipt > *, .stamp-wait .verdict { opacity: 1 !important; } }
/* a recycled share the brand gives only as a minimum ("17.7%+"): the dotted line, as on "not disclosed", says a tap or hover explains it */
.v.rec.has-def, .s.g.has-def { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
/* waiting states go on with transitions off (app.js adds rv-set for that moment, and rv-first on the first screen, for the hero waffle too),
   so a part already drawn finished never fades out to animate in. Only parts not yet shown: anything already rising or filling keeps playing */
.rv-set .rv:not(.in), .rv-set .rv:not(.in) *, .rv-set .co-cell, .rv-first .waffle i, .rv-first .waffle i::before, .rv-first .waffle i::after { transition: none !important; }
/* cobalt tiles: the sourced figure stays in the page while the tile waits empty; the count from 0% starts when it fills */
.co-wait .co-cell.rec em { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .co-wait .co-cell.rec em { opacity: 1; } }
:root[data-motion="reduced"] .co-wait .co-cell.rec em { opacity: 1; }
/* printing before scrolling: every chart still waiting prints finished (the cobalt figures are already the real ones) */
@media print {
  .co-wait .co-fill { transform: scaleY(var(--p, 1)) !important; }
  .co-wait .co-cell.rec { border-color: var(--green); }
  .co-wait .co-cell.rec em { opacity: 1; color: inherit; }
  .lt-wait .lt-dot, .chart.draw .pt, .chart.draw .lbl { opacity: 1 !important; }
  .chart.draw .ln { stroke-dashoffset: 0 !important; }
  .matrix.stamp .dot, .mc .mc-dots .dot { transform: none !important; }
}

/* ===== v2.0: phone, desktop and contrast layout (lane 2) ===== */
/* narrow phones (under 375px, e.g. 360px Android): the theme toggle shows only its icon, like the pills beside it, so Support stays on the first row; its aria-label still names it */
@media (max-width: 374px) { #theme-btn .t-label { display: none; } #theme-btn { padding: 5px 6px; } }

/* touch screens: tap areas of about 40px. Where space is tight the hit area grows invisibly, so the look stays the same */
@media (pointer: coarse) {
  /* header pills: the hit area reaches up and down into the bar's padding (sideways only 2px: the pills sit 5px apart) */
  .theme-btn, .bar-support { position: relative; }
  .theme-btn::after, .bar-support::after { content: ""; position: absolute; inset: -9px -2px; }
  /* section links: taller links, with the row's own padding trimmed by the same amount so nothing moves */
  .bar-in .nav a { padding-block: 8px; }
  .bar-in .nav { padding-top: 2px; }
  .bar-in { padding-bottom: 2px; }
  /* chips, tabs and buttons */
  .filters button, .waffle-tabs button, .trend-controls button, .country-tabs button { min-height: 40px; }
  .btn-sm { height: auto; min-height: 40px; }
  .more { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; }   /* its all: unset drops the page's border-box */
  .fold-btn, .fold-btn.opt-more { min-height: 40px; }
  details.r-src > summary, details.o-src > summary { display: flex; align-items: center; min-height: 40px; }
  /* model names in the five-year cards and table */
  .t-cards .tc li > div button { display: flex; align-items: center; min-height: 32px; padding-block: 5px; box-sizing: border-box; }
  #history td > button { display: inline-flex; align-items: center; min-height: 32px; padding-block: 5px; box-sizing: border-box; }
  /* small "source" links: a taller hit area that takes no extra room */
  .stat > a, .fn a, .opt-fact a, .hst a, .b-link a, .ml-name a { display: inline-block; min-height: 32px; padding-block: 8px; margin-block: -8px; }
  #owner-list .o-share a { display: inline-block; padding: 8px 10px; margin: -8px -10px -8px -6px; }   /* id beats the #owner-list a rule above */
}
@media (pointer: coarse) and (max-width: 860px) {
  .bar-in .nav { padding-top: 4px; }
  .bar-in { padding-bottom: 6px; }
}
/* phone held sideways: a slimmer sticky header, same layout */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .bar-in { padding-top: 6px; padding-bottom: 2px; }
  .bar-in .nav { margin-top: 4px; }
}

/* phones: small print a step larger so it stays readable (desktop sizes unchanged) */
@media (max-width: 700px) {
  .r-line .p, .r-note, .r-carbon-key, .r-src, .r-foot { font-size: 12.5px; }
  .r-you { font-size: 13px; }
  .lt-lbl { font-size: 10.5px; }               /* was 9px; the count already stacks above the label */
  .el-split .el .nm { font-size: 11px; -webkit-hyphens: auto; hyphens: auto; }   /* 11px keeps names such as Molybdenum on one line; Praseodymium breaks with a hyphen, not mid-word */
  .el-split .el .am { font-size: 11px; }
  .el-split .el { padding-inline: 6px; }       /* a little more room across, so names and amounts at this size stay on one line */
  .el-split .elements { grid-auto-rows: max-content; }   /* each row fits its tile: the zero-height scrolling column otherwise squeezes every row to the 70px minimum, so a second line spilled out */
  .el-split .el-detail dt { font-size: 12px; }
  .tag, .st, .opt-reg, .bb-keys, .bb-mark span { font-size: 11px; }
  .lv-body h4 { font-size: 12px; }
}

/* narrow phones: the Accessibility panel's text-size label sits above its buttons, so the control fits at every text size */
@media (max-width: 440px) {
  .a11y-in { gap: 10px 18px; padding: 12px 14px; }
  .a11y-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .a11y-row legend { float: none; margin: 0 0 6px; padding: 0; }
}

/* claims: the page keeps the height of the tallest pair (set in app.js), with any spare room below the cards */
.claims.carousel { align-content: start; }
/* a second set of arrows under the card on phones and tablets, so a long card never leaves you hunting for them */
.car-nav-foot { margin: 14px 0 0; }
@media (min-width: 801px) { .car-nav-foot { display: none; } }
/* one card at a time: the verdict stamp's oversized first frames stop at the screen edge instead of widening the page (Chrome on Android then let it pan sideways) */
@media (max-width: 800px) { .claims.carousel { overflow-x: clip; overflow-clip-margin: 20px; } }

/* phones: chart and map tips keep their natural width (up to their max) and app.js keeps them inside the chart, instead of squeezing into a tall strip near the right edge */
@media (max-width: 760px) { .tip, .map-tip { width: max-content; } }

/* tablets (761-940px, e.g. iPad portrait): the disclosure, watchdog and year-by-year tables fit the screen,
   instead of hiding the Score column and the last brands past the edge with no sign that they scroll */
@media (min-width: 761px) and (max-width: 940px) {
  .matrix, .watch, .history { min-width: 0; }
  .matrix th, .matrix td { padding-inline: 4px; }
  .matrix thead th { font-size: 10.5px; -webkit-hyphens: auto; hyphens: auto; }   /* long header words ("environmental") may hyphenate, leaving room for the score bars */
  .matrix .score-in { gap: 6px; }
  .matrix .score b { font-size: 13px; }   /* 4em still fits "7.5/10" */
  .matrix .track { min-width: 36px; }
  /* at a larger text size a table can still need a sideways scroll: its right edge then fades until you reach the end */
  .table-scroll:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
}
/* the brand notes under the disclosure rows keep a readable line length on wide screens */
.matrix tr.note .m-note { max-width: 46em; }

/* watchdogs: the findings read as a lead paragraph under a short heading, not as a six-line heading */
.sub-sec > .watch-lede { font-size: 18px; color: var(--ink); margin-bottom: 0; max-width: 40em; }
@media (max-width: 760px) { .sub-sec > .watch-lede { font-size: 17px; } }
/* phones list unassessed brands as "Not assessed" in each card, so the note about the table's "n/a" is left out there */
@media (max-width: 760px) { #watch-caveat .na-note { display: none; } }

/* grids that divide evenly on wider screens, so no card is left alone on a last row (phones unchanged) */
@media (min-width: 901px) {
  /* the nine brand tabs beside the hero waffle: two balanced lines (4 + 5), not 7 + 2 */
  .waffle-tabs { display: block; text-align: center; text-wrap: balance; }
  .waffle-tabs button { display: inline-block; margin: 2px; }
}
/* ten evidence cards: 5 + 5 on desktop (a slightly smaller figure keeps "Nearly 80,000 ha" on one line), 2 x 5 on tablets */
@media (min-width: 1100px) { .evidence { grid-template-columns: repeat(5, minmax(0, 1fr)); } .evidence .ev b { font-size: 24px; } }
@media (min-width: 761px) and (max-width: 1099px) { .evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* six Solutions evidence cards: 3 + 3 */
@media (min-width: 761px) { .opt-ev { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* five things: three then two wider cards that fill the row */
@media (min-width: 721px) and (max-width: 1100px) {
  .five-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .five-card { grid-column: span 2; }
  .five-card:nth-child(n+4) { grid-column: span 3; }
}

/* Use this data: as wide as the Brands Outside card above it (its text keeps the reading width) */
.method > .datause { max-width: none; }
/* its eight download buttons: two even rows of four on wider screens, never seven and one left over */
@media (min-width: 761px) { .dl-row { display: grid; grid-template-columns: repeat(4, max-content); } .dl-row .btn { justify-content: center; } }

/* contrast: greys on the Solutions green field and its glow, this section only. Dark theme: the field lifts the ground, so the page's
   greys fell to 2.9-4.3:1; lighter greys give 4.7:1 or more. Light theme: the glow's deepest green took small grey text on phones to 4.2:1;
   slightly darker greys give 5:1 or more. High contrast keeps its own full-strength ink */
:root:not([data-contrast="high"]) .sec-stop { --ink-2: #484842; --ink-3: #50504A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-contrast="high"]) .sec-stop { --ink-2: #DADCD4; --ink-3: #C8CBC2; } }
:root[data-theme="dark"]:not([data-contrast="high"]) .sec-stop { --ink-2: #DADCD4; --ink-3: #C8CBC2; }
/* contrast: high contrast in the light theme darkens the orange and yellow tags and verdicts a step further (the dark theme keeps its bright values) */
:root[data-contrast="high"][data-theme="light"] { --tag-orange: #8A3E0F; --tag-yellow: #624B00; }
/* contrast: the claims label sits on the gold glow, which lifts the ground; --ink-2 keeps it above 4.5:1 */
#claims .sec-head .label { color: var(--ink-2); }

/* no hard lines: on phones the evidence rules and the Solutions headings run gutter to gutter, so they fade at both ends like .stat-row (desktop cards keep plain rules) */
@media (max-width: 760px) { .ev { border-top-color: transparent; border-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent) 1; } }
@media (max-width: 700px) { .opt-sec h3 { border-bottom-color: transparent; border-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent) 1; } }
/* the chain in two columns (900px and below): each row's track starts at its first node and fades out after the second, instead of stopping at the edge */
@media (max-width: 900px) { .chain li:nth-child(even) { border-image: linear-gradient(90deg, var(--ink) 40px, transparent) 1; } }

/* --- v2.0 polish (QA round 2) --- */
/* phones: a definition word keeps at least 8px clear of the link or button above it, since iOS Safari moves a tap that lands close to a link onto the link */
@media (max-width: 760px) {
  .tc-h { gap: 10px; }
  .tc li > div > button { margin-bottom: 8px; }
  .lib .d { display: block; margin-top: 8px; }
  .lib .d + br { display: none; }
  .support-orgs li > a + span { margin-top: 8px; }
}
/* touch screens: the lever chips ("Since weakened", "Revision pending") take a line of their own under the law, with a 40px tap area
   that keeps their look, and the "Details" link beside them is as easy to tap */
@media (pointer: coarse) {
  .lv-body .lv-track { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 6px; white-space: normal; }
  .lv-body .lv-track .st { position: relative; }
  .lv-body .lv-track .st::after { content: ""; position: absolute; inset: -11px -4px; }
  .lv-body .lv-track .lv-go { display: inline-flex; align-items: center; gap: .3em; min-height: 40px; padding-block: 0; margin-left: 0; }   /* (gap: a flex row drops the space before the arrow) */
}
/* touch screens: these two keep their open/close marker (the 24px tap rule above makes summaries inline blocks, which drops it) */
@media (pointer: coarse) { .glossary > summary, .market-box > summary { display: list-item; } }
/* phone disclosure cards: one link to the brand's own documents on its receipt, at the card's foot */
@media (max-width: 760px) {
  .mc > .mc-go { margin: -12px 16px 8px; font-size: 13px; }
  .mc-go a { display: inline-block; padding-block: 12px; color: var(--ink-2); }
}
/* the printed brief: levers run on from page to page (each is longer than a page, so keeping one whole only left pages near empty);
   a heading never ends a page, a point never splits, and cards print without their screen tint */
@media print {
  .print-kit .lever { break-inside: auto; }
  .print-kit .lever > summary, .print-kit .lv-body h4, .print-kit .kit-lib h3 { break-after: avoid; }
  .print-kit .lv-body li, .print-kit .lib li { break-inside: avoid; }
  .print-kit .lever, .print-kit .lever * { background: transparent !important; }
}
/* the countries hint sits under its heading with the same 12px as every other sub-section's first line */
.sub-sec > h3 + .tag-key { margin-top: 12px; }
/* no hard lines: the law track's axis fades at both ends (its first and last stops sit well inside them) */
.lt-line { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* five things in one row: each card's source list takes two lines' room, so every "See the evidence" sits at the same height */
@media (min-width: 1101px) { .five-src { min-height: calc(2 * 18.4px + 2px + 14px); align-content: flex-start; } }
/* tablets: the disclosure headers break only at the points set in app.js ("environ-mental"), never into two-letter pieces;
   wider screens keep every header word whole, as before */
.matrix thead th { -webkit-hyphens: none; hyphens: none; }
@media (min-width: 761px) and (max-width: 940px) { .matrix thead th { -webkit-hyphens: manual; hyphens: manual; } }
/* the chapter rail takes clicks only on its bars, so its unseen labels and link boxes never cover the controls beside it */
.rail { pointer-events: none; }
.rail-bar { pointer-events: auto; }
/* no rail where it would sit over the content (the larger text sizes) or where its names could never show (a touch screen below 1440px,
   such as an iPad Pro held sideways): the header's links, which mark the current chapter, do its job there */
@media (max-width: 1439px) { :root[data-size="lg"] .rail { display: none; } }
@media (max-width: 1599px) { :root[data-size="xl"] .rail { display: none; } }
@media (hover: none) and (max-width: 1439px) { .rail { display: none; } }
/* Larger text on a small phone: the first claim's verdict chip drops under the claim instead of being cut off at the edge */
@media (max-width: 420px) { :root[data-size="xl"] .claim-top { flex-wrap: wrap; row-gap: 10px; } }
/* phones: the ring round a landed country tab or claim is drawn inside it, since the swipe row and the carousel clip anything outside */
@media (max-width: 760px) {
  .claim.landed::after { inset: 0; }
  #country-tabs button.landed::after { inset: 0; box-shadow: inset 0 0 0 2px var(--green); }
}
/* the trend chart's tip keeps its natural width wherever the chart is drawn at its real width (app.js keeps it inside the chart) */
@media (max-width: 1040px) { .tip { width: max-content; } }
/* keyboard focus on the sticky header's own controls never scrolls the page: the scroll padding would count them as covered */
.bar a, .bar button, .bar input { scroll-margin-top: -400px; }

/* ===== v2.0: content, definitions and accessibility (lane 3) ===== */
/* source links beside the figures they back: small and quiet, but always there */
.five-src { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.five-src a, .cap-src, .mc-src a, .co-src a, .mass-src a, .el-src a { color: var(--ink-3); }
.cap-src { font-size: 12px; white-space: nowrap; }
/* (--ink-2: this 12px line sits on the section's glow, where --ink-3 fell just under 4.5:1) */
.m-srcs { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.mc-src { font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.m-src { margin-top: 12px; }
.co-src { margin-top: 14px; }
.mass-src { margin-top: 12px; }
.el-detail .el-src { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
/* owner cards: supply-chain facts that are not a brand-list link get a plain label, not a coloured tag */
.o-lab { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
/* touch screens: the new source links are easy to tap (at least 24px tall) */
@media (pointer: coarse) {
  .cap-src, .m-srcs a, .mc-src a, .co-src a, .mass-src a, .el-src a, .m-src a, .cobalt .src-inline a, #inside > .fine a { display: inline-block; min-height: 24px; padding-block: 4px; }
}
/* keyboard focus: the model buttons in the year-by-year table and its phone cards use all: unset, which drops the page's focus ring, so it is put back */
.history td button:focus-visible, .tc li > div button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.history td button:focus-visible .m { color: var(--green); }
/* screen-reader headings and row headers that look exactly as before: lever titles, quoted claims, brand names in the tables */
h3.lv-t { line-height: inherit; text-wrap: inherit; }
.claim-q { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-wrap: inherit; }
.claim-q q { display: block; }
.matrix tbody th { text-align: left; width: 12%; font-weight: 600; font-size: 15px; }
.matrix tbody tr.row th { border-bottom: 0; }
.history tbody th { font-weight: 600; }
/* Large and Larger text: Safari's phone model menu spills past its box when zoomed and lets the page pan sideways.
   Its label clips the spill; the padding keeps the focus ring inside and the negative margin keeps the layout the same */
:root[data-size] .slot-pick label { overflow: hidden; padding: 4px; margin: -4px; }

/* ===== v2.0: new features ===== */
/* made before you buy: the band and ticks join the other waiting parts' final frame under both reduce-motion settings, and in print */
@media (prefers-reduced-motion: reduce) { .bb-wait .bb-band, .bb-wait .bb-tick { opacity: 1 !important; transform: none !important; } }
:root[data-motion="reduced"] .bb-wait .bb-band, :root[data-motion="reduced"] .bb-wait .bb-tick { opacity: 1 !important; transform: none !important; }
@media print { .bb-wait .bb-make, .bb-wait .bb-band, .bb-wait .bb-use, .bb-wait .bb-tick, .bb-wait .bb-mark { opacity: 1 !important; transform: none !important; } }

/* all the claims at a glance: collapsed under the carousel arrows */
.claims-index { margin: 0 0 18px; }
.claims-index > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 44px; padding: 6px 0; cursor: pointer; border-radius: 6px; }
.claims-index > summary::-webkit-details-marker { display: none; }
.ci-t { display: inline-flex; align-items: baseline; gap: 8px; font: 600 16px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.ci-t::after { content: '▾'; content: '▾' / ''; font-size: 12px; color: var(--ink-3); }
.claims-index[open] .ci-t::after { content: '▴'; content: '▴' / ''; }
.ci-mix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ci-v { display: inline-flex; align-items: center; gap: 6px; }
.ci-v b { font: 500 12.5px var(--mono); color: var(--ink-2); }
.claims-index .verdict { font-size: 10px; padding: 3px 6px; }
@media (hover: hover) { .claims-index > summary:hover .ci-t::after { color: var(--ink); } }
.ci-list { list-style: none; margin: 6px 0 0; padding: 0; }
/* rows part with hairlines that fade at both ends */
.ci-list li { border-top: 1px solid; border-image: linear-gradient(90deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent) 1; }
.ci-list button { display: grid; grid-template-columns: 26px 118px minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; min-height: 40px; padding: 7px 4px; background: none; border: 0; border-radius: 4px; color: var(--ink-2); font: 14.5px/1.4 var(--sans); text-align: left; cursor: pointer; }
.ci-list .verdict { justify-self: start; }
.ci-list q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-n { font: 500 12px var(--mono); color: var(--ink-2); }   /* --ink-2 and --ink: small numbers on the gold glow, where --ink-3 and green fell under 4.5:1 */
/* the claims on show in the carousel */
.ci-list button[aria-current] { color: var(--ink); }
.ci-list button[aria-current] .ci-n { color: var(--ink); }
@media (hover: hover) { .ci-list button:hover { color: var(--ink); } }
/* phones: the chip above its claim, two lines of the claim, 44px rows */
@media (max-width: 760px) {
  .ci-list button { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "n v" "n q"; align-items: start; row-gap: 5px; min-height: 44px; padding: 9px 2px; font-size: 14px; }
  .ci-n { grid-area: n; padding-top: 3px; }
  .ci-list .verdict { grid-area: v; }
  .claims-index .verdict { font-size: 10.5px; }
  .ci-list q { grid-area: q; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media print { .claims-index { display: none !important; } }

/* policy levers: a law the tracker marks Weakened, or with a revision pending, says so beside it */
.lv-track { white-space: nowrap; }
.lv-body .lv-track .st { padding: 3px 6px; vertical-align: 1px; }
.lv-body .lv-go { color: var(--ink-3); font-size: 12.5px; margin-left: 4px; }
@media (hover: hover) { .lv-body .lv-go:hover { color: var(--ink); } }
@media (pointer: coarse) { .lv-body .lv-go { display: inline-block; min-height: 24px; padding-block: 4px; } }

/* the printed brief: numbered links, a source list with full addresses, the date and how to cite at the top, the legal note at the end.
   The added parts exist only while printing, and never show on screen */
@media screen { .print-inject { display: none !important; } }
@media print {
  .print-kit summary::marker, .print-kit summary::-webkit-details-marker { display: none; }
  .print-kit .lever > summary::after { content: none; }
  .print-kit .lv-go { display: none !important; }
  .print-head { margin: 0 0 20px; font: 9.5pt/1.5 var(--sans); }
  .print-head p { margin: 0 0 4px; }
  .pref { font: 6.5pt/0 var(--mono); vertical-align: super; margin-left: 1px; }
  .print-refs { margin-top: 28px; }
  .print-refs h3 { font: 600 13pt/1.3 var(--sans); margin: 0 0 8px; }
  .print-refs ol { margin: 0; padding-left: 3em; font: 7.5pt/1.45 var(--mono); }
  .print-refs li { margin: 0 0 3px; overflow-wrap: anywhere; break-inside: avoid; }
  .print-refs .pr-u { display: block; }
  .print-legal { margin-top: 20px; font: 8pt/1.5 var(--sans); }
}

/* show the working: every disclosure dot is a button that shows its evidence in the brand's note row.
   A round 32px hit area around the 12px dot, with no fill (the negative margin keeps the rows their height); the open dot keeps a ring.
   The stamp-in still moves only the dot inside, never the button */
.dot-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -10px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; cursor: pointer; vertical-align: middle; }
.dot-btn:focus-visible { border-radius: 50%; outline-offset: 0; }
.dot-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
@media (hover: hover) { .dot-btn:hover { box-shadow: inset 0 0 0 1px var(--rule-2); } .dot-btn[aria-expanded="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.m-note .mn-ev p { margin: 0; }
.m-note .mn-ev b { color: var(--ink); font-weight: 600; }
.m-note .mn-fine { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.mn-back { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .mn-back:hover { color: var(--ink); } }
@media (pointer: coarse) { .mn-back, .m-note .mn-ev a { display: inline-block; min-height: 24px; padding-block: 4px; } }
/* phone cards: "Why" under each item below 1 opens its evidence; "Sources" under a published one goes to the receipt.
   Both are 44px tall, reaching into the gaps above and below so the list stays compact */
@media (max-width: 760px) {
  .mc li > .mc-why, .mc li > .mc-rcpt { grid-column: 2 / -1; margin: -10px 0 -8px; }
  .mc-why > summary, .mc-rcpt { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
  .mc-why > summary { list-style: none; }
  .mc-why > summary::-webkit-details-marker { display: none; }
  .mc-why > summary::after { content: '\00a0▾'; content: '\00a0▾' / ''; color: var(--ink-3); }
  .mc-why[open] > summary::after { content: '\00a0▴'; content: '\00a0▴' / ''; }
  .mc-rcpt { justify-self: start; gap: .5em; text-decoration: none; }   /* (a flex row drops the space before the arrow) */
  .mc-why p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
  .mc-why .mc-why-src { margin-bottom: 12px; font-size: 12px; color: var(--ink-3); }
  .mc-why .mc-why-src a { display: inline-block; min-height: 24px; padding-block: 4px; color: var(--ink-2); }
}

/* required on the EU label vs not: a lede, two columns parted by a hairline that fades at both ends (stacked on phones), a footnote */
.req-vol { margin-top: 56px; }
.rq-lede { margin: 0 0 26px; max-width: 34em; font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.rq-cols { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.rq-col h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.rq-list { list-style: none; margin: 0; padding: 0; }
/* phones and tablets: the label, then the dots with their count beside them */
.rq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l l" "d c" "s s" "w w"; column-gap: 16px; align-items: center; padding: 12px 0; }
.rq-row + .rq-row { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--rule) 10%, var(--rule) 90%, transparent) 1; }
.rq-l { grid-area: l; font-size: 15px; color: var(--ink); }
.rq-c { grid-area: c; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rq-n { font: 600 16px var(--mono); white-space: nowrap; }
.rq-n span { font-weight: 400; color: var(--ink-2); }
.rq-p { font: 12px var(--mono); color: var(--ink-3); white-space: nowrap; }
/* the nine dots are one 44px target: hover, tap or Tab names each brand's value */
.rq-dots { grid-area: d; justify-self: start; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 6px; margin-inline: -6px; border-radius: 8px; }
@media (hover: hover) { .rq-dots:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } }
.rq-sub { grid-area: s; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.rq-law { grid-area: w; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.rq-law a, .rq-foot a { color: var(--ink-2); }
.rq-not { margin-top: 26px; padding-top: 22px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--rule-2) 12%, var(--rule-2) 88%, transparent) 1; }
.rq-foot { margin-top: 20px; max-width: 60em; line-height: 1.6; }
.rq-go { display: inline-flex; flex-wrap: wrap; gap: 0 16px; }
@media (hover: hover) { .rq-law a:hover, .rq-foot a:hover { color: var(--ink); } }
/* touch: taller tap areas on the links without spreading the footnote's lines apart */
@media (pointer: coarse) { .rq-law a, .rq-foot a { padding-block: 4px; } }
/* tablets and up: side by side, the hairline between them fading at top and bottom */
@media (min-width: 761px) {
  .rq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .rq-cols::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--rule-2) 12%, var(--rule-2) 88%, transparent); pointer-events: none; }
  .rq-not { margin-top: 0; padding-top: 0; border-top: 0; border-image: none; }
}
/* wide screens: each row reads across, label, dots, count, so the dots line up down both columns */
@media (min-width: 1061px) {
  .rq-row { grid-template-columns: minmax(0, 1fr) auto 76px; grid-template-areas: "l d c" "s s s" "w w w"; }
}
@media (max-width: 760px) { .rq-lede { font-size: 17px; } }
/* the dots stamp in once the column is on screen: hidden only after JS marks them, and never under either reduce-motion setting or in print */
.rq-wait .rq-dots .dot { opacity: 0; transform: scale(0); }
.rq-wait.rq-in .rq-dots .dot { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease; transition-delay: var(--c, 0ms); }
@media (prefers-reduced-motion: reduce) { .rq-wait .rq-dots .dot { opacity: 1 !important; transform: none !important; } }
:root[data-motion="reduced"] .rq-wait .rq-dots .dot { opacity: 1 !important; transform: none !important; }
@media print { .rq-wait .rq-dots .dot { opacity: 1 !important; transform: none !important; } }

/* links that land: Link and Copy citation are small outlined buttons, always shown (never only on hover) */
.lk-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; vertical-align: middle; }
.link-btn:not(.btn), .cite-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: none; color: var(--ink-2); font: 500 12px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.lk-i { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (hover: hover) { .link-btn:not(.btn):hover, .cite-btn:hover { color: var(--ink); border-color: var(--ink-3); } }
.lk-msg { font: 12px var(--mono); color: var(--ink-2); }
.lk-msg:empty { display: none; }
/* no clipboard: the address or citation, selected, to copy by hand */
.lk-copy { flex: 1 1 100%; min-width: 0; margin: 2px 0 0; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 12px/1.5 var(--mono); resize: none; }
/* where they sit: the last line of a claim's sources row, beside a law's official text, under a company's details, at the foot of a lever,
   at the top of a country's panel (its right-hand side on wider screens, the note then to the button's left). The note after a button
   never moves it */
.claim .srcs .lk-row { flex-basis: 100%; margin-top: 4px; }
.b-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.owner header .lk-p { margin: 6px 0 0; }
.lv-foot { grid-column: 1 / -1; margin: 0; }
.c-link { margin: 0 0 12px; }
@media (min-width: 761px) { .c-link { float: right; margin: 4px 0 12px 24px; } .c-link .lk-row { flex-direction: row-reverse; } }
/* phones: 44px tall */
@media (max-width: 760px) {
  .link-btn:not(.btn), .cite-btn { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .claim .srcs .lk-row { margin-top: 6px; }
}
@media print { .lk-row, .lv-foot, .c-link { display: none !important; } }
/* the item a link opened: a ring round it that fades over 2 s. Never under either reduce-motion setting (JS adds none either) */
.landed { position: relative; }
.landed::after { content: ''; position: absolute; inset: -6px -12px; border-radius: 12px; box-shadow: 0 0 0 2px var(--green); opacity: 0; pointer-events: none; animation: landed 2s var(--ease-out) forwards; }
.lever.landed::after { inset: -5px; border-radius: 18px; }
.country-tabs button.landed::after { inset: -5px; border-radius: 999px; }
@keyframes landed { 0%, 35% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .landed::after { display: none; } }
:root[data-motion="reduced"] .landed::after { display: none; }
@media print { .landed::after { display: none; } }

/* mined to refined (copper, bauxite): the rows slide and the bars stretch in app.js; the list's bars never regrow from zero on the switch,
   the map's fill swaps under a fading copy (no fill transition), and China's row glows once in the mineral's colour */
.map-list.morphing .ml-bar i { animation: none; }
.map.map-morph path { transition: none; }
.map .map-ghost { pointer-events: none; }
.map .map-ghost path { animation: none !important; }
.map-list li.ml-hl { position: relative; isolation: isolate; }
.map-list li.ml-hl::before { content: ''; position: absolute; inset: -3px -8px; z-index: -1; border-radius: 6px; background: color-mix(in srgb, var(--hl, var(--green)) 24%, transparent); opacity: 0; pointer-events: none; animation: ml-hl 1.2s ease-in-out forwards; }
@keyframes ml-hl { 40% { opacity: 1; } to { opacity: 0; } }
/* reduce motion: no glow, just a still tint for a moment (the kill switches stop the animation above) */
.map-list li.ml-hl.ml-still::before { animation: none; opacity: 1; }