:root{
  --ground:#E7EAEF; --panel:#FDFDFE; --panel-2:#F0F3F8; --sunk:#DFE4EC;
  --ink:#12161C; --ink-2:#4C5563; --ink-3:#66707F;
  --line:#D3D9E2; --line-2:#BFC7D4;
  --accent:#2F5FC4; --accent-ink:#FFFFFF; --accent-soft:#DCE6FA;
  --t-green:#4F7D3C; --t-green-bg:#DFEAD6;
  --t-blue:#3A5FA6; --t-blue-bg:#DAE4F5;
  --t-gold:#7E6112; --t-gold-bg:#EFE5C4;
  --ok:#336F45; --ok-bg:#DBEBE0;
  --warn:#8C5310; --warn-bg:#F3E5D2;
  --shadow:0 1px 2px rgba(18,22,28,.06),0 6px 18px -10px rgba(18,22,28,.22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D1015; --panel:#161A21; --panel-2:#1D222B; --sunk:#0A0D12;
    --ink:#E3E8EF; --ink-2:#96A1B0; --ink-3:#848E9C;
    --line:#242A34; --line-2:#343C49;
    --accent:#7BA2F2; --accent-ink:#0D1015; --accent-soft:#1A2440;
    --t-green:#93C278; --t-green-bg:#1B2718;
    --t-blue:#8FAEE8; --t-blue-bg:#182134;
    --t-gold:#CBA53E; --t-gold-bg:#282111;
    --ok:#71C287; --ok-bg:#16261B;
    --warn:#D69B4E; --warn-bg:#2A1E10;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -10px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0D1015; --panel:#161A21; --panel-2:#1D222B; --sunk:#0A0D12;
  --ink:#E3E8EF; --ink-2:#96A1B0; --ink-3:#848E9C;
  --line:#242A34; --line-2:#343C49;
  --accent:#7BA2F2; --accent-ink:#0D1015; --accent-soft:#1A2440;
  --t-green:#93C278; --t-green-bg:#1B2718;
  --t-blue:#8FAEE8; --t-blue-bg:#182134;
  --t-gold:#CBA53E; --t-gold-bg:#282111;
  --ok:#71C287; --ok-bg:#16261B;
  --warn:#D69B4E; --warn-bg:#2A1E10;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -10px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding-inline:16px; padding-block:0 96px}
h1,h2,h3,.disp{font-family:Chivo,"IBM Plex Sans",system-ui,sans-serif; text-wrap:balance; margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
input,select{font:inherit; color:inherit}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20; background:var(--ground);
  border-bottom:1px solid var(--line); margin-inline:-16px; padding-inline:16px;
}
.brandrow{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-block:14px 8px}
.brand{font-size:19px; font-weight:900; letter-spacing:-.02em}
.brand span{color:var(--accent)}
.savedot{font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}

/* tabs */
nav.tabs{display:flex; gap:2px; padding-bottom:0}
nav.tabs button{
  padding:9px 14px 10px; font-size:13px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
nav.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}

.picker{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px}
.seg{display:flex; background:var(--sunk); border-radius:5px; padding:2px}
.seg button{padding:6px 16px; border-radius:4px; font-size:13px; font-weight:600; color:var(--ink-3)}
.seg button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.lightbtn{padding:6px 12px; border-radius:5px; font-size:12.5px; font-weight:600; color:var(--ink-3); border:1px dashed var(--line-2)}
.lightbtn[aria-pressed="true"]{color:var(--t-gold); border-color:var(--t-gold); border-style:solid; background:var(--t-gold-bg)}
.picker .meta{margin-left:auto; font-size:12px; color:var(--ink-3)}

h2.sec{
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:26px 0 10px; display:flex; align-items:center; gap:10px;
}
h2.sec::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- slot rows ---------- */
.slots{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.slot{background:var(--panel)}
.slot.done{background:var(--ok-bg)}
.slothead{display:flex; align-items:flex-start; gap:11px; padding:12px 13px; width:100%; text-align:left}
.code{
  flex:none; width:38px; padding:3px 0; border-radius:3px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.02em;
}
.code[data-tier="green"]{background:var(--t-green-bg); color:var(--t-green)}
.code[data-tier="blue"]{background:var(--t-blue-bg); color:var(--t-blue)}
.code[data-tier="gold"]{background:var(--t-gold-bg); color:var(--t-gold)}
.slotmain{flex:1; min-width:0}
.slotname{display:block; font-size:14.5px; font-weight:600; line-height:1.3}
.slotsub{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.slotsub .rx{font-family:"IBM Plex Mono",monospace; color:var(--ink-2); font-weight:600}
.chev{flex:none; color:var(--ink-3); font-size:11px; padding-top:4px; transition:transform .18s}
.slot[data-open="true"] .chev{transform:rotate(90deg)}

.dots{display:flex; gap:7px; padding:0 13px 12px 62px; flex-wrap:wrap; align-items:center}
.setgrp{display:flex; align-items:center; gap:4px}
.setadj{display:flex; gap:3px; align-items:center}
.setadj button{
  width:34px; height:34px; border-radius:4px; border:1px solid var(--line-2);
  color:var(--ink-3); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace;
}
.setadj button:disabled{opacity:.35; cursor:not-allowed}
.adjmark{font-size:11px; color:var(--t-gold); font-weight:600}
.dot{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2);
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; justify-content:center; transition:background .12s,border-color .12s,color .12s;
}
.dot[aria-pressed="true"]{background:var(--ok); border-color:var(--ok); color:var(--panel)}
:root[data-theme="dark"] .dot[aria-pressed="true"],
:root:not([data-theme="light"]) .dot[aria-pressed="true"]{color:var(--sunk)}
.dots .reps{
  width:66px; padding:5px 8px; border-radius:4px; border:1px solid var(--line-2);
  background:var(--panel-2); font-family:"IBM Plex Mono",monospace; font-size:16px;
}
.dots .reps[aria-invalid="true"]{border-color:var(--warn); background:var(--warn-bg)}
.dots .reps::placeholder{color:var(--ink-3)}
.dots .donepill{
  margin-left:auto; padding:6px 13px; border-radius:15px; border:1.5px solid var(--line-2);
  font-size:11.5px; font-weight:600; color:var(--ink-3); white-space:nowrap;
}
.dots .donepill[data-hit="true"]{background:var(--ok); border-color:var(--ok); color:var(--panel)}
:root[data-theme="dark"] .dots .donepill[data-hit="true"],
:root:not([data-theme="light"]) .dots .donepill[data-hit="true"]{color:var(--sunk)}
.slot .tick{visibility:hidden; color:var(--ok); font-size:14px; font-weight:700; padding-top:2px}
.slot.done .tick{visibility:visible}

.finishbar{
  position:sticky; bottom:10px; z-index:15; margin-top:18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:8px; background:var(--panel);
  border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.finishbar .prog{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-2)}
.finishbar .prog b{color:var(--ink); font-size:14px}
.finishbar .fin{
  margin-left:auto; padding:9px 18px; border-radius:6px; font-size:13px; font-weight:600;
  background:var(--accent); color:var(--accent-ink); border:1.5px solid transparent;
}
.finishbar[data-done="true"]{border-color:var(--ok); background:var(--ok-bg)}
.finishbar[data-done="true"] .fin{background:transparent; color:var(--ok); border-color:var(--ok)}

/* expanded ladder */
.detail{padding:2px 13px 15px 62px; border-top:1px dashed var(--line); margin-top:2px}
.crit{font-size:12.5px; color:var(--ink-2); padding:11px 0 4px}
.crit b{color:var(--ink)}
.lock{display:inline-block; margin-top:6px; font-size:11.5px; padding:3px 8px; border-radius:3px; background:var(--warn-bg); color:var(--warn); font-weight:600}
.ladder{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:1px}
.ladder li{display:flex}
.ladder button{
  display:flex; gap:9px; align-items:baseline; width:100%; text-align:left;
  padding:6px 8px; border-radius:4px; font-size:12.5px; color:var(--ink-2);
}
.ladder button:hover{background:var(--panel-2)}
.ladder .lv{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; color:var(--ink-3); flex:none; width:30px}
.ladder .lname{flex:1}
.ladder .lrx{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); flex:none}
.ladder li[data-cur="true"] button{background:var(--accent-soft); color:var(--ink); font-weight:600}
.ladder li[data-cur="true"] .lv{color:var(--accent)}
.ladder li[data-past="true"] button{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2)}
.levelup{
  margin-top:12px; padding:7px 14px; border-radius:5px; font-size:12.5px; font-weight:600;
  background:var(--accent); color:var(--accent-ink);
}
.levelup:disabled{background:var(--sunk); color:var(--ink-3); cursor:not-allowed}
.detail .why{font-size:11.5px; color:var(--ink-3); margin-top:7px; line-height:1.45}

/* fixed extras + prehab */
.extras{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.xrow{display:flex; align-items:center; background:var(--panel)}
.extra{display:flex; align-items:center; gap:11px; padding:10px 13px; flex:1; min-width:0; width:100%; text-align:left}
.extra .box{
  flex:none; width:19px; height:19px; border-radius:3px; border:1.5px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent;
}
.extra[aria-pressed="true"] .box{background:var(--ok); border-color:var(--ok); color:var(--panel)}
:root[data-theme="dark"] .extra[aria-pressed="true"] .box,
:root:not([data-theme="light"]) .extra[aria-pressed="true"] .box{color:var(--sunk)}
.extra .nm{flex:1; font-size:13.5px}
.extra[aria-pressed="true"] .nm{color:var(--ink-3)}
.extra .rx{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}

/* what you actually lifted / held / ran — typed next to the plan */
.xlog{flex:none; display:flex; align-items:center; gap:10px; padding:6px 13px 6px 0}
.logf{display:flex; align-items:center; gap:5px; white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}
.logf input{
  width:48px; padding:5px 7px; border-radius:4px; border:1px solid var(--line-2);
  background:var(--panel-2); font-family:"IBM Plex Mono",monospace; font-size:16px; text-align:right;
}
.logf input.w{width:62px}
.logf input.sec{width:84px}
.logf input::placeholder{color:var(--ink-3)}
details.warm{margin-top:12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); overflow:hidden}
details.warm summary{padding:11px 13px; font-size:13px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:10px}
details.warm summary::-webkit-details-marker{display:none}
details.warm summary::after{content:"\25B8"; color:var(--ink-3); font-size:11px}
details.warm[open] summary::after{content:"\25BE"}
details.warm ol{margin:0; padding:0 15px 14px 34px; font-size:12.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:5px}

/* footer note */
.rulebox{margin-top:22px; padding:14px 15px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); line-height:1.55}
.rulebox b{color:var(--ink)}
.rulebox ul{margin:8px 0 0; padding-left:17px; display:flex; flex-direction:column; gap:5px}

/* ---------- ladders tab ---------- */
.lcard{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px; margin-bottom:10px}
.lcard .top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.lcard .nm{font-family:Chivo,sans-serif; font-weight:800; font-size:15px}
.lcard .goal{font-size:12px; color:var(--ink-3); margin-left:auto; font-family:"IBM Plex Mono",monospace}
.lcard .ladder{margin-top:9px}

.legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:11.5px; color:var(--ink-3)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:11px; height:11px; border-radius:3px; border:1px solid; display:inline-block}

.rules{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px; margin-top:10px}
.rules h3{font-family:Chivo,sans-serif; font-size:14px; font-weight:800; margin:18px 0 7px}
.rules h3:first-child{margin-top:0}
.rules p, .rules li{font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:0}
.rules ul{margin:0; padding-left:17px; display:flex; flex-direction:column; gap:5px}
.rules b{color:var(--ink)}
.rules code{font-family:"IBM Plex Mono",monospace; font-size:11.5px; background:var(--panel-2); padding:1px 5px; border-radius:3px; color:var(--ink)}
.rules table{width:100%; border-collapse:collapse; margin-top:6px}
.rules td{font-size:12.5px; color:var(--ink-2); padding:5px 0; border-bottom:1px solid var(--line); vertical-align:top}
.rules td:first-child{color:var(--ink); font-weight:600; padding-right:14px; white-space:nowrap; width:1%}
.rules tr:last-child td{border-bottom:none}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin:16px 0 4px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px 13px}
.stat .n{font-family:Chivo,sans-serif; font-size:26px; font-weight:900; letter-spacing:-.02em; line-height:1}
.stat .l{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-top:5px}
.reset{margin-top:22px; font-size:12px; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px}
.errbar{
  margin:12px 0 0; padding:10px 13px; border-radius:6px; font-size:12.5px; line-height:1.45;
  background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn);
  font-family:"IBM Plex Mono",monospace;
}

/* ============================================================================
   Unlocked — components added on top of the ported base.
   ========================================================================== */

/* --- elite tier (4th tier, not in the original palette) --- */
:root{ --t-red:#A6431C; --t-red-bg:#F4DED2; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --t-red:#E08A5E; --t-red-bg:#2E1A11; } }
:root[data-theme="dark"]{ --t-red:#E08A5E; --t-red-bg:#2E1A11; }
.code[data-tier="red"]{background:var(--t-red-bg); color:var(--t-red)}

/* --- header extras --- */
.brandrow .hdrbtns{display:flex; gap:4px; align-items:center}
.iconbtn{
  padding:5px 9px; border-radius:5px; font-size:11.5px; font-weight:600;
  color:var(--ink-3); border:1px solid var(--line-2);
}
.iconbtn[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
nav.tabs{overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{white-space:nowrap}

/* --- session header bar (replaces the old phase bar) --- */
.sessbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  padding:12px 14px; margin-top:16px; border-radius:6px;
  background:var(--panel); border:1px solid var(--line);
}
.sessbar .tag{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:3px; background:var(--accent-soft); color:var(--accent);
}
.sessbar .fact{font-size:12.5px; color:var(--ink-2)}
.sessbar .fact b{color:var(--ink); font-family:"IBM Plex Mono",monospace; font-weight:600}
.sessbar .note{flex-basis:100%; font-size:12.5px; color:var(--ink-2); line-height:1.45}

/* --- progress meters --- */
.pbar{height:6px; border-radius:3px; background:var(--sunk); overflow:hidden; display:flex}
.pbar i{display:block; height:100%}
.pbar i[data-tier="green"]{background:var(--t-green)}
.pbar i[data-tier="blue"]{background:var(--t-blue)}
.pbar i[data-tier="gold"]{background:var(--t-gold)}
.pbar i[data-tier="red"]{background:var(--t-red)}
.pmeta{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--ink-3); margin-top:6px}
.pmeta b{color:var(--ink-2); font-family:"IBM Plex Mono",monospace}

/* --- block headings inside a session --- */
.blockhead{display:flex; align-items:baseline; gap:10px; margin:26px 0 10px}
.blockhead .bn{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.blockhead .bd{font-size:11.5px; color:var(--ink-3); flex:1; min-width:0}
.blockhead .br{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); white-space:nowrap}

/* --- slot row additions --- */
.slotname .slotlane{font-weight:400; color:var(--ink-3); font-size:12px}
.mstar{color:var(--t-gold); font-size:11px; margin-left:4px}
.slot[data-state="hit"]{background:var(--ok-bg)}
.laneswitch{display:flex; gap:5px; flex-wrap:wrap; padding:0 13px 10px 62px}
.laneswitch button{
  padding:4px 9px; border-radius:12px; font-size:11px; font-weight:600;
  color:var(--ink-3); border:1px solid var(--line-2);
}
.laneswitch button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}

/* --- the "you just unlocked" toast --- */
.toasts{position:fixed; left:0; right:0; bottom:14px; z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding-inline:16px}
.toast{
  pointer-events:auto; max-width:420px; width:100%; display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:8px; background:var(--panel); border:1px solid var(--ok);
  box-shadow:var(--shadow); animation:rise .22s ease-out;
}
.toast .tk{font-size:18px; line-height:1}
.toast .tt{flex:1; min-width:0; font-size:13px; line-height:1.35}
.toast .tt b{display:block; font-family:Chivo,sans-serif; font-weight:800}
.toast .tt span{color:var(--ink-3); font-size:11.5px}
.toast .undo{font-size:11.5px; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* --- tree view --- */
.treetools{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
.treetools input[type="search"]{
  flex:1; min-width:140px; padding:7px 11px; border-radius:6px; font-size:16px;
  border:1px solid var(--line-2); background:var(--panel);
}
.catcard{background:var(--panel); border:1px solid var(--line); border-radius:6px; margin-bottom:10px; overflow:hidden; scroll-margin-top:100px}
.cathead{display:flex; flex-wrap:wrap; align-items:center; gap:9px 11px; width:100%; text-align:left; padding:13px 14px}
.cathead .cn{font-family:Chivo,sans-serif; font-weight:800; font-size:15px; flex:1 1 auto; min-width:0}
.cathead .cc{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.cathead .pbar{flex:0 0 100%; order:9}
.node.mini{min-width:0; flex:0 0 auto; padding:5px 17px 5px 9px}
.node.mini .ms{top:3px; right:5px}
.catbody{border-top:1px solid var(--line); padding:4px 14px 14px}
.chain{display:flex; flex-wrap:wrap; align-items:stretch; gap:5px; margin-top:10px}

.node{
  position:relative; display:flex; flex-direction:column; gap:3px; justify-content:center;
  padding:7px 10px; border-radius:5px; min-width:104px; flex:1 1 104px; max-width:210px;
  border:1px solid var(--line-2); background:var(--panel-2); text-align:left;
}
.node .nn{font-size:12px; line-height:1.25; font-weight:500}
.node .nr{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3)}
.node[data-state="achieved"]{background:var(--ok-bg); border-color:var(--ok)}
.node[data-state="achieved"] .nn{color:var(--ok); font-weight:600}
.node[data-state="current"]{background:var(--accent-soft); border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.node[data-state="current"] .nn{color:var(--accent); font-weight:700}
.node[data-state="locked"]{opacity:.5; border-style:dashed}
.node .ms{position:absolute; top:4px; right:6px; font-size:9px; color:var(--t-gold)}
.node .tb{position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:5px 0 0 5px}
.node .tb[data-tier="green"]{background:var(--t-green)}
.node .tb[data-tier="blue"]{background:var(--t-blue)}
.node .tb[data-tier="gold"]{background:var(--t-gold)}
.node .tb[data-tier="red"]{background:var(--t-red)}

/* the chart diagram: a clipped viewport, one transformed canvas inside it */
.mapvp{
  position:relative; height:min(64vh,560px); margin-top:12px; border-radius:6px;
  background:var(--panel-2); border:1px solid var(--line);
  overflow:hidden; overflow:clip; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab;
}
.mapvp:active{cursor:grabbing}
.mapcanvas{position:absolute; left:0; top:0; transform-origin:0 0}
.mapcanvas.anim{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mapsvg{position:absolute; left:0; top:0; overflow:visible}
.mapsvg .band{fill:var(--panel)}
.mapsvg .band[data-tier="green"]{fill:var(--t-green-bg)}
.mapsvg .band[data-tier="blue"]{fill:var(--t-blue-bg)}
.mapsvg .band[data-tier="gold"]{fill:var(--t-gold-bg)}
.mapsvg .band[data-tier="red"]{fill:var(--t-red-bg)}
.mapsvg .bandlbl{font:700 9.5px "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.16em; text-anchor:middle; dominant-baseline:central}
.mapsvg .bandlbl[data-tier="green"]{fill:var(--t-green)}
.mapsvg .bandlbl[data-tier="blue"]{fill:var(--t-blue)}
.mapsvg .bandlbl[data-tier="gold"]{fill:var(--t-gold)}
.mapsvg .bandlbl[data-tier="red"]{fill:var(--t-red)}
.mapsvg .edge{fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:3 4; stroke-linecap:round; opacity:.75}
.mapsvg .edge[data-s="part"]{stroke-dasharray:none; opacity:.6}
.mapsvg .edge[data-s="done"]{stroke:var(--ok); stroke-width:2.5; stroke-dasharray:none; opacity:1}
.mapsvg .edge[data-s="next"]{stroke:var(--accent); stroke-width:2.5; stroke-dasharray:none; opacity:1}
.mapsvg .edge[data-x="true"][data-s="done"], .mapsvg .edge[data-x="true"][data-s="next"]{stroke-width:2}

.lanehd{
  position:absolute; top:12px; width:var(--nw); height:34px; display:flex; align-items:flex-end; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.25; color:var(--ink-2);
}
.lanehd span{flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lanehd b{font-family:"IBM Plex Mono",monospace; font-weight:600; letter-spacing:0; color:var(--ink-3)}

.mapcanvas .node{
  position:absolute; width:var(--nw); height:var(--nh); min-width:0; max-width:none;
  padding:5px 8px 5px 11px; gap:2px; background:var(--panel);
}
.mapcanvas .node .nn{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-right:6px}
.mapcanvas .node .nr{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mapcanvas .node .ext{color:var(--warn); font-weight:600}
.mapcanvas .node[data-state="achieved"]{background:var(--ok-bg)}
.mapcanvas .node[data-state="current"]{background:var(--accent-soft); border-width:2px; animation:herepulse 2.6s ease-out infinite}
.mapcanvas .node[data-state="locked"]{opacity:.6}
.mapcanvas .node[data-sel="true"]{outline:2px solid var(--ink); outline-offset:3px}
.mapcanvas[data-q="true"] .node{opacity:.25}
.mapcanvas[data-q="true"] .node[data-match="true"]{opacity:1; outline:2px solid var(--t-gold); outline-offset:3px}
.mapcanvas .node.ping{animation:ping .9s ease-out 2}
.node .here{
  position:absolute; left:9px; top:-10px; padding:1px 6px; border-radius:3px; white-space:nowrap; pointer-events:none;
  background:var(--accent); color:var(--accent-ink); font-size:9px; line-height:1.45; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
@keyframes herepulse{
  0%{box-shadow:0 0 0 0 var(--accent)}
  70%,100%{box-shadow:0 0 0 12px transparent}
}
@keyframes ping{0%{transform:scale(1)} 30%{transform:scale(1.08)} 100%{transform:scale(1)}}

.mapctl{position:absolute; right:8px; bottom:8px; display:flex; gap:5px}
.mapctl button{
  height:36px; min-width:36px; padding:0 11px; border-radius:6px; font-size:14px; font-weight:600; line-height:1;
  background:var(--panel); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.mapctl button.here{font-size:12.5px; color:var(--accent); border-color:var(--accent)}

.maplegend{margin-top:9px}
.maplegend i[data-k="here"]{background:var(--accent-soft); border-color:var(--accent)}
.maplegend i[data-k="ach"]{background:var(--ok-bg); border-color:var(--ok)}
.maplegend i[data-k="open"]{background:var(--panel); border-color:var(--line-2)}
.maplegend i[data-k="lock"]{background:var(--panel); border-color:var(--line-2); border-style:dashed; opacity:.6}
.maplegend b{display:inline-block; width:18px; border-top:2.5px solid var(--accent)}

.mapdetail{margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.mapsel{display:flex; align-items:center; gap:9px 10px; flex-wrap:wrap}
.mapsel .nm{font-family:Chivo,sans-serif; font-weight:800; font-size:15px; line-height:1.25}
.mapsel .st{margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.mapsel .st[data-state="current"]{color:var(--accent)}
.mapsel .st[data-state="achieved"]{color:var(--ok)}
.mapsel .st[data-state="locked"]{color:var(--warn)}
.mapun{font-size:12px; color:var(--ink-3); margin-top:7px; line-height:1.45}
.mapun b{color:var(--ink-2); font-weight:600}
.mapdetail .detail{padding:0; border-top:none; margin-top:0}

.maphits{margin-top:12px}
.maphits .chip span{margin-left:6px; font-weight:400; color:var(--ink-3)}
.maphits .chip[data-state="achieved"]{color:var(--ok); border-color:var(--ok)}
.maphits .chip[data-state="current"]{color:var(--accent); border-color:var(--accent)}
.nohit{font-size:12px; color:var(--ink-3); align-self:center}

/* --- milestone board --- */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; margin-top:10px}
.mcard{
  padding:11px 12px; border-radius:6px; border:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; gap:5px; text-align:left;
}
.mcard .mn{font-size:13px; font-weight:600; line-height:1.25}
.mcard .mm{font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.mcard[data-state="achieved"]{background:var(--ok-bg); border-color:var(--ok)}
.mcard[data-state="achieved"] .mn{color:var(--ok)}
.mcard[data-state="current"]{border-color:var(--accent)}
.mcard[data-state="locked"]{opacity:.55}

/* --- log view --- */
.logday{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:13px 14px; margin-bottom:8px}
.logday .lh{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.logday .ld{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.logday .lk{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:2px 8px; border-radius:3px; background:var(--accent-soft); color:var(--accent)}
.logday .lc{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.logday ul{list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.logday li{display:flex; gap:9px; font-size:12.5px; color:var(--ink-2); align-items:baseline}
.logday li .en{flex:1; min-width:0}
.logday li .ev{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.logday li[data-hit="1"] .en{color:var(--ok)}
.stat .n small{font-size:15px; font-weight:800; color:var(--ink-3); margin-left:1px}
.secn{letter-spacing:0; text-transform:none; font-weight:400}

/* weekly volume: small multiples, one measure per chart */
.vgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px}
.vchart{margin:0; padding:12px 12px 4px; background:var(--panel); border:1px solid var(--line); border-radius:6px}
.vchart figcaption{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:13px}
.vchart figcaption b{font-weight:600}
.vchart figcaption span{font-size:11.5px; color:var(--ink-3)}
.vchart svg{display:block; width:100%; height:auto; margin-top:4px; overflow:visible}
.vchart .grid, .vchart .base{stroke:var(--line); stroke-width:1}
.vchart .base{stroke:var(--line-2)}
.vchart .col{fill:var(--ink-3)}
.vchart .col.cur{fill:var(--accent)}
.vchart .hit{fill:transparent}
.vchart .hit:hover{fill:var(--panel-2); fill-opacity:.6}
.vchart text{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; fill:var(--ink-3); font-variant-numeric:tabular-nums}
.vchart .cap{fill:var(--ink); font-weight:600; text-anchor:end}
.vchart .xl.end{text-anchor:end}
.tableview{margin-top:8px; font-size:12.5px}
.tableview summary{cursor:pointer; color:var(--ink-3); font-size:12px; font-weight:600; padding:4px 0}
.tscroll{overflow-x:auto}
.tableview table, .htable{width:100%; border-collapse:collapse; margin-top:6px; font-variant-numeric:tabular-nums}
.tableview th, .tableview td, .htable th, .htable td{padding:5px 8px 5px 0; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.tableview th, .htable th{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.tableview td, .htable td{color:var(--ink-2); font-size:12.5px}

/* per-exercise history */
.histlist{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.hrow{background:var(--panel)}
.hhead{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; text-align:left}
.hname{flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.3}
.hsub{display:block; font-size:11.5px; font-weight:400; color:var(--ink-3)}
.hval{flex:none; min-width:48px; text-align:right; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; line-height:1.25}
.hval span{display:block; font-size:10.5px; font-weight:400; color:var(--ink-3)}
.hrow[data-open="true"] .hhead{background:var(--panel-2)}
.hrow .tscroll{padding:0 12px 10px}
.htable .met{color:var(--ok); font-weight:600}
.spark{flex:none; overflow:visible}
.spark .std{stroke:var(--line-2); stroke-width:1}
.spark polyline{fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.spark circle{fill:var(--accent); stroke:var(--panel); stroke-width:2}
.spark circle[data-hit="true"]{fill:var(--ok)}
.lasttime{display:flex; align-items:center; gap:10px; margin-top:9px; font-size:12px; color:var(--ink-3)}
.lasttime b{color:var(--ink-2); font-family:"IBM Plex Mono",monospace; font-weight:600}
@media (max-width:430px){ .hhead .spark{width:64px; height:auto} }
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* first-run hint */
.hint{margin-top:14px; padding:14px 15px; border-radius:6px; background:var(--accent-soft); border:1px solid var(--accent); font-size:13px; line-height:1.5}
.hint b.ht{display:block; font-family:Chivo,sans-serif; font-weight:800; font-size:15px; margin-bottom:6px}
.hint ol{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:5px; color:var(--ink-2)}
.hint ol b{color:var(--ink)}
.hint .rowbtns{margin-top:11px}
.empty{padding:28px 16px; text-align:center; color:var(--ink-3); font-size:13px; line-height:1.6}

/* --- generic small controls --- */
.rowbtns{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.btn{padding:8px 15px; border-radius:6px; font-size:12.5px; font-weight:600; border:1px solid var(--line-2); color:var(--ink-2)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.danger{color:var(--warn); border-color:var(--warn)}
.chiprow{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.chip{padding:5px 11px; border-radius:14px; font-size:11.5px; font-weight:600; color:var(--ink-3); border:1px solid var(--line-2)}
.chip[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}

@media (max-width:600px){
  .xrow{flex-wrap:wrap}
  .xrow .extra{flex-basis:100%; padding-bottom:5px}
  .xlog{padding:0 13px 10px 43px}
}
@media (max-width:430px){
  .dots{padding-left:13px}
  .detail{padding-left:13px}
  .laneswitch{padding-left:13px}
  .sessbar{padding:11px 12px}
  .node{min-width:96px; flex-basis:96px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}