/* ==========================================================================
   screens.css — layout that belongs to exactly one screen.
   ========================================================================== */

/* ---------------------------------------------------------------- TODAY -- */

.today__greet { margin-bottom: var(--s-1); }
.today__date  { margin-bottom: var(--s-6); }

.today__meter {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-6);
}
.today__countdown { display: grid; gap: var(--s-1); }
.today__countdown .hero { line-height: 1; }

.daycard {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  width: 100%;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
}
.daycard:last-child { border-bottom: 0; }
.daycard:active { background: var(--c-surface-2); }
.daycard__idx {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  color: var(--c-bone-2);
}
.daycard__idx svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
                    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.daycard--done .daycard__idx { background: var(--c-brass-wash); border-color: var(--c-brass-dim);
                               color: var(--c-brass); }
.daycard__title { font-weight: 600; }
.daycard__meta  { font-size: var(--t-caption); color: var(--c-bone-3); margin-top: 1px; }

.today__weight {
  display: flex; align-items: baseline; gap: var(--s-3);
}
.today__weight .display { font-family: var(--font-num); }

/* --------------------------------------------------------- WORKOUT RUNNER -- */

.runner { padding-left: 26px; }              /* clears the spine */
@media (max-width: 380px) { .runner { padding-left: 0; } }

.runner__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--safe-t);
  margin-bottom: var(--s-5);
}
.runner__close { width: 40px; height: 40px; display: grid; place-items: center;
                 color: var(--c-bone-3); }
.runner__close svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
                     stroke-width: 1.8; stroke-linecap: round; }
.runner__block { text-align: center; line-height: 1.25; }

.ex__num { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.ex__name { line-height: 1.15; margin-bottom: var(--s-2); }
.ex__figure { margin: var(--s-4) 0 var(--s-5); }

/* Prescription strip — sets / reps / rest / RPE target, always the same order */
.presc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
}
.presc__cell { padding: var(--s-3) var(--s-2); text-align: center;
               border-right: 1px solid var(--c-line-soft); }
.presc__cell:last-child { border-right: 0; }
.presc__v { font-family: var(--font-num); font-size: var(--t-lead); font-weight: 660;
            font-variant-numeric: tabular-nums; line-height: 1.2; }
.presc__k { font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
            color: var(--c-bone-3); font-weight: 600; margin-top: 3px; }

/* Set pips */
.sets { display: flex; gap: var(--s-2); }
.sets__pip {
  flex: 1; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: var(--c-surface-2);
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: var(--t-small); font-weight: 640;
  color: var(--c-bone-3);
}
.sets__pip--done    { background: var(--c-brass-wash); border-color: var(--c-brass-dim);
                      color: var(--c-brass); }
.sets__pip--current { border-color: var(--c-brass); color: var(--c-bone); }


.cuelist li { position: relative; padding-left: var(--s-4); margin-top: var(--s-2);
              font-size: var(--t-small); line-height: 1.45; }
.cuelist li::before { content: ""; position: absolute; left: 2px; top: 8px;
                      width: 5px; height: 5px; border-radius: 50%; background: var(--c-brass-dim); }
.cuelist--avoid li::before { background: var(--c-clay); }

/* Previous performance strip */
.prev {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--t-small);
}
.prev__v { font-family: var(--font-num); font-weight: 660; color: var(--c-bone);
           font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- REST ----- */

.rest {
  min-height: 74vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s-5);
}
.rest__clock {
  font-family: var(--font-num);
  font-size: var(--t-mega);
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rest__ring { position: relative; }
.rest__next { max-width: 34ch; }

/* Water break gets its own full-bleed treatment. It is an instruction from the
   playbook, not a pause: "Sit down. Drink. Do not pick up your phone." */
.waterbreak {
  min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s-4);
}
.waterbreak__mark { width: 44px; height: 44px; color: var(--c-brass); }
.waterbreak__mark svg { width: 100%; height: 100%; stroke: currentColor; fill: none;
                        stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------- BLOCK / SUMMARY -- */

.blockcard { text-align: center; padding: var(--s-10) var(--s-5); }
.blockcard__n { font-family: var(--font-num); font-size: var(--t-hero); font-weight: 300;
                color: var(--c-brass-dim); line-height: 1; margin-bottom: var(--s-3); }

.summary__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.summary__stat { background: var(--c-surface); border: 1px solid var(--c-line-soft);
                 border-radius: var(--r-md); padding: var(--s-4); }
.summary__v { font-family: var(--font-num); font-size: var(--t-title); font-weight: 660;
              font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- LIBRARY ---- */

.searchbar { position: relative; margin-bottom: var(--s-4); }
.searchbar input { padding-left: 44px; }
.searchbar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
                 width: 18px; height: 18px; stroke: var(--c-bone-3); fill: none;
                 stroke-width: 1.8; stroke-linecap: round; }

.exgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.extile {
  background: var(--c-surface); border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md); padding: var(--s-3); text-align: left;
}
.extile:active { background: var(--c-surface-2); }
.extile .figure { margin-bottom: var(--s-3); background: transparent; border: 0; }
.extile__name { font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.extile__meta { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--c-bone-3); margin-top: 3px; font-weight: 600; }

/* ------------------------------------------------------------- SETTINGS --- */

.setrow { display: flex; align-items: center; justify-content: space-between;
          gap: var(--s-4); min-height: 56px; padding: var(--s-2) var(--s-4);
          border-bottom: 1px solid var(--c-line-soft); }
.setrow:last-child { border-bottom: 0; }
.setrow input.input, .setrow select.input { max-width: 190px; min-height: 44px;
          text-align: right; font-size: var(--t-body); }

.bells { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bell {
  min-width: 62px; min-height: 48px; padding: 0 var(--s-3);
  border-radius: var(--r-sm); border: 1px solid var(--c-line);
  background: var(--c-surface-2); color: var(--c-bone-2);
  font-family: var(--font-num); font-weight: 640; font-variant-numeric: tabular-nums;
}
.bell[aria-pressed="true"] { background: var(--c-brass); border-color: var(--c-brass);
                             color: #14110A; }

/* --------------------------------------------------- SELF-PACED EXERCISE ---
   Warm-ups, mobility, stretching and neck work stay on one page. The pips are
   a read-only progress display, not another thing to tap: the single primary
   button ticks one hold and stays put. */

.selfpace {
  text-align: center;
  padding: var(--s-5);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.selfpace__presc {
  font-family: var(--font-num);
  font-size: var(--t-display);
  font-weight: 660;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.selfpace__pips {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin: var(--s-4) 0 var(--s-2);
}
.selfpace__pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--c-line);
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.selfpace__pip--done { background: var(--c-brass); border-color: var(--c-brass); }

/* ----------------------------------------------------------- JUMP OUTLINE ---
   Reached by tapping the progress counter. Without it, "go back and fix set two
   of the deadlift" is thirty taps on a back button. */

.runner__jump {
  min-width: 44px; min-height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--c-bone-2);
}
.runner__jump:active { background: var(--c-surface-2); }

.outline__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--c-line);
}
.outline__dot--done    { background: var(--c-brass-dim); border-color: var(--c-brass-dim); }
.outline__dot--current { background: var(--c-brass); border-color: var(--c-brass);
                         box-shadow: 0 0 0 3px var(--c-brass-wash); }

/* ------------------------------------------------------- PERSONAL RECORDS ---
   A record deserves more than a row in a list, and less than a celebration. */

.pr {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-brass-dim);
  border-radius: var(--r-md);
  background: var(--c-brass-wash);
}
.pr__mark { flex: none; width: 26px; height: 26px; color: var(--c-brass); }
.pr__mark svg { width: 100%; height: 100%; stroke: currentColor; fill: none;
                stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pr__value { font-family: var(--font-num); font-size: var(--t-title); font-weight: 680;
             color: var(--c-brass); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- HISTORY DRILL-IN ---
   Sets expand under their exercise. A completed bodyweight set shows a tick,
   never a dash — a dash reads as missing data. */

.setline {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-line-soft);
}
.setline:first-child { border-top: 0; }
.setline__n { font-family: var(--font-num); font-size: var(--t-caption);
              color: var(--c-bone-3); font-variant-numeric: tabular-nums; }
.setline__done { width: 18px; height: 18px; color: var(--c-sage); }
.setline__done svg { width: 100%; height: 100%; stroke: currentColor; fill: none;
                     stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.setline__load { font-family: var(--font-num); font-weight: 640; font-size: var(--t-small);
                 font-variant-numeric: tabular-nums; }
.setline__rpe { font-family: var(--font-num); font-size: var(--t-caption);
                color: var(--c-brass); font-variant-numeric: tabular-nums;
                min-width: 44px; text-align: right; }
.setline__note { grid-column: 2 / -1; font-size: var(--t-caption); color: var(--c-bone-2);
                 padding-bottom: var(--s-2); }
.setline--skipped .setline__load { color: var(--c-clay); }


/* ------------------------------------------------------------ RUNNER NAV ---
   Exit is permanent and always leftmost, so it never moves during a session.
   Back appears beside it when there is somewhere to go back to, and its slot is
   held open by a spacer when there isn't — so neither control ever shifts.
   Previously Exit was replaced by Back after the first exercise, which left no
   way out of a session from the middle of it. */

.runner__nav { display: flex; align-items: center; gap: 2px; flex: none; }
.runner__spacer { display: block; width: 40px; height: 40px; }

/* ---------------------------------------------------------- INTAKE COUNTER --
   Water and coffee. Minus / value / plus, so an accidental tap can be undone.
   56px targets, matching the weight stepper. */

.counter { display: flex; align-items: stretch; gap: var(--s-2); }
.counter__btn {
  flex: none; width: 60px; min-height: 56px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-bone);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  display: grid; place-items: center;
}
.counter__btn:active { background: var(--c-surface-3); }
.counter__btn[disabled] { opacity: .3; pointer-events: none; }
.counter__value {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  padding: var(--s-3) var(--s-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.counter__num {
  font-family: var(--font-num); font-size: var(--t-display); font-weight: 640;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.counter__unit { font-size: var(--t-small); color: var(--c-bone-3); }

/* ------------------------------------------------------- THIS WEEK CARD ----
   The current week is what you act on; older weeks are for review. */

.thisweek { text-align: left; }
.thisweek__range { margin-top: 2px; }
.thisweek__count {
  display: flex; align-items: baseline; gap: 6px;
  margin: var(--s-4) 0 var(--s-3);
}
.thisweek__n { font-family: var(--font-num); font-size: var(--t-hero); font-weight: 700;
               letter-spacing: -0.03em; line-height: 1; }

/* ------------------------------------------------------------ SUNDAY REVIEW --
   The approval diff. Changes are grouped by movement, because the goblet squat
   legitimately appears in three sessions at three prescriptions and listing those
   flat reads as a bug rather than as programming. */

.reviewcard { width: 100%; text-align: left; margin-bottom: var(--s-4); }
.reviewcard .chev { color: var(--c-brass); }

.chgroup { margin-bottom: var(--s-4); }
.chgroup__name {
  font-size: var(--t-lead); font-weight: 620; letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-2);
}

.chrow {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-4);
}
.chrow + .chrow { margin-top: var(--s-2); }
.chrow--rejected { opacity: .62; }

.chrow__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }

.chrow__presc {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: var(--s-2);
  align-items: center;
}
.chrow__side { min-width: 0; }
.chrow__arrow { color: var(--c-bone-3); display: grid; place-items: center; }
.chrow__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
                    stroke-width: 2; stroke-linecap: round; }
.chrow__v {
  font-size: var(--t-lead); font-weight: 660; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.chrow__v--next { color: var(--c-brass); }

.chrow__reason {
  font-size: var(--t-caption); color: var(--c-bone-2); line-height: 1.45;
  margin-top: var(--s-3);
}
.chrow__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chrow__acts .btn { flex: 1 1 auto; min-width: 84px; }
.chrow__acts .btn--bare { flex: 0 0 auto; min-width: 0; }

.review__foot { margin-top: var(--s-8); }

/* ================================================== ACCORDION, V2.2.1 =======
   A collapsed accordion is a list row, not a card.

   It renders at 48px because min-height puts it there: that is the smallest
   comfortable touch target, and it is what keeps the row inside the 48-56px
   band. There is no `height`, no `aspect-ratio` and no vertical padding on the
   trigger, so the row can never grow beyond its line box plus that floor.

   What actually made these rows enormous was not the CSS here — it was an inline
   SVG with no width, height or fill, which browsers render at 300x150 and paint
   solid black. Fixed at source in base.css. */

.details {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.details + .details { margin-top: 6px; }

.details__summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;          /* touch floor only — no height, no padding block */
  padding: 0 var(--s-4);
  text-align: left;
  line-height: 1.3;
}
.details__title {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-bone);
  flex: 1 1 auto;
  min-width: 0;
}
.details__meta {
  font-size: var(--t-caption);
  color: var(--c-bone-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
  flex: 0 1 auto;
}
.details__summary .chev {
  transition: transform var(--d-fast) var(--e-out);
}
.details[data-open="true"] .details__summary .chev { transform: rotate(90deg); }
.details[data-open="true"] .details__title { color: var(--c-brass); }

/* Natural height, and exactly zero when closed. */
.details__body { padding: 0 var(--s-4) var(--s-3); }
.details[data-open="false"] .details__body { display: none; }
.details__body > :first-child { margin-top: 0; }

/* Media exists only once the row has been opened, so nothing is reserved. */
.details__media { margin-bottom: var(--s-3); }
.details__media:empty { display: none; }
.details__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  display: block;
}

/* History drill-in and the previous-weeks list both use the shared component
   now, so their bespoke shells are gone. Only the set lines remain. */

/* The Begin session button is not an accordion and stays prominent, but its
   play glyph is an icon, not artwork. */
.btn .ico { width: 16px; height: 16px; }

/* A YouTube Short is filmed portrait; a 16:9 frame crops it to a stamp with
   black bars either side. The frame follows the source instead, capped so it
   cannot push the rest of the exercise screen off-view. */
.details__video--portrait {
  aspect-ratio: 9 / 16;
  max-height: 62vh;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
}