/* SM-674 -- Stretch Reminder modal. Every color started out as an existing site
   theme variable (theme.css) -- no private token namespace (AGENTS.md's theme
   rule). SM-732 added #000 (justified: no black token exists) and SM-733 adds
   three more justified literals for the race-light phases (see .sr-count-label /
   .sr-stage-overlay.sr-phase-N below) -- every hex in this file is accounted for
   in the test suite's own hex-literal gate, never a silent one-off. Structure/
   backdrop copied deliberately from tuning-prompt.css's .stp-backdrop/.stp-dialog
   (the established staged-modal idiom), not reinvented.

   SM-675 -- the reminder becomes a GUIDED STRETCHING SESSION. This stylesheet has
   TWO DEPENDENCIES, and both are linked by every template that links this file --
   never @imported (SM-675 round 3: an @import cannot carry a template-resolved ?v=,
   so the imported file would be an unversioned asset outside the registry's
   cache-busting, which is a defect under gate 7):

     countdown-digits.css  the Orbitron countdown digit identity, LIFTED out of
                           practice-timer.css by SM-675 so this modal reuses it
                           instead of restating the font. Needed because the
                           dashboard and the PRB never load practice-timer.css.
                           Linked through {% assetv %} on all five surfaces.

     start-control.css     the canonical green .sm-start-control, which SM-674's ack
                           button and SM-675's Start/Done controls both ride. Three
                           surfaces already linked it; SM-675 adds the link to the
                           two that did not (the PRB and the Exercise player), where
                           those buttons had been rendering with no styling at all.

   ADDING A NEW CONSUMER OF THIS FILE means adding both of those links too.

   Motion tokens (--sm-ease-spring / --sm-ease-in) come from static/css/motion.css,
   which base.html loads site-wide -- consumed, never redefined, and never edited
   (motion.css is a forbidden path for SM-675). */

.sr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

/* SM-675: 420px -> 520px ("the dialog can be a little bigger"). Still content-tight
   -- no height, no min-height anywhere in this file; the guided stage's square is
   the only element with a size of its own (AGENTS.md screen-space law). */
.sr-dialog {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 22px;
  width: 520px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* SM-667's own close.svg mask-recolor idiom (practice-timer.css .pt-popover-close /
   .pt-popover-close-icon), copied here rather than forked -- no raw close-glyph
   character (AGENTS.md "no raw-character UI"). */
.sr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sr-close-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url('/app/static/icons/close.svg');
  mask-image: url('/app/static/icons/close.svg');
  background-color: var(--text-mid);
}

.sr-close:hover .sr-close-icon { background-color: var(--text); }

.sr-main-view,
.sr-video-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* AGENTS.md gate: an author display: rule on an element also carrying [hidden] renders
   VISIBLE unless explicitly guarded -- SM-583/SM-585's shipped defect. */
.sr-main-view[hidden],
.sr-video-view[hidden] { display: none; }

.sr-title {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .05em;
  color: var(--text);
  font-size: clamp(20px, 4vw, 24px);
  margin: 6px 0 0;
  text-align: center;
}

.sr-copy {
  font-family: 'Open Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text-mid);
  text-align: center;
  margin: 0 0 4px;
  max-width: 34ch;
}

/* ─────────────────────────────────────────── SM-675: the guided stage ── */

/* The 1:1 square. `aspect-ratio` (not a fixed height) keeps it content-tight and
   lets it shrink on narrow screens without a media query per breakpoint -- the
   width cap is the only number, and `width: 100%` under it means a 360px phone
   never produces a horizontal scrollbar. */
.sr-stage {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}
.sr-stage[hidden] { display: none; }

/* The clip's own layer, under the digits layer. Absolutely positioned so DOM order
   (slot, placeholder, overlay) is also paint order -- the digits are always on top of
   whatever frame is frozen underneath. */
.sr-stage-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aspect preserved -- never cropped to fill (AGENTS.md image rule). A clip whose
   aspect differs from 1:1 letterboxes inside the square rather than being cropped.
   SM-732: Jason's GIFs and stills both carry real alpha -- `background: transparent`
   (never a matte) is what lets .sr-stage's OWN background (below) show through both
   the animated clip and its still identically, so nothing "jumps" in colour at the
   swap. */
.sr-stage-media {
  max-width: 100%;
  max-height: 100%;
  display: block;
  background: transparent;
}

/* Shown when a step has no media file yet, or its file fails to load -- a Bebas
   step number, never a broken-image icon. */
.sr-stage-placeholder {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .04em;
  font-size: clamp(56px, 22vw, 96px);
  line-height: 1;
  color: var(--text-dim);
}
.sr-stage-placeholder[hidden] { display: none; }

/* The digits/checkmark layer, over the frozen still. pointer-events: none so the
   still underneath keeps whatever interactivity it has. The scrim is what makes
   light frames legible without touching the clip itself. */
.sr-stage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.42);
}
.sr-stage-overlay[hidden] { display: none; }

/* The ONE modifier the contract allows: size only. Family/weight/color/letter-spacing
   arrive from countdown-digits.css's shared `.sm-countdown-digits` rule -- restating
   any of them here would be the fork that file exists to prevent. Single number
   (3, 2, 1, then 10 ... 1), never mm:ss, so no min-width/colon allowance is needed. */
.sr-count {
  font-size: 4rem;
  line-height: 1;
}

/* SM-732 -- Jason, 2026-09-09, verbatim: "The countdown (3) and the 'hold the
   stretch' counter (10 seconds) should get a black outer glow as a sort of drop
   shadow, just to be sure that the counter text has contrast against the
   images/animations beneath it." A stretch-context MODIFIER on THIS stylesheet's own
   digits only -- never a change to countdown-digits.css's shared identity (a
   forbidden path for this task), and it sets no size/font/color/letter-spacing of
   its own. Pure black: grepped theme.css for a black token and found none, so #000
   is used directly and justified here (AGENTS.md gate 4's own allowance) rather than
   inventing a private token. Tuned against the lightest of the six stills. */
.sr-count-glow {
  text-shadow:
    0 0 4px #000,
    0 0 10px #000,
    0 0 18px #000;
}

/* SM-733 -- Jason, 2026-09-09, verbatim: "put the words 'starting in' above the
   number in small... font-size: 18px; letter-spacing: .06em; font-variant:
   all-small-caps; font-weight: normal; ... During the 10-second countdown, change
   that text to HOLD STRETCH (same styling, current white text color)." His
   earlier prose also said "small (10px)" for the size; Jason confirmed 18px is
   correct (round 2) -- the explicit CSS block stands, no contradiction remains.
   Font is the body font (Open Sans) purely by INHERITANCE from theme.css's
   html/body rule -- no font-family literal is written here (never a new font
   declared for a page that already has one). */
.sr-count-label {
  font-size: 18px;
  letter-spacing: .06em;
  font-variant: all-small-caps;
  font-weight: normal;
  text-align: center;
}
.sr-count-label[hidden] { display: none; }

/* Digits and label share ONE colour, by inheritance from the overlay wrapper --
   never two separate colour rules. countdown-digits.css's shared
   `.sm-countdown-digits { color: var(--text) }` (a forbidden path for this task)
   is overridden to `inherit` HERE (this file loads after countdown-digits.css on
   every surface, so the equal-specificity rule below wins), so the phase class on
   .sr-stage-overlay is the single source of truth for colour: with no phase class
   (the 10-second hold), both inherit the overlay's own colour, itself unset and so
   resolving to theme.css's html/body `var(--text)` -- the exact white the digits
   already used before this task (proven equal in the test suite). */
.sr-count,
.sr-count-label {
  color: inherit;
}

/* The 3-2-1 race-light phases. Jason, 2026-09-09, verbatim: "like a car race,
   where the 3 lights signal ready, set, go." Red/green are the site's own
   CANONICAL PLAY/STOP colours (AGENTS.md's 2026-08-17 global rule: PLAY =
   #00b140, STOP-red = #df2020) -- theme.css defines no custom property for
   either (grepped), so exactly like every other consumer of this canon
   (play-stop-button.css, start-control.css, bookmarks.css, speed-curve.js,
   picking-pattern.js...), the literal is used directly here rather than
   inventing a private token for what is already a site-wide rule.
   Amber (round 2, Jason, 2026-09-09, verbatim: "Come up with an amber that
   looks like a traffic light's amber. This is emulating a traffic light."):
   theme.css has no amber/warning/gold token either (grepped), so #ffbf00 is
   the one justified literal -- a saturated, golden-orange "amber" (the classic
   traffic-signal hue), chosen to read distinctly from BOTH the site's own
   orange accent (--accent, a duller burnt orange) and plain yellow.
   Per Jason's own ruling this choice needs no further blessing. */
.sr-stage-overlay.sr-phase-3 { color: #df2020; }
.sr-stage-overlay.sr-phase-2 { color: #ffbf00; }
.sr-stage-overlay.sr-phase-1 { color: #00b140; }

/* DONE state. The green is NOT restated as a hex here: this span carries
   .sm-start-control, whose single canonical green (start-control.css --
   the site's one PLAY/highlight color) paints the mask through currentColor. Everything
   that makes .sm-start-control a BUTTON is switched off below, leaving only the
   color. Zero hex literals in this file, and one home for the green. */
.sr-done-mark {
  border: 0;
  padding: 0;
  cursor: default;
  background: transparent;
}
.sr-done-mark:hover { background: transparent; }
.sr-done-mark::before {
  width: 88px;
  height: 88px;
  -webkit-mask-image: url('/app/static/icons/checkmark.svg');
  mask-image: url('/app/static/icons/checkmark.svg');
}

.sr-step-label {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .05em;
  color: var(--text);
  font-size: 16px;
  text-align: center;
  margin: 0;
}

.sr-step-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: var(--text-mid);
  text-align: center;
  margin: 0;
}

/* Start Stretching Now / Start Again. Reuses the shared green control; the play
   glyph is switched OFF because this button starts a TIMER, not audio -- the
   play-symbol rule is explicitly about buttons that trigger playback. Text-only
   label, no substitute icon invented. */
.sr-start-btn::before { content: none; }
.sr-start-btn:disabled { opacity: .6; cursor: default; }
.sr-start-btn:disabled:hover { background: transparent; color: var(--text-mid); }

/* ───────────────────────────────── SM-675: thumbnail + Watch button row ── */

.sr-thumb-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sr-thumb-row[hidden] { display: none; }

/* ~75px tall, aspect preserved (height fixed, width auto -- never cropped to fill),
   rounded like the site's cards. */
.sr-thumb {
  height: 75px;
  width: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  cursor: pointer;
}
.sr-thumb:hover { border-color: var(--accent-light); }
.sr-thumb[hidden] { display: none; }

.sr-watch-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--accent-light);
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  transition: border-color .15s ease, color .15s ease;
}

.sr-watch-btn:hover {
  border-color: var(--accent-light);
  color: var(--accent);
}

/* "Watch the" / "Stretches" / "Video" -- three stacked, centered lines rather than one
   long label, so the button reads as a compact block beside the 75px thumbnail. */
.sr-watch-line { display: block; }

/* .sm-start-control (start-control.css) delivers the shared green geometry/colors --
   only the glyph changes here, since this button never plays audio (the play-symbol
   rule does not apply; the checkmark communicates "done, proceed" instead). */
.sr-ack-btn {
  width: 100%;
  justify-content: center;
}

.sr-ack-btn::before {
  -webkit-mask-image: url('/app/static/icons/checkmark.svg');
  mask-image: url('/app/static/icons/checkmark.svg');
}

.sr-ack-btn:disabled {
  opacity: .6;
  cursor: default;
}

.sr-back-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--text-mid);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.sr-back-btn:hover { color: var(--text); }

.sr-back-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(90deg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url('/app/static/icons/arrow-down.svg');
  mask-image: url('/app/static/icons/arrow-down.svg');
  background-color: currentColor;
}

.sr-video-title {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .04em;
  color: var(--text);
  font-size: 15px;
  text-align: center;
  margin: 0;
}

.sr-video-body {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sr-video-body video {
  width: 100%;
  border-radius: 6px;
  background: var(--bg);
}

/* ───────────────────────────────────── SM-675: the "Let's go!" send-off ── */

/* Full-viewport, above the modal's own backdrop, shown AFTER the dialog closes and
   BEFORE practice actually starts (guard() resolves only once this is gone). */
.sr-letsgo {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.sr-letsgo-text {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .06em;
  color: var(--text);
  font-size: clamp(64px, 14vw, 140px);
  line-height: 1;
  animation: sr-letsgo-in 350ms var(--sm-ease-spring) both;
}

/* Exit: grow slightly, then shrink away and vanish the instant it reaches 10% --
   no fade tail (the element is removed by the JS at exactly this animation's end).
   --sm-ease-in is motion.css's own "accelerate, for exits" curve. */
.sr-letsgo-out .sr-letsgo-text {
  animation: sr-letsgo-out 350ms var(--sm-ease-in) both;
}

/* --sm-ease-spring (cubic-bezier(0.34, 1.56, 0.64, 1)) is motion.css's documented
   "slight overshoot / pop" curve -- it produces Jason's bounce (past 100%, settle
   back) from a plain 10% -> 100% scale, so no hand-written overshoot keyframe and
   no local cubic-bezier is needed on the way in. */
@keyframes sr-letsgo-in {
  from { transform: scale(.1); }
  to   { transform: scale(1); }
}

@keyframes sr-letsgo-out {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.1); }
  100% { transform: scale(.1); }
}

/* Same 3-second wall clock (the JS timings are untouched) -- only the motion is
   replaced by a plain fade. */
@media (prefers-reduced-motion: reduce) {
  .sr-letsgo-text {
    animation: sr-letsgo-fade-in 350ms linear both;
  }
  .sr-letsgo-out .sr-letsgo-text {
    animation: sr-letsgo-fade-out 350ms linear both;
  }
  @keyframes sr-letsgo-fade-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sr-letsgo-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

@media (max-width: 480px) {
  .sr-dialog { padding: 16px; }
  .sr-count { font-size: 3rem; }
}