/* Coach tour: first-run onboarding overlay for the report view.
   Skin matches wait-interstitial.css (bone card, big radius, coral eyebrow,
   dark pill button). Design spec: ideas/coach-tour-final.html.
   Road-sign principle: one visual + handful of words per card, no paragraphs. */

/* --- Backdrop + card positioning --- */
.cc-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop-scrim);
  z-index: 500;
  display: none;
}

.coach-card {
  --dur: 7s;
  --durL: 7s;
  --durT: 7s;
  --durR: 8.5s;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 501;

  background: var(--bone-0);
  border-radius: var(--radius);
  padding: 18px 22px 16px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 14px 40px rgba(28, 20, 14, 0.12);
  border: 1px solid rgba(30, 42, 53, 0.08);
  color: var(--text);
  display: none;
}

/* --- Progress dots --- */
.cc-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 12px;
  align-items: center;
}
/* FS-2 (2026-08-02): this file declares no typeface anywhere and does not
   need to -- #cc-tour mounts INSIDE #screen-report-view, which declares it,
   so every .cc-* text surface measured correct. The dots were the one
   exception, because buttons never inherit the family. Glyph-free today,
   so this is uniformity rather than a visible change. Note the clean
   result here is a property of WHERE this mounts, not of this file: if the
   tour is ever mounted somewhere without a root declaration, its text will
   silently fall to Inter. */
.cc-dot {
  flex: 0 0 28px;
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 42, 53, 0.14);
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, flex-basis 0.2s;
}
.cc-dot.current {
  background: var(--coral);
  flex: 0 0 36px;
  height: 8px;
}

/* --- Card content --- */
.cc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 4px;
}
.cc-headline {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.cc-headline em {
  font-style: normal;
  color: var(--coral);
}
.cc-headline-stack {
  display: grid;
  min-height: 62px;
  margin: 0 0 4px;
}
.cc-headline-stack .cc-headline {
  grid-area: 1 / 1;
}
.cc-visual {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.cc-visual svg {
  display: block;
  height: 280px;
  width: auto;
}

/* --- Top-corner close button (replaces old Skip pill) --- */
.cc-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(30, 42, 53, 0.38);
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0;
  z-index: 1;
}
.cc-close:hover { color: var(--text); background: rgba(30, 42, 53, 0.06); }

/* --- Actions (Back / Next) --- */
.cc-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 0;
}
.cc-back {
  font-family: inherit;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30, 42, 53, 0.18);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 90px;
}
.cc-back:hover { border-color: rgba(30, 42, 53, 0.32); }
.cc-next {
  font-family: inherit;
  background: var(--ink-0);
  color: var(--bone-0);
  border: 1px solid var(--ink-0);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-left: auto;
  min-width: 104px;
}

/* --- Panel toggle --- */
.cc-panel { display: none; }
.cc-panel.active { display: block; }

/* --- "?" replay button (visible after tour dismissed) --- */
.cc-help-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--bone-0);
  color: var(--text);
  border: 1px solid rgba(30, 42, 53, 0.18);
  box-shadow: 0 14px 40px rgba(28, 20, 14, 0.12);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 50;
}
.cc-help-fab:hover {
  color: var(--coral);
  border-color: var(--coral);
}


/* =====================================================================
   CARD 0 ANIMATIONS: tap a violation box
   ===================================================================== */
.t-finger  { animation: tFinger var(--durT) cubic-bezier(0.4, 0, 0.3, 1) infinite; }
.t-pulse   { animation: tPulse var(--durT) ease-in-out infinite; }
.t-sheet   { animation: tSheet var(--durT) cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
.co-rect   { animation: coRect var(--durT) ease-in-out infinite; }
.co-glow   { animation: coGlow var(--durT) ease-in-out infinite; }
.co-lbl    { animation: coLbl  var(--durT) ease-in-out infinite; }
.co-val    { animation: coVal  var(--durT) ease-in-out infinite; }
.pop-strong  { transform-box: fill-box; transform-origin: center; animation: popStrong var(--durT) ease-in-out infinite; }
.glow-strong { animation: glowStrong var(--durT) ease-in-out infinite; }
.pop-cta     { transform-box: fill-box; transform-origin: center; animation: popCta var(--durT) ease-in-out infinite; }
.glow-cta    { animation: glowCta var(--durT) ease-in-out infinite; }

@keyframes tFinger {
  0%   { transform: translateY(105px); opacity: 1 }
  11%  { transform: translateY(105px); opacity: 1 }
  18%  { transform: translateY(0px); opacity: 1 }
  26%  { transform: translateY(0px); opacity: 1 }
  33%  { transform: translateY(110px); opacity: 0 }
  92%  { transform: translateY(110px); opacity: 0 }
  98%  { transform: translateY(105px); opacity: 1 }
  100% { transform: translateY(105px); opacity: 1 }
}
@keyframes tPulse {
  0%   { opacity: 0 }
  13%  { opacity: 0 }
  20%  { opacity: 0.95 }
  30%  { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes tSheet {
  0%   { transform: translateY(122px) }
  26%  { transform: translateY(122px) }
  40%  { transform: translateY(0px) }
  80%  { transform: translateY(0px) }
  92%  { transform: translateY(122px) }
  100% { transform: translateY(122px) }
}
@keyframes coRect {
  0%,17%   { stroke-width: 2; stroke: rgba(242,100,25,0.6) }
  23%,74%  { stroke-width: 3.5; stroke: #f26419 }
  80%,100% { stroke-width: 2; stroke: rgba(242,100,25,0.6) }
}
@keyframes coGlow  { 0%,17%{opacity:0} 23%,74%{opacity:0.4} 80%,100%{opacity:0} }
@keyframes coLbl   { 0%,17%{fill:rgba(242,100,25,0.7)} 23%,74%{fill:#f26419} 80%,100%{fill:rgba(242,100,25,0.7)} }
@keyframes coVal   { 0%,17%{fill:rgba(30,42,53,0.85)} 23%,74%{fill:#1E2A35} 80%,100%{fill:rgba(30,42,53,0.85)} }
@keyframes popStrong  { 0%,44%{transform:scale(1)} 50%{transform:scale(1.14)} 57%,100%{transform:scale(1)} }
@keyframes glowStrong { 0%,44%{opacity:0} 50%{opacity:0.55} 59%,100%{opacity:0} }
@keyframes popCta     { 0%,57%{transform:scale(1)} 63%{transform:scale(1.08)} 70%,100%{transform:scale(1)} }
@keyframes glowCta    { 0%,57%{opacity:0} 63%{opacity:0.5} 72%,100%{opacity:0} }


/* =====================================================================
   CARD 1 ANIMATIONS: hold the eye
   ===================================================================== */
.eh-scrim    { animation: aScrim var(--dur) ease-in-out infinite; }
.eh-pagelines{ animation: aLines var(--dur) ease-in-out infinite; }
.eh-pill     { animation: aPill var(--dur) ease-in-out infinite; }
.eh-ghost    { animation: aGhost var(--dur) ease-in-out infinite; }
.eh-eyedisc  { animation: aDisc var(--dur) ease-in-out infinite, aDiscStroke var(--dur) ease-in-out infinite; }
.eh-eyeglyph { animation: aGlyph var(--dur) ease-in-out infinite; }
.eh-ring     { animation: aRing var(--dur) ease-in-out infinite; }
.eh-finger   { animation: aFinger var(--dur) cubic-bezier(0.4, 0, 0.3, 1) infinite; }
.eh-head1    { animation: aHead1 var(--dur) ease-in-out infinite; }
.eh-head2    { animation: aHead2 var(--dur) ease-in-out infinite; }

@keyframes aScrim    { 0%{opacity:.6} 14%{opacity:.6} 20%{opacity:0} 58%{opacity:0} 66%{opacity:.6} 100%{opacity:.6} }
@keyframes aLines    { 0%{opacity:.42} 14%{opacity:.42} 20%{opacity:1} 58%{opacity:1} 66%{opacity:.42} 100%{opacity:.42} }
@keyframes aPill     { 0%{opacity:1} 14%{opacity:1} 19%{opacity:0} 58%{opacity:0} 66%{opacity:1} 100%{opacity:1} }
@keyframes aGhost    { 0%{opacity:0} 15%{opacity:0} 21%{opacity:1} 58%{opacity:1} 64%{opacity:0} 100%{opacity:0} }
@keyframes aDisc     { 0%{fill:#fff} 14%{fill:#fff} 20%{fill:#f26419} 58%{fill:#f26419} 66%{fill:#fff} 100%{fill:#fff} }
@keyframes aDiscStroke { 0%{stroke:rgba(30,42,53,0.28)} 14%{stroke:rgba(30,42,53,0.28)} 20%{stroke:rgba(30,42,53,0)} 58%{stroke:rgba(30,42,53,0)} 66%{stroke:rgba(30,42,53,0.28)} 100%{stroke:rgba(30,42,53,0.28)} }
@keyframes aGlyph    { 0%{stroke:#1E2A35} 14%{stroke:#1E2A35} 20%{stroke:#fff} 58%{stroke:#fff} 66%{stroke:#1E2A35} 100%{stroke:#1E2A35} }
@keyframes aRing     { 0%{stroke-dashoffset:164} 15%{stroke-dashoffset:164} 21%{stroke-dashoffset:0} 58%{stroke-dashoffset:0} 66%{stroke-dashoffset:164} 100%{stroke-dashoffset:164} }
@keyframes aFinger   { 0%{transform:translateY(22px)} 6%{transform:translateY(22px)} 12%{transform:translateY(0)} 52%{transform:translateY(0)} 58%{transform:translateY(22px)} 100%{transform:translateY(22px)} }
@keyframes aHead1    { 0%{opacity:1} 44%{opacity:1} 48%{opacity:0} 68%{opacity:0} 72%{opacity:1} 100%{opacity:1} }
@keyframes aHead2    { 0%{opacity:0} 44%{opacity:0} 48%{opacity:1} 66%{opacity:1} 70%{opacity:0} 100%{opacity:0} }


/* =====================================================================
   CARD 2 ANIMATIONS: double-tap to lock + page
   ===================================================================== */
.l-arrow   { animation: lArrow var(--durL) ease-in-out infinite; }
.l-bflash  { animation: lBflash var(--durL) ease-in-out infinite; }
.l-disc    { animation: lDisc var(--durL) ease-in-out infinite, lDiscStroke var(--durL) ease-in-out infinite; }
.l-finger  { animation: lFinger var(--durL) cubic-bezier(0.4, 0, 0.3, 1) infinite; }
.l-ghost   { animation: lGhost var(--durL) ease-in-out infinite; }
.l-glyph   { animation: lGlyph var(--durL) ease-in-out infinite; }
.l-head1   { animation: lHead1 var(--durL) ease-in-out infinite; }
.l-head2   { animation: lHead2 var(--durL) ease-in-out infinite; }
.l-lines   { animation: lLines var(--durL) ease-in-out infinite; }
.l-nav     { animation: lNav var(--durL) ease-in-out infinite; }
.l-num5    { animation: lNum5 var(--durL) ease-in-out infinite; }
.l-num6    { animation: lNum6 var(--durL) ease-in-out infinite; transform-origin: 143px 269px; }
.l-page5   { animation: lPage5 var(--durL) ease-in-out infinite; }
.l-page6   { animation: lPage6 var(--durL) ease-in-out infinite; }
.l-pill    { animation: lPill var(--durL) ease-in-out infinite; }
.l-ring    { animation: lRing var(--durL) ease-in-out infinite; }
.l-scrim   { animation: lScrim var(--durL) ease-in-out infinite; }

@keyframes lArrow { 0%{stroke:#1E2A35} 23%{stroke:#1E2A35} 25%{stroke:#f26419} 30%{stroke:#1E2A35} 100%{stroke:#1E2A35} }
@keyframes lBflash { 0%{opacity:0} 23%{opacity:0} 25%{opacity:1} 30%{opacity:1} 34%{opacity:0} 100%{opacity:0} }
@keyframes lDisc { 0%{fill:#fff} 7%{fill:#fff} 13%{fill:#f26419} 58%{fill:#f26419} 64%{fill:#fff} 100%{fill:#fff} }
@keyframes lDiscStroke { 0%{stroke:rgba(30,42,53,.28)} 7%{stroke:rgba(30,42,53,.28)} 13%{stroke:rgba(30,42,53,0)} 58%{stroke:rgba(30,42,53,0)} 64%{stroke:rgba(30,42,53,.28)} 100%{stroke:rgba(30,42,53,.28)} }
@keyframes lFinger {
  0%   { transform: translate(0px, 10px); opacity: 1 }
  3%   { transform: translate(0px, 0px); opacity: 1 }
  5%   { transform: translate(0px, 6px); opacity: 1 }
  7%   { transform: translate(0px, 0px); opacity: 1 }
  9%   { transform: translate(0px, 3px); opacity: 1 }
  15%  { transform: translate(-2px, 53px); opacity: 1 }
  22%  { transform: translate(-2px, 53px); opacity: 1 }
  24%  { transform: translate(-2px, 59px); opacity: 1 }
  26%  { transform: translate(-2px, 53px); opacity: 1 }
  48%  { transform: translate(-2px, 53px); opacity: 1 }
  54%  { transform: translate(-2px, 80px); opacity: 0 }
  94%  { transform: translate(-2px, 80px); opacity: 0 }
  98%  { transform: translate(0px, 10px); opacity: 1 }
  100% { transform: translate(0px, 10px); opacity: 1 }
}
@keyframes lGhost { 0%{opacity:0} 8%{opacity:0} 14%{opacity:1} 58%{opacity:1} 63%{opacity:0} 100%{opacity:0} }
@keyframes lGlyph { 0%{stroke:#1E2A35} 7%{stroke:#1E2A35} 13%{stroke:#fff} 58%{stroke:#fff} 64%{stroke:#1E2A35} 100%{stroke:#1E2A35} }
@keyframes lHead1 { 0%{opacity:1} 18%{opacity:1} 22%{opacity:0} 62%{opacity:0} 66%{opacity:1} 100%{opacity:1} }
@keyframes lHead2 { 0%{opacity:0} 18%{opacity:0} 22%{opacity:1} 60%{opacity:1} 64%{opacity:0} 100%{opacity:0} }
@keyframes lLines { 0%{opacity:.42} 7%{opacity:.42} 13%{opacity:1} 58%{opacity:1} 64%{opacity:.42} 100%{opacity:.42} }
@keyframes lNav { 0%{opacity:0;transform:translateY(8px)} 10%{opacity:0;transform:translateY(8px)} 15%{opacity:1;transform:translateY(0)} 58%{opacity:1;transform:translateY(0)} 63%{opacity:0;transform:translateY(8px)} 100%{opacity:0;transform:translateY(8px)} }
@keyframes lNum5 { 0%{opacity:1} 24%{opacity:1} 28%{opacity:0} 64%{opacity:0} 68%{opacity:1} 100%{opacity:1} }
@keyframes lNum6 { 0%{opacity:0;fill:#f26419;transform:scale(1)} 24%{opacity:0;fill:#f26419;transform:scale(1)} 28%{opacity:1;fill:#f26419;transform:scale(1)} 32%{opacity:1;fill:#f26419;transform:scale(1.34)} 36%{opacity:1;fill:#f26419;transform:scale(1)} 58%{opacity:1;fill:#f26419;transform:scale(1)} 62%{opacity:0;fill:#f26419;transform:scale(1)} 100%{opacity:0;fill:#f26419;transform:scale(1)} }
@keyframes lPage5 { 0%{opacity:1} 24%{opacity:1} 28%{opacity:0} 62%{opacity:0} 66%{opacity:1} 100%{opacity:1} }
@keyframes lPage6 { 0%{opacity:0} 24%{opacity:0} 28%{opacity:1} 58%{opacity:1} 62%{opacity:0} 100%{opacity:0} }
@keyframes lPill { 0%{opacity:1} 7%{opacity:1} 12%{opacity:0} 58%{opacity:0} 64%{opacity:1} 100%{opacity:1} }
@keyframes lRing { 0%{opacity:0} 7%{opacity:0} 13%{opacity:1} 58%{opacity:1} 64%{opacity:0} 100%{opacity:0} }
@keyframes lScrim { 0%{opacity:.6} 7%{opacity:.6} 13%{opacity:0} 58%{opacity:0} 64%{opacity:.6} 100%{opacity:.6} }


/* =====================================================================
   CARD 3 ANIMATIONS: swipe to switch reports (mobile only)
   ===================================================================== */
.s-finger  { animation: sFinger var(--durR) cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.s-drawer  { animation: sDrawer var(--durR) cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.r-eqsel   { animation: rEqSel var(--durR) ease-in-out infinite; }
.r-exsel   { animation: rExSel var(--durR) ease-in-out infinite; }
.r-pulse   { animation: rPulse var(--durR) ease-in-out infinite; }
.r-head1   { animation: rHead1 var(--durR) ease-in-out infinite; }
.r-head2   { animation: rHead2 var(--durR) ease-in-out infinite; }

@keyframes sFinger {
  0%   { transform: translateY(85px); opacity: 1 }
  10%  { transform: translateY(85px); opacity: 1 }
  30%  { transform: translateY(0px); opacity: 1 }
  35%  { transform: translateY(0px); opacity: 1 }
  39%  { transform: translateY(-6px); opacity: 0 }
  43%  { transform: translateY(95px); opacity: 0 }
  48%  { transform: translateY(95px); opacity: 1 }
  54%  { transform: translateY(73px); opacity: 1 }
  59%  { transform: translateY(73px); opacity: 1 }
  65%  { transform: translateY(95px); opacity: 0 }
  90%  { transform: translateY(95px); opacity: 0 }
  95%  { transform: translateY(85px); opacity: 1 }
  100% { transform: translateY(85px); opacity: 1 }
}
@keyframes sDrawer { 0%{transform:translateY(85px)} 10%{transform:translateY(85px)} 30%{transform:translateY(0px)} 90%{transform:translateY(0px)} 95%{transform:translateY(85px)} 100%{transform:translateY(85px)} }
@keyframes rEqSel { 0%{opacity:1} 53%{opacity:1} 57%{opacity:0} 92%{opacity:0} 96%{opacity:1} 100%{opacity:1} }
@keyframes rExSel { 0%{opacity:0} 53%{opacity:0} 57%{opacity:1} 92%{opacity:1} 96%{opacity:0} 100%{opacity:0} }
@keyframes rPulse { 0%{opacity:0} 50%{opacity:0} 55%{opacity:0.9} 64%{opacity:0} 100%{opacity:0} }
@keyframes rHead1 { 0%{opacity:1} 44%{opacity:1} 50%{opacity:0} 92%{opacity:0} 97%{opacity:1} 100%{opacity:1} }
@keyframes rHead2 { 0%{opacity:0} 44%{opacity:0} 50%{opacity:1} 90%{opacity:1} 95%{opacity:0} 100%{opacity:0} }


/* =====================================================================
   REDUCED-MOTION FALLBACK: static frames, no animation
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .eh-scrim, .eh-pagelines, .eh-pill, .eh-ghost, .eh-eyedisc, .eh-eyeglyph,
  .eh-ring, .eh-finger, .eh-head1, .eh-head2,
  .l-scrim, .l-lines, .l-pill, .l-ghost, .l-disc, .l-glyph, .l-ring,
  .l-finger, .l-nav, .l-page5, .l-page6, .l-num5, .l-num6, .l-arrow,
  .l-head1, .l-head2, .l-bflash,
  .t-finger, .t-pulse, .t-sheet, .co-rect, .co-glow, .co-lbl, .co-val,
  .pop-strong, .glow-strong, .pop-cta, .glow-cta,
  .s-finger, .s-drawer, .r-eqsel, .r-exsel, .r-pulse, .r-head1, .r-head2 {
    animation: none;
  }
  /* Card 0: tap (box live, drawer full, finger gone, pops settled) */
  .t-finger { opacity: 0; }
  .t-pulse  { opacity: 0; }
  .t-sheet  { transform: translateY(0px); }
  .co-rect  { stroke-width: 3.5; stroke: #f26419; }
  .co-glow  { opacity: 0.4; }
  .co-lbl   { fill: #f26419; }
  .co-val   { fill: #1E2A35; }
  .glow-strong, .glow-cta { opacity: 0; }

  /* Card 1: eye-hold (show peek state: no scrim, ghosts visible, eye coral) */
  .eh-scrim    { opacity: 0; }
  .eh-pagelines{ opacity: 1; }
  .eh-pill     { opacity: 0; }
  .eh-ghost    { opacity: 1; }
  .eh-eyedisc  { fill: #f26419; stroke: rgba(30, 42, 53, 0); }
  .eh-eyeglyph { stroke: #ffffff; }
  .eh-ring     { stroke-dashoffset: 0; }
  .eh-finger   { transform: translateY(0); }
  .eh-head1    { opacity: 1; }
  .eh-head2    { opacity: 0; }

  /* Card 2: lock (show page 6, locked state, navigator visible) */
  .l-scrim   { opacity: 0; }
  .l-lines   { opacity: 1; }
  .l-pill    { opacity: 0; }
  .l-ghost   { opacity: 0; }
  .l-disc    { fill: #f26419; stroke: rgba(30, 42, 53, 0); }
  .l-glyph   { stroke: #fff; }
  .l-ring    { opacity: 1; }
  .l-finger  { transform: translate(-2px, 53px); }
  .l-nav     { opacity: 1; transform: translateY(0); }
  .l-page5   { opacity: 0; }
  .l-page6   { opacity: 1; }
  .l-num5    { opacity: 0; }
  .l-num6    { opacity: 1; fill: #f26419; }
  .l-arrow   { stroke: #1E2A35; }
  .l-head1   { opacity: 0; }
  .l-head2   { opacity: 1; }
  .l-bflash  { opacity: 0; }

  /* Card 3: swipe (show drawer open, EX selected) */
  .s-finger  { opacity: 0; }
  .s-drawer  { transform: translateY(0px); }
  .r-eqsel   { opacity: 0; }
  .r-exsel   { opacity: 1; }
  .r-pulse   { opacity: 0; }
  .r-head1   { opacity: 0; }
  .r-head2   { opacity: 1; }
}