/* The shared-city exhibit: original diagrams, one signal colour, no motion. */
.city-panel{--accent:#FFD400;background:#fff;color:#000;border:3px solid #000;margin:64px 0;scroll-margin-top:24px;min-width:0}
.city-panel [hidden]{display:none!important}
.city-header{display:grid;grid-template-columns:110px minmax(0,1fr);border-bottom:3px solid #000}
.city-index{display:grid;place-items:start center;background:#FFD400;border-right:3px solid #000;padding:30px 10px;font:84px/1 var(--display)}
.city-header>div{padding:30px 34px}
.city-kicker{display:block;font:750 11px/1.5 var(--body);letter-spacing:1.4px}
.city-header h2{font:400 clamp(40px,5vw,68px)/1.05 var(--display);letter-spacing:0;text-transform:uppercase;margin:16px 0 20px}
.city-header p{font:17px/1.65 var(--body);margin:0;max-width:800px}
.city-caution{margin:0;padding:20px 30px;font:14px/1.7 var(--body);color:#333;border-bottom:3px solid #000}
.city-workbench{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,2fr);border-bottom:3px solid #000}
.city-control-panel{padding:28px;min-width:0}
.city-control-panel h3{font:750 12px/1.5 var(--body);text-transform:uppercase;letter-spacing:1px;margin:0 0 22px}
.city-control-panel>label{display:block;font:650 15px/1.5 var(--body);margin:21px 0 9px}
.city-control-panel select{width:100%;max-width:100%;min-height:46px;border:2px solid #000;border-radius:0;background:#fff;color:#000;padding:10px;font:16px/1.4 var(--body)}
.city-control-note{font:12px/1.65 var(--body);color:#444;margin:11px 0}
.city-hour-readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:9px 0}
.city-hour-readout output{font:68px/1 var(--display)}
.city-hour-readout span{font:16px var(--body);color:#444}
.city-panel input[type=range]{width:100%;height:44px;min-height:44px;padding:0;margin:0;accent-color:#000;background:transparent;cursor:pointer}
.city-range-ends{display:flex;justify-content:space-between;font:12px var(--body);color:#444}
.city-control-panel .city-restore-control{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:22px;cursor:pointer}
.city-restore-control input{width:22px;height:22px;flex-shrink:0;accent-color:#000;cursor:pointer}
.city-restore-control:has(input:disabled){color:#666;cursor:default}
.city-panel button{min-height:44px;min-width:44px;border:2px solid #000;border-radius:0;padding:11px 15px;background:#000;color:#FFD400;font:650 12px/1.45 var(--body);cursor:pointer}
.city-panel button:disabled{cursor:default;opacity:.5}
.city-panel button:not(:disabled):hover{background:#FFD400;color:#000}
.city-panel .city-reset{background:#fff;color:#000;margin-top:12px;width:100%}
.city-map{margin:0;min-width:0;max-height:none;background:#000;color:#fff;padding:24px 20px;border-left:3px solid #000;color-scheme:dark}
.city-map>figcaption{font:650 12px/1.5 var(--body);border-bottom:1px solid #666;padding-bottom:16px}
.city-diagram-scroll{overflow:auto;overscroll-behavior:contain;scroll-padding:12px;margin:18px 0}
.city-diagram{display:block;width:100%;min-width:720px;height:auto;background:#000;color:#fff;font-family:var(--body)}
.city-diagram text{fill:#fff}
.city-link{fill:none;stroke:#FFD400;stroke-width:3}
.city-link.interrupted{stroke-dasharray:9 7}
.city-link.drainage{stroke:#fff;stroke-width:2;stroke-dasharray:4 5}
.city-arrow{fill:none;stroke:#FFD400;stroke-width:3}
.city-node>rect:first-child{fill:#000;stroke:#fff;stroke-width:2}
.city-node--interrupted>rect:first-child{stroke:#FFD400;stroke-width:3;stroke-dasharray:8 5}
.city-node--check>rect:first-child,.city-node--recovery>rect:first-child{stroke:#FFD400;stroke-width:3}
.city-node .city-node-number{fill:#FFD400}
.city-node .city-node-number-text{font:22px var(--display);fill:#000}
.city-node-title{font-size:20px;font-weight:700}
.city-node-state{font:23px var(--display)}
.city-node--buffered .city-node-state,.city-node--interrupted .city-node-state,.city-node--check .city-node-state,.city-node--recovery .city-node-state{fill:#FFD400}
.city-node-detail{font-size:14px;fill:#ccc!important}
.city-edge-title{font-size:13px;font-weight:700;letter-spacing:.6px}
.city-edge-note{font-size:15px;fill:#ccc!important}
.city-map-caption{font-size:15px;font-weight:750;letter-spacing:.7px}
.city-map>p{font:12px/1.7 var(--body);color:#ccc;border-top:1px solid #666;padding-top:16px;margin:0 0 17px}
.city-panel .city-expand{background:#000;color:#fff;border-color:#fff}
.city-observation{padding:30px}
.city-summary{font:400 31px/1.2 var(--display);letter-spacing:0;margin:18px 0 28px;max-width:1000px}
.city-sector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:3px solid #000;border-left:3px solid #000}
.city-sector{padding:25px;border-right:3px solid #000;border-bottom:3px solid #000;min-width:0}
.city-sector-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:25px}
.city-sector-index{font:31px/1 var(--display);background:#FFD400;padding:5px 8px}
.city-sector h3{font:400 29px/1.1 var(--display);text-transform:uppercase;letter-spacing:0;margin:0;overflow-wrap:anywhere}
.city-sector-status{display:inline-block;background:#000;color:#fff;padding:6px 9px;font:650 11px/1.4 var(--body)}
.city-sector--buffered .city-sector-status,.city-sector--check .city-sector-status,.city-sector--recovery .city-sector-status{color:#000;background:#FFD400}
.city-sector--interrupted .city-sector-status{outline:2px dashed #000;outline-offset:3px}
.city-sector h4{font:750 11px/1.4 var(--body);text-transform:uppercase;letter-spacing:1px;margin:20px 0 8px}
.city-sector p{font:15px/1.75 var(--body);margin:0;color:#333}
.city-connections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:3px solid #000}
.city-connections>section{padding:30px;min-width:0}
.city-connections>section+section{border-left:3px solid #000}
.city-panel .city-connections h3,.city-compare h3,.city-assumptions h3{font:400 31px/1.1 var(--display);text-transform:uppercase;letter-spacing:0;margin:0 0 22px}
.city-link-list,.city-timeline{list-style:none;padding:0;margin:0}
.city-link-list li{padding:16px 0;border-top:1px solid #000}
.city-link-list strong{display:block;font:750 14px/1.4 var(--body)}
.city-link-list span{display:block;font:14px/1.7 var(--body);color:#444;margin-top:7px}
.city-timeline-note{font:13px/1.65 var(--body);color:#444;margin:0 0 22px}
.city-timeline li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid #000}
.city-time-mark{font:27px/1.2 var(--display);padding:5px 6px;background:#fff;color:#000;align-self:start;border:2px solid #000;text-align:center}
.city-timeline .is-reached .city-time-mark{background:#FFD400}
.city-timeline strong{font:700 14px/1.4 var(--body)}
.city-timeline p{font:13px/1.65 var(--body);color:#444;margin:7px 0 0}
.city-compare{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr);gap:28px;border-top:3px solid #000;padding:30px}
.city-compare>div{min-width:0}
.city-compare h3{margin:15px 0 24px}
.city-compare p{font:14px/1.7 var(--body);color:#444}
.city-comparison-scroll,.city-rules-scroll{overflow:auto;overscroll-behavior:contain;scroll-padding:12px}
.city-panel table{width:100%;border-collapse:collapse;font:13px/1.6 var(--body);min-width:370px;text-align:left}
.city-panel caption{font:12px/1.7 var(--body);text-align:left;padding-bottom:12px;color:#444}
.city-panel th,.city-panel td{padding:11px 12px;border:1px solid #000;vertical-align:top}
.city-panel thead{background:#000;color:#fff}
.city-panel tbody th{font-weight:650}
.city-assumptions{border-top:3px solid #000}
.city-assumptions>summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 30px;background:#FFD400;color:#000;min-height:56px;font:750 14px/1.5 var(--body);cursor:pointer;list-style:none}
.city-assumptions>summary::-webkit-details-marker{display:none}
.city-assumptions>summary span{font:550 12px/1.5 var(--body);text-align:right}
.city-assumptions[open]>summary{border-bottom:3px solid #000}
.city-assumptions>div{padding:30px}
.city-assumptions h3{margin-top:32px}
.city-assumptions h3:first-child{margin-top:0}
.city-assumptions p,.city-assumptions li{font:14px/1.8 var(--body);color:#333;max-width:1000px}
.city-assumptions .city-equation{border-left:6px solid #FFD400;padding:14px 17px;font:650 15px/1.7 var(--body);overflow-wrap:anywhere}
.city-source-list{padding-left:20px}
.city-source-list li{margin:9px 0}
.city-source-list a{overflow-wrap:anywhere}
.city-no-script{padding:22px 30px;border-top:2px solid #000;font:14px/1.7 var(--body);margin:0}
.city-panel :is(button,input,select,summary,[tabindex]):focus-visible{outline:3px solid #000;outline-offset:4px}
.city-map :is(button,[tabindex]):focus-visible{outline-color:#FFD400}
.city-diagram-scroll:focus-visible,.city-comparison-scroll:focus-visible,.city-rules-scroll:focus-visible{outline-offset:-3px!important}
html:has(.city-dialog[open]){overflow:hidden}
.city-dialog{padding:0;margin:auto;border:3px solid #FFD400;border-radius:0;background:#000;color:#fff;width:min(1160px,calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));max-height:calc(100vh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;color-scheme:dark}
.city-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.city-dialog::backdrop{background:#000d}
.city-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#FFD400;color:#000;padding:17px 22px}
.city-dialog h3{font:400 28px/1.1 var(--display);margin:0;letter-spacing:0;text-transform:uppercase}
.city-dialog button{flex-shrink:0;background:#000;color:#fff}
.city-dialog button:focus-visible{outline-color:#000}
.city-dialog-canvas{padding:16px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.city-dialog-canvas:focus-visible{outline-color:#FFD400;outline-offset:-4px}
.city-dialog-canvas .city-diagram{min-width:900px}
.city-dialog>p{font:12px/1.6 var(--body);color:#ccc;margin:0;padding:15px 22px;border-top:1px solid #666}
@media(max-width:1000px){.city-workbench{grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr)}.city-control-panel{padding:25px 20px}.city-map{padding:23px 14px}.city-sector{padding:23px}.city-sector h3{font-size:26px}}
@media(max-width:760px){.city-workbench{grid-template-columns:minmax(0,1fr)}.city-map{border-left:0;border-top:3px solid #000}.city-control-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;padding:26px}.city-control-panel h3{grid-column:1/-1}.city-control-panel>label,.city-control-panel>select,.city-control-panel>#city-profile-note{grid-column:1}.city-control-panel>label[for=city-hours]{grid-column:2;grid-row:2}.city-hour-readout{grid-column:2;grid-row:3}.city-control-panel>input[type=range]{grid-column:2;grid-row:4}.city-range-ends{grid-column:2;grid-row:5}.city-control-panel .city-restore-control{grid-column:2;grid-row:6}.city-control-panel>#city-restore-note{grid-column:2;grid-row:7}.city-control-panel>.city-reset{grid-column:1;align-self:start}.city-header{grid-template-columns:85px minmax(0,1fr)}.city-index{font-size:65px}.city-header>div{padding:25px}.city-sector-grid{grid-template-columns:minmax(0,1fr)}.city-connections{grid-template-columns:minmax(0,1fr)}.city-connections>section+section{border-left:0;border-top:3px solid #000}.city-compare{grid-template-columns:minmax(0,1fr)}.city-compare button{width:auto}}
@media(max-width:540px){.city-panel{margin:44px 0;border-width:2px}.city-header{grid-template-columns:58px minmax(0,1fr);border-bottom-width:2px}.city-index{font-size:43px;padding:23px 5px;border-right-width:2px}.city-header>div{padding:23px 17px}.city-kicker{font-size:9px;letter-spacing:1px}.city-header h2{font-size:37px;margin:15px 0}.city-header p{font-size:15px}.city-caution{padding:20px;font-size:13px;border-bottom-width:2px}.city-control-panel{display:block;padding:25px 20px}.city-control-panel select{min-height:46px}.city-control-panel>label{margin-top:22px}.city-map{padding:20px 13px;border-top-width:2px}.city-map>figcaption{font-size:11px}.city-map>p{font-size:12px}.city-diagram{min-width:720px}.city-observation{padding:25px 18px}.city-summary{font-size:27px;line-height:1.25}.city-sector-grid{border-top-width:2px;border-left-width:2px}.city-sector{padding:22px 18px;border-bottom-width:2px;border-right-width:2px}.city-sector h3{font-size:27px}.city-sector p{font-size:14px}.city-connections>section{padding:26px 20px}.city-panel .city-connections h3,.city-compare h3,.city-assumptions h3{font-size:29px}.city-connections,.city-connections>section+section,.city-compare,.city-assumptions{border-top-width:2px}.city-compare{padding:26px 20px;gap:20px}.city-assumptions>summary{padding:19px 20px;font-size:13px}.city-assumptions>summary span{max-width:115px;font-size:10px}.city-assumptions>div{padding:25px 20px}.city-assumptions p,.city-assumptions li{font-size:14px}.city-assumptions .city-equation{font-size:14px;padding:12px}.city-dialog>header{padding:13px}.city-dialog h3{font-size:23px}.city-dialog-canvas{padding:10px}.city-dialog>p{padding:13px;font-size:11px}.city-no-script{padding:20px}}
@media(max-height:500px) and (orientation:landscape){.city-dialog>header{padding:9px 14px}.city-dialog h3{font-size:23px}.city-dialog>p{padding:10px 14px;font-size:11px}}
@media(forced-colors:active){.city-panel :is(button,input,select,summary,[tabindex]):focus-visible{outline-color:Highlight}.city-diagram{forced-color-adjust:none;background:#000;color:#fff}.city-dialog,.city-panel button{border-color:ButtonText}.city-sector-status{border:1px solid CanvasText}.city-sector--interrupted .city-sector-status{outline-color:CanvasText}.city-restore-control input{accent-color:auto}.city-timeline .is-reached .city-time-mark{forced-color-adjust:none;background:Highlight;color:HighlightText}.city-panel button:disabled{opacity:1;color:GrayText}}
@media(prefers-reduced-motion:reduce){.city-panel{scroll-behavior:auto}.city-panel *{scroll-behavior:auto}}