/* Fit My Day styles. */

[hidden] {
  display: none !important;
}
body {
  margin: 0;
}
img {
  max-width: 100%;
}
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Layout: one narrow column. Three questions on top, the plan below as a timed session sheet. */
:root {
  /* One look on purpose: black ground, yellow for everything you can tap or should notice. */
  --bg: #0f0f10;
  --panel: #1a1a1c;
  --ink: #f3f2ec;
  --muted: #a09f97;
  --line: #303033;
  --ctl-line: #6a6a70;
  --danger: #ff7a66;
  --ok: #7bd389;
  --accent: #f2c230;
  --on-accent: #161307;
  --tape: #f2c230;
  --on-tape: #161307;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  padding-inline: 16px;
  padding-block: 20px calc(110px + env(safe-area-inset-bottom, 0px));
}
.wrap {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 span {
  display: inline-block;
  background: var(--tape);
  color: var(--on-tape);
  padding: 0.06em 0.18em 0.02em;
  margin-top: 0.14em;
}
.lede {
  color: var(--muted);
  margin: 8px 0 0;
}
form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
legend {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0;
  margin-bottom: 8px;
}
select {
  width: 100%;
  min-height: 46px;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  /* the phone's own grey menu style is replaced, so it matches the app's boxes, with a small arrow on the right */
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a09f97' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center / 18px 18px;
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  padding: 10px 40px 10px 12px;
}
select:focus-visible {
  outline: 3px solid var(--tape);
  outline-offset: 2px;
}
/* Section tabs live in a bar along the bottom of the screen, where thumbs reach. */
html {
  scroll-padding-bottom: 96px;
} /* keep focused controls clear of the fixed tab bar */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1.5px solid var(--line);
}
.welcome-mode .tabs {
  display: none;
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.welcome {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}
.welcome h1 {
  font-size: 3.2rem;
}
.lede.big {
  font-size: 1.1rem;
  color: var(--ink);
}
.points {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
}
.points li {
  display: list-item;
  border: 0;
  padding: 2px 0;
  margin: 4px 0;
}
#historyView .stats {
  display: none;
} /* the tiles above already say this */
.welcome .link {
  align-self: center;
}
.done .where {
  margin: 0 0 4px;
}
.donebig {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.donebig b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 0.85;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.donebig span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.donenote {
  margin: 0;
  font-weight: 600;
}
.donelist li {
  justify-content: flex-start;
}
.donelist li.skipped b {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}
.done .link {
  align-self: center;
}
/* Until time and energy are picked, the plan area just asks for them. */
.sheet.waiting .total,
.sheet.waiting .block,
.sheet.waiting #fill,
.sheet.waiting .actions,
.sheet.waiting #kitNote,
.sheet.waiting #logStatus {
  display: none;
}
.sheet:not(.waiting) .pickfirst {
  display: none;
}
.pickfirst {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  padding: 18px 8px;
}
.quick {
  position: relative;
}
#quick p {
  padding-right: 40px;
}
#quick button.close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  border: 0;
}
#quick button.close:focus-visible {
  outline: 3px solid var(--tape);
  outline-offset: -3px;
}
.planhead {
  scroll-margin-top: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.sheet.waiting .planhead,
.running .planhead {
  display: none;
}
.qe {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.qe button {
  font-size: 1rem;
  padding: 10px 6px;
}
.quick {
  flex-wrap: wrap;
}
.quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
}
.quick p {
  margin: 0;
  min-width: 0;
}
.quick b {
  display: block;
}
.quick span {
  color: var(--muted);
  font-size: 0.9rem;
}
.quick button {
  flex: none;
  padding: 10px 22px;
}
button.tab {
  background: none;
  color: var(--muted);
  font-size: 1rem;
  padding: 12px 8px;
}
button.tab[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
#workoutView,
.profile {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
#profileForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.phead {
  display: flex;
  gap: 14px;
  align-items: center;
}
.phead img {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  flex: none;
}
.phead h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 4px;
  text-wrap: balance;
}
.pstats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pstats div {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pstats b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pstats span {
  color: var(--muted);
  font-size: 0.875rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field > span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.field input {
  font: inherit;
  padding: 10px 12px;
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}
.field input:focus-visible {
  outline: 3px solid var(--tape);
  outline-offset: 2px;
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 12px;
}
.checks label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
}
.checks input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
}
fieldset .note {
  margin-top: 8px;
}
legend .opt {
  font-family: var(--body);
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 6px;
}
.toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
}
.toggle input {
  accent-color: var(--accent);
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
}
.toggle span {
  font-weight: 600;
}
.toggle small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.875rem;
}
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.seg label {
  display: flex;
  min-width: 0;
}
.seg span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 4px;
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  background: var(--panel);
  font-weight: 500;
  cursor: pointer;
}
.seg input {
  position: absolute;
  opacity: 0;
}
@media (max-width: 360px) {
  .seg {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
}
.seg input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.seg input:focus-visible + span {
  outline: 3px solid var(--tape);
  outline-offset: 2px;
}

.sheet {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 14px;
}
.clock {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.clock small {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-left: 4px;
}
.pace {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.block h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.block h2 em {
  font-style: normal;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.block p {
  margin: 0;
  color: var(--muted);
}
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px dashed var(--line);
}
li:first-child {
  border-top: 0;
}
li b {
  font-weight: 600;
  min-width: 0;
}
li i {
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
button {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--tape);
  color: var(--on-tape);
  border: 0;
  border-radius: 6px;
  padding: 12px 16px;
  cursor: pointer;
}
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Workout mode: once started, the questions and the full plan step aside for one exercise at a time. */
.running #picker,
.running #quick,
.running .lede,
.running .sheet .block,
.running .sheet .total,
.running #fill,
.running #shuffle {
  display: none;
}
#mode {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.where {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.now {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.dose {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--accent);
  margin: 0;
}
#mode .fig {
  flex: none;
  width: 100%;
  max-width: 250px;
  align-self: center;
}
.cue {
  margin: 0;
  color: var(--muted);
}
button.big {
  font-size: 1.5rem;
  padding: 16px;
  background: var(--accent);
  color: var(--on-accent);
}
#mode .link {
  align-self: center;
}
.setlist li {
  gap: 10px;
}
#mode .setlist .fig {
  flex: 0 0 64px;
  width: 64px;
  max-width: 64px;
  align-self: auto;
}
.warmnote {
  border-left: 4px solid var(--tape);
  padding-left: 10px;
}
.restnum {
  font-family: var(--display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* During a workout, Finish is the quiet option so the main button stands out. */
.running #logBtn:not(.primary) {
  background: none;
  color: var(--ink);
  border: 1.5px solid var(--ctl-line);
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* Signed-in badge, top right on every screen: photo or initial, plus "Signed in". Opens the account menu. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
}
.badge img,
.badge #navInitial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
}
.badge #navInitial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}
.badge #navInitial:empty {
  display: none;
}
.badge:hover {
  border-color: var(--ctl-line);
}
.welcome-mode .badge {
  display: none;
}
.navlink {
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.acct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.acct p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.acct button {
  padding: 10px 22px; /* same size as the Sign in buttons on History and the finish screen */
}
.ptitle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 8px;
}
/* Same shape and lettering as the app's other buttons, white with Google's G */
.gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  background: #ffffff;
  color: #1f1f1f;
  border: 1.5px solid var(--ctl-line);
}
.glogo {
  width: 20px;
  height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: 1.5px solid var(--line);
}
#emailForm,
#codeForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#codeForm[hidden] {
  display: none;
}
#code {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.25em;
  text-align: center;
}
#codeForm .link {
  align-self: center;
}
#delAcctBtn {
  color: var(--danger);
  padding-left: 0;
}
.foot {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  letter-spacing: 0.04em;
}
[tabindex="-1"]:focus {
  outline: none;
}
/* (i) buttons: tap to show a short explanation underneath */
/* (i) help icon: a drawn i in a thin ring, same grey as the label and about its capital-letter height; yellow when open. */
button.info {
  position: relative;
  display: inline-flex;
  width: 17px;
  height: 17px;
  padding: 0;
  margin-left: 5px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  vertical-align: -3px;
}
button.info svg {
  width: 100%;
  height: 100%;
  display: block;
}
button.info .ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
button.info .glyph {
  fill: currentColor;
}
button.info::after {
  content: "";
  position: absolute;
  inset: -10px;
} /* a bigger area to tap */
button.info:hover {
  color: var(--ink);
}
button.info[aria-expanded="true"] {
  color: var(--accent);
}
button.info[aria-expanded="true"] .ring {
  fill: var(--accent);
}
button.info[aria-expanded="true"] .glyph {
  fill: var(--on-accent);
}
button.info:focus-visible {
  outline: 3px solid var(--tape);
  outline-offset: 2px;
}
.tip {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--ink);
}
.pstats + .tip {
  margin-top: 10px;
}
.danger-zone {
  border-top: 1.5px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.danger-zone #resetBtn {
  color: var(--danger);
  padding-left: 0;
}
.dz-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.confirm {
  border: 1.5px solid var(--danger);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confirm p {
  margin: 0;
}
button.danger {
  background: var(--danger);
  color: #1a0a07;
}
button.quiet {
  background: none;
  color: var(--ink);
  border: 1.5px solid var(--ctl-line);
}
.timer-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
}
button.icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.timer.paused #clock {
  color: var(--muted);
}
.timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#clock {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timer small {
  color: var(--muted);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.actions button {
  flex: 1 1 200px;
}
button.primary {
  background: var(--accent);
  color: var(--on-accent);
}
button:disabled {
  opacity: 0.6;
  cursor: default;
}
button.link {
  background: none;
  color: var(--muted);
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  padding: 4px;
}
.log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.log h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.stats {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
li {
  align-items: center;
  flex-wrap: wrap;
}
li b {
  flex: 1 1 0;
}
.howto {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 2px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.howto > div {
  flex: 1 1 180px;
  min-width: 0;
}
.fig {
  flex: 0 0 138px;
  width: 138px;
  max-width: 100%;
  background: var(--bg);
  border-radius: 6px;
}
.fig .body {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig .head {
  fill: var(--bg);
}
.fig .prop {
  stroke: var(--line);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.fig .prop.thin {
  stroke: var(--muted);
  stroke-width: 1.2;
}
.fig .kit {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.howto a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.rowact {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
li.skipped b {
  text-decoration: line-through;
  color: var(--muted);
}
li small {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}
.note:empty {
  display: none;
}
.debug {
  margin-top: 24px;
  border-top: 1.5px solid var(--line);
  padding-top: 12px;
}
.debug pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.7rem;
  max-height: 50vh;
  overflow: auto;
  background: var(--panel);
  padding: 8px;
  user-select: all;
}
.notice {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.95rem;
}
.rmbox,
.rmask {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.rmask button:first-child {
  color: var(--danger);
}
.note {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

/* During a workout the clock bar sticks to the top of the screen, so time and Pause are always in reach. */
.running #timer {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  margin: -20px -20px 0;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1.5px solid var(--line);
  border-radius: 8px 8px 0 0;
}
.running #timer {
  flex-wrap: nowrap;
}
.running #timer > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.running #clock {
  font-size: 2.2rem;
}
.running .timer small {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* 3 · 2 · 1 before the clock starts: one big number in the middle of the screen. */
.countdown {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgb(15 15 16 / 0.97);
  text-align: center;
}
.cd-label {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.cd-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: min(48vw, 16rem);
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cd-num.tick {
  animation: cd-pop 1s ease-out;
}
@keyframes cd-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(1.06);
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-num.tick {
    animation: none;
  }
}
.cd-next {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  max-width: 32ch;
}
.cd-actions {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}
/* Changing sets and reps: tapping "5 sets × 12 reps" turns it into two small number boxes for that exercise. */
.doseedit {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 2px 0 4px;
}
.doseline {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.95rem;
}
input.num {
  width: 2.9em;
  height: 44px;
  padding: 0 6px;
  text-align: center;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  -moz-appearance: textfield;
  appearance: textfield;
}
input.num::-webkit-inner-spin-button,
input.num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.num:focus {
  outline: none;
  border-color: var(--accent);
}
input.num.edited {
  color: var(--accent);
}
/* The amount in a plan row: looks like text with a dotted underline, so it reads as part of the line but invites a tap. */
button.amt {
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 2px;
  margin: -10px 0;
  border-radius: 3px;
  text-decoration: underline dotted;
  white-space: nowrap;
  text-underline-offset: 3px;
}
button.amt.edited {
  color: var(--accent);
}
/* Swap: a list of exercises that fit today opens under the exercise, closest matches first. */
.swappick {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 4px 0 6px;
  padding: 10px 12px 6px;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.swaphead {
  margin: 0;
  font-weight: 600;
}
.swaphead:focus {
  outline: none;
}
.swapnone {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.swapgroup {
  margin: 8px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.swaplist {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.swaplist li {
  padding: 0;
}
button.pick {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  text-align: left;
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 4px;
}
button.pick b {
  font-weight: 500;
  flex: 1 1 auto;
}
button.pick small {
  display: inline;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
@media (hover: hover) {
  button.pick:hover b {
    text-decoration: underline;
  }
}
.swapfoot {
  display: flex;
  gap: 16px;
  margin-top: 2px;
}
/* "Surprise me" is the first choice in the swap list, in yellow with a shuffle icon. */
button.pick.lucky b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
}

/* "Muscles to hit": a List tab of chips and a Body tab with a muscle figure, sharing the same choice. */
#focusRow > legend {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}
.focustabs {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1.5px solid var(--ctl-line);
  border-radius: 8px;
}
.focustabs button {
  font-size: 0.9rem;
  padding: 4px 12px;
  min-height: 32px;
  background: none;
  color: var(--muted);
}
.focustabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}
/* Muscles: two even rows of four, lined up with the time buttons above. */
.chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.chips label {
  display: flex;
  min-width: 0;
}
.chips span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 6px 2px;
  font-size: 0.95rem;
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  background: var(--panel);
  font-weight: 500;
  cursor: pointer;
}
.chips input {
  position: absolute;
  opacity: 0;
}
.chips input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.chips input:focus-visible + span {
  outline: 3px solid var(--tape);
  outline-offset: 2px;
}
.focusnow {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.focusnow b {
  color: var(--ink);
  font-weight: 600;
}
.figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 360px;
  margin: 0 auto;
}
.fig {
  text-align: center;
}
.fig svg {
  display: block;
  width: 100%;
  height: auto;
}
.fig small {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.fig .skin {
  fill: #232327;
  stroke: #55555c;
  stroke-width: 1;
}
.fig .m {
  fill: #3a3a40;
  stroke: #55555c;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.12s;
}
.fig .m.on {
  fill: var(--accent);
  stroke: #b98f10;
}
.fig .m:focus {
  outline: none;
}
.fig .m:focus-visible {
  outline: none;
  stroke: var(--tape);
  stroke-width: 3;
}
@media (hover: hover) {
  .fig .m:not(.on):hover {
    fill: #4a4a52;
  }
}
.fig .fibre {
  fill: none;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1;
  pointer-events: none;
}
.bodyfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.bodyfoot .hint {
  margin: 0;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Account menu under the badge: who's signed in, My profile, Sign out. */
.acctwrap {
  position: relative;
}
.acctmenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--panel);
  border: 1.5px solid var(--ctl-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.acctmenu .who {
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.acctmenu .who b {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.acctmenu .who span {
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
button.menuitem {
  min-height: 44px;
  padding: 8px 10px;
  margin-top: 4px;
  text-align: left;
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}
@media (hover: hover) {
  button.menuitem:hover {
    background: var(--bg);
  }
}
.welcome-mode .acctmenu {
  display: none;
}
/* "Still there?" is a question, not a warning */
.confirm.idle {
  border-color: var(--accent);
}
.confirm .actions {
  flex-wrap: wrap;
}
.foot a {
  color: var(--muted);
}

/* ---- Workout screen: one card per exercise; the open one lists its sets ---- */
.wk-prog {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.wk-prog span {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wk-ex {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.wk-ex.open {
  border-color: var(--accent);
}
.wk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 56px;
}
.wk-head.tap {
  cursor: pointer;
}
.wk-head.tap:focus-visible {
  outline: 3px solid var(--tape);
  outline-offset: 2px;
  border-radius: 10px;
}
.wk-fig {
  flex: none;
  width: 48px;
  height: 36px;
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  display: grid;
  place-items: center;
}
#mode .wk-fig .fig {
  width: 48px;
  height: 36px;
  max-width: none;
}
.wk-name {
  flex: 1;
  min-width: 0;
}
.wk-name b {
  display: block;
  font-weight: 600;
}
.wk-name small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}
.wk-state {
  flex: none;
}
.wk-dots {
  display: flex;
  gap: 4px;
}
.wk-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--ctl-line);
}
.wk-dots i.on {
  background: var(--accent);
  border-color: var(--accent);
}
.wk-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ok);
  color: #0b1f0f;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.wk-ex.done .wk-name small {
  color: var(--ink);
}
.wk-ex.skipped .wk-name b {
  text-decoration: line-through;
  color: var(--muted);
}
#mode .wk-state .link,
#mode .wk-acts .link {
  align-self: auto;
}
.wk-sets {
  padding: 0 12px 12px;
}
.wk-plan {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.wk-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 84px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 4px 0;
  border-top: 1px dashed var(--line);
}
.wk-n {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.wk-row.cur .wk-n {
  color: var(--accent);
}
.wk-row.later .wk-v {
  color: var(--muted);
}
.wk-ok {
  color: var(--ok);
  font-weight: 700;
  text-align: center;
}
.wk-in {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 0;
}
.wk-in .num {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 44px;
  text-align: center;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--ctl-line);
  border-radius: 6px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.wk-in .num::-webkit-inner-spin-button,
.wk-in .num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wk-in .num:focus {
  outline: none;
  border-color: var(--accent);
}
button.wk-tick {
  height: 44px;
  padding: 0 6px;
  font-size: 1rem;
  white-space: nowrap;
  background: var(--accent);
  color: var(--on-accent);
}
.wk-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}
.wk-rest {
  margin: 0 12px 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #252317;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wk-rest span {
  flex: 1;
  color: var(--muted);
  font-size: 0.9rem;
}
.wk-rest .restnum {
  font-size: 1.8rem;
}
.wk-cool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.donelist small.did {
  color: var(--ink);
}
.donelist .up {
  color: var(--ok);
  font-size: 0.85rem;
}
.wk-restbtns {
  display: flex;
  gap: 12px;
}
.wk-rest > span:first-child {
  flex: 1 1 auto;
}
.wk-row.did .wk-v {
  grid-column: 2 / 4;
}
.wk-row.later .wk-v {
  grid-column: 2 / -1;
}
li.notdone b {
  color: var(--muted);
}
/* A logged set is a button: tap to correct it */
button.wk-did {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 4px 0;
  text-align: left;
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}
.wk-row.did button.wk-did .wk-v {
  grid-column: auto;
  color: var(--ink);
}
.wk-edit {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
}
.wk-fixacts {
  display: flex;
  gap: 16px;
  padding: 0 0 6px 56px;
}
/* One chip per set when the sets differ: "12 × 40" */
.chipsline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px 70px;
}
.donelist .chipsline {
  padding: 6px 0 0;
}
.setchip {
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

/* Energy and sore spots: two compact dropdowns on one line */
.picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pickrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pickopt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-basis: 100%;
}
/* small pill buttons: "Energy  Normal ▾" */
button.pickbtn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 40px;
  padding: 8px 30px 8px 12px;
  position: relative;
  text-align: left;
  background: var(--panel);
  color: var(--ink);
  border: 1.5px solid var(--ctl-line);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
}
button.pickbtn::after {
  content: "\25BE";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.8rem;
}
button.pickbtn[aria-expanded="true"] {
  border-color: var(--ink);
}
button.pickbtn[aria-expanded="true"]::after {
  content: "\25B4";
}
button.pickbtn .pk {
  color: var(--muted);
  font-weight: 500;
}
button.pickbtn b {
  font-weight: 600;
}
/* not picked: shows the default (Normal) in grey */
button.pickbtn.need b {
  color: var(--muted);
  font-weight: 500;
}
.pickpanel {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg);
}
.pickpanel #soreDone {
  margin-top: 8px;
}
/* keep the question's heading inside the open panel instead of cutting into its border */
.pickpanel > legend {
  float: left;
  width: 100%;
  padding: 0;
}
.pickpanel > legend + * {
  clear: both;
}
/* Warm-up and cool-down: a countdown card */
.wk-warm,
.wk-cool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: var(--bg);
}
.wk-cool {
  border-color: var(--line);
}
.wk-cool.over {
  border-color: var(--accent);
}
.warmnum {
  font-size: 3.6rem;
  text-align: left;
}
.wk-cool.over .warmnum {
  font-size: 1.8rem;
}
#mode .wk-warm .link,
#mode .wk-cool .link {
  align-self: flex-start;
}

/* ---- Workout helpers: − / + inside one box per number, "Go" when a rest is over, the sound switch ---- */
/* The set being done: reps and weight side by side, each labelled above, the big Done underneath. */
.wk-row.cur.w,
.wk-row.cur.bw {
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding: 8px 0;
}
.wk-row.cur.w .wk-n,
.wk-row.cur.bw .wk-n,
.wk-row.cur.w button.wk-tick,
.wk-row.cur.bw button.wk-tick {
  grid-column: 1 / -1;
}
.wk-row.cur button.wk-tick {
  height: 48px;
  font-size: 1.15rem;
}
.wk-row.cur .wk-in {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 4px;
}
.wk-row.cur .wk-in > span {
  min-height: 32px; /* as tall as the LB / KG switch beside it, so the two boxes line up */
  display: flex;
  align-items: center;
  padding-left: 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* One rounded box per number: − on the left, the number, + on the right, no lines in between. */
.wk-step {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 48px;
  overflow: hidden;
  background: var(--panel);
  border: 1.5px solid var(--ctl-line);
  border-radius: 12px;
}
.wk-step:focus-within {
  border-color: var(--accent);
}
.wk-in .wk-step .num {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.3rem;
  font-weight: 700;
}
button.step {
  flex: none;
  width: 44px;
  height: 46px;
  padding: 0;
  font-family: var(--body);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  background: none;
  color: var(--muted);
  border: 0;
  border-radius: 0;
}
button.step:active {
  color: var(--accent);
}
button.step:focus-visible {
  outline-offset: -3px;
}

.wk-go {
  margin: 0 12px 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.wk-go b {
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1;
  text-transform: uppercase;
}
/* The bell: alert at the end of a rest. Yellow when on, grey and struck through when off. */
button.bell {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1.5px solid var(--ctl-line);
  border-radius: 999px;
}
button.bell svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.bell.off svg {
  stroke: var(--muted);
}

/* ---- History: open a past workout, see one exercise over time ---- */
.histmain,
.histpage {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.histpage {
  gap: 16px;
}
.histpage .ptitle {
  margin: 0;
  font-size: 2rem;
}
.histpage .note {
  margin-top: -8px;
}
li.histrow {
  align-items: stretch;
  gap: 8px;
}
button.histopen {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 2px 24px 2px 0;
  text-align: left;
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
button.histopen b {
  flex: none;
}
button.histopen .chev {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.5rem;
}
li.histrow .rmbox {
  align-self: center;
}
.pb {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
button.exlink {
  display: inline;
  padding: 0;
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--ctl-line);
  text-underline-offset: 3px;
}
.bestcard {
  padding: 12px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: #252317;
}
.bestcard .pb {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.bestcard ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bestcard li {
  display: block;
  padding: 4px 0;
  border: 0;
}
.bestcard small {
  display: inline;
}
#exStats {
  grid-template-columns: repeat(3, 1fr);
}
#exStats b {
  font-size: 1.5rem;
}
.exchart {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.linechart {
  width: 100%;
  height: auto;
  display: block;
}
.linechart .grid {
  stroke: var(--line);
  stroke-width: 1;
}
.linechart .tick {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 11px;
}
.linechart .trend {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.linechart .pt {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 2;
}
.subhead {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 4px 0 -8px;
}

/* ---- Today: the suggestion from last time ---- */
.suggest {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}
.suggest .link {
  color: var(--accent);
  font-weight: 600;
  padding: 0 2px;
}

/* ---- Results: one card per exercise, the name and plan on the left, what was done big on the right ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.donelist {
  gap: 8px;
}
.donelist li.exrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}
.exmain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.exname {
  font-weight: 600;
  line-height: 1.25;
}
.explan {
  font-size: 0.85rem;
  color: var(--muted);
}
.exres {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.exbig {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exsub {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.exsub .up {
  color: var(--ok);
  font-weight: 600;
}
.extag {
  font-size: 0.8rem;
  color: var(--muted);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.donelist li.exrow .chipsline {
  grid-column: 1 / -1;
  padding: 2px 0 0;
}
.donelist li.exrow.skipped,
.donelist li.exrow.notdone {
  background: none;
  border-style: dashed;
}
.donelist li.exrow.skipped .exname {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}
.donelist li.exrow.notdone .exname {
  color: var(--muted);
}

/* A page inside History: a round back button next to the title */
.pagehead {
  display: flex;
  align-items: center;
  gap: 12px;
}
button.backbtn {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  border: 1.5px solid var(--ctl-line);
}
button.backbtn:active {
  border-color: var(--accent);
}
.pagehead .ptitle {
  font-size: 1.9rem;
  line-height: 1.05;
}

/* ---- Exercise photos (where there is one; other exercises keep their stick figure) ---- */
img.fig.photo {
  display: block;
  object-fit: cover;
  background: var(--bg);
  border-radius: 8px;
}
.howto img.fig.photo,
#mode .howto img.fig.photo {
  flex: 1 1 100%;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 1;
}
.wk-fig {
  width: 56px;
  height: 56px;
}
#mode .wk-fig img.fig.photo {
  width: 56px;
  height: 56px;
  max-width: none;
  border-radius: 6px;
}

/* ---- Exercise by exercise, or rounds: a quieter switch than the questions above (like List / Body) ---- */
.seg.order {
  margin: 10px 0 6px;
}

/* ---- Profile, one question at a time (new users) ---- */
#profileForm.wizard > .q:not(.wizon),
#profileForm.wizard .sumrow,
#profileForm.wizard .qmsg,
#profileForm.wizard > #pSave,
#profileForm.wizard > .sumnote,
.wizhide {
  display: none !important;
}
#profileForm.wizard > .wizon {
  min-height: 160px;
}
.wiznav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wizbar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.wizbar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.wiznav .link {
  align-self: center;
}

/* While the app starts, show nothing below the top bar, so a refresh doesn't flash the Today screen before the
   Welcome (or the screen that was open). If the app's code can't run at all, the page appears after 4 seconds. */
.wrap.booting > section,
.wrap.booting > #workoutView,
.wrap.booting > .tabs {
  animation: fmd-reveal 0s 4s forwards;
  visibility: hidden;
}
@keyframes fmd-reveal {
  to {
    visibility: visible;
  }
}

/* ---- Workout reminders (Profile) ---- */
.remind {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}
.remind .subhead {
  margin: 0;
  color: var(--ink);
}
.chips.days {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.chips.days span {
  min-height: 40px;
  padding: 4px 0;
  font-size: 0.85rem;
}
.remind input[type="time"] {
  max-width: 160px;
}
a.btnlink {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
a.btnlink.quiet {
  color: var(--ink);
  border: 1.5px solid var(--ctl-line);
}
.wiznav .actions button {
  flex: 1 1 0;
}

/* A required answer left empty */
.field span.fielderr {
  color: var(--danger);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.field input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* ---- Profile summary: one row per answer; tap a row to change just that answer (saved as soon as it's picked) ---- */
#profileForm.summary {
  gap: 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
#profileForm.summary > .sumnote {
  order: -1;
  padding: 12px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
#profileForm.summary > #pSave,
#profileForm.summary > #wizNav,
#profileForm.summary .q.na,
#profileForm.summary .q:not(.open) > :not(.sumrow) {
  display: none;
}
#profileForm.summary .q {
  border-top: 1px solid var(--line);
  background: var(--panel);
}
#profileForm.summary .q.open {
  background: #202022;
  box-shadow: inset 3px 0 0 var(--accent);
}
#profileForm.summary .q.open > fieldset,
#profileForm.summary .q.open > label.field {
  padding: 0 14px 6px;
}
#profileForm.summary .q.open > fieldset > legend,
#profileForm.summary .q.open > label.field > span:first-child {
  display: none; /* the row above already names the question */
}
/* the summary lists the answers in the same order the questions were asked */
#profileForm.summary > #pStatus {
  order: 9;
}
#profileForm:not(.summary) > .sumnote {
  display: none;
}
button.sumrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  background: none;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  text-align: left;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
button.sumrow .k {
  flex: none;
  width: 118px;
  color: var(--muted);
  font-size: 0.9rem;
}
button.sumrow .v {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
button.sumrow .chev {
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.15s;
}
button.sumrow[aria-expanded="true"] .chev {
  transform: rotate(90deg);
}
button.sumrow.solo {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
button.sumrow.solo.open {
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}
#remindRow.open + .remind {
  margin-top: -28px;
  border-radius: 0 0 10px 10px;
  border-top: 0;
}
.qmsg {
  display: block;
  padding: 0 14px 10px;
  color: var(--ok);
  font-size: 0.875rem;
  font-weight: 600;
}
.qmsg:empty {
  display: none;
}
/* an open answer keeps a line for "Saved", so the rows below don't jump while a tap lands on them */
#profileForm.summary .q.open .qmsg {
  display: block;
  min-height: calc(0.875rem * 1.5 + 10px);
}
#profileForm .q.unset button.sumrow .v {
  color: var(--accent);
  font-weight: 500;
}
#profileForm .q.optional button.sumrow .v {
  color: var(--muted);
  font-weight: 500;
}
.wizhead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wizhead .note {
  font-weight: 600;
  color: var(--ink);
}
#profileForm.summary > .wizhead {
  display: none;
}
button.sumrow .k small {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.8;
}
a.btnlink[aria-disabled="true"] {
  opacity: 0.6;
}

/* LB / KG beside the weight: tap to switch */
button.unitsw {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  background: none;
  color: var(--accent);
  border: 1.5px solid var(--ctl-line);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
button.unitsw::after {
  content: "⇄";
  color: var(--muted);
  font-size: 0.85rem;
}

/* Sign in at the top: the same yellow button as the other Sign in buttons. Only one Sign in per screen, so it
   steps aside on screens that have their own (Profile, History, the finish screen, and the sign-in screen itself). */
button.navbtn {
  margin-left: auto; /* top right, where the signed-in badge goes */
  font-size: 1rem;
  padding: 6px 14px;
}
.topbar .navbtn + .acctwrap {
  margin-left: -12px; /* signed out the badge is empty: no extra gap on the right */
}
.wrap:has(#profileView:not([hidden])) #navSignin,
.wrap:has(#historyView:not([hidden])) #navSignin,
.wrap:has(#doneView:not([hidden])) #navSignin,
.wrap:has(#signinView:not([hidden])) #navSignin,
.welcome-mode #navSignin {
  display: none;
}

/* Warm-up, rest between sets and cool-down: small dropdowns beside what they change. Yellow once it's their own choice. */
select.mini,
.mini select {
  width: auto;
  min-height: 36px;
  padding: 4px 34px 4px 12px;
  background-position: right 10px center;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
select.mini.set,
.mini select.set {
  border-color: var(--accent);
  color: var(--accent);
}
.block h2.withsel {
  align-items: center;
}
.pace {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pace label.mini {
  justify-content: space-between;
}
select.mini,
.mini select {
  min-width: 150px;
}
.block h2.withsel {
  white-space: nowrap;
}
.timenote {
  margin: 0;
  color: var(--accent);
  font-weight: 600;
}
label.mini {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

#cancelBtn {
  white-space: nowrap; /* "Cancel workout" on one line beside the bell and pause */
}
.timer-ctl {
  gap: 8px;
}
.timer-ctl button.icon {
  flex: none; /* the pause button stays round */
}
@media (max-width: 380px) {
  #cancelBtn {
    white-space: normal; /* small phones: two lines rather than running off the edge */
  }
}

/* History: this week against last week */
.weekvs {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.weekvs h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.weekvs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.weekvs-row div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.weekvs-row span {
  font-size: 0.8rem;
  color: var(--muted);
}
.weekvs-row b {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.weekvs-row small {
  font-size: 0.8rem;
  color: var(--muted);
}
.weekvs-row small.up {
  color: var(--ok);
}