:root{--ink:#1A1A2E;--muted:#5A5A6E;--line:#DDDFF0;--bg:#F6F7FB;--surface:#fff;
--indigo:#4338CA;--teal:#0E7C6B;--red:#B3261E;--amber:#B45309;
--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);
color:var(--ink);border-radius:8px;padding:7px 12px}
button:hover:not(:disabled){border-color:var(--indigo)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
input,select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
background:var(--surface);color:var(--ink)}
.top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 20px;
background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:-.02em}
.top .sp{flex:1}
.ctx{font-size:12px;color:var(--muted)}
.ctx b{color:var(--ink)}
nav{display:flex;gap:4px;padding:10px 20px;background:var(--surface);
border-bottom:1px solid var(--line);flex-wrap:wrap}
nav button.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
main{padding:20px;max-width:1100px}
h1{font-size:19px;margin:0 0 4px}
.sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;
padding:15px 17px;margin-bottom:14px}
.card h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 11px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
.num,.mono{font-family:var(--mono);font-size:12.5px}
.chip{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.chip.due{background:#EEF;color:var(--indigo)}
.chip.dosed{background:#E6F4F1;color:var(--teal)}
.chip.held{background:#FEF3C7;color:var(--amber)}
.chip.blocked{background:#FDE8E6;color:var(--red)}
.ok{color:var(--teal)}.bad{color:var(--red)}.warn{color:var(--amber)}
.checks li{list-style:none;display:flex;gap:9px;padding:6px 0;border-bottom:1px solid var(--line)}
.checks{margin:0;padding:0}
.checks .m{width:16px;font-weight:700}
.checks .d{color:var(--muted);font-size:12px}
.banner{padding:11px 14px;border-radius:9px;margin-bottom:14px;font-size:13px}
.banner.good{background:#E6F4F1;color:var(--teal)}
.banner.bad{background:#FDE8E6;color:var(--red)}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}
.err{color:var(--red);font-size:12.5px;margin-top:9px;font-family:var(--mono)}
.login{max-width:420px;margin:60px auto}
.foot{color:var(--muted);font-size:11.5px;margin-top:9px}

/* Forms. Added when the console stopped using prompt() for everything: a
   witnessed waste has four fields and a browser prompt asks for one at a
   time, in a dialog that cannot say what it is for. */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.form label{display:flex;flex-direction:column;gap:4px;font-size:11px;
text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.form label input,.form label select,.form label textarea{font:inherit;text-transform:none;
letter-spacing:0;color:var(--ink)}
.form textarea{padding:7px 9px;border:1px solid var(--line);border-radius:8px;
background:var(--surface);min-height:38px;resize:vertical;font:inherit}
.form .wide{grid-column:1/-1}
.form button{align-self:end}
details.card summary{cursor:pointer;font-size:13px;text-transform:uppercase;
letter-spacing:.06em;color:var(--muted);margin:-2px 0 0}
details.card[open] summary{margin-bottom:11px}
.chip.pending{background:#EEF;color:var(--indigo)}
.chip.muted{background:#EFEFF4;color:var(--muted)}
.banner.warn{background:#FEF3C7;color:var(--amber)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-family:var(--mono);font-size:12.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* -------------------------------------------------------------- printing
 *
 * A label and an identification card are the two things in this console that
 * leave the building on paper. Everything else on the page is hidden when
 * printing, because a browser's default is to print the whole application
 * chrome around a 60mm label.
 *
 * The card is deliberately plain. See viewPrint() in app.js for why nothing
 * on it names the medication or the programme.
 */
.printable{display:none}
.label-sheet{display:flex;flex-wrap:wrap;gap:8px}
.rx-label{border:1px solid #999;padding:8px 10px;width:320px;font-family:var(--mono);
  font-size:11.5px;line-height:1.5;white-space:pre-wrap}
.id-card{border:1px solid #999;border-radius:8px;padding:14px 16px;width:320px}
.id-card .who{font-size:17px;font-weight:600}
.id-card .num{font-family:var(--mono);font-size:13px;margin-top:2px}
.id-card .call{margin-top:10px;font-size:12.5px;line-height:1.5}
@media print{
  body{background:#fff}
  nav,header,.card,h1,button,.banner{display:none !important}
  .printable{display:block}
  .rx-label,.id-card{break-inside:avoid;page-break-inside:avoid}
}