/* ui-fixes-20260424.css — iter-5 (2026-04-24 21:30)
 *
 * New in iter-5:
 *  - overflow-x: clip on html, body. Contains absolute-positioned children
 *    (like .glossary-tooltip) that would otherwise push document scrollWidth
 *    past viewport and trigger horizontal page scroll. Verified root cause
 *    via Playwright DOM inspection: .glossary-tooltip width 200px, centered
 *    on anchor with translateX(-50%); lands 6-9px past right edge when
 *    anchor is near viewport right. Using `clip` (not `hidden`) so
 *    position: sticky isn't broken elsewhere.
 *  - .glossary-tooltip scoped width on mobile so it never exceeds viewport
 *    even where overflow-x:clip isn't supported (iOS < 15.4).
 */

/* Horizontal overflow containment — fixes glossary-tooltip bleed. */
html, body {
    overflow-x: clip;
}

/* Glossary tooltip: scale down + viewport-safe width on mobile.
   Also protects against left-edge overflow if anchor is near viewport left. */
@media (max-width: 640px) {
    .glossary-tooltip {
        min-width: 0;
        max-width: calc(100vw - 2rem);
        width: max-content;
    }
}

/* ── Base card bg (neutral grey) ─────────────────────────────────────────── */
.post-card,
.lead-article,
.article-sources,
.article-endcap,
.tip-jar {
    background: #0d0d0d;
}

/* Desk-cell: kill hover flash + clickable cursor (wrapper isn't a link). */
.desk-cell {
    cursor: default;
}
.desk-cell:hover {
    background-color: var(--ink-0);
}
.tip-jar {
    padding: 0;
}

/* TTS progress: click-to-seek + 16px touch hit area via padding trick. */
.tts-bar__progress {
    cursor: pointer;
    height: 6px;
    padding: 5px 0;
    background-clip: content-box;
    box-sizing: content-box;
}
.tts-bar__progress-fill {
    height: 6px;
}

/* Mobile lead↔rail gap */
@media (max-width: 900px) {
    .content-grid {
        row-gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .rail-col {
        margin-top: 1.25rem;
    }

    /* Mobile contrast bump: #0d0d0d → #131313. User reported subtle on phone. */
    .post-card,
    .lead-article,
    .article-sources,
    .article-endcap,
    .tip-jar {
        background: #131313;
    }
    /* Version-toggle: wrap + per-button word-break. Prevents clipping at
       ≤390px when 3+ versions have long labels (e.g. Peter Scully). */
    .version-toggle {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .version-btn {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
    }
}

/* ── Hero visibility pass (2026-04-24) ──────────────────────────────────────
 * Goal: get image + title + first body line above the 1440×900 fold on
 * the home front page. Levers applied:
 *   2. Header shrink, masthead 44/24 → 14/12, util-strip 10 → 6,
 *      primary-nav 14 → 10. Saves ~80px header height.
 *   3. Lead date breathing room, meta padding-top 1.5rem → 0.6rem.
 *      Saves ~14px above the title.
 * Desktop-only (≥641px); mobile masthead row is independent and unchanged. */
@media (min-width: 641px) {
    .masthead {
        padding: 14px var(--gutter-desktop) 12px;
    }
    .util-strip {
        padding: 6px var(--gutter-desktop);
    }
    .primary-nav {
        padding: 10px var(--gutter-desktop);
    }
}
.lead-article__meta {
    padding: 0.6rem 1.5rem 0;
}