/* gym_focus.css — the focus-flow layer for the gym cockpit (operator ruling
   2026-07-24: one moment on screen at a time — start, lift, rest).
   Every rule is scoped under body.gm-focus, which ONLY gym_focus.js applies
   after verifying the cockpit's real nodes exist — without it this file is
   inert and the classic cockpit renders untouched. */

/* ---------- moment gating ---------- */
/* Operator ruling 2026-07-24 (v2): the mode switch (Strength/Functional/
   Recovery), readiness HUD, and day stepper are PERMANENT controls — the
   lifter switches modes and days mid-workout at will. They are NEVER hidden
   by the moment machine (the rest takeover simply overlays them while it is
   up). data-gm-moment now drives ONLY the rest takeover styling below. */

/* ---------- main-stage declutter: demoted surfaces live in the PLAN sheet ---------- */
body.gm-focus #gymLoopCard.gm-demoted,
body.gm-focus #programModeCard.gm-demoted,
body.gm-focus .voice-preview.gm-demoted { margin-top: 12px; }
/* Operator ruling 2026-07-24 (v2): the session's exercise list STAYS visible —
   a compact map of which lift is which, with the classic per-row set progress.
   (An earlier cut hid it behind ▤ PLAN; that lost the "where am I" glance.) */
body.gm-focus #gymSessionList { font-size: 0.85rem; }
body.gm-focus #gymSessionList li { min-height: 36px; }

/* ---------- HIT IT — the one big action ---------- */
body.gm-focus .gm-hit {
  display: block; width: 100%; min-height: 64px; margin: 10px 0 4px;
  font-family: var(--serif, inherit); font-weight: 800; font-size: 1.25rem;
  letter-spacing: 0.04em; border-radius: 12px; border: 1px solid transparent;
  background: var(--action, #2563eb); color: var(--on-action, #fff); cursor: pointer;
  /* The glow is DERIVED from the action colour, never a literal. --action is #2563eb (blue) on
     dark/light/obsidian but #047857 (green) on clinical, so a hardcoded rgba(37,99,235,...) put a
     blue halo around a green button — on the single biggest control in the cockpit. Same color-mix
     idiom the rest takeover below already uses. */
  box-shadow: 0 8px 26px color-mix(in srgb, var(--action, #2563eb) 35%, transparent);
}
body.gm-focus .gm-hit:active { transform: translateY(1px); }
/* the classic LOG SET stays in the DOM (every contract keeps its element) but
   the big button is the visible action.
   padding/margin/border are part of the hide, not decoration: .log in gym.css
   sets padding:18px, and a 1px box with 18px padding still PAINTS a 36x36
   target (measured 2026-07-26 at 390x844 — #logBtn resolved 36x36 at y=81,
   hit-tested underneath #gymModeStrength). clip: only clips the content box, so
   without these three the element is invisible-looking but still occupies a
   real, tappable, tab-reachable box. Zeroing them collapses it to a true 1x1. */
body.gm-focus #logBtn {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
  padding: 0; margin: -1px; border: 0;
}

/* ---------- adjust disclosure: precise controls fold away until needed ---------- */
body.gm-focus .gm-adjust > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: 0.9rem; color: var(--muted, #9aa6b8); gap: 6px;
}
body.gm-focus .gm-adjust > summary::-webkit-details-marker { display: none; }
body.gm-focus .gm-adjust > summary::after { content: "▾"; }
body.gm-focus .gm-adjust[open] > summary::after { content: "▴"; }

/* ---------- REST takeover: the between-sets screen ---------- */
body.gm-focus #restCd.show {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  /* the classic card ships overflow:hidden + row padding — both would clip the
     takeover's large type, so they are explicitly overridden here */
  overflow: auto; padding: max(76px, env(safe-area-inset-top, 0px) + 64px) 24px 96px;
  background: color-mix(in srgb, var(--bg, #0d0e12) 94%, transparent);
  backdrop-filter: blur(6px); border-radius: 0; border: 0;
}
body.gm-focus #restCd.show .t { font-size: clamp(3.4rem, 19vw, 6rem); font-weight: 800; line-height: 1; flex: none; }
body.gm-focus #restCd.show .mid { text-align: center; max-width: 34ch; flex: none; }
body.gm-focus #restCd.show .next { font-size: 1.05rem; }
body.gm-focus #restCd.show .barwrap { width: min(70vw, 340px); margin: 10px auto 0; }
body.gm-focus #restCd.show .skip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: auto; min-height: 48px; padding: 0 28px; border-radius: 999px; margin-top: 4px;
}
/* the rest coach line joins the takeover instead of floating in the page flow */
body.gm-focus[data-gm-moment="rest"] #restCoach:not([hidden]) {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 12vh; z-index: 61;
  max-width: min(88vw, 40ch);
}

/* ---------- Finish Session: always reachable ---------- */
body.gm-focus #sessionActions {
  position: sticky; bottom: 8px; z-index: 40; display: flex; justify-content: center;
}
body.gm-focus #sessionActions #finishSessionBtn { min-height: 48px; }

/* focus supersedes the older cockpit-lean pass: if anything re-adds the class,
   the focus layout still wins for the surfaces it owns */
body.gm-focus #sessionActions { display: flex !important; }
body.gm-focus .gm-adjust #swapDetails,
body.gm-focus .gm-adjust #skipBtn,
body.gm-focus .gm-adjust #missBtn,
body.gm-focus .gm-adjust #undoSetBtn { display: revert !important; }

/* sweep finding 3/3: the toast rides above every focus-layer surface (it sat
   under the adjust panel / RPE area during its fade) */
body.gm-focus .toast { z-index: 70; }