/* LedgeX Research — interactive edition components (Newport Beach coastal investigation).
   Builds on /style.css tokens. Visual grammar: ink rules and mono labels for structure; solid = documented,
   dashed = planned / reported / unknown; blue = FEMA model; burnt orange = observed October 2026. */
.nb-page {
  --sea: #E3EBED; --model: #1F5FA8; --observed: #B4472B; --hist: #2E6A4E; --erode: #9A6412;
  --land: #F4F6F5; --tip-bg: #18282E;
}
.nb-page .article-body { max-width: 780px; }
.nb-page .article-body > p, .nb-page .article-body > ul, .nb-page .article-body > ol, .nb-page .article-body > h2,
.nb-page .article-body > blockquote { max-width: 68ch; }
.nb-update { margin-top: 12px; font-size: .76rem; color: var(--ink-soft); }
.nb-dim { color: var(--ink-soft); }
.nb-small { font-size: .84rem; }
.nb-num { font-family: var(--mono); font-size: .82rem; text-align: right; white-space: nowrap; }
.nb-nowrap { white-space: nowrap; }
.nb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb-page button { font: inherit; cursor: pointer; }
.nb-page :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- figure frame ---------- */
.nb-fig { margin: 40px 0 8px; padding: 22px 22px 18px; background: var(--sheet); border: 1px solid var(--ink); position: relative; }
.nb-fig::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; background: var(--ink); }
.nb-fig.nb-map, .nb-fig.nb-sim { box-shadow: 8px 8px 0 var(--zoning); }
.nb-fig-head { margin-bottom: 16px; }
.nb-fig-no { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nb-fig h3 { margin-top: 6px; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.nb-fig-dek { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; max-width: 68ch; }
.nb-fig figcaption { margin-top: 16px; font-size: .9rem; display: grid; gap: 8px; }
.nb-chip { display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; white-space: nowrap; vertical-align: 1px; }
.nb-chip-known { border: 1.5px solid var(--known); color: var(--known); }
.nb-chip-input { border: 1.5px solid var(--input); color: var(--input); }
.nb-chip-unknown { border: 1.5px dashed var(--unknown); color: var(--unknown); }
.nb-src { font-family: var(--mono); font-size: .74rem; padding: 0 3px; border: 1px solid var(--rule); border-radius: 2px; text-decoration: none !important; color: var(--ink); white-space: nowrap; }
.nb-src:hover { border-color: var(--ink); background: var(--zoning-wash); }
.nb-data { margin-top: 14px; }
.nb-data > summary, .nb-method > summary { cursor: pointer; font-family: var(--mono); font-size: .8rem; letter-spacing: .03em; padding: 8px 0; border-top: 1px solid var(--rule); }
.nb-data[open] > summary, .nb-method[open] > summary { margin-bottom: 10px; }
.nb-table caption { caption-side: top; }
.nb-table td { font-size: .86rem; }
.nb-table tr.nb-regional td { color: var(--ink-soft); }
.nb-table tr.nb-out td { background: #F7F9F8; }
.nb-table tr.nb-total td { font-weight: 800; border-top: 2px solid var(--ink); }
.nb-table tr.is-hl td { background: var(--zoning-wash); }
.nb-chart-scroll { overflow-x: auto; }
.nb-tip { margin-top: 8px; font-size: .86rem; padding: 8px 10px; border-left: 3px solid var(--zoning); background: #FBFBF7; }

/* ---------- map ---------- */
.nb-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nb-layers button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; font-size: .8rem; font-weight: 600; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 999px; color: var(--ink-soft); transition: border-color .15s, background .15s, color .15s; }
.nb-layers button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--zoning-wash); }
.nb-layers button .sw { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.sw-fema { background: rgba(31,95,168,.45); } .sw-orient { background: var(--ink); } .sw-works { background: var(--hist); }
.sw-erosion { background: var(--erode); } .sw-y2026 { background: var(--observed); }
.nb-map-ui { position: relative; }
.nb-map-stage { position: relative; aspect-ratio: 3 / 2; background: var(--land); border: 1px solid var(--ink); overflow: hidden; touch-action: none; }
.no-js-map .nb-map-stage, .nb-map-stage:not(.is-live) { touch-action: auto; }
.nb-map-svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.nb-map-stage.is-live .nb-map-svg { cursor: grab; }
.nb-map-stage.is-dragging .nb-map-svg { cursor: grabbing; }
.nb-map-svg path, .nb-map-svg line, .nb-map-svg circle, .nb-map-svg rect { vector-effect: non-scaling-stroke; }
.m-sea { fill: var(--sea); stroke: none; }
.m-coast { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.m-road { fill: none; stroke: #B7C2C0; stroke-width: 2; stroke-linecap: round; }
.m-river { fill: none; stroke: #7E9AA6; stroke-width: 2.4; }
.m-jetty { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.m-pier { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.m-tick { stroke: var(--ink-soft); stroke-width: 1; }
.m-lbl { font-family: var(--mono); fill: var(--ink-soft); font-size: calc(var(--u, 11) * 10px); pointer-events: none; }
.m-street { font-size: calc(var(--u, 11) * 9.5px); }
.m-place { font-family: var(--sans); font-style: italic; font-size: calc(var(--u, 11) * 12.5px); fill: #5E7076; }
.m-region { font-family: var(--sans); font-weight: 800; letter-spacing: .14em; font-size: calc(var(--u, 11) * 12px); fill: #8A999E; }
.m-pierlbl { font-weight: 600; fill: var(--ink); font-size: calc(var(--u, 11) * 10.5px); }
.m-small { font-size: calc(var(--u, 11) * 10.5px); fill: var(--ink); }
.m-attr { font-size: calc(var(--u, 11) * 8.5px); }
.m-scale { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.m-north { fill: var(--ink); }
.fz { stroke: var(--model); stroke-width: .8; stroke-opacity: .55; transition: fill-opacity .15s; }
.fz-VE { fill: var(--model); fill-opacity: .42; }
.fz-AE { fill: var(--model); fill-opacity: .25; }
.fz-AO { fill: #5B8CC4; fill-opacity: .17; stroke-dasharray: 3 2; }
.fz-A { fill: #5B8CC4; fill-opacity: .1; stroke-dasharray: 1 2; }
.is-live .fz { cursor: pointer; }
.fz:hover, .fz.is-sel { fill-opacity: .65; stroke-width: 2; stroke-opacity: 1; }
.feat .hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; }
.feat circle.hit { fill: transparent; stroke: none; pointer-events: all; }
.feat.k-pier .hit { fill: transparent; stroke: transparent; stroke-width: 14; pointer-events: all; }
.feat .vis { fill: none; stroke-width: 3.5; stroke-linecap: butt; }
.feat .cap { stroke-width: 1.5; }
.feat.st-dashed .vis { stroke-dasharray: 7 5; }
.is-live .feat { cursor: pointer; }
.feat:focus { outline: none; }
.feat:focus-visible .vis, .feat:hover .vis, .feat.is-sel .vis { stroke-width: 6; }
.feat.is-sel .lane-tag { font-weight: 700; fill: var(--ink); }
.lane-tag { font-size: calc(var(--u, 11) * 9.5px); }
.nb-map-svg.is-mid .lane-tag, .nb-map-svg.is-far .m-street, .nb-map-svg.is-far .m-attr, .nb-map-svg.is-far .m-place { display: none; }
.ly-orient .vis, .ly-orient .cap { stroke: var(--ink); }
.ly-works .vis, .ly-works .cap { stroke: var(--hist); }
.ly-works .lane-tag { fill: var(--hist); }
.ly-erosion .vis, .ly-erosion .cap { stroke: var(--erode); }
.ly-erosion circle.vis { fill: var(--sheet); stroke-width: 3; }
.ly-y2026 .vis, .ly-y2026 .cap { stroke: var(--observed); }
.ly-y2026.k-pier .vis { fill: var(--observed); stroke: var(--observed); stroke-width: 2; }
.ly-y2026 circle.vis { fill: var(--sheet); stroke-width: 3; }
.ly-y2026.st-dashed circle.vis { stroke-dasharray: 4 3; }
.ly-y2026.k-shore .vis { stroke-width: 6; }
.m-layer.is-off { display: none; }
.nb-zoom { position: absolute; left: 10px; top: 10px; display: grid; gap: 4px; }
.nb-zoom button { min-width: 36px; height: 36px; padding: 0 8px; background: var(--sheet); border: 1px solid var(--ink); font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--ink); }
.nb-zoom button[data-z="reset"] { font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.nb-zoom button:hover { background: var(--zoning-wash); }
.nb-hint { position: absolute; left: 56px; top: 10px; font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); background: rgba(255,255,255,.85); padding: 2px 6px; pointer-events: none; }
.nb-panel { position: absolute; top: 10px; right: 10px; width: min(320px, 46%); max-height: calc(100% - 20px); overflow: auto; background: var(--sheet); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--zoning); padding: 14px 16px 16px; font-size: .88rem; animation: nb-in .18s ease-out; }
.nb-panel h4 { font-size: 1rem; line-height: 1.25; margin: 4px 26px 6px 0; }
.nb-panel p { margin-top: 6px; }
.nb-panel .nb-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: none; border: 0; font-size: 1.2rem; line-height: 1; color: var(--ink-soft); }
.nb-panel .nb-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--ink-soft); display: grid; gap: 4px; }
.nb-panel .pk { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.pk-model { color: var(--model); } .pk-obs { color: var(--observed); } .pk-hist { color: var(--hist); }
@keyframes nb-in { from { opacity: 0; transform: translateY(-4px); } }
.nb-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; font-size: .8rem; }
.nb-page .article-body .nb-legend ul { list-style: none; padding: 0 !important; margin-top: 6px; display: grid; gap: 4px !important; }
.nb-legend li { display: flex; gap: 8px; align-items: center; color: var(--ink-soft); }
.lg { flex: none; width: 22px; height: 12px; display: inline-block; }
.lg-VE { background: rgba(31,95,168,.42); border: 1px solid var(--model); }
.lg-AE { background: rgba(31,95,168,.25); border: 1px solid var(--model); }
.lg-AO { background: rgba(91,140,196,.17); border: 1px dashed var(--model); }
.lg-A { background: rgba(91,140,196,.1); border: 1px dotted var(--model); }
.lg-line { height: 0; border-top: 3.5px solid var(--hist); }
.lg-dash { height: 0; border-top: 3.5px dashed var(--hist); }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--erode); background: var(--sheet); margin-inline: 5px; }
.lg-2026 { height: 0; border-top: 5px solid var(--observed); }
.lg-2026d { width: 12px; height: 12px; border-radius: 50%; border: 3px dashed var(--observed); margin-inline: 5px; }
.lg-none { color: var(--ink) !important; display: block !important; padding: 6px 8px; border: 1.5px dashed var(--observed); }
.nb-notmapped { margin-top: 14px; padding: 14px 16px; border: 2px dashed var(--unknown); }
.nb-notmapped ul { margin-top: 8px; font-size: .86rem; }

/* ---------- charts ---------- */
.nb-chart-svg { display: block; width: 100%; min-width: 600px; height: auto; font-family: var(--mono); }
.c-grid { stroke: var(--grid); stroke-width: 1; }
.c-vgrid { stroke-dasharray: 2 3; }
.c-tick { font-size: 10.5px; fill: var(--ink-soft); }
.c-scope { font-size: 9.5px; }
.c-axlbl { font-size: 10px; fill: var(--ink-soft); }
.c-ptitle { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--ink); }
.c-val { font-size: 10.5px; font-weight: 600; fill: var(--ink); }
.c-bar { transition: opacity .15s; }
.c-bar:hover, .c-bar:focus, .c-bar.is-hl { outline: none; stroke: var(--zoning); stroke-width: 3; }
.cat-dredge { fill: var(--ink); }
.cat-direct { fill: var(--hist); }
.cat-backpass { fill: var(--sheet); stroke: var(--hist); stroke-width: 2; }
.cat-offshore { fill: var(--model); }
.cat-planned { fill: var(--sheet); stroke: var(--unknown); stroke-width: 1.5; stroke-dasharray: 3 2; }
.cat-regional { fill: #9AA6AB; }
.cat-study { fill: var(--ink); }
.nb-page .article-body .c-legend { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 16px !important; font-size: .8rem; color: var(--ink-soft); margin-bottom: 8px; }
.c-legend li { display: flex; gap: 6px; align-items: center; }
.c-sw { width: 14px; height: 12px; display: inline-block; }
.c-sw.cat-dredge { background: var(--ink); } .c-sw.cat-direct { background: var(--hist); }
.c-sw.cat-backpass { border: 2px solid var(--hist); } .c-sw.cat-offshore { background: var(--model); }
.c-sw.cat-planned { border: 1.5px dashed var(--unknown); } .c-sw.cat-regional { background: #9AA6AB; }
.nb-excluded { font-size: .84rem; color: var(--ink-soft); margin-top: 10px; }
.nb-studies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nb-study { border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 12px 12px 10px; display: grid; gap: 6px; align-content: start; }
.nb-study h4 { font-size: .98rem; line-height: 1.25; }
.nb-measure { font-weight: 600; font-size: .86rem; }
.nb-study-svg { width: 100%; height: auto; font-family: var(--mono); overflow: visible; }
.c-dot { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.5; }
.c-dot:hover, .c-dot:focus { fill: var(--zoning); outline: none; }
.c-conn { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 2; }
.nb-dl { font-size: .8rem; display: grid; gap: 2px; }
.nb-dl dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.nb-findings { font-size: .8rem; padding-left: 16px !important; gap: 2px !important; }
.nb-studies-fig::after { content: "Different markets · different methods · not comparable"; display: block; margin-top: 12px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--unknown); border-top: 1.5px dashed var(--unknown); padding-top: 8px; }

/* ---------- timeline ---------- */
.tl-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.tl-controls .tl-lab { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.tl-controls .tl-gap { width: 14px; }
.tl-controls button { padding: 5px 10px; font-size: .78rem; font-weight: 600; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 999px; color: var(--ink-soft); }
.tl-controls button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--zoning-wash); }
.tl-axis { position: relative; height: 92px; margin: 6px 0 14px; border-bottom: 1px solid var(--ink); }
.tl-axis .tl-yrlbl { position: absolute; bottom: -18px; transform: translateX(-50%); font-family: var(--mono); font-size: .66rem; color: var(--ink-soft); }
.tl-axis .tl-yrtick { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--ink); }
.tl-axis .tl-lane { position: absolute; left: 0; right: 0; height: 1px; background: var(--grid); }
.tl-axis .tl-lanelbl { position: absolute; left: 0; font-family: var(--mono); font-size: .6rem; color: var(--ink-soft); transform: translateY(-110%); }
.tl-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sheet); padding: 0; transition: transform .15s, opacity .2s; }
.tl-dot:hover, .tl-dot.is-open { transform: scale(1.35); background: var(--zoning); }
.tl-dot.is-dim { opacity: .18; }
.tl-dot.seg-west { border-color: var(--hist); } .tl-dot.seg-balboa { border-color: var(--observed); }
.tl-dot.seg-regional { border-color: var(--unknown); border-style: dashed; } .tl-dot.seg-both { border-color: var(--ink); }
.nb-page .article-body .tl-segkey { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 4px 14px !important; font-size: .76rem; color: var(--ink-soft); margin-bottom: 10px; }
.tl-list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.tl-ev { position: relative; padding-left: 16px; }
.tl-ev::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--ink); }
.tl-ev.is-hidden { display: none; }
.tl-ev summary { cursor: pointer; padding: 9px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; list-style: none; }
.tl-ev summary::-webkit-details-marker { display: none; }
.tl-ev summary::after { content: "+"; font-family: var(--mono); color: var(--ink-soft); margin-left: auto; }
.tl-ev details[open] summary::after { content: "−"; }
.tl-yr { font-size: .78rem; font-weight: 600; min-width: 9.5ch; }
.tl-title { font-weight: 700; flex: 1 1 260px; }
.tl-seg { font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; white-space: nowrap; border: 1.5px solid; }
.seg-west { color: var(--hist); } .seg-balboa { color: var(--observed); } .seg-both { color: var(--ink); }
.seg-regional { color: var(--unknown); border-style: dashed; } .seg-city { color: var(--ink-soft); }
.tl-body { padding: 0 0 14px; font-size: .92rem; display: grid; gap: 8px; }
.tl-meta { font-size: .8rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nb-cat { font-size: .74rem; padding: 0 6px; background: var(--paper); border-radius: 2px; }
.tl-ev.is-flash summary { background: var(--zoning-wash); }

/* ---------- risk allocation ---------- */
.nb-principle { padding: 12px 14px; border: 2px dashed var(--unknown); font-size: .92rem; margin-bottom: 12px; }
.nb-risk-svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--sans); }
.rn rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; transition: fill .15s; }
.rn:hover rect, .rn:focus rect { fill: var(--zoning-wash); }
.rn.is-on rect { fill: var(--zoning); stroke-width: 2.5; }
.rn:focus { outline: none; }
.rn:focus-visible rect { stroke: var(--focus); stroke-width: 3; }
.rn-name { font-size: 13.5px; font-weight: 800; fill: var(--ink); }
.rn-sub { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-soft); }
.rn-chev { font-size: 22px; fill: var(--rule); }
.rf path { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; transition: stroke .15s, opacity .15s; }
.rf-discretionary path, .rf-conditional path { stroke-dasharray: 6 4; }
.rf-conditional path { stroke-dasharray: 2 4; stroke-width: 2; }
#rf-arrow path { fill: var(--ink-soft); }
.nb-risk.has-sel .rf path { opacity: .2; }
.nb-risk.has-sel .rf.is-on path { opacity: 1; stroke: var(--ink); stroke-width: 2.4; }
.nb-page .article-body .rf-key { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 4px 16px !important; font-size: .78rem; color: var(--ink-soft); margin: 8px 0 14px; }
.rf-key li, .rp-flows li { display: flex; gap: 6px; align-items: center; }
.rf-sw { flex: none; width: 26px; height: 0; border-top: 2px solid var(--ink-soft); display: inline-block; }
.rf-sw.rf-discretionary { border-top-style: dashed; } .rf-sw.rf-conditional { border-top: 2.5px dotted var(--ink-soft); }
.rp { padding: 16px 0; border-top: 1px solid var(--rule); }
.rp h4 { font-size: 1.1rem; }
.rp h4 .nb-dim { font-weight: 400; font-size: .85rem; }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 10px 0; }
.rp-grid h5 { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.rp-grid ul { font-size: .88rem; padding-left: 16px !important; gap: 4px !important; margin-top: 4px; }
.nb-page .article-body .rp-flows { list-style: none; padding: 0 !important; font-size: .84rem; gap: 4px !important; }
.nb-risk.is-live .rp { display: none; border: 1px solid var(--ink); padding: 16px 18px; border-top-width: 3px; animation: nb-in .18s ease-out; }
.nb-risk.is-live .rp.is-on { display: block; }

/* ---------- simulator ---------- */
.nb-illus { padding: 10px 12px; border: 1.5px dashed var(--unknown); background: #FAFBFA; font-size: .88rem; margin-bottom: 14px; }
.nb-sim-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink); overflow-x: auto; }
.nb-sim-tabs button { padding: 9px 14px; background: none; border: 1px solid transparent; border-bottom: 0; font-weight: 700; font-size: .88rem; color: var(--ink-soft); white-space: nowrap; margin-bottom: -1px; }
.nb-sim-tabs button[aria-selected="true"] { background: var(--sheet); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 3px 0 var(--zoning); }
.nb-sim-tabs .sc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.sc-lower { background: var(--hist); } .sc-higher { background: var(--observed); } .sc-protected { background: var(--model); }
.nb-sim-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; padding-top: 16px; }
.nb-sim-blurb { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-soft); }
.nb-inputs fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.nb-inputs legend { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 0; margin-bottom: 6px; }
.nb-in { display: grid; grid-template-columns: 1fr 104px; gap: 2px 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--grid); }
.nb-in label { font-size: .82rem; line-height: 1.25; }
.nb-in label .u { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); }
.nb-in input[type="number"] { width: 100%; font-family: var(--mono); font-size: .82rem; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 2px; text-align: right; background: var(--sheet); color: var(--ink); }
.nb-in input[type="number"]:focus { border-color: var(--ink); }
.nb-in input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--ink); height: 18px; margin: 0; }
.nb-in.is-changed label { font-weight: 700; }
.nb-in.is-changed label::after { content: " •"; color: var(--input); }
.nb-sim-reset { margin-top: 4px; padding: 6px 10px; background: var(--sheet); border: 1px solid var(--ink); font-size: .78rem; font-weight: 600; }
.nb-result { border: 1px solid var(--ink); padding: 14px 16px; background: #FBFCFB; position: sticky; top: 16px; }
.nb-result .eyebrow { margin-bottom: 4px; }
.nb-big { font-family: var(--mono); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.nb-gap { font-family: var(--mono); font-size: .86rem; margin-top: 4px; }
.nb-gap.neg { color: var(--observed); } .nb-gap.pos { color: var(--hist); }
.nb-bridge { width: 100%; height: auto; margin-top: 12px; font-family: var(--mono); display: block; }
.br-bar { transition: x .25s ease, width .25s ease; }
.br-pos { fill: var(--hist); } .br-neg { fill: var(--observed); } .br-tot { fill: var(--ink); } .br-sell { fill: #9AA6AB; }
.br-lbl { font-size: 10.5px; fill: var(--ink); } .br-val { font-size: 10.5px; fill: var(--ink-soft); }
.br-ref { stroke: var(--ink); stroke-dasharray: 3 3; stroke-width: 1; }
.nb-result-note { font-size: .78rem; color: var(--ink-soft); margin-top: 8px; }
.nb-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink); }
.nb-compare h4 { font-size: .92rem; }
.nb-compare p { font-size: .8rem; color: var(--ink-soft); }
.nb-compare svg { width: 100%; height: auto; font-family: var(--mono); display: block; margin-top: 6px; }
.cmp-bar { transition: width .25s ease; }
.cmp-lbl { font-size: 10.5px; fill: var(--ink); } .cmp-val { font-size: 10.5px; fill: var(--ink-soft); }
.sens-line { fill: none; stroke-width: 2.2; }
.sens-lower { stroke: var(--hist); fill: var(--hist); } .sens-higher { stroke: var(--observed); fill: var(--observed); } .sens-protected { stroke: var(--model); fill: var(--model); }
.sens-axis { font-size: 10px; fill: var(--ink-soft); }
.nb-years { margin-top: 14px; }
.nb-formula { padding: 12px 14px; background: #FAFBFA; border: 1px solid var(--rule); font-size: .88rem; display: grid; gap: 10px; }
.nb-formula > p:first-child { font-size: 1rem; overflow-x: auto; }
.nb-defs { padding-left: 18px; display: grid; gap: 6px; font-size: .86rem; }
.nb-sim.is-live .nb-sim-static { display: none; }
.nb-sim-fallback { margin-top: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .nb-studies { grid-template-columns: 1fr; }
  .nb-sim-body { grid-template-columns: 1fr; }
  .nb-result { position: static; order: -1; }
  .nb-compare { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nb-fig { padding: 16px 14px 14px; margin-inline: -8px; }
  .nb-fig.nb-map, .nb-fig.nb-sim { box-shadow: 5px 5px 0 var(--zoning); }
  .nb-map-stage { aspect-ratio: 5 / 4; }
  .nb-panel { position: static; width: auto; max-height: none; margin-top: 10px; box-shadow: 4px 4px 0 var(--zoning); }
  .nb-legend { grid-template-columns: 1fr; }
  .rp-grid { grid-template-columns: 1fr; }
  .nb-hint { display: none; }
  .tl-axis { height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-page *, .nb-page *::before { animation: none !important; transition: none !important; }
}

/* ---------- print ---------- */
@media print {
  .nb-layers, .nb-zoom, .nb-hint, .tl-controls, .tl-axis, .nb-sim-tabs, .nb-inputs, .nb-sim-reset, .progress, .toc, .site-header nav { display: none !important; }
  .nb-fig { box-shadow: none !important; break-inside: avoid; border: 1px solid #000; }
  .nb-map-stage { aspect-ratio: auto; height: 12cm; }
  .nb-sim.is-live .nb-sim-static { display: block; }
  .nb-sim-app { display: none !important; }
  .nb-risk.is-live .rp { display: block !important; }
  .m-layer.is-off { display: inline !important; }
  details.nb-data, details.nb-method, .tl-ev details { display: block; }
  details > summary { list-style: none; }
  .tl-ev.is-hidden { display: block !important; }
  .nb-panel { display: none !important; }
  a.nb-src::after { content: none; }
}

.nb-show { margin-top: 6px; padding: 3px 9px; font-size: .74rem; font-weight: 600; background: var(--sheet); border: 1px solid var(--ink); }
.nb-show:hover { background: var(--zoning-wash); }
.nb-page .article-body .nb-srcul { list-style: none; padding: 0 !important; margin: 4px 0 0; display: grid; gap: 4px; font-size: .78rem; }
.s-lab { font-size: 11px; fill: var(--ink); }
.s-val { font-size: 11px; font-weight: 600; fill: var(--ink); }
.s-axis { font-size: 10px; fill: var(--ink-soft); }
.nb-panel.in-stage { animation: nb-in .18s ease-out; }
#fig-map .nb-table { min-width: 880px; }
#fig-map .nb-table td:nth-child(2) { min-width: 300px; }
#fig-map .nb-table td:nth-child(5) { min-width: 150px; }

.nb-three { margin-top: 10px; display: grid; gap: 2px 0; font-size: .84rem; }
.nb-three dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
.nb-three dd { margin: 0; font-family: var(--mono); font-size: .84rem; }
.nb-three dd.neg b { color: var(--observed); }