/* Home — "Your desk." The signed-in workspace that puts you back into the audition you
   were working on, and the signed-out landing that shows the split-a-tape mechanic.
   Sits on the shell tokens in app.css (see docs/DESIGN-SYSTEM.md); every class is hd-*
   so nothing here collides with feed.css / locker.css. Mono (Space Mono) is used as one
   consistent voice: the production-paperwork layer (slate rows, due chips, eyebrows,
   step numbers). Names and prose stay in Nunito / Plus Jakarta. */

.hd{display:flex; flex-direction:column; gap:22px}

/* Section eyebrow — the paperwork label above a block. */
.hd-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0}

/* Small text link that closes a section ("Open Locker →"). */
.hd-more{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple-hi); font-weight:700; text-decoration:none; margin-left:auto; white-space:nowrap}
.hd-more:hover{text-decoration:underline}

/* ---------- welcome banner (server-rendered, no JS: home.py welcome_context) ---------- */
.hd-welcome{font-family:var(--body); font-size:15px; color:var(--paper); margin:0; text-wrap:balance}
.hd-welcome strong{font-weight:800}

/* Announcement card: server-rendered from the newest announcements row
   (home.py welcome_context). Lavender gradient strip; the whole card links to the row link. */
.hd-announce{display:flex; gap:14px; align-items:flex-start; text-decoration:none;
  background:linear-gradient(100deg,var(--lav),var(--card-bg) 60%);
  border:1px solid var(--line); border-radius:var(--card-radius); padding:15px 18px}
a.hd-announce{transition:border-color .12s ease}
a.hd-announce:hover{border-color:var(--purple-hi)}
.hd-announce .an-k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--purple-hi); background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:3px 9px; flex:none; margin-top:2px}
.hd-announce .an-t{display:block; font-family:var(--disp); font-weight:800; font-size:15px;
  color:var(--paper); margin:0}
.hd-announce .an-b{font-size:13.5px; line-height:1.5; color:var(--muted); margin:3px 0 0}
a.hd-announce:hover .an-t{color:var(--purple-hi)}

/* ---------- marketplace "coming soon" teaser (TAKE7_MARKETPLACE_ENABLED off) ---------- */
.hd-market-teaser{display:flex; align-items:center; gap:8px;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); padding:13px 18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted);
  text-decoration:none}
.hd-market-teaser:hover{color:var(--purple-hi); border-color:var(--purple)}

/* =====================================================================
   THE CONTINUE CARD — the one bold element. A clapperboard slate:
   a diagonal clapstick stripe caps the card, mono paperwork sits under it,
   and one primary action carries the intelligence (what to do next).
   ===================================================================== */
/* overflow visible so the carousel arrows can sit in the gutter outside the card; the
   inner pieces that reach the corners (clapper strip, poster) re-round themselves below. */
.hd-continue{position:relative; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); overflow:visible}
/* Carousel arrows: step through every project in the locker without leaving home. They sit
   just outside the card in the page gutter, with a purple hue. */
.hd-cont-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:36px; height:36px;
  border-radius:999px; display:grid; place-items:center; padding:0; cursor:pointer;
  background:var(--card-bg); border:1.5px solid var(--purple); box-shadow:var(--card-shadow); color:var(--purple)}
.hd-cont-nav:hover{background:var(--purple); border-color:var(--purple); color:#fff}
.hd-cont-nav:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.hd-cont-nav.prev{left:-50px}
.hd-cont-nav.next{right:-50px}
.hd-pager{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--muted); margin-left:2px}
/* The signature: a real clapper's black/white diagonal sticks, kept thin and tasteful. */
.hd-slate-strip{height:12px; border-radius:var(--card-radius) var(--card-radius) 0 0;
  background:repeating-linear-gradient(-45deg, var(--paper) 0 13px, #F7F5F0 13px 26px)}
.hd-cont-grid{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:0}

.hd-cont-poster{position:relative; aspect-ratio:16/9; background:#000; display:block; overflow:hidden;
  border-radius:0 0 0 var(--card-radius)}
.hd-cont-poster img{width:100%; height:100%; object-fit:cover; display:block}
.hd-cont-poster.is-empty{background:linear-gradient(135deg,#6E51CC,#9A80E4 55%,#C9BCF2)}
.hd-cont-poster .clap{position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.9)}
/* Resume affordance, only when there is a tape to open. */
.hd-cont-poster .play{position:absolute; left:14px; bottom:12px; display:inline-flex; align-items:center; gap:7px;
  background:rgba(20,16,30,.62); color:#fff; border-radius:999px; padding:6px 12px 6px 10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(4px)}
.hd-cont-poster .badge{position:absolute; left:12px; top:12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:rgba(20,16,30,.62); color:#fff; backdrop-filter:blur(4px)}
.hd-cont-poster .badge.shimmer{background:linear-gradient(90deg,#7C5CD6,#9A80E4,#7C5CD6);
  background-size:200% 100%; animation:hdShimmer 1.4s linear infinite}
@keyframes hdShimmer{to{background-position:-200% 0}}

.hd-cont-body{padding:20px 24px 22px; display:flex; flex-direction:column; min-width:0}
.hd-slate-row{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.hd-slate-row .np{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--purple-hi)}
.hd-cont-name{font-family:var(--disp); font-weight:900; font-size:27px; line-height:1.12; letter-spacing:-.02em;
  color:var(--paper); margin:0; text-decoration:none; overflow-wrap:anywhere; text-wrap:balance}
a.hd-cont-name:hover{color:var(--purple-hi)}
.hd-cont-meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:8px 0 0}
.hd-cont-status{font-size:15px; line-height:1.5; color:var(--paper); margin:12px 0 0}
.hd-cont-actions{display:flex; align-items:center; gap:16px; margin-top:auto; padding-top:18px}
.hd-cont-actions .hd-sec{font-weight:700; font-size:13.5px; color:var(--purple-hi); text-decoration:none}
.hd-cont-actions .hd-sec:hover{text-decoration:underline}

/* Due chip — mirrors locker.js dueClass thresholds (soon ≤3d amber, overdue+no-outcome red). */
.hd-due{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:999px; background:var(--lav); color:var(--purple-hi); white-space:nowrap}
.hd-due.due-soon{background:rgba(255,203,94,.24); color:#9a6b00}
.hd-due.due-past{background:rgba(229,50,43,.14); color:var(--red)}

/* ---------- two-up: your auditions / your scenes ---------- */
.hd-two{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.hd-card{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); padding:18px 20px}
.hd-card-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}

.hd-rowlist{display:flex; flex-direction:column}
.hd-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line);
  text-decoration:none; color:var(--paper)}
.hd-row:first-child{border-top:none}
.hd-row .rn{font-weight:700; font-size:14px; color:var(--paper); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0}
.hd-row:hover .rn{color:var(--purple-hi)}
.hd-row .rmeta{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-left:auto; white-space:nowrap; flex:none}
.hd-empty{color:var(--muted); font-size:13.5px; line-height:1.55; margin:4px 0 0}
.hd-empty a{color:var(--purple-hi); font-weight:700; text-decoration:none}
.hd-empty a:hover{text-decoration:underline}

/* ---------- discovery band ---------- */
.hd-market{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); padding:18px 20px}
/* Visually-hidden but read by screen readers: the search input keeps an accessible name
   without the repetitive visible "Search scripts" line above the field. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.hd-search-wrap{position:relative; margin:2px 0 14px}
.hd-search{width:100%; font-family:var(--body); font-size:14px; color:var(--paper);
  background:var(--ink); border:1px solid var(--line); border-radius:999px; padding:10px 16px}
.hd-search:focus{outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,92,214,.16); background:#fff}
.hd-search::placeholder{color:var(--muted)}
.hd-results{position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); background:var(--card-bg);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; max-height:56vh; overflow-y:auto}
.hd-result{display:flex; flex-direction:column; gap:2px; padding:10px 15px; text-decoration:none; border-bottom:1px solid var(--line)}
.hd-result:last-child{border-bottom:none}
.hd-result:hover{background:var(--panel-2)}
.hd-result .rt{font-weight:600; font-size:14px; color:var(--paper)}
.hd-result .rs{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.hd-scenes{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:11px}
.hd-scene{display:flex; flex-direction:column; gap:5px; background:var(--ink); border:1px solid var(--line);
  border-radius:12px; padding:12px 13px; text-decoration:none}
.hd-scene:hover{border-color:var(--purple)}
.hd-scene .sk{display:flex; gap:7px; align-items:center; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hd-scene .sg{color:var(--purple-hi)}
.hd-scene .st{font-family:var(--disp); font-weight:800; font-size:15px; color:var(--paper); line-height:1.25}
.hd-scene .sl{font-size:12.5px; line-height:1.45; color:var(--muted); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.hd-scene .sby{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); margin-top:2px}

.hd-groups{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}

/* =====================================================================
   SIGNED-OUT LANDING
   ===================================================================== */
.hd-hero{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
  padding:14px 4px 8px}
.hd-hero-copy .hd-eyebrow{margin-bottom:14px}
.hd-h1{font-family:var(--disp); font-weight:900; font-size:46px; line-height:1.02; letter-spacing:-.03em;
  color:var(--paper); margin:0; text-wrap:balance}
.hd-h1 .dot{color:var(--purple)}
.hd-lede{font-size:16.5px; line-height:1.55; color:var(--muted); margin:16px 0 24px; max-width:42ch; text-wrap:balance}
.hd-cta{display:flex; align-items:center; gap:18px}
.hd-cta .hd-sec{font-weight:700; font-size:14px; color:var(--purple-hi); text-decoration:none}
.hd-cta .hd-sec:hover{text-decoration:underline}

/* The takes-split signature: one tape divides into labeled takes on load. */
.hd-split{display:flex; flex-direction:column; align-items:stretch; gap:0}
.hd-tape{position:relative; height:60px; border-radius:12px; background:#17131f;
  display:grid; place-items:center; box-shadow:var(--card-shadow);
  /* sprocket holes top and bottom */
  border-top:9px solid #17131f; border-bottom:9px solid #17131f;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.5) 10px 16px, transparent 16px 26px),
    linear-gradient(#17131f,#17131f);
  background-position:0 -6px, 0 0; background-size:26px 5px, 100% 100%; background-repeat:repeat-x, no-repeat}
.hd-tape .tl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#EBE4FA}
/* Real frames from a demo tape: a filmstrip of the whole tape, dimmed under its label. */
.hd-tape.has-frames{height:auto; display:block}
.hd-tape .tp-frames{display:grid; grid-template-columns:repeat(5,1fr); gap:3px}
.hd-tape .tp-frames img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.5}
.hd-tape.has-frames .tl{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;
  background:rgba(23,19,31,.82); border-radius:999px; padding:6px 12px}
.hd-split-arrow{align-self:center; color:var(--muted); font-size:18px; line-height:1; margin:8px 0}
.hd-takes{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.hd-take{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--card-bg);
  box-shadow:var(--card-shadow); opacity:0; transform:translateY(14px); animation:hdRise .5s ease forwards}
.hd-take:nth-child(1){animation-delay:.15s}
.hd-take:nth-child(2){animation-delay:.30s}
.hd-take:nth-child(3){animation-delay:.45s}
.hd-take.is-keeper{border-color:var(--purple); box-shadow:0 0 0 2px rgba(124,92,214,.28), var(--card-shadow)}
.hd-take .tk-thumb{aspect-ratio:16/10; position:relative; display:grid; place-items:center}
.hd-take:nth-child(1) .tk-thumb{background:linear-gradient(135deg,#8E74DE,#6E51CC)}
.hd-take:nth-child(2) .tk-thumb{background:linear-gradient(135deg,#7C5CD6,#4E36A6)}
.hd-take:nth-child(3) .tk-thumb{background:linear-gradient(135deg,#A99AE6,#7C5CD6)}
/* Film-leader numeral — the countdown look, subject-specific rather than a generic counter. */
.hd-take .tk-n{font-family:var(--disp); font-weight:900; font-size:44px; line-height:1; color:rgba(255,255,255,.24)}
/* With a real frame behind it the numeral shrinks to a corner tag so the picture reads. */
.hd-take .tk-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hd-take .tk-thumb.has-img{place-items:start}
.hd-take .tk-thumb.has-img .tk-n{position:relative; margin:8px; font-size:13px; color:#fff;
  background:rgba(23,19,31,.7); border-radius:6px; padding:3px 7px}
.hd-take .tk-keep{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; background:#fff; color:var(--purple-hi); border-radius:999px; padding:3px 8px}
.hd-take .tk-lab{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
@keyframes hdRise{to{opacity:1; transform:translateY(0)}}

/* How it works: four numbered stages, each with a picture of what you see at that point,
   then a Locker panel built from the Locker's real fields (role, takes, status). */
.hd-how{margin-top:10px}
.hd-flow{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.hd-flow li{min-width:0}
.hd-flow .fl-n{display:block; font-family:var(--disp); font-weight:900; font-size:30px; line-height:1; color:var(--purple); margin:0 0 10px}
.hd-flow h3{font-family:var(--disp); font-weight:800; font-size:16.5px; margin:0 0 6px; color:var(--paper); text-wrap:balance}
.hd-flow p{font-size:14px; line-height:1.55; color:var(--muted); margin:0}
.fl-pic{position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; margin-bottom:14px;
  background:#17131f; box-shadow:var(--card-shadow)}
.fl-pic img{display:block; width:100%; height:100%; object-fit:cover}
.fl-script{background:var(--card-bg); border:1px solid var(--line); padding:30px 14px 12px;
  display:flex; flex-direction:column; justify-content:center; gap:6px}
.fl-script .fl-ln{font-family:var(--mono); font-size:10.5px; line-height:1.45; color:var(--muted)}
.fl-script .fl-ln b{color:var(--paper); font-weight:600}
.fl-script .fl-ln.you{background:var(--lav); color:var(--purple-hi); border-radius:6px; padding:3px 6px}
.fl-cuts{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px}
.fl-cuts img{border-radius:4px}
.fl-tag{position:absolute; left:8px; bottom:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:rgba(23,19,31,.78); border-radius:999px; padding:3px 8px}
.fl-tag-top{top:8px; bottom:auto; left:auto; right:8px; color:var(--purple-hi); background:var(--lav)}
.fl-rec{position:absolute; top:9px; left:9px; width:9px; height:9px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 3px rgba(249,83,75,.25)}
.fl-dl{position:absolute; right:8px; bottom:8px; font-weight:700; font-size:11px; color:#fff; background:var(--purple);
  border-radius:999px; padding:5px 10px}

.hd-locker{margin-top:26px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:22px; align-items:center;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--card-shadow);
  padding:20px 22px}
.hd-locker .lk-copy .hd-eyebrow{margin-bottom:8px}
.hd-locker h3{font-family:var(--disp); font-weight:800; font-size:17px; margin:0 0 6px; color:var(--paper)}
.hd-locker .lk-copy p:last-child{font-size:14px; line-height:1.55; color:var(--muted); margin:0}
.lk-rows{display:flex; flex-direction:column; gap:6px}
.lk-row{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:6px;
  border-radius:10px; background:var(--ink)}
.lk-row img{display:block; width:56px; aspect-ratio:16/10; object-fit:cover; border-radius:6px}
.lk-txt{display:flex; flex-direction:column; min-width:0}
.lk-n{font-weight:700; font-size:13px; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lk-m{font-size:11.5px; color:var(--muted)}
.lk-st{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  color:var(--purple-hi); background:var(--lav); border-radius:999px; padding:3px 8px}
.lk-st.is-cb{color:#fff; background:var(--purple)}
.lk-st.is-open{color:var(--muted); background:transparent; border:1px solid var(--line)}

/* ---------- getting started (signed-in, dismissible per browser) ----------
   The first thing a new account reads: the three-step workflow, each step a link to where
   it happens. Same lavender-to-white gradient the announcement card used in this slot, with
   the three steps as translucent tiles on top of it. */
.hd-guide{background:linear-gradient(100deg,var(--lav),var(--card-bg) 60%); border:1px solid var(--line);
  border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:18px 20px}
/* --lav stays pale in dark theme, so a dark card gets a dim purple wash instead. */
body.dark .hd-guide{background:linear-gradient(100deg,rgba(124,92,214,.26),var(--card-bg) 60%)}
/* Step tiles are see-through so the gradient reads across them, not just in the margins. */
body.dark .hd-guide-steps a{background:rgba(33,29,23,.5)}
.hd-guide[hidden]{display:none}
.hd-guide-x{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--muted); background:var(--card-bg); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; cursor:pointer}
.hd-guide-x:hover{color:var(--purple-hi); border-color:var(--purple-hi)}
.hd-guide-x:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.hd-guide-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.hd-guide-steps a{display:flex; gap:12px; align-items:flex-start; height:100%; box-sizing:border-box;
  padding:12px 14px; background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:12px; text-decoration:none;
  transition:border-color .12s ease}
.hd-guide-steps a:hover{border-color:var(--purple-hi)}
.hd-guide-steps a:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.hd-guide .gs-n{flex:none; width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  background:var(--lav); color:#5A3FC0; font-family:var(--mono); font-size:12px; font-weight:700}
/* --lav is the same pale lavender in both themes, so the number takes a fixed deep purple
   (dark theme's --purple-hi is too light to read on it). */
.hd-guide .gs-c{display:flex; flex-direction:column; gap:3px; min-width:0}
.hd-guide .gs-t{font-family:var(--disp); font-weight:800; font-size:15px; color:var(--paper)}
.hd-guide-steps a:hover .gs-t{color:var(--purple-hi)}
.hd-guide .gs-b{font-size:13px; line-height:1.5; color:var(--muted)}

/* ---------- tip of the day (in-flow, dismissible) ----------
   A plain white card like .hd-card, so it never pulls the eye ahead of the guide and the
   Continue card. In-flow (not fixed) so it never covers the cards below or, on mobile,
   the Continue-card Resume control. */
.hd-tip{position:relative; margin:0; padding:15px 18px;
  background:var(--card-bg); color:var(--paper); border:1px solid var(--line);
  border-radius:var(--card-radius); box-shadow:var(--card-shadow);
  animation:hdTipIn .32s ease both}
@keyframes hdTipIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.hd-tip .tip-k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--purple-hi); margin:0 0 7px; padding-right:48px}
.hd-tip .tip-q{font-family:var(--disp); font-weight:800; font-size:15.5px; line-height:1.4; letter-spacing:-.01em;
  color:var(--paper); margin:0}
.hd-tip .tip-a{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:10px 0 0}
.hd-tip .tip-a b{color:var(--paper); font-weight:700}
.hd-tip .tip-actions{position:absolute; top:7px; right:8px; display:flex; gap:1px}
.hd-tip .tip-x, .hd-tip .tip-cyc{width:24px; height:24px; border-radius:999px; border:0; background:transparent;
  color:var(--muted); cursor:pointer; display:grid; place-items:center; line-height:1; padding:0}
.hd-tip .tip-x{font-size:16px}
.hd-tip .tip-cyc{font-size:13px}
.hd-tip .tip-x:hover, .hd-tip .tip-cyc:hover{background:var(--lav); color:var(--purple-hi)}
.hd-tip .tip-x:focus-visible, .hd-tip .tip-cyc:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .hd-tip{animation:none} }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hd-cont-grid{grid-template-columns:1fr}
  /* no page gutter on mobile: bring the arrows just inside the card edge and center them
     on the poster (16:9, full width) so they clear the "Next up" label below it. Grown to
     44x44 here (up from the desktop 36x36) so the tap target clears the a11y minimum. */
  .hd-cont-nav{top:calc(28vw + 6px); width:44px; height:44px}
  .hd-cont-nav.prev{left:8px}
  .hd-cont-nav.next{right:8px}
  .hd-two{grid-template-columns:1fr}
  .hd-hero{grid-template-columns:1fr; gap:24px; padding-top:6px}
  .hd-h1{font-size:38px}
  .hd-flow{grid-template-columns:1fr 1fr; gap:26px 18px}
  .hd-locker{grid-template-columns:1fr; padding:18px}
  .hd-guide-steps{grid-template-columns:1fr}
}

@media (max-width:560px){ .hd-flow{grid-template-columns:1fr; gap:28px} }

@media (prefers-reduced-motion:reduce){
  .hd-take{opacity:1; transform:none; animation:none}
  .hd-cont-poster .badge.shimmer{animation:none}
}