/* Page-specific rules. Keep small; graduate repeated patterns into
   components.css. */

/* ----- Home ----- */
.member-strip { background: var(--field-deep); border-top: 1px solid var(--draft-faint); padding: var(--s5) 0; }
.member-strip .card { padding: var(--s4); }
.member-meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }

.work-row { display: grid; gap: var(--s5); border-top: 1px dashed var(--draft-faint); padding-top: var(--s5); }
@media (min-width: 768px) { .work-row { grid-template-columns: 160px 1fr; } }
.work-year { font-family: var(--font-mono); font-size: 0.875rem; color: var(--chalk); }
.work-row h3 { margin-bottom: var(--s2); }
.work-row p { color: var(--text-muted); max-width: 640px; }

/* ----- Floating platform assistant: launcher bottom right, chat panel as
   an overlay. Bubble styles are shared with any inline chat use. ----- */
.chat-launcher { position: fixed; bottom: var(--s5); right: var(--s5); z-index: 55;
    width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
    background: var(--field-raised); border: 2px solid var(--chalk); color: var(--draft);
    display: flex; align-items: center; justify-content: center; padding: 0;
    box-shadow: 0 12px 34px rgba(4, 16, 31, 0.55); transition: transform 0.15s ease; }
.chat-launcher svg { width: 34px; height: 32px; }
.chat-launcher:hover { transform: translateY(-2px); }
.chat-launcher.hidden { display: none; }
/* Phones: smaller, and out of the way while a page form is being typed in
   (it covered the end of form fields, QA review 8 Oct 2026). */
@media (max-width: 767px) {
    .chat-launcher { width: 52px; height: 52px; }
    .chat-launcher.typing { opacity: 0; pointer-events: none; }
    .chat-inputrow input, #provFilter { font-size: 16px; }
}
/* Reviewer view toggle moves up so both fit in the corner */
.view-toggle { bottom: calc(var(--s5) + 76px); }

.chat-widget { position: fixed; bottom: var(--s5); right: var(--s5); z-index: 56;
    display: none; flex-direction: column; gap: var(--s3);
    width: min(380px, calc(100vw - 16px)); max-height: min(600px, calc(100vh - 32px));
    background: var(--field-deep); border: 1px solid var(--draft-dim); border-radius: var(--r-card);
    padding: var(--s4); box-shadow: 0 24px 60px rgba(4, 16, 31, 0.6); }
.chat-widget.open { display: flex; }
@media (max-width: 480px) { .chat-widget, .chat-launcher { right: 8px; } .chat-widget { bottom: 8px; } }
.chat-head { display: flex; align-items: center; gap: var(--s3); border-bottom: 1px dashed var(--draft-faint); padding-bottom: var(--s3); }
.chat-avatar { color: var(--draft); flex: none; display: flex; }
.chat-avatar svg { width: 30px; height: 28px; }
.chat-head-text { flex: 1; line-height: 1.3; }
.chat-head-text strong { display: block; color: var(--draft); font-size: 0.9375rem; }
.chat-head-text span { font-size: 0.78rem; color: var(--text-muted); }
.chat-close { background: none; border: none; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; padding: 0 var(--s2); min-width: 44px; min-height: 44px; }
.chat-close:hover { color: var(--draft); }
.chat-log { display: grid; gap: var(--s3); overflow-y: auto; scrollbar-width: thin; flex: 1; min-height: 120px; max-height: 380px; }
.chat-msg { max-width: 92%; border-radius: var(--r-card); padding: var(--s3) var(--s4); font-size: 0.9rem; overflow-wrap: anywhere; }
.chat-msg p { color: var(--text); }
.chat-msg p + .chat-links { margin-top: var(--s2); }
.chat-bot { background: var(--field-raised); border-left: 3px solid var(--chalk); justify-self: start; }
.chat-user { background: var(--draft); justify-self: end; }
.chat-user p { color: var(--field); font-weight: 600; }
.chat-thinking p { color: var(--text-muted); letter-spacing: 2px; }
.chat-links { display: grid; gap: var(--s1); }
.chat-links a { font-size: 0.875rem; font-weight: 700; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chat-suggest button { background: none; border: 1px solid var(--draft-faint); border-radius: var(--r-pill);
    color: var(--text-muted); font-family: var(--font-body); font-size: 0.8125rem; padding: 5px 12px; cursor: pointer; }
.chat-suggest button:hover { border-color: var(--draft); color: var(--draft); }
.chat-inputrow { display: flex; gap: var(--s2); }
.chat-inputrow input { flex: 1; min-width: 0; padding: var(--s2) var(--s3); border: 1px solid var(--draft-dim);
    border-radius: var(--r-btn); background: var(--field-deep); color: var(--text); font-family: var(--font-body); font-size: 0.9375rem; }
.chat-inputrow input:focus { outline: 2px solid var(--glow); border-color: transparent; }
.chat-inputrow input::placeholder { color: var(--text-muted); opacity: 1; }
.chat-inputrow .btn { padding: var(--s2) var(--s4); }
/* AI disclosure at the point of use (ai-transparency.html, privacy.html) */
.chat-note { font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); }
.chat-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.chat-note a:hover { color: var(--draft); }

/* ----- Referral tool (match): one row above the fold. Dropdown, free
   text and the button sit side by side on desktop and stack on mobile;
   a compact hero keeps the whole tool visible without scrolling. ----- */
body[data-page="match"] .hero { padding: var(--s6) 0 var(--s5); }

.match-form { background: var(--field-raised); border: 1px solid var(--draft-dim); border-radius: var(--r-card); padding: var(--s5);
    display: grid; gap: var(--s4); --match-h: 54px; }
@media (min-width: 900px) {
    /* All three controls share one line: identical height, bottoms
       aligned, one-line labels in the same slot above. */
    .match-form { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) auto; align-items: end; }
}
.match-col { display: flex; flex-direction: column; }
.match-form label { display: block; font-weight: 700; font-size: 0.9375rem; margin: 0 0 var(--s2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-form select, .match-form textarea, .match-form input[type="text"] {
    width: 100%; height: var(--match-h); padding: 0 var(--s4); border: 1px solid var(--draft-dim); border-radius: var(--r-btn);
    background: var(--field-deep); color: var(--text); font-family: var(--font-body); font-size: 1rem;
}
/* Explicit line height: textareas default to "normal" (about 1.2), so the
   old padding (sized for 1.65em) left the text about 3px above centre.
   Padding + one line + 2px border = exactly the 54px control height. */
.match-form textarea { line-height: 1.5; padding: calc((var(--match-h) - 2px - 1.5em) / 2) var(--s4); resize: none; overflow-y: auto;
    min-height: var(--match-h); field-sizing: content; max-height: 200px; }
@supports (field-sizing: content) { .match-form textarea { height: auto; } }
/* Until a topic is chosen, the required select reads like a placeholder,
   the same grey as the text field's example text. */
.match-form select:invalid, .match-form textarea::placeholder { color: var(--light-muted); opacity: 1; }
.match-form select option { color: var(--light-ink); }
.match-col-action .btn { white-space: nowrap; width: 100%; justify-content: center; height: var(--match-h); }
.match-results { margin-top: var(--s6); }

/* ----- Regulation detail ----- */
.reg-head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.reg-meta { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 0.875rem; color: var(--text-muted); }
.reg-meta .mono { color: var(--text); }
.reg-block { margin: var(--s6) 0; max-width: 760px; }
.reg-block h2 { margin-bottom: var(--s3); }
.reg-block ol, .reg-block ul { padding-left: 1.25em; display: grid; gap: var(--s2); }
.reg-dates { display: grid; gap: 0; margin: var(--s4) 0; }
.reg-src a { display: inline-block; margin-right: var(--s4); }
/* Key dates as built into the page (js/regulation-render.js): crawlers,
   print without the timeline and visitors without JavaScript; the drawn
   timeline replaces it in the browser. */
.reg-block .kd-list { list-style: none; padding: 0; gap: 0; max-width: 760px; }
.kd-list li { padding: var(--s2) 0; border-top: 1px dashed var(--draft-faint); }
.kd-list time { font-family: var(--font-mono); font-size: 0.875rem; margin-right: var(--s3); white-space: nowrap; }
.reg-more { margin-top: var(--s5); }

/* ----- Assessment ----- */
.assess-step { max-width: 780px; margin: 0 auto; }
.assess-progress { display: flex; gap: var(--s1); margin-bottom: var(--s6); }
.assess-progress span { flex: 1; height: 4px; background: var(--field-deep); border: 1px solid var(--draft-faint); }
.assess-progress span.done { background: var(--chalk); border-color: var(--chalk); }
.assess-q { background: var(--field-raised); border: 1px solid var(--draft-faint); border-radius: var(--r-card); padding: var(--s5); margin-bottom: var(--s4); }
.assess-q > p { font-weight: 700; font-size: 1.0625rem; margin-bottom: var(--s4); color: var(--draft); }
.assess-guidance { font-size: 0.875rem; color: var(--text-muted); font-weight: 400; margin-bottom: var(--s4); }
.assess-levels { display: grid; gap: var(--s2); }
.assess-levels label { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); align-items: start;
    border: 1px solid var(--draft-faint); border-radius: 2px; padding: var(--s3); cursor: pointer; font-size: 0.875rem; }
.assess-levels label:hover { border-color: var(--draft); }
.assess-levels label:has(input:checked) { border-color: var(--chalk); background: var(--chalk-tint); }
.assess-levels label:has(input:focus-visible) { outline: 2px solid var(--glow); outline-offset: 2px; }
.assess-levels input { position: absolute; opacity: 0; }
.assess-level-name { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.assess-levels label:has(input:checked) .assess-level-name { color: var(--chalk); font-weight: 700; }
.assess-level-text { color: var(--text-muted); }
.assess-levels label:has(input:checked) .assess-level-text { color: var(--text); }
.assess-nav { display: flex; justify-content: space-between; margin-top: var(--s5); }
.assess-results { max-width: 860px; margin: 0 auto; }
.assess-overall { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); }
.assess-overall .stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 3rem; color: var(--draft); }
.assess-bench-line { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: var(--s6); }
.assess-bench-line strong { color: var(--chalk); }
.results-colonnade { margin: var(--s7) 0; position: relative; }
.results-bench-rule { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--chalk); }

/* ----- Filter chips (use cases, listings) ----- */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.filter-chips .tag { cursor: pointer; border: 1px solid transparent; font-size: 0.8125rem; padding: 5px 12px; background: rgba(20, 48, 77, 0.06); color: var(--text-muted); font-family: var(--font-body); }
.filter-chips .tag:hover { border-color: var(--draft-dim); color: var(--text); }
.filter-chips .tag.on { background: var(--draft); color: var(--field); border-color: var(--draft); }

/* ----- Directory / listing pages ----- */

/* Directory table (providers): reads the section's remapped variables, so it
   works on the field and in light sections alike. Collapses to stacked
   cards below 800px. */
.dir-tools { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.dir-tools input[type="search"] { flex: 1; min-width: 240px; max-width: 420px; padding: var(--s3) var(--s4);
    border: 1px solid var(--draft-dim); border-radius: var(--r-btn); background: var(--field-raised);
    color: var(--text); font-family: var(--font-body); font-size: 0.9375rem; }
.dir-count { font-size: 0.8125rem; color: var(--text-muted); }
.dir-scroll { overflow-x: auto; }
.dir-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.dir-table th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
    text-align: left; color: var(--text-muted); font-weight: 400; padding: var(--s3) var(--s5) var(--s3) 0; border-bottom: 1px solid var(--draft-dim); }
.dir-table td { padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 1px dashed var(--draft-faint); vertical-align: top; color: var(--text-muted); }
.dir-table td:first-child { color: var(--text); min-width: 180px; }
.dir-table td:last-child, .dir-table th:last-child { padding-right: 0; }
.dir-table strong { display: block; color: var(--draft); font-weight: 700; }
.dir-type { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-faint); margin-top: 4px; white-space: nowrap; }
.dir-type-ai { color: var(--chalk); }
@media (max-width: 799px) {
    .dir-table thead { display: none; }
    .dir-table, .dir-table tbody, .dir-table tr, .dir-table td { display: block; }
    .dir-table tr { border: 1px solid var(--draft-faint); border-radius: var(--r-card); padding: var(--s4); margin-bottom: var(--s4); background: var(--field-raised); }
    .dir-table td { border: none; padding: var(--s1) 0; }
    .dir-table td[data-th="Website"]::before, .dir-table td[data-th="Contact"]::before {
        content: attr(data-th) ": "; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--text-faint); }
}

/* Match results as a directory table: same pattern, plus room for the
   description column and the company blurb under an AI reasoning line. */
.match-table td[data-th="Description"] { min-width: 280px; }
.match-table td[data-th="Categories"] { min-width: 140px; }
.match-desc-sub { margin-top: var(--s2); font-size: 0.875rem; color: var(--text-faint); }

/* ----- Knowledge ----- */
.gl-row { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px dashed var(--draft-faint); }
@media (min-width: 768px) { .gl-row { grid-template-columns: 220px 1fr 1fr; gap: var(--s5); } }
.gl-term { font-weight: 700; color: var(--draft); }
.gl-you { color: var(--text-muted); font-size: 0.9375rem; }
.gl-group { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--chalk); padding: var(--s5) 0 var(--s2); border-bottom: 1px solid var(--draft-dim); }

/* ----- Template documents (resource.html): rendered like the paper they
   become; print gives a clean white A4 ----- */
.doc { background: var(--light-card); border: 1px solid var(--light-line); border-radius: var(--r-card);
    padding: var(--s7); max-width: 800px; margin-top: var(--s5); }
.doc-head { border-bottom: 2px solid var(--light-ink); padding-bottom: var(--s4); margin-bottom: var(--s5); }
.doc-head .mono { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--light-muted); display: block; margin-bottom: var(--s2); }
.doc-section { margin: var(--s5) 0; }
.doc-section h3 { margin-bottom: var(--s2); }
.doc-section p { color: var(--light-muted); max-width: 680px; }
.doc-section ul { padding-left: 1.25em; display: grid; gap: var(--s2); color: var(--light-muted); margin-top: var(--s2); }
.doc-checks { display: grid; gap: var(--s2); margin-top: var(--s3); }
.doc-check { display: flex; gap: var(--s3); align-items: flex-start; color: var(--light-muted); font-size: 0.9375rem; }
.doc-box { width: 15px; height: 15px; border: 1.5px solid var(--light-ink); border-radius: 2px; flex: none; margin-top: 4px; }
.doc-fields { display: grid; gap: var(--s3); margin-top: var(--s3); }
.doc-field { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: var(--s3); align-items: end; }
@media (max-width: 599px) { .doc-field { grid-template-columns: 1fr; gap: var(--s1); } }
.doc-field-label { font-weight: 700; font-size: 0.875rem; }
.doc-field-line { border-bottom: 1px solid var(--light-ink); min-height: 1.6em; font-size: 0.8125rem; }
.doc-field-line em { color: var(--light-muted); font-style: italic; }
.doc-foot { border-top: 1px dashed var(--light-line); margin-top: var(--s6); padding-top: var(--s4); }
.doc-foot p { font-size: 0.8125rem; color: var(--light-muted); }
/* A text to copy (the starter kit's interview prompt) */
.doc-copy { border: 1.5px solid var(--light-ink); border-radius: var(--r-card); margin-top: var(--s4); }
.doc-copy-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px dashed var(--light-line); }
.doc-copy-head .listing-note { margin: 0; }
.doc-copy pre { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--light-ink); padding: var(--s4); max-height: 320px; overflow: auto; }
@media print { .doc-copy pre { max-height: none; overflow: visible; } }

/* ----- Resources (resources.html): one shelf per kind of resource, and
   the public list of what a download contains (resource.html) ----- */
.res-shelf + .res-shelf { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px dashed var(--light-line); }
.res-contents-head { margin-top: var(--s5); }
.res-contents { list-style: none; display: grid; gap: var(--s2); margin-top: var(--s3); max-width: 720px; }
.res-contents li { position: relative; padding-left: var(--s5); color: var(--light-muted); }
.res-contents li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 12px; height: 2px; background: var(--light-accent); }

/* ----- Legal pages (privacy, terms, legal notice, AI transparency): one
   readable column on paper, a contents list that stays in view beside it
   on wide screens and sits above it on phones ----- */
.legal { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .legal { grid-template-columns: 220px minmax(0, 720px); gap: var(--s8); align-items: start; } }
.legal-toc { font-size: 0.875rem; }
@media (min-width: 1024px) { .legal-toc { position: sticky; top: calc(var(--nav-h) + var(--s5)); } }
.legal-toc-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: var(--s3); }
.legal-toc ol { list-style: none; display: grid; gap: var(--s2); border-left: 1px solid var(--draft-faint); padding-left: var(--s4); }
.legal-toc a { color: var(--text-muted); }
.legal-toc a:hover { color: var(--link); }
.legal-meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--s5); }
.legal-body { min-width: 0; }
.legal-body > section { padding-top: var(--s6); margin-top: var(--s6); border-top: 1px dashed var(--draft-faint); }
.legal-body h2 { margin-bottom: var(--s3); }
.legal-body h3 { margin: var(--s5) 0 var(--s2); }
.legal-body p + p, .legal-body ul + p, .legal-body p + .legal-data { margin-top: var(--s3); }
.legal-body ul, .legal-body ol { padding-left: 1.25em; display: grid; gap: var(--s2); margin-top: var(--s3); }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body address { font-style: normal; margin: var(--s3) 0; padding-left: var(--s4); border-left: 2px solid var(--draft-faint); }
.legal-summary { padding: var(--s5); }
.legal-summary h2 { margin-bottom: var(--s2); }
.legal-data { display: grid; gap: var(--s4); margin-top: var(--s4); }
.legal-item { border: 1px solid var(--light-line); background: var(--light-card); border-radius: var(--r-card); padding: var(--s4) var(--s5); }
.legal-body .legal-item h3 { margin-top: 0; }
.legal-item dl { display: grid; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: 0.9375rem; }
@media (min-width: 600px) { .legal-item dl { grid-template-columns: 150px minmax(0, 1fr); } }
.legal-item dt { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding-top: 3px; }
.legal-item dd + dt { border-top: 1px dashed var(--light-line); padding-top: var(--s2); }
.legal-item dd + dt + dd { padding-top: var(--s2); }
@media (min-width: 600px) { .legal-item dd + dt + dd { border-top: 1px dashed var(--light-line); } }

/* ----- Member access (account.html): one narrow form column on paper;
   the panels are views of one page (request, reset, email link outcomes) ----- */
.account > * { max-width: 600px; }
.account-panel h2 { margin-bottom: var(--s3); }
.account-panel > p + p { margin-top: var(--s3); }
.account-panel p .btn-ghost { color: var(--link); padding: 0; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.account-form { display: grid; gap: var(--s4); margin-top: var(--s5); }
.account-field { display: grid; gap: var(--s1); }
.account-field label { font-weight: 700; font-size: 0.9375rem; }
.account-field input { width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--light-muted); border-radius: var(--r-btn);
    background: var(--light-card); color: var(--light-ink); font: inherit; }
.account-field input:focus { outline: 2px solid var(--light-accent); border-color: transparent; }
.account-hint { font-weight: 400; font-size: 0.8125rem; color: var(--text-muted); }
.account-check { display: flex; gap: var(--s3); align-items: flex-start; font-size: 0.9375rem; }
.account-check input { width: 18px; height: 18px; margin-top: 4px; flex: none; accent-color: var(--light-accent); }
.account-check a, .account-notice a, .account-panel p a { text-decoration: underline; text-underline-offset: 3px; }
/* Honeypot for bots: off screen, out of the tab order and hidden from
   assistive technology. */
.account-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.account-error { display: none; color: #9A3020; font-size: 0.9375rem; }
.account-error.show { display: block; }
.account-form .btn, .account-panel > .btn { justify-self: start; margin-top: var(--s2); }
.account-notice { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px dashed var(--draft-faint); font-size: 0.875rem; color: var(--text-muted); }
.account-notice p + p { margin-top: var(--s2); }
.reg-watch-list { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s4); max-width: 820px; }
.reg-watch-list li { border-left: 2px solid var(--light-line); padding-left: var(--s4); }
.reg-watch-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.reg-watch-list a { text-decoration: underline; text-underline-offset: 3px; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.account-panel > .account-hint, .account-panel > .account-error { margin-top: var(--s3); }
.account-help .account-error { margin-top: var(--s2); }

/* ----- Print (assessment results, template documents): print as a real
   blueprint stays blue heavy on toner, so print flips to a clean white
   sheet ----- */
@media print {
    .footer, .nav, .assess-nav, .no-print, .modal-backdrop, .view-toggle,
    .chat-launcher, .chat-widget, .ticker, .skip-link, .noscript-note,
    .page-fig, .hero-robot, .hero-ctas, .hero::before, .hero::after,
    body[data-page="assessment"] .masthead, body[data-page="resource"] .masthead,
    body[data-page="resource"] .reg-block, body[data-page="resource"] .listing-note { display: none !important; }
    /* The page title prints (a regulation guide on paper names its
       regulation); the assessment and template documents carry their own. */
    .hero { padding: 0 0 var(--s5); overflow: visible; }
    /* The sheet is white, so the field palette remaps to ink on paper, as
       the light sections do: near-white text and linework (--text, --draft)
       would otherwise vanish, while bars, marks and badges keep their fills. */
    :root, .section-light {
        --field: #fff; --field-deep: #fff; --field-raised: #fff; --field-card: #fff;
        --text: #111; --text-muted: #333; --text-faint: #555;
        --draft: #111; --draft-dim: rgba(0, 0, 0, 0.45); --draft-faint: rgba(0, 0, 0, 0.2);
        --grid-line: transparent; --grid-line-major: transparent;
        --glow: var(--light-accent); --link: var(--light-accent);
        --chalk: var(--light-gold); --chalk-tint: var(--light-gold-tint);
        --pencil-red: #9A3020;
        --mark: var(--light-accent); --mark-benchmark: var(--light-gold);
    }
    body, .section, .section-light { background: #fff !important; color: #111; }
    body * { box-shadow: none !important; text-shadow: none !important; transition: none !important; }
    .card, .rs-panel, .rs-pillar, .pp-role, .pp-role-plate, .pp-node-end, .hero-plate { background: #fff !important; }
    /* Maturity levels: ink shades instead of the field's white shades
       (!important: the screen rules come later in this file) */
    .lv1 { background: rgba(17, 17, 17, 0.1) !important; } .lv2 { background: rgba(17, 17, 17, 0.25) !important; }
    .lv3 { background: rgba(17, 17, 17, 0.45) !important; } .lv4 { background: rgba(17, 17, 17, 0.65) !important; }
    .lv5 { background: rgba(17, 17, 17, 0.85) !important; }
    .assess-results, .assess-results * { color: #111 !important; }
    .assess-results { max-width: none; }
    .doc { border: none; padding: 0; max-width: none; margin: 0; }
    .doc, .doc * { color: #111 !important; }
    .doc-section { break-inside: avoid; }
    .legal { display: block; }
    .legal-toc { display: none; }
    .legal-item { break-inside: avoid; }
}

/* ----- Events ----- */
/* Events grouped by month: drafted month blocks, large day numbers. */
.ev-month { margin-top: var(--s7); }
.ev-month:first-child { margin-top: 0; }
.ev-month-head { display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 2px solid currentColor; }
.ev-month-name { margin: 0; }
.ev-month-year, .ev-month-count { font-family: var(--font-mono); font-size: 0.8125rem; opacity: 0.7; }
.ev-month-count { margin-left: auto; text-transform: uppercase; letter-spacing: 0.08em; }
.ev-item { display: grid; grid-template-columns: 120px 1fr; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px dashed var(--light-line); }
.ev-day { display: flex; flex-direction: column; gap: var(--s1); }
.ev-day-num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.ev-day-dow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; opacity: 0.7; }
.ev-title { margin: 0 0 var(--s2); }
.ev-tags { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.ev-past { margin-top: var(--s7); }
.ev-past summary { cursor: pointer; border: none; }
@media (max-width: 599px) {
    .ev-item { grid-template-columns: 1fr; gap: var(--s2); }
    .ev-day { flex-direction: row; align-items: baseline; gap: var(--s3); }
    .ev-day-num { font-size: 1.5rem; }
}

/* ----- HKU Research Project: survey result charts. Marks use the two chart
   tokens only (--mark drafting ink, --mark-benchmark chalk); identity never
   rides on colour alone (legends + direct labels everywhere). ----- */
.rs-section { margin-top: var(--s8); }
.rs-section > h2 { margin-bottom: var(--s2); }
.rs-section > .rs-sub { color: var(--text-muted); max-width: 720px; margin-bottom: var(--s5); }
.rs-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk); margin-bottom: var(--s2); }
.rs-grid { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .rs-grid-2 { grid-template-columns: repeat(2, 1fr); } .rs-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.rs-tile .rs-val { font-family: var(--font-mono); font-weight: 700; font-size: 2.6rem; line-height: 1.1; color: var(--draft); }
.rs-tile .rs-val small { font-size: 1.2rem; color: var(--text-muted); font-weight: 400; }
.rs-panel { background: rgba(23, 70, 111, 0.45); border: 1px solid var(--draft-faint); border-radius: var(--r-card); padding: var(--s5); }
.rs-panel h3 { margin-bottom: var(--s4); }
.rs-note { font-size: 0.8125rem; color: var(--text-faint); margin-top: var(--s3); }

/* Horizontal bar rows */
.bar-list { display: grid; gap: var(--s2); }
.bar-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; gap: var(--s3); align-items: center; font-size: 0.875rem; }
.bar-row .bar-label { color: var(--text-muted); line-height: 1.3; }
.bar-track { position: relative; height: 18px; background: rgba(242, 248, 253, 0.06); display: flex; align-items: center; }
.bar-fill { height: 18px; background: var(--mark); border-radius: 0 4px 4px 0; flex: none; min-width: 2px; }
.bar-fill.chalk { background: var(--mark-benchmark); }
.bar-val { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); padding-left: var(--s2); white-space: nowrap; }

/* Legend */
.rs-legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 0.8125rem; color: var(--text-muted); margin: var(--s3) 0 var(--s4); }
.rs-legend span { display: inline-flex; align-items: center; gap: 7px; }
/* :where keeps the default fill at element specificity, so the level
   classes (.lv1 to .lv5) colour their legend keys instead of all five
   showing the same mark colour. */
:where(.rs-legend) i { width: 10px; height: 10px; border-radius: 50%; background: var(--mark); flex: none; }
.rs-legend i.chalk { background: var(--mark-benchmark); }
.rs-legend i.lv { border-radius: 2px; }

/* Dumbbell: today vs priority */
.db-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; gap: var(--s3); align-items: center; padding: var(--s2) 0; font-size: 0.875rem; }
.db-row .bar-label { color: var(--text-muted); }
.db-track { position: relative; height: 26px; }
.db-base { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--grid-line-major); }
.db-link { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: var(--draft-dim); }
.db-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--mark); box-shadow: 0 0 0 2px var(--field); }
.db-dot.chalk { background: var(--mark-benchmark); }

/* Stacked maturity distribution: 5 ordered opacity steps of the drafting ink */
.stack { display: flex; height: 18px; gap: 2px; }
.stack i { display: block; height: 100%; }
.lv1 { background: rgba(242, 248, 253, 0.14); } .lv2 { background: rgba(242, 248, 253, 0.30); }
.lv3 { background: rgba(242, 248, 253, 0.50); } .lv4 { background: rgba(242, 248, 253, 0.74); }
.lv5 { background: rgba(242, 248, 253, 1); }

/* Pillar accordion rows */
.rs-pillar { border: 1px solid var(--draft-faint); border-radius: var(--r-card); background: rgba(23, 70, 111, 0.45); }
.rs-pillar + .rs-pillar { margin-top: var(--s3); }
.rs-pillar > button { display: grid; grid-template-columns: 34px minmax(130px, 240px) 1fr 52px 20px; gap: var(--s4); align-items: center;
    width: 100%; background: none; border: none; padding: var(--s4) var(--s5); cursor: pointer; text-align: left;
    font-family: var(--font-body); color: var(--text); font-size: 0.9375rem; }
.rs-pillar > button:hover { background: rgba(242, 248, 253, 0.05); }
.rs-pillar .rs-p-idx { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--chalk); }
.rs-pillar .rs-p-name { font-weight: 700; color: var(--draft); }
.rs-pillar .rs-p-mean { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--text); text-align: right; }
.rs-pillar .rs-p-caret { font-family: var(--font-mono); color: var(--text-faint); text-align: right; }
.rs-p-body { display: none; padding: 0 var(--s5) var(--s5); border-top: 1px dashed var(--draft-faint); }
.rs-pillar.open .rs-p-body { display: block; }
.rs-pillar.open .rs-p-caret { transform: rotate(90deg); }
.rs-p-body .bar-row { grid-template-columns: minmax(150px, 260px) 1fr; }
.rs-p-body .meter-note { font-size: 0.8125rem; color: var(--text-faint); margin: var(--s4) 0 var(--s3); }
@media (max-width: 699px) {
    .rs-pillar > button { grid-template-columns: 30px 1fr 52px 16px; }
    .rs-pillar .rs-p-stack { display: none; }
}

/* "Compare with" selector (research.html): one comparison group at a time.
   The pillar score column widens in the comparison view to carry the
   difference to all organisations under each score. */
.rs-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s4) var(--s5);
    border: 1px solid var(--draft-dim); border-radius: var(--r-card); background: var(--field-raised); }
.rs-filter-label { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--chalk); }
.rs-filter select { flex: 1 1 220px; min-width: 0; width: 100%; max-width: 420px; height: 46px; padding: 0 var(--s4); border: 1px solid var(--draft-dim); border-radius: var(--r-btn);
    background: var(--field-deep); color: var(--text); font-family: var(--font-body); font-size: 1rem; }
.rs-filter select:focus { outline: 2px solid var(--glow); border-color: transparent; }
.rs-filter select option, .rs-filter select optgroup { color: var(--light-ink); }
.rs-filter-note { flex-basis: 100%; font-size: 0.8125rem; color: var(--text-muted); }
.rs-showing { margin: var(--s4) 0 var(--s5); color: var(--text-muted); font-size: 0.9375rem; }
.rs-showing strong { color: var(--draft); }
#rsResults { transition: opacity 0.2s ease; }
#rsResults.rs-loading { opacity: 0.45; }
.rs-compare .rs-pillar > button { grid-template-columns: 34px minmax(130px, 240px) 1fr 96px 20px; }
.rs-pillar .rs-p-delta { display: block; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 699px) {
    .rs-compare .rs-pillar > button { grid-template-columns: 30px 1fr 88px 16px; }
}

/* Workforce matrix: sequential count shading + the count printed in the cell */
.rs-matrix { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rs-matrix th { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 400; text-align: left; padding: var(--s2) var(--s2); vertical-align: bottom; }
.rs-matrix td { padding: 2px; }
.rs-matrix td:first-child, .rs-matrix tbody th { color: var(--text-muted); padding-right: var(--s3); min-width: 130px; }
.rs-cell { display: flex; align-items: center; justify-content: center; height: 34px; font-family: var(--font-mono); font-size: 0.78rem; }

/* Tooltip (per-mark hover layer) */
.viz-tip { position: fixed; z-index: 45; pointer-events: none; display: none; max-width: 260px;
    background: var(--field-deep); border: 1px solid var(--draft-dim); border-radius: var(--r-card);
    padding: var(--s2) var(--s3); font-size: 0.8125rem; color: var(--text); box-shadow: 0 10px 30px rgba(4, 16, 31, 0.5); }
.viz-tip .mono { color: var(--chalk); }

/* ----- Photo galleries (real event photos) ----- */
.photo-grid { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
.photo-grid figure, .about-photo { border: 1px solid var(--draft-faint); border-radius: var(--r-card); overflow: hidden; }
.photo-grid img, .about-photo img { width: 100%; height: auto; display: block; }
.about-photo { max-width: 720px; margin: var(--s5) 0; }
.about-photo figcaption { font-size: 0.8125rem; color: var(--text-muted); padding: var(--s3) var(--s4); }

/* ===== Sister platform band (home; src/partials/sister.html): the ESG
   Sourcing Hub in a browser plate next to a short hand-off. The same
   component sits on gcchk-esg.com pointing back here. ===== */
.sister-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .sister-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); } }
.sister-text h2 { margin-top: var(--s3); }
.sister-text > p { color: var(--text-muted); margin-top: var(--s3); font-size: var(--fs-lead); }
.sister-list { list-style: none; margin: var(--s5) 0; display: grid; gap: var(--s2); font-size: 0.9375rem; }
.sister-list li { position: relative; padding-left: 22px; }
.sister-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 12px; height: 1px; background: var(--chalk); }
.sister-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); margin-top: var(--s3); }
.sister-shot { display: block; border: 1px solid var(--draft-dim); border-radius: var(--r-card); background: var(--field-card); overflow: hidden; color: inherit; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.sister-shot:hover, .sister-shot:focus-visible { border-color: var(--draft); transform: translateY(-2px); }
.sister-shot-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--draft-faint); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-faint); }
.sister-shot-bar > span:not(.sister-shot-url) { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--draft-dim); }
.sister-shot-url { margin-left: var(--s2); padding: 2px 8px; border: 1px solid var(--draft-faint); border-radius: var(--r-card); }
.sister-shot img { display: block; width: 100%; height: auto; }
.sister-shot-cap { display: block; padding: var(--s2) var(--s3); border-top: 1px dashed var(--draft-faint); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
@media print { .sister-shot { display: none; } }

/* Account page: the inbox help (held emails, send again) under the
   "check your inbox" panels. */
.account-help { margin-top: var(--s5); padding: var(--s4); border: 1px dashed var(--draft-faint); font-size: 0.875rem; color: var(--text-muted); }
.account-help p + p { margin-top: var(--s2); }
.account-help strong { color: var(--text); }
.account-help .btn-ghost { padding: 0; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.account-help .btn-ghost:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }
.resend-done { font-family: var(--font-mono); font-size: 0.75rem; color: var(--chalk); }

/* ----- QA review 8 Oct 2026: research heatmap numbers on a dark chip, so
   they keep 4.5:1 on every cell shade; the member shell reserves room while
   it loads (layout shift 0.38 before) ----- */
.rs-num { display: inline-block; background: rgba(6, 20, 37, 0.78); color: var(--text); padding: 0 5px; border-radius: 2px; line-height: 1.5; }
.rs-matrix tbody th { text-align: left; font-weight: 400; font-family: var(--font-body); font-size: 0.8125rem; text-transform: none; letter-spacing: 0; }
#researchRoot { min-height: 100vh; }

/* Self-Assessment (QA review 8 Oct 2026): focus stays visible without
   :has() (older Safari); each pillar shows its HKU average; the printed
   result carries a title and date. */
.assess-levels input:focus-visible { opacity: 1; outline: 2px solid var(--glow); outline-offset: 2px; }
.meter-bench { display: block; font-size: 0.6875rem; color: var(--text-muted); }
.assess-print-head { display: none; }
@media print { .assess-print-head { display: block; font-weight: 700; margin-bottom: var(--s4); } }