/* Warmup Coach — warm↔cool session-temperature system.
   Display: Bricolage Grotesque · Body: Hanken Grotesk · Data: Space Mono */

:root{
  --bone:#F7F5F0;
  --card:#FEFDFB;
  --ink:#17140F;
  --ink-soft:#5C564C;
  --line:#E7E1D6;
  --warm:#F26A3C;      /* warm-up */
  --warm-tint:#FCEAE1;
  --cool:#159A85;      /* cool-down */
  --cool-tint:#DFF1EC;
  --radius:14px;
  --shadow:0 1px 2px rgba(23,20,15,.04), 0 12px 32px -14px rgba(23,20,15,.18);
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 24px}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.02; margin:0}

/* ---------- header ---------- */
.site{border-bottom:1px solid var(--line); background:rgba(247,245,240,.85);
  backdrop-filter:saturate(140%) blur(8px); position:sticky; top:0; z-index:20}
.bar{display:flex; align-items:center; justify-content:space-between; height:64px}
/* The wordmark carries the warm→cool metaphor: "warmup" in ink, the dot warm,
   "coach" cool. Longer than the old mark, so it steps down on narrow screens. */
.wordmark{font-family:var(--font-display); font-weight:800; font-size:1.4rem;
  letter-spacing:-.03em; text-decoration:none; color:var(--ink); white-space:nowrap}
.wordmark .dot{color:var(--warm)}
.wordmark .wm-cool{color:var(--cool)}
.nav{display:flex; align-items:center; gap:22px; font-weight:600; font-size:.95rem}
.nav a{text-decoration:none; color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.nav-cta{color:var(--ink)!important; border:1.5px solid var(--ink); border-radius:999px;
  padding:7px 15px; transition:background .15s,color .15s}
.nav-cta:hover{background:var(--ink); color:var(--bone)!important}

/* ---------- hero ---------- */
.hero{padding:56px 0 40px}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--warm); margin:0 0 18px}
h1{font-size:clamp(2.4rem,5vw,3.5rem)}
h1 em{font-style:italic; color:var(--warm); font-weight:700}
.lede{font-size:1.14rem; color:var(--ink-soft); margin:20px 0 0; max-width:30ch}
.arc{width:min(340px,90%); height:auto; margin:34px 0 8px; display:block}
.arc-path{stroke-dasharray:520; stroke-dashoffset:0; animation:draw 1.4s ease-out both}
@keyframes draw{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
.arc-dot.warm{fill:var(--warm)} .arc-dot.cool{fill:var(--cool)}
.arc-caption{font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); margin:0}
.arc-caption .w{color:var(--warm)} .arc-caption .c{color:var(--cool)}

/* ---------- form ---------- */
.generator{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px; position:relative}

/* progress overlay while the routine generates */
.progress{position:absolute; inset:0; z-index:5; border-radius:var(--radius); padding:26px;
  background:rgba(254,253,251,.94); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center}
.progress[hidden]{display:none} /* keep it out of the way until generation starts */
.progress-inner{width:100%; max-width:320px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:26px 24px; animation:p-rise .35s ease}
@keyframes p-rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.p-spin{width:34px; height:34px; margin:0 auto 16px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--warm); border-right-color:var(--cool);
  animation:p-spin .8s linear infinite}
@keyframes p-spin{to{transform:rotate(360deg)}}
.p-msg{font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em;
  margin:0 0 18px; min-height:1.4em; animation:p-fade .5s ease}
.p-bar{height:10px; background:var(--line); border-radius:999px; overflow:hidden}
.p-bar span{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--warm),var(--cool)); transition:width .3s linear}
.p-meta{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.8rem;
  color:var(--ink-soft); margin-top:10px}
#ppct{color:var(--warm); font-weight:700}
@keyframes p-fade{from{opacity:.3}to{opacity:1}}
.form-error{background:var(--warm-tint); border:1px solid var(--warm); color:#7c2d12;
  border-radius:10px; padding:11px 14px; margin:0 0 18px; font-size:.95rem; font-weight:500}
.field{display:block; margin-bottom:18px}
.field-label{display:block; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.11em; color:var(--ink-soft); margin-bottom:7px}
textarea,input,select{width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--bone); border:1.5px solid var(--line); border-radius:10px; padding:11px 13px;
  transition:border-color .15s, box-shadow .15s}
textarea{resize:vertical; min-height:96px; line-height:1.45}
textarea:focus,input:focus,select:focus{outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(23,20,15,.08)}
::placeholder{color:#a49d90}

.uploader{margin:-6px 0 18px}
.uploader input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.upload-btn{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-weight:600;
  font-size:.92rem; color:var(--ink-soft); background:var(--bone);
  border:1.5px dashed var(--line); border-radius:10px; padding:10px 15px; transition:all .15s}
.upload-btn:hover{border-color:var(--warm); color:var(--ink)}
.uploader.has-file .upload-btn{border-style:solid; border-color:var(--cool); color:#0b5c4e;
  background:var(--cool-tint)}
.uploader input:focus-visible + .upload-btn,
.upload-btn:focus-within{box-shadow:0 0 0 3px rgba(23,20,15,.1)}
#upload-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(60vw,320px)}

.modes{border:0; padding:0; margin:0 0 18px}
.modes legend{padding:0}
.seg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:2px}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; padding:11px 8px; font-weight:600;
  background:var(--bone); transition:all .15s; user-select:none}
.seg label:hover{border-color:var(--ink-soft)}
.seg-warm.seg-warm{}
#m-warmup:checked + .seg-warm{background:var(--warm-tint); border-color:var(--warm); color:#8a3413}
#m-cooldown:checked + .seg-cool{background:var(--cool-tint); border-color:var(--cool); color:#0b5c4e}
#m-both:checked + .seg-both{background:linear-gradient(100deg,var(--warm-tint),var(--cool-tint));
  border-color:var(--ink); color:var(--ink)}
.seg input:focus-visible + label{box-shadow:0 0 0 3px rgba(23,20,15,.12)}

.mini{display:block} .mini .field-label{margin-bottom:5px}

.equip{border:0; padding:0; margin:0 0 18px}
.equip legend{padding:0}
.equip-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.tile{position:relative; display:inline-flex}
.tile input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.tile-inner{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  border:1.5px solid var(--line); border-radius:10px; padding:9px 13px; background:var(--bone);
  color:var(--ink-soft); font-weight:600; font-size:.88rem;
  transition:transform .15s, border-color .15s, box-shadow .2s, color .15s}
.tile-icon{width:19px; height:19px; display:block; flex:none}
.tile-icon svg{width:100%; height:100%; display:block}
.tile-label{line-height:1}
.tile-inner:hover{border-color:var(--ink-soft)}
.tile input:checked + .tile-inner{border-color:var(--warm); color:var(--warm);
  box-shadow:0 0 0 3px var(--warm-tint), 0 6px 16px -6px rgba(242,106,60,.5);
  animation:tile-pop .28s ease}
.tile input:focus-visible + .tile-inner{outline:2px solid var(--ink); outline-offset:2px}
@keyframes tile-pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}

.finetune{border:1px dashed var(--line); border-radius:10px; padding:0 14px; margin-bottom:18px}
.finetune summary{cursor:pointer; padding:12px 0; font-weight:600; font-size:.95rem; list-style:none}
.finetune summary::-webkit-details-marker{display:none}
.finetune summary::before{content:"+"; font-family:var(--font-mono); color:var(--warm);
  margin-right:8px; font-weight:700}
.finetune[open] summary::before{content:"–"}
.finetune[open] summary{border-bottom:1px solid var(--line)}
.finetune-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 0}
.finetune-grid .full{grid-column:1 / -1; display:block}

.go{width:100%; border:0; cursor:pointer; background:var(--ink); color:var(--bone);
  font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:-.01em;
  border-radius:11px; padding:15px; margin-top:4px; transition:transform .08s, background .15s}
.go:hover{background:#000} .go:active{transform:translateY(1px)}
.go span{display:inline-block; transition:transform .15s}
.go:hover span{transform:translateX(4px)}
.tiny{font-size:.8rem} .muted{color:var(--ink-soft)}
.generator .tiny{text-align:center; margin:12px 0 0}

/* ---------- result ---------- */
.result{padding:8px 0 48px}
.routine-block{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:8px 26px 22px; margin-bottom:22px; border-top:5px solid}
.routine-block.warm{border-top-color:var(--warm)}
.routine-block.cool{border-top-color:var(--cool)}
.block-head{display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 6px; border-bottom:1px solid var(--line); margin-bottom:6px}
.tag{font-family:var(--font-display); font-size:1.5rem; font-weight:800}
.warm .tag{color:var(--warm)} .cool .tag{color:var(--cool)}
.count{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.1em}
.moves{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:16px}
.move{background:var(--bone); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:12px; padding:15px 16px}
.warm .move{border-left-color:var(--warm)}
.cool .move{border-left-color:var(--cool)}
.move-head{display:flex; align-items:baseline; gap:9px}
.num{font-family:var(--font-mono); font-weight:700; font-size:.76rem}
.warm .num{color:var(--warm)} .cool .num{color:var(--cool)}
.move-name{font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em;
  flex:1; min-width:0}
.dose{font-family:var(--font-mono); font-size:.78rem; font-weight:700; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); border-radius:7px; padding:3px 8px}
.warm .dose{color:#8a3413; border-color:var(--warm)} .cool .dose{color:#0b5c4e; border-color:var(--cool)}
.area{display:inline-block; font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-soft); margin-top:9px}
.cue{margin:9px 0 0; font-size:.93rem}
.why{margin:9px 0 0; padding-top:9px; border-top:1px dashed var(--line); font-size:.88rem;
  color:var(--ink-soft); font-style:italic}
.notes{font-size:.98rem; color:var(--ink-soft); margin:4px 2px 14px; font-style:italic}
.applied{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.applied li{font-family:var(--font-mono); font-size:.75rem; background:var(--cool-tint);
  color:#0b5c4e; border-radius:999px; padding:5px 11px}
.result-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn-ghost{display:inline-block; text-decoration:none; cursor:pointer; font-family:var(--font-body);
  font-weight:600; font-size:.95rem; color:var(--ink); background:transparent;
  border:1.5px solid var(--ink); border-radius:10px; padding:10px 18px; transition:background .15s,color .15s}
.btn-ghost:hover{background:var(--ink); color:var(--bone)}
.result .tiny{margin-top:14px}

/* ---------- how ---------- */
.how{border-top:1px solid var(--line); padding:44px 0 60px}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.how-n{font-family:var(--font-mono); font-weight:700; color:var(--warm); font-size:.85rem}
.how-item h3{font-size:1.15rem; margin:8px 0 6px}
.how-item p{margin:0; color:var(--ink-soft); font-size:.97rem}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); background:#efece4; padding:30px 0 40px}
.disclaimer{font-size:.86rem; color:var(--ink-soft); max-width:70ch; margin:0 0 14px}
.disclaimer strong{color:var(--ink)}
.foot-links{font-size:.9rem; color:var(--ink-soft)}
.foot-links a{color:var(--ink-soft); text-decoration:none} .foot-links a:hover{color:var(--ink)}

/* ---------- content pages ---------- */
.doc{padding:44px 0 60px; max-width:720px}
.doc h1{font-size:2.2rem; margin-bottom:8px}
.doc h2{font-size:1.3rem; margin:30px 0 8px}
.doc p,.doc li{color:var(--ink-soft)} .doc a{color:var(--warm)}
.doc .lede{color:var(--ink-soft)}

/* ---------- cookie banner ---------- */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; z-index:40; display:none;
  gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--ink); color:var(--bone); border-radius:12px; padding:14px 18px;
  font-size:.9rem; max-width:720px; margin:0 auto; box-shadow:var(--shadow)}
.cookie-banner a{color:#fff}
.cc-btns{display:flex; gap:10px}
.cc-btn{cursor:pointer; border:0; border-radius:8px; padding:9px 16px; font-weight:600;
  font-family:var(--font-body); background:var(--warm); color:#fff}
.cc-ghost{background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:28px}
  .hero{padding:36px 0 26px}
  .arc{margin:26px 0 6px}
  .how-grid{grid-template-columns:1fr; gap:20px}
}
@media (max-width:520px){
  body{font-size:16px}
  .wordmark{font-size:1.2rem}
  .finetune-grid{grid-template-columns:1fr}
  .generator{padding:20px}
  .routine-block{padding:6px 18px 18px}
  .moves{grid-template-columns:1fr}
}

/* ---------- a11y / motion / print ---------- */
:focus-visible{outline:2px solid var(--warm); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .arc-path{animation:none} .go span,.go{transition:none}
  .tile-inner{transition:none} .tile input:checked + .tile-inner{animation:none}
  .p-msg{animation:none} .progress-inner{animation:none}
  .p-spin{animation-duration:1.6s}
  *{scroll-behavior:auto!important}
}
/* ---- feedback / contact forms ---- */
.feedback{padding:0 0 72px}
.wc-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px; max-width:640px; margin:0 auto}
.wc-card h2{font-family:var(--font-display); font-size:1.35rem; margin-bottom:6px}
.wc-sub{color:var(--ink-soft); font-size:.95rem; margin-bottom:16px}
.wc-form{display:flex; flex-direction:column; gap:10px}
.wc-row{display:flex; gap:10px; flex-wrap:wrap}
.wc-row input{flex:1 1 200px}
/* 16px minimum stops iOS zooming the viewport on focus. */
.wc-form input,.wc-form textarea{width:100%; font:inherit; font-size:16px;
  font-family:var(--font-body); padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--bone); color:var(--ink)}
.wc-form textarea{resize:vertical; min-height:96px}
.wc-form input:focus,.wc-form textarea:focus{outline:none; border-color:var(--warm);
  box-shadow:0 0 0 3px rgba(242,106,60,.18)}
.wc-btn{align-self:flex-start; font-family:var(--font-display); font-weight:700;
  font-size:1rem; padding:11px 22px; border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--bone)}
.wc-btn:hover{background:#000}
.wc-btn:disabled{opacity:.55; cursor:default}
.wc-status{font-size:.9rem; min-height:1.2em; margin:0}
.wc-status.ok{color:var(--cool)}
.wc-status.err{color:#7c2d12}

@media print{
  .site,.site-foot,.generator,.how,.cookie-banner,.result-actions,.feedback{display:none!important}
  body{background:#fff}
  .routine-block{box-shadow:none; border:1px solid #ccc; break-inside:avoid}
}