/* Session player (17 Sep 2026, BRIEF-SESSION-PLAYER.md).
   Full-width, no card chassis. Every colour comes from the atlas tokens so
   light mode (html[data-theme="light"]) resolves without extra rules, except
   the solid sheet ground, which the tokens only offer as a translucency. */

.sp {
  /* 16px is the phone gutter everywhere else in the app; the section it
     mounts in drops its own side padding below so the two never stack. */
  --sp-gutter: 16px;
  --sp-ink: var(--atl-text-hi, #EEF3F1);
  --sp-body: var(--atl-text-body, #BCC6C4);
  --sp-mut: var(--atl-text-mut, #8F9A98);
  --sp-dim: var(--atl-text-dim, #5A6664);
  --sp-line: var(--atl-border, rgba(255,255,255,0.085));
  --sp-line-strong: var(--atl-border-strong, rgba(255,255,255,0.15));
  --sp-divider: var(--atl-divider, rgba(255,255,255,0.06));
  --sp-nested: var(--atl-nested, rgba(255,255,255,0.045));
  --sp-fill: var(--atl-fill, rgba(255,255,255,0.08));
  --sp-fill-strong: var(--atl-fill-strong, rgba(255,255,255,0.14));
  --sp-up: var(--atl-up, #6CD693);
  --sp-up-text: var(--atl-up-deep, #6CD693);
  --sp-up-tint: var(--atl-up-tint, rgba(108,214,147,0.14));
  --sp-gold: var(--atl-gold, #D4B26A);
  --sp-gold-grad: var(--atl-gold-grad, linear-gradient(135deg, #E9CB84, #C9A557));
  --sp-on-gold: var(--atl-on-gold, #171207);
  --sp-gold-tint: var(--atl-gold-tint, rgba(212,178,106,0.15));
  --sp-watch: var(--atl-watch, #E8A857);
  --sp-watch-tint: var(--atl-watch-tint, rgba(232,168,87,0.14));
  --sp-concern: var(--atl-concern-deep, #E88A8A);
  --sp-concern-tint: var(--atl-concern-tint, rgba(232,138,138,0.14));
  --sp-info: var(--atl-info, #8EC4D4);
  --sp-info-tint: var(--atl-info-tint, rgba(142,196,212,0.14));
  --sp-bg: var(--atl-bg, #101514);
  --sp-sheet-solid: #182120;
  --sp-scrim: rgba(6,10,10,0.62);
  --sp-on-accent: var(--atl-ink, #101514);
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  color: var(--sp-body);
  font-family: var(--atl-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
html[data-theme="light"] .sp { --sp-sheet-solid: #FFFFFF; --sp-scrim: rgba(20,32,30,0.38); }
.sp.is-resting { padding-bottom: calc(230px + env(safe-area-inset-bottom, 0px)); }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp button, .sp input, .sp textarea { font-family: inherit; }
.sp button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Keyboard focus ring for buttons only; text fields show focus on their own
   border (18 Sep 2026, Harry: "green highlight boxes look horrible"). */
.sp button:focus-visible, .sp [tabindex]:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 2px; }
.sp input:focus, .sp textarea:focus, .sp input:focus-visible, .sp textarea:focus-visible { outline: none; }
.sp-sheet:focus, .sp-sheet:focus-visible { outline: none; }
.sp [hidden] { display: none !important; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The player carries its own in-session row; the app-wide banner steps aside. */
body.sp-on .atlas-session-banner { display: none !important; }
/* The section the player mounts in (18 Sep 2026, Harry's build 84 feedback).
   Sides: .atlas-section pads 16-24px and the player padded another 20px on
   top, so set rows ran in 318px of a 390px screen. The section gives up its
   side padding here and the player's own gutter is the only one.
   Top (native): the section's standard inset + 18px sat above the player's
   own sticky band, which then added its own 8px - a dead 26px strip under the
   status bar. The section now clears the status bar and nothing more, the
   same exemption the old tracker's banner had. */
.atlas-section:has(.sp) { padding-left: 0; padding-right: 0; }
html.native-app .atlas-section:has(.sp) { padding-top: env(safe-area-inset-top, 0px); }
/* The main column adds its own 16px top rhythm under 768px (atlas-sections.css,
   the old hamburger clearance) and nothing cleared it for the shell, so the
   band still sat 16px below the status bar (18 Sep 2026 second-wave harness:
   band top 24px with a 0 inset). The player's band is the top chrome here. */
html.native-app body.sp-on #app-main { padding-top: 0; }
/* Messages bubble clears the bottom bar while the player is open. */
/* Default spot is bottom-left: the tick column and rest controls live on the right. */
body.sp-on #msgr-pill { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; right: auto !important; }
body.sp-on.sp-sheet-open #msgr-pill { opacity: 0 !important; pointer-events: none !important; }

/* ── top block: one band, full bleed ─────────────────────────────────────── */
.sp-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  padding: 8px var(--sp-gutter) 8px;
  isolation: isolate;
}
/* Translucent + blurred so the band sits in the page instead of on it. The
   ground is a pseudo-element bled to the screen edges: the earlier box-shadow
   + clip-path trick clipped anything hanging below the band, which is how the
   sound menu ended up under the exercise card (18 Sep 2026, Harry). */
.sp-top::before {
  /* Exactly one viewport wide, centred under the band: bleeds to both edges
     without adding horizontal overflow (which would let the page scroll sideways). */
  /* Runs up under the status bar (Harry: "the banner should run to the top of
     the screen"); the band's content still starts below the inset. */
  content: ""; position: absolute; top: calc(-1 * env(safe-area-inset-top, 0px)); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: color-mix(in srgb, var(--sp-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--sp-divider);
}
.sp-live { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.sp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-up); box-shadow: 0 0 0 4px var(--sp-up-tint); }
.sp-live-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-up-text); }
.sp-live-t, .sp-live-step { font-size: 12px; color: var(--sp-mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-live-step:empty { display: none; }
.sp-live-exit { margin-left: auto; background: none; border: 0; padding: 6px 0 6px 12px; color: var(--sp-mut); font-size: 13px; font-weight: 600; min-height: 32px; }
.sp-top.is-done .sp-live-exit, .sp-top.is-done .sp-live-dot { visibility: hidden; }
.sp-prog { display: flex; gap: 4px; height: 4px; margin-top: 6px; }
.sp-prog span { flex: 1; border-radius: 2px; background: var(--sp-fill); position: relative; overflow: hidden; }
.sp-prog span.is-done { background: var(--sp-up); }
.sp-prog span.is-now { background: var(--sp-fill-strong); }
.sp-prog span.is-now i { position: absolute; inset: 0 auto 0 0; background: var(--sp-up); transition: width .25s ease-out; }
.sp-hdr { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sp-hdr-gap { flex: 1; }
.sp-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px;
  background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 999px;
  color: var(--sp-body); font-size: 12.5px; font-weight: 600; padding: 0 12px; white-space: nowrap;
}
.sp-chip--icon { padding: 0 12px 0 9px; }
.sp-chip.is-hidden { visibility: hidden; }
.sp-top.is-done .sp-chip[data-sp-back] { visibility: hidden; }
@media (max-width: 370px) { .sp-chip span { display: none; } .sp-chip { padding: 0 10px; } }
.sp-snd { position: relative; }
.sp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
  background: var(--sp-sheet-solid); border: 1px solid var(--sp-line-strong); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); display: none;
}
.sp-menu.is-open { display: block; }
.sp-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0;
  border-radius: 10px; padding: 10px; color: var(--sp-body); font-size: 14px; font-weight: 600; text-align: left;
}
.sp-menu button small { display: block; font-size: 12px; font-weight: 400; color: var(--sp-mut); }
.sp-menu button.is-on { background: var(--sp-fill); color: var(--sp-ink); }
.sp-ck { margin-left: auto; color: var(--sp-up-text); opacity: 0; }
.sp-menu button.is-on .sp-ck { opacity: 1; }

/* ── page ─────────────────────────────────────────────────────────────────── */
.sp-page { padding: 12px var(--sp-gutter) 0; }
.sp h1 { font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--sp-ink); margin: 6px 0 4px; letter-spacing: -.01em; text-wrap: balance; }
.sp h2 { font-size: 17px; font-weight: 700; color: var(--sp-ink); margin: 26px 0 8px; }
.sp p { margin: 0 0 10px; }
.sp-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-gold); margin: 0 0 2px; }
.sp-sub { color: var(--sp-mut); font-size: 13.5px; margin: 0 0 14px; }
.sp-muted { color: var(--sp-mut); font-size: 13px; margin: 8px 0 0; }
.sp-flag { color: var(--sp-watch); font-size: 13px; margin-top: 12px; }
.sp-hint { color: var(--sp-mut); font-size: 12.5px; line-height: 1.5; margin: 12px 0 10px; }
.sp-foot { color: var(--sp-mut); font-size: 12.5px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sp-divider); }
/* 17 Sep 2026 - two minutes of paced breathing before the first set. */
.sp-breath { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--sp-divider); border-radius: 14px; }
.sp-breath-t { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-gold); }
.sp-breath-s { color: var(--sp-mut); font-size: 13px; }
.sp-breath-go {
  align-self: flex-start; margin-top: 8px; min-height: 36px; padding: 0 16px; border-radius: 18px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--sp-gold);
  background: transparent; border: 1px solid var(--sp-gold);
}
.sp-lbl {
  display: flex; justify-content: space-between; align-items: center; min-height: 32px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-mut);
  margin: 26px 0 8px;
}
.sp-link { background: none; border: 0; padding: 6px 0; color: var(--sp-up-text); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.sp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; margin: 2px 6px 2px 0; }
.sp-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-pill--up { background: var(--sp-up-tint); color: var(--sp-up-text); }
.sp-pill--watch { background: var(--sp-watch-tint); color: var(--sp-watch); }
.sp-pill--gold { background: var(--sp-gold-tint); color: var(--sp-gold); }
.sp-pill--info { background: var(--sp-info-tint); color: var(--sp-info); }

.sp-meta { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 4px; }
.sp-meta div { font-size: 12.5px; color: var(--sp-mut); }
.sp-meta b { display: block; color: var(--sp-ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.sp-plan { list-style: none; padding: 0; margin: 0; }
.sp-plan li { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--sp-divider); }
.sp-plan li:first-child { border-top: 0; }
.sp-plan li.is-grouped + li.is-grouped { border-top-style: dashed; }
.sp-plan-n { font-size: 12px; font-weight: 700; color: var(--sp-dim); font-variant-numeric: tabular-nums; }
.sp-plan-n.is-gold { color: var(--sp-gold); }
.sp-plan-nm { color: var(--sp-ink); font-weight: 600; }
.sp-plan-why { display: block; color: var(--sp-mut); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.sp-plan-rx { font-size: 13px; color: var(--sp-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── exercise ─────────────────────────────────────────────────────────────── */
.sp-tabs { display: flex; gap: 6px; margin-top: 12px; }
.sp-tabs button { flex: 1; min-width: 0; text-align: left; background: var(--sp-nested); border: 1px solid var(--sp-divider); border-radius: 12px; padding: 9px 12px; color: var(--sp-mut); }
.sp-tabs button.is-on { background: var(--sp-fill); border-color: var(--sp-line-strong); color: var(--sp-ink); }
.sp-tabs b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sp-gold); }
.sp-tabs span { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-video {
  position: relative; margin: 12px calc(-1 * var(--sp-gutter)) 0; aspect-ratio: 16 / 9; max-width: none;
  background: #0b0f0e; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sp-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.sp-video iframe, .sp-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.sp-video-play { position: relative; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); color: #fff; display: flex; align-items: center; justify-content: center; }
.sp-video-play svg { margin-left: 3px; }
.sp-video-link { display: inline-block; margin-top: 10px; color: var(--sp-up-text); font-weight: 600; font-size: 14px; }
/* Playing: a quiet way to the full video (controls=0 hides YouTube's own).
   Failed: the poster comes back with the way out on it. */
.sp-video-alt { margin: 6px 0 0; text-align: right; }
.sp-video-alt .sp-link { font-size: 12.5px; color: var(--sp-mut); min-height: 32px; }
.sp-video.is-failed img { opacity: .55; }
.sp-video.is-failed .sp-video-play { display: none; }
.sp-video-open {
  position: relative; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Under the name, above the video: what the exercise works (18 Sep 2026). */
.sp-muscles { color: var(--sp-mut); font-size: 13.5px; margin: 0 0 2px; }
/* Prescription as one line (18 Sep 2026, Harry: the five cells "look
   garbage" at 390 - labels wrapped). Values in ink, words in muted, wraps
   naturally when long. */
.sp-rx { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--sp-mut); }
.sp-rx b { color: var(--sp-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-rx i { font-style: normal; color: var(--sp-dim); margin: 0 3px; }
.sp-rx small { font-size: 12.5px; color: var(--sp-gold); }
/* Intensifier: named and described, above the load mode. */
.sp-intens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.sp-intens .sp-pill { margin: 0; }
.sp-intens-d { font-size: 13.5px; color: var(--sp-body); line-height: 1.4; flex: 1 1 100%; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-chips span { font-size: 12px; font-weight: 600; color: var(--sp-body); background: var(--sp-nested); border: 1px solid var(--sp-divider); border-radius: 999px; padding: 4px 10px; }
.sp-chips span.is-pri { color: var(--sp-ink); background: var(--sp-fill); }
.sp-chips span.is-gold { color: var(--sp-gold); background: var(--sp-gold-tint); border-color: transparent; }

/* The chip row scrolls under the gutter so the last chip peeks in from the edge. */
/* Every mode on screen (Harry: "Inverse chains isn't visible at all"): the
   chips wrap to a second line instead of scrolling off the edge. */
.sp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-seg button { flex: 0 0 auto; height: 34px; font-size: 12.5px; font-weight: 600; color: var(--sp-mut); background: none; border: 1px solid var(--sp-line); border-radius: 999px; padding: 0 13px; white-space: nowrap; }
.sp-seg button.is-on { color: var(--sp-ink); background: var(--sp-fill-strong); border-color: var(--sp-line-strong); }

/* ── sets: fixed square cells on one grid ─────────────────────────────────── */
.sp-sets { display: flex; flex-direction: column; }
.sp-round { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-gold); padding: 16px 0 4px; border-top: 1px solid var(--sp-divider); }
.sp-round:first-child { border-top: 0; padding-top: 2px; }
.sp-set { border-top: 1px solid var(--sp-divider); padding: 10px 0; }
.sp-set:first-child, .sp-round + .sp-set { border-top: 0; }
/* Superset rows: the letter leads the caption; the exercise in focus is the
   lit one (18 Sep 2026, Harry: "D1 and D2 need to be improved"). */
.sp-cap { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sp-mut); margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cap b { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sp-gold); background: var(--sp-gold-tint); border-radius: 6px; padding: 2px 6px; }
.sp-cap small { font-size: 12px; font-weight: 500; color: var(--sp-mut); }
.sp-set.is-active { margin: 0 calc(-1 * var(--sp-gutter)); padding-left: calc(var(--sp-gutter) - 3px); padding-right: var(--sp-gutter); border-left: 3px solid var(--sp-gold); background: color-mix(in srgb, var(--sp-gold) 5%, transparent); }
.sp-set.is-active .sp-cap { color: var(--sp-ink); }
.sp-set.is-active + .sp-set.is-active { border-top-color: transparent; }
.sp-set-row { display: grid; grid-template-columns: 40px minmax(0,1fr) minmax(0,1fr) 58px 52px; align-items: center; gap: 8px; }
.sp-set-row + .sp-set-row { margin-top: 8px; }
.sp-k { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: var(--sp-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sp-k small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-mut); margin-top: 2px; }
.sp-k.is-ss { color: var(--sp-gold); font-size: 15px; }
.sp-k.is-acc { color: var(--sp-gold); font-size: 18px; font-weight: 600; }
.sp-k.is-drop { color: var(--sp-gold); font-size: 13px; letter-spacing: .02em; }
.sp-cell {
  height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 12px; padding: 4px 6px; min-width: 0;
}
/* Focus is the border only, in gold, no fill - the same on every value cell. */
.sp-cell:focus-within { border-color: var(--sp-gold); }
/* One type scale for every value cell: kg, reps, RPE, added, eccentric, chains. */
.sp-cell input, .sp-cell b {
  font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
  color: var(--sp-ink); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
}
.sp-cell input { width: 100%; min-width: 0; height: 24px; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; text-align: center; outline: none; }
.sp-cell input::placeholder { color: var(--sp-dim); }
.sp-cell small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-mut); white-space: nowrap; }
.sp-cell.is-bw b { font-size: 15px; letter-spacing: .06em; color: var(--sp-mut); }
/* Second line for the extra load (eccentric, chains, bands, assist): spans
   the three value columns, label left, a roomy field right. */
.sp-set-row.is-acc { margin-top: 8px; }
.sp-cell.is-wide { grid-column: 2 / 5; flex-direction: row; justify-content: space-between; gap: 12px; height: 52px; padding: 0 6px 0 14px; }
.sp-cell.is-wide small { color: var(--sp-gold); flex: 0 0 auto; }
.sp-cell.is-wide input { flex: 0 0 auto; width: 96px; min-width: 56px; height: 40px; text-align: center; background: var(--sp-fill); border-radius: 9px; }
.sp-rpe { cursor: pointer; }
.sp-tick { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--sp-line-strong); background: none; color: var(--sp-dim); display: flex; align-items: center; justify-content: center; padding: 0; justify-self: end; transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out; }
.sp-tick svg { width: 20px; height: 20px; }
.sp-set.is-done .sp-tick { background: var(--sp-up); border-color: var(--sp-up); color: var(--sp-on-accent); }
.sp-set.is-done .sp-cell input, .sp-set.is-done .sp-cell b { color: var(--sp-body); }
/* Quick strip in halves; the typed field is the truth. */
.sp-rpe-pick { display: flex; gap: 6px; margin: 8px calc(-1 * var(--sp-gutter)) 0; padding: 0 var(--sp-gutter) 2px; overflow-x: auto; scrollbar-width: none; }
.sp-rpe-pick::-webkit-scrollbar { display: none; }
.sp-rpe-pick button { flex: 0 0 auto; min-width: 46px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--sp-line); background: var(--sp-nested); color: var(--sp-body); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-rpe-pick button.is-on { background: var(--sp-gold-tint); border-color: var(--sp-gold); color: var(--sp-ink); }

.sp-last { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.sp-last div { font-size: 12.5px; color: var(--sp-mut); }
.sp-last b { display: block; color: var(--sp-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; }
.sp-call, .sp-cue { padding: 2px 0 2px 12px; font-size: 14px; color: var(--sp-body); margin-top: 14px; }
.sp-call { border-left: 2px solid var(--sp-gold); }
.sp-cue { border-left: 2px solid var(--sp-info); }
.sp-call em, .sp-cue em { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.sp-call em { color: var(--sp-gold); }
.sp-cue em { color: var(--sp-info); }

/* notes */
.sp-scope { display: inline-flex; background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 999px; padding: 3px; }
.sp-scope button { background: none; border: 0; border-radius: 999px; height: 32px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--sp-mut); }
.sp-scope button.is-on { background: var(--sp-fill-strong); color: var(--sp-ink); }
.sp-note, .sp-text {
  width: 100%; background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 12px;
  color: var(--sp-ink); font-size: 16px; padding: 12px 14px; line-height: 1.5;
}
.sp-note { min-height: 92px; resize: vertical; display: block; }
.sp-note::placeholder, .sp-text::placeholder { color: var(--sp-dim); }
/* The note on the page is a summary; editing happens in the sheet. */
.sp-note-sum { width: 100%; display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 14px; padding: 12px 14px; color: var(--sp-body); }
.sp-note-sum small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-gold); }
.sp-note-sum span { font-size: 14px; line-height: 1.45; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sp-sheet .sp-scope { margin-top: 6px; }
/* Pinned mic in the sheet head; the field itself hosts dictation (no floating control). */
.sp-mic { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--sp-nested); border: 1px solid var(--sp-line); color: var(--sp-body); font-size: 13px; font-weight: 600; }
.sp-mic-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-gold); }
.sp-mic.is-rec { border-color: var(--sp-concern); color: var(--sp-ink); }
.sp-mic.is-rec .sp-mic-dot { background: var(--sp-concern); animation: sp-mic-pulse 1s ease-in-out infinite; }
.sp-mic.is-busy { color: var(--sp-mut); }
@keyframes sp-mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sp-sheet .sp-note { margin-top: 10px; min-height: 88px; resize: none; overflow: auto; }
.sp-sheet [data-sp-note-state]:empty { display: none; }
.sp-sheet [data-sp-note-save] { margin-top: 8px; }
.sp-btn-sm { flex: 0 0 auto; background: var(--sp-up); color: var(--sp-on-accent); border: 0; border-radius: 999px; padding: 0 16px; height: 38px; font-size: 13px; font-weight: 700; }
.sp-btn-sm[disabled] { opacity: .4; cursor: default; }

.sp-det { border-top: 1px solid var(--sp-divider); }
.sp-det:last-of-type { border-bottom: 1px solid var(--sp-divider); }
.sp-det summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 14.5px; font-weight: 600; color: var(--sp-body); cursor: pointer; }
.sp-det summary::-webkit-details-marker { display: none; }
.sp-det summary::after { content: "+"; color: var(--sp-mut); font-weight: 400; font-size: 20px; }
.sp-det[open] summary { color: var(--sp-ink); }
.sp-det[open] summary::after { content: "–"; }
.sp-det > div { padding: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--sp-body); white-space: pre-line; }

/* ── bottom action ────────────────────────────────────────────────────────── */
.sp-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; }
/* Keyboard up (18 Sep 2026, Harry: "Exercise complete shouldn't really be
   visible", "Done ... less button"): the progress bar steps out from under
   the keyboard, and the app-wide Done bar is a slim strip with plain text. */
body.sp-on.atlas-kb-open .sp-cta-row { display: none; }
body.sp-on .atlas-kb-done { padding: 0 var(--atl-gutter, 16px) 0; min-height: 36px; align-items: center; background: color-mix(in srgb, var(--atl-bg, #101514) 92%, transparent); border-top: 1px solid var(--atl-divider, rgba(255,255,255,.06)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.sp-on .atlas-kb-done-btn { background: none; border: 0; box-shadow: none; padding: 0 4px; min-height: 36px; border-radius: 0; color: var(--atl-gold, #D4B26A); font-size: 15px; font-weight: 600; letter-spacing: 0; }
body.sp-on.atlas-kb-open .sp-sheet { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
body.coach-view .sp-cta { bottom: 36px; }
.sp-cta > * { pointer-events: auto; }
.sp-cta-row, .sp-rest { max-width: 560px; margin-left: auto; margin-right: auto; }
.sp-cta-row {
  display: flex; gap: 8px;
  padding: 10px var(--sp-gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--sp-bg);
  box-shadow: 0 0 0 100vmax var(--sp-bg), 0 -1px 0 100vmax var(--sp-divider);
  clip-path: inset(-1px -100vmax 0);
}
.sp-btn { flex: 1; min-height: 54px; border: 0; border-radius: 14px; background: var(--sp-up); color: var(--sp-on-accent); font-size: 16px; font-weight: 700; padding: 14px 16px; }
.sp-btn.is-gold { background: var(--sp-gold-grad); color: var(--sp-on-gold); }
.sp-btn--sec { flex: 0 0 auto; background: var(--sp-fill); color: var(--sp-ink); font-weight: 600; }
.sp-btn--block { width: 100%; flex: none; }
.sp-btn[disabled] { opacity: .45; cursor: default; }
.sp-btn:active { transform: scale(.985); }
/* Rest bar (18 Sep 2026, Harry: "the next gets cut off"): the clock and its
   two buttons share the first line; the next-set line has the whole width
   underneath and wraps instead of ellipsising. */
.sp-rest {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 8px; row-gap: 6px;
  margin-bottom: 8px; width: calc(100% - 2 * var(--sp-gutter)); max-width: calc(560px - 2 * var(--sp-gutter));
  padding: 10px 12px 12px 14px; border-radius: 14px; background: var(--sp-sheet-solid); border: 1px solid var(--sp-line-strong);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.sp-rest-t { font-size: 28px; font-weight: 700; color: var(--sp-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.sp-rest-t.is-over { color: var(--sp-watch); }
.sp-rest-m { grid-column: 1 / -1; min-width: 0; font-size: 13.5px; color: var(--sp-mut); line-height: 1.35; overflow-wrap: anywhere; }
.sp-rest-m b { color: var(--sp-body); font-weight: 600; }
.sp-rest-m i { font-style: normal; color: var(--sp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-rest button { background: var(--sp-fill); color: var(--sp-body); border: 0; border-radius: 999px; padding: 0 14px; height: 38px; font-size: 13px; font-weight: 600; }
.sp-rest-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--sp-up); }

/* ── sheets: solid ground ─────────────────────────────────────────────────── */
.sp-scrim { position: fixed; inset: 0; z-index: 50; background: var(--sp-scrim); }
.sp-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 560px; margin: 0 auto;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sp-sheet-solid); border: 1px solid var(--sp-line-strong); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 10px var(--sp-gutter) calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  transform: translateY(105%); transition: transform .25s ease-out;
}
.sp-sheet.is-open { transform: translateY(0); }
.sp-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--sp-fill-strong); margin: 0 auto 12px; }
.sp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-sheet h3 { font-size: 18px; font-weight: 700; color: var(--sp-ink); margin: 0 0 2px; }
.sp-sheet .sp-sub { margin-top: 2px; }
.sp-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sp-fill); color: var(--sp-body); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-sheet .sp-btn { width: 100%; margin-top: 16px; }

/* session order */
.sp-order { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.sp-order button {
  width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 14px; padding: 12px 12px 12px 10px; text-align: left; color: var(--sp-body);
}
.sp-order button[disabled] { cursor: default; }
.sp-order li.is-now button { background: var(--sp-nested); border-color: var(--sp-line-strong); }
.sp-order-mark { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--sp-line-strong); display: flex; align-items: center; justify-content: center; color: var(--sp-on-accent); }
.sp-order-mark svg { width: 14px; height: 14px; }
.sp-order li.is-now .sp-order-mark { border-color: var(--sp-up); box-shadow: inset 0 0 0 5px var(--sp-sheet-solid); background: var(--sp-up); }
.sp-order li.is-done .sp-order-mark { background: var(--sp-up); border-color: var(--sp-up); }
.sp-order-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-order-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-gold); }
.sp-order-ex { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 6px; align-items: baseline; }
.sp-order-ex > b { font-size: 12.5px; font-weight: 700; color: var(--sp-mut); font-variant-numeric: tabular-nums; }
.sp-order-nm { display: block; font-size: 15px; font-weight: 600; color: var(--sp-ink); line-height: 1.3; }
.sp-order li.is-done .sp-order-nm { color: var(--sp-mut); }
.sp-order-ex small { display: block; font-size: 12.5px; color: var(--sp-mut); margin-top: 1px; }
.sp-order-prog { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-up-text); white-space: nowrap; }
.sp-order-prog small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sp-mut); font-variant-numeric: tabular-nums; }

/* swap + exit */
.sp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-choices button { background: none; border: 1px solid var(--sp-line-strong); border-radius: 999px; padding: 0 14px; height: 38px; font-size: 13px; font-weight: 600; color: var(--sp-mut); }
.sp-choices button.is-on { background: var(--sp-fill-strong); color: var(--sp-ink); border-color: transparent; }
.sp-picks { list-style: none; padding: 0; margin: 4px 0 0; }
.sp-picks li { border-top: 1px solid var(--sp-divider); }
.sp-picks li:first-child { border-top: 0; }
.sp-picks li.sp-muted { border: 0; padding: 6px 0; }
.sp-picks button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--sp-body); min-height: 48px; }
.sp-picks button small { display: block; font-size: 12px; font-weight: 400; color: var(--sp-mut); }
.sp-picks button.is-on { color: var(--sp-up-text); }
.sp-picks.is-top { background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 14px; padding: 0 14px; }
.sp-pick-n { width: 24px; height: 24px; border-radius: 50%; background: var(--sp-fill); color: var(--sp-mut); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-picks button.is-on .sp-pick-n { background: var(--sp-up); color: var(--sp-on-accent); }
.sp-text { margin-top: 4px; }
.sp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sp-action { text-align: left; background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 14px; padding: 14px 16px; color: var(--sp-body); }
.sp-action b { display: block; font-size: 15px; color: var(--sp-ink); margin-bottom: 2px; }
.sp-action span { font-size: 12.5px; color: var(--sp-mut); line-height: 1.45; }
.sp-action.is-danger b { color: var(--sp-concern); }
.sp-action.is-danger.is-armed { background: var(--sp-concern-tint); border-color: var(--sp-concern); }

/* ── summary ──────────────────────────────────────────────────────────────── */
.sp-sum-bar { height: 6px; border-radius: 3px; background: var(--sp-fill); overflow: hidden; margin: 14px 0 12px; }
.sp-sum-bar i { display: block; height: 100%; background: var(--sp-up); border-radius: 3px; }
.sp-sum-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.sp-sum-stats div { background: var(--sp-nested); border: 1px solid var(--sp-line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.sp-sum-stats b { display: block; font-size: 20px; font-weight: 700; color: var(--sp-ink); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.sp-sum-stats b small { font-size: 11px; font-weight: 600; color: var(--sp-mut); }
.sp-sum-stats span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-mut); margin-top: 2px; }
@media (max-width: 360px) { .sp-sum-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Quick feedback on the same screen (18 Sep 2026): a question, its options. */
.sp-q { margin-top: 14px; }
.sp-q-l { display: block; font-size: 14px; font-weight: 600; color: var(--sp-ink); margin-bottom: 8px; }
.sp-q-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.sp-q-scale button { height: 40px; min-width: 0; padding: 0; border-radius: 9px; border: 1px solid var(--sp-line); background: var(--sp-nested); color: var(--sp-body); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-q-opts button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sp-line); background: var(--sp-nested); color: var(--sp-body); font-size: 13px; font-weight: 600; }
.sp-q button.is-on { background: var(--sp-gold-tint); border-color: var(--sp-gold); color: var(--sp-ink); }
.sp-sum-det { margin-top: 22px; }
.sp-sum-det summary small { font-weight: 500; color: var(--sp-mut); margin-left: 6px; }
.sp-finish-quiet { display: flex; justify-content: center; gap: 22px; margin-top: 6px; }
.sp-finish-quiet .sp-link { min-height: 40px; color: var(--sp-mut); }
.sp-pending, .sp-log { list-style: none; padding: 0; margin: 0; }
.sp-pending li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sp-divider); color: var(--sp-ink); font-weight: 600; }
.sp-pending li:first-child { border-top: 0; }
.sp-log li { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--sp-divider); }
.sp-log li:first-child { border-top: 0; }
.sp-log-l { font-size: 12.5px; font-weight: 700; color: var(--sp-mut); padding-top: 2px; }
.sp-log-nm { color: var(--sp-ink); font-weight: 600; font-size: 14.5px; min-width: 0; }
.sp-log-nm small { display: block; font-size: 12.5px; color: var(--sp-mut); font-weight: 400; margin-top: 2px; }
.sp-log-bar { display: block; height: 3px; border-radius: 2px; background: var(--sp-fill); margin-top: 8px; overflow: hidden; }
.sp-log-bar i { display: block; height: 100%; background: var(--sp-up); }
.sp-log-v { color: var(--sp-body); font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 2px; }
.sp-log-v.is-full { color: var(--sp-up-text); }
.sp-finish { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.sp-finish .sp-btn--sec { flex: 1; }

/* completeSession swaps the finish button for its score + review cards. Those
   carry dark-only inline colours; bring them onto the tokens in both themes. */
.sp-summary .session-complete-summary, .sp-summary .post-review-card { margin-top: 16px; background: var(--sp-nested) !important; border: 1px solid var(--sp-line) !important; border-radius: 16px !important; color: var(--sp-body) !important; }
.sp-summary .session-complete-summary h3 { color: var(--sp-ink) !important; }
.sp-summary .session-complete-summary [style*="color:#5a6577"],
.sp-summary .session-complete-summary [style*="color:#8F9A98"],
.sp-summary .session-complete-summary .atlas-score-stat-lbl { color: var(--sp-mut) !important; }
.sp-summary .session-complete-summary [style*="color:#C8CFD9"],
.sp-summary .session-complete-summary .atlas-score-stat-val { color: var(--sp-ink) !important; }
.sp-summary .session-complete-summary [style*="border-top:1px solid rgba(255,255,255"] { border-top-color: var(--sp-divider) !important; }
.sp-summary .atlas-score-bar-track { background: var(--sp-fill) !important; }
html[data-theme="light"] .sp-summary .post-review-card * { border-color: var(--sp-line); }
/* legacy fuel / review cards hardcode dark-theme text colours inline; map them to tokens */
html[data-theme="light"] .sp-summary [style*="color:#EEF3F1"], html[data-theme="light"] .sp-summary [style*="color: #EEF3F1"] { color: var(--sp-ink) !important; }
html[data-theme="light"] .sp-summary [style*="color:#C8CFD9"], html[data-theme="light"] .sp-summary [style*="color: #C8CFD9"], html[data-theme="light"] .sp-summary [style*="color:#BCC6C4"] { color: var(--sp-body) !important; }
html[data-theme="light"] .sp-summary [style*="color:#8F9A98"], html[data-theme="light"] .sp-summary [style*="color:#5a6577"], html[data-theme="light"] .sp-summary [style*="color: #5a6577"] { color: var(--sp-mut) !important; }
html[data-theme="light"] .sp-summary .post-review-card { color: var(--sp-body) !important; }

.sp-toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 40px); background: var(--sp-sheet-solid); color: var(--sp-ink);
  border: 1px solid var(--sp-line-strong); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

@media (prefers-reduced-motion: reduce) {
  .sp-sheet, .sp-prog span.is-now i, .sp-tick { transition: none; }
}