/* SmileReply — dashboard styles.
   Tokens here are the shared design system for every dashboard screen; the
   login page is the first consumer, Practice Settings (screen 1) is next. */

:root {
  /* Product chrome. Fixed — the dashboard looks the same for every practice.
     Practice colours belong in the patient-facing consult, not the admin UI. */
  --ui-accent: #0071f5;
  --ui-accent-strong: #0060d0;
  --ui-accent-soft: #e7f2fe;

  /* Per-practice branding. Set at runtime from practices.branding; used by the
     patient-facing surfaces, deliberately not by the dashboard chrome. */
  --brand: #2563eb;

  /* The sidebar is dark while the rest of the app is light, so it needs its own small
     palette. Accent-on-dark is NOT --ui-accent: #0071f5 against this navy is barely 1.9:1,
     unreadable as label text. This one is the same hue lifted to a legible lightness. */
  --nav-bg: #06183e;
  --nav-ink: #d9e2f2;
  --nav-ink-strong: #ffffff;
  --nav-icon: #9fb3d1;
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-active: rgba(255, 255, 255, 0.10);
  --nav-line: rgba(255, 255, 255, 0.10);
  --nav-accent: #4da2ff;
  /* Ink & surfaces */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e3e8ef;
  --surface: #fff;
  --app-bg: #f9f9ff;

  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;

  /* Shape — 1.5rem card radius per the locked container spec */
  --r-card: 1.5rem;
  --r-field: 0.75rem;

  --shadow-card: 0 24px 60px -24px rgba(15, 23, 42, 0.28),
                 0 2px 6px rgba(15, 23, 42, 0.04);

  --max-w: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;          /* locked base size */
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Soft mesh background — pale blue → lavender → blush, with two blurred blobs. */
body {
  min-height: 100%;
  background:
    radial-gradient(60rem 40rem at 12% 8%, #dceaf9 0%, transparent 60%),
    radial-gradient(55rem 42rem at 88% 78%, #fadfe4 0%, transparent 62%),
    linear-gradient(135deg, #dfe9f8 0%, #dedcf3 48%, #f7dee2 100%);
  background-attachment: fixed;
}

.app { min-height: 100vh; display: grid; }
/* The gradient belongs to the sign-in screen; the dashboard sits on flat grey. */
.app.is-dash { background: var(--app-bg); }
/* Hide both views until the session check resolves. */
.app.is-booting .view { display: none !important; }
.view[hidden] { display: none; }
.view { width: 100%; min-width: 0; }

.view-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
}

.card {
  width: 100%;
  /* Guard: no child's intrinsic size may push a card past its container. */
  max-width: 100%;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------- login -- */
.login { max-width: 32.5rem; padding: 3rem 3rem 2.75rem; }

.login__title {
  margin: 0;
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.login__sub {
  margin: 0.5rem 0 2.25rem;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--muted);
}

.field { margin-bottom: 1.25rem; }

.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}

.input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(82, 94, 245, 0.14);
}

.input__icon,
.input__reveal svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.input__icon { margin-left: 1rem; }

.input input {
  flex: 1 1 auto;
  /* width + min-width:0 together stop the input's default ~20ch intrinsic size
     from setting a min-content floor that overflows the card on narrow screens. */
  width: 100%;
  min-width: 0;
  padding: 1rem 0.875rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.input input::placeholder { color: #9aa6b8; }
.input input:focus { outline: none; }
/* Browser autofill paints its own blue fill on the bare <input>, which is square-cornered inside
   the rounded .input wrapper, so the corners poked out past the border. Paint over it with the
   field's own colour (the same fix the patient page uses), and round the input to match. */
.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  border-radius: var(--r-field);
  transition: background-color 9999s ease 0s;
}

.input__reveal {
  display: grid;
  place-items: center;
  margin-right: 0.75rem;
  padding: 0.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
}

.input__reveal:hover svg { stroke: var(--ink-2); }
.input__reveal:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.input__reveal[aria-pressed="true"] svg { stroke: var(--ui-accent); }

.login__row { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ui-accent);
  cursor: pointer;
}

.linkbtn:hover { color: var(--ui-accent-strong); text-decoration: underline; }
.linkbtn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-field);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.06s;
}

.btn--block { width: 100%; }
/* Start your free trial (index.html #trial-form). */
.trial__plan { margin: 0 0 1rem; padding: 0.875rem 1rem; border-radius: 0.875rem; background: var(--ui-accent-soft);
  color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; text-align: center; }
.trial__plan b { color: var(--ink); }
.trial__points { margin: 0 0 1.25rem; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }
.bill__actions { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.125rem; flex-wrap: wrap; }
.bill__actions--tight { margin-top: 0; gap: 0.5rem; }
.bill__locs { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: 0.25rem; margin-top: 1rem; }
.bill__locs .bill__locsn, .bill__locs .bill__note { grid-column: 1; }
.bill__locsact { grid-column: 2; grid-row: 1; }
.bill__locs--note .bill__locsact { grid-row: 2; }   /* on the same line as the note */
@media (max-width: 640px) { .bill__locs { grid-template-columns: 1fr; } .bill__locsact, .bill__locs--note .bill__locsact { grid-column: 1; grid-row: auto; margin-top: 0.5rem; } }
.bill__locsn { font-size: 1rem; color: var(--ink-2); }
.bill__locsn b { font-size: 1.25rem; color: var(--ink); }
.bill__note { margin: 0; }
.bill__dlg { max-width: 30rem; }
.bill__step { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.bill__step > span { font-size: 0.9375rem; color: var(--ink); font-weight: 600; }
.bill__stepper { display: flex; align-items: center; gap: 0.75rem; }
.bill__stepper .btn { width: 2.25rem; padding-left: 0; padding-right: 0; justify-content: center; font-size: 1.125rem; }
.bill__stepper b { min-width: 1.75rem; text-align: center; font-size: 1.25rem; color: var(--ink); }
.bill__cmp { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.bill__cmp div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.bill__cmp dt { color: var(--muted); font-size: 0.875rem; }
.bill__cmp dd { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.bill__cmp dd span { color: var(--muted); margin: 0 0.25rem; }
.bill__now { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--ink); line-height: 1.5; }
/* Billing (billing.js). */
.bill { display: grid; gap: 1.25rem; max-width: 52rem; }
.bill__muted { color: var(--muted); font-size: 0.875rem; margin: 0; }
.bill__status { display: inline-block; margin-left: 0.5rem; vertical-align: 2px; font-size: 0.75rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 999px; background: #e0f2fe; color: #075985; }
.bill__status--active, .bill__status--trialing { background: #dcfce7; color: #166534; }
.bill__status--comp { background: #f1f5f9; color: #475569; }
.bill__status--past_due, .bill__status--pending { background: #fff7ed; color: #9a3412; }
.bill__status--paused, .bill__status--cancelled { background: #fee2e2; color: #991b1b; }
.bill__alert { padding: 0.875rem 1.125rem; border-radius: 0.875rem; background: #fef2f2; color: #991b1b; font-size: 0.9375rem; }
.bill__alert--soft { background: #fffbeb; color: #92400e; }
.bill__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.875rem 1.5rem; margin: 1rem 0 0; }
.bill__facts dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.bill__facts dd { margin: 0.2rem 0 0; font-size: 0.9375rem; color: var(--ink); }
.bill__meter { margin-top: 1rem; }
.bill__meterhead { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; color: var(--ink-2); }
.bill__meterhead b { color: var(--ink); }
.bill__meterhead > span:not(.bill__used) { color: var(--muted); font-size: 0.875rem; }
.bill__bar { height: 0.625rem; margin-top: 0.5rem; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.bill__bar span { display: block; height: 100%; border-radius: 999px; background: var(--ui-accent); }
.bill__topups { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.bill__evs { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; }
.bill__ev { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.bill__ev:first-child { border-top: 0; }
.bill__evwhen { color: var(--muted); }
.bill__evwhat { color: var(--ink); }
.bill__evx { color: var(--muted); }
.grade-usage { margin-left: 1rem; font-size: 0.8125rem; color: var(--muted); }
/* Support: New practice + owner invitations (support.js). */
.sup__new { margin-left: auto; }
.np__kind { margin-bottom: 1.25rem; }
.np__kind .seg__opt { font-size: 0.875rem; padding: 0.45rem 1rem; }
.np__locs { max-width: 8rem; }
#np-locs-field .field__hint, .np__hint { margin: 0.4rem 0 0; }
.sup__remove { color: var(--danger); }
.sup__acts { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.sup__pill.is-wait { background: #fff7ed; color: #9a3412; }
.np__done { margin: 0 0 0.875rem; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.np__link { display: flex; gap: 0.5rem; }
.np__link input { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.625rem;
  font: inherit; font-size: 0.8125rem; color: var(--ink-2); background: #f8fafc; }
.np__note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--muted); }
/* Terms + DPA acceptance (index.html #agree-form): two document links, one tick. */
.agree__docs { display: grid; gap: 0.625rem; margin: 0.25rem 0 1.25rem; }
.agree__doc { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--line);
  border-radius: 0.875rem; color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.agree__doc:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.agree__doc svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.agree__doc span { flex: 1; }
.agree__ext { color: var(--muted); }
.check.agree__check { align-items: flex-start; margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.5; }
.agree__check input[type="checkbox"] { margin-top: 0.15rem; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

.btn--primary { background: var(--ui-accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--ui-accent-strong); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.btn--ghost:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }

/* Filled but quiet: an action that is real but is not the page's primary one. */
.btn--soft {
  background: var(--ui-accent-soft);
  border-color: transparent;
  color: var(--ui-accent);
  font-size: 0.9375rem;
}
.btn--soft:hover:not(:disabled) { background: #dfe2fd; }

.btn:disabled { opacity: 0.65; cursor: not-allowed; }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.94); }

/* Shared "are you sure?" confirmation popup (VSC.confirmDelete). */
.confirm { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.45); }
.confirm__panel { width: min(26rem, 100%); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 1.5rem; }
.confirm__title { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; }
.confirm__msg { margin: 0 0 1.375rem; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; white-space: pre-line; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 0.625rem; }
.confirm__actions .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }

/* Spinner shows only while the button is in its loading state. */
.spinner {
  display: none;
  width: 1.0625rem;
  height: 1.0625rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn__label { opacity: 0.85; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  .btn:active:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------ notes and alerts -- */
.note {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9375rem;
  border-radius: 0.625rem;
  background: #f1f5f9;
  color: var(--muted);
  font-size: 0.875rem;
}

.alert {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--danger-line);
  border-radius: 0.625rem;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ================================================================ shell == */
.svg-defs { position: absolute; width: 0; height: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* minmax(0, 1fr): without the 0 minimum, a wide child (the editor's video grid,
   a long filename) makes the track grow past the viewport → sideways scroll. */
.shell { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-line);
}

.brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.5rem 1.75rem; }

.brand__mark {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--ui-accent-soft);
}

.brand__mark svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.5; }
/* The logo is one image now; width is what is set, height follows the artwork so the
   ratio can never be squashed by a later change to the sidebar. */
.brand__logo { width: 180px; height: auto; display: block; }
.brand__text { display: grid; min-width: 0; }
.brand__text strong { font-size: 0.9375rem; font-weight: 700; color: var(--ui-accent); }
.brand__text small { font-size: 0.75rem; color: var(--muted); }

.nav { display: grid; gap: 0.125rem; }

.nav__item {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.75rem;
  color: var(--nav-ink);
  font-weight: 500;
  text-decoration: none;
}

.nav__item svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--nav-icon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav__item:hover { background: var(--nav-hover); color: var(--nav-ink-strong); }
.nav__item:hover svg { stroke: var(--nav-ink-strong); }
/* Red count of new submissions awaiting grading. */
.nav__badge { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); min-width: 1rem; height: 1rem; padding: 0 0.28rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1; text-align: center; box-shadow: 0 1px 2px rgba(239, 68, 68, 0.4); }
.nav__badge[hidden] { display: none; }

/* ============================================================ booking requests == */
.brq-count { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.brq-list { display: grid; gap: 0.875rem; }
/* The card is the request on the left and the team's running notes on the right -- the side
   that was empty, and the side a practice keeps looking for when a patient takes three calls
   to reach. minmax(0,...) on the left so a long concern cannot push the rail off the card. */
.brq { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.125rem; background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 0.75rem 1.5rem; align-items: start; }
.brq__main { display: grid; gap: 0.75rem; min-width: 0; }
.brq__notes { min-width: 0; padding-left: 1.5rem; border-left: 1px solid var(--line); align-self: stretch; }
.brq__noteshead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.brq__noteshead h3 { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
/* the rail is a log, not the card's subject: shorter notes, and a scroll rather than a card
   that grows without limit as the calls stack up */
.brq__notes .dnote { margin-top: 0.5rem; padding: 0.6rem 0.7rem; }
.brq__notes .dnote p { font-size: 0.8125rem; }
/* Below a laptop the rail has no room to be a column; it becomes the last block on the card. */
@media (max-width: 1100px) {
  .brq { grid-template-columns: minmax(0, 1fr); }
  .brq__notes { padding-left: 0; padding-top: 0.75rem; border-left: 0; border-top: 1px solid var(--line); }
}
.brq__top { display: flex; align-items: center; gap: 0.75rem; }
.brq__id { flex: 1; min-width: 0; }
.brq__name { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.brq__when { font-size: 0.75rem; color: var(--muted); }
.brq__pill { flex: none; padding: 0.2rem 0.65rem; border-radius: 999px; background: #fef3c7; color: #b45309; font-size: 0.72rem; font-weight: 700; }
.brq__contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.brq__link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--ui-accent); text-decoration: none; }
.brq__link svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brq__link:hover { text-decoration: underline; }
.brq__metas { display: grid; gap: 0.3rem; }
.brq__meta { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.45; }
.brq__meta b { color: var(--ink); font-weight: 600; }
.brq__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Opposite the actions, at the foot of the card: quieter than a button, because it is where
   to go and read rather than something to do to the request. */
.brq__grade { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--ui-accent); text-decoration: none; }
.brq__grade:hover { text-decoration: underline; }
.brq__grade svg { width: 0.8rem; height: 0.8rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* the outcome picker on a booking request: the menu hangs off the button, left-aligned
   like the one on Outcomes rather than centred under a pill */
.brq__outcome { position: relative; }
.brq__outcome .status-menu { left: 0; transform: none; }
.brq__outcome.is-open .btn__icon { transform: rotate(180deg); }
.brq__outcome .btn__icon { transition: transform 0.15s; }
.nav__item.is-active { background: var(--nav-active); color: var(--nav-accent); font-weight: 600; }
.nav__item.is-active svg { stroke: var(--nav-accent); }

.nav__item.is-active::before {
  content: "";
  position: absolute; left: -1rem; top: 0.5rem; bottom: 0.5rem;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ui-accent);
}

.sidebar__foot { margin-top: auto; }

.help {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  text-decoration: none;
}
.help:hover { background: var(--nav-hover); }
.help__icon {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem; background: color-mix(in srgb, var(--ui-accent) 50%, transparent);
}
.help__icon svg {
  width: 1.375rem; height: 1.375rem;
  /* White on the accent tile, which is solid colour now rather than a pale tint. */
  fill: none; stroke: #fff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.help__text { display: grid; line-height: 1.35; }
.help__text strong { font-size: 0.8125rem; font-weight: 500; color: var(--nav-ink-strong); }
.help__text small { font-size: 0.78125rem; font-weight: 500; color: var(--nav-accent); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  width: 100%; max-width: var(--max-w);
  margin: 0; padding: 2rem 2rem 1.25rem;   /* left-aligned; spare space on the right */
}

.topbar__title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.topbar__sub { margin: 0.25rem 0 0; color: var(--muted); }

/* margin-left:auto, not just the row's space-between: on a route that draws its own
   heading this is the topbar's only child, and space-between would park it on the left. */
.topbar__user { display: flex; align-items: center; gap: 0.75rem; flex: none; margin-left: auto; }

.avatar {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ui-accent-soft); color: var(--ui-accent);
  font-weight: 700; font-size: 0.8125rem;
}

.topbar__who { display: grid; line-height: 1.3; }
.topbar__who strong { font-weight: 600; }
.topbar__who small { color: var(--muted); }
/* Extra breathing room before the sign-out control. */
.topbar__user .btn { margin-left: 0.625rem; }

.content { width: 100%; max-width: var(--max-w); margin: 0; padding: 0 2rem 2.5rem; }

/* ============================================================== settings == */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;              /* 18px */
}
/* Cards keep their own height instead of matching the tallest in the row. For Practice
   Settings the default stretch is right; for a card whose content grows without limit it is
   not, and the card beside it becomes mostly empty space. */
.grid--top { align-items: start; }

.card.pad { padding: 1.5rem; border: 1px solid var(--line); box-shadow: none; }

/* ---- dialog ----------------------------------------------------------------------
   Used by Add a location. Same overlay conventions as .confirm (backdrop click and Escape
   both close), but sized for a form rather than a sentence: it scrolls inside itself so the
   header and the actions stay put on a short screen. */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(15, 23, 42, 0.45);
}
.modal__panel {
  width: min(34rem, 100%); max-height: calc(100vh - 3rem);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.modal__head {
  /* Tighter on the right than the body: the description is nine pixels too long for the
     room the close button and the standard padding left it, and it reads far better on one
     line than broken after "payment". */
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  padding: 1.5rem 1rem 1rem 1.5rem;
}
.modal__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.modal__sub { margin: 0.375rem 0 0.625rem; font-size: 0.8125rem; color: var(--muted); max-width: 34rem; }
.modal__x {
  flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 0.5rem;
  background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.modal__x:hover { background: var(--bg, #f1f5f9); color: var(--ink); }
.modal__x svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.modal__body { padding: 0 1.5rem 0.5rem; overflow-y: auto; display: grid; gap: 1rem; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: 0.625rem;
  padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--line); margin-top: 0.5rem;
}
/* A confirm has a title, maybe a line of body, and two buttons -- 34rem of panel around that
   reads as a form the reader is missing part of. */
.modal__panel--sm { width: min(24rem, 100%); }
.modal__panel--sm .modal__foot { border-top: 0; margin-top: 0; padding-top: 0.25rem; }

/* A numbered step inside a dialog. */
.step { display: flex; align-items: flex-start; gap: 0.75rem; }
.step--spaced { padding-top: 2.25rem; border-top: 1px solid var(--line); }
.step__no {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 0.8125rem; font-weight: 700;
}
.step__text h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.step__text p { margin: 0.1875rem 0 0; font-size: 0.8125rem; color: var(--muted); }

/* Radio + explanation, for a choice whose options need a sentence each. */
.setupopt { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; margin-top: 0.625rem; }
.setupopt input { margin-top: 0.1875rem; accent-color: var(--ui-accent); }
.setupopt__text { display: grid; gap: 0.125rem; }
.setupopt__text strong { font-size: 0.875rem; color: var(--ink); font-weight: 600; }
.setupopt__text small { font-size: 0.75rem; color: var(--muted); }
/* Only the FIRST option, which sits under the question. The one below it keeps the
   10px that separates the two choices from each other. */
.step--spaced + .setupopt { margin-top: 1.25rem; }
.setupopt__pick { padding-left: 1.625rem; margin-top: 0.625rem; }


/* A button that reads as a link. Used under a field for the rarer of two actions. */
.linkbtn {
  margin-top: 0.375rem; padding: 0; border: 0; background: none;
  font: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--ui-accent); cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }

/* Hiding a field means hiding its box, which carries an explicit display. */
.modal .input[hidden] { display: none !important; }

/* An input with a leading icon. */
.input--icon { display: flex; align-items: center; gap: 0.5rem; }
.input--icon .input__icon {
  flex: none; width: 1rem; height: 1rem; margin-left: 0.125rem;
  fill: none; stroke: var(--muted); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* A dialog is a denser context than a settings page: the whole form has to be readable at
   once, so the fields are smaller here than the page-level ones they reuse. */
/* :not([type="color"]) is carried over from the page-level rule further down this file --
   without it that rule matches with the same specificity, comes later, and wins, which is
   why these fields kept the page's 15px. */
.modal .input input:not([type="color"]),
.modal .input textarea,
.modal .input select { padding: 0.625rem 0.75rem; font-size: 0.8125rem; }
/* .input was built around single-line fields; a textarea needs the box to stop constraining
   its height and to keep the page font rather than the browser's monospace default. */
.modal .input textarea {
  width: 100%; border: 0; background: none; font: inherit; color: var(--ink);
  resize: vertical; min-height: 5rem; outline: none;
}
.modal .input:has(textarea) { height: auto; align-items: stretch; }
.modal .input--icon .input__icon { width: 1rem; height: 1rem; margin-left: 0.75rem; }
.modal .field__label { margin-bottom: 0.375rem; font-size: 0.8125rem; }
.modal .tworow { gap: 0.875rem; }
/* A dialog's buttons are the page's buttons: .btn--sm, the size every action on a card and
   in a card head uses. Both properties are set here rather than left to the class, because
   this selector outranks .btn--sm -- which is how the note and confirm dialogs ended up
   drawing 17px labels while the org dialog beside them drew 14px. */
.modal__foot .btn { padding: 0.5rem 0.875rem; font-size: 0.875rem; }

@media (max-width: 620px) {
  .modal { padding: 0.75rem; }
  .modal__panel { max-height: calc(100vh - 1.5rem); }
}

/* A card that needs the whole row. The locations list is one: each row carries a name, an
   address and three buttons, and in half a row the address truncates to nothing. */
.card--full { grid-column: 1 / -1; }

/* Brief highlight when a card is deep-linked to (e.g. #settings?focus=team). */
@keyframes card-flash {
  0% { box-shadow: 0 0 0 0 var(--ui-accent-soft); border-color: var(--ui-accent); }
  100% { box-shadow: 0 0 0 6px transparent; border-color: var(--line); }
}
@media (prefers-reduced-motion: no-preference) {
  .card--flash { animation: card-flash 1.6s var(--ease); }
}

.cardhead { display: flex; gap: 0.875rem; margin-bottom: 1.5rem; }

/* Team members */
.team-add { margin-left: auto; align-self: flex-start; flex: none; }
.team-head { padding: 0 0.25rem 0.5rem; border-bottom: 1px solid var(--line); }
.team-head span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.team-list { display: grid; }
.team-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row__name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-edit { flex: 1; min-width: 0; }
.team-edit__input { width: 100%; padding: 0.4375rem 0.625rem; border: 1.5px solid var(--ui-accent); border-radius: 0.5rem; font: inherit; font-size: 0.875rem; outline: none; }
.team-badge { flex: none; display: inline-flex; align-items: center; padding: 0.1875rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #dcfce7; color: #16a34a; }
.team-badge.is-off { background: #f1f5f9; color: var(--muted); }
.team-row__btn { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
.team-row__btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.team-row__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.team-row__del { color: var(--danger); }
.team-row__del:hover { border-color: var(--danger); background: #fef2f2; }
.team-empty { margin: 0; padding: 0.75rem 0.25rem; font-size: 0.8125rem; color: var(--muted); }

/* Photo avatar (member with an uploaded headshot). */
.avatar--photo { background: #eef2f7; padding: 0; overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; }

.team-badge--ready { gap: 0.25rem; background: #dcfce7; color: #16a34a; }
.team-badge--ready svg { width: 0.8125rem; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.team-badge--warn { background: #fef3c7; color: #b45309; }
/* A member shared to this location from another one in the group (read-only here). */
.team-badge--shared { background: #e0e7ff; color: #4338ca; }
/* Can grade (has a photo) but Generated Video is unavailable until a welcome video is added. */
.team-badge--novideo { background: #f1f5f9; color: #475569; }
.tm-also { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.tm-also .check input:disabled { cursor: not-allowed; }
.tm-also__off { color: var(--muted); font-weight: 400; }
.tm-shared__note { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--ink-2); }
.tm-shared__note:last-child { margin-bottom: 0; }
.tm-shared a.btn { text-decoration: none; }
.tm-shared__line { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink-2); }

/* -------------------------------------------------------- team members -- */
/* Team list rows (mirror the services list). */
.tm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.tm:hover { border-color: #cbd5e1; }
.tm.is-editing { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.tm.is-inactive { opacity: 0.72; }
.tm__body { min-width: 0; display: flex; align-items: center; gap: 0.625rem; }
.tm__name { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Team editor: profile photo + welcome video, stacked vertically in ed-cards. */
.tm-photorow { display: flex; align-items: center; gap: 1rem; }
.tm-photo { flex: none; width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: #f1f5f9; border: 1px solid var(--line); display: grid; place-items: center; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; }
.tm-photo__empty svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: #94a3b8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-video { width: 100%; aspect-ratio: 16 / 10; border-radius: 0.75rem; overflow: hidden; background: #0f172a; display: grid; place-items: center; margin-bottom: 0.75rem; }
.tm-video video { width: 100%; height: 100%; object-fit: contain; background: #0f172a; }
.tm-video__empty { display: inline-flex; align-items: center; gap: 0.4375rem; color: #94a3b8; font-size: 0.8125rem; }
.tm-video__empty svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Custom player: big play button + a control bar that fades in on hover. */
.tm-video--player { position: relative; }
.tm-player__vid { width: 100%; height: 100%; object-fit: contain; background: #0f172a; cursor: pointer; }
.tm-player__big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.55); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color 0.12s; }
.tm-player__big:hover { background: rgba(15, 23, 42, 0.72); }
.tm-player__big svg { width: 1.5rem; height: 1.5rem; margin-left: 2px; }
.tm-player__big[hidden] { display: none; }
.tm-player__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; background: linear-gradient(transparent, rgba(15, 23, 42, 0.72)); opacity: 0; transition: opacity 0.15s; }
.tm-video--player:hover .tm-player__bar, .tm-video--player:focus-within .tm-player__bar { opacity: 1; }
.tm-player__pp { flex: none; width: 1.6rem; height: 1.6rem; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.tm-player__pp svg { width: 1.05rem; height: 1.05rem; }
.tm-player__track { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); cursor: pointer; position: relative; }
.tm-player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 3px; }
.tm-player__time { flex: none; font-size: 0.7rem; color: #fff; font-variant-numeric: tabular-nums; }

.tm-thumbrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.tm-thumbrow:empty { display: none; }
.tm-thumbrow__hint { font-size: 0.75rem; color: var(--muted); line-height: 1.4; flex: 1; min-width: 8rem; }

.tm-vidbtns { display: flex; gap: 0.5rem; }
.tm-photobtns { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

/* "Add member" / "Add service" — keep the label on one line. */
.svc-panel__head .btn { white-space: nowrap; flex: none; }

/* Webcam photo-capture overlay (Take photo). */
.capshot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.6); }
.capshot__panel { width: min(30rem, 100%); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.capshot__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.capshot__head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.capshot__stage { position: relative; background: #0f172a; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.capshot__video, .capshot__shot { width: 100%; height: 100%; object-fit: cover; }
.capshot__foot { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: #fafbfc; }
.capshot__foot .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }

/* Circular crop/zoom framing for a profile photo. */
.cropm { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.6); overflow: auto; }
.cropm__panel { width: min(28rem, 100%); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.cropm__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--line); }
.cropm__head h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.cropm__sub { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.cropm__head .editor__close { margin-left: auto; flex: none; }
.cropm__stage { position: relative; width: min(20rem, 72vw); aspect-ratio: 1; margin: 1.25rem auto 0; overflow: hidden; border-radius: 0.75rem; background: #fff; touch-action: none; cursor: grab; }
.cropm__stage:active { cursor: grabbing; }
.cropm__img { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-drag: none; will-change: transform; }
.cropm__mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2000px rgba(15, 23, 42, 0.55); border: 2px solid rgba(255, 255, 255, 0.85); pointer-events: none; }
.cropm__zoom { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem 0; }
.cropm__zoom span { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.cropm__zoom input { flex: 1; accent-color: var(--ui-accent); }
.cropm__foot { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 1.25rem; }
.cropm__foot .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }

/* Standalone thumbnail picker for an existing welcome video. */
.thumbpick { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.6); overflow: auto; }
.thumbpick__panel { width: min(40rem, 100%); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.thumbpick__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--line); }
.thumbpick__head h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.thumbpick__sub { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.thumbpick__head .editor__close { margin-left: auto; flex: none; }
.thumbpick__stage { position: relative; background: #0f172a; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
/* The picker's controls stay visible (not hover-gated) so scrubbing is easy. */
.thumbpick__stage .tm-player__bar { opacity: 1; }
.thumbpick__foot { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 1rem 1.375rem; border-top: 1px solid var(--line); }
.thumbpick__foot .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }

/* "Filming tips" link in the video ed-card (name kept from the old modal). */
.memed__tips { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; flex: none; }
.memed__tips:hover { text-decoration: underline; }
.memed__tips svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------- filming tips modal -- */
.tips { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.5); overflow: auto; }
/* Wide enough that the landscape (16:9) example beside the tips is still a watchable size. */
.tips__panel { width: min(64rem, 100%); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.tips__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.375rem; border-bottom: 1px solid var(--line); }
.tips__head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
/* Tips beside the example, so the popup fits the screen; stacked again on a narrow window. */
.tips__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; padding: 1.375rem; }
@media (max-width: 820px) {
  .tips__body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
.tips__lead { margin: 0 0 1.1875rem; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }
.tips__list { margin: 0 0 0.875rem; padding-left: 1.125rem; display: grid; gap: 0.5rem; }
.tips__list li { font-size: 0.875rem; color: var(--ink); line-height: 1.45; }
.tips__hint { margin: 0.625rem 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.tips__vlabel { margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tips__video { width: 100%; border-radius: 0.75rem; overflow: hidden; background: #0f172a; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.tips__video video { width: 100%; height: 100%; object-fit: contain; }
.cardhead__icon {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem; background: var(--ui-accent-soft);
}
/* Glyph is 15% then a further 10% up from the original 1.125rem; tile stays 2.25rem. */
/* `color` is set so filled icon parts can use fill="currentColor" — that
   inherits into the <use> shadow tree, which a CSS selector cannot reach. */
.cardhead__icon svg { width: 1.423125rem; height: 1.423125rem; color: var(--ui-accent); fill: none; stroke: var(--ui-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Branding (paint brush) reads slightly small and low-right in its tile — 5%
   larger and nudged up-left so it sits more centred. */
.cardhead__icon.is-brush svg { width: 1.494281rem; height: 1.494281rem; transform: translate(-0.5px, -0.5px); }
.cardhead h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; }   /* 15px */
.cardhead p { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--muted); }  /* 13px */

.field__hint { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.8125rem; }
.field__err { margin: 0.375rem 0 0; color: var(--danger); font-size: 0.8125rem; font-weight: 500; }

.input select {
  flex: 1; min-width: 0; width: 100%;
  padding: 0.8125rem 0.875rem;
  border: 0; background: transparent; font: inherit; color: var(--ink);
  appearance: none; cursor: pointer;
}
.input select:focus { outline: none; }
.input:has(select)::after {
  content: ""; margin-right: 1rem; flex: none;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: translateY(-2px) rotate(45deg);
}

.input input:not([type="color"]) { padding: 0.8125rem 0.875rem; font-size: 0.9375rem; }
.input > input:first-child { padding-left: 1rem; }
/* Dashboard fields only — the sign-in form keeps its larger, roomier inputs.
   Covers selects and the colour hex box too, so all field text matches. */
.content .input input:not([type="color"]),
.content .input select,
.content .colour input[type="text"] { font-size: 0.84375rem; }   /* 13.5px */

/* branding */
.brandgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.colstack { display: grid; gap: 1rem; align-content: start; }

.dropzone {
  display: grid; justify-items: center; gap: 0.625rem;
  padding: 1rem;
  border: 1.5px dashed #cbd5e1; border-radius: 1rem;
  text-align: center;
}
.dropzone__preview { position: relative; display: grid; place-items: center; min-height: 4.5rem; width: 100%; }
.dropzone__preview img { max-width: 100%; max-height: 4.5rem; object-fit: contain; }
.logo-clear { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 0.4rem; background: rgba(15, 23, 42, 0.55); color: #fff; cursor: pointer; }
.logo-clear:hover { background: rgba(15, 23, 42, 0.78); }
.logo-clear svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dropzone__empty { color: var(--muted); font-size: 0.8125rem; }
.dropzone .field__hint { margin: 0; }

/* Patient experience (Branding): two radio cards, Modern / Boutique */
.lookrow { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.lookopts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
/* the button colour is Boutique's, so it sits in Boutique's column, under that option */
.lookbtn { margin-top: 1rem; margin-left: calc(50% + 0.375rem); }
@media (max-width: 720px) {
  .lookopts { grid-template-columns: minmax(0, 1fr); }
  .lookbtn { margin-left: 0; }
}
.lookopt { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--r-field); cursor: pointer; }
.lookopt:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.lookopt input { margin: 0.2rem 0 0; accent-color: var(--ui-accent); flex: none; }
.lookopt__body { display: grid; gap: 0.1rem; }
.lookopt__body strong { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
/* each option's name set in its own face, so the choice shows itself */
.lookopt__serif { font-family: "Newsreader", Georgia, serif; font-weight: 400 !important; font-size: 1.05rem !important; }
.lookopt__sans { font-family: "Figtree", system-ui, sans-serif; }
.lookopt__body small { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

.colour { display: flex; align-items: center; gap: 0.625rem; border: 1px solid var(--line); border-radius: var(--r-field); padding: 0.375rem 0.5rem 0.375rem 0.375rem; }
.colour input[type="color"] {
  flex: none; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--line); border-radius: 0.5rem; background: none; cursor: pointer;
}
.colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.colour input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0.375rem; }
.colour input[type="text"] {
  flex: 1; min-width: 0; width: 100%;
  border: 0; background: transparent; font: inherit; font-weight: 600; text-transform: uppercase;
}
.colour input[type="text"]:focus { outline: none; }

/* welcome video */
.videorow { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.videorow__player { position: relative; border-radius: 0.875rem; overflow: hidden; background: #0f172a; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.videorow__player video { width: 100%; height: 100%; object-fit: cover; }
.videorow__empty { color: #94a3b8; font-size: 0.8125rem; padding: 0.5rem; text-align: center; }
.videorow__dur {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  padding: 0.125rem 0.375rem; border-radius: 0.375rem;
  background: rgba(15, 23, 42, 0.8); color: #fff; font-size: 0.75rem; font-weight: 600;
}
.videorow__meta { display: grid; gap: 0.375rem; justify-items: start; }
/* Stack the label, filename and date rather than letting them run together. */
.videorow__meta > div { display: grid; gap: 0.125rem; justify-items: start; }
.videorow__meta strong { font-weight: 600; }
.videorow__file { color: var(--ink-2); word-break: break-all; }
.videorow__date { color: var(--muted); font-size: 0.8125rem; }
.videorow__meta .btn { margin-top: 0.375rem; }
.videorow__actions { display: flex; gap: 0.5rem; }
.videorow__meta .field__hint { margin: 0; }

.tworow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* checkbox row */
.check { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; font-size: 0.78125rem; font-weight: 500; color: var(--ink-2); }
.check input[type="checkbox"] {
  flex: none; width: 1.125rem; height: 1.125rem; margin: 0;
  accent-color: var(--ui-accent); cursor: pointer;
}
.check + .note { margin: 0.75rem 0 0; }

/* a disabled field should read as switched off, not merely unresponsive */
.input.is-disabled { background: #f8fafc; border-color: var(--line); }
.input.is-disabled input { color: var(--muted); cursor: not-allowed; }

/* save bar */
.savebar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 1.125rem; padding: 1.0625rem 1.25rem;
  border: 1px solid var(--line); box-shadow: none;
}
/* Compact controls so the bar stays low-profile. */
.savebar .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }
.savebar__state { display: flex; align-items: center; gap: 0.75rem; }
.savebar__state span { display: grid; line-height: 1.35; }
.savebar__state strong { font-weight: 600; }
.savebar__state small { color: var(--muted); }
.savebar__tick {
  display: grid !important; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ui-accent-soft);
}
.savebar__tick svg { width: 1.155rem; height: 1.155rem; fill: none; stroke: var(--ui-accent); stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
.savebar__dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #f59e0b; }
.savebar__dot--bad { background: var(--danger); }
.savebar__actions { display: flex; gap: 0.75rem; flex: none; }

.btn--sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.btn__icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--ghost .spinner { border-color: rgba(100, 116, 139, 0.35); border-top-color: var(--ink-2); }

.empty { padding: 3rem 2rem; text-align: center; border: 1px solid var(--line); box-shadow: none; }
.empty__title { margin: 0 0 0.375rem; font-size: 1.125rem; font-weight: 700; }
.empty__text { margin: 0; color: var(--muted); }

/* ============================================================== services == */
.services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* Base split is 1.05 : 1.1; the ∓20px shifts that much width from the list
   pane to the editor pane (1.25rem = the column gap). */
.services:has(.svc-editor.is-open) {
  grid-template-columns:
    minmax(0, calc((100% - 1.25rem) * 1.05 / 2.15 - 20px))
    minmax(0, calc((100% - 1.25rem) * 1.10 / 2.15 + 20px));
}

/* --- toggle switch (shared by list + editor) --- */
.toggle {
  flex: none; width: 2.5rem; height: 1.375rem; padding: 0;
  border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer;
  position: relative; transition: background-color 0.15s;
}
/* 1rem knob in a 1.375rem track: an explicit 3px on every side, rather than
   top:50%/translateY, so the position does not depend on a percentage resolving against a
   box someone else may later change.
   1rem in a 1.375rem track, not 1.125rem: at a 2px inset the knob's drop shadow spills
   past the track's rounded end and reads as the circle escaping the pill. A 3px ring of
   colour all the way round is what makes it look seated. */
.toggle > span {
  position: absolute; top: 3px; left: 3px;
  width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  transition: left 0.15s; box-shadow: 0 1px 2px rgba(15,23,42,0.22);
}
.toggle[aria-checked="true"] { background: var(--ui-accent); }
.toggle[aria-checked="true"] > span { left: calc(100% - 1rem - 3px); }
.toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* --- left panel --- */
.svc-panel { padding: 1.5rem; border: 1px solid var(--line); box-shadow: none; }
.svc-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.svc-panel__head h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.svc-panel__head p { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--muted); }

.svc-list { display: grid; gap: 0.75rem; }
.svc-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: 1rem; }

.svc {
  display: grid;
  grid-template-columns: auto 3.25rem 1fr auto auto auto;
  align-items: center; gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line); border-radius: 1rem;
  background: var(--surface); cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.svc:hover { border-color: #cbd5e1; }
.svc.is-editing { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.svc.is-inactive { opacity: 0.72; }
.svc.is-dragging { opacity: 0.4; }

.svc__grip { display: grid; place-items: center; cursor: grab; color: #cbd5e1; }
.svc__grip svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.svc__grip:active { cursor: grabbing; }

.svc__thumb {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 0.75rem;
  background: var(--ui-accent-soft); color: var(--ui-accent);
  font-weight: 700; font-size: 1.125rem;
}
/* Canva icon tiles already include their own rounded background, so the img
   fills the thumb and the surrounding tile bg is hidden. */
.svc__thumb--icon { background: none; padding: 0; overflow: hidden; }
.svc__thumb--icon img { width: 100%; height: 100%; object-fit: contain; }
.svc__body { min-width: 0; }
.svc__name { margin: 0; font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc__fee { margin: 0.125rem 0 0.375rem; font-size: 0.75rem; color: var(--muted); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.tag { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 600; }
.tag--intro { background: #dcfce7; color: #15803d; }
.tag--explainer { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
.tag--faq { background: #eef2f7; color: var(--ink-2); }
/* a renamed preset service: which preset it runs on */
.tag--preset { background: #f1f5f9; color: #475569; font-weight: 500; }
/* the service-name hint sits UNDER its input, unlike the field hints that lead into one */
#ed-name-hint { margin: 0.45rem 0 0; }
/* .ed-icon's display:grid would otherwise beat [hidden]: a preset's icon is fixed, so no picker */
.ed-icon[hidden] { display: none; }

.svc__state { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.svc.is-inactive .svc__state { color: #94a3b8; }
.svc__open { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; cursor: pointer; color: #94a3b8; }
.svc__open svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .svc__open { color: var(--ui-accent); }

.svc-foot { display: flex; align-items: center; gap: 0.375rem; margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted); }
.svc-foot__icon { width: 0.875rem; height: 0.875rem; fill: currentColor; }

/* --- right editor panel --- */
/* Flex column bounded to the viewport: the head and the save bar are pinned (flex:none) and the
   body scrolls between them. This keeps the whole editor — including the save bar — within the
   viewport, so the save panel is always visible and there's no inner-scroll → window-scroll
   hand-off (which used to stall just before the save bar and let users miss it). */
.svc-editor { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.editor__head, .editor__bar { flex: none; }
.svc-editor:not(.is-open) { display: none; }
/* When closed, let the list use the full width. */
.services:not(:has(.svc-editor.is-open)) { grid-template-columns: minmax(0, 1fr); }
.services:not(:has(.svc-editor.is-open)) .svc-panel { max-width: 46rem; }

.editor__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.editor__head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.editor__head-actions { display: flex; align-items: center; gap: 0.25rem; }
.editor__close, .editor__delete { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.5rem; background: none; cursor: pointer; color: var(--muted); }
.editor__close:hover { background: #f1f5f9; }
.editor__delete:hover { background: var(--danger-soft); color: var(--danger); }
.editor__close svg, .editor__delete svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.editor__body { flex: 1 1 auto; min-height: 0; padding: 1.25rem; display: grid; gap: 1rem; overflow-y: auto; background: var(--app-bg); }

/* Each settings category is its own card. */
.ed-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
/* A field that IS the card's content shouldn't add its margin under the card padding. */
.ed-card > .field { margin-bottom: 0; }
.ed-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ed-card__head h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.ed-card__sub { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--muted); }

.ed-row { display: flex; gap: 1rem; align-items: flex-start; }
.ed-grow { flex: 1; margin: 0; }
.ed-active { display: grid; gap: 0.5rem; justify-items: start; }
/* grid gap already spaces the label; drop its margin so the tile top aligns
   with the adjacent input (which only has the 0.5rem label margin). */
.ed-icon .field__label, .ed-active .field__label { margin-bottom: 0; }
.ed-custom { margin-top: 1rem; }

/* Service-type selector grid */
.typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 0.625rem; }
.typecard {
  position: relative; display: grid; justify-items: center; gap: 0.5rem;
  padding: 0.875rem 0.5rem; border: 1.5px solid var(--line); border-radius: 0.875rem;
  background: var(--surface); cursor: pointer; transition: border-color 0.12s, background-color 0.12s;
}
.typecard:hover { border-color: #cbd5e1; }
.typecard.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.typecard__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.typecard__icon img { width: 100%; height: 100%; object-fit: contain; }
.typecard__plus { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linecap: round; }
.typecard__label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.2; }
.typecard.is-selected .typecard__label { color: var(--ui-accent); }
.typecard--custom { border-style: dashed; }
.typecard__check {
  position: absolute; top: 0.375rem; right: 0.375rem;
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
  background: var(--ui-accent); border-radius: 50%;
}
.typecard__check svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.typecard.is-used { opacity: 0.5; cursor: not-allowed; background: #f8fafc; }
.typecard.is-used:hover { border-color: var(--line); }
.ed-icon { display: grid; gap: 0.5rem; justify-items: start; }
.iconpick {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 1.5px dashed #cbd5e1; border-radius: 0.75rem;
  background: none; cursor: pointer; color: #94a3b8;
}
.iconpick.has-icon { border-style: solid; border-color: var(--line); padding: 0; overflow: hidden; }
.iconpick:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.iconpick img { width: 100%; height: 100%; object-fit: contain; }
.iconpick .iconpick__plus { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* icon picker modal */
.iconmodal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; background: rgba(15,23,42,0.4); }
.iconmodal__panel { width: min(40rem, 100%); max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.iconmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--line); }
.iconmodal__head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.iconmodal__search { padding: 1rem 1.5rem 0.5rem; }
.iconmodal__search input { width: 100%; padding: 0.6875rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-field); font: inherit; font-size: 0.875rem; }
.iconmodal__search input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(82,94,245,0.14); }
.iconmodal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; padding: 1rem 1.5rem; overflow-y: auto; }
.iconmodal__foot { padding: 0.75rem 1.5rem 1.25rem; border-top: 1px solid var(--line); }

.iconopt { padding: 0.25rem; border: 2px solid transparent; border-radius: 0.875rem; background: none; cursor: pointer; aspect-ratio: 1; }
.iconopt img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0.625rem; }
.iconopt:hover { border-color: var(--line); }
.iconopt.is-selected { border-color: var(--ui-accent); }

@media (max-width: 32rem) { .iconmodal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.editor__body textarea {
  width: 100%; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-field);
  font: inherit; font-size: 0.84375rem; color: var(--ink); resize: vertical;
}
.editor__body textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(82,94,245,0.14); }
/* settings free-text (financing) */
.set-ta { width: 100%; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); font: inherit; font-size: 0.875rem; line-height: 1.5; color: var(--ink); resize: vertical; min-height: 6.5rem; }
.set-ta:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(82,94,245,0.14); }
.counter { margin-top: 0.25rem; text-align: right; font-size: 0.75rem; color: #94a3b8; }

.ed-videos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.vid__slot { margin-top: 0.25rem; }
.vid__slot.is-busy { opacity: 0.5; pointer-events: none; }
.vid__upload {
  display: grid; place-items: center; gap: 0.25rem; width: 100%;
  padding: 1rem; border: 1.5px dashed #cbd5e1; border-radius: 0.875rem;
  background: none; cursor: pointer; color: var(--muted);
}
.vid__upload:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.vid__upload svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vid__upload small { font-size: 0.6875rem; }
.vid__err { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.4; text-align: center; color: var(--danger); }
.vid__slot:has(.vid__thumb) { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.875rem; }
.vid__thumb { width: 3.25rem; height: 2.5rem; border-radius: 0.5rem; object-fit: cover; background: #0f172a; flex: none; }
.vid__meta { display: grid; min-width: 0; flex: 1; }
.vid__name { font-size: 0.78125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid__size { font-size: 0.6875rem; color: var(--muted); }
.vid__del { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; cursor: pointer; color: #94a3b8; }
.vid__del:hover { color: var(--danger); }
.vid__del svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vid__slot--wide { max-width: 22rem; }

/* ---- Explainer video card (AI vs upload) ---- */
.badge-rec {
  display: inline-block; margin-left: 0.375rem; vertical-align: 2px;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--ui-accent-soft); color: var(--ui-accent);
  font-size: 0.6875rem; font-weight: 700;
}
.exp-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.exp-opt {
  position: relative; display: flex; flex-direction: column; padding: 1.125rem; border: 1.5px solid var(--line);
  border-radius: 1rem; background: var(--surface); cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.exp-opt:hover { border-color: #cbd5e1; }
.exp-opt.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.exp-opt.is-unavailable { opacity: 0.5; cursor: not-allowed; }
.exp-opt.is-unavailable:hover { border-color: var(--line); }

.exp-opt__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.exp-opt__radio {
  display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem;
  border: 2px solid #cbd5e1; border-radius: 50%; background: var(--surface);
}
.exp-opt__radio svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.exp-opt.is-selected .exp-opt__radio { background: var(--ui-accent); border-color: var(--ui-accent); }
.exp-opt.is-selected .exp-opt__radio svg { opacity: 1; }

.exp-opt__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; background: #f1f5f9; color: var(--muted); }
.exp-opt__icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Same blue as the upload option beside it: both are ways of getting a video, and the
   green of "no video" is the one that should stand apart. Its glyph runs slightly
   larger -- a circle outline carries less visual weight than the cloud next to it, so
   at matched box sizes it reads smaller than it measures. */
.exp-opt__icon--ai { background: #e6efff; color: #3b6ef0; }
.exp-opt__icon--ai svg { width: 1.7rem; height: 1.7rem; }
.exp-opt__icon--upload { background: #e6efff; color: #3b6ef0; }
.exp-opt__icon--none { background: #e7f6ee; color: #159a57; }
.exp-opt__title { display: block; font-size: 0.9375rem; font-weight: 700; }
.exp-opt__sub { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

.exp-ai__body { display: grid; gap: 0.625rem; margin-top: auto; padding-top: 1rem; }
.exp-ai__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem; background: linear-gradient(135deg, #b7bfe0, #d7dbf6); display: grid; place-items: center; overflow: hidden; }
.exp-ai__thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(15, 23, 42, 0.5)); }
.exp-ai__play { position: relative; top: -10px; z-index: 1; width: 2.5rem; height: 2.5rem; fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0.95; }
.exp-ai__thumbtitle { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.6rem; z-index: 1; color: #fff; font-size: 0.55rem; font-weight: 400; text-align: center; white-space: nowrap; }
.exp-ai__preview { display: inline-flex; align-items: center; gap: 0.3125rem; justify-self: start; font-size: 0.8125rem; font-weight: 600; color: var(--ui-accent); cursor: pointer; }
.exp-ai__preview:hover { text-decoration: underline; }
.exp-ai__preview svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.exp-upload__body { margin-top: auto; padding-top: 1rem; }
.exp-upload__body .vid__slot { margin-top: 0; }
.exp-upload__body .vid__upload { padding: 17px 1rem; }
/* Record or upload, side by side, in the empty slot. */
.vid__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.exp-upload__body .vid__pick .vid__upload { padding: 17px 0.5rem; }
.vid__pick .vid__upload svg { width: 1.0625rem; height: 1.0625rem; }   /* 15% under the single Upload tile */
.vid__pick .vid__upload span { font-size: 0.85em; }

/* Explainer video preview modal */
.vidmodal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.72); }
.vidmodal__box { position: relative; width: min(880px, 100%); background: #000; border-radius: 0.9rem; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.vidmodal__video { display: block; width: 100%; max-height: 80vh; background: #000; }
.vidmodal__close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.6); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.vidmodal__close:hover { background: rgba(15, 23, 42, 0.85); }

.exp-none__body { margin-top: auto; padding-top: 1rem; }
.exp-none__box { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem; border-radius: 0.85rem; background: #e9f7ef; }
.exp-none__check { flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #16a34a; }
.exp-none__check svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.exp-none__box strong { font-size: 0.8125rem; font-weight: 700; color: #14532d; }
.exp-none__box p { margin: 0.15rem 0 0; font-size: 0.75rem; color: #3f6b50; line-height: 1.4; }

.exp-foot { display: flex; align-items: center; gap: 0.65rem; margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 0.85rem; background: #f5f6fb; color: var(--muted); font-size: 0.8125rem; }
.exp-foot__ic { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


@media (max-width: 60rem) { .exp-options { grid-template-columns: minmax(0, 1fr); } }

/* Service-specific intro override — collapsible, at the bottom of the card */
.intro-override { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.intro-override__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.intro-override__toggle strong { font-size: 0.875rem; font-weight: 500; }
.intro-override__toggle .ed-chevron svg { transform: rotate(0deg); transition: transform 0.15s; }
.intro-override.is-open .ed-chevron svg { transform: rotate(90deg); }
.intro-override__body { margin-top: 1rem; }

/* Instant-simulation card: label left, toggle right */
/* Instant simulation is mandatory for presets, unavailable for custom — an
   informational panel, not a toggle. */
.ed-siminfo { display: flex; align-items: flex-start; gap: 0.75rem; }
.ed-siminfo strong { font-size: 0.9375rem; font-weight: 700; }
.ed-siminfo .ed-card__sub { margin-top: 0.125rem; }
.ed-siminfo.is-off .ed-card__sub { color: var(--muted); }
.toggle:disabled > span { box-shadow: none; }

.ed-currency { flex: none; font-size: 0.78125rem; font-weight: 600; color: var(--muted); padding: 0.375rem 0.625rem; background: #f8fafc; border: 1px solid var(--line); border-radius: 0.5rem; }

/* Pricing: tabbed mode selector, info banner, then the fee grid */
.feetabs { display: flex; gap: 0.375rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.feetab { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.875rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0.5rem 0.5rem 0 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.feetab__icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feetab:hover { color: var(--ink-2); }
.feetab.is-active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); background: var(--ui-accent-soft); }

/* Monthly column is a touch wider so its longer label stays on one line and
   its input lines up with the Low/High inputs (align-items:start keeps the
   input row consistent even if a label does wrap). */
.ed-fees__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 0.75rem; align-items: start; }
.ed-fees.is-single .ed-fees__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.ed-fees__grid .field { margin: 0; }
.ed-fees.is-single #ff-high { display: none; }
.input--fee .input__suffix { flex: none; padding-right: 0.875rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }

/* monthly field: number input + inline 12/24-month toggle (no currency suffix) */
.termtoggle { display: inline-flex; flex: none; gap: 0.125rem; margin-right: 0.3125rem; padding: 0.125rem; background: #f1f5f9; border-radius: 0.5rem; }
.termtoggle__opt { padding: 0.25rem 0.4375rem; border: 0; border-radius: 0.375rem; background: none; font: inherit; font-size: 0.6875rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.termtoggle__opt:hover { color: var(--ink-2); }
.termtoggle__opt.is-active { background: var(--surface); color: var(--ui-accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.field__cap { margin: 0.375rem 0 0; font-size: 0.6875rem; color: var(--muted); }
/* fee field labels 2px smaller than the standard 14px label */
.ed-fees__grid .field__label { font-size: 0.75rem; }

/* Collapsible card (special offer) */
.ed-collapse { cursor: pointer; margin-bottom: 0; }
.ed-chevron { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 0; background: none; cursor: pointer; color: var(--muted); }
.ed-chevron svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform 0.15s; }
.ed-card.is-collapsed .ed-chevron svg { transform: rotate(0deg); }
.ed-collapse__body { margin-top: 1rem; }
/* Tighten the gap above the offer description by 10px (20px → 10px). */
#ed-offer-body .field:first-child { margin-bottom: 0.625rem; }
.ed-card.is-collapsed .ed-collapse__body { display: none; }
.ed-card.is-collapsed .ed-collapse { margin-bottom: 0; }
.ed-card__note { display: flex; align-items: center; gap: 0.4375rem; margin: 0.625rem 0 0; font-size: 0.75rem; color: var(--muted); }
.ed-card__note-icon { flex: none; width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* --- FAQ builder --- */
.faq { display: grid; gap: 0.75rem; }
/* AI chat widget section: explanation + FAQ, hidden when the toggle is off */
.ed-aichat__head .toggle { flex: none; margin-top: 0.15rem; }
.ed-aichat__body { display: grid; gap: 1.25rem; }
.ed-aichat__body .field { margin-bottom: 0; }
#ed-aichat-card.is-off .ed-aichat__body { display: none; }
#ed-aichat-card.is-off .ed-card__head { margin-bottom: 0; }
.faq__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; }
.faq__icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.7; }
.faq__note { margin: 0; padding: 0.75rem 0.875rem; background: var(--ui-accent-soft); border-radius: 0.75rem; font-size: 0.78125rem; color: var(--ink-2); }
.faq__empty { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.faq__list { display: grid; gap: 0.625rem; }

.faqrow { display: grid; grid-template-columns: auto auto 1fr auto; align-items: start; gap: 0.625rem; padding: 0.625rem; border: 1px solid var(--line); border-radius: 0.875rem; background: var(--surface); }
.faqrow.is-dragging { opacity: 0.4; }
.faqrow__grip { display: grid; place-items: center; padding-top: 0.5rem; color: #cbd5e1; cursor: grab; }
.faqrow__grip svg { width: 1rem; height: 1rem; fill: currentColor; }
.faqrow__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: 0.375rem; border-radius: 0.5rem; background: #f1f5f9; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.faqrow__main { display: grid; gap: 0.375rem; min-width: 0; }
/* Tint the question and answer inputs so they read as distinct. */
.faqrow__main .input { background: #f0f3fd; }
.faqrow__main .faq-a { background: #f5f9f5; }
/* Collapsible answer: question bar always visible, answer opens on the chevron. */
.faqrow__qbar { display: flex; align-items: center; gap: 0.375rem; }
.faqrow__qbar .input { flex: 1; min-width: 0; }
.faqrow__toggle { flex: none; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 0; border-radius: 0.5rem; background: none; color: #94a3b8; cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.faqrow__toggle:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.faqrow__toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.faqrow.is-open .faqrow__toggle svg { transform: rotate(180deg); }
.faqrow .faq-a { display: none; }
.faqrow.is-open .faq-a { display: block; }
.faqrow__del { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.25rem; border: 0; background: none; cursor: pointer; color: #94a3b8; }
.faqrow__del:hover { color: var(--danger); }
.faqrow__del svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Treatment plans (service editor) — collapsible accordion */
.plans-list { display: grid; gap: 0.625rem; }
.plans-add { margin-top: 0.875rem; }
/* Closed plans sit on a light lavender tint so each is easy to tell apart; an OPEN plan turns
   fully white, making the currently-expanded one — and its start/end — stand out clearly. */
.planrow { border: 1px solid var(--line); border-radius: 0.875rem; background: #f1f1fe; overflow: hidden; transition: background-color 0.12s; }
.planrow.is-open { background: var(--surface); }
.planrow__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 0.875rem; cursor: pointer; transition: background-color 0.12s; }
.planrow:not(.is-open) .planrow__header:hover { background: #e8e8fc; }
.planrow.is-open .planrow__header:hover { background: #f8fafc; }
.planrow__name { font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.planrow__name.is-empty { font-weight: 500; color: var(--muted); }
.planrow__summary { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.planrow.is-open .planrow__summary { display: none; }
.planrow__del { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; cursor: pointer; color: #94a3b8; }
.planrow__del:hover { color: var(--danger); }
.planrow__del svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.planrow__chev { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.planrow.is-open .planrow__chev { transform: rotate(180deg); }
.planrow__body { display: none; }
.planrow.is-open .planrow__body { display: grid; gap: 0.75rem; padding: 0.25rem 0.875rem 0.875rem; }
.planrow__done { justify-self: start; margin-top: 0.25rem; }
.plan-block__label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.plan-block .feetabs { margin-bottom: 0.75rem; }
.plan-block .durval { font-size: 0.875rem; }
.plan-fees { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.plan-fees.is-single { grid-template-columns: minmax(0, 1fr); }
.plan-fees.is-single .plan-fee-highwrap { display: none; }

/* Before & after result photos — align tool (crop / zoom / crosshair) */
/* The list sits BELOW its add button now, so the breathing room moves to the top. */
.ba-list { display: grid; gap: 1rem; margin-top: 0.875rem; }
.planadd--top { margin-top: 0; }
.ba-list .faq__empty { font-size: 0.75rem; }   /* "No before/after photos yet." — 1px smaller */
.ba-add-more { width: 100%; justify-content: center; margin-bottom: 0.875rem; border-style: dashed; }

/* Guidance banners (blue = tip up top, grey = quality note underneath) */
.ba-hint { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.875rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; font-size: 0.6875rem; line-height: 1.45; color: color-mix(in srgb, var(--ui-accent) 78%, #0f172a); background: color-mix(in srgb, var(--ui-accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, #fff); }
.ba-hint--foot { margin: 0.25rem 0 0; color: var(--muted); background: #f8fafc; border-color: var(--line); }
.ba-hint__icon { flex: none; width: 0.95rem; height: 0.95rem; margin-top: 0.06rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* minmax(0,…) everywhere so the two native range sliders can shrink below their
   intrinsic min width — without it, adding the 2nd photo blows the tracks out and
   the panels overlap. */
.barow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem; align-items: start; }
/* Library rows carry their treatment tags under the pair, so the row stacks rather than
   sitting on one line the way the old per-service editor's did. */
.barow--lib { align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.barow--lib:last-child { border-bottom: 0; padding-bottom: 0; }
.barow__main { display: grid; gap: 0.75rem; min-width: 0; }
.batags { display: grid; gap: 0.375rem; }
.batags__label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.batags__empty, .batags__warn { margin: 0; font-size: 0.75rem; color: var(--muted); }
.batags__warn { color: #b45309; }
.batags__warn[hidden] { display: none; }
.barow__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.baslot { display: grid; grid-template-rows: auto auto auto; gap: 0.375rem; min-width: 0; }
.baslot__label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.baslot__upload { display: grid; place-content: center; justify-items: center; gap: 0.25rem; aspect-ratio: 3 / 2; border: 1.5px dashed var(--line); border-radius: 0.625rem; background: #f8fafc; color: var(--muted); font: inherit; font-size: 0.75rem; cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
.baslot__upload:hover { border-color: #cbd5e1; background: #f1f5f9; }
.baslot__upload svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.baslot.is-busy { opacity: 0.55; pointer-events: none; }

/* Crop stage — image pans/zooms behind a fixed frame + crosshair */
/* 19:10 — a short, wide frame so a smile fills it without empty lip/chin bands
   above and below (~20px trimmed off the top+bottom at editor width vs 5:3). */
/* 3:2, the shape a phone or a camera takes: a whole mouth fits in it, and it is the same
   frame the patient sees in the portal gallery (plan.js frameGallery). */
.bacrop { position: relative; aspect-ratio: 3 / 2; border-radius: 0.625rem; overflow: hidden; border: 1px solid var(--line); background: #1e293b; }
.bacrop__stage { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.bacrop.is-dragging .bacrop__stage { cursor: grabbing; }
.bacrop__img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; will-change: transform; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.bacrop__frame { position: absolute; inset: 0; pointer-events: none; }
.bacrop__corner { position: absolute; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.92); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); }
.bacrop__corner.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
.bacrop__corner.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-top-right-radius: 3px; }
.bacrop__corner.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-bottom-left-radius: 3px; }
.bacrop__corner.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 3px; }
.bacrop__cross { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); }
.bacrop__cross::before, .bacrop__cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.85); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)); }
.bacrop__cross::before { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.bacrop__cross::after { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.bacrop__replace { position: absolute; top: 0.375rem; right: 0.375rem; padding: 0.2rem 0.55rem; border: 0; border-radius: 0.4rem; font: inherit; font-size: 0.6875rem; font-weight: 600; color: #fff; background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(2px); cursor: pointer; transition: background-color 0.12s; }
.bacrop__replace:hover { background: rgba(15, 23, 42, 0.82); }

/* Zoom + reset control bar under each photo */
.bazoom { display: flex; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.25rem 0.4rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #f8fafc; }
.bazoom__mag { flex: none; width: 0.9rem; height: 0.9rem; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bazoom__step { flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 1px solid var(--line); border-radius: 0.3rem; background: #fff; color: var(--ink-2); font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
.bazoom__step:hover { border-color: #cbd5e1; background: #f1f5f9; }
.bazoom__slider { flex: 1 1 auto; min-width: 0; height: 3px; -webkit-appearance: none; appearance: none; background: #e2e8f0; border-radius: 3px; cursor: pointer; }
.bazoom__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-accent); border: 2px solid #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); cursor: pointer; }
.bazoom__slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ui-accent); border: 2px solid #fff; cursor: pointer; }
.bazoom__sep { flex: none; width: 1px; align-self: stretch; margin: 0.1rem 0.05rem; background: var(--line); }
.bazoom__reset { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer; transition: border-color 0.12s, background-color 0.12s, color 0.12s; }
.bazoom__reset:hover { border-color: #cbd5e1; background: #f1f5f9; color: var(--ink); }
.bazoom__reset svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.barow__del { align-self: center; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; cursor: pointer; color: #94a3b8; }
.barow__del:hover { color: var(--danger); }
.barow__del svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.editor__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface); }
/* Match the Practice Settings save-bar button size. */
.editor__bar .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }

@media (max-width: 68rem) {
  .services, .services:has(.svc-editor.is-open) { grid-template-columns: minmax(0, 1fr); }
  .svc-editor { position: static; }
}

/* ----------------------------------------------------------------- mobile -- */
@media (max-width: 60rem) {
  .grid, .brandgrid { grid-template-columns: minmax(0, 1fr); }
  .videorow { grid-template-columns: minmax(0, 1fr); }
  .videorow__player { max-width: 20rem; }
}

/* Tablet portrait + narrow windows (≤60rem/960px): collapse the shell to one
   column and lay the sidebar out as a horizontal top-nav. Phones (<768px) are
   gated out entirely, so this tier is where tablets in portrait (iPads at
   ~820–834px) live — a 260px vertical sidebar there would waste half the width. */
@media (max-width: 60rem) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto;
    flex-direction: row; align-items: center; gap: 0.75rem;
    overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0.75rem 19px;
  }
  .brand { padding: 0; }
  .nav { grid-auto-flow: column; gap: 0.25rem; }
  .nav__item.is-active::before { display: none; }
  .nav__item span { display: none; }
  .sidebar__foot { display: none; }   /* no room for it in the horizontal bar */
  .topbar { flex-direction: column; padding: 1.5rem 19px 1rem; }
  .topbar__user { align-self: flex-start; }
  .content { padding: 0 19px 2rem; }
  .savebar { flex-direction: column; align-items: stretch; }
  .savebar__actions .btn { flex: 1; }
}

@media (max-width: 32rem) {
  .view-login { padding: 1.5rem 19px; }   /* 19px inset, per the container spec */
  .login { padding: 2.25rem 1.5rem; }
  .login__title { font-size: 1.75rem; }
  .login__sub { font-size: 1rem; margin-bottom: 1.75rem; }
  .tworow { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================== screen 3: submissions == */
/* Shared date-range filter (Submissions + Outcomes). */
.drange { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.drange__opt { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
.drange__opt:hover { background: #f8fafc; }
.drange__opt.is-active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.drange__custom { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.25rem; }
.drange__custom[hidden] { display: none; }
.drange__date { padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); font: inherit; font-size: 0.8125rem; color: var(--ink); cursor: pointer; }
.drange__dash { color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-bottom: 1.25rem; }
.stat { flex: 1 1 12rem; display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.125rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.stat__icon { display: grid; place-items: center; flex: none; width: 3.025rem; height: 3.025rem; border-radius: 0.9625rem; }
.stat__icon svg { width: 1.54rem; height: 1.54rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-blue { background: var(--ui-accent-soft); color: var(--ui-accent); } .t-violet { background: #ede9fe; color: #7c3aed; }
.t-green { background: #dcfce7; color: #16a34a; } .t-orange { background: #ffedd5; color: #ea580c; }
.t-viewed { background: #f1ebfe; color: #8106f0; }   /* Viewed */
.t-slate { background: #f1f5f9; color: #64748b; }
.t-pink { background: #fce7f3; color: #db2777; }
.t-treated { background: #16a34a; color: #dcfce7; }   /* inverted green */
.stat__body { display: grid; line-height: 1.25; }
.stat__body strong { font-size: 1.5rem; font-weight: 700; }
.stat__label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.stat__body small { font-size: 0.6875rem; color: var(--muted); }
.stat--period { flex: 0 0 auto; }
.stat--period strong { display: block; font-size: 0.875rem; }
.stat--period small { font-size: 0.75rem; color: var(--muted); }
.stat__cal, .stat__caret { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.subs-card { padding: 0.5rem 0.5rem 0; border: 1px solid var(--line); box-shadow: none; }
.subs-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0.75rem 0.875rem; }
.subtab { padding: 0.4375rem 0.75rem; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.subtab:hover { color: var(--ink-2); }
.subtab.is-active { color: var(--ui-accent); border: 1px solid var(--ui-accent); }
.subtab__n { color: inherit; opacity: 0.7; }
.subs-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.subs-search { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border: 1px solid var(--line); border-radius: 0.625rem; }
.subs-search svg { width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.subs-search input { border: 0; background: none; font: inherit; font-size: 0.8125rem; outline: none; width: 11rem; }

.subs-head, .subrow { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr 1fr 1fr 0.9fr; align-items: center; gap: 0.75rem; }
.subs-head { padding: 0.625rem 1rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.subs-list { display: grid; }
.subrow { width: 100%; padding: 0.75rem 1rem; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: inherit; }
.subrow:hover { background: #f8fafc; }
.subrow__patient { display: flex; align-items: center; gap: 0.625rem; }
.subrow__name { font-size: 0.875rem; font-weight: 600; }
.subrow__mobile { font-size: 0.8125rem; color: var(--ink-2); }
.subrow__concern { font-size: 0.8125rem; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 0.5rem; }
.subrow__photos { display: flex; gap: 0.25rem; padding-left: 0.625rem; }
/* centre Status in its column, then nudge 15px left off Submitted */
.subrow__status, .subs-head span:nth-child(5) { justify-self: center; transform: translateX(-5px); }
.subrow__status .badge { white-space: nowrap; }
.subs-head span:nth-child(4) { padding-left: 0.625rem; }
.subrow__time, .subs-head span:nth-child(6) { transform: translateX(20px); }
.subrow__time { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted); }
.subrow__chev { width: 1rem; height: 1rem; fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.avatar--a { background: var(--ui-accent-soft); color: var(--ui-accent); } .avatar--b { background: #dcfce7; color: #16a34a; }
.avatar--c { background: #fef3c7; color: #d97706; } .avatar--d { background: #dbeafe; color: #2563eb; }
.avatar--e { background: #fce7f3; color: #db2777; }
.avatar--lg { width: 3.25rem; height: 3.25rem; font-size: 1rem; }

.badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
/* Submission statuses. Automatic: new → sent → consult → booking. Manual:
   booked, treated (solid = the win), not interested (grey). */
.s-new { background: var(--ui-accent-soft); color: var(--ui-accent); }
.s-sent { background: #dcfce7; color: #16a34a; }
/* A text reply: answered, but no consultation produced — quieter than Sent on purpose. */
.s-replied { background: #eef2f7; color: #64748b; }
.s-consult { background: #f1ebfe; color: #8106f0; }   /* Viewed */
.s-booking { background: #ffedd5; color: #ea580c; }
.s-booked { background: #fce7f3; color: #db2777; }
.s-noshow { background: #fee2e2; color: #dc2626; }
.s-treated { background: #16a34a; color: #fff; }
.s-not { background: #f1f5f9; color: #64748b; }
.s-record { background: #f5f3ff; color: #5b21b6; }
.s-preparing { background: #fef3c7; color: #b45309; }   /* Sent, video still rendering */

/* Preparing badge: a subtle spinning ring replaces the static status dot. */
.badge.is-preparing::before { display: none; }
.badge__spin {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .badge__spin { animation: none; opacity: 0.55; }
}

/* Inline status control on each submission row. */
.subrow__status { position: relative; }
.status-pill { border: 0; cursor: pointer; font: inherit; }
.status-pill__caret { width: 0.85rem; height: 0.85rem; margin-left: 0.0625rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.subrow__status.is-open .status-pill__caret { transform: rotate(180deg); }
.status-menu { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); z-index: 30; min-width: 12.5rem; padding: 0.375rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.625rem; box-shadow: var(--shadow-card); }
.status-menu__label { margin: 0.125rem 0.375rem 0.3125rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.status-opt { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4375rem 0.5rem; border: 0; border-radius: 0.4375rem; background: none; font: inherit; font-size: 0.8125rem; text-align: left; color: var(--ink); cursor: pointer; }
.status-opt:hover { background: #f8fafc; }
.status-opt.is-current { font-weight: 600; background: #f8fafc; }
.status-opt__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.status-opt__dot.s-booked { background: #db2777; }
.status-opt__dot.s-noshow { background: #dc2626; }
.status-opt__dot.s-treated { background: #16a34a; }
.status-opt__dot.s-not { background: #64748b; }
.status-opt--clear { color: var(--muted); border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.5rem; border-radius: 0; }
.status-pill--empty { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px dashed var(--line); border-radius: 999px; background: none; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.status-pill--empty:hover { border-color: #cbd5e1; color: var(--ink-2); }

/* Segmented toggle (worklist filter) */
.seg { display: inline-flex; gap: 0.125rem; padding: 0.1875rem; background: #f1f5f9; border-radius: 0.625rem; }
.seg__opt { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 0; border-radius: 0.5rem; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg__opt.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.seg__n { font-size: 0.75rem; color: var(--muted); }
.seg__opt.is-active .seg__n { color: var(--ui-accent); }

/* Outcomes page worklist */
.olist-bar { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.olist-head, .orow { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1.2fr 0.55fr; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; }
.olist-head span:last-child { white-space: nowrap; }
.olist-head { font-size: 0.75rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.olist { display: grid; }
.olist-empty { margin: 0; padding: 1.25rem; font-size: 0.8125rem; color: var(--muted); }
.orow { border-bottom: 1px solid var(--line); }
.orow:last-child { border-bottom: 0; }
.orow__patient { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.orow__name { font-size: 0.875rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__mobile { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--ink-2); text-decoration: none; min-width: 0; }
.orow__mobile:hover { color: var(--ui-accent); }
.orow__mobile svg { flex: none; width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.orow__outcome { position: relative; }
.orow__outcome .status-menu { left: 0; transform: none; }
.orow__outcome.is-open .status-pill__caret { transform: rotate(180deg); }
.orow__age { font-size: 0.8125rem; color: var(--muted); }

/* Grade screen Actions menu */
.grade-actions { position: relative; }
.grade-actions .btn__icon { transition: transform 0.15s; }
.grade-actions.is-open .btn__icon { transform: rotate(180deg); }
.grade-actions .status-menu { left: auto; right: 0; transform: none; }
.grade-edit[hidden], .grade-delete[hidden] { display: none; }
.grade-edit .status-opt svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }

.ph { width: 2.25rem; height: 1.75rem; border-radius: 0.375rem; flex: none; background: linear-gradient(135deg, #f1d6c4, #e7b9a3); }
.ph--a { background: linear-gradient(135deg, #f3d9c8, #e6b39c); } .ph--b { background: linear-gradient(135deg, #f4dbc9, #e8bda6); }
.ph--c { background: linear-gradient(135deg, #f1d6c4, #e2ad95); } .ph--d { background: linear-gradient(135deg, #f5ddca, #ebc0a9); }
.ph--e { background: linear-gradient(135deg, #f2d7c5, #e4b19a); }
/* Real submission photo thumbnails + empty slot (queue rows). */
.ph--img { object-fit: cover; background: #efe7de; }
.ph--empty { background: #f1ece6; border: 1px dashed #e0d6ca; }
.subs-loading { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
/* "X was moved to Y" after a location login moves a patient away (submissions.js). */
.subs-notice { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1rem; padding: 0.75rem 0.875rem 0.75rem 1rem; border: 1px solid #bbf7d0; border-radius: 0.875rem; background: #f0fdf4; font-size: 0.875rem; color: #14532d; }
.subs-notice span { flex: 1; }
.subs-notice__icon { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: #16a34a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.subs-notice__x { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 0; border-radius: 0.5rem; background: none; color: #15803d; cursor: pointer; }
.subs-notice__x:hover { background: #dcfce7; }
.subs-notice__x svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.subs-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; color: var(--muted); }
.subs-empty svg { width: 2.5rem; height: 2.5rem; stroke: currentColor; fill: none; opacity: 0.5; }
.subs-empty p { margin: 0; max-width: 24rem; font-size: 0.9rem; line-height: 1.5; }

.subs-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; font-size: 0.8125rem; color: var(--muted); }
.subs-foot__right { display: flex; align-items: center; gap: 1rem; }
/* The pager, bottom right, once a list runs past 50 (submissions.js PAGE_SIZE). */
.subs-pager { display: inline-flex; align-items: center; gap: 0.5rem; }
.subs-pager[hidden] { display: none; }
.subs-pager__info { margin-right: 0.25rem; }
.subs-pager__page { font-weight: 600; color: var(--ink-2); }
.subs-pager__btn { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; color: var(--ink-2); cursor: pointer; }
.subs-pager__btn:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.subs-pager__btn:disabled { opacity: 0.4; cursor: default; }
.subs-pager__btn svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.subs-pager__btn[data-page="prev"] svg { transform: rotate(180deg); }
.subs-perpage { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.subs-perpage select { padding: 0.3125rem 0.5rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); font: inherit; font-size: 0.8125rem; color: var(--ink); cursor: pointer; }
.pager { display: flex; align-items: center; gap: 0.25rem; }
.pager__pg, .pager__nav { min-width: 1.75rem; height: 1.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.pager__pg.is-active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.pager__gap { padding: 0 0.25rem; color: var(--muted); }

/* ==================================================== screen 4: grade == */
.backlink { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.875rem; font-weight: 600; color: var(--ui-accent); text-decoration: none; margin-bottom: 0.5rem; }
.backlink svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Header on the left; meta pulled out of flow to the bottom-right so it sits
   just above the cards without pushing the header text up. */
.grade-top { position: relative; margin-bottom: 45px; }
.grade-header { margin: 0; }
.grade-title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.grade-subtitle { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); }
.grade-meta { position: absolute; right: 0; bottom: -31px; display: flex; align-items: center; gap: 0.875rem; }
.grade-meta__info { padding: 0.4375rem 0.875rem; border: 1px solid var(--line); border-radius: 0.625rem; font-size: 0.8125rem; color: var(--muted); }
.grade-delete { color: var(--ink); }
/* A patient moved here from another location (app/transfer.py). */
.grade-moved { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0 0 1.25rem; padding: 0.875rem 1rem; border: 1px solid #c7d2fe; border-radius: 0.875rem; background: #eef2ff; }
.grade-moved[hidden] { display: none; }
.grade-moved p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #312e81; }
.grade-moved p + p { margin-top: 0.25rem; }
.grade-moved__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; fill: none; stroke: #4338ca; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.move-sum { margin: 0.25rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.4375rem; }
.move-sum li { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.move-reason { min-height: 4.5rem; }
.move-err { margin: 0; font-size: 0.8125rem; color: #b91c1c; }
.move-err[hidden] { display: none; }

.grade { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 1.25rem; align-items: start; }
.grade-patient, .grade-form { padding: 1.5rem; border: 1px solid var(--line); box-shadow: none; }
/* The panel scrolls with the page, then its bottom (the Download button) pins to the bottom of
   the screen once reached — driven by updateStickyPanel() in grade.js (CSS sticky proved
   unreliable inside this grid). The column holds the reserved space; the aside is translated. */
.grade-patient-col { align-self: stretch; }
.grade-patient { will-change: transform; }
.grade-h { margin: 0 0 1.25rem; font-size: 1.0625rem; font-weight: 700; }
.patient-id { display: flex; gap: 0.875rem; align-items: center; }
.patient-id > div { display: grid; gap: 0.25rem; }
.patient-id strong { font-size: 1.0625rem; font-weight: 700; }
.patient-phone { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink); font-weight: 500; font-size: calc(0.875rem - 1px); margin-top: 5px; }
.patient-phone svg, .patient-sms svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.patient-sms { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); font-size: 0.8125rem; }
.grade-sep { height: 1px; background: var(--line); margin: 1.25rem 0; }
.grade-sub { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 700; }
.grade-hint { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--muted); }
.grade-aside { display: flex; align-items: center; gap: 0.375rem; margin: -0.375rem 0 0.75rem; font-size: 0.75rem; color: var(--muted); }
.grade-aside svg { flex: none; width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.concern-box { margin: 0 0 1.25rem; padding: 0.875rem 1rem; background: var(--ui-accent-soft); border-radius: 0.75rem; font-size: 0.875rem; color: var(--ink-2); }
/* grade screen — all submitted photos in a labelled grid, click to enlarge */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.ph-cell { position: relative; padding: 0; border: 0; background: #eef1f6; border-radius: 0.625rem; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; }
.ph-cell__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.12s; }
.ph-cell:hover .ph-cell__img { opacity: 0.88; }
.ph-cell.is-active { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
/* large preview of the selected shot */
.photo-main { position: relative; height: 13rem; border-radius: 0.875rem; margin-bottom: 1rem; cursor: zoom-in; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255,255,255,0.9); cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center; }
.photo-nav:hover { background: #fff; }
.photo-nav--l { left: 0.625rem; } .photo-nav--r { right: 0.625rem; }

.gstep { padding: calc(1.25rem + 5px) 0; border-top: 1px solid var(--line); }
.gstep:first-of-type { border-top: 0; padding-top: 0; }
.gstep h3 { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 700; }
.gstep h3 span { color: var(--ink); }
.gstep h3 em { font-weight: 400; font-style: normal; color: var(--muted); font-size: 0.8125rem; }

.gselect { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-field); cursor: pointer; min-height: 3rem; }
/* "Present as a Smile Makeover" row — appears under the treatment selector once 2+ are chosen. */
.gstep__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.gstep__head h3 { min-width: 0; }
/* "Present as a Smile Makeover": top right of the treatment section; its explanation on the i. */
.gmakeover { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; margin-top: -0.125rem; }
.gmakeover[hidden] { display: none; }
.gmakeover__lbl { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; cursor: default; }
.gmakeover__info { display: inline-flex; color: var(--muted); cursor: help; border-radius: 50%; }
.gmakeover__info svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gmakeover__info:hover, .gmakeover__info:focus-visible { color: var(--ui-accent); outline: none; }
.gmakeover__info:focus-visible { box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.gmakeover .toggle { margin-left: 0.25rem; }
.gmakeover__tip {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20;
  width: max-content; max-width: 16rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  background: #0f172a; color: #fff; font-size: 0.75rem; line-height: 1.4; font-weight: 400; white-space: normal;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); pointer-events: none;
  visibility: hidden; opacity: 0; transform: translateY(-2px); transition: opacity 0.12s, transform 0.12s, visibility 0s 0.12s;
}
.gmakeover__info:hover .gmakeover__tip, .gmakeover__info:focus-visible .gmakeover__tip {
  visibility: visible; opacity: 1; transform: none; transition: opacity 0.12s, transform 0.12s, visibility 0s;
}
.gselect.is-open { border-color: var(--ui-accent); }
.gselect__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1; }
.gselect__ph { color: var(--muted); font-size: 0.875rem; }
.gselect__caret { width: 1.1rem; height: 1.1rem; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 1.7; transition: transform 0.15s; }
.gselect.is-open .gselect__caret { transform: rotate(180deg); }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.625rem; background: #f1f5f9; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.chip b { color: var(--muted); cursor: pointer; }
/* payment options (financing settings) */
#pay-list { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 0.75rem; }
#pay-list:empty { margin: 0; }
.planadd { margin-top: 0.25rem; }
.payicon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }
.payrow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.payrow__sum { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planrow.is-open .payrow__sum { display: none; }
.payrow.is-off .payicon, .payrow.is-off .payrow__txt { opacity: 0.5; }
.pay-ta { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); font: inherit; font-size: 0.875rem; line-height: 1.45; color: var(--ink); resize: none; }
.pay-ta:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(82,94,245,0.14); }
.payrow__actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.payrow__actions .btn { flex: none; padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }
/* per-plan payment-option picker (services) */
.paydrop { border: 1px solid var(--line); border-radius: var(--r-field); overflow: hidden; background: var(--surface); }
.paydrop__trigger { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; cursor: pointer; list-style: none; font-size: 0.875rem; color: var(--ink); }
.paydrop__trigger::-webkit-details-marker { display: none; }
.paydrop__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paydrop__chev { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.paydrop[open] .paydrop__chev { transform: rotate(180deg); }
.paydrop__panel { border-top: 1px solid var(--line); padding: 0.35rem; display: flex; flex-direction: column; }
.paychk { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; color: var(--ink); }
.paychk:hover { background: #f8fafc; }
.paychk input { width: 1rem; height: 1rem; accent-color: var(--ui-accent); }
.payterm { position: relative; }
.pay-term-input.is-hinting { padding-right: 9rem; }
.payterm__hint { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.68rem; font-weight: 600; color: var(--ui-accent); background: #fff; padding: 0.12rem 0.4rem; border-radius: 0.35rem; box-shadow: 0 0 0 1px rgba(82, 94, 245, 0.25); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.chips:empty { display: none; }
.chip__x { color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; font-style: normal; font-weight: 700; }
.chip__x:hover { color: var(--ink); }
.paypv { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--r-field); background: var(--ui-accent-soft); }
.paypv__cap { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); text-transform: uppercase; }
.paypv__amt { font-size: 1.35rem; font-weight: 700; color: var(--ui-accent); }

/* ---- structured payment: term chips ---- */
/* Unified payment-option sections (deposit / instalments / term / interest) */
.payseg { border: 1px solid var(--line); border-radius: 0.75rem; margin-top: 0.75rem; }
.payseg__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; }
.payseg__title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.payseg__body { display: none; padding: 0 0.85rem 0.85rem; }
.payseg.is-on .payseg__body { display: block; }
.payseg.is-on { border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--line)); }
.payseg .field { margin-top: 0.25rem; margin-bottom: 0; }
.pay-depamt { display: flex; gap: 0.5rem; align-items: stretch; }
.pay-depamt .input { flex: 1 1 auto; }
.pay-seg2 { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: var(--r-field); overflow: hidden; }
.pay-modebtn { font: inherit; font-size: 0.9375rem; font-weight: 600; min-width: 2.5rem; padding: 0 0.6rem; border: 0; background: #fff; color: var(--muted); cursor: pointer; }
.pay-modebtn + .pay-modebtn { border-left: 1px solid var(--line); }
.pay-modebtn.is-sel { background: var(--ui-accent); color: #fff; }
.pay-termrange { display: flex; align-items: center; gap: 0.5rem; }
.pay-termrange .input { flex: 1 1 auto; }
.pay-termrange__to { color: var(--muted); font-size: 0.875rem; }
.payradios { display: flex; gap: 1.25rem; flex-wrap: wrap; padding-top: 0.15rem; }
.payradio { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; color: var(--ink); cursor: pointer; }
.payradio input { accent-color: var(--ui-accent); }

/* ---- structured payment: live patient preview ---- */
.payrow__preview { margin-top: 0.25rem; padding: 0.85rem; border: 1px dashed var(--line); border-radius: var(--r-field); background: #f8fafc; }
.paypreview__label { margin: 0 0 0.55rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.paypreview__card { max-width: 17rem; border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.95rem; background: #fff; }
.paypreview__top { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
.paypreview__ic { width: 2.2rem; height: 2.2rem; border-radius: 0.55rem; display: block; flex: 0 0 auto; }
.paypreview__name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.paypreview__lead { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.paypreview__detail { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
.paypreview__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 0.6rem; font-size: 0.8rem; background: #f4f6fb; }
.paypreview__price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.paypreview__cadence { color: var(--muted); white-space: nowrap; }
.paypreview__card[data-kind="bnpl"] .paypreview__foot { background: #fdeaf1; }
.paypreview__card[data-kind="afterpay"] .paypreview__foot { background: #e4f7ee; }
.paypreview__card[data-kind="finance"] .paypreview__foot { background: #efeafe; }
.paypreview__card[data-kind="deposit_plan"] .paypreview__foot { background: #fdf0dd; }
.paypreview__card[data-kind="payment_plan"] .paypreview__foot { background: #e6f5e6; }
.paypreview__card[data-kind="zip"] .paypreview__foot,
.paypreview__card[data-kind="pay_in_full"] .paypreview__foot { background: #e7efff; }
.paypreview__note { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--muted); }
.paypv__term { font-size: 0.8125rem; color: var(--ink-2); }
.paypv__hint { font-size: 0.8125rem; color: var(--muted); }

.gselect__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 15rem; overflow-y: auto; padding: 0.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--shadow-card); }
.gopt { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: 0.5rem; background: none; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.gopt:hover { background: #f8fafc; }
.gopt__icon { width: 1.75rem; height: 1.75rem; border-radius: 0.4375rem; flex: none; object-fit: contain; }
.gopt span { flex: 1; }
.gopt__check { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--ui-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.gopt.is-selected { background: var(--ui-accent-soft); }
/* Treatment cap (max 4): once full, the still-unselected options can't be added. */
.gselect__menu.is-capped .gopt:not(.is-selected) { opacity: 0.45; pointer-events: none; }
.gselect__menu.is-capped::before { content: "Up to 4 treatments — remove one to add another."; display: block; padding: 0.375rem 0.625rem 0.5rem; color: var(--muted); font-size: 0.75rem; }
.gopt.is-selected .gopt__check { opacity: 1; }
.gopt--empty { color: var(--muted); font-size: 0.8125rem; cursor: default; }
.gopt--empty:hover { background: none; }
.gopt__link { color: var(--ui-accent); font-weight: 600; text-decoration: none; cursor: pointer; }
.gopt__link:hover { text-decoration: underline; }

/* Staff selector (grade step 1) — reuses .gselect/.gopt, adds a small avatar. */
#gstaff-label { align-items: center; }
.gstaff__av { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 0.6875rem; font-weight: 700; }
.gopt .gstaff__av { flex: none; }
.gstaff__av--photo { padding: 0; overflow: hidden; background: #eef2f7; }
.gstaff__av--photo img { width: 100%; height: 100%; object-fit: cover; }
.gstaff__name { font-size: 0.875rem; color: var(--ink); }

.plan-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.plantab { padding: 0.625rem 0.875rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.plantab.is-active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.plans-empty { margin: 0; padding: 0.75rem 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.plan { position: relative; display: grid; gap: 0.375rem; padding: 0.875rem; border: 1.5px solid var(--line); border-radius: 0.875rem; cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.plan__radio { position: absolute; top: 0.875rem; left: 0.875rem; width: 1.1rem; height: 1.1rem; border: 2px solid #cbd5e1; border-radius: 50%; }
.plan.is-selected .plan__radio { border-color: var(--ui-accent); box-shadow: inset 0 0 0 3px var(--ui-accent); }
.plan__head { padding-left: 1.75rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.plan__head strong { font-size: 0.875rem; font-weight: 700; }
.plan__desc { padding-left: 1.75rem; font-size: 0.75rem; color: var(--muted); }
/* Icon + text. When the text wraps ("3 – 5 appointments over 3 – 6 months") the icon keeps its
   size and stays level with the FIRST line: flex: none stops it being squeezed, and 1lh centres it
   on one line's height rather than on the whole block. */
.plan__row { display: flex; align-items: flex-start; gap: 0.375rem; padding-left: 1.75rem; font-size: 0.8125rem; color: var(--ink-2); }
.plan__row svg { flex: none; width: 0.9375rem; height: 0.9375rem; margin-top: calc((1lh - 0.9375rem) / 2); fill: none; stroke: var(--muted); stroke-width: 1.7; }
.pill { padding: 0.0625rem 0.4375rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; }
.pill--rec { background: var(--ui-accent-soft); color: var(--ui-accent); }
.grade-note { display: flex; align-items: center; gap: 0.4375rem; margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--muted); }
.grade-note svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: var(--muted); stroke-width: 1.7; }

.gstep .counter { margin-top: 0.375rem; text-align: right; font-size: 0.75rem; color: var(--muted); }

/* Finding notes — AI-drafted, editable chips, colour-coded + divided by category. */
.notes { display: grid; gap: 0.6rem; }
/* AI suggestions still on their way, just added, or not coming (grade.js lateAnalysis). */
.ai-status { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.625rem; font-size: 0.8125rem; line-height: 1.4; background: #f1f5f9; color: var(--ink-2); }
.ai-status[hidden] { display: none; }
.ai-status--wait { background: #eef2ff; color: #3730a3; }
.ai-status--done { background: #ecfdf5; color: #065f46; }
.ai-status__spin { flex: none; width: 0.875rem; height: 0.875rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ai-spin 0.8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.notes__grp { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.7rem 0.8rem; transition: opacity 0.12s; }
.notes__grp--concern { background: #eff6ff; border-color: #dbeafe; }
.notes__grp--positive { background: #ecfdf5; border-color: #d1fae5; }
.notes__grp--reason { background: #fefce8; border-color: #fde68a; }
.notes__reasons { display: flex; flex-direction: column; gap: 0.7rem; }   /* one standalone reason box per treatment */
.notes__grp.is-muted { opacity: 0.55; }
.notes__head { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.55rem; }
.notes__grp--concern .notes__head { color: #2563eb; }
.notes__grp--positive .notes__head { color: #059669; }
.notes__grp--reason .notes__head { color: #b45309; }
.notes__svc { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-2); }
.notes__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* "Why the treatment fits" — one reason sub-group per selected treatment. */
.notes__reasongrp + .notes__reasongrp { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed #fde68a; }
.notes__subhead { display: block; font-size: 0.72rem; font-weight: 600; color: #92660c; margin-bottom: 0.4rem; }
.notes__reasonempty { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.notes__hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.notes__chips:not(:empty) { margin-bottom: 9px; }
.fchip { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0.28rem 0.3rem 0.28rem 0.62rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; color: var(--ink); }
.fchip b { cursor: pointer; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-weight: 600; font-size: 0.95rem; line-height: 1; }
.fchip b:hover { background: #fee2e2; color: #dc2626; }
/* the reason the AI tied to the patient's stated concern */
/* inline custom-treatment chip + menu option */
.chip--custom { padding-left: 0.45rem; }
.chip__customname { border: 0; background: transparent; font: inherit; font-size: inherit; color: inherit; min-width: 8.5rem; outline: none; }
.gopt--custom { color: var(--ui-accent); font-weight: 600; }
/* At a cap: still visible so the ceiling is discoverable, but plainly not clickable. */
.gopt--custom.is-disabled { color: var(--muted); font-weight: 500; cursor: not-allowed; opacity: 0.65; }
.gopt__plus { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 0.1rem; }
.notes__add { width: 100%; padding: 0.42rem 0.6rem; border: 1px dashed rgba(100,116,139,0.4); border-radius: 0.5rem; background: rgba(255,255,255,0.55); font: inherit; font-size: 0.82rem; color: var(--ink); }
.notes__add::placeholder { color: #94a3b8; }
.notes__add:focus { outline: none; border-style: solid; border-color: var(--ui-accent); background: #fff; }
.notes__add:disabled { opacity: 0.5; cursor: not-allowed; }
/* Over the cap. The input is disabled at the same time, and 0.5 opacity on grey placeholder
   text made the one message that blocks sending the hardest thing on the screen to read. Full
   opacity, and the same red as the submissions badge (#ef4444). */
.notes__add--over { border-color: rgba(239, 68, 68, 0.45); }
.notes__add--over::placeholder { color: #ef4444; opacity: 1; }
.notes__add--over:disabled { opacity: 1; }
/* One-time "Press enter to submit" nudge, sitting at the input's right edge. */
.notes__addwrap { position: relative; display: block; }
.notes__add--hinting { padding-right: 9rem; }
.notes__enterhint { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.68rem; font-weight: 600; color: var(--ui-accent); background: #fff; padding: 0.12rem 0.4rem; border-radius: 0.35rem; box-shadow: 0 0 0 1px rgba(82, 94, 245, 0.25); white-space: nowrap; }

/* Video script preview modal (timestamped segments). */
.vsp { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.5); overflow: auto; }
.vsp__panel { width: min(40rem, 100%); max-height: 85vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.vsp__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--line); }
.vsp__head h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.vsp__sub { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.vsp__head .editor__close { margin-left: auto; flex: none; }
.vsp__body { padding: 1rem 1.375rem 1.375rem; overflow-y: auto; display: grid; gap: 0.875rem; }
.vsp__seg { display: grid; gap: 0.35rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--line); }
.vsp__seg:last-child { border-bottom: 0; padding-bottom: 0; }
.vsp__meta { display: flex; align-items: center; gap: 0.6rem; }
.vsp__time { font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 700; color: var(--ui-accent); background: var(--ui-accent-soft); padding: 0.12rem 0.45rem; border-radius: 0.35rem; }
.vsp__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); }
.vsp__label--muted { color: var(--muted); }
.vsp__kind { margin-left: auto; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 0.35rem; }
.vsp__kind--tts { color: #204fad; background: rgba(32, 79, 173, 0.1); }
.vsp__kind--clip { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }
.vsp__seg--clip .vsp__text { color: var(--ink-2); }
.vsp__text { margin: 0; font-size: 0.875rem; color: var(--ink); line-height: 1.5; }
.vsp__seg--clip .vsp__text { color: var(--muted); }   /* fixed clip lines read quieter */
.vsp__text--gen { color: #204fad; font-weight: 500; background: rgba(32, 79, 173, 0.08); border-radius: 0.3rem; padding: 0.1rem 0.35rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.vsp__genkey { color: #204fad; background: rgba(32, 79, 173, 0.12); border-radius: 0.3rem; padding: 0.02rem 0.3rem; font-weight: 700; }
.vsp__body > h4 { margin: 0.1rem 0 -0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vsp__screens { margin-top: 0.35rem; padding-top: 0.875rem; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; }
.vsp__screens h4 { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vsp__screens .vsp__sub { margin: -0.35rem 0 0.15rem; }
.vsp__group { display: grid; gap: 0.4rem; }
.vsp__glabel { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ui-accent); }
.vsp__phrase { display: grid; gap: 0.1rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 0.55rem; background: #f8fafc; }
.vsp__phrase b { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.vsp__phrase span { font-size: 0.82rem; color: var(--ink-2); line-height: 1.4; }
.vsp__stmt { display: block; margin-top: 0.3rem; font-size: 0.8rem; font-style: italic; line-height: 1.4; color: #204fad; }
.notes-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.notes-tools .btn.is-busy { opacity: 0.6; pointer-events: none; }
.notes-preview { margin-top: 0.75rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.75rem; background: #f8fafc; }
.notes-preview__label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.5rem; }
.notes-preview__label em { font-weight: 400; font-style: normal; color: var(--muted); }
.notes-preview__ta { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--surface); font: inherit; font-size: 0.875rem; line-height: 1.55; color: var(--ink); resize: vertical; min-height: 6rem; }
.notes-preview__ta:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(82,94,245,0.14); }
.notes-preview__bar { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 0.5rem; }
.notes-preview__stale { margin-right: auto; font-size: 0.78rem; font-weight: 600; color: #b45309; }
/* Spoken-script editor — the real per-line video script; generated lines editable, fixed clips read-only. */
.spoken-script { display: flex; flex-direction: column; gap: 0.6rem; }
.sl__loading { margin: 0.4rem 0; font-size: 0.85rem; color: var(--muted); }
.sl__group { display: flex; flex-direction: column; gap: 0.3rem; }
.sl__section { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }
/* Section titles colour-matched to their finding-notes input sections (see .notes__grp--* heads). */
.sl__section--noticed { color: #2563eb; }
.sl__section--reassurance { color: #059669; }
.sl__section--recommended { color: #b45309; }
.sl__line { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; }
.sl__ta { flex: 1; resize: none; overflow: hidden; min-height: 2.1rem; font: inherit; font-size: 0.875rem; line-height: 1.45; color: var(--ink); background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.4rem 0.6rem; }
.sl__ta:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(82,94,245,0.14); }
/* §5 special-offer chips (grading) — match the concern/positive .fchip pill look. */
.goffer { display: block; margin-top: 5px; }   /* 5px extra spacing under the "5. Optional special offer" title */
.goffer__field:last-child { margin-bottom: 0; }
/* Label sits INLINE (to the left) with the chip / input field, coloured black. */
.goffer__field { display: flex; align-items: center; gap: 0.75rem; margin-bottom: calc(1.25rem - 10px); }
.goffer__field .field__label { margin: 0; flex: 0 0 auto; min-width: 8.5rem; color: #000; }
.goffer__field .input { flex: 1 1 auto; }
.goffer__field .counter { flex: 0 0 auto; }
.goffer__note { margin-bottom: 0.7rem; }
.goffer__field .goffer__chip { display: inline-flex; align-items: center; }
.goffer__chip-title { font-weight: 700; color: var(--ink); }
.goffer__chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.34rem 0.28rem 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--ink); max-width: 100%; }
.goffer__chip b { font-weight: 700; }
.goffer__chip--desc { font-weight: 500; }
.goffer__chip--desc span { white-space: normal; }
.goffer__x { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: 999px; color: var(--muted); font-weight: 700; line-height: 1; }
.goffer__x:hover { background: #fee2e2; color: #dc2626; }
.goffer__in { flex: 1 1 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--surface, #fff); font: inherit; font-size: 0.875rem; color: var(--ink); }
.goffer__in:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(82,94,245,0.12); }
.goffer__note { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.05rem 0 calc(0.05rem + 20px); font-size: 0.76rem; line-height: 1.4; color: var(--muted); }
.goffer__note-ic { flex: none; width: 0.92rem; height: 0.92rem; margin-top: 0.08rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.8; }
/* The service the offer was inherited from. Weight only -- a colour change here would read
   as a link, and it is not clickable. */
.goffer__note-svc { font-weight: 600; color: var(--ink); }

/* custom-controls panel inside step 2 */
.custom-block + .custom-block { margin-top: 1.25rem; }
.custom-block h4 { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700; }
.custom-block h4 em.muted { font-weight: 400; font-style: normal; color: var(--muted); font-size: 0.8125rem; }
.custom-block__hint { margin: -0.4rem 0 calc(0.75rem + 5px); font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }

.custom-block .feetabs { margin-bottom: 0.875rem; }
.price-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr 1.3fr; }
/* single mode: drop the upper-bound field, keep the rest aligned */
.price-row.is-single { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.price-row.is-single #fee-high, .price-row.is-single .pb-fee-high { display: none; }

/* Per-service plan blocks (§3 repeats once per selected treatment). */
.planblock + .planblock { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.planblock__title { display: flex; align-items: center; gap: 0.5rem; margin: 20px 0 0.9rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.planblock__icon { width: 2.25rem; height: 2.25rem; flex: none; }

/* Duration slider (One off treatment → 3 years) */
.durval { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 0.75rem; }
.durslider { position: relative; height: 1.5rem; }
.durslider__track, .durslider__fill { position: absolute; top: 50%; transform: translateY(-50%); height: 0.375rem; border-radius: 999px; pointer-events: none; }
.durslider__track { left: 0; right: 0; background: #e2e8f0; }
.durslider__fill { background: var(--ui-accent); }
.durslider__input { -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; background: transparent; pointer-events: none; }
.durslider__input::-webkit-slider-runnable-track { height: 1.5rem; background: transparent; border: 0; }
.durslider__input::-moz-range-track { height: 1.5rem; background: transparent; border: 0; }
.durslider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.15rem; height: 1.15rem; margin-top: 0.175rem; border-radius: 50%; background: #fff; border: 2px solid var(--ui-accent); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); cursor: pointer; pointer-events: auto; }
.durslider__input::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; border: 2px solid var(--ui-accent); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); cursor: pointer; pointer-events: auto; }
.durslider.is-single .durslider__input--from { display: none; }
.durslider.is-single .durslider__input--to { pointer-events: auto; }
.durslider__ends { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }

/* The shared duration control (duration-control.js): Single visit / A few visits / Ongoing,
   used by each plan on the Services screen and each treatment's custom controls on grading. */
.dctl__kinds .feetab { padding-left: 0.75rem; padding-right: 0.75rem; }
.dctl__readout { margin-bottom: 0.25rem; }
.dctl__note { margin: 0 0 0.875rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.dctl__row + .dctl__row { margin-top: 1rem; }
.dctl__lbl { margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
/* Range / Exact: a small switch inside the Ongoing pane, not a second row of tabs */
.dctl__modes { display: inline-flex; gap: 0.25rem; margin: 0 0 0.75rem; padding: 0.1875rem; border-radius: 0.5rem; background: #f1f5f9; }
.dctl__modes .feetab { margin: 0; padding: 0.3125rem 0.75rem; border: 0; border-radius: 0.375rem; font-size: 0.75rem; }
.dctl__modes .feetab.is-active { background: #fff; color: var(--ui-accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.gfield { display: grid; gap: 0.375rem; }
.gfield label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.gdrop { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-field); font-size: 0.875rem; }
.gdrop svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.ginput { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-field); overflow: hidden; }
.ginput__pre { padding: 0 0.625rem; background: #f1f5f9; color: var(--muted); font-size: 0.75rem; font-weight: 600; align-self: stretch; display: flex; align-items: center; }
.ginput input { flex: 1; min-width: 0; padding: 0.625rem 0.75rem; border: 0; background: none; font: inherit; font-size: 0.875rem; outline: none; }
.ginput select { flex: 1; min-width: 0; padding: 0.625rem 1.9rem 0.625rem 0.75rem; border: 0; font: inherit; font-size: 0.875rem; outline: none; color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.7rem; }
/* Featured payment example: option 50%, term + monthly 25% each, on one row */
.payexrow { display: grid; gap: 0.75rem; grid-template-columns: 4fr 3fr 3fr; align-items: end; }
@media (max-width: 60rem) { .payexrow { grid-template-columns: 1fr; } }
/* Payment options + featured example, grouped in one tinted container with icon-badged headers */
.paysec { margin-top: 1.625rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  border-radius: var(--r-field); background: color-mix(in srgb, var(--brand) 4%, var(--surface)); display: grid; gap: 1.5rem; }
.paysec__block { display: grid; gap: 0.75rem; }
.paysec__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.paysec__badge { flex: none; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); }
.paysec__badge--sq { border-radius: 0.6rem; }
.paysec__badge--circle { border-radius: 50%; }
.paysec__ico { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.paysec__titles { display: grid; gap: 0.15rem; padding-top: 0.1rem; }
.paysec__titles h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.paysec__opt { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.paysec__sub { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.paysec__label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.ginput__count { flex: none; padding-right: 0.875rem; font-size: 0.75rem; color: var(--muted); }
/* subtle 12M/24M financing-term toggle tucked into the right of the monthly input */
.termmini { flex: none; align-self: center; display: inline-flex; gap: 2px; margin: 0 0.375rem; padding: 2px; border-radius: 7px; background: var(--ui-accent-soft); }
.termmini__opt { border: 0; background: none; font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; color: var(--muted); line-height: 1; padding: 3px 7px; border-radius: 5px; cursor: pointer; }
.termmini__opt.is-active { background: #fff; color: var(--ui-accent); box-shadow: 0 1px 2px rgba(30, 40, 90, 0.14); }
.termmini__opt:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }

/* combined (multi-service) payment options */
.combinedpay { gap: 0.85rem; }
.combinedpay[hidden] { display: none; }   /* .paysec sets display:grid, which otherwise beats [hidden] */

/* overall treatment time (multi-service): the estimate, or the dentist's own figure */
.planoverall { gap: 0.9rem; }
.planoverall[hidden] { display: none; }
.po-auto { display: grid; gap: 0.2rem; }
.po-auto__label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.po-auto__value { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.po-auto__note { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.combinedpay .cp-preview { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }
.combinedpay .cp-featured { flex: 1; width: 100%; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* The featured picker now sits BELOW the chips, so it needs the gap the label above it used
   to get from the field's own spacing. */
.gfield--spaced { margin-top: 1rem; }
.cp-chip--featured { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); }
.cp-chip--featured .chip__x { color: color-mix(in srgb, var(--brand) 55%, var(--muted)); }
.cp-chip__star { width: 0.8rem; height: 0.8rem; fill: currentColor; margin-right: -0.1rem; }
.cp-empty { font-size: 0.8125rem; color: var(--muted); }

/* ---- Overall treatment settings -------------------------------------------------------------
   Two or more treatments used to add two full-width panels, each with a heading, a sub-heading
   and stacked fields -- most of a screen to carry four facts. One card, two rows: the label on
   the left with what it is set to, the control on the right. */
.plansum { margin-top: 1.625rem; }
.plansum[hidden] { display: none; }
.plansum__title { margin: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.plansum__card {
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  border-radius: var(--r-field);
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
  /* Queried on its own width, not the viewport's. This card sits in the grade form column,
     which is roughly two thirds of the page — a viewport breakpoint stacked it at 1000px while
     the column it was in still had 700px to spare. */
  container-type: inline-size;
}
.plansum__row {
  /* The side column's own width is what places the divider: it is that column's left
     border, so widening the column moves the rule left. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, calc(20rem + 15px));
  align-items: center; gap: 0 1.125rem; padding: 1.125rem 1.25rem;
}
.plansum__row[hidden] { display: none; }   /* the grid above would otherwise beat [hidden] */
/* the rule only appears when there is genuinely a row above to divide from */
.plansum__row:not([hidden]) ~ .plansum__row:not([hidden]) {
  border-top: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line));
}
.plansum__badge {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand);
}
.plansum__ico { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plansum__main { display: grid; gap: 0.5rem; min-width: 0; }
.plansum__main--wide { grid-column: 2 / -1; }   /* the duration control takes the whole row */
.plansum__h { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.plansum__val { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.plansum__val strong { font-weight: 700; }
.plansum__note { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
/* The time row reserves the same 20rem side column as the payments row, for what is only a
   button — which is what pushed "Estimated from treatments above" onto a second line. It needs
   its own width and nothing more, and the middle column takes back the rest. */
.plansum__row.planoverall { grid-template-columns: auto minmax(0, 1fr) auto; }
.plansum__hint { margin: 0; font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
.plansum__side { display: grid; gap: 0.3125rem; min-width: 0; }
/* A rule between what is on the plan and which one of them is featured, as in the design. Only
   where there are two things to divide -- the action column is a button on its own. */
.plansum__side:not(.plansum__side--act) { padding-left: 23px; border-left: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line)); }
.plansum__side--act { justify-items: end; }
/* Grid items stretch, so the link was centring itself under the duration control. */
.plansum__main > .linkbtn { justify-self: start; }
.plansum__lab { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.plansum__pencil { width: 0.875rem; height: 0.875rem; margin-right: 0.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plansum .cp-preview { margin: 0; font-size: 0.75rem; color: var(--ink-2); }
.plansum .cp-featured { flex: 1; width: 100%; }
.plansum .po-ctl { margin: 0; }
/* Too narrow to hold both: the side column drops under the label rather than being crushed.
   620px is where the chips stop fitting beside a 20rem featured picker. */
@container (max-width: 635px) {
  .plansum__row { grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1rem; }
  .plansum__side { grid-column: 2 / -1; }
  .plansum__side:not(.plansum__side--act) { padding-left: 0; border-left: 0; }
  .plansum__side--act { justify-items: start; }
  .plansum__main--wide { grid-column: 2 / -1; }
}

.delivery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; margin-bottom: 1rem; }
@media (max-width: 860px) { .delivery { grid-template-columns: 1fr; } }
.dopt { position: relative; display: flex; gap: 0.75rem; padding: 1rem; border: 1.5px solid var(--line); border-radius: 0.875rem; cursor: pointer; }
.dopt input { position: absolute; opacity: 0; }
.dopt.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
/* Same tint and ink as the plan-summary badges (.plansum__badge), written the same way rather
   than as a fixed blue, so a practice whose brand colour is not blue gets both in step. The
   tile keeps its rounded square; only the colour was asked to match. */
.dopt__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); }
.dopt__icon--ai { background: var(--ui-accent); color: #fff; }
.dopt__icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dopt strong { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; }
.dopt small { display: block; margin-top: 0.25rem; font-size: 0.78125rem; color: var(--muted); }
/* Generated Video greyed out: the chosen grader has no welcome video (see syncWelcomeVideo). */
.dopt.is-disabled { cursor: not-allowed; opacity: 0.55; background: #f8fafc; }
.dopt-note { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0.75rem 0 0.25rem; padding: 0.75rem 0.875rem; border: 1px solid #fde68a; border-radius: 0.75rem; background: #fffbeb; }
.dopt-note[hidden] { display: none; }
.dopt-note p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #78350f; }
.dopt-note__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; fill: none; stroke: #b45309; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dopt-note__link { font-weight: 600; color: var(--ui-accent); white-space: nowrap; }
/* Config that drops down under the chosen delivery method (findings / message). */
.delivery-panel { margin: 0.25rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.delivery-panel__title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.delivery-panel .grade-hint { margin-top: 0; }
.sms-message { width: 100%; min-height: 6.5rem; padding: 0.75rem 0.875rem; border: 1.5px solid var(--line); border-radius: 0.75rem; background: #fff; font: inherit; font-size: 0.875rem; color: var(--ink); resize: vertical; box-sizing: border-box; }
.sms-message:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.sms-message::placeholder { color: var(--muted); }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.5rem; }
.pv-row strong { font-size: 0.8125rem; } .pv-row small { display: block; font-size: 0.75rem; color: var(--muted); }

/* Personal-video panel (record / upload) */
.pv-panel { margin-bottom: 1rem; }
/* The optional teeth map for a personal video. The toggle sits ABOVE record/upload because it
   and the chips under it are decided before pressing record — once recording starts the chips
   are the only interface and it is too late to configure them. */
.pvmap-toggle { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: #fff; cursor: pointer; }
.pvmap-toggle input { margin-top: 0.15rem; flex: none; accent-color: var(--ui-accent); }
.pvmap-toggle__text { display: grid; gap: 0.125rem; }
.pvmap-toggle__text strong { font-size: 0.8125rem; font-weight: 600; }
.pvmap-toggle__text small { font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
/* The map and the concern chips are the SAME elements the generated-video panel uses; they are
   moved here, not copied (see placeMapBlocks). This only gives them somewhere to sit. */
/* Nothing but a place to put the blocks. They are the same teeth map and the same concerns
   card the generated-video panel shows, each already in its own container, so wrapping them in
   a second grey box only announced that they had been moved. */
.pvmap-host { margin-bottom: 1rem; }
.pvmap-host[hidden] { display: none; }
/* The whole notes block moves here so its delegated listeners keep working (see
   placeMapBlocks); these are the parts of it a personal video has no use for. */
.notes--concerns-only .notes__grp--positive,
.notes--concerns-only .notes__reasons { display: none; }
.pvmap-anchor { display: none; }
.pv-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pv-choice__btn { display: grid; justify-items: center; gap: 0.25rem; padding: 1.25rem 1rem; border: 1.5px dashed var(--line); border-radius: 0.75rem; background: #f8fafc; color: var(--ink-2); font: inherit; cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
.pv-choice__btn:hover { border-color: #cbd5e1; background: #f1f5f9; }
.pv-choice__btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pv-choice__btn strong { font-size: 0.875rem; }
.pv-choice__btn small { font-size: 0.75rem; color: var(--muted); }
.pv-preview { display: grid; gap: 0.5rem; }
/* Sized by the video, not by the column.

   width:100% made the element a full-width strip whatever was in it, so a 16:9 recording sat
   letterboxed inside it with a black band down each side. A replaced element left to size
   itself scales to fit max-width/max-height with its own ratio intact — so the box IS the
   video, with no bands, and a portrait upload from a phone is handled by the same two caps. */
/* Shrink-wraps the video so the finding card can be placed against the PICTURE's box rather
   than the column's — the card's position is a fraction of the frame, and the frame is the
   video, not the space around it. */
/* justify-self, not inline-block: .pv-preview is a grid and grid items are blockified, so
   inline-block was silently ignored and this stretched to the full column -- which put the
   card's "corner of the frame" a long way from the corner of the picture. `start` lets it size
   to the video and sits it left, with the caption beneath. */
.pv-preview__frame { position: relative; justify-self: start; max-width: 100%; line-height: 0; }
/* The card replayed over a saved take. Same page the renderer captures, scaled to the preview,
   so this is the result at a smaller size rather than an illustration of it. */
.pvcard {
  position: absolute; z-index: 2; border: 0; border-radius: 10px; overflow: hidden;
  transform-origin: top left; background: #fff; pointer-events: none;
  box-shadow: 0 8px 22px rgba(6, 20, 50, 0.3);
}
.pvcard[hidden] { display: none; }
/* Our own fullscreen control. The native one fullscreens the <video>, which cannot carry the
   card with it; this fullscreens the frame, which holds both. */
/* Top right: the bottom right is the native control bar, and the card owns the top left. */
.pvfs {
  position: absolute; z-index: 3; right: 0.5rem; top: 0.5rem;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
  border: 0; border-radius: 0.5rem; background: rgba(10, 14, 23, 0.6); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.pv-preview__frame:hover .pvfs, .pvfs:focus-visible { opacity: 1; }
.pvfs svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pvfs:hover { background: rgba(10, 14, 23, 0.85); }
/* In fullscreen the frame IS the screen: centre the picture in it and let the video take the
   room, since its usual cap is sized for a preview in a column.

   The explicit 100%s matter. The preview rule leaves width and height auto and only caps them,
   which means the video renders at its INTRINSIC size and never grows -- so fullscreen opened a
   preview-sized picture marooned in black. Filling the screen and letting object-fit letterbox
   the picture inside it uses every pixel the ratio allows; the finding card is placed against
   the drawn picture (see pictureRect), not this box, so the two stay in step. */
.pv-preview__frame:fullscreen { display: grid; place-items: center; width: 100%; height: 100%; background: #000; }
.pv-preview__frame:fullscreen video {
  width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0;
}
.pv-preview__frame:fullscreen .pvfs { opacity: 1; top: 1rem; right: 1rem; }
/* controlsList="nofullscreen" is set on the element too; this is the belt to that's braces,
   since the native button fullscreens the <video>, which cannot carry the card with it. */
.pv-preview video::-webkit-media-controls-fullscreen-button { display: none; }
/* The actions sit left, under the video, now the filename is gone. */
.pv-preview__meta { justify-content: flex-start; }
.pv-preview video {
  /* Left, not centred: it lines up with the filename and the Findings block under it, which
     are both ranged left. A centred video floated free of everything around it. */
  display: block; margin-inline: 0;
  width: auto; height: auto; max-width: 100%; max-height: 20rem;
  border-radius: 0.75rem; background: #000;
}
/* Waiting on the re-encode: a blank box the size the video will be, rather than the browser's
   300x150 placeholder player. The <video> stays in the DOM and keeps retrying underneath it. */
.pv-preview.is-wait .pv-preview__frame {
  width: min(100%, 35.5rem); aspect-ratio: 16 / 9;
  background: #0f172a; border-radius: 0.75rem;
}
.pv-preview.is-wait video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; opacity: 0; }
.pv-preview.is-wait .pvfs { display: none; }
.pv-preview__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; }
.pv-preview__name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-preview__actions { display: flex; gap: 0.875rem; flex: none; }
.linkbtn--danger { color: var(--danger); }

/* Upload progress while the recording goes to R2. A frozen panel during a multi-minute upload
   of a phone-filmed consult reads as a broken page, which is the whole reason this exists. */
.pv-up { display: grid; gap: 0.5rem; padding: 1.75rem 1rem; justify-items: center; border: 1.5px dashed var(--line); border-radius: 0.75rem; background: #f8fafc; }
.pv-up__bar { width: 100%; max-width: 20rem; height: 0.375rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.pv-up__bar i { display: block; height: 100%; background: var(--ui-accent); border-radius: 999px; transition: width 0.15s linear; }
.pv-up__label { font-size: 0.8125rem; color: var(--muted); }

/* Which graphics cut in over a personal video, and when. Every time starts at Auto: the render
   places these from the transcript, and these controls exist to correct it, not to do the job. */
.pv-ov { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.pv-ov__title { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 600; }
.pv-ov__hint { margin: 0 0 0.75rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.pv-ov__row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: 0.625rem; background: #fff; margin-bottom: 0.5rem; cursor: pointer; }
.pv-ov__row input { margin-top: 0.15rem; flex: none; accent-color: var(--ui-accent); }
.pv-ov__text { display: grid; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.pv-ov__text strong { font-size: 0.8125rem; font-weight: 600; }
.pv-ov__text small { font-size: 0.75rem; color: var(--muted); }
.pv-ov__time { flex: none; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; white-space: nowrap; }
.pv-ov__items { display: grid; gap: 0.375rem; margin: -0.125rem 0 0.5rem 1.875rem; }
.pv-ov__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4375rem 0.625rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #f8fafc; font-size: 0.75rem; }
.pv-ov__itemname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
/* Reverting a pinned time to automatic is not destructive -- it should not read red. */
.pv-ov__reset { color: var(--muted); }

/* The findings bar: the whole interface for putting the teeth map into a personal consult.
   Placed directly UNDER the camera rather than off to one side, because every glance at a
   button is a glance away from the lens — the nearer the targets sit to it, the less the
   dentist looks away mid-sentence. */
.pvrec__findings { position: relative; padding: 0.875rem 1.375rem 0.625rem; }
.pvrec__caption.is-long { color: #fcd34d; }
/* Top right, on the same line as the first group's label, so the groups start at the top. */
.pvrec__findingshint { position: absolute; top: 0.875rem; right: 1.375rem; margin: 0; font-size: 0.75rem; line-height: 1.25rem; color: var(--muted); }
.pvrec__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Findings and plan cards as two labelled groups, a rule between them when both are there. */
.pvrec__grouplabel {
  margin: 0 0 0.4rem; font-size: 0.6875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.pvrec__group + .pvrec__group { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.pvrec__chip {
  padding: 0.5rem 0.875rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); font: inherit; font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.pvrec__chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.pvrec__chip.is-on {
  background: var(--ui-accent); border-color: var(--ui-accent); color: #fff;
}
/* The live card, in the corner it will occupy in the finished video. It is the same page the
   renderer captures, scaled to the preview — so this is not a mock-up of the result, it is the
   result at a smaller size. */
.pvrec__card {
  position: absolute; z-index: 2; border: 0; border-radius: 12px; overflow: hidden;
  transform-origin: top left; background: #fff; pointer-events: none;
  box-shadow: 0 10px 30px rgba(6, 20, 50, 0.32);
}
.pvrec__card[hidden] { display: none; }
/* The stage is 4:3 and crops the camera to fit. That is survivable for a welcome video, but not
   here: the card goes in the corner of the RECORDED frame, and a 4:3 crop of a 16:9 capture cuts
   75px off each side — enough that a card at the frame's own corner would not appear in the
   preview at all. The personal recorder therefore previews the frame it is actually recording.
   Scoped to the anchored variant so Practice Settings' recorder is left as it was. */
.pvrec--anchored .pvrec__stage { aspect-ratio: 16 / 9; }
.pvrec--anchored .pvrec__video { object-fit: contain; background: #0a0e17; }

/* Webcam recorder modal (premium) */
.pvrec { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.6); }
.pvrec__panel { width: min(42rem, 100%); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }

/* Anchored variant (grade screen): the panel is placed over the form column and the veil is
   four rectangles around the patient card, so the real photos and concern stay lit while
   everything else dims. The overlay keeps its own pointer events — the revealed card is meant
   to be READ, not clicked, because its thumbnails open a lightbox. */
/* overflow so the hole's 100vmax spread cannot reach past the viewport. It does not clip the
   panel: an ancestor only clips a fixed-position descendant when it has a transform.

   pointer-events: none is what makes the revealed card USABLE -- clicks land on the page
   underneath, so the thumbnails and the arrows still change the large photo while the dentist
   talks. The veils and the panel take their events back below; everything outside the hole is
   covered by a veil, so the only thing reachable through this is the card itself. */
.pvrec--anchored { display: block; padding: 0; background: transparent; overflow: hidden; pointer-events: none; }
.pvrec--anchored .pvrec__panel { pointer-events: auto; }
/* Above the veil. The veils are appended after the panel so they would otherwise paint over it
   — the right-hand one covers the form column, which is exactly where the panel sits, and the
   recorder came out dimmed. */
.pvrec--anchored .pvrec__panel { position: fixed; z-index: 1; max-height: calc(100vh - 2rem); overflow: auto; }
/* Scrolling (app.js toggles is-scroll): square right-hand corners, so the scrollbar meets them cleanly. */
.pvrec--anchored .pvrec__panel.is-scroll { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Transparent: these exist to catch clicks (and to close the recorder), not to be seen. The
   veil is painted by .pvrec__hole below, which is the only way to get a ROUNDED hole -- four
   rectangles can only ever make a square one. */
.pvrec__veil { position: fixed; z-index: 0; pointer-events: auto; }
/* The photo the dentist is talking about is still theirs to change; opening a full-screen
   zoom over a recording in progress is not. */
/* The zoom-in cursor lives on .photo-main, the CONTAINER — overriding it on the <img> inside
   did nothing, because the img has no cursor of its own and simply inherited it. */
html.pvrec-open .photo-main { cursor: default; }
html.pvrec-open .photo-hint__zoom { display: none; }
.pvrec__hole {
  position: fixed; z-index: 0; pointer-events: none;
  border-radius: var(--r-field);
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.6);
}
.pvrec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.375rem; }
.pvrec__head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.pvrec__sub { margin: 0.1875rem 0 0; font-size: 0.8125rem; color: var(--muted); }

.pvrec__stage { position: relative; aspect-ratio: 4 / 3; background: #0a0e17; overflow: hidden; }
.pvrec__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pvrec__video.is-mirror { transform: scaleX(-1); }
.pvrec__panel.is-review .pvrec__video { object-fit: contain; }
.pvrec__panel.is-review .pvrec__flip,
.pvrec__panel.is-review .pvrec__bar { display: none; }


.pvrec__flip { position: absolute; top: 0.875rem; right: 0.875rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.75rem; border: 0; border-radius: 999px; background: rgba(10, 14, 23, 0.55); backdrop-filter: blur(6px); color: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.pvrec__flip:hover { background: rgba(10, 14, 23, 0.8); }
.pvrec__flip svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pvrec__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  gap: 0.75rem; padding: 2.5rem 1rem 1rem;
  /* Painted at 70% of the bar's height, pinned to the bottom, rather than over the whole of
     it -- at full height it reached the dentist's shoulders. Sized rather than re-padded, so
     none of the controls move.

     The ramp runs the WHOLE of that band and only reaches full density at the very bottom. Two
     stops (transparent -> 0.9) would get there in a straight line, and a linear alpha ramp reads
     as a visible edge where it starts; these stops accelerate, so the top of the band is barely
     there and the dark gathers under the controls that need it. */
  background: linear-gradient(
      rgba(5, 8, 15, 0) 0%,
      rgba(5, 8, 15, 0.04) 18%,
      rgba(5, 8, 15, 0.12) 36%,
      rgba(5, 8, 15, 0.26) 53%,
      rgba(5, 8, 15, 0.45) 69%,
      rgba(5, 8, 15, 0.66) 84%,
      rgba(5, 8, 15, 0.86) 100%
    ) bottom / 100% 70% no-repeat;
}
.pvrec__dev { position: relative; display: flex; align-items: center; gap: 0.5rem; }
.pvrec__dev--mic { justify-content: flex-end; }
/* Icon and chevron only. The bar carried two lines of device name apiece — six words of
   chrome over the dentist's shoulder, to say something they look at once. The names live on
   the button's title and aria-label now (see setPillLabel). */
.pvrec__pill { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.4375rem 0.5rem; border: 0; border-radius: 0.625rem; background: rgba(15, 23, 42, 0.7); color: #fff; font: inherit; cursor: pointer; }
.pvrec__pilltext { display: none; }
.pvrec__pill:hover { background: rgba(15, 23, 42, 0.9); }
.pvrec__pill > svg:first-child { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pvrec__chev { flex: none; width: 0.85rem; height: 0.85rem; fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; }

.pvrec__center { display: grid; justify-items: center; gap: 0.4375rem; }
.pvrec__caption { margin: 0; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
/* The ring, and what sits in it. place-items centres the inner mark exactly -- measured at 0.00px
   offset on both axes -- so the ring is sized to sit closer to the mark rather than leaving a wide
   empty moat around it, which is what made a small stop square read as adrift.

   The ring is SOLID, and an SVG circle rather than a border. It was dashed, and read as sitting
   off-centre to three separate looks -- so the dashes went. Measuring said otherwise every time
   (0.00px on both axes, and the same again after the dash pattern was made symmetric), which is
   the point: a ring that keeps being seen as crooked is a bad ring whatever the numbers say, and
   a solid one cannot be. The circle stays SVG because its centre is the viewBox's centre by
   construction, independent of how a browser renders a border radius. */
.pvrec__rec { position: relative; display: grid; place-items: center; width: 2.772rem; height: 2.772rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); cursor: pointer; }
.pvrec__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pvrec__ring circle { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; }
.pvrec__rec:hover { background: rgba(255, 255, 255, 0.16); }
.pvrec__rec span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #ef4444; transition: width 0.15s, height 0.15s, border-radius 0.15s; }
.pvrec__rec.is-recording span { width: 1.04rem; height: 1.04rem; border-radius: 0.26rem; }

.pvrec__meter { display: inline-flex; align-items: flex-end; gap: 0.1875rem; height: 1.25rem; }
.pvrec__meter i { width: 0.25rem; border-radius: 0.125rem; background: rgba(255, 255, 255, 0.28); transition: background-color 0.08s; }
.pvrec__meter i:nth-child(1) { height: 0.375rem; } .pvrec__meter i:nth-child(2) { height: 0.5625rem; }
.pvrec__meter i:nth-child(3) { height: 0.75rem; } .pvrec__meter i:nth-child(4) { height: 0.9375rem; }
.pvrec__meter i:nth-child(5) { height: 1.1875rem; }
.pvrec__meter i.is-on { background: #22c55e; }

.pvrec__menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 12rem; max-height: 12rem; overflow-y: auto; padding: 0.25rem; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.625rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 5; }
.pvrec__dev--mic .pvrec__menu { left: auto; right: 0; }
.pvrec__opt { display: block; width: 100%; padding: 0.4375rem 0.5rem; border: 0; border-radius: 0.4375rem; background: none; color: #e2e8f0; font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvrec__opt:hover { background: rgba(255, 255, 255, 0.08); }
.pvrec__opt.is-active { background: var(--ui-accent); color: #fff; }

.pvrec__foot { display: none; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.375rem; }
.pvrec__panel.is-review .pvrec__foot { display: flex; }
.pvrec__foot .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }
/* Stepped foot: review buttons, then a separate thumbnail-chooser step. */
.pvrec__foot-review, .pvrec__foot-thumb { display: none; flex: 1; align-items: center; gap: 0.75rem; }
.pvrec__panel.is-review:not(.is-thumb) .pvrec__foot-review { display: flex; justify-content: flex-end; }
.pvrec__panel.is-thumb .pvrec__foot-thumb { display: flex; justify-content: space-between; }
.pvrec__footright { display: flex; align-items: center; gap: 0.75rem; }
.pvrec__foothint { font-size: 0.75rem; color: var(--muted); line-height: 1.35; max-width: 16rem; }

.grade-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.grade-bar__left { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.linkbtn--icon { display: inline-flex; align-items: center; gap: 0.4375rem; }
.linkbtn--icon[hidden] { display: none; }
.linkbtn--icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Patient-details card header: the title with its Add note action on the right. */
.grade-patient__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
/* The heading's own 1.25rem bottom margin moves to the wrapper. Zeroing it here without
   putting it back is what pulled the patient's name up against the title when this row was
   introduced. */
.grade-patient__head .grade-h { margin: 0; }
.grade-patient__head { margin-bottom: 1.25rem; }
/* Custom-treatment icon rows, under the treatment picker. */
.gcicons { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.gcicon { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface); }
.gcicon__tile { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px dashed rgba(100,116,139,0.45); border-radius: 0.6rem; background: #f8fafc; cursor: pointer; padding: 0; }
.gcicon__tile.has-icon { border-style: solid; border-color: var(--line); background: none; }
.gcicon__tile img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.6rem; }
.gcicon__plus { width: 0.9rem; height: 0.9rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.gcicon__txt { display: grid; gap: 0.1rem; min-width: 0; }
.gcicon__txt strong { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.gcicon__txt small { font-size: 0.75rem; color: var(--muted); }
/* Booking requests: the calendar-handoff marker on a request. */
.brq__meta--cal { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ui-accent); font-weight: 600; }
.brq__meta--cal svg { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* "Preview client portal" sits alone at the foot of the grade card, opposite the Send and
   Draft buttons, and read a size smaller than what it does. +2px, with the icon following so
   the pair stays balanced -- an em would have SHRUNK it here, since the card's own font-size
   is 0.875rem and the icon is measured in rem. */
/* From 0.75rem -- the size the second .linkbtn rule above sets. NOT calc(1em + 2px):
   on font-size, 1em resolves against the INHERITED size, which here is the card's
   0.875rem, so that quietly made it +4px instead of +2px. */
#grade-preview { font-size: calc(0.75rem + 2px); }
#grade-preview svg { width: calc(1rem + 2px); height: calc(1rem + 2px); }
.grade-bar__send .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }
.grade-bar__send { display: flex; flex-direction: row; align-items: center; gap: 0.625rem; }
.grade-bar__send small { font-size: 0.75rem; color: var(--muted); }

@media (max-width: 68rem) { .grade { grid-template-columns: minmax(0, 1fr); } .grade-patient { position: static; } .delivery { grid-template-columns: 1fr; } }
@media (max-width: 60rem) { .plans { grid-template-columns: 1fr; } .price-row { grid-template-columns: 1fr; } }

/* Demo: real smile photo fills every submission/grading thumbnail. */
.ph { background: #eef1f6 center/cover no-repeat; }
.photo-main { background: #eef1f6; overflow: hidden; }
.photo-main__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-main__none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.85rem; }
.patient-phone--email { display: flex; font-weight: 500; margin-top: 0.25rem; word-break: break-all; }

/* Submitted-photo lightbox (grade screen) */
.gm-lb { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, 0.86); display: flex; align-items: center; justify-content: center; padding: 3rem; animation: gm-lb-in 0.12s ease-out; }
@keyframes gm-lb-in { from { opacity: 0; } to { opacity: 1; } }
.gm-lb__img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 0.75rem; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.gm-lb__close, .gm-lb__nav { position: absolute; border: 0; background: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; display: grid; place-items: center; }
.gm-lb__close:hover, .gm-lb__nav:hover { background: rgba(255, 255, 255, 0.28); }
.gm-lb__close { top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.gm-lb__close svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
.gm-lb__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.75rem; line-height: 1; padding-bottom: 0.2rem; }
.gm-lb__nav--l { left: 1.25rem; } .gm-lb__nav--r { right: 1.25rem; }
.gm-lb__count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; letter-spacing: 0.02em; }
.gm-lb__img { transform-origin: center center; user-select: none; -webkit-user-drag: none; }
.gm-lb__zoom { position: absolute; bottom: 1.05rem; right: 1.25rem; display: flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.14); border-radius: 999px; padding: 0.3rem 0.4rem; }
.gm-lb__zbtn { border: 0; background: rgba(255,255,255,0.16); color: #fff; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-size: 1.15rem; line-height: 1; display: grid; place-items: center; }
.gm-lb__zbtn:hover { background: rgba(255,255,255,0.32); }
.gm-lb__zbtn--reset { width: auto; padding: 0 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; }
.gm-lb__zlevel { color: #fff; font-size: 0.75rem; min-width: 2.9rem; text-align: center; font-variant-numeric: tabular-nums; }

/* ── Teeth map (grade step 4) ─────────────────────────────────────── */
.teethmap { border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); padding: 1rem 1.15rem 1.15rem; margin-bottom: 1.1rem; }
.teethmap__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.teethmap__title { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-accent); }
.teethmap__sub { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); }
.teethmap__stage { max-width: 520px; margin: 0.9rem auto 0.2rem; padding: 15px 0 5px; }
.teethmap__frame { position: relative; }
.teethmap__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* Overlay tracks the image exactly (its own tight frame), so padding or size changes on the
   stage never shift the teeth — coordinates live in the 600x230 viewBox regardless. */
.teethmap__svg { position: absolute; inset: 0; overflow: visible; }
.teethmap__selall { position: absolute; left: calc(0.35rem - 80px); bottom: calc(0.15rem - 10px); z-index: 3; font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 0.45rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.teethmap__selall:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.teethmap__selall:disabled { opacity: 0.4; cursor: default; }
.teethmap__selall.is-on { color: var(--ui-accent); border-color: var(--ui-accent); background: var(--ui-accent-soft); }
/* Per-tooth hit regions — added when we map the teeth. Multiply keeps the enamel
   shading visible under the periwinkle fill, so a selected tooth reads as rendered. */
.tm-tooth { fill: var(--ui-accent); fill-opacity: 0; stroke: transparent; cursor: pointer; transition: fill-opacity 0.15s; mix-blend-mode: multiply; }
.tm-tooth:hover { fill-opacity: 0.28; }
.tm-tooth.is-on { fill-opacity: 0.72; }
/* Number shown on hover, centred on the tooth — dark with a white halo so it reads on any fill. */
.tm-toothnum { fill: var(--ink); font-size: 9px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; }
/* Gums are big, so soften the hover so it isn't an overpowering flash. */
.tm-gum:hover { fill-opacity: 0.18; }
/* The active-finding line above the map. */
.teethmap__active { margin: 0.35rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.teethmap__active--empty { font-weight: 500; color: var(--muted); }
.teethmap__active--flash { color: var(--ui-accent); animation: tm-flash 0.7s ease; }
@keyframes tm-flash { 0%, 60% { opacity: 0.35; } 100% { opacity: 1; } }
/* The finding chip the teeth map is currently mapping. */
.fchip--active { box-shadow: 0 0 0 2px var(--ui-accent); }
/* Count of mapped teeth/gums on a finding chip. */
.fchip__teeth { display: inline-flex; align-items: center; justify-content: center; min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem; margin-left: 0.1rem; border-radius: 999px; background: var(--ui-accent); color: #fff; font-size: 0.66rem; font-weight: 700; }
/* Concern, positive & reason chips are clickable (select / edit) AND draggable to reorder — their
   order is the order they're spoken — so they show the grab cursor. A plain click still works. */
.notes__grp--concern .fchip, .notes__grp--positive .fchip, .notes__grp--reason .fchip { cursor: grab; }
.notes__chips .fchip.is-dragging { opacity: 0.4; cursor: grabbing; }
/* the editing chip is just an input — normal caret, and it isn't draggable */
.fchip--editing, .notes__grp--concern .fchip--editing, .notes__grp--positive .fchip--editing, .notes__grp--reason .fchip--editing { cursor: text; }

/* Inline chip editing (concerns / positives / reasons — click an AI chip to tweak its wording). */
.fchip--editing { padding: 0; border: none; background: transparent; }
.fchip__edit {
  font: inherit; font-size: 0.82rem; color: var(--ink); background: #fff;
  border: 1px solid var(--ui-accent); border-radius: 999px; padding: 0.26rem 0.62rem; outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 22%, transparent);
}

/* ============================================================
   Small-screen gate — the dashboard is desktop-first, so on phones we show a
   friendly "use a larger screen" note instead of a cramped layout. Tablets and
   up (>=768px) get the normal dashboard. Change the breakpoint below to adjust.
   ============================================================ */
.mgate { display: none; }
@media (max-width: 767px) {
  #app { display: none !important; }
  .mgate {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center; padding: 1.5rem;
  }
  .mgate__card {
    width: 100%; max-width: 22rem; background: #fff; border-radius: 1.25rem;
    padding: 2rem 1.6rem; text-align: center;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.14);
  }
  .mgate__mark {
    display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem;
    border-radius: 0.9rem; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--ui-accent, #2563eb) 12%, #fff);
  }
  .mgate__mark svg {
    width: 1.8rem; height: 1.8rem; fill: none;
    stroke: var(--ui-accent, #2563eb); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
  }
  .mgate__title { font-size: 1.2rem; font-weight: 700; color: var(--ink, #0f172a); margin: 0 0 0.5rem; }
  .mgate__msg { font-size: 0.9rem; color: var(--ink-2, #334155); line-height: 1.5; margin: 0; }
  .mgate__note { font-size: 0.8rem; color: #94a3b8; margin: 0.9rem 0 0; }
}

/* Overlay shown while an uploaded video is still being re-encoded in the background.
   Without it a freshly uploaded clip renders as a broken player for up to a minute and
   reads as a failed upload. */
.vidproc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  background: rgba(17, 20, 45, 0.86);
  color: #fff;
  border-radius: inherit;
  z-index: 2;
}
.vidproc strong { font-size: 0.9375rem; font-weight: 600; }
.vidproc__spin {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vidproc-spin 0.8s linear infinite;
}
@keyframes vidproc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vidproc__spin { animation: none; } }

/* ---------- embed snippet ---------- */
/* A snippet the practice copies verbatim, so it must not wrap in a way that changes
   what they paste — it scrolls sideways instead. */
/* ------------------------------------------------- embed the form card -- */
/* This card is the practice's handover to whoever runs their website, so it is laid out
   as ordered steps instead of the page's usual label + hint fields. The heading runs a
   size larger than the other settings cards for the same reason: it is an instruction
   sheet, not a form. */
.embedcard .cardhead { margin-bottom: 1.625rem; }
.embedcard .cardhead__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; }
.embedcard .cardhead__icon svg { width: 1.375rem; height: 1.375rem; }
.embedcard .cardhead h2 { font-size: 1.0625rem; letter-spacing: -0.01em; }   /* 17px */
.embedcard .cardhead p { margin-top: 0.25rem; }

/* Still an <ol>: the steps are meant to be followed in order even though the numbers are
   no longer drawn, and that ordering is worth keeping for anyone reading by screen
   reader. */
.embedsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
/* min-width:0 because a grid item's automatic minimum is its MIN-CONTENT width, and the
   snippet below no longer wraps -- without this the unwrappable line sets the row's
   minimum and the whole step grows wider than the card it sits in. */
.embedstep { min-width: 0; }
.embedstep h3 { margin: 0 0 0.3125rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.embedstep p { margin: 0 0 0.875rem; font-size: 0.8125rem; line-height: 1.65; color: var(--muted); }

/* Literal markup quoted mid-sentence: chipped so a reader can tell at a glance which
   words they are meant to type and which are prose. */
.embedstep code {
  padding: 0.0625rem 0.375rem;
  border-radius: 0.3125rem;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}
.embedstep strong { color: var(--ink); font-weight: 700; }

/* Which corner the pill sits in. Sits between the instruction and the snippet because it
   changes what that snippet will DO, not how it is installed. */
.embedpos { gap: 1rem; margin: 0 0 0.875rem; }
.embedpos .payradio { font-size: 0.8125rem; }

.snip {
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: #f8f9fe;
  border: 1px solid #e6e9f8;
  border-radius: 0.75rem;
  overflow: hidden;
}
.snip pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--ink-2);
  font: 400 0.8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* One line that scrolls, rather than three that wrap. The snippet is copied with the
     button and never retyped, so it does not all need to be on screen at once -- and a
     three-line block dominated a card whose real subject is the instructions above it. */
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* don't chain the scroll to the page at either end */

  /* A thin, quiet scrollbar. It has to read as "there is more to the right", but this is
     a settings card, not a code editor. */
  scrollbar-width: thin;
  scrollbar-color: #c3cbe6 transparent;
}
.snip pre::-webkit-scrollbar { height: 6px; }
.snip pre::-webkit-scrollbar-track { background: transparent; }
.snip pre::-webkit-scrollbar-thumb { background: #c3cbe6; border-radius: 999px; }
.snip pre::-webkit-scrollbar-thumb:hover { background: #a7b1d6; }

/* Syntax colours. The URL is the only part a practice ever needs to check, so it is the
   one token in a different hue from everything around it. */
.snip .tok-tag { color: #7c3aed; }
.snip .tok-attr { color: #6366f1; }
.snip .tok-op { color: #94a3b8; }
.snip .tok-str { color: #0d9488; }

.snip__side {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border-left: 1px solid #e6e9f8;
}
.snip__copy {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #dcdffa;
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ui-accent);
  font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.snip__copy:hover { background: #f3f4ff; border-color: #c5caf7; }
.snip__copy:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.snip__copy.is-copied { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
.snip__copy svg {
  flex: none; width: 0.9375rem; height: 0.9375rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Narrow screens: the divider and side rail cost more width than the button is worth, so
   the Copy button moves under the snippet. */
@media (max-width: 640px) {
  .snip { flex-direction: column; align-items: stretch; }
  .snip__side { border-left: 0; border-top: 1px solid #e6e9f8; padding: 0.625rem; }
  .snip__copy { width: 100%; justify-content: center; }
}

/* ------------------------------------------------ practice notifications -- */
.notifs { list-style: none; margin: 0; padding: 0; }
/* "Also send these alerts to": under the toggles, set apart from them. */
.notifcc { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.notif {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 0; border-bottom: 1px solid var(--line);
}
.notif:first-child { padding-top: 0; }
.notif:last-child { border-bottom: 0; padding-bottom: 0; }
.notif__text { flex: 1; min-width: 0; }
/* Scoped to .notif__text, NOT to .notif: the toggle's knob is a bare <span> inside the
   same row, so a loose `.notif span` rule also lands on the knob and shifts it off centre
   by whatever margin the description happens to use. */
.notif__text strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.notif__text span { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--muted); }

/* A .note sitting among form fields reads better at the same size as the field hints
   around it, rather than a step larger. Scoped as a modifier so the default .note --
   used elsewhere as a standalone callout — keeps its size. */
.note--sm { font-size: 0.8125rem; }

/* Extra breathing room above a field that follows a note or checkbox. */
.field--spaced { margin-top: 15px; }

/* Retention: a redacted submission is a shell kept so the practice's numbers still add up.
   Dimmed, not hidden — a row that disappeared would read as data loss, and its dates and
   outcome are still real. */
.subrow.is-redacted { opacity: 0.62; }
.subrow.is-redacted .subrow__concern em { font-style: normal; color: var(--muted); }

/* A record whose details have been removed on request. Stated rather than left blank, so
   the empty patient reads as something that was done deliberately. */
.grade-redacted { font-size: 0.8125rem; color: var(--muted); align-self: center; }

/* A confirm offering two destructive answers. Stacked, each a label and one line, so the
   difference between them is readable in a glance rather than a paragraph. */
.choice { display: grid; gap: 0.5rem; margin: 0.25rem 0 1.25rem; }
.choice__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: 0.625rem;
  background: var(--surface); font: inherit;
  transition: border-color 0.12s, background-color 0.12s;
}
.choice__opt:hover { border-color: var(--ui-accent); background: #f8f9ff; }
.choice__opt:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.choice__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.choice__hint { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--muted); }
.choice__opt.is-danger .choice__label { color: var(--danger); }
.choice__opt.is-danger:hover { border-color: var(--danger); background: #fef2f2; }
.confirm__panel .choice + .confirm__actions { justify-content: center; }

/* ------------------------------------------------- multi-location (org admin) -- */
/* None of this is reachable by a practice login: the switcher is `hidden` unless the
   signed-in user is an org_admin, and .view-org is a separate section. Appended rather
   than woven into the dashboard styles above for the same reason — so that removing
   multi-location later is a deletion, not an unpicking. */

/* The location switcher, in the sidebar under the brand -- where a GoHighLevel user looks
   for it. Full width of the sidebar, name over address, so it reads as "where am I" rather
   than as one more control in the header. */
.orgswitch { position: relative; margin: 0 0 0.75rem; }
.orgswitch__btn {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
  padding: 0.5rem 0.625rem; border: 1px solid var(--nav-line); border-radius: 0.75rem;
  background: var(--nav-hover); cursor: pointer; font: inherit; text-align: left;
}
.orgswitch__btn:hover { border-color: var(--nav-accent); background: var(--nav-active); }
/* min-width:0 so a long location name ellipsises instead of stretching the sidebar. */
.orgswitch__text { flex: 1; min-width: 0; }
.orgswitch__name {
  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--nav-ink-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orgswitch__sub {
  display: block; font-size: 0.6875rem; color: var(--nav-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orgswitch__chev { flex: none; width: 0.75rem; height: 0.75rem; fill: currentColor; opacity: 0.45; }

.orgswitch__menu {
  position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 40;
  padding: 0.25rem; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.orgswitch__item {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 0.625rem; border: 0; border-radius: 0.5rem;
  background: transparent; cursor: pointer; font: inherit; font-size: 0.8125rem;
  color: var(--ink);
}
.orgswitch__item:hover { background: var(--bg, #f1f5f9); }
.orgswitch__item.is-current { font-weight: 600; color: var(--ui-accent, #6366f1); }
/* Separated, because leaving a location is a different kind of action from picking one --
   they should not be one undifferentiated list a tired admin misclicks. */
.orgswitch__item--back {
  margin-top: 0.25rem; border-top: 1px solid var(--line);
  border-radius: 0 0 0.5rem 0.5rem; color: var(--muted);
}

/* The locations list, on the admin Locations screen. */

/* Plan usage, above the list. A strip rather than a card in the header row: the topbar
   already carries the page title on one side and the signed-in user on the other, and a
   third block between them collides on any window narrower than about 1300px. */
/* Page heading with something beside it. The topbar's own heading is hidden for such a
   route (see route.headingInContent), so there is exactly one <h1> on the page. */
.pagehead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin: 0 0 1.25rem;
}
.pagehead__text { min-width: 0; }

.locplan {
  flex: none; width: 100%; max-width: 25rem;
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.locplan__icon {
  flex: none; width: 2rem; height: 2rem; border-radius: 0.625rem;
  display: grid; place-items: center;
  background: var(--ui-accent-soft, #eef2ff);
}
.locplan__icon svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: var(--ui-accent, #6366f1); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.locplan__meter { flex: 1; min-width: 0; display: grid; gap: 0.4375rem; }
.locplan__meter strong { font-size: 0.8125rem; color: var(--ink); }
.locplan__right { flex: none; margin-left: auto; display: grid; gap: 0.375rem; justify-items: end; }
.locplan__right small { font-size: 0.75rem; color: var(--muted); }
.bar { height: 0.375rem; border-radius: 999px; background: var(--bg, #eef2f7); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--ui-accent, #6366f1); }

.loclist { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.locrow {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line); border-radius: 0.875rem;
}
.locrow__av {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ui-accent-soft, #eef2ff); color: var(--ui-accent, #4f46e5);
  font-size: 0.8125rem; font-weight: 700;
}
/* min-width:0 so a long name ellipsises instead of pushing the buttons out of the card --
   the same flex blowout that widened the embed card once already. */
.locrow__who { flex: 1; min-width: 0; display: grid; gap: 0.25rem; }
.locrow__name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.locrow__name strong {
  font-size: 0.9375rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.locrow__addr {
  font-size: 0.8125rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 0.3125rem;
  font-size: 0.6875rem; font-weight: 600;
}
.pill::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
.pill--on { color: #16a34a; }
.pill--off { color: var(--muted); }

.locmeta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.125rem; }
.locmeta__item {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; color: var(--muted);
}
.locmeta__item svg {
  width: 0.875rem; height: 0.875rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.locrow__stat { flex: none; display: grid; gap: 0.25rem; min-width: 6.5rem; }
/* A hairline between the two stats, and breathing room before the buttons. The rule is on
   the second one so it only ever appears BETWEEN them, never trailing after the last. */
.locrow__stat + .locrow__stat {
  border-left: 1px solid var(--line);
  /* The rule sits 20px further left than the box that draws it: the negative margin moves
     the border, and the matching extra padding puts the text back where it was. */
  margin-left: -1.25rem;
  padding-left: 2.25rem;      /* 16px as before, plus the 20px the rule moved */
  margin-right: 1.875rem;     /* 30px */
}
.locrow__stat strong { font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.locrow__stat span { font-size: 0.8125rem; color: var(--muted); }

.locrow__actions { flex: none; display: flex; align-items: center; gap: 0.5rem; }
/* An inactive location's login is refused; resetting it is offered right on the row. */
.locrow__reset { margin: 0 0.25rem 0 0; color: var(--ui-accent); font-weight: 600; white-space: nowrap; }
.locrow--empty { color: var(--muted); font-size: 0.8125rem; justify-content: center; }

/* A closed location stays in the list -- its submissions and outcomes are still worth
   opening -- but should not read as one of the working ones. */
.locrow.is-inactive .locrow__av { opacity: 0.45; }
.locrow.is-inactive .locrow__name strong { color: var(--muted); }

.locmenu { position: relative; }
.locmenu__btn {
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.locmenu__btn:hover { border-color: var(--ui-accent, #6366f1); color: var(--ink); }
.locmenu__list {
  position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 30;
  min-width: 10rem; padding: 0.3125rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0.75rem; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.locmenu__list button {
  display: block; width: 100%; text-align: left;
  padding: 0.4375rem 0.5rem; border: 0; border-radius: 0.5rem;
  background: none; font: inherit; font-size: 0.8125rem; color: var(--ink); cursor: pointer;
}
.locmenu__list button:hover { background: var(--bg, #f1f5f9); }

/* The prompt to add another location. Shown only while the plan has room, so it is an
   offer that can actually be taken up rather than a route into a payment error. */
.locfree {
  display: flex; align-items: center; gap: 0.875rem;
  margin-top: 0.875rem; padding: 1rem 1.125rem;
  border: 1px dashed var(--ui-accent, #6366f1); border-radius: 0.875rem;
  background: var(--ui-accent-soft, #eef2ff);
  cursor: pointer;
  transition: background-color 0.15s;
}
.locfree:hover { background: #dfe2fd; }
/* Third time this has bitten: an explicit display beats the browser's [hidden] rule,
   so a full plan still showed an invitation to add another location. */
.locfree[hidden] { display: none !important; }
.locfree__mark {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
}
.locfree__mark svg {
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: var(--ui-accent, #6366f1); stroke-width: 1.8; stroke-linecap: round;
}
.locfree__text { flex: 1; min-width: 0; display: grid; gap: 0.125rem; }
.locfree__text strong { font-size: 0.875rem; color: var(--ui-accent, #4f46e5); }
.locfree__text small { font-size: 0.75rem; color: var(--muted); }

/* A card head with an action on the right. */
.cardhead--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cardhead__count { color: var(--muted); font-weight: 500; }

@media (max-width: 900px) {
  .pagehead { flex-direction: column; align-items: stretch; }
  .locplan { max-width: none; }
  .locrow { flex-wrap: wrap; }
  .locrow__who { flex: 1 1 12rem; }
  .locrow__actions { margin-left: auto; }
}


/* Same reason as the card rule below: .nav__item is display:flex, which beats the
   browser's default [hidden] rule, so the sidebar would show both shapes at once. */
.nav__item[hidden] { display: none !important; }

/* Same again for a single field: .field is display:block by default, but any element that
   is given an explicit display needs telling. */
.field[hidden] { display: none !important; }

/* A card set `hidden` must actually disappear. The dash gives cards an explicit display,
   which beats the browser's default [hidden] rule — so without this the three org-level
   cards would stay visible on a location's settings page despite being marked hidden. */
.card[hidden] { display: none !important; }

/* Copy setup between locations. Numbered steps, then two panels of choices. */
.copycard .cardhead { margin-bottom: 1.5rem; }
.copystep { display: flex; gap: 0.875rem; margin-bottom: 1.75rem; }
.copystep__body { flex: 1; min-width: 0; }
.copystep__body h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.copystep__body > p { margin: 0.1875rem 0 0.75rem; font-size: 0.8125rem; color: var(--muted); }

/* Target locations: a checkbox the whole card belongs to, so the address is part of the
   hit area rather than decoration beside it. */
.targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.target {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.875rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface);
}
.target:hover { border-color: var(--ui-accent); }
.target input { flex: none; width: 1rem; height: 1rem; accent-color: var(--ui-accent); }
.target__text { min-width: 0; display: grid; gap: 0.125rem; }
.target__text strong { font-size: 0.875rem; color: var(--ink); }
.target__text small {
  font-size: 0.75rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.pick { border: 1px solid var(--line); border-radius: 0.875rem; padding: 1rem; }
.pick__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.pick__toggle { flex: none; }
.pick__toggle input { width: 1.125rem; height: 1.125rem; accent-color: var(--ui-accent); }
.pick__icon {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
  display: grid; place-items: center; background: var(--ui-accent-soft);
}
.pick__icon svg {
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: var(--ui-accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.pick__head h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.pick__head p { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--muted); }
.pick__body { margin-top: 0.875rem; display: grid; gap: 0.5rem; }
/* Switched off: still readable, plainly not in play. */
.pick.is-off .pick__body { opacity: 0.45; pointer-events: none; }
/* Which sections of each service a copy writes (org.js SVC_PARTS). */
.svcparts { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; }
.svcparts__head { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.svcpart { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; }
.svcpart input { margin-top: 0.1875rem; width: 1rem; height: 1rem; flex: none; accent-color: var(--ui-accent); cursor: pointer; }
.svcpart strong { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.svcpart small { display: block; font-size: 0.75rem; color: var(--muted); }
.svcpart small:empty { display: none; }
.svcparts__note { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--muted); }

.picklist { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.625rem; }
.picklist .input { margin-bottom: 0.5rem; }
.picklist .input input { padding: 0.5rem 0.5rem 0.5rem 0; font-size: 0.8125rem; }
.picklist__items { max-height: 10.5rem; overflow-y: auto; display: grid; gap: 0.375rem; }
.picklist__empty { margin: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.pickrow {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--ink); cursor: pointer;
}
.pickrow input { flex: none; width: 0.9375rem; height: 0.9375rem; accent-color: var(--ui-accent); }
.picklist__count { margin: 0; font-size: 0.75rem; color: var(--muted); }

.copyactions { display: flex; justify-content: flex-end; gap: 0.5rem; }
/* Copy history + undo (org.js loadHistory / openUndo). */
.copyhist { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.copyhist__head { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.copyhist__sub { margin: 0.125rem 0 0.75rem; font-size: 0.75rem; color: var(--muted); }
.copyhist__empty { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.copyhist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.copyhist__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.copyhist__row--undo { background: #f8fafc; }
.copyhist__what { margin: 0; font-size: 0.8125rem; color: var(--ink); }
.copyhist__meta { margin: 0.1875rem 0 0; font-size: 0.75rem; color: var(--muted); }
.copyhist__state { flex: none; font-size: 0.75rem; color: var(--muted); }
.copyhist__more { margin-top: 0.625rem; }
.undo__head { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.undo__loc { border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; }
.undo__loc + .undo__loc { margin-top: 0.625rem; }
/* Two columns, header row then items; a vertical rule after the first column on every row. */
.undo__headrow, .undo__rows li { display: grid; grid-template-columns: minmax(12.5rem, 0.45fr) 1fr; }
.undo__headrow { background: #f8fafc; border-bottom: 1px solid var(--line); }
.undo__locname, .undo__colhead, .undo__svc, .undo__what { padding: 0.5625rem 0.875rem; font-size: 0.8125rem; line-height: 1.45; }
.undo__colhead, .undo__what { border-left: 1px solid var(--line); }
.undo__locname { margin: 0; font-weight: 700; color: var(--ink); }
.undo__colhead { font-weight: 700; color: var(--ink-2); }
.undo__rows { list-style: none; margin: 0; padding: 0; }
.undo__rows li + li { border-top: 1px solid var(--line); }
.undo__svc { font-weight: 600; color: var(--ink); }
.undo__what { color: var(--ink-2); }
@media (max-width: 560px) {
  .undo__headrow, .undo__rows li { grid-template-columns: 1fr; }
  .undo__colhead { display: none; }
  .undo__what { border-left: 0; padding-top: 0; }
}
.undo__ask { display: grid; gap: 0.375rem; margin-bottom: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid #fde68a; border-radius: 0.75rem; background: #fffbeb; }
.undo__ask p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #78350f; }
.copyresult {
  margin: 0 0 0.875rem; padding: 0.75rem 0.875rem;
  background: var(--bg, #f8fafc); border: 1px solid var(--line); border-radius: 0.625rem;
  font-size: 0.8125rem;
}
.copyresult p { margin: 0 0 0.375rem; color: var(--muted); }
.copyresult ul { margin: 0; padding-left: 1.1rem; }
.copyresult li { margin: 0.125rem 0; }
.copyresult__note { margin: 0.5rem 0 0 !important; color: var(--muted); }

.socol { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; }   /* Social Proof: stats + reviews share the left column */

/* ---------- Social Proof: patient reviews ---------- */
#rv-add { margin-bottom: 0.85rem; }   /* clear of the first review row */
/* the title sits its own step below the name, not stacked tight against it */
.field.tm-title { margin-top: 15px; }

.rv-list { display: flex; flex-direction: column; gap: 0.6rem; }
.rv-list .faq__empty { font-size: 0.8125rem; }

/* collapsed: one line per review */
.rv-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.7rem 0.85rem;
  border: 1px solid var(--line); border-radius: 0.75rem; background: #fff; cursor: pointer; font: inherit; }
.rv-item:hover { border-color: #cfd8ea; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.rv-item__stars { display: inline-flex; gap: 1px; flex: none; }
.rv-star__ico { width: 0.85rem; height: 0.85rem; fill: none; stroke: #cbd5e1; stroke-width: 1.6; stroke-linejoin: round; }
.rv-star__ico.is-on { fill: #f5b301; stroke: #f5b301; }
.rv-item__txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.rv-item__name { font-weight: 600; font-size: 0.875rem; color: var(--ink); flex: none; }
.rv-item__treat { flex: none; font-size: 0.6875rem; font-weight: 600; color: #2563eb; background: #eff4ff;
  border-radius: 999px; padding: 0.1rem 0.5rem; }
.rv-item__body { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-item__chev { flex: none; width: 1rem; height: 1rem; fill: none; stroke: #94a3b8; stroke-width: 2; }

/* expanded: the form */
.rv-edit { border: 1px solid var(--line); border-radius: 0.9rem; padding: 1rem 1.1rem 1.1rem; background: #fff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06); }
.rv-edit__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.rv-edit__head h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.rv-trash { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #fecaca; border-radius: 0.55rem;
  background: #fff; color: #dc2626; cursor: pointer; }
.rv-trash:hover { background: #fef2f2; }
.rv-trash svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rv-rating { display: flex; align-items: center; gap: 0.6rem; margin: 0.15rem 0 0.9rem; }
.rv-stars { display: inline-flex; gap: 0.15rem; }
.rv-star { border: 0; background: none; padding: 0.1rem; cursor: pointer; line-height: 0; }
.rv-star svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #cbd5e1; stroke-width: 1.5; stroke-linejoin: round; }
.rv-star.is-on svg { fill: #f5b301; stroke: #f5b301; }
.rv-rating__pill { font-size: 0.75rem; font-weight: 600; color: #2563eb; background: #eff4ff; border-radius: 999px; padding: 0.2rem 0.6rem; }
.rv-edit .field__opt, .modal .field__opt { color: var(--muted); font-weight: 400; }
/* the same inset as a text input (.input input + .input > input:first-child) so the
   first character does not sit on the border. */
.rv-edit textarea { width: 100%; border: 0; background: none; font: inherit; color: inherit; resize: vertical; outline: none;
  padding: 0.8125rem 0.875rem 0.8125rem 1rem; font-size: 0.84375rem; }
.rv-edit .is-invalid { outline: 2px solid #fca5a5; outline-offset: 2px; border-radius: 0.35rem; }
.rv-left { text-align: right; }
.rv-edit__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
/* the same size as the page's own Save button (.savebar .btn), not the full-size .btn */
.rv-edit__foot .btn { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }

/* ── Grade: lock in treatments + the before/after picker ── */
.gsimlock { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: var(--r-field); background: #fff; }
.gsimlock__txt { display: grid; gap: 0.15rem; }
.gsimlock__txt strong { font-size: 0.9rem; color: var(--ink); }
.gsimlock__txt small { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.gsimlock .btn { flex: none; }
.gsimlock .btn:disabled { opacity: 1; background: var(--ui-accent-soft); color: var(--ui-accent); border-color: transparent; cursor: default; }
.simpick { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.simpick.is-offpanel { display: none; }
.simpick__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.simpick__cell { margin: 0; padding: 0; border: 2px solid transparent; border-radius: 0.75rem; background: #fff; overflow: hidden; text-align: left; font: inherit; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
button.simpick__cell { cursor: pointer; }
button.simpick__cell:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); }
.simpick__cell.is-chosen { border-color: var(--ui-accent); }
.simpick__cell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.simpick__cell figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.simpick__ai { padding: 0.05rem 0.4rem; border-radius: 999px; background: #f1f5f9; color: var(--muted); font-size: 0.7rem; font-weight: 600; }
.simpick__on { margin-left: auto; color: var(--ui-accent); font-size: 0.75rem; }
.simpick__wait { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-size: 0.875rem; color: var(--muted); }
.simpick__spin { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ui-accent); animation: simspin 0.8s linear infinite; }
@keyframes simspin { to { transform: rotate(360deg); } }
.simpick__regen { margin-top: 0.7rem; font-size: 0.8rem; }
@media (max-width: 640px) { .simpick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Matches the other step numbers (.gstep h3 span): the same ink as its heading, and its
   heading's weight. It was muted grey at a lighter weight, which made step 6 read as a
   different kind of thing from steps 1 to 5. */
.simpick__n { color: var(--ink); }
/* The row under each state of section 6: the action, and the way to decline one. */
.simpick__acts { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.875rem; }
.simpick__off { color: var(--muted); }
.simpick__off:hover { color: var(--danger); }
/* files a patient attached to a message */
.mbub__files { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.mfile { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.6); font-size: 0.75rem; text-decoration: none; color: inherit; }
.mfile:hover { background: #fff; }
.mfile svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mfile--img { padding: 0; background: none; }
.mfile--img img { display: block; max-width: 160px; max-height: 140px; border-radius: 0.5rem; }

/* Services §7: treatment material for the assistant */
.aiknow__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.aiknow__foot .btn { flex: none; }
.aiknow__foot .counter { margin-top: 0; }
.aiknow__note { margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--muted); }
.aiknow__flags { margin: 0 0 0.5rem; padding: 0.5rem 0.65rem; border-radius: 0.5rem; background: #fff7ed; color: #9a3412; font-size: 0.78125rem; line-height: 1.5; }
.aiknow textarea { width: 100%; }
/* files the clinic is about to attach to a reply */
.thread__files { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.5rem; }
.chipfile { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 14rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background: #f1f5f9; font-size: 0.75rem; }
.chipfile svg { width: 0.8rem; height: 0.8rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chipfile__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipfile__x { border: 0; background: none; font-size: 1rem; line-height: 1; padding: 0; cursor: pointer; color: var(--muted); }
.chipfile__x:hover { color: var(--ink); }
.thread__clip svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Grading screen: the two buttons under the photo carousel, right-aligned so they read as
   actions on the photos above rather than a block of their own. */
.photo-actions { display: flex; gap: 0.5rem; }
/* The pair spans the card the way the photo above them does -- but not in equal halves:
   "Download all photos" is the longer label, so it takes the room it needs to stay on one
   line and Message shrinks to its own text. */
.photo-actions .btn { min-width: 0; font-size: 0.90625rem; white-space: nowrap; }
.photo-actions .btn#photo-message { flex: 0 0 auto; }
/* the longer label is also the one with room to spare inside its own box: taking its side
   padding down is what leaves Message a readable width once both labels grew */
.photo-actions .btn#photo-download { flex: 1 1 auto; padding-left: 0.5rem; padding-right: 0.5rem; }

/* Settings: the CRM webhook card */
/* Each fold is its own tinted block, so it reads as something that opens rather than as a
   heading with a list under it. The chevron sits at the far right, where a disclosure's does. */
.wh-fold { margin-top: 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem;
  background: #f8fafc; overflow: hidden; }
.wh-fold.is-open { background: var(--surface); }
.wh-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.75rem 0.875rem; border: 0; background: none; font: inherit; font-size: 0.875rem;
  font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.wh-toggle:hover { background: #f1f5f9; }
.wh-toggle__chev { width: 1rem; height: 1rem; flex: none; margin-left: 0.25rem; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s; color: var(--muted); }
.wh-toggle.is-open .wh-toggle__chev { transform: rotate(180deg); }
.wh-toggle__n { margin-left: auto; font-weight: 400; font-size: 0.75rem; color: var(--muted); }
.wh-toggle__n--bad { color: #b91c1c; font-weight: 600; }
.wh-events { display: grid; gap: 0.375rem; padding: 0 0.875rem 0.875rem; }
/* a class rule with `display` outranks the UA's [hidden] {display:none}, so these two have to
   say it themselves -- without this the fold flipped the attribute and nothing moved */
.wh-events[hidden], .wh-log[hidden] { display: none; }
.wh-events .check span strong { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; }
/* The two actions that act on the whole connection, ruled off from the fields they save so
   they cannot read as belonging to the fold above or below them. */
.wh-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--line); }
/* "New secret" sits beside the secret it replaces */
.wh-secret { display: flex; align-items: center; gap: 0.5rem; }
.wh-secret .input { flex: 1 1 auto; min-width: 0; }
.wh-secret .btn { flex: none; }
.wh-log { display: grid; gap: 0.25rem; padding: 0 0.875rem 0.875rem; }
.wh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem;
  align-items: baseline; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; background: #f8fafc;
  font-size: 0.8125rem; }
.wh-row--ok { background: #f0fdf4; }
.wh-row--bad { background: #fef2f2; }
.wh-row__ev { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.wh-row__st, .wh-row__at { color: var(--muted); font-size: 0.75rem; }
.wh-row__err { grid-column: 1 / -1; color: #b91c1c; font-size: 0.75rem; }
.note--bad { color: #b91c1c; }

/* Grading screen: files the patient had from another clinic */
.recfiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.recfile { display: inline-flex; align-items: center; gap: 0.4375rem; max-width: 100%;
  padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.625rem;
  background: #f8fafc; font-size: 0.8125rem; color: var(--ink); text-decoration: none; }
.recfile:hover { background: #f1f5f9; }
.recfile svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.recfile__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

/* ---- group overview (overview.js) ---------------------------------------------------------
   The organisation's own dashboard. It reuses .stats/.stat for the five figures across the top
   and .drange__opt for the window chips, so only the table and the chart are new here. */
/* The one screen that is allowed past --max-w.

   1400px is the app's container spec and every other screen keeps it, because every other
   screen is a column of forms and a form field two thousand pixels wide is harder to read, not
   easier. This one is a nine-column table whose first column is a clinic's name and street
   address, and at 1400 that column gets about 200px and truncates both -- on a practice's
   monitor, with several hundred pixels of white to the right of the card. The ceiling is still
   a ceiling: past 1760 a row's figures would be flung so far apart that reading across one
   becomes the hard part. The topbar widens with it so the account block stays level with the
   table's right edge. */
body[data-route="overview"] .content,
body[data-route="overview"] .topbar { max-width: 1760px; }

.ovtable__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.ovtable__head h2 { margin: 0; font-size: 1.25rem; }
.ovtable__head p { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.ovsearch { flex: none; display: flex; align-items: center; gap: 0.5rem; width: 15.5rem; max-width: 40vw; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface); }
.ovsearch svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.ovsearch input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }

/* One grid, shared by the header row and every data row, so a column cannot drift between
   them. The location column takes the slack; every figure column is sized to its own heading. */
/* The location column takes a bigger share of whatever width there is: it holds two lines of
   real text, and the other eight hold a number and a percentage. */
.ovhead, .ovrow { display: grid; grid-template-columns: minmax(14rem, 3.4fr) repeat(8, minmax(4.5rem, 1fr)); align-items: center; gap: 0.5rem; }
.ovhead { padding: 0 0.5rem 0.625rem; border-bottom: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.ovhead__col { display: grid; justify-items: center; gap: 0.25rem; text-align: center; line-height: 1.2; }
.ovhead__col svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The stage colours, taken from the badges below so there is one place they are decided. The
   label stays grey; only the icon is coloured, or seven coloured words across the top of the
   table would be harder to read than the plain ones it replaced. */
.ovi-new { color: var(--ui-accent); }
.ovi-sent { color: #16a34a; }
.ovi-viewed { color: #8106f0; }
.ovi-booking { color: #ea580c; }
.ovi-booked { color: #db2777; }
.ovi-noshow { color: #dc2626; }
.ovi-treated { color: #16a34a; }

.ovrow { width: 100%; padding: 0.875rem 0.5rem; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ovrow:last-child { border-bottom: 0; }
.ovrow:hover { background: var(--cream); }
.ovrow__loc { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
/* flex: none, or the circle is the first thing the row squeezes when a long clinic name needs
   the space -- and a squeezed circle is an oval. */
.ovrow__av { flex: none; }
/* flex: 1, or the name and address block is sized to its own content inside the flex row and
   ignores the column it was given -- which is how a 357px column still managed to cut an
   address that wanted 218px, by one pixel. */
.ovrow__who { flex: 1 1 auto; display: grid; min-width: 0; line-height: 1.3; }
.ovrow__who strong { font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovrow__who small { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovrow__n { display: grid; justify-items: center; gap: 0.125rem; }
.ovrow__n strong { font-size: 1rem; font-weight: 700; }
/* The eighth figure column, and styled like the other seven -- it used to sit on its own at
   the end beside a chevron into the location, and the two together took a sixth of the row to
   say what a number and a click already say. The row is still the way into a location. */
/* The conversion cell is now a figure over its change, like the seven beside it, so the
   weight sits on the <strong> rather than on the cell. */
.ovrow__conv { display: grid; justify-items: center; gap: 0.125rem; }
.ovrow__conv strong { font-size: 1rem; font-weight: 700; }

.ovd { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.ovd--up { color: #15803d; }
.ovd--down { color: #b91c1c; }
/* Present but unseen. The six columns that carry no change still reserve its line, so their
   figures sit level with the two that do -- without it the numbers along a row stagger by half
   a line, which is more distracting than the deltas were. */
.ovd--blank { visibility: hidden; }

@media (max-width: 1100px) {
  /* The table stops being a table. Seven figure columns cannot be read side by side on a
     narrow screen, so each location becomes a card and every figure carries its own label. */
  .ovhead { display: none; }
  .ovrow { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.875rem 0.5rem; padding: 1rem 0.25rem; }
  .ovrow__loc { grid-column: 1 / -1; }
  .ovrow__n::after, .ovrow__conv::after { content: attr(data-label); font-size: 0.6875rem; font-weight: 500; color: var(--muted); }
  .ovtable__head { flex-direction: column; }
  .ovsearch { width: 100%; max-width: none; }
}

/* ---- inherited settings cards (settings.js) -----------------------------------------------
   A location inside a group takes some cards from the organisation. While it does, the card's
   fields show the GROUP's values and are disabled -- what is on screen is what patients see --
   and this bar says so and offers the way out. See docs/multi-location-settings.md. */
.inheritbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.75rem 1rem; margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--ui-accent-soft); border-radius: 0.75rem;
}
.inheritbar__what { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ui-accent); }
/* Ad tracking in a group: which of the group's pixels fire here too (settings.js paintGroupPixels). */
.adgroup { display: grid; gap: 0.25rem; margin: 0 0 1.25rem; padding: 0.75rem 0.875rem; background: var(--ui-accent-soft); border-radius: 0.75rem; }
.adgroup[hidden] { display: none; }
.adgroup__lab { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.adgroup__ids { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.adgroup__ids code { font-size: 0.75rem; color: var(--ink); }
/* An inherited card collapses to its bar: paintInherit hides everything after it. Several of
   those children set their own display (#pay-list is flex, .planadd a button), which beat the
   [hidden] attribute -- so a location following its group still showed a payment list, and
   after switching, its OWN old list under "patients see none". Hidden means hidden. */
.card > [hidden] { display: none !important; }
/* What the group's setting IS, read-only, on its own line under the bar's row
   (VSC.groupSummaryHtml). Plain on the bar's tint: information, not a call to act. */
.gsum { order: 3; flex-basis: 100%; display: grid; gap: 0.375rem; padding-top: 0.625rem; border-top: 1px solid rgba(37, 99, 235, 0.15); }
.gsum__lab { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.gsum__body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); min-width: 0; }
.gsum__logo { height: 2rem; max-width: 9rem; object-fit: contain; padding: 0.25rem 0.375rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; }
.gsum__swatch { display: inline-flex; align-items: center; gap: 0.375rem; }
.gsum__swatch i { width: 1rem; height: 1rem; border-radius: 0.3125rem; border: 1px solid rgba(15, 23, 42, 0.15); }
.gsum__swatch code { font-size: 0.75rem; color: var(--muted); }
.gsum__link { color: var(--ui-accent); word-break: break-all; }
.gsum__pill { padding: 0.125rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; color: var(--ink); }
.gsum__pill.is-off { color: var(--muted); font-weight: 500; }
/* The group has set nothing up for this card: its own line under the bar's row. */
.inheritbar__warn { order: 3; flex-basis: 100%; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid #fde68a; border-radius: 0.5rem; background: #fffbeb; font-size: 0.8125rem; line-height: 1.45; color: #78350f; }
/* Once the location owns the card the bar is a statement of fact, not an instruction, so it
   stops wearing the accent and steps back. */
.inheritbar.is-own { background: var(--cream); }
.inheritbar.is-own .inheritbar__what { color: var(--ink-2); }
/* The disabled fields are legible rather than greyed into unreadability: they are the answer
   to "what does this clinic use", which is the reason for showing them at all. */
.is-inherited input:disabled, .is-inherited select:disabled, .is-inherited textarea:disabled {
  background: var(--cream); color: var(--ink-2); cursor: default;
}
.is-inherited .btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---- where settings are decided (org.js) --------------------------------------------------
   A summary, not a switch: one row per shared card saying how many locations follow the group
   and naming the ones that do not. It answers "why does Bondi look different?", which is the
   question a group hits months in and nothing else in the product answers. */
.whereset { display: grid; gap: 0.25rem; }
/* What the card is | who follows the group | the way back. Three fixed columns so every
   row's reset lands in the same place down the card. */
.whereset__row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: start;
  gap: 0.25rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.whereset__row:last-child { border-bottom: 0; }
.whereset__card { font-weight: 600; color: var(--ink); padding-top: 0.0625rem; }
.whereset__state { display: grid; gap: 0.375rem; min-width: 0; }
.whereset__count { color: var(--ink-2); }
/* Chips, not prose: a wrapped run of link buttons broke names across lines and centred the
   fragments. Each name stays whole and the row wraps between them. */
/* The locations that set their own: a row of chips, left-aligned under the sentence. Each chip
   is the name (opens that location) and a small reset for that location alone. */
.whereset__chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.375rem; }
.whereset__chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: #f1f5f9;
}
.whereset__chip:hover { border-color: #cbd5e1; }
.whereset__loc {
  padding: 0.1875rem 0.25rem 0.1875rem 0.625rem; border: 0; border-radius: 999px;
  background: none;
  font: inherit; font-weight: 600; color: var(--ui-accent);
  white-space: nowrap; cursor: pointer;
}
.whereset__loc:hover { color: var(--ui-accent-strong); text-decoration: underline; }
.whereset__chipreset {
  display: grid; place-items: center; width: 1.625rem; height: 1.625rem; margin-right: 0.125rem;
  border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
}
.whereset__chipreset:hover { background: #e2e8f0; color: var(--ink); }
.whereset__warn { padding: 0.375rem 0.625rem; border: 1px solid #fde68a; border-radius: 0.5rem; background: #fffbeb; font-size: 0.8125rem; line-height: 1.45; color: #78350f; justify-self: start; }
.whereset__chipreset:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.whereset__chipreset svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.whereset__loc:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 720px) {
  /* Three columns of prose on a phone is three one-word lines; stack instead. */
  .whereset__row { grid-template-columns: 1fr; gap: 0.375rem; }
}
/* Arrived here from a name in "Where settings are decided": the card that name was about
   gets one slow pulse, so the reader lands looking at it rather than hunting for it. The
   edge only -- nothing moves, and nothing is left highlighted afterwards. */
@keyframes cardflag {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  18%  { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.card.is-flagged { animation: cardflag 2.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .card.is-flagged { animation: none; }
}

/* Quieter than the names beside it: the names are where a reader usually goes, and this is
   the blunt alternative. */
.whereset__reset { margin-top: 0; color: var(--muted); white-space: nowrap; }
.whereset__reset:hover { color: var(--ui-accent); }

/* ------------------------------------------------------------ SmileReply support -- */
/* The banner while support is inside a practice (app.js renderSupportBar). Amber, so it
   cannot be mistaken for the practice's own chrome. */
.supportbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.625rem 1.25rem; background: #fef3c7; color: #78350f;
  border-bottom: 1px solid #fcd34d; font-size: 0.875rem;
  position: sticky; top: 0; z-index: 30;
}
.supportbar[hidden] { display: none; }
.supportbar__text { min-width: 0; overflow-wrap: anywhere; }
.supportbar__why { color: #92400e; }
.supportbar__leave { background: #78350f; color: #fff; flex: none; }
.supportbar__leave:hover { background: #5b2a0c; }
.supportbar__acts { display: flex; gap: 0.5rem; flex: none; }
.supportbar__mask { background: transparent; color: #78350f; border: 1px solid #d97706; }
.supportbar__mask:hover { background: #fde68a; }

/* Patient photos while support has details masked (app.js patientsMasked). Discipline, not
   security: the image is still downloaded. Every place a patient's own photo, attachment or
   before/after is drawn is listed here, so a new one has to be added on purpose. */
body.is-masked .ph--img,
body.is-masked .ph-cell__img,
body.is-masked .photo-main__img,
body.is-masked .gm-lb__img,
body.is-masked .simpick__cell img,
body.is-masked .det__photo img,
body.is-masked .mfile--img img,
body.is-masked .psim__cell img,
body.is-masked .pbox__img,
body.is-masked .rec__photo img { filter: blur(14px) grayscale(0.4); }

/* The support screen (support.js). */
.sup__bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sup__search { flex: 1 1 20rem; }
.sup__count { color: var(--muted); font-size: 0.875rem; }
.sup__list { display: grid; gap: 0.625rem; }
.sup__loading { color: var(--muted); }
.sup__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border: 1px solid var(--line); box-shadow: none;
}
.sup__main { min-width: 0; display: grid; gap: 0.25rem; }
.sup__name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sup__meta { color: var(--ink-2); font-size: 0.8125rem; overflow-wrap: anywhere; }
.sup__meta code { font-size: 0.75rem; color: var(--muted); }
.sup__group { font-weight: 600; }
.sup__group--solo { font-weight: 400; color: var(--muted); }
.sup__stats { color: var(--muted); font-size: 0.75rem; }
.sup__pill { font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 999px; }
.sup__pill.is-on { background: #dcfce7; color: #166534; }
.sup__pill.is-off { background: #f1f5f9; color: #64748b; }
.sup__pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 640px) {
  .sup__row { flex-direction: column; align-items: stretch; }
  .supportbar { padding: 0.625rem 1rem; }
}
.login__row--start { justify-content: flex-start; margin: 1rem 0 0; }

/* Two-step sign-in setup (support.js, #/support/security). */
.sec { max-width: 40rem; display: grid; gap: 1rem; }
.sec__state { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.sec__qr { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.sec__qr svg { width: 11rem; height: 11rem; border: 1px solid var(--line); border-radius: 0.75rem; flex: none; }
.sec__secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; background: #f8fafc; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.625rem; }
.sec__row { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.sec__row .input { width: 9rem; }
.sec code { font-size: 0.75rem; overflow-wrap: anywhere; }
.sup__twostep { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; margin-bottom: 1rem; border: 1px solid #fcd34d; background: #fffbeb; box-shadow: none; }
.sup__twostep.is-on { border-color: var(--line); background: var(--surface); }

/* ------------------------------------------------------------ record of care -- */
/* The read-only record page (record.js). */
.rec { display: grid; gap: 1rem; max-width: 60rem; }
.rec h3 { margin: 0 0 0.75rem; font-size: 1.0625rem; }
.rec h4 { margin: 1rem 0 0.375rem; font-size: 0.875rem; color: var(--ink-2); }
.rec p { margin: 0; line-height: 1.55; }
.rec ul { margin: 0; padding-left: 1.125rem; line-height: 1.55; }
.rec__head { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1.5rem; align-items: start; }
.rec__head h2 { margin: 0.125rem 0 0.375rem; font-size: 1.375rem; }
.rec__head .rec__kv { grid-column: 1 / -1; }
.rec__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5b21b6; }
.rec__note { color: var(--muted); font-size: 0.8125rem; }
.rec__kv { display: grid; grid-template-columns: 10rem 1fr; gap: 0.375rem 1rem; margin: 0; font-size: 0.875rem; }
.rec__kv dt { color: var(--muted); }
.rec__kv dd { margin: 0; overflow-wrap: anywhere; }
.rec__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rec__table th, .rec__table td { text-align: left; padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.rec__table th { color: var(--muted); font-weight: 600; }
.rec__tag { font-size: 0.6875rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 0.375rem; }
.rec__transcript { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.rec__transcript summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--ink-2); }
.rec__transcript p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-2); white-space: pre-wrap; }
.rec__msgs { list-style: none; padding: 0 !important; display: grid; gap: 0.625rem; }
.rec__msg { padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: #f8fafc; border: 1px solid var(--line); }
.rec__msg--out { background: var(--ui-accent-soft); }
.rec__who { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.125rem; }
.rec__photos { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.rec__photo { margin: 0; width: 9rem; }
.rec__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--line); }
.rec__photo figcaption { font-size: 0.75rem; color: var(--muted); text-transform: capitalize; }
@media (max-width: 640px) {
  .rec__head { grid-template-columns: 1fr; }
  .rec__kv { grid-template-columns: 1fr; gap: 0.125rem; }
  .rec__kv dd { margin-bottom: 0.375rem; }
}

/* ------------------------------------------------------------ account menu -- */
.acct { position: relative; margin-left: 0.625rem; }
.topbar__user .acct .btn { margin-left: 0; }
.acct__btn { display: inline-flex; align-items: center; gap: 0.375rem; }
.acct__chev { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; min-width: 15.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14); padding: 0.5rem; display: grid; gap: 0.125rem;
}
.acct__menu[hidden] { display: none; }
.acct__item {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0.75rem; padding: 0.6875rem 0.875rem;
  font: inherit; font-size: calc(0.9375rem - 1px); color: var(--ink-2); cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
/* Hover, keyboard focus, and the page you are on: a soft blue row with blue text and icon. */
.acct__item:hover, .acct__item:focus-visible, .acct__item.is-current {
  background: var(--ui-accent-soft); color: var(--ui-accent); outline: none;
}
.acct__item[hidden] { display: none; }
.acct__item svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); flex: none; }
.acct__item:hover svg, .acct__item:focus-visible svg, .acct__item.is-current svg { color: var(--ui-accent); }
.acct__sep { height: 1px; background: var(--line); margin: 0.375rem 0.5rem; }
.acct__item--out, .acct__item--out svg { color: #dc2626; }
.acct__item--out:hover, .acct__item--out:focus-visible { background: #fef2f2; color: #dc2626; }
.acct__item--out:hover svg, .acct__item--out:focus-visible svg { color: #dc2626; }

/* ------------------------------------------------------------ patient records -- */
.recs__bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.recs__search { flex: 1 1 20rem; }
.recs__count { color: var(--muted); font-size: 0.875rem; }
.recs__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.recs__table th, .recs__table td { text-align: left; padding: 0.75rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.recs__table th { color: var(--muted); font-weight: 600; font-size: 0.8125rem; }
.recs__table tr:last-child td { border-bottom: 0; }
.recs__who strong { display: block; }
.recs__who small { color: var(--muted); overflow-wrap: anywhere; }
.recs__acts { display: flex; gap: 0.5rem; justify-content: flex-end; white-space: nowrap; }
.recs__pill { font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.recs__pill.is-live { background: #dcfce7; color: #166534; }
.recs__pill.is-archived { background: #f5f3ff; color: #5b21b6; }
.recs__note { color: var(--muted); font-size: 0.8125rem; margin: 0 0 1rem; }
@media (max-width: 760px) {
  .recs__table thead { display: none; }
  .recs__table tr { display: grid; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .recs__table td { border: 0; padding: 0.125rem 0; }
  .recs__acts { justify-content: flex-start; }
}
/* `display:flex` above outranks the [hidden] attribute; a one-page list showed its pager. */
.sup__pager[hidden] { display: none; }
.recs__acts a.btn { text-decoration: none; }

/* ------------------------------------------------------------ reminders off -- */
/* subdata.js remindersHtml: grade header and the Messages details column. */
.rem { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8125rem; }
.rem__badge { font-size: 0.75rem; font-weight: 700; padding: 0.1875rem 0.5625rem; border-radius: 999px; background: #fef3c7; color: #92400e; }
.rem__who { color: var(--muted); }
.rem__btn { font-size: 0.8125rem; }
.grade-meta .rem { margin-left: 0.25rem; }
.grade-meta .rem__badge { align-self: center; cursor: help; }
.grade-meta .rem__badge[hidden] { display: none; }
/* `display:flex` on these outranks [hidden]: the Edit patient menu hides Move and Reminders
   until they apply, and the plain Delete button is only pressed by the menu. */
.status-opt[hidden], .grade-delete[hidden] { display: none; }
.rec__note--dates { grid-column: 1 / -1; margin-top: -0.25rem; }

/* ------------------------------------------------------------ activity log -- */
/* activity.js: a Google Ads-style change history. */
.act__tabs { margin-bottom: 0.75rem; padding: 0; }
.act__bar { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 1rem; }
.act__search { flex: 1 1 16rem; }
.act__who { flex: 0 1 15rem; }
.act__date { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted); }
.act__date .input input { padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
.act__list { list-style: none; margin: 0; padding: 0; }
.act__row { display: grid; grid-template-columns: 11rem 1fr auto; gap: 0.25rem 1rem; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--line); align-items: start; }
.act__row:last-child { border-bottom: 0; }
.act__when { font-size: 0.8125rem; color: var(--muted); padding-top: 0.0625rem; }
.act__what { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.act__who { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }
.act__patient { font-weight: 600; margin-left: 0.25rem; text-decoration: none; }
.act__patient--gone { color: var(--muted); font-weight: 500; }
.act__tag { margin-left: 0.5rem; font-size: 0.6875rem; font-weight: 700; padding: 0.0625rem 0.4375rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.act__changes { list-style: none; margin: 0.375rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.8125rem; }
.act__changes li { overflow-wrap: anywhere; }
.act__field { color: var(--ink-2); font-weight: 600; margin-right: 0.25rem; }
.act__changes s { color: #94a3b8; }
.act__changes b { color: var(--ink); font-weight: 600; }
.act__row--deletions .act__what::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #dc2626; margin-right: 0.5rem; vertical-align: middle; }
.act__row--access .act__what::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #d97706; margin-right: 0.5rem; vertical-align: middle; }
@media (max-width: 760px) {
  .act__row { grid-template-columns: 1fr auto; }
  .act__when { grid-column: 1 / -1; }
}
.recs__pill { display: inline-block; }
.recs__kept { display: block; margin-top: 0.4375rem; font-size: 0.75rem; color: var(--muted); }

/* Plan cards over a personal video (app.js pvPlanCards): the scene page in solo mode, at 1920x1080,
   scaled into a clipping box in the corner. */
.pvplan { position: absolute; overflow: hidden; z-index: 3; pointer-events: none; border-radius: 1.4%; }
/* Hidden by visibility, never display:none: a frame that is not laid out cannot measure its
   card, and the card's size is what places it. */
.pvplan[hidden] { display: block; visibility: hidden; }
.pvplan__frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0;
  transform-origin: 0 0; background: transparent; pointer-events: none; }

/* Account settings (#/account, account.js): the signed-in person's own login. */
.acctset { max-width: 40rem; display: grid; gap: 1.125rem; }
.acctset .cardhead { margin-bottom: 1.125rem; }
.acctset__who { display: grid; gap: 0.75rem; margin: 0; }
.acctset__who > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.acctset__who dt { font-size: 0.8125rem; color: var(--muted); }
.acctset__who dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.acctset form .field { margin-bottom: 1rem; }
.acctset .alert, .acctset__done { margin: 0 0 1rem; }

/* Contact support (helpchat.js): the unread dot on Account, the menu count, and the chat panel. */
.acct__btn { position: relative; }
.acct__dot { position: absolute; top: -0.2rem; right: -0.2rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #fff; }
.acct__dot[hidden] { display: none; }
.acct__count { margin-left: auto; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3rem; box-sizing: border-box; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.acct__count[hidden] { display: none; }
.hc { position: fixed; top: 0; right: 0; bottom: 0; z-index: 180; width: min(26rem, 100vw); display: flex; flex-direction: column;
  background: var(--surface, #fff); border-left: 1px solid var(--line); box-shadow: -18px 0 48px rgba(15, 23, 42, 0.14); }
.hc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.375rem 1rem; border-bottom: 1px solid var(--line); }
.hc__head h2 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.hc__head p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.hc__list { flex: 1; overflow-y: auto; padding: 1.125rem 1.375rem; display: flex; flex-direction: column; gap: 0.875rem; background: #f8fafc; }
.hc__empty { margin: auto; text-align: center; color: var(--muted); font-size: 0.875rem; line-height: 1.5; max-width: 17rem; }
.hc__empty svg { width: 2rem; height: 2rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.6; margin-bottom: 0.5rem; }
.hc__loading { color: var(--muted); font-size: 0.875rem; }
.hc__msg { display: flex; flex-direction: column; max-width: 85%; }
.hc__msg.is-mine { align-self: flex-end; align-items: flex-end; }
.hc__msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.hc__bubble { padding: 0.625rem 0.875rem; border-radius: 1rem; font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.hc__msg.is-mine .hc__bubble { background: var(--ui-accent); color: #fff; border-bottom-right-radius: 0.3rem; }
.hc__msg.is-theirs .hc__bubble { background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; }
.hc__meta { margin-top: 0.3rem; font-size: 0.6875rem; color: var(--muted); }
.hc__compose { padding: 0.875rem 1.375rem 1.125rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; }
.hc__compose textarea, .ib__reply textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5rem; padding: 0.625rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.75rem; font: inherit; font-size: 0.875rem; line-height: 1.5; color: var(--ink); background: #fff; }
.hc__compose textarea:focus, .ib__reply textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.hc__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hc__hint { font-size: 0.75rem; color: var(--muted); }
.hc__err { margin: 0; font-size: 0.8125rem; color: #b91c1c; }
.hc__err[hidden] { display: none; }

/* Support inbox (inbox.js): conversations on the left, the open one on the right. */
.ib { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.125rem; align-items: start; }
.ib__side { padding: 0.5rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
.ib__main { padding: 0; display: flex; flex-direction: column; min-height: 28rem; max-height: calc(100vh - 12rem); }
.ib__empty { padding: 1.25rem; color: var(--muted); font-size: 0.875rem; }
.ib__row { display: grid; gap: 0.25rem; width: 100%; text-align: left; padding: 0.75rem 0.875rem; border: 0; border-radius: 0.75rem; background: none; font: inherit; cursor: pointer; }
.ib__row:hover { background: #f8fafc; }
.ib__row.is-on { background: var(--ui-accent-soft); }
.ib__rowtop { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.ib__rowtop strong { font-size: 0.875rem; color: var(--ink); font-weight: 600; }
.ib__row.is-unread .ib__rowtop strong { font-weight: 800; }
.ib__rowtop small { font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.ib__preview { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib__tags { display: flex; gap: 0.375rem; }
.ib__tag { font-size: 0.6875rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; background: #f1f5f9; color: var(--ink-2); }
.ib__tag.is-new { background: #fee2e2; color: #b91c1c; }
.ib__tag.is-wait { background: #fef3c7; color: #92400e; }
.ib__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--line); }
.ib__head h2 { margin: 0; font-size: 1rem; }
.ib__status { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--muted); }
.ib__headbtns { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.ib__msgs { flex: 1; overflow-y: auto; padding: 1.125rem 1.375rem; display: flex; flex-direction: column; gap: 0.875rem; background: #f8fafc; }
.ib__ctx { margin-top: 0.25rem; font-size: 0.6875rem; color: var(--muted); }
.ib__reply { padding: 0.875rem 1.375rem 1.125rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; }
@media (max-width: 900px) { .ib { grid-template-columns: 1fr; } }
/* Contact support attachments. */
.hc__tools { display: inline-flex; align-items: center; gap: 0.5rem; }
.hc__attach { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; color: var(--muted); cursor: pointer; }
.hc__attach:hover { color: var(--ui-accent); border-color: #cbd5e1; }
.hc__attach svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc__pending { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hc__pending[hidden] { display: none; }
.hc__thumb { position: relative; width: 4rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--line); background: #f8fafc; display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem; color: var(--muted); }
.hc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hc__thumb button { position: absolute; top: 0.15rem; right: 0.15rem; width: 1.125rem; height: 1.125rem; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.7); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hc__thumb button svg { width: 0.625rem; height: 0.625rem; fill: none; stroke: currentColor; stroke-width: 2.4; }
.hc__imgs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.hc__msg.is-mine .hc__imgs { justify-content: flex-end; }
.hc__imgs img { width: 7.5rem; height: 5.5rem; object-fit: cover; border-radius: 0.625rem; border: 1px solid var(--line); display: block; }

/* Help centre (#/help, help.js). The page root is .helpc, NOT .help: .help is the sidebar's
   "Need help?" link, and a page rule on it stacked that link's icon above its text. */
.helpc { display: grid; gap: 1.25rem; }
.help__muted { color: var(--muted); font-size: 0.875rem; }
.help__search { display: flex; align-items: center; gap: 0.875rem; padding: 0 0.75rem 0 1.25rem; height: 3.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05); }
.help__search:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.help__search > svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--ink-2); stroke-width: 1.9; flex: none; }
.help__search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: calc(1rem - 2px); color: var(--ink); }
.help__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.help__topic { padding: 1.5rem 1.5rem 0.75rem; }
.help__topichead { display: flex; gap: 1.125rem; align-items: center; padding-bottom: 1rem; }
.help__topicicon { flex: none; width: 3.15rem; height: 3.15rem; border-radius: 0.9rem; background: var(--ui-accent-soft);
  display: flex; align-items: center; justify-content: center; color: var(--ui-accent); }
.help__topicicon svg { width: 1.575rem; height: 1.575rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.help__topichead h2 { margin: 0; font-size: calc(1.25rem - 3px); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.help__topichead p { margin: 0.25rem 0 0; font-size: calc(0.875rem - 1px); color: var(--muted); line-height: 1.45; }
.help__list { list-style: none; margin: 0; padding: 0; }
.help__list li + li a, .help__list li:first-child a { border-top: 1px solid var(--line); }
.help__list a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0;
  font-size: calc(0.9375rem - 1px); color: var(--ink-2); text-decoration: none; }
.help__list a svg { width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; transition: transform 0.12s; }
.help__list a:hover { color: var(--ui-accent); }
.help__list a:hover svg { stroke: var(--ui-accent); transform: translateX(2px); }
.help__count { margin: 1.25rem 0 0.875rem; font-size: 0.875rem; color: var(--muted); }
.help__count strong { color: var(--ink); font-weight: 600; }
/* Each result its own card, an arrow on the far right. */
.help__results { display: grid; gap: 0.75rem; }
.help__result { display: flex; align-items: center; gap: 1.25rem; padding: 1.125rem 1.5rem; text-decoration: none; color: inherit;
  transition: box-shadow 0.15s, transform 0.15s; }
.help__result:hover { box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08); }
.help__resulttxt { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.help__result strong { color: var(--ink); font-size: calc(1.125rem - 1px); font-weight: 700; }
.help__result p { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--muted); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* always one line */
/* While searching, the page narrows: roughly the article column, 100px wider (user's call). */
@media (min-width: 1101px) { .helpc.is-searching { padding-right: calc(21.5rem - 100px); } }
.help__resultgo { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.help__result:hover .help__resultgo { stroke: var(--ui-accent); }
/* The clear (x) takes the shortcut hint's place once something is typed. */
.help__clear { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.625rem;
  background: none; color: var(--ink-2); cursor: pointer; }
.help__clear:hover { background: #f1f5f9; }
.help__clear[hidden] { display: none; }
.help__clear svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.help__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.help__topiclabel { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-accent); }
.help__stuck { display: flex; align-items: center; gap: 1.125rem; padding: 1rem 1.25rem; flex-wrap: wrap; }
.help__stuckicon { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--ui-accent-soft); color: var(--ui-accent);
  display: flex; align-items: center; justify-content: center; }
.help__stuckicon svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.help__stucktxt { flex: 1; min-width: 12rem; }
.help__stucktxt strong { font-size: calc(1.125rem - 1px); color: var(--ink); }
.help__stucktxt p { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--muted); }
/* The same size as the grading screen's Send to patient (.grade-bar__send .btn). */
.help__stuckbtn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }
.help__stuckbtn svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; }
.help__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted); }
.help__crumbs a { color: var(--ui-accent); text-decoration: none; }
.help__crumbs a:hover { text-decoration: underline; }
.help__crumbs svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: var(--muted); stroke-width: 2; }
.help__layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.help__main { display: grid; gap: 1.25rem; min-width: 0; }
.help__title { margin: calc(0.25rem + 10px) 0 0; font-size: calc(2.5rem - 8px); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.help__lead { margin-top: -0.5rem; font-size: calc(1.0625rem - 2px); line-height: 1.6; color: var(--muted); max-width: 52rem; }
.help__lead p { margin: 0 0 0.5rem; }
.help__lead p:last-child { margin-bottom: 0; }
/* A panel in the lead runs the full width of the cards below it, and the gap under it is the
   standard one between cards rather than that plus the panel's own margin. */
.help__lead:has(.help__panels) { max-width: none; }
.help__lead > .help__panels:last-child { margin-bottom: 0; }
.help__section { padding: 1.5rem 1.75rem; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); }
.help__section h2 { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 1.5rem; }
.help__section h3 { margin: 1.25rem 0 0.375rem; font-size: 1rem; color: var(--ink); }
.help__section p { margin: 0 0 0.875rem; }
.help__section > :last-child { margin-bottom: 0; }
.help__section ul, .help__section ol { margin: 0 0 1rem; padding-left: 1.375rem; display: grid; gap: 0.375rem; }
.help__section code { font-size: 0.8125rem; background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: 0.3rem; }
.help__section a, .help__lead a { color: var(--ui-accent); text-decoration: none; }
.help__section a:hover, .help__lead a:hover { text-decoration: underline; }
/* Numbered steps: a circle per step on a dotted line, title in bold, a rule between steps. */
.help__section ol.help__steps { list-style: none; padding: 0; gap: 0; margin: 0; }
.help__steps li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; }
.help__steps li:not(:last-child)::before { content: ""; position: absolute; left: 1.5rem; top: 3.25rem; bottom: -0.25rem;
  border-left: 2px dotted #c7d7ee; transform: translateX(-1px); }
.help__stepnum { width: 3rem; height: 3rem; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin-top: 0.75rem; }
.help__steptxt { padding: 0.875rem 0 1.125rem; }
.help__steps li:not(:last-child) .help__steptxt { border-bottom: 1px solid var(--line); }
.help__steptxt > strong { display: block; font-size: 1.0625rem; color: var(--ink); margin-bottom: 0.25rem; }
.help__steptxt p strong { color: var(--ink-2); }
.help__steptxt p { margin: 0; color: var(--muted); }
.help__note { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: 0.875rem 1.125rem;
  border-radius: 0.875rem; background: var(--ui-accent-soft); color: var(--ink-2); font-size: 0.875rem; line-height: 1.55; }
.help__noteicon { flex: none; width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.8;
  padding-right: 1rem; box-sizing: content-box; border-right: 1px solid #c9dcf7; }
.help__notetxt strong { color: var(--ink); }
.help__secsub { margin: -0.5rem 0 1.125rem !important; color: var(--muted); font-size: 0.9375rem; }
/* Item grid (:::items): name and meaning per row, two columns. */
.help__items { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 1rem; margin: 0 0 0.25rem; }
.help__item { display: grid; grid-template-columns: auto 10.25rem minmax(0, 1fr); align-items: center; gap: 0 0.75rem;
  padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: 0.875rem; background: var(--surface); }
.help__itemicon { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; }
/* :where() keeps the default blue at zero weight, so a status class (.s-new, .s-booking...) colours the tile. */
:where(.help__itemicon) { background: var(--ui-accent-soft); color: var(--ui-accent); }
.help__itemicon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help__dottile i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; }
.help__itemname { font-weight: 700; color: var(--ink); font-size: 0.9375rem; white-space: nowrap; padding-right: 0.75rem; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.help__itemname a { color: var(--ui-accent); }
.help__itemtxt { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
/* Panels (:::panel): side-by-side cards, each a heading, a subtitle and stacked rows. */
.help__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 0 0 1.125rem; }
.help__panel { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.125rem; background: var(--surface);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); }
.helpc .help__panel h3 { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.helpc .help__panel > p { margin: 0 0 1rem; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.help__prows { display: grid; gap: 0.625rem; }
.help__prow { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: 0.875rem; }
.help__prow .help__itemicon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; }
.help__prow .help__itemicon svg { width: 1.5rem; height: 1.5rem; }   /* sized to the bigger tile */
.help__prow > div > strong { display: block; font-size: 0.9375rem; color: var(--ink); line-height: 1.35; }
.help__prow > div > span { display: block; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.help__prow > div > span strong { color: var(--ink-2); }
@media (max-width: 1280px) { .help__panels { grid-template-columns: 1fr; } }
.help__panels--one { grid-template-columns: 1fr; }
.help__panel .help__fig { margin: 0 0 1rem; }
/* Put-together flow (:::flow): picture + words per step, arrows down between them. */
.help__vflow { margin: 0.25rem 0 1.25rem; }
.help__vstep { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.125rem; align-items: center;
  padding: 0.75rem; border: 1px solid var(--line); border-radius: 1rem; background: #f8fafd; }
.help__vimg { display: block; border-radius: 0.625rem; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.help__vimg img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.help__vtxt { display: flex; align-items: flex-start; gap: 0.75rem; }
.help__vnum { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 0.8125rem; font-weight: 700; }
.help__vtxt strong { display: block; font-size: 1rem; color: var(--ink); line-height: 1.35; margin-bottom: 0.15rem; }
.help__vtxt span:not(.help__vnum) { display: block; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.help__varrow { display: flex; justify-content: center; padding: 0.3rem 0; color: #94a3b8; }
.help__varrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .help__vstep { grid-template-columns: 1fr; } }
/* Copyable message (:::copy). */
.help__copy { margin: 0.25rem 0 1.125rem; border: 1px solid var(--line); border-radius: 1rem; background: #f8fafc; overflow: hidden; }
.help__copyhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.help__copyhead strong { font-size: 0.9375rem; color: var(--ink); }
.help__copytext { margin: 0; padding: 1rem 1.125rem; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
  font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
/* Timeline (:::timeline): cards joined by arrows. */
.help__flow { display: flex; align-items: center; gap: 0.625rem; margin: 0.25rem 0 1.125rem; }
.help__flowstep { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: calc(0.875rem - 1px) 1rem; border-radius: 0.875rem; background: #f3f7fe; }
.help__flowstep .help__itemicon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--ui-accent-soft); color: var(--ui-accent); }   /* as the Still stuck tile */
.help__flowstep strong { display: block; font-size: calc(1.0625rem - 2px); color: var(--ink); }
.help__flowstep span { color: var(--muted); font-size: calc(0.875rem - 1px); white-space: nowrap; }
.help__flowarrow { color: #94a3b8; font-size: 1.375rem; flex: none; }
@media (max-width: 1280px) { .help__items { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none !important; } }
@media (max-width: 760px) { .help__flow { flex-direction: column; align-items: stretch; } .help__flowarrow { transform: rotate(90deg); align-self: center; } .help__item { grid-template-columns: auto 1fr; } .help__itemtxt { grid-column: 2; } .help__itemname { border-right: 0; } }
.help__fig { margin: 0.5rem 0 1.25rem; }
.help__fig img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); }
.help__fig figcaption { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
/* The right-hand card: On this page, then Related articles. */
.help__aside { position: sticky; top: 1.25rem; padding: 1.25rem; display: grid; gap: 1.25rem; }
.help__asideblock { display: grid; gap: 0.25rem; }
.help__asideblock + .help__asideblock { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.help__asidelabel { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem; }
.help__toclink { position: relative; display: block; padding: 0.55rem 0.875rem; border-radius: 0.625rem; font-size: 0.9375rem;
  color: var(--ink-2); text-decoration: none; }
.help__toclink:hover { color: var(--ui-accent); }
.help__toclink.is-on { background: var(--ui-accent-soft); color: var(--ui-accent); }
.help__toclink.is-on::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 3px; background: var(--ui-accent); }
.help__related { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.375rem; font-size: 0.9375rem; color: var(--ink-2); text-decoration: none; border-radius: 0.5rem; }
.help__related:hover { color: var(--ui-accent); }
.help__related svg { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.help__related:hover svg { stroke: var(--ui-accent); }
@media (max-width: 1100px) { .help__layout { grid-template-columns: 1fr; } .help__aside { position: static; } }
@media (max-width: 960px) { .help__topics { grid-template-columns: 1fr; } .help__title { font-size: 2rem; } .help__section { padding: 1.25rem; } }