* { box-sizing: border-box; }
:root {
  --bg: #f2f2ef;
  --panel: #ffffff;
  --line: #d7d7d2;
  --text: #181818;
  --muted: #666662;
  --soft: #ecece8;
  --soft2: #f8f8f6;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --blue: #223952;
}
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
body { padding: 12px; }
button, select, input { font: inherit; }
a { color: inherit; }
.app-shell { width: min(1540px, 100%); min-height: min(860px, calc(100vh - 24px)); margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-size: 21px; letter-spacing: .06em; }
.version { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.global-climate-indicators { display: flex; align-items: center; gap: 0; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--soft2); }
.global-climate-indicator { display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 7px 9px; white-space: nowrap; }
.global-climate-indicator + .global-climate-indicator { border-left: 1px solid var(--line); }
.global-climate-label, .global-climate-meta { color: var(--muted); font-size: 10px; line-height: 1.25; }
.global-climate-label { letter-spacing: .045em; text-transform: uppercase; }
.global-climate-indicator strong { font-size: 10px; line-height: 1.25; }
.global-climate-indicator strong small { font-size: inherit; font-weight: 600; letter-spacing: 0; }
.global-climate-info-wrap { position: relative; display: flex; align-items: center; padding: 0 9px; }
.global-climate-info-button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--muted); border-radius: 50%; background: #fff; color: var(--text); font: 700 12px/1 Georgia, serif; cursor: pointer; }
.global-climate-info-button:hover, .global-climate-info-button:focus-visible, .global-climate-info-button[aria-expanded="true"] { border-color: var(--text); background: var(--soft); }
.global-climate-info { position: absolute; z-index: 100; top: calc(100% + 10px); right: 0; width: min(430px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.16); font-size: 11px; line-height: 1.45; }
.global-climate-info p { margin: 7px 0 0; }
.global-climate-info a { color: #1c4f79; text-underline-offset: 2px; }
.global-climate-sources { padding-top: 7px; border-top: 1px solid var(--line); }
.panel-grid { position: relative; display: grid; grid-template-columns: 30fr 40fr 30fr; flex: 1; min-height: 0; }
.panel { padding: 16px; min-width: 0; overflow: auto; position: relative; }
.panel + .panel { border-left: 1px solid var(--line); }
.panel-right { position: relative; }
.mobile-ground-handle,
.mobile-panel-back { display: none; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-heading-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.effect-path-info-wrap { position: relative; display: inline-flex; align-items: center; }
.effect-path-info-wrap .inline-info-button { margin-left: 0; }
.effect-path-info { position: absolute; z-index: 105; top: calc(100% + 8px); left: -100px; width: min(380px, calc(40vw - 28px)); max-height: min(680px, calc(100vh - 90px)); overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.16); font-size: 11px; line-height: 1.45; }
.effect-path-info[hidden] { display: none; }
.effect-path-info p { margin: 7px 0 0; }
.effect-rules-list { display: grid; gap: 6px; margin-top: 10px; }
.effect-rule { border-top: 1px solid var(--line); padding-top: 6px; }
.effect-rule summary { cursor: pointer; font-weight: 700; }
.effect-rule-body { padding: 2px 0 4px; }
.effect-rule-body ul { margin: 5px 0 0; padding-left: 18px; }
.effect-rule-fields { color: var(--muted); overflow-wrap: anywhere; }
.effect-rules-meta { margin-top: 10px !important; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.organ-matrix-toggle { border: 1px solid var(--text); border-radius: 999px; background: #fff; color: var(--text); padding: 4px 8px; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.organ-matrix-toggle[aria-expanded="true"] { background: var(--text); color: #fff; }
.life-panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.life-panel-heading > .mode-chip { justify-self: end; }
.life-quick-links { display: flex; align-items: center; gap: 6px; }
.life-quick-link { position: relative; display: inline-grid; place-items: center; width: 27px; height: 27px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--text); text-decoration: none; }
.life-quick-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.life-quick-link:hover, .life-quick-link:focus-visible { border-color: var(--text); background: var(--soft2); outline: none; }
.life-quick-link::after { content: attr(data-tooltip); position: absolute; z-index: 20; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 180px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); box-shadow: 0 2px 7px rgba(0,0,0,.12); font-size: 10px; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.life-quick-link:hover::after, .life-quick-link:focus-visible::after { opacity: 1; }
.cause-chip { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 4px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.cause-chip:hover, .cause-chip:focus-visible { background: var(--soft2); color: var(--text); }
.panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: .08em; }
.panel-intro { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.mode-chip { padding: 4px 7px; border: 1px solid #888; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mode-chip.muted { opacity: .52; }
.top-card { min-height: 116px; }
.boundary-list { display: grid; gap: 7px; }
.boundary-row { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.boundary-button { width: 100%; border: 0; background: #fff; text-align: left; padding: 11px 12px; cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.boundary-button:hover, .boundary-button:focus-visible { background: var(--soft); }
.boundary-button.active { background: #e3e3df; }
.boundary-button.disabled { opacity: .42; cursor: default; }
.submenu { display: none; padding: 0 7px 7px; gap: 5px; }
.submenu.open { display: grid; }
.submenu button { --menu-hierarchy-indent: 0px; box-sizing: border-box; width: calc(100% - var(--menu-hierarchy-indent)); margin-inline-start: var(--menu-hierarchy-indent); border: 1px solid var(--line); background: var(--soft2); border-radius: 8px; padding: 8px 9px; text-align: left; cursor: pointer; line-height: 1.25; font-size: 12px; }
.submenu-arrow { display: inline-block; width: 0; height: 0; margin: 0 .42em 0 .08em; border-top: .34em solid transparent; border-bottom: .34em solid transparent; border-left: .48em solid currentColor; vertical-align: .02em; }
.contribution-role-icon { display: inline-grid; width: 2em; height: 2em; margin: -.26em .38em -.26em 0; vertical-align: middle; color: #1f2423; }
.contribution-role-icon svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contribution-role-icon .role-icon-marker { fill: #edf0ed; stroke: #869996; stroke-width: 1.7; }
.contribution-role-icon .role-icon-marker-inner { fill: #dce3df; stroke: #a7b5b1; stroke-width: 1.1; }
.contribution-role-icon .role-icon-loupe { fill: #fff; stroke: currentColor; stroke-width: 1.55; }
.contribution-role-icon .role-icon-overlay { fill: none; stroke: currentColor; stroke-width: 1.35; }
.contribution-role-icon .role-icon-heart { fill: currentColor; stroke: none; }
.contribution-role-icon.is-deepening_with_organ { color: #202728; }
.contribution-role-icon.is-deepening_without_organ { color: #3a4545; }
.contribution-role-icon.is-supplementary_context { color: #4c5b51; }
.contribution-role-icon.is-plain-loupe { width: 1.55em; height: 1.55em; margin: -.12em .5em -.12em .12em; }
.submenu button.active { background: #d7d7d2; }
.submenu button.submenu-heading { border-color: transparent; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: default; opacity: 1; }
.state-card, .time-card, .metric, .accordion, .organ-readout, .location-control { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.contribution-role-card { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #c9d5d1; border-radius: 12px; background: #f4f8f6; }
.contribution-role-card strong { display: block; margin: 3px 0 4px; font-size: 13px; }
.contribution-role-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.state-card { padding: 14px; margin-bottom: 10px; }
.share-actions { display: flex; justify-content: flex-end; margin: -3px -3px 5px 8px; float: right; }
.curve-share-actions { float: none; margin: 0 0 4px; }
.share-link-button { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); padding: 5px 9px; font-size: 10px; font-weight: 700; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.share-link-button[hidden] { display: none; }
.share-link-button:hover, .share-link-button:focus-visible { border-color: var(--text); background: var(--soft); }
.copy-link-status { min-height: 0; margin: -5px 2px 8px; color: #2f5c4e; font-size: 10px; line-height: 1.35; }
.copy-link-status:empty { display: none; }
.direct-link-notice { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #c68052; border-radius: 10px; background: #fff5ed; color: #633417; font-size: 12px; line-height: 1.4; }
.state-card h3 { margin: 4px 0 7px; font-size: 19px; }
.state-card p, .accordion p, .organ-readout p { margin: 0; line-height: 1.46; }
.eyebrow { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.time-card { padding: 10px; margin-bottom: 10px; background: var(--soft2); }
.time-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.time-head strong { display: block; margin-top: 3px; font-size: 15px; }
.time-presets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.time-preset { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 5px 8px; font-size: 10px; cursor: pointer; }
.time-preset.active { background: #222; color: #fff; border-color: #222; }
.time-preset.projection-preset.active { background: #394b5d; border-color: #394b5d; }
.scenario-controls { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.scenario-controls[hidden] { display: none; }
.scenario-controls label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.scenario-controls select { min-width: 205px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 5px 7px; font-size: 10px; }
.time-card.projection-mode { background: #f1f4f6; border-color: #aeb9c3; }
.time-card.projection-mode #timeSlider { accent-color: #394b5d; }
.projection-method-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.legacy-time-controls, .time-presets, .scenario-controls { display: none !important; }
.time-chart-wrap { height: 112px; margin-top: 2px; }
.time-card.no-time-series .time-chart-wrap,
.time-card.no-time-series .slider-wrap,
.time-card.no-time-series .time-head,
.time-card.no-time-series .scenario-controls { display: none !important; }
.top-card.time-card.no-time-series { min-height: 58px; }
.time-card.is-blc-link-only .time-head,
.time-card.is-blc-link-only .scenario-controls,
.time-card.is-blc-link-only .time-status,
.time-card.is-blc-link-only .time-chart-wrap,
.time-card.is-blc-link-only .slider-wrap { display: none !important; }
.time-card.is-blc-link-only { min-height: 0; padding: 7px 10px; }
.time-card.is-blc-link-only .curve-share-actions { margin: 0; }
.time-card.is-curve-controls-only .time-head,
.time-card.is-curve-controls-only .scenario-controls,
.time-card.is-curve-controls-only .time-status,
.time-card.is-curve-controls-only .time-chart-wrap,
.time-card.is-curve-controls-only .slider-wrap { display: none !important; }
.time-card.is-curve-controls-only { min-height: 0; padding: 7px 10px; }
.time-card.is-curve-controls-only .curve-share-actions { margin: 0; }
.time-card.is-curve-controls-only:not(:has(#copyCurveLinkButton:not([hidden]), #blcReleaseControl:not([hidden]))) { display: none; }
.unified-summary-mode .contribution-role-card,
.unified-summary-mode .metrics,
.unified-summary-mode .finding-card { display: none !important; }
.unified-summary-mode .effect-summary-card { padding: 16px; }
.unified-summary-mode .effect-summary-card #focusSummary { margin-top: 10px; font-size: 13px; line-height: 1.55; }
.core-interpretation-details { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); }
.core-interpretation-details[hidden] { display: none; }
.core-interpretation-details summary { cursor: pointer; color: var(--muted); font-size: 10px; font-weight: 700; }
.core-interpretation-details p { margin: 8px 0 0; color: var(--text); font-size: 11px; line-height: 1.48; }
.core-curve-controls { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 7px 10px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); }
.core-curve-controls[hidden] { display: none; }
.core-curve-controls > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.core-curve-controls .curve-control-group { display: contents; }
.core-curve-controls .curve-share-actions { justify-content: flex-start; margin: 0; }
.core-curve-controls .blc-release-control { grid-column: 1 / -1; margin: 0; padding-top: 7px; }
.unified-summary-mode .reset-button { display: block; width: fit-content; margin: 5px auto 0; padding: 3px 6px; border: 0; background: transparent; color: var(--muted); font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }
.blc-release-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin: 6px 0 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.blc-release-control[hidden] { display: none; }
.blc-release-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 10px; }
.blc-release-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.blc-release-track { position: relative; width: 28px; height: 16px; flex: 0 0 auto; border: 1px solid #8d9692; border-radius: 999px; background: #d9dddb; transition: .15s ease; }
.blc-release-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: .15s ease; }
.blc-release-label input:checked + .blc-release-track { border-color: #385f55; background: #385f55; }
.blc-release-label input:checked + .blc-release-track::after { transform: translateX(12px); }
.blc-release-label input:focus-visible + .blc-release-track { outline: 2px solid #385f55; outline-offset: 2px; }
.blc-release-label input:disabled + .blc-release-track { opacity: .42; }
.blc-release-label:has(input:disabled) { cursor: not-allowed; color: var(--muted); }
.blc-release-role { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.blc-release-role select { min-width: 108px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 3px 20px 3px 7px; font: inherit; font-size: 9px; color: var(--ink); }
.blc-release-role select:disabled { opacity: .65; }
.blc-release-control small { color: var(--muted); font-size: 9px; line-height: 1.3; text-align: right; }
.blc-release-control.is-approved small { color: #2f5c4e; font-weight: 700; }
.blc-release-control.is-readonly { justify-content: flex-start; }
.blc-release-control.is-readonly small { text-align: left; }
.blc-release-export { border: 1px solid var(--text); border-radius: 999px; background: #fff; color: var(--text); padding: 4px 8px; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.blc-release-export:hover { border-color: #385f55; }
.publish-process-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(242,242,239,.78); backdrop-filter: blur(4px); }
.publish-process-overlay[hidden] { display: none; }
.publish-process-dialog { width: min(520px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.publish-process-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.publish-process-head h3 { margin: 4px 0 0; font-size: 20px; }
.publish-process-summary { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.publish-process-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.publish-process-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fafaf8; }
.publish-process-steps li strong, .publish-process-steps li small { display: block; }
.publish-process-steps li strong { color: var(--text); font-size: 12px; }
.publish-process-steps li small { margin-top: 2px; font-size: 10px; line-height: 1.3; }
.publish-process-marker { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #bbb; border-radius: 50%; font-size: 10px; font-weight: 700; }
.publish-process-steps li.is-running { border-color: #4d7468; background: #eef4f1; }
.publish-process-steps li.is-running .publish-process-marker { border-color: #385f55; color: #385f55; animation: publish-pulse 1s ease-in-out infinite alternate; }
.publish-process-steps li.is-complete { border-color: #8cac9f; background: #f2f7f4; }
.publish-process-steps li.is-complete .publish-process-marker { border-color: #385f55; background: #385f55; color: #fff; }
.publish-process-steps li.is-failed { border-color: #a94a3c; background: #fff4f1; }
.publish-process-steps li.is-failed .publish-process-marker { border-color: #a94a3c; background: #a94a3c; color: #fff; }
.publish-process-error { margin: 10px 0 0; padding: 9px; border: 1px solid #d8aaa2; border-radius: 8px; background: #fff7f5; color: #7f2f25; font: 10px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.publish-process-done { width: 100%; margin-top: 12px; }
@keyframes publish-pulse { from { opacity: .45; } to { opacity: 1; } }
.knowledge-marker-contribution-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
}
.time-chart { display: block; width: 100%; height: 112px; overflow: visible; font-family: inherit; }
@media (max-width: 820px) {
  .share-link-button { min-height: 36px; padding: 7px 10px; }
  .state-card .share-actions { float: none; justify-content: flex-start; margin: 0 0 8px; }
  .effect-path-info { position: fixed; top: 58px; right: 8px; left: 8px; width: auto; }
}
.time-chart-overview { fill: none; stroke: #8a9590; stroke-width: 1.5; }
.time-chart-current-year { stroke: #4e5d58; stroke-width: 1.5; stroke-dasharray: 4 3; }
.time-chart-axis { stroke: #71807a; stroke-width: 2.2; }
.time-chart-detail-label { fill: #69736f; font-size: 12px; }
.time-chart text { font-family: inherit; }
#timeReadout { display: none !important; }
.time-chart-plot { fill: none; stroke: none; }
.time-chart-empty { fill: #f5f5f2; stroke: #d5d9d6; stroke-width: 1; }
.time-chart-empty-label, .time-chart-no-data-label { fill: #7a8581; font-size: 17px; text-anchor: middle; }
.time-chart-no-data { fill: url(#timeChartHatch); opacity: .75; }
.time-chart-grid { stroke: #e1e4e1; stroke-width: 1; }
.time-chart-axis-label { fill: #69736f; font-size: 11px; text-anchor: middle; }
.time-chart-axis-label-start { text-anchor: start; }
.time-chart-axis-label-end { text-anchor: end; }
.time-chart-value-label { fill: #59635f; font-size: 13px; text-anchor: end; dominant-baseline: middle; }
.time-chart-value-label-maximum { text-anchor: start; }
.time-chart-observed { fill: none; stroke: #1f2423; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; }
.time-chart-historical { fill: none; stroke: #687570; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; }
.time-chart-projection { fill: none; stroke: var(--projection-color); stroke-width: 2.6; stroke-dasharray: 2 5; stroke-linecap: round; stroke-linejoin: round; }
.time-chart-method-break { fill: #52615b; font-size: 14px; text-anchor: middle; dominant-baseline: middle; }
.time-chart-break-point { fill: #fff; stroke: #687570; stroke-width: 2; }
.time-chart-break-value { fill: #52615b; font-size: 8px; font-weight: 700; dominant-baseline: middle; }
.time-chart-break-value.is-historical { text-anchor: end; }
.time-chart-break-value.is-observed { text-anchor: start; }
.time-chart-projection-label { font-size: 13px; font-weight: 700; }
.time-chart-hit { fill: transparent; cursor: pointer; }
.time-chart-hit:focus { outline: none; stroke: #1f2423; stroke-width: 1.5; }
.time-chart-point { display: none; fill: #fff; stroke: #1f2423; stroke-width: 2; }
.time-chart-point.is-selected { display: block; fill: #1f2423; }
.time-chart-threshold-crossing { stroke: #26302d; stroke-width: 2; stroke-linecap: square; pointer-events: stroke; }
.time-chart-threshold-crossing.is-high-risk { stroke-width: 3.2; }
.slider-wrap { position: relative; padding: 15px 4px 22px; }
#timeSlider { width: 100%; accent-color: #222; cursor: pointer; }
#timeSlider:disabled { cursor: default; opacity: .45; }
.time-markers { position: absolute; left: 8px; right: 8px; top: 35px; height: 18px; pointer-events: none; overflow: visible; }
.time-marker { position: absolute; transform: translateX(-50%); font-size: 8px; line-height: 1; color: var(--muted); white-space: nowrap; }
.time-marker::before { content: ""; display: block; width: 1px; height: 5px; margin: -6px auto 2px; background: #777; }

/* v0.9.24 B08 – Zeitachsen lesbarer, ohne bestehende Zeitreihen anzutasten.
   Bei vielen Markierungen wird nur jede zweite Beschriftung gezeigt;
   Anfang und Ende bleiben immer sichtbar. Die Messpunkte selbst bleiben unverändert. */
.time-marker:nth-child(even):not(:last-child) { color: transparent; }
.time-marker:nth-child(even):not(:last-child)::before { background: #aaa; }
.time-marker:first-child { transform: translateX(0); text-align: left; }
.time-marker:last-child { transform: translateX(-100%); text-align: right; color: var(--muted); }
.time-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { padding: 10px; min-height: 82px; }
.metric span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.metric strong, .metric a { font-size: 13px; line-height: 1.35; }
.accordion { margin-top: 9px; overflow: hidden; }
.accordion summary { cursor: pointer; padding: 11px 12px; font-size: 12px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 17px; font-weight: 400; color: var(--muted); }
.accordion[open] summary::after { content: "−"; }
.accordion p { padding: 0 12px 12px; font-size: 12px; }
.uncertainty-box, .life-note { background: var(--soft2); }
.reset-button { margin-top: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.location-control { padding: 10px; margin-bottom: 8px; background: var(--soft2); }
.location-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.location-info-button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--muted); border-radius: 50%; background: #fff; color: var(--text); font: 700 12px/1 Georgia, serif; cursor: pointer; }
.location-info-button:hover, .location-info-button:focus-visible, .location-info-button[aria-expanded="true"] { border-color: var(--text); background: var(--soft); }

.inline-info-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; margin-left: 7px; padding: 0; border: 1px solid var(--muted); border-radius: 50%; background: #fff; color: var(--text); font: 700 12px/1 Georgia, serif; cursor: pointer; }
.inline-info-button:hover, .inline-info-button:focus-visible, .inline-info-button[aria-expanded="true"] { border-color: var(--text); background: var(--soft); }
.inline-info-note { margin: 8px 0 10px; padding: 9px 11px; border-left: 3px solid #7c8d88; background: #f2f6f4; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.global-health-reference { margin-top: 10px; border-color: #aebdb8; background: #f8fbfa; }
.global-health-reference > summary { display: flex; align-items: center; justify-content: flex-start; }
.global-health-reference > summary::after { margin-left: auto; }
.organ-contribution-item.is-global-reference { border-color: #bdcac6; }
.health-pathway-list { display: grid; gap: 10px; }
.health-pathway { container-type: inline-size; display: grid; gap: 7px; padding: 10px; border: 1px solid #d5ddda; border-radius: 10px; background: #fff; }
.health-pathway-flow { display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.health-pathway-node { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 6px 7px; border: 1px solid #d7dcda; border-radius: 7px; background: #f7f8f7; color: var(--text); font: inherit; font-size: .72rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
button.health-pathway-node { cursor: pointer; }
.health-pathway-node.is-foundation { border-color: #8fa39c; background: #eaf1ee; text-decoration: underline; text-underline-offset: 2px; }
.health-pathway-node.is-organ { border-color: #aaa; background: #eee; font-weight: 700; }
.health-pathway-arrow { align-self: center; flex: 0 0 auto; color: #65736e; font-weight: 700; }
.health-pathway-measurements { display: grid; gap: 2px; padding-top: 7px; border-top: 1px solid #e2e5e3; font-size: .74rem; }

@media (max-width: 560px) {
  .health-pathway-flow { flex-direction: column; align-items: stretch; }
  .health-pathway-arrow { transform: rotate(90deg); align-self: center; }
}

@container (max-width: 520px) {
  .health-pathway-flow { flex-direction: column; align-items: stretch; }
  .health-pathway-arrow { transform: rotate(90deg); align-self: center; }
}
.health-path-overlay { position: absolute; inset: 0 0 0 30%; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(242,242,239,.72); backdrop-filter: blur(4px); }
.health-path-overlay[hidden] { display: none; }
.health-path-dialog { width: min(1040px, 96%); max-height: calc(100% - 24px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.health-path-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.health-path-dialog-head h3 { margin: 5px 0 0; font-size: 22px; }
.health-path-dialog-intro { max-width: 850px; margin: 12px 0 16px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.health-path-dialog-list { display: grid; gap: 14px; }
.health-path-dialog-path { padding: 14px; border: 1px solid #cad4d0; border-radius: 12px; background: #fafcfb; }
.health-path-dialog-flow { display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(150px, 1.2fr) auto minmax(170px, 1.3fr) auto minmax(100px, .75fr); align-items: stretch; gap: 8px; }
.health-path-dialog-node { display: grid; place-content: center; gap: 4px; min-width: 0; min-height: 76px; padding: 10px; border: 1px solid #d4d9d7; border-radius: 9px; background: #f5f6f5; color: var(--text); text-align: center; overflow-wrap: anywhere; }
button.health-path-dialog-node { font: inherit; cursor: pointer; }
.health-path-dialog-node small { color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; }
.health-path-dialog-node strong { font-size: .86rem; line-height: 1.25; }
.health-path-dialog-node.is-foundation { border-color: #8fa39c; background: #eaf1ee; text-decoration: underline; text-underline-offset: 2px; }
.health-path-dialog-node.is-organ { border-color: #aaa; background: #ededeb; }
.health-path-dialog-arrow { align-self: center; color: #65736e; font-size: 20px; }
.health-path-dialog-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.health-path-dialog-meta a { margin-left: auto; }

@media (max-width: 1040px) and (min-width: 821px) {
  .health-path-overlay { left: 30%; padding: 12px; }
  .health-path-dialog-flow { grid-template-columns: 1fr; }
  .health-path-dialog-arrow { justify-self: center; transform: rotate(90deg); }
}
.location-control select { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.region-path { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.location-info { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--text); font-size: 11px; line-height: 1.45; }
.location-info[hidden] { display: none; }
.location-info strong { display: block; margin-bottom: 4px; }
.location-info p { margin: 0; }
.age-group-control { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.age-group-options { display: grid; grid-template-columns: .8fr 1fr 1.35fr; gap: 4px; margin-top: 5px; }
.age-group-options button { min-width: 0; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-size: 10px; cursor: pointer; }
.age-group-options button[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
#ageGroupStatus { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.age-effect-detail { margin-top: 7px !important; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); }
.bodymap-panel { position: relative; }
.life-filter-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 7px 9px; margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft2); }
.life-filter-panel .health-marker-controls, .life-filter-panel .location-control { min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.life-filter-panel .health-marker-filters { margin-top: 0; }
.life-filter-panel .location-control { display: grid; grid-template-columns: 1fr; align-content: start; }
.life-filter-panel select { box-sizing: border-box; height: 36px; padding: 6px 9px; font-size: 12px; line-height: 1.2; }
.life-filter-panel > .age-group-control { grid-column: 1 / -1; margin-top: 1px; padding-top: 7px; border-top: 1px solid var(--line); }
.marker-overlay-control { position: absolute; z-index: 8; top: 9px; right: 9px; left: 9px; display: flex; align-items: center; gap: 5px; }
.marker-overlay-control .health-marker-switch { min-width: 88px; background: rgba(34,34,32,.92); box-shadow: 0 2px 8px rgba(0,0,0,.16); backdrop-filter: blur(4px); }
.bodymap-legend-button { min-height: 28px; margin-left: auto; padding: 4px 9px; border: 1px solid rgba(0,0,0,.22); border-radius: 999px; background: rgba(255,255,255,.94); color: var(--text); font: 700 10px/1 inherit; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.bodymap-legend-button:hover, .bodymap-legend-button:focus-visible, .bodymap-legend-button[aria-expanded="true"] { border-color: var(--text); background: var(--soft); }
.marker-overlay-info { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.marker-overlay-note { position: absolute; top: 31px; left: 0; width: min(260px, calc(100vw - 70px)); padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.98); box-shadow: 0 7px 20px rgba(0,0,0,.15); font-size: 10px; line-height: 1.4; }
.marker-overlay-note[hidden] { display: none; }
.bodymap-legend-popup { position: absolute; z-index: 12; top: 45px; left: 9px; width: min(390px, calc(100% - 18px)); max-height: calc(100% - 54px); overflow: auto; box-sizing: border-box; margin: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.bodymap-legend-popup[hidden] { display: none; }
.health-marker-controls { margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.health-marker-master-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.health-marker-master-row strong, .health-marker-master-row small { display: block; }
.health-marker-master-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.health-marker-switch { display: inline-flex; align-items: center; gap: 6px; min-width: 64px; padding: 4px 8px 4px 5px; border: 1px solid var(--text); border-radius: 999px; background: var(--text); color: #fff; cursor: pointer; }
.health-marker-switch span { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.health-marker-switch b { font-size: 10px; }
.health-marker-switch[aria-checked="false"] { flex-direction: row-reverse; border-color: var(--line); background: #e5e5e1; color: var(--text); }
.health-marker-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.health-marker-filters label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.health-marker-filters select { width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-size: 11px; text-transform: none; letter-spacing: normal; }
.health-marker-filter-note { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.hotspot-layer.markers-disabled .hotspot-dot::before { background: #ecece8 !important; border-color: #fff; box-shadow: 0 0 0 2px rgba(34,57,82,.22), 0 3px 8px rgba(0,0,0,.18); }
.hotspot-layer.markers-disabled .hotspot-dot::after { display: none !important; }
.bodymap-stage { position: relative; min-height: 630px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #f7f7f5, #f1f1ed); overflow: hidden; }
.organ-matrix-panel { position: absolute; inset: 0 0 0 30%; z-index: 40; padding: 16px; background: rgba(245,245,242,.96); border-left: 1px solid var(--line); overflow: auto; }
.organ-matrix-panel[hidden] { display: none; }
.organ-matrix-card { max-width: 1120px; margin: 0 auto; }
.organ-matrix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.organ-matrix-head h2 { margin: 4px 0 6px; font-size: 23px; }
.organ-matrix-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.organ-matrix-key { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.organ-matrix-key b { color: var(--text); }
.organ-matrix-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.organ-matrix-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 12px; text-align: left; }
.organ-matrix-table th, .organ-matrix-table td { padding: 11px 12px; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.35; }
.organ-matrix-table thead th { background: var(--soft2); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.organ-matrix-table tbody tr:last-child > * { border-bottom: 0; }
.organ-matrix-organ { padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.organ-matrix-theme, .organ-matrix-status, .organ-matrix-need { display: inline-block; margin: 0 4px 4px 0; padding: 3px 6px; border-radius: 999px; background: var(--soft2); font-size: 10px; }
.organ-matrix-type { display: block; color: var(--muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.organ-matrix-system { display: block; margin-top: 2px; font-size: 11px; }
.organ-matrix-related { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.organ-matrix-more { display: block; color: var(--muted); font-size: 9px; }
.organ-matrix-status.is-empty { color: var(--muted); background: #f0f0ed; }
.bodymap-image { width: 100%; height: auto; display: block; }
.hotspot-layer { position: absolute; inset: 0; }
.hotspot-group { --hotspot-visual-size: 27px; position: absolute; transform: translate(-50%, -50%); display: block; }
.hotspot-dot { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: block; position: relative; z-index: 2; }
.hotspot-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--hotspot-visual-size); height: var(--hotspot-visual-size); box-sizing: border-box; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; background: #ecece8; box-shadow: 0 0 0 2px rgba(34,57,82,.22), 0 3px 8px rgba(0,0,0,.25); transition: transform .12s ease; }
.hotspot-dot:hover::before, .hotspot-dot:focus-visible::before { transform: translate(-50%, -50%) scale(1.06); }
.hotspot-dot:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.hotspot-dot.is-neutral::before { background: #ecece8; }
.hotspot-dot.is-selected::before { box-shadow: 0 0 0 3px rgba(34,57,82,.38), 0 5px 12px rgba(0,0,0,.28); }
.hotspot-dot.is-quantified::before { background: var(--hotspot-fill, #444); }
.hotspot-dot.is-unquantified::before { background: repeating-linear-gradient(135deg, #efefeb 0 6px, #9f9f9a 6px 12px); }
.hotspot-dot.has-foundation-link::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--hotspot-visual-size) + 10px); height: calc(var(--hotspot-visual-size) + 10px); box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid var(--text); border-radius: 50%; pointer-events: none; }
.hotspot-dot.has-foundation-link.is-age-elevated::after { width: calc(var(--hotspot-visual-size) + 14px); height: calc(var(--hotspot-visual-size) + 14px); border-width: 5px; }
.exposure-influence-scale { position: absolute; z-index: 4; top: calc(50% + var(--hotspot-visual-size) / 2 + 10px); left: 50%; transform: translateX(-50%); display: inline-flex; gap: 2px; padding: 2px 3px; border: 1px solid rgba(34,34,32,.28); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.exposure-influence-scale[hidden] { display: none !important; }
.exposure-influence-scale i { display: block; width: 6px; height: 4px; border: 1px solid var(--text); border-radius: 2px; background: transparent; }
.exposure-influence-scale i.filled { background: var(--text); }
.exposure-influence-scale.is-unassessed { border-style: dashed; }
.exposure-influence-scale.is-unassessed i { border-color: #777; background: transparent; }
.hotspot-layer.markers-disabled .exposure-influence-scale { display: none !important; }
.hotspot-label { position: absolute; left: calc(50% + var(--hotspot-visual-size) / 2 + 4px); top: 50%; transform: translateY(-50%); margin-left: 8px; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); border-radius: 999px; padding: 3px 8px; font: inherit; font-size: 12px; white-space: nowrap; line-height: 1.2; color: #222; box-shadow: 0 2px 6px rgba(0,0,0,.08); cursor: pointer; }
.hotspot-group.left .hotspot-label { left: auto; right: calc(50% + var(--hotspot-visual-size) / 2 + 4px); margin-left: 0; margin-right: 8px; }
.organ-readout { padding: 10px; background: #fff; margin-top: 9px; }
.organ-readout[hidden] { display: none !important; }
.organ-readout p { margin-top: 5px; font-size: 11px; }
.organ-overlay { position: absolute; inset: 136px 8px 58px 8px; display: grid; place-items: center; background: rgba(245,245,242,.52); backdrop-filter: blur(3px); border-radius: 16px; z-index: 20; }
.organ-overlay-card { width: min(94%, 640px); max-height: 96%; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.22); padding: 14px; }
.organ-overlay-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.organ-overlay-head h3 { margin: 4px 0 0; font-size: 20px; }
.overlay-close { border: 1px solid var(--line); background: #fff; border-radius: 999px; width: 34px; height: 34px; font-size: 24px; line-height: 1; cursor: pointer; }
.organ-overlay-content { display: grid; gap: 14px; margin-top: 12px; align-items: start; }
.organ-overlay-content.side-by-side { grid-template-columns: minmax(180px, 44%) 1fr; }
.organ-overlay-media { min-height: 180px; display: grid; place-items: center; background: var(--soft2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.organ-overlay-media img, .organ-overlay-media svg { max-width: 100%; max-height: 300px; width: auto; height: auto; display: block; }
.organ-system-block { width: 100%; display: grid; gap: 10px; }
.organ-system-visual { min-height: 180px; display: grid; place-items: center; }
.organ-system-visual img, .organ-system-visual svg { max-width: 100%; max-height: 300px; width: auto; height: auto; display: block; }
.organ-system-visual.has-system-label { position: relative; box-sizing: border-box; overflow: hidden; padding-top: 22px; }
.organ-system-visual.has-system-label::after { content: ""; position: absolute; z-index: 1; top: 20px; left: 50%; width: min(100%, 220px); height: 25px; transform: translateX(-50%); background: var(--soft2); }
.organ-system-title { position: absolute; z-index: 2; top: 3px; left: 50%; transform: translateX(-50%); margin: 0; color: var(--text); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.organ-system-svg { width: 100%; display: grid; place-items: center; }
.organ-system-legend { width: 100%; border-top: 1px solid var(--line); padding-top: 9px; }
.organ-system-legend > strong { display: block; margin-bottom: 7px; font-size: 12px; letter-spacing: .01em; }
.organ-system-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.organ-system-parts span { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; line-height: 1.2; }
.organ-overlay-text p { margin: 6px 0 0; font-size: 13px; line-height: 1.48; }
.section-gap { display: block; margin-top: 12px; }
.detail-fill { fill: #f6c9c4; stroke: #9b6e68; stroke-width: 2; }
.detail-line { fill: none; stroke: #9b6e68; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.detail-soft { fill: none; stroke: #c99d98; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1280px) { .bodymap-stage { min-height: 560px; } .hotspot-label { font-size: 11px; } }
@media (max-width: 1120px) and (min-width: 821px) { body { padding: 6px; } .app-shell { min-height: calc(100vh - 12px); border-radius: 12px; } .panel { padding: 12px; } .metrics { grid-template-columns: 1fr; } .metric { min-height: 0; } .bodymap-stage { min-height: 500px; } }
@media (max-width: 820px) {
  body { height: 100dvh; padding: 0; overflow: hidden; }
  .app-shell { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .topbar { flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 6px 8px; overflow: visible; }
  .topbar h1 { flex: 0 0 auto; font-size: 14px; line-height: 1; }
  .global-climate-indicators { flex: 1 1 auto; min-width: 0; width: auto; margin-left: 0; overflow-x: auto; overflow-y: hidden; border-radius: 999px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .global-climate-indicators::-webkit-scrollbar { display: none; }
  .global-climate-indicator { flex: 0 0 auto; padding: 4px 6px; }
  .global-climate-label, .global-climate-meta, .global-climate-indicator strong { font-size: 8px; }
  .global-climate-info-wrap { position: sticky; right: 0; flex: 0 0 auto; align-self: stretch; padding: 0 5px; background: var(--soft2); }
  .global-climate-info-button { width: 18px; height: 18px; font-size: 10px; }
  .global-climate-info { position: fixed; top: 48px; right: 8px; width: min(430px, calc(100vw - 16px)); }
  .version { display: none; }
  .panel-grid { position: relative; display: block; min-height: 0; overflow: hidden; }
  .panel-grid > .panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 12px 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    background: var(--panel);
    transition: transform .24s ease, visibility 0s linear .24s;
    will-change: transform;
  }
  .panel-grid > .panel-left { transform: translateX(-100%); }
  .panel-grid > .panel-center { transform: translateX(100%); }
  .panel-grid > .panel-right { transform: translateX(0); }
  .panel-grid[data-mobile-view="ground"] > .panel-left,
  .panel-grid[data-mobile-view="effect"] > .panel-center,
  .panel-grid[data-mobile-view="life"] > .panel-right { z-index: 2; transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .panel-grid[data-mobile-view="ground"] > .panel-center,
  .panel-grid[data-mobile-view="ground"] > .panel-right,
  .panel-grid[data-mobile-view="effect"] > .panel-left,
  .panel-grid[data-mobile-view="effect"] > .panel-right,
  .panel-grid[data-mobile-view="life"] > .panel-left,
  .panel-grid[data-mobile-view="life"] > .panel-center { visibility: hidden; pointer-events: none; }
  .mobile-ground-handle {
    position: absolute;
    z-index: 12;
    left: 0;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 6px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: #fff;
    box-shadow: 2px 3px 10px rgba(0,0,0,.14);
    color: var(--text);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .mobile-ground-handle span { font-size: 9px; font-weight: 700; letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); }
  .mobile-ground-handle b { font-size: 18px; line-height: 1; }
  .panel-grid[data-mobile-view="ground"] > .mobile-ground-handle { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--line); border-radius: 9px 0 0 9px; }
  .mobile-panel-back { display: inline-flex; margin-left: auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 10px; cursor: pointer; }
  .organ-overlay { inset: 120px 6px 52px 6px; }
  .organ-overlay-card { width: 96%; }
  .organ-overlay-content.side-by-side { grid-template-columns: 1fr; }
  .bodymap-stage { min-height: 650px; }
  .bodymap-image, .hotspot-layer { transform: translateY(16px); }
  .hotspot-group { --hotspot-visual-size: 24px; }
  .organ-matrix-panel { inset: 0; padding: 12px; }
  .organ-matrix-head h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 820px) { .panel-grid > .panel { transition: none; } }
@media (max-width: 480px) { .life-filter-panel { grid-template-columns: 1fr; } .life-filter-panel > .age-group-control { grid-column: 1; } }
@media (max-width: 480px) {
  html { font-size: 18px; }
  .metrics { grid-template-columns: 1fr; }
  .time-head { display: grid; }
  .time-presets { justify-content: flex-start; }
  .hotspot-label { font-size: .72rem; padding: .18rem .42rem; }
  .organ-system-legend > strong { font-size: .74rem; }
  .organ-system-parts span { font-size: .7rem; min-height: 30px; }
  .panel-intro, .accordion p, .organ-readout p, .time-status, .cause-entry p, .cause-hint { font-size: .72rem; }
  .boundary-button, .submenu button, .metric strong, .metric a { font-size: .78rem; }
  .eyebrow, .metric span, .mode-chip, .cause-chip, .region-path { font-size: .62rem; }
}

.cause-overlay { position: absolute; inset: 12px; background: rgba(245,245,242,.6); backdrop-filter: blur(3px); border-radius: 16px; display: grid; place-items: center; z-index: 18; }
.cause-overlay-card { width: min(94%, 520px); max-height: 94%; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.18); padding: 14px; }
.cause-overlay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cause-overlay-head h3 { margin: 4px 0 0; font-size: 20px; }
.cause-body { margin-top: 12px; display: grid; gap: 10px; }
.cause-entry { border: 1px solid var(--line); border-radius: 12px; background: var(--soft2); padding: 10px 11px; }
.cause-entry strong { display: block; font-size: 13px; margin-bottom: 4px; }
.cause-entry p { margin: 0; font-size: 12px; line-height: 1.46; }
.cause-entry .cause-meta { margin-top: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.cause-hint { color: var(--muted); font-size: 11px; line-height: 1.45; }

/* v0.8.1: hidden overlays must really stay hidden. Author display rules
   otherwise override the browser's default [hidden] behavior. */
.cause-overlay[hidden],
.organ-overlay[hidden] {
  display: none !important;
}


/* v0.9: health state belongs in the organ marker, not in the body illustration. */
.health-legend {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft2);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.health-legend-title {
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.health-legend-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.health-legend-summary { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.health-legend-title-row .inline-info-button { width: 18px; height: 18px; margin-left: 0; font-size: 11px; }
.health-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.health-legend-row + .health-legend-row { margin-top: 5px; }
.health-scale { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.health-scale span,
.legend-hatched {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #888;
  background: var(--legend-shade, #eee);
}
.legend-hatched {
  flex: 0 0 auto;
  background: repeating-linear-gradient(135deg, #efefeb 0 4px, #8f8f8a 4px 8px);
}
.legend-foundation-link { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 50%; background: #ecece8; }
.legend-foundation-link::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--text); border-radius: 50%; }
.legend-age-elevated { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 50%; background: #ecece8; }
.legend-age-elevated::after { content: ""; position: absolute; inset: -5px; border: 4px solid var(--text); border-radius: 50%; }
.health-legend .exposure-influence-scale.legend-example { position: static; transform: none; flex: 0 0 auto; box-shadow: none; }
.health-legend-method { margin-top: 8px; }
.health-legend-method p { margin: 4px 0 0; }
.health-legend strong { color: var(--text); }

@media (max-width: 820px) {
  .health-legend { font-size: .7rem; }
  .organ-overlay-card { width: min(96%, 680px); }
}

/* v0.9.2: Organfenster bleibt bewusst knapp: Bild, Befund, eingeklappte Einordnung. */
.organ-context-details {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.organ-context-details summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.organ-context-details summary::-webkit-details-marker { display: none; }
.organ-context-details summary::after {
  content: "▾";
  float: right;
  color: var(--text);
  font-size: 14px;
  transition: transform .15s ease;
}
.organ-context-details[open] summary::after { transform: rotate(180deg); }
.organ-context-details p {
  margin: 8px 0 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft2);
  font-size: 12px;
  line-height: 1.45;
}

/* Einheitliches Grundlayout der Organfenster. */
.organ-window-layout .organ-overlay-text { display: grid; gap: 8px; }
.organ-window-layout .organ-overlay-text > .eyebrow.section-gap { display: none; }
.organ-window-layout #organOverlayFinding { display: grid; gap: 7px; margin-top: 4px; }
.organ-window-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.organ-window-chip { display: inline-flex; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.organ-window-chip.is-system { background: var(--soft2); color: var(--text); }
.organ-window-related { color: var(--muted); font-size: 10px; }
.organ-window-status { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.organ-window-finding-text { font-size: 13px; line-height: 1.45; }
.organ-method-details .organ-prototype-warning { margin-bottom: 0; }


/* v0.9.4: erstes sichtbares Wissensnetz + Handlungsspielraum */
.knowledge-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #cfd8d4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdfc 0%, #f4f8f6 100%);
}
.knowledge-panel[hidden] { display: none !important; }
.knowledge-panel:has(> .knowledge-panel-collapsible) { padding: 0; overflow: hidden; }
.knowledge-panel-collapsible > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; list-style: none; cursor: pointer; color: var(--text); }
.knowledge-panel-collapsible > summary::-webkit-details-marker { display: none; }
.knowledge-panel-collapsible > summary span { font-size: 10px; font-weight: 700; letter-spacing: .045em; }
.knowledge-panel-collapsible > summary small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.knowledge-panel-collapsible > summary small::after { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); font-size: 14px; line-height: 1; }
.knowledge-panel-collapsible[open] > summary small::after { content: "−"; }
.knowledge-panel-collapsible[open] > summary { border-bottom: 1px solid #d8dfdc; }
.knowledge-panel-collapsible-content { padding: 11px 12px 12px; }
.knowledge-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.knowledge-head h3 { margin: 3px 0 2px; font-size: 17px; }
.knowledge-head p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.knowledge-status {
  flex: 0 0 auto; border: 1px solid #c7d2cd; border-radius: 999px; background: #fff;
  padding: 4px 7px; font-size: 9px; color: var(--muted);
}
.knowledge-scope-note {
  margin: 9px 0; padding: 8px 9px; border-left: 3px solid #71877c;
  background: #fff; font-size: 10px; line-height: 1.45; color: var(--muted);
}
.knowledge-boundaries { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.knowledge-boundaries span {
  border: 1px solid #d8dfdc; background: #fff; border-radius: 999px;
  padding: 4px 7px; font-size: 9px; line-height: 1.25;
}
.knowledge-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 9px; background: #fff; border: 1px solid #d8dfdc; border-radius: 11px; }
.knowledge-node { padding: 4px 7px; background: #eef3f0; border-radius: 7px; font-size: 9px; font-weight: 650; }
.knowledge-arrow { font-size: 10px; color: #77847e; }
.knowledge-details { margin-top: 8px; border-top: 1px solid #d8dfdc; padding-top: 7px; }
.knowledge-details summary { cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.knowledge-details summary::-webkit-details-marker { display: none; }
.knowledge-details summary::after { content: "▾"; float: right; }
.knowledge-details[open] summary::after { transform: rotate(180deg); }
.knowledge-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.knowledge-box { padding: 8px 9px; border: 1px solid #d8dfdc; border-radius: 10px; background: #fff; }
.knowledge-box > strong { display: block; margin-bottom: 6px; font-size: 10px; }
.knowledge-box p, .knowledge-box small { margin: 0; font-size: 9px; line-height: 1.4; }
.knowledge-box ul { margin: 0; padding-left: 15px; }
.knowledge-box li { margin: 0 0 6px; font-size: 9px; font-weight: 650; }
.knowledge-box li span { font-weight: 400; color: var(--muted); }
.evidence-chip { display: inline-block; margin: 0 4px 4px 0; padding: 3px 6px; border-radius: 999px; }
.evidence-chip.strong { background: #e6f0e9; }
.evidence-chip.moderate { background: #f4eedf; }
.knowledge-gap-list { display: grid; gap: 6px; margin-top: 8px; }
.knowledge-gap { border: 1px dashed #cbd4d0; border-radius: 9px; background: #fff; padding: 7px 8px; }
.knowledge-gap p { margin: 3px 0 0; font-size: 9px; line-height: 1.4; }
.gap-priority { font-size: 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.action-method { margin: 8px 0; font-size: 9px; color: var(--muted); line-height: 1.45; }
.action-dimensions { display: grid; gap: 7px; }
.action-row { padding: 8px 9px; border: 1px solid #d8dfdc; border-radius: 10px; background: #fff; }
.action-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.action-title strong { font-size: 10px; }
.action-title span { font-size: 9px; color: var(--muted); text-transform: uppercase; }
.action-dots { display: flex; gap: 3px; margin: 5px 0; }
.action-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #727b77; background: #fff; }
.action-dot.filled { background: #343a37; }
.action-row p { margin: 0; font-size: 9px; line-height: 1.4; color: var(--muted); }
.lever-box { margin-top: 8px; padding: 8px 9px; border-radius: 10px; background: #eef3f0; }
.lever-box > strong { font-size: 10px; }
.lever-list { display: grid; gap: 4px; margin-top: 6px; }
.lever-list span { font-size: 9px; line-height: 1.35; }
.action-warning { margin: 8px 0 0; padding: 7px 8px; background: #fff; border-left: 3px solid #343a37; font-size: 9px; line-height: 1.4; }

@media (max-width: 820px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-head h3 { font-size: 1rem; }
  .knowledge-head p, .knowledge-details summary { font-size: .72rem; }
  .knowledge-node, .knowledge-boundaries span, .knowledge-scope-note,
  .knowledge-box p, .knowledge-box small, .knowledge-box li,
  .knowledge-gap p, .action-method, .action-row p, .lever-list span, .action-warning {
    font-size: .66rem;
  }
}


/* v0.9.5 – sichtbarer Einstieg ins Wissensnetz */
.knowledge-panel-prominent {
  margin: 10px 0 12px;
  padding: 0;
  border: 1px solid #bfcac5;
  background: #f7faf8;
  overflow: hidden;
}
.knowledge-main-details > summary {
  list-style: none;
}
.knowledge-main-details > summary::-webkit-details-marker {
  display: none;
}
.knowledge-entry {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  cursor: pointer;
}
.knowledge-entry-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.knowledge-entry h3 {
  margin: 3px 0 4px;
  font-size: 16px;
  line-height: 1.2;
}
.knowledge-entry p {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}
.knowledge-open-label {
  flex: 0 0 auto;
  border: 1px solid #aebbb5;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
}
.knowledge-main-details[open] .knowledge-open-label {
  font-size: 0;
}
.knowledge-main-details[open] .knowledge-open-label::after {
  content: "Schließen";
  font-size: 9px;
}
.knowledge-preview-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}
.knowledge-preview-data > span {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid #d8dfdc;
  border-radius: 9px;
  background: #fff;
  font-size: 10px;
}
.knowledge-preview-data b {
  font-size: 9px;
}
.knowledge-preview-data small {
  color: var(--muted);
  font-size: 8px;
}
.knowledge-expanded {
  border-top: 1px solid #d8dfdc;
  padding: 10px 12px 12px;
}
.knowledge-measurements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.knowledge-measurement {
  padding: 8px 9px;
  border: 1px solid #d8dfdc;
  border-radius: 10px;
  background: #fff;
}
.knowledge-measurement strong,
.knowledge-measurement span,
.knowledge-measurement small {
  display: block;
}
.knowledge-measurement strong {
  font-size: 10px;
}
.knowledge-measurement span,
.knowledge-measurement small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}
.knowledge-measurement p {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: 700;
}
.knowledge-error {
  border-color: #ba7a7a;
  color: #7d3030;
}

@media (max-width: 820px) {
  .knowledge-entry {
    padding: 11px;
  }
  .knowledge-entry h3 {
    font-size: .9rem;
  }
  .knowledge-preview-data,
  .knowledge-measurements {
    grid-template-columns: 1fr;
  }
  .knowledge-entry p,
  .knowledge-preview-data > span,
  .knowledge-measurement p {
    font-size: .65rem;
  }
}


/* v0.9.6 – PG-Zustand zuerst, verbundene Wissenspfade danach */
.connections-panel {
  margin: 16px 0 12px;
  padding: 13px;
  border: 1px solid #cbd3cf;
  border-radius: 14px;
  background: #f5f8f6;
}
.connections-panel[hidden] { display: none !important; }

.connections-head h2 {
  margin: 3px 0 5px;
  font-size: 17px;
}
.connections-head p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.connections-boundary-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.connections-boundary-note span {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid #ccd5d1;
  border-radius: 999px;
  background: #fff;
  font-size: 9px;
}
.connections-boundary-note .boundary-origin {
  font-weight: 700;
}

.connection-list {
  display: grid;
  gap: 9px;
}
.connection-card {
  border: 1px solid #d3dad7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.connection-card.connection-error {
  padding: 10px;
}
.connection-details > summary {
  list-style: none;
}
.connection-details > summary::-webkit-details-marker {
  display: none;
}
.connection-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
}
.connection-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.connection-copy h3 {
  margin: 3px 0 4px;
  font-size: 14px;
  line-height: 1.25;
}
.connection-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.connection-details[open] .knowledge-open-label {
  font-size: 0;
}
.connection-details[open] .knowledge-open-label::after {
  content: "Schließen";
  font-size: 9px;
}
.connection-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.connection-preview > span {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid #e0e5e2;
  border-radius: 8px;
  background: #f8faf9;
  font-size: 9px;
  line-height: 1.3;
}
.connection-preview b {
  font-size: 8px;
}
.connection-preview small {
  font-size: 8px;
  color: var(--muted);
}
.connection-expanded {
  padding: 10px 11px 12px;
  border-top: 1px solid #dde3e0;
  background: #fbfcfb;
}

/* In v0.9.6 ist der Wissenspfad NICHT mehr "prominent" zwischen Titel
   und PG-Messwert. Alte Regeln werden hier neutralisiert. */
.knowledge-panel-prominent {
  margin: 0;
  padding: 0;
}

@media (max-width: 820px) {
  .connections-panel {
    padding: 10px;
    margin-top: 13px;
  }
  .connections-head h2 {
    font-size: .95rem;
  }
  .connections-head p,
  .connection-copy > p {
    font-size: .66rem;
  }
  .connection-preview,
  .knowledge-measurements {
    grid-template-columns: 1fr;
  }
  .connection-copy h3 {
    font-size: .83rem;
  }
}

/* v0.9.7 – Unterhierarchie Nährstoffkreisläufe */
.boundary-subnav{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.boundary-subnav-button{appearance:none;border:1px solid #cbd3cf;border-radius:999px;background:#fff;padding:6px 10px;font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.boundary-subnav-button.active{border-color:#7e8f87;background:#e9efec}
.shared-node-note{margin-top:9px;padding:9px 10px;border:1px dashed #bfc9c4;border-radius:10px;background:#f8faf9}
.shared-node-note strong{display:block;margin:2px 0 3px;font-size:11px}
.shared-node-note p{margin:0;color:var(--muted);font-size:9px;line-height:1.45}


/* v0.9.8 – Nährstoffkreisläufe werden selbst zur WIRKUNG-Ansicht */
.nutrient-main {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}
.nutrient-main-head {
  padding: 10px 11px;
  border: 1px solid #d5ddd9;
  border-radius: 11px;
  background: #fff;
}
.nutrient-main-head h2 {
  margin: 2px 0 4px;
  font-size: 17px;
}
.nutrient-main-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.nutrient-measurement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.nutrient-measurement-tile {
  padding: 9px 10px;
  border: 1px solid #d5ddd9;
  border-radius: 10px;
  background: #fff;
}
.nutrient-measurement-tile > span,
.nutrient-measurement-tile > small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.nutrient-measurement-tile > strong {
  display: block;
  margin: 4px 0;
  font-size: 13px;
}
.nutrient-measurement-tile > p {
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.4;
}
.nutrient-paths {
  display: grid;
  gap: 7px;
}
.nutrient-path-card {
  padding: 9px 10px;
  border: 1px solid #d5ddd9;
  border-radius: 10px;
  background: #fff;
}
.nutrient-path-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}
.nutrient-path-head strong {
  font-size: 11px;
}
.nutrient-path-head span {
  color: var(--muted);
  font-size: 9px;
}
.nutrient-path-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.path-node {
  padding: 4px 6px;
  border-radius: 7px;
  background: #eef3f0;
  font-size: 9px;
  font-weight: 650;
}
.path-arrow {
  color: #748078;
  font-size: 10px;
}
.path-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.path-crosslink {
  padding: 3px 6px;
  border: 1px solid #d2dad6;
  border-radius: 999px;
  background: #f8faf9;
  color: var(--text);
  font-size: 8px;
}
.path-crosslinks button.path-crosslink { cursor: pointer; }
.path-crosslinks button.path-crosslink:hover,
.path-crosslinks button.path-crosslink:focus-visible { border-color: #718a80; background: #eaf1ee; text-decoration: underline; text-underline-offset: 2px; }
.effect-path-row { display: block; }
.effect-path-row + .effect-path-row { margin-top: 10px; }
.effect-path-kind {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.effect-path-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.effect-path-link {
  padding: 3px 7px;
  border: 1px solid #d2dad6;
  border-radius: 999px;
  background: #f1f6f3;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.effect-path-link:hover,
.effect-path-link:focus-visible {
  border-color: #718a80;
  background: #e5efea;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nutrient-choice-note {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed #bdc8c2;
  border-radius: 10px;
  background: #fff;
}
.nutrient-choice-note strong {
  font-size: 11px;
}
.nutrient-choice-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

/* Regelbasierte Vertiefungsansicht: wenige Evidenzarten im Überblick,
   fachliche Details erst auf Anforderung. */
.deepening-overview {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  padding: 11px;
  border: 1px solid #d5ddd9;
  border-radius: 12px;
  background: #fff;
}
.deepening-overview-head {
  padding-bottom: 9px;
  border-bottom: 1px solid #d8dfdc;
}
.deepening-overview-head h2 {
  margin: 2px 0 4px;
  font-size: 17px;
}
.deepening-overview-head p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.deepening-evidence h3 {
  margin: 0 0 5px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deepening-evidence-list {
  border: 1px solid #d5ddd9;
  border-radius: 9px;
  overflow: hidden;
}
.deepening-evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  background: #fbfcfb;
}
.deepening-evidence-row + .deepening-evidence-row {
  border-top: 1px solid #d8dfdc;
}
.deepening-evidence-copy {
  min-width: 0;
}
.deepening-evidence-kind {
  display: block;
  margin-bottom: 2px;
  color: #647069;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .07em;
}
.deepening-evidence-copy > strong {
  display: block;
  font-size: 11px;
}
.deepening-evidence-copy p {
  margin: 2px 0;
  font-size: 10px;
  line-height: 1.35;
}
.deepening-evidence-copy small {
  display: block;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}
.deepening-evidence-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 150px;
}
.deepening-row-details {
  grid-column: 1 / -1;
  margin-top: 1px;
  padding-top: 6px;
  border-top: 1px solid #e1e6e3;
}
.deepening-row-details summary {
  color: #4e5d56;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}
.deepening-action {
  padding: 5px 7px;
  border: 1px solid #9aa8a1;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.deepening-action:hover,
.deepening-action:focus-visible {
  border-color: #526d61;
  background: #eef4f1;
}
.deepening-details-list {
  border-top: 1px solid #d8dfdc;
}
.deepening-details {
  margin-top: 0;
  padding: 7px 1px;
}
.deepening-details + .deepening-details {
  border-top: 1px solid #e0e5e2;
}
.deepening-details-body {
  padding: 7px 2px 2px;
  color: #2f3532;
  font-size: 9px;
  line-height: 1.48;
}
.deepening-details-body > :first-child { margin-top: 0; }
.deepening-details-body > :last-child { margin-bottom: 0; }
.deepening-path-sentence {
  padding: 7px 8px;
  border-radius: 8px;
  background: #eef3f0;
}
.deepening-limit-list {
  margin: 0;
  padding-left: 16px;
}
.deepening-limit-list li + li { margin-top: 4px; }
.deepening-source-list {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #e0e5e2;
}
.deepening-source-list p { margin: 4px 0; }
.deepening-source-list a { color: var(--text); font-weight: 650; }
.deepening-source-list span { display: block; color: var(--muted); font-size: 8px; }

/* Alte leere Standard-Messkarten bei Nährstoffkreisläufen ausblenden.
   Der Kontextkopf bleibt sichtbar; die echten Daten folgen darunter. */
body.nutrient-mode #metricValue,
body.nutrient-mode #referenceValue,
body.nutrient-mode #periodValue,
body.nutrient-mode #sourceLink {
  color: transparent;
}
body.nutrient-mode .detail-grid {
  display: none;
}
body.nutrient-mode #findingText,
body.nutrient-mode #effectPath,
body.nutrient-mode #uncertaintyValue {
  display: none;
}
body.nutrient-mode #findingText.closest,
body.nutrient-mode #effectPath.closest {
  display: none;
}

/* robustere Variante für die drei Standard-Details in der bestehenden Struktur */
body.nutrient-mode .detail-grid + details,
body.nutrient-mode .detail-grid + details + details,
body.nutrient-mode .detail-grid + details + details + details {
  display: none;
}

@media (max-width: 820px) {
  .nutrient-measurement-grid { grid-template-columns: 1fr; }
  .nutrient-main-head h2 { font-size: .95rem; }
  .nutrient-main-head p,
  .nutrient-measurement-tile > span,
  .nutrient-measurement-tile > small,
  .nutrient-measurement-tile > p,
  .nutrient-path-head span,
  .path-node {
    font-size: .66rem;
  }
  .deepening-evidence-row { grid-template-columns: 1fr; }
  .deepening-evidence-actions { justify-content: flex-start; max-width: none; }
  .deepening-overview-head h2 { font-size: .95rem; }
  .deepening-overview-head p,
  .deepening-evidence-copy p,
  .deepening-evidence-copy > strong,
  .deepening-details-body { font-size: .66rem; }
}


/* v0.9.9 – konsistenter Boundary-State */
body.nutrient-mode .time-card,
body.nutrient-mode .detail-grid,
body.nutrient-mode .detail-accordion,
body.nutrient-mode .details-block {
  display: none !important;
}

/* Falls die bestehende Struktur keine obigen Klassen hat:
   Die direkte Standard-Datengruppe nach dem Fokus-Kopf wird ausgeblendet. */
body.nutrient-mode #metricValue,
body.nutrient-mode #referenceValue,
body.nutrient-mode #periodValue,
body.nutrient-mode #sourceLink,
body.nutrient-mode #findingText,
body.nutrient-mode #effectPath,
body.nutrient-mode #uncertaintyValue {
  display: none !important;
}

/* Der Wissensnetz-Bereich wird bei Nährstoffkreisläufe zum Hauptinhalt. */
body.nutrient-mode .connections-panel {
  margin-top: 10px;
}


/* v0.9.13 – EAH-Erweiterungen: gleiche Navigationsebene, fachlich klar markiert */
.boundary-button.extension-boundary {
  position: relative;
}

.extension-intro {
  padding: 12px;
  border: 1px solid #cfd7d3;
  border-radius: 12px;
  background: #f6f9f7;
}
.extension-intro h2 {
  margin: 3px 0 5px;
  font-size: 17px;
}
.extension-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.extension-note,
.extension-status {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #dbe1de;
  font-size: 9px;
  line-height: 1.45;
}

/* v0.9.14 – ergänzende Systemgrenzen */
.boundary-section-divider {
  margin: 14px 2px 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.boundary-info-title-row { display: flex; align-items: center; gap: 6px; }
.boundary-section-divider .inline-info-button { width: 18px; height: 18px; margin-left: 0; font-size: 11px; text-transform: none; letter-spacing: normal; }
.boundary-context-info {
  position: fixed;
  z-index: 40;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--text);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  text-transform: none;
  box-shadow: var(--shadow);
  overflow: auto;
}
.boundary-context-info > strong { font-size: 12px; }
.boundary-context-info p { margin: 7px 0 0; }
.boundary-info-example { color: var(--muted); }
.boundary-row.has-boundary-info { position: relative; }
.boundary-row.has-boundary-info > .boundary-button { padding-right: 68px; }
.boundary-row.has-boundary-info > .boundary-button span:last-child { position: absolute; top: 11px; right: 12px; }
.boundary-row-info-button { position: absolute; z-index: 2; top: 10px; right: 34px; width: 19px; height: 19px; margin: 0; font-size: 11px; }
.boundary-row-context-info { margin: 0; }
@media (max-width: 820px) {
  .boundary-context-info {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    margin: 7px 0 0;
  }
  .boundary-row-context-info { margin: 0 8px 8px; }
}


/* v0.9.15 – Stoff- und Energieströme / Erdöl */
.oil-pilot h3 {
  margin: 15px 0 7px;
  font-size: 10px;
  letter-spacing: .08em;
}
.oil-lead { line-height: 1.5; }
.oil-path {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin: 10px 0 13px;
  font-size: 9px;
}
.oil-path span {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.measurement-grid {
  display: grid;
  gap: 8px;
}
.oil-measurement-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.measurement-card-label { font-size: 9px; font-weight: 700; }
.measurement-card-value { margin-top: 3px; font-size: 16px; font-weight: 700; }
.measurement-card-meta,
.measurement-definition,
.oil-derived span,
.oil-boundary-link span { color: var(--muted); font-size: 9px; }
.oil-measurement-card p,
.oil-boundary-link p,
.oil-pilot details p { font-size: 9px; line-height: 1.45; }
.oil-derived {
  margin-top: 7px;
  padding: 7px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  font-size: 9px;
}
.oil-boundary-links { display: grid; gap: 7px; }
.knowledge-series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.knowledge-series-collapsibles { display: grid; gap: 8px; }
.knowledge-series-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.knowledge-series-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  cursor: pointer;
}
.knowledge-series-details > summary span { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.knowledge-series-details > .knowledge-series-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.knowledge-series-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: #fff; }
.knowledge-series-card > p { margin: 5px 0; }
.knowledge-series-card svg { display: block; width: 100%; height: 92px; margin: 8px 0; color: #385f55; background: linear-gradient(to bottom, transparent 49%, #e3e8e5 50%, transparent 51%); }
.knowledge-series-observed,
.knowledge-series-historical,
.knowledge-series-projection { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-series-historical { stroke: #687570; stroke-width: 2.1; stroke-dasharray: 7 5; }
.knowledge-series-projection { stroke: #6f657e; stroke-width: 2.2; stroke-dasharray: 2 5; }
.knowledge-series-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 6px 0; color: var(--muted); font-size: .7rem; }
.knowledge-series-legend span::before { content: ""; display: inline-block; width: 16px; margin-right: 5px; border-top: 2px solid #385f55; vertical-align: middle; }
.knowledge-series-legend .is-historical::before { border-color: #687570; border-top-style: dashed; }
.knowledge-series-legend .is-projection::before { border-color: #6f657e; border-top-style: dotted; }
.knowledge-series-values { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; }
.knowledge-projection-card { border-style: dashed; background: #f7f9f7; }
.knowledge-projection-values { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: 0.78rem; }
.oil-boundary-link {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

/* Language preference changes display only; selections and editorial drafts stay in memory. */
.language-control { display:flex; align-items:center; gap:6px; flex:0 0 auto; font-size:11px; color:var(--muted); }
.language-control select { min-width:82px; padding:5px 6px; border:1px solid var(--line); border-radius:6px; background:var(--card, #fff); color:var(--text); font:inherit; }
@media (max-width:760px) {
  .topbar { flex-wrap:wrap; }
  .language-control { margin-left:auto; }
  .language-control-label { display:none; }
  .language-control select { min-width:76px; max-width:90px; }
}

@media (max-width:760px) { html[lang="en"] .hotspot-label { white-space:normal; max-width:82px; width:max-content; overflow-wrap:normal; text-align:center; font-size:11px; } }

@media (max-width:760px) {
  html[lang="en"] .hotspot-group:has([data-organ="brain"]) .hotspot-label { top:50%; white-space:nowrap; max-width:none; font-size:10px; }
  html[lang="en"] .hotspot-group:has([data-organ="eye"]) .hotspot-label { top:calc(50% + 4px); }
  html[lang="en"] .hotspot-group:has([data-organ="heart"]) .hotspot-label { top:calc(50% - 10px); }
  html[lang="en"] .hotspot-group:has([data-organ="bloodLymph"]) .hotspot-label { top:calc(50% + 3px); }
  html[lang="en"] .hotspot-group:has([data-organ="immune"]) .hotspot-label { top:calc(50% + 9px); }
}