/* Governance section — base. Scoped to .gov-* classes.
   Reuses the site tokens from main.css and the callout warning tokens
   from safety-doc.css. Other tasks extend this file. */

:root {
    --gov-warn-band: var(--call-warning-band);
    --gov-warn-bg: var(--call-warning-bg);
}

:root[data-theme="dark"] {
    --gov-warn-band: var(--call-warning-band);
    --gov-warn-bg: var(--call-warning-bg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --gov-warn-band: var(--call-warning-band);
        --gov-warn-bg: var(--call-warning-bg);
    }
}

/* ---- instrument clauses ---- */
.gov-doc .clause {
    position: relative;
    padding-left: 0;
    scroll-margin-top: 6rem;
}

.gov-doc .subclause {
    margin-left: 2rem;
    scroll-margin-top: 6rem;
}

/* ---- clause permalink anchors ---- */
.gov-doc a.clause-anchor {
    display: inline;
    position: absolute;
    left: -1.5rem;
    opacity: 0;
    text-decoration: none;
}

.gov-doc .clause:hover .clause-anchor,
.gov-doc .subclause:hover .clause-anchor,
.gov-doc .clause-anchor:focus-visible {
    opacity: 1;
}

/* ---- clause target highlight ---- */
.gov-doc .clause:target,
.gov-doc .subclause:target,
.gov-doc .clause.is-target,
.gov-doc .subclause.is-target {
    background: var(--wash);
    box-shadow: -8px 0 0 var(--wash);
}

/* Anchor targets must clear the fixed navbar: one shared scroll margin
   for every in-page target in instruments and guides. */
.gov-doc h2,
.gov-doc h3,
.gov-doc h4,
.gov-doc .clause,
.gov-doc .subclause,
.guide-body h2,
.guide-body h3,
.step {
    scroll-margin-top: 5rem;
}

/* ---- status pills ---- */
.status-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid currentColor;
    border-radius: 2px;
    padding: 0.1rem 0.5rem;
    line-height: 1.5;
}

.status-pill--active {
    color: var(--link-ink);
}

/* Active pill in dark mode uses the high-blue so the small uppercase text
   keeps WCAG AA contrast on dark paper (#7fb2e5 on #0b1626 = 8.13:1). */
:root[data-theme="dark"] .status-pill--active {
    color: var(--blue-hi);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .status-pill--active {
        color: var(--blue-hi);
    }
}

.status-pill--dormant {
    color: var(--muted);
}

.status-pill--unconfirmed {
    color: var(--gov-warn-band);
}

/* ---- instrument tables ---- */
.gov-tbl td.is-blank::after {
    content: "";
    display: block;
    height: 1.1em;
    border-bottom: 1px dashed var(--line-2);
}

/* Index-style tables (first header is "#", e.g. POL-09 §4–§5): keep the
   number column narrow on desktop so the prose columns get the room.
   Desktop only — the stacked layout below 700px owns the widths there. */
@media (min-width: 701px) {
    .gov-tbl--idx td:first-child,
    .gov-tbl--idx th:first-child {
        width: 3.5rem;
    }
}

/* ---- instrument metadata header ---- */
.safety-meta.gov-meta {
    grid-template-columns: 1fr 1fr;
}

.safety-meta.gov-meta dt {
    font-family: var(--font-mono);
    text-transform: uppercase;
}

@media (max-width: 1020px) {
    .gov-doc a.clause-anchor {
        position: static;
        margin-left: 0.5rem;
    }
}

@media (max-width: 700px) {
    .gov-doc .subclause {
        margin-left: 1.25rem;
    }

    .safety-meta.gov-meta {
        grid-template-columns: 1fr;
    }

    .gov-doc .tbl-scroll {
        overflow: visible;
    }

    .gov-tbl thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .gov-tbl {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .gov-tbl tbody {
        display: block;
    }

    .gov-tbl tr,
    .gov-tbl td {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .gov-tbl td {
        overflow-wrap: anywhere;
    }

    /* The unconfirmed pill is nowrap by design; on a stacked card the
       value column is ~135px wide at 320px, so let the pill text wrap
       rather than forcing the card (and the page) wider. */
    .gov-tbl .status-pill {
        white-space: normal;
    }

    .gov-tbl tr {
        display: block;
        border: 1px solid var(--line);
        margin-bottom: 0.75rem;
    }

    .gov-tbl td {
        display: grid;
        grid-template-columns: minmax(6rem, 35%) 1fr;
        gap: 0.5rem;
        border: 0;
        border-bottom: 1px solid var(--line);
    }

    .gov-tbl td::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--muted);
    }
}

/* ---- instrument print ---- */
@media print {
        .gov-doc .clause {
        break-inside: avoid;
    }

    .gov-doc a.xref::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    .clause-anchor,
    .status-pill {
        border: 1px solid #000;
        color: #000;
    }

    .gov-meta {
        display: grid;
    }
}

@page {
    margin: 2cm;
}

/* ---- guides (Task 4): long-form reading, accents and stepper ----
   Accent tokens live on [data-accent] so guide pages and the landing
   starting-grid slots share the same accent colours. */

[data-accent="blue"] {
    --guide-accent: var(--blue);
}

[data-accent="navy"] {
    --guide-accent: var(--navy);
}

[data-accent="deep"] {
    --guide-accent: var(--blue-deep);
}

[data-accent="amber"] {
    --guide-accent: var(--gov-warn-band);
}

/* Navy is too dark as an accent rule on a dark ground, so swap it out. */
:root[data-theme="dark"] [data-accent="navy"] {
    --guide-accent: var(--blue-hi);
}

/* Deep blue icons fall below 3:1 on dark wash/paper
   (#2f6690 on #101f36 = 2.69:1), so swap it out too. */
:root[data-theme="dark"] [data-accent="deep"] {
    --guide-accent: var(--blue-hi);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) [data-accent="navy"] {
        --guide-accent: var(--blue-hi);
    }

    :root:not([data-theme]) [data-accent="deep"] {
        --guide-accent: var(--blue-hi);
    }
}

/* ---- guide page frame ---- */
.guide-layout {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.guide-covers {
    color: var(--snow);
    margin-top: 1rem;
    max-width: 70ch;
    line-height: 1.6;
}

.guide-covers a {
    color: var(--blue-hi);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.guide-covers a:focus-visible {
    outline: 2px solid var(--blue-hi);
    outline-offset: 2px;
}

.guide-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* Vertical rhythm: main.css resets all margins to 0, so the long-form
   body restores its own paragraph/list spacing. The :not guards keep
   these (0,1,1+) selectors off the intake stepper, whose own rail/disc
   geometry (padding, margins) must win. */
.guide-body p,
.guide-body ul,
.guide-body ol:not(.stepper),
.guide-body .tbl-scroll {
    margin: 0 0 1.1rem;
}

.guide-body li:not(.step) {
    margin-bottom: 0.35rem;
}

.guide-body ul,
.guide-body ol:not(.stepper) {
    padding-left: 1.4rem;
}

.guide-body h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.6rem;
    margin-top: 2.75rem;
    padding-top: 1rem;
    border-top: 3px solid var(--guide-accent);
    scroll-margin-top: 6rem;
}

.guide-body h3 {
    font-size: 1.2rem;
    scroll-margin-top: 6rem;
}

.guide-body h2:target {
    background: var(--wash);
}

.guide-body a.xref {
    text-decoration: underline;
    text-decoration-color: var(--guide-accent);
    text-underline-offset: 0.15em;
}

/* "Not a governing instrument" note: accent rule + wash ground, plainly
   callout. */
.guide-note {
    border-left: 4px solid var(--guide-accent);
    background: var(--wash);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.guide-note svg {
    flex-shrink: 0;
    color: var(--guide-accent);
    margin-top: 0.15rem;
}

.guide-note p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ---- intake stepper (SOP-ADM-03 §2.3(b) roadmap, CSS only) ---- */
.stepper {
    list-style: none;
    padding-left: 3rem;
    margin: 1.5rem 0 2rem;
    position: relative;
}

.stepper::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--line-2);
}

.step {
    position: relative;
    margin-bottom: 2rem;
}

.step:last-child {
    margin-bottom: 0;
}

.step-n {
    position: absolute;
    left: -3rem;
    top: -0.1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    color: var(--snow);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
}

.step-title {
    margin: 0 0 0.5rem;
    padding-top: 0.25rem;
}

.step-body > :last-child {
    margin-bottom: 0;
}

/* Step paragraphs keep the guide-body rhythm (the :last-child flush
   above would otherwise zero the single paragraph in each step). */
.guide-body .step-body p {
    margin: 0 0 1.1rem;
}

/* The technical-only step carries its own dashed rail segment, so both
   intake paths read directly: technical 1→2→3→4, non-technical 1→3→4. */
.step--technical {
    border-left: 2px dashed var(--line-2);
    margin-left: -0.5rem;
    padding-left: 0.5rem;
}

/* Scoped under .step so the guide-body paragraph rhythm above does
   not override the branch note's tighter spacing (the note is a sibling
   of .step-body, not a child). */
.step .step-branch {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 0.75rem;
}

.step-branch .status-pill {
    margin-right: 0.5rem;
}

/* Routing table: rows are clickable only as progressive enhancement
   (the § links are real links, so the table works with JS off). */
.route-table.js tbody tr {
    cursor: pointer;
}

/* ---- footer links on a guide page ---- */
.guide-more {
    margin-top: 3rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.guide-more ul {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.guide-body .guide-more li:not(.step) {
    margin-bottom: 0.5rem;
}

.guide-more li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    background: var(--paper);
    text-decoration: none;
    color: inherit;
}

.guide-more li a:hover span {
    color: var(--link-ink);
    text-decoration: underline;
}

/* Dark-theme AA swap, as above. */
:root[data-theme="dark"] .guide-more li a:hover span {
    color: var(--blue-hi);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .guide-more li a:hover span {
        color: var(--blue-hi);
    }
}

.guide-more li a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.guide-more li svg {
    flex-shrink: 0;
    color: var(--guide-accent, var(--blue));
}

@media (max-width: 480px) {
    .guide-layout {
        padding: 1.5rem 1rem 3rem;
    }

    .stepper {
        padding-left: 2.75rem;
    }

    .step-n {
        left: -2.75rem;
    }
}

@media print {
    .guide-note {
        break-inside: avoid;
        border-left-color: #000;
    }

    .step-n {
        background: none;
        color: #000;
        border: 1px solid #000;
    }
}

/* ---- governance landing ----
   Intro prose, the filter tabs, the guides starting grid and the three
   registers (register + tower live in main.css, shared with Lab Safety). */

.gov-landing {
    max-width: 1100px;
}

/* main.css resets margins, so restore paragraph rhythm in the intro. */
.gov-intro {
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.gov-intro p {
    margin: 0 0 1rem;
}

.gov-intro p:last-child {
    margin-bottom: 0;
}

.gov-sec + .gov-sec {
    margin-top: 3rem;
}

.sec-head h2 {
    font-size: 2.2rem;
    color: var(--heading);
    letter-spacing: -0.01em;
}

.reg-note {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 72ch;
    margin-top: 1.25rem;
}

/* ---- pit-lane tabs: the active tab is a sheared navy block ---- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.25rem;
    border-bottom: 2px solid var(--navy);
    margin: 2rem 0 3rem;
}

.tabs a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.7rem 1.1rem 0.6rem;
}

.tabs a:hover {
    color: var(--heading);
}

.tabs a.is-on {
    background: var(--navy);
    color: var(--snow);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%);
}

/* ---- filter states (set by the inline script on <main data-show>) ---- */
.gov-landing:not([data-show="all"]) .sec-head,
.gov-landing:not([data-show="all"]) .gov-sec > .sector,
.gov-landing:not([data-show="all"]) .reg-note {
    display: none;
}

.gov-landing[data-show="guides"] #instruments,
.gov-landing[data-show="constitution"] #guides,
.gov-landing[data-show="policies"] #guides,
.gov-landing[data-show="procedures"] #guides,
.gov-landing[data-show="constitution"] .register:not([data-sec="constitution"]),
.gov-landing[data-show="policies"] .register:not([data-sec="policies"]),
.gov-landing[data-show="procedures"] .register:not([data-sec="procedures"]) {
    display: none;
}

/* ---- guides grid: two columns of painted-corner slots ---- */
.grid-start {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}

@media (max-width: 700px) {
    .grid-start {
        grid-template-columns: minmax(0, 1fr);
    }

    .tabs {
        margin: 1.5rem 0 2rem;
    }

    .tabs a {
        padding: 0.6rem 0.8rem 0.5rem;
    }
}