/* One stylesheet, no framework. Sized for a reception desk: large type, high
   contrast, status readable at a glance from a metre away. */

/* Palette taken from anitum.com's light theme: neutral greyscale base, near-black
   text and primary surfaces, blue-500 as the single accent. Light only — the app is
   used on fixed clinic screens, and a dark variant would drift from the brand. */

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #eaeaea;
  --text: #0a0a0a;
  --muted: #7a7a7a;

  /* Anitum blue, used for focus and links. */
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, .12);
  /* Primary buttons are near-black like anitum.com's "Book a call". */
  --primary: #0a0a0a;
  --primary-ink: #ffffff;

  --ready: #0f7a41;
  --ready-bg: #e8f6ee;
  --calling: #8a5d00;
  --calling-bg: #fdf4dd;
  --failed: #b3261e;
  --failed-bg: #fdedec;
  --consult: #3b82f6;
  --consult-bg: rgba(59, 130, 246, .12);
  --urgent: #b3261e;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 2px 8px rgba(10, 10, 10, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; white-space: nowrap; }
.sub { display: block; font-size: .8rem; color: var(--muted); }

/* --- top bar ------------------------------------------------------------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.brand-mark { width: 32px; height: 32px; object-fit: contain; display: block; }
.brand-mark-lg { width: 56px; height: 56px; object-fit: contain; display: inline-block; }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.topbar-right form { margin: 0; }
.who { color: var(--muted); font-size: .9rem; }

/* A phone doesn't have room for the branch badge and the display name next to the
   role pill and sign-out button — drop the two that are least useful there (the
   branch badge is a dev aid; the name repeats the role pill's context) so sign-out
   never gets pushed off the edge of the screen. Nothing here changes on a desk
   monitor, where the row already fits. */
@media (max-width: 560px) {
  .topbar { padding: .65rem .85rem; gap: .5rem; }
  .version-badge, .who { display: none; }
}

.role-badge {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .5rem; border-radius: 99px; font-weight: 700;
}
.role-reception { background: #f5f5f5; color: #525252; }
.role-doctor { background: var(--accent-soft); color: var(--accent); }
.role-pcc { background: var(--ready-bg); color: var(--ready); }
.role-admin { background: var(--primary); color: var(--primary-ink); }

.version-badge {
  font-size: .7rem; font-weight: 500; font-family: monospace;
  color: var(--muted); background: #f5f5f5;
  padding: .15rem .45rem; border-radius: 99px;
}

/* --- layout -------------------------------------------------------------- */

main { padding: 1.25rem; max-width: 1500px; margin: 0 auto; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }

.poll-indicator { color: var(--ready); font-size: .7rem; transition: color .3s; }
.poll-indicator.stale { color: var(--muted); }

/* --- stats --------------------------------------------------------------- */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem; margin-bottom: 1.25rem;
}
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow);
}
.stat-value { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-warn .stat-value { color: var(--failed); }

/* --- forms --------------------------------------------------------------- */

.register-form-minimal { max-width: 560px; margin-top: .9rem; }

.input-row { display: flex; gap: .6rem; align-items: stretch; }
.input-row input { flex: 1 1 auto; min-width: 0; }
/* Match the input's height exactly rather than relying on padding parity. */
.input-row .btn { flex: 0 0 auto; }

@media (max-width: 460px) {
  .input-row { flex-direction: column; align-items: stretch; }
}

.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field label { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: .55rem .65rem;
  width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface);
}
textarea { resize: vertical; font-family: inherit; }

.field.has-error input { border-color: var(--failed); }
.field-error { color: var(--failed); font-size: .78rem; min-height: 1em; }
.form-note { font-size: .85rem; margin: .9rem 0 0; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: .55rem .9rem; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover:not(:disabled) { background: #262626; border-color: #262626; color: var(--primary-ink); }
.btn-block { width: 100%; padding: .7rem; }
.btn-small { padding: .3rem .55rem; font-size: .82rem; border-radius: 6px; }
.btn-danger:hover:not(:disabled) { border-color: var(--failed); color: var(--failed); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn-sim { border-style: dashed; color: var(--muted); }

/* Read-aloud: accent-tinted so it reads as a tool, not a workflow action, and
   clearly "on" while speaking. */
.btn-speak {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
  font-variant-numeric: tabular-nums; min-width: 7.5rem;
}
.btn-speak:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
/* Solid while reading, outlined while paused — so "is it talking?" is answerable
   from across the room, not just from the label. */
.btn-speak.speaking { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-speak.speaking:hover { color: #fff; }
.btn-speak.paused {
  background: transparent; border-color: var(--accent); color: var(--accent);
}
.btn-speak:disabled { background: var(--bg); color: var(--muted); }

/* --- pills --------------------------------------------------------------- */

.pill {
  display: inline-block; font-size: .78rem; font-weight: 650;
  padding: .22rem .6rem; border-radius: 99px; white-space: nowrap;
}
.s-registered { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.s-calling { background: var(--calling-bg); color: var(--calling); }
.s-ready { background: var(--ready-bg); color: var(--ready); }
.s-failed { background: var(--failed-bg); color: var(--failed); }
.s-consult { background: var(--consult-bg); color: var(--consult); }

.urgent-chip, .flag-chip {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .12rem .4rem; border-radius: 4px; margin-left: .35rem;
  background: var(--failed-bg); color: var(--failed);
}

/* --- queue table --------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
.queue-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.queue-table-minimal { min-width: 0; }
.queue-table-minimal td { font-size: 1.05rem; }
.queue-table th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--border);
}
.queue-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.queue-table tr:last-child td { border-bottom: none; }
.row-urgent { background: color-mix(in srgb, var(--failed-bg) 45%, transparent); }
.queue-table tr[data-visit-id] { cursor: pointer; }
.queue-table tr.selected { background: var(--accent-soft); }
.patient-name { font-weight: 600; }
.col-actions { width: 1%; white-space: nowrap; }
/* Status and waiting sit tight against their content so the patient name keeps the
   slack — it is the widest and most variable thing in the row. */
.col-status { width: 1%; white-space: nowrap; }
.col-wait   { width: 1%; white-space: nowrap; color: var(--muted); font-size: .85rem; }

.empty { text-align: center; color: var(--muted); padding: 1.5rem; margin: 0; }

/* --- doctor layout ------------------------------------------------------- */

.doctor-layout { display: grid; grid-template-columns: 330px 1fr; gap: 1.25rem; align-items: start; }

.queue-pane { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

/* Below 900px the two columns stack (queue above report — see .doctor-layout above).
   The queue pane's sticky/capped-height rules exist only to pin it in place *beside*
   the report while that column scrolls independently; stacked, there's no second
   column, so the pane instead pins itself over the top of the report as the page
   scrolls, hiding whatever the doctor came here to read. Falling back to normal flow
   makes the queue a section you scroll past on the way to the report, same as any
   other page. */
@media (max-width: 900px) {
  .doctor-layout { grid-template-columns: 1fr; }
  .queue-pane { position: static; max-height: none; overflow-y: visible; }
}
.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.queue-list li {
  border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: 8px; padding: .6rem .7rem; cursor: pointer; background: var(--bg);
}
.queue-list li:hover { border-color: var(--accent); }
.queue-list li.ready { border-left-color: var(--ready); background: var(--surface); }
.queue-list li.in-room { border-left-color: var(--consult); }
.queue-list li.urgent { border-left-color: var(--urgent); }
.queue-list li.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.ql-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.ql-name { font-weight: 650; margin: .15rem 0; }
.ql-reason { font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.ql-status { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* Pushed to the far edge so it never reads as part of the status pills, and can't be
   hit while aiming for the patient. */
.ql-status .btn-callin { margin-left: auto; }
.btn-callin:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

/* The redial. Carries the failure colour because it only ever appears on a row whose
   intake call fell over — it is the row's alarm as much as its action — and sits
   apart from the plain nudge so a hurried desk can't hit the wrong one. */
.btn-retry {
  margin-left: .35rem;
  border-color: color-mix(in srgb, var(--failed) 40%, var(--border));
  color: var(--failed);
}
.btn-retry:hover:not(:disabled) {
  border-color: var(--failed);
  background: var(--failed-bg);
}

/* The only destructive control on either dashboard. Muted until hovered so it never
   competes with the action next to it — on the doctor's screen that neighbour is
   "Complete visit", and the two must not read as a pair. */
.btn-remove { color: var(--muted); border-color: var(--border); }
.btn-remove:hover:not(:disabled) {
  border-color: var(--failed);
  color: var(--failed);
  background: var(--failed-bg);
}
/* Pushed away from the primary actions in the doctor's header row. */
.detail-actions .btn-remove { margin-left: .25rem; }

/* Sits in the queue header, pushed off the heading and away from the live dot. */
.btn-clear-queue {
  margin-left: auto; margin-right: .5rem;
  color: var(--muted); border-color: var(--border);
}
.btn-clear-queue:hover:not(:disabled) {
  border-color: var(--failed); color: var(--failed); background: var(--failed-bg);
}

.detail-pane { min-height: 60vh; }
.detail-placeholder { color: var(--muted); text-align: center; padding: 4rem 1rem; }
.detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
/* Wraps rather than overflows: a full consult can show five buttons at once (read
   aloud, call in, mark for surgery, start/complete, remove), which sit in one row on
   a desk monitor but need two or three on a phone. `.detail-head` already wraps, so
   this row gets the full card width to wrap into once it drops below the title. */
.detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.detail-section { margin-top: 1.4rem; }
.detail-section h3 { margin-bottom: .5rem; }
.summary-text { margin: 0; font-size: 1.05rem; line-height: 1.55; }

.red-flags {
  margin-top: 1.2rem; padding: .8rem 1rem;
  background: var(--failed-bg); border-left: 4px solid var(--failed);
  border-radius: 6px; color: var(--failed);
}
.red-flags ul { margin: .35rem 0 0; padding-left: 1.1rem; }

.qa { margin: 0; display: grid; grid-template-columns: minmax(180px, 40%) 1fr; gap: .1rem 1rem; }
@media (max-width: 640px) { .qa { grid-template-columns: 1fr; } }
.qa dt { color: var(--muted); padding: .45rem 0; border-top: 1px solid var(--border); font-size: .9rem; }
.qa dd { margin: 0; padding: .45rem 0; border-top: 1px solid var(--border); font-weight: 550; }
.qa dt:first-of-type, .qa dd:first-of-type { border-top: none; }

.transcript summary { cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 600; }
.transcript pre {
  white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: .8rem; margin-top: .6rem; font-size: .85rem; max-height: 320px; overflow-y: auto;
}

.save-state { font-size: .8rem; color: var(--muted); }
.prior-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--muted); }
.prior-list li { padding: .35rem 0; border-top: 1px solid var(--border); }
.conversations-list li { cursor: pointer; border-radius: 4px; padding-left: .35rem; padding-right: .35rem; }
.conversations-list li:hover { background: var(--bg); color: var(--text); }
.conversations-list li.selected {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
  cursor: default;
}

/* --- login --------------------------------------------------------------- */

.login-main { display: grid; place-items: center; min-height: 100vh; padding: 1.25rem; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 2rem; width: min(400px, 100%);
}
.login-head { text-align: center; margin-bottom: 1.75rem; }
.login-head h1 { font-size: 1.5rem; margin: .7rem 0 0; }
.login-form { display: flex; flex-direction: column; gap: .35rem; }
.login-form label { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.login-form input { margin-bottom: .6rem; }
.login-form button { margin-top: .5rem; }
.login-hint { text-align: center; font-size: .82rem; margin: 1.2rem 0 0; }
.login-hint code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }

/* --- form-intake page ---------------------------------------------------- */

.subnav {
  display: flex; align-items: center; gap: .25rem;
  margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .6rem;
  /* Four links plus a source label don't fit a phone's width on one line, and
     wrapping them wastes vertical space on a bar that reads as a tab strip — scroll
     it sideways instead, like the tab bars it's imitating. Desktop never triggers
     this: the row already fits, so overflow-x sits idle. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subnav a {
  padding: .35rem .8rem; border-radius: 7px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: .9rem;
  white-space: nowrap; flex: 0 0 auto;
}
.subnav a:hover { background: var(--bg); color: var(--text); }
.subnav a.active { background: var(--accent-soft); color: var(--accent); }
.subnav-source { margin-left: auto; font-size: .82rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

.banner { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 550; }
.banner-error {
  background: var(--failed-bg); color: var(--failed);
  border-left: 4px solid var(--failed);
}

.mapping { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.mapping summary { cursor: pointer; font-size: .85rem; color: var(--muted); font-weight: 600; }
.mapping-table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .8rem; }
.mapping-table td { padding: .25rem .3rem; border-bottom: 1px solid var(--border); }
.mapping-table td:first-child { color: var(--muted); }
/* A question whose wording drifted stops matching — make that visible rather than
   letting the field quietly render blank on the doctor's screen. */
.mapping-table tr.unmapped td { color: var(--calling); background: var(--calling-bg); }

/* --- flashes and toasts -------------------------------------------------- */

.flashes { max-width: 1500px; margin: 1rem auto 0; padding: 0 1.25rem; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: .5rem; font-weight: 550; }
.flash-error { background: var(--failed-bg); color: var(--failed); }
.flash-success { background: var(--ready-bg); color: var(--ready); }

.toast {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50;
  padding: .8rem 1.1rem; border-radius: 10px; box-shadow: var(--shadow);
  background: var(--surface); border: 1px solid var(--border);
  font-weight: 600; max-width: 380px;
}
.toast-success { border-left: 4px solid var(--ready); }
.toast-error { border-left: 4px solid var(--failed); }
.toast-warn { border-left: 4px solid var(--calling); }

/* A triage prompt is a "go and look" signal, not a diagnosis — styled distinctly
   from the red-flag banner so the two are never confused. */
.prompts {
  margin-top: 1rem; padding: .8rem 1rem;
  background: var(--calling-bg); border-left: 4px solid var(--calling);
  border-radius: 6px; color: var(--calling);
}
.prompts ul { margin: .35rem 0 .4rem; padding-left: 1.1rem; }
.prompts .sub { color: inherit; opacity: .8; margin: 0; }

/* --- reception: correcting the name the agent heard ---------------------- */

/* The pencil stays invisible until the row is hovered, so the queue reads as a list
   of patients rather than a row of controls. */
.patient-name { display: flex; align-items: center; gap: .4rem; }
.btn-name-edit {
  border: 0; background: none; cursor: pointer; padding: 0 .2rem;
  color: var(--muted); font-size: .85rem; line-height: 1; border-radius: 4px;
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .btn-name-edit, .btn-name-edit:focus-visible { opacity: 1; }
.btn-name-edit:hover { color: var(--accent); }
.name-input {
  width: 100%; max-width: 15rem; padding: .3rem .45rem;
  border: 1px solid var(--accent); border-radius: 6px;
  font: inherit; color: inherit; background: var(--surface);
}

/* --- doctor: the surgery marker ------------------------------------------ */

/* Outlined while unset so it doesn't compete with "Start consult"; solid once set,
   because then it is a statement about the patient rather than an action. */
.btn-surgery { border-color: var(--consult); color: var(--consult); background: none; }
.btn-surgery:hover:not(:disabled) { background: var(--consult-bg); }
.btn-surgery.is-marked {
  background: var(--consult); border-color: var(--consult); color: #fff;
}
.btn-surgery.is-marked:hover:not(:disabled) { opacity: .9; }

/* --- admin console --------------------------------------------------------- */

.admin-form {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: end;
  margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.admin-form .field { min-width: 160px; flex: 1 1 160px; }
.admin-form button { flex: 0 0 auto; }

.audit-load { display: block; margin: .9rem auto 0; }

/* --- pcc: estimates -------------------------------------------------------- */

.pcc-detail { margin-top: 1.25rem; }

/* --- past patients ------------------------------------------------------- */

.past-search { width: 100%; margin-bottom: .6rem; }
/* Closed visits get a neutral rail rather than a status colour: nothing here is
   waiting on anyone, so a green/amber edge would only read as noise. */
.queue-list li.past { border-left-color: var(--muted); background: var(--surface); }
.past-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; }
.s-done { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.s-notes { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.s-surgery { background: var(--consult); color: #fff; }

/* --- recording the room ---------------------------------------------------- */

/* Red only while it is actually recording. At rest it is a quiet outline like the
   other tools in the row — a permanently red button in a consulting room reads as
   "you are being recorded" whether or not anything is running. */
.btn-record { border-color: var(--border); color: var(--muted); min-width: 7rem; }
.btn-record:hover:not(:disabled) { border-color: var(--failed); color: var(--failed); }
.btn-record.recording {
  background: var(--failed); border-color: var(--failed); color: #fff;
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.btn-record.recording:hover { color: #fff; }
.btn-record.busy { background: var(--bg); color: var(--muted); }

@keyframes rec-pulse { 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  .btn-record.recording { animation: none; }
}

.rec-progress { font-style: italic; }
.rec-meta { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.rec-picker { margin-bottom: .8rem; }

/* The summary is a machine draft and has to look like one wherever it appears — a
   doctor skimming should never mistake it for something a person wrote and checked. */
.rec-draft {
  margin: 0 0 .8rem; padding: .5rem .75rem; font-size: .85rem;
  background: var(--bg); border-left: 3px solid var(--muted); border-radius: 4px;
  color: var(--muted);
}
.rec-failed {
  margin: 0; padding: .6rem .8rem; border-radius: 6px;
  background: var(--failed-bg); color: var(--failed); font-size: .92rem;
}
.rec-summary { margin-top: .2rem; }
.rec-list { margin: 0; padding-left: 1.05rem; }
.rec-list li { padding: .1rem 0; }