/* REPIN — premium minimal. Cool neutral ground, hairline borders, graphite ink.
   The workout colour (--wc) is the only accent; the interface accent (ink in
   light, teal in dark) carries focus, selection and glow. */

:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --border: #E5E8EE;
  --line: #E5E8EE;        /* referenced 27 times and never defined — those borders were falling back to the text colour */
  --border-strong: #D2D7E0;
  --ink: #12151A;
  --ink-2: #5F6774;
  --ink-3: #667080;         /* 5.0:1 on white, 4.75:1 on surface-2 — small labels stay readable */
  --danger: #DC2626;
  --accent: #12151A;        /* interface accent: ink in light, teal in dark */
  --accent-ink: #FFFFFF;    /* text/icons on top of the accent */
  --accent-glow: rgba(18, 21, 26, 0.18);
  --surface-2: #F8F9FB;     /* hover / subtle raised surface */
  --hover: rgba(18, 21, 26, 0.05);
  --seg-bg: #E9ECF1;        /* segmented + progress tracks */
  --switch-off: #CBD2DC;
  --overlay-bg: rgba(18, 21, 26, 0.42);
  --tabbar-bg: rgba(255, 255, 255, 0.82);
  --toast-bg: rgba(18, 21, 26, 0.92);
  --toast-ink: #F4F5F7;
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 38%);
  --wc: #F97316; /* overridden per workout */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(18, 21, 26, 0.05), 0 1px 1px rgba(18, 21, 26, 0.03);
  --shadow-hover: 0 6px 18px -6px rgba(18, 21, 26, 0.16), 0 2px 4px rgba(18, 21, 26, 0.05);
  --shadow-lift: 0 18px 44px -12px rgba(18, 21, 26, 0.28);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;   /* press, hover, focus */
  --dur: 220ms;        /* fades, view entrance */
  --dur-slow: 320ms;   /* sheets, springs */
  --radius-lg: 18px;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --tabbar-h: 58px;
  /* Spacing scale — every gap in the app comes from here */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: light; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; } /* textarea was missing — Coach box and note fields fell back to monospace */
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* ---------------- Layout ---------------- */

#app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; min-width: 0; }

#sidebar {
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  position: sticky; top: 0; height: 100dvh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; }
.brand-mark { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.brand-ver { font-size: 11px; color: var(--ink-3); font-weight: 500; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 14.5px; font-weight: 550;
  border: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) { .nav-item:hover { color: var(--ink); background: var(--hover); } }
.nav-item.active { color: var(--ink); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.nav-item.active .icon { color: var(--accent); }

#view { --gutter: 28px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 28px var(--gutter) 64px; min-width: 0; }

#tabbar { display: none; }

html.route-runner #sidebar, html.route-runner #tabbar { display: none; }
html.route-runner #app { grid-template-columns: 1fr; }

@media (max-width: 899px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #sidebar { display: none; }
  #view { --gutter: 16px; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 40px); }
  #tabbar {
    display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--tabbar-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.route-runner #view { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0 6px; font-size: 10.5px; font-weight: 550; color: var(--ink-3);
  }
  .tab-item.active { color: var(--ink); }
  .tab-item.active .icon { color: var(--accent); }
}

/* ---------------- Icons ---------------- */

.icon { display: inline-flex; width: 20px; height: 20px; flex: none; }
.icon svg { width: 100%; height: 100%; }
.icon.soft { color: var(--ink-3); }
.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--ink-2);
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--hover); color: var(--ink); } }

/* ---------------- Page headers ---------------- */

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.page-sub { color: var(--ink-2); font-size: 14.5px; margin-top: 5px; line-height: 1.4; }
.row-between { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.builder-head { display: flex; align-items: center; gap: 8px; }
/* the title block takes the width; anything after it (History's Share card)
   sits flush with the right content edge, and a long workout name wraps
   inside the space that is left instead of pushing the button off the line */
.builder-head-main { flex: 1 1 auto; min-width: 0; }
.builder-head-main h1 { font-size: 22px; overflow-wrap: break-word; }
.builder-autosave { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.prog-needs { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.prog-needs .icon { width: 15px; height: 15px; flex: none; }
.work-pause-row { margin-top: 4px; }
/* +30 sec on a running or paused hold: one full-width control under the clock, at least 44px tall, in the workout
   colour so it reads as part of the clock rather than as another transition button; the total it made and the
   saving state sit between the clock and the button, in place, so a tap never lands on a redrawn screen */
.work-extend-row { width: 100%; margin-top: -4px; }
.work-extend-row .extend-btn {
  width: 100%; min-height: 50px; font-weight: 750; font-variant-numeric: tabular-nums;
  border-color: color-mix(in srgb, var(--wc, var(--accent)) 55%, var(--border));
  color: var(--wc, var(--accent));
}
.work-extend-row .extend-btn:disabled { color: var(--ink-3); border-color: var(--border); }
.extend-total { min-height: 1.2em; }
.extend-total:empty, .extend-pending:empty { display: none; }
.extend-pending { color: var(--ink-3); }
.extend-failed { width: 100%; text-align: left; flex-wrap: wrap; }
.extend-failed .btn { flex: 0 0 auto; }
.ctrl-scope { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ctrl-scope .ctrl-hint { flex: 1 1 200px; }
.section-title { font-size: 13.5px; font-weight: 650; color: var(--ink-2); margin: 28px 0 10px; }
.section-title.tight { margin: 0 0 12px; }
.eyebrow {
  font-size: 12.5px; font-weight: 650; letter-spacing: 0; color: var(--ink-3);
}
.eyebrow.wc { color: var(--wc); }

/* ---------------- Cards ---------------- */

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack.tight { gap: var(--sp-2); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  position: relative; text-align: left;
}
.card.spine::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--wc);
}
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
/* the status pill keeps one line and its own width; the title column is the part that may shrink.
   "Ended early" was wrapping mid-phrase inside the pill and making it two lines tall. */
.card-top > :first-child { min-width: 0; flex: 1 1 auto; }
.card-top > .done-badge { flex: 0 0 auto; }
.card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.card-title.link { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .card-title.link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.card-meta { color: var(--ink-2); font-size: 13.5px; }
.card-meta.soft { color: var(--ink-3); }

.done-badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; /* never wrap the status */
  font-size: 12px; font-weight: 650; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border);
  padding: 5px 9px; border-radius: 999px;
}
.done-badge .icon { width: 14px; height: 14px; color: var(--wc); }

.preview-list { display: flex; flex-direction: column; }
.preview-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.preview-list li:last-child { border-bottom: none; }
.preview-name { color: var(--ink); }
.preview-sets { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: normal; min-width: 0; }

.rest-day { align-items: flex-start; }
.card:has(> .rest-day) { border-style: dashed; background: var(--surface-2); box-shadow: none; }
.rest-day .card-title { font-size: 20px; }

.workout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
@media (max-width: 680px) { .workout-grid { grid-template-columns: 1fr; } }

.empty-note { color: var(--ink-2); font-size: 14px; padding: 10px 2px; }
.hint-note { color: var(--ink-2); font-size: 13px; }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em;
}
.btn .icon { width: 17px; height: 17px; }
/* Variant colours + every interaction state live in ONE place: see the
   "Buttons — authoritative states" section at the end of this file. */
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
.btn-lg { min-height: 50px; font-size: 16px; }
.btn-xl { min-height: 58px; font-size: 17px; border-radius: 13px; }
.btn-row { display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap; }
.btn-row .grow { flex: 1; }

/* ---------------- Inputs ---------------- */

.field-label { display: block; font-size: 13px; font-weight: 620; color: var(--ink-2); margin: 6px 0 -4px; }
.input {
  width: 100%; min-height: 44px; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 15px;
}
.input:focus { outline: none; border-color: var(--ink); }
.input-title { font-size: 18px; font-weight: 650; }

.colour-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.colour-dot {
  width: 34px; height: 34px; border-radius: 50%; background: var(--wc); flex: none;
  transition: transform 0.1s ease;
}
@media (hover: hover) and (pointer: fine) { .colour-dot:hover { transform: scale(1.08); } }
.colour-dot.selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--wc); }
/* the editor's colour: one swatch and its name, the palette in a sheet when it is to be changed */
.colour-pick {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; padding: 6px 14px 6px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink);
}
.colour-swatch {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--wc);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.colour-pick-name, .colour-pick-change { font-size: 14px; font-weight: 650; line-height: 1.2; }
.colour-pick-change { color: var(--accent); }
/* the palette: six to a row, edge to edge across the sheet, each colour a 44 px target */
.colour-row.colour-palette {
  display: grid; grid-template-columns: repeat(6, 44px); justify-content: space-between; gap: 16px 0;
  padding: 6px 0 10px;
}
.colour-palette .colour-dot { width: 44px; height: 44px; }

.segmented {
  display: inline-flex; background: var(--seg-bg); border-radius: var(--radius-sm); padding: 3px; gap: 2px;
}
.seg-btn {
  padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 620; color: var(--ink-2);
  min-height: 38px;
}
.segmented.small .seg-btn { padding: 6px 12px; font-size: 13px; min-height: 32px; }
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
html.theme-dark .seg-btn.on { background: #2A2F38; }

.chip-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip-row.scroll-x { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chip-row.scroll-x::-webkit-scrollbar { display: none; }
.chip {
  padding: 7px 13px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.weekday-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wd-pill {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
}
.wd-pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.switch-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.switch-label.big-switch { padding: 6px 0; font-weight: 620; }
.switch-input { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--switch-off); position: relative; flex: none; cursor: pointer; transition: background-color 0.15s ease; margin: 0; }
.switch-input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch-input:checked { background: var(--accent); }
.switch-input:checked::after { transform: translateX(18px); }

.sched-pane { display: flex; flex-direction: column; gap: 10px; }
.end-row { padding-top: 4px; }

/* ---------------- Steppers ---------------- */

.stepper { display: inline-flex; align-items: center; gap: 4px; }
.step-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.step-btn:active { background: var(--surface-2); }
.step-btn .icon { width: 16px; height: 16px; }
.step-val {
  min-width: 58px; text-align: center; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stepper-big .step-btn { width: 52px; height: 52px; }
.stepper-big .step-val { font-size: 24px; min-width: 84px; }

.big-stepper { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.big-step-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.big-step-row { display: flex; align-items: center; gap: 14px; }
.big-step-btn {
  width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid var(--border-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.big-step-btn:active { background: var(--surface-2); transform: scale(0.96); }
.big-step-btn .icon { width: 22px; height: 22px; }
.big-step-val {
  min-width: 120px; text-align: center;
  font-size: 44px; font-weight: 760; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Builder ---------------- */

.ex-list { margin-top: 16px; }
.ex-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ex-card.dragging { opacity: 0.92; box-shadow: var(--shadow-lift); z-index: 5; }
.ex-head { display: flex; align-items: center; gap: 8px; }
.drag-handle {
  width: 36px; height: 36px; flex: none; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  /* touch-action must be none from the start. Once iOS has begun a
     scroll the touchmove is no longer cancelable, so the gesture cannot be
     claimed back — it has to be refused before it starts. The grip is a
     dedicated control; a touch anywhere else on the card still scrolls. */
  cursor: grab; touch-action: none; border-radius: 8px;
}
.drag-handle:active { cursor: grabbing; }
.ex-title { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.ex-title h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-tag {
  font-size: 11.5px; font-weight: 650;
  color: var(--ink-3); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; flex: none;
}
.ex-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.ctrl { display: flex; flex-direction: column; gap: 7px; }
.ctrl-full { flex: 1 1 100%; }
.ctrl-label { font-size: 12px; font-weight: 650; color: var(--ink-2); }

.set-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
/* an exercise card's More options: a quiet row under the basics, saying what is set inside while it is put away */
.ex-more-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; text-align: left;
  border-top: 1px solid var(--border); color: var(--ink-2); font-size: 13.5px; font-weight: 650;
}
.ex-more-label { flex: none; }
.ex-more-note {
  flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.ex-more-btn.open .ex-more-note { display: none; }
.ex-more-chev { width: 16px; height: 16px; flex: none; margin-left: auto; transition: transform var(--dur-fast) var(--ease-out); }
.ex-more-btn.open .ex-more-chev { transform: rotate(180deg); }
.ex-more { display: flex; flex-direction: column; gap: 12px; }
.ex-more[hidden] { display: none; }
.set-row {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 6px 2px; border-bottom: 1px solid var(--border);
  text-align: left; font-size: 14px;
}
.set-row:last-child { border-bottom: none; }
.set-open {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 4px 4px 4px 6px; border-radius: 8px; text-align: left;
  min-width: 0;
}
@media (hover: hover) and (pointer: fine) { .set-open:hover { background: var(--surface-2); } }
.set-rep-quick {
  min-width: 44px; min-height: 36px; padding: 4px 10px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); font-weight: 700; font-size: 14.5px;
  font-variant-numeric: tabular-nums; text-align: center; flex: none;
}

.set-rep-input {
  width: 58px; min-height: 36px; padding: 4px 6px; flex: none;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--surface);
  font-weight: 700; font-size: 14.5px; text-align: center;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.set-rep-input::-webkit-outer-spin-button, .set-rep-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.set-rep-word { color: var(--ink-2); font-size: 13px; flex: none; }
.set-n { font-weight: 650; color: var(--ink-3); flex: none; width: 48px; font-variant-numeric: tabular-nums; }
.set-desc { flex: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.add-ex-btn { margin-top: 16px; }

/* Picker */
.picker-list { display: flex; flex-direction: column; max-height: 44dvh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid var(--border); text-align: left;
}
.picker-row:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) { .picker-row:hover { background: var(--surface-2); } }
.picker-row.added { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.picker-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.picker-name { font-size: 14.5px; font-weight: 620; }
.picker-sub { font-size: 12px; color: var(--ink-3); }
/* the runner's swap: the few that fit best, each its name over why it fits, above the whole library */
.swap-suggested { display: flex; flex-direction: column; gap: 8px; }
.swap-suggested[hidden] { display: none; }
.swap-suggested .picker-list { max-height: none; }
.swap-suggested .picker-row { flex-direction: column; align-items: flex-start; gap: 3px; }
/* the whole library under them, each name over what it is, as the suggestions are */
.swap-browse .picker-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.swap-suggested .picker-sub { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }
/* what a suggestion does to the sets, when it does more than keep them: a small tag under why; new sets lit */
.swap-effect {
  margin-top: 3px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; line-height: 1.4;
}
.swap-effect.is-new {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink);
}
.custom-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------------- Runner ---------------- */

.runner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.runner-head { display: flex; flex-direction: column; gap: 12px; }
.runner-head-row { display: flex; align-items: center; gap: 8px; }
.runner-head-mid { flex: 1; text-align: center; min-width: 0; }
.runner-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runner-sub { font-size: 12px; color: var(--ink-2); }
.runner-count { font-size: 13px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.prog { height: 4px; background: var(--seg-bg); border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; width: calc(var(--prog) * 1%); background: var(--wc); border-radius: 999px; transition: width 0.3s ease; }

.runner-main {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 26px 22px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.runner-ex { font-size: 24px; font-weight: 760; letter-spacing: -0.025em; }
.runner-target { font-size: 15px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.runner-prev, .runner-next { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.runner-note { font-size: 13px; font-weight: 650; color: var(--ink-2); }

.giant-clock {
  font-size: clamp(76px, 24vw, 132px); font-weight: 780; letter-spacing: -0.045em;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink);
  padding: 8px 0 2px;
}
.giant-clock.dim { color: var(--ink-3); }
.rest-main { border-color: var(--border); background: var(--surface-2); }
.rest-clock { color: var(--ink-2); }

.done-main { gap: 20px; }
.summary-rows { width: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.summary-row {
  display: flex; align-items: baseline; justify-content: space-between; padding: 12px 2px;
  border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--ink-2);
}
.summary-row strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* set effort (RIR/RPE) and auto-progression */
.effort-row { width: 100%; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: left; }
.effort-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.effort-q { font-size: 14px; font-weight: 650; color: var(--ink); }
.effort-hint { font-size: 12.5px; color: var(--ink-2); }
.effort-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.effort-btn { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.effort-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.effort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-effort { color: var(--ink-3); font-size: 13px; }
.prog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.prog-row.done { opacity: 0.7; }
.prog-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prog-name { font-weight: 700; color: var(--ink); }
.prog-change { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.prog-why { font-size: 13px; color: var(--ink-2); }
.prog-intro { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); }
.prog-actions { display: flex; gap: 6px; flex: none; }
.prog-applied { font-size: 13px; font-weight: 700; color: var(--ink-3); flex: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prog-update { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 4px; border-top: 1px solid var(--border); }
.prog-ctrl { display: flex; flex-direction: column; gap: 8px; }
.ctrl-hint { font-size: 13px; color: var(--ink-2); }
.prog-detail { display: flex; flex-direction: column; gap: 8px; }
.prog-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prog-range .stepper { flex: 0 1 auto; min-width: 0; }
.prog-range-lbl { font-size: 13px; color: var(--ink-2); }
@media (max-width: 360px) { .prog-range { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; } .prog-range .stepper { flex: none; width: 100%; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* workout invites */
.invite-when { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.invite-going { color: var(--ink-2); min-width: 0; overflow-wrap: break-word; }
.invite-card .btn-row { margin-top: 4px; }
.invite-card .card-body { min-width: 0; }
.invite-text { min-width: 0; overflow-wrap: break-word; word-break: normal; } /* user-typed names, notes, workout names: wrap long unbroken tokens, never clip */
.invite-names { display: flex; flex-wrap: wrap; gap: 4px 6px; max-width: 100%; min-width: 0; margin-top: 6px; }
.invite-count { display: block; color: var(--ink); font-weight: 700; }
.invite-updated { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.invite-list { display: flex; flex-direction: column; gap: 6px; }
.invite-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.invite-list-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite-list-name { font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
@media (max-width: 380px) { .invite-list-row { flex-direction: column; align-items: stretch; } .invite-list-row .prog-actions { justify-content: flex-end; } }
.settings-row-btn { width: 100%; text-align: left; background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invite-name { display: inline-block; max-width: 100%; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.invite-withdraw { align-self: flex-start; padding: 6px 0; }
.invite-when-line { font-weight: 650; color: var(--ink); }
.invite-preview-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 6px 2px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; text-align: left; }
.invite-preview-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.invite-preview-toggle.open .compare-chevron { transform: rotate(-135deg); }
.invite-preview .share-preview { margin: 0; }
.invite-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 700; vertical-align: middle; white-space: nowrap; cursor: pointer; }
.invite-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* read-only Workout View: a training prescription designed for reading.
   The overview is the workout's card (spine, colour); each exercise is a sub-card; sets are a quiet
   ledger — number, target, load, rest — in tabular figures. Nothing looks editable. */
.wv-head { display: flex; align-items: center; margin-bottom: 12px; }
.wv-back { padding: 6px 10px 6px 4px; margin-left: -6px; color: var(--ink-2); font-weight: 650; }
.wv-back .icon { width: 18px; height: 18px; }
.wv-overview .card-body { gap: 14px; }
.wv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wv-titles { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.wv-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: break-word; }
.wv-desc { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; overflow-wrap: break-word; }
.wv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .wv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wv-stat .stat-value { font-size: 20px; }
.wv-next { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.wv-next .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
/* the actions are a deliberate grid, never a content-driven wrap: the primary action alone on its row on a phone,
   the two secondary actions equal beneath it; three equal columns from 600px */
.wv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wv-actions .btn { min-width: 0; }
.wv-actions .btn-primary { grid-column: 1 / -1; }
.wv-actions .icon { width: 18px; height: 18px; }
@media (min-width: 600px) { .wv-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wv-actions .btn-primary { grid-column: auto; } }
.wv-section { margin: 20px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.wv-exercises { display: flex; flex-direction: column; gap: 10px; }
.wv-exercise .card-body { gap: 10px; }
.wv-bench .card-body { gap: 6px; }
.wv-ex-head { display: flex; align-items: flex-start; gap: 10px; }
.wv-ex-index { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; margin-top: 1px; }
.wv-ex-titles { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.wv-ex-name { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: break-word; }
.wv-ex-meta { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.wv-guide { flex: none; margin: -6px -6px 0 0; }
.wv-note { margin: 0; padding: 8px 12px; border-left: 3px solid color-mix(in srgb, var(--wc, var(--accent)) 55%, var(--border)); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; overflow-wrap: break-word; }
.wv-sets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.wv-set { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; padding: 9px 12px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.wv-set + .wv-set { border-top: 1px solid var(--border); }
.wv-set.warmup { background: var(--surface); }
.wv-set.warmup .wv-set-target { color: var(--ink-2); font-weight: 600; }
.wv-set-n { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.wv-set-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wv-set-target { color: var(--ink); font-size: 15px; font-weight: 700; }
.wv-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.wv-set-load { color: var(--ink); font-size: 14.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.wv-set-load:empty, .wv-set-rest:empty { display: none; }
.wv-set-rest { color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap; }
@media (max-width: 360px) { .wv-set { grid-template-columns: 30px minmax(0, 1fr) auto; } .wv-set-rest { grid-column: 2 / -1; text-align: left; } }
.wv-rule { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.wv-rule .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.wv-foot { margin: 16px 0 0; color: var(--ink-3); font-size: 13px; text-align: center; }

/* start-up recovery */
.boot-error { margin: var(--sp-5) auto; max-width: 480px; }
.boot-error-msg { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.45; }
/* the start-up screen (js/boot.js): when the app cannot load, what happened and Try again, over everything; the same
   screen the page shows by itself after a while (#bootStuck) if the start-up script never ran */
.boot-screen {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow-y: auto; background: var(--bg);
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.boot-panel { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.boot-mark {
  width: 56px; height: 56px; margin-bottom: var(--sp-5); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
}
.boot-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boot-mark.is-busy {
  width: 40px; height: 40px; margin: 8px 0 calc(var(--sp-5) + 8px); background: none;
  border: 3px solid var(--border-strong); border-top-color: var(--accent); animation: boot-spin 0.9s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.boot-title { margin: 0; font-size: 21px; font-weight: 750; line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: break-word; }
.boot-text { margin: var(--sp-2) 0 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); overflow-wrap: break-word; }
.boot-panel > .boot-again { width: 100%; max-width: 280px; min-height: 48px; margin-top: var(--sp-6); white-space: normal; text-align: center; }
.boot-details { width: 100%; margin-top: var(--sp-4); font-size: 13px; color: var(--ink-3); }
.boot-details-label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sp-3);
  font-weight: 620; cursor: pointer; border-radius: var(--radius-sm);
}
.boot-detail {
  margin: var(--sp-1) 0 0; padding: 10px 12px; text-align: left; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: break-word;
}
.boot-stuck { visibility: hidden; animation: boot-stuck-show 0s linear 12s forwards; }
@keyframes boot-stuck-show { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  /* the message appearing is not motion: it still appears; the spinner stands still */
  .boot-stuck { animation: boot-stuck-show 0s linear 12s forwards !important; }
  .boot-mark.is-busy { animation: none !important; }
}

/* today vs last time: an inset surface built from the app's own primitives.
   Stat tiles two across (four when there is genuinely room), exercise sub-cards that wrap
   instead of squeezing, and a full-width disclosure row on the finish screen. */
.compare-host:empty { display: none; }
.compare { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; text-align: left; align-items: stretch; }
.compare.inset { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.compare-card .card-body { gap: 10px; }
.compare-first { margin: 0; color: var(--ink-3); font-size: 14px; }
/* the column count follows the text's own size and the space this component actually has, not the viewport. The
   track minimum is in `ch`, so it grows with the reader's text size: at ordinary sizes two (or four) tiles fit as
   before, and at doubled text the tiles drop to one column instead of overrunning their boundaries. */
.compare-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13ch), 1fr)); gap: 8px; }
@media (min-width: 600px) { .compare-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11ch), 1fr)); } }
.compare-stat { min-width: 0; }
.compare-stat .stat-label, .compare-stat .stat-trend { white-space: normal; overflow-wrap: break-word; }
.compare-stat .stat-value { font-size: 20px; }
.compare-stat .stat-trend { min-height: 16px; }
.compare-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
  margin-top: 2px; padding: 8px 2px; border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; text-align: left;
}
.compare-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.compare-chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; margin-right: 4px; }
.compare-toggle.open .compare-chevron { transform: rotate(-135deg); }
.compare-ex { display: flex; flex-direction: column; gap: 6px; }
.compare-ex-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.compare-ex-name { color: var(--ink); font-size: 14px; font-weight: 700; flex: 1 1 140px; min-width: 0; overflow-wrap: break-word; }
.compare-ex-name.pr { color: var(--accent); }
.compare-ex-vals { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; min-width: 0; }
.compare-ex-best { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.compare-ex-vals .stat-trend { margin-top: 0; }
.compare-ex-status { color: var(--ink-3); font-size: 13px; font-weight: 500; flex: 1 1 100%; }
/* a comparison's place held while its last time is read (a session's screen): the shape of one, its words unlit, its
   tiles breathing as the loading state's lines do (still where motion is reduced) */
.compare-pending, .compare-pending * { color: transparent !important; }
.compare-pending .stat, .compare-pending .compare-ex-item { animation: skel-breathe 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .compare-pending .stat, .compare-pending .compare-ex-item { animation: none; } }

.runner-sets { display: flex; flex-direction: column; gap: 6px; }
.runner-sets .eyebrow { padding-left: 2px; margin-bottom: 2px; }
.runner-set-row {
  display: flex; align-items: center; gap: 12px; min-height: 46px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; text-align: left; font-size: 14px;
}
.runner-set-row:disabled { cursor: default; color: var(--ink-2); }
.runner-set-row.current { border-color: var(--wc); box-shadow: 0 0 0 1px var(--wc); }
.runner-set-row.done .runner-set-desc { color: var(--ink); }
.runner-set-check {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); color: var(--ink-3);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.runner-set-row.done .runner-set-check { background: var(--wc); border-color: var(--wc); color: #fff; }
.runner-set-check .icon { width: 14px; height: 14px; }
.runner-set-desc { font-variant-numeric: tabular-nums; }

.resume-card .card-title { font-size: 20px; }

/* ---------------- Calendar ---------------- */

.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-title { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; flex: 1; min-width: 140px; }

.cal-layout { display: grid; gap: 18px; }
@media (min-width: 900px) { .cal-layout { grid-template-columns: 1fr 320px; align-items: start; } }

.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } /* a long name can never widen the grid */
.month-wd { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.month-cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 96px; padding: 7px 7px 6px; text-align: left;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) { .month-cell:hover { border-color: var(--border-strong); } }
.month-cell.other { opacity: 0.45; }
.month-cell.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-glow); }
.cell-num { font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.month-cell.today .cell-num { background: var(--accent); color: var(--accent-ink); }

.cal-chip {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11.5px; font-weight: 620; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2.5px 6px;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wc); flex: none; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip .chip-check { width: 12px; height: 12px; color: var(--wc); flex: none; margin-left: auto; }
.cal-chip.missed { color: var(--ink-3); }
.cal-chip.missed .chip-dot { opacity: 0.35; }
.chip-more { font-size: 11px; color: var(--ink-3); font-weight: 650; padding-left: 2px; }

@media (max-width: 640px) {
  .month-cell { min-height: 64px; padding: 5px; }
  /* month cells are too small for names; the week view has room and keeps them */
  .month-cell .cal-chip { padding: 2px; border: none; background: none; gap: 3px; }
  .month-cell .chip-name, .month-cell .cal-chip .chip-check { display: none; }
  .chip-dot { width: 8px; height: 8px; }
  .cal-chip.completed .chip-dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wc) 30%, transparent); }
}

.week-wrap { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 899px) { .week-wrap { grid-template-columns: 1fr; } }
.week-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; min-height: 120px; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
/* the mobile row layout lives in one place — see the week-view block below */
.week-day.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-glow); }
.week-day-head { display: flex; flex-direction: column; }
.week-wd { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.week-num { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.week-day.today .week-num { color: var(--wc, var(--ink)); }
.week-day.today .week-wd { color: var(--ink); }
.week-chips { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.week-rest { color: var(--ink-3); font-size: 13px; flex: 1; }

.year-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.mini-month {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 8px;
}
@media (hover: hover) and (pointer: fine) { .mini-month:hover { border-color: var(--border-strong); } }
.mini-title { font-size: 13px; font-weight: 700; }
.mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mini-cell {
  font-size: 9.5px; text-align: center; color: var(--ink-3);
  height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; font-variant-numeric: tabular-nums;
}
.mini-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); font-weight: 700; }
.mini-cell.has { background: var(--wc); color: #fff; font-weight: 650; }
.mini-cell.has.missed { opacity: 0.35; }

.day-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.day-panel-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.day-body { display: flex; flex-direction: column; gap: 10px; }
.day-occ { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.day-occ-main { min-width: 0; }
.day-occ-name { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-occ-status { font-size: 12.5px; color: var(--ink-2); }
.day-occ-status.missed { color: var(--ink-3); }
.day-occ-actions { display: flex; align-items: center; gap: 6px; flex: none; }

/* ---------------- History / lists ---------------- */

.history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; width: 100%; }
.history-main { min-width: 0; }
.history-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.inline-check { width: 15px; height: 15px; color: var(--wc); }
.history-meta { font-size: 13px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.history-meta.strong { color: var(--ink); font-weight: 650; }
.history-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.history-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.history-stats .icon { width: 14px; height: 14px; color: var(--wc, var(--accent)); }
.history-name .pr-chip { margin-left: 4px; }
/* what a session reached: its milestone, in its workout's colour — the TEXT variant Records uses for small words in
   a workout colour: darkened on the light theme (48/52 with #111, so yellow clears 4.5:1 on white), lightened on the
   dark one (70/30 with white, so brown, indigo and slate clear 4.5:1 on the card); the icon keeps the colour itself */
.history-milestone { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--wc, var(--accent)) 48%, #111); }
html.theme-dark .history-milestone { color: color-mix(in srgb, var(--wc, var(--accent)) 70%, #fff); }
.history-milestone .icon { width: 14px; height: 14px; color: var(--wc, var(--accent)); }

.session-ex-name { font-size: 16px; font-weight: 700; }
.session-set-list { display: flex; flex-direction: column; }
.session-set {
  display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.session-set:last-child { border-bottom: none; }
.session-set.skipped { color: var(--ink-3); }
/* a History row opened: pressed, in its workout's colour, until its session's screen takes its place */
.history-row.is-opening { transform: scale(0.992); border-color: color-mix(in srgb, var(--wc, var(--accent)) 45%, var(--border)); }
/* a session's screen while it is read (sessionShell in views/history.js): its header at once; then, only when the
   reading takes a moment, the screen's shape, quietly breathing in the workout's colour — still where motion is
   reduced */
.session-loading { display: flex; flex-direction: column; gap: var(--sp-3); animation: skel-in 180ms var(--ease-out) backwards; }
.session-skel .card-body { gap: 12px; }
.skel-line { display: block; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--ink-3) 22%, transparent); animation: skel-breathe 1.6s ease-in-out infinite; }
.session-skel .skel-line:first-child { height: 16px; }
.skel-title { width: 62%; height: 22px; margin-top: 3px; border-radius: 8px; }
@keyframes skel-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes skel-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel-line, .session-loading { animation: none; } }

.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; width: 100%; }
@media (hover: hover) and (pointer: fine) { .list-row:hover { border-color: var(--border-strong); } }
.list-row-name { font-size: 15px; font-weight: 650; }
.list-row-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

/* ---------------- Settings ---------------- */

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; }
.settings-label { font-size: 15px; font-weight: 620; }
.settings-note { font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.settings-note.pad-b { margin-bottom: 4px; }
.settings-value { font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.settings-value.nowrap { white-space: nowrap; } /* a short value beside a long note: one line, not one word per line */

/* ---------------- Overlays ---------------- */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay-bg);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.18s ease;
}
.overlay.open { opacity: 1; }
/* sheets and their pickers scroll vertically only — `overflow-y: auto` alone
   computes `overflow-x: auto` too, which let a nested list shift sideways on iPhone — and their boundaries do not
   chain into the page behind. Deliberately horizontal strips inside keep their own rules. */
.sheet, .picker-list { overflow-x: hidden; overscroll-behavior: contain; }
body.scroll-locked { overflow: hidden; }
.sheet {
  background: var(--surface); width: 100%; max-width: 520px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 90dvh; overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(26px); transition: transform 0.18s ease;
  display: flex; flex-direction: column;
}
.overlay.open .sheet { transform: translateY(0); }
.sheet-wide { max-width: 640px; }
.sheet-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 0 10px;
  /* stays put while a long sheet scrolls beneath it */
  position: sticky; top: 0; z-index: 2; background: var(--surface);
}
/* a sheet's header and its bar of actions stay put while the sheet scrolls, and their background reaches the sheet's
   sides as well: a copy of it either side, wider than any sheet's side padding and cut at the sheet's edges, so the
   glow of a button passing beneath them is hidden across the sheet's whole width, not only between its margins */
.sheet-head, .progress-share-sheet .dlg-actions, .soc-sheet-actions, .msg-pick-actions {
  box-shadow: -32px 0 var(--surface), 32px 0 var(--surface);
}
.sheet-grab {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong);
}
.sheet-title { flex: 1; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; padding-top: 10px; }
.sheet-close { margin-top: 6px; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }

@media (min-width: 700px) {
  .overlay { align-items: center; padding: 24px; }
  .sheet { border-radius: 16px; box-shadow: var(--shadow-lift); }
  .sheet-grab { display: none; }
}

.dlg-msg { font-size: 14.5px; color: var(--ink-2); white-space: pre-line; }
.dlg-actions { display: flex; align-items: stretch; gap: 10px; padding-top: 8px; flex-wrap: wrap; }
.dlg-actions .btn { flex: 1; }

/* More: the places a phone's tab bar has no room for, in groups, each with its icon on a tile */
.more-sheet { display: flex; flex-direction: column; gap: 18px; padding-bottom: 2px; }
.more-group { display: flex; flex-direction: column; gap: 7px; }
.more-group-h { margin: 0; padding: 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.more-card { display: flex; flex-direction: column; background: var(--card-sheen), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.more-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px;
  padding: 9px 12px; text-align: left; transition: background-color var(--dur-fast) var(--ease-out);
}
.more-item + .more-item::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--border); }
.more-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.more-ic .icon { width: 20px; height: 20px; }
.more-item.social .more-ic {
  color: var(--msg-teal); background: color-mix(in srgb, var(--msg-teal-soft) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--msg-teal-soft) 32%, var(--border));
}
.more-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-label { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.more-sub { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.more-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--msg-teal); color: #FFFFFF; font-size: 12px; font-weight: 750; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.more-chev { flex: none; display: inline-flex; color: var(--ink-3); margin-right: -2px; }
.more-chev .icon { width: 18px; height: 18px; }
.more-item:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .more-item:hover { background: var(--hover); } }
.more-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
/* the place on screen now */
.more-item.current { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.more-item.current::after { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.more-item.current .more-ic { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 12px -4px var(--accent-glow); }
.more-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.more-logo { width: 11px; height: 12px; color: var(--ink-3); }
html.theme-dark .more-ic { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); box-shadow: none; }
html.theme-dark .more-ic .icon { filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.35)); }
html.theme-dark .more-item.social .more-ic { color: var(--msg-teal-soft); }
html.theme-dark .more-badge { background: var(--msg-teal-soft); color: #062621; }
html.theme-dark .more-item.current .more-ic { color: var(--accent-ink); background: var(--accent); }
html.theme-dark .more-item.current .more-ic .icon { filter: none; }
@media (prefers-reduced-motion: reduce) { .more-item { transition: none; } }

.choose-list { display: flex; flex-direction: column; gap: 6px; }
.choose-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 14px; min-height: 50px; background: var(--surface);
}
@media (hover: hover) and (pointer: fine) { .choose-item:hover { border-color: var(--border-strong); background: var(--surface-2); } }
.choose-item.is-danger .choose-label { color: var(--danger); }
.choose-item .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wc); flex: none; }
.choose-main { display: flex; flex-direction: column; min-width: 0; }
.choose-label { font-size: 15px; font-weight: 650; }
.choose-sub { font-size: 12.5px; color: var(--ink-3); }
/* the plan finder: a question at a time, then the plan that fits, the others worth a look and Coach */
.finder { display: flex; flex-direction: column; gap: 12px; }
.finder-count { font-size: 12.5px; font-weight: 650; color: var(--ink-3); margin-top: -4px; }
.finder-q { font-size: 18px; font-weight: 700; line-height: 1.3; }
.finder-q:focus, .finder-q:focus-visible { outline: none; }
.finder-why { margin-top: -6px; text-wrap: pretty; }
.finder .choose-sub { text-wrap: pretty; }
.finder .choose-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.finder .choose-item > .icon { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--ink-3); }
/* how far along, as bars: one for each question, those reached filled */
.finder-progress { display: flex; gap: 4px; }
.finder-seg { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--border); }
.finder-seg.on { background: var(--accent); }
/* the sheet's foot: Back (or Start again) and Browse all plans, quiet links each a full 44 px target */
.finder-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.finder-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px;
  font-size: 14px; font-weight: 650; color: var(--ink-2);
}
.finder-link .icon { width: 16px; height: 16px; }
.finder-link.finder-browse { color: var(--accent); }
.finder-also, .finder-coach { display: flex; flex-direction: column; gap: 8px; }
.finder-also { margin-top: 8px; }
.finder-coach { padding-top: 12px; border-top: 1px solid var(--line); }
.finder-entry + .plans-tabs { margin-top: var(--sp-3); }

/* ---------------- Toasts, saved, resume ---------------- */

#toasts {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 80; pointer-events: none;
}
@media (min-width: 900px) { #toasts { bottom: 22px; } }
/* in a conversation a notice sits just above the composer, whatever is open over it (messaging/screen.js measures) */
html.route-conv #toasts { bottom: var(--msg-toast-bottom, calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px)); }
.toast {
  background: var(--toast-bg); color: var(--toast-ink); font-size: 13.5px; font-weight: 600;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: min(90vw, 420px); text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }

.saved-pill {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 70;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-2); font-size: 12.5px; font-weight: 650;
  padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.saved-pill.show { opacity: 1; transform: translateY(0); }

.resume-pill {
  position: fixed; right: 16px;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 650;
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-lift);
}
.resume-pill .icon { width: 15px; height: 15px; color: var(--wc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wc) 70%, transparent)); }
@media (min-width: 900px) { .resume-pill { bottom: 22px; right: 22px; } }

/* ---------------- Motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------- Stepper entry, ended-early checks, year-view colours ---------------- */

/* tappable stepper values for direct numeric entry */
.step-val-edit { border-radius: 8px; padding: 4px 6px; }
@media (hover: hover) and (pointer: fine) { .step-val-edit:hover { background: var(--hover); } }
.step-input, .big-step-input {
  border: 1px solid var(--ink); border-radius: 8px; background: var(--surface);
  text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.step-input { width: 76px; padding: 4px 2px; }
.big-step-input { width: 150px; padding: 2px; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button,
.big-step-input::-webkit-outer-spin-button, .big-step-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ended-early completions get a dimmed check */
.cal-chip.partial .chip-check { opacity: 0.4; }

/* two workout colours per year-view cell */
.mini-cell.has.multi {
  background: linear-gradient(135deg, var(--wc) 0 50%, var(--wc2) 50% 100%);
}

.seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------- Dark theme: charcoal + teal accent ---------------- */

html.theme-dark {
  color-scheme: dark;
  --bg: #0F1114;
  --surface: #171A1F;
  --border: #242830;
  --line: #242830;        /* the dark theme's value for the same token */
  --border-strong: #353B46;
  --ink: #E8EAEE;
  --ink-2: #9AA3B0;
  --ink-3: #8390A1;         /* 5.4:1 on surface, 5.0:1 on surface-2 */
  --danger: #F87171;
  --accent: #2DD4BF;
  --accent-ink: #062621;
  --accent-glow: rgba(45, 212, 191, 0.32);
  --surface-2: #1D2128;
  --hover: rgba(255, 255, 255, 0.06);
  --seg-bg: #1F232A;
  --switch-off: #353B46;
  --overlay-bg: rgba(6, 8, 11, 0.62);
  --tabbar-bg: rgba(15, 17, 20, 0.78);
  --toast-bg: rgba(29, 33, 40, 0.86);
  --toast-ink: #E8EAEE;
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-hover: 0 10px 28px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lift: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
html.theme-dark .brand-mark { color: var(--ink); }
html.theme-dark .brand-ver { color: var(--accent); }
html.theme-dark .runner-set-row.done .runner-set-check { color: #0B1210; }
html.theme-dark .mini-cell.has { color: #0B1210; }
html.theme-dark .switch-input::after { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* ---------------- Filter-row polish (Exercises view) ---------------- */

.filter-row {
  margin: 12px 0 14px;
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.filter-row .chip { flex: 0 0 auto; }
.exercise-search { margin-top: 2px; }

/* ---------------- Sharing ---------------- */

.share-link-box { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.share-preview { margin: 4px 0; }
.share-actions { margin-top: 16px; }
.error-note { color: var(--danger); }

/* ---------------- Compare ---------------- */

.cmp-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; align-items: baseline; }
.cmp-row:last-child { border-bottom: none; }
.cmp-head { background: var(--surface-2); font-weight: 700; }
.cmp-head .cmp-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sub { background: var(--surface-2); }
.cmp-sub .cmp-label { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.cmp-label { color: var(--ink-2); }
.cmp-val { font-variant-numeric: tabular-nums; text-align: right; font-weight: 620; }
.cmp-group { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cmp-diff { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
/* both fields carry user-entered names, so they wrap normally and break a long unbroken token only as a last
   resort. Their ancestors may shrink too — without `min-width: 0` a flex parent refuses to let them narrow. */
.cmp-diff-name { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cmp-diff-line { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cmp-diff, .cmp-diff-main, .cmp-row { min-width: 0; }

.preview-list.rich li { flex-direction: column; align-items: stretch; gap: 2px; }
/* the shared-workout preview. A paired prescription is long enough that holding it on one line beside the name
   overflowed every phone width, so the name leads and the prescription sits beneath it where space requires. Both
   tracks may shrink; a long user-entered token breaks only as a last resort. Scoped to this preview. */
.preview-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preview-main > .preview-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.preview-main > .preview-sets { flex: 1 1 100%; }
@media (min-width: 560px) {
  /* on a wide card the two sit together again, and the prescription keeps its own column */
  .preview-main > .preview-sets { flex: 0 1 auto; text-align: right; }
}
.preview-note { font-size: 12px; color: var(--ink-3); font-style: italic; }
.weights-badge { color: var(--ink); }
.weights-badge .icon { display: none; }


/* ===== v-next: warm-ups, ranges, skip/swap, notes, description ===== */
.wu-chip {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ink-2); border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 1px 4px; line-height: 1.4;
}
.range-ctrl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.range-max { display: inline-flex; align-items: center; gap: 6px; }
.range-max.hidden { display: none; }
.range-dash { color: var(--ink-2); font-weight: 700; }
.chip.tiny { padding: 4px 10px; font-size: 12px; min-height: 30px; }
.desc-input, .session-note-input {
  width: 100%; resize: vertical; min-height: 44px;
  font-size: 14px; line-height: 1.45;
}
.desc-input { margin-top: 8px; }
.session-note-input { margin: 4px 0 12px; }
.session-note-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.skipped-label { font-weight: 600; }
.runner-ex-row { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.runner-ex-row .runner-ex { min-width: 0; }
.ex-actions-btn { flex: none; }

.set-rep-editor { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.set-rep-range-btn {
  min-width: 28px; min-height: 36px; padding: 0 6px; border-radius: 8px;
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--ink-2); font-weight: 800; font-size: 15px; line-height: 1;
}
.runner-set-row.skipped .runner-set-desc { color: var(--ink-3); text-decoration: line-through; }
.runner-set-row.skipped .runner-set-check { color: var(--ink-3); }


/* =====================================================================
   SaaS-grade polish: cool neutrals, accent glows, motion
   ===================================================================== */

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
html { scrollbar-color: var(--border-strong) transparent; }
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid var(--bg); border-radius: 999px; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* Focus — a soft halo, not a hard outline */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 80%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent-glow);
  border-radius: 8px;
}
.input:focus, .input:focus-visible, .set-rep-input:focus, .step-input:focus, .big-step-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  transition: box-shadow 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

/* Screen entrance */
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* fill-mode backwards: the entrance never pins a transform afterwards, so
   hover lifts and the builder's drag-reorder keep working. Lists that rebuild
   in place on every edit (.ex-list, .tight) are excluded so edits don't flicker. */
.view-inner { animation: view-in var(--dur) var(--ease-out) backwards; }
/* One orchestrated entrance per screen — the view itself. The per-card
   stagger that used to follow it read as decoration and made every screen
   feel like it was loading (polish pass). */

/* Headings */
.page-head h1 { font-weight: 800; letter-spacing: -0.03em; }
.brand-mark { letter-spacing: -0.04em; }
html.theme-dark .brand-mark { text-shadow: 0 0 22px rgba(45, 212, 191, 0.18); }

/* Cards — sheen, hover lift for interactive cards, glowing spine */
.card { background: var(--card-sheen), var(--surface); transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  button.card:hover, .card.list-row:hover, .month-cell:hover, .week-day:hover, .mini-month:hover, .choose-item:hover, .picker-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
    border-color: var(--border-strong);
  }
}
button.card:active, .choose-item:active, .picker-row:active { transform: translateY(0) scale(0.995); }
.card.spine::before { width: 3px; box-shadow: 0 0 14px -2px color-mix(in srgb, var(--wc) 55%, transparent); }
html.theme-dark .card.spine::before { box-shadow: 0 0 18px -1px color-mix(in srgb, var(--wc) 65%, transparent); }
.resume-card { border-color: color-mix(in srgb, var(--wc) 45%, var(--border)); }
html.theme-dark .resume-card { box-shadow: var(--shadow), 0 0 32px -12px color-mix(in srgb, var(--wc) 55%, transparent); }
.done-badge { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.done-badge .icon { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--wc) 60%, transparent)); }
.inline-check { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--wc) 60%, transparent)); }

/* Buttons — glow on accents, press feedback everywhere */
.btn, .chip, .wd-pill, .step-btn, .big-step-btn, .seg-btn, .icon-btn, .colour-dot, .set-rep-quick, .runner-set-row, .tab-item, .nav-item,
.month-cell, .week-day, .mini-month, .choose-item, .picker-row, .list-row {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:active, .wd-pill:active, .step-btn:active, .seg-btn:active, .icon-btn:active, .set-rep-quick:active { transform: scale(0.965); }
.big-step-btn:active { transform: scale(0.94); }
.chip.on, .wd-pill.on { box-shadow: 0 6px 16px -8px var(--accent-glow); }
html.theme-dark .chip.on, html.theme-dark .wd-pill.on { box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.25), 0 6px 18px -8px rgba(45, 212, 191, 0.55); }
.colour-dot { box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.colour-dot.selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--wc), 0 0 16px 2px color-mix(in srgb, var(--wc) 45%, transparent); }
.switch-input { transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.switch-input::after { transition: transform 0.22s var(--ease-spring); }
.switch-input:checked { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 4px 14px -6px var(--accent-glow); }

/* Segmented control — inset track, lifted pill */
.segmented { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); }
.seg-btn.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px -4px rgba(0, 0, 0, 0.12); }
html.theme-dark .segmented { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
html.theme-dark .seg-btn.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* Navigation — accent rail + glow on the active item */
.nav-item { position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
html.theme-dark .nav-item.active { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
html.theme-dark .nav-item.active .icon { filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.55)); }
@media (max-width: 899px) {
  #tabbar { box-shadow: 0 -1px 0 var(--border), 0 -12px 30px -18px rgba(0, 0, 0, 0.25); }
  .tab-item { position: relative; }
  .tab-item::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 22px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    transform: translateX(-50%) scaleX(0); opacity: 0;
    transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
  }
  .tab-item.active::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
  .tab-item .icon, .tab-item { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  html.theme-dark .tab-item.active .icon { filter: drop-shadow(0 0 7px rgba(45, 212, 191, 0.6)); }
  .tab-item:active { transform: scale(0.94); }
}

/* Runner — the workout colour lights the stage */
.runner-main { border-radius: 20px; background: var(--card-sheen), var(--surface); }
.runner-main:not(.rest-main):not(.done-main) {
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--wc) 18%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--wc) 40%, transparent);
}
html.theme-dark .runner-main:not(.rest-main):not(.done-main) {
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--wc) 22%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--wc) 55%, transparent);
}
.eyebrow.wc { text-shadow: 0 0 12px color-mix(in srgb, var(--wc) 45%, transparent); }
html.theme-dark .giant-clock:not(.dim):not(.rest-clock) { text-shadow: 0 0 40px color-mix(in srgb, var(--wc) 28%, transparent); }
.prog { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); }
.prog-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--wc) 75%, #fff), var(--wc));
  box-shadow: 0 0 12px color-mix(in srgb, var(--wc) 65%, transparent);
  transition: width 0.45s var(--ease-spring);
}
.runner-set-row.current {
  border-color: var(--wc);
  box-shadow: 0 0 0 1px var(--wc), 0 0 22px -6px color-mix(in srgb, var(--wc) 70%, transparent);
}
.runner-set-row.done .runner-set-check { box-shadow: 0 0 10px -2px color-mix(in srgb, var(--wc) 70%, transparent); }
.big-step-val { transition: transform 0.12s var(--ease-out); }
.done-main .runner-ex:not(.plain) { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--wc) 55%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.done-main .runner-target { max-width: 34ch; }

/* Sheets & overlays — glass and spring */
.overlay { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity var(--dur) var(--ease-out); }
/* Draw without blur (the diagnostics screen's test switch): no frosted blur anywhere, and the bars that let the page
   show through drawn solid */
html.no-blur *, html.no-blur *::before, html.no-blur *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.no-blur #tabbar, html.no-blur .chat-bar { background: var(--surface); }
.sheet { transform: translateY(40px); transition: transform var(--dur-slow) var(--ease-spring); box-shadow: var(--shadow-lift); }
@media (min-width: 700px) { .sheet { transform: translateY(14px) scale(0.985); } .overlay.open .sheet { transform: translateY(0) scale(1); } }
.sheet-grab { background: var(--border-strong); opacity: 0.9; }

/* Calendar */
.month-cell.today .cell-num { box-shadow: 0 0 12px var(--accent-glow); }
.mini-cell.has { box-shadow: 0 0 8px -2px color-mix(in srgb, var(--wc) 60%, transparent); }
.cal-chip { transition: transform 0.14s var(--ease-out), background-color 0.14s var(--ease-out); }
.chip-dot { box-shadow: 0 0 6px color-mix(in srgb, var(--wc) 60%, transparent); }
.cal-chip.missed .chip-dot { box-shadow: none; }

/* Builder rows */
.set-row { transition: background-color 0.14s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .set-rep-quick:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } }
.set-rep-input, .step-input, .big-step-input { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.wu-chip { background: var(--surface-2); }
.ex-card.dragging { box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Toasts / saved pill */
.toast { transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-spring); transform: translateY(12px) scale(0.98); }
.toast.show { transform: translateY(0) scale(1); }
.saved-pill { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Reduced motion honours the existing rule at the top of the Motion block */
@media (prefers-reduced-motion: reduce) {
  .view-inner, .view-inner > .stack > .card, .workout-grid > .card { animation: none !important; }
}

/* Value pop on big steppers (runner) */
@keyframes val-pop { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.big-step-val.pop { animation: val-pop 0.22s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .big-step-val.pop { animation: none; } }


/* ===== durability + progress ===== */
.settings-value.warn { color: var(--wc); }
.nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-radius: var(--radius);
}
.nudge-main { min-width: 0; }
.nudge-title { font-size: 14px; font-weight: 700; }
/* success variant — the inline top-up confirmation on the credit card */
.nudge.ok { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nudge.ok .nudge-title { color: var(--accent); }
.nudge-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.nudge .btn { flex: none; }

.progress-card .card-body { gap: 14px; }
/* a column's least width never more than the grid has: a narrow screen with its text enlarged gets one column */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a narrow screen with its text enlarged: the line under a figure wraps rather than losing its date */
@media (max-width: 319px) { .stat-sub { white-space: normal; overflow: visible; overflow-wrap: break-word; } }
.spark-wrap { display: flex; flex-direction: column; gap: 6px; }
.spark-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.spark-label { color: var(--ink-2); font-weight: 600; }
.spark-delta { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spark-delta.up { color: var(--wc, var(--accent)); }
.spark-delta.down { color: var(--ink-2); }
.spark { width: 100%; height: 60px; display: block; color: var(--wc, var(--accent)); overflow: visible; }
.spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 55%, transparent)); }
.spark-area { fill: currentColor; opacity: 0.09; }
.spark-dot { fill: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.eyebrow.tight { margin-bottom: 8px; }
.cat-bars { display: flex; flex-direction: column; gap: 7px; }
.cat-bar-row { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
.cat-bar-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-bar-track { height: 8px; background: var(--seg-bg); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); }
.cat-bar-fill { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--wc, var(--accent)) 70%, #fff), var(--wc, var(--accent))); box-shadow: 0 0 10px color-mix(in srgb, var(--wc, var(--accent)) 55%, transparent); }
.cat-bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-chip {
  margin-left: auto; flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--wc, var(--accent)); border: 1px solid color-mix(in srgb, var(--wc, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--wc, var(--accent)) 10%, transparent);
  border-radius: 6px; padding: 1px 6px; line-height: 1.5;
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--wc, var(--accent)) 60%, transparent);
}
.session-set .pr-chip { margin-left: auto; }
.suggest-pill {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--wc) 40%, var(--border));
  background: color-mix(in srgb, var(--wc) 9%, var(--surface));
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--wc) 60%, transparent);
}
.suggest-pill .icon { width: 18px; height: 18px; color: var(--wc); flex: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--wc) 60%, transparent)); }
.suggest-pill > span:first-of-type { flex: 1; min-width: 0; }
.suggest-cta {
  flex: none; font-size: 13px; font-weight: 700;
  color: var(--wc); padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--wc) 55%, transparent);
}
.suggest-pill:active { transform: scale(0.985); }


/* ===== vertical rhythm ===== */
/* Direct children of a screen are separated by one consistent gap, so a card
   never sits flush against a list, another card, or a button row. Section
   titles get extra breathing room above; page heads keep their own margin. */
.view-inner > * + * { margin-top: var(--sp-4); }
.view-inner > .page-head { margin-bottom: 0; }
.view-inner > .page-head + * { margin-top: var(--sp-5); }
.view-inner > .section-title { margin: var(--sp-6) 0 0; }
.view-inner > .section-title + * { margin-top: var(--sp-3); }
.view-inner > .ex-list, .view-inner > .add-ex-btn { margin-top: var(--sp-4); }
.view-inner > .nudge { margin-bottom: 0; }
.settings-row { padding: var(--sp-3) 0; }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.card-body > .settings-note.pad-b { margin-bottom: 0; }


/* ===== AI Coach ===== */
@media (max-width: 899px) {
  .tab-item { min-width: 0; font-size: 10px; letter-spacing: -0.01em; }
  .tab-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}
.coach-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.nudge.warn { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.chat-log { display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-msg { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 88%; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.assistant { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.chat-msg.user .chat-bubble { background: var(--accent); color: var(--accent-ink); border-color: transparent; border-bottom-right-radius: 5px; box-shadow: 0 8px 22px -12px var(--accent-glow); }
.chat-msg.assistant .chat-bubble { border-bottom-left-radius: 5px; }
.chat-bubble.thinking { color: var(--ink-2); font-style: italic; }
.chat-bubble.thinking::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: pulse 1.1s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.chat-bubble.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
.chat-effects { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.chat-effect {
  display: inline-flex; align-items: flex-start; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  max-width: 100%; min-width: 0; text-align: left; white-space: normal; overflow-wrap: break-word; line-height: 1.35; /* the label wraps inside the conversation */
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.chat-effect .icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.chat-effects { max-width: 100%; }
/* under a reply, each workout it created as the way to open it: filled, so it reads as the thing to press, and a full
   target */
.chat-opens { display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: 100%; }
.chat-effect.chat-open {
  align-items: center; min-height: 44px; padding: 8px 14px 8px 16px; font-size: 13.5px;
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: pointer;
}
.chat-effect.chat-open .icon { margin-top: 0; color: var(--accent-ink); }
.chat-intro { color: var(--ink-2); font-size: 14px; display: flex; flex-direction: column; gap: var(--sp-3); }
/* before sign-in, what Coach makes: an example, labelled so — a request as it would be typed, and the workout built
   for it, drawn as a plan's workouts are — then how credits work, as a short list; the request and what is built
   each a group of its own, with more room between them than within them */
.coach-example {
  margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.coach-example-ask + .coach-example-step { margin-top: 6px; }
/* the line under the way in, centred under it */
.coach-signin-note { margin-top: -4px; text-align: center; }
.coach-example-label {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.coach-example-step { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.coach-example-ask { display: flex; justify-content: flex-end; }
/* drawn as a message to Coach is, but its own: it is not part of any conversation */
.coach-example-bubble {
  max-width: 88%; padding: 10px 14px; border-radius: 16px; border-bottom-right-radius: 5px; font-size: 14px;
  line-height: 1.45; overflow-wrap: break-word; background: var(--accent); color: var(--accent-ink);
}
.coach-example-made .card-body { padding: 12px 14px; gap: 6px; }
/* its sets and reps never broken across lines: the name beside them wraps instead */
.coach-example-made .preview-sets { flex: none; white-space: nowrap; }
.coach-terms-title { font-size: 14px; font-weight: 700; margin-top: 8px; }
.coach-terms { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.coach-terms li { position: relative; padding-left: 16px; }
.coach-terms li::before {
  content: ''; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.chat-intro .chip { white-space: normal; text-align: left; height: auto; padding: 8px 12px; }
.chat-bar {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: stretch; margin-top: var(--sp-4);
  padding: var(--sp-2); border-radius: 18px;
  background: var(--tabbar-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--border); box-shadow: var(--shadow-hover);
}
.chat-entry { display: flex; gap: var(--sp-2); align-items: flex-end; min-width: 0; }
.chat-entry .chat-input { min-width: 0; font-size: 16px; }
.coach-photo-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.coach-photo-actions .btn { min-height: 44px; }
.coach-photo-preview { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.coach-photo-preview[hidden] { display: none; }
.coach-photo-preview img { width: 96px; height: 72px; object-fit: contain; border-radius: 8px; background: var(--surface); }
.coach-photo-status { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
@media (min-width: 900px) { .chat-bar { bottom: 16px; } }
.chat-input { flex: 1; resize: none; min-height: 44px; max-height: 140px; line-height: 1.4; }
.chat-send { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.chat-send .icon { width: 20px; height: 20px; }
.ai-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ai-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.ai-status.ok::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.ai-status.bad::before { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 60%, transparent); }
.ai-status.warn::before { background: var(--wc, #F59E0B); }
.key-row { display: flex; align-items: stretch; gap: var(--sp-2); }
.key-row .input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }


/* =====================================================================
   Buttons — authoritative states
   Order: base → variants → hover (fine pointers only) → active → disabled.
   Rules: a variant's background representation never changes kind between
   states (gradient stays gradient), no filter on interactive states, and
   every solid variant owns its own hover/active so the neutral .btn hover
   can never bleed through.
   ===================================================================== */
:root { --wc-ink: #0B0D10; }

/* base */
.btn { color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* variants — FLAT fills. The fill never changes between normal, hover and
   active: feedback comes from border, shadow and transform only, so
   the tested --wc-ink / --accent-ink contrast holds in every state and there
   is no background churn to flicker. The sheen is an inset highlight. */
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 22px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-accent {
  background: var(--wc); border-color: var(--wc); color: var(--wc-ink);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--wc) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-xl.btn-accent { box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--wc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-danger {
  background: var(--danger); border-color: var(--danger); color: #FFFFFF;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--danger) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
html.theme-dark .btn-danger { color: #1A0B0B; }
.btn-danger-ghost { background: var(--surface); color: var(--danger); border-color: var(--border-strong); }

/* hover — pointer devices only; same fill, lifted */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .btn-primary:hover {
    background: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, #fff);
    box-shadow: 0 10px 28px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }
  .btn-accent:hover {
    background: var(--wc); border-color: color-mix(in srgb, var(--wc) 70%, #fff);
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--wc) 72%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }
  .btn-danger:hover {
    background: var(--danger); border-color: color-mix(in srgb, var(--danger) 70%, #fff);
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--danger) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
  }
  .btn-danger-ghost:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
}

/* active — same fill, pressed in */
.btn:active { transform: scale(0.965); background: var(--surface-2); }
.btn-primary:active { background: var(--accent); box-shadow: 0 3px 10px -6px var(--accent-glow), inset 0 2px 4px rgba(0, 0, 0, 0.18); transform: scale(0.965); }
.btn-accent:active { background: var(--wc); box-shadow: 0 3px 10px -6px color-mix(in srgb, var(--wc) 50%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.18); transform: scale(0.965); }
.btn-danger:active { background: var(--danger); box-shadow: 0 3px 10px -6px color-mix(in srgb, var(--danger) 45%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.18); transform: scale(0.965); }
.btn-danger-ghost:active { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }

/* disabled — one look for every control family, no hover/press reaction */
.btn:disabled, .icon-btn:disabled, .chip:disabled, .wd-pill:disabled, .step-btn:disabled, .big-step-btn:disabled,
.set-rep-quick:disabled, .colour-dot:disabled, .chat-send:disabled, .picker-row:disabled {
  opacity: 0.46; transform: none !important; box-shadow: none; pointer-events: none;
}
.picker-row:disabled.added { opacity: 0.8; } /* the "added" tick stays readable during its short lock */

/* coarse-pointer targets: bigger hit areas on phones, desktop unchanged */
@media (pointer: coarse) {
  .icon-btn, .step-btn, .wd-pill, .set-rep-quick, .btn-sm, .segmented.small .seg-btn, .chip, .set-rep-range-btn, .desc-toggle { min-height: 44px; }
  .desc-toggle { min-width: 44px; display: inline-flex; align-items: center; }
  /* title keeps its visual rhythm; the hit area extends past the text */
  .card-title-btn { position: relative; }
  .card-title-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .icon-btn, .step-btn, .wd-pill { min-width: 44px; }
  .colour-dot { position: relative; }
  .colour-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; } /* 46px hit area, 34px visible */
  .colour-row { gap: 14px; }
}


/* ===== Workout card hierarchy ===== */
.workout-card .card-body { gap: var(--sp-3); }
.card-head-text { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.workout-card .card-title { font-size: 19px; line-height: 1.2; }
.facts { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 6px; }
.fact {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.fact .icon { width: 14px; height: 14px; color: var(--wc, var(--accent)); }
.card-lineup { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.card-desc-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.card-desc {
  --desc-edge: color-mix(in srgb, var(--wc) 55%, var(--border));
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: break-word;
  padding: 8px 12px 8px 14px;
  /* the workout's colour down the left edge is drawn as a background, so it runs the box's full height whatever its
     borders */
  background: linear-gradient(var(--desc-edge), var(--desc-edge)) 0 0 / 2px 100% no-repeat border-box,
    color-mix(in srgb, var(--wc) 5%, var(--surface-2));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: 100%;
}
/* three lines, then More. The space under the third line is a transparent border rather than padding: the box clips
   what it holds at its padding's outer edge, so padding there showed the top of the fourth line */
.card-desc.clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  padding-bottom: 0; border-bottom: 8px solid transparent;
}
/* neutral ink at readable contrast; the workout colour is a
   secondary cue (underline + hover wash), never the text colour itself. */
.desc-toggle {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--wc, var(--accent)) 70%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  padding: 4px 12px; min-height: 28px; border-radius: 999px;
}
.desc-toggle[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .desc-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--wc, var(--accent)) 10%, transparent); } }
.desc-toggle:active { transform: scale(0.96); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.card-last { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.card-last .icon { width: 15px; height: 15px; }
.card-last.done { color: var(--ink-2); }
.card-last.done .icon { color: var(--wc, var(--accent)); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--wc) 60%, transparent)); }
.workout-card .btn-accent { margin-top: 2px; }

/* native title button: inherits the heading look, real button semantics */
.card-title-btn { font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .card-title-btn:hover { text-decoration: underline; text-underline-offset: 3px; } }


/* ===== calendar swipe + Today ===== */
.cal-main { transition: transform 0.16s var(--ease-out); will-change: transform; touch-action: pan-y; }
@keyframes calSlideR { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes calSlideL { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.cal-main.slide-in-right { animation: calSlideR 0.22s var(--ease-out) both; }
.cal-main.slide-in-left { animation: calSlideL 0.22s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .cal-main, .cal-main.slide-in-right, .cal-main.slide-in-left { animation: none; transition: none; }
}
.cal-hint { font-size: 12px; color: var(--ink-3); text-align: center; padding-top: var(--sp-2); }
@media (pointer: fine) { .cal-hint { display: none; } }
.danger-zone { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); }

.week-card .card-body { gap: var(--sp-4); }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wk-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 6px; border-radius: var(--radius-sm);
  border: 1px solid transparent; color: var(--ink-3); min-width: 0;
}
.wk-wd { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.wk-num { font-size: 15px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wk-day.today { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wk-day.today .wk-wd, .wk-day.today .wk-num { color: var(--ink); }
.wk-day.has-work .wk-num { color: var(--ink); }
.wk-dots { display: flex; gap: 3px; height: 7px; align-items: center; }
/* one dot per occurrence, each styled by its own state */
.wk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wc, var(--accent)); }
.wk-dot.done { box-shadow: 0 0 6px color-mix(in srgb, var(--wc, var(--accent)) 70%, transparent); }
.wk-dot.planned { background: transparent; border: 1.5px solid color-mix(in srgb, var(--wc, var(--accent)) 75%, transparent); width: 6px; height: 6px; }
.wk-dot.missed { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--wc, var(--accent)) 55%, transparent); width: 6px; height: 6px; opacity: 0.75; }
.wk-dot.empty { background: var(--border-strong); width: 3px; height: 3px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mini-stat { text-align: center; min-width: 0; }
.mini-val { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mini-lbl { font-size: 11px; color: var(--ink-3); margin-top: 1px; line-height: 1.25; }
/* the week's plan: how many of its booked workouts are done, and a bar of them in their own colours, filling as each is */
.week-plan { display: flex; flex-direction: column; gap: 9px; }
.week-plan-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.week-plan-count { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.week-plan-lbl { font-size: 13px; color: var(--ink-2); }
.week-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.week-streak .icon { width: 14px; height: 14px; }
.week-plan-bar { display: flex; gap: 5px; }
.week-plan-seg { flex: 1 1 0; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--wc, var(--accent)) 20%, transparent); }
.week-plan-seg.done { background: var(--wc, var(--accent)); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--wc, var(--accent)) 60%, transparent); }
.week-plan-seg.missed { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wc, var(--accent)) 50%, transparent); }
/* last week, looked back at from Monday to Wednesday: its range and records, its figures, its plan, what was done */
.card.week-recap { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 55%); }
.week-recap .card-body { gap: var(--sp-4); }
.recap-top { display: flex; align-items: center; gap: 10px; margin: -4px 0 -6px; }
.recap-range { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.recap-records { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.recap-records .icon { width: 14px; height: 14px; }
.recap-x { margin: -8px -10px -8px auto; }
.recap-stats { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.recap-workouts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
/* a workout's name is the person's own: it wraps at its spaces, and a long unbroken one breaks rather than leave the
   card; the dot keeps its size, beside the first line */
.recap-workout { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.recap-dot { width: 8px; height: 8px; flex: none; margin-top: 5px; border-radius: 50%; background: var(--wc, var(--accent)); }
.recap-workout-name { min-width: 0; overflow-wrap: anywhere; }
/* a milestone: a medal with its number, in the colour of the workout that reached it */
.card.milestone-card {
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--wc, var(--accent)) 18%, transparent) 0%, transparent 60%),
    var(--surface);
  border-color: color-mix(in srgb, var(--wc, var(--accent)) 34%, var(--border));
}
.milestone-top { display: flex; align-items: center; gap: 14px; }
.milestone-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.milestone-text .card-title { font-size: 20px; letter-spacing: -0.02em; }
.milestone-text .card-meta { margin: 0; overflow-wrap: anywhere; } /* the workout's name, however long and unbroken, stays in its column */
.milestone-x { align-self: flex-start; margin: -8px -10px 0 0; }
/* the medal: a tile in the workout's colour, as the app draws a number in a colour elsewhere (a PR chip, a stat tile) —
   a wash of the colour over the surface, its border in the colour, the number in the colour's readable text variant
   (darkened on the light theme, lightened on the dark, as Records' values are), a glow on the dark theme; the number's
   size follows its length, so 1000 sits in the tile as 50 does. What it counts is said beside the tile, not in it */
.ms-medal {
  flex: none; width: 64px; height: 64px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  --ms-ink: color-mix(in srgb, var(--wc, var(--accent)) 48%, #111);
  color: var(--ms-ink);
  background: color-mix(in srgb, var(--wc, var(--accent)) 14%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--wc, var(--accent)) 55%, transparent);
}
html.theme-dark .ms-medal {
  --ms-ink: color-mix(in srgb, var(--wc, var(--accent)) 70%, #fff);
  background: color-mix(in srgb, var(--wc, var(--accent)) 16%, var(--surface));
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--wc, var(--accent)) 70%, transparent);
}
.ms-medal-num { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ms-medal[data-digits="3"] .ms-medal-num { font-size: 22px; }
.ms-medal[data-digits="4"] .ms-medal-num { font-size: 18px; letter-spacing: -0.04em; }
/* History's milestones: the latest reached, each opening its session, and how far to the next of each kind */
.milestones-card .card-body { gap: var(--sp-4); }
.ms-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ms-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px 9px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: inherit; font: inherit; }
.ms-badge .ms-medal { width: 50px; height: 50px; border-radius: 14px; }
.ms-badge .ms-medal-num { font-size: 21px; }
.ms-badge .ms-medal[data-digits="3"] .ms-medal-num { font-size: 17px; }
.ms-badge .ms-medal[data-digits="4"] .ms-medal-num { font-size: 14px; }
.ms-badge-unit { font-size: 11px; font-weight: 650; color: var(--ink-2); line-height: 1.1; }
.ms-badge-date { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.ms-badge:active { opacity: 0.7; }
.ms-next { display: flex; flex-direction: column; gap: 12px; }
.ms-next-row { display: flex; flex-direction: column; gap: 6px; }
.ms-next-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ms-next-name { font-size: 13.5px; font-weight: 650; min-width: 0; }
.ms-next-val { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.ms-bar-fill { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: 3px; background: var(--accent); }
.next-card { opacity: 0.96; }
.next-card .card-title { font-size: 17px; }
@media (pointer: coarse) { .wk-day { min-height: 56px; } }


/* ===== exercise library browse ===== */
.group-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; }
/* the browse row is ONE line that scrolls horizontally within itself — the overflow belongs to the row, never
   to the page or the sheet (the iPhone side-to-side movement and pinch-zoom limits must not return). Native touch and
   trackpad scrolling, keyboard Tab through the pills, visible focus, aria-pressed on each. */
.group-row.group-row-scroll {
  flex-wrap: nowrap; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  padding: 2px 2px 8px; scroll-padding-inline: 4px; scrollbar-width: thin;
  touch-action: pan-x pan-y pinch-zoom;
}
.group-row-scroll > .group-chip { flex: 0 0 auto; white-space: nowrap; min-height: 44px; min-width: 44px; border-radius: 999px; }
.group-row-scroll > .group-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.group-chip {
  flex: 1 1 auto; min-width: 0; text-align: center;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 650; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  white-space: nowrap;
}
.group-chip.on {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  box-shadow: 0 6px 18px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .group-chip:hover { border-color: var(--border-strong); color: var(--ink); }
  .group-chip.on:hover { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 70%, #fff); }
}
.group-chip:active { transform: scale(0.97); }
@media (pointer: coarse) { .group-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } }
.filter-row[hidden] { display: none; }
.lib-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-3) 0 2px; padding: 6px 2px;
  font-size: 13px; font-weight: 650; color: var(--ink-3);
  background: var(--bg);
}
.lib-head:first-child { margin-top: 0; }
.lib-count { font-weight: 700; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.picker-head { background: var(--surface); margin: var(--sp-3) 0 2px; }
.picker-list .picker-head:first-child { margin-top: 0; }
.search-scope { font-size: 12.5px; color: var(--ink-3); padding: 2px 2px var(--sp-1); }
/* the library's equipment filter: its name and a compact choice on one line under the kinds, the choice a pill as tall
   as the kinds' and lit as a kind is while it narrows the list */
.kit-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.kit-row[hidden] { display: none; }
.kit-row-label { flex: none; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.input.kit-select {
  flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; min-height: 44px;
  padding: 8px 34px 8px 15px; border-radius: 999px; border-color: var(--border);
  font-size: 13.5px; font-weight: 650; color: var(--ink);
}
.input.kit-select.on { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
/* the muscle filter under it: the choice, and the body map's toggle at the row's end; the map itself, front and back,
   kept to a size that leaves the list in view */
.muscle-row { margin-top: -6px; }
.muscle-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.muscle-row .map-toggle { margin-left: auto; flex: none; min-height: 44px; gap: 6px; }
.map-chev { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.map-toggle[aria-expanded="true"] .map-chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .map-chev { transition: none; } }
.map-short { display: none; }
.ex-map { margin: -4px 0 16px; }
.ex-map[hidden] { display: none; }
.ex-map .bd-figures { max-width: 300px; margin: 0 auto; }
.ex-map .bd-figure { max-width: 124px; }
@media (max-width: 430px) { .ex-map .bd-figures { max-width: 260px; } .ex-map .bd-figure { max-width: 104px; } }
/* the narrowest screens: the toggle by its short name (its full one kept for a screen reader), the figures smaller */
@media (max-width: 359px) {
  .map-toggle .map-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .map-toggle .map-short { display: inline; }
  .ex-map .bd-figures { max-width: 232px; }
  .ex-map .bd-figure { max-width: 92px; }
}
/* a favourite's star, before its name wherever an exercise is listed */
.fav-mark { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--accent); }
.fav-mark svg, .fav-btn.on svg { fill: currentColor; }
/* nothing in the library for the equipment chosen: the words, and the way back under them at their own width */
.lib-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lib-empty > .btn { margin-left: 2px; }
/* the exercise page's heading: back, the name over its kind, then the star and options, each a 44 px target, the
   controls centred on the name's first line however many lines the name takes */
.ex-page-head { align-items: flex-start; }
.ex-page-head > .icon-btn, .ex-page-head > .ex-head-actions { margin-top: -10px; }
.ex-head-actions { display: flex; align-items: center; flex: none; margin-right: -8px; }
.ex-head-actions .icon-btn { width: 44px; height: 44px; }
/* a small screen with its text enlarged: Back and the star and options on a row of their own, the name across the row
   beneath them, so it is never broken within a word */
@media (max-width: 319px) {
  .ex-page-head { flex-wrap: wrap; row-gap: 2px; }
  .ex-page-head > .icon-btn { margin-inline-start: -12px; }
  .ex-page-head > .ex-head-actions { margin-inline-start: auto; }
  .ex-page-head > .builder-head-main { order: 1; flex: 1 1 100%; }
}
.fav-btn.on { color: var(--accent); }


/* ===== per side / hidden ===== */
.runner-target.side-note { font-size: 13.5px; color: var(--wc, var(--accent)); font-weight: 650; }
.group-chip.hidden-chip { flex: 0 0 auto; color: var(--ink-3); }
.group-chip.hidden-chip.on { color: var(--accent-ink); }


/* ===== exercise content + review ===== */
.content-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.content-summary { font-size: 15px; line-height: 1.5; }
.content-block { display: flex; flex-direction: column; gap: 3px; }
.content-block h3 { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.content-block p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.content-focus { font-size: 13.5px; color: var(--ink-2); padding: 8px 12px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.unreviewed-chip { font-size: 12px; font-weight: 650; color: var(--ink-3); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 9px; }
.review-meta { font-size: 12.5px; color: var(--ink-3); }
.review-block { display: flex; flex-direction: column; gap: 4px; }
.review-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.review-count { font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.review-count.over { color: var(--danger); }
.review-field { resize: vertical; line-height: 1.5; font-size: 14.5px; }
.review-actions { margin-top: var(--sp-2); }
.review-actions .grow { flex: 1; }
.review-field.missing { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }


/* ===== brand mark ===== */
.logo { display: inline-flex; color: var(--accent); flex: none; }
.logo svg { width: 100%; height: 100%; display: block; }
.brand-ver { align-self: baseline; }
.brand-logo { width: 26px; height: 26px; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.rest-logo { width: 44px; height: 44px; opacity: 0.9; margin-bottom: 2px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.about-brand { display: flex; align-items: center; gap: 14px; padding: 4px 0 6px; }
.about-logo { width: 40px; height: 40px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.about-name { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }


/* ===== share QR ===== */
.qr-wrap {
  background: #FFFFFF; border-radius: var(--radius); padding: 12px;
  margin: 0 auto; width: min(100%, 360px); aspect-ratio: 1;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}
.qr-wrap svg { width: 100%; height: 100%; display: block; }
.qr-hint { font-size: 13px; color: var(--ink-2); text-align: center; margin-top: var(--sp-3); }


/* ===== layout fixes ===== */
/* Buttons never stack their own label. If a row is too narrow the whole
   button wraps to the next line instead. */
.btn { white-space: nowrap; }
.btn-row { flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 auto; min-width: 0; }
.chat-effect { white-space: normal; } /* the label wraps — the earlier nowrap rule clipped long confirmations */

/* Share sheet: the primary action alone, the two secondaries side by side. */
.share-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.share-actions .btn-row { flex-wrap: nowrap; }
.share-actions .btn-row > .btn { flex: 1 1 0; }

/* Share-card sheet: the preview sits on a checkerboard so the
   see-through styles read as see-through; three style swatches, one on. */
.share-card-stage {
  padding: 12px; border-radius: var(--radius);
  background-color: #7A8290;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.14) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.14) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.14) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.14) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px;
}
.share-card-stage { display: flex; justify-content: center; }
/* the preview is capped so the style swatches and the actions are on screen without scrolling — on a
   phone a full-width 4:5 preview filled the sheet and hid the options below the fold */
.share-card-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 38dvh; border-radius: 8px; min-height: 120px; }
.share-styles { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.share-style {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 6px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13px; font-weight: 620; color: var(--ink-2);
}
.share-style.on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.share-style-label { line-height: 1; }
.share-style-dot {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.share-style-dot.dark { background: #0B0E12; }
.share-style-dot.glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.02)),
    rgba(11,14,18,0.55);
  border-color: rgba(255,255,255,0.65);
}
.share-style-dot.transparent {
  background-color: #9CA3AF;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.35) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.35) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.35) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.35) 75%);
  background-size: 10px 10px; background-position: 0 0, 5px 5px;
}
.share-card-hint { margin-top: var(--sp-2); min-height: 2.6em; }
@media (max-height: 640px) { .share-card-img { max-height: 26dvh; } .share-card-hint { min-height: 0; } } /* a 320×568 phone keeps Save/Share on screen */
.push-state { font-variant-numeric: tabular-nums; opacity: 0.85; }
.legacy-key { margin-bottom: var(--sp-3); }
.wear-why { opacity: 0.9; }
.write-failed { margin: 0 var(--sp-4) var(--sp-3); }
.coach-quarantine { margin-bottom: var(--sp-4); border-color: var(--accent); }

/* Runner exercise title: the options button anchors to the card corner so
   the centred title stays centred and the dots no longer sit beside its
   last word. */
.runner-main { position: relative; }
.runner-ex-row { justify-content: center; padding: 0 44px; }
.ex-actions-btn { position: absolute; top: 10px; right: 10px; margin-top: 0; }
/* the exercise name is tappable — it opens the guide */
.runner-ex.guide-link { cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--wc) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.runner-ex.guide-link:active { opacity: 0.8; }

/* Week view on mobile: each day is a row — date block on the left at a fixed
   width, then chips or "Rest" filling the remainder.
   `align-items: center` is what keeps the two columns on the same
   optical line. An earlier pass set `stretch` here, which let a single short
   line like "Rest" sit at the top of a stretched box while the date sat
   centred beside it. Both declarations lived in different blocks, so the
   later one silently won — they are merged here so there is one answer. */
@media (max-width: 899px) {
  .week-day { min-height: 0; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .week-day-head { width: 92px; flex: none; flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; }
  .week-wd { font-size: 11px; }
  .week-num { font-size: 18px; }
  .week-chips { flex-direction: column; flex: 1; }
  .week-rest { display: flex; align-items: center; }
  .week-day .cal-chip { padding: 3px 8px; }
}

/* ===== classes + guide sheet ===== */
.activity-card .card-title { font-size: 19px; }
.guide-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.guide-meta { font-size: 12.5px; color: var(--ink-3); }

/* ===== records ===== */
.record-card .card-body { gap: var(--sp-2); }
.record-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; }
.record-meta { font-size: 12px; color: var(--ink-3); }
.record-headline { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.record-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.record-label { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.record-when { font-size: 12.5px; color: var(--ink-2); }
.pin-btn { color: var(--ink-3); }
.pin-btn.on { color: var(--accent); }
.pin-btn.on .icon { filter: drop-shadow(0 0 6px var(--accent-glow)); }
.record-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.record-row {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: 'name spark value' 'label spark value';
  gap: 0 var(--sp-3); align-items: center; text-align: left;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border);
}
.record-row-name { grid-area: name; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-row-label { grid-area: label; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.record-row-value { grid-area: value; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.pr-summary {
  display: flex; flex-direction: column; gap: var(--sp-2); width: 100%;
  padding: var(--sp-3); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--wc) 45%, var(--border));
  background: color-mix(in srgb, var(--wc) 9%, var(--surface));
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--wc) 70%, transparent);
}
.pr-summary-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; }
.pr-summary-head .icon { color: var(--wc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wc) 65%, transparent)); }
.pr-summary-list { display: flex; flex-direction: column; gap: 4px; }
.pr-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 13.5px; }
.pr-summary-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-summary-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== API setup walkthrough ===== */
.setup-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.setup-step { display: flex; gap: var(--sp-3); align-items: flex-start; }
.setup-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: var(--accent-ink); background: var(--accent);
}
.setup-title { font-size: 14.5px; font-weight: 700; }
.setup-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.dlg-actions a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }


/* ===== iOS double-tap zoom =====
   Safari waits ~300ms on every tap of an interactive element in case a second
   tap follows, and zooms if it does. Two taps in quick succession on a stepper
   or Complete set therefore zoomed the page mid-workout.
   `touch-action: manipulation` keeps pinch-zoom and scrolling but drops
   double-tap-to-zoom, so the accessibility of zooming is untouched — unlike
   user-scalable=no, which we deliberately do not use. */
button, a, label, input, select, textarea, summary,
.btn, .icon-btn, .chip, .group-chip, .wd-pill, .step-btn, .big-step-btn,
.seg-btn, .tab-item, .nav-item, .card.list-row, .picker-row, .choose-item,
.month-cell, .week-day, .mini-month, .colour-dot, .set-rep-quick, .set-open,
.record-row, .wk-day, .desc-toggle, .card-title-btn, .pin-btn, .cal-chip {
  touch-action: manipulation;
}

.warn-card { border-color: color-mix(in srgb, var(--amber, #F59E0B) 45%, var(--border)); background: color-mix(in srgb, #F59E0B 8%, var(--surface)); }
.warn-card .eyebrow { color: #F59E0B; }

/* ===== workout reordering ===== */
.workout-card { transition: box-shadow 0.15s var(--ease-out), opacity 0.15s var(--ease-out); }
.workout-card.dragging, .ex-card.dragging {
  position: relative; z-index: 5; opacity: 0.96;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55);
  transition: none;                       /* the transform follows the finger */
}
.workout-card:not(.dragging), .ex-card:not(.dragging) { transition: transform 0.16s var(--ease-out); }
.workout-card .card-top { align-items: flex-start; }
.workout-card .drag-handle { margin-left: auto; }

.link-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; resize: none; }


/* ===== polish pass — cosmetic only; no layout properties here ===== */

/* Desktop scrollbars in the app's own palette rather than the OS default. */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* Every interactive row answers a press the same way a button does. */
.card.list-row, .picker-row, .choose-item, .record-row, .runner-set-row, .history-row, .week-day, .month-cell {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.record-row:active, .history-row:active, .week-day:active { transform: scale(0.992); }

/* Chips and pills settle into their selected state instead of jumping. */
.chip, .group-chip, .wd-pill, .seg-btn, .colour-dot, .pin-btn, .switch-track, .switch-thumb {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* Inputs: a calm ring, the same on every field. */
.input, textarea.input, select.input { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }

/* Big numbers everywhere share one voice: tight, tabular, heavy. */
.big-step-val, .stat-value, .mini-val, .record-value, .record-row-value, .runner-clock, .summary-row strong, .pr-summary-val {
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* Progress fills ease to their new length. */
.review-bar-fill, .progress-fill, .bar-fill, .streak-fill { transition: width var(--dur-slow) var(--ease-out); }

/* Cards that the user can act on lift very slightly on a fine pointer; static
   cards do not, so the lift means "this is a control". */
@media (hover: hover) and (pointer: fine) {
  .workout-card:hover, .card.list-row:hover, .record-card:hover, .activity-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
}

/* Reduced motion: every transition and animation above collapses to instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .tab-item::before { transition: none; }
}


/* ===== foldable library sections ===== */
/* .lib-head is now a <button>; strip the UA button chrome and keep its look. */
.lib-fold { width: 100%; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
@media (hover: hover) and (pointer: fine) { .lib-fold:hover { color: var(--ink); } .lib-fold:hover .lib-chev { color: var(--ink); } }
.lib-head-side { display: inline-flex; align-items: center; gap: 8px; }
.lib-chev { width: 15px; height: 15px; color: var(--ink-3); transition: transform var(--dur) var(--ease-out); transform: rotate(90deg); }
.lib-fold.folded .lib-chev { transform: rotate(0deg); }
/* 1fr → 0fr grid rows: height animates without measuring anything. */
.lib-sec { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.28s var(--ease-out); }
.lib-sec-inner { overflow: hidden; min-height: 0; visibility: visible; transition: visibility 0s; }
.lib-sec.folded { grid-template-rows: 0fr; }
/* a folded section is out of reach as well as out of sight: its body is hidden once its fold has run (the view sets inert on it at once, which takes it from the Tab order where the browser knows inert); a search that opens it gives it back */
.lib-sec.folded .lib-sec-inner { visibility: hidden; transition: visibility 0s linear 0.28s; }
.group-block.folded.search-open .lib-sec .lib-sec-inner { visibility: visible; transition: visibility 0s; }
@media (prefers-reduced-motion: reduce) { .lib-sec, .lib-chev { transition: none !important; } }


/* the hidden attribute must always win. Author display rules (.stack's
   flex, .btn's inline-flex) otherwise override the UA's [hidden] and "hidden"
   elements render anyway — which put the code box on step one of the sign-in
   sheet in production. */
[hidden] { display: none !important; }

/* calendar.js emits an empty .day-panel.hidden-mobile placeholder on
   phones (the day sheet replaces it there) but no rule ever hid it, so every
   phone showed an empty bordered box under the month grid. */
@media (max-width: 899px) { .hidden-mobile { display: none !important; } }

/* ===== accounts ===== */
.code-input {
  font-size: 26px; font-weight: 700; letter-spacing: 10px; text-align: center;
  font-variant-numeric: tabular-nums; padding-left: 10px;
}
.signin-err { font-size: 13.5px; color: var(--danger); font-weight: 600; }
.signin-err[hidden] { display: none; }
.signin-foot {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: var(--sp-4); font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}
.signin-foot .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.acct-email { font-size: 14px; font-weight: 600; word-break: break-all; text-align: right; }

/* ===== account bootstrap / conflict ===== */
.conflict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0; }
.conflict-side {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.conflict-label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink-3); text-transform: uppercase; }
.conflict-when { font-size: 15px; font-weight: 700; color: var(--ink); }
.conflict-note { font-size: 12.5px; color: var(--ink-2); }
.conflict-newer { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-2); }

/* ===== #/debug diagnostics ===== */
.dbg-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.dbg-k { color: var(--ink-2); flex: none; max-width: 55%; }
.dbg-v { color: var(--ink); text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
.dbg-line.ok .dbg-v { color: var(--accent); }
.dbg-line.bad .dbg-v { color: var(--danger); font-weight: 600; }
/* the workouts opened from History, timed (#/debug/opening): the time to the screen large, then what was going on and
   each step; an open of a second or more marked in the danger colour */
.opening-list { margin-top: var(--sp-3); }
.opening-row .card-body { gap: 6px; }
.opening-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.opening-ms { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.opening-row.slow .opening-ms { color: var(--danger); }
.opening-when { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opening-steps { font-variant-numeric: tabular-nums; }
.opening-step { white-space: nowrap; }
.opening-value { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.opening-slowest { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
/* a link inside a setting's note (Each step): seen as one, in the interface's accent, underlined */
.settings-note a.link { color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.settings-note a.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ===== welcome card ===== */
.welcome-card { --wk: var(--accent); }
.welcome-card .card-body { display: flex; flex-direction: column; gap: 10px; }
.welcome-card .card-meta { margin-bottom: 4px; }
.btn-link.welcome-signin {
  background: none; border: 0; cursor: pointer; padding: 8px 0 2px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent);
  text-align: center; width: 100%;
}

/* ===== workout groups ===== */
.group-head-row { display: flex; align-items: center; gap: 4px; margin-top: var(--sp-3); }
.group-head-row .lib-head { flex: 1; margin: 0; position: static; }
.group-manage { color: var(--ink-3); }
.group-head-row + .lib-sec .workout-grid { padding-top: var(--sp-2); }

/* ===== Coach credit strip ===== */
.coach-balance {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.coach-balance .cb-text { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.coach-balance.low .cb-text { color: var(--danger); }
.btn.btn-xs { padding: 5px 12px; font-size: 12.5px; border-radius: 999px; }

/* ===== Coach credit block ===== */
/* One vertical rhythm for the whole card: 20px between blocks, 8px inside a
   block. The hero is the only centred element; everything below it is a normal
   left-aligned settings row, so the eye has one alignment edge to follow. */
.credit-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 18px 20px; margin: 0 0 20px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.credit-num {
  font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -1.5px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.credit-label {
  margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-3);
}
.credit-hint {
  margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
  text-align: center; max-width: 30ch;
}
.credit-packs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  width: 100%; margin-top: 18px;
}
.pack-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 12px 6px; height: auto; min-height: 62px; min-width: 0;
  white-space: normal; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pack-price { font-size: 18px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.pack-credits { font-size: 11px; font-weight: 600; line-height: 1.1; color: var(--ink-3); }
.pack-each { font-size: 11px; font-weight: 600; line-height: 1.1; color: var(--accent); }
/* a pack's tag sits above its price; the pack bought last is outlined in the accent */
.pack-btn { position: relative; padding-top: 18px; }
.pack-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
  background: var(--accent); color: var(--bg);
}
.pack-btn.pack-last { border-color: var(--accent); }
/* a narrow phone: the three packs keep their columns inside the card, with a little more room and the words wrapping */
@media (max-width: 380px) {
  .credit-hero { padding-left: 12px; padding-right: 12px; }
  .credit-packs { gap: 8px; }
  .pack-btn { padding-left: 4px; padding-right: 4px; }
  .pack-price { font-size: 16px; }
  .pack-tag { font-size: 9px; padding: 2px 6px; letter-spacing: 0; }
}
.credit-foot { margin-top: 12px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* the card's own rhythm */
.coach-card .card-body > * + * { margin-top: 20px; }
.coach-card .card-body > .credit-hero { margin-top: 18px; }
.coach-card .settings-note { line-height: 1.5; }
.coach-card .switch-label { margin: 0; }

.btn-link.advanced-toggle {
  background: none; border: 0; cursor: pointer; padding: 4px 0; width: 100%;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3);
  text-align: center;
}
.credit-hero[hidden] { display: none !important; }
.credit-hero .btn-primary { margin-top: 16px; width: 100%; }

/* ============================================================
   polish: onboarding hero, group presentation, motion
   ============================================================ */

/* Onboarding hero (Today, fresh install, signed out) */
.welcome-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.welcome-card .card-body { gap: 12px; }
.welcome-title { font-size: 22px; letter-spacing: -0.01em; }
.welcome-row { display: flex; gap: 8px; align-items: stretch; }
.welcome-row .input { flex: 1; min-width: 0; font-size: 16px; }
.welcome-row .btn { white-space: nowrap; }
.welcome-fine { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.welcome-fine .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.welcome-alt .btn-link { padding: 4px 0; font-size: 13px; }
/* the post-first-session welcome */
.welcome-card.kept { --wk: var(--accent); }
@media (max-width: 420px) {
  .welcome-row { flex-direction: column; }
  .welcome-row .btn { width: 100%; }
}

/* Workout groups: a proper section header, not grey text */
.group-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2); padding: 10px 12px 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--accent);
  font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink);
}
.group-head .lib-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink);
  font-size: 12px;
}
.group-head .lib-chev { color: var(--ink-2); }
.group-head.folded { opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .group-head:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } }
/* the group's cards sit visibly inside their section */
.group-head + .lib-sec .lib-sec-inner { padding-left: 6px; border-left: 2px solid color-mix(in srgb, var(--accent) 18%, transparent); margin-left: 6px; }

/* Route entrance animation already lives above (view-in) — nothing to add. */

/* Device: no 13px inputs — iOS zooms the page on focus under 16px */
.key-row .input { font-size: 16px; }

/* exercise illustrations — square, contained, never jumping the layout */
.ex-media {
  display: block; width: min(100%, 300px); aspect-ratio: 1 / 1; height: auto;
  margin: 4px auto 6px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--line);
}

/* the exercise name in the editor is the way into its guide */
.ex-name-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; border-radius: 6px;
}
.ex-name-btn .ex-name-info { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink-3); }
.ex-name-btn:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .ex-name-btn:hover .ex-name-info { color: var(--accent); } }
.ex-name-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   Today sections, coming up, foldable workouts, progress
   ============================================================ */
.section-label { margin: 0 0 var(--sp-2); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.today-section { margin-top: var(--sp-4); }
.today-section:first-child { margin-top: 0; }
/* the day's first workout still to do: its own colour washed in from the corner, its name larger */
.card.today-hero {
  background:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--wc, var(--accent)) 20%, transparent) 0%, transparent 62%),
    var(--surface);
  border-color: color-mix(in srgb, var(--wc, var(--accent)) 36%, var(--border));
}
.today-hero .card-title { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.last-time { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.last-time .icon { width: 15px; height: 15px; flex: none; color: var(--wc, var(--accent)); }
.last-time[hidden] { display: none; }
.upcoming-card .card-body { gap: 0; padding: 4px 6px; }
.upcoming-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  border-radius: var(--radius-sm); cursor: pointer;
}
.upcoming-row + .upcoming-row { border-top: 1px solid var(--line); border-radius: 0; }
.upcoming-row:active { background: var(--surface-2); }
.upcoming-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wc, var(--accent)); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc, var(--accent)) 22%, transparent); }
.upcoming-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.upcoming-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-when { font-size: 13px; color: var(--ink-3); }
.upcoming-chev { width: 16px; height: 16px; color: var(--ink-3); flex: 0 0 auto; }

/* foldable workout cards */
.fold-btn .fold-chev { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.workout-card.folded .fold-btn .fold-chev { transform: rotate(-90deg); }
.workout-card.folded .facts, .workout-card.folded .card-body > :not(.card-top) { display: none; }
.workout-card.folded .card-body { padding-top: 12px; padding-bottom: 12px; }
.workout-card.folded .card-title { font-size: 16px; }
.fold-all-ic { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .fold-btn .fold-chev { transition: none; } }

/* progress card */
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-stat { padding: 12px 12px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.hero-val { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-unit { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.hero-lbl { font-size: 12px; color: var(--ink-3); }
.stat-trend { font-size: 12px; font-weight: 650; margin-top: 2px; }
.stat-trend.up { color: var(--ok, #16a34a); }
.stat-trend.down { color: var(--ink-3); }
.stat-trend.flat { color: var(--ink-3); }
.spark-note { font-size: 12px; color: var(--ink-3); }
.consist-wrap, .vol-wrap { display: flex; flex-direction: column; gap: 8px; }
.consist-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.consist-col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.consist-cell { display: block; aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* the grid takes the most-trained workout's colour (--wc, set by the view); the theme accent is the fallback */
.consist-cell.l1 { background: color-mix(in srgb, var(--wc, var(--accent)) 45%, transparent); }
.consist-cell.l2 { background: color-mix(in srgb, var(--wc, var(--accent)) 70%, transparent); }
.consist-cell.l3 { background: var(--wc, var(--accent)); }
.consist-cell.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.consist-cell.future { opacity: 0.35; }
.consist-months { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-bottom: -2px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.consist-months > span { white-space: nowrap; overflow: visible; }
.vol-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.vol-bar { flex: 1; height: calc(var(--h) * 1%); min-height: 2px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.vol-bar.now { background: var(--accent); }
.progress-card .card-body { gap: 16px; }

/* wearables */
.wear-card { --wc: #2DD4BF; }
.wear-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wear-table th, .wear-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.wear-table th:first-child, .wear-table td:first-child { text-align: left; }
.wear-table th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.btn-danger-outline { border-color: color-mix(in srgb, #ef4444 50%, var(--line)); color: #ef4444; }
.wear-today { border-left: 4px solid var(--accent); }
.wear-today.low { border-left-color: #f59e0b; }
.wear-today.high { border-left-color: #22c55e; }
.wear-row { display: flex; gap: 14px; align-items: flex-start; }
.wear-big { display: flex; align-items: baseline; gap: 2px; min-width: 64px; }
.wear-num { font-size: 34px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; }
.wear-unit { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.wear-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wear-plan { color: var(--ink); }

/* privacy.html */
.privacy { max-width: 720px; margin: 0 auto; padding: 28px 20px 80px; line-height: 1.55; }
.privacy h1 { font-size: 26px; margin: 6px 0 4px; }
.privacy h2 { font-size: 16px; margin: 22px 0 6px; }
.privacy p { margin: 0 0 10px; color: var(--ink-2); }

/* ============================================================
   Coach access panel
   ============================================================ */
.access-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.access-panel > .settings-label { font-size: 16px; font-weight: 700; }
.access-panel > .settings-note { margin: -6px 0 2px; }
.access-group {
  display: flex; flex-direction: column;
  padding: 4px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.access-group > .eyebrow { margin: 8px 0 2px; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.access-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; margin: 0; border-bottom: 1px solid var(--line);
  font-size: 15px; cursor: pointer;
}
.access-row:last-child { border-bottom: 0; }
.access-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.access-label { display: block; font-weight: 650; line-height: 1.25; }
.access-sub { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.access-row .switch-input { width: 42px; height: 26px; flex: none; }
.access-row .switch-input::after { width: 20px; height: 20px; }
.access-row .switch-input:checked::after { transform: translateX(16px); }
.access-row.is-disabled { opacity: 0.5; cursor: default; }
.access-row.is-disabled .switch-input { cursor: default; }

/* wearables page polish */
.wear-card .card-body { gap: 12px; }
.wear-brand { display: flex; align-items: center; gap: 10px; }
.wear-brand .card-title { margin: 0; font-size: 20px; letter-spacing: 0.02em; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.status-pill.on { background: color-mix(in srgb, #2DD4BF 18%, transparent); color: #2DD4BF; }
.status-pill.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2DD4BF; }
/* on a light page, its words and dot a deeper teal: readable on the pill's pale tint (4.8:1 for the words) */
html:not(.theme-dark) .status-pill.on { color: #0F766E; }
html:not(.theme-dark) .status-pill.on::before { background: #0D9488; }
/* a pill's words (.pill-text: a status pill's, Runs' pills', the Wearables notice's badge's and the Example label's):
   where the browser can trim a line to its capitals (cap height to baseline), centred on the pill by their capitals —
   level with a pill's dot and with what is beside the pill — the pill's padding the same above and below them; and the
   letter spacing after the last letter taken back (each pill's own, below), so they sit evenly between its ends */
@supports (text-box: trim-both cap alphabetic) {
  .pill-text { display: block; text-box: trim-both cap alphabetic; }
  .status-pill { padding-top: 6px; padding-bottom: 6px; }
}
.status-pill > .pill-text { margin-right: -0.04em; }
.wear-sync { margin: -4px 0 0; font-size: 13px; }
.wear-empty { padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px dashed var(--line); }
.wear-empty-title { font-weight: 650; margin-bottom: 4px; }
.wear-foot { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.btn-link.danger { color: #ef4444; font-size: 13px; padding: 6px 0; }
.card .access-row { padding: 12px 0 14px; border-bottom: 0; }

/* freshness */
.wear-today.stale { border-left-color: var(--ink-3); }
.wear-stale { color: #f59e0b; font-size: 13px; margin: -4px 0 0; }

/* wearables page spacing */
.wear-stack { display: flex; flex-direction: column; gap: 14px; }
.wear-card .card-body { padding-right: 18px; }
.wear-brand { flex-wrap: wrap; row-gap: 6px; }
.wear-empty { margin-top: 2px; }
.wear-foot { margin-top: 8px; padding-top: 10px; }
.card .access-row { padding: 6px 0 10px; }

/* workout groups read as groups; folded cards are a compact row */
/* a group is a CONTAINER, not a rail. The children sit inside a distinct, slightly recessed surface with
   its own edge and radius; the header is the container's top bar rather than a floating pill; a swatch beside
   its name carries the colour of the workout the group leads with (the head sets --wc from its first card, the
   Classes section from its first class), so a group is known by the same colour as its top card and the swatch
   no longer merges with the first card's own colour bar beside it. This is the grouped-list pattern (iOS grouped
   tables, Material sections): hierarchy is spatial — inside/outside — not inferred from a line. */
.group-block {
  margin: 20px 0 8px; padding: 0 12px 12px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.group-block:first-of-type { margin-top: 12px; }
.group-block.folded { padding-bottom: 0; }
.group-block .group-head-row { margin: 0 -12px 12px; }
.group-block .group-head {
  margin: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  background: transparent; padding: 14px 12px 14px 16px;
}
.group-block .group-head::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
  background: var(--wc, var(--accent)); margin-right: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wc, var(--accent)) 18%, transparent);
}
.group-block .group-head > span:first-of-type { flex: 1 1 auto; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-block .group-head .lib-head-side { flex: 0 0 auto; }
.group-block.folded .group-head { border-bottom: 0; border-radius: var(--radius); }
.group-block.folded .group-head-row { margin-bottom: 0; }
/* the manage button sits in the same bar as the title: the bar is the ROW, so its divider runs under both */
.group-block .group-head-row { align-items: stretch; border-bottom: 1px solid var(--line); }
.group-block .group-head-row > .group-head { border-bottom: 0; }
.group-block .group-head-row > .icon-btn, .group-block .group-head-row > button:not(.group-head) { align-self: center; margin-right: 8px; }
.group-block.folded .group-head-row { border-bottom: 0; }
.group-block .lib-sec-inner { padding-left: 0; border-left: 0; margin-left: 0; }
.group-head + .lib-sec .lib-sec-inner { padding-left: 0; border-left: 0; margin-left: 0; }
/* an adjacent-sibling margin staggered the grid — in a desktop row the second and third cards
   sat 10 px below the first. The grid already has its own gap; extra breathing room in the single-column phone
   layout comes from a larger row-gap there, which cannot offset cards against each other. */
@media (max-width: 680px) { .workout-grid { row-gap: 24px; } }
.workout-card.folded .card-body { padding: 10px 12px 10px 16px; }
.workout-card.folded .card-top { align-items: center; gap: 8px; }
.workout-card.folded .card-head-text { display: flex; align-items: center; min-width: 0; }
.workout-card.folded .card-title { font-size: 16px; margin: 0; line-height: 1.2; }
.workout-card.folded .workout-card-actions { margin-left: auto; } /* the group carries the auto margin now, not the first button inside it */

/* in-page checkout */
.checkout-status { min-height: 22px; margin: 0; font-size: 14px; color: var(--ink-3); }
.checkout-gpay { min-height: 0; }
.checkout-gpay > * { width: 100%; }
.checkout-gpay:not(:empty) { margin-bottom: 10px; }
.checkout-paypal { min-height: 48px; }
.checkout-fallback { align-self: center; font-size: 13px; margin-top: 4px; }
.checkout-other { align-self: center; font-size: 13px; margin-top: 8px; }
/* Coach: out of credits, with the question kept; the one-time note that credits became questions */
.coach-out { margin-top: var(--sp-2); }
.coach-unit-note { margin-bottom: var(--sp-2); }

/* checkout polish — dark, even, no white strips */
.checkout-paypal, .checkout-gpay { background: transparent; }
.checkout-paypal iframe { border-radius: 10px; }
.checkout-gpay > button, .checkout-gpay .gpay-button { border-radius: 10px !important; height: 48px !important; min-height: 48px; }
.checkout-status:not(:empty) { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); line-height: 1.4; word-break: break-word; }

/* PayPal's button iframes are transparent; Chrome paints white behind a
   light iframe embedded in a dark page. Declaring the container light removes
   the mismatch and the white strips. */
.checkout-paypal, .checkout-paypal iframe { color-scheme: light; background: transparent; }

/* multi-provider wearables */
.wear-provider-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.wear-provider .btn-link.danger { padding: 4px 0; }
.privacy h3 { font-size: 14px; margin: 16px 0 4px; color: var(--ink-2); }

/* wearables: in-testing notice */
.wear-notice { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.wear-notice .card-body { gap: 6px; padding: 12px 14px; }
.wear-notice-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.wear-notice-badge { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
/* the notice's heading whole at every width: under its badge when the line is too narrow for both */
.wear-notice-title { font-weight: 650; font-size: 14.5px; min-width: 0; overflow-wrap: break-word; }
.wear-notice-copy { margin: 0; font-size: 13px; line-height: 1.45; }
.wear-notice-link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* before sign-in: the services, and the screen with one connected as an example, labelled so */
.wear-example { margin: 0; }
.wear-example-label {
  flex: none; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
/* the notice's badge and the Example label: their words centred on them by their capitals (.pill-text), the letter
   spacing after the last letter taken back; the Example label level with the service's name and pill beside it */
.wear-example-label { align-self: center; }
.wear-notice-badge > .pill-text { margin-right: -0.06em; }
.wear-example-label > .pill-text { margin-right: -0.08em; }
@supports (text-box: trim-both cap alphabetic) {
  .wear-notice-badge, .wear-example-label { display: inline-flex; align-items: center; }
  .wear-notice-badge { padding-top: 6px; padding-bottom: 6px; }
  .wear-example-label { padding-top: 5px; padding-bottom: 5px; }
}
.wear-devices { font-size: 13px; }

/* Google Health disclosure */
.disclosure-list { margin: 4px 0 8px 18px; padding: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.disclosure-strong { color: var(--ink); font-weight: 600; }

/* skipped occurrences: visible, quiet */
.day-occ.is-skipped { opacity: 0.62; }
.day-occ.is-skipped .day-occ-name { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.day-occ-status.skipped { color: var(--ink-3); }
.card.is-skipped { opacity: 0.7; }
.done-badge.skipped-badge { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-3); }

/* skipped: the fourth state on compact surfaces */
.cal-chip.skipped { color: var(--ink-3); opacity: 0.7; }
.cal-chip.skipped .chip-label, .cal-chip.skipped .chip-name { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.cal-chip.skipped .chip-dot { opacity: 0.35; box-shadow: none; }
.wk-dot.skipped { background: transparent; border: 1.5px solid color-mix(in srgb, var(--ink-3) 70%, transparent); width: 6px; height: 6px; opacity: 0.55; }
.mini-cell.has.skipped { --wc: var(--ink-3); opacity: 0.6; }

/* plans */
.prog-card { text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.prog-card:active { transform: scale(0.995); }
.prog-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.prog-chev { flex: none; margin-top: 4px; }
.prog-card .card-desc { margin: 0; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prog-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.prog-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wc, var(--accent)); }
.prog-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 8px; }
.prog-day { padding: 10px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-weight: 650; font-size: 13px; }
.prog-day.on { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.prog-entry { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.icon.rot90 { transform: rotate(90deg); }
/* top of the header, centred on the title's first line (22px × 1.1 line-height against a 36px button), never shrunk by a long name */
.share-card-btn { align-self: flex-start; flex: none; margin-top: -6px; }

/* plan exercise rows open the guide */
.preview-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
.preview-link .preview-name { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); text-underline-offset: 3px; }
/* on Today a chevron says the rows open the exercise guide, in place of the underline. The exercise's name is the
   person's own: it shrinks and wraps at its spaces, a long unbroken one breaks rather than push the sets and the
   chevron out of the row; the sets wrap in a column of their own, no wider than half the row */
.today-section .preview-link .preview-name { text-decoration: none; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.today-section .preview-link .preview-sets { margin-left: auto; flex: 0 0 auto; min-width: 0; max-width: 50%; }
.preview-link .preview-chev { width: 16px; height: 16px; flex: none; color: var(--ink-3); margin-left: -2px; }
.preview-link:active { opacity: 0.7; }

/* wearable provider cards */
.wear-provider .card-body { gap: 12px; }
.wear-provider-head { display: flex; align-items: center; gap: 14px; }
.wear-mark { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-bg); color: var(--brand); display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.wear-mark img { width: 72%; height: 72%; object-fit: contain; }
.wear-mark img + .wear-mono { display: none; }
.wear-mark img:not([src]) + .wear-mono { display: block; }
.wear-mono { font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
.wear-provider-text { min-width: 0; flex: 1; }
.wear-provider-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.wear-provider .card-meta { margin: 2px 0 0; }
.wear-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wear-notes li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.wear-notes .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.wear-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px var(--sp-2) 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.page-note .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.wear-provider .fact .icon { color: var(--accent); }
.welcome-card { --wc: var(--accent); }

/* start here */
.start-here .card-body { gap: 10px; }
.start-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: inherit; font: inherit; }
.start-option.primary { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.start-option:active { transform: scale(0.99); }
.start-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.start-option-title { font-weight: 700; font-size: 15px; }
.start-option.primary .start-option-title { color: var(--accent); }
.start-option-sub { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.start-coach { margin: 2px 0 0; }
.start-coach .btn-link { display: inline; padding: 0; }
.start-coach .btn-link { color: var(--accent); font-weight: 600; }

/* welcome: secondary actions are buttons, not sentences */
/* the secondary actions stay compact so "Get started" is the biggest thing on the card; they only stretch on narrow phones */
.welcome-alt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 4px; }
.welcome-alt .btn { flex: 0 0 auto; justify-content: center; }
@media (max-width: 420px) { .welcome-alt .btn { flex: 1 1 auto; } }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-2); }
.icon.rot180 { transform: rotate(180deg); }

/* exercise guide */
.guide-facts { margin-bottom: 2px; }
.guide-facts .fact .icon { color: var(--accent); }
.guide-section { display: flex; flex-direction: column; gap: 6px; }
.guide-section h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 6px; }
.guide-steps li { counter-increment: step; display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.guide-steps li::before { content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); margin-top: 1px; }
.guide-rep { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); font-size: 14px; line-height: 1.5; color: var(--ink); }
.guide-rep .icon { flex: none; color: var(--accent); margin-top: 2px; }
.guide-rep-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.guide-focus { padding: 8px 12px; border-left: 2px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.guide-focus-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* notifications */
.notif-part { display: contents; }
.notif-row { align-items: center; }
.notif-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.notif-select { padding: 6px 28px 6px 10px; font-size: 13px; min-width: 0; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.notif-time { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); color-scheme: dark; }
.notif-time { padding: 6px 8px; font-size: 13px; width: auto; }
.notif-controls > :disabled { opacity: 0.45; }
.notif-text { min-width: 0; flex: 1; }
.notif-sub { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

/* Coach "About you" card and the free first question */
.about-you { margin-bottom: var(--sp-3); }
.about-you-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.about-you-title { display: flex; align-items: baseline; gap: 4px; }
.about-you-optional { font-size: 12px; color: var(--ink-2); }
.about-you-summary { font-size: 15px; font-weight: 600; margin: var(--sp-1) 0; overflow-wrap: break-word; }
.about-you-form { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.about-you-field { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-2); }
.about-you-label { font-size: 13px; color: var(--ink-2); }
.about-you-error { grid-column: 1 / -1; font-size: 12px; color: var(--danger); min-height: 0; }
.about-you-explain { margin: var(--sp-2) 0; }
.about-you-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.about-you-remove { margin-top: var(--sp-2); }
.coach-details-input { flex: 0 1 160px; min-height: 40px; max-width: 160px; text-align: right; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; }
select.coach-details-input { text-align: left; }
.coach-details-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
@media (pointer: coarse) { .coach-details-input { min-height: 44px; } }
/* About you: how the person trains — sections, chips, notes, and the saved lines */
.about-you-section { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.about-you-section + .about-you-section { border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-1); }
.about-you-legend { padding: 0; margin-bottom: var(--sp-1); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.about-you-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.about-you-chips { gap: 6px; }
.about-you-chips .chip { white-space: normal; text-align: left; line-height: 1.25; }
.about-you-field-wide { grid-template-columns: 1fr; row-gap: 6px; }
.about-you-field-wide .coach-details-input { max-width: none; width: 100%; flex: none; text-align: left; }
.about-you-note { width: 100%; min-height: 64px; resize: vertical; line-height: 1.4; }
.about-you-saved { display: flex; flex-direction: column; gap: 4px; margin: var(--sp-1) 0; }
.about-you-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.about-you-line { font-size: 14px; color: var(--ink-2); overflow-wrap: break-word; }


/* Plans sections and benchmark templates */
.plans-section { margin-top: var(--sp-4); }
.plans-section-sub { margin-top: -6px; margin-bottom: var(--sp-2); }
.bench-card .card-desc { margin-bottom: var(--sp-1); }
/* the variation and option pickers are NOT the seven-column weekday grid — variations stack full width;
   short option choices wrap in a row; the block preview stacks its heading over its movements and wraps them */
.bench-variants { display: flex; flex-direction: column; gap: 8px; grid-template-columns: none; }
.bench-variants .prog-day { flex: 1 1 auto; width: 100%; text-align: left; height: auto; min-height: 44px; padding: 10px 12px; white-space: normal; line-height: 1.35; overflow-wrap: break-word; }
.bench-option .bench-variants { flex-direction: row; flex-wrap: wrap; }
.bench-option .bench-variants .prog-day { flex: 1 1 140px; width: auto; text-align: center; }
.bench-preview { margin: var(--sp-2) 0; }
.bench-preview li[data-block-kind] { flex-direction: column; align-items: stretch; gap: 4px; }
.bench-preview li[data-block-kind] .preview-name { font-weight: 600; }
.bench-preview .preview-sets { white-space: normal; overflow-wrap: break-word; line-height: 1.4; text-align: right; }
.bench-preview li[data-block-kind] .preview-sets { text-align: left; }
.runner-elapsed { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 2px; }

/* the benchmark runner */
.bench-clock { font-size: 22px; letter-spacing: 0.02em; }
.bench-main { padding-bottom: var(--sp-4); }
.bench-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.bench-score { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bench-total-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.bench-total-row.done { opacity: 0.6; }
.bench-total-name { font-weight: 600; }
.bench-total-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.bench-total-btns { grid-column: 1 / -1; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bench-stations { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.bench-stations th, .bench-stations td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.bench-stations th:first-child, .bench-stations td:first-child { text-align: left; }
.bench-finish-row { margin-top: var(--sp-3); }
.bench-done .summary-rows { margin: var(--sp-3) 0; }
.bench-option { margin-top: var(--sp-2); }
.bench-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-2) var(--sp-3); padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--ink); font-size: 13px; }
.bench-cell { width: 56px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); font: inherit; text-align: center; }
/* Hyrox: the plans cards and page, and race mode in the benchmark runner */
.hyrox-card .card-desc { margin-bottom: var(--sp-1); }
.hyrox-card .fact { white-space: normal; min-width: 0; max-width: 100%; }
.hyrox-card .fact > span { min-width: 0; overflow-wrap: break-word; }
.hyrox-card .fact > .ic { flex-shrink: 0; }
.hyrox-segments { margin: var(--sp-2) 0; counter-reset: none; }
.hyrox-segments li[data-segment="run"] .preview-name, .race-steps li[data-segment="run"] .preview-name { color: var(--ink-2); }
/* the ordered lists of a race: numbered by their labels, so no marker and no indent */
.hyrox-segments, .race-steps, .race-recent, .race-plan { padding: 0; list-style: none; }
/* a segment's name stays on one line; its prescription wraps beside it */
.hyrox-segments .preview-name, .race-steps .preview-name, .race-plan .preview-name, .race-recent .preview-name { white-space: nowrap; }
.hyrox-note { margin-top: var(--sp-3); }
.race-ready { gap: var(--sp-3); align-self: stretch; }
.race-ready > .preview-list, .race-block > .preview-list { text-align: start; }
.race-steps { margin: 0; }
.race-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); cursor: pointer; text-align: start; }
.race-toggle input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--wc); }
.race-goal { width: 9ch; text-align: center; font-variant-numeric: tabular-nums; }
.race-pacing { display: flex; flex-direction: column; gap: var(--sp-1); }
.race-plan { margin: 0; }
.race-plan .preview-sets { font-variant-numeric: tabular-nums; }
.race-block { gap: var(--sp-2); align-self: stretch; }
.race-clock { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.race-target { min-height: 20px; font-variant-numeric: tabular-nums; }
.race-standing { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.race-recent { margin: 0; }
.race-recent .preview-sets { font-variant-numeric: tabular-nums; white-space: normal; text-align: right; }
.race-done .summary-rows { margin: var(--sp-3) 0 var(--sp-2); }
.race-verdict { margin: 0 0 var(--sp-2); color: var(--ink-2); }
.race-new-best { color: var(--accent); font-weight: 800; }
.race-table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--sp-2) 0; }
.race-done { align-items: stretch; }
.race-done > .eyebrow, .race-done > .runner-ex, .race-done > .race-verdict { align-self: center; }
.race-table th, .race-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.race-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.race-table .race-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.race-table .race-split { font-weight: 700; color: var(--ink); }
.race-label { display: block; font-weight: 600; color: var(--ink); }
.race-row.race-run .race-label { color: var(--ink-2); font-weight: 500; }
.race-rox { display: block; font-size: 12px; color: var(--ink-3); }
.race-table tfoot td { font-weight: 700; border-bottom: 0; padding-top: 9px; }
.race-table tfoot tr[data-race-total="roxzone"] td { font-weight: 500; color: var(--ink-3); padding-top: 2px; }
@media (max-width: 380px) {
  .race-table { font-size: 13px; }
  .race-table th, .race-table td { padding: 6px 3px; }
  .race-table th { font-size: 10px; letter-spacing: 0.02em; }
}
.race-faster { color: var(--accent); font-weight: 700; }
.race-slower { color: var(--ink-2); }
.race-bests { display: flex; flex-direction: column; }
.race-best { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.race-best:last-child { border-bottom: 0; }
.race-best-name { font-weight: 700; color: var(--ink); }
.race-best-time { text-align: right; flex-shrink: 0; }
.race-best-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Coach toolbar, Plans tabs, Settings folds */
.coach-toolbar { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); flex-wrap: wrap; }
.coach-toolbar .coach-balance { flex: 1 1 auto; margin: 0; }
.coach-toolbar .btn.has-info { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.plans-tabs { margin: var(--sp-2) 0 var(--sp-3); }
.plans-tabs .seg-btn { flex: 1 1 0; }
.plans-panel { min-height: 120px; }
.plans-empty { padding: var(--sp-3) 0; }
.fold-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin: 0 0 var(--sp-2); border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fold-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.fold-chevron { transition: transform .15s ease; }
.card.folded .fold-chevron { transform: rotate(-90deg); }
.card.folded .fold-head { margin-bottom: 0; }
/* SCOPED to Settings' own foldable cards. As `.card.folded` this also matched
   `.workout-card.folded` in the library — and, coming later in the file, it beat that card's own rule and hid
   `.card-top`, so a folded workout showed nothing at all and had no control to reopen it. `fold-card` is set by
   Settings' fold helper and by nothing else. */
.card.fold-card.folded > .card-body > :not(.section-title) { display: none; }
.section-title.foldable { margin: 0; }
.section-title.foldable .fold-head { margin: 0 0 var(--sp-2); }

/* summary rows with long labels never run into their value; the session's delete action */
.summary-row > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
/* the value keeps its own width — it is a short score — and the long label wraps beside it.
   Letting the value shrink (flex: 0 1 auto) let "Time 35:45" and "180 reps + cals" run past the right edge. */
.summary-row > strong { flex: 0 0 auto; max-width: 60%; white-space: nowrap; margin-left: 12px; }
@media (max-width: 380px) { .summary-row:not(.stacked) { flex-wrap: wrap; } .summary-row:not(.stacked) > strong { margin-left: 0; } }
.summary-row.stacked { flex-direction: column; align-items: stretch; gap: 4px; }
.summary-row.stacked > strong { margin-left: 0; white-space: normal; overflow-wrap: break-word; font-weight: 600; line-height: 1.4; } /* a prose value wraps under a full-width label */
.danger-zone { margin-top: var(--sp-4); }

/* reporting and the Terms agreement */
.report-reason { text-align: left; height: auto; padding: 10px 12px; white-space: normal; }
.report-reason.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--accent); }
.signin-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.4; padding: 2px 0; }
.signin-agree input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }
/* Sign in with Google: Google's own button under the emailed code. While the Terms box is unticked a clear cover lies
   over it, the size of the button, so a press says to agree first; Google draws its button between 200 and 400px wide */
.signin-google { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.signin-or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.signin-or::before, .signin-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.signin-google-slot { position: relative; width: 100%; max-width: 400px; min-height: 44px; margin: 0 auto; }
.signin-google-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; }
/* Google's frame is a light document: drawn in a light scheme it stays see-through on the dark theme too */
.signin-google-btn iframe { color-scheme: light; }
.signin-google-guard { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; }
.signin-google-status { margin: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
/* where the sign-in steps are laid out as a page: a label over the email, and a line under it */
.signin-label { font-size: 13.5px; font-weight: 650; color: var(--ink-2); margin-bottom: -2px; }
.signin-hint { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: -2px; }

/* ---------------- The welcome screen: a first visit's way in (views/welcome.js) ----------------
   REPPIN's mark on its own glow, and under it a sheet with the sign-in steps: rounded at the top on a phone and
   reaching the bottom edge, a card in the middle of a wider screen. Above the app and its tab bar, under sheets and
   notices. The app behind it is out of reach while it shows */
html.welcome-on, html.welcome-on body { overflow: hidden; }
.welcome-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 52% at 50% -6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 64%),
    var(--bg);
  color: var(--ink);
}
.ws-hero {
  flex: 1 0 auto; min-height: 172px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 26px;
}
.ws-logo { display: block; width: 62px; height: 68px; color: var(--accent); filter: drop-shadow(0 0 24px var(--accent-glow)); }
.ws-logo svg { display: block; width: 100%; height: 100%; }
.ws-word { font-size: 15px; font-weight: 800; letter-spacing: 0.34em; padding-left: 0.34em; color: var(--ink); }
.ws-sheet {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: 28px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border: 1px solid var(--border); border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -22px 60px -30px rgba(0, 0, 0, 0.6);
}
.ws-title { font-size: 26px; line-height: 1.15; font-weight: 750; letter-spacing: -0.015em; text-align: center; }
/* the heading is given the focus so a screen reader starts there; it is not a control, so no ring is drawn on it */
.ws-title:focus, .ws-title:focus-visible, .tour-title:focus, .tour-title:focus-visible { outline: none; box-shadow: none; }
.ws-lede { margin-top: -6px; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-align: center; }
.ws-perk {
  display: flex; align-items: center; justify-content: center; gap: 8px; align-self: center;
  margin: 0; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
}
.ws-perk .icon { width: 16px; height: 16px; flex: none; }
/* a new account that starts without the free credits the screen offered (its address already had them), said under
   "Your account is ready." */
.ws-note {
  margin: 0; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.45; text-align: center; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border);
}
.welcome-screen .stack.tight { gap: 12px; }
.welcome-screen .input { min-height: 52px; padding: 12px 16px; border-radius: 14px; font-size: 16px; background: var(--surface-2); }
.welcome-screen .code-input { font-size: 24px; }
.welcome-screen .btn.btn-block { min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; }
.welcome-screen .signin-google-guard { border-radius: 999px; }
.welcome-screen .dlg-msg { text-align: center; }
.ws-switch { margin: 0; font-size: 14px; color: var(--ink-2); text-align: center; }
.ws-other { display: inline; padding: 6px 2px; font-weight: 700; color: var(--accent); }
/* the second way in: the 10-minute session with no account, under a quiet "or", outlined so the account stays the
   first choice */
.ws-try-row { display: flex; flex-direction: column; gap: 8px; }
.ws-or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ws-or::before, .ws-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.welcome-screen .btn.ws-try {
  gap: 10px; background: transparent; color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--border));
}
.ws-try .icon { width: 18px; height: 18px; color: var(--accent); }
.ws-try-sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); text-align: center; text-wrap: balance; }
.ws-skip { align-self: center; min-height: 40px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.ws-fine { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.ws-fine .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ws-fine .link, .ws-switch .link { color: var(--ink-2); }
@media (max-height: 660px) {
  .ws-hero { min-height: 112px; gap: 10px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 16px; }
  .ws-logo { width: 44px; height: 48px; }
}
@media (min-width: 600px) {
  .welcome-screen { justify-content: center; padding: 40px 16px; }
  .ws-hero { flex: 0 0 auto; min-height: 0; padding: 0 0 26px; }
  .ws-sheet { max-width: 440px; padding: 32px 30px 26px; border-bottom: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lift); }
}

/* ---------------- The first sign-in's tour on Workouts (tour.js) ----------------
   The control a tip is about stays lit in a hole cut in a dimmed screen; the tip sits under it where it fits, else
   over it, with a notch pointing at it. Above the tab bar and the resume pill, under sheets and notices */
/* while it shows, the page under it stays where the tour puts it: no scrolling by hand, no bounce or pull-to-refresh
   from the overlay (the tour brings a control into view itself, which hidden overflow still allows) */
html.tour-on, html.tour-on body { overflow: hidden; }
.tour { position: fixed; inset: 0; z-index: 55; touch-action: none; overscroll-behavior: none; }
.tour.no-target { background: rgba(6, 8, 11, 0.66); }
/* the light sits on its control at every frame (tour.js follows it): no easing that would leave it trailing behind */
.tour-hole {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(6, 8, 11, 0.66);
}
.tour-tip {
  position: fixed; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 16px 14px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lift);
}
.tour-arrow {
  position: absolute; top: -7px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: var(--surface); border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong);
}
.tour-tip.above .tour-arrow { top: auto; bottom: -7px; border: 0; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-count { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.tour-dot.on { width: 16px; border-radius: 3px; background: var(--accent); }
.tour-title { font-size: 17px; font-weight: 750; line-height: 1.25; }
.tour-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.tour-moves { display: flex; gap: 8px; margin-left: auto; }
.tour-skip { padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.chat-report { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* narrow screens and long names */
/* on a phone the station grid becomes one row per station, with its round inputs beside it */
@media (max-width: 520px) {
  .bench-stations, .bench-stations thead, .bench-stations tbody, .bench-stations tfoot, .bench-stations tr, .bench-stations th, .bench-stations td { display: block; }
  .bench-stations thead { display: none; }
  .bench-stations tbody tr { display: grid; grid-template-columns: 44px repeat(2, minmax(0, 1fr)); gap: 6px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .bench-stations tbody td { border: 0; padding: 0; text-align: left; }
  .bench-stations tbody td:first-child { grid-column: 1; font-weight: 700; color: var(--ink-2); }
  .bench-stations tbody td::before { content: attr(data-station); display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 2px; overflow-wrap: break-word; }
  .bench-stations tbody td:first-child::before { content: none; }
  .bench-stations tfoot tr { display: flex; justify-content: space-between; padding-top: 8px; font-weight: 700; }
  .bench-cell { width: 100%; }
}
/* calendar content can shrink inside its tracks */
.week-day, .week-day-body, .month-day, .day-occ, .day-occ-main, .cal-chip { min-width: 0; }
.week-day .chip-name, .month-day .chip-name { min-width: 0; }
/* a long name never pushes controls off a card or collides with them */
.card-head { align-items: flex-start; gap: 10px; }
.card-head-text { flex: 1 1 auto; min-width: 0; }
.card-title { overflow-wrap: break-word; }
.workout-card .card-title { overflow-wrap: break-word; }
.builder-head-main { min-width: 0; flex: 1 1 auto; }
.builder-head-main h1, .page-head h1 { overflow-wrap: break-word; hyphens: none; }
/* a page heading is one or two whole words — it takes the width it needs and the buttons beside it wrap
   underneath on a narrow screen. Before this the heading was the item that shrank, giving "Workou / ts". */
.page-head.row-between { flex-wrap: wrap; row-gap: 10px; }
.page-head.row-between > :first-child { flex: 1 1 auto; min-width: 0; }
/* `flex: 0 0 auto` let the group keep its intrinsic width, so at 320 px the Plans/Import/New
   row was ~341 px inside 288 px of usable space and New sat past the right edge — hidden by the page's own overflow
   clipping, which is why a zero-overflow measurement missed it. The group may now shrink and wrap into deliberate
   rows; the buttons keep their size and the heading keeps its own line. */
.page-head.row-between > .btn-row { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
@media (max-width: 430px) {
  .page-head.row-between > :first-child { flex: 1 1 100%; }
  .page-head.row-between > .btn-row { margin-left: 0; justify-content: flex-start; width: 100%; }
  .page-head.row-between > .btn-row > .btn { flex: 1 1 auto; }
  .page-head.row-between > .btn-row > .icon-btn { flex: 0 0 auto; }
}
.session-ex-name, .rec-ex-name { overflow-wrap: break-word; }
/* on a phone the access description keeps the full width; the button drops to its own line */
@media (max-width: 560px) {
  .access-row { flex-wrap: wrap; }
  .access-row .access-text { flex: 1 1 100%; order: 1; }
  .access-row .switch-input { order: 2; }
  .access-row > .btn { order: 3; flex: 1 1 100%; margin-top: 8px; }
}
/* the builder's exercise title wraps to two lines instead of being cut mid-word */
.ex-title h3 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* long names and small screens */
/* the whole card content path is bounded; long unspaced names wrap instead of widening the card */
.workout-card .card-body, .record-card .card-body, .session-card .card-body { min-width: 0; }
.card-title-btn { min-width: 0; overflow-wrap: break-word; }
.record-name, .record-headline, .record-row-name { overflow-wrap: break-word; min-width: 0; }
.record-row-name { white-space: normal; overflow: visible; text-overflow: clip; }
.record-head { min-width: 0; }
.prog-chip, .chip-name, .lineup-item { min-width: 0; overflow-wrap: break-word; }
.facts, .fact { min-width: 0; }
.fact > span { overflow-wrap: break-word; }
/* four Plans tabs fit a 320 px screen */
.plans-tabs { flex-wrap: wrap; }
.plans-tabs .seg-btn { flex: 1 1 auto; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; } /* never split a tab label */
@media (max-width: 420px) { .plans-tabs .seg-btn { flex: 1 1 40%; font-size: 13px; padding-left: 8px; padding-right: 8px; } } /* two tidy rows rather than four squeezed columns */
.del-alt { margin-top: var(--sp-2); gap: var(--sp-2); }

/* the real lineup and History elements. The grid keeps its meaningful minimum
   column width — a zero minimum here creates twenty ~1 px tracks and collapses every card to 2 px. Only the
   CONTENT of a card needs to be allowed to shrink, never the track. */
.workout-grid > * { min-width: 0; }
.card-lineup, .card-lineup * { min-width: 0; overflow-wrap: break-word; }
.card-lineup { white-space: normal; }
.history-name, .history-title, .history-row, .history-main { min-width: 0; overflow-wrap: break-word; }
/* the chevron stays at the right and the text wraps inside its own column beneath itself. With
   `flex-wrap: wrap` the whole row wraps instead, so a long meta line pushes the chevron onto a line of its own and
   the arrows no longer line up down the list. The text column is the flexible part; the chevron never moves. */
.history-row { flex-wrap: nowrap; }
.history-row > .history-main { flex: 1 1 auto; min-width: 0; }
.history-row > .icon { flex: 0 0 auto; align-self: center; }
/* a long action label wraps inside its button instead of spilling past the outline */
.btn.wrap-label { white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.3; overflow-wrap: break-word; }

/* small orange labels failed contrast in the light theme — #F97316 is 2.80:1 on white and
   2.53:1 on the PR chip's own tint, both well under 4.5:1 for text this size. The light theme derives the TEXT from
   the same colour, darkened, so it works for every workout colour (worst case ~5.2:1) while the tint, border and the
   dark theme are untouched. */
/* the app toggles `theme-dark` only — there is no `theme-light` class, so a rule for the light
   theme names `html:not(.theme-dark)`. */
html:not(.theme-dark) .settings-value.warn { color: color-mix(in srgb, var(--wc) 55%, #000); }
html:not(.theme-dark) .pr-chip { color: color-mix(in srgb, var(--wc, var(--accent)) 55%, #000); }

/* long names people type.
   Two separate problems were conflated before. (a) A row sizes itself to its longest word, so a card GREW to fit a
   40-character name and spilled past the screen: the cure is `min-width: 0` on the flexible column, never a smaller
   font or hidden overflow. (b) A single word longer than the whole column has to break somewhere: these elements —
   and only these, all of them user-entered text — may break inside a word as a last resort. Ordinary wrapping at
   spaces happens first, so a spaced name never breaks mid-word. Fixed labels, headings, tabs and buttons keep
   `break-word` and are guarded by the test suite. */
.user-name,
.workout-card .card-title, .card-title-btn,
.history-name, .history-title,
.record-name, .record-row-name,
.session-ex-name, .ex-title h3,
/* the exercise pickers and the workout chooser */
.picker-name, .choose-label,
.list-row-name, .list-row-main,
.chat-effect {
  overflow-wrap: anywhere; word-break: normal; min-width: 0;
}
/* except a workout card's name. Its controls share its row only when its longest word fits beside them (the rule
   with the card's controls below); breaking anywhere made every name's narrowest width one letter, so the controls
   always stayed beside it and a short name was broken inside its words to make room. A word too long for the whole
   row is still broken at its edge. */
.workout-card .card-title, .workout-card .card-title-btn { overflow-wrap: break-word; }
/* the rows that hold them must be allowed to be narrower than the name */
.workout-card .card-top, .workout-card .card-top > :first-child,
.history-row, .history-main, .record-card .card-body, .record-head,
.ex-title, .list-row, .list-row-main, .chat-effect, .picker-row, .choose-item { min-width: 0; }
/* name the text column. `:first-child` was the colour dot on a workout choice, so the dot
   stretched to fill the row (about 39 px wide at 320 px, 109 px at 390 px) and every row's text began somewhere
   different. The dot keeps its 12 px circle; `.choose-main` and the picker's text column are the flexible parts. */
.picker-row > .picker-main, .picker-row > :first-child:not(.dot), .choose-main { min-width: 0; flex: 1 1 auto; }
.choose-item > .dot, .picker-row > .dot { flex: 0 0 12px; width: 12px; height: 12px; }
.picker-row > .btn, .picker-row > .icon-btn, .choose-item > .btn, .choose-item > .icon-btn { flex: 0 0 auto; }
.list-row > :first-child { min-width: 0; flex: 1 1 auto; }
.card-top > .card-head-text { min-width: 0; flex: 1 1 auto; }
/* and the controls beside them keep their own space */
/* name the CONTROLS that must keep their size, rather than everything that is not one known
   wrapper class. Today and the shared-workout preview put the title in a plain <div>, which this rule made rigid:
   the title clipped at the card edge and the Done badge was pushed out of sight. The first child of a card header is
   the text column wherever it appears, and it may always shrink. */
.card-top > :first-child { min-width: 0; flex: 1 1 auto; }
.card-top > .btn, .card-top > .icon-btn, .card-top > .done-badge, .card-top > .chip,
.card-top > .row-actions, .card-top > .card-actions,
.record-head > .pin-btn, .list-row > .btn, .list-row > .icon-btn { flex: 0 0 auto; }

/* a workout name gets a generous first row on a phone. At 320 px three header controls left the
   title about 160 px, so an ordinary spaced name ran to four or five lines. The title now spans the row and the
   controls sit beneath it, right-aligned — the same controls, the same sizes, nothing hidden. */
/* the card reacts to ITS OWN width, not the window's — a viewport rule missed a 305 px card in a
   1440 px grid, where an ordinary name still took four lines. The actions sit in the card's top-right corner and the
   name gets the full width: same controls, same sizes, nothing hidden. The editor header follows the same principle,
   where a 58-character name had about 109 px and ran to seven lines. */
.workout-card, .ex-card { container-type: inline-size; }
@container (max-width: 430px) {
  /* the exercise editor keeps this treatment; the workout card is title-first, below */
  /* Stage 1: re-evaluated for the folding header. The title AFTER the controls would, on a folded card,
     leave a blank strip above the name — the arrangement the design brief rules out. The name leads, the controls
     sit with it, and the title wraps within its own column instead of pushing them anywhere. */
  /* a scoped GRID, not flex. The summary is a genuine second row at every width, and the name track is
     flexible with a fixed action column — so a name can never be squeezed to a one-character column and rendered
     as a vertical strip of letters, which is what `flex-basis: 100%` inside a non-wrapping flex parent produced. */
  .ex-card .ex-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'label name actions' 'summary summary summary';
    align-items: center; column-gap: 6px; row-gap: 4px;
  }
  .ex-card .ex-head > .ss-member-label { grid-area: label; }
  .ex-card .ex-head > .ex-title { grid-area: name; min-width: 0; }
  .ex-card .ex-head > .ex-actions { grid-area: actions; }
  .ex-card .ex-head > .ex-summary { grid-area: summary; }
  /* a genuinely narrow card gives the action block its own row rather than starving the name */
  /* the narrow layout now lives after the global header grid below, so it is not overridden. */
}
/* title first. The name and the three controls share one centred row; the controls are one group, so when a
   long name leaves no room they wrap together BENEATH it rather than sitting above it or splitting up. A corner
   layout leaves an empty controls row above every name and makes a collapsed card a tall empty box. */
.workout-card .card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.workout-card .card-top > .card-head-text { display: contents; }
/* the wrap decision uses the title's MINIMUM width, not its full text width: an ordinary name therefore shares the
   row and wraps to a second line if it must, while a name whose longest word cannot fit beside the controls pushes
   the whole group below — which is the intended rule */
.workout-card .card-top .card-title { flex: 1 1 min-content; min-width: 0; max-width: 100%; order: 0; margin: 0; }
.workout-card .card-top .facts { flex: 1 1 100%; min-width: 0; order: 1; }
.workout-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-left: auto; order: 0; }
.workout-card .workout-card-actions > .icon-btn, .workout-card .workout-card-actions > .drag-handle { flex: 0 0 auto; margin-left: 0; }
/* the editor's name was a single ellipsised line, so it could never use the width it was given */
.ex-title h3 { white-space: normal; overflow: visible; text-overflow: clip; }
/* the analytics consent prompt. Its two buttons kept their width and left the explanation about
   97 px wide at 320 px. On a narrow screen the text takes the full width and the two existing actions sit in a row
   beneath it. The prompt is `.nudge > .nudge-main` plus two buttons (`.welcome-card .card-body > .row-between`
   matches nothing here). Scoped to this prompt; other nudges are untouched. */
@media (max-width: 560px) {
  .consent-nudge { flex-wrap: wrap; row-gap: 10px; }
  .consent-nudge > .nudge-main { flex: 1 1 100%; min-width: 0; }
  .consent-nudge > .btn { flex: 1 1 auto; }
}

/* the Start actions in a desktop row started at different heights because each card's content
   column was only as tall as its own text. Grid items already stretch to the row's height, so the card and its body
   fill that height and the flexible space above the action pushes every Start to the same baseline. Card
   dimensions, text and the phone layout are unchanged. */
.workout-grid > .workout-card:not(.folded) { display: flex; }
.workout-grid > .workout-card:not(.folded) > .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.workout-grid > .workout-card:not(.folded) > .card-body > .card-foot { margin-top: auto; }
.workout-grid > .workout-card.folded { align-self: start; } /* a folded card stays compact beside an expanded one */

/* a long action label wraps at word boundaries and the button grows with it. `.btn` is nowrap by
   design, so this is opt-in on the two long Coach actions only — everything else keeps its single line. */
.btn.btn-wrap { white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.3; overflow-wrap: break-word; }

/* the Calendar's Add session action. It takes its own row on a phone so the period controls keep their space,
   and never floats over the calendar. */
.cal-head { flex-wrap: wrap; row-gap: 8px; }
.cal-head > .cal-add { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .cal-head > .cal-add { flex: 1 1 100%; margin-left: 0; order: 3; }
  .cal-head > .segmented { order: 4; }
}

/* the catalogue entry. Two lines of text inside one full-width control; the text column may shrink so a long
   translation wraps rather than pushing the icon out. */
.browse-entry { display: flex; align-items: center; gap: 10px; text-align: left; justify-content: flex-start; height: auto; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.browse-entry > .ic { flex: 0 0 auto; }
.browse-entry-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.browse-entry-title { font-weight: 700; }
.browse-entry-sub { font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: normal; }

/* the per-turn cost. Subdued, beneath the answer, never competing with it. */
.chat-cost { margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

/* searching the saved library. Matches are revealed by HIDING the rest — never by removing them, because the
   reorder code reads the cards in the DOM. Reordering is disabled outright while a query is active. */
.lib-search { margin: 10px 0 4px; }
.lib-search-row { display: flex; align-items: center; gap: 8px; }
.lib-search-row > .input { flex: 1 1 auto; min-width: 0; }
.lib-search-row > .lib-search-clear { flex: 0 0 auto; }
.lib-search-count { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); min-height: 16px; }
.workout-grid > .workout-card.filtered-out, .activity-card.filtered-out, .group-block.filtered-out { display: none; }
.lib-search-reorder { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
/* a collapsed group opens just far enough to show its matches; the saved fold preference is untouched */
.group-block.folded.search-open > .lib-sec, .group-block.folded.search-open .lib-sec { grid-template-rows: 1fr; }
/* and, open for them, it looks open: the bar's divider, the room under its cards and the chevron's turn come with it */
.group-block.folded.search-open { padding-bottom: 12px; }
.group-block.folded.search-open .group-head-row { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.group-block.folded.search-open .group-head { border-radius: var(--radius) var(--radius) 0 0; opacity: 1; }
.group-block.folded.search-open .lib-fold.folded .lib-chev { transform: rotate(90deg); }
.lib-filtering .drag-handle, .lib-filtering .fold-all-btn { opacity: 0.4; pointer-events: none; }
.lib-no-match { margin-top: 10px; }

/* installation steps. Numbered, wrapping naturally, no fixed heights. */
.install-steps { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.install-steps > li { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* at large text sizes a segmented control's buttons ran past the screen edge. The control wraps its options
   onto a second row instead — the same options, at the same size, none of them pushed out of reach. */
.segmented { flex-wrap: wrap; max-width: 100%; }
.segmented > .seg-btn { min-width: 0; }

/* preserve ordinary sizing; let enlarged or long content use additional lines. */
.browse-entry { white-space: normal; }
.browse-entry-title { overflow-wrap: break-word; }
.group-head-row > .lib-head { min-width: 0; }
.group-head-row .lib-head > span:first-child { min-width: 0; overflow-wrap: break-word; }
.group-head-row > .group-manage, .lib-head-side { flex-shrink: 0; }
.bench-card .fact { white-space: normal; min-width: 0; max-width: 100%; }
.bench-card .fact > span { min-width: 0; overflow-wrap: break-word; }
.bench-card .fact > .ic { flex-shrink: 0; }
.fold-card[data-section="data"] .btn-danger-ghost { white-space: normal; height: auto; min-height: 44px; }
.month-wd-short { display: none; }
@media (max-width: 430px) {
  .month-wd-long { display: none; }
  .month-wd-short { display: inline; }
  .month-wd { letter-spacing: 0; }
  .month-cell { padding-left: 2px; padding-right: 2px; }
}
.cell-num { width: max-content; min-width: 22px; height: auto; min-height: 22px; line-height: 1.2; padding: 2px; max-width: 100%; box-sizing: border-box; align-self: flex-start; }
.fold-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fold-summary { font-size: 12.5px; font-weight: 500; color: var(--ink-3); line-height: 1.4; text-transform: none; letter-spacing: normal; overflow-wrap: break-word; }
.fold-card:not(.folded) .fold-summary { display: none; }

/* the completion summary's labels shared no left edge. `.runner-main` centres its text, and each row's label
   inherits that centring inside a box whose width varies with its own value — so "Duration", "Exercises" and
   "Sets completed" each started somewhere different (measured 143.4 / 153.7 / 121.0 px at 390 px wide). The override
   is scoped to the summary rows: the celebratory heading above them stays centred, and no other runner screen or
   `.summary-row` elsewhere is touched. */
.done-main > .summary-rows > .summary-row { text-align: start; }
.done-main > .summary-rows > .summary-row > strong { text-align: end; }

/* the Workouts header. Scoped to this screen's toolbar — the generic `.page-head.row-between > .btn-row > .btn`
   rule that makes every toolbar button flexible is left alone for every other screen. */
.page-head.row-between > .btn-row.wk-toolbar { gap: 8px; }
.wk-toolbar > .fold-all-btn {
  flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.wk-toolbar > .btn { min-height: 48px; }
@media (max-width: 430px) { .wk-toolbar > .btn { flex: 1 1 auto; } }

/* the header's vertical rhythm, controlled as a whole rather than one declared margin at a time */
.view-inner > .page-head + .browse-entry { margin-top: 16px; }
.browse-entry + .lib-search { margin-top: 12px; margin-bottom: 0; }
/* the Classes & activities section is a group block of its own, its heading button one of the group heads */
.classes-block { scroll-margin-top: 8px; }
.classes-head { font-weight: 700; }
/* the Freestyle and Timer tiles sit under the search: browse, search, the tiles and the first section 12 px apart,
   each gap the same as the one before it */
.lib-search + .quick-row { margin-top: 12px; }
.quick-row + .card { margin-top: 12px; }
/* two tiles side by side, each half the row: an icon on a tile and a name on the first line, what it does under them.
   Both in the surface's colours, the Timer as Freestyle is, so New above them stands out as the one filled button;
   the Timer's line keeps its figures one width so a running clock does not shift. The text wraps within its tile at
   any width; the tiles stay the same height as each other. */
.quick-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-tile {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 7px;
  height: auto; min-height: 76px; padding: 12px 14px 13px; text-align: left; white-space: normal;
  border-radius: var(--radius); min-width: 0;
}
.quick-tile-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.quick-tile-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
}
.quick-tile .quick-tile-ic .icon { width: 18px; height: 18px; }
.quick-tile-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; min-width: 0; }
.quick-tile-sub { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--ink-3); }
.timer-entry .quick-tile-sub { font-variant-numeric: tabular-nums; }
html.theme-dark .freestyle-entry .quick-tile-ic, html.theme-dark .timer-entry .quick-tile-ic {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}
/* the person's own list begins under a labelled rule — the browse and search rows and the two tiles above it are the
   ways in, the groups and classes below it the library — so the two read as two areas rather than one stack of
   boxes. The label is set as the app's other small section labels are and the hairline is the app's line colour; it
   is 20 px below the tiles and the first section 12 px below it, as a label sits closer to what it heads than to what
   came before. It is not a section itself: the gap under the search area still goes to the first
   section that shows, and a search leaves it in place over the matches. */
.lib-divider { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.quick-row + .lib-divider { margin-top: 20px; }
.lib-divider-label {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); line-height: 16px;
}
.lib-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
/* an ungrouped grid is always appended, even when every workout is in a group — so an EMPTY grid sat between the
   search area and the first real section, and its spacing added to the next section's. An empty grid takes no space
   at all, and the gap is applied to whichever section is actually first. */
.view-inner > .workout-grid:empty { display: none; }
.lib-search + .workout-grid, .lib-search + .group-block, .lib-search + .section-title,
.lib-search + .workout-grid:empty + .group-block,
.lib-search + .workout-grid:empty + .section-title { margin-top: 12px; }
.view-inner > .workout-grid:empty + .group-block, .view-inner > .workout-grid:empty + .section-title { margin-top: 12px; }
/* an empty status reserves no height: it stays mounted and polite, and takes its space only when it speaks */
.lib-search-count:empty { min-height: 0; margin-top: 0; }
.lib-search-count:not(:empty) { margin-top: 6px; }

/* when a summary value wraps onto its own line, `text-align: end` inside an intrinsically sized <strong> does
   nothing — the box itself is only as wide as its text and sits at the line's start. Giving the wrapped value the
   full remaining width puts its trailing edge on the row's content edge, where the unwrapped values are. Scoped to
   the completion summary; stacked prose rows and the other runner screens keep their own behaviour. */
.done-main > .summary-rows > .summary-row:not(.stacked) { flex-wrap: wrap; }
.done-main > .summary-rows > .summary-row:not(.stacked) > strong { flex: 1 1 auto; min-width: 0; margin-left: auto; }

/* a session header's action moves to its own row when the title and date cannot sit beside it comfortably.
   Scoped to the History session header — every other builder header keeps its single-row layout. */
/* the History session header. Back and the title/date stay together on the first row; Share card
   takes its own full-width row below, on the same gutter as the cards. The 16px separation is a ROW GAP, and the
   inherited -6px top margin is reset inside this header only so it cannot eat into it. Scoped to `.session-head`:
   `.builder-head`, `.page-head`, `.icon-btn` and `.share-card-btn` are unchanged for every other screen. */
.builder-head.session-head { flex-wrap: wrap; row-gap: 16px; column-gap: 12px; align-items: start; }
.builder-head.session-head > .builder-head-main { flex: 1 1 auto; min-width: 0; }
.builder-head.session-head > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.builder-head.session-head > .share-card-btn { margin-top: 0; }   /* the gap does this job now */
.builder-head.session-head > .btn, .builder-head.session-head > .btn-row { flex: 0 0 auto; }
@media (max-width: 430px) {
  /* a two-column first row is reliable regardless of how long the title or date runs */
  .builder-head.session-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .builder-head.session-head > .btn, .builder-head.session-head > .btn-row,
  .builder-head.session-head > .share-card-btn { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
}

/* The search field offers one clear control: REPPIN's labelled button. Chromium also draws a native cancel glyph
   inside a type="search" input, so two appeared at once. Scoped to this field; search semantics are unchanged. */
#lib-search::-webkit-search-cancel-button, #lib-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* a section showing nothing takes no space at all; the gap below the search area is applied once,
   to whichever section is actually first — an ungrouped grid, a group, the Classes section or the no-results card —
   and is the 12 px the rows above it keep between them.
   The adjacent-sibling override that used to follow this line also changed the gap AFTER the first
   section, tightening grid-to-group from 16px and group-to-group from 24px. The established type-specific gaps are
   left alone; only the first visible section's own top margin is set here. */
.view-inner > .lib-section-empty { display: none; }
.view-inner > .lib-section-first { margin-top: 12px; }

/* the completion panel is a centred flex column, so `.compare-host` sized itself around its grid instead
   of the width available — with an auto-fit grid inside, that collapsed the tiles to a single narrow column even at
   ordinary text on a desktop. The host takes the content width it already had; the grid's own responsive behaviour,
   padding, borders, type and colours are unchanged. */
.done-main > .compare-host { width: 100%; min-width: 0; align-self: stretch; }
/* Workout complete, for a guest: where the training is kept, and the way to back it up — across the card, its words
   left-aligned as every note is */
.done-main > .guest-note {
  align-self: stretch; width: 100%; min-width: 0; margin: 0; text-align: left; justify-content: flex-start;
  align-items: flex-start; border-color: var(--border); background: var(--surface-2);
}
/* quiet, not the workout's colour or the app's: a phone, the words beside it, Back it up under them */
.guest-note > .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ink-2); }
.guest-note > .nudge-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; }
.guest-note .nudge-main > .btn { margin-top: 10px; }
.guest-note .nudge-sub { text-wrap: pretty; }

/* Section 4: the catalogue header's Back control. Scoped to this header so no other page-head changes. */
.page-head.catalogue-head { display: flex; align-items: start; gap: 12px; }
.page-head.catalogue-head > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.page-head.catalogue-head > .catalogue-head-main { flex: 1 1 auto; min-width: 0; }

/* Stage 1 (supersets brief §2): folding and Organise in the workout editor. Component-scoped — no global `.card`,
   `.page-head`, `.ex-head` or button overrides, and the Workouts library cards are untouched. */
.ex-list-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 4px 0 2px; flex-wrap: wrap; }
.ex-list-bar > .btn { min-height: 44px; }
.ex-summary { font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; display: none; flex: 1 1 100%; }
.ex-card.folded .ex-summary, .ex-list.organising .ex-summary { display: block; }
.ex-card .ex-title { flex-wrap: wrap; }
.ex-card.folded > :not(.ex-head) { display: none; }
.ex-card.folded .ex-fold-chev { transform: rotate(-90deg); }
.ex-fold-chev { transition: transform 0.15s var(--ease-out); }
.ex-head > .ex-fold-btn, .ex-head > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
/* Organise: a compact ordered list with the drag handles revealed; the saved fold state is not changed */
.ex-list.organising .ex-card > :not(.ex-head) { display: none; }
.ex-list.organising .ex-summary { display: block; }
.ex-list.organising .drag-handle { display: inline-flex; }
.ex-list.organising .ex-fold-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .ex-fold-chev { transition: none; } }

/* Supersets brief §3 and §8: the group's appearance in the editor. One restrained boundary and a labelled header —
   no nested large cards, no second colour scheme. Component-scoped to `.ss-*`; the member cards are the ordinary
   `.ex-card` with a small stable label column added. */
.ss-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2, transparent); }
.ss-head { display: flex; align-items: center; gap: 8px; }
.ss-head-main { flex: 1 1 auto; min-width: 0; }
.ss-head > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
.ss-title { font-size: 14.5px; font-weight: 700; }
.ss-summary { font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.ss-note { font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin: 0; }
/* the member label is a stable leading column, not another control: it must not be swept to the end by the
   editor header's ordering rule */
.ss-member-label { flex: 0 0 26px; order: -1; font-size: 12.5px; font-weight: 700; color: var(--ink-3); align-self: flex-start; padding-top: 2px; }
.ss-group > .ex-card { border-left: 2px solid var(--line); }

/* the editor card header's four parts. Component-scoped; no global card, button or page-head rule. */
.ex-actions { display: inline-flex; align-items: center; gap: 4px; }
.ex-actions > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
/* the summary gets the whole card width when folded, rather than competing with the title */
.ex-card .ex-title { flex-wrap: wrap; }
.ex-card .ex-head > .ex-summary { order: 2; flex: 1 1 100%; }
/* reorder handles belong to Organise, not to every card all of the time */
.ex-card .drag-handle { display: none; }
.ex-list.organising .ex-card .drag-handle { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; }
.ex-list.organising .ex-actions { display: none; }
/* a group is ONE restrained boundary: its members lose their own card frame inside it */
.ss-group > .ex-card { border: 0; border-left: 2px solid var(--line); border-radius: 0; padding-left: 10px; background: transparent; box-shadow: none; }
.ss-group.folded > .ex-card { display: none; }
.ss-fold-btn { flex: 0 0 44px; width: 44px; height: 44px; }

/* the same grid outside the narrow container query, so a wide card behaves identically. */
.ex-card .ex-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'label name actions' 'summary summary summary';
  align-items: center; column-gap: 6px; row-gap: 4px;
}
.ex-card .ex-head > .ss-member-label { grid-area: label; align-self: center; padding-top: 0; }
.ex-card .ex-head > .ex-title { grid-area: name; min-width: 0; }
.ex-card .ex-head > .ex-actions { grid-area: actions; margin-left: 0; }
.ex-card .ex-head > .ex-summary { grid-area: summary; }
/* a collapsed group still names its members */
.ss-members { font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; display: none; }
.ss-group.folded .ss-members, .ex-list.organising .ss-members { display: block; }
/* the frozen superset context, in the established subdued type — no new panel */
.runner-ss { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 2px 0 0; }
/* the frozen pairing on a saved session, in the established subdued type */
/* a 60-character unspaced name must wrap, not be clipped. The block shrinks and breaks only where it must. */
.session-ss { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 0 0 8px; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.runner-ss { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* reorder handles belong to Organise. A grouped member has none — the pair moves as a unit and A1/A2 order is
   changed with Swap order. A collapsed group keeps its controls so it can still be moved. */
.ss-group .ex-card .drag-handle { display: none !important; }
.ss-drag { display: none; }
.ex-list.organising .ss-drag { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; }
.ex-list.organising .ss-group > .ss-head .ex-actions { display: inline-flex; }
.ss-group.folded > .ss-head { display: flex; }

/* a user-entered exercise name inside prose wraps naturally, and breaks only where it must. Scoped to the
   name span so headings, buttons and the surrounding sentence keep their own typography. */
.runner-next, .runner-prev { min-width: 0; white-space: normal; }
.runner-next-name { overflow-wrap: anywhere; word-break: normal; }

/* the intended narrow layout, placed AFTER the global header grid so it actually takes effect. Short names
   already fit at this width — this only gives the action block its own row so it never starves the name. */
@media (max-width: 360px) {
  .ex-card .ex-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'label name' 'actions actions' 'summary summary';
  }
  .ex-card .ex-head > .ex-actions { justify-self: end; }
}
/* the pre-run superset line, in the established subdued type */
.wv-ss { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 4px 0 0; min-width: 0; overflow-wrap: anywhere; }

/* Stage 3 (brief §4): the drop-chain draft editor. Component-scoped; the ordinary set sheet is untouched. */
.drop-list { gap: 8px; }
.drop-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.drop-row:last-child { border-bottom: 0; }
.drop-row-label { flex: 0 0 64px; font-size: 13px; font-weight: 700; color: var(--ink-3); padding-top: 8px; }
.drop-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drop-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.drop-weight, .drop-reps { width: 84px; min-width: 0; }
.drop-unit { font-size: 13px; color: var(--ink-3); }
.drop-main .drop-row-body, .drop-rest .drop-row-body { font-size: 13.5px; color: var(--ink-2); }
.drop-error { display: none; font-size: 13px; font-weight: 600; color: var(--danger, #e5484d); margin: 4px 0 0; }
.drop-error.shown { display: block; }
/* Stage 3: the runner's drop-segment line, in the established subdued type */
.runner-drop { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 2px 0 0; min-width: 0; overflow-wrap: anywhere; }
/* Stage 3: a drop segment sits beneath its parent set, clearly subordinate to it */
.session-drop { padding-left: 16px; }
.session-drop .set-n { color: var(--ink-3); font-size: 12.5px; }

/* the drop chain shown before starting, beneath its parent set line */
.wv-set-drops { grid-column: 1 / -1; font-size: 12.5px; font-weight: 500; color: var(--ink-3); padding-left: 16px; min-width: 0; overflow-wrap: anywhere; }

/* Share progress sheet (spec §1). The card image is shown at its own aspect; controls sit beneath it. */
.share-stage { display: flex; justify-content: center; align-items: center; background: transparent; min-height: 120px; overflow: hidden; }
.share-img { width: 100%; max-width: 460px; height: auto; display: block; }
.share-img[hidden] { display: none; }
/* Share progress and Share muscle analytics: the card no taller than most of the screen, so the choices beneath it stay
   near it (a story card on a phone on its side among them), drawn whole within that. The preview is a panel that keeps
   one place, whatever the card's format and whether a card is on show: a Story card's size at the sheet's width,
   within that height; the card sits centred in it, a Feed card with room above and below, and what the sheet says in
   place of a card is said in it. So nothing beneath it moves as cards are made, and while the next is made the one on
   show stays, dimmed. */
.progress-share-sheet .share-stage {
  position: relative; aspect-ratio: 9 / 16; max-height: 62vh; max-height: min(62dvh, 640px);
  background: var(--surface-2); border-radius: var(--radius);
}
.progress-share-sheet .share-img {
  position: absolute; inset: 0; margin: auto; width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: contain; transition: opacity var(--dur) var(--ease-out);
}
.progress-share-sheet .share-stage > .settings-note:not(.visually-hidden) { max-width: 34ch; margin: 0; padding: 0 12px; text-align: center; }
.progress-share-sheet .share-stage.is-stale .share-img { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .progress-share-sheet .share-img { transition: none; } }
.share-customise { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 14px; }
.share-customise[open] { padding-bottom: 14px; }
.share-customise[open] > summary { margin-bottom: 4px; }
.share-customise-note { margin: 0 0 14px; }
.share-customise .progress-control + .progress-control { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.progress-records-row { gap: 12px; }
.progress-records-row .settings-note { margin: 0; }
.share-customise > summary { font-size: 14px; font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.progress-share-sheet .sheet-body { gap: 14px; }
.progress-control { display: flex; flex-direction: column; gap: 6px; }
.progress-choices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.progress-control .progress-choices > .btn { flex: 1 1 0; }
.progress-control select { width: 100%; min-height: 44px; }
.progress-style-hint { margin: 0; }
/* each style's words in one place beneath the Style buttons, the chosen style's on show: the place is as tall as the
   longest, so nothing beneath it moves as the style changes */
.progress-style-hints { display: grid; }
.progress-style-hints > .progress-style-hint { grid-area: 1 / 1; }
.progress-style-hints > .progress-style-hint:not(.is-on) { visibility: hidden; }
.progress-record-choice { white-space: normal; overflow-wrap: break-word; text-align: left; justify-content: flex-start; }
.progress-share-sheet .dlg-actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); background: var(--surface); padding-top: 12px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1; }
.progress-share-sheet .dlg-actions > .btn-row { width: 100%; }
.progress-share-sheet .btn[hidden] { display: none; }

/* records carry a sparkline and their originating workout's colour (--wc); month separators and a filter
   keep a long history readable */
/* the value carries the workout colour in a TEXT variant: darkened on the light theme so yellow, teal and orange
   clear 4.5:1 on the light record surface; the colour itself on dark, where it already does */
.record-row { --wc: var(--accent); --wc-text: color-mix(in srgb, var(--wc) 48%, #111); }
/* the app selects dark mode with the `theme-dark` class on <html>, not a data attribute; on the dark record surface the
   colour is LIGHTENED (70/30 with white) so brown, indigo and purple clear 4.5:1 — raw brown is 3.2:1 there */
html.theme-dark .record-row { --wc-text: color-mix(in srgb, var(--wc) 70%, #fff); }
.record-row-value { color: var(--wc-text); }
.record-spark { grid-area: spark; width: 88px; height: 28px; overflow: visible; }
.record-spark path { fill: none; stroke: var(--wc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.record-spark circle { fill: var(--wc); }
.history-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 6px; }
.history-filter { width: auto; min-width: 160px; padding: 8px 12px; font-size: 14px; }
.history-list { margin-top: 4px; display: flex; flex-direction: column; }
/* a month of the list: a full-width heading that opens and closes it — the month in the ink of a title, its count
   quiet beside it, the chevron in a column of its own, the month and the chevron level with the rows' own name and
   chevron — and its rows under it while it is open. The heading's focus ring and halo are drawn inside it, so they
   never meet a row or the month before; the rows keep a gap of their own below it, wider than a row's own halo */
.history-month { padding: var(--sp-1) 0; } /* the heading's wash and ring clear of the lines between months */
.history-month + .history-month { border-top: 1px solid var(--border); }
.history-month-head { margin: 0; font: inherit; }
.history-month-btn {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px;
  padding: 12px calc(var(--sp-4) + 1px); /* the rows' own padding inside their 1 px border */
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
/* the month and its count on one line with a dot between them; a count that has to go to a line of its own goes
   without its dot, which sits in the space before the count, and the space that starts a line is cut off */
.history-month-text { flex: 1 1 auto; min-width: 0; overflow: hidden; line-height: 1.35; }
.history-month-line { --dot: 14px; display: flex; flex-wrap: wrap; align-items: baseline; margin-left: calc(-1 * var(--dot)); }
.history-month-title, .history-month-count { margin-left: var(--dot); min-width: 0; }
.history-month-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: break-word; }
.history-month-count { font-size: 14px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-month-count::before { content: "\00B7"; display: inline-block; width: var(--dot); margin-left: calc(-1 * var(--dot)); text-align: center; }
.history-month-chev { color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.history-month.open .history-month-chev { transform: rotate(90deg); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .history-month-btn:hover { background: var(--hover); }
  .history-month-btn:hover .history-month-chev { color: var(--accent); }
}
.history-month-btn:active { background: var(--hover); }
.history-month-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: -2px;
  box-shadow: inset 0 0 0 5px var(--accent-glow); /* the app's halo, drawn inside the heading */
}
.history-month-rows { padding: var(--sp-2) 0 var(--sp-3); }
@media (prefers-reduced-motion: reduce) { .history-month-chev { transition: none; } }

/* custom exercise descriptions */
.desc-field { margin-top: 6px; }
.exercise-desc { min-height: 96px; resize: vertical; white-space: pre-wrap; }
.desc-counter { text-align: right; margin-top: 4px; }
.desc-counter.over { color: var(--danger, #e5484d); font-weight: 600; }
.custom-description { white-space: pre-line; }

/* Personal goals: readable controls and cards at phone widths. */
.goal-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0; overflow-wrap: break-word; }
.goal-card h2 { font-size: 1.2rem; line-height: 1.3; }
.goal-card h1 { overflow-wrap: break-word; }
.goal-criteria { white-space: pre-wrap; overflow-wrap: break-word; color: var(--ink-2); }
.goal-progress { display: flex; flex-direction: column; gap: 8px; }
.goal-progress progress { width: 100%; height: 8px; border: 0; border-radius: 8px; overflow: hidden; accent-color: var(--accent); background: var(--seg-bg); }
.goal-progress progress::-webkit-progress-bar { background: var(--seg-bg); border-radius: 8px; }
.goal-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; }
.goal-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 8px; }
/* Today's rhythm is 16 px between its blocks (.view-inner > * + *): the goal section adds nothing of its own below */
.goal-today { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.goal-today .section-title { margin: 0; }
.goal-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.goal-today-head .section-label { margin: 0; }
.goal-today-all { font-size: 13px; font-weight: 650; color: var(--accent); padding: 6px 0; }
.goal-today-slot:empty, .today-week-slot:empty, .today-nudge-slot:empty, .today-milestone-slot:empty, .today-recap-slot:empty { display: none; }
/* two or more goals on Today: a row swiped one goal at a time, the edge of the next showing, a dot for each */
.goal-track { position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 8px; margin: -2px 0 -8px; }
.goal-track::-webkit-scrollbar { display: none; }
.goal-slide { flex: 0 0 calc(100% - 28px); min-width: 0; display: flex; scroll-snap-align: start; scroll-snap-stop: always; }
.goal-slide > .goal-card { flex: 1 1 auto; min-width: 0; }
/* the dots belong to the slides: 28 px tap targets, their glyphs 10 px under the card and 16 px over the next block */
.goal-dots { display: flex; justify-content: center; gap: 2px; margin: -12px 0 -10px; }
.goal-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.goal-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--border-strong); transition: width var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.goal-dot.on::before { width: 18px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .goal-track { scroll-behavior: auto; } .goal-dot::before { transition: none; } }
.goal-form, .goal-options { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.goal-options:empty { display: none; }
.goal-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.goal-field .field-label { margin: 0; }
.goal-field .input { width: 100%; min-width: 0; font-size: 16px; }
.goal-field textarea { resize: vertical; }
.goal-field input[type="range"] { min-height: 40px; accent-color: var(--accent); }
.goal-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.goal-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; overflow-wrap: break-word; }
.goal-checkbox { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--accent); }
.goal-check > span { line-height: 1.4; min-width: 0; }
.goal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.goal-actions .btn { min-height: 44px; }
.goal-milestones { display: flex; flex-direction: column; gap: 8px; }
.goal-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 0; }
.goal-empty > .icon { width: 32px; height: 32px; color: var(--accent); }
.goal-timeline { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.goal-update { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-wrap: break-word; }
.goal-update strong { text-transform: capitalize; }
.goal-update strong.import-group { text-transform: none; }
@media (max-width: 380px) { .goal-date-grid { grid-template-columns: 1fr; } .goal-actions .btn { flex: 1 1 auto; } }
.text-btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }

/* ---------- progress photos ---------- */
.goal-photos { display: grid; gap: 14px; padding: 20px; min-width: 0; overflow-wrap: break-word; } /* the same inset as .goal-card */
.goal-photos > .row-between { align-items: center; }
.goal-photos .section-title { margin: 0; }
.goal-photos[hidden] { display: none; }
.photo-timeline { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.photo-thumb { position: relative; flex: 0 0 auto; width: 96px; display: grid; gap: 6px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink-2); font: inherit; cursor: pointer; scroll-snap-align: start; overflow: hidden; }
.photo-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-thumb-img { display: block; width: 96px; height: 128px; object-fit: cover; background: #14181e; }
.photo-badge { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(11, 14, 18, 0.82); color: var(--ink); font-size: 11px; font-weight: 700; }
.photo-date { display: block; padding: 0 6px 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- add an exercise during a workout ---------- */
/* the runner's own gap above it, no more; its label and the line under it one block, with the same padding above
   and below */
.runner-add-row { margin: 0; }
.runner-add-btn { flex-wrap: wrap; gap: 0 8px; padding-block: 10px; border-style: dashed; }
.runner-add-btn .icon { width: 18px; height: 18px; }
.runner-add-sub { flex-basis: 100%; font-size: 12.5px; font-weight: 560; color: var(--ink-3); }
.runner-additions { display: flex; flex-direction: column; gap: 8px; }
.runner-additions > .eyebrow { padding-left: 2px; }
.runner-addition {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.runner-addition.current { border-color: color-mix(in srgb, var(--wc) 55%, var(--border)); }
.runner-addition-main { min-width: 0; flex: 1 1 auto; }
.runner-addition-name { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.runner-addition-sub { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.runner-addition .btn-sm { min-height: 44px; flex: none; }
.nudge.addition-note { margin-bottom: 0; }
.nudge.addition-note .nudge-sub { overflow-wrap: anywhere; }

.add-live {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.add-live-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.add-live-main::before { content: ''; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--wc); flex: none; }
.add-live.ended .add-live-main::before { background: var(--ink-3); }
.add-live-name { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.add-live-state { font-size: 13px; color: var(--ink-2); }
.add-live-state:not(:empty)::before { content: '· '; color: var(--ink-3); }
.add-live-clock { margin-left: auto; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.add-live .btn-sm { min-height: 44px; flex: none; }
.add-step { margin: 2px 2px -4px; }
.add-body { display: flex; flex-direction: column; gap: 12px; }
.add-quick { min-height: 56px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; text-align: left; border-style: dashed; }
.add-quick-title { font-size: 15px; font-weight: 650; }
.add-quick-sub { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.add-selected { display: flex; flex-direction: column; gap: 4px; }
.add-back { align-self: flex-start; min-height: 44px; border: none; background: none; padding: 0 2px; color: var(--ink-2); }
.add-selected-name { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.add-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* a freestyle workout's screen: each exercise a card with its logged sets and, while it is the one being logged, the
   entry row — the load, the reps or seconds, and Log set — then Done with this exercise; Add exercise and End
   workout under the list. Sets read as History reads them; a set just logged with a record is marked a moment. */
.fs-root { display: flex; flex-direction: column; gap: 22px; }
.fs-head .runner-elapsed { margin-top: 2px; }
.fs-intro .card-title { margin: 0; }
.fs-num { font-variant-numeric: tabular-nums; }
.fs-add { margin-top: 2px; }
.fs-discard { font-size: 13px; padding: 6px 0; }
.fs-ex .card-body { gap: 10px; }
.fs-ex-name { margin: 0; }
.fs-sets { margin-top: 2px; }
.fs-set { gap: 10px; padding: 4px 0; }
.fs-set .set-n { width: 44px; }
.fs-set-line { flex: 1 1 auto; min-width: 0; }
.fs-set-x { width: 32px; height: 32px; color: var(--ink-3); }
.fs-set-x .icon { width: 14px; height: 14px; }
.fs-set-new .pr-chip { animation: fs-pr 0.9s var(--ease-out); }
@keyframes fs-pr { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fs-set-new .pr-chip { animation: none; } }
.fs-none { margin: 0; }
.fs-entry { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
.fs-entry-row { display: flex; align-items: flex-end; gap: 8px; }
.fs-entry-row > .fs-field { flex: 1 1 0; min-width: 0; }
.fs-entry-row > .fs-log { flex: 0 0 auto; min-height: 46px; }
.fs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-field > .field-label { margin: 0; }
.fs-field > .input { width: 100%; min-width: 0; min-height: 46px; font-size: 16px; }
.fs-field > textarea.input { min-height: 0; resize: vertical; }
.fs-done, .fs-more { align-self: flex-start; }
.fs-done { align-self: stretch; }
.fs-actions { display: flex; flex-direction: column; gap: 10px; }
/* Next up: what to do after the exercise just done with, each a row added at a tap */
.fs-next .card-body { gap: 2px; padding-top: 12px; padding-bottom: 6px; }
.fs-next-title { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.fs-next-list > li + li { border-top: 1px solid var(--border); }
.fs-next-pick { padding: 11px 0; text-align: left; border-radius: 6px; }
.fs-next-pick .list-row-main { display: flex; flex-direction: column; min-width: 0; }
.fs-next-pick .list-row-sub { margin-top: 2px; }
.fs-next-pick > .icon { flex: 0 0 auto; color: var(--accent); }
.fs-next-pick:disabled { opacity: 0.55; }
.fs-end { display: flex; flex-direction: column; gap: 12px; }
.fs-end > .btn-link.danger { align-self: center; }
.save-as-workout .card-body { gap: 10px; }
.add-create { margin-top: 2px; }
.add-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.add-field > .field-label { margin: 0; }
.add-field > .input { width: 100%; min-width: 0; min-height: 46px; font-size: 16px; }
.add-field:has(> input[type="text"]), .add-field:has(> select), .add-form > .switch-label { grid-column: 1 / -1; }
.add-form > .switch-label { min-height: 44px; }
.add-hint { font-size: 12.5px; color: var(--ink-3); }
.add-summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border);
  font-size: 15px;
}
.add-summary-where { font-size: 13px; color: var(--ink-2); }
.add-blocked { font-size: 13.5px; color: var(--ink-2); padding: 0 2px; }
.add-blocked[hidden], .form-error[hidden] { display: none; }
.form-error { color: var(--danger); font-size: 14px; font-weight: 600; padding: 0 2px; }
@media (max-width: 380px) { .add-form { grid-template-columns: 1fr; } }
.added-marker { font-style: italic; }

/* ---------- Community ---------- */
/* Community is drawn with the app's own pieces — cards, rows, switches, chips, sheets and their buttons — and the
   type scale every other screen uses; what is its own is laid out here. */

/* a sheet's header stays put while a long sheet scrolls; it reaches the sheet's top edge, over the sheet's own top
   padding, so nothing scrolls into view above it. At rest it sits exactly where it did. */
.sheet-head { top: -10px; margin-top: -10px; padding-top: 16px; }
.sheet-grab { top: 10px; }

/* headers: the home screen's tools, and a screen reached from another with its way back */
.soc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* the title stays one word on one line beside the tools: never broken inside the word */
.soc-head > h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-head-actions { display: flex; align-items: center; gap: 0; flex: none; }
@media (max-width: 359px) {
  .soc-head > h1 { font-size: 22px; }
  .soc-head-actions .icon-btn { min-width: 40px; width: 40px; }
}
.soc-head-actions .icon-btn { position: relative; }
.soc-me-btn .soc-avatar { width: 30px; height: 30px; font-size: 11px; }
.soc-bell-count { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 750; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.soc-back-head .soc-head-slot { display: flex; flex: none; }
.soc-back-head .soc-head-slot:empty { display: none; }

/* small type, forms, notices */
.soc-btn { min-height: 44px; }
.soc-lede { font-size: 16px; line-height: 1.5; }
.soc-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; list-style: disc; }
.soc-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.soc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.soc-field > .field-label { margin: 0; }
.soc-field > .input { width: 100%; min-height: 46px; font-size: 16px; }
.soc-hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin: 0; }
.soc-hint.warn { color: var(--danger); font-weight: 600; }
/* the handle's wait, and the way back to the one held for its owner: the sentence, then its action on a line of its
   own, its words in line with the sentence's */
.soc-handle-wait > .soc-link-btn { display: block; width: fit-content; margin: 2px 0 0 -10px; }
.soc-error { color: var(--danger); font-size: 14px; font-weight: 600; min-height: 1px; margin: 0; }
.soc-error:empty { display: none; }
.soc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.soc-check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.soc-checkbox { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.soc-text-link { min-height: 44px; padding: 0 2px; color: var(--accent); font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.soc-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 12px 14px; margin: 0 0 var(--sp-3); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.soc-notice p { margin: 0; flex: 1 1 150px; min-width: 0; }
.soc-notice > .btn { flex: none; }
.soc-notice-warn { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--ink); }
.sheet .soc-notice, .card .soc-notice { background: var(--surface-2); margin: 0; }
.soc-tab-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.soc-tab-body > .soc-notice { margin: 0; }
.soc-card-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.soc-sub-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 -4px; }
.soc-sheet-title { font-size: 18px; margin: 0; }
.soc-terms { display: flex; flex-direction: column; gap: 12px; }
.soc-terms h3 { font-size: 15px; margin: 0 0 4px; }
.soc-terms p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.soc-terms p.soc-terms-lead { color: var(--ink); font-weight: 600; }

/* on and off, as Settings shows a choice: what it is at the left, the switch at the right */
.soc-switch-list, .soc-toggles { display: flex; flex-direction: column; }
.soc-toggles { padding: 0 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.soc-toggles:empty { display: none; }
.soc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer; }
.soc-switch-row:first-child { border-top: 0; }
.soc-switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.soc-switch-label { font-size: 15px; font-weight: 620; line-height: 1.3; }
.soc-switch-sub { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.soc-switch-row .switch-input { flex: none; }

/* people */
.soc-list { display: flex; flex-direction: column; }
/* moderators' decisions, each with why and its appeal */
.soc-decisions { display: flex; flex-direction: column; margin-top: 8px; }
.soc-decision { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border); }
.soc-decision:first-child { border-top: 0; padding-top: 4px; }
.soc-decision:last-child { padding-bottom: 0; }
.soc-decision p { margin: 0; }
.soc-decision-what { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.soc-decision-quote { padding-left: 10px; border-left: 3px solid var(--border); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.soc-decision > .btn { margin-top: 6px; }
.soc-results { display: flex; flex-direction: column; gap: var(--sp-3); }
.soc-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); min-width: 0; }
.soc-person:first-child { border-top: 0; }
.card-body > .soc-list > .soc-person { padding-left: 0; padding-right: 0; }
.soc-person.stack { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 14px; padding-bottom: 16px; }
.soc-person.stack > .soc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.soc-person-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; min-height: 44px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
span.soc-person-main { cursor: default; }
.soc-person-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.soc-person-name { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-person-handle, .soc-person-sub { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-actions { display: flex; gap: 8px; flex: none; }
.soc-actions > .btn { min-width: 0; }

/* a member's picture: their photo, or their initials on one of four tones */
.soc-avatar { position: relative; overflow: hidden; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 750; letter-spacing: 0.01em; background: #D5F1E8; color: #0D5C4A; border: 1px solid #BCE5D8; }
.soc-avatar[data-tone="1"] { background: #E7E1FA; color: #47378A; border-color: #D5CCF3; }
.soc-avatar[data-tone="2"] { background: #F8E5D0; color: #87490F; border-color: #EDD0AF; }
.soc-avatar[data-tone="3"] { background: #DCE8F8; color: #1D4C83; border-color: #C5D9F1; }
html.theme-dark .soc-avatar { background: #21473F; color: #A0F3D8; border-color: #355B51; }
html.theme-dark .soc-avatar[data-tone="1"] { background: #302A41; color: #D4C7FA; border-color: #48405D; }
html.theme-dark .soc-avatar[data-tone="2"] { background: #3A2E22; color: #F6CF9E; border-color: #5A4632; }
html.theme-dark .soc-avatar[data-tone="3"] { background: #22303F; color: #A9CFF6; border-color: #34485D; }
/* a profile picture: a thin ring in REPPIN's teal, whatever tone its initials would have */
.soc-avatar.has-photo, html.theme-dark .soc-avatar.has-photo { border-color: #2DD4BF; }
.soc-avatar-lg { width: 68px; height: 68px; font-size: 21px; }
.soc-avatar.has-photo .soc-avatar-img-box { position: absolute; inset: 0; }
.soc-avatar-img-box.loading, .soc-avatar-img-box.missing { display: none; }
.soc-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* badges: who can see something, a relation */
.soc-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 5px; font-size: 12px; font-weight: 650; line-height: 1.3; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; }
.soc-badge .icon, .soc-aud-plain .icon { width: 13px; height: 13px; }
.soc-aud-plain { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.soc-aud-public.soc-badge, .soc-aud-web.soc-badge { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--ink); }
.soc-aud-only_me.soc-badge, .soc-aud-owner_only.soc-badge { border-style: dashed; }
.soc-dot-sep { margin: 0 6px; }
.soc-follows-you { color: var(--ink); }

/* profiles */
.soc-profile .card-body { gap: 14px; }
.soc-profile-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.soc-profile-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soc-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: break-word; margin: 0; }
.soc-handle { color: var(--ink-3); font-size: 14px; margin: 0; overflow-wrap: break-word; }
.soc-id-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.soc-bio { white-space: pre-line; overflow-wrap: break-word; font-size: 15px; line-height: 1.5; margin: 0; }
.soc-link { display: inline-block; max-width: 100%; font-size: 14px; overflow-wrap: break-word; }
.soc-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.soc-count { display: flex; flex-direction: column; gap: 1px; }
.soc-count strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.soc-count span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.soc-private { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px 4px; color: var(--ink-2); }
.soc-private .icon { width: 22px; height: 22px; color: var(--ink-3); margin-bottom: 2px; }
.soc-private h2 { font-size: 18px; margin: 0; color: var(--ink); }
.soc-private p { margin: 0; font-size: 14px; line-height: 1.45; max-width: 32ch; }
.soc-own-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.soc-own-actions > .btn { min-width: 0; width: 100%; }
.soc-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.soc-profile-actions > .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
.soc-subscribe .icon svg { width: 18px; height: 18px; }
.soc-subscribe.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.soc-preview-switch { display: flex; width: 100%; margin-bottom: 8px; }
.soc-preview-switch .seg-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 10px; white-space: nowrap; }
.soc-preview-note { margin: 0 0 var(--sp-3); }
.soc-preview-stage { display: flex; flex-direction: column; }
.soc-visibility { display: flex; width: 100%; }
.soc-visibility .seg-btn { flex: 1; min-height: 40px; }

/* shared training, as History draws its weekly bars, and a profile's posts */
.soc-activity-card .card-body { gap: 10px; }
.soc-posts-section { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.soc-posts-section > .section-title { margin: 12px 0 -4px; }
.soc-line-tabs { display: flex; justify-content: space-between; gap: 12px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--border); }
.soc-line-tabs::-webkit-scrollbar { display: none; }
.soc-line-tab { flex: none; min-height: 44px; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--ink-3); font-size: 14px; font-weight: 650; white-space: nowrap; }
.soc-line-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.soc-post-list { display: flex; flex-direction: column; gap: 10px; }
.soc-post-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.soc-post-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.soc-post-row .soc-post-title { font-size: 16px; }
.soc-post-row .soc-photo-box { flex: none; width: 64px; height: 64px; min-height: 0; }
.soc-post-row .soc-stale { margin-top: 2px; }

/* the feed */
.soc-chips .chip { min-height: 36px; }
.soc-feed { display: flex; flex-direction: column; gap: var(--sp-3); }
.soc-feed-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 12px; }
.soc-feed-foot:empty { display: none; }
.soc-more-host { display: flex; justify-content: center; }
.soc-more-host:empty { display: none; }

/* a post */
.soc-post .card-body { gap: 12px; }
.soc-post-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.soc-post-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.soc-post-meta { display: flex; min-width: 0; font-size: 12.5px; color: var(--ink-3); }
.soc-post-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-post-day { flex: none; white-space: pre; }
.soc-post-open { display: block; width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.soc-post-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.soc-post-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.soc-post-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0; overflow-wrap: break-word; }
.soc-stale { font-size: 13px; font-weight: 650; color: var(--ink); background: color-mix(in srgb, #F59E0B 18%, var(--surface-2)); border-radius: 6px; padding: 4px 8px; margin: 0; align-self: flex-start; }
.soc-partial { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin: 0; }
.soc-caption { white-space: pre-line; overflow-wrap: break-word; margin: 0; font-size: 15px; line-height: 1.5; }
.soc-figures { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.soc-figure { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.soc-figure strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.soc-figure span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.soc-figures-sm { gap: 4px 18px; margin-top: 2px; }
.soc-figures-sm .soc-figure strong { font-size: 16px; font-weight: 750; }
.soc-photo-box { display: block; position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); min-height: 80px; }
.soc-photo-box.missing { display: grid; place-items: center; color: var(--ink-3); font-size: 12px; }
.soc-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.soc-photos { display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.soc-photos-1 { grid-template-columns: 1fr; }
.soc-photos .soc-photo-box { aspect-ratio: 4 / 3; }
.soc-photos-full { display: flex; flex-direction: column; gap: 8px; }
.soc-photos-full .soc-photo { height: auto; max-height: min(75vh, 640px); object-fit: contain; }
.soc-ex-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.soc-ex-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.soc-ex-line:last-child { border-bottom: 0; padding-bottom: 0; }
.soc-ex-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.soc-ex-name { font-weight: 650; font-size: 15px; overflow-wrap: break-word; margin: 0; }
.soc-ex-sub { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.soc-ex-val { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc-more, .soc-bench-line, .soc-note { font-size: 13px; color: var(--ink-2); margin: 0; }
.soc-ex-list > .soc-more { padding-top: 8px; }

/* who posted it: one link to their profile — picture, name, handle — with the day beside it, apart from the link */
.soc-post-author { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; min-height: 44px; color: inherit; border-radius: var(--radius-sm); }
a.soc-post-author { cursor: pointer; }
a.soc-post-author:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a.soc-post-author:hover .soc-person-name { text-decoration: underline; text-underline-offset: 2px; } }
.soc-post-author .soc-post-handle { font-size: 12.5px; color: var(--ink-3); }
.soc-post-head > .soc-post-day { flex: none; align-self: center; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* a progress recap: its period and dates, its totals, the grid of days trained, its workouts and all-time bests */
.soc-recap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.soc-recap-period { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.soc-recap-tiles { display: grid; grid-template-columns: repeat(var(--tiles, 3), minmax(0, 1fr)); gap: 8px; }
.soc-recap-tiles.n2 { --tiles: 2; }
.soc-recap-tiles.n1 { --tiles: 1; }
.soc-recap-tiles .soc-figure { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.soc-recap-tiles .soc-figure strong { font-size: 20px; overflow-wrap: break-word; }
.soc-recap-tiles .soc-figure strong.long { font-size: 16px; }
@media (max-width: 360px) {
  .soc-recap-tiles .soc-figure { padding: 8px; }
  .soc-recap-tiles .soc-figure strong { font-size: 18px; }
  .soc-recap-tiles .soc-figure strong.long { font-size: 15px; }
}
.soc-recap-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.soc-recap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.soc-recap-label { margin: 0; font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.soc-recap-right { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.soc-recap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(var(--weeks, 12), minmax(0, 28px)); gap: 3px; }
.soc-recap-cell { aspect-ratio: 1; border-radius: 3px; background: var(--seg-bg); }
.soc-recap-cell.off { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.soc-recap-cell.on { background: color-mix(in srgb, var(--wc) 45%, var(--surface)); }
.soc-recap-cell.on.n2 { background: color-mix(in srgb, var(--wc) 72%, var(--surface)); }
.soc-recap-cell.on.n3 { background: var(--wc); }
.soc-recap-text { margin: 0; font-size: 13px; color: var(--ink-2); }
.soc-recap-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.soc-recap-row { justify-content: flex-start; }
.soc-recap-row > .soc-ex-main { flex: 1; }
.soc-recap-swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wc); }
.soc-recap-asof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.soc-recap-updated { font-size: 11.5px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--seg-bg); border-radius: 999px; padding: 2px 8px; }

/* posting a recap: the records chosen, the snapshot notice, what stays private, who sees it beside the action */
.soc-recap-records-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.soc-recap-records-pick:empty { display: none; }
.soc-recap-chosen { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13.5px; color: var(--ink-2); overflow-wrap: break-word; }
.soc-recap-chosen strong { color: var(--ink); font-weight: 650; }
.soc-recap-notice { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; }
.soc-recap-private > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.soc-recap-aud { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.soc-recap-publish select.input { max-width: 100%; }
.progress-community { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.progress-community:empty { display: none; }

/* likes, comments and copying: a row of quiet controls under a post */
.soc-post-actions { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 4px; }
.soc-react-row { display: flex; align-items: center; gap: 2px; margin-left: -10px; min-width: 0; }
.soc-react { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 650; }
.soc-react .icon { width: 21px; height: 21px; }
.soc-react.on { color: var(--accent); }
.soc-react.on .icon svg { fill: currentColor; }
.soc-react:disabled { opacity: 0.5; cursor: default; }
.soc-count-n { font-variant-numeric: tabular-nums; }
.soc-try-btn { margin-left: auto; margin-right: -10px; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--accent); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .soc-react:hover:not(:disabled), .soc-try-btn:hover, .soc-link-btn:hover { background: var(--hover); } }
.soc-copy-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 2px; }
.soc-copy-actions > .btn { min-width: 0; }
.soc-link-btn { min-height: 36px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--ink-3); white-space: nowrap; }
.soc-link-btn.danger { color: var(--danger); }
@media (pointer: coarse) { .soc-link-btn { min-height: 44px; } }

/* a post's own page */
.soc-post-page { display: flex; flex-direction: column; gap: var(--sp-3); }
.soc-post-page > .section-title { margin-bottom: -2px; }

/* the whole result, set by set */
.soc-result { display: flex; flex-direction: column; gap: 16px; }
.soc-ex-detail { display: flex; flex-direction: column; gap: 2px; }
.soc-ex-detail > .soc-ex-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.soc-sets, .soc-splits { display: flex; flex-direction: column; }
.soc-set, .soc-split { display: grid; grid-template-columns: minmax(64px, auto) 1fr auto; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.soc-sets > :last-child, .soc-splits > :last-child { border-bottom: 0; }
.soc-set-label { font-weight: 650; color: var(--ink-2); }
.soc-set-sub { color: var(--ink-3); font-size: 13px; }
.soc-set-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.soc-set-skipped, .soc-set-open { color: var(--ink-3); }
.soc-pr { grid-column: 1 / -1; justify-self: start; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, #F59E0B 22%, var(--surface-2)); }
.soc-standards { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); list-style: disc; }
.soc-split-run .soc-set-label::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.soc-bench-detail { display: flex; flex-direction: column; gap: 8px; }

/* comments: one list, a reply under its comment */
.soc-comments { display: flex; flex-direction: column; gap: var(--sp-3); }
.soc-comment-list { display: flex; flex-direction: column; padding: 4px 0; }
.soc-comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--border); }
.soc-comment:first-child { border-top: 0; }
.soc-comment.reply { padding: 2px 16px 10px 60px; border-top: 0; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
.soc-comment > .soc-avatar { width: 32px; height: 32px; font-size: 11.5px; margin-top: 2px; }
.soc-comment.reply > .soc-avatar { width: 26px; height: 26px; font-size: 10px; }
.soc-comment.gone { display: block; }
.soc-comment-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soc-comment-head { display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; min-width: 0; }
.soc-comment-who { font-weight: 700; font-size: 14.5px; text-align: left; overflow-wrap: break-word; min-width: 0; }
.soc-comment-when { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.soc-comment-text { margin: 1px 0 0; white-space: pre-line; overflow-wrap: break-word; font-size: 14.5px; line-height: 1.45; }
.soc-comment-tools { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin: 0 0 -8px -10px; }
.soc-comment-tools .soc-react { font-size: 13px; }
.soc-comment-tools .soc-react .icon { width: 18px; height: 18px; }
.soc-comment-gone, .soc-comment-none { margin: 0; font-size: 14px; color: var(--ink-3); }
.soc-comment-gone { font-style: italic; }
.soc-comment-none { padding: 10px 16px; }
.soc-comment-form { display: flex; flex-direction: column; gap: 8px; }
.soc-comment-input { min-height: 72px; font-size: 16px; resize: vertical; }
.soc-comment-actions { display: flex; justify-content: flex-end; gap: 10px; }
.soc-comment-actions > .btn { flex: none; min-width: 112px; }

/* notifications */
.soc-notes { padding: 0; overflow: hidden; }
.soc-note { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.soc-note:first-child { border-top: 0; }
.soc-note.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.soc-note .soc-person-text { gap: 2px; flex: 1; }
.soc-note-text { font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; color: var(--ink-2); }
.soc-note-text strong { color: var(--ink); font-weight: 700; }
.soc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.soc-notes > .empty-note { padding: 14px 16px; }
.soc-prefs .card-body { gap: 4px; }
.soc-prefs .soc-card-title { margin-bottom: 4px; }
.soc-prefs .soc-hint { margin-top: 6px; }

/* sharing, updating and copying: the sheets */
.soc-publish, .soc-copy { display: flex; flex-direction: column; gap: 14px; }
.soc-saved-line { display: flex; align-items: center; gap: 8px; margin: -2px 0 0; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.soc-saved-line .icon { width: 18px; height: 18px; color: var(--accent); }
.soc-aud-choices { display: flex; flex-direction: column; gap: 8px; }
.soc-radio { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.soc-radio:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.soc-radio:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.soc-radio input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.soc-radio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.soc-radio-title { font-size: 15px; font-weight: 650; }
.soc-radio-sub { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.soc-radio > .icon { width: 18px; height: 18px; color: var(--ink-3); }
.soc-radio:has(input:checked) > .icon { color: var(--accent); }
.soc-photo-pick { display: flex; flex-direction: column; gap: 10px; }
.soc-photo-pick:empty { display: none; }
.soc-photo-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.soc-photo-item { display: flex; flex-direction: column; gap: 6px; }
.soc-photo-item .soc-photo-box { aspect-ratio: 1; }
.soc-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.soc-add-photo { position: relative; align-self: flex-start; }
.soc-add-photo:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a photo still being made ready: its place in the list, dashed, saying so until it is there */
.soc-photo-wait { display: grid; place-items: center; border: 1px dashed var(--border); color: var(--ink-2); font-size: 13px; font-weight: 600; }
/* New post while a Publish is on its way: nothing of the post can be changed until it ends, and it looks so */
.soc-note-sheet.is-sending .soc-add-photo, .soc-note-sheet.is-sending .soc-video-add { opacity: 0.55; pointer-events: none; }
.soc-note-sheet.is-sending .soc-note-input { color: var(--ink-2); }
.soc-note-sheet.is-sending .soc-radio { cursor: default; }
.soc-note-sheet.is-sending .soc-radio:not(:has(input:checked)) { opacity: 0.55; }
.soc-preview { display: flex; flex-direction: column; gap: 10px; }
.soc-preview .soc-post { box-shadow: none; }
.soc-preview-more { border-top: 1px solid var(--border); }
.soc-preview-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.soc-preview-more > summary::-webkit-details-marker { display: none; }
.soc-preview-more > summary .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.soc-preview-more[open] > summary .icon { transform: rotate(180deg); }
.soc-preview-more > .soc-result { padding: 2px 0 14px; }
.soc-private-list { display: flex; flex-direction: column; gap: 10px; }
.soc-private-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.soc-private-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.soc-private-list li .icon { width: 15px; height: 15px; color: var(--ink-3); }
.soc-status { margin: 0; font-size: 14px; color: var(--ink-2); min-height: 1px; }
.soc-status.warn { color: var(--danger); font-weight: 600; }
.soc-status:empty { display: none; }
/* the sheet's buttons stay in reach while it scrolls, covering the sheet's own bottom padding */
.soc-sheet-actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); z-index: 1; margin: 2px 0 calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 0 calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
.soc-sheet-actions .dlg-actions { padding-top: 0; }
.soc-sheet-actions > .soc-status { margin: 0 0 10px; text-wrap: pretty; }
.soc-sheet-actions > .soc-status:has(+ :empty) { margin-bottom: 0; }
.soc-sheet-actions .dlg-actions + .dlg-actions { margin-top: 10px; }
.soc-actions-stack { display: flex; flex-direction: column; gap: 10px; }
.soc-actions-stack > .btn { width: 100%; }
.soc-copy-list { display: flex; flex-direction: column; }
.soc-copy-ex { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.soc-copy-ex:last-child { border-bottom: 0; }
.soc-copy-ex .soc-checkbox { margin-top: 2px; }
.soc-copy-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* how something ended, or where it stands */
.soc-outcome { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px 0; text-align: center; }
.soc-outcome-for { margin: 0 0 2px; }
.soc-outcome-mark { width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.soc-outcome-mark .icon { width: 26px; height: 26px; }
.soc-outcome.wait .soc-outcome-mark { background: color-mix(in srgb, #F59E0B 16%, transparent); color: #B45309; }
html.theme-dark .soc-outcome.wait .soc-outcome-mark { color: #FBBF24; }
.soc-outcome.warn .soc-outcome-mark { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.soc-outcome-title { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; margin: 0; }
.soc-outcome-text { max-width: 38ch; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.soc-outcome > .dlg-actions { width: 100%; margin-top: 10px; }

/* what this device holds and everything published, on your profile */
.soc-manage { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.soc-manage > .section-title + .card, .soc-manage > .section-title + .empty-note { margin-top: 0; }
.soc-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); }
.soc-manage-row:first-child { border-top: 0; }
.soc-manage-row > .soc-person-text { flex: 1 1 170px; }
.soc-manage-row .soc-person-sub { white-space: normal; line-height: 1.4; }
.soc-manage-row > .soc-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.soc-manage-row .btn { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
@media (pointer: coarse) { .soc-manage-row .btn { min-height: 44px; } }

/* Community on a session's page, and Today's way in */
.soc-session-card[hidden] { display: none; }
.soc-session-card .card-body { gap: 10px; }
.soc-session-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.soc-session-action { display: flex; }
.soc-session-action:empty { display: none; }
.soc-session-action > .btn { width: 100%; }
.share-community-btn .icon svg, .soc-post-menu .icon svg { width: 18px; height: 18px; }
/* the day and, beside it, the way to the person's own Community profile: a 48 px control holding a 40 px picture (the
   person's photo over their initials, or the plain profile icon, 20 px, centred in the same circle until the profile
   is known), the title column giving way before the control does */
.today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-head > .today-title { flex: 1 1 auto; min-width: 0; }
.today-community { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.today-community .soc-avatar { width: 40px; height: 40px; font-size: 13px; }
.today-community > .icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-2); }
.today-community > .icon svg { width: 20px; height: 20px; }
/* Home: the ways into Chat, Messages and Community — one card under the title, a full-width row for each, drawn as
   More draws them: the icon on a teal tile, the name and what is new there, the count in a teal pill and a chevron.
   Each row is 60 px tall at least, its text column giving way before the tile, the count or the chevron do; the line
   between rows starts at the text. The line turns teal when there is news; the count's teal is the darker one on the
   light theme (white on it at 5.5:1), the light one under dark ink on the dark. The slot takes no room while empty. */
.home-links-slot:empty { display: none; }
.home-links {
  display: flex; flex-direction: column; background: var(--card-sheen), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.home-link {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 10px 14px; color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.home-link + .home-link::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--border); }
.home-link-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--msg-teal); background: color-mix(in srgb, var(--msg-teal-soft) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--msg-teal-soft) 32%, var(--border));
}
.home-link-ic .icon { width: 20px; height: 20px; }
.home-link-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-link-label { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.home-link-sub { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.home-link.has-news .home-link-sub { color: var(--msg-link); font-weight: 600; }
.home-link-count {
  flex: none; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--msg-link); color: #FFFFFF;
  font-size: 12.5px; font-weight: 750; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -6px var(--msg-teal);
}
.home-link-count[hidden] { display: none; }
.home-link-chev { flex: none; display: inline-flex; color: var(--ink-3); margin-right: -2px; }
.home-link-chev .icon { width: 18px; height: 18px; }
.home-link:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .home-link:hover { background: var(--hover); } }
.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
html.theme-dark .home-link-ic {
  color: var(--msg-teal-soft); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}
html.theme-dark .home-link-ic .icon { filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.35)); }
html.theme-dark .home-link-count { background: var(--msg-teal-soft); color: #062621; box-shadow: 0 0 14px -4px rgba(45, 212, 191, 0.55); }
@media (prefers-reduced-motion: reduce) { .home-link { transition: none; } }

/* Today: people to follow, under Coming up — a row of cards that scrolls sideways, each a member's picture, name,
   handle and reason with Follow, and a corner button to put them aside. The two slots take no room while empty, so
   Today's rhythm (16 px between blocks) holds whichever arrives first; the row's shadow room is folded into its own
   margins. The heading row is one line tall: See all keeps a full-height tap target through its padding alone. The
   page's side gutter is a token on #view (--gutter) so the row can run under it. */
.today-upcoming-slot:empty, .today-suggest-slot:empty { display: none; }
.today-suggest-head { align-items: baseline; margin-bottom: var(--sp-2); }
.today-suggest-head > .section-label { margin: 0; }
.today-suggest-head > .text-btn { min-height: 0; font-size: 13px; padding: 10px 0; margin: -10px 0; }
/* the row runs under the page's side gutters, so a card is cut at the screen's edge and not at the text's */
.suggest-track {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px var(--gutter, 16px) 8px; margin: -2px calc(-1 * var(--gutter, 16px)) -8px; scroll-padding-inline: var(--gutter, 16px);
}
.suggest-track::-webkit-scrollbar { display: none; }
.suggest-card {
  position: relative; flex: 0 0 152px; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 12px 12px; text-align: center; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.suggest-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; color: var(--ink-3); }
.suggest-x .icon { width: 15px; height: 15px; }
.suggest-who {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; padding: 4px 0 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-sm);
}
.suggest-who > .soc-avatar { width: 64px; height: 64px; font-size: 20px; margin-bottom: 6px; }
.suggest-name { font-weight: 650; font-size: 14.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-handle, .suggest-reason { font-size: 12.5px; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-card > .soc-btn { width: 100%; margin-top: 6px; min-height: 40px; }
@media (hover: hover) and (pointer: fine) { .suggest-who:hover .suggest-name { text-decoration: underline; text-underline-offset: 2px; } }

/* Community: the way to New post, above the Following feed's filters — the person's picture beside an invitation to
   write (a field to tap, 48 px tall), and Photo and Video under a hairline, each a 44 px target with its icon on a small
   teal tile, as Home's rows draw theirs. The words are teal: the darker teal on the light theme, the light one on the
   dark. A member's own post shows its words a size up from a caption; a feed shows its first lines and says there is
   more. On the owner's profile, New post is filled in the darker teal (white on it at 5.5:1) across its row. */
.soc-composer {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--card-sheen), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.soc-composer-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.soc-composer-field {
  flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 6px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  color: var(--ink-2); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.soc-composer-prompt { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink-2); overflow-wrap: break-word; }
.soc-composer-hint { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.soc-composer-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.soc-composer-acts { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.soc-composer-act {
  flex: 1 1 0; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--msg-link); font-size: 14px; font-weight: 650;
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out);
}
.soc-composer-act:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.soc-composer-act-ic {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--msg-teal); background: color-mix(in srgb, var(--msg-teal-soft) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--msg-teal-soft) 32%, var(--border));
}
.soc-composer-act-ic .icon { width: 16px; height: 16px; }
.soc-composer-act-label { min-width: 0; white-space: nowrap; }
.soc-composer-act:active, .soc-composer-field:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) {
  .soc-composer-act:hover, .soc-composer-field:hover { background: var(--hover); }
}
html.theme-dark .soc-composer-act { color: var(--msg-teal-soft); }
html.theme-dark .soc-composer-act-ic {
  color: var(--msg-teal-soft); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}
@media (prefers-reduced-motion: reduce) { .soc-composer-field, .soc-composer-act { transition: none; } }
.soc-note-words { font-size: 16px; line-height: 1.5; color: var(--ink); }
.soc-note-more { margin: 2px 0 0; font-size: 14px; font-weight: 650; color: var(--msg-link); }
html.theme-dark .soc-note-more { color: var(--msg-teal-soft); }
.soc-own-actions > .soc-new-post { grid-column: 1 / -1; }
.soc-new-post { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--msg-link); border-color: var(--msg-link); color: #FFFFFF; font-weight: 700; }
.soc-new-post .icon { width: 18px; height: 18px; }
html.theme-dark .soc-new-post { background: var(--msg-teal-soft); border-color: var(--msg-teal-soft); color: #062621; }
/* New post: who is posting, the words (16 px, so a phone does not zoom; the box grows with them), the count once the
   end is near, then the photos, the video, who can see it and Publish */
.soc-note-sheet { gap: 14px; }
.soc-note-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.soc-note-who-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.soc-note-who-name { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-note-who-handle { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-note-input { min-height: 120px; font-size: 16px; line-height: 1.5; resize: vertical; }
.soc-note-count { margin: -8px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.soc-note-count:empty { display: none; }
.soc-note-count.warn { color: var(--danger); font-weight: 600; }
.soc-note-draft { margin: 0; }

/* Discover: the switch beside Following, the member's topics, people to follow, and why each post is shown */
.soc-feed-switch { display: flex; width: 100%; }
.soc-feed-switch .seg-btn { flex: 1 1 0; min-height: 44px; }
.soc-topics-card .card-body { gap: 10px; }
.soc-topics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.soc-topics-head > .soc-card-title { margin: 0; }
.soc-topics-head > .btn { min-height: 36px; padding: 0 14px; }
.soc-topic-list { gap: 6px; }
.soc-topic { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: 999px; background: var(--seg-bg); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.soc-topics-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.soc-topics-empty > .soc-hint { margin: 0; }
.soc-topic-chips { gap: 7px; }
.soc-topic-chips .chip:disabled { opacity: 0.45; cursor: not-allowed; }
.soc-topic-pick { display: flex; flex-direction: column; gap: 8px; }
.soc-topic-pick:empty { display: none; }
.soc-topic-pick > .soc-sub-title, .soc-topic-pick > .soc-hint { margin: 0; }
.soc-suggest:empty { display: none; }
.soc-suggest > .section-title { margin: 6px 0 10px; }
.soc-discover-lead:empty { display: none; }
.soc-discover-lead > .soc-notice { margin: 0; }
.soc-discover-item { display: flex; flex-direction: column; gap: 6px; }
.soc-reason { display: flex; align-items: center; gap: 6px; margin: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.soc-reason .icon { flex: none; width: 15px; height: 15px; }
.soc-reason .icon svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .soc-topics-head > .btn, .soc-topic-chips .chip { min-height: 44px; } }
/* a goal milestone's card */
.soc-goal-line { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; color: var(--ink-2); }
.soc-goal-line .icon, .soc-goal-line .icon svg { width: 16px; height: 16px; }
.soc-goal-line.done { color: var(--accent); }
.soc-goal-bar { position: relative; height: 8px; margin-top: 2px; border-radius: 999px; background: var(--seg-bg); overflow: hidden; }
.soc-goal-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: inherit; background: var(--accent); }

/* an @handle in a caption or a comment */
.soc-mention { color: var(--accent); font-weight: 620; text-decoration: none; overflow-wrap: break-word; }
a.soc-mention:hover { text-decoration: underline; }
a.soc-mention:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* a routine shared on its own, and a folder of routines */
.soc-kind-line { color: var(--ink-2); }
.soc-folder-desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); white-space: pre-line; overflow-wrap: break-word; }
.soc-folder-pick { display: flex; flex-direction: column; }
.soc-folder-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.soc-folder-row:last-child { border-bottom: 0; }
.soc-folder-row .soc-copy-main { flex: 1 1 auto; }
.soc-folder-row .soc-aud-plain { font-size: 12px; }
.soc-folder-move { display: inline-flex; gap: 6px; flex: none; }
.soc-folder-move .btn { min-width: 40px; padding-inline: 0; }
.soc-folder-list { display: flex; flex-direction: column; }
.soc-folder-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.soc-folder-item:last-child { border-bottom: 0; }
.soc-folder-item.gone .soc-ex-sub { font-style: italic; color: var(--ink-3); }
.soc-folder-pos { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--seg-bg); font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.soc-folder-copy { border-bottom: 1px solid var(--border); }
.soc-folder-copy:last-child { border-bottom: 0; }
.soc-folder-copy > .soc-copy-ex { border-bottom: 0; }
.soc-folder-copy > .soc-preview-more { border-top: 0; padding-left: 32px; }
.soc-folder-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.soc-folder-new > .soc-hint { margin: 0; }
@media (pointer: coarse) { .soc-folder-move .btn { min-width: 44px; min-height: 44px; } }

/* comparing with someone, and friend leaderboards */
.soc-compare, .soc-boards { display: flex; flex-direction: column; gap: 14px; }
.soc-compare > .card, .soc-boards > .card, .soc-compare > .section-title { margin: 0; }
.soc-compare-head { display: flex; align-items: center; gap: 12px; }
.soc-period { display: flex; width: 100%; }
.soc-period .seg-btn { flex: 1 1 0; min-height: 40px; padding-inline: 6px; }
/* on a phone, Community's chips and segmented controls are 44 px tall to the finger */
@media (pointer: coarse) { .soc-chips .chip, .soc-preview-switch .seg-btn, .soc-visibility .seg-btn, .soc-period .seg-btn { min-height: 44px; } }
.soc-compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.soc-compare-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--seg-bg); }
.soc-compare-side.ahead { box-shadow: inset 0 0 0 1.5px var(--accent); }
.soc-compare-who { font-size: 12.5px; font-weight: 650; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-compare-big, .soc-compare-val { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: break-word; }
.soc-compare-side .soc-hint { margin: 0; }
.soc-compare-list { display: flex; flex-direction: column; }
.soc-compare-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.soc-compare-item:first-child { padding-top: 0; }
.soc-compare-item:last-child { padding-bottom: 0; border-bottom: 0; }
.soc-compare-label { display: flex; flex-direction: column; gap: 2px; }
.soc-compare-item .soc-compare-pair { margin-top: 8px; }
.soc-board-list { display: flex; flex-direction: column; }
.soc-board-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.soc-board-row:last-child { border-bottom: 0; }
.soc-board-row > .icon { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.soc-board-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.soc-board-title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0; overflow-wrap: break-word; }
.soc-board-title + .soc-hint { margin: -8px 0 0; }
.soc-board-entry { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.soc-board-entry:last-child { border-bottom: 0; }
.soc-board-entry > .soc-person-text { flex: 1 1 auto; }
.soc-board-entry.me .soc-person-name { color: var(--accent); }
.soc-board-rank { flex: none; width: 26px; text-align: center; font-size: 15px; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.soc-board-val { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* a post's video: chosen in the composer, marked on a card, played on the post's page only when tapped */
.soc-video-pick { display: flex; flex-direction: column; gap: 8px; }
.soc-video-pick > .soc-sub-title, .soc-video-pick > .soc-hint, .soc-video-pick > .soc-status { margin: 0; }
.soc-video-add { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; cursor: pointer; }
.soc-video-add .icon, .soc-video-ready .icon, .soc-video-mark .icon { width: 16px; height: 16px; }
.soc-video-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--seg-bg); font-weight: 600; }
.soc-video-ready > span { flex: 1 1 auto; min-width: 0; }
.soc-video-ready.waiting { color: var(--ink-2); font-weight: 500; }
.soc-video-ready .btn { flex: none; }
.soc-video-mark { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* a video keeps its shape and is never taller than the screen can comfortably show: a tall one stands narrower, centred */
.soc-video { position: relative; width: min(100%, calc(min(420px, 60vh) * var(--ar, 1.7778))); margin-inline: auto; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--radius-sm); overflow: hidden; background: #0B0D10; }
.soc-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; color: #fff; cursor: pointer; }
.soc-video-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.soc-video-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.soc-video-icon .icon, .soc-video-icon svg { width: 26px; height: 26px; }
.soc-video-len { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.soc-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) { .soc-person-main, .soc-btn, .soc-react, .soc-post-open, .soc-note, .soc-preview-more > summary .icon { transition: none; } }

/* ---------------- Chat and messages ---------------- */
/* Manx Grapple's chat in REPPIN's styles: the REPPIN symbol as the pattern behind the messages, teal for what is the
   person's own and for where it stands (a grey dot while sending, teal once sent, light teal glowing once seen) */
:root {
  --msg-teal: #0D9488;
  --msg-teal-soft: #2DD4BF;
  --msg-mine: color-mix(in srgb, #2DD4BF 16%, #FFFFFF);
  --msg-mine-border: color-mix(in srgb, #2DD4BF 34%, #FFFFFF);
  --msg-link: #0F766E;
  --msg-pending: #A3ABB7;
  --msg-act-bg: #0D9488;
  --msg-act-ink: #FFFFFF;
  --msg-mark: 0.05;
}
html.theme-dark {
  --msg-teal: #14B8A6;
  --msg-teal-soft: #5EEAD4;
  --msg-mine: color-mix(in srgb, #2DD4BF 15%, #171A1F);
  --msg-mine-border: color-mix(in srgb, #2DD4BF 30%, #171A1F);
  --msg-link: #5EEAD4;
  --msg-pending: rgba(255, 255, 255, 0.34);
  --msg-act-bg: #2DD4BF;
  --msg-act-ink: #062621;
  --msg-mark: 0.06;
}

/* a conversation fills the screen: its header and composer stay put, and only the messages scroll */
html.route-conv #view { padding-top: 16px; padding-bottom: 16px; }
html.route-conv .resume-pill { display: none; }
.msg-screen { display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - 32px); width: 100%; max-width: 760px; margin: 0 auto; }
@media (max-width: 899px) {
  html.route-conv body { overflow: hidden; overscroll-behavior: none; }
  .msg-screen {
    position: fixed; left: 0; right: 0; top: 0; z-index: 5; height: auto; max-width: none;
    bottom: var(--msg-tabbar, calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)));
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 12px;
    background: var(--bg);
  }
  /* the keyboard up: the screen is what it leaves, and the tab bar (behind the keyboard anyway) goes */
  html.route-conv.msg-kb #tabbar { display: none; }
  html.msg-kb .msg-screen { top: var(--msg-vv-top, 0px); bottom: auto; height: var(--msg-vv-h, 100dvh); padding-top: 8px; padding-bottom: 6px; }
}

/* the header */
.msg-head-slot { flex: none; }
.msg-head { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.msg-head-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 2px 4px; border-radius: var(--radius-sm); color: inherit; text-align: left; }
@media (hover: hover) and (pointer: fine) { .msg-head-who:hover { background: var(--hover); } }
.msg-head-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.msg-head-title { font-size: 18px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-head-sub { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.msg-head-mark { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--msg-act-bg); color: var(--msg-act-ink); }
.msg-head-logo { width: 20px; height: 22px; color: inherit; }
.msg-back { margin-left: -6px; }

/* the messages, over the symbol: the pattern stays still while they scroll */
.msg-logwrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.msg-logwrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background-color: var(--ink); opacity: var(--msg-mark);
  -webkit-mask: url("/icons/chat-watermark.svg") 0 0 / 116px 176px repeat; mask: url("/icons/chat-watermark.svg") 0 0 / 116px 176px repeat;
}
.msg-log { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 2px 8px; }
.msg-log:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.msg-list { display: flex; flex-direction: column; }
.msg-older { display: block; width: 100%; padding: 10px 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.msg-status { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; text-align: center; font-size: 14px; color: var(--ink-2); }
.msg-jump { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-hover); color: var(--ink-2); }
.msg-jump.news::after { content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--msg-teal); border: 2px solid var(--surface); }
.msg-day { display: flex; justify-content: center; margin: 14px 0 6px; }
.msg-day span { padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; font-weight: 650; color: var(--ink-2); letter-spacing: 0.02em; }
.msg-typing { flex: none; min-height: 18px; padding: 1px 8px; font-size: 12px; font-style: italic; color: var(--ink-3); }

/* one message: others' at the left with their picture beside the last of a run, the person's own at the right */
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; margin-top: 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.msg:not(.first) { margin-top: 3px; }
.msg.mine { align-self: flex-end; max-width: 82%; --msg-ck-ring: var(--msg-mine); }
.msg-av { flex: none; width: 32px; display: flex; align-items: flex-end; }
.msg-av .soc-avatar { width: 32px; height: 32px; font-size: 11.5px; }
.msg-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.msg.mine .msg-body { align-items: flex-end; }
.msg-who { margin: 0 6px 3px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.msg-bub {
  position: relative; max-width: 100%; min-width: 0; padding: 7px 11px 6px;
  border-radius: 16px 16px 16px 6px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 15px; line-height: 1.38; overflow-wrap: anywhere;
}
.msg.mine .msg-bub { border-radius: 16px 16px 6px 16px; background: var(--msg-mine); border-color: var(--msg-mine-border); }
.msg-bub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg.failed .msg-bub { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.msg.flash .msg-bub { animation: msg-flash 1.4s var(--ease-out); }
@keyframes msg-flash { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--msg-teal-soft) 70%, transparent); } 100% { box-shadow: var(--shadow); } }
.msg-text { white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
.msg-link { color: var(--msg-link); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.msg-bub .soc-mention { color: var(--msg-link); font-weight: 650; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 3px; font-size: 10.5px; line-height: 1; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a little more air above the time on a wide screen; a phone's stays as it is */
@media (min-width: 900px) { .msg-meta { margin-top: 5px; } }
.msg-edited { font-style: italic; }
.msg-time { color: inherit; }
/* the time and the dot are one button: a tap on a seen dot says who has seen it. Its reach goes sideways and down,
   into the bubble's own padding, never up over what the message shows */
.msg-rcpt { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; margin: -2px -6px; border-radius: 8px; color: inherit; font: inherit; line-height: 1; }
.msg-rcpt:disabled { cursor: default; }
.msg-rcpt:not(:disabled)::after { content: ''; position: absolute; top: 0; left: -8px; right: -8px; bottom: -12px; }
.msg-rcpt:not(:disabled) { cursor: pointer; }
.msg-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--msg-teal); transition: background-color 0.2s ease, box-shadow 0.25s ease; }
.msg-dot.sending { background: var(--msg-pending); }
.msg-dot.seen { background: var(--msg-teal-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--msg-teal-soft) 60%, transparent), 0 0 7px 2px color-mix(in srgb, var(--msg-teal-soft) 75%, transparent); }
.msg-retry { padding: 2px 0; font-size: 12px; font-weight: 650; color: var(--danger); }
.msg-retry.final { white-space: normal; text-align: right; line-height: 1.3; max-width: 260px; }

/* what a message quotes */
.msg-quote { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; margin: 0 0 6px; padding: 5px 8px; border-left: 3px solid var(--msg-teal); border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: inherit; text-align: left; line-height: 1.3; }
.msg-quote-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.msg-quote-name { font-size: 12px; font-weight: 700; color: var(--msg-teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote-text { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote-thumb-box { flex: none; width: 34px; height: 34px; border-radius: 5px; overflow: hidden; background: var(--seg-bg); }
.msg-quote-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }

/* photos, GIFs, videos */
.msg-bub.media-photo, .msg-bub.media-gif, .msg-bub.media-video { padding: 4px 4px 6px; }
.msg-bub.media-photo .msg-text, .msg-bub.media-video .msg-text, .msg-bub.media-photo .msg-quote, .msg-bub.media-gif .msg-quote, .msg-bub.media-video .msg-quote { display: block; padding: 0 7px; }
.msg-bub.media-photo .msg-quote, .msg-bub.media-gif .msg-quote, .msg-bub.media-video .msg-quote { display: flex; margin: 3px 3px 6px; width: auto; }
.msg-bub.media-photo .msg-meta, .msg-bub.media-gif .msg-meta, .msg-bub.media-video .msg-meta { padding: 0 7px; }
.msg-photo-btn { display: block; width: min(260px, 62vw); max-width: 100%; aspect-ratio: var(--ar, 4 / 3); max-height: 340px; margin: 0 0 4px; padding: 0; border-radius: 12px; overflow: hidden; background: var(--seg-bg); cursor: zoom-in; }
.msg-photo-box { display: block; width: 100%; height: 100%; }
.msg-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.msg-photo-box.missing, .msg-quote-thumb-box.missing, .msg-group-photo-box.missing, .msg-group-photo-lg-box.missing, .msg-photo-big-box.missing { background: repeating-linear-gradient(135deg, var(--seg-bg) 0 8px, var(--surface-2) 8px 16px); }
.msg-photo-box.missing img, .msg-quote-thumb-box.missing img, .msg-group-photo-box.missing img, .msg-group-photo-lg-box.missing img, .msg-photo-big-box.missing img { visibility: hidden; }
.msg-gif { display: block; width: min(240px, 60vw); max-width: 100%; height: auto; margin: 0 0 4px; border-radius: 12px; background: var(--seg-bg); }
.msg-video { width: min(280px, 66vw); max-width: 100%; margin: 0 0 4px; }
.msg-video .soc-video { width: 100%; border-radius: 12px; }
.msg-video-wait, .msg-gif-off { display: inline-flex; align-items: center; gap: 6px; padding: 6px 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.msg-photo-full { display: flex; flex-direction: column; gap: 10px; }
.msg-photo-big-box { display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--seg-bg); }
.msg-photo-big { display: block; width: 100%; height: auto; max-height: 72dvh; object-fit: contain; }
.msg-photo-caption { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }

/* a voice note: play it, how far it has played, how long it is */
.msg-voice { display: flex; align-items: center; gap: 10px; min-width: min(210px, 56vw); padding: 3px 0 2px; color: inherit; text-align: left; }
.msg-voice-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--msg-act-bg); color: var(--msg-act-ink); }
.msg-voice-ic .icon { width: 16px; height: 16px; }
.msg-voice .msg-i-pause, .msg-draft-play .msg-i-pause { display: none; }
.msg-voice.playing .msg-i-play, .msg-draft-play.playing .msg-i-play { display: none; }
.msg-voice.playing .msg-i-pause, .msg-draft-play.playing .msg-i-pause { display: inline-flex; }
.msg-voice.loading .msg-voice-ic { opacity: 0.6; }
.msg-voice.missing .msg-voice-ic { background: var(--ink-3); }
.msg-voice.pending { font-size: 13px; color: var(--ink-2); }
.msg-voice-bar { position: relative; flex: 1; min-width: 80px; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.msg-voice-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); border-radius: 2px; background: var(--msg-teal); }
.msg-voice-len { flex: none; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* a poll */
.msg-bub.has-poll { min-width: min(260px, 70vw); }
.msg-poll { display: flex; flex-direction: column; gap: 2px; }
.msg-poll-q { display: flex; align-items: flex-start; gap: 6px; font-weight: 700; overflow-wrap: anywhere; }
.msg-poll-q .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--msg-teal); }
.msg-poll-hint { margin-bottom: 4px; font-size: 11.5px; color: var(--ink-3); }
.msg-poll-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 6px 0; color: inherit; text-align: left; }
.msg-poll-opt:disabled { cursor: default; }
.msg-poll-ck { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-3); }
.msg-poll-opt.multi .msg-poll-ck { border-radius: 5px; }
.msg-poll-opt.sel .msg-poll-ck { border-color: var(--msg-teal); background: var(--msg-teal); box-shadow: inset 0 0 0 3px var(--msg-ck-ring, var(--surface)); }
.msg-poll-body { display: flex; flex-direction: column; flex: 1; gap: 4px; min-width: 0; }
.msg-poll-label { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.msg-poll-bar { display: block; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.msg-poll-fill { display: block; width: var(--w, 0%); height: 100%; border-radius: 2px; background: var(--msg-teal); transition: width 0.25s var(--ease-out); }
.msg-poll-n { flex: none; min-width: 18px; text-align: right; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.msg-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.msg-poll-view { position: relative; padding: 4px 0; font-size: 12px; font-weight: 650; color: var(--msg-teal); }
/* a larger place to tap than the words, kept clear of the vote count beside it */
.msg-poll-view::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: -10px; right: -6px; }

/* reactions under a message */
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 4px 0; }
.msg.mine .msg-reacts { justify-content: flex-end; }
.msg-react { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px; line-height: 1.3; }
.msg-react.mine { border-color: var(--msg-teal); background: color-mix(in srgb, var(--msg-teal-soft) 18%, var(--surface)); }
.msg-react-e { font-size: 14px; }
.msg-react-n { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .msg-react { min-height: 32px; } }

/* the panels a message opens: its menu, who reacted, who has seen it */
.msg-pop { position: fixed; z-index: 90; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow-lift); }
.msg-pop:focus { outline: none; }
.msg-menu { padding: 6px; }
.msg-menu-reacts { display: flex; justify-content: center; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.msg-menu-reacts::-webkit-scrollbar { display: none; }
.msg-menu-emoji { flex: none; width: 42px; height: 42px; border-radius: 50%; font-size: 23px; line-height: 1; transition: transform 0.1s ease; }
.msg-menu-emoji.on { background: color-mix(in srgb, var(--msg-teal-soft) 22%, transparent); }
@media (hover: hover) and (pointer: fine) { .msg-menu-emoji:hover { transform: scale(1.18); } }
.msg-menu-acts { display: flex; flex-direction: column; padding-top: 4px; min-width: 200px; }
.msg-menu-act { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: left; color: var(--ink); }
.msg-menu-act .icon { width: 19px; height: 19px; color: var(--ink-2); }
.msg-menu-act.danger, .msg-menu-act.danger .icon { color: var(--danger); }
@media (hover: hover) and (pointer: fine) { .msg-menu-act:hover { background: var(--hover); } }
.msg-tip { min-width: 160px; max-width: min(260px, calc(100vw - 16px)); max-height: min(360px, calc(100dvh - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 10px; }
.msg-tip-h { position: sticky; top: 0; padding: 10px 0 6px; background: var(--surface); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.msg-tip-list { display: flex; flex-direction: column; gap: 2px; }
.msg-tip-person { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--ink); }
.msg-tip-person .soc-avatar { width: 26px; height: 26px; font-size: 10px; }
.msg-tip-none { padding: 4px 0; font-size: 13px; color: var(--ink-2); }
.msg-votes { display: flex; flex-direction: column; gap: 14px; }
.msg-votes-opt { display: flex; flex-direction: column; gap: 6px; }
.msg-votes-h { font-weight: 700; overflow-wrap: anywhere; }
.msg-votes-person { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.msg-votes-person .soc-avatar { width: 26px; height: 26px; font-size: 10px; }
.msg-votes-none { color: var(--ink-3); }

/* the composer: the pill, and the round button beside it that is the microphone or the arrow */
.msg-foot { flex: none; }
.msg-composer { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.msg-bar { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.msg-pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 0; min-height: 48px; padding: 2px 4px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.msg-pill:focus-within { border-color: color-mix(in srgb, var(--msg-teal) 60%, var(--border-strong)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--msg-teal-soft) 22%, transparent); }
.msg-field { flex: 1; min-width: 0; min-height: 44px; max-height: 110px; padding: 11px 4px; border: 0; outline: none; background: transparent; resize: none; font-size: 16px; line-height: 1.38; color: var(--ink); }
/* the pill shows where the cursor is: the field inside it draws no ring of its own */
.msg-field:focus, .msg-field:focus-visible { outline: none; box-shadow: none; }
.msg-field::placeholder { color: var(--ink-3); }
.msg-pill-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.msg-pill-btn .icon { width: 22px; height: 22px; }
.msg-pill-btn[aria-expanded="true"] { color: var(--msg-teal); }
@media (hover: hover) and (pointer: fine) { .msg-pill-btn:hover { color: var(--ink); background: var(--hover); } }
.msg-act { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--msg-act-bg); color: var(--msg-act-ink); box-shadow: var(--shadow-hover); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.1s ease, background-color 0.15s ease; }
.msg-act:active { transform: scale(0.92); }
.msg-act .icon { width: 24px; height: 24px; }
.msg-act-mic, .msg-act-send { display: inline-flex; line-height: 0; }
.msg-bar.has-text .msg-act-mic, .msg-bar:not(.has-text) .msg-act-send { display: none; }
.msg-act.starting { opacity: 0.75; }
.msg-act.recording { background: #DC2626; color: #FFFFFF; animation: msg-pulse 1s ease-in-out infinite; }
@keyframes msg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } }
.msg-rec-time { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #DC2626; color: #FFFFFF; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.msg-rec-time:empty { display: none; }
.msg-file { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.msg-replybar, .msg-editbar { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 4px 4px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--msg-teal); }
.msg-replybar-body { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.msg-replybar-name { font-size: 12px; font-weight: 700; color: var(--msg-teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-replybar-text { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-editbar > .icon { width: 17px; height: 17px; color: var(--msg-teal); }
.msg-editbar-text { flex: 1; font-size: 13px; font-weight: 650; color: var(--msg-teal); }
.msg-bar-x { width: 36px; height: 36px; }
.msg-draft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.msg-draft-photo { height: 56px; width: auto; max-width: 96px; border-radius: 8px; object-fit: cover; background: var(--seg-bg); }
.msg-draft-mic { display: inline-flex; color: var(--msg-teal); }
.msg-draft-text { flex: 1; min-width: 40px; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.msg-draft-play { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--msg-act-bg); color: var(--msg-act-ink); }
.msg-draft-play .icon { width: 16px; height: 16px; }
.msg-compose-note { margin: 0; padding: 0 6px; font-size: 12.5px; color: var(--ink-2); }
/* Chat's slow mode: the wait before the next message, counted down above the field; the send button rests meanwhile */
.msg-slow { margin: 0; padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--msg-link); font-variant-numeric: tabular-nums; }
.msg-bar.slow .msg-act { opacity: 0.55; box-shadow: none; }
.msg-closed { padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; color: var(--ink-2); text-align: center; }

/* the emoji panel under the composer */
.msg-emoji { padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.msg-emoji-tabs { display: flex; gap: 4px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.msg-emoji-tabs::-webkit-scrollbar { display: none; }
.msg-emoji-tab { flex: none; min-width: 40px; height: 36px; padding: 0 6px; border-radius: 9px; font-size: 20px; line-height: 1; opacity: 0.55; }
.msg-emoji-tab.on { opacity: 1; background: color-mix(in srgb, var(--msg-teal-soft) 20%, transparent); }
.msg-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 2px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.msg-emoji-btn { height: 42px; border-radius: 9px; font-size: 24px; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .msg-emoji-btn:hover { background: var(--hover); } }

/* the GIF panel over the composer */
.msg-gifs { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 6; display: flex; flex-direction: column; gap: 8px; max-height: min(320px, 52dvh); padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lift); }
.msg-gif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 80px; }
.msg-gif-item { display: block; height: 80px; padding: 0; border-radius: 8px; overflow: hidden; background: var(--seg-bg); }
.msg-gif-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.msg-gif-note { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.msg-gif-retry { font-weight: 650; color: var(--msg-teal); padding: 6px 10px; }
.msg-gif-by { margin: 0; text-align: right; font-size: 10.5px; color: var(--ink-3); }
.msg-gif-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 20px; border: 1.5px solid currentColor; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; color: var(--msg-teal); }

/* @ suggestions over the composer */
.msg-mentions { position: absolute; left: 0; right: 56px; bottom: calc(100% + 6px); z-index: 6; max-height: 230px; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lift); }
.msg-mention { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 9px; cursor: pointer; }
.msg-mention.sel { background: color-mix(in srgb, var(--msg-teal-soft) 20%, transparent); }
.msg-mention .soc-avatar { width: 28px; height: 28px; font-size: 10px; }
.msg-mention-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-mention-handle { flex: none; font-size: 13px; color: var(--msg-teal); }

/* the sheets the composer opens */
.msg-attach-list { display: flex; flex-direction: column; gap: 4px; }
.msg-attach-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; text-align: left; }
.msg-attach-row > .icon { width: 22px; height: 22px; color: var(--msg-teal); }
@media (hover: hover) and (pointer: fine) { .msg-attach-row:hover { background: var(--hover); } }
.msg-poll-question { resize: vertical; min-height: 64px; }
.msg-poll-options { display: flex; flex-direction: column; gap: 6px; }
.msg-poll-row { display: flex; align-items: center; gap: 6px; }
.msg-poll-row > .input { flex: 1; min-width: 0; }
.msg-poll-end { width: 100%; }
.msg-poll-send { width: 100%; }
.msg-form-error { margin: 0; font-size: 13.5px; color: var(--danger); }
.msg-video-words { resize: vertical; min-height: 56px; }

/* the conversations, and the requests */
.msg-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msg-new .icon { width: 16px; height: 16px; }
.msg-tabs { display: flex; width: 100%; margin-bottom: 12px; }
.msg-tabs .seg-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.msg-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--msg-teal); color: #FFFFFF; font-size: 11px; font-weight: 750; line-height: 18px; text-align: center; }
.msg-requests-note { margin: -2px 2px 12px; font-size: 13.5px; color: var(--ink-2); }
.msg-thread-list { display: flex; flex-direction: column; padding: 4px 0; }
.msg-thread { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px; color: inherit; border-bottom: 1px solid var(--border); }
.msg-thread:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .msg-thread:hover { background: var(--hover); } }
.msg-thread:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.msg-thread .soc-avatar, .msg-thread .msg-group-mark, .msg-thread .msg-group-photo-box { width: 44px; height: 44px; }
.msg-thread-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.msg-thread-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.msg-thread-name { flex: 0 1 auto; min-width: 0; font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread-count { flex: none; padding: 0 6px; border-radius: 999px; background: var(--seg-bg); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.msg-thread-muted { flex: none; display: inline-flex; color: var(--ink-3); }
.msg-thread-muted .icon { width: 14px; height: 14px; }
.msg-thread-when { flex: none; margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.msg-thread-prev { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread.unread .msg-thread-name { font-weight: 750; }
.msg-thread.unread .msg-thread-prev { color: var(--ink); font-weight: 550; }
.msg-thread.unread::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 999px; background: var(--msg-teal); }
.msg-thread-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--msg-teal); color: #FFFFFF; font-size: 12px; font-weight: 750; line-height: 22px; text-align: center; }
html.theme-dark .msg-thread-badge, html.theme-dark .msg-tab-n { color: #062621; background: var(--msg-teal-soft); }
.msg-more { width: 100%; margin-top: 10px; }
.msg-av-wrap { position: relative; flex: none; display: inline-flex; }
.msg-online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #22C55E; border: 2px solid var(--surface); }
.msg-group-mark { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--seg-bg); color: var(--ink-2); border: 1px solid var(--border); }
.msg-group-mark .icon { width: 20px; height: 20px; }
.msg-group-mark.lg { width: 64px; height: 64px; }
.msg-group-mark.lg .icon { width: 30px; height: 30px; }
.msg-group-photo-box { flex: none; display: inline-block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--seg-bg); }
.msg-group-photo-lg-box { flex: none; display: inline-block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--seg-bg); }
.msg-group-photo, .msg-group-photo-lg { display: block; width: 100%; height: 100%; object-fit: cover; }
.msg-closed-card p { margin: 0; }

/* a message request, answered in place of the composer */
.msg-request { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.msg-request-text { margin: 0; font-size: 14px; color: var(--ink-2); }
.msg-request-actions { display: flex; gap: 8px; }
.msg-request-actions .btn { flex: 1; }

/* Chat's rooms: the list (the rooms the person is in, then the others), a room's tile, joining one in place of the
   composer, and what a room closed to the person says */
.msg-rooms-head { margin-bottom: 6px; }
.msg-rooms-intro { margin: 0 2px 18px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.msg-rooms-sec + .msg-rooms-sec { margin-top: 22px; }
.msg-rooms-h { margin: 0 4px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.msg-rooms .empty-note { padding: 4px 4px 0; }
.msg-room-mark { flex: none; width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--seg-bg); border: 1px solid var(--border); color: var(--ink-2); font-size: 22px; line-height: 1; }
.msg-room-mark .icon { width: 20px; height: 20px; }
.msg-room-mark.head { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.msg-room-mark.lg { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }
/* a room's icon: drawn in Chat's teal (or in the room's colour, below) on a tile tinted with it, as the More screen
   draws Community's own */
.msg-room-mark.has-icon {
  color: var(--msg-teal); background: color-mix(in srgb, var(--msg-teal-soft) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--msg-teal-soft) 32%, var(--border));
}
.msg-room-mark.has-icon.lg .icon { width: 24px; height: 24px; }
html.theme-dark .msg-room-mark.has-icon {
  color: var(--msg-teal-soft); background: color-mix(in srgb, var(--msg-teal-soft) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--msg-teal-soft) 26%, var(--border));
}
html.theme-dark .msg-room-mark.has-icon .icon { filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.35)); }
.msg-room-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.msg-room-row:last-child { border-bottom: 0; }
.msg-room-row > .msg-thread { flex: 1; min-width: 0; border-bottom: 0; }
.msg-room-row .msg-thread-prev { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.msg-room-join { flex: none; min-width: 64px; margin-right: 14px; }
.msg-join-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-join-topic { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .msg-join { flex-direction: row; align-items: center; gap: 14px; }
  .msg-join .msg-join-text { flex: 1; }
  .msg-join .msg-request-actions .btn { flex: none; min-width: 132px; }
}
.msg-head > .msg-head-title { flex: 1; min-width: 0; }
.msg-gone-words { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.msg-gone-why { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.msg-gone-note { margin: 0; max-width: 34em; font-size: 13.5px; color: var(--ink-3); }
.msg-gone-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.msg-share-room { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--seg-bg); border: 1px solid var(--border); }
.msg-share-main { min-width: 0; }
.msg-share-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.msg-share-topic { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.msg-share-linkbox { display: flex; flex-direction: column; gap: 8px; }
.msg-share-linkbox .settings-note { margin: 0; line-height: 1.45; }
.msg-share-link { width: 100%; }
.msg-share-actions { margin-top: 4px; }

/* a room's icon in its colour (messaging/room-icons.js ROOM_COLORS: the same values, light and dark), on its tile */
.msg-room-mark.has-icon.rc-blue { color: #2563EB; background: #ECF4FE; border-color: #BAD3F2; }
.msg-room-mark.has-icon.rc-violet { color: #7C3AED; background: #F4F1FE; border-color: #D1CAF2; }
.msg-room-mark.has-icon.rc-pink { color: #DB2777; background: #FEEEF6; border-color: #EAC2DC; }
.msg-room-mark.has-icon.rc-red { color: #DC2626; background: #FEEEEE; border-color: #EBC2C6; }
.msg-room-mark.has-icon.rc-orange { color: #C2410C; background: #FFF2E8; border-color: #ECCCB5; }
.msg-room-mark.has-icon.rc-amber { color: #A16207; background: #FFF7E5; border-color: #ECDBAD; }
.msg-room-mark.has-icon.rc-green { color: #15803D; background: #E9FBF0; border-color: #B3E5CB; }
html.theme-dark .msg-room-mark.has-icon.rc-blue { color: #93C5FD; background: #222933; border-color: #415165; }
html.theme-dark .msg-room-mark.has-icon.rc-violet { color: #C4B5FD; background: #272833; border-color: #4E4D65; }
html.theme-dark .msg-room-mark.has-icon.rc-pink { color: #F9A8D4; background: #2B272F; border-color: #5B495B; }
html.theme-dark .msg-room-mark.has-icon.rc-red { color: #FCA5A5; background: #2C272B; border-color: #5C494E; }
html.theme-dark .msg-room-mark.has-icon.rc-orange { color: #FDBA74; background: #2C2827; border-color: #5C4E42; }
html.theme-dark .msg-room-mark.has-icon.rc-amber { color: #FCD34D; background: #2C2B23; border-color: #5C5438; }
html.theme-dark .msg-room-mark.has-icon.rc-green { color: #86EFAC; background: #212D2C; border-color: #3D5C50; }
html.theme-dark .msg-room-mark.has-icon.rc-blue .icon { filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.35)); }
html.theme-dark .msg-room-mark.has-icon.rc-violet .icon { filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.35)); }
html.theme-dark .msg-room-mark.has-icon.rc-pink .icon { filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.35)); }
html.theme-dark .msg-room-mark.has-icon.rc-red .icon { filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.35)); }
html.theme-dark .msg-room-mark.has-icon.rc-orange .icon { filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.35)); }
html.theme-dark .msg-room-mark.has-icon.rc-amber .icon { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35)); }
html.theme-dark .msg-room-mark.has-icon.rc-green .icon { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.35)); }
/* a gym's logo fills its tile */
.msg-room-mark.has-logo { padding: 0; overflow: hidden; background: var(--seg-bg); }
.msg-gym-logo-box { display: block; width: 100%; height: 100%; }
.msg-gym-logo { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a logo with see-through parts is shown on white, as it would be printed; nothing white while it is on its way */
.msg-gym-logo-box:not(.loading):not(.missing) .msg-gym-logo { background: #FFFFFF; }

/* the rooms' lists: a hairline between rooms that starts where their names do, not under their tiles */
.msg-rooms .msg-thread-list > .msg-thread, .msg-rooms .msg-thread-list > .msg-room-row { position: relative; border-bottom: 0; }
.msg-rooms .msg-thread-list > :not(:last-child)::after { content: ''; position: absolute; left: 70px; right: 0; bottom: 0; height: 1px; background: var(--border); pointer-events: none; }

/* a section of the list, folding away under its heading; folded, the heading still says what is new in it */
.msg-fold-h { margin: 0 0 8px; padding: 0; }
.msg-fold-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 4px 6px 4px 4px; border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .msg-fold-btn:hover { background: var(--hover); color: var(--ink-2); } }
.msg-fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.msg-fold-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fold-meta { flex: none; font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.msg-fold-meta.fresh { min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--msg-link); color: #FFFFFF; font-weight: 750; line-height: 22px; text-align: center; }
html.theme-dark .msg-fold-meta.fresh { background: var(--msg-teal-soft); color: #062621; }
.msg-fold-chev { flex: none; display: inline-flex; color: var(--ink-3); transform: rotate(-90deg); transition: transform 0.2s var(--ease-out, ease); }
.msg-fold-chev .icon { width: 18px; height: 18px; }
.msg-fold.open .msg-fold-chev { transform: none; }
.msg-rooms-sec.msg-fold + .msg-rooms-sec.msg-fold { margin-top: 14px; }
.msg-fold-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .msg-fold-chev { transition: none; } }

/* her gyms' rooms: the name with the first line to itself, the place leading the second ("Leeds · Ben: Deadlift…"),
   a request that waits, a way to join another */
.msg-thread-lead { display: inline-flex; max-width: 60%; vertical-align: bottom; }
.msg-thread-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink-3); }
.msg-thread-sep { flex: none; margin: 0 6px; font-weight: 400; color: var(--ink-3); }
.msg-gym-list { overflow: hidden; }
.msg-gym-request .msg-thread { cursor: default; }
/* a request's three short lines, beside Cancel at any width: the gym, its place, "Request sent" */
.msg-gym-request .msg-thread-place { font-size: 14px; line-height: 1.35; }
.msg-gym-request .msg-thread-prev { color: var(--ink-3); }
.msg-gym-more { min-height: 56px; }
.msg-gym-more .msg-thread-name { font-size: 14.5px; font-weight: 650; color: var(--msg-link); }
.msg-gym-more-mark { flex: none; width: 44px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--msg-link); }
.msg-gym-more-mark .icon { width: 20px; height: 20px; }
.msg-gym-cta { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .msg-gym-cta:hover { background: var(--hover); } }
.msg-gym-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg-gym-cta-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.msg-gym-cta-title { font-size: 15.5px; font-weight: 700; }
.msg-gym-cta-sub { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

/* a gym, as its members and someone with its code are shown it */
.msg-gym-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.msg-gym-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-gym-name { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.msg-gym-place { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.msg-gym-about { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.msg-gym-about.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.msg-gym-block { display: flex; flex-direction: column; gap: 4px; }
.msg-gym-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.msg-gym-label .icon { width: 15px; height: 15px; }
.msg-gym-hours { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-line; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.msg-gym-links { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.msg-gym-link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; color: var(--msg-link); font-size: 14.5px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.msg-gym-link + .msg-gym-link { border-top: 1px solid var(--border); }
.msg-gym-link .icon { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .msg-gym-link:hover { background: var(--hover); } }
.msg-gym-show:empty { display: none; }
.msg-gym-show { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--msg-teal-soft) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--msg-teal-soft) 30%, var(--border)); }
.msg-gym-show-text { flex: 1; min-width: 0; }
.msg-gym-show-title { margin: 0; font-size: 14.5px; font-weight: 700; }
.msg-gym-show-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.msg-gym-show .btn { flex: none; min-width: 84px; }
.msg-gym-note { margin: 0; }
.msg-gym-actions { align-items: center; }
.msg-gym-actions > .soc-link-btn { margin-left: -10px; }
.msg-gym-found .msg-gym-actions > .btn-primary { flex: 1 1 100%; min-width: 0; white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; overflow-wrap: break-word; }

/* joining a gym's room with its code */
.msg-gym-page-head { display: flex; align-items: center; gap: 8px; }
.msg-gym-page-head h1 { margin: 0; }
.msg-gym-lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.msg-code-input { font-size: 22px; font-weight: 700; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 54px; }
.msg-code-input::placeholder { color: var(--ink-3); opacity: 0.55; letter-spacing: 0.12em; }
.msg-code-error:empty { display: none; }
.msg-code-error { margin: 0; font-size: 13.5px; color: var(--danger); }
.msg-code-go { width: 100%; }
.msg-gym-result:empty { display: none; }
.msg-gym-found .msg-gym-head .msg-room-mark.lg { width: 64px; height: 64px; border-radius: 18px; }
.msg-gym-state { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; }
@media (min-width: 600px) { .msg-gym-code, .msg-gym-result { max-width: 520px; } .msg-code-go { width: auto; min-width: 160px; align-self: flex-start; } }

/* the gym a member shows on their profile: a teal badge, its logo first */
.soc-gym-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; align-self: flex-start; margin: 6px 0 0; padding: 3px 12px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--msg-teal-soft) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--msg-teal-soft) 32%, var(--border)); color: var(--msg-link); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.soc-gym-badge .msg-gym-logo-box, .soc-gym-badge-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #FFFFFF; }
.soc-gym-badge-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--msg-teal); }
.soc-gym-badge-mark .icon { width: 14px; height: 14px; }
/* the gym's name gives way before its place ("Northern Lights Str… · Leeds"); a long place, before the name has less
   than half the badge */
.soc-gym-badge-text { display: flex; min-width: 0; white-space: nowrap; }
.soc-gym-badge-name { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
.soc-gym-badge-place { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.soc-gym-pick { width: 100%; }
html.theme-dark .soc-gym-badge { background: color-mix(in srgb, var(--msg-teal-soft) 9%, var(--surface)); border-color: color-mix(in srgb, var(--msg-teal-soft) 26%, var(--border)); }
html.theme-dark .soc-gym-badge-mark { background: var(--surface-2); color: var(--msg-teal-soft); }

/* choosing people, and a group's details */
.msg-pick-q { margin-bottom: 2px; }
.msg-pick-list { display: flex; flex-direction: column; }
.msg-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 4px; border-radius: var(--radius-sm); text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .msg-pick:hover { background: var(--hover); } }
.msg-pick-extra { border: 1px dashed var(--border-strong); padding: 6px 10px; }
.msg-pick-box { flex: none; width: 20px; height: 20px; accent-color: var(--msg-teal); }
.msg-pick-text { display: flex; flex-direction: column; min-width: 0; }
.msg-pick-name { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-pick-handle { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-pick-h { margin: 10px 4px 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.msg-pick-none { margin: 4px; font-size: 13.5px; color: var(--ink-2); }
.msg-pick-actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin: 4px 0 calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 0 calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
.msg-group-name { display: flex; flex-direction: column; gap: 6px; }
.msg-group-top { display: flex; align-items: center; gap: 14px; }
.msg-group-top-text { display: flex; flex-direction: column; min-width: 0; }
.msg-group-top-text strong { font-size: 17px; overflow-wrap: anywhere; }
.msg-group-top-text span { font-size: 13px; color: var(--ink-3); }
.msg-group-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-group-photo-btn { position: relative; cursor: pointer; }
.msg-group-rename { display: flex; gap: 8px; }
.msg-group-rename .input { flex: 1; min-width: 0; }
.msg-members { display: flex; flex-direction: column; }
.msg-member { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--border); }
.msg-member:last-child { border-bottom: 0; }
.msg-member-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.msg-capsule { flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--msg-teal) 55%, transparent); background: color-mix(in srgb, var(--msg-teal-soft) 14%, transparent); color: var(--msg-teal); font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.msg-group-leave { display: flex; flex-direction: column; padding-top: 6px; }
/* a room's people (views/chat.js membersSheet): each row a way to the person's profile, its picture and words in the
 * sheet's own column, what is pressed reaching a little past it */
.msg-members-count { margin: 0; }
.msg-room-members:empty { display: none; }
.msg-room-members .msg-member-who { min-height: 58px; margin: 0 -8px; padding: 4px 8px; border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) { .msg-room-members .msg-member-who:hover { background: var(--hover); } }
.msg-member-go { flex: none; margin-left: auto; color: var(--ink-3); }
.msg-members-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.msg-members-foot:empty { display: none; }
.msg-members-more { margin: 0; }

/* the unread counts beside Chat and Messages in the menu, and on More */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--msg-teal); color: #FFFFFF; font-size: 11.5px; font-weight: 750; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.tab-item { position: relative; }
.tab-badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--msg-teal); color: #FFFFFF; font-size: 10.5px; font-weight: 750; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
html.theme-dark .nav-badge, html.theme-dark .tab-badge { background: var(--msg-teal-soft); color: #062621; }

@media (prefers-reduced-motion: reduce) {
  .msg-act, .msg-act.recording, .msg.flash .msg-bub, .msg-dot, .msg-poll-fill, .msg-menu-emoji { animation: none; transition: none; }
}
.msg-poll-remove { flex: none; }
.msg-gif-q { flex: none; min-height: 40px; }
.msg-threads { display: flex; flex-direction: column; }

/* ---------------- the free Timer (#/timer) ---------------- */
/* The runner's look: the screen to itself (no menu, no tab bar, no resume pill over its controls), the head with its
   close button and title, and the stage — the runner's card — lit in teal, the clock at the runner's size. The two
   modes under the head share the row. Small words in the teal (the stage's eyebrow, the fastest lap) take the colour's
   readable text variant on the light theme (7.3:1), the colour itself on the dark (7.0:1). */
html.route-timer #sidebar, html.route-timer #tabbar { display: none; }
html.route-timer #app { grid-template-columns: 1fr; }
html.route-timer .resume-pill { display: none; }
@media (max-width: 899px) { html.route-timer #view { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }
.timer-head-side { flex: none; width: 40px; }
.timer-modes { display: flex; width: 100%; }
.timer-modes .seg-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; }
.timer-mode-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wc); box-shadow: 0 0 8px color-mix(in srgb, var(--wc) 70%, transparent); }
.timer .eyebrow.wc { color: color-mix(in srgb, var(--wc) 48%, #111); }
html.theme-dark .timer .eyebrow.wc { color: var(--wc); }
.timer-stage { width: 100%; }
.timer-clock { display: flex; align-items: baseline; justify-content: center; max-width: 100%; white-space: nowrap; }
.timer-clock.long { font-size: clamp(54px, 17vw, 104px); }
.timer-main { min-width: 0; font-variant-numeric: tabular-nums; }
.timer-tenth { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.03em; color: var(--ink-3); }
.timer-prog { width: 100%; }
.timer-prog .prog-fill { transition: none; }
.timer-line { margin-top: -4px; }
/* the times to pick: three to a row, each the same width, the person's own last and across two places — room for its
   pencil and a time as long as 10:00:00 at any width */
.timer-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 400px; }
.timer-presets .chip { padding-left: 6px; padding-right: 6px; text-align: center; }
.timer-custom { grid-column: span 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; white-space: nowrap; }
.timer-custom .icon { width: 14px; height: 14px; flex: none; }
.timer-controls, .timer-control-stack { width: 100%; }
.timer-controls > .btn { flex: 1 1 0; }
.timer-control-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.timer-reset { min-height: 44px; }
/* a running clock glows a little in the teal on the dark theme, as the runner's working clock does in its colour; a
   countdown at zero breathes in it (still under reduced motion) */
html.theme-dark .timer-stage.live .timer-clock { text-shadow: 0 0 40px color-mix(in srgb, var(--wc) 28%, transparent); }
.timer-stage.done .timer-clock { color: var(--ink); animation: timer-breathe 1.8s ease-in-out infinite; }
@keyframes timer-breathe {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 36px color-mix(in srgb, var(--wc) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .timer-stage.done .timer-clock { animation: none; } }
/* the laps: newest first, the one under way at the top in the teal's text colour; each row the lap, its own time and
   the reading at its end, in columns that line up; the fastest and slowest named in words as well as colour */
.timer-laps-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.timer-laps-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 0 2px; }
.timer-laps-head .section-label { margin: 0; }
.timer-laps-cols { display: grid; grid-template-columns: 88px 76px; gap: 12px; padding-right: 16px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-align: right; }
.timer-laps {
  display: flex; flex-direction: column; background: var(--card-sheen), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.timer-lap {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px 76px; align-items: center; gap: 12px; min-height: 48px;
  padding: 10px 16px; font-variant-numeric: tabular-nums;
}
.timer-lap + .timer-lap { border-top: 1px solid var(--border); }
.timer-lap-n { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.timer-lap-split { font-size: 16px; font-weight: 720; color: var(--ink); text-align: right; white-space: nowrap; }
.timer-lap-total { font-size: 13px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.timer-lap.current .timer-lap-n, .timer-lap.current .timer-lap-split { color: color-mix(in srgb, var(--wc) 48%, #111); }
html.theme-dark .timer-lap.current .timer-lap-n, html.theme-dark .timer-lap.current .timer-lap-split { color: var(--wc); }
@media (max-width: 360px) {
  .timer-lap { grid-template-columns: minmax(0, 1fr) 80px 68px; gap: 10px; padding: 10px 14px; }
  .timer-laps-cols { grid-template-columns: 80px 68px; gap: 10px; padding-right: 14px; }
}
.timer-lap-tag { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; line-height: 16px; }
.timer-lap-tag.fastest { color: color-mix(in srgb, var(--wc) 48%, #111); background: color-mix(in srgb, var(--wc) 14%, var(--surface)); }
.timer-lap-tag.slowest { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
html.theme-dark .timer-lap-tag.fastest { color: var(--wc); background: color-mix(in srgb, var(--wc) 16%, var(--surface)); }
/* the countdown's own time: minutes and seconds side by side, each with − and +, the time in words under them */
.timer-pick { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 4px 0 2px; }
.timer-pick-field { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.timer-pick-input { width: 72px; min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); text-align: center; -moz-appearance: textfield; }
.timer-pick-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.timer-pick-input::-webkit-outer-spin-button, .timer-pick-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.timer-pick-note { margin: 14px 0 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timer-pick-note.warn { color: var(--danger); }

/* ---------------- Progress: the muscles trained ----------------
   One hue for the data (teal, light to dark; in the dark theme dark to light, the top step glowing softly), checked
   against each theme's card; a group with nothing recorded is its own grey, set apart from the figure's silhouette,
   whose edge is a hairline a step darker (lighter in the dark theme) than its own colour. The controls stay in the
   interface's own accent. */
:root {
  --pg-data: #0D766B;
  --bd-body: #EEF1F5;
  --bd-edge: #D3D9E1;
  --bd-0: #DCE1E8;
  --bd-1: #56C4B3; --bd-2: #27AC9A; --bd-3: #119284; --bd-4: #0D766B; --bd-5: #0A5751;
}
html.theme-dark {
  --pg-data: #2DD4BF;
  --bd-body: #22262D;
  --bd-edge: #353C47;
  --bd-0: #2D333C;
  --bd-1: #1B5A54; --bd-2: #1E7D72; --bd-3: #25A291; --bd-4: #36C6B0; --bd-5: #7FE8D6;
}
.pg-num { font-variant-numeric: tabular-nums; }

/* the period and the measure: side by side when there is room, one under the other when there is not */
.pg-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: stretch; }
.pg-period {
  flex: 1 1 240px; min-width: 0; min-height: 50px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 6px 12px 6px 14px; text-align: left;
  background: var(--card-sheen), var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
@media (hover: hover) and (pointer: fine) { .pg-period:hover { background: var(--surface-2); } }
.pg-period-main { display: flex; flex-direction: column; min-width: 0; }
.pg-period-label { font-size: 15px; font-weight: 650; line-height: 1.3; }
.pg-period-dates { font-size: 13px; color: var(--ink-2); line-height: 1.35; font-variant-numeric: tabular-nums; }
.pg-period-chev { color: var(--ink-3); }
.pg-seg { padding: 3px; }
.pg-seg .seg-btn { flex: 1 1 0; min-height: 44px; padding: 0 14px; }
.pg-metric { flex: 1 1 240px; }
/* a choice of two: two equal segments, each as wide as the longer label needs with room either side, one above the
   other where two cannot sit side by side (a narrow screen with its text enlarged) — never a label in two lines or past
   its segment's padding. The small one in a card's heading sits beside the title when both fit, otherwise on a line of
   its own across the card. */
.pg-metric { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr)); }
.pg-seg.is-small { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.pg-seg.is-small .seg-btn { font-size: 13.5px; padding: 0 var(--sp-4); }
.pg-card-head > .pg-card-title { flex: 999 1 auto; min-width: 0; }
.pg-card-head > .pg-seg { flex: 1 0 auto; }

.pg-body { display: flex; flex-direction: column; gap: var(--sp-4); transition: opacity var(--dur) var(--ease-out); }
.pg-body.is-busy { opacity: 0.55; transition-delay: 120ms; }
.pg-card .card-body { padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); }
@media (min-width: 640px) { .pg-card .card-body { padding: var(--sp-5); } }
.pg-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.pg-card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.pg-caption { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; margin-top: calc(-1 * var(--sp-1)); }
.pg-note { font-size: 13px; color: var(--ink-2); line-height: 1.45; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.pg-foot { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.pg-card .btn-sm, .pg-empty .btn-sm, .pg-sheet .btn-sm { min-height: 44px; padding: 0 16px; }

/* the summary: the figure large, its sessions, the period before */
.pg-stats { display: flex; align-items: flex-end; gap: var(--sp-3) var(--sp-7); flex-wrap: wrap; }
.pg-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-stat-label { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.pg-stat-value { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pg-stat-value.is-small { font-size: 26px; }
.pg-unit { font-size: 0.5em; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
.pg-line { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.pg-compare { font-size: 13px; color: var(--ink-2); line-height: 1.45; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.pg-compare .pg-num { color: var(--ink); font-weight: 650; }

/* the distribution: the figure and the list side by side when both have room */
.pg-dist-body { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); align-items: flex-start; margin-top: var(--sp-1); }
.pg-figure { flex: 1 1 260px; max-width: 360px; margin: 0 auto; }
.pg-rank { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.bd { display: flex; flex-direction: column; gap: var(--sp-3); }
.bd-figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.bd-side { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.bd-figure { display: block; width: 100%; max-width: 160px; height: auto; overflow: visible; }
/* the silhouette with its hairline edge; each area with a hairline of the body's colour round it, so areas side by
   side are always set apart by the same fine gap; the fine lines inside an area in the same colour */
.bd-base { fill: var(--bd-body); stroke: var(--bd-edge); stroke-width: 0.7; stroke-linejoin: round; }
.bd-muscle { fill: var(--bd-0); stroke: var(--bd-body); stroke-width: 0.8; stroke-linejoin: round; transition: fill var(--dur) var(--ease-out); }
.bd-line { fill: none; stroke: var(--bd-body); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bd-muscle[data-level="1"], .bd-swatch[data-level="1"] { fill: var(--bd-1); background: var(--bd-1); }
.bd-muscle[data-level="2"], .bd-swatch[data-level="2"] { fill: var(--bd-2); background: var(--bd-2); }
.bd-muscle[data-level="3"], .bd-swatch[data-level="3"] { fill: var(--bd-3); background: var(--bd-3); }
.bd-muscle[data-level="4"], .bd-swatch[data-level="4"] { fill: var(--bd-4); background: var(--bd-4); }
.bd-muscle[data-level="5"], .bd-swatch[data-level="5"] { fill: var(--bd-5); background: var(--bd-5); }
/* the most-worked groups glow softly in their own teal, in the dark theme only (on a light card a glow only muddies) */
html.theme-dark .bd-muscle[data-level="5"] { filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--bd-5) 65%, transparent)); }
.bd-figures.is-pickable .bd-muscle { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .bd-figures.is-pickable .bd-muscle:hover { stroke: var(--ink-3); stroke-width: 0.9; } }
/* the chosen group's outline: drawn in a layer of its own above every area, so no neighbour's edge cuts into it */
.bd-focus { pointer-events: none; }
.bd-ring { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.bd-side-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.bd-legend { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.bd-key { display: inline-flex; align-items: center; gap: 6px; }
.bd-steps { display: inline-flex; gap: 2px; }
.bd-swatch { display: inline-block; width: 16px; height: 10px; border-radius: 2px; background: var(--bd-0); }
.bd-steps .bd-swatch:first-child { border-radius: 3px 2px 2px 3px; }
.bd-steps .bd-swatch:last-child { border-radius: 2px 3px 3px 2px; }
.pg-rank-head { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 0 32px 0 var(--sp-2); font-size: 12px; font-weight: 650; color: var(--ink-3); }
.pg-rows > li + li { border-top: 1px solid var(--border); }
.pg-row {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px;
  grid-template-areas: "name val chev" "bar bar chev" "sub sub chev"; column-gap: var(--sp-3); row-gap: 6px;
  align-items: center; padding: 10px var(--sp-2); text-align: left; border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) { .pg-row:hover { background: var(--hover); } }
.pg-row:focus-visible { outline-offset: -2px; }
.pg-row-name { grid-area: name; min-width: 0; font-size: 14.5px; font-weight: 620; line-height: 1.3; overflow-wrap: break-word; }
.pg-row-val { grid-area: val; display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.pg-row-share { min-width: 3.3ch; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pg-row-bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--seg-bg); overflow: hidden; }
.pg-row-fill { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: 3px; background: var(--pg-data); transition: width var(--dur) var(--ease-out); }
.pg-row-sub { grid-area: sub; font-size: 12px; color: var(--ink-3); }
.pg-row-chev { grid-area: chev; width: 18px; height: 18px; color: var(--ink-3); }
.pg-row.is-zero .pg-row-val { color: var(--ink-3); font-weight: 600; }
.pg-row.is-chosen { background: color-mix(in srgb, var(--pg-data) 9%, transparent); box-shadow: inset 3px 0 0 var(--pg-data); }
.pg-more { align-self: flex-start; }

/* the weekly trend: bars on a baseline, a line at the most, a few weeks named */
.pg-select-wrap { flex: 0 1 210px; min-width: min(150px, 100%); }
.pg-select { min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.pg-plot-frame { position: relative; margin-top: var(--sp-1); }
.pg-plot { position: relative; }
.pg-plot.is-wide { overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 6px; }
.pg-plot-inner { position: relative; padding-top: 18px; }
.pg-plot.is-wide .pg-plot-inner { min-width: calc(var(--n) * 12px); }
.pg-grid { position: absolute; left: 0; right: 0; top: 18px; height: 128px; border-top: 1px dashed var(--border-strong); border-bottom: 1px solid var(--border-strong); pointer-events: none; }
.pg-grid-max { position: absolute; right: 0; bottom: 100%; margin-bottom: 3px; font-size: 11px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pg-bars, .pg-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: clamp(2px, 1.4%, 8px); }
.pg-bars { position: relative; height: 128px; align-items: end; }
.pg-col { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pg-wbar { display: block; width: 100%; max-width: 36px; height: calc(var(--h) * 1%); border-radius: 4px 4px 0 0; background: var(--pg-data); transition: height var(--dur) var(--ease-out); }
.pg-wbar.is-zero { height: 2px; border-radius: 1px; background: var(--border-strong); }
.pg-col.is-partial .pg-wbar { background: repeating-linear-gradient(135deg, var(--pg-data) 0 3px, color-mix(in srgb, var(--pg-data) 45%, var(--surface)) 3px 6px); }
.pg-col.is-partial .pg-wbar.is-zero { background: var(--border-strong); }
@media (hover: hover) and (pointer: fine) { .pg-col:hover .pg-wbar { filter: brightness(1.12); } }
.pg-axis { margin-top: 6px; }
.pg-tick { justify-self: center; font-size: 11px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-tick:first-child { justify-self: start; }
.pg-tick:last-child { justify-self: end; }
.pg-tip {
  position: absolute; z-index: 3; top: 12px; left: 0; transform: translate(var(--x, 0px), -100%);
  display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; pointer-events: none;
  background: var(--toast-bg); color: var(--toast-ink); font-size: 12px; line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-hover);
}
.pg-tip[hidden] { display: none; }
.pg-tip-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.pg-chart-foot .pg-foot { flex: 1 1 200px; }
.pg-table-box:not(.sr-only) { overflow-x: auto; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pg-table caption { text-align: left; font-size: 12.5px; color: var(--ink-3); padding-bottom: 6px; }
.pg-table th, .pg-table td { padding: 9px 4px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 500; }
.pg-table thead th { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.pg-table td, .pg-table thead th:last-child { text-align: right; }
.pg-table td { font-weight: 650; }

/* what is counted */
.pg-cov-lines { display: flex; flex-direction: column; gap: var(--sp-2); }
.pg-cov-lines li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.pg-cov-lines li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.pg-cov-btn { align-self: flex-start; }
.pg-sheet { display: flex; flex-direction: column; gap: var(--sp-4); }
.pg-cov-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.pg-cov-h { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.pg-sheet > .pg-cov-h { margin-top: var(--sp-1); }
.pg-cov-note, .pg-help-p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.pg-cov-items { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pg-cov-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); min-height: 56px; padding: 10px 12px; }
.pg-cov-item + .pg-cov-item, .pg-cov-more { border-top: 1px solid var(--border); }
.pg-cov-main { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-cov-name { font-size: 14.5px; font-weight: 650; overflow-wrap: break-word; }
.pg-cov-sub { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pg-cov-act { flex: none; }
.pg-cov-more { padding: 10px 12px; font-size: 13px; color: var(--ink-3); }
.pg-help-list { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.pg-help-list strong { color: var(--ink); font-weight: 650; }
.pg-help { min-height: 56px; }
.pg-help-main { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pg-help-main .icon { color: var(--ink-2); }

/* the choice of periods */
.pg-period-item.is-on { border-color: var(--border-strong); background: var(--surface-2); }
.pg-period-check { margin-left: auto; color: var(--accent); }
.pg-custom { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.pg-custom-title { font-size: 15px; font-weight: 700; }
.pg-custom-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--sp-3); }
.pg-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pg-field .field-label { margin: 0; }
/* the date in full words under its field: wraps rather than being cut, however large the text */
.pg-date-words { margin-top: -2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: break-word; }
.pg-field-error { font-size: 13px; color: var(--danger); }
.pg-field-error:empty { display: none; }

/* nothing to draw, the screen held while it is read */
.pg-empty .card-body { padding: var(--sp-6) var(--sp-5); align-items: flex-start; }
.pg-empty-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.pg-empty-text { font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 56ch; }
.pg-empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-1); }
.pg-loading { display: flex; flex-direction: column; gap: var(--sp-4); animation: skel-in 180ms var(--ease-out) backwards; }
.pg-skel-block, .pg-skel-chart { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink-3) 10%, transparent); animation: skel-breathe 1.6s ease-in-out infinite; }
.pg-skel-block { height: 300px; }
.pg-skel-chart { height: 150px; }

/* ---------------- Progress: Training | Body ----------------
   The two parts of Progress as one segmented control under the heading, links the route sets. */
.pg-tabs { display: flex; }
.pg-tabs-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 22rem); padding: 3px; }
.pg-tabs-seg .pg-tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-4); font-weight: 650; text-decoration: none; color: var(--ink-2); }
.pg-tabs-seg .pg-tab.on { color: var(--ink); }
.pg-tabs-seg .pg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------- Body measurements ----------------
   Private readings in the existing Progress cards: the readings' own hue (the Progress teal) for points and lines, the
   7-day average in ink, never green for one direction and red for the other. Points are 10px dots inside 44px targets. */
.bm-body { gap: var(--sp-4); }
.bm-body > .bm-latest, .bm-body > .bm-links { margin-top: var(--sp-2); }
.bm-intro .card-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); }
.bm-intro-main { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.bm-private { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 14px; line-height: 1.45; color: var(--ink); }
.bm-private-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-2); }
.bm-backup { font-size: 13px; color: var(--ink-2); padding-left: 26px; }
.bm-add { min-height: 44px; flex: 0 0 auto; gap: var(--sp-2); }
.bm-add .icon { width: 18px; height: 18px; }
.bm-welcome .pg-empty-actions .bm-add { min-height: 48px; }

.bm-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.bm-section-head > .section-title { margin: 0; }
.bm-customise, .bm-all, .bm-more, .bm-edit, .bm-apply, .bm-remove, .bm-add-more, .bm-delete, .pg-table-toggle { min-height: 44px; }
/* the latest readings: two side by side while both fit, one above the other on a narrow screen or with large text */
.bm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--sp-4); }
.bm-stat { display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: var(--sp-4); text-decoration: none; color: var(--ink); border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) { .bm-stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); } }
.bm-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-stat-label { font-size: 13px; font-weight: 650; color: var(--ink-2); overflow-wrap: break-word; }
.bm-stat-value { display: inline-flex; flex-wrap: wrap; align-items: baseline; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bm-stat-value .bm-unit, .pg-stat-value .bm-unit { font-size: 0.5em; font-weight: 650; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.bm-stat-value.is-none { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.bm-stat-date { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bm-num { font-variant-numeric: tabular-nums; }

/* the trend: its measurement and its period chosen beside its title, under it on a narrow screen */
.bm-chart .pg-card-head > .pg-card-title { flex: 1 1 8rem; }
.bm-controls { flex: 999 1 18rem; display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.bm-select-wrap { flex: 1 1 9rem; min-width: min(9rem, 100%); }
.bm-custom { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.bm-apply { align-self: flex-start; }
.bm-stats { display: flex; flex-direction: column; gap: var(--sp-2); }
.bm-period-label { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.bm-period-dates { font-weight: 500; font-variant-numeric: tabular-nums; }
.bm-stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); align-items: flex-end; }
.bm-change { white-space: nowrap; }
.bm-none { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
/* the plot: its height held before it is drawn, from 200px on a phone to 260px on a wide screen */
.bm-frame { position: relative; margin-top: var(--sp-2); }
.bm-plot { position: relative; height: 200px; margin: 0 6px; border-top: 1px dashed var(--border-strong); border-bottom: 1px solid var(--border-strong); touch-action: pan-y; }
@media (min-width: 640px) { .bm-plot { height: 230px; } }
@media (min-width: 1000px) { .bm-plot { height: 260px; } }
.bm-grid { position: absolute; right: 0; font-size: 11px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; background: var(--surface); padding: 0 0 0 4px; }
.bm-grid-hi { bottom: 100%; margin-bottom: 3px; background: none; }
.bm-grid-lo { top: 100%; margin-top: 3px; background: none; }
.bm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bm-line-raw { fill: none; stroke: color-mix(in srgb, var(--pg-data) 70%, var(--surface)); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.bm-line-avg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bm-svg-dot { fill: var(--pg-data); stroke: var(--surface); stroke-width: 2; }
.bm-points { position: absolute; inset: 0; }
.bm-point {
  position: absolute; left: var(--px); top: var(--py); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.bm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pg-data); box-shadow: 0 0 0 2px var(--surface); transition: transform var(--dur-fast) var(--ease-out); }
.bm-point:focus-visible { outline: none; }
.bm-point:focus-visible .bm-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); transform: scale(1.15); }
@media (hover: hover) and (pointer: fine) { .bm-point:hover .bm-dot { transform: scale(1.25); } }
.bm-tip { top: var(--y, 12px); transform: translate(var(--x, 0px), calc(-100% - 14px)); }
.bm-tip-avg { font-size: 11.5px; opacity: 0.85; }
.bm-axis { display: flex; justify-content: space-between; gap: var(--sp-3); margin: 22px 6px 0; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bm-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 12.5px; color: var(--ink-2); }
.bm-key { display: inline-flex; align-items: center; gap: 6px; }
.bm-key-raw { width: 10px; height: 10px; border-radius: 50%; background: var(--pg-data); }
.bm-key-avg { width: 18px; height: 0; border-top: 2px solid var(--ink); }
.bm-table-toggle { display: contents; }
/* the 7-day average switch: a track and a thumb, its state said by aria-pressed */
.bm-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-1); background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.bm-toggle-track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--seg-bg); border: 1px solid var(--border-strong); transition: background-color var(--dur-fast) var(--ease-out); }
.bm-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform var(--dur-fast) var(--ease-out); }
.bm-toggle.is-on .bm-toggle-track { background: var(--accent); border-color: var(--accent); }
.bm-toggle.is-on .bm-toggle-thumb { transform: translateX(16px); }
.bm-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the check-ins */
.bm-rows { display: flex; flex-direction: column; }
.bm-rows > li + li { border-top: 1px solid var(--border); }
.bm-row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-2); text-align: left; border-radius: var(--radius-sm); background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .bm-row:hover { background: var(--hover); } }
.bm-row:focus-visible { outline-offset: -2px; }
.bm-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-row-date { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bm-row-vals { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.bm-row-more { color: var(--ink-3); }
.bm-row-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.bm-row-note .icon { width: 14px; height: 14px; }
.bm-all { align-self: flex-start; }
.bm-more { align-self: flex-start; margin-top: var(--sp-2); }
.bm-table-wrap { overflow-x: auto; }
.bm-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.bm-table .bm-cell-num { font-weight: 650; white-space: nowrap; }
.bm-table .bm-cell-act { width: 1%; text-align: right; padding-left: var(--sp-2); }
.bm-table .bm-edit { width: 44px; height: 44px; }
/* a screen this narrow (a phone with its text enlarged): the date may take two lines, so the row stays on the screen */
@media (max-width: 300px) {
  .bm-table th[scope="row"] { white-space: normal; }
}
.bm-table td, .bm-table thead th:last-child { vertical-align: middle; }
.bm-table thead th:nth-child(2) { text-align: right; }

.bm-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.bm-link { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--ink); box-shadow: none; background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .bm-link:hover { border-color: var(--border-strong); } }
.bm-link-ic { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.bm-link-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-link-title { font-size: 14.5px; font-weight: 650; }
.bm-link-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

.bm-chart .card-body { gap: var(--sp-4); }
.bm-recent .card-body { gap: var(--sp-2); }
.bm-readings .card-body { gap: var(--sp-3); }
.bm-select { min-width: 10rem; }
.bm-skel-chart { height: 200px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink-3) 10%, transparent); animation: skel-breathe 1.6s ease-in-out infinite; }

/* the form: a sheet in the existing system, its actions held at the bottom above the keyboard and the safe area */
.bm-form { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.bm-date-field { max-width: 16rem; }
.bm-date { min-height: 44px; font-size: 16px; }
.bm-editing { margin-top: calc(-1 * var(--sp-2)); padding: 8px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--pg-data) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pg-data) 30%, var(--border)); font-size: 13.5px; font-weight: 650; }
.bm-editing[hidden], .bm-editing:empty { display: none; }
.bm-date-err:empty { display: none; }
.bm-taken { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 13.5px; line-height: 1.45; }
.bm-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--sp-3); }
.bm-unit { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bm-unit-name { font-size: 13px; font-weight: 620; color: var(--ink-2); }
/* two units side by side whatever the width: over the small segments' own columns (.pg-seg.is-small) */
.pg-seg.is-small.bm-unit-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-seg.is-small.bm-unit-seg .seg-btn { min-height: 44px; min-width: 56px; padding: 0 var(--sp-2); }
.bm-fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.bm-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label remove" "input input" "err err" "removed removed"; gap: 2px var(--sp-3); align-items: center; }
.bm-field > .field-label { grid-area: label; margin: 0; overflow-wrap: break-word; }
.bm-input-wrap { grid-area: input; position: relative; display: flex; align-items: center; min-width: 0; }
.bm-input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; padding-right: 3.2rem; font-variant-numeric: tabular-nums; }
.bm-suffix { position: absolute; right: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); pointer-events: none; }
.bm-field-err { grid-area: err; }
.bm-removed { grid-area: removed; font-size: 13px; color: var(--ink-2); }
.bm-remove { grid-area: remove; justify-self: end; min-height: 44px; padding: 0 var(--sp-2); margin-right: calc(-1 * var(--sp-2)); background: none; border-color: transparent; box-shadow: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bm-remove:hover { color: var(--ink); background: var(--hover); } }
.bm-field.is-removed .bm-input { opacity: 0.55; text-decoration: line-through; }
.bm-add-more { align-self: flex-start; gap: var(--sp-2); }
.bm-help { margin-top: calc(-1 * var(--sp-2)); }
.bm-note { width: 100%; min-width: 0; font-size: 16px; resize: vertical; }
.bm-note-count { align-self: flex-end; font-variant-numeric: tabular-nums; }
.bm-empty-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 13.5px; }
.bm-empty-note[hidden] { display: none; }
.bm-delete { align-self: flex-start; gap: var(--sp-2); color: var(--danger); }
.bm-delete[hidden] { display: none; }
.bm-delete .icon { width: 16px; height: 16px; }
.bm-sheet-actions { margin-top: var(--sp-2); }
.bm-sheet-actions .bm-form-err:empty { display: none; }
.bm-sheet-actions .bm-form-err { margin: 0 0 var(--sp-2); }
/* the form under a phone's keyboard, where little of the sheet is left on show: a field the browser brings into view
   as it takes the focus lands clear of the sheet's heading and its bar of actions, both of which stay put, not behind
   them */
.sheet:has(.bm-sheet-actions) { scroll-padding-top: 64px; scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.bm-save { min-height: 48px; }
/* the view's choices */
.bm-sheet-h { font-size: 15px; font-weight: 700; margin-top: var(--sp-2); }
.bm-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0 var(--sp-3); }
.bm-choose-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-size: 14.5px; cursor: pointer; }
.bm-unit-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bm-unit-row > .field-label { margin: 0; }

/* ---------------- Coach's review of a workout's structure ----------------
   A compact builder, not a payload: a superset as one card with a shared tint and A1/A2 tags, each drop chain nested
   under its exact set as rows (never one long arrow chain), each change as its before and after. The spacing is the
   app's: 16 px inside a card and between cards, 12 px between the groups nested in one, 8 px between rows that belong
   together, 24 px between sections; the cards' radius the app's 14 px, what is nested in them its smaller one. */
.cr { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.cr-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.cr-name { font-size: 16px; font-weight: 750; letter-spacing: -0.01em; overflow-wrap: break-word; }
.cr-sum { font-size: 13px; color: var(--ink-2); }
.cr-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 13.5px; line-height: 1.45; }
/* the list of changes is a section of its own: 24 px above its heading */
.cr-h { font-size: 14px; font-weight: 700; margin: var(--sp-2) 0 0; }
.cr-workout { display: flex; flex-direction: column; gap: var(--sp-3); }
.cr-workout + .cr-workout { margin-top: var(--sp-2); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.cr-blocks { display: flex; flex-direction: column; gap: var(--sp-4); }
.cr-ex { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.cr-group .cr-ex { padding: var(--sp-3); border-radius: var(--radius-sm); }
.cr-ex-head { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.cr-tag { flex: none; min-width: 2.2em; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--pg-data) 14%, var(--surface)); color: var(--ink); font-size: 12px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.cr-ex-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 650; overflow-wrap: break-word; }
.cr-ex-sets { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cr-ex-warm { font-size: 12.5px; color: var(--ink-3); }
/* a chain is a group nested in its exercise's card: 12 px above it (with the card's own 4 px between its lines) */
.cr-chain { margin-top: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.cr-chain-title { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: var(--sp-2); overflow-wrap: break-word; }
.cr-chain-rows { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cr-chain-rows .is-parent { font-weight: 650; }
/* the drops under their set, joined by one rule down their side: each drop's share of it reaches halfway into the
   space above and below, so it runs unbroken from the first drop to the last */
.cr-chain-rows .is-drop { position: relative; display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin-left: 3px; padding-left: var(--sp-3); color: var(--ink-2); }
.cr-chain-rows .is-drop::before { content: ''; position: absolute; left: 0; top: calc(var(--sp-2) / -2); bottom: calc(var(--sp-2) / -2); border-left: 2px solid color-mix(in srgb, var(--pg-data) 45%, var(--border)); }
.cr-chain-rows .is-parent + .is-drop::before { top: 0; }
.cr-chain-rows .is-drop:last-child::before { bottom: 0; }
.cr-drop-label { flex: none; min-width: 3.6em; font-weight: 650; color: var(--ink-3); }
.cr-drop-what { min-width: 0; overflow-wrap: break-word; }
.cr-group { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--pg-data) 35%, var(--border)); background: color-mix(in srgb, var(--pg-data) 6%, var(--surface)); }
.cr-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.cr-group-name { font-size: 14px; font-weight: 750; }
.cr-group-rounds { font-size: 12.5px; color: var(--ink-2); }
.cr-group-rests { font-size: 12.5px; color: var(--ink-2); }
.cr-change { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); }
.cr-change-title { font-size: 14.5px; font-weight: 700; overflow-wrap: break-word; }
.cr-change-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-3); }
.cr-side { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cr-side-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.cr-side-rows { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cr-side.is-before .cr-side-rows { color: var(--ink-2); }
/* the whole workout is a section of its own: 24 px above its rule */
.cr-all { margin-top: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.cr-all-summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); cursor: pointer; list-style: none; font-size: 14px; font-weight: 650; }
.cr-all-summary::-webkit-details-marker { display: none; }
.cr-all-summary .icon { flex: none; width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.cr-all[open] .cr-all-summary .icon { transform: rotate(180deg); }
.cr-all[open] .cr-all-summary { margin-bottom: var(--sp-3); }
/* every set as it will run, behind "View all sets and warm-ups": a row a set — its place, its target and load, the rest
   that follows it — each drop nested under its own set on one rule, a pair's members together with their own rests said
   apart. Rows wrap where they must (a narrow screen, large text): the place, then what, then the rest, never cut off */
.cr-sets { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.cr-sets-group { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--pg-data) 35%, var(--border)); background: color-mix(in srgb, var(--pg-data) 6%, var(--surface)); }
.cr-sets-group-name { font-size: 13px; font-weight: 750; }
.cr-sets-ex { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cr-sets-ex-head { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.cr-sets-rows, .cr-set-drops { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cr-set { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); min-width: 0; }
.cr-set-label { flex: 0 0 7.5em; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.cr-set-what { flex: 1 1 7em; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.cr-set-rest { flex: 0 1 auto; margin-left: auto; font-size: 12.5px; color: var(--ink-2); text-align: right; overflow-wrap: break-word; }
.cr-set.is-warmup .cr-set-what, .cr-set.is-drop .cr-set-what { font-weight: 500; color: var(--ink-2); }
.cr-set-drops { flex: 1 0 100%; margin: var(--sp-1) 0 0 3px; padding-left: var(--sp-3); border-left: 2px solid color-mix(in srgb, var(--pg-data) 45%, var(--border)); }
.cr-sets-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.cr-all-rows { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.cr-actions { margin-top: var(--sp-2); }
/* a proposal of planned runs: the Runs list's own rows, each with what Coach would do to it */
.cr-runs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.cr-run { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 14px; min-width: 0; padding: 12px 14px; }
.cr-run + .cr-run::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--border); }
.cr-run .run-plan-main { padding-top: 1px; }
.cr-run-meta { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.cr-run-notes { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-2); overflow-wrap: break-word; white-space: pre-line; }
.cr-run-tag { align-self: center; background: color-mix(in srgb, var(--run) 15%, transparent); color: var(--run); }
/* a route Coach found: under the row's words, as wide as the row beside its day; the map's credit under the map (no
   room for it over the route on a map this small), then the route's */
.cr-run-route { grid-column: 2 / -1; min-width: 0; margin-top: 10px; }
.cr-run-map { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cr-run-map .route-map { aspect-ratio: 16 / 9; }
.cr-run-map-credit { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.cr-run-map-credit a { color: inherit; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cr-run-map-credit a:hover { color: var(--ink); text-decoration: underline; } }
.cr-run-credit { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); overflow-wrap: break-word; }
.cr-run .run-plan-route { margin-top: 2px; }
.cr-run-tag.is-danger { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.cr-run.is-delete .run-plan-title, .cr-run.is-delete .run-plan-sub { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 70%, transparent); }
@media (max-width: 380px) { .cr-run { column-gap: 10px; padding: 10px 12px; } .cr-run + .cr-run::before { left: 12px; } }

/* one group: its figures, its exercises and the sessions behind them */
.pg-secondary { display: grid; gap: 2px; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.pg-secondary-label { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.pg-secondary-val { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pg-secondary-note { font-size: 12.5px; color: var(--ink-3); }
.pg-ex-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.pg-ex-group + .pg-ex-group { margin-top: var(--sp-2); }
.pg-ex-role { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.pg-ex-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pg-ex + .pg-ex { border-top: 1px solid var(--border); }
.pg-ex-head {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center;
  gap: var(--sp-3); padding: 12px; text-align: left;
}
.pg-ex-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-ex-name { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.pg-ex-meta { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.pg-ex-val { max-width: 14ch; text-align: right; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.pg-ex-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.pg-ex-head[aria-expanded="true"] .pg-ex-chev { transform: rotate(180deg); }
.pg-entries { background: var(--surface-2); border-top: 1px solid var(--border); }
.pg-entries > li + li { border-top: 1px solid var(--border); }
.pg-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 10px 12px 10px 16px; }
.pg-entry .pg-row-chev, .pg-help .pg-row-chev { grid-area: auto; }
.pg-entry-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-entry-day { font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-entry-name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.pg-entry-note { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.pg-entry-val { max-width: 14ch; text-align: right; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .pg-ex-head:hover, .pg-entry:hover { background: var(--hover); } }
.pg-ex-head:focus-visible, .pg-entry:focus-visible { outline-offset: -2px; }

/* the cards' own spacing */
.pg-summary .card-body { gap: var(--sp-2); }
.pg-summary .pg-compare { margin-top: var(--sp-2); }
.pg-stat-main { flex: 0 1 auto; }
.pg-trend .pg-caption { margin-bottom: var(--sp-1); }
.pg-coverage .card-body, .pg-exercises .card-body { gap: var(--sp-3); }
.pg-cov-end { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.pg-periods { gap: var(--sp-2); }
.pg-tip-when { color: color-mix(in srgb, var(--toast-ink) 72%, transparent); }
.pg-table-toggle { flex: 0 1 auto; max-width: 100%; }
/* the main screen's heading: the title and what it is, with Share beside them, its top in line with the title's — or,
   where the title's longest word and Share do not both fit (a narrow screen, its text enlarged), Share under them: the
   title is never broken within a word to keep Share beside it */
.pg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.pg-head-main { min-width: auto; } /* never narrower than its longest word: Share goes under it instead */
.pg-share { flex: none; min-height: 44px; padding: 0 16px; gap: 8px; }
.pg-share .icon { width: 17px; height: 17px; }
.pg-share[hidden] { display: none; }
.pg-detail-head .builder-head-main { min-width: 0; }
.pg-detail-head > .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
/* a small screen with its text enlarged: Back on a row of its own, its arrow in line with the name, and the group's
   name across the row under it, so a name is never broken within a word */
@media (max-width: 319px) {
  .pg-detail-head { flex-wrap: wrap; row-gap: 2px; }
  .pg-detail-head > .icon-btn { margin-inline-start: -12px; }
  .pg-detail-head > .builder-head-main { flex: 1 1 100%; }
}
/* a button's words wrap rather than run past its card when the text is enlarged */
.pg-card .btn, .pg-sheet .btn, .pg-custom .btn { white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }

/* narrow (a small screen with its text enlarged): each name across the whole row, its value and chevron under it; a
   card's choices one above the other; the weeks named at either end of the trend only; the drawing's legend words
   under its steps */
.pg-rank, .pg-ex-list, .pg-plot:not(.is-wide), .pg-card > .card-body, .bd, .pg-help { container-type: inline-size; }
@container (max-width: 239px) {
  .pg-row {
    grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "name name" "val chev" "bar bar" "sub sub";
    column-gap: var(--sp-2); row-gap: 4px;
  }
  .pg-rank-head { flex-wrap: wrap; justify-content: flex-start; column-gap: var(--sp-2); padding-right: var(--sp-2); }
  .pg-ex-head, .pg-entry { grid-template-columns: minmax(0, 1fr) 20px; column-gap: var(--sp-2); row-gap: 4px; }
  .pg-ex-main, .pg-entry-main { grid-column: 1 / -1; grid-row: 1; }
  .pg-ex-val, .pg-entry-val { grid-column: 1; grid-row: 2; max-width: none; text-align: left; }
  .pg-ex-chev, .pg-entry .pg-row-chev { grid-column: 2; grid-row: 2; }
  .pg-help-main .icon { display: none; }
  .pg-seg.is-small { grid-template-columns: minmax(0, 1fr); }
  .pg-seg.is-small .seg-btn { padding: 0 var(--sp-2); }
}
@container (max-width: 219px) {
  .pg-plot:not(.is-wide) .pg-tick:not(:first-child):not(:last-child) { visibility: hidden; }
  .bd-legend { flex-direction: column; align-items: flex-start; }
  .bd-ramp { display: grid; grid-template-columns: auto auto; grid-template-areas: "steps steps" "few more"; gap: 4px 12px; }
  .bd-ramp > :first-child { grid-area: few; }
  .bd-ramp > .bd-steps { grid-area: steps; }
  .bd-ramp > :last-child { grid-area: more; justify-self: end; }
}

/* History's way in */
.progress-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; font-size: 14px; font-weight: 650; color: var(--accent); }
.progress-link .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .progress-link:hover span { text-decoration: underline; text-underline-offset: 3px; } }

/* Muscles trained: the optional part of an exercise's form, folded until opened */
.mf { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-top: var(--sp-2); }
.add-form > .mf { grid-column: 1 / -1; margin-top: 0; }
.mf { container-type: inline-size; }
.mf-toggle {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center;
  gap: var(--sp-3); padding: 10px 12px 10px 14px; text-align: left; border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) { .mf-toggle:hover { background: var(--hover); } }
.mf-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mf-title { font-size: 14.5px; font-weight: 650; }
.mf-summary { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; overflow-wrap: break-word; }
.mf-optional { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.mf-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.mf-toggle[aria-expanded="true"] .mf-chev { transform: rotate(180deg); }
/* narrow (a small screen with its text enlarged): the title and its chevron, Optional under the title, and the
 * summary across the whole row below them (after the rules above, which it overrides) */
@container (max-width: 239px) {
  .mf-toggle { grid-template-columns: minmax(0, 1fr) 20px; gap: 2px var(--sp-2); }
  .mf-head { display: contents; }
  .mf-title { grid-column: 1; grid-row: 1; min-width: 0; }
  .mf-optional { grid-column: 1; grid-row: 2; }
  .mf-summary { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin-top: 2px; }
  .mf-chev { grid-column: 2; grid-row: 1; }
}
.mf-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.mf-body[hidden] { display: none; }
.mf-field { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); }
.mf-field[hidden], .mf-secondary[hidden], .mf-suggest[hidden] { display: none; }
.mf-field .field-label, .mf-secondary .field-label { margin: 0; }
.mf-secondary { border: 0; margin: 0; padding: var(--sp-2) 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mf-secondary legend { padding: 0; float: left; width: 100%; }
.mf-count { font-weight: 600; color: var(--ink-3); }
.mf-hint, .mf-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.mf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mf-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.mf-check { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mf-chip-check { display: none; width: 15px; height: 15px; }
.mf-chip.on { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.mf-chip.on .mf-chip-check { display: inline-flex; }
.mf-chip.is-full { opacity: 0.5; cursor: not-allowed; }
.mf-chip.is-full .mf-check { cursor: not-allowed; }
.mf-chip:has(.mf-check:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mf-chip:not(.is-full):hover { border-color: var(--ink-3); } }
.mf-suggest { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.mf-suggest-text { flex: 1 1 180px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.mf-suggest-btn { min-height: 44px; }
.preview-muscles { color: var(--ink-2); }
.ex-muscles-line { font-size: 15px; font-weight: 650; line-height: 1.4; }
.ex-muscles-btn { align-self: flex-start; min-height: 44px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
/* a calisthenics skill step: where it stands in its skill, and the steps either side of it, each opening its page */
.ex-skill-steps { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0; }
.ex-skill-step { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ex-skill-label { flex: none; width: 5.5em; font-size: 13.5px; color: var(--ink-2); }
.ex-skill-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.ex-skill-btn { min-height: 44px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
/* merging one exercise into another: the choice of the one it is the same as (those of the same name marked), then
   the warning — the two, one above the other with the way the merge goes between them, everything it moves, and that
   it cannot be undone */
.merge-intro { font-size: 14px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
/* the choice's title names the exercise (one's own, its name up to sixty unspaced characters): it wraps rather
   than pushing Close off the sheet; and so does the note of none to choose */
.merge-sheet .sheet-title { min-width: 0; overflow-wrap: anywhere; }
.merge-list .empty-note { overflow-wrap: anywhere; }
.merge-list .list-row-name { overflow-wrap: anywhere; }
.merge-same {
  display: inline-block; margin-left: 8px; vertical-align: 1px; white-space: nowrap;
  font-size: 11.5px; font-weight: 650; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 1px 8px;
}
.merge-pair { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.merge-ex { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.merge-ex[data-merge-tile="into"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.merge-ex-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.merge-ex-name { margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.merge-ex-sub { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.merge-arrow { display: flex; justify-content: center; color: var(--ink-3); }
.merge-arrow .icon { width: 18px; height: 18px; }
.merge-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.merge-points li::marker { color: var(--ink-3); }
/* the warning's sentences name the two exercises: a name with no space to break at wraps within the sheet */
.merge-points li { min-width: 0; overflow-wrap: anywhere; }
.merge-caution {
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 650; color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

@media (prefers-reduced-motion: reduce) {
  .mf-chev { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-muscle, .pg-row-fill, .pg-wbar, .pg-body, .pg-ex-chev { transition: none; }
  .pg-loading, .pg-skel-block, .pg-skel-chart, .bm-skel-chart { animation: none; }
  .bm-dot, .bm-toggle-track, .bm-toggle-thumb, .cr-all-summary .icon { transition: none; }
}
@media (forced-colors: active) {
  .pg-wbar, .pg-row-fill { background: CanvasText; forced-color-adjust: none; }
  .bd-base { fill: Canvas; stroke: CanvasText; }
  .bd-muscle, .bd-line { stroke: Canvas; }
  .bd-muscle:not([data-level="0"]) { fill: CanvasText; }
  html.theme-dark .bd-muscle[data-level="5"] { filter: none; }
  .bd-ring { stroke: Highlight; stroke-width: 1.6; }
  .bd-swatch:not([data-level="0"]) { background: CanvasText; forced-color-adjust: none; }
}

/* ---------------- A narrow screen with its text enlarged ----------------
   Narrower than 320 px is a phone with its text enlarged: at 130% to 150% it lays the app out in about 240 to 300 px,
   at 200% in about 160 to 200. Nothing there may be cut short, drawn over something
   else, or pushed past the screen's edge, and no word is broken to make room for a control: a button's words wrap; a
   control too wide for a row goes on a row of its own, keeping the row's end; a row's figures go under its name;
   clocks, steppers and the week shrink to fit; only a word longer than its whole column is broken. (The muscle
   analytics, the exercise page and the start-up screens have their own rules above.) */
@media (max-width: 319px) {
  /* the spacing is set for text at its usual size. With the text enlarged, the page's sides, a card's padding and a
     sheet's sides give way so the words keep the width: 12 px here is 24 px of the text at its usual size */
  #view { --gutter: 12px; }
  .card-body { padding: 12px; }
  .sheet { padding-left: 12px; padding-right: 12px; }
  .list-row { padding: 12px 10px; gap: 6px; }
  /* buttons: their words wrap rather than run past the button's edges, centred unless the button sets its own */
  .btn { white-space: normal; padding-left: 12px; padding-right: 12px; }
  :where(.btn) { text-align: center; }
  /* a choice of a few: its segments wrap to a second row rather than squeeze their words over each other */
  .segmented { flex-wrap: wrap; }
  .segmented > .seg-btn { flex: 1 1 auto; white-space: nowrap; }
  /* a stepper keeps its minus, figure and plus on one row: its buttons and figure narrower, wrapping only if a figure
     is too wide even then */
  .stepper { flex-wrap: wrap; max-width: 100%; gap: 2px; }
  .stepper > .step-btn { width: 36px; min-width: 36px; }
  .stepper > .step-val { min-width: 32px; }
  /* a long word in a name or a line: hyphenated where the browser can, otherwise broken at its column's edge */
  .list-row-name, .ex-name-btn, .card-lineup, .coach-example-bubble, .preview-name { -webkit-hyphens: auto; hyphens: auto; }
  /* a row with something at each end: the second under the first when the first needs the width */
  .row-between { flex-wrap: wrap; row-gap: 6px; }
  /* a card's title with what is beside it: the title across the row, a control under it keeping the row's end */
  .card-top { flex-wrap: wrap; }
  .card-top > :first-child { flex: 1 1 100%; }
  .card-top > .icon-btn:last-child { margin-inline-start: auto; }
  /* Back on a row of its own above a page's title (the editor's, a session's, the plans') */
  .builder-head { flex-wrap: wrap; row-gap: 2px; }
  .builder-head > .builder-head-main { flex: 1 1 100%; }
  .builder-head > .icon-btn:first-child { margin-inline-start: -12px; }
  .builder-head.session-head > .builder-head-main { grid-column: 1 / -1; margin-top: -8px; }
  .page-head.catalogue-head { flex-wrap: wrap; row-gap: 2px; }
  .page-head.catalogue-head > .catalogue-head-main { flex: 1 1 100%; }
  .page-head.catalogue-head > .icon-btn:first-child { margin-inline-start: -12px; }

  /* Home: a letter a day, the dates a size smaller, so the seven days fit side by side; the figures one to a row; a
     reminder's words across the card, its button under them */
  .today-head { flex-wrap: wrap; }
  .week-strip { gap: 2px; }
  .wk-wd { font-size: 0; letter-spacing: 0; }
  .wk-wd::first-letter { font-size: 10.5px; }
  .wk-num { font-size: 13px; }
  .mini-stats, .recap-stats { grid-template-columns: minmax(0, 1fr); }
  .nudge { flex-wrap: wrap; row-gap: 10px; }
  .nudge > .nudge-main { flex: 1 1 100%; }
  .nudge > .btn { flex: 1 1 auto; }

  /* Workouts: Freestyle and Timer one above the other, each tile's name under its icon; the way to browse reads from
     its left edge as the tiles do */
  .quick-row { grid-template-columns: minmax(0, 1fr); }
  .quick-tile-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .browse-entry { flex-direction: column; align-items: flex-start; text-align: left; }
  /* a section's or a group's name wraps and gives way before its count */
  .lib-head > span:first-child { min-width: 0; white-space: normal; overflow-wrap: break-word; }
  .lib-head-side { flex-shrink: 0; }
  /* a group's bar and its cards closer to the group's edges; the group's name across the bar, wrapping; its count and
     fold arrow under the name, and its menu at the end of that row */
  .group-block { padding: 0 6px 6px; }
  .group-block .group-head-row { margin: 0 -6px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .group-block .group-head { padding: 12px 8px 12px 10px; flex-wrap: wrap; row-gap: 6px; }
  .group-block .group-head-row > .group-head { grid-area: 1 / 1 / 2 / 3; }
  .group-block .group-head-row > .icon-btn.group-manage { grid-area: 1 / 2 / 2 / 3; align-self: end; margin: 0 4px 1px 0; position: relative; }
  .group-block .group-head > span:first-of-type { flex: 1 1 calc(100% - 24px); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
  .group-block .group-head .lib-head-side { margin-inline-start: 20px; }
  /* a workout card's name across its row, its three controls a little narrower and on one row under it; its facts a
     little tighter, so a fact keeps to one line where it can, and one that cannot is a rounded box of two lines */
  .workout-card .card-top .card-title { flex-basis: 100%; }
  .workout-card-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
  .workout-card .workout-card-actions > .icon-btn, .workout-card .workout-card-actions > .drag-handle { width: 30px; min-width: 30px; }
  .fact { white-space: normal; padding: 2px 6px 2px 5px; gap: 4px; border-radius: 10px; }

  /* a workout: its figures and actions one to a row; its menu, and an exercise's guide, keeping the row's end under the
     name; a set's number column and gaps narrower, so its rest keeps to its line */
  .wv-stats, .wv-actions { grid-template-columns: minmax(0, 1fr); }
  .wv-top, .wv-ex-head { flex-wrap: wrap; }
  .wv-top > .wv-titles { flex: 1 1 100%; }
  .wv-top > .icon-btn:last-child, .wv-ex-head > .wv-guide { margin-inline-start: auto; }
  .wv-ex-head > .wv-ex-titles { flex: 1 1 100%; order: 1; }
  .wv-set { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 10px; }

  /* the editor: an exercise's card tighter at its sides, its name from the card's edge (the empty label column kept a
     gap before it) and up to three lines; the colour's name with Change under it, beside the swatch; room for the
     description's example */
  .ex-card { padding: 12px; }
  .ex-card .ex-head { column-gap: 0; }
  .ex-card .ex-head > .ss-member-label { margin-inline-end: 6px; }
  .ex-title h3 { -webkit-line-clamp: 3; }
  .colour-pick {
    display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px;
    max-width: 100%; border-radius: var(--radius-sm); text-align: left;
  }
  .colour-pick > .colour-swatch { grid-row: 1 / 3; }
  .desc-input { min-height: 9em; }

  /* the workout being run, and the timer: Back and the count on the first row, the name and its line centred under
     them; the clocks sized to the screen; the steppers' value above their two buttons */
  .runner-head-row { flex-wrap: wrap; justify-content: space-between; row-gap: 2px; }
  .runner-head-mid { order: 1; flex: 1 1 100%; }
  .runner-title { white-space: normal; overflow-wrap: break-word; }
  .runner-ex-row { padding: 0 36px; }
  .giant-clock { font-size: 19vw; }
  .big-stepper { align-self: stretch; align-items: stretch; }
  .big-step-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "val val" "minus plus"; gap: 8px; }
  .big-step-row > .big-step-btn:first-child { grid-area: minus; width: 100%; }
  .big-step-row > .big-step-btn:last-child { grid-area: plus; width: 100%; }
  .big-step-row > :not(.big-step-btn) { grid-area: val; min-width: 0; justify-self: center; }
  .big-step-val { min-width: 0; font-size: 38px; }
  .big-step-input { width: 100%; max-width: 150px; }
  /* a set's line: its figure beside "Set 1" when it fits and under it when it does not, never broken at its × */
  .session-set { flex-wrap: wrap; column-gap: 8px; }
  .session-set > .set-n { width: auto; }

  /* the calendar: the month's name across the row; Back, Today and Next on one row, Today between the arrows; a letter
     a day over each column; the month's days without their boxes and closer together, so a date of two figures fits
     its column */
  .cal-title { flex: 1 1 100%; min-width: 0; }
  .cal-nav { width: 100%; gap: 2px; }
  .cal-nav > .icon-btn { width: 32px; min-width: 32px; }
  .cal-nav > .btn { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .month-wd-short { display: inline-block; font-size: 0; letter-spacing: 0; }
  .month-wd-short::first-letter { font-size: 11px; }
  .month-grid { gap: 4px 2px; }
  .month-cell { min-height: 48px; padding: 3px 1px; border-color: transparent; background: none; align-items: center; gap: 3px; }
  .cell-num { min-width: 0; padding: 1px 2px; font-size: 11.5px; align-self: center; }

  /* History: the figures one to a row; the milestones two to a row, the next one's name above its count; each
     category's name above its bar and count; a month's row tighter at its sides, so the month keeps the width; the
     filter under its label, as wide as the row */
  .hero-stats { grid-template-columns: minmax(0, 1fr); }
  .ms-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-next-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ms-next-val { white-space: normal; }
  .cat-bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "track val"; row-gap: 4px; }
  .cat-bar-name { grid-area: name; }
  .cat-bar-track { grid-area: track; }
  .cat-bar-val { grid-area: val; }
  .history-month-btn { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .history-tools { flex-wrap: wrap; }
  .history-filter { min-width: 0; width: 100%; }
  /* Records: a record's pin under its name, keeping the row's end; a record's row one item under another */
  .record-head { flex-wrap: wrap; }
  .record-head > :first-child { flex: 1 1 100%; }
  .record-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "label" "value" "spark"; row-gap: 4px; }
  .record-row-name { white-space: normal; overflow: visible; text-overflow: clip; }
  .record-spark { width: 100%; max-width: none; height: 24px; }

  /* Settings: a section's name a size smaller, so a long one keeps to its line beside the arrow */
  .fold-title { font-size: 15px; }
  /* the plans: a plan's name and facts across its card and its arrow at the end of the row under them, so a long word
     in the name is not broken to make room for the arrow */
  .card-head { flex-wrap: wrap; row-gap: 4px; }
  .card-head > .card-head-text { flex: 1 1 100%; }
  .card-head > .card-head-text ~ * { margin-inline-start: auto; margin-top: 0; }
  /* Coach's example: no frame of its own inside its card, as its label says what it is; the message as wide as the
     card; the workout's name a size smaller and its card tighter at its sides; a workout's sets under each exercise's
     name when they do not fit beside it */
  .coach-example { padding: 0; border: 0; border-radius: 0; background: none; }
  .coach-example-bubble { max-width: 100%; }
  .coach-example-made .card-title { font-size: 16px; }
  .coach-example-made .card-body { padding: 10px; }
  .coach-example-made .preview-sets { white-space: normal; flex: 0 1 auto; }
  .preview-list li { flex-wrap: wrap; column-gap: 6px; }
  /* Wearables: a service's mark above its name and line; the Example label and the link to report a problem wrap
     with the line they are on */
  .wear-provider-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wear-provider-text { flex: none; width: 100%; }
  .wear-example-label { flex: 0 1 auto; white-space: normal; }
  .wear-notice-link { white-space: normal; }
  /* More: each row's icon above its name and line, so the words have the row's width beside the arrow */
  .more-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 6px; }
  .more-item > .more-ic { grid-area: 1 / 1; width: 30px; height: 30px; border-radius: 8px; }
  .more-item > .more-ic .icon { width: 18px; height: 18px; }
  .more-item > .more-main { grid-area: 2 / 1; }
  .more-item > .more-badge { grid-area: 1 / 2 / 3 / 3; }
  .more-item > .more-chev { grid-area: 1 / 3 / 3 / 4; }
  .more-item + .more-item::before { left: 12px; }
}
@media (max-width: 179px) {
  /* the narrowest: the week scrolls sideways rather than squeeze its dates over each other */
  .week-strip { grid-template-columns: repeat(7, 1.75rem); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
}

/* ================= Runs =================
   Runs (#/runs, #/run/…) and their sheets: the weeks, the planned runs, the runs from Strava, a run's map, figures,
   splits and best efforts, the plan sheet and the share sheet. Teal is the runs' colour (their bars, a plan's day,
   the route); Strava's orange appears only where Strava asks for it — its connect button and its "View on Strava". */
:root { --run: #0D9488; --run-glow: rgba(13, 148, 136, 0.32); --strava: #FC5200; }
html.theme-dark { --run: #2DD4BF; --run-glow: rgba(45, 212, 191, 0.4); }
/* a planned route: its cautions (main roads) and, under a run on its page, the route that was planned */
:root { --run-warn: #B45309; --run-plan: rgba(79, 70, 229, 0.26); }
html.theme-dark { --run-warn: #FBBF24; --run-plan: rgba(165, 180, 252, 0.38); }

.run-page-head { align-items: flex-end; }
.run-head-actions { flex-wrap: nowrap; align-items: center; gap: var(--sp-2); }
.run-unit .seg-btn { min-width: 42px; }
.run-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.run-section { display: flex; flex-direction: column; }
.run-detail { gap: var(--sp-4); }

/* the weeks: the chosen week's figures over twelve bars */
.run-weeks-card .card-body { gap: var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.run-week-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.run-week-big { margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.run-week-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.run-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 104px; }
.run-week-bar { height: 100%; display: flex; align-items: flex-end; padding: 0; border-radius: 7px; }
.run-week-fill {
  display: block; width: 100%; height: var(--h); min-height: 4px; border-radius: 6px 6px 3px 3px;
  background: color-mix(in srgb, var(--run) 30%, var(--seg-bg));
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.run-week-bar.on .run-week-fill { background: var(--run); box-shadow: 0 8px 18px -8px var(--run-glow); }
@media (hover: hover) and (pointer: fine) { .run-week-bar:hover .run-week-fill { background: color-mix(in srgb, var(--run) 60%, var(--seg-bg)); } .run-week-bar.on:hover .run-week-fill { background: var(--run); } }
.run-week-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.run-weeks-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; font-size: 11.5px; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* planned runs: a list in one card, a day block, what it is, where it stands */
.run-list { display: flex; flex-direction: column; overflow: hidden; }
.run-plan-row {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px;
  padding: 11px 14px; text-align: left; transition: background-color var(--dur-fast) var(--ease-out);
}
.run-plan-row + .run-plan-row::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--border); }
.run-plan-row:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .run-plan-row:hover { background: var(--hover); } }
.run-plan-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.run-day {
  flex: none; width: 44px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); line-height: 1;
}
.run-day-wd { font-size: 10px; font-weight: 750; letter-spacing: 0.08em; color: var(--ink-3); }
.run-day-num { margin-top: 4px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.run-day.today { background: color-mix(in srgb, var(--run) 11%, var(--surface)); border-color: color-mix(in srgb, var(--run) 45%, var(--border)); }
.run-day.today .run-day-wd { color: var(--run); }
.run-plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.run-plan-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.run-plan-sub { font-size: 13px; line-height: 1.35; color: var(--ink-2); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.run-plan-row.is-past .run-plan-title { color: var(--ink-2); }
.run-plan-row.is-done .run-day, .run-plan-row.is-ticked .run-day { opacity: 0.72; }
/* nothing planned ahead, over the runs not done */
.run-list-none { padding: 14px 16px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.run-list-sep {
  padding: 10px 14px 6px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}
.run-chev { flex: none; display: inline-flex; color: var(--ink-3); margin-right: -2px; }
.run-chev .icon { width: 18px; height: 18px; }
.run-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2);
}
.run-pill.on { background: color-mix(in srgb, var(--run) 15%, transparent); color: var(--run); }
.run-pill.now { background: var(--run); color: #FFFFFF; }
html.theme-dark .run-pill.now { color: #062621; }
.run-pill.off { color: var(--ink-3); }
.run-pill.pr { background: var(--run); color: #FFFFFF; box-shadow: 0 4px 12px -6px var(--run-glow); }
html.theme-dark .run-pill.pr { color: #062621; }
/* its words centred on it by their capitals (.pill-text), the letter spacing after the last letter taken back */
.run-pill > .pill-text { margin-right: -0.03em; }

/* the runs: a card each, the route's shape, the name, when, the figures */
.run-rows { gap: var(--sp-2); }
@media (min-width: 900px) { .run-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
.run-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: inherit; }
@media (hover: hover) and (pointer: fine) { .run-row:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); } }
.run-row:active { transform: scale(0.995); }
.run-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.run-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.run-thumb.none { display: grid; place-items: center; color: var(--ink-3); }
/* a run marked done by hand: a tick where a route's shape would be, a row like a Strava run's */
.run-thumb.run-thumb-done { color: var(--run); background: color-mix(in srgb, var(--run) 10%, var(--surface)); border-color: color-mix(in srgb, var(--run) 32%, var(--border)); }
.run-thumb.run-thumb-done .icon { width: 24px; height: 24px; }
button.run-row { width: 100%; text-align: left; }
.run-row-figs.run-row-add { font-weight: 550; color: var(--ink-3); }
.run-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.run-row-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; overflow-wrap: break-word; }
.run-row-when { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.run-row-figs { margin-top: 3px; font-size: 13.5px; font-weight: 620; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; --run-sep: 1.4em; }
/* a line of parts (runs.partsLine): a "·" between two parts on one line, centred in a box of its own before the second;
   the line wraps between parts, and a part that starts a line has that box cut off at the line's start — no line starts
   or ends with a "·" */
.run-parts { display: block; overflow: hidden; }
.run-parts-in { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--run-sep, 0.9em)); }
.run-part { min-width: 0; }
.run-part:first-child { padding-left: var(--run-sep, 0.9em); }
.run-sep { display: inline-block; width: var(--run-sep, 0.9em); text-align: center; white-space: pre; }
.run-empty .card-body { gap: 6px; }
/* the recent runs' heading with how many there are, and the way to the older ones */
.run-rows-label { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.run-rows-count { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.run-rows-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn.run-more { min-height: 46px; font-weight: 650; font-variant-numeric: tabular-nums; }
.run-empty-title { font-size: 15px; font-weight: 650; }

/* Strava's own marks (js/strava-brand.js): each logo in its orange on a light page, in white on a dark one */
.strava-logo { display: inline-flex; flex: none; height: 20px; }
.strava-logo img { display: block; width: auto; height: 100%; }
html.theme-dark .strava-logo-light, html:not(.theme-dark) .strava-logo-dark { display: none; }
/* Strava's own button to connect: its file as it is, at the size Strava gives it */
.strava-connect { display: block; flex: none; align-self: flex-start; border-radius: 6px; line-height: 0; }
.strava-connect img { display: block; width: 237px; height: 48px; }
.strava-connect:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.strava-connect:disabled { opacity: 0.5; }

/* Strava: connect, its state, who reads it, disconnect */
.run-connect .card-body, .run-strava .card-body { gap: 14px; }
.run-strava-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.run-strava-intro .card-meta { margin: 0; }
/* connected: its logo with Sync now beside it, its state under them at the card's full width */
.run-strava-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo sync" "state state";
  align-items: center; gap: 10px 12px;
}
.run-strava-head .strava-logo { grid-area: logo; }
.run-strava-head .run-strava-state { grid-area: state; }
.run-strava-head > .btn { grid-area: sync; }
.run-strava-state { display: flex; align-items: flex-start; gap: 8px; margin: 0; line-height: 1.4; }
.run-strava-state::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #2DD4BF; }
.run-strava-foot { align-items: flex-start; }
.run-strava-foot .wear-notes { flex: 1; min-width: 0; }
.run-powered { display: flex; justify-content: center; margin: 0; }
.run-powered .strava-logo { height: 18px; }
/* Wearables: Strava's card, its logo in the place of a mark and a name */
.wear-strava-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wear-strava-head .wear-provider-name { gap: 8px 10px; }
.wear-strava-head .card-meta { margin: 0; }

/* a run's page */
.run-head .builder-head-main h1 { font-size: 22px; line-height: 1.15; }
.run-map-card { overflow: hidden; }
.run-map { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 480px; background: var(--surface-2); }
@media (min-width: 700px) { .run-map { aspect-ratio: 16 / 9; } }
.run-map-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; }
.run-map-canvas.editable { cursor: grab; }
.run-map-canvas.editable:active { cursor: grabbing; }
/* a small map's foot, over its bottom right corner: its credit, then its button, which stays in the corner however
   many lines the credit takes; the route is drawn clear of it, and the foot's empty part lets a drag or a tap through
   to the map */
.map-chrome {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px;
  pointer-events: none;
}
.map-chrome > * { pointer-events: auto; }
/* the credit wraps between its names on a narrow map, each line on a backing of its own that fits its words; its last
   line centred on the button ((36 − 22) / 2 px off the foot's bottom), any line before it above */
.run-map-credit {
  min-width: 0; margin-bottom: 7px; text-align: right;
  font-size: 10.5px; font-weight: 600; line-height: 22px; color: var(--ink-2);
}
.run-map-credit .credit-text {
  padding: 3px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.run-map-credit a, .map-view-credit a { color: inherit; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .run-map-credit a:hover, .map-view-credit a:hover { color: var(--ink); text-decoration: underline; } }
/* a map's button that opens it as its own: round, the map showing through its glass; 44 px to a finger */
.map-open {
  position: relative; flex: none;
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(18, 21, 26, 0.16), 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.map-open::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; }
.map-open .icon { width: 18px; height: 18px; }
.map-open:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .map-open:hover { background: var(--surface); } }
.run-map-canvas.opens { cursor: zoom-in; }
.route-option .run-map-canvas { cursor: pointer; }
/* a route's own map: a sheet as tall as the screen, the map filling it under the sheet's head; its tools at the bottom
   right, its credit at the bottom left, both clear of a phone's home bar */
.sheet.sheet-map {
  height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
  max-height: none; max-width: none; overflow: hidden;
  padding: 10px 0 0;
}
.sheet-map .sheet-head { padding: 16px 12px 10px 20px; }
.sheet-map .sheet-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet-map .sheet-body { flex: 1; min-height: 0; gap: 0; padding: 0; }
.map-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface-2); border-top: 1px solid var(--border); }
.map-view-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.map-view-canvas.moving { cursor: grabbing; }
.map-view-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
/* its corner: the buttons over the credit, both at the right; the corner's empty part lets a drag through to the map */
.map-view-corner {
  position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.map-view-corner > * { pointer-events: auto; }
.map-view-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.map-view-zoom {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-hover), 0 0 0 1px var(--border);
}
.map-view-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.map-view-tools > .map-view-btn { border-radius: 12px; box-shadow: var(--shadow-hover), 0 0 0 1px var(--border); }
.map-view-zoom > .map-view-btn + .map-view-btn { border-top: 1px solid var(--border); }
.map-view-btn .icon { width: 20px; height: 20px; }
.map-view-btn:focus-visible { outline-offset: -3px; border-radius: 10px; }
.map-view-btn[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.map-view-btn[aria-disabled="true"] .icon { opacity: 0.5; }
@media (hover: hover) and (pointer: fine) { .map-view-btn:not([aria-disabled="true"]):hover { background: var(--surface-2); } }
.map-view-btn:not([aria-disabled="true"]):active { background: var(--surface-2); }
.map-view-credit {
  max-width: 100%; padding: 4px 10px; border-radius: 12px; text-align: right;
  font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.map-view-note {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-hover);
}
.map-view-note[hidden] { display: none; }
@media (min-width: 700px) {
  .sheet.sheet-map { width: min(1100px, 100%); height: min(860px, calc(100dvh - 48px)); }
  .sheet-map .sheet-head { padding: 16px 14px 10px 24px; }
}
.run-map-foot { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--border); }
.run-map-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.run-key-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.run-key-dot.start { background: var(--run); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.run-key-dot.end { background: radial-gradient(circle, #12151A 0 28%, #FFFFFF 30%); border: 2px solid var(--run); margin-left: 6px; }
.run-key-dash { display: inline-block; width: 18px; border-top: 2px dashed var(--ink-3); margin-left: 6px; }
.run-key-ends { display: contents; }
.run-key-ends[hidden] { display: none; }
.run-key-ends[hidden] + .run-key-dash { margin-left: 0; }
.run-map-hidden { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.run-map-hidden.is-hidden { color: var(--run); }
.run-map-tip { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.run-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .run-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.run-facts-card .card-body, .run-efforts .card-body, .run-splits .card-body { gap: 10px; }
.run-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 14px 18px; }
.run-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.run-fact-k { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.run-fact-v { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.run-did { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; color: inherit; }
.run-did-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--run); background: color-mix(in srgb, var(--run) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--run) 28%, var(--border)); }
.run-splits-note { font-size: 12px; color: var(--ink-3); }
.run-split-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.run-split {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px 50px 32px; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13.5px; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.run-split + .run-split { border-top: 1px solid var(--line); }
.run-split-n { font-weight: 650; color: var(--ink-3); }
.run-split-bar { height: 8px; border-radius: 999px; background: var(--seg-bg); overflow: hidden; }
.run-split-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--run) 52%, var(--seg-bg)); }
.run-split.best .run-split-fill { background: var(--run); box-shadow: 0 0 10px var(--run-glow); }
.run-split.best .run-split-pace { color: var(--run); }
.run-split-pace { font-weight: 700; text-align: right; }
.run-split-el, .run-split-hr { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.run-effort-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.run-effort { display: grid; grid-template-columns: minmax(0, 1fr) auto 60px 76px; align-items: center; gap: 10px; padding: 9px 0; font-variant-numeric: tabular-nums; }
.run-effort + .run-effort { border-top: 1px solid var(--line); }
.run-effort-name { font-size: 14px; font-weight: 650; overflow-wrap: break-word; }
.run-effort-time { font-size: 14px; font-weight: 700; text-align: right; }
.run-effort-pace { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.run-source { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--sp-2); }
.run-strava-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--strava); font-size: 14.5px; font-weight: 750; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.run-device { font-size: 12px; color: var(--ink-3); }

/* the plan sheet */
.run-form { display: flex; flex-direction: column; gap: 14px; }
.run-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.run-field > .field-label { margin: 0; }
.run-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.run-kind {
  min-height: 44px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 14px; font-weight: 650; color: var(--ink-2); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.run-kind.on { border-color: var(--run); color: var(--ink); background: color-mix(in srgb, var(--run) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--run); }
.run-kind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.run-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.run-input-unit { position: relative; display: block; }
.run-input-unit > .input { padding-right: 46px; }
.run-unit-tag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 650; color: var(--ink-3); pointer-events: none; }
.run-derived { margin: -6px 0 0; min-height: 1.35em; color: var(--run); font-weight: 600; }
.run-notes { min-height: 66px; line-height: 1.4; resize: vertical; }
.run-plan-link {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--run) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--run) 30%, var(--border));
  font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--ink);
}
.run-plan-link > span { flex: 1; min-width: 0; }
.run-plan-link > .icon:first-child { color: var(--run); }
.run-plan-link > .icon:last-child { color: var(--ink-3); width: 18px; height: 18px; }
.btn.run-delete { color: var(--danger); }
/* a plan marked done by hand: said first, with what was done, its card and Change */
.run-done {
  display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--run) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--run) 30%, var(--border));
}
.run-done-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.run-done-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--run) 18%, transparent); color: var(--run); }
.run-done-mark .icon { width: 18px; height: 18px; }
.run-done-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.run-done-title { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.run-done-words { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* its card and Change: two of a width, side by side; one alone across; one over the other on a narrow screen */
.run-done-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.run-done-actions > .btn { padding-left: 12px; padding-right: 12px; }
.run-done-actions > .btn:only-child { grid-column: 1 / -1; }
.run-done-ask { display: flex; flex-direction: column; gap: 4px; }
.run-done-lede { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.run-done-sub { margin: 0; line-height: 1.45; }
.run-done-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* under them, one line for the pace or for what is wrong, one at a time, in the same place */
.run-done-note { display: grid; min-height: 1.35em; margin-top: -6px; }
.run-done-note > .run-derived, .run-done-note > .drop-error { grid-area: 1 / 1; margin: 0; }
.history-powered { margin: var(--sp-3) 0 0; }
/* an empty History while the runs are still coming, or could not be read: one line saying so, Try again beside it */
.history-runs-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.history-runs-note:focus, .history-runs-note:focus-visible { outline: none; }
.history-runs-note .card-meta { margin: 0; }
.history-runs-again { flex: none; }

/* a planned run's route: the planner, its options, the route beside the plan */
.route-form { gap: 14px; }
/* a field or a button set aside (the finish of a loop, Use this route before there are routes): gone, whatever its display */
.route-form [hidden], .route-block[hidden], .route-block [hidden] { display: none !important; }
.route-segs { display: flex; flex-wrap: wrap; gap: 10px; }
.route-seg { flex: 1 1 200px; display: flex; }
.route-seg .seg-btn { flex: 1; min-height: 44px; }
.route-field-box { position: relative; }
.route-loop { max-width: 220px; }
.route-places {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6; max-height: 296px; overflow-y: auto; padding: 4px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
}
.route-place { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.route-place .icon { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.route-place.sel, .route-place:hover { background: color-mix(in srgb, var(--run) 9%, var(--surface)); }
.route-place.sel .icon { color: var(--run); }
.route-place-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.route-place-name { font-size: 14.5px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.route-place-rest { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.route-locate { align-self: flex-start; gap: 6px; min-height: 44px; }
.btn.route-locate .icon { width: 16px; height: 16px; color: var(--run); }
.route-field-note { margin: -2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.route-field-note:empty { display: none; }
.route-results { display: flex; flex-direction: column; gap: 12px; }
.route-results:empty { display: none; }
.route-finding { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.route-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card.route-option {
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.route-option-pick { display: flex; flex-direction: column; flex: 1; cursor: pointer; border-radius: inherit; }
.route-option-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.card.route-option > .btn.route-use { width: auto; margin: 0 14px 14px; }
@media (hover: hover) and (pointer: fine) { .card.route-option:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); } }
.card.route-option.on { border-color: var(--run); box-shadow: inset 0 0 0 1px var(--run), 0 10px 24px -14px var(--run-glow); }
/* the wrapper's ratio sets the map's box; the canvas lies over it, out of its flow, so the bitmap drawn never makes the box
   bigger (a canvas in the flow makes its box as tall as its bitmap, and a border measured with it grew it each draw) */
.route-map { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.route-option .route-map { border-bottom: 1px solid var(--border); }
.route-map .run-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: auto; }
.route-option-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.route-option-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.route-option-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.route-option.on .route-option-name { color: var(--run); }
.route-option-dist { font-size: 16px; font-weight: 750; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.route-option-climb { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 620; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.route-option-climb .icon { flex: none; width: 16px; height: 16px; color: var(--run); }
.route-profile { display: block; width: 100%; height: 44px; margin: 2px 0; }
.route-option-meta { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); overflow-wrap: break-word; }
.route-option-warn { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; line-height: 1.35; color: var(--run-warn); }
.route-option-warn .icon { flex: none; width: 16px; height: 16px; }
.route-safety { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.route-safety .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ink-3); }
.route-credits { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.route-credits > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; }
.route-credits > summary::-webkit-details-marker { display: none; }
.route-credits > summary::after { content: "Credits"; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.route-credits[open] > summary::after { content: "Hide"; }
.route-credits > p { margin: 6px 0 0; text-wrap: pretty; }
.route-credit-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
.route-credit-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
/* Add a route: its mark, its name, and what it does on a line under the name, at every width */
.btn.route-add {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 2px 10px;
  width: 100%; min-height: 56px; padding-top: 9px; padding-bottom: 9px; text-align: left; white-space: normal;
}
.btn.route-add .icon { grid-row: 1 / span 2; color: var(--run); }
.route-add-sub { grid-column: 2; font-size: 12.5px; font-weight: 550; line-height: 1.35; color: var(--ink-3); }
.route-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.route-card .route-map { aspect-ratio: 16 / 9; max-height: 240px; border-bottom: 1px solid var(--border); }
.route-card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.route-card-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: break-word; }
.route-card-figs { font-size: 13.5px; font-weight: 620; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.route-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.route-card-actions .btn { gap: 6px; }
/* the route's own actions keep their compact type, at a full target on a desktop too (as Progress's small buttons) */
.route-card-actions .btn-sm { min-height: 44px; }
.route-card-actions .icon { width: 16px; height: 16px; }
.btn.route-remove { color: var(--danger); }
.route-block > .route-safety { margin-top: 2px; }
.route-pacing { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.route-pacing:empty { display: none; }
.route-pacing > .hint-note { margin: 0; }
.route-pacing-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.route-pacing-title { font-size: 13.5px; font-weight: 700; }
.route-finish { font-size: 13.5px; font-weight: 700; color: var(--run); font-variant-numeric: tabular-nums; }
.route-pace-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.route-pace {
  display: grid; grid-template-columns: 52px 96px minmax(0, 1fr) 66px; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.route-pace + .route-pace { border-top: 1px solid var(--line); }
.route-pace-n { font-weight: 650; color: var(--ink-3); }
.route-pace-climb { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.route-pace-bar { height: 8px; border-radius: 999px; background: var(--seg-bg); overflow: hidden; }
.route-pace-bar > span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--run) 52%, var(--seg-bg)); }
.route-pace-v { font-weight: 700; text-align: right; }
/* a plan's route in a list: under its title, quiet */
.run-plan-route { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); overflow-wrap: break-word; }
.run-plan-route .icon { flex: none; width: 14px; height: 14px; margin-top: 1.5px; color: var(--run); }
.run-plan-route > span:last-child { min-width: 0; }
/* a run's page: the route that was planned, under the run */
.run-key-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.run-key-plan { display: inline-block; width: 18px; height: 8px; border-radius: 999px; background: var(--run-plan); margin-left: 6px; }
.run-planned { display: flex; flex-direction: column; gap: 10px; }
.run-planned-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; font-size: 13.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.run-planned-k { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.run-planned-v { font-weight: 620; overflow-wrap: break-word; }
.run-planned-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.run-planned-credit { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 380px) {
  .route-pace { grid-template-columns: 44px 84px minmax(0, 1fr) 58px; gap: 8px; }
}

/* the share sheet */
.run-share-top { display: flex; justify-content: center; margin-top: var(--sp-3); }
.run-formats .seg-btn { min-width: 84px; }
.run-share-block { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.run-share-h { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.run-share-block > .hint-note { margin: -4px 0 2px; }
.run-share-row { width: 100%; padding: 4px 0; }
.run-share-said { margin: 2px 0 0; font-weight: 600; color: var(--ink-2); }
.share-card-stage[aria-busy="true"] .share-card-img { opacity: 0.55; transition: opacity var(--dur-fast) var(--ease-out); }
.run-trim { display: flex; flex-direction: column; gap: 10px; }
.run-trim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "range range"; gap: 2px 12px; align-items: center; }
.run-trim-label { grid-area: label; font-size: 14px; font-weight: 600; }
.run-trim-val { grid-area: val; font-size: 14px; font-weight: 700; color: var(--run); font-variant-numeric: tabular-nums; }
.run-range { grid-area: range; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.run-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--run) 0 var(--p, 0%), var(--seg-bg) var(--p, 0%) 100%); }
.run-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--run); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.run-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--seg-bg); }
.run-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--run); }
.run-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--run); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.run-range:focus-visible { outline: none; }
.run-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--run) 30%, transparent); }
.run-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--run) 30%, transparent); }

/* Home: a run planned for today — its own place in Today's list, drawn again by itself */
.run-today-slot { display: contents; }
.run-today { display: block; width: 100%; text-align: left; color: inherit; }
.run-today .card-body { gap: 4px; }
.run-today .card-title, .run-today .card-meta { display: block; }
.run-today-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.run-today .card-meta { font-variant-numeric: tabular-nums; }

/* the calendar: a planned run's chip and its row */
.cal-chip .chip-ic { width: 11px; height: 11px; color: var(--wc); flex: none; }
.cal-chip.missed .chip-ic { opacity: 0.45; }
.run-occ .day-occ-name { white-space: normal; overflow-wrap: break-word; }

@media (max-width: 380px) {
  .run-targets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .run-targets > :first-child { grid-column: 1 / -1; }
  .run-split { grid-template-columns: 26px minmax(0, 1fr) 44px 44px; }
  .run-split-hr { display: none; }
  .run-effort { grid-template-columns: minmax(0, 1fr) auto 56px; }
  .run-effort-pace { display: none; }
  .run-done-actions { grid-template-columns: minmax(0, 1fr); }
  /* how far and how long, side by side still: two fields of a width (a plan's three set the distance across) */
  .run-done-fields > :first-child { grid-column: auto; }
  /* Strava's card: Sync now on a line of its own, under its logo and its state */
  .run-strava-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "state" "sync"; }
  .run-strava-head > .btn { justify-self: start; margin-top: 2px; }
}
@media (max-width: 319px) {
  .run-head-actions { flex-wrap: wrap; justify-content: flex-start; }
  .run-plan-row { gap: 10px; padding: 10px 12px; }
  .run-plan-row + .run-plan-row::before { left: 12px; }
  .run-row { gap: 10px; padding: 10px 12px; }
  .run-thumb { width: 44px; height: 44px; }
  .run-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-targets { grid-template-columns: minmax(0, 1fr); }
  .run-week-big { font-size: 28px; }
}