/* FlowForm player (from ~/flowform-v3/player), restyled for CoachGrove and
   mounted as a full-screen overlay. Reads only the semantic tokens in site.css. */

.ff{position:fixed;inset:0;z-index:100;background:var(--color-bg);overflow:hidden}
.ff[hidden]{display:none}

.progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:var(--z-sticky);background:var(--color-track)}
.progress i{display:block;height:100%;width:0;background:var(--color-presence);
  transition:width var(--dur-slow) var(--ease-out)}

.topbar{position:absolute;top:0;left:0;right:0;z-index:var(--z-sticky);display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-3);padding:var(--space-5) var(--gutter-desktop) 0}
.brand{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted)}
.close{width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;border:0;background:none;cursor:pointer;
  border-radius:var(--radius-pill);color:var(--color-text-muted)}
.close:hover{background:var(--color-surface-3);color:var(--color-text)}
.close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

.navpad{position:absolute;right:var(--gutter-desktop);bottom:var(--space-6);z-index:var(--z-sticky);display:none;gap:2px;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.navpad.on{display:flex}
.navpad button{width:46px;height:var(--tap-min);border:0;cursor:pointer;background:var(--color-accent);
  color:var(--color-on-accent);display:grid;place-items:center}
.navpad button:hover{background:var(--color-accent-hover)}
.navpad button:disabled{background:var(--color-surface-3);color:var(--color-text-dim);cursor:default}
.navpad svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stepcount{position:absolute;right:calc(var(--gutter-desktop) + 108px);bottom:calc(var(--space-6) + 12px);z-index:var(--z-sticky);
  font-size:var(--text-xs);font-weight:600;color:var(--color-text-dim);font-variant-numeric:tabular-nums}

.ff-stage{position:relative;height:100%;width:100%}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:104px var(--gutter-desktop) 120px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(40px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s}
.slide.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.slide.leaving-up{opacity:0;transform:translateY(-40px)}
.slide.leaving-down{opacity:0;transform:translateY(40px)}
.inner{width:100%;max-width:640px}

.qnum{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);
  font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-presence)}
.qnum svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qtitle{font-size:clamp(1.5rem,3.2vw,1.95rem);font-weight:600;line-height:var(--leading-snug);margin-bottom:var(--space-3)}
.qtitle .var,.display-title .var{color:var(--color-presence)}
.qhelp{color:var(--color-text-muted);margin-bottom:var(--space-7);max-width:56ch}

.display-kicker{font-size:var(--text-sm);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-presence);margin-bottom:var(--space-4)}
.display-title{font-weight:600;font-size:clamp(2rem,5vw,3rem);line-height:1.08;letter-spacing:-.015em;
  color:var(--color-accent);margin-bottom:var(--space-5)}
.display-sub{color:var(--color-text-muted);font-size:var(--text-lg);max-width:52ch;margin-bottom:var(--space-7)}
.display-mark{width:56px;height:56px;margin-bottom:var(--space-6)}

.field{width:100%;background:transparent;border:0;outline:0;color:var(--color-text);font-family:var(--font-ui);
  font-size:clamp(1.35rem,2.8vw,1.7rem);padding:var(--space-2) 0 var(--space-3);caret-color:var(--color-accent);
  border-bottom:2px solid var(--color-border-strong);border-radius:0;transition:border-color var(--dur) var(--ease-out)}
.field::placeholder{color:var(--color-text-dim);opacity:.7}
.field:focus,.field:focus-visible{border-bottom-color:var(--color-accent);outline:0}
textarea.field{resize:none;min-height:104px;line-height:var(--leading-normal);font-size:clamp(1.15rem,2.4vw,1.4rem)}
.field-err{margin-top:var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--color-error);display:none}
.field-err.show{display:flex}

.choices{display:flex;flex-direction:column;gap:var(--space-2);max-width:540px}
.choice{display:flex;align-items:center;gap:var(--space-3);text-align:left;cursor:pointer;min-height:var(--tap-std);
  background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);
  padding:var(--space-3) var(--space-4);font-size:var(--text-body);
  transition:border-color var(--dur-fast), background var(--dur-fast), transform 60ms}
.choice:hover{border-color:var(--color-accent)}
.choice:active{transform:scale(.99)}
.choice .key{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);transition:all var(--dur-fast)}
.choice:hover .key{border-color:var(--color-accent);color:var(--color-accent)}
.choice.selected{border-color:var(--color-accent);background:var(--color-warning-soft);box-shadow:0 0 0 1px var(--color-accent)}
.choice.selected .key{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.choice .tick{margin-left:auto;width:18px;height:18px;opacity:0;transition:opacity var(--dur-fast);flex:none;
  stroke:var(--color-accent);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.choice.selected .tick{opacity:1}
.choice.selected .choice-t{font-weight:600}

.review{display:flex;flex-direction:column;max-width:580px;border:1px solid var(--color-border);
  border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface)}
.review button{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--color-border);min-height:var(--tap-min);
  padding:var(--space-3) var(--space-4);text-align:left}
.review button:last-child{border-bottom:0}
.review button:hover{background:var(--color-surface-3)}
.review .rl{flex:none;width:124px;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-text-muted)}
.review .rv{flex:1;font-size:var(--text-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review .re{flex:none;font-size:var(--text-xs);font-weight:600;color:var(--color-focus)}

.cta-row{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-7);flex-wrap:wrap}
.slide .btn[disabled]{opacity:.6;cursor:progress}
.send-err{margin-top:var(--space-4);font-size:var(--text-sm);font-weight:600;color:var(--color-error)}
.send-err a{color:inherit}
.kbd-hint{font-size:var(--text-sm);color:var(--color-text-dim);user-select:none}
.kbd-hint b{font-weight:600;color:var(--color-text-muted);border:1px solid var(--color-border-strong);
  border-bottom-width:2px;border-radius:var(--radius-sm);padding:1px 7px;margin:0 2px;font-size:var(--text-xs)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

@media (max-width:720px){
  .topbar{padding:var(--space-4) var(--gutter-phone) 0}
  .kbd-hint{display:none}
  .slide{padding:84px var(--gutter-phone) 112px;align-items:flex-start}
  .navpad{right:var(--gutter-phone);bottom:var(--space-4)}
  .stepcount{right:calc(var(--gutter-phone) + 104px);bottom:calc(var(--space-4) + 12px)}
  .review .rl{width:88px}
}
@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .2s linear, visibility 0s .2s;transform:none}
  .slide.leaving-up,.slide.leaving-down{transform:none}
  .progress i,.choice{transition:none}
}