/* Low-ink design: light background, thin borders, one accent color. */
/* Self-hosted display face: Manrope variable (200-800), big headings at light weights. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --ink-faint: #888;
  --line: #e3e3e3;
  --accent: #3f3f46;
  --accent-soft: #f4f4f5;
  --warn: #b45309;
  --contradict: #b91c1c;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
}

/* ---------- header ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 22px 0;
}

.brand h1 { margin: 0; font-family: var(--font-display); font-size: 27px; font-weight: 300; letter-spacing: -0.02em; }
.brand h1 .thin { font-weight: 300; color: var(--ink-soft); }
.tagline { margin: 2px 0 10px; color: var(--ink-faint); font-size: 13px; }
.tagline .meta-sub { color: var(--ink-faint); opacity: .75; }

.tabs { display: flex; gap: 2px; }
.tabs button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  padding: 10px 16px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-desc { margin: 6px 0 0; color: var(--ink-soft); font-size: 13.5px; min-height: 1.4em; }
.typefilter { margin: 8px 0 12px; }
.typefilter summary { cursor: pointer; color: var(--ink-soft); font-size: 13.5px; }
.type-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.type-toggles .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.type-toggles .tdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ep-intro { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px; max-width: 90ch; }
.wi-disease-row { margin: 12px 0; display: flex; align-items: center; gap: 10px; }
.wi-node-link { color: var(--accent-strong, var(--accent)); text-decoration: underline; text-underline-offset: 2px; }
.wi-node-link:hover { text-decoration-thickness: 2px; }
.guide-trail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.guide-trail-row { margin: 4px 0; }
.guide-trail-k { font-weight: 600; color: var(--ink-soft); margin-right: 6px; }
.guide-trail-q { font-style: italic; }
.guide-snapshot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
.guide-snapshot-head { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 6px; }
.guide-snapshot p { margin: 6px 0; }
.guide-snapshot-bits { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; }

/* ---------- mode: settings, prompts, subway legend ---------- */

.settings-card { max-width: 640px; }
.switch-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; cursor: pointer;
}
.switch-row input[type="checkbox"] {
  width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent);
}

.mode-prompt {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  max-width: 340px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 16px 18px;
}
.mode-prompt .mode-q { margin: 0 0 10px; font-size: 15px; }
.mode-prompt .item-sub { margin: 0 0 10px; }
.btn.ghost { border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--accent-soft); color: var(--ink); }

.subway-legend {
  max-width: 72ch; margin: 10px 0 16px; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 13.5px; color: var(--ink-soft);
}
.subway-legend ul { margin: 6px 0 0; padding-left: 20px; }
.subway-legend li { margin: 4px 0; }
#subwayInClusters { margin-top: 16px; }

/* ---------- layout ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 18px 22px 40px; }
.view[hidden] { display: none; }
.section-lede { color: var(--ink-soft); margin: 4px 0 16px; max-width: 72ch; }

/* ---------- explore ---------- */
.searchbar { position: relative; max-width: 560px; margin-bottom: 10px; }
#search {
  width: 100%;
  font: inherit;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
#search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
}
.sug {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; font: inherit;
  padding: 8px 14px; cursor: pointer;
}
.sug:hover, .sug.highlight { background: var(--accent-soft); }
.sug .sug-name { font-weight: 600; }
.sug .sug-sub { color: var(--ink-faint); font-size: 12.5px; margin-left: 8px; }
.sug .sug-type {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-faint); float: right; margin-top: 3px;
}

.explore-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 14px;
}
.control-label { color: var(--ink-soft); font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg-btn {
  border: 0; background: var(--surface); font: inherit; font-size: 13.5px;
  padding: 6px 14px; cursor: pointer; color: var(--ink-soft);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13.5px; cursor: pointer; }
.view-stats { color: var(--ink-faint); font-size: 13px; margin-left: auto; }

.explore-grid { display: grid; grid-template-columns: 1fr 330px; gap: 14px; }
/* Explore takes the whole screen: the graph needs room when the data gets big. */
body.wide-explore main { max-width: none; }
body.wide-explore .explore-grid { grid-template-columns: minmax(0, 1fr) 360px; }
body.wide-explore .canvas-wrap { min-height: 480px; height: calc(100vh - 350px); }
body.wide-explore #network { height: calc(100vh - 350px); min-height: 480px; }
.canvas-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 560px;
}
#network { width: 100%; height: 560px; }
.canvas-wrap.small { min-height: 320px; }
#journeyNetwork { width: 100%; height: 320px; }
.loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
}

/* ---------- side panel ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  max-height: 620px;
  overflow-y: auto;
  font-size: 14px;
}
.panel-hint { color: var(--ink-faint); margin: 0; }
.panel h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 16px 0 6px; }
.badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: #eef1f4; color: var(--ink-soft);
  margin-bottom: 8px;
}
.badge.conf-high { background: #f4f4f5; color: #3f3f46; }
.badge.conf-medium { background: #fef3c7; color: #92400e; }
.badge.conf-low { background: #f1f1f1; color: var(--ink-soft); }
.badge.warn { background: #fee2e2; color: var(--contradict); }
.panel .desc { color: var(--ink-soft); margin: 6px 0 10px; }
.syn-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.syn-list li {
  font-size: 12.5px; background: #f3f4f6; color: var(--ink-soft);
  padding: 2px 8px; border-radius: 999px;
}
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; margin: 6px 0; }
.kv dt { color: var(--ink-faint); font-size: 12.5px; }
.kv dd { margin: 0; }
.kv a { color: var(--accent); }
.edge-row {
  display: block; width: 100%; text-align: left;
  border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; font-size: 13.5px;
  padding: 8px 2px; cursor: pointer; color: var(--ink);
}
.edge-row:hover { background: var(--accent-soft); }
.edge-row .rel { font-weight: 600; }
.edge-row .via { color: var(--ink-faint); font-size: 12.5px; }
.rel-group { margin-bottom: 4px; }
.rel-group > .rel-head { font-weight: 600; font-size: 13px; margin: 10px 0 2px; color: var(--ink-soft); }

/* ---------- clusters ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.card h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.card .count { color: var(--ink-faint); font-size: 13px; margin-bottom: 8px; }
.card p { margin: 6px 0; font-size: 13.5px; color: var(--ink-soft); }
.card .kv-line { font-size: 13.5px; margin: 6px 0; }
.card .kv-line strong { font-weight: 600; }
.btn {
  font: inherit; font-size: 13.5px;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 7px 14px; cursor: pointer;
}
.btn:hover { background: var(--accent-soft); }
.btn:disabled { color: var(--ink-faint); border-color: var(--line); cursor: default; background: none; }
.card .btn { margin-top: 10px; }

/* ---------- patient action ---------- */
.action-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#diseaseSelect { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); max-width: 480px; }
.therapy-banner {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px; margin-bottom: 18px;
  font-size: 14px;
}
.therapy-banner strong { display: block; margin-bottom: 4px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.action-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.action-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.action-item { border-top: 1px solid var(--line); padding: 10px 0; font-size: 13.5px; }
.action-item:first-of-type { border-top: 0; padding-top: 2px; }
.action-item .item-title { font-weight: 600; }
.action-item .item-sub { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.action-item a { color: var(--accent); }
.status {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.status.recruiting { background: #f4f4f5; color: #3f3f46; }
.status.notrecruiting { background: #f1f1f1; color: var(--ink-soft); }
.gap-list { margin: 6px 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-soft); }
.gap-list li { margin-bottom: 6px; }

/* ---------- journey ---------- */
.stepper-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.step-count { font-weight: 600; font-size: 14px; }
.step-dots { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dot.done { background: #eef1f4; color: var(--ink-soft); }
.dot.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.journey-grid { display: grid; grid-template-columns: 1fr 380px; gap: 14px; }
.journey-panel .why { font-size: 15px; margin: 8px 0; }
.edge-note-box {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13.5px; color: var(--ink-soft);
}

footer {
  max-width: 1240px; margin: 0 auto; padding: 18px 22px 30px;
  color: var(--ink-faint); font-size: 12.5px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .explore-grid, .journey-grid { grid-template-columns: 1fr; }
  .panel { max-height: none; }
}

/* verbatim source quote in edge panel */
.quote {
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  color: var(--ink-soft);
}

/* plain-language confidence + limitation callouts (fix track, 2026-10-03) */
.conf-plain { font-size: 13px; color: var(--ink-soft); }
.limit-callout {
  margin: 10px 0; padding: 10px 12px;
  border-left: 3px solid #d97777; background: #fef2f2;
  font-size: 13px; color: #7f1d1d; border-radius: 0 6px 6px 0;
}
.limit-callout strong { color: #991b1b; }

/* 10x impact tab */
/* ---------------- Build 4: state-based journey navigator ---------------- */
.journey-disease-row { margin-bottom: 14px; }
.journey-example { padding: 12px 16px; margin-bottom: 18px; }
.journey-example summary { cursor: pointer; font-size: 15px; }
.journey-example summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.maria-intro { margin: 12px 0; }
.maria-state { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; margin: 12px 0; }
.maria-state h3 { margin: 0 0 4px; font-size: 14px; }
.maria-state p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.journey-q { font-size: 17px; margin: 6px 0 12px; }
.journey-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.jstate { text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.jstate .js-label { display: block; font-weight: 650; font-size: 15px; margin-bottom: 4px; }
.jstate .js-sub { color: var(--ink-soft); font-size: 13px; }
.jstate:hover { border-color: var(--accent); }
.jstate[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.jstate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.journey-steps { margin-bottom: 16px; }
.jstep h2 { font-size: 15px; margin-top: 8px; }
.jstep p { color: var(--ink-soft); }
.j-pause { border-left: 4px solid #a1a1aa; }
.j-deadend { border-left: 4px solid var(--contradict); }
.j-badge-pause { background: var(--accent-soft); color: var(--accent); }
.jlist { margin: 8px 0; padding-left: 20px; color: var(--ink-soft); font-size: 13.5px; }
.jlist li { margin: 4px 0; }
.jlist a { color: var(--accent); }
.impact-wrap { max-width: 900px; }
.gantt { margin: 18px 0; }
.gantt-row { display: flex; align-items: center; margin: 8px 0; gap: 10px; }
.gantt-label { width: 220px; font-size: 13.5px; text-align: right; color: var(--ink-soft); }
.gantt-track { flex: 1; height: 26px; background: #f1f1f1; border-radius: 6px; position: relative; }
.gantt-bar { position: absolute; top: 0; height: 26px; border-radius: 6px; }
.gantt-bar.baseline { background: #94a3b8; }
.gantt-bar.proposed { background: var(--accent); }
.gantt-years { width: 90px; font-size: 13px; font-weight: 600; }
.assume-list { font-size: 13.5px; color: var(--ink-soft); }
.assume-list li { margin: 6px 0; }
.fayuvi-alert {
  margin: 12px 0; padding: 12px 14px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid #d4d4d8; font-size: 14px;
}
.fayuvi-alert strong { color: #3f3f46; }
.excluded-list li { margin: 5px 0; }

/* ============ UI-track additions (views.js) ============ */

/* ---------- header controls ---------- */
.topbar-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.btn.small { font-size: 12.5px; padding: 5px 10px; }
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tabs button { white-space: nowrap; }

/* ---------- persona landing ---------- */
.start-q { font-size: 22px; margin: 6px 0 16px; }
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 20px; }
.persona-card h2 { font-size: 16px; }
.guided-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.guided-box h3 { margin-top: 0; }
.devon-card { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.devon-card h3 { margin: 0 0 6px; font-size: 19px; }
.medical-note { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.fact-list { margin: 8px 0; padding-left: 20px; font-size: 14px; }
.fact-list li { margin: 4px 0; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- contradiction explorer ---------- */
.contra-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 14px 0 6px; }
.contra-card .quote { margin: 6px 0; }

/* ---------- recent feed ---------- */
.year-head { font-size: 17px; margin: 20px 0 8px; }
.year-head .count { color: var(--ink-faint); font-weight: 400; font-size: 13px; }
.feed { display: grid; gap: 10px; margin-bottom: 8px; }
.feed-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.feed-title { font-weight: 600; font-size: 14px; }
.small-quote { font-size: 13px; margin: 8px 0 0; }

/* ---------- explainer cards ---------- */
.explainer { background: var(--accent-soft); border: 1px solid #d4d4d8; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.explainer h3 { margin: 0 0 6px !important; }
.explainer-one { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.explainer p { font-size: 13.5px; margin: 6px 0; color: var(--ink-soft); }
.explainer-caveat { border-left: 3px solid #d97777; padding-left: 10px; }

/* ---------- confidence thermometer ---------- */
.thermo { margin-bottom: 12px; }
.thermo-track { height: 10px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.thermo-fill { height: 100%; border-radius: 999px; }
.thermo-high { background: #16a34a; }
.thermo-med { background: #d97706; }
.thermo-low { background: #9ca3af; }
.thermo-cracked { background: repeating-linear-gradient(45deg, #b91c1c, #b91c1c 6px, #fca5a5 6px, #fca5a5 12px); }
.thermo-label { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- verification details ---------- */
.verify { margin: 0 0 12px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: var(--surface); }
.verify summary { cursor: pointer; font-weight: 600; color: var(--accent); }

/* ---------- family stories ---------- */
.story-box { margin-top: 14px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg); }
.story-heart { color: #b91c1c; font-size: 18px; }

/* ---------- outreach composer ---------- */
.outreach { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: var(--surface); }
.outreach summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.outreach-text { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 8px 0; white-space: pre-wrap; }

/* ---------- subway map ---------- */
.subway-grid { display: grid; grid-template-columns: 1fr 330px; gap: 14px; }
.subway-scroll { overflow-x: auto; min-height: 0; }
#subwayMap { padding: 10px; }
.subway-svg { display: block; height: auto; max-width: none; }
.station { cursor: pointer; }
.station:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.station-label { font-size: 12px; fill: var(--ink-soft); font-family: var(--font); }
.line-label { font-size: 13px; font-weight: 600; font-family: var(--font); }
.subway-line { cursor: default; }

/* ---------- comparator ---------- */
.compare-picker { margin-bottom: 14px; }
.compare-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.table-scroll { overflow-x: auto; }
.compare-table { border-collapse: collapse; width: 100%; font-size: 13.5px; background: var(--surface); }
.compare-table th, .compare-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--accent-soft); }
.compare-table tbody th { background: var(--bg); white-space: nowrap; }

/* ---------- eligibility helper ---------- */
.elig-btn { margin-top: 8px; }
.elig-box { margin-top: 10px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.elig-q { display: block; margin: 8px 0; font-size: 13.5px; }
.text-input { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- journey builder ---------- */
.journey-builder { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.journey-builder h3 { margin-top: 0; }
.journey-built h3 { font-size: 14px; margin: 14px 0 6px; color: var(--ink); }
.section-div { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.subhead { font-size: 18px; margin: 0 0 4px; }

/* ---------- glossary ---------- */
.gloss { border-bottom: 2px dotted var(--accent); cursor: help; }
.gloss-tip {
  position: absolute; z-index: 100; max-width: 320px;
  background: var(--ink); color: #fff; border-radius: 8px; padding: 12px 14px;
  font-size: 13.5px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.gloss-tip strong { text-transform: capitalize; }
.gloss-tip p { margin: 6px 0 10px; }
.gloss-tip .btn { border-color: #fff; color: #fff; background: transparent; }

/* ---------- tier-1 tap-for-definition ---------- */
.defterm {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  border-bottom: 2px dotted var(--accent); cursor: pointer;
  border-radius: 2px;
}
.defterm:hover { background: rgba(26, 86, 219, 0.07); }
.defterm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.defterm[aria-expanded="true"] { border-bottom-style: solid; }
.defexp { display: block; }
.defexp[hidden] { display: none; }
.defexp-card {
  display: block; margin: 8px 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px;
  font-size: 13.5px; line-height: 1.55; cursor: default;
}
.defexp-layer { display: block; margin-bottom: 8px; }
.defexp-layer:last-of-type { margin-bottom: 10px; }
.defexp-tag {
  display: block; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); margin-bottom: 2px;
}
@media print {
  .defexp { display: none !important; }
  .defterm, .gloss { border-bottom: none; cursor: text; }
}

/* ---------- accessibility panel ---------- */
.a11y-panel { background: var(--surface); border-top: 1px solid var(--line); padding: 12px 22px; display: flex; flex-direction: column; gap: 8px; }
.a11y-panel[hidden] { display: none; }
.a11y-panel h3 { margin: 0; font-size: 14px; }
body.a11y-dys { --font: Verdana, Tahoma, "Segoe UI", sans-serif; letter-spacing: 0.02em; word-spacing: 0.08em; line-height: 1.7; }
body.a11y-motion * { animation: none !important; transition: none !important; }
body.a11y-focus footer { display: none; }
body.a11y-focus main { max-width: 760px; }

/* ---------- night mode ---------- */
body.dark {
  --bg: #16181d; --surface: #1e2128; --ink: #e8eaf0; --ink-soft: #b9bdc9;
  --ink-faint: #8a8f9e; --line: #2e323c; --accent: #d4d4d8; --accent-soft: #27272a;
}
body.dark .sug .sug-name { color: var(--ink); }
body.dark .thermo-track { background: #2e323c; }
body.dark .quote { color: var(--ink-soft); }
body.dark .limit-callout { background: #2a1d1d; }
body.dark .explainer { background: #27272a; border-color: #3f3f46; }
body.dark .explainer-one { color: var(--ink); }
/* Dark-mode contrast fixes: cards and callouts that used hardcoded light
 * backgrounds/text became unreadable (pale on pale). */
body.dark .guide-ground { background: #27272a; border-left-color: var(--accent); }
body.dark .guide-ground p, body.dark .guide-ground strong { color: var(--ink); }
body.dark .guide-check, body.dark .guide-cand, body.dark .guide-card,
body.dark .guide-org, body.dark .guide-compare-shared, body.dark .guide-compare-card,
body.dark .chip { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.dark .guide-compare { background: #1a1e26; border-color: var(--line); }
body.dark .guide-cand strong, body.dark .guide-card strong { color: var(--ink); }
body.dark .guide-sub, body.dark .guide-cand-ph, body.dark .guide-compare-diff { color: var(--ink-soft); }
body.dark .guide-fine, body.dark .guide-alt, body.dark .guide-examples,
body.dark .guide-card span:last-child { color: var(--ink-faint); }
/* Full dark-mode audit fixes: every remaining light-background component. */
body.dark .fayuvi-alert { background: #27272a; border-color: #3f3f46; }
body.dark .fayuvi-alert strong { color: var(--accent); }
body.dark .fayuvi-alert, body.dark .excluded-list li { color: var(--ink); }
body.dark .syn-list li { background: #2e323c; color: var(--ink); }
body.dark .ep-caveat-banner { background: #3a2f16; border-color: #6b5a2e; color: var(--ink); }
body.dark .ep-caveat-banner strong { color: #f2c94c; }
body.dark .ep-deriv { color: var(--ink-faint); }
body.dark .ep-chip { background: #27272a; border-color: #3f3f46; color: var(--ink); }
body.dark table.ep-matrix th, body.dark table.ep-matrix td { border-color: #2e323c; background: var(--surface); color: var(--ink); }
body.dark table.ep-matrix th:first-child, body.dark table.ep-matrix td:first-child { background: #1a1e26; }
body.dark table.ep-matrix td.on { background: #123a33; color: #7fe0c3; }
body.dark table.ep-matrix thead th { background: #1a1e26; color: var(--ink-soft); }
body.dark .wi-item { background: var(--surface); border-color: var(--line); }
body.dark .wi-item strong { color: var(--ink); }
body.dark .wi-item { color: var(--ink-soft); }
body.dark .limit-callout { background: #2a1d1d; color: #e8a0a0; border-left-color: #d97777; }
body.dark .limit-callout strong { color: #f0b0b0; }
body.dark .wi-note { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
body.dark .guide-action-card { background: #3a2f16; border-color: #b45309; }
body.dark .guide-action-card .guide-sub, body.dark .guide-action-card .guide-fine,
body.dark .guide-action-card .guide-list { color: var(--ink); }
body.dark .guide-otherpaths { background: var(--surface); border-color: var(--line); }
body.dark .guide-otherpaths summary { color: var(--ink); }
body.dark .guide-op-sub { color: var(--ink-faint); }
/* Catch-all: every remaining hardcoded light background / dark text in the sheet. */
body.dark .badge { background: #2e323c; color: var(--ink); }
body.dark .badge.conf-high { background: #27272a; color: #d4d4d8; }
body.dark .badge.conf-medium { background: #3a2f16; color: #f2c94c; }
body.dark .badge.conf-low { background: #2e323c; color: var(--ink-soft); }
body.dark .badge.warn { background: #3a1d1d; color: #f0a0a0; }
body.dark .status.recruiting { background: #27272a; color: #d4d4d8; }
body.dark .status.notrecruiting { background: #2e323c; color: var(--ink-soft); }
body.dark .dot.done { background: #2e323c; color: var(--ink); }
body.dark .j-badge-pause { background: #27272a; color: var(--accent); }
body.dark .gantt-track { background: #2e323c; }
body.dark .gantt-bar.baseline { background: #5b6472; }
body.dark .compare-table th, body.dark .compare-table td { border-color: #2e323c; }
body.dark .compare-table thead th { background: #1a1e26; color: var(--ink); }
body.dark .compare-table td { color: var(--ink-soft); }
body.dark .compare-table td.wi-unknown { background: #2a2415; color: var(--ink-faint); }
body.dark .guide-nextstep { background: #3a2f16; border-color: #6b5a2e; color: var(--ink); }
body.dark .guide-org p { color: var(--ink-soft); }
body.dark .verified { background: #27272a; color: #d4d4d8; }
body.dark .guide-safety { background: #1a1e26; color: var(--ink-soft); }
body.dark .guide-trial { background: var(--surface); border-color: var(--line); }
body.dark .guide-trial strong { color: var(--ink); }
body.dark .guide-trial { color: var(--ink-soft); }
body.dark .guide-trial-meta { color: var(--accent); }
body.dark .guide-honesty { background: #2e2118; border-color: #6b4a2e; color: var(--ink); }
body.dark .guide-conn { background: var(--surface); border-color: var(--line); }
body.dark .guide-conn strong { color: var(--ink); }
body.dark .guide-conn { color: var(--ink-soft); }
body.dark .ep-caveat { background: #3a2f16; border-left-color: #e0a82e; color: var(--ink); }
body.dark .guide-role { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.dark .guide-role span, body.dark .guide-role small { color: var(--ink-soft); }
body.dark .guide-role[aria-checked="true"] { border-color: var(--accent); background: #27272a; }
body.dark .guide-role strong { color: var(--ink); }
body.dark .ref { color: var(--ink-faint); }
body.dark .guide-compare-why { color: var(--accent); }
body.dark .guide-cand-n { color: var(--accent); }

/* ---------- reading level: plain / standard / detailed ---------- */
/* Technical metadata (study types, publication years, dates) is marked
 * tech-detail and stays hidden unless the reader picks Detailed. */
body:not(.reading-detailed) .tech-detail { display: none; }
/* Plain language: the plain wording carries the meaning, the jargon badge hides. */
body.reading-plain .conf-badge { display: none; }
body.reading-plain .conf-plain { font-weight: 600; }

/* ---------- mobile pass (2am phone) ---------- */
@media (max-width: 700px) {
  .topbar { padding: 10px 14px 0; }
  .brand h1 { font-size: 18px; }
  .header-controls { padding-top: 0; }
  .reading-seg .seg-btn { padding: 6px 8px; font-size: 12px; }
  .tabs button { padding: 10px 12px; font-size: 13px; }
  main { padding: 12px 14px 30px; }
  #search { font-size: 16px; padding: 12px 14px; }
  .btn, .sug, .dot, .seg-btn { min-height: 44px; }
  .seg-btn { display: inline-flex; align-items: center; }
  .explore-grid, .journey-grid, .subway-grid { grid-template-columns: 1fr; }
  #network { height: 420px; }
  .canvas-wrap { min-height: 420px; }
  .persona-grid { grid-template-columns: 1fr; }
  .panel { max-height: none; }
  .gantt-label { width: 120px; font-size: 12px; }
  .station-label { font-size: 11px; }
  .kv { grid-template-columns: 80px 1fr; }
  footer { padding: 14px; }
}

/* ---------- print ---------- */
@media print {
  .topbar nav, .header-controls, .canvas-wrap, .stepper-bar, #stepDots,
  .a11y-panel, footer, .btn, .elig-box, .outreach { display: none !important; }
  body { font-size: 12pt; background: #fff; }
  main { max-width: 100%; }
  .panel, .card { break-inside: avoid; }
  /* Dossier print: one clean document, nothing interactive, no dark blocks. */
  .guide-back, .guide-bridge, .guide-btnrow { display: none !important; }
  #guideExportDoc { color: #000; background: #fff !important; max-width: 100%; }
  #guideExportDoc .guide-night, #guideExportDoc .guide-nextstep { background: #fff !important; color: #000; border: 1px solid #999; }
  #guideExportDoc a { color: #000; text-decoration: none; }
  #guideExportDoc h2.guide-h { break-after: avoid; }
  #guideExportDoc h3.guide-h3 { break-after: avoid; margin-top: 1.2em; }
  #guideExportDoc ul.guide-list li { break-inside: avoid; }
}

/* ---------------- What If scenario planner ---------------- */
.wi-scenario { margin-top: 1.2rem; }
.wi-title { font-size: 1.25rem; margin: 0 0 0.4rem; }
.wi-scenario h4 { margin: 1.4rem 0 0.5rem; font-size: 1.02rem; }
.wi-item { border: 1px solid #e2e5ea; border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.4rem 0; background: #fbfcfe; }
.wi-sub { color: #5b6472; font-size: 0.9rem; margin-top: 0.25rem; }
.wi-person { border-left: 3px solid #52525b; padding: 0.5rem 0.8rem; margin: 0.5rem 0; background: #fafafa; }
.wi-contact-note { color: #8a6d1b; font-size: 0.85rem; margin-top: 0.3rem; font-style: italic; }
.wi-note { color: #445; font-size: 0.92rem; background: #f4f6fa; border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0.6rem 0; }
.wi-unknown { color: #8a6d1b; font-style: italic; }
.wi-active-note { color: #3f3f46; font-weight: 600; margin-top: 0.8rem; }
.wi-export { margin-top: 1.6rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.compare-table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.93rem; }
.compare-table th, .compare-table td { border: 1px solid #e2e5ea; padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.compare-table thead th { background: #f1f4f9; }
.compare-table td.wi-unknown { background: #fffdf4; }
.ref { color: #5b6472; font-size: 0.85rem; }

/* ============ GUIDE (zero-knowledge front door) ============ */
.guide-body { max-width: 760px; margin: 0 auto; padding: 8px 16px 48px; }
.guide-hero { text-align: center; padding: 48px 12px 32px; }
.guide-h { font-family: var(--font-display); font-size: 2.2rem; line-height: 1.2; margin: 0 0 12px; font-weight: 300; letter-spacing: -0.02em; }
/* Programmatic focus target for screen readers on step change — never show a focus box. */
.guide-h:focus { outline: none; }
.guide-h .hl { color: var(--accent); }
.guide-sub { color: #4b5563; font-size: 1.02rem; line-height: 1.55; }
.guide-night { background: #1e293b; color: #e2e8f0; border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-size: .98rem; line-height: 1.5; }
.guide-searchrow { display: flex; gap: 10px; margin: 22px 0 14px; }
.guide-searchrow input { flex: 1; font-size: 1.05rem; padding: 14px 16px; border: 2px solid #c4c9d1; border-radius: 12px; }
.guide-searchrow input:focus { outline: none; border-color: var(--accent); }
.guide-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-bottom: 18px; color: #6b7280; font-size: .92rem; }
.chip { border: 1px solid #c4c9d1; background: #fff; border-radius: 999px; padding: 8px 14px; font-size: .9rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.guide-fine { color: #6b7280; font-size: .88rem; line-height: 1.5; }
.guide-alt { margin-top: 14px; font-size: .92rem; color: #6b7280; }
.guide-pane { padding: 12px 4px 32px; }
.guide-back { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .95rem; padding: 6px 0; }
.guide-ground { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 18px 0; }
.guide-ground p { margin: 6px 0; line-height: 1.55; }
.guide-h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; margin: 24px 0 10px; }
.guide-checks { display: grid; gap: 10px; margin: 12px 0 18px; }
.guide-phgroup { font-size: .95rem; margin: 14px 0 2px; color: var(--ink); }
.guide-phgroup:first-child { margin-top: 4px; }
.guide-phcount { color: var(--ink-faint); font-weight: 400; font-size: .85rem; }
.guide-check { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 1rem; }
.guide-check input { width: 20px; height: 20px; margin-top: 2px; }
.guide-btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.guide-cands { display: grid; gap: 12px; margin: 16px 0; }
.guide-cand { text-align: left; background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; cursor: pointer; display: grid; gap: 6px; }
.guide-cand:hover { border-color: var(--accent); }
.guide-cand strong { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }
.guide-cand-ph { color: #4b5563; font-size: .93rem; }
.guide-cand-n { color: var(--accent); font-size: .9rem; }
/* Ambiguous-screen symptom filter: parents narrow the candidate list live. */
.guide-amfilter { background: var(--accent-soft); border: 1px solid #d4d4d8; border-radius: 14px; padding: 16px 18px; margin: 18px 0 4px; }
.guide-amfilter .guide-h3 { margin-top: 0; }
.guide-cand-m { font-size: .85rem; font-weight: 600; color: #6b7280; }
.guide-cand-m.hit { color: var(--accent); }
body.dark .guide-amfilter { background: #16233f; border-color: #2c4a7c; }
body.dark .guide-cand-m { color: #9ca3af; }
body.dark .guide-cand-m.hit { color: var(--accent); }
/* Narrow-it-down: viewport-fixed symptom rail on the right (25% of the
 * screen), disease list on the left. The rail is fixed to the screen — not
 * just sticky in the list — so it stays visible while the parent scrolls
 * through every disease. Its top edge is pinned below the site header via
 * JS (syncRailTop), since the header height varies with viewport width. */
.guide-amfilter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.guide-amfilter-head .guide-h3 { margin: 0; }
.guide-amfilter-head .guide-link { white-space: nowrap; flex: none; }
/* Non-matching cards collapse into a one-click expander once picks exist —
 * still listed so nothing is missed, but out of the way. */
.guide-cands .guide-rest { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 16px; }
.guide-rest summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.guide-cands-sub { margin: 12px 0 4px; }
.guide-amb-layout { display: block; }
.guide-amb-main { max-width: 920px; padding-right: 16px; }
/* Comparison prose stays narrow for readability even when cards go wide. */
body.amb-rail .guide-compare { max-width: 680px; }
@media (min-width: 641px) {
  /* Two-column card grid: easier scanning for stressed parents, half the
   * scroll depth. Single column on phones. */
  body.amb-rail .guide-cands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1025px) {
  body.amb-rail .guide-body { margin-left: 0; margin-right: 0; max-width: none; }
  /* Keep every row of the step clear of the fixed rail, not just the list. */
  body.amb-rail .guide-pane { padding-right: calc(25% + 16px); }
  .guide-amb-side {
    position: fixed; top: 0; right: 0; bottom: 0; width: 25%;
    z-index: 30; overflow-y: auto;
    background: var(--surface); border-left: 1px solid var(--line);
    padding: 20px 18px 28px;
  }
  .guide-amb-side .guide-amfilter { margin: 0; }
}
/* Below 1025px (small laptops, 200% zoom, tablets, phones) the rail is a
 * normal static block stacked above the disease list — a clipped fixed
 * checklist is worse than a scrolled one. No media query needed: static is
 * the default. */
@media print {
  .guide-amb-side { position: static; width: auto; border-left: 0; overflow: visible; }
  body.amb-rail .guide-body { margin: 0 auto; max-width: 760px; }
}
/* Real side-by-side comparison table (top 3 candidates). */
.guide-compare-table-wrap { overflow-x: auto; margin: 18px 0 6px; }
.guide-compare-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .93rem; }
.guide-compare-table caption { text-align: left; font-family: var(--font-display); font-weight: 600; padding: 0 0 10px; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.guide-compare-table th, .guide-compare-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.guide-compare-table thead th { border-bottom: 2px solid var(--line); text-align: center; vertical-align: bottom; }
.guide-compare-table thead th .guide-link { font-weight: 700; font-size: 1rem; }
.guide-compare-table tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.guide-compare-table td { text-align: center; }
.guide-compare-table td.yes { color: var(--accent); font-weight: 700; }
.guide-compare-table td.no { color: #9ca3af; }
.guide-compare-rowhead td { background: rgba(26,86,219,.05); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); text-align: left; }
body.dark .guide-compare-table td.yes { color: var(--accent); }
body.dark .guide-compare-rowhead td { background: rgba(157,185,247,.08); }
/* Text-button link inside guide fine print (e.g. "skip this check"). */
.guide-linklike { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
body.dark .guide-linklike { color: var(--accent); }
/* Closest-match banner + highlight on the ambiguous screen. */
.guide-closest { background: var(--accent-soft); border: 1px solid #d4d4d8; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: 1.02rem; }
.guide-cand.top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.dark .guide-closest { background: var(--accent-soft); border-color: #2a5a55; }
body.dark .guide-cand.top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Symptom comparison (Build B): calm, roomy, one idea per card. */
.guide-compare { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; margin: 18px 0; }
.guide-compare-shared { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; font-size: .95rem; line-height: 1.55; }
.guide-compare-cards { display: grid; gap: 12px; }
.guide-compare-card { background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; display: grid; gap: 8px; }
.guide-compare-card strong { font-size: 1.08rem; }
.guide-compare-diff { color: #4b5563; font-size: .93rem; line-height: 1.5; }
.guide-compare-why { color: #1e3a5f; font-size: .93rem; line-height: 1.5; }
.guide-compare-card .btn { justify-self: start; padding: 12px 20px; font-size: 1rem; }
.guide-nextstep { background: #fefce8; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 18px; margin: 16px 0; line-height: 1.55; }
.guide-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 20px; }
.guide-card { display: grid; gap: 6px; text-align: left; background: #fff; border: 2px solid #e5e7eb; border-radius: 14px; padding: 18px; cursor: pointer; }
.guide-card:hover { border-color: var(--accent); }
.gc-emoji { font-size: 1.6rem; }
.guide-card strong { font-size: 1.05rem; }
.guide-card span:last-child { color: #6b7280; font-size: .9rem; }
.guide-org { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin: 12px 0; }
.guide-org strong { font-size: 1.08rem; display: block; margin-bottom: 4px; }
.guide-org p { color: #4b5563; margin: 8px 0 12px; line-height: 1.5; }
.verified { display: inline-block; background: #f4f4f5; color: #3f3f46; font-size: .82rem; border-radius: 999px; padding: 3px 10px; margin-left: 8px; }
.guide-safety { background: #f9fafb; border-radius: 10px; padding: 12px 16px; margin: 18px 0; font-size: .9rem; color: #4b5563; line-height: 1.55; }
.guide-list { line-height: 1.7; padding-left: 20px; }
.guide-list li { margin-bottom: 8px; }
.guide-trial { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin: 12px 0; }
.guide-trial strong { display: block; margin-bottom: 4px; }
.guide-trial-meta { color: var(--accent); font-size: .88rem; display: block; margin-bottom: 6px; }
.guide-honesty { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 14px 18px; margin: 20px 0; line-height: 1.6; }
.guide-conn { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin: 12px 0; }
.guide-conn strong { font-size: 1.05rem; }
.guide-conn p { margin: 8px 0; line-height: 1.55; }
.guide-bridge { border-top: 1px solid #e5e7eb; margin-top: 28px; padding-top: 18px; }
.guide-bridge p { color: #6b7280; font-size: .93rem; }
.guide-bridge-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
  .guide-cards { grid-template-columns: 1fr; }
  .guide-searchrow { flex-direction: column; }
  .guide-hero { padding: 28px 8px 20px; }
  .guide-h { font-size: 1.45rem; }
}

/* ---- Endpoints lens ---- */
.ep-caveat-banner { background: #fff7e6; border: 1px solid #f0d48a; border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 1rem; font-size: 0.95rem; }
.ep-deriv { font-size: 0.82rem; color: #5b6472; font-style: italic; }
.ep-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ep-chip { background: var(--accent-soft); border: 1px solid #d4d4d8; border-radius: 20px; padding: 2px 10px; font-size: 0.82rem; cursor: default; }
.ep-caveat { background: #fff7e6; border-left: 3px solid #e0a82e; padding: 0.4rem 0.7rem; border-radius: 0 6px 6px 0; }
.ep-card h2 { font-size: 15px; }
.ep-pick { font-size: 1rem; padding: 0.5rem; border-radius: 6px; border: 1px solid #c9cfd8; max-width: 100%; }
.ep-matrix-wrap { overflow-x: auto; margin: 0.6rem 0 1.2rem; }
table.ep-matrix { border-collapse: collapse; font-size: 0.8rem; }
table.ep-matrix th, table.ep-matrix td { border: 1px solid #e2e5ea; padding: 4px 7px; text-align: center; white-space: nowrap; }
table.ep-matrix th:first-child, table.ep-matrix td:first-child { text-align: left; position: sticky; left: 0; background: #fff; max-width: 260px; white-space: normal; }
table.ep-matrix td.on { background: #f4f4f5; font-weight: 700; color: #3f3f46; }
table.ep-matrix thead th { background: #f4f6fa; font-size: 0.72rem; }

/* Guide redesign (Build 2, 2026-10-03): guided conversation styles. */
.guide-step { color: var(--accent); font-weight: 700; font-size: .92rem; letter-spacing: .02em; margin: 18px 0 8px; }
.guide-hero .guide-step { text-align: center; }
.guide-roles { display: grid; gap: 10px; margin: 16px auto 18px; max-width: 520px; text-align: left; }
.guide-role { text-align: left; background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; cursor: pointer; display: grid; gap: 4px; font-size: 1rem; }
.guide-role:hover { border-color: var(--accent); }
.guide-role[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.guide-role strong { font-size: 1.05rem; }
.guide-role span { color: #6b7280; font-size: .9rem; }
.guide-roleline { color: #6b7280; font-size: .9rem; margin: 4px 0 14px; }
.guide-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; }
.guide-hint { color: #b45309; font-size: .92rem; margin: 8px 0 0; }
.guide-action-card { background: #fefce8; border: 2px solid #f59e0b; border-radius: 14px; padding: 18px 20px; margin: 18px 0; line-height: 1.6; }
.guide-action-card .guide-sub { margin: 8px 0; }
.guide-action-card .guide-btnrow { margin: 12px 0 4px; }
.guide-otherpaths { margin: 22px 0; border: 1px solid #e5e7eb; border-radius: 12px; padding: 4px 16px; background: #fff; }
.guide-otherpaths summary { cursor: pointer; font-weight: 700; padding: 12px 0; font-size: 1.03rem; }
.guide-otherpaths summary:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.guide-otherpaths-btns { display: grid; gap: 10px; margin: 4px 0 16px; }
.guide-op-sub { color: #6b7280; font-size: .88rem; }
.guide-otherpaths-btns .btn { justify-self: start; }
.guide-op-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ============ Build 3: "Your Disease" page (urgency-ordered) ============ */
.status-banner {
  background: var(--accent-soft);
  border: 1px solid #d4d4d8;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 1.02rem;
  line-height: 1.5;
}
.status-banner strong { color: var(--accent); }
.action-sec { margin-bottom: 18px; }
.action-sec h2 { font-size: 1.15rem; margin: 0 0 8px; }
.action-sec p { margin: 6px 0; line-height: 1.55; max-width: 80ch; }
.permission {
  background: #fffbeb;
  border-left: 4px solid #d97706;
  border-radius: var(--radius);
  padding: 12px 16px;
}
.next-list { margin: 8px 0; padding-left: 20px; color: var(--ink-soft); }
.next-list li { margin-bottom: 6px; }
.recent-list { margin: 8px 0; padding-left: 18px; }
.recent-list li { margin-bottom: 8px; max-width: 80ch; }
.action-details {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--surface);
}
.action-details summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.action-head .btn.primary { margin-left: auto; white-space: nowrap; }

/* Full-width comparison and complete family session report. */
body.amb-rail .guide-compare, .guide-amb-main { max-width: none; width: 100%; }
.guide-compare-why { color: var(--ink-soft); }
.guide-compare-rowhead td { background: var(--accent-soft); }
#guidePrintReport { display: none; }
@media print {
  @page { margin: 14mm; }
  body.printing-guide > :not(#guidePrintReport) { display: none !important; }
  body.printing-guide #guidePrintReport { display: block !important; }
  #guidePrintReport, #guideSessionReport, #guidePrintReport .guide-pane,
  #guidePrintReport .guide-compare, #guidePrintReport .guide-amb-main,
  body.amb-rail .guide-body, body.amb-rail .guide-pane {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    padding: 0 !important; overflow: visible !important;
  }
  #guidePrintReport * { color: #18181b !important; background: transparent !important; box-shadow: none !important; }
  #guidePrintReport button, #guidePrintReport .guide-back, #guidePrintReport .guide-bridge,
  #guidePrintReport .guide-btnrow, #guidePrintReport input, #guidePrintReport select { display: none !important; }
  #guidePrintReport .guide-compare { margin: 12pt 0 !important; }
  #guidePrintReport .guide-compare-table-wrap { overflow: visible; }
  #guidePrintReport table { width: 100%; min-width: 0; table-layout: fixed; font-size: 9pt; }
  #guidePrintReport th, #guidePrintReport td { overflow-wrap: anywhere; padding: 5pt; }
  #guidePrintReport thead { display: table-header-group; }
  #guidePrintReport tr { break-inside: avoid; }
  #guidePrintReport article, #guidePrintReport .guide-pane, #guidePrintReport .guide-compare { break-inside: auto; }
  #guidePrintReport h1, #guidePrintReport h2, #guidePrintReport h3 { break-after: avoid; }
  #guidePrintReport a { overflow-wrap: anywhere; }
  #guidePrintReport a[href]::after { content: ' (' attr(href) ')'; font-size: 8pt; }
}

/* Reader options apply to content on every tab. */
body.a11y-dys main * { line-height: 1.8 !important; letter-spacing: .035em !important; word-spacing: .12em !important; text-align: left !important; font-style: normal !important; }
body.a11y-large main { zoom: 1.2; }
body.a11y-focus .section-lede, body.a11y-focus .brand p { display: none; }
body.a11y-focus main { max-width: none; }
.reading-caption { flex-basis: 100%; margin: 4px 0; font-size: 12px; color: var(--ink-soft); }
.reading-toast { position: fixed; bottom: 20px; right: 20px; z-index: 120; max-width: 420px; padding: 12px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.inline-definition { color: var(--ink-soft); font-size: .92em; }
body.reading-plain .badge, body.reading-plain .ep-deriv, body.reading-plain .ep-tier, body.reading-plain .conf-badge { display: none; }
body.reading-plain .gloss { border: none; cursor: text; }
/* Symptom rail: fixed right dock on desktop, toggleable drawer on mobile. */
.guide-rail-drawer { border: 0; padding: 0; margin: 0; }
.guide-rail-drawer > summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 12px 16px; list-style: none; }
.guide-rail-drawer > summary::-webkit-details-marker { display: none; }
.guide-rail-drawer > summary .guide-fine { font-weight: 400; }
@media (min-width: 1025px) {
  .guide-rail-drawer > summary { display: none; }
}
.guide-body:has(.guide-compare) { max-width: none; width: 100%; }
@media print { .reading-toast, .reading-caption { display: none !important; } }

body:not(.reading-plain) .plain-definition { display: none; }
body.reading-plain .has-plain-definition { display: none; }
body.reading-plain .defexp { display: none; }
@media print { #guidePrintReport .tech-detail { display: block !important; } }

/* ---------- print: endpoints sharing matrix ---------- */
@media print {
  body.printing-matrix header, body.printing-matrix nav.tabs, body.printing-matrix footer { display: none !important; }
  body.printing-matrix main .view { display: none !important; }
  body.printing-matrix main #view-endpoints { display: block !important; }
  body.printing-matrix #view-endpoints > :not(h2):not(.ep-howto):not(.ep-matrix-wrap) { display: none !important; }
  body.printing-matrix #epPrintMatrix { display: none !important; }
  body.printing-matrix .ep-matrix-wrap { overflow: visible !important; }
  body.printing-matrix .ep-matrix { width: 100%; table-layout: fixed; font-size: 9pt; }
  body.printing-matrix .ep-matrix th, body.printing-matrix .ep-matrix td { overflow-wrap: anywhere; padding: 4pt; }
  body.printing-matrix thead { display: table-header-group; }
  body.printing-matrix tr { break-inside: avoid; }
}