/* ============================================================
   context-cue — case-study identity in the nav + the deck line.
   Case-study pages only (the shell adds `.pf-nav__div` + `.pf-cue`
   after the logo, and a `.pf-deck` under the H1). Colours come from
   tokens, so dark mode flips for free.

   Behaviour (context-cue.js):
   - the divider sits from the start; once you scroll past the in-page
     H1 (`body.pf-is-cue`), the short case title + a cover thumbnail
     reveal left→right out of the divider ("train", via clip-path).
   ============================================================ */

/* left cluster (case-study nav only): keeps logo + divider + cue together so
   the nav's space-between still pushes the links/utility to the right. */
.pf-nav__start { display: inline-flex; align-items: center; min-width: 0; }

/* divider anchor */
.pf-nav__div { width: 1px; height: 26px; background: var(--pf-hairline); flex: 0 0 auto; margin-inline: var(--pf-space-2); opacity: 0; transition: opacity var(--pf-dur) var(--pf-ease); }
.pf-is-cue .pf-nav__div { opacity: 1; }

/* the identity cue */
.pf-cue { display: inline-flex; align-items: center; min-width: 0;
  clip-path: inset(0 100% 0 0); transform: translateX(-6px); opacity: 0;
  transition: clip-path var(--pf-dur-slow) var(--pf-ease), transform var(--pf-dur-slow) var(--pf-ease), opacity var(--pf-dur) var(--pf-ease); }
.pf-is-cue .pf-cue { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }

.pf-cue__title { font-family: var(--pf-font-display); font-weight: var(--pf-weight-display); font-size: var(--pf-text-label); letter-spacing: var(--pf-tracking-label); text-transform: uppercase; color: var(--pf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(48vw, 460px); }

/* The cue thumbnail is a generated chip, not a shrunk screenshot: it reuses the
   study's own card-cover gradient (same geometry as cover.css, so it matches the
   card the reader came from) with a simplified whitish "screen" block on top — a
   shrunk-logo treatment. The gradient stops come inline from the card
   (--pf-cover-from / --pf-cover-to); a study with no cover falls back to a neutral
   tint. Decorative (aria-hidden). */
.pf-cue__thumb { position: relative; display: inline-block; width: 40px; height: 25px; margin-left: var(--pf-space-2); flex: 0 0 auto; overflow: hidden; border: var(--pf-border) solid var(--pf-hairline-strong); border-radius: var(--pf-radius-sm); background: linear-gradient(244deg, var(--pf-cover-from, var(--pf-surface-sunken)) 50%, var(--pf-cover-to, var(--pf-hairline-strong)) 100%); }
.pf-cue__thumb::after { content: ""; position: absolute; inset: 4px 5px; border-radius: 1px; background: var(--pf-cover-screen); }

/* Inverse / POV entry (e.g. Designing with AI): the study has no cover gradient, so
   rather than the neutral fallback tint the chip echoes its own dark "AI+UX" card — a
   dark ground with a small light mono mark. Uses --pf-surface-inverse/--pf-ink-inverse,
   which flip by theme exactly like the inverse card, so the chip flips with it. */
.pf-cue__thumb--inverse { background: var(--pf-surface-inverse); border-color: var(--pf-surface-inverse); }
.pf-cue__thumb--inverse::after { content: none; }
.pf-cue__mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--pf-font-display); font-weight: var(--pf-weight-display); font-size: 8px; letter-spacing: 0.01em; color: var(--pf-ink-inverse); }

@media (prefers-reduced-motion: reduce) { .pf-cue, .pf-nav__div { transition: none; } }

/* Note: the nav no longer resizes when the section tabs freeze — that resync of
   --pf-navh mid-scroll caused a visible jitter (and a grow/shrink when leaving a
   case study). The nav is now a single, permanently tighter height (nav.css), so
   the pinned tabs sit flush with no movement. */

/* --- the deck: the long editorial line, demoted from the H1 and set in
       readable sentence-case serif (not the all-caps display H1) --- */
.pf-deck { font-family: var(--pf-font-body); font-style: italic; font-weight: var(--pf-weight-body); font-size: var(--pf-text-deck); line-height: 1.4; color: var(--pf-ink); margin-top: var(--pf-space-2); }  /* v0.9.80: --pf-text-deck (20 → 24) instead of the 20px h3 step, leading 1.4 for the larger italic */

/* mobile: the DS nav wraps its links; keep the cue on the first row and let
   the title ellipsize so it never fights the wrapped links. */
@media (max-width: 480px) {
  .pf-cue__title { max-width: 44vw; }
}