/* ============================================================
   TRANSCRIPT-ONLY DRIVER PAGE

   Four of the five drivers have complete transcripts and no
   recording. This is what they render instead of an empty video
   player. It uses the new design tokens, not the legacy noir
   stylesheet, which exists to dress a player they do not have.

   Loaded only when `hasMedia` is false, so it never competes with
   styles.css on the pages that still need it. Both sheets are
   present in that case, hence the explicit resets below.

   Removed when the recordings land — see spec §13.
   ============================================================ */

body.is-transcript-only,
body.is-listen {
    margin: 0;
    background: var(--shell);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

.transcript-only {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(4rem, 10vw, 8rem);
    background: var(--shell);
    color: var(--ink);
    font-family: var(--font-sans);
}

.transcript-only a:focus-visible,
.transcript-only :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* ---- Navigation ---------------------------------------------- */

.transcript-only-nav,
.transcript-only-foot {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
}

.transcript-only-nav a,
.transcript-only-foot a {
    color: var(--accent);
    text-decoration: none;
    /* 44x44 minimum touch target, per §4. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.125rem;
    border-bottom: 2px solid transparent;
    transition: border-color var(--t-quick) var(--ease);
}

.transcript-only-nav a:hover,
.transcript-only-nav a:focus-visible,
.transcript-only-foot a:hover,
.transcript-only-foot a:focus-visible {
    border-bottom-color: var(--accent);
}

.transcript-only-foot {
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

/* ---- Header -------------------------------------------------- */

.transcript-only-head {
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* Portrait, per §7. Circular, with the required hairline ring: these
   photographs were shot against different backgrounds, and without the
   ring three of the five dissolve into the shell while two read as
   discs. The circle is CSS on a square asset, never masked in.

   Nothing here fills --accent on hover, so the ring stays --rule. */
.transcript-only-portrait {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    object-fit: cover;
    object-position: center center;
    margin-bottom: 1.25rem;
}

.transcript-only-city {
    margin: 0 0 0.75rem;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    color: var(--ink-dim);
}

.transcript-only-name {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: 1.05;
    color: var(--ink);
}

.transcript-only-meta {
    margin: 0.75rem 0 0;
    font-size: var(--fs-meta);
    font-weight: var(--fw-medium);
    color: var(--ink-muted);
}

.transcript-only-tagline {
    margin: 1.5rem 0 0;
    font-size: var(--fs-read);
    line-height: 1.4;
    color: var(--ink);
}

/* The honest notice. Not an error state and not decorated as one:
   the transcript is real content, the recording simply is not here
   yet. Lime marks it as the live status message, and the label
   carries the meaning independently of the colour. */
.transcript-only-notice {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--accent);
    background: transparent;
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--ink-muted);
}

/* ---- Biography ----------------------------------------------- */

.transcript-only-bio {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2.5rem, 6vw, 4rem);
    border-top: 1px solid var(--rule);
}

.transcript-only-bio p {
    margin: 0;
    max-width: var(--measure);
    font-size: var(--fs-read);
    line-height: 1.65;
    color: var(--ink-muted);
}

/* ---- Transcript ---------------------------------------------- */

.transcript-only-body {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2.5rem, 6vw, 4rem);
    border-top: 1px solid var(--rule);
}

.transcript-entry + .transcript-entry {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.transcript-entry-prompt {
    margin: 0 0 1rem;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: var(--ls-tight);
    color: var(--accent);
}

.transcript-entry-text {
    margin: 0;
    max-width: var(--measure);
    font-size: var(--fs-read);
    line-height: 1.7;
    color: var(--ink);
}

/* ---- Skip link ----------------------------------------------- */

.transcript-only ~ .skip-link,
body.is-transcript-only .skip-link,
body.is-listen .skip-link {
    position: absolute;
    left: -9999px;
}

body.is-transcript-only .skip-link:focus,
body.is-listen .skip-link:focus {
    left: var(--gutter);
    top: 1rem;
    z-index: 10;
    width: auto;
    padding: 0.75rem 1rem;
    background: var(--accent);
    color: var(--shell);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .transcript-only *,
    .transcript-only *::before,
    .transcript-only *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================
   THE LISTENING PAGE (DC-11)

   "The interview as a listening experience. This is the listening
   register of Version B." A primary deliverable per MI_217, so it is
   a designed page with its own navigation, on the same bones as the
   transcript-only page: portrait, name, the audio, the chapters, the
   transcript. Lime means live: the chapter now playing carries the
   accent AND aria-current AND a left rule, never colour alone.
   ============================================================ */

.transcript-only-nav .listen-back {
    margin-left: 1.5rem;
}

.listen-kicker {
    margin: 1.5rem 0 0.5rem;
    color: var(--accent);
}

.listen-lede {
    margin: 0;
    max-width: var(--measure);
    font-size: var(--fs-read);
    line-height: 1.6;
    color: var(--ink-muted);
}

.listen-player {
    margin-top: clamp(2rem, 5vw, 3rem);
}
.listen-player audio {
    display: block;
    width: 100%;
    /* The native control is the accessible one; it is not restyled. A
       min-height keeps its touch targets honest across browsers. */
    min-height: 54px;
}
.listen-now {
    margin: 0.75rem 0 0;
    min-height: 1.5em;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    color: var(--accent);
}

.listen-chapters {
    margin-top: clamp(2rem, 5vw, 3rem);
}
.listen-chapter-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.listen-chapter {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    min-height: 44px;
    padding: 0.85rem 0 0.85rem 1rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-body);
    line-height: 1.4;
    transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.listen-chapter:hover,
.listen-chapter:focus-visible { color: var(--accent); }
.listen-chapter[aria-current="true"] {
    color: var(--accent);
    border-left-color: var(--accent);
}
.listen-chapter-n {
    flex: none;
    min-width: 1.5em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim);
}
.listen-chapter[aria-current="true"] .listen-chapter-n { color: var(--accent); }
.listen-chapter-prompt { flex: 1 1 auto; }
.listen-chapter-time {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-label);
    color: var(--ink-dim);
}

.transcript-entry-kicker {
    margin: 0 0 0.5rem;
    color: var(--ink-dim);
}
.listen-transcript .transcript-entry {
    padding-left: 1rem;
    border-left: 3px solid transparent;
    transition: border-color var(--t-quick) var(--ease);
}
.listen-transcript .transcript-entry.is-current {
    border-left-color: var(--accent);
}

.transcript-only-foot a + a {
    margin-left: 1.5rem;
}