/* ============================================================
   OmniEHR clinical, app shell
   Brand system applied to a working clinical UI: ink sidebar,
   sand workspace, calm density.
   ============================================================ */
:root {
  --teal: #1E6F6A; --teal-deep: #155350;
  --seafoam: #6FBFB0; --mist: #9CC6DC; --sage: #B9D4BC;
  --coral: #E89B7A; --sand: #F6F1E9; --sand-2: #EFE8DB;
  --ink: #16323B; --ink-2: #1E3F4A;
  --muted: #4E6A76; --line: #E4DBC9; --card: #FCFAF5;
  --font: "Manrope", ui-sans-serif, sans-serif;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(22,50,59,.05), 0 10px 24px -14px rgba(22,50,59,.18);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--sand); line-height: 1.5; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
.text-link { color: var(--teal); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--seafoam); }
.text-link:hover { border-bottom-color: var(--coral); }
.muted { color: var(--muted); }

.btn {
  display: inline-block; background: var(--teal); color: #fff;
  font: inherit; font-weight: 800; font-size: .9rem;
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--teal);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--teal); }
.btn-ghost:hover { background: rgba(30,111,106,.08); }
.btn-small { padding: 7px 14px; font-size: .82rem; }
.btn-wide { width: 100%; text-align: center; padding: 13px; }

/* ---------- shell layout ---------- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.main { display: flex; flex-direction: column; min-width: 0; }
.content { padding: 26px 30px 40px; flex: 1; }

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--ink); color: #C9D7DC;
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 800; font-size: 1.15rem; padding: 4px 8px 14px; }
.side-brand em { font-style: normal; color: var(--seafoam); }
.side-mark { width: 30px; height: 30px; }
.side-nav, .side-modules { display: grid; gap: 2px; }
.side-nav a, .side-modules a {
  display: flex; align-items: center; gap: 9px;
  color: #C9D7DC; text-decoration: none; font-weight: 800; font-size: .88rem;
  padding: 9px 10px; border-radius: 8px;
}
.side-nav a:hover, .side-modules a:hover { background: var(--ink-2); color: #fff; }
.side-nav a.active, .side-modules a.active { background: var(--teal); color: #fff; }
.side-label { font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #7E97A1; padding: 16px 10px 6px; }
.side-modules { font-size: .84rem; }
.side-modules a { padding: 6px 10px; font-weight: 500; }
.mod-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.mod-dot.r1 { background: #51626B; } .mod-dot.r2 { background: #3E5660; } .mod-dot.r3 { background: #344A55; }
.mod-dot.built { background: var(--seafoam); }
.side-foot { margin-top: auto; padding: 14px 10px 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.legend { font-size: .7rem; color: #7E97A1; display: inline-flex; align-items: center; gap: 5px; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: rgba(246,241,233,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0 30px; height: 60px; position: sticky; top: 0; z-index: 30;
}
.top-title { font-weight: 800; font-size: 1.02rem; }
.top-user { margin-left: auto; display: flex; align-items: baseline; gap: 10px; font-size: .85rem; }
.top-name { font-weight: 800; }
.top-roles { color: var(--muted); font-size: .76rem; }
.top-out { color: var(--teal); font-weight: 800; text-decoration: none; }
.side-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; }
.side-toggle svg { width: 20px; height: 20px; stroke: var(--ink); }

.app-foot { padding: 14px 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }

/* ---------- dashboard ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat-num { display: block; font-size: 2rem; font-weight: 800; color: var(--teal); line-height: 1.1; }
.stat-label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }

/* ---------- panels & tables ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 1.02rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tbl tr:last-child td { border-bottom: none; }
.tbl.wide { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tbl.wide th { background: var(--sand-2); }
.pill { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; background: var(--sand-2); border: 1px solid var(--line); }
.pill.r1 { background: rgba(30,111,106,.12); color: var(--teal-deep); border: none; }
.pill.r2 { background: rgba(156,198,220,.3); color: #2C586E; border: none; }
.pill.r3 { background: rgba(232,155,122,.24); color: #9C4F30; border: none; }
.pill.built { background: var(--seafoam); color: var(--ink); border: none; }
.empty { color: var(--muted); font-size: .92rem; padding: 6px 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.banner { border-radius: var(--radius); padding: 13px 16px; margin-bottom: 16px; font-size: .92rem; }
.banner.err { background: #F7E5DD; border: 1px solid #E0BBA8; color: #8A4129; }

/* ---------- toolbar / forms ---------- */
.toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.search { display: flex; gap: 8px; flex: 1; max-width: 480px; }
input, select, textarea {
  font: inherit; font-weight: 500; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 9px;
  padding: 9px 12px; min-height: 40px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,111,106,.13); }
.search input { flex: 1; }
.inline-new summary, .inline-add summary { list-style: none; }
.inline-new summary::-webkit-details-marker, .inline-add summary::-webkit-details-marker { display: none; }
.new-form, .add-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; background: var(--sand-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px;
}
.add-form select, .add-form input { min-width: 180px; }
.vitals-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vitals-form label { display: grid; gap: 4px; font-size: .75rem; font-weight: 800; }
.vitals-form button { grid-column: 1 / -1; justify-self: start; }
.note-form { display: grid; }
.note-form textarea, .note-form input { width: 100%; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }

/* ---------- patient banner / chart ---------- */
.pt-banner {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px; flex-wrap: wrap;
}
.pt-id h1 { font-size: 1.5rem; }
.pt-flags { display: flex; gap: 8px; flex-wrap: wrap; }
.flag { font-size: .78rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: var(--sand-2); border: 1px solid var(--line); }
.flag.warn { background: #F7E5DD; border-color: #E0BBA8; color: #8A4129; }
.flag.ok { background: rgba(111,191,176,.18); border-color: var(--seafoam); color: var(--teal-deep); }
.chart-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-tabs a { font-size: .82rem; font-weight: 800; text-decoration: none; color: var(--muted); padding: 7px 13px; border-radius: 999px; }
.chart-tabs a:hover { background: var(--sand-2); color: var(--teal); }

/* ---------- module pages ---------- */
.module-head { margin-bottom: 18px; }
.module-head h1 { font-size: 1.6rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mod-tag { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-top: 4px; }
.mod-scope { color: var(--muted); margin-top: 10px; max-width: 56em; }

/* ---------- schedule ---------- */
.day-nav { display: flex; align-items: center; gap: 12px; }
.day-label { font-size: 1.05rem; }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--sand); }
.login-card { width: min(400px, calc(100% - 40px)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 40px 34px; text-align: center; box-shadow: var(--shadow); }
.login-mark { width: 72px; height: 72px; margin-bottom: 14px; }
.login-card h1 { font-size: 1.7rem; }
.login-card h1 em { font-style: normal; color: var(--teal); }
.login-card > p { color: var(--muted); margin: 8px 0 24px; }
.login-note { font-size: .8rem; color: var(--muted); margin-top: 18px; }

/* ============================================================
   RESPONSIVE (Bootstrap scale: 576 / 768 / 992 / 1200)
   ≤992: sidebar becomes off-canvas via hamburger; panels 3→1
   ============================================================ */
@media (max-width: 1200px) {
  .panel-grid { grid-template-columns: repeat(2, 1fr); }
  .vitals-form { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; z-index: 60; transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(22,50,59,.35); }
  .side-toggle { display: inline-grid; place-items: center; }
  .panel-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .content { padding: 20px 18px 36px; }
  .topbar { padding: 0 18px; }
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr; }
  .vitals-form { grid-template-columns: repeat(2, 1fr); }
  .pt-banner { align-items: flex-start; flex-direction: column; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
}
@media (max-width: 576px) {
  .vitals-form { grid-template-columns: 1fr; }
  .add-form select, .add-form input { min-width: 0; width: 100%; }
  .top-roles { display: none; }
}

/* ============================================================
   v0.2, layout & symmetry pass
   Bounded content column, 4-up stats, equal-height panels,
   full-width record strip, sidebar scrollbar discipline.
   ============================================================ */

/* bounded, centered workspace, no more unbounded stretch */
.content { max-width: 1280px; margin: 0 auto; width: 100%; }

/* sidebar scrollbar: thin and in-palette, no white track */
.sidebar { scrollbar-width: thin; scrollbar-color: #2C4854 transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #2C4854; border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* 4-up stats with even rhythm */
.stat-row { grid-template-columns: repeat(4, 1fr); }
.stat { display: grid; align-content: center; min-height: 96px; }

/* equal-height panel row: panels stretch, footer links pin to bottom */
.panel-grid.equal { align-items: stretch; }
.panel-grid.equal .panel {
  display: flex; flex-direction: column;
  min-height: 320px; margin-bottom: 0;
}
.panel-grid.equal .tbl, .panel-grid.equal .plain-list { flex: 1; }
.panel-foot-link {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .82rem; font-weight: 800; color: var(--teal); text-decoration: none;
}
.panel-foot-link:hover { color: var(--teal-deep); }

/* lined lists: rows carry the same rhythm as table rows */
.plain-list.lined { gap: 0; }
.plain-list.lined li { padding: 9px 2px; border-bottom: 1px solid var(--line); }
.plain-list.lined li:last-child { border-bottom: none; }
.plain-list .split { display: flex; justify-content: space-between; gap: 10px; }

/* full-width record strip */
.record-strip { margin-top: 16px; }
.small { font-size: .8rem; }
.record-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.record-cell {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  background: var(--sand-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 8px; text-align: center;
}
.record-num { font-size: 1.5rem; font-weight: 800; color: var(--teal); line-height: 1.1; }
.record-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* responsive, same breakpoint contract as everything else */
@media (max-width: 1200px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .record-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .panel-grid.equal .panel { min-height: 0; }
}
@media (max-width: 576px) {
  .stat-row { grid-template-columns: 1fr; }
  .record-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   v0.3, brand presence & palette pass
   The logo's full palette enters the interface: each surface
   carries one segment color; coral stays the human accent.
   ============================================================ */

/* ---------- sidebar brand: bigger, with tagline ---------- */
.side-brand { padding: 8px 8px 18px; border-bottom: 1px solid #24414C; margin-bottom: 12px; }
/* full logo lockups (replace split icon+text) */
.side-logo { display: block; width: 208px; max-width: 100%; height: auto; }
.top-logo { height: 40px; width: auto; display: block; }
.login-logo { display: block; width: 270px; max-width: 80%; height: auto; margin: 0 auto 18px; }
.side-mark { width: 44px; height: 44px; flex: none; }
.side-brand-text { display: block; line-height: 1.1; font-size: 1.3rem; white-space: nowrap; }
.side-brand-text small {
  display: block; white-space: normal; max-width: 118px;
  font-size: .5rem; font-weight: 800; letter-spacing: .16em; line-height: 1.6;
  color: #7E97A1; margin-top: 5px;
}

/* ---------- topbar: mobile brand, env chip, avatar ---------- */
.top-brand { display: none; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.top-brand svg { width: 28px; height: 28px; }
.top-brand em { font-style: normal; color: var(--teal); }
.env-chip {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #9C4F30; background: rgba(232,155,122,.18);
  border: 1px solid rgba(232,155,122,.45);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.top-user { gap: 12px; align-items: center; }
.top-id { display: grid; line-height: 1.2; text-align: right; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: inline-grid; place-items: center;
  font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  flex: none; box-shadow: 0 0 0 2.5px var(--sand), 0 0 0 4px var(--seafoam);
}

/* ---------- stat cards: per-card logo accent + icon ---------- */
.stat {
  position: relative; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-content: center; align-items: center;
  border-top: 3px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.stat-icon svg { width: 24px; height: 24px; }
.stat .stat-num { font-size: 1.9rem; }
.a-teal    { border-top-color: var(--teal); }
.a-teal    .stat-icon { background: rgba(30,111,106,.12); }   .a-teal .stat-icon svg { stroke: var(--teal); }
.a-teal    .stat-num { color: var(--teal); }
.a-seafoam { border-top-color: var(--seafoam); }
.a-seafoam .stat-icon { background: rgba(111,191,176,.18); }  .a-seafoam .stat-icon svg { stroke: #3E8F81; }
.a-seafoam .stat-num { color: #3E8F81; }
.a-mist    { border-top-color: var(--mist); }
.a-mist    .stat-icon { background: rgba(156,198,220,.22); }  .a-mist .stat-icon svg { stroke: #4179A0; }
.a-mist    .stat-num { color: #4179A0; }
.a-coral   { border-top-color: var(--coral); }
.a-coral   .stat-icon { background: rgba(232,155,122,.18); }  .a-coral .stat-icon svg { stroke: #C06A45; }
.a-coral   .stat-num { color: #C06A45; }

/* ---------- panel head accent dots ---------- */
.head-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.d-seafoam { background: var(--seafoam); }
.d-mist { background: var(--mist); }
.d-sage { background: var(--sage); }
.d-coral { background: var(--coral); }

/* ---------- record strip: colored counts on card cells ---------- */
.record-cell { background: var(--card); border-top: 3px solid var(--line); transition: transform .15s ease, box-shadow .15s ease; }
.record-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.c-teal    { border-top-color: var(--teal); }    .c-teal .record-num { color: var(--teal); }
.c-seafoam { border-top-color: var(--seafoam); } .c-seafoam .record-num { color: #3E8F81; }
.c-mist    { border-top-color: var(--mist); }    .c-mist .record-num { color: #4179A0; }
.c-sage    { border-top-color: var(--sage); }    .c-sage .record-num { color: #5E8763; }
.c-coral   { border-top-color: var(--coral); }   .c-coral .record-num { color: #C06A45; }

/* ---------- table & list hover polish ---------- */
.tbl tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover { background: var(--sand-2); }

/* ---------- responsive: brand visible at every width ---------- */
@media (max-width: 992px) {
  .top-brand { display: inline-flex; }
  .top-title { display: none; }
  .env-chip { display: none; }
}
@media (max-width: 576px) {
  .top-id { display: none; }
  .stat .stat-num { font-size: 1.6rem; }
}

/* ============================================================
   v0.4, rhythm & footer pass
   One row rhythm across all panels (no stretched rows);
   greeting header; designed footer.
   ============================================================ */

/* ---------- dash header ---------- */
.dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.dash-head h1 { font-size: 1.45rem; }
.dash-sub { color: var(--muted); font-size: .88rem; margin-top: 4px; }

/* ---------- uniform row rhythm: rows keep natural height,
              footer links pin to the bottom instead ---------- */
.panel-grid.equal .tbl, .panel-grid.equal .plain-list { flex: 0 0 auto; }
.panel-foot-link { margin-top: auto; }
.tbl th, .tbl td { padding: 11px 10px; }
.plain-list.lined li { padding: 11px 2px; }
.panel-grid.equal .panel { min-height: 360px; }

/* ---------- designed footer ---------- */
.app-foot { padding: 0; border-top: 1px solid var(--line); background: var(--card); }
.foot-inner {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 16px 30px; flex-wrap: wrap;
}
.foot-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: .92rem; color: var(--ink); }
.foot-brand svg { width: 24px; height: 24px; }
.foot-brand em { font-style: normal; color: var(--teal); }
.foot-ver { color: var(--muted); font-weight: 500; font-size: .8rem; margin-left: 4px; }
.foot-links { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { font-size: .82rem; font-weight: 800; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--teal); }
.foot-meta { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-chip {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #9C4F30; background: rgba(232,155,122,.16);
  border: 1px solid rgba(232,155,122,.4);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.foot-copy { font-size: .8rem; color: var(--muted); font-weight: 800; }

@media (max-width: 992px) {
  .foot-inner { padding: 16px 18px; }
  .panel-grid.equal .panel { min-height: 0; }
}
@media (max-width: 768px) {
  .foot-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .foot-links, .foot-meta { justify-content: center; }
  .dash-head { flex-direction: column; align-items: stretch; }
  .dash-head .btn { text-align: center; }
}

/* ============================================================
   v0.5, navbar & administration pass
   Global search, live task bell, user menu, admin surfaces.
   ============================================================ */

/* ---------- topbar search ---------- */
.top-search {
  flex: 1; max-width: 420px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0 14px; height: 40px;
}
.top-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,111,106,.13); }
.top-search svg { width: 17px; height: 17px; stroke: var(--muted); flex: none; }
.top-search input {
  border: none; background: none; padding: 0; min-height: 0; height: 100%;
  flex: 1; font-size: .88rem;
}
.top-search input:focus { outline: none; box-shadow: none; }
.top-search-link { display: none; }

/* ---------- task bell ---------- */
.top-bell {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; flex: none;
  transition: border-color .15s ease;
}
.top-bell:hover { border-color: var(--teal); }
.top-bell svg { width: 19px; height: 19px; stroke: var(--ink); }
.bell-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--coral); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--sand);
}

/* ---------- user dropdown ---------- */
.user-menu { position: relative; flex: none; }
.user-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 4px; border-radius: 999px;
  border: 1.5px solid transparent;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu[open] summary, .user-menu summary:hover { border-color: var(--line); background: #fff; }
.user-menu .chev { width: 15px; height: 15px; stroke: var(--muted); }
.user-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  width: 240px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 14px;
}
.user-panel-name { font-weight: 800; font-size: .95rem; }
.user-panel-sub { color: var(--muted); font-size: .78rem; margin-top: 2px; word-break: break-word; }
.user-panel hr { border: none; border-top: 1px solid var(--line); margin: 11px 0; }
.user-panel a {
  display: block; text-decoration: none; font-weight: 800; font-size: .88rem;
  color: var(--ink); padding: 7px 8px; border-radius: 8px;
}
.user-panel a:hover { background: var(--sand-2); color: var(--teal); }

/* ---------- sidebar admin group ---------- */
.side-admin a { font-size: .84rem; font-weight: 800; }
.side-admin a:hover { color: var(--seafoam); }

/* ---------- system page ---------- */
.sys-grid { grid-template-columns: repeat(2, 1fr); }
.sys-grid .panel { min-height: 0; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; }
.warn-pill { background: #F7E5DD; color: #8A4129; border: none; }
.sys-count-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .sys-count-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- responsive navbar contract ---------- */
@media (max-width: 1200px) {
  .top-search { max-width: 300px; }
  .env-chip { display: none; }
}
@media (max-width: 992px) {
  .top-search { display: none; }
  .top-search-link {
    display: inline-grid; place-items: center; margin-left: auto;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid var(--line); background: #fff; flex: none;
  }
  .top-search-link svg { width: 18px; height: 18px; stroke: var(--ink); }
  .sys-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .user-menu .chev { display: none; }
  .sys-count-grid { grid-template-columns: repeat(2, 1fr); }
  .user-panel { width: 220px; }
}

/* ============================================================
   v0.7, patient flow board
   Four station columns in the logo palette; built to read from
   across a room (wall display) and from a phone.
   ============================================================ */
.checkin-strip { margin-bottom: 16px; }
.checkin-row { display: flex; gap: 10px; flex-wrap: wrap; }
.checkin-card {
  display: grid; gap: 2px; align-content: start;
  background: var(--sand-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; min-width: 180px;
}
.checkin-time { font-weight: 800; font-size: .95rem; color: var(--teal); }
.checkin-name { font-weight: 800; font-size: .92rem; }
.checkin-type { font-size: .78rem; }
.checkin-card .btn { margin-top: 8px; justify-self: start; }

.flow-board {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; align-items: start;
}
.flow-col {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  border-top: 4px solid var(--line);
}
.fc-mist    { border-top-color: var(--mist); }
.fc-seafoam { border-top-color: var(--seafoam); }
.fc-teal    { border-top-color: var(--teal); }
.fc-coral   { border-top-color: var(--coral); }
.flow-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--sand-2);
}
.flow-col-head h2 { font-size: .95rem; }
.flow-count {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-weight: 800; font-size: .82rem; color: #fff;
}
.fc-mist    .flow-count { background: #4179A0; }
.fc-seafoam .flow-count { background: #3E8F81; }
.fc-teal    .flow-count { background: var(--teal); }
.fc-coral   .flow-count { background: #C06A45; }
.flow-cards { padding: 12px; display: grid; gap: 10px; min-height: 220px; align-content: start; }
.flow-card {
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 13px;
}
.flow-card .text-link { font-size: .95rem; }
.flow-min { font-size: .78rem; margin: 4px 0 9px; }
.flow-empty { padding-top: 80px; text-align: center; }

@media (max-width: 1200px) { .flow-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .flow-board { grid-template-columns: 1fr; }
  .flow-cards { min-height: 0; }
  .flow-empty { padding: 10px 0; }
  .checkin-card { flex: 1; min-width: 150px; }
}


/* ============================================================
   v0.8, brand symmetry + seamless wiring pass
   ============================================================ */
/* sidebar brand: centered lockup, mark over wordmark over tagline */
.side-brand {
  display: grid; justify-items: center; text-align: center;
  gap: 10px; padding: 14px 8px 18px;
}
.side-mark { width: 62px; height: 62px; }
.side-brand-text { white-space: normal; line-height: 1.05; font-size: 1.4rem; }
.side-brand-text small {
  max-width: none; line-height: 1.55; letter-spacing: .18em; font-size: .52rem;
}

/* patient pickers (schedule booking, walk-in check-in) */
.picker-select { min-width: 240px; max-width: 100%; }
.walkin-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 576px) {
  .picker-select, .walkin-form { width: 100%; }
  .picker-select { min-width: 0; }
}

/* ============================================================
   v0.9, auth experience
   Split-panel sign-in: brand on ink, action on sand. Stacks
   to a single symmetric column ≤992.
   ============================================================ */
.auth-body {
  display: grid; grid-template-columns: minmax(360px, 44%) 1fr;
  min-height: 100vh; margin: 0;
}

/* ---------- brand panel ---------- */
.auth-side {
  background: var(--ink); color: #C9D7DC;
  display: grid; grid-template-rows: 1fr auto;
  padding: 48px 40px; position: relative; overflow: hidden;
}
.auth-side::after {
  content: ""; position: absolute; width: 640px; height: 640px;
  border-radius: 50%; border: 1.5px solid rgba(111,191,176,.16);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.auth-side-inner {
  display: grid; justify-items: center; align-content: center;
  text-align: center; gap: 14px; position: relative; z-index: 1;
}
.auth-side-mark { width: min(150px, 30vw); height: auto; }
.auth-side-word { font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1; }
.auth-side-word em { font-style: normal; color: var(--seafoam); }
.auth-side-tag { font-size: .68rem; font-weight: 800; letter-spacing: .26em; color: #7E97A1; }
.auth-side-line { max-width: 30em; color: #9FB6BE; font-size: .95rem; line-height: 1.65; margin-top: 10px; }
.auth-side-foot { text-align: center; font-size: .78rem; color: #7E97A1; font-weight: 800; position: relative; z-index: 1; }

/* ---------- action panel ---------- */
.auth-main { display: grid; place-items: center; background: var(--sand); padding: 48px 24px; }
.auth-panel {
  width: min(420px, 100%); background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 40px 36px;
  display: grid; gap: 0; text-align: center;
}
.auth-panel h1 { font-size: 1.6rem; }
.auth-panel-sub { color: var(--muted); margin: 8px 0 26px; font-size: .95rem; }
.auth-cta { font-size: 1rem; }
.auth-links {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; font-size: .88rem;
}
.auth-links a { color: var(--teal); font-weight: 800; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-links span { color: var(--line); }
.auth-note {
  margin-top: 26px; padding: 13px 15px; border-radius: 10px;
  background: var(--sand-2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--muted); line-height: 1.6;
}
.auth-env { display: block; margin-top: 4px; color: #9C4F30; font-weight: 800; }
.auth-back {
  margin-top: 22px; font-size: .85rem; font-weight: 800;
  color: var(--muted); text-decoration: none;
}
.auth-back:hover { color: var(--teal); }

/* ---------- responsive: single symmetric column ---------- */
@media (max-width: 992px) {
  .auth-body { grid-template-columns: 1fr; }
  .auth-side { padding: 36px 24px 28px; grid-template-rows: auto; }
  .auth-side::after { width: 420px; height: 420px; }
  .auth-side-inner { gap: 10px; }
  .auth-side-mark { width: 88px; }
  .auth-side-word { font-size: 1.7rem; }
  .auth-side-line { display: none; }
  .auth-side-foot { display: none; }
  .auth-main { padding: 32px 18px 48px; }
}
@media (max-width: 576px) {
  .auth-panel { padding: 30px 22px; }
}

/* ============================================================
   v0.9, auth experience: split login, signed-out state
   ============================================================ */
.login-split { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; }
.login-brand {
  background: var(--ink); color: #C9D7DC;
  display: grid; place-items: center; padding: 48px 32px;
  position: relative; overflow: hidden;
}
.login-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 520px at 18% 88%, rgba(111,191,176,.10), transparent 70%),
    radial-gradient(520px 420px at 92% 8%, rgba(232,155,122,.06), transparent 72%);
}
.login-brand-inner { text-align: center; position: relative; }
.login-brand-mark { width: 120px; height: 120px; margin-bottom: 22px; }
.login-brand h1 { color: #fff; font-size: 2.3rem; letter-spacing: -.01em; }
.login-brand h1 em { font-style: normal; color: var(--seafoam); }
.login-tagline { font-size: .68rem; font-weight: 800; letter-spacing: .26em; color: #7E97A1; margin-top: 10px; }
.login-brand-sub { font-size: .92rem; line-height: 1.7; color: #9FB4BC; margin-top: 22px; }

.login-pane { display: grid; place-items: center; padding: 48px 24px; background: var(--sand); }
.login-card2 {
  width: min(420px, 100%); background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 38px 34px 30px; text-align: center;
}
.login-card2 h2 { font-size: 1.5rem; }
.login-sub { color: var(--muted); margin: 8px 0 24px; }
.btn-login { font-size: 1rem; padding: 14px; }
.login-banner {
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
  font-size: .88rem; font-weight: 800;
}
.login-banner.ok { background: rgba(111,191,176,.18); border: 1px solid var(--seafoam); color: var(--teal-deep); }
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px; color: var(--muted);
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.login-alt-link { display: inline-block; color: var(--teal); font-weight: 800; text-decoration: none; }
.login-alt-link:hover { color: var(--teal-deep); }
.login-help { margin-top: 16px; font-size: .86rem; color: var(--muted); }
.login-help a { color: var(--teal); font-weight: 800; text-decoration: none; }
.login-fine { margin-top: 18px; font-size: .78rem; line-height: 1.6; }

@media (max-width: 768px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { padding: 36px 24px 30px; }
  .login-brand-mark { width: 84px; height: 84px; margin-bottom: 14px; }
  .login-brand h1 { font-size: 1.8rem; }
  .login-brand-sub { display: none; }
  .login-pane { padding: 28px 16px 48px; }
  .login-card2 { padding: 28px 22px 24px; }
}

/* login: footer nav + separators (Home link, not a raw url) */
.login-pane { position: relative; }
.login-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 18px; margin: 22px auto 0; max-width: 420px;
}
.login-foot a {
  color: var(--muted); font-weight: 800; font-size: .82rem; text-decoration: none;
  letter-spacing: .01em;
}
.login-foot a:hover { color: var(--teal); text-decoration: underline; }
.login-copy { text-align: center; color: var(--muted); font-size: .74rem; margin: 10px 0 0; opacity: .8; }
.login-help .dot { color: var(--line); margin: 0 2px; }

/* login: finer phone breakpoint */
@media (max-width: 576px) {
  .login-brand { padding: 30px 18px 26px; }
  .login-brand-mark { width: 64px; height: 64px; margin-bottom: 10px; }
  .login-brand h1 { font-size: 1.55rem; }
  .login-tagline { letter-spacing: .2em; font-size: .62rem; }
  .login-pane { padding: 24px 14px 40px; }
  .login-card2 { padding: 24px 18px 22px; border-radius: 14px; }
  .login-card2 h2 { font-size: 1.35rem; }
  .btn-login { font-size: .95rem; padding: 13px; }
  .login-help { font-size: .82rem; }
  .login-foot { gap: 5px 14px; margin-top: 18px; }
  .login-foot a { font-size: .8rem; }
}

/* ============================================================
   v0.10, flow staffing, time logging, visit timeline
   ============================================================ */
.flow-min { font-size: .78rem; color: var(--muted); margin: 4px 0 8px; }
.flow-min.flow-warn { color: #C06A45; font-weight: 800; }
.flow-log-link { color: var(--teal); font-weight: 800; text-decoration: none; }
.flow-staff { display: grid; gap: 2px; font-size: .78rem; color: var(--muted); margin: 0 0 9px; }
.flow-advance { display: grid; gap: 7px; }
.flow-staff-select { font-size: .82rem; min-height: 38px; padding: 7px 10px; width: 100%; }
.flow-advance .btn { justify-self: start; }

.done-strip { margin-top: 16px; }

/* visit timeline bars */
.time-bars { margin-top: 18px; display: grid; gap: 9px; }
.time-bar-row { display: grid; grid-template-columns: 120px 1fr 70px; align-items: center; gap: 10px; font-size: .78rem; }
.time-bar-label { font-weight: 800; }
.time-bar-track { height: 12px; background: var(--sand-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.time-bar-fill { display: block; height: 100%; border-radius: 999px; min-width: 4px; }
.tb-0 { background: var(--mist); } .tb-1 { background: var(--seafoam); }
.tb-2 { background: var(--teal); } .tb-3 { background: var(--coral); }
.time-bar-val { color: var(--muted); text-align: right; }

@media (max-width: 576px) {
  .time-bar-row { grid-template-columns: 86px 1fr 60px; }
}

/* ============================================================
   v0.11, live flow state
   ============================================================ */
.flow-now {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius); padding: 13px 18px; margin-bottom: 14px;
  font-size: .92rem;
}
.fn-mist { border-left-color: var(--mist); }
.fn-seafoam { border-left-color: var(--seafoam); }
.fn-teal { border-left-color: var(--teal); }
.fn-coral { border-left-color: var(--coral); }
.fn-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--seafoam);
  flex: none; animation: fnpulse 2s ease-in-out infinite;
}
@keyframes fnpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,191,176,.5); }
  50% { box-shadow: 0 0 0 6px rgba(111,191,176,0); }
}
.stale-pill { background: rgba(232,155,122,.2); border: none; color: #9C4F30; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .fn-pulse { animation: none; } }

/* ============================================================
   v0.12, flow management: metrics, compact cards, quiet actions
   ============================================================ */
.flow-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.fm {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 2px;
}
.fm-num { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.fm-label { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fm.a-teal { border-top-color: var(--teal); } .fm.a-teal .fm-num { color: var(--teal); }
.fm.a-mist { border-top-color: var(--mist); } .fm.a-mist .fm-num { color: #4179A0; }
.fm.a-seafoam { border-top-color: var(--seafoam); } .fm.a-seafoam .fm-num { color: #3E8F81; }
.fm.a-coral { border-top-color: var(--coral); } .fm.a-coral .fm-num { color: #C06A45; }

.banner.warn-banner { background: rgba(232,155,122,.16); border: 1px solid rgba(232,155,122,.45); color: #8A4129; }
.checkin-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* columns: sticky heads, internal scroll, the board stays one screen */
.flow-cards { max-height: 56vh; overflow-y: auto; scrollbar-width: thin; }
.flow-col-head { position: sticky; top: 0; z-index: 2; }

/* compact cards */
.flow-card { padding: 10px 12px; }
.fc-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fc-mrn { font-size: .7rem; letter-spacing: .04em; white-space: nowrap; }
.flow-min { margin: 3px 0 6px; }
.flow-staff { margin: 0 0 7px; }
.flow-advance-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.flow-advance-row .flow-staff-select { flex: 1; min-width: 130px; width: auto; }
.flow-advance-row .btn { flex: none; white-space: nowrap; }
.fc-quiet { display: flex; gap: 12px; align-items: center; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.fc-quiet form { display: inline; }
.quiet-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 800; color: var(--muted);
  text-decoration: none;
}
.quiet-btn:hover { color: var(--teal); }
.quiet-danger:hover { color: #C0392B; }

@media (max-width: 1200px) { .flow-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px) { .flow-cards { max-height: none; } }
@media (max-width: 576px) { .flow-metrics { grid-template-columns: 1fr 1fr; } .fm-num { font-size: 1.1rem; } }

/* ============================================================
   v0.13, clinic-local scheduling + sidebar scroll affordance
   ============================================================ */
/* the sidebar advertises its scrollability: seafoam thumb you can't
   miss, plus a fade at the bottom hinting at modules below the fold */
.sidebar { scrollbar-width: thin; scrollbar-color: var(--seafoam) #11262E; }
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track { background: #11262E; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--seafoam); border-radius: 999px;
  border: 2px solid #11262E;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: #8AD2C4; }
.sidebar::after {
  content: ""; position: sticky; bottom: 0; display: block;
  height: 34px; margin-top: -34px; flex: none;
  background: linear-gradient(to bottom, rgba(22,50,59,0), var(--ink) 85%);
  pointer-events: none;
}

/* schedule controls */
.sched-toolbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.day-nav { display: flex; gap: 12px; align-items: center; }
.day-label { font-size: 1rem; }
.sched-form select, .sched-form input { min-width: 0; }
.sched-tbl td { vertical-align: top; }
.t-right { text-align: right; }
.inline-form { display: inline-block; margin-left: 12px; }
.resched { display: inline-block; position: relative; }
.resched summary { list-style: none; cursor: pointer; }
.resched summary::-webkit-details-marker { display: none; }
.resched-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: grid; gap: 8px; width: 230px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px;
}
.resched-form .btn { justify-self: start; }

@media (max-width: 992px) {
  .sched-toolbar { align-items: stretch; }
  .resched-form { right: auto; left: 0; }
}
@media (max-width: 576px) {
  .day-nav { width: 100%; justify-content: space-between; }
  .sched-tbl { display: block; overflow-x: auto; }
}

/* ============================================================
   v0.14, seven-stage flow: six live columns + checked out
   ============================================================ */
.flow-board { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.flow-col-head { padding: 11px 12px; }
.flow-col-head h2 { font-size: .8rem; letter-spacing: .01em; }
.flow-count { min-width: 22px; height: 22px; font-size: .74rem; }
.flow-cards { padding: 9px; gap: 8px; min-height: 180px; }
.flow-card .text-link { font-size: .88rem; }
.fc-sage { border-top-color: var(--sage); }
.fc-sage .flow-count { background: #5E8763; }

@media (max-width: 1500px) { .flow-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px)  { .flow-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .flow-board { grid-template-columns: 1fr; } }

/* ============================================================
   v0.15, lane layout: the board breathes at every width
   ============================================================ */
.flow-board {
  display: grid; grid-auto-flow: column; grid-auto-columns: 296px;
  grid-template-columns: none; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 10px;
  scrollbar-width: thin; scrollbar-color: var(--seafoam) var(--sand-2);
}
.flow-board::-webkit-scrollbar { height: 10px; }
.flow-board::-webkit-scrollbar-track { background: var(--sand-2); border-radius: 999px; }
.flow-board::-webkit-scrollbar-thumb {
  background: var(--seafoam); border-radius: 999px;
  border: 2px solid var(--sand-2);
}
.flow-col { scroll-snap-align: start; }
.flow-col-head h2 { font-size: .88rem; }
.flow-count { min-width: 24px; height: 24px; font-size: .78rem; }
.flow-cards { padding: 10px; gap: 9px; max-height: 54vh; }

/* stacked card controls: nothing overflows, ever */
.fc-controls { display: grid; gap: 7px; }
.fc-select {
  width: 100%; min-width: 0; max-width: 100%;
  font-size: .82rem; min-height: 38px; padding: 7px 10px;
}
.fc-move-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; }
.flow-card { overflow: hidden; }
.flow-card .text-link { font-size: .92rem; }

@media (max-width: 992px) {
  .flow-board { grid-auto-columns: 280px; }
  .flow-cards { max-height: none; }
}
@media (max-width: 576px) {
  .flow-board { grid-auto-columns: 86vw; scroll-snap-type: x mandatory; }
}

/* ============================================================
   v0.16, the palette goes to work
   Color is information: actions wear the station they lead to,
   statuses wear their meaning, sections own their accent.
   Darkened accents for AA contrast on white text:
   mist #4179A0 · seafoam #3E8F81 · sage #5E8763 · coral #C06A45
   ============================================================ */

/* ---------- button accent system ---------- */
.btn-seafoam { background: #3E8F81; border-color: #3E8F81; }
.btn-seafoam:hover { background: #347A6E; border-color: #347A6E; }
.btn-mist { background: #4179A0; border-color: #4179A0; }
.btn-mist:hover { background: #36658A; border-color: #36658A; }
.btn-sage { background: #5E8763; border-color: #5E8763; }
.btn-sage:hover { background: #4F7354; border-color: #4F7354; }
.btn-coral { background: #C06A45; border-color: #C06A45; }
.btn-coral:hover { background: #A85A38; border-color: #A85A38; }

/* ---------- flow lanes: the Go button wears its lane ---------- */
.fc-mist    .fc-controls .btn { background: #4179A0; border-color: #4179A0; }
.fc-mist    .fc-controls .btn:hover { background: #36658A; }
.fc-seafoam .fc-controls .btn { background: #3E8F81; border-color: #3E8F81; }
.fc-seafoam .fc-controls .btn:hover { background: #347A6E; }
.fc-sage    .fc-controls .btn { background: #5E8763; border-color: #5E8763; }
.fc-sage    .fc-controls .btn:hover { background: #4F7354; }
.fc-teal    .fc-controls .btn { background: var(--teal); border-color: var(--teal); }
.fc-coral   .fc-controls .btn { background: #C06A45; border-color: #C06A45; }
.fc-coral   .fc-controls .btn:hover { background: #A85A38; }

/* lane heads carry a whisper of their accent */
.fc-mist    .flow-col-head { background: rgba(156,198,220,.22); }
.fc-seafoam .flow-col-head { background: rgba(111,191,176,.20); }
.fc-sage    .flow-col-head { background: rgba(185,212,188,.26); }
.fc-teal    .flow-col-head { background: rgba(30,111,106,.10); }
.fc-coral   .flow-col-head { background: rgba(232,155,122,.18); }

/* check-in actions: arrival is sage */
.checkin-card .btn, .walkin-form .btn { background: #5E8763; border-color: #5E8763; }
.checkin-card .btn:hover, .walkin-form .btn:hover { background: #4F7354; border-color: #4F7354; }

/* quiet actions: colored intent at rest */
.fc-quiet form:first-child .quiet-btn,
.quiet-btn[title="Move back a station"] { color: #4179A0; }
a.quiet-btn { color: var(--teal); }
.quiet-danger { color: #C06A45; }
.quiet-btn:hover { text-decoration: underline; }
.quiet-danger:hover { color: #A33D1F; }

/* ---------- status pill palette ---------- */
.pill.p-booked     { background: rgba(156,198,220,.32); color: #2D5C7E; }
.pill.p-active     { background: rgba(111,191,176,.28); color: #2C6F62; }
.pill.p-in-progress{ background: rgba(30,111,106,.14);  color: var(--teal-deep); }
.pill.p-requested  { background: rgba(156,198,220,.32); color: #2D5C7E; }
.pill.p-completed, .pill.p-finished, .pill.p-fulfilled, .pill.p-resolved
                   { background: rgba(185,212,188,.40); color: #44603F; }
.pill.p-cancelled, .pill.p-stopped, .pill.p-entered-in-error
                   { background: rgba(232,155,122,.26); color: #8A4129; }
.pill.p-arrived, .pill.p-triaged
                   { background: rgba(111,191,176,.28); color: #2C6F62; }

/* ---------- chart sections own their accent ---------- */
#problems    .panel-head summary.btn { color: var(--teal); border-color: var(--teal); }
#medications .panel-head summary.btn { color: #3E8F81; border-color: #3E8F81; }
#allergies   .panel-head summary.btn { color: #C06A45; border-color: #C06A45; }
#vitals      .panel-head summary.btn { color: #4179A0; border-color: #4179A0; }
#notes       .panel-head summary.btn { color: #5E8763; border-color: #5E8763; }
#problems    .panel-head summary.btn:hover { background: var(--teal); color: #fff; }
#medications .panel-head summary.btn:hover { background: #3E8F81; color: #fff; }
#allergies   .panel-head summary.btn:hover { background: #C06A45; color: #fff; }
#vitals      .panel-head summary.btn:hover { background: #4179A0; color: #fff; }
#notes       .panel-head summary.btn:hover { background: #5E8763; color: #fff; }

/* schedule: reschedule wears mist, time anchors teal */
.resched summary.quiet-btn { color: #4179A0; }
.sched-tbl td:first-child strong { color: var(--teal); }

/* ============================================================
   v0.17, every role · notifications · lobby pre-check
   ============================================================ */
.lobby-pill { background: rgba(111,191,176,.30); color: #2C6F62; border: none; font-size: .64rem; }
.checkin-card:has(.lobby-pill) { border-color: var(--seafoam); background: rgba(111,191,176,.10); }
.notif-text { font-size: .82rem; color: var(--muted); max-width: 520px; word-break: break-word; }

.precheck-body {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--sand); padding: 24px 16px;
}
.precheck-card {
  width: min(440px, 100%); background: var(--card);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 36px 30px; text-align: center;
}
.precheck-mark { width: 86px; height: 86px; margin-bottom: 14px; }
.precheck-card h1 { font-size: 1.7rem; }
.precheck-card h1 em { font-style: normal; color: var(--teal); }
.precheck-sub { color: var(--muted); font-size: .9rem; margin: 4px 0 20px; }
.precheck-appt {
  background: var(--sand-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; margin-bottom: 18px;
}
.precheck-who { font-weight: 800; }
.precheck-when { color: var(--muted); margin-top: 4px; }
.precheck-help { font-size: .92rem; color: var(--muted); margin-bottom: 16px; }
.precheck-fine { font-size: .74rem; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.precheck-state { border-radius: 12px; padding: 14px; font-weight: 800; font-size: .92rem; margin-top: 14px; }
.precheck-state.ok { background: rgba(111,191,176,.2); border: 1px solid var(--seafoam); color: var(--teal-deep); }
.precheck-state.err { background: rgba(232,155,122,.18); border: 1px solid rgba(232,155,122,.5); color: #8A4129; }

/* v0.18, multi-site */
.site-form { max-width: 760px; }
.site-form .inp-short { max-width: 140px; }
.site-form .inp-tiny { max-width: 64px; }
.form-hint { flex-basis: 100%; }

/* ============================================================
   v0.19, popups, chart locking
   ============================================================ */
#toast-rack {
  position: fixed; top: 72px; right: 18px; z-index: 200;
  display: grid; gap: 10px; width: min(360px, calc(100vw - 36px));
}
.toast {
  background: var(--ink); color: #EAF2F0;
  border-left: 4px solid var(--seafoam);
  border-radius: 12px; padding: 13px 15px;
  font-size: .86rem; font-weight: 500; line-height: 1.5;
  box-shadow: 0 10px 28px -10px rgba(22,50,59,.45);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  animation: toastin .25s ease;
}
.toast.flow { border-left-color: var(--mist); }
.toast.lockreq { border-left-color: var(--coral); }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } }
.toast-btn {
  border: 1.5px solid #EAF2F0; background: none; color: #EAF2F0;
  border-radius: 999px; padding: 5px 14px; font: inherit;
  font-weight: 800; font-size: .8rem; cursor: pointer;
}
.toast-btn.ok { background: var(--seafoam); border-color: var(--seafoam); color: var(--ink); }
.toast-btn.no:hover { border-color: var(--coral); color: var(--coral); }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.lock-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(232,155,122,.14); border: 1px solid rgba(232,155,122,.45);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px;
  font-size: .92rem;
}
.lock-actions { display: flex; gap: 8px; margin-left: auto; }
.chart-readonly .inline-new,
.chart-readonly form.vitals-form,
.chart-readonly .panel-head .btn { display: none !important; }

/* ============================================================
   v0.20, clinical chart language + vitals snapshot
   ============================================================ */
.vitals-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--mist);
  border-radius: var(--radius); padding: 11px 16px; margin-bottom: 14px;
  font-size: .88rem;
}
.vs-label { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.vs-chip {
  background: rgba(156,198,220,.18); border-radius: 999px;
  padding: 4px 12px; color: #2D5C7E; font-size: .82rem;
}
.vs-chip strong { color: var(--ink); }
.vitals-strip .text-link { margin-left: auto; }
.fn-team { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.fn-team-m strong { color: var(--ink); }
#immunizations .panel-head summary.btn { color: #5E8763; border-color: #5E8763; }
#immunizations .panel-head summary.btn:hover { background: #5E8763; color: #fff; }

/* ============================================================
   v0.21, foolproofing pass: groups everywhere, gaps closed
   ============================================================ */
/* staff position pills wear their group */
.pill.pg-provider         { background: rgba(30,111,106,.14);  color: var(--teal-deep); }
.pill.pg-clinical_support { background: rgba(111,191,176,.26); color: #2C6F62; }
.pill.pg-allied           { background: rgba(185,212,188,.40); color: #44603F; }
.pill.pg-operations       { background: rgba(156,198,220,.30); color: #2D5C7E; }

/* reschedule popover grew a provider select */
.resched-form { width: 260px; }
.resched-form select, .resched-form input { min-height: 38px; font-size: .84rem; }

/* booking form wraps gracefully on every width */
.sched-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sched-form select, .sched-form input { flex: 1 1 150px; min-width: 0; }
.sched-form .btn { flex: 0 0 auto; }
@media (max-width: 576px) {
  .sched-form select, .sched-form input { flex-basis: 100%; }
  .resched-form { width: min(86vw, 300px); }
}

/* ============================================================
   v0.22, task lifecycle in full color
   ============================================================ */
.task-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.task-new-form { display: flex; gap: 10px; flex-wrap: wrap; }
.task-new-form input[name="description"] { flex: 1 1 320px; min-width: 0; }
.task-new-form select { flex: 0 1 140px; }
.pill.prio-routine { background: rgba(156,198,220,.30); color: #2D5C7E; }
.pill.prio-urgent  { background: rgba(232,155,122,.30); color: #8A4129; }
.pill.prio-stat    { background: #C0392B; color: #fff; letter-spacing: .06em; }
.task-stat-row td  { background: rgba(192,57,43,.05); }
.task-actions { white-space: nowrap; }
.task-actions .inline-form { margin-left: 8px; }
.done-list li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.done-list li:last-child { border-bottom: none; }
.done-check { color: #3E8F81; font-weight: 800; margin-right: 6px; }
.task-owner { font-style: italic; }
@media (max-width: 576px) {
  .task-metrics { grid-template-columns: 1fr; }
  .task-new-form input[name="description"], .task-new-form select { flex-basis: 100%; }
}

/* ============================================================
   v0.23, staff directory: groups, avatars, lifecycle
   ============================================================ */
.staff-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.staff-metrics .fm { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.staff-metrics .fm:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fm-on { outline: 2px solid currentColor; outline-offset: -2px; }
.staff-name-cell { display: flex; align-items: center; gap: 11px; }
.staff-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; color: #fff;
}
.av-provider { background: var(--teal); }
.av-clinical_support { background: #3E8F81; }
.av-allied { background: #5E8763; }
.av-operations { background: #4179A0; }
.staff-actions { white-space: nowrap; }
.staff-actions .inline-form { margin-left: 12px; }
.staff-tbl td { vertical-align: middle; }
@media (max-width: 1200px) { .staff-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .staff-metrics { grid-template-columns: repeat(2, 1fr); } .staff-tbl { display: block; overflow-x: auto; } }

/* ============================================================
   v0.24, speed pass: patients census + one-target advance
   ============================================================ */
.pt-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.pt-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--teal); color: #fff;
  font-weight: 800; font-size: .85rem;
}
.pt-actions { white-space: nowrap; }
.pt-actions .inline-form { display: inline-block; margin-right: 10px; }
.pill.st-mist    { background: rgba(156,198,220,.32); color: #2D5C7E; }
.pill.st-seafoam { background: rgba(111,191,176,.30); color: #2C6F62; }
.pill.st-sage    { background: rgba(185,212,188,.42); color: #44603F; }
.pill.st-teal    { background: rgba(30,111,106,.14);  color: var(--teal-deep); }
.pill.st-coral   { background: rgba(232,155,122,.28); color: #8A4129; }

.flow-filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#flow-filter { max-width: 360px; }
.fc-go { width: 100%; min-height: 40px; font-size: .86rem; }
.flow-card.lw { border-left: 3px solid var(--coral); }

@media (max-width: 1200px) { .pt-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .pt-metrics { grid-template-columns: 1fr 1fr; } .pt-actions .inline-form { margin-right: 4px; } }

/* ---- v0.25 encounter documentation ---- */
.fc-cc { margin: 0 0 6px; font-size: .8rem; color: var(--muted); font-style: italic;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-cc { font-size: .88rem; }
.fn-cc-edit { position: relative; }
.fn-cc-edit .add-form { display: flex; gap: 8px; margin-top: 8px; }
.fn-cc-edit .add-form input[name="reason"] { min-width: 240px; }
.attach-visit { display: flex; align-items: center; gap: 8px; font-size: .84rem;
                color: var(--muted); font-weight: 500; }
.attach-visit input { accent-color: var(--teal); }
.visit-pill { text-decoration: none; font-size: .68rem; }
.walkin-reason { max-width: 200px; }
@media (max-width: 576px) { .walkin-reason { max-width: none; width: 100%; } }

/* ---- v0.26 palette + ops release ---- */
/* palette gaps: sage accent existed in markup but never in CSS */
.fm.a-sage { border-top-color: var(--sage); } .fm.a-sage .fm-num { color: #5E8763; }
.a-sage .stat-icon { background: rgba(185,212,188,.32); } .a-sage .stat-icon svg { stroke: #5E8763; }
.a-sage .stat-num { color: #5E8763; }
.fc-sage { border-top-color: var(--sage); }
.fc-sage .flow-count { background: #5E8763; }

/* flow: cards inherit their column accent; per-station averages in the head */
.fc-mist    .flow-card { box-shadow: inset 3px 0 0 var(--mist); }
.fc-seafoam .flow-card { box-shadow: inset 3px 0 0 var(--seafoam); }
.fc-sage    .flow-card { box-shadow: inset 3px 0 0 var(--sage); }
.fc-teal    .flow-card { box-shadow: inset 3px 0 0 var(--teal); }
.fc-coral   .flow-card { box-shadow: inset 3px 0 0 var(--coral); }
.flow-col-head { justify-content: flex-start; gap: 8px; }
.flow-col-head h2 { margin-right: auto; }
.flow-col-avg { font-size: .68rem; font-weight: 800; letter-spacing: .05em;
                color: var(--muted); white-space: nowrap; }
.done-cc { color: var(--muted); font-style: italic; max-width: 22em;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* schedule: provider palette dots, ribbon, quick-assign */
.prov-dot { display: inline-block; width: 10px; height: 10px;
            border-radius: 50%; margin-right: 7px; }
.pv-0 { background: var(--teal); }
.pv-1 { background: #3E8F81; }
.pv-2 { background: #4179A0; }
.pv-3 { background: #5E8763; }
.pv-4 { background: #C06A45; }
.pv-x { background: rgba(232,155,122,.22); border: 2px solid var(--coral); }
.sched-ribbon-panel .panel-head { align-items: flex-start; }
.rb-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
             font-size: .76rem; font-weight: 800; color: var(--muted); }
.rb-leg { display: inline-flex; align-items: center; }
.rb-leg .prov-dot { width: 9px; height: 9px; margin-right: 5px; }
.rb-track { position: relative; background: var(--sand-2);
            border: 1px solid var(--line); border-radius: 10px; }
.rb-block { position: absolute; height: 12px; border-radius: 999px;
            transition: transform .12s ease; }
.rb-block:hover { transform: scaleY(1.25); }
a.rb-block.pv-x { border-width: 2px; }
.rb-hours { display: flex; justify-content: space-between; margin-top: 6px;
            font-size: .66rem; font-weight: 800; letter-spacing: .08em;
            color: var(--muted); }
.day-jump input { border: 1px solid var(--line); border-radius: 999px;
                  padding: 7px 13px; font: inherit; font-size: .84rem;
                  font-weight: 800; background: var(--card); color: var(--ink); }
.sched-stats .stat-num { font-variant-numeric: tabular-nums; }
.needs-prov td { background: rgba(232,155,122,.07); }
.needs-prov td:first-child { box-shadow: inset 3px 0 0 var(--coral); }
.assign-form { display: flex; gap: 8px; align-items: center; }
.assign-form select { max-width: 240px; font-size: .85rem; }

/* staff: the person at the center is coral; floor presence is live seafoam */
.av-me { background: var(--coral); }
.you-pill { background: rgba(232,155,122,.18); color: #C06A45; border: none;
            margin-left: 8px; font-size: .64rem; }
.floor-pill { background: rgba(111,191,176,.26); color: #2C6F62; border: none;
              text-decoration: none; }
.floor-pill:hover { background: rgba(111,191,176,.42); }

@media (max-width: 992px) {
  .sched-stats { grid-template-columns: repeat(2, 1fr); }
  .rb-legend { justify-content: flex-start; }
}
@media (max-width: 576px) {
  .assign-form { flex-direction: column; align-items: stretch; }
  .assign-form select { max-width: none; }
  .day-jump { width: 100%; } .day-jump input { width: 100%; }
  .done-cc { max-width: 10em; }
}

/* ---- v0.27 vertical board + drag moves + triage filters ---- */
.flow-board {
  grid-auto-flow: row; grid-auto-columns: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow-x: visible; overflow-y: visible;
  scroll-snap-type: none; padding-bottom: 0; gap: 14px;
}
.flow-col { min-width: 0; }
.flow-cards { max-height: none; overflow-y: visible; min-height: 150px; }
.flow-cards:has(> .flow-empty) { min-height: 64px; }
.flow-col-head h2 { font-size: .92rem; }
@media (max-width: 992px) {
  .flow-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .flow-board { grid-template-columns: minmax(0, 1fr); scroll-snap-type: none; }
}

.chip-toggle {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: 8px 14px; font: inherit;
  font-size: .8rem; font-weight: 800; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.chip-toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip-warn { color: #C06A45; border-color: rgba(232,155,122,.65); }
.chip-warn[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #16323B; }
.drag-hint { margin-left: auto; }
@media (max-width: 992px) { .drag-hint { display: none; } }

.flow-card[draggable="true"] { cursor: grab; }
.flow-card.dragging { opacity: .45; cursor: grabbing; }
.flow-col.drop-ok { outline: 2px solid var(--teal); outline-offset: -4px; background: rgba(111,191,176,.07); }
.done-strip.drop-ok { outline: 2px solid var(--coral); outline-offset: -4px; background: rgba(232,155,122,.06); }

/* ---- v0.28 symmetric columns + clinical priority ---- */
.flow-cards {
  height: clamp(360px, 56vh, 720px); max-height: none;
  display: flex; flex-direction: column; align-items: stretch;
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--seafoam) var(--sand-2);
}
.flow-cards > * { flex: 0 0 auto; }
.flow-cards:has(> .flow-empty) { min-height: 0; }  /* symmetry: same height as siblings */
.flow-cards::-webkit-scrollbar { width: 9px; }
.flow-cards::-webkit-scrollbar-track { background: var(--sand-2); border-radius: 999px; }
.flow-cards::-webkit-scrollbar-thumb {
  background: var(--seafoam); border-radius: 999px;
  border: 2px solid var(--sand-2);
}
@media (max-width: 576px) {
  .flow-cards { height: auto; max-height: 56vh; min-height: 0; }
}

.prio-pill { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.pp-ur { background: rgba(232,155,122,.22); color: #C06A45; border: none; }
.pp-s  { background: var(--coral); color: var(--ink); border: none; }
.flow-card.pr-ur { border-color: rgba(232,155,122,.8); }
.flow-card.pr-s  { border-color: #C06A45; background: rgba(232,155,122,.12); }

.prio-menu summary { list-style: none; }
.prio-menu summary::-webkit-details-marker { display: none; }
.prio-options { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.prio-opt {
  border: 1px solid var(--line); background: var(--sand); color: var(--ink);
  border-radius: 999px; padding: 6px 11px; font: inherit;
  font-size: .76rem; font-weight: 800; cursor: pointer;
}
.prio-opt.po-ur { color: #C06A45; border-color: rgba(232,155,122,.65); }
.prio-opt.po-s  { background: var(--coral); border-color: var(--coral); }
.prio-opt.on { outline: 2px solid var(--teal); outline-offset: -2px; }

/* ---- v0.29 staff: the practitioner's day + off-today ---- */
.away-pill { background: rgba(232,155,122,.20); color: #C06A45; border: none; }
.today-cell { font-size: .85rem; white-space: nowrap; }
.staff-day-id { display: flex; gap: 16px; align-items: center; }
.sd-avatar { width: 56px; height: 56px; font-size: 1.4rem; border-radius: 16px; }
@media (max-width: 768px) { .today-cell { white-space: normal; } }

/* ---- v0.30 OmniCare adherence: palette, timeline, CDS, audit ---- */
.palette-overlay[hidden] { display: none; }
.palette-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(22,50,59,.42);
  display: grid; justify-items: center; align-items: start; padding-top: 14vh;
}
.palette-box {
  width: min(620px, 92vw); background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 14px; display: grid; gap: 10px;
}
.palette-box input {
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px;
  font: inherit; font-size: 1rem; background: var(--sand); color: var(--ink);
}
.palette-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; display: grid; gap: 4px; }
.palette-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 800;
}
.palette-item.sel { background: rgba(30,111,106,.10); outline: 2px solid var(--teal); outline-offset: -2px; }
.palette-item.pi-action { color: var(--muted); font-weight: 500; }
.palette-item.pi-action::before { content: "\2192  "; color: var(--seafoam); font-weight: 800; }
.palette-sub { font-size: .76rem; color: var(--muted); font-weight: 500; }
.palette-hint { margin: 0; font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-align: center; }

.tab-page { background: rgba(30,111,106,.08); }

.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-item {
  display: grid; grid-template-columns: 14px 130px 1fr auto; gap: 12px;
  align-items: baseline; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 16px;
}
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); align-self: center; }
.k-visit .tl-dot { background: var(--teal); }
.k-note .tl-dot { background: #4179A0; }
.k-vitals .tl-dot { background: var(--seafoam); }
.k-med .tl-dot { background: var(--coral); }
.k-problem .tl-dot { background: #5E8763; }
.k-allergy .tl-dot { background: #C06A45; }
.k-shot .tl-dot { background: var(--mist); }
.tl-stamp { font-size: .78rem; color: var(--muted); font-weight: 800; white-space: nowrap; }
.tl-item.tl-fresh { border-left: 3px solid var(--coral); background: rgba(232,155,122,.06); }
.tl-fresh-demo { background: rgba(232,155,122,.25); border-radius: 6px; padding: 1px 7px; }
.chip-on { background: var(--teal); border-color: var(--teal); color: #fff; }
a.chip-toggle { text-decoration: none; display: inline-block; }
@media (max-width: 576px) { .tl-item { grid-template-columns: 12px 1fr; } .tl-stamp { grid-column: 2; } .tl-body, .tl-link { grid-column: 2; } }

.cds-wrap { max-width: 760px; margin: 0 auto; }
.cds-panel { border-top: 4px solid var(--coral); }
.cds-context { font-size: 1rem; margin: 4px 0 14px; }
.cds-warnings { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cds-w { border: 1px solid var(--line); border-left: 4px solid var(--coral); border-radius: 10px; padding: 12px 16px; background: var(--sand); }
.cds-w.sev-moderate { border-left-color: var(--mist); }
.cds-w p { margin: 6px 0 0; }
.cds-kind { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.pill.p-major { background: var(--coral); color: var(--ink); border: none; }
.pill.p-moderate { background: rgba(156,198,220,.4); color: #2D5C7E; border: none; }
.cds-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cds-override-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.cds-override-form input { flex: 1; min-width: 240px; }
.cds-override-btn { color: #C06A45; border-color: rgba(232,155,122,.7); }

.au-C { background: rgba(111,191,176,.3); color: #2C6F62; border: none; }
.au-R { background: var(--sand-2); border: none; color: var(--muted); }
.au-U { background: rgba(156,198,220,.35); color: #2D5C7E; border: none; }
.audit-when { white-space: nowrap; font-size: .82rem; color: var(--muted); }
.audit-detail { max-width: 42em; }

/* ---- v0.31 audit fixes: mobile overflow, missing accents, lock polish ---- */
/* the filter/chip rows wrap instead of forcing the page wide */
.flow-filter-row { flex-wrap: wrap; }

/* wide tables scroll inside their container on small screens */
@media (max-width: 768px) {
  .tbl.wide { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 576px) {
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sched-ribbon, .rb-track { min-width: 0; }
  .day-nav { flex-wrap: wrap; }
}
.tl-body { min-width: 0; overflow-wrap: anywhere; }
.panel-grid > .panel, .panel-grid > * { min-width: 0; }
.tbl { max-width: 100%; }

/* accents that templates reference but the sheet never defined */
.d-teal { background: var(--teal); }
.fn-sage { border-left-color: var(--sage); }
.pill.p-current { background: rgba(111,191,176,.3); color: #2C6F62; border: none; }

/* chart lock banner pieces */
.lock-ico { font-size: 1.05rem; }
.lock-wait { font-size: .85rem; font-style: italic; }
.chart-readonly .inline-add { display: none !important; }

/* ---- v0.32 auth completeness ---- */
.login-banner.err { background: rgba(232,155,122,.2); color: #A04A28; border: 1px solid rgba(232,155,122,.55); }
/* the login page stacks on phones: brand becomes a compact band */
@media (max-width: 768px) {
  .login-split { grid-template-columns: 1fr; min-height: 100vh; }
  .login-brand { padding: 34px 20px 30px; }
  .login-brand-mark { width: 64px; height: 64px; margin-bottom: 10px; }
  .login-brand h1 { font-size: 1.5rem; }
  .login-brand-sub { display: none; }
  .login-pane { padding: 28px 18px 60px; align-items: start; }
}

/* ---- v0.33 security + clinical accessibility ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: #fff; font-weight: 800;
  padding: 12px 22px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--seafoam); outline-offset: 2px; border-radius: 4px; }
.sidebar :focus-visible, .login-brand :focus-visible { outline-color: var(--coral); }

/* clinical settings run on carts and tablets: real touch targets */
@media (pointer: coarse) {
  .quiet-btn, .chip-toggle, .prio-opt { min-height: 44px; display: inline-flex; align-items: center; }
  .side-nav a, .side-modules a { min-height: 44px; display: flex; align-items: center; }
}

/* motion stops when the operating system asks it to */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- v0.34 account center ---- */
.avatar-img { object-fit: cover; padding: 0; border: 2px solid rgba(111,191,176,.5); }
.account-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.acct-security { grid-column: 1 / -1; }
.acct-id-row { display: flex; gap: 20px; align-items: center; margin: 14px 0 10px; }
.acct-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(111,191,176,.55); flex: 0 0 auto; }
.acct-initials { display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; font-weight: 800; font-size: 1.7rem; }
.acct-name { font-size: 1.25rem; font-weight: 800; }
.acct-sub { color: var(--muted); margin-top: 2px; }
.acct-roles { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.role-chip { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--sand-2); border: 1px solid var(--line); }
.rc-admin { background: rgba(232,155,122,.18); border-color: rgba(232,155,122,.5); }
.rc-clinician { background: rgba(30,111,106,.1); border-color: rgba(30,111,106,.3); }
.rc-front-desk { background: rgba(156,198,220,.22); border-color: rgba(156,198,220,.6); }
.acct-link { margin-top: 8px; }
.acct-note { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.acct-upload { display: flex; gap: 10px; align-items: center; margin: 14px 0 12px; flex-wrap: wrap; }
.file-pick { position: relative; overflow: hidden; display: inline-block; }
.file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pick span { display: inline-block; padding: 10px 16px; border: 1px solid var(--teal);
  border-radius: 999px; font-weight: 800; color: var(--teal); background: rgba(30,111,106,.04); }
.file-pick:focus-within span { outline: 3px solid var(--seafoam); outline-offset: 2px; }
.acct-sec-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
.acct-sec-list li { display: flex; gap: 14px; align-items: flex-start; }
.acct-sec-list h3 { margin: 0 0 4px; font-size: 1rem; }
.acct-sec-list p { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
.model-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.md-teal { background: var(--teal); } .md-seafoam { background: var(--seafoam); }
.md-coral { background: var(--coral); } .md-mist { background: var(--mist); }
.banner { border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; font-weight: 600; border: 1px solid var(--line); }
.banner-ok { background: rgba(111,191,176,.16); border-color: rgba(111,191,176,.5); color: #1C5B50; }
.banner-err { background: rgba(232,155,122,.16); border-color: rgba(232,155,122,.5); color: #8C3E1F; }
@media (max-width: 992px) {
  .account-grid { grid-template-columns: 1fr; }
  .acct-sec-list { grid-template-columns: 1fr; }
}

/* ---- v0.35: pager, demographics edit, reach queue ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 4px; flex-wrap: wrap; }
.pager-btn { font-weight: 800; color: var(--teal); padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; }
.pager-btn:hover { border-color: var(--teal); }
.pager-off { opacity: .4; pointer-events: none; }
.pager-state { color: var(--muted); font-size: .9rem; }
.demog-edit { margin-top: 10px; }
.demog-edit summary { list-style: none; display: inline-block; cursor: pointer; }
.demog-edit summary::-webkit-details-marker { display: none; }
.demog-form { margin-top: 12px; background: var(--sand-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.demog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; margin-bottom: 12px; }
.demog-grid label { font-size: .78rem; font-weight: 800; color: var(--ink-2); display: flex; flex-direction: column; gap: 5px; }
.demog-grid input, .demog-grid select { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.demog-wide { grid-column: span 2; }
.reach-chip { font-size: .74rem; font-weight: 800; letter-spacing: .05em; padding: 3px 11px; border-radius: 999px; background: var(--sand-2); border: 1px solid var(--line); }
.rc-queued { background: rgba(232,155,122,.18); border-color: rgba(232,155,122,.55); }
.rc-sent { background: rgba(111,191,176,.18); border-color: rgba(111,191,176,.55); }
.reach-msg { max-width: 38em; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 820px) { .demog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .demog-grid { grid-template-columns: 1fr; } .demog-wide { grid-column: auto; } }

/* v0.36: lifecycle + rename */
.td-act { text-align: right; white-space: nowrap; width: 1%; }
.row-inactive td { opacity: .55; }
.row-inactive .quiet-btn { opacity: 1; }
.loc-rename { display: inline-block; margin-right: 8px; }

/* v0.37: clinical depth forms */
.clin-form { display: block; }
.clin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; margin-bottom: 10px; }
.clin-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 800; color: var(--ink-2); }
.clin-grid select, .clin-grid input { font: inherit; font-weight: 500; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cf-wide { grid-column: span 2; }
.cf-check { flex-direction: row !important; align-items: center; gap: 8px; align-self: end; padding-bottom: 9px; }
.cf-check input { width: auto; }
.note-row { display: flex; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.note-row label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 800; color: var(--ink-2); }
.nf-grow { flex: 1; min-width: 200px; }
.soap-fields { display: grid; gap: 8px; margin-bottom: 8px; }
.soap-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 800; color: var(--ink-2); }
.soap-fields textarea, .note-form textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.crit-high { background: rgba(232,155,122,.22); border-color: rgba(232,155,122,.7); color: #8C3E1F; font-weight: 800; }
@media (max-width: 820px) { .clin-grid { grid-template-columns: 1fr 1fr; } .cf-wide { grid-column: span 2; } }
@media (max-width: 480px) { .clin-grid { grid-template-columns: 1fr; } .cf-wide { grid-column: auto; } }

.enroll-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.6rem;font-weight:700;letter-spacing:.18em;background:#fff;border:2px solid var(--teal,#1E6F6A);border-radius:8px;padding:8px 16px;margin:8px 0;color:var(--teal-deep,#16323B);}

/* Users and access (v0.41) */
.banner-warn { background: rgba(232,155,122,.16); border: 1px solid rgba(232,155,122,.45); color: #8A4129; }
.pill-ok { background: rgba(111,191,176,.28); color: #2C6F62; border: none; }
.inp-wide { min-width: 240px; }
.role-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.role-pick .role-chip { text-transform: none; letter-spacing: normal; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.role-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; margin-right: 5px; background: var(--sand-2); border: 1px solid var(--line); color: var(--ink); }
.role-tag.role-admin { background: rgba(30,111,106,.14); color: var(--teal-deep); border: none; }
.role-tag.role-clinician { background: rgba(156,198,220,.3); color: #2C586E; border: none; }
.role-tag.role-front-desk { background: rgba(232,155,122,.22); color: #9C4F30; border: none; }
.role-tag.role-registrar { background: rgba(111,191,176,.26); color: #2C6F62; border: none; }
.role-tag.role-patient { background: #EFE9DC; color: #5A5346; border: none; }

/* inline icon system (replaces emoji) */
.ic{width:1em;height:1em;vertical-align:-0.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

/* request queue cards (staff /app/requests) */
.req-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 26px; }
.req-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.req-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.req-who { font-weight: 800; color: var(--ink); text-decoration: none; }
.req-who:hover { color: var(--teal); }
.req-reason { font-size: .94rem; color: var(--ink-2); white-space: pre-wrap; }
.req-pref { margin-top: 4px; }
.req-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.req-decline { display: flex; align-items: center; gap: 8px; }
.req-decline input { font: inherit; font-size: .88rem; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 180px; background: #fff; }
.req-hint { margin-top: 10px; }
.empty-state { color: var(--muted); font-size: .92rem; padding: 10px 0 18px; }