/* 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: #00813B;
  --green-500: #00B454;
  --green-100: #DDF6E8;
  --teal-600: #128274;
  --amber-600: #B45309;
  --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;
  --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; }

/* ── 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); }
.nav-primary.pc-green { --pc: #00953F; }
.nav-primary.pc-blue { --pc: #2456C4; }
.nav-primary.pc-teal { --pc: #0F8C7C; }
.nav-primary.pc-amber { --pc: #C97A0A; }

.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; }
button.btn-review:disabled { opacity: .6; }

/* 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); }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

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; }
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 {
  height: 40px; width: auto; max-width: min(280px, calc(100vw - 90px));
  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); }
  .topbar .menu {
    background: rgba(255,255,255,.14); border: none; color: #fff; cursor: pointer;
    font-size: 19px; line-height: 1; padding: 9px 13px; border-radius: 9px; min-height: 40px;
  }

  /* 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 */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border-strong);
    box-shadow: 0 -6px 24px rgba(6, 39, 104, .12);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; background: none; border: none; color: var(--muted); cursor: pointer;
    font-family: var(--body); font-size: 10.5px; font-weight: 600;
    padding: 5px 2px; border-radius: 10px; min-height: 52px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tabbar .ticon { font-size: 21px; line-height: 1.15; }
  .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(84px + 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; }
button:not(.secondary):not(.danger):not(.small):not(.btn-call):not(.btn-text):not(.btn-email):not(.btn-review):not(.modal-x):not(.menu),
.btn:not(.secondary):not(.small):not(.btn-call):not(.btn-text):not(.btn-email):not(.btn-review) {
  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);
  }
  .tabbar {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
    border-top: 1px solid rgba(6, 39, 104, .1);
  }
  .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: 3px; left: 50%; transform: translateX(-50%);
    width: 18px; height: 3px; 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; }
}
/* ============================================================================
   AMDCal — 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: #6b7280; 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; 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: #94a3b8; 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; }

button:not(.secondary):not(.danger):not(.small):not(.btn-call):not(.btn-text):not(.btn-email):not(.btn-review),
.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));
  color: #fff; 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 AMDCal 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 */
}

/* ---- AMDCal: 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; }
.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}}