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