:root {
  --bg-0: #f3f8f6;
  --bg-1: #ffffff;
  --panel-top: rgba(255, 255, 255, 0.92);
  --panel-bottom: rgba(243, 248, 246, 0.96);
  --surface: #ffffff;
  --surface-2: #eaf5f1; /* also used as fill inside the diagram SVGs */
  --surface-rgb: 233, 240, 237; /* light card/input fill, used via rgba(var(--surface-rgb), alpha) */
  --border: rgba(15, 40, 36, 0.12);
  --border-strong: rgba(15, 40, 36, 0.22);
  --ink: #0b1f1c;
  --ink-soft: #3c5450;
  --muted: #4f6560; /* 5.4:1 on the palest fill (WCAG AA wants 4.5:1); was #6b8681, about 3.5:1 */
  /* The green is dark enough for white text on it and for green text on white or on its own pale tint (4.6:1 or better; the
     old #0e9d6e was about 3.1-3.5:1). The dark theme below keeps its own light green. */
  --accent: #056f64;
  --accent-2: #04574f;
  --accent-ink: #ffffff;
  --accent-rgb: 5, 111, 100;
  /* Amber and red text sit on their own pale tints in the warning chips; these are dark enough for 4.5:1 there (the old
     #b45309 / #c1502e were about 3.8-4.1:1). The dark theme keeps its own lighter values. */
  --warn: #944607;
  --warn-rgb: 148, 70, 7;
  --alert: #a3401c;
  --alert-rgb: 163, 64, 28;
  --good: #056f64;
  --glow-1: rgba(5, 111, 100, 0.10);
  --glow-2: rgba(5, 111, 100, 0.08);
  --radius: 18px;
  color-scheme: light;

  /*
   * Text sitting on the camera/video area (tracking badges, the "camera
   * off" placeholder, the rep counter) -- that backdrop is a fixed dark
   * scrim over live video in BOTH themes, unlike the rest of the page, so
   * its text stays this one constant light color instead of following
   * --ink/--ink-soft (which flip to dark text in the light theme and would
   * go invisible against it).
   */
  --on-video-ink: #eafaf5;
  --on-video-ink-soft: #bfded5;
}

/*
 * Dark theme -- the app's original look, kept as an explicit opt-in rather
 * than removed. Applied via data-theme="dark" on <html> (see theme.js and
 * the small inline anti-flash script at the top of every page's <head>,
 * which sets this attribute before first paint so switching pages or
 * reloading never flashes the wrong theme).
 */
:root[data-theme="dark"] {
  --bg-0: #051817;
  --bg-1: #08282a;
  --panel-top: rgba(14, 62, 58, 0.78);
  --panel-bottom: rgba(8, 40, 38, 0.82);
  --surface: #0b302d;
  --surface-2: #123f3a;
  --surface-rgb: 6, 30, 28;
  --border: rgba(72, 214, 176, 0.22);
  --border-strong: rgba(72, 214, 176, 0.5);
  --ink: #eafaf5;
  --ink-soft: #bfded5;
  --muted: #86aca2;
  --accent: #34e6a8;
  --accent-2: #1fbf8a;
  --accent-ink: #03231b;
  --accent-rgb: 52, 230, 168;
  --warn: #f2b94b;
  --warn-rgb: 242, 185, 75;
  --alert: #f08a6e;
  --alert-rgb: 240, 138, 110;
  --good: #34e6a8;
  --glow-1: rgba(52, 230, 168, 0.16);
  --glow-2: rgba(22, 122, 108, 0.28);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(900px 480px at 88% -8%, var(--glow-1), transparent 62%),
    radial-gradient(800px 520px at -6% 104%, var(--glow-2), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  background-color: var(--bg-0);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 16px 40px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- header ---------- */

.app-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.brand, .header-actions { position: relative; z-index: 1; }
.hero-figure {
  display: none;
  position: absolute;
  top: -24px;
  right: 230px;
  width: 320px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}
/* The image has a solid dark-teal background baked in (not transparent), so it
   only reads well against the dark theme -- keep it out of the light theme
   entirely rather than showing a clashing patch behind the header buttons. */
@media (min-width: 1240px) { :root[data-theme="dark"] .hero-figure { display: block; } }
.brand { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.brand-logo {
  width: 54px;
  height: 36px;
  flex: none;
  margin-top: 6px;
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.45));
}
.brand-text h1 {
  margin: 0;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand-text h1 span { color: var(--accent); font-weight: 500; }
.tagline { margin: 6px 0 2px; font-size: 16px; color: var(--ink); max-width: 720px; }
.disclaimer { margin: 0; font-size: 13px; color: var(--muted); max-width: 760px; }
.header-actions { display: flex; gap: 10px; flex: none; }

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.6);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pill-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.12); }
.pill-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- steps ---------- */

.steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  color: var(--ink-soft);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 34px;
  border-top: 2px dotted var(--border-strong);
}
.step-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}
.step-text { display: flex; flex-direction: column; min-width: 0; }
.step-text b { color: var(--ink); font-size: 16px; }
.step-text small { font-size: 13px; color: var(--muted); }
.step-short { display: none; }
.steps li.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 0 28px rgba(var(--accent-rgb), 0.16);
}
.steps li.is-active .step-num { background: var(--accent); color: var(--accent-ink); }
.steps li.is-done .step-num { background: rgba(var(--accent-rgb), 0.22); color: var(--accent-2); }
.steps li.is-done .step-num::before { content: "\2713"; }
.steps li.is-done .step-num { font-size: 0; }
.steps li.is-done .step-num::before { font-size: 18px; }

/* ---------- layout ---------- */

.app-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}
.panel {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  padding: 20px;
  min-width: 0;
}
.panel-title { margin: 0 0 14px; font-size: 20px; font-weight: 700; }

@media (min-width: 1000px) {
  .app-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .session-panel { grid-column: 1 / span 7; grid-row: 1; }
  .choose-panel { grid-column: 8 / span 5; grid-row: 1; }
  .feedback-panel { grid-column: 1 / span 4; grid-row: 2; }
  .demo-panel { grid-column: 5 / -1; grid-row: 2; }
  .summary-panel { grid-column: 1 / -1; grid-row: 3; }
}

/* Below 1000px .app-layout is a single column, so document order becomes
   visual order -- reordered so the camera/session view (the actual point of
   the page, and where the assigned exercise's instructions + Start button
   live for a returning patient) comes first, instead of making them scroll
   past the picker and demo images every single day to reach it. */
@media (max-width: 999px) {
  .session-panel { order: 1; }
  .choose-panel { order: 2; }
  .demo-panel { order: 3; }
  .feedback-panel { order: 4; }
  .summary-panel { order: 5; }
}

/* ---------- panel headers ---------- */

.panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.panel-head.compact { margin-bottom: 12px; gap: 10px; }
.head-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 22px;
}
.head-icon.ring { width: 34px; height: 34px; border-radius: 50%; font-size: 17px; }
.head-text { flex: 1 1 170px; min-width: 0; }
.head-text h2, .panel-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.head-text p { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft); }
.info-hint { color: var(--muted); display: inline-flex; cursor: help; }

.status-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.6);
  color: var(--ink);
}
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status-pill.is-off { color: var(--muted); }
.status-pill.is-off .dot { background: var(--muted); box-shadow: none; }

/* ---------- choose panel ---------- */

.choose-panel { display: flex; flex-direction: column; gap: 14px; }
.choose-panel .panel-title { margin-bottom: 0; }

.assignment-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px;
  border-radius: 14px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid var(--accent);
  color: var(--ink); font-size: 14px; font-weight: 600;
}
.assignment-banner .icon { flex: none; color: var(--accent); }
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 54px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: #f1fbf7;
  color: #06201c;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.select-wrap select:disabled { opacity: 0.65; cursor: not-allowed; }
.select-icon, .select-chevron { position: absolute; top: 50%; transform: translateY(-50%); color: #0b4a3e; pointer-events: none; }
.select-icon { left: 16px; width: 26px; height: 26px; }
.select-chevron { right: 14px; }

.instructions { margin: 0; font-size: 15.5px; color: var(--ink); }

.demo-mini { display: flex; align-items: center; gap: 12px; }
.mini-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mini-media {
  width: 100%;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  padding: 8px;
}
/* Picture cards: the reference photo fills the card edge to edge. */
.demo-media.is-photo, .mini-media.is-photo { padding: 0; overflow: hidden; }
.demo-photo { display: block; width: 100%; height: auto; }
.mini-pill {
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.7);
  font-size: 13px;
  font-weight: 600;
}

.tips-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.45);
}
.tips-body { flex: 1; min-width: 0; }
.tips-title { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--accent); }
.tips-list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
.tips-list li { margin: 3px 0; }
.tips-illustration { flex: none; width: clamp(96px, 32%, 150px); color: var(--ink-soft); }
.tips-illustration svg, .tips-illustration img { width: 100%; height: auto; display: block; }
.tips-illustration .tip-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tips-illustration .tip-fill { fill: rgba(var(--accent-rgb), 0.35); stroke: var(--accent); stroke-width: 1.5; }
.tips-illustration .tip-dim { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.tips-illustration text { fill: var(--ink); font-size: 11px; font-weight: 600; text-anchor: middle; }

.check-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.check-row input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.check-text { flex: 1; display: flex; flex-direction: column; }
.check-text b { font-size: 15.5px; }
.check-text small { font-size: 13px; color: var(--muted); }
.check-icon { color: var(--ink-soft); }

/* ---------- buttons ---------- */

.button-row { display: flex; gap: 12px; }
.button-row button {
  flex: 1;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.primary-btn {
  background: linear-gradient(180deg, #3cf0b2, var(--accent-2));
  color: var(--accent-ink);
  border-color: transparent !important;
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.28);
}
/* In the light theme the white label would sit on the bright mint at the top of that gradient (about 1.5:1 there); start from the
   normal green instead. The dark theme keeps the mint, where its label is dark. */
:root:not([data-theme="dark"]) .primary-btn { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.ghost-btn { background: rgba(var(--surface-rgb), 0.55); color: var(--ink); }
.button-row button:disabled {
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--muted);
  border-color: var(--border) !important;
  box-shadow: none;
  cursor: not-allowed;
}
/* A disabled primary button must stay readable in the light theme too. The light-theme gradient a few rules up is more specific than the
   shared disabled style above, so a disabled primary button ("Join video call" before the consultation opens, "Start set" when today's
   sets are done) kept its dark green fill with grey-green text, about 1.3:1. This gives it the same look it already has in the dark theme. */
:root:not([data-theme="dark"]) .button-row button.primary-btn:disabled {
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--muted);
  border-color: var(--border) !important;
  box-shadow: none;
}
.secondary-btn { background: rgba(var(--surface-rgb), 0.55); color: var(--ink); font-size: 15px !important; }
.link-btn { background: none; border: none; color: var(--accent); font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 0; text-decoration: underline; }
.choose-panel .action-bar { margin-top: auto; }

/* ---------- how to do it ---------- */

.demo-panel-title { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.demo-figures { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.demo-figure { flex: 1 1 0; min-width: 0; max-width: 240px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.demo-media {
  width: 100%;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  padding: 8px;
}
.demo-figure figcaption { font-size: 13.5px; color: var(--ink-soft); text-align: center; line-height: 1.35; }
.demo-arrow { flex: none; align-self: center; color: var(--muted); font-size: 24px; }
.demo-disclaimer { margin: 14px 0 0; font-size: 12.5px; color: var(--warn); line-height: 1.4; }
.demo-svg { width: 100%; height: auto; max-height: 150px; display: block; }
.demo-palm, .demo-head, .demo-torso, .demo-chair { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; }
.demo-finger { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.demo-thumb { stroke: var(--warn); }
.demo-limb { fill: none; stroke: var(--muted); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.demo-limb-active { stroke: var(--accent); }

/* ---------- session / camera ---------- */

.session-panel { display: flex; flex-direction: column; gap: 14px; }
.session-panel .panel-head { margin-bottom: 0; }

.coach-banner {
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  background: rgba(var(--surface-rgb), 0.55);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.coach-banner[data-tone="go"]   { background: rgba(var(--accent-rgb), 0.13); border-color: var(--accent); }
.coach-banner[data-tone="hold"] { background: rgba(var(--warn-rgb), 0.13); border-color: var(--warn); color: var(--warn); }
.coach-banner[data-tone="good"] { background: rgba(var(--accent-rgb), 0.18); border-color: var(--good); color: var(--good); }
.coach-banner[data-tone="warn"] { background: rgba(var(--alert-rgb), 0.14); border-color: var(--alert); color: var(--alert); }

.camera-stack {
  position: relative;
  width: min(100%, calc(66vh * 4 / 3));
  width: min(100%, calc(66dvh * 4 / 3));
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  background: #020b0a;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.camera-stack.mode-body {
  width: min(100%, calc(66vh * 3 / 4));
  width: min(100%, calc(66dvh * 3 / 4));
  aspect-ratio: 3 / 4;
}
.camera-stack video, .camera-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.camera-stack video { object-fit: cover; transform: scaleX(var(--cam-mirror, -1)) scale(var(--cam-zoom, 1)); }
.camera-stack canvas { transform: scaleX(var(--cam-mirror, -1)) scale(var(--cam-zoom, 1)); }

.tracking-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(3, 20, 18, 0.72);
  border: 1px solid var(--border);
  color: var(--on-video-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.tracking-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tracking-badge[data-tone="warn"] .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

.framing-chips { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: 58%; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 12px;
  background: rgba(3, 20, 18, 0.74);
  border: 1px solid var(--border);
  color: var(--on-video-ink);
  font-size: 14px;
  font-weight: 600;
}
.chip-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.chip[data-tone="warn"] .chip-icon { background: var(--warn); }

.camera-placeholder {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: var(--on-video-ink-soft);
  font-size: 14.5px;
  background: rgba(2, 11, 10, 0.78);
}
.camera-placeholder strong { color: var(--on-video-ink); font-size: 18px; }
.camera-placeholder b { color: var(--on-video-ink); }

.rep-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(2, 11, 10, 0.78));
}
.rep-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.angle-chip {
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(3, 20, 18, 0.82);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rep-badge {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(3, 20, 18, 0.82);
  border: 1px solid var(--border);
  color: var(--on-video-ink);
  font-size: 20px;
  font-weight: 800;
}
.rep-bar-row { display: flex; align-items: center; gap: 14px; }
.rep-progress-track, .hold-progress-track { flex: 1; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.rep-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3cf0b2, var(--accent-2)); transition: width 200ms ease; }
.rep-percent { min-width: 44px; text-align: right; color: var(--on-video-ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hold-row { display: flex; align-items: center; gap: 12px; }
.hold-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn); font-weight: 700; }
.hold-progress-track { height: 8px; }
.hold-progress-fill { height: 100%; background: var(--warn); border-radius: 999px; transition: width 60ms linear; }

.compensation-banner {
  background: rgba(var(--warn-rgb), 0.14);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
}
.status-text { margin: 0; font-size: 13px; color: var(--muted); }
.status-text:empty { display: none; }

/* ---------- ask the coach (two-way voice) ---------- */

.ask-coach-panel {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  background: rgba(var(--surface-rgb), 0.5); display: flex; flex-direction: column; gap: 10px;
}
.ask-coach-head { display: flex; gap: 10px; align-items: flex-start; color: var(--accent); }
.ask-coach-head b { color: var(--ink); font-size: 15px; }
.ask-coach-head .field-hint { margin: 2px 0 0; }
.ask-coach-form { display: flex; gap: 8px; }
.ask-coach-form input[type="text"] {
  flex: 1; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.6); color: var(--ink); font: inherit; font-size: 14.5px;
}
.ask-coach-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#ask-coach-mic-btn.is-listening { background: var(--alert); border-color: var(--alert); color: #fff; animation: ask-coach-pulse 1.2s ease-in-out infinite; }
@keyframes ask-coach-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.ask-coach-hands-free-note {
  margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1); border: 1px solid var(--accent); border-radius: 10px; padding: 7px 12px;
}
.ask-coach-hands-free-note .icon { width: 1em; height: 1em; flex: none; }
.ask-coach-transcript { border-top: 1px dashed var(--border); padding-top: 10px; font-size: 14.5px; }
.ask-coach-question { margin: 0 0 6px; color: var(--muted); font-style: italic; }
.ask-coach-question::before { content: "You asked: "; font-style: normal; font-weight: 600; }
.ask-coach-answer { margin: 0; color: var(--ink); }
.ask-coach-answer[data-tone="flagged"] { color: var(--alert); font-weight: 600; }
.ask-coach-answer[data-tone="error"] { color: var(--alert); }
.ask-coach-answer.is-loading { color: var(--muted); }

/* ---------- live feedback ---------- */

.feedback-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.5);
}
.tile-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: rgba(255, 255, 255, 0.1); color: var(--muted); }
.tile-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tile-value { font-size: 17px; color: var(--muted); }
.tile[data-tone="good"] .tile-icon { background: var(--accent); color: var(--accent-ink); }
.tile[data-tone="good"] .tile-value { color: var(--accent); }
.tile[data-tone="warn"] .tile-icon { background: var(--warn); color: var(--accent-ink); }
.tile[data-tone="warn"] .tile-value { color: var(--warn); }

/* ---------- summary ---------- */

.summary-body { display: grid; gap: 16px; }
.summary-body.has-report { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.summary-empty { margin: 0; padding: 18px; border-radius: 14px; border: 1px dashed var(--border-strong); color: var(--ink-soft); font-size: 15px; }
.vital-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vital-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.5);
  min-width: 0;
}
.vital-top { display: flex; align-items: center; gap: 10px; }
.vital-icon { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.vital-label { font-size: 13.5px; color: var(--ink-soft); line-height: 1.25; }
.vital-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vital-value small { font-size: 16px; color: var(--muted); }
.vital-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); line-height: 1.3; }
.vital-status[data-tone="up"], .vital-status[data-tone="down"] { color: var(--ink-soft); }
.sim-tag { position: absolute; top: 10px; right: 10px; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.report-summary { margin: 0; grid-column: 1 / -1; font-size: 15px; color: var(--ink-soft); }
.report-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--border); }
.report-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.report-table th, .report-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.report-table tr:last-child td { border-bottom: 0; }
.report-table th { background: rgba(0, 0, 0, 0.2); color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }
.warn-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--warn); font-weight: 600; }
.ok-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.tuning-card {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(var(--surface-rgb), 0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.tuning-card h3 { margin: 0; font-size: 15px; }
.tuning-card p { margin: 0; color: var(--ink-soft); }
.tuning-card .tuning-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tuning-card .tuning-actions button { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.log-summary { white-space: pre-line; margin: 8px 0 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.summary-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

@media (max-width: 1099px) {
  .summary-body.has-report { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- dialogs ---------- */

.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #0f4640, #0a3230);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.dialog-wide { width: min(780px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; margin: 0; }
.dialog-head h2 { margin: 0; font-size: 21px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.6); color: var(--ink); cursor: pointer; }

/* Theme toggle: shows a moon (click to go dark) in light mode, a sun (click to go light) in dark mode. */
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
.dialog-body { padding: 4px 20px 22px; overflow: auto; max-height: calc(100dvh - 120px); font-size: 15px; color: var(--ink-soft); }
.dialog-body h3 { margin: 18px 0 6px; font-size: 16px; color: var(--ink); }
.dialog-body p, .dialog-body ul, .dialog-body ol { margin: 6px 0; }
.dialog-body ul, .dialog-body ol { padding-left: 20px; }
.dialog-note { font-size: 13px; color: var(--muted); }

/* Left / Right choice for one-sided body exercises */
.side-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 12px; }
.side-picker[hidden] { display: none; }
.side-picker-label { font-weight: 650; font-size: 14px; color: var(--ink-soft); }
.side-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.side-seg button { min-height: 40px; padding: 8px 22px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-weight: 650; cursor: pointer; }
.side-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.side-seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.side-seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.side-picker-hint { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.dialog .calibration-hint { font-size: 14px; }
.calibration-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.calibration-status { font-size: 13px; color: var(--muted); }
.readouts { display: flex; gap: 28px; margin-top: 6px; }
.readouts > div { display: flex; flex-direction: column; }
.readout-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.readout-value { font-family: ui-monospace, "Courier New", monospace; font-size: 20px; font-weight: 700; color: var(--ink); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.detail-grid div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.45); }
.detail-grid dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.detail-grid dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.detail-list { list-style: none; padding: 0 !important; }
.detail-list li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.detail-list time { flex: none; min-width: 44px; font-family: ui-monospace, monospace; color: var(--warn); }

/* ---------- tablet / phone ---------- */

@media (max-width: 999px) {
  .demo-mini { display: none; }
  .header-actions .pill-btn { padding: 8px 12px; }
}

/* On phones the Start/End buttons stay pinned to the bottom of the screen so
   they're reachable while looking at the camera further down the page. */
@media (max-width: 999px) {
  /* Measured against the real rendered bar height (98px) plus a safety
     margin -- the previous 92px was a few pixels short and let the bar
     clip the bottom of whatever content was last on the page. */
  body { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .choose-panel .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin-top: 0;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    /* Follows the theme, as the phone layout in mobile.css already does (this used to be a fixed dark colour, which left the
       buttons' dark-on-light labels unreadable in the light theme between 721 and 999px wide). In the dark theme it is the same dark teal. */
    background: rgba(var(--surface-rgb), 0.97);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
  }
}

@media (max-width: 720px) {
  .app-header { flex-wrap: wrap; }
  /* flex-wrap (not a forced single equal-width row) so pages with more
     header buttons (recovery.html has 4 plus the theme toggle) wrap to a
     second row instead of squeezing "Arm & shoulder assessment" into an
     unreadable sliver -- each pill keeps its own natural width either way. */
  .header-actions { width: 100%; flex-wrap: wrap; }
  .header-actions .pill-btn { flex: 0 1 auto; justify-content: center; font-size: 13.5px; padding: 8px 10px; white-space: nowrap; }
  .header-actions .pill-btn .icon { width: 1.05em; height: 1.05em; }
  .brand-logo { width: 42px; height: 28px; }
  /* App-style compact header: a marketing tagline reads fine on a website
     but wastes vertical space above the fold in an installed app -- drop it
     and shrink the title/disclaimer so the header behaves like a native
     app's title bar instead of a page banner. */
  .brand-text h1 { font-size: clamp(19px, 6vw, 24px); }
  .tagline { display: none; }
  .disclaimer { font-size: 11.5px; line-height: 1.35; }
  .button-row button { font-size: 15px; gap: 8px; padding: 10px 12px; white-space: nowrap; }
  .steps { gap: 8px; }
  .steps li { flex-direction: row; text-align: left; gap: 8px; padding: 8px 10px; }
  .steps li:not(:last-child)::after { display: none; }
  .step-num { width: 26px; height: 26px; font-size: 13px; }
  .step-full, .step-text small { display: none; }
  .step-short { display: inline; }
  .step-text b { font-size: 13px; }
  .panel { padding: 16px; }
  .panel-head { flex-wrap: wrap; }
  .status-pill { margin-left: auto; }
  .head-icon { width: 40px; height: 40px; }
  .coach-banner { font-size: 16px; }
  .tips-illustration { display: none; }
  .feedback-tiles { gap: 8px; }
  .tile { padding: 10px; }
  .tile-value { font-size: 15px; }
  .vital-tiles { grid-template-columns: minmax(0, 1fr); }
  .rep-badge { font-size: 17px; padding: 6px 12px; }
  .framing-chips { max-width: 66%; }
  .chip { font-size: 12.5px; }
  .demo-figures { gap: 8px; }
  .demo-arrow { font-size: 20px; }
  .report-table th, .report-table td { padding: 10px 8px; font-size: 14px; }
  .report-table th { font-size: 12.5px; }

  /* Bottom-sheet dialogs: a centered modal card reads like a desktop website
     on a phone. Pinning it to the bottom edge, full-width, with only the top
     corners rounded matches how installed iOS/Android apps present dialogs
     and keeps it reachable one-thumb. <dialog>'s UA stylesheet centers via
     fixed inset auto-margins, so every side needs an explicit value here to
     override it, not just bottom/left/right. */
  .dialog, .dialog-wide {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 86dvh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet-in 0.22s ease-out;
  }
  .dialog-body { max-height: calc(86dvh - 100px); }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ----- full-screen camera while a session runs (tap the video to toggle) ----- */
.cam-coach, .cam-hint { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; text-align: center; border-radius: 12px; }
.cam-coach {
  top: auto; bottom: calc(128px + env(safe-area-inset-bottom, 0px)); width: min(92%, 520px); padding: 8px 14px; font-size: 15px; font-weight: 600; line-height: 1.3;
  background: rgba(2, 11, 10, 0.72); color: var(--on-video-ink); border: 1px solid rgba(255, 255, 255, 0.18);
}
.cam-coach[data-tone="warn"] { color: #ffb4a0; border-color: #ff8a6b; }
.cam-coach[data-tone="good"], .cam-coach[data-tone="go"] { color: #7dffd0; }
.cam-hint {
  bottom: calc(184px + env(safe-area-inset-bottom, 0px)); padding: 5px 12px; font-size: 12px;
  background: rgba(2, 11, 10, 0.6); color: var(--on-video-ink);
}
body.cam-immersive { overflow: hidden; }
.camera-stack.is-immersive, .camera-stack.is-immersive.mode-body {
  position: fixed; inset: 0; z-index: 60; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-width: none;
  aspect-ratio: auto; margin: 0; border: 0; border-radius: 0;
}
/* Full-screen camera: show the WHOLE camera picture (no cropping), centred, with the video and the skeleton
   overlay in one box of the stream's own shape so they always line up. Any spare screen is plain dark. */
.camera-stack.is-immersive { background: #020b0a; }
.camera-stack.is-immersive video, .camera-stack.is-immersive canvas {
  inset: auto; left: 50%; top: 50%; object-fit: contain;
  width: min(100vw, calc(100dvh * var(--cam-ar, 0.75)));
  height: min(100dvh, calc(100vw / var(--cam-ar, 0.75)));
  transform: translate(-50%, -50%) scaleX(var(--cam-mirror, -1)) scale(var(--cam-zoom, 1));
}
.camera-stack.is-immersive.is-cover video, .camera-stack.is-immersive.is-cover canvas {
  width: max(100vw, calc(100dvh * var(--cam-ar, 0.75)));
  height: max(100dvh, calc(100vw / var(--cam-ar, 0.75)));
}
.camera-stack.is-immersive .rep-overlay { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.camera-stack.is-immersive #fx-btn { display: grid; }
.camera-stack.is-immersive .tracking-badge { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* guide-only exercises: say plainly why there is no Start session */
.guide-note {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--warn); background: rgba(var(--warn-rgb), 0.1); color: var(--ink-soft); font-size: 14px;
}
.guide-note[hidden] { display: none; }
.guide-note .icon { flex: none; color: var(--warn); margin-top: 2px; }
.guide-note b { color: var(--ink); display: block; }
.guide-note p { margin: 2px 0 0; }
.guide-tag { color: var(--warn); font-weight: 700; }

@media (max-width: 767px) { #pause-btn { display: none; } } /* phones show Pause only on the session step (mobile-ui.css); laptops always have it */

/* Camera tools sheet: always a floating panel above the (full-screen) camera, on desktop and phone alike */
#fx-panel:not([hidden]) {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 70; width: min(100%, 560px); max-height: 80vh; max-height: 80dvh;
  overflow-y: auto; border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -8px 40px rgb(0 0 0 / .35); padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
}

/* patient Today: assignments that are not due today */
.upcoming-title { margin: 22px 0 10px; font-size: 16px; color: var(--ink-soft); }
.exercise-card.is-upcoming { opacity: .9; border-style: dashed; }
.exercise-card.is-upcoming .exercise-progress { display: none; }

/* Camera tools sheet: title + close at the top, Done at the bottom (every width) */
#fx-panel .m-fx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#fx-panel .m-fx-head h2 { margin: 0; font-size: 19px; }
#fx-panel .m-fx-done { width: 100%; min-height: 46px; border-radius: 12px; }

/* guide-only: self-report button */
.exercise-action { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mark-done-btn { white-space: nowrap; }

/* Back button (laptop / desktop; phones have their own back arrows and tab bar) */
.back-row { margin: 0 0 12px; }
.back-row[hidden] { display: none; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px 6px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }
.back-btn .icon { width: 20px; height: 20px; }
@media (max-width: 767px) { .back-row { display: none; } }

/* existing-patient search results: avatar, name + details, compact action */
.booking-results > .booking-result { text-align: left; display: grid; flex-wrap: nowrap; justify-content: stretch; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; }
.br-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 14px; font-weight: 700; }
.br-main { min-width: 0; text-align: left; justify-self: start; width: 100%; }
.br-main .roster-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-main .roster-sub { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.br-action .pill-btn { min-height: 38px; padding: 6px 18px; font-size: 14px; }
.br-count { font-size: 12.5px; color: var(--muted); padding: 0 2px 2px; }

/* patient search box above the patient list */
.patient-search { margin: 0 0 14px; }
.patient-search input[type="search"] {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
}
#patients-nomatch { margin: 0; }
tr[hidden] { display: none; }

/* "Find an existing patient": same look as the other search box, set apart as its own section */
.booking-search { margin: 22px 0 6px; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(var(--surface-rgb), 0.35); }
.booking-search-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.booking-search-head .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); flex: none; }
.booking-search-head div { display: flex; flex-direction: column; gap: 2px; }
.booking-search-head strong { font-size: 15.5px; color: var(--ink); }
.booking-search-head span { font-size: 13px; color: var(--muted); }
#booking-search-input {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
}
#booking-search-input:focus, .patient-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#booking-search-input::placeholder, .patient-search input[type="search"]::placeholder { color: var(--muted); opacity: 1; }

/* breathing room between stacked cards on every page (laptop/desktop; phones keep their own tighter spacing) */
.page > .panel, .page > section.panel { margin-bottom: 24px; }
.page > .panel:last-child { margin-bottom: 0; }
.page > .scope-note { margin-bottom: 20px; }
@media (max-width: 767px) {
  .page > .panel, .page > section.panel { margin-bottom: 12px; }
}

/* ===== laptop / desktop: the camera picture stays clear; its chips, buttons and counters sit around it ===== */
@media (min-width: 768px) {
  .cam-block { width: min(100%, calc(66dvh * 4 / 3)); margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
  .cam-block.mode-body { width: min(100%, calc(66dvh * 3 / 4)); }
  .cam-block > .camera-stack, .cam-block > .camera-stack.mode-body { width: 100%; margin: 0; }

  /* status row above the picture */
  .cam-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cam-status:empty { display: none; }
  .cam-status .tracking-badge, .cam-status .framing-chips { position: static; }
  .cam-status .framing-chips { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; gap: 8px; }
  .cam-status .tracking-badge { background: rgba(var(--surface-rgb), 0.7); color: var(--ink); border-color: var(--border-strong); }
  .cam-status .chip { background: rgba(var(--surface-rgb), 0.7); color: var(--ink); border-color: var(--border-strong); padding: 4px 12px 4px 4px; font-size: 13px; }
  .cam-status .chip-text { color: var(--ink); }

  /* buttons + rep / angle below the picture */
  .cam-controls { display: flex; flex-direction: column; gap: 10px; }
  .cam-controls .cam-tools {
    position: static; transform: none; flex-direction: row; justify-content: center; align-items: center; gap: 10px;
    padding: 6px 12px; border-radius: 999px; align-self: center; background: rgba(var(--surface-rgb), 0.7); border: 1px solid var(--border-strong); backdrop-filter: none;
  }
  .cam-controls .cam-tools button { width: 40px; height: 40px; background: rgba(var(--accent-rgb), 0.14); color: var(--ink); }
  .cam-controls .cam-tools button:disabled { opacity: .4; }
  .cam-controls .cam-tools button[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
  .cam-controls .zoom-label { color: var(--ink-soft); min-width: 38px; text-align: center; }
  .cam-controls .rec-btn { border-color: var(--ink) !important; }

  .cam-controls .rep-overlay {
    position: static; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 10px; padding: 0; background: none; align-items: stretch;
  }
  .cam-controls .rep-overlay[hidden] { display: none; }
  .cam-controls .rep-row { display: contents; }
  .cam-controls .rep-badge {
    grid-column: 1; grid-row: 1; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; color: var(--ink);
    border-radius: 12px 12px 0 0; padding: 10px 14px 2px; font-size: 18px;
  }
  .cam-controls .rep-bar-row {
    grid-column: 1; grid-row: 2; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; padding: 4px 14px 12px; margin: 0;
  }
  .cam-controls .rep-progress-track { background: var(--border); }
  .cam-controls .rep-percent { color: var(--muted); font-size: 14px; }
  .cam-controls .angle-chip {
    grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--accent); border-radius: 12px; padding: 12px 16px; font-size: 18px;
  }
  .cam-controls .hold-row { grid-column: 1 / -1; margin-top: 8px; }

  /* the picture itself: nothing on it but the skeleton (and the camera-off message) */
  .cam-block .rec-badge { top: 10px; }
}

/* ===== patient quick actions (laptop / desktop): three clearly different cards instead of three alike buttons ===== */
:root { --qa-blue: #2f6fdd; --qa-blue-rgb: 47, 111, 221; }
:root[data-theme="dark"] { --qa-blue: #8db6ff; --qa-blue-rgb: 141, 182, 255; }
.quick-actions { display: none; }
@media (min-width: 768px) {
  /* the old header buttons that looked identical */
  .recovery-page .app-header .header-actions > a.pill-btn,
  .today-page .app-header .header-actions > a.pill-btn { display: none; }
  .quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 22px; }
  .qa-card {
    display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px 16px 16px 18px; border-radius: 18px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); color: var(--ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  }
  .qa-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
  .qa-badge { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; }
  .qa-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .qa-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .qa-text strong { font-size: 16px; line-height: 1.25; }
  .qa-text span { font-size: 13px; line-height: 1.35; opacity: .8; }
  .qa-go { flex: none; opacity: .7; }
  .qa-go .qa-ico { width: 20px; height: 20px; }

  /* the main call to action: solid colour */
  .qa-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.35); }
  .qa-primary .qa-badge { background: rgba(255, 255, 255, 0.22); color: var(--accent-ink); }
  .qa-primary:hover { box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.45); }
  /* recovery plan: accent outline */
  .qa-plan { border-color: var(--accent); }
  .qa-plan .qa-badge { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
  /* assessments: each its own colour, so they read as different things */
  .qa-wrist { border-left: 5px solid var(--warn); }
  .qa-wrist .qa-badge { background: rgba(var(--warn-rgb), 0.16); color: var(--warn); }
  .qa-arm { border-left: 5px solid var(--qa-blue); }
  .qa-arm .qa-badge { background: rgba(var(--qa-blue-rgb), 0.16); color: var(--qa-blue); }
  .qa-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .quick-actions { grid-template-columns: 1fr; }
}

.steps li[role="button"] { cursor: pointer; }
.steps li[role="button"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* patients don't see calibration or the session log (clinician tools) */
body.is-patient .clinician-only { display: none !important; }

/* ===== clinician home: patient overview ===== */
.patient-overview { margin: 0 0 22px; }
.co-loading { padding: 28px 8px; color: var(--muted); text-align: center; }
.co-empty { padding: 28px 20px; border: 1px dashed var(--border-strong); border-radius: 16px; text-align: center; background: rgba(var(--surface-rgb), 0.35); }
.co-empty strong { display: block; font-size: 17px; margin-bottom: 4px; color: var(--ink); }
.co-empty p { margin: 0 0 14px; color: var(--muted); }
.co-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.co-tile { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.co-tile-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.co-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.co-tile strong { display: block; font-size: 24px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-tile-label { display: block; font-size: 13px; font-weight: 650; color: var(--ink-soft); margin-top: 2px; }
.co-tile small { display: block; font-size: 12.5px; color: var(--muted); }
.co-tile.is-warn .co-tile-ico { background: rgba(var(--warn-rgb), 0.18); color: var(--warn); }
.co-tile.is-warn small { color: var(--warn); font-weight: 650; }
.co-tile.is-good small { color: var(--good); font-weight: 650; }

.co-section { margin: 0 0 18px; }
.co-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; color: var(--ink); }
.co-section h2 .co-ico { color: var(--accent); }
.co-count { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.co-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.co-section-head h2 { margin: 0; }
.co-search { min-width: 220px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; }
.co-allgood { display: flex; gap: 12px; align-items: center; padding: 14px 18px; margin-bottom: 22px; border-radius: 14px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid var(--accent); }
.co-allgood .co-ico { color: var(--accent); width: 26px; height: 26px; }
.co-allgood div { display: flex; flex-direction: column; }
.co-allgood span { font-size: 13px; color: var(--muted); }

.co-attn-list, .co-list { display: grid; gap: 8px; }
.co-attn, .co-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.co-attn { border-left: 5px solid var(--warn); flex-direction: column; align-items: stretch; gap: 8px; }
.co-attn:hover { transform: none; }
.co-attn:hover, .co-row:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.co-attn:focus-visible, .co-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.co-row[hidden] { display: none; }
.co-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-weight: 700; font-size: 15px; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.co-avatar[data-tone="attention"] { background: rgba(var(--warn-rgb), 0.18); color: var(--warn); }
.co-avatar[data-tone="setup"] { background: rgba(134, 172, 162, 0.2); color: var(--muted); }
.co-attn-main, .co-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-attn-main strong, .co-row-main strong { font-size: 15px; }
.co-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.co-reasons i { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(var(--warn-rgb), 0.15); color: var(--warn); }
.co-reasons i[data-sev="1"] { background: rgba(134, 172, 162, 0.18); color: var(--muted); }
.co-reasons i[data-sev="3"] { background: rgba(var(--alert-rgb), 0.16); color: var(--alert); }
.co-sub { font-size: 13px; color: var(--muted); }
.co-meter { display: flex; align-items: center; gap: 10px; margin-top: 1px; }
.co-meter i { display: block; height: 6px; border-radius: 999px; background: var(--accent); flex: none; max-width: 160px; min-width: 4px; }
.co-meter i.low { background: var(--warn); }
.co-meter b { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.co-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.co-last { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.co-chip { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.co-chip[data-status="on-track"] { background: rgba(var(--accent-rgb), 0.16); color: var(--good); }
.co-chip[data-status="attention"] { background: rgba(var(--warn-rgb), 0.18); color: var(--warn); }
.co-chip[data-status="setup"] { background: rgba(134, 172, 162, 0.2); color: var(--muted); }
.co-go { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.co-none { text-align: center; color: var(--muted); padding: 14px; }

/* "Needs attention" cards: the patient link on top, what to do about it underneath */
.co-attn-link { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 10px; }
.co-attn-link:hover .co-go { stroke: var(--accent); }
.co-attn-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.co-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.co-contact, .co-triage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.co-act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 650; line-height: 1.2;
}
.co-act:hover { border-color: var(--accent); color: var(--ink); }
.co-act:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.co-act-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.co-act-ok { color: var(--good); }
.co-act-none, .co-set-aside-note { font-size: 12.5px; color: var(--muted); }
.co-snooze { position: relative; }
.co-snooze > summary { list-style: none; }
.co-snooze > summary::-webkit-details-marker { display: none; }
.co-snooze[open] > summary { border-color: var(--accent); color: var(--ink); }
.co-snooze-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; min-width: 150px; padding: 4px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.co-snooze-menu button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.co-snooze-menu button:hover, .co-snooze-menu button:focus-visible { background: rgba(var(--accent-rgb), 0.12); outline: none; }
.co-attn.is-set-aside { border-left-color: var(--muted); opacity: 0.82; }
.co-set-aside-list { margin-top: 8px; }
.co-hidden-toggle { margin-top: 6px; padding: 6px 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.co-hidden-toggle:hover { text-decoration: underline; }
.co-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 9px 14px; border-radius: 12px; font-size: 13.5px; color: var(--ink-soft); background: rgba(var(--accent-rgb), 0.1); border: 1px solid var(--border-strong); }
.co-notice button { flex: none; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.co-notice button:hover { text-decoration: underline; }
.co-caughtup { margin-bottom: 8px; }
.co-section h2:focus { outline: none; }

/* the old per-device log is tucked away */
.device-log { margin-top: 8px; border: 1px solid var(--border); border-radius: 16px; padding: 0 16px 8px; background: rgba(var(--surface-rgb), 0.3); }
.device-log > summary { cursor: pointer; padding: 14px 0; font-weight: 650; color: var(--ink-soft); list-style: none; }
.device-log > summary::-webkit-details-marker { display: none; }
.device-log > summary::before { content: "▸ "; color: var(--muted); }
.device-log[open] > summary::before { content: "▾ "; }
.device-log small { font-weight: 400; color: var(--muted); }

@media (max-width: 767px) {
  .co-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .co-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .co-tile strong { font-size: 22px; }
  .co-tile-ico { width: 36px; height: 36px; border-radius: 10px; }
  .co-tile-ico .co-ico { width: 20px; height: 20px; }
  .co-tile small { font-size: 12px; line-height: 1.3; }
  .co-row { flex-wrap: wrap; align-items: flex-start; }
  .co-row-side { flex-direction: row; align-items: center; justify-content: space-between; order: 5; width: 100%; padding-left: 58px; margin-top: -2px; }
  .co-row .co-go { position: absolute; right: 14px; top: 18px; }
  .co-row { position: relative; padding-right: 40px; }
  .co-search { min-width: 0; width: 100%; height: 48px; font-size: 16px; border-radius: 10px; }
  .co-section-head { align-items: stretch; }
}

.co-more { background: rgba(134, 172, 162, 0.18) !important; color: var(--muted) !important; display: none !important; }
.co-last-inline { display: none; }
.co-short { display: none; }

/* "Up next" after a saved set: what to do now, without going back to Today */
.next-up { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 16px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.45); }
.next-up[hidden] { display: none; }
.next-up > span { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.next-up strong { font-size: 20px; line-height: 1.25; color: var(--ink); }
.next-up p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; }
.next-up .next-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.next-up .next-skip { align-self: flex-start; margin-top: 6px; font-size: 14px; color: var(--muted); }
.next-up .pill-btn.is-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; padding: 11px 24px; box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35); }

/* patients do not see the technical "Live feedback" tiles, so the how-to pictures take the whole row */
@media (min-width: 1000px) {
  body.is-patient .demo-panel { grid-column: 1 / -1; }
}
/* with the angle readout switched off the rep card takes the whole row */
.cam-controls .rep-overlay:has(.angle-chip[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* the 3-2-1 before the first rep */
.cam-countdown {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
  width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center;
  font-size: 64px; font-weight: 800; color: #fff; background: rgba(2, 11, 10, 0.55); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}
.cam-countdown[hidden] { display: none; }

/* ===== Larger text =====
   The app sizes its type in px, so "larger text" scales the page content with zoom (like browser zoom, 120%) rather than
   changing a root font size. The full-screen camera keeps its normal size so it still fits the screen, and dialog
   bodies are scaled the same way with their height limit reduced to match so they never run off the bottom. */
:root[data-text="large"] body > .page { zoom: 1.2; }
:root[data-text="large"] body.cam-immersive > .page { zoom: 1; }
:root[data-text="large"] .dialog-body, :root[data-text="large"] .m-sheet-body { zoom: 1.2; max-height: calc((100dvh - 120px) / 1.2); }
@media (max-width: 767px) {
  :root[data-text="large"] .dialog-body, :root[data-text="large"] .m-sheet-body { max-height: calc((90dvh - 84px) / 1.2); }
}
.text-aa { font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -0.02em; }
#text-toggle-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===== "How did that feel?" after a set ===== */
.feel-slot[hidden] { display: none; }
.feel-card { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.feel-card h3 { margin: 0; font-size: 17px; color: var(--ink); }
.feel-q { margin: 4px 0 0; font-size: 14px; font-weight: 650; color: var(--ink-soft); }
.feel-q small { font-weight: 400; color: var(--muted); }
.feel-pain { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.feel-effort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feel-opt { min-height: 44px; padding: 0 4px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; }
.feel-opt:hover { border-color: var(--accent); }
.feel-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.feel-pain .feel-opt:nth-child(-n+4) { border-bottom: 3px solid var(--good); }
.feel-pain .feel-opt:nth-child(n+5):nth-child(-n+7) { border-bottom: 3px solid var(--warn); }
.feel-pain .feel-opt:nth-child(n+8) { border-bottom: 3px solid var(--alert); }
.feel-opt[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.feel-actions { display: flex; align-items: center; gap: 14px; }
.feel-skip { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.feel-note { margin: 0; font-size: 13.5px; color: var(--alert); }
.feel-advice { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink); background: rgba(var(--warn-rgb), 0.14); }
.feel-card.is-thanks { gap: 12px; }
.feel-card.is-thanks .pill-btn { align-self: flex-start; }

/* ===== Clinician hub: Home | Patients, and the patient's own page ===== */
.hub-nav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(var(--surface-rgb), 0.6); border: 1px solid var(--border); }
.hub-nav a { padding: 7px 18px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ink-soft); text-decoration: none; }
.hub-nav a:hover { color: var(--ink); }
.hub-nav a[aria-current="page"] { background: var(--accent); color: #fff; }
.hub-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hub-bar { display: none; }
@media (min-width: 768px) {
  .hub-bar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.35); }
  #list-panel { display: none; } /* plans live on each patient's page now; the all-plans list is not a separate place */
  body.is-patient-page #patients-panel { display: none; }
}
@media (max-width: 767px) { .hub-nav { display: none; } }
.hub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hub-meta { font-size: 14px; color: var(--ink-soft); }
.hub-contact { gap: 8px; }
.hub-plans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hub-plan { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hub-plan.is-current { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: var(--accent); }
.hub-jump { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.hub-jump button { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(var(--accent-rgb), 0.1); color: var(--accent); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.hub-jump button:hover { background: rgba(var(--accent-rgb), 0.2); }

/* ===== Language picker ===== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lang-picker select { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.6); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.lang-picker select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lang-picker.is-block { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.lang-picker.is-block .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; font-size: 13.5px; color: var(--muted); }
#voice-lang-note { margin: 4px 0 8px; }

/* "Let your physiotherapist see your form" (set-photos.js) */
dialog.dialog.photo-consent { height: auto; max-height: 92dvh; }
.photo-consent .dialog-body { display: grid; gap: 14px; max-width: 460px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.photo-consent h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.photo-consent .pc-lead { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.pc-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pc-tile { margin: 0; display: grid; gap: 6px; }
.pc-tile img, .pc-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; background: var(--surface-2); }
.pc-tile figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.pc-tile figcaption b { color: var(--ink); }
.pc-arrow { color: var(--muted); font-size: 20px; }
.pc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pc-points li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; font-size: 15px; line-height: 1.4; }
.pc-points svg { width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.pc-actions { display: grid; gap: 8px; margin-top: 4px; }
.pc-actions .pill-btn { width: 100%; min-height: 48px; justify-content: center; font-size: 16px; font-weight: 700; }

/* pace ring on the camera (pace-timer.js): Bend 3-2-1, Return 2-1, one rep per cycle */
.pace { position: absolute; top: 12px; right: 12px; z-index: 6; width: 92px; height: 92px; display: grid; place-items: center; pointer-events: none; }
.pace[hidden] { display: none; }
.pace svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pace-track { fill: rgba(3, 20, 18, .62); stroke: rgba(255, 255, 255, .22); stroke-width: 8; }
.pace-arc { fill: none; stroke: #34d399; stroke-width: 8; stroke-linecap: round; }
.pace[data-phase="return"] .pace-arc { stroke: #fbbf24; }
.pace-text { position: relative; display: grid; justify-items: center; line-height: 1; color: #fff; }
.pace-text b { font-size: 34px; font-weight: 800; }
.pace-text span { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.pace.is-paused { opacity: .5; }
@media (max-width: 767px) { .pace { width: 84px; height: 84px; top: 70px; } }

/* "Target reached · Finish set" on the full-screen camera (app.js showCamFinish) */
.cam-finish { display: none; }
.camera-stack.is-immersive .cam-finish:not([hidden]) {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: absolute; left: 16px; right: 16px; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); z-index: 8;
  min-height: 58px; border: 0; border-radius: 16px; background: #0f766e; color: #fff;
  font: inherit; font-size: 18px; font-weight: 800; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); cursor: pointer;
}
.cam-finish svg { width: 24px; height: 24px; }