/* Base camp - Soft Acro Aaron 2.0 Signature. Sizes 14 / 16 / 22 / 36 / 44. Weights 400 / 600 (700 title only).
   Corners 24 tile, 14 inner, 6 chip, 999 buttons, 50% circles. One navy-tinted shadow. Orange = the one main action. */
@font-face{font-family:"Jost";src:url("/fonts/Jost-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Figtree";src:url("/fonts/Figtree-Variable.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Caveat Brush";src:url("/fonts/CaveatBrush-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#EDFAFF; --surface:#FFFFFF; --soft:#DAF0FE; --line:#C9E2EF; --line-strong:#5E86AA;
  --ink:#10324A; --muted:#5B7083; --blue:#03659D;
  --signal:#EB6D38; --signal-bold:#DA5B26; --signal-ink:#B04418; --on-signal:#0F2A43; --peach:#FFE6DC;
  --ok:#1D7555; --ok-soft:#E2F3E8; --amber:#9A6200; --amber-soft:#FBF0D9; --video:#06101A;
  --shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,50,74,.06),0 10px 24px -14px rgba(16,50,74,.22);
  --f-display:Jost,"Futura PT",Futura,"Avenir Next",sans-serif;
  --f-text:Figtree,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-hand:"Caveat Brush","Marker Felt",cursive;
  --s14:14px; --s16:16px; --s22:22px; --s36:36px; --s44:44px;
  --r-tile:24px; --r-in:14px; --r-chip:6px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:var(--s16);line-height:1.5;font-weight:400;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--s36);font-weight:700;line-height:1.1}
h2{font-size:var(--s22);font-weight:600;line-height:1.25}
h3{font-size:var(--s16);font-weight:600;line-height:1.3}
p{margin:0;text-wrap:pretty}
a{color:var(--blue)}
b,strong{font-weight:600}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.muted{color:var(--muted)}
.small{font-size:var(--s14)}
.num{font-variant-numeric:tabular-nums}

/* the one column: phone first, centred on laptop */
.col{max-width:480px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:grid;gap:20px}
.brand{font-size:var(--s14);font-weight:600;color:var(--muted)}
.lead{font-size:var(--s16);color:var(--ink)}
.signin{padding-top:48px}

/* top bar: Back on the left, Me on the right */
.top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.top .link{min-height:44px}
.link{background:none;border:0;padding:0 2px;font:inherit;font-size:var(--s16);color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:disabled{color:var(--muted);cursor:default}
.me-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font:600 var(--s14) var(--f-display);color:var(--ink);cursor:pointer}

/* buttons: one orange main action per screen, the rest ghost */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 20px;border-radius:999px;border:2px solid transparent;font:600 var(--s16) var(--f-text);text-decoration:none;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.98)}
.btn-main{background:var(--signal);color:var(--on-signal)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-row{display:grid;gap:12px}
.hint{font-size:var(--s14);color:var(--muted);min-height:21px}
.err{font-size:var(--s14);color:var(--signal-ink);font-weight:600}

.tile{background:var(--surface);border-radius:var(--r-tile);padding:20px;box-shadow:var(--shadow);display:grid;gap:12px}
@supports (corner-shape:squircle){.tile{corner-shape:squircle;border-radius:34px}}

/* ---------- home: the trail of 5 stations ---------- */
.hello{display:grid;gap:8px}
.pen{font-family:var(--f-hand);font-size:var(--s22);color:var(--signal-ink);line-height:1.2}
.trail{list-style:none;margin:0;padding:0;display:grid}
.stn{display:grid;grid-template-columns:40px 1fr;gap:14px;position:relative;padding-bottom:20px}
.stn:last-child{padding-bottom:0}
.stn::before{content:"";position:absolute;left:19px;top:42px;bottom:2px;border-left:3px dotted var(--line-strong)}
.stn:last-child::before{display:none}
.stn.done::before{border-left-style:solid;border-color:var(--ok)}
.dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 var(--s16) var(--f-display);background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.stn.done .dot{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.stn.done .dot svg{width:18px;height:18px}
.stn.next .dot{border-color:var(--signal);border-width:3px}
.stn-go{display:grid;gap:2px;text-align:left;background:none;border:0;padding:6px 0 0;font:inherit;color:inherit;cursor:pointer}
.stn-go:disabled{cursor:default}
.stn-go h3{font-size:var(--s16)}
.stn-go span{font-size:var(--s14);color:var(--muted)}
.stn.done .stn-go span{color:var(--ok)}
.stn.wait .stn-go h3{color:var(--muted)}
.lock{display:grid;gap:6px;padding:16px 20px;border-radius:var(--r-in);background:var(--soft)}
.lock.ready{background:var(--ok-soft)}

/* progress bar */
.prog{display:grid;gap:6px}
.prog-bar{height:6px;border-radius:var(--r-chip);background:var(--soft);overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--blue);border-radius:var(--r-chip);transition:width .25s}
.prog span{font-size:var(--s14);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- questions ---------- */
.q{display:grid;gap:16px}
.q-help{color:var(--muted)}
.field{display:grid;gap:8px}
.field>label,.field>.lbl{font-weight:600}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;border-radius:var(--r-in);border:2px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.opt::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface)}
.opt.multi::before{border-radius:var(--r-chip)}
.opt[aria-pressed="true"],.opt[aria-checked="true"]{border-color:var(--blue);background:var(--soft)}
.opt[aria-checked="true"]::before{border:6px solid var(--blue);background:var(--surface)}
.opt.multi[aria-pressed="true"]::before{background:var(--blue);border-color:var(--blue)}
.opt small{display:block;color:var(--muted);font-size:var(--s14)}
.grp{font-size:var(--s14);font-weight:600;color:var(--muted);margin-top:8px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{min-height:48px;border-radius:var(--r-chip);border:2px solid var(--line);background:var(--surface);font:600 var(--s14) var(--f-text);color:var(--ink);cursor:pointer;padding:0}
.day[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.day:disabled{opacity:.35;cursor:default}
.scale{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.scale .day{min-height:44px}
.scale-ends{display:flex;justify-content:space-between;font-size:var(--s14);color:var(--muted)}
textarea,input[type=text],input[type=email]{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r-in);padding:12px 14px}
textarea{min-height:140px;resize:vertical}
textarea:focus,input:focus{outline:3px solid var(--blue);outline-offset:1px}
.tickrow{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-in);border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--ink);width:100%}
.tickrow .box{flex:none;width:26px;height:26px;border-radius:var(--r-chip);border:2px solid var(--line-strong);display:grid;place-items:center;background:var(--surface);margin-top:1px}
.tickrow[aria-checked="true"]{border-color:var(--ok)}
.tickrow[aria-checked="true"] .box{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.tickrow .box svg{width:16px;height:16px}

/* the yes / no list (red flags + health): every line starts at no */
.flags{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fl{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 12px 12px 16px;border-radius:var(--r-in);background:var(--surface);border:2px solid var(--line)}
.fl.yes{border-color:var(--amber);background:var(--amber-soft)}
.yn{display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-in);background:var(--soft);gap:2px}
.yn button{min-width:52px;min-height:40px;border:0;border-radius:var(--r-chip);background:none;font:600 var(--s14) var(--f-text);color:var(--muted);cursor:pointer;padding:0 10px}
.yn button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,50,74,.18)}
.fl.yes .yn button[aria-pressed="true"]{background:var(--amber);color:var(--surface)}
.calm{display:grid;gap:10px;padding:20px;border-radius:var(--r-in);background:var(--peach)}

/* ---------- video ---------- */
.vid{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-in);overflow:hidden;background:var(--video)}
.vid video{display:block;width:100%;height:100%;object-fit:contain;background:var(--video)}
.vid.coming{display:grid;place-items:center;background:var(--soft);padding:16px;text-align:center}
.vid.coming p{color:var(--ink);font-weight:600}
.vid.coming small{display:block;color:var(--muted);font-size:var(--s14);font-weight:400}
.vrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 12px 12px 16px;border-radius:var(--r-in);background:var(--surface);border:2px solid var(--line)}
.vrow.on{border-color:var(--blue)}
.vrow .vt{display:grid;gap:0;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.vrow .vt b{font-weight:600}
.vrow .vt span{font-size:var(--s14);color:var(--muted)}
.got{min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--line-strong);background:var(--surface);font:600 var(--s14) var(--f-text);color:var(--ink);cursor:pointer;white-space:nowrap}
.got[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--surface)}

/* ---------- sheet (video consent) ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,50,74,.55);z-index:20;display:grid;align-items:end;justify-items:center}
.sheet{background:var(--bg);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:var(--r-tile) var(--r-tile) 0 0;padding:24px 16px calc(24px + env(safe-area-inset-bottom));display:grid;gap:16px}
@media (min-width:560px){.scrim{align-items:center}.sheet{border-radius:var(--r-tile)}}
.vc .opt{align-items:flex-start}
.vc .opt::before{margin-top:2px}
.vc .opt b{margin-right:4px}

/* ---------- Me ---------- */
.kv{display:grid;gap:2px}
.kv span{font-size:var(--s14);color:var(--muted)}

/* ---------- assessment picker (ported from assess.softacroaaron.com, snapped to the scale) ---------- */
.a-cues{font-size:var(--s14);line-height:1.45;color:var(--muted);display:grid;gap:4px}
.a-cues b{color:var(--signal-ink);margin-right:4px}
.a-pick{display:grid;gap:8px}
.a-hints{display:flex;align-items:center;gap:8px;min-height:28px;font-family:var(--f-hand);font-size:var(--s22);line-height:1;color:var(--signal-ink)}
.a-hints svg{width:26px;height:26px;flex:none}
.a-hints .sw{width:40px;height:20px}
.a-pick.has-score .a-hints{opacity:.45}
.a-frame{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:var(--r-in);background:var(--soft);border:1px solid var(--line);overscroll-behavior-x:contain}
.a-frame:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.a-pinner{position:relative;overflow:hidden;width:1040px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.a-pinner img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.a-cell{position:absolute;pointer-events:none;border-radius:var(--r-chip)}
.a-cell.done{background:rgba(235,109,56,.08)}
.a-tick{display:none;position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--peach);color:var(--signal-ink);padding:4px}
.a-tick svg{display:block;width:100%;height:100%}
.a-cell.done .a-tick{display:block}
.a-cell.sel{background:rgba(235,109,56,.14)}
.a-cell.sel::after{content:"";position:absolute;inset:-3px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none' stroke='%23DA5B26' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M7 3C30 1 70 2 93 2.5c4 .3 5.5 2 5.3 6C98 35 98.5 65 98.2 92c0 4-2 5.6-6 5.8C68 99 32 99 8 98 3.5 97.7 1.8 96 2 92 2.6 65 1.5 35 2 8c.1-3.4 2-5 5-5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
.a-scoreline{display:flex;align-items:center;gap:12px;min-height:56px}
.a-scorelabel{flex:1;font-weight:600}
.a-scoreval{min-width:80px;height:56px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line-strong);border-radius:var(--r-in);background:var(--surface);font:600 var(--s36) var(--f-display);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.a-pick:not(.has-score) .a-scoreval{color:var(--muted);border-color:var(--line)}
.a-nudge{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid var(--blue);background:var(--surface);color:var(--blue);font:400 var(--s22) var(--f-text);line-height:1;cursor:pointer;padding:0}
.a-nudge:disabled{opacity:.35;cursor:default}
.a-notyet{justify-self:center;min-height:44px;padding:0 12px;border:0;background:none;color:var(--muted);font:400 var(--s16) var(--f-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.a-notyet b{color:var(--ink)}
.a-pick.has-score .a-notyet{visibility:hidden}
.chart svg{display:block;width:100%;height:auto}
.scores{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.scores li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:6px 0}
.scores b{font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:var(--r-in);font-size:var(--s14);z-index:30;max-width:90vw}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}