/* ============================================================
   CareBridge — prototype stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-300:#5eead4;
  --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --teal-800:#115e59; --teal-900:#134e4a; --teal-950:#0a3532;

  /* accent */
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d;
  --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;

  /* danger — safety-critical signal */
  --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5;
  --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b;

  /* neutrals */
  --n-0:#ffffff;  --n-25:#fcfdfd; --n-50:#f8fafb; --n-100:#f1f4f6; --n-150:#e9edf1;
  --n-200:#dfe5ea; --n-300:#cbd4dc; --n-400:#94a3b1; --n-500:#697c8c;
  --n-600:#4d5f6d; --n-700:#374a57; --n-800:#22323c; --n-900:#141f27;

  /* semantic */
  --success:#0f9d58; --success-bg:#e8f7ef; --success-br:#b7e7cd;
  --warn:#b45309;    --warn-bg:#fff7e6;    --warn-br:#fbd9a0;
  --info:#1d6fb8;    --info-bg:#eaf3fb;    --info-br:#bcd9f2;

  --brand:var(--teal-700);
  --brand-hover:var(--teal-800);
  --accent:var(--amber-500);

  --bg: var(--n-50);
  --surface: var(--n-0);
  --border: var(--n-200);
  --text: var(--n-800);
  --text-soft: var(--n-500);
  --text-mute: var(--n-400);

  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  --sh-xs: 0 1px 2px rgba(20,31,39,.06);
  --sh-sm: 0 1px 3px rgba(20,31,39,.07), 0 1px 2px rgba(20,31,39,.04);
  --sh-md: 0 4px 12px -2px rgba(20,31,39,.09), 0 2px 6px -2px rgba(20,31,39,.05);
  --sh-lg: 0 12px 32px -8px rgba(20,31,39,.16), 0 4px 12px -4px rgba(20,31,39,.08);
  --sh-xl: 0 28px 64px -16px rgba(20,31,39,.26), 0 8px 24px -8px rgba(20,31,39,.12);

  --sidebar-w: 252px;
  --topbar-h: 64px;
  --ease: cubic-bezier(.32,.72,.32,1);
}

/* ---------- Category hues ---------- */
.hue-teal   { --h-bg:#e6f7f4; --h-br:#8fd9cd; --h-tx:#0f5f57; --h-dot:#0d9488; }
.hue-indigo { --h-bg:#eceefc; --h-br:#b3bbf2; --h-tx:#3b3f8f; --h-dot:#5b63d3; }
.hue-violet { --h-bg:#f2ecfb; --h-br:#cdb8ee; --h-tx:#5b3d8f; --h-dot:#8b5cf6; }
.hue-green  { --h-bg:#e9f6ec; --h-br:#a9dcb6; --h-tx:#2c6b3c; --h-dot:#4caf6a; }
.hue-rose   { --h-bg:#fdedf1; --h-br:#f3b6c5; --h-tx:#98304d; --h-dot:#e05576; }
.hue-amber  { --h-bg:#fdf3e2; --h-br:#f0cf95; --h-tx:#8a5a12; --h-dot:#d99a2b; }
.hue-sky    { --h-bg:#e8f2fb; --h-br:#a9cdec; --h-tx:#1d5b8f; --h-dot:#3d8fd1; }
.hue-plum   { --h-bg:#f7ecf6; --h-br:#dcb4d8; --h-tx:#753a70; --h-dot:#a95ba2; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}
h1,h2,h3,h4,h5 { margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.25; color:var(--n-900); }
h1 { font-size:24px; letter-spacing:-.025em; }
h2 { font-size:19px; letter-spacing:-.02em; }
h3 { font-size:15px; }
h4 { font-size:13px; }
p { margin:0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--teal-700); text-decoration: none; }
ul { margin:0; padding:0; list-style:none; }
:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; border-radius: 4px; }

/* ---------- Utilities ---------- */
.muted { color: var(--text-soft); }
.mute2 { color: var(--text-mute); }
.tiny  { font-size:11px; }
.small { font-size:12px; }
.mono  { font-variant-numeric: tabular-nums; }
.bold  { font-weight:600; }
.row   { display:flex; align-items:center; }
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.between { justify-content:space-between; }
.wrap { flex-wrap:wrap; }
.col { display:flex; flex-direction:column; }
.grow { flex:1; min-width:0; }
.center { align-items:center; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upper { text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; font-weight:650; }
.hide { display:none !important; }

.acc-head .acc-detail{
  display: block;
}
/* ============================================================
   App shell
   ============================================================ */
#app { min-height: 100vh; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(178deg, var(--teal-900) 0%, var(--teal-950) 100%);
  color: #cfe6e2;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 40;
}
.brand { display:flex; align-items:center; gap:11px; padding:19px 20px 18px; }
.brand-mark {
  width:34px; height:34px; border-radius:10px; flex:none;
  background: linear-gradient(140deg, var(--teal-400), var(--teal-600) 70%);
  display:grid; place-items:center; color:#04302c; font-weight:800; font-size:15px;
  box-shadow: 0 3px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-name { color:#fff; font-weight:680; font-size:15.5px; letter-spacing:-.02em; }
.brand-sub  { font-size:10.5px; color:#7fb5ad; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }

.nav { padding: 6px 12px; overflow-y:auto; flex:1; }
.nav::-webkit-scrollbar { width:6px; }
.nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.13); border-radius:3px; }
.nav-label { padding:16px 10px 6px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#5f958d; font-weight:700; }
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:8.5px 11px; border-radius:9px; color:#b6d8d3; font-size:13.5px; font-weight:520;
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
  text-align:left; position:relative;
}
.nav-item:hover { background: rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background: rgba(45,212,191,.16); color:#fff; font-weight:600; }
.nav-item.active::before {
  content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background: var(--teal-400); border-radius:0 3px 3px 0;
}
.nav-item svg { width:17px; height:17px; flex:none; opacity:.9; }
.nav-item .pill {
  margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:var(--r-full);
  background: var(--red-600); color:#fff; letter-spacing:.01em;
}
.nav-item .pill.amber { background: var(--amber-500); color:#43290a; }

.side-foot { padding:12px; border-top:1px solid rgba(255,255,255,.09); }
.role-card {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  background: rgba(255,255,255,.06); width:100%; text-align:left;
  transition: background .16s var(--ease);
}
.role-card:hover { background: rgba(255,255,255,.11); }
.role-card .avatar { background: var(--teal-500); color:#04302c; }
.role-card .rc-name { color:#fff; font-size:12.5px; font-weight:600; line-height:1.3; }
.role-card .rc-role { color:#7fb5ad; font-size:11px; line-height:1.3; }

/* ---------- Main / topbar ---------- */
.main { min-width:0; display:flex; flex-direction:column; }
.topbar {
  height: var(--topbar-h); background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); display:flex; align-items:center; gap:16px;
  padding: 0 28px; position: sticky; top:0; z-index:30;
}
.topbar h1 { font-size:19px; }
.crumbs { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-mute); margin-bottom:1px; }
.crumbs button:hover { color: var(--teal-700); text-decoration:underline; }
.search {
  display:flex; align-items:center; gap:8px; background:var(--n-100); border:1px solid transparent;
  border-radius:var(--r-full); padding:7px 14px; width:270px; color:var(--text-mute);
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.search:hover { background:var(--n-150); }
.search:focus-within { background:#fff; border-color:var(--teal-400); box-shadow:0 0 0 3px var(--teal-100); }
.search input { border:none; outline:none; background:none; flex:1; min-width:0; font-size:13px; color:var(--text); }
.search input::placeholder { color: var(--text-mute); }

.content { padding: 26px 28px 72px; flex:1; }
.page-head { margin-bottom:22px; }
.page-head .lede { color:var(--text-soft); font-size:13.5px; margin-top:5px; max-width:70ch; }

/* ---------- Avatar ---------- */
.avatar {
  width:32px; height:32px; border-radius:var(--r-full); flex:none;
  display:grid; place-items:center; font-size:11.5px; font-weight:680; letter-spacing:.01em;
  background: var(--teal-100); color: var(--teal-800);
}
.avatar.lg { width:56px; height:56px; font-size:18px; border-radius:18px; }
.avatar.xl { width:76px; height:76px; font-size:24px; border-radius:24px; }
.avatar.sm { width:26px; height:26px; font-size:10px; }
.avatar.amber { background: var(--amber-100); color: var(--amber-700); }
.avatar.slate { background: var(--n-150); color: var(--n-600); }
.avatar.violet{ background:#f2ecfb; color:#5b3d8f; }
.avatar.rose  { background:#fdedf1; color:#98304d; }
.avatar-stack { display:flex; }
.avatar-stack .avatar { margin-left:-8px; box-shadow:0 0 0 2px #fff; }
.avatar-stack .avatar:first-child { margin-left:0; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 15px; border-radius:9px; font-size:13px; font-weight:570; letter-spacing:-.005em;
  border:1px solid transparent; white-space:nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease), color .15s var(--ease);
}
.btn:active { transform: translateY(.5px) scale(.995); }
.btn svg { width:15px; height:15px; }
.btn-primary { background: var(--teal-700); color:#fff; box-shadow: var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { background: var(--teal-800); box-shadow: var(--sh-sm); }
.btn-accent { background: var(--amber-500); color:#3d2607; box-shadow: var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.3); font-weight:620; }
.btn-accent:hover { background: var(--amber-400); box-shadow: 0 3px 10px -2px rgba(217,119,6,.4); }
.btn-outline { background:#fff; border-color: var(--n-200); color: var(--n-700); box-shadow: var(--sh-xs); }
.btn-outline:hover { border-color: var(--n-300); background: var(--n-50); color: var(--n-900); }
.btn-ghost { color: var(--n-600); }
.btn-ghost:hover { background: var(--n-100); color: var(--n-900); }
.btn-danger { background: var(--red-600); color:#fff; box-shadow: var(--sh-xs); }
.btn-danger:hover { background: var(--red-700); }
.btn-danger-soft { background: var(--red-50); color: var(--red-700); border-color: var(--red-200); }
.btn-danger-soft:hover { background: var(--red-100); }
.btn-sm { padding:5.5px 11px; font-size:12.5px; border-radius:8px; }
.btn-sm svg { width:13px; height:13px; }
.btn-lg { padding:12px 22px; font-size:15px; border-radius:11px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.5; pointer-events:none; }

.icon-btn {
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--n-500);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--n-100); color: var(--n-800); }
.icon-btn svg { width:17px; height:17px; }

/* ---------- Badges & tags ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  background: var(--n-100); color: var(--n-600); border:1px solid var(--n-150);
}
.badge .dot { width:6px; height:6px; border-radius:50%; background: currentColor; flex:none; }
.badge-success { background: var(--success-bg); color:#0b6b3c; border-color: var(--success-br); }
.badge-warn    { background: var(--warn-bg);    color: var(--warn);  border-color: var(--warn-br); }
.badge-danger  { background: var(--red-50);     color: var(--red-700); border-color: var(--red-200); }
.badge-info    { background: var(--info-bg);    color: var(--info);  border-color: var(--info-br); }
.badge-brand   { background: var(--teal-50);    color: var(--teal-800); border-color: var(--teal-200); }
.badge-amber   { background: var(--amber-50);   color: var(--amber-700); border-color: var(--amber-200); }
.badge-solid-danger { background: var(--red-600); color:#fff; border-color:var(--red-600); }

.tag {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px;
  font-size:11.5px; font-weight:540; background:var(--n-100); color:var(--n-600); border:1px solid var(--n-150);
}
.tag-hue { background: var(--h-bg); color: var(--h-tx); border-color: var(--h-br); }
.tag-hue .dot { width:6px; height:6px; border-radius:50%; background: var(--h-dot); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-head {
  padding:15px 18px; border-bottom:1px solid var(--n-150);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;   /* title + actions must not force the page wide */
}
.card-head h3 { font-size:14.5px; }
.card-body { padding:18px; }
.card-body.tight { padding:14px 18px; }
.card-foot { padding:13px 18px; border-top:1px solid var(--n-150); background:var(--n-25); border-radius:0 0 var(--r-lg) var(--r-lg); }

.grid { display:grid; gap:18px; }
/* Grid and flex children default to min-width:auto, so a wide table or a long
   run of text can push a column past the viewport. Let them shrink instead. */
.grid > *, .col > * { min-width: 0; }
.col { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.g-1-2 { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }

/* ---------- Stat cards ---------- */
.stat {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:17px 18px;
  box-shadow: var(--sh-sm); position:relative; overflow:hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.stat.clickable:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color:var(--n-300); }
.stat-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.stat-label { font-size:12px; color:var(--text-soft); font-weight:540; }
.stat-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.stat-icon svg { width:17px; height:17px; }
.stat-icon.teal  { background:var(--teal-50); color:var(--teal-700); }
.stat-icon.amber { background:var(--amber-50); color:var(--amber-600); }
.stat-icon.red   { background:var(--red-50); color:var(--red-600); }
.stat-icon.slate { background:var(--n-100); color:var(--n-600); }
.stat-value { font-size:30px; font-weight:680; letter-spacing:-.035em; line-height:1.05; color:var(--n-900); }
.stat-value .unit { font-size:14px; font-weight:550; color:var(--text-soft); letter-spacing:0; }
.stat-meta { margin-top:7px; font-size:12px; color:var(--text-soft); display:flex; align-items:center; gap:5px; }
.stat.alert { border-color: var(--red-200); background: linear-gradient(180deg, #fffbfb, #fff); }
.stat.alert .stat-value { color: var(--red-700); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
table.tbl th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:670;
  color:var(--text-mute); padding:10px 16px; background:var(--n-25);
  border-bottom:1px solid var(--n-150); white-space:nowrap; position:sticky; top:0; z-index:1;
}
table.tbl td { padding:12px 16px; border-bottom:1px solid var(--n-100); vertical-align:middle; }
table.tbl tbody tr { transition: background .13s var(--ease); }
table.tbl tbody tr.clickable { cursor:pointer; }
table.tbl tbody tr.clickable:hover { background: var(--teal-50); }
table.tbl tbody tr:last-child td { border-bottom:none; }
table.tbl td.num { font-variant-numeric: tabular-nums; }
.cell-main { font-weight:580; color:var(--n-900); }
.cell-sub { font-size:12px; color:var(--text-soft); }

/* ---------- Filters / toolbar ---------- */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.seg {
  display:inline-flex; background:var(--n-100); padding:3px; border-radius:10px; gap:2px;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.seg::-webkit-scrollbar { display:none; }
.seg button { flex:none; white-space:nowrap; }
.seg button {
  padding:5.5px 13px; border-radius:7.5px; font-size:12.5px; font-weight:550; color:var(--n-600);
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.seg button:hover { color:var(--n-900); }
.seg button.on { background:#fff; color:var(--teal-800); box-shadow: var(--sh-xs); font-weight:620; }

.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12px; font-weight:580; color:var(--n-700); }
.field .hint { font-size:11.5px; color:var(--text-mute); }
.input, select.input, textarea.input {
  border:1px solid var(--n-200); background:#fff; border-radius:9px; padding:8.5px 12px; font-size:13.5px;
  width:100%; outline:none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  color:var(--text); appearance:none;
}
select.input {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697c8c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;
}
.input:hover { border-color: var(--n-300); }
.input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-100); }
textarea.input { min-height:82px; resize:vertical; line-height:1.55; }
.input::placeholder { color: var(--text-mute); }
.input[readonly] { background: var(--n-25); }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.tabs button {
  padding:10px 15px; font-size:13.5px; font-weight:560; color:var(--text-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.tabs button:hover { color: var(--n-900); }
.tabs button.on { color: var(--teal-800); border-bottom-color: var(--teal-600); font-weight:640; }
.tabs button .count { font-size:11px; color:var(--text-mute); margin-left:5px; }

/* ---------- Roster ---------- */
.roster-scroll { overflow-x:auto; border-radius: var(--r-lg); }
.roster {
  display:grid; grid-template-columns: 190px repeat(7, minmax(148px, 1fr));
  min-width:1240px; background:var(--surface);
}
.rz { border-right:1px solid var(--n-100); border-bottom:1px solid var(--n-100); }
/* .roster-scroll is a scroll container (overflow-x:auto computes overflow-y to
   auto), so these stick to that container's edges — not the viewport. top:0 keeps
   the day headers on the first grid row instead of offsetting them over row two. */
.r-head {
  position:sticky; top:0; z-index:12; background: var(--n-25);
  padding:11px 12px; border-bottom:1px solid var(--n-200); text-align:center;
}
.r-head .dname { font-size:12.5px; font-weight:660; color:var(--n-800); }
.r-head .dcount { font-size:11px; color:var(--text-mute); }
.r-head.today { background: var(--teal-50); }
.r-head.today .dname { color: var(--teal-800); }
.r-corner { position:sticky; left:0; top:0; z-index:14; background:var(--n-25); padding:11px 14px; border-bottom:1px solid var(--n-200); }
.r-staff {
  position:sticky; left:0; z-index:10; background:var(--surface); padding:11px 12px;
  display:flex; gap:9px; align-items:center; border-right:1px solid var(--n-150);
}
.r-staff .avatar { width:29px; height:29px; font-size:10.5px; }
.r-staff .sname { font-size:12.8px; font-weight:590; color:var(--n-900); line-height:1.25; }
.r-staff .srole { font-size:10.5px; color:var(--text-mute); }
.r-cell { padding:6px; display:flex; flex-direction:column; gap:5px; min-height:74px; background:#fff; }
.r-cell.today { background: #f6fcfb; }
.r-cell.off { background: repeating-linear-gradient(45deg, var(--n-25), var(--n-25) 6px, var(--n-50) 6px, var(--n-50) 12px); }

.vblock {
  text-align:left; width:100%; border-radius:8px; padding:6px 8px 6.5px;
  background: var(--h-bg); border:1px solid var(--h-br); border-left:3px solid var(--h-dot);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s var(--ease);
  position:relative;
}
.vblock:hover { transform: translateY(-1px); box-shadow: var(--sh-md); filter: saturate(1.15); z-index:5; }
.vblock .vtime { font-size:10.5px; font-weight:700; color: var(--h-tx); opacity:.85; font-variant-numeric:tabular-nums; }
.vblock .vpat  { font-size:12px; font-weight:610; color: var(--h-tx); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vblock .vcat  { font-size:10.5px; color: var(--h-tx); opacity:.78; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vblock.flag {
  background: var(--red-50); border-color: var(--red-300); border-left-color: var(--red-600);
  box-shadow: 0 0 0 1px var(--red-100);
}
.vblock.flag .vtime, .vblock.flag .vpat, .vblock.flag .vcat { color: var(--red-800); }
.vblock.flag::after {
  content:''; position:absolute; top:-4px; right:-4px; width:11px; height:11px; border-radius:50%;
  background: var(--red-600); border:2px solid #fff; box-shadow:0 1px 3px rgba(185,28,28,.5);
  animation: pulseFlag 2.4s var(--ease) infinite;
}
@keyframes pulseFlag {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); }
  50%     { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}
.vblock.unfilled {
  background: repeating-linear-gradient(45deg, #fff5f5, #fff5f5 5px, #ffeaea 5px, #ffeaea 10px);
  border-style:dashed; border-color:var(--red-400,#f87171); border-left-style:solid;
}
.vblock.done { opacity:.62; }
.vblock.done .vpat { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.22); }

.legend { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-soft); }
.legend-swatch { width:11px; height:11px; border-radius:3.5px; background:var(--h-dot); flex:none; }

/* ---------- Conflict panel (drawer) ---------- */
.drawer-scrim {
  position:fixed; inset:0; background:rgba(20,31,39,.34); backdrop-filter:blur(2px);
  z-index:60; opacity:0; animation: fadeIn .2s var(--ease) forwards;
}
@keyframes fadeIn { to { opacity:1; } }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(440px, 100vw); background:#fff;
  z-index:61; box-shadow: var(--sh-xl); display:flex; flex-direction:column;
  transform: translateX(100%); animation: slideIn .34s var(--ease) forwards;
}
@keyframes slideIn { to { transform: translateX(0); } }
.drawer-head { padding:18px 20px 15px; border-bottom:1px solid var(--n-150); display:flex; align-items:flex-start; gap:12px; }
.drawer-body { padding:20px; overflow-y:auto; flex:1; }
.drawer-foot { padding:14px 20px; border-top:1px solid var(--n-150); background:var(--n-25); display:flex; gap:10px; }

.alert-box {
  border-radius:var(--r-md); padding:13px 15px; border:1px solid; display:flex; gap:11px; align-items:flex-start;
}
.alert-box svg { width:17px; height:17px; flex:none; margin-top:1px; }
.alert-danger { background:var(--red-50); border-color:var(--red-200); color:var(--red-800); }
.alert-warn   { background:var(--warn-bg); border-color:var(--warn-br); color:#7a3d06; }
.alert-info   { background:var(--info-bg); border-color:var(--info-br); color:#134a7c; }
.alert-success{ background:var(--success-bg); border-color:var(--success-br); color:#0b6b3c; }
.alert-box .at { font-weight:660; font-size:13px; margin-bottom:2px; }
.alert-box .ab { font-size:12.5px; line-height:1.5; opacity:.92; }

/* ---------- Definition rows ---------- */
.dl { display:grid; grid-template-columns: 148px 1fr; gap:1px 16px; font-size:13.5px; }
.dl dt { color:var(--text-soft); padding:8px 0; font-size:12.5px; }
.dl dd { margin:0; padding:8px 0; color:var(--n-800); }
.dl.stack { grid-template-columns:1fr; }
.dl-line { border-bottom:1px solid var(--n-100); }

.kv { display:flex; flex-direction:column; gap:3px; }
.kv .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); font-weight:640; }
.kv .v { font-size:14px; font-weight:560; color:var(--n-900); }

/* ---------- Note template form ---------- */
.note-form { display:flex; flex-direction:column; gap:0; }
.note-field { padding:13px 0; border-bottom:1px dashed var(--n-150); display:grid; grid-template-columns: 200px 1fr; gap:16px; align-items:start; }
.note-field:last-child { border-bottom:none; }
.note-field .nf-label { font-size:12.5px; font-weight:590; color:var(--n-700); padding-top:8px; }
.note-field .nf-label .req { color:var(--red-600); }
.note-value { font-size:13.5px; color:var(--n-800); background:var(--n-25); border:1px solid var(--n-150); border-radius:9px; padding:9px 12px; line-height:1.55; }
.template-banner {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-md);
  background: linear-gradient(100deg, var(--teal-50), #fff); border:1px solid var(--teal-200);
}

/* ---------- Timeline ---------- */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--n-150); border-radius:1px; }
.tl-item { position:relative; padding-bottom:20px; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:-24px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--teal-500); box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--teal-100); }
.tl-dot.red { background:var(--red-600); box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--red-100); }
.tl-dot.amber { background:var(--amber-500); box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--amber-100); }
.tl-dot.slate { background:var(--n-300); box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--n-100); }

/* ---------- List rows ---------- */
.lrow {
  display:flex; align-items:center; gap:13px; padding:13px 18px; border-bottom:1px solid var(--n-100);
  transition: background .14s var(--ease); width:100%; text-align:left;
}
.lrow:last-child { border-bottom:none; }
.lrow.clickable:hover { background: var(--teal-50); }
.lrow .lr-title { font-size:13.5px; font-weight:580; color:var(--n-900); }
.lrow .lr-sub { font-size:12px; color:var(--text-soft); }

/* ---------- Empty & skeleton ---------- */
.empty { padding:46px 24px; text-align:center; }
.empty-art {
  width:60px; height:60px; margin:0 auto 15px; border-radius:19px; display:grid; place-items:center;
  background: linear-gradient(150deg, var(--teal-50), var(--n-100)); color: var(--teal-600);
  border:1px solid var(--teal-100);
}
.empty-art svg { width:26px; height:26px; }
.empty h3 { margin-bottom:5px; }
.empty p { color:var(--text-soft); font-size:13px; max-width:40ch; margin:0 auto 16px; }

.skel { background: linear-gradient(90deg, var(--n-100) 25%, var(--n-150) 37%, var(--n-100) 63%);
  background-size: 400% 100%; animation: shimmer 1.5s infinite linear; border-radius:6px; }
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.skel-line { height:11px; margin-bottom:9px; }
.skel-row { display:flex; align-items:center; gap:13px; padding:13px 18px; border-bottom:1px solid var(--n-100); }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:11px; padding:12px 18px 12px 14px; border-radius:13px;
  background: var(--n-900); color:#fff; box-shadow: var(--sh-xl); font-size:13.5px; font-weight:520;
  animation: toastIn .38s var(--ease); max-width:min(460px, calc(100vw - 32px));
}
@keyframes toastIn { from { opacity:0; transform: translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
.toast.out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastOut { to { opacity:0; transform: translateY(8px) scale(.97); } }
.toast .tick {
  width:22px; height:22px; border-radius:50%; background: var(--teal-400); color:#06342f;
  display:grid; place-items:center; flex:none;
}
.toast .tick svg { width:13px; height:13px; }
.toast.warn .tick { background: var(--amber-400); color:#3d2607; }

/* ---------- Modal ---------- */
.modal-scrim { position:fixed; inset:0; background:rgba(20,31,39,.4); backdrop-filter:blur(3px); z-index:70;
  display:grid; place-items:center; padding:20px; opacity:0; animation: fadeIn .18s var(--ease) forwards; overflow-y:auto; }
.modal {
  background:#fff; border-radius:var(--r-xl); width:min(540px, 100%); box-shadow: var(--sh-xl);
  animation: modalIn .3s var(--ease); margin:auto;
}
@keyframes modalIn { from { opacity:0; transform: translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
.modal-head { padding:20px 22px 14px; }
.modal-body { padding:0 22px 6px; }
.modal-foot { padding:16px 22px 20px; display:flex; gap:10px; justify-content:flex-end; }

/* ---------- Success moment ---------- */
.success-panel { text-align:center; padding:44px 28px; }
.success-ring {
  width:74px; height:74px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background: var(--success-bg); color:#0b8f4e; animation: popIn .5s var(--ease);
}
.success-ring svg { width:34px; height:34px; stroke-dasharray:40; stroke-dashoffset:40; animation: drawCheck .5s .22s var(--ease) forwards; }
@keyframes popIn { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.08); } 100% { transform:scale(1); opacity:1; } }
@keyframes drawCheck { to { stroke-dashoffset:0; } }

/* ---------- Tooltip ---------- */
.tip { position:relative; }
/* Tooltips are absolutely positioned, so an over-wide one on a right-hand
   button widens the whole document. Cap the width and let it wrap. */
.tip::after {
  content: attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background: var(--n-900); color:#fff; font-size:11.5px; font-weight:500; line-height:1.45; padding:7px 10px; border-radius:8px;
  white-space:pre-line; width:max-content; max-width:min(270px, calc(100vw - 40px));
  opacity:0; pointer-events:none; transition: opacity .18s var(--ease), transform .18s var(--ease);
  box-shadow: var(--sh-lg); z-index:50; letter-spacing:0;
}
.tip:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.tip.tip-left::after { left:auto; right:0; transform:translateY(4px); }
.tip.tip-left:hover::after { transform:translateY(0); }

/* ---------- Progress ---------- */
.bar { height:7px; border-radius:4px; background:var(--n-150); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:4px; background: var(--teal-600); transition: width .6s var(--ease); }
.bar > span.amber { background: var(--amber-500); }
.bar > span.red { background: var(--red-600); }

/* ============================================================
   Availability grid
   ============================================================ */
.avail { display:grid; grid-template-columns: 116px repeat(7, minmax(0,1fr)); gap:6px; min-width:620px; }
.avail-h { text-align:center; font-size:11.5px; font-weight:640; color:var(--text-soft); padding-bottom:3px; }
.avail-h.today { color: var(--teal-700); }
.avail-lbl { display:flex; flex-direction:column; justify-content:center; font-size:12px; font-weight:570; color:var(--n-700); }
.avail-lbl .t { font-size:10.5px; color:var(--text-mute); font-weight:500; }
.avail-cell {
  border-radius:9px; height:46px; display:grid; place-items:center; font-size:10.5px; font-weight:640;
  border:1px solid; transition: transform .13s var(--ease), box-shadow .13s var(--ease), background .13s var(--ease);
  letter-spacing:.02em;
}
.avail-cell.tapable { cursor:pointer; }
.avail-cell.tapable:hover { transform: scale(1.045); box-shadow: var(--sh-sm); z-index:2; }
.av-a { background: var(--success-bg); border-color: var(--success-br); color:#0b6b3c; }
.av-u { background: var(--n-100); border-color: var(--n-200); color: var(--n-500); }
.av-b { background: var(--teal-600); border-color: var(--teal-700); color:#fff; }

.phone-link {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:540;
  color:var(--teal-700); border-bottom:1px solid transparent; transition:border-color .15s var(--ease);
}
.phone-link:hover { border-bottom-color:var(--teal-400); }
.phone-link svg { flex:none; opacity:.7; }

/* ---------- Handover: shift tabs, priority, routing ---------- */
.shift-tabs { display:flex; gap:3px; background:var(--n-100); padding:4px; border-radius:11px; overflow-x:auto; }
.shift-tabs button {
  flex:1; min-width:max-content; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:570;
  color:var(--n-600); white-space:nowrap; transition:background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.shift-tabs button:hover { color:var(--n-900); }
.shift-tabs button.on { background:#fff; color:var(--teal-800); font-weight:660; box-shadow:var(--sh-xs); }

.hmsg.pr-urgent    { border-left-color:var(--red-600); background:linear-gradient(180deg,#fffbfb,#fff); }
.hmsg.pr-important { border-left-color:var(--amber-500); }
.hmsg.pr-routine   { border-left-color:var(--n-300); }

.hroute { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--n-150); }
.hroute-i { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:560; color:var(--teal-700); }
.hroute-i.muted { color:var(--text-mute); font-weight:500; }
.hroute-i svg { flex:none; }

/* ---------- Attendance & verification ---------- */
.attend-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--n-150);
  border:1px solid var(--n-150); border-radius:var(--r-md); overflow:hidden; }
.att { background:#fff; padding:13px 14px; }
.att-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:660; color:var(--text-mute); }
.att-v { font-size:16px; font-weight:650; color:var(--n-900); margin-top:4px; letter-spacing:-.02em; }
.att-s { font-size:11px; color:var(--text-soft); margin-top:3px; line-height:1.4; }

.gates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.gate { display:flex; gap:10px; align-items:flex-start; padding:12px 13px; border-radius:var(--r-md); border:1px solid; }
.gate.ok      { background:var(--success-bg); border-color:var(--success-br); }
.gate.pending { background:var(--warn-bg);    border-color:var(--warn-br); }
.gate-ic { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; }
.gate.ok .gate-ic      { background:#fff; color:#0b6b3c; }
.gate.pending .gate-ic { background:#fff; color:var(--warn); }
.gate-t { font-size:12.5px; font-weight:650; }
.gate.ok .gate-t      { color:#0b6b3c; }
.gate.pending .gate-t { color:var(--warn); }
.gate-d { font-size:11.5px; line-height:1.45; margin-top:2px; opacity:.85; }
.gate.ok .gate-d      { color:#0b6b3c; }
.gate.pending .gate-d { color:var(--warn); }

@media (max-width: 760px) {
  .attend-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gates { grid-template-columns:1fr; }
}

.m-access {
  background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--r-md);
  padding:11px 12px; margin-bottom:12px;
}

/* ---------- Client card lines ---------- */
.cc-line {
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--n-700);
  margin-bottom:5px; min-width:0;
}
.cc-line svg { flex:none; color:var(--text-mute); }
.cc-line.access { color:var(--teal-800); align-items:flex-start; }
.cc-line.access svg { margin-top:2px; }
/* method and code are their own fields, so neither can be truncated away */
/* The wrapper must be a block flex-child, or the block-level detail line
   inside an inline span collapses the whole layout. */
.acc-wrap { display:block; flex:1 1 auto; min-width:0; }
.acc-head { display:flex; align-items:center; gap:6px; min-width:0; }
.acc-head strong { white-space:nowrap; }
.acc-code {
  font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:.04em;
  padding:1px 7px; border-radius:6px; background:var(--teal-700); color:#fff;
  white-space:nowrap; flex:none;
}
.acc-detail { display:block; font-size:11.5px; color:var(--n-600); margin-top:2px; }
.cc-num {
  font-size:11px; font-weight:640; font-variant-numeric:tabular-nums; white-space:nowrap;
  padding:2px 8px; border-radius:var(--r-full); background:var(--n-100); color:var(--n-600);
  border:1px solid var(--n-150);
}

/* ---------- Clinical safety flags ---------- */
.chip-acd {
  display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; white-space:nowrap;
  background:#f7ecf6; color:#753a70; border:1px solid #dcb4d8;
}
.chip-acd svg { flex:none; }
/* NFR/NFI uses the purple convention rather than red, so it never competes
   with the roster conflict signal while still reading as critical. */
.chip-acd.critical { background:#6b2f66; color:#fff; border-color:#59264f; font-weight:750; letter-spacing:.02em; }
.chip-acd.pending  { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-br); }

.badge-btn { cursor:pointer; transition: filter .15s var(--ease), box-shadow .15s var(--ease); }
.badge-btn:hover { filter:brightness(.96); box-shadow:var(--sh-xs); }
.badge-btn svg { opacity:.5; margin-left:1px; }

.rfactor { display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--n-150); }
.rfactor:last-child { border-bottom:none; }
.rf-w {
  width:30px; flex:none; text-align:center; border-radius:7px; padding:3px 0;
  font-size:11px; font-weight:700; background:var(--n-100); color:var(--n-600);
}
.rf-w.w3 { background:var(--red-50); color:var(--red-700); }
.rf-w.w2 { background:var(--amber-50); color:var(--amber-700); }
.rf-label { font-size:13px; font-weight:560; color:var(--n-900); }
.rf-src   { font-size:11px; color:var(--text-mute); margin-top:1px; }

/* ---------- Client cards & tab alert dots ---------- */
.client-card { text-align:left; padding:0;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.client-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--n-300); }
.client-card.flagged { border-color: var(--amber-300); background: linear-gradient(180deg,#fffdf7,#fff); }
.client-card.flagged:hover { border-color: var(--amber-400); }
.tabs button .tab-alert {
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red-600);
  vertical-align:middle; margin-left:3px; box-shadow:0 0 0 2px var(--red-100);
}

/* ============================================================
   Onboarding checklist
   ============================================================ */
.steps { display:flex; flex-direction:column; }
.step {
  display:flex; gap:13px; align-items:flex-start; padding:12px 0;
  border-bottom:1px dashed var(--n-150); position:relative;
}
.step:last-child { border-bottom:none; }
.step-dot {
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; background:var(--n-100); color:var(--n-500);
  border:1px solid var(--n-200);
}
.step.done .step-dot    { background:var(--success-bg); color:#0b6b3c; border-color:var(--success-br); }
.step.active .step-dot  { background:var(--amber-100); color:var(--amber-700); border-color:var(--amber-300); }
.step-title  { font-size:13.5px; font-weight:580; color:var(--n-900); }
.step.todo .step-title { color:var(--text-soft); }
.step-detail { font-size:12px; color:var(--text-soft); line-height:1.5; margin-top:2px; }

/* ============================================================
   Assessment sections
   ============================================================ */
.asec {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 11px; border-radius:9px; border:1px solid transparent;
  transition: background .14s var(--ease), border-color .14s var(--ease);
  font-size:13px; color:var(--n-800);
}
.asec:hover { background:var(--n-50); border-color:var(--n-200); }
.asec.open  { background:var(--teal-50); border-color:var(--teal-200); }
.asec-n {
  width:24px; height:24px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:var(--n-100); color:var(--n-600); font-size:11px; font-weight:700;
}
.asec.open .asec-n { background:var(--teal-600); color:#fff; }
.asec-body {
  font-size:13px; line-height:1.65; color:var(--n-700);
  padding:12px 14px 14px 46px; background:var(--teal-50);
  border:1px solid var(--teal-200); border-top:none;
  border-radius:0 0 9px 9px; margin:-3px 0 6px;
}

/* ============================================================
   Stacked budget bar
   ============================================================ */
.stack-bar {
  display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--n-200);
}
.stack-bar > span { display:block; height:100%; transition: width .6s var(--ease); }
.stack-bar .sb-used      { background:var(--teal-600); }
.stack-bar .sb-committed { background:var(--amber-400); }

/* ============================================================
   ISBAR handover
   ============================================================ */
.hmsg {
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--n-300);
  border-radius:var(--r-md); padding:13px 15px; box-shadow:var(--sh-xs);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.hmsg:hover { box-shadow: var(--sh-sm); }
.hmsg.action   { border-left-color: var(--amber-500); }
.hmsg.clinical { border-left-color: var(--red-600); background: linear-gradient(180deg,#fffbfb,#fff); }
.hmsg.resolved { opacity:.66; }
.hmsg-text { font-size:13.5px; line-height:1.6; color:var(--n-800); margin-top:8px; }
.hmsg-client {
  display:inline-flex; align-items:center; gap:7px; padding:4px 9px 4px 4px; border-radius:var(--r-full);
  background:var(--n-50); border:1px solid var(--n-150); margin-top:4px;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.hmsg-client:hover { background:var(--teal-50); border-color:var(--teal-200); }

.isbar {
  margin-top:10px; border:1px solid var(--n-200); border-radius:var(--r-md);
  background:var(--n-25); overflow:hidden;
}
.isbar-row { display:flex; gap:12px; padding:11px 13px; border-bottom:1px solid var(--n-150); align-items:flex-start; }
.isbar-row:last-child { border-bottom:none; }
.isbar-key {
  width:24px; height:24px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:var(--teal-700); color:#fff; font-size:12px; font-weight:800;
}
.isbar-label { font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:680; color:var(--text-mute); }
.isbar-val   { font-size:13px; line-height:1.6; color:var(--n-800); margin-top:2px; }
.isbar-form  { border:1px solid var(--red-200); background:var(--red-50); border-radius:var(--r-md); padding:13px 14px; }
.isbar-form .m-field { border-bottom-color: var(--red-200); }
.isbar-form .m-field:last-child { border-bottom:none; }

/* ============================================================
   Prototype demo nav — deliberately NOT product UI
   ============================================================ */
.proto-fab {
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; align-items:center; gap:9px; padding:11px 17px 11px 14px; border-radius:var(--r-full);
  background: linear-gradient(135deg, #2b2350, #3b2f6b); color:#fff; font-size:13px; font-weight:600;
  box-shadow: 0 12px 30px -8px rgba(43,35,80,.6), 0 3px 8px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.16);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.proto-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(43,35,80,.66); }
/* keep the demo button clear of drawer and modal footers */
body.overlay-open .proto-fab { opacity:0; transform: translateY(10px); pointer-events:none; }
.proto-fab .fab-dot { width:8px; height:8px; border-radius:50%; background:#ffd166; box-shadow:0 0 0 3px rgba(255,209,102,.25); }
.proto-fab svg { width:15px; height:15px; }

.proto-scrim { position:fixed; inset:0; background:rgba(16,12,32,.5); backdrop-filter:blur(3px); z-index:81; opacity:0; animation:fadeIn .18s var(--ease) forwards; }
.proto-panel {
  position:fixed; right:20px; bottom:20px; z-index:82; width:min(390px, calc(100vw - 40px));
  max-height: min(78vh, 720px); overflow-y:auto;
  background:#221c40; color:#e6e2f5; border-radius:var(--r-xl); border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 70px -20px rgba(10,6,28,.75); animation: protoIn .3s var(--ease);
}
@keyframes protoIn { from { opacity:0; transform: translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
.proto-panel::-webkit-scrollbar { width:8px; }
.proto-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius:4px; }
.proto-head { padding:16px 18px 13px; border-bottom:1px solid rgba(255,255,255,.11); position:sticky; top:0; background:#221c40; z-index:2; }
.proto-head .pt { font-size:14px; font-weight:680; color:#fff; letter-spacing:-.01em; }
.proto-head .ps { font-size:11.5px; color:#a79ed6; margin-top:2px; line-height:1.45; }
.proto-sec { padding:12px 12px 4px; }
.proto-sec-label { font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:#8d84c4; font-weight:750; padding:5px 8px 7px; }
.proto-link {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 10px; border-radius:10px;
  color:#ddd8f2; font-size:13px; font-weight:520; transition: background .15s var(--ease), color .15s var(--ease);
}
.proto-link:hover { background: rgba(255,255,255,.09); color:#fff; }
.proto-link.on { background: rgba(255,209,102,.15); color:#ffd98a; }
.proto-num {
  width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.1); display:grid; place-items:center;
  font-size:10.5px; font-weight:700; color:#b8afe6; flex:none;
}
.proto-link.on .proto-num { background: rgba(255,209,102,.22); color:#ffd98a; }
.proto-link .pl-sub { font-size:10.5px; color:#9a91cf; font-weight:450; }
.proto-foot { padding:11px 18px 15px; border-top:1px solid rgba(255,255,255,.11); font-size:11px; color:#8d84c4; line-height:1.5; }
.proto-banner {
  background: linear-gradient(90deg, #2b2350, #3b2f6b); color:#e6e2f5; font-size:11.5px; font-weight:520;
  padding:6px 16px; display:flex; align-items:center; gap:9px; justify-content:center; letter-spacing:.01em;
}
.proto-banner .fab-dot { width:7px; height:7px; border-radius:50%; background:#ffd166; }
.proto-banner button { color:#ffd98a; font-weight:640; font-size:11.5px; text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   Login / role picker
   ============================================================ */
.login-wrap {
  min-height:100vh; display:grid; grid-template-columns: 1fr 1fr;
  background: var(--n-50);
}
.login-art {
  background: linear-gradient(165deg, var(--teal-800), var(--teal-950) 70%);
  padding:56px 52px; display:flex; flex-direction:column; justify-content:space-between; color:#cfe6e2;
  position:relative; overflow:hidden;
}
.login-art::before {
  content:''; position:absolute; width:520px; height:520px; border-radius:50%; right:-190px; top:-140px;
  background: radial-gradient(circle, rgba(45,212,191,.22), transparent 68%);
}
.login-art::after {
  content:''; position:absolute; width:400px; height:400px; border-radius:50%; left:-150px; bottom:-160px;
  background: radial-gradient(circle, rgba(251,191,36,.13), transparent 68%);
}
.login-art > * { position:relative; z-index:1; }
.login-art h2 { color:#fff; font-size:31px; line-height:1.25; letter-spacing:-.03em; max-width:15ch; }
.login-art .la-sub { color:#8fc4bc; font-size:14.5px; margin-top:16px; max-width:38ch; line-height:1.6; }
.la-feature { display:flex; gap:12px; align-items:flex-start; }
.la-feature .lf-ico { width:32px; height:32px; border-radius:10px; background:rgba(45,212,191,.16); display:grid; place-items:center; color:var(--teal-300); flex:none; }
.la-feature .lf-ico svg { width:16px; height:16px; }
.la-feature .lf-t { color:#fff; font-size:13.5px; font-weight:600; }
.la-feature .lf-d { color:#7fb5ad; font-size:12.5px; line-height:1.5; }

.login-panel { display:grid; place-items:center; padding:48px 40px; }
/* the panel's own logo only shows once the branded left column is hidden */
[data-mobile-brand] { display:none; }
.login-inner { width:min(430px, 100%); }
.role-pick {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 16px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; box-shadow: var(--sh-xs);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.role-pick:hover { border-color: var(--teal-400); box-shadow: 0 6px 18px -6px rgba(15,118,110,.28); transform: translateY(-2px); }
.role-pick .rp-name { font-size:14px; font-weight:640; color:var(--n-900); }
.role-pick .rp-desc { font-size:12px; color:var(--text-soft); line-height:1.45; margin-top:1px; }
.role-pick .rp-go { color:var(--n-300); transition: color .18s var(--ease), transform .18s var(--ease); }
.role-pick:hover .rp-go { color: var(--teal-600); transform: translateX(3px); }

/* ============================================================
   Mobile companion
   ============================================================ */
.mobile-stage {
  min-height:100vh; background:
    radial-gradient(1000px 520px at 50% -10%, #1a4b47 0%, transparent 60%),
    linear-gradient(170deg, #0f2b2a, #0a1a1e);
  display:flex; align-items:center; justify-content:center; padding:36px 20px 44px; gap:40px;
}
.phone {
  width:392px; flex:none; background:#fff; border-radius:42px; overflow:hidden; position:relative;
  box-shadow: 0 44px 90px -24px rgba(0,0,0,.62), 0 0 0 11px #171f22, 0 0 0 12.5px #2c383c;
  height: 812px; display:flex; flex-direction:column;
}
.phone-notch {
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:27px;
  background:#171f22; border-radius:0 0 17px 17px; z-index:20;
}
.m-status {
  height:42px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 24px 5px; font-size:11.5px; font-weight:670; color:var(--n-900); background:#fff; z-index:15;
}
.m-status .mr { display:flex; gap:5px; align-items:center; }
.m-status svg { width:15px; height:15px; }
.phone-body { flex:1; overflow-y:auto; background: var(--n-50); scrollbar-width:thin; }
.phone-body::-webkit-scrollbar { width:0; }
.phone-hint { color:#7fb5ad; font-size:12.5px; max-width:250px; line-height:1.65; }
.phone-hint h3 { color:#fff; font-size:16px; margin-bottom:9px; }
.phone-hint .ph-item { display:flex; gap:9px; align-items:flex-start; margin-top:12px; }
.phone-hint .ph-dot { width:6px; height:6px; border-radius:50%; background: var(--teal-400); margin-top:6px; flex:none; }

.m-head {
  background: linear-gradient(160deg, var(--teal-700), var(--teal-800));
  color:#fff; padding:14px 20px 20px; position:relative;
}
.m-head.plain { background: #fff; color: var(--n-900); border-bottom:1px solid var(--border); padding-bottom:14px; }
.m-head .m-title { font-size:20px; font-weight:680; letter-spacing:-.025em; color:inherit; }
.m-head .m-sub { font-size:12.5px; opacity:.82; margin-top:2px; }
.m-back { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:560; color:inherit; opacity:.9; margin-bottom:9px; }
.m-back:hover { opacity:1; }
.m-back svg { width:16px; height:16px; }

.m-body { padding:16px; }
.m-card {
  background:#fff; border-radius:var(--r-lg); border:1px solid var(--border); box-shadow: var(--sh-sm);
  overflow:hidden;
}
.m-visit {
  display:flex; gap:12px; padding:14px; width:100%; text-align:left; align-items:flex-start;
  transition: background .14s var(--ease), transform .12s var(--ease);
}
.m-visit:active { transform: scale(.985); background: var(--n-50); }
.m-visit + .m-visit { border-top:1px solid var(--n-100); }
.m-time {
  flex:none; width:56px; text-align:center; padding-top:2px;
}
.m-time .mt-h { font-size:14.5px; font-weight:700; color:var(--n-900); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.m-time .mt-m { font-size:10.5px; color:var(--text-mute); font-weight:560; }
.m-visit .mv-name { font-size:14.5px; font-weight:620; color:var(--n-900); letter-spacing:-.01em; }
.m-visit .mv-cat { font-size:12.5px; color:var(--text-soft); margin-top:1px; }
.m-visit .mv-addr { font-size:11.5px; color:var(--text-mute); margin-top:4px; display:flex; align-items:center; gap:4px; }
.m-visit .mv-addr svg { width:12px; height:12px; flex:none; }
.m-visit.done { opacity:.62; }
.m-visit-bar { width:3px; border-radius:2px; background: var(--h-dot); align-self:stretch; flex:none; }

.m-btn {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:15px 20px; border-radius:14px; font-size:15.5px; font-weight:640; letter-spacing:-.01em;
  transition: transform .12s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.m-btn:active { transform: scale(.975); }
.m-btn svg { width:19px; height:19px; }
.m-btn-primary { background: var(--teal-700); color:#fff; box-shadow: 0 5px 14px -4px rgba(15,118,110,.5); }
.m-btn-outline { background:#fff; color:var(--n-700); border:1px solid var(--n-200); box-shadow: var(--sh-xs); }
.m-btn-danger {
  background: var(--red-600); color:#fff; box-shadow: 0 6px 18px -4px rgba(220,38,38,.5);
}
.m-btn-danger:active { background: var(--red-700); }

.m-sticky {
  position:sticky; bottom:0; background: linear-gradient(180deg, rgba(248,250,251,0), var(--n-50) 30%);
  padding:22px 16px 16px; margin-top:auto;
}
.m-tabbar {
  display:flex; background:#fff; border-top:1px solid var(--border); flex:none;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom, 8px));
}
.m-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 4px;
  font-size:10px; font-weight:600; color:var(--text-mute); border-radius:10px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.m-tab svg { width:20px; height:20px; }
.m-tab.on { color: var(--teal-700); }
.m-tab:active { background: var(--n-100); }
.m-tab .tab-flag { position:relative; }
.m-tab .tab-flag::after {
  content:''; position:absolute; top:-1px; right:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--red-600); border:1.5px solid #fff;
}

.m-field { padding:14px 0; border-bottom:1px solid var(--n-100); }
.m-field:last-child { border-bottom:none; }
.m-field label { display:block; font-size:12.5px; font-weight:620; color:var(--n-700); margin-bottom:7px; }
.m-chip-row { display:flex; gap:7px; flex-wrap:wrap; }
.m-chip {
  padding:9px 14px; border-radius:11px; border:1px solid var(--n-200); background:#fff; font-size:13px;
  font-weight:550; color:var(--n-600); transition: all .15s var(--ease);
}
.m-chip:active { transform: scale(.96); }
.m-chip.on { background: var(--teal-700); border-color: var(--teal-700); color:#fff; font-weight:600; box-shadow: 0 3px 9px -2px rgba(15,118,110,.4); }
.m-chip.danger.on { background: var(--red-600); border-color: var(--red-600); box-shadow: 0 3px 9px -2px rgba(220,38,38,.4); }

.m-banner {
  padding:12px 14px; border-radius:var(--r-md); display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.5;
}
.m-banner svg { width:16px; height:16px; flex:none; margin-top:1px; }

.m-avail { display:grid; grid-template-columns: 62px repeat(3, minmax(0,1fr)); gap:7px; }
.m-avail-h { font-size:10.5px; font-weight:660; color:var(--text-soft); text-align:center; padding-bottom:2px; }
.m-avail-day { display:flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--n-800); }
.m-avail-cell {
  height:44px; border-radius:11px; display:grid; place-items:center; font-size:11px; font-weight:640;
  border:1px solid; transition: all .14s var(--ease);
}
.m-avail-cell:active { transform: scale(.94); }

/* ============================================================
   Responsive
   ============================================================ */
.mobile-only { display:none; }

@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: 1fr; }
  .mobile-stage { flex-direction:column; padding:26px 16px; }
  .phone-hint { max-width:392px; text-align:center; }
  .phone-hint .ph-item { text-align:left; }
}
@media (max-width: 1024px) {
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-wrap { grid-template-columns: 1fr; }
  .login-art { display:none; }
  [data-mobile-brand] { display:flex; }
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; width:270px; transform: translateX(-100%);
    transition: transform .3s var(--ease); height:100vh;
  }
  .sidebar.open { transform:none; box-shadow: var(--sh-xl); }
  .sidebar-scrim { position:fixed; inset:0; background:rgba(20,31,39,.4); z-index:39; animation:fadeIn .2s var(--ease) forwards; }
  .mobile-only { display:inline-flex; }
  .topbar { padding:0 16px; }
  .content { padding:20px 16px 76px; }
  .search { width:180px; }
  .note-field { grid-template-columns:1fr; gap:7px; }
  .note-field .nf-label { padding-top:0; }
  .dl { grid-template-columns: 130px 1fr; }
}
@media (max-width: 760px) {
  /* Hover tooltips are unreachable on touch, and a centred one on a right-hand
     chip widens the document. Drop them below tablet - the same detail is always
     available as visible text on the record. */
  .tip::after { display:none; }
  /* trailing chips wrap below the row rather than pushing it past the viewport */
  .lrow { flex-wrap:wrap; }
  h1 { font-size:20px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .search { display:none; }
  .topbar { height:58px; }
  .dl { grid-template-columns:1fr; gap:0; }
  .dl dt { padding-bottom:0; }
  .dl dd { padding-top:2px; }
  .dl-line { border-bottom:none; }
  .stat-value { font-size:26px; }
  .proto-fab { right:14px; bottom:14px; padding:10px 15px 10px 12px; font-size:12.5px; }
  .proto-panel { right:10px; left:10px; bottom:10px; width:auto; }
  .content { padding:16px 14px 80px; }
  .card-body { padding:15px; }
  .drawer { width:100vw; }
  .toolbar { gap:8px; }
}
@media (max-width: 560px) {
  /* Shrink the demo button to an icon and lift it clear of the mobile tab bar —
     it must never cover the safety-critical Report tab. */
  .proto-fab { bottom:78px; right:12px; padding:12px; border-radius:50%; gap:0; }
  .proto-fab span:not(.fab-dot) { display:none; }
  .proto-fab .fab-dot { position:absolute; top:4px; right:4px; width:7px; height:7px; }

  .mobile-stage { padding:0; background:#fff; align-items:stretch; }
  .phone {
    width:100%; height:100vh; height:100dvh; border-radius:0; box-shadow:none;
  }
  .phone-notch { display:none; }
  .m-status { display:none; }
  .phone-hint { display:none; }
}

@media print {
  .sidebar, .topbar, .proto-fab, .proto-banner, .toolbar { display:none !important; }
  .shell { grid-template-columns: 1fr; }
  .content { padding:0; }
  .roster { min-width:0; }
  .card { box-shadow:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   Leave requests & staff policies
   ============================================================ */
.bell-btn { position:relative; }
.bell-count {
  position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-full); background:var(--red-600); color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px #fff;
}

.r-cell.leave {
  background: repeating-linear-gradient(45deg, var(--amber-50), var(--amber-50) 5px, #fff 5px, #fff 10px);
}
.leave-cell { margin:auto; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; padding:4px 2px; }
.leave-cell .lc-t { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:680; color:var(--amber-700); }
.leave-cell .lc-r {
  font-size:10.5px; color:var(--n-600); line-height:1.3; max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.leave-tag {
  display:inline-flex; align-items:center; gap:4px; margin-bottom:4px;
  font-size:10.5px; font-weight:680; color:var(--amber-700);
}

.check-row { display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:13.5px; line-height:1.5; color:var(--n-800); }
.check-row input[type="checkbox"] { width:19px; height:19px; margin:1px 0 0; flex:none; accent-color:var(--teal-700); }

.pdf-page {
  position:relative; background:#fff; border:1px solid var(--n-150); border-radius:var(--r-sm);
  box-shadow:var(--sh-xs); padding:16px 18px; font-size:12.5px; line-height:1.6; color:var(--n-700);
}
.pdf-fade { position:absolute; left:0; right:0; bottom:0; height:46px; background:linear-gradient(rgba(255,255,255,0), #fff); }

.pfield-row { display:grid; grid-template-columns: minmax(0,1fr) 150px auto auto; gap:8px; align-items:center; }
@media (max-width: 640px) {
  .pfield-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Intake & admission forms, risk tools, PDF pages, COSA chart
   ============================================================ */
.form-layout { display:grid; grid-template-columns: 230px minmax(0,1fr); gap:18px; align-items:start; }
.form-nav { position:sticky; top:14px; padding-bottom:8px; max-height:calc(100vh - 40px); overflow-y:auto; }
.fn-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 14px; font-size:12.5px; color:var(--n-700); }
.fn-item:hover { background:var(--n-50); color:var(--teal-800); }
.fn-n {
  display:inline-flex; align-items:center; justify-content:center; flex:none; width:20px; height:20px; border-radius:6px;
  background:var(--teal-50); color:var(--teal-800); font-size:10.5px; font-weight:700;
}
.fsec { scroll-margin-top:14px; }
@media (max-width: 900px) {
  .form-layout { grid-template-columns:1fr; }
  .form-nav { display:none; }
}

.fq { display:flex; flex-direction:column; gap:7px; min-width:0; }
.fq-label { font-size:12.5px; font-weight:600; color:var(--n-800); line-height:1.4; }
.req { color:var(--red-600); }
.fq-hint { font-size:11.5px; color:var(--text-mute); line-height:1.45; }
.fq-detail, .fq-other { margin-top:2px; }
.fq-detail { min-height:58px; }
.f-inline { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:12px 14px; }

.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { position:relative; cursor:pointer; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip span {
  display:inline-flex; align-items:center; padding:6px 11px; border-radius:var(--r-full);
  border:1px solid var(--n-200); background:#fff; font-size:12.5px; color:var(--n-700); line-height:1.3;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover span { border-color:var(--teal-300); }
.chip input:checked + span { background:var(--teal-700); border-color:var(--teal-700); color:#fff; font-weight:600; }
.chip input:focus-visible + span { outline:2px solid var(--teal-400); outline-offset:2px; }

.statements { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.statements li { display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--n-700); }
.statements li svg { flex:none; margin-top:3px; color:var(--teal-700); }

.ftable { width:100%; border-collapse:collapse; font-size:12.5px; }
.ftable th { text-align:left; font-weight:600; color:var(--n-600); background:var(--n-50); padding:7px 8px; border:1px solid var(--n-150); font-size:11.5px; }
.ftable td { border:1px solid var(--n-150); padding:4px; vertical-align:top; }
.ftable td .input { border:none; box-shadow:none; padding:6px; min-width:90px; }
.ftable .ft-rowlabel { background:#fff; color:var(--n-800); font-weight:600; min-width:150px; }
.ftable.matrix td { padding:8px; }
.ftable.matrix input[type="radio"] { width:17px; height:17px; accent-color:var(--teal-700); }

.fv { display:flex; flex-direction:column; gap:4px; min-width:0; }
.fv-label { font-size:11.5px; color:var(--text-mute); font-weight:600; }
.fv-val { font-size:13.5px; color:var(--n-900); line-height:1.5; }

.sig-box { border:1px dashed var(--n-300); border-radius:var(--r-md); padding:8px 10px; background:var(--n-25); max-width:390px; }
.sig-canvas { width:100%; height:110px; background:#fff; border-radius:8px; touch-action:none; cursor:crosshair; display:block; }
.sig-svg { width:180px; height:50px; display:block; }
.sig-img { max-width:220px; height:60px; object-fit:contain; display:block; }

.bodymap { width:100%; max-width:300px; background:#fff; border:1px solid var(--n-150); border-radius:var(--r-md); display:block; }
.bodymap.editable { cursor:crosshair; }
.bodymap .bm-fig { fill:var(--n-50); stroke:var(--n-400); stroke-width:1.3; }
.bodymap .bm-t { font-size:10px; fill:var(--n-500); text-anchor:middle; }
.bodymap .bm-mark { fill:rgba(220,38,38,.75); stroke:#fff; stroke-width:1.5; cursor:pointer; }

.tool-link { flex-direction:row !important; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--teal-100); background:var(--teal-50); border-radius:var(--r-md); color:var(--teal-800); }
.tool-score {
  flex:none; min-width:54px; height:40px; padding:0 8px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:750; background:var(--n-100); color:var(--n-600);
}
.tool-score.high { background:var(--red-50); color:var(--red-700); }
.tool-score.medium { background:var(--amber-50); color:var(--amber-700); }
.tool-score.low { background:var(--success-bg); color:#0b6b3c; }
.score-opts { display:flex; flex-direction:column; gap:6px; }
.score-opt { cursor:pointer; position:relative; }
.score-opt input { position:absolute; opacity:0; pointer-events:none; }
.score-opt > span { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--n-200); border-radius:var(--r-md); font-size:13px; background:#fff; }
.score-opt:hover > span { border-color:var(--teal-300); }
.score-opt input:checked + span { border-color:var(--teal-600); background:var(--teal-50); box-shadow:0 0 0 1px var(--teal-600) inset; }
.so-pts { flex:none; min-width:26px; height:24px; border-radius:7px; background:var(--n-100); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.score-opt input:checked + span .so-pts { background:var(--teal-700); color:#fff; }
.tool-total { font-size:52px; font-weight:780; letter-spacing:-.04em; color:var(--n-900); margin:4px 0 6px; }

.scan-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:12px; }
.scan-page {
  aspect-ratio: 210 / 297; border:1px solid var(--n-200); border-radius:6px; background:#fafaf7; position:relative;
  box-shadow:var(--sh-xs); display:flex; align-items:flex-end; justify-content:center; padding:8px; font-size:10.5px; color:var(--n-500);
}
.scan-page .scan-lines { position:absolute; inset:14px 12px 30px; background: repeating-linear-gradient(#fafaf7 0 9px, #dfe3e6 9px 10px); opacity:.8; }
.scan-page.more { align-items:center; font-weight:650; color:var(--n-600); }

/* ---- PDF overlay ---- */
.pdf-overlay { position:fixed; inset:0; z-index:90; background:#2b3236; overflow-y:auto; }
.pdf-toolbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 20px; background:#1d2427; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.pdf-pages { padding:26px 16px 60px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.pdf-sheet {
  width:100%; max-width:794px; min-height:1060px; background:#fff; padding:40px 46px 34px; position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:12px; font-size:12px; color:#1b1f22;
}
.pdf-head { display:flex; align-items:center; gap:16px; padding-bottom:10px; border-bottom:2px solid #1b1f22; }
.pdf-logo { width:62px; height:62px; flex:none; background:#38b2ac; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:9.5px; font-style:italic; font-weight:600; }
.pdf-title { font-size:19px; font-weight:750; }
.pdf-client { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid #9aa3a8; font-size:12px; }
.pdf-sec { border:1px solid #9aa3a8; padding:10px 12px; display:flex; flex-direction:column; gap:8px; break-inside:avoid; }
.pdf-sec-h { margin:-10px -12px 2px; padding:6px 12px; background:#eef0f1; border-bottom:1px solid #9aa3a8; font-weight:750; text-align:center; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
.pdf-sec .fv-label { color:#45505a; font-size:10.5px; }
.pdf-sec .fv-val { font-size:12px; }
.pdf-sec .f-inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px 12px; }
.pdf-sec .statements li { font-size:11.5px; }
.pdf-sec .tag { font-size:10.5px; }
.pdf-foot { margin-top:auto; padding-top:10px; display:flex; justify-content:space-between; font-size:10px; color:#45505a; border-top:1px solid #c7ccd0; }
.pdf-sheet .cosa-grid { font-size:9.5px; }

@media print {
  body.printing-pdf > *:not(.pdf-overlay) { display:none !important; }
  body.printing-pdf .pdf-overlay { position:static; background:#fff; overflow:visible; }
  body.printing-pdf .pdf-toolbar { display:none; }
  body.printing-pdf .pdf-pages { padding:0; gap:0; }
  body.printing-pdf .pdf-sheet { box-shadow:none; max-width:none; min-height:0; height:auto; page-break-after:always; padding:14mm 12mm; }
  @page { size:A4; margin:0; }
}

/* ---- COSA ---- */
.cosa-grid { border-collapse:collapse; font-size:11.5px; min-width:100%; }
.cosa-grid th, .cosa-grid td { border:1px solid #c9d1d6; padding:3px 5px; text-align:center; white-space:nowrap; }
.cosa-grid td { min-width:36px; height:22px; }
.cosa-grid .cg-meta th { background:#fff; font-weight:600; color:var(--n-700); font-size:10.5px; line-height:1.15; }
.cosa-grid .cg-r { text-align:right; }
.cosa-grid .cg-sym { background:#fff; width:30px; padding:4px 2px; }
.cosa-grid .cg-sym span { writing-mode:vertical-rl; transform:rotate(180deg); font-weight:700; font-size:10.5px; white-space:normal; max-height:120px; display:inline-block; }
.cosa-grid .cg-lvl { text-align:left; font-weight:500; min-width:150px; white-space:normal; font-size:10.5px; color:#9a4b00; }
.cosa-grid tr.cg-hi th.cg-lvl, .cosa-grid tr.cg-hi td { background:#ffc83d; }
.cosa-grid tr.cg-mid th.cg-lvl, .cosa-grid tr.cg-mid td { background:#bfe9f3; }
.cosa-grid tr.cg-mid th.cg-lvl { color:#0b5d70; }
.cosa-grid tr.cg-lo th.cg-lvl { color:var(--n-600); background:#fff; }
.cosa-grid tr.cg-act th, .cosa-grid tr.cg-act td { background:#fff; color:var(--n-600); font-size:10.5px; }
.cosa-grid tr.cg-bowels th, .cosa-grid tr.cg-bowels td { background:#e7e9eb; }
.cg-mark { font-weight:800; color:#1b1f22; }
.cg-esc { color:var(--red-600); margin-top:2px; }
.cosa-q { padding:10px 0; border-bottom:1px solid var(--n-100); }
.cosa-q:last-of-type { border-bottom:none; }
.chip.lvl-1 input:checked + span { background:#0e7490; border-color:#0e7490; }
.chip.lvl-2 input:checked + span { background:#d97706; border-color:#d97706; }
.chip.lvl-3 input:checked + span { background:var(--red-600); border-color:var(--red-600); }

/* Spacing utilities the screens use; the production stylesheet already has them. */
.gap1{gap:1px}.gap5{gap:5px}.gap7{gap:7px}.gap9{gap:9px}.gap11{gap:11px}.gap14{gap:14px}.gap18{gap:18px}
.fsec .card-body{gap:18px}
.fq-other.choice-other{display:none}
.fq:has(input[value="__other"]:checked) .fq-other.choice-other{display:block}

.esc-tier{padding:9px 11px;border-radius:var(--r-md);border:1px solid;display:flex;flex-direction:column;gap:2px;line-height:1.45}
.esc-tier.mod{background:var(--amber-50);border-color:var(--amber-200);color:var(--amber-700)}
.esc-tier.sev{background:var(--red-50);border-color:var(--red-200);color:var(--red-800)}