/* FLINCH
   Pressure putting, measured.

   The palette comes from the material world of a milled putter rather than
   from a dark mode preset: black oxide, graphite, satin steel, milled
   aluminium, and the optic white of a golf ball.

   One rule governs colour. It appears on the miss map and nowhere else, so
   green and red always mean holed and missed, and never mean decoration. */

:root {
  --oxide:    #0D1215;
  --graphite: #182124;
  --raised:   #1F2A2E;
  --rule:     #2C393E;
  --steel:    #7E8C92;
  --milled:   #C3CBCE;
  --optic:    #F6F8F7;

  --holed:  #57B07C;
  --missed: #E0503C;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 36px; --sp-7: 56px; --sp-8: 84px;

  --r-flat: 2px;
  --r-card: 8px;
  --r-pill: 999px;

  --shell: 560px;
  --display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Saira', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--oxide);
  color: var(--milled);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100dvh; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--optic);
}
h1 { font-size: 2.5rem; line-height: 1.02; }
h2 { font-size: 1.45rem; line-height: 1.1; }
h3 { font-size: 1.08rem; line-height: 1.2; }
p { margin: 0 0 var(--sp-3); max-width: 62ch; }
a { color: var(--milled); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------------------------------------------------------------- shell */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--optic);
  text-decoration: none;
  line-height: 1;
}
.wordmark small {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--steel);
}
.wordmark .wm-f { height: .8em; width: auto; vertical-align: -.03em; margin-right: .1em; }
.topbar .spacer { flex: 1; }

.rates { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-2); }
.rates th, .rates td { padding: 9px 0; text-align: right; }
.rates thead th {
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px solid var(--rule);
}
.rates tbody th {
  text-align: left;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 400;
  color: var(--milled);
}
.rates td { font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--milled); }
.rates td.wide { color: var(--missed); }

.screen { display: none; }
.screen.active { display: block; }
.stack > * + * { margin-top: var(--sp-4); }

/* ----------------------------------------------------------------- hero */

.hero { padding: var(--sp-6) 0 var(--sp-4); }
.hero .eyebrow {
  margin-bottom: var(--sp-3);
  font-family: var(--body);
  font-size: .84rem;
  letter-spacing: .03em;
  color: var(--steel);
  max-width: 36ch;
}
.hero h1 { font-size: 3rem; margin-bottom: var(--sp-4); max-width: 14ch; }
.hero .lede { color: var(--milled); max-width: 42ch; }

.map {
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: var(--r-flat);
  padding: var(--sp-4);
}
.map svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.map figcaption {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: .84rem;
  color: var(--steel);
}

/* The single unprompted movement in the app: the putts land once. */
.map svg circle[data-putt] {
  animation: land .45s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes land { from { opacity: 0; transform: scale(2.4); transform-origin: center; } }
@media (prefers-reduced-motion: reduce) {
  .map svg circle[data-putt] { animation: none; }
  * { transition: none !important; }
}

/* --------------------------------------------------------------- actions */

button { font-family: inherit; font-size: 1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--optic);
  border-radius: var(--r-pill);
  background: var(--optic);
  color: var(--oxide);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: transparent; color: var(--optic); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.block { width: 100%; }

.btn.secondary {
  background: transparent;
  color: var(--milled);
  border-color: var(--rule);
}
.btn.secondary:hover { border-color: var(--steel); color: var(--optic); }

.btn.quiet {
  background: none; border: none; color: var(--steel);
  font-family: var(--body); font-size: .92rem;
  min-height: 44px; padding: 0 var(--sp-2);
  text-decoration: underline; text-underline-offset: 4px;
}
.btn.quiet:hover { color: var(--optic); }

.btn.record { background: var(--missed); border-color: var(--missed); color: var(--optic); }
.btn.record:hover { background: transparent; color: var(--missed); }
.btn.record.armed { background: transparent; color: var(--missed); }

:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--optic);
  outline-offset: 3px;
}

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.actions .btn { flex: 1 1 auto; }

/* ----------------------------------------------------------------- score */

.headline {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--optic);
}
.headline .rate {
  font-family: var(--display);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: .8;
  color: var(--optic);
  font-variant-numeric: tabular-nums;
}
.headline .of { color: var(--steel); font-size: .95rem; padding-bottom: 4px; }
.headline .right { margin-left: auto; text-align: right; font-size: .86rem; color: var(--steel); padding-bottom: 4px; }

.benchmarks {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.benchmark {
  display: grid;
  grid-template-columns: 92px 1fr 46px;
  align-items: center;
  gap: var(--sp-3);
  font-size: .88rem;
  color: var(--steel);
}
.benchmark .track { height: 6px; background: var(--rule); border-radius: var(--r-pill); overflow: hidden; }
.benchmark .fill { height: 100%; background: var(--steel); }
.benchmark.you { color: var(--optic); }
.benchmark.you .fill { background: var(--optic); }
.benchmark .val { text-align: right; font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.bar-row {
  display: grid;
  grid-template-columns: 104px 1fr 42px;
  align-items: center;
  gap: var(--sp-3);
  font-size: .88rem;
}
.bar-track { height: 6px; background: var(--rule); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; background: var(--milled); }
.bar-fill.watch { background: var(--steel); }
.bar-fill.work-on { background: var(--missed); }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--steel); }

/* ----------------------------------------------------------------- cards */

.finding {
  background: var(--graphite);
  border-radius: var(--r-card);
  border-left: 3px solid var(--steel);
  padding: var(--sp-4);
}
.finding.high { border-left-color: var(--missed); }
.finding.low { border-left-color: var(--rule); }
.finding h3 { margin-bottom: var(--sp-2); }
.finding p { margin: 0; font-size: .93rem; color: var(--steel); }
.finding .reading {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 2px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--milled);
}

.drill {
  background: var(--graphite);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.drill header { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.drill header h3 { flex: 1; font-family: var(--display); letter-spacing: .04em; text-transform: uppercase; }
.drill .meta-line { font-size: .82rem; color: var(--steel); white-space: nowrap; }
.drill dl { margin: 0; display: grid; gap: var(--sp-3); }
.drill dt { font-size: .75rem; letter-spacing: .06em; color: var(--steel); margin-bottom: 3px; }
.drill dd { margin: 0; font-size: .92rem; color: var(--milled); }
.drill .why {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  color: var(--steel);
}

/* --------------------------------------------------------------- capture */

.stage {
  position: relative;
  background: #000;
  border: 1px solid var(--rule);
  border-radius: var(--r-flat);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.guide { position: absolute; inset: 0; }
.guide rect, .guide line {
  fill: none;
  stroke: rgba(246,248,247,.4);
  stroke-width: 1.5;
  stroke-dasharray: 7 7;
}

.stage-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background: linear-gradient(transparent, rgba(5,9,10,.9));
  color: var(--milled);
  font-size: .85rem;
}

.rec-dot {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-pill);
  background: rgba(5,9,10,.78);
  color: var(--optic);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.rec-dot i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--missed);
  animation: pulse 1s steps(2, end) infinite;
}
@keyframes pulse { 50% { opacity: .2; } }

.framing-status {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  max-width: 64%;
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 7px 12px 7px 9px;
  border-radius: var(--r-pill);
  background: rgba(5,9,10,.82);
  color: var(--milled);
  font-size: .79rem;
  line-height: 1.35;
}
.framing-status i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px;
  background: var(--steel);
}
.framing-status.ready i { background: var(--holed); }
.framing-status.ready { color: var(--optic); }
.framing-status.blocked i { background: var(--missed); }

/* ---------------------------------------------------------------- target */

.target {
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: var(--r-flat);
  padding: var(--sp-3);
  touch-action: manipulation;
}
.target svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; cursor: crosshair; }

.putt-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.putt-pip {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--steel);
}
.putt-pip.done { border-color: var(--holed); color: var(--holed); }
.putt-pip.done.miss { border-color: var(--missed); color: var(--missed); }
.putt-pip.current { border-color: var(--optic); color: var(--optic); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-height: 46px; padding: 0 var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--milled);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
}
.chip:hover { border-color: var(--steel); }
.chip[aria-pressed="true"] { background: var(--optic); border-color: var(--optic); color: var(--oxide); }

/* ----------------------------------------------------------------- misc */

.note {
  font-size: .87rem;
  color: var(--steel);
  background: var(--graphite);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
}
.note.warn { border-left: 3px solid var(--missed); color: var(--milled); }
.note.win { border-left: 3px solid var(--holed); color: var(--milled); }

.section-title {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--steel);
}

.meta { font-size: .84rem; color: var(--steel); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule);
}
.steps li:first-child { border-top: none; }
/* The number occupies the first column for both rows. Without pinning the
   heading and paragraph to column two, auto-placement drops the paragraph
   into the 28px number column and it renders one word per line. */
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--steel);
}
.steps li h3 { grid-column: 2; margin-bottom: 2px; font-size: 1rem; }
.steps li p { grid-column: 2; margin: 0; font-size: .9rem; color: var(--milled); }

.progress-track { height: 4px; background: var(--rule); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--optic); width: 0; transition: width .2s ease; }

.history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
}
.history-row .score { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--optic); font-variant-numeric: tabular-nums; }
.delta { font-variant-numeric: tabular-nums; font-size: .84rem; }
.delta.better { color: var(--holed); }
.delta.worse { color: var(--missed); }

.drill-record {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (min-width: 620px) {
  html, body { font-size: 18px; }
  .hero h1 { font-size: 3.6rem; }
  .stage { aspect-ratio: 4 / 3; }
}