/* Shared diagram mechanics, with Rooibostees' existing forest-and-paper palette. */
.af-tools{--ground:var(--paper);--text:var(--ink);--ground-light:#fafbf5;--ground-deep:#e2e6d9;--ink-soft:var(--muted);--ink-faint:var(--muted);--rule:var(--line);--oxidised:#7b2d16;--oxidised-deep:#5a1f0f;--on-oxidised:#fff;--fynbos:#3d5a2f;--fynbos-light:#8aa271;--flower:#e3b531;--flower-deep:#b88a12;--heap:#231510;--on-heap:#ead9c8;--on-heap-soft:#c9b39e;--focus:#7b2d16;--sans:system-ui,sans-serif;--display:Alegreya,Georgia,serif;--measure:70ch;--s1:.25rem;--s2:.5rem;--s3:1rem;--s4:1.5rem;--s5:2rem;--s6:3rem;--s7:4.5rem;--s8:7rem;min-width:0}
/* ---------- explorers: coherent line vocabulary ---------- */
.explorer { margin: var(--s7) 0; }
.explorer h2 { margin-top: 0; }
.explorer-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: var(--measure); }
.explorer-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
.explorer-layout-process { grid-template-columns: minmax(0, 1fr); }
.explorer-stage { width: 100%; height: auto; display: block; background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); }
.explorer-stage path, .explorer-stage circle, .explorer-stage ellipse, .explorer-stage rect, .explorer-stage line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.explorer-stage text { fill: var(--ink); font-size: 14px; stroke: none; }
.explorer-stage .stage-frame { fill: transparent; stroke: var(--rule); }
.explorer-stage .stage-number { font-family: var(--display); font-size: 22px; fill: var(--oxidised); }
.explorer-stage .stage-title { font-weight: 700; font-size: 16px; }
.explorer-stage .stage-when, .explorer-stage .stage-when-inline { font-size: 12px; fill: var(--ink-faint); }
.explorer-stage .ground { stroke: var(--ink-faint); }
.explorer-stage .sand, .explorer-stage .rain, .explorer-stage .air, .explorer-stage .heat, .explorer-stage .vapour, .explorer-stage .steam, .explorer-stage .rays { stroke: var(--ink-faint); }
.explorer-stage .root, .explorer-stage .cover, .explorer-stage .shoot { stroke: var(--fynbos); }
.explorer-stage .leaf { stroke: var(--fynbos); }
.explorer-stage .flower { fill: var(--flower); stroke: var(--flower-deep); stroke-width: 1; }
.explorer-stage .seed { fill: var(--oxidised); stroke: none; }
.explorer-stage .pod { fill: var(--ground-deep); }
.explorer-stage .heap { fill: var(--oxidised); stroke: var(--oxidised-deep); }
.explorer-stage .spread { stroke: var(--oxidised); stroke-width: 3; }
.explorer-stage .sun, .explorer-stage .moon { fill: var(--flower); stroke: var(--flower-deep); }
.explorer-stage .grain { fill: var(--oxidised); stroke: none; }
.explorer-stage .label { fill: var(--on-oxidised); stroke: var(--ink); }
.explorer-stage .tick { stroke: var(--fynbos); stroke-width: 2.2; }
.explorer-stage .loop { stroke: var(--oxidised); stroke-dasharray: 4 4; }
.explorer-stage .loop-head { stroke: var(--oxidised); }
.explorer-stage .connector { stroke: var(--ink-faint); stroke-dasharray: 3 5; }
.explorer-stage .connector-return { stroke: var(--oxidised); stroke-dasharray: none; }
.explorer-stage .connector-head { stroke: var(--oxidised); }
.explorer-stage .connector-red { stroke: var(--oxidised); }
.explorer-stage .connector-green { stroke: var(--fynbos); }
.explorer-stage .branch-label { font-family: var(--display); font-size: 18px; font-weight: 600; }
.explorer-stage .branch-label-red { fill: var(--oxidised); }
.explorer-stage .branch-label-green { fill: var(--fynbos); }
.explorer-stage .stage-disc { fill: var(--ground); }
.explorer-stage .branch-red .stage-disc { stroke: var(--oxidised); }
.explorer-stage .branch-green .stage-disc { stroke: var(--fynbos); }
.explorer-stage .stage-figure { cursor: pointer; }
.explorer-stage .stage-figure:hover .stage-frame { stroke: var(--ink); }
.explorer-stage .stage-figure.is-selected .stage-frame { stroke: var(--oxidised); stroke-width: 3; fill: var(--ground); }
.explorer-stage .stage-figure.is-selected .stage-title { fill: var(--oxidised); }
.explorer-stage .stage-figure:focus-visible { outline: none; }
.explorer-stage .stage-figure:focus-visible .stage-frame { stroke: var(--focus); stroke-width: 4; }
.explorer-panel { font-family: var(--sans); }
.explorer-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.explorer-controls button { font: inherit; font-size: 0.92rem; font-weight: 500; padding: var(--s2) var(--s3); border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); }
.explorer-controls button:hover { border-color: var(--oxidised); color: var(--oxidised); }
.explorer-controls button[aria-pressed="true"] { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.explorer-controls button[data-branch="green"] { border-color: var(--fynbos); }
.explorer-controls button[data-branch="green"][aria-pressed="true"] { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }
.control-number { font-family: var(--display); font-size: 1.05rem; }
.control-branch { font-size: 0.75rem; opacity: 0.8; }
.stage-detail { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4); font-family: var(--text); }
.stage-detail h3 { margin: 0 0 var(--s2); }
.stage-when-inline { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--ink-faint); display: block; }
.stage-detail p { margin-bottom: var(--s2); }
.stage-more { color: var(--ink-soft); }
html:not(.js) .stage-detail[hidden] { display: block; }
html:not(.js) .explorer-controls { display: none; }
.explorer-text { font-family: var(--sans); font-size: 0.92rem; margin-top: var(--s3); }
.explorer-order { font-family: var(--text); font-size: 1rem; margin-top: var(--s2); }

/* ---------- supply chain: lenses, roles, stages ---------- */
.explorer-chain .explorer-lede { max-width: var(--measure); }
.chain-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); font-family: var(--sans); }
.chain-controls button { font: inherit; font-size: 0.92rem; font-weight: 500; padding: var(--s2) var(--s3); border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); }
.chain-controls button:hover { border-color: var(--oxidised); color: var(--oxidised); }
.chain-controls button[aria-pressed="true"] { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.chain-lenses button { font-weight: 700; }
.chain-roles button[aria-pressed="true"] { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }
.chain-stages { margin-top: 0; }
.chain-stages button[data-branch="green"] { border-color: var(--fynbos); }
.chain-stages button[data-branch="green"][aria-pressed="true"] { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }
.chain-sheet .connector-bulk { stroke: var(--ink-soft); stroke-dasharray: none; }
.chain-sheet .connector-packed { stroke: var(--flower-deep); stroke-dasharray: none; }
.chain-sheet .branch-label-bulk { fill: var(--ink-soft); }
.chain-sheet .branch-label-packed { fill: var(--flower-deep); }
.chain-sheet .chain-edge-note { font-size: 12px; fill: var(--flower-deep); font-style: italic; }
.chain-sheet .connector-packed-return { stroke-dasharray: 6 5; }
.chain-sheet .connector-packed-head { stroke: var(--flower-deep); }
/* wide drawings: a contained, focusable pane that scrolls sideways only at narrow widths; captions and tables stay outside it */
.diagram-pane { max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 6px; }
.diagram-pane > svg { display: block; width: 100%; height: auto; }
.diagram-pane:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pane-hint { display: none; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin: var(--s1) 0 var(--s2); }
.explorer-layout > .diagram-pane { min-width: 0; }
.explorer-layout > .pane-hint { margin-top: calc(-1 * var(--s3)); }
.chain-sheet .chain-node { cursor: pointer; text-decoration: none; }
.chain-sheet .chain-node .stage-number { font-size: 14px; }
.chain-sheet .chain-node .stage-title { font-size: 14px; }
.chain-sheet .branch-bulk .stage-disc, .chain-sheet .branch-packed .stage-disc, .chain-sheet .branch-destination .stage-disc { stroke: var(--ink-soft); }
.chain-sheet .branch-packed .stage-disc { stroke: var(--flower-deep); }
.chain-sheet .chain-node.is-dimmed { opacity: 0.3; }
.chain-sheet .chain-node:focus-visible { outline: none; }
.chain-sheet .chain-node:focus-visible .stage-frame { stroke: var(--focus); stroke-width: 4; }
.chain-sheet .water { stroke: #5b86a8; }
.chain-sheet .cup, .chain-sheet .bag { fill: var(--ground-deep); }
.chain-stage h3 .control-number { color: var(--oxidised); margin-right: var(--s1); }
.stage-facts { margin: var(--s3) 0 0; }
.stage-facts div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--s2) var(--s3); border-top: 1px solid var(--rule); padding: var(--s2) 0; }
.stage-facts dt { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.stage-facts dd { margin: 0; font-size: 0.98rem; }
.stage-chapter { font-family: var(--sans); font-weight: 700; margin: var(--s3) 0 0; }
.role-detail { background: var(--ground-deep); border: 1px solid var(--fynbos); border-radius: 6px; padding: var(--s4); margin-bottom: var(--s3); font-family: var(--text); }
.role-detail h3 { margin: 0 0 var(--s2); }
.role-stages-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: var(--s1); }
.role-stages { margin-bottom: var(--s2); }
.role-list li { margin-bottom: var(--s3); }
html:not(.js) .chain-controls { display: none; }
html:not(.js) .chain-stage[hidden], html:not(.js) .role-detail[hidden], html:not(.js) .dest-year[hidden] { display: block; }
html:not(.js) .chain-role-details { margin-top: var(--s4); }

/* ---------- diagrams: the same line vocabulary as the explorers ---------- */
.diagram { margin: var(--s4) 0 var(--s5); max-width: none; }
.diagram svg { width: 100%; height: auto; display: block; background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); }
.diagram path, .diagram circle, .diagram ellipse, .diagram rect, .diagram line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.diagram text { fill: var(--ink); font-size: 14px; stroke: none; }
.diagram .label { font-size: 13px; font-weight: 500; }
.diagram .note { font-size: 12px; fill: var(--ink-faint); font-style: italic; }
.diagram .tick { font-size: 12px; fill: var(--ink-faint); }
.diagram .panel-title { font-family: var(--display); font-size: 17px; font-weight: 600; fill: var(--oxidised); }
.diagram .panel { stroke: var(--rule); }
.diagram .soft, .diagram .sand, .diagram .rain, .diagram .air, .diagram .heat, .diagram .vapour, .diagram .steam, .diagram .rays, .diagram .mesh { stroke: var(--ink-faint); }
.diagram .dotted { stroke-dasharray: 2 4; }
.diagram .dashed { stroke-dasharray: 5 4; }
.diagram .arrow { stroke: var(--ink-soft); }
.diagram .green, .diagram .root { stroke: var(--fynbos); }
.diagram .water, .diagram .arrow.water, .diagram .arrow.air { stroke: #5b86a8; }
.diagram .arrow.wind { stroke: var(--ink-soft); stroke-width: 2.4; }
.diagram .flower { fill: var(--flower); stroke: var(--flower-deep); stroke-width: 1; }
.diagram .seed, .diagram .grain { fill: var(--oxidised); stroke: none; }
.diagram .pod, .diagram .tray, .diagram .cup, .diagram .bag { fill: var(--ground-deep); }
.diagram .coat { fill: var(--ground-deep); stroke-width: 4; }
.diagram .coat-inner { stroke: var(--ink-faint); }
.diagram .ground-fill { fill: var(--ground-light); stroke: var(--ground-light); stroke-width: 5; }
.diagram .nick { stroke: var(--oxidised); stroke-width: 2.4; }
.diagram .embryo { fill: var(--fynbos-light); stroke: var(--fynbos); }
.diagram .soil { fill: var(--ground-deep); stroke: var(--ink-faint); }
.diagram .shade { fill: var(--ground-deep); stroke: none; }
.diagram .bar { fill: var(--fynbos-light); stroke: var(--fynbos); }
.diagram .red-line { stroke: var(--oxidised); stroke-width: 2.4; }
.diagram .cover { fill: #dfe5c4; stroke: var(--fynbos); stroke-dasharray: 3 3; }
.diagram .loop { stroke: var(--oxidised); stroke-dasharray: 4 4; }
.diagram .loop-head { stroke: var(--oxidised); }
.diagram .blade { stroke: var(--ink); stroke-width: 2.4; }
.diagram .cell { stroke-width: 2.4; }
.diagram .vacuole { fill: var(--ground-deep); stroke: var(--ink-faint); stroke-dasharray: 4 3; }
.diagram .compound { fill: var(--flower); stroke: var(--flower-deep); stroke-width: 1; }
.diagram .enzyme { fill: var(--oxidised); stroke: var(--oxidised-deep); }
.diagram .scheme { fill: var(--ground); stroke: var(--rule); }
.diagram .sun { fill: var(--flower); stroke: var(--flower-deep); }
.diagram .layer { fill: var(--oxidised); fill-opacity: 0.18; stroke: var(--oxidised-deep); }
.diagram .sieve { stroke-width: 2; }
.diagram .band { fill: var(--oxidised); fill-opacity: 0.35; stroke: var(--oxidised); }
.diagram .overlap { fill: var(--flower); fill-opacity: 0.25; stroke: none; }
.diagram .box, .diagram .flask { fill: var(--ground-deep); }
.diagram .magnet { stroke: var(--oxidised); stroke-width: 2.4; }
.diagram .mark { fill: var(--oxidised); stroke: var(--oxidised-deep); }
.diagram .green-mark { fill: var(--fynbos); stroke: var(--fynbos); }
.diagram .label { stroke: none; }
.diagram path.label { fill: var(--on-oxidised); stroke: var(--ink); }
.diagram .tick { stroke: none; }
.diagram path.tick { stroke: var(--fynbos); stroke-width: 2.2; fill: none; }
.diagram figcaption { max-width: var(--measure); }

/* ---------- destinations chart ---------- */
.destinations { margin: var(--s6) 0; }
.destinations h2 { margin-top: 0; }
.dest-year h3 { margin-top: var(--s3); }
.dest-figure { margin: var(--s3) 0 var(--s4); }
.dest-chart { width: 100%; height: auto; display: block; background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); }
.dest-chart .grat { stroke: #c5cbba; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.dest-chart .equator { stroke: var(--ink-faint); stroke-dasharray: 4 4; }
.dest-chart .grat-label { fill: var(--ink-faint); font-size: 10px; }
.dest-chart .dest-arc { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.dest-chart .dest-disc { fill: var(--oxidised); fill-opacity: 0.55; stroke: var(--oxidised-deep); stroke-width: 1.2; }
.dest-chart .dest-approx { stroke-dasharray: 4 3; fill-opacity: 0.3; }
.dest-chart .dest-point { fill: var(--ground-light); stroke: var(--ink); stroke-width: 1.5; }
.dest-chart .dest-label { fill: var(--ink); font-size: 13px; font-weight: 500; paint-order: stroke; stroke: var(--ground-light); stroke-width: 3px; stroke-linejoin: round; }
.dest-chart .dest-note { fill: var(--ink-faint); font-size: 11px; font-style: italic; }
.dest-chart .dest-leader { fill: none; stroke: var(--ink-soft); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.dest-chart .dest-origin circle { fill: var(--fynbos); stroke: var(--ground-light); stroke-width: 1.5; }
.dest-chart .dest-europe { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.dest-chart .dest-inset { fill: var(--ground); stroke: var(--ink-soft); stroke-width: 1; }
.dest-chart .dest-legend text { fill: var(--ink-faint); }
.destinations table { width: 100%; max-width: var(--measure); margin: var(--s3) 0; }
.destinations caption { font-family: var(--sans); font-size: 0.85rem; text-align: left; color: var(--ink-soft); padding-bottom: var(--s2); }
.destinations td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dest-total, .dest-caveat { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); }

/* ---------- directory ---------- */
.role-guide h3 { margin-top: var(--s4); }
.directory { margin: var(--s6) 0; }
.directory h2 { margin-top: 0; }
.player-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s4); }
.player { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4); margin: 0; }
.player h3 { margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.player-place { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--ink-faint); }
.player-roles { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.role-tag { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; color: var(--fynbos); border: 1px solid var(--fynbos); border-radius: 999px; padding: 0.1rem 0.6rem; }
.player-claim { font-size: 0.98rem; }
.player-limits { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); }
.player-sources { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin-top: var(--s2); }
.player-sources summary { color: var(--ink-soft); }
.player-basis { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin: var(--s1) 0 0; }
.directory-note { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); margin-top: var(--s4); }

/* ---------- atlas ---------- */
.atlas { margin: var(--s7) 0; }
.atlas h2 { margin-top: 0; }
.atlas-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
.atlas-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); font-family: var(--sans); }
.atlas-filters, .atlas-zoom { display: flex; flex-wrap: wrap; gap: var(--s1); }
.atlas-controls button { font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.3rem 0.7rem; border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); cursor: pointer; }
.atlas-controls button[aria-pressed="true"] { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.atlas-zoom button { min-width: 2.2rem; }
html:not(.js) .atlas-controls { display: none; }
.atlas-map { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 6px; background: var(--ground-light); font-family: var(--sans); cursor: grab; touch-action: none; }
.atlas-map:active { cursor: grabbing; }
.atlas-map .sea { fill: #d9e3e4; stroke: none; }
.atlas-map .atlas-view { transform-origin: 0 0; }
.atlas-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-map .coast { stroke: var(--ink); stroke-width: 1.3; }
.atlas-map .layer-coast path { fill: none; }
.atlas-map .province { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 6 4; }
.atlas-map .road { stroke: #b8ad9c; stroke-width: 0.8; }
.atlas-map .road-major { stroke: #9c8f7c; stroke-width: 1.3; }
.atlas-map .river { stroke: #5b86a8; stroke-width: 1; }
.atlas-map .river-label { fill: #3f6482; font-size: 11px; font-style: italic; }
.atlas-map .grat { stroke: #c5cbba; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.atlas-map .grat-label { fill: var(--ink-faint); font-size: 10px; }
.atlas-map .scalebar line { stroke: var(--ink); stroke-width: 1.5; }
.atlas-map .scalebar text { fill: var(--ink); font-size: 11px; }
.atlas-map .north { fill: var(--ink); font-size: 14px; font-weight: 700; }
.atlas-map .north-arrow { stroke: var(--ink); stroke-width: 1.5; }
.atlas-map .place { cursor: pointer; }
.atlas-map .place .mark { fill: var(--oxidised); stroke: var(--ground-light); stroke-width: 1.5; }
.atlas-map .place-region .mark-region { fill: var(--fynbos-light); fill-opacity: 0.25; stroke: var(--fynbos); stroke-dasharray: 3 3; }
.atlas-map .place-reserve .mark { fill: var(--fynbos); }
.atlas-map .place-river .mark { fill: none; stroke: #5b86a8; stroke-width: 2; }
.atlas-map .place-label { fill: var(--ink); font-size: 12.5px; font-weight: 500; paint-order: stroke; stroke: var(--ground-light); stroke-width: 3px; stroke-linejoin: round; }
.atlas-map .place-region .place-label { font-style: italic; fill: var(--fynbos); }
.atlas-map .place:hover .place-label, .atlas-map .place.is-selected .place-label { fill: var(--oxidised); font-weight: 700; }
.atlas-map .place.is-selected .mark { stroke: var(--oxidised); stroke-width: 3; }
.atlas-map .place.is-dimmed { opacity: 0.25; }
.atlas-map .place:focus-visible { outline: none; }
.atlas-map .place:focus-visible .mark { stroke: var(--focus); stroke-width: 4; }
.atlas-attribution { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin: var(--s2) 0; }
.atlas-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }
.atlas-legend li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.legend-mark { width: 0.8rem; height: 0.8rem; display: inline-block; background: var(--oxidised); border-radius: 50%; }
.legend-region .legend-mark { background: var(--fynbos-light); border: 1px dashed var(--fynbos); border-radius: 50%; }
.legend-reserve .legend-mark { background: var(--fynbos); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.legend-landmark .legend-mark { transform: rotate(45deg); border-radius: 0; }
.legend-river .legend-mark { background: #5b86a8; height: 0.25rem; border-radius: 2px; width: 1.2rem; }
.atlas-detail { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4); margin-bottom: var(--s4); min-height: 6rem; }
.atlas-detail h3 { margin: 0 0 var(--s1); }
.atlas-detail-empty { font-family: var(--sans); color: var(--ink-faint); margin: 0; }
html:not(.js) .atlas-detail { display: none; }
.atlas-list { list-style: none; padding: 0; margin: 0; max-height: 44rem; overflow: auto; border-top: 1px solid var(--rule); }
.atlas-list li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.atlas-list li.is-selected { background: var(--ground-light); }
.atlas-list h3 { margin: 0 0 var(--s1); font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.place-link { font: inherit; font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--oxidised); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 0.16em; }
.place-kind { font-family: var(--sans); font-size: 0.8rem; font-weight: 400; color: var(--ink-faint); }
.atlas-list p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---------- market: the dark heap field ---------- */
.af-tools .chart { background: var(--heap); color: var(--on-heap); border-radius: 6px; padding: var(--s4); margin: var(--s4) 0 var(--s5); }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.chart .grid { stroke: #4a3a30; stroke-width: 0.6; }
.chart .axis { stroke: var(--on-heap-soft); stroke-width: 1; }
.chart .tick, .chart .unit { fill: var(--on-heap-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .unit { font-size: 12px; font-style: italic; }
.chart .series { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-price { stroke: #f0a35c; }
.chart .series-fob { stroke: var(--on-heap); }
.chart .series-stock { stroke: #f0a35c; }
.chart .series-crop { stroke: #9fc78b; }
.chart .series-use { stroke: var(--on-heap); }
.chart .series-share { stroke: #f0a35c; }
.chart .series-label { font-size: 12px; font-weight: 700; }
.chart .series-label.series-price, .chart .series-label.series-stock, .chart .series-label.series-share { fill: #f0a35c; }
.chart .series-label.series-fob, .chart .series-label.series-use { fill: var(--on-heap); }
.chart .series-label.series-crop { fill: #9fc78b; }
.chart .series-model { stroke-dasharray: 6 5; stroke-width: 2; }
.chart .series-model-0 { stroke: #f0a35c; }
.chart .series-model-1 { stroke: #9fc78b; }
.chart .series-model-2 { stroke: #d9c7b6; }
.chart .series-label.series-model-0 { fill: #f0a35c; }
.chart .series-label.series-model-1 { fill: #9fc78b; }
.chart .series-label.series-model-2 { fill: #d9c7b6; }
.chart .bar { fill: #f0a35c; }
.chart .bar-label { fill: var(--on-heap); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart figcaption { color: var(--on-heap-soft); margin-top: var(--s3); }
.chart figcaption strong { color: var(--on-heap); }
.chart-data { margin-top: var(--s2); font-family: var(--sans); font-size: 0.85rem; color: var(--on-heap-soft); }
.chart-data summary { color: var(--on-heap); }
.chart-data table { margin-top: var(--s2); color: var(--on-heap); }
.chart-data th, .chart-data td { border-color: #4a3a30; }
.chart-yield { max-width: 40rem; }
.model { border: 2px dashed var(--oxidised); border-radius: 8px; padding: var(--s4) var(--s4) var(--s2); margin: var(--s6) 0; background: var(--ground-light); }
.model h2 { margin-top: 0; }
.explorer-loop .explorer-stage { background: var(--heap); border-color: var(--heap); }
.explorer-loop .explorer-stage text { fill: var(--on-heap); }
.explorer-loop .loop-arc { stroke: var(--on-heap-soft); stroke-width: 2; fill: none; }
.explorer-loop .loop-arc-lag { stroke: #f0a35c; stroke-width: 4; stroke-dasharray: 2 8; }
.explorer-loop marker path { fill: var(--on-heap-soft); stroke: none; }
.explorer-loop .loop-lag-label { fill: #f0a35c; font-size: 14px; font-style: italic; }
.explorer-loop .loop-disc { fill: #3b2419; stroke: var(--on-heap-soft); stroke-width: 1.5; }
.explorer-loop .loop-title { font-size: 15px; font-weight: 700; }
.explorer-loop .loop-centre { font-family: var(--display); font-size: 26px; fill: var(--on-heap); }
.explorer-loop .loop-node { cursor: pointer; }
.explorer-loop .loop-node:hover .loop-disc, .explorer-loop .loop-node.is-selected .loop-disc { fill: #f0a35c; stroke: #f0a35c; }
.explorer-loop .loop-node.is-selected .loop-title, .explorer-loop .loop-node:hover .loop-title { fill: var(--heap); }
.explorer-loop .loop-node:focus-visible { outline: none; }
.explorer-loop .loop-node:focus-visible .loop-disc { stroke: var(--flower); stroke-width: 4; }


.af-tools .explorer-layout,.af-tools .atlas-layout{grid-template-columns:minmax(0,1fr)}
.af-tools svg{max-width:100%;height:auto}.af-tools button{font:inherit;white-space:normal}
.af-tools .stage-facts div{grid-template-columns:minmax(0,1fr)}
.af-tools .player-list{grid-template-columns:minmax(0,1fr)}
.af-tools .chart-data{overflow-x:auto}.af-tools table{font-variant-numeric:tabular-nums}
.af-tools .diagram-pane{overflow-x:auto;max-width:100%}
.af-tools [hidden]{display:none!important}
@media(max-width:640px){.af-tools .diagram-pane>svg{width:auto}.af-tools .diagram-pane.pane-m>svg{min-width:44rem}.af-tools .diagram-pane.pane-l>svg{min-width:52rem}.af-tools .diagram-pane.pane-xl>svg{min-width:60rem}.af-tools .chain-controls button{flex:1 1 7rem}.af-tools .pane-hint{display:block}}
@media print{.af-tools [hidden]{display:block!important}.af-tools .atlas-controls,.af-tools .chain-controls,.af-tools .explorer-controls{display:none}}

.af-chart-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font:1rem/1.5 var(--sans);color:var(--on-heap)}.af-chart-legend li{display:flex;gap:.6rem;align-items:center;margin:0}.af-tools .af-chart-legend svg{display:inline-block;width:36px;height:12px;flex-shrink:0}

#fig-role-matrix text.label{font-size:10px}#fig-role-matrix .note{font-size:11px}

.af-tools .diagram .panel-title{font-size:15px}.af-tools .explorer-loop .loop-centre{font-size:20px}