/* Team Kilimanjaro · Training organiser
   All colour, type and size tokens live here. */
:root{
  --navy:#1D3250; --navy-2:#2E4D72; --accent:#D98A1C; --accent-soft:#FBF0DD; --accent-ink:#1A1205;
  --bg:#F7F7F5; --surface:#FFFFFF; --ink:#111827; --text:#2B3340; --muted:#6B7280; --line:#E6E7EA;
  --ok:#5E8B3A; --ok-soft:#EAF2E1; --red:#C8553D; --red-soft:#FBE9E5; --gold:#B7791F; --gold-soft:#FDF3DC;
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-sm:10px; --r:18px; --r-lg:26px;
  --shadow:0 1px 2px rgba(17,24,39,.04),0 8px 28px rgba(17,24,39,.07);
  --shadow-lg:0 2px 6px rgba(17,24,39,.05),0 22px 60px rgba(17,24,39,.16);
  --tap:48px; --gutter:clamp(12px,3vw,24px); --wrap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font);min-height:100vh;padding-bottom:84px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--navy-2)}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.muted{color:var(--muted)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ── top bar ─────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:60px}
.brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none;color:#fff;margin-right:auto;min-width:0}
.brand b{font-weight:600;font-size:17px;letter-spacing:.01em;white-space:nowrap}
@media (max-width:480px){.brand b{font-size:15px}.cd{padding:6px 11px}.cd .lg{display:none}.top .wrap{gap:8px}}
.brand span{font-size:12px;opacity:.7;letter-spacing:.08em;text-transform:uppercase}
.cd{display:flex;align-items:baseline;gap:6px;background:rgba(255,255,255,.1);border-radius:999px;padding:6px 14px;white-space:nowrap}
.cd b{font-size:20px;font-weight:600;color:#FFD08A}
.cd span{font-size:13px;opacity:.85}
.rb{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;flex:none;position:relative}
.rb:hover{background:rgba(255,255,255,.16)}
.rb svg{width:21px;height:21px}
.rb .dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--muted);border:2px solid var(--navy)}
.rb .dot.on{background:#7CC36A}.rb .dot.err{background:#F0A35E}

/* ── bottom tabs (mobile) / top tabs (desktop) ───────── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabs button{flex:1;max-width:180px;border:0;background:none;padding:8px 4px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:500;color:var(--muted);min-height:56px}
.tabs button svg{width:24px;height:24px}
.tabs button.on{color:var(--navy);background:var(--accent-soft)}
.tabs button.on svg{color:var(--accent)}
@media (min-width:900px){
  body{padding-bottom:40px}
  .tabs{position:sticky;top:60px;bottom:auto;border-top:0;border-bottom:1px solid var(--line);z-index:20;padding:8px}
  .tabs button{flex-direction:row;gap:8px;font-size:15px;min-height:44px;max-width:200px}
}

main{padding:18px 0 30px}
h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.2;margin:0}
h1{font-size:clamp(28px,4vw,42px)}
h2{font-size:clamp(22px,2.6vw,28px)}
h3{font-size:18px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;color:var(--ink);text-decoration:none}
.btn:hover{border-color:#cfd2d8}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.pri:hover{filter:brightness(1.05)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.danger{color:var(--red);border-color:#efc9c0}
.btn.big{min-height:58px;font-size:18px;padding:0 28px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.rnd{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none;color:var(--ink)}
.rnd svg{width:20px;height:20px}
.rnd:hover{border-color:#cfd2d8}

/* segmented control */
.seg{display:inline-flex;background:#EEF0F3;border-radius:999px;padding:4px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;min-height:40px;padding:0 16px;font-weight:500;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.seg.full{display:flex}.seg.full button{flex:1}

/* switch */
.sw{width:54px;height:32px;border-radius:999px;border:0;background:#D5D8DE;position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.sw.on{background:var(--ok)}.sw.on::after{left:25px}
.sw[disabled]{opacity:.4}

/* styled dropdown trigger and menu */
.dd{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap);padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:500;min-width:150px;text-align:left}
.dd::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px)}
.menu{position:fixed;z-index:90;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;min-width:200px;max-height:60vh;overflow:auto}
.menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;min-height:46px;padding:0 14px;border-radius:10px;font-weight:500}
.menu button:hover{background:var(--bg)}
.menu button.on{background:var(--accent-soft)}
.menu .sw8{width:12px;height:12px;border-radius:50%;flex:none}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.field>label,.lab{font-size:14px;font-weight:500;color:var(--ink)}
.field small{color:var(--muted);font-size:13px}
.inp{min-height:var(--tap);padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);width:100%;font-size:17px}
.inp:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea.inp{padding:10px 14px;min-height:80px;resize:vertical}
.pin{font-size:30px;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;max-width:220px;padding-left:.5em}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row.sb{justify-content:space-between}
.msg{padding:12px 14px;border-radius:12px;font-size:15px;margin:0 0 14px}
.msg.err{background:var(--red-soft);color:#8a3322}
.msg.ok{background:var(--ok-soft);color:#3c5c23}
.msg.info{background:var(--accent-soft);color:#6b4510}

/* ── setup ───────────────────────────────────────────── */
.setup{max-width:640px;margin:0 auto}
.setup .hero{padding:10px 0 18px}
.setup .hero p{font-size:18px;color:var(--text);margin:12px 0 0}
.setup .card{padding:22px}
.choice{display:block;width:100%;text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:14px 16px;margin:0 0 10px}
.choice b{display:block;color:var(--ink);font-weight:600}
.choice span{font-size:14px;color:var(--muted)}
.qopts{display:grid;gap:8px}
@media (min-width:640px){.qopts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.goals{display:grid;gap:8px;margin:0 0 14px}
.goals .choice{margin:0}
@media (min-width:640px){.goals{grid-template-columns:repeat(2,minmax(0,1fr))}.goals .choice:last-child{grid-column:1/-1}}
.choice.q{margin:0;min-height:54px;font-weight:500;color:var(--ink);text-align:center;padding:10px 12px}
.choice.on{border-color:var(--accent);background:var(--accent-soft)}
.datebtn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 16px;font-size:18px;font-weight:500}
.datebtn svg{width:22px;height:22px;color:var(--muted)}

/* ── plan header ─────────────────────────────────────── */
.ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.ph .ttl{margin-right:auto;min-width:0}
.ph .ttl h2{font-size:clamp(20px,2.4vw,26px)}
.ph .ttl .eyebrow{margin-bottom:2px}
.ph .nav{display:flex;gap:6px;align-items:center}
.wsum{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;white-space:nowrap}
.pill b{color:var(--ink);font-weight:600}
.bar{height:8px;border-radius:99px;background:#E9EBEF;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.banner{padding:14px 16px;border-radius:16px;background:var(--accent-soft);color:#6b4510;margin:0 0 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner p{margin:0;flex:1;min-width:220px}

/* week view */
.wk{display:grid;gap:10px}
@media (min-width:900px){.wk{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}}
.day{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:64px}
@media (min-width:900px){.day{min-height:240px}}
.day.today{border:2px solid var(--accent);padding:9px}
.day.past{background:#FBFBFA}
.day.climb{background:var(--navy);border-color:var(--navy);color:#fff}
.dh{display:flex;align-items:center;gap:8px}
.dh .dn{font-weight:600;color:var(--ink);font-size:15px}
.day.climb .dn{color:#fff}
.dh .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:2px 8px;font-weight:600}
.dh .add{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px dashed #c9ccd3;background:none;display:grid;place-items:center;color:var(--muted);font-size:20px;line-height:1}
.dh .add:hover{border-style:solid;color:var(--ink)}
.rest{font-size:14px;color:var(--muted);padding:4px 2px}
.climbtxt{font-size:14px;opacity:.9}
.chip{display:flex;align-items:stretch;gap:0;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0;overflow:hidden;min-height:56px}
.chip:hover{border-color:#cfd2d8;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.chip .cb{width:6px;flex:none;background:var(--c,#999)}
.chip .ci{padding:7px 10px;flex:1;min-width:0}
.chip .cn{font-weight:600;font-size:15px;color:var(--ink);display:block;line-height:1.25}
.chip .ca{font-size:14px;color:var(--muted);display:block;line-height:1.3}
.chip .ck{width:30px;flex:none;display:grid;place-items:center;color:transparent}
.chip.done{background:var(--ok-soft);border-color:#cfe0bf}
.chip.done .ck{color:var(--ok)}
.chip.done .cn{text-decoration:none}
.chip.miss{opacity:.6}
.chip .ck svg{width:20px;height:20px}
@media (min-width:900px){.chip .cn{font-size:14px}.chip .ca{font-size:13px}.chip .ck{width:24px}}

/* month view */
.mo{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.mo .dw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#F1F2F4;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding:8px 0}
.mo .gr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mc{border-top:1px solid var(--line);border-left:1px solid var(--line);min-height:68px;padding:6px;background:none;border-right:0;border-bottom:0;text-align:left;display:flex;flex-direction:column;gap:3px;min-width:0}
.mc:nth-child(7n+1){border-left:0}
.mc.out{background:#FAFAF9;color:#B5B9C1}
.mc .md{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:4px}
.mc.out .md{color:#B5B9C1}
.mc.today .md span{background:var(--accent);color:var(--accent-ink);border-radius:99px;min-width:24px;height:24px;display:inline-grid;place-items:center;padding:0 4px}
.mc.climb{background:var(--navy)}.mc.climb .md{color:#fff}
.mc .dots{display:flex;flex-wrap:wrap;gap:3px}
.mc .dots i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.mc .dots i.d{box-shadow:0 0 0 2px var(--ok-soft),0 0 0 3.5px var(--ok)}
.mc .mm{display:none}
.mc .cl{font-size:11px;color:#FFD08A;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@media (min-width:760px){
  .mc{min-height:112px}
  .mc .dots{display:none}
  .mc .mm{display:block;font-size:12px;line-height:1.25;padding:3px 6px;border-radius:6px;background:color-mix(in srgb,var(--c) 14%,white);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .mc .mm.d{background:var(--ok-soft);border-left-color:var(--ok)}
}

/* ── trays ───────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(17,24,39,.42);z-index:60;opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.tray{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-radius:26px 26px 0 0;box-shadow:var(--shadow-lg);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);display:flex;flex-direction:column;transform:translateY(102%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tray.on{transform:none}
@media (min-width:760px){.tray{left:50%;width:640px;margin-left:-320px}}
.tray .th{display:flex;align-items:center;gap:12px;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.tray .th h3{flex:1;min-width:0}
.tray .th .sub{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:2px}
.tray .tb{overflow:auto;padding:16px 18px 0;-webkit-overflow-scrolling:touch}
.tray .end{margin:22px -18px 0;height:28px;background:#EEF0F3;border-top:1px solid var(--line);display:grid;place-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A0A5AE;padding-bottom:env(safe-area-inset-bottom)}
.sec{margin:0 0 22px}
.sec>.lab{display:block;margin:0 0 8px}
.sec h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:500}
.types{display:flex;flex-wrap:wrap;gap:8px}
.tc{border:2px solid var(--line);background:var(--surface);border-radius:999px;min-height:46px;padding:0 16px;display:flex;align-items:center;gap:8px;font-weight:500}
.tc i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.tc.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,white);color:var(--ink)}
.stp{display:flex;align-items:center;gap:10px}
.stp button{width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:28px;line-height:1;color:var(--ink);flex:none}
.stp button:active{background:var(--accent-soft)}
.stp .v{flex:1;text-align:center;min-width:0}
.stp .v input{width:100%;max-width:150px;border:0;text-align:center;font-size:34px;font-weight:600;color:var(--ink);background:none;font-variant-numeric:tabular-nums;padding:0}
.stp .v input:focus{outline:2px solid var(--accent);border-radius:10px}
.stp .v small{display:block;color:var(--muted);font-size:14px}
.dayrow{display:flex;align-items:center;gap:10px}
.dayrow .datebtn{flex:1;justify-content:center;gap:10px;white-space:nowrap}
.rnd.big{width:56px;height:56px}
.trow{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.tbox{display:flex;flex-direction:column;align-items:center;gap:4px;width:78px}
.tbox input{text-align:center;font-size:24px;font-weight:600;padding:0 6px;min-height:56px}
.tbox span{font-size:12px;color:var(--muted)}
.trow .btn{min-height:56px}
.hint{font-size:14px;color:var(--muted);margin:8px 0 0}
.lrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);min-height:60px}
.lrow:last-child{border-bottom:0}
.lrow .lt{flex:1;min-width:0}
.lrow .lt b{display:block;font-weight:500;color:var(--ink)}
.lrow .lt small{color:var(--muted);font-size:13px}
.acts{display:flex;flex-direction:column;gap:10px}
.acts .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── kit & checklist ─────────────────────────────────── */
.kh{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.kh .ttl{flex:1;min-width:220px}
.ring{--p:0;width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),#E5E7EB 0);display:grid;place-items:center;flex:none}
.ring b{width:68px;height:68px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--ink)}
.kc{margin:0 0 14px;overflow:hidden}
.kc>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;min-height:60px}
.kc>summary::-webkit-details-marker{display:none}
.kc>summary h3{flex:1}
.kc>summary .cnt{font-size:14px;color:var(--muted)}
.kc>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.kc[open]>summary::after{transform:rotate(-135deg)}
.kc .ki{padding:0 18px 8px}
.kr{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);min-height:62px}
.kr .kt{flex:1;min-width:0}
.kr .kt b{display:block;font-weight:500;color:var(--ink);line-height:1.3}
.kr .kt small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.st{min-height:42px;border-radius:999px;border:1px solid var(--line);background:var(--surface);padding:0 14px;font-size:14px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.st::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.st.need{color:var(--red);border-color:#efc9c0;background:var(--red-soft)}
.st.got,.st.have{color:var(--ok);border-color:#cfe0bf;background:var(--ok-soft)}
.st.hire{color:var(--navy-2);border-color:#c8d4e5;background:#EDF2F8}
.st.skip{color:var(--muted)}
.st.opt{color:var(--gold);border-color:#ecd7a8;background:var(--gold-soft)}
.cr{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:68px;border-top:1px solid var(--line)}
.cr:first-child{border-top:0}
.tick{width:46px;height:46px;border-radius:50%;border:2px solid #C9CDD4;background:var(--surface);display:grid;place-items:center;flex:none;color:transparent}
.tick svg{width:24px;height:24px}
.tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.cr .ct{flex:1;min-width:0}
.cr .ct b{display:block;font-weight:500;color:var(--ink);line-height:1.3}
.cr .ct small{color:var(--muted);font-size:13px}
.cr.done .ct b{color:var(--muted);text-decoration:line-through;text-decoration-color:#bbb}
.due{font-size:13px;font-weight:600;border-radius:99px;padding:4px 10px;white-space:nowrap}
.due.late{background:var(--red-soft);color:#8a3322}
.due.soon{background:var(--gold-soft);color:#7a4f10}
.due.later{background:#EEF0F3;color:var(--muted)}
.due.ok{background:var(--ok-soft);color:#3c5c23}

/* progress */
.wbars{display:flex;align-items:flex-end;gap:6px;height:120px;padding:8px 0}
.wbars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:11px;color:var(--muted)}
.wbars i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:#E2E5EA;position:relative;overflow:hidden}
.wbars i b{position:absolute;left:0;right:0;bottom:0;background:var(--ok)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--bg);border-radius:14px;padding:12px 14px}
.stat b{display:block;font-size:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
table.tt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
table.tt th{background:var(--navy);color:#fff;font-weight:500;text-align:left;padding:8px 10px;font-size:13px}
table.tt th:first-child{border-radius:10px 0 0 0}table.tt th:last-child{border-radius:0 10px 0 0}
table.tt td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.pb{font-size:11px;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:2px 7px;margin-left:6px}

/* date picker */
.dp .dph{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.dp .dph b{font-size:18px;color:var(--ink)}
.dp .dpg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.dp .dpg span{font-size:12px;color:var(--muted);padding:4px 0}
.dp .dpg button{aspect-ratio:1;border:0;border-radius:50%;background:none;font-size:16px;font-weight:500;color:var(--ink);max-height:52px}
.dp .dpg button:hover{background:var(--bg)}
.dp .dpg button.sel{background:var(--accent);color:var(--accent-ink)}
.dp .dpg button.td{box-shadow:inset 0 0 0 2px var(--accent)}
.dp .dpg button[disabled]{color:#C9CDD4;pointer-events:none}

/* ── runner (full screen, huge buttons) ──────────────── */
.rn{position:fixed;inset:0;z-index:80;background:#0F1A2B;color:#fff;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
.rn-top{display:flex;align-items:center;gap:12px}
.rn-top .rn-t{flex:1;min-width:0;font-size:16px;opacity:.8}
.rn-x{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:22px;flex:none}
.rn-clock{font-size:22px;font-variant-numeric:tabular-nums;font-weight:500;opacity:.9}
.rn-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:0;padding:8px 0}
.rn-step{font-size:15px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.rn-big{font-size:clamp(72px,22vw,170px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#FFD08A}
.rn-big.go{color:#9BE07F}.rn-big.hard{color:#FF8E73}
.rn-name{font-size:clamp(26px,6vw,44px);font-weight:500;line-height:1.15}
.rn-sub{font-size:17px;opacity:.75}
.rn-next{font-size:16px;opacity:.55;margin-top:6px}
.rn-prog{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;max-width:420px;margin-top:10px}
.rn-prog i{width:14px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.rn-prog i.d{background:#9BE07F}.rn-prog i.c{background:#FFD08A}
.rn-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.rn-alt button{min-height:72px;border-radius:20px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:20px;font-weight:500}
.rn-alt button.solo{grid-column:1/-1}
.rn-mega{min-height:clamp(150px,32vh,300px);border:0;border-radius:28px;background:var(--accent);color:var(--accent-ink);font-size:clamp(34px,8vw,56px);font-weight:700;width:100%;box-shadow:0 10px 40px rgba(217,138,28,.35);touch-action:manipulation}
.rn-mega:active{transform:scale(.985);filter:brightness(1.08)}
.rn-mega.go{background:#7CC36A;color:#0d2108;box-shadow:0 10px 40px rgba(124,195,106,.3)}
.rn-mega.stop{background:#F4F1EA;color:#1A1205}
.rn-mega *{pointer-events:none}
.rn-mega small{display:block;font-size:17px;font-weight:500;opacity:.75;margin-top:4px}

#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;font-size:15px;z-index:95;opacity:0;pointer-events:none;transition:all .2s;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}
@media (min-width:900px){#toast{bottom:30px}}
.foot{text-align:center;font-size:13px;color:var(--muted);margin:30px 0 0}
.foot a{color:var(--muted)}
.hide{display:none!important}
/* four boxes for a PIN (29 Oct 2026) */
.pinb{display:flex;gap:10px}
.pinb input{width:56px;height:64px;box-sizing:border-box;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:600 28px/1 inherit;font-family:inherit;text-align:center;padding:0;font-variant-numeric:tabular-nums;caret-color:var(--accent)}
.pinb input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pinpair{display:grid;gap:14px;margin:0 0 4px}
.pinpair .lab{display:block;margin:0 0 8px}
@media (min-width:560px){.pinpair{grid-template-columns:1fr 1fr}}
/* food diary (29 Oct 2026) */
.fsum{display:flex;gap:18px;align-items:flex-start;padding:16px;margin:0 0 14px}
.fsum .ring{width:96px;height:96px}
.fsum .ring b{font-size:20px}
.fst{flex:1;min-width:0}
.fbig{font-size:30px;font-weight:600;color:var(--ink);line-height:1.1}
.fbig small{font-size:15px;font-weight:500;color:var(--muted)}
.fst p{margin:4px 0 10px;font-size:14px}
.fb{margin:8px 0 0}
.fbh{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted);margin:0 0 4px}
.fbh b{color:var(--ink);font-weight:600}
.frow{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:0 0 14px}
.frow .lt{flex:1}
.frow .lt b{display:block;color:var(--ink)}
.frow .lt small{color:var(--muted)}
.stp.sm button{width:44px;height:44px;font-size:22px}
.stp.sm .v input{width:84px;font-size:22px}
.fm{padding:12px 14px;margin:0 0 12px}
.fmh{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.fmh h3{margin:0;flex:1;font-size:17px}
.fi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 2px;font:inherit;color:var(--text);cursor:pointer}
.fi:hover{background:var(--bg)}
.fi .fn{flex:1;min-width:0;color:var(--ink)}
.fi .fg{color:var(--muted);white-space:nowrap}
.fi .fk{min-width:52px;text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
.fi .fk small{font-weight:400;color:var(--muted);font-size:12px}
.fi .tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9A5B07;background:var(--accent-soft);border-radius:6px;padding:2px 6px;margin-left:4px}
.fe{margin:4px 0 2px;font-size:14px}
.nfg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
.nfg label span{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
@media (min-width:560px){.nfg{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.fsum{flex-direction:column;align-items:stretch}.fsum .ring{align-self:center}}
/* the working out, and 12·9 (29 Oct 2026) */
.fwork{margin:8px 0 12px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.fwork div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line)}
.fwork div b{color:var(--ink);font-weight:600;white-space:nowrap}
.fwork .tot{border-bottom:0;color:var(--ink);font-weight:600;padding-top:7px}
.fwork .tot b{font-size:16px}
.infob{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;background:none;color:var(--navy-2);font:italic 700 13px/1 Georgia,serif;cursor:pointer;vertical-align:middle;margin-left:4px;padding:0}
.c129{margin:0 0 14px}
.c129 .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c129l{margin:0 0 12px;padding-left:20px}
.c129l li{margin:0 0 6px}
/* rest days and fat-loss rate (29 Oct 2026) */
.seg.days button{padding-left:0;padding-right:0;min-width:0}
.seg.rates button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:auto;min-height:54px;padding:8px 4px;line-height:1.15}
.seg.rates button b{font-weight:600}
.seg.rates button small{font-size:12px;opacity:.75;margin:0}
/* new foods: label photo, checks, the shared list (29 Oct 2026) */
.nfcam{display:flex;align-items:center;justify-content:center;gap:8px}
.nfcam svg{width:20px;height:20px;flex:none}
.fi .tag.sh{color:#1D5C8A;background:#E3EFF8}
.msg.warn{background:#FDF0E1;color:#7A4508;border:1px solid #F2D2A8}
.flagt{width:100%;border-collapse:collapse;font-size:15px}
.flagt th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 8px 6px 0;border-bottom:1px solid var(--line)}
.flagt td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.flagt th:not(:first-child),.flagt td:not(:first-child){text-align:right}
/* the record (29 Oct 2026) */
.rng button{padding-left:4px;padding-right:4px;min-width:0;font-size:14px}
.rstats .stat small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.rstats .stat b small.of{display:inline;font-size:15px;font-weight:500;color:var(--muted);margin:0}
@media (min-width:760px){.rstats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rcard{padding:16px;margin:0 0 16px}
.rcard h3{margin:0 0 4px}
.rcard>p.muted{margin:0 0 10px;font-size:14px}
.rc{position:relative;width:100%;touch-action:pan-y}
.rc svg{display:block;overflow:visible}
.rc svg text{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.rc svg .g{stroke:var(--line);stroke-width:1}
.rc svg .cur{stroke:#9AA3B2;stroke-width:1;stroke-dasharray:3 3}
.rtip{display:none;position:absolute;top:-6px;transform:translateY(-100%);background:var(--ink);color:#fff;border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.4;pointer-events:none;white-space:nowrap;z-index:5;box-shadow:var(--shadow)}
.rtip b{display:block;font-weight:600;margin-bottom:2px}
.rtip span{display:block}
.rtip span.m{opacity:.75}
.rtip i,.rleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
.rleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;font-size:13px;color:var(--muted)}
.sw12,.sw9{padding:0 5px;border-radius:4px;color:var(--text)}
.sw12{background:rgba(217,138,28,.18)}.sw9{background:rgba(94,139,58,.16)}
.rtab{width:100%;border-collapse:collapse;font-size:14px}
.rtab th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.rtab td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.rtab td small{color:var(--muted)}
.rtab tr.nc td{color:#9AA3B2}
.rtab .tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9A5B07;background:var(--accent-soft);border-radius:6px;padding:2px 6px;margin-left:4px}
.rtab .tag.nct{color:#6B7280;background:#EEF0F3}
@media (max-width:640px){   /* each day becomes a small block: the date, then its figures two to a row */
  .rtab thead{display:none}
  .rtab,.rtab tbody{display:block}
  .rtab tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .rtab td{display:block;border:0;padding:0;white-space:normal}
  .rtab td:first-child{grid-column:1/-1;font-weight:600;color:var(--ink)}
  .rtab td[data-l]:not(:first-child)::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
}
@media print{
  .top,.tabs,.noprint,.foot,#toast{display:none!important}
  body{background:#fff!important;padding:0!important}
  .card{box-shadow:none!important;break-inside:avoid}
  .rtab tr{break-inside:avoid}
}
@media (max-width:480px){.rcard table.tt th,.rcard table.tt td{padding-left:6px;padding-right:6px}.rcard table.tt .pb{margin-left:4px;padding:2px 5px}}