/* Isolated city-twin interface. Geometry stays visible; only local cards have a background. */
.city-experience { isolation:isolate; color:#24343e; }
.city-ui { position:absolute; inset:0; z-index:3; pointer-events:none; font-family:var(--font-sans,Arial,sans-serif); }
.city-ui *, .city-ui *::before, .city-ui *::after { box-sizing:border-box; }
.city-ui [hidden] { display:none !important; }
.city-ui button,.city-ui input,.city-ui select,.city-ui summary { font:inherit; color:inherit; }
.city-ui button,.city-ui summary { cursor:pointer; }
.city-ui svg { width:18px; height:18px; flex:none; }
.city-ui :focus-visible { outline:3px solid #2776c8; outline-offset:3px; }
.city-heading { position:absolute; top:25px; left:28px; max-width:calc(100% - 330px); }
.city-eyebrow { margin:0 0 7px; font:600 9px var(--font-mono,monospace); letter-spacing:.14em; color:#537681; }
.city-heading h2 { margin:0; font-size:clamp(22px,2.2vw,30px); line-height:1.14; letter-spacing:-.035em; font-weight:660; }
.city-intro { margin:8px 0 10px; font-size:12px; line-height:1.4; color:#60727a; }
.city-demo { display:inline-block; font:600 8px var(--font-mono,monospace); letter-spacing:.04em; color:#4b6977; background:#ffffffd9; border:1px solid #d9e3e5; border-radius:4px; padding:5px 7px; }
.city-tools { position:absolute; top:25px; right:24px; display:flex; align-items:flex-start; gap:7px; pointer-events:auto; z-index:9; }
.city-control { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 12px; border:1px solid #d4dfe3; background:#ffffffef; border-radius:9px; font-size:11px !important; font-weight:600 !important; box-shadow:0 3px 12px #293e4710; }
.city-control:hover { background:#fff; border-color:#88abb9; }
.city-settings summary { list-style:none; }
.city-settings summary::-webkit-details-marker,.city-catalogue summary::-webkit-details-marker { display:none; }
.city-settings[open] summary { background:#eaf3f8; border-color:#adc7d7; }
.city-settings-panel { position:absolute; right:0; top:48px; width:278px; padding:17px; background:#fffffff7; border:1px solid #d5e1e5; border-radius:13px; box-shadow:0 15px 44px #233d5124; pointer-events:auto; }
.city-settings-panel fieldset { padding:0; margin:0 0 16px; border:0; min-width:0; }
.city-settings-panel legend { margin-bottom:8px; font-size:11px; font-weight:650; }
.city-segment { display:grid; grid-template-columns:repeat(3,1fr); background:#f0f4f5; border:1px solid #e0e7e9; padding:3px; border-radius:8px; gap:2px; }
.city-segment button { min-height:32px; display:flex; align-items:center; justify-content:center; gap:4px; padding:4px; border:0; border-radius:5px; background:transparent; font-size:10px; }
.city-segment svg { width:13px; height:13px; }
.city-segment button[aria-pressed=true] { background:#fff; color:#226395; box-shadow:0 1px 4px #23435b20; }
.city-slider-label { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:17px; font-size:11px; font-weight:600; }
.city-slider-label input { grid-column:1 / -1; width:100%; min-height:22px; margin:0; padding:0; accent-color:#377cad; }
.city-slider-label output { color:#59737e; }
.city-select { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:7px; margin-bottom:13px; font-size:11px; }
.city-select select { border:1px solid #d5e0e3; border-radius:6px; padding:6px; background:#f8fafb; font-size:11px; }
.city-check { display:flex; align-items:center; gap:7px; font-size:11px; cursor:pointer; }
.city-check input { width:14px; height:14px; margin:0; padding:0; accent-color:#287bb2; }
.city-settings-panel .city-check { margin:12px 0; }
.city-fine { font-size:10px; line-height:1.5; color:#6c7f88; margin:14px 0 10px; }
.city-performance { display:flex; justify-content:space-between; gap:6px; border-top:1px solid #e3ebed; padding-top:10px; font:9px var(--font-mono,monospace); color:#66808b; }
.city-layerbar { position:absolute; left:28px; right:24px; top:145px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; pointer-events:auto; z-index:4; }
.city-chip { display:inline-flex; gap:5px; align-items:center; min-height:32px; padding:7px 9px; border:1px solid #dce4e5; border-radius:7px; background:#ffffffdc; color:#627781 !important; font-size:10px !important; line-height:1; }
.city-chip svg { width:14px; height:14px; }
.city-chip[aria-pressed=true] { border-color:#bfd2de; color:#245b80 !important; background:#f2f8fcf2; }
.city-chip:hover { border-color:#76a3bf; }
.city-chip[data-all][aria-pressed=true] { background:#285e7d; color:#fff !important; border-color:#285e7d; }
.city-alert-filter { padding:7px 9px; background:#ffffffd9; border:1px solid #e0e7e9; border-radius:7px; min-height:32px; font-size:10px; }
.city-markers { position:absolute; inset:0; pointer-events:none; z-index:3; }
.city-marker { --severity:#3881b5; position:absolute; width:156px; height:42px; min-height:0; transform:translate(-50%,-100%); display:flex; align-items:center; gap:7px; padding:6px 9px 6px 6px; border:1px solid #c3d6e0; border-left:3px solid var(--severity); border-radius:9px; background:#ffffffed; box-shadow:0 3px 10px #21374d17; pointer-events:auto; text-align:left; transition:background .12s; }
.city-marker::after { content:''; position:absolute; left:50%; top:100%; height:12px; width:1px; background:var(--severity); opacity:.7; }
.city-marker-icon { display:grid; place-items:center; color:var(--severity); flex:0 0 23px; }
.city-marker-icon svg { width:17px; height:17px; }
.city-marker-label { font-size:10px; font-weight:650; line-height:1.15; max-height:27px; overflow:hidden; text-wrap:balance; }
.city-marker:hover,.city-marker[aria-pressed=true] { background:#fff; border-color:var(--severity); z-index:5; }
.city-marker[data-severity=alarm] { --severity:#ce493b; }
.city-marker[data-severity=warning] { --severity:#b88426; }
.city-marker[data-severity=normal] { --severity:#328064; }
.city-tooltip { position:absolute; z-index:12; width:250px; padding:11px 13px; border:1px solid #cadbe3; border-radius:9px; background:#fffffff7; color:#28414e; box-shadow:0 5px 18px #1e344b20; }
.city-tooltip strong { display:block; font-size:12px; margin-bottom:4px; }
.city-tooltip span { display:block; font-size:11px; color:#607a86; line-height:1.4; }
.city-data-dock { position:absolute; left:28px; bottom:86px; width:278px; background:#ffffffed; border:1px solid #d2dfe4; border-radius:12px; pointer-events:auto; box-shadow:0 7px 23px #1a33451a; z-index:6; }
.city-catalogue summary { display:flex; gap:11px; align-items:center; list-style:none; padding:13px; }
.city-catalogue summary strong { display:block; font-size:12px; font-weight:650; }
.city-catalogue summary small { display:block; margin-top:4px; font-size:10px; color:#6b818b; }
.city-catalogue-icon { display:grid; place-items:center; width:29px; height:29px; color:#437e9b; border:1px solid #d6e6ed; border-radius:8px; background:#edf5f9; }
.city-disclosure { margin-left:auto; font-size:18px; color:#79939f; }
.city-catalogue[open] .city-disclosure { transform:rotate(180deg); }
.city-catalogue-panel { position:absolute; left:-1px; bottom:calc(100% + 8px); width:330px; background:#fffffff7; border:1px solid #d2dfe4; border-radius:12px; box-shadow:0 8px 30px #19344a20; padding:10px; }
.city-catalogue-panel input { width:100%; min-height:36px; padding:8px 10px; border:1px solid #cedee6; border-radius:7px; background:#f8fbfc; font-size:11px; }
.city-record-list { max-height:min(38vh,350px); overflow-y:auto; margin-top:7px; overscroll-behavior:contain; }
.city-record-row { display:flex; align-items:center; gap:10px; width:100%; padding:10px 5px; min-height:46px; background:transparent; border:0; border-bottom:1px solid #eef2f4; text-align:left; }
.city-record-row:hover { background:#f1f7fa; }
.city-record-row strong { display:block; font-size:11px; font-weight:650; }
.city-record-row small { display:block; margin-top:4px; color:#69818e; font:8px var(--font-mono,monospace); }
.city-row-icon { color:#4b839f; }
.city-row-icon[data-severity=alarm] { color:#c1483a; }
.city-row-icon[data-severity=warning] { color:#ae7f23; }
.city-row-icon[data-severity=normal] { color:#2b7e5d; }
.city-empty { padding:12px; font-size:12px; color:#6b818c; }
.city-status-counts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #e1e9ed; padding:10px 13px; }
.city-status-counts > span { display:flex; align-items:baseline; gap:5px; }
.city-status-counts b { font-size:19px; line-height:1; font-weight:550; letter-spacing:-.05em; }
.city-status-counts small { font-size:9px; color:#718792; }
.city-status-counts [data-severity=alarm] b { color:#bc4437; }
.city-status-counts [data-severity=warning] b { color:#9a741d; }
.city-status-counts [data-severity=normal] b { color:#297a60; }
.city-scenario { position:absolute; right:24px; bottom:25px; display:flex; gap:9px; align-items:center; padding:10px 12px; background:#ffffffde; border:1px solid #d7e2e6; border-radius:9px; color:#3d6578; }
.city-scenario strong { display:block; font-size:10px; font-weight:650; }
.city-scenario small { display:block; font-size:9px; color:#6d8189; margin-top:3px; }
.city-hint { position:absolute; bottom:8px; left:28px; margin:0; color:#607e8b; font:8px var(--font-mono,monospace); }
.city-experience .hero-actions { left:28px; bottom:30px; }
.city-experience .hero-actions .button { min-height:31px; border-radius:7px; font-family:var(--font-sans); font-size:10px; letter-spacing:0; }
.city-inspector { position:absolute; z-index:10; right:24px; bottom:92px; width:340px; max-height:calc(100% - 230px); display:flex; flex-direction:column; padding:19px; border:1px solid #ccdce4; border-radius:13px; background:#fffffff7; box-shadow:0 16px 50px #1b354d26; pointer-events:auto; }
.city-inspector h3 { font-size:21px; line-height:1.15; letter-spacing:-.025em; margin:3px 28px 7px 0; font-weight:650; }
.city-close { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:29px; height:29px; min-height:0; padding:0; border:1px solid #d5e1e7; border-radius:7px; background:#fff; color:#567583; }
.city-record-id { margin:0 0 11px; color:#6b8491; font:9px var(--font-mono,monospace); }
.city-state { display:block; font-size:10px; padding:8px 10px; border-radius:7px; background:#edf5fb; color:#306083; line-height:1.45; }
.city-state[data-severity=alarm] { background:#fcf0ed; color:#b14236; }
.city-state[data-severity=warning] { background:#fbf6e7; color:#856622; }
.city-state[data-severity=normal] { background:#edf6f0; color:#39725b; }
.city-inspector-content { overflow-y:auto; overscroll-behavior:contain; margin:12px 0; }
.city-inspector dl { display:grid; grid-template-columns:95px minmax(0,1fr); margin:0; gap:0; }
.city-inspector dt,.city-inspector dd { margin:0; padding:8px 0; border-bottom:1px solid #e4edf1; font-size:10px; line-height:1.45; }
.city-inspector dt { color:#738995; font-size:9px; padding-right:7px; }
.city-inspector dd { color:#344d59; overflow-wrap:anywhere; }
.city-inspector [data-detail] { font-size:11px; line-height:1.55; color:#597380; margin:12px 0; }
.city-provenance { display:grid; gap:5px; padding:10px; border:1px solid #e1eaf0; border-radius:8px; background:#f7fafb; }
.city-provenance strong { font-size:10px; }
.city-provenance span { color:#52798d; font-size:10px; }
.city-provenance small { color:#7d929e; font-size:9px; line-height:1.5; }
.city-inspector > .city-control { align-self:flex-start; flex:none; }
.hero-webgl-fallback:not([hidden]) { display:grid; color:#274352; background:#f1f6f8; }
.hero-webgl-fallback strong { color:#285f82; }
.hero-webgl-fallback span { color:#617a89; }
@media (max-width:1100px) {
  .city-heading { max-width:calc(100% - 215px); }
  .city-tools .city-control { padding:8px; }
  .city-tools .city-control span { display:none; }
  .city-layerbar { top:153px; }
}
@media (max-width:720px) {
  .city-heading { top:18px; left:18px; max-width:calc(100% - 116px); }
  .city-heading h2 { font-size:22px; }
  .city-intro { display:none; }
  .city-eyebrow { font-size:8px; margin-bottom:6px; }
  .city-demo { margin-top:10px; font-size:7px; padding:4px 5px; }
  .city-tools { top:18px; right:14px; gap:5px; }
  .city-tools .city-control { width:37px; min-height:37px; }
  .city-layerbar { top:128px; left:14px; right:14px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
  .city-chip { flex:none; min-height:38px; font-size:10px !important; }
  .city-alert-filter { flex:none; min-height:38px; }
  .city-settings-panel { width:min(278px,calc(100vw - 28px)); top:46px; }
  .city-segment button { min-height:40px; }
  .city-data-dock { left:14px; bottom:94px; width:212px; }
  .city-catalogue summary { padding:10px; gap:8px; }
  .city-catalogue summary strong { font-size:11px; }
  .city-catalogue summary small { font-size:9px; }
  .city-catalogue-panel { width:min(330px,calc(100vw - 28px)); }
  .city-status-counts { padding:9px 11px; }
  .city-status-counts b { font-size:17px; }
  .city-status-counts small { font-size:8px; }
  .city-scenario { right:14px; bottom:31px; padding:8px; gap:6px; max-width:166px; }
  .city-scenario strong { font-size:9px; }
  .city-scenario small { font-size:8px; }
  .city-scenario svg { width:15px; }
  .city-experience .hero-actions { left:14px; bottom:32px; gap:5px; }
  .city-experience .hero-actions .button { padding:0 8px; font-size:9px; min-height:32px; }
  .city-hint { left:14px; right:14px; bottom:8px; font-size:7px; }
  .city-inspector { left:14px; right:14px; bottom:91px; width:auto; max-height:calc(100% - 272px); padding:15px; }
  .city-inspector h3 { font-size:19px; }
}
@media (pointer:coarse) {
  .city-marker { width:126px; height:42px; gap:4px; padding:5px; }
  .city-marker-label { font-size:10px; }
  .city-marker-icon { flex-basis:19px; }
  .city-close { width:36px; height:36px; }
}
@media (hover:none) { .city-tooltip { display:none !important; } }
@media (prefers-reduced-motion:reduce) { .city-ui * { transition:none !important; } }
.city-check input { min-height:0; border-radius:3px; }
@media (max-width:720px) {
  .city-status-counts > span { display:grid; gap:4px; }
  .city-status-counts small { font-size:9px; }
}

/* Keep object information and weather controls usable without covering the city. */
.city-tooltip small { display:block; margin-top:7px; color:#537681; font:9px var(--font-mono,monospace); overflow-wrap:anywhere; }
.city-scenario { pointer-events:auto; text-align:left; cursor:pointer; }
.city-scenario:hover,.city-scenario[aria-expanded=true] { border-color:#88abb9; background:#fff; }
.city-settings-panel { max-height:calc(100svh - var(--header-height,56px) - 108px); overflow-y:auto; overscroll-behavior:contain; }

/* Keep the opening incident readable without covering the entire touch view. */
@media (max-width: 640px) {
  .city-experience[data-camera-mode="start"] .city-inspector { max-height: min(36svh, 350px); background: #fff; }
  .city-marker-label { hyphens: auto; overflow-wrap: anywhere; }
}

/* The startup inspector must not cover the open scene controls. */
.city-tools:has(.city-settings[open]) { z-index:13; }


/* Architectural information plate: quiet surfaces, precise hierarchy. */
.city-model-metrics { display:flex; gap:24px; margin-top:14px; }
.city-model-metrics span { display:grid; gap:4px; }
.city-model-metrics b { font:500 18px var(--font-mono,monospace); letter-spacing:-.04em; color:#34433f; }
.city-model-metrics small { font-size:9px; color:#65706a; }
.city-experience .city-layerbar { top:198px; }
.city-experience .city-control,.city-experience .city-chip,.city-experience .city-marker,.city-experience .city-data-dock,.city-experience .city-inspector { border-radius:4px; box-shadow:0 2px 8px #24332b0a; }
.city-experience .city-marker { background:#fafaf7ed; border-left-width:2px; }
.city-experience .city-heading { max-width:calc(100% - 310px); }
@media(max-width:720px) {
  .city-experience .city-heading { max-width:calc(100% - 116px); }
  .city-model-metrics { gap:18px; margin-top:10px; }
  .city-model-metrics b { font-size:14px; }
  .city-model-metrics small { font-size:8px; }
  .city-experience .city-layerbar { top:198px; }
}