/* ============================================================
   humanops.css — the HumanOps 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 ho_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:
   --bg --bg-2 --bg-deep --panel --panel-light --panel-hover --border
   --border-soft --text --text-strong --text-dim --text-mute --accent
   --accent-soft --accent-strong --accent-deep --on-accent --success --danger
   --warn --shadow --overlay-1 --overlay-2 --btn-border --panel-shadow

   Contents
     1. shell        wrap, sub-nav, skip link
     2. hero
     3. sections     headings, cards, grid, tiles
     4. capabilities, steps, faq
     5. form         fields, buttons, flash, honeypot
     6. footer
     7. mobile
============================================================ */


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

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

.ho-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;
}
.ho-skip:focus { left: 12px; top: 12px; }

/* The sub-nav scrolls horizontally rather than wrapping: eight items wrap to
   three ragged lines on a phone, and a single scrolling strip reads as one
   control. Same decision as the cybersecurity section. */
.ho-subnav {
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 20;
}
.ho-subnav__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ho-subnav__inner::-webkit-scrollbar { display: none; }

.ho-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 13px 12px;
    font-size: .92rem;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.ho-subnav__link:hover { color: var(--text-strong); }
.ho-subnav__link[aria-current="page"] {
    color: var(--text-strong);
    border-bottom-color: var(--accent);
}
/* A nav entry whose page does not exist yet is TEXT, not a link. Reserving the
   URL without shipping a 404 keeps the crawl graph clean while the routes stay
   fixed from session one.

   --text-dim, NOT --text-mute. Mute (#86868b) on a white panel measures 3.62:1,
   under the 4.5:1 AA line, and Lighthouse fails the page for it — measured
   2026-09-02. Dim (#6e6e73) measures 5.07:1 and still reads as de-emphasised.
   The `soon` pill carries the "not yet" signal; colour does not have to. */
.ho-subnav__link.is-soon { color: var(--text-dim); cursor: default; }
.ho-soon {
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
}


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

.ho-hero { padding: 56px 0 40px; }

.ho-badge {
    display: inline-block;
    margin: 0 0 18px;
    padding: 5px 12px;
    font-size: .78rem;
    letter-spacing: .03em;
    color: var(--accent);
    background: var(--overlay-1);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.ho-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 5.2vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text-strong);
}

.ho-lead {
    margin: 0 0 22px;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--text-dim);
    max-width: 52ch;
}

/* The answer-first paragraph (plan/07 §4). It is what an answer engine extracts
   and what a skimming buyer reads, so it is styled to be read, not skipped. */
.ho-answer {
    margin: 0 0 26px;
    max-width: 66ch;
    padding: 16px 18px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    box-shadow: var(--panel-shadow);
}

.ho-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
/* On --bg-deep these chips measured 4.07:1 and failed AA. The ink is already the
   darkest de-emphasised token, so the FILL is what moves: --panel is the page's
   lightest surface and takes --text-dim to 5.07:1. Measured 2026-09-02. */
.ho-rail li {
    padding: 5px 11px;
    font-size: .8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}


/* ============================================================
   3. SECTIONS
============================================================ */

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

.ho-section > h2 {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    letter-spacing: -.01em;
    color: var(--text-strong);
}

.ho-sublead { margin: 0 0 26px; color: var(--text-dim); max-width: 62ch; }

/* --text-dim, not --text-mute: mute measured 3.62:1 on a white panel and failed
   AA. Dim clears it on every surface this class actually lands on — 5.07:1 on
   --panel, 4.54:1 on --bg. Measured 2026-09-02. */
.ho-note {
    margin: 14px 0 0;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--text-dim);
    max-width: 68ch;
}

.ho-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ho-card {
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
}
.ho-card h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--text-strong); }
.ho-card p  { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text-dim); }

.ho-tile {
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}
.ho-tile__v { font-size: 1.6rem; font-weight: 700; color: var(--text-strong); }
.ho-tile__l { font-size: .8rem; color: var(--text-dim); }
.ho-tile.good .ho-tile__v { color: var(--success); }
.ho-tile.warn .ho-tile__v { color: var(--warn); }
.ho-tile.bad  .ho-tile__v { color: var(--danger); }


/* ============================================================
   4. CAPABILITIES · STEPS · FAQ
============================================================ */

.ho-caps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ho-caps li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.ho-caps code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .87rem;
    color: var(--accent);
}
.ho-caps span { font-size: .89rem; color: var(--text-dim); }

.ho-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.ho-steps li { position: relative; padding-top: 6px; }
.ho-steps__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--accent-fill);
    border-radius: 50%;
}
.ho-steps h3 { margin: 0 0 6px; font-size: 1rem; color: var(--text-strong); }
.ho-steps p  { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-dim); }

.ho-faq details {
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--panel);
    margin-bottom: 8px;
}
.ho-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-strong);
    list-style: none;
}
.ho-faq summary::-webkit-details-marker { display: none; }
.ho-faq summary::after { content: " +"; color: var(--text-dim); }
.ho-faq details[open] summary::after { content: " −"; }
.ho-faq p { margin: 10px 0 0; font-size: .93rem; line-height: 1.65; color: var(--text-dim); }


/* ============================================================
   5. FORM
============================================================ */

.ho-access { scroll-margin-top: 70px; }   /* the sticky sub-nav */

.ho-form {
    max-width: 560px;
    padding: 22px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
}

.ho-field { display: block; margin-bottom: 16px; }
.ho-field > span, .ho-field legend {
    display: block;
    margin-bottom: 6px;
    font-size: .85rem;
    color: var(--text-dim);
}
.ho-field input[type="email"],
.ho-field input[type="text"],
.ho-field textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ho-field input:focus, .ho-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: var(--field-hover);
}
.ho-field textarea { resize: vertical; min-height: 72px; }

.ho-field--radio { border: 0; padding: 0; margin-bottom: 16px; }
.ho-field--radio label {
    display: block;
    margin-bottom: 6px;
    font-size: .92rem;
    color: var(--text);
}

.ho-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

.ho-btn {
    display: inline-block;
    padding: 11px 20px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--panel-light);
    border: 1px solid var(--btn-border);
    border-radius: 9px;
    text-decoration: none;
    cursor: pointer;
}
.ho-btn:hover { background: var(--panel-hover); }
.ho-btn--primary {
    color: var(--on-accent);
    background: var(--accent-fill);
    border-color: var(--accent-fill);
}
.ho-btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* The dark-skin override this block used to carry is GONE, and deliberately.
   --accent (#3b82f6) is tuned to be read as TEXT on a dark page and measures
   3.68:1 as a fill behind a white label; S9 patched that locally for the buttons
   HumanOps owns and logged the sitewide half — #cookieAccept and #msgSend fail
   identically on every page of the estate. S10 fixed it at the token level
   instead: themeV0.01.css now carries --accent-fill in both skins, the split it
   already made for --danger/--danger-deep. A local override on top of a token
   that is now correct is just a second place to remember. */

.ho-flash {
    margin: 0 0 18px;
    padding: 12px 14px;
    font-size: .93rem;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--panel);
}
.ho-flash.is-ok  { border-color: var(--success); color: var(--success); }
.ho-flash.is-bad { border-color: var(--danger);  color: var(--danger); }

/* Honeypot. Off-screen, NOT display:none — a bot that reads the stylesheet skips
   display:none fields, and a screen reader is kept out by aria-hidden instead. */
.ho-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ============================================================
   6. FOOTER (section block, above the sitewide one)
============================================================ */

.ho-secfooter { padding: 34px 20px 24px; border-top: 1px solid var(--border); }
.ho-footlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 8px 0 14px;
    padding: 0;
    list-style: none;
    font-size: .88rem;
}
.ho-footlinks a { color: var(--text-dim); }
.ho-langswitch { display: flex; gap: 10px; font-size: .85rem; }
.ho-langswitch a { color: var(--text-dim); text-decoration: none; }
.ho-langswitch a[aria-current="true"] { color: var(--text-strong); font-weight: 600; }

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


/* ============================================================
   7. MOBILE
============================================================ */

@media (max-width: 640px) {
    .ho-hero { padding: 34px 0 28px; }
    .ho-section { padding: 30px 0; }
    .ho-answer { padding: 14px; }
    .ho-form { padding: 18px; }
    .ho-actions .ho-btn { flex: 1 1 100%; text-align: center; }
}


/* ============================================================
   8. S3 — CONTENT PAGES

   Tokens only, as above. Added for the capability, solution, coverage,
   pricing, trust and security templates.
============================================================ */

.ho-hero--sub { padding: 34px 0 26px; }
.ho-hero--sub h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }

/* Tables: the capability list, the price list, the coverage map. Wide content
   scrolls INSIDE its own container — the page body must never scroll sideways. */
.ho-table-wrap { overflow-x: auto; margin: 0 0 8px; }
.ho-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}
.ho-table th, .ho-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}
.ho-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.ho-table tbody tr:hover { background: var(--overlay-1); }
.ho-table td small { display: block; color: var(--text-dim); font-size: .78rem; }
.ho-table .ho-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ho-table code { font-size: .86rem; color: var(--accent); }

.ho-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 22px 0 0;
}

.ho-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* A left edge in the status colour, not a tinted fill: a tint that reads as
   "positive" in light can read as "muted" in dark, and the border does not. */
.ho-card--good { border-left: 3px solid var(--success); }
.ho-card--warn { border-left: 3px solid var(--warn); }

.ho-pricebox {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 20px;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
}
.ho-price { font-size: 1.9rem; font-weight: 700; color: var(--text-strong); }
.ho-price i { font-size: .8rem; font-style: normal; font-weight: 400; color: var(--text-dim); }
.ho-price small { font-size: .72rem; font-weight: 400; color: var(--text-dim); margin-left: 5px; }
.ho-pricebox__l { font-size: .85rem; color: var(--text-dim); }
.ho-pricebox .ho-note { flex: 1 1 100%; margin: 4px 0 0; }

.ho-state {
    display: inline-block;
    padding: 2px 9px;
    font-size: .76rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.ho-state--live     { color: var(--success); border-color: var(--success); }
.ho-state--limited  { color: var(--warn);    border-color: var(--warn); }
.ho-state--waitlist { color: var(--text-dim); }
.ho-state--off      { color: var(--danger);  border-color: var(--danger); }

.ho-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ho-chips li a {
    display: inline-block;
    padding: 5px 11px;
    font-size: .85rem;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
}
.ho-chips li a:hover { color: var(--text-strong); background: var(--panel-hover); }
.ho-chips code { font-size: .8rem; }

/* Marker lists. The glyph is a ::before rather than a list-style so it can take a
   status colour independently of the text, which stays readable in both skins. */
.ho-ticks, .ho-crosses, .ho-dots {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    max-width: 70ch;
}
.ho-ticks li, .ho-crosses li, .ho-dots li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--text);
}
.ho-ticks li::before   { content: "✓"; color: var(--success); }
.ho-crosses li::before { content: "✕"; color: var(--danger); }
.ho-dots li::before    { content: "•"; color: var(--warn); }
.ho-ticks li::before, .ho-crosses li::before, .ho-dots li::before {
    position: absolute; left: 4px; top: 5px; font-weight: 700;
}

.ho-code {
    margin: 0 0 8px;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-deep);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.ho-code code { font: inherit; color: inherit; }

@media (max-width: 640px) {
    .ho-table th, .ho-table td { padding: 8px 9px; font-size: .87rem; }
    .ho-price { font-size: 1.5rem; }
}



/* ============================================================
   9. TAP TARGETS (WCAG 2.2 · 2.5.8)

   Small text links measured under 24x24 CSS px on desktop and failed
   `target-size` — the chips, the EN/ES switch and the breadcrumb. Text size is
   right for their role, so the BOX grows instead: inline-flex with a min-height
   and centred content keeps them looking identical while giving a finger (or an
   imprecise mouse) something to hit. Measured 2026-09-02.
============================================================ */

.ho-chips li a,
.ho-langswitch a,
.ho-crumb a,
.ho-footlinks a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
.ho-langswitch { gap: 4px; }
.ho-langswitch a { padding: 2px 8px; border-radius: 6px; }
.ho-langswitch a:hover { background: var(--panel-hover); }
.ho-crumb a { padding: 2px 0; }
/* A table cell holding only a link: give the link the cell's full height so the
   target matches what a visitor perceives as clickable. */
.ho-table td > a { display: inline-flex; align-items: center; min-height: 24px; }
.ho-faq summary { padding: 2px 0; min-height: 24px; }

/* Visually hidden but announced. For a header cell whose column has no visible
   title: an empty <th> is announced as nothing at all. */
.ho-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* A row header carries the label, not extra weight — it should look like the
   <strong> it replaced. */
.ho-table tbody th[scope="row"] { font-weight: 600; text-align: left; }


/* ============================================================
   10. ORDER FORM (S4)

   .ho-hint and .ho-err were used by request.php before they existed here, so they
   fell back to the browser default — which failed contrast in the dark skin.
   Tokens, as everywhere.
============================================================ */

.ho-form--wide { max-width: 720px; }
.ho-form h2 {
    margin: 26px 0 14px;
    font-size: 1.05rem;
    color: var(--text-strong);
}
.ho-form h2:first-of-type { margin-top: 0; }

.ho-hint {
    display: block;
    margin: 4px 0 6px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-dim);
}
.ho-err {
    display: block;
    margin: 5px 0 0;
    font-size: .82rem;
    font-weight: 600;
    /* --danger is tuned to be read AS TEXT in both skins (it is --danger-deep that
       exists for fills behind white labels), so it is the right token here. */
    color: var(--danger);
}
.ho-field select {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ho-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ho-field--radio label { display: flex; gap: 8px; align-items: flex-start; min-height: 24px; }
.ho-flash .ho-dots { margin: 8px 0 0; }
.ho-flash .ho-dots li { color: inherit; }


/* ============================================================
   12. MCP INSTALL PAGE (S9)
   A <details> per client, so eight config snippets fit on one page
   with no tab JavaScript — which the strict CSP would forbid anyway,
   and which would take the page off the keyboard for anyone who
   needs it. Collapsed detail is still in the DOM and still found by
   ctrl-F and by a crawler.
============================================================ */

.ho-snip {
    margin: 0 0 10px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.ho-snip summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-strong);
    list-style: none;
}
.ho-snip summary::-webkit-details-marker { display: none; }
.ho-snip summary::after { content: " +"; color: var(--text-dim); }
.ho-snip[open] summary::after { content: " −"; }
.ho-snip .ho-note { margin: 10px 0 8px; }
.ho-snip .ho-code { margin-bottom: 0; }

/* The endpoint and the header — the two strings the whole page exists to
   hand over, so they get a definition list rather than a paragraph. */
.ho-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--bg-deep);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
/* --text, not --text-dim: at .82rem on the deep panel the dim token falls below
   4.5:1 in the LIGHT skin and Lighthouse is right to fail it. A label whose whole
   job is to name the two strings a developer must copy is not the place to save
   contrast. */
.ho-kv dt { font-size: .82rem; font-weight: 600; color: var(--text); }
.ho-kv dd { margin: 0; overflow-wrap: anywhere; }
.ho-kv dd code, .ho-snip code, .ho-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .86rem;
    color: var(--text-strong);
}

@media (max-width: 560px) {
    .ho-kv { grid-template-columns: 1fr; gap: 2px 0; }
    .ho-kv dd { margin-bottom: 8px; }
}


/* ============================================================
   13. DEVELOPER DOCS (S10)
   A sidebar that becomes a scrolling strip on a phone rather
   than a hamburger: eleven links is a list, not a menu, and a
   menu costs JavaScript the CSP would have to allow.
============================================================ */

.ho-docs {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}
.ho-docs__nav {
    position: sticky;
    top: 74px;                       /* clears the sticky sub-nav */
    padding: 4px 0;
    border-right: 1px solid var(--border-soft);
}
.ho-docs__group {
    margin: 14px 0 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.ho-docs__group:first-child { margin-top: 0; }
.ho-docs__link {
    display: block;
    padding: 5px 12px 5px 0;
    font-size: .9rem;
    color: var(--text-dim);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 10px;
    margin-left: -12px;
}
.ho-docs__link:hover { color: var(--text); }
.ho-docs__link[aria-current="page"] {
    color: var(--text-strong);
    font-weight: 600;
    border-left-color: var(--accent);
}
.ho-docs__body { min-width: 0; }     /* lets a wide <pre> scroll instead of stretching the grid */
.ho-docs__body h2 { margin-top: 34px; }
.ho-docs__body h3 { margin-top: 22px; font-size: 1rem; }
.ho-docs__body p  { line-height: 1.7; }
.ho-docs__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em;
    color: var(--text-strong);
}
.ho-docs__body .ho-code { margin: 12px 0 18px; }

.ho-docs__pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 42px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
    font-size: .92rem;
}
.ho-docs__pager a { color: var(--accent); text-decoration: none; }
.ho-docs__pager a:hover { text-decoration: underline; }
.ho-docs__pager a:last-child { margin-left: auto; }

@media (max-width: 800px) {
    .ho-docs { grid-template-columns: 1fr; gap: 18px; }
    .ho-docs__nav {
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--border-soft);
        -webkit-overflow-scrolling: touch;
    }
    .ho-docs__group { display: none; }
    .ho-docs__link {
        flex: 0 0 auto;
        margin-left: 0;
        padding: 6px 10px;
        white-space: nowrap;
        border: 1px solid var(--border-soft);
        border-radius: 999px;
    }
    .ho-docs__link[aria-current="page"] { border-color: var(--accent); }
}


/* ============================================================
   14. WORKER APPLICATION (S11)
   .ho-steps is a grid with hand-placed numbers (index.php uses
   .ho-steps__n). The application needs the numbers WITHOUT the
   markup, and needs to show progress, so it gets a modifier
   rather than a change to the shared class — index.php would
   otherwise number every step twice.
============================================================ */

.ho-steps--numbered { counter-reset: hostep; }
.ho-steps--numbered li {
    counter-increment: hostep;
    padding-left: 38px;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--text-dim);
}
.ho-steps--numbered li::before {
    content: counter(hostep);
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 50%;
}
/* Where they have got to. A step already done is a tick, not a number: the
   number is only useful while it is still ahead of you. */
.ho-steps--numbered li.is-done { color: var(--text); }
.ho-steps--numbered li.is-done::before {
    content: "✓";
    color: var(--on-accent);
    background: var(--accent-fill);
    border-color: var(--accent-fill);
}
.ho-steps--numbered li[aria-current="step"] {
    color: var(--text-strong);
    font-weight: 600;
}
.ho-steps--numbered li[aria-current="step"]::before {
    color: var(--accent);
    border-color: var(--accent);
    border-width: 2px;
}

/* The application's own flash, above the form it belongs to. */
.ho-flash { margin: 0 0 18px; }

/* ============================================================
   S14 — evidence packs and the public verification page.

   The page's whole job is to be BELIEVABLE and to show no imagery, so the
   styling leans on one thing: hashes have to be legible enough that somebody
   can compare 64 characters by eye without losing their place. Everything
   else is the estate's existing table and note vocabulary.

   Tokens only, and --accent-fill (not --accent) behind any white label —
   #3b82f6 measures 3.68:1 as a fill and this page is read by people who are
   being asked to trust it (S10).
============================================================ */

/* A hash. Monospace, and broken into readable runs by letter-spacing rather
   than by inserting separators — a copied hash must paste back as 64 clean
   characters or the whole exercise fails at the last step. */
.ho-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    letter-spacing: .02em;
    word-break: break-all;
    overflow-wrap: anywhere;
    color: var(--text-strong);
    background: var(--panel-light);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 2px 5px;
    display: inline-block;
    max-width: 100%;
}
.ho-hash--dim { color: var(--text-dim); background: transparent; border-color: transparent; padding-left: 0; }

/* An outcome, at a glance. Colour is never the only signal — the word is in
   the pill, so this reads the same to a screen reader and in monochrome. */
.ho-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: var(--panel-light);
    white-space: nowrap;
}
.ho-pill--good { color: var(--success); border-color: var(--success); }
.ho-pill--warn { color: var(--warn);    border-color: var(--warn); }
/* --danger-soft, NOT --danger. The theme's own note says --danger is tuned to be
   read as text on a dark PAGE; --panel-light is lighter than the page, and on it
   #ef4444 measures 4.20:1 — under the 4.5 AA line for text this small. Lighthouse
   caught it as a 3-point accessibility drop in the dark skin only. --danger-soft
   is the same hue one step lighter and measures 5.72:1 dark / 4.87:1 light, so
   one token covers both skins. Measured 2026-09-03. */
.ho-pill--bad  { color: var(--danger-soft); border-color: var(--danger-soft); }

/* A worker's own words, quoted as data rather than presented as ours. */
.ho-quote {
    margin: 6px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--border);
    color: var(--text-dim);
    font-style: italic;
}

.ho-note--good { color: var(--success); }
.ho-note--warn { color: var(--warn); }
.ho-note--bad  { color: var(--danger); }