/* ============================================================
   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;
}
.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; }
    .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 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); }