/* 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)); }
/* The summary hides the CTA bar (updateCta), so it must not keep the room
   reserved for it - 19 Sep 2026, Harry: "Lots of dead space at the bottom of
   the post session report". A normal gutter is all the last control needs. */
.sp.is-summary { padding-bottom: calc(28px + 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; }
/* Sets header with two rest links (cluster pages offer the intra-rest first). */
.sp-lbl-acts { display: inline-flex; align-items: center; gap: 14px; }

.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 ─────────────────────────────────────────────────────────────── */
/* Landing on an exercise (18 Sep 2026): the name sits directly under the band
   and lights for a moment. */
.sp h1.is-landed { animation: sp-land 1.3s ease-out; }
@keyframes sp-land { 0%, 30% { color: var(--sp-gold); } 100% { color: var(--sp-ink); } }
.sp-ex h1 + .sp-pill { margin-top: 2px; }
/* 21 Sep 2026 (Harry, build 93, re-reported: "D1 and D2 doesn't show full
   names. One column, 2 rows. Flip it and cover the width"). Side by side, two
   ~170px chips clipped both names to "Cable Triceps Pushd..." / "Dumbbell
   Seated Sin...". Stacked now: one column, each chip the full width, letter
   and name on one line, and the name wraps rather than ellipsises. Measured
   in Chrome at 390px (test/session-player-superset-tabs.test.mjs). */
.sp-tabs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sp-tabs button { display: flex; align-items: baseline; gap: 10px; width: 100%; min-width: 0; text-align: left; background: var(--sp-nested); border: 1px solid var(--sp-divider); border-radius: 12px; padding: 10px 12px; color: var(--sp-mut); font-family: inherit; }
.sp-tabs button.is-on { background: var(--sp-fill); border-color: var(--sp-line-strong); color: var(--sp-ink); }
.sp-tabs b { flex: none; display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sp-gold); }
.sp-tabs span { flex: 1; min-width: 0; display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }

.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-demo { cursor: pointer; }
.sp-video.is-demo video { object-fit: contain; }
.sp-video.is-demo.is-playing .sp-video-play { opacity: 0; pointer-events: none; }
.sp-video.is-demo .sp-video-play { transition: opacity .2s; }
.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. */
/* 19 Sep 2026 (Harry, TestFlight 90: "Sets, reps, load etc - give it a little
   more space down away from video. Host in a banner."). It was bare text 12px
   under the video, so the prescription - the one line you look at between sets
   - read as a caption on the clip rather than as the instruction. It is a
   banner now, with room above it. */
/* 20 Sep 2026: measured, not read. `.sp p { margin: 0 0 10px }` (line ~149) is
   .sp + p = two, and `.sp-rx` is one, so the 18px above the banner was being
   thrown away in the cascade and the banner still sat FLUSH on the clip - the
   half of Harry's note that was about space, not chrome. Scoped to `.sp .sp-rx`
   so it outranks the reset. Every other p-class in this file
   (.sp-sub, .sp-muted, .sp-flag, .sp-hint, .sp-muscles, .sp-cap,
   .sp-video-alt) loses its margins the same way; left alone here because
   changing them all moves spacing on every page of the player at once. */
.sp .sp-rx {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--sp-nested);
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  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; }
/* A removable row is six columns, not five (20 Sep 2026, measured at 393: the
   x was a sixth child of a five-column grid, so it dropped onto an implicit
   row of its own under the tick). The numbers give it back out of the fixed
   columns, so the two value cells stay the widest thing on the row. */
.sp-set-row.has-x { grid-template-columns: 34px minmax(0,1fr) minmax(0,1fr) 52px 48px 30px; gap: 6px; }
.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; }
/* Intensifier rows (18 Sep 2026): "+ partials" label, a hold in seconds, an
   AMRAP final set, clusters inside a working set. */
.sp-k.is-plus { font-size: 20px; line-height: 1; }
.sp-k.is-plus small { letter-spacing: .02em; font-size: 9px; }
.sp-cell input.is-amrap::placeholder { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--sp-gold); }
.sp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 48px; }
.sp-cl { display: inline-flex; align-items: baseline; gap: 3px; min-height: 28px; padding: 0 9px; border-radius: 8px; background: var(--sp-nested); border: 1px solid var(--sp-divider); color: var(--sp-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 26px; }
.sp-cl small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-mut); }
.sp-cl-rest { font-size: 11.5px; font-weight: 600; color: var(--sp-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-set.is-done .sp-cl { color: var(--sp-body); }
.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; }
/* 24 Sep 2026: the same pinned mic in the finish screen's Session note label
   row (H6, "Dictation symbol floating too front"). The row is uppercase and
   tracked; the button is not. */
.sp-lbl .sp-mic { margin-right: 0; text-transform: none; letter-spacing: 0; }
.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; }
/* 21 Sep 2026: the keyboard Done bar is one bar everywhere (atlas-tabbar.css); the session-player override is gone. */
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);
}
/* 22 Sep 2026 (Harry): the gold A keeps its bottom-right seat in a session
   (atlas-tabbar.css, body.session-active .atlas-navfab), so the row ends
   before it: gutter + the 60px disc + 10px air. Phone widths only - from
   ~700px the 560px row is already centred clear of a corner-anchored A. */
@media (max-width: 700px) {
  body.atlas-navfab-on .sp-cta-row { padding-right: calc(var(--sp-gutter) + var(--atl-bar-h, 60px) + 10px); }
}
.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; position: relative; }
/* 27 Sep 2026 (audit): the sheet close measured 36px. The disc keeps its size;
   the tap target is padded to 44px on a pseudo-element so the header row does
   not move. */
.sp-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.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); }
/* Next session on the completion screen (18 Sep 2026): today's top set, an
   arrow, next week's; the recommendation and its reason on one line under. */
.sp-next-h { color: var(--sp-body); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.sp-next-list { list-style: none; padding: 0; margin: 0; }
.sp-next-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--sp-divider); }
.sp-next-list li:first-child { border-top: 0; padding-top: 4px; }
.sp-next-nm { color: var(--sp-ink); font-weight: 600; font-size: 14.5px; }
.sp-next-ln { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: 17px; font-weight: 700; color: var(--sp-body); font-variant-numeric: tabular-nums; }
.sp-next-ln i { font-style: normal; color: var(--sp-dim); font-weight: 400; }
.sp-next-ln b { font-weight: 700; color: var(--sp-ink); }
.sp-next-ln b.is-push { color: var(--sp-up-text); }
.sp-next-ln b.is-back { color: var(--sp-watch); }
.sp-next-ln small { font-size: 12.5px; font-weight: 600; color: var(--sp-mut); }
.sp-next-why { font-size: 12.5px; color: var(--sp-mut); line-height: 1.45; }
.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; }

/* Next session on the completion screen (18 Sep 2026): today's top set, an
   arrow, next week's; the recommendation and its reason under it. */
.sp-next-h { color: var(--sp-body); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.sp-next-list { list-style: none; padding: 0; margin: 0; }
.sp-next-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--sp-divider); }
.sp-next-list li:first-child { border-top: 0; padding-top: 4px; }
.sp-next-nm { color: var(--sp-ink); font-weight: 600; font-size: 14.5px; }
.sp-next-ln { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: 17px; font-weight: 700; color: var(--sp-body); font-variant-numeric: tabular-nums; }
.sp-next-ln i { font-style: normal; color: var(--sp-dim); font-weight: 400; }
.sp-next-ln b { font-weight: 700; color: var(--sp-ink); }
.sp-next-ln b.is-push { color: var(--sp-up-text); }
.sp-next-ln b.is-back { color: var(--sp-watch); }
.sp-next-ln small { font-size: 12.5px; font-weight: 600; color: var(--sp-mut); }
.sp-next-rec { font-size: 12px; font-weight: 600; color: var(--sp-mut); }
.sp-next-why { font-size: 12.5px; color: var(--sp-mut); line-height: 1.45; }

/* Landing on an exercise: the name lights for a moment under the band. */
.sp h1.is-landed { animation: sp-land 1.3s ease-out; }
@keyframes sp-land { 0%, 30% { color: var(--sp-gold); } 100% { color: var(--sp-ink); } }

/* Sets header with two rest links (cluster pages offer the intra-rest first). */
.sp-lbl-acts { display: inline-flex; align-items: center; gap: 14px; }

/* Intensifier rows (18 Sep 2026): "+ partials" label, hold in seconds,
   AMRAP final set, clusters inside a working set. */
.sp-k.is-plus { font-size: 20px; line-height: 1; }
.sp-k.is-plus small { letter-spacing: .02em; font-size: 9px; }
.sp-cell input.is-amrap::placeholder { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--sp-gold); }
.sp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 48px; }
.sp-cl { display: inline-flex; align-items: baseline; gap: 3px; min-height: 28px; padding: 0 9px; border-radius: 8px; background: var(--sp-nested); border: 1px solid var(--sp-divider); color: var(--sp-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 26px; }
.sp-cl small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-mut); }
.sp-cl-rest { font-size: 11.5px; font-weight: 600; color: var(--sp-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-set.is-done .sp-cl { color: var(--sp-body); }

.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; }
  .sp h1.is-landed { animation: none; }
}

/* Remove an added set (19 Sep 2026, Harry: "of adding, should also be able to
   remove"). Only ever rendered on a row past the prescribed count that is not
   logged, so it can never take a logged set away; a row with typed numbers on
   it asks first. Full row height so it is a real target beside the tick. */
.sp-set-x {
  flex: none;
  width: 30px; height: 44px;
  margin-left: 2px;
  border: none;
  background: none;
  color: var(--atlas-muted, #8F9A98);
  font-size: 19px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  font-family: inherit;
}
.sp-set-x:hover { color: var(--atlas-text, #EEF3F1); background: rgba(255,255,255,0.06); }

/* Ask chip with an answer waiting (19 Sep 2026, Harry: "When my answer is
   ready the ask button should go gold"). The concierge broadcasts
   atlas-concierge-ready; this is the player's answer to it. */
.sp-chip.is-ready {
  position: relative;
  color: var(--sp-gold, #D4B26A);
  border-color: var(--sp-gold, #D4B26A);
  background: var(--sp-gold-tint, rgba(212,178,106,0.15));
}
.sp-chip.is-ready svg { color: inherit; }
/* Colour is never the only signal (house rule). The label also changes Ask ->
   Answer, and this dot carries the state through the <=370px breakpoint that
   hides the label entirely. */
.sp-chip.is-ready::after {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}