/* gym_simple.css — the simplification layer (operator ruling 2026-07-25).
   Every rule is scoped under body.gm-simple, which ONLY gym_simple.js applies
   after verifying the real nodes exist — without it this file is inert and the
   focus cockpit renders exactly as before.

   Goal: the whole training loop — what to lift, the three numbers, and the one
   action — fits ONE phone screen with no scrolling. Surfaces that belong to a
   different moment are removed from the default face, not merely shrunk. */

/* ---------- ONE input row: weight x reps x effort ---------- */
/* Two 44px steppers + padding + gaps consume ~104px, which is exactly a third of
   a 390px row — the number itself was left 0px and clipped. Weight and reps take
   half the width each, effort spans the row beneath them. */
body.gm-simple .gms-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 10px 0 4px; align-items: end;
}
body.gm-simple .gms-cell-wide { grid-column: 1 / -1; }
body.gm-simple .gms-cell { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
body.gm-simple .gms-label {
  font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
body.gm-simple .gms-ctl {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
  gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 4px;
}
body.gm-simple .gms-step {
  appearance: none; -webkit-appearance: none; min-width: 44px; min-height: 44px;
  border: 0; border-radius: 9px; background: transparent; color: var(--cy);
  font: 700 20px/1 var(--font-mono); cursor: pointer;
}
body.gm-simple .gms-step:active { background: var(--cy-soft); }
body.gm-simple .gms-step:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }

/* the REAL #loadInput, restyled in place (moved here by the layer) */
body.gm-simple .gms-ctl #loadInput {
  width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent;
  text-align: center; color: var(--text); font: 800 22px/1 var(--font-display);
  padding: 0; -moz-appearance: textfield;
}
body.gm-simple .gms-ctl #loadInput::-webkit-outer-spin-button,
body.gm-simple .gms-ctl #loadInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.gm-simple .gms-ctl #loadInput:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; border-radius: 8px; }

/* the REAL #nReps display, compacted (its swipe gesture still works) */
/* the classic .num is a fixed-size tile that collapses to width:0 as a grid item
   and clips its own value (overflow:hidden) — it must fill the cell here */
body.gm-simple .gms-ctl #nReps {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; overflow: visible;
  padding: 0; margin: 0; border: 0; background: transparent; touch-action: none;
}
body.gm-simple .gms-ctl #nReps label,
body.gm-simple .gms-ctl #nReps .u,
body.gm-simple .gms-ctl #nReps .tachometer-svg { display: none; }
/* the rep count is the whole point of the cell — it must paint, and the classic
   .num .v rules (absolute positioning + the tachometer stack) must not hide it */
body.gm-simple .gms-ctl #nReps .v {
  display: block; position: static; opacity: 1; visibility: visible;
  font: 800 22px/1 var(--font-display); color: var(--text);
}

/* effort dots — five taps replace the slider */
body.gm-simple .gms-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
body.gm-simple .gms-dot {
  appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  color: var(--muted); font: 700 12px var(--font-mono); cursor: pointer;
}
body.gm-simple .gms-dot.is-on { border-color: var(--cy); background: var(--cy-soft); color: var(--cy); }
body.gm-simple .gms-dot:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }

/* ---------- the four legacy input surfaces leave the screen ----------
   They stay in the DOM (every handler, hook and contract intact) — the row
   above now drives them. Reachable again only if the layer fails open. */
body.gm-simple .nums,
body.gm-simple #weightScrubber,
body.gm-simple #loadEntry,
body.gm-simple .rpe-slider { display: none; }

/* ---------- surfaces that belong to another moment ----------
   next-action duplicates the HIT IT label; up-next duplicates the session
   list; the rest presets belong to the rest takeover; the lean toggle is
   superseded by the focus layer. */
body.gm-simple #gymNextAction,
body.gm-simple #upNext,
body.gm-simple .rest,
body.gm-simple #restMeta,
body.gm-simple .cockpit-more-toggle,
body.gm-simple .voice-preview,
body.gm-simple #gymLoopCard,
body.gm-simple #programModeCard { display: none; }

/* "Do this now" keeps ONLY the number to beat and the Training Read drawer
   (which carries the deep charts) — its set line repeats the hero target. */
body.gm-simple #nowCard { border: 0; background: transparent; padding: 0; margin: 10px 0 0; }
body.gm-simple #nowCard > .eyebrow,
body.gm-simple #nowCard > #setLine,
body.gm-simple #nowCard > .last { display: none; }

/* SHARE / RECEIPT are end-of-session actions; only FINISH stays live. */
body.gm-simple #sessionActions #shareBtn,
body.gm-simple #sessionActions #receiptBtn { display: none; }
body.gm-simple #sessionActions { gap: 0; }

/* ---------- moment gating: the mode choice belongs to session start ---------- */
body.gm-simple[data-gm-moment="lift"] #gymModeSwitch,
body.gm-simple[data-gm-moment="rest"] #gymModeSwitch { display: none; }
/* ...but expanding the session list brings it back — hidden, never unreachable */
body.gm-simple.gms-modes-open #gymModeSwitch { display: grid; }

/* ---------- zero-scroll: the loop fits one screen ----------
   The closed PLAN sheet is absolutely positioned and translated 100% DOWN, and
   a transform still contributes to the document's scrollable overflow — so an
   invisible sheet was adding ~200px of phantom scroll under every session.
   Fixed positioning takes it out of that calculation entirely; the sheet still
   overlays exactly as before when opened. */
body.gm-simple .sheet { position: fixed; }

/* FINISH stays in the page flow, directly under the adjust row. It is a
   once-a-session action: pinning it to the viewport would cost ~70px of the
   glance forever and collide with the controls above it (measured at 390px),
   which is the opposite of the point. Quiet, full-width, one tap. */
body.gm-simple #sessionActions {
  position: static; display: block; margin: 10px 0 4px; padding: 0;
}
body.gm-simple #sessionActions #finishSessionBtn { width: 100%; min-height: 48px; }
/* the legal line is required, not prominent: one compact row below the loop */
body.gm-simple #medicalDisclaimer {
  font-size: 10px; line-height: 1.35; margin-top: 10px; padding-bottom: 12px;
}


body.gm-simple .hero-block { margin-top: 6px; margin-bottom: 8px; }
body.gm-simple .hero-block h1 { margin-bottom: 6px; font-size: 23px; }
body.gm-simple .gm-hit { min-height: 60px; margin: 8px 0 2px; }
body.gm-simple .gm-adjust > summary { min-height: 40px; font-size: .82rem; }
body.gm-simple #gymSessionList { margin-bottom: 2px; }
@media (max-width: 480px) {
  body.gm-simple .prog .segments { display: none; }      /* the bar already says it */
  body.gm-simple .hero-block h1 { font-size: 21px; }
  body.gm-simple .gms-label { font-size: 9px; }
}

/* Short phones (iPhone SE and friends): the loop must still land in one screen,
   so the surfaces that merely NARRATE the target give way to the target itself.
   Nothing here becomes unreachable — the mode switch returns with the session
   list, and the plan hint is restated inside the Training Read drawer. */
@media (max-height: 700px) {
  body.gm-simple #gymModeSwitch { display: none; }
  body.gm-simple.gms-modes-open #gymModeSwitch { display: grid; }
  body.gm-simple .prog { display: none; }
  body.gm-simple #progHint,
  body.gm-simple .next-target-display .kg-eq { display: none; }
  body.gm-simple .hero-block { margin-top: 2px; margin-bottom: 4px; }
  body.gm-simple .hero-block h1 { font-size: 19px; margin-bottom: 2px; }
  body.gm-simple .next-target-display .value { font-size: 40px; }
  body.gm-simple .next-target-display .eyebrow { font-size: 10px; margin-bottom: 2px; }
  body.gm-simple .gms-row { margin: 6px 0 2px; gap: 6px; }
  body.gm-simple .gm-hit { min-height: 56px; margin: 6px 0 2px; }
  body.gm-simple #nowCard { margin-top: 6px; }
}

/* Sample-session disclosure (2026-07-25, cycle 8). A first-run lifter is shown a
   full prescription from the built-in sample day; the word "sample" was not
   visible anywhere on the page. This states it where the number is. Quiet, not
   alarming — it is a fact about the plan, not a warning. Cold palette. */
body.gm-simple .gms-sample{
  margin:6px 0 0; padding:6px 9px; border-left:2px solid var(--cy);
  background:var(--cy-soft); border-radius:0 7px 7px 0;
  font:600 10.5px/1.4 var(--font-body); color:var(--muted); max-width:46ch;
}
/* the disclosure must not cost the one-screen loop (cycle 1): while it shows,
   the hero's own breathing room gives back the height it takes. */
body.gm-simple .hero-block:has(.gms-sample:not([hidden])){ margin-bottom:2px; }
body.gm-simple .hero-block:has(.gms-sample:not([hidden])) .prog-hint{ display:none; }
body.gm-simple .gms-sample[hidden]{display:none;}
body.gm-simple .gms-sample-tag{color:var(--cy); font-weight:800;}
body.gm-simple .gms-sample-cta{color:var(--cy); text-decoration:underline; text-underline-offset:2px;}
body.gm-simple .gms-sample-cta:focus-visible{outline:2px solid var(--cy); outline-offset:2px;}