/* ── Overview / landing section ─────────────────────────────── */
      .overview-section {
        padding-bottom: 2.5rem;
        margin-bottom: 4rem;
        /* Closing divider, drawn as a background stripe rather than a
           border-bottom. The element spans the full 1160px grid (content column
           + 268px sidebar), but the rule has to stop where the READING column
           stops, so it lines up with the .chapter-block and .section-heading
           dividers stacked below it. A full-width rule over a narrower document
           body reads as a mistake.

           min(), not the sidebar arithmetic used by .overview-with-sidebar on
           the CoP pages: the reference divider there is .cop-all-wg-wrap, which
           sits INSIDE the overview's content column (750px), whereas here it is
           .chapter-block in .content-constrain (840px). Different target, so
           the two rules legitimately differ. min() also means the ≤1000px
           collapse needs no override — the stripe just tracks the element. */
        background-image: linear-gradient(var(--border), var(--border));
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: min(100%, var(--reading-max)) 2px;
      }
      .ov-kicker {
        font-family: var(--font-ui);
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.13em;
        margin-bottom: 0.6rem;
      }
      .ov-title-row {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.5em;
        margin: 0 0 1rem;
      }
      .ov-main-title {
        font-family: var(--font-ui);
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--heading);
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin: 0;
      }
      .ov-intro {
        font-size: 1rem;
        line-height: 1.72;
        color: var(--ink);
        max-width: 620px;
        margin-bottom: 1.5rem;
      }
      .ov-stats {
        display: flex;
        gap: 2.25rem;
        margin-bottom: 1.75rem;
      }
      .ov-stats > div {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }
      .ov-stats strong {
        font-family: var(--font-ui);
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--heading);
        line-height: 1;
      }
      .ov-stats span {
        font-family: var(--font-ui);
        font-size: 0.68rem;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.07em;
      }
      .ov-begin-btn {
        display: inline-block;
        font-family: var(--font-ui);
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--heading);
        background: var(--surface-subtle);
        border: 1px solid var(--border);
        border-radius: 5px;
        padding: 0.5rem 1.1rem;
        text-decoration: none;
      }
      .ov-begin-btn:hover {
        background: var(--surface-hover);
        text-decoration: none;
      }

      .ov-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-bottom: 1.5rem;
      }
      /* Matches the Code of Practice download buttons: neutral grey by default,
         brand blue on hover. */
      .ov-pdf-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        font-family: var(--font-ui);
        font-size: var(--t-xs);
        font-weight: 600;
        color: var(--ink-muted);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius, 5px);
        padding: 0.4rem 0.9rem;
        text-decoration: none;
        transition: color 0.12s, border-color 0.12s, background 0.12s;
      }
      .ov-pdf-btn:hover {
        color: var(--brand);
        border-color: var(--brand);
        background: var(--brand-light);
        text-decoration: none;
      }
      .ov-pdf-btn i {
        font-size: 0.9em;
      }


      .ov-structure {
        flex: none;
        background: color-mix(in srgb, var(--brand) 6%, transparent);
        border: 1px solid #b8d4ee;
        border-radius: 10px;
        padding: 1.5rem;
        /* Query container so the TOC columns wrap by their own width (reacts to the
           peek tray + sidebar + viewport) and we can span recitals in 2-col mode. */
        container: ov-struct / inline-size;
      }
      .ov-kicker a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid currentColor;
      }
      .ov-kicker a:hover {
        opacity: 0.7;
      }
      .ov-item {
        break-inside: avoid;
        margin-bottom: 0.55rem;
      }
      .ov-item-header {
        /* ID and article range sit together on the left, matching the sidebar TOC —
           a right-aligned range detaches from the chapter it belongs to. */
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
        margin-bottom: 0.2rem;
      }
      .ov-num {
        font-family: var(--font-ui);
        font-size: 0.64rem;
        font-weight: 700;
      }
      .ov-range {
        font-family: var(--font-ui);
        font-size: 0.64rem;
        white-space: nowrap;
      }
      .ov-item-link {
        display: block;
        font-family: var(--font-ui);
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--brand);
        text-decoration: none;
        line-height: 1.3;
        margin-bottom: 0.35rem;
      }
      .ov-item-link:hover {
        text-decoration: underline;
      }
      .ov-subs {
        list-style: none;
        padding: 0 0 0 0.75rem;
        margin: 0;
        border-left: 2px solid var(--border);
      }
      .ov-sub-link {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.4rem;
        font-family: var(--font-ui);
        font-size: 0.74rem;
        color: var(--ink-muted);
        text-decoration: none;
        padding: 0.1rem 0;
        line-height: 1.35;
      }
      .ov-sub-link:hover {
        color: var(--brand);
      }
      .ov-sub-range {
        flex-shrink: 0;
        font-size: 0.67rem;
        color: var(--ink-faint);
      }
      .ov-sub-annex-lbl {
        font-weight: 600;
        flex-shrink: 0;
      }

      .ov-scroll-hint {
        text-align: center;
        padding: 0.5rem 0 0;
      }
      .ov-scroll-hint a {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--ink-faint);
        text-decoration: none;
      }
      .ov-scroll-hint a:hover {
        color: var(--brand);
      }

      /* ── Overview column item lists (weglot-ignore wrappers) ──────── */
      .ov-col-items {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      /* ── Overview column descriptions & annex cards ─────────────── */
      .ov-col-desc {
        font-family: var(--font-ui);
        font-size: var(--t-sm);
        margin-bottom: 0.9rem;
        margin-top: -0.6rem;
      }
      .ov-annex-title {
        font-family: var(--font-ui);
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--heading);
        line-height: 1.3;
        margin-bottom: 0.15rem;
        text-decoration: none;
      }
      .ov-annex-lbl {
        display: block;
        font-family: var(--font-ui);
        font-size: var(--t-sm);
        font-weight: 500;
        color: var(--ink-faint);
      }

      /* ── Guided pathway cards (overview section) ────────────────── */
      .ov-pathways-heading {
        font-family: var(--font-ui);
        font-size: var(--t-lg);
        font-weight: 700;
        color: var(--heading);
        margin-bottom: 0.4rem;
      }
      .ov-pathways-desc {
        font-family: var(--font-ui);
        font-size: var(--t-sm);
        color: var(--ink-2);
        margin: -0.5rem 0 0.9rem;
        line-height: 1.55;
      }
      .pathway-card-breakdown {
        color: var(--ink-faint);
        font-weight: 400;
        margin-left: 0.3rem;
      }
      .ov-pathways {
        margin-bottom: 2rem;
      }
      .pathway-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
      }
      .pathway-card {
        flex: 1 1 200px;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.85rem 1rem;
        cursor: pointer;
        background: var(--surface-subtle);
        transition:
          border-color 0.15s,
          background 0.15s,
          box-shadow 0.15s;
        text-align: left;
      }
      .pathway-card:hover {
        border-color: var(--brand);
        background: var(--surface-hover);
        box-shadow: var(--shadow-sm);
      }
      .pathway-card.active {
        border-color: var(--brand);
        background: var(--brand-light);
        box-shadow: var(--shadow-sm);
      }
      .pathway-card-header {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.25rem;
      }
      .pathway-card-icon {
        font-size: 0.9rem;
        color: var(--brand);
        flex-shrink: 0;
      }
      .pathway-card-title {
        font-family: var(--font-ui);
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--heading);
        line-height: 1.3;
      }
      .pathway-card-desc {
        font-family: var(--font-ui);
        font-size: 0.72rem;
        color: var(--ink-muted);
        line-height: 1.45;
        margin-bottom: 0.4rem;
      }
      .pathway-card-meta {
        font-family: var(--font-ui);
        font-size: 0.65rem;
        color: var(--ink-faint);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      /* ── Playlist panel (fixed bottom-right) ─────────────────────── */
      .playlist-panel {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 288px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        z-index: 500;
        font-family: var(--font-ui);
        display: none;
        flex-direction: column;
        max-height: calc(100vh - 3rem);
      }
      .playlist-panel.open {
        display: flex;
      }
      .playlist-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.85rem 1rem 0.7rem;
        border-bottom: 1px solid var(--border);
      }
      .playlist-header-left {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
      }
      .playlist-icon-title {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--heading);
        line-height: 1.3;
      }
      .playlist-progress {
        font-size: 0.68rem;
        color: var(--ink-faint);
        font-weight: 500;
      }
      .pl-drag-handle {
        display: none; /* shown on mobile via media query */
        justify-content: center;
        align-items: center;
        padding: 8px 0 3px;
        cursor: grab;
        touch-action: none;
        flex-shrink: 0;
      }
      .pl-drag-bar {
        width: 36px;
        height: 4px;
        background: var(--border-md);
        border-radius: 2px;
      }
      .playlist-header-actions {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        flex-shrink: 0;
      }
      .pl-action-btn {
        background: none;
        border: 1px solid var(--border);
        border-radius: 4px;
        cursor: pointer;
        color: var(--ink-faint);
        font-size: 0.72rem;
        line-height: 1;
        width: 1.6rem;
        height: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          color 0.1s,
          background 0.1s;
      }
      .pl-action-btn:hover {
        color: var(--ink);
        background: var(--surface-subtle);
      }
      /* Chevron flips when minimised to hint "click to expand" */
      .playlist-panel.pl-minimized #plMinimise i {
        transform: rotate(180deg);
      }
      /* Minimised: hide content, show just the header; header becomes clickable */
      .playlist-panel.pl-minimized .playlist-items,
      .playlist-panel.pl-minimized .playlist-nav {
        display: none;
      }
      .playlist-panel.pl-minimized .playlist-header {
        cursor: pointer;
        border-bottom: none;
      }
      .playlist-items {
        overflow-y: auto;
        flex: 1;
        padding: 0.4rem 0;
      }
      .playlist-item {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        padding: 0.45rem 1rem;
        cursor: pointer;
        transition: background 0.1s;
      }
      .playlist-item:hover {
        background: var(--surface-subtle);
      }
      .playlist-item.pl-current {
        background: var(--brand-light);
      }
      .playlist-item-check {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin-top: 2px;
        accent-color: var(--brand);
        cursor: pointer;
      }
      .playlist-item-body {
        flex: 1;
        min-width: 0;
      }
      .playlist-item-label {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--heading);
        line-height: 1.35;
      }
      .playlist-item.pl-done .playlist-item-label {
        color: var(--ink-faint);
        text-decoration: line-through;
      }
      .playlist-item-note {
        font-size: 0.68rem;
        color: var(--ink-faint);
        line-height: 1.3;
        margin-top: 1px;
      }
      .playlist-item.pl-current .playlist-item-note {
        color: var(--ink-muted);
      }
      .playlist-nav {
        display: flex;
        gap: 0.5rem;
        padding: 0.65rem 1rem;
        border-top: 1px solid var(--border);
      }
      .playlist-nav-btn {
        flex: 1;
        font-family: var(--font-ui);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--heading);
        background: var(--surface-subtle);
        border: 1px solid var(--border);
        border-radius: 5px;
        padding: 0.4rem 0.6rem;
        cursor: pointer;
        transition: background 0.12s;
      }
      .playlist-nav-btn:hover {
        background: var(--surface-hover);
      }
      .playlist-nav-btn:disabled {
        opacity: 0.35;
        cursor: default;
      }
      .playlist-progress-bar {
        height: 3px;
        background: var(--border);
        border-radius: 0 0 0 0;
        overflow: hidden;
      }
      .playlist-progress-fill {
        height: 100%;
        background: var(--brand);
        transition: width 0.3s ease;
      }

      /* ── Compare button (appears on paragraph hover) ────────────── */
      .cmp-btn {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        opacity: 0;
        background: none;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: var(--ink-faint);
        font-family: var(--font-ui);
        font-size: 0.68rem;
        font-weight: 500;
        cursor: pointer;
        padding: 0 6px;
        height: 1.5rem;
        box-sizing: border-box;
        margin-left: 0.5rem;
        vertical-align: middle;
        transition:
          color 0.12s,
          border-color 0.12s,
          background 0.12s,
          opacity 0.15s;
      }
      .para:hover .cmp-btn,
      .recital:hover .cmp-btn {
        opacity: 1;
      }
      .cmp-btn:hover {
        background: var(--brand-light);
        color: var(--brand);
        border-color: var(--border);
      }
      .para.cmp-preview {
        background: var(--brand-light);
        border-radius: var(--radius-sm);
        outline: 1px solid var(--brand-border);
        transition: background 0.1s;
      }

      /* ── Comparison modal ────────────────────────────────────────── */
      .cmp-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
        display: none;
        align-items: center;
        justify-content: center;
      }
      .cmp-overlay.open {
        display: flex;
      }

      .cmp-modal {
        background: var(--surface);
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        width: min(92vw, 680px);
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .cmp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.8rem 1.25rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .cmp-title {
        font-family: var(--font-ui);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--heading);
      }
      .cmp-subtitle {
        font-family: var(--font-ui);
        font-size: 0.75rem;
        color: var(--ink-faint);
        margin-top: 0.1rem;
      }
      .cmp-close {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--ink-faint);
        font-size: 1.3rem;
        line-height: 1;
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        flex-shrink: 0;
      }
      .cmp-close:hover {
        background: var(--surface-subtle);
        color: var(--ink);
      }

      .cmp-lang-picker {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 0.65rem 1.25rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .cmp-picker-label {
        font-family: var(--font-ui);
        font-size: 0.7rem;
        color: var(--ink-faint);
        margin-right: 0.4rem;
        flex-shrink: 0;
      }
      .cmp-lang-btn {
        font-family: var(--font-ui);
        font-size: 0.68rem;
        font-weight: 600;
        padding: 2px 7px;
        border: 1px solid var(--border);
        border-radius: 3px;
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        letter-spacing: 0.03em;
        transition: background 0.1s;
      }
      .cmp-lang-btn.active {
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
      }
      .cmp-lang-btn.locked {
        opacity: 0.7;
        cursor: default;
      }
      .cmp-lang-btn.maxed {
        opacity: 0.3;
        cursor: not-allowed;
      }
      .cmp-lang-btn:not(.active):not(.locked):not(.maxed):hover {
        background: var(--surface-subtle);
      }

      .cmp-columns {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
      }
      .cmp-column {
        padding: 1rem 1.25rem 1.25rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
        line-height: 1.65;
      }
      .cmp-column:last-child {
        border-bottom: none;
      }
      .cmp-col-header {
        font-family: var(--font-ui);
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.85rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--border);
      }
      .cmp-empty {
        color: var(--ink-faint);
        font-family: var(--font-ui);
        font-size: 0.82rem;
        font-style: italic;
      }

      /* ── Loading ─────────────────────────────────────────────────── */
      .loading { min-height: 200px; }

      /* ── 2 / 3-column document structure ─────────────────────────── */
      .ov-3col,
      .ov-2col {
        display: grid;
        gap: 3rem;
        align-items: start;
        grid-template-columns: 1fr 1fr 1fr;
      }
      .ov-2col {
        grid-template-columns: 1fr 1fr;
      }
      /* Column wrapping driven by the .ov-structure container width (not the viewport),
         so it reacts to the peek tray and sidebar. The container caps around ~780px at
         full layout width (the right sidebar takes ~330px of the 1160px content), so the
         3→2 breakpoint must sit below that for the 3-column layout to appear at all. */
      @container ov-struct (max-width: 620px) {
        .ov-3col { grid-template-columns: 1fr 1fr; }
        /* 2-column layout: recitals (3rd col) spans both rather than sitting half-width */
        .ov-3col .ov-col:last-child { grid-column: 1 / -1; }
      }
      @container ov-struct (max-width: 460px) {
        .ov-3col,
        .ov-2col { grid-template-columns: 1fr; }
        .ov-3col .ov-col:last-child { grid-column: auto; }
      }
      .ov-col {
        min-width: 0;
      }
      .ov-col-label {
        font-family: var(--font-ui);
        /* Larger, sentence-case, un-spaced, near-black — the FA icon has no explicit
           size so it scales with this font-size automatically. */
        font-size: var(--t-base);
        font-weight: 600;
        color: var(--heading);
        text-transform: none;
        letter-spacing: normal;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.35rem;
      }
      /* Muted TOC text — black at 50% opacity with a multiply blend, so the panel's
         blue background bleeds through for a cohesive blue-grey tint (instead of flat grey). */
      .ov-num,
      .ov-range,
      .ov-col-count,
      .ov-col-desc,
      .ov-annex-title,
      .ov-col-label > i {
        color: #000;
        opacity: 0.5;
        mix-blend-mode: multiply;
      }
      .ov-col-count {
        margin-left: auto;
        font-size: var(--t-3xs);
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
      }
      .ov-item-link {
        overflow-wrap: break-word;
      }
      .ov-card {
        display: block;
        margin: 0 -0.7rem 0.35rem;
        padding: 0.3rem 0.7rem;
        border-radius: 6px;
        text-decoration: none !important;
        color: inherit;
        transition: background 0.12s;
      }
      .ov-card:hover {
        background: color-mix(in srgb, var(--blue-hl) 55%, transparent);
      }
      .ov-card .ov-item-link {
        display: block;
        margin-bottom: 0;
        text-decoration: none;
      }
      .ov-card .ov-item-link:hover {
        text-decoration: none;
      }
      .ov-annex-title {
        font-family: var(--font-ui);
        font-size: 0.67rem;
        line-height: 1.3;
        margin-top: 0.05rem;
        margin-bottom: 0.25rem;
        overflow-wrap: break-word;
      }
      .ov-recital-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
        gap: 4px;
        font-size: 16px;
      }
      .ov-recital-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.9rem;
        height: 1.45rem;
        padding: 0 3px;
        font-family: var(--font-ui);
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--brand);
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        text-decoration: none;
        transition:
          background 0.1s,
          color 0.1s,
          border-color 0.1s;
      }
      .ov-recital-btn:hover {
        background: var(--blue-hl);
        color: var(--brand);
        border-color: var(--brand);
        text-decoration: none;
      }

      /* ── Language block in overview (light-bg override) ──────────── */
      .ov-lang-block {
        margin-bottom: 1rem;
      }
      .lang-smallprint {
        font-family: var(--font-ui);
        font-size: var(--t-3xs);
        color: var(--ink-faint);
        line-height: 1.5;
        margin-top: 0.5rem;
      }
      .lang-switcher-ov {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 3px;
        margin-top: 0.4rem;
      }
      .lang-switcher-ov .lang-btn {
        color: var(--ink-muted);
        background: transparent;
        border-color: var(--border-md);
        font-size: var(--t-sm);
        opacity: 0.3;
        transition:
          background 0.12s,
          opacity 0.2s;
      }
      .lang-switcher-ov .lang-btn:hover {
        background: var(--surface-hover);
        color: var(--ink);
        opacity: 1;
      }
      .lang-switcher-ov .lang-btn.active {
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
        opacity: 1;
      }

      /* The sidebar's own look (nav cards, about block, the ov-sidebar-inner
         one-vs-two column switch) lives in shared-components.css, shared with the
         CoP pages. What is index-specific is where the sidebar SITS.

         The sidebar is a normal child of .overview-section, positioned in the DOM
         between the table of contents and the features grid. Making the section a
         two-column grid lifts it into a sticky right-hand column spanning every
         row, while everything else stacks in column 1. Drop that column and the
         sidebar simply falls back into the reading order at its DOM position —
         no reparenting, no duplicated markup. */
      .overview-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 268px;
        column-gap: 4rem;
        /* NO row-gap. The sidebar spans far more rows than the section has (see
           below), and row-gap is painted between every adjacent pair of rows —
           including the empty implicit ones — which added ~1600px of dead space
           under the overview. Row spacing comes from the children's own margin. */
        row-gap: 0;
        align-items: start;
      }
      .overview-section > * {
        grid-column: 1;
        min-width: 0;
      }
      .overview-section > *:not(:last-child) {
        margin-bottom: 1.1rem;
      }
      .overview-section > .ov-sidebar {
        grid-column: 2;
        /* `1 / -1` does not span implicit rows, so span a count that outlives
           any plausible number of overview blocks. Harmless only because
           row-gap is 0 — the surplus rows collapse to nothing. */
        grid-row: 1 / span 99;
        margin-bottom: 0;
      }
      @container (max-width: 1000px) {
        .overview-section { grid-template-columns: minmax(0, 1fr); }
        .overview-section > .ov-sidebar {
          grid-column: 1;
          grid-row: auto;
          position: static;
          /* Back in the flow, it needs the same spacing as its siblings. */
          margin-bottom: 1.1rem;
        }
      }

      /* ── Responsive overrides ─────────────────────────────────────── */
      /* ── Tablet (≤ 1080px) ───────────────────────────────────────── */
      @media (max-width: 1080px) {
        .ov-hero { flex-direction: column; gap: 1.25rem; }
        /* .ov-features-grid / .ov-3col now auto-wrap by content width — no breakpoint needed */
      }

      /* Touch-first layer — aligned with the 920px FAB/drawer breakpoint in shared.css
         so the content padding, pathway grid, bottom-sheet playlist, FAB-hide and
         full-screen modal all switch at the same point as the rest of the touch UI. */
      @media (max-width: 920px) {
        /* Overview hero: tighten */
        .ov-main-title {
          font-size: 1.65rem;
        }
        .overview-section {
          gap: var(--sp-8);
          padding: var(--sp-8) var(--sp-4) var(--sp-6);
        }

        /* Pathway cards: 2-col grid */
        .pathway-cards {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0.5rem;
        }

        /* Playlist panel → draggable bottom sheet */
        .playlist-panel {
          bottom: 0 !important;
          right: 0 !important;
          left: 0 !important;
          width: 100% !important;
          max-height: 42vh !important;
          border-radius: 14px 14px 0 0 !important;
          border-bottom: none !important;
          transition: max-height 0.28s ease !important;
        }
        .playlist-panel.pl-minimized {
          max-height: 88px !important;
        }
        .playlist-items {
          max-height: 18vh !important;
        }
        .pl-drag-handle {
          display: flex !important;
        }

        /* Hide FABs when guided pathway panel is open */
        body.playlist-open .toc-fab,
        body.playlist-open .search-btn {
          display: none !important;
        }

        /* Comparison modal */
        .cmp-modal {
          width: 100vw;
          max-height: 90vh;
          border-radius: 0;
        }
      }

      @media (max-width: 480px) {
        /* Pathway cards: single column on very small screens */
        .pathway-cards {
          grid-template-columns: 1fr;
        }
        .ov-recital-btn {
          min-width: 1.7rem;
          height: 1.35rem;
          font-size: 0.6rem;
        }
      }

/* ── Static-page render cost ─────────────────────────────────────────────────
   The pre-rendered language pages ship the whole Act (~80K DOM nodes, ~4.8MB
   HTML) — the load that motivated the old revert to client rendering. Off-
   screen provisions and recitals are laid out lazily; the intrinsic-size hints
   keep the scrollbar stable. Anchors, find-in-page and the TOC still work —
   browsers render a section the moment it is scrolled to or targeted.

   ONE EXCEPTION: Safari 18.0–25 shipped content-visibility without wiring
   skipped content into find-in-page (WebKit bug 283846, fixed in Safari 26),
   so there ⌘F only matches provisions that have already been rendered. The
   .recital-block rule below has always been live, so that trade-off is not
   new; the section[id] rule was the one silently lost to a stray HTML closing
   tag left behind when this file was extracted from an inline style block.
   The CSS parser read it as the start of a qualified rule and swallowed the
   next block as its body (css-syntax-3, consume-a-qualified-rule), so every
   section on the page was laid out eagerly. */
.document-inner section[id] {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}
.document-inner .recital-block {
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}