/* Training: the app's own stylesheet. kit.css (loaded first) holds the shared
   design and every token; this file sets the accent and the components that
   exist only here: the exercise card, the set row, the rest bar.

   Accent: teal green, the one family colour not taken (orange, wine red, blue,
   violet). css_contrast_test.go checks every pair. */

:root {
  --accent: #0b6e63;
  --accent-strong: #0b6e63;
  --accent-contrast: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #12806f;
    --accent-strong: #4fd1bd;
    --accent-contrast: #ffffff;
  }
}

/* ---- day header ---- */

.day-head { margin-bottom: var(--space-3); }
.day-week { margin: 0; color: var(--text-muted); font-size: var(--font-sm); }
.day-focus { margin: var(--space-1) 0 0; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.sec-head { margin: 0 0 var(--space-2); font-size: var(--font-base); }

.page-action, .start .btn, .finish .btn { width: 100%; }
.start, .finish { margin: var(--space-2) 0 var(--space-3); }

.notice.day-changed { margin-bottom: var(--space-3); }

.rules { margin: 0 0 var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); padding: 0 var(--space-3); }
.rules summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.rules ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.rules li { margin-bottom: var(--space-1); }

/* ---- exercise card ---- */

.ex { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); scroll-margin-top: var(--space-3); }
.ex-name { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.ex-name a { color: var(--accent-strong); text-decoration: none; }
.ex-muscle { display: inline; margin-left: var(--space-2); font-size: var(--font-sm); font-weight: 400; color: var(--text-muted); }
.ex-line { margin: 0; font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.ex-muscles { color: var(--text-muted); margin-top: 0; }
/* The coaching cue: two lines, the whole cue is the "more" toggle (details). */
.ex-cue { margin: 2px 0 0; }
.ex-cue summary { list-style: none; cursor: pointer; color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; }
.ex-cue summary::-webkit-details-marker { display: none; }
.ex-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ex-cue[open] .ex-note { display: block; }
.ex-more::after { content: " more"; color: var(--accent-strong); font-weight: 600; }
.ex-cue[open] .ex-more::after { content: " less"; }

/* ---- set row ----
   Pending: a small meta line, then kg, reps, tick. Done: one line with a
   deliberate "Edit" button. A thin divider between sets, no panel. */

.sets { margin-top: var(--space-1); }

.set-row { padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.set-row:first-child { border-top: 0; }
.set-meta { margin: 0 0 4px; font-size: 0.8rem; line-height: 1.3; color: var(--text-muted); }

.set-fields { display: grid; grid-template-columns: 1fr 1fr 56px; gap: var(--space-2); align-items: center; }
.set-fields { column-gap: var(--space-3); }

.set-field { position: relative; display: block; }
.set-input {
  width: 100%;
  min-height: 46px;
  padding: 0 40px 0 var(--space-3);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.set-input::placeholder { color: var(--text-muted); font-weight: 400; }
.set-unit { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--text-muted); pointer-events: none; }

.set-tick {
  min-height: 48px; min-width: 56px; width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.set-tick .icon { width: 26px; height: 26px; }

.set-doneline, .edit-toggle { display: none; }
.set-doneline { align-items: center; gap: var(--space-3); min-height: 44px; }
.set-doneline-n { color: var(--text-muted); font-size: var(--font-sm); min-width: 3.2em; }
.set-doneline-v { flex: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.set-doneline-ok { width: 22px; height: 22px; color: var(--accent-strong); flex: none; }
.set-edit, .set-undo {
  min-height: 44px; min-width: 56px; padding: 0 var(--space-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; font: inherit; font-size: var(--font-sm); font-weight: 600;
  color: var(--accent-strong); text-decoration: underline; cursor: pointer;
}
.set-undo { display: none; }
.edit-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Done: collapse to the one line; Edit reopens the fields with Undo beside. */
.set-row.done .set-doneline { display: flex; }
.set-row.done .set-meta, .set-row.done .set-fields { display: none; }
.set-row.done .edit-toggle:checked ~ .set-doneline { display: none; }
.set-row.done .edit-toggle:checked ~ .set-meta { display: block; }
.set-row.done .edit-toggle:checked ~ .set-fields { display: grid; }
.set-row.done .edit-toggle:checked ~ .set-fields .set-undo { display: inline-flex; grid-column: 1 / -1; justify-self: end; }
.edit-toggle:focus-visible ~ .set-doneline .set-edit { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Wider than a phone: the same, just roomier. */
@media (min-width: 560px) {
  .set-fields { grid-template-columns: 1fr 1fr 64px; }
}

/* ---- rest bar: flush on top of the bottom nav ---- */

.restbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  z-index: 20;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--accent);
  color: var(--accent-contrast);
}
.restbar[hidden] { display: none; }
.rest-label { font-size: var(--font-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.rest-time { flex: 1; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.restbar.rest-over { animation: rest-pulse 0.8s ease-in-out 3; }
.rest-btn {
  min-width: 52px; min-height: 44px;
  border: 1px solid color-mix(in oklab, var(--accent-contrast) 60%, transparent);
  border-radius: var(--radius-md);
  background: transparent; color: inherit; font: inherit; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rest-btn .icon { width: 20px; height: 20px; }
.rest-x { margin-left: var(--space-3); }
body.has-restbar { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--restbar-h, 60px) + 16px); }
@keyframes rest-pulse { 50% { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .restbar.rest-over { animation: none; } }

/* ---- programme ---- */

.prog-name { color: var(--text-muted); margin-top: 0; }
.week { margin-bottom: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.week > summary { min-height: 48px; padding: 0 var(--space-3); display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; }
.week-phase { color: var(--text-muted); font-weight: 400; font-size: var(--font-sm); }
.days { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.day-link { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); color: var(--text); text-decoration: none; }
.day-tick { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; }
.day-link.done .day-tick { background: var(--accent); border-color: var(--accent-strong); color: var(--accent-contrast); }
.day-tick .icon { width: 16px; height: 16px; }
.day-name { flex: 1; font-weight: 600; }
.day-sub { display: block; font-weight: 400; font-size: var(--font-sm); color: var(--text-muted); }
.day-state { font-size: var(--font-sm); color: var(--accent-strong); }

/* ---- exercise page ---- */

.howto { white-space: pre-line; margin: 0; }
.links { list-style: none; margin: 0; padding: 0; }
.links a { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--accent-strong); }
.links .icon { width: 20px; height: 20px; flex: none; }

/* ---- trainer: lists, builder, edit forms ----
   Every tap target is 44px or more with 12px between neighbours; the
   destructive buttons sit under "More" or inside a confirm, never beside Save. */

.rows { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.row-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 56px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
}
.row-main { flex: 1; min-width: 0; display: block; }
.row-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.row-sub { display: block; font-size: var(--font-sm); color: var(--text-muted); }
.row-end { flex: none; font-size: var(--font-sm); color: var(--text-muted); text-align: right; max-width: 40%; }
.tag {
  display: inline-block; padding: 2px var(--space-2); border-radius: 999px;
  background: var(--surface-sunken); color: var(--accent-strong); font-size: var(--font-sm); font-weight: 600;
}

.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.card.stack, .card.tool, .card.newprog { padding: var(--space-3); }
.tool, .newprog { margin-bottom: var(--space-3); }
.tool > summary, .newprog > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.tool[open] > summary, .newprog[open] > summary { margin-bottom: var(--space-3); }
.newprog > summary { justify-content: center; }
.week > .inline-add { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.add-week { margin-top: var(--space-4); }
.pair-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-input, select.field-input { min-height: 44px; }

.choice { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.choice-opt {
  display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.choice-opt input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.choice-opt small { display: block; color: var(--text-muted); font-size: var(--font-sm); }

.note-repeat { margin: 0 0 var(--space-3); font-size: var(--font-sm); }

/* day builder: each exercise is a wide link with up/down beside it */
.ex-edit { display: flex; align-items: center; gap: var(--space-3); }
.ex-edit-link { flex: 1; min-width: 0; display: block; min-height: 44px; color: inherit; text-decoration: none; padding: var(--space-1) 0; }
.ex-edit-link .ex-name { display: block; }
.ex-edit-link .ex-line { display: block; margin-top: 2px; font-weight: 400; color: var(--text-muted); }
.moves { display: flex; gap: var(--space-3); flex: none; }
.moves form { margin: 0; }
.icon-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.icon-btn:disabled { opacity: 0.35; cursor: default; }

/* last results */
.last-results { padding: var(--space-3); margin-bottom: var(--space-3); }
.last-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.last-list li { display: flex; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.last-when { flex: none; min-width: 3.6em; color: var(--text-muted); }
.last-sets { font-weight: 600; overflow-wrap: anywhere; }

/* set rows in the edit form */
.set-edit-row { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; min-width: 0; }
.set-edit-row legend { padding: 0 var(--space-2); font-weight: 600; }
.set-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.set-edit-grid .field { min-width: 0; }

/* destructive: apart from Save, behind a confirm */
.btn-danger { border: 2px solid var(--danger); color: var(--danger); background: transparent; min-height: 44px; }
.danger-zone { margin-top: var(--space-2); }
.danger-zone > summary { list-style: none; cursor: pointer; justify-content: center; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone[open] > summary { margin-bottom: var(--space-3); }
.danger-zone .btn-danger { width: 100%; }
.apart { margin-top: var(--space-5); }
.stack > .field, .set-edit-grid > .field, .inline-add > .field, .pair-fields > .field { margin: 0; }

/* ---- feedback: comment, pain flag, finish form, the trainer's reading ----
   Pain uses the kit's danger pair (danger on danger-bg, as .error does) and
   always says "pain" in words. The flag sits at the foot of the card, apart
   from the set ticks, and its undo is a full-size button. */

.ex-fb { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); display: grid; gap: var(--space-2); }

.fb-comment > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--space-2);
  color: var(--accent-strong); font-size: var(--font-sm); font-weight: 600;
}
.fb-comment > summary::-webkit-details-marker { display: none; }
.fb-comment > summary .icon { width: 20px; height: 20px; flex: none; }
.fb-comment[open] > summary { margin-bottom: var(--space-1); }
.fb-comment .btn, .pain-box .btn { width: 100%; }
.fb-said { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.fb-said .muted { display: block; font-size: var(--font-sm); }

.pain-flag { margin-top: var(--space-3); }
.pain-btn {
  width: 100%; min-height: 44px; padding: 0 var(--space-3);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--font-sm); font-weight: 600;
  background: transparent; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-md); cursor: pointer;
}
.pain-btn .icon { width: 18px; height: 18px; flex: none; }

.pain-box { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); }
.pain-box .field-label, .pain-box .field-hint { color: var(--danger); }
.pain-head { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.pain-head .icon { width: 20px; height: 20px; flex: none; }
.pain-rule, .pain-note { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.pain-undo { margin: 0; }
.btn-link {
  min-height: 44px; min-width: 44px; padding: 0 var(--space-2); border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--font-sm); font-weight: 600; text-decoration: underline; color: inherit;
}
.pain-undo .btn-link { width: 100%; }
.pain-tag {
  display: inline-flex; align-items: center; gap: var(--space-1); margin-top: 4px; padding: 2px var(--space-2);
  border-radius: 999px; background: var(--danger-bg); color: var(--danger); font-size: var(--font-sm); font-weight: 700;
}
.pain-tag .icon { width: 14px; height: 14px; flex: none; }
.row-link.has-pain { border-color: var(--danger); }

/* finish form: five big choices, then an optional note */
.finish-form { padding: var(--space-3); display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.rating { border: 0; margin: 0; padding: 0; min-width: 0; }
.rating legend { padding: 0; margin-bottom: var(--space-2); }
.rating-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.rating-opt { position: relative; display: block; }
.rating-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-tile {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  font-size: 1.3rem; font-weight: 700; color: var(--text);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
}
.rating-opt input:checked + .rating-tile { background: var(--accent); border-color: var(--accent-strong); color: var(--accent-contrast); }
.rating-opt input:focus-visible + .rating-tile { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.rating-ends { display: flex; justify-content: space-between; margin: var(--space-1) 0 0; font-size: var(--font-sm); color: var(--text-muted); }
.finish-form .field { margin: 0; }
.finish-form .btn { width: 100%; }
.session-note { margin: 0 0 var(--space-3); overflow-wrap: anywhere; white-space: pre-line; }
.session-note .muted { display: block; font-size: var(--font-sm); }

/* trainer: unread count, the verdict, what was logged against the target */
.count {
  display: inline-block; min-width: 1.6em; padding: 0 var(--space-2); border-radius: 999px; text-align: center;
  background: var(--accent); color: var(--accent-contrast); font-size: var(--font-sm); font-weight: 700;
}
.row-end .tag + .row-rating { margin-left: var(--space-2); }
.row-rating { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.row-end { display: flex; align-items: center; }
.verdict { padding: var(--space-3); margin-bottom: var(--space-2); display: grid; gap: var(--space-2); }
.verdict p { margin: 0; }
.verdict-n { font-size: 1.6rem; font-weight: 700; color: var(--accent-strong); }
.verdict-note { overflow-wrap: anywhere; white-space: pre-line; }
.ex-pain { border-color: var(--danger); }
.ex-pain .pain-box { margin: var(--space-2) 0; }
.did { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.did-row { display: grid; grid-template-columns: 3.4em 1fr auto; gap: var(--space-2); padding: var(--space-1) 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.did-row:first-child { border-top: 0; }
.did-n { color: var(--text-muted); font-size: var(--font-sm); }
.did-target { color: var(--text-muted); font-size: var(--font-sm); }
.did-v { font-weight: 600; }
.did-row.skipped .did-v { font-weight: 400; color: var(--text-muted); }
.edit-next { display: flex; margin-top: var(--space-3); text-align: center; text-decoration: none; }
.fb-said + .edit-next, .did + .edit-next { margin-top: var(--space-3); }

/* ---- exercise page steps, library ---- */

.steps { margin: 0; padding-left: 1.6em; display: grid; gap: var(--space-3); }
.steps li { padding-left: var(--space-1); }
.link-text { display: block; overflow-wrap: anywhere; }
.link-text small { display: block; font-size: var(--font-sm); color: var(--text-muted); }
.links li + li { border-top: 1px solid var(--border); }
.links a { min-height: 56px; }
.library-link { margin-bottom: var(--space-3); }
.link-edit { padding: var(--space-3); margin-bottom: var(--space-3); }
.link-tools { display: flex; align-items: flex-start; gap: var(--space-3); }
.link-tools .moves { padding-top: var(--space-1); }
.link-tools .danger-zone { flex: 1; margin-top: 0; min-width: 0; }
.ex-card { padding: var(--space-3); margin-bottom: var(--space-3); }
.ex-card .sec-head { margin-top: 0; }
.ex-card .links a { min-height: 56px; }