/*
  scenes.css — interactive replicas of app screens
  ------------------------------------------------
  Three scenes, one pattern: a paper card that reproduces a real screen of the
  Summit app (the weekly-availability screen, the recovery ranges, the
  connection map), with the app's own vocabulary and a few controls that move
  it between states. Every state is HTML that is already in the page; scenes.js
  only switches which one is shown, so the copy (and the keywords in it) stays
  in the document, is translated by the build, and is all visible with scripts
  off. The figures are illustrative and the scene says so.

  They sit on an ink band (.band in summit.css) as paper cards on ink, like the
  plan cards on the pricing page. App semantic colours come from .app-figure
  (app-figures.css), which every scene root also carries. Tokens only; sizes
  from the ramp; one curve, three durations, no stagger.
*/

.scene { margin: 0; }

/* Visually hidden, still read by assistive tech. */
.scene .vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Controls: a segmented row, shown only when scripts run ── */
.scene-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.seg-btn {
  min-height: 44px;
  font-family: var(--font-ui); font-size: var(--t-dense); font-weight: 600; letter-spacing: normal;
  color: var(--header-ink); background: transparent;
  border: 1px solid rgba(245,238,224,0.22); border-radius: var(--r-pill);
  padding: 8px 16px; cursor: pointer;
  transition: background var(--m-quick), color var(--m-quick), border-color var(--m-quick);
}
.seg-btn:hover { border-color: rgba(245,238,224,0.55); }
.seg-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.scene-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.scene .app-figure-card { padding: 18px 20px 18px; }
.scene-h { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin-bottom: 10px; }
.scene-p { font-size: var(--t-dense); line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }
.scene-note { font-size: var(--t-label); line-height: 1.6; color: var(--ink-soft); margin-top: 12px; }
.scene-note a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.scene-note a:hover { text-decoration: underline; }
.scene-note strong { display: block; color: var(--ink); margin-bottom: 2px; }
.scene .aw-list { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 10px; }
.scene .aw-list li { position: relative; padding-left: 18px; font-size: var(--t-label); line-height: 1.6; color: var(--ink-soft); }
.scene .aw-list li::before { content: "\2013"; position: absolute; left: 0; color: var(--accent-text); font-weight: 700; }
.scene .aw-list b { color: var(--ink); font-weight: 600; }
.scene-more { border-top: 1px solid var(--af-hair); margin-top: 14px; padding-top: 12px; }
.scene-more > summary {
  min-height: 44px;
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-label); font-weight: 700; color: var(--accent-text);
  border-radius: var(--r-chip); transition: color var(--m-quick);
}
.scene-more > summary::-webkit-details-marker { display: none; }
.scene-more > summary::after { content: "+"; font-size: var(--t-body); line-height: 1; }
.scene-more[open] > summary::after { content: "\2212"; }
.scene-more > summary:hover { color: var(--ink); }
.scene-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scene-more .aw-list { margin-top: 12px; }
.scene-tier { margin-top: 20px; color: rgba(245,238,224,0.62); max-width: 70ch; }
.scene-tier a { color: var(--accent); }

/* ═══ Week: the app's weekly-availability screen ═══ */
.wk-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0 14px; padding: 10px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-chip);
}
.wk-total-l { font-family: var(--font-label); font-size: var(--t-label); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); }
.wk-total-v { font-family: var(--font-mono); font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.wk-cols { text-align: right; font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); margin: 0 0 2px; }
.wk-days { list-style: none; padding: 0; margin: 0; }
.wk-day {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 68px 62px 26px; gap: 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--af-hair);
  transition: opacity var(--m-quick);
}
.wk-name { font-family: var(--font-label); font-size: var(--t-label); font-weight: 800; letter-spacing: normal; color: var(--ink); }
.wk-track { position: relative; height: 24px; border-radius: 8px; background: var(--ink-hair); overflow: hidden; transition: box-shadow var(--m-quick); }
.wk-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 0%); background: var(--accent); border-radius: 8px; transition: width var(--m-transition), background var(--m-quick); }
.wk-tag {
  position: absolute; top: 3px; bottom: 3px; right: 4px; display: none; align-items: center;
  padding: 0 8px; border-radius: 6px; background: var(--card);
  font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); white-space: nowrap;
  max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis;
}
.wk-tag:not(:empty) { display: flex; }
.wk-time { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; text-align: right; color: var(--ink); }
.wk-day.is-rest .wk-track { background: transparent; outline: 1px dashed var(--ink-faint); outline-offset: -1px; }
.wk-day.is-rest .wk-time { font-family: var(--font-label); font-weight: 800; color: var(--ink-faint); }
.wk-step { display: flex; gap: 6px; }
.wk-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--af-hair);
  background: var(--card); color: var(--ink); font-size: var(--t-body); line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color var(--m-quick), opacity var(--m-quick);
}
.wk-btn:hover { border-color: var(--accent); }
.wk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-btn:disabled { opacity: 0.3; cursor: default; }
.wk-btn:disabled:hover { border-color: var(--af-hair); }
.wk-own { display: grid; place-items: center; }
.wk-chk {
  appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--ink-faint); background: transparent; display: grid; place-items: center; cursor: pointer;
  transition: background var(--m-quick), border-color var(--m-quick);
}
.wk-chk:checked { background: var(--accent); border-color: var(--accent); }
.wk-chk:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.wk-chk:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wk-chk:disabled { opacity: 0.35; cursor: default; }
.wk-hint { margin-top: 14px; font-size: var(--t-label); line-height: 1.5; color: var(--ink-soft); }
.scene:not(.is-live) .wk-hint { display: none; }

/* States of a row. */
.wk-day.is-today .wk-track { box-shadow: 0 0 0 2px var(--accent); }
.wk-day.is-cand .wk-track { box-shadow: 0 0 0 2px var(--accent); }
.wk-day.is-missed .wk-fill { background: var(--ink-faint); }
.wk-day.is-missed .wk-time { text-decoration: line-through; }
.wk-day.is-no { opacity: 0.5; }
.scene[data-mode="today"] .wk-day:not(.is-today) { opacity: 0.4; }

/* Today panel */
.wk-dur { margin: 4px 0 6px; }
.wk-dur-l { display: block; font-family: var(--font-label); font-size: var(--t-label); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); margin-bottom: 8px; }
.wk-range { width: 100%; accent-color: var(--accent); }
.wk-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wk-scale { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; color: var(--ink-faint); margin-top: 2px; }
.wk-result { margin-top: 12px; font-size: var(--t-dense); line-height: 1.5; color: var(--ink); }
.wk-result b { font-family: var(--font-mono); font-weight: 700; }
.wk-result--miss { padding: 10px 14px; border-radius: var(--r-chip); background: var(--accent-soft); border: 1px solid var(--accent-line); font-weight: 600; }
.wk-result--miss:empty { display: none; }
.scene-steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.scene-steps li { display: grid; gap: 2px; }
.scene-steps b { font-size: var(--t-dense); color: var(--ink); font-weight: 700; }
.scene-steps span { font-size: var(--t-label); line-height: 1.55; color: var(--ink-soft); }

/* ═══ Range: the app's recovery ranges ═══ */
.scene--range { --tone: var(--af-tsb); }
.scene--range[data-tone="ok"] { --tone: var(--af-tsb); }
.scene--range[data-tone="bad"] { --tone: var(--af-warn); }
.scene--range[data-tone="none"] { --tone: var(--ink-faint); }
.rg-score { position: relative; width: 148px; height: 148px; margin: 8px auto 16px; }
.rg-ring { width: 100%; height: 100%; display: block; }
.rg-ring circle { fill: none; stroke-width: 12; }
.rg-ring-bg { stroke: var(--ink-hair); }
.rg-ring-fg { stroke: var(--tone); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: var(--off, 104); transition: stroke-dashoffset var(--m-transition), stroke var(--m-quick); }
.rg-score-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rg-num { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.rg-cap { font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); }
.rg-rows { list-style: none; padding: 0; margin: 0; }
.rg-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) 56px minmax(80px, 1fr) 76px; gap: 10px; align-items: center;
  text-align: left; padding: 10px 8px; border: 0; border-top: 1px solid var(--af-hair); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  transition: background var(--m-quick);
}
.rg-row:hover { background: var(--ink-hair); }
.rg-row[aria-pressed="true"] { background: var(--accent-soft); }
.rg-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rg-name { font-size: var(--t-label); font-weight: 600; line-height: 1.3; }
.rg-row--sub .rg-name { font-weight: 500; color: var(--ink-soft); }
.rg-val { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; text-align: right; color: var(--ink); }
.rg-bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--ink-hair); }
.rg-band { position: absolute; left: 34%; width: 32%; top: -3px; bottom: -3px; border-radius: 6px; background: var(--ink-faint); opacity: 0.3; }
.rg-med { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--ink-faint); }
.rg-dot {
  position: absolute; left: var(--p, 50%); top: 50%; width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--dotc, var(--ink-soft)); border: 2px solid var(--card);
  transition: left var(--m-transition), background var(--m-quick), opacity var(--m-quick);
}
.rg-row[data-t="good"] { --dotc: var(--af-tsb); }
.rg-row[data-t="bad"] { --dotc: var(--af-atl); }
.rg-row[data-t="ok"] { --dotc: var(--ink-soft); }
.rg-st { white-space: nowrap; font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); text-align: right; }
.rg-detail { margin-top: 12px; min-height: 3.2em; }
.rg-d { font-size: var(--t-label); line-height: 1.6; color: var(--ink-soft); margin-bottom: 6px; }
.scene.is-live .rg-d:not(.is-on) { display: none; }

/* ═══ Routes: the connection map ═══ */
.rt-legend { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rt-leg { display: grid; gap: 4px; align-content: start; padding-top: 12px; border-top: 3px solid var(--af-tsb); }
.rt-leg--elite { border-top-color: var(--accent); }
.rt-leg b, .rt-leg h3 { font-family: var(--font-ui); font-size: var(--t-dense); font-weight: 700; letter-spacing: normal; line-height: 1.3; color: var(--header-ink); }
.rt-leg span { font-size: var(--t-label); line-height: 1.55; color: rgba(245,238,224,0.62); }
.rt-map { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: stretch; padding: 22px 20px; }
.rt-col { display: grid; gap: 12px; align-content: start; }
.rt-colh { font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; color: var(--ink-soft); margin: 0; }
.rt-hub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  margin: 28px 18px 0; padding: 16px 8px; border-radius: var(--r-card);
  background: var(--header-bg); color: var(--header-ink);
}
.rt-hub img { width: 48px; height: 48px; border-radius: 12px; }
.rt-hub-n { font-family: var(--font-display); font-size: var(--t-dense); font-weight: 900; letter-spacing: -0.02em; }
.rt-node {
  --brand: var(--ink-faint);
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: var(--r-chip); border: 1px solid var(--af-hair);
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color var(--m-quick), background var(--m-quick);
}
.rt-node:hover { border-color: var(--ink-faint); }
.rt-node[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.rt-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; }
.rt-node--strava { --brand: var(--strava); }
.rt-node--karoo { --brand: var(--hammerhead); }
.rt-node--health { --brand: var(--health); }
.rt-node--icu { --brand: var(--intervals); }
.rt-txt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.rt-n { font-size: var(--t-dense); font-weight: 700; line-height: 1.25; }
.rt-sub { font-size: var(--t-micro); line-height: 1.3; color: var(--ink-soft); }
.rt-send { margin: 14px 0 0; font-size: var(--t-label); line-height: 1.6; color: rgba(245,238,224,0.62); }
.rt-t { font-family: var(--font-label); font-size: var(--t-micro); font-weight: 800; letter-spacing: normal; }
.rt-t--free { color: var(--ok-text); }
.rt-t--elite { color: var(--accent-text); }
.rt-col--in .rt-node::after, .rt-col--out .rt-node::before {
  content: ""; position: absolute; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: var(--ink-faint);
  transition: background var(--m-quick);
}
.rt-col--in .rt-node::after { left: 100%; }
.rt-col--out .rt-node::before { right: 100%; }
.rt-node[aria-pressed="true"]::after, .rt-node[aria-pressed="true"]::before { background: var(--accent); }
.rt-onto { margin: 0; padding: 0 4px; font-size: var(--t-label); line-height: 1.5; color: var(--ink-soft); }
.rt-onto b { color: var(--ink); font-weight: 700; }
.rt-panels { margin-top: 20px; padding: 20px 22px; }
.rt-panel h3 { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.rt-panel p { font-size: var(--t-dense); line-height: 1.65; color: var(--ink-soft); margin-bottom: 8px; }
.rt-panel .at-tier { font-family: var(--font-label); font-size: var(--t-label); font-weight: 800; letter-spacing: normal; color: var(--accent-text); }
.rt-panel .at-effect { color: var(--ink); }
.rt-panel + .rt-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--af-hair); }
.scene.is-live .rt-panel + .rt-panel { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 900px) {
  .scene-stage { grid-template-columns: 1fr; }
  .rt-legend { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .rt-map { grid-template-columns: 1fr; gap: 14px; }
  .rt-hub { flex-direction: row; margin: 0; padding: 10px 14px; justify-content: flex-start; }
  .rt-hub img { width: 32px; height: 32px; border-radius: 8px; }
  .rt-col--in .rt-node::after, .rt-col--out .rt-node::before { display: none; }
}
@media (max-width: 560px) {
  /* A phone gets one 48px edit bar for the selected day instead of fourteen 28px buttons:
     rows are a single tappable line, the bar below does the editing. */
  .wk-day { grid-template-columns: 34px minmax(0, 1fr) 68px; gap: 10px; min-height: 48px; cursor: pointer; }
  .wk-step, .wk-own, .wk-cols { display: none; }
  .wk-day.is-sel .wk-track { box-shadow: 0 0 0 2px var(--ink); }
  .wk-day.is-sel .wk-name { color: var(--accent-text); }
  .scene.is-live .wk-bar { display: grid; }
  /* Controls stay in reach while the card below is long. 66px is the header. */
  /* One row that scrolls sideways, so the sticky bar stays 64px and never eats the screen. */
  .scene-controls { position: sticky; top: 66px; z-index: 6; margin: 0 -24px 16px; padding: 10px 24px; background: var(--header-bg);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .scene-controls::-webkit-scrollbar { display: none; }
  .scene-controls .seg-btn { flex: 0 0 auto; white-space: nowrap; }
  .rg-row { grid-template-columns: minmax(0, 1fr) 96px; row-gap: 6px; }
  .rg-bar { grid-column: 1 / 2; }
  .rg-st { grid-column: 2 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { transition: none !important; }
}

/* An author display rule beats the UA's [hidden], so say it outright. */
.scene [hidden] { display: none !important; }

/* ── Phone ergonomics: 44px floor, no tap flash, no double-tap zoom on controls ── */
.scene button, .scene label, .scene summary, .scene input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* The shared edit bar (shown on phones only, see the 560px block). */
.wk-bar {
  display: none; grid-template-columns: minmax(0, 1fr) 48px 48px; align-items: center; gap: 10px;
  margin-top: 14px; padding: 12px; border-radius: var(--r-chip); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.wk-bar-day { font-family: var(--font-mono); font-size: var(--t-dense); font-weight: 700; color: var(--ink); }
.wk-bar-btn {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--af-hair); background: var(--card); color: var(--ink);
  font-size: var(--t-h3); line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: border-color var(--m-quick), opacity var(--m-quick);
}
.wk-bar-btn:hover { border-color: var(--accent); }
.wk-bar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-bar-btn:disabled { opacity: 0.3; cursor: default; }
.wk-bar-own { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-dense); font-weight: 600; color: var(--ink); cursor: pointer; }
.wk-bar-chk {
  appearance: none; -webkit-appearance: none; margin: 0; width: 28px; height: 28px; border-radius: 8px; flex: none;
  border: 2px solid var(--ink-faint); background: transparent; display: grid; place-items: center; cursor: pointer;
  transition: background var(--m-quick), border-color var(--m-quick);
}
.wk-bar-chk:checked { background: var(--accent); border-color: var(--accent); }
.wk-bar-chk:checked::after { content: ""; width: 7px; height: 13px; border: solid var(--on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.wk-bar-chk:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wk-bar-chk:disabled { opacity: 0.35; cursor: default; }
.scene[data-mode="today"] .wk-bar { display: none !important; }

/* Today slider and the miss message live in the card, under the list, so the result is
   on screen where the rider is editing. */
.wk-dock { margin-top: 14px; }
.wk-dock .wk-dur { margin: 0; }
.wk-range { height: 44px; }

/* The own-way tag only speaks where the tick is not visible. */
@media (min-width: 561px) {
  .scene[data-mode="week"] .wk-tag { display: none !important; }
}