:root{
  --paper:#EAEDE8; --panel:#F6F7F4; --ink:#1B211E; --muted:#6E7873;
  --rule:#D2D7CF; --met:#2E6B4F; --miss:#C4C0B6; --plum:#7B3F52;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);}
body{
  font-family:'Instrument Sans',-apple-system,system-ui,sans-serif;
  padding:max(20px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:560px;margin:0 auto;}

.datebar{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 4px;}
.date{font-family:'Newsreader',Georgia,serif;font-size:25px;line-height:1.1;font-weight:400;margin:0;}
.nav{display:flex;gap:4px;}
.navbtn{border:1px solid var(--rule);background:var(--panel);color:var(--muted);
  width:32px;height:32px;border-radius:4px;font-size:15px;cursor:pointer;line-height:1;}
.navbtn:disabled{opacity:.35;cursor:default;}
:focus-visible{outline:2px solid var(--plum);outline-offset:2px;}

.tally{font-size:13px;color:var(--muted);margin:0 0 18px;}
.tally b{color:var(--ink);font-weight:600;}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  padding:4px 14px;margin-bottom:18px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--rule);}
.row:last-child{border-bottom:none;}
.label{font-size:15px;font-weight:500;}
.sub{font-size:12px;color:var(--muted);margin-top:2px;}

.toggle{border:1px solid var(--rule);background:transparent;width:46px;height:28px;
  border-radius:14px;position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;}
.toggle[data-on="true"]{background:var(--met);border-color:var(--met);}
.knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s;}
.toggle[data-on="true"] .knob{transform:translateX(18px);}

.step{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.stepbtn{border:1px solid var(--rule);background:#fff;width:34px;height:32px;
  font-size:16px;cursor:pointer;color:var(--ink);line-height:1;font-family:inherit;}
.stepbtn:first-child{border-radius:4px 0 0 4px;}
.stepbtn:last-child{border-radius:0 4px 4px 0;}
.count{width:40px;text-align:center;font-family:'Newsreader',serif;font-size:19px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  height:32px;line-height:31px;background:#fff;}
.count[data-over="true"]{color:var(--plum);}

.seg{display:flex;flex-shrink:0;}
.segbtn{border:1px solid var(--rule);background:#fff;padding:7px 11px;font-size:13px;
  cursor:pointer;color:var(--muted);font-family:inherit;}
.segbtn+.segbtn{border-left:none;}
.segbtn:first-child{border-radius:4px 0 0 4px;}
.segbtn:last-child{border-radius:0 4px 4px 0;}
.segbtn[data-sel="true"]{background:var(--met);border-color:var(--met);color:#fff;}
.segbtn[data-sel="true"][data-bad="true"]{background:var(--plum);border-color:var(--plum);}

.h{font-size:12px;color:var(--muted);margin:0 0 8px;font-weight:500;}
.grid{display:grid;grid-template-columns:54px 1fr;gap:3px;align-items:center;}
.gname{font-size:11px;color:var(--muted);}
.gcells{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;}
.cell{aspect-ratio:1;border-radius:1.5px;background:transparent;border:1px solid var(--rule);}
.cell[data-s="met"]{background:var(--met);border-color:var(--met);}
.cell[data-s="miss"]{background:var(--miss);border-color:var(--miss);}
.cell[data-today="true"]{outline:1.5px solid var(--plum);outline-offset:1px;}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mcard{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:12px 14px;}
.mname{font-size:12px;color:var(--muted);}
.mval{font-family:'Newsreader',serif;font-size:34px;line-height:1.1;margin:2px 0 0;font-weight:400;}
.mval span{font-size:14px;color:var(--muted);margin-left:3px;}
.mdelta{font-size:12px;color:var(--muted);min-height:16px;}
.input{width:100%;margin-top:10px;border:1px solid var(--rule);border-radius:4px;
  padding:9px 10px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink);}

.note{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0;max-width:62ch;}
.foot{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.status{font-size:12px;color:var(--muted);}
.status[data-state="pending"]{color:var(--plum);}
.linkbtn{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;
  text-decoration:underline;font-family:inherit;padding:0;}

.gate{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;
  justify-content:center;padding:24px;}
.gate[hidden]{display:none;}
.gatebox{max-width:360px;width:100%;}
.primary{margin-top:10px;width:100%;border:1px solid var(--met);background:var(--met);
  color:#fff;padding:11px;border-radius:4px;font-size:15px;font-family:inherit;cursor:pointer;}
code{font-size:12px;background:var(--panel);padding:1px 4px;border-radius:3px;border:1px solid var(--rule);}

@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

.input.steps{width:92px;margin-top:0;text-align:right;flex-shrink:0;}

.tabs{display:flex;gap:2px;margin:0 0 16px;}
.tab{flex:1;border:1px solid var(--rule);background:#fff;padding:9px;font-size:14px;
  font-family:inherit;color:var(--muted);cursor:pointer;}
.tab:first-child{border-radius:4px 0 0 4px;}
.tab:last-child{border-radius:0 4px 4px 0;border-left:none;}
.tab[data-sel="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}

.lift{padding:14px 0;border-bottom:1px solid var(--rule);}
.lift:last-child{border-bottom:none;}
.lift-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.lift-last{font-size:12px;color:var(--muted);white-space:nowrap;}
.lift-cue{font-size:12px;color:var(--muted);margin:2px 0 9px;}
.lift-fields{display:flex;gap:8px;align-items:center;}
.lift-fields label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.lift-fields input{width:62px;margin-top:0;border:1px solid var(--rule);border-radius:4px;
  padding:7px 8px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink);}
.wallsit{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:14px;margin-top:14px;}
.timer{width:auto;flex-shrink:0;padding:10px 14px;}
.timer[data-running="true"]{background:var(--plum);border-color:var(--plum);}