/* BH27: calm morning ledger. Paper ground, ink type, one blue; green/amber/red only carry meaning. */
:root{
  --paper:#f2f3ef; --card:#ffffff; --field:#f7f8f5; --ink:#111418; --muted:#5c6470; --line:#e1e3de; --hair:#eceee9;
  --accent:#2346c8; --accent-tint:#eef1fc; --track:#d3d6cf;
  --go:#1e7a4c; --warn:#7a4d00; --warn-bg:#fff4e0; --warn-line:#f0d9ad; --stop:#b3261e;
  --z-easy:#2f9a63; --z-long:#1e6b45; --z-thr:#d2691e; --z-thr-ink:#b0500f; --z-erg:#4a6fd6; --z-str:#7a5aa8; --z-mob:#9aa19a; --z-warm:#d9822b; --z-cold:#3a9bc9;
  --l0:#eceee9; --l1:#cfe8d9; --l3:#7fbf9a; --l5:#e7b55a; --l6:#c0392b;
  --display:"Archivo","Arial Narrow",sans-serif; --body:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#101317; --card:#181c22; --field:#1f242b; --ink:#e9ecef; --muted:#9aa3ae; --line:#2a3038; --hair:#232830;
  --accent:#8ea6f2; --accent-tint:#1c2436; --track:#353b44;
  --go:#5cc58b; --warn:#f2c27a; --warn-bg:#2d2414; --warn-line:#4a3a1c; --stop:#ef6a5c;
  --z-easy:#5cc58b; --z-long:#3fa673; --z-thr:#f08a45; --z-thr-ink:#f08a45; --z-erg:#8ea6f2; --z-str:#b391e0; --z-mob:#7d857d; --z-warm:#f0a35a; --z-cold:#6cc0e6;
  --l0:#232830; --l1:#24412f; --l3:#3f8a5f; --l5:#b7862f; --l6:#d0473a; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.45 var(--body);-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 calc(76px + env(safe-area-inset-bottom))}
a{color:var(--accent)}
main{max-width:520px;margin:0 auto;padding:24px 20px 20px;display:grid;gap:16px}
h1,h2,p{margin:0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.display{font-family:var(--display);font-stretch:68%;font-weight:800;line-height:.95;letter-spacing:-.01em;text-wrap:balance}
h1.display{font-size:44px}
.hero{font-size:64px;line-height:.92}
.num{font-family:var(--display);font-stretch:75%;font-weight:700;font-size:24px;line-height:1.1}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0}
.card h2{font-size:15px;font-weight:600}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.tile .lbl{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.tile.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.go{color:var(--go)} .warn-t{color:var(--warn)} .stop{color:var(--stop)}

/* countdown strip */
.weeks{display:flex;gap:3px;align-items:end;height:14px}
.weeks i{flex:1;height:8px;border-radius:2px;background:var(--track)}
.weeks i.done{background:var(--ink)} .weeks i.now{height:14px;background:var(--accent)} .weeks i.race{height:14px;background:var(--ink)}

/* workout */
.profile{display:flex;gap:2px;align-items:end;height:56px}
.profile i{border-radius:3px 3px 1px 1px;flex-basis:0}
.profile .easy{background:#7fbf9a;height:42%} .profile .jog{background:#bfe0cc;height:30%}
.profile .thr{background:var(--z-thr);height:92%} .profile .hm{background:#e7b55a;height:75%}
.profile .vo2{background:var(--l6);height:100%} .profile .erg{background:var(--z-erg);height:40%}
.steps{display:grid}
.steps div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--hair);font-size:14px}
.steps .t-easy{color:var(--go)} .steps .t-thr,.steps .t-vo2{color:var(--z-thr-ink)} .steps .t-hm{color:var(--warn)} .steps .t-erg{color:var(--z-erg)}

/* buttons, inputs */
.btn,button.btn{display:flex;align-items:center;justify-content:center;min-height:52px;border:0;border-radius:14px;
  background:var(--ink);color:var(--paper);font:600 16px var(--body);text-decoration:none;cursor:pointer;width:100%}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--track);
  background:var(--card);font-size:14px;font-weight:500}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible + span,.seg input:focus-visible + span,.scale input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.detail{display:none;border-top:1px solid var(--hair);padding-top:12px;gap:10px}
.seg{display:flex;gap:6px}
.seg label{flex:1;position:relative}
.seg input,.scale input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;border:1px solid var(--track);font-size:14px;font-weight:500;background:var(--card)}
.seg input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px}
.scale label{position:relative}
.scale span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:8px;border:1px solid var(--line);
  background:var(--field);font:600 15px var(--display);font-stretch:80%}
.scale label:nth-child(-n+4) input:checked + span{background:var(--go);border-color:var(--go);color:#fff}
.scale label:nth-child(n+5):nth-child(-n+6) input:checked + span{background:#a86a00;border-color:#a86a00;color:#fff}
.scale label:nth-child(n+7) input:checked + span{background:var(--stop);border-color:var(--stop);color:#fff}
.field{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.field input,.field select,.field textarea{font:600 20px var(--display);font-stretch:75%;color:var(--ink);padding:10px 12px;min-height:44px;
  border:1px solid var(--line);border-radius:10px;background:var(--field);width:100%}
.field select,.field textarea{font:500 16px var(--body)}

/* week */
.days{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.days li{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:52px;border-top:1px solid var(--hair)}
.days li:first-child{border-top:0}
.days li.today{background:var(--accent-tint)}
.days .date{width:44px;flex:none;display:grid}
.days .dow{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.days .items{flex:1;min-width:0;display:grid;gap:4px}
.item{display:flex;align-items:center;gap:8px;min-width:0}
.item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item:first-child span{font-weight:600}
.item + .item span{font-size:13px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--z-mob)}
.k-easy{background:var(--z-easy)} .k-long{background:var(--z-long)} .k-quality{background:var(--z-thr)}
.k-erg{background:var(--z-erg)} .k-strength{background:var(--z-str)} .k-mobility{background:var(--z-mob)}
.k-warm{background:var(--z-warm)} .k-cold{background:var(--z-cold)}
.badge{font-size:11px;font-weight:600;border-radius:999px;padding:3px 8px;color:#fff;background:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}

/* trends */
.bars{position:relative;height:120px;display:flex;align-items:end;gap:8px}
.bars .col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:3px}
.bars .bar{width:100%;max-width:26px;border-radius:4px 4px 1px 1px;background:var(--z-easy)}
.bars .bar.over{background:#d99a2b}
.bars .cap{position:absolute;left:0;right:0;border-top:1.5px dashed var(--ink);opacity:.55}
.xlabels{display:flex;gap:8px}.xlabels span{flex:1;text-align:center;font:10px var(--mono);color:var(--muted)}
.heat{display:flex;align-items:center;gap:10px}
.heat .name{width:72px;flex:none;font-size:13px}
.heat .cells{flex:1;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--l0)}
.heat i.none{background:transparent;border:1px dashed var(--line)}
.heat i.l1{background:var(--l1)} .heat i.l3{background:var(--l3)} .heat i.l5{background:var(--l5)} .heat i.l6{background:var(--l6)}

/* tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--card);border-top:1px solid var(--line);padding:6px 8px calc(10px + env(safe-area-inset-bottom))}
.tabs a{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;
  text-decoration:none;color:var(--muted)}
.tabs a[aria-current="page"]{color:var(--accent);font-weight:600}
.tabs svg{width:22px;height:22px}