/* LUMA - the workout screen (Layer 4)
   Sheet 6 of 9. Source order decides the cascade - see the link tags in luma.html. */

/* ============================================================
   LAYER 4 — WORKOUT
   ============================================================ */

/* ---------- 1. Section header ---------- */
.workout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  margin-bottom: 18px;
  gap: 10px;
}

.workout-header .day-topbar-left { min-width: 0; }

#tab-workout .day-stack { padding-bottom: 24px; }

/* A single Georgian run inside an otherwise-numeric string. The reps and the
   cardio exercise names mix scripts ("30-45 წთ"), and Inter carries no Georgian
   glyphs — kaWrap() puts only the Georgian half back on the Georgian face. */
.ka-inline { font-family: var(--font-ka); }

/* ---------- 2. Weekly schedule strip ---------- */
.schedule-strip {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.schedule-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: default;
  /* Read-only until edit mode: a stray tap must not silently rewrite the week. */
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out);
}

.schedule-card.editing .schedule-day {
  pointer-events: auto;
  cursor: pointer;
}

.schedule-card.editing .schedule-strip {
  outline: 1px dashed var(--lime);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.schedule-day:active { transform: scale(0.94); }

.schedule-day.today {
  border-color: var(--lime);
  background: var(--lime-dim);
}

.schedule-day.rest     { opacity: 0.5; }
.schedule-day.gym      { border-color: var(--teal); }
.schedule-day.cardio   { border-color: var(--amber); }
.schedule-day.recovery { border-color: var(--text-3); }

/* Today wins the border in every case — it is the one pill she looks for. */
.schedule-day.today.gym,
.schedule-day.today.cardio,
.schedule-day.today.recovery { border-color: var(--lime); }

.schedule-day-dow {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
}

.schedule-day.today .schedule-day-dow { color: var(--lime); }

.schedule-day-icon {
  font-size: 14px;
  line-height: 1;
}

.schedule-day-label {
  font-family: var(--font-ka);
  font-size: 8px;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- 3. Circuit selector ---------- */
.circuit-selector-card {
  cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}

.circuit-selector-card:active { transform: scale(0.99); }
.circuit-selector-card:hover { border-color: var(--border-2); }

.circuit-selector-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.circuit-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
}

.circuit-info { min-width: 0; }

.circuit-name {
  font-family: var(--font-ka);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
}

.circuit-meta {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.circuit-chev {
  font-family: var(--font-num);
  font-size: 22px;
  color: var(--text-3);
  margin-left: auto;
  flex: 0 0 auto;
}

.circuit-progress-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.circuit-progress-label {
  font-family: var(--font-ka);
  font-size: 11px;
  color: var(--text-3);
}

.circuit-progress-val {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-2);
}

/* ---------- Bottom sheet (circuit picker · warmup) ---------- */
.bottom-sheet {
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUpSheet var(--dur-slow) var(--ease-spring) both;
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  margin: 12px auto 0;
}

.bottom-sheet-title {
  font-family: var(--font-ka);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  padding: 16px 16px 8px;
}

/* ---- The account card behind the header initials (2026-09-15) ---- */
.acc-sheet-email {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  padding: 0 16px;
  word-break: break-all;
}
.acc-sheet-state {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 600;
  color: var(--lime);
  padding: 6px 16px 0;
}
.acc-sheet-note {
  font-family: var(--font-ka);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
  padding: 10px 16px 0;
}
.acc-sheet-foot { padding: 18px 16px 0; }

.bottom-sheet-sub {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  padding: 0 16px 8px;
}

.circuit-picker-list { padding: 4px 16px; }

/* ---------- Free-choice workout sheet (Layer 7) ----------
   The rows reuse .exercise-item so they inherit the .exercise-check tick and its
   spring for free. Two of that class's .done styles have to be undone here: in a
   picker, .done means "chosen", not "finished", so the name must not go grey with
   a line through it and the photo must not dim. */
.free-workout-btn {
  margin-bottom: 12px;
  font-family: var(--font-ka);
}

.free-count {
  font-family: var(--font-ka);
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
  padding: 0 16px 8px;
}

/* .bottom-sheet is itself the scroller and has no sticky footer, so the list gets
   its own box and the start button stays put below it. */
.free-scroll {
  max-height: 52dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
  border-top: 1px solid var(--border);
}

.free-section-title {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 14px 0 4px;
}

.free-footer {
  padding: 12px 16px 0;
  border-top: 1px solid var(--border);
}

.free-pick-item {
  border-radius: var(--radius-sm);
  padding-left: 6px;
  padding-right: 6px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.free-pick-item.done {
  background: var(--lime-dim);
  box-shadow: inset 0 0 0 1px var(--lime);
}

/* .exercise-item.done styles a FINISHED movement — greyed, struck through, photo
   dimmed. In a picker .done means "chosen", so those three have to be undone.
   The class is repeated to out-specify the original, which is defined later in
   the file and would otherwise win on source order at equal specificity. */
.exercise-item.free-pick-item.done .exercise-name {
  color: var(--text-1);
  text-decoration: none;
}

.exercise-item.free-pick-item.done .ex-thumb img { filter: none; }

/* Cardio rows carry an emoji instead of a photo; the box keeps the row height
   identical to a movement row so the two sections read as one list. */
.free-thumb-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--surface-2);
}

.circuit-picker-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.circuit-picker-item:last-child { border-bottom: none; }
.circuit-picker-item:active { opacity: 0.7; }
.circuit-picker-item.active .circuit-picker-name { color: var(--lime); }

.circuit-picker-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}

.circuit-picker-text { flex: 1; min-width: 0; }

.circuit-picker-name {
  font-family: var(--font-ka);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  transition: color var(--dur-mid) var(--ease-out);
}

.circuit-picker-meta {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 1px;
}

/* ---------- 4. Warmup ---------- */
.warmup-btn {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
  font-family: var(--font-ka);
}

.warmup-btn:active { transform: scale(0.99); }
.warmup-btn.complete { border-color: var(--lime); }
/* .warmup-btn.complete .warmup-status moved below .warmup-status (2026-09-24) */

.warmup-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.warmup-icon { font-size: 20px; flex: 0 0 auto; }

.warmup-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  text-align: left;
}

.warmup-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
  text-align: left;
}

/* 2026-09-24 — the status is a solid lime pill, not coloured text: Giorgi could
   not tell დაიწყე was a button. The whole row is still the tap target. Done
   fills it lime; in progress (2 / 6) keeps the soft tint. */
.warmup-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--lime);
  flex: 0 0 auto;
  min-width: 84px;
  padding: 9px 16px;
  text-align: center;
  background: rgba(var(--lime-rgb), 0.14);
  border: 1px solid rgba(var(--lime-rgb), 0.32);
  border-radius: 12px;
  transition: background var(--dur-fast) var(--ease-out);
}
.warmup-btn:active .warmup-status { background: rgba(var(--lime-rgb), 0.24); }
.warmup-btn.complete .warmup-status {
  background: var(--lime);
  border-color: var(--lime);
  color: #0A0A0C;
}

.warmup-sheet-list { padding: 4px 16px; }

.warmup-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.warmup-sheet-item:last-child { border-bottom: none; }
.warmup-sheet-item:active { opacity: 0.7; }

.warmup-sheet-info { flex: 1; min-width: 0; }

.warmup-sheet-name {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  transition: color var(--dur-mid) var(--ease-out);
}

.warmup-sheet-reps {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.warmup-sheet-item.done .warmup-sheet-name {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
}

/* ---------- 5. Exercise list ---------- */
.exercise-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.exercise-item:last-child { border-bottom: none; }
.exercise-item:active { opacity: 0.7; }

.exercise-item.done .exercise-name {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
}

.exercise-item.done .exercise-check,
.warmup-sheet-item.done .exercise-check {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 8px var(--lime-glow);
}

.exercise-item.done .exercise-check svg,
.warmup-sheet-item.done .exercise-check svg {
  opacity: 1;
  transform: scale(1);
}

.exercise-num {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  width: 20px;
  flex: 0 0 auto;
  text-align: center;
  transition: color var(--dur-mid) var(--ease-out);
}

.exercise-item.done .exercise-num { color: var(--lime); }

.exercise-info { flex: 1; min-width: 0; }

.exercise-name {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  transition: color var(--dur-mid) var(--ease-out);
}

.exercise-detail {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.exercise-reps {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
  flex: 0 0 auto;
  white-space: nowrap;
}

.exercise-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background var(--dur-mid) var(--ease-spring),
              border-color var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-spring);
}

.exercise-check svg {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-mid) var(--ease-spring),
              transform var(--dur-mid) var(--ease-spring);
}

/* ---------- Movement photo tiles ----------
   One 400x400 WebP per movement, inlined as a data URI. Every tile degrades to
   the plain numbered square when a movement has no photo, so a missing key is a
   gap in the grid's richness, never a broken layout. */
.ex-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Putki's set mixes bright studio cutouts with dim gym shots; a touch of
     dimming settles both onto the dark card instead of glaring off it. */
  filter: brightness(0.92) saturate(1.05);
  transition: filter var(--dur-mid) var(--ease-out);
}

.exercise-item.done .ex-thumb img,
.warmup-sheet-item.done .ex-thumb img { filter: brightness(0.45) saturate(0.6); }

/* Index badge — corner pill over a photo, centred digit without one. */
.ex-thumb-num {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  transition: color var(--dur-mid) var(--ease-out);
}

.ex-thumb.has-img .ex-thumb-num {
  position: absolute;
  left: 3px;
  bottom: 3px;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--text-1);
}

.exercise-item.done .ex-thumb-num { color: var(--lime); }

/* The stored photo is already a square crop, so the modal hero must stay square.
   Clamping its height while covering would crop it a second time and take the
   heads off the standing figures. */
.exercise-modal-photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  margin: 0 auto 14px;
  filter: brightness(0.94);
}

/* Sets and rest, under the reps tag in the modal. */
.exercise-modal-meta {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
}

/* Circuit tiles carry a photo instead of an emoji. */
.circuit-icon-wrap img,
.circuit-picker-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) saturate(1.05);
}

.circuit-icon-wrap,
.circuit-picker-icon { overflow: hidden; }

/* Program glyphs — the picker rows and the history-strip marks. The selector
   card carries the same glyph as its picker row, so the two always agree.
   There is no blanket `svg {}` rule in this file (every host class supplies its
   own paint — see .icon-18), so the fill has to be declared here. */
.circuit-picker-icon,
.circuit-icon-wrap { color: var(--text-1); }

.circuit-icon-wrap .wk-glyph,
.circuit-picker-icon .wk-glyph,
.wk-day-mark .wk-glyph {
  display: block;
  fill: currentColor;
  stroke: none;
}

/* Mirrors Putki's .s-opt.active .o-ico. Free now the tile is currentColor —
   a cropped photo could not carry the accent. */
.circuit-picker-item.active .circuit-picker-icon {
  color: var(--lime);
  background: var(--lime-dim);
}

/* The mark only ever renders a glyph on a done day, and .wk-day.done is a
   lime-dim chip — the inherited --text-3 would all but vanish on it. Follows
   .wk-day.done .wk-day-dow. */
.wk-day-mark { display: flex; align-items: center; justify-content: center; }
.wk-day.done .wk-day-mark { color: var(--lime); }

/* ---------- 6. Finish button ---------- */
#finish-workout-btn:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: default;
  box-shadow: none;
}

#finish-workout-btn:disabled:active { transform: none; }

.btn-done {
  background: var(--surface-2);
  color: var(--lime);
  border: 1px solid var(--lime);
}

/* ---------- 7. Exercise detail modal ---------- */
.exercise-modal-sheet {
  width: 100%;
  max-width: 480px;
  margin: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: popIn var(--dur-slow) var(--ease-spring) both;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.exercise-modal-header {
  display: flex;
  justify-content: flex-end;
  padding: 12px 12px 0;
}

.exercise-modal-header .btn-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-1);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-modal-body {
  padding: 8px 24px 32px;
  text-align: center;
}

.exercise-modal-icon { font-size: 48px; margin-bottom: 12px; }

.exercise-modal-name {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-1);
}

.exercise-modal-detail {
  font-family: var(--font-ka);
  font-size: 14px;
  color: var(--text-2);
  margin-top: 10px;
}

.exercise-modal-cue-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 20px;
  text-align: left;
}

.exercise-modal-cue-label {
  font-family: var(--font-ka);
  font-size: 10px;
  font-weight: 600;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.exercise-modal-cue {
  font-family: var(--font-ka);
  font-size: 15px;
  color: var(--text-1);
  line-height: 1.5;
}

/* ---------- 8. Cardio library ---------- */
/* Folded by default (2026-09-23). The body opens with the grid-rows trick so
   the height animates to whatever the four sports measure, never a guessed px. */
/* A grid, not the header's flex row: ten sports' icons beside the title
   collided with it at 375px, so they sit on a line of their own under it. */
.cardio-lib-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 8px;
  cursor: pointer;
  margin-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.cardio-lib-head .section-title { grid-column: 1; grid-row: 1; min-width: 0; }

/* 2026-09-24 — the peek runs the FULL width of the card (under the chevron too)
   and every sport sits in its own round tile, spread evenly: Giorgi found the
   old left-packed line of bare 15px emoji "unfinished". One column per sport,
   however many CARDIO_LIBRARY holds. */
.cardio-lib-peek {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.cardio-lib-peek span {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 38px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
#cardio-library-section.open .cardio-lib-peek { display: none; }

.cardio-lib-chev {
  grid-column: 2;
  grid-row: 1;   /* 2026-09-24: row 1 only — the peek now runs under it */
  align-self: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  transition: transform var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
.cardio-lib-chev svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#cardio-library-section.open .cardio-lib-chev { transform: rotate(180deg); color: var(--lime); }

.cardio-lib-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}
#cardio-library-section.open .cardio-lib-body { grid-template-rows: 1fr; }
.cardio-lib-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
#cardio-library-section.open .cardio-lib-inner { opacity: 1; }
#cardio-library-section.open #cardio-library-list { padding-top: 6px; }

.cardio-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.cardio-item:last-child { border-bottom: none; }

.cardio-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cardio-item-icon { font-size: 20px; flex: 0 0 auto; }

.cardio-item-name {
  font-family: var(--font-ka);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
}

.cardio-item-rec {
  font-family: var(--font-ka);
  font-size: 11px;
  color: var(--teal);
  font-weight: 600;
  text-align: right;
  flex: 0 0 auto;
}

.cardio-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cardio-tag {
  font-family: var(--font-ka);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
}

/* Layer 10 — the cost line, above the tags. --font-num because it is a number
   sentence with a Georgian unit in it, which is what .num is for (rule 3). */
.cardio-item-burn {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-work);
  margin-bottom: 8px;
}

.cardio-item-why {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ---------- 9. Workout history strip ---------- */
.wk-strip-wrap {
  margin: 12px calc(-1 * var(--pad)) 0;
}

.wk-day {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.wk-day.done { border-color: var(--lime); background: var(--lime-dim); }
.wk-day.today { border-color: var(--border-2); }
.wk-day.done.today { border-color: var(--lime); }

.wk-day-dow {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
}

.wk-day.done .wk-day-dow { color: var(--lime); }

.wk-day-dom {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}

.wk-day-mark {
  font-size: 12px;
  line-height: 1;
  height: 14px;
  color: var(--text-3);
}

.workout-empty {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0 2px;
}

/* ---------- Full workout-history page ----------
   The strip only reaches back 14 days and its chips were decorative. This is the
   whole history: a month grid, that month's statistics and every past session,
   each repeatable onto today. The overlay shell copies .inbody-detail-sheet —
   including its max-height, see the bug note there. */

.wk-day.done { cursor: pointer; }

.wk-hist-more {
  width: 100%;
  margin-top: 12px;
  padding: 9px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ka);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.wk-hist-more:active { background: var(--surface-3); color: var(--text-1); }

.wk-hist-more svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wk-hist-sheet {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100dvh;
  max-height: 100dvh;      /* see .inbody-detail-sheet — without it nothing scrolls */
  display: flex;
  flex-direction: column;
  animation: pageIn var(--dur-page) var(--ease-out) both;   /* 2026-09-24: slides in from the right */
}

.wk-hist-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wk-hist-header .btn-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-1);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wk-hist-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ka);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
}

.wk-hist-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px var(--pad) 40px;
}

.wk-hist-section { margin-bottom: 20px; }

/* Month bar */
.wkcal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.wkcal-month {
  flex: 1;
  text-align: center;
  font-family: var(--font-ka);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}

.wkcal-nav {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}

.wkcal-nav svg {
  width: 15px;
  height: 15px;
  stroke: var(--text-2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wkcal-nav:disabled { opacity: 0.3; cursor: default; }

/* Month grid — Monday-first, matching weekPlan.days */
.wkcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.wkcal-dow {
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
  padding-bottom: 2px;
}

.wkcal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.wkcal-cell.blank { background: none; border-color: transparent; }
.wkcal-cell.future { opacity: 0.35; }
.wkcal-cell.today { border-color: var(--border-2); }
.wkcal-cell.done {
  border-color: var(--lime);
  background: var(--lime-dim);
  cursor: pointer;
}
.wkcal-cell.done.today { border-color: var(--lime); }

.wkcal-dom {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}

.wkcal-mark {
  height: 14px;
  line-height: 1;
  color: var(--text-3);
}

.wkcal-cell.done .wkcal-mark { color: var(--lime); }

/* ---------- Score history (2026-09-13) ----------
   The day cell reuses .wkcal-cell for the grid geometry (aspect-ratio, radius,
   .blank/.future/.today) but deliberately NOT its .done treatment: the ring is
   what carries the score here, so a lime fill behind it would say the same
   thing twice and would drown a partial day in the same colour as a perfect
   one. The cell is stripped back to nothing but the ring and the date. */
.sc-cell {
  position: relative;
  background: none;
  border-color: transparent;
}
.sc-cell[data-sc-day] { cursor: pointer; }

/* inset so the round cap cannot clip against the cell edge */
.sc-ring {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
/* Its own names, never .ring-fill: updateScoreRing() scopes its query inside
   #score-ring, and .ring-fill must stay unambiguous in the document. */
.sc-ring-track { stroke: var(--surface-3); }
.sc-ring-fill  { stroke: var(--lime); }

.sc-cell-dom {
  position: relative;        /* above the absolutely positioned ring */
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  line-height: 1;
}
.sc-cell.has-rec  .sc-cell-dom { color: var(--text-2); }
.sc-cell.is-full  .sc-cell-dom { color: var(--text-1); }
.sc-cell.today    .sc-cell-dom { color: var(--lime); }

/* The cross-month trend reuses the plank history bar strip wholesale; only the
   colour and the month labels under it are new. */
.sc-trend .ph-bar { background: var(--lime); }
.sc-trend-labels {
  display: flex;
  gap: 3px;
  padding: 0 2px;
  margin-top: 6px;
}
.sc-trend-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: var(--font-ka);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
}

.sc-day-total {
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 800;
  color: var(--text-1);
  text-align: center;
  margin-bottom: 14px;
}
.sc-day-total-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 4px;
}

/* ---------- Recipe view (2026-09-13) ---------- */
.rv-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin-bottom: 14px;
}
.rv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-name {
  font-family: var(--font-ka);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
  margin-bottom: 8px;
}
.rv-macros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rv-chip {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-ka);
  font-size: 11px;
  color: var(--text-2);
}
.rv-chip.is-kcal { border-color: var(--lime); color: var(--lime); }

.rv-section {
  font-family: var(--font-ka);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0 0 8px;
}
.rv-ing-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ka);
  font-size: 13px;
  color: var(--text-1);
}
.rv-ing-row:last-child { border-bottom: none; }
.rv-ing-amt { flex: 0 0 auto; color: var(--text-2); }

/* Numbered, because a cooking step without its order is not an instruction. */
.rv-step {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  font-family: var(--font-ka);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-1);
}
.rv-step-n {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime-dim);
  color: var(--lime);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Progress photos (2026-09-13) ---------- */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pp-cell {
  position: relative;
  aspect-ratio: 3 / 4;          /* a standing photo, not a square crop */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.pp-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pp-cell-date {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 5px 4px;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  /* the photo underneath is whatever colour it is — the date needs its own
     ground or it vanishes on a light shirt */
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}
.pp-cell.is-pending { opacity: 0.55; }
.pp-cell-badge {
  position: absolute;
  top: 4px; left: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--amber);
  color: #1a1a1a;
  font-family: var(--font-ka);
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;      /* two lines here covers a third of the thumbnail */
}

/* full-screen viewer */
.pp-view {
  position: fixed;
  inset: 0;
  z-index: 200;                  /* above every sheet and overlay */
  background: #000;
  display: flex;
  flex-direction: column;
}
.pp-view-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) var(--pad) 10px;
}
/* The viewer is on black, so .btn-icon's surface and border - tuned for the
   app's dark grey - vanish, and the icon paths had no stroke rule at all here,
   which rendered the trash as a filled block. Both buttons get their own. */
.pp-view-top .btn-icon {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
.pp-view-top .btn-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pp-view-date {
  flex: 1 1 auto;
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.pp-view-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pp-view-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.pp-view-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--pad) calc(env(safe-area-inset-bottom) + 14px);
}
.pp-view-nav {
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  padding: 8px 16px;
  cursor: pointer;
}
.pp-view-nav:disabled { opacity: 0.25; }
.pp-view-count {
  font-family: var(--font-num);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* Statistics */
.wk-stat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.wk-stat-total {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 700;
  color: var(--lime);
}

.wk-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  margin-bottom: 6px;
}

.wk-stat-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ka);
  font-size: 13px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-stat-n {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}

.wk-stat-note {
  font-family: var(--font-ka);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
}

/* .wk-glyph carries no base rule — it is scoped to its three original hosts, and
   the Putki glyphs are solid fills, so an unscoped one renders black on black. */
.wkcal-mark .wk-glyph,
.wk-stat-row .wk-glyph,
.wk-sess-row .wk-glyph,
.wk-daysheet-head .wk-glyph {
  display: block;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.wk-stat-row .wk-glyph { color: var(--text-2); }

/* The steps icon is a stroke path, not one of the solid program glyphs. */
.wk-stat-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: var(--text-2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Session list */
.wk-sess-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}

.wk-sess-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.wk-sess-name {
  font-family: var(--font-ka);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-sess-meta {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

.wk-sess-repeat {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  cursor: pointer;
}

.wk-sess-repeat svg {
  width: 15px;
  height: 15px;
  stroke: var(--lime);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wk-sess-repeat:active { background: var(--lime-dim); }

.wk-hist-empty {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0;
}

/* Day-detail bottom sheet */
.wk-daysheet-block { margin-bottom: 16px; }

.wk-daysheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.wk-daysheet-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ka);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}

.wk-daysheet-ex {
  font-family: var(--font-ka);
  font-size: 12px;
  color: var(--text-2);
  padding: 5px 0 5px 18px;
  position: relative;
}

.wk-daysheet-ex::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
}

.wk-daysheet-ex.off { color: var(--text-3); }
.wk-daysheet-ex.off::before { background: var(--text-3); }

/* 2026-09-24 — the way out, the mirror of pageIn. Here, after both sheet rules,
   so it wins over their own animation at equal specificity. */
.page-leaving .wk-hist-sheet,
.page-leaving .inbody-detail-sheet {
  animation: pageOut var(--dur-page-out) var(--ease-in-out) both;
}