@font-face{font-family:"Atkinson";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/atkinson-700.woff2) format("woff2")}
@font-face{font-family:"Barlow SC";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow SC";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow SC";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-700.woff2) format("woff2")}

:root{
  --bg:#edf1f5; --surface:#fff; --surface2:#f6f8fa; --ink:#11233b; --muted:#566779; --line:#d2dae3;
  --brand:#0B1F33; --brand-ink:#fff; --link:#0B6B8F; --accent:#09769E; --accent-bg:#e1f3f9;
  --save:#0b7a56; --save-bg:#dff2e9; --save-bar:#1aa174;
  --goal:#bf3508; --goal-bg:#fbe6dc; --goal-bar:#e0562a;
  --warn:#8a5200; --warn-bg:#fff0d0; --warn-bar:#e0a42b;
  --miss:#9a4a06; --miss-bg:#fdebd0;
  --shadow:0 1px 2px rgba(17,35,59,.08),0 4px 14px rgba(17,35,59,.06);
  --r:12px; --nav-h:64px;
  --display:"Barlow SC","Arial Narrow",system-ui,sans-serif; --body:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1620; --surface:#13212d; --surface2:#182937; --ink:#e7eef6; --muted:#9db0c3; --line:#26394b;
    --brand:#0B7396; --brand-ink:#fff; --link:#8fdcf5; --accent:#4CC9F0; --accent-bg:#0f2f3d;
    --save:#46cb9a; --save-bg:#103228; --save-bar:#2fb685;
    --goal:#ff8d5e; --goal-bg:#3b2017; --goal-bar:#f0683a;
    --warn:#f4b64f; --warn-bg:#392c10; --warn-bar:#d9a038; --miss:#f4b64f; --miss-bg:#3b2a10;
    --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0b1620; --surface:#13212d; --surface2:#182937; --ink:#e7eef6; --muted:#9db0c3; --line:#26394b;
    --brand:#0B7396; --brand-ink:#fff; --link:#8fdcf5; --accent:#4CC9F0; --accent-bg:#0f2f3d;
    --save:#46cb9a; --save-bg:#103228; --save-bar:#2fb685;
    --goal:#ff8d5e; --goal-bg:#3b2017; --goal-bar:#f0683a;
    --warn:#f4b64f; --warn-bg:#392c10; --warn-bar:#d9a038; --miss:#f4b64f; --miss-bg:#3b2a10;
    --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
body.modal-open{overflow:hidden}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.005em;line-height:1.15;margin:0}
h1{font-size:30px} h2{font-size:22px;margin:28px 0 10px} h3{font-size:18px;margin:16px 0 6px}
p{margin:0 0 10px}
a{color:var(--link)}
.muted{color:var(--muted)} .hint{color:var(--muted);font-size:14px;margin:4px 0 10px}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row{display:flex;align-items:center}.row.gap{gap:10px}.row.between{justify-content:space-between}.row.end{justify-content:flex-end}.row.wrap{flex-wrap:wrap}.row.center{align-items:center}
.gap{gap:10px}

/* ---------- shell ---------- */
#app{min-height:100vh;min-height:100dvh}
.nav{position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.nav .brand{display:none}
.nav-ver{display:none}
.nav-i{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--nav-h);color:var(--muted);text-decoration:none;font:600 13px var(--display);letter-spacing:.02em}
.nav-i svg{opacity:.85}
.nav-i.on{color:var(--link)}
.nav-i.on svg{opacity:1}
main{display:block;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px);max-width:1200px;margin:0 auto}
@media (min-width:900px){
  #app{display:grid;grid-template-columns:200px 1fr}
  .nav{position:sticky;top:0;height:100vh;height:100dvh;flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:18px 10px;align-self:start;gap:4px}
  .nav .brand{display:flex;align-items:center;gap:10px;font:700 21px var(--display);padding:4px 10px 18px}
  .brand-t{display:flex;flex-direction:column;line-height:1.05}.brand-t small{font:600 10px var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .nav .brand img{border-radius:8px}
  .nav-ver{display:block;margin-top:auto;padding:8px 12px;font:600 13px var(--display);color:var(--muted);text-decoration:none}
  .nav-ver:hover{color:var(--link)}
  .nav-i{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:0 12px;border-radius:10px;font-size:17px}
  .nav-i.on{background:var(--accent-bg)}
  main{padding:26px 28px 40px;width:100%}
}
.page-head{margin-bottom:14px}
.offline-pill{position:fixed;z-index:30;top:calc(env(safe-area-inset-top) + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font:600 14px var(--display);padding:4px 12px;border-radius:99px;display:none}
body.offline .offline-pill{display:block}

/* ---------- controls ---------- */
.btn{font:600 16px var(--display);letter-spacing:.01em;min-height:44px;padding:0 16px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.danger{color:var(--goal);border-color:var(--goal)}
.btn.sm{min-height:34px;padding:0 12px;font-size:15px}
.btn.big{min-height:52px;font-size:18px;padding:0 22px}
.icon-btn{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;width:44px;height:44px;cursor:pointer;border-radius:8px}
.icon-btn:hover{background:var(--surface2);color:var(--ink)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],select,textarea{font:16px var(--body);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:0 12px;min-height:44px;width:100%}
textarea{padding:10px 12px;line-height:1.4;resize:vertical}
select{appearance:auto}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field-l{font:600 15px var(--display);color:var(--muted);letter-spacing:.02em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:center;margin-top:8px}.check input{width:22px;height:22px}
.chips{display:flex;gap:8px;margin:6px 0 14px}
.chip{font:600 15px var(--display);min-height:40px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.pill{font:600 13px var(--display);padding:3px 10px;border-radius:99px;white-space:nowrap}
.pill-draft{background:var(--warn-bg);color:var(--warn)}.pill-sub{background:var(--save-bg);color:var(--save)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg-b{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;padding:4px 6px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;min-width:0}
.seg-l{font:700 20px var(--display)}.seg-s{font:500 13px var(--body);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg-b.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.seg-b.on .seg-s{color:rgba(255,255,255,.85)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{margin-top:0}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn-bar);border-radius:var(--r);padding:12px 14px;margin:0 0 14px}
.warn{background:var(--warn-bg);border:1px solid var(--warn-bar);border-radius:var(--r);padding:10px 14px;margin:12px 0}
.warn ul{margin:6px 0 0;padding-left:20px}
.ok-line{color:var(--save);font-weight:700}
.empty{text-align:center;padding:40px 16px;max-width:520px;margin:0 auto}
.empty h2{margin-top:0}
.empty .row{justify-content:center}

/* ---------- match list ---------- */
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.mcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.mcard:hover{border-color:var(--accent)}
.mc-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.mc-top h3{margin:0;font-size:20px}
.mc-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}.mc-stats b{font:700 20px var(--display);color:var(--ink)}
.goal-n,.mc-stats .goal-n b{color:var(--goal)}

/* ---------- match screen ---------- */
.mhead{display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;align-items:center;margin-bottom:8px}
.mhead .back{grid-area:1/1;font:600 16px var(--display);text-decoration:none;min-height:40px;display:flex;align-items:center}
.mhead .pill{grid-area:1/2}.mhead .btn{grid-area:1/3;min-height:40px}.mhead .mtitle{grid-area:2/1/3/4}
.mtitle h1{font-size:26px}.mtitle p{margin:0;color:var(--muted);font-size:14px}
.subtabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:14px;overflow-x:auto}
.subtab{font:600 17px var(--display);padding:10px 11px;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.subtab.on{color:var(--ink);border-bottom-color:var(--accent)}
.cap-top{display:grid;gap:10px;margin-bottom:14px}
.keeper-sel{width:auto;min-width:180px;flex:1;max-width:300px}
.cap-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.cap-grid>*{min-width:0}
@media (min-width:900px){.cap-grid{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start}.cap-top{grid-template-columns:minmax(260px,420px) 1fr;align-items:center}}
.wizard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.wizard.is-locked{opacity:.5;pointer-events:none}
.rail{list-style:none;margin:0 0 12px;padding:8px 0 4px;display:flex;position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.rail-i{flex:1 1 0;position:relative;min-width:0}
.rail-i::before{content:"";position:absolute;left:-50%;right:50%;top:12px;height:3px;background:var(--line)}
.rail-i:first-child::before{display:none}
.rail-i.done::before,.rail-i.cur::before{background:var(--accent)}
.rail-i button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;cursor:pointer;padding:0 2px 4px;text-align:center}
.rail-i button::before{content:"";position:relative;z-index:1;width:26px;height:26px;border-radius:50%;background:var(--surface);border:3px solid var(--line);flex:none}
.rail-i.done button::before{background:var(--accent);border-color:var(--accent)}
.rail-i.cur button::before{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.rail-l{font:600 13px var(--display);color:var(--muted);letter-spacing:.02em}
.rail-i.cur .rail-l{color:var(--ink)}
.rail-v{font:500 12px var(--body);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prompt{font:700 22px var(--display);margin:6px 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.opt{font:600 18px/1.15 var(--display);text-align:left;min-height:68px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);border-left-width:6px;background:var(--surface2);color:var(--ink);cursor:pointer;display:flex;align-items:center;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.opt:active{transform:scale(.985);background:var(--accent-bg);border-color:var(--accent)}
.opt.picked{background:var(--accent-bg);border-color:var(--accent)}
.opt.c-0{border-left-color:var(--save-bar)}.opt.c-1{border-left-color:var(--warn-bar)}.opt.c-2{border-left-color:var(--goal-bar)}.opt.c-3{border-left-color:var(--muted)}
.opt.goal{border-left-color:var(--goal-bar);background:var(--goal-bg)}
.opt.sug{box-shadow:0 0 0 3px var(--accent-bg),inset 0 0 0 1.5px var(--accent)}
.opt.sug span::after{content:"  suggested";font:500 13px var(--body);color:var(--accent)}
@media (min-width:900px){.opt{min-height:76px;font-size:20px}}
.live{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.live h3{margin-top:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpi{background:var(--surface2);border-radius:10px;padding:8px 6px;text-align:center}
.kpi-v{font:700 28px/1 var(--display);font-variant-numeric:tabular-nums}.kpi-l{font-size:12px;color:var(--muted);line-height:1.15}
.kpi.good .kpi-v{color:var(--save)}.kpi.bad .kpi-v{color:var(--goal)}
.recent{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.recent-b{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:8px 10px;border-radius:10px;background:var(--surface2);cursor:pointer;font-size:14px}
.recent-b:disabled{cursor:default}
.recent-b b{font:700 16px var(--display);grid-row:span 2;align-self:center}
.recent-b .muted{grid-column:2}
.tag-goal,.tag-stop{font:700 12px var(--display);font-style:normal;padding:2px 8px;border-radius:99px;grid-row:span 2;align-self:center;grid-column:3}
.tag-goal{background:var(--goal-bg);color:var(--goal)}.tag-stop{background:var(--save-bg);color:var(--save)}
.qh{display:flex;justify-content:space-between;align-items:baseline}

/* ---------- circle diagram ---------- */
.cd-wrap{max-width:560px;margin:8px auto 4px}
.cd{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.cd-pitch{fill:var(--surface2)}
.cd-sec{fill:var(--accent-bg);stroke:var(--surface);stroke-width:2;cursor:pointer;transition:fill .1s}
.cd-sec:hover{fill:var(--accent);fill-opacity:.35}
.cd-sec:active,.cd-sec.picked{fill:var(--accent);fill-opacity:.55}
.cd-sec.off{fill:var(--line);cursor:not-allowed}
.cd-sec.map{fill:var(--accent);cursor:default;stroke:var(--surface2)}
.cd-sec:focus-visible{outline:none;stroke:var(--ink);stroke-width:3}
.cd-line{stroke:var(--ink);stroke-width:2.5;opacity:.75;pointer-events:none}
.cd-goal{fill:var(--ink);opacity:.8;pointer-events:none}
.cd-spot{fill:var(--ink);opacity:.7;pointer-events:none}
.cd-gl{fill:var(--bg);font:700 10px var(--display);pointer-events:none}
.cd-t{fill:var(--ink);font:700 17px var(--display);pointer-events:none}
.cd-t.cd-n{font-size:26px}.cd-g{fill:var(--goal);font:700 14px var(--display)}
.cd-maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:8px}
.cd-fig{margin:0}.cd-fig figcaption{text-align:center;font:600 15px var(--display);color:var(--muted)}
.entry-pick .seg{margin-bottom:6px}.entry-pick .seg-b{min-height:44px}.entry-pick .seg-l{font-size:16px}.entry-pick .hint{margin:0}
/* ---------- tables ---------- */
.tscroll{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{font:600 13px var(--display);color:var(--muted);letter-spacing:.03em;background:var(--surface2);white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody th{font-weight:400}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl.stat th:first-child{min-width:150px}
.tbl .bar{width:22%;min-width:70px}
.row-goal td{background:var(--goal-bg)}.row-inc td{background:var(--warn-bg)}
.small{color:var(--muted);font-style:italic;opacity:.8}
.small-note{color:var(--muted);font-style:italic}
.mb{display:flex;height:12px;border-radius:3px;overflow:hidden;background:var(--surface2)}
.mb i,.b-save{background:var(--save-bar)}.mb i.b-goal,.b-goal{background:var(--goal-bar)}.b-warn{background:var(--warn-bar)}
.tbl.edit td{padding:4px 6px}.tbl.edit input.in-num{width:64px}.tbl.edit input.in-text{min-width:240px}.tbl.edit select{min-width:170px}
.tbl.edit input,.tbl.edit select{min-height:38px}
.acc{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;padding:0 14px;background:var(--surface)}
.acc summary{font:600 18px var(--display);cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px}
.acc[open]{padding-bottom:14px}
.listed{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px}.listed li{display:flex;gap:6px;align-items:center}
.chips-list{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px}
.chips-list li{display:flex;align-items:center;gap:2px;background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:0 4px 0 14px}
.chips-list .icon-btn{width:36px;height:36px;font-size:20px}

/* ---------- dashboard & review ---------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 2px;margin-bottom:16px}
.filters .btn{margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:8px 0 6px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.tile-l{font:600 14px var(--display);color:var(--muted);letter-spacing:.02em}
.tile-v{font:700 38px/1.1 var(--display);font-variant-numeric:tabular-nums;margin:2px 0}
.tile-v.long{font-size:28px;line-height:1.25;padding:6px 0}
.tile-s{font-size:13px;color:var(--muted);line-height:1.3}
.tile.main{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.tile.main .tile-l,.tile.main .tile-s{color:rgba(255,255,255,.82)}
.tile.main .small{color:rgba(255,255,255,.7)}
.tile.good .tile-v{color:var(--save)}.tile.bad .tile-v{color:var(--goal)}.tile.warn .tile-v{color:var(--warn)}
.cols2{display:grid;gap:0 20px;grid-template-columns:minmax(0,1fr)}
.cols2>*{min-width:0}
@media (min-width:1360px){.cols2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.chart-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 6px}
.chart{display:block}
.chart .grid-l{stroke:var(--line);stroke-width:1}.chart .ax{fill:var(--muted);font:12px var(--body)}.chart .ax2{fill:var(--muted);font:11px var(--body);opacity:.8}
.chart .val{fill:var(--ink);font:700 13px var(--display)}.chart .val.small{fill:var(--muted);font-style:italic;font-weight:500}
.f-save{fill:var(--save-bar)}.f-goal{fill:var(--goal-bar)}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;margin:8px 0 4px;font-size:14px}.legend li{display:flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.stack-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;background:var(--surface2)}
.stack-bar i{display:flex;align-items:center;justify-content:center;color:#fff;font:700 14px var(--display);min-width:0}
.review .print-head{display:none}
ol.plain,ul.plain{margin:0 0 10px;padding-left:22px}ol.plain li,ul.plain li{margin-bottom:6px}
.notes{white-space:pre-wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.form{max-width:640px}.form h2{margin-top:24px}

/* ---------- toasts & modals ---------- */
#toasts{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 40px);display:flex;justify-content:center;z-index:60;pointer-events:none;padding:0 12px}
@media (min-width:900px){#toasts{top:24px;left:200px}}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 24px rgba(0,0,0,.3);font-size:15px;max-width:520px}
.toast-act{font:700 15px var(--display);background:none;border:0;color:var(--accent);filter:brightness(1.35);cursor:pointer;min-height:40px;padding:0 10px}
.modal-back{position:fixed;inset:0;z-index:50;background:rgba(8,16,26,.55);display:flex;align-items:flex-end;justify-content:center}
@media (min-width:600px){.modal-back{align-items:center}}
.modal{background:var(--surface);width:100%;max-width:520px;max-height:92vh;max-height:92dvh;overflow:auto;border-radius:18px 18px 0 0;padding:6px 18px calc(18px + env(safe-area-inset-bottom))}
@media (min-width:600px){.modal{border-radius:18px}}
.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:12px 0 6px}
.modal-msg{margin:8px 0}
/* Looking at someone else's file: nothing is saved */
.viewbar{position:sticky;top:0;z-index:30;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--warn-bg);color:var(--ink);border-bottom:2px solid var(--warn-bar);padding:10px 16px}
.viewbar .vb-name{color:var(--muted);overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0 0 12px}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
@media print{
  :root{--bg:#fff;--surface:#fff;--ink:#000;--line:#bbb;--muted:#444}
  body{background:#fff;font-size:11pt}
  .nav,.subtabs,.mhead,.no-print,.banner,.viewbar,#toasts,#modals,.offline-pill,.skip{display:none!important}
  main{padding:0;max-width:none}
  .review .print-head{display:block;margin-bottom:10px}
  .tile,.tscroll,.card{box-shadow:none;break-inside:avoid}
  .tile.main{background:#fff;color:#000;border:2px solid #000}.tile.main .tile-l,.tile.main .tile-s{color:#333}
  .tscroll{overflow:visible}
  h2{break-after:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.cd-ring{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:5 4;opacity:.8;pointer-events:none}
.cd-t.sz{font-size:11px}
.cd-sz .cd-ln{pointer-events:none}
/* ---------- export this goalkeeper ---------- */
.kx-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:3px solid var(--brand);padding-bottom:8px;margin-bottom:8px}
.kx-head h1{margin:0}.kx-sub{margin:2px 0 0;color:var(--muted)}
.kx-brand{margin:0;text-align:right;font:700 18px var(--display);color:var(--brand);white-space:nowrap}.kx-brand span{font:400 13px var(--body);color:var(--muted)}
.kx-grid{display:grid;gap:0 20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.kx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kx-foot{font-size:13px;margin-top:10px}.kx-so{margin:6px 0}
.kx-drafts{grid-column:1/-1}
.kreport{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kreport .print-head{display:none}
@media print{
  @page{size:A4;margin:9mm}
  .kreport{border:0;padding:0;font-size:8.5pt;line-height:1.25}
  .kreport h1{font-size:18pt}.kreport h2{font-size:10pt;margin:6px 0 3px}
  .kreport .kx-sub,.kreport .kx-foot{font-size:8pt}
  .kreport .kx-tiles{grid-template-columns:repeat(4,1fr);gap:5px;margin:4px 0}
  .kreport .tile{padding:4px 7px}.kreport .tile-l{font-size:8.5pt}.kreport .tile-v{font-size:16pt}.kreport .tile-v.long{font-size:13pt;padding:2px 0}.kreport .tile-s{font-size:7.5pt}
  .kreport .kx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.kreport .kx-grid:has(.tbl){grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
  .kreport .tbl{font-size:8pt}.kreport .tbl th,.kreport .tbl td{padding:1px 4px}
  .kreport .stack-bar{height:20px}.kreport .legend{font-size:8pt;margin:3px 0}
  .kreport ol.plain{margin:0;padding-left:16px}.kreport ol.plain li{margin-bottom:2px}
  .kreport .cd-maps{grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
  .kreport .cd-fig svg{max-height:150px;width:100%}.kreport .cd-fig figcaption{font-size:8pt}
  .kreport .tscroll{overflow:visible}
  .kreport .kx-grid .tbl{width:100%;table-layout:fixed;font-size:7.5pt}.kreport .kx-grid .tbl th:first-child{width:38%}.kreport .kx-grid .tbl th,.kreport .kx-grid .tbl td{padding:1px 2px}.kreport .kx-grid .tbl th.num{white-space:nowrap;font-size:7pt}.kreport .kx-grid .tbl th:nth-child(2),.kreport .kx-grid .tbl td.bar{display:none}
  .kreport .tbl th[scope=row]{white-space:normal;word-break:break-word}
  .kreport section{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.install-card{border:2px solid var(--brand,#0F3A6E)}
.install-card .steps{margin:0 0 12px;padding-left:22px}
.install-card .steps li{margin:0 0 8px}
.install-card .btn.big{width:100%;justify-content:center}

.form-msg{margin:0 0 12px;color:var(--goal);font-weight:600}
.form-msg[hidden]{display:none}
.idea-card .btn{margin-top:4px}
.idea-gap{height:16px}
.idea-done h3{margin:0 0 6px}
.cd-ln{font:700 10px var(--body);fill:var(--muted);letter-spacing:.06em;pointer-events:none}
.seg#nm-format,.seg#setup-format{margin-bottom:10px}

/* ---------- set-up guide ---------- */
.guide-list{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:12px}
.guide-step{display:flex;gap:12px;align-items:flex-start}
.guide-tick{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.guide-step.done .guide-tick{background:var(--save);border-color:var(--save);color:#fff}
.guide-step.done strong{color:var(--muted);text-decoration:line-through}
.guide-body p{margin:4px 0 8px}
.guide-body .btn{margin-right:8px}

/* ---------- help tab ---------- */
.help-sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.help-sec>summary::-webkit-details-marker{display:none}
.help-sec>summary h2{margin:0}
.help-sec>summary::after{content:"+";font:700 26px var(--display);color:var(--link);transition:transform .15s}
.help-sec[open]>summary::after{transform:rotate(45deg)}
.help-dl{margin:12px 0}
.help-dl dt{font-weight:700;margin-top:12px}
.help-dl dd{margin:2px 0 0;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:12px 0}
.help-table{border-collapse:collapse;width:100%;min-width:480px}
.help-table th,.help-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.help-table th{background:var(--surface2)}

/* ---------- trial ---------- */
fieldset.form{border:0;padding:0;margin:0;min-width:0}
.trial-line{margin:0 0 12px}
.banner.trial-ended{background:var(--bad-bg,#fdecea);border-color:var(--bad-bar,#c0392b)}
#licence-key{width:100%;font:14px/1.4 ui-monospace,monospace}

/* ================================================================
   Time notes, Quick log, and a layout that fits any handset.
   Nothing here names a phone: it follows the visible height (dvh), the safe areas around notches and gesture bars,
   and the screen's shape. The action buttons stay in view; only a list in the middle can ever scroll.
   ================================================================ */
.tnote{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;background:var(--warn-bg);border:1px solid var(--warn-bar);border-radius:10px;padding:6px 10px;font-size:14px;line-height:1.3}
.tnote .tn-t{flex:1 1 170px}
.tn-min{display:flex;align-items:center;gap:6px;font-size:14px}.tn-min input{width:76px;min-height:36px}
.dev-box{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.4 ui-monospace,monospace;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 12px;max-height:140px;overflow:auto}
.tag-err{background:var(--miss-bg);color:var(--miss)}
.tbl td.min{white-space:nowrap}
.time-split h2{margin-top:24px}

/* Action buttons stay in view on the step-by-step capture */
.wiz-actions{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px);z-index:6;background:var(--surface);padding:8px 0 2px;margin-top:6px;border-top:1px solid var(--line);flex-wrap:wrap}
.q-style{margin-left:auto}
@media (min-width:900px){.wiz-actions{bottom:0}}
@media (max-width:899px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .opt{min-height:56px;font-size:16px;padding:8px 10px}
}

/* ---------- Quick log ---------- */
.quick{display:flex;flex-direction:column;gap:8px}
.q-ctx{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.q-chip{font:700 15px var(--display);min-height:36px;border-radius:99px;padding:0 14px;border:1.5px solid var(--accent);background:var(--accent-bg);color:var(--ink);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick .prompt{margin:0}
.q-body{display:flex;flex-direction:column;gap:10px;min-height:0}
.q-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0}
.q-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:96px;min-width:0;border-radius:14px;border:2px solid var(--line);border-top-width:10px;padding:8px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;overflow:hidden}
.q-btn:active{transform:scale(.985)}
.q-t{font:700 26px/1 var(--display);overflow-wrap:anywhere}.q-s{font:500 13px/1.2 var(--body)}
.q-save{background:var(--save-bg);border-color:var(--save-bar);color:var(--save)}
.q-wide{background:var(--surface2);border-color:var(--muted);color:var(--ink)}
.q-goal{background:var(--goal-bg);border-color:var(--goal-bar);color:var(--goal)}
.q-miss{background:var(--miss-bg);border-color:var(--miss);color:var(--miss)}
.q-more,.q-done{width:100%;flex:none}
.q-done{min-height:52px}
.q-actions{display:flex;gap:8px;align-items:center;justify-content:flex-start;position:static;border-top:0;padding:0;margin:0;background:none}
.quick .entry-pick .hint{font-size:13px}

/* ---------- phones, portrait: Quick log fits the screen ---------- */
@media (max-width:899px) and (orientation:portrait), (max-width:899px) and (min-height:521px){
  body.cap-fit #app{height:100vh;height:100dvh;overflow:hidden}
  body.cap-fit main{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:calc(env(safe-area-inset-top) + 6px) 10px calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px)}
  body.cap-fit main>.page{flex:1;min-height:0;display:flex;flex-direction:column}
  body.cap-fit .mhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:2px}
  body.cap-fit .mhead .back,body.cap-fit .mhead .btn{min-height:36px}
  body.cap-fit .mhead .mtitle{order:2;flex:1 1 0;min-width:0}
  body.cap-fit .mhead .back{order:1}body.cap-fit .mhead .pill{order:3}body.cap-fit .mhead .btn{order:4}
  body.cap-fit .mtitle h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.cap-fit .mtitle p{display:none}
  body.cap-fit .subtabs{margin-bottom:6px;flex:none}
  body.cap-fit .subtab{padding:6px 10px;font-size:16px}
  body.cap-fit .mbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
  /* the message sits over the tally strip, never over the half tabs, keeper or buttons */
  body.cap-fit #toasts{top:auto;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px)}
  body.cap-fit .cap-top{display:flex;flex-wrap:wrap;gap:6px;margin:0;flex:none}
  body.cap-fit .cap-top .seg{flex:0 0 auto}
  body.cap-fit .seg-b{min-height:40px;padding:2px 12px}body.cap-fit .seg-s{display:none}
  body.cap-fit .cap-kp{flex:1 1 190px;flex-wrap:nowrap;min-width:0}
  body.cap-fit .kp-l{display:none}
  body.cap-fit .keeper-sel{min-width:0;max-width:none;min-height:40px}
  body.cap-fit .cap-kp .btn{min-height:40px;padding:0 12px}
  body.cap-fit .tnote{flex:1 1 100%}
  body.cap-fit .cap-grid{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
  body.cap-fit .wizard.quick,body.cap-fit .wizard.detail{flex:1;min-height:0;padding:8px 10px;width:100%;max-width:640px;margin:0 auto}
  body.cap-fit .wizard.detail{display:flex;flex-direction:column;gap:6px}
  body.cap-fit .detail .prompt{margin:0;font-size:19px}
  body.cap-fit .detail .rail{position:static;margin:0;padding:2px 0 2px;flex:none}
  body.cap-fit .detail .rail-i::before{top:9px}
  body.cap-fit .detail .rail-i button::before{width:18px;height:18px;border-width:2px}
  body.cap-fit .detail .rail-l{font-size:12px}body.cap-fit .detail .rail-v{font-size:11px}
  body.cap-fit .d-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
  body.cap-fit .d-body>.grid{margin:0;align-content:start}
  body.cap-fit .detail .wiz-actions{position:static;flex:none;border-top:1px solid var(--line);padding:6px 0 0;margin:0}
  body.cap-fit .detail .wiz-actions .btn{min-height:40px}
  body.cap-fit .wizard.quick{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);gap:6px 8px}
  body.cap-fit .q-ctx{grid-area:1/1;align-self:center}
  body.cap-fit .q-actions{grid-area:1/2;align-self:center}
  body.cap-fit .quick .prompt{grid-area:2/1/3/3}
  body.cap-fit .q-body{grid-area:3/1/4/3;flex:none;min-height:0;overflow:auto}
  body.cap-fit .q-fit{overflow:hidden}
  body.cap-fit .q-actions .btn{min-height:34px;padding:0 12px}
  body.cap-fit .live .muted{display:none}
  body.cap-fit .q-btn{min-height:0}
  body.cap-fit .q-res{height:100%}
  body.cap-fit .entry-pick{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;height:100%}
  body.cap-fit .entry-pick .cd-wrap{flex:1;min-height:0;max-width:none;margin:0;display:flex;align-items:center;justify-content:center}
  body.cap-fit .entry-pick .cd{width:100%;height:100%}
  body.cap-fit .entry-pick .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:12px;text-align:center}
  body.cap-fit .q-body .grid{min-height:0;align-content:start;margin:0}
  body.cap-fit .live{flex:none;padding:6px 8px;max-width:640px;width:100%;margin:0 auto}
  body.cap-fit .live .kpi{padding:4px 2px}body.cap-fit .live .kpi-v{font-size:22px}
  body.cap-fit .live h3{display:none}
  body.cap-fit .live .recent{display:none}
  body.cap-fit .q-body .grid .opt,body.cap-fit .d-body .grid .opt{min-height:46px;font-size:15px;padding:6px 8px}
}
/* more room: show the last two entries under the figures, so a slip can be fixed in one tap */
@media (max-width:899px) and (min-height:760px){
  body.cap-fit .live.lq h3{display:block;margin:6px 0 4px;font-size:15px}
  body.cap-fit .live.lq .recent{display:grid}
  body.cap-fit .live.lq .recent li:nth-child(n+3){display:none}
  /* Detailed: the last two entries too, so a slip can still be opened and fixed from here */
  body.cap-fit .live:not(.lq) .recent{display:grid}
  body.cap-fit .live:not(.lq) .recent li:nth-child(n+3){display:none}
}
/* short portrait screens (small phones with browser bars): trim the words, keep the buttons */
@media (max-width:899px) and (max-height:720px){
  body.cap-fit .quick .prompt{display:none}
  body.cap-fit .q-body{grid-area:2/1/4/3}
  body.cap-fit .mhead .btn{display:none}
  body.cap-fit .subtab{padding:4px 9px}
  body.cap-fit .q-s{display:none}
  body.cap-fit .q-t{font-size:20px}
  body.cap-fit .live .kpis{gap:4px}
  body.cap-fit .live .kpi{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:2px}
  body.cap-fit .live .kpi-v{font-size:18px}body.cap-fit .live .kpi-l{font-size:11px}
  body.cap-fit .entry-pick .hint{display:none}
  body.cap-fit .detail .rail-v{display:none}
  body.cap-fit .detail .prompt{font-size:17px}
  body.cap-fit .wizard.detail{gap:4px;padding:6px 10px}
  body.cap-fit .detail .rail-i button::before{width:14px;height:14px}
  body.cap-fit .detail .rail-i::before{top:7px}
}
@media (max-width:330px){
  body.cap-fit .mhead .pill{display:none}
  body.cap-fit .live .kpi-l{display:none}
}

/* ---------- phones, landscape: slim side bar, two panes ---------- */
@media (orientation:landscape) and (max-height:520px){
  :root{--nav-h:0px}
  #app{display:block}
  .nav{position:fixed;top:0;bottom:0;left:0;right:auto;width:calc(56px + env(safe-area-inset-left));height:auto;flex-direction:column;justify-content:space-around;align-self:auto;gap:0;border-top:0;border-right:1px solid var(--line);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .nav .brand,.nav-ver{display:none}
  .nav-i{flex:1;min-height:44px;flex-direction:column;justify-content:center;gap:0;padding:0;border-radius:0;font-size:12px}
  .nav-i span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .nav-i.on{background:var(--accent-bg)}
  main{width:auto;max-width:none;margin:0;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(56px + env(safe-area-inset-left) + 12px)}
  #toasts{left:calc(56px + env(safe-area-inset-left));top:calc(env(safe-area-inset-top) + 8px)}
  h1{font-size:24px}
  .modal{max-width:560px;border-radius:18px}.modal-back{align-items:center}

  body.cap-fit #app{height:100vh;height:100dvh;overflow:hidden}
  body.cap-fit main{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:calc(env(safe-area-inset-top) + 4px);padding-bottom:calc(env(safe-area-inset-bottom) + 6px)}
  body.cap-fit main>.page{flex:1;min-height:0;display:flex;flex-direction:column}
  body.cap-fit .mhead{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-bottom:0}
  body.cap-fit .mhead .back,body.cap-fit .mhead .btn{min-height:32px;padding-top:0;padding-bottom:0}
  body.cap-fit .mhead .mtitle{order:2;flex:1 1 0;min-width:0}body.cap-fit .mhead .back{order:1}body.cap-fit .mhead .pill{order:3}body.cap-fit .mhead .btn{order:4}
  body.cap-fit .mtitle h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.cap-fit .mtitle p{display:none}
  body.cap-fit .subtabs{margin-bottom:4px;flex:none}
  body.cap-fit .subtab{padding:4px 10px;font-size:16px}
  body.cap-fit .mbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:6px 10px;align-content:start}
  body.cap-fit #toasts{top:auto;bottom:calc(env(safe-area-inset-bottom) + 8px);left:calc(56px + env(safe-area-inset-left) + 10px);right:auto;max-width:220px;padding:0;justify-content:flex-start}
  body.cap-fit .toast{font-size:14px;padding:6px 6px 6px 12px;gap:6px}
  body.cap-fit .mbody>.banner{grid-column:1}
  body.cap-fit .cap-top{grid-column:1;display:flex;flex-wrap:wrap;gap:6px;margin:0}
  body.cap-fit .cap-top .seg{flex:1 1 100%}
  body.cap-fit .seg-b{min-height:36px;padding:2px 8px}body.cap-fit .seg-s{display:none}
  body.cap-fit .cap-kp{flex:1 1 100%;flex-wrap:nowrap;min-width:0}
  body.cap-fit .kp-l{display:none}
  body.cap-fit .keeper-sel{min-width:0;max-width:none;min-height:36px}
  body.cap-fit .cap-kp .btn{min-height:36px;padding:0 10px}
  body.cap-fit .tnote{flex:1 1 100%;font-size:12px;padding:4px 8px}
  body.cap-fit .cap-grid{display:contents}
  body.cap-fit .live{grid-column:1;padding:6px;overflow:hidden;min-height:0}
  body.cap-fit .live .kpis{gap:4px}body.cap-fit .live .kpi{padding:3px 1px}body.cap-fit .live .kpi-v{font-size:19px}body.cap-fit .live .kpi-l{font-size:10px}
  body.cap-fit .live h3{margin:6px 0 4px;font-size:14px}
  body.cap-fit .live .recent li:nth-child(n+3){display:none}
  body.cap-fit .recent-b{padding:4px 8px;font-size:13px}
  body.cap-fit .wizard.quick{grid-column:2;grid-row:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:6px 8px;padding:8px;min-height:0;overflow:hidden}
  body.cap-fit .quick .prompt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.cap-fit .q-ctx{grid-area:1/1;align-self:center}
  body.cap-fit .q-actions{grid-area:1/2;align-self:center}
  body.cap-fit .q-actions .btn{min-height:34px;padding:0 12px;font-size:15px}
  body.cap-fit .q-chip{min-height:32px;font-size:14px}
  body.cap-fit .q-body{grid-area:2/1/3/3;flex:none;min-height:0;overflow:auto}
  body.cap-fit .q-fit{overflow:hidden}
  body.cap-fit .q-btn{min-height:0}body.cap-fit .q-res{flex:1;height:100%}
  body.cap-fit .entry-pick{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;height:100%}
  body.cap-fit .entry-pick .cd-wrap{flex:1;min-height:0;max-width:none;margin:0;display:flex;align-items:center;justify-content:center}
  body.cap-fit .entry-pick .cd{width:100%;height:100%}
  body.cap-fit .entry-pick .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:12px;text-align:center}
  body.cap-fit .q-body .grid{min-height:0;align-content:start;margin:0}
  body.cap-fit .q-done{min-height:40px}
  body.cap-fit .q-body .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body.cap-fit .q-body .grid .opt{min-height:40px;font-size:14px;padding:4px 8px;border-left-width:5px}
  /* the step-by-step capture keeps its buttons in view too */
  .wiz-actions{bottom:0}
  body.cap-fit .wizard.detail{grid-column:2;grid-row:1/-1;display:flex;flex-direction:column;gap:4px;padding:6px 8px;min-height:0;overflow:hidden}
  body.cap-fit .detail .prompt{margin:0;font-size:16px}
  body.cap-fit .detail .rail{position:static;margin:0;padding:0;flex:none}
  body.cap-fit .detail .rail-i::before{top:8px}
  body.cap-fit .detail .rail-i button::before{width:16px;height:16px;border-width:2px}
  body.cap-fit .detail .rail-l{font-size:11px}body.cap-fit .detail .rail-v{display:none}
  body.cap-fit .d-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
  body.cap-fit .d-body>.grid{margin:0;align-content:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body.cap-fit .d-body .grid .opt{min-height:42px;font-size:14px;padding:4px 8px;border-left-width:5px}
  body.cap-fit .detail .wiz-actions{position:static;flex:none;border-top:1px solid var(--line);padding:4px 0 0;margin:0;flex-wrap:nowrap}
  body.cap-fit .detail .wiz-actions .btn{min-height:34px;padding:0 12px;font-size:15px}
}

/* ---------- Gloveside Attack ---------- */
:root{--atk:#c2620a;--atk-bg:#fdebd5;--stp:#0b7a56;--mov:#0B6B8F;--atk-on:#fff;--eff-goal:#0b7a56;--eff-stroke:#7a3fb0;--eff-pc:#0B6B8F;--eff-saved:#e0a42b;--eff-none:#c5cfda}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--atk:#f6a542;--atk-bg:#3b2a12;--stp:#46cb9a;--mov:#4CC9F0;--atk-on:#1b0f02;--eff-goal:#46cb9a;--eff-stroke:#b98af0;--eff-pc:#4CC9F0;--eff-saved:#e0a42b;--eff-none:#3b4d60}}
:root[data-theme="dark"]{--atk:#f6a542;--atk-bg:#3b2a12;--stp:#46cb9a;--mov:#4CC9F0;--atk-on:#1b0f02;--eff-goal:#46cb9a;--eff-stroke:#b98af0;--eff-pc:#4CC9F0;--eff-saved:#e0a42b;--eff-none:#3b4d60}
.atk-top{margin-bottom:12px}
.atk-dir{font:700 15px var(--display);color:var(--atk);letter-spacing:.02em}
.atk-wizard{display:flex;flex-direction:column;gap:10px}
.atk-n{margin:0}
.grow{flex:1}
.atk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.atk-step{appearance:none;font:inherit;color:var(--ink);text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;cursor:pointer;min-width:0;min-height:44px;display:flex;flex-direction:column;gap:2px}
.atk-step b{font:700 15px/1.1 var(--display);display:flex;align-items:center;gap:6px}
.atk-d{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atk-dot{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px/1 var(--body);color:#fff;flex:none}
.atk-step[data-k=start] .atk-dot{background:var(--stp)}.atk-step[data-k=move] .atk-dot{background:var(--mov)}.atk-step[data-k=end] .atk-dot{background:var(--atk)}
.atk-step[data-k=start][aria-current=step]{border-color:var(--stp);box-shadow:0 0 0 1px var(--stp) inset}
.atk-step[data-k=move][aria-current=step]{border-color:var(--mov);box-shadow:0 0 0 1px var(--mov) inset}
.atk-step[data-k=end][aria-current=step]{border-color:var(--atk);box-shadow:0 0 0 1px var(--atk) inset}
.atk-prompt h2{font:700 22px/1.15 var(--display);margin:2px 0}
.atk-prompt p{margin:0;color:var(--muted);font-size:14.5px}
.atk-pitchbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 10px 8px;min-width:0}
.atk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.atk-inner{width:100%}.atk-inner.big{width:960px}
.atk-warn{margin:8px 0 0;font-size:14px;background:var(--warn-bg);border:1.5px solid var(--warn-bar);border-radius:8px;padding:8px 10px}
.ap-pitch{display:block;width:100%;height:auto;touch-action:manipulation}
.ap-pitch:not(.ap-map){cursor:crosshair}
.ap-pitch.ap-map{max-height:none}
.ap-cell{fill:transparent;stroke:none}
.ap-cell:focus-visible{outline:none;stroke:var(--accent);stroke-width:3}
.ap-cell.map{fill:var(--atk)}
.ap-sub,.ap-lines,.ap-goal{pointer-events:none}
.ap-sub line{stroke:var(--pitch-line,#9db8aa);stroke-width:1;opacity:.45}
.ap-tint{pointer-events:none;opacity:.16}.ap-tint.start{fill:var(--stp)}.ap-tint.move{fill:var(--mov)}.ap-tint.end{fill:var(--atk)}
.ap-x{font:700 30px var(--display);pointer-events:none;opacity:.9}.ap-x.start{fill:var(--stp)}.ap-x.move{fill:var(--mov)}.ap-x.end{fill:var(--atk)}
.ap-h{pointer-events:none;opacity:.28}.ap-h.start{fill:var(--stp)}.ap-h.move{fill:var(--mov)}.ap-h.end{fill:var(--atk)}
.ap-id{font:700 12px var(--display);fill:var(--muted);opacity:.8;pointer-events:none;letter-spacing:.04em}
.ap-goal{fill:var(--muted);opacity:.55}.ap-goal.ours{fill:var(--atk);opacity:1}
.ap-board{stroke:var(--muted);stroke-width:7;opacity:.6;pointer-events:none}
.ap-circle{fill:var(--atk);fill-opacity:.12;stroke:var(--atk);stroke-width:1.5;stroke-dasharray:6 5}.ap-circle.on{fill-opacity:.26;stroke-width:2.5;stroke-dasharray:0}
.ap-circle-t{font:700 12px var(--display);fill:var(--atk);opacity:.85;letter-spacing:.06em;pointer-events:none}
.ap-path{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:.92}.ap-path.start{stroke:var(--stp)}.ap-path.move{stroke:var(--mov)}.ap-path.end{stroke:var(--atk)}
.ap-ah.start{fill:var(--stp)}.ap-ah.move{fill:var(--mov)}.ap-ah.end{fill:var(--atk)}
.ap-node{stroke:var(--surface);stroke-width:2.5;pointer-events:none}.ap-node.start{fill:var(--stp)}.ap-node.move{fill:var(--mov)}.ap-node.end{fill:var(--atk)}
.ap-nt{font:700 11.5px var(--body);fill:#fff;text-anchor:middle;pointer-events:none}
.ap-lines .cd-line{opacity:.55}
.ap-cols{display:flex;font:700 10px var(--display);letter-spacing:.08em;color:var(--muted);text-align:center}
.ap-cols span{flex:1;min-width:0}
.ap-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap;padding-top:4px}
.atk-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.atk-lbl{font:700 12px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.atk-chips{display:flex;flex-wrap:wrap;gap:8px}
.atk-chips .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;font:inherit;font-size:15px}
.atk-chips .chip[aria-pressed=true]{border-color:var(--atk);background:var(--atk-bg);font-weight:700;color:var(--ink)}
.atk-chips .chip.move[aria-pressed=true]{border-color:var(--mov)}
.atk-chips .chip.goal[aria-pressed=true]{background:var(--goal-bg);border-color:var(--goal-bar)}
.atk-chips .chip[disabled]{opacity:.5}
.atk-leg{width:34px;height:10px;flex:none;color:var(--mov)}
.atk-bar{align-items:center}
.btn.q-style{margin-left:auto}
.atk-nav{align-items:center}
.atk-sum{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.atk-sum h3{font:700 12px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0}
.atk-sl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:baseline;margin:0}
.atk-sl dt{font:700 13px var(--display);letter-spacing:.04em}.atk-sl dd{margin:0;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.atk-sl .k-s{color:var(--stp)}.atk-sl .k-m{color:var(--mov)}.atk-sl .k-e{color:var(--atk)}
.atk-sl .empty{color:var(--muted)}
.atk-todo{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:14px}
.atk-todo li{display:flex;gap:8px;align-items:baseline;color:var(--muted)}
.atk-todo .m{font-weight:700;width:1em;flex:none;text-align:center}
.atk-todo li.ok{color:var(--ink)}.atk-todo li.ok .m{color:var(--stp)}.atk-todo li.miss .m{color:var(--atk)}
.atk-todo.flash li.miss{color:var(--atk);font-weight:700}
.atk-todo li.go{color:var(--stp);font-weight:700}
.btn.primary.off{opacity:.5}
.review-switch{margin:0 0 14px;max-width:420px}
.review-switch .seg-b{min-height:44px}
.tag-goal.good{background:var(--save-bg);color:var(--save)}
/* the Attack report */
.ap-sec h2{margin-top:22px}
.atk-h,.def-h{font:700 24px var(--display);border-bottom:3px solid var(--atk);padding-bottom:6px;margin:24px 0 12px}
.def-h{border-bottom-color:var(--accent);margin-top:4px}
.atk-sub{font:700 12px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.ap-maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ap-fig{margin:0}.ap-cap{font:600 15px var(--display);color:var(--ink);margin-bottom:4px;text-align:left}
.sample-note{background:var(--atk-bg);border-color:var(--atk)}
.attack-locked{background:var(--atk-bg);border-color:var(--atk)}
.abars{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.abars li{display:grid;grid-template-columns:minmax(110px,42%) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:14px}
.ab-t{display:flex;height:18px;border-radius:5px;background:var(--surface2);overflow:hidden}
.a-bar{display:block;height:100%;background:var(--atk)}
.a-bar.a-rest{background:var(--line)}
.ab-v{font:700 15px var(--display);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.acols{display:flex;gap:3px;align-items:flex-end;height:170px;overflow-x:auto;padding-bottom:2px}
.ac{flex:1 0 30px;display:flex;flex-direction:column;align-items:center;height:100%;gap:2px}
.ac-bar{flex:1;width:100%;display:flex;align-items:flex-end}
.ac-bar>i{display:flex;align-items:flex-end;width:100%;background:var(--line);border-radius:4px 4px 0 0}
.ac-bar>i>i{display:block;width:100%;border-radius:4px 4px 0 0}
.ac-v{font:700 13px var(--display);height:16px}.ac-l{font-size:10px;color:var(--muted);white-space:nowrap}
.notes-list li{margin-bottom:6px}
.atk-lic{margin-top:18px;padding-top:10px;border-top:1px solid var(--line)}
.eff{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:16px;align-items:center}
@media (max-width:560px){.eff{grid-template-columns:1fr}}
.effn{display:flex;flex-direction:column;gap:2px;background:var(--atk-bg);border-radius:10px;padding:12px 14px}
.effn .big{font:700 46px/1 var(--display);color:var(--atk)}.effn .sm{font-size:13.5px}.effn .av{font-size:12.5px;color:var(--muted)}
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px;font:700 13px var(--display)}
.stack i{display:flex;align-items:center;justify-content:center;font-style:normal;height:100%;min-width:20px;color:#fff}
.stack i.eff-saved,.stack i.eff-none{color:#2a1c00}
i.eff-goal,.sw.eff-goal{background:var(--eff-goal)}i.eff-stroke,.sw.eff-stroke{background:var(--eff-stroke)}i.eff-pc,.sw.eff-pc{background:var(--eff-pc)}i.eff-saved,.sw.eff-saved{background:var(--eff-saved)}i.eff-none,.sw.eff-none{background:var(--eff-none)}
.legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.atk-circ{max-width:460px;margin:14px auto 0}
.atk-tbl th,.atk-tbl td{white-space:nowrap}
.pairs{display:flex;flex-direction:column;gap:10px}
.pair{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}.pq{font:700 15px var(--display)}
.prows{display:flex;flex-direction:column;gap:3px}.pr{display:grid;grid-template-columns:1fr 26px;gap:8px;align-items:center}
.ptr{display:block;height:11px;background:var(--surface2);border-radius:3px;overflow:hidden}.ptr i{display:block;height:100%;border-radius:3px}
.pr b{font-size:13px;text-align:right}
i.pf,.sw.pf{background:var(--atk)}i.pa,.sw.pa{background:var(--accent)}
.concede{margin:18px 0}
@media print{
  @page{size:A4;margin:10mm}
  .ap-maps{display:block}
  .ap-maps .ap-fig{display:inline-block;width:32%;vertical-align:top;margin:0 1% 6px 0}
  .ap-pitch{max-height:none}
  .atk-report .cols2{display:block}
  .eff{display:block}
  .atk-report .ap-sec,.concede,.atk-pairs,.atk-eff,.pair{break-inside:avoid}
  .atk-start{break-before:page}
  .atk-h,.def-h{margin-top:0}
  .sample-note{display:block!important;border:1px solid #000}
  .atk-report .tiles{display:block}
  .atk-report .tiles .tile{display:inline-block;width:32%;vertical-align:top;margin:0 1% 6px 0}
}