/* Vestibular AI — Physician Workspace v0.1 (PHYSICIAN_FROZEN)
 *
 * Professional medical, calm, dense without clutter.
 *
 * The one thing the palette is doing clinically: six content classes have six
 * distinct visual channels, and they never borrow each other's colour.
 *
 *   patient data ......... neutral slate     (what was entered)
 *   physician input ...... teal              (what the physician wrote)
 *   Vestibular AI ........ indigo            (what the engine said)
 *   system error ......... red, hatched      (the software failed)
 *   library limitation ... amber, dashed     (the library ran out)
 *   missing data ......... grey, dotted      (nobody looked, or nobody knows)
 *
 * A system error must never be able to read as a clinical finding, and missing
 * data must never read as a negative result. That is why the error channel is
 * hatched and the missing channel is dotted: colour alone fails for a
 * colour-blind reader and in print.
 *
 * There are no ranking bars, no probability meters and no confidence gauges in
 * this stylesheet, and there is no class that could be used to build one.
 */

:root {
  color-scheme: light;

  --ink: #16202c;
  --ink-soft: #4a5a6a;
  --ink-faint: #7a8796;
  --line: #dde3ea;
  --line-strong: #c3ccd6;
  --page: #f5f7f9;
  --surface: #ffffff;
  --surface-sunken: #eef2f6;

  --patient: #4a5a6a;
  --patient-bg: #f2f5f8;

  --physician: #0f766e;
  --physician-bg: #eefbf8;

  --ai: #4338ca;
  --ai-bg: #f1f1fe;
  --ai-line: #c9c9f5;

  --urgent: #b91c1c;
  --urgent-bg: #fef2f2;
  --urgent-line: #f3b6b6;

  --treatable: #166534;
  --treatable-bg: #f0fbf3;
  --treatable-line: #b6e0c4;

  --warn: #92400e;
  --warn-bg: #fffaf0;
  --warn-line: #f0d9ae;

  --limit: #8a6d1f;
  --limit-bg: #fdfaf0;

  --error: #9f1239;
  --error-bg: #fff1f4;

  --missing: #6b7684;
  --missing-bg: #f4f5f7;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(22, 32, 44, 0.06), 0 1px 8px rgba(22, 32, 44, 0.04);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --nav-h: 56px;
  --bottom-h: 58px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

#root {
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--ai);
}

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

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  min-height: var(--nav-h);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ai);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  align-self: center;
}

.brand .sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-faint);
}

.topbar .spacer {
  flex: 1;
}

.candidate-flag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.sidenav {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 12px 8px 28px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.sidenav .group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  padding: 12px 10px 5px;
}

.navitem {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13.5px;
  min-height: 38px;
}

.navitem:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.navitem[aria-current="page"] {
  background: var(--ai-bg);
  color: var(--ai);
  font-weight: 600;
}

.navitem .n {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-faint);
  min-width: 16px;
}

.navitem[aria-current="page"] .n {
  color: var(--ai);
}

.navitem:disabled {
  opacity: 0.45;
  cursor: default;
}

.main {
  min-width: 0;
  padding: 16px 20px 96px;
  max-width: 1180px;
}

.bottomnav {
  display: none;
}

/* ------------------------------------------------------------ typography */

h1 {
  font-size: 21px;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 14px;
  margin: 0 0 6px;
}

.screen-head {
  margin-bottom: 14px;
}

.screen-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  max-width: 78ch;
}

.muted {
  color: var(--ink-faint);
}

.small {
  font-size: 12.5px;
}

.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  word-break: break-all;
}

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.card.tight {
  padding: 10px 12px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.card-head h2,
.card-head h3 {
  margin: 0;
}

.grid {
  display: grid;
  gap: 12px;
}

.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.row.between {
  justify-content: space-between;
}

/* ----------------------------------------------------------- content channels */

.channel {
  border-left: 3px solid var(--line-strong);
  padding-left: 11px;
}

.channel-patient {
  border-left-color: var(--patient);
}

.channel-physician {
  border-left-color: var(--physician);
}

.channel-ai {
  border-left-color: var(--ai);
}

.origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

.origin-patient {
  background: var(--patient-bg);
  color: var(--patient);
}

.origin-physician {
  background: var(--physician-bg);
  color: var(--physician);
}

.origin-ai {
  background: var(--ai-bg);
  color: var(--ai);
}

.origin-error {
  background: var(--error-bg);
  color: var(--error);
}

.origin-limit {
  background: var(--limit-bg);
  color: var(--limit);
}

.origin-missing {
  background: var(--missing-bg);
  color: var(--missing);
}

/* Banners: one per content class, each visually distinct in shape as well as
 * colour so the distinction survives greyscale printing. */

.banner {
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin: 0 0 12px;
  font-size: 13.5px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.banner .icon {
  font-weight: 700;
  line-height: 1.35;
}

.banner-error {
  background: repeating-linear-gradient(
    135deg,
    var(--error-bg),
    var(--error-bg) 9px,
    #ffe4ea 9px,
    #ffe4ea 18px
  );
  border: 2px solid var(--error);
  color: #7a0d2c;
}

.banner-urgent {
  background: var(--urgent-bg);
  border: 2px solid var(--urgent);
  color: #7f1616;
}

.banner-treatable {
  background: var(--treatable-bg);
  border: 1px solid var(--treatable-line);
  color: #14532d;
}

.banner-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: #7c3d0a;
}

.banner-limit {
  background: var(--limit-bg);
  border: 1px dashed var(--limit);
  color: #6f5716;
}

.banner-missing {
  background: var(--missing-bg);
  border: 1px dotted var(--missing);
  color: #55606e;
}

.banner-ai {
  background: var(--ai-bg);
  border: 1px solid var(--ai-line);
  color: #3730a3;
}

.banner-demo {
  background: #fff8e6;
  border: 1px solid #ecd08a;
  color: #7a5b12;
  font-weight: 600;
}

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 550;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  white-space: nowrap;
}

.chip-ok {
  background: var(--treatable-bg);
  border-color: var(--treatable-line);
  color: var(--treatable);
}

.chip-warn {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn);
}

.chip-error {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

.chip-ai {
  background: var(--ai-bg);
  border-color: var(--ai-line);
  color: var(--ai);
}

.chip-missing {
  background: var(--missing-bg);
  border-style: dotted;
  color: var(--missing);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 14px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-sunken);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--ai);
  border-color: var(--ai);
  color: #fff;
}

.btn-primary:hover {
  background: #3730a3;
}

.btn-danger {
  color: var(--urgent);
  border-color: var(--urgent-line);
  background: var(--urgent-bg);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
  padding: 6px 9px;
  min-height: 34px;
}

.btn-ghost:hover {
  background: var(--surface-sunken);
}

.btn-sm {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12.5px;
}

.btn-block {
  width: 100%;
}

.why-btn {
  border: 1px solid var(--ai-line);
  background: var(--surface);
  color: var(--ai);
  border-radius: 999px;
  font-size: 11.5px;
  padding: 3px 10px;
  min-height: 28px;
  cursor: pointer;
  white-space: nowrap;
}

.why-btn:hover {
  background: var(--ai-bg);
}

/* ------------------------------------------------------------ collapsible */

.collapsible {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 9px;
  overflow: hidden;
}

.collapsible > .head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 11px 13px;
  cursor: pointer;
  text-align: left;
  min-height: 46px;
}

.collapsible > .head:hover {
  background: var(--surface-sunken);
}

.collapsible > .head .title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}

.collapsible > .head .caret {
  color: var(--ink-faint);
  font-size: 12px;
  transition: transform 0.12s ease;
}

.collapsible.open > .head .caret {
  transform: rotate(90deg);
}

.collapsible > .body {
  padding: 4px 13px 14px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------- fields */

.field {
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}

.field:last-child {
  border-bottom: 0;
}

.field-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.field-label .txt {
  font-size: 13.5px;
  font-weight: 550;
}

.field-label .hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  flex-basis: 100%;
}

.state-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.state-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  cursor: pointer;
  min-height: 34px;
  color: var(--ink-soft);
}

.state-btn:hover {
  background: var(--surface-sunken);
}

.state-btn[aria-pressed="true"] {
  font-weight: 650;
}

.state-btn.s-PRESENT[aria-pressed="true"] {
  background: #e7f3ff;
  border-color: #8fbfe8;
  color: #14507f;
}

.state-btn.s-ABSENT[aria-pressed="true"] {
  background: var(--treatable-bg);
  border-color: var(--treatable-line);
  color: var(--treatable);
}

.state-btn.s-NOT_ASSESSED[aria-pressed="true"],
.state-btn.s-UNKNOWN[aria-pressed="true"],
.state-btn.s-NOT_REPORTED[aria-pressed="true"] {
  background: var(--missing-bg);
  border-color: var(--missing);
  border-style: dotted;
  color: var(--missing);
}

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface);
  min-height: 40px;
}

.textarea {
  min-height: 78px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus,
.btn:focus-visible,
.navitem:focus-visible,
.state-btn:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 1px;
}

.field-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  margin-top: 7px;
}

/* --------------------------------------------------------- patient header */

.patient-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
}

.patient-header .name {
  font-weight: 650;
  font-size: 16px;
}

.patient-header .facts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.patient-header .facts .dot::before {
  content: "·";
  margin-right: 8px;
  color: var(--line-strong);
}

/* ------------------------------------------------------------- timeline */

.timeline {
  position: relative;
  padding-left: 22px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}

.tl-item {
  position: relative;
  padding: 7px 0 7px 4px;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--patient);
}

.tl-item.k-ONSET::before {
  border-color: var(--ai);
}

.tl-item.k-DETERIORATION::before {
  border-color: var(--urgent);
}

.tl-item.k-IMPROVEMENT::before {
  border-color: var(--treatable);
}

.tl-item.k-VISIT::before {
  background: var(--ai);
  border-color: var(--ai);
}

.tl-when {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tl-label {
  font-size: 13.5px;
}

/* ---------------------------------------------------------- node cards */

.node-card {
  border: 1px solid var(--ai-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 9px;
  overflow: hidden;
}

.node-card > .head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: var(--ai-bg);
  padding: 10px 13px;
  cursor: pointer;
  text-align: left;
  min-height: 46px;
}

.node-card .node-name {
  font-weight: 650;
  color: var(--ai);
  font-size: 14px;
}

.node-card > .body {
  padding: 10px 13px 13px;
}

.kv {
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr;
  gap: 4px 12px;
  font-size: 13px;
}

.kv dt {
  color: var(--ink-faint);
  font-size: 12px;
}

.kv dd {
  margin: 0;
}

/* --------------------------------------------------------- statements */

.stmt {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}

.stmt:last-child {
  border-bottom: 0;
}

.stmt .text {
  margin-bottom: 5px;
  /*
   * The engine's own wording sometimes contains a governed identifier with no
   * spaces in it -- TREATABLE:ACA:NODE____ACA____NODE_FIELD_... -- and that
   * token is carried verbatim, because rewriting it would be rewriting the
   * engine. A word longer than a phone screen has to be allowed to break, or
   * it pushes the whole page sideways.
   */
  overflow-wrap: anywhere;
}

.stmt .meta {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}

.verbatim-note {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------- drawer */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 32, 44, 0.38);
  z-index: 90;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  background: var(--surface);
  z-index: 91;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(22, 32, 44, 0.14);
}

.drawer > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.drawer > header h2 {
  flex: 1;
  min-width: 0;
}

.drawer > .body {
  overflow-y: auto;
  padding: 14px;
  flex: 1;
}

.chain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chain li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px dashed var(--line);
}

.chain li::before {
  content: "▾";
  position: absolute;
  left: 6px;
  top: 10px;
  color: var(--ai);
  font-size: 11px;
}

.chain li:last-child {
  border-bottom: 0;
}

.chain .step-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

pre.json {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
  max-height: 380px;
}

/* ------------------------------------------------------------ analysis */

.run-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  margin: 16px -20px -96px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 25;
}

.section-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 11px;
  overflow: hidden;
}

.section-block > .head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  min-height: 50px;
}

.section-block .num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-faint);
  min-width: 20px;
}

.section-block .title {
  font-weight: 650;
  font-size: 14.5px;
  flex: 1;
  min-width: 0;
}

.section-block > .body {
  padding: 0 14px 14px;
}

.section-block.em-URGENT {
  border-color: var(--urgent);
  border-width: 2px;
}

.section-block.em-URGENT > .head {
  background: var(--urgent-bg);
}

.section-block.em-URGENT .title {
  color: var(--urgent);
}

.section-block.em-TREATABLE {
  border-color: var(--treatable-line);
}

.section-block.em-TREATABLE > .head {
  background: var(--treatable-bg);
}

.section-block.em-TREATABLE .title {
  color: var(--treatable);
}

.section-block.em-WARNING {
  border-color: var(--warn-line);
}

.section-block.em-WARNING > .head {
  background: var(--warn-bg);
}

.section-block.em-LIMITATION {
  border-style: dashed;
  border-color: var(--limit);
}

.section-block.em-LIMITATION > .head {
  background: var(--limit-bg);
}

.inventory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.inv-cell {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: var(--surface);
}

.inv-cell .n {
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.inv-cell .l {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.inv-cell.urgent {
  border-color: var(--urgent);
  background: var(--urgent-bg);
}

.inv-cell.urgent .n {
  color: var(--urgent);
}

.inv-cell.treatable {
  border-color: var(--treatable-line);
  background: var(--treatable-bg);
}

.inv-cell.treatable .n {
  color: var(--treatable);
}

.inv-cell.warn {
  border-color: var(--warn-line);
  background: var(--warn-bg);
}

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

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.tbl th,
table.tbl td {
  text-align: left;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.tbl th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
}

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stack > * + * {
  margin-top: 9px;
}

/* ---------------------------------------------------------------- export */

.consult {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 860px;
  /* A 64-character SHA-256 in a monospace run has no break opportunity, and a
   * consultation summary is full of them. Without this the export screen is
   * the one screen that scrolls sideways on a phone. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.consult pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.consult h2 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  margin-top: 20px;
}

.consult h2:first-of-type {
  margin-top: 6px;
}

.consult .disclaimer {
  border: 1px solid var(--ai-line);
  background: var(--ai-bg);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 13px;
  color: #3730a3;
  margin-top: 22px;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidenav {
    display: none;
  }

  .main {
    padding: 12px 14px calc(var(--bottom-h) + 78px);
  }

  .bottomnav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 2px;
  }

  .bottomnav button {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 5px 2px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--ink-faint);
    cursor: pointer;
    line-height: 1.15;
  }

  .bottomnav button .glyph {
    font-size: 16px;
    line-height: 1;
  }

  .bottomnav button[aria-current="page"] {
    color: var(--ai);
    background: var(--ai-bg);
    font-weight: 600;
  }

  .run-bar {
    margin: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bottom-h);
    border-top: 1px solid var(--line);
  }

  .patient-header {
    position: static;
  }

  .drawer {
    top: auto;
    height: 88vh;
    width: 100vw;
    border-radius: 14px 14px 0 0;
  }

  .kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px 0;
  }

  .kv dt {
    margin-top: 7px;
  }

  h1 {
    font-size: 19px;
  }

  .consult {
    padding: 14px 15px;
  }
}

/* The top bar is the one strip that cannot scroll, so at narrow widths it
 * wraps and its chips shrink rather than pushing the document wider. A single
 * nowrap badge in a sticky header is the classic cause of a page that scrolls
 * sideways on a phone. */
@media (max-width: 560px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 3px;
    padding: 6px 11px;
    min-height: auto;
  }

  .brand {
    font-size: 14px;
  }

  .topbar .spacer {
    flex-basis: 100%;
    height: 0;
  }

  .candidate-flag {
    white-space: normal;
    font-size: 10px;
    padding: 2px 7px;
  }

  .chip {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .state-btn {
    padding: 5px 9px;
    font-size: 12px;
  }

  .main {
    padding-left: 11px;
    padding-right: 11px;
  }

  .card {
    padding: 12px 12px;
  }

  .inventory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------- print */

@media print {
  .topbar,
  .sidenav,
  .bottomnav,
  .run-bar,
  .why-btn,
  .btn,
  .drawer,
  .drawer-backdrop {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .main {
    padding: 0;
    max-width: none;
  }

  .consult {
    border: 0;
    padding: 0;
    max-width: none;
  }

  .card,
  .section-block,
  .collapsible {
    break-inside: avoid;
    box-shadow: none;
  }

  .banner-demo {
    border: 2px solid #000;
  }
}