/**
 * Patriot University Apparatus — the source-apparatus layer for Surface A.
 *
 * Phase 1. Governed by ../../../citizen-analyst-theme/DESIGN.md.
 *
 * Everything here is Surface A's own system: --pu-* tokens, the 8pt grid, the
 * motion budget, the contrast floors. It adds House Style's *apparatus* — the
 * devices for showing provenance — and declines House Style's *casting*: no
 * Bodoni, no press red, no radius:0, no edition toggle. `.hs` is Surface B's
 * and is never referenced here.
 *
 * `!important` appears throughout for the same reason it does in the parent's
 * echo-kb.css: Echo KB ships ID-specificity rules from its own stylesheets and
 * a settings-derived inline <style> that loads after ours.
 *
 * ── Two groups, and the difference matters ────────────────────────────────
 *
 * A. WORKS ON TODAY'S MARKUP. No converter change, no content edit. Activating
 *    the theme is sufficient. Everything under "1." through "5." below.
 *
 * B. AWAITS A MARKUP HOOK. The rules are here and inert until the publish
 *    converter emits the class. Sections "6." onward. Shipping them now keeps
 *    the design decision reviewable in one place instead of arriving with the
 *    pipeline change.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. MEASURE — the cheapest legibility win available
   DESIGN.md mandates a 65ch article body. #eckb-article-content-body has never
   had a max-width, so KB articles run the full content column: ~760px at a
   1200px container, roughly 95ch. Every article has been ~45% over the theme's
   own stated measure.
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container-v2 #eckb-article-content-body {
    max-width: 65ch !important;
}

/* Tables, figures and embeds are exempt — they carry their own structure and
   are already scroll-contained by the parent. */
#eckb-article-page-container-v2 #eckb-article-content-body table,
#eckb-article-page-container-v2 #eckb-article-content-body figure,
#eckb-article-page-container-v2 #eckb-article-content-body .pu-lia,
#eckb-article-page-container-v2 #eckb-article-content-body iframe {
    max-width: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. COLUMNS — contents left, prose centre, apparatus right
   The theme's PHP flips three Echo KB settings (see functions.php,
   pu_apparatus_managed_settings): the table of contents moves to the left
   sidebar and the knowledge-base navigation tree is retired from article pages.
   That is what frees the right-hand space; this rule spends it.

   The parent's `200px 1fr 240px` has no media query and survives on phones only
   because Echo KB flips the container to display:flex at 768px. This layer never
   depends on that, and uses minmax(0, 1fr) — a bare 1fr takes its minimum from
   content min-width, which is what makes live KB pages scroll sideways between
   1024px and 1440px.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    #eckb-article-page-container-v2 #eckb-article-body {
        grid-template-columns: 220px minmax(0, 1fr) !important;
        column-gap: 32px !important;
    }
    /* Nothing hooks into the right sidebar once the TOC moves; Echo KB still
       emits the empty div. The apparatus lives in the content column's own
       gutter (section 6) rather than in this cell, so a note can never escape
       into a grid area it does not own. */
    #eckb-article-page-container-v2 #eckb-article-right-sidebar {
        display: none !important;
    }
}

/* Between the plugin's mobile collapse and the desktop rail there is not room
   for a contents column AND a readable measure: the theme's own content area is
   only ~654px wide here, and holding a 200px sidebar left 390px of prose. The
   contents go above the article instead, full width. Measured, not assumed. */
@media (min-width: 769px) and (max-width: 1023px) {
    #eckb-article-page-container-v2 #eckb-article-body {
        /* `grid-template-areas` MUST be reset here, and this rule was inert for
           its whole life without it.

           Echo KB declares `grid-template-areas: "left-sidebar content
           right-sidebar"`. The explicit grid is the MAXIMUM of the areas and the
           columns, so a one-track `grid-template-columns` does not collapse this
           grid to one column — it only sizes track 1 and leaves tracks 2 and 3
           at `auto`. The `auto` content track then takes every available pixel,
           `1fr` resolves to 0px, and the sidebar overflows its zero-width track
           to render UNDERNEATH the article: the contents list wraps one
           character per line into a vertical strip with body text on top of it.

           Measured on the live site at 834px (iPad portrait) before this line:
           tracks `0px 490px 0px`, sidebar 20px wide × 13,387px tall, sidebar and
           content both at x=16. After: a single 490px track, contents stacked
           above the article, zero horizontal overflow.

           The ≥1024px band above survives the same padding only because the
           right sidebar is `display: none` there, so its `auto` track measures
           0 — that is luck holding a correct result, not the same fix. */
        grid-template-areas: none !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #eckb-article-page-container-v2 #eckb-article-body > * {
        min-width: 0 !important;
    }
    #eckb-article-page-container-v2 #eckb-article-left-sidebar {
        margin-bottom: 24px !important;
    }
    #eckb-article-page-container-v2 #eckb-article-right-sidebar {
        display: none !important;
    }
}

/* Own the phone case outright rather than inheriting the plugin's flex flip.
   Grid items refuse to shrink below their content's min-content width without
   min-width:0 — the defect that once rendered KB articles 496px inside a 320px
   viewport. */
@media (max-width: 768px) {
    #eckb-article-page-container-v2 #eckb-article-body {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #eckb-article-page-container-v2 #eckb-article-body > * {
        min-width: 0 !important;
    }
    #eckb-article-page-container-v2 #eckb-article-right-sidebar {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. THE TABLE OF CONTENTS — make it usable
   Echo KB builds the TOC client-side into an empty container and leaves it
   static, so on a profile with eight documented actions it scrolls away and
   never comes back. Sticky is the whole fix.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    #eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc {
        position: sticky !important;
        /* CLEAR THE STICKY HEADER. `top: 24px` pinned this 71px behind it —
           the header occupies 0..95px — so the first entries of the contents
           scrolled up under the chrome and could not be read or clicked. The
           viewport budget has to come off the same offset, or the list runs
           past the bottom of the screen by exactly the header's height. */
        top: calc(var(--pu-header-h) + var(--iti-space-sm)) !important;
        max-height: calc(100vh - var(--pu-header-h) - (2 * var(--iti-space-sm)) - 24px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

/* Strip the card treatment off the contents list.
   Moving the TOC into a sidebar put it inside selectors that style knowledge-base
   cards, and the padding compounded: `.eckb-article-toc__inner` took 16px padding
   + 1px border + 12px radius, and then EVERY `li` took the same again. Measured on
   the rendered page, a 220px column was left with 64px of text width, which broke
   "Background" across two lines mid-word. The harness never showed this because it
   used a plain <ul> rather than Echo KB's real markup. */
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__inner,
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__title,
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__inner ul li {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__inner {
    max-height: none !important;
    overflow: visible !important;
    float: none !important;
    margin-bottom: 0 !important;
}

#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__inner ul li {
    margin: 0 0 7px !important;
    line-height: 1.4 !important;
}

/* Echo KB sets `word-wrap: break-word` on TOC links, which splits words rather
   than wrapping between them. With the padding gone there is room to wrap
   normally. */
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__inner ul li a {
    display: block !important;
    padding: 2px 0 !important;
    width: auto !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    border-radius: 3px !important;
}

/* The plugin indents nested levels 20/30/40px, which a 220px column cannot
   afford. A hairline carries the nesting instead. */
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__level-3 a,
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__level-4 a,
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__level-5 a,
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc__level-6 a {
    padding-left: 10px !important;
    border-left: 1px solid var(--pu-gray-200, #E7E5E4) !important;
}

#eckb-article-page-container-v2 .eckb-article-toc__title {
    font-size: 0.6875rem !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--pu-navy) !important;
    background: none !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--pu-gray-600, #57534E) !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--pu-navy) !important;
    margin-bottom: 12px !important;
}

#eckb-article-page-container-v2 .eckb-article-toc a {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

/* Echo KB paints the active entry #1e73be from its own settings, which is not a
   Patriot colour and sits badly against the navy scotch rules. */
#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc ul a.active {
    background: var(--pu-navy-light, #e8eef8) !important;
    color: var(--pu-navy-dark, #0f2447) !important;
    font-weight: 600 !important;
}

#eckb-article-page-container-v2 #eckb-article-left-sidebar .eckb-article-toc ul a:hover {
    background: var(--pu-navy-light, #e8eef8) !important;
    color: var(--pu-navy-dark, #0f2447) !important;
}

#eckb-article-page-container-v2 .eckb-article-toc a:hover,
#eckb-article-page-container-v2 .eckb-article-toc a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. THE SCOTCH RULE — section hierarchy that reads at a glance
   Roger Black's house divider, in Surface A's ink rather than House Style's.
   Today an h2 is carried by weight alone, which on a 12-section profile is not
   enough to find your place while scrolling.
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container-v2 #eckb-article-content-body h2 {
    border-top: 6px solid var(--pu-navy) !important;
    padding-top: 12px !important;
    margin-top: 48px !important;
    position: relative;
}

/* The 1px half of the scotch: 6px over a hairline, not a slab. */
#eckb-article-page-container-v2 #eckb-article-content-body h2::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--pu-navy);
    opacity: 0.35;
}

#eckb-article-page-container-v2 #eckb-article-content-body h3 {
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--pu-gray-200, #E7E5E4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. QUOTED EVIDENCE — a judge's holding should not look like a summary of one
   Profiles quote judicial findings verbatim; today they render as body prose
   with a plain indent, indistinguishable from the writer's paraphrase.
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container-v2 #eckb-article-content-body blockquote {
    border-left: 3px solid var(--pu-gold) !important;
    padding: 4px 0 4px 20px !important;
    margin: 24px 0 !important;
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    color: var(--pu-ink) !important;
    background: none !important;
}

#eckb-article-page-container-v2 #eckb-article-content-body blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5b. CORRECTIONS — the platform speaking about itself, not evidence

   Section 5 gives every blockquote the gold rule that means *quoted evidence*:
   a holding, a deposition, a document read verbatim. Corrections render as
   blockquotes too (`scripts/lib/corrections.py` emits plain Markdown with no
   class), so without this they wear the same dress. Measured on
   gregory-bovino-profile: 19 blockquotes — 10 corrections, 9 evidence,
   indistinguishable.

   The class is applied at render by `pu_apparatus_transform_corrections()`.

   Deliberately QUIETER than evidence, not louder. A correction is a
   transparency obligation, not an argument: it must be unmissable when looked
   for and must not compete with the article it corrects. So: no gold, a navy
   rule that reads institutional, a recessed ground, and the type one step down.
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container-v2 #eckb-article-content-body blockquote.pu-correction {
    border-left: 3px solid var(--pu-navy) !important;
    background: var(--pu-gray-100, #F5F5F4) !important;
    padding: 12px 16px !important;
    margin: 16px 0 !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    color: var(--pu-gray-600, #57534E) !important;
}

/* `**Correction [date]:**` is the label. Give it the institutional voice the
   kicker and rail label already use, so the eye finds it without the block
   shouting. */
#eckb-article-page-container-v2 #eckb-article-content-body blockquote.pu-correction strong:first-child {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pu-navy);
    margin-bottom: 4px;
}

#eckb-article-page-container-v2 #eckb-article-content-body blockquote.pu-correction p:last-child {
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. SOURCE NOTES — attribution out of the reading voice
   AWAITS A MARKUP HOOK. Until the converter emits `.pu-source-note` these rules
   match nothing and cost nothing.

   The converter must SPLIT, not wrap. Measured on the Aakash Singh profile:
   17 attributions, of which only 8 are standalone `<p><strong>Source:</strong>`
   paragraphs. The other 9 are trailing runs inside a list item (7), appended to
   the end of a prose paragraph (1), or after a `<br>` (1). A wrap-the-paragraph
   rule captures under half of them; the attribution has to be lifted out of its
   host element.

   Every one of those 17 currently sits in the reading line and interrupts the
   argument at the moment it lands.
   ══════════════════════════════════════════════════════════════════════════ */

.pu-source-note {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    color: var(--pu-gray-600, #57534E) !important;
    margin: 0 0 16px !important;
}

.pu-source-note__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pu-navy);
    margin-bottom: 2px;
}

/* The rail hangs in the CONTENT column's own gutter — not in the sidebar cell.
   That distinction is the whole lesson of the first attempt, which positioned
   notes absolutely at `left: calc(65ch + 32px)` and put them on top of the table
   of contents, clipped, because the sidebar is a separate grid area.

   Floats rather than absolute positioning: `clear: right` makes consecutive
   notes stack instead of overlapping, which absolute positioning cannot promise
   for two claims a few lines apart. The note still sits beside the paragraph
   that earns it.

   THE RAIL NEEDS 943px OF TRACK AND NOW ASKS FOR IT DIRECTLY.

   655 (65ch) + 28 + 260 = 943. That is a fact about the RAIL. `1280px` was a
   fact about the SHELL — the viewport that happened to yield enough track — and
   the two drifted apart: measured, a 1280px viewport gives the content box
   924px, which is 19px LESS than the rail asks for. The old query had been
   granting the rail a gutter it did not quite have, and nothing could see that
   while the threshold was written in viewport units.

   `container-type: inline-size` queries the CONTENT box, so 943 here means 943
   of usable track rather than 943 of border box. Both halves of the rail are
   converted; leaving the complement as a viewport query made them fight, and
   at 1023px the body took the 288px gutter while the note stayed in flow —
   288px of dead space.

   THE RESULT IS NOT MONOTONIC IN VIEWPORT WIDTH, AND THAT IS CORRECT. Below
   1024 the table of contents stacks above the article, so the content box is
   951px and the rail fits. From 1024 the contents take a 220px rail of their
   own, leaving 744-924px, and the source-note rail genuinely does not fit until
   about 1400. A viewport query cannot express "there is room here"; this does.

   The container goes on the content track, not on the body: the body is the
   thing being sized, and an element cannot query itself. */
#eckb-article-page-container-v2 #eckb-article-content {
    container-type: inline-size;
    container-name: pu-article;
}

@container pu-article (min-width: 943px) {
    #eckb-article-page-container-v2 #eckb-article-content-body {
        box-sizing: border-box !important;
        max-width: calc(65ch + 288px) !important;
        padding-right: 288px !important;
    }
    #eckb-article-page-container-v2 #eckb-article-content-body .pu-source-note {
        float: right;
        clear: right;
        width: 260px;
        margin: 0 -288px 14px 0 !important;
        padding-left: 16px !important;
        border-left: 1px solid var(--pu-gray-200, #E7E5E4) !important;
    }
    /* A note inside a list item must escape the list's own indent, or it hangs
       at the bullet's offset instead of the gutter. */
    #eckb-article-page-container-v2 #eckb-article-content-body li > .pu-source-note {
        margin-right: -288px !important;
    }
    /* Full-width blocks must not run under a floated note. */
    #eckb-article-page-container-v2 #eckb-article-content-body table,
    #eckb-article-page-container-v2 #eckb-article-content-body hr,
    #eckb-article-page-container-v2 #eckb-article-content-body h2 {
        clear: right !important;
    }
}

/* Below the rail breakpoint the note stays in the flow, demoted but present —
   never hidden, because provenance is the point. */
@container pu-article (max-width: 942.98px) {
    /* The note is a <span> inside its block (it has to be, to hoist to the front
       of the block it annotates and still be legal inside a <p>). Below the rail
       it must become a block, or the border-left renders against the first
       inline box mid-sentence instead of demoting the note. */
    .pu-source-note {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 6px 0 16px !important;
        padding-left: 14px !important;
        border-left: 2px solid var(--pu-gray-200, #E7E5E4) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. DATED ACTION HEADS — separate *when* from *what*
   AWAITS A MARKUP HOOK: converter emits `.pu-action-head` with a `data-date`
   on the numbered `### N. Title` headings of a Documented Actions section.
   ══════════════════════════════════════════════════════════════════════════ */

.pu-action-head[data-date]::before {
    content: attr(data-date);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pu-navy);
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. CLAIM CHIPS — status as a landmark, not a sentence
   AWAITS A MARKUP HOOK. Hue + word + square, never colour alone: the chip
   survives greyscale, colour blindness, and a screen reader reading linearly.
   ══════════════════════════════════════════════════════════════════════════ */

.pu-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: var(--pu-radius-pill, 999px);
    white-space: nowrap;
}

.pu-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    background: currentColor;
    flex: none;
}

.pu-chip--verified { color: #1F5C3D; }
.pu-chip--disputed { color: #7A4E00; }
.pu-chip--false    { color: var(--pu-red, #c0392b); }
.pu-chip--context  { color: var(--pu-navy); }

/* ══════════════════════════════════════════════════════════════════════════
   9. MOTION — inside Surface A's budget, not an exception to it
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    #eckb-article-page-container-v2 #eckb-article-right-sidebar .eckb-article-toc {
        scroll-behavior: auto !important;
    }
}