/*
 * mobile-ui.css -- the phone design (PostOpRehab Mobile Implementation).
 * Loaded last on every page. EVERYTHING here is inside the phone breakpoint,
 * so the desktop layout is untouched. It re-skins the existing markup with the
 * design's colour tokens, flat surfaces, 48px controls, bottom tab bar and
 * bottom-sheet dialogs; mobile-ui.js adds the few elements the design has
 * that the desktop page doesn't (tab bar, profile sheet, password eye, ...).
 */

/* elements injected by mobile-ui.js stay out of the desktop layout */
.m-toolsrow, .m-excard, .m-rep-slot, details.m-acc, .m-backlink, .m-intro, .m-linkfoot, .m-nav, .m-profile-btn, .m-eye, .m-search, .m-chips, .m-greeting, .m-back, .m-wiz, .m-footer, .m-tabs, .m-link-stack, .m-topbar { display: none; }

@media (max-width: 767px) {

  /* ================= tokens ================= */
  :root {
    --bg-0: #f7f9fa; --bg-1: #f7f9fa; --panel-top: #fff; --panel-bottom: #fff;
    --surface: #fff; --surface-2: #e9f7f4; --surface-rgb: 255, 255, 255;
    --border: #d5e0e4; --border-strong: #c3d2d8;
    --ink: #14252a; --ink-soft: #3a4f58; --muted: #526671;
    /* the same green as the desktop layout: dark enough for 4.5:1 on the pale green tints too (the old #087f72 was 3.9-4.4:1 there) */
    --accent: #056f64; --accent-2: #04574f; --accent-ink: #fff; --accent-rgb: 5, 111, 100;
    --warn: #875300; --warn-rgb: 135, 83, 0; --alert: #b42332; --alert-rgb: 180, 35, 50; --good: #056f64;
    --glow-1: transparent; --glow-2: transparent; --radius: 16px;
    --pr-bg: #f7f9fa; --pr-tint: #e9f7f4; --pr-track: #d8e4e7; --pr-shadow: 0 3px 14px rgb(20 37 42 / .05);
    --warn-bg: #fff1d7;
  }
  :root[data-theme="dark"] {
    --bg-0: #101a20; --bg-1: #101a20; --panel-top: #1b2931; --panel-bottom: #1b2931;
    --surface: #1b2931; --surface-2: #183c37; --surface-rgb: 27, 41, 49;
    --border: #344953; --border-strong: #46606b;
    --ink: #f4f8fa; --ink-soft: #d3e0e6; --muted: #b5c6d0;
    --accent: #5de0bf; --accent-2: #3fc7a6; --accent-ink: #10211d; --accent-rgb: 93, 224, 191;
    --warn: #ffd07c; --warn-rgb: 255, 208, 124; --alert: #ff9b9f; --alert-rgb: 255, 155, 159; --good: #5de0bf;
    --pr-bg: #101a20; --pr-tint: #183c37; --pr-track: #344953; --pr-shadow: 0 3px 14px rgb(0 0 0 / .15);
    --warn-bg: #4a3820;
  }

  /* ================= page chrome ================= */
  body {
    background: var(--pr-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px; line-height: 1.5; overflow-wrap: anywhere;
  }
  .page { padding: calc(16px + env(safe-area-inset-top)) 16px 24px; max-width: 600px; }
  body.has-m-nav { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* header = the design's top bar: brand + sub-brand, avatar button at the right */
  .app-header { margin: 0 0 16px; min-height: 48px; gap: 12px; align-items: center; flex-wrap: nowrap; }
  .app-header .header-actions { display: none; }
  .brand { gap: 12px; align-items: center; }
  .brand-logo { width: 44px; height: 30px; margin: 0; filter: none; color: var(--accent); }
  .brand-text h1 { font-size: 24px; font-weight: 750; letter-spacing: -.7px; line-height: 1.15; }
  .brand-text h1 span { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--accent); }
  .m-profile-btn, .m-back {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  }
  .m-profile-btn { margin-left: auto; }
  .m-text-btn { margin-right: 8px; }
  .m-text-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
  .m-profile-btn .icon, .m-back .icon { width: 22px; height: 22px; }
  .app-header > .brand { min-width: 0; flex: 1; }

  /* ================= surfaces ================= */
  .panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--pr-shadow);
    padding: 16px; backdrop-filter: none;
  }
  .panel-title, .head-text h2, .panel-head h2 { font-size: 20px; line-height: 1.3; font-weight: 700; }
  .head-text p { font-size: 14px; color: var(--muted); }
  .head-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--pr-tint); color: var(--accent); }
  .scope-note, .assignment-banner, .login-note, .login-error {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; font-size: 14px; color: var(--muted);
    background: var(--pr-tint); border: 1px solid var(--border);
  }
  .scope-note .icon, .assignment-banner .icon { color: var(--accent); }
  .login-error { color: var(--alert); background: rgba(var(--alert-rgb), .1); border-color: var(--alert); }

  /* ================= buttons ================= */
  .pill-btn, .primary-btn, .ghost-btn, .secondary-btn, .link-btn {
    font-family: inherit;
  }
  .pill-btn, .ghost-btn, .secondary-btn {
    min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 16px; font-weight: 650;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .pill-btn:hover:not(:disabled) { background: var(--surface); filter: brightness(.97); }
  .pill-btn.is-primary, .primary-btn {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 12px; min-height: 48px;
    font-size: 16px; font-weight: 650;
  }
  .pill-btn.is-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(.96); opacity: 1; }
  .pill-btn.is-danger { color: var(--alert); border-color: var(--alert); }
  .pill-btn:disabled, .primary-btn:disabled, .ghost-btn:disabled { opacity: .48; }
  .link-btn { color: var(--accent); font-size: 16px; font-weight: 600; min-height: 44px; text-decoration: underline; }
  .icon-btn {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    display: inline-grid; place-items: center;
  }
  .button-row { gap: 12px; flex-direction: column; align-items: stretch; }
  .button-row > * { width: 100%; flex: none; }
  .button-row button, .button-row .pill-btn { min-height: 48px; font-size: 16px; border-radius: 12px; }

  /* ================= forms ================= */
  .plan-form { gap: 16px; }
  .plan-label, .field-label { font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .optional-tag { font-size: 13px; color: var(--muted); }
  .plan-form input[type="text"], .plan-form input[type="date"], .plan-form input[type="email"], .plan-form input[type="tel"],
  .plan-form input[type="number"], .plan-form input[type="password"], .plan-form select, .ask-coach-form input[type="text"],
  .select-wrap select, input.m-input {
    height: 48px; min-height: 48px; padding: 11px 12px; border-radius: 10px; font-size: 16px;
    border: 1px solid var(--border); background: var(--pr-bg); color: var(--ink);
  }
  .plan-form input:focus, .plan-form select:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
  .field-hint { font-size: 13px; color: var(--muted); }
  .field-row { gap: 12px; }
  .m-pw-wrap { position: relative; display: block; }
  .m-pw-wrap input { padding-right: 54px !important; width: 100%; }
  .m-eye {
    display: grid; place-items: center; position: absolute; right: 0; top: 0; width: 48px; height: 48px; padding: 0;
    border: 0; background: transparent; color: var(--muted);
  }
  .m-eye .icon { width: 22px; height: 22px; }

  /* segmented controls (role tabs, plan schedule tabs) */
  .role-tabs {
    display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    margin-bottom: 4px;
  }
  .role-tab {
    flex: 1; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
    font-size: 14px; font-weight: 600;
  }
  .role-tab.is-active { background: var(--pr-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

  /* ================= bottom tab bar ================= */
  .m-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .m-nav a, .m-nav button {
    flex: 1; min-height: 52px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 5px 2px; border: 0;
    background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-decoration: none; border-radius: 12px;
  }
  .m-nav [aria-current="page"] { color: var(--accent); font-weight: 650; background: var(--pr-tint); }
  .m-nav .icon { width: 22px; height: 22px; }
  body.m-session-open .m-nav, body.cam-immersive .m-nav { display: none; }

  /* ================= dialogs = bottom sheets ================= */
  dialog.dialog, dialog.dialog-wide, dialog.m-sheet {
    width: 100%; max-width: 600px; height: 90dvh; max-height: 90dvh; margin: auto auto 0; padding: 0; border: 0;
    border-radius: 24px 24px 0 0; background: var(--surface); color: var(--ink); overflow: hidden;
    box-shadow: 0 -8px 40px rgb(0 0 0 / .2);
  }
  dialog.m-sheet.is-short { height: auto; max-height: 90dvh; }
  dialog.dialog::backdrop, dialog.m-sheet::backdrop { background: rgb(8 19 25 / .5); }
  .dialog-head, .m-sheet-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 20px 16px 12px; background: var(--surface);
  }
  .dialog-head::before, .m-sheet-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 6px; background: var(--border);
  }
  .dialog-head h2, .m-sheet-head h2 { margin: 0; font-size: 23px; line-height: 1.3; font-weight: 700; }
  .dialog-head .icon-btn, .m-sheet-head .icon-btn { width: 48px; height: 48px; }
  .dialog-body, .m-sheet-body {
    padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); max-height: calc(90dvh - 84px); overflow-y: auto; font-size: 15px;
    overscroll-behavior: contain;
  }
  .m-sheet-body { padding-top: 8px; }
  .dialog-body h3 { font-size: 17px; font-weight: 650; margin: 20px 0 8px; }
  .dialog-note { font-size: 13px; color: var(--muted); }

  /* profile sheet */
  .m-profile-card { display: flex; align-items: center; gap: 12px; padding: 12px 0 16px; }
  .m-avatar {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--pr-tint);
    color: var(--accent); font-weight: 700;
  }
  .m-segmented { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 8px 0 16px; }
  .m-segmented button {
    flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600;
  }
  .m-segmented button[aria-pressed="true"] { background: var(--pr-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .m-sheet-list { display: grid; gap: 8px; margin-bottom: 16px; }
  .m-sheet-list .m-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-align: left; text-decoration: none;
  }
  .m-sheet-list .m-row .icon { color: var(--accent); width: 22px; height: 22px; }
  .m-sheet-list .m-row .grow { flex: 1; }
  .m-sheet-list .m-row.is-danger { color: var(--alert); border-color: var(--alert); }
  .m-sheet-list .m-row.is-danger .icon { color: var(--alert); }

  /* ================= tables -> cards (shared look) ================= */
  table.roster tr, .history-table tr, .report-table tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--pr-shadow);
  }
  table.roster td::before, .history-table td::before, .report-table td::before { font-size: 12px; letter-spacing: .04em; color: var(--muted); }
  .status-badge { border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 650; }
  .status-badge[data-tone="good"] { background: var(--pr-tint); color: var(--accent); }
  .status-badge[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); }
  .bar-track, .progress-bar-track, .rep-progress-track { background: var(--pr-track); }
  .bar-fill, .progress-bar-fill { background: var(--accent); }
}

@media (max-width: 767px) {

  /* ================= auth screens (login / set password) ================= */
  .login-page .app-header { margin: 24px 0 24px; }
  .login-page .brand-logo { width: 48px; height: 32px; }
  .login-page .brand-text h1 { font-size: 26px; }
  .login-panel {
    background: transparent; border: 0; box-shadow: none; padding: 0; gap: 16px;
  }
  .signup-toggle { text-align: center; }
  .signup-title { font-size: 20px; line-height: 1.3; margin: 8px 0 0; }
  .login-page .scope-note { margin-top: 16px; }

  /* ================= Today ================= */
  .m-greeting { display: block; margin: 0 0 12px; }
  .m-greeting .m-greet-hi { margin: 0; color: var(--muted); font-size: 16px; }
  .m-greeting .m-greet-name { margin: 0 0 12px; font-size: 28px; line-height: 1.25; font-weight: 700; }
  .m-greet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
  .m-greet-week { color: var(--accent); font-weight: 600; }
  .m-progress { height: 8px; background: var(--pr-track); border-radius: 8px; overflow: hidden; margin: 12px 0 16px; }
  .m-progress span { display: block; height: 100%; background: var(--accent); border-radius: 8px; transition: width 250ms; }
  .today-page .today-empty { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }

  .exercise-card {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; margin: 0 0 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; position: relative; cursor: pointer;
  }
  .exercise-card.is-done { background: var(--pr-tint); border-color: var(--accent); }
  .exercise-card.is-next { box-shadow: var(--pr-shadow); }
  .exercise-thumb { width: 52px; height: 52px; border-radius: 10px; }
  .exercise-info .e-name { font-size: 16px; line-height: 1.3; font-weight: 650; }
  .exercise-info .e-meta { font-size: 13px; color: var(--muted); }
  .set-dot { width: 8px; height: 8px; background: var(--pr-track); }
  .set-dot.is-done { background: var(--accent); }
  .exercise-progress { gap: 6px; margin-top: 4px; }
  .exercise-action { display: none; grid-column: 1 / -1; }
  .exercise-card.is-next .exercise-action { display: block; }
  .exercise-card.is-next .exercise-action .pill-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; min-height: 48px; }
  .exercise-card .exercise-action-btn { text-decoration: none !important; }
  .exercise-card .exercise-thumb { grid-column: 1; grid-row: 1; }
  .exercise-card .exercise-info { grid-column: 2; grid-row: 1; }
  .exercise-card .m-card-end { grid-column: 3; grid-row: 1; }
  .exercise-card .exercise-action { grid-row: 2; }
  .m-card-end { display: grid; justify-items: center; gap: 4px; color: var(--muted); }
  .m-card-end .icon { width: 20px; height: 20px; }
  .m-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
  .m-check .icon { width: 16px; height: 16px; stroke-width: 2.4; }
  .m-end-note { font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; }
  .exercise-card.is-done .exercise-action { display: none; }
}

@media (max-width: 767px) {
  body.m-no-nav .m-nav { display: none; }
  body.m-no-nav.has-m-nav { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .m-topbar { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 16px; }
  .m-topbar h1 { margin: 0; flex: 1; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; }
  .m-topbar .m-back { margin: 0; }
  .m-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--pr-shadow); }
  .m-footer {
    display: flex; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .m-footer > * { flex: 1; }
  .btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 16px; border-radius: 12px;
    font: inherit; font-size: 16px; font-weight: 650; border: 1px solid var(--border); background: var(--surface); color: var(--ink); width: 100%; text-decoration: none;
  }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn:disabled { opacity: .48; cursor: not-allowed; }
  .btn .icon { width: 22px; height: 22px; }
  .note { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); background: var(--pr-tint); border-radius: 12px; padding: 12px; font-size: 14px; color: var(--muted); margin-top: 16px; }
  .note .icon { color: var(--accent); flex: none; }

  /* ----- recovery plan ----- */
  .m-link-stack { display: grid; gap: 12px; margin-bottom: 8px; }
  .m-linkcard {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none;
  }
  .m-linkcard .icon { color: var(--accent); }
  .m-linkcard .grow { flex: 1; }
  .recovery-hero h2 { font-size: 20px; margin: 16px 0 4px; }
  .recovery-hero p { font-size: 13px; color: var(--muted); }
  .recovery-page .panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .progress-summary { gap: 12px; flex-wrap: nowrap; margin: 4px 0 16px; }
  .progress-label { font-size: 16px; font-weight: 700; color: var(--ink); }
  .progress-summary .progress-label:last-child { font-size: 13px; font-weight: 400; color: var(--muted); }
  .progress-bar-track { height: 8px; min-width: 0; flex: 1 1 0; }
  .phase-timeline { position: relative; padding-left: 24px; gap: 12px; }
  .phase-card {
    position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; box-shadow: var(--pr-shadow); gap: 0;
  }
  .phase-card.is-current { background: var(--pr-tint); border-color: var(--accent); }
  .phase-marker { display: none; }
  .phase-card::before {
    content: ""; position: absolute; left: -23px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--pr-track); outline: 4px solid var(--pr-bg);
  }
  .phase-card::after { content: ""; position: absolute; left: -17px; top: 34px; height: calc(100% - 4px); width: 2px; background: var(--pr-track); }
  .phase-card:last-child::after { display: none; }
  .phase-card.is-current::before { background: var(--accent); }
  .phase-name { font-size: 17px; font-weight: 650; }
  .phase-weeks { font-family: inherit; font-size: 13px; color: var(--muted); }
  .phase-note { font-size: 13px; color: var(--muted); margin: 0; }
  .current-flag { display: inline-block; margin-left: 8px; background: var(--accent); color: var(--accent-ink); font-size: 11px; border-radius: 20px; padding: 2px 8px; letter-spacing: .02em; }
  .phase-regions { display: none; }

  /* ----- assessment wizard ----- */
  body.m-wizard-on .app-header { display: none; }
  body.m-wizard-on { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.m-wizard-on .m-wiz { display: block; }
  body.m-wizard-on .m-footer { display: flex; }
  body.m-wizard-on .m-wiz .m-topbar { display: flex; }
  body.m-wizard-on .credit-line { display: none; }
  body.m-wizard-on #assessment-body > .panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
  body.m-wizard-on #assessment-body > .panel > :not(form) { display: none; }
  body.m-wizard-on #prom-form > :not(#prom-error) { display: none; }
  .m-wiz-sub, .m-wiz-count { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
  .m-wiz .m-progress { margin: 12px 0 16px; }
  .m-wiz-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
  .m-wiz-card h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
  .m-scale-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
  .m-numgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0 4px; }
  .m-numgrid button {
    min-height: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font: inherit; font-size: 16px;
  }
  .m-numgrid button[aria-pressed="true"], .m-answer[aria-pressed="true"] { background: var(--pr-tint); border-color: var(--accent); color: var(--accent); }
  .m-answers { display: grid; gap: 8px; margin-top: 12px; }
  .m-answer {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px; width: 100%; text-align: left; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font: inherit; font-size: 16px;
  }
  .m-answer::before { content: ""; width: 20px; height: 20px; border: 1px solid var(--muted); border-radius: 50%; flex: none; }
  .m-answer[aria-pressed="true"]::before { background: var(--accent); border: 4px solid var(--pr-tint); box-shadow: 0 0 0 1px var(--accent); }
}

/* ===== clinician: patients & plans (plan.html) ===== */
.m-subbar .m-dots { display: none; }
@media (max-width: 767px) {
  body.m-plan:not(.m-sub) .m-tabs.m-segmented { display: flex; margin-bottom: 12px; }
  .m-tabs.m-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .m-tabs.m-segmented button .icon { width: 18px; height: 18px; }
  .m-segmented { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 8px 0 16px; }
  .m-segmented button {
    flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
  }
  .m-segmented button[aria-pressed="true"] { background: var(--pr-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

  body.m-plan .m-subbar { display: none; }
  body.m-sub .m-subbar { display: flex; }
  body.m-sub .m-subbar .m-dots { display: inline-flex; gap: 6px; }
  body.m-sub .m-subbar .m-dots[hidden] { display: none; }
  .m-subbar .m-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); display: block; }
  .m-subbar .m-dots i.on { background: var(--accent); }
  .m-subtitle { flex: 1; min-width: 0; }
  .m-subtitle h1 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; margin: 0; }
  .m-subtitle p { margin: 0; font-size: 13px; color: var(--muted); }
  body.m-sub .app-header, body.m-sub .m-nav, body.m-sub .m-tabs:not(.m-dtabs) { display: none; }
  body.m-sub.has-m-nav { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

  body.m-plan .panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
  body.m-tab-patients #list-panel, body.m-tab-plans #patients-panel { display: none; }
  body.m-sub #patients-panel, body.m-sub #list-panel { display: none; }
  body.m-sub-add #patients-panel { display: block; }
  body.m-sub-add #patients-panel > :not(#add-patient-form) { display: none; }

  /* list headers: the tab already names the section, so just the action button */
  #patients-panel > .panel-head, #list-panel > .panel-head { display: block; margin: 0 0 12px; }
  #patients-panel > .panel-head .head-icon, #patients-panel > .panel-head .head-text,
  #list-panel > .panel-head .head-icon, #list-panel > .panel-head .head-text { display: none; }
  #add-patient-btn, #new-plan-btn {
    width: 100%; background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  }
  .booking-search { margin: 20px 0 8px; }
  .booking-results { max-height: none; }
  .booking-result { background: var(--surface); border-radius: 14px; padding: 12px; }

  /* patient + plan rows as cards */
  #patients-body table.roster td:nth-child(2), #patients-body table.roster td:nth-child(3) { display: none; }
  #patients-body table.roster td::before, #plan-list-body table.roster td::before { display: none; }
  #patients-body table.roster tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
  #patients-body table.roster td { display: block; text-align: left; padding: 0; font-size: 13px; color: var(--muted); }
  #patients-body table.roster td:nth-child(1) { grid-column: 1; }
  #patients-body table.roster td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  #patients-body table.roster td:nth-child(4) { grid-column: 1 / -1; }
  #patients-body table.roster td:first-child { padding: 0; font-size: 17px; }
  #plan-list-body table.roster td:first-child { font-size: 17px; }
  .roster-name { font-size: 17px; font-weight: 700; color: var(--ink); }
  .roster-sub { font-size: 13px; }

  /* add patient = full-screen two-step form */
  #add-patient-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #add-patient-form .field-row .plan-field:first-child:nth-last-child(2),
  #add-patient-form .field-row:first-child .plan-field { grid-column: 1 / -1; }
  #add-patient-form .field-row .plan-field:has(input[type="tel"]) { grid-column: 1 / -1; }
  #add-patient-form .m-step2, body.m-addstep2 #add-patient-form .m-step1 { display: none; }
  body.m-addstep2 #add-patient-form .m-step2 { display: grid; }
  body.m-addstep2 #add-patient-form .button-row.m-step2 { display: flex; }
  #add-patient-form .m-continue { width: 100%; }
  body.m-addstep2 #add-patient-form .m-continue { display: none; }
  #add-patient-form .field-hint.m-step1 {
    display: block; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--pr-tint); font-size: 14px;
  }
  body.m-addstep2 #add-patient-form .field-hint.m-step1 { display: none; }
  #cancel-add-patient-btn { display: none; }

  /* new plan */
  body.m-sub-new #new-plan-panel > .panel-head { display: none; }
  .template-cards { gap: 8px; }
  .template-card {
    position: relative; padding: 12px 12px 12px 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); min-height: 0;
  }
  .template-card::before {
    content: ""; position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--muted); background: transparent;
  }
  .template-card.is-selected { border-color: var(--accent); background: var(--pr-tint); }
  .template-card.is-selected::before { background: var(--accent); border: 4px solid var(--pr-tint); box-shadow: 0 0 0 1px var(--accent); }
  .template-card .t-label { font-size: 14px; }
  .template-card .t-procedure { font-size: 13px; }
  .template-card .t-weeks { font-size: 12px; font-weight: 650; }

  /* plan detail */
  body.m-sub-detail #detail-panel > .panel-head .head-icon, body.m-sub-detail #detail-panel > .panel-head .head-text { display: none; }
  body.m-sub-detail #detail-panel > .panel-head { display: none; }
  .m-dtabs { display: none; }
  body.m-sub-detail .m-dtabs { display: flex; }
  .m-danger-zone { display: none; }
  body.m-sub-detail.m-dtab-overview .m-danger-zone { display: block; margin-top: 24px; }
  .m-danger-zone .pill-btn { width: 100%; color: var(--alert); border-color: var(--alert); }
  body.m-sub-detail:not(.m-dtab-overview) #detail-panel, body.m-sub-detail:not(.m-dtab-overview) #activity-panel { display: none; }
  body.m-sub-detail:not(.m-dtab-exercises) #assign-panel { display: none; }
  body.m-sub-detail:not(.m-dtab-outcomes) #outcome-panel, body.m-sub-detail:not(.m-dtab-outcomes) #coach-log-panel { display: none; }
  #detail-panel, #activity-panel, #assign-panel, #outcome-panel, #coach-log-panel { margin-bottom: 16px; }
  #activity-panel > .panel-head, #assign-panel > .panel-head, #outcome-panel > .panel-head, #coach-log-panel > .panel-head {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  #activity-panel > .panel-head .head-icon, #assign-panel > .panel-head .head-icon, #outcome-panel > .panel-head .head-icon, #coach-log-panel > .panel-head .head-icon { display: none; }
  #activity-range-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .schedule-tab { min-height: 44px; border-radius: 24px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); font-size: 14px; flex: none; }
  .schedule-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .weekday-btn { border-radius: 10px; background: var(--surface); border-color: var(--border); }
  .weekday-btn.is-selected { background: var(--pr-tint); border-color: var(--accent); color: var(--accent); }
  .assignment-row, .coach-log-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
  .activity-day { background: var(--pr-track); border-color: var(--border); }
  .progress-summary { margin: 0 0 16px; }
}

/* ===== exercise page (index.html): Choose -> Watch -> Session -> Summary ===== */
.m-picker, .m-watch-bar, .m-howto-wrap, .m-done-head, .m-done-actions { display: none; }
@media (max-width: 767px) {
  body.m-index .m-subbar { display: none; }
  body.m-index .m-subbar { display: flex; }
  body.m-index .app-header { display: none; }
  body.m-index .disclaimer, body.m-index .tagline { display: none; }
  body.m-index.m-step-session .m-nav { display: none; }

  /* steps = three tappable pills (Watch / Start screens only) */
  body.m-index .steps { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
  body.m-index.m-step-watch .steps, body.m-index.m-step-session .steps { display: grid; }
  body.m-index .steps li {
    padding: 8px 10px; min-height: 44px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: none;
    gap: 8px; justify-content: center; cursor: pointer;
  }
  body.m-index .steps li::after { display: none; }
  body.m-index .steps .step-text small, body.m-index .steps .step-full { display: none; }
  body.m-index .steps .step-short { display: inline; }
  body.m-index .steps .step-text b { font-size: 14px; color: var(--muted); font-weight: 600; }
  body.m-index .steps .step-num { width: 22px; height: 22px; font-size: 12px; background: var(--pr-track); color: var(--ink); }
  body.m-index .steps li.m-cur { background: var(--pr-tint); border-color: var(--accent); box-shadow: none; }
  body.m-index .steps li.m-cur .step-text b { color: var(--accent); }
  body.m-index .steps li.m-cur .step-num { background: var(--accent); color: var(--accent-ink); }
  body.m-index .steps li.is-done .step-num { font-size: 12px; background: var(--pr-track); }
  body.m-index .steps li.is-done .step-num::before { content: none; }

  /* layout: panels become free-flowing blocks, shown per step */
  body.m-index .app-layout { display: flex; flex-direction: column; gap: 12px; }
  body.m-index .choose-panel { display: contents; }
  body.m-index :where(.app-layout > .panel:not(.choose-panel)), body.m-index :where(.choose-panel > *) { display: none; }
  body.m-index .panel { box-shadow: var(--pr-shadow); }

  /* --- choose --- */
  body.m-index.m-step-choose .m-picker { display: block; }
  body.m-index.m-step-choose .m-watch-bar { display: block; }
  body.m-index.m-step-choose { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .m-search-box { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--pr-bg); color: var(--muted); margin-bottom: 12px; }
  .m-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; height: 46px; }
  .m-search-box .icon { width: 20px; height: 20px; flex: none; }
  .m-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chips button { flex: none; min-height: 44px; padding: 8px 14px; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; }
  .m-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .m-ex-list { display: grid; gap: 8px; }
  .m-ex-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 8px; text-align: left; border: 1px solid var(--border);
    border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit;
  }
  .m-ex-row[aria-selected="true"] { border-color: var(--accent); background: var(--pr-tint); }
  .m-ex-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; background: var(--pr-track); }
  .m-ex-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .m-ex-main strong { font-size: 16px; line-height: 1.3; }
  .m-ex-info { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-ex-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .m-ex-tags i { font-style: normal; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 20px; background: var(--pr-tint); color: var(--accent); }
  .m-ex-tags i.muted { background: var(--pr-track); color: var(--muted); }
  .m-ex-tags i.warn { background: var(--warn-bg); color: var(--warn); }
  .m-ex-radio { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--muted); flex: none; margin-right: 4px; }
  .m-ex-row[aria-selected="true"] .m-ex-radio { background: var(--accent); border: 4px solid var(--pr-tint); box-shadow: 0 0 0 1px var(--accent); }
  .m-ex-empty { text-align: center; color: var(--muted); padding: 24px 0; }
  .m-watch-bar {
    position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 39; padding: 12px 16px; background: linear-gradient(180deg, transparent, var(--pr-bg) 28%);
  }
  .m-watch-bar .btn { min-height: 52px; }

  /* --- watch --- */
  body.m-index.m-step-watch .m-howto-wrap, body.m-index.m-step-watch .tips-card, body.m-index.m-step-watch .check-row { display: block; }
  body.m-index.m-step-watch .check-row { display: flex; }
  body.m-index.m-step-watch .action-bar { display: flex; }
  body.m-index.m-step-watch .side-picker:not([hidden]) { display: flex; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .side-seg button { min-height: 48px; padding: 10px 26px; font-size: 16px; }
  body.m-index.m-step-watch #end-session-btn { display: none; }
  body.m-index.m-step-watch { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
  .m-howto-wrap h2 { font-size: 20px; margin: 16px 0 12px; }
  .m-hero .demo-mini { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
  .m-hero .mini-card { position: relative; display: block; }
  .m-hero .mini-media { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #050b0b; }
  .m-hero .mini-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .m-hero .mini-pill { position: absolute; left: 8px; top: 8px; background: rgb(5 11 11 / .72); color: #e8faf4; border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 600; border: 0; max-width: calc(100% - 16px); }
  .m-hero .demo-arrow { color: var(--muted); }
  .m-reps-badge { display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 20px; background: var(--pr-tint); color: var(--accent); font-size: 12px; font-weight: 650; }
  .m-howsteps { padding: 0; list-style: none; counter-reset: s; margin: 0; }
  .m-howsteps li { counter-increment: s; display: flex; gap: 12px; margin-bottom: 12px; font-size: 15px; }
  .m-howsteps li::before { content: counter(s); background: var(--accent); color: var(--accent-ink); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 650; }
  body.m-index .tips-card { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 4px 0; }
  body.m-index .tips-title { min-height: 48px; margin: 0; justify-content: flex-start; color: var(--ink); font-weight: 650; cursor: pointer; }
  body.m-index .tips-title::after { content: "⌄"; color: var(--muted); font-size: 18px; margin-left: auto; }
  body.m-index .tips-card.is-open .tips-title::after { content: "⌃"; }
  body.m-index .tips-card:not(.is-open) .tips-list, body.m-index .tips-card .tips-illustration { display: none; }
  body.m-index .tips-card.is-open .tips-list { display: block; margin-bottom: 12px; }
  body.m-index .check-row { min-height: 52px; padding: 8px 0; gap: 12px; }
  body.m-index .check-row .check-icon { order: -1; color: var(--accent); }
  body.m-index .check-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 20px; background: var(--pr-track); position: relative; flex: none; order: 2; margin: 0; cursor: pointer;
  }
  body.m-index .check-row input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform 180ms; }
  body.m-index .check-row input[type="checkbox"]:checked { background: var(--accent); }
  body.m-index .check-row input[type="checkbox"]:checked::before { transform: translateX(20px); }
  body.m-index .check-text b { font-size: 16px; }
  body.m-index .action-bar {
    position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 39; padding: 12px 16px; margin: 0; flex-direction: row; gap: 12px;
    background: linear-gradient(180deg, transparent, var(--pr-bg) 28%); border: 0; box-shadow: none;
  }
  body.m-index .action-bar button { flex: 1; min-height: 52px; }
  body.m-index .primary-btn { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }

  /* --- session --- */
  body.m-index.m-step-session .session-panel, body.m-index.m-step-session .feedback-panel { display: flex; }
  body.m-index.m-step-session .feedback-panel { display: block; }
  body.m-index.m-step-session .check-row { display: flex; }
  body.m-index.m-step-session .action-bar { display: flex; bottom: env(safe-area-inset-bottom); }
  body.m-index.m-step-session #start-btn { display: none; }
  body.m-index.m-step-session { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.m-index.m-step-session #end-session-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; }
  body.m-index.m-step-session #end-session-btn .icon { color: var(--alert); }

  /* --- done --- */
  body.m-index.m-step-done .summary-panel { display: block; background: transparent; border: 0; box-shadow: none; padding: 0; }
  body.m-index.m-step-done .m-done-head { display: block; text-align: center; }
  body.m-index.m-step-done .m-done-actions { display: grid; gap: 12px; margin-top: 16px; }
  .m-success { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--pr-tint); color: var(--accent); margin: 8px auto 16px; }
  .m-success .icon { width: 40px; height: 40px; stroke-width: 2.4; }
  .m-done-head h2 { margin: 0; font-size: 24px; }
  .m-done-head p { margin: 4px 0 16px; color: var(--muted); }
  body.m-index.m-step-done .summary-panel > .panel-head { display: block; margin: 0 0 12px; }
  body.m-index.m-step-done .summary-panel > .panel-head .head-icon, body.m-index.m-step-done .summary-panel > .panel-head .head-text { display: none; }
  body.m-index.m-step-done #detail-btn { width: 100%; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  body.m-index.m-step-done #detail-btn:disabled { background: var(--accent); }
  body.m-index.m-step-done .m-done-actions .btn { margin: 0; }
  body.m-index.m-step-done { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (max-width: 767px) {
  /* the design leaves simulated vitals out of the summary */
  body.m-index .vital-tiles, body.m-index .summary-foot { display: none; }

  /* camera tools = bottom sheet */
  #fx-panel:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 80dvh; overflow-y: auto; border-radius: 24px 24px 0 0; border: 0;
    background: var(--surface); padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgb(0 0 0 / .3); gap: 14px;
  }
  #fx-panel .m-fx-head { display: flex; align-items: center; justify-content: space-between; }
  #fx-panel .m-fx-head h2 { margin: 0; font-size: 23px; }
  #fx-panel .fx-chip { min-height: 44px; border-radius: 24px; border-color: var(--border); color: var(--muted); }
  #fx-panel .fx-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  #fx-panel .m-fx-done { width: 100%; }
}

@media (max-width: 767px) {
  .dialog-body details { border-bottom: 1px solid var(--border); padding: 4px 0; }
  .dialog-body summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-weight: 650; font-size: 17px; list-style: none; }
  .dialog-body summary::-webkit-details-marker { display: none; }
  .dialog-body summary::after { content: "⌄"; color: var(--muted); }
  .dialog-body details[open] summary::after { content: "⌃"; }
  .dialog-body details > ol, .dialog-body details > ul { padding-left: 22px; }
  .dialog-body details > p, .dialog-body details li { font-size: 15px; color: var(--muted); }
  .dialog-body .button-row { flex-direction: row; gap: 12px; }
  .dialog-body .button-row > * { flex: 1; width: auto; }
  .dialog-body .secondary-btn, .dialog-body .pill-btn { min-height: 48px; border-radius: 12px; }
}

@media (max-width: 767px) {
  .m-strength { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-top: -2px; }
  .m-strength[hidden] { display: none; }
  .m-bars { display: flex; gap: 4px; flex: 1; }
  .m-bars i { flex: 1; height: 6px; border-radius: 6px; background: var(--pr-track); }
  .m-strength[data-level="1"] .m-bars i:nth-child(1) { background: var(--alert); }
  .m-strength[data-level="2"] .m-bars i:nth-child(-n+2) { background: var(--warn); }
  .m-strength[data-level="3"] .m-bars i { background: var(--accent); }
  .m-strength-label { font-weight: 650; }
}

@media (max-width: 767px) {
  body.m-index.m-step-watch .guide-note:not([hidden]) { display: flex; }
  .guide-note { background: var(--warn-bg); border-color: transparent; }
  .guide-note b { font-size: 15px; }
  body.m-index.m-step-watch .guide-note:not([hidden]) ~ .action-bar #start-btn { opacity: 1; background: var(--pr-track); border-color: var(--border); color: var(--muted); }
  .exercise-card .exercise-action-btn.is-guide { background: var(--surface); }
}

@media (max-width: 767px) {
  /* ----- auth screens like the design ----- */
  .m-backlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 16px; margin-bottom: 4px; }
  .m-backlink[hidden] { display: none; }
  .m-backlink .icon { width: 20px; height: 20px; }
  body.m-auth .m-intro, body.m-auth .m-linkfoot { display: block; }
  body.m-auth .m-intro { color: var(--muted); margin: 0 0 8px; }
  body.m-auth .m-linkfoot { text-align: center; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
  body.m-auth .m-linkfoot .link-btn { font-size: 14px; }
  body.m-auth .m-already { border-top: 0; margin-top: 0; font-size: 15px; }
  body.m-auth .plan-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--ink-soft); }
  body.m-auth .plan-form input[type="text"], body.m-auth .plan-form input[type="email"], body.m-auth .plan-form input[type="password"] { background: var(--surface); border-color: var(--border-strong); }
  body.m-forgot .role-tabs, body.m-forgot .scope-note, body.m-forgot .intro-video-row, body.m-forgot .signup-title, body.m-forgot #signup-toggle { display: none; }
  body.m-forgot .login-page .app-header { margin-top: 8px; }
  body.m-signup .signup-title, body.m-signup #cancel-signup-btn { display: none; }
  body.m-auth #forgot-toggle { margin-top: -4px; }
  body.m-auth #forgot-toggle .link-btn, body.m-auth #show-signup-btn { text-decoration: underline; }
}

@media (max-width: 767px) {
  body.m-signup .scope-note, body.m-signup .intro-video-row { display: none; }

  /* Today: no brand bar, just the avatar button next to the greeting */
  body.m-p-today .app-header { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; margin: 0; min-height: 0; z-index: 3; }
  body.m-p-today .app-header .brand { display: none; }
  body.m-p-today .page { padding-top: calc(20px + env(safe-area-inset-top)); }
  body.m-p-today .m-greeting { margin-top: 0; }
  body.m-p-today .m-profile-btn { background: var(--pr-tint); border-color: transparent; color: var(--accent); }

  /* choose list: filled check circle for the selected row */
  .m-ex-radio { display: grid; place-items: center; }
  .m-ex-row[aria-selected="true"] .m-ex-radio { background: var(--accent); border: 0; box-shadow: none; }
  .m-ex-row[aria-selected="true"] .m-ex-radio::after { content: ""; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
  .m-watch-bar .btn .icon { fill: currentColor; stroke: none; }

  /* watch: single hero picture */
  .m-hero { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; }
  .m-hero .demo-mini { display: block; }
  .m-hero .demo-arrow { display: none; }
  .m-hero .mini-card { display: none; width: 100%; }
  .m-hero .mini-card.is-on { display: block; }
  .m-hero .mini-media { border-radius: 0; aspect-ratio: 16 / 10; }
  .m-hero .mini-pill { top: auto; bottom: 10px; left: 10px; }
  .m-hero .m-reps-badge { position: absolute; top: 10px; left: 10px; margin: 0; background: rgb(5 11 11 / .72); color: #e8faf4; z-index: 2; }
  body.m-index .tips-title .icon, body.m-index .check-row .check-icon { color: var(--accent); }
  body.m-index .tips-title { gap: 12px; }
  body.m-index .tips-card { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; background: var(--surface); }
  body.m-index.m-step-watch .check-row { padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  body.m-index .action-bar #start-btn .icon { fill: none; }
}

@media (max-width: 767px) {
  /* ===== session screen (not full-screen) ===== */
  body.m-index.m-step-session .steps { display: none; }
  body.m-index.m-step-session .session-panel { display: contents; }
  body.m-index.m-step-session .session-panel > .panel-head, body.m-index.m-step-session .session-panel > .head-text { display: none; }
  body.m-index.m-step-session .m-excard { display: flex; order: 1; }
  body.m-index.m-step-session .coach-banner { order: 2; }
  body.m-index.m-step-session .camera-stack { order: 3; }
  body.m-index.m-step-session .m-rep-slot { display: block; order: 4; }
  body.m-index.m-step-session details.m-guidance { display: block; order: 5; }
  body.m-index.m-step-session .check-row { order: 6; }
  body.m-index.m-step-session #ask-coach-panel { order: 7; }
  body.m-index.m-step-session .feedback-panel { order: 8; display: block; }
  body.m-index.m-step-session .feedback-panel > .panel-head { display: none; }
  body.m-index.m-step-session .feedback-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
  body.m-index.m-step-session details.m-tracking { display: block; }
  body.m-index.m-step-session .session-panel > .status-text, body.m-index.m-step-session #rec-note, body.m-index.m-step-session .compensation-banner { order: 9; }
  body.m-index.m-step-session .session-panel #fx-panel { order: 10; }

  .m-excard {
    align-items: center; gap: 12px; width: 100%; padding: 8px; text-align: left; font: inherit; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  }
  .m-excard img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--pr-track); }
  .m-excard-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .m-excard-main strong { font-size: 16px; }
  .m-excard-main span { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-excard .icon { color: var(--muted); flex: none; }
  body.m-index.m-step-session .coach-banner { padding: 8px 12px; font-size: 14px; }
  body.m-index:not(.cam-immersive).m-step-session .camera-stack { width: 100%; aspect-ratio: 4 / 3; margin: 0; }
  body.m-index:not(.cam-immersive).m-step-session .camera-stack.mode-body { width: min(100%, calc(62dvh * 3 / 4)); aspect-ratio: 3 / 4; margin-inline: auto; }

  /* rep + angle cards below the camera */
  .m-rep-slot .rep-overlay {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding: 0; background: none; align-items: stretch;
  }
  .m-rep-slot .rep-overlay[hidden] { display: none; }
  .m-rep-slot .rep-row { display: contents; }
  .m-rep-slot .rep-badge { grid-column: 1; grid-row: 1; background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: 12px 12px 0 0; border-bottom: 0; padding: 10px 12px 2px; font-size: 18px; font-weight: 700; }
  .m-rep-slot .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 12px 12px; margin: 0; }
  .m-rep-slot .angle-chip { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--accent); border-radius: 12px; padding: 12px; font-size: 18px; font-weight: 700; }
  .m-rep-slot .hold-row { grid-column: 1 / -1; }
  .m-rep-slot .rep-percent { color: var(--muted); }

  /* accordions */
  details.m-acc { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
  details.m-acc > summary { min-height: 52px; gap: 12px; justify-content: flex-start; font-size: 16px; font-weight: 650; display: flex; align-items: center; list-style: none; cursor: pointer; }
  details.m-acc > summary::-webkit-details-marker { display: none; }
  details.m-acc > summary::after { content: "⌄"; color: var(--muted); }
  details.m-acc[open] > summary::after { content: "⌃"; }
  details.m-acc > summary .icon { color: var(--accent); }
  details.m-acc > summary > span { flex: 1; }
  details.m-acc > p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
  details.m-acc .feedback-tiles { margin-bottom: 12px; }
  body.m-index #ask-coach-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }

  /* Pause / End session */
  body.m-index.m-step-session #pause-btn { display: inline-flex; }
  body.m-index.m-step-session .action-bar { background: var(--surface); border-top: 1px solid var(--border); bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  body.m-index.m-step-session #pause-btn, body.m-index.m-step-session #end-session-btn { background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: 12px; }
  body.m-index.m-step-session #pause-btn .icon { stroke: currentColor; fill: none; }
  body.m-index.m-step-session { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

.m-sum, .m-detail-list, .m-recent { display: none; }
.mi { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 767px) {
  /* ===== session summary like the design ===== */
  body.m-index.m-step-done .summary-body .report-table-wrap, body.m-index.m-step-done .report-summary { display: none; }
  body.m-index.m-step-done .m-sum { display: block; }
  .m-sum-ex { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--pr-tint); color: var(--accent); }
  .m-sum-ex strong { flex: 1; font-size: 17px; color: var(--accent); }
  .m-sum-badge { display: inline-flex; margin: 12px 0; padding: 4px 10px; border-radius: 20px; background: var(--pr-tint); color: var(--accent); font-size: 12px; font-weight: 650; }
  .m-sum-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); margin-top: 12px; }
  .m-sum-grid > div { padding: 14px 16px; display: grid; gap: 2px; align-content: center; border-bottom: 1px solid var(--border); }
  .m-sum-grid > div:nth-child(odd) { border-right: 1px solid var(--border); }
  .m-sum-grid > div:nth-child(n+3) { border-bottom: 0; }
  .m-sum-grid strong { font-size: 23px; line-height: 1.3; display: flex; align-items: center; gap: 6px; }
  .m-sum-grid span { font-size: 13px; color: var(--muted); }
  .m-sum-grid .is-ok strong, .m-sum-grid .is-ok .mi { font-size: 14px; color: var(--accent); }
  .m-sum-grid .is-warn strong { font-size: 14px; color: var(--warn); }
  body.m-index.m-step-done #detail-btn { margin-top: 4px; }
  body.m-index.m-step-done .summary-panel { display: flex; flex-direction: column; }
  body.m-index.m-step-done .summary-panel > .panel-head { order: 3; margin-top: 16px; }
  body.m-index.m-step-done .summary-panel > .summary-body { order: 2; }
  body.m-index.m-step-done .summary-panel > .m-done-head { order: 1; }
  body.m-index.m-step-done .summary-panel > .m-done-actions { order: 4; }
  body.m-index.m-step-done #tuning-card { order: 5; }

  /* ===== detailed report dialog ===== */
  #detail-dialog .detail-grid, #detail-dialog .report-table-wrap { display: none; }
  #detail-dialog .m-detail-list { display: block; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .m-detail-list > div { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
  .m-detail-list > div:last-child { border-bottom: 0; }
  .m-detail-list .mi { color: var(--muted); width: 20px; height: 20px; }
  .m-detail-list dt { color: var(--muted); flex: 1; }
  .m-detail-list dd { margin: 0; font-weight: 500; text-align: right; }
  .m-detail-list dd.is-ok { color: var(--accent); font-weight: 650; }
  .m-detail-list dd.is-warn { color: var(--warn); font-weight: 650; }
  #detail-dialog .m-recent { display: grid; gap: 8px; }
  .m-recent-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .m-recent-row > div { flex: 1; display: grid; gap: 2px; font-size: 14px; }
  .m-recent-row strong { font-size: 14px; font-weight: 650; }
  .m-recent-row span { color: var(--muted); font-size: 13px; }
  .m-recent-row .mi { color: var(--muted); }
  #detail-dialog .dialog-note { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--pr-tint); color: var(--muted); margin-top: 16px; font-size: 13px; }
}

.m-dash, .m-hist { display: none; }
.m-title-swap .m-only-i { display: none; }
@media (max-width: 767px) {
  .m-hide { display: none !important; }
  .m-title-swap .d-only { display: none; }
  .m-title-swap .m-only-i { display: inline; }

  /* ===== clinician dashboard like the design ===== */
  body.m-dashboard .scope-note, body.m-dashboard .overview-panel, body.m-dashboard .roster-panel { display: none; }
  body.m-dashboard .m-dash { display: block; }
  .m-dash-note { align-items: center; margin: 0 0 12px; }
  .m-dash-note div { display: grid; gap: 0; }
  .m-dash-note strong { color: var(--ink); }
  .m-dash-note span { font-size: 13px; }
  .m-stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .m-stats3 > div { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .m-stats3 strong { display: block; font-size: 23px; line-height: 1.3; }
  .m-stats3 span { font-size: 12px; color: var(--muted); }
  .m-periods { margin: 0 0 12px; padding: 0; border: 0; background: transparent; gap: 8px; }
  .m-periods button { border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: none; flex: none; padding: 8px 16px; }
  .m-periods button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
  .m-dash-h { display: flex; align-items: center; gap: 12px; font-size: 20px; margin: 16px 0 12px; }
  .m-dash-h .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--pr-tint); color: var(--accent); }
  .m-exlist { display: grid; gap: 8px; }
  .m-dex {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; font: inherit; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  }
  .m-dex-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pr-tint); color: var(--accent); flex: none; }
  .m-dex-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .m-dex-main strong { font-size: 15px; line-height: 1.3; }
  .m-dex-main em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
  .m-dex-line { font-size: 13px; color: var(--muted); }
  .m-dex-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
  .m-dex-bar i { display: block; height: 8px; border-radius: 8px; background: var(--accent); flex: none; max-width: calc(100% - 44px); }
  .m-dex-bar i.low { background: var(--warn); }
  .m-dex-bar b { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: auto; }
  .m-dex .icon:last-child { color: var(--muted); flex: none; }

  /* ===== exercise history dialog ===== */
  #detail-dialog .history-table, #detail-dialog .dialog-body > .dialog-note { display: none; }
  #detail-dialog .m-hist { display: block; }
  .m-hist .dialog-note { display: block !important; margin: 12px 0; }
  .m-hist-chip { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--pr-tint); color: var(--accent); }
  .m-hist-chip strong { color: var(--ink); }
  .m-hist-rows { display: grid; gap: 8px; }
  .m-hist-end { display: grid; justify-items: center; gap: 2px; margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--pr-tint); color: var(--muted); font-size: 13px; }
  .m-hist-end strong { color: var(--ink); font-size: 14px; }
  body.m-index.m-step-done .m-nav { display: none; }
  body.m-index.m-step-done #tuning-card { display: none; }
}

.m-ov, .m-ovhead, .m-assign-bar, .m-psearch { display: none; }
@media (max-width: 767px) {
  /* patients list rows like the design */
  body.m-tab-patients .m-psearch { display: flex; }
  #patients-body table.roster tr { position: relative; padding-right: 36px; }
  #patients-body table.roster tr::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
  #patients-body table.roster td:nth-child(1) { grid-column: 1 / -1; }
  #patients-body table.roster td:nth-child(1) .roster-name, #patients-body table.roster td:nth-child(1) .roster-sub { display: inline; }
  #patients-body table.roster td:nth-child(1) .roster-sub { margin-left: 8px; font-size: 13px; }
  #patients-body table.roster td:nth-child(5) { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 4px; }
  #patients-body table.roster td:nth-child(4) { grid-column: 1 / -1; }
  #patients-body table.roster tr[hidden] { display: none; }

  /* required fields are starred like the design */
  #add-patient-form label:has(input:required) .plan-label::after, #new-plan-form label:has(:required) .plan-label::after { content: " *"; color: var(--alert); }
  body.m-sub-add .m-continue, body.m-sub-new #new-plan-form .button-row { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; }

  /* plan detail overview */
  body.m-sub-detail.m-dtab-overview .m-ov { display: block; }
  body.m-sub-detail.m-dtab-overview #detail-panel { display: none; }
  body.m-sub-detail:not(.m-dtab-overview) .m-ov { display: none; }
  body.m-sub-detail .m-assign-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  body.m-sub-detail { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .m-pcard { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .m-pcard-main { flex: 1; display: grid; gap: 0; min-width: 0; }
  .m-pcard-main strong { font-size: 17px; }
  .m-pcard-main span { font-size: 13px; color: var(--muted); }
  .m-more { width: 40px; height: 40px; }
  .m-weekcard { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 12px; font-size: 14px; }
  .m-weekcard .m-progress { flex: 1; margin: 0; }
  .m-weekcard > span { color: var(--muted); font-size: 13px; }
  .m-ovsections h3 { font-size: 15px; font-weight: 650; margin: 16px 0 8px; }
  .m-today-act { padding: 0; }
  .m-act-top { display: flex; align-items: center; gap: 12px; padding: 12px; }
  .m-act-top > div { flex: 1; }
  .m-act-top strong { font-size: 14px; }
  .m-act-top .m-progress { margin: 6px 0 0; }
  .m-act-pct { font-size: 13px; color: var(--muted); }
  .m-act-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pr-tint); color: var(--accent); flex: none; }
  .m-act-cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
  .m-act-cells > div { padding: 12px; text-align: center; display: grid; }
  .m-act-cells > div + div { border-left: 1px solid var(--border); }
  .m-act-cells strong { font-size: 17px; }
  .m-act-cells span { font-size: 12px; color: var(--muted); }
  .m-plan-ex { padding: 4px 12px; }
  .m-plan-ex-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; border-bottom: 1px solid var(--border); }
  .m-plan-ex-row:last-child { border-bottom: 0; }
  .m-pe-main { flex: 1; display: grid; }
  .m-pe-main strong { font-size: 14px; }
  .m-pe-main span { font-size: 13px; color: var(--muted); }
  .m-plan-ex-row .icon:last-child, .m-linkrow .icon { color: var(--muted); }
  .m-outcome { padding: 0; }
  .m-outcome-row { display: flex; align-items: center; gap: 12px; padding: 12px; }
  .m-outcome-row b { font-size: 17px; }
  .m-linkrow { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
}

@media (max-width: 767px) {
  body.m-sub-detail.m-dtab-overview #activity-panel { display: none; }
  body.m-sub-detail.m-dtab-overview.m-show-activity #activity-panel { display: block; }
}

@media (max-width: 767px) {
  body.m-sub-detail .m-ovhead { display: block; }
  .m-dtabs { margin-top: 0; }
}

@media (max-width: 767px) {
  .m-wiz .m-subtitle p { margin: 0; font-size: 13px; color: var(--muted); }
  .m-wiz .m-topbar { margin-bottom: 8px; }
  .m-wiz-card { background: transparent; border: 0; box-shadow: none; padding: 8px 0 0; }
  .m-wiz-card h3 { font-size: 20px; margin-top: 8px; }
  .m-wiz-card h2 { font-size: 20px; font-weight: 700; }
  .recovery-page .progress-summary { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
  .m-more { border: 0; background: transparent; }
  .m-more .icon { stroke-width: 3; }
}

.m-appearance, .m-privacy { display: none; }
@media (max-width: 767px) {
  #settings-dialog .m-appearance { display: block; }
  #settings-dialog .m-privacy { display: flex; gap: 12px; padding: 12px; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .m-privacy .icon { color: var(--accent); flex: none; margin-top: 2px; }
  .m-privacy p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
  #settings-dialog .dialog-body h3 { font-size: 17px; margin: 20px 0 8px; }
  #settings-dialog .m-appearance h3 { margin-top: 4px; }
  #settings-dialog .check-row { padding: 12px 0; align-items: center; gap: 12px; }
  #settings-dialog .check-row .check-text { flex: 1; }
  #settings-dialog .check-row .check-icon { order: -1; color: var(--accent); width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--pr-tint); }
  #settings-dialog .check-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 20px; background: var(--pr-track); position: relative; flex: none; order: 2; margin: 0; cursor: pointer; }
  #settings-dialog .check-row input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform 180ms; }
  #settings-dialog .check-row input[type="checkbox"]:checked { background: var(--accent); }
  #settings-dialog .check-row input[type="checkbox"]:checked::before { transform: translateX(20px); }
  #settings-dialog #angles-toggle + .check-text { order: 1; }
  #settings-dialog .calibration-hint { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
  #settings-dialog .secondary-btn { background: var(--surface); border: 1px solid var(--accent); color: var(--accent); }
  #settings-dialog #log-clear-btn { border-color: var(--alert); color: var(--alert); }
  #settings-dialog .log-summary { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px; font-size: 13px; margin-bottom: 12px; }
  #settings-dialog .readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px; }
  #settings-dialog .readout-label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  #settings-dialog .readout-value { font-size: 23px; font-weight: 500; }
  #help-dialog .dialog-body details ol { list-style: none; padding: 0; counter-reset: h; }
  #help-dialog .dialog-body details ol li { counter-increment: h; position: relative; padding-left: 36px; margin-bottom: 12px; min-height: 24px; }
  #help-dialog .dialog-body details ol li::before { content: counter(h); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--muted); display: grid; place-items: center; font-size: 13px; color: var(--ink); }
}

@media (max-width: 767px) {
  #fx-panel .m-fx-actions { display: flex; align-items: center; gap: 16px; }
  #fx-panel .m-fx-actions #fx-reset { flex: none; font-size: 16px; text-decoration: underline; }
  #fx-panel .m-fx-actions .m-fx-done { flex: 1; width: auto; }
  #fx-panel .fx-toggles { gap: 4px; }
  #fx-panel .fx-toggles .check-row { justify-content: space-between; min-height: 48px; }
  #fx-panel .fx-toggles .check-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 20px; background: var(--pr-track); position: relative; flex: none; order: -1; margin: 0; cursor: pointer; }
  #fx-panel .fx-toggles .check-row input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform 180ms; }
  #fx-panel .fx-toggles .check-row input[type="checkbox"]:checked { background: var(--accent); }
  #fx-panel .fx-toggles .check-row input[type="checkbox"]:checked::before { transform: translateX(20px); }
  #fx-panel .fx-toggles .check-row .check-text { flex: 1; }
  #fx-panel .fx-slider { font-size: 14px; }
}

@media (max-width: 767px) {
  #booking-search-input { width: 100%; height: 48px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--pr-bg); color: var(--ink); font: inherit; font-size: 16px; }
  .booking-search .plan-label { font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
}

@media (max-width: 767px) {
  .m-recent-row[data-detail] { cursor: pointer; width: 100%; }
  .m-recent-row.is-open { border-color: var(--accent); background: var(--pr-tint); }
  .m-recent-row.is-open > .mi:last-child, .m-recent-row.is-open > .icon:last-child { transform: rotate(90deg); }
  dl.m-row-detail { margin: -4px 0 8px; padding: 4px 12px; border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 12px 12px; background: var(--surface); }
  dl.m-row-detail[hidden] { display: none; }
  dl.m-row-detail > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  dl.m-row-detail > div:last-child { border-bottom: 0; }
  dl.m-row-detail dt { color: var(--muted); }
  dl.m-row-detail dd { margin: 0; font-weight: 600; }
  #patients-body table.roster tbody tr, .m-dex, .m-sum-ex, .m-excard, .exercise-card { cursor: pointer; -webkit-tap-highlight-color: rgb(8 127 114 / .15); }
}

@media (max-width: 767px) {
  .m-set-status { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pr-tint); color: var(--ink); font-size: 14px; }
  .m-set-status[hidden] { display: none; }
}

@media (max-width: 767px) {
  body.m-index.m-step-session .m-toolsrow {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 8px; padding: 0 12px; text-align: left; font: inherit; font-weight: 650; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  }
  .m-toolsrow .icon:first-child { color: var(--accent); }
  .m-toolsrow span { flex: none; }
  .m-toolsrow small { flex: 1; font-weight: 400; font-size: 12px; color: var(--muted); text-align: right; }
  .m-toolsrow .icon:last-child { color: var(--muted); }
  /* never clip the tool strip on short cameras */
  .cam-tools { max-height: calc(100% - 12px); overflow-y: auto; scrollbar-width: none; }
  .cam-tools::-webkit-scrollbar { display: none; }
}

@media (max-width: 767px) {
  #fx-panel:not([hidden]) { left: 0; right: 0; transform: none; width: auto; border-radius: 24px 24px 0 0; }
}

@media (max-width: 767px) {
  .exercise-card.is-upcoming .exercise-action { display: block; grid-column: 1 / -1; }
  .exercise-card.is-upcoming { grid-template-columns: 52px minmax(0, 1fr); background: transparent; border: 1px dashed var(--border); cursor: default; }
  .exercise-card.is-upcoming .m-card-end { display: none; }
  .upcoming-title { font-size: 17px; color: var(--ink); margin: 20px 0 8px; }
}

@media (max-width: 767px) {
  /* guide-only cards always show their buttons (the camera ones only show on the next-up card) */
  .exercise-card:has(.mark-done-btn) .exercise-action { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); justify-content: stretch; justify-items: stretch; gap: 8px; grid-column: 1 / -1; }
  .exercise-card:has(.mark-done-btn) .exercise-action .status-badge { grid-column: 1 / -1; }
  .exercise-card .exercise-action .is-guide { width: 100%; }
  .exercise-card .mark-done-btn { width: 100%; min-height: 48px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  body.m-index.m-step-watch #mark-done-btn { flex: 1; }
}

@media (max-width: 767px) {
  /* other actions on a phone card: always full width, never right-packed */
  .exercise-card .exercise-action { justify-content: stretch; }
  .exercise-card .exercise-action .pill-btn, .exercise-card .exercise-action .status-badge { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  /* guide-only card: the two buttons sit side by side and are slimmer */
  .exercise-card:has(.mark-done-btn) .exercise-action .pill-btn { min-height: 44px; padding: 8px 6px; font-size: 14px; gap: 6px; }
  .exercise-card:has(.mark-done-btn) .exercise-action .pill-btn .icon { width: 18px; height: 18px; }
  .exercise-card .mark-done-btn { white-space: normal; line-height: 1.15; }
}

@media (max-width: 767px) {
  .m-linkrow.is-open .icon { transform: rotate(90deg); }
  body.m-show-activity #activity-panel { scroll-margin-top: 12px; }
}

@media (max-width: 767px) {
  /* leave room under the page for the fixed Assign exercise bar, so Delete plan is never hidden behind it */
  body.m-sub-detail.has-m-nav, body.m-sub.m-sub-detail { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
  #activity-body tbody tr { cursor: pointer; }
  .assignment-row.m-flash { outline: 3px solid var(--accent); outline-offset: 2px; background: var(--pr-tint); transition: outline-color .3s; }
  .m-danger-zone { margin-bottom: 24px; }
  .m-danger-zone .pill-btn { min-height: 48px; border-width: 1.5px; }
}

@media (max-width: 767px) {
  /* the plan-detail tabs belong to the detail view only (a broad tab rule was showing them under the plans list) */
  body.m-plan:not(.m-sub-detail) .m-dtabs { display: none !important; }
}

@media (max-width: 767px) {
  .booking-search { margin: 20px 0 8px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
  .booking-search .plan-field { gap: 8px; }
  #booking-search-input { background: var(--pr-bg); }
  .booking-results { gap: 8px; margin-top: 12px; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; }
  .booking-result { padding: 10px 12px; gap: 12px; border-radius: 14px; background: var(--pr-bg); }
  .br-avatar { width: 42px; height: 42px; background: var(--pr-tint); }
  .br-main .roster-name { font-size: 16px; }
  .br-main .roster-sub { font-size: 13px; }
  .br-action .pill-btn { min-width: 64px; min-height: 40px; border-radius: 10px; }
  .br-action .status-badge { font-size: 11px; padding: 3px 8px; white-space: normal; text-align: center; }
  .br-count { padding-bottom: 4px; }
}

@media (max-width: 767px) {
  body.m-tab-patients .patient-search { display: block; }
  .patient-search .plan-label { font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .patient-search input[type="search"] { height: 48px; border-radius: 10px; border-color: var(--border); background: var(--surface); font-size: 16px; }
  body.m-sub-add .patient-search { display: none; }
}

@media (max-width: 767px) {
  /* the Watch picture: both positions stacked, cross-fading */
  .m-hero { aspect-ratio: 16 / 10; }
  .m-hero .demo-mini { position: absolute; inset: 0; display: block; }
  .m-hero .mini-card { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
  .m-hero .mini-card.is-on { opacity: 1; }
  .m-hero .mini-media { height: 100%; aspect-ratio: auto; }
  .m-hero-dots { position: absolute; right: 12px; bottom: 14px; display: flex; gap: 6px; z-index: 3; }
  .m-hero-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .45); transition: background 300ms, transform 300ms; }
  .m-hero-dots i.is-on { background: #fff; transform: scale(1.25); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .m-hero .mini-card { transition: none; }
}

@media (max-width: 767px) {
  .booking-search-head strong { font-size: 16px; }
  .booking-search { margin-top: 20px; }
}


/* ===== one dropdown arrow everywhere (laptop + phone, light + dark) =====
   The browser's own arrow is replaced by the same chevron, 18px, 16px from the right edge, vertically centred. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c5450' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 18px 18px !important;
  padding-right: 46px !important;
  text-overflow: ellipsis;
  cursor: pointer;
}
:root[data-theme="dark"] select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfded5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }
select:not([multiple]):not([size]):disabled { opacity: .6; cursor: not-allowed; }
/* the exercise picker keeps its own chevron element: same size and distance from the edge */
.select-wrap select { background-image: none !important; padding-right: 46px !important; }
.select-chevron { right: 16px !important; width: 18px !important; height: 18px !important; stroke-width: 2.4; }

/* spacing inside the Patients card: table -> clinic-records box -> card bottom (plan.css sets a tighter margin, this loads last) */
#patients-panel .booking-search { margin: 22px 0 6px; }
#patients-panel #patients-body { margin-bottom: 4px; }

@media (max-width: 767px) {
  /* each exercise shows its own picture (not a generic icon) */
  .m-exthumb { display: block; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; background: var(--pr-track); }
  .m-exthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .m-act-ico.m-exthumb, .m-dex-ico.m-exthumb { border-radius: 10px; background: var(--pr-track); }
  .m-dex-ico { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--pr-track); }
  .m-dex-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .m-plan-ex-row .m-exthumb { width: 44px; height: 44px; }
  .m-hist-chip .m-exthumb { width: 36px; height: 36px; }
  .m-sum-ex .m-exthumb { width: 40px; height: 40px; }
}

@media (max-width: 767px) {
  /* Today cards: compact action buttons */
  .exercise-card .exercise-action .pill-btn, .exercise-card .exercise-action .status-badge { min-height: 38px !important; padding: 6px 14px; font-size: 14px; font-weight: 650; border-radius: 10px; gap: 6px; }
  .exercise-card .exercise-action .pill-btn .icon { width: 16px; height: 16px; }
  .exercise-card.is-next .exercise-action .pill-btn { min-height: 38px !important; }
  .exercise-card .mark-done-btn { min-height: 38px !important; font-size: 14px; }
  .exercise-card:has(.mark-done-btn) .exercise-action .pill-btn { min-height: 38px !important; font-size: 13.5px; }
  .exercise-card { padding: 10px 12px; gap: 6px 12px; }
  .exercise-card .exercise-action { margin-top: 2px; }
}

@media (max-width: 767px) {
  .patient-overview { margin-top: 4px; }
  body.m-dashboard .device-log .m-dash-note { margin-top: 0; }
}

@media (max-width: 767px) {
  /* Patients tab: compact cards -- name + status on one line, surgery (if any) beneath, no empty rows */
  #patients-body table.roster tbody { gap: 8px; }
  #patients-body table.roster tr { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 40px 10px 14px; border-radius: 14px; }
  #patients-body table.roster td:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }
  #patients-body table.roster td:nth-child(1) .roster-name { font-size: 16px; }
  #patients-body table.roster td:nth-child(1) .roster-sub { font-size: 12.5px; margin-left: 8px; }
  #patients-body table.roster td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  #patients-body table.roster td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  #patients-body table.roster td.is-empty { display: none; }
  #patients-body table.roster td .status-badge { padding: 2px 9px; font-size: 11.5px; }
  #patients-body table.roster tr::after { right: 14px; }
}

@media (max-width: 767px) {
  /* Plans tab: compact cards -- patient + phase on one line, template beneath, date and progress on the last */
  #plan-list-body table.roster tbody { gap: 8px; }
  #plan-list-body table.roster tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; padding: 10px 14px; border-radius: 14px;
  }
  #plan-list-body table.roster td { display: block; padding: 0; font-size: 13px; color: var(--muted); text-align: left; }
  #plan-list-body table.roster td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #plan-list-body table.roster td:nth-child(1) .roster-name { font-size: 16px; }
  #plan-list-body table.roster td:nth-child(5) {
    grid-column: 2; grid-row: 1; justify-self: end; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
    background: var(--pr-tint); color: var(--accent); white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
  }
  #plan-list-body table.roster td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  #plan-list-body table.roster td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: 12px; }
  #plan-list-body table.roster td:nth-child(4) { grid-column: 2; grid-row: 3; justify-self: end; }
  #plan-list-body .bar-row { gap: 8px; }
  #plan-list-body .bar-track { width: 84px; }
  #plan-list-body .bar-val { font-size: 12px; }

  /* dashboard cards: tighter */
  .co-attn, .co-row { padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .co-avatar { width: 38px; height: 38px; font-size: 13px; }
  .co-attn-main strong, .co-row-main strong { font-size: 15px; }
  .co-reasons { gap: 4px; }
  .co-reasons i { font-size: 11.5px; padding: 2px 8px; }
  .co-attn-list, .co-list { gap: 8px; }
  .co-row-side { padding-left: 48px; }
  .co-row .co-go { top: 14px; right: 12px; }
  .co-meter i { height: 6px; }
  .co-tile small { font-size: 11.5px; }
}

@media (max-width: 767px) {
  /* ===== Profile sheet ===== */
  dialog.m-sheet.is-short { height: auto; max-height: 92dvh; }
  .m-profile-hero {
    display: flex; align-items: center; gap: 16px; padding: 18px 16px; margin: 4px 0 8px; border-radius: 18px;
    background: linear-gradient(135deg, var(--pr-tint), var(--surface)); border: 1px solid var(--border);
  }
  .m-avatar-lg {
    display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
    font-size: 22px; font-weight: 750; box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
  }
  .m-avatar-lg .icon { width: 28px; height: 28px; }
  .m-hero-text { display: grid; gap: 6px; min-width: 0; }
  .m-hero-text strong { font-size: 20px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-role-chip { justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
  .m-group-label { margin: 18px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .m-sheet-list { gap: 0; margin: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
  .m-sheet-list .m-row { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; min-height: 60px; padding: 8px 14px; background: transparent; }
  .m-sheet-list .m-row:last-child { border-bottom: 0; }
  .m-row-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--pr-tint); color: var(--accent); }
  .m-sheet-list .m-row .m-row-ico .icon, .m-row-ico .icon { width: 20px; height: 20px; color: var(--accent); }
  .m-row .grow { display: grid; gap: 1px; text-align: left; }
  .m-row .grow b { font-size: 15.5px; font-weight: 650; color: var(--ink); }
  .m-row .grow small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
  .m-row > .icon:last-child { color: var(--muted); width: 18px; height: 18px; }
  .m-theme-seg { margin: 0; }
  .m-theme-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .m-theme-seg .icon { width: 18px; height: 18px; }
  .m-logout, .m-sheet-body > .m-row {
    display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; min-height: 54px; padding: 8px 14px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; text-align: left; text-decoration: none;
  }
  .m-logout.is-danger { border-color: var(--alert); }
  .m-logout.is-danger .m-row-ico { background: rgba(var(--alert-rgb), 0.12); }
  .m-logout.is-danger .m-row-ico .icon { color: var(--alert); }
  .m-logout.is-danger .grow b { color: var(--alert); }
  .m-profile-foot { margin: 16px 0 4px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
}

@media (max-width: 767px) {
  /* Exercises tab: compact assignment rows -- name + Remove on one line, details beneath */
  #assignments-body { margin-top: 14px; }
  #assignments-body .assignment-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 9px 12px; margin-bottom: 8px; border-radius: 12px;
  }
  #assignments-body .a-main { display: contents; }
  #assignments-body .a-name { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.3; }
  #assignments-body .a-meta { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; line-height: 1.35; }
  #assignments-body .a-actions { grid-column: 2; grid-row: 1; align-self: center; gap: 6px; }
  #assignments-body .a-remove, #assignments-body .a-edit {
    min-height: 32px; padding: 4px 10px; font-size: 12.5px; text-decoration: none; border: 1px solid var(--border); border-radius: 8px; background: transparent;
  }
  #assignments-body .a-remove { color: var(--alert); }
  #assign-form .button-row { margin-bottom: 4px; }
}

@media (max-width: 767px) {
  /* ===== clinician dashboard: compact ===== */
  .co-tiles { gap: 6px; margin-bottom: 14px; }
  .co-tile { padding: 9px 10px; gap: 0; border-radius: 12px; }
  .co-tile-ico { display: none; }
  .co-tile strong { font-size: 20px; line-height: 1.1; }
  .co-tile-label { font-size: 12px; margin-top: 1px; }
  .co-tile small { font-size: 11px; line-height: 1.25; }

  .co-section { margin-bottom: 14px; }
  .co-section h2 { font-size: 16px; margin-bottom: 8px; }
  .co-section h2 .co-ico { width: 20px; height: 20px; }

  /* needs attention: name + first two reasons (+N more) */
  .co-attn-list { gap: 6px; }
  .co-attn { padding: 8px 10px; gap: 10px; border-left-width: 4px; border-radius: 12px; }
  .co-attn .co-avatar { width: 32px; height: 32px; font-size: 12px; }
  .co-attn-main { gap: 3px; }
  .co-attn-main strong { font-size: 14.5px; line-height: 1.2; }
  .co-reasons { gap: 4px; }
  .co-reasons i { font-size: 11px; padding: 1px 7px; line-height: 1.5; }
  .co-reasons i:nth-child(n+3):not(.co-more) { display: none; }
  .co-full { display: none; }
  .co-short { display: inline; }
  .co-reasons { flex-wrap: wrap; }
  .co-more { display: inline-block !important; }
  .co-attn .co-go { width: 16px; height: 16px; }
  .co-attn-link { gap: 10px; }
  .co-actions { padding-top: 6px; gap: 6px; }
  .co-act { min-height: 36px; padding: 4px 10px; font-size: 12.5px; gap: 5px; }
  .co-act-ico { width: 15px; height: 15px; }
  .co-contact .co-act { min-width: 38px; justify-content: center; padding: 4px 9px; }
  .co-contact .co-act-label, .co-act-ok .co-lg { display: none; }
  .co-act-ok .co-lbl::first-letter { text-transform: uppercase; }
  .co-snooze-menu { right: 0; }
  .co-notice { font-size: 12.5px; padding: 8px 10px; }

  /* all patients: avatar | name + status chip / week / adherence + last active (children placed straight on the card grid) */
  .co-list { gap: 6px; }
  .co-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 1px; padding: 8px 10px; border-radius: 12px; position: static; }
  .co-row .co-avatar { width: 32px; height: 32px; font-size: 12px; grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .co-row-main { display: contents; }
  .co-row-main strong { grid-column: 2; grid-row: 1; font-size: 14.5px; line-height: 1.25; }
  .co-sub { grid-column: 2 / -1; grid-row: 2; font-size: 12px; line-height: 1.3; }
  .co-meter { grid-column: 2 / -1; grid-row: 3; gap: 8px; margin-top: 2px; }
  .co-meter i { height: 5px; max-width: 90px; }
  .co-meter b { font-size: 11.5px; }
  .co-last-inline { display: inline; margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
  .co-row-side { display: contents; }
  .co-row-side .co-last { display: none; }
  .co-row-side .co-chip { grid-column: 3; grid-row: 1; font-size: 10.5px; padding: 2px 8px; }
  .co-row .co-go { display: none; }
  .co-search { height: 40px; font-size: 15px; }
  .co-section-head { gap: 8px; margin-bottom: 8px; }
}

@media (max-width: 767px) {
  /* ===== Patients tab: even tighter cards ===== */
  #patients-body table.roster tbody { gap: 6px; }
  #patients-body table.roster tr { padding: 7px 30px 7px 12px; gap: 0 8px; border-radius: 12px; }
  #patients-body table.roster td:nth-child(1) .roster-name { font-size: 15px; line-height: 1.3; }
  #patients-body table.roster td:nth-child(1) .roster-sub { font-size: 12px; margin-left: 6px; }
  #patients-body table.roster td:nth-child(4) { font-size: 12px; line-height: 1.3; }
  #patients-body table.roster td .status-badge { padding: 1px 8px; font-size: 10.5px; }
  #patients-body table.roster tr::after { right: 12px; width: 7px; height: 7px; }
  #patients-body table.roster tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  #patients-body table.roster td:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; padding: 0; }
  #patients-body .row-details-btn { min-height: 30px; padding: 3px 11px; font-size: 12px; }
  /* name and "ID · age · gender" stay on one line (the extra text gives way with an ellipsis, the name last) */
  #patients-body table.roster td:nth-child(1) { display: flex; align-items: baseline; min-width: 0; }
  #patients-body table.roster td:nth-child(1) .roster-name { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #patients-body table.roster td:nth-child(1) .roster-sub { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* "Add from your clinic's patient records" box */
  #patients-panel .booking-search { margin: 14px 0 4px; padding: 10px 12px 12px; border-radius: 14px; }
  .booking-search-head { gap: 10px; margin-bottom: 8px; align-items: center; }
  .booking-search-head .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
  .booking-search-head strong { font-size: 14px; line-height: 1.25; }
  .booking-search-head span { font-size: 12px; line-height: 1.3; }
  .booking-search .plan-field { gap: 0; }
  .booking-search .plan-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .booking-search input[type="search"] { height: 42px; font-size: 15px; }
}
@media (max-width: 767px) {
  .booking-search input[type="search"] { padding-left: 12px; padding-right: 12px; text-overflow: ellipsis; }
  .booking-search input[type="search"]::placeholder { font-size: 13.5px; }
}

@media (max-width: 767px) {
  /* the camera card in the session page takes the stream's real shape (a tall phone picture is not squeezed into 3:4) */
  body.m-index:not(.cam-immersive).m-step-session .camera-stack.has-ar { width: min(100%, calc(62dvh * var(--cam-ar))); aspect-ratio: var(--cam-ar); margin-inline: auto; }
}

@media (max-width: 767px) {
  #patients-body table.roster tr.is-opening { opacity: .55; }
}

/* start-up progress / problems repeated on the Watch step, and a plain "nothing was counted" Done screen */
.m-startnote { display: none; }
@media (max-width: 767px) {
  body.m-index.m-step-watch .m-startnote:not([hidden]) {
    display: block; margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; text-align: left;
    background: var(--pr-tint); border: 1px solid var(--accent); color: var(--ink);
  }
  .m-startnote strong { display: block; font-size: 15px; margin-bottom: 2px; }
  .m-startnote p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
  body.m-index.m-step-watch .m-startnote.is-error:not([hidden]) { background: rgba(var(--alert-rgb), 0.12); border-color: rgb(var(--alert-rgb)); }
  .m-startnote.is-error strong { color: rgb(var(--alert-rgb)); }
  .m-done-head.is-warn .m-success { background: rgba(var(--warn-rgb), 0.16); color: rgb(var(--warn-rgb)); }
  .m-done-actions [hidden] { display: none !important; }
}

@media (max-width: 767px) {
  body.m-index.m-step-done .summary-panel > .next-up:not([hidden]) { order: 1; margin: 0 0 16px; text-align: left; }
  body.m-index.m-step-done .summary-panel > .feel-slot:not([hidden]) { order: 1; margin: 0 0 4px; }
  .feel-pain { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feel-opt { min-height: 48px; }
  body.m-index.m-step-done .next-up .next-go { align-self: stretch; justify-content: center; min-height: 52px; }
  body.m-index.m-step-done .next-up .next-skip { align-self: center; }
}

@media (max-width: 767px) {
  .m-rep-slot .rep-overlay:has(.angle-chip[hidden]) { grid-template-columns: 1fr; }
}

/* phone: Home and Patients are the only two places, so the old Patients | Plans switcher is gone (it stays in the page only so the
   code that opens a patient's plan can still use it) */
@media (max-width: 767px) {
  body.m-plan .m-tabs:not(.m-dtabs) { display: none !important; }
  .m-danger-zone .m-new-plan { width: 100%; margin-bottom: 10px; }
}

@media (max-width: 767px) {
  body.m-index.m-step-watch #voice-lang-note:not([hidden]) { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(var(--warn-rgb), 0.14); color: var(--ink); }
}