/* PRISM doctor view — light, clinical, prints as is */
:root {
  --bg: #FFFFFF;
  --text: #111827;
  --secondary: #4B5563;
  --accent: #2563EB;
  --border: #E5E7EB;
  --high: #B91C1C;
  --low: #B45309;
  --normal: #047857;
  --surface: #F9FAFB;
  --radius: 8px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.app { min-height: 100vh; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  min-height: 56px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.topbar h1 { font-size: 22px; font-weight: 600; }
.viewer-label { color: var(--secondary); font-size: 14px; }
.topbar .spacer { flex: 1; }

.countdown-chip {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--normal);
  background: var(--surface);
  min-height: 32px;
}
.countdown-chip.warn { color: var(--low); border-color: var(--low); }
.countdown-chip.crit { color: var(--high); border-color: var(--high); font-weight: 600; }

.btn {
  appearance: none; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); border-radius: var(--radius);
  min-height: 44px; padding: 0 18px; font-size: 16px; cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn:focus-visible, .code-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- landing / waiting / ended ---------- */
.gate {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.gate-card {
  width: 100%; max-width: 440px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 24px; background: var(--bg);
}
.gate-card h1 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.gate-card p { color: var(--secondary); margin-bottom: 20px; }
.gate-card .btn { width: 100%; }
.pairing-label { margin-bottom: 4px !important; }
.pairing-number { font-family: var(--mono); font-size: 56px; font-weight: 700; letter-spacing: .18em; color: var(--accent); text-align: center; margin: 0 0 8px; }
.gate-error { color: var(--high); font-size: 14px; margin: 12px 0 0; min-height: 20px; }
.or-row {
  display: flex; align-items: center; gap: 12px;
  color: var(--secondary); font-size: 14px; margin: 20px 0;
}
.or-row::before, .or-row::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.code-input {
  width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 14px; font-family: var(--mono); font-size: 18px; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 12px; background: var(--bg); color: var(--text);
}
.waiting-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent;
  margin: 0 auto 20px;
}

/* ---------- record ---------- */
.record { padding: 20px 0 80px; }
.block { margin-bottom: 32px; }
.block h2 {
  font-size: 17px; font-weight: 600; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.block h2 .count { color: var(--secondary); font-weight: 400; font-size: 14px; }
.summary-text { color: var(--text); margin-bottom: 12px; }
.meta-line { color: var(--secondary); font-size: 14px; margin-bottom: 4px; }

.allergy-badge {
  display: inline-block; margin: 0 8px 8px 0; padding: 6px 12px;
  border: 1px solid var(--high); color: var(--high); border-radius: 999px;
  font-size: 14px; font-weight: 600; background: #FEF2F2;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

.flag-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid;
}
.flag-normal { color: var(--normal); border-color: var(--normal); }
.flag-high { color: var(--high); border-color: var(--high); background: #FEF2F2; }
.flag-low { color: var(--low); border-color: var(--low); background: #FFFBEB; }

.section-block { margin-bottom: 24px; }
.section-block h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.chart-box { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--bg); }
.chart-title { font-size: 13px; color: var(--secondary); margin-bottom: 6px; }
.chart-title .mono { font-family: var(--mono); }

.cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) {
  .cols { grid-template-columns: 1fr 1fr; }
  .cols .span2 { grid-column: 1 / -1; }
}

.event-item, .followup-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 8px; background: var(--bg);
}
.event-item .date, .followup-item .status {
  font-family: var(--mono); font-size: 13px; color: var(--secondary);
}
.event-item .title, .followup-item .title { font-weight: 600; }
.event-item .detail { color: var(--secondary); font-size: 14px; }
.followup-item.open { border-left: 3px solid var(--low); }
.kind-chip {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--secondary); margin-left: 8px;
}

.empty-note { color: var(--secondary); font-size: 14px; }

/* ---------- watermark ---------- */
.watermark {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none; overflow: hidden;
  opacity: 0.08;
  display: none;
}
.watermark.on { display: block; }
.watermark-line {
  position: absolute; left: -50%; width: 200%;
  white-space: nowrap; font-size: 14px; color: #111827;
  transform: rotate(-24deg);
  font-family: var(--mono);
}
.print-footer { display: none; }

/* ---------- print ---------- */
@media print {
  .topbar .btn, .countdown-chip { display: none; }
  .topbar { position: static; }
  body { color: #000; }
  .block { break-before: page; }
  .block:first-of-type { break-before: auto; }
  table, th, td { border: 1px solid #000; }
  .flag-pill { background: none; color: #000; border-color: #000; }
  .allergy-badge { background: none; color: #000; border-color: #000; }
  .watermark { opacity: 0.12; }
  .watermark-line { color: #888; }
  .print-footer {
    display: block; position: fixed; bottom: 0; left: 0; right: 0;
    font-size: 11px; color: #555; text-align: center;
    border-top: 1px solid #ccc; padding: 4px; background: #fff;
  }
  .chart-box { border-color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}