:root{color-scheme:light;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
/* Layout: a fixed app shell (bar, sub-tabs, one pane, tab bar). Nothing scrolls: tabs and pop-ups do the moving.
   Yellow marks only the thing to do now. */
:root{
  --paper:#F3F5EF; --card:#FFFFFF; --ink:#12211B; --ink-2:#4F5E56; --rule:#CCD4CA; --rule-2:#E4E9E1;
  --flag:#FFD21F; --flag-ink:#14231C; --flag-edge:#D4AA00; --flag-far:#9C861A; --flag-mat:#F4C500; --flag-prop:#CDA500;
  --rest:#DCE8DF; --rest-mat:#C9D9CE; --good:#1A7A4F; --low:#B4530A; --focus:#1F5FBF; --scrim:rgba(18,33,27,.6);
  --fig-ink:#12211B; --fig-far:#93A39A; --fig-bg:#FFFFFF; --fig-mat:#E9EDE5; --fig-prop:#B7C2B9;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1914; --card:#14231C; --ink:#EDF2EA; --ink-2:#A2B3A8; --rule:#2D4035; --rule-2:#203128;
    --flag:#FFD21F; --flag-ink:#14231C; --flag-edge:#B38F00; --flag-far:#9C861A; --flag-mat:#F4C500; --flag-prop:#CDA500;
    --rest:#1B3329; --rest-mat:#254436; --good:#63D6A2; --low:#F0B25E; --focus:#8DB8FF; --scrim:rgba(4,10,7,.72);
    --fig-ink:#EDF2EA; --fig-far:#62776B; --fig-bg:#14231C; --fig-mat:#1C2F26; --fig-prop:#3B5146;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1914; --card:#14231C; --ink:#EDF2EA; --ink-2:#A2B3A8; --rule:#2D4035; --rule-2:#203128;
  --flag:#FFD21F; --flag-ink:#14231C; --flag-edge:#B38F00; --flag-far:#9C861A; --flag-mat:#F4C500; --flag-prop:#CDA500;
  --rest:#1B3329; --rest-mat:#254436; --good:#63D6A2; --low:#F0B25E; --focus:#8DB8FF; --scrim:rgba(4,10,7,.72);
  --fig-ink:#EDF2EA; --fig-far:#62776B; --fig-bg:#14231C; --fig-mat:#1C2F26; --fig-prop:#3B5146;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box }
html{ height:100%; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; -webkit-text-size-adjust:100% }
body{ height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--paper); color:var(--ink); font:400 15px/1.42 var(--body); -webkit-font-smoothing:antialiased }
h1,h2,h3,p,ol,ul,dl,dd,dt{ margin:0 }
ol,ul{ padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none }
a{ color:inherit; -webkit-tap-highlight-color:transparent }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
b{ font-weight:600 }

.label{ font:600 13px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
h1{ font:700 clamp(54px,17.5vw,88px)/.84 var(--display); text-transform:uppercase; letter-spacing:-.005em }
h2{ font:700 clamp(30px,9vw,44px)/.95 var(--display); text-transform:uppercase; text-wrap:balance }
h3{ font:700 21px/1 var(--display); letter-spacing:.03em; text-transform:uppercase }
.lede{ font-size:14.5px; line-height:1.36 }
.fine{ font-size:13px; line-height:1.4; color:var(--ink-2) }
.empty{ color:var(--ink-2); padding:14px; border:1.5px dashed var(--rule); border-radius:12px }
.sec-h{ flex:none; display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.sec-h .label:last-child{ text-align:right }
.tick{ width:16px; height:16px; display:block }
.chip{ font:600 12px/1 var(--display); letter-spacing:.06em; padding:3px 5px 2px; border:1.5px solid currentColor; border-radius:4px; text-transform:uppercase; white-space:nowrap }
.chip.on{ background:var(--flag); color:var(--flag-ink); border-color:var(--flag-edge) }

/* ---------- shell ---------- */
.app,.sheet,.player,.pop{ -webkit-user-select:none; user-select:none }
input{ -webkit-user-select:text; user-select:text }
.app{ position:fixed; inset:0; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto;
  padding:var(--sat) var(--sar) 0 var(--sal); background:var(--paper) }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding-inline:16px; -webkit-user-select:none; user-select:none }
.brand{ display:flex; align-items:center; gap:10px; font:700 17px/1 var(--display); letter-spacing:.16em; text-transform:uppercase }
.mark{ position:relative; width:24px; height:16px; border-top:4px solid var(--ink); border-bottom:2px solid var(--ink) }
.mark::after{ content:""; position:absolute; left:8px; top:1px; width:7px; height:7px; background:var(--flag); box-shadow:0 0 0 1px var(--flag-edge) }
.bar-r{ font:600 13px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.subtabs{ display:flex; padding-inline:12px; border-bottom:1px solid var(--rule) }
.st{ flex:1 1 0; min-width:0; height:40px; padding:0 2px; text-align:center; white-space:nowrap; font:600 14px/1 var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2) }
.st[aria-selected="true"]{ color:var(--ink); box-shadow:inset 0 -3px 0 var(--ink) }
.view{ min-width:0; min-height:0; overflow:hidden; display:flex; justify-content:center; outline:none }
.pane{ width:100%; max-width:640px; height:100%; min-height:0; padding:12px 16px; display:flex; flex-direction:column; gap:10px;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none }
.pane::-webkit-scrollbar{ display:none }
.tabs{ display:flex; justify-content:space-around; gap:2px; padding:6px 8px calc(6px + var(--sab)); background:var(--card); border-top:1px solid var(--rule) }
.tab{ flex:1 1 0; max-width:132px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 0 1px; font:600 12px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.tab .ic{ width:58px; height:30px; border-radius:15px; display:grid; place-items:center }
.tab svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.tab[aria-current="page"]{ color:var(--ink) }
.tab[aria-current="page"] .ic{ background:var(--flag); color:var(--flag-ink); box-shadow:inset 0 -2px 0 var(--flag-edge) }

/* wide screens and phones on their side: the tab bar becomes a rail */
@media (min-width:900px), (orientation:landscape) and (max-height:540px){
  .app{ grid-template-columns:92px minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); padding-bottom:var(--sab) }
  .bar,.subtabs,.view{ grid-column:2 }
  .tabs{ grid-column:1; grid-row:1 / -1; flex-direction:column; justify-content:flex-start; gap:10px; padding:56px 6px 12px; border-top:0; border-right:1px solid var(--rule) }
  .tab{ flex:none; max-width:none; padding:4px 0 }
  .subtabs{ justify-content:center }
  .st{ max-width:140px }
}
@media (orientation:landscape) and (max-height:540px){
  .bar{ height:34px }
  .tabs{ padding-top:10px; gap:2px }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 20px; border-radius:12px; background:var(--ink); color:var(--paper); font:700 20px/1.05 var(--display); letter-spacing:.08em; text-transform:uppercase; text-align:center }
.btn.flag{ background:var(--flag); color:var(--flag-ink); box-shadow:inset 0 -3px 0 var(--flag-edge) }
.btn.ghost{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor }
.btn.sm{ min-height:40px; font-size:15px; padding:6px 14px; border-radius:10px }
.btn:disabled{ opacity:.55; cursor:default }
.x{ min-height:40px; padding:0 4px; font-size:14px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px }
.x.sure{ color:var(--low); font-weight:600 }

/* ---------- today: start ---------- */
.week{ flex:none; display:flex; align-items:flex-end; justify-content:space-between; gap:12px }
.week-l{ display:flex; flex-direction:column; gap:4px }
.week-n{ font:500 17px/1 var(--display); letter-spacing:.02em; white-space:nowrap }
.week-n b{ font-weight:700; font-size:30px }
.days{ display:grid; grid-template-columns:repeat(7,28px); gap:5px }
.day{ display:flex; flex-direction:column; align-items:center; gap:3px }
.day-n{ font:600 11px/1 var(--display); letter-spacing:.06em; color:var(--ink-2) }
.day-b{ width:28px; height:28px; border:1.5px solid var(--rule); border-radius:8px; display:grid; place-items:center }
.day.now .day-b{ border:2px solid var(--ink) }
.day.now .day-n{ color:var(--ink) }
.day.done .day-b{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.day.part .day-b::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-2) }
.rots{ flex:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) 4px minmax(0,1fr); gap:4px }
.rot{ position:relative; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1.5px solid var(--rule); border-radius:8px; color:var(--ink-2); text-align:center }
.rot span{ font:600 11px/1 var(--display); letter-spacing:.09em; text-transform:uppercase }
.rot b{ font:700 19px/1 var(--display) }
.rot.hips{ grid-column:8 }
.rot.hips b{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; line-height:19px }
.rot.done{ color:var(--ink); border-color:var(--ink) }
.rot.on{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.rot .tick{ position:absolute; right:2px; bottom:2px; width:11px; height:11px }
.hero{ flex:1 1 0; min-height:150px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,45%); gap:6px 8px; align-items:center; padding:12px 12px 12px 14px;
  background:var(--card); border:1.5px solid var(--ink); border-radius:14px; --fig-bg:var(--card) }
.hero-t{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.hero .lede{ color:var(--ink-2) }
.stage{ align-self:stretch; min-width:0; min-height:0; display:flex; flex-direction:column; gap:4px; border-radius:10px }
.stage-fig{ flex:1 1 0; min-height:0; display:flex }
.stage-cap{ flex:none; font-size:12.5px; line-height:1.25; text-align:center; color:var(--ink-2) }
.stage-cap b{ color:var(--ink) }
.seg{ flex:none; display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--ink); border-radius:12px; overflow:hidden }
.seg button{ height:42px; padding:0 8px; text-align:center; font-size:14px; white-space:nowrap; color:var(--ink-2) }
.seg button b{ font:600 16px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-right:3px }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper) }
.seg button[aria-pressed="true"] b{ color:inherit }
.seg-note{ flex:none; height:45px; display:grid; place-items:center; text-align:center; font-size:14px; color:var(--ink-2); border:1.5px dashed var(--rule); border-radius:12px }
.go{ flex:none; width:100%; min-height:60px; justify-content:space-between; font-size:25px; padding-inline:20px; border-radius:14px }
.go-t{ font-weight:600; font-variant-numeric:tabular-nums; opacity:.78 }
@media (min-height:700px){
  .hero{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:stretch; padding:14px }
  .stage-cap{ font-size:13.5px }
}

/* ---------- today: running order ---------- */
.shape{ flex:none; display:flex; gap:2px; height:10px }
.shape-s{ min-width:3px; border-radius:2px }
.s0{ background:var(--rule) }
.s1{ background:var(--ink) }
.s2{ background:var(--ink-2) }
.s3{ background:var(--fig-far) }
.key{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:7px }
.card{ background:var(--card); border:1.5px solid var(--ink); border-radius:14px; padding:0 12px; --fig-bg:var(--card) }
.order{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; padding-bottom:2px }
.blk-h{ flex:none; display:flex; justify-content:space-between; align-items:center; gap:10px; height:23px; padding-top:5px }
.blk-h + .row{ border-top:0 }
.row + .blk-h{ border-top:1.5px solid var(--ink) }
.row{ flex:1 1 0; min-height:38px; max-height:66px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; border-top:1px solid var(--rule-2) }
.thumb{ display:block; width:44px; height:32px }
.row-main{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.row-name{ font-weight:600; font-size:14.5px; line-height:1.14; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.row-name .chip{ margin-left:6px; font-size:11px; padding:2px 4px 1px; vertical-align:1px }
.row-sub{ display:none; font-size:13px; line-height:1.3; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.row-dose{ font:600 19px/1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap }
.row-dose i{ font-style:normal; font-weight:500; font-size:14px; color:var(--ink-2) }
@media (min-height:760px){
  .row-sub{ display:block }
  .thumb{ width:52px; height:42px }
  .row{ grid-template-columns:52px minmax(0,1fr) auto }
}

/* ---------- figures ---------- */
.fig{ display:block; width:100%; height:100%; overflow:visible }
.fig .h{ fill:none; stroke:var(--fig-bg); stroke-linecap:round; stroke-linejoin:round }
.fig .hf{ fill:var(--fig-bg) }
.fig .l{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.fig .near{ stroke:var(--fig-ink) }
.fig .far{ stroke:var(--fig-far) }
.fig .t{ fill:var(--fig-ink); stroke:var(--fig-ink); stroke-linejoin:round }
.fig .hd{ fill:var(--fig-ink) }
.fig .mat{ fill:var(--fig-mat) }
.fig .p-top{ fill:var(--fig-prop); opacity:.55 }
.fig .p-s1{ fill:var(--fig-prop); opacity:.82 }
.fig .p-s2{ fill:var(--fig-prop) }
.fig .p-wall{ fill:var(--fig-prop); opacity:.32 }
.fig .p-bar{ fill:none; stroke:var(--fig-prop); stroke-width:6; stroke-linecap:round }

/* ---------- moves ---------- */
.tiles{ flex:1 1 0; min-height:calc(var(--rows) * 76px); display:grid; gap:8px; grid-template-rows:repeat(var(--rows),minmax(0,1fr)) }
.tiles.c1{ grid-template-columns:minmax(0,1fr); max-height:calc(var(--rows) * 158px) }
.tiles.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-height:calc(var(--rows) * 216px) }
.tiles.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-height:calc(var(--rows) * 216px) }
.tile{ position:relative; min-width:0; min-height:0; display:flex; background:var(--card); border:1px solid var(--rule); border-radius:14px; overflow:hidden; --fig-bg:var(--card) }
.tile-fig{ display:flex; min-width:0; min-height:0 }
.tile-t{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.tile-name{ font:600 17px/1.08 var(--display); letter-spacing:.03em; text-transform:uppercase }
.tile-why{ font-size:13px; line-height:1.3; color:var(--ink-2); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.tile-you{ position:absolute; top:6px; right:6px; font-size:11px; padding:2px 4px 1px }
.c1 .tile{ align-items:center; gap:12px; padding:6px 12px 6px 8px }
.c1 .tile-fig{ flex:none; width:36%; height:100%; max-height:120px }
.c1 .tile-t{ flex:1 1 0 }
.c1 .tile-name{ font-size:19px }
.c2 .tile,.c3 .tile{ flex-direction:column; gap:4px; padding:8px 8px 9px }
.c2 .tile-fig,.c3 .tile-fig{ flex:1 1 0; width:100% }
.c2 .tile-t,.c3 .tile-t{ flex:none; min-height:2.16em; justify-content:center; text-align:center }
.c3 .tile-name{ font-size:14.5px }
.c3 .tile{ padding:6px 5px 7px }
.c3 .tile-you{ top:4px; right:4px }

/* ---------- plan ---------- */
.wk{ flex:1 1 0; min-height:0; max-height:420px; display:flex; flex-direction:column }
.wk-r{ flex:1 1 0; min-height:40px; display:grid; grid-template-columns:24px minmax(0,1fr); gap:11px; align-items:center; border-top:1px solid var(--rule-2) }
.wk-r:first-child{ border-top:0 }
.wk-n{ width:24px; height:24px; display:grid; place-items:center; border-radius:6px; font:700 15px/1 var(--display); background:var(--ink); color:var(--paper) }
.wk-n.k-pull{ background:var(--ink-2) }
.wk-n.k-legs{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink) }
.wk-r.off .wk-n{ background:transparent; color:var(--ink-2); box-shadow:inset 0 0 0 1.5px var(--rule) }
.wk-m{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.wk-name{ font:700 18px/1 var(--display); letter-spacing:.04em; text-transform:uppercase }
.wk-tag{ font-size:13px; line-height:1.25; color:var(--ink-2) }
.notes{ flex:none; display:flex; flex-direction:column; gap:6px }
.notes p{ font-size:14px; line-height:1.36 }
.bars{ flex:none; display:flex; flex-direction:column; gap:6px }
.bars > div{ display:grid; grid-template-columns:52px minmax(0,1fr) 44px; gap:10px; align-items:center }
.bars .label:last-child{ text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.02em; font-size:15px }
.bars .shape{ height:16px }
.anat{ flex:1 1 0; min-height:0; max-height:400px; display:flex; flex-direction:column }
.anat li{ flex:1 1 0; min-height:60px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-content:center; border-top:1px solid var(--rule-2) }
.anat li:first-child{ border-top:0 }
.anat b{ font:700 18px/1.1 var(--display); letter-spacing:.04em; text-transform:uppercase }
.anat i{ font:600 18px/1.1 var(--display); font-style:normal; font-variant-numeric:tabular-nums }
.anat span{ grid-column:1 / -1; font-size:13.5px; line-height:1.34; color:var(--ink-2) }
.tchips{ flex:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px }
.tchip{ position:relative; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1.5px solid var(--rule); border-radius:8px; color:var(--ink-2); text-align:center }
.tchip span{ font:600 13px/1 var(--display); letter-spacing:.08em; text-transform:uppercase }
.tchip b{ font:700 13px/1 var(--display); letter-spacing:.06em }
.tchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.tchip .dot{ position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--flag); box-shadow:0 0 0 1.5px var(--flag-edge) }
.lvls{ flex:1 1 0; min-height:0; max-height:234px; display:flex; flex-direction:column; border:1.5px solid var(--ink); border-radius:14px; overflow:hidden; background:var(--card); --fig-bg:var(--card) }
.lvl{ flex:1 1 0; min-height:54px; display:grid; grid-template-columns:26px minmax(0,1fr) 54px; gap:10px; align-items:center; width:100%; padding:4px 10px 4px 12px }
.lvl + .lvl{ border-top:1px solid var(--rule) }
.lvl-n{ font:700 27px/1 var(--display); color:var(--ink-2); text-align:center }
.lvl-m{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.lvl-m b{ line-height:1.2 }
.lvl-m span{ font-size:13px; line-height:1.28; color:var(--ink-2) }
.lvl-f{ display:block; width:54px; height:42px }
.lvl.on{ background:var(--flag); color:var(--flag-ink); --fig-bg:var(--flag); --fig-ink:var(--flag-ink); --fig-far:var(--flag-far); --fig-mat:var(--flag-mat); --fig-prop:var(--flag-prop) }
.lvl.on .lvl-n,.lvl.on .lvl-m span{ color:var(--flag-ink) }
.nudge{ flex:none; background:var(--rest); padding:9px 12px; border-radius:10px; font-size:14px; line-height:1.36 }
.nudge-row{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--rest); padding:8px 8px 8px 12px; border-radius:12px; font-size:14px; line-height:1.3 }
.nudge-row .btn{ flex:none }
.rules{ flex:none; display:flex; flex-direction:column }
.rules li{ padding:7px 0; border-top:1px solid var(--rule); font-size:14px; line-height:1.36 }
.rules li:first-child{ border-top:0; padding-top:0 }
.facts-t{ flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
.facts-t div{ min-width:0; padding:8px 10px 7px; background:var(--card); border:1px solid var(--rule); border-radius:10px; display:flex; flex-direction:column; gap:3px }
.facts-t b{ font:700 23px/1 var(--display); white-space:nowrap }
.facts-t span{ font-size:12px; line-height:1.2; color:var(--ink-2) }
.facts{ flex:none }
.facts > div{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px; padding:7px 0; border-top:1px solid var(--rule) }
.facts > div:first-child{ border-top:0 }
.facts dt{ font:600 12.5px/1.55 var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2) }
.facts dd{ font-size:14px; line-height:1.36 }
@media (min-height:760px){
  .notes p,.rules li,.facts dd,.nudge{ font-size:15px }
  .rules li{ padding:10px 0 }
  .anat span{ font-size:14.5px }
}

/* ---------- progress ---------- */
.stats{ flex:none; display:flex; background:var(--card); border:1.5px solid var(--ink); border-radius:14px }
.stats div{ flex:1 1 0; min-width:0; padding:10px 12px 9px; display:flex; flex-direction:column; gap:4px }
.stats div + div{ border-left:1px solid var(--rule) }
.stats b{ font:700 38px/.9 var(--display); font-variant-numeric:tabular-nums }
.stats b i{ font:500 17px/1 var(--display); font-style:normal; color:var(--ink-2) }
.stats span{ font-size:12.5px; line-height:1.22; color:var(--ink-2) }
.chart{ flex:1 1 0; min-height:96px; max-height:300px; display:block; width:100% }
.c-grid{ stroke:var(--ink); stroke-width:1.5; fill:none }
.c-target{ stroke:var(--ink-2); stroke-width:1; stroke-dasharray:3 3; fill:none }
.c-bar{ fill:var(--ink) }
.c-bar.now{ fill:var(--flag); stroke:var(--flag-edge); stroke-width:1 }
.c-zero{ fill:var(--rule) }
.c-t,.c-x{ font:500 10px var(--body); fill:var(--ink-2) }
.c-x{ text-anchor:middle }
.c-x.now{ fill:var(--ink); font-weight:600 }
.c-v{ font:700 13px var(--display); fill:var(--ink); text-anchor:middle }
.trks{ flex:1 1 0; min-height:0; max-height:480px; display:flex; flex-direction:column }
.trk{ flex:1 1 0; min-height:42px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; border-top:1px solid var(--rule-2) }
.trk:first-child{ border-top:0 }
.trk-m{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.trk-n{ font-weight:600; font-size:14.5px; line-height:1.14; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.trk-n .chip{ margin-left:6px; font-size:11px; padding:2px 4px 1px; vertical-align:1px }
.trk-s{ display:none; font-size:12.5px; color:var(--ink-2) }
.trk-0{ grid-column:2 / 4; font-size:13px; color:var(--ink-2) }
.spark{ width:56px; height:20px; grid-column:2 }
.trk .reps{ grid-column:3 }
.spark polyline{ fill:none; stroke:var(--ink-2); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round }
.spark circle{ fill:var(--ink) }
.reps{ display:inline-flex; gap:3px; flex:none }
.rep{ min-width:26px; height:26px; padding-inline:3px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid transparent; font:600 16px/1 var(--display); font-variant-numeric:tabular-nums; color:var(--ink) }
.rep.hi{ border-color:var(--good); border-radius:50% }
.rep.lo{ border-color:var(--low); border-radius:3px }
.rep.wide{ border-color:var(--rule); border-radius:5px; padding-inline:8px }
.fine .rep{ min-width:20px; height:20px; font-size:13px; vertical-align:middle; margin-right:2px }
@media (min-height:760px){ .trk-s{ display:block } }
.bench{ flex:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:end }
.bench label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; line-height:1.2; color:var(--ink-2); white-space:nowrap }
.bench input{ width:100%; height:46px; padding:4px 8px; border:1.5px solid var(--ink); border-radius:10px; background:var(--card); color:var(--ink); font:600 23px/1 var(--display); font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none; -moz-appearance:textfield }
.bench input::-webkit-outer-spin-button,.bench input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.bench .btn{ grid-column:1 / -1; min-height:48px }
.form-msg{ flex:none; min-height:1.3em; font-size:13.5px; line-height:1.3; color:var(--ink-2) }
.tb{ flex:none; display:flex; flex-direction:column }
.tb-h,.tb-r{ display:grid; grid-template-columns:1.5fr repeat(4,1fr) 14px; gap:6px; align-items:center; width:100% }
.tb-h{ padding:0 12px 5px; font:600 12px/1.2 var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2) }
.tb-b{ display:flex; flex-direction:column }
.tb-r{ min-height:38px; font-size:14px; font-variant-numeric:tabular-nums; border-top:1px solid var(--rule-2) }
.tb-r:first-child{ border-top:0 }
.tb-r b{ font:600 17px/1 var(--display) }
.chev{ width:14px; height:14px; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.lgs{ flex:1 1 0; min-height:0; max-height:400px; display:flex; flex-direction:column }
.lg{ flex:1 1 0; min-height:44px; display:grid; grid-template-columns:78px minmax(0,1fr) auto 14px; gap:10px; align-items:center; width:100%; border-top:1px solid var(--rule-2) }
.lg:first-child{ border-top:0 }
.lg-d{ font-size:13px; color:var(--ink-2) }
.lg b{ font:700 19px/1 var(--display); letter-spacing:.04em; text-transform:uppercase }
.lg-m{ font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap }
.pager{ flex:none; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center }
.pager .btn:last-child{ justify-self:end }
.pager .btn:first-child{ justify-self:start }
.pager .label{ text-align:center }
.sync{ flex:none; text-align:center }

/* scorecard rows, shared by the pop-up and the finish screen */
.sc{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.sc-r{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:7px; border-top:1px solid var(--rule-2) }
.sc-n{ min-width:0; font-size:14px; line-height:1.25 }
.sc-n .chip{ margin-left:6px; font-size:11px; padding:2px 4px 1px; vertical-align:1px }
.sc.on-done{ background:var(--card); border:1.5px solid var(--ink); border-radius:14px; padding:11px 12px }
.sc.on-done .sc-r:first-child{ border-top:0; padding-top:0 }

/* ---------- pop-up ---------- */
.pop{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; background:var(--scrim) }
.pop-card{ width:100%; max-width:380px; max-height:100%; overflow-y:auto; scrollbar-width:none; background:var(--card); color:var(--ink); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:10px }
.pop-card h2{ font-size:34px }
.pop-card .sc-r:first-child{ border-top:1.5px solid var(--ink) }
.pop-f{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px }

/* ---------- move pop-up ---------- */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; justify-content:center; background:var(--scrim) }
.sheet-panel{ width:100%; max-width:640px; height:100%; display:flex; flex-direction:column; gap:10px; overflow-x:hidden; overflow-y:auto; scrollbar-width:none;
  padding:calc(4px + var(--sat)) 16px calc(12px + var(--sab)); background:var(--paper); color:var(--ink) }
.sheet-panel::-webkit-scrollbar,.pop-card::-webkit-scrollbar{ display:none }
.sheet-bar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px }
.back{ display:inline-flex; align-items:center; gap:2px; min-height:40px; padding:0 12px 0 4px; margin-left:-8px; border-radius:10px; font:600 15px/1 var(--display); letter-spacing:.1em; text-transform:uppercase }
.back svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.demo{ position:relative; flex:1 1 0; min-height:96px; max-height:360px; display:flex; padding:8px; background:var(--card); border:1px solid var(--rule); border-radius:14px; --fig-bg:var(--card) }
.demo-fig{ flex:1 1 0; min-width:0; min-height:0; display:flex }
.demo-play{ position:absolute; right:8px; bottom:8px; min-height:36px; padding:0 12px; border-radius:8px; background:var(--card); box-shadow:inset 0 0 0 1.5px var(--ink); font:600 13px/1 var(--display); letter-spacing:.1em; text-transform:uppercase }
.sheet-panel h2{ flex:none }
.subtabs.in{ flex:none; padding-inline:0 }
.sps{ flex:none; display:grid }
.sp{ grid-area:1 / 1; min-width:0; visibility:hidden }
.sp.on{ visibility:visible }
.how{ counter-reset:h; display:flex; flex-direction:column; gap:7px }
.how li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; font-size:14.5px; line-height:1.36 }
.how li::before{ counter-increment:h; content:counter(h); font:700 20px/1.05 var(--display); color:var(--ink-2) }
.tips{ display:flex; flex-direction:column; gap:9px }
.tips dt{ font:600 13px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:2px }
.tips dd{ font-size:14.5px; line-height:1.36 }
.sheet-foot{ flex:none; display:flex; gap:8px; margin-top:auto }
.vid{ flex:1 1 0; min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:center; min-height:54px; padding:7px 12px 7px 10px; border-radius:14px; background:var(--ink); color:var(--paper); text-decoration:none }
.vid-p{ position:relative; width:34px; height:34px; border-radius:50%; background:var(--flag) }
.vid-p::after{ content:""; position:absolute; left:13px; top:10px; border-left:11px solid var(--flag-ink); border-top:7px solid transparent; border-bottom:7px solid transparent }
.vid-t{ min-width:0 }
.vid b{ display:block; font:700 17px/1.1 var(--display); letter-spacing:.08em; text-transform:uppercase }
.vid-t span{ display:block; margin-top:1px; font-size:12.5px; line-height:1.25; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vid-more{ flex:none; display:grid; place-items:center; min-width:66px; padding:0 10px; border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--ink); font:600 13px/1.15 var(--display); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; text-align:center }
@media (min-height:760px){
  .how li,.tips dd{ font-size:15.5px }
  .how{ gap:10px }
}
@media (min-width:700px) and (min-height:640px){
  .sheet{ align-items:center }
  .sheet-panel{ height:min(800px,94%); border-radius:18px; padding:8px 20px 18px }
}

/* ---------- player ---------- */
.player{
  --p-bg:var(--card); --p-ink:var(--ink); --p-line:var(--rule); --p-btn:var(--ink); --p-btn-ink:var(--paper);
  position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; gap:10px; overflow:hidden;
  padding:calc(10px + var(--sat)) max(16px,calc((100% - 1040px) / 2)) calc(14px + var(--sab));
  background:var(--p-bg); color:var(--p-ink); --fig-bg:var(--p-bg);
}
.player[data-phase="work"]{
  --p-bg:var(--flag); --p-ink:var(--flag-ink); --p-line:var(--flag-edge); --p-btn:var(--flag-ink); --p-btn-ink:var(--flag);
  --fig-ink:var(--flag-ink); --fig-far:var(--flag-far); --fig-mat:var(--flag-mat); --fig-prop:var(--flag-prop);
}
.player[data-phase="rest"]{ --p-bg:var(--rest); --p-line:var(--ink-2); --fig-mat:var(--rest-mat) }
.player[data-phase="done"]{ --p-bg:var(--paper) }
.player .label{ color:var(--p-ink); opacity:.78 }
.p-top{ flex:none; display:flex; align-items:center; gap:12px }
.p-x{ flex:none; min-height:40px; padding:0 12px; border-radius:8px; box-shadow:inset 0 0 0 1.5px currentColor; font:600 14px/1 var(--display); letter-spacing:.1em; text-transform:uppercase }
.p-ticks{ flex:1; min-width:0; display:flex; align-items:center; gap:3px }
.p-ticks i{ flex:1 1 0; min-width:2px; height:6px; border-radius:1px; background:var(--p-line) }
.p-ticks i.gapx{ flex:0 0 5px; background:none }
.p-ticks i.d{ background:var(--p-ink) }
.p-ticks i.c{ height:14px; background:var(--p-ink) }
.p-ticks i.n{ height:14px; background:none; box-shadow:inset 0 0 0 1.5px var(--p-ink) }
.p-count{ flex:none; font:600 15px/1 var(--display); letter-spacing:.04em; font-variant-numeric:tabular-nums }
.p-run{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px }
.p-main{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; outline:none }
.p-head{ flex:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px }
.p-head h2{ flex-basis:100%; font-size:clamp(30px,9.2vw,56px) }
#p-cue{ flex-basis:100%; min-height:1.35em; font-size:16px; line-height:1.35 }
.p-fig{ flex:1 1 0; min-height:80px; display:flex }
.p-num{ flex:none; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.p-big{ font:700 clamp(84px,29vw,170px)/.8 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
#p-sub{ min-height:1.35em; font-size:15px; line-height:1.35 }
.p-clock{ position:absolute; right:0; top:2px; font:600 24px/1 var(--display); font-variant-numeric:tabular-nums; opacity:.8 }
.p-stepper{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; padding-top:9px; border-top:1.5px solid var(--p-ink) }
.p-stepper > span{ min-width:0; font-size:14px; line-height:1.3; font-weight:600 }
.p-stepper div{ flex:none; display:flex; align-items:center; gap:6px }
.p-stepper button{ width:54px; height:50px; border-radius:10px; box-shadow:inset 0 0 0 1.5px var(--p-ink); font:600 30px/1 var(--display); text-align:center }
.p-stepper b{ min-width:52px; text-align:center; font:700 42px/1 var(--display); font-variant-numeric:tabular-nums }
.p-ctl{ flex:none; display:flex; flex-direction:column; gap:8px }
.btn.big{ width:100%; min-height:66px; font-size:27px; border-radius:14px; background:var(--p-btn); color:var(--p-btn-ink) }
.p-row{ display:flex; gap:6px }
.p-row button{ flex:1 1 0; min-width:0; min-height:44px; padding:0 2px; border-radius:8px; box-shadow:inset 0 0 0 1.5px var(--p-line); font:600 14px/1 var(--display); letter-spacing:.07em; text-transform:uppercase; text-align:center; color:var(--p-ink) }
.p-row button:disabled{ opacity:.35; cursor:default }
.player.paused .p-big{ opacity:.45 }
.p-confirm,.p-done{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; width:100%; max-width:520px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; justify-content:center; padding:4px }
.p-done{ justify-content:flex-start; padding-top:6vh }
.p-done .btn{ margin-top:8px }
.p-done .lede,.p-confirm .lede{ font-size:16px }
.player[data-phase="done"] .p-top{ display:none }
@media (min-width:760px), (orientation:landscape) and (max-height:540px){
  .p-main{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); column-gap:32px }
  .p-head{ grid-column:2; grid-row:1; align-self:end }
  .p-fig{ grid-column:1; grid-row:1 / span 2 }
  .p-num{ grid-column:2; grid-row:2; align-self:start }
  .p-ctl{ flex-direction:row; align-items:stretch }
  .p-ctl .btn.big{ flex:1 1 40%; min-height:56px }
  .p-row{ flex:1 1 60% }
  .p-row button{ min-height:56px }
}
@media (orientation:landscape) and (max-height:540px){
  .p-big{ font-size:clamp(64px,26vh,120px) }
  .p-head h2{ font-size:clamp(24px,8vh,40px) }
}

/* ---------- small phones ---------- */
@media (max-width:359px){
  .days{ grid-template-columns:repeat(7,25px); gap:4px }
  .day-b{ width:25px; height:25px }
  .pane{ padding-inline:12px }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .player{ transition:background-color .25s ease }
  .pane.enter{ animation:pane-in .16s ease-out }
  .sheet-panel{ animation:sheet-in .2s ease-out }
  .pop-card{ animation:pane-in .14s ease-out }
  .btn:active,.tile:active,.rot:active,.tchip:active,.tab:active .ic{ transform:scale(.97) }
  .row:active,.lg:active,.tb-r:active,.lvl:active,.st:active{ opacity:.6 }
}
@keyframes pane-in{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
@keyframes sheet-in{ from{ opacity:.4; transform:translateY(22px) } to{ opacity:1; transform:none } }