/* The Bunting Bots. Light, flat, type led. Palette and rules in DESIGN.md. */

:root{
  --ink:#242422;          /* logo black */
  --red:#d2423d;          /* logo red */
  --lime:#d8e600;
  --yellow:#ffc61a;
  --purple:#674ea7;

  --paper:#ffffff;
  --wash:#f7f7f4;
  --wash2:#efefe9;
  --rule:#e4e4de;
  --rule-strong:#8e8e87;
  --muted:#6c6c66;

  /* Text that sits on an accent fill. Stays dark in both themes because yellow and
     lime are light in both. */
  --on-accent:#242422;
  --on-red:#ffffff;
  --shadow:rgba(36,36,34,.42);

  --r-ctl:4px;
  --r-card:6px;
  --tap:48px;
  --safe-b:env(safe-area-inset-bottom,0px);

  color-scheme:light;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#f0f0e8;
    --muted:#a5a59c;
    --paper:#191917;
    --wash:#212120;
    --wash2:#2b2b28;
    --rule:#3a3a36;
    --rule-strong:#6b6b62;
    --red:#f2645e;
    --on-red:#242422;
    --shadow:rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f0f0e8;
  --muted:#a5a59c;
  --paper:#191917;
  --wash:#212120;
  --wash2:#2b2b28;
  --rule:#3a3a36;
  --rule-strong:#6b6b62;
  --red:#f2645e;
  --on-red:#242422;
  --shadow:rgba(0,0,0,.62);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 var(--sans);
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(66px + var(--safe-b));
}
h1,h2,h3,h4{ margin:0; }
h1{ font-size:clamp(24px,4.6vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
h2{ font-size:11px; font-weight:800; letter-spacing:.085em; text-transform:uppercase;
    color:var(--muted); margin:20px 0 8px; }
h3{ font-size:17px; font-weight:700; line-height:1.25; }
h4{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin:16px 0 6px; }
p{ margin:6px 0; }
a{ color:var(--ink); }
strong{ font-weight:700; }
.muted{ color:var(--muted); font-size:14px; }
.mono{ font-family:var(--mono); font-size:12.5px; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.icon{ flex:0 0 auto; display:block; }

/* ---------- app bar ---------- */
.appBar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:10px 16px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brandLogo{ height:34px; width:auto; display:block; }
/* Two artworks rather than a filter, so the red stays a chosen colour in both themes. */
.brandLogo.onDark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brandLogo.onLight{ display:none; }
  :root:not([data-theme="light"]) .brandLogo.onDark{ display:block; }
}
:root[data-theme="dark"] .brandLogo.onLight{ display:none; }
:root[data-theme="dark"] .brandLogo.onDark{ display:block; }
:root[data-theme="light"] .brandLogo.onLight{ display:block; }
:root[data-theme="light"] .brandLogo.onDark{ display:none; }

/* theme switch */
.themeBtn{ min-width:44px; min-height:44px; display:grid; place-items:center;
  border:1px solid var(--rule-strong); border-radius:var(--r-ctl);
  background:var(--paper); color:var(--muted); cursor:pointer; }
.themeBtn:hover{ border-color:var(--ink); color:var(--ink); }
.authBox{ display:flex; align-items:center; gap:8px; }
.brandText{ display:flex; flex-direction:column; line-height:1.05; }
.brandName{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
.brandNum{ font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.05em; }
.topNav{ display:none; gap:2px; margin-left:10px; flex:1; }
.topTab{
  display:flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:var(--r-ctl); text-decoration:none;
  font-size:14px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent;
}
.topTab:hover{ color:var(--ink); background:var(--wash); }
.topTab.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--yellow); background:transparent; }
.authBox{ margin-left:auto; }

/* ---------- bottom tabs ---------- */
.bottomNav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--paper); border-top:1px solid var(--rule);
  padding-bottom:var(--safe-b);
}
.bottomTab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:58px; text-decoration:none; color:var(--muted); position:relative;
}
.bottomTab.on{ color:var(--ink); }
.bottomTab.on::before{
  content:''; position:absolute; top:0; left:22%; right:22%; height:3px;
  background:var(--yellow);
}
.bLabel{ font-size:11px; font-weight:700; letter-spacing:.01em; }

/* ---------- sub nav ---------- */
.subNav{ position:sticky; top:55px; z-index:20;
  display:flex; gap:0; background:var(--paper); border-bottom:1px solid var(--rule);
  padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.subTab{ padding:11px 14px; text-decoration:none; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; }
.subTab:hover{ color:var(--ink); }
.subTab.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--ink); }

/* ---------- video ---------- */
.videoFrame{ position:relative; width:100%; aspect-ratio:16/9;
  background:var(--wash2); color-scheme:light; border:1px solid var(--rule); border-radius:var(--r-ctl);
  overflow:hidden; }
.videoFrame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.credit{ font-size:14px; margin-top:12px; }
.credit a{ text-decoration:underline; }
.findings{ margin:0; padding-left:20px; }
.findings li{ font-size:14px; color:var(--muted); margin-bottom:10px; line-height:1.6; }

/* ---------- layout ---------- */
.view{ width:min(1080px,100%); margin:0 auto; padding:18px 16px 32px; }
.viewHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:18px; }
.card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-card);
  padding:18px; margin:0 0 16px; }
.card.wash{ background:var(--wash); }
.grid2{ display:grid; gap:16px; grid-template-columns:1fr; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:12px; }
.backLink{ display:inline-flex; align-items:center; gap:5px; margin-bottom:10px;
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; }
.backLink:hover{ color:var(--ink); }

/* ---------- buttons ---------- */
.btn{
  min-height:var(--tap); padding:11px 16px;
  border:1px solid var(--ink); border-radius:var(--r-ctl);
  background:var(--paper); color:var(--ink);
  font:600 15px/1.2 var(--sans); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{ background:var(--wash); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--yellow); border-color:var(--yellow); color:var(--on-accent); font-weight:800; }
.btn.primary:hover{ background:#ffd24d; }
.btn.danger{ border-color:var(--red); color:var(--red); }
.btn.danger:hover{ background:#fdf1f0; }
.btn.ghost{ border-color:var(--rule-strong); color:var(--muted); font-weight:600; }
.btn.ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn.big{ min-height:52px; font-size:16px; padding:14px 20px; }
.btn[disabled]{ cursor:not-allowed; background:var(--wash); color:var(--muted);
  border-color:var(--rule); }
.btnRow{ display:flex; gap:8px; flex-wrap:wrap; }
.iconBtn{
  min-width:44px; min-height:44px; display:grid; place-items:center;
  border:1px solid var(--rule-strong); border-radius:var(--r-ctl);
  background:var(--paper); color:var(--muted); cursor:pointer; flex:0 0 auto;
}
.iconBtn:hover{ border-color:var(--ink); color:var(--ink); }

.segRow{ display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--ink);
  border-radius:var(--r-ctl); overflow:hidden; width:fit-content; }
.seg{ min-height:42px; padding:9px 16px; border:0; border-right:1px solid var(--ink);
  background:var(--paper); color:var(--ink); font:600 14px/1 var(--sans); cursor:pointer; }
.seg:last-child{ border-right:0; }
.seg.on{ background:var(--yellow); color:var(--on-accent); font-weight:800; }
.seg[disabled]{ cursor:not-allowed; color:var(--muted); }
.seg.on[disabled]{ background:var(--wash); }

.switch{ display:inline-flex; align-items:center; gap:8px; font-size:14px;
  color:var(--muted); cursor:pointer; }
.switch input{ width:18px; height:18px; accent-color:var(--yellow); }

.chip{ padding:3px 8px; border-radius:3px; font-size:11.5px; font-weight:700;
  border:1px solid var(--rule); color:var(--muted); background:var(--paper);
  white-space:nowrap; letter-spacing:.02em; }
.chip.hot{ color:var(--on-red); background:var(--red); border-color:var(--red); }
.chip.warm{ color:var(--on-accent); background:var(--yellow); border-color:var(--yellow); }
.chip.cool{ color:var(--on-accent); background:var(--lime); border-color:var(--lime); }
.chip.off{ color:var(--red); border-color:var(--red); }

/* ---------- timer ---------- */
.timerCard{ text-align:center; border-width:1px; }
.statusLine{ display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); }
.statusLine .sep{ width:1px; height:12px; background:var(--rule); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); flex:0 0 auto; }
.clockWrap{ position:relative; padding:10px 0 4px; }
.bigClock{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-weight:700; line-height:.9; font-size:clamp(76px,25vw,190px); letter-spacing:-.04em; }
.countBadge{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink);
  font-family:var(--mono); font-weight:700;
  font-size:clamp(30px,9vw,64px); line-height:1;
  padding:6px 20px; border-radius:var(--r-ctl); opacity:0; color:var(--on-accent);
}
.countBadge.show{ opacity:1; }
.phaseLine{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); }
.bigBtnRow{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.bigBtn{ min-height:62px; border:1px solid var(--ink); border-radius:var(--r-ctl);
  font:800 16px/1 var(--sans); letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; background:var(--paper); }
.bigBtn.go{ background:var(--lime); color:var(--on-accent); border-color:var(--lime); }
.bigBtn.hold{ background:var(--yellow); color:var(--on-accent); border-color:var(--yellow); }
.bigBtn.stop{ background:var(--paper); }
.bigBtn[disabled]{ cursor:not-allowed; background:var(--wash); color:var(--muted);
  border-color:var(--rule); }
.keys{ font-size:12px; margin-top:12px; font-family:var(--mono); color:var(--muted); }
.kv{ display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--rule); font-size:14px; }
.kv span{ color:var(--muted); }
.kv strong{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; }
.log{ max-height:190px; overflow:auto; font-family:var(--mono); font-size:11.5px; line-height:1.7;
  background:var(--wash); border:1px solid var(--rule); border-radius:var(--r-ctl); padding:10px; }
.logItem{ color:var(--muted); }

/* ---------- tables ---------- */
.tableScroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-family:var(--mono);
  font-size:12.5px; font-variant-numeric:tabular-nums; }
th{ text-align:left; font-family:var(--sans); font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  padding:8px 10px; border-bottom:1px solid var(--ink); white-space:nowrap; }
td{ padding:7px 10px; border-bottom:1px solid var(--rule); white-space:nowrap; }
tbody tr:hover{ background:var(--wash); }

/* ---------- calendar ---------- */
.subCard{ background:var(--wash); border-color:var(--ink); }
.subCard h2{ margin-top:0; color:var(--ink); }
.subBtns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.howTo{ margin-top:16px; border-top:1px solid var(--rule); }
.howTo summary{ cursor:pointer; font-size:14px; font-weight:700; padding:12px 0 4px; }
.howBody h4{ margin-top:14px; }
.howBody p{ color:var(--muted); font-size:14px; }
.hintCard{ border-style:dashed; }

.monthHead{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:22px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--rule); }
.evGroup{ display:grid; gap:0; }
.evCard{ display:flex; align-items:flex-start; gap:14px;
  padding:15px 2px; border-bottom:1px solid var(--rule); }
.evCard.cancelled{ opacity:.55; }
.evCard.cancelled .evTitle{ text-decoration:line-through; }
.evIcon{ color:var(--muted); padding-top:2px; }
.evMain{ flex:1; min-width:0; }
.evTop{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.evDay{ font-size:16px; font-weight:700; }
.evTime{ font-family:var(--mono); font-size:14px; font-weight:600; margin:3px 0; }
.evAlt{ color:var(--muted); font-weight:400; font-size:12.5px; }
.evTitle{ font-size:14px; color:var(--muted); }
.evLoc{ display:inline-flex; align-items:center; gap:5px; font-size:13px;
  text-decoration:none; border-bottom:1px solid var(--rule); }
.evLoc:hover{ border-bottom-color:var(--ink); }
.evMeta{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.evGroup.dense .evCard{ padding:8px 2px; gap:10px; }
.evGroup.dense .evDay{ font-size:14px; }
.evGroup.dense .evTime{ font-size:12.5px; }
.evGroup.dense .evTitle,.evGroup.dense .evMeta,.evGroup.dense .evLoc,
.evGroup.dense .evIcon{ display:none; }

/* ---------- sessions and runs ---------- */
.sessionList,.runList,.personList{ display:grid; gap:0; }
.sessionCard{ display:flex; align-items:center; gap:14px; text-decoration:none;
  padding:15px 2px; border-bottom:1px solid var(--rule); }
.sessionCard:hover{ background:var(--wash); }
.chev{ color:var(--muted); }
.statRow{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); }
.stat{ background:var(--paper); padding:14px 12px; text-align:center; }
.stat span{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); }
.stat strong{ display:block; font-family:var(--mono); font-size:24px; font-weight:700;
  font-variant-numeric:tabular-nums; margin-top:4px; }

.runCard{ display:flex; gap:14px; align-items:flex-start;
  padding:14px 2px; border-bottom:1px solid var(--rule); }
.runSeq{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--muted);
  min-width:30px; padding-top:6px; }
.runMain{ flex:1; min-width:0; }
.runTop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.runScore{ font-family:var(--mono); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.runWho{ font-size:14px; font-weight:600; }
.runNotes{ font-size:14px; color:var(--muted); }
.tagRow{ display:flex; gap:5px; flex-wrap:wrap; margin:6px 0; }
.tag{ font-size:11px; font-weight:600; padding:2px 7px; border-radius:3px;
  background:var(--wash2); border:1px solid var(--rule); color:var(--muted); }

.personRow{ display:flex; align-items:center; gap:12px;
  padding:11px 2px; border-bottom:1px solid var(--rule); }
.personRow.inactive{ opacity:.55; }
.personMain{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.avatar{ width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font:800 13px/1 var(--sans);
  background:var(--yellow); color:var(--on-accent); border:1px solid var(--yellow); }
.addRow{ display:flex; gap:8px; flex-wrap:wrap; }
.addRow input{ flex:1; min-width:150px; }

/* ---------- forms ---------- */
input,select,textarea{
  width:100%; min-height:var(--tap); padding:11px 12px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:var(--r-ctl);
  font:400 16px/1.4 var(--sans);
}
textarea{ min-height:80px; resize:vertical; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--ink);
  box-shadow:0 0 0 2px var(--yellow); }
button:focus-visible,a:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }
.field{ display:block; margin:0 0 16px; }
.fieldLabel{ display:block; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.hint{ display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.more{ border-top:1px solid var(--rule); margin-top:4px; }
.more summary{ cursor:pointer; font-size:14px; font-weight:700; padding:12px 0; }

.pickRow{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.pickRow.wrap{ flex-wrap:wrap; overflow:visible; }
.pick{ min-height:44px; padding:10px 14px; flex:0 0 auto;
  border:1px solid var(--rule-strong); border-radius:var(--r-ctl);
  background:var(--paper); color:var(--ink);
  font:600 15px/1 var(--sans); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; }
.pick:hover{ border-color:var(--ink); }
.pick.on{ background:var(--yellow); border-color:var(--yellow); color:var(--on-accent); font-weight:800; }
.pick.small{ min-height:36px; padding:7px 10px; font-size:13px; }

.scoreBlock{ background:var(--wash); border:1px solid var(--rule);
  border-radius:var(--r-card); padding:16px; margin:0 0 16px; }
.bigTotal{ font-family:var(--mono); font-size:clamp(42px,12vw,64px); font-weight:700;
  font-variant-numeric:tabular-nums; text-align:center; line-height:1; margin:6px 0 12px; }
.compChips{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center;
  min-height:32px; margin-bottom:12px; }
.compChip{ padding:5px 10px; border-radius:3px; cursor:pointer;
  font:700 13px/1 var(--mono); background:var(--lime);
  border:1px solid var(--lime); color:var(--on-accent); }
.quickGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:6px; margin-bottom:12px; }
.quick{ min-height:50px; border-radius:var(--r-ctl); cursor:pointer;
  border:1px solid var(--rule-strong); background:var(--paper); color:var(--ink);
  font:700 17px/1 var(--mono); font-variant-numeric:tabular-nums; }
.quick:hover{ border-color:var(--ink); }
.quick:active{ background:var(--yellow); color:var(--on-accent); }

/* ---------- log this run prompt ---------- */
.logPrompt{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; background:var(--wash); border:1px solid var(--ink);
  border-radius:var(--r-card); padding:14px 16px; margin:0 0 16px; }
.logPrompt p{ margin:2px 0 0; }

/* ---------- stats ---------- */
.statSub{ display:block; font-size:11px; color:var(--muted); margin-top:2px; }
table.matrix td.progCell{ font-family:var(--mono); font-size:11.5px; max-width:230px;
  overflow:hidden; text-overflow:ellipsis; }
td.cell{ text-align:center; min-width:74px; }
td.cell .cellRate{ display:block; font-weight:700; font-size:13px; }
td.cell .cellRuns{ display:block; font-size:10.5px; color:var(--muted); }
td.cell.strong{ background:color-mix(in srgb, var(--lime) 34%, var(--paper)); }
td.cell.ok{ background:color-mix(in srgb, var(--yellow) 30%, var(--paper)); }
td.cell.weak{ background:color-mix(in srgb, var(--red) 24%, var(--paper)); }
td.cell.none{ background:var(--wash); }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
  font-size:12px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.sw{ width:13px; height:13px; border-radius:2px; border:1px solid var(--rule);
  display:inline-block; }
.sw.strong{ background:color-mix(in srgb, var(--lime) 34%, var(--paper)); }
.sw.ok{ background:color-mix(in srgb, var(--yellow) 30%, var(--paper)); }
.sw.weak{ background:color-mix(in srgb, var(--red) 24%, var(--paper)); }

.bars{ display:grid; gap:7px; }
.barRow{ display:grid; grid-template-columns:minmax(96px,34%) 1fr auto;
  align-items:center; gap:10px; }
.barLabel{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barTrack{ height:14px; background:var(--wash2); border-radius:2px; overflow:hidden; }
.barFill{ display:block; height:100%; background:var(--yellow); }
.barValue{ font-size:12px; color:var(--muted); min-width:64px; text-align:right; }

/* ---------- sheet ---------- */
.sheetWrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end;
  justify-content:center; background:var(--shadow); }
.sheet{ width:min(620px,100%); max-height:92vh; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--ink);
  border-radius:var(--r-card) var(--r-card) 0 0; }
.sheetHead{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--rule); }
.sheetHead h2{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em;
  text-transform:none; color:var(--ink); }
.sheetBody{ padding:18px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sheetFoot{ display:flex; gap:8px; justify-content:flex-end; padding:14px 18px;
  border-top:1px solid var(--rule); padding-bottom:calc(14px + var(--safe-b)); }
.sheetFoot .btn{ flex:1; }

/* ---------- misc ---------- */
.empty{ text-align:center; padding:34px 14px; color:var(--muted); }
.empty .btn{ margin-top:12px; }
.lockMsg{ display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:700; color:var(--ink); }
.toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(14px);
  bottom:calc(76px + var(--safe-b)); z-index:80;
  padding:11px 18px; border-radius:var(--r-ctl); font:700 14px/1.3 var(--sans);
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
  max-width:90vw; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.warn{ background:var(--red); border-color:var(--red); }

/* ---------- breakpoints ---------- */
@media (min-width:560px){
  .statRow{ grid-template-columns:repeat(4,1fr); }
  .sheet{ border-radius:var(--r-card); }
  .sheetWrap{ align-items:center; padding:16px; }
  .sheetFoot .btn{ flex:0 0 auto; min-width:120px; }
}
@media (min-width:860px){
  .subNav{ padding:0 24px; }
  .topNav{ display:flex; }
  .bottomNav{ display:none; }
  body{ padding-bottom:0; }
  .grid2{ grid-template-columns:1fr 1fr; }
  .view{ padding:26px 24px 48px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }