.pathway { margin: 2rem 0; border: 1px solid #d7e2e8; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 36px #102d4210; }
.pathway-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem 1rem; }
.pathway-eyebrow, .detail-label { font: 600 .68rem/1.5 var(--font-primary, sans-serif); letter-spacing: .12em; color: #527381; }
.pathway .pathway-heading h3 { font: 600 1.35rem/1.4 var(--font-primary, sans-serif); color: #183d4b; margin: .35rem 0 0; }
.pathway-hint { font-size: .78rem; color: #527381; }
.pathway-controls { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.75rem 1.25rem; }
.pathway-controls button { font: 500 .8rem/1.4 var(--font-primary, sans-serif); padding: .55rem .85rem; border: 1px solid #ccdce2; border-radius: 6px; background: #fff; color: #385565; cursor: pointer; }
.pathway-controls button[aria-pressed="true"] { background: #163c4d; border-color: #163c4d; color: #fff; }
.pathway button:focus-visible, .pathway-scroll:focus-visible { outline: 3px solid #119e85; outline-offset: 3px; }
.pathway-scroll { overflow-x: auto; background: #101f31; }
.pathway-map { position: relative; width: 100%; min-width: 840px; aspect-ratio: 1000 / 580; background-image: radial-gradient(#91b1c31c 1px, transparent 1px); background-size: 20px 20px; }
.pathway-lines { position: absolute; width: 100%; height: 100%; inset: 0; }
.pathway-lines text { paint-order: stroke; stroke: #101f31; stroke-width: 5px; stroke-linejoin: round; }
.pathway-node { position: absolute; left: var(--x); top: var(--y); width: 26%; height: 15.52%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 0 14px; gap: 3px; text-align: left; font-family: var(--font-primary, sans-serif); color: #eef5fa; background: #1a3046; border: 1px solid #587087; border-radius: 9px; cursor: pointer; transition: opacity .18s, border-color .18s, background .18s; }
.pathway-node strong { font-size: clamp(14px, 1.5vw, 19px); font-weight: 600; }
.pathway-node small { font-size: 10px; line-height: 1.5; color: #c2d2e1; }
.node-kicker { font-size: 9px; letter-spacing: .08em; color: #adc3d7; }
.pathway-node.node-no { border-color: #397e79; background: #153c43; }
.pathway-node.node-no .node-kicker { color: #83e3ce; }
.pathway-node.node-risk { border-color: #94764e; background: #3c3430; }
.pathway-node.node-risk .node-kicker { color: #f4c78f; }
.pathway-node:hover, .pathway-node[aria-pressed="true"] { border-color: #fff; background: #294a60; box-shadow: 0 0 0 2px #ffffff20; }
.pathway [data-muted="true"] { opacity: .3; }
.pathway [data-muted="true"]:hover, .pathway [data-muted="true"]:focus-visible { opacity: 1; }
.pathway-key { position: absolute; bottom: 3%; left: 2.5%; right: 2.5%; display: flex; gap: 1.5rem; font: 11px/1.4 var(--font-primary, sans-serif); color: #b3c7d8; }
.key-no { color: #83e3ce; } .key-risk { color: #f4c78f; }
.pathway-detail { padding: 1.25rem 1.75rem; background: #f1f7f8; border-left: 4px solid #259984; min-height: 185px; }
.pathway .pathway-detail h4 { margin: .3rem 0 .45rem; font: 600 1.1rem/1.4 var(--font-primary, sans-serif); color: #173e4d; }
.pathway .pathway-detail p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.7; color: #3d5561; }
.pathway-detail a, .pathway figcaption a { color: #087d68; text-decoration: underline; text-underline-offset: 3px; font-size: .8rem; }
.pathway-subdiagram { overflow-x: auto; margin: 1rem 0; border: 1px solid #d0e0e5; border-radius: 8px; background: #fff; }
.pathway-subdiagram:empty { display: none; }
.pathway-subdiagram:focus-visible { outline: 3px solid #119e85; outline-offset: 3px; }
/* Compact mechanism rows keep supporting detail readable without large boxes. */
.detail-route { padding: .65rem .85rem; border-bottom: 1px solid #e0e9ec; }
.detail-route:last-child { border-bottom: 0; }
.pathway .detail-route h5 { font: 600 .65rem/1.4 var(--font-primary, sans-serif); letter-spacing: .05em; margin: 0 0 .25rem; color: #527381; }
.detail-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .8rem; line-height: 1.6; }
.detail-stop { color: #244652; font-weight: 500; }
.detail-connection { color: #617985; font-size: .72rem; }
.detail-route.risk { border-left: 3px solid #d2ad78; }
.detail-route.drug { border-left: 3px solid #a4afce; }
.chem-start { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid #d0e0e5; background: #edf4f6; }
.chem-start span, .chem-reaction > span { font-size: .73rem; color: #536b77; }
.chem-start strong, .chem-reaction strong { font-family: 'Cambria Math', Cambria, serif; font-size: 1.02rem; font-weight: 600; color: #173e4d; }
.chem-start small, .chem-reaction small { font-size: .73rem; line-height: 1.5; color: #536b77; }
.chem-branches { display: grid; grid-template-columns: 1fr 1fr; }
.chem-branch { padding: .8rem 1rem; border-top: 3px solid #259984; min-width: 0; }
.chem-branch.chem-risk { border-top-color: #cfaa76; border-left: 1px solid #d0e0e5; }
.pathway .chem-branch h5 { font: 600 .85rem/1.4 var(--font-primary, sans-serif); margin: 0 0 .5rem; color: #244652; }
.chem-reaction { display: flex; flex-direction: column; gap: .3rem; padding: .5rem 0; }
.chem-reaction + .chem-reaction { border-top: 1px solid #e0e9ec; }
.pathway .chem-note { font-size: .72rem; margin: 0; padding: .6rem 1rem; border-top: 1px solid #e0e9ec; }
.chem-reference { display: inline-block; margin: 0 1rem .7rem; }
@media (max-width: 700px) { .chem-branches { grid-template-columns: 1fr; } .chem-branch.chem-risk { border-left: 0; } .chem-reaction strong { font-size: .95rem; } }
.pathway figcaption { padding: 1rem 1.75rem; font-size: .78rem; line-height: 1.65; color: #536874; }
.pathway-scroll-hint { display: none; }
@media (max-width: 900px) { .pathway-hint { display: none; } .pathway .pathway-scroll-hint { display: block; font-size: .75rem; padding: 0 1rem .7rem; margin: 0; color: #536874; } }
@media (max-width: 600px) { .pathway-heading, .pathway-detail, .pathway figcaption { padding: 1rem; } .pathway-controls { padding: 0 1rem 1rem; } .pathway .pathway-heading h3 { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .pathway-node { transition: none; } }
@media print { .pathway-scroll { overflow: visible; } .pathway-map { min-width: 0; } .pathway-controls, .pathway-scroll-hint { display: none !important; } .pathway [data-muted="true"] { opacity: 1; } }