/* GymBunnies.fit — phone-first gym log.
   Layout: sticky header, one scrolling view, fixed bottom tab bar. */
:root{
  --bg:#eceee9; --surface:#f8f9f6; --inset:#e3e7e1; --ink:#1d2427; --muted:#5d686c; --line:#d3d8d2;
  --mat:#2f6b5e; --mat-soft:#d6e8e1; --benny:#4b5d8a; --benny-soft:#dfe5f3;
  --accent:var(--mat); --accent-soft:var(--mat-soft);
  --plate:#9e431c; --plate-soft:#f3e2da; --good:#24683f; --good-soft:#dcefe3; --warn:#845a0a; --warn-soft:#f5ebcf; --bad:#b0392e;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --nav-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#12181a; --surface:#1b2326; --inset:#232d31; --ink:#e7ebe7; --muted:#9aa6a8; --line:#2f393c;
  --mat:#6fb5a3; --mat-soft:#1f3531; --benny:#9fb0e0; --benny-soft:#232b40;
  --plate:#e08a64; --plate-soft:#3a2720; --good:#6cc38f; --good-soft:#1d3326; --warn:#e2b75a; --warn-soft:#3a3020; --bad:#ef7c70;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:1rem/1.45 var(--body);-webkit-tap-highlight-color:transparent;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 16px)}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:.01em;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a{color:var(--accent-text);font-weight:600}
.hidden{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.top h1{font-size:1.3rem;text-transform:uppercase;flex:1;line-height:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{white-space:nowrap;border:0;background:var(--accent);color:var(--bg);font:700 .95rem var(--display);text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;border-radius:999px}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:36px;height:36px;display:grid;place-items:center;font-size:1.1rem}
.sync{font:500 .7rem var(--mono);color:var(--muted);display:flex;align-items:center;gap:5px}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
.sync.pending::before{background:var(--warn)}
.sync.offline::before{background:var(--muted)}
.sync.error::before{background:var(--bad)}

main{max-width:760px;margin:0 auto;padding:16px;display:grid;gap:16px}
.banner{background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:.93rem}

/* bottom nav */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs button{border:0;background:none;height:var(--nav-h);display:grid;place-items:center;gap:0;font:600 .78rem var(--body);color:var(--muted);padding:6px 0}
nav.tabs button span{font-size:1.25rem;line-height:1}
nav.tabs button[aria-current="page"]{color:var(--accent-text)}
nav.tabs button[aria-current="page"] span{transform:translateY(-1px)}

/* common pieces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:8px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.between{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.h2{font-size:1.7rem;text-transform:uppercase;line-height:1.05}
.h3{font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em}
.eyebrow{font:600 .75rem var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.seg{display:inline-flex;background:var(--inset);border-radius:9px;padding:3px;gap:3px;flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:7px;padding:7px 12px;font:600 .9rem var(--body);color:var(--muted);min-height:36px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 4px;font:700 1rem var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:grid;line-height:1.1}
.chips button small{font:500 .7rem var(--body);text-transform:none;letter-spacing:0}
.chips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 14px;font:600 .95rem var(--body);min-height:42px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{min-height:34px;padding:5px 10px;font-size:.85rem}
.btn.block{width:100%}
.tag{display:inline-block;font:600 .66rem var(--body);text-transform:uppercase;letter-spacing:.08em;padding:1px 6px;border-radius:4px;vertical-align:2px;margin-left:6px}
.tag.orig{background:var(--inset);color:var(--muted)}
.tag.new{background:var(--plate-soft);color:var(--plate)}
.pill{display:flex;gap:8px;align-items:flex-start;border-radius:9px;padding:8px 10px;font-size:.92rem}
.pill.up{background:var(--good-soft)}
.pill.up::before{content:"▲";color:var(--good);font-size:.8rem;padding-top:3px}
.pill.hold{background:var(--warn-soft)}
.pill.hold::before{content:"●";color:var(--warn);font-size:.8rem;padding-top:3px}
.last{font-size:.9rem;color:var(--muted)}
.last b{color:var(--ink);font-weight:600}
label.field{display:grid;gap:4px;font-size:.88rem;color:var(--muted);min-width:0}
input[type=number],input[type=date],input[type=text],input[type=email],input[type=password],select,textarea{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:8px 10px;min-height:40px;width:100%;color:var(--ink)}
textarea{min-height:72px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 14px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:50;font-weight:600;max-width:calc(100% - 32px)}

/* today: exercise cards */
.ex .head{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:start}
h3.name,.ex .name{font-family:var(--body);font-weight:700;font-size:1.05rem;letter-spacing:normal;text-transform:none;font-style:normal;margin:0}
.ex .sr{font:500 .9rem var(--mono);white-space:nowrap}
.ex .why{color:var(--muted);font-size:.93rem}
.ex .note{font-size:.9rem;border-left:3px solid var(--accent);padding-left:8px}
details.more{border-top:1px dashed var(--line);padding-top:6px}
details.more summary{cursor:pointer;list-style:none;font:600 .95rem var(--display);text-transform:uppercase;letter-spacing:.07em;color:var(--accent-text);padding:4px 0;display:flex;gap:8px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font-family:var(--mono)}
details.more[open] summary::before{content:"−"}
.panel{display:grid;gap:12px;padding-top:8px}
.panel h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.panel p{margin:3px 0 0}
.video{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:7px 12px;border:1px solid var(--accent);border-radius:8px;text-decoration:none;background:var(--accent-soft)}
.video::before{content:"";border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.stretch{background:var(--inset);border-radius:8px;padding:9px 12px;font-size:.92rem}
.stretch b{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.stretch b span{font:500 .78rem var(--mono);color:var(--muted)}
.stretch p{color:var(--muted)}
.stretch-notes{margin:8px 0 0;display:grid;gap:2px;font-size:.9rem}
.stretch-notes dt{font:700 .7rem var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--ink);margin-top:4px}
.stretch a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.stretch-notes dd{margin:0;color:var(--ink)}
.stretch .tmr{margin:8px 0 4px;background:var(--surface)}
/* timers: same look everywhere (exercise tiles, stretches, rest) */
.tmr{background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px;margin-top:8px}
.tmr-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tmr-label{font:700 .72rem var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);flex-basis:100%}
.tmr-clock{font:700 1.9rem/1 var(--mono);font-variant-numeric:tabular-nums;min-width:4.2ch;margin-right:auto}
.tmr.counting .tmr-clock,.tmr.done .tmr-clock{color:var(--plate)}
.tmr.running .tmr-clock{color:var(--accent-text)}
.tmr-bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.tmr-bar i{display:block;height:100%;background:var(--accent);transition:width .15s linear}
.tmr.done .tmr-bar i{background:var(--plate)}
@media (prefers-reduced-motion:reduce){.tmr-bar i{transition:none}}
.tmr-vol{display:flex;align-items:center;gap:8px}
.tmr-vol-icon{font-size:1.05rem;width:1.4em;text-align:center}
.tmr-vol input{flex:1;accent-color:var(--accent);min-height:28px}
.tmr-note{margin-top:8px}
.tmr-adj{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tmr-adj .btn{min-height:44px}
.tmr-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tmr-mode .btn{min-height:44px}
.rest-tmr .tmr{background:transparent;border:0;padding:0}
.rest-tmr .tmr-main{flex-direction:column;align-items:stretch;gap:12px}
.rest-tmr .tmr-label{display:none}
.rest-tmr .tmr-clock{font:700 5.5rem/1 var(--display);text-align:center;margin:0}
.rest-tmr .tmr-main .btn{min-height:48px;font-size:1rem}
.rest-tmr .tmr-bar{height:8px}
.cardio-card{background:var(--plate-soft);border:1px dashed var(--plate)}
.cardio-card .h3{color:var(--plate)}
.sticky-cta{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 8px);z-index:5}

/* log */
.log-ex.skipped .sets,.log-ex.skipped .add-set{display:none}
.log-ex.skipped{opacity:.6}
.set{display:grid;grid-template-columns:40px 1fr 1fr;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.set.noweight{grid-template-columns:40px 1fr}
.set .n{font:600 .85rem var(--mono);color:var(--muted)}
/* per-set check-off box: shows the set number, then a check */
.set .setcheck{width:40px;height:40px;border-radius:10px;border:2px solid var(--line);background:var(--surface);color:var(--muted);font:700 .95rem var(--mono);display:grid;place-items:center;cursor:pointer;padding:0;align-self:start}
.set .setcheck[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-size:1.15rem}
.set.is-done .stepper input{color:var(--muted)}
.btn.ready{box-shadow:0 0 0 3px var(--accent-soft)}
@media (prefers-reduced-motion:no-preference){.btn.ready{animation:ready-pulse 1.6s ease-in-out 2}}
@keyframes ready-pulse{50%{box-shadow:0 0 0 7px var(--accent-soft)}}
.set .diff{grid-column:2 / -1;display:grid;grid-template-columns:repeat(3,1fr) 36px;gap:6px}
.set .diff button{border:1px solid var(--line);background:var(--surface);border-radius:8px;min-height:34px;font:600 .82rem var(--body);color:var(--muted)}
.set .diff button[aria-pressed="true"][data-d="1"]{background:var(--good-soft);border-color:var(--good);color:var(--ink)}
.set .diff button[aria-pressed="true"][data-d="2"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.set .diff button[aria-pressed="true"][data-d="3"]{background:var(--plate-soft);border-color:var(--plate);color:var(--ink)}
.set .diff .del{color:var(--bad);font-size:1rem}
.stepper{display:grid;grid-template-columns:40px 1fr 40px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--bg);min-width:0}
.stepper button{border:0;background:var(--inset);font:700 1.2rem var(--mono);min-height:44px}
.stepper input{border:0;border-radius:0;text-align:center;font:600 1.05rem var(--mono);padding:0;min-height:44px;background:transparent;width:100%;min-width:0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-label{font-size:.72rem;color:var(--muted);text-align:center;margin-top:2px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale button{border:1px solid var(--line);background:var(--surface);border-radius:8px;min-height:38px;font-weight:700}
.scale button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.pain-row{display:grid;grid-template-columns:96px 1fr 32px;gap:10px;align-items:center}
.pain-row input{width:100%;accent-color:var(--plate)}
.check{display:flex;gap:10px;align-items:center;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--accent)}

/* progress & body */
.chart-box{position:relative;height:240px}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th,table.t td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font:600 .72rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
table.t td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.good{color:var(--good)} .bad{color:var(--bad)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.stat{background:var(--inset);border-radius:10px;padding:10px 12px}
.stat .v{font:700 1.5rem var(--display)}
.stat .l{font-size:.8rem;color:var(--muted)}
.list-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.report h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em}
.report ul{margin:4px 0 0;padding-left:18px}
.report li{margin:3px 0}
pre.summary{white-space:pre-wrap;background:var(--inset);border-radius:10px;padding:12px;font:.82rem/1.5 var(--mono);max-height:280px;overflow:auto}

/* profile picker */
.pick{min-height:70vh;display:grid;place-content:center;gap:14px;text-align:center}
.pick h2{font-size:2.6rem;text-transform:uppercase}
.pick .btn{font:700 1.6rem var(--display);text-transform:uppercase;letter-spacing:.06em;padding:18px 40px}
.pick .mat{background:var(--mat);border-color:var(--mat);color:var(--bg)}
.pick .benny{background:var(--benny);border-color:var(--benny);color:var(--bg)}

/* overlay (rest timer, settings) */
.overlay{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.overlay .inner{max-width:560px;margin:0 auto;display:grid;gap:16px}
.clock{font:700 5.5rem/1 var(--display);text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock.done{color:var(--plate)}
.ring{height:8px;background:var(--inset);border-radius:99px;overflow:hidden}
.ring div{height:100%;background:var(--accent);transition:width .25s linear}
@media (prefers-reduced-motion:reduce){.ring div{transition:none}}

/* narrow phones: status shows as a dot only, title tightens */
@media (max-width:430px){.sync{font-size:0;gap:0}.sync::before{width:10px;height:10px}.top h1{font-size:1.15rem}.who{padding:6px 10px;font-size:.85rem}}

/* logging inside the workout list */
.done-card{border-color:var(--accent);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)) padding-box}
.done-card .head{align-items:center}
.tick{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:.8rem;margin-right:8px;vertical-align:1px}
.cardio-card.done-card{border-style:solid}
.add-ex{border-style:dashed;color:var(--accent-text);font-weight:700}
.pick-list{display:grid;gap:6px}
.list-btn{display:grid;text-align:left;gap:2px;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:10px 12px}
.ex .sets{display:grid}
.done-card .head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.done-card .head .name{font-weight:700;font-size:1.05rem}
.focus-chips{display:flex;flex-wrap:wrap;gap:6px}
.focus-chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font:600 .85rem var(--body);color:var(--muted);min-height:34px}
.focus-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* library */
.lib-card .head{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:start}
.lib-card .name{font-weight:700;font-size:1.05rem}
.lib-card .sr{font:500 .85rem var(--mono);white-space:nowrap}
.meters{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted)}
.meters b{color:var(--ink);letter-spacing:.05em}
.warn-text{color:var(--warn)}
.risk{display:grid;gap:8px;background:var(--plate-soft);border-radius:10px;padding:10px 12px}
.risk h4{color:var(--plate)}
.risks{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.92rem}
.joint-chips{display:flex;flex-wrap:wrap;gap:6px}
.jchip{font:600 .75rem var(--body);padding:3px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.jchip.high{border-color:var(--plate);color:var(--plate)}
.focus-chips button.ache[aria-pressed="true"]{background:var(--plate);border-color:var(--plate)}
.list-btn .bad{color:var(--bad)}

/* ================================================================= appearance
   Themes: data-skin on <body>. "floor" is the original look (follows light/dark).
   Each theme redefines the tokens; components only use tokens. */
html{font-size:16px}
body{font-size:1rem}
:root{--radius:12px; --glow:none; --card-shadow:none; --hair:var(--line); --num:var(--mono)}
body{--accent-text:var(--accent)}
/* computed on body so each theme's own surface and accent are used */
body{--accent-soft:color-mix(in srgb, var(--accent) 24%, var(--surface)); --on-accent:#fff}
body[data-skin="arcade"],body[data-skin="floor"]{--on-accent:var(--bg)}
.card{border-radius:var(--radius);box-shadow:var(--card-shadow)}
.av{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--c, var(--accent));color:#fff;font-size:.9em;margin-right:6px;vertical-align:-.3em;line-height:1}
.av.big{width:2.4em;height:2.4em;font-size:1.3rem;margin:0}
nav.tabs svg{width:22px;height:22px;display:block;margin:0 auto 2px}
nav.tabs button span{display:none}

/* --- Synthwave: night drive, neon on deep purple */
body[data-skin="synthwave"]{
  --bg:#12061f; --surface:rgb(30 10 52 / .82); --inset:rgb(60 20 90 / .55); --ink:#f7e9ff; --muted:#c6a6e0; --line:rgb(255 64 220 / .32);
  --accent:#ff3fd8; --plate:#ffb340; --plate-soft:rgb(255 179 64 / .14); --good:#3ff6c8; --good-soft:rgb(63 246 200 / .14); --warn:#ffd23f; --warn-soft:rgb(255 210 63 / .14); --bad:#ff5f7e;
  --display:"Orbitron","Barlow Condensed",sans-serif; --glow:0 0 10px rgb(255 63 216 / .7); --card-shadow:0 0 22px rgb(255 63 216 / .12), inset 0 0 0 1px rgb(63 246 255 / .06);
  color-scheme:dark;
  background:linear-gradient(180deg,#1b0633 0%,#2a0a4a 45%,#12061f 100%) fixed;
}
body[data-skin="synthwave"]::before{content:"";position:fixed;left:-50%;right:-50%;bottom:-10vh;height:55vh;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(255 63 216 / .45) 2px,transparent 2px),linear-gradient(90deg,rgb(255 63 216 / .45) 2px,transparent 2px);background-size:56px 56px;
  transform:perspective(320px) rotateX(62deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%)}
body[data-skin="synthwave"]::after{content:"";position:fixed;left:50%;top:58vh;width:62vw;max-width:420px;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-2;pointer-events:none;border-radius:50%;opacity:.28;
  background:repeating-linear-gradient(180deg,transparent 0 58%,#12061f 58% 62%,transparent 62% 70%),linear-gradient(#ffd23f,#ff3fd8 70%)}
body[data-skin="synthwave"] h1,body[data-skin="synthwave"] .h2,body[data-skin="synthwave"] .h3{color:var(--accent-text);text-shadow:var(--glow);letter-spacing:.06em}
body[data-skin="synthwave"] .h2{font-size:1.35rem}
body[data-skin="synthwave"] .mono,body[data-skin="synthwave"] .stat .v,body[data-skin="synthwave"] .clock,body[data-skin="synthwave"] .tmr-clock{color:#3ff6ff;text-shadow:0 0 8px rgb(63 246 255 / .55)}
body[data-skin="synthwave"] .top,body[data-skin="synthwave"] nav.tabs{background:rgb(18 6 31 / .9);backdrop-filter:blur(8px)}
body[data-skin="synthwave"] .btn.primary{background:linear-gradient(90deg,#ff3fd8,#ff8be9);border:0;color:#1b0633;box-shadow:0 0 16px rgb(255 63 216 / .45)}
body[data-skin="synthwave"]{--on-accent:#1b0633}

/* --- Iron & Chalk: rubber floor, plate colors, stencil type */
body[data-skin="iron"]{
  --bg:#18191b; --surface:#232528; --inset:#2d3034; --ink:#eeece6; --muted:#a8a59c; --line:#3a3d42;
  --accent:#f26450; --plate:#e3b23c; --plate-soft:rgb(227 178 60 / .14); --good:#59b36b; --good-soft:rgb(89 179 107 / .16); --warn:#e3b23c; --warn-soft:rgb(227 178 60 / .15); --bad:#ef6a5a;
  --display:"Saira Stencil One","Barlow Condensed",sans-serif; --radius:16px; --card-shadow:inset 0 0 0 1px #2c2f33, 0 2px 0 #0d0e0f;
  color-scheme:dark;
  background-color:#18191b;
  background-image:radial-gradient(rgb(255 255 255 / .035) 1px,transparent 1.5px),radial-gradient(rgb(255 255 255 / .025) 1px,transparent 1.5px);
  background-size:7px 7px,13px 13px;background-position:0 0,3px 5px;
}
body[data-skin="iron"] h1,body[data-skin="iron"] .h2,body[data-skin="iron"] .h3{letter-spacing:.04em}
body[data-skin="iron"] .card{border:2px solid #303338}
body[data-skin="iron"] .btn.primary{background:var(--accent);border-color:#b8392a;box-shadow:0 3px 0 #7d2116;color:#18191b}
body[data-skin="iron"]{--on-accent:#18191b}
body[data-skin="iron"] .chips button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
body[data-skin="iron"] .done-card{border-color:var(--good)}

/* --- Arcade: chunky pixels, hard shadows */
body[data-skin="arcade"]{
  --bg:#0a0a12; --surface:#141428; --inset:#1f1f3a; --ink:#f6f6ff; --muted:#a8a8d8; --line:#3b3b7a;
  --accent:#ffd400; --plate:#ff4d6d; --plate-soft:rgb(255 77 109 / .15); --good:#39ff88; --good-soft:rgb(57 255 136 / .14); --warn:#ffd400; --warn-soft:rgb(255 212 0 / .14); --bad:#ff4d6d;
  --display:"Press Start 2P",monospace; --radius:0px; --card-shadow:4px 4px 0 #000;
  color-scheme:dark; background:#0a0a12;
}
body[data-skin="arcade"]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .18) 0 1px,transparent 1px 3px)}
body[data-skin="arcade"] h1{font-size:.8rem}
body[data-skin="arcade"] .h2{font-size:.95rem;line-height:1.5}
body[data-skin="arcade"] .h3{font-size:.72rem;line-height:1.6}
body[data-skin="arcade"] .card{border:3px solid var(--line)}
body[data-skin="arcade"] .btn,body[data-skin="arcade"] .seg,body[data-skin="arcade"] .chips button,body[data-skin="arcade"] .stepper,body[data-skin="arcade"] input,body[data-skin="arcade"] select,body[data-skin="arcade"] .focus-chips button,body[data-skin="arcade"] .tag,body[data-skin="arcade"] .pill{border-radius:0}
body[data-skin="arcade"] .btn{box-shadow:3px 3px 0 #000;border-width:2px}
body[data-skin="arcade"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
body[data-skin="arcade"] .btn.primary{color:#000}
body[data-skin="arcade"] .clock,body[data-skin="arcade"] .rest-tmr .tmr-clock{font-family:"Press Start 2P",monospace;font-size:3rem}
body[data-skin="arcade"] .tmr-clock{font-family:"Press Start 2P",monospace;font-size:1.2rem}
body[data-skin="arcade"] .stat .v{font-family:"Press Start 2P",monospace;font-size:.95rem;line-height:1.6}

/* --- Clean light: calm daytime */
body[data-skin="clean"]{
  --bg:#f5f6f8; --surface:#ffffff; --inset:#eef0f3; --ink:#15171c; --muted:#646b78; --line:#e3e6eb;
  --accent:#3563e9; --plate:#b0461c; --plate-soft:#fbeadf; --good:#1a7a4c; --good-soft:#dff3e8; --warn:#9a6b12; --warn-soft:#f6edd4; --bad:#c63a32;
  --display:"Manrope",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif; --radius:16px; --card-shadow:0 1px 2px rgb(16 24 40 / .05),0 2px 8px rgb(16 24 40 / .05);
  color-scheme:light; background:#f5f6f8;
}
body[data-skin="clean"] .card{border-color:transparent}
body[data-skin="clean"] h1,body[data-skin="clean"] .h2,body[data-skin="clean"] .h3{text-transform:none;font-weight:800;letter-spacing:-.01em}

/* theme picker */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.theme-tile{border:2px solid var(--line);border-radius:12px;padding:0;overflow:hidden;background:none;text-align:left}
.theme-tile[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.theme-tile .sw{height:56px;display:flex;align-items:flex-end;gap:4px;padding:8px}
.theme-tile .sw i{width:18px;height:18px;border-radius:50%;display:block}
.theme-tile b{display:block;padding:6px 10px 0;font-size:.9rem}
.theme-tile small{display:block;padding:0 10px 8px;color:var(--muted);font-size:.75rem}
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.avatars button{font-size:1.4rem;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.avatars button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}

/* fun */
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.ring-row{display:flex;align-items:center;gap:12px}
.ring-svg{width:56px;height:56px;flex:none}
.ring-svg circle{fill:none;stroke-width:6}
.ring-svg .bg{stroke:var(--inset)}
.ring-svg .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .6s ease}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.badge{background:var(--inset);border-radius:12px;padding:10px;text-align:center;display:grid;gap:2px}
.badge .i{font-size:1.8rem}
.badge.locked{opacity:.38;filter:grayscale(1)}
.badge b{font-size:.85rem}
.badge small{font-size:.72rem;color:var(--muted)}
.hi5-burst{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);font-size:5rem;z-index:80;pointer-events:none;animation:hi5 1.3s ease-out forwards}
@keyframes hi5{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-20deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.level-bar{height:8px;background:var(--inset);border-radius:99px;overflow:hidden}
.level-bar div{height:100%;background:var(--accent)}
.timerbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent-soft);border-radius:10px;padding:8px 12px}
.timerbar .mono{font-size:1.2rem;font-weight:600}
.finish-hero{text-align:center;display:grid;gap:6px}
.finish-hero .big{font:700 3rem/1 var(--display)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{font-size:.7rem;color:var(--muted);text-align:center}
.cal .d{aspect-ratio:1;border-radius:8px;background:var(--inset);display:grid;align-content:space-between;padding:4px;font-size:.75rem;min-width:0}
.cal .d.out{opacity:.35}
.cal .d.today{outline:2px solid var(--accent)}
.cal .dots{display:flex;gap:2px;flex-wrap:wrap}
.cal .dots i{width:8px;height:8px;border-radius:50%;display:block}
.warmup li{margin:4px 0}
.safety-note{font-size:.88rem}
.pick-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;max-width:520px;margin:0 auto}
.pick .btn.person{display:grid;justify-items:center;gap:8px;padding:16px 10px;font:700 1.2rem var(--display);text-transform:uppercase;letter-spacing:.05em;background:var(--surface)}
.plan-tools{display:grid;gap:6px;border-top:1px dashed var(--line);padding-top:8px}
.plan-tools .row{align-items:end}
.btn:disabled{opacity:.4}
#who{display:inline-flex;align-items:center}
.btn.primary{color:var(--on-accent)}
.who{color:var(--on-accent)}
.reminders{display:grid;gap:6px;background:var(--warn-soft);border-radius:var(--radius);padding:10px 12px}
.reminders .rem{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:.9rem}
.reminders .rem .row{flex-wrap:nowrap}
.signin{max-width:440px;width:100%;margin:0 auto;padding-top:4vh;text-align:center;display:grid;gap:14px}
.signin h2{font-size:2.2rem;text-transform:uppercase}
.btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;border-color:#dadce0;font-weight:700;min-height:48px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
@media (prefers-reduced-motion: reduce){.hi5-burst{animation:none;opacity:0}.ring-svg .fg{transition:none}}

/* brand */
.brand-mark{height:1.15em;width:auto;vertical-align:-.15em;margin-right:8px}
.brand-logo{display:grid;justify-items:center;margin:0 auto}
.brand-logo img{width:min(320px,80vw);height:auto}
.brand-logo.small img{width:min(220px,60vw)}
.brand-logo.wordmark{gap:10px}
.brand-logo .brand-mark{width:72px;height:56px;margin:0}
.brand-logo.small .brand-mark{width:52px;height:40px}
.brand-logo .brand-name{font:700 clamp(1.9rem,9vw,2.6rem)/1.1 var(--display);color:var(--ink);letter-spacing:-.01em}
.brand-logo.small .brand-name{font-size:1.6rem}
.brand-logo .on-dark{display:none}
body[data-tone="dark"] .brand-logo .on-light{display:none}
body[data-tone="dark"] .brand-logo .on-dark{display:block}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Bunny (redesign, Oct 2026): charcoal and hot pink, Cormorant Garamond titles and big numbers, Hanken Grotesk text.
   Pink means "now" or "you won": one filled pink control per screen. */
body[data-skin="bunny"]{
  --bg:#211f1f; --surface:#2c2929; --inset:#373333; --ink:#f7f1f3; --muted:#c4b9be;
  --line:#5a5254; --hair:#443e40;
  --accent:#fb40ad; --on-accent:#1a1818; --accent-soft:rgba(251,64,173,.12); --accent-text:#ff7cc6; /* pink for small text: 5.2:1+ on every surface */
  --plate:#fb40ad; --plate-soft:rgba(251,64,173,.14);
  --good:#7fdcae; --good-soft:rgba(127,220,174,.14);
  --warn:#ffd27a; --warn-soft:rgba(255,210,122,.14);
  --bad:#ff8f9b;
  --mat:#8ad1c2; --benny:#b7a6ff;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Hanken Grotesk",system-ui,sans-serif; --num:var(--display);
  --radius:22px; --glow:0 0 18px rgba(251,64,173,.7); --card-shadow:none;
  --stripe:linear-gradient(90deg,#fb40ad,#ff8fcf 60%,#fb40ad);
  color-scheme:dark; background:#211f1f;
}
body[data-skin="bunny"] h1,body[data-skin="bunny"] .h2,body[data-skin="bunny"] .h3,body[data-skin="bunny"] .pick h2,body[data-skin="bunny"] .signin h2{font-family:var(--display);font-style:italic;font-weight:600;text-transform:none;letter-spacing:0}
body[data-skin="bunny"] .h2{font-size:2.375rem;line-height:1}
body[data-skin="bunny"] .h3{font-size:1.625rem}
body[data-skin="bunny"] .eyebrow{font-family:var(--body);font-style:normal;font-weight:600;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
body[data-skin="bunny"] .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
body[data-skin="bunny"] .btn.primary{background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;font-weight:700}
body[data-skin="bunny"] :is(.risk h4,.jchip.high,.pill.down,.bad-text){color:var(--accent-text)}

/* --- The Lanai: Miami, 1985. Wicker cream, seafoam buttons, coral numbers. Peach and seafoam are decoration only. */
body[data-skin="lanai"]{
  --bg:#fbf1e4; --surface:#fffaf3; --inset:#f3e6d4; --ink:#2e2622; --muted:#665a50;
  --line:#d9c3a8; --hair:#eadbc6;
  --accent:#1f6f66; --on-accent:#ffffff; --accent-soft:rgba(31,111,102,.12);
  --plate:#a33f33; --plate-soft:rgba(163,63,51,.12); /* coral, darkened from #b2473a for 4.5:1 on the tan tiles */
  --good:#276a45; --good-soft:#dcefe3; --warn:#8a5a10; --warn-soft:#f6ebd2; --bad:#b23a3a;
  --mat:#1f6f66; --benny:#6a4fb3;
  --display:"DM Serif Display",Georgia,serif; --body:"Hanken Grotesk",system-ui,sans-serif; --num:var(--display);
  --radius:20px; --glow:none; --card-shadow:0 1px 2px rgba(80,50,20,.06);
  --stripe:repeating-linear-gradient(90deg,#f4b393 0 18px,#fffaf3 18px 24px,#9fd3c7 24px 42px,#fffaf3 42px 48px);
  color-scheme:light; background:#fbf1e4;
}
body[data-skin="lanai"] h1,body[data-skin="lanai"] .h2,body[data-skin="lanai"] .h3,body[data-skin="lanai"] .pick h2,body[data-skin="lanai"] .signin h2{font-family:var(--display);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
body[data-skin="lanai"] .h2{font-size:2.25rem;line-height:1.05}
body[data-skin="lanai"] .h3{font-size:1.5rem}
body[data-skin="lanai"] .eyebrow{font-family:var(--body);font-style:normal;font-weight:600;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
body[data-skin="lanai"] .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
body[data-skin="lanai"] .stat .v,body[data-skin="lanai"] .clock,body[data-skin="lanai"] .big-num{color:var(--plate);font-variant-numeric:lining-nums tabular-nums}
body[data-skin="lanai"] .top{border-top:6px solid transparent;border-image:var(--stripe) 1;border-bottom:1px solid var(--hair)}
body[data-skin="lanai"] .btn.primary{background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;font-weight:700}

/* =====================================================================
   ACCESSIBILITY
   Options live on <body>: data-font, data-spacing, data-contrast, data-motion,
   and classes a11y-bold, a11y-bigTargets, a11y-underline, a11y-focusRing, a11y-colorSafe, a11y-plain.
   This block is last on purpose so it wins over every theme.
   ===================================================================== */
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Lexend;src:url(../fonts/lexend-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lexend;src:url(../fonts/lexend-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(../fonts/opendyslexic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(../fonts/opendyslexic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

/* Always on */
.skip{position:fixed;left:8px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:not(:focus){left:-10000px;width:1px;height:1px;overflow:hidden;padding:0}
#main:focus{outline:none}
[tabindex="-1"]:focus{outline:none}
.video{color:var(--ink)}
.cardio-card details summary{color:var(--ink)}
.toast{border:0;font:inherit;font-weight:600;text-align:left;display:flex;align-items:center;gap:12px;cursor:pointer}
.toast-x{opacity:.7;font-size:.85em}
.a11y-entry{justify-self:end}
.signin .a11y-entry{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px}
.seg.wrap{flex-wrap:wrap}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.preset{text-align:left;display:flex;gap:8px;align-items:center}
.a11y-tog{align-items:flex-start;padding:6px 0}
.a11y-tog small{display:block;color:var(--muted);font-size:.85rem;font-weight:400;margin-top:2px}
.a11y-tog input{width:24px;height:24px;flex:none;margin-top:2px}
.chart-table{margin-top:6px}
.chart-table summary{cursor:pointer;color:var(--accent-text);font-weight:600;padding:6px 0}
.cal .dots i.bike{background:transparent;width:auto;height:auto;font-size:8px;line-height:8px}
.cal-key{display:inline-block;width:10px;height:10px;border-radius:50%}
/* focus mode */
.focus-steps{list-style:none;margin:8px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.focus-steps button{min-width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--muted);font:700 .85rem var(--mono);padding:0 6px}
.focus-steps li.done button{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.focus-steps li.now button{border-color:var(--accent);background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 3px var(--accent-soft)}
.focus-nav{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin:4px 0 14px}
.focus-nav .btn{min-height:52px;font-size:1.05rem}
/* screen flash for people who can't hear the beeps (one pulse, never strobing) */
#flash-alert{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;place-items:center;font:800 18vw/1 var(--display);color:var(--on-accent);opacity:0;background:var(--accent)}
#flash-alert.pulse{animation:a11y-flash .85s ease-out 1}
#flash-alert.strong.pulse{background:var(--plate)}
#flash-alert.still{inset:auto 0 auto 0;top:0;height:auto;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 18px;opacity:1;font-size:2.4rem}
@keyframes a11y-flash{0%{opacity:0}15%{opacity:.55}100%{opacity:0}}

/* Seeing */
body.a11y-bold *{font-weight:700!important}
body.a11y-underline a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px}
body.a11y-focusRing :focus-visible,body.a11y-focusRing :focus{outline:4px solid var(--ink)!important;outline-offset:3px!important;box-shadow:0 0 0 8px var(--accent)!important}
body.a11y-focusRing #main:focus{box-shadow:none!important;outline:none!important}
body.a11y-bigTargets .btn,body.a11y-bigTargets .btn.small,body.a11y-bigTargets .seg button,body.a11y-bigTargets .chips button,body.a11y-bigTargets .set .diff button,body.a11y-bigTargets .scale button,body.a11y-bigTargets .focus-chips button,body.a11y-bigTargets input,body.a11y-bigTargets select,body.a11y-bigTargets summary,body.a11y-bigTargets .tabs button{min-height:52px!important}
body.a11y-bigTargets .stepper button,body.a11y-bigTargets .stepper input{min-height:56px!important}
body.a11y-bigTargets .set .setcheck{width:52px;height:52px}
body.a11y-bigTargets .set{grid-template-columns:52px 1fr 1fr;gap:12px}
body.a11y-bigTargets .set.noweight{grid-template-columns:52px 1fr}
body.a11y-bigTargets .row{gap:12px}
body.a11y-bigTargets input[type=checkbox],body.a11y-bigTargets input[type=radio]{width:28px;height:28px}
body.a11y-bigTargets input[type=range]{min-height:44px}
/* color-blind safe: blue / orange, plus shapes so color is never the only signal */
body.a11y-colorSafe{--good:#1a5aa8!important;--good-soft:#dce9fa!important;--bad:#9a4300!important;--plate:#8a4600!important;--warn:#6b5000!important}
body.a11y-colorSafe[data-tone="dark"]{--good:#7fb2ff!important;--good-soft:#1c2a40!important;--bad:#ffa25c!important;--plate:#ffb066!important;--warn:#ffd36b!important}
body.a11y-colorSafe [aria-pressed="true"]::before,body.a11y-colorSafe [aria-current="page"]::before{content:"✓ ";font-weight:800}
body.a11y-colorSafe .tabs button[aria-current="page"]::before{content:none}
body.a11y-colorSafe .tabs button[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
body.a11y-colorSafe .cal .dots i[data-i],body.a11y-colorSafe .cal-key[data-i]{width:14px;height:14px;display:grid;place-items:center;font:800 9px/1 var(--body);color:#fff}
body.a11y-colorSafe .cal .dots i[data-i]::after,body.a11y-colorSafe .cal-key[data-i]::after{content:attr(data-i)}
.cal-key{vertical-align:-1px}
.cal .dots i[data-i]{position:relative}
.sync::before{flex:none}
body.a11y-colorSafe .sync.error::before{content:"!";width:auto;height:auto;background:none;color:var(--bad);font-weight:800}

/* High contrast (also turns on by itself when the phone asks for more contrast, if Contrast is "Match my phone") */
body[data-contrast="high"][data-skin]{--bg:#000!important;--surface:#000!important;--inset:#111!important;--ink:#fff!important;--muted:#ededed!important;--line:#fff!important;
  --accent:#ffe14d!important;--accent-text:#ffe14d!important;--accent-soft:#3d3500!important;--on-accent:#000!important;--plate:#ffb84d!important;--plate-soft:#3d2600!important;--good:#7dffa0!important;--good-soft:#00331a!important;
  --warn:#ffd24d!important;--warn-soft:#3d3000!important;--bad:#ff8f8f!important;--mat:#7fe0c8!important;--mat-soft:#003328!important;--benny:#b3c4ff!important;--benny-soft:#001a4d!important;background:#000!important;background-image:none!important;color:#fff}
body[data-contrast="high"] *{text-shadow:none!important;box-shadow:none;background-image:none}
body[data-contrast="high"] .card,body[data-contrast="high"] .btn,body[data-contrast="high"] input,body[data-contrast="high"] select,body[data-contrast="high"] textarea,body[data-contrast="high"] .seg,body[data-contrast="high"] .stretch,body[data-contrast="high"] .tmr,body[data-contrast="high"] .set .setcheck,body[data-contrast="high"] .chips button{border:2px solid #fff!important}
body[data-contrast="high"] [aria-pressed="true"],body[data-contrast="high"] [aria-checked="true"],body[data-contrast="high"] [aria-current="page"],body[data-contrast="high"] [aria-current="step"]{outline:3px solid #ffe14d;outline-offset:2px}
body[data-contrast="high"] .top,body[data-contrast="high"] .tabs{background:#000!important;border-color:#fff!important;backdrop-filter:none!important}
body[data-contrast="high"] .muted,body[data-contrast="high"] .small{opacity:1!important}
body[data-contrast="high"] a{color:#ffe14d!important;text-decoration:underline!important}

/* Reading */
body[data-font="atkinson"] *:not(.tmr-clock):not(.clock){font-family:"Atkinson Hyperlegible",system-ui,sans-serif!important}
body[data-font="lexend"] *:not(.tmr-clock):not(.clock){font-family:Lexend,system-ui,sans-serif!important}
body[data-font="dyslexic"] *:not(.tmr-clock):not(.clock){font-family:OpenDyslexic,"Comic Sans MS",system-ui,sans-serif!important}
body[data-font="system"] *:not(.tmr-clock):not(.clock){font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
body[data-font="dyslexic"]{line-height:1.6}
body[data-spacing="1"] *:not(.tmr-clock):not(.clock){letter-spacing:.06em!important;word-spacing:.16em!important;line-height:1.7!important}
body[data-spacing="2"] *:not(.tmr-clock):not(.clock){letter-spacing:.12em!important;word-spacing:.3em!important;line-height:2!important}
body[data-spacing="1"] p,body[data-spacing="1"] li,body[data-spacing="2"] p,body[data-spacing="2"] li{margin-bottom:.8em}
body.a11y-plain *{font-style:normal!important;text-transform:none!important}
body.a11y-plain:not([data-spacing="1"]):not([data-spacing="2"]) *{letter-spacing:normal!important}
body.a11y-plain p,body.a11y-plain li,body.a11y-plain dd,body.a11y-plain .why,body.a11y-plain .small{text-align:left!important}
body.a11y-plain [style*="text-align:center"]{text-align:left!important}
/* Big text / roomy spacing: everything reflows to one column instead of running off the screen (WCAG 1.4.4, 1.4.10, 1.4.12) */
body.a11y-big-text *{overflow-wrap:break-word;min-width:0}
body.a11y-big-text .head{flex-wrap:wrap;row-gap:4px}
body.a11y-big-text .ex .head{grid-template-columns:1fr}
body.a11y-big-text .head .name{flex:1 1 100%}
body.a11y-big-text .h2,body.a11y-big-text .pick h2,body.a11y-big-text .signin h2{font-size:1.3rem!important}
body.a11y-big-text .h3{font-size:1.05rem!important}
body.a11y-big-text .top{flex-wrap:wrap;row-gap:6px}
body.a11y-big-text .top h1{font-size:1rem;flex:1 1 40%}
body.a11y-big-text .icon-btn{width:auto;height:auto;min-width:44px;min-height:44px;padding:4px 8px}
body.a11y-big-text .who{max-width:50vw;overflow:hidden;text-overflow:ellipsis}
body.a11y-big-text .grid2,body.a11y-big-text .themes,body.a11y-big-text .preset-grid{grid-template-columns:1fr}
body.a11y-big-text .chips{grid-template-columns:repeat(2,1fr)}
body.a11y-big-text .chips button small{display:block}
body.a11y-big-text .seg{display:flex;width:100%}
body.a11y-big-text .seg button{flex:1 1 auto}
body.a11y-big-text .ring-row{flex-wrap:wrap}
body.a11y-big-text .set,body.a11y-big-text .set.noweight{grid-template-columns:1fr!important}
body.a11y-big-text .set .setcheck{justify-self:start;width:auto;min-width:44px;padding:0 12px}
body.a11y-big-text .set .diff{grid-column:auto;grid-template-columns:1fr 1fr 1fr 52px}
body.a11y-big-text .scale{grid-template-columns:repeat(5,minmax(44px,1fr))}
body.a11y-big-text .focus-nav{grid-template-columns:1fr}
body.a11y-big-text .tmr-clock{font-size:1.6rem}
body.a11y-big-text .rest-tmr .tmr-clock{font-size:3.5rem}
body.a11y-big-text table.t{font-size:.85rem}
/* The tab bar always fits: bigger icons, labels held to a size that fits five across, no extra spacing */
body.a11y-big-text .tabs button{font-size:12px!important;letter-spacing:0!important;word-spacing:0!important;line-height:1.2!important;overflow-wrap:normal}
body.a11y-big-text .tabs svg{width:28px;height:28px}
body.a11y-huge-text .chips{grid-template-columns:1fr}
body.a11y-huge-text .set .diff{grid-template-columns:1fr}
body.a11y-huge-text .stepper{grid-template-columns:52px 1fr 52px}

/* Motion */
body[data-motion="reduce"] *,body[data-motion="reduce"] *::before,body[data-motion="reduce"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body[data-motion="reduce"] .confetti,body[data-motion="reduce"] .hi5-burst{display:none!important}
body[data-motion="reduce"] #flash-alert.pulse{animation:none!important}

/* Windows High Contrast / forced colors */
@media (forced-colors: active){
  [aria-pressed="true"],[aria-checked="true"],[aria-current]{outline:3px solid Highlight!important}
  .tmr-bar i,.sync::before,.cal .dots i{forced-color-adjust:none}
  .btn,.seg button,.chips button{border:1px solid ButtonText}
}

/* Collapsible exercise tiles */
.ex-toggle{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%;cursor:pointer;min-height:44px;font:inherit;color:inherit}
.ex-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.ex-toggle .chev{width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);flex:none;margin:0 4px 0 2px;transition:transform .15s}
.ex-toggle[aria-expanded="false"] .chev{transform:rotate(-45deg)}
.ex.collapsed{padding-top:10px;padding-bottom:10px}
.ex.collapsed .head{align-items:center}
.ex-mini{color:var(--muted);margin:2px 0 0 22px}
.ex-mini b{color:var(--ink)}
.ex-all{justify-content:flex-end;margin:4px 0 -2px}
.ex-all .small{margin-right:auto}
body[data-contrast="high"] .ex-toggle .chev{border-color:#fff}
.our-machines{display:grid;gap:4px;margin:4px 0}
.our-machines .btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.tmr-vol-l{display:flex;align-items:center;gap:8px;flex:1}
.tmr-vol-l input{flex:1;accent-color:var(--accent);min-height:28px}
.tmr-warn{margin:0;color:var(--ink);background:var(--warn-soft);border-left:4px solid var(--warn);padding:6px 10px;border-radius:6px}
.ex-num{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .35em;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 .85rem var(--mono);flex:none}
.ex-num.done{background:var(--accent-soft);color:var(--ink);margin-right:6px}
.done-card .head .name{display:flex;align-items:center;gap:6px}
details.more.sub summary{font-size:.85rem}
.ex-toggle{flex-wrap:nowrap;align-items:flex-start}
.ex-toggle .chev{margin-top:.45em}
.ex-toggle .ex-num{margin-top:.05em}
.ex-title{flex:1;min-width:0}
.ex-title .tag{margin-left:6px}
.tmr-vol{flex-wrap:wrap}
.tmr-vol-l{min-width:140px}
.tmr-vol-l input{min-width:100px}
.v-note{margin:4px 0 0;color:var(--muted)} .v-note b{color:var(--ink)}
/* Crew tab */
.crew-stats{margin:10px 0}
.crew-stats .stat .v{font-size:1.3rem}
.crew-name{display:flex;align-items:center;gap:8px}
.crew-week{width:100%;text-align:center}
.crew-week th[scope=row]{text-align:left;white-space:nowrap}
.crew-week td{font-weight:800;color:var(--muted)}
.crew-week td.did{color:var(--on-accent);background:var(--accent);border-radius:6px}
.crew-week .today{box-shadow:inset 0 -3px 0 var(--accent)}
.crew-privacy{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}

/* =====================================================================
   KIT v2 (Oct 2026 design handoff). Same components for every theme; each theme supplies tokens.
   Bunny and The Lanai add italic serif titles and big numbers below.
   Motion: quick 140ms ease-out · settle 320ms cubic-bezier(.2,.8,.2,1) · pop 420ms cubic-bezier(.3,1.6,.5,1)
   ===================================================================== */
:root{--nav-h:66px;--settle:320ms cubic-bezier(.2,.8,.2,1);--pop:420ms cubic-bezier(.3,1.6,.5,1)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.big-num{font-family:var(--num);font-weight:600;font-variant-numeric:lining-nums tabular-nums}

/* header: ears · name · person pill (with sync dot) · round settings */
.top{padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 12px;gap:10px;border-bottom:1px solid var(--hair)}
.top .brand-mark{flex:none;width:26px;height:20px}
.top h1{font-size:1.25rem;line-height:1.1;flex:1;min-width:0;margin:0}
.who{display:flex;align-items:center;gap:8px;height:44px;padding:4px 12px 4px 4px;border:1.5px solid var(--line);border-radius:999px;background:none;color:var(--ink);font:600 .9375rem var(--body);text-transform:none;letter-spacing:0;flex:none;max-width:45vw}
.who .who-name{overflow:hidden;text-overflow:ellipsis}
.who .av{width:32px;height:32px;margin:0;position:relative;font-size:.875rem;font-weight:700;flex:none;vertical-align:0}
.who .online{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--good);border:2px solid var(--bg)}
.who[data-sync="pending"] .online{background:var(--warn)}
.who[data-sync="offline"] .online{background:var(--muted)}
.who[data-sync="error"] .online{background:var(--bad)}
.icon-btn{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--ink);display:grid;place-items:center;padding:0;font-size:1.1rem}
.icon-btn.ghost{border:0;color:var(--muted)}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn.ghost:hover{color:var(--ink)}

/* tab bar: dot above the active tab */
nav.tabs{border-top:1px solid var(--hair);background:var(--surface)}
nav.tabs button{position:relative;height:var(--nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 .8125rem var(--body);color:var(--muted);text-transform:none;letter-spacing:0}
nav.tabs svg{width:24px;height:24px;margin:0}
nav.tabs button[aria-current="page"]{color:var(--ink);font-weight:700}
nav.tabs button[aria-current="page"] svg{color:var(--accent-text)}
nav.tabs button[aria-current="page"]::before{content:"";position:absolute;top:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* reminders: one quiet outlined card */
.reminders{background:none;border:1px solid var(--line);border-radius:20px;padding:6px 6px 6px 16px;display:flex;flex-direction:column;gap:0}
.rem-title{display:flex;align-items:center;gap:8px;margin:0;padding:10px 0 4px;font:600 .8125rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--warn)}
.reminders .rem{display:flex;align-items:center;gap:6px;min-height:56px;border-top:1px solid var(--hair);background:none;padding:0}
.reminders .rem-title + .rem{border-top:0}
.reminders .rem p{flex:1;margin:0;font-size:.9375rem;line-height:1.4;padding:8px 0}
.btn.pill{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:none;color:var(--ink);font:600 .875rem var(--body);flex:none}
.btn.pill:hover{border-color:var(--accent)}

/* week + day pickers */
.today-top{display:flex;flex-direction:column;gap:18px}
.week-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.seg{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:4px;gap:4px}
.seg button{min-height:40px;padding:0 14px;border-radius:10px;white-space:nowrap;font:500 .875rem var(--body);color:var(--muted);background:none;border:0}
.seg button[aria-pressed="true"]{background:var(--inset);box-shadow:inset 0 -2px 0 var(--accent);color:var(--ink);font-weight:700}
.chips.day-tiles{gap:8px}
.chips.day-tiles button{height:72px;border-radius:16px;border:1.5px solid var(--line);background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 2px;color:var(--ink);text-transform:none;letter-spacing:0;min-width:0}
.day-tiles .d{font:700 .75rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.day-tiles .m{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips.day-tiles button[aria-pressed="true"]{border:2px solid var(--accent);background:var(--accent-soft)}
.chips.day-tiles button[aria-pressed="true"] .d{color:var(--accent-text)}

/* today header + progress ring */
.ring-row{display:flex;align-items:center;gap:16px;padding-top:4px}
.today-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.today-title .h2{text-wrap:balance;margin:0}
.today-title .h2::after{content:none}
.pring{position:relative;width:72px;height:72px;flex:none}
.pring .ring-svg{width:72px;height:72px}
.pring .ring-svg circle{fill:none;stroke-width:5}
.pring .ring-svg .bg{stroke:var(--hair)}
.pring .ring-svg .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--settle)}
.pring .ring-n{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem}

/* streak + level tiles */
.stat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-tile{background:var(--surface);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.st-top{display:flex;align-items:center;gap:6px}
.st-top .ico{color:var(--warn);flex:none}
.st-top .big-num{font-size:1.875rem;line-height:1}
.st-unit{font-weight:600;font-size:.9375rem}
.st-sub{font-size:.875rem;color:var(--muted)}
.st-level{font-weight:700;font-size:.875rem}
.stat-tile .level-bar{height:8px;background:var(--inset);border-radius:99px;overflow:hidden;margin:6px 0}
.stat-tile .level-bar div{height:100%;background:var(--ink);border-radius:99px}

/* the one filled button */
.start-btn{min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.0625rem;border-radius:999px}

/* disclosures: a row with a chevron that turns */
details.more > summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 1rem var(--body);text-transform:none;letter-spacing:0;color:var(--ink);padding:0}
details.more > summary::before,details.more[open] > summary::before{content:none!important;display:none}
details.more > summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--settle);margin-right:6px}
details.more[open] > summary::after{transform:rotate(-135deg)}
details.more.row-disclosure{border-top:1px solid var(--hair)}
details.more.row-disclosure > summary{min-height:56px}
details.more.row-disclosure > summary::after{content:none}
details.more.row-disclosure > summary .ico{transition:transform var(--settle)}
details.more.row-disclosure[open] > summary .ico{transform:rotate(180deg)}

/* exercise cards */
.card.ex{padding:0;border-radius:20px;gap:0}
.card.ex.done-card{padding:14px 16px;gap:6px}
.card.ex .head.ex-head{display:block}
.ex-head h3.name{margin:0;font:inherit}
.ex-toggle,.ex-toggle:not(.x){all:unset;box-sizing:border-box;width:100%;padding:16px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;align-items:start;cursor:pointer;color:var(--ink);text-align:left;border-radius:20px}
.ex-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.ex-num{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:700 .9375rem var(--body);font-variant-numeric:lining-nums tabular-nums;background:none;color:var(--ink);padding:0;margin:0;min-width:0}
.ex-num.filled{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.done-card .head .name{display:flex;align-items:center;gap:10px}
.ex-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.ex-name{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.1;text-wrap:balance}
.ex-tags{display:flex;gap:6px;flex-wrap:wrap}
.ex-tags .tag{height:24px;padding:0 9px;margin:0;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:5px;font:600 .75rem var(--body);color:var(--muted);background:none;text-transform:none;letter-spacing:0;vertical-align:0}
.ex-tags .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.ex-tags .tag.new::before{background:var(--warn)}
.ex-scheme{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.ex-scheme .big-num{font-size:1.5rem;line-height:1}
.ex-scheme .x{font-size:1rem;color:var(--muted)}
.ex-scheme .unit{font-size:.75rem;color:var(--muted);margin-left:3px;font-weight:600}
.ex-last{grid-column:2 / 4;font-size:.875rem;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}
.ex-last b{color:var(--ink)}
.card.ex.open{border-color:var(--accent)}
.card.ex.all-done{background:var(--accent-soft)}
.ex-body{padding:0 16px 16px;display:grid;gap:10px;min-width:0}

/* set logger: number · weight · reps · remove / Easy Right Hard · done circle */
.set{display:grid;grid-template-columns:44px repeat(3,minmax(0,1fr)) 48px;grid-template-areas:"n w w r r" "del diff diff diff chk";gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.set.noweight{grid-template-columns:44px repeat(3,minmax(0,1fr)) 48px;grid-template-areas:"n r r r r" "del diff diff diff chk"}
.set .set-n{grid-area:n;font-size:1.5rem;color:var(--muted);text-align:center}
.set .sw-w{grid-area:w} .set .sw-r{grid-area:r}
.set .set-del{grid-area:del;justify-self:center}
.set .diff{grid-area:diff;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:4px}
.set .diff button{min-height:40px;border:0;border-radius:10px;background:none;color:var(--muted);font:500 .875rem var(--body)}
.set .diff button[aria-pressed="true"]{color:var(--on-accent);font-weight:700}
.set .diff button[aria-pressed="true"][data-d="1"]{background:var(--good);border-color:var(--good);color:var(--on-accent)}
.set .diff button[aria-pressed="true"][data-d="2"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.set .diff button[aria-pressed="true"][data-d="3"]{background:var(--warn);border-color:var(--warn);color:var(--on-accent)}
.set .setcheck{grid-area:chk;width:48px;height:48px;border-radius:50%;border:2px solid var(--accent);background:none;color:var(--on-accent);display:grid;place-items:center;padding:0;font-size:inherit;align-self:center}
.set .setcheck[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.set .setcheck[aria-checked="true"] svg{animation:check-pop var(--pop)}}
@keyframes check-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.stepper input{font-family:var(--num);font-size:1.25rem;font-variant-numeric:lining-nums tabular-nums}
body.a11y-big-text .set,body.a11y-big-text .set.noweight{grid-template-columns:1fr 1fr!important;grid-template-areas:"n del" "w w" "r r" "diff diff" "chk chk"!important}
body.a11y-big-text .set.noweight{grid-template-areas:"n del" "r r" "diff diff" "chk chk"!important}
body.a11y-big-text .set .set-n{text-align:left}
body.a11y-big-text .set .setcheck{justify-self:start;width:56px;height:56px;min-width:0;padding:0}
body.a11y-bigTargets .set .setcheck{width:56px;height:56px}

/* avatars in person colors (Bunny + Lanai), dark text on light chips */
body[data-skin="bunny"] .av[data-p="mat"]{background:var(--mat);color:#1a1818}
body[data-skin="bunny"] .av[data-p="benny"]{background:var(--benny);color:#1a1818}
body[data-skin="lanai"] .av[data-p="mat"]{background:var(--mat);color:#fff}
body[data-skin="lanai"] .av[data-p="benny"]{background:var(--benny);color:#fff}

/* Bunny + Lanai: italic serif for titles and big numbers (never below 24px except card titles, which are 25px) */
body:is([data-skin="bunny"],[data-skin="lanai"]){line-height:1.55}
body:is([data-skin="bunny"],[data-skin="lanai"]) .top h1{font-family:var(--display);font-style:italic;font-weight:600;text-transform:none;letter-spacing:0}
body[data-skin="lanai"] .top h1{font-weight:400}
body:is([data-skin="bunny"],[data-skin="lanai"]) .ex-name{font-size:1.5625rem;font-style:italic;line-height:1.05}
body[data-skin="lanai"] .ex-name{font-weight:400}
body:is([data-skin="bunny"],[data-skin="lanai"]) .day-tiles .m{font-size:1.375rem;font-style:italic}
body[data-skin="lanai"] .day-tiles .m{font-weight:400}
body:is([data-skin="bunny"],[data-skin="lanai"]) .big-num{font-style:italic}
body:is([data-skin="bunny"],[data-skin="lanai"]) .ex-scheme .big-num{font-size:1.625rem}
body:is([data-skin="bunny"],[data-skin="lanai"]) .stepper input{font-style:italic;font-size:1.5rem}
body[data-skin="lanai"] .big-num,body[data-skin="lanai"] .ex-scheme .big-num{color:var(--plate);font-weight:400}
body[data-skin="lanai"] .pring .ring-n{color:var(--ink)}
.stat .v{font-variant-numeric:lining-nums tabular-nums}
body:is([data-skin="bunny"],[data-skin="lanai"]) .stat .v{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.75rem;line-height:1.1}
body[data-skin="lanai"] .stat .v{font-weight:400}
body:is([data-skin="bunny"],[data-skin="lanai"]) .stat .v small{font-family:var(--body);font-style:normal;font-size:.8125rem;font-weight:600}
.chips.day-tiles button[aria-pressed="true"] .d{color:var(--ink)}
body:is([data-skin="bunny"],[data-skin="lanai"]) .chips.day-tiles button[aria-pressed="true"] .d{color:var(--accent-text)}
.day-tiles .dt{font-weight:600;letter-spacing:.04em;opacity:.9}
.day-tiles button{position:relative}
.day-tiles .today-dot{position:absolute;bottom:4px;font:700 .625rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.chips.day-tiles button{height:80px}

/* iPhone: while typing, the keyboard can leave the fixed tab bar stranded mid-screen. Hide it while a field
   has focus; it comes back (pinned to the bottom) when the keyboard closes. */
body.kb-open nav.tabs{display:none}
body.kb-open{padding-bottom:16px}
nav.tabs{transform:translateZ(0)}