/* ============================================================
   //gym — app layout on top of the INSTRUMENTS design system.
   Only app-specific chrome & view layout live here; every visual
   value comes from tokens.css / components.css. No hard-coded hex.
   ============================================================ */

/* ---- App shell ---------------------------------------------------------- */
.app { min-height: 100dvh; }
.app-main { padding-bottom: calc(72px + var(--safe-bottom)); }
.app-sidebar { display: none; }

/* views: one visible at a time; the router toggles inline display (pageTransition) */

/* generic page scaffolding shared by dashboard / progression / history */
.page { padding: calc(var(--sp-4) + var(--safe-top)) var(--sp-5) var(--sp-6); max-width: 720px; margin: 0 auto; }
.page__head { margin-bottom: var(--sp-4); }
.page__title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.05; margin-top: 2px; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.section-lbl { margin-bottom: var(--sp-3); display: block; }
.muted { color: var(--ink-2); }

/* status line (silk marking + optional trailing mono value) */
.topline { display: flex; align-items: center; justify-content: space-between; }

/* ---- Bottom nav tuning -------------------------------------------------- */
.app-bottomnav .in-navitem { gap: 3px; }

/* ============================================================
   SÉANCE EN COURS — the gesture: log the set
   Full-height column that fits an iPhone SE without page scroll.
   ============================================================ */
.seance {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - 72px - var(--safe-bottom));
  padding: calc(var(--sp-3) + var(--safe-top)) var(--sp-5) var(--sp-4);
  max-width: 560px; margin: 0 auto; width: 100%;
}
.seance__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.seance__mark { color: var(--sig-violet); }
.seance__mark--push { color: var(--live); }
.seance__sub { font-size: 15px; font-weight: 700; margin-top: 2px; }
.seance__clock { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.seance__title { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; margin-top: var(--sp-3); }
.seance__last {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  padding: 6px var(--sp-3); border-radius: var(--r-pill);
  background: var(--recess); border: 1px solid var(--hairline);
}
.seance__last .in-tnum { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }

/* ink display */
.seance__display {
  margin-top: var(--sp-4); border-radius: var(--r-4);
  background: var(--ink); padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.seance__dhead { display: flex; justify-content: space-between; }
.seance__dhead .in-lbl { color: rgba(255,255,255,.5); }
.seance__dvals { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; gap: var(--sp-4); }
.seance .in-odo--xl { font-size: 56px; letter-spacing: -2px; }
.seance .in-odo--xl .in-odo__unit { font-size: 17px; margin: 0 0 8px 6px; }
.seance__reps {
  font-family: var(--font-mono); font-weight: 600; color: var(--live);
  font-size: 56px; letter-spacing: -2px; line-height: .9; font-variant-numeric: tabular-nums;
}
.seance__steps { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.seance__step {
  flex: 1; min-height: 48px; border: none; border-radius: var(--r-2);
  background: rgba(255,255,255,.1); color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-1) var(--ease-spring), background var(--d-1);
  display: flex; align-items: center; justify-content: center;
}
.seance__step:active { transform: scale(.94); background: rgba(255,255,255,.18); }
.seance__step:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash); }

/* pastilles S1–Sn */
.seance__sets { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.seance__pill {
  flex: 1; min-height: 52px; border-radius: var(--r-2);
  background: var(--recess); color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: background var(--d-2) var(--ease-out), color var(--d-2);
}
.seance__pill span { font-family: var(--font-mono); font-weight: 600; }
.seance__pill .pill-idx { font-size: 11px; }
.seance__pill .pill-val { font-size: 12px; font-variant-numeric: tabular-nums; }
.seance__pill.is-done { background: var(--live); color: #fff; }
.seance__pill.is-current { box-shadow: inset 0 0 0 2px var(--live-line); }

.seance__validate { margin-top: var(--sp-4); }
.seance__validate .in-btn { height: 62px; font-size: 18px; font-weight: 800; letter-spacing: .3px; border-radius: var(--r-3); }

.seance__spacer { display: none; }

/* the plan-card is desktop-only chrome */
.plan-card { display: none; }

/* floating rest chrono — fixed above the bottom nav, rises on validate */
.rest-chrono {
  position: fixed; left: var(--sp-5); right: var(--sp-5); z-index: 30;
  bottom: calc(72px + var(--safe-bottom) + var(--sp-2));
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-3);
  background: var(--ink); color: var(--ink-inv); box-shadow: var(--e-3);
  transform: translateY(160%); opacity: 0; pointer-events: none;
  transition: transform var(--d-3) var(--ease-spring), opacity var(--d-3) var(--ease-out);
}
.rest-chrono.is-up { transform: translateY(0); opacity: 1; pointer-events: auto; }
.rest-chrono__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sig-green); flex: none; }
.rest-chrono__lbl { color: rgba(255,255,255,.6); }
.rest-chrono__val { font-family: var(--font-mono); font-size: 30px; font-weight: 600; margin-left: auto; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.rest-chrono__btn {
  width: 44px; height: 44px; flex: none; border: none; border-radius: 50%;
  background: var(--live); color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rest-chrono__btn .in-glyph { width: 20px; height: 20px; }

/* end-of-session screen */
.seance-done { padding: calc(var(--sp-6) + var(--safe-top)) var(--sp-5) var(--sp-6); max-width: 480px; margin: 0 auto; text-align: center; }
.seance-done__glyph { font-family: var(--font-mono); font-size: 44px; font-weight: 700; color: var(--live-line); transform: skewX(-12deg); }
.seance-done__title { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin-top: var(--sp-3); }
.seance-done__stats { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0; }
.seance-done__stat { flex: 1; }
.seance-done__stat b { display: block; font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -1px; }
.seance-done__stat small { display: block; margin-top: 4px; }
.seance-done__actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.suggest-card { border: 1px solid var(--sig-violet); border-radius: var(--r-4); background: var(--sig-violet-wash); padding: var(--sp-5); }
.suggest-card.is-push { border-color: var(--live); background: var(--live-wash); }
.suggest-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.suggest-card__mark { color: var(--sig-violet); }
.suggest-card.is-push .suggest-card__mark { color: var(--live); }
.suggest-card__name { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; }
.suggest-card__meta { flex: none; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.suggest-card__sub { font-size: 13px; color: var(--ink-2); margin-top: var(--sp-2); }
.suggest-card .in-btn { margin-top: var(--sp-4); }

.week { display: flex; gap: 6px; }
.week__day { flex: 1; text-align: center; }
.week__cell {
  height: 36px; border-radius: var(--r-2); margin-top: 5px; background: var(--recess);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.week__cell.is-push { background: var(--live); }
.week__cell.is-pull { background: var(--sig-violet); }

/* recent + records + generic instrument list rows */
.rec-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); text-decoration: none; color: inherit; }
.rec-row__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--ink-3); }
.rec-row__dot.is-push { background: var(--live); }
.rec-row__dot.is-pull { background: var(--sig-violet); }
.rec-row__body { flex: 1; min-width: 0; }
.rec-row__name { font-size: 15px; font-weight: 600; }
.rec-row__val { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ============================================================
   PROGRESSION
   ============================================================ */
.e1rm-hero { display: flex; align-items: flex-end; gap: var(--sp-4); }
.e1rm-hero__val { font-family: var(--font-mono); font-size: 52px; font-weight: 600; letter-spacing: -2px; line-height: .9; font-variant-numeric: tabular-nums; }
.e1rm-hero__val .u { font-size: 20px; color: var(--ink-3); }
.e1rm-hero__delta { display: inline-flex; align-items: center; gap: 5px; padding: 5px var(--sp-3); border-radius: var(--r-pill); background: var(--recess); margin-bottom: 8px; }
.e1rm-hero__delta .arrow { color: var(--sig-green); font-size: 11px; }
.e1rm-hero__delta.is-down .arrow { color: var(--sig-red); }
.e1rm-hero__delta .in-tnum { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

.barchart { border: 1px solid var(--hairline); border-radius: var(--r-3); background: var(--panel); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
/* left gutter (34px) holds the scale values; grid + plot share its coordinates */
.barchart__frame { position: relative; padding-left: 34px; }
.barchart__grid { position: absolute; left: 34px; right: 0; top: 0; height: 130px; pointer-events: none; }
.barchart__gline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--hairline); }
.barchart__gline:first-child { border-top-color: var(--hairline-2); }   /* baseline reads a touch stronger */
.barchart__glabel { position: absolute; right: 100%; bottom: 1px; margin-right: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barchart__plot { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.barchart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.barchart__bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--live-line); transform-origin: bottom; animation: in-barGrow var(--d-4) var(--ease-out); }
.barchart__bar.is-last { background: var(--live); }
.barchart__axis { display: flex; justify-content: space-between; margin-top: var(--sp-2); padding-left: 34px; }
.barchart--empty { display: flex; align-items: center; justify-content: center; height: 130px; color: var(--ink-2); }

.exlist { display: flex; flex-direction: column; }

/* ---- Exercise selector (Progression) ------------------------------------ */
/* Instrument trigger — the selected exercise IS the heading; tap opens a
   grouped picker sheet. Long FR names wrap instead of overflowing (SE-safe). */
.ex-select {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 52px; margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline-2); border-radius: var(--r-3);
  background: var(--panel); color: var(--ink); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--d-2) var(--ease-out), background var(--d-2);
}
.ex-select:active { background: var(--recess); }
.ex-select:focus-visible { outline: none; border-color: var(--live); box-shadow: 0 0 0 3px var(--live-wash); }
.ex-select__name { flex: 1; min-width: 0; font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 1.08; }
.ex-select__chev { width: 20px; height: 20px; flex: none; color: var(--ink-3); transform: rotate(90deg); }

.ex-pick { display: flex; flex-direction: column; }
.ex-pick__group + .ex-pick__group { margin-top: var(--sp-4); }
.ex-pick__group .section-lbl { margin-bottom: var(--sp-2); }
.ex-pick__row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 56px; padding: var(--sp-3) var(--sp-1);
  border: none; border-top: 1px solid var(--hairline); background: none;
  color: var(--ink); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ex-pick__row:first-child { border-top: none; }
.ex-pick__row:active { background: var(--recess); }
.ex-pick__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-pick__name { font-size: 15px; font-weight: 600; }
.ex-pick__row[aria-pressed="true"] .ex-pick__name { color: var(--live); }
.ex-pick__check { width: 20px; height: 20px; flex: none; color: var(--live); opacity: 0; }
.ex-pick__row[aria-pressed="true"] .ex-pick__check { opacity: 1; }

/* detail / picker sheets: cap the height so long content scrolls inside the
   sheet — never the scroll-locked background behind it */
.in-sheet { max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; }

/* records / generic split rows */
.split-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); }
.split-row__label { font-size: 14px; font-weight: 600; }
.split-row__val { font-family: var(--font-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* segmented control full width for exercise switching */
.seg-scroll { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll .in-chip { flex: none; }

/* ============================================================
   HISTORY
   ============================================================ */
.hist-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); cursor: pointer; }
.hist-row__body { flex: 1; min-width: 0; }
.hist-row__date { font-size: 15px; font-weight: 600; }
.hist-row .in-glyph { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

.detail-ex { padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); }
.detail-ex__name { font-size: 15px; font-weight: 700; }
.detail-ex__sets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.detail-ex__set { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); background: var(--recess); border-radius: var(--r-1); padding: 4px 8px; font-variant-numeric: tabular-nums; }

/* empty / interrupted */
.state-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100dvh - 72px - var(--safe-bottom)); padding: var(--sp-6); }
.state-wrap .in-empty__text { max-width: 30ch; }
.interrupt__mark { display: flex; align-items: center; gap: 8px; }
.interrupt__mark .sq { width: 9px; height: 9px; border-radius: 2px; background: var(--sig-red); }
.interrupt__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); }

/* login (v6) */
.auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.auth__card { width: 100%; max-width: 400px; }
.auth__wordmark { font-family: var(--font-mono); font-weight: 600; font-size: 44px; letter-spacing: -2px; line-height: .95; margin-top: var(--sp-3); }
.auth__copy { margin: var(--sp-3) 0 var(--sp-5); }
.auth__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__label { display: block; margin-bottom: var(--sp-2); }
.auth__note { margin-top: var(--sp-4); text-align: center; min-height: 20px; }

/* ============================================================
   DESKTOP (≥ 900px): sidebar + content grid
   ============================================================ */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
  .app-sidebar { display: flex; position: sticky; top: 0; height: 100dvh; }
  .app-bottomnav { display: none; }
  .app-main { padding-bottom: 0; min-width: 0; }

  .page { max-width: 960px; padding-top: var(--sp-6); }

  /* Séance: logbook left, chrono + plan right */
  .seance {
    min-height: auto; max-width: 1100px; padding: var(--sp-6);
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-auto-flow: row; gap: var(--sp-4) var(--sp-5); align-items: start;
  }
  .seance__head { grid-column: 1; grid-row: 1; }
  .seance__title { grid-column: 1; grid-row: 2; }
  .seance__last { grid-column: 1; grid-row: 3; }
  .seance__display { grid-column: 1; grid-row: 4; margin-top: var(--sp-2); }
  .seance__sets { grid-column: 1; grid-row: 5; }
  .seance__validate { grid-column: 1; grid-row: 6; }
  .seance__spacer { display: none; }
  .seance .in-odo--xl { font-size: 60px; }
  .seance__reps { font-size: 60px; }

  /* right column */
  .rest-chrono {
    grid-column: 2; grid-row: 1 / span 3; position: static; transform: none;
    opacity: 1; pointer-events: auto; flex-direction: column; align-items: stretch;
    text-align: center; align-self: start;
  }
  .rest-chrono__dot, .rest-chrono__lbl { align-self: center; }
  .rest-chrono__val { margin: var(--sp-2) 0; font-size: 44px; }
  .rest-chrono__btn { width: 100%; height: 44px; border-radius: var(--r-2); }
  .plan-card { display: block; grid-column: 2; grid-row: 4 / span 3; align-self: start; }
  .plan-card { border: 1px solid var(--hairline); border-radius: var(--r-4); background: var(--panel); padding: var(--sp-4); }
  .plan-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--hairline); }
  .plan-row__idx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); width: 20px; font-variant-numeric: tabular-nums; }
  .plan-row__name { flex: 1; font-size: 13px; font-weight: 500; }
  .plan-row.is-active .plan-row__name { font-weight: 700; color: var(--live); }
  .plan-row.is-done .plan-row__name { color: var(--ink-3); }
  .plan-row__scheme { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
}