/* Integrated Practice Management System — design system
   Brand palette lifted from www.athleticsmd.org:
   royal blue #0033A0 · deep navy #062768 · greens #00B454/#00813B/#128274
   neutrals #F4F8FC/#DCE6F2/#C9D7EC/#51607A · Montserrat display */
:root {
  --navy-950: #050F2E;
  --navy-900: #071B45;
  --navy-800: #062768;
  --blue-700: #0033A0;
  --blue-600: #1D4ED0;
  --blue-100: #DCE6F2;
  --green-700: #007D39;   /* AA on --green-100 badges: 4.38:1 was under */
  --green-500: #00B454;
  --green-100: #DDF6E8;
  --teal-600: #128274;
  --amber-600: #AF5109;   /* AA on --amber-100 badges: 4.39:1 was under */
  --amber-100: #FCEED8;
  --red-600: #C0392B;
  --red-100: #FBE7E3;
  --danger: var(--red-600); /* alias — past-due amounts, warnings, errors */
  --bg: #F4F8FC;
  --surface: #FFFFFF;
  --border: #DCE6F2;
  --border-strong: #C9D7EC;
  --text: #0E1E3E;
  --muted: #51607A;
  /* Disabled controls: 6.8:1 ink on paper, deliberately chosen, never opacity. */
  --disabled-bg: #E8ECF2; --disabled-ink: #44506A; --disabled-line: #C4CDDB;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(6, 39, 104, .05), 0 6px 22px rgba(6, 39, 104, .07);
  --shadow-lift: 0 2px 6px rgba(6, 39, 104, .08), 0 14px 34px rgba(6, 39, 104, .12);
  --glass: saturate(1.6) blur(14px);
  --display: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: 14.5px/1.55 var(--body);
  background:
    radial-gradient(1200px 480px at 12% -8%, rgba(0, 51, 160, .05), transparent 60%),
    radial-gradient(900px 420px at 105% 0%, rgba(0, 180, 84, .05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* one page = one vertical scroll; wide tables scroll inside their own cards */
}
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 4px; color: var(--navy-800); }
h2 { font-family: var(--display); font-size: 15.5px; font-weight: 700; margin: 0 0 14px; color: var(--navy-800); }
h3 { font-family: var(--display); font-size: 14px; font-weight: 700; margin: 0 0 8px; }

::selection { background: var(--blue-100); }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }

/* The hidden attribute means hidden, whatever else a rule says.
   [hidden] { display: none } comes from the user agent, so ANY author display
   outranks it — .platform-banner, .form-row, .iv-step-saved and
   .iv-step-actions each set one and each rendered while "hidden": an empty
   yellow bar above every page, a stray "Medication name" field in Smart Med
   Admin, and IV consent steps that would not put their buttons away. This is
   the line consent.css has always had; styles.css never did. */
[hidden] { display: none !important; }

/* ── Layout ── */
#app { display: flex; min-height: 100vh; min-height: 100dvh; }
#app.has-demo-ribbon { padding-top: 31px; }
.topbar, .tabbar, .drawer-backdrop { display: none; } /* mobile-only chrome */
.sidebar {
  width: 252px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color: #D7E2F4; display: flex; flex-direction: column;
  padding: 20px 14px 14px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
}
.sidebar .logo {
  padding: 2px 8px 18px;
}
.sidebar .brand-lockup {
  display: block; width: 100%; height: auto; background: #fff;
  border-radius: 10px; padding: 5px;
}
.sidebar .logo small {
  display: block; font-family: var(--body); font-weight: 500; font-size: 10.5px;
  color: #7E96C4; letter-spacing: 1.6px; text-transform: uppercase; margin-top: 3px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a {
  color: #B9C9E6; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; display: block;
}
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.sidebar nav .nav-group {
  margin: 14px 12px 5px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px; color: #6B84B8;
}

/* Priority tabs — the four most-used areas, each with its own accent */
.sidebar nav a.nav-primary {
  font-family: var(--display); font-size: 14.5px; font-weight: 700; color: #fff;
  padding: 12px 14px 12px 16px; margin: 3px 0; border-radius: 10px;
  border-left: 4px solid var(--pc, var(--green-500));
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, transparent), rgba(255,255,255,.04));
  position: relative;
}
.sidebar nav a.nav-primary small {
  display: block; font-family: var(--body); font-weight: 500; font-size: 10.5px;
  color: #A8BCDF; letter-spacing: .3px; margin-top: 1px;
}
.sidebar nav a.nav-primary:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 38%, transparent), rgba(255,255,255,.06));
}
.sidebar nav a.nav-primary.active {
  background: var(--pc); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pc) 45%, transparent);
}
.sidebar nav a.nav-primary.active small { color: rgba(255,255,255,.85); }
/* The active item paints --pc solid behind white 14.5px text, so each of
   these must clear 4.5:1 against white. They were picked by eye and three of
   them did not (amber 3.35, green 3.91, teal 4.15); these are the same hues,
   darkened by the least that clears it. tests/uibundle.test.js holds the line. */
.nav-primary.pc-green { --pc: #008839; }
.nav-primary.pc-blue { --pc: #2456C4; }
.nav-primary.pc-teal { --pc: #0E8475; }
.nav-primary.pc-amber { --pc: #A96608; }

.sidebar .whoami {
  padding: 12px 10px 2px; font-size: 12px; color: #9FB3D8;
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 10px;
}
.sidebar .whoami button { margin-top: 8px; }

.main { flex: 1; padding: 30px 36px 48px; min-width: 0; max-width: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }

/* ── Cards & stats ── */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 17px 13px; box-shadow: var(--shadow); border-top: 3px solid var(--blue-700);
}
.stat:nth-child(2n) { border-top-color: var(--green-500); }
.stat:nth-child(3n) { border-top-color: var(--teal-600); }
.stat .label { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1.1px; }
.stat .value { font-family: var(--display); font-size: 25px; font-weight: 800; margin-top: 3px; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.stat .value.small { font-size: 16px; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }

/* Contact actions stay on-brand everywhere: call = royal blue, text = green */
button.btn-call, .btn.btn-call {
  background: var(--blue-50, #eef4fb); border: 1.5px solid var(--blue-700); color: var(--blue-700);
}
button.btn-call:hover, .btn.btn-call:hover { background: var(--blue-100); box-shadow: none; }
button.btn-text, .btn.btn-text {
  background: var(--green-50, #f0fdf4); border: 1.5px solid var(--green-700); color: var(--green-700);
}
button.btn-text:hover, .btn.btn-text:hover { background: var(--green-100); box-shadow: none; }
button.btn-email, .btn.btn-email {
  background: #E8F5F2; border: 1.5px solid var(--teal-600); color: var(--teal-600);
}
button.btn-email:hover, .btn.btn-email:hover { background: #D5ECE7; box-shadow: none; }
/* ⭐ Get review — Google's own gold, so it reads as what it is. */
button.btn-review, .btn.btn-review {
  background: #FFF8E5; border: 1.5px solid #C79100; color: #8A6600; font-weight: 700;
}
button.btn-review:hover, .btn.btn-review:hover { background: #FFF0C4; box-shadow: none; }

/* Embedded (iframe) mode: shrink the chrome so the workspace breathes */
.embedded .sidebar { width: 192px; padding: 14px 10px; }
.embedded .sidebar .nav-primary { font-size: 13.5px; padding: 9px 10px; }
.embedded .sidebar .nav-primary small { font-size: 10px; }
.embedded .main { padding: 14px 16px; }
.embedded .page-head h1 { font-size: 21px; }
.embedded .card { padding: 14px 16px; }

/* Frozen edge columns (e.g. Med Tracker): the first column (patient) and
   last column (actions) stay visible while scrolling sideways, and the
   header row stays visible while scrolling down. */
.table-wrap.freeze { margin: 0; padding: 0; }
.freeze th:first-child, .freeze td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  box-shadow: inset -10px 0 8px -10px rgba(6, 39, 104, .35);
  white-space: nowrap;
}
.freeze th:last-child, .freeze td:last-child {
  position: sticky; right: 0; z-index: 2; background: var(--surface);
  box-shadow: inset 10px 0 8px -10px rgba(6, 39, 104, .35);
}
.freeze thead th:first-child, .freeze thead th:last-child { z-index: 3; }
.freeze tbody tr:hover td:first-child, .freeze tbody tr:hover td:last-child { background: #F7FAFD; }
/* Full-width rows (inline editors) opt out of the frozen columns */
.freeze td[colspan] { position: static; box-shadow: none; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); padding: 9px 10px;
  border-bottom: 2px solid var(--border-strong); white-space: nowrap;
}
td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover td { background: #F7FAFD; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 2.5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
}
.badge.green { background: var(--green-100); color: var(--green-700); }
.badge.blue { background: var(--blue-100); color: var(--blue-700); }
.badge.gray { background: #EDF1F7; color: var(--muted); }
.badge.red { background: var(--red-100); color: var(--red-600); }
.badge.yellow { background: var(--amber-100); color: var(--amber-600); }

/* ── Forms & buttons ── */
button, .btn {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  border: 1px solid var(--blue-700); border-radius: 9px;
  background: var(--blue-700); color: #fff; padding: 8px 16px; cursor: pointer; display: inline-block;
  transition: background .12s ease, box-shadow .12s ease;
}
button:hover, .btn:hover { background: var(--navy-800); text-decoration: none; box-shadow: 0 3px 10px rgba(0, 51, 160, .25); }
button.secondary { background: var(--blue-50, #eef4fb); color: var(--blue-700); border-color: var(--blue-300, #93b4e4); }
button.secondary:hover { background: var(--blue-100); box-shadow: none; }
a.btn.secondary { background: var(--blue-50, #eef4fb); color: var(--blue-700); border-color: var(--blue-300, #93b4e4); }
a.btn.secondary:hover { background: var(--blue-100); }
button.danger { background: var(--red-50, #fef2f2); border-color: var(--red-600); color: var(--red-600); }
button.danger:hover { background: var(--red-100); box-shadow: none; }
button.small, .btn.small { padding: 4.5px 11px; font-size: 12px; border-radius: 7px; background: var(--blue-50, #eef4fb); color: var(--blue-700); border-color: var(--blue-300, #93b4e4); }
button.small:hover, .btn.small:hover { background: var(--blue-100); }
button.small.danger { background: var(--red-50, #fef2f2); color: var(--red-600); border-color: var(--red-600); }
/* Disabled controls. NOT opacity: halving a button's alpha halves its
   CONTRAST, not just its intensity, so a 7:1 pair lands near 3:1 and a
   mid-action button ("Syncing…", "Clock in") becomes unreadable on a phone.
   Measured across every screen, the old opacity:.5 put every disabled button
   between 1.8:1 and 3.2:1. A disabled control still has to be readable — it
   is telling the user what it is about to do. So: one deliberate, fully
   opaque palette, 6.8:1, that outranks whatever the button was painted.
   !important is load-bearing here — the generic button rules carry nine
   :not() clauses and would otherwise win — and it is safe because :disabled
   and [disabled] can only ever narrow the set of elements this reaches. */
button:disabled, button[disabled], .btn:disabled, .btn[disabled] {
  cursor: not-allowed; box-shadow: none; opacity: 1;
  background: var(--disabled-bg) !important; background-image: none !important;
  color: var(--disabled-ink) !important; border: 1px solid var(--disabled-line) !important;
  text-shadow: none !important;
}
button:disabled svg, button[disabled] svg, .btn:disabled svg, .btn[disabled] svg { fill: var(--disabled-ink); }

input, select, textarea {
  font: inherit; font-size: 13.5px; padding: 8px 11px; border: 1px solid var(--border-strong);
  border-radius: 9px; background: #fff; color: var(--text); width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(0, 51, 160, .14);
}
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: .2px; }
.field { margin-bottom: 13px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; }
/* A grid child's default min-width is its content, which quietly outvotes the
   minmax() floor above and pushes the whole page sideways on a phone. The
   e-prescribing vendor form did exactly that. */
.form-row > * { min-width: 0; }
form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
form.inline .field { margin-bottom: 0; flex: 1; min-width: 130px; }

/* ── Login ── */
.login-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; width: 100%;
  padding: clamp(18px, 4vw, 52px);
  background:
    radial-gradient(900px 460px at 92% 4%, rgba(0, 180, 84, .15), transparent 62%),
    radial-gradient(800px 520px at 4% 100%, rgba(29, 78, 208, .25), transparent 60%),
    linear-gradient(145deg, #03102e, #071b45 58%, #062768);
}
.login-card {
  background: #fff; border-radius: 26px; padding: 0; width: min(980px, 100%);
  display: grid; grid-template-columns: minmax(300px, .88fr) minmax(390px, 1.12fr);
  overflow: hidden; box-shadow: 0 34px 90px rgba(2, 8, 30, .46);
  border: 1px solid rgba(255,255,255,.3);
}
.login-brand-panel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 590px; padding: 44px 42px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(150deg, #062768 0%, #0033a0 58%, #087f73 125%);
}
.login-brand-panel::after {
  content: ""; position: absolute; z-index: -1; width: 360px; height: 360px;
  right: -170px; bottom: -155px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.035), 0 0 0 96px rgba(255,255,255,.025);
}
.login-brand-mark {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  font: 800 13px/1 var(--display); letter-spacing: 1.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.login-eyebrow {
  margin-bottom: 14px; color: #a7f3d0; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.7px;
}
.login-brand-panel h1 { color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1.09; letter-spacing: -1.2px; max-width: 470px; }
.login-brand-panel p { color: #dbeafe; font-size: 15px; line-height: 1.7; max-width: 450px; margin: 18px 0 0; }
.login-assurances { display: flex; flex-direction: column; gap: 10px; color: #dbeafe; font-size: 12.5px; }
.login-assurances span { display: flex; align-items: center; gap: 9px; }
.login-assurances span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.13); }
.login-form-panel { padding: 66px clamp(36px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.login-card h1 { font-size: 23px; }
.login-card h1 em { font-style: normal; color: var(--green-700); }
.login-logo { display: block; width: min(100%, 310px); height: auto; margin: 0 0 14px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 30px; }
.login-form-panel input { min-height: 48px; border-color: #cbd7e8; }
.login-form-panel button:not(.secondary) { min-height: 48px; font-weight: 700; box-shadow: 0 8px 20px rgba(0,51,160,.18); }

.topbar .brand-lockup {
  /* The reservation on the right is the MENU button (94px) plus the bar's gap
     and padding. It was 90px, sized for a bare glyph; a narrow phone would
     have squeezed the two together. */
  height: 40px; width: auto; max-width: min(280px, calc(100vw - 140px));
  background: #fff; border-radius: 8px; padding: 3px 6px;
}

/* ── Misc ── */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--navy-800); color: #fff;
  padding: 12px 18px; border-radius: 11px; font-size: 13.5px;
  box-shadow: 0 8px 28px rgba(2, 8, 30, .35); z-index: 50; max-width: 440px;
  border-left: 4px solid var(--green-500);
}
.toast.error { background: var(--red-600); border-left-color: #fff; }
.muted { color: var(--muted); font-size: 12.5px; }
.right { text-align: right; }
.mt { margin-top: 14px; }
.mb0 { margin-bottom: 0; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.clock-big { font-family: var(--display); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy-800); }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 14px; }
.tabs button { background: none; border: none; color: var(--muted); font-weight: 600; padding: 8px 14px; border-radius: 8px 8px 0 0; }
.tabs button.active { color: var(--blue-700); box-shadow: inset 0 -2px 0 var(--blue-700); }
.empty { text-align: center; color: var(--muted); padding: 30px 0; font-size: 13.5px; }
.doc-view { background: #fff; border: 1px solid var(--border); padding: 26px; border-radius: var(--radius); max-width: 660px; box-shadow: var(--shadow); }
.doc-view .boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.doc-view .box { border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; }
.doc-view .box .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.doc-view .box .v { font-family: var(--display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100, #f1f5f9); border-radius: 6px; }
.table-wrap::-webkit-scrollbar { height: 14px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--blue-400, #60a5fa); border-radius: 7px;
  border: 2px solid var(--gray-200, #e2e8f0); background-clip: padding-box;
}
.table-wrap::-webkit-scrollbar-track { background: var(--gray-200, #e2e8f0); border-radius: 7px; }
.table-wrap { scrollbar-color: var(--blue-400, #60a5fa) var(--gray-200, #e2e8f0); scrollbar-width: auto; }

/* Floating scroll slider: sticky duplicate scrollbar at viewport bottom */
.scroll-slider {
  overflow-x: scroll; overflow-y: hidden;
  position: sticky; bottom: 0; z-index: 5;
  height: 18px; margin-top: -2px;
  background: var(--gray-100, #f1f5f9);
  border-radius: 0 0 10px 10px;
  border-top: 1px solid var(--gray-200, #e2e8f0);
}
.scroll-slider::-webkit-scrollbar { height: 14px; }
.scroll-slider::-webkit-scrollbar-thumb {
  background: var(--blue-500, #3b82f6); border-radius: 7px;
  border: 2px solid var(--gray-100, #f1f5f9); background-clip: padding-box;
  min-width: 40px;
}
.scroll-slider::-webkit-scrollbar-track { background: var(--gray-200, #e2e8f0); border-radius: 7px; }
.scroll-slider { scrollbar-color: var(--blue-500, #3b82f6) var(--gray-200, #e2e8f0); scrollbar-width: auto; }

/* ── Mobile: app-style shell (slide-in drawer + bottom tab bar) ────────── */
@media (max-width: 880px) {
  #app { flex-direction: column; }

  /* Slim sticky top bar: brand + menu */
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(90deg, var(--navy-800), var(--navy-900));
    padding: 9px 12px; padding-top: max(9px, env(safe-area-inset-top));
    box-shadow: 0 2px 12px rgba(2, 8, 30, .25);
  }
  .topbar .logo { font-family: var(--display); font-weight: 800; font-size: 17px; color: #fff; }
  .topbar .logo em { font-style: normal; color: var(--green-500); }
  /* Says MENU in words and draws its own bars. Nothing here leans on a font
     glyph or on a translucent fill reading as dark: the fill is opaque, the
     foreground is white, and background-image is cleared so no later
     button rule can paint over it. */
  .topbar .menu {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    background: rgba(255, 255, 255, .18); background-image: none;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff; cursor: pointer;
    font-family: var(--body); font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    line-height: 1; padding: 9px 13px; border-radius: 10px; min-height: 40px;
    box-shadow: none;
  }
  .topbar .menu:hover, .topbar .menu:active {
    background: rgba(255, 255, 255, .3); background-image: none;
    box-shadow: none; transform: none; color: #fff;
  }
  .topbar .menu svg { display: block; width: 18px; height: 13px; fill: currentColor; }

  /* The sidebar becomes a slide-in drawer (full nav, account, sign out) */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
    width: min(300px, 84vw); z-index: 60;
    transform: translateX(-105%); transition: transform .22s ease;
    flex-direction: column;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 12px 0 40px rgba(2, 8, 30, .45);
  }
  .drawer-open .sidebar { transform: translateX(0); }
  .sidebar nav { flex-direction: column; }
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 15, 46, .55); z-index: 55; }
  .drawer-open .drawer-backdrop { display: block; }

  /* App-style bottom tab bar: the role's core areas, one thumb away.
     It is pinned to the viewport, not to the page. Two things keep it there
     and both are load-bearing: it hangs off <body>, never inside #app (any
     ancestor that grows a transform, filter or containment would silently
     turn itself into the bar's containing block and the bar would ride the
     scroll), and it gets its own compositing layer below so iOS paints it
     once instead of re-settling it after every scroll frame. */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    transform: translateZ(0);
    background: var(--surface); border-top: 1px solid var(--border-strong);
    box-shadow: 0 -4px 16px rgba(6, 39, 104, .1);
    padding: 2px 4px calc(2px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0; background: none; border: none; color: var(--muted); cursor: pointer;
    font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: -.1px;
    padding: 3px 2px; border-radius: 9px; min-height: 44px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The unread count sits INSIDE the tab's box (the tab clips overflow for
     its label), top-right of the icon, never above the bar where it was
     being cut in half. */
  .tabbar a { position: relative; }
  .tabbar .tbadge {
    position: absolute; top: 4px; left: calc(50% + 6px);
    background: var(--red-600); color: #fff; border-radius: 999px;
    font-size: 9.5px; line-height: 1; padding: 3px 5px; min-width: 17px; text-align: center;
    font-weight: 700; box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
  }
  .tabbar .ticon { font-size: 18px; line-height: 1.1; }
  .tabbar a.active { color: var(--blue-700); background: var(--blue-100); }
  .tabbar a:hover { text-decoration: none; }
  .tabbar button:hover { background: none; box-shadow: none; }

  /* Content: single column, room for the tab bar, tighter chrome */
  .main { padding: 15px 13px calc(64px + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom: 14px; }
  h1 { font-size: 21px; }
  .card { padding: 15px 14px; }
  .grid { gap: 12px; }
  .grid.stats { gap: 10px; }
  td, th { padding: 9px 8px; }

  /* Touch comfort: 16px inputs stop iOS zoom-on-focus; bigger tap targets */
  input, select, textarea { font-size: 16px; padding: 10px 12px; }
  button, .btn { min-height: 42px; padding: 9px 16px; }
  button.small, .btn.small { min-height: 34px; padding: 6px 11px; font-size: 12.5px; }
  .tabs { overflow-x: auto; }
  .tabs button { min-height: 40px; white-space: nowrap; }

  .toast {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  #app.has-demo-ribbon { padding-top: 34px; }
  #app.has-demo-ribbon .sidebar { top: 34px; height: calc(100dvh - 34px); }
  .login-card { padding: 0; grid-template-columns: 1fr; width: min(520px, 100%); }
  .login-brand-panel { min-height: auto; padding: 25px 25px 23px; gap: 28px; }
  .login-brand-panel h1 { font-size: 27px; max-width: 410px; margin-bottom: 0; }
  .login-brand-panel p, .login-assurances { display: none; }
  .login-brand-mark { width: 46px; height: 46px; border-radius: 14px; font-size: 11px; }
  .login-eyebrow { margin-bottom: 8px; }
  .login-form-panel { padding: 34px 25px 38px; }
  .doc-view { padding: 18px 14px; }
  .doc-view .boxes { grid-template-columns: 1fr 1fr; }
  .clock-big { font-size: 26px; }
}

@media print {
  .sidebar, .page-head button, .page-head .btn, .no-print { display: none !important; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; }
  .card, .doc-view { box-shadow: none; }
}

/* Big, obvious action buttons — novice-friendly, brand colors, WCAG-AA
   white-on-brand contrast. Used on Upcoming Appointments row actions. */
.act {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: #fff !important;
  border: none; border-radius: 10px; padding: 10px 14px; min-height: 42px;
  cursor: pointer; box-shadow: var(--shadow); line-height: 1;
}
.act:hover { filter: brightness(1.15); text-decoration: none; }
.act.call { background: var(--blue-700); }
.act.text { background: var(--green-700); }
.act.mail { background: var(--teal-600); }
.act.pay  { background: var(--navy-800); }
.act.meet { background: var(--amber-600); }
.act.nosh { background: var(--red-600); }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) { .act { padding: 12px 16px; font-size: 15.5px; min-height: 46px; } }


/* ── Modals (Zoom scheduler and friends) ─────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 200; background: rgba(5, 15, 46, .6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-card {
  background: #fff; border-radius: 16px; padding: 24px 22px; width: 100%; max-width: 520px;
  position: relative; box-shadow: 0 20px 70px rgba(5, 15, 46, .45);
  max-height: 92vh; overflow-y: auto;
}
.modal-x {
  position: absolute; top: 8px; right: 12px; background: none; border: none;
  font-size: 26px; line-height: 1; color: #51607A; cursor: pointer; width: auto; padding: 4px 8px;
  box-shadow: none;
}
.modal-x:hover { color: #0E1E3E; background: none; }

/* ═══ Premium layer (Aug 2026) ══════════════════════════════════════════
   Depth, glass, and motion over the same content — nothing moves, nothing
   is hidden, everything simply looks and feels like it costs money.    */

/* Headlines carry more presence */
h1 { font-size: 26px; letter-spacing: -.5px; }
.page-head h1 {
  background: linear-gradient(115deg, var(--navy-800) 55%, var(--blue-600));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Cards: soft lift on hover, and each view rises gently into place */
.card { transition: box-shadow .18s ease, transform .18s ease; }
.card:hover { box-shadow: var(--shadow-lift); }
#content .card, #content .grid.stats, #content .page-head, #content .doc-view {
  animation: rise .32s cubic-bezier(.21, .8, .35, 1) both;
}
#content .card:nth-child(2) { animation-delay: .03s; }
#content .card:nth-child(3) { animation-delay: .06s; }
#content .card:nth-child(4) { animation-delay: .09s; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Stat tiles: jewel edge, glow on hover, luminous numerals */
.stat { position: relative; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.stat::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 120px at 100% 0%, rgba(0, 51, 160, .05), transparent 70%);
}
.stat:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.stat .value { letter-spacing: -.5px; }

/* Primary actions: gradient, press-in feel, ringed focus */
button, .btn { transition: background .14s ease, box-shadow .14s ease, transform .09s ease, filter .14s ease; }
/* The primary action: white text, so the dark gradient under it has to win.
   The "3D depth" rule further down paints a WHITE gradient over the same
   buttons, and the two are settled by specificity — which means this list may
   never be shorter than that one. :not(.amd-btn) is what keeps it longer, and
   it is also the truth: an .amd-btn wears the pale 3D chrome on purpose.
   Get this wrong and every primary button in the app turns white on white.

   .btn-hero is in both lists for the same reason and it cost a round to
   learn: it paints its own gradient, and with eleven :not() clauses against
   a two-class selector, THIS rule won. The pale secondary hero came out as
   --blue-700 text on a navy gradient — about 1.5:1, unreadable — and a
   check that only looked at the text colour called it a pass. Anything
   that brings its own chrome has to opt out of both chains, not one. */
button:not(.secondary):not(.danger):not(.small):not(.btn-call):not(.btn-text):not(.btn-email):not(.btn-review):not(.modal-x):not(.menu):not(.amd-btn):not(.btn-hero):not(.apc-fbtn):not(.apc-dnum),
.btn:not(.secondary):not(.small):not(.btn-call):not(.btn-text):not(.btn-email):not(.btn-review):not(.btn-hero) {
  background: linear-gradient(160deg, var(--blue-600), var(--blue-700) 60%, var(--navy-800));
  border-color: transparent;
}
button:active, .btn:active, .act:active { transform: translateY(1px) scale(.99); }
.tabs button:active, .modal-x:active { transform: none; }

/* Inputs: calm at rest, unmistakably alive when focused */
input, select, textarea { background: #FBFDFF; }
input:hover, select:hover, textarea:hover { border-color: var(--blue-600); }

/* Tables: scroll hints that appear only when there is more to see */
.table-wrap {
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 28px 100%,
    linear-gradient(270deg, var(--surface) 30%, transparent) right / 28px 100%,
    radial-gradient(14px 55% at 0 50%, rgba(6, 39, 104, .16), transparent) left / 14px 100%,
    radial-gradient(14px 55% at 100% 50%, rgba(6, 39, 104, .16), transparent) right / 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
tbody tr { transition: background .1s ease; }

/* Badges wear a status dot */
.badge::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px; opacity: .75;
}

/* Loading looks intentional: shimmer instead of a bare word */
#content > .empty {
  background: linear-gradient(100deg, transparent 30%, rgba(6, 39, 104, .045) 46%, rgba(6, 39, 104, .045) 54%, transparent 70%) 0 0 / 240% 100%;
  animation: shimmer 1.4s linear infinite; border-radius: 10px;
}
@keyframes shimmer { to { background-position: -140% 0; } }

/* Toasts arrive, they don't just appear */
.toast { animation: toast-in .3s cubic-bezier(.2, .9, .3, 1.2) both; backdrop-filter: var(--glass); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Modals breathe open over a frosted page */
.modal-back { backdrop-filter: blur(6px); animation: fade-in .18s ease both; }
.modal-card { animation: modal-in .26s cubic-bezier(.2, .9, .3, 1.15) both; border-radius: var(--radius-lg); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* The login is the first impression: living light behind the card */
.login-wrap { position: relative; overflow: hidden; }
.login-wrap::before, .login-wrap::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}
.login-wrap::before { width: 480px; height: 480px; left: -140px; top: -120px; background: rgba(0, 180, 84, .28); }
.login-wrap::after { width: 560px; height: 560px; right: -160px; bottom: -180px; background: rgba(29, 78, 208, .38); animation-delay: -7s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(46px, 26px) scale(1.12); } }
.login-card { position: relative; z-index: 1; border-radius: 20px; animation: modal-in .4s cubic-bezier(.2, .9, .3, 1.1) both; }

/* Sidebar: the active page glows, transitions are silk */
.sidebar nav a { transition: background .14s ease, color .14s ease; }
.sidebar nav a.nav-primary { transition: background .16s ease, box-shadow .16s ease; }

/* ── Mobile: glass chrome, app-store feel ── */
@media (max-width: 880px) {
  .topbar {
    background: rgba(6, 32, 88, .82);
    backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* No glass on the tab bar. A backdrop-filter on a fixed element makes
     WebKit re-composite it against the scrolling content underneath, and on
     iOS the bar visibly lags and slides with the page — the exact drift this
     rule used to cause. Opaque paint, and it stays put. */
  .tabbar { border-top: 1px solid rgba(6, 39, 104, .12); }
  .tabbar a { transition: color .15s ease, background .15s ease, transform .15s ease; position: relative; }
  .tabbar a.active {
    color: var(--blue-700);
    background: linear-gradient(180deg, rgba(0, 51, 160, .1), rgba(0, 51, 160, .05));
  }
  .tabbar a.active::after {
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 2.5px; border-radius: 3px;
    background: linear-gradient(90deg, var(--blue-600), var(--green-500));
  }
  .tabbar a.active .ticon { transform: translateY(-1px) scale(1.08); }
  .tabbar .ticon { transition: transform .18s cubic-bezier(.2, .9, .3, 1.4); }

  /* Stats become a swipeable card deck — the eye-catcher on a phone */
  .grid.stats {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 10px; margin: 0 -13px 16px; padding: 2px 13px 8px;
    scrollbar-width: none;
  }
  .grid.stats::-webkit-scrollbar { display: none; }
  .grid.stats .stat {
    min-width: min(46vw, 190px); scroll-snap-align: start; flex-shrink: 0;
  }
  .stat .value { font-size: 23px; }

  /* Drawer slides on glass with a deeper stage behind it */
  .sidebar { box-shadow: 24px 0 80px rgba(2, 8, 30, .6); }
  .drawer-backdrop { backdrop-filter: blur(3px); }
}

/* The tab bar's More button is a tab, never a primary action — it must
   not inherit the gradient no matter how button selectors evolve. */
.tabbar button, .tabbar button:hover, .tabbar button:active {
  background: none !important; border: none !important; color: var(--muted) !important;
  box-shadow: none !important; transform: none !important;
}

/* Motion is a courtesy, never a requirement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ============================================================================
   TeamCalendar — append to public/styles.css. Uses existing custom properties with
   fallbacks so it inherits the FMS palette.
   ============================================================================ */
.amd-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--pc-blue, #0b5fa5) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--pc-blue, #0b5fa5) 25%, #fff); }
.amd-banner.amd-overdue { background: #fdf1f1; border-color: var(--danger, #b02a2a); }
.amd-ok   { color: #1c7c54; font-weight: 600; }
.amd-due  { color: var(--danger, #b02a2a); font-weight: 600; }
.amd-muted { color: #4b5563; font-size: 0.85em; }
.amd-missing summary { cursor: pointer; color: var(--danger, #b02a2a); }

.amd-toolbar { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.amd-mlabel { min-width: 150px; text-align: center; }
.amd-spacer { flex: 1; }
.amd-btn { padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: var(--text); cursor: pointer; font: inherit; }
.amd-btn:hover { background: #f1f5f9; }
.amd-btn.amd-primary { background: var(--pc-blue, #0b5fa5); color: #fff; border-color: var(--pc-blue, #0b5fa5); }
.amd-x { border: none; background: none; color: var(--danger, #b02a2a); cursor: pointer; }

/* month view */
.amd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.amd-dowh { text-align: center; font-weight: 700; font-size: 0.8em; color: #475569; padding: 4px 0; }
.amd-cell { min-height: 92px; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 4px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.amd-cell-blank { border: none; background: none; }
.amd-wknd { background: #f8fafc; }
.amd-cell.amd-today { outline: 2px solid var(--pc-blue, #0b5fa5); }
.amd-dnum { font-size: 0.75em; font-weight: 700; color: #64748b; }
.amd-nobody { font-size: 0.75em; color: var(--muted); font-style: normal; margin: auto 0; }

/* chips */
.amd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72em;
  padding: 2px 6px; border-radius: 999px; background: #e8f2ec; border: 1px solid #bcd9c6;
  white-space: nowrap; overflow: hidden; max-width: 100%; }
.amd-chip-dr { background: #e8eef7; border-color: #b9cbe6; }
.amd-off { background: #fdf3e3; border-color: #ecd3a3; }
.amd-off-pending { background: repeating-linear-gradient(45deg, #fdf3e3, #fdf3e3 6px, #f7e8cc 6px, #f7e8cc 12px); }
.amd-badge { background: var(--pc-blue, #0b5fa5); color: #fff; border-radius: 4px;
  padding: 0 4px; font-size: 0.9em; }
.amd-avatar { border-radius: 50%; flex: none; object-fit: cover; }
.amd-legend { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }

/* Qgenda-style staff grid */
.amd-scroll { overflow-x: auto; }
.amd-qgrid { border-collapse: collapse; font-size: 0.78em; width: 100%; }
.amd-qgrid th, .amd-qgrid td { border: 1px solid #e2e8f0; padding: 3px 5px; text-align: center; min-width: 30px; }
.amd-qgrid th.amd-wknd, .amd-qgrid td.amd-wknd { background: #f8fafc; }
.amd-sticky { position: sticky; left: 0; background: #fff; text-align: left !important;
  white-space: nowrap; z-index: 1; }
.amd-q-on { background: #e8f2ec; font-weight: 600; }
.amd-q-dr { background: #e8eef7; }
.amd-q-off { background: #fdf3e3; }

/* panels & forms */
.amd-panel { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; background: #fff; }
.amd-panel summary { cursor: pointer; font-weight: 700; }
.amd-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.amd-days { display: flex; gap: 6px; flex-wrap: wrap; }
.amd-day { display: inline-flex; gap: 3px; align-items: center; font-size: 0.85em;
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 3px 7px; }
.amd-draft { border-collapse: collapse; width: 100%; font-size: 0.85em; }
.amd-draft th, .amd-draft td { border-bottom: 1px solid #e2e8f0; padding: 5px 8px; text-align: left; }

/* ============================================================================
   FMS UI REFRESH — append to the END of public/styles.css (append-only:
   later rules win, nothing above needs editing).
   One markup change required: add class "fms-nav" to the existing left nav
   CONTAINER element (the one holding the <a data-nav> links). Keep whatever
   active-link class the router already toggles — see the .fms-nav .active
   rule below and rename it if the app uses a different active class.
   ============================================================================ */

/* ---- 1. Vibrant base: brighter canvas, more saturated brand tokens -------- */
:root {
  --pc-blue: #1d6ef5;                 /* brighter brand blue */
  --danger: #e03131;
  --fms-ink: #0f172a;
  --fms-bg-grad: linear-gradient(160deg, #f7faff 0%, #eef3fb 45%, #eaf6f1 100%);
  --fms-card: #ffffff;
  --fms-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .07);
  --fms-shadow-2: 0 4px 10px rgba(15, 23, 42, .10), 0 14px 34px rgba(29, 110, 245, .14);
}
body { background: var(--fms-bg-grad); background-attachment: fixed; color: var(--fms-ink); }

/* ---- 2. 3D depth system ---------------------------------------------------- */
/* Cards & panels lift off the canvas; hover adds gentle elevation. */
.amd-panel, .amd-cell, table, details, form, fieldset {
  box-shadow: var(--fms-shadow-1);
}
.amd-panel, details { border-radius: 12px; background: var(--fms-card); }
.amd-panel:hover { box-shadow: var(--fms-shadow-2); transition: box-shadow .18s ease; }

/* The exclusion list here must match the one on the gradient rule above:
   these two style the same buttons and drifted apart once. .menu is the
   mobile top bar's control — white-on-navy — and a white gradient painted
   over it left a white glyph on a white box. .modal-x is a bare glyph on a
   dialog and wants no chrome at all. */
button:not(.secondary):not(.danger):not(.small):not(.btn-call):not(.btn-text):not(.btn-email):not(.btn-review):not(.modal-x):not(.menu):not(.btn-hero):not(.apc-fbtn):not(.apc-dnum),
.amd-btn {
  background-image: linear-gradient(180deg, #ffffff, #f1f5fb);
  border: 1px solid #c9d6ea;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 6px rgba(15, 23, 42, .08);
  transition: transform .12s ease, box-shadow .12s ease;
}
button.secondary, button.danger, button.small, button.btn-call, button.btn-text, button.btn-email, button.btn-review {
  background-image: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
button:hover, .amd-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, .14); }
button:active, .amd-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(15, 23, 42, .12) inset; }
.amd-btn.amd-primary, button.primary {
  background-image: linear-gradient(180deg, #3b82f6, var(--pc-blue)) !important;
  color: #fff !important; border-color: #1a5fd6;
  box-shadow: 0 2px 8px rgba(29, 110, 245, .35);
}

/* ---- 3. Prominent left nav: elevated, scrolls both axes, high contrast ---- */
.fms-nav {
  position: sticky; top: 0;
  max-height: 100vh;
  overflow-y: auto; overflow-x: auto;        /* up/down AND side to side */
  scrollbar-width: thin;
  min-width: 210px;
  padding: 14px 10px;
  background: linear-gradient(180deg, #10264d 0%, #143667 60%, #0f4c5c 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 4px 0 18px rgba(15, 23, 42, .25);
  border-radius: 0 14px 14px 0;
}
.fms-nav a[data-nav] {
  display: block;
  margin: 5px 0;
  padding: 10px 12px;
  border-radius: 9px;
  border-left: 4px solid var(--tab, #8ab4ff);
  background: color-mix(in srgb, var(--tab, #8ab4ff) 16%, transparent);
  color: #f4f8ff;                            /* high-contrast text on dark pane */
  font-weight: 600; letter-spacing: .2px;
  text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.fms-nav a[data-nav]:hover {
  transform: translateX(4px);
  background: color-mix(in srgb, var(--tab, #8ab4ff) 30%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
/* Active tab pops forward — RENAME .active if the router uses another class */
.fms-nav a[data-nav].active {
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  color: #10264d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transform: translateX(6px);
}
/* Each tab gets its own accent (rotates every 10; repeats after that) */
.fms-nav a[data-nav]:nth-of-type(10n+1)  { --tab: #66b2ff; }
.fms-nav a[data-nav]:nth-of-type(10n+2)  { --tab: #4dd4ac; }
.fms-nav a[data-nav]:nth-of-type(10n+3)  { --tab: #ffd166; }
.fms-nav a[data-nav]:nth-of-type(10n+4)  { --tab: #f4978e; }
.fms-nav a[data-nav]:nth-of-type(10n+5)  { --tab: #c9a7ff; }
.fms-nav a[data-nav]:nth-of-type(10n+6)  { --tab: #7fd8f7; }
.fms-nav a[data-nav]:nth-of-type(10n+7)  { --tab: #a3e07e; }
.fms-nav a[data-nav]:nth-of-type(10n+8)  { --tab: #ffb4c6; }
.fms-nav a[data-nav]:nth-of-type(10n+9)  { --tab: #ffc678; }
.fms-nav a[data-nav]:nth-of-type(10n+10) { --tab: #9fb8ff; }

/* ---- 4. Calendar: weekday headers, holiday annotation, extra pop ---------- */
.amd-dowh { font-size: .85em; letter-spacing: .5px; text-transform: uppercase;
  color: #33507a; }
.amd-dnum { font-size: .78em; font-weight: 700; color: #33507a; }
.amd-cell { border-radius: 10px; transition: box-shadow .15s ease; }
.amd-cell:hover { box-shadow: var(--fms-shadow-2); }
.amd-cell.amd-today { outline: 2px solid var(--pc-blue); outline-offset: 1px;
  background: linear-gradient(180deg, #f2f7ff, #ffffff); }
.amd-cell.amd-hol { background: linear-gradient(180deg, #fffaf0, #fff); }
.amd-holiday { font-size: .7em; font-weight: 700; color: #92600a;
  background: #fff3d6; border: 1px solid #f0d896; border-radius: 6px;
  padding: 1px 6px; align-self: flex-start; }
.amd-hol-chip { background: #fff3d6; border-color: #f0d896; }
.amd-qgrid th.amd-hol, .amd-qgrid td.amd-hol { background: #fffaf0; }
.amd-qgrid th { color: #33507a; }


/* ============================================================================
   UI refresh — corrections, appended below the overlay as the package directs.
   Nothing above is edited; these are narrower selectors that win on order.

   The overlay styled the <nav> as a standalone floating pane: its own
   gradient, its own rounded edge and shadow, its own scrollbars. Inside a
   sidebar that is ALREADY a sticky full-height scroller with its own navy
   gradient, that produced a mismatched panel squeezed to part of the column —
   the People group (and TeamCalendar with it) fell below a nested scrollbar — and
   `white-space: nowrap` truncated every subtitle mid-word rather than letting
   it wrap. The horizontal scrollbar it added was a way to reach text that
   should never have been cut off in the first place.

   So: the nav goes back to flowing inside the sidebar, and keeps the part of
   the overlay that is a genuine improvement — the per-tab colour accents,
   the hover slide, and the white active pill.
   ============================================================================ */
.sidebar .fms-nav {
  position: static;
  max-height: none;
  overflow: visible;          /* the sidebar is the scroller, not this */
  min-width: 0;
  padding: 0;
  background: none;           /* the sidebar's own navy shows through */
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Subtitles wrap to a second line instead of being cut off at the edge. */
.sidebar .fms-nav a[data-nav] { white-space: normal; }

/* On a phone, a seven-column month grid is not a calendar — it is three
   visible days and four you cannot reach. Each cell already names its own
   weekday ("Mon 7"), so narrow screens get the same days as one readable
   column instead. The staff grid keeps its own horizontal scroll, which is
   the right shape for a wide table. */
@media (max-width: 720px) {
  .amd-grid { grid-template-columns: 1fr; }
  .amd-dowh { display: none; }        /* the weekday is in the cell itself */
  .amd-cell-blank { display: none; }  /* leading blanks mean nothing in a list */
  .amd-cell { min-height: 0; }
  .amd-toolbar { flex-wrap: wrap; }
  .amd-toolbar .amd-mlabel { min-width: 140px; }   /* "September 2026" on one line */
  .amd-toolbar .amd-spacer { display: none; }      /* no room to push things apart */
}

/* TeamCalendar's workday form predates two fixes the rest of the app already
   carries, and a phone shows both of them at once.

   THE DAY CHIPS. The global `input, select, textarea { width: 100% }` near
   the top of this file reaches the checkbox inside every .amd-day label and
   stretches it to fill the chip, shoving "Mon" out past the chip's own
   border and under the chip beside it. Chromium hides this — inside a
   content-sized flex item it resolves the circular width back to the
   intrinsic 13px — so it is only ever seen on the phone it was reported
   from, where WebKit honours the 100%. .seal-check, .iv-attestations and
   .al-row each already pin their own checkbox against this exact rule.
   TeamCalendar never did. The chips also become a real grid, so seven days line
   up in even columns instead of wrapping ragged.

   THE ROWS. A date or time input has a wide intrinsic minimum in WebKit,
   and a flex item defaults to min-width:auto — so those controls refuse to
   shrink and ride over the button beside them instead of wrapping. That is
   the same floor `.form-row > *` has carried since the e-prescribing vendor
   form pushed the page sideways at 390px. A date or a month picker takes
   the full width; two time pickers share a line. */
.amd-day input[type="checkbox"] {
  width: 16px; height: 16px; flex: 0 0 16px;
  margin: 0; padding: 0; accent-color: var(--blue-700);
}
.amd-days {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px; width: 100%;
}
.amd-day { min-width: 0; gap: 6px; justify-content: flex-start; }
.amd-form { align-items: flex-end; }
.amd-form > * { min-width: 0; }
.amd-form > label { flex: 1 1 150px; margin-bottom: 0; }
.amd-form > .amd-btn { flex: 0 0 auto; }
/* Progressive: where :has() is unavailable the flex-basis above still lays
   the row out correctly, it just gives the date its own line less tidily. */
.amd-form > label:has(input[type="date"]), .amd-form > label:has(select) { flex: 1 1 100%; }

/* ── On a phone the shell scrolls its content, not its document ─────────
   The tab bar drifts up into the page during a scroll and drops back when
   it stops. That is not a containing-block bug, which is why moving it to
   <body> did not cure it: it is how WebKit scrolls. iOS runs the gesture on
   the compositor thread and reconciles document-`fixed` elements only once
   the scroll comes to rest, so a bar pinned to a scrolling document lags
   behind the frame it belongs to. Nothing declared on the bar fixes that —
   dropping its backdrop-filter only made the lag cheaper to paint.

   So the document stops scrolling. #app becomes exactly one screen tall and
   .main carries the overflow, which leaves the viewport's scroll offset
   permanently at 0. A fixed bar then has nothing to lag behind, because
   there is no document scroll to reconcile against. The top bar goes back
   to being an ordinary flex item for the same reason: it now sits outside
   the scroller, so it cannot slide under anything.

   background-attachment: fixed comes off here too. On iOS it forces a
   full-viewport repaint on every scroll frame — the other half of why this
   bar could never keep up. The gradient is decorative and looks identical
   when it scrolls with a body that no longer moves.

   app.js reads the scroll position through scrollBox() for the same reason:
   on a phone the element that moved is .main, not the document. */
@media (max-width: 880px) {
  html, body { height: 100%; overflow: hidden; }
  body { background-attachment: scroll; }
  #app { height: 100dvh; max-height: 100dvh; overflow: hidden; }
  .topbar { position: static; }
  .main {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  }
}

/* ---- TeamCalendar: clickable people and the per-person day-by-day panel -------- */
.amd-chip[data-amd="person"], .amd-person { cursor: pointer; }
.amd-chip[data-amd="person"]:hover { filter: brightness(.96); }
.amd-chip[data-amd="person"]:focus-visible, .amd-person:focus-visible {
  outline: 2px solid var(--pc-blue); outline-offset: 1px;
}
/* The policy name, in capitals, on every day it covers. */
.amd-offlabel { font-weight: 800; letter-spacing: .4px; color: #92600a; }
.amd-off i { font-style: normal; opacity: .75; }
.amd-holstar { color: #b8860b; }
.amd-qgrid tr.amd-q-sel td { background: #eef4ff; }
.amd-qgrid tr.amd-q-sel td.amd-sticky { background: #dfe9fb; }

.amd-person-panel { border-left: 4px solid var(--pc-blue); }
.amd-person-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.amd-person-head b { font-size: 1.1em; }
.amd-person-head .amd-muted { display: block; }
.amd-person-tot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 6px;
  padding: 10px 12px; border-radius: 8px; background: #f4f8ff; font-size: .9em; }
.amd-person-tbl td, .amd-person-tbl th { white-space: nowrap; }
.amd-person-tbl tbody tr:hover { background: #f8fbff; }
@media (max-width: 720px) {
  .amd-person-head { gap: 8px; }
  .amd-person-tot { gap: 6px 12px; }
}

/* ── Refresh: pull down on touch, button everywhere ──────────────────── */
/* `contain` hands the overscroll to us instead of the browser's own
   pull-to-refresh, which would hard-reload the whole app. It keeps the
   bounce (that's `none`), it just stops the reload and the scroll chaining. */
html, body { overscroll-behavior-y: contain; }

#ptr {
  position: fixed; top: 10px; left: 50%; z-index: 4000;
  transform: translate(-50%, 0); opacity: 0; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 18px rgba(6, 39, 104, .24);
  display: grid; place-items: center;
}
#ptr .ptr-ring {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(6, 39, 104, .2); border-top-color: var(--navy-800);
  transition: transform .18s ease;
}
#ptr.ready .ptr-ring { transform: rotate(180deg); }
#ptr.spinning .ptr-ring { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

.refresh-btn { white-space: nowrap; }
.refresh-btn .ricon { display: inline-block; font-size: 15px; line-height: 1; }
body.refreshing .refresh-btn { opacity: .55; pointer-events: none; }
body.refreshing .refresh-btn .ricon { animation: ptr-spin .7s linear infinite; }
/* On a phone the gesture is the primary way in, so the button shrinks to
   its icon rather than crowding the page title. */
@media (max-width: 640px) { .refresh-btn .rlabel { display: none; } }

@media (prefers-reduced-motion: reduce) {
  #ptr .ptr-ring, #ptr.spinning .ptr-ring,
  body.refreshing .refresh-btn .ricon { animation: none; transition: none; }
}

/* ── Med Tracker: card-per-patient layout ───────────────────────────────── */
.med-patient {
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px;
  transition: box-shadow .15s ease;
}
.med-patient:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.med-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.med-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.med-details {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 18px; font-size: 13.5px;
}
.med-details > div > span.muted:first-child {
  display: block; font-size: 11px; margin-bottom: 1px;
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.med-panel {
  background: var(--gray-50, #f8fafc); border-radius: 8px;
  padding: 12px 14px; margin-top: 10px;
}
.med-panel-text { background: #eef7f3; }
.med-panel-meet { background: #f0f4fc; }
.med-panel-edit { background: #f4f8fc; }
@media (max-width: 880px) {
  .med-details { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Demo instances announce themselves on every screen. */
.demo-ribbon {
  position: fixed; inset: 0 0 auto; z-index: 80; min-height: 31px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #8a3f07, #b45309 52%, #8a3f07);
  color: #fff; text-align: center; font-size: 12px; font-weight: 700;
  padding: 5px 12px; letter-spacing: .25px; box-shadow: 0 2px 10px rgba(65,31,4,.22);
}
#app.has-demo-ribbon .sidebar { top: 31px; height: calc(100dvh - 31px); }

/* ── Signature IV Therapies (evidence-based) ───────────────────────────── */
.iv-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding: 28px 30px; margin-bottom: 18px; border-radius: 18px; color: #fff;
  background: linear-gradient(125deg, #092b63 0%, #075e75 62%, #087f73 100%);
  box-shadow: 0 14px 36px rgba(6, 48, 93, .18);
}
.iv-hero h2 { color: #fff; font-size: clamp(22px, 3vw, 34px); line-height: 1.1; margin: 5px 0 9px; max-width: 680px; }
.iv-hero p { max-width: 760px; margin: 0; color: #e8f7f5; font-size: 15px; line-height: 1.55; }
.iv-eyebrow, .iv-section-label {
  display: block; color: #087f73; font-size: 11px; line-height: 1.2; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 5px;
}
.iv-hero .iv-eyebrow { color: #a8f2df; }
.iv-lock {
  width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 90px; text-align: center; font-size: 11px;
  line-height: 1.25; font-weight: 900; letter-spacing: 1px; background: rgba(255,255,255,.1);
}
.iv-steps {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; list-style: none;
  padding: 0; margin: 0 0 18px;
}
.iv-steps li {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px; color: #607089;
  border: 1px solid #d8e2ed; background: #f8fafc; border-radius: 10px; font-weight: 700; font-size: 11.5px;
}
.iv-steps li span {
  display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  background: #dce4ed; color: #34506f; font-variant-numeric: tabular-nums;
}
.iv-steps li.active { border-color: #087f73; background: #edf9f6; color: #075e63; }
.iv-steps li.active span, .iv-steps li.done span { background: #087f73; color: #fff; }
.iv-steps li.done { color: #087f73; }
.iv-steps li.skipped { color: #7a5b15; background: #fff8e7; border-color: #e6c36b; }
.iv-start-grid { align-items: start; }
.iv-safety-card { background: linear-gradient(180deg, #fbfefe, #f0faf8); border-color: #cde9e3; }
.iv-control-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 11px; }
.iv-control-list li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.iv-control-list li::before { content: "✓"; position: absolute; left: 0; color: #087f73; font-weight: 900; }
.iv-control-list span { color: #607089; font-size: 13px; line-height: 1.4; }
.iv-formula-preview, .iv-empty-lock {
  min-height: 85px; margin: 10px 0 15px; padding: 13px 14px; border: 1px solid #cbdbe8;
  border-radius: 10px; background: #f6f9fc; color: #52657c; font-size: 13px;
}
.iv-empty-lock { border-color: #e3c87a; background: #fff9e9; color: #6f5010; }
.iv-route-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.iv-route {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px;
  color: #075e63; background: #dff4ef; border: 1px solid #b6ded5; font-size: 11.5px; font-weight: 800;
}
.iv-route.im { color: #8a2b14; background: #fff0e5; border-color: #f2b48f; }
.iv-primary {
  background: linear-gradient(105deg, #087f73, #076b83) !important; color: #fff !important;
  border-color: transparent !important; box-shadow: 0 6px 16px rgba(7, 107, 131, .18);
}
.iv-approval-form { margin-top: 16px; padding: 18px; border: 2px solid #e4b24b; border-radius: 12px; background: #fffaf0; }
.iv-warning {
  display: flex; gap: 14px; padding: 13px 15px; border: 1px solid #e5b14c;
  border-radius: 11px; background: #fff8e7; color: #67460b; margin: 10px 0 15px; line-height: 1.45;
}
.iv-warning-strong { padding: 18px 20px; margin-bottom: 16px; border-width: 2px; }
.iv-warning h2 { color: #67460b; margin: 0 0 4px; font-size: 20px; }
.iv-warning p { margin: 0; }
.iv-warning-mark {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center;
  background: #c16f08; color: white; font-size: 22px; font-weight: 900;
}
.iv-patient-strip, .iv-signed-banner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px;
  margin-bottom: 17px; border-radius: 11px; background: #eef7fa; border: 1px solid #c9e1e7;
}
.iv-patient-strip div, .iv-signed-banner div { display: grid; gap: 3px; }
.iv-patient-strip span, .iv-signed-banner span { font-size: 10.5px; color: #63748b; font-weight: 800; text-transform: uppercase; letter-spacing: .65px; }
.iv-patient-strip small { color:#53677e; line-height:1.35; overflow-wrap:anywhere; }
.iv-attestations { display: grid; gap: 8px; margin: 4px 0 18px; }
.iv-attestations > label {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid #d8e1ea;
  border-radius: 9px; background: #fff; cursor: pointer; line-height: 1.4;
}
.iv-attestations input, .iv-row-checks input, .iv-include input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: #087f73; margin-top: 1px; }
.iv-one-statement > label { border-color: #087f73; background: #f2fbf9; font-size: 15px; }
.iv-one-statement input { width: 22px; height: 22px; flex: 0 0 22px; }
.signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signature-box { border: 1px solid #cbd7e3; border-radius: 12px; padding: 13px; background: #f9fbfd; }
.signature-box canvas {
  display: block; width: 100%; height: 150px; margin: 8px 0; border: 1px solid #9fb1c4;
  border-radius: 7px; background-color: #fff; touch-action: none; cursor: crosshair;
  background-image: linear-gradient(transparent 76%, #d6dfe8 77%, transparent 78%);
}
.signature-box > span { display: block; color: #65758a; font-size: 11.5px; margin-bottom: 8px; }
.iv-sign-actions { display: flex; justify-content: flex-end; gap: 9px; align-items: center; margin-top: 16px; }
.iv-signed-banner { margin-bottom: 16px; background: #e9f8f2; border-color: #b9e0d2; }
.iv-signed-banner b { color: #075e63; overflow-wrap: anywhere; }
.iv-draw-alert { padding: 12px 14px; margin: 12px 0 15px; border-radius: 9px; background: #ecf4ff; border-left: 4px solid #176ac1; color: #244668; }
.iv-access-chair {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; margin: 10px 0;
  border-radius: 9px; background: #edf9f6; border: 1px solid #b9e0d2; color: #174f49; font-weight: 700;
}
.iv-access-chair input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: #087f73; }
.iv-draw-list { display: grid; gap: 12px; }
.iv-draw-card {
  display: grid; grid-template-columns: 40px 1fr; gap: 0 13px; padding: 15px;
  border: 1px solid #d2dee9; border-radius: 12px; background: #fff;
}
.iv-draw-card > *:not(.iv-draw-number) { grid-column: 2; }
.iv-draw-number {
  grid-column: 1; grid-row: 1 / span 8; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; color: #fff; background: #0a6682; font-size: 15px; font-weight: 900;
}
.iv-draw-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.iv-draw-head h3 { margin: 0 0 2px; font-size: 18px; color: #153a64; }
.iv-draw-head > div > span { color: #6a788a; font-size: 12px; }
.iv-dose-main { display: flex; gap: 12px; align-items: baseline; margin: 10px 0 0; }
.iv-dose-main b { font-size: 22px; color: #075e63; }
.iv-dose-main span { color: #63748a; font-size: 12.5px; }
.iv-draw-fields {
  display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)); gap: 9px; align-items: end; margin-top: 12px;
}
.iv-volume-field > div { display: flex; align-items: center; gap: 6px; }
.iv-volume-field input { color: #075e63; font-size: 18px; font-weight: 900; background: #e9f8f2; border-color: #8fcbbd; }
.iv-volume-field b { color: #075e63; }
.iv-calc { margin: 8px 0; color: #53677e; font-size: 12px; }
.iv-row-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-row-checks label, .iv-include {
  display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 8px;
  background: #f3f7fa; color: #38536f; font-size: 12px; font-weight: 700;
}
.iv-im-warning { padding: 8px 10px; margin-top: 9px; border-radius: 8px; color: #8a2b14; background: #fff0e5; border: 1px solid #efb18c; }
.iv-draw-card.im-card { border: 2px solid #e39a6d; }
.iv-include { width: max-content; margin-top: 9px; background: #fff8e7; }
.iv-draw-card.excluded { opacity: .55; background: #f2f4f6; }
.iv-draw-card.iv-locked {
  opacity: .46; filter: grayscale(.35); pointer-events: none; max-height: 92px; overflow: hidden;
  background: #f1f4f7;
}
.iv-draw-card.iv-locked::after {
  content: "Complete the prior medication to unlock"; grid-column: 2; color: #53667a;
  font-size: 12px; font-weight: 800; margin-top: 8px;
}
.iv-draw-card.iv-step-added { border: 2px solid #58aa8f; background: #f3fbf8; }
.iv-draw-card.iv-step-omitted { border: 2px solid #d7a33e; background: #fffaf0; }
.iv-step-decision { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d9e2eb; }
.iv-step-prompt { display: grid; gap: 2px; margin-bottom: 9px; }
.iv-step-prompt span { color: #627489; font-size: 12px; }
.iv-step-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-omit-panel { margin-top: 10px; padding: 12px; border: 1px solid #e0b55b; border-radius: 9px; background: #fff8e7; }
.iv-step-saved { display: grid; gap: 2px; color: #075e63; }
.iv-step-saved span { color: #4f6873; font-size: 12px; }
.iv-soap { margin-top: 17px; padding: 17px; border: 1px solid #c9dceb; border-radius: 12px; background: #f5f9fd; }
.iv-soap h2 { margin-top: 0; }
.iv-soap-note pre, .iv-history-soap {
  white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.55;
  padding: 14px; border-radius: 9px; background: #f5f8fb; border: 1px solid #d8e2eb; color: #29445f;
}
.iv-history-soap { max-width: 680px; }
.iv-finalize {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px;
  margin-top: 15px; color: #fff; background: #092b63; border-radius: 12px;
}
.iv-finalize > div { display: grid; gap: 3px; max-width: 680px; }
.iv-finalize span { color: #d8e5f5; font-size: 12.5px; line-height: 1.4; }
.iv-finalize label { display:flex; align-items:flex-start; gap:8px; color:#fff; font-size:12px; margin-top:5px; }
.iv-finalize label input { width:18px; height:18px; flex:0 0 18px; accent-color:#2dd4bf; }
.iv-complete { text-align: center; padding: 35px 18px; margin-bottom: 18px; border-radius: 17px; background: linear-gradient(145deg, #e9f8f2, #edf6ff); border: 1px solid #b9ded3; }
.iv-complete-check { width: 58px; height: 58px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #087f73; color: #fff; font-size: 30px; font-weight: 900; }
.iv-complete > span { color: #087f73; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.iv-complete h2 { margin: 6px 0; font-size: 26px; }
.iv-complete-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.iv-evidence-library { border-top: 4px solid #0b7f88; }
.iv-evidence-library .table-wrap { margin-top: 14px; max-height: 540px; overflow: auto; }
.iv-evidence-library td { vertical-align: top; min-width: 150px; }
.iv-risk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.iv-risk { display:flex; flex-direction:column; gap:5px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.iv-risk span { color:var(--muted); font-size:13px; line-height:1.4; }
.iv-risk.blocked { border-top:4px solid #c73f58; }
.iv-risk.caution { border-top:4px solid #d99000; }
.iv-risk.acceptable { border-top:4px solid #16846b; }
.iv-checker { border-top:4px solid #1459a6; }
.iv-check-results { margin-top:14px; }
.iv-regimen-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.iv-check-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.iv-check-summary > div { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.iv-check-summary span { color:var(--muted); font-size:13px; }
.iv-interaction-detail { padding:15px; border-radius:12px; background:color-mix(in srgb, #1459a6 7%, var(--surface)); margin-bottom:16px; }
.iv-consent { margin:20px 0; padding:20px; border:2px solid color-mix(in srgb, #1459a6 35%, var(--border)); border-radius:16px; background:color-mix(in srgb, #1459a6 4%, var(--surface)); }
.iv-consent-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.iv-consent-head h2 { margin:4px 0 0; }
.iv-consent-specific { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:10px; background:var(--surface); border:1px solid var(--border); margin-bottom:12px; }
.iv-consent details { border-top:1px solid var(--border); padding:11px 2px 3px; }
.iv-consent summary { cursor:pointer; font-weight:800; color:var(--text); }
.iv-consent ul { margin:10px 0 8px; padding-left:22px; }
.iv-consent li { margin:0 0 7px; line-height:1.5; }
.iv-consent-risks { columns:2; column-gap:34px; }
.iv-quick-patient { margin:0 0 18px; padding:12px 14px; border:1px dashed color-mix(in srgb, #1459a6 45%, var(--border)); border-radius:12px; }
.iv-quick-patient summary { cursor:pointer; font-weight:800; color:#1459a6; }
.iv-clinical-snapshot { margin:14px 0 18px; padding:15px; border-radius:12px; background:color-mix(in srgb, #14a67a 7%, var(--surface)); border:1px solid color-mix(in srgb, #14a67a 30%, var(--border)); }
.iv-allergy-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2px 0 15px; }
.iv-allergy-card { display:grid; gap:6px; padding:11px; border:1px solid color-mix(in srgb, #d99000 38%, var(--border)); border-radius:10px; background:color-mix(in srgb, #d99000 5%, var(--surface)); }
.iv-allergy-card > .flex > label:first-child { font-weight:800; color:var(--text); }
.iv-allergy-card textarea { min-height:64px; resize:vertical; }
.iv-allergy-card > span { color:var(--muted); font-size:11.5px; }
.iv-none-known { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:900; color:#7a4b00; white-space:nowrap; cursor:pointer; }
.iv-none-known input { width:18px; height:18px; accent-color:#087f73; }
.iv-allergy-card textarea:disabled { background:#eef3f2; color:#5a6b67; }
.iv-weight-row { align-items:end; }
.iv-weight-row .field:first-child { flex:2; }
.iv-weight-row .field:nth-child(2) { max-width:110px; }
.iv-kg-output { display:flex; align-items:center; min-height:43px; padding:0 14px; margin-bottom:16px; border-radius:10px; background:#0c6b52; color:#fff; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:760px) {
  .iv-consent { padding:15px; }
  .iv-consent-head { flex-direction:column; }
  .iv-consent-risks { columns:1; }
  .iv-weight-row .field:nth-child(2) { max-width:none; }
  .iv-kg-output { margin-bottom:0; }
  .iv-allergy-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) { .iv-risk-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .iv-check-summary { grid-template-columns:1fr; } }
@media (max-width:560px) { .iv-risk-grid { grid-template-columns:1fr; } }

@media (max-width: 980px) {
  .iv-draw-fields { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .iv-hero { padding: 22px 20px; }
  .iv-lock { display: none; }
  .iv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .iv-steps li { padding: 9px 8px; font-size: 11px; gap: 5px; }
  .iv-steps li span { width: 22px; height: 22px; }
  .signature-grid, .iv-patient-strip, .iv-signed-banner { grid-template-columns: 1fr; }
  .iv-draw-card { grid-template-columns: 32px 1fr; padding: 12px 10px; gap: 0 9px; }
  .iv-draw-number { width: 29px; height: 29px; }
  .iv-draw-fields { grid-template-columns: 1fr 1fr; }
  .iv-finalize, .iv-sign-actions { flex-direction: column; align-items: stretch; }
  .iv-finalize button, .iv-sign-actions button, .iv-sign-actions .btn { width: 100%; }
}
@media (max-width: 430px) {
  .iv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-steps li { flex-direction: column; text-align: center; }
  .iv-draw-fields { grid-template-columns: 1fr; }
  .iv-draw-head { flex-direction: column; }
  .iv-row-checks { display: grid; }
  .iv-complete-actions { flex-direction: column; }
}

/* ── Consent Signer ─────────────────────────────────────────────────── */
.consent-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px 30px;margin-bottom:18px;border-radius:22px;color:#fff;background:linear-gradient(125deg,#0c3f91 0%,#1769e0 58%,#2aa6be 100%);box-shadow:0 18px 45px rgba(20,83,166,.2)}
.consent-hero h2{color:#fff;font-size:clamp(24px,3vw,36px);margin:3px 0 8px}.consent-hero p{max-width:760px;margin:0;color:#eaf4ff}.consent-hero .iv-section-label{color:#bde9ff}.consent-hero button{background:#fff!important;color:#0c4ea9!important;border-color:#fff!important;box-shadow:0 8px 20px rgba(5,31,76,.22)}
.consent-workspace{display:grid;gap:18px}.consent-record-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);gap:18px;align-items:start}
.consent-document{white-space:pre-wrap;max-height:62vh;overflow:auto;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface-subtle,#f8fbff);font-size:14.5px;line-height:1.65}
.consent-hash{display:block;max-width:100%;padding:10px 12px;border-radius:9px;background:#edf3f9;color:#42546c;word-break:break-all;font-size:12px}
.consent-acks{margin:15px 0}.consent-acks label{padding:10px 12px}.consent-required-card{max-width:850px;margin:18px auto;border-top:5px solid var(--blue-700);padding:clamp(22px,4vw,38px)}
#consent-actions .signature-box canvas{height:190px;touch-action:none}
@media(max-width:900px){.consent-record-grid{grid-template-columns:1fr}.consent-document{max-height:48vh}}
@media(max-width:600px){.consent-hero{grid-template-columns:1fr;padding:22px;border-radius:17px}.consent-hero button{width:100%}.consent-record-grid .card{padding:16px}.consent-document{padding:14px;font-size:14px}}

/* ── Smart EHR ────────────────────────────────────────────────────────── */
/* Contrast first: every text/background pair here clears WCAG AA (4.5:1) —
   tests/uibundle.test.js computes the ratios from these tokens. Text is
   large (16–17px body), surfaces are layered (soft shadow + 1px hairline)
   for depth, and nothing decorative ever sits behind words. */
.ehr { --ehr-muted: #3F4E6B; --ehr-red-text: #9F2A1F; --ehr-amber-text: #8A3E06; --ehr-green-text: #00612C; --ehr-blue-text: #0033A0;
       --ehr-ink: #0E1E3E; --ehr-line: #D3DEEE; --ehr-surface-2: #F7FAFE; font-size: 16.5px; color: var(--ehr-ink); }
.ehr h1 { font-size: 28px; } .ehr h2 { font-size: 19px; color: var(--navy-900); } .ehr h3 { font-size: 16px; color: var(--navy-900); margin: 14px 0 6px; }
.ehr .muted { color: var(--ehr-muted); }
.ehr .badge.yellow { color: var(--ehr-amber-text); } .ehr .badge.red { color: var(--ehr-red-text); } .ehr .badge.green { color: var(--ehr-green-text); } .ehr .badge.gray { color: var(--ehr-muted); }
.ehr .card { border: 1px solid var(--ehr-line); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--shadow); }
.ehr .card.lift { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--shadow-lift); }
.ehr table td, .ehr table th { font-size: 15px; } .ehr table th { color: var(--ehr-muted); }
.ehr .field label { font-size: 13.5px; color: var(--ehr-muted); font-weight: 600; }
.ehr textarea { font-size: 16px; line-height: 1.5; }
.ehr .btn.small, .ehr button.small { font-size: 13.5px; padding: 6px 12px; }

/* Patient banner: solid navy, white text, no gradient behind words. */
.ehr-banner { background: var(--navy-900); color: #fff; border: 0; box-shadow: var(--shadow-lift); padding: 22px 26px; border-radius: var(--radius-lg); }
.ehr-banner h1, .ehr-banner h2, .ehr-banner b { color: #fff; }
.ehr-banner .muted, .ehr-banner .sub { color: #D6E0F5; }
.ehr-banner .id { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.3px; line-height: 1.15; }
.ehr-banner .facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 15.5px; }
.ehr-banner .facts span { display: inline-flex; flex-direction: column; gap: 2px; }
.ehr-banner .facts small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: #B9C7E6; font-weight: 700; }
.ehr-banner .badge { background: #fff; color: var(--navy-900); } .ehr-banner .badge.red { background: #FFE2DD; color: var(--ehr-red-text); } .ehr-banner .badge.green { background: #DDF6E8; color: var(--ehr-green-text); } .ehr-banner .badge.yellow { background: #FCEED8; color: var(--ehr-amber-text); }

/* Stat tiles */
.ehr-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); margin: 14px 0; }
.ehr-tile { background: var(--surface); border: 1px solid var(--ehr-line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.ehr-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 16px 16px 0 0; background: var(--blue-700); opacity: .9; }
.ehr-tile.ok::before { background: var(--green-500); } .ehr-tile.warn::before { background: var(--amber-600); } .ehr-tile.crit::before { background: var(--red-600); } .ehr-tile.neutral::before { background: var(--ehr-line); }
.ehr-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.ehr-tile .label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--ehr-muted); font-weight: 700; }
.ehr-tile .value { font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--navy-900); line-height: 1.2; margin-top: 2px; }
.ehr-tile .value.text { font-size: 18px; }
.ehr-tile .sub { font-size: 13px; color: var(--ehr-muted); margin-top: 4px; }
.ehr-tile.warn, .ehr-tile.crit { border-color: var(--ehr-line); }

/* Tabs */
.ehr-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
/* Tabs and SmartBox folders are navigation, never primary actions. The
   theme's button rule (nine :not() clauses, a dark gradient) outranks any
   class selector, so — as .tabbar already does — these are pinned. */
.ehr-tabs button, .ehr-tabs button:hover, .ehr-folders button, .ehr-folders button:hover { background: var(--surface) !important; background-image: none !important; color: var(--navy-900) !important; border: 1.5px solid var(--border-strong) !important; box-shadow: var(--shadow) !important; transform: none !important; }
.ehr-tabs button { border-radius: 999px; padding: 10px 16px; font: 700 15px var(--body); cursor: pointer; }
.ehr-tabs button[aria-selected="true"], .ehr-tabs button[aria-selected="true"]:hover, .ehr-folders button[aria-selected="true"], .ehr-folders button[aria-selected="true"]:hover { background: var(--navy-900) !important; color: #fff !important; border-color: var(--navy-900) !important; }
.ehr-tabs button .n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--red-600); color: #fff; font-size: 12px; margin-left: 6px; text-align: center; }

/* Guidance & alerts */
.ehr-guide { border-left: 5px solid var(--blue-700); }
.ehr-guide li { margin: 7px 0; font-size: 15.5px; cursor: pointer; }
.ehr-guide .g-critical { color: var(--ehr-red-text); font-weight: 700; } .ehr-guide .g-warning { color: var(--ehr-amber-text); font-weight: 700; } .ehr-guide .g-info { color: var(--ehr-ink); }
.ehr .alert { border-radius: 12px; padding: 10px 14px; margin: 6px 0; font-size: 15px; }
.ehr .alert.critical { background: var(--red-100); color: var(--ehr-red-text); border: 1px solid #E9B8B0; }
.ehr .alert.warning { background: var(--amber-100); color: var(--ehr-amber-text); border: 1px solid #EBCFA8; }
.ehr .alert.info { background: var(--blue-100); color: var(--navy-900); border: 1px solid #C3D3EA; }
.ehr .chip { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--blue-100); color: var(--navy-900); font-size: 13.5px; font-weight: 600; margin: 2px 4px 2px 0; }
.ehr .chip.ok { background: var(--green-100); color: var(--ehr-green-text); } .ehr .chip.off { background: var(--amber-100); color: var(--ehr-amber-text); } .ehr .chip.bad { background: var(--red-100); color: var(--ehr-red-text); }

/* The chart: storyboard on the left, work on the right */
.ehr-chart { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .ehr-chart { grid-template-columns: 1fr; } }
.ehr-story { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.ehr-story .card { padding: 14px 16px; }
.ehr-story h3 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--ehr-muted); }
.ehr-story ul { margin: 0; padding-left: 0; list-style: none; } .ehr-story li { padding: 5px 0; border-bottom: 1px solid var(--ehr-line); font-size: 14.5px; } .ehr-story li:last-child { border-bottom: 0; }
.ehr-story .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ehr-story .quick button { padding: 9px 8px; font-size: 13.5px; }
.ehr-avatar { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--navy-900); font: 800 20px var(--display); display: grid; place-items: center; letter-spacing: -.5px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ehr-idcard { background: var(--navy-900); color: #fff; border: 0; border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-lift); }
.ehr-idcard .name { font: 800 20px/1.15 var(--display); margin-top: 8px; color: #fff; }
.ehr-idcard .line { color: #D6E0F5; font-size: 14px; margin-top: 3px; } .ehr-idcard .line b { color: #fff; }

/* Charts */
.ehr-spark { vertical-align: middle; }
.ehr-wchart { width: 100%; height: auto; display: block; }
.ehr-wchart text { font: 600 11px var(--body); fill: var(--ehr-muted); }
.ehr-wchart .axis { stroke: var(--ehr-line); } .ehr-wchart .goal { stroke: var(--green-500); stroke-dasharray: 4 4; } .ehr-wchart .line { stroke: var(--blue-700); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ehr-wchart .area { fill: url(#ehrWgrad); } .ehr-wchart .dot { fill: #fff; stroke: var(--blue-700); stroke-width: 2.5; }
.ehr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.ehr-kpi { background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); border-radius: 12px; padding: 10px 12px; }
.ehr-kpi .k { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ehr-muted); font-weight: 700; }
.ehr-kpi .v { font: 800 22px var(--display); color: var(--navy-900); } .ehr-kpi .d { font-size: 12.5px; color: var(--ehr-muted); }
.ehr-kpi.good .v { color: var(--ehr-green-text); } .ehr-kpi.bad .v { color: var(--ehr-red-text); } .ehr-kpi.warn .v { color: var(--ehr-amber-text); }

/* Health maintenance */
.ehr-hm td:first-child { font-weight: 700; }
.ehr-hm .why { font-size: 13px; color: var(--ehr-muted); }
.ehr-hm .s-overdue { background: var(--red-100); color: var(--ehr-red-text); } .ehr-hm .s-due { background: var(--amber-100); color: var(--ehr-amber-text); } .ehr-hm .s-due_soon { background: var(--blue-100); color: var(--ehr-blue-text); } .ehr-hm .s-current { background: var(--green-100); color: var(--ehr-green-text); }
.ehr .status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }

/* SmartBox */
.ehr-smartbox { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .ehr-smartbox { grid-template-columns: 1fr; } }
.ehr-folders button { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; border-radius: 12px; padding: 11px 14px; margin-bottom: 6px; font: 600 15px var(--body); cursor: pointer; }
.ehr-folders .n { min-width: 26px; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--blue-100); color: var(--navy-900); font-size: 13px; }
.ehr-folders button[aria-selected="true"] .n { background: #fff; color: var(--navy-900); }
.ehr-folders .n.hot { background: var(--red-600); color: #fff; }
/* Stacked layout: the panel is nested in the folder list, directly under the
   folder that opened it, so it reads as that folder unfolding rather than as a
   second list further down the page. Indented and hinged to its button. */
#ehr-folder-items.inline {
  margin: -2px 0 10px; padding: 10px 12px 2px;
  border-left: 3px solid var(--blue-700);
  border-radius: 0 12px 12px 0; background: var(--ehr-surface-2, #F4F8FC);
}
#ehr-folder-items.inline .empty { padding: 4px 2px 10px; color: var(--muted); font-size: 14px; }
#ehr-folder-items.inline table { font-size: 14px; }

/* Revenue cycle board */
.ehr-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ehr-kanban .col { background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); border-radius: 14px; padding: 12px; }
.ehr-kanban .col b { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ehr-muted); }
.ehr-kanban .col .amt { font: 800 20px var(--display); color: var(--navy-900); } .ehr-kanban .col .cnt { font-size: 13px; color: var(--ehr-muted); }
.ehr-bars .row { display: grid; grid-template-columns: 90px 1fr 100px; gap: 10px; align-items: center; margin: 6px 0; font-size: 14.5px; }
.ehr-bars .bar { height: 14px; border-radius: 7px; background: var(--blue-100); overflow: hidden; } .ehr-bars .bar i { display: block; height: 100%; background: var(--blue-700); border-radius: 7px; }
.ehr-bars .bar.late i { background: var(--red-600); }
.ehr-bars .num { text-align: right; font-weight: 700; }

/* Charge capture — the worklist and the evidence behind each suggestion.
   No button colours are declared here on purpose: the rows reuse .small and
   .secondary so nothing in this block can win a cascade fight with the
   generic button rules. */
.cap-row { border: 1px solid var(--ehr-line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: var(--ehr-surface-2); }
.cap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cap-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-money { font: 800 15px var(--display); color: var(--green-700); white-space: nowrap; }
.cap-top { margin: 8px 0 6px; font-size: 13.5px; line-height: 1.7; }
.cap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-detail { margin-top: 12px; border-top: 1px solid var(--ehr-line); padding-top: 12px; }
.cap-mdm h3, .cap-detail h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--ehr-muted); margin: 14px 0 6px; }
.cap-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cap-axis { background: var(--surface); border: 1px solid var(--ehr-line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cap-score { font: 800 15px var(--display); color: var(--navy-900); }
.cap-quote { margin: 6px 0 0; padding: 4px 0 4px 10px; border-left: 3px solid var(--blue-100); font-size: 12.5px; color: var(--ehr-ink); font-style: italic; overflow-wrap: anywhere; }
.cap-quote .muted { font-style: normal; }
.cap-gaps { display: grid; gap: 8px; }
.cap-gap { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; background: var(--surface); border: 1px solid var(--ehr-line); border-left-width: 4px; border-radius: 12px; padding: 10px 12px; cursor: pointer; min-width: 0; }
.cap-gap.critical { border-left-color: var(--red-600); } .cap-gap.high { border-left-color: var(--amber-600); }
.cap-gap.medium { border-left-color: var(--blue-700); } .cap-gap.low { border-left-color: var(--ehr-line); }
.cap-gap input[disabled] { cursor: not-allowed; }  /* not faded: an over-coded finding is the most important line on this screen */
.cap-capture { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; border: 1px solid var(--ehr-line); border-left-width: 5px; background: var(--surface); font-size: 14.5px; }
.nag b { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.nag span { flex: 1; min-width: 220px; }
.nag-ready { border-left-color: var(--blue-700); }
.nag-warn { border-left-color: var(--amber-600); background: var(--amber-100); }
.nag-critical, .nag-expired { border-left-color: var(--red-600); background: var(--red-100); }
.nag-expired b { color: var(--ehr-red-text); }
.cap-fixes { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.cap-fixes li { margin: 3px 0; }
.live-code { border: 1px solid var(--ehr-line); border-left: 5px solid var(--blue-700); border-radius: 14px; padding: 12px 16px; margin-top: 14px; background: var(--ehr-surface-2); }
.live-code h4 { margin: 12px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ehr-muted); }
.live-head { font-size: 15px; }
.live-head b { font: 800 18px var(--display); color: var(--navy-900); }
.live-rule { font-size: 12.5px; font-style: italic; border-top: 1px solid var(--ehr-line); padding-top: 8px; margin-top: 10px; }
.coder-query { background: var(--surface); border: 1px solid var(--ehr-line); border-left: 4px solid var(--amber-600); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.coder-query ul { margin: 6px 0; padding-left: 18px; font-size: 13px; color: var(--ehr-muted); }
@media (max-width: 640px) { .cap-head { flex-direction: column; } .cap-axes { grid-template-columns: 1fr; } }

/* Documents & misc */
.ehr .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ehr .doc { background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); border-radius: 14px; padding: 14px; }
.ehr .doc h3 { margin: 0 0 4px; } .ehr .doc p { margin: 0 0 10px; font-size: 14px; color: var(--ehr-muted); }
.ehr-search { display: flex; gap: 10px; align-items: center; }
.ehr-search input { flex: 1; font-size: 18px; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--border-strong); color: var(--ehr-ink); }
.ehr .soap { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .ehr .soap { grid-template-columns: 1fr; } }
.ehr .soap textarea { min-height: 130px; }
.ehr .mic { background: var(--red-600); color: #fff; border: 0; border-radius: 999px; padding: 12px 20px; font: 700 15px var(--body); cursor: pointer; box-shadow: 0 8px 20px rgba(192,57,43,.3); }
.ehr .mic.on { animation: ehrpulse 1.2s ease-in-out infinite; }
@keyframes ehrpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 50% { box-shadow: 0 0 0 14px rgba(192,57,43,0); } }
.ehr .note-body { white-space: pre-wrap; background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); border-radius: 12px; padding: 12px 14px; font-size: 15.5px; color: var(--ehr-ink); }
.ehr .signed { border-left: 5px solid var(--green-500); } .ehr .draft { border-left: 5px solid var(--amber-600); }
.ehr pre.edi { white-space: pre-wrap; word-break: break-all; font-size: 12.5px; background: #0E1E3E; color: #DDF6E8; padding: 12px; border-radius: 12px; max-height: 320px; overflow: auto; }
.ehr .kpi { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--navy-900); }
.ehr details summary { cursor: pointer; font-weight: 700; color: var(--navy-900); }
.ehr .howto { font-size: 14.5px; } .ehr .howto li { margin: 5px 0; }

/* ── Smart Med Admin ─────────────────────────────────────────────────── */
.ma-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ma-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--navy-900); font-weight: 800; font-size: 14px; text-decoration: none; }
.ma-tab.on { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.ma-tab:hover { text-decoration: none; box-shadow: var(--shadow); }
.ma-intro { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ehr-ink, #1b2a41); max-width: 900px; }
.ma-grid { align-items: start; }
.ma-result { border-top: 5px solid #0c6b52; }
.ma-big { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #0c6b52; margin: 6px 0 4px; }
.ma-big span { font-size: 56px; }
.ma-big.bad { color: #9b1c1c; }
.ma-lead { font-size: 16px; line-height: 1.5; margin: 0 0 10px; }
.ma-syringe { width: 100%; max-width: 420px; height: auto; display: block; margin: 6px 0 10px; }
.ma-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.ma-facts div { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #0c6b52 7%, var(--surface)); }
.ma-facts span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.ma-facts b { font-size: 16px; }
.ma-ladder { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.ma-ladder .chip.on { background: #0c6b52; color: #fff; border-color: #0c6b52; }
.ma-ladder .chip.cur { outline: 2px dashed #b45309; outline-offset: 1px; }
.ma-warnings { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.ma-w { padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; border: 1px solid transparent; }
.ma-w.stop { background: #fdeaea; color: #7a1414; border-color: #f3b4b4; font-weight: 700; }
.ma-w.warn { background: #fff4e0; color: #7a4b00; border-color: #f7d7a0; }
.ma-w.info { background: #edf4ff; color: #1e3a8a; border-color: #c7d9fb; }
.ma-steps li { margin: 6px 0; line-height: 1.5; }
.ma-posted { list-style: none; padding: 0; margin: 8px 0; }
.ma-posted li { padding: 4px 0; }
.ma-labelcheck { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff4e0; border: 1px solid #f7d7a0; }
.ma-conc { font-size: 15px; color: #7a4b00; }

/* Missing data is a button: click where you see it, type, Enter. */
.fill { background: var(--amber-100); color: var(--amber-600); border: 1px dashed var(--amber-600); border-radius: 999px; padding: 2px 10px; font: 700 12px var(--body); cursor: pointer; line-height: 1.5; box-shadow: none; }
.fill:hover { background: #fff; }
.ehr .fill { color: var(--ehr-amber-text); }
.ehr-banner .fill, .ehr-idcard .fill { background: #fff; border-color: #fff; color: var(--navy-900); }
.fill-edit input, .fill-edit select { padding: 4px 8px; font-size: 13px; border-radius: 8px; min-width: 150px; }
.ehr-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ehr-roster-head h2 { margin: 0; }
/* A severity class always carries its definition: "Stage 2 hypertension [≥140 or ≥90]". */
.sev { display: inline-flex; gap: 4px; align-items: baseline; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; background: var(--surface-2, #f1f4f9); color: var(--navy-900); border: 1px solid var(--ehr-line, #d9e1ee); white-space: nowrap; }
.sev small { font-weight: 600; opacity: .8; font-size: 11px; }
.sev.good { background: #DDF6E8; color: var(--ehr-green-text); border-color: transparent; }
.sev.warn { background: var(--amber-100); color: var(--ehr-amber-text); border-color: transparent; }
.sev.bad { background: #FFE2DD; color: var(--ehr-red-text); border-color: transparent; }
.ehr-kpi .d small { font-weight: 600; opacity: .85; }
.patients-recent td:first-child::before { content: '⏱ '; opacity: .6; }

/* Break the Seal — a company team member's record */
.seal-screen { border: 3px solid var(--red-600, #c0262d); background: #fff5f4; }
.seal-screen h2 { color: #9F2A1F; font-size: 24px; letter-spacing: .3px; }
.seal-warn { color: #9F2A1F; font-size: 16px; line-height: 1.5; margin: 8px 0; }
.seal-warn b { font-weight: 800; text-transform: uppercase; }
.seal-ack { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; color: #9F2A1F; line-height: 1.5; font-size: 14.5px; }
.seal-ack input { margin-top: 4px; width: 18px; height: 18px; }
.seal-check { display: flex; gap: 8px; align-items: center; font-weight: 700; color: #9F2A1F; padding: 8px 0; line-height: 1.35; cursor: pointer; }
/* The global input rule is width:100%; a checkbox must stay the size of a checkbox, right beside its words. */
.seal-check input[type="checkbox"], .seal-ack input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: #9F2A1F; }
.seal-badge { display: block; background: #9F2A1F; color: #fff; font-weight: 800; padding: 8px 10px; border-radius: 10px; margin-top: 10px; font-size: 13px; letter-spacing: .2px; }
.seal-badge small { display: block; font-weight: 600; opacity: .92; margin-top: 2px; }
.badge.seal { background: #9F2A1F; color: #fff; }
/* Record a Payment — the active patient pinned above the work */
.rp-active { position: sticky; top: 8px; z-index: 5; border-left: 6px solid var(--green-500, #1f8f4e); }
.rp-active-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 800; color: var(--green-500, #1f8f4e); }
/* SmartRecord release state on notes and results */
.portal-state { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #DDF6E8; color: #00612C; }
.portal-state.held { background: var(--amber-100); color: #8A3E06; }

/* The → that hands an item to the patient. Deliberately a shape, not a word:
   it repeats beside results, notes and documents, and a text label at that
   density turns every row into a paragraph. The tooltip and aria-label carry
   the meaning for anyone who needs it. */
.send-arrow { font-size: 15px; font-weight: 800; line-height: 1; padding: 3px 9px; min-width: 30px; }
.send-arrow:hover, .send-arrow:focus-visible { background: var(--brand, #0033A0); color: #fff; border-color: var(--brand, #0033A0); }

/* Platform: downtime banner and time-zone badges */
.platform-banner { margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #FFF4D6; color: #6b3f00; border: 1px solid #f0c060; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.platform-banner.live { background: #FFE2DD; color: #9F2A1F; border-color: #e9a29a; }
.badge.zone { background: #E8EEF9; color: #0033A0; }
.pf-zone-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }

/* ── Message alerts (public/alerts.js) ─────────────────────────────────── */
.al-banner { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--blue-50, #eef4fb); border: 1px solid var(--blue-300, #93b4e4); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; }
.al-banner .al-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; font-size: 13.5px; }
.al-banner .al-text b { font-size: 15px; }
.al-banner .al-ios { color: var(--muted); font-size: 12.5px; }
.al-banner .al-actions { display: flex; gap: 8px; flex-shrink: 0; }
.al-tones { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.al-tone { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.al-tone.on { border-color: var(--blue-300, #93b4e4); background: var(--blue-50, #eef4fb); }
.al-tone-main { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.al-tag { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-700); }
.al-tag.urgent { color: var(--red-600); }
.al-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 10px 0; font-size: 14px; }
.al-row label { display: inline-flex; gap: 6px; align-items: center; }
.al-save-row { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pk-list td { vertical-align: middle; }
/* The app styles form controls at full width; inside an alert row they sit inline. */
.al-tone input[type=radio], .al-row input[type=checkbox] { width: auto; flex: none; margin: 0; }
.al-tone-main { flex: 1 1 auto; min-width: 0; }
.al-tone .al-prev { flex: none; }
.al-row select { width: auto; }
.al-row input[type=range] { width: 160px; }

/* ── Smart Scribe: a conversation on the left, the note on the right ───── */
.scribe .sc-wrap { display: grid; grid-template-columns: 270px minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.scribe .sc-context, .scribe .sc-chat, .scribe .sc-note, .scribe .sc-right { min-width: 0; }
.scribe .sc-right { display: flex; flex-direction: column; gap: 14px; }
.scribe .sc-lens-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.scribe .sc-lens h4 { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.scribe .sc-lens-list { margin: 0; padding-left: 18px; }
.scribe .sc-lens-list li { margin: 4px 0; }
.scribe .sc-lens-list li.sev-error { color: var(--danger, #b42318); }
.scribe .sc-lens-q li.done { opacity: .55; text-decoration: line-through; }
.scribe .sc-lens-q label { display: inline-flex; gap: 8px; align-items: flex-start; }
.scribe .sc-lens-q input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.scribe .sc-lens-next { background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.scribe .sc-lens-next ul { margin: 4px 0 0; padding-left: 18px; }
.scribe .sc-quote { font-size: 12.5px; font-style: italic; margin-top: 2px; }
.scribe .sc-chat { display: flex; flex-direction: column; min-height: 60vh; }
.scribe .sc-head { border-bottom: 1px solid var(--ehr-line); padding-bottom: 10px; margin-bottom: 8px; }
.scribe .sc-head-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scribe .sc-head-row input.small { flex: 1; min-width: 160px; }
.scribe .sc-stream { flex: 1; overflow-y: auto; max-height: 62vh; padding: 4px 2px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.scribe .sc-empty { padding: 28px 12px; text-align: center; }
.scribe .sc-msg { max-width: 92%; border-radius: 14px; padding: 8px 12px; background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); }
.scribe .sc-msg.mic.spk-1, .scribe .sc-msg.mic.spk-0 { align-self: flex-start; }
.scribe .sc-msg.mic.spk-2 { align-self: flex-end; background: #EEF4FF; }
.scribe .sc-msg.mic.spk-3 { align-self: flex-end; background: #F3EEFF; }
.scribe .sc-msg.preview { opacity: .78; border-style: dashed; }
.scribe .sc-msg.paste, .scribe .sc-msg.typed { align-self: flex-end; background: #FFFBEB; border-color: #F1DFA3; }
.scribe .sc-msg.document { align-self: stretch; max-width: 100%; background: #F5FBF7; border-color: #BFE3CC; }
.scribe .sc-msg.system { align-self: center; font-size: 13px; color: var(--ehr-muted); background: transparent; border: 0; }
.scribe .sc-msg-who { font-size: 12.5px; font-weight: 700; color: var(--ehr-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.scribe .sc-msg-text { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.45; margin-top: 2px; }
/* Taking an entry out of a visit is deliberate, so the control is quiet
   until the row is hovered and never competes with the words themselves. */
.scribe .sc-msg .sc-remove { border: 0; background: none; color: var(--ehr-line); font-size: 15px; line-height: 1; padding: 0 4px; margin-left: auto; cursor: pointer; opacity: 0; transition: opacity .12s; }
.scribe .sc-msg:hover .sc-remove, .scribe .sc-msg .sc-remove:focus-visible { opacity: 1; }
.scribe .sc-msg .sc-remove:hover { color: var(--danger, #b3261e); }
.scribe .sc-msg-who { display: flex; align-items: center; gap: 6px; }
.scribe .sc-removed { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--ehr-line); border-radius: 8px; }
.scribe .sc-removed ul { margin: 6px 0 0; padding-left: 18px; }
.scribe .sc-removed li { margin-bottom: 6px; }
.scribe .sc-speaker { border: 1px dashed var(--ehr-line); background: #fff; border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ehr-blue-text); cursor: pointer; }
.scribe .sc-composer { border-top: 1px solid var(--ehr-line); padding-top: 10px; margin-top: 8px; }
.scribe .sc-composer textarea { width: 100%; resize: vertical; min-height: 56px; }
.scribe .sc-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.scribe .sc-tools .mic { min-height: 44px; }
.scribe .sc-tools .mic.on { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.scribe .sc-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--red-600); }
.scribe .sc-live { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 120px; }
.scribe .sc-attach input { display: none; }
.scribe .sc-who-strip { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.scribe .sc-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-700); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.scribe .sc-ctx-block { border-top: 1px solid var(--ehr-line); padding: 8px 0; }
.scribe .sc-ctx-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--ehr-muted); margin-bottom: 4px; cursor: default; }
.scribe details.sc-ctx-block summary { cursor: pointer; }
.scribe .sc-list { margin: 0; padding-left: 16px; font-size: 13.5px; }
.scribe .sc-prior { font-size: 13px; border-left: 3px solid var(--ehr-line); padding-left: 8px; margin: 6px 0; }
.scribe .sc-fine { font-size: 12.5px; }
.scribe .sc-note-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.scribe .sc-note textarea { width: 100%; resize: vertical; }
.scribe .sc-flags ul { margin: 4px 0 0; padding-left: 18px; }
.scribe .ros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.scribe .ros-chip { border: 1px solid var(--ehr-line); border-radius: 10px; padding: 6px 8px; cursor: pointer; background: #fff; user-select: none; }
.scribe .ros-chip .ros-name { font-weight: 700; font-size: 13px; }
.scribe .ros-chip .ros-state { font-size: 12px; color: var(--ehr-muted); }
.scribe .ros-chip.positive { border-color: #D98C6A; background: #FFF4EE; }
.scribe .ros-chip.positive .ros-state { color: var(--ehr-red-text); font-weight: 700; }
.scribe .ros-chip.negative { border-color: #9ACFB3; background: #F1FBF5; }
.scribe .ros-chip.negative .ros-state { color: var(--ehr-green-text); font-weight: 700; }
.scribe .ros-chip.not_addressed { border-style: dashed; }
.scribe .ros-detail { width: 100%; margin-top: 4px; font-size: 12.5px; padding: 3px 6px; }
.scribe .ros-quote { font-size: 11.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scribe .sc-check { list-style: none; margin: 0; padding: 0; }
.scribe .sc-check li { padding: 3px 0; }
.scribe .sc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 1100px) { .scribe .sc-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .scribe .sc-context { grid-column: 1 / -1; } }
@media (max-width: 880px) { .scribe .sc-right { order: 2; } }
@media (max-width: 880px) { .scribe .sc-wrap { grid-template-columns: minmax(0, 1fr); } .scribe .sc-chat { min-height: 50vh; } .scribe .sc-stream { max-height: 48vh; } .scribe .sc-context { order: 3; } .scribe .sc-msg { max-width: 100%; } }

/* ── Smart Billing's subsections: nested in the sidebar, a strip on the page ── */
.sidebar nav .nav-sub { margin: -1px 0 8px 22px; padding-left: 10px; border-left: 2px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 1px; }
.sidebar nav .nav-sub a { font-size: 13px; padding: 6px 10px; margin: 0; border-radius: 8px; color: #C9D6EE; display: block; }
.sidebar nav .nav-sub a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav .nav-sub a.active { background: #A96608; color: #fff; font-weight: 700; }
.ehr-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; padding: 6px; background: var(--ehr-surface-2); border: 1px solid var(--ehr-line); border-radius: 12px; }
.ehr-subnav a { padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--ehr-ink); text-decoration: none; white-space: nowrap; }
.ehr-subnav a:hover { background: #fff; }
.ehr-subnav a.active { background: #A96608; color: #fff; }
@media (max-width: 720px) { .ehr-subnav { overflow-x: auto; flex-wrap: nowrap; } }

/* Touch: every control a thumb lands on clears 44px; secondary inputs 36. */
.scribe .sc-tools button, .scribe .sc-tools .btn, .scribe .sc-actions button, .scribe .sc-note-head button, .scribe .sc-head button { min-height: 44px; }
.scribe .ros-detail { min-height: 36px; }
.scribe .sc-head-row select.small, .scribe .sc-head-row input.small { min-height: 40px; }
.ehr-subnav a { min-height: 42px; display: inline-flex; align-items: center; }

/* A checkbox inside a scribe list is a checkbox, not a full-width field. */
.scribe .sc-check input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--blue-700); }

/* Login: the passkey door beside the password form */
.login-alt { margin-top: 12px; }
.login-or { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--line, #e5e7eb); }

/* Smart Scribe — continuous capture: live suggestions, upload lane, pause, coding lens folded */
.scribe .sc-live-ai .sc-live-sec { border-top: 1px solid var(--line, #e5e7eb); padding: 8px 0; }
.scribe .sc-live-ai .sc-live-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scribe .sc-live-ai .sc-live-sec-head h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); flex: 1; }
.scribe .sc-live-text { margin: 6px 0 0; padding: 8px 10px; background: var(--blue-50, #eff6ff); border-left: 3px solid var(--blue-500, #2563eb); border-radius: 4px; white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.scribe .sc-live-text.same { background: transparent; border-left-color: var(--line, #e5e7eb); color: var(--muted); }
.scribe .sc-queue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); min-height: 18px; }
.scribe .sc-queue.has-failed { color: var(--red-600); }
.scribe .sc-bad { color: var(--red-600); }
.scribe .sc-conflict { margin: 8px 0; }
.scribe .sc-conflict button { margin-top: 6px; }
.scribe .sc-timer.paused { color: var(--amber-600); }
.scribe .sc-timer.idle { color: var(--muted); }
.scribe #sc-pause.on { background: var(--amber-100); border-color: var(--amber-600); color: var(--amber-600); }
.scribe .sc-level { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--line, #e5e7eb); overflow: hidden; vertical-align: middle; }
.scribe .sc-level > i { display: block; height: 100%; width: 0; background: var(--green-500, #16a34a); transition: width .15s linear; }
.scribe details.sc-lens > summary { cursor: pointer; font-weight: 600; list-style: none; }
.scribe details.sc-lens > summary::-webkit-details-marker { display: none; }
.scribe details.sc-lens > summary::before { content: '▸ '; color: var(--muted); }
.scribe details.sc-lens[open] > summary::before { content: '▾ '; }
.scribe details.sc-lens > #sc-lens-body { margin-top: 8px; }

/* ---- Upcoming Appointments: Daily / Weekly / Monthly, by site, with the day's staff ---- */
/* Contrast is measured, not eyeballed: every --pc-edge reads at >= 4.5:1
   under white text (the pills, the initials) and >= 3:1 against its own
   --pc-fill (the chip border and the count dots); every grey used for
   small text is #475569 (7.6:1 on white, > 6:1 on the palest fill). Blue
   text on blue and pale grey on pale fills were the failures this replaced.
   tests/uibundle.test.js pins these ratios. */
/* Site colours. Virtual, Laurel and Columbia are fixed; .apc-site-x0..x3
   are handed to any further site a tenant adds, in order, so a chip is never
   uncoloured. Each pair is a pale fill and a saturated edge, so the colour
   reads at chip size and the text stays dark. */
.apc-site-virtual  { --pc-fill: #f1e9fb; --pc-edge: #6d2f8f; }
.apc-site-laurel   { --pc-fill: #e6f4ea; --pc-edge: #1c7c54; }
.apc-site-columbia { --pc-fill: #e7eff9; --pc-edge: #0b5fa5; }
.apc-site-unknown  { --pc-fill: #f1f3f5; --pc-edge: #5b6473; }
.apc-site-x0 { --pc-fill: #fdf1e3; --pc-edge: #8a4f00; }
.apc-site-x1 { --pc-fill: #e3f5f6; --pc-edge: #00747a; }
.apc-site-x2 { --pc-fill: #fbe9f1; --pc-edge: #a03a72; }
.apc-site-x3 { --pc-fill: #eef2e3; --pc-edge: #4a5d23; }

.apc-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.apc-toolbar-card { padding: 10px 14px; }
.apc-sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 4px; }
.apc-daycard .apc-person { font-size: .85em; }
button.apc-dnum { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: #475569; box-shadow: none; min-height: 0; line-height: 1.2; }
.apc-whead button.apc-dnum { color: var(--text, #0E1E3E); font-size: 1em; }
button.apc-dnum:hover { text-decoration: underline; }
.apc-visit, .apc-row { text-decoration: none; }
.apc-label { min-width: 150px; text-align: center; }
.apc-muted { color: #475569; font-size: .85em; }
.apc-legend { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; align-items: center; }

/* month grid */
.apc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.apc-dowh { text-align: center; font-weight: 700; font-size: .8em; color: #475569; padding: 4px 0; }
.apc-cell { min-height: 110px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px; background: #fff;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apc-cell-blank { border: none; background: none; }
.apc-wknd { background: #f8fafc; }
.apc-cell.apc-today, .apc-wcol.apc-today { outline: 2px solid var(--pc-blue, #0b5fa5); }
.apc-dhead { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.apc-dnum { font-size: .78em; font-weight: 700; color: #475569; }
.apc-count { font-size: .7em; color: #475569; display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.apc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pc-edge, #5b6473); }
.apc-none { font-size: .72em; color: #475569; margin-top: auto; }

/* a visit */
.apc-visit { display: inline-flex; align-items: center; gap: 4px; font-size: .72em; padding: 2px 6px; border-radius: 6px;
  background: var(--pc-fill, #f1f3f5); border: 1px solid var(--pc-edge, #5b6473); border-left-width: 4px;
  color: var(--text, #0E1E3E); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; cursor: pointer; }
.apc-visit i { font-style: normal; }
.apc-visit:hover, .apc-row:hover { filter: brightness(.96); }
.apc-visit:focus-visible, .apc-row:focus-visible { outline: 2px solid var(--pc-blue, #0b5fa5); outline-offset: 1px; }
.apc-noshow { text-decoration: line-through; opacity: .7; }
.apc-sealed { border-style: dashed; color: #475569; }

/* the people on the rota that day */
.apc-staff { display: flex; flex-wrap: wrap; gap: 3px; }
/* On the month grid a day is about 48px wide on a phone. A pill with a
   border and 7px of padding is 27px, so every person landed on their own
   row and four of them made the cell taller than the visits underneath.
   Bare initials pack three to a row and the visits stay the content. */
.apc-faces { gap: 2px; }
.apc-faces .apc-person { padding: 0; border: 0; background: none; }
.apc-staff-none { font-size: .7em; color: #475569; }
.apc-person { display: inline-flex; align-items: center; gap: 4px; font-size: .72em; border-radius: 999px; padding: 1px 6px 1px 1px;
  background: #fff; border: 1px solid var(--pc-edge, #cbd5e1); white-space: nowrap; }
.apc-ini { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pc-edge, #475569); color: #fff; font-size: .8em; font-weight: 700; flex: none; }
.apc-pending { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #fdf3e3 6px, #fdf3e3 12px); }

/* week */
.apc-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 6px; overflow-x: auto; }
.apc-wcol { border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; min-width: 0; display: flex; flex-direction: column; }
.apc-whead { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-size: .85em; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.apc-wstaff { padding: 4px 8px; border-bottom: 1px dashed #e2e8f0; background: #fbfcfe; }
/* The rota is context, not the content: it reads a size smaller than the
   visits beside it, and never outweighs them. */
.apc-wstaff .apc-person { font-size: .68em; padding: 1px 5px 1px 1px; opacity: .92; }
.apc-wstaff .apc-ini { width: 15px; height: 15px; }
.apc-label { font-size: .7em; text-transform: uppercase; letter-spacing: .4px; color: #475569; margin-bottom: 3px; }
.apc-wvisits { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.apc-row { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; border-radius: 6px; cursor: pointer;
  background: var(--pc-fill, #f1f3f5); border-left: 4px solid var(--pc-edge, #5b6473); font-size: .8em; min-width: 0; }
.apc-rtime { font-weight: 700; white-space: nowrap; }
.apc-rtime small { font-weight: 400; color: #475569; }
.apc-rwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.apc-rwho .apc-muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apc-pill { align-self: flex-start; display: inline-block; white-space: nowrap; font-size: .85em; padding: 0 6px; border-radius: 999px; color: #fff; background: var(--pc-edge, #5b6473); }
@media (max-width: 880px) {
  .apc-grid { gap: 2px; }
  .apc-cell { min-height: 84px; padding: 3px; }
  .apc-faces .apc-ini { width: 15px; height: 15px; font-size: .62em; }
  .apc-visit { font-size: .66em; padding: 1px 4px; }
  .apc-week { grid-template-columns: 1fr; }
}
/* filters, faces and the picked person's days */
.apc-filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; font-size: .85em; }
.apc-fgroup { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.apc-flabel { font-size: .75em; text-transform: uppercase; letter-spacing: .4px; color: #475569; margin-right: 2px; }
.apc-fbtn { font: inherit; font-size: .9em; padding: 2px 9px; min-height: 0; line-height: 1.5; box-shadow: none; border-radius: 999px; border: 1px solid var(--pc-edge, #cbd5e1); background: #fff; color: var(--text, #0E1E3E); cursor: pointer; }
.apc-fbtn.on { background: var(--pc-edge, #0b5fa5); color: #fff; }
.apc-fbtn.apc-fclear { border-color: #b02a2a; color: #b02a2a; }
.apc-filters select { font: inherit; font-size: .9em; padding: 2px 6px; width: auto; min-width: 0; }
.apc-hidden { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px;
  padding: 8px 12px; border-radius: 8px; background: #fdf1e3; border: 1px solid #8a4f00; color: #6b3d00; font-size: .9em; }
.apc-svc { display: inline-block; font-size: .8em; padding: 0 6px; border-radius: 999px; background: #eef2f7; color: #334155; border: 1px solid #d5dde8; white-space: nowrap; }
.apc-face { object-fit: cover; }
.apc-person-sel { outline: 2px solid var(--pc-blue, #0b5fa5); outline-offset: 1px; }
.apc-cell.apc-onduty, .apc-wcol.apc-onduty { background: #f3f8ff; box-shadow: inset 0 0 0 2px #c7dcf5; }

/* ── Add-to-your-calendar panel ───────────────────────────────────────────
   Its own block rather than reused chrome, because the global button rules
   restyle .amd-btn inside a modal and these four are links, not buttons. */
.cal-link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-link-row .amd-btn { flex: 1 1 auto; min-width: 128px; text-align: center; text-decoration: none; }
/* The privacy note has to be read, not skimmed past, so it carries the same
   weight as the buttons above it — 11.3:1 on its own background, well clear
   of the 4.5:1 floor. The amber edge marks it as a caution, not a warning:
   nothing here is broken, but pasting the link somewhere careless would be. */
.cal-link-privacy {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: #FFF7E6; border-left: 4px solid #8A5A00; color: #4A3200;
  font-size: 12.5px; line-height: 1.5;
}
.cal-link-privacy b { display: block; color: #3A2700; margin-bottom: 2px; }
@media (prefers-color-scheme: dark) {
  .cal-link-privacy { background: #2A2210; border-left-color: #E0A63A; color: #F2E4C8; }
  .cal-link-privacy b { color: #FFE9BF; }
}

/* When the feed carries patient information the notice is a warning, not a
   footnote: red edge, heavier weight. Verified to WCAG AA on both themes. */
.cal-link-privacy.cal-link-phi {
  background: #FDECEC; border-left-color: #9B1C1C; color: #4A1010;
}
.cal-link-privacy.cal-link-phi b { color: #7A1414; }
@media (prefers-color-scheme: dark) {
  .cal-link-privacy.cal-link-phi { background: #2E1414; border-left-color: #F08A8A; color: #FBE3E3; }
  .cal-link-privacy.cal-link-phi b { color: #FFD2D2; }
}

/* ── Provisioning desk: the feature checklist ─────────────────────────
   A dense grid because there are two dozen of them and an operator needs
   to see the whole shape of a template at once, not scroll a column. */
.pf-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.pf-feat { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.pf-feat input { margin: 0; flex: none; }
/* Above the chosen plan. Shown rather than hidden, so an operator can see
   what a higher tier would add instead of wondering what is missing. */
.pf-feat-locked { opacity: .55; cursor: not-allowed; }

/* ── Platform: the two ways a practice gets onto the system ──────────────
   The primary action on this page was a one-line <summary> inside a closed
   <details>, sitting directly above a second one worded almost the same:
   "Provision a new practice" and "Register an instance that was not
   provisioned here". Two disclosures of identical weight, where the first
   is what you want almost every time and the second adopts a service that
   is already running somewhere else. Nothing on the screen said which was
   which, so the question "which one creates a practice?" was the screen's
   fault, not the reader's. Weight follows importance here instead.

   Raised, not skeuomorphic: a vertical gradient, a hairline inset
   highlight, a two-stage shadow, and a press that actually moves. The
   colours are the house navy/blue, and the text stays white on a gradient
   whose lightest stop is already darker than --blue-700, so the contrast
   is the same at the top of the button as at the bottom. */
.pf-choose { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.pf-choose > .btn-hero { flex: 1 1 280px; }
.btn-hero {
  display: block; width: 100%; text-align: left; font-family: var(--body);
  font-size: 15px; font-weight: 700; line-height: 1.35; padding: 13px 17px;
  border-radius: var(--radius); border: 1px solid var(--navy-800); cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #0B46C4 0%, var(--blue-700) 52%, var(--navy-800) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 4px rgba(6, 39, 104, .18), 0 9px 22px rgba(6, 39, 104, .20);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.btn-hero:hover {
  filter: brightness(1.07); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 7px rgba(6, 39, 104, .22), 0 14px 30px rgba(6, 39, 104, .24);
}
.btn-hero:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); filter: brightness(.98); }
.btn-hero .hero-sub { display: block; font-weight: 500; font-size: 12.5px; margin-top: 4px; color: rgba(255, 255, 255, .9); }
/* The secondary choice is the same shape so they read as a pair, and
   plainly lighter so they never read as equals. */
.btn-hero.alt {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--blue-50, #eef4fb) 100%);
  color: var(--blue-700); border-color: var(--blue-300, #93b4e4);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(6, 39, 104, .06), 0 6px 16px rgba(6, 39, 104, .09);
}
.btn-hero.alt:hover { filter: none; background: linear-gradient(180deg, #FFFFFF 0%, var(--blue-100) 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(6, 39, 104, .1), 0 10px 24px rgba(6, 39, 104, .13); }
.btn-hero.alt .hero-sub { color: var(--muted); }
/* A form that was just jumped to should say so for a moment. */
.pf-jumped { animation: pf-flash 1.4s ease-out 1; }
@keyframes pf-flash { 0% { box-shadow: 0 0 0 3px var(--blue-300, #93b4e4); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .btn-hero { transition: none; } .btn-hero:active { transform: none; } .pf-jumped { animation: none; }
}