/* IATHEON. The palette comes from the stains a person in this field actually looks at:
   haematoxylin (nuclei, blue-violet), eosin (cytoplasm, pink), DAB (IHC positive, brown).
   Neutrals are biased toward the haematoxylin hue so nothing reads as unconsidered grey. */
:root {
  --hema: #3c3370; --hema-lift: #5a4f9b; --eosin: #c4596f; --eosin-ink: #a3435a; --family-ink: #0b1527; --eosin-soft: #e2a3b0; --dab: #8a5524; --dab-soft: #c08a52;
  --ground: #f6f3ef; --surface: #fffefc; --surface-2: #efeae4; --sunk: #e6e0d8;
  --ink: #221f2e; --ink-2: #4d4860; --ink-3: #655f78; --line: #d8d1c8; --line-2: #c3bbb0;
  --good: #2f6b4f; --warn: #8d5c12; --open: #55506a; --none: #6a647e;
  --shadow: 0 1px 2px rgba(34,31,46,.06), 0 8px 24px -16px rgba(34,31,46,.28);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --wide: 1320px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hema: #a9a0e8; --hema-lift: #c3bbf5; --eosin: #e8899e; --eosin-ink: #e8899e; --family-ink: #bdb8cd; --eosin-soft: #b06478; --dab: #d3a065; --dab-soft: #966b3c;
    --ground: #14131c; --surface: #1c1b26; --surface-2: #232231; --sunk: #100f17;
    --ink: #eceaf4; --ink-2: #bdb8cd; --ink-3: #958fa3; --line: #2f2d3d; --line-2: #413e53;
    --good: #6fc79b; --warn: #e0a95c; --open: #a09ab5; --none: #928ca0;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --hema: #a9a0e8; --hema-lift: #c3bbf5; --eosin: #e8899e; --eosin-ink: #e8899e; --family-ink: #bdb8cd; --eosin-soft: #b06478; --dab: #d3a065; --dab-soft: #966b3c;
  --ground: #14131c; --surface: #1c1b26; --surface-2: #232231; --sunk: #100f17;
  --ink: #eceaf4; --ink-2: #bdb8cd; --ink-3: #958fa3; --line: #2f2d3d; --line-2: #413e53;
  --good: #6fc79b; --warn: #e0a95c; --open: #a09ab5; --none: #928ca0;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.7 var(--sans); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; text-wrap: balance; margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
h2 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; }
h3 { font-size: 17px; }
a { color: inherit; }
p { margin: 0 0 .7em; max-width: 68ch; }
code, .mono { font-family: var(--mono); font-size: .88em; }
:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; border-radius: 3px; }

/* header */
/* header */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--wide); margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; position: relative; z-index: 2; }
.brand { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1; flex: 0 0 auto; min-width: max-content; }
.brand b, .fm-brand b { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .07em; }
.brand-lab { color: var(--ink); }
.brand-rule { display: inline-block; width: 1.5px; height: .82em; background: currentColor; opacity: .38; }
.brand-name { color: var(--ink-2); font-weight: 600; }
.brand-mark { display: none; }
.spacer { display: none; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.scale-btn { display: none; align-items: center; gap: 7px; text-decoration: none; line-height: 1; white-space: nowrap; }
.scale-btn:hover, .scale-btn:focus-visible { text-decoration: none; }

/* Aegis-style branch navigation */
.nav { display: flex; gap: 3px; align-items: center; justify-content: flex-end; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.nav-link { font: inherit; font-size: 13px; font-weight: 500; background: none; border: 1px solid transparent; color: var(--ink-2); padding: 6px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--ink); background: var(--surface); border-color: var(--line); }
.nav-branch { display: flex; align-items: center; position: relative; }
.nav-branch-button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 500; background: transparent; border: 1px solid transparent; color: var(--ink-2); padding: 6px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.nav-branch-button::after { content: "▾"; font-size: 9px; opacity: .6; margin-left: 1px; transition: transform .15s ease; }
.nav-branch.open .nav-branch-button::after { transform: rotate(180deg); }
.nav-branch-button:hover,
.nav-branch.open .nav-branch-button,
.nav-branch.active .nav-branch-button { color: var(--ink); background: var(--surface); border-color: var(--line); }
.nav-branch-button:focus-visible, .nav-link:focus-visible, .nav-page:focus-visible, .sub a:focus-visible, .sub-group:focus-visible { outline: 2px solid var(--hema); outline-offset: 1px; }

.nav-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--hema); flex-shrink: 0; }
.nav-dot.forecast { background: var(--warn); }
.nav-dot.programs { background: var(--eosin); }
.nav-dot.discovery { background: var(--dab); }
.nav-dot.insilico { background: #3d81a4; }
.nav-dot.evidence { background: var(--good); }
.nav-dot.library { background: #8a5f9e; }
.nav-dot.benchmark { background: #b8823f; }
.nav-dot.methods { background: var(--hema); }

/* Aegis-style Mega Dropdown Panel */
.nav-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: color-mix(in srgb, var(--ground) 96%, var(--surface)); border-bottom: 1px solid var(--line); box-shadow: 0 24px 50px rgba(0, 0, 0, .28); animation: nav-panel-in .18s cubic-bezier(.16,1,.3,1); }
.nav-panel[hidden] { display: none !important; }
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nav-menu-inner { max-width: var(--wide); margin: 0 auto; padding: 22px 28px 26px; display: grid; grid-template-columns: minmax(240px, .82fr) minmax(0, 2.18fr); gap: 28px; }
.nav-menu-head { display: grid; gap: 7px; align-content: start; }
.branch-code { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; font-weight: 600; text-transform: uppercase; color: var(--hema); }
.branch-code.forecast { color: var(--warn); }
.branch-code.programs { color: var(--eosin); }
.branch-code.discovery { color: var(--dab); }
.branch-code.insilico { color: #3d81a4; }
.branch-code.evidence { color: var(--good); }
.branch-code.library { color: #8a5f9e; }
.branch-code.benchmark { color: #b8823f; }
.branch-code.methods { color: var(--hema); }
.nav-menu-head strong { font-size: 19px; letter-spacing: 0; color: var(--ink); }
.nav-menu-summary { color: var(--ink-2); font-size: 12.5px; line-height: 1.6; word-break: keep-all; }
.nav-motif { color: var(--ink-3); font-size: 12px; line-height: 1.5; word-break: keep-all; }
.nav-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px; align-content: start; }
.nav-page { display: grid; gap: 4px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.nav-page:hover, .nav-page.active { border-color: var(--line-2); background: color-mix(in srgb, var(--surface) 88%, var(--ink)); transform: translateY(-1px); }
.nav-page strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.nav-page span { color: var(--ink-3); font-size: 12px; line-height: 1.5; word-break: keep-all; }
.nav-page em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--hema); text-transform: uppercase; }
.nav-page.planned { opacity: .75; }
.nav-page.planned em { color: var(--ink-3); }

/* Backdrop scrim */
.nav-scrim { position: fixed; inset: 0; top: 52px; z-index: 38; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.nav-scrim.on { opacity: 1; pointer-events: auto; }

.icon-btn { font: inherit; font-size: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); padding: 5px 9px; border-radius: 5px; cursor: pointer; }
.icon-btn:hover { border-color: var(--line-2); color: var(--ink); }
.sub { max-width: var(--wide); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sub::-webkit-scrollbar { display: none; }
.sub a { font-size: 13px; color: var(--ink-3); text-decoration: none; padding: 11px 0; white-space: nowrap; flex: 0 0 auto; }
.sub a:hover { color: var(--ink); }
.sub a[aria-current] { color: var(--hema); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hema); }
.sub-group { display: none; flex: 0 0 auto; align-items: center; gap: 5px; font: 600 12.5px/1 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 11px; margin: 6px 0; cursor: pointer; }
.sub-group:hover { border-color: var(--hema); color: var(--hema); }
.em-floating-menu { display: none; }

/* When the branches don't fit beside the brand, app.js (fitNavRow) adds .nav-wrap and the
   branches drop to their own row instead of sliding under the brand. */
:root:not([data-skin="ember"]) .top.nav-wrap .top-in { flex-wrap: wrap; row-gap: 4px; padding-bottom: 6px; }
:root:not([data-skin="ember"]) .top.nav-wrap .nav { order: 3; flex: 1 0 100%; justify-content: flex-start; margin-left: -10px; }
@media (max-width: 1040px) {
  .nav { display: none; }
  .sub-group { display: inline-flex; }
  .sub { gap: 20px; }
}

main { max-width: var(--wide); margin: 0 auto; padding: 26px 28px 70px; }
.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.lede { font-size: 16.5px; color: var(--ink-2); max-width: 72ch; }
/* A page title needs air before the text under it; headings carry no margin of their own. */
h1 + p { margin-top: clamp(14px, 1.8vw, 20px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 26px 0; }
section { margin-top: 30px; }
section > h2 { margin-bottom: 4px; }
.note { font-size: 13px; color: var(--ink-3); max-width: 78ch; }

/* grids and cards */
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 15px; }
.card.flat { background: none; border-color: var(--line); }
.card h3 { margin-bottom: 5px; }
.card > p:last-child { margin-bottom: 0; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.tile .n { font-family: var(--serif); font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .k { font-size: 12px; color: var(--ink-3); }
.tile .h { font-size: 12px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 5px; margin-top: 2px; }
.tile.zero .n { color: var(--ink-3); }

/* labels */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.tag.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.tag.open { color: var(--open); border-color: var(--line-2); }
.tag.none { color: var(--none); border-color: var(--line); border-style: dashed; }
.tag.hema { color: var(--hema); border-color: color-mix(in srgb, var(--hema) 45%, var(--line)); }
.tag.eosin { color: var(--eosin-ink); border-color: color-mix(in srgb, var(--eosin) 45%, var(--line)); }
.tag.dab { color: var(--dab); border-color: color-mix(in srgb, var(--dab) 45%, var(--line)); }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.stripe { border-left: 3px solid var(--line-2); padding-left: 11px; }
.stripe.positive { border-color: var(--good); } .stripe.negative { border-color: var(--eosin); }
.stripe.mixed { border-color: var(--warn); } .stripe.descriptive { border-color: var(--hema); }
.stripe.not-curated { border-color: var(--line-2); border-left-style: dashed; }

/* tables */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; }
tr.self td { background: color-mix(in srgb, var(--hema) 8%, transparent); font-weight: 500; }
tr.nm td { color: var(--ink-3); }
.bar { height: 5px; border-radius: 3px; background: var(--hema); opacity: .75; min-width: 2px; }
/* Phones: a table marked "stack" (three or more columns, see table() in app.js) shows one card per row with each
   cell under its column name, instead of a sideways-scrolling table whose right-hand columns sit off screen. */
@media (max-width: 640px) {
  .tw:has(table.stack) { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .tw table.stack, .tw table.stack > tbody, .tw table.stack > tbody > tr, .tw table.stack > tbody > tr > td, .tw table.stack > tbody > tr > th { display: block; width: auto; }
  .tw table.stack > thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tw table.stack > tbody > tr { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 2px 12px; }
  .tw table.stack > tbody > tr + tr { margin-top: 8px; }
  .tw table.stack > tbody > tr[hidden] { display: none; }
  .tw table.stack > tbody > tr > td { min-width: 0 !important; padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .tw table.stack > tbody > tr > td:last-child { border-bottom: 0; }
  .tw table.stack > tbody > tr > td[style*="background"] { padding-left: 10px; padding-right: 10px; }
  .tw table.stack > tbody > tr > td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
  .tw table.stack > tbody > tr > td[data-label=""]::before { content: none; }
  .tw table.stack > tbody > tr > th { position: static; padding: 10px 0 8px; border-bottom: 1px solid var(--line); background: none; }
  html[lang="ko"] .tw table.stack > tbody > tr > td::before { letter-spacing: 0; text-transform: none; }
  .tw table.stack .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
/* A long tag (e.g. a target class on #target/CLDN18.2) wraps inside the row instead of running past the screen. */
.tags .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* lists */
dl.kv { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 3px 14px; margin: 0; font-size: 13.5px; }
dl.kv dt { color: var(--ink-3); }
dl.kv dd { margin: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
ul.plain li { padding-left: 15px; position: relative; font-size: 13.5px; }
ul.plain li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--eosin-soft); }
ul.did li::before { background: var(--good); } ul.didnot li::before { background: var(--none); }
.src { font-size: 12px; color: var(--ink-3); }
.src a { color: var(--hema); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--hema) 35%, transparent); }
.src a:hover { border-bottom-color: var(--hema); }

/* readiness axes: five separate bars, never summed */
.axes { display: grid; gap: 7px; }
.axis { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: start; font-size: 13px; }
.axis .a-k { color: var(--ink-3); font-size: 12px; padding-top: 1px; }
.axis .a-s { font-weight: 500; }
.axis .a-n { color: var(--ink-3); font-size: 12.5px; }

/* map */
.mapwrap { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); overflow: hidden; }
.mapwrap canvas { display: block; width: 100%; height: 520px; cursor: grab; }
.mapwrap.dragging canvas { cursor: grabbing; }
.maphud { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 20px); }
.maphud .chip { font-size: 12px; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; color: var(--ink-2); }
.mapstat { position: absolute; right: 10px; bottom: 10px; font-size: 12px; color: var(--ink-3); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; font-family: var(--mono); }
.maplbl { position: absolute; transform: translate(-50%, -50%); font-size: 12px; padding: 2px 6px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; white-space: nowrap; color: var(--ink); }
.maplbl:hover { border-color: var(--hema); }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 14px 15px; }
.panel .ph { font-size: 12px; color: var(--ink-3); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.scalebar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.scalebar button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.scalebar button[aria-current] { border-color: var(--hema); color: var(--hema); background: color-mix(in srgb, var(--hema) 9%, transparent); }

/* Decision Map keeps the canvas above its details on phones and folding/tablet widths. */
.decision-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 12px; align-items: start; }
.decision-map-stage, .decision-map-layout > .panel { min-width: 0; }
.decision-map-layout > .panel { overflow-wrap: anywhere; }
.decision-map-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.decision-map-tools button { min-width: 44px; min-height: 44px; padding: 8px 13px; font: 600 14px/1.2 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer; }
.decision-map-tools button:hover { border-color: var(--hema); color: var(--hema); }
.decision-map-help { margin-bottom: 8px; }
.decision-map-filters .pill, .decision-map-links .pill { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.decision-map-filters input[type=search] { min-width: 0; min-height: 44px; width: 100%; }
#dm canvas { touch-action: none; }
#dm .mapstat { max-width: calc(100% - 20px); pointer-events: none; }
#dm-panel [data-node] { min-height: 44px; white-space: normal; }
@media (max-width: 980px) {
  .decision-map-layout { grid-template-columns: minmax(0, 1fr); }
  #dm canvas { height: clamp(360px, 60svh, 520px); }
  .decision-map-filters input[type=search] { flex-basis: 100%; max-width: none; }
}

/* record dialog */
dialog { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); max-width: 760px; width: calc(100% - 32px); padding: 0; box-shadow: var(--shadow); }
dialog::backdrop { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.dlg-h { display: flex; gap: 10px; align-items: flex-start; padding: 15px 16px 10px; border-bottom: 1px solid var(--line); }
.dlg-b { padding: 14px 16px 18px; max-height: 68vh; overflow-y: auto; }
.dlg-b section { margin-top: 16px; }
.dlg-b section:first-child { margin-top: 0; }
.dlg-b h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-family: var(--sans); font-weight: 600; margin-bottom: 5px; }
.ko { font-size: 16px; line-height: 1.7; }

/* filter row */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.filters input[type=search], .filters select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); }
.filters input[type=search] { min-width: 190px; flex: 1 1 190px; max-width: 320px; }
.pill { font: inherit; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.pill[aria-pressed="true"] { border-color: var(--hema); color: var(--hema); background: color-mix(in srgb, var(--hema) 9%, transparent); }
.count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* hero: sized to content, never 100vh */
.hero { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .85fr); align-items: start; padding: 4px 0 8px; }
.hero-num { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.stain { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.stain canvas { display: block; width: 100%; height: 148px; }
.stain figcaption { font-size: 12px; color: var(--ink-3); padding: 7px 10px; border-top: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 16px 30px; }
footer .fin { max-width: calc(var(--wide) - 56px); margin: 0 auto; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .mapwrap canvas { height: 400px; } dl.kv { grid-template-columns: 1fr; gap: 1px 0; } dl.kv dt { margin-top: 6px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 760px) {
  .top-in { gap: 10px; padding: 12px 16px 10px; }
  main { padding: 20px 16px 60px; }
  .brand b { font-size: 17px; }
  .sub { padding: 0 16px; gap: 18px; }
  .brand b { gap: 8px; }
  .hero-num { grid-template-columns: 1fr 1fr; }
  .tw table { font-size: 12.5px; }
}

/* RISCON Labs family line and pill — the same design as the other family sites (AEGIS dist/riscon-family.css),
   drawn in currentColor so it follows the light and dark tokens. The list is redrawn from risconlabs.com/family.json. */
.riscon-family-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 22px 16px 62px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); font-family: inherit; font-size: 12px; font-weight: 500;
  line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--family-ink); }
.riscon-family-bar a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.riscon-family-bar a:focus-visible, .riscon-pill:focus-visible { outline: 2px solid var(--hema); outline-offset: 3px; border-radius: 3px; }
.riscon-family-lab { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; opacity: .9; }
.riscon-family-lab:hover { opacity: 1; }
.riscon-family-rule { width: 1px; height: 12px; background: currentColor; opacity: .22; }
.riscon-family-sites { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.riscon-family-sites a { opacity: .85; }
.riscon-family-sites a:hover { opacity: 1; }
.riscon-family-sites a[aria-current=page] { opacity: .95; font-weight: 600; }
.riscon-family-sites a[aria-current=page]::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
.riscon-pill { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 9999px;
  text-decoration: none; color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .01em;
  background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: .9; transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.riscon-pill:hover { opacity: 1; transform: translateY(-2px); }
.riscon-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eosin); }
.riscon-pill-sub { font-weight: 400; opacity: .85; }
.riscon-pill svg, .riscon-family-lab svg { width: 12px; height: 12px; }
body:has(.mapwrap) .riscon-pill { display: none; }
/* The company line under the family bar (2026-11-03): who runs the site and the three policies, in the bar's own ink.
   Plain text rather than the bar's small capitals; 12px is the readability floor. The bar's room for the pill moves
   under the line. riscon-consent.js refills it from family.json with these same classes. */
.riscon-family-bar:has(+ .riscon-company) { padding-bottom: 12px; }
.riscon-company { padding: 0 16px 62px; text-align: center; color: var(--family-ink); font-size: 12px; font-weight: 400; line-height: 1.7;
  letter-spacing: 0; text-transform: none; word-break: keep-all; }
.riscon-company p { margin: 0; max-width: none; }
.riscon-company-item { white-space: nowrap; }
.riscon-company-sep { opacity: .6; white-space: normal; }
.riscon-company a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.riscon-company a:hover { text-decoration-color: currentColor; }
.riscon-company a:focus-visible { outline: 2px solid var(--hema); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 640px) { .riscon-family-rule { display: none; } .riscon-family-bar { flex-direction: column; gap: 10px; } .riscon-pill { right: 12px; bottom: 12px; } .riscon-pill-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .riscon-pill, .riscon-family-bar a { transition: none; } .riscon-pill:hover { transform: none; } }

/* ── Structure viewer (assets/structure-viewer.js). The stage is an instrument panel: dark in both themes. ── */
.sv-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; margin-top: 14px; scrollbar-width: thin; }
.sv-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit; text-align: left; }
.sv-tab b { font-size: 13px; font-weight: 600; color: var(--ink); }
.sv-tab small { font-size: 12px; font-family: var(--mono); color: var(--ink-3); }
.sv-tab:hover { border-color: var(--line-2); }
.sv-tab[aria-selected="true"] { border-color: var(--hema); box-shadow: inset 0 0 0 1px var(--hema); background: color-mix(in srgb, var(--hema) 9%, var(--surface)); }
.sv-tab.exp b::before { content: "◇ "; color: var(--dab); }
.sv-tab.imp b::before { content: "↧ "; color: var(--eosin); }
.sv-filter { margin-top: 14px; }
.sv-filter .tags { margin-top: 6px; }
.sv-tab[hidden] { display: none; }
.sv-tab:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.sv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 980px) { .sv-wrap { grid-template-columns: 1fr; } }
.sv { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #1b2436; background: #05070d; color: #e7ecf6; }
.sv-stage { position: relative; height: clamp(380px, 64vh, 680px); background: radial-gradient(120% 90% at 50% 38%, #16213a 0%, #0b1120 52%, #04060b 100%); }
.sv-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(140,160,210,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,160,210,.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); }
.sv:fullscreen .sv-stage { height: 100vh; }
.sv-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline: none; }
.sv-gl.grab { cursor: grabbing; }
.sv-gl:focus-visible { box-shadow: inset 0 0 0 2px #8f86ff; }
.sv-hud { position: absolute; z-index: 2; font-size: 12px; }
.sv-tl { left: 16px; top: 14px; display: flex; flex-direction: column; gap: 2px; max-width: 55%; pointer-events: none; }
.sv-tl .sv-kind { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8f98b3; }
.sv-tl b { font: 600 22px/1.2 var(--sans); letter-spacing: 0; color: #f3f6fc; }
.sv-tl span:last-child { color: #aab3c8; font-size: 12px; }
.sv-tr { right: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.sv-tr button { font: 500 12px/1 var(--sans); color: #d7deee; background: rgba(20,28,46,.72); border: 1px solid rgba(150,170,220,.22); border-radius: 6px; padding: 7px 9px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sv-tr button:hover { border-color: rgba(190,205,245,.55); color: #fff; }
.sv-tr button[aria-pressed="true"] { background: rgba(120,110,230,.36); border-color: rgba(185,178,255,.7); color: #fff; }
.sv-tr button:focus-visible { outline: 2px solid #b8b0ff; outline-offset: 1px; }
.sv-seg { display: inline-flex; }
.sv-seg button { border-radius: 0; }
.sv-seg button:first-child { border-radius: 6px 0 0 6px; }
.sv-seg button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.sv-legend { position: absolute; left: 16px; bottom: 34px; right: 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #c9d1e3; pointer-events: none; z-index: 2; }
.sv-key { display: inline-flex; align-items: center; gap: 6px; }
.sv-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; box-shadow: 0 0 10px rgba(160,190,255,.35); }
.sv-key em { font-style: normal; color: #8791a8; font-family: var(--mono); font-size: 12px; }
.sv-key-note { color: #8791a8; }
.sv-ramp { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #6f63d9, #4fb3c9, #7fc8a9, #d3a065, #e8899e); }
.sv-hint { position: absolute; left: 16px; bottom: 11px; font-size: 12px; color: #6f7a93; pointer-events: none; transition: color .3s; z-index: 2; }
.sv.sv-nudge .sv-hint { color: #e8e2ff; }
.sv-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; background: rgba(8,12,22,.92); border: 1px solid rgba(160,175,230,.35); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; max-width: 250px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.sv-tip b { font-size: 12px; color: #fff; }
.sv-tip span { font-family: var(--mono); font-size: 12px; color: #cfd6e8; }
.sv-tip small { color: #8b94ab; font-size: 12px; }
.sv-msg { position: absolute; left: 16px; right: 16px; bottom: 64px; z-index: 2; background: rgba(60,24,20,.78); border: 1px solid rgba(255,140,120,.4); padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.sv-side { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; font-size: 13px; }
.sv-side h3 { margin: 2px 0 10px; font-size: 19px; line-height: 1.25; }
.sv-side h3 small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.sv-side .kv { font-size: 12.5px; }
.sv-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0; font-size: 12.5px; }
.sv-chains { font-size: 12.5px; margin: 10px 0; }
.sv-chains li { margin: 3px 0; }
.sv-btn { font: 600 12.5px/1 var(--sans); color: #fff; background: var(--hema); border: 0; border-radius: 7px; padding: 9px 12px; cursor: pointer; }
.sv-btn:hover { background: var(--hema-lift); }
.sv-btn:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.sv-trackbox { margin-top: 12px; border-radius: 10px; background: #070a12; border: 1px solid #1b2436; padding: 10px 10px 4px; color: #d7deee; }
.sv-trackhead { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #aab3c8; padding: 0 2px 6px; }
.sv-trackhead span:last-child { font-family: var(--mono); color: #8f98b3; text-align: right; }
.sv-track { display: block; width: 100%; cursor: crosshair; }
.sv-paebox h2 { margin-top: 26px; }
.sv-pae { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .sv-pae { grid-template-columns: 1fr; } }
.sv-paecv { width: 100%; display: block; border-radius: 6px; border: 1px solid var(--line); cursor: crosshair; image-rendering: pixelated; }
.sv-paekey { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--ink-3); margin-top: 6px; }
.sv-paekey i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgb(8,46,26), rgb(40,150,84), rgb(236,244,236)); }
@media (max-width: 640px) { .sv-tl { max-width: calc(100% - 28px); } .sv-tl b { font-size: 18px; } .sv-tr { left: 12px; right: 12px; top: 86px; max-width: none; justify-content: flex-start; } .sv-legend { bottom: 12px; left: 12px; right: 12px; } .sv-key em, .sv-hint { display: none; } }
.sv-tip[hidden], .sv-msg[hidden] { display: none; }
.sv-side .kv { grid-template-columns: minmax(92px, 40%) 1fr; }
.sv-side { min-width: 0; }
.sv-side .kv dd { min-width: 0; overflow-wrap: anywhere; }
#sv[data-loading="true"] .sv-stage { visibility: hidden; }
.sv-source { border-block: 1px solid var(--line); margin: 12px 0; padding: 9px 0; }
.sv-source summary { color: var(--ink); cursor: pointer; font: 600 14px/1.5 var(--sans); }
.sv-source[open] summary { margin-block-end: 9px; }
.sv-source summary:focus-visible,
.sv-pae-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sv-source code { font-size: 12px; overflow-wrap: anywhere; }
.sv-btn:disabled { cursor: progress; opacity: .65; }
.sv-pae-copy { font-size: 16px; line-height: 1.55; max-width: 55ch; margin-block-end: 14px; }
.sv-pae-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-block: 12px; }
.sv-pae-form label { display: grid; gap: 5px; flex: 0 1 140px; font-size: 13px; color: var(--ink); }
.sv-pae-form input {
  width: 100%; min-width: 0; min-height: 42px; padding: 7px 9px;
  font: 400 16px/1.5 var(--sans); font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--surface); border: 1px solid var(--ink-3); border-radius: 6px;
}
.sv-pae-form .sv-btn { min-height: 42px; background: var(--ink); color: var(--surface); }
.sv-pae-form .sv-btn:hover { background: var(--ink-2); }
.sv-paeread { font: 400 14px/1.6 var(--sans); font-variant-numeric: tabular-nums; min-height: 1.6em; }

/* ── Menu button and full menu (family style: map of every screen on the left, settings rows on the right) ── */
.menu-btn { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 13px 8px 11px; cursor: pointer; }
.menu-btn:hover { border-color: var(--hema); color: var(--hema); }
.menu-btn:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.fullmenu { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; color: var(--ink); }
.fullmenu::backdrop { background: color-mix(in srgb, var(--ink) 38%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fm { margin: 0 0 0 auto; height: 100%; width: min(1080px, 100%); background: var(--ground); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(0,0,0,.45); }
.fm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ground); }
.fm-brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; }
.fm-brand b { font-size: 20px; line-height: 1; letter-spacing: .04em; }
.fm-brand > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* On a phone the institute's name sits under the wordmark, across the full width, instead of squeezing beside it. */
@media (max-width: 760px) { .fm-brand { flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; } .fm-brand > span { font-size: 12px; letter-spacing: .1em; line-height: 1.45; } }
.fm-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.fm-close:hover { border-color: var(--hema); color: var(--hema); }
.fm-close:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.fm-body { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; }
.fm-map { padding: 18px 22px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 18px; align-content: start; }
.fm-branch { display: flex; flex-direction: column; gap: 8px; }
.fm-branch h3 { display: flex; align-items: center; gap: 6px; font: 600 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.fm-pages { display: flex; flex-direction: column; gap: 5px; }
.fm-page { display: grid; gap: 3px; padding: 7px 9px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ink); text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.fm-page:hover { background: var(--surface); border-color: var(--line); }
.fm-page.active { background: var(--surface); border-color: var(--hema); }
.fm-page strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.fm-page span { font-size: 12px; color: var(--ink-3); line-height: 1.45; word-break: keep-all; }
.fm-page em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--hema); }
.fm-set { border-left: 1px solid var(--line); padding: 18px 20px 48px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.fm-scale { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-radius: 10px; text-decoration: none; color: #eef1f8; background: radial-gradient(120% 140% at 20% 20%, #2a2350 0%, #141226 60%, #0b0a16 100%); border: 1px solid #2c2750; }
.fm-scale span { display: flex; flex-direction: column; gap: 3px; }
.fm-scale b { font-size: 15px; }
.fm-scale small { font-size: 12px; color: #b9b4d8; }
.fm-scale i { font-style: normal; font-size: 18px; color: #c9c1ff; }
.fm-scale:hover { border-color: #8f86ff; }
.fm-scale:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.fm-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; }
.fm-k { font-size: 12.5px; color: var(--ink-2); }
.fm-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.fm-seg button { font: 500 12.5px/1 var(--sans); min-height: 30px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ground); color: var(--ink-2); cursor: pointer; }
.fm-seg button:hover:not([disabled]) { border-color: var(--hema); color: var(--ink); }
.fm-seg button[aria-pressed="true"] { background: var(--hema); border-color: var(--hema); color: #fff; }
.fm-seg button[disabled] { opacity: .5; cursor: not-allowed; border-style: dashed; }
.fm-seg button:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.fm-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.fm-account a, .fm-account button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fm-account .riscon-account-strong { font-weight: 600; color: var(--hema); }
.fm-account .riscon-account-name { font-weight: 600; }
.fm-account .riscon-account-role, .fm-account .riscon-account-pending { font-size: 12px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-3); }
.fm-account .riscon-account-waiting { width: 60px; height: 10px; border-radius: 5px; background: var(--surface-2); }
.fm-note { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.55; }
@media (max-width: 760px) { .fm { width: 100%; border-left: 0; } .fm-body { grid-template-columns: 1fr; } .fm-set { border-left: 0; border-top: 1px solid var(--line); order: -1; } .fm-map { grid-template-columns: 1fr 1fr; padding: 16px; } }
@media (max-width: 420px) { .fm-map { grid-template-columns: 1fr; } .fm-row { grid-template-columns: 62px 1fr; } }
@media (prefers-reduced-motion: no-preference) { .fullmenu[open] .fm { animation: fm-in .22s cubic-bezier(.16,1,.3,1); } @keyframes fm-in { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } } }

/* ── Scale mode: the RISCON scale atlas takes the whole window ── */
.scale-host { position: fixed; inset: 0; z-index: 60; background: #0b0a10; }
body.scale-open { overflow: hidden; }
body.scale-open :is(.top, footer:not(.scale-legend), .riscon-family-bar, .riscon-company, .riscon-pill, .em-floating-menu) { display: none !important; }
.scale-failed { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; color: #e8e6f2; font-size: 14px; }
.scale-failed a { color: #c9c1ff; }

/* ── Research desk hero: numbers under the lede, the stain panel as tall as the text ── */
.hero { align-items: stretch; }
.hero-left { display: flex; flex-direction: column; }
.hero-num.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.hero-stain { display: flex; flex-direction: column; margin: 0; }
.hero-stain canvas { flex: 1 1 0; height: 0; min-height: 200px; }
@media (max-width: 760px) { .hero-num.four { grid-template-columns: 1fr 1fr; } .hero-stain canvas { min-height: 150px; } }

/* ── Header folds its second row while reading down ──
   The second row hangs below the sticky header instead of sitting in the page flow, and folds by sliding up.
   Its height never changes the layout, so folding cannot move the page and re-trigger itself (the old
   max-height version fed back through scroll anchoring and stuttered). main leaves room for it at the top. */
.top-in { position: relative; z-index: 2; }
.subbar { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: color-mix(in srgb, var(--ground) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: transform .22s ease, opacity .18s ease; }
.top.compact .subbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.subbar .sub { border-top: 0; }
body:not(.scale-open) main { padding-top: 70px; }
@media (max-width: 760px) { body:not(.scale-open) main { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) { .subbar { transition: none; } }

/* ── Screen state in the second row: a small dot, the word kept for screen readers ── */
.sub-state { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }


/* ── Long state tags wrap inside their card instead of running past its edge ── */
.card { min-width: 0; }
dl.kv dd { min-width: 0; }
dl.kv dd .tag, .card .tags .tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; line-height: 1.35; }
.axis > span:last-child { min-width: 0; }
.axis .tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; line-height: 1.35; }

/* ── Inside a card, a label sits above its value, so long text uses the card's full width instead of a thin column ── */
.card dl.kv { grid-template-columns: 1fr; gap: 1px 0; }
.card dl.kv dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 9px; }
.card dl.kv dt:first-child { margin-top: 0; }
.card dl.kv dd { line-height: 1.55; }

/* Card titles are buttons (they open the record); a button centres its text by default, which showed once a title wrapped. */
h3 > button.pill, h3 > button { text-align: left; }

/* ── Case cards: related question–judgment pairs fold to one line ── */
.qp-mini { border-top: 1px solid var(--line); padding: 7px 0 2px; margin-top: 6px; font-size: 13px; }
.qp-mini summary { cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: baseline; }
.qp-mini summary::-webkit-details-marker { display: none; }
.qp-mini summary::after { content: "+"; margin-left: auto; color: var(--ink-3); }
.qp-mini[open] summary::after { content: "−"; }
.qp-mini summary:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }


/* Source-linked research briefs use the site's existing editorial typography. */
.brief-list { margin-top: 24px; }
.brief-entry { padding: 22px 0; border-top: 1px solid var(--line); }
.brief-entry h2 { margin: 7px 0 10px; max-width: 44ch; }
.brief-entry h2 a { text-decoration: none; }
.brief-entry h2 a:hover { color: var(--hema); }
.brief-read { display: inline-block; margin-top: 10px; font-size: 13px; }
.brief-back { display: inline-block; margin: 0 0 20px; font-size: 13px; color: var(--ink-2); }
.research-brief { max-width: 1000px; }
.research-brief > h1 { max-width: 30ch; }
.research-brief section { margin-top: 32px; }
.research-brief section > h2 { margin-bottom: 14px; }
.research-brief section > h3 { margin: 18px 0 8px; }
.research-brief section > p { line-height: 1.75; }
.research-brief section > .tags { margin-top: 14px; }
.research-brief .tw { margin-top: 12px; }
.brief-sources { display: grid; gap: 14px; }
.brief-sources > div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.research-brief + .brief-back { margin-top: 30px; }
@media (max-width: 760px) {
  .top-in { padding: 10px 16px; gap: 10px; }
  .brand { min-width: 0; }
  .research-brief .tw th { min-width: 135px; }
}

/* Source-linked research controls; UI completion is separate from scientific validation. */
[hidden] { display: none !important; }
.status-link { text-decoration: none; }
.status-link:hover .tag { text-decoration: underline; }
.research-controls input, .research-controls select { min-height: 44px; min-width: 0; width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 8px; }
.research-controls .pill { min-height: 44px; }
.research-controls > div > div { min-width: 0; }
.programme-plan summary, .pair-plan summary { cursor: pointer; font-weight: 600; min-height: 36px; }
.pair-plan { margin-top: 12px; }
.pair-plan h4 { margin: 18px 0 8px; }
@media (max-width: 600px) { .research-controls > div > div { flex-basis: 100% !important; } .filters input, .filters select { max-width: 100%; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* WebGL interactive controls matching media_1791047384461.png */
.em-webgl-controls {
  position: absolute;
  bottom: 18px;
  right: 22px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(14, 15, 17, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.em-ctrl-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e5e5e7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.em-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.em-ctrl-turning {
  letter-spacing: .08em;
  font-size: 12px;
  font-family: var(--mono);
}
.em-ctrl-turning[aria-pressed="true"] {
  border-color: rgba(255, 77, 0, 0.45);
  color: #ff7324;
  background: rgba(255, 77, 0, 0.1);
}
.em-ctrl-toggle {
  font-size: 12px;
}
.em-ctrl-check {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #ff4d00;
  box-shadow: 0 0 6px #ff4d00;
  transition: opacity .15s ease, background .15s ease;
}
.em-ctrl-toggle[aria-pressed="false"] .em-ctrl-check {
  opacity: .25;
  box-shadow: none;
  background: #888;
}
.em-ctrl-toggle[aria-pressed="false"] {
  opacity: .65;
}

/* Target markers tracking 3D coordinates: revealed ONLY on hover action */
.em-target-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: em-marker-pop .18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
@keyframes em-marker-pop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.em-marker-beacon {
  position: relative;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.em-marker-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 77, 0, 0.7);
  animation: em-ring-pulse 2.2s infinite ease-out;
}
.em-marker-ring-inner {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 115, 36, 0.9);
}
.em-marker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d00;
  box-shadow: 0 0 8px #ff4d00;
}
.em-marker-tag {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 7px;
  background: rgba(14, 15, 17, 0.85);
  border: 1px solid rgba(255, 77, 0, 0.35);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f3f1ec;
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.em-marker-tag b {
  font-weight: 600;
  letter-spacing: .04em;
  color: #ff914d;
}
.em-marker-tag small {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(243, 241, 236, 0.65);
}
@keyframes em-ring-pulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.em-node-tip {
  z-index: 30;
  background: rgba(14, 15, 17, 0.94);
  border: 1px solid rgba(255, 77, 0, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  max-width: 260px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.em-node-tip-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ff7324;
  margin-bottom: 4px;
}
.em-node-tip-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px;
}
.em-node-tip-role {
  font-size: 12px;
  color: #a8a8a8;
  line-height: 1.45;
  margin: 0 0 6px;
}
.em-node-tip-link {
  font-size: 12px;
  color: #ff4d00;
  font-weight: 600;
}

/* Newest evidence: dated rows instead of a wall of pills (2026-10-25) */
.newest-list{list-style:none;padding:0;margin:10px 0 0}
.newest-list li{display:flex;gap:12px;align-items:baseline;padding:5px 0;border-top:1px solid rgba(127,127,127,.18)}
.newest-list li:first-child{border-top:0}
.newest-list .src{flex:none;min-width:12.5em;white-space:nowrap}
.newest-more{margin-top:8px}
.newest-more summary{cursor:pointer;font-size:.92em}
@media (max-width:640px){.newest-list li{flex-direction:column;gap:2px}.newest-list .src{min-width:0}}

/* Start here: short teasers, even cards, Read at the bottom (2026-10-25) */
.intro-card{display:flex;flex-direction:column}
.intro-card .card-teaser{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.intro-card .pill[data-fe]{margin-top:auto;align-self:flex-start}

/* RISCON readability guideline (riscon-guidelines readability/apply.md), 2026-10-25:
   bold is 600 so a screen keeps three weights; Korean text breaks between words and Korean labels keep zero tracking. */
b, strong { font-weight: 600; }
html[lang="ko"] body, .ko { word-break: keep-all; }
html[lang="ko"] .eyebrow, html[lang="ko"] .tag, html[lang="ko"] th, html[lang="ko"] .dlg-b h4, html[lang="ko"] .card dl.kv dt,
html[lang="ko"] .riscon-family-bar, html[lang="ko"] .fm-brand > span, html[lang="ko"] .branch-code { letter-spacing: 0; }

/* Front page: newest English records as a table */
.start-here > h2 ~ h2 { margin-top: 36px; }
.start-here .tw { margin-top: 12px; }
table.newest td { vertical-align: baseline; }
table.newest td:nth-child(3), table.newest th:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.newest td:nth-child(2) { color: var(--ink-2); white-space: nowrap; }
.rec-link { font: inherit; color: var(--hema); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--hema) 40%, transparent); }
.rec-link:hover { text-decoration-color: currentColor; }
.start-here .more-links { margin-top: 14px; }
@media (max-width: 640px) { table.newest td:nth-child(2) { white-space: normal; } }

/* Clinical reading: source sentences under the table (2026-11-07) */
.clinical-sources { margin-top: 8px; }
.clinical-sources ul { margin: 6px 0 0; padding-left: 18px; }
.clinical-sources li { margin: 4px 0; line-height: 1.5; }