/*
 * Practice routine page (/tools/practice-routine/). Loaded after site.css; uses its tokens and components only
 * (.stage, .stage-label, .tool-panel, buttons, .round-btn, .icon-btn, .switch, .note, .hint). No new decoration,
 * no animation: the timer redraws in whole steps, so Calm motion and reduced motion need nothing extra.
 */

/* ---------------------------------------------------------------- layout */
.pr { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1440px) { .pr { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6); } }
.pr-more { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: var(--s-5); align-items: start; }
@media (min-width: 1440px) { .pr-more { gap: var(--s-6); margin-top: var(--s-6); } }
.pr-msg { margin-top: 0; }
.pr-more h2, .pr-edit h2 { margin-top: 0; }

/* ---------------------------------------------------------------- the timer (on the shared .stage card) */
.pr-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.pr-stage .stage-label { align-self: stretch; }
.pr-now { margin: var(--s-2) 0 0; font-size: var(--step-3); max-width: 100%; overflow-wrap: anywhere; }
.pr-clock {
  margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: clamp(3.5rem, 2.5rem + 6vw, 7rem); line-height: 1; letter-spacing: -.02em;
}
@media (min-width: 960px) { .pr-clock { font-size: clamp(4rem, 2rem + 4.5vw, 9rem); } }
.pr-clock-cap { margin: 0; color: var(--muted); font-size: var(--step--1); }
.pr-stage[data-state="paused"] .pr-clock { color: var(--muted); }
.pr-stage[data-state="finished"] .pr-clock { color: var(--teal); }

/* Progress: this block (a bar), and the whole routine (one segment per block, widths in proportion to minutes).
   Fills are indigo on a sandal track with a control-strength outline (3:1 and more in both themes). The same
   facts are always written out in words next to them, so the bars are never the only way to read progress. */
.pr-bar, .pr-strip li { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-strong); }
.pr-bar { align-self: stretch; height: 12px; border-radius: var(--r-pill); margin-top: var(--s-3); }
.pr-bar-fill, .pr-seg-fill { position: absolute; inset: 0; background: var(--indigo); transform-origin: left center; transform: scaleX(0); }
.pr-strip { align-self: stretch; display: flex; gap: 3px; list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.pr-strip li { flex: 1 1 0; min-width: 6px; height: 8px; border-radius: 3px; }
.pr-strip li.is-current { border-color: var(--text); }
.pr-total { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-next { margin: var(--s-1) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.pr-tool-row { margin: var(--s-2) 0 0; }
.pr-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pr-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-4); width: 100%; }
.pr-start { flex: 1 1 auto; max-width: 320px; min-height: 60px; font-size: 1.125rem; }
.pr-round svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pr-reset { margin-top: var(--s-1); min-height: 44px; padding: 6px 18px; }
.pr-options { display: grid; justify-items: center; gap: 2px var(--s-3); margin-top: var(--s-3); }
.pr-options .hint { margin: 0 0 var(--s-2); max-width: 30em; }
.pr-status { margin: var(--s-2) 0 0; min-height: 3.2em; max-width: 36em; }

/* aria-disabled (not disabled) keeps a button focusable, so focus is never lost when it reaches an end. */
[aria-disabled="true"].round-btn, [aria-disabled="true"].icon-btn, button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
[aria-disabled="true"].round-btn:active, button[aria-disabled="true"]:active { transform: none; }

/* ---------------------------------------------------------------- the editor */
.pr-edit { container-type: inline-size; }
.pr-templates { margin: 0 0 var(--s-2); }
.pr-tpl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s-2); }
.pr-tpl { flex-direction: column; gap: 0; min-height: 56px; padding: 6px 12px; margin-bottom: 4px; }
.pr-tpl-min { font-weight: 500; font-size: var(--step--1); color: var(--muted); }
.pr-tpl.is-current { border-color: var(--indigo); background: var(--indigo-soft); }
.pr-tpl.is-current .pr-tpl-min { color: var(--text); }
.pr-disclaimer { margin: var(--s-2) 0 var(--s-3); }
.pr-undo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.pr-undo-btn { min-height: 44px; padding: 6px 18px; }
.pr-locked { margin-top: 0; }
.pr-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0 0 var(--s-2); }
.pr-sum strong { font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.pr-fs:disabled { opacity: .6; }

.pr-blocks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
/* Phone: the name gets the whole first row; minutes, move and remove share the second; the tool menu the third. */
.pr-block {
  display: grid; align-items: end; gap: var(--s-2) 4px;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  grid-template-areas: "num name name name" "mins mins move rm" "tool tool tool tool";
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-2); border: 1px solid var(--card-edge); border-radius: var(--r-md); background: var(--bg);
}
.pr-num { grid-area: num; align-self: center; font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; }
.pr-namewrap { grid-area: name; }
.pr-rm { grid-area: rm; }
.pr-mins { grid-area: mins; }
.pr-toolwrap { grid-area: tool; }
.pr-move { grid-area: move; display: flex; gap: 2px; }
.pr-name-in, .pr-tool-sel { width: 100%; }
.pr-name-in { font-weight: 600; }
.pr-mini-label { display: block; font-size: var(--step--1); font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.pr-stepper { display: flex; align-items: center; gap: 4px; }
.pr-step { width: 44px; height: 44px; font-size: 1.35rem; margin-bottom: 0; }
input.pr-min-in { width: 3em; padding-left: 2px; padding-right: 2px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pr-min-in::-webkit-outer-spin-button, .pr-min-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-ibtn { border-color: var(--line-strong); }
.pr-ibtn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-rm:not([aria-disabled="true"]):hover { color: var(--rose); border-color: var(--rose); }
input.pr-name-in { padding-left: 10px; padding-right: 10px; } /* input.x: beats site.css input[type=...] */
/* Wider editor: two rows per block. */
@container (min-width: 30rem) {
  .pr-block { padding: var(--s-3); column-gap: var(--s-2); grid-template-columns: 1.75rem auto minmax(0, 1fr) auto auto; grid-template-areas: "num name name move rm" "num mins tool tool tool"; }
  .pr-move { gap: 4px; }
  input.pr-min-in { width: 4.2em; }
}
/* Very wide editor: one row per block. */
@container (min-width: 60rem) {
  .pr-block { grid-template-columns: 1.75rem minmax(10rem, 1.6fr) auto minmax(10rem, 1fr) auto auto; grid-template-areas: "num name mins tool move rm"; }
}
.pr-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); }
.pr-add-row .hint { margin: 0; }

/* ---------------------------------------------------------------- log and share */
.pr-today { display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-3); font-weight: 600; }
.pr-today strong { font-size: var(--step-2); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pr-week-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0 0 var(--s-2); font-size: var(--step-0); font-family: var(--font-body); font-weight: 650; }
.pr-week-h .muted { font-weight: 500; }
.pr-week { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 6px; }
.pr-week li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) 6.5rem; align-items: center; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.pr-week li.is-today { font-weight: 650; }
.pr-day { white-space: nowrap; }
.pr-wval { text-align: right; white-space: nowrap; }
.pr-wbar { position: relative; height: 10px; border-radius: 0 4px 4px 0; background: var(--surface-2); overflow: hidden; }
.pr-wfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--indigo); border-radius: 0 4px 4px 0; }
.pr-confirm { margin-top: var(--s-2); }
.pr-confirm p { font-weight: 600; margin-bottom: var(--s-2); }
.pr-confirm-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pr-share-out { margin-top: var(--s-3); }
.pr-share-out input { width: 100%; font-family: var(--font-mono); font-size: var(--step--1); }
.pr-share .hint { margin-top: var(--s-3); }
.pr-how li + li { margin-top: var(--s-2); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 639px) {
  .pr-stage { padding-left: var(--s-3); padding-right: var(--s-3); }
  .pr-edit { padding-left: var(--s-3); padding-right: var(--s-3); } /* room for minutes, move and remove on one row at 360 px */
  .pr-now { font-size: var(--step-2); }
  .pr-controls { gap: var(--s-2); }
  .pr-week li { grid-template-columns: 3.75rem minmax(0, 1fr) 5.75rem; gap: var(--s-2); }
}

/* ---------------------------------------------------------------- forced colours (Windows High Contrast) */
@media (forced-colors: active) {
  .pr-bar, .pr-strip li, .pr-wbar { border: 1px solid CanvasText; }
  .pr-bar-fill, .pr-seg-fill, .pr-wfill { forced-color-adjust: none; background: Highlight; }
  .pr-strip li.is-current { outline: 2px solid Highlight; outline-offset: 1px; }
  .pr-block { border: 1px solid CanvasText; }
  .pr-tpl.is-current { outline: 2px solid Highlight; outline-offset: 2px; }
  /* The shared switch's thumb takes the same system colour as its track in forced colours, so on and off look alike.
     Scoped to this page's two switches; the real fix belongs in site.css (.switch), for every page. */
  .pr-options .switch input { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .pr-options .switch input::after { background: CanvasText; }
  .pr-options .switch input:checked { background: Highlight; border-color: Highlight; }
  .pr-options .switch input:checked::after { background: HighlightText; }
}