/* SM-482 -- shared practice countdown timer (static/tools/shared/practice-timer.js).
   Self-contained: reads ONLY existing theme.css tokens (accent/accent-light/text/
   text-mid/input-bg/input-border/card-bg/card-border) -- no private per-page CSS
   variable namespace of its own (AGENTS.md: inventing one is a defect). The start/stop
   control consumes the shared play-stop-button.css .pps-* classes directly rather than
   restyling; this file only lays out the widget around it and the caller-agnostic
   duration-toggle/popover shells.

   SM-493: the old 2-button .pt-chooser (5 min / 10 min, each choice both setting AND
   immediately starting the countdown -- the defect Jason reported) is retired. Replaced
   by .pt-duration-toggle, a single always-visible +/- stepper next to the (also now
   always-visible) .pt-display -- sized/styled after this codebase's other existing +/-
   stepper precedent (fretboard-picker.js's .sm-fretboard-picker-stepper-btn: ~1.7rem
   square, theme-token border/bg, accent on hover, dimmed+not-allowed when disabled)
   rather than inventing a new control language.

   First consumer: templates/chain_viewer.html. A future retrofit of the PRB item timer
   (templates/practice/routine_builder.html) and the other two forks named in
   ops/agent-tasks/blocked/PROPOSED-migrate-timer-forks-to-shared-practice-timer.md would
   adopt this same file -- not done in SM-482/SM-493.

   SM-494 (Jason, 2026-08-20, verbatim: "put the timer, with the digits' text sized to
   fill the vertical space... Change the counter's font to the Orbitron font currently
   being used live on the site on the Skill Timer tool, 60px font size." -- revised
   moments later, same day, verbatim: "Actually try 6rem as the font size for
   Orbitron."): relocated from chain_viewer.html's Combine Random panel into
   exercise-viewer.js's own .ev-timer-slot (exercise-viewer.css), beside the collapsed
   .ev-controls-col. Orbitron loaded the SAME way the Skill Timer already does it
   (static/tools/5min/index.html:7 -- Google Fonts with a `text=` glyph SUBSET, not the
   whole family) -- this readout can only ever show digits and a colon (m:ss / mm:ss),
   so the subset is exactly "0123456789:".

   SM-495: mounted on the Exercise and Routine players too (previously chain-only) --
   no CSS change needed for that (this file was already host-agnostic). Adds the
   vertical 3-button control stack (.pt-controls-stack) and the bell mute toggle
   (.pt-bell-toggle/.pt-bell-icon) -- see those rules below for the mask+background-
   color recolor technique and the two Jason-authorized hex values. */
@import url('https://fonts.googleapis.com/css?family=Orbitron&text=0123456789:');
/* SM-675: the .pt-display FONT IDENTITY (family/weight/color/letter-spacing) moved
   into the shared countdown-digits.css so the stretch reminder's countdown can reuse
   it on the two surfaces that do not load this file (the dashboard and the PRB)
   without restating the font -- see that file's header for the full rationale. This
   file keeps ownership of the readout's SIZE (14px base below, 6rem in the
   .ev-timer-slot rule) and of the .pt-red warning color. Nothing about this widget's
   rendered appearance changes.

   countdown-digits.css is NOT @imported from here (SM-675 round 3). An @import
   cannot carry a template-resolved ?v=, so the imported file would have been an
   unversioned asset outside the registry's cache-busting -- a defect under gate 7.
   Every template that links THIS file also links countdown-digits.css through
   {% assetv %}, immediately above. If you add a new consumer of practice-timer.css,
   add that link too. */

.pt-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* SM-495 (Jason: "put the 3 timer buttons in a vertical stack: +/- on top,
   start/stop in the middle, and bell on/off at the bottom, instead of
   side-by-side"): .pt-widget itself is unchanged (still a 2-child row -- display +
   this stack); centered against the display's own height via .pt-widget's own
   align-items: center above (no separate vertical-centering rule needed here). */
.pt-controls-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* SM-675: family/weight/color/letter-spacing now come from countdown-digits.css's
   shared `.sm-countdown-digits, .pt-display` rule (@imported above). Size and layout
   stay here -- they are this widget's business, not the shared font identity's. */
.pt-display {
  font-size: 14px;
  min-width: 38px;
  text-align: center;
}
/* SM-494: the ONE relocated instance (.ev-timer-slot) gets the 6rem Orbitron readout
   Jason specified (revised from an initial 60px same-day) -- scoped to that host
   rather than bumping the base 14px rule above sitewide, since a future second
   consumer of this shared widget (see the PROPOSED-migrate-timer-forks doc above) is
   not guaranteed to want a giant readout. A literal rem value per Jason's own wording
   ("try 6rem as the font size"), not converted to px -- it tracks the root font size
   the way he asked for, rather than a fixed pixel figure. */
.ev-timer-slot .pt-widget {
  height: 100%;
}
.ev-timer-slot .pt-display {
  font-size: 6rem;
  min-width: 3.2ch;
  line-height: 1;
}
/* SM-495 round 4 (Jason, verbatim: "I'd like the timer text to switch to #ff4f4f
   just during the final 10 seconds, just in general"): REPLACES the original SM-482
   red-threshold rule (that older rule reused chain_viewer.html's own established
   warning color as a rough approximation, at a 30-second threshold; this is Jason's
   own explicit spec for THIS control, not layered on top of the old one -- see
   practice-timer.js's redThresholdSec default, now 10). Unconditional -- "just in
   general" means NOT gated by the bell mute toggle (practice-timer.js's _tick() reads
   only redThresholdSec, never _bellOn) -- this is the visible cue you can see while
   playing, the counterpart to the (possibly-muted) ding. Reverts on reset/stop/
   duration-change via the SAME pre-existing _renderIdleDisplay() call every one of
   those paths already goes through (removes .pt-red unconditionally) -- no new
   revert logic needed. */
.pt-display.pt-red { color: #ff4f4f; }

/* SM-493: the single +/- duration toggle -- idle-only (disabled, not hidden, for the
   run's duration; see practice-timer.js's start()/_resetToIdle()). Sizing/border/hover
   copied from this codebase's existing +/- stepper precedent
   (static/tools/shared/fretboard-picker.css's .sm-fretboard-picker-stepper-btn) rather
   than inventing new proportions. */
.pt-duration-toggle {
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: .3rem;
  background: var(--card-bg);
  color: var(--text);
  font: 1rem/1 'Open Sans', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
}
.pt-duration-toggle:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-light); }
.pt-duration-toggle:disabled { opacity: .4; cursor: not-allowed; }

/* SM-495: the ding mute toggle -- same footprint as .pt-duration-toggle above (this
   codebase's own +/- stepper precedent) so the vertical stack reads as one control
   family, not three unrelated buttons. Not idle-only (see practice-timer.js), so no
   :disabled state -- always clickable. */
.pt-bell-toggle {
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: .3rem;
  background: var(--card-bg);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pt-bell-toggle:hover { border-color: var(--accent); }
/* Jason-authorized hex, this control only -- bell-on.svg/bell-off.svg (SM-495) both
   ship with one single baked-in dark fill color, so a plain <img> can't be recolored
   to these two values (a CSS filter can't hit an arbitrary target color);
   .pt-bell-icon is a background-less <span> instead, shaped by mask-image and colored
   by background-color -- the standard "recolor an arbitrary flat-color SVG"
   technique. Both source files are simple flat-fill <path> shapes with no
   <style>/.cls- block, so there's no class-collision risk masking them this way. */
.pt-bell-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pt-bell-toggle.pt-bell-on .pt-bell-icon {
  -webkit-mask-image: url('/app/static/icons/bell-on.svg');
  mask-image: url('/app/static/icons/bell-on.svg');
  background-color: #dddddd;
}
.pt-bell-toggle.pt-bell-off .pt-bell-icon {
  -webkit-mask-image: url('/app/static/icons/bell-off.svg');
  mask-image: url('/app/static/icons/bell-off.svg');
  background-color: #393939;
}

.pt-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  max-width: min(280px, calc(100vw - 32px));
  box-sizing: border-box;
}

/* ═══ SM-765: the completion check mark ═══════════════════════════════════
   Jason, 2026-09-14: "Animate in (via scale from 10% to 100% with easing) a
   green check mark svg from the existing library to the left of the words. Use
   the site's global green."

   .pt-popover-head-main groups the mark with the words so the head keeps its
   existing two-ended (space-between) layout -- see the note in
   practice-timer.js's _openPopover(). The 6px gap is this file's own smallest
   existing gap unit (.pt-row above), not a new number.

   SM-835 round 2 (2026-09-28): the green is now var(--play-green), THEME.CSS's
   canonical PLAY-green token, born when the navbar ShredCoins balance needed
   it. Before that token existed this rule deliberately wrote the literal
   ("THE GREEN IS THE LITERAL" -- see the git history for that reasoning);
   now that a token exists, this consumer adopts it rather than staying a
   private literal beside a real one -- exactly what the theme gate exists to
   prevent. The bell's own two Jason-authorized literals are UNCHANGED by this
   task (out of scope) and still duplicate no variable, because none of
   THOSE exists.

   THE MARK IS PAINTED, NOT DRAWN: checkmark.svg is a flat dark fill, so
   background-color shows through mask-image. Identical technique to
   .pt-bell-icon and .pt-popover-close-icon in this same file.

   SIZED IN em so it tracks the head's font-size rather than fixing a pixel box
   that would drift if the copy's size ever changed.

   THE ANIMATION uses the motion layer's own tokens -- --sm-ease-spring is
   SMMotion.SETTLE_EASE, the curve for something that LANDS rather than travels,
   which is what a check mark does. Each var() carries motion.css's own value as
   its fallback, for the surfaces that load this component without the global
   stylesheet (the standalone-page rule). No private duration or easing number is
   introduced. `both` holds the from-state before the first frame so the mark
   cannot flash at full size and then shrink. */
.pt-popover-head-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pt-popover-check {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: var(--play-green);
  -webkit-mask-image: url('/app/static/icons/checkmark.svg');
  mask-image: url('/app/static/icons/checkmark.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform-origin: center center;
  animation: pt-check-in
             var(--sm-dur-base, 260ms)
             var(--sm-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1))
             both;
}

@keyframes pt-check-in {
  from { transform: scale(0.1); }
  to   { transform: scale(1); }
}

/* Reduced motion: present at full size, no transition and no keyframe at all --
   the information arrives, the movement does not. */
@media (prefers-reduced-motion: reduce) {
  .pt-popover-check {
    animation: none;
    transform: scale(1);
  }
}

.pt-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .04em;
  font-size: 13px;
  color: var(--text);
  margin: 0 0 8px;
}

.pt-popover-close {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* SM-667: close.svg is a simple flat-fill shape with no <style>/.cls- block (no
   class-collision risk masking it) -- same mask-image + background-color recolor
   idiom .pt-bell-icon already uses above, replacing the old raw '×' text glyph
   (AGENTS.md "no raw-character UI"). */
.pt-popover-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);
}
.pt-popover-close:hover .pt-popover-close-icon { background-color: var(--text); }

.pt-popover-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Layout rhythm for whatever combine controls the caller drops into the popover body --
   deliberately not dependent on any page-local class (e.g. chain_viewer.html's
   .cv-pool-controls) since this file must stay page-agnostic. */
.pt-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* SM-667 -- the post-timer rating gate (opt-in via opts.practiceUnit; see
   PracticeTimer.prototype._buildRatingGate). Theme tokens only, no private
   namespace -- .pt-rate-stars sizes the SHARED star-rating.js component down to
   this compact popover the same way .prb-stars does for the PRB panel's own dense
   rows (routine_builder.html), never a private per-page star implementation. */
.pt-rate-label {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .03em;
  font-size: 12px;
  color: var(--text-mid);
  /* SM-821 A2: the mastery question is a full sentence; it wraps inside the
     popover's max-width at every width, never widening or overflowing it. */
  overflow-wrap: break-word;
}
.pt-rate-stars {
  display: flex;
}
/* SM-821 AMENDMENT 1 -- the exercise's name under the question, and the two
   ends of the scale under the stars. .pt-rate-ends inherits the SAME font-size
   as .pt-rate-stars (both sit in .pt-popover-body), so its width -- ten 18px
   stars plus the nine 0.15em gaps .smsr-row puts between them -- is exactly the
   star row's, and the two labels sit under star 1 and star 10. Only the spans
   are small. */
.pt-rate-name {
  font: 400 12px/1.3 'Open Sans', sans-serif;
  color: var(--text);
}
.pt-rate-ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-self: flex-start;
  width: calc(10 * 18px + 1.35em);
  min-width: max-content;
  margin-top: -4px;
}
.pt-rate-end-lo,
.pt-rate-end-hi {
  font: 400 10px/1.2 'Open Sans', sans-serif;
  color: var(--text-mid);
  white-space: nowrap;
}
.pt-rate-stars .smsr-star {
  width: 18px;
  height: 18px;
}
.pt-next-item-btn {
  border: 1px solid var(--accent);
  border-radius: .3rem;
  background: var(--accent);
  color: var(--bg);
  font: 700 12px/1 'Open Sans', sans-serif;
  letter-spacing: .02em;
  padding: 8px 10px;
  cursor: pointer;
}
/* Inert until a star is committed -- aria-disabled string-toggle + pointer-events,
   never native `disabled` (which would kill the title tooltip). Same convention
   scale_pattern.html's own inert controls (.sp-is-disabled) already use. */
.pt-next-item-btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 420px) {
  .pt-popover { left: auto; right: 0; }
}

/* SM-818 -- the day's final prompt ("WAIT! ONE MORE STEP TO FINISH") and its
   DAY N COMPLETE screen. practice-timer.js moves that one popover into
   .pt-final-overlay on <body>, so it is centred over the whole page (above the
   fixed navbar and its drawer) instead of hanging off the widget. Content-tight:
   the dialog is as tall as its lines, never a fixed height. The coin/reward
   lines are ShredCoins' own classes (shredcoins.css). */
.pt-final-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .6);
}
.pt-final-overlay .pt-popover {
  position: static;
  width: 100%;
  max-width: min(360px, 100%);
  padding: 16px;
}
.pt-popover-final .pt-popover-head {
  font-size: 22px;
  margin-bottom: 10px;
}
.pt-popover-final .pt-popover-body { gap: 10px; }
.pt-final-copy {
  font: 400 13px/1.45 'Open Sans', sans-serif;
  color: var(--text);
}
.pt-popover-final .pt-next-item-btn { font-size: 14px; padding: 10px 12px; }
.pt-final-later {
  align-self: center;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  font: 400 12px/1.2 'Open Sans', sans-serif;
  color: var(--text-mid);
  text-decoration: underline;
}
.pt-final-later:hover { color: var(--text); }