/* ============================================================
   humantoll.css — the HumanToll section stylesheet.

   Loaded AFTER /themeV0.01.css and /topbar.css, so these rules win on equal
   specificity. Served `max-age=604800, immutable` by this section's .htaccess,
   so the URL carries ?v=<mtime> via ht_asset() — never edit-in-place and hope.

   EVERY COLOUR GOES THROUGH A TOKEN from themeV0.01.css. A hard-coded hex is
   invisible in the other skin, which is the whole reason the tokens exist.

   TWO CONTRAST RULES, inherited from what humanops S1 measured rather than
   rediscovered here:
     - --accent behind white text is 3.68:1 in the dark skin, under AA. Buttons
       and filled chips use --accent-deep (6.70:1).
     - --text-mute fails AA on --panel (3.62:1). It is never a body ink; use
       --text-dim on --panel/--bg (5.07 / 4.54).

   No inline styles anywhere in this section — the site sends a strict CSP with
   no 'unsafe-inline', so a style="" attribute is not a shortcut, it is a bug.

   Contents
     1. shell        wrap, sub-nav, skip link
     2. hero         badge, lead, answer
     3. preview      the publication gate block
     4. sections     headings, cards, grid, callout
     5. channels, steps, notlist, faq
     6. buttons, tiles, breadcrumb
     7. footer
     8. mobile
============================================================ */


/* ============================================================
   1. SHELL
============================================================ */

.ht-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

.ht-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--panel);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ht-skip:focus { left: 12px; top: 12px; }

/* The sub-nav scrolls horizontally rather than wrapping: seven items wrap to
   three ragged lines on a phone, and a single scrolling strip reads as one
   control. Same decision as humanops and cybersecurity. */
.ht-subnav {
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 20;
}
.ht-subnav__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.ht-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 12px 12px;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 0.94rem;
}
.ht-subnav__link:hover { color: var(--text-strong); background: var(--panel-hover); }
.ht-subnav__link[aria-current="page"] {
    color: var(--text-strong);
    border-bottom-color: var(--accent-deep);
    font-weight: 600;
}
/* A route that is reserved but not built yet. Rendered as text, not a link, so
   the crawl graph never contains a 404 — and marked, so a visitor is not left
   wondering why it does not respond.

   NO `opacity` HERE, and that is the point. The first draft dimmed these to
   0.72, which reads as "inactive" and measured 3.7:1 in the light skin —
   Lighthouse caught it at 96 on accessibility. Opacity is a contrast multiplier:
   it takes --text-dim on --panel from a passing 5.07:1 to a failing one, and it
   does it to every descendant at once, so the small "soon" chip inside failed
   too. The distinction is carried by the CHIP and the cursor instead, which is
   also better for anyone who cannot perceive a 30% lightness difference. */
.ht-subnav__link.is-soon { color: var(--text-dim); cursor: default; }
.ht-soon {
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-dim);
}


/* ============================================================
   2. HERO
============================================================ */

.ht-hero { padding: 40px 0 24px; }

.ht-badge {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.ht-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.ht-lead {
    margin: 0 0 20px;
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    line-height: 1.55;
    color: var(--text);
    max-width: 68ch;
}

/* The answer-first block: the quotable paragraph an answer engine extracts.
   Bordered on the leading edge so it reads as the page's claim rather than as
   more body copy. */
.ht-answer {
    margin: 0;
    padding: 16px 20px;
    max-width: 74ch;
    background: var(--panel);
    border-left: 3px solid var(--accent-deep);
    border-radius: 0 10px 10px 0;
    color: var(--text);
    line-height: 1.65;
}


/* ============================================================
   3. THE PUBLICATION GATE
   Shown wherever a figure will eventually appear, while PREVIEW is on.
   Deliberately prominent: the honesty about the gap is what will make the
   eventual number credible, so it is not a small grey footnote.
============================================================ */

.ht-preview {
    margin: 28px 0 8px;
    padding: 20px 22px;
    background: var(--panel-light);
    border: 1px dashed var(--border);
    border-radius: 12px;
    max-width: 74ch;
}
.ht-preview__h {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--text-strong);
}
.ht-preview p:last-child { margin: 0; color: var(--text-dim); line-height: 1.6; }


/* ============================================================
   4. SECTIONS
============================================================ */

.ht-section { padding: 34px 0; border-top: 1px solid var(--border-soft); }

.ht-section h2 {
    margin: 0 0 8px;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    letter-spacing: -0.01em;
    color: var(--text-strong);
}
.ht-section h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    color: var(--text-strong);
}
/* COLOUR IS INHERITED FROM THE SECTION, NOT SET ON THE PARAGRAPH.
   `.ht-section p { color: … }` is (0,1,1) and silently outranks every
   single-class paragraph modifier at (0,1,0) — .ht-floor, .ht-note, .ht-sublead
   and .ht-badge-inline were all losing to it. Three of those happened to be
   contrast-safe anyway so nothing looked wrong; .ht-badge-inline was white text
   that never became white, leaving --text on --accent-deep at 1.8:1, and
   Lighthouse caught it at 96 on the scenarios page in the light skin only.
   Setting the colour on the container makes it inherited, so a modifier class
   wins by simply existing. */
.ht-section { color: var(--text); }
.ht-section p { line-height: 1.62; }

.ht-sublead {
    margin: 0 0 22px;
    color: var(--text-dim);
    max-width: 70ch;
}

.ht-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.ht-card {
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.ht-card p { margin: 0; color: var(--text-dim); font-size: 0.95rem; }

/* A callout carries a statement the page needs the reader not to skim: the
   exclusion rule, and the production-phase-only scope. */
.ht-callout {
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin: 34px 0;
}
.ht-callout h2 { margin-bottom: 12px; }
.ht-callout p { max-width: 76ch; }
.ht-floor { color: var(--text-strong); }


/* ============================================================
   5. CHANNELS · STEPS · NOTLIST · FAQ
============================================================ */

.ht-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ht-channels li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}
/* --accent-deep, not --accent: white text on --accent is 3.68:1 in the dark
   skin and fails AA. This chip is small and would be the easiest place to miss
   it. */
.ht-chan {
    flex: 0 0 auto;
    min-width: 34px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--accent-deep);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}
.ht-channels p { margin: 0; color: var(--text-dim); font-size: 0.95rem; }

.ht-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ht-steps li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}
/* BELT AND BRACES FOR THE ONE WAY THIS GRID FAILS: anything that is not the
   number belongs in the text column. Markup that leaves the heading and the
   paragraph as separate children then costs an extra row instead of reflowing
   the prose into a 40px column, one word per line. */
.ht-steps li > :not(.ht-steps__n) { grid-column: 2; }
.ht-steps h3 { margin: 0 0 4px; }
.ht-steps__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-strong);
    font-weight: 700;
    font-size: 0.9rem;
}
.ht-steps p { margin: 0; color: var(--text-dim); font-size: 0.95rem; }

.ht-notlist { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: 10px; max-width: 78ch; }
.ht-notlist li { color: var(--text-dim); line-height: 1.6; }

.ht-faq { display: grid; gap: 8px; max-width: 82ch; }
.ht-faq details {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
}
.ht-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-strong);
    list-style: revert;
}
.ht-faq summary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.ht-faq p { margin: 10px 0 2px; color: var(--text-dim); line-height: 1.62; }


/* ============================================================
   6. BUTTONS · TILES · BREADCRUMB
============================================================ */

.ht-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.ht-btn {
    display: inline-block;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid var(--btn-border);
    background: var(--panel);
    color: var(--text-strong);
    text-decoration: none;
    font-weight: 600;
}
.ht-btn:hover { background: var(--panel-hover); }
.ht-btn--primary {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--on-accent);
}
.ht-btn--primary:hover { background: var(--accent-strong); }
.ht-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.ht-tile {
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ht-tile__v { font-size: 1.4rem; font-weight: 700; color: var(--text-strong); }
.ht-tile__l { font-size: 0.85rem; color: var(--text-dim); }

.ht-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; }
.ht-crumb li { color: var(--text-dim); font-size: 0.88rem; }
.ht-crumb li + li::before { content: "/"; margin-right: 6px; color: var(--text-dim); }


/* ============================================================
   7. FOOTER
============================================================ */

.ht-secfooter {
    padding: 30px 20px 26px;
    border-top: 1px solid var(--border);
    margin-top: 20px;
}
.ht-note { margin: 0 0 10px; color: var(--text-dim); font-size: 0.92rem; }

.ht-footlinks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.ht-footlinks a { color: var(--text-dim); text-decoration: none; font-size: 0.92rem; }
.ht-footlinks a:hover { color: var(--text-strong); text-decoration: underline; }
/* Same rule as the sub-nav: no opacity. --text-dim on --bg is 4.54:1 and passes
   AA on its own; 0.66 of it does not. */
.ht-footlinks .is-soon { color: var(--text-dim); font-size: 0.92rem; font-style: italic; }

.ht-langswitch { display: flex; gap: 10px; margin: 0 0 16px; }
.ht-langswitch a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ht-langswitch a[aria-current="true"] { color: var(--text-strong); border-color: var(--accent-deep); }

/* The standing disclaimer. Small, but --text-dim rather than --text-mute:
   --text-mute is 3.62:1 on --panel and fails AA, and this is the paragraph a
   sceptical reader is most likely to actually read. */
.ht-disclaimer {
    margin: 0;
    max-width: 92ch;
    color: var(--text-dim);
    font-size: 0.84rem;
    line-height: 1.6;
}


/* ============================================================
   9. DOCUMENT PAGES  (methodology, scenarios)
   Long-form, translated, structured. Everything here is rendered by
   ht_section_html() or from a database row, so the two locales cannot drift
   apart in shape — only in words.
============================================================ */

/* Visually hidden, but read by a screen reader. Used for table captions: a
   <table> without a caption is an unlabelled region, and adding a visible one
   above every parameter grid would be noise for a sighted reader. */
.ht-vh {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The version block. <dl>, not a table: it is a set of name/value facts about
   one thing, which is exactly what a description list is for. */
.ht-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 22px 0 0;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-width: 74ch;
}
.ht-meta dt { color: var(--text-dim); font-size: 0.88rem; }
.ht-meta dd { margin: 0; color: var(--text-strong); font-size: 0.92rem; }
.ht-ok   { color: var(--success); font-size: 0.86rem; }

/* A frozen version whose document changed underneath it. --danger-deep, not
   --danger: themeV0.01 grew the -deep variant precisely because --danger behind
   text fails AA, and this is an alert nobody should struggle to read. */
.ht-warn {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--danger-deep);
    border-left-width: 3px;
    border-radius: 0 10px 10px 0;
    background: var(--panel);
    color: var(--text-strong);
    max-width: 74ch;
}

/* The pull-out claim at the head of a section: the sentence the section exists
   to defend. Not a decorative quote — it is the load-bearing statement. */
.ht-claim {
    margin: 0 0 16px;
    padding: 14px 20px;
    border-left: 3px solid var(--accent-deep);
    background: var(--panel);
    border-radius: 0 10px 10px 0;
    max-width: 76ch;
}
.ht-claim p { margin: 0; color: var(--text-strong); font-size: 1.02rem; line-height: 1.6; }

/* Tables scroll inside their own box rather than pushing the page sideways. */
.ht-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 0;
    font-size: 0.93rem;
}
.ht-table th, .ht-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.ht-table thead th { color: var(--text-strong); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ht-table tbody th { color: var(--text-strong); white-space: nowrap; }
.ht-table td { color: var(--text); }
.ht-table tr.is-soon td, .ht-table tr.is-soon th { color: var(--text-dim); font-style: italic; }
.ht-dim { color: var(--text-dim); font-size: 0.9rem; }

.ht-params { max-width: 76ch; }
.ht-params tbody th { font-weight: 500; color: var(--text-dim); width: 46%; white-space: normal; }
.ht-params td { color: var(--text-strong); font-variant-numeric: tabular-nums; }

.ht-grades {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
    margin: 18px 0 0;
    max-width: 80ch;
}
.ht-grades dt {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-strong);
    padding-top: 2px;
}
.ht-grades dd { margin: 0; color: var(--text-dim); line-height: 1.6; }

.ht-scenario h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ht-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72em;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-dim);
}
.ht-badge-inline {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    background: var(--accent-deep);
    color: var(--on-accent);
    border-radius: 6px;
    font-size: 0.84rem;
}
/* Marks a parameter that is not yet evidence-backed. Not colour alone — the
   asterisk carries the meaning for anyone who cannot distinguish the hue. */
.ht-prov { color: var(--warn); font-weight: 700; }

.ht-cite code {
    display: block;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 760px) {
    .ht-meta, .ht-grades { grid-template-columns: 1fr; gap: 2px 0; }
    .ht-meta dd, .ht-grades dd { margin-bottom: 10px; }
    .ht-params tbody th { width: auto; }
}

/* ============================================================
   8. MOBILE
============================================================ */

@media (max-width: 760px) {
    .ht-wrap { padding: 0 16px; }
    .ht-hero { padding: 26px 0 18px; }
    .ht-section { padding: 26px 0; }
    .ht-callout { padding: 18px; }
    .ht-channels li { flex-direction: column; gap: 10px; }
    .ht-steps li { grid-template-columns: 1fr; }
    /* One column now, so the guard above has to release the text or grid would
       open an implicit second column to hold it. */
    .ht-steps li > :not(.ht-steps__n) { grid-column: 1; }
    .ht-steps__n { margin-bottom: 2px; }
    .ht-answer { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   10. THE SOURCE REGISTER  (/sources/)
   Six tables of provenance. Everything here is rendered from
   data_sources x data_releases x licences, so the styling has to
   survive rows that are honest about being incomplete.
============================================================ */

/* A permitted/forbidden badge. The WORD carries the meaning and the colour only
   reinforces it: a reader who cannot distinguish the hues loses nothing, and the
   S1 finding stands — never dim a token with opacity, pick one that passes. */
.ht-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.82rem;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-strong);
}
.ht-flag.is-yes { border-color: var(--success); }
.ht-flag.is-no  { border-color: var(--danger-deep); }
/* THE TWO CLEARANCES THAT ARE NOT CITATIONS. --warn while a publisher has been
   asked and has not answered, --success once one has granted it in writing. Same
   rule as above: the words in the chip carry it, the border only sorts them at a
   glance — and is-pending had no border at all until 2026-09-22, which made the
   one state this register exists to publish the one state it did not mark. */
.ht-flag.is-pending { border-color: var(--warn); }
.ht-flag.is-granted { border-color: var(--success); }

/* The credit lines. Selectable, wrapping, monospace — they exist to be copied
   into somebody else's footnote, so they must survive a copy-paste intact. */
.ht-attrib { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ht-attrib code {
    display: block;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-deep);
    border-radius: 0 8px 8px 0;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 92ch;
}

/* A checksum is an identifier, not prose: it must not hyphenate or reflow. */
.ht-sha {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Long upstream URLs would otherwise push the table sideways past its own
   scroll container. */
#releases .ht-table td a { word-break: break-all; }

/* `.ht-table tbody th` is nowrap, which is right for a country or a channel code
   and wrong for "Creative Commons Attribution-NonCommercial-ShareAlike 3.0 IGO":
   it held the first column at ~420px and pushed the "Reviewed" column out of the
   scroll box on a 1280px desktop. Six columns of licence flags are only useful
   together. */
#sources .ht-table th[scope="row"],
#licences .ht-table th[scope="row"],
#not-used .ht-table th[scope="row"] { white-space: normal; min-width: 14ch; }
#licences .ht-table th[scope="row"] { min-width: 22ch; }

/* Nine of the ten feeds are unverified today, and `is-soon` italicises the whole
   row — which reads as "this one is different" for one row out of five on the
   methodology page and as "this entire table is provisional" for nine out of ten
   here, on top of a long run of italic body text being measurably harder to
   read. The dimming stays (it is --text-dim, which passes AA, not an opacity
   multiplier — S1) and the "Licence verified" column says it in words. */
#sources .ht-table tr.is-soon td,
#sources .ht-table tr.is-soon th,
#licences .ht-table tr.is-soon td,
#licences .ht-table tr.is-soon th { font-style: normal; }

/* A licence cleared on the operator's authority while written confirmation is
   outstanding. Its own state, not a green tick and not a blank: --warn carries
   "unsettled" without implying "refused", and the WORD does the work. */
.ht-flag.is-pending { border-color: var(--warn); }


/* ============================================================
   9. ATTRIBUTION — S9

   The share bar, the scenario switch and the score matrix.

   ONE EXCEPTION TO THIS FILE'S OWN COLOUR RULE, AND IT IS DELIBERATE. Every
   other colour here goes through a token from themeV0.01.css, because a
   hard-coded hex is invisible in the other skin. A CATEGORICAL CHART PALETTE
   cannot: the theme has one accent and its tints, and a stacked bar needs eight
   hues nobody confuses with each other. So eight are defined here, in both
   skins — which honours the reason for the rule (no colour that disappears when
   the skin changes) rather than its letter.

   The hues are Okabe-Ito, the standard colour-blind-safe qualitative set, and
   the bar is never the only carrier of the information: every segment has a
   <title>, and the table directly beneath it says the same thing in words and
   numbers. Colour here is reinforcement, which is what WCAG 1.4.1 asks for.
============================================================ */

:root {
    --ht-c-energy:      #d55e00;
    --ht-c-mining:      #6a3d9a;
    --ht-c-agriculture: #009e73;
    --ht-c-forestry:    #8c6d31;
    --ht-c-water:       #0072b2;
    --ht-c-transport:   #56b4e9;
    --ht-c-trade:       #e69f00;
    --ht-c-arms:        #cc79a7;
    --ht-c-sink:        var(--text-mute);
}
[data-theme="dark"] {
    /* Lifted, because the same hue that reads as solid on paper-white reads as a
       hole on the dark ground. */
    --ht-c-energy:      #ff8a3d;
    --ht-c-mining:      #a985d6;
    --ht-c-agriculture: #2fd4a5;
    --ht-c-forestry:    #c9a45c;
    --ht-c-water:       #4ea6e8;
    --ht-c-transport:   #8fd3f4;
    --ht-c-trade:       #f5c04a;
    --ht-c-arms:        #eda3c7;
}

.ht-bar {
    display: block;
    width: 100%;
    height: 26px;
    margin: 4px 0 14px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--panel-alt);
}
.ht-bar__seg { fill: var(--ht-c-sink); }
.ht-bar__seg--energy               { fill: var(--ht-c-energy); }
.ht-bar__seg--mining               { fill: var(--ht-c-mining); }
.ht-bar__seg--agriculture          { fill: var(--ht-c-agriculture); }
.ht-bar__seg--forestry             { fill: var(--ht-c-forestry); }
.ht-bar__seg--land                 { fill: var(--ht-c-forestry); }
.ht-bar__seg--water                { fill: var(--ht-c-water); }
.ht-bar__seg--transport            { fill: var(--ht-c-transport); }
.ht-bar__seg--trade                { fill: var(--ht-c-trade); }
.ht-bar__seg--arms                 { fill: var(--ht-c-arms); }
.ht-bar__seg--military_procurement { fill: var(--ht-c-arms); }
.ht-bar__seg--sink                 { fill: var(--ht-c-sink); }

/* The scenario switch. Five links, never a <select>: this section ships no
   JavaScript, and a link is bookmarkable, crawlable and quotable where a form
   control is none of the three. */
.ht-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.ht-switch a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.92rem;
}
.ht-switch a:hover { color: var(--text-strong); border-color: var(--accent-deep); }
.ht-switch a[aria-current="true"] {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--on-accent);
}
.ht-switch a[aria-current="true"] .ht-code { color: var(--on-accent); opacity: 0.82; }
.ht-switch a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* Ten criteria columns do not fit a phone and must not widen the page — the
   body never scrolls sideways, the table does. */
.ht-scroll { overflow-x: auto; margin: 0 0 10px; }

.ht-matrix { min-width: 720px; }
.ht-matrix thead th { font-size: 0.82rem; font-weight: 500; white-space: normal; max-width: 8ch; }
.ht-matrix tbody th { white-space: normal; min-width: 14ch; }
.ht-cell { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-cell a { color: var(--text-strong); text-decoration: none; border-bottom: 1px dotted var(--border); }
.ht-cell a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.ht-cell.is-unscored { background: var(--panel-alt); }

/* The confidence letter beside a score. NOT a traffic light: HIGH is not good
   news and LOW is not a failure, they are statements about what kind of source
   is behind a judgement. So the scale is weight and dimming, not hue. */
.ht-grade { font-size: 0.7rem; margin-left: 3px; vertical-align: super; }
.ht-grade--high       { color: var(--text-strong); font-weight: 700; }
.ht-grade--medium     { color: var(--text-dim); }
.ht-grade--low        { color: var(--text-dim); font-style: italic; }
.ht-grade--indicative { color: var(--warn); }

/* The sink row, in both tables. Set apart because it is not a sector: it is
   what the model could not route to one. */
.ht-table tr.is-sink th, .ht-table tr.is-sink td {
    background: var(--panel-alt);
    color: var(--text-dim);
}
.ht-table tr.is-sink th { font-style: italic; }

.ht-period { border-top: 1px solid var(--border); padding-top: 22px; }
.ht-period h3 { margin: 26px 0 8px; font-size: 1.02rem; color: var(--text-strong); }

@media (max-width: 640px) {
    .ht-switch a { font-size: 0.86rem; padding: 6px 11px; }
    .ht-bar { height: 20px; }
}

/* A trailing "→" link at the foot of a section is a TAP TARGET, and a line of 18 px text is not
   one: Lighthouse's target-size audit wants 24 × 24 px with clear space around it, and the
   product pages scored 97 on accessibility until this existed (S18, 2026-09-17). */
.ht-note a.ht-more {
    display: inline-block;
    padding: 6px 2px;
    min-height: 24px;
}

/* ============================================================
   S22, 2026-09-23 — result pages: the figure, the switch, the chain,
   and the server-rendered charts (lib/ht_svg.php).

   Tokens only, as everywhere in this file: a figure that is legible in one
   skin and invisible in the other is the failure the tokens exist to stop.
   Chart geometry is SVG attributes; these rules only paint it.
============================================================ */

.ht-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 12px 0 18px;
}
.ht-fig-card {
    min-width: 0;          /* a grid item shrinks to its track, so a wide chart scrolls in its wrapper */
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px 10px;
}
.ht-fig-card h3 { margin: 0 0 6px; }
.ht-fig-line { margin: 0 0 6px; }
.ht-figure { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ht-fig-value { font-size: 1.5rem; font-weight: 700; color: var(--text-strong); }
.ht-fig-interval { font-size: 1.15rem; font-weight: 600; color: var(--text-strong); }
.ht-fig-per { color: var(--text-dim); }
.ht-fig-prov { flex-basis: 100%; font-size: 0.82rem; color: var(--text-dim); }
.ht-fig-none { color: var(--text-dim); font-style: italic; }
.ht-inversion { font-size: 1.15rem; font-weight: 600; color: var(--text-strong); }

.ht-opbanner {
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 2px dashed var(--warn);
    border-radius: 10px;
    background: var(--panel-alt);
}
.ht-opbanner__h { margin: 0 0 4px; font-weight: 700; color: var(--text-strong); }
.ht-opbanner p:last-child { margin: 0; color: var(--text); }

.ht-switch { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ht-switch a {
    display: inline-block;
    min-height: 24px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
}
.ht-switch a:hover, .ht-switch a:focus-visible { border-color: var(--accent); }
.ht-switch a[aria-current="page"] { border-color: var(--accent); background: var(--panel-alt); color: var(--text-strong); font-weight: 600; }
.ht-switch__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }

.ht-chain { margin: 10px 0 12px; padding-left: 1.4em; }
.ht-chain li { margin: 4px 0; }
.ht-chain li::marker { color: var(--text-dim); }

.ht-details { margin-top: 14px; }
.ht-details summary { cursor: pointer; color: var(--accent); min-height: 24px; }

/* The charts. A wrapper that scrolls sideways, so a chart keeps a size its text can be read at. */
.ht-chart-wrap { margin: 8px 0 16px; overflow-x: auto; }
/* Capped as well as floored: a 600-unit viewBox stretched across a 1 000 px column set its text at
   22 px. Between the two the text stays within a point or two of the body's. */
.ht-chart { display: block; width: 100%; min-width: 520px; max-width: 760px; height: auto; }
.ht-chart--map { max-width: 900px; }
.ht-chart--whisker { min-width: 300px; max-width: 640px; }
.ht-chart text { font-size: 13px; fill: var(--text); }
.ht-chart .ht-chart__ticklabel { font-size: 12px; fill: var(--text-dim); }
.ht-chart--whisker .ht-chart__ticklabel { font-size: 15px; }
.ht-chart__value { fill: var(--text-strong); font-weight: 600; }
.ht-chart__track { fill: var(--panel-alt); }
.ht-chart__bar { fill: var(--accent); }
.ht-chart__row.is-other .ht-chart__bar { fill: var(--text-mute); }
.ht-chart__row.is-current .ht-chart__label { fill: var(--text-strong); font-weight: 700; }
.ht-chart__axis, .ht-chart__tick { stroke: var(--text-dim); stroke-width: 1; }
.ht-chart__grid { stroke: var(--border-soft); stroke-width: 1; }
.ht-chart__grid.is-equator { stroke: var(--border); }
.ht-chart__range, .ht-chart__cap { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.ht-chart__cap { stroke-width: 2; }
.ht-chart__dot { fill: var(--text-strong); stroke: var(--panel); stroke-width: 2; }
.ht-chart__sea { fill: var(--panel-alt); }
.ht-chart__place { fill: var(--accent); fill-opacity: 0.55; stroke: var(--accent); stroke-width: 1; }
/* The world map (S34). img/world-map.webp is one mid-grey drawn with transparency — land faint, coasts and
   borders stronger, sea clear — so it reads on both skins with no colour of its own to swap. Names: the
   largest places are written on the map; any other appears while its circle is pointed at (or tapped:
   cursor:pointer makes a touch browser treat the circle as clickable). The halo is the panel colour,
   so a name stays legible over a coastline. */
.ht-chart__maplabel, .ht-place__label {
    font-size: 12px; fill: var(--text-strong); font-weight: 600;
    paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
}
.ht-chart__leader { stroke: var(--text-strong); stroke-width: 1; }
.ht-place { cursor: pointer; }
.ht-place__hit { fill: transparent; pointer-events: all; }
.ht-place:hover .ht-place__hit { stroke: var(--text-strong); stroke-width: 2; }
.ht-place__label { visibility: hidden; pointer-events: none; }
.ht-place:hover .ht-place__label { visibility: visible; }

@media (max-width: 640px) {
    .ht-fig-value { font-size: 1.3rem; }
    .ht-figs { grid-template-columns: 1fr; }
}

/* The catalogue's figure cells: one figure per row, the run named once above the table —
   so a cell keeps its value, interval and grade, and hides only the repeated provenance line
   from sight (a screen reader still hears it). */
.ht-cat-fig .ht-fig-value { font-size: 1rem; }
.ht-cat-fig .ht-fig-interval { font-size: 0.9rem; font-weight: 500; }
.ht-cat-fig .ht-fig-prov {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ht-table-wrap { overflow-x: auto; }
.ht-table tfoot .ht-sum th, .ht-table tfoot .ht-sum td { border-top: 2px solid var(--border); font-weight: 700; color: var(--text-strong); }

/* ============================================================
   S23, 2026-09-23 — the conscience layer: the basket, spending,
   corrections. Tokens only, and nothing that moves: no counter,
   no animation, no colour that means blood (plan/11 §4).
============================================================ */
.ht-bk-privacy { border-left: 3px solid var(--accent); padding-left: 10px; }
.ht-bk-scen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.ht-bk-scen a { padding: 4px 10px; min-height: 24px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.ht-bk-scen a[aria-current="true"] { border-color: var(--accent); background: var(--panel-alt); color: var(--text-strong); font-weight: 600; }
.ht-bk-items { border: 0; margin: 0; padding: 0; min-width: 0; }
.ht-bk-item { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr); gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.ht-bk-what { display: flex; flex-direction: column; min-width: 0; }
.ht-bk-name { font-weight: 600; color: var(--text-strong); }
.ht-bk-in { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ht-bk-q { width: 6.5em; min-height: 36px; padding: 4px 8px; font: inherit; color: var(--text-strong); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.ht-bk-q:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.ht-bk-q[aria-invalid="true"] { border: 2px solid var(--warn); }
.ht-bk-unit { margin: 0; }
.ht-bk-unit .ht-fig-value { font-size: 1rem; }
.ht-bk-unit .ht-fig-interval { font-size: 0.9rem; font-weight: 500; }
.ht-bk-unit .ht-fig-prov { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ht-bk-total { margin: 0 0 14px; }
.ht-bk-label { margin: 0 0 4px; font-weight: 700; color: var(--text-strong); }
.ht-bk-inv { margin: 4px 0 0; font-weight: 600; color: var(--text-strong); }
.ht-bk-top { margin: 6px 0 10px; padding-left: 1.4em; }
.ht-bk-top li { margin: 8px 0; }
.ht-bk-toph { margin: 0 0 2px; }
.ht-bk-top .ht-fig-value { font-size: 1.05rem; }
.ht-bk-top .ht-fig-interval { font-size: 0.95rem; }
.ht-bk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; }
.ht-bk-link { width: 100%; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px; }
.ht-bk-names { columns: 2 14em; }
@media (max-width: 640px) {
    .ht-bk-item { grid-template-columns: 1fr; }
}
.ht-sp-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--text-strong); }
.ht-sp-card .ht-fig-value { font-size: 1.15rem; }
.ht-sp-card .ht-fig-interval { font-size: 0.95rem; }
.ht-sp-card .ht-fig-prov { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ht-sp-card .ht-inversion { font-size: 1rem; margin: 4px 0; }
.ht-sp-metric { display: inline-block; min-width: 5.5em; font-weight: 600; color: var(--text); }
.ht-sp-ref .ht-sp-card { border-width: 2px; border-color: var(--accent); }
.ht-sp-bridge th code { font-size: 0.85em; }
.ht-corr-report { margin: 0 0 16px; }
.ht-corr-report a { font-weight: 600; }
.ht-corr-fix { margin: 0 0 18px; border: 2px solid var(--warn); }
.ht-corr-form { max-width: 720px; }
.ht-corr-field { margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.ht-corr-field > label, .ht-corr-kinds legend { display: block; margin: 0 0 4px; font-weight: 600; color: var(--text-strong); }
.ht-corr-field input[type="text"], .ht-corr-field textarea { width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; color: var(--text-strong); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.ht-corr-field input:focus-visible, .ht-corr-field textarea:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.ht-corr-field [aria-invalid="true"] { border: 2px solid var(--warn); }
.ht-corr-kind, .ht-corr-check { display: flex; align-items: flex-start; gap: 8px; min-height: 28px; margin: 2px 0; font-weight: 400; color: var(--text); }
.ht-corr-kind input, .ht-corr-check input { margin-top: 4px; width: 18px; height: 18px; }
.ht-corr-err { margin: 4px 0 0; font-weight: 600; color: var(--text-strong); border-left: 3px solid var(--warn); padding-left: 8px; }
.ht-corr-errors { margin: 0 0 14px; padding: 10px 14px; border: 2px solid var(--warn); border-radius: 8px; }
.ht-corr-errors p { margin: 0 0 4px; }
.ht-corr-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ht-corr { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.ht-corr h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ht-corr h4 { margin: 10px 0 2px; font-size: 0.95rem; color: var(--text-strong); }
.ht-corr-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ht-corr-overdue { margin: 4px 0; border-left: 3px solid var(--warn); padding-left: 8px; }
.ht-corr-events { margin: 6px 0 0; padding-left: 1.4em; font-size: 0.9rem; }
/* S24: the products an entity reaches — names wrap, so a phone sees the figure beside them. */
.ht-reach tbody th { white-space: normal; width: 45%; }
.ht-reach .ht-figure { gap: 2px 8px; }
/* S25: the API reference and the downloads. Code that is an address wraps anywhere, so a phone never scrolls sideways. */
.ht-api-dl { margin: 14px 0 0; }
.ht-api-dl dt { margin-top: 14px; color: var(--text-strong); font-weight: 600; }
.ht-api-dl dt:first-child { margin-top: 0; }
.ht-api-dl dd { margin: 4px 0 0; }
.ht-api-route { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.ht-api-route h3 { margin: 0 0 6px; }
.ht-api-route h3 code, .ht-api-list code, .ht-dl code, .ht-api-dl code { overflow-wrap: anywhere; }
.ht-api-route .ht-notlist { margin-top: 4px; }
.ht-dl tbody th { white-space: normal; overflow-wrap: anywhere; }

/* S27, 2026-09-29 — the figure in words (#in-words). Its figures are ht_figure()'s markup, the same as the figure
   above it, set in the sentence at text size; the provenance line is read by assistive technology and not
   repeated on screen, where the figure section above shows it. */
.ht-ai-text p { margin: 0 0 10px; max-width: 72ch; }
.ht-ai-text .ht-figure { display: inline; }
.ht-ai-text .ht-figure > * + * { margin-left: 0.3em; }
.ht-ai-text .ht-fig-value, .ht-ai-text .ht-fig-interval { font-size: inherit; font-weight: 600; }
.ht-ai-text .ht-fig-grade { font-size: 0.78rem; vertical-align: 0.1em; }
.ht-ai-text .ht-fig-prov { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ht-ai-num { font-weight: 600; color: var(--text-strong); }
.ht-ai-note { max-width: 72ch; }
/* S27 — a command or a configuration to copy (/mcp). It scrolls inside itself rather than widen the page. */
.ht-pre {
    margin: 6px 0 14px;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}