:root {
  --bg: #07172b;
  --panel: #102944;
  --panel2: #163650;
  --line: #34516b;
  --text: #f1f5fc;
  --muted: #b0c4d7;
  --gold: #f6ca70;
  --cyan: #84d4e6;
  --red: #f1a5af;
  --green: #9cdec2;
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Thonburi", sans-serif;
  font-synthesis: none;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 12%, #16436755 0, transparent 58%), var(--bg);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, .button {
  cursor: pointer;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 17px;
  background: var(--panel2);
  color: var(--text);
  text-align: left;
  display: inline-block;
  line-height: 1.45;
  transition: border-color .16s, background-color .16s;
}
button:hover, .button:hover { border-color: var(--gold); background-color: #21435d; text-decoration: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #4b6880;
  border-radius: 11px;
  background: #091e33;
  color: var(--text);
  padding: 12px 14px;
}
input::placeholder, textarea::placeholder { color: #a4b9cd; opacity: 1; }
input[type=checkbox] { width: 20px; min-height: 20px; height: 20px; flex-shrink: 0; accent-color: var(--gold); }
input[type=range] { padding: 0; min-height: 44px; accent-color: var(--gold); }
textarea { resize: vertical; min-height: 120px; }
label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .94rem; }
label span, label small { display: block; }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
legend { padding: 0 8px; color: var(--cyan); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
/* Route changes focus the landmark for reading order, not a page-sized border. */
main:focus { outline: none; }
#anatomy-selection:focus { outline: 3px solid var(--gold); outline-offset: 3px; }
body > header {
  padding: 22px 3.5%;
  display: flex;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #08192de8;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 280px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand strong { font-size: 1.9rem; letter-spacing: -.045em; line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: .73rem; }
.compass { font-size: 3rem; color: var(--gold); line-height: 1; }
.search-wrap { flex: 1; position: relative; max-width: 630px; margin-left: auto; }
.search-wrap label { font-size: .7rem; display: flex; gap: 10px; text-transform: uppercase; letter-spacing: .08em; }
.search-wrap input { border-radius: 28px; padding-left: 22px; background: #081a2c; }
.search-results { position: absolute; top: 100%; z-index: 20; width: 100%; background: #102c45; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px #0009; max-height: 60vh; overflow: auto; padding: 10px; }
.search-results a { display: block; padding: 12px; border-bottom: 1px solid var(--line); }
.quiet { background: transparent; }
small, .thai { display: block; font-size: .85em; font-weight: 400; color: var(--muted); letter-spacing: normal; }
.thai { margin-top: 5px; line-height: 1.6; }
nav { display: flex; gap: 10px; padding: 13px 3.5%; border-bottom: 1px solid var(--line); overflow-x: auto; background: #0a1e33; }
nav a { padding: 10px 18px; min-height: 48px; color: var(--muted); white-space: nowrap; border: 1px solid transparent; border-radius: 12px; font-size: .92rem; }
nav a.active { background: #1b3852; border-color: #9b895d; color: var(--text); }
nav .num { color: var(--gold); margin-right: 9px; }
main { max-width: 1700px; margin: 0 auto; padding: 38px 3.5% 64px; min-height: 65vh; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; margin-top: 0; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 3.5vw, 3.7rem); margin-bottom: 16px; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 16px; }
.eyebrow { font-size: .73rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin-bottom: 14px; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 790px; }
.page-title { display: flex; justify-content: space-between; align-items: start; gap: 28px; margin-bottom: 25px; }
.page-title h1 .thai { font-size: .52em; line-height: 1.5; margin-top: 12px; }
.badge { display: inline-block; font-size: .72rem; border: 1px solid #a18a53; color: var(--gold); border-radius: 22px; padding: 5px 11px; background: #59482733; line-height: 1.45; }
.badge.blue { color: var(--cyan); border-color: #4d8198; background: #103443; }
.badge.green { color: var(--green); border-color: #5c927d; }
.notice { padding: 17px 21px; border: 1px solid #8d794a; border-radius: 14px; background: #4f412328; color: #f3d99d; margin: 22px 0; font-size: .9rem; }
.notice .thai { color: #d5cbb6; }
.grid { display: grid; gap: 22px; }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: linear-gradient(145deg, #15334d, #0e253c); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; min-width: 0; }
.card p { font-size: .96rem; }
.card .meta { font-size: .8rem; color: var(--muted); margin-top: 15px; }
a.card { color: var(--text); }
a.card:hover { border-color: var(--gold); text-decoration: none; }
a.card > span { color: var(--cyan); }
.pill { display: inline-block; color: var(--cyan); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: .8rem; margin: 4px 4px 4px 0; }
a.pill { min-height: 44px; }
.action { background: linear-gradient(115deg, #ffe39a, #f2c164); border-color: var(--gold); color: #102235; font-weight: 700; box-shadow: 0 5px 22px #e4b64712; }
.action:hover { background: #ffe39a; }
.action small, .action .thai { color: #324c61; }

/* The region index stays available independently of the anatomical illustration. */
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 22px; align-items: start; }
.regions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; padding: 15px; background: #0b2137; }
.regions .eyebrow { grid-column: 1 / -1; padding: 2px 7px; margin: 0 0 2px; }
.regions button { font-size: .81rem; padding: 11px; background: #102b43; border: 1px solid #2c4b64; min-height: 84px; }
.regions button small, .regions button .thai { font-size: .88em; }
.regions button.active { background: #29445b; border-color: var(--gold); color: #ffe0a0; box-shadow: inset 0 -3px var(--gold); }
.map { position: relative; padding: 28px; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, #286b9e55, transparent 61%), repeating-linear-gradient(0deg, transparent, transparent 59px, #688ca00b 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, #688ca00b 60px), #081c32; border-color: #426078; min-height: 740px; }
.map-head { position: relative; z-index: 1; padding-right: 170px; }
.map-head h2 { font-size: 1.45rem; margin-bottom: 8px; }
.map-head small { font-size: .83rem; }
.map-head .eyebrow { margin-bottom: 10px; }
.map-canvas { position: relative; width: 100%; min-height: 590px; margin: -8px 0 10px; }
.map svg { width: 100%; height: auto; display: block; }
.map-canvas > svg { height: 590px; }
.map-canvas .node text { pointer-events: none; }
.map-hotspots { position: absolute; inset: 0; pointer-events: none; }
.map-hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2; pointer-events: auto; min-width: 138px; max-width: 195px; font-size: .83rem; line-height: 1.35; padding: 11px 14px; border: 1px solid #7fa3bc; border-radius: 17px; background: #0b263feF; box-shadow: 0 8px 24px #0004; text-align: left; }
.map-hotspot .thai { font-size: .85em; line-height: 1.45; }
.map-hotspot:hover { background: #173c58; }
.map-hotspot.active, .map-hotspot[aria-pressed=true] { border-color: var(--gold); background: #17334b; color: #ffe3a7; box-shadow: 0 0 0 1px #efc66d33, 0 7px 24px #0005; }
.map-controls { position: absolute; right: 24px; top: 25px; display: flex; gap: 7px; z-index: 3; }
.map-controls button { min-width: 44px; padding: 8px 12px; background: #112c44; }
.map .map-caption { position: relative; font-size: .78rem; color: var(--muted); border-top: 1px solid #34516b80; padding-top: 14px; }
.node { cursor: pointer; outline: none; }
.node circle { transition: stroke-width .15s; }
.node:hover circle, .node:focus circle { stroke: var(--gold); stroke-width: 4; }
.context { display: flex; flex-direction: column; gap: 20px; }
.context .card { padding: 23px; }
.context h2 { font-size: 1.7rem; margin-bottom: 16px; }
.context .card p { font-size: .9rem; }
.context .card .meta { font-size: .77rem; }
.context .button { width: 100%; font-size: .88rem; padding: 12px 14px; background: #18364f; }
.context .mb { margin-bottom: 11px; }
.context .mt { margin-top: 17px; }
.context a.source { font-size: .83rem; }
.context details { border-top: 1px solid var(--line); padding-top: 12px; }
.context summary { min-height: 44px; cursor: pointer; }
.large-number { font-size: 2.2rem; color: var(--gold); line-height: 1.2; }
.node-title { font-size: 1.8rem; margin-bottom: 8px; }
.related { margin-top: 30px; }
.related h3 { color: var(--cyan); }
.breadcrumb { margin-bottom: 23px; font-size: .88rem; color: var(--muted); }
.breadcrumb a { display: inline-block; padding: 8px 0; }

/* Information is readable at its native size; evidence sits behind explicit disclosure. */
.disease-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.toc { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow: auto; }
.toc a { display: block; padding: 10px 0; min-height: 44px; color: var(--muted); font-size: .86rem; }
.toc a.button { padding: 12px 14px; color: var(--cyan); }
.toc .review-line { font-size: .76rem; }
.disease-overview { padding: 30px; border-color: #6c7b78; background: linear-gradient(130deg, #1b3a53, #0c233b); margin-bottom: 24px; }
.disease-overview > h2 { font-size: 1.6rem; }
.disease-overview .lead { max-width: none; }
.status-strip { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; border: 1px solid #655e45; background: #51452d28; border-radius: 12px; padding: 13px 17px; margin: 18px 0; font-size: .84rem; color: #ecd8ac; }
.status-strip p { margin: 0; font-size: inherit; }
.status-strip .badge { flex-shrink: 0; }
.section-card { scroll-margin-top: 24px; }
.section-card p { margin-top: 17px; }
.section-card .source { font-size: .81rem; }
.section-card h2 { font-size: 1.3rem; margin-bottom: 0; }
.learning-details { margin-top: 16px; }
.learning-details > details, details.learning-details { border: 1px solid var(--line); background: #102a42; border-radius: 15px; overflow: clip; margin-bottom: 12px; }
.learning-details > details > summary, details.learning-details > summary { padding: 18px 22px; min-height: 60px; cursor: pointer; font-size: 1.05rem; font-weight: 600; color: var(--text); }
.learning-details > details > summary .thai, details.learning-details > summary .thai { font-size: .85em; }
.learning-details > details[open] > summary, details.learning-details[open] > summary { border-bottom: 1px solid var(--line); background: #1a3851; }
.learning-details > details > :not(summary), details.learning-details > :not(summary) { margin-left: 22px; margin-right: 22px; }
.learning-details > details > :last-child, details.learning-details > :last-child { margin-bottom: 22px; }
.learning-details .section-card { border: 0; background: transparent; padding: 18px 0 0; }
.learning-details .claim-meta { margin-top: 16px; }
.claim-meta { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; font-size: .8rem; color: var(--muted); }
.claim-meta summary { cursor: pointer; color: var(--cyan); min-height: 44px; padding: 10px 0; }
.claim-meta p { font-size: .81rem; overflow-wrap: anywhere; margin-top: 12px; }
.mechanism { position: relative; }
.mechanism svg { width: 100%; display: block; background: #071e34; border-radius: 15px; }
.mechanism .controls { display: flex; gap: 16px; margin-top: 22px; align-items: center; }
.mechanism label { flex: 1; }
.mechanism .controls button { flex-shrink: 0; }
.mechanism .direction-note { color: var(--muted); font-size: .85rem; }
.orientation { display: flex; gap: 24px; align-items: center; background: #0a2036; border: 1px solid var(--line); padding: 20px; border-radius: 14px; margin-bottom: 23px; }
.orientation svg { width: 180px; flex-shrink: 0; }
.orientation p { font-size: .9rem; margin: 12px 0; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: .86rem; }
.dot { width: 9px; height: 9px; display: inline-block; background: var(--cyan); border-radius: 50%; margin-right: 7px; }
.dot.gold { background: var(--gold); }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 23px; }
.toolbar select { width: auto; min-width: 170px; }
.toolbar button.selected { border-color: var(--gold); color: var(--gold); background: #293c47; }

.journey-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; padding: 26px; background: #0b223b; border: 1px solid var(--line); border-radius: 22px; margin: 27px 0; }
.stage { display: flex; flex-direction: column; min-height: 160px; position: relative; min-width: 0; }
.stage button { flex: 1; background: #153850; border-radius: 15px; border-color: #41647c; }
.stage.emergency button { border-color: #c17b85; background: #422d40; }
.stage.recovery button { border-color: #629c86; background: #163e3d; }
.stage strong { font-size: 1rem; }
.stage .edges { font-size: .82rem; color: var(--cyan); padding: 10px 4px 0; }
.stage .edges a { display: inline-block; min-height: 44px; padding: 7px 10px; border-left: 2px solid #4c849b; margin: 4px 0; background: #0a1c2e80; border-radius: 0 8px 8px 0; width: calc(100% - 18px); vertical-align: top; }
.stage .edges a .thai { font-size: .9em; }
.stage.dim { opacity: .7; }
.stage.dim:focus-within, .stage.dim:hover { opacity: 1; }
.network { display: flex; flex-direction: column; gap: 18px; }
.network-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.network-row a { flex: 1; min-width: 150px; border: 1px solid var(--line); padding: 17px; border-radius: 12px; }
.source-list { counter-reset: sources; }
.source-list article { padding: 25px 0; border-bottom: 1px solid var(--line); }
.source-list h3 { margin-bottom: 10px; }
.source-list .meta { color: var(--muted); font-size: .85rem; }
.source-list article a { overflow-wrap: anywhere; }
.condition-tabs,.problem-tabs{display:flex;gap:8px;margin:22px 0;padding:7px;border:1px solid var(--line);border-radius:15px;background:#0a2137;overflow-x:auto}.condition-tabs a,.problem-tabs button{flex:1;min-width:130px;white-space:normal;text-align:center}.condition-tabs a{display:block;padding:11px 14px;min-height:52px;color:var(--muted);border:1px solid transparent;border-radius:10px}.condition-tabs a.selected,.problem-tabs button.selected{color:#102235;background:var(--gold);border-color:var(--gold);font-weight:750}.condition-tabs a.selected .thai,.problem-tabs button.selected .thai{color:#324c61}.condition-tab-panel{max-width:1100px}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin:28px 0 16px}.section-heading h2{margin:0}.condition-section-list{display:grid;gap:12px}.condition-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}.entity-kind{margin-top:-12px}.entity-type{color:var(--cyan);font-size:.86rem;font-weight:700}
.problem-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.problem-group{position:relative;padding-right:72px}.problem-group__count{position:absolute;right:22px;top:22px;display:grid;width:40px;height:40px;place-items:center;color:#102235;background:var(--gold);border-radius:50%;font-weight:800}.problem-group li{margin:.7rem 0;color:var(--muted)}.problem-decision{max-width:900px}.problem-tabs button{background:transparent}
.evidence-tools{display:grid;grid-template-columns:minmax(16rem,1.4fr) minmax(14rem,1fr) auto;gap:14px;align-items:end;margin:24px 0}.evidence-tools button{min-width:130px;text-align:center}.evidence-count{color:var(--muted)}.evidence-group{margin:28px 0}.evidence-group>h2{display:flex;align-items:center;gap:12px;font-size:1.25rem}.evidence-group>h2 .thai{margin:0;color:var(--muted);font-size:.78em}.evidence-group>h2 .evidence-group-count{display:grid;width:34px;height:34px;place-items:center;color:#102235;background:var(--gold);border-radius:50%;font-size:.86rem}.source-list.concise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.source-list.concise article{padding:20px;background:#0e283f;border:1px solid var(--line);border-radius:14px}.source-list.concise article>div>p{margin-top:-3px;color:var(--muted);font-size:.85rem}.source-list.concise h3{font-size:1rem;line-height:1.4}.source-list.concise dl{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin:14px 0}.source-list.concise dl div{min-width:0}.source-list.concise dt{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.source-list.concise dd{margin:3px 0;font-size:.8rem;overflow-wrap:anywhere}.evidence-support{font-size:.82rem!important;color:var(--muted)}.evidence-about{max-width:900px}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.span-two { grid-column: 1 / -1; }
.checkrow { display: flex; gap: 12px; align-items: start; margin: 18px 0; min-height: 44px; }
.checkrow input { margin-top: 5px; }
.checkrow span { display: block; }
.choices { display: flex; gap: 9px; flex-wrap: wrap; }
.choices label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 22px; min-height: 44px; padding: 9px 13px; font-size: .86rem; color: var(--text); cursor: pointer; }
.choices label:has(input:checked) { border-color: var(--gold); background: #333c3c; }
.choices input { width: 18px; height: 18px; min-height: 18px; }
.tabs { display: flex; gap: 10px; margin: 22px 0; }
.team-avatar { width: 52px; height: 52px; border-radius: 50%; border: 1px solid #7d8c89; background: linear-gradient(145deg, #3d5a6d, #1b384d); color: var(--gold); display: grid; place-items: center; font-size: 1.25rem; font-weight: 600; margin-bottom: 20px; }
.reasons { font-size: .88rem; color: var(--muted); padding-left: 20px; }
.reasons li { margin-bottom: 10px; }
.score { display: block; color: var(--gold); margin-bottom: 12px; font-size: .85rem; }
.empty { padding: 40px; color: var(--muted); border: 1px dashed #55728a; border-radius: 18px; background: #0b213599; }
.team-filter-details, .team-filters { border: 1px solid var(--line); border-radius: 13px; padding: 0 18px; margin: 18px 0; background: #0b2239; }
.team-filter-details > summary, .team-filters > summary { cursor: pointer; min-height: 52px; padding: 13px 0; color: var(--cyan); }
.team-filter-details[open], .team-filters[open] { padding-bottom: 18px; }
.method-phases { counter-reset: phase; }
.method-phases .card:before { counter-increment: phase; content: '0' counter(phase); color: var(--gold); font-size: 2rem; display: block; margin-bottom: 18px; }
.method-art { margin: 24px 0; overflow: hidden; border: 1px solid #426078; border-radius: 20px; background: #0b2239; }
.method-art img { display: block; width: 100%; max-height: 450px; object-fit: cover; object-position: center; }
.method-art figcaption { padding: 15px 20px; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); }
.loop { padding: 23px; text-align: center; color: var(--gold); border: 1px solid var(--line); border-radius: 14px; margin: 32px 0; font-size: 1.15rem; background: #17334d; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--cyan); }
footer { padding: 32px 3.5%; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); background: #08192c; }
footer p { margin: 8px 0; }
.method { font-size: .78rem; color: var(--gold); }
.skip { position: fixed; left: 10px; top: 10px; transform: translateY(-200%); z-index: 50; background: var(--gold); color: #000; padding: 12px; }
.skip:focus { transform: translateY(0); }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #f0dfb8; color: #0e2539; border-radius: 12px; padding: 14px 24px; max-width: calc(100% - 32px); z-index: 40; box-shadow: 0 10px 50px #0008; display: none; }
#toast.show { display: block; }
.muted { color: var(--muted); }
.wide { max-width: 1050px; margin: auto; }
.mb { margin-bottom: 23px; }
.mt { margin-top: 23px; }
.block { display: block; }
.error { color: #ffb9b9; }
.success { color: var(--green); }
.review-line { font-size: .83rem; color: var(--muted); margin: 20px 0; }
.review-line strong { color: var(--gold); }

@media (min-width: 1500px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) 335px; gap: 24px; }
  .map { min-height: 800px; }
  .map-canvas, .map-canvas > svg { min-height: 650px; height: 650px; }
  .map-hotspot { font-size: .9rem; min-width: 155px; max-width: 215px; }
}
@media (max-width: 1180px) {
  body > header { gap: 20px; }
  .brand { min-width: 235px; }
  .brand strong { font-size: 1.6rem; }
  .regions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
  .map { padding: 23px; min-height: 690px; }
  .map-head { padding-right: 0; }
  .map-controls { position: relative; top: auto; right: auto; justify-content: end; margin: 10px 0 15px; }
  .map-canvas, .map-canvas > svg { min-height: 520px; height: 520px; }
  .map-hotspot { font-size: .76rem; min-width: 113px; max-width: 156px; padding: 10px; border-radius: 13px; }
  .context .card { padding: 20px; }
  .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .disease-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 960px) {
  .hero-layout { grid-template-columns: 1fr; }
  .context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map { min-height: 0; }
  .map-head { padding-right: 170px; }
  .map-controls { position: absolute; top: 24px; right: 24px; margin: 0; }
  .map-canvas, .map-canvas > svg { min-height: 600px; height: 600px; }
  .map-hotspot { font-size: .88rem; min-width: 145px; max-width: 195px; }
  .disease-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .toc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .toc a { padding: 8px 0; }
}
@media (max-width: 760px) {
  body > header { flex-wrap: wrap; padding: 20px; gap: 18px; }
  .brand { flex: 1; min-width: 0; }
  .brand strong { font-size: 1.6rem; }
  .brand small { font-size: .65rem; }
  .compass { font-size: 2.5rem; }
  .search-wrap { order: 3; max-width: none; flex-basis: 100%; }
  body > header > .button { font-size: .8rem; padding: 10px 12px; }
  nav { padding: 10px 16px; gap: 6px; }
  nav a { padding: 10px 12px; font-size: .84rem; }
  main { padding: 28px 16px 48px; }
  h1 { font-size: 2.3rem; }
  .page-title { display: block; margin-bottom: 20px; }
  .page-title > .badge { margin-top: 16px; }
  .page-title h1 .thai { font-size: .58em; }
  .lead { font-size: 1rem; }
  .hero-layout { gap: 18px; }
  .regions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 9px; }
  .regions .eyebrow { font-size: .7rem; padding: 4px; }
  .regions button { min-width: 0; min-height: 80px; font-size: .84rem; padding: 11px; }
  .map { padding: 20px 16px 18px; width: 100%; border-radius: 20px; }
  .map-head { position: static; padding-right: 0; }
  .map-head h2 { font-size: 1.35rem; }
  .map-canvas { height: auto; min-height: 0; margin: 6px 0 18px; }
  .map-canvas > svg { min-height: 0; height: auto; aspect-ratio: 700 / 650; max-height: 510px; }
  .map-hotspots { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .map-hotspot { position: static; left: auto; top: auto; transform: none; min-width: 0; max-width: none; width: 100%; min-height: 76px; font-size: .88rem; padding: 12px; border-radius: 13px; box-shadow: none; }
  .map-hotspot .thai { font-size: .87em; }
  .map-controls { position: static; justify-content: end; margin: 10px 0 16px; }
  .map .map-caption { font-size: .8rem; }
  .context { grid-template-columns: 1fr; gap: 18px; }
  .context .card { padding: 23px; }
  .context .card p { font-size: .94rem; }
  .three, .two { grid-template-columns: 1fr; }
  .grid { gap: 18px; }
  .card { padding: 23px; }
  .toc { margin-bottom: 20px; }
  .toc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 15px; }
  .toc a { font-size: .82rem; }
  .disease-overview { padding: 23px; }
  .learning-details > details > summary, details.learning-details > summary { padding: 17px 18px; }
  .learning-details > details > :not(summary), details.learning-details > :not(summary) { margin-left: 18px; margin-right: 18px; }
  .status-strip { display: block; font-size: .85rem; }
  .status-strip .badge { margin: 3px 0 8px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .span-two { grid-column: auto; }
  .journey-map { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 18px 12px; }
  .stage { min-height: 145px; }
  .stage button { padding: 14px 12px; }
  .stage strong { font-size: .93rem; }
  .stage .edges { font-size: .8rem; padding-left: 0; padding-right: 0; }
  .stage .edges a { width: calc(100% - 18px); padding: 9px 7px; }
  .toolbar select { width: 100%; }
  .toolbar { gap: 9px; }
  .tabs { flex-wrap: wrap; }
  .tabs button { flex: 1; }
  footer { display: block; padding: 26px 20px; }
  .mechanism .controls { flex-wrap: wrap; gap: 12px; }
  .mechanism label { flex-basis: 100%; }
  .mechanism .controls button { flex: 1; }
  .orientation { display: block; padding: 18px; }
  .orientation svg { width: 160px; margin: 0 auto 16px; }
  .orientation strong { display: block; }
  .legend { gap: 14px; }
  .notice { padding: 17px; }
  .condition-tabs,.problem-tabs{margin-inline:-6px}.condition-tabs a,.problem-tabs button{min-width:145px}.section-heading{display:block}.section-heading .button{margin-top:12px}.problem-group-grid,.source-list.concise{grid-template-columns:1fr}.evidence-tools{grid-template-columns:1fr}.evidence-tools button{width:100%}.condition-actions .button{width:100%;text-align:center}
  .method-art { border-radius: 16px; }
  .method-art img { min-height: 210px; }
}
@media (max-width: 390px) {
  body > header { padding: 18px 16px; }
  .brand { gap: 9px; }
  .brand strong { font-size: 1.4rem; }
  body > header > .button { font-size: .74rem; max-width: 100px; }
  h1 { font-size: 2rem; }
  .map-hotspot { font-size: .82rem; padding: 11px; }
  .journey-map { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Explicit graph complements the readable stage list and preserves every branch. */
.journey-diagram { margin: 27px 0; border: 1px solid #45677f; border-radius: 20px; background: radial-gradient(ellipse at 50% 50%, #173b5555, transparent 70%), #0a2036; overflow: hidden; }
.journey-diagram > summary { min-height: 60px; padding: 18px 24px; cursor: pointer; color: var(--gold); font-size: 1.02rem; font-weight: 600; }
.journey-diagram[open] > summary { border-bottom: 1px solid var(--line); }
.journey-scroll { overflow: auto; padding: 14px 18px; scrollbar-color: #6d8ba2 #0a2036; }
.journey-visual { width: 1000px; height: 460px; position: relative; margin: 0 auto; }
.journey-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.journey-connectors path { fill: none; stroke: #83cddc; stroke-width: 2; }
.journey-connectors marker path { fill: #83cddc; stroke: none; }
.journey-node { position: absolute; left: var(--jx); top: var(--jy); width: 180px; min-height: 136px; padding: 16px; z-index: 1; background: linear-gradient(145deg, #234961, #12304a); border-color: #7ba9be; border-radius: 17px; box-shadow: 0 8px 24px #0004; }
.journey-node strong { font-size: 1rem; }
.journey-node .thai { font-size: .86rem; }
.journey-node.emergency { background: linear-gradient(140deg, #583447, #322a40); border-color: #dc96a1; }
.journey-node.recovery { background: linear-gradient(140deg, #1d4c49, #13383b); border-color: #85c9ad; }
.journey-node.active, .journey-node[aria-pressed=true] { border-color: var(--gold); box-shadow: 0 0 0 2px #f6ca7040; }
.journey-node.dim { opacity: .65; }
.journey-node.dim:focus-visible { opacity: 1; }
.method-phases .card { background: #f1f4fa; border-color: #edf2f7; color: #17334f; box-shadow: 0 8px 24px #0001; }
.method-phases .card:before { color: #f6ca70; background: #102c48; width: 57px; height: 57px; border-radius: 15px; display: grid; place-items: center; font-size: 1.4rem; }
.method-phases .card .thai, .method-phases .card .muted, .method-phases .card small, .method-phases .card .meta { color: #4c6480; }
.method-phases .card a { color: #1b5579; }
.method-phases .card .eyebrow { color: #8c672d; }
@media (max-width: 760px) {
  .journey-diagram > summary { padding: 17px 19px; font-size: .94rem; }
  .journey-scroll { padding: 8px; }
}
/* Keep the unfocused skip link clipped even in full-page browser captures. */
.skip:not(:focus){clip-path:inset(100%)}

/* Anatomy-led prototype: full-size illustration, semantic controls and a focused drawer. */
.atlas-hero{margin-top:-10px}.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #28465d;padding-bottom:16px}.atlas-heading .eyebrow{margin:0 0 6px}.atlas-breadcrumb{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.76rem}.atlas-breadcrumb button{padding:0;border:0;background:none;min-height:36px;font-size:.76rem;color:var(--cyan)}.atlas-breadcrumb .thai{font-size:.85em}.atlas-hero-grid{display:grid;grid-template-columns:minmax(200px,260px) minmax(360px,1fr) 310px;gap:28px;align-items:start;min-height:760px}.atlas-intro{padding-top:78px}.atlas-intro h1{font-size:clamp(2.2rem,3.1vw,3.5rem);line-height:1.12;letter-spacing:-.035em}.atlas-intro h1 .thai{font-size:.47em;line-height:1.55;color:#d2e1ec;margin-top:17px}.atlas-intro>p{color:var(--muted);font-size:.9rem;margin:25px 0}.atlas-intro label{margin-top:30px;font-size:.82rem}.atlas-intro select{font-size:.85rem;background:#0c253b;border-color:#385b71;padding:12px 10px}.atlas-intro .atlas-hint{font-size:.78rem;margin-top:16px}.atlas-text-link{display:inline-block;margin-top:22px;font-size:.82rem}.anatomy-stage{position:relative;min-width:0}.anatomy-figure{position:relative;aspect-ratio:2/3;max-width:490px;width:100%;margin:0 auto;isolation:isolate}.anatomy-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.anatomy-figure.heart-closeup{aspect-ratio:1;max-width:680px;margin-top:55px}.anatomy-hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;border-radius:50%;width:48px;height:48px;min-width:48px;padding:0;display:grid;place-items:center;background:#071b2a44;z-index:2}.anatomy-pin{width:10px;height:10px;background:#85d7e2;border:2px solid #d4f6f8;border-radius:50%;box-shadow:0 0 0 6px #75d3e333}.anatomy-hotspot.active .anatomy-pin{background:var(--gold);border-color:#fff0c6;box-shadow:0 0 0 7px #efc66d33}.hotspot-name{display:none;position:absolute;left:36px;top:4px;min-width:138px;max-width:200px;padding:9px 13px;border:1px solid #758774;border-radius:14px;background:#071a2deF;color:var(--text);font-size:.83rem;text-align:left;line-height:1.3;pointer-events:none}.hotspot-name .thai{font-size:.86em;margin-top:4px}.anatomy-hotspot:hover .hotspot-name,.anatomy-hotspot:focus .hotspot-name,.anatomy-hotspot.active .hotspot-name{display:block}.anatomy-hotspot.active .hotspot-name{border-color:var(--gold)}.anatomy-figure figcaption{position:absolute;bottom:0;left:0;right:0;background:#081b2de8;color:#b3cbdc;padding:9px 12px;border-radius:8px;font-size:.63rem;text-align:center;line-height:1.4}.atlas-view-controls{display:flex;justify-content:center;align-items:center;margin:10px 0 18px;font-size:.75rem;color:var(--muted)}.atlas-view-controls button{font-size:.78rem;background:transparent;border-radius:24px}.atlas-detail{margin-top:30px;padding:26px 24px;border:1px solid #d7e5ee;border-radius:22px;background:#eef4f8;color:#18314b;box-shadow:0 18px 60px #0002}.atlas-detail .eyebrow{color:#59718a;font-size:.65rem}.atlas-detail h2{font-size:1.65rem;margin-bottom:14px}.atlas-detail h2 .thai{color:#4e667c;font-size:.7em}.atlas-detail .thai{color:#5a7085}.atlas-detail-lead{font-size:.9rem;color:#415d73}.atlas-primary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:.83rem;margin:22px 0}.atlas-detail h3{font-size:.87rem;color:#2d4962}.atlas-condition-list{margin-top:25px}.atlas-condition{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid #c8d7e2;color:#153e62;font-weight:600;font-size:.88rem;min-height:58px}.atlas-condition>span:last-child{font-size:1rem;color:#9e772e}.atlas-condition .thai{font-weight:400;font-size:.85em}.atlas-related{border-top:1px solid #c8d7e2;padding-top:19px;margin-top:20px}.atlas-related a{display:block;color:#1d577b;font-size:.8rem;padding:7px 0;min-height:44px}.atlas-source{border-top:1px solid #c8d7e2;padding-top:18px;margin-top:20px;font-size:.75rem;color:#4e667c}.atlas-source summary{cursor:pointer;min-height:44px}.atlas-source p{font-size:.75rem;overflow-wrap:anywhere}.atlas-source a{color:#1c5a80}.family-picker{margin-top:25px}.family-picker button{display:block;position:relative;width:100%;font-size:.83rem;color:#274a68;background:transparent;border:0;border-radius:0;border-bottom:1px solid #c8d7e2;padding:13px 20px 13px 0}.family-picker button>span:last-child{position:absolute;right:0;top:13px}.family-picker button.selected{color:#805d1b;border-bottom-color:#a47a2d}.structure-picker{margin-top:30px}.structure-picker button{display:block;width:100%;margin-top:8px;background:transparent;font-size:.83rem;padding:12px 14px;border-color:#36536a;border-radius:12px}.structure-picker button.selected{border-color:var(--gold);color:var(--gold);background:#c79b3b16}.structure-explanation{border-top:1px solid #c8d7e2;padding-top:20px;margin-top:22px}.structure-explanation p{font-size:.83rem;color:#2b4a65}.structure-explanation .claim-meta{border-color:#c8d7e2;color:#4e667c}.structure-explanation .claim-meta summary,.structure-explanation .claim-meta a{color:#205c7f}.atlas-detail .muted{color:#526c82}
@media(min-width:1700px){.atlas-hero-grid{grid-template-columns:290px minmax(420px,1fr) 335px;gap:38px}.anatomy-figure{max-width:520px}.atlas-intro{padding-top:105px}.atlas-detail{margin-top:55px}}
@media(max-width:1150px) and (min-width:761px){.atlas-hero-grid{grid-template-columns:220px minmax(280px,1fr);gap:22px}.atlas-detail{grid-column:1/-1;margin-top:0;display:block;max-width:100%}.atlas-condition-list{display:flex;align-items:center;gap:20px}.atlas-condition{flex:1}.atlas-intro{padding-top:45px}.anatomy-figure{max-width:420px}}
@media(max-width:760px){.atlas-hero{margin-top:0}.atlas-heading{align-items:start;gap:12px;padding-bottom:12px}.atlas-heading .eyebrow{font-size:.62rem}.atlas-heading .badge{max-width:132px;font-size:.59rem}.atlas-hero-grid{display:flex;flex-direction:column;gap:0;min-height:0}.atlas-intro{padding-top:24px;width:100%}.atlas-intro h1{font-size:2.05rem;max-width:340px;margin-bottom:14px}.atlas-intro h1 .thai{font-size:.53em;line-height:1.5;margin-top:9px}.atlas-intro>p{font-size:.82rem;max-width:340px;margin:14px 0}.atlas-intro label{margin-top:18px}.atlas-intro select{font-size:.84rem}.atlas-intro .atlas-hint,.atlas-intro .atlas-text-link{display:none}.anatomy-stage{width:100%;margin-top:12px}.anatomy-figure{max-width:365px}.anatomy-figure.heart-closeup{max-width:365px;margin-top:0}.anatomy-figure figcaption{font-size:.6rem;padding:7px 8px}.anatomy-hotspot{width:46px;height:46px;min-width:46px}.hotspot-name{font-size:.72rem;min-width:100px;max-width:145px;left:30px;padding:7px 9px}.anatomy-hotspot:not(.active):not(:focus) .hotspot-name{display:none}.atlas-detail{width:100%;margin:5px 0 25px;padding:24px 22px;border-radius:18px}.atlas-detail h2{font-size:1.55rem}.atlas-view-controls{margin-top:6px}.structure-picker{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 5px}.structure-picker .eyebrow{width:100%;margin-bottom:0}.structure-picker button{width:auto;flex:1;font-size:.75rem;padding:10px;margin-top:0;min-width:100px}.family-picker button{min-height:60px}.atlas-breadcrumb{font-size:.7rem}.atlas-breadcrumb button{font-size:.7rem}}

/* Related conditions sit beside the selection controls in reading order. */
.atlas-hero-grid{grid-template-areas:"intro stage detail"}
.atlas-intro{grid-area:intro}.anatomy-stage{grid-area:stage}.atlas-detail{grid-area:detail}
.atlas-selection-head{display:flex;align-items:start;gap:12px;justify-content:space-between}
.atlas-selection-head>div{min-width:0}.atlas-selection-head h2{font-size:1.35rem;margin-bottom:10px}
.atlas-selection-head .eyebrow{margin-bottom:8px}.atlas-selection-region{font-size:.75rem;color:#526c82;margin-bottom:8px}
.atlas-return{font-size:.65rem;line-height:1.3;min-width:76px;padding:8px;color:#244d6a;background:transparent;border-color:#aec5d5}
.atlas-selection-more{margin-top:16px;border-top:1px solid #c8d7e2;padding-top:12px;color:#365870}
.atlas-selection-more>summary{cursor:pointer;min-height:44px;font-size:.76rem}
.atlas-selection-more>.atlas-detail-lead{margin-top:16px}
.atlas-condition-list{display:block;margin-top:12px}.atlas-condition-list h3{font-size:.75rem;margin-bottom:8px}
.atlas-condition{padding:12px 0;min-height:60px}.atlas-primary{margin:12px 0 4px}
@media(max-width:1150px) and (min-width:761px){.atlas-hero-grid{grid-template-areas:"intro stage" "detail detail"}.atlas-detail{grid-column:1/-1}}
@media(max-width:760px){
 .atlas-hero-grid{display:flex}.atlas-intro{order:0}.atlas-detail{order:1}.anatomy-stage{order:2}
 .atlas-hero.has-selection .atlas-intro{padding-top:16px}
 .atlas-hero.has-selection .atlas-intro h1{font-size:1.55rem;margin-bottom:12px}
 .atlas-hero.has-selection .atlas-intro h1 .thai{margin-top:5px;font-size:.58em}
 .atlas-hero.has-selection .atlas-intro>p{display:none}
 .atlas-hero.has-selection .atlas-intro label{margin-top:10px}
 .atlas-hero.has-selection .structure-picker{margin:10px 0 4px;gap:6px}
 .atlas-hero.has-selection .structure-picker .eyebrow{font-size:.6rem;margin-bottom:0}
 .atlas-hero.has-selection .structure-picker button{font-size:.72rem;min-height:68px;padding:8px}
 .atlas-detail{margin:16px 0 8px;padding:16px 18px;border-radius:16px;scroll-margin:12px}
 .atlas-selection-head h2{font-size:1.2rem;line-height:1.2;margin:0 0 6px}
 .atlas-selection-head h2 .thai{font-size:.7em;margin-top:4px}
 .atlas-selection-head .eyebrow{font-size:.57rem}
 .atlas-return{font-size:.65rem;min-width:90px;min-height:44px}
 .atlas-condition-list{margin-top:8px}.atlas-condition-list h3{font-size:.7rem;margin:0 0 5px}
 .atlas-condition{font-size:.85rem;padding:10px 0;min-height:58px}
 .atlas-condition .thai{font-size:.85em;margin-top:3px}
 .atlas-selection-more{margin-top:8px;padding-top:8px}
 .atlas-selection-more>summary{font-size:.72rem;min-height:44px;line-height:1.35}
 .anatomy-stage{margin-top:8px}
}
@media(max-width:760px){.atlas-hero:not(.has-selection) .anatomy-stage{order:1}.atlas-hero:not(.has-selection) .atlas-detail{order:2}}
#kit-vessel{margin:18px 0;background:#0c2131;border-radius:14px;overflow:hidden}
#kit-vessel svg{display:block;width:100%;height:auto;max-height:420px}
.kit-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.kit-buttons button{flex:1;font-size:.8rem;min-width:110px}
#kit-state{font-size:.85rem;color:var(--cyan);margin-top:14px}
.atlas-selection-summary{margin-top:14px;padding-top:12px;border-top:1px solid #c8d7e2}
.atlas-selection-summary p{font-size:.83rem;line-height:1.5;color:#2c4c66;margin-bottom:10px}
.atlas-selection-summary .thai{font-size:.95em}.atlas-selection-summary .meta{font-size:.66rem;color:#5c7185}
.atlas-selection-summary button{width:100%;background:#dceaf3;color:#224e6d;border-color:#a8c1d2;font-size:.75rem}
.anatomy-teaching{margin:32px 0 12px;padding:24px;max-width:720px}
.anatomy-teaching header{display:block;padding:0;background:none;border:0;margin-bottom:16px}
.anatomy-teaching figure{margin:18px 0}.anatomy-teaching svg{display:block;margin:0 auto}
.anatomy-teaching .notice{font-size:.72rem;padding:12px 14px}.teaching-caption{font-size:.8rem;color:var(--muted)}
.teaching-key{padding-left:28px}.teaching-key li{padding:8px 4px;font-size:.85rem}
.teaching-explanation h4{font-size:.88rem;color:var(--gold);margin:20px 0 8px}.teaching-explanation p{font-size:.86rem}
.teaching-sources{border-top:1px solid var(--line);padding-top:16px;margin-top:18px;font-size:.78rem;overflow-wrap:anywhere}
.teaching-sources summary{cursor:pointer;min-height:44px}.teaching-sources li{padding:10px 0}
.learning-path{margin-top:24px}.learning-step{margin-top:14px;border-top:1px solid var(--line);padding:10px 0}
.learning-step>summary{cursor:pointer;min-height:52px;font-weight:600;padding:8px 0}.learning-question{color:var(--gold);margin-top:16px}
.learning-step dl{margin:18px 0}.learning-step dt{font-weight:600;margin-top:14px}.learning-step dd{margin:8px 0 20px 16px;color:var(--muted)}
.typed-relation{padding:20px 0;border-top:1px solid var(--line);margin-top:18px}.typed-relation p{font-size:.88rem}
.condition-panel{margin:24px 0}.condition-panel .badge{margin-bottom:15px}.condition-step{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#0a2137}
.condition-step:focus{outline:3px solid var(--gold);outline-offset:3px}.condition-step h3{font-size:1.3rem}
.care-next{display:block;padding:0;border:0;background:none;margin-top:22px;white-space:normal;overflow:visible}
.care-next>div{padding:16px 0;border-top:1px solid var(--line)}.care-next button{width:100%;font-size:.88rem}.care-next p{font-size:.82rem;color:var(--muted);margin-top:10px}
.care-branches{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.care-branches button{flex:1;min-width:200px}
@media(max-width:760px){.anatomy-teaching{padding:18px;margin-top:14px}.atlas-selection-summary p{font-size:.82rem}.condition-panel{padding:20px}.condition-step{padding:16px}.condition-panel select{font-size:.78rem}.care-next button{font-size:.84rem}}
.anatomy-key{font-size:.78rem;color:var(--muted);margin:14px 0;padding:14px;border-top:1px solid var(--line)}.anatomy-key summary{min-height:44px;cursor:pointer}.anatomy-key p{margin-top:12px}
.atlas-crosslinks{font-size:.8rem;margin-top:20px;padding-top:16px;border-top:1px solid #c8d7e2}.atlas-crosslinks article{margin:16px 0}.atlas-crosslinks p{font-size:.76rem;margin-top:8px}.atlas-crosslinks a{color:#205a7c}

/* Compact native contents disclosure for AF/stroke mobile entry. */
.toc-compact > summary { min-height: 44px; padding: 10px 0; font-weight: 700; }
.toc-contents { padding-top: 12px; }

.compact-disease { grid-template-areas: "toc overview" "toc body"; }
.compact-disease > .toc { grid-area: toc; }
.compact-disease > .disease-overview { grid-area: overview; }
.compact-disease > .disease-body { grid-area: body; }
.emergency-entry { display: inline-block; padding: 12px 0; min-height: 44px; font-weight: 700; }
.vessel-views { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: center; }
.vessel-views figure { margin: 0; min-width: 0; }
.vessel-views figcaption { font-weight: 700; font-size: .88rem; padding: 12px 0; }
.vessel-views svg { width: 100%; height: auto; }
.vessel-views .direction-reference { padding: 12px; color: var(--cyan); border: 1px solid var(--border); border-radius: 10px; font-size: .85rem; }
.section-key { font-size: .8rem; line-height: 1.6; }
@media (max-width:760px) {
 .compact-disease { grid-template-areas: "overview" "toc" "body"; gap: 16px; }
 .compact-disease .toc { margin-bottom: 0; }
 .compact-disease .section-card { padding: 16px; margin-top: 8px; }
 .compact-disease .learning-details { margin-top: 16px; }
 .vessel-views { grid-template-columns: 1fr; }
}
@media (max-width:760px) { .vessel-views figure:last-child { grid-row: 1; } }

.learning-connections{display:block;margin-top:22px;padding:16px 0 0;border-top:1px solid var(--line);border-bottom:0;overflow:visible;background:none}
.learning-connections article{padding:14px 0;border-top:1px solid var(--line)}
.learning-connections a{display:block;min-height:44px;font-weight:700;white-space:normal}
.learning-connections p{font-size:.85rem;line-height:1.65}

/* Framework copy: questions, two short lines and one output per phase. */
.framework-page .page-title h1{font-size:clamp(2rem,3.4vw,3.7rem)}
.framework-credit{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:22px 0 30px}
.framework-credit p{margin:0}
.framework-questions{padding:15px 0;margin:14px 0;border-block:1px solid #ccd6e2;font-weight:600}
.framework-questions p,.framework-summary p{margin:0 0 12px}
.framework-output{border-top:1px solid #ccd6e2;padding-top:16px;margin-top:20px}
.framework-output strong{display:block;margin-top:8px}
.framework-background{margin-bottom:24px}

/* Team discussion: a readable evidence-to-question worksheet. */
.discussion-page{max-width:1000px;margin-inline:auto}
.discussion-page h1,.journey-page .page-title h1{font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.25}
.discussion-page h1 .thai{font-size:.7em}
.discussion-page .thai{font-size:1em;line-height:1.75;letter-spacing:0}
.discussion-page p,.discussion-page li{font-size:1rem;line-height:1.7}
.discussion-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:24px 0;background:none;border:0}
.discussion-heading h2{font-size:1.65rem}.discussion-heading p{margin:12px 0}
.discussion-picker{padding:16px 22px;margin:20px 0}.discussion-picker>summary{font-weight:700;cursor:pointer;min-height:44px}
.discussion-condition-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.discussion-condition-links .pill{white-space:normal;border-radius:12px;font-size:1rem;padding:14px}
.discussion-page .pill[aria-current=page]{background:#194a62;border-color:#92e0ec;color:white}
.discussion-page .eyebrow{font-size:.85rem;letter-spacing:.04em}
.discussion-page .badge{font-size:.85rem}.discussion-page .source{font-size:.92rem}
.discussion-question{padding:22px 0;border-bottom:1px solid var(--line)}
.discussion-question h3{font-size:1.1rem;line-height:1.55}.discussion-question details{margin-top:14px}
.discussion-proposal{border-color:#a18a53}.discussion-proposal h3{margin-top:24px}
.discussion-page details>summary,.journey-condition-details>summary{min-height:48px;cursor:pointer;line-height:1.65}
.discussion-stage-links .pill,.discussion-question .pill{font-size:.94rem}
.discussion-node-context{margin:14px 0;padding:14px 16px;background:#eaf6f8;border-left:4px solid #31869a;border-radius:8px}.discussion-node-context p{margin:6px 0;color:#183f55;font-weight:700}.discussion-node-context small{display:block;color:#4b6676;line-height:1.5}
.journey-selection{margin:20px 0}.journey-selection h2{font-size:1.35rem}
.journey-condition-details>summary{padding:18px 22px;border:1px solid var(--line);border-radius:12px;font-weight:700}
.journey-focus-drawer{margin:20px 0 28px;scroll-margin-top:16px;border-color:#6bcbd8;box-shadow:0 0 0 1px #6bcbd833,0 18px 45px #020a1238}
.journey-focus-drawer:focus{outline:3px solid #9be7ef;outline-offset:3px}
.journey-focus-drawer>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.journey-focus-drawer>header p{margin:8px 0 0;color:var(--muted);font-size:.86rem}
.journey-focus-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.journey-focus-drawer .condition-panel{margin-bottom:0}
.condition-connections{margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}.condition-connections>summary{min-height:44px;cursor:pointer;font-weight:700;line-height:1.45}.condition-connections[open]>summary{margin-bottom:14px}
@media(max-width:760px){.discussion-condition-links{grid-template-columns:1fr}.discussion-heading{display:block}.discussion-heading .button{margin-top:12px}.discussion-page .card{padding:20px}.discussion-page h2{font-size:1.4rem}}
@media(max-width:760px){.journey-focus-drawer>header{display:block}.journey-focus-close{margin-top:14px}.journey-focus-drawer .condition-panel{padding:0}}