:root {
  --bg: #f6f4ef; --card: #ffffff; --ink: #1d1d1b; --muted: #6b6963; --line: #e4e0d7;
  --accent: #1f7a4d; --accent-ink: #ffffff; --accent-soft: #e3f1e9;
  --warn: #9a5b00; --warn-soft: #fbf0db; --danger: #b3261e;
  --dot: #c9c4b8; --floor: #efece5; --st: #ffffff;
  --c-cardio: #2f6fb0; --c-strength: #a0522d; --c-timed: #7a5aa6;
  --miss: #d98f3a; --rest: #9fb8d6; --pause: #c4b5dd; --none: #e7e3da;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141614; --card: #1e211f; --ink: #eceae4; --muted: #a09d95; --line: #2f332f;
    --accent: #4fc08a; --accent-ink: #0c1a12; --accent-soft: #1d3327;
    --warn: #f0b860; --warn-soft: #33290f; --danger: #ff8a80;
    --dot: #4a4e49; --floor: #191c1a; --st: #252925;
    --c-cardio: #7fb3e6; --c-strength: #dba07c; --c-timed: #b9a0e0;
    --miss: #d98f3a; --rest: #47617f; --pause: #6a5a8a; --none: #2a2e2a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; }
#app { max-width: 460px; margin: 0 auto; min-height: 100dvh; padding: 0 16px calc(84px + env(safe-area-inset-bottom)); }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 2px 10px; }
h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 0 0 6px; }
p { margin: 0 0 10px; }
.when { color: var(--muted); font-size: 13px; text-align: end; }
.pill { font-style: normal; background: var(--warn-soft); color: var(--warn); border-radius: 99px; padding: 2px 8px; font-size: 11px; white-space: nowrap; }
main { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card.warn { background: var(--warn-soft); border-color: transparent; }
.card.good { background: var(--accent-soft); border-color: transparent; }
.card.good p { margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
.fine { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.fine.pad { padding: 0 4px; }
.lead { font-size: 17px; }
.note { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.flash { background: var(--ink); color: var(--bg); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.big { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 6px; }
.num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }

label, .lbl { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 6px; }
input[type=time], input[type=text], input[type=number], select {
  display: block; width: 100%; margin-top: 6px; min-height: 46px; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
input:focus-visible, select:focus-visible, button:focus-visible, g[data-action]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 label { margin-top: 10px; min-width: 0; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: 0.4; cursor: default; }
.primary { display: block; width: 100%; min-height: 52px; margin-top: 14px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: 16.5px; }
.primary.danger { background: var(--danger); color: #fff; }
.ghost { display: block; width: 100%; min-height: 46px; margin-top: 8px; border-radius: 14px; border: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.ghost.danger { color: var(--danger); }
.link { color: var(--accent); font-size: 14px; min-height: 44px; padding: 0 6px; }
.choice { display: block; width: 100%; min-height: 50px; text-align: start; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 15.5px; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.stack .ghost { margin-top: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 0; min-height: 44px; padding: 0 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 14.5px; white-space: nowrap; }
.seg button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.goalline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; }
.stats3 div { background: var(--bg); border-radius: 12px; padding: 10px 8px; text-align: center; }
.stats3 b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.stats3 span { font-size: 12.5px; color: var(--muted); }
.bar { height: 8px; background: var(--none); border-radius: 99px; overflow: hidden; margin: 8px 0; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s ease; }

.queue { display: block; width: 100%; height: auto; margin-top: 6px; }
.qdoor { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.qin { font-size: 20px; font-weight: 700; fill: var(--ink); }
.qinl { font-size: 10px; fill: var(--muted); }
.qdot { fill: var(--dot); }
.qme circle { fill: var(--accent); }
.qme text { font-size: 8.5px; font-weight: 700; fill: var(--accent-ink); }
.qmore { font-size: 12px; fill: var(--muted); }

.photo { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink); font-size: 14.5px; cursor: pointer; }
.photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo img, .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.thumb { width: 84px; height: 84px; margin-top: 10px; display: block; }

.gymc { display: block; width: 100%; height: auto; aspect-ratio: 240 / 340; margin-top: 8px; border-radius: 12px; background: #2e3242;
  image-rendering: pixelated; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.queuec { aspect-ratio: 240 / 150; margin-top: 6px; }
.actbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(68px + env(safe-area-inset-bottom)); width: min(428px, calc(100vw - 32px)); z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--ink); color: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }
.actbar > div { flex: 1; min-width: 0; }
.actbar b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actbar small { font-size: 12.5px; opacity: .75; }
.actbar .num { color: inherit; font-size: inherit; }
.actbar button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; font-weight: 650; }
.actbar.on { flex-wrap: wrap; }
.actbar.on > div { flex: 1 1 100%; }
.actbar.on button { flex: 1 1 auto; }
.actbar .alt { background: rgba(127, 127, 127, .28); color: inherit; }
.actbar .go { background: var(--accent); color: var(--accent-ink); }
.actbar .no { color: inherit; opacity: .8; padding: 0 8px; font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.log { list-style: none; margin: 0; padding: 0; }
.log li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-top: 1px solid var(--line); font-size: 14.5px; }
.log li:first-child { border-top: 0; }
.sess { padding: 10px 0; border-top: 1px solid var(--line); }
.sess:first-of-type { border-top: 0; }

.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { aspect-ratio: 1; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; font-size: 12px; overflow: hidden; position: relative;
  background: linear-gradient(140deg, hsl(var(--h) 45% 88%), hsl(calc(var(--h) + 40) 40% 78%)); color: #1d1d1b; }
.tile b { font-size: 12.5px; }
.tile small { opacity: .7; font-size: 10.5px; }
.tile.mine { padding: 0; }
.tile.mine img { width: 100%; height: 100%; object-fit: cover; }
.tile.mine small { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff; opacity: 1; padding: 1px 6px; border-radius: 99px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); display: block; }
.stat small { font-size: 11.5px; color: var(--accent); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
.cal i, .legend i { display: block; aspect-ratio: 1; border-radius: 8px; background: var(--none); }
.cal i.now { outline: 2px solid var(--ink); outline-offset: 1px; }
i.went { background: var(--accent); } i.missed { background: var(--miss); } i.rest { background: var(--rest); } i.paused { background: var(--pause); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 11px; border-radius: 3px; }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; height: 130px; margin-top: 8px; }
.bars div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.bars i { display: block; width: 100%; min-height: 3px; background: var(--accent); border-radius: 8px 8px 3px 3px; }
.bars .v { font-size: 13px; font-variant-numeric: tabular-nums; }
.bars .l { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.set:first-child { border-top: 0; padding-top: 0; }
.set.col label { margin: 0; font-size: inherit; color: inherit; }
.set.col select { margin-top: 0; }
.set.col { flex-direction: column; align-items: stretch; gap: 8px; }
.set small { display: block; color: var(--muted); font-size: 12.5px; }
.sw { flex: none; width: 52px; height: 32px; border-radius: 99px; background: var(--dot); position: relative; transition: background .2s; }
.sw::after { content: ""; position: absolute; inset: -6px; }
.sw i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw.on { background: var(--accent); }
.sw.on i { transform: translateX(20px); }
[dir=rtl] .sw i { left: auto; right: 3px; }
[dir=rtl] .sw.on i { transform: translateX(-20px); }
.why { margin: 0; padding-inline-start: 18px; font-size: 14px; color: var(--muted); }
.why li { margin-bottom: 8px; }

nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
nav button { flex: 1; max-width: 115px; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11.5px; }
nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav button.on { color: var(--accent); font-weight: 650; }

.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet { width: 100%; max-width: 460px; max-height: 88dvh; overflow: auto; background: var(--card); border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0 10px; }
.sets { margin-top: 10px; }
.sethead, .setrow { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; align-items: center; }
.sethead { font-size: 12px; color: var(--muted); }
.setrow { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.setrow input { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .bar i, .sw, .sw i { transition: none; } }

.sesshead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 2px; font-size: 13px; font-weight: 600; color: var(--muted, #777); }
.sesshead:first-of-type { margin-top: 4px; }
.log time { display: inline-block; min-width: 3.4em; margin-inline-end: 8px; color: var(--muted, #777); font-size: 13px; }
.log li > span { display: flex; align-items: baseline; }
.log time { flex: none; }

/* front page: the room is a preview, sized so the whole page fits one phone screen */
.gymc.mini { width: auto; height: 38dvh; max-width: 100%; margin-inline: auto; }

/* dialogs sit inside the screen, never taller than it */
.scrim { align-items: center; padding: 16px; }
.sheet { border-radius: 20px; max-height: calc(100dvh - 32px); padding: 18px 16px; }
.btnrow { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 14px; }
.btnrow > * { margin-top: 0; min-height: 50px; }
.lblrow { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.lblrow .lbl { margin: 0; }
.lblrow .link { min-height: 32px; padding: 0; }
.link.vid { display: inline-flex; align-items: center; text-decoration: none; }
.fine.bad { color: var(--danger); }

/* gym map / choose-yourself switch and the exercise picker */
.modesw { margin: 10px 0 12px; }
.modesw button { min-height: 38px; }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cats button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; min-width: 0; }
.cats button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cats button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 650; }
.cats svg { width: 46px; height: 54px; shape-rendering: crispEdges; }
.cats .b { fill: var(--muted); opacity: .38; }
.cats .h { fill: var(--accent); }
.exgrid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.exgrid button { min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 14.5px; text-align: start; }

/* "what to train today" button above the map */
.trainbtn { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); text-align: start; }
.trainbtn svg { width: 30px; height: 36px; shape-rendering: crispEdges; flex: none; }
.trainbtn .b { fill: var(--muted); opacity: .38; } .trainbtn .h { fill: var(--accent); }
.trainbtn span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.trainbtn small { font-size: 12px; color: var(--muted); } .trainbtn b { font-size: 15.5px; }
.trainbtn i { font-style: normal; color: var(--muted); }
.sheet .cats { margin-top: 10px; }

.exgrid button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 650; }