/* TheraChart EMR — design tokens + app styles (light & dark) */

:root {
  /* render native controls (select menus, date pickers) to match the theme */
  color-scheme: light;
  --bg: #f4f7f9;
  --panel: #ffffff;
  --ink: #1f2d3a;
  --muted: #64748b;
  --accent: #0F8A80;
  --accent-ink: #ffffff;
  --accent-soft: #E6F5F2;
  --point: #e03e52;
  --border: #e2e8f0;
  --sil: #cfdce6;
  --sil-line: #b6c8d6;
  --hover: #f6f9fb;
  --flash: #fff3d6;
  --hl: #ffe9a8;
  --hl-strong: #ffd166;
  --review: #b9820a;
  --review-soft: #fdf3dd;
  --sev-high: #e0453f; --sev-mid: #e0891e; --sev-low: #1f9d57; --sev-none: #8494a3;
  --dt-eval: #6d5ae0; --dt-daily: #0e7c86; --dt-progress: #d98a1e; --dt-discharge: #2f9e6f;
  --good: #1a7f4b;
  --good-soft: #e2f4e9;
  --danger: #c22f43;
  --danger-soft: #fde8ea;
  --danger-border: #f2b8c0;
  --shadow: 0 1px 3px rgba(15, 30, 45, 0.08), 0 4px 16px rgba(15, 30, 45, 0.06);
  --sidebar: #10333b;
  --sidebar-ink: #d7e6e9;
  --sidebar-active: #17505c; --brand-1: #3ec6d0; --brand-2: #0e7c86; --brand-3: #6d5ae0; --brand-ink: #10333b; --brand-grad: linear-gradient(145deg,#3ec6d0,#0e7c86 62%,#0a5b63); --brand-grad-tv: linear-gradient(135deg,#3ec6d0 0%,#2f8f9c 45%,#6d5ae0);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #131c25;
    --panel: #1b2733;
    --ink: #e4edf4;
    --muted: #93a5b5;
    --accent: #3ab6c0;
    --accent-ink: #06272b;
    --accent-soft: #143740;
    --point: #e25a6d;
    --border: #2b3a49;
    --sil: #40536b;
    --sil-line: #55688a;
    --hover: #22303e;
    --flash: #4a3c17;
    --hl: #4a3c17;
    --hl-strong: #7a5c10;
    --review: #e3b341;
    --review-soft: #39301a;
  --sev-high: #f0645e; --sev-mid: #efab4a; --sev-low: #46c47f; --sev-none: #9aa9b6;
  --dt-eval: #9b8bff; --dt-daily: #3ab6c0; --dt-progress: #efab4a; --dt-discharge: #56c99b;
    --good: #4cc98a;
    --good-soft: #14331f;
    --danger: #ef7285;
    --danger-soft: #45242b;
    --danger-border: #7a3c47;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.28);
    --sidebar: #0d222a;
    --sidebar-ink: #b9cdd2;
    --sidebar-active: #16424d; --brand-1: #3ec6d0; --brand-2: #0e7c86; --brand-3: #6d5ae0; --brand-ink: #10333b; --brand-grad: linear-gradient(145deg,#3ec6d0,#0e7c86 62%,#0a5b63); --brand-grad-tv: linear-gradient(135deg,#3ec6d0 0%,#2f8f9c 45%,#6d5ae0);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7f9; --panel: #ffffff; --ink: #1f2d3a; --muted: #64748b;
  --accent: #0F8A80; --accent-ink: #ffffff; --accent-soft: #E6F5F2;
  --point: #e03e52; --border: #e2e8f0; --sil: #cfdce6; --sil-line: #b6c8d6;
  --hover: #f6f9fb; --flash: #fff3d6; --hl: #ffe9a8; --hl-strong: #ffd166;
  --review: #b9820a; --review-soft: #fdf3dd;
  --sev-high: #e0453f; --sev-mid: #e0891e; --sev-low: #1f9d57; --sev-none: #8494a3;
  --dt-eval: #6d5ae0; --dt-daily: #0e7c86; --dt-progress: #d98a1e; --dt-discharge: #2f9e6f;
  --good: #1a7f4b; --good-soft: #e2f4e9;
  --danger: #c22f43; --danger-soft: #fde8ea; --danger-border: #f2b8c0;
  --shadow: 0 1px 3px rgba(15, 30, 45, 0.08), 0 4px 16px rgba(15, 30, 45, 0.06);
  --sidebar: #10333b; --sidebar-ink: #d7e6e9; --sidebar-active: #17505c; --brand-1: #3ec6d0; --brand-2: #0e7c86; --brand-3: #6d5ae0; --brand-ink: #10333b; --brand-grad: linear-gradient(145deg,#3ec6d0,#0e7c86 62%,#0a5b63); --brand-grad-tv: linear-gradient(135deg,#3ec6d0 0%,#2f8f9c 45%,#6d5ae0);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131c25; --panel: #1b2733; --ink: #e4edf4; --muted: #93a5b5;
  --accent: #3ab6c0; --accent-ink: #06272b; --accent-soft: #143740;
  --point: #e25a6d; --border: #2b3a49; --sil: #40536b; --sil-line: #55688a;
  --hover: #22303e; --flash: #4a3c17; --hl: #4a3c17; --hl-strong: #7a5c10;
  --review: #e3b341; --review-soft: #39301a;
  --sev-high: #f0645e; --sev-mid: #efab4a; --sev-low: #46c47f; --sev-none: #9aa9b6;
  --dt-eval: #9b8bff; --dt-daily: #3ab6c0; --dt-progress: #efab4a; --dt-discharge: #56c99b;
  --good: #4cc98a; --good-soft: #14331f;
  --danger: #ef7285; --danger-soft: #45242b; --danger-border: #7a3c47;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.28);
  --sidebar: #0d222a; --sidebar-ink: #b9cdd2; --sidebar-active: #16424d; --brand-1: #3ec6d0; --brand-2: #0e7c86; --brand-3: #6d5ae0; --brand-ink: #10333b; --brand-grad: linear-gradient(145deg,#3ec6d0,#0e7c86 62%,#0a5b63); --brand-grad-tv: linear-gradient(135deg,#3ec6d0 0%,#2f8f9c 45%,#6d5ae0);
}

* { box-sizing: border-box; }

/* The `hidden` attribute only sets `display: none` at user-agent priority, so
   any component rule that sets `display` silently beats it — `.btn` is
   inline-flex, which is why the recorder's Process/Discard buttons showed with
   nothing to process. Two backdrops already carried their own `[hidden]` patch
   for the same reason; this makes the attribute mean what it says everywhere. */
[hidden] { display: none !important; }

/* ---- Sidebar palette: dark teal-gradient rail in EVERY theme ----
   The rail is a fixed brand surface (the teal→ink gradient with soft teal/violet
   glows) that anchors the lighter content beside it; the rest of the app still
   follows light/dark. `var(--sidebar)` shifts the base a touch darker in dark
   mode. New rail elements (logo, count pill, active state, user row) all read
   against it via the tokens below. */
:root {
  --side-bg:
    radial-gradient(120% 60% at 15% 0%, rgba(58, 182, 192, 0.22), transparent 60%),
    radial-gradient(95% 55% at 100% 100%, rgba(109, 90, 224, 0.16), transparent 55%),
    linear-gradient(180deg, var(--sidebar), color-mix(in srgb, var(--sidebar) 82%, #000));
  --side-fg: #B4CBC7; --side-fg-strong: #F0FDFA;
  --side-border: rgba(255, 255, 255, 0.08); --side-hover: rgba(255, 255, 255, 0.06);
  --side-active-bg: rgba(94, 234, 212, 0.12); --side-active-fg: #7EF0DC;
  --side-rail: #5EEAD4; --side-label: rgba(255, 255, 255, 0.42);
  --side-wordmark: #F0FDFA; --side-sub: rgba(255, 255, 255, 0.5); --side-accent: #5EEAD4;
  --side-shadow: none;

  /* Solid-fill brand gradient for primary buttons. Same teal ramp as the rail
     and --brand-grad, but starting one step darker so white label text keeps
     its contrast on a small surface. Theme-independent, like --brand-grad.

     Vertical on purpose. A diagonal ramp is measured across the whole box, so
     on a wide control the horizontal leg dominates and the fill reads as a
     left-to-right wipe — a full-width Sign in button ended up visibly lighter
     on its left than its right, and no two buttons of different widths shaded
     alike. Top-to-bottom is uniform across the width at every size. */
  --btn-grad: linear-gradient(180deg, #14939a, #0e7c86 46%, #0a5b63);
  /* --brand-grad's ramp, turned vertical for the same reason, for the wide
     filled surfaces (mic pill, chat bubble). Square brand marks keep the
     diagonal --brand-grad: on a square it reads as a true diagonal. */
  --brand-grad-v: linear-gradient(180deg, #3ec6d0, #0e7c86 62%, #0a5b63);
  /* the pale end of the same ramp — headers and other large tinted surfaces.
     Runs teal → violet like --brand-grad-tv, but at wash strength so dark body
     text stays readable on top of it. */
  --brand-wash: linear-gradient(115deg,
    color-mix(in srgb, var(--brand-1) 30%, var(--panel)),
    color-mix(in srgb, var(--brand-2) 15%, var(--panel)) 46%,
    color-mix(in srgb, var(--brand-3) 9%, var(--panel)) 100%);

  /* One height for every small control that can share a toolbar row — buttons,
     chips, selects, date fields. A row is what the eye actually reads, so a
     40px date input next to a 34px button looks like a mistake even though
     each control is defensible on its own. Each keeps its own font and
     horizontal padding; only the height is common. Matched to `.btn.small`,
     which is the app-wide small control, and re-stated at the phone
     breakpoint where that button is padded out to a roomier tap target. */
  --control-h: 34px;
}

/* Keep iOS Safari from silently rescaling: never auto-adjust text on rotate,
   and never let the layout grow wider than the device so the browser has to
   "zoom out" to fit. The page always renders at exact device width. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}
/* Sora for the brand wordmark + top-level page titles (display) */
.brand-text b, .splash-title, .login-box h1, .page-head h1 {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
a { color: var(--accent); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.shell { display: flex; min-height: 100vh; padding-left: 276px; }

/* Light-clinical rail (brand handoff 1f) — a fixed 100vh panel pinned to the
   viewport. Themed via the --side-* tokens: light surface in light mode, the
   refined teal-gradient (1g) in dark mode. Fixed positioning is immune to the
   ancestor `overflow-x: hidden` that would otherwise break a sticky rail. */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 276px;
  height: 100vh;
  z-index: 30;
  color: var(--side-fg);
  background: var(--side-bg);
  border-right: 1px solid var(--side-border);
}
/* Fills the fixed rail as a flex column; the spacer pushes the user row to
   the very bottom of the panel. */
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px 16px;
}
.sidebar .brand .logo {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; flex: none;
  /* lift the deep-teal logo tile off the dark rail */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(94, 234, 212, 0.12);
}
.sidebar .brand .logo svg { width: 100%; height: 100%; display: block; }
.sidebar .brand-text b { color: var(--side-wordmark); font-weight: 700; font-size: 17px; display: block; line-height: 1.15; }
.sidebar .brand-text b em { color: var(--side-accent); font-style: normal; }
.sidebar .brand-text span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--side-sub); }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; }
.nav-group { margin-bottom: 12px; }
.nav-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--side-label); padding: 8px 12px 6px;
}
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 1px;
  border-radius: 9px;
  color: var(--side-fg);
  text-decoration: none;
  font-weight: 500; font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
/* icons render inline (no chip) in the new rail */
.nav-ico { display: inline-flex; flex: none; color: inherit; }
.nav-ico svg { display: block; }
/* compact label only used in the mobile bottom tab bar */
.nav-label-short { display: none; }
.nav-link:hover { background: var(--side-hover); color: var(--side-fg-strong); }
.nav-link.active {
  color: var(--side-active-fg); font-weight: 600;
  background: var(--side-active-bg); box-shadow: var(--side-shadow);
}
/* left rail indicator; the icon nudges right to clear it */
.nav-link.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3.5px; border-radius: 99px; background: var(--side-rail);
}
.nav-link.active .nav-ico { margin-left: 6px; }
.nav-count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: rgba(94, 234, 212, 0.14); color: var(--side-accent);
  border-radius: 99px; padding: 2px 8px;
}
.nav-link.active .nav-count { background: rgba(94, 234, 212, 0.22); }
.nav-link.disabled { opacity: 0.4; pointer-events: none; }

.sidebar .spacer { flex: 1; }
.userchip {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px;
  border-top: 1px solid var(--side-border);
  margin-top: 6px;
}
.userchip .avatar {
  width: 36px; height: 36px; border-radius: 99px;
  background: linear-gradient(135deg, #14B8A6, #0E7490);
  color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  flex: none;
}
.userchip button.avatar { border: none; padding: 0; }
.userchip .who { min-width: 0; flex: 1; }
.userchip .who b { display: block; color: var(--side-fg-strong); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .who small { font-size: 11.5px; color: var(--side-sub); }
.userchip .signout {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--side-border);
  color: var(--side-fg); border-radius: 9px;
}
.userchip .signout:hover { background: var(--side-hover); border-color: var(--side-accent); color: var(--side-accent); }

/* breadcrumb + back navigation */
/* Small explanatory line under a control or table. One rule, so the twelve
   places that were each rolling their own inline font-size agree with each
   other. */
.hint { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* ---------- demo session banner ----------
   Sits at the top of the content column on every screen of a demo session.
   The demo is a byte-for-byte copy of the real app pointed at seeded charts,
   so the only thing telling a visitor which one they are in is this strip. */
.demo-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--warn, #b06d0b) 38%, var(--border));
  background: color-mix(in srgb, var(--warn, #b06d0b) 9%, var(--panel));
  border-radius: 11px;
}
.demo-badge {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--warn, #b06d0b); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.demo-banner-text { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--ink); }
.demo-banner .btn { flex: none; }

/* operator's clinic table: hold / delete, kept on one line per row */
.clinic-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.crumbbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.crumb-back {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px 6px 9px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink);
  font-weight: 600; font-size: 13px;
}
.crumb-back:hover { background: var(--hover); }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.crumb { color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--accent); }
.crumb.current { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--muted); opacity: 0.6; }

.content {
  flex: 1; min-width: 0; padding: 22px 26px 60px;
  background:
    radial-gradient(90% 34% at 0% 0%, color-mix(in srgb, var(--brand-1) 8%, transparent), transparent 62%),
    radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--brand-3) 6%, transparent), transparent 60%);
}
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h1 { font-size: 21px; }
/* brand accent bar to the left of top-level page titles */
.page-head > div:first-child > h1:first-child::before {
  content: ""; display: inline-block; width: 4px; height: 0.92em;
  margin-right: 10px; border-radius: 3px; vertical-align: -1px;
  background: var(--brand-grad-tv);
}
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- patient chart: distinct, persistent context ---------------- */
/* The banner header carries the brand gradient and stays on-screen across every
   tab, so it always reads as "you are inside a patient chart". The page behind
   it stays the plain app background — the tint belongs to the card only. */
.content.patient-bg { background: var(--bg); }
.patient-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 15px 18px; border-radius: 16px;
  background: var(--brand-wash);
  border: 1px solid color-mix(in srgb, var(--brand-2) 30%, var(--border));
  box-shadow: var(--shadow);
}
.pb-avatar {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px; letter-spacing: .5px; color: #fff;
  background: var(--brand-grad-tv);
  box-shadow: 0 4px 13px rgba(11, 79, 74, .3), inset 0 1px 0 rgba(255,255,255,.18);
}
.pb-id { flex: 1; min-width: 220px; }
.pb-name { font-size: 23px; line-height: 1.12; font-weight: 700; }
.pb-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.pb-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; color: var(--ink);
  background: color-mix(in srgb, var(--panel) 78%, var(--bg));
  border: 1px solid var(--border);
}
.pb-chip .pb-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .pb-actions { width: 100%; }
  .pb-avatar { width: 46px; height: 46px; font-size: 16px; }
  .pb-name { font-size: 20px; }
}

/* ---------------- components ---------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
/* Stacking margin for cards that follow one another in normal block flow. */
.card + .card { margin-top: 14px; }
/* ...but never inside a container that already spaces its cards with `gap`.
   There the margin lands on every card except the first, so a two-column row
   starts its second card 14px lower than its first — and under `stretch` that
   card is also 14px shorter, because the margin eats into the height it is
   stretched to. Any new gap-spaced card container belongs in this list. */
:where(.cards-2, .cards-3, .doc-layout, .doc-fields) > .card + .card { margin-top: 0; }
.card h2 { font-size: 15px; margin-bottom: 10px; }
.card h3 { font-size: 13.5px; margin-bottom: 8px; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 1100px) { .cards-2, .cards-3 { grid-template-columns: 1fr; } }

/* ---------- Privacy: collapsible "how it works" accordion ---------- */
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* align-items:start, not the default stretch: an open panel makes its grid row
   taller, and a stretched sibling grows with it — so opening the left card
   inflated the closed card beside it into a tall empty box. */
.info-acc { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 8px; margin-bottom: 18px; }
@media (max-width: 760px) { .info-acc { grid-template-columns: 1fr; } }
.info-acc-item { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.info-acc-item > summary {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  cursor: pointer; list-style: none; user-select: none;
  font-weight: 600; font-size: 13.5px; color: var(--ink); border-radius: 12px;
}
.info-acc-item > summary::-webkit-details-marker { display: none; }
.info-acc-item > summary::marker { content: ""; }
.info-acc-item > summary:hover { background: var(--hover); }
.info-acc-ico { font-size: 15px; line-height: 1; flex: none; }
.info-acc-title { flex: 1; min-width: 0; }
.info-acc-chev { color: var(--muted); font-size: 16px; transition: transform 0.18s ease; }
.info-acc-item[open] > summary .info-acc-chev { transform: rotate(90deg); }
.info-acc-item[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.info-acc-body { padding: 2px 14px 14px; font-size: 13px; color: var(--ink); }
.info-acc-body p { margin: 9px 0; line-height: 1.5; }

/* ---------- Privacy: activity feed (was a plain table) ---------- */
.activity-card { padding: 0; overflow: hidden; }
.activity-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 15px 18px 12px; border-bottom: 1px solid var(--border);
}
.activity-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.activity-tools { display: flex; align-items: center; gap: 10px; }
.activity-tools input[type="search"] {
  width: 230px; max-width: 46vw; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-size: 13px;
}
.activity-tools input[type="search"]:focus { outline: none; border-color: var(--accent); }
/* activity-log date-window navigation (day / week / month) */
.activity-datenav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.datenav-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dn-arrow { font-size: 16px; line-height: 1; --pad-y: 4px; --pad-x: 10px; font-weight: 700; }
.datenav-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-left: 4px; }
/* The track takes the shared height and its segments stretch to fill it, so
   the whole control matches the arrows and the Today button it shares a row
   with, rather than standing a hair proud of them on its own padding. */
.rangeseg {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px;
  height: var(--control-h); box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border);
}
.segbtn {
  appearance: none; cursor: pointer; border: none; background: none; color: var(--muted);
  padding: 5px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  transition: background .14s, color .14s;
}
.segbtn:hover { color: var(--ink); }
.segbtn.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.activity-catbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.catchip {
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font-size: 12.5px; font-weight: 600; transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.catchip:hover { color: var(--ink); border-color: var(--sil-line); }
.catchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.activity-feed { max-height: 640px; overflow-y: auto; padding-bottom: 6px; }
.feed-day-label {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px; padding: 10px 18px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); background: var(--panel);
}
.feed-day-label span {
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted);
  background: var(--hover); border-radius: 20px; padding: 1px 8px; font-size: 10.5px;
}
.feed-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 18px; }
.feed-row:hover { background: var(--hover); }
.feed-ico {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: color-mix(in srgb, var(--tone) 16%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 34%, transparent);
}
.feed-main { flex: 1; min-width: 0; padding-top: 2px; }
.feed-line { font-size: 13.5px; color: var(--ink); }
.feed-line b { font-weight: 650; }
.feed-action { color: var(--muted); }
.feed-detail {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-time { flex: none; font-size: 11.5px; color: var(--muted); padding-top: 3px; white-space: nowrap; }
/* category tones drive each badge's colour */
.tone-auth { --tone: #3b82f6; }
.tone-doc { --tone: var(--brand-1); }
.tone-ai { --tone: var(--brand-3); }
.tone-patient { --tone: var(--dt-discharge); }
.tone-sched { --tone: #7c8cf8; }
.tone-admin { --tone: #b06ae6; }
.tone-security { --tone: var(--review); }
.tone-danger { --tone: var(--danger); }
.tone-default { --tone: var(--muted); }

/* ---------- Facility: access-request approval queue ---------- */
.access-card { margin-bottom: 14px; }
.access-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.access-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.access-req {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--review) 7%, var(--panel));
}
.access-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(145deg, #b06ae6, #7c4bd0);
}
.access-info { flex: 1; min-width: 0; }
.access-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.access-email { font-size: 12.5px; color: var(--muted); }
.access-note { font-size: 12.5px; color: var(--ink); margin-top: 4px; font-style: italic; }
.access-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.access-actions { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.access-role, .access-clinic, .access-newclinic {
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font-size: 12.5px; font-family: inherit;
}
/* the clinic is the consequential choice on this row, so it gets the width */
.access-clinic, .access-newclinic { min-width: 190px; }
.access-newclinic[hidden] { display: none; }
.access-msg { font-size: 11.5px; min-height: 14px; text-align: right; }
@media (max-width: 620px) {
  .access-req { flex-wrap: wrap; }
  .access-actions { flex-direction: row; align-items: center; width: 100%; flex-wrap: wrap; }
}

/* Button system — brand handoff 1d. Colours flow through theme tokens so the
   same variants read correctly in both the light and dark themes. */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  /* --ring is the drawn border, --pad-* the padding inside it. Filled variants
     set --ring to 0 and the padding grows by the same 1.5px, so a filled and an
     outline button with the same label still measure the same. They cannot just
     keep a transparent border: Chrome paints the border ring even when its
     colour is fully transparent, and the antialiased ring reads as a dark line
     down the left and right edges of a filled button. */
  --ring: 1.5px; --pad-y: 9px; --pad-x: 15px;
  padding: calc(var(--pad-y) + 1.5px - var(--ring)) calc(var(--pad-x) + 1.5px - var(--ring));
  border: var(--ring) solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600; font-size: 13.5px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}
/* secondary (outline) hover: border + text pick up the brand teal */
.btn:hover { border-color: var(--accent); color: var(--accent); }
/* primary: the brand teal gradient, so CTAs match the rail and the logo mark */
.btn.primary {
  background: var(--btn-grad); --ring: 0px; color: #fff;
  box-shadow: 0 1px 2px rgba(11, 79, 74, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn.primary:hover {
  color: #fff; filter: brightness(0.94);
  box-shadow: 0 3px 12px rgba(14, 124, 134, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* secondary soft */
.btn.soft { background: var(--accent-soft); --ring: 0px; color: var(--accent); }
.btn.soft:hover { color: var(--accent); filter: brightness(0.97); }
/* AI action (primary): teal→cyan pill-gradient with a lift on hover */
.btn.ai, #refineBtn {
  background: linear-gradient(180deg, #0F8A80, #0E7490); --ring: 0px; color: #fff;
  box-shadow: 0 2px 10px rgba(14, 116, 144, .28);
}
.btn.ai:hover, #refineBtn:hover { color: #fff; box-shadow: 0 3px 14px rgba(14, 116, 144, .4); }
/* AI action (outline) */
.btn.ai-outline { background: var(--panel); border-color: #A5DCE4; color: #0E7490; }
.btn.ai-outline:hover { color: #0E7490; border-color: #A5DCE4; background: color-mix(in srgb, #A5DCE4 16%, var(--panel)); }
/* destructive soft (default) + solid modifier */
.btn.danger { background: var(--danger-soft); --ring: 0px; color: var(--danger); }
.btn.danger:hover { color: var(--danger); --ring: 1.5px; border-color: var(--danger-border); background: color-mix(in srgb, var(--danger) 14%, var(--panel)); }
.btn.danger.solid { background: #C2453A; --ring: 0px; color: #fff; }
.btn.danger.solid:hover { color: #fff; background: #A93A30; }
/* min-height, not height: a button that wraps to two lines should grow rather
   than spill its label. The padding above already lands within a rounding
   error of --control-h, so this only bites on variants that shrink it — the
   date-nav arrows, whose `line-height: 1` would otherwise leave them 6px
   shorter than the "Today" button sitting right beside them. */
.btn.small { --pad-y: 6px; --pad-x: 11px; font-size: 12.5px; border-radius: 8px; min-height: var(--control-h); }
/* positive (accept / done) soft green + low-emphasis ghost that reddens on hover */
.btn.good { background: var(--good-soft); --ring: 0px; color: var(--good); }
.btn.good:hover { color: var(--good); --ring: 1.5px; border-color: color-mix(in srgb, var(--good) 40%, var(--border)); background: color-mix(in srgb, var(--good) 14%, var(--panel)); }
.btn.ghost { background: transparent; --ring: 0px; color: var(--muted); }
.btn.ghost:hover { color: var(--danger); background: var(--danger-soft); }
.btn[disabled], .btn:disabled { color: #8FA6A3; background: var(--border); --ring: 0px; box-shadow: none; filter: none; cursor: not-allowed; }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--review-soft); color: var(--review); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--accent-soft); color: var(--accent); }
.chip.muted { background: var(--hover); color: var(--muted); }

/* Block flow (not flex): banner text mixes plain text with inline <b>/<a>,
   and a flex row would split each run into its own cramped column on narrow
   screens. Leading glyphs (◈ △ ⚠) are literal text, so no flex is needed. */
.banner {
  display: block;
  padding: 11px 14px; border-radius: 11px; margin-bottom: 16px;
  font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--border);
}
.banner.bad { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.banner.warn { background: var(--review-soft); color: var(--review); }
.banner.info { background: var(--accent-soft); color: var(--accent); }

table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border);
}
table.list td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr.rowlink { cursor: pointer; }
table.list tbody tr.rowlink:hover { background: var(--hover); }
table.list .num { font-variant-numeric: tabular-nums; }
/* Zebra striping on the patients list so long lists stay easy to scan.
   Hover still wins over the stripe for the row you're pointing at. */
#patTable tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#patTable tbody tr.rowlink:hover { background: var(--hover); }
.table-scroll { overflow-x: auto; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.3px; }
.field input, .field select, .field textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}
.field textarea { resize: vertical; min-height: 68px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.8; }
/* ---- read-only controls (app-wide) ----
   A baseline carried over from the evaluation, the dictation bar on a signed
   note, or any field in a locked document. Greyed everywhere so a control that
   can't be used never looks like one that can. */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  background: color-mix(in srgb, var(--ink) 5%, var(--panel));
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}
/* the drag-handle is an "editable" affordance — drop it when locked */
textarea:disabled, textarea[readonly] { resize: none; }
/* Column gutter only — no row gap. A `.field` already carries its own bottom
   margin, and that is what separates the row from whatever follows it. Adding
   a row gap on top is invisible while the row is two columns wide, but once it
   collapses to a single column on a phone the two fields are pushed apart by
   the gap *and* the margin — 24px, twice the spacing between any other pair of
   fields on the same form. Leaving the vertical rhythm to the margin keeps a
   collapsed row identical to plain stacked fields, and keeps the compact rows
   that override that margin compact. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

/* ---- field-level validation (intake and the patient edit windows) ----
   The message sits under the input it belongs to, not in one line at the
   bottom of a long form, so a front-desk user doesn't have to hunt for which
   of fourteen boxes is wrong. Two weights, because they mean different things:
   .invalid blocks the save, .warned lets it through after a confirmation. */
.field.invalid input, .field.invalid select, .field.warned input, .field.warned select {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, var(--panel));
}
.field.warned input, .field.warned select {
  border-color: var(--review);
  background: var(--review-soft);
}
.field .field-msg {
  font-size: 12px;
  line-height: 1.45;
  color: var(--danger);
  margin-top: -1px;
}
.field.warned .field-msg { color: var(--review); }
.field .field-hint { font-size: 11.5px; color: var(--muted); margin-top: -1px; }
/* The confirm step shown when only warnings remain — the save is one more
   click away, never blocked. */
.warn-confirm {
  border: 1px solid var(--review);
  background: var(--review-soft);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  margin: 10px 0;
}
.warn-confirm b { display: block; margin-bottom: 4px; }
.warn-confirm ul { margin: 4px 0 0; padding-left: 18px; }

.empty-state {
  text-align: center; color: var(--muted); padding: 26px 16px; font-size: 13.5px; line-height: 1.6;
}

/* ---------------- login ---------------- */

/* Sign-in & splash render in an explicit light scheme (white base + a soft
   teal wash) regardless of the OS theme — scoping the light tokens here keeps
   the nested card, inputs and text light too. */
.login-wrap, .splash {
  color-scheme: light;
  color: var(--ink); /* re-anchor inherited text to the scoped (light) ink */
  --bg: #f4f7f9; --panel: #ffffff; --ink: #1f2d3a; --muted: #64748b;
  --accent: #0F8A80; --accent-ink: #ffffff; --accent-soft: #E6F5F2;
  --point: #e03e52; --border: #e2e8f0; --sil: #cfdce6; --sil-line: #b6c8d6;
  --hover: #f6f9fb; --review: #b9820a; --review-soft: #fdf3dd;
  --good: #1a7f4b; --good-soft: #e2f4e9;
  --danger: #c22f43; --danger-soft: #fde8ea; --danger-border: #f2b8c0;
  --shadow: 0 1px 3px rgba(15, 30, 45, 0.08), 0 4px 16px rgba(15, 30, 45, 0.06);
}
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(130% 80% at 12% 0%, rgba(15, 138, 128, 0.12), transparent 55%),
    radial-gradient(120% 70% at 100% 100%, rgba(109, 90, 224, 0.08), transparent 55%),
    linear-gradient(160deg, #ffffff, #f2f8f7 68%, #e9f3f1);
}
.login-box { width: 408px; max-width: 100%; }
.login-box .brandline { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.login-box .brandline .logo {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(15, 30, 45, 0.18);
}
.login-box .brandline .logo svg { width: 100%; height: 100%; }
.login-box h1 { font-size: 21px; color: var(--ink); }
.login-box .brandline .sub { color: var(--muted); font-size: 12.5px; }
.login-box > .card { border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(15, 30, 45, 0.12); }

/* ---- post-login splash: brief branded "welcome" screen ---- */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(130% 80% at 12% 0%, rgba(15, 138, 128, 0.12), transparent 55%),
    radial-gradient(120% 70% at 100% 100%, rgba(109, 90, 224, 0.08), transparent 55%),
    linear-gradient(160deg, #ffffff, #f2f8f7 68%, #e9f3f1);
  opacity: 0; transition: opacity 0.32s ease;
}
.splash.show { opacity: 1; }
.splash.leaving { opacity: 0; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px; }
.splash-logo {
  width: 96px; height: 96px; border-radius: 24px;
  display: grid; place-items: center;
  box-shadow: 0 18px 46px rgba(15, 30, 45, 0.18);
  animation: splashPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash-logo svg { width: 100%; height: 100%; }
.splash-name { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: 0.2px; }
.splash-sub { color: var(--muted); font-size: 13px; margin-top: -4px; }
.splash-bar {
  margin-top: 10px; width: 168px; height: 3px; border-radius: 3px;
  background: rgba(15, 138, 128, 0.16); overflow: hidden;
}
.splash-bar span {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: var(--brand-grad-tv);
  animation: splashSlide 1.15s ease-in-out infinite;
}
@keyframes splashPop {
  from { opacity: 0; transform: scale(0.86) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes splashSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-bar span { animation: none; }
}
.login-user {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--panel);
  text-align: left;
  color: var(--ink); /* buttons don't inherit text color — set it or names go black */
}
.login-user:hover { background: var(--hover); }
.login-user.selected { border-color: var(--accent); background: var(--accent-soft); }
.login-user .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700;
}
.login-user b { display: block; font-size: 13.5px; }
.login-user small { color: var(--muted); font-size: 11.5px; }
.login-user .chip { margin-left: auto; }
.demo-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* Requesting an account. Sits under the sign-in controls as a quiet secondary
   path — it is the exception, not the main way in, so it must not compete with
   the Sign in button. */
.signup-cta { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); font-weight: 600; text-decoration: underline;
}
.signup-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.signup-panel[hidden] { display: none; }
.signup-intro { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.signup-actions { display: flex; gap: 8px; margin-top: 4px; }
.signup-actions .btn { flex: 1; justify-content: center; }
.signup-msg { font-size: 12.5px; min-height: 18px; margin-top: 8px; line-height: 1.45; }
.signup-msg.bad { color: var(--danger); }
.signup-msg.good { color: var(--ok, var(--accent)); }

/* "or" divider + Google button on the login card */
.login-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--muted); font-size: 12px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-btn-wrap { display: flex; justify-content: center; min-height: 40px; }

/* Test-account quick-fill panel on the sign-in card — collapsed by default so
   the card leads with the real sign-in rather than a wall of demo rows. */
.test-accounts { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.ta-summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); transition: border-color 0.14s, background 0.14s;
  /* a tap on a control should open it, not select its label — without this a
     slightly-dragged click on a touchscreen highlights the text instead */
  -webkit-user-select: none; user-select: none;
}
/* the default disclosure triangle, in both engines — .ta-chev replaces it */
.ta-summary::-webkit-details-marker { display: none; }
.ta-summary::marker { content: ""; }
.ta-summary:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--hover); }
.ta-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ta-sum-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ta-sum-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ta-sum-sub { font-size: 11px; color: var(--muted); }
.ta-chev { flex: none; width: 18px; height: 18px; color: var(--accent); transition: transform 0.16s; }
.test-accounts[open] .ta-chev { transform: rotate(180deg); }
.ta-body { padding-top: 10px; }
.ta-pw { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ta-group {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 6px;
}
.ta-group:first-child { margin-top: 0; }
.ta-list { display: flex; flex-direction: column; gap: 6px; }
.ta-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--ink); cursor: pointer;
  transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.ta-row:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--hover); transform: translateY(-1px); }
/* The row now signs you in, so it spends a moment in flight — and every other
   row has to stop being clickable while it does. */
.ta-row:disabled { opacity: .55; cursor: default; transform: none; }
.ta-row:disabled:hover { border-color: var(--border); background: var(--panel); transform: none; }

/* Picking an existing colleague onto the calendar board. Same row shape as the
   demo picker — it is the same gesture: choose a person, not fill a form. */
.pt-pick { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; max-height: 46vh; overflow-y: auto; }
.pt-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 13px;
}
.pt-pick-row:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--hover); }
.ta-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, #238f99, #0e7c86);
}
.ta-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ta-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-email { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-role { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; font-weight: 600; color: var(--accent); }
.ta-status { font-weight: 500; font-size: 9.5px; color: var(--muted); text-align: right; max-width: 108px; }

/* ---------------- body map + transcript (main feature) ---------------- */

.figures { display: flex; justify-content: space-evenly; gap: 8px; flex-wrap: wrap; }
.figures figure { margin: 0; text-align: center; flex: 1; min-width: 220px; }
.figures figcaption { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.figures .hint { font-weight: 400; font-size: 10.5px; color: var(--muted); }
.bodymap svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }

.sil-part { fill: var(--sil); stroke: var(--sil-line); stroke-width: 1.3; }
.sil-line { stroke: var(--sil-line); stroke-width: 1.3; fill: none; opacity: 0.85; }

/* callout markers: dot at the exact spot, leader line to a numbered marker
   in the gutter, coloured by severity */
.point-group { cursor: pointer; }
.leader { fill: none; stroke: var(--sil-line); stroke-width: 1; opacity: 0.7; }
.loc-dot { stroke: #fff; stroke-width: 1; }
.loc-ring { fill: none; stroke-width: 2; opacity: 0; }
.marker { stroke: #fff; stroke-width: 1.5; transition: r 0.12s; }
.marker-num { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.point-group:hover .marker { r: 13; }
.point-group.flash .marker { r: 14; }
.point-group.flash .loc-ring { opacity: 0.6; animation: ring 1.1s ease-out; }
@keyframes ring { 0% { r: 4; opacity: 0.6; } 100% { r: 16; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .point-group.flash .loc-ring { animation: none; } .mic-btn.listening { animation: none; } }

/* severity colours (markers, dots, legend, badges) */
.sev-high .marker, .sev-high .loc-dot, .sev-high .loc-ring { fill: var(--sev-high); }
.sev-mid  .marker, .sev-mid  .loc-dot, .sev-mid  .loc-ring { fill: var(--sev-mid); }
.sev-low  .marker, .sev-low  .loc-dot, .sev-low  .loc-ring { fill: var(--sev-low); }
.sev-none .marker, .sev-none .loc-dot, .sev-none .loc-ring { fill: var(--sev-none); }
.sev-high .loc-ring, .sev-mid .loc-ring, .sev-low .loc-ring, .sev-none .loc-ring { fill: none; }
.sev-high .loc-ring { stroke: var(--sev-high); } .sev-mid .loc-ring { stroke: var(--sev-mid); }
.sev-low .loc-ring { stroke: var(--sev-low); } .sev-none .loc-ring { stroke: var(--sev-none); }

.sev-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.sev-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sev-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sev-dot.sev-high { background: var(--sev-high); } .sev-dot.sev-mid { background: var(--sev-mid); }
.sev-dot.sev-low { background: var(--sev-low); } .sev-dot.sev-none { background: var(--sev-none); }
.badge.sev-high { background: var(--sev-high); } .badge.sev-mid { background: var(--sev-mid); }
.badge.sev-low { background: var(--sev-low); } .badge.sev-none { background: var(--sev-none); }

.transcript-log {
  max-height: 170px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; line-height: 1.5;
}
.utt { display: flex; gap: 8px; align-items: baseline; }
.utt-time { flex: none; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
mark.hl { background: var(--hl); color: inherit; border-radius: 3px; padding: 0 1px; }
mark.hl.strong { background: var(--hl-strong); font-weight: 600; }

.mic-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--brand-grad-v);
  border: none; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(14, 124, 134, 0.35);
}
.mic-btn:hover { filter: brightness(1.06); }
/* locked note — dictation is impossible, so the mic drops its brand gradient */
.mic-btn:disabled {
  background: var(--border); color: var(--muted);
  box-shadow: none; filter: none; cursor: not-allowed;
}
.mic-btn.listening { background: var(--point); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 62, 82, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(224, 62, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 62, 82, 0); }
}
.dict-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dict-bar select { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }

/* Live input meter. Small on purpose — it is a reassurance and a diagnostic,
   not a readout anyone should be watching instead of the patient. The tick is
   where the voice gate currently sits: speech should cross it, the room
   shouldn't. */
.mic-level { position: relative; flex: 0 1 96px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.mic-level-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--muted); transition: width .08s linear; }
.mic-level-fill.voiced { background: var(--accent); }
.mic-level-bar { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; left: 15%; background: var(--ink); opacity: .55; }
@media (max-width: 720px) { .mic-level { flex: 1 1 100%; } }
.dict-status { font-size: 12px; color: var(--muted); }
.interim-bar {
  margin-top: 8px; padding: 8px 11px;
  background: var(--accent-soft); border-radius: 9px;
  font-size: 13px; min-height: 36px;
  display: flex; gap: 8px; align-items: baseline;
}
.interim-bar b { color: var(--accent); white-space: nowrap; font-size: 12px; }
.route-log { font-size: 11.5px; color: var(--muted); margin-top: 6px; min-height: 16px; }

.map-notes { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.map-note {
  border: 1px solid var(--border); border-left: 4px solid var(--point);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px; cursor: pointer;
}
.map-note:hover { background: var(--hover); }
.map-note.selected { outline: 2px solid var(--hl-strong); outline-offset: -1px; }
.map-note b { font-size: 12.5px; }
.map-note .badge {
  display: inline-block; background: var(--sev-none); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 6px; margin-right: 5px;
}
.map-note .badge.sev-high { background: var(--sev-high); }
.map-note .badge.sev-mid { background: var(--sev-mid); }
.map-note .badge.sev-low { background: var(--sev-low); }
.map-note .badge.sev-none { background: var(--sev-none); }
.map-note .quote { color: var(--muted); font-style: italic; }
.map-note .note-part[contenteditable] { border-radius: 4px; padding: 0 2px; cursor: text; }
.map-note .note-part[contenteditable]:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.map-note .note-part[contenteditable]:focus { outline: 2px solid var(--hl-strong); outline-offset: 1px; background: var(--panel); }

/* ---------------- document editor ---------------- */

/* dictation & body map is now the primary column on the left */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .doc-layout { grid-template-columns: 1fr; } }
.map-card { position: sticky; top: 16px; }
.map-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.map-card-head h2 { margin: 0; }
@media (max-width: 1080px) { .map-card { position: static; } }

/* document-type colour coding */
.doc-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  padding: 2px 8px; border-radius: 6px; color: #fff; vertical-align: middle;
}
.doc-eval  .doc-tag, .doc-tag.doc-eval      { background: var(--dt-eval); }
.doc-daily .doc-tag, .doc-tag.doc-daily     { background: var(--dt-daily); }
.doc-progress .doc-tag, .doc-tag.doc-progress { background: var(--dt-progress); }
.doc-discharge .doc-tag, .doc-tag.doc-discharge { background: var(--dt-discharge); }
.doc-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-head { border-left: 4px solid var(--border); padding-left: 14px; border-radius: 2px; }
.doc-head.doc-eval { border-left-color: var(--dt-eval); }
.doc-head.doc-daily { border-left-color: var(--dt-daily); }
.doc-head.doc-progress { border-left-color: var(--dt-progress); }
.doc-head.doc-discharge { border-left-color: var(--dt-discharge); }
/* colour the doc rows in the patient chart + dashboard */
tr.rowlink .doc-tag { margin-right: 6px; }
.newdoc-btn .dt-swatch { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.newdoc-btn.doc-eval .dt-swatch { background: var(--dt-eval); }
.newdoc-btn.doc-daily .dt-swatch { background: var(--dt-daily); }
.newdoc-btn.doc-progress .dt-swatch { background: var(--dt-progress); }
.newdoc-btn.doc-discharge .dt-swatch { background: var(--dt-discharge); }

/* Colour-code the note fields by document type, so you know at a glance which
   form you're in. Each type sets --dt; the card accent, labels, and text-box
   borders all follow it. */
.doc-fields.doc-eval      { --dt: var(--dt-eval); }
.doc-fields.doc-daily     { --dt: var(--dt-daily); }
.doc-fields.doc-progress  { --dt: var(--dt-progress); }
.doc-fields.doc-discharge { --dt: var(--dt-discharge); }
/* The note column is a STACK of workflow groups, not one card. A note is
   written in the same order every time — what you were told, what you found,
   what you make of it, what happens next, what it bills — and one undivided
   card hid that order behind a scroll. Each group is its own card so the step
   you are on is the thing in front of you, and each one collapses so the parts
   you aren't in yet stay out of the way. */
.doc-fields { display: flex; flex-direction: column; gap: 14px; }
.doc-fields > .card {
  border-top: 3px solid var(--dt, var(--border));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 0 0 1px color-mix(in srgb, var(--dt) 12%, transparent);
}
.doc-group > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none; user-select: none;
}
.doc-group > summary::-webkit-details-marker { display: none; }
.doc-group > summary::marker { content: ""; }
.doc-group-step {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--dt, var(--accent)); font-variant-numeric: tabular-nums;
}
.doc-group-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.doc-group-title small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.doc-group-count { flex: none; font-variant-numeric: tabular-nums; }
.doc-group-chev { flex: none; color: var(--muted); font-size: 16px; transition: transform 0.18s ease; }
.doc-group[open] > summary .doc-group-chev { transform: rotate(90deg); }
.doc-group-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.doc-group-body > :last-child { margin-bottom: 0; }
.doc-guide-card, .doc-sig-card { padding-top: 12px; }
.doc-fields .field > label { color: var(--dt); font-weight: 700; }
.doc-fields textarea,
.doc-fields input[type="text"],
.doc-fields .measure-add input {
  border-color: color-mix(in srgb, var(--dt) 32%, var(--border));
}
.doc-fields textarea:focus,
.doc-fields input:focus {
  border-color: var(--dt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt) 18%, transparent);
  outline: none;
}
.newdoc-btn { border-left-width: 3px; }
.newdoc-btn.doc-eval { border-left-color: var(--dt-eval); }
.newdoc-btn.doc-daily { border-left-color: var(--dt-daily); }
.newdoc-btn.doc-progress { border-left-color: var(--dt-progress); }
.newdoc-btn.doc-discharge { border-left-color: var(--dt-discharge); }
.newdoc-btn.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------------- patient chart: sub-tabs ---------------- */
.ptabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 16px;
}
.ptab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 9px 14px; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ptab:hover { color: var(--ink); background: var(--hover); }
.ptab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ptab-panel > .card { margin-bottom: 14px; }
.ptab-panel > .card:last-child { margin-bottom: 0; }

/* ---------------- dashboard stat tiles ---------------- */
.stat-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.stat-tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; transition: border-color 0.14s, transform 0.12s, box-shadow 0.14s;
}
a.stat-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.stat-tile .stat-num { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
.stat-tile .stat-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.stat-tile.accent { border-color: color-mix(in srgb, var(--review) 55%, var(--border)); background: color-mix(in srgb, var(--review-soft) 60%, var(--panel)); }
.stat-tile.accent .stat-num { color: var(--review); }
@media (max-width: 860px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- patient assistant drawer (left slide-in) ---------------- */
.only-mobile { display: none; }
.nav-btn {
  appearance: none; background: none; border: none; width: 100%;
  cursor: pointer; font: inherit; text-align: left;
}
.assistant-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 16, 24, 0.42);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.assistant-backdrop.open { opacity: 1; pointer-events: auto; }
.assistant-drawer {
  position: fixed; top: 0; left: 0; z-index: 71;
  width: min(420px, 92vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--border);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.28);
  transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.4, 0.9, 0.3, 1);
}
.assistant-drawer.open { transform: translateX(0); }
.assistant-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none;
}
.assistant-drawer-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.drawer-close {
  appearance: none; border: none; background: var(--hover); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; color: var(--muted); font-size: 15px;
}
.drawer-close:hover { color: var(--ink); background: var(--border); }
.assistant-drawer-body {
  flex: 1; min-height: 0; margin: 0; border: none; border-radius: 0; padding: 16px;
  display: flex; flex-direction: column; overflow: hidden;
}
/* the drawer's own title bar names the panel, so drop the card's duplicate head */
.assistant-drawer-body .asst-head { display: none; }
.assistant-drawer-body .asst-disclaimer { margin-top: 0; }
.assistant-drawer-body .asst-log { flex: 1; min-height: 0; max-height: none; }

/* ---------------- needs-attention list ---------------- */
.attn-list { display: flex; flex-direction: column; gap: 8px; }
.attn-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--hover); border: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
  transition: border-color 0.14s, background 0.14s, transform 0.12s;
}
.attn-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateX(2px); }
.attn-item .attn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.attn-item.warn .attn-dot { background: var(--review); }
.attn-item.info .attn-dot { background: var(--accent); }
.attn-item .attn-text { flex: 1; font-size: 13.5px; }
.attn-item .attn-go { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* accepted action items (tasks promoted from AI recommendations) */
.attn-item.task { align-items: flex-start; }
.attn-item.task .attn-dot { margin-top: 6px; background: var(--accent); }
.attn-item.task .attn-text { padding-top: 1px; }
.task-why { color: var(--muted); font-weight: 400; }
.task-tag {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px; vertical-align: 1px;
  background: var(--accent-soft); color: var(--accent);
}
.task-actions { display: inline-flex; gap: 6px; flex: none; }
.task-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.task-complete-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-note-input {
  flex: 1; min-width: 180px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--ink);
}
.task-note-input:focus { outline: none; border-color: var(--accent); }

/* recommendation history — recs that were accepted and carried out */
.care-log { display: flex; flex-direction: column; gap: 8px; }
.care-entry {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 22%, var(--border));
}
.care-check { color: var(--good); font-weight: 800; flex: none; line-height: 1.5; }
.care-main { flex: 1; }
.care-text { font-size: 13.5px; font-weight: 600; }
.care-note { font-size: 13px; color: var(--ink); font-style: italic; margin-top: 2px; }
.care-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* accept / dismiss controls on AI-review recommendations */
.rec-actions { display: inline-flex; gap: 6px; margin-left: auto; }

/* dashboard "unsigned drafts" jump-to-page button */
.jumbo-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: 12px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--review) 40%, var(--border));
  background: color-mix(in srgb, var(--review-soft) 55%, var(--panel));
  color: var(--ink); transition: transform 0.12s, box-shadow 0.14s;
}
.jumbo-link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.jumbo-link b { display: block; font-size: 15px; }
.jumbo-link small { color: var(--muted); font-size: 12.5px; }
.jumbo-arrow { font-size: 22px; color: var(--review); font-weight: 700; }

/* ---------------- new-doc picker (resume vs. start new) ---------------- */
.newdoc { margin-bottom: 14px; }
.newdoc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.newdoc-picker {
  margin-top: 10px; padding: 12px;
  background: var(--hover); border: 1px solid var(--border); border-radius: 10px;
}
.draft-picker-head { font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.draft-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.draft-row:last-of-type { border-bottom: none; }
.draft-picker-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------------- document filters ---------------- */
.doc-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
  padding: 4px 0 14px; margin-bottom: 6px;
}
/* each filter is its own bordered group so Type / Status / Date read as
   distinct sets rather than one long blob of pills */
.fgroup {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 2.5%, var(--panel));
}
.fchips { display: flex; gap: 5px; flex-wrap: wrap; }
.fglabel { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fgsep { color: var(--muted); }
.fchip {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  min-height: var(--control-h);
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.fchip:hover { color: var(--ink); border-color: var(--sil-line); }
.fchip .fdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--chip, var(--muted)); }
/* type chips carry the document-type colours */
.fchip.ft-eval { --chip: var(--dt-eval); }
.fchip.ft-daily { --chip: var(--dt-daily); }
.fchip.ft-progress { --chip: var(--dt-progress); }
.fchip.ft-discharge { --chip: var(--dt-discharge); }
.fchip.ft-type.on { background: color-mix(in srgb, var(--chip, var(--accent)) 16%, var(--panel)); border-color: var(--chip, var(--accent)); color: var(--ink); }
.fchip.ft-type.on .fdot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 25%, transparent); }
/* status chips: draft = amber, signed = green */
.fchip.fs-draft.on { background: color-mix(in srgb, var(--review) 16%, var(--panel)); border-color: var(--review); color: var(--ink); }
.fchip.fs-signed.on { background: var(--good-soft); border-color: var(--good); color: var(--ink); }
.fchip.fs-deleted.on { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border-color: var(--danger); color: var(--ink); }
.fchip.fs-all.on, .fchip.ft-all.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* Single-line controls take the height outright — they can never wrap, and the
   date field in particular has to be pulled *down* to the shared height: a
   bare date input carries a couple of extra pixels for its picker indicator,
   which is what made this row's two date fields sit a pixel proud of the
   Clear button and its whole filter group ride 3px above its neighbours. */
.fdate, .fsel { height: var(--control-h); box-sizing: border-box; }
.fdate {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 12.5px;
}
.fsel {
  appearance: none; padding: 5px 26px 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 8px center;
  color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; max-width: 220px;
}
.fsel:focus { outline: none; border-color: var(--accent); }
/* inline "back to dashboard" affordance above a page title */
.back-inline { margin-bottom: 10px; }

/* ---------------- patient edit chooser + unsaved warning ---------------- */
.edit-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
@media (max-width: 520px) { .edit-choice-grid { grid-template-columns: 1fr; } }
.edit-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink);
  transition: border-color 0.14s, transform 0.12s, box-shadow 0.14s;
}
.edit-choice:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.07); }
.edit-choice b { font-size: 14px; }
.edit-choice small { color: var(--muted); font-size: 12px; }
.edit-choice-ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 19px; margin-bottom: 6px;
  background: color-mix(in srgb, var(--ec, var(--accent)) 15%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec, var(--accent)) 30%, transparent);
}
.ec-personal { --ec: var(--dt-eval); }
.ec-insurance { --ec: var(--dt-progress); }
.unsaved-warn {
  flex: 1 1 100%; font-size: 12.5px; color: var(--review);
  background: var(--review-soft); border: 1px solid color-mix(in srgb, var(--review) 40%, var(--border));
  border-radius: 8px; padding: 7px 10px; margin-bottom: 4px;
}

/* ---------------- scheduling cards (each visually distinct) ---------------- */
.sched-card { border-top: 3px solid var(--sched-accent, var(--accent)); }
.sched-card .sched-cardhead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.sched-card .sched-cardhead h2 { margin: 0; }
.sched-cardsub { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }
.sched-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 20px;
  background: color-mix(in srgb, var(--sched-accent, var(--accent)) 15%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sched-accent, var(--accent)) 32%, transparent);
}
.sched-book { --sched-accent: var(--brand-1); }
.sched-upcoming { --sched-accent: var(--dt-eval); }
.sched-history { --sched-accent: var(--dt-discharge); }

/* ---------------- bulk scheduling ---------------- */
.bulk-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
  align-items: end;
}
.bulk-form .bulk-days { grid-column: 1 / -1; }
.bulk-form .bulk-actions { grid-column: 1 / -1; }
.dow-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.dow {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.dow input { accent-color: var(--accent); }
.dow:has(input:checked) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bulk-actions { display: flex; gap: 8px; margin-top: 4px; }
.bulk-preview {
  margin-top: 14px; padding: 12px;
  background: var(--hover); border: 1px solid var(--border); border-radius: 10px;
}
.bulk-preview-head { font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
@media (max-width: 640px) { .bulk-form { grid-template-columns: 1fr; } }

.doc-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.lock-banner {
  display: flex; align-items: center; gap: 9px;
  background: var(--good-soft); color: var(--good);
  padding: 10px 13px; border-radius: 10px; font-weight: 600; font-size: 13px;
  margin-bottom: 14px;
}
.sig-block { border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 12px; font-size: 12.5px; }
.sig-block .sig { margin-bottom: 6px; }
.sig-block .sig b { font-family: "Segoe Script", "Comic Sans MS", cursive; font-size: 15px; }
.amendment {
  border-left: 3px solid var(--review); background: var(--review-soft);
  border-radius: 8px; padding: 9px 12px; margin-top: 8px; font-size: 13px;
}
.measure-add { display: flex; gap: 8px; margin-top: 8px; }
.measure-add input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }

/* ---------------- calendar ---------------- */

.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
/* The date field sat 6px taller than the buttons flanking it, on body-sized
   text while they run at 12.5px. Matching the font as well as the height is
   what makes it read as one control strip rather than an input someone
   dropped in. */
.cal-toolbar input[type="date"] {
  height: var(--control-h); box-sizing: border-box; font-size: 12.5px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.cal-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-grid .cal-cell { background: var(--panel); padding: 7px 9px; min-height: 44px; font-size: 12.5px; }
.cal-grid .cal-head { background: var(--hover); font-weight: 700; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cal-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11.5px; }
.slot-free { color: var(--muted); cursor: pointer; border-radius: 7px; padding: 3px 6px; }
.slot-free:hover { background: var(--accent-soft); color: var(--accent); }
.slot-appt {
  background: var(--accent-soft); color: var(--accent);
  border-radius: 7px; padding: 3px 7px; font-weight: 600; cursor: pointer; margin-bottom: 3px;
}
.slot-appt:hover { filter: brightness(0.97); }
.slot-appt small { display: block; font-weight: 400; color: var(--muted); }
/* ---- allergies: the one thing that must be seen before treating ----
   This used to truncate with an ellipsis and rely on a hover title for the
   rest. Phones and tablets have no hover, so on the devices a therapist
   actually carries around the ward, "Penicillin — rash. Latex sensitivity"
   was cut to "Penicillin — rash. Latex sensit" with no way to read the rest.
   It wraps now: a two-line banner is a fair price for the one field that
   exists to stop someone being harmed. */
.pb-chip.allergy {
  background: var(--danger-soft, #fdecec); color: var(--danger);
  font-weight: 600; max-width: 560px;
  white-space: normal; overflow-wrap: anywhere; align-items: flex-start;
}
@media (max-width: 620px) {
  .pb-chip.allergy { max-width: 100%; width: 100%; }
}
.pb-chip.allergy .pb-k { color: inherit; opacity: .85; }
.allergy-box {
  background: var(--danger-soft, #fdecec); color: var(--danger);
  border-radius: 8px; padding: 10px 14px; font-weight: 600;
}

/* ---- goals on the chart overview ---- */
.goal-list { display: grid; gap: 8px; }
.goal-row { display: flex; gap: 10px; align-items: flex-start; }
.goal-row .goal-state { flex: none; margin-top: 1px; }
.goal-main { min-width: 0; }
.goal-text { font-weight: 550; }

/* ---- outcome-measure trends ---- */
/* capped rather than 1fr: stretched to half a wide card, the sparkline drifts
   so far from its numbers that they stop reading as one figure */
.outcome-trends { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 320px)); justify-content: start; }
.otrend { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.otrend-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.otrend-nums { display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.otrend-from { color: var(--muted); }
.otrend-to { font-size: 20px; font-weight: 650; }
.otrend-arrow { color: var(--muted); }
.otrend .spark { margin-left: auto; color: var(--muted); }
.otrend.better .spark, .otrend.better .otrend-to { color: var(--accent); }
.otrend.worse .spark, .otrend.worse .otrend-to { color: var(--danger); }
.otrend-foot { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---- billing: CPT charge sheet + 8-minute-rule readout ----
   The charge sheet lives in the note's narrow right-hand column, so the table
   is fixed-layout: the code cell absorbs the slack and the number cells keep a
   predictable width instead of a long CPT description forcing a scrollbar. */
.bill-table { table-layout: fixed; width: 100%; }
.bill-table td, .bill-table th { padding-left: 6px; padding-right: 6px; }
.bill-table .c-min, .bill-table .c-unit { width: 56px; }
.bill-table .c-del { width: 34px; }
.bill-table td { vertical-align: middle; overflow: hidden; }
.charge-num, .charge-code { box-sizing: border-box; }
.charge-num { width: 100%; text-align: right; padding: 4px 5px; font-variant-numeric: tabular-nums; }
/* the spin buttons eat half a narrow cell and nobody nudges minutes one at a time */
.charge-num::-webkit-outer-spin-button, .charge-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.charge-num[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.charge-code { width: 100%; min-width: 0; }
.charge-na { color: var(--muted); }
.bill-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bill-totals {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.bill-totals b { color: var(--text); font-size: 14px; }
.bill-total-units { margin-left: auto; padding: 2px 10px; border-radius: 999px; }
.bill-total-units.ok { background: var(--good-soft, var(--accent-soft)); color: var(--accent); }
.bill-total-units.off { background: var(--warn-soft, var(--accent-soft)); }
.bill-issues { display: grid; gap: 4px; margin-top: 8px; }
.bill-issue { font-size: 12.5px; padding: 5px 9px; border-radius: 6px; background: var(--accent-soft); }
.bill-issue.warn { background: var(--warn-soft, var(--accent-soft)); }
.bill-issue.bad { background: var(--danger-soft, var(--accent-soft)); color: var(--danger); font-weight: 600; }

/* ---- outcome measures ---- */
.outcome-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.outcome-add select { max-width: 300px; }
.outcome-err { font-size: 12px; color: var(--danger); }

/* ---- plan-of-care goals ---- */
/* stacked rows rather than a table — this lives in the note's narrow column */
.goal-edit-list { display: grid; gap: 8px; }
.goal-edit-row {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  display: grid; gap: 6px;
}
.goal-edit-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.goal-edit-controls .goal-status-sel { flex: 1 1 130px; }
/* the score and its scale are one figure and must not break across lines */
.score-cell { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.score-unit { color: var(--muted); font-size: 12px; }
.goal-term {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-left: 6px; white-space: nowrap;
}
.goal-bt { font-size: 12px; color: var(--muted); margin-top: 2px; }
.goal-state { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.goal-state.met { background: var(--good-soft, var(--accent-soft)); color: var(--accent); font-weight: 600; }
.goal-state.overdue { background: var(--danger-soft, var(--warn-soft)); color: var(--danger); font-weight: 600; }
.goal-state.due-soon { background: var(--warn-soft, var(--accent-soft)); }
.goal-state.on-track, .goal-state.no-date, .goal-state.closed { background: var(--chip, var(--accent-soft)); color: var(--muted); }
.goal-add { margin-top: 10px; display: grid; gap: 6px; }
.goal-add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.goal-add-row input, .goal-add-row select { flex: 1 1 130px; min-width: 110px; }
.goal-status-sel { max-width: 150px; }

/* bookings that fall outside the facility's opening hours have no column on
   the board, so they get listed under it rather than disappearing */
.cal-offhours {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--warn-soft, var(--card-2, #fff8e6)); border: 1px solid var(--line);
  font-size: 12.5px;
}
.cal-offhours p { margin: 0 0 8px; color: var(--muted); }
.cal-offhours p b { color: var(--text); }
.cal-offhours-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-offhours .slot-appt { margin-bottom: 0; }
/* resource day-view: fixed-width PT columns that scroll sideways when there are many */
.cal-toolbar-spacer { flex: 1 1 auto; }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.cal-scroll .cal-grid { border-radius: 12px; }
/* provider show/hide bar */
.cal-ptbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-ptbar-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); margin-right: 2px; }
/* Same height as the toolbar directly above it, and as the filter chips on the
   drafts page — these two chip components are the same control wearing
   different colours, so they should not be two different sizes. */
.calpt-chip {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  min-height: var(--control-h);
  border: 1px solid var(--border); background: var(--panel); color: var(--ink);
  transition: background .14s, color .14s, border-color .14s, opacity .14s;
}
.calpt-chip .calpt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.calpt-chip.on { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.calpt-chip.off { color: var(--muted); background: var(--bg); opacity: .75; }
.calpt-chip.off .calpt-dot { background: var(--border); }
.calpt-chip:hover { border-color: var(--accent); }

/* ---------------- modal ---------------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8, 16, 24, 0.55);
  display: grid; place-items: center; z-index: 60; padding: 20px;
}
.modal {
  width: 480px; max-width: 100%;
  background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
  padding: 20px; max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-size: 16px; margin-bottom: 12px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal .error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 16px; }
.modal.wide { width: 720px; }

/* ---------------- transcript speakers + inline edit ---------------- */

.utt-meta { flex: none; display: flex; align-items: center; }
.spk {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.spk-patient { background: var(--accent-soft); color: var(--accent); }
.spk-clin { background: var(--review-soft); color: var(--review); }
.spk-none { background: var(--hover); color: var(--muted); }
.spk-toggle { cursor: pointer; }
.spk-toggle:hover { filter: brightness(0.96); }
.utt-clinician .utt-text { color: var(--muted); }
.utt-text[contenteditable] { border-radius: 4px; padding: 0 2px; }
.utt-text[contenteditable]:focus { outline: 2px solid var(--accent-soft); background: var(--panel); }
.note-summary[contenteditable]:focus { outline: 2px solid var(--accent-soft); border-radius: 4px; }
.map-note-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.icon-btn { border: none; background: none; color: var(--muted); font-size: 13px; padding: 0 4px; border-radius: 5px; }
.icon-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------------- AI cleanup card ---------------- */

.cleanup-card {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; margin: 10px 0 4px;
}
.cleanup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cleanup-head b { font-size: 13px; }
.cleanup-line { font-size: 12px; color: var(--ink); margin-top: 4px; }

/* ---------------- review modal ---------------- */

.rev-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.rev-tab {
  background: none; border: none; padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rev-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rev-pane { max-height: 52vh; overflow-y: auto; }
.rev-legend { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.rev-turn { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; align-items: flex-start; }
/* A line or finding the cleanup proposes to remove: still legible, clearly on
   its way out, and one click from being kept. */
.rev-turn .rev-drop-why { display: none; flex-basis: 100%; font-size: 11.5px; color: var(--danger); padding-left: 30px; }
.rev-turn.dropping .rev-drop-why { display: block; }
.rev-turn.dropping .rev-text, .rev-turn.dropping .rev-spk { opacity: 0.55; text-decoration: line-through; }
.rev-why { font-size: 11.5px; color: var(--danger); margin-bottom: 5px; line-height: 1.45; }
.rev-finding.dropping .rev-text { opacity: 0.55; text-decoration: line-through; }
.rev-spk { flex: none; width: 104px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 12px; }
.rev-text { flex: 1; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); resize: none; overflow: hidden; line-height: 1.4; font-size: 13px; }

/* import-review modal (scanned-record import) */
.imp-label { display: block; font-size: 11px; color: var(--muted); margin: 8px 0 3px; }
.imp-text { width: 100%; display: block; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--ink); resize: vertical; line-height: 1.4; font-size: 12.5px; }
.imp-text:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.imp-row { display: flex; gap: 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.imp-row input, .imp-row select, .imp-head input, .imp-head select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 12.5px;
}
.imp-row input:focus, .imp-head input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.rev-text:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.rev-finding { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rev-inc { flex: none; padding-top: 3px; }
.rev-fbody { flex: 1; min-width: 0; }
/* .rev-text's flex:1 does nothing inside .rev-fbody, which is a block — the
   textarea would fall back to its default column width. */
.rev-fbody .rev-text { display: block; width: 100%; }
.rev-fhead { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rev-fhead b { font-size: 13px; }
.rev-meas { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.rev-meas li { margin-bottom: 2px; }
.rev-pane .field { margin-bottom: 12px; }

/* ---------------- clinical insights ---------------- */
#insightsCard { margin-top: 14px; border-top: 3px solid transparent; border-image: var(--brand-grad-tv) 1; }
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ins-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.ins-disclaimer { font-size: 12px; color: var(--muted); margin: 8px 0 12px; }
.ins-section { margin-bottom: 14px; }
.ins-section:last-child { margin-bottom: 0; }
.ins-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 8px; }
.ins-item { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
.ins-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-item-head b { font-size: 13.5px; }
.ins-detail { font-size: 13px; color: var(--ink); margin-top: 3px; }
.ins-basis { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-style: italic; }
.ins-add { margin-left: auto; }
.ins-flag {
  border: 1px solid var(--danger-border); background: var(--danger-soft);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
}
.ins-flag b { color: var(--danger); font-size: 13.5px; }

/* ---------------- ghost button ---------------- */
.btn.ghost { background: transparent; --ring: 0px; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }

/* ---------------- typed dictation (manual entry under the transcript) ---------------- */
.typed-dictation { margin-top: 10px; }
.typed-dictation > label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 5px;
}
.typed-dictation textarea {
  width: 100%; min-height: 68px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: inherit; line-height: 1.5;
}
.typed-dictation textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.typed-dictation-actions { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.typed-dictation-actions .hint { font-size: 11.5px; color: var(--muted); }
.typed-dictation-actions .btn { margin-left: auto; }

/* ---------------- patient AI assistant (grounded chat) ---------------- */
.asst-card { display: block; }
.asst-head { display: flex; align-items: center; gap: 10px; }
.asst-head h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asst-disclaimer { font-size: 12px; color: var(--muted); margin: 8px 0 12px; }
.asst-log {
  border: 1px solid var(--border); border-radius: 12px; background: var(--hover);
  padding: 12px; min-height: 96px; max-height: 380px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.asst-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 6px 0; }
.asst-starters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.asst-starter { cursor: pointer; border: 1px solid var(--border); background: var(--panel); color: var(--ink); }
.asst-starter:hover { background: var(--accent-soft); border-color: var(--accent); }
.asst-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.asst-msg.user { align-self: flex-end; background: var(--brand-grad-v); color: #fff; border-bottom-right-radius: 4px; }
.asst-msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.asst-msg.assistant.unanswered { border-color: var(--review); background: var(--review-soft); }
.asst-msg.thinking { color: var(--muted); }
.asst-typing { font-style: italic; }
.asst-cites { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.asst-input { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.asst-input textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 140px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: inherit; line-height: 1.4;
}
.asst-input textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.asst-input .btn { flex-shrink: 0; }

/* ---------------- marketing landing page ---------------- */
.landing { max-width: 1120px; margin: 0 auto; padding: 0 22px 60px; color: var(--ink); }
.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.lp-nav .brandline { display: flex; align-items: center; gap: 12px; }
.lp-nav .brandline .logo { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; }
.lp-nav .brandline .logo svg { width: 26px; height: 26px; }
.lp-nav .brandline b { font-size: 19px; }
.lp-nav-sub { font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-left: 6px; text-transform: uppercase; font-weight: 700; }

.lp-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding: 40px 0 60px; }
.lp-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; }
.lp-hero-copy h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.5px; margin-bottom: 18px; }
.lp-accent { color: var(--accent); }
.lp-lead { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 560px; margin-bottom: 26px; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.lp-cta-btn { --pad-y: 12px; --pad-x: 22px; font-size: 15px; }
.lp-trust { font-size: 12.5px; color: var(--muted); background: var(--accent-soft); padding: 10px 14px; border-radius: 10px; display: inline-block; }
.lp-hero-shot img {
  width: 100%; border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 30, 45, 0.18);
}

/* ---- bug reporting ----
   The opener is always one click away during testing, because a tester who has
   to go looking for the report form will simply not report the thing. It reads
   as one more rail entry, pinned just above the account chip, rather than a
   floating button that covers the content it's meant to describe. */
.nav-utility { flex: none; margin-bottom: 4px; }
.nav-utility .nav-group { margin-bottom: 0; }

.bug-backdrop[hidden] { display: none; }
.bug-modal { max-width: 620px; max-height: 92vh; overflow-y: auto; }
.bug-intro { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: -4px 0 16px; }

.bug-sevs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 620px) { .bug-sevs { grid-template-columns: repeat(2, 1fr); } }
.bug-sev {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 9px 11px; border-radius: 10px; font-family: inherit;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink);
}
.bug-sev b { font-size: 13px; font-weight: 650; }
.bug-sev small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.bug-sev:not(.on):hover { background: var(--hover); }
.bug-sev.on { border-color: var(--accent); background: var(--accent-soft); }
/* The hint stays --ink on a selected card, dimmed rather than recolored. It
   used to take --accent-ink, which is the label colour for a SOLID --accent
   fill; over the tinted --accent-soft card that is near-invisible in both
   themes — white on the pale wash, near-black on the dark one. Muted grey is
   no better here, so the hierarchy comes from opacity instead of hue. */
.bug-sev.on small { color: var(--ink); opacity: .75; }

.bug-shot-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bug-shot-warn {
  font-size: 11.5px; line-height: 1.5; color: var(--review);
  background: var(--review-soft); border-radius: 8px; padding: 7px 10px; margin-top: 8px;
}
/* A bug is often several screens — before, after, the error — so the previews
   are a wrapping strip of thumbnails, each with its own remove. */
.bug-shot-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bug-shot { position: relative; margin: 0; }
.bug-shot img {
  display: block; width: 132px; height: 92px; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--border);
}
.bug-shot-drop {
  position: absolute; top: -6px; right: -6px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink);
  font-size: 11px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.bug-shot-drop:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.bug-shot-count { font-size: 12px; color: var(--muted); }
.bug-ctx {
  display: flex; flex-direction: column; gap: 3px; margin: 4px 0 10px;
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
  border-top: 1px dashed var(--border); padding-top: 10px;
}
.bug-ctx b { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--sil-line, var(--muted)); }

/* ---- "See how it works" walkthrough ----
   A full-screen guided tour of real app screenshots, opened from the landing
   page. Two columns on a desktop (screen on the left, the argument on the
   right); stacked on a phone, where the screenshot goes first because that is
   what the reader came to see. */
.wt-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.wt-backdrop[hidden] { display: none; }
.wt-panel {
  background: var(--panel); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.32);
  width: min(1180px, 100%); max-height: min(880px, 94vh);
  display: flex; flex-direction: column; overflow: hidden;
}
.wt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--border); flex: none;
}
.wt-head b { font-size: 16.5px; }
.wt-sub { color: var(--muted); font-size: 13px; margin-left: 10px; }
.wt-close {
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1;
}
.wt-close:hover { background: var(--hover); }

.wt-stage { flex: 1; overflow-y: auto; padding: 22px; }
.wt-slide { display: none; margin: 0; }
.wt-slide.on { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }
.wt-shotwrap {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow);
}
.wt-shotwrap img { display: block; width: 100%; height: auto; }

.wt-copy { display: flex; flex-direction: column; gap: 14px; }
.wt-step {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent);
}
.wt-copy h3 { font-size: 23px; line-height: 1.22; letter-spacing: -0.3px; margin: -4px 0 0; }
.wt-compare { display: flex; flex-direction: column; gap: 12px; }
.wt-now, .wt-here { border-radius: 11px; padding: 13px 15px; font-size: 14px; line-height: 1.55; }
.wt-now { background: var(--hover); border: 1px solid var(--border); color: var(--muted); }
.wt-here { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); }
.wt-now p, .wt-here p { margin: 0; }
.wt-tag {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; margin-bottom: 5px;
}
.wt-now .wt-tag { color: var(--sev-none); }
.wt-here .wt-tag { color: var(--accent); }
.wt-where {
  font-size: 13px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 12px;
}
.wt-where span {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--sev-none); margin-right: 8px;
}

.wt-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px; border-top: 1px solid var(--border); flex: none;
}
.wt-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wt-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--sil); transition: background .15s, transform .15s;
}
.wt-dot:hover { transform: scale(1.25); }
.wt-dot.on { background: var(--accent); transform: scale(1.25); }
.wt-foot .btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 900px) {
  .wt-backdrop { padding: 0; }
  .wt-panel { max-height: 100vh; border-radius: 0; width: 100%; }
  .wt-slide.on { grid-template-columns: 1fr; gap: 18px; }
  .wt-copy h3 { font-size: 20px; }
  .wt-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-dot { transition: none; }
}

.lp-section-title { font-size: 28px; text-align: center; letter-spacing: -0.3px; margin-bottom: 34px; }
.lp-features { padding: 40px 0; }
.lp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-feature { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.lp-feature-ico { font-size: 26px; margin-bottom: 12px; }
.lp-feature h3 { font-size: 16px; margin-bottom: 8px; }
.lp-feature p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.lp-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 30px 0; }
.lp-shot img { width: 100%; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(15, 30, 45, 0.12); }
.lp-shot span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }

.lp-final { text-align: center; padding: 56px 0 20px; }
.lp-final h2 { font-size: 30px; letter-spacing: -0.3px; margin-bottom: 10px; }
.lp-final p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.lp-foot { margin-top: 34px; font-size: 12px; color: var(--muted); letter-spacing: 0.3px; }

.login-cardhead { display: flex; align-items: center; justify-content: space-between; }
.login-cardhead h2 { margin: 0; }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: 26px; padding: 20px 0 40px; text-align: center; }
  .lp-hero-copy h1 { font-size: 34px; }
  .lp-lead { font-size: 15px; margin-left: auto; margin-right: auto; }
  .lp-cta { justify-content: center; }
  .lp-cta-btn { flex: 1; justify-content: center; min-width: 140px; }
  .lp-feature-grid { grid-template-columns: 1fr; }
  .lp-shots { grid-template-columns: 1fr; }
  .lp-section-title { font-size: 23px; }
  .landing { padding: 0 16px 48px; }
}

/* ---------------- print ---------------- */

#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; color: #000; background: #fff; font-size: 12px; }
  #printArea h1 { font-size: 18px; margin-bottom: 2px; }
  #printArea h2 { font-size: 14px; margin: 14px 0 6px; border-bottom: 1px solid #999; padding-bottom: 3px; }
  #printArea h3 { font-size: 12px; margin: 10px 0 4px; }
  #printArea table { width: 100%; border-collapse: collapse; }
  #printArea th, #printArea td { border: 1px solid #bbb; padding: 4px 7px; text-align: left; }
  #printArea .doc-break { page-break-before: always; }
  #printArea .print-muted { color: #444; }
  #printArea .sig-line { margin-top: 8px; font-style: italic; }
}

/* ---- mobile-only chrome: bottom pill tab bar, top sync dot, account menu.
   All hidden on desktop, where the left sidebar owns navigation. ---- */
.tabbar, .topbar-sync, .acct-menu { display: none; }

/* ---------------- mobile (phones & small tablets) ----------------
   Native app shell: a slim fixed top bar (brand + sync + account) and a
   fixed bottom pill tab bar for the three main workflow destinations, so the
   main content owns the screen like a real iOS/Android app. Kept to narrow
   widths (≤720px) so the desktop left rail — with the account chip pinned at
   its bottom — stays in place on split-screen / smaller laptop windows. */
@media (max-width: 720px) {
  .shell { display: block; padding-left: 0; }

  /* --- top bar: live sync dot, sits left of the account avatar --- */
  .topbar-sync {
    display: inline-flex; align-items: center; flex: none;
    font-size: 13px; line-height: 1; color: var(--muted);
    padding: 0 2px;
  }

  /* --- account avatar becomes the menu trigger --- */
  .sidebar .userchip .avatar-btn {
    border: none; padding: 0; display: grid; place-items: center;
  }
  .sidebar .userchip .avatar-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--brand-1);
  }

  /* --- account menu: Privacy / Admin / Profile / Sign out, out of the
     main workflow. Opens as a small sheet under the top bar. --- */
  .acct-menu {
    display: block; position: fixed; z-index: 60;
    top: calc(54px + env(safe-area-inset-top)); right: 10px;
    width: min(260px, calc(100vw - 20px));
    background: var(--panel); color: var(--ink);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
    padding: 6px;
    opacity: 0; transform: translateY(-6px) scale(0.98);
    pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .acct-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .acct-menu-head {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
  }
  .acct-menu-head .avatar { width: 34px; height: 34px; font-size: 12px; }
  .acct-menu-head b { display: block; font-size: 14px; }
  .acct-menu-head small { color: var(--muted); font-size: 12px; }
  .acct-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 10px; border: none; background: none; text-align: left;
    font-size: 14.5px; color: var(--ink); text-decoration: none; border-radius: 9px;
  }
  .acct-item:hover, .acct-item:active { background: var(--hover); }
  .acct-item .acct-ico { display: grid; place-items: center; width: 18px; color: var(--muted); }
  .acct-item.danger { color: var(--danger); }
  .acct-item.danger .acct-ico { color: var(--danger); }

  /* --- bottom pill tab bar: three workflow destinations + sliding pill.
     Shares the rail's --side-bg so the top bar and bottom bar read as the same
     dark teal-gradient surface. --- */
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    align-items: stretch;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--side-bg);
    border-top: 1px solid var(--side-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.28);
  }
  /* one moving element behind the tabs gives the segmented-slider feel */
  .tab-pill {
    position: absolute; top: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 0;
    left: 10px;
    width: calc((100% - 20px) / var(--tab-count));
    transform: translateX(calc(var(--tab-index) * 100%));
    background: linear-gradient(180deg, #3ec6d0, #0e7c86);
    border-radius: 13px;
    box-shadow: 0 4px 12px rgba(14, 124, 134, 0.5);
    transition: transform 0.28s cubic-bezier(0.4, 0.9, 0.3, 1);
  }
  .tab-pill.hidden { opacity: 0; }
  .tab {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px; border-radius: 13px;
    text-decoration: none; color: var(--side-fg);
    transition: color 0.2s ease;
  }
  .tab .tab-ico { width: 22px; height: 22px; display: grid; place-items: center; }
  .tab .tab-ico svg { width: 20px; height: 20px; opacity: 0.9; }
  .tab .tab-label { font-size: 11px; font-weight: 600; line-height: 1.1; }
  .tab.active { color: #fff; }
  .tab.active .tab-ico svg { opacity: 1; stroke: #fff; }
  .tab.disabled { opacity: 0.34; pointer-events: none; }

  /* sidebar → fixed top app bar */
  .sidebar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    width: 100%; height: auto;
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 14px;
    padding-top: calc(8px + env(safe-area-inset-top));
    border-right: none;
    border-bottom: 1px solid var(--side-border);
  }
  /* dissolve the sticky column wrapper so brand/sync/account lay out directly
     as the horizontal top bar again */
  .sidebar-inner { display: contents; }
  .sidebar .brand { padding: 0; flex: 1; min-width: 0; }
  /* the sidebar's contextual "Ask about patient" launcher is a desktop-rail
     affordance; on phones the same drawer is reached from the page header */
  .sidebar-context { display: none; }
  .only-mobile { display: inline-flex; align-items: center; gap: 6px; }
  /* the drawer becomes a full-width sheet on phones */
  .assistant-drawer { width: 100%; }
  .sidebar .brand .logo { width: 34px; height: 34px; border-radius: 10px; }
  .sidebar .brand-text b { font-size: 15px; }
  .sidebar .brand-text span { font-size: 9px; letter-spacing: 2px; }
  .sidebar .spacer { display: none; }
  .sidebar .userchip { border-top: none; margin: 0; padding: 0; gap: 8px; flex: none; }
  .sidebar .userchip .who { display: none; }          /* name shown in the page header instead */
  .sidebar .userchip .avatar { width: 32px; height: 32px; font-size: 12px; }
  .sidebar .userchip .signout { width: 36px; height: 36px; }

  /* the full sidebar nav (all six links) is a desktop rail; on phones the
     workflow lives in the bottom pill bar and the rest in the account menu */
  .nav { display: none; }

  /* content clears both fixed bars (plus notch / home indicator) */
  .content {
    padding: 16px;
    padding-top: calc(66px + env(safe-area-inset-top));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* 16px form controls stop iOS Safari from zooming in on focus */
  input, select, textarea { font-size: 16px; }

  /* login: fit the phone instead of a desktop-sized card the user has to
     zoom out to see. The box spans the screen with comfortable margins. */
  .login-wrap { padding: 20px 16px; align-content: center; }
  .login-box { width: 100%; }
  .login-box .brandline { gap: 11px; margin-bottom: 16px; }
  .login-box .brandline .logo { width: 44px; height: 44px; border-radius: 12px; }
  .login-box h1 { font-size: 19px; }
  .login-box > .card { padding: 18px; }
  /* roomier tap targets */
  .btn { --pad-y: 10px; --pad-x: 15px; }
  .btn.small { --pad-y: 7px; --pad-x: 12px; }
  /* ...and the shared control height follows them up, so the selects and date
     fields sharing those rows stay level with the buttons here too. 36px is
     what the padding above works out to, and it is also exactly what a 16px
     input needs — see the anti-zoom rule above. */
  :root { --control-h: 36px; }
  /* that rule is `input, select, textarea`, which loses to the id-free class
     selector this input is styled by, so restate it: below 16px iOS zooms the
     whole page in when the field takes focus. */
  .cal-toolbar input[type="date"] { font-size: 16px; }
  .login-user { padding: 12px 14px; }

  /* wide tables scroll horizontally instead of crushing their columns.
     the primary text column (first cell) is allowed to wrap so ordinary
     list cards — dashboard drafts, schedules — fit the phone width instead
     of shoving their trailing chip/date columns off-screen behind an
     awkward nested horizontal scroll. narrow trailing columns stay nowrap. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.list th, table.list td { white-space: nowrap; }
  table.list th:first-child, table.list td:first-child { white-space: normal; }
  table.list td:first-child { word-break: break-word; }
  .cal-grid { min-width: 480px; }

  /* dictation controls: mic stays prominent, the long-labelled language +
     engine selects drop to full-width rows so they're readable & tappable */
  .dict-bar { gap: 8px; }
  .dict-bar .mic-btn { flex: 1 1 auto; }
  .dict-bar select { flex: 1 1 100%; width: 100%; padding: 10px; }
  .dict-status { flex: 1 1 100%; text-align: center; }

  /* assistant chat: taller log, its input clears the bottom tab bar */
  .asst-log { max-height: 300px; }
  .asst-msg { max-width: 92%; }

  /* the assistant card contains a horizontally-scrolling override above; keep
     its chat content from being clipped by that rule */
  .asst-card { overflow: visible; }

  /* on phones the compact top-bar dot stands in for the corner badge */
  #syncBadge { display: none !important; }
}

/* modal becomes a bottom sheet on phones — thumb-reachable, native feel */
@media (max-width: 560px) {
  .modal-backdrop { align-items: end; padding: 0; }
  .modal, .modal.wide {
    width: 100%; max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    animation: sheet-up 0.22s ease-out;
  }
  .modal .modal-actions { position: sticky; bottom: 0; background: var(--panel); padding-top: 10px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none !important; } }

/* ---- record-then-process dictation ----
   A second way to dictate: record straight through, process once. The bar sits
   under the engine picker so the two modes read as alternatives, not a hierarchy. */
/* The recorder sits below the typed box now, as the second way to dictate —
   live listening is the default. Quieter than the mic bar on purpose: it is
   there to be found, not to compete for the first tap. */
.rec-bar { border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; margin-top: 14px; background: var(--bg); }
.rec-alt-head { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rec-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-btn { display: inline-flex; align-items: center; gap: 8px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; }
.rec-btn.on { border-color: var(--danger); color: var(--danger); }
.rec-btn.on .rec-dot { animation: recpulse 1.4s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-btn.on .rec-dot { animation: none; } }
.rec-meta { font-size: 12.5px; color: var(--muted); flex: 1 1 220px; line-height: 1.45; }
.rec-progress { margin-top: 9px; font-size: 12.5px; color: var(--accent); }

/* ---- side-by-side review after processing ---- */
.cmp-list { display: flex; flex-direction: column; gap: 18px; max-height: 60vh; overflow-y: auto; }
.cmp-row { border: 1px solid var(--border); border-radius: 11px; padding: 13px 14px; }
.cmp-label { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .cmp-cols { grid-template-columns: 1fr; } }
.cmp-head { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.cmp-head.ai { color: var(--accent); }
.cmp-col textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); font: inherit; font-size: 13.5px; resize: vertical; }
.cmp-col:last-child textarea { border-color: var(--accent); background: var(--accent-soft); }
.cmp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
.cmp-state { font-size: 12px; color: var(--accent); }

/* ---- per-visit dictation total, and the clinic's plan-usage meter ---- */
/* Whole minutes of speech while the mic is open. Sits with the mic controls,
   in the muted weight — informative at a glance, never a countdown. */
.dict-meter { font-size: 12.5px; color: var(--muted); }
.dict-meter b { color: var(--ink); font-weight: 600; }
.dict-meter .hint { font-size: 11.5px; }
.dict-total { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.dict-total b { color: var(--ink); }
.dict-total .hint { font-size: 11.5px; }

.allowance { margin-bottom: 16px; }
.allowance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.allowance-head h2 { margin: 0; }
.allowance-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.allowance-count { text-align: right; line-height: 1.15; white-space: nowrap; }
.allowance-count b { display: block; font-size: 27px; font-variant-numeric: tabular-nums; }
.allowance-count span { font-size: 12px; color: var(--muted); }
.allowance-count.good b { color: var(--good); }
.allowance-count.warn b { color: var(--warn, #b06d0b); }
.allowance-count.bad b { color: var(--danger); }

.allowance-bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 12px 0 14px; }
.allowance-fill { height: 100%; border-radius: 99px; transition: width .3s ease; }
.allowance-fill.good { background: var(--good); }
.allowance-fill.warn { background: var(--warn, #d18b18); }
.allowance-fill.bad { background: var(--danger); }

.allowance-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.allowance-stats div { line-height: 1.25; }
.allowance-stats b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.allowance-stats span { font-size: 11.5px; color: var(--muted); }
.allowance-note { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---- per-patient dictation history (a scheduling hint, in "At a glance") ---- */
/* Stacked, not inline: an open <details> inside a table cell reflows the
   summary line around its own expanded body, which dropped the headline figure
   below the history list. */
.dict-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dict-cell-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dict-hist { display: block; width: 100%; }
.dict-hist summary { cursor: pointer; font-size: 11.5px; color: var(--muted); list-style: none; }
.dict-hist summary::-webkit-details-marker { display: none; }
.dict-hist summary::before { content: "▸ "; font-size: 9px; }
.dict-hist[open] summary::before { content: "▾ "; }
.dict-hist summary:hover { color: var(--accent); }
.dict-hist-body { margin-top: 7px; border-top: 1px solid var(--border); padding-top: 7px; }
.dict-hist-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.dict-hist-date { color: var(--muted); flex: 1; }
.dict-hist-secs { font-variant-numeric: tabular-nums; }
.dict-hist-foot { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.45; white-space: normal; }

/* two plan meters, each in its own unit (visits / dictation minutes) */
.meter { margin-top: 15px; }
.meter:first-of-type { margin-top: 14px; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.meter-head > span { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 620; }
.meter-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.meter-head b.good { color: var(--good); }
.meter-head b.warn { color: var(--warn, #b06d0b); }
.meter-head b.bad { color: var(--danger); }
.meter-head b span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.meter-foot { margin-top: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The demo-clinic switch is a rail entry now (see .nav-utility), so it needs no
   box of its own — only the disabled state while its request is in flight. */
.demo-trigger:disabled, .bug-trigger:disabled { opacity: .6; cursor: default; }

/* ---- Landing: pricing ----------------------------------------------------
   Four rungs read side by side so the per-visit rate can be compared at a
   glance — that column is the one a clinic owner checks against their own
   book, and it has to fall at every step or the ladder punishes growing. */
.lp-nav-actions { display: flex; align-items: center; gap: 16px; }
.lp-nav-link {
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  /* a <button> for routing reasons (see app.js), styled as the link it reads as */
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.lp-nav-link:hover { color: var(--accent); }

.lp-pricing { padding: 48px 0 8px; }
.lp-pricing-lead { max-width: 60ch; margin: -20px auto 30px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }

.lp-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.lp-tier {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px 18px;
  background: var(--panel);
}
.lp-tier.featured { border-color: var(--accent); box-shadow: 0 6px 24px rgba(15, 138, 128, .13); }
.lp-tier-flag {
  position: absolute; top: -10px; left: 18px; padding: 2px 9px; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.lp-tier-name { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lp-tier-price { font-size: 27px; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.lp-tier-price span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.lp-tier-visits { font-size: 13.5px; color: var(--ink); }
.lp-tier-rate { font-size: 12.5px; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-tier-who { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.lp-price-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.lp-price-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.lp-price-note b { color: var(--ink); }
.lp-price-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .lp-tiers { grid-template-columns: repeat(2, 1fr); }
  .lp-price-notes { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .lp-tiers { grid-template-columns: 1fr; }
  /* The link stays on a phone. Hiding it left the price list reachable only by
     scrolling past four sections, and a clinic owner checking cost on a phone
     is the likeliest way this page gets read at all. It fits: measured at
     375px there is room to spare and the header does not wrap. */
  .lp-nav-actions { gap: 11px; }
  .lp-nav-link { font-size: 13.5px; }
}

/* ---- what fills itself, and what needs the therapist -----------------
   An empty box that dictation is about to fill and an empty box waiting for
   a person look identical. These say which is which, on the label, before
   anyone has to guess. */
.field-guide {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--surface-2, rgba(127, 127, 127, 0.05));
}
.field-guide-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.field-guide-head b { font-size: 12.5px; }
.field-guide-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.field-guide-label { font-size: 12px; color: var(--muted); }
.field-guide-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--muted); }
.field-guide-legend span { display: inline-flex; align-items: center; gap: 5px; }

.src-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.src-filled { background: var(--accent, #6c5ce7); }
.src-drafted { background: var(--warn, #d98324); }
.src-yours { background: var(--muted, #8a8a99); }

.src-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 7px;
  vertical-align: middle;
  white-space: nowrap;
}
.src-badge.src-filled { background: rgba(108, 92, 231, 0.13); color: var(--accent, #6c5ce7); }
.src-badge.src-drafted { background: rgba(217, 131, 36, 0.15); color: var(--warn, #d98324); }
.src-badge.src-yours { background: rgba(138, 138, 153, 0.15); color: var(--muted, #8a8a99); }

/* a section row in the review modal — same shape as a finding row, so the
   two tabs read the same way */
.rev-section { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rev-section.dropping .rev-text { opacity: 0.5; }
.rev-section.dropping .rev-fhead b { opacity: 0.6; }
.rev-hint { font-size: 11px; color: var(--muted); }
.rev-yours {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}