/* ══════════════════════════════════════════════════════════════════════════
   THE OWNER'S INTERNAL PAGES (htr-pages-2.html), ported as COMPONENTS.

   "every page is being redesigned here" -- 26 pages in one file, and they are
   not 26 designs. They are one small component vocabulary used 26 times:
   a page header, a stat strip, a section header, a card grid, a table, a
   document column with a table of contents, an aside, a callout, a Q&A list
   and a row-bar chart. So this ports the vocabulary once rather than the
   pages one at a time, and each template then spends it.

   WHY A FOURTH STYLESHEET AND NOT MORE OF style.css. Same reason fix 1459
   gave chrome.css its own file and fix 1463 gave home.css one: these rules
   use the mockup's own short class names -- card, tag, meta, t, s -- which
   collide with names style.css already owns. Scoped under .htr-page they
   cannot reach a page that has not opted in.

   EVERY COLOUR COMES FROM A SITE TOKEN, never from the mockup's literals.
   The owner, twice: "the colors needs to stay what we have" and "the
   original color palette stays with teal green and hot pink". So the
   --nv-* layer below maps the mockup's names onto ours -- accent, bad and
   neutral, which are the green, the pink and the teal -- and no colour
   literal appears in this file at all. A test asserts that, and it scans
   the raw text, so this note states the token names rather than their
   values: a colour written in a comment is a colour this file contains.

   THE RULE THIS FILE IS WRITTEN UNDER (fix 1487, and the five before it):
   a rule ported without the markup that uses it renders nothing and reviews
   clean. tools/mockup_selfcheck.py counts those, and
   tests/test_mockup_selfcheck_ratchet.py refuses an increase -- so a
   component lands here only in the same change as a template that emits it.
   ══════════════════════════════════════════════════════════════════════════ */

.htr-page{
  --nv-display:"Archivo",var(--display, var(--serif));
  --nv-mono:var(--mono);
  --nv-text:var(--ink);
  --nv-muted:var(--text-dim);
  --nv-dim:var(--text-faint);
  --nv-line:var(--line);
  --nv-line-2:var(--line-hard);
  --nv-panel:var(--paper-raised);
  --nv-green:var(--accent);
  --nv-green-line:var(--accent-ink);
  --nv-green-deep:var(--accent-bg);
  --nv-mint:var(--accent-ink);
  --nv-amber:var(--warn);
  --nv-amber-line:color-mix(in srgb, var(--warn) 38%, transparent);
  --nv-red:var(--bad);
  --nv-red-line:color-mix(in srgb, var(--bad) 38%, transparent);
  --nv-teal:var(--neutral);
  --nv-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── page header ─────────────────────────────────────────────────────── */
.htr-page .ph{margin-bottom:26px}
.htr-page .ph .row{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.htr-page .ph .eyebrow{margin:0 0 9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-dim)}
.htr-page .ph h1{font-family:var(--nv-display);font-weight:900;font-size:clamp(27px,3.2vw,40px);line-height:1.04;letter-spacing:-.02em;margin:0 0 11px;max-width:22ch}
.htr-page .ph p{margin:0;font-size:13.5px;color:var(--nv-muted);line-height:1.7;max-width:78ch}

/* ── stat strip ──────────────────────────────────────────────────────── */
.htr-page .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--nv-line);border:1px solid var(--nv-line);border-radius:12px;overflow:hidden;margin-bottom:26px}
.htr-page .stats>div{padding:15px 17px;background:var(--nv-panel)}
.htr-page .stats dt{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--nv-dim)}
.htr-page .stats dd{margin:8px 0 0;font-family:var(--nv-display);font-weight:900;font-size:23px;line-height:1;font-variant-numeric:tabular-nums}
.htr-page .stats dd small{font-family:var(--nv-mono);font-weight:400;font-size:10.5px;color:var(--nv-dim);margin-left:7px}
.htr-page .stats .sub{display:block;margin-top:6px;font-size:10.5px;color:var(--nv-dim);line-height:1.5;font-family:var(--nv-mono);font-weight:400}

/* ── section header ──────────────────────────────────────────────────── */
.htr-page .sec-h{margin-top:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:15px;flex-wrap:wrap}
.htr-page .sec-h h2{font-family:var(--nv-display);font-weight:900;font-size:19px;margin:0 0 5px}
.htr-page .sec-h p{margin:0;font-size:12.5px;color:var(--nv-muted);line-height:1.6;max-width:74ch}

/* ── cards ───────────────────────────────────────────────────────────── */
.htr-page .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}
.htr-page .card{display:flex;flex-direction:column;gap:11px;padding:19px;border:1px solid var(--nv-line);border-radius:13px;background:rgba(255,255,255,.013);transition:border-color .15s,transform .18s var(--nv-ease)}
.htr-page a.card{text-decoration:none;color:inherit}
.htr-page a.card:hover{border-color:var(--nv-green-line);transform:translateY(-2px)}
.htr-page .card h3{margin:0;font-size:14px;font-weight:500;line-height:1.45}
.htr-page .card p{margin:0;font-size:12.5px;color:var(--nv-muted);line-height:1.65}
.htr-page .card .meta{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--nv-dim);padding-top:4px}

/* ── tags ────────────────────────────────────────────────────────────── */
.htr-page .tagrow{display:flex;gap:6px;flex-wrap:wrap}
.htr-page .tag{font-size:10.5px;letter-spacing:.05em;padding:0 7px;border-radius:4px;border:1px solid var(--nv-line-2);line-height:19px;color:var(--nv-muted);white-space:nowrap}
.htr-page .tag.g{color:var(--nv-green);border-color:var(--nv-green-line)}
.htr-page .tag.a{color:var(--nv-amber);border-color:var(--nv-amber-line)}
.htr-page .tag.r{color:var(--nv-red);border-color:var(--nv-red-line)}
.htr-page .tag.t{color:var(--nv-teal);border-color:color-mix(in srgb, var(--nv-teal) 38%, transparent)}

/* ── table ───────────────────────────────────────────────────────────── */
.htr-page .tw{margin:0 0 18px;border:1px solid var(--nv-line);border-radius:12px;overflow:hidden}
.htr-page .tw.scroll{overflow-x:auto}
.htr-page table.t{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.htr-page table.t th{position:sticky;top:0;z-index:2;background:var(--nv-panel);text-align:left;font-weight:500;font-size:10px;letter-spacing:.1em;color:var(--nv-dim);text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--nv-line);white-space:nowrap}
.htr-page table.t td{padding:9px 12px;border-bottom:1px solid var(--nv-line);white-space:nowrap}
.htr-page table.t tbody tr:last-child td{border-bottom:0}
.htr-page table.t tbody tr:hover td{background:rgba(255,255,255,.022)}
.htr-page table.t .r{text-align:right}
.htr-page table.t .nm{color:var(--nv-dim);margin-left:8px;font-weight:400}
.htr-page table.t b{font-weight:700}
.htr-page .tf{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 14px;border-top:1px solid var(--nv-line);font-size:11.5px;color:var(--nv-dim);flex-wrap:wrap}

/* ── empty state ─────────────────────────────────────────────────────── */
.htr-page .empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;padding:22px;border:1px dashed var(--nv-line-2);border-radius:12px}
.htr-page .empty b{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
.htr-page .empty p{margin:0 0 11px;font-size:12.5px;color:var(--nv-muted);line-height:1.65;max-width:74ch}
.htr-page .empty p:last-child{margin:0}

/* ── document column + contents ──────────────────────────────────────── */
.htr-page .doc{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:44px;align-items:start}
.htr-page .prose{max-width:74ch;font-size:14px;line-height:1.85;color:var(--nv-muted)}
.htr-page .prose h2{font-family:var(--nv-display);font-weight:900;font-size:22px;color:var(--nv-text);line-height:1.15;margin:36px 0 12px;scroll-margin-top:74px}
.htr-page .prose h2:first-child{margin-top:0}
.htr-page .prose h3{font-size:14.5px;font-weight:500;color:var(--nv-text);margin:24px 0 8px}
.htr-page .prose p{margin:0 0 15px}
.htr-page .prose ul, .htr-page .prose ol{margin:0 0 16px;padding-left:19px}
.htr-page .prose li{margin-bottom:7px}
.htr-page .prose strong{color:var(--nv-text);font-weight:500}
.htr-page .prose code{font-size:12.5px;color:var(--nv-mint);background:var(--nv-green-deep);border-radius:4px;padding:1px 5px}
.htr-page .callout{border:1px solid var(--nv-line-2);border-left:2px solid var(--nv-green);border-radius:0 10px 10px 0;padding:15px 17px;margin:0 0 18px;font-size:13px;background:rgba(255,255,255,.014)}
.htr-page .callout b{color:var(--nv-text);font-weight:500}
.htr-page .toc{position:sticky;top:74px}
.htr-page .toc p{margin:0 0 9px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-dim)}
.htr-page .toc a{display:block;padding:5px 0 5px 11px;border-left:1px solid var(--nv-line);font-size:12px;color:var(--nv-dim);transition:color .15s,border-color .15s;text-decoration:none}
.htr-page .toc a:hover{color:var(--nv-text)}
.htr-page .toc a.on{color:var(--nv-green);border-color:var(--nv-green)}

/* ── split layout ────────────────────────────────────────────────────── */
.htr-page .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:26px;align-items:start}
.htr-page .split.wide{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
.htr-page .aside{border:1px solid var(--nv-line);border-radius:13px;padding:18px}
.htr-page .aside h3{margin:0 0 5px;font-size:12.5px;font-weight:500}
.htr-page .aside .s{margin:0 0 13px;font-size:11.5px;color:var(--nv-dim);line-height:1.55}
.htr-page .aside ul{list-style:none;margin:0;padding:0}
.htr-page .aside li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--nv-line);font-size:12px}
.htr-page .aside li:first-of-type{border-top:0}
.htr-page .aside b{font-weight:500;font-variant-numeric:tabular-nums}

/* ── Q&A ─────────────────────────────────────────────────────────────── */
.htr-page details.qa{border-bottom:1px solid var(--nv-line)}
.htr-page details.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;font-size:13.5px;color:var(--nv-text);cursor:pointer}
.htr-page details.qa summary::-webkit-details-marker{display:none}
.htr-page details.qa p{margin:0 0 16px;font-size:13px;color:var(--nv-muted);line-height:1.75;max-width:76ch}

/* ── row bars ────────────────────────────────────────────────────────── */
.htr-page .rowbars{display:grid;gap:9px}
.htr-page .rb{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr) 74px;gap:12px;align-items:center;font-size:11.5px}
.htr-page .rb .k{color:var(--nv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htr-page .rb .k em{font-style:normal;color:var(--nv-dim);margin-left:6px;font-size:10.5px}
.htr-page .rb .val{text-align:right;font-variant-numeric:tabular-nums}
.htr-page .rb .val em{font-style:normal;color:var(--nv-dim);font-size:10.5px;margin-left:5px}
.htr-page .rbref{position:absolute;top:-3px;bottom:-3px;border-left:1px dashed var(--nv-line-2)}

/* ── filter bar ──────────────────────────────────────────────────────── */
.htr-page .chipf{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;border:1px solid var(--nv-line-2);color:var(--nv-muted);font-size:11.5px;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.htr-page .chipf:hover{color:var(--nv-text)}
.htr-page .chipf[aria-pressed="true"]{background:var(--nv-green-deep);border-color:var(--nv-green);color:var(--nv-green)}
.htr-page .cnt{color:var(--nv-dim);font-variant-numeric:tabular-nums}
.htr-page .flag{font-size:9.5px;letter-spacing:.04em;color:var(--nv-amber);border:1px solid var(--nv-amber-line);border-radius:3px;padding:0 5px;margin-left:8px;cursor:help}

/* ── cards that carry their own type scale ────────── */
.htr-page .card p.meth-reason{font-size:var(--fs-base);line-height:1.6}
.htr-page .card p.meth-source{color:var(--nv-dim)}

/* ── icons ───────────────────────────────────────── */
/* Every other ported sheet sizes its icons inside its own wrapper and
   none of those rules can reach this one, so an inline icon here would
   otherwise paint at the browser's 300x150 default. */
.htr-page .ic{width:14px;height:14px;flex:none}
.htr-page details.qa summary .ic{width:17px;height:17px;color:var(--nv-dim);flex:none;transition:transform .2s var(--nv-ease),color .2s}
.htr-page details.qa[open] summary .ic{transform:rotate(45deg);color:var(--nv-green)}
.htr-page .aside li .ic{color:var(--nv-dim)}

/* ── a cell holding a sentence ─────────────────────── */
/* table.t assumes figures, which never wrap. Two of these tables carry a
   column of prose -- a standard's denominator, an app's stated approach --
   and nowrap on those makes the row wider than any screen. */
.htr-page table.t td.wrap{white-space:normal;min-width:18ch}

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
.htr-page .split, .htr-page .split.wide{grid-template-columns:minmax(0,1fr)}
.htr-page .doc{grid-template-columns:minmax(0,1fr);gap:0}
.htr-page .toc{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;border-bottom:1px solid var(--nv-line);margin-bottom:22px}
.htr-page .toc p{display:none}
.htr-page .toc a{border-left:0;border:1px solid var(--nv-line);border-radius:7px;padding:5px 11px;white-space:nowrap}
.htr-page .stats{grid-template-columns:1fr 1fr}
.htr-page .stats dd{font-size:19px}
.htr-page .cards{grid-template-columns:minmax(0,1fr)}
.htr-page .ph h1{font-size:25px}
.htr-page .sec-h h2{font-size:17px}
.htr-page .prose{font-size:13.5px;line-height:1.8}
.htr-page .prose h2{font-size:19px;margin-top:28px}
.htr-page .rb{grid-template-columns:minmax(0,96px) minmax(0,1fr) 62px;gap:9px;font-size:11px}
.htr-page .rb .k em, .htr-page .rb .val em{display:none}
}