/* CareBoon design system — tokens and core components.
   Reference: design/careboon-doctor-console.html
   Law: colour only ever means patient state; pen blue is the only action colour. */

:root {
  --ward: #F2F4F1;
  --chart: #FFFFFF;
  --ink: #1A2321;
  --faded: #55625E;
  --rule: #DDE3DD;
  --rule-soft: #EAEEEA;
  --pen: #2547C4;
  --pen-strong: #1D3AA8;
  --pen-soft: #EDF1FD;
  --red: #BE3A2C;
  --red-soft: #FBEFED;
  --amber: #96690A;
  --amber-band: #E0A81C;
  --amber-soft: #FBF3DE;
  --green: #2E7B4F;
  --green-soft: #E9F4ED;
  --shadow: 0 1px 2px rgba(26,35,33,.06), 0 6px 18px rgba(26,35,33,.07);
  --bar: #17201E;
  --bar-text: #F2F6F4;
  --bar-dim: #9DB0AA;
  --bar-accent: #A7B9F8;
  --mon: #131B19;
  --mon-line: rgba(255,255,255,.08);
  --mon-label: #829892;
  --mon-green: #58D8A1;
  --mon-amber: #F2B63D;
  --mon-white: #EAF1EE;
  --wait: #9AA5A0;
  --btn-pen-text: #FFFFFF;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ward: #101514;
    --chart: #1A211F;
    --ink: #E9EEEB;
    --faded: #9AA7A2;
    --rule: #2B3532;
    --rule-soft: #242D2A;
    --pen: #93A8F4;
    --pen-strong: #AAB9F6;
    --pen-soft: #202A40;
    --red: #E0705F;
    --red-soft: #362320;
    --amber: #D9AC47;
    --amber-band: #C29027;
    --amber-soft: #322B18;
    --green: #6FBE8F;
    --green-soft: #1D2E24;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --bar: #0D1211;
    --mon: #0D1412;
    --wait: #5C6864;
    --btn-pen-text: #0E1420;
  }
}

* { box-sizing: border-box; }

/* Faint hand-drawn medical motif behind the whole app. It sits above the scrub
   background colour and below all content (which lives on solid cards), so it
   only warms the gutters and never sits behind live clinical numbers. The
   transparent line-art is one image, loaded once and cached — negligible cost.
   A single slow whole-layer drift (GPU transform, not per-icon) adds life for
   free; it's gated on reduced-motion and shown in the light theme only. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../img/bg-doodles.e46a641a719e.webp") center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: bg-drift 120s ease-in-out infinite alternate; }
}
@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-1.8%, -1.4%, 0) scale(1.06); }
}
@media (prefers-color-scheme: dark) { body::before { display: none; } }
:root[data-theme="dark"] body::before { display: none; }
:root[data-theme="light"] body::before { display: block; }

body {
  margin: 0;
  background: var(--ward);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
}
h1, h2, h3 { text-wrap: balance; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 24px;
  background: var(--bar);
  color: var(--bar-text);
  position: sticky; top: 0; z-index: 5;
}
.wordmark { font-weight: 800; font-size: 19px; letter-spacing: .16em; text-transform: uppercase; }
.wordmark span { color: var(--bar-accent); }
.clinic { color: var(--bar-dim); font-size: 15px; border-left: 1px solid rgba(255,255,255,.16); padding-left: 20px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.who { text-align: right; line-height: 1.3; }
.who strong { display: block; font-size: 16px; }
.who small { color: var(--bar-dim); font-size: 13px; }
.logout-form { margin: 0; }
.btn-bar {
  background: transparent; color: var(--bar-text);
  border: 1px solid rgba(255,255,255,.25); border-radius: 7px;
  padding: 8px 14px; font-size: 14px; font-weight: 650;
}
.btn-bar:hover { border-color: rgba(255,255,255,.55); }

/* ---------- layout ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 24px; }
.muted { color: var(--faded); }

.card {
  background: var(--chart);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.eyebrow {
  font-size: 12.5px; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faded);
}

/* ---------- buttons ---------- */
.btn {
  border: 1.5px solid var(--rule); background: var(--chart); color: var(--ink);
  border-radius: 7px; padding: 9px 16px; font-size: 14.5px; font-weight: 650;
  text-decoration: none; display: inline-block;
}
.btn:hover { border-color: var(--faded); }
.btn-pen {
  background: var(--pen); border-color: var(--pen); color: var(--btn-pen-text);
  font-size: 15px; padding: 11px 20px;
}
.btn-pen:hover { background: var(--pen-strong); border-color: var(--pen-strong); }
.btn-ghost { color: var(--pen); border-color: transparent; background: transparent; font-weight: 700; }
.btn-ghost:hover { background: var(--pen-soft); }
.btn-block { width: 100%; }

/* ---------- tags ---------- */
.tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  padding: 3px 9px; border-radius: 4px; text-transform: uppercase;
  display: inline-block;
}
.tag-paid { background: var(--green-soft); color: var(--green); }
.tag-cashier { background: var(--rule-soft); color: var(--faded); }
.tag-now { background: var(--pen-soft); color: var(--pen); }
.tag-milestone { background: var(--rule-soft); color: var(--faded); }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faded);
}
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: 10px 14px;
  font: inherit; font-size: 16px;
  color: var(--ink);
  background: var(--chart);
  border: 1.5px solid var(--rule); border-radius: 7px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pen); outline: none;
}

.alert { border-radius: 7px; padding: 11px 14px; font-size: 14.5px; font-weight: 600; margin-bottom: 16px; }
.alert-error { background: var(--red-soft); color: var(--red); border: 1.5px solid color-mix(in srgb, var(--red) 45%, transparent); }

/* ---------- auth ---------- */
.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 200px); }
.auth-card { width: min(420px, 100%); padding: 32px; }
.auth-mark {
  font-weight: 800; font-size: 26px; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; margin-bottom: 4px;
}
.auth-mark span { color: var(--pen); }
.auth-sub { text-align: center; color: var(--faded); margin: 0 0 24px; }

/* split login: full-screen — brand poster beside the form */
.login-split {
  position: fixed; inset: 0; z-index: 5;
  display: grid; grid-template-columns: 1.1fr 1fr;
  grid-template-rows: minmax(0, 1fr);   /* pin rows to the viewport so the form centres */
  background: var(--chart); overflow: hidden;
}
/* brand panel — a typographic hero (no baked image), always on brand blue */
.login-brand {
  position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 7vh 5.5vw; color: #EAF0FF;
  background: linear-gradient(155deg, #1D3AA8 0%, #16205a 62%, #101a4d 100%);
}
.login-brand::before {   /* soft depth glow */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 12% 8%, rgba(167,185,248,.20), transparent 60%),
    radial-gradient(820px 480px at 92% 104%, rgba(37,71,196,.40), transparent 55%);
}
.brand-hero { position: relative; max-width: 470px; }
.brand-hero-logo { height: 46px; width: auto; display: block; margin-bottom: 8px; }
.brand-hero-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #A7B9F8; margin: 0 0 34px;
}
.brand-hero-head {
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; font-weight: 800;
  letter-spacing: -.01em; margin: 0 0 20px; color: #fff; text-wrap: balance;
}
.brand-hero-head em { font-style: normal; color: #A7B9F8; }
.brand-hero-lead {
  font-size: 17px; line-height: 1.5; color: #C7D2F5; margin: 0 0 28px; max-width: 42ch;
}
.brand-hero-flow {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.brand-hero-flow li {
  font-size: 13px; font-weight: 650; color: #DDE6FF;
  background: rgba(167,185,248,.14); border: 1px solid rgba(167,185,248,.24);
  padding: 6px 13px; border-radius: 999px;
}
.brand-hero-foot { font-size: 13px; color: #9FB0EC; margin: 0; }
.login-form {
  padding: 6vh 40px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.login-form > * { width: 100%; max-width: 400px; }
.login-form .auth-mark { text-align: left; font-size: 34px; margin-bottom: 2px; }
.login-form .auth-sub { text-align: left; margin-bottom: 28px; }
@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .login-brand { display: none; }
  .login-form { padding: 40px 26px; }
}

/* ---------- home / stations ---------- */
.home-head h1 { margin: 8px 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.home-head p { margin: 0 0 20px; }
.station-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.station { padding: 18px 20px; }
.station-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.station h2 { margin: 0; font-size: 18px; font-weight: 750; }
.station p { color: var(--faded); font-size: 14.5px; margin: 8px 0 12px; }
.station-mine { border: 2px solid var(--pen); }

/* ---------- page head + search ---------- */
.page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.search { margin-left: auto; display: flex; gap: 8px; }
.search input {
  min-width: 300px; min-height: 44px; padding: 8px 14px; font-size: 16px;
  color: var(--ink); background: var(--chart);
  border: 1.5px solid var(--rule); border-radius: 7px;
}
.search input:focus { border-color: var(--pen); outline: none; }
.bar-link { color: var(--bar-dim); font-size: 14.5px; font-weight: 650; text-decoration: none; }
.bar-link:hover { color: var(--bar-text); }
.bar-link.bar-on {
  color: var(--bar-text);
  border-bottom: 2px solid var(--bar-accent); padding-bottom: 2px;
}

/* ---------- panels + rows ---------- */
.panel { padding: 18px 20px; margin-bottom: 16px; }
.panel-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.row:last-of-type { border-bottom: 0; }
.row-main { min-width: 0; flex: 1; }
.row-main strong { display: block; font-size: 15.5px; }
.row-main .muted { font-size: 13.5px; }
.row-slim { padding: 10px 0; }
.row-slim .mono { font-size: 13.5px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input {
  min-height: 40px; padding: 6px 12px; font-size: 14.5px;
  color: var(--ink); background: var(--chart);
  border: 1.5px solid var(--rule); border-radius: 6px; max-width: 200px;
}
.inline-form input:focus { border-color: var(--pen); outline: none; }
.empty { color: var(--faded); padding: 8px 0; margin: 0; }
.btn-sm { padding: 7px 13px; font-size: 13.5px; }
.msgs { margin-bottom: 16px; }
.alert-ok { background: var(--green-soft); color: var(--green); border: 1.5px solid color-mix(in srgb, var(--green) 40%, transparent); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-error { display: block; color: var(--red); font-size: 13px; font-weight: 600; margin-top: 4px; }
.field-half { max-width: 380px; }
.check { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--pen); }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- queue cards ---------- */
.queue-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 2px 12px; }
.queue-count { font-size: 14px; color: var(--faded); }
.queue-count b { color: var(--ink); font-size: 16px; }
.qcard {
  display: flex;
  background: var(--chart);
  border: 1px solid var(--rule);
  border-radius: 9px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.band { width: 8px; flex: none; }
.band-red { background: var(--red); }
.band-amber { background: var(--amber-band); }
.band-green { background: var(--green); }
.band-wait { background: var(--wait); }
.qbody { padding: 13px 14px; min-width: 0; flex: 1; display: flex; gap: 12px; align-items: center; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; letter-spacing: .03em;
}
.av-red { background: var(--red-soft); color: var(--red); }
.av-amber { background: var(--amber-soft); color: var(--amber); }
.av-green { background: var(--green-soft); color: var(--green); }
.av-wait { background: var(--rule-soft); color: var(--faded); }
.qtext { min-width: 0; flex: 1; }
.qtop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qtop strong { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtop .agesex { color: var(--faded); font-size: 13.5px; flex: none; }
.qsub { color: var(--faded); font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.qwait { font-size: 13px; color: var(--faded); }

/* ---------- patient header ---------- */
.phead { padding: 18px 22px 16px; margin-bottom: 16px; }
.phead-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pavatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; flex: none;
}
.pname h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.pmeta { color: var(--faded); font-size: 14.5px; margin-top: 2px; }
.pmeta b { color: var(--ink); font-weight: 650; }
.allergy-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
}
.tag-allergy { background: var(--red-soft); color: var(--red); font-size: 12.5px; padding: 5px 10px; }

/* ---------- vitals form ---------- */
.vform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
.vfield input {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 22px; text-align: center; min-height: 56px;
}
.vfield .field-label em { font-style: normal; color: var(--faded); font-weight: 550; text-transform: none; letter-spacing: 0; }
.stepper { display: flex; gap: 6px; align-items: stretch; }
.stepper input { min-width: 0; flex: 1; }
.step {
  width: 46px; flex: none;
  font-size: 24px; font-weight: 800; line-height: 1;
  border: 1.5px solid var(--rule); border-radius: 7px;
  background: var(--chart); color: var(--pen);
}
.step:hover { border-color: var(--pen); background: var(--pen-soft); }
.field input[readonly] { background: var(--rule-soft); color: var(--faded); }

/* ---------- triage segmented control ---------- */
.triage-pick { margin: 6px 0 16px; }
.seg { display: flex; gap: 10px; margin-top: 6px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt {
  flex: 1; text-align: center; padding: 13px 10px; cursor: pointer;
  font-size: 15px; font-weight: 750;
  border: 1.5px solid var(--rule); border-radius: 7px;
  color: var(--faded);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.seg-opt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.seg-red::before { background: var(--red); }
.seg-amber::before { background: var(--amber-band); }
.seg-green::before { background: var(--green); }
#tri-red:checked + .seg-red { background: var(--red-soft); color: var(--red); border-color: var(--red); }
#tri-amber:checked + .seg-amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-band); }
#tri-green:checked + .seg-green { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.seg input:focus-visible + .seg-opt { outline: 2px solid var(--pen); outline-offset: 2px; }

/* ---------- cashier ---------- */
.charge-amount { font-size: 16px; font-weight: 650; }
.total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; margin-bottom: 6px;
  border-top: 2px solid var(--ink);
}
.total { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.seg input:checked + .seg-plain { background: var(--pen-soft); color: var(--pen); border-color: var(--pen); }
.seg-plain::before { display: none; }

/* ---------- vitals monitor (always dark — a monitor is dark) ---------- */
.qvitals { font-size: 13px; color: var(--faded); margin-top: 6px; }
.vitals {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--mon);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 16px;
}
.vtile { padding: 15px 20px 13px; border-right: 1px solid var(--mon-line); display: flex; flex-direction: column; gap: 3px; }
.vtile:nth-child(5) { border-right: 0; }
.vlabel { font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--mon-label); }
.vvalue { font-size: 34px; font-weight: 650; letter-spacing: -.01em; color: var(--mon-green); line-height: 1.1; }
.vvalue small { font-size: 14px; color: var(--mon-label); font-weight: 500; margin-left: 3px; }
.v-neutral .vvalue { color: var(--mon-white); }
.vflag .vvalue { color: var(--mon-amber); }
.vtag {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  background: rgba(242,182,61,.16); color: var(--mon-amber);
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
}
.vitals-foot { grid-column: 1 / -1; border-top: 1px solid var(--mon-line); padding: 8px 20px; font-size: 13px; color: var(--mon-label); }

/* ---------- journey rail ---------- */
.journey {
  display: flex; align-items: center;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  overflow-x: auto;
}
.jnode { display: flex; align-items: center; flex: none; }
.jdot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); color: var(--chart); flex: none;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
}
.jnode-now .jdot { background: var(--pen); color: transparent; position: relative; }
.jnode-now .jdot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--pen); opacity: .5;
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jnode-now .jdot::after { animation: none; } }
.jlabel { margin: 0 11px 0 8px; line-height: 1.25; }
.jlabel b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.jnode-now .jlabel b { color: var(--pen); }
.jlabel small { font-size: 11.5px; color: var(--faded); }
.jline { width: 30px; height: 3px; border-radius: 2px; background: var(--rule); margin-right: 11px; flex: none; }
.jline-done { background: var(--ink); }
.allergy-stack { margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.allergy {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--red-soft); color: var(--red);
  border: 1.5px solid color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: 7px; padding: 9px 14px;
  font-size: 14px; font-weight: 800;
}
.allergy small { font-weight: 550; opacity: .85; font-size: 12.5px; }

/* ---------- tabbed work panel ---------- */
.work { position: relative; margin-bottom: 16px; }
.work > input { position: absolute; opacity: 0; pointer-events: none; }
.tabbar { display: flex; gap: 26px; padding: 4px 22px 0; border-bottom: 1px solid var(--rule); }
.tabbar label {
  padding: 14px 2px 12px; cursor: pointer;
  font-size: 15.5px; font-weight: 700; color: var(--faded);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tabbar label:hover { color: var(--ink); }
.tabbar i {
  font-style: normal; font-size: 12px; font-weight: 750;
  background: var(--rule-soft); color: var(--faded);
  padding: 1px 8px; border-radius: 999px;
}
#t-notes:checked ~ .tabbar label[for="t-notes"],
#t-orders:checked ~ .tabbar label[for="t-orders"],
#t-proc:checked ~ .tabbar label[for="t-proc"],
#t-rx:checked ~ .tabbar label[for="t-rx"] { color: var(--ink); border-bottom-color: var(--pen); }
#t-notes:focus-visible ~ .tabbar label[for="t-notes"],
#t-orders:focus-visible ~ .tabbar label[for="t-orders"],
#t-proc:focus-visible ~ .tabbar label[for="t-proc"],
#t-rx:focus-visible ~ .tabbar label[for="t-rx"] { outline: 2px solid var(--pen); outline-offset: 2px; }
.tabpanel { display: none; padding: 16px 22px 22px; }
#t-notes:checked ~ .tp-notes,
#t-orders:checked ~ .tp-orders,
#t-proc:checked ~ .tp-proc,
#t-rx:checked ~ .tp-rx { display: block; }

/* ---------- orders & results ---------- */
.order { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.order:last-of-type { border-bottom: 0; }
.order-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.order-top strong { font-size: 15.5px; font-weight: 700; }
.dept {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--faded); text-transform: uppercase;
  background: var(--rule-soft); padding: 2px 8px; border-radius: 4px;
}
.order-top .price { margin-left: auto; font-size: 13px; color: var(--faded); white-space: nowrap; }
.result-line {
  margin-top: 9px; padding: 9px 12px; border-radius: 6px;
  background: var(--ward); font-size: 14.5px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.result-line a { color: var(--pen); font-weight: 700; }
.flag { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.flag-abn { background: var(--red-soft); color: var(--red); }
.flag-norm { background: var(--green-soft); color: var(--green); }
.order-meta { margin-top: 7px; font-size: 12.5px; color: var(--faded); }
.order-form { margin-top: 18px; padding-top: 6px; border-top: 2px solid var(--ink); }
.order-section { margin: 14px 0 8px; font-size: 12.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--faded); }
.test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.test-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  border: 1.5px solid var(--rule); border-radius: 7px;
}
.test-pick:has(input:checked) { border-color: var(--pen); background: var(--pen-soft); }
.test-pick input { width: 19px; height: 19px; accent-color: var(--pen); flex: none; }
.tp-name { font-weight: 650; font-size: 14.5px; flex: 1; }
.tp-price { font-size: 13px; color: var(--faded); white-space: nowrap; }
.seg input:checked + .seg-normal { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.seg input:checked + .seg-abnormal { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.seg-normal::before { background: var(--green); }
.seg-abnormal::before { background: var(--red); }
.field input[type="file"] { min-height: 0; padding: 10px; font-size: 14px; }

/* ---------- pharmacy ---------- */
.stock { font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.stock-in { background: var(--green-soft); color: var(--green); }
.stock-short { background: var(--amber-soft); color: var(--amber); }
.tag-low { background: var(--amber-soft); color: var(--amber); }
.tag-out { background: var(--red-soft); color: var(--red); }
.rx-add-grid { display: grid; grid-template-columns: 2fr 1.6fr .8fr; gap: 0 14px; }
@media (max-width: 900px) { .rx-add-grid { grid-template-columns: 1fr; } }
.dose-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.dose-sel {
  min-height: 44px; padding: 8px 11px; font-size: 14.5px; font-weight: 600;
  color: var(--ink); background: var(--chart);
  border: 1.5px solid var(--rule); border-radius: 7px;
}
.dose-sel:focus { border-color: var(--pen); outline: none; }
.dose-food { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.dose-food input { width: 18px; height: 18px; accent-color: var(--pen); }
.dose-out { background: var(--rule-soft); font-weight: 650; cursor: default; }
.dose-out:focus { border-color: var(--rule); outline: none; }
.rx-result-grid { display: grid; grid-template-columns: 1fr 150px; gap: 0 14px; }
@media (max-width: 640px) { .rx-result-grid { grid-template-columns: 1fr; } .dose-sel { flex: 1 1 44%; } }

/* ---------- assistant rail ---------- */
.console-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .console-grid { grid-template-columns: minmax(0, 1fr); } }
.assist-card { overflow: hidden; }
.assist-head {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 18px 12px; border-bottom: 1px solid var(--rule-soft);
}
.assist-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pen); animation: pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .assist-dot { animation: none; } }
.sitem { padding: 13px 18px; border-bottom: 1px solid var(--rule-soft); }
.sitem:last-of-type { border-bottom: 0; }
.sitem h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pen);
}
.sitem p { margin: 0 0 6px; font-size: 14px; }
.sitem p:last-child { margin-bottom: 0; }
.s-line { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 6px; }
.s-line p { flex: 1; margin: 0; }
.s-line form { margin: 0; }
.slink {
  background: none; border: none; padding: 2px 0;
  font-size: 13px; font-weight: 700; color: var(--pen); white-space: nowrap;
}
.slink:hover { text-decoration: underline; }
.s-meta { background: color-mix(in srgb, var(--ward) 50%, var(--chart)); }
.s-meta p { font-size: 11.5px; }
.assist-error { color: var(--red); font-weight: 600; font-size: 14px; }
.assist-wait { color: var(--faded); font-size: 13.5px; margin: 8px 0 0; }
.assist-foot { padding: 12px 18px 14px; font-size: 12.5px; color: var(--faded); border-top: 1px solid var(--rule-soft); }
.assist-foot p { margin: 0; }

/* ---------- announcements & sponsored slots ---------- */
.ann-wrap { display: grid; gap: 12px; margin-bottom: 20px; }
.ann { padding: 15px 18px; border-left: 4px solid var(--pen); }
.ann-hq { border-left-color: var(--ink); }
.ann-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ann h3 { margin: 0 0 4px; font-size: 17px; font-weight: 750; }
.ann p { margin: 0; font-size: 14.5px; }
.ann-roles { font-size: 12.5px; margin-top: 6px; text-transform: capitalize; }
.ads { margin-top: 24px; }
.ads-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.ads-head .muted { font-size: 12.5px; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ad { padding: 15px 18px; border-style: dashed; box-shadow: none; }
.ad-sponsor {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faded); background: var(--rule-soft); padding: 2px 8px; border-radius: 4px;
}
.ad h3 { margin: 10px 0 4px; font-size: 16px; font-weight: 750; }
.ad p { margin: 0 0 10px; font-size: 14px; color: var(--faded); }

/* ---------- admin consoles ---------- */
.role-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.role-pick {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1.5px solid var(--rule); border-radius: 7px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.role-pick:has(input:checked) { border-color: var(--pen); background: var(--pen-soft); color: var(--pen); }
.role-pick input { width: 17px; height: 17px; accent-color: var(--pen); }
.price-input { width: 110px; min-height: 40px; padding: 6px 10px; font-size: 14.5px;
  font-family: var(--mono); border: 1.5px solid var(--rule); border-radius: 6px;
  background: var(--chart); color: var(--ink); }
.price-input:focus { border-color: var(--pen); outline: none; }
.expiry-panel { border-left: 4px solid var(--amber-band); margin-bottom: 16px; }

/* ---------- allergy block ---------- */
.rx-blocked {
  border: 2px solid var(--red); background: var(--red-soft);
  border-radius: 9px; padding: 15px 17px; margin: 14px 0;
}
.rx-blocked-head { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.rx-blocked-msg { margin: 6px 0 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.block-log { margin: 4px 0 12px; font-size: 12px; color: var(--faded); }
.rx-override-note { margin-top: 6px; font-size: 12.5px; font-weight: 650; color: var(--red); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.btn-danger:hover { filter: brightness(1.08); }

/* ---------- misc ---------- */
.station-foot { display: flex; align-items: center; justify-content: space-between; }
.danger-zone { margin-top: 4px; }
.btn-danger-ghost { color: var(--red); border-color: transparent; background: transparent; font-weight: 700; }
.btn-danger-ghost:hover { background: var(--red-soft); }

/* ---------- insurance & claims ---------- */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.chip {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--rule); color: var(--faded); background: var(--chart);
}
.chip:hover { border-color: var(--faded); }
.chip-on { background: var(--pen); border-color: var(--pen); color: var(--btn-pen-text); }
.chip-ins { background: var(--pen-soft); border-color: transparent; color: var(--pen); font-weight: 750; margin-left: 8px; }

/* insurance chip on the patient-meta line shouldn't stretch */
.pmeta .chip-ins { vertical-align: baseline; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* tables */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
.tbl thead th { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--faded); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover { background: var(--rule-soft); }
.tbl .empty { padding: 22px; text-align: center; color: var(--faded); }
.tfoot-total th { border-top: 2px solid var(--rule); font-size: 15px; }
.actions-col { text-align: right; }
.link { color: var(--pen); text-decoration: none; font-weight: 700; }
.link:hover { text-decoration: underline; }

.age-chip { font-size: 12px; font-weight: 700; color: var(--faded); }
.age-old { color: var(--red); }

.claim-badge {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px; display: inline-block;
}
.claim-open { background: var(--rule-soft); color: var(--faded); }
.claim-submitted { background: var(--pen-soft); color: var(--pen); }
.claim-part_paid { background: var(--amber-soft); color: var(--amber); }
.claim-paid { background: var(--green-soft); color: var(--green); }
.claim-rejected { background: var(--red-soft); color: var(--red); }

/* per-row payment/reject menu on the tracker */
.rowmenu summary { list-style: none; cursor: pointer; }
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rowmenu-form input { min-height: 40px; padding: 8px 11px; font: inherit; font-size: 14px; border: 1.5px solid var(--rule); border-radius: 6px; background: var(--chart); color: var(--ink); }

/* cashier cover panel */
.cover-card { border-left: 4px solid var(--pen); }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; }
.cover-grid strong { display: block; font-size: 15.5px; }
.cover-warn {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--amber-soft); color: var(--amber); font-weight: 650; font-size: 14.5px;
}
.auth-fix { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.auth-fix input { min-height: 42px; padding: 8px 12px; font: inherit; font-size: 15px; border: 1.5px solid var(--rule); border-radius: 7px; background: var(--chart); color: var(--ink); flex: 1; min-width: 180px; }
.cover-form .field-narrow { max-width: 160px; }
.field-narrow input { width: 100%; }

/* charge split lines */
.split { display: block; margin-top: 3px; font-size: 13px; font-weight: 650; }
.split-pat { color: var(--ink); }
.split-ins { color: var(--pen); }
.row-excluded { opacity: .72; }
.total-split .total { font-size: 17px; }

/* insurers page */
.insurer-row { align-items: center; gap: 14px; flex-wrap: wrap; }
.insurer-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.insurer-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px 10px 14px; border: 1.5px solid var(--rule); border-radius: 9px; }
.insurer-pick:hover { border-color: var(--faded); }
.insurer-pick-name { font-size: 14.5px; }
.row-off { opacity: .55; }
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline .field-label { margin-bottom: 0; }
.field-inline input { min-height: 42px; width: 90px; padding: 8px 10px; font: inherit; font-size: 15px; border: 1.5px solid var(--rule); border-radius: 7px; background: var(--chart); color: var(--ink); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; }
.chk-field { grid-column: 1 / -1; }

/* claim statement */
.statement { padding: 28px; }
.stmt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--rule); margin-bottom: 18px; flex-wrap: wrap; }
.stmt-clinic { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.stmt-meta { display: flex; flex-direction: column; gap: 4px; text-align: right; align-items: flex-end; }
.stmt-grid { margin-bottom: 20px; }
.stmt-section { padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.stmt-section > p { font-size: 15px; line-height: 1.55; }
.stmt-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faded); margin-bottom: 6px; }
.stmt-sign { display: flex; gap: 40px; margin-top: 24px; padding-top: 18px; }
.stmt-sign > div { flex: 1; }
.stmt-sign-line { margin-top: 22px; border-top: 1.5px solid var(--ink); padding-top: 5px; font-weight: 650; min-height: 1.4em; }

/* reception insurance sub-block */
.subform { margin: 4px 0 16px; padding: 14px 16px; border: 1.5px solid var(--rule-soft); border-radius: 9px; background: color-mix(in srgb, var(--pen-soft) 45%, transparent); }
.subform > .field-label { margin-bottom: 10px; }
.subform .field { margin-bottom: 0; }

.stmt-thanks { margin-top: 18px; text-align: center; }

/* platform: activity badges, dept tools, ad images */
.act-badge { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; display: inline-block; }
.act-active { background: var(--green-soft); color: var(--green); }
.act-quiet { background: var(--amber-soft); color: var(--amber); }
.act-dormant { background: var(--red-soft); color: var(--red); }
.act-new { background: var(--pen-soft); color: var(--pen); }
.act-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }

/* ---------- CareBoon HQ command centre ---------- */
.hq-head p { margin: 6px 0 0; }
.hq-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin: 8px 0 22px; }
.hq-tile { position: relative; padding: 20px 20px 18px; overflow: hidden; }
.hq-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pen); }
.hq-tile.hq-accent-green::before { background: var(--green); }
.hq-tile.hq-accent-strong::before { background: var(--pen-strong); }
.hq-tile.hq-accent-amber::before { background: var(--amber-band); }
.hq-tile.hq-accent-red::before { background: var(--red); }
.hq-num { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 12px 0 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hq-sub { font-size: 13.5px; font-weight: 600; color: var(--faded); }
.hq-warn { color: var(--red); font-weight: 750; }
.hq-customers .tbl td { padding: 14px 12px; }
.hq-name { font-weight: 750; color: var(--ink); font-size: 15px; }

/* day-end / revenue report */
.report-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; padding: 26px 30px; margin-bottom: 18px; }
.report-figures { display: flex; gap: 44px; flex-wrap: wrap; }
.report-fig { display: flex; flex-direction: column; }
.report-big { font-size: 40px; font-weight: 820; letter-spacing: -.025em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.report-fig-total .report-big { color: var(--pen); }
.report-cur { font-size: 12.5px; font-weight: 650; color: var(--faded); margin-top: 5px; }

.report-controls { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg-toggle { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg-btn { padding: 7px 15px; font-size: 13.5px; font-weight: 700; color: var(--faded); text-decoration: none; }
.seg-btn:hover { background: var(--rule-soft); }
.seg-btn.is-on { background: var(--pen); color: var(--btn-pen-text); }
.seg-btn + .seg-btn { border-left: 1.5px solid var(--rule); }
.date-nav { display: inline-flex; align-items: stretch; border: 1.5px solid var(--rule); border-radius: 8px; overflow: hidden; }
.date-nav a { display: inline-flex; align-items: center; padding: 7px 12px; font-weight: 700; color: var(--ink); text-decoration: none; }
.date-nav a:hover { background: var(--rule-soft); }
.date-nav .date-today { border-left: 1.5px solid var(--rule); border-right: 1.5px solid var(--rule); font-size: 13.5px; }
.date-nav .date-arrow { font-size: 18px; line-height: 1; }

.tbl tr.row-total td { font-weight: 750; color: var(--ink); border-top: 1.5px solid var(--rule); }
.tbl tr.row-grand td { font-size: 16px; border-top: 2px solid var(--ink); }

/* ---------- inpatient ---------- */
.ward-block { padding: 4px 0 16px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 12px; }
.ward-block:last-child { border-bottom: none; margin-bottom: 0; }
.ward-head { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 10px; }
.ward-head strong { font-size: 15.5px; }
.bed-board { display: flex; flex-wrap: wrap; gap: 10px; }
.bed { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--rule); text-decoration: none; position: relative; }
.bed-label { font-weight: 800; font-size: 12.5px; letter-spacing: .04em; color: var(--faded); }
.bed-who { font-size: 14px; font-weight: 650; color: var(--ink); }
.bed-free { background: var(--chart); }
.bed-free .bed-who { color: var(--faded); font-weight: 600; }
.bed-occ { background: var(--pen-soft); border-color: transparent; }
.bed-occ:hover { box-shadow: var(--shadow); }
.bed-occ .bed-who { color: var(--pen-strong); }
.bed-off { background: var(--rule-soft); opacity: .75; }
.bed-x { position: absolute; top: 5px; right: 6px; }

.adm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 22px; margin-top: 16px; }
.adm-facts strong { display: block; font-size: 14.5px; margin-top: 2px; }
.adm-summary { margin-top: 16px; }

.round-log { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.round-item { border-left: 3px solid var(--pen-soft); padding: 1px 0 1px 14px; }
.round-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.round-item p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; }

.obs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.obs-form .field { margin-bottom: 12px; }
.obs-table td { white-space: nowrap; }
.obs-high { color: var(--red); font-weight: 750; }
.obs-low { color: var(--pen); font-weight: 750; }

.ward-admin { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.ward-admin-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ward-admin-head strong { font-size: 15.5px; }

.admit-panel { margin-bottom: 16px; }
.admit-summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.admit-summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) { .obs-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- inpatient medication chart (MAR) ---------- */
.console-main { min-width: 0; }
.mar-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 16px; }

.mar-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.mar-order { border: 1.5px solid var(--rule); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; background: var(--chart); }
.mar-order.mar-overdue { border-left-color: var(--red); }
.mar-order.mar-due { border-left-color: var(--amber-band); }
.mar-order.mar-scheduled { border-left-color: var(--pen); }
.mar-order.mar-none, .mar-order.mar-prn { border-left-color: var(--rule); }
.mar-order-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mar-drug strong { font-size: 16px; }
.mar-dose { margin-left: 6px; color: var(--ink); font-weight: 650; }
.mar-meta { color: var(--faded); font-size: 13px; margin-top: 2px; }
.mar-caution { color: var(--red); font-size: 13px; margin-top: 4px; }

.due-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.due-overdue { background: rgba(200,40,40,.12); color: var(--red); }
.due-now { background: rgba(217,131,36,.16); color: #a75c07; }
.due-sched, .due-prn { background: var(--rule-soft); color: var(--faded); }

.mar-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mar-slot { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; border: 1.5px solid var(--rule); font-size: 12px; }
.mar-slot .slot-tick { font-weight: 800; }
.slot-given { background: var(--green-soft); border-color: transparent; color: var(--green); }
.slot-held { background: rgba(200,40,40,.1); border-color: transparent; color: var(--red); }
.slot-due { background: rgba(217,131,36,.14); border-color: transparent; color: #a75c07; }
.slot-overdue { background: rgba(200,40,40,.12); border-color: transparent; color: var(--red); }
.slot-upcoming { color: var(--faded); }
.mar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.mar-actions form { margin: 0; }
.mar-hold > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--faded); padding: 6px 10px; border: 1.5px solid var(--rule); border-radius: 8px; }
.mar-hold > summary::-webkit-details-marker { display: none; }
.mar-hold[open] > summary { color: var(--ink); }
.mar-hold-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.mar-hold-form select { max-width: 190px; }

.mar-log { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--rule-soft); font-size: 12.5px; }
.mar-entry { color: var(--faded); }
.mar-entry.mar-given b { color: var(--pen); }
.mar-entry.mar-held b { color: var(--red); }
.mar-entry .muted { margin-left: 4px; }

.mar-order-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.mar-past { margin-top: 14px; }
.mar-past > summary { cursor: pointer; font-weight: 700; color: var(--faded); font-size: 13.5px; }
.mar-past-order { opacity: .78; margin-top: 8px; }

.ward-assist { position: sticky; top: 16px; }
@media (max-width: 900px) {
  .mar-wrap { grid-template-columns: 1fr; }
  .ward-assist { position: static; }
}

/* ---------- patient history (consultation) ---------- */
.history-panel { margin-bottom: 16px; }
.history-summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.history-summary::-webkit-details-marker { display: none; }
.history-summary::before { content: "▸"; color: var(--faded); font-size: 11px; }
.history-panel[open] .history-summary::before { content: "▾"; }
.history-body { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.history-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faded); margin-bottom: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-dx { background: var(--pen-soft); border-color: transparent; color: var(--pen); font-weight: 700; }
.history-list { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.history-list li { line-height: 1.45; }
.res-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.res-abnormal { background: rgba(200,40,40,.12); color: var(--red); }
.res-normal { background: var(--rule-soft); color: var(--faded); }
.history-visits { font-size: 14px; }

/* ---------- lab / imaging: scan preview + AI read ---------- */
.scan-link { display: inline-block; margin: 8px 0 4px; }
.scan-thumb { max-width: 160px; max-height: 160px; border-radius: 10px; border: 1.5px solid var(--rule); object-fit: cover; display: block; background: #000; }
.scan-thumb:hover { border-color: var(--pen); }
.scan-thumb-lg { max-width: 320px; max-height: 320px; }

.lab-read { margin-top: 10px; padding: 12px 14px; border: 1.5px solid var(--rule); border-left: 4px solid var(--pen); border-radius: 10px; background: var(--chart); }
.lab-urgent { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: rgba(200,40,40,.1); color: var(--red); font-size: 13.5px; }
.lab-urgent strong { font-weight: 800; }
.lab-impression { font-size: 15px; margin-bottom: 8px; }
.lab-sec { margin-top: 8px; }
.lab-sec .field-label { display: block; margin-bottom: 3px; }
.lab-sec ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.lab-sec li { font-size: 14px; line-height: 1.45; padding-left: 14px; position: relative; }
.lab-sec li::before { content: "·"; position: absolute; left: 4px; color: var(--faded); }
.lab-read-meta { margin-top: 10px; font-size: 11.5px; }
.lab-read-btn { margin-top: 6px; }
.lab-read-wait { margin-left: 8px; font-size: 12.5px; color: var(--faded); }
.lab-read-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.lab-read-premium { color: var(--faded); }
.lab-read-note { font-size: 11.5px; line-height: 1.4; margin-top: 8px; }
.deident-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--faded); margin: 8px 0; line-height: 1.4; cursor: pointer; }
.deident-check input { margin-top: 2px; flex-shrink: 0; }
.ward-summary { font-size: 14px; line-height: 1.5; }

/* ---------- pharmaceutical detail aid (ads) ---------- */
.ad-detail-list { display: flex; flex-direction: column; gap: 16px; }
.ad-detail-card { padding: 0; overflow: hidden; }
.ad-detail { padding: 0 0 16px; }
.ad-indication { background: var(--pen); color: var(--btn-pen-text); font-weight: 750; font-size: 13.5px; text-align: center; padding: 8px 16px; letter-spacing: .01em; }
.ad-detail > :not(.ad-indication) { margin-left: 20px; margin-right: 20px; }
.ad-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 14px; }
.ad-brandwrap { min-width: 0; }
.ad-detail .ad-sponsor { display: block; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--faded); }
.ad-brand { font-size: 26px; font-weight: 850; letter-spacing: -.02em; color: var(--pen); line-height: 1.05; margin-top: 2px; }
.ad-molecule { font-size: 13.5px; color: var(--faded); margin-top: 3px; }
.ad-packshot { max-width: 96px; max-height: 110px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.ad-tagline { font-size: 17px; font-weight: 750; color: var(--ink); margin-top: 12px; line-height: 1.3; }
.ad-body { font-size: 14.5px; color: var(--faded); line-height: 1.55; margin-top: 8px; }
.ad-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ad-point { background: var(--pen-soft); color: var(--pen); font-weight: 650; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.ad-dosing { margin-top: 16px; overflow-x: auto; }
.ad-dosing .field-label { display: block; margin-bottom: 6px; }
.ad-dose-table { font-size: 13.5px; }
.ad-dose-table th { font-size: 11.5px; }
.ad-detail-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 16px; }
.ad-disclaimer { font-size: 11.5px; line-height: 1.4; flex: 1; min-width: 180px; }
.ad-refs { margin-top: 14px; padding: 12px 16px 2px 34px; border-top: 1px solid var(--rule-soft); font-size: 11px; color: var(--faded); }
.ad-refs li { margin-bottom: 4px; line-height: 1.4; }

/* compact teaser on the console rail */
.ad-indication-chip { display: inline-block; background: var(--pen-soft); color: var(--pen); font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }
.ad-brand-sm { font-size: 19px; font-weight: 850; letter-spacing: -.01em; color: var(--pen); line-height: 1.1; }
.ad-molecule-sm { font-size: 12.5px; color: var(--faded); margin-top: 2px; }
.ad-tagline-sm { font-size: 14px; font-weight: 650; color: var(--ink); margin-top: 8px; }

/* Poster-first rail: the creative is the hook. The image fills the card and a
   thin footer strip carries the sponsor + the invitation to open the detail. */
.ad-slide-poster { padding: 0; overflow: hidden; border-style: solid; }
/* Each poster sets its own height at the column width — no fixed frame, so no
   empty bands. Portrait creatives (which share an aspect) come out the same
   height; a landscape creative is simply shorter, but always fills its space. */
.ad-poster-frame { position: relative; overflow: hidden; background: var(--chart); }
.ad-poster { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .35s ease; }
.ad-slide:hover .ad-poster, .ad-slide:focus-visible .ad-poster { transform: scale(1.035); }
.ad-poster-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--rule-soft); }
.ad-poster-foot .ad-sponsor { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--faded); }
.ad-poster-foot .ad-more { margin-top: 0; }

/* "Tap to expand" cue — fades in over the poster so it reads as clickable. */
.ad-poster-veil { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px;
  background: linear-gradient(to top, rgba(20,28,26,.66), rgba(20,28,26,0) 58%); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ad-slide:hover .ad-poster-veil, .ad-slide:focus-visible .ad-poster-veil { opacity: 1; }
.ad-poster-cue { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.96); color: var(--pen);
  font-weight: 750; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 5px 16px rgba(0,0,0,.22);
  transform: translateY(6px); transition: transform .25s ease; }
.ad-slide:hover .ad-poster-cue, .ad-slide:focus-visible .ad-poster-cue { transform: none; }

/* Rotation timing bar — a live fill so the auto-advance feels intentional. */
/* Per-ad impression figure on the HQ slots list. */
.ad-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 0 6px; }
.ad-stat-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--ink); }
.ad-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faded); }

.ad-progress { height: 3px; border-radius: 2px; background: var(--rule-soft); overflow: hidden; }
.ad-progress span { display: block; height: 100%; width: 100%; background: var(--pen); transform-origin: left; transform: scaleX(0); }
.ad-show.is-paused .ad-progress span { animation-play-state: paused !important; }
@keyframes adProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Full poster in the reader: shown whole, uncropped — the star of the panel. */
.ad-detail.has-poster { padding-top: 0; }
.ad-poster-zoom { display: block; position: relative; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.ad-poster-full { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: 12px; background: #fff; }
.ad-poster-zoom-cue { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20,28,26,.78); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
  opacity: 0; transition: opacity .2s ease; }
.ad-poster-zoom:hover .ad-poster-zoom-cue, .ad-poster-zoom:focus-visible .ad-poster-zoom-cue { opacity: 1; }
.ad-detail-head-poster { margin-top: 14px; }
.ad-modal-dialog:has(.ad-poster-full) { width: min(540px, calc(100vw - 32px)); }

.tools-wrap { margin-top: 26px; }
.tools-wrap > .eyebrow { display: block; margin-bottom: 12px; }

.ad-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 7px; flex: none; }
.ad-img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.ad-ph { border-style: dashed; }
.ad-ph-art {
  height: 148px; margin-bottom: 12px; border-radius: 8px;
  display: grid; place-items: center; text-align: center;
  color: var(--pen); font-weight: 700; font-size: 13px; letter-spacing: .03em;
  border: 1px dashed var(--rule);
  background: repeating-linear-gradient(-45deg, var(--pen-soft), var(--pen-soft) 11px, transparent 11px, transparent 22px);
}

/* console ad rail — worklist screens (never the consultation) */
.console-ads.has-rail { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.ad-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.ad-rail-label { display: block; }
.ad-rail .ad { margin: 0; }

/* slideshow */
.ad-show { position: relative; }
.ad-slide { display: none; cursor: pointer; outline: none; }
.ad-slide.is-active { display: block; animation: adFade .45s ease; }
.ad-slide .ad { transition: transform .18s ease, box-shadow .18s ease; }
.ad-slide:hover .ad, .ad-slide:focus-visible .ad { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,35,33,.12); }
.ad-slide:focus-visible .ad { border-color: var(--pen); }
.ad-more { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 750; color: var(--pen); }
.ad-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.ad-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); transition: background .2s; }
.ad-dot.is-active { background: var(--pen); }
@keyframes adFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* expand modal — blurs the console while the doctor reads */
.ad-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.ad-modal.is-open { display: block; }
.ad-modal-backdrop { position: absolute; inset: 0; background: rgba(15,20,25,.42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: adBackdrop .3s ease; }
.ad-modal-dialog { position: relative; z-index: 1; width: min(460px, calc(100vw - 32px)); max-height: 86vh; overflow: auto; margin: 9vh auto; padding: 30px; background: var(--chart); border: 1.5px solid var(--rule); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.32); animation: adPop .34s cubic-bezier(.2,.9,.3,1.1); }
.ad-modal-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: none; border-radius: 8px; background: transparent; color: var(--faded); font-size: 26px; line-height: 1; cursor: pointer; }
.ad-modal-close:hover { background: var(--rule-soft); color: var(--ink); }
.ad-modal-card h2 { margin: 6px 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ad-modal-card p { color: var(--faded); font-size: 15.5px; line-height: 1.55; }
.ad-modal-img { width: 100%; max-height: 240px; object-fit: cover; object-position: top center; border-radius: 12px; margin-bottom: 16px; }
.ad-modal-timer { height: 3px; background: var(--rule-soft); border-radius: 2px; margin-top: 20px; overflow: hidden; }
.ad-modal-timer span { display: block; height: 100%; background: var(--pen); transform-origin: left; animation: adCountdown 30s linear forwards; }
body.ad-modal-lock { overflow: hidden; }
@keyframes adBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes adPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes adCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 900px) {
  .console-ads.has-rail { display: block; }
  .ad-rail { display: none; }   /* keep the worklist unobstructed on small screens */
}
@media (prefers-reduced-motion: reduce) {
  .ad-slide.is-active, .ad-modal-backdrop, .ad-modal-dialog { animation: none; }
  .ad-progress span { animation: none !important; }
  .ad-slide:hover .ad-poster, .ad-slide:focus-visible .ad-poster { transform: none; }
}

/* shift logs: person picker sits at the end of the filter row */
.log-who { margin-left: auto; }
.log-who select { min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14.5px; border: 1.5px solid var(--rule); border-radius: 7px; background: var(--chart); color: var(--ink); }

@media print {
  .no-print, .topbar { display: none !important; }
  .page { padding: 0; }
  .statement { box-shadow: none; border: none; }
}

@media (max-width: 720px) {
  .clinic { display: none; }
  .page { padding: 16px; }
  .search { margin-left: 0; width: 100%; }
  .search input { min-width: 0; flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .seg { flex-direction: column; }
  .vitals { grid-template-columns: repeat(3, 1fr); }
  .vtile { border-bottom: 1px solid var(--mon-line); }
  .vtile:nth-child(5) { border-right: 1px solid var(--mon-line); }
  .vvalue { font-size: 28px; }
  .allergy-stack { margin-left: 0; align-items: flex-start; }
  .tabbar { gap: 16px; overflow-x: auto; }
  .head-actions { margin-left: 0; width: 100%; }
  .insurer-row { align-items: flex-start; }
}

/* Appointments schedule */
.sched-day { font-weight: 750; font-size: 13px; color: var(--faded); text-transform: uppercase;
  letter-spacing: .04em; margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--rule-soft); }
.sched-day:first-child { margin-top: 4px; }
.appt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.appt-time { font-weight: 700; font-size: 15px; min-width: 46px; }
.appt-more { position: relative; }
.appt-more > summary { list-style: none; cursor: pointer; }
.appt-more > summary::-webkit-details-marker { display: none; }
.appt-resched { display: flex; gap: 6px; align-items: center; margin-top: 8px;
  padding: 8px; background: var(--ward); border: 1px solid var(--rule); border-radius: 8px; }

/* HQ per-clinic AI budget control */
.budget-form { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.budget-form input[type="number"] { width: 80px; font-family: var(--mono); font-size: 12px; padding: 3px 6px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--chart); color: var(--ink); }
.budget-sep { color: var(--faded); }
.budget-over { color: var(--red); font-weight: 700; }

/* Owner analytics — CSS bar charts (no JS, light on slow connections) */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 88px 1fr 40px; align-items: center; gap: 10px; }
.bar-label { font-size: 12.5px; color: var(--faded); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 16px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--pen); border-radius: 4px; min-width: 2px; transition: width .3s ease; }
.bar-fill-alt { background: var(--green); }
.bar-val { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.analytics-tbl { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } }

/* Drug-interaction caution on the dispensing screen */
.rx-interactions { border: 1px solid var(--amber-band); background: var(--amber-soft); padding: 14px 18px; margin-bottom: 16px; }
.rx-interactions-head { font-weight: 750; color: var(--amber); margin-bottom: 8px; }
.rx-interaction-line { margin: 4px 0; font-size: 14px; }

/* ============================================================
   Public site — landing, pricing, sign-up. Uses the same tokens
   as the app so the brand is one thing, but its own chrome.
   ============================================================ */
.site { background: var(--chart); }
.site-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 28px; border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; background: var(--chart); z-index: 20; flex-wrap: wrap;
}
.site-logo img { height: 34px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a { color: var(--faded); font-weight: 650; font-size: 15.5px; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.btn { color: var(--btn-pen-text); }
.site-in { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

.btn-lg { padding: 14px 26px; font-size: 16.5px; }
.btn-ghost-light {
  background: transparent; color: #EAF0FF; border: 1px solid rgba(234,240,255,.45);
}
.btn-ghost-light:hover { background: rgba(234,240,255,.12); }

/* hero */
.site-hero {
  background: linear-gradient(155deg, #1D3AA8 0%, #16205a 62%, #101a4d 100%);
  color: #EAF0FF; padding: 84px 0 72px; position: relative; overflow: hidden;
}
.site-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 12% 4%, rgba(167,185,248,.20), transparent 60%),
    radial-gradient(820px 480px at 92% 104%, rgba(37,71,196,.40), transparent 55%);
}
.site-hero-in { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.site-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #A7B9F8; margin: 0 0 18px;
}
.site-hero h1 {
  font-size: clamp(38px, 5.4vw, 66px); line-height: 1.03; font-weight: 800;
  letter-spacing: -.015em; margin: 0 0 22px; color: #fff; text-wrap: balance;
}
.site-hero h1 em { font-style: normal; color: #A7B9F8; }
.site-lead { font-size: 18.5px; line-height: 1.55; color: #C7D2F5; max-width: 62ch; margin: 0 0 30px; }
.site-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.site-hero-note { font-size: 14px; color: #9FB0EC; margin: 0 0 34px; }
.site-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.site-flow li {
  font-size: 13.5px; font-weight: 650; color: #DDE6FF;
  background: rgba(167,185,248,.14); border: 1px solid rgba(167,185,248,.24);
  padding: 7px 14px; border-radius: 999px;
}

/* stat band */
.site-band { background: var(--pen-soft); border-bottom: 1px solid var(--rule-soft); }
.site-band-in {
  max-width: 1080px; margin: 0 auto; padding: 26px 28px;
  display: flex; gap: 44px; flex-wrap: wrap; justify-content: space-around;
}
.site-stat { text-align: center; }
.site-stat b { display: block; font-size: 30px; font-weight: 800; color: var(--pen); }
.site-stat span { font-size: 14.5px; color: var(--faded); }

/* sections */
.site-section { padding: 72px 0; }
.site-section-alt { background: var(--ward); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.site-section h2, .site-close h2, .site-head h1 {
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 800;
  letter-spacing: -.01em; margin: 0 0 14px; color: var(--ink); text-wrap: balance;
}
.site-sub { font-size: 17px; color: var(--faded); margin: 0 0 32px; max-width: 60ch; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 30px; }
.site-card {
  background: var(--chart); border: 1px solid var(--rule); border-radius: 12px;
  padding: 22px 24px; box-shadow: var(--shadow);
}
.site-card h3 { font-size: 18.5px; font-weight: 750; margin: 0 0 8px; color: var(--ink); }
.site-card p { font-size: 15.5px; line-height: 1.55; color: var(--faded); margin: 0; }

.site-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
.site-steps { margin: 18px 0 0; padding-left: 22px; }
.site-steps li { font-size: 16px; line-height: 1.55; color: var(--faded); margin-bottom: 12px; }
.site-steps b { color: var(--ink); }
.site-quote {
  background: var(--chart); border-left: 3px solid var(--pen); border-radius: 10px;
  padding: 24px 26px; box-shadow: var(--shadow);
}
.site-quote p:first-child { font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 0 12px; line-height: 1.35; }
.site-quote p { font-size: 15.5px; line-height: 1.55; margin: 0; }

/* tiers */
.site-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; }
.site-tier {
  position: relative; background: var(--chart); border: 1px solid var(--rule);
  border-radius: 12px; padding: 26px 22px; display: flex; flex-direction: column; gap: 10px;
}
.site-tier-on { border-color: var(--pen); border-width: 2px; box-shadow: var(--shadow); }
.site-tier-flag {
  position: absolute; top: -11px; left: 20px; background: var(--pen); color: var(--btn-pen-text);
  font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.site-tier h3 { font-size: 19px; font-weight: 750; margin: 0; color: var(--ink); }
.site-price { font-size: 21px; font-weight: 800; color: var(--pen); margin: 0; }
.site-tier-note { font-size: 14px; color: var(--faded); margin: 0; min-height: 2.8em; }
.site-tier ul { list-style: none; margin: 4px 0 auto; padding: 0; display: grid; gap: 8px; }
.site-tier li { font-size: 14.8px; color: var(--faded); padding-left: 20px; position: relative; }
.site-tier li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.site-tier .btn { margin-top: 16px; text-align: center; }

/* faq */
.site-faq { display: grid; gap: 10px; margin-top: 26px; max-width: 780px; }
.site-faq details { background: var(--chart); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 20px; }
.site-faq summary { font-size: 16.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.site-faq p { font-size: 15.5px; line-height: 1.55; color: var(--faded); margin: 12px 0 0; }

/* closing call + page heads */
.site-head { padding: 56px 0 8px; }
.site-close { padding: 68px 0 78px; background: var(--ward); border-top: 1px solid var(--rule-soft); text-align: center; }
.site-close p { font-size: 17px; color: var(--faded); margin: 0 0 26px; }

/* sign-up */
.site-signup { padding: 56px 0 72px; }
.site-signup-in {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start;
}
.site-signup-pitch h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; font-weight: 800; margin: 0 0 16px; color: var(--ink); }
.site-signup-pitch .site-lead { color: var(--faded); }
.site-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.site-ticks li { font-size: 16px; color: var(--faded); padding-left: 26px; position: relative; }
.site-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.site-signup-form h2 { font-size: 21px; font-weight: 750; margin: 0 0 18px; color: var(--ink); }
.site-signup-form .field { margin-bottom: 14px; }

/* footer */
.site-foot { background: var(--bar); color: var(--bar-text); padding: 40px 0 24px; }
.site-foot-in {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap;
}
.site-foot .muted { color: var(--bar-dim); font-size: 14.5px; max-width: 46ch; }
.site-foot-links { display: grid; gap: 9px; }
.site-foot-links a { color: var(--bar-dim); font-size: 14.5px; font-weight: 650; text-decoration: none; }
.site-foot-links a:hover { color: var(--bar-text); }
.site-copy { max-width: 1080px; margin: 26px auto 0; padding: 18px 28px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }

@media (max-width: 860px) {
  .site-two, .site-signup-in { grid-template-columns: 1fr; gap: 32px; }
  .site-hero { padding: 60px 0 52px; }
  .site-section { padding: 54px 0; }
}

/* KYC: the in-app nudge and the HQ review rows */
.kyc-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 18px; padding: 14px 18px;
  background: var(--pen-soft); border: 1px solid var(--pen); border-radius: 10px;
}
.kyc-nudge strong { display: block; font-size: 16px; color: var(--ink); }
.kyc-nudge p { margin: 4px 0 0; font-size: 14.5px; color: var(--faded); max-width: 68ch; }
.kyc-row {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
}
.kyc-row:last-child { border-bottom: 0; }
.kyc-facts { display: grid; gap: 4px; font-size: 14.5px; }
.kyc-facts strong { font-size: 16.5px; }
.kyc-actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.kyc-actions input[type="text"] { min-width: 220px; }

/* .site-lead is coloured for the navy hero — on light sections it must read as body text */
.site-head .site-lead, .site-signup-pitch .site-lead, .site-thanks .site-lead { color: var(--faded); }
.site-caveat {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-size: 13.8px; line-height: 1.5; color: var(--faded);
}
.site-thanks { max-width: 680px; text-align: center; padding: 40px 0; }
.site-thanks h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; margin: 0 0 16px; color: var(--ink); }
.site-thanks .site-cta { justify-content: center; margin-top: 26px; }

/* published prices + the founding-clinic offer */
.site-per { font-size: 14px; font-weight: 650; color: var(--faded); }
.site-yearly { margin: -4px 0 0; font-size: 13.8px; color: var(--green); font-weight: 650; }
.site-founding {
  margin-top: 26px; padding: 24px 26px; border-radius: 12px;
  background: linear-gradient(135deg, #1D3AA8, #16205a); color: #EAF0FF;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.site-founding-flag {
  display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px;
  background: rgba(167,185,248,.18); border: 1px solid rgba(167,185,248,.35);
  font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: #DDE6FF;
}
.site-founding h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; margin: 0 0 8px; color: #fff; }
.site-founding p { font-size: 15.5px; color: #C7D2F5; margin: 0 0 10px; }
.site-founding ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-founding li { font-size: 14.8px; color: #DDE6FF; padding-left: 22px; position: relative; }
.site-founding li::before { content: "→"; position: absolute; left: 0; color: #A7B9F8; }
.site-founding-closed {
  margin-top: 22px; padding: 14px 18px; border-radius: 10px;
  background: var(--ward); border: 1px dashed var(--rule);
  font-size: 15px; color: var(--faded);
}
.field-inline { display: inline-flex; align-items: center; gap: 8px; }

/* two-step sign-in */
.auth-page { max-width: 520px; margin: 6vh auto; }
.auth-page .auth-mark { text-align: left; font-size: 30px; margin-bottom: 18px; }
.auth-h { font-size: 27px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.auth-note { font-size: 15.5px; line-height: 1.55; color: var(--faded); margin: 0 0 14px; }
.setup-steps { margin: 18px 0 22px; padding-left: 22px; }
.setup-steps li { font-size: 15.5px; line-height: 1.6; color: var(--faded); margin-bottom: 14px; }
.setup-key {
  margin: 10px 0 6px; padding: 12px 14px; border-radius: 8px;
  background: var(--pen-soft); border: 1px solid var(--rule);
  font-size: 19px; letter-spacing: .1em; color: var(--ink); word-break: break-all;
}
.recovery-codes {
  list-style: none; margin: 18px 0 22px; padding: 16px 18px;
  border: 1px dashed var(--rule); border-radius: 10px; background: var(--ward);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.recovery-codes li { font-size: 17px; letter-spacing: .04em; color: var(--ink); }

/* ============================================================
   Hospital branding on documents.
   The clinic's colour is identity only — it never touches a
   triage band, result flag or allergy warning, because in this
   system colour already means patient state at the bedside.
   ============================================================ */
/* a watermark needs a positioned parent — these are the document cards */
.statement, .report-hero, .phead { position: relative; }
.doc-logo { max-height: 54px; max-width: 190px; width: auto; display: block; margin-bottom: 8px; }
.stmt-head { border-bottom: 2px solid var(--brand, var(--pen)); }
.stmt-clinic { color: var(--brand, var(--ink)); }

.doc-watermark {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.doc-watermark img {
  width: min(58%, 380px); height: auto; opacity: .055;
  filter: grayscale(100%);
}
/* keep the paperwork itself above the watermark */
.statement > *:not(.doc-watermark),
.report-hero > *:not(.doc-watermark),
.phead > *:not(.doc-watermark) { position: relative; z-index: 1; }

.doc-foot {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.doc-foot-text { display: grid; gap: 2px; font-size: 12.5px; }
.doc-foot-text strong { font-size: 13px; color: var(--ink); }
.doc-foot-text .muted { font-size: 12px; }
.doc-foot-qr { display: grid; justify-items: center; gap: 3px; }
.doc-foot-qr svg { width: 62px; height: 62px; display: block; }
.doc-foot-qr .muted {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
}

/* the hospital's identity while their staff work (never on clinical state) */
.topbar { border-bottom: 3px solid var(--brand, transparent); }
.clinic-logo { max-height: 26px; width: auto; display: block; }

@media print {
  /* watermarks and the QR must survive the printer */
  .doc-watermark img { opacity: .07; }
  .doc-foot { break-inside: avoid; }
  .doc-foot-qr svg { width: 58px; height: 58px; }
}
.brand-preview {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--ward);
}
.brand-preview img { max-height: 60px; max-width: 220px; width: auto; display: block; }
.colour-pick { display: flex; align-items: center; gap: 12px; }
.colour-pick input[type="color"] {
  width: 58px; height: 38px; padding: 2px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--chart); cursor: pointer;
}

/* HQ co-pilot */
.copilot-q { font-size: 16px; color: var(--faded); font-style: italic; margin: 0 0 14px; }
.copilot-headline {
  font-size: 18.5px; line-height: 1.45; font-weight: 650; color: var(--ink);
  margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.copilot-h {
  font-size: 12.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faded); margin: 22px 0 10px;
}
.copilot-list { margin: 0; padding-left: 22px; }
.copilot-list li { font-size: 15.5px; line-height: 1.55; color: var(--faded); margin-bottom: 7px; }
.copilot-card {
  padding: 14px 16px; margin-bottom: 10px; border-radius: 10px;
  background: var(--ward); border-left: 3px solid var(--pen);
}
.copilot-card strong { font-size: 16px; color: var(--ink); margin-right: 8px; }
.copilot-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--faded); }
.copilot-risk { border-left-color: var(--amber-band); }
.copilot-next { margin: 0; padding-left: 24px; }
.copilot-next li { font-size: 16px; line-height: 1.5; color: var(--ink); margin-bottom: 9px; font-weight: 600; }
.fee-rows { display: grid; gap: 8px; margin: 8px 0 16px; }
.fee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.fee-row input { max-width: 140px; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.an-fig { display: grid; gap: 3px; padding: 14px 16px; border-radius: 10px; background: var(--ward); }
.an-fig b { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-fig .muted { font-size: 12.5px; line-height: 1.4; }
.trend-up { color: var(--green); font-weight: 700; }
.trend-down { color: var(--red); font-weight: 700; }
.login-forgot { display: grid; gap: 4px; margin-top: 18px; }
.login-forgot .muted { font-size: 13.5px; }

/* examination: system quick-entry */
.exam-systems { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.exam-chip {
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  background: var(--pen-soft); color: var(--pen); border: 1px solid var(--rule);
}
.exam-chip:hover { border-color: var(--pen); }
.exam-chip:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.exam-field small { display: block; margin-top: 6px; }
.result-impression {
  margin: 6px 0 4px; padding: 8px 12px; border-radius: 8px;
  background: var(--pen-soft); font-size: 15.5px; color: var(--ink);
}

/* how the patient arrived — visible wherever they are queued */
.pathway {
  display: inline-block; font-size: 11.5px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--pen-soft); color: var(--pen); border: 1px solid var(--rule);
}
.pathway-emergency { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.pathway-referral { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-band); }
.pathway-provisional { background: var(--ward); color: var(--faded); }
.btn-emergency {
  background: var(--red); color: #fff; border-color: var(--red);
  font-size: 16.5px; padding: 13px 24px;
}
.btn-emergency:hover { background: #a32e22; }
.emergency-panel { border-left: 4px solid var(--red); }
.unsettled-row { border-left: 3px solid var(--amber-band); }

/* --- offline outbox --------------------------------------------------------
   Deliberately outside the clinical palette. In this system colour already
   means patient state — triage band, result flag, allergy — so a sync state
   must not borrow it. The bar reads as machinery: dark chrome, high contrast,
   and it says what it is in words rather than in hue. */
.outbox-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink); color: #fff;
  border-top: 3px solid var(--pen);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
}
.outbox-bad { border-top-color: #fff; }
.outbox-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto;
}
.outbox-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pen); flex: none; }
.outbox-bad .outbox-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.outbox-headline { font-size: 16px; font-weight: 750; }
.outbox-toggle { margin-left: auto; }
.outbox-bar .btn {
  background: rgba(255, 255, 255, .14); color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.outbox-bar .btn:hover { background: rgba(255, 255, 255, .26); }
.outbox-list {
  list-style: none; margin: 10px auto 0; padding: 0; max-width: 1100px;
  max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.outbox-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .09);
}
.outbox-item-bad { outline: 2px solid rgba(255, 255, 255, .55); }
.outbox-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.outbox-item .muted, .outbox-why { color: rgba(255, 255, 255, .75); font-size: 13.5px; }

/* Held on the device, not yet in the record — never drawn as saved. */
.alert-held {
  background: var(--pen-soft); color: var(--ink);
  border: 1.5px dashed var(--pen); font-weight: 600;
}

/* A sample file shown to an admin — read, not edited. */
.codeblock {
  background: var(--ward); border: 1px solid var(--rule); border-radius: 8px;
  padding: 12px 14px; margin: 10px 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre;
}

/* --- assistant drafts -------------------------------------------------------
   A draft sits beside the field, never inside it, and is visibly not-yet-yours
   until you accept it: dashed edge, quieter ground. No clinical colour — the
   assistant has no opinion about how sick anyone is. */
.assist-inline { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.draft {
  border: 1.5px dashed var(--rule); border-radius: 10px;
  background: var(--ward); padding: 14px 16px; margin: 10px 0 16px;
}
.draft-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.draft-block { margin-bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.draft-text { white-space: pre-wrap; font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0; }
.draft .tight { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }

.code-picks { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.code-pick {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 9px;
  background: var(--chart); cursor: pointer; font: inherit; color: var(--ink);
}
.code-pick:hover { border-color: var(--pen); background: var(--pen-soft); }
.code-pick b { font-size: 16px; }

/* Clinical free text grows with the writing — a doctor on a tablet should
   never lose the top of their own examination to a scrollbar. */
textarea.richtext {
  overflow-y: hidden; resize: vertical; min-height: 7.5em; line-height: 1.6;
}

/* An HQ figure that is knowingly incomplete says so, rather than flattering. */
.hq-warn {
  display: block; margin-top: 6px; font-size: 13px; font-weight: 650;
  color: var(--bar-text); background: rgba(255,255,255,.12);
  border-left: 3px solid var(--bar-accent); border-radius: 6px; padding: 6px 9px;
}
.budget-premium { width: 4.5em; }

/* Kenya readiness — a plan with gates, not a mood. */
.exp-bar {
  height: 10px; border-radius: 999px; background: var(--rule-soft);
  overflow: hidden; margin: 12px 0 6px;
}
.exp-bar span { display: block; height: 100%; background: var(--pen); border-radius: 999px; }
.exp-gates { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.exp-gates li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 12px; border-radius: 9px; background: var(--ward);
  border-left: 3px solid var(--rule);
}
.exp-gates .muted { grid-column: 1 / -1; font-size: 13.5px; }
.exp-met { border-left-color: var(--pen); }
.exp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; }

/* ---- Setup gaps: what a clinic still has to configure -------------------
   Amber, not red: nothing is broken, something is unfinished. Red is reserved
   for patient state (triage bands, abnormal results, allergies) and must not
   be spent on an admin to-do. */
.setup-gaps { border-left: 3px solid var(--amber-band); }
.gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gap { padding: 12px 14px; background: var(--ward); border-radius: 10px; }
.gap-blocking { background: var(--amber-soft); }
.gap-what { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.gap-why { color: var(--faded); font-size: 15px; margin-top: 3px; }
.gap-fix { font-size: 15px; margin-top: 6px; }
.gap-fix a { margin-left: 6px; font-weight: 600; }
.tag-stop { background: var(--amber-soft); color: var(--amber); }

/* The same message where it actually bites: on the field that will not submit. */
.field-stop {
  display: block; margin-top: 6px; padding: 9px 11px;
  background: var(--amber-soft); color: var(--amber);
  border-radius: 8px; font-size: 14.5px; line-height: 1.45;
}

/* ---- Worklists organised by patient (laboratory + imaging) --------------
   The queue card is now a link to the patient, so it needs the affordance the
   old non-clickable card never had. */
.qcard-link { display: block; text-decoration: none; color: inherit; }
.qcard-link:hover { border-color: var(--pen); box-shadow: var(--shadow); }
.work-count {
  font-size: 14px; color: var(--faded); white-space: nowrap;
}
.work-count b { font-size: 17px; color: var(--ink); }

.work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.work-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 12px 14px; background: var(--ward); border-radius: 10px;
}
.work-what { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.work-meta { font-size: 13.5px; color: var(--faded); white-space: nowrap; }
.work-act { display: flex; align-items: center; gap: 8px; }
.work-done { opacity: .72; }
@media (max-width: 640px) {
  .work-row { grid-template-columns: 1fr; }
  .work-meta { white-space: normal; }
}

/* ---- Notices bell + sound toggle ---------------------------------------
   Both live in the topbar so they are on every screen. Announcements used to
   render only on the home page, which meant a nurse at triage all day never
   learned about a price change or a recall. */
.bell, .chime-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--bar-dim); cursor: pointer; text-decoration: none;
}
.bell:hover, .chime-btn:hover { background: rgba(255,255,255,.08); color: var(--bar-text); }
.bell-on { color: var(--bar-text); }
.bell-count {
  position: absolute; top: 1px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1;
}
/* The slash only shows when sound is off, so the icon reads at a glance. */
.chime-slash { display: none; }
.chime-btn.chime-off .chime-slash { display: inline; }
.chime-btn.chime-off .chime-wave { display: none; }
.chime-btn.chime-off { color: var(--bar-dim); opacity: .7; }

/* A notice not yet read gets a quiet marker — never red, nothing is wrong. */
.ann-new { border-left: 3px solid var(--pen); }
.ann-when { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Sign-in watch ------------------------------------------------------
   Amber again, not red: an unfamiliar address is a question for the admin, not
   a diagnosis. Red stays reserved for patient state. */
.signin-alert { border-left: 3px solid var(--amber-band); }
.row-flag { background: var(--amber-soft); }
.inline-form { display: inline; margin-left: 8px; }

/* ---- Brand review queue (HQ) -------------------------------------------- */
.brand-row { grid-template-columns: 1fr; gap: 10px; }
.brand-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 760px) { .brand-form { grid-template-columns: 1fr; } }

/* HQ backup state. Amber because an overdue backup is an admin to-do, not a
   patient in trouble — colour means patient state everywhere else, and that
   rule only holds if it is not borrowed for operations. */
.hq-backup { border-left: 4px solid var(--amber-band); background: var(--amber-soft);
             margin-bottom: 1rem; }
.hq-backup p { margin: .25rem 0 0; }
.hq-backup-bad { border-left-width: 6px; }

/* Legal pages: long prose, so measure and rhythm matter more than anything.
   Base size stays large — these are the pages a clinic owner reads on a phone
   in poor light before deciding whether to trust us with patient records. */
.legal { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 4rem; font-size: 1.05rem;
         line-height: 1.65; }
.legal h1 { margin-bottom: .25rem; }
.legal h2 { margin-top: 2rem; font-size: 1.25rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin: .4rem 0; }
.legal .tbl { width: 100%; margin: 1rem 0; }
.legal .table-wrap, .legal .tbl { overflow-x: auto; display: block; }
.field-check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field-check input { margin-top: .25rem; flex: 0 0 auto; }
/* A visit that reached the sign-up form is a phone call worth making today. */
.row-hot { background: var(--amber-soft); }

/* ---- HQ on a phone -------------------------------------------------------
   The clinics table is twelve columns wide. On a 360px screen a horizontal
   scrollbar means dragging sideways to read one customer, which is not a
   dashboard you check on a boda. Below 760px each row becomes a card and each
   cell carries its own label, so the table reads top-to-bottom instead.
   Desktop is untouched — the markup is still a table, which is what it is. */
@media (max-width: 760px) {
  .tbl-stack thead { display: none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
  .tbl-stack tr {
    border: 1px solid var(--rule); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 12px; background: var(--ward);
  }
  .tbl-stack td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    white-space: normal; border: 0; padding: 5px 0; text-align: left;
  }
  .tbl-stack td.num { text-align: right; }
  .tbl-stack td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: 12px; font-weight: 750; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faded);
  }
  /* The name is the card's heading, so it loses the label and gains weight. */
  .tbl-stack td.hq-name { display: block; font-size: 17px; font-weight: 750; padding-bottom: 8px; }
  .tbl-stack td.hq-name::before { content: none; }
  .tbl-stack td:empty, .tbl-stack td.actions-col:empty { display: none; }
  .table-wrap:has(.tbl-stack) { overflow-x: visible; }

  /* Head actions wrap instead of squeezing into an unreadable row. */
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .head-actions { flex-wrap: wrap; }
  .head-actions .btn { flex: 1 1 auto; }
}