/* 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;
/* Chart series. Two slots, and deliberately only two: --pen with --amber
passes every check against the chart surface, and adding --green FAILS —
green against amber is ΔE 5.9 for a protan reader and 13.8 even in normal
vision, which is below the floor at which two marks can be told apart. A
third series here needs a decision, not a colour. */
--series-1: #2547C4;
--series-2: #96690A;
--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;
/* ⚠ NOT THE LIGHT COLOURS REUSED. --pen and --amber as they are redefined
for dark sit at L 0.745 and 0.767 against this surface — far above the
0.48–0.67 band — so on a dark screen they glow. These two are chosen for
this surface and validated on it: separation ΔE 26.8 protan, contrast
above 3:1, lightness in band. */
--series-1: #3987e5;
--series-2: #d95926;
--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 {
/* The mobile menu hangs off this. */
position: relative;
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; }
/* ⚠ NOW A LINK, and it has to keep looking like a greeting rather than
suddenly reading as navigation — a blue underlined name in the top bar would
be a change to every screen in the app to buy one route. It inherits the
bar's colour and gains an affordance only on hover and focus. */
.who { text-align: right; line-height: 1.3; display: block;
color: inherit; text-decoration: none; padding: 2px 4px;
border-radius: 6px; transition: background .15s; }
.who:hover, .who:focus-visible { background: rgba(255,255,255,.10); }
.who:focus-visible { outline: 2px solid var(--bar-text); outline-offset: 1px; }
.who strong { display: block; font-size: 16px; }
.who small { color: var(--bar-dim); font-size: 13px; }
.who:hover small { color: var(--bar-text); }
.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); }
/* ---------- choosing a file ----------
⚠ STYLED BY ATTRIBUTE, NOT BY CLASS, AND THAT IS THE POINT. Half the file
inputs in this system are rendered by Django from a ModelForm — the lab
result attachment, the imaging report images — where no template can put a
class on them. An attribute selector reaches every one of them, so the
bench, the imaging room, the campaign screen and the CSV importers all get
the same control without a single template change.
The native widget is a small grey button and the words "No file chosen",
which on a clinical screen reads as something half-built. This makes the
whole field the target: a generous dashed area a person can see is meant to
be clicked, with a real button inside it. */
input[type="file"] {
display: block; width: 100%; min-height: 0;
padding: 14px; font: inherit; font-size: 14.5px; color: var(--faded);
background: var(--rule-soft);
border: 2px dashed var(--rule); border-radius: 10px;
cursor: pointer; transition: border-color .15s, background .15s;
}
input[type="file"]:hover { border-color: var(--pen); background: var(--pen-soft); }
input[type="file"]:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
/* The native button inside it, made to match the buttons everywhere else.
Two selectors: the standard one, and WebKit's older name for the same
thing — Safari only learnt ::file-selector-button in 14.1. */
input[type="file"]::file-selector-button {
margin-right: 14px; padding: 9px 16px;
font: inherit; font-size: 14.5px; font-weight: 650;
color: #fff; background: var(--pen);
border: none; border-radius: 7px; cursor: pointer;
transition: filter .15s;
}
input[type="file"]::-webkit-file-upload-button {
margin-right: 14px; padding: 9px 16px;
font: inherit; font-size: 14.5px; font-weight: 650;
color: #fff; background: var(--pen);
border: none; border-radius: 7px; cursor: pointer;
}
input[type="file"]:hover::file-selector-button { filter: brightness(1.08); }
/* A camera capture is a different gesture from picking a file off a disk, and
on a phone it is the ONLY one that matters — see receive.html. */
input[type="file"][capture] { border-style: solid; }
/* ---------- 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); } }
/* The rail stretches to the height of the row so the card inside it has somewhere
to travel — align-items:start would pin the aside to its own content height and
a sticky card would have no room to move. Without this the assistant scrolls
away the moment the doctor reads down a consultation, leaving an empty gutter
beside the notes and results. */
.assist-rail { align-self: stretch; }
.assist-card { overflow: hidden; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.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; }
/* ---------- offline working set ----------
The band is amber because the screen itself is degraded, not because any
patient on it is. Colour still means state; here the state is the system's. */
.offline-band {
background: var(--amber-soft); border: 1.5px solid var(--amber-band);
border-radius: 9px; padding: 13px 16px; margin-bottom: 16px;
font-size: 15.5px; line-height: 1.5;
}
/* Stale is a different state from offline, and must not look like the same one:
offline is "the line is down", stale is "what you are reading may be wrong". */
.offline-band-stale { background: var(--red-soft); border-color: var(--red); }
.lockbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
background: var(--chart); border: 1.5px solid var(--rule);
border-radius: 9px; padding: 13px 16px; margin-bottom: 16px;
}
.lockbar-say { font-size: 15.5px; font-weight: 600; }
.lockbar-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lockbar-form input {
width: 130px; padding: 8px 10px; font-size: 15px;
border: 1.5px solid var(--rule); border-radius: 6px;
}
.lockbar-why { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--faded); line-height: 1.5; }
.arrival-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .arrival-grid { grid-template-columns: 1fr 1fr; } }
.offline-person { padding: 14px 16px; margin-bottom: 10px; }
.offline-person-top { font-size: 16.5px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.offline-allergies { margin-bottom: 8px; }
.offline-allergy {
display: inline-block; background: var(--red-soft); color: var(--red);
border-radius: 6px; padding: 3px 9px; margin: 3px 6px 0 0;
font-size: 14.5px; font-weight: 600;
}
.offline-meds, .offline-results { margin-top: 8px; }
.offline-stageline { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; font-size: 14.5px; }
.offline-stage {
background: var(--rule-soft); border-radius: 6px; padding: 3px 9px;
font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
}
.offline-vitals { font-size: 14px; color: var(--faded); }
.offline-results ul { margin: 4px 0 0; padding-left: 20px; }
.offline-results li { font-size: 15px; line-height: 1.55; }
.offline-abn { color: var(--red); }
.offline-prices { list-style: none; margin: 8px 0 0; padding: 0; }
.offline-prices li {
display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--rule-soft);
font-size: 15.5px;
}
.offline-chart { margin: 4px 0 0; padding-left: 20px; }
.offline-chart li { font-size: 15px; line-height: 1.55; }
/* ---------- the imaging room's second read ----------
Deliberately uncoloured. Colour on this system means patient state, and an
AI reading is not a patient state — a green panel would say "normal" and a
red one "abnormal" before anyone had read a word. The rule stands: the only
colour here is the urgent alert, which is about the finding, not the model. */
.study-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.second-read { border-left: 3px solid var(--rule); padding-left: 16px; margin-bottom: 8px; }
.read-impression { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.read-list { margin: 4px 0 14px; padding-left: 20px; }
.read-list li { font-size: 15.5px; line-height: 1.55; margin-bottom: 5px; }
.prior-report, .amend-block { margin-top: 14px; }
.prior-report summary, .amend-block summary {
cursor: pointer; font-size: 15px; font-weight: 600; color: var(--faded); padding: 6px 0;
}
.prior-report summary:hover, .amend-block summary:hover { color: var(--ink); }
.amend-block .field { margin-top: 10px; }
.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) */
/* The worklist is placed by hand rather than left to source order, because the
sponsor rail can disappear on the client — an ad blocker hides anything
called "ad-rail", and a display:none aside is not a grid item at all. Left to
auto-placement the worklist then drops into the 300px sponsor column and
every patient name truncates to an initial. `auto` lets that column collapse
to nothing when the rail is gone, rather than leaving a hole beside the work. */
.console-ads.has-rail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.console-ads.has-rail > .console-main { grid-column: 2; }
.ad-rail { position: sticky; top: 16px; width: 300px; 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 {
/* ⚠ A PRINTOUT SHOWS EVERYTHING THE PAGE IS NOT TOLD TO HIDE, and the app's
furniture lives OUTSIDE the block each template fills in — so no template
can hide it. A receipt handed to a patient was coming out with the offline
PIN bar across the top, whatever green "saved" alert was still on screen,
and the licence nudge. None of it belongs on paper and one of them is the
clinic's own security prompt.
Every one of these is rendered by base.html around {% block content %}.
apps/website/test_print.py holds this list against that file, so a new
banner added there cannot quietly start printing. */
.no-print, .topbar, .msgs, .lockbar, .kyc-nudge, .node-licence,
.console-ads, .ad-rail, .chime-btn, .bell { display: none !important; }
.page { padding: 0; max-width: none; }
/* Cards are a screen device — on paper they are just a rectangle of ink. */
.statement, .card { box-shadow: none; border: none; }
/* A table row split across a page break loses whichever half is orphaned. */
.tbl tr, .table tr, .row { break-inside: avoid; }
.tbl thead { display: table-header-group; }
/* Backgrounds cost ink and most printers drop them anyway, which turns a
white-on-colour tag into white on white — invisible rather than plain. */
.tag { background: none !important; border: 1px solid currentColor; }
}
@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; }
/* ⚠ MONEY NEEDS MORE ROOM THAN A COUNT. The 88px label column truncated
"Non-clinical supplies" to "Non-clinical s…" and the 40px value column was
holding seven digits only because nothing clips it. Both are honest widths
for a diagnosis and a count of four; neither is for a UGX total. */
.bars-wide .bar-row { grid-template-columns: 152px 1fr 92px; }
.bars-wide .bar-label { white-space: normal; overflow: visible; line-height: 1.25; }
.analytics-tbl { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } }
/* Charts on the operations screen.
Server-rendered SVG, because this application is used where the line is down
for days and a chart from a CDN disappears exactly when somebody is stuck in
the building with nothing to do but read it. The colours are set on the
marks themselves (validated against the chart surface); everything here is
layout and text, so both themes inherit correctly. */
.chart { width: 100%; height: auto; overflow: visible; display: block; margin: 6px 0 4px; }
.chart-tick { font-size: 12px; fill: var(--faded); font-variant-numeric: tabular-nums; }
/* Values sit on the marks only where the mark spec allows — the last group —
so this stays a label, never a number on every bar. */
.chart-value { font-size: 12.5px; font-weight: 750; fill: var(--ink); font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 6px; }
.chart-key { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; color: var(--faded); }
.chart-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
/* The figures are part of the chart, not a footnote: a colour-blind reader, a
screen reader and a photocopy all arrive here. */
.chart-table { margin-top: 10px; }
.chart-table > summary { cursor: pointer; font-size: 14px; font-weight: 650; color: var(--faded); padding: 4px 0; }
.chart-table > summary:hover { color: var(--ink); }
.chart-table table { margin-top: 8px; }
/* 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; }
/* Sits between the h1 and the lead: the words a clinic owner TYPES into a
search box, said once, in a sentence that still reads like a person wrote it. */
.site-kicker {
font-size: 17px; font-weight: 600; line-height: 1.5; color: #9FB4EA;
max-width: 52ch; margin: 0 0 14px; letter-spacing: .01em;
}
.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; }
/* ⚠ A "coming soon" that renders as body text reads as a claim. This has to
look like a note about the future, not like the features above it. */
.site-note {
margin: 30px 0 0; padding: 14px 18px; max-width: 60ch;
font-size: 16px; color: var(--faded);
border-left: 3px solid var(--rule-soft);
border-radius: 0 8px 8px 0;
}
.site-note strong { color: var(--ink); }
.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); }
/* ⚠ A LOGO SITS ON THE BACKGROUND IT WAS DRAWN FOR. Practically every clinic
logo is designed on white, and the topbar is `--bar` #17201E. Measured
against it, not eyeballed: Lifespring's purple mark comes out at 2.06:1 and
all but disappears, and the white figures cut out of its heart invert to dark
the moment the background is transparent. The chip costs four pixels, makes a
transparent PNG and an opaque one render identically, and is the only way one
logo field can serve the topbar, the letterhead, the watermark and the
settings page at once. */
.clinic-logo {
max-height: 26px; width: auto; display: block;
background: #fff; border-radius: 4px; padding: 2px;
}
@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); }
/* ⚠ NOT A CLINICAL BAND, AND DELIBERATELY NOT COLOURED LIKE ONE. In this system
colour means patient state — red is an emergency, amber a referral — and
"day 8 of a cycle" is a fact about the appointment, not about how sick
somebody is. It keeps the neutral pen styling the base .pathway already
carries (6.70:1 on its own ground) so it reads as information and never
competes with the bands beside it. */
.pathway-cycle { background: var(--pen-soft); color: var(--pen); border-color: var(--pen); }
.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;
}
/* The licence band on a clinic's own server. Deliberately NOT styled like the
flash messages above it: this one does not go away when you reload, and a
band that looks transient gets dismissed as one. */
.node-licence {
border-left-width: 5px;
display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.node-licence strong { font-weight: 800; }
/* 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; }
}
/* The line under the ingredient box that says what we know about a typed drug.
Amber, never red: an unrecognised drug is an admin to-do, not a patient
state — colour on a clinical screen means the patient, and this is neither. */
.brand-hint { margin: .25rem 0 0; font-size: .95rem; }
.brand-hint-warn {
color: var(--pen);
background: var(--amber-soft);
border-left: 3px solid var(--amber-band);
padding: .4rem .6rem;
border-radius: 4px;
}
/* Text for a screen reader, and only for a screen reader.
It was missing entirely, so both uses of it — the notification-sound toggle
and the notices bell — printed their labels into the topbar and collided with
the greeting. The class is standard; the clipping rectangle keeps the text
reachable by assistive tech while taking it out of the visual flow. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.checklist { list-style: none; margin: 12px 0 0; padding: 0; }
.checklist li { font-size: 15.5px; line-height: 1.7; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); }
.checklist .check-ok b { color: var(--green); }
.checklist .check-bad b { color: var(--red); }
.triage-block, .till-block { margin-top: 10px; }
.triage-block summary, .till-block summary {
cursor: pointer; font-size: 15px; font-weight: 700; color: var(--pen); padding: 6px 0;
}
.till-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 2px; }
.consult-block { margin-top: 10px; }
.consult-block summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--pen); padding: 6px 0; }
.consult-block .test-grid { max-height: 260px; overflow-y: auto; }
.rx-offline { border-top: 1px solid var(--rule-soft); margin-top: 12px; padding-top: 12px; }
.rx-stop { background: var(--red-soft); color: var(--red); border-radius: 6px;
padding: 9px 12px; font-size: 15px; font-weight: 600; margin: 8px 0 0; }
.bench-block { margin-top: 10px; }
.bench-block summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--pen); padding: 6px 0; }
/* Guide cards on the homepage. Three indexed pages, one click from the front
door — previously they were two clicks deep and took zero traffic. */
.site-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 24px 0 22px; }
.site-guide-card {
display: block; padding: 20px 22px; border: 1.5px solid var(--rule);
border-radius: 12px; background: var(--chart); text-decoration: none; color: inherit;
transition: border-color .15s, box-shadow .15s;
}
.site-guide-card:hover { border-color: var(--pen); box-shadow: var(--shadow); }
.site-guide-card b { display: block; font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
.site-guide-card span { display: block; font-size: 15.5px; line-height: 1.55; color: var(--faded); }
/* ---- feedback: the page a patient opens from an SMS ----------------------
Standalone rather than part of the clinic shell. It is read one-handed, on a
cheap phone, possibly outside in daylight — so the tap targets are large and
the contrast is not subtle. The five choices are deliberately NOT a red-to-
green ramp: in this application colour means patient state, and a feedback
scale borrowing those colours would teach staff the wrong reflex. They are
one brand colour, distinguished by weight and label. */
.feedback-body {
margin: 0;
padding: 24px 16px 48px;
background: var(--ward);
min-height: 100vh;
}
.feedback-card {
max-width: 520px;
margin: 0 auto;
background: var(--chart);
border-radius: 16px;
padding: 28px 24px 24px;
box-shadow: var(--shadow);
}
.feedback-centred { text-align: center; }
.feedback-clinic {
margin: 0 0 6px;
font-size: 15px;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--pen-strong);
font-weight: 700;
}
.feedback-card h1 { margin: 0 0 10px; font-size: 27px; line-height: 1.25; }
.feedback-lead { margin: 0 0 22px; font-size: 17px; line-height: 1.6; }
.feedback-scale { display: grid; gap: 10px; margin-bottom: 22px; }
.feedback-choice {
display: block;
width: 100%;
padding: 16px 18px;
font: inherit;
font-size: 18px;
font-weight: 600;
text-align: left;
color: var(--ink);
background: var(--pen-soft);
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
}
.feedback-choice:hover,
.feedback-choice:focus-visible { border-color: var(--pen); }
/* The two unhappy ends carry more weight, not a different hue. */
.feedback-choice-1, .feedback-choice-5 { font-weight: 700; }
.feedback-comment { display: block; margin-bottom: 16px; }
.feedback-tap { margin: 0 0 10px; font-size: 15px; color: var(--faded); }
.feedback-comment textarea {
width: 100%; font: inherit; font-size: 16px; padding: 12px;
border: 1px solid var(--rule); border-radius: 10px; resize: vertical;
}
.feedback-warning {
margin: 0; padding: 14px 16px; border-radius: 10px;
background: var(--pen-soft);
font-size: 15px; line-height: 1.55;
}
/* The staff-side row of quick answers. */
.feedback-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---- public booking ---------------------------------------------------- */
.booking-card { max-width: 560px; }
.booking-pick { margin: 22px 0 10px; font-size: 17px; font-weight: 700; }
.booking-day { margin-bottom: 18px; }
.booking-day h2 {
margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: var(--faded);
}
.booking-times { display: flex; flex-wrap: wrap; gap: 8px; }
/* Big enough to hit with a thumb on a bus. */
.booking-time { min-width: 76px; padding: 12px 14px; font-size: 17px; }
.booking-ref {
margin: 18px 0; padding: 14px; border-radius: 10px;
background: var(--pen-soft); font-size: 16px; line-height: 1.5;
}
.booking-ref strong { font-size: 26px; letter-spacing: 3px; color: var(--pen-strong); }
/* ---- the booking wording editor ---------------------------------------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.sms-preview { margin-bottom: 14px; }
/* A phone bubble, so the clinic reads it as a message rather than as config. */
.sms-bubble {
margin: 5px 0 0; padding: 12px 14px; max-width: 340px;
background: var(--pen-soft); border-radius: 14px 14px 14px 4px;
font: inherit; font-size: 15px; line-height: 1.5; white-space: pre-wrap;
word-break: break-word;
}
.field-bad textarea { border-color: var(--red); }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
/* ---- the follow-up hub -------------------------------------------------- */
.followup-grid {
display: grid; gap: 14px; margin: 22px 0;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.followup-card {
display: block; padding: 20px; border-radius: 14px; text-decoration: none;
background: var(--chart); border: 1px solid var(--rule); color: var(--ink);
box-shadow: var(--shadow);
}
.followup-card:hover { border-color: var(--pen); }
/* Amber, not red: this is work waiting, not a patient in trouble. Red belongs
to patient state and borrowing it here would cheapen it. */
.followup-card-warn { border-left: 5px solid var(--amber-band); }
.followup-count {
display: block; font-size: 40px; font-weight: 700; line-height: 1.1;
color: var(--pen-strong);
}
.followup-label { display: block; font-size: 18px; font-weight: 600; margin-top: 4px; }
.followup-note { display: block; font-size: 15px; color: var(--faded); margin-top: 4px; }
/* ---- the counter -------------------------------------------------------- */
.counter-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .counter-split { grid-template-columns: 1fr; } }
.counter-search { display: flex; gap: 8px; margin-bottom: 16px; }
/* Typed at speed by somebody standing up, with a customer talking to them. */
.counter-search input { flex: 1; font-size: 19px; padding: 14px 16px; }
.qty-input { width: 74px; font-size: 17px; padding: 8px; }
.counter-basket { background: var(--chart); border: 1px solid var(--rule);
border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.counter-total { font-size: 30px; font-weight: 700; color: var(--pen-strong);
text-align: right; margin: 12px 0 18px; }
.num { text-align: right; white-space: nowrap; }
.receipt { max-width: 420px; }
.receipt-head { text-align: center; margin-bottom: 14px; }
.receipt-total td { border-top: 2px solid var(--ink); padding-top: 10px; }
.receipt-foot { margin-top: 16px; text-align: center; }
@media print { .no-print, .topbar { display: none !important; } }
.field-choice { border: 0; padding: 0; margin: 0 0 16px; }
.choice-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
border: 1px solid var(--rule); border-radius: 10px; margin-top: 8px;
cursor: pointer; font-size: 16px; line-height: 1.45; }
.choice-row:hover { border-color: var(--pen); }
/* ---- guide cards, and a checkbox that is a checkbox ----------------------
Two defaults that had leaked through.
The guides index writes inside .site-card, and only
.site-card h3 was ever styled — so every guide title rendered at the
browser's default h2 size in browser-blue with an underline, wrapping a
five-word heading over five lines. It read as an unstyled page.
And .field input sets width:100% and min-height:48px, which is right for a
text box and absurd for a tick box: the terms checkbox on sign-up was a
48px empty square floating beside its sentence. */
.site-card h2 {
font-size: 20px; line-height: 1.3; font-weight: 750;
margin: 0 0 10px; color: var(--ink);
}
.site-card h2 a { color: inherit; text-decoration: none; }
.site-card h2 a:hover { color: var(--pen); text-decoration: underline; }
/* "Read it →" is the affordance, so it may carry the brand colour — but not a
permanent underline, which is what made the grid look like a link dump. */
.site-card p a {
color: var(--pen); font-weight: 650; text-decoration: none;
}
.site-card p a:hover { text-decoration: underline; }
.site-card p + p { margin-top: 12px; }
/* The whole card lifts, so the target is the card and not just the words. */
.site-card { transition: border-color .12s ease, box-shadow .12s ease; }
.site-card:hover { border-color: var(--pen); }
.field-check input[type="checkbox"],
.field-check input[type="radio"] {
width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; accent-color: var(--pen);
}
.choice-row input[type="radio"] {
width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; accent-color: var(--pen);
}
/* ---- the pharmacy hero's till ------------------------------------------- */
.site-hero:has(.till-mock) .site-hero-in { max-width: 640px; }
.till-mock {
position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
width: 300px; display: grid; gap: 14px;
}
@media (max-width: 1100px) {
/* Below this the hero text needs the whole width; the receipt drops under it
rather than shrinking into something nobody can read. */
.till-mock { position: static; transform: none; margin: 26px auto 0; }
}
.till-paper {
background: var(--chart); color: var(--ink); border-radius: 10px;
padding: 18px 20px; box-shadow: 0 10px 30px rgba(10, 16, 40, .28);
}
.till-shop { margin: 0; font-size: 14px; font-weight: 750; letter-spacing: 1px; }
.till-when { margin: 2px 0 12px; font-size: 13px; color: var(--faded); }
.till-paper table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.till-paper td { padding: 4px 0; }
.till-paper td:last-child { text-align: right; white-space: nowrap; }
.till-sum td { border-top: 1px solid var(--rule); padding-top: 8px; }
.till-strip {
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
border-radius: 10px; padding: 12px 16px; color: #FFFFFF;
}
.till-strip div { display: flex; justify-content: space-between; padding: 3px 0;
font-size: 14.5px; }
.till-strip span { opacity: .82; }
/* The line that is the argument: what is owed, set apart from what was taken. */
.till-gap { border-top: 1px solid rgba(255, 255, 255, .22); margin-top: 6px;
padding-top: 9px !important; }
/* Cards in a row end level: "Read it →" pinned to the bottom rather than
floating wherever the blurb happens to stop, which made the grid look ragged. */
.site-grid { align-items: stretch; }
.site-card { display: flex; flex-direction: column; }
.site-card p:last-child { margin-top: auto; padding-top: 12px; }
.money-period { display: flex; gap: 6px; }
/* Figures are read down a column and compared, so they line up on the right
and never wrap. */
.followup-count { font-variant-numeric: tabular-nums; }
/* ---- the order sheet ------------------------------------------------- */
.order-group { margin: 0 0 2rem; }
.order-head { display: flex; flex-wrap: wrap; align-items: baseline;
gap: .5rem 1rem; margin-bottom: .5rem; }
.order-head h2 { margin: 0; }
.order-terms { font-size: .95rem; color: var(--faded); }
.order-terms em { font-style: normal; opacity: .8; }
.order-table td { vertical-align: top; }
.order-why { font-size: .92rem; color: var(--faded); margin-top: .15rem;
max-width: 46ch; }
.order-code { font-size: .85rem; color: var(--faded); margin-left: .4rem; }
.order-qty { width: 5.5rem; min-height: 44px; text-align: right; }
.order-pack { color: var(--faded); margin-left: .3rem; }
.order-row-quiet { opacity: .62; }
.order-foot { display: flex; flex-wrap: wrap; align-items: center;
gap: .75rem 1rem; margin-top: .6rem; }
.order-budget { display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem .75rem; margin: 0 0 1.25rem; }
.order-budget label { font-weight: 600; }
.order-budget input { width: 9rem; min-height: 44px; }
.order-cut { margin-bottom: 1.5rem; }
.order-cut h2 { margin-top: 0; }
/* ---- receiving a delivery -------------------------------------------- */
.recv-search { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.recv-search input { flex: 1 1 18rem; min-height: 48px; }
.recv-form { margin: 1rem 0 2rem; }
.recv-grid { display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.recv-opt { font-weight: 400; color: var(--faded); font-size: .9rem; }
.recv-against { margin: 1.25rem 0 0; border: 2px solid var(--line);
border-radius: 10px; padding: .75rem 1rem 1rem; }
.recv-against legend { font-weight: 700; padding: 0 .4rem; }
.recv-opt-row { display: flex; align-items: flex-start; gap: .6rem;
padding: .35rem 0; }
.recv-opt-row input { width: 20px; height: 20px; min-height: 0; margin-top: .15rem; }
.recv-inline { display: flex; gap: .4rem; justify-content: flex-end; }
.recv-inline input { min-height: 40px; width: 14rem; }
.order-open-late { border-left: 4px solid var(--warn, #b45309); }
.recv-read { display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem .75rem; margin: 0 0 1.25rem; }
.recv-read label { font-weight: 600; }
.recv-read input[type=file] { flex: 1 1 16rem; min-height: 44px; }
/* ---- Bringing a trading shop across -------------------------------------
⚠ THESE CLASSES WERE USED IN TEMPLATES BEFORE THEY EXISTED HERE. The pages
still rendered — an unknown class is not an error — so nothing failed and no
test could see it. A screenshot could: the warning card that says a shop's
till cannot protect its stock was rendering as an ordinary white panel, and
`guide-limit`, which carries the "what this will not do" paragraph on all
eleven public guides, had never been styled at all. Colours come from tokens
so the dark palette follows without a second rule. */
.warn-card {
margin: 16px 0; padding: 16px 18px; border-radius: 10px;
background: var(--amber-soft); border-left: 4px solid var(--amber);
}
.warn-card h2, .warn-card h3 { color: var(--amber); margin: 0 0 6px; }
.warn-card > p:last-child { margin-bottom: 0; }
.migrate-lead { font-size: 1.02rem; color: var(--faded); max-width: 78ch;
margin: 0 0 18px; }
.row-warn { background: var(--amber-soft); }
.row-bad { background: var(--red-soft, var(--amber-soft)); font-weight: 600; }
.import-tally { font-size: 1rem; margin: 4px 0 14px; }
.import-tally b { font-size: 1.15rem; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.confirm-form { margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--line, rgba(0,0,0,.12)); }
/* The honest paragraph at the foot of every public guide. */
.guide-limit {
margin: 22px 0 8px; padding: 14px 16px; border-radius: 10px;
background: var(--amber-soft); border-left: 4px solid var(--amber);
font-size: .97rem;
}
/* Sections on the public pharmacies page. ⚠ `site-panel` carries only the
spacing — the width comes from `site-band-in`, which every section on that
page needs and which this one was missing, so it rendered edge-to-edge while
its neighbours stayed centred. Tests could not see it; a screenshot could. */
.site-panel { margin-top: 34px; }
.site-list { margin: 14px 0 0; padding-left: 1.15rem; line-height: 1.65; }
.site-list li { margin-bottom: 10px; }
/* ---- Uploaded files, as cards ------------------------------------------
A filename on its own tells a doctor nothing about whether it is worth
opening. These say what kind of thing it is, show the picture when there is
one, and are themselves the button that opens the viewer. */
.file-strip {
display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 6px;
}
.file-card {
width: 178px; border: 1.5px solid var(--rule); border-radius: 12px;
background: var(--card, #fff); overflow: hidden; display: flex;
flex-direction: column; transition: border-color .12s, box-shadow .12s;
}
.file-card:hover { border-color: var(--pen); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.file-card-head {
display: flex; align-items: center; gap: 7px; padding: 9px 10px;
border-bottom: 1px solid var(--rule);
}
.file-badge {
flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
color: #fff; background: var(--faded); border-radius: 4px; padding: 2px 5px;
}
.file-badge-pdf { background: #C0392B; }
.file-badge-image { background: #1E7A46; }
.file-name {
font-size: 13.5px; font-weight: 650; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-card-body {
display: flex; align-items: center; justify-content: center;
height: 132px; background: var(--wash, #F4F6FA); cursor: zoom-in;
text-decoration: none; color: var(--faded);
}
.file-card-body img { max-width: 100%; max-height: 132px; object-fit: contain; }
.file-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.file-icon b { font-size: 11px; letter-spacing: .04em; }
.file-icon-pdf { color: #C0392B; }
.file-card-foot {
display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
padding: 8px 10px; font-size: 12px; color: var(--faded);
}
.file-seq { font-weight: 650; }
.file-card-gone { opacity: .7; border-style: dashed; }
.file-card-empty { cursor: default; }
.file-gone-note { font-size: 12px; text-align: center; padding: 0 10px; margin: 0; }
/* ---- The viewer ---------------------------------------------------------
⚠ A film at "fit to window" is not readable. Zoom and pan are the feature;
everything else here exists to keep the doctor's place while they use it. */
body.viewer-open { overflow: hidden; }
.viewer {
position: fixed; inset: 0; z-index: 900; display: none;
background: rgba(8, 10, 14, .94);
flex-direction: column; align-items: center; justify-content: center;
}
.viewer.on { display: flex; }
.viewer-bar {
position: absolute; top: 0; left: 0; right: 0; display: flex;
align-items: center; gap: 12px; padding: 10px 14px;
background: rgba(0, 0, 0, .78); color: #fff; font-size: 13.5px;
/* ⚠ ABOVE THE PICTURE. A zoomed film is larger than the window by design,
so without this it covers its own zoom controls and the close button —
the doctor magnifies a shadow and loses every way back out. Found by
looking at it; no test would have. */
z-index: 3;
}
.viewer-cap { font-weight: 650; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; max-width: 46vw; }
.viewer-seq { color: rgba(255,255,255,.72); flex: none; }
.viewer-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.viewer-tools.no-zoom .viewer-btn[data-act="in"],
.viewer-tools.no-zoom .viewer-btn[data-act="out"],
.viewer-tools.no-zoom .viewer-btn[data-act="reset"],
.viewer-tools.no-zoom .viewer-zoom { display: none; }
.viewer-btn {
min-width: 34px; min-height: 34px; padding: 0 10px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
color: #fff; font-size: 15px; font-weight: 650; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
}
.viewer-btn:hover { background: rgba(255,255,255,.2); }
.viewer-zoom { min-width: 52px; text-align: center; color: rgba(255,255,255,.85);
font-variant-numeric: tabular-nums; }
.viewer-stage {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; padding: 58px 16px 46px; overflow: hidden;
z-index: 1;
}
.viewer-img {
max-width: 100%; max-height: 100%; object-fit: contain;
transform-origin: center center; cursor: zoom-in; touch-action: none;
user-select: none; -webkit-user-drag: none;
}
.viewer-frame { width: min(980px, 94vw); height: 100%; border: 0; background: #fff;
border-radius: 8px; }
.viewer-img[hidden], .viewer-frame[hidden] { display: none; }
.viewer-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 46px; height: 62px; border-radius: 10px; cursor: pointer;
border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.42);
color: #fff; font-size: 30px; line-height: 1;
}
.viewer-nav:hover { background: rgba(255,255,255,.2); }
.viewer-prev { left: 14px; }
.viewer-next { right: 14px; }
.viewer-nav[hidden] { display: none; }
.viewer-hint {
position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
color: rgba(255,255,255,.75); font-size: 12px; margin: 0;
padding: 8px 12px; background: rgba(0,0,0,.7); z-index: 3;
}
@media (max-width: 640px) {
.viewer-hint, .viewer-cap { display: none; }
.viewer-stage { padding: 54px 6px 12px; }
.file-card { width: calc(50% - 6px); }
}
/* ---- Classes the templates were already using ----------------------------
⚠ FIFTEEN CLASS NAMES WERE BEING USED AND DEFINED NOWHERE, and an unknown
class is not an error — so every one of them rendered as plain text and
nothing failed. It is why the shop screens looked unfinished:
· `btn-primary` — in 22 templates. The main action on those screens was
drawing as an ordinary grey button, so nothing on the page looked like
the thing to press. The blue in this codebase is `btn-pen`; this is the
same rule under the name the templates reached for.
· `table` / `table-scroll` — in 11 templates. The styled table is `.tbl`
inside `.table-wrap`, so the shop's tables had no padding, no rules and
no header treatment: bare columns colliding with each other. The two
screens that looked right (money, counter) are the only two that had
used the real name.
There is now a test that fails on any class a template uses and the
stylesheet does not define — see apps/website/test_stylesheet.py. */
.btn-primary {
background: var(--pen); border-color: var(--pen); color: var(--btn-pen-text);
font-size: 15px; padding: 11px 20px;
}
.btn-primary:hover { background: var(--pen-strong); border-color: var(--pen-strong); }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td {
text-align: left; padding: 11px 12px;
border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
.table thead th {
font-size: 12px; font-weight: 750; letter-spacing: .06em;
text-transform: uppercase; color: var(--faded); white-space: nowrap;
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: var(--rule-soft); }
.table .empty { padding: 22px; text-align: center; color: var(--faded); }
/* A card's own header row: a title on the left, controls hard right. */
.card-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
/* Buttons that belong to the page rather than to a form. */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* Buttons living inside a table row — kept on one line, right-aligned. */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* A column of form fields with honest breathing room. */
.stack { display: flex; flex-direction: column; gap: 14px; }
/* The sentence under a heading that says what the screen is for. */
.lead { font-size: 1.02rem; color: var(--faded); max-width: 72ch; margin: 0 0 16px; }
/* An aside a person can skip. */
.note { font-size: .92rem; color: var(--faded); margin: 8px 0 0; }
/* Somebody's own words, quoted back to them. */
.quote {
margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--rule);
color: var(--faded); font-style: italic;
}
.flag-low { background: var(--amber-soft); color: var(--amber); }
.tag-warn { background: var(--amber-soft); color: var(--amber); }
/* htmx shows this while a request is in flight and hides it otherwise. */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.rx-override-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* ---- The wallpaper, turned down ------------------------------------------
⚠ IT WAS AT opacity .5 AND IT WAS WINNING. Every screen had medical doodles
competing with the numbers on top of them — on a till that somebody reads
all day while a customer waits, that is not atmosphere, it is noise. Kept,
because a plain grey field is a worse room to work in, but turned down to
where it reads as paper texture rather than illustration. */
body::before { opacity: .12; }
@media (prefers-reduced-motion: no-preference) {
/* And it no longer drifts. A slow-moving background behind a column of
figures is exactly the kind of movement that catches the eye of somebody
trying to count. */
body::before { animation: none; }
}
/* ---- The nav bar, stopped from breaking mid-phrase -----------------------
"To follow / up", "Waiting / on" and "Bring / in" were each wrapping onto
two lines, which pushed the bar to double height and made a row of links
read as a ragged paragraph. */
.bar-link { white-space: nowrap; }
/* ---- The rest of the orphans ---------------------------------------------
Found by apps/website/test_stylesheet.py in one pass. Each is defined the
way its template plainly meant it, in the vocabulary already here. */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.lede { font-size: 1.06rem; color: var(--faded); max-width: 70ch; margin: 0 0 18px; }
/* A card that needs to be noticed, without being an error. */
.card-warn {
background: var(--amber-soft); border: 1px solid var(--amber-band);
border-left-width: 4px; border-radius: 10px; padding: 16px 18px; margin: 14px 0;
}
/* Calls to action at the foot of a public guide. */
.guide-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 6px; }
/* Public site sections that had no rule of their own. */
.site-band-alt { background: var(--pen-soft); }
.site-band-in.site-cta-band, .site-cta-band { text-align: center; }
.site-grid-2 {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px;
}
.site-flow-list { margin: 16px 0 0; padding-left: 1.15rem; line-height: 1.7; }
.site-flow-list li { margin-bottom: 12px; }
/* Forms and panels that carry a screen's one job. */
.search-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.booking-form, .feedback-form, .demand-form, .rx-override-form {
display: flex; flex-direction: column; gap: 12px;
}
.booking-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.feedback-choice-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.demand-ask { font-size: .92rem; color: var(--faded); margin: 6px 0; }
.referral-panel, .recall-set, .history-block, .copilot-brief, .mar-main, .record-note {
background: var(--chart); border: 1px solid var(--rule);
border-radius: 10px; padding: 14px 16px; margin: 12px 0;
}
.order-open { border-left: 4px solid var(--pen); }
.exp-unmet { color: var(--amber); font-weight: 650; }
.rx-drug { font-weight: 700; }
.rx-go { margin-top: 10px; }
.chip-allergy {
display: inline-block; background: var(--red-soft); color: var(--red);
border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700;
}
.file-meta { color: var(--faded); }
.till-offline { color: var(--mon-amber); font-weight: 700; }
.ad-slide-card { border-radius: 10px; overflow: hidden; }
.ad-full { width: 100%; display: block; }
/* A referral printed on paper — this one is a document, not a screen. */
.letter { max-width: 720px; margin: 0 auto; padding: 28px; background: var(--chart); }
.letter-head { display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.letter-date { color: var(--faded); font-size: .92rem; }
.letter-body { margin: 22px 0; line-height: 1.75; }
.letter-foot { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 12px;
color: var(--faded); font-size: .92rem; }
/* ---- The counter's quick shelf -------------------------------------------
The till was a search box and an empty basket: correct, and cold. These are
the products this shop actually sells, most-sold first, one tap each. */
.quick-shelf { margin-top: 26px; }
.quick-title {
font-size: 13px; font-weight: 750; letter-spacing: .06em;
text-transform: uppercase; color: var(--faded); margin: 0 0 12px;
}
.quick-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.quick-item { margin: 0; }
.quick-btn {
width: 100%; text-align: left; cursor: pointer;
display: flex; flex-direction: column; gap: 3px;
padding: 12px 14px; min-height: 66px;
background: var(--chart); color: var(--ink);
border: 1.5px solid var(--rule); border-radius: 10px;
transition: border-color .12s, box-shadow .12s, transform .06s;
}
.quick-btn:hover:not(:disabled) {
border-color: var(--pen); box-shadow: var(--shadow);
}
.quick-btn:active:not(:disabled) { transform: translateY(1px); }
.quick-btn:disabled { opacity: .55; cursor: not-allowed; }
.quick-name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.quick-price { color: var(--faded); font-size: 13px; font-variant-numeric: tabular-nums; }
.quick-low { color: var(--amber); font-size: 12px; font-weight: 700; }
.quick-out { color: var(--red); font-size: 12px; font-weight: 700; }
/* ---- The sales history beside the till -----------------------------------
⚠ THE LIST SCROLLS, THE PAGE DOES NOT. A till is a working screen: the
search box and the open sale must stay where the hands expect them while
somebody looks back through the day. Capped in `vh` so it fits whatever
screen it lands on rather than a height guessed from one laptop. */
.sale-history {
margin-top: 18px;
/* ⚠ Spans both columns. As a third grid item it sat under the shelf in the
left column with the whole right half empty beside it — the list needs
the width more than the basket needs company. */
grid-column: 1 / -1;
}
.history-scroll {
list-style: none; margin: 0; padding: 0;
max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
border: 1px solid var(--rule); border-radius: 12px; background: var(--chart);
}
.history-row {
display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
padding: 11px 14px; border-bottom: 1px solid var(--rule-soft);
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: var(--rule-soft); }
.history-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.history-no { font-weight: 700; font-size: 14.5px; }
.history-when { color: var(--faded); font-size: 12.5px; white-space: nowrap; }
.history-who {
grid-column: 1; color: var(--faded); font-size: 12.5px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.history-end {
grid-column: 2; grid-row: 1 / span 2;
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.history-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kept visible and struck rather than dropped — a missing sale 12 is the
question people come to this list to answer. */
.history-void .history-no, .history-void .history-total {
text-decoration: line-through; color: var(--faded);
}
/* ---- Dropdowns ------------------------------------------------------------
Only `.field select` was ever styled, so a bare