/* MDBI exercise portal styles. No animations or transitions on purpose: many patients are dizzy. */

/* ==========================================================================
   COLORS: every color in the site lives here.
   Brand values are sampled from the MDBI logo files and dizzybalance.com.
   Contrast ratios are against white unless noted.
   ========================================================================== */
:root {
  /* Brand */
  --navy: #1d3261;             /* logo navy: sidebar, headings, slip header (12.5:1) */
  --navy-band: #1e3361;        /* the website's header band: header, sign-in hero, footer (white text 12.3:1) */
  --navy-tint: #e6eaf2;        /* pale navy wash: avatars, number circles */
  --teal: #467984;             /* logo teal: primary buttons, play circles (white text 4.85:1) */
  --teal-dark: #3a6670;        /* teal for links, small text and hover (6.3:1; 5.4:1 on --teal-tint) */
  --teal-tint: #e3eef0;        /* pale teal: info badges, icon tiles */
  --teal-wash: #f1f7f8;        /* palest teal: callouts, tile hover */
  --periwinkle: #96a4c1;       /* logo periwinkle: secondary text and rules on navy (5:1 on navy) */
  --periwinkle-light: #dde3ef; /* current-page pill on navy (navy text 9.7:1) */

  /* Neutrals */
  --page: #f4f6fa;             /* page background */
  --surface: #ffffff;          /* cards */
  --surface-alt: #f7f8fb;      /* table headers, row hover */
  --text: #18233a;             /* body text (14.5:1 on --page) */
  --text-muted: #4b5568;       /* secondary text (6.9:1 on --page) */
  --line: #dce1ea;             /* dividers, card borders */
  --line-strong: #6b7587;      /* form field borders (4.6:1) */
  --neutral-tint: #eceff4;     /* gray badges, empty progress */
  --placeholder: #626c7c;      /* input placeholder text (5.3:1) */
  --on-dark: #ffffff;          /* text on navy and teal */
  --on-dark-muted: #c9d1e3;    /* secondary text on navy (8:1 on --navy-band) */
  --on-dark-line: rgba(255, 255, 255, 0.26);
  --on-dark-fill: rgba(255, 255, 255, 0.12);
  --video-bg: #0f1a33;         /* behind the video player */
  --tag-hover: #d5dcea;        /* group tag hover */

  /* Status */
  --ok: #1d6b43;               /* 6.5:1; 5.6:1 on --ok-tint */
  --ok-tint: #e2f2e8;
  --ok-line: #6aa884;          /* border of exercise tiles that are done */
  --warn: #8a4a00;
  --warn-tint: #fcefd9;
  --danger: #b3261e;
  --danger-tint: #fdeceb;
  --danger-line: #f0c9c6;

  /* Focus ring: amber, so it shows on teal buttons too. Swapped inside navy areas. */
  --focus: #b45309;
  --focus-on-dark: #fcd34d;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(29, 50, 97, 0.06);
  --shadow: 0 1px 2px rgba(29, 50, 97, 0.06), 0 6px 20px -10px rgba(29, 50, 97, 0.2);
  --shadow-lg: 0 24px 60px -24px rgba(10, 20, 45, 0.5);

  /* Libertinus Sans stands in for the website's Optima-style headings. Public Sans and Spline Sans Mono
     (usernames and codes) both have a plain zero; the mono also tells I, l and 1 apart. */
  --font-head: 'Libertinus Sans', Optima, Candara, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', var(--font-body);
  --radius: 14px;
  --radius-sm: 8px;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/public-sans-latin-wght.woff2) format('woff2');
}
/* Regular weight: the sign-in headline and the patient nav. Preloaded; if it is still not here at first paint
   the fallback stays for that page view rather than swapping in and moving the sign-in card. */
@font-face {
  font-family: 'Libertinus Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(fonts/libertinus-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spline-sans-mono-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/spline-sans-mono-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Libertinus Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libertinus-sans-latin-700-normal.woff2) format('woff2');
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block: 24px; }
html.ui-patient { font-size: 125%; } /* 20px on patient pages and sign-in */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body); color: var(--text); background: var(--page); line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--navy); line-height: 1.2; text-wrap: balance; }
h1 { font-size: 2rem; margin: 0 0 0.5em; }
h2 { font-size: 1.45rem; margin: 0 0 0.6em; }
h3 { font-size: 1.15rem; margin: 0 0 0.3em; }
p { margin: 0 0 1em; }
a { color: var(--teal-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--navy); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top, .welcome, .sidebar, .slip-head, .layout-public .site-footer, .layout-patient .site-footer, .skip { --focus: var(--focus-on-dark); }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon .solid { fill: currentColor; stroke: none; }

.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-weight: 500; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-wrap; }
.inline { display: inline; margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Moved off screen by its own height, so it stays hidden however large the text is */
.skip { position: absolute; left: 12px; top: 12px; z-index: 10; padding: 12px 18px; background: var(--surface); color: var(--navy); font-weight: 700; border-radius: var(--radius-sm); box-shadow: var(--shadow); transform: translateY(calc(-100% - 48px)); }
.skip:focus { transform: none; }

main { flex: 1 0 auto; overflow-wrap: break-word; } /* long words and web addresses that staff type wrap instead of widening the page */
.container { max-width: 1060px; margin: 0 auto; padding: 36px 24px 64px; }
.layout-patient .container { max-width: 1060px; }
.layout-patient .container > * { max-width: 832px; margin-inline: auto; } /* a readable column, centred under the header */
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.stack { display: flex; flex-direction: column; gap: 18px; }

/* ---------- Buttons ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.6em 1.25em;
  font: inherit; font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
  color: var(--navy); background: var(--surface); border: 2px solid var(--navy); border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { color: var(--navy); background: var(--navy-tint); }
button .icon, .button .icon { width: 1.35em; height: 1.35em; }
button.primary, .button.primary { color: var(--on-dark); background: var(--teal); border-color: var(--teal); }
button.primary:hover, .button.primary:hover { color: var(--on-dark); background: var(--teal-dark); border-color: var(--teal-dark); }
button.danger, .button.danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
button.danger:hover { color: var(--danger); background: var(--danger-tint); }
button.big { width: 100%; min-height: 56px; font-size: 0.95rem; }
.ui-patient .button, .ui-patient .empty button { font-size: 0.9rem; } /* 18px: nothing on patient pages is smaller */
/* Phone-number buttons read like the footer's call link, not tracked capitals */
.button.tel, .ui-patient .button.tel { font-family: var(--font-body); font-size: 1rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.button.tel > span { min-width: 0; text-align: center; }
.tel-num { display: inline-block; } /* the number moves to its own line before it breaks, and then only at the space or the dash */
button.small, .button.small { min-height: 44px; padding: 0.4em 0.9em; font-size: 0.78rem; border-width: 1.5px; }
.button.quiet, button.quiet { border-color: transparent; background: transparent; }
.button.quiet:hover, button.quiet:hover { background: var(--navy-tint); }
.icon-button { width: 44px; min-height: 44px; padding: 0; border-width: 1.5px; }
.icon-spacer { display: inline-block; width: 44px; height: 44px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- Forms ---------- */
label, .field { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: 0.9rem; color: var(--text); }
label.check { flex-direction: row; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; font-size: 1rem; cursor: pointer; }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 0.55em 0.8em;
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:hover, select:hover, textarea:hover { border-color: var(--navy); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--navy); outline: 3px solid var(--focus); outline-offset: 1px; }
input.mono { font-weight: 500; }
input[type='checkbox'] { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--teal); }
input[type='file'] { padding: 6px; font-size: 0.85rem; }
input[type='file']::file-selector-button {
  min-height: 44px; margin-right: 10px; padding: 0.4em 0.8em;
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy); background: var(--surface); border: 1.5px solid var(--navy); border-radius: 6px; cursor: pointer;
}
input[type='file']::file-selector-button:hover { background: var(--navy-tint); }
.field:has(> input[type='file']) { container-type: inline-size; }
@container (max-width: 14em) {
  input[type='file'] { color: transparent; } /* large text: only the button shows; the chosen name appears under it */
}
textarea { min-height: 96px; resize: vertical; }
textarea.short { min-height: 48px; }
select { appearance: none; padding-right: 2.6em; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-repeat: no-repeat; background-position: right 1.25em center, right 0.9em center; background-size: 0.36em 0.36em, 0.36em 0.36em; }
.hint { margin: 0; font-size: 0.9rem; font-weight: 400; line-height: 1.4; color: var(--text-muted); }
.hint.error { font-weight: 600; color: var(--danger); }
#upload-progress { width: 100%; height: 10px; margin-top: 8px; }

.alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 14px 16px 14px 16px; border-left: 4px solid; border-radius: 10px; font-weight: 600; }
.alert .icon { margin-top: 0.1em; }
.alert.error { color: var(--danger); background: var(--danger-tint); }
.alert[tabindex='-1']:focus { outline: none; } /* focused on load so it is read out and scrolled to; it is not a control */
.alert.success { color: var(--ok); background: var(--ok-tint); }
.callout { display: flex; gap: 12px; padding: 14px 16px; background: var(--teal-wash); border: 1px solid var(--teal-tint); border-radius: 12px; font-weight: 400; font-size: 0.9rem; }
.callout .icon { color: var(--teal-dark); margin-top: 0.15em; }
.callout p { margin: 0; }

/* ---------- Cards, badges, empty states ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 0 0 24px; }
.card-head { margin: 0 0 18px; }
.card-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 0; }
.card-head h2 .icon { color: var(--teal-dark); }
.card-sub { margin: 4px 0 0; font-size: 0.9rem; color: var(--text-muted); text-wrap: pretty; }

.badge { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.4em 0.75em; font-size: 0.78rem; font-weight: 700; line-height: 1.1; white-space: nowrap; border-radius: 999px; color: var(--text-muted); background: var(--neutral-tint); vertical-align: middle; }
.badge.ok, .badge.warn, .badge.neutral { padding-left: 0.65em; }
.badge.ok::before, .badge.warn::before, .badge.neutral::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--ok); background: var(--ok-tint); }
.badge.warn { color: var(--warn); background: var(--warn-tint); }
.badge.info { color: var(--teal-dark); background: var(--teal-tint); }
.badge.navy { color: var(--navy); background: var(--navy-tint); }
.tag { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; margin: 0 6px 6px 0; font-weight: 600; font-size: 0.85rem; color: var(--navy); background: var(--navy-tint); border-radius: 999px; text-decoration: none; }
.tag:hover { color: var(--navy); background: var(--tag-hover); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; }
.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; color: var(--teal-dark); background: var(--teal-tint); }
.empty-icon .icon { width: 30px; height: 30px; }
.empty-title { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.empty-text { margin: 0 0 18px; max-width: 42ch; color: var(--text-muted); text-wrap: pretty; }
.empty .button { max-width: 100%; justify-content: safe center; } /* very large text wraps inside the button instead of spilling out of it */
.empty .button.tel { flex-wrap: wrap; padding-inline: min(1.25em, 20px); } /* with large text the icon moves above the label, so the number keeps the width */

.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); background: var(--navy-tint); }
.avatar.small { width: 38px; height: 38px; }
.avatar.large { width: 76px; height: 76px; font-family: var(--font-head); font-size: 1.5rem; color: var(--on-dark); background: var(--navy); }
.feature-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; color: var(--teal-dark); background: var(--teal-tint); }
.feature-icon .icon { width: 24px; height: 24px; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 18px; min-width: 0; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.brand:hover { color: var(--on-dark); }
.brand-wordmark { display: block; width: auto; height: 58px; }
.brand-sub { padding: 6px 0 6px 18px; border-left: 1px solid var(--on-dark-line); font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; color: var(--periwinkle); }

/* ---------- Sign-in and patient chrome: a solid navy band, like the website ---------- */
.top { color: var(--on-dark); background: var(--navy-band); }
.top-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 1280px; margin: 0 auto; padding: 14px 24px; }
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.nav-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; font-family: var(--font-head); font-size: 0.9rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark); text-decoration: none; border-radius: 999px; }
.nav-link:hover { color: var(--on-dark); background: var(--on-dark-fill); }
/* The current page is underlined, like a plain website nav, rather than filled */
.nav-link.current { text-decoration: underline 3px var(--periwinkle); text-underline-offset: 10px; }
.topnav .signout { display: flex; align-items: center; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--on-dark-line); }
/* Sign out looks the same in the patient header and the staff top bar */
.nav-quiet { min-height: 44px; padding: 0 10px; gap: 8px; font-size: 0.9rem; font-weight: 400; letter-spacing: 0.04em; color: var(--on-dark); background: transparent; border: 0; border-radius: 999px; }
.nav-quiet:hover { color: var(--on-dark); background: var(--on-dark-fill); }
.nav-quiet .icon { width: 1.2em; height: 1.2em; }

/* Patient home */
.page-intro { margin: 0 0 30px; }
.page-intro h1 { margin: 0 0 6px; }
.lede { margin: 0; max-width: 46ch; color: var(--text-muted); text-wrap: pretty; }

.group { margin: 0 0 44px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.group-head h2 { min-width: 0; margin: 0; font-size: 1.6rem; overflow-wrap: anywhere; }
.count { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.group-desc { margin: 4px 0 0; max-width: 60ch; color: var(--text-muted); white-space: pre-line; text-wrap: pretty; }
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.tile { display: flex; align-items: center; gap: 22px; min-height: 112px; padding: 18px 22px; color: var(--text); text-decoration: none; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.tile:hover { color: var(--text); border-color: var(--teal); background: var(--teal-wash); }
.tile.done { border-color: var(--ok-line); }
.tile-play { display: grid; place-items: center; flex-shrink: 0; width: 68px; height: 68px; border-radius: 50%; color: var(--on-dark); background: var(--teal); }
.tile:hover .tile-play { background: var(--teal-dark); }
.tile-play .icon { width: 32px; height: 32px; margin-left: 4px; }
.tile-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 0; }
.tile-title { max-width: 100%; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--navy); overflow-wrap: anywhere; }
.tile-meta { font-size: 0.9rem; color: var(--text-muted); }
.tile-note { font-size: 0.9rem; font-style: italic; color: var(--text); overflow-wrap: anywhere; } /* the clinic's note for this patient, e.g. "3 times a day" */
.tile-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.9rem; font-weight: 700; color: var(--ok); }
.tile-status.today { padding: 4px 16px 4px 4px; border-radius: 999px; background: var(--ok-tint); }
.tile-status .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; stroke-width: 3; color: var(--ok); background: var(--ok-tint); }
.tile-status.today .icon { color: var(--on-dark); background: var(--ok); }
.tile-go { display: grid; color: var(--text-muted); }
.tile-go .icon { width: 28px; height: 28px; }

/* Video page */
.crumb { margin: 0 0 14px; }
.back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px 8px 16px; font-weight: 650; color: var(--navy); text-decoration: none; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); }
.back:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-tint); }
.layout-staff .back { min-height: 44px; font-size: 0.9rem; }
.video-title { margin: 0 0 16px; }
.player-frame { overflow: hidden; margin: 0 0 16px; background: var(--video-bg); border-radius: var(--radius); box-shadow: var(--shadow); }
.layout-patient .player-frame { max-width: calc(var(--player-cap) * 16 / 9); margin-inline: auto; } /* hugs the picture when the height cap applies */
.player-frame:has(.player:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.player { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: var(--player-cap); background: var(--video-bg); }
body { --player-cap: 72vh; }
.player:focus-visible { outline: 0; }
@supports not selector(:has(*)) { .player:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } }
.watch-hint { margin: 0 0 28px; color: var(--text-muted); }
.status-region:has(.alert:not([hidden])) + .watch-hint { display: none; }
#status { margin: 0 0 28px; font-size: 1.05rem; }
.instructions { margin: 0 0 16px; padding: 14px 20px 16px 21px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.instructions h2 { margin: 0 0 2px; font-size: 1.15rem; }
.instructions p { margin: 0; }
.instructions p + p { margin-top: 6px; }
.safety { font-weight: 600; }
.clinic-note { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--teal-wash); }
.safety a { position: relative; display: inline-block; padding-block: 7px; margin-block: -7px; } /* a 45px tap target that keeps the number on one line and leaves the line spacing alone */
.safety .call { display: inline-block; } /* "Call" stays with the number */
.back-bottom { margin: 0; }

/* ---------- Sign-in page ---------- */
/* The hero continues the header band. A regular weight thickened a touch, tightly set, like the website's headline. */
.welcome { color: var(--on-dark); background: var(--navy-band); }
.welcome-inner { display: flex; flex-direction: column; align-items: center; max-width: 960px; margin: 0 auto; padding: 28px 24px 92px; text-align: center; }
.welcome-mark { display: block; width: 76px; height: auto; margin: 0 0 14px; }
.welcome h1 { margin: 0 0 14px; font-size: 2.3rem; font-weight: 400; letter-spacing: 0; line-height: 1.15; color: var(--on-dark); -webkit-text-stroke: 0.018em currentColor; }
.tagline { margin: 0; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.6; text-transform: uppercase; text-wrap: balance; color: var(--on-dark); }
.welcome + .container { padding-top: 0; } /* the sign-in card overlaps the hero */
.layout-public .container > .problem { max-width: 832px; margin-inline: auto; } /* error pages: the same column as on patient pages */
.signin { position: relative; max-width: 560px; margin: -68px auto 56px; padding: 28px 32px 24px; border: 0; box-shadow: var(--shadow-lg); }
.signin h2 { margin: 0 0 14px; font-size: 1.6rem; }
.signin .stack { gap: 16px; }
.signin .field { font-size: 1rem; }
.forgot { display: flex; gap: 10px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--text-muted); }
.forgot .icon { margin-top: 0.15em; color: var(--teal-dark); }
.forgot span { text-wrap: balance; }
.forgot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.how > h2 { text-align: center; font-size: 1.6rem; margin-bottom: 26px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.steps h3 { font-size: 1.25rem; }
.steps p { margin: 0; color: var(--text-muted); }
.step-num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--on-dark); background: var(--teal); }

/* ---------- Footer ---------- */
.site-footer { flex-shrink: 0; color: var(--on-dark-muted); background: var(--navy-band); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; justify-content: space-between; gap: 16px 32px; max-width: 1280px; margin: 0 auto; padding: 34px 24px 30px; }
.footer-lead { margin: 0 0 14px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--on-dark); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.chip-link { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 48px; padding: 8px 18px; font-weight: 600; color: var(--on-dark); text-decoration: none; border: 1.5px solid var(--on-dark-line); border-radius: 999px; }
.chip-link span { min-width: 0; overflow-wrap: anywhere; } /* breaks before the @ first (a <wbr>), and only elsewhere when text is enlarged */
.footer-help { max-width: 100%; }
.chip-link:hover { color: var(--on-dark); background: var(--on-dark-fill); }
.chip-link .icon { color: var(--periwinkle); }
.footer-copy { margin: 0; font-size: 0.9rem; }

/* ---------- Staff app shell: navy sidebar matching the patient header ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); flex: 1 0 auto; }
.sidebar { color: var(--on-dark); background: var(--navy); }
.sidebar-inner { position: sticky; top: 0; display: flex; flex-direction: column; gap: 22px; height: 100vh; overflow-y: auto; padding: 24px 16px 18px; }
.sidebar .brand { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 14px 20px; border-bottom: 1px solid var(--on-dark-line); }
.sidebar .brand-sub { padding: 0; border: 0; font-size: 0.72rem; }
.sidenav { display: flex; flex-direction: column; gap: 4px; }
.sidenav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); text-decoration: none; border-radius: 10px; }
.sidenav a .icon { width: 22px; height: 22px; color: var(--periwinkle); }
.sidenav a:hover { color: var(--on-dark); background: var(--on-dark-fill); }
.sidenav a.current { color: var(--navy); background: var(--periwinkle-light); }
.sidenav a.current .icon { color: var(--teal-dark); }
.whoami { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; margin-top: auto; padding: 16px 0 0; border-top: 1px solid var(--on-dark-line); }
.whoami .avatar { margin-left: 14px; color: var(--navy); background: var(--periwinkle-light); }
.whoami-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.whoami-name { font-weight: 700; overflow-wrap: anywhere; }
.whoami-role { font-size: 0.8rem; color: var(--on-dark-muted); }
.whoami .signout { grid-column: 1 / -1; }
.signout-button { width: 100%; min-height: 44px; justify-content: flex-start; padding: 0.4em 12.5px; font-size: 0.78rem; color: var(--on-dark); background: transparent; border: 1.5px solid var(--on-dark-line); }
.signout-button:hover { color: var(--on-dark); background: var(--on-dark-fill); }
.workspace { display: flex; flex-direction: column; min-width: 0; }
.layout-staff .container { width: 100%; max-width: 1180px; margin: 0; padding: 36px 40px 56px; }
.layout-staff h1 { font-size: 2rem; }
.layout-staff .narrow { margin-left: 0; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 0 0 24px; }
.page-head h1 { margin: 0; }
.page-title { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.page-sub { margin: 6px 0 0; color: var(--text-muted); white-space: pre-line; text-wrap: pretty; }
.page-title .page-sub { max-width: 64ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--teal-dark); background: var(--teal-tint); }
.stat-icon .icon { width: 24px; height: 24px; }
.stat-num { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; line-height: 1.1; color: var(--navy); }
.stat-label { font-size: 0.85rem; line-height: 1.35; color: var(--text-muted); }

.table-card { padding: 0; overflow: hidden; }
.card:has(> table.data) { position: relative; overflow-x: auto; } /* only ever scrolls when text is enlarged a lot */
.table-card > .card-head { padding: 22px 24px 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1 1 260px; }
.search .icon { position: absolute; left: 14px; top: 50%; margin-top: -0.6em; width: 1.2em; height: 1.2em; color: var(--text-muted); }
.search input { padding-left: 2.6em; }
.search-button .icon { display: none; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.card:not(.table-card) > table.data { width: calc(100% + 48px); margin: 0 -24px; }
.data th { padding: 12px 16px; text-align: left; font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.table-card > table.data:first-child th, .toolbar + table.data th { border-top: 0; }
.data td { padding: 14px 16px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.data th:first-child, .data td:first-child { padding-left: 24px; }
.data th:last-child, .data td:last-child { padding-right: 24px; }
.data tbody tr:last-child td { border-bottom: 0; }
.data tbody tr:hover { background: var(--surface-alt); }
.data td.actions { text-align: right; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.row-actions form { display: flex; }
.row-actions > * + * { padding-left: 20px; border-left: 1px solid var(--line); }
.data .sub { display: block; font-size: 0.8rem; color: var(--text-muted); }
tr.inactive td, tr.inactive .person-name { color: var(--text-muted); }
tr.inactive .avatar { color: var(--text-muted); background: var(--neutral-tint); }

/* Watch history and the video library: titles get the room. Dates break between date and time if they must. */
.history td:first-child { min-width: min(14em, 25vw); }
.library td:not(:first-child), .library th:not(:first-child) { width: 1%; white-space: nowrap; }

.person { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--text); }
.person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.person-name { font-weight: 650; color: var(--navy); }
a.person:hover .person-name { text-decoration: underline; }
.person-note { font-size: 0.8rem; color: var(--text-muted); }
.media-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 650; color: var(--navy); text-decoration: none; }
.media-link:hover { color: var(--navy); text-decoration: underline; }
.media-link span { min-width: 0; overflow-wrap: anywhere; }
.media-link .glyph { width: 24px; height: 24px; stroke-width: 1.6; color: var(--teal-dark); }
.watched { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.watched > span { white-space: nowrap; }
.watched progress { align-self: center; }
.watched .sub { display: block; font-size: 0.8rem; color: var(--text-muted); white-space: normal; }
/* Which parts of a video were seen: teal stretches on a gray track, drawn as SVG so no inline styles are needed */
.seen-bar { align-self: center; width: 90px; height: 8px; border-radius: 999px; overflow: hidden; }
.seen-track { fill: var(--neutral-tint); }
.seen-part { fill: var(--teal); }
.finished .sub { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.finished { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ok); font-weight: 700; }
.finished .icon { align-self: center; stroke-width: 3; }
progress { appearance: none; width: 60px; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--neutral-tint); color: var(--teal); }
progress::-webkit-progress-bar { background: var(--neutral-tint); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--teal); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--teal); border-radius: 999px; }

.profile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.profile-main { flex: 1 1 18rem; min-width: 0; }
.profile h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 4px; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--text-muted); }
.profile-meta .mono { color: var(--text); overflow-wrap: anywhere; }
.profile-stats { display: flex; margin: 0; padding: 0; list-style: none; }
.profile-stats li { display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 22px; }
.profile-stats li + li { border-left: 1px solid var(--line); }
.profile-stats li:first-child { padding-left: 0; }
.profile-stats .stat-num { font-size: 1.5rem; }
.profile-stats .stat-num.date { font-size: 1.15rem; line-height: 1.55; }
.profile-stats .stat-label { white-space: nowrap; }

.assign { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.card:not(.table-card) > table.data + .assign { margin-top: 0; }
.assign label { font-size: 0.9rem; }
.assign-row { display: flex; flex-wrap: wrap; gap: 10px; }
.assign-row select { flex: 1 1 220px; width: auto; min-width: 0; max-width: 100%; }

/* Patient exercises board: Assigned | Videos | Groups. Items drag between columns (assign.js) or use their buttons.
   Columns stack below 1180px: Assigned on top, the other two side by side, then one column on phones. */
.assign-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.assign-col { min-width: 0; padding: 14px; border: 2px dashed transparent; border-radius: var(--radius-sm); background: var(--surface-alt); }
.assign-col[data-zone="assigned"] { background: var(--teal-wash); border-color: var(--line); }
.assign-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; color: var(--navy); }
.assign-col h3 .count { padding: 0.25em 0.6em; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--text-muted); background: var(--neutral-tint); border-radius: 999px; }
.assign-board.adding [data-zone="assigned"], .assign-board.removing [data-zone]:not([data-zone="assigned"]) { border-color: var(--teal); }
.assign-col.over { border-style: solid; border-color: var(--teal-dark); background: var(--teal-tint); }
.pick-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pick { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: grab; }
.pick.dragging, .pick.saving { opacity: 0.5; }
.pick.ended .pick-name { color: var(--text-muted); }
.pick-main { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 150px; min-width: 0; }
.pick-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--teal-dark); background: var(--teal-tint); border-radius: 50%; }
.pick-icon .icon { width: 17px; height: 17px; }
.pick-name { font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.pick-main > .pick-name, .pick-group summary { padding-top: 4px; }
.pick-group { flex: 1; min-width: 0; }
.pick-group summary { cursor: pointer; }
.pick-group summary .sub, .pick-meta .sub { font-size: 0.82rem; color: var(--text-muted); }
.pick-videos { margin: 8px 0 2px; padding-left: 1.4em; font-size: 0.85rem; color: var(--text-muted); }
.pick-videos li + li { margin-top: 2px; }
p.pick-videos { padding-left: 0; }
.pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex-basis: 100%; }
.pick > form { margin-left: auto; }
.pick .row-actions { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.pick .row-actions > * + * { padding-left: 0; border-left: 0; }
.drop-hint { margin: 0; padding: 20px 8px; text-align: center; font-size: 0.9rem; color: var(--text-muted); }
/* Inside an assigned item: progress, the patient's note, and (in groups) a list of videos with on/off switches */
.pick-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; padding-top: 4px; }
.progress { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.progress.done { color: var(--ok); }
.progress .icon { width: 1.1em; height: 1.1em; stroke-width: 3; }
.note-edit { width: 100%; font-size: 0.85rem; }
.note-edit summary { min-height: 32px; padding: 6px 0; color: var(--teal-dark); font-weight: 600; cursor: pointer; }
.note-edit .note-text { font-weight: 500; font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.note-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.note-form label { width: 100%; font-size: 0.85rem; }
.note-form textarea { width: 100%; min-height: 0; }
.sub-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; padding: 0; list-style: none; }
.sub-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: var(--surface-alt); border-radius: var(--radius-sm); }
.sub-item.pick-sub { cursor: grab; }
.sub-item.off .sub-title { color: var(--text-muted); text-decoration: line-through; }
.sub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; width: 100%; }
.sub-title { flex: 1 1 120px; min-width: 0; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.sub-off { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.pick .move { display: flex; gap: 6px; }
button.icon-only { min-width: 44px; padding-inline: 0; justify-content: center; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { color: inherit; background: var(--surface); }
.pick.drop-before { box-shadow: 0 -4px 0 var(--teal-dark); }
.pick.drop-after { box-shadow: 0 4px 0 var(--teal-dark); }

/* On/off switch: a real button with role="switch"; the track shows the state, the label says it in words */
button.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: 0.78rem; border: 0; background: none; }
button.switch:hover { background: none; }
.switch-track { position: relative; display: block; width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); }
.switch[aria-checked="true"] .switch-track { background: var(--teal); }
.switch[aria-checked="true"] .switch-thumb { left: 19px; }
.switch-label { min-width: 2em; text-align: left; color: var(--text-muted); }
.switch[aria-checked="true"] .switch-label { color: var(--teal-dark); }
@media (max-width: 1180px) {
  .assign-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assign-col[data-zone="assigned"] { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .assign-board { grid-template-columns: minmax(0, 1fr); }
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 18px; align-items: end; }
/* Large text: two fields to a row, then one */
.card:has(> .form-row) { container-type: inline-size; }
@container (max-width: 36em) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row > .form-actions { grid-column: 1 / -1; }
}
@container (max-width: 24em) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
}
.settings { margin-top: 24px; border-top: 1px solid var(--line); }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.setting > div { flex: 1 1 16em; min-width: 0; overflow-wrap: break-word; }
.setting:last-child { padding-bottom: 0; border-bottom: 0; }
.setting h3 { margin: 0 0 2px; font-size: 1.1rem; }
.setting p { margin: 0; font-size: 0.9rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
.in-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.in-groups .muted { margin-right: 4px; }

.group-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.group-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 88px; padding: 18px 20px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.group-card:hover { color: var(--text); border-color: var(--teal); }
.group-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 6.5em; max-width: 100%; overflow-wrap: break-word; } /* with large text the count and arrow move under it rather than squeeze it */
.group-card-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.group-card-desc { font-size: 0.9rem; color: var(--text-muted); white-space: pre-line; text-wrap: pretty; overflow-wrap: anywhere; } /* a pasted link can't widen the card */
.chevron { display: grid; margin-left: auto; color: var(--text-muted); }
.chevron .icon { width: 22px; height: 22px; }

.ordered { margin: 0; padding: 0; list-style: none; }
.ordered li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ordered li:first-child { padding-top: 0; }
.ordered li:last-child { padding-bottom: 0; border-bottom: 0; }
.order-num { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; font-size: 0.85rem; font-weight: 700; color: var(--navy); background: var(--navy-tint); }
.order-title { flex: 1 1 0; min-width: min(12em, 100%); font-weight: 600; overflow-wrap: anywhere; }
.order-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.order-actions .move { display: flex; gap: 8px; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone h2 { color: var(--danger); }

/* Credentials: a slip staff can print and hand to the patient */
.credentials { max-width: 760px; }
.credentials-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.credentials-head > div { min-width: 0; }
.credentials-head h1 { margin: 0 0 4px; font-size: 1.8rem; }
.credentials-head p { margin: 0; }
.slip { margin: 0 0 16px; overflow: hidden; background: var(--surface); border: 2px solid var(--navy); border-radius: var(--radius); }
.slip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 22px; color: var(--on-dark); background: var(--navy); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.slip-head img { display: block; width: auto; height: 44px; }
.slip-label { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--periwinkle-light); }
.slip dl { margin: 0; }
.slip-row { padding: 14px 22px; border-bottom: 1px solid var(--line); }
.slip dt { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.slip dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
/* Sized so a 16-character password fits on one line from 360px up; it only breaks on narrower screens */
.slip dd.mono { font-size: clamp(1.15rem, 6vw, 2.1rem); font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; color: var(--navy); word-break: break-all; text-wrap: balance; } /* a value too long for one line splits in two even halves, never leaving one letter alone */
.slip-help { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 22px; color: var(--text); background: var(--surface-alt); }
.slip-help > span { min-width: 0; }
.slip-help .icon { color: var(--teal-dark); }
.print-tip { display: flex; gap: 10px; margin: 0 0 22px; font-size: 0.9rem; color: var(--text-muted); }
.print-tip .icon { margin-top: 0.15em; color: var(--teal-dark); }

/* Staff footer: one compact line */
.layout-staff .site-footer { color: var(--text-muted); background: transparent; border-top: 1px solid var(--line); }
.layout-staff .footer-inner { max-width: 1180px; margin: 0; padding: 10px 40px; align-items: center; gap: 0 24px; }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; font-size: 0.9rem; }
.footer-line a { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.footer-line .dot { color: var(--text-muted); }
.footer-line .nowrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; } /* breaks before the number only when text is enlarged */
.layout-staff .footer-copy { font-size: 0.8rem; }

/* ---------- Wider screens ---------- */
@media (min-width: 1181px) {
  .split { grid-template-columns: minmax(0, 1fr) 340px; }
  .split.wide-main { grid-template-columns: minmax(0, 1fr) 380px; }
  .split.slim-aside { grid-template-columns: minmax(0, 1fr) 310px; }
}

/* Tablets: the staff video page keeps the whole player, controls included, on screen */
@media (min-width: 761px) {
  .layout-staff { --player-cap: max(280px, min(72vh, 100vh - 440px)); }
}

/* Laptops, desktops, landscape tablets and landscape phones: the instructions sit beside the player, so the whole
   player is on the first screen however long they are. In shorter windows the header, the title and the spacing
   shrink smoothly, so the player never gets smaller as the window gets taller. */
@media (min-width: 1000px) and (orientation: landscape), (min-width: 761px) and (max-width: 999px) and (min-aspect-ratio: 5/4), (min-width: 560px) and (max-height: 600px) {
  .layout-patient {
    --watch-pad: clamp(12px, 12px + (100vh - 600px) * 0.12, 36px);
    --title-size: clamp(1.25rem, 1.25rem + (100vh - 600px) * 0.075, 2rem);
    --title-gap: clamp(10px, 10px + (100vh - 600px) * 0.03, 16px);
    --top-h: calc(2 * clamp(6px, 6px + (100vh - 600px) * 0.08, 14px) + clamp(48px, 44px + (100vh - 600px) * 0.14, 58px)); /* the header, as sized below */
    --player-cap: max(120px, min(72vh, 100vh - var(--top-h) - var(--watch-pad) - 2.4 * var(--title-size) - var(--title-gap) - 16px)); /* room for a two-line title */
  }
  .layout-patient .container:has(> .watch) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--player-cap) * 16 / 9, (100% - 24px) * 2 / 3)); column-gap: 24px; align-items: start; padding-top: var(--watch-pad); }
  .layout-patient .container:has(> .watch) > * { grid-column: 1 / -1; max-width: none; margin-inline: 0; }
  .layout-patient .container:has(> .watch) > .crumb { display: none; } /* the header and the button under the player both go back */
  .layout-patient .container > .instructions { grid-column: 1; margin-bottom: 28px; }
  .layout-patient .container > .watch { grid-column: 2; }
  .layout-patient .video-title { margin-bottom: var(--title-gap); font-size: var(--title-size); }
}
@media (min-width: 761px) and (max-width: 999px) and (min-aspect-ratio: 5/4), (min-width: 560px) and (max-width: 999px) and (max-height: 600px) {
  .layout-patient .instructions { padding-left: 17px; padding-right: 16px; } /* a narrow column: "Call (314) 384-8088" fits on one line */
}
/* Laptops and desktops: the video page uses the header's full width, and the player takes the width first. The
   instructions stop at a reading width and any width left over becomes margin. */
@media (min-width: 1000px) and (orientation: landscape) {
  .layout-patient .container:has(> .watch) { max-width: 1280px; grid-template-columns: minmax(0, 26em) min(var(--player-cap) * 16 / 9, (100% - 24px) * 0.72, max(100% - 24px - 16em, (100% - 24px) / 2)); justify-content: center; }
}
@media (min-width: 1000px) and (orientation: landscape) and (min-height: 1120px) {
  .layout-patient .container:has(> .watch) > .crumb { display: block; } /* tall screens have room for it */
}
/* ---------- Laptops, tablets and phones: the sidebar becomes a top bar ---------- */
@media (max-width: 1180px) {
  .shell { display: flex; flex-direction: column; }
  .workspace { flex: 1 0 auto; }
  .sidebar-inner { position: static; flex-flow: row wrap; align-items: center; gap: 10px 12px; height: auto; overflow: visible; padding: 10px 40px 8px; } /* very large text moves Sign out under the logo */
  .sidebar .brand { flex: 1 1 0; min-width: auto; flex-direction: row; align-items: center; padding: 0; border: 0; }
  .sidebar .brand-wordmark { height: 44px; max-width: none; }
  .sidebar .brand-sub { padding: 4px 0 4px 14px; border-left: 1px solid var(--on-dark-line); overflow-wrap: break-word; }
  .whoami { display: block; margin: 0 0 0 auto; padding: 0; border: 0; }
  .whoami .avatar, .whoami-text { display: none; }
  .signout-button { width: auto; gap: 8px; padding: 0 10px; font-size: 0.85rem; letter-spacing: 0.06em; border: 0; border-radius: 999px; }
  .sidenav { order: 1; flex: 1 1 100%; flex-flow: row wrap; gap: 4px; margin: 0 -8px; } /* very large text wraps the tabs onto a second row, never inside a word */
  .sidenav a span { max-width: 100%; }
  .sidenav a { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 4px; max-width: 100%; min-height: 60px; padding: 6px 2px; font-size: 0.7rem; letter-spacing: 0.06em; text-align: center; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .sidenav { margin: 0 -14px; }
  .sidenav a { flex: 0 1 auto; flex-direction: row; gap: 10px; min-height: 48px; padding: 6px 14px; font-size: 0.85rem; letter-spacing: 0.06em; }
}
@media (max-width: 960px) {
  .layout-staff .container { padding: 24px 20px 40px; }
  .layout-staff .footer-inner { padding: 8px 20px; }
  .sidebar-inner { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .sidenav { margin: 0 -10px; }
  .sidenav a { padding: 6px 10px; }
}

@media (max-width: 760px) {
  .container { padding: 24px 16px 48px; }
  .top-inner, .footer-inner, .welcome-inner { padding-left: 16px; padding-right: 16px; }
  .top-inner { padding-top: 10px; padding-bottom: 10px; }
  .brand { gap: 14px; }
  .brand-wordmark { height: 44px; }
  .brand-sub { padding-left: 14px; }
  .layout-patient .brand-sub { display: none; }
  .chip-link { gap: 8px; padding-inline: 14px; }
  .chip-link > span { font-size: min(1em, 8.7vw); } /* with very large text the email address still fits on one line */
  .nav-link { padding: 0 14px; }
  .topnav .signout { margin-left: 4px; padding-left: 8px; }
  .nav-quiet { padding: 0 8px; }

  h1 { font-size: 1.7rem; }
  .layout-staff h1 { font-size: 1.5rem; }
  .card:not(.table-card) > .empty { padding-left: 0; padding-right: 0; }
  .page-intro { margin-bottom: 22px; }
  .page-intro h1 { font-size: 1.6rem; margin-bottom: 2px; }
  .group { margin-bottom: 34px; }
  .group-head h2 { font-size: 1.4rem; }
  .tiles { margin-top: 14px; gap: 12px; }
  .tile { gap: 16px; min-height: 100px; padding: 14px 16px 14px 14px; }
  .tile-play { width: 56px; height: 56px; }
  .tile-play .icon { width: 26px; height: 26px; margin-left: 3px; }
  .tile-title { font-size: max(1rem, min(1.15rem, 6.2vw)); hyphens: auto; } /* a long word fits, or breaks with a hyphen; never smaller than the body text */
  .tile-status { white-space: normal; }
  .tile-status .icon { width: 28px; height: 28px; padding: 5px; }
  .tile-go { display: none; }
  .video-title { font-size: max(1.15rem, min(1.5rem, 8.4vw)); margin-bottom: 14px; hyphens: auto; }
  .instructions { padding: 12px 16px 14px 17px; border-left-width: 4px; }
  .layout-patient .crumb .back, .back-bottom .back { width: 100%; justify-content: center; }

  .welcome-inner { padding-top: 18px; padding-bottom: 60px; }
  .welcome-mark { width: 52px; margin-bottom: 10px; }
  .welcome h1 { margin-bottom: 10px; font-size: 1.45rem; }
  .wide-only { display: none; }
  .tagline { letter-spacing: 0.1em; line-height: 1.5; }
  .signin { margin: -44px auto 40px; padding: 18px 18px 20px; }
  .signin .alert { margin-bottom: 12px; padding: 10px 12px 10px 12px; font-size: 0.9rem; line-height: 1.4; }
  .signin h2 { margin-bottom: 8px; font-size: 1.35rem; }
  .signin .stack { gap: 12px; }
  .signin .field { gap: 4px; }
  .signin input { min-height: 50px; }
  .steps { gap: 12px; }
  .steps li { padding: 18px; }
  .how > h2 { font-size: 1.4rem; }

  .card { padding: 20px 18px; }
  .card.table-card { padding: 0; }
  .table-card > .card-head { padding: 18px 18px 0; }
  .card:not(.table-card) > table.data { width: calc(100% + 36px); margin: 0 -18px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head .page-actions .button { width: 100%; }
  .page-actions { width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .profile { gap: 14px 16px; }
  .profile-main { flex-basis: 180px; }
  .profile h1 { font-size: min(1.6rem, 8.4vw); }
  .profile-stats { flex-direction: column; width: 100%; border-top: 1px solid var(--line); }
  .profile-stats li, .profile-stats li + li { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 12px; padding: 10px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .profile-stats .stat-label { order: -1; }
  .profile-stats .stat-num { margin-left: auto; text-align: right; } /* a value too wide to sit beside its label goes under it, still on the right */
  .profile-stats li:last-child { padding-bottom: 0; border-bottom: 0; }
  .profile-stats .stat-num, .profile-stats .stat-num.date { font-size: 1.1rem; line-height: 1.4; }
  .profile-stats .stat-label { font-size: 0.9rem; }
  .avatar.large { width: 60px; height: 60px; font-size: 1.2rem; }
  .profile > .avatar { display: none; } /* the name gets the full width */
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .credentials-head .feature-icon { display: none; }
  .credentials-head h1 { font-size: 1.5rem; }
  .slip-head, .slip-row, .slip-help { padding-left: 18px; padding-right: 18px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .layout-staff .footer-inner { align-items: flex-start; }
  .layout-staff .footer-copy { display: none; } /* staff phones: just the clinic's phone and email */
  .footer-line .dot { display: none; }
  .toolbar { padding: 16px 18px; flex-wrap: nowrap; }
  .search { flex: 1 1 auto; min-width: 0; }
  .toolbar button, .toolbar .button { padding-left: 0.9em; padding-right: 0.9em; }

  .stats { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
  .stat { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
  .stat-icon { display: none; }
  .stat-num { min-width: 2ch; font-size: 1.5rem; }
  .stat-label { font-size: 0.85rem; }
}

/* Sign-in steps: one row each, the number beside the text */
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .step-num { grid-row: span 2; margin: 0; }
  .steps h3 { margin-bottom: 2px; }
}

/* Tables become stacked cards */
@media (max-width: 900px) {
  table.data, .data tbody, .data tr, .data td { display: block; width: 100%; }
  .card:not(.table-card) > table.data { width: calc(100% + 48px); }
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data tr { padding: 14px 24px; border-bottom: 1px solid var(--line); }
  .data tbody tr:last-child { border-bottom: 0; }
  .data td, .data td:first-child, .data td:last-child, .library td:not(:first-child) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; width: 100%; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
  .data td:not(:first-child):not(.actions) > * { margin-left: auto; } /* a value too wide to sit beside its label goes under it, still on the right */
  .data td > .mono { min-width: 0; overflow-wrap: anywhere; }
  .data td::before { content: attr(data-label); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: normal; color: var(--text-muted); text-align: left; }
  .data td:first-child { justify-content: flex-start; padding-bottom: 8px; text-align: left; }
  .data td:first-child::before { display: none; }
  .data td.actions { justify-content: flex-start; padding-top: 10px; }
  .data td.actions::before { display: none; }
  .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .data .sub { display: inline; margin-left: 6px; }
  .history td:first-child { min-width: 0; }
  .data td .finished { display: block; text-align: right; } /* the check stays beside the date when the date wraps */
  .data td .finished .icon { margin-right: 6px; vertical-align: -0.25em; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* Tablets: two label/value pairs to a row, so labels sit near their values */
  .data tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .data td:first-child, .data td.actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .data td.actions:empty { display: none; }
}
/* Large text: a table that no longer fits its card stacks the same way, instead of scrolling inside the card.
   43em is narrower than any of these cards at normal text size on screens wider than 900px. The video library sits
   beside the upload form, so it measures the two together. */
.card:has(> table.data:not(.library)), .split:has(> .card > table.library) { container-type: inline-size; }
@media (min-width: 901px) {
  @container (max-width: 43em) {
    table.data, .data tbody, .data tr, .data td { display: block; width: 100%; }
    .card:not(.table-card) > table.data { width: calc(100% + 48px); }
    .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .data tr { padding: 14px 24px; border-bottom: 1px solid var(--line); }
    .data tbody tr:last-child { border-bottom: 0; }
    .data td, .data td:first-child, .data td:last-child, .library td:not(:first-child) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; width: 100%; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
    .data td:not(:first-child):not(.actions) > * { margin-left: auto; }
    .data td > .mono { min-width: 0; overflow-wrap: anywhere; }
    .data td::before { content: attr(data-label); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: normal; color: var(--text-muted); text-align: left; }
    .data td:first-child { justify-content: flex-start; padding-bottom: 8px; text-align: left; }
    .data td:first-child::before, .data td.actions::before { display: none; }
    .data td.actions { justify-content: flex-start; padding-top: 10px; }
    .data td.actions:empty { display: none; }
    .row-actions { justify-content: flex-start; flex-wrap: wrap; }
    .data .sub { display: inline; margin-left: 6px; }
    .history td:first-child { min-width: 0; }
    .data td .finished { display: block; text-align: right; }
    .data td .finished .icon { margin-right: 6px; vertical-align: -0.25em; }
  }
}
/* Tablets: two label/value pairs to a row at normal text size, one with large text */
@media (min-width: 601px) and (max-width: 900px) {
  @container (max-width: 24em) {
    .data tr { display: block; }
  }
}
@media (max-width: 760px) {
  .card:not(.table-card) > table.data { width: calc(100% + 36px); }
  .data tr { padding: 14px 18px; }
}
@media (min-width: 481px) and (max-width: 760px) {
  .sidenav a { font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .group-card { gap: 12px; padding: 16px; }
  .group-card .feature-icon { display: none; }
  .search > .icon { display: none; }
  .search input { padding-left: 0.8em; }
  .toolbar .search-button { flex: none; width: 48px; padding: 0; }
  .search-button .icon { display: block; }
  .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Two row actions don't fit side by side here: stack them full width */
  .row-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .row-actions > * + * { padding-left: 0; border-left: 0; }
  .row-actions button { width: 100%; }
  .slip dd.mono { font-size: clamp(1rem, 5.7vw, 2.1rem); letter-spacing: 0; } /* an 18-letter username fits on one line from 320px */
  .slip-row.code dd.mono { font-size: clamp(1.6rem, 9vw, 2.1rem); letter-spacing: 0.04em; } /* six digits always have room */
  .setting > form, .setting button, .form-actions > button, .form-actions > .button, .danger-zone form, .danger-zone button { width: 100%; }
}
@media (max-width: 600px) {
  /* Clear gets its own row, so the search box keeps its width while a search is showing */
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex-basis: 0; }
  .toolbar .clear { flex: 1 0 100%; }
}

@media (max-width: 420px) {
  .top-inner { column-gap: 8px; }
  .sidebar .brand-sub { font-size: 0.7rem; letter-spacing: 0.1em; }
  .nav-link { padding: 0 10px; letter-spacing: 0.05em; }
  .nav-quiet .icon, .signout-button .icon { display: none; }
}


@media (max-width: 380px) {
  input[type='file']::file-selector-button { margin-right: 8px; padding: 0.4em 0.6em; letter-spacing: 0.04em; }
  .sidebar .brand-sub { letter-spacing: 0.06em; }
  .sidenav { gap: 2px; margin: 0 -12px; }
  .sidenav a { font-size: 0.66rem; letter-spacing: 0.02em; }
  .search input { padding-left: 0.6em; padding-right: 0.6em; font-size: 0.95rem; }
  .top-inner { column-gap: 6px; }
  .layout-patient .brand-wordmark { height: 40px; } /* keeps the patient header on one line at 360px */
  .nav-link { padding: 0 6px; letter-spacing: 0.02em; }
  .topnav .signout { margin-left: 6px; padding-left: 4px; }
  .nav-quiet { padding: 0 6px; letter-spacing: 0.02em; }
  button, .button { letter-spacing: 0.06em; }
}

@media (max-width: 360px) {
  .chip-link { gap: 8px; padding: 6px 14px; font-size: 0.9rem; }
}

@media (max-width: 19em) {
  .chip-link .icon { display: none; }
}
@media (max-width: 340px) {
  .sidebar .brand-sub { display: none; }
  .chip-link .icon, .button.tel .icon { display: none; }
  .button.tel { padding-left: 0.9em; padding-right: 0.9em; }
}

/* ---------- Short screens: the sign-in hero shrinks so Sign in stays on screen ---------- */
/* Laptops: the mark sits beside a one-line headline, with the tagline under them. The headline stays the widest line. */
@media (max-height: 800px) {
  .welcome-inner { flex-flow: row wrap; justify-content: center; gap: 6px 16px; padding-top: 16px; padding-bottom: 56px; }
  .welcome-mark { width: 44px; margin: 0; }
  .welcome h1 { margin: 0; font-size: clamp(1.4rem, 3.7vw, 1.9rem); }
  .wide-only { display: none; }
  .tagline { flex-basis: 100%; letter-spacing: 0.06em; }
  .signin { margin-top: -40px; }
}
@media (max-height: 640px) {
  .tagline { display: none; }
}
/* Phones: a small mark over a centered two-line headline */
@media (max-width: 760px) and (max-height: 800px) {
  .welcome-inner { flex-flow: column nowrap; gap: 8px; padding-top: 12px; padding-bottom: 44px; }
  .welcome-mark { width: 34px; }
  .welcome h1 { font-size: 1.1rem; }
  .wide-only { display: inline; } /* break after "Life," */
  .tagline { display: none; }
  .signin { margin-top: -32px; }
}
/* Tall phones: the headline breaks after "Life," as on wider screens */
@media (max-width: 760px) and (min-height: 801px) {
  .wide-only { display: inline; }
}
@media (max-width: 379px) and (min-height: 801px) {
  .welcome h1 { font-size: 1.35rem; } /* so "Improve Your Quality of Life," fits on one line from 360px */
}
/* Shorter phones: the mark moves beside the headline */
@media (max-width: 760px) and (max-height: 700px) {
  .welcome-inner { flex-direction: row; justify-content: center; gap: 14px; text-align: left; }
  .welcome-mark { width: 40px; }
}
@media (max-width: 374px) and (max-height: 700px) {
  .wide-only { display: none; } /* beside the mark, "Life," doesn't fit on the first line */
}
@media (max-width: 760px) and (max-height: 620px) {
  .welcome-inner { padding-top: 6px; padding-bottom: 32px; }
  .welcome-mark { width: 34px; }
  .welcome h1 { font-size: 1rem; }
  .signin { margin-top: -28px; }
}
/* After a wrong code the message makes the card taller: the tagline goes first, then the mark shrinks, then the hero folds away */
@media (max-height: 890px), (max-width: 999px) and (max-height: 920px) {
  .layout-public:has(.signin .alert) .tagline { display: none; }
}
@media (min-width: 1000px) and (min-height: 801px) and (max-height: 890px), (min-width: 761px) and (max-width: 999px) and (min-height: 801px) and (max-height: 920px) {
  .layout-public:has(.signin .alert) .welcome-inner { padding-top: 12px; }
  .layout-public:has(.signin .alert) .welcome-mark { width: 44px; margin-bottom: 6px; }
  .layout-public:has(.signin .alert) .welcome h1 { margin-bottom: 8px; }
}
@media (max-height: 700px) {
  .layout-public:has(.signin .alert) .welcome-inner { padding: 0 0 32px; }
  .layout-public:has(.signin .alert) .welcome-mark { display: none; }
  .layout-public:has(.signin .alert) .welcome h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .layout-public:has(.signin .alert) .signin { margin-top: -32px; padding-top: 20px; }
  .layout-public:has(.signin .alert) .signin h2 { margin-bottom: 8px; }
}
@media (max-width: 960px) and (max-height: 700px) {
  .layout-public:has(.signin .alert) .signin { padding-top: 12px; }
  .layout-public:has(.signin .alert) .signin h2 { margin-bottom: 4px; }
}
/* Narrow short windows, where the fields are stacked: after a wrong code the card tightens so Sign in stays on screen */
@media (max-width: 960px) and (max-height: 600px) {
  .layout-public:has(.signin .alert) .signin h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .layout-public:has(.signin .alert) .signin .alert { margin-bottom: 8px; }
  .layout-public:has(.signin .alert) .signin .stack { row-gap: 8px; }
  .layout-public:has(.signin .alert) .signin .field { gap: 2px; }
  .layout-public:has(.signin .alert) .signin input { min-height: 48px; }
}
/* Landscape phones and zoomed-in laptops: the two fields sit side by side */
@media (max-height: 560px) and (min-width: 480px) {
  .signin { max-width: 760px; }
  .signin form.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 20px; }
  .signin form.stack > button { grid-column: 1 / -1; }
}
@media (max-height: 480px) and (min-width: 480px) {
  .signin { padding-top: 20px; }
  .signin h2 { margin-bottom: 8px; }
}
/* Landscape phones: the hero folds away */
@media (max-height: 420px) and (min-width: 480px) {
  .welcome-inner { padding: 0 0 32px; }
  .welcome-mark, .tagline { display: none; }
  .welcome h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .signin { margin-top: -32px; padding-top: 14px; }
  .signin h2 { margin-bottom: 6px; }
}
@media (max-height: 340px) and (min-width: 480px) {
  .signin { padding-top: 10px; }
  .signin h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the button says Sign in */
}
/* Landscape phones and zoomed-in laptops after a wrong code: the message is the card's heading, set compactly, and in
   the shortest windows the field hints step aside (fields still announce them) */
@media (max-height: 480px) and (min-width: 480px) {
  .layout-public:has(.signin .alert) .signin .alert { margin-bottom: 8px; padding: 8px 12px 8px 12px; font-size: 0.9rem; line-height: 1.35; }
  .layout-public:has(.signin .alert) .signin .alert .icon { display: none; }
  .layout-public:has(.signin .alert) .signin input, .layout-public:has(.signin .alert) .signin button.big { min-height: 48px; }
}
@media (max-height: 420px) and (min-width: 480px) {
  .layout-public:has(.signin .alert) .signin { padding-top: 16px; }
  .layout-public:has(.signin .alert) .signin h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-height: 420px) and (min-width: 480px) and (max-width: 960px) {
  .layout-public:has(.signin .alert) .signin { padding-top: 10px; }
}
@media (max-height: 360px) and (min-width: 480px) {
  .layout-public:has(.signin .alert) .signin .hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Short windows: a slimmer header, growing back smoothly up to 700px tall */
@media (max-height: 600px) {
  .top-inner { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-height: 600px) and (max-width: 960px) {
  .layout-patient .brand-sub { display: none; }
}
@media (max-height: 600px) and (min-width: 560px) {
  .top .brand-wordmark { height: 44px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .top-inner { padding-top: clamp(6px, 6px + (100vh - 600px) * 0.08, 14px); padding-bottom: clamp(6px, 6px + (100vh - 600px) * 0.08, 14px); }
  .top .brand-wordmark { height: clamp(44px, 44px + (100vh - 600px) * 0.14, 58px); }
}

/* Windows contrast themes paint the navy away: keep a navy tile behind the white logos */
@media (forced-colors: active) {
  .brand-wordmark, .welcome-mark, .slip-head img { forced-color-adjust: none; background: var(--navy); border-radius: 4px; padding: 4px; }
  select { appearance: auto; padding-right: 0.8em; background-image: none; }
}

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

@media print {
  .sidebar, .top, .topnav, .site-footer, .skip, .crumb, form, .form-actions, .print-tip, .credentials-head, .card:has(> .form-grid) { display: none !important; }
  .avatar, progress { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .shell { display: block; }
  body { background: var(--surface); }
  .layout-staff .container { padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .card:not(.table-card) > table.data { width: 100%; margin: 0; }
  .card:has(> table.data), .table-card { overflow: visible; } /* a scrolling box would not split across pages */
  .slip { max-width: 640px; break-inside: avoid; }
}