/* ==========================================================================
   sportstech-move.css — bespoke visuals for /work/sportstech-move/
   Tokens only, except inside .phone__screen (mock UI).
   ========================================================================== */

.mv-gap { margin-top: clamp(40px, 6vw, 72px); }
.mv-sub { margin-bottom: 1.25rem; }
.mv-before { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--before); }

/* ---------- Fig 01: where the drop was ---------- */
.drop__svg { width: 100%; height: auto; overflow: visible; }
.drop__zone { fill: var(--signal-soft); }
.drop__zonelabel { font: 500 15px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--signal-ink); }
.drop__base { stroke: var(--line-strong); }
.drop__area { fill: var(--line); opacity: 0; transition: opacity 1s var(--ease-out) .6s; }
.drop__line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 1.8s var(--ease-out); }
.drop.is-in .drop__line { stroke-dashoffset: 0; }
.drop.is-in .drop__area { opacity: 1; }
.drop__axis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding-inline: 3.75%; margin-top: .5rem; text-align: center; }
@media (max-width: 480px) { .drop__zonelabel { font-size: 20px; } }

/* ---------- Fig 02: goal generator ---------- */
.gg { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 860px) { .gg { grid-template-columns: 300px minmax(0, 1fr); } }
.gg__side { display: grid; gap: 1.4rem; align-content: start; }
.gg__ctl { display: grid; gap: .55rem; justify-items: start; }
.gg__ctl .seg { flex-wrap: wrap; border-radius: 22px; }
.gg__ctl .seg button { height: 40px; }
.gg__how { display: grid; gap: .6rem; }
.gg__how ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.gg__how li {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .6rem; align-items: center;
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font-size: .9rem; color: var(--ink-2);
}
.gg__how li.gg__out { border-color: var(--signal); background: var(--signal-soft); color: var(--ink); }
.gg__how li.gg__out .mono { color: var(--signal-ink); }
.gg__how li.gg__out b { font-weight: 600; }
.gg__out b.is-new { animation: gg-flash .8s var(--ease-out); }
@keyframes gg-flash { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* phone mock (hard-coded colours allowed inside .phone__screen) */
.home { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 46px 14px 0; font-family: var(--font-sans); color: #efebe2; }
.home__top { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.home__hi { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.home__day { font: 500 10px/1 var(--font-mono); color: #8b877d; letter-spacing: .04em; }
.home__goal, .home__streak, .home__next { background: #1d1d1a; border: 1px solid rgba(239,235,226,.06); border-radius: 18px; padding: 12px; }
.home__goal { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 14px; text-align: center; }
.home__ringwrap { position: relative; width: 136px; height: 136px; flex: none; }
.home__ring { width: 100%; height: 100%; overflow: visible; }
.home__ring .track { fill: none; stroke: #2c2c28; stroke-width: 10; }
.home__ring .fill {
  fill: none; stroke: #ef4f16; stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset 1s var(--ease-out), stroke .4s;
}
.home__ring .tick { stroke: #efebe2; stroke-width: 3; stroke-linecap: round; transition: transform 1s var(--ease-out); transform-origin: 60px 60px; }
.home__ringtxt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.home__ringtxt b { font: 400 40px/1 var(--font-serif); letter-spacing: -.02em; }
.home__ringtxt span { font-size: 10.5px; color: #8b877d; margin-top: 2px; }
.home__goalmeta { display: grid; gap: 4px; min-width: 0; justify-items: center; }
.home__k { font: 500 9px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8b877d; }
.home__goaltitle { font-size: 16px; font-weight: 600; line-height: 1.25; }
.home__status { justify-self: center; margin-top: 2px; padding: 3px 8px; border-radius: 999px; font: 500 9.5px/1.2 var(--font-mono); letter-spacing: .04em; background: rgba(95,191,134,.15); color: #6fd497; transition: background-color .4s, color .4s; }
.gg[data-state="behind"] .home__status { background: rgba(239, 79, 22,.18); color: #ff8a5c; }
.home__streakhead { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.home__streakhead b { font-weight: 600; }
.flame { width: 18px; height: 18px; fill: #ef4f16; transition: fill .4s, opacity .4s; }
.gg[data-state="behind"] .flame { fill: #4a4842; }
.home__dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.home__dot { display: grid; justify-items: center; gap: 4px; font: 500 9px/1 var(--font-mono); color: #8b877d; }
.home__dot i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed #4a4842; transition: background-color .4s, border-color .4s; }
.home__dot.done i { background: #ef4f16; border: 1.5px solid #ef4f16; }
.home__dot.today i { border: 1.5px solid #efebe2; }
.home__dot.today { color: #efebe2; }
.home__nextrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 13px; }
.home__nextrow b { font-weight: 600; }
.home__go { padding: 6px 14px; border-radius: 999px; background: #ef4f16; color: #fff; font-weight: 600; font-size: 12px; }
.home__tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 0 18px; border-top: 1px solid #2a2a26; font-size: 10.5px; color: #8b877d; }
.home__tabs .on { color: #ef4f16; font-weight: 600; }

.push {
  position: absolute; z-index: 3; top: 40px; left: 8px; right: 8px; display: grid; gap: 2px;
  padding: 10px 12px; border-radius: 16px; background: rgba(46,46,42,.94); color: #efebe2; font-size: 11.5px; line-height: 1.35;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(-150%); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s;
}
.push.is-on { transform: none; opacity: 1; }
.push b { font-size: 12.5px; }
.push__app { display: flex; align-items: center; gap: 6px; font: 500 9px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #a8a49a; }
.push__app i { width: 12px; height: 12px; border-radius: 3px; background: #ef4f16; }

/* ---------- Fig 03: bracket vs rolling ---------- */
.ret { display: grid; gap: 1.4rem; }
.ret__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.ret__top > div { display: grid; gap: .55rem; }
.ret__seg { flex-wrap: wrap; border-radius: 22px; }
.ret__seg button { height: 40px; }
.ret__total { display: flex; align-items: baseline; gap: .4rem; }
.ret__total b { font: 400 clamp(2.6rem, 6vw, 3.6rem)/.9 var(--font-serif); letter-spacing: -.03em; color: var(--signal); font-variant-numeric: tabular-nums; }
.ret__total span { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.ret__head, .ret__row, .ret__bandwrap { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 1.4rem; gap: .55rem; align-items: center; }
.ret__weeks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
.ret__weeks span { border-left: 1px solid var(--line); padding-bottom: .35rem; }
.ret__weeks span:first-child { border-left: 0; }
@media (max-width: 520px) { .ret__weeks { font-size: .62rem; letter-spacing: .02em; } .ret__weeks span { white-space: nowrap; overflow: hidden; } }
.ret__days { position: relative; height: 1.1rem; }
.ret__days span { position: absolute; top: .3rem; left: calc((var(--d) - .5) / 35 * 100%); transform: translateX(var(--x, -50%)); color: var(--muted); }

.ret__body { position: relative; padding-top: 26px; }
.ret__bandwrap { position: absolute; inset: 0 0 -2px 0; pointer-events: none; }
.ret__bandcol { position: relative; height: 100%; }
.ret__band {
  --from: 22; --to: 28;
  position: absolute; top: 0; bottom: 0;
  left: calc((var(--from) - 1) / 35 * 100%); width: calc((var(--to) - var(--from) + 1) / 35 * 100%);
  background: var(--signal-soft); border-inline: 1px dashed var(--signal); border-radius: 4px;
  transition: left .7s var(--ease-out), width .7s var(--ease-out);
}
.ret__band[data-open="true"]::after {
  content: "→"; position: absolute; right: -1.1rem; top: 4px; font: 500 .8rem/1 var(--font-mono); color: var(--signal-ink);
}
.ret__bandlabel { position: absolute; top: 6px; left: 4px; white-space: nowrap; color: var(--signal-ink); font-size: .66rem; }
.ret__band[data-align="right"] .ret__bandlabel { left: auto; right: 4px; }

.ret__rows { position: relative; display: grid; }
.ret__row {
  width: 100%; min-height: 36px; padding: 0; border-radius: 6px; text-align: left;
  transition: background-color .3s;
}
.ret__row:hover, .ret__row[aria-pressed="true"] { background: color-mix(in srgb, var(--paper-2) 80%, transparent); }
.ret__name { font: 500 .7rem/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); padding-left: .3rem; }
.ret__row[aria-pressed="true"] .ret__name { color: var(--ink); }
.ret__strip {
  display: grid; grid-template-columns: repeat(35, minmax(0, 1fr)); gap: 1px; align-items: center; height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--line) calc(20% - 1px) 20%);
}
.ret__strip i { display: block; height: 3px; margin-inline: auto; width: 60%; border-radius: 2px; background: var(--line-strong); transition: background-color .45s var(--ease-out), transform .45s var(--ease-out); }
.ret__strip i.on { height: 12px; width: 78%; background: var(--ink-2); }
.ret__strip i.on.hit { background: var(--signal); transform: scaleY(1.25); }
.ret__status { justify-self: center; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .4s, box-shadow .4s; }
.ret__status svg { width: 11px; height: 11px; opacity: 0; transition: opacity .3s; color: #fff; }
.ret__row.is-hit .ret__status { background: var(--signal); box-shadow: none; }
.ret__row.is-hit .ret__status svg { opacity: 1; }

.ret__explain { display: grid; gap: .8rem; }
@media (min-width: 860px) { .ret__explain { grid-template-columns: 1.2fr 1fr; gap: 2rem; } }
.ret__note { color: var(--ink); font-size: .98rem; line-height: 1.55; min-height: 4.6em; }
.ret__note b { color: var(--signal-ink); font-weight: 600; }
.ret__user { font: 400 .82rem/1.55 var(--font-mono); color: var(--muted); padding-left: 1rem; border-left: 1px solid var(--line-strong); min-height: 4.6em; }
.ret__user b { color: var(--ink); font-weight: 500; }

/* D30 vs D90 */
.mv-d30 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 1.5rem; }
.mv-d30 > div { display: grid; gap: .3rem; padding-top: 1rem; border-top: 2px solid var(--line-strong); }
.mv-d30 > div:first-child { border-top-color: var(--signal); }
.mv-d30 .mono { color: var(--muted); }
.mv-d30 > div:first-child .mono { color: var(--signal-ink); }
.mv-d30 b { font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--font-serif); color: var(--ink); letter-spacing: -.02em; }
.mv-d30 p { font-size: .92rem; color: var(--ink-2); }

/* ---------- Fig 04: leading indicators ---------- */
.lead-tl { margin: 0; padding: 0; list-style: none; display: grid; }
.lead-tl__item { position: relative; display: grid; gap: .35rem; align-content: start; padding: 0 0 1.5rem 1.5rem; border-left: 2px solid var(--line-strong); }
.lead-tl__item::before { content: ""; position: absolute; left: -7px; top: .15rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.lead-tl__item--end { border-left-color: transparent; padding-bottom: 0; }
.lead-tl__item--end::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 5px var(--signal-soft); }
.lead-tl__item .mono { color: var(--muted); }
.lead-tl__item h4 { font-size: 1rem; }
.lead-tl__item p { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.lead-tl__tag { justify-self: start; margin-top: .3rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 .68rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--surface); }
.lead-tl__tag--signal { border-color: transparent; background: var(--signal-soft); color: var(--signal-ink); }
@media (min-width: 900px) {
  .lead-tl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .lead-tl__item { padding: 1.4rem 0 0; border-left: 0; border-top: 2px solid var(--line-strong); }
  .lead-tl__item::before { left: 0; top: -7px; }
  .lead-tl__item--end { border-top-color: var(--signal); }
}

/* ---------- Results: cohort bars ---------- */
.cohort { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(12px, 3vw, 40px); max-width: 620px; padding-bottom: .5rem; border-bottom: 1px solid var(--line-strong); }
.cohort__col { display: grid; justify-items: center; gap: .6rem; }
.cohort__num { font: 400 clamp(2rem, 5vw, 3rem)/1 var(--font-serif); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cohort__col--after .cohort__num { color: var(--signal); }
.cohort__bar { width: min(100%, 120px); height: calc(var(--v) / 40 * clamp(160px, 30vw, 260px)); border-radius: 8px 8px 2px 2px; background: var(--before); transform-origin: bottom; transform: scaleY(0); transition: transform 1.3s var(--ease-out); }
.cohort__col--after .cohort__bar { background: var(--signal); transition-delay: .25s; }
.cohort.is-in .cohort__bar { transform: none; }
.cohort__delta { display: grid; justify-items: center; gap: .3rem; align-self: center; padding-bottom: 2.5rem; }
.cohort__delta .mono { color: var(--muted); }
.cohort__delta b { font: 400 clamp(1.6rem, 3.5vw, 2.4rem)/1 var(--font-serif); color: var(--signal-ink); letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  .drop__line { stroke-dashoffset: 0; }
  .drop__area { opacity: 1; }
  .cohort__bar { transform: none; }
}
@media (min-width: 900px) { .drop__zonelabel { font-size: 12px; } }

@media (max-width: 559px) { .mv-long { display: none; } }