:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --border: #d8dee8;
  --text: #1a2332;
  --muted: #5c6b82;
  --accent: #1a6fb5;
  --accent-hover: #155a94;
  --ok-bg: #e6f7ee;
  --ok-fg: #0d6b3a;
  --warn-bg: #fff6e5;
  --warn-fg: #9a6700;
  --bad-bg: #fde8ee;
  --bad-fg: #b42318;
  --info-bg: #e8f2fc;
  --info-fg: #0b4f8a;
  --link: #0b5cab;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn-link {
  display: inline-block;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.25rem 0.55rem;
  background: var(--info-bg);
  color: var(--info-fg);
  border: 1px solid #b6d4f0;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
a.btn-link:hover { background: #d6e9fb; text-decoration: none; }
a.btn-link.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
a.btn-link.primary:hover { background: var(--accent-hover); }
header {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
header .brand { font-weight: 700; margin-right: auto; color: var(--text); }
header nav a { margin-right: 0.9rem; color: var(--muted); }
header nav a:hover { color: var(--text); }
main { padding: 1.25rem; max-width: 1200px; margin: 0 auto; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { font-size: 1.6rem; font-weight: 700; }
.muted { color: var(--muted); font-size: 0.9rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #eef1f5;
  color: var(--text);
}
.badge.EXPIRED, .badge.bad, .badge.high {
  background: var(--bad-bg); color: var(--bad-fg); border-color: #f3b4b4;
}
.badge.RED-60 {
  background: #ffece0; color: #9a3412; border-color: #fdba8c;
}
.badge.AMBER-90 {
  background: var(--warn-bg); color: var(--warn-fg); border-color: #f5d78e;
}
.badge.OK {
  background: var(--ok-bg); color: var(--ok-fg); border-color: #86efac;
}
.badge.VERIFY, .badge.open {
  background: var(--info-bg); color: var(--info-fg); border-color: #93c5fd;
}
form.inline { display: inline; }
input, select, textarea, button {
  font: inherit;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
}
button, .btn {
  background: var(--accent);
  border: none;
  color: white;
  cursor: pointer;
  font-weight: 600;
}
button:hover { background: var(--accent-hover); }
button.secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
.login-wrap { max-width: 380px; margin: 4rem auto; }
.error { color: var(--bad-fg); margin-bottom: 0.75rem; }
.stack > * + * { margin-top: 0.75rem; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; }
.field { margin-bottom: 0.75rem; }
h1 { font-size: 1.35rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.flags { white-space: pre-wrap; color: var(--muted); font-size: 0.85rem; }
.source-row { margin-top: 0.35rem; }
.verify-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.req { color: var(--bad-fg); font-weight: 600; font-size: 0.8rem; }
.about-card .about-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 52rem;
}
.about-grid {
  display: grid;
  gap: 0.85rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 1rem;
}
.about-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.about-npi {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.npi-num {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.todo-hero {
  background: #e8f2fc;
  border-color: #93c5fd;
}
.todo-card {
  border-left: 4px solid var(--accent);
}
.todo-card.todo-error {
  border-left-color: var(--bad-fg);
  background: #fef2f2;
}
.todo-step {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.todo-title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.todo-title em { font-style: normal; color: var(--bad-fg); }
.todo-why { margin: 0 0 0.75rem; max-width: 40rem; }
.todo-have, .todo-need { margin: 0.5rem 0; font-size: 0.95rem; }
.todo-need ul { margin: 0.25rem 0 0 1.1rem; padding: 0; }
.todo-hint { margin: 0.5rem 0 0.75rem; }
.todo-form { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.btn-big {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.btn-big:hover { background: var(--accent-hover); }
.ok-banner {
  border-color: #86efac;
  background: #e6f7ee;
}
.done-fold summary {
  cursor: pointer;
  list-style: none;
}
.done-fold summary::-webkit-details-marker { display: none; }


/* --- practitioner attestation + audit (added 2026-08-09) --- */
.panel { border: 1px solid #d9dee5; border-radius: 8px; padding: 14px 16px; margin: 14px 0; background: #fff; }
.panel-warn { border-color: #d98b00; background: #fff9ec; }
.panel h2 { margin-top: 0; font-size: 1rem; }
.crumb { margin-bottom: 4px; }
.lede { color: #4a5461; max-width: 70ch; }
.small { font-size: 0.85rem; }
.muted { color: #6b7480; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea.mono { width: 100%; padding: 10px; border: 1px solid #d9dee5; border-radius: 6px; }
table.wide { width: 100%; border-collapse: collapse; margin: 10px 0 20px; }
table.wide th, table.wide td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #e6eaee; }
table.wide th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7480; }
.row-warn { background: #fff9ec; }
ul.tight { margin: 6px 0 0; padding-left: 18px; }
ul.tight li { font-size: 0.85rem; color: #4a5461; }
.psv { margin-top: 6px; font-size: 0.8rem; color: #6b7480; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; }
.pill-high { background: #fde8e8; color: #9b1c1c; }
.pill-normal { background: #eef2f7; color: #445; }
.pill-low { background: #f4f6f8; color: #7a828c; }
.warn-line { color: #8a5a00; }
.btn { display: inline-block; padding: 8px 14px; background: #1f2a37; color: #fff; border-radius: 6px; text-decoration: none; }
.err { background: #fde8e8; color: #9b1c1c; padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
details pre { white-space: pre-wrap; word-break: break-all; }
form.inline { display: inline-block; margin: 2px 0; }
form.inline input[type=text] { width: 110px; padding: 4px 6px; font-size: 0.8rem; }
button.secondary { background: #6b7480; }

/* --- Data export / import ------------------------------------------------
   The import form is styled to look dangerous on purpose. It deletes the audit
   log, and a destructive control that looks like every other button is how
   someone clicks it on the way to something else. */
.banner { padding: 0.75rem 1rem; border-radius: 6px; margin: 1rem 0; max-width: 80ch; }
.banner.ok  { background: #eaf6ec; border: 1px solid #b7dcc0; color: #1e5b2c; }
.banner.bad { background: #fdecec; border: 1px solid #f0b7b7; color: #8a1f1f; }

.card.danger { border-color: #e0a3a3; background: #fffafa; }
.card.danger h2 { color: #8a1f1f; }
.card .actions { margin-top: 0.9rem; }
.card label { display: block; margin: 0.6rem 0; }
.card input[type="text"], .card input[type="file"] { margin-top: 0.25rem; }
button.danger { background: #8a1f1f; border-color: #8a1f1f; color: #fff; }
button.danger:hover { background: #6f1818; }
p.warn { color: #8a5a00; background: #fff8e8; border: 1px solid #e8d5a3;
         padding: 0.6rem 0.8rem; border-radius: 6px; max-width: 80ch; }

/* --- Document intake ----------------------------------------------------- */
.dropzone { border: 2px dashed #c3cbd6; border-radius: 10px; padding: 1.6rem;
            text-align: center; background: #fbfcfd; transition: background .12s; }
.dropzone.over { background: #eef5ff; border-color: #6f9bdc; }
.dropzone p { margin: 0.3rem 0; }
.intake-item .intake-head { display: flex; gap: 0.75rem; align-items: baseline;
                            flex-wrap: wrap; margin-bottom: 0.5rem; }
.pill { font-size: 0.75rem; padding: 0.12rem 0.5rem; border-radius: 999px;
        border: 1px solid transparent; }
.pill.good  { background: #eaf6ec; border-color: #b7dcc0; color: #1e5b2c; }
.pill.maybe { background: #fff8e8; border-color: #e8d5a3; color: #8a5a00; }
.pill.none  { background: #f1f3f5; border-color: #d8dde2; color: #5b636b; }
ul.reasons { margin: 0.4rem 0 0.6rem 1.1rem; color: #4a5461; font-size: 0.92rem; }
.intake-decide { display: grid; gap: 0.5rem; max-width: 70ch; }
.intake-decide select, .intake-decide input[type="text"] { width: 100%; }
button.secondary { background: #fff; color: #5b636b; border: 1px solid #c3cbd6; }

/* The transcript is the evidence behind the suggestion. Collapsed by default so the queue
   stays scannable, but always present — a person cannot check a reading they cannot see. */
.read-by { font-size: 0.9rem; color: #4a5461; margin: 0.3rem 0 0.5rem; }
.findings span { margin-right: 1.2rem; }
details.transcript { margin: 0.5rem 0 0.8rem; }
details.transcript summary { cursor: pointer; color: #3b6fb6; font-size: 0.9rem; }
details.transcript pre { background: #f7f9fb; border: 1px solid #dde3ea; border-radius: 6px;
  padding: 0.7rem 0.9rem; max-height: 22rem; overflow: auto; white-space: pre-wrap;
  word-break: break-word; font-size: 0.82rem; line-height: 1.45; margin-top: 0.45rem; }

/* --- Intake: the document beside the fields -------------------------------
   Confirming a suggestion against a transcript is circular — the transcript is
   the machine's reading, which is the thing being checked. The original page has
   to be on screen at the same time as the fields, or "confirm" means nothing. */
.side-by-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 1.2rem; align-items: start; }
@media (max-width: 1100px) { .side-by-side { grid-template-columns: 1fr; } }

.doc-pane { position: sticky; top: 1rem; }
.doc-pane iframe { width: 100%; height: 34rem; border: 1px solid #dde3ea;
                   border-radius: 8px; background: #fff; }
.doc-pane img { width: 100%; height: auto; max-height: 34rem; object-fit: contain;
                border: 1px solid #dde3ea; border-radius: 8px; background: #fff; }
.doc-pane .no-preview { border: 1px dashed #c3cbd6; border-radius: 8px;
                        padding: 1.2rem; text-align: center; }
.open-original { font-size: 0.85rem; }
.decide-pane { min-width: 0; }