/* =====================================================================
   Rep Rewind — lesson chassis.
   CAB course skeleton (top bar / stimulus / chips / Check / feedback panel)
   rendered in the manager-lessons dark system. Every value here is lifted
   from manager-lessons-v3-aug-26/review-screen-lab.html — see
   ../STYLE-ARCHITECTURE.md for the element-by-element mapping.
   ===================================================================== */

@font-face { font-family:'Druk Wide'; src:url('../fonts/Druk-Wide-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Druk Text Wide'; src:url('fonts/DrukTextWide-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root{
  --carbon:#0D0D0F; --surface:#1E1E1E; --card:#262626; --hairline:#393939;
  --yellow:#FFF500; --lip:#D3CB00; --ink:#1C1C1C;
  --muted:#949494; --muted-2:#7C7C7C; --white:#FFFFFF;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:'Inter',sans-serif; background:var(--carbon); color:var(--white);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}

/* ---- the exercise surface: fills the iframe, which fills .screen ---- */
.app{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--carbon); overflow:hidden; }

/* ---- status bar (Dynamic Island, iPhone 15/16) ---- */
.sb { height:54px; flex-shrink:0; position:relative; z-index:5; }
.sb .time { position:absolute; left:33px; top:17px; font-size:17px; font-weight:600; letter-spacing:0.2px; color:#fff; }
.sb .island { position:absolute; left:50%; top:11px; transform:translateX(-50%); width:126px; height:37px; background:#000; border-radius:20px; }
.sb .right { position:absolute; right:26px; top:19px; display:flex; align-items:center; gap:7px; }
.sb .right svg { display:block; }

/* ---- top bar — CAB geometry, pulled up under the status bar ---- */
.top-bar{ flex-shrink:0; padding:12px 24px 16px; display:flex; align-items:center; gap:16px; z-index:10; }
.close-btn{ color:var(--muted); font-size:28px; font-weight:700; line-height:1; cursor:pointer; }
.progress-track{ flex:1; height:16px; background:rgba(255,255,255,0.10); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--yellow); border-radius:99px; position:relative; transition:width 0.4s cubic-bezier(0.2,0.8,0.2,1); }
.progress-fill::after{ content:''; position:absolute; top:4px; left:8px; right:8px; height:4px; background:rgba(255,255,255,0.30); border-radius:99px; }

/* ---- content ---- */
.content{ flex:1; min-height:0; padding:8px 20px 0; display:flex; flex-direction:column; }
.coach-q{ font-size:24px; font-weight:700; letter-spacing:-0.015em; line-height:1.25; color:#fff; margin-bottom:30px; }
.coach-q.tight{ margin-bottom:16px; }

/* ---- conversation thread ---- */
/* the 14px clears the newest bubble off the bottom bar once the thread starts scrolling */
.thread{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; padding-bottom:14px; }
.thread::-webkit-scrollbar{ display:none; }
.row{ display:flex; flex-direction:column; margin-bottom:14px; }
.row.left{ align-items:flex-start; }
.row.right{ align-items:flex-end; }
.who{ font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.bub{ padding:13px 16px; font-size:16px; font-weight:400; line-height:1.4; max-width:88%; }
.bub.them{ background:rgba(255,255,255,0.02); border:1px solid var(--hairline); border-radius:12px 12px 12px 0; color:#EDEDED; }
.bub.you{ background:rgba(255,245,0,0.08); border:1px solid var(--yellow); border-radius:12px 12px 0 12px; color:#fff; }
.bub.you.miss{ background:rgba(255,255,255,0.02); border-color:var(--hairline); color:#EDEDED; }
.row.fade-in{ animation:rowIn 0.32s cubic-bezier(0.2,0.8,0.2,1) both; }
/* Prior bubbles fall away so the key exchange becomes topmost (CAB choreography). The height collapses
   on the same curve as the fade, so what remains glides up instead of snapping when the row is removed. */
.row.gone{ opacity:0; overflow:hidden;
  transition:opacity 0.26s ease, height 0.44s cubic-bezier(0.2,0.8,0.2,1),
             margin 0.44s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes rowIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Audio state lives INSIDE the bubble — the line currently playing stays lit and carries a small
   speaking indicator; lines already played recede. No repeated label under every bubble. */
.spk{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; margin-left:9px; vertical-align:-1px; }
.spk i{ display:block; width:2px; border-radius:1px; background:var(--yellow); height:3px; animation:spkPulse 0.9s ease-in-out infinite; }
.spk i:nth-child(2){ animation-delay:0.12s } .spk i:nth-child(3){ animation-delay:0.24s }
.spk i:nth-child(4){ animation-delay:0.36s } .spk i:nth-child(5){ animation-delay:0.48s }
@keyframes spkPulse{ 0%,100%{ height:3px } 50%{ height:11px } }
.row.played .bub.them{ color:#7C7C7C; border-color:#2A2A2A; }

/* ---- speaking now: the bubble itself carries the state while its line plays ----
   A yellow border for the duration, and the fill breathes — 0.02 to 0.06, which is dark enough that
   the bubble never becomes the brightest thing on a dark screen. One bubble is .talking at a time;
   it comes off before the next line lands and .played greys it. */
.bub.talking{ border-color:var(--yellow) !important; animation:bubTalk 1.5s ease-in-out infinite; }
@keyframes bubTalk{
  0%,100%{ background:rgba(255,255,255,0.02) }
  50%{ background:rgba(255,255,255,0.06) } }
/* the rep's own line keeps its yellow wash while it plays */
.bub.you.talking{ animation:bubTalkYou 1.5s ease-in-out infinite; }
@keyframes bubTalkYou{
  0%,100%{ background:rgba(255,245,0,0.08) }
  50%{ background:rgba(255,245,0,0.14) } }
/* consecutive lines from the same speaker drop the label and tuck up under the one above */
.row.same{ margin-top:-8px; }

/* ---- the decision surface: the manager build's floating coach card ----
   Values lifted from ../manager-lessons-v3-aug-26/review-screen-lab.html (.coach-card / .coach-foot).
   It rises over the conversation, and the conversation dims behind it except the line in focus. */
.decide{ position:absolute; left:14px; right:14px; bottom:20px; z-index:6;
  background:rgba(255,255,255,0.04); -webkit-backdrop-filter:blur(64px); backdrop-filter:blur(64px);
  border:1px solid rgba(255,255,255,0.10); border-radius:26px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 26px 10px rgba(8,8,10,0.62);
  padding:32px 22px 28px;
  transition:transform 0.52s cubic-bezier(0.2,0.8,0.2,1); }
.decide.down{ transform:translateY(calc(100% + 20px)); }
/* the miss path is snappy, not choreographed: the card fades out, the toast arrives, and Try again
   brings it straight back. Nothing to watch, because nothing happened in the conversation. */
.decide.gone{ opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity 0.12s ease, transform 0.12s ease; }
.decide.back{ transition:opacity 0.14s ease, transform 0.14s ease; }
/* the card's leading prompt — the criterion, stated, so the only task left is the discrimination */
/* the card's instruction carries the same weight as the rule in the walkthrough — it is the teaching,
   not a caption */
.decide-prompt{ font-size:19px; font-weight:700; line-height:1.35; text-align:center; color:#fff;
  margin-bottom:24px; opacity:0; }
.decide-prompt.in{ animation:teachIn 0.3s ease-out both; opacity:1; }
/* chips live on the card; the Check button sits in its own footer, divided from them (.coach-foot) */
.decide .opt-group{ margin-top:0; padding-bottom:0; }
.decide-foot{ margin:18px -22px 0; padding:18px 22px 0; border-top:1px solid rgba(255,255,255,0.10); }
/* the conversation recedes behind the card; the line being decided on stays lit */
.app.deciding .thread .row{ opacity:0.10; transition:opacity 0.32s ease; }
.app.deciding .thread .row.focus{ opacity:1; }
.app.deciding .bottom-bar{ opacity:0; pointer-events:none; transition:opacity 0.2s ease; }

/* ---- the teaching moment (the xp-sim guided-walkthrough block, in the dark system) ---- */
.teach{ flex-shrink:0; padding:0 0 28px; }
.decide .teach{ padding:0; margin:0; }
.decide .teach-div{ display:none; }
.teach.hidden{ visibility:hidden; }
.teach-div{ height:1px; background:#2A2A2A; margin-bottom:16px; }
.explain{ font-size:19px; font-weight:700; line-height:1.35; text-align:center; color:#fff; margin-bottom:14px; opacity:0; }
.explain.in{ animation:teachIn 0.3s ease-out both; opacity:1; }
.explain-sub{ font-size:17px; font-weight:400; line-height:1.5; text-align:center; color:#B4B4B4; margin-bottom:32px; opacity:0; }
.explain-sub.in{ animation:teachIn 0.3s ease-out both; opacity:1; }
/* The option arms before it can be tapped: a bar fills along its bottom edge while you read, then the
   whole edge and border turn yellow and it becomes tappable, then it pulses to nudge you.
   Mechanic and timings copied from the AE course's Say This exercise
   (../rilla-ae-course-aug-26/course/lesson-1/ex1.html) — green there, yellow here. */
.move-option{ position:relative; display:block; width:100%; text-align:center; padding:20px;
  border:1px solid var(--hairline); border-radius:14px; background:rgba(255,255,255,0.02); color:#fff;
  font-family:inherit; font-size:16px; font-weight:600; line-height:1.35;
  cursor:default; pointer-events:none; opacity:0; box-shadow:0 4px 0 #232325;
  transition:opacity 0.3s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.08s; }
.move-option.in{ animation:teachIn 0.3s ease-out both; opacity:1; }
/* the bar lays directly ON the chip's bottom lip, not floating above it */
.opt-timer{ position:absolute; left:10px; bottom:-4px; height:4px; width:0; background:#4A4A4C; border-radius:99px; }
.move-option.arming .opt-timer{ width:calc(100% - 20px); transition:width 2s linear; }
.move-option.ready .opt-timer{ opacity:0; transition:opacity 0.3s ease; }
.move-option.ready{ border-color:var(--yellow); box-shadow:0 4px 0 var(--lip); cursor:pointer; pointer-events:auto; }
.move-option.ready:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--lip); }
/* a double-pulse, then a gap — three times, then silent */
@keyframes chipPulse{
  0%{ transform:scale(1) } 1.8%{ transform:scale(1.035) } 4.5%{ transform:scale(1) }
  6.4%{ transform:scale(1.035) } 9%{ transform:scale(1) } 100%{ transform:scale(1) }
}
.move-option.pulse{ animation:chipPulse 5.5s ease-in-out 3 both; }
.move-option.done{ border-color:var(--yellow); background:rgba(255,245,0,0.08); box-shadow:0 4px 0 var(--lip); pointer-events:none; animation:none; }
.opt-cue{ text-align:center; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--yellow); margin-top:20px; opacity:0; }
.opt-cue.in{ animation:teachIn 0.3s ease-out both; opacity:1; }
@keyframes teachIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* the chip does not duplicate itself — it flies from the card to its place in the conversation */
.fly-chip{ position:fixed; z-index:60; margin:0; box-sizing:border-box; pointer-events:none; text-align:left;
  border:1px solid var(--yellow); border-radius:12px 12px 0 12px; background:rgba(255,245,0,0.08);
  color:#fff; font-family:inherit; font-size:16px; font-weight:400; line-height:1.4; padding:13px 16px;
  transition:transform 0.44s cubic-bezier(0.2,0.8,0.2,1), width 0.44s cubic-bezier(0.2,0.8,0.2,1); }


/* ---- exercise label — the one place an eyebrow is allowed, to flag a change of modality ---- */
.ex-label{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.1em; line-height:1;
  text-transform:uppercase; color:var(--yellow); margin-bottom:10px; }

/* ---- the voice set-up, on the same floating card as every other ask ----
   Solid fill rather than the frosted one: with an empty conversation behind it the 64px backdrop blur
   smears the header and the progress bar into a visible gradient. Everything else matches the card. */
.decide.start{ text-align:center; padding:52px 22px 42px; background:#1C1C1E; -webkit-backdrop-filter:none; backdrop-filter:none; }
/* the empty prompt and chip group still contribute their margins, which pushed the CTA up off the
   card's bottom padding. In start mode they are not in the box at all. */
.decide.start .decide-prompt, .decide.start .opt-group{ display:none; }
/* The waveform: Vin's five-bar reference, moving the way the reference video actually moves.
   In the video the envelope SCROLLS — peaks enter on the right and travel leftward, like a tape
   passing a window — rather than each bar pulsing in place. So all five bars run the SAME amplitude
   tape and the delay increases right-to-left, which makes the pattern travel across them. The tape
   itself is irregular, with bursts and a quiet stretch, so it reads as speech. */
.start-wave{ display:flex; align-items:flex-end; justify-content:center; gap:4px; height:54px; margin:0 auto; }
.start-wave i{ display:block; width:7px; background:var(--yellow); border-radius:2.5px 2.5px 0 0;
  transform-origin:bottom;
  animation-duration:1.92s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
/* Two things at once. The SHAPE is a three-lobe normal distribution — a large bell in the middle,
   a smaller one on each tail — which sets how tall each bar is allowed to get. The MOTION is the tape
   from the reference video scrolling through that shape: the same amplitude pattern runs in every bar
   with the delay stepping right-to-left, so peaks travel leftward.
   The floor is 50% of EACH BAR'S OWN peak, not 50% of the tallest bar. Flooring everything at half of
   54px left the short bars with 6px of travel and the whole thing read as a fence. */
.start-wave i:nth-child(1){ height:14.3px; animation-name:tape1; animation-delay:0.624s }
.start-wave i:nth-child(2){ height:7.2px; animation-name:tape2; animation-delay:0.52s }
.start-wave i:nth-child(3){ height:16.4px; animation-name:tape3; animation-delay:0.416s }
.start-wave i:nth-child(4){ height:27.0px; animation-name:tape4; animation-delay:0.312s }
.start-wave i:nth-child(5){ height:16.4px; animation-name:tape5; animation-delay:0.208s }
.start-wave i:nth-child(6){ height:7.2px; animation-name:tape6; animation-delay:0.104s }
.start-wave i:nth-child(7){ height:14.3px; animation-name:tape7; animation-delay:0.0s }
@keyframes tape1{ 0%{ height:14.3px } 8%{ height:23.2px } 16%{ height:16.9px } 24%{ height:27.3px } 32%{ height:19.2px } 40%{ height:28.7px } 48%{ height:20.3px } 56%{ height:15.2px } 64%{ height:25.0px } 72%{ height:18.0px } 80%{ height:26.7px } 88%{ height:19.8px } 96%{ height:16.0px } 100%{ height:14.3px } }
@keyframes tape2{ 0%{ height:7.2px } 8%{ height:11.6px } 16%{ height:8.5px } 24%{ height:13.6px } 32%{ height:9.6px } 40%{ height:14.3px } 48%{ height:10.2px } 56%{ height:7.6px } 64%{ height:12.5px } 72%{ height:9.0px } 80%{ height:13.3px } 88%{ height:9.9px } 96%{ height:8.1px } 100%{ height:7.2px } }
@keyframes tape3{ 0%{ height:16.4px } 8%{ height:26.6px } 16%{ height:19.4px } 24%{ height:31.2px } 32%{ height:22.0px } 40%{ height:32.9px } 48%{ height:23.3px } 56%{ height:17.4px } 64%{ height:28.6px } 72%{ height:20.7px } 80%{ height:30.6px } 88%{ height:22.7px } 96%{ height:18.4px } 100%{ height:16.4px } }
@keyframes tape4{ 0%{ height:27.0px } 8%{ height:43.7px } 16%{ height:31.9px } 24%{ height:51.3px } 32%{ height:36.2px } 40%{ height:54.0px } 48%{ height:38.3px } 56%{ height:28.6px } 64%{ height:47.0px } 72%{ height:34.0px } 80%{ height:50.2px } 88%{ height:37.3px } 96%{ height:30.2px } 100%{ height:27.0px } }
@keyframes tape5{ 0%{ height:16.4px } 8%{ height:26.6px } 16%{ height:19.4px } 24%{ height:31.2px } 32%{ height:22.0px } 40%{ height:32.9px } 48%{ height:23.3px } 56%{ height:17.4px } 64%{ height:28.6px } 72%{ height:20.7px } 80%{ height:30.6px } 88%{ height:22.7px } 96%{ height:18.4px } 100%{ height:16.4px } }
@keyframes tape6{ 0%{ height:7.2px } 8%{ height:11.6px } 16%{ height:8.5px } 24%{ height:13.6px } 32%{ height:9.6px } 40%{ height:14.3px } 48%{ height:10.2px } 56%{ height:7.6px } 64%{ height:12.5px } 72%{ height:9.0px } 80%{ height:13.3px } 88%{ height:9.9px } 96%{ height:8.1px } 100%{ height:7.2px } }
@keyframes tape7{ 0%{ height:14.3px } 8%{ height:23.2px } 16%{ height:16.9px } 24%{ height:27.3px } 32%{ height:19.2px } 40%{ height:28.7px } 48%{ height:20.3px } 56%{ height:15.2px } 64%{ height:25.0px } 72%{ height:18.0px } 80%{ height:26.7px } 88%{ height:19.8px } 96%{ height:16.0px } 100%{ height:14.3px } }.start-goal{ font-family:'Inter',sans-serif; font-weight:700; font-size:24px; line-height:1.25; letter-spacing:-0.015em; color:#fff; margin-top:30px; }
.start-desc{ font-family:'Inter',sans-serif; font-weight:400; font-size:17px; line-height:1.45; color:#B4B4B4; margin-top:10px; }
.start-block .coach-cta{ margin-top:38px; }

/* ---- the mic button: our own CTA, not Rick's. Same geometry and type as .coach-check so it is
   the same object as Next everywhere else — 52px, radius 12, 0 6px 0 lip, Inter 17/500 sentence case.
   Only the recording state departs from it, and only in colour. ---- */
.tap{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px;
  padding:14px 16px; border:none; border-radius:12px; background:var(--yellow); cursor:pointer;
  font-family:'Inter',sans-serif; box-shadow:0 6px 0 var(--lip);
  transition:transform 0.08s, box-shadow 0.08s, background 0.12s; }
.tap:active:not(:disabled){ transform:translateY(4px); box-shadow:0 2px 0 var(--lip); }
.tap .ico{ width:20px; height:20px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; }
.tap .ico .mic{ width:20px; height:20px; }
.tap .ico .wf{ display:none; align-items:flex-end; gap:2.5px; height:18px; }
.tap .ico .wf i{ width:3px; height:4px; border-radius:1.5px; background:#fff; animation:wfBob 0.7s ease-in-out infinite; }
.tap .ico .wf i:nth-child(2){ animation-delay:0.1s } .tap .ico .wf i:nth-child(3){ animation-delay:0.2s }
.tap .ico .wf i:nth-child(4){ animation-delay:0.3s } .tap .ico .wf i:nth-child(5){ animation-delay:0.4s }
@keyframes wfBob{ 0%,100%{ height:4px } 50%{ height:18px } }
.tap .lbl{ font-size:17px; font-weight:500; line-height:24px; letter-spacing:0; text-transform:none; color:var(--ink); }
.tap.rec{ background:#1C1C1C; box-shadow:0 6px 0 #000; }
.tap.rec .ico{ color:#fff; }
.tap.rec .ico .mic{ display:none; }
.tap.rec .ico .wf{ display:inline-flex; }
.tap.rec .lbl{ color:#fff; }
.tap:disabled{ background:#3C4048; box-shadow:none; pointer-events:none; cursor:default; }
.tap:disabled .ico{ color:var(--muted-2); }
.tap:disabled .lbl{ color:var(--muted-2); }
.tap:disabled .ico .wf{ display:none; }
.tap:disabled .ico .mic{ display:inline; }

/* ---- answer chips ---- */
.opt-group{ display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-bottom:8px; }
.opt{ background:rgba(255,255,255,0.02); border:1px solid var(--hairline); border-radius:12px 12px 0 12px;
  padding:13px 16px; font-family:inherit; font-size:16px; font-weight:400; line-height:1.4; color:#fff;
  text-align:left; cursor:pointer; transition:border-color 0.15s, background 0.15s, transform 0.08s, opacity 0.2s;
  opacity:0; transform:translateY(8px); }
.opt.in{ opacity:1; transform:none; transition:opacity 0.28s ease, transform 0.28s cubic-bezier(0.2,0.8,0.2,1), border-color 0.15s, background 0.15s; }
.opt:active{ transform:translateY(1px); }
.opt.selected{ border-color:var(--yellow); background:rgba(255,245,0,0.08); }
.opt.correct{ border-color:var(--yellow); background:rgba(255,245,0,0.08); }
.opt.wrong{ border-color:#2F2F31; background:rgba(255,255,255,0.02); color:#7C7C7C; }
.opt-group.dim .opt:not(.correct):not(.wrong){ opacity:0.35; }
/* a chip group is not tappable the instant it appears — it unlocks once the last chip has landed */
.opt-group.locked .opt{ pointer-events:none; }

/* ---- bottom bar ---- */
.bottom-bar{ flex-shrink:0; padding:20px 24px 28px; border-top:1px solid #474747;
  transition:opacity 0.22s ease; }
/* the bar leaves on its own beat before the card is raised — it does not blink out */
.bottom-bar.gone{ opacity:0; pointer-events:none; }
/* a line of orientation copy sitting in the bar, above its button */
.bar-note{ font-family:'Inter',sans-serif; font-size:15px; font-weight:500; line-height:23px;
  color:#FFFFFF; text-align:center; margin-bottom:14px; }
.coach-check{ display:flex; align-items:center; justify-content:center; width:100%; height:52px;
  padding:14px 16px; border:none; border-radius:12px; font-family:'Inter',sans-serif; font-size:17px;
  font-weight:500; line-height:24px; letter-spacing:0; text-transform:none; cursor:pointer;
  transition:background 0.12s, color 0.12s, transform 0.08s, box-shadow 0.08s; }
.coach-check.disabled{ background:#3C4048; color:var(--muted-2); pointer-events:none; box-shadow:none; }
.coach-check.ready{ background:var(--yellow); color:var(--ink); box-shadow:0 6px 0 var(--lip); }
.coach-check.ready:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--lip); }

/* ---- feedback panel — no colour wash; the verdict is the badge ---- */
.fb{ position:absolute; left:0; right:0; bottom:0; z-index:20; display:none;
  box-sizing:border-box; padding:24px 24px 44px; background:#2E2E2E; border:1px solid #393939;
  border-radius:16px 16px 0 0; box-shadow:0 7px 34.7px rgba(9,9,9,0.17); }
.fb.show{ display:block; animation:fbUp 0.25s ease-out; }
@keyframes fbUp{ from{ transform:translateY(30px); opacity:0 } to{ transform:none; opacity:1 } }
.cc-result{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cc-badge{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-badge svg{ width:26px; height:26px; }
.cc-badge.ok{ color:#61E07D; }
.cc-badge.no{ display:none; }
.cc-rt{ font-family:'Druk Text Wide'; font-weight:500; font-size:21px; line-height:28px; letter-spacing:-0.02em; color:#61E07D; }
.fb[data-ok="0"] .cc-rt{ color:#FF9600; }
/* hit titles: a gloss band sweeps across the green letters once as the toast lands (Vin, Sep 10) */
.fb[data-ok="1"] .cc-rt{ background:linear-gradient(105deg,#61E07D 0%,#61E07D 40%,#F2FFF5 50%,#61E07D 60%,#61E07D 100%);
  background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ccSheen 1.1s cubic-bezier(.4,0,.2,1) 0.22s 1 both; }
@keyframes ccSheen{ from{ background-position:130% 0; } to{ background-position:-130% 0; } }
.cc-note{ font-family:'Inter',sans-serif; font-size:17px; font-weight:400; line-height:26px; color:#FFFFFF; margin-bottom:26px; }
/* how much of the exercise is left. Its own line, not part of the body — the body is the coaching note
   and has a hard 6-8 word rule, so the count cannot live inside it without breaking one or the other. */
.cc-left{ font-family:'Inter',sans-serif; font-size:15px; font-weight:400; line-height:23px; color:var(--muted); margin:-14px 0 22px; }
.cc-note b{ color:#fff; font-weight:600; }
/* the house button: Inter 500, sentence case, never uppercase or 800 */
.coach-cta{ display:flex; align-items:center; justify-content:center; gap:4px; width:100%; height:52px;
  padding:14px 16px; border:none; border-radius:12px; font-family:'Inter',sans-serif; font-size:17px;
  font-weight:500; line-height:24px; letter-spacing:0; text-transform:none; cursor:pointer;
  transition:transform 0.08s, box-shadow 0.08s; }
.coach-cta.primary{ background:var(--yellow); color:var(--ink); box-shadow:0 6px 0 var(--lip); }
.coach-cta.primary:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--lip); }