/* The LogEZ demo: a phone drawn in HTML at the app's own size (384 x 853 dp). Colours come from theme.mjs. */
.dm, .dm * { box-sizing: border-box; }
.dm { --head: "Chakra Petch", system-ui, sans-serif; --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:where(.dm) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.dm input, .dm textarea { font: inherit; color: inherit; }
.dm svg { width: 1em; height: 1em; display: block; }

/* ---- stage: the controls, and the phone scaled to fit ---- */
.dm-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
/* the controls: a row of pills above the phone */
.dm-side { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; max-width: 100%; }
.dm-phone-slot { position: relative; flex: none; }
.dm-frame { position: absolute; left: 0; top: 0; width: 402px; padding: 9px; border-radius: 46px; background: linear-gradient(160deg, #4a565e, #1c2225 40%, #3a444b); box-shadow: 0 30px 70px var(--dm-shadow, rgba(0,0,0,.5)); transform-origin: 0 0; }
.dm-phone { position: relative; width: 384px; height: 853px; border-radius: 38px; overflow: hidden; background: var(--bg); color: var(--text); font: 400 14px/1.35 var(--body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; isolation: isolate; }

/* ---- the phone's own chrome ---- */
.sb { height: 48px; flex: none; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 22px 0 26px; font: 500 12px/1 var(--body); }
.sb svg { width: 8px; height: 14px; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 0 15px 16px; }
.scroll::-webkit-scrollbar { display: none; }
.dock { flex: none; display: flex; gap: 12px; padding: 10px 15px 12px; background: var(--bg); }
.nav { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 11px 0 9px; margin: 0 -3.5px; background: var(--bg); }
.nav button { display: grid; justify-items: center; gap: 6px; font: 500 11.6px/1.1 var(--body); color: var(--muted); padding: 2px 0 4px; }
.nav .ic { width: 52px; height: 30px; border-radius: 99px; display: grid; place-items: center; font-size: 22px; }
.nav button[aria-current="page"] { color: var(--primary); }
.nav button[aria-current="page"] .ic { background: color-mix(in srgb, var(--primary) 15%, var(--bg)); }
.gesture { flex: none; height: 24px; display: grid; place-items: center; background: var(--bg); }
.gesture i { width: 100px; height: 4px; border-radius: 4px; background: var(--text); opacity: .95; }

.top { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 7px 15px 7px; flex: none; }
.top h1, .title { margin: 0; font: 700 20.5px/1.1 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.top .grow { flex: 1; min-width: 0; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; }
.iconbtn:hover { background: var(--sv); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border: 1px solid var(--outline); border-radius: 99px; font-weight: 500; font-size: 13px; white-space: nowrap; }
.pill svg { font-size: 18px; }
.sectitle { font: 600 16px/1.2 var(--head); margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.sectitle a, .link { color: var(--primary); font: 600 13px var(--body); cursor: pointer; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.card.flat { padding: 0; overflow: hidden; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.micro { font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 99px; font: 600 15px/1 var(--body); }
.btn.fill { background: var(--fill); color: var(--on-fill); }
.btn.ghost { border: 1px solid var(--outline); }
.btn.danger { border: 1px solid color-mix(in srgb, var(--danger) 70%, transparent); color: var(--danger); }
.btn.block { flex: 1; }
.btn svg { font-size: 19px; }
.btn[disabled] { opacity: .45; cursor: default; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; font: 600 12px/1 var(--body); background: color-mix(in srgb, var(--primary) 20%, var(--card)); color: var(--primary); white-space: nowrap; }
.chip.gold { background: transparent; border: 1px solid var(--gold); color: var(--gold-text); gap: 5px; }
.chip.gold svg { font-size: 14px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--outline); border-radius: 99px; padding: 3px; gap: 2px; margin: 4px 0 12px; }
.seg button { height: 32px; border-radius: 99px; text-align: center; font: 500 13px/1 var(--body); color: var(--muted); }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 20%, var(--sv)); color: var(--primary); font-weight: 600; }

/* ---- Workout tab ---- */
.weekcard .head { display: flex; align-items: center; gap: 8px; }
.weekcard .big { font: 500 24px/1 var(--head); }
.weekcard .big b { font-weight: 700; }
.streakchip { height: 26px; padding: 0 10px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 16%, var(--sv)); color: var(--primary); font: 600 12px/26px var(--body); white-space: nowrap; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 10px; text-align: center; }
.week span { display: grid; justify-items: center; gap: 8px; font: 500 12px/1 var(--body); color: var(--muted); }
.week i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: var(--fill); color: var(--on-fill); }
.week i.off { background: transparent; border: 2px solid var(--outline); }
.week i.today { background: transparent; border: 2px solid var(--primary); }
.week span.t { color: var(--primary); }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.heat .dow { text-align: center; font: 500 11px/1.8 var(--body); color: var(--muted); }
.heat div.c { height: 21px; border-radius: 4px; display: grid; place-items: center; font: 600 11px/1 var(--body); background: var(--sv); color: var(--muted); }
.heat div.c.f { background: transparent; border: 1px solid var(--line); color: color-mix(in srgb, var(--muted) 60%, transparent); }
.heat div.c.l1 { background: color-mix(in srgb, var(--primary) 32%, var(--sv)); color: var(--text); }
.heat div.c.l2 { background: color-mix(in srgb, var(--primary) 56%, var(--sv)); color: var(--text); }
.heat div.c.l3 { background: color-mix(in srgb, var(--primary) 80%, var(--sv)); color: var(--on-primary); }
.heat div.c.l4 { background: var(--primary); color: var(--on-primary); }
.heat div.c.td { outline: 2px solid var(--text); outline-offset: -1px; }
.legend { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend .sw { display: inline-flex; gap: 3px; margin: 0 6px; vertical-align: middle; }
.legend .sw i { width: 11px; height: 11px; border-radius: 3px; }
.bar { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--sv) 85%, transparent); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--fill); }
.goal { margin-top: 12px; }
.goal .row { font-size: 15px; }
.goal b { font-weight: 600; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -15px; padding: 0 15px 4px; }
.hscroll::-webkit-scrollbar { display: none; }
.rcard { flex: none; width: 168px; min-height: 76px; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left; }
.rcard b { font: 600 16px/1.2 var(--head); display: block; }
.rcard small { color: var(--muted); font-size: 12px; display: block; margin-top: 3px; }
.rcard .go { width: 40px; height: 40px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); font-size: 20px; flex: none; }
.minibar { margin: 0 12px 8px; padding: 8px 8px 8px 16px; border-radius: 99px; background: var(--fill); color: var(--on-fill); display: flex; align-items: center; gap: 10px; font-weight: 600; }
.minibar .grow small { display: block; font-weight: 500; opacity: .75; font-size: 12px; }
.minibar .go { width: 36px; height: 36px; border-radius: 50%; background: var(--on-fill); color: var(--fill); display: grid; place-items: center; font-size: 18px; }

/* ---- Logger ---- */
.strip { display: grid; grid-template-columns: 1.1fr .8fr 1.2fr 1fr; padding: 10px 15px 8px; gap: 4px; }
.strip div .micro { font-size: 10.5px; letter-spacing: .05em; }
.strip b { display: block; font: 600 22px/1.15 var(--body); margin-top: 3px; }
.strip small { color: var(--muted); font-size: 13px; font-weight: 500; }
.strip b.gold { color: var(--gold-text); }
.ex { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
.ex > button.hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; }
.ex .ck { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--outline); display: grid; place-items: center; flex: none; font-size: 16px; }
.ex.done .ck { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.ex .nm { font: 600 15.5px/1.2 var(--head); }
.ex .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ex .chev { color: var(--muted); font-size: 20px; flex: none; }
.ex.open { padding: 14px; }
.ex.open .hd2 { display: flex; justify-content: space-between; align-items: flex-start; }
.chips { display: flex; gap: 8px; margin: 12px 0 14px; flex-wrap: wrap; }
.chips .pill { height: 34px; font-size: 13px; padding: 0 12px; color: var(--muted); }
.sets { display: grid; grid-template-columns: 40px 58px 1fr 1fr 40px; gap: 8px 6px; align-items: center; }
.sets .th { font: 600 11px/1 var(--body); letter-spacing: .05em; color: var(--muted); text-align: center; text-transform: uppercase; }
.sets .n { width: 30px; height: 30px; border-radius: 8px; background: var(--sv); display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-left: 4px; }
.sets .prev { text-align: center; color: var(--muted); font-size: 13px; }
.sets input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--outline); background: var(--bg); text-align: center; font: 500 16px var(--body); outline: none; min-width: 0; }
.sets input:focus { border-color: var(--primary); }
.sets .tick { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--outline); display: grid; place-items: center; color: var(--muted); font-size: 18px; margin: 0 auto; }
.sets .rowbg { display: contents; }
.sets .done .n { background: var(--fill); color: var(--on-fill); }
.sets .done .tick { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.sets .done input { background: color-mix(in srgb, var(--primary) 14%, var(--bg)); }
.sets .pr { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: -4px 2px 0; }
.addset { margin-top: 12px; width: 100%; height: 44px; border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 14px; color: var(--primary); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.addset svg { font-size: 18px; }
.restpill { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 8px; border-radius: 99px; background: var(--sv); border: 1px solid var(--outline); box-shadow: 0 8px 24px var(--shadow); font: 600 16px var(--body); }
.restpill .ring { width: 30px; height: 30px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); border-top-color: var(--primary); }
.restpanel { position: absolute; left: 15px; right: 15px; bottom: 70px; z-index: 6; background: var(--sv); border: 1px solid var(--outline); border-radius: 18px; padding: 12px; display: flex; gap: 8px; box-shadow: 0 8px 24px var(--shadow); }
.restpanel .btn { height: 42px; flex: 1; padding: 0 8px; font-size: 14px; }
.toast { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 9; background: var(--text); color: var(--bg); border-radius: 10px; padding: 13px 16px; font-size: 14.5px; box-shadow: 0 8px 24px var(--shadow); }

/* ---- Save ---- */
.kind { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 20%, var(--card)); color: var(--primary); font: 700 12px/1 var(--body); letter-spacing: .08em; }
.field { position: relative; margin-top: 14px; border: 1px solid var(--outline); border-radius: 10px; padding: 14px 12px 12px; }
.field label { position: absolute; top: -8px; left: 10px; padding: 0 5px; background: var(--card); font-size: 12px; color: var(--muted); }
.field input { width: 100%; border: 0; background: none; outline: none; font: 600 17px var(--head); }
.field .pen { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 14px; }
.stats4 b { font: 600 22px/1.1 var(--head); }
.stats4 b small { font: 500 13px var(--body); color: var(--muted); margin-left: 2px; }
.stats4 span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.records { border-color: var(--gold); display: flex; align-items: center; gap: 12px; }
.records svg { font-size: 26px; color: var(--gold); flex: none; }
.records b { color: var(--gold-text); font-weight: 600; font-size: 15px; display: block; }
.records span { color: var(--muted); font-size: 13.5px; }
.exlist .h { display: flex; justify-content: space-between; margin-bottom: 8px; }
.exlist .r { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 14.5px; }
.exlist .r b { font-weight: 600; white-space: nowrap; }
.exlist .r svg { display: inline-block; vertical-align: -2px; font-size: 15px; color: var(--gold); margin-left: 4px; }
.notes { width: 100%; min-height: 62px; border: 1px solid var(--outline); border-radius: 10px; background: none; padding: 12px; resize: none; outline: none; margin-bottom: 12px; }
.notes::placeholder { color: var(--muted); }
.switch { position: relative; width: 52px; height: 32px; border-radius: 99px; background: var(--sv); border: 2px solid var(--outline); flex: none; }
.switch i { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--outline); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--fill); border-color: var(--fill); }
.switch[aria-checked="true"] i { left: 24px; background: var(--on-fill); width: 22px; height: 22px; top: 3px; }
.notice { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }


.line { width: 100%; height: 150px; display: block; }
.body { display: grid; place-items: center; padding: 6px 0; }
.body svg { width: 100%; height: auto; max-height: 300px; }

.totals { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin: 12px 0; }
.totals b { font: 700 17px/1.1 var(--head); display: block; }
.totals span { color: var(--muted); font-size: 11.5px; }

/* ---- Library ---- */

/* ---- sheets, dialogs, end card ---- */
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 20; display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--card); border-radius: 24px 24px 0 0; padding: 12px 18px 26px; max-height: 86%; overflow-y: auto; border-top: 1px solid var(--outline); }
.sheet .grab { width: 38px; height: 4px; border-radius: 4px; background: var(--outline); margin: 0 auto 14px; }
.sheet h2 { margin: 6px 0 8px; font: 700 20px/1.2 var(--head); }
.sheet p { margin: 0 0 10px; color: var(--muted); }
.sheet ul { margin: 0 0 14px; padding-left: 18px; color: var(--text); }
.sheet li { margin: 5px 0; }
.sheet .btns { display: grid; gap: 10px; margin-top: 14px; }
.sheet .badge { display: inline-flex; gap: 6px; align-items: center; font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.dialog { margin: auto 22px; background: var(--card); border: 1px solid var(--outline); border-radius: 24px; padding: 22px; width: 100%; }
.dialog h2 { margin: 0 0 8px; font: 700 19px var(--head); }
.dialog p { margin: 0 0 18px; color: var(--muted); }
.dialog .btns { display: flex; justify-content: flex-end; gap: 10px; }
.scrim.mid { align-items: center; }

/* ---- the controls beside the phone ---- */
.dm-side h2 { margin: 0; font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2rem)/1.1 var(--head, "Chakra Petch", sans-serif); }
.dm-side p { margin: 0; }
.dm-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dm-ctl button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--dm-line, #3a444b); border-radius: 99px; color: inherit; font: 500 14px var(--body); }
.dm-ctl button[aria-pressed="true"] { border-color: var(--dm-accent, #b6ff3c); background: color-mix(in srgb, var(--dm-accent, #b6ff3c) 16%, transparent); }
.dm-ctl button i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.dm-pick { position: relative; }
.dm-pick__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 16px; border: 1px solid var(--dm-line, #3a444b); border-radius: 99px; color: inherit; font: 500 14px var(--body); }
.dm-pick__btn:hover { border-color: var(--dm-accent, #b6ff3c); }
.dm-pick__lab { opacity: .7; }
.dm-pick__sw { width: 14px; height: 14px; border-radius: 50%; display: block; }
.dm-pick__chev { display: grid; transition: transform .15s; }
.dm-pick__btn[aria-expanded="true"] .dm-pick__chev { transform: rotate(180deg); }
.dm-pick__list { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--dm-line, #3a444b); border-radius: 18px; min-width: 200px; background: var(--pg-bg, #12160f); box-shadow: 0 18px 40px var(--dm-shadow, rgba(0,0,0,.5)); }
.dm-pick__list[hidden] { display: none; }
.dm-pick__list button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; color: inherit; font: 500 14px var(--body); text-align: left; }
.dm-pick__list button:hover { background: color-mix(in srgb, var(--dm-accent, #b6ff3c) 12%, transparent); }
.dm-pick__list button[aria-selected="true"] { background: color-mix(in srgb, var(--dm-accent, #b6ff3c) 18%, transparent); font-weight: 600; }
.dm-pick__list i { width: 14px; height: 14px; border-radius: 50%; display: block; }
@media (prefers-reduced-motion: reduce) { .dm-pick__chev { transition: none; } }
/* on a phone the controls shrink to one slim row (colour, reset) so the phone gets the screen */
.scroll { overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .switch i { transition: none; } }


/* ---- library ---- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.line { height: 150px; }
.dm svg.line { width: 100%; height: 150px; font-size: 10px; }

/* ---- polish ---- */
.dm :focus-visible { outline: 2px solid var(--primary, #b6ff3c); outline-offset: 2px; border-radius: 8px; }
.dm-phone :focus-visible { outline-color: var(--primary); }
.dock .btn { white-space: nowrap; }
.dock .btn.ghost { padding: 0 16px; }
.weekcard .big { font-size: 21px; white-space: nowrap; }
.weekcard .big { font-size: 19px; } .weekcard .head { gap: 6px; }
.dm a.btn { text-decoration: none; }

/* ---- fidelity: train ---- */
/* The Workout tab, the Logger and Save Workout are written in the app's own dp (a real phone is 411 dp wide); every length below is dp x --u, so this 384 px phone shows the app at its own proportions. */
.dm-phone { --u: 0.93333px; }
.z svg { flex: none; }
.z b { font-weight: inherit; }
.z .u { margin-left: .118em; }
.z .tx { min-width: 0; }

/* -- Workout tab -- */
.w { padding: calc(7.4*var(--u)) 0 calc(12*var(--u)); display: flex; flex-direction: column; gap: calc(12*var(--u)); }
.w > .card { margin: 0; padding: 0; border: 0; border-radius: calc(18*var(--u)); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--line), 0 calc(1*var(--u)) calc(2*var(--u)) var(--shadow), 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow); }
.wk-week { padding: calc(10*var(--u)) calc(8*var(--u)) calc(10.9*var(--u)) calc(16*var(--u)) !important; cursor: pointer; }
.wk-week .hd { display: flex; align-items: center; gap: calc(8*var(--u)); min-height: calc(28.6*var(--u)); }
.wk-week .cnt { margin-right: auto; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.wk-week .cnt b { font: 600 calc(22*var(--u))/calc(24*var(--u)) var(--body); }
.wk-week .sc { height: calc(26*var(--u)); padding: 0 calc(10*var(--u)); border-radius: calc(99*var(--u)); background: color-mix(in srgb, var(--primary) 16%, var(--card)); color: var(--primary); font: 500 calc(11*var(--u))/calc(26*var(--u)) var(--body); white-space: nowrap; }
.wk-week .sc b { font-weight: 700; }
.wk-week .chv { width: calc(20*var(--u)); height: calc(20*var(--u)); color: var(--muted); }
.wk-week .chv svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.wk-week .days { display: grid; grid-template-columns: repeat(7, 1fr); padding: calc(8*var(--u)) calc(4*var(--u)) 0 0; text-align: center; }
.wk-week .days > span { display: flex; flex-direction: column; align-items: center; gap: calc(8*var(--u)); font: 500 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.wk-week .days > span.t { color: var(--primary); font-weight: 600; }
.wk-week .dy { display: grid; place-items: center; width: calc(32*var(--u)); height: calc(32*var(--u)); border-radius: 50%; box-sizing: border-box; font-style: normal; }
.wk-week .dy svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.wk-week .dy.on { background: var(--primary); color: var(--on-primary); }
.wk-week .dy.today { border: calc(2*var(--u)) solid var(--primary); }
.wk-week .dy.up { border: calc(1*var(--u)) solid var(--outline); }
.wk-week .dy.miss { background: var(--sv); }
.wk-week .dy.rest { background: var(--sv); }
.wk-week .dy.rest svg { width: calc(32*var(--u)); height: calc(32*var(--u)); }

.wk-month { padding: calc(2*var(--u)) calc(4*var(--u)) calc(12*var(--u)) calc(16*var(--u)) !important; }
.wk-month .hd { position: relative; min-height: calc(48*var(--u)); }
.wk-month .nm { display: flex; align-items: center; gap: calc(12*var(--u)); padding: calc(8*var(--u)) calc(12*var(--u)) 0 0; height: calc(30*var(--u)); margin-right: calc(96*var(--u)); white-space: nowrap; }
.wk-month .nm b { font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.wk-month .nm span { font: 500 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.wk-month .ar { position: absolute; right: 0; top: 0; display: flex; }
.wk-month .ar button { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; color: var(--text); }
.wk-month .ar button svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.wk-month .ar button[disabled] { opacity: .38; cursor: default; }
.wk-month .gridbox { margin-top: calc(0.3*var(--u)); padding-right: calc(12*var(--u)); cursor: pointer; }
.wk-month .hm { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(4*var(--u)); margin: 0; }
.wk-month .dw { text-align: center; font: 400 calc(11*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); margin-bottom: calc(-3.7*var(--u)); }
.wk-month .c { height: calc(22*var(--u)); border-radius: calc(3*var(--u)); display: grid; place-items: center; font: 500 calc(13.5*var(--u))/calc(14*var(--u)) var(--body); background: var(--sv); color: var(--muted); }
.wk-month .c.f { background: transparent; box-shadow: inset 0 0 0 calc(1*var(--u)) var(--line); color: var(--outline); }
.wk-month .c.l1 { background: color-mix(in oklab, var(--primary) 32%, var(--sv)); color: var(--h1); font-weight: 600; }
.wk-month .c.l2 { background: color-mix(in oklab, var(--primary) 56%, var(--sv)); color: var(--h2); font-weight: 600; }
.wk-month .c.l3 { background: color-mix(in oklab, var(--primary) 80%, var(--sv)); color: var(--h3); font-weight: 600; }
.wk-month .c.l4 { background: var(--primary); color: var(--h4); font-weight: 600; }
.wk-month .c.td { box-shadow: inset 0 0 0 calc(1.5*var(--u)) var(--text); font-weight: 600; }
.wk-month .c.td:not(.l1):not(.l2):not(.l3):not(.l4) { color: var(--text); }
.wk-month .lg { display: flex; justify-content: space-between; align-items: center; padding: calc(12*var(--u)) calc(12*var(--u)) 0 0; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.wk-month .sc2 { display: flex; align-items: center; gap: calc(4*var(--u)); }
.wk-month .sw { display: flex; gap: calc(3*var(--u)); }
.wk-month .sw i { width: calc(10*var(--u)); height: calc(10*var(--u)); border-radius: calc(3*var(--u)); display: block; }
.wk-month .sw .l1 { background: color-mix(in oklab, var(--primary) 32%, var(--sv)); }
.wk-month .sw .l2 { background: color-mix(in oklab, var(--primary) 56%, var(--sv)); }
.wk-month .sw .l3 { background: color-mix(in oklab, var(--primary) 80%, var(--sv)); }
.wk-month .sw .l4 { background: var(--primary); }

.wk-goals { padding: 0 0 calc(8*var(--u)) !important; }
.wk-goals .hd { display: flex; align-items: center; height: calc(48*var(--u)); padding: 0 calc(4*var(--u)) 0 calc(16*var(--u)); }
.wk-goals .hd b { flex: 1; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.wk-goals .plus { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; }
.wk-goals .plus svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.wk-goals .gl { min-height: calc(44*var(--u)); padding: calc(5*var(--u)) calc(16*var(--u)); display: flex; flex-direction: column; gap: calc(4*var(--u)); margin: 0; }
.wk-goals .gl .r { display: flex; justify-content: space-between; align-items: center; gap: calc(12*var(--u)); font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.wk-goals .gl .v { font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; }
.wk-goals .bar { height: calc(4*var(--u)); margin: 0; border-radius: calc(2*var(--u)); background: var(--sv); overflow: hidden; }
.wk-goals .bar i { display: block; height: 100%; border-radius: calc(2*var(--u)); background: var(--primary); }

.w .sec { display: flex; align-items: center; min-height: calc(40*var(--u)); padding: 0 calc(8*var(--u)) 0 calc(16*var(--u)); margin: 0; }
.w .sec > b { flex: 1; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.w .sec a { display: flex; align-items: center; min-height: calc(40*var(--u)); padding: 0 calc(8*var(--u)); border-radius: calc(99*var(--u)); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); cursor: pointer; }
.w .sec a svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.w .sec.rt { min-height: calc(48*var(--u)); padding: 0 calc(4*var(--u)) 0 calc(16*var(--u)); gap: calc(12*var(--u)); }
.w .sec.rt > b { flex: none; }
.w .sec.rt .ct { flex: 1; font: 500 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.w .sec.rt a { padding: 0 calc(12*var(--u)); }
.w .sec + .rcs { margin-top: calc(-12*var(--u)); }
.w .rcs { display: flex; gap: calc(12*var(--u)); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-16.07*var(--u)); padding: 0 calc(16.07*var(--u)) calc(8*var(--u)); margin-bottom: calc(-8*var(--u)); }
.w .rcs::-webkit-scrollbar { display: none; }
.w .rc { flex: none; width: calc(172.5*var(--u)); display: flex; align-items: center; padding: calc(8*var(--u)) calc(8*var(--u)) calc(8*var(--u)) calc(12*var(--u)); border: 0; background: var(--card); border-radius: calc(18*var(--u)); text-align: left; box-shadow: inset 0 0 0 calc(1*var(--u)) var(--line), 0 calc(1*var(--u)) calc(2*var(--u)) var(--shadow), 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow); }
.w .rc .tx { flex: 1; padding-right: calc(4*var(--u)); }
.w .rc b { display: block; font: 500 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.w .rc small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.w .go { width: calc(40*var(--u)); height: calc(40*var(--u)); border-radius: 50%; flex: none; display: grid; place-items: center; border: calc(1*var(--u)) solid color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); }
.w .go svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.wk-routines { overflow: hidden; }
.wk-routines .fr { display: flex; align-items: center; width: 100%; min-height: calc(56*var(--u)); padding: calc(8*var(--u)) calc(16*var(--u)); }
.wk-routines .fr svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.wk-routines .nmf { flex: 1; padding: 0 calc(8*var(--u)) 0 calc(12*var(--u)); font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.wk-routines .fr .n { font: 500 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.wk-routines .rr { display: flex; align-items: center; gap: calc(8*var(--u)); min-height: calc(64*var(--u)); padding: calc(8*var(--u)) calc(16*var(--u)) calc(8*var(--u)) calc(48*var(--u)); border-top: calc(1*var(--u)) solid var(--line); }
.wk-routines .rr .tx { flex: 1; }
.wk-routines .rr b { display: block; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.wk-routines .rr small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.wk-routines .stb { height: calc(40*var(--u)); padding: 0 calc(24*var(--u)); border-radius: calc(99*var(--u)); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); background: color-mix(in srgb, var(--primary) 14%, var(--card)); border: calc(1*var(--u)) solid color-mix(in srgb, var(--primary) 35%, transparent); }
.wdock { display: flex; gap: calc(8*var(--u)); padding: calc(12*var(--u)) calc(16*var(--u)); background: var(--bg); flex: none; }
.wdock button { height: calc(48*var(--u)); border-radius: calc(99*var(--u)); display: flex; align-items: center; justify-content: center; font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; }
.wdock .ob { flex: 1; gap: calc(6*var(--u)); padding: 0 calc(8*var(--u)); border: calc(1*var(--u)) solid var(--outline); color: var(--text); }
.wdock .ob svg { width: calc(18*var(--u)); height: calc(18*var(--u)); color: var(--primary); }
.wdock .sb2 { flex: 2; gap: calc(8*var(--u)); padding: 0 calc(16*var(--u)); background: var(--fill); color: var(--on-fill); }
.wdock .sb2 svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.wcz { height: calc(36*var(--u)); padding: 0 calc(13*var(--u)) 0 calc(8*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(99*var(--u)); display: inline-flex; align-items: center; gap: calc(8*var(--u)); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; flex: none; }
.wcz svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }

/* -- the strip that returns to a workout in progress (every tab root) -- */
.minibar { margin: 0; padding: calc(14*var(--u)) calc(16*var(--u)); border-radius: 0; gap: calc(12*var(--u)); background: var(--card); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); order: 2; width: auto; }
.minibar .grow { font: 600 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.minibar .grow small { opacity: 1; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); }
.minibar .go { width: auto; height: auto; border-radius: calc(99*var(--u)); background: none; color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); padding: calc(10*var(--u)) calc(12*var(--u)); }
.minibar .go svg { display: none; }
.minibar .go::after { content: "Open"; }
.dm-phone:not([style*="--bg:#07090a"]) .minibar { background: var(--fill); color: var(--on-fill); }
.dm-phone:not([style*="--bg:#07090a"]) .minibar .go { color: var(--on-fill); }
.view > .nav { order: 3; }
.view > .gesture { order: 4; }

/* -- Logger -- */
.ltop { display: flex; align-items: center; min-height: calc(64*var(--u)); padding: 0 calc(4*var(--u)); margin-top: calc(-1.6*var(--u)); background: var(--bg); flex: none; }
.ltop .ib { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; flex: none; }
.ltop .ib svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.ltop .tt { flex: 1; min-width: 0; padding: calc(4*var(--u)) calc(4*var(--u)) calc(4*var(--u)) calc(12*var(--u)); }
.ltop .tt b { display: block; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.ltop .tt small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.4*var(--u)); color: var(--muted); padding: calc(4*var(--u)) 0; }
.ltop .fin { height: calc(40*var(--u)); padding: 0 calc(16*var(--u)); margin-right: calc(8*var(--u)); border-radius: calc(99*var(--u)); background: var(--fill); color: var(--on-fill); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.lstrip { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(6.2*var(--u)) calc(16*var(--u)) calc(8*var(--u)); background: var(--bg); flex: none; }
.lstrip > div > span { display: block; font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); text-transform: uppercase; color: var(--muted); }
.lstrip b { display: block; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--body); }
.lstrip b.el { font: 600 calc(22*var(--u))/calc(28*var(--u)) var(--body); }
.lstrip b small { font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.lstrip b.gold { color: var(--gold-text); }
.lstrip b.vol { word-spacing: -.1em; }
.l { padding: 0 0 calc(4*var(--u)); }
.lx { background: var(--card); border: 0; border-radius: calc(18*var(--u)); margin: 0 0 calc(12*var(--u)); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--line), 0 calc(1*var(--u)) calc(2*var(--u)) var(--shadow), 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow); }
.lx .tx { flex: 1; min-width: 0; }
.lx .tx b { display: block; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.lx .tx small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.lx .fold { display: flex; align-items: center; width: 100%; min-height: calc(64*var(--u)); padding: calc(12*var(--u)) calc(16*var(--u)); }
.lx .fold .tx { padding: 0 calc(12*var(--u)); }
.lx .ring { width: calc(26*var(--u)); height: calc(26*var(--u)); border-radius: 50%; border: calc(1.5*var(--u)) solid var(--outline); flex: none; display: grid; place-items: center; box-sizing: border-box; }
.lx .ring.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.lx .ring svg { width: calc(16*var(--u)); height: calc(16*var(--u)); }
.lx .chv { color: var(--muted); }
.lx .chv svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.prc { display: inline-flex; align-items: center; gap: calc(4*var(--u)); flex: none; padding: calc(3*var(--u)) calc(8*var(--u)); margin-right: calc(8*var(--u)); border: 0; box-shadow: inset 0 0 0 calc(1*var(--u)) color-mix(in srgb, var(--gold) 60%, transparent); border-radius: calc(99*var(--u)); color: var(--gold-text); font: 600 calc(11*var(--u))/calc(13*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); }
.prc svg { width: calc(15*var(--u)); height: calc(15*var(--u)); color: var(--gold); }
.lx.op { padding: calc(16*var(--u)); }
.lx.op .hd { display: flex; align-items: flex-start; }
.lx.op .hd .tx b { padding-top: calc(6.3*var(--u)); }
.lx.op .hd .tx small { letter-spacing: calc(.4*var(--u)); }
.lx.op .mv { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; flex: none; }
.lx.op .mv svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.lx .chp { display: flex; flex-wrap: wrap; gap: calc(8*var(--u)); padding: calc(17.7*var(--u)) 0 calc(8*var(--u)); }
.lx .chp button { display: flex; align-items: center; gap: calc(8*var(--u)); height: calc(32*var(--u)); padding: 0 calc(12*var(--u)) 0 calc(8*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(99*var(--u)); color: var(--muted); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; }
.lx .chp button svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.lx .st { padding-top: calc(12*var(--u)); }
.lx .th { margin: calc(-1.3*var(--u)) 0 calc(1.3*var(--u)); }
.lx .th, .lx .sr { display: grid; grid-template-columns: calc(48*var(--u)) calc(72*var(--u)) 1fr .7fr calc(48*var(--u)); align-items: center; }
.lx .th span { text-align: center; font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); text-transform: uppercase; color: var(--muted); }
.lx .sr { min-height: calc(52*var(--u)); border-radius: calc(12*var(--u)); box-sizing: border-box; }
.lx .sr + .sr { margin-top: calc(4*var(--u)); }
.lx .sr.done { background: color-mix(in srgb, var(--primary) 15%, var(--card)); }
.lx .sr.act { box-shadow: inset 0 0 0 calc(1*var(--u)) var(--primary); }
.lx .bd { display: grid; place-items: center; padding: 0 calc(4*var(--u)); }
.lx .bd i { width: calc(32*var(--u)); height: calc(32*var(--u)); border-radius: calc(8*var(--u)); background: color-mix(in srgb, var(--text) 8%, transparent); display: grid; place-items: center; font: 600 calc(14*var(--u))/calc(20*var(--u)) var(--body); font-style: normal; }
.lx .pv { display: flex; align-items: center; justify-content: center; padding: 0 calc(4*var(--u)); font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.lx .sr.done .pv { color: var(--text); }
.lx .pv .prc { margin: 0; }
.lx .cl { display: flex; align-items: center; height: calc(48*var(--u)); padding: 0 calc(2*var(--u)); }
.lx .cl input { width: 100%; min-width: 0; height: calc(40*var(--u)); padding: 0 calc(6*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(8*var(--u)); background: var(--bg); color: var(--text); text-align: center; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); outline: none; }
.lx .sr.act .cl input { border-color: var(--primary); }
.lx .cl input:focus { border-color: var(--primary); }
.lx .sr.done .cl input { border-color: transparent; background: transparent; font-weight: 500; }
.lx .ck { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; }
.lx .ck svg { box-sizing: border-box; width: calc(34*var(--u)); height: calc(34*var(--u)); padding: calc(5.5*var(--u)); border-radius: 50%; border: calc(1.5*var(--u)) solid var(--outline); color: var(--muted); }
.lx .sr.done .ck svg { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.lx .adds { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(8*var(--u)); width: 100%; min-height: calc(48*var(--u)); margin-top: calc(8*var(--u)); border-radius: calc(12*var(--u)); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.lx .adds > svg:not(.dash) { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.lx .dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lx .dash rect { fill: none; stroke: var(--primary); stroke-opacity: .5; stroke-width: calc(1*var(--u)); stroke-dasharray: calc(8*var(--u)) calc(6*var(--u)); rx: calc(12*var(--u)); }
.l .adde { display: flex; align-items: center; justify-content: center; gap: calc(8*var(--u)); width: 100%; min-height: calc(52*var(--u)); margin: 0 0 calc(16*var(--u)); border-radius: calc(99*var(--u)); border: calc(1*var(--u)) solid color-mix(in srgb, var(--primary) 60%, transparent); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.l .adde svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.ldock { position: relative; display: flex; justify-content: center; padding: calc(8*var(--u)) calc(16*var(--u)); background: var(--bg); flex: none; }
.rpill { display: flex; align-items: center; gap: calc(12*var(--u)); height: calc(52*var(--u)); padding: 0 calc(16*var(--u)) 0 calc(12*var(--u)); border-radius: calc(99*var(--u)); background: var(--sv); border: calc(1*var(--u)) solid var(--line); box-shadow: 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow), 0 calc(3*var(--u)) calc(8*var(--u)) var(--shadow); font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--body); color: var(--text); }
.rpill .rg { width: calc(32*var(--u)); height: calc(32*var(--u)); }
.rgo { display: flex; align-items: center; gap: calc(8*var(--u)); height: calc(52*var(--u)); padding: 0 calc(16*var(--u)); border-radius: calc(99*var(--u)); background: var(--primary); color: var(--on-primary); box-shadow: 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow), 0 calc(3*var(--u)) calc(8*var(--u)) var(--shadow); }
.rgo svg { width: calc(20*var(--u)); height: calc(20*var(--u)); fill: currentColor; flex: none; }
.rgo b { font: 700 calc(16*var(--u))/calc(24*var(--u)) var(--head); }
.rgo span { font: 500 calc(12*var(--u))/calc(16*var(--u)) var(--body); margin-left: calc(2*var(--u)); }
.rpill > svg:last-child { width: calc(20*var(--u)); height: calc(20*var(--u)); color: var(--muted); }
.rpanel { position: absolute; left: 0; right: 0; bottom: 100%; padding: 0 calc(16*var(--u)) calc(8*var(--u)); z-index: 5; }
.rpanel .in { display: flex; flex-direction: column; gap: calc(12*var(--u)); padding: calc(16*var(--u)); background: var(--sv); border: calc(1*var(--u)) solid var(--line); border-radius: calc(16*var(--u)); box-shadow: 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow), 0 calc(3*var(--u)) calc(8*var(--u)) var(--shadow); }
.rpanel .h { display: flex; align-items: flex-start; }
.rpanel .h .tx { flex: 1; padding-right: calc(12*var(--u)); }
.rpanel .h b { display: block; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.rpanel .h small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.4*var(--u)); color: var(--muted); }
.rpanel .tm { font: 600 calc(22*var(--u))/calc(28*var(--u)) var(--body); }
.rpanel .pb { height: calc(4*var(--u)); border-radius: calc(2*var(--u)); background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.rpanel .pb i { display: block; height: 100%; background: var(--primary); border-radius: calc(2*var(--u)); }
.rpanel .lab { font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); text-transform: uppercase; color: var(--muted); }
.rpanel .pre { display: flex; flex-wrap: wrap; gap: calc(8*var(--u)); }
.rpanel .pre button { min-height: calc(48*var(--u)); padding: 0 calc(16*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(99*var(--u)); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.rpanel .pre button.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); font-weight: 600; }
.rpanel .acts { display: flex; gap: calc(8*var(--u)); }
.rpanel .acts button { flex: 1; min-height: calc(48*var(--u)); padding: 0 calc(8*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(99*var(--u)); text-align: center; font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.rpanel .acts button.sk { border-color: var(--primary); color: var(--primary); }
.toast { left: calc(12*var(--u)); right: calc(12*var(--u)); bottom: calc(37*var(--u)); border-radius: calc(4*var(--u)); padding: calc(14*var(--u)) calc(16*var(--u)); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); box-shadow: 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow), 0 calc(3*var(--u)) calc(8*var(--u)) var(--shadow); }

/* -- Save Workout -- */
.s { padding: calc(16*var(--u)) 0; display: flex; flex-direction: column; gap: calc(12*var(--u)); }
.s > .card { margin: 0; padding: calc(16*var(--u)); border: 0; border-radius: calc(18*var(--u)); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--line), 0 calc(1*var(--u)) calc(2*var(--u)) var(--shadow), 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow); }
.s .tx { flex: 1; }
.s .top2 { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4*var(--u)) calc(12*var(--u)); }
.s .kd { padding: calc(4*var(--u)) calc(10*var(--u)); border-radius: calc(99*var(--u)); background: color-mix(in srgb, var(--primary) 16%, var(--card)); color: var(--primary); font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: .08em; }
.s .dt { display: flex; align-items: center; padding: calc(4*var(--u)) 0; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.s .dt svg { width: calc(16*var(--u)); height: calc(16*var(--u)); }
.s .dt svg:first-child { margin-right: calc(6*var(--u)); }
.s .dt svg:last-child { margin-left: calc(6*var(--u)); }
.s .ofield { position: relative; display: flex; align-items: center; height: calc(56*var(--u)); margin-top: calc(12*var(--u)); padding: 0 calc(16*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(4*var(--u)); }
.s .ofield label { position: absolute; left: calc(12*var(--u)); top: calc(-9*var(--u)); padding: 0 calc(4*var(--u)); background: var(--card); font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.4*var(--u)); color: var(--muted); }
.s .ofield input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); color: var(--text); }
.s .ofield > svg { width: calc(20*var(--u)); height: calc(20*var(--u)); color: var(--muted); }
.s .ofield:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--primary); }
.s .ofield.nt { height: auto; min-height: calc(56*var(--u)); margin: 0; padding: 0; }
.s .ofield textarea { display: block; width: 100%; min-height: calc(54*var(--u)); padding: calc(15*var(--u)) calc(16*var(--u)); border: 0; background: none; outline: none; resize: none; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); field-sizing: content; }
.s .ofield textarea::placeholder { color: var(--muted); }
.s .stats { display: flex; justify-content: space-evenly; padding-top: calc(12*var(--u)); }
.s .stats > div { flex: 1; min-width: 0; padding: calc(6*var(--u)) calc(2*var(--u)); text-align: center; }
.s .stats b { display: block; white-space: nowrap; font: 600 calc(22*var(--u))/calc(28*var(--u)) var(--body); }
.s .stats b .u { font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.s .stats > div > span { display: block; padding-top: calc(2*var(--u)); font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.s .recs { display: flex; align-items: center; gap: calc(12*var(--u)); padding: calc(12*var(--u)) calc(16*var(--u)); border: 0; box-shadow: inset 0 0 0 calc(1*var(--u)) color-mix(in srgb, var(--gold) 55%, transparent); border-radius: calc(16*var(--u)); background: var(--card); }
.s .recs > svg { width: calc(24*var(--u)); height: calc(24*var(--u)); color: var(--gold); }
.s .recs b { display: block; font: 600 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--gold-text); }
.s .recs small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.4*var(--u)); color: var(--muted); }
.s .exl { display: flex; flex-direction: column; gap: calc(2.4*var(--u)); }
.s .exl .h { display: flex; justify-content: space-between; font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); text-transform: uppercase; color: var(--muted); }
.s .r { display: flex; align-items: center; gap: calc(8*var(--u)); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.s .r > span { flex: 1; min-width: 0; }
.s .r b { font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; }
.s .r > svg { width: calc(16*var(--u)); height: calc(16*var(--u)); color: var(--gold); }
.s .rtop { display: flex; align-items: center; gap: calc(12*var(--u)); }
.s .rtop small { display: block; font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); color: var(--muted); }
.s .rtop .tx span { font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.s .sw2 { position: relative; width: calc(52*var(--u)); height: calc(32*var(--u)); flex: none; box-sizing: border-box; border-radius: calc(99*var(--u)); background: var(--sv); border: calc(2*var(--u)) solid var(--outline); }
.s .sw2 i { position: absolute; top: calc(6*var(--u)); left: calc(6*var(--u)); width: calc(16*var(--u)); height: calc(16*var(--u)); border-radius: 50%; background: var(--outline); transition: left .15s, width .15s, height .15s, top .15s; }
.s .sw2[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.s .sw2[aria-checked="true"] i { left: calc(22*var(--u)); top: calc(2*var(--u)); width: calc(24*var(--u)); height: calc(24*var(--u)); background: var(--on-primary); }
.s .card hr { border: 0; border-top: calc(1*var(--u)) solid var(--line); margin: calc(12*var(--u)) 0; }
.s .sv-card:not(.exl) .r { padding: calc(2*var(--u)) 0; }
.s .note { margin: calc(8*var(--u)) 0 0; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.4*var(--u)); color: var(--muted); }
.s .notice { display: flex; align-items: center; gap: calc(12*var(--u)); padding: calc(4*var(--u)) calc(4*var(--u)) calc(4*var(--u)) calc(16*var(--u)); border-radius: calc(16*var(--u)); background: var(--sv); color: var(--muted); }
.s .notice > svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.s .notice .tx { font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.s .notice button { height: calc(40*var(--u)); padding: 0 calc(12*var(--u)); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.sdock { margin-bottom: calc(-1.8*var(--u)); display: flex; align-items: center; gap: calc(12*var(--u)); padding: calc(16*var(--u)); background: var(--bg); border-top: calc(1*var(--u)) solid var(--line); flex: none; }
.sdock button { min-height: calc(48*var(--u)); border-radius: calc(99*var(--u)); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); text-align: center; }
.sdock .dis { padding: 0 calc(24*var(--u)); border: calc(1*var(--u)) solid color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); }
.sdock .svb { flex: 1; background: var(--fill); color: var(--on-fill); }
@media (prefers-reduced-motion: reduce) { .s .sw2 i { transition: none; } }

.lx.tip { padding: calc(16*var(--u)) calc(16*var(--u)) calc(8*var(--u)); }
.lx.tip .tt { display: flex; align-items: center; gap: calc(8*var(--u)); }
.lx.tip .tt svg { width: calc(24*var(--u)); height: calc(24*var(--u)); color: var(--muted); }
.lx.tip .tt b { font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.lx.tip p { letter-spacing: calc(-0.1*var(--u)); margin: calc(8*var(--u)) 0 0; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.lx.tip button { display: flex; align-items: center; min-height: calc(48*var(--u)); padding: 0 calc(12*var(--u)); margin-top: calc(4*var(--u)); color: var(--primary); font: 500 calc(14*var(--u))/calc(20*var(--u)) var(--body); }

/* ---- fidelity: library ---- */
/* The real screenshots are 411 dp wide (2.625 px per dp); the phone here is 384 px wide, so this screen is laid out in true dp and scaled by 384/411.4. */
.lb, .xdet { zoom: .93333; }
.lb { padding-bottom: 8px; }
.lb button { font: inherit; }
.lb-seg { height: 47px; padding: 7px 0 0; }
.lb-seg > div { height: 40px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--outline); border-radius: 99px; overflow: hidden; }
.lb-seg button { text-align: center; font: 600 14px/20px var(--body); color: var(--muted); }
.lb-seg button + button { border-left: 1px solid var(--outline); }
.lb-seg button[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--bg)); }
.lb-plus { width: 44.8px; height: 40px; margin: -2px -11px -2px 0; font-size: 22.4px; color: var(--muted); }
.lb-topmore { width: 44.8px; height: 40px; margin: -2px -11px -2px 0; font-size: 22.4px; color: var(--muted); }
.lb-count { font: 400 12px/16px var(--body); color: var(--muted); white-space: nowrap; }
.lb-count b { font-weight: 500; }
.lb-head { display: flex; align-items: center; height: 48px; margin-bottom: 8px; }
.lb-head.first { margin: 16.7px 0 16px; }
.lb-head.plain { height: auto; margin: 27.5px 0 0 !important; }
.lb-hw { flex: 1; display: flex; align-items: baseline; min-width: 0; }
.lb-hw .lb-count { margin-left: 8px; }
.lb-h { font: 600 16px/22px var(--head); }
.lb-edit { display: flex; align-items: center; gap: 4px; height: 40px; color: var(--primary); font: 600 14px/20px var(--body); }
.lb-edit svg { width: 18px; height: 18px; }
.lb-more { width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; flex: none; color: var(--text); }
.lb-more svg { width: 24px; height: 24px; }
.folder-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.folder { display: flex; align-items: center; min-height: 71px; padding: 8px 4px 8px 16px; cursor: pointer; }
.folder .fi, .lb-level .fi { width: 40px; height: 40px; border-radius: 12px; background: var(--sv); display: grid; place-items: center; color: var(--muted); flex: none; }
.folder .fi svg { width: 22px; height: 22px; }
.folder .grow { margin-left: 12px; }
.folder b { display: block; font: 600 16px/22px var(--body); }
.folder .muted { font-size: 14px; line-height: 20px; }
.folder .chev { color: var(--muted); margin-left: 8px; display: grid; }
.folder .chev svg { width: 24px; height: 24px; }
.rrow { display: flex; align-items: center; min-height: 64px; padding: 8px 4px 8px 64px; border-top: 1px solid var(--line); cursor: pointer; }
.rrow b { display: block; font: 600 16px/22px var(--head); }
.rrow .muted { font-size: 14px; line-height: 20px; }
.lb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.lb-btn { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; font: 600 14px/20px var(--body); color: var(--text); background: transparent; }
.lb-btn svg { width: 20px; height: 20px; color: var(--primary); }
.lb-btn.seeall { width: 100%; margin-top: 16.6px; color: var(--primary); gap: 4px; }
.lb-btn.seeall svg { width: 18px; height: 18px; }
.lb-p { margin: 8px 0 0; font: 400 14px/20px var(--body); color: var(--muted); }
.lb-level { display: flex; align-items: baseline; margin-top: 21px; }
.lb-lv { font: 600 14px/20px var(--head); }
.lb-lv.soon { color: var(--muted); }
.lb-level .lb-count { margin-left: 8px; }
.lb-tag { font: 400 11px/12px var(--body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; margin-left: 8px; align-self: center; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12.2px 12px; margin-top: 8.5px; }
.plan, .hcard { box-shadow: 0 1px 3px var(--shadow), 0 2px 8px color-mix(in srgb, var(--shadow) 55%, transparent); }
.plan { display: flex; flex-direction: column; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 15px 15px 13.4px; text-align: left; }
.plan .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sv); color: var(--primary); display: grid; place-items: center; }
.plan .ico svg { width: 22px; height: 22px; }
.plan b { display: block; text-wrap: balance; font: 600 16px/22px var(--head); margin-top: 12.2px; }
.plan .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12.2px; }
.plan .tags i { font: 400 11px/16px var(--body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; line-height: 12px; }
.plan .meta { margin-top: auto; padding-top: 13.9px; color: var(--muted); font: 400 14px/18.2px var(--body); }
.plan .meta span { color: var(--text); font-weight: 500; }
.plan .meta::before { content: ""; display: block; height: 0; }
.plan b + .tags + .meta { margin-top: auto; }
.soonrow { margin-top: 8px; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--outline); border-radius: 18px; color: var(--muted); font: 400 14px/20px var(--body); }
.soonrow svg { width: 20px; height: 20px; flex: none; }
.lb-fine { margin: 24px 0 8px; font: 400 12px/16px var(--body); color: var(--muted); }

/* Exercises */
.lb-search { display: flex; align-items: center; height: 56px; margin: 17px 0 12px; padding: 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 99px; }
.lb-search:focus-within { border: 2.3px solid var(--primary); padding: 0 8.7px; }
.lb-search .si, .lb-search .sx { width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); flex: none; }
.lb-search svg { width: 24px; height: 24px; }
.lb-search input:focus, .lb-search input:focus-visible { outline: none !important; box-shadow: none !important; }
.lb-search input { flex: 1; min-width: 0; margin: 0 16px 0 18.5px; border: 0; background: none; outline: none; font: 400 16px/24px var(--body); color: var(--text); caret-color: var(--primary); padding: 0; }
.lb-search input::placeholder { color: var(--muted); opacity: 1; }
.fchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 8px 16px 8px; }
.fchips::-webkit-scrollbar { display: none; }
.fc { flex: none; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--outline) 65%, var(--bg)); font: 520 14px/20px var(--body); color: var(--muted); display: inline-flex; align-items: center; white-space: nowrap; }
.fc.menu { padding: 0 8px 0 14px; gap: 4px; }
.fc.menu svg { width: 20px; height: 20px; margin-left: 2px; }
.fc.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.lb-cs { display: flex; justify-content: space-between; align-items: center; height: 48px; margin-top: 9.1px; }
.lb-sort { display: flex; align-items: center; gap: 4px; height: 40px; color: var(--primary); font: 600 14px/20px var(--body); }
.lb-sort svg { width: 18px; height: 18px; }
.lb-list { margin: 0 -16px; }
.li { position: relative; display: flex; align-items: center; min-height: 73px; padding: 8px 4px 8px 16px; cursor: pointer; }
.li .lb-more { color: var(--muted); }
.li .av svg { stroke-width: 2.6; }
.li + .li::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--line); }
.li .av { width: 40px; height: 40px; border-radius: 50%; background: var(--sv); display: grid; place-items: center; color: var(--text); flex: none; margin-right: 16px; }
.li .av svg { width: 24px; height: 24px; }
.li .nm { display: block; font: 400 16px/24px var(--body); color: var(--text); }
.li .nm mark { background: none; color: var(--primary); }
.li small { display: block; font: 400 14px/20px var(--body); color: var(--muted); }
.lb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--muted); font: 400 14px/20px var(--body); }
.lb-empty .ei svg { width: 48px; height: 48px; }
.lb-empty b { font: 600 16px/22px var(--head); color: var(--text); }
.lb-empty .lb-btn { margin-top: 8px; padding: 0 20px; }
.pop-back { position: absolute; inset: 0; z-index: 30; }
.pop { zoom: .93333; position: absolute; top: 281px; z-index: 31; min-width: 168px; max-height: 340px; overflow-y: auto; padding: 8px 0; background: var(--card); border-radius: 4px; box-shadow: 0 4px 12px var(--shadow), 0 0 0 1px var(--line); scrollbar-width: none; }
.pop button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 48px; padding: 0 16px; font: 400 16px/24px var(--body); color: var(--text); }
.pop .tk { color: var(--primary); display: grid; }
.pop .tk svg { width: 20px; height: 20px; }

/* Exercise detail */
.xdet { margin: 0 -16px; }
.xdet > .xs-body { padding-top: 16px; }
.xtabs { zoom: .93333; margin-top: 3.4px; flex: none; }
.xdet > .xs-body { padding: 16px 16px 8px; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border-bottom: 1px solid var(--line); }
.tabs2 button { position: relative; height: 48px; text-align: center; font: 500 14px/20px var(--body); color: var(--primary); }
.tabs2 button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); }
.h2 { margin: 0; font: 600 16px/22px var(--head); }
.xs-muscles .body { display: block; padding: 5.9px 0 38.5px; }
.xs-muscles .body svg { width: 100%; height: auto; max-height: none; }
.rangechips { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.rangechips button { height: 32px; padding: 0 15px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--outline) 65%, var(--bg)); font: 520 14px/20px var(--body); color: var(--muted); white-space: nowrap; }
.rangechips button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.rangechips.metrics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 12px; }
.rangechips.metrics::-webkit-scrollbar { display: none; }
.xs-chart { padding-top: 21px; }
.bigfig { font: 600 22px/28px var(--body); font-variant-numeric: tabular-nums; margin: 0; }
.xs-date { font: 400 12px/16px var(--body); color: var(--muted); }
.xs-chart svg.line { height: 200px; margin-top: 14px; display: block; overflow: visible; }
.xs-chart .sel { fill: color-mix(in srgb, var(--primary) 55%, #fff); }
.ct { font: 400 11px var(--body); fill: var(--muted); }
.lb-nodata { margin: 32px 0; font: 400 14px/20px var(--body); color: var(--muted); }
.h2.sec { margin: 24px 0 8px; }
.prr { display: flex; align-items: center; padding: 8px 0; font: 400 14px/20px var(--body); }
.prr b { font: 600 14px/20px var(--body); text-align: right; }
.srh { display: flex; align-items: center; width: 100%; padding: 24px 0 8px; }
.srh .h2 { flex: 1; }
.srh svg { width: 24px; height: 24px; }
.hcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 8px; }
.hhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hhead b { font: 600 14px/20px var(--body); }
.hhead span { font: 400 12px/16px var(--body); color: var(--muted); }
.hrow { display: grid; grid-template-columns: 25px 75px 75px; align-items: center; min-height: 28px; margin-top: 12px; text-align: center; font: 600 14px/20px var(--body); color: var(--primary); }
.hrow.hh { margin-top: 8px; min-height: 16px; font: 600 11px/16px var(--body); color: var(--muted); }
.hrow i { font: 700 11px/16px var(--body); font-style: normal; color: var(--text); }

/* the title bars of these screens, as the app draws them (22 sp Chakra Bold, .06 em tracking, 48 dp touch targets at each end) */
.view:has(.lb) .top h1, .view:has(.xdet) .top h1 { font-size: 20.53px; letter-spacing: .06em; }
.view:has(.xdet) .top h1 { margin-left: -6px; white-space: nowrap; }
.view:has(.xdet) .top > .iconbtn:first-child { margin-left: -8px; }

/* ---- fidelity: outdoors ----
   The outdoors screens are laid out at the real phone's size (411 dp wide, 1 dp = 1 px here) and scaled into the demo phone, so the sizes below are the app's own dp / sp. */
.oview > .sb { height: 45.2px; }
.oview.over > .sb { position: absolute; left: 0; right: 0; top: 0; z-index: 5; }
.oview .ow { flex: 1; min-height: 0; position: relative; }
.oscale { position: absolute; left: 0; top: 0; width: 411.43px; height: calc(100% / .93333); transform: scale(.93333); transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); font: 400 14px/normal var(--body); font-variant-numeric: tabular-nums; }
.oscale button { text-align: inherit; }
.oscale svg { flex: none; }
.oscale .micro2 { font: 400 11px/normal var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.oscale .b12 { font: 400 12px/normal var(--body); color: var(--muted); }
.oscale .b14 { font: 400 14px/normal var(--body); color: var(--muted); }
.oscale .b14m { font: 400 14px/normal var(--body); color: var(--muted); }
.oscale .b16p { font: 400 16px/normal var(--body); color: var(--primary); }
.oscale .t16 { font: 600 16px/normal var(--head); }
.oscale .cen { text-align: center; } .oscale .mt8 { margin: 8px 0 0; }
.oscale .dim { opacity: .62; }
.oscale .grow { flex: 1; min-width: 0; }

/* top bar */
.otb { flex: none; height: 64px; display: flex; align-items: center; padding: 0 4px; }
.oib { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; flex: none; color: var(--text); }
.otb h1 { flex: 1; min-width: 0; margin: 0; font: 700 22px/normal var(--head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.otb h1.mx { text-transform: none; letter-spacing: 0; }
.ogps { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; font: 500 12px/normal var(--body); letter-spacing: .5px; }
.ogps i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.ogps b { font-weight: 500; }
.osp16 { width: 16px; flex: none; }

/* scrolling bodies and the pinned bar */
.oscroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 0 16px 8px; }
.oscroll::-webkit-scrollbar { display: none; }
.ogap12 { display: flex; flex-direction: column; gap: 12px; }
.ogap12 > * { flex: none; }
.oc { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 4px var(--shadow); }
.opad { padding: 16px; }
.obar { flex: none; border-top: 1px solid var(--line); background: var(--bg); }
.obar-in { display: flex; padding: 16px 16px 14.3px; }
.obar.rd .obar-in { padding: 12px 16px 10.3px; }
.obar-in.col { flex-direction: column; gap: 12px; }
.obar-in.row2 { gap: 12px; align-items: center; }
.obtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 24px; border-radius: 99px; background: var(--fill); color: var(--on-fill); font: 600 16px/normal var(--body); }
.obtn.sm { font: 500 14px/normal var(--body); padding: 8px 24px; }
.obtn.out { min-height: 48px; background: none; border: 1px solid var(--outline); color: var(--primary); font: 500 14px/normal var(--body); }
.obtn.md { flex: 1; width: auto; min-height: 48px; font: 500 14px/normal var(--body); }
.obtn.dis { flex: none; width: auto; min-height: 48px; background: none; border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); font: 500 14px/normal var(--body); }
.obtn.shr { min-height: 40px; margin-top: 8px; background: none; border: 1px solid var(--outline); color: var(--muted); font: 500 14px/normal var(--body); padding: 0 24px; }
.obtn.md2 { min-height: 40px; margin-top: 8px; font: 500 14px/normal var(--body); padding: 0 24px; }
.ostart { flex: none; padding: 8px 16px; }
.otext { flex: none; align-self: center; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; margin-bottom: 6px; color: var(--primary); font: 500 16px/normal var(--body); }
.otextb { padding: 8px 12px; font: 400 16px/normal var(--body); color: var(--primary); }

/* picker */
.ohint { flex: none; margin: 0; padding: 0 16px 11.2px; text-align: center; font: 400 14px/20px var(--body); color: var(--muted); }
.opager { position: relative; flex: 1; min-height: 0; }
.ocur { position: absolute; left: 56px; width: 299.43px; top: 4px; bottom: 4px; }
.opeek { position: absolute; top: 4px; bottom: 4px; width: 299.43px; opacity: .5; transform: scale(.86); cursor: pointer; }
.opeek.l { left: -255.43px; transform-origin: 100% 50%; } .opeek.r { left: 367.43px; transform-origin: 0 50%; }
.oacard { height: 100%; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, var(--card)), var(--card)); overflow: hidden; }
.oacard.hl { box-shadow: inset 0 0 0 2px var(--primary); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card)); }
.oai { height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.otagrow { min-height: 24px; display: flex; }
.otag { align-self: flex-start; font: 500 11px/normal var(--body); letter-spacing: .1em; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent); border-radius: 8px; padding: 2px 8px; }
.ocirc { width: 106px; height: 106px; margin: 8px auto 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.oacard.hl .ocirc { background: var(--primary); color: var(--on-primary); }
.oat { margin-top: 16px; text-align: center; font: 700 22px/normal var(--head); }
.oah { margin-top: 4px; text-align: center; font: 400 16px/normal var(--body); color: var(--muted); }
.owit { margin-top: 16px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); padding: 14px; }
.opic { display: block; margin: 4px 0 0; }
.ochips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.ochp { padding: 6px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--outline); background: var(--bg); font: 400 14px/normal var(--body); }
.ochp.lead { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent); }
.oabot { border-top: 1px solid var(--line); padding-top: 12px; }
.olh { display: flex; justify-content: space-between; align-items: center; }
.ol3 { display: flex; gap: 4px; margin-top: 8px; }
.ol3 > div { flex: 1; text-align: center; }
.ol3 b { display: block; font: 600 16px/normal var(--body); }
.ol3 b small, .obig small, .ost .v small { font-weight: 500; color: var(--muted); }
.ol3 b small { font-size: 12px; margin-left: 3px; }
.ol3 span { display: block; font: 400 12px/normal var(--body); color: var(--muted); }
.odots { flex: none; display: flex; justify-content: center; align-items: center; gap: 6px; padding-top: 12px; }
.odots i { width: 7px; height: 7px; border-radius: 99px; background: var(--outline); }
.odots i.on { width: 22px; background: var(--primary); }
.opos { flex: none; text-align: center; padding: 8px 16px; font: 500 14px/normal var(--body); color: var(--muted); }

/* ready */
.omap { position: relative; overflow: hidden; background: var(--sv); flex: none; }
.omap img { position: absolute; max-width: none; }
.omap svg.route { position: absolute; left: 0; top: 0; }
.omap.ready { border-radius: 20px; border: 1px solid var(--line); }
.omap { --ir: 20px; --ib: 20px; } .omap.save { --ib: 14px; } .omap.hero { --ib: 58px; } .omap.detail { --ir: 8px; --ib: 8px; }
.oinfo { position: absolute; right: var(--ir); bottom: var(--ib); width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.75); color: #000; display: grid; place-items: center; cursor: pointer; list-style: none; }
.oinfo::-webkit-details-marker { display: none; }
.oinfo svg { width: 18px; height: 18px; }
.ocredit { position: absolute; right: calc(var(--ir) + 28px); bottom: calc(var(--ib) + 1px); padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.75); color: #000; font: 400 11.5px/normal var(--body); text-decoration: underline; white-space: nowrap; }
.ostat { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--primary) 8%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent); }
.ostat .b16p { line-height: 20.8px; } .ostat .b14 { line-height: 19px; }
.ostat .d { width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--primary); flex: none; }
.orow3 { display: flex; align-items: center; padding: 16px; }
.ocirc2 { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; }
.actrow .grow { margin-left: 12px; }
.oshead { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; min-height: 24.5px; box-sizing: border-box; }
.oset { overflow: hidden; }
.osrow3 { display: flex; align-items: center; width: 100%; min-height: 72px; padding: 12px 16px; border-top: 1px solid var(--line); }
.osrow3:first-child { border-top: 0; }
.orowic { width: 40px; height: 40px; border-radius: 12px; background: var(--sv); color: var(--primary); display: grid; place-items: center; flex: none; }
.osrow3 .w { flex: 1; min-width: 0; padding-left: 12px; display: block; }
.osrow3 .w b { display: block; font: 400 16px/normal var(--body); }
.osrow3 .w em { display: block; font: 400 14px/20px var(--body); color: var(--muted); font-style: normal; }
.osrow3 .val { display: flex; align-items: center; margin-left: 12px; color: var(--primary); font: 400 16px/normal var(--body); }
.osw { flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px; margin-left: 12px; background: var(--sv); border: 2px solid var(--outline); }
.osw i { position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); display: grid; place-items: center; }
.osw.on { background: var(--primary); border-color: var(--primary); }
.osw.on i { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--on-primary); color: var(--primary); }
.note-sim { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0 8px; color: var(--muted); font: 400 12px/normal var(--body); }
.note-sim svg { width: 16px; height: 16px; margin-top: 0; }

/* live */
.otabs { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 48px; }
.mchip { height: 30.5px; padding: 0 11.6px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--outline); font: 500 10.7px/normal var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mchip.on { background: var(--primary); box-shadow: none; color: var(--on-primary); }
.simtag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 20%, var(--card)); color: var(--gold-text); font: 700 11px/1 var(--body); }
.ostatsview { display: flex; flex-direction: column; gap: 16px; padding: 9.2px 16px 24px; }
.ostatsview > * { flex: none; }
.ohero .obig { margin-top: 2.9px; font: 600 64px/83.2px var(--body); letter-spacing: -.03em; }
.obig small { font-size: 16.4px; line-height: 0; letter-spacing: 0; margin-left: 10px; position: relative; top: 1px; }
.osave .ohero, .osum .ohero { padding-top: 22px; }
.osave .ohero .obig, .osum .ohero .obig { font-size: 56px; line-height: 72.8px; }
.oreserve { height: 21.3px; margin-top: -16px; }
.ostats { padding: 8px 0; }
.osrow { display: flex; align-items: stretch; position: relative; }
.osrow + .osrow { margin-top: 1px; }
.osrow + .osrow::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; background: var(--line); }
.oc3 { flex: 1; min-width: 0; padding: 12px 8px; text-align: center; position: relative; }
.oc3 + .oc3::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.oc3 b { display: block; font: 600 22px/normal var(--body); }
.oc3 b.mut { color: var(--muted); }
.oc3 span { display: block; font: 400 14px/normal var(--body); color: var(--muted); }
.ostats.big .oc3 b { font-size: 28px; line-height: 36.4px; }
.ostrip { margin: 8px 16px; padding: 8px 0; flex: none; }
.ostrip .oc3 { padding: 8px 4px; }
.osave .ostats, .osum .ostats { margin-top: 16px; padding: 8px; }
.osave .osrow, .osum .osrow { padding: 10px 0; }
.osave .osrow + .osrow::before, .osum .osrow + .osrow::before { left: 12px; right: 12px; }
.osave .oc3, .osum .oc3 { padding: 0 4px; }
.osave .oc3 + .oc3::before, .osum .oc3 + .oc3::before { top: 4px; bottom: 4px; }
.osave .osrow .oc3:first-child:not(:last-child), .osum .osrow .oc3:first-child:not(:last-child) { flex: 1.2; }
.ohead { display: flex; justify-content: space-between; align-items: center; min-height: 25px; }
.ohead h3, .exh2 { margin: 0; font: 600 16px/normal var(--head); letter-spacing: .05em; }
.exh2 { letter-spacing: 0; color: var(--primary); }
.ometa { font: 400 12px/normal var(--body); color: var(--muted); }
.ometa b { font-weight: 500; color: var(--text); }
.ochart { display: block; margin-top: 8px; }
.ochart text { font: 400 11px/normal var(--body); fill: var(--muted); font-variant-numeric: tabular-nums; }
.osp-wrap { margin-top: 14px; }
.osh { display: flex; align-items: center; min-height: 24px; font: 400 11px/normal var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.osh span:first-child { min-width: 44px; padding-right: 4px; } .osh span:last-child { min-width: 56px; padding-left: 4px; }
.osr { display: flex; align-items: center; min-height: 34px; border-top: 1px solid var(--line); }
.osr .k { min-width: 44px; padding-right: 4px; font: 500 14px/normal var(--body); }
.osr .k.part { color: var(--muted); }
.osr b { min-width: 56px; padding-left: 4px; font: 600 14px/normal var(--body); }
.osr i { flex: 1; display: block; padding: 0 8px 0 4px; }
.osr u { display: block; height: 10px; border-radius: 99px; text-decoration: none; background: color-mix(in srgb, var(--primary) 45%, transparent); }
.osr u.fast { background: var(--o-tert); } .osr u.dim { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.ofoot { margin: 8px 0 0; font: 400 12px/normal var(--body); color: var(--muted); }
.obanner { display: flex; align-items: center; padding: 12px 4px 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.obanner > svg { align-self: flex-start; margin-top: 1px; color: var(--primary); }
.obanner .w { flex: 1; min-width: 0; padding-left: 12px; }
.obanner .bt { font: 600 16px/normal var(--head); color: var(--primary); }
.obanner .b12 b { font-weight: 500; color: var(--text); }
.obanner.m { margin: 4px 16px 8px; }
.odisc { padding: 8px 12px; color: var(--danger); font: 500 14px/normal var(--body); }
.omapcol { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.omap.live { flex: 1; min-height: 0; width: 100% !important; height: auto !important; }

/* save workout, and the summary after it */
.osave { padding: 16px; }
.omapcard { overflow: hidden; padding: 0; }
.ohead2 { padding: 16px; }
.osh1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.otk, .ochipk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font: 500 11px/normal var(--body); letter-spacing: .08em; }
.odate { display: inline-flex; align-items: center; color: var(--muted); font: 400 14px/normal var(--body); padding: 4px 0; }
.odate span { padding: 0 6px; }
.ofield { position: relative; margin-top: 12px; padding-top: 8px; }
.ofield input, .ofield textarea { width: 100%; display: block; border: 1px solid var(--outline); border-radius: 4px; background: transparent; outline: none; color: var(--text); }
.ofield input { height: 56px; padding: 0 16px; font: 600 16px/normal var(--head); }
.ofield textarea { min-height: 56px; padding: 16px; font: 400 16px/normal var(--body); resize: none; }
.ofield input:focus, .ofield textarea:focus { border-width: 2px; border-color: var(--primary); }
.ofield label { position: absolute; left: 12px; top: 0; padding: 0 4px; background: var(--card); color: var(--muted); font: 400 12px/normal var(--body); pointer-events: none; }
.ofield.onotes { margin-top: 0; }
.ofield.onotes label { background: var(--bg); top: 24px; left: 12px; font-size: 16px; line-height: 24px; }
.ofield.onotes textarea:focus + label, .ofield.onotes textarea:not(:placeholder-shown) + label { top: 0; font-size: 12px; line-height: 16px; }
.ofield.onotes textarea::placeholder { color: transparent; } .ofield.onotes textarea:focus::placeholder { color: var(--muted); }
.ofield.ottl input:placeholder-shown + label { top: 25px; left: 16px; font-size: 16px; line-height: 22px; }
.opl { display: flex; align-items: flex-start; margin-top: 11px; }
.opl .pi { margin: 2px 12px 0 0; color: var(--primary); }
.opl .b14 { color: var(--text); } .opl b { font-weight: 500; }
.otop16 { margin-top: 16px; }
.ohero-map { position: relative; height: 328px; margin-bottom: 0; }
.ohero-map .omap { position: absolute; left: 0; top: 0; }
.ofade { position: absolute; left: 0; right: 0; pointer-events: none; }
.ofade.t { top: 0; height: 104px; background: linear-gradient(color-mix(in srgb, var(--bg) 82%, transparent), transparent); }
.ofade.b { bottom: 0; height: 56px; background: linear-gradient(transparent, var(--bg)); }
.oround { position: absolute; top: 56px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--line); }
.osum { padding: 0; }
.osumbody { padding: 0 16px 16px; }
.ostitle { margin: 10px 0 0; font: 700 22px/normal var(--head); }
.ochiprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* a saved walk or run */
.odet { padding: 0 16px 16px; }
.odt { padding-top: 16px; }
.ostrow { display: flex; margin-top: 12px; }
.ost { flex: 1; text-align: center; padding: 6px 4px; }
.ost .v { font: 600 22px/normal var(--body); }
.ost .v small { font-size: 14px; margin-left: 4px; }
.ost .l { margin-top: 2px; font: 400 12px/normal var(--body); color: var(--muted); }
.ovr { margin: 12px 0; } .ovr8 { margin: 8px 0; } .ovr8c { margin: 8px 0; }
.omap.detail { margin-top: 8px; border-radius: 8px; }
.oset3 { display: grid; grid-template-columns: 28px 80px 80px; row-gap: 8px; align-items: center; margin-top: 8px; }
.oset3 .h { text-align: center; font: 500 11px/normal var(--body); letter-spacing: .5px; color: var(--muted); }
.oset3 .n { text-align: center; font: 700 12px/normal var(--body); }
.oset3 .v { text-align: center; font: 500 14px/normal var(--body); white-space: nowrap; }
.ofield .pen { position: absolute; right: 12px; top: 26px; color: var(--muted); }

/* ---- fidelity: review ---- */
/* History, the session detail, Statistics, Calendar and Profile. Their content sits in a .rv block zoomed so that 1 CSS px is 1 dp of the 411 dp wide phone
   the app's screenshots come from (this phone is 384 px wide); the sizes below are the app's own (Kotlin: feature/history, feature/analytics, core/designsystem). */

/* colours the body diagram, the balance wheel and the tapped bar take from the palettes, per scheme and mode */
.dm-phone { --brest: var(--outline); --bsil: color-mix(in srgb, var(--outline) 55%, transparent); --bline: var(--muted); --dim: #5E8C2A; --tert: #B1FF70; }
.dm-phone[style*="--primary:#64cfff"] { --dim: #3180A3; --tert: #86DAFF; }
.dm-phone[style*="--primary:#ff92cb"] { --dim: #C8478A; --tert: #FFAAD6; }
.dm-phone[style*="--primary:#59e5a8"] { --dim: #2A8C61; --tert: #7EEBBB; }
.dm-phone[style*="--primary:#bfa6ff"] { --dim: #8263D0; --tert: #CDBAFF; }
.dm-phone[style*="--primary:#466b00"] { --brest: #C3CCBC; --bsil: #E3E8DD; --bline: #6B7A66; --dim: #527B0D; --tert: #466B00; }
.dm-phone[style*="--primary:#12638a"] { --brest: #B7C9D4; --bsil: #DDE9F0; --bline: #596F7C; --dim: #207EA7; --tert: #12638A; }
.dm-phone[style*="--primary:#9e2c6e"] { --brest: #D3BCCA; --bsil: #EEDFE8; --bline: #7C6071; --dim: #B4226E; --tert: #9E2C6E; }
.dm-phone[style*="--primary:#156a4a"] { --brest: #B5CCBF; --bsil: #DBEBE2; --bline: #587164; --dim: #198757; --tert: #156A4A; }
.dm-phone[style*="--primary:#6940a0"] { --brest: #C7BAD6; --bsil: #E7DFF1; --bline: #736283; --dim: #4B22B4; --tert: #6940A0; }
.dm .bfig { display: block; width: 100%; height: auto; }
.bfig .bl5 path { fill: var(--bsil); stroke: color-mix(in srgb, var(--bline) 50%, transparent); stroke-width: .75px; vector-effect: non-scaling-stroke; }
.bfig .bl6 { stroke: color-mix(in srgb, var(--bline) 60%, transparent); stroke-width: .75px; vector-effect: non-scaling-stroke; }

h1.mixed { text-transform: none; font-size: 20.6px; line-height: 26px; letter-spacing: 0; }

.rv { zoom: .9333; padding-top: 4px; font: 400 14px/20px var(--body); color: var(--text); }
.rv, .rv *, .rv *::before, .rv *::after { box-sizing: border-box; }
.rv svg { display: block; }
.rv b { font-weight: 500; }
.rv u { text-decoration: none; color: var(--muted); font-weight: 500; line-height: 1; }
.rv .bm { font: 400 14px/20px var(--body); }
.rv .cap { font: 400 12px/16px var(--body); }
.rv .meta { font: 400 12px/16px var(--body); color: var(--muted); }
.rv .ct { font: 500 12px/16px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rv .mu { color: var(--muted); } .rv .tx { color: var(--text); } .rv .pri { color: var(--primary); } .rv .gt { color: var(--gold-text); }
.rv .big { font: 600 22px/28px var(--body); color: var(--text); }
.rv .big u { font-size: 14px; }
.rv .ug { display: inline-block; width: .143em; font-style: normal; }
.rv .tro { display: inline-block; width: var(--s); height: var(--s); flex: none; color: var(--gold); }
.rv .tro svg { width: 100%; height: 100%; }
.rv .vp { padding: 12px 0; }
.rv .rc { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 3px 8px rgba(0,0,0,.2), 0 0 2px rgba(0,0,0,.1); }
.rv button.rc { display: block; width: 100%; text-align: left; cursor: pointer; }
.rv .hl { height: 1px; background: var(--line); }
.rv .chr { height: 1px; background: var(--line); }
.rv .top12 { margin-top: 12px; } .rv .top16 { margin-top: 17.9px; } .rv .top13 { margin-top: 13.3px; }
.rv .lg { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--body); color: var(--muted); }
.rv .lsw { display: block; width: 12px; height: 8px; border-radius: 3px; flex: none; } .rv .lsw.sq12 { height: 12px; }
.rv .ldash { display: block; width: 16px; height: 8px; flex: none; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 80%, transparent) 0 3px, transparent 3px 5px) center / 100% 1.5px no-repeat; }
.rv .ldash.dim2 { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 65%, transparent) 0 3px, transparent 3px 5px) center / 100% 1.5px no-repeat; }
.rv .ltick { display: block; width: 2px; height: 14px; border-radius: 1px; flex: none; background: color-mix(in srgb, var(--text) 80%, transparent); }
.rv .legs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rv .ib { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--muted); }
.rv .ib svg { width: 24px; height: 24px; }
.rv .xl { display: inline-flex; align-items: center; min-height: 48px; padding-left: 8px; color: var(--primary); font: 400 14px/20px var(--body); }
.rv .xl svg { width: 24px; height: 24px; }
/* SVG text */
.rv .svt { font: 400 11px/14px var(--body); fill: var(--muted); }
.rv .svt.b { fill: var(--text); font-weight: 600; } .rv .svt.mu { fill: var(--muted); } .rv .svt.tgt { fill: var(--primary); }
.rv .svt.nm { font: 400 12px var(--body); fill: var(--text); } .rv .svt.pc { font: 500 11px var(--body); fill: var(--muted); } .rv .svt.pc.hi { fill: var(--primary); }
.rv .gl { stroke: var(--line); stroke-width: 1; }
.rv .avgl { stroke: color-mix(in srgb, var(--text) 75%, transparent); stroke-width: 1.2; stroke-dasharray: 4 4; }
.rv .tgl { stroke: color-mix(in srgb, var(--primary) 90%, transparent); stroke-width: 1.4; stroke-dasharray: 6 4; fill: none; }
.rv .evn { stroke: color-mix(in srgb, var(--text) 65%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.rv .hit { cursor: pointer; }
.rv .bcw { margin-top: 12px; } .rv .bcw svg.bc { width: 100%; height: auto; }

/* History */
.rv .hc { padding: 16px 16px 14.5px; }
.rv .hd { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.rv .tile { width: 40px; height: 40px; border-radius: 50%; background: var(--sv); color: var(--muted); display: grid; place-items: center; flex: none; }
.rv .tile svg { width: 22px; height: 22px; }
.rv .tile.gps { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.rv .tr1 { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; min-height: 19.2px; }
.rv .ttl { font: 700 16px/19.2px var(--head); letter-spacing: .02em; color: var(--text); }
.rv .prs { display: inline-flex; align-items: center; gap: 0; font: 500 12px/16px var(--body); letter-spacing: .5px; color: var(--gold-text); }
.rv .prs .tro { margin: -.75px 3.5px -.75px 0; }
.rv .prs { margin-right: -.5px; }
.rv .when { font: 400 12px/16px var(--body); letter-spacing: .4px; color: var(--muted); margin-top: 4px; }
.rv .tile { position: relative; top: .35px; }
.rv .hd > .grow { position: relative; top: 1.9px; }
.rv .figs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px; }
.rv .fig .v { font: 500 14px/16.4px var(--body); padding-top: 2.8px; color: var(--text); }
.rv .fig .l { font: 500 11px/16px var(--body); letter-spacing: .5px; color: var(--text); }
.rv .exs { margin-top: 12px; }
.rv .exh2 { display: flex; justify-content: space-between; font: 500 11px/16px var(--body); letter-spacing: .5px; color: var(--muted); }
.rv .exh2 + .ln { margin-top: 4.9px; }
.rv .ln { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 400 14px/18.2px var(--body); color: var(--text); }
.rv .ln b { font-weight: 500; text-align: right; white-space: nowrap; }
.rv .more { font: 400 12px/16px var(--body); letter-spacing: .4px; margin-top: 4px; color: var(--text); }
.rv .tbtn { display: block; margin: 8px auto; padding: 0 16px; height: 40px; color: var(--primary); font: 500 14px/20px var(--body); }
.rv .endnote { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 16px; }

/* Session detail */
.rv .sd { padding-top: 16px; }
.rv .dt { color: var(--muted); }
.rv .stats { display: flex; margin-top: 12px; }
.rv .stat { flex: 1; min-width: 0; text-align: center; padding: 6px 4px; }
.rv .sv { font: 600 22px/28px var(--body); color: var(--text); white-space: nowrap; }
.rv .sv u { font-size: .636em; }
.rv .sl { font: 400 12px/16px var(--body); color: var(--muted); margin-top: .1px; }
.rv .trc { display: inline-flex; align-items: center; gap: 4px; }
.rv .mt { padding: 16px 0 4.7px; }
.rv .mtv { padding-bottom: 0; }
.rv .legv { padding: 16px 0 0; }
.rv .mth { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.rv .mtb { display: flex; align-items: center; gap: 4px; padding: 10px 16px 0; }
.rv .mfig { flex: 57 1 0; min-width: 0; } .rv .mros { flex: 43 1 0; min-width: 0; } .rv .mros svg { width: 100%; height: auto; }
.rv .mtd { height: 1px; background: var(--line); margin-top: 12px; }
.rv .mtl { padding: 7.9px 8px 0; }
.rv .mrow { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; }
.rv .mn { flex: none; width: 116px; display: flex; align-items: center; font: 400 14px/20px var(--body); }
.rv .mn .sw { display: block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; flex: none; }
.rv .mtrk { flex: 1; height: 8px; border-radius: 4px; background: var(--sv); overflow: hidden; }
.rv .mtrk i { display: block; height: 100%; border-radius: 4px; }
.rv .mct { flex: none; width: 56px; text-align: right; font: 400 12px/16px var(--body); color: var(--muted); white-space: nowrap; }
.rv .mct b { font: 600 14px var(--body); color: var(--text); }
.rv .mpc { flex: none; width: 38px; text-align: right; font: 400 12px/16px var(--body); color: var(--muted); }
.rv .leg { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: 400 12px/16px var(--body); letter-spacing: .4px; color: var(--muted); }
.rv .ec { padding: 16px; }
.rv .en { font: 600 16px/22px var(--head); color: var(--primary); }
.rv .st { margin-top: 12px; }
.rv .str { display: grid; grid-template-columns: 28px 80px 80px 1fr 18px; align-items: center; min-height: 28px; margin-top: 12px; }
.rv .str.strh { margin-top: 0; min-height: 16px; font: 500 11px/16px var(--body); letter-spacing: .5px; color: var(--muted); }
.rv .str.strh + .str { margin-top: 8.9px; }
.rv .c0, .rv .c1 { text-align: center; white-space: nowrap; }
.rv .c1 { font: 500 14px/20px var(--body); }
.rv .str.strh .c1, .rv .str.strh .c0 { font: 500 11px/16px var(--body); }
.rv .c0.sn { font: 700 11px/16px var(--body); letter-spacing: .5px; color: var(--text); }
.rv .c2 { grid-column: 5; display: flex; justify-content: flex-end; }

/* Statistics */
.rv.stats { padding-top: 0; }
.rv .sth { position: sticky; top: 0; z-index: 3; background: var(--bg); padding-top: 10.5px; margin-bottom: 8px; top: -2px; }
.rv .segb { display: flex; height: 40px; margin: 4px 0; border: 1px solid var(--outline); border-radius: 20px; overflow: hidden; }
.rv .segb button { flex: 1; min-width: 0; text-align: center; font: 500 14px/20px var(--body); color: var(--muted); padding: 0 4px; }
.rv .segb button[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.rv .segb .sd { width: 1px; background: var(--outline); flex: none; }
.rv .pl { padding: 4px 0 8px 2px; }
.rv .pl .dd { color: var(--text); }
.rv.stats .vp { padding: 8px 0; }
.rv .ov { overflow: hidden; }
.rv .orow { display: flex; }
.rv .orow .otl { flex: 1; min-width: 0; }
.rv .ovd { width: 1px; background: var(--line); flex: none; }
.rv .oh { height: 1px; background: var(--line); }
.rv .otl { position: relative; display: block; width: 100%; text-align: left; padding: 14px 16px; }
.rv .otl.sel { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.rv .otl.sel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--primary); }
.rv .olb { font: 400 14px/20px var(--body); color: var(--text); }
.rv .otl:not(.wide):not(.wk) .olb { margin-top: 2px; }
.rv .otl.sel .olb { color: var(--primary); }
.rv .otl.sel .olb .mu { color: var(--muted); }
.rv .chl { display: flex; align-items: center; margin-top: 2.9px; min-height: 18px; font: 400 12px/16px var(--body); color: var(--muted); }
.rv .chl b { font-weight: 500; color: var(--text); }
.rv .ar { display: block; width: 18px; height: 18px; flex: none; } .rv .ar svg { width: 100%; height: 100%; }
.rv .ar.up { color: var(--primary); } .rv .ar.dn { color: var(--muted); }
.rv .otl.wide { display: flex; align-items: center; gap: 16px; }
.rv .otl.wide .chl { margin-top: 2px; }
.rv .otl.wk { padding: 14px 16px 12px; }
.rv .wkh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rv .wkh .meta b { font-weight: 600; color: var(--text); }
.rv .wqs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rv .wq { display: inline-grid; place-items: center; border-radius: 6px; font: 500 11px/11px var(--body); position: relative; }
.rv .wq.met { background: var(--primary); color: var(--on-primary); }
.rv .wq.short { border: 1px solid var(--outline); color: var(--muted); }
.rv .wq.cur { color: var(--primary); } .rv .wq.cur svg { position: absolute; inset: 0; }
.rv .wql { display: flex; justify-content: space-between; margin-top: 6px; }
.rv .czn { padding: 14px 16px 16px; }
.rv .czh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv .rdo { margin-top: 8px; } .rv .rdo .meta.wk { letter-spacing: .08em; } .rv .big.tert { color: var(--tert); }
.rv .czn .legs { margin-top: 8px; }
.rv .mc { padding: 4px 16px 16px; }
.rv .mch { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 8px; }
.rv .qs { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rv .qs button { display: flex; align-items: center; min-height: 32px; padding: 4px 10px; font: 500 12px/16px var(--body); letter-spacing: .06em; color: var(--muted); }
.rv .qs button[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.rv .qs .qd { width: 1px; background: var(--line); flex: none; }
.rv .srows { margin-top: 4px; }
.rv .srow { display: flex; align-items: center; min-height: 40px; }
.rv .sn2 { flex: 0 0 auto; min-width: 64px; max-width: 124px; padding-right: 12px; font: 400 14px/20px var(--body); }
.rv .strk { position: relative; flex: 1; height: 16px; }
.rv .strk .tr { position: absolute; left: 0; right: 0; top: 4px; height: 8px; border-radius: 4px; background: var(--sv); }
.rv .strk .fl { position: absolute; left: 0; top: 4px; height: 8px; border-radius: 4px; background: var(--primary); }
.rv .strk .pv { position: absolute; top: 0; width: 2px; height: 16px; border-radius: 1px; background: color-mix(in srgb, var(--text) 80%, transparent); }
.rv .sct { padding-left: 12px; font: 400 12px/16px var(--body); white-space: nowrap; text-align: right; color: var(--text); }
.rv .sfoot { display: flex; align-items: center; margin-top: 4px; }
.rv .sfoot .legs { flex: 1; }
.rv .mbd { margin-top: 8px; }
.rv .grd { display: flex; align-items: center; margin-top: 4px; }
.rv .grd i { flex: 1; height: 8px; border-radius: 4px; margin: 0 10px; background: linear-gradient(90deg, var(--outline), var(--primary)); }
.rv .mf { margin-top: 8px; color: var(--text); }
.rv .whl { margin-top: 8px; display: flex; justify-content: center; }
.rv .whn { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 8px; }
.rv .pc { padding: 16px 16px 8px; }
.rv .prh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv .cnt { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px var(--body); color: var(--text); }
.rv .cnt b { font-weight: 600; }
.rv .prl { margin-top: 4px; }
.rv .prr { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; }
.rv .rv2 { font: 500 12px/16px var(--body); color: var(--text); text-align: right; white-space: nowrap; }
.rv .alr { display: flex; justify-content: flex-end; }
.rv .pb { height: 8px; }
.rv .exr { display: flex; align-items: center; gap: 0; min-height: 56px; padding: 8px 0; }
.rv .exr > .grow { padding-right: 8px; }
.rv .exr .spk { flex: none; }
.rv .exc { min-width: 64px; padding-left: 12px; text-align: right; }
.rv .mn2 { font: 500 12px/16px var(--body); color: var(--text); white-space: nowrap; }
.rv .gt b, .rv .fg { font-weight: 600; color: var(--text); }
.rv .mrep { display: flex !important; align-items: center; padding: 12px 8px 12px 16px; }
.rv .mrep > svg { width: 24px; height: 24px; color: var(--muted); flex: none; }

/* Calendar */
.rv.cal { padding-top: 0; }
.rv .cseg { margin: 8.9px 0 4px; }
.rv .cbody { padding-top: 6.2px; }
.rv .cstrip { display: flex; }
.rv .cc { flex: 1; min-width: 0; padding: 12px; }
.rv .csd { width: 1px; background: var(--line); flex: none; }
.rv .cc .big + .cap { margin-top: 2.4px; }
.rv .big.rr { display: flex; align-items: center; gap: 4px; }
.rv .step { display: flex; align-items: center; position: relative; top: -1.3px; }
.rv .step .ib { color: var(--text); }
.rv .hd16 { flex: 1; font: 600 16px/22px var(--head); color: var(--text); }
.rv .wdl { display: grid; grid-template-columns: repeat(7, 1fr); padding: 4px 0; text-align: center; font: 500 12px/16px var(--body); color: var(--muted); }
.rv .cg { display: grid; grid-template-columns: repeat(7, 1fr); }
.rv .cell { aspect-ratio: 1; display: grid; place-items: center; }
.rv .dc { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.rv .dc b { position: relative; z-index: 1; font: 400 14px/20px var(--body); color: var(--text); }
.rv .dc.t { background: var(--primary); }
.rv .dc.t b { color: var(--on-primary); font-weight: 500; }
.rv .dc > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv .dc.f b { color: var(--muted); }
.rv .dc.td b { font-weight: 700; color: var(--primary); }
.rv .dc.td.t b { color: var(--on-primary); }
.rv .dc.sel::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--text); border-radius: 50%; }
.rv .dc .pr { position: absolute; left: 28px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, var(--gold) 0 2.5px, var(--bg) 2.6px); z-index: 2; }
.rv .dc .two { position: absolute; left: 0; right: 0; top: 40px; display: flex; justify-content: center; gap: 3px; }
.rv .two s, .rv .ld2 s { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.rv .cleg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 4px; }
.rv .cleg .lg { gap: 4px; }
.rv .ld { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; } .rv .ld.sm { width: 8px; height: 8px; }
.rv .ld2 { display: flex; gap: 2px; }
.rv .ctot { display: flex; justify-content: space-between; padding: 12px 0 4px; }
.rv .tv { font: 600 14px/20px var(--body); color: var(--text); }
.rv .tv u { font: 400 12px var(--body); }
.rv .ctot .cap { margin-top: -1.3px; }
.rv .dph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 0 7px; }
.rv .dl { display: flex; flex-direction: column; gap: 8px; }
.rv .dcard { display: flex !important; align-items: center; gap: 12px; padding: 12px 8px 10.4px 12px; }
.rv .dtile { width: 40px; height: 40px; border-radius: 12px; background: var(--sv); color: var(--primary); display: grid; place-items: center; flex: none; }
.rv .dtile svg { width: 22px; height: 22px; }
.rv .dtt { font: 600 14px/17.7px var(--body); color: var(--primary); }
.rv .dfg { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font: 400 12px/16px var(--body); color: var(--muted); }
.rv .dfg b { font-weight: 500; color: var(--text); }
.rv .dfg .gt { display: inline-flex; align-items: center; gap: 4px; }
.rv .chv svg { width: 20px; height: 20px; color: var(--muted); }
.rv .dnote { display: flex; gap: 12px; padding: 16px; }

/* Profile */
.rv.prof { padding-top: 11.7px; }
.rv.prof .vp { padding: 0; margin-top: 16px; }
.rv .pwk { position: relative; padding: 16px 16px 14.4px; display: block; cursor: pointer; text-align: left; }
.rv .pwh { display: flex; justify-content: space-between; align-items: center; }
.rv .pwk .pwh { padding-right: 28px; }
.rv .pwk .ct, .rv .pcc .ct { font-size: 14px; line-height: 20px; }
.rv .hero { display: flex; align-items: baseline; gap: 8px; margin-top: 6.2px; }
.rv .hn { font: 600 32px/38px var(--body); color: var(--text); }
.rv .ho { font: 400 16px/24px var(--body); color: var(--text); }
.rv .hr { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 22px/28px var(--body); color: var(--text); }
.rv .wstrip { display: flex; margin-top: 16.7px; }
.rv .wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6.4px; }
.rv .wd > span { font: 500 12px/16px var(--body); color: var(--muted); }
.rv .wd.t > span { font-weight: 600; color: var(--primary); }
.rv .dd2 { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.rv .dd2.tr { background: var(--primary); color: var(--on-primary); } .rv .dd2.tr svg { width: 18px; height: 18px; }
.rv .dd2.rs, .rv .dd2.ms { background: var(--sv); } .rv .dd2.rs svg { position: absolute; inset: 0; }
.rv .dd2.td { border: 2px solid var(--primary); }
.rv .dd2.up { border: 1px solid var(--outline); }
.rv .sofar { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; color: var(--muted); }
.rv .sofar b { font-weight: 500; color: var(--text); }
.rv .pnote { padding-top: 12px; color: var(--muted); }
.rv .prest { display: flex; align-items: center; }
.rv .rw { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rv .rt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--muted); }
.rv .rt b { font-weight: 500; color: var(--text); }
.rv .pchev { position: absolute; top: 16px; right: 8px; width: 20px; height: 20px; color: var(--muted); }
.rv .pchev svg, .rv .tch svg { width: 100%; height: 100%; }
.rv .ptg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rv .ptl { position: relative; padding: 16px 16px 18.4px; }
.rv .tv2 { font: 600 28px/34px var(--body); color: var(--text); padding-right: 24px; }
.rv .tv2 u.suf { font-size: 20px; }
.rv .ptl .tl { margin-top: 4px; }
.rv .sup { margin-top: 8px; } .rv .sup b { font-weight: 500; }
.rv .tch { position: absolute; top: 12px; right: 8px; width: 20px; height: 20px; color: var(--muted); }
.rv .pg { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 4px; border-radius: 2px; background: var(--sv); }
.rv .pg s { display: block; height: 100%; border-radius: 2px; background: var(--primary); }
.rv .pdg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.rv .pds { display: flex !important; align-items: center; gap: 8px; min-height: 56px; padding: 8px 8px 8px 12px; }
.rv .pdi svg { width: 24px; height: 24px; color: var(--primary); }
.rv .pds .lbl { font: 500 14px/20px var(--body); color: var(--text); }
.rv .pds .cap b { font-weight: 500; }
.rv .pcc { padding: 16px 16px 8px; }
.rv .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rv .mchip { height: 32px; margin: 8px 0; padding: 0 12px; border-radius: 999px; border: 1px solid var(--outline); font: 500 11px/16px var(--body); letter-spacing: .08em; color: var(--muted); display: inline-flex; align-items: center; }
.rv .mchip[aria-pressed="true"] { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.rv .pcc .bcw { margin-top: 4px; }
.rv .pcf { display: flex; justify-content: space-between; align-items: center; }
.rv .tb2 { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0 0 8px; color: var(--primary); font: 500 14px/20px var(--body); }
.rv .tb2 svg { width: 18px; height: 18px; }
.rv .l7 { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.rv .l7b { width: 168px; height: 168px; flex: none; border-radius: 12px; }
.rv .l7n { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.dm .rv .spk { width: 72px; height: 28px; }
.dm .rv .whl svg { width: 345.4px; height: auto; }
.dm .rv .wq.cur svg { width: 100%; height: 100%; }

/* on a phone the controls shrink to one slim row (colour, reset) so the phone gets the screen */
@media (max-width: 779px) { .dm-stage { gap: 8px; } .dm-side { gap: 8px; } .dm-pick__btn, .dm-ctl button { min-height: 36px; } #demo { padding-top: 6px; } }

/* ---- Achievements (ac-): feature/achievements/AchievementsScreen.kt, in dp inside a .rv block ---- */
.rv.ac { padding: 13.3px 0 16px; }
.rv.ac .ac-sum { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 3px 8px rgba(0,0,0,.2), 0 0 2px rgba(0,0,0,.1); padding: 16px 15px 15px; margin-bottom: 12px; }
.ac-sumr { display: flex; align-items: flex-end; }
.ac-unl { flex: 1; font: 700 22px/28px var(--head); color: var(--text); }
.ac-n { font: 600 22px/28px var(--body); color: var(--text); }
.ac-of { font: 500 14px/20px var(--body); color: var(--muted); padding: 0 0 2px 4px; }
.ac-bar { height: 8px; margin-top: 12px; border-radius: 4px; background: var(--sv); overflow: hidden; }
.ac-bar i { display: block; height: 100%; background: var(--primary); }
.ac-lab { font: 500 14px/20px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 17.1px 0 9.8px; }
.ac-note { margin: 0; padding-bottom: 11.2px; font: 400 14px/20px var(--body); color: var(--muted); }
.ac-row { display: flex; gap: 8px; align-items: stretch; padding-bottom: 7.2px; }
.ac-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14.9px 3.7px 13.4px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 3px 8px rgba(0,0,0,.2), 0 0 2px rgba(0,0,0,.1); }
.ac-row.short > .ac-card { flex: 0 0 calc((100% - 8px) / 2); } /* a last row of one keeps the width of a half (the app's Spacer) */
.ac-lock { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; color: var(--muted); }
.ac-lock svg { width: 100%; height: 100%; }
.ac-badge { position: relative; width: 59.7px; height: 59.7px; flex: none; color: var(--muted); }
.ac-card.on .ac-badge { color: var(--primary); }
.ac-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ac-badge .bgb { opacity: .06; } /* the shell's backing: 6% of the muted colour while locked, 14% of the primary once unlocked (BadgeSlot) */
.ac-card.on .ac-badge .bgb { opacity: .14; }
.ac-name { margin-top: 7.5px; font: 600 14px/20px var(--body); color: var(--muted); white-space: nowrap; }
.ac-card.on .ac-name { color: var(--text); }
.ac-desc { margin-top: 2.3px; font: 400 11px/16px var(--body); letter-spacing: -.1px; color: var(--muted); }
.ac-fig { white-space: nowrap; margin-top: 2.3px; font: 400 12px/16px var(--body); color: var(--muted); }

.dm-phone[style*="--bg:#f"] .rv.ac .ac-sum, .dm-phone[style*="--bg:#f"] .ac-card { box-shadow: 0 4px 8px rgba(24,33,27,.26), 0 1px 3px rgba(24,33,27,.2); }

/* ---- calendar: Weekly and Yearly (.cw-) ---- */
.cw-pinw { padding: 0 15px; flex: none; }
.rv.cw-pin { padding-top: 0; }
.cw-pin .cleg { margin-top: 8px; }
.cw-hdr { display: flex; align-items: center; }
.cw-hdr .wdl { flex: 1; }
.cw-days { width: 64px; flex: none; text-align: right; font: 500 12px/16px var(--body); color: var(--muted); }
.rv.cw-list { padding-top: 0; }
.cw-mh { display: flex; align-items: baseline; gap: 12px; padding: 16px 0 8px; }
.cw-mh b { flex: 1; font: 600 14px/20px var(--head); letter-spacing: .04em; color: var(--text); }
.cw-mh span { font: 400 12px/16px var(--body); color: var(--muted); }
.cw-row { --halo: var(--bg); display: flex; align-items: center; min-height: 50px; border-radius: 14px; }
.cw-row.cur { --halo: color-mix(in srgb, var(--primary) 14%, var(--bg)); min-height: 62px; background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--primary); }
.cw-c { flex: 1; min-width: 0; min-height: 48px; display: grid; place-items: center; }
.cw-d { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.cw-d b { position: relative; z-index: 1; font: 400 14px/20px var(--body); color: var(--text); }
.cw-d.t { background: var(--primary); }
.cw-d.t b { color: var(--on-primary); font-weight: 500; }
.cw-d.td b { font-weight: 700; color: var(--primary); }
.cw-d.td.t b { color: var(--on-primary); }
.cw-d.td:not(.t) { box-shadow: inset 0 0 0 1.5px var(--primary); }
.cw-d.dim:not(.td):not(.t) b { color: var(--outline); }
.cw-row.cur .cw-d.dim:not(.td):not(.t) b { color: var(--muted); }
.cw-d.sel::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--text); border-radius: 50%; }
.dm .cw-d > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-d .pr { position: absolute; left: 26px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, var(--gold) 0 2.5px, var(--halo) 2.6px); z-index: 2; }
.cw-d .two { position: absolute; left: 0; right: 0; top: 38px; display: flex; justify-content: center; gap: 3px; }
.cw-sum { width: 64px; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.cw-row.cur .cw-sum { padding-right: 8px; }
.cw-sum .v { font: 600 12px/16px var(--body); display: inline-flex; align-items: center; gap: 1px; }
.cw-sum .v.pri { color: var(--primary); } .cw-sum .v.mu { color: var(--muted); }
.cw-sum .ck { display: block; width: 12px; height: 12px; } .cw-sum .ck svg { width: 12px; height: 12px; }
.cw-open { margin: 2px 0 8px 10px; padding: 8px 4px 4px 12px; border-left: 2px solid var(--outline); }
.cw-oh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cw-oh .meta.tx { color: var(--text); }
.rv .cw-wo { display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 0; text-align: left; cursor: pointer; }
.cw-wo .t { font: 500 14px/20px var(--body); color: var(--text); }
.cw-wo .gt { color: var(--gold-text); }
.cw-note { padding: 8px 0; }
.rv.cw-year { padding-top: 0; }
.cw-mms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; align-items: start; padding-top: 16px; }
.cw-mm { display: block; width: 100%; text-align: left; min-width: 0; cursor: pointer; }
.cw-mm[disabled] { cursor: default; }
.cw-mn { display: flex; align-items: flex-end; padding-bottom: 6px; }
.cw-mn b { flex: 1; font: 600 12px/16px var(--body); color: var(--text); }
.cw-mn b.cur { color: var(--primary); }
.cw-mn span { font: 500 11px/14px var(--body); color: var(--muted); }
.cw-mg { display: flex; flex-direction: column; gap: 2px; }
.cw-mr { position: relative; }
.cw-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cw-mr .cs { display: block; position: relative; z-index: 1; aspect-ratio: 1; border-radius: 3px; background: var(--card); }
.cw-mr .cs.x { background: transparent; }
.cw-mr .cs.f { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cw-mr .cs.l1, .cw-sws .l1 { background: color-mix(in oklab, var(--primary) 32%, var(--sv)); }
.cw-mr .cs.l2, .cw-sws .l2 { background: color-mix(in oklab, var(--primary) 56%, var(--sv)); }
.cw-mr .cs.l3, .cw-sws .l3 { background: color-mix(in oklab, var(--primary) 80%, var(--sv)); }
.cw-mr .cs.l4, .cw-sws .l4 { background: var(--primary); }
.cw-mr .cs.td { box-shadow: inset 0 0 0 1.5px var(--text); }
.cw-mr.streak::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 4px; background: color-mix(in srgb, var(--primary) 14%, transparent); }
.dm .cw-bo { position: absolute; left: .5px; top: .5px; width: calc(100% - 1px); height: calc(100% - 1px); z-index: 2; pointer-events: none; overflow: visible; }
.cw-bo rect { width: 100%; height: 100%; fill: none; stroke: var(--primary); stroke-width: 1px; }
.cw-mr.pending .cw-bo rect, .cw-bs.p .cw-bo rect { stroke-dasharray: 3 2; }
.cw-yl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; padding-top: 16px; font: 400 12px/16px var(--body); color: var(--muted); }
.cw-sc { display: inline-flex; align-items: center; gap: 4px; }
.cw-sws { display: flex; gap: 3px; }
.cw-sws i { display: block; width: 12px; height: 12px; border-radius: 3px; }
.cw-sl { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; }
.cw-sl .lg { gap: 4px; }
.cw-bs { display: block; position: relative; flex: none; width: 18px; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: inset 0 0 0 1px var(--primary); }
.cw-bs.p { background: none; box-shadow: none; }
.rv .step .ib:disabled { opacity: .38; cursor: default; }
.rv.cw-pin .cseg, .rv.cw-year .cseg { margin-top: 5.9px; }
.cw-pin .cbody { padding-top: 8.4px; }
.cw-year .cbody { padding-top: 2.4px; }
.cw-year .step { margin-bottom: -1.5px; }
.cw-pin .cc .big + .cap, .cw-year .cc .big + .cap { margin-top: 1.3px; }
.cw-pin .cc, .cw-year .cc { padding-bottom: 10.5px; }
.cw-hdr { margin-top: 3.4px; padding-bottom: 3.3px; }

/* ---- measurements ---- */
/* Everything below is the app's own dp inside a .rv block (zoom .9333): Trends / Body / Photos, the entry sheet, the dialogs.
   Kotlin: feature/measurements (MeasurementsScreen, MeasurementsTrends, MeasurementsBody, MeasurementsChrome, MeasurementEntrySheet, MeasurementsFirstRun), core/designsystem (LineChart, Sparkline, FormSheet, SegmentedBar). */
.rv.ms { padding: 0; }
.rv.ms-list { padding: 12px 0 12px; display: flex; flex-direction: column; gap: 12px; }
.rv.ms-list.ms-tight { gap: 8px; }
.rv.ms button { font: inherit; }
.rv.ms svg, .rv.ms-z svg { display: block; flex: none; }
.rv.ms-tabbar { padding: 8px 16px; flex: none; }
.ms-seg { display: grid; grid-template-columns: repeat(3, 1fr); height: 40px; margin: 4px 0; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; }
.ms-seg button { text-align: center; font: 600 14px/20px var(--body); color: var(--muted); }
.ms-seg button + button { border-left: 1px solid var(--outline); }
.ms-seg button[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--bg)); }

/* chips (FilterChip: 32 dp, 8 dp corners) */
.ms-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chip { flex: none; height: 32px; padding: 0 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/20px var(--body); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ms-chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.ms-chip.ms-rc[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.ms-chip.ms-all { color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); padding-right: 8px; }
.ms-chip.ms-all svg { width: 18px; height: 18px; }
.ms-gap12 { height: 12px; flex: none; } .ms-gap8 { height: 8px; flex: none; }

/* cards */
.ms-card { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px var(--shadow), 0 2px 6px var(--shadow); overflow: hidden; flex: none; }
.ms-hero { padding: 16px; }
.ms-hr { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.ms-hl { font: 500 14px/20px var(--body); text-transform: uppercase; color: var(--muted); }
.ms-ch { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 16%, var(--card)); color: var(--primary); font: 500 14px/20px var(--body); white-space: nowrap; }
.ms-ch.flat { background: var(--sv); color: var(--muted); padding-left: 10px; }
.ms-ch svg { width: 14px; height: 14px; }
.ms-hv { margin-top: 4px; font: 600 40px/44px var(--body); color: var(--text); }
.ms-hv u { font-size: 16px; font-weight: 500; }
.ms-hm { font: 400 14px/20px var(--body); color: var(--muted); }
.ms-none { font: 400 14px/20px var(--body); color: var(--muted); padding: 24px 0; }
.ms-chart { display: block; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.ms-chart svg { display: block; overflow: visible; }
.ms-gl { stroke: var(--line); stroke-width: 1; } .ms-gl.dash { stroke-dasharray: 3 5; }
.ms-ct { font: 400 11px/16px var(--body); fill: var(--muted); font-variant-numeric: tabular-nums; }
.ms-ar { fill: color-mix(in srgb, var(--primary) 22%, transparent); stroke: none; }
.ms-ln { fill: none; stroke: var(--primary); stroke-width: 2; }
.ms-dt, .ms-seldot { fill: var(--primary); }
.ms-end { fill: var(--text); stroke: var(--primary); stroke-width: 1.5; }
.ms-sel { fill: var(--tert); }
.ms-hl2 { height: 1px; background: var(--line); margin: 8px 0 12px; }
.ms-sr { display: flex; gap: 12px; }
.ms-sc { flex: 1; min-width: 0; }
.ms-sv { font: 600 16px/22px var(--body); color: var(--text); white-space: nowrap; }
.ms-sl { font: 500 11px/16px var(--body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ms-tb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 99px; color: var(--primary); font: 500 14px/20px var(--body); white-space: nowrap; }
.ms-tb svg { width: 18px; height: 18px; }
.ms-addb { margin-left: -12px; }

/* the nudge */
.ms-nudge { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-radius: 16px; background: var(--sv); flex: none; }
.ms-nudge > svg { width: 20px; height: 20px; }
.ms-nudge > span { flex: 1; padding: 12px 0; font: 400 14px/20px var(--body); }
.ms-nx { width: 48px; height: 48px; display: grid; place-items: center; }

/* progress photos card */
.ms-pc { padding: 16px; }
.ms-pt { display: flex; align-items: center; min-height: 22px; font: 600 16px/22px var(--head); }
.ms-pt b { font-weight: 600; }
.ms-ptiles { display: flex; gap: 8px; margin-top: 12px; }
.ms-add-tile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--outline); color: var(--primary); font: 500 12px/16px var(--body); }
.ms-add-tile svg { width: 24px; height: 24px; }
.ms-pe { margin-top: 12px; font: 400 12px/16px var(--body); color: var(--muted); }
.ms-pe.ms-bm { font-size: 14px; line-height: 20px; margin-top: 8px; }

/* History */
.ms-hh { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 8px; flex: none; }
.ms-hh b { font: 600 16px/22px var(--head); }
.ms-hh span { flex: 1; text-align: right; padding-left: 12px; font: 500 11px/16px var(--body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ms-dh { padding: 12px 16px 4px; font: 500 11px/16px var(--body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ms-dv { height: 1px; background: color-mix(in srgb, var(--line) 50%, transparent); }
.ms-sw { position: relative; overflow: hidden; background: var(--card); }
.ms-swbg { display: none; position: absolute; inset: 0; align-items: center; justify-content: flex-end; gap: 8px; padding-right: 16px; background: color-mix(in srgb, var(--danger) 18%, var(--card)); color: var(--danger); font: 500 14px/20px var(--body); }
.ms-sw.swiping .ms-swbg { display: flex; }
.ms-er { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: var(--card); text-align: left; }
.ms-et { width: 60px; flex: none; font: 400 11px/16px var(--body); white-space: nowrap; }
.ms-cv { flex: none; width: 38px; height: 50px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--outline); display: grid; place-items: center; color: var(--outline); }
.ms-cv svg { width: 16px; height: 16px; }
.ms-ec { flex: 1; min-width: 0; font: 400 14px/20px var(--body); }
.ms-ev { display: flex; flex-direction: column; align-items: flex-end; }
.ms-ev b { font: 600 16px/22px var(--body); }
.ms-ev i { font: 400 11px/16px var(--body); font-style: normal; color: var(--muted); }
.ms-hint { text-align: center; font: 500 11px/16px var(--body); letter-spacing: .5px; color: var(--muted); }
.ms-more { align-self: stretch; }

/* Body */
.ms-bhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-cap { flex: 1; padding-right: 8px; font: 500 11px/16px var(--body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ms-mode { display: inline-flex; align-items: center; height: 32px; padding: 0 8px 0 12px; border-radius: 99px; background: var(--sv); font: 500 14px/20px var(--body); white-space: nowrap; }
.ms-mode svg { width: 18px; height: 18px; color: var(--muted); }
.ms-bodycard { padding: 4px 16px; }
.ms-gh { padding: 16px 0 4px; font: 500 11px/16px var(--body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ms-gh.first { padding-top: 12px; }
.ms-dv.half { background: color-mix(in srgb, var(--line) 50%, transparent); }
.ms-br { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; text-align: left; }
.ms-bn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-bt { font: 400 16px/24px var(--body); }
.ms-bd { font: 500 11px/16px var(--body); letter-spacing: .5px; color: var(--muted); }
.ms-spk { flex: none; } .ms-spk path { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ms-spk circle { fill: var(--primary); }
.ms-bvc { width: 104px; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.ms-bv { font: 600 16px/22px var(--body); white-space: nowrap; } .ms-bv u { font-size: 11px; }
.ms-bc { font: 400 11px/16px var(--body); color: var(--muted); white-space: nowrap; } .ms-bc.on { color: var(--primary); }
.ms-bch { flex: none; color: var(--muted); width: 18px; height: 18px; } .ms-bch svg { width: 18px; height: 18px; }
.ms-pr { padding: 12px 0; }
.ms-ps { display: flex; gap: 16px; padding-top: 8px; }
.ms-sd { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ms-sdl { font: 500 11px/16px var(--body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ms-sd .ms-bv, .ms-sd .ms-bc { text-align: left; }
.ms-nl { font: 400 14px/20px var(--body); color: var(--muted); }

/* Photos tab */
.ms-ah { padding-top: 8px; font: 600 16px/22px var(--head); }
.ms-ae { padding: 4px 0; font: 400 14px/20px var(--body); color: var(--muted); }

/* the pinned bar (Add entry + Photo) and the sheet's footer */
.rv.ms-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg); box-shadow: inset 0 1px 0 var(--line); }
.ms-bmain { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 99px; background: var(--fill); color: var(--on-fill); font: 500 14px/20px var(--body); white-space: nowrap; box-shadow: 0 1px 2px var(--shadow); }
.ms-bmain svg { width: 20px; height: 20px; }
.ms-bmain[disabled] { background: color-mix(in srgb, var(--text) 12%, transparent); color: color-mix(in srgb, var(--text) 38%, transparent); box-shadow: none; cursor: default; }
.ms-bout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--outline); color: var(--primary); font: 500 14px/20px var(--body); white-space: nowrap; }
.ms-bout svg { width: 20px; height: 20px; }

/* first run */
.rv.ms-fr { padding: 16px 0; display: flex; flex-direction: column; align-items: stretch; }
.ms-trend { width: 100%; height: 130px; }
.ms-frl { fill: none; stroke: var(--primary); stroke-opacity: .85; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 9; }
.ms-frt { margin: 16px 0 0; text-align: center; font: 700 22px/28px var(--head); }
.ms-frb { margin: 8px 8px 0; text-align: center; font: 400 14px/20px var(--body); color: var(--muted); }
.ms-frc { margin-top: 32px; padding-bottom: 8px; font: 500 11px/16px var(--body); letter-spacing: .5px; color: var(--muted); }
.ms-mcs { display: flex; flex-direction: column; gap: 8px; }
.ms-mc { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.ms-mc.on { background: color-mix(in srgb, var(--primary) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.ms-mct { display: flex; flex-direction: column; }
.ms-mct b { font: 500 14px/20px var(--body); }
.ms-mct span { font: 400 14px/20px var(--body); color: var(--muted); }
.ms-frl2 { padding-top: 12px; font: 400 12px/16px var(--body); color: var(--muted); }
.ms-rb { flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin: -8px; }
.ms-rb::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); grid-area: 1/1; }
.ms-rb.on::before { box-shadow: inset 0 0 0 2px var(--primary); }
.ms-rb i { grid-area: 1/1; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.ms-rb.on i { background: var(--primary); }
.ms-mc.on .ms-rb::before { box-shadow: inset 0 0 0 2px var(--primary); } .ms-mc.on .ms-rb i { background: var(--primary); }

/* overlays */
.ms-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.5); display: flex; flex-direction: column; justify-content: flex-end; }
.ms-scrim.mid { z-index: 30; justify-content: center; align-items: center; background: rgba(0,0,0,.6); }
.ms-scrim.clear { background: transparent; z-index: 25; }
.ms-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(49 * var(--u)); z-index: 22; display: flex; flex-direction: column; background: var(--bg); border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; overflow: hidden; }
.ms-handle { flex: none; height: calc(48 * var(--u)); display: grid; place-items: center; }
.ms-handle i { width: calc(32 * var(--u)); height: calc(4 * var(--u)); border-radius: 4px; background: color-mix(in srgb, var(--muted) 70%, transparent); }
.rv.ms-z { padding: 0; }
.rv.ms-sh { flex: none; display: flex; align-items: center; padding: 0 4px 0 16px; min-height: 48px; }
.ms-sh h1 { flex: 1; margin: 0; padding: 8px 0; font: 700 20.5px/1.1 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.ms-x { width: 48px; height: 48px; display: grid; place-items: center; color: var(--muted); }
.ms-sheetscroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 15px; }
.ms-sheetscroll::-webkit-scrollbar { display: none; }
.ms-sheetbar { flex: none; background: var(--bg); box-shadow: inset 0 1px 0 var(--line); padding-bottom: calc(24 * var(--u)); }
.rv.ms-sbr { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ms-sbr .ms-bout { min-height: 52px; } .ms-sbr .ms-bmain { min-height: 52px; }
.ms-fillrow { display: flex; justify-content: flex-end; }
.ms-fillrow .ms-tb { gap: 8px; padding: 0 12px; }
.ms-dc { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-left: 16px; padding-right: 8px; border-radius: 16px; background: var(--sv); min-height: 48px; }
.ms-fillrow + .ms-dc { margin-top: 0; }
.ms-dc.ms-mt8 { margin-top: 8px; }
.ms-dc > span { display: flex; align-items: center; gap: 12px; padding: 12px 0; font: 400 16px/24px var(--body); }
.ms-dc > span svg { width: 20px; height: 20px; color: var(--muted); }
.ms-dc em { font: 500 11px/16px var(--body); letter-spacing: .5px; font-style: normal; color: var(--muted); padding-right: 8px; }
.ms-notice { display: flex; gap: 12px; margin-top: 8px; padding: 8px 12px; border-radius: 16px; background: color-mix(in srgb, var(--primary) 12%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); font: 400 14px/20px var(--body); }
.ms-notice > svg { width: 20px; height: 20px; margin-top: 8px; color: var(--primary); }
.ms-notice > span { padding: 8px 0; }
.ms-notice button { display: inline; padding: 0 0 0 4px; color: var(--primary); font: 500 14px/20px var(--body); }
.ms-mh { margin-top: 16px; font: 500 14px/20px var(--body); color: var(--primary); }
.ms-mh b { font-weight: 500; }
.ms-mtiles { display: flex; gap: 8px; margin-top: 8px; }
.ms-fh { margin-top: 16px; font: 400 12px/16px var(--body); color: var(--muted); }
.ms-fgh { display: flex; align-items: center; width: 100%; min-height: 48px; padding-top: 8px; text-align: left; }
.ms-fgh span { flex: 1; font: 500 14px/20px var(--body); color: var(--text); }
.ms-fgh.open span { color: var(--primary); }
.ms-fgh em { font: 500 11px/16px var(--body); letter-spacing: .5px; font-style: normal; color: var(--muted); }
.ms-fgh svg { width: 20px; height: 20px; margin-left: 8px; color: var(--muted); }
.ms-fl { display: flex; flex-direction: column; gap: 8px; }
.ms-fline { display: flex; gap: 12px; }
.ms-fline > .ms-f { flex: 1; min-width: 0; }
/* the outlined text field: 56 dp, 4 dp corners, the label inside until it floats onto the border */
.ms-f { position: relative; height: 56px; margin-top: 0; }
.ms-f input { width: 100%; height: 56px; padding: 0 16px; border: 0; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--outline); font: 400 16px/24px var(--body); color: var(--text); outline: none; }
.ms-f input::placeholder { color: transparent; }
.ms-f input:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.ms-f input:focus::placeholder { color: var(--muted); }
.ms-f label { position: absolute; left: 16px; top: 16px; pointer-events: none; font: 400 16px/24px var(--body); color: var(--muted); transform-origin: left top; transition: none; }
.ms-f input:focus ~ label, .ms-f input:not(:placeholder-shown) ~ label, .ms-f input:not([value=""]) ~ label { top: -8px; left: 12px; padding: 0 4px; background: var(--bg); font-size: 12px; line-height: 16px; }
.ms-f input:focus ~ label { color: var(--primary); }
.ms-f.err input { box-shadow: inset 0 0 0 2px var(--danger); } .ms-f.err label { color: var(--danger) !important; }
.ms-fe { display: none; position: absolute; left: 16px; top: 58px; font: 400 12px/16px var(--body); color: var(--danger); }
.ms-f.err { margin-bottom: 20px; } .ms-f.err .ms-fe { display: block; }
.ms-note { margin-top: 24px; }
.ms-delb { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); font: 500 14px/20px var(--body); }
.ms-delb svg { width: 20px; height: 20px; }

/* dialogs and the menu */
.ms-dlg { margin: 0 24px; width: calc(100% - 48px); max-height: 80%; overflow-y: auto; background: var(--sv); color: var(--text); border-radius: calc(28 * var(--u)); padding: calc(24 * var(--u)); }
.ms-dlg.panel { background: var(--card); border-radius: calc(18 * var(--u)); padding: calc(16 * var(--u)); box-shadow: inset 0 0 0 1px var(--line); }
.ms-dlg.wide { padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)); }
.ms-dlg h2 { margin: 0; font: 400 22px/28px var(--body); }
.ms-dlg.panel h2 { font: 600 16px/22px var(--head); }
.ms-dlg p { margin: 16px 0 0; font: 400 14px/20px var(--body); color: var(--muted); }
.ms-dbt { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.ms-dlg.panel .ms-dbt { margin-top: 12px; }
.ms-ros { padding-top: 12px; display: flex; flex-direction: column; }
.ms-ro { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; text-align: left; font: 400 16px/24px var(--body); }
.ms-ul { margin-top: 16px; font: 500 14px/20px var(--body); }
.ms-ul.ms-mt8 { margin-top: 8px; }
.ms-cps { display: flex; gap: 8px; margin-top: 8px; }
.ms-cp { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px 0 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/20px var(--body); color: var(--muted); }
.ms-cp > span { width: 18px; height: 18px; margin-right: 6px; display: block; }
.ms-cp.on { background: color-mix(in srgb, var(--primary) 14%, var(--sv)); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.ms-menu { position: absolute; right: calc(8 * var(--u)); top: calc(96 * var(--u)); min-width: calc(200 * var(--u)); background: var(--sv); border-radius: calc(4 * var(--u)); padding: calc(8 * var(--u)) 0; box-shadow: 0 4px 12px var(--shadow), 0 1px 3px var(--shadow); }
.ms-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; padding: 0 16px; font: 400 16px/24px var(--body); text-align: left; }
.ms-menu em { font-style: normal; color: var(--muted); }
.ms-dpl { font: 500 12px/16px var(--body); color: var(--muted); padding: 0 12px; }
.ms-dph { font: 400 28px/36px var(--body); padding: 8px 12px 12px; box-shadow: 0 1px 0 var(--line); }
.ms-dpm { display: flex; align-items: center; padding: 8px 0 0 12px; }
.ms-dpm span { flex: 1; font: 500 14px/20px var(--body); }
.ms-dpm button { width: 48px; height: 48px; display: grid; place-items: center; }
.ms-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font: 400 12px/16px var(--body); color: var(--muted); padding: 4px 0; }
.ms-dgrid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; justify-items: center; }
.ms-dd { width: 40px; height: 40px; border-radius: 50%; font: 400 14px/20px var(--body); display: grid; place-items: center; }
.ms-dd.td { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.ms-dd.sel { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.ms-tp { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ms-tp input { width: 72px; height: 72px; text-align: center; border: 0; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--outline); font: 400 40px/48px var(--body); outline: none; }
.ms-tp input:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.ms-tp > b { font: 400 40px/48px var(--body); }
.ms-ap { display: flex; flex-direction: column; margin-left: 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--outline); overflow: hidden; }
.ms-ap button { height: 36px; padding: 0 12px; font: 500 14px/20px var(--body); color: var(--muted); }
.ms-ap button[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 20%, var(--sv)); color: var(--primary); }
.ms-ap button + button { box-shadow: inset 0 1px 0 var(--outline); }
.ms-chart svg { width: 347px; height: 176px; }
.ms-spk { width: 54px; height: 26px; }
.ms-trend { width: 100%; height: 130px; }
.dm .ms-spk { width: 54px; height: 26px; }
.dm .ms-trend { width: 100%; height: 130px; }
.dm .ms-chart svg { width: 347px; height: 176px; }
.dm .ms-f input:focus-visible, .dm .ms-tp input:focus-visible { outline: none !important; border-radius: 4px; }
.dm .ms-tp input:focus-visible { border-radius: 8px; }
.ms-fline > .ms-f.err { margin-bottom: 36px; }

/* ---- timed workouts ----
   The routine's page, the live screens, Save, the summary and the saved workout's detail are laid out at the real phone's size (411 dp wide, 1 dp = 1 px here) and scaled
   into the demo phone like the outdoors screens, so the sizes below are the app's own dp / sp (Kotlin: feature/timed, feature/routines, feature/workout/finish). */
.dm-phone { --hatch: #8FCB2C; }
.dm-phone[style*="--primary:#466b00"] { --hatch: #345000; }
.dm-phone[style*="--primary:#64cfff"] { --hatch: #4B9BBF; }
.dm-phone[style*="--primary:#12638a"] { --hatch: #0E4A68; }
.dm-phone[style*="--primary:#ff92cb"] { --hatch: #BF6E98; }
.dm-phone[style*="--primary:#9e2c6e"] { --hatch: #772153; }
.dm-phone[style*="--primary:#59e5a8"] { --hatch: #43AC7E; }
.dm-phone[style*="--primary:#156a4a"] { --hatch: #105038; }
.dm-phone[style*="--primary:#bfa6ff"] { --hatch: #8F7DBF; }
.dm-phone[style*="--primary:#6940a0"] { --hatch: #4F3078; }

.tmview > .sb { height: 45.2px; }
.tmview .tmw { flex: 1; min-height: 0; position: relative; }
.tms { position: absolute; left: 0; top: 0; width: 411.43px; height: calc(100% / .93333); transform: scale(.93333); transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); font: 400 14px/20px var(--body); font-variant-numeric: tabular-nums; }
.tms, .tms *, .tms *::before, .tms *::after { box-sizing: border-box; }
.tms button { text-align: inherit; }
.tms svg { flex: none; display: block; }
.tms b { font-weight: 600; }
.tms .mu { color: var(--muted); }
.tms .grow { flex: 1; min-width: 0; }
.tm-ug { display: inline-block; width: .118em; font-style: normal; }
.tm-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.tm-scroll::-webkit-scrollbar { display: none; }
.tm-gap { display: flex; flex-direction: column; gap: 12px; padding: 7px 16px 16px; }
.tm-gap > * { flex: none; }

/* top bar */
.tm-tb { flex: none; height: 64px; display: flex; align-items: center; padding: 0 4px; }
.tm-tb0 { flex: none; height: 34.5px; }
.tm-ib { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; flex: none; color: var(--text); }
.tm-ib svg { width: 24px; height: 24px; }
.tm-tb h1 { flex: 1; min-width: 0; margin: 0 0 0 5px; font: 700 22px/28px var(--head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-tb h1.tmmx { text-transform: none; letter-spacing: 0; }
.tm-tb .sp16 { width: 16px; flex: none; }
.tm-edit { height: 40px; margin: 0 12px 0 0; padding: 0 16px 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--outline); border-radius: 99px; color: var(--primary); font: 500 14px/20px var(--body); }
.tm-edit svg { width: 18px; height: 18px; }
.tm-speed { position: absolute; z-index: 4; left: 50%; top: 13px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 20%, var(--card)); color: var(--gold-text); font: 700 10.5px/1 var(--body); letter-spacing: .01em; white-space: nowrap; }
.tm-speed svg { width: 13px; height: 13px; }

/* cards */
.tm-card { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 4px var(--shadow); }
.tm-caps { font: 400 11px/16px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tm-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 4px 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font: 500 11px/16px var(--body); letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.tm-chip svg { width: 14px; height: 14px; margin-left: 4px; }
.tm-chip.rowc { padding-left: 8px; }
.tm-chip.ontile { padding: 0 6px 0 10px; height: 24px; background: color-mix(in srgb, var(--on-fill) 14%, transparent); color: var(--on-fill); }

/* the routine's page */
.tm-tile { background: var(--fill); color: var(--on-fill); border-radius: 26px; padding: 16px 16px 16px 20px; cursor: pointer; }
.tm-tile .hd { display: flex; align-items: flex-start; }
.tm-tile .gr { flex: 1; min-width: 0; padding-right: 12px; display: flex; flex-direction: column; align-items: flex-start; }
.tm-tile h2 { margin: 8px 0 0; font: 700 22px/28px var(--head); }
.tm-tile .disc { display: flex; flex-direction: column; align-items: center; }
.tm-tile .disc span { width: 56px; height: 56px; border-radius: 50%; background: var(--on-fill); color: var(--fill); display: grid; place-items: center; }
.tm-tile .disc span svg { width: 28px; height: 28px; }
.tm-tile .disc em { margin-top: 4px; font: 600 11px/16px var(--body); font-style: normal; letter-spacing: .12em; }
.tm-tile .fg { display: flex; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--on-fill) 16%, transparent); }
.tm-tile .fg .c { min-width: 0; }
.tm-tile .fg .c + .c { margin-left: 8px; padding-left: 9px; border-left: 1px solid color-mix(in srgb, var(--on-fill) 16%, transparent); }
.tm-tile .fg b { display: block; font: 600 22px/28px var(--body); }
.tm-tile .fg span { display: block; font: 500 11px/16px var(--body); letter-spacing: .05em; color: color-mix(in srgb, var(--on-fill) 66%, transparent); }
.tm-lt { display: flex; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--on-fill) 16%, transparent); }
.tm-lt .k { font: 600 11px/16px var(--body); letter-spacing: .1em; color: color-mix(in srgb, var(--on-fill) 62%, transparent); }
.tm-lt .v { flex: 1; padding: 0 8px; font: 600 14px/20px var(--body); }
.tm-lt .d { font: 400 11px/16px var(--body); color: color-mix(in srgb, var(--on-fill) 62%, transparent); }
.tm-card.clk { padding: 12px; }
.tm-ch { display: flex; align-items: center; justify-content: space-between; }
.tm-l1 { margin-top: 8px; font: 400 16px/24px var(--body); color: var(--text); }
.tm-l2 { margin-top: 2px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-l1 b { font-weight: 600; } .tm-l2 b { font-weight: 600; color: var(--text); }
.tm-strip { margin-top: 8px; }
.tm-strip svg { width: 100%; height: auto; }
.tm-st-cap { font: 600 12px var(--body); letter-spacing: .06em; fill: var(--on-primary); }
.tm-st-l { font: 600 11px var(--body); fill: var(--on-primary); }
.tm-axis { display: flex; justify-content: space-between; min-height: 16px; font: 400 11px/16px var(--body); color: var(--muted); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font: 400 11px/16px var(--body); color: var(--muted); }
.tm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tm-sw { width: 14px; height: 8px; border-radius: 2px; display: block; }
.tm-sw.work { background: var(--primary); }
.tm-sw.lead { border: 1.5px dashed var(--primary); }
.tm-sw.open { background: repeating-linear-gradient(135deg, var(--primary) 0 3px, var(--hatch) 3px 6px); }
.tm-card.mwc { padding: 0; }
.tm-mw { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 8px; }
.tm-mw .fig { width: 150px; flex: none; }
.tm-mw .fig svg { width: 100%; height: auto; }
.tm-mw .wd { flex: 1; min-width: 0; }
.tm-mw .caps { font-weight: 500; letter-spacing: .1em; margin-bottom: 4px; }
.tm-mw .tmlg { display: flex; align-items: center; min-height: 36px; }
.tm-mw .tmlg span { flex: .5; padding-right: 8px; font: 400 14px/20px var(--body); }
.tm-mw .tmlg i { flex: .5; height: 6px; border-radius: 3px; background: var(--line); display: block; }
.tm-mw .tmlg u { display: block; height: 6px; border-radius: 3px; background: var(--primary); }
.tm-h3 { margin: 4px 0 -4px; font: 600 16px/22px var(--head); color: var(--primary); text-transform: uppercase; }
.tm-card.xs { overflow: hidden; }
.tm-xr { display: flex; align-items: flex-start; min-height: 48px; padding: 12px; }
.tm-xr + .tm-xr { border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.tm-chipn { width: 28px; height: 28px; border-radius: 50%; background: var(--sv); color: var(--muted); display: grid; place-items: center; font: 600 14px/20px var(--body); flex: none; }
.tm-xr .grow { margin-left: 12px; }
.tm-xr .nm { font: 500 14px/20px var(--body); }
.tm-xr .sm { margin-top: 2px; font: 400 12px/16px var(--body); color: var(--muted); }

/* the rows of the Workout tab and the Library */
.tm-nc { min-width: 0; } .tm-nc.beside { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-nc2 { margin-top: 4px; }
.tm-lrow .tm-nc b, .tm-rr .tm-nc b { display: block; }
.tm-rr { cursor: pointer; } .tm-lrow { cursor: pointer; }
.wk-routines .rr.tm-rr .tx { min-width: 0; }
.rrow.tm-lrow { padding-left: 16px; }
.tm-lrow .tm-chip, .tm-rr .tm-chip { height: 24px; }
.tm-lfoot { margin: 12px 0 0; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-lfoot .ft { display: block; }

/* the clock card of the live screen */
.tm-live { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.tm-live > * { flex: none; }
.tm-cc { position: relative; border-radius: 18px; padding: 14px 16px; border: 1px solid transparent; }
.tm-cc.work { background: color-mix(in srgb, var(--primary) 14%, var(--bg)); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.tm-cc.alert { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tm-cc.alert.paused { background: color-mix(in srgb, var(--primary) 55%, var(--bg)); }
.tm-cc.tmrest { background: var(--card); border-color: transparent; }
.tms .tm-dash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tms .tm-dash rect { x: .75px; y: .75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); rx: 17px; ry: 17px; fill: none; stroke: var(--outline); stroke-width: 1.5px; stroke-dasharray: 6 4; }
.tm-cc .h { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; min-height: 22px; }
.tm-cc .tlab { display: inline-flex; align-items: center; font: 700 16px/22px var(--head); letter-spacing: .08em; }
.tm-cc .tlab .ic { width: 20px; height: 20px; margin-right: 8px; display: grid; place-items: center; }
.tm-cc .tlab .ic svg { width: 20px; height: 20px; }
.tm-cc.work .tlab { color: var(--primary); } .tm-cc.alert .tlab { color: var(--on-primary); } .tm-cc.tmrest .tlab { color: var(--text); }
.tm-cc .wh { font: 400 12px/16px var(--body); color: var(--muted); text-align: right; }
.tm-cc .wh b { font-weight: 600; color: var(--text); }
.tm-cc .dg { margin-top: 4px; height: 124.5px; padding-bottom: 1px; display: flex; align-items: center; justify-content: center; font: 600 96px/1 var(--body); letter-spacing: -.02em; color: var(--text); }
.tm-cc.work .dg { color: var(--primary); } .tm-cc.alert .dg { color: var(--on-primary); }
.tm-cc.paused .dg { opacity: .62; }
.tm-cc .br { position: relative; margin-top: 8px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--outline) 70%, transparent); }
.tm-cc.alert .br { background: color-mix(in srgb, var(--on-primary) 22%, transparent); }
.tm-cc .br i { display: block; height: 8px; border-radius: 4px; background: var(--muted); }
.tm-cc.work .br i { background: var(--primary); } .tm-cc.alert .br i { background: var(--on-primary); }
.tm-cc .br u { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -2px; background: var(--text); }
.tm-cc .tcn { display: flex; justify-content: space-between; margin-top: 6px; font: 400 12px/16px var(--body); color: var(--muted); }
.tm-cc.alert .tcn { color: var(--on-primary); }
.tm-cc .tcn b { font-weight: 600; color: var(--text); } .tm-cc.alert .tcn b { color: var(--on-primary); }
.tm-cue { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); font: 600 12px/16px var(--body); letter-spacing: .06em; }
.tm-cue.inv { background: var(--on-primary); box-shadow: none; }
.tm-cue svg { width: 14px; height: 14px; margin-right: 6px; }
.tm-ban { display: flex; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.tm-ban .ic svg { width: 24px; height: 24px; color: var(--primary); }
.tm-ban .t { font: 600 16px/22px var(--head); letter-spacing: .05em; color: var(--primary); }
.tm-ban .b { margin-top: 2px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-ban .b b { font-weight: 500; color: var(--text); }
.tm-nb { display: flex; align-items: center; padding: 4px 4px 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); margin-bottom: 6px; }
.tm-nb .ic svg { width: 24px; height: 24px; color: var(--primary); margin-right: 12px; }
.tm-nb .tw { flex: 1; padding: 8px 0; }
.tm-nb .t { font: 600 16px/22px var(--head); letter-spacing: .05em; color: var(--primary); }
.tm-nb .b { margin-top: 2px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-nb button { height: 48px; padding: 0 12px; color: var(--primary); font: 500 14px/20px var(--body); }
.tm-grp { display: flex; flex-direction: column; }
.tm-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 112px; padding: 17px 16px 12px; border-radius: 24px; background: var(--fill); color: var(--on-fill); text-align: center !important; }
.tm-plus b { font: 700 34px/38px var(--head); letter-spacing: .02em; }
.tm-plus span { margin-top: 4px; font: 500 14px/20px var(--body); opacity: .75; }
.tm-st { display: flex; align-items: stretch; padding: 12px 0 11.5px; }
.tm-st .c { flex: 1; padding: 0 8px; text-align: center; }
.tm-st .v { font: 600 40px/48px var(--body); position: relative; top: 2.6px; height: 48px; }
.tm-st .v span { margin-left: 8px; font: 600 16px/16px var(--body); color: var(--muted); }
.tm-st .tl { margin-top: 3.4px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-st .vd { width: 1px; margin: 6px 0; background: var(--line); }
.tm-spr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.tm-sp { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; margin: 10px 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--outline); font: 400 12px/16px var(--body); }
.tm-undo { height: 48px; display: inline-flex; align-items: center; }

.tm-undo em { font-style: normal; margin-left: 6px; } .tm-undo svg { width: 14px; height: 14px; }
.tm-card.or { padding: 4px 14px; }
.tm-card.or .tmcap { padding: 8px 0 4px; }
.tm-or { display: flex; align-items: center; min-height: 45px; border-top: 1px solid var(--line); }
.tm-or .f { min-width: 36px; padding-right: 14px; text-align: right; font: 600 16px/24px var(--body); }
.tm-or .n { flex: 1; font: 400 16px/24px var(--body); }
.tm-or .tw { padding-left: 8px; font: 400 12px/16px var(--body); color: var(--muted); }
.tm-sc2 { display: flex; flex-direction: column; gap: 8px; }
.tm-sc2 .in { display: flex; align-items: center; padding: 12px 14px; }
.tm-sc2 .k { margin-right: 12px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-sc2 .v { flex: 1; text-align: right; font: 600 16px/22px var(--body); }
.tm-outb { min-height: 48px; border: 1px solid var(--outline); border-radius: 99px; font: 500 14px/20px var(--body); text-align: center !important; }
.tm-ready { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 24px; text-align: center; }
.tm-ready .tlab { display: inline-flex; align-items: center; font: 700 16px/22px var(--head); letter-spacing: .08em; color: var(--primary); }
.tm-ready .tlab .ic { margin-right: 8px; } .tm-ready .tlab svg { width: 20px; height: 20px; }
.tm-ready .ring { position: relative; width: 260px; height: 260px; margin: 12px 0; display: grid; place-items: center; }
.tm-ready .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-ready .ring b { font: 600 160px/168px var(--body); letter-spacing: -.02em; }
.tm-ready .fu { font: 400 16px/24px var(--body); color: var(--muted); }
.tm-ready .fn { margin-top: 4px; font: 700 22px/28px var(--head); }
.tm-ready .ln { margin-top: 8px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-stop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; text-align: center; }
.tm-stop h2 { margin: 0; font: 700 22px/28px var(--head); } .tm-stop p { margin: 8px 0 0; font: 400 16px/24px var(--body); color: var(--muted); }
/* the EMOM strip, cards and buttons */
.tm-strip2 .cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.tm-cell { position: relative; height: 40px; border-radius: 8px; display: grid; place-items: center; font: 400 12px/16px var(--body); color: var(--muted); box-shadow: inset 0 0 0 1px var(--outline); }
.tm-cell svg { width: 16px; height: 16px; }
.tm-cell.done { background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--on-primary); }
.tm-cell.now { box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); font-weight: 600; }
.tm-cell.skipped { color: var(--muted); }
.tm-cell.todo { font-weight: 400; }
.tm-strip2 .tcn { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: 6px; font: 400 12px/16px var(--body); color: var(--muted); }
.tm-strip2 .tcn span:last-child { text-align: right; } .tm-strip2 .tcn b { font-weight: 600; color: var(--text); }
.tm-card.now, .tm-card.tmlg { padding: 12px 16px 14px; }
.tm-card.tmlg { padding-bottom: 12px; }
.tm-cap { font: 400 11px/16px var(--body); letter-spacing: .08em; color: var(--muted); }
.tm-cr { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tm-cr .lm { font: 400 12px/16px var(--body); color: var(--muted); text-align: right; }
.tm-nm { margin-top: 2px; font: 700 22px/28px var(--head); }
.tm-fg { display: flex; justify-content: space-between; margin-top: 4px; }
.tm-fg .fr { display: inline-flex; align-items: baseline; }
.tm-fg .fr b { font: 600 40px/48px var(--body); } .tm-fg .fr span { margin-left: 6px; font: 400 16px/24px var(--body); color: var(--muted); }
.tm-hr { margin: 8px 0 0; border: 0; border-top: 1px solid var(--line); }
.tm-er { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tm-er > span { font: 400 14px/20px var(--body); color: var(--muted); }
.tm-sp2 { display: flex; align-items: center; }
.tm-rb { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--outline); }
.tm-rb[disabled] { opacity: .5; }
.tm-rb svg { width: 24px; height: 24px; }
.tm-sp2 .n { min-width: 56px; padding: 0 4px; text-align: center; font: 600 22px/28px var(--body); }
.tm-eb { display: flex; gap: 8px; }
.tm-eb .tm-big { flex: 1; min-height: 48px; }
.tm-next { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.tm-next.lit { background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.tm-next .x { flex: 1; min-width: 0; } .tm-next .nn { font: 500 16px/24px var(--body); }
.tm-next .tg { font: 400 14px/20px var(--body); color: var(--muted); text-align: right; }
.tm-last { display: flex; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.tm-last .ic svg { width: 24px; height: 24px; color: var(--primary); }
.tm-last .t { font: 600 16px/22px var(--head); } .tm-last .b { margin-top: 2px; font: 400 14px/20px var(--body); color: var(--muted); }

/* the pinned bar and its buttons */
.tm-bar { flex: none; border-top: 1px solid var(--line); background: var(--bg); }
.tm-bar .in { display: flex; gap: 8px; padding: 12px 16px; }
.tm-bar .in.col { flex-direction: column; }
.tm-big { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--outline); font: 500 16px/24px var(--body); text-align: center !important; }
.tm-big.tmfill { background: var(--fill); color: var(--on-fill); box-shadow: none; }
.tm-big svg { width: 24px; height: 24px; }
.tm-pause { flex: 205; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 99px; background: var(--fill); color: var(--on-fill); font: 500 16px/24px var(--body); }
.tm-sd { flex: 165; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--outline); font: 500 14px/20px var(--body); }
.tm-pause svg, .tm-sd svg { width: 24px; height: 24px; }
.tm-dis { flex: 0 0 auto; min-height: 48px; padding: 0 24px; border-radius: 99px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); font: 500 14px/20px var(--body); }
.tm-save { flex: 1; min-height: 48px; border-radius: 99px; background: var(--fill); color: var(--on-fill); font: 500 14px/20px var(--body); text-align: center !important; }

/* Save, the summary and the saved workout */
.tm-sh { display: flex; align-items: center; gap: 12px; }
.tm-fchip { display: inline-flex; align-items: center; height: 25px; padding: 0 11px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font: 500 11px/16px var(--body); letter-spacing: .08em; }
.tm-sh .dt { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-sh .dt svg { width: 18px; height: 18px; }
.tm-card.tmhead { padding: 16px; }
.tm-of { position: relative; margin-top: 21px; }
.tm-of label { position: absolute; left: 12px; top: -9px; padding: 0 4px; background: var(--card); font: 400 12px/16px var(--body); color: var(--muted); }
.tm-of input { width: 100%; height: 56px; padding: 0 44px 0 16px; border: 1px solid var(--outline); border-radius: 4px; background: none; font: 500 16px/24px var(--body); color: var(--text); outline: none; }
.tm-of input:focus { border: 2px solid var(--primary); padding-left: 15px; }
.tm-of svg { position: absolute; right: 14px; top: 18px; width: 20px; height: 20px; color: var(--muted); }
.tm-of.nt { margin: 4px 0 0; } .tm-of.nt textarea { width: 100%; min-height: 56px; padding: 15px 16px; border: 1px solid var(--outline); border-radius: 4px; background: none; font: 400 16px/24px var(--body); color: var(--text); resize: none; outline: none; }
.tm-of.nt textarea::placeholder { color: var(--muted); opacity: 1; }
.tm-note { margin: 0; padding: 0 4px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-card.score { padding: 14px 12px 16px; text-align: center; }
.tm-sl { font: 500 12px/16px var(--body); letter-spacing: .1em; color: var(--muted); }
.tm-big40 { margin-top: 6px; height: 54px; display: flex; align-items: center; justify-content: center; font: 600 40px/42px var(--body); letter-spacing: -.03em; }
.tm-cap14 { margin-top: 1.7px; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-cap14 b { font-weight: 600; color: var(--text); }
.tm-cells2 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 14px; }
.tm-fr { display: flex; padding: 7px 0 4px; }
.tm-fr .c { flex: 1; text-align: center; }
.tm-fr .c b { display: block; font: 600 22px/28px var(--body); } .tm-fr .c b small { font-size: 14px; font-weight: 600; color: var(--muted); }
.tm-fr .c span { display: block; font: 400 14px/20px var(--body); color: var(--muted); }
.tm-card.bars, .tm-card.tmtot, .tm-card.tbl { padding: 14px 14px 12px; }
.tm-hd { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.tm-hd span { font: 500 12px/16px var(--body); letter-spacing: .1em; color: var(--muted); }
.tm-hd em { font: 400 12px/16px var(--body); font-style: normal; color: var(--muted); }
.tm-bars { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.tm-bars .tmcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tm-bars .t, .tm-bars .b { font: 400 11px/20px var(--body); }
.tm-bars .b { color: var(--muted); }
.tm-bars i { display: block; width: min(100%, 40px); margin: 4px 0; border-radius: 4px; background: color-mix(in srgb, var(--primary) 45%, transparent); }
.tm-bars i.lit { background: var(--primary); }
.tm-bars i.tmpart { background: color-mix(in srgb, var(--primary) 14%, transparent) repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 33%, transparent) 0 3px, transparent 3px 8.5px); }
.tm-tr { display: flex; align-items: center; min-height: 40px; padding: 6px 0; border-top: 1px solid var(--line); font: 400 14px/20px var(--body); gap: 8px; }
.tm-hd + .tm-tr { margin-top: 8px; }
.tm-tr > span { flex: 1; min-width: 0; }
.tm-tr b { font: 600 14px/20px var(--body); text-align: right; }
.tm-tr i.t { font-style: normal; font-weight: 500; width: 52px; text-align: right; }
.tm-tr.tmdim, .tm-tr.tmdim b { color: var(--muted); }
.tm-tr em { font-style: normal; }
.tm-wc { text-align: center; padding-top: 4px; }
.tm-wc h2 { margin: 0; font: 700 22px/28px var(--head); }
.tm-wc .ln { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 3.4px; font: 400 16px/24px var(--body); color: var(--muted); }
.tm-fine { margin: 4px 0 0; font: 400 16px/24px var(--body); color: var(--muted); }
.tm-share, .tm-done { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 99px; font: 500 16px/24px var(--body); width: 100%; text-align: center !important; }
.tm-share { box-shadow: inset 0 0 0 1px var(--outline); color: var(--muted); margin-top: 4px; }
.tm-done { background: var(--fill); color: var(--on-fill); }
.tm-gap.sum { padding-top: 0; }
.tm-dh { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 0; }
.tm-dh .dt { font: 400 14px/20px var(--body); color: var(--muted); }
.tm-card.mtc { padding: 0; overflow: hidden; }
.tm-mt .tm-hd { padding: 14px 16px 0; }
.tm-mt .mb { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px 8px; }
.tm-mt .mf { flex: 1; min-width: 0; } .tm-mt .mf svg { width: 100%; height: auto; }
.tm-mt .mr { flex: none; } .tm-mt .mr svg { display: block; width: 146.8px; height: 146.8px; }
.tm-rt { font: 600 14px var(--body); fill: var(--text); }
.tm-mt .md { height: 1px; background: var(--line); }
.tm-mt .ml { padding: 4px 16px 8px; }
.tm-mt .mrow { display: flex; align-items: center; min-height: 40px; }
.tm-mt .mn { display: flex; align-items: center; width: 150px; white-space: nowrap; font: 400 16px/24px var(--body); }
.tm-mt .mn i { width: 12px; height: 12px; border-radius: 3px; margin-right: 12px; flex: none; }
.tm-mt .mtrk { flex: 1; height: 8px; margin: 0 12px; display: block; }
.tm-mt .mtrk i { display: block; height: 8px; border-radius: 4px; }
.tm-mt .mct { width: 62px; text-align: right; font: 400 14px/20px var(--body); color: var(--muted); } .tm-mt .mct b { color: var(--text); font-weight: 600; font-size: 16px; }
.tm-mt .mpc { width: 40px; text-align: right; font: 400 14px/20px var(--body); color: var(--muted); }

/* sheets, the menu */
.tm-sc3 { z-index: 22; }
.tm-sheet { zoom: .93333; width: 100%; max-height: 90%; overflow-y: auto; background: var(--card); border-radius: 28px 28px 0 0; padding: 12px 16px 16px; border-top: 1px solid var(--outline); font: 400 14px/20px var(--body); display: flex; flex-direction: column; }
.tm-sheet.tall { height: 88%; }
.tm-sheet .grab { width: 32px; height: 4px; border-radius: 2px; background: var(--outline); margin: 0 auto 12px; flex: none; }
.tm-sheet .th { display: flex; align-items: center; gap: 12px; }
.tm-sheet .well { width: 48px; height: 48px; border-radius: 50%; background: var(--sv); color: var(--primary); display: grid; place-items: center; flex: none; }
.tm-sheet .well svg { width: 24px; height: 24px; }
.tm-sheet .tt { font: 600 16px/22px var(--head); } .tm-sheet .tl { color: var(--muted); }
.tm-sheet .tm-rl { display: flex; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--outline); border-radius: 12px; }
.tm-sheet .tm-rl svg { width: 20px; height: 20px; color: var(--primary); }
.tm-sheet p { margin: 0; } .tm-sheet .wt { margin-top: 12px; }
.tm-sheet .xbox { margin-top: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.tm-sheet .eh { display: flex; align-items: center; gap: 4px; font: 400 11px/16px var(--body); color: var(--primary); } .tm-sheet .eh svg { width: 16px; height: 16px; }
.tm-sheet .xbox p { margin-top: 8px; }
.tm-sheet .lb2 { margin-top: 12px; } .tm-sheet .lb2 b { font-weight: 600; color: var(--text); }
.tm-sheet .tm-big { flex: none; margin-top: 16px; width: 100%; }
.tm-sheet .tm-big + .tm-big { margin-top: 8px; }
.tm-link { align-self: center; min-height: 48px; padding: 0 12px; color: var(--primary); font: 500 14px/20px var(--body); }
.tm-sheet h2.sf { margin: 6px 0 4px; font: 700 22px/28px var(--head); }
.tm-sheet .sfl { list-style: none; margin: 12px 0 0; padding: 0; } .tm-sheet .sfl li { display: flex; gap: 12px; margin: 10px 0; font-size: 16px; line-height: 24px; }
.tm-sheet .sfl .ck { color: var(--primary); } .tm-sheet .sfl .ck svg { width: 22px; height: 22px; }
.tm-sheet .sfl b { font-weight: 600; color: var(--primary); }
.tm-sheet .sfd { margin-top: 8px; }
.tm-sheet .gtop { display: flex; align-items: center; justify-content: space-between; flex: none; } .tm-sheet .gtop h2 { margin: 0; font: 700 22px/28px var(--head); }
.tm-sheet .gl { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -16px; } .tm-sheet .gl::-webkit-scrollbar { display: none; }
.tm-sheet .gh { padding: 16px 16px 8px; font: 500 11px/16px var(--body); letter-spacing: .1em; color: var(--muted); }
.tm-sheet .ge { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tm-sheet .gx { flex: 1; } .tm-sheet .gn { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tm-sheet .gn b { font: 600 16px/22px var(--head); } .tm-sheet .gn small { font-size: 12px; color: var(--muted); }
.tm-sheet .gt { margin-top: 4px; color: var(--muted); } .tm-sheet .ge svg { width: 24px; height: 24px; color: var(--muted); margin-left: 8px; }
.tm-sheet .gnote { padding: 12px 16px; color: var(--muted); }
.tm-sheet .xt { font: 500 16px/24px var(--body); } .tm-sheet .xb { margin: 2px 0 8px; }
.tm-sheet .xrow { display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--line); }
.tm-sheet .xm { flex: 1; padding: 6px 0; } .tm-sheet .xm .n { font: 400 14px/20px var(--body); } .tm-sheet .xm .a { font: 400 12px/16px var(--body); color: var(--muted); }
.tm-sheet .xs { display: flex; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); }
.tm-sheet .xs .k { margin-right: 12px; color: var(--muted); } .tm-sheet .xs .v { flex: 1; text-align: right; font: 600 16px/22px var(--body); }
.tm-sc3.tmmenu { align-items: flex-start; justify-content: flex-end; background: transparent; }
.tm-menu { zoom: .93333; margin: 62px 8px 0 0; min-width: 210px; padding: 8px 0; border-radius: 4px; background: var(--card); box-shadow: 0 4px 16px var(--shadow), inset 0 0 0 1px var(--line); }
.tm-menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 16px; font: 400 16px/24px var(--body); }
.tm-menu svg { width: 24px; height: 24px; color: var(--muted); }
.wk-routines .rr.tm-rr { padding-left: calc(16*var(--u)); cursor: pointer; }
.wk-routines .rr.tm-rr .tx { min-width: 0; }
.tm-rr .tm-nc b { font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.tm-rr .tm-chip { zoom: .93333; }
.tm-lrow .tm-chip { zoom: .93333; }
.tm-hc .tm-chip, .tmhc .tm-chip { }
.tm-gap.sv { padding-top: 17px; }
.tm-bar .in.sv { padding: 16px; }
.rv .tmhc .exs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rv .tmhc .exh2 + .ln { margin-top: 4px; }
.rv .tmhc .ln { min-height: 28px; align-items: center; }
.rv .tmhc .tm-chip { zoom: 1; }
.rv .tmhc .tr1 { flex-wrap: nowrap; }
.rv .tmhc .hd > .tm-chip { margin-left: 8px; }
.tm-cell.missed { box-shadow: none; color: var(--text); }
.tms .tm-cell .tm-dash rect { rx: 7.25px; ry: 7.25px; stroke: var(--muted); }
.tm-undo > span { position: relative; height: 28px; display: inline-flex; align-items: center; padding: 0 10px; color: var(--muted); font: 400 12px/16px var(--body); }
.tms .tm-undo .tm-dash rect { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: 13.5px; ry: 13.5px; stroke: var(--muted); stroke-width: 1px; }
.tm-lrow .tm-chip { zoom: 1; }



/* ---- routine builder (.bd-): the NEW ROUTINE screen, its sheets and dialogs, and the exercise picker. Written in the app's dp (1 dp = calc(1*var(--u)) on the 384 px phone). ---- */
.view:has(.bd-top) > .sb, .bd-pv > .sb { height: calc(48*var(--u)); }
.bd-top { flex: none; height: calc(64*var(--u)); display: flex; align-items: center; padding: 0 calc(4*var(--u)); background: var(--bg); }
.bd-top h1 { flex: 1; min-width: 0; margin: 0 0 0 calc(4*var(--u)); font: 700 calc(22*var(--u))/calc(28*var(--u)) var(--head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.bd-ib { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; border-radius: 50%; flex: none; color: var(--text); }
.bd-ib.mu { color: var(--muted); }
.bd-ib svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; background: var(--bg); }
.bd-scroll::-webkit-scrollbar, .bd-plist::-webkit-scrollbar, .bd-fcs::-webkit-scrollbar, .bd-sh2::-webkit-scrollbar { display: none; }
.bd { padding: 0 calc(16*var(--u)) calc(8*var(--u)); color: var(--text); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.bd-type { padding-top: calc(4*var(--u)); }
.bd-seg { height: calc(40*var(--u)); margin: calc(4*var(--u)) 0; border: calc(1*var(--u)) solid var(--outline); border-radius: 99px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.bd-seg button { height: 100%; text-align: center; font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.bd-seg button + button { border-left: calc(1*var(--u)) solid var(--outline); }
.bd-seg button[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.bd-hint { margin: 0; padding-top: calc(4*var(--u)); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.bd-details { padding-top: calc(12*var(--u)); }
.bd-field { position: relative; display: block; padding-top: calc(8*var(--u)); }
.bd-field input, .bd-field textarea { display: block; width: 100%; height: calc(56*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(4*var(--u)); background: transparent; padding: 0 calc(16*var(--u)); font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); outline: none; caret-color: var(--primary); resize: none; }
.bd-field textarea { height: calc(80*var(--u)); padding: calc(15*var(--u)) calc(16*var(--u)); }
.bd-field span { position: absolute; left: calc(12*var(--u)); top: calc(24*var(--u)); padding: 0 calc(4*var(--u)); font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--muted); pointer-events: none; background: transparent; }
.bd-field input:focus, .bd-field textarea:focus { border-color: var(--primary); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--primary); }
.bd-field input:focus + span, .bd-field textarea:focus + span, .bd-field input:not(:placeholder-shown) + span, .bd-field textarea:not(:placeholder-shown) + span { top: 0; font-size: calc(12*var(--u)); line-height: calc(16*var(--u)); background: var(--bg); }
.bd-field input:focus + span, .bd-field textarea:focus + span { color: var(--primary); }
.bd-area { margin-top: calc(4*var(--u)); }
.bd-chips { display: flex; flex-wrap: wrap; column-gap: calc(8*var(--u)); padding-top: calc(4*var(--u)); }
.bd-details .bd-chips { padding-top: calc(4*var(--u)); }
.bd-chip { margin: calc(4*var(--u)) 0; height: calc(40*var(--u)); display: inline-flex; align-items: center; padding: 0 calc(12*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: 99px; font: 600 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--text); white-space: nowrap; }
.bd-chip:has(> i:first-child) { padding-left: calc(8*var(--u)); }
.bd-chip:has(> i.car) { padding-right: calc(4*var(--u)); }
.bd-chip i { display: grid; width: calc(18*var(--u)); height: calc(18*var(--u)); margin-right: calc(4*var(--u)); color: var(--muted); flex: none; }
.bd-chip i svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.bd-chip i.pr { color: var(--primary); }
.bd-chip i.car { width: calc(24*var(--u)); height: calc(24*var(--u)); margin: 0; }
.bd-chip i.car svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-chip.mute { color: var(--muted); }
.bd-chip.on { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
.bd-chip.on i { color: var(--primary); }
.bd-eh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: calc(16*var(--u)); }
.bd-sl { font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bd-tb { height: calc(48*var(--u)); padding: 0 calc(12*var(--u)); display: inline-flex; align-items: center; gap: calc(4*var(--u)); color: var(--primary); font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; }
.bd-tb i { display: grid; width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-tb i svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-card { position: relative; background: var(--card); border: calc(1*var(--u)) solid var(--line); border-radius: calc(18*var(--u)); margin-bottom: calc(12*var(--u)); box-shadow: 0 calc(1*var(--u)) calc(2*var(--u)) var(--shadow), 0 calc(2*var(--u)) calc(6*var(--u)) var(--shadow); }
.bd-card.lift { z-index: 3; box-shadow: 0 calc(4*var(--u)) calc(12*var(--u)) var(--shadow), 0 calc(8*var(--u)) calc(20*var(--u)) var(--shadow); }
.bd-chd { display: flex; align-items: center; padding-left: calc(4*var(--u)); }
.bd-drag { width: calc(48*var(--u)); min-height: calc(56*var(--u)); align-self: stretch; display: grid; place-items: center; flex: none; color: var(--muted); touch-action: none; cursor: grab; }
.bd-drag svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-ctoggle { flex: 1; min-width: 0; min-height: calc(56*var(--u)); display: flex; align-items: center; text-align: left; }
.bd-ctx { flex: 1; min-width: 0; display: block; padding: calc(8*var(--u)) 0; }
.bd-ctx b { display: block; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); color: var(--text); }
.bd-ctx small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.bd-chev { display: grid; place-items: center; width: calc(40*var(--u)); height: calc(24*var(--u)); flex: none; color: var(--muted); margin-right: calc(13*var(--u)); }
.bd-chev svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-cbody { padding: 0 calc(16*var(--u)); }
.bd-sets { padding-top: calc(8*var(--u)); }
.bd-sh, .bd-sr { display: grid; grid-template-columns: calc(56*var(--u)) minmax(0, 1fr) minmax(0, 1fr) calc(48*var(--u)); align-items: center; }
.bd-sets.rng .bd-sh, .bd-sets.rng .bd-sr { grid-template-columns: calc(56*var(--u)) minmax(0, 1fr) minmax(0, 1.6fr) calc(48*var(--u)); }
.bd-sh { height: calc(16*var(--u)); }
.bd-sh span { text-align: center; font: 500 calc(11*var(--u))/calc(16*var(--u)) var(--body); letter-spacing: calc(.5*var(--u)); color: var(--muted); }
.bd-sr { padding: calc(4*var(--u)) 0; }
.bd-bw { display: block; padding: 0 calc(4*var(--u)); }
.bd-badge { width: 100%; height: calc(56*var(--u)); display: flex; align-items: center; justify-content: center; border: calc(1*var(--u)) solid var(--line); border-radius: calc(8*var(--u)); color: var(--text); }
.bd-badge b { font: 700 calc(12*var(--u))/calc(16*var(--u)) var(--body); }
.bd-badge i { display: grid; width: calc(16*var(--u)); height: calc(16*var(--u)); }
.bd-badge i svg { width: calc(16*var(--u)); height: calc(16*var(--u)); }
.bd-cell { display: block; padding: 0 calc(2*var(--u)); min-width: 0; }
.bd-cell input { display: block; width: 100%; height: calc(56*var(--u)); border: calc(1*var(--u)) solid var(--line); border-radius: calc(8*var(--u)); background: transparent; padding: 0 calc(6*var(--u)); text-align: center; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--text); outline: none; caret-color: var(--primary); }
.bd-cell input:focus { border-color: var(--primary); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--primary); }
.bd-rg { display: grid; grid-template-columns: minmax(0, 1fr) calc(10*var(--u)) minmax(0, 1fr); align-items: center; }
.bd-rg em { font-style: normal; text-align: center; color: var(--muted); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.bd-x { width: calc(48*var(--u)); height: calc(48*var(--u)); display: grid; place-items: center; color: var(--text); }
.bd-x svg { width: calc(16*var(--u)); height: calc(16*var(--u)); }
.bd-x:disabled { opacity: .38; cursor: default; }
.bd-addset { margin-top: calc(4*var(--u)); height: calc(48*var(--u)); padding: 0 calc(12*var(--u)); display: inline-flex; align-items: center; gap: calc(8*var(--u)); color: var(--primary); font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.bd-addset i { display: grid; width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-addset i svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-hr { margin: calc(4*var(--u)) 0 0; border: 0; border-top: calc(1*var(--u)) solid var(--line); }
.bd-nrow { display: flex; align-items: center; width: 100%; min-height: calc(48*var(--u)); padding: 0 calc(16*var(--u)); color: var(--muted); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); text-align: left; }
.bd-nrow i { display: grid; width: calc(18*var(--u)); height: calc(18*var(--u)); margin-right: calc(8*var(--u)); }
.bd-nrow i svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.bd-nrow.in { padding: calc(8*var(--u)) calc(16*var(--u)); }
.bd-nrow.in input { width: 100%; height: calc(56*var(--u)); border: calc(1*var(--u)) solid var(--outline); border-radius: calc(4*var(--u)); background: transparent; padding: 0 calc(16*var(--u)); font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); outline: none; }
.bd-nrow.in input:focus { border-color: var(--primary); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--primary); }
.bd .bd-dash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bd .bd-dash rect { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: calc(18*var(--u)); fill: none; stroke: var(--primary); stroke-opacity: .4; stroke-width: calc(1*var(--u)); stroke-dasharray: calc(10*var(--u)) calc(6*var(--u)); }
.bd-addrow { position: relative; width: 100%; min-height: calc(56*var(--u)); margin-bottom: calc(12*var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8*var(--u)); color: var(--primary); font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); border-radius: calc(18*var(--u)); }
.bd-addrow i { display: grid; width: calc(22*var(--u)); height: calc(22*var(--u)); }
.bd-addrow i svg { width: calc(22*var(--u)); height: calc(22*var(--u)); }
.bd-empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(24*var(--u)); border-radius: calc(18*var(--u)); }
.bd-ei { display: grid; width: calc(40*var(--u)); height: calc(40*var(--u)); color: var(--muted); }
.bd-ei svg { width: calc(40*var(--u)); height: calc(40*var(--u)); }
.bd-empty b { margin-top: calc(8*var(--u)); font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); color: var(--text); }
.bd-empty p { margin: calc(4*var(--u)) 0 calc(16*var(--u)); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8*var(--u)); min-height: calc(48*var(--u)); padding: 0 calc(24*var(--u)); border-radius: 99px; background: var(--fill); color: var(--on-fill); font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); white-space: nowrap; }
.bd-btn i { display: grid; width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-btn i svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-btn:disabled { background: color-mix(in srgb, var(--text) 12%, transparent); color: color-mix(in srgb, var(--text) 38%, transparent); cursor: default; }
.bd-btn.out { background: transparent; border: calc(1*var(--u)) solid var(--outline); color: var(--primary); min-height: calc(52*var(--u)); padding: 0 calc(20*var(--u)) 0 calc(16*var(--u)); }
.bd-btn.save { min-height: calc(52*var(--u)); }
.bd-btn.wide { width: 100%; }
.bd-btn.grow { flex: 1; min-height: calc(52*var(--u)); }
.bd-bar { flex: none; background: var(--bg); border-top: calc(1*var(--u)) solid var(--line); }
.bd-bin { display: flex; align-items: center; justify-content: space-between; gap: calc(12*var(--u)); padding: calc(12*var(--u)) calc(16*var(--u)); }
.bd-sbt { flex: 1; min-width: 0; }
.bd-sbt span { display: block; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--text); }
.bd-sbt small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.bd-sbt.why { display: flex; align-items: center; }
.bd-sbt.why i { display: grid; width: calc(18*var(--u)); height: calc(18*var(--u)); margin-right: calc(8*var(--u)); flex: none; color: var(--text); }
.bd-sbt.why i svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
/* the picker: a full-height sheet */
.bd-pv { background: var(--bg); }
.bd-dim { position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: 0; }
.bd-pv > .sb { position: relative; z-index: 1; }
.bd-sheet { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); border-radius: calc(28*var(--u)) calc(28*var(--u)) 0 0; overflow: hidden; color: var(--text); }
.bd-grab { flex: none; height: calc(48*var(--u)); display: grid; place-items: center; }
.bd-grab i { display: block; width: calc(32*var(--u)); height: calc(4*var(--u)); border-radius: calc(2*var(--u)); background: color-mix(in srgb, var(--muted) 40%, transparent); }
.bd-pt { flex: none; display: flex; align-items: center; padding: 0 calc(4*var(--u)) 0 calc(16*var(--u)); margin-top: calc(-8*var(--u)); }
.bd-pt h1 { flex: 1; margin: 0; padding: calc(8*var(--u)) 0; font: 700 calc(22*var(--u))/calc(28*var(--u)) var(--head); letter-spacing: .06em; text-transform: uppercase; }
.bd-ps { flex: none; padding: calc(12*var(--u)) calc(16*var(--u)); }
.bd-search { display: flex; align-items: center; height: calc(56*var(--u)); padding: 0 calc(10*var(--u)); background: var(--card); border: calc(1*var(--u)) solid var(--line); border-radius: 99px; }
.bd-search:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 calc(1*var(--u)) var(--primary); }
.bd-search i, .bd-search .sx { display: grid; place-items: center; width: calc(24*var(--u)); height: calc(24*var(--u)); flex: none; color: var(--muted); }
.bd-search svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-search input { flex: 1; min-width: 0; margin: 0 calc(16*var(--u)) 0 calc(18.5*var(--u)); border: 0; background: none; outline: none; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); caret-color: var(--primary); padding: 0; }
.bd-search input::placeholder { color: var(--muted); opacity: 1; }
.bd-fcs { flex: none; display: flex; align-items: center; gap: calc(8*var(--u)); height: calc(48*var(--u)); padding: 0 calc(16*var(--u)); overflow-x: auto; scrollbar-width: none; }
.bd-fc { flex: none; height: calc(32*var(--u)); padding: 0 calc(14*var(--u)); border-radius: calc(8*var(--u)); border: calc(1*var(--u)) solid color-mix(in srgb, var(--outline) 65%, var(--bg)); font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); display: inline-flex; align-items: center; white-space: nowrap; }
.bd-fc.menu { padding: 0 calc(8*var(--u)) 0 calc(14*var(--u)); gap: calc(4*var(--u)); }
.bd-fc.menu i { display: grid; width: calc(20*var(--u)); height: calc(20*var(--u)); margin-left: calc(2*var(--u)); }
.bd-fc.menu i svg { width: calc(20*var(--u)); height: calc(20*var(--u)); }
.bd-fc.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.bd-cs { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(56*var(--u)); padding: calc(8*var(--u)) calc(4*var(--u)) 0 calc(16*var(--u)); font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.bd-cs b { font-weight: 500; }
.bd-plist { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.bd-li { position: relative; display: flex; align-items: center; min-height: calc(72*var(--u)); padding: calc(8*var(--u)) calc(16*var(--u)); cursor: pointer; }
.bd-li + .bd-li { margin-top: calc(1*var(--u)); }
.bd-li + .bd-li::before { content: ""; position: absolute; left: calc(16*var(--u)); right: calc(16*var(--u)); top: calc(-1*var(--u)); height: calc(1*var(--u)); background: var(--line); }
.bd-li.on { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.bd-li .av { width: calc(40*var(--u)); height: calc(40*var(--u)); border-radius: 50%; background: var(--sv); display: grid; place-items: center; flex: none; margin-right: calc(16*var(--u)); color: var(--text); }
.bd-li .av svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-li .grow { flex: 1; min-width: 0; }
.bd-li .nm { display: block; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); }
.bd-li .nm mark { background: none; color: var(--primary); }
.bd-li small { display: block; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.bd-li .sc { width: calc(28*var(--u)); height: calc(28*var(--u)); border-radius: 50%; border: calc(2*var(--u)) solid var(--outline); display: grid; place-items: center; flex: none; margin-left: calc(16*var(--u)); color: var(--on-primary); }
.bd-li.on .sc { background: var(--primary); border-color: var(--primary); }
.bd-li .sc svg { width: calc(18*var(--u)); height: calc(18*var(--u)); }
.bd-nores { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(8*var(--u)); padding: calc(48*var(--u)) calc(24*var(--u)); color: var(--muted); font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
.bd-nores i { display: grid; width: calc(48*var(--u)); height: calc(48*var(--u)); }
.bd-nores i svg { width: calc(48*var(--u)); height: calc(48*var(--u)); }
.bd-nores b { font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); color: var(--text); }
.bd-nores .bd-btn { margin-top: calc(8*var(--u)); }
.bd-pbar { flex: none; display: flex; align-items: center; gap: calc(12*var(--u)); padding: calc(12*var(--u)) calc(16*var(--u)); border-top: calc(1*var(--u)) solid var(--line); }
/* menus, sheets, dialogs */
.bd-mback { position: absolute; inset: 0; z-index: 30; background: transparent; width: 100%; height: 100%; }
.bd-menuw { position: absolute; z-index: 31; }
.bd-menu { min-width: calc(112*var(--u)); max-width: calc(280*var(--u)); max-height: calc(340*var(--u)); overflow-y: auto; scrollbar-width: none; padding: calc(8*var(--u)) 0; background: var(--card); border-radius: calc(4*var(--u)); box-shadow: 0 calc(4*var(--u)) calc(12*var(--u)) var(--shadow), 0 0 0 calc(1*var(--u)) var(--line); }
.bd-menu button { display: flex; align-items: center; width: 100%; height: calc(48*var(--u)); padding: 0 calc(12*var(--u)); font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); text-align: left; white-space: nowrap; }
.bd-menu button.sel { color: var(--primary); }
.bd-menu button > i { display: grid; width: calc(24*var(--u)); height: calc(24*var(--u)); flex: none; }
.bd-menu button > i svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-menu button > i:first-child { margin-right: calc(12*var(--u)); }
.bd-menu button > i:last-child:not(:first-child) { margin-left: auto; padding-left: calc(12*var(--u)); box-sizing: content-box; }
.bd-scrim { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(0,0,0,.32); }
.bd-scrim.mid { align-items: center; justify-content: center; }
.bd-sback { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.bd-sh2 { position: relative; width: 100%; max-height: calc(100% - calc(48*var(--u))); overflow-y: auto; scrollbar-width: none; background: var(--bg); border-radius: calc(28*var(--u)) calc(28*var(--u)) 0 0; padding: 0 calc(16*var(--u)) calc(44*var(--u)); color: var(--text); }
.bd-sh2 .bd-grab { margin: 0 calc(-16*var(--u)); }
.bd-sh2 h2 { margin: 0; font: 600 calc(16*var(--u))/calc(22*var(--u)) var(--head); }
.bd-sh2 .sub { margin: calc(4*var(--u)) 0 0; font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.bd-sh2 .grow { flex: 1; min-width: 0; }
.bd-qcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8*var(--u)); margin-top: calc(16*var(--u)); }
.bd-qc { min-height: calc(48*var(--u)); display: grid; place-items: center; border-radius: 99px; border: calc(1*var(--u)) solid var(--outline); color: var(--muted); font: 600 calc(14*var(--u))/calc(20*var(--u)) var(--body); font-variant-numeric: tabular-nums; }
.bd-qc.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.bd-hr2 { margin: 0; border: 0; border-top: calc(1*var(--u)) solid var(--line); }
.bd-qcs + .bd-hr2 { margin-top: calc(12*var(--u)); }
.bd-step { display: flex; align-items: center; padding: calc(8*var(--u)) 0; }
.bd-step .grow span { display: block; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.bd-step small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.bd-oib { width: calc(40*var(--u)); height: calc(40*var(--u)); border-radius: 50%; border: calc(1*var(--u)) solid var(--outline); display: grid; place-items: center; color: var(--text); flex: none; }
.bd-oib svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-oib:disabled { opacity: .38; cursor: default; }
.bd-step b { width: calc(80*var(--u)); text-align: center; font: 600 calc(22*var(--u))/calc(28*var(--u)) var(--body); font-variant-numeric: tabular-nums; }
.bd-cr { display: flex; align-items: center; width: 100%; min-height: calc(56*var(--u)); text-align: left; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); }
.bd-cr span { flex: 1; }
.bd-cb { display: grid; place-items: center; width: calc(18*var(--u)); height: calc(18*var(--u)); margin: 0 calc(11*var(--u)); border: calc(2*var(--u)) solid var(--outline); border-radius: calc(2*var(--u)); color: var(--on-primary); box-sizing: border-box; }
.bd-cb.on { background: var(--primary); border-color: var(--primary); }
.bd-cb svg { width: calc(14*var(--u)); height: calc(14*var(--u)); }
.bd-btn.done { margin-top: calc(16*var(--u)); min-height: calc(52*var(--u)); }
.bd-fos { margin-top: calc(4*var(--u)); }
.bd-fo { display: flex; align-items: center; width: 100%; min-height: calc(56*var(--u)); text-align: left; }
.bd-fo .fi { display: grid; width: calc(24*var(--u)); height: calc(24*var(--u)); color: var(--muted); flex: none; }
.bd-fo .fi svg { width: calc(24*var(--u)); height: calc(24*var(--u)); }
.bd-fo.on .fi { color: var(--primary); }
.bd-fo .grow { padding: calc(8*var(--u)) calc(12*var(--u)); }
.bd-fo b { display: block; font: 400 calc(16*var(--u))/calc(24*var(--u)) var(--body); color: var(--text); }
.bd-fo.on b { color: var(--primary); }
.bd-fo small { display: block; font: 400 calc(12*var(--u))/calc(16*var(--u)) var(--body); color: var(--muted); }
.bd-fo .rb { width: calc(20*var(--u)); height: calc(20*var(--u)); margin: 0 calc(10*var(--u)); border-radius: 50%; border: calc(2*var(--u)) solid var(--outline); box-sizing: border-box; flex: none; }
.bd-fo .rb.on { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 calc(4.5*var(--u)), transparent calc(5*var(--u))); }
.bd-dlg { position: relative; width: 100%; max-width: calc(560*var(--u)); margin: 0 calc(24*var(--u)); background: var(--sv); border-radius: calc(28*var(--u)); padding: calc(24*var(--u)); color: var(--text); }
.bd-dlg h2 { margin: 0 0 calc(16*var(--u)); font: 400 calc(22*var(--u))/calc(28*var(--u)) system-ui, -apple-system, Roboto, "Segoe UI", sans-serif; color: var(--text); }
.bd-dt { font: 400 calc(14*var(--u))/calc(20*var(--u)) var(--body); color: var(--muted); }
.bd-dt p { margin: 0; }
.bd-dt ul { list-style: none; margin: calc(8*var(--u)) 0 0; padding: 0; }
.bd-dt li { display: flex; margin-bottom: calc(8*var(--u)); }
.bd-dt li span:first-child { width: calc(16*var(--u)); flex: none; }
.bd-dt .u { margin-top: calc(12*var(--u)); }
.bd-db { display: flex; justify-content: flex-end; gap: calc(8*var(--u)); margin-top: calc(24*var(--u)); }
.bd-db button { height: calc(40*var(--u)); padding: 0 calc(12*var(--u)); border-radius: 99px; color: var(--primary); font: 560 calc(14*var(--u))/calc(20*var(--u)) var(--body); }
/* ---- end routine builder (.bd-) ---- */

/* ---- timed builder (.bt-): feature/timed/{TimedClockCard,ClockParts,PlanCard,TimedExerciseBody,TermInfoSheet}.kt and routines/RoutineExerciseCard.kt, in dp inside a .bt block ---- */
/* The block zooms to the demo phone's scale (1 CSS px = 1 dp of the 411 dp phone); set --bt-zoom: 1 on a column that is already zoomed. */
.bt { zoom: var(--bt-zoom, .93333); font: 400 14px/20px var(--body); color: var(--text); }
.bt, .bt *, .bt *::before, .bt *::after { box-sizing: border-box; }
.bt svg { display: block; flex: none; }
.bt button { text-align: inherit; }
.bt b { font-weight: 600; }
.bt-ug { display: inline-block; width: .118em; font-style: normal; }
.bt-sl { margin: 16px 0 8px; font: 500 14px/16px var(--body); letter-spacing: .1em; color: var(--muted); }
.bt-card { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 4px var(--shadow); }
.bt-clk { padding: 7px 16px 8px; }
.bt-div { height: 1px; background: var(--line); }
/* the format bar (SegmentedBar: a 40 dp pill drawn 4 dp in from a 48 dp touch height) */
.bt-seg, .bt-seg2 { display: flex; height: 48px; padding: 4px 0; }
.bt-seg2 { margin-top: 0; }
.bt-segin { flex: 1; display: flex; border: 1px solid var(--outline); border-radius: 99px; overflow: hidden; }
.bt-segin button { flex: 1; min-width: 0; text-align: center !important; font: 500 14px/20px var(--body); color: var(--muted); }
.bt-segin button + button { border-left: 1px solid var(--outline); }
.bt-segin button[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.bt-line { display: flex; align-items: center; margin-top: 6px; padding-bottom: 2px; }
.bt-sl + .bt-card { margin-top: -1px; }
.bt-line p { flex: 1; min-width: 0; margin: 0; padding-left: 4px; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-ib { width: 48px; height: 48px; display: grid; place-items: center; flex: none; color: var(--muted); }
.bt-ib svg { width: 20px; height: 20px; }
/* rows of the clock card */
.bt-pad { padding: 8px 0; }
.bt-t { font: 400 16px/24px var(--body); color: var(--text); }
.bt-t2 { font: 400 14px/20px var(--body); color: var(--muted); }
.bt-h { margin-top: -2px; font: 400 12px/16px var(--body); color: var(--muted); }
.bt-row { display: flex; align-items: center; width: 100%; min-height: 64px; gap: 8px; }
.bt-rt { flex: 1; min-width: 0; padding: 8px 0; }
.bt-swrow { text-align: left !important; }
.bt-sub { min-height: 56px; padding-left: 16px; position: relative; }
.bt-sub::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: color-mix(in srgb, var(--primary) 60%, transparent); }
.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bt-cw { height: 48px; display: flex; align-items: center; }
.bt-chip { height: 32px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line); font: 500 14px/30px var(--body); color: var(--muted); white-space: nowrap; }
.bt-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.bt-st { display: flex; align-items: center; flex: none; }
.bt-sb { width: 48px; height: 48px; display: grid; place-items: center; flex: none; color: var(--text); }
.bt-sb i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--text); display: grid; place-items: center; }
.bt-sb svg { width: 24px; height: 24px; }
.bt-sb[disabled] { cursor: default; opacity: 1; color: var(--muted); }
.bt-sb[disabled] i { border-color: var(--muted); opacity: .6; }
.bt-cell { display: block; height: 56px; padding: 0 2px; }
.bt-dur { width: 76px; }
.bt-in { width: 100%; height: 56px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); text-align: center; font: 400 16px/24px var(--body); padding: 0 6px; outline: 0; font-variant-numeric: tabular-nums; }
.bt-in:focus { border: 2px solid var(--primary); }
.bt-cnt { min-width: 56px; display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 0 4px; }
.bt-cnt.wide { min-width: 88px; }
.bt-cnt b { font: 600 22px/28px var(--body); }
.bt-cnt u { text-decoration: none; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-sw { width: 52px; height: 32px; border-radius: 99px; flex: none; position: relative; background: var(--sv); border: 2px solid var(--outline); }
.bt-sw i { position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--outline); display: grid; place-items: center; }
.bt-sw[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.bt-sw[aria-checked="true"] i { left: 22px; top: 50%; width: 24px; height: 24px; margin-top: -12px; margin-left: -4px; background: var(--on-primary); color: var(--primary); }
.bt-sw i svg { width: 16px; height: 16px; }
/* the plan card */
.bt-pw { margin-top: 4px; }
.bt-plan { padding: 12px; margin-top: 4px; }
.bt-ph { display: flex; align-items: flex-start; }
.bt-cap { font: 400 11px/16px var(--body); letter-spacing: .08em; color: var(--muted); }
.bt-big { font: 600 22px/28px var(--body); color: var(--text); }
.bt-side { flex: 1; min-width: 0; padding: 4px 0 0 8px; text-align: right; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-pl { margin-top: 4px; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-pl b { font-weight: 600; color: var(--text); }
.bt-plan .tm-strip { margin-top: 8px; }
.bt-lead { margin-top: 8px; font: 400 12px/16px var(--body); color: var(--muted); }
/* the exercise cards */
.bt-ex { margin-bottom: 12px; position: relative; }
.bt-ex.bt-lift { z-index: 3; box-shadow: inset 0 0 0 1px var(--line), 0 4px 10px var(--shadow); }
.bt-eh { display: flex; align-items: center; padding-left: 4px; }
.bt-dh { width: 48px; height: 48px; display: grid; place-items: center; flex: none; color: var(--muted); touch-action: none; cursor: grab; }
.bt-dh svg { width: 24px; height: 24px; }
.bt-em { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; }
.bt-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--sv); display: grid; place-items: center; flex: none; margin: 0 12px 0 4px; font: 700 14px/20px var(--body); color: var(--text); }
.bt-en { flex: 1; min-width: 0; padding: 8px 0; display: flex; flex-direction: column; }
.bt-en > b { font: 600 16px/22px var(--head); color: var(--text); overflow-wrap: anywhere; }
.bt-en > span { font: 400 14px/20px var(--body); color: var(--muted); }
.bt-en > span b { font-weight: 600; color: var(--text); }
.bt-chev { padding: 0 8px; color: var(--muted); }
.bt-chev svg { width: 24px; height: 24px; }
.bt-mw { position: relative; flex: none; }
.bt-mb { width: 48px; height: 48px; display: grid; place-items: center; color: var(--muted); }
.bt-mb svg { width: 24px; height: 24px; }
.bt-menu { position: absolute; z-index: 6; right: 8px; top: 44px; min-width: 190px; padding: 8px 0; background: var(--card); border-radius: 4px; box-shadow: 0 2px 8px var(--shadow), 0 0 0 1px var(--line); }
.bt-menu button { display: block; width: 100%; height: 48px; padding: 0 12px; font: 400 16px/24px var(--body); color: var(--text); text-align: left; }
.bt-xb { padding: 0 16px; }
.bt-sline { margin-bottom: 8px; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-sline b { font-weight: 600; color: var(--text); }
.bt-fl { display: block; font: 400 11px/16px var(--body); color: var(--muted); text-transform: uppercase; }
.bt-tc { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-tw { min-height: 48px; display: flex; align-items: center; }
.bt-tchip { display: block; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); font: 500 14px/20px var(--body); }
.bt-fr { display: flex; gap: 12px; margin-top: 12px; padding-bottom: 12px; }
.bt-fc { flex: 1; min-width: 0; display: block; }
.bt-fc .bt-cell { margin-top: 4px; }
.bt-hr { height: 1px; background: var(--line); margin-top: 4px; }
.bt-addnote { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-addnote svg { width: 18px; height: 18px; }
.bt-nf { padding: 8px 16px; }
.bt-note { width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 4px; background: transparent; font: 400 16px/24px var(--body); color: var(--text); outline: 0; }
.bt-note:focus { border: 2px solid var(--primary); }
/* the empty state, the banner and the add row */
.bt .bt-dash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bt .bt-dash rect { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: 17.5px; ry: 17.5px; fill: none; stroke: color-mix(in srgb, var(--primary) 40%, transparent); stroke-width: 1px; stroke-dasharray: 10 6; }
.bt-empty { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px; text-align: center; }
.bt-ei { color: var(--muted); }
.bt-ei svg { width: 40px; height: 40px; }
.bt-et { margin-top: 8px; font: 600 16px/22px var(--head); color: var(--text); }
.bt-eb { margin: 4px 0 16px; font: 400 14px/20px var(--body); color: var(--muted); }
.bt-btn { height: 48px; padding: 0 24px 0 16px; border-radius: 99px; background: var(--fill); color: var(--on-fill); display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--body); }
.bt-btn svg { width: 20px; height: 20px; }
.bt-addrow { position: relative; width: 100%; min-height: 56px; margin-bottom: 12px; padding: 0 16px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--primary); font: 500 14px/20px var(--body); }
.bt-addrow svg:not(.bt-dash) { width: 22px; height: 22px; }
.bt-need { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.bt-need > span { color: var(--primary); }
.bt-need svg { width: 24px; height: 24px; }
.bt-nt { font: 500 14px/20px var(--body); letter-spacing: .06em; color: var(--primary); }
.bt-nb { font: 400 14px/20px var(--body); color: var(--muted); }
/* "What do these mean?", the one-time pill under the type bar (GlossaryPill) */
.bt-pill { zoom: var(--bt-zoom, .93333); display: flex; align-items: center; margin-top: 12px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); font: 400 14px/20px var(--body); }
.bt-pill *, .bt-pill { box-sizing: border-box; }
.bt-po { flex: 1; min-width: 0; height: 46px; display: flex; align-items: center; padding: 0 8px 0 12px; color: var(--primary); }
.bt-po svg { width: 24px; height: 24px; }
.bt-po span { padding: 8px 0 8px 8px; font: 600 16px/22px var(--head); }
.bt-pc { width: 46px; height: 46px; display: grid; place-items: center; color: var(--muted); margin-right: 1px; }
.bt-pc svg { width: 20px; height: 20px; }

/* ---- routine lists: Library > My routines, the Workout tab's Routines, the ⋮ menu, Move to folder (rl-) ---- */
.rl-tile { width: 40px; height: 40px; margin-right: 8px; border-radius: 12px; background: var(--sv); display: grid; place-items: center; color: var(--muted); flex: none; }
.rl-tile svg { width: 22px; height: 22px; }
.rrow.rl-loose, .rrow.tm-lrow { padding-left: 16px; }
.rrow.tm-lrow.rl-in { padding-left: 64px; }
.rrow .grow { min-width: 0; }
.wk-routines .rr.loose { padding-left: calc(16*var(--u)); }
.rl-mback { position: absolute; inset: 0; z-index: 60; background: transparent; }
.rl-mpos { position: absolute; z-index: 61; }
.rl-menu { zoom: .93333; min-width: 112px; max-width: 280px; padding: 8px 0; background: var(--card); border-radius: 4px; box-shadow: 0 4px 12px var(--shadow), 0 0 0 1px var(--line); }
.rl-mi { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; font: 400 16px/24px var(--body); color: var(--text); white-space: nowrap; text-align: left; }
.rl-mi .ic { display: grid; width: 24px; height: 24px; flex: none; }
.rl-mi svg { width: 24px; height: 24px; }
.rl-mi.danger { color: var(--danger); }
.rl-menu hr { margin: 0; border: 0; border-top: 1px solid var(--line); }
.rl-move { max-height: 80%; display: flex; flex-direction: column; }
.rl-mtl { overflow-y: auto; margin: 0 0 14px; }
.rl-mt { display: block; width: 100%; min-height: 48px; padding: 8px 0; text-align: left; font: 400 16px/24px var(--body); color: var(--text); }
.rl-mt.on { color: var(--primary); }
.rl-tile2 .rl-ld { margin-top: 4px; font: 400 14px/20px var(--body); color: color-mix(in srgb, var(--on-fill) 70%, transparent); }
.rl-tile2 .fg .c { flex: 1 1 auto; }
.rl-ftag { cursor: default; padding: 0 10px; letter-spacing: .1em; }
.rl-xh { display: flex; align-items: center; margin: 4px 0 -4px; }
.rl-xh h3 { margin: 0; flex: 1; font: 600 16px/22px var(--head); color: var(--primary); text-transform: uppercase; }
.rl-xh button { height: 40px; padding: 0 12px; margin-right: -12px; color: var(--primary); font: 500 14px/20px var(--body); }
.rl-xrow + .rl-xrow { border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.rl-xtop { display: flex; align-items: flex-start; }
.rl-xmain { flex: 1; min-width: 0; display: flex; align-items: flex-start; min-height: 48px; padding: 12px 0 12px 12px; text-align: left; }
.rl-xmain .grow { margin-left: 12px; }
.rl-xmain .nm { font: 500 14px/20px var(--body); }
.rl-xmain .sm { margin-top: 2px; font: 400 12px/16px var(--body); color: var(--muted); }
.rl-play { width: 48px; height: 48px; display: grid; place-items: center; flex: none; }
.rl-play span { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--outline); display: grid; place-items: center; color: var(--muted); }
.rl-play svg { width: 16px; height: 16px; }
.rl-sets { padding: 0 16px 8px 52px; }
.rl-sets > div { display: flex; padding: 2px 0; font: 400 14px/20px var(--body); }
.rl-sets > div > i:first-child { font-style: normal; min-width: 30px; padding-right: 4px; color: var(--muted); }
.rl-hint { margin: 0; padding: 0 4px; font: 400 12px/16px var(--body); color: var(--muted); }