/* ExerkineAtlas — body atlas (atlas.html). Loaded only on that page, after site.css.
   The stage is a deep navy "plate" in the mixed and dark themes and a pale one in the light theme. */

/* ─── Stage tokens ──────────────────────────────────────────────────────── */
.atlas-stage {
  --st-bg1: #12233F; --st-bg2: #070E1A;
  --st-text: #EEF3FA; --st-text-2: #C4D0E2; --st-muted: #93A3BC;
  --st-line: rgba(156, 200, 255, .66); --st-line-soft: rgba(156, 200, 255, .16); --st-line-faint: rgba(156, 200, 255, .07);
  --st-organ-stroke: rgba(176, 214, 255, .58); --st-vessel: rgba(255, 150, 170, .34);
  --st-panel: rgba(12, 22, 38, .80); --st-panel-solid: #0F1C30; --st-panel-border: rgba(170, 196, 232, .16);
  --st-chip: rgba(255, 255, 255, .05); --st-chip-hover: rgba(255, 255, 255, .1);
  --st-hub-bg: #13243D; --st-hub-stroke: rgba(176, 214, 255, .5); --st-edge: rgba(176, 210, 255, .5);
  --st-hl: #FFFFFF;
  --st-ext: rgba(150, 150, 150, .55); --st-ext-hl: #A6A6A6;   /* grey: extensions (further links in the review) */
  /* domain colours on the dark plate: the validated dark steps */
  --d-cv: #d55181; --d-met: #c98500; --d-neuro: #3987e5; --d-msk: #d95926; --d-inflam: #199e70; --d-onco: #9085e9;
}
[data-theme="light"] .atlas-stage {
  --st-bg1: #FAFCFF; --st-bg2: #E6ECF5;
  --st-text: #0E1A2B; --st-text-2: #2E3E57; --st-muted: #56657C;
  --st-line: rgba(28, 64, 120, .58); --st-line-soft: rgba(28, 64, 120, .15); --st-line-faint: rgba(28, 64, 120, .06);
  --st-organ-stroke: rgba(30, 72, 136, .5); --st-vessel: rgba(196, 54, 92, .32);
  --st-panel: rgba(255, 255, 255, .88); --st-panel-solid: #FFFFFF; --st-panel-border: #DAE2EC;
  --st-chip: #F3F6FA; --st-chip-hover: #E8EDF4;
  --st-hub-bg: #FFFFFF; --st-hub-stroke: #9AAECB; --st-edge: rgba(36, 66, 116, .42);
  --st-hl: #0E1A2B;
  --st-ext: rgba(150, 150, 150, .6); --st-ext-hl: #8C8C8C;
  --d-cv: #e87ba4; --d-met: #eda100; --d-neuro: #2a78d6; --d-msk: #eb6834; --d-inflam: #1baf7a; --d-onco: #6250d6;
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
.atlas-page main { background: var(--bg); }
.atlas-app { position: relative; }
.atlas-stage {
  position: relative; overflow: hidden; height: calc(100svh - 68px - 44px); min-height: 560px;
  background: radial-gradient(120% 90% at 42% 38%, var(--st-bg1), var(--st-bg2));
  color: var(--st-text); user-select: none; -webkit-user-select: none; isolation: isolate;
}
.atlas-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.atlas-stage.dragging .atlas-svg { cursor: grabbing; }
.atlas-noscript { position: absolute; inset: auto 0 40% 0; text-align: center; color: var(--st-text-2); }
.atlas-down {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; font-size: .86rem; font-weight: 560;
  color: var(--text-2); text-decoration: none; background: var(--bg-alt); border-bottom: 1px solid var(--border);
}
.atlas-down .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.atlas-down:hover { color: var(--text); }

/* ─── Scene ─────────────────────────────────────────────────────────────── */
.contour { fill: none; stroke: var(--st-line-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.contour.c0 { stroke: var(--st-line-soft); opacity: .55; }
.g-body-a { stop-color: #80B4FF; stop-opacity: .13; } .g-body-b { stop-color: #80B4FF; stop-opacity: .015; }
.g-org-a { stop-color: #B9D8FF; stop-opacity: .34; } .g-org-b { stop-color: #7FAEF0; stop-opacity: .06; }
[data-theme="light"] .g-body-a { stop-color: #4A7CC4; stop-opacity: .10; }
[data-theme="light"] .g-body-b { stop-color: #4A7CC4; stop-opacity: .02; }
[data-theme="light"] .g-org-a { stop-color: #4F86D0; stop-opacity: .22; }
[data-theme="light"] .g-org-b { stop-color: #4F86D0; stop-opacity: .05; }
.body-fill { fill: url(#ag-body); }
.body-line { fill: none; stroke: var(--st-line); stroke-width: 1.4; }
.body-glow { fill: none; stroke: var(--st-line); }
.body-glow.w2 { stroke-width: 5; opacity: .12; }
.body-glow.w3 { stroke-width: 13; opacity: .045; }
.spine { fill: none; stroke: var(--st-line-soft); stroke-width: 1; stroke-dasharray: 2 5; }

.organ { cursor: pointer; outline: none; transition: opacity .35s var(--ease); }
.organ-shape { fill: url(#ag-organ); stroke: var(--st-organ-stroke); stroke-width: 1.1; transition: stroke .25s, stroke-width .25s; }
.organ-detail { fill: none; stroke: var(--st-organ-stroke); stroke-width: .8; opacity: .5; }
.vessel { fill: none; stroke: var(--st-vessel); stroke-width: 1.3; transition: stroke .25s; }
.vessel-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; }
.organ.hover .organ-shape, .organ:focus-visible .organ-shape { stroke: var(--st-hl); stroke-width: 1.6; }
.organ.hover .vessel, .organ:focus-visible .vessel { stroke: var(--st-hl); }
.organ.target .organ-shape, .organ.sel .organ-shape { stroke: var(--st-hl); stroke-width: 1.6; }
.organ.target .vessel, .organ.sel .vessel { stroke: var(--st-hl); stroke-width: 1.8; }
.organ.sel .organ-shape { filter: url(#ag-glow); }
.organ.target:not(.sel) .organ-shape { animation: organ-pulse 2.4s ease-in-out infinite; }
.focus .organ:not(.target):not(.source):not(.sel) { opacity: .32; }
@keyframes organ-pulse { 50% { stroke-opacity: .45; } }

.tlabel { transition: opacity .35s var(--ease); pointer-events: none; }
.leader { fill: none; stroke: var(--st-line-soft); stroke-width: 1; }
.leader-end { fill: var(--st-line); }
.tl-name { font: 620 13.5px/1 var(--font-display); fill: var(--st-text); letter-spacing: -.01em; }
.tl-count { font: 480 11px/1 var(--font-sans); fill: var(--st-muted); }
.focus .tlabel:not(.lit) { opacity: .3; }
.zoomed .tlabel .leader { opacity: .5; }

/* exerkine dots */
.ek { cursor: pointer; outline: none; transition: opacity .35s var(--ease); }
.ek-hit { fill: transparent; }
.ek-halo { fill: var(--dc); opacity: 0; transition: opacity .25s; }
.ek-dot { fill: var(--dc); stroke: var(--st-bg2); stroke-width: 1.3; }
.ek.sec .ek-dot { fill: var(--st-bg2); stroke: var(--dc); stroke-width: 2; }
.ek-inv { fill: none; stroke: var(--dc); stroke-width: 1.3; stroke-dasharray: 2.2 2.2; }
.ek-in { transform-box: fill-box; transform-origin: center; }
.ek:hover .ek-halo, .ek.hover .ek-halo, .ek:focus-visible .ek-halo, .ek.lit .ek-halo { opacity: .28; }
.ek.sel .ek-halo { opacity: .5; animation: halo 2s ease-in-out infinite; }
.ek:focus-visible .ek-dot { stroke: var(--st-hl); stroke-width: 2; }
@keyframes halo { 50% { opacity: .18; } }
.ek-label {
  font: 620 10.5px/1 var(--font-sans); fill: var(--st-text); paint-order: stroke; stroke: var(--st-bg2); stroke-width: 3.2px;
  stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.zoomed .ek-label, .ek.lit .ek-label, .ek.sel .ek-label, .ek:hover .ek-label, .ek.hover .ek-label, .ek:focus-visible .ek-label { opacity: 1; }
.zoomed .ek.sec:not(.lit) .ek-label { opacity: .7; }
.focus .ek:not(.lit):not(.near):not(.sel) { opacity: .2; }
.focus .ek.near { opacity: .75; }
.ek.off { opacity: .07 !important; pointer-events: none; }

/* routes and particles */
.route { fill: none; stroke: var(--dc); stroke-width: 1; opacity: .17; transition: opacity .35s var(--ease), stroke-width .25s; }
.route.sec { opacity: 0; }
.focus .route { opacity: .025; }
.focus .route.sec { opacity: 0; }
.route.lit, .route.hover { opacity: .85; stroke-width: 1.8; }
.route.sec.lit { opacity: .5; stroke-dasharray: 4 4; }
.route.off { opacity: 0 !important; }
.route.ext { stroke: var(--st-ext); opacity: .12; stroke-dasharray: 3 3; }
.route.ext.lit, .route.ext.hover { stroke: var(--st-ext-hl); opacity: .85; stroke-width: 1.6; }
.particle.ext, [data-theme="light"] .particle.ext { fill: var(--st-ext-hl); }
.particle { fill: var(--dc); pointer-events: none; }
[data-theme="light"] .particle { fill: var(--dc); }

/* brain detail */
.brain-detail { opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.brain-open .brain-detail { opacity: 1; }
.bbb { fill: none; stroke: var(--st-line); stroke-width: 1.1; stroke-dasharray: 3 4; }
.region-dot { fill: var(--st-text); opacity: .8; }
.region-text text { font: 600 9.5px/1 var(--font-sans); fill: var(--st-muted); paint-order: stroke; stroke: var(--st-bg2); stroke-width: 3px; stroke-linejoin: round; }
.bbb-text text { fill: var(--st-text-2); font-style: italic; }

/* network */
.l-body, .l-organs, .l-labels, .l-routes, .l-particles, .l-back, .l-detail { transition: opacity .6s var(--ease); }
.l-hubs, .l-edges, .l-netnote { transition: opacity .6s var(--ease) .2s; }
[data-view="body"] .l-hubs, [data-view="body"] .l-edges, [data-view="body"] .l-netnote { opacity: 0; pointer-events: none; }
[data-view="network"] .l-body { opacity: .07; }
[data-view="network"] .l-organs, [data-view="network"] .l-labels, [data-view="network"] .l-routes,
[data-view="network"] .l-particles, [data-view="network"] .l-detail { opacity: 0; pointer-events: none; }
[data-view="network"] .l-back { opacity: .5; }
[data-view="network"] .ek.sec { opacity: 0; pointer-events: none; }
.hub { cursor: pointer; outline: none; transition: opacity .35s var(--ease); }
.hub-box { fill: var(--st-hub-bg); stroke: var(--st-hub-stroke); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.hub-text { font: 650 12px/1 var(--font-display); fill: var(--st-text); letter-spacing: -.005em; }
.hub:hover .hub-box, .hub.lit .hub-box, .hub:focus-visible .hub-box { stroke: var(--st-hl); }
.hub.sel .hub-box { fill: var(--st-hl); stroke: var(--st-hl); }
.hub.sel .hub-text { fill: var(--st-bg2); }
.focus .hub:not(.lit):not(.sel) { opacity: .3; }
.edge { fill: none; stroke: var(--st-edge); stroke-width: 1.2; transition: opacity .3s, stroke .2s; }
.edge.k-via, .edge.k-binds { stroke-width: 1; }
.edge.k-related { stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 1.6; }
.edge.k-proposed { stroke-dasharray: 6 5; }
.edge.k-derived { stroke-dasharray: 9 3; }
.focus .edge { opacity: .1; }
.edge.lit, .edge.hover { stroke: var(--st-hl); opacity: 1; stroke-width: 1.7; }
.edge.off { opacity: .04 !important; }
.mk { fill: var(--st-edge); }
.mk.mkx { fill: var(--st-ext); }
.edge.ext { stroke: var(--st-ext); stroke-width: 1; }
.edge.ext.lit, .edge.ext.hover { stroke: var(--st-ext-hl); }
.hub.ext .hub-box { stroke: var(--st-ext); stroke-dasharray: 3 3; }
.hub.ext .hub-text { fill: var(--st-muted); }
.hub.ext.lit .hub-box, .hub.ext:hover .hub-box { stroke: var(--st-ext-hl); }
.hub.ext.sel .hub-box { fill: var(--st-ext-hl); stroke: var(--st-ext-hl); }
.hub.ext.sel .hub-text { fill: var(--st-bg2); }
.net-note-line { fill: none; stroke: var(--st-line-soft); stroke-width: 1; }
.net-note-text { font: 500 12px/1 var(--font-sans); fill: var(--st-muted); }

/* entrance */
.atlas-stage .l-body, .atlas-stage .l-back { opacity: 0; }
.atlas-stage.ready .l-body, .atlas-stage.ready .l-back { opacity: 1; transition: opacity 1.4s var(--ease); }
.atlas-stage.ready[data-view="network"] .l-body { opacity: .07; }
.atlas-stage.ready[data-view="network"] .l-back { opacity: .5; }
.atlas-stage .organ { opacity: 0; }
.atlas-stage.ready .organ { animation: organ-in .8s var(--ease) both; animation-delay: calc(300ms + var(--i) * 55ms); opacity: 1; }
.atlas-stage.ready.focus .organ:not(.target):not(.source):not(.sel) { opacity: .32; }
.atlas-stage .ek-in { transform: scale(0); }
.atlas-stage.ready .ek-in { transform: scale(1); transition: transform .55s cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(900ms + var(--i) * 22ms); }
.atlas-stage.ready.settled .ek-in { transition-delay: 0s; }
@keyframes organ-in { from { opacity: 0; transform: translateY(6px); } }
.atlas-stage.ready .organ { transform-box: view-box; }

/* ─── Bar: breadcrumbs, view switch, search, filter ─────────────────────── */
.atlas-bar { position: absolute; z-index: 6; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.atlas-bar > * { pointer-events: auto; }
.atlas-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: .9rem; font-weight: 560;
  padding: 6px 14px; border-radius: 999px; background: var(--st-panel); border: 1px solid var(--st-panel-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.atlas-crumbs button { border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; font: inherit; color: var(--st-muted); cursor: pointer; }
.atlas-crumbs button:hover { color: var(--st-text); }
.atlas-crumbs [aria-current] { color: var(--st-text); }
.atlas-crumbs .sep { color: var(--st-muted); opacity: .5; }
.atlas-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.atlas-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--st-panel); border: 1px solid var(--st-panel-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.atlas-seg button { border: 0; background: transparent; color: var(--st-muted); font: 600 .86rem/1 var(--font-sans); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.atlas-seg button:hover { color: var(--st-text); }
.atlas-seg button[aria-pressed="true"] { background: var(--st-text); color: var(--st-bg2); }
.atlas-search { position: relative; display: flex; align-items: center; }
.atlas-search .icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--st-muted); pointer-events: none; }
.atlas-search input {
  width: 210px; height: 38px; padding: 0 14px 0 36px; border-radius: 999px; border: 1px solid var(--st-panel-border);
  background: var(--st-panel); color: var(--st-text); font: 500 .9rem var(--font-sans); outline: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .2s, width .25s var(--ease);
}
.atlas-search input::placeholder { color: var(--st-muted); }
.atlas-search input:focus { border-color: var(--st-line); width: 250px; }
.atlas-search ul { position: absolute; top: 44px; right: 0; width: 300px; margin: 0; padding: 6px; list-style: none; border-radius: 14px;
  background: var(--st-panel-solid); border: 1px solid var(--st-panel-border); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.atlas-search li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: .9rem; }
.atlas-search li[aria-selected="true"], .atlas-search li:hover { background: var(--st-chip-hover); }
.atlas-search li .dot { background: var(--dc); }
.atlas-search li .dot.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-muted); }
.atlas-search .q-l { font-weight: 600; color: var(--st-text); white-space: nowrap; }
.atlas-search .q-s { color: var(--st-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-search .q-none { color: var(--st-muted); cursor: default; }
.atlas-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--st-panel-border);
  background: var(--st-panel); color: var(--st-text); font: 600 .86rem var(--font-sans); cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.atlas-btn .icon { width: 17px; height: 17px; }
.atlas-btn:hover, .atlas-btn[aria-expanded="true"] { border-color: var(--st-line); }
.atlas-btn.active { background: var(--st-text); color: var(--st-bg2); }
.atlas-filters { position: absolute; top: 50px; right: 0; width: 330px; padding: 14px 16px 12px; border-radius: 16px;
  background: var(--st-panel-solid); border: 1px solid var(--st-panel-border); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.af-title { margin: 2px 0 8px; font-size: .72rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--st-muted); }
.af-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.af-row button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--st-panel-border);
  background: var(--st-chip); color: var(--st-text); font: 560 .82rem var(--font-sans); cursor: pointer; }
.af-row button .dot { background: var(--dc); }
.af-row button[aria-pressed="true"] { border-color: var(--dc, var(--st-text)); background: var(--st-chip-hover); box-shadow: inset 0 0 0 1px var(--dc, var(--st-text)); }
.af-foot { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--st-muted); padding-top: 8px; border-top: 1px solid var(--st-panel-border); }
.af-foot button { border: 0; background: none; color: var(--st-text); font: 600 .82rem var(--font-sans); cursor: pointer; padding: 4px 6px; }

/* zoom */
.atlas-zoom { position: absolute; z-index: 5; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.atlas-zoom button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--st-panel-border);
  background: var(--st-panel); color: var(--st-text); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.atlas-zoom button:hover { border-color: var(--st-line); }
.atlas-zoom .icon { width: 18px; height: 18px; }

/* tooltip */
.atlas-tip { position: absolute; z-index: 9; left: 0; top: 0; max-width: 270px; padding: 9px 12px 10px; border-radius: 12px; pointer-events: none;
  background: var(--st-panel-solid); border: 1px solid var(--st-panel-border); color: var(--st-text); font-size: .82rem; line-height: 1.4;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .65); }
.atlas-tip strong { display: block; font: 650 .98rem/1.25 var(--font-display); margin-bottom: 2px; }
.atlas-tip span { display: block; color: var(--st-text-2); }
.atlas-tip .tt-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--st-muted); }
.atlas-tip .tier-badge { height: 20px; font-size: .72rem; }

/* ─── Panel ─────────────────────────────────────────────────────────────── */
.atlas-panel {
  position: absolute; z-index: 4; top: 66px; right: 16px; bottom: 16px; width: min(410px, 38vw); display: flex; flex-direction: column;
  border-radius: 20px; background: var(--st-panel); border: 1px solid var(--st-panel-border); color: var(--st-text);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); overflow: hidden;
}
.atlas-sheet { display: none; }
.atlas-panel-body { flex: 1; overflow-y: auto; padding: 22px 22px 26px; scrollbar-width: thin; scrollbar-color: var(--st-panel-border) transparent; overscroll-behavior: contain; }
.atlas-panel-body.enter { animation: panel-in .42s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.atlas-panel h2 { color: var(--st-text); font-size: 1.75rem; margin: 0 0 4px; letter-spacing: -.025em; }
.atlas-panel h3 { margin: 24px 0 10px; font: 650 .72rem/1 var(--font-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--st-muted); display: flex; align-items: center; gap: 8px; }
.atlas-panel p { color: var(--st-text-2); font-size: .93rem; line-height: 1.6; margin: 0 0 .8em; }
.atlas-panel a { color: var(--st-text); }
.ap-head { margin-bottom: 14px; }
.ap-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--st-muted); margin-bottom: 10px; }
.ap-dom { color: var(--st-text-2); }
.ap-dom .dot, .ap-mini .dot { background: var(--dc); }
.ap-full { font-size: .98rem !important; color: var(--st-text-2) !important; margin-bottom: 12px !important; }
.ap-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ap-tiername { font-size: .86rem; color: var(--st-text-2); font-weight: 520; }
.ap-also { margin-top: 10px !important; font-size: .82rem !important; color: var(--st-muted) !important; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ap-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--st-text-2); }
.ap-count { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--st-chip-hover); color: var(--st-text); font-size: .7rem; letter-spacing: 0; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--st-panel-border);
  background: var(--st-chip); color: var(--st-text); font: 580 .84rem/1.25 var(--font-sans); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ap-chip:hover { border-color: var(--dc, var(--st-line)); background: var(--st-chip-hover); }
.ap-chip .dot { background: var(--dc); width: 9px; height: 9px; }
.ap-chip.tis, .ap-chip.hubchip { padding-left: 12px; }
.ap-chip.hubchip { border-style: dashed; }
.ap-chip.is-off { opacity: .45; }
.ap-acts, .ap-links, .ap-hl { list-style: none; margin: 0; padding: 0; }
.ap-acts li, .ap-links li { padding: 11px 0 10px; border-top: 1px solid var(--st-panel-border); }
.ap-acts li:first-child, .ap-links li:first-child { border-top: 0; padding-top: 2px; }
.ap-acts p, .ap-links p { margin: 7px 0 0 !important; font-size: .88rem !important; }
.ap-region { margin-left: 8px; font-size: .78rem; color: var(--st-muted); font-weight: 560; }
.ap-rel { display: inline-block; min-width: 92px; margin-right: 8px; font-size: .74rem; font-weight: 650; letter-spacing: .04em; color: var(--st-muted); }
.ap-bbb { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 560; color: var(--st-text-2);
  background: var(--st-chip); border: 1px dashed var(--st-line-soft); }
.ap-note { font-size: .84rem !important; color: var(--st-muted) !important; margin-top: 8px !important; }
.ap-hl li { position: relative; padding: 0 0 10px 18px; font-size: .9rem; color: var(--st-text-2); line-height: 1.55; }
.ap-hl li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--st-line); transform: rotate(45deg); }

/* mechanism of action: a vertical pathway */
.moa { list-style: none; margin: 4px 0 0; padding: 0; }
.moa li { position: relative; padding: 0 0 15px 28px; }
.moa li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--dc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc) 22%, transparent), 0 0 18px color-mix(in srgb, var(--dc) 55%, transparent); }
.moa li::after { content: ""; position: absolute; left: 9px; top: 19px; bottom: -3px; width: 1.5px;
  background: linear-gradient(var(--dc), color-mix(in srgb, var(--dc) 15%, transparent)); }
.moa li:last-child::after { display: none; }
.moa li:last-child { padding-bottom: 2px; }
.moa-k { display: block; font-size: .7rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--st-muted); margin-bottom: 2px; }
.moa-v { display: block; font-size: .92rem; line-height: 1.5; color: var(--st-text); }
.atlas-panel-body.enter .moa li::before { animation: moa-in .5s var(--ease) both; }
.atlas-panel-body.enter .moa li:nth-child(2)::before { animation-delay: .12s; }
.atlas-panel-body.enter .moa li:nth-child(3)::before { animation-delay: .24s; }
.atlas-panel-body.enter .moa li:nth-child(4)::before { animation-delay: .36s; }
@keyframes moa-in { from { transform: scale(0); } }

.ap-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--st-panel-border); display: flex; flex-direction: column; gap: 12px; }
.ap-foot .btn { align-self: flex-start; color: var(--st-text); border-color: var(--st-panel-border); }
.ap-foot .btn:hover { background: var(--st-chip-hover); }
.ap-foot .icon { fill: none; stroke: currentColor; stroke-width: 1.8; }
.ap-pn { display: flex; justify-content: space-between; gap: 8px; }
.ap-step { border: 0; background: none; color: var(--st-muted); font: 560 .84rem var(--font-sans); cursor: pointer; padding: 4px 0; }
.ap-step:hover { color: var(--st-text); }

.ap-legend { margin: 16px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--st-chip); border: 1px solid var(--st-panel-border); display: grid; gap: 8px; }
.lg-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--st-text-2); }
.lg-item .dot { background: var(--dc); }
.lg-item svg { flex: none; }
.lg-tier { fill: var(--st-text-2); }
.lg-hollow { fill: none; stroke: var(--st-text-2); stroke-width: 2; }
.lg-inv { fill: none; stroke: var(--st-text-2); stroke-width: 1.2; stroke-dasharray: 2 2; }
.ap-stories { display: grid; gap: 6px; }
.ap-story { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px 10px 14px; border-radius: 12px;
  border: 1px solid var(--st-panel-border); background: var(--st-chip); color: var(--st-text); font: 580 .9rem var(--font-sans); text-align: left; cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.ap-story:hover { background: var(--st-chip-hover); border-color: var(--st-line-soft); }
.ap-story svg { width: 14px; height: 14px; fill: none; stroke: var(--st-muted); stroke-width: 1.8; }
.ap-hint { margin-top: 18px !important; font-size: .82rem !important; color: var(--st-muted) !important; }
.ap-hint kbd { font: 600 .74rem var(--font-sans); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--st-panel-border); background: var(--st-chip); color: var(--st-text-2); }
.ap-edgekey { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.ap-edgekey li { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--st-text-2); }
.ap-edgekey svg { width: 44px; height: 12px; flex: none; }
.ek-k { fill: none; stroke: var(--st-text-2); stroke-width: 1.4; }
.ek-k.related { stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 2; }
.ek-k.proposed { stroke-dasharray: 6 4; }
.ek-k.derived { stroke-dasharray: 9 3; }
.ek-k.ext { stroke: var(--st-ext-hl); }
.lg-ext { fill: none; stroke: var(--st-ext-hl); stroke-width: 1.6; stroke-dasharray: 3 3; }
.ap-acts li.ext p, .ap-links li.ext p { color: var(--st-muted); }
.ap-acts li.ext, .ap-links li.ext { border-left: 2px dashed var(--st-ext); padding-left: 10px; }
.ap-cite { font-size: .8rem !important; color: var(--st-muted); }
.ap-cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ek-mk { fill: var(--st-text-2); }

.atlas-panel :focus-visible { outline-color: var(--st-line); }
.atlas-stage .tier-badge.inv { box-shadow: inset 0 0 0 2px var(--st-panel-solid), 0 0 0 1.5px var(--t4); }
.atlas-panel .tag-pill { background: var(--st-chip-hover); color: var(--st-text-2); }

/* ─── Text version ──────────────────────────────────────────────────────── */
.atlas-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.atlas-entry { padding: 18px 20px 14px; min-width: 0; }
.atlas-entry h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 4px; }
.atlas-entry h3 a { color: var(--text); text-decoration: none; }
.atlas-entry h3 a:hover { text-decoration: underline; }
.atlas-entry .dot { background: var(--dc); }
.atlas-entry p, .atlas-entry li { font-size: .9rem; color: var(--text-2); line-height: 1.55; }
.atlas-entry p { margin: 0 0 .5em; }
.atlas-entry strong { color: var(--text); font-weight: 600; }
.ae-meta { color: var(--muted) !important; font-size: .84rem !important; }
.ae-to { margin: 0; padding-left: 18px; }
.ae-to li.ext, .ae-ext { color: var(--muted); }

/* ─── Small screens: the panel becomes a bottom sheet ───────────────────── */
@media (max-width: 899px) {
  .atlas-stage { height: calc(100svh - 64px - 40px); min-height: 540px; }
  .atlas-down { height: 40px; }
  .atlas-bar { top: 10px; left: 10px; right: 10px; flex-wrap: wrap; gap: 8px; }
  .atlas-tools { order: -1; width: 100%; margin-left: 0; }
  .atlas-search { flex: 1; }
  .atlas-search input, .atlas-search input:focus { width: 100%; }
  .atlas-search ul { left: 0; right: auto; width: min(320px, calc(100vw - 20px)); }
  .atlas-crumbs { font-size: .82rem; padding: 5px 12px; }
  .atlas-filters { right: 0; left: 0; width: auto; top: 46px; }
  .atlas-btn span { display: none; }
  .atlas-btn { width: 38px; padding: 0; justify-content: center; }
  .atlas-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 44%; border-radius: 20px 20px 0 0; border-bottom: 0;
    transition: max-height .35s var(--ease); }
  .atlas-panel.expanded { max-height: 86%; }
  .atlas-sheet { display: block; flex: none; height: 22px; border: 0; background: transparent; cursor: pointer; position: relative; }
  .atlas-sheet::before { content: ""; position: absolute; left: 50%; top: 9px; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: var(--st-panel-border); }
  .atlas-panel-body { padding: 4px 18px 22px; }
  .atlas-panel h2 { font-size: 1.45rem; }
  .atlas-zoom { left: auto; right: 10px; bottom: auto; top: 112px; }
  .atlas-zoom button { width: 36px; height: 36px; }
  .atlas-list { grid-template-columns: 1fr; }
  .tl-name { font-size: 12.5px; }
}
@media (max-width: 599px) {
  .atlas-zoom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-stage .organ, .atlas-stage .l-body, .atlas-stage .l-back { opacity: 1; animation: none !important; }
  .atlas-stage .ek-in { transform: none; transition: none; }
  .ek.sel .ek-halo, .organ.target .organ-shape { animation: none; }
  .atlas-panel-body.enter, .atlas-panel-body.enter .moa li::before { animation: none; }
}

/* ─── Mechanism plate (third zoom level) ────────────────────────────────── */
.atlas-svg { transition: opacity .5s var(--ease); }
.moa-open .atlas-svg { opacity: .3; pointer-events: none; }
.atlas-moa { position: absolute; z-index: 7; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.atlas-moa .mp { pointer-events: auto; width: min(700px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 24px 24px; border-radius: 24px; color: var(--st-text); position: relative;
  background: radial-gradient(130% 80% at 50% 100%, color-mix(in srgb, var(--dc) 12%, transparent), transparent 70%), var(--st-panel-solid);
  border: 1px solid var(--st-panel-border); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75);
  opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .38s var(--ease), transform .45s var(--ease); scrollbar-width: thin; }
.atlas-moa.in .mp { opacity: 1; transform: none; }
.mp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mp-eyebrow { display: block; font-size: .72rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; color: var(--st-muted); margin-bottom: 4px; }
.mp-head h3 { font-size: 1.7rem; margin: 0; color: var(--st-text); letter-spacing: -.025em; }
.mp-close { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--st-panel-border);
  background: var(--st-chip); color: var(--st-text); cursor: pointer; }
.mp-close:hover { background: var(--st-chip-hover); }
.mp-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mp-zone { position: absolute; top: 10px; font-size: .68rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); }
.mp-out { position: relative; min-height: 168px; padding: 34px 0 26px; }
.mp-out .mp-zone { right: 0; }
.mp-in .mp-zone { left: 0; top: 12px; }
.mp-card { position: relative; z-index: 1; padding: 12px 15px 13px; border-radius: 14px; background: var(--st-chip); border: 1px solid var(--st-panel-border); }
.mp-card p { margin: 4px 0 0; font-size: .9rem; line-height: 1.5; color: var(--st-text); }
.mp-card .mp-src { font-size: .8rem; color: var(--st-muted); margin-top: 6px; }
.mp-k { display: block; font-size: .68rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; color: var(--st-muted); }
.mp-trigger { width: 56%; }
.mp-travel { position: absolute; inset: 0; pointer-events: none; }
.mp-mol { position: absolute; left: 66%; top: 22%; width: 16px; height: 16px; transform: translate(-50%, -50%);
  animation: mol-travel 3.6s var(--ease) infinite; z-index: 2; }
.mp-mol-name { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.mp-mol-dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--dc);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dc) 25%, transparent), 0 0 26px 4px color-mix(in srgb, var(--dc) 70%, transparent); }
.mp-mol-name { font: 650 .82rem var(--font-sans); color: var(--st-text); white-space: nowrap; }
@keyframes mol-travel {
  0% { left: 70%; top: 18%; opacity: 0; }
  10% { opacity: 1; }
  52% { left: 50%; top: calc(100% - 22px); opacity: 1; }
  64%, 100% { left: 50%; top: calc(100% - 22px); opacity: 0; }
}
.mp-membrane { position: relative; height: 40px; margin: 0 -24px; }
.mp-bilayer { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-lipid { fill: none; stroke: var(--st-line); stroke-width: 7; stroke-linecap: round; stroke-dasharray: .1 11; opacity: .65; }
.mp-glyph { position: absolute; left: 50%; top: -34px; width: 64px; height: 88px; transform: translateX(-50%); overflow: visible; z-index: 1; }
.mp-rec { fill: none; stroke: var(--dc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; animation: rec-pulse 3.6s ease-in-out infinite; }
.mp-tm { fill: color-mix(in srgb, var(--dc) 55%, var(--st-panel-solid)); stroke: var(--dc); stroke-width: 2.5; animation: rec-pulse 3.6s ease-in-out infinite; }
.mp-pocket { fill: none; stroke: var(--dc); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
@keyframes rec-pulse { 0%, 45%, 100% { filter: none; opacity: .85; } 56% { filter: drop-shadow(0 0 6px var(--dc)); opacity: 1; } }
.mp-receptor { width: calc(50% - 40px); margin: 6px 0 0 calc(50% + 32px); }
.mp-in { position: relative; padding: 40px 0 0; }
.mp-cascade { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
.mp-cascade::before { content: ""; position: absolute; left: 50%; top: -50px; height: 44px; width: 2px; margin-left: -1px;
  background: linear-gradient(transparent, var(--dc)); opacity: .8; }
.mp-cascade::after { content: ""; position: absolute; left: 50%; bottom: -26px; height: 22px; width: 2px; margin-left: -1px;
  background: linear-gradient(var(--dc), transparent); opacity: .8; }
.mp-path { padding: 8px 14px; border-radius: 11px; font: 600 .86rem/1.3 var(--font-sans); color: var(--st-text);
  background: color-mix(in srgb, var(--dc) 13%, var(--st-panel-solid)); border: 1px solid color-mix(in srgb, var(--dc) 55%, transparent);
  animation: path-on 3.6s ease-in-out infinite; animation-delay: calc(var(--j) * .14s); }
@keyframes path-on { 0%, 56%, 100% { box-shadow: none; } 68% { box-shadow: 0 0 0 1px var(--dc), 0 0 24px -4px var(--dc); } }
.mp-effect { max-width: 460px; margin: 0 auto; text-align: center; border-color: color-mix(in srgb, var(--dc) 60%, transparent);
  animation: effect-on 3.6s ease-in-out infinite; }
@keyframes effect-on { 0%, 66%, 100% { box-shadow: 0 0 0 0 transparent; } 80% { box-shadow: 0 0 0 1px var(--dc), 0 0 36px -6px var(--dc); } }
.mp.still .mp-mol { animation: none; left: 50%; top: calc(100% - 22px); }
.mk-surface .mp-mol, .mk-convert .mp-mol { animation-name: mol-surface; }
@keyframes mol-surface { 0% { left: 70%; top: 18%; opacity: 0; } 10% { opacity: 1; } 52% { left: 50%; top: calc(100% + 4px); opacity: 1; } 64%, 100% { left: 50%; top: calc(100% + 4px); opacity: 0; } }
.mp.still .mp-rec, .mp.still .mp-tm, .mp.still .mp-path, .mp.still .mp-effect { animation: none; }
.ap-zoom { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 15px 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--dc) 70%, transparent); background: color-mix(in srgb, var(--dc) 16%, transparent);
  color: var(--st-text); font: 600 .86rem var(--font-sans); transition: background-color .15s; }
.ap-zoom:hover { background: color-mix(in srgb, var(--dc) 28%, transparent); }
.ap-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 899px) {
  .atlas-moa .mp { padding: 16px 16px 18px; border-radius: 20px; }
  .mp-head h3 { font-size: 1.4rem; }
  .mp-trigger { width: 100%; }
  .mp-out { padding-bottom: 60px; }
  .mp-mol { animation-name: mol-travel-s; }
  .mp-membrane { margin: 0 -16px; }
  .mp-receptor { width: auto; margin: 32px 0 0; }
  .mp-cascade::before { top: -40px; height: 34px; }
  .mp-in { padding-top: 34px; }
}
@keyframes mol-travel-s {
  0% { left: 72%; top: 70%; opacity: 0; }
  12% { opacity: 1; }
  52% { left: 50%; top: calc(100% - 22px); opacity: 1; }
  64%, 100% { left: 50%; top: calc(100% - 22px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-moa .mp { transition: none; }
}

.atlas-panel[hidden] { display: none; }