/* Yerevan Silk — design system. Tokens inherit the first_plan palette. */
:root {
  --paper: #FBF9F7; --ground: #EEEAE6; --card: #FFFFFF; --ink: #241E20; --muted: #6B6164; --line: #D9D0CC;
  --tuff: #A2485A; --tuff-soft: #EBCFD5; --tuff-deep: #6E2F3C;
  --basalt: #3E4448; --bld: #B9B4B0; --bld-block: #8F8781;
  --res: #E6E0D6; --other: #E4E1DC; --park: #D3DEC8; --street: #FBF9F7; --admin: #DCD6E4; --energy: #E9DDB8; --water: #C9DCE4;
  --ind: #DCC8CC; --commercial: #EBD9CF; --mixed: #E4D6C8; --transport: #DDDAD5;
  --metro: #5E4E8C; --sel: #1F6E8C; --sel-soft: #D6E6EE;
  --z-services: #D9C6A5; --z-plant: #B8B2AD; --z-storage: #C9D3D8; --z-circulation: #F2EFE9; --z-production: #E6B9C3; --z-office: #CDD8C4;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --topbar: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #201C1D; --ground: #171415; --card: #262122; --ink: #EFE7E8; --muted: #AFA3A6; --line: #3A3334;
    --tuff: #E08A9B; --tuff-soft: #4A2A31; --tuff-deep: #F2B3BE;
    --basalt: #AEB6BA; --bld: #4A4F53; --bld-block: #6E7478;
    --res: #2B2728; --other: #292627; --park: #26302A; --street: #1C1819; --admin: #2C2833; --energy: #36301F; --water: #1F2D33;
    --ind: #3D2B30; --commercial: #3A2E2A; --mixed: #352E28; --transport: #2E2C2A;
    --metro: #A99BD6; --sel: #6FC3DF; --sel-soft: #1E3A45;
    --z-services: #6B5A3A; --z-plant: #4E4A47; --z-storage: #3F4C55; --z-circulation: #3A3634; --z-production: #6E3E48; --z-office: #43523C;
  }
}
:root[data-theme="dark"] {
  --paper: #201C1D; --ground: #171415; --card: #262122; --ink: #EFE7E8; --muted: #AFA3A6; --line: #3A3334;
  --tuff: #E08A9B; --tuff-soft: #4A2A31; --tuff-deep: #F2B3BE;
  --basalt: #AEB6BA; --bld: #4A4F53; --bld-block: #6E7478;
  --res: #2B2728; --other: #292627; --park: #26302A; --street: #1C1819; --admin: #2C2833; --energy: #36301F; --water: #1F2D33;
  --ind: #3D2B30; --commercial: #3A2E2A; --mixed: #352E28; --transport: #2E2C2A;
  --metro: #A99BD6; --sel: #6FC3DF; --sel-soft: #1E3A45;
  --z-services: #6B5A3A; --z-plant: #4E4A47; --z-storage: #3F4C55; --z-circulation: #3A3634; --z-production: #6E3E48; --z-office: #43523C;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--sans); overflow: hidden; }
a { color: var(--sel); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- top bar + tabs ---- */
.topbar { height: var(--topbar); display: flex; align-items: stretch; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; align-items: baseline; gap: 10px; align-self: center; }
.brand h1 { font: 800 26px/1 var(--display); letter-spacing: .02em; margin: 0; text-transform: uppercase; }
.brand span { color: var(--muted); font-size: 12px; }
.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tabs a { display: flex; align-items: center; padding: 0 16px; text-decoration: none; color: var(--muted); font: 600 15px var(--sans); border-bottom: 3px solid transparent; letter-spacing: .01em; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tuff); }
.topbar .right { margin-left: auto; align-self: center; color: var(--muted); font-size: 12px; }

/* ---- views ---- */
main { height: calc(100% - var(--topbar)); }
.view { display: none; height: 100%; }
.view.active { display: block; }
.split { display: grid; grid-template-columns: 1fr 380px; height: 100%; }
.split.wide-aside { grid-template-columns: 1fr 440px; }
.stage { position: relative; background: var(--ground); overflow: hidden; touch-action: none; cursor: grab; }
.stage.drag { cursor: grabbing; }
.stage svg { width: 100%; height: 100%; display: block; }
aside { border-left: 1px solid var(--line); background: var(--paper); overflow-y: auto; padding: 18px 20px 40px; }
aside h2 { font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 8px; }
aside h2:first-child { margin-top: 0; }
aside header h1 { font: 800 30px/1 var(--display); margin: 0 0 4px; letter-spacing: .01em; text-wrap: balance; }
aside header .sub { color: var(--muted); font-size: 12.5px; margin: 0; }
.scroll { height: 100%; overflow-y: auto; }

/* ---- map controls & overlays ---- */
.ctrl { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; }
.ctrl button { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--card); border-radius: 4px; cursor: pointer; font-size: 18px; line-height: 1; }
.ctrl button:hover { background: var(--paper); }
.map-note { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--card) 80%, transparent); padding: 3px 8px; border-radius: 3px; pointer-events: none; }

/* ---- SVG feature styles (shared) ---- */
.lu-residential { fill: var(--res); } .lu-other { fill: var(--other); } .lu-park { fill: var(--park); } .lu-street { fill: var(--street); }
.lu-public { fill: var(--admin); } .lu-energy { fill: var(--energy); } .lu-water { fill: var(--water); } .lu-industrial { fill: var(--ind); }
.lu-commercial { fill: var(--commercial); } .lu-mixed { fill: var(--mixed); } .lu-transport { fill: var(--transport); }
.rd { fill: none; stroke: var(--street); stroke-linecap: round; stroke-linejoin: round; }
.rd-secondary, .rd-primary_link { stroke-width: 9; } .rd-tertiary { stroke-width: 7; } .rd-residential, .rd-living_street, .rd-unclassified { stroke-width: 5; } .rd-service { stroke-width: 3; }
.blk { fill: none; stroke: var(--basalt); stroke-width: .9; stroke-dasharray: 5 3; }
.parcel { fill: transparent; stroke: var(--muted); stroke-width: .5; cursor: pointer; }
.parcel.other { stroke: var(--line); stroke-width: .4; cursor: default; }
.parcel.fac { fill: var(--tuff-soft); fill-opacity: .55; stroke: var(--tuff); stroke-width: .9; }
.parcel:hover, .bld:hover { stroke: var(--sel); stroke-width: 1.4; }
.parcel.on, .bld.on { stroke: var(--sel); stroke-width: 2; fill: var(--sel-soft); }
.bld { fill: var(--bld); stroke: none; }
.bld.blk { fill: var(--bld-block); stroke: none; cursor: pointer; stroke-dasharray: none; }
.bld.fac { fill: var(--tuff); stroke: var(--tuff-deep); stroke-width: .4; cursor: pointer; }
.bld.fac.u { fill: none; stroke: var(--tuff); stroke-width: 1.2; stroke-dasharray: 3 2; }
.bld.fac.half { fill: var(--tuff-soft); stroke: var(--tuff); }
.zone { fill: none; stroke: var(--tuff-deep); stroke-width: 2.2; stroke-dasharray: 8 4; }
.osm { fill: none; stroke: var(--sel); stroke-width: 1.2; stroke-dasharray: 2 3; }
.park { fill: var(--park); }
.lbl { font: 700 9px var(--display); letter-spacing: .05em; fill: var(--ink); pointer-events: none; }
.lbl.b { font: 800 10px var(--display); fill: var(--paper); paint-order: stroke; stroke: var(--tuff-deep); stroke-width: 2.2px; stroke-linejoin: round; }
.stname { font: 500 8.5px var(--sans); fill: var(--muted); pointer-events: none; letter-spacing: .04em; }
.sbar { stroke: var(--ink); fill: none; } .sbar-bg { fill: var(--paper); fill-opacity: .85; } .sbar-t, .north-t { font-family: var(--sans); font-weight: 500; fill: var(--ink); text-anchor: middle; } .north { fill: var(--ink); }

/* ---- panels ---- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.stat { border-top: 2px solid var(--tuff); padding-top: 6px; }
.stat b { display: block; font: 800 26px/1 var(--display); letter-spacing: .01em; }
.stat span { font-size: 11.5px; color: var(--muted); }
#ov-info { min-height: 120px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 14px; }
.hint { color: var(--muted); font-size: 12.5px; margin: 0; }
.code { font: 600 13px var(--mono); color: var(--tuff-deep); margin-bottom: 4px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 8px 0; font-size: 13px; }
dt { color: var(--muted); } dd { margin: 0; font-variant-numeric: tabular-nums; }
table.small { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
table.small td { padding: 3px 4px; border-top: 1px solid var(--line); }
table.small td.n { text-align: right; font-variant-numeric: tabular-nums; }
.btn { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); text-decoration: none; color: var(--ink); font-size: 12.5px; cursor: pointer; }
.btn:hover { border-color: var(--sel); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
fieldset label { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.legend { display: grid; grid-template-columns: 14px 1fr; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.sw { width: 14px; height: 10px; border: 1px solid var(--line); }
.note { font-size: 11.5px; color: var(--muted); margin-top: 18px; }
.placeholder { padding: 40px; max-width: 70ch; }
.placeholder h1 { font: 800 40px/1 var(--display); margin: 0 0 10px; }
.placeholder p { color: var(--muted); }

@media (max-width: 900px) {
  .split, .split.wide-aside { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
  aside { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- Buildings tab ---- */
.bview { display: grid; grid-template-columns: 330px 1fr; height: 100%; }
.blist { border-right: 1px solid var(--line); overflow-y: auto; background: var(--paper); }
.bfilters { position: sticky; top: 0; background: var(--paper); padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; z-index: 1; }
.bfilters input { grid-column: 1 / -1; }
.bfilters input, .bfilters select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; min-width: 0; }
.bitem { display: grid; grid-template-columns: 10px 44px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.bitem:hover { background: var(--ground); }
.bitem.on { background: var(--sel-soft); box-shadow: inset 3px 0 0 var(--sel); }
.bitem .bk { width: 10px; height: 10px; border-radius: 2px; }
.bk-hall { background: var(--tuff); } .bk-workshop { background: var(--tuff-deep); } .bk-service { background: var(--z-office); } .bk-utility { background: var(--z-plant); } .bk-shed { background: var(--bld); } .bk-underground { background: none; border: 1.5px dashed var(--tuff); }
.bitem .bid { font: 800 15px var(--display); letter-spacing: .03em; }
.bitem .brole { font-size: 12.5px; line-height: 1.25; } .bitem small, .bitem .bnum small { display: block; color: var(--muted); font: 500 11px var(--mono); }
.bitem .bnum { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.bfoot { padding: 12px 14px; }
.bdetail { overflow-y: auto; padding: 20px 26px 60px; display: grid; gap: 16px; align-content: start; }
.bhead { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.bhead h1 { font: 800 40px/1 var(--display); margin: 2px 0 6px; letter-spacing: .01em; }
.bhead h1 span { font-size: 26px; font-weight: 600; color: var(--muted); margin-left: 8px; }
.bhead .sub { margin: 0; color: var(--muted); font-size: 12.5px; }
.bkey { display: flex; gap: 22px; }
.bkey div { border-top: 2px solid var(--tuff); padding-top: 5px; min-width: 84px; }
.bkey b { display: block; font: 800 24px/1 var(--display); letter-spacing: .01em; white-space: nowrap; } .bkey span { font-size: 11px; color: var(--muted); }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { border: 1px solid var(--line); background: var(--card); }
.panel h3 { margin: 0; padding: 9px 12px; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.badge { font: 600 10.5px var(--sans); letter-spacing: .04em; text-transform: none; color: var(--tuff-deep); background: var(--tuff-soft); padding: 2px 8px; border-radius: 10px; }
.stage-s { height: 300px; cursor: default; } .stage-z { height: 360px; cursor: default; }
.zoning { display: grid; grid-template-columns: 1fr 300px; }
.zlegend { padding: 12px 14px; border-left: 1px solid var(--line); }
.datagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 6px 14px; }
.datagrid dl { font-size: 13px; } .datagrid dd small { display: block; color: var(--muted); font-size: 11px; }
.panel .note { padding: 0 14px 12px; margin-top: 0; }
.z-services { fill: var(--z-services); background: var(--z-services); } .z-plant { fill: var(--z-plant); background: var(--z-plant); } .z-storage { fill: var(--z-storage); background: var(--z-storage); }
.z-circulation { fill: var(--z-circulation); background: var(--z-circulation); } .z-production { fill: var(--z-production); background: var(--z-production); } .z-office { fill: var(--z-office); background: var(--z-office); }
.zonefill { stroke: var(--card); stroke-width: .5; }
.fp-outline { fill: none; stroke: var(--ink); stroke-width: .8; }
.zlbl { font-family: var(--sans); font-weight: 600; fill: var(--ink); pointer-events: none; }
.fp { fill: var(--tuff); fill-opacity: .85; stroke: var(--tuff-deep); stroke-width: .3; }
.mrect { fill: none; stroke: var(--sel); stroke-width: .35; stroke-dasharray: 2 1; }
.grid { fill: none; stroke: var(--line); stroke-width: .25; }
.dim { fill: none; stroke: var(--ink); stroke-width: .3; } .dim.ext { stroke-width: .2; stroke: var(--muted); }
.dim2 { fill: none; stroke: var(--muted); stroke-width: .25; stroke-dasharray: 1.5 1; }
.dim-t { font-family: var(--sans); font-weight: 600; fill: var(--ink); } .dim-t.dim2 { fill: var(--muted); font-weight: 500; }
.axis { fill: none; stroke: var(--sel); stroke-width: .5; stroke-dasharray: 3 1.5; }
@media (max-width: 1100px) { .panels, .datagrid { grid-template-columns: 1fr; } .zoning { grid-template-columns: 1fr; } .zlegend { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 800px) { .bview { grid-template-columns: 1fr; grid-template-rows: 40% 60%; } .blist { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---- Intake tab ---- */
.intake { max-width: 1240px; margin: 0 auto; padding: 28px 28px 80px; display: grid; gap: 26px; }
.ihero { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: stretch; }
.eyebrow { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--tuff); margin: 0 0 8px; }
.ihero h1 { font: 800 52px/1 var(--display); margin: 0 0 14px; letter-spacing: .01em; text-wrap: balance; max-width: 16ch; }
.lede { font-size: 16px; max-width: 62ch; margin: 0; color: var(--ink); }
.stage.city { height: 230px; border: 1px solid var(--line); cursor: default; }
.figs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.figs div { border-top: 2px solid var(--tuff); padding-top: 8px; }
.figs b { display: block; font: 800 26px/1.05 var(--display); letter-spacing: .01em; }
.figs span { font-size: 11.5px; color: var(--muted); }
.imap { display: grid; grid-template-columns: 1fr 300px; border: 1px solid var(--line); background: var(--card); }
.imap .stage { height: 600px; }
.ipanel { padding: 16px 18px; border-left: 1px solid var(--line); overflow-y: auto; max-height: 600px; }
.ipanel h2 { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.ipanel h2 + fieldset { margin-bottom: 18px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.prose h2 { font: 800 26px/1.1 var(--display); letter-spacing: .01em; margin: 6px 0 12px; }
.prose p { max-width: 68ch; margin: 0 0 12px; }
.reg { grid-template-columns: 150px 1fr; gap: 10px 16px; max-width: 70ch; }
.reg dt { font-weight: 600; color: var(--ink); } .reg dd { color: var(--ink); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); display: grid; gap: 12px; max-width: 80ch; }
.timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding-left: 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--tuff); }
.timeline b { font: 800 20px/1.3 var(--display); }
.timeline small { display: block; color: var(--muted); font-size: 11.5px; }
.sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-width: 80ch; }
.sources small { display: block; color: var(--muted); }
.cdist { fill: var(--other); stroke: var(--card); stroke-width: 40; } .cdist.ms { fill: var(--res); }
.criver { stroke: var(--water); stroke-width: 70; } .croad { stroke: var(--card); stroke-width: 45; } .cmetro { stroke: var(--metro); stroke-width: 45; stroke-dasharray: 180 90; }
.cbound { stroke: var(--muted); stroke-width: 30; stroke-dasharray: 120 80; } .cname { font-family: var(--sans); font-weight: 500; fill: var(--muted); } .csite { fill: var(--tuff); stroke: var(--card); stroke-width: 40; } .cctr { fill: var(--ink); }
.permit { fill: var(--ink); fill-opacity: .35; } .lease { fill: var(--sel); fill-opacity: .25; stroke: var(--sel); stroke-width: .5; }
.poi { fill: var(--sel); } .poi-t { font: 500 7px var(--sans); fill: var(--ink); }
.busstop { fill: var(--sel); stroke: var(--card); stroke-width: 1.2; } .monument { fill: var(--metro); stroke: var(--card); stroke-width: 1; }
.stname.big { font-size: 20px; fill: var(--ink); } .imap .qname { font-size: 30px; }
.sitelbl { font: 800 18px var(--display); letter-spacing: .12em; fill: var(--tuff-deep); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
@media (max-width: 1100px) { .figs { grid-template-columns: repeat(3, 1fr); } .cols { grid-template-columns: 1fr; } .ihero { grid-template-columns: 1fr; } .imap { grid-template-columns: 1fr; } .ipanel { border-left: 0; border-top: 1px solid var(--line); max-height: none; } }

/* ---- narrow top bar ---- */
@media (max-width: 900px) { .brand span { display: none; } .topbar .right { white-space: nowrap; } .topbar { gap: 12px; padding: 0 14px; } .tabs a { padding: 0 10px; } }

/* ---- print ---- */
@media print {
  html, body { height: auto; overflow: visible; background: #fff; color: #000; }
  .topbar { position: static; border-bottom: 1px solid #999; }
  .tabs a[aria-current="page"] { border-bottom-color: #000; }
  main { height: auto; }
  .view { display: none !important; } .view.active { display: block !important; }
  .scroll, aside, .blist, .bdetail, .ipanel { overflow: visible !important; height: auto !important; max-height: none !important; }
  .split, .bview { display: block; height: auto; }
  .stage { height: 160mm !important; page-break-inside: avoid; break-inside: avoid; }
  .stage-s { height: 90mm !important; } .stage-z { height: 110mm !important; } .stage.city { height: 60mm !important; }
  .ctrl, .map-note, .bfilters, .blist { display: none !important; }
  .panel, .imap, section.prose { page-break-inside: avoid; break-inside: avoid; }
  .bitem { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---- Scenarios tab ---- */
:root { --u-heritage: #C9A227; --u-multi: #7B3F6E; --u-event: #A2485A; --u-shops: #D9913F; --u-cafe: #E0B24A; --u-coworking: #4C8A9E; --u-office: #6B7CA8; --u-culture: #8A6BA3; --u-service: #9A948E; --u-open: #9DBB8F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --u-heritage: #E3C25A; --u-multi: #B37AA6; --u-event: #E08A9B; --u-shops: #E5A55C; --u-cafe: #E8C466; --u-coworking: #6FB3C8; --u-office: #93A3D0; --u-culture: #B08FC8; --u-service: #7E7873; --u-open: #6E8F62; } }
:root[data-theme="dark"] { --u-heritage: #E3C25A; --u-multi: #B37AA6; --u-event: #E08A9B; --u-shops: #E5A55C; --u-cafe: #E8C466; --u-coworking: #6FB3C8; --u-office: #93A3D0; --u-culture: #B08FC8; --u-service: #7E7873; --u-open: #6E8F62; }
.use-heritage { fill: var(--u-heritage); background: var(--u-heritage); } .use-multi { fill: var(--u-multi); background: var(--u-multi); } .use-event { fill: var(--u-event); background: var(--u-event); } .use-retail { fill: var(--u-shops); background: var(--u-shops); } .use-shops { fill: var(--u-shops); background: var(--u-shops); } .use-cafe { fill: var(--u-cafe); background: var(--u-cafe); }
.use-coworking { fill: var(--u-coworking); background: var(--u-coworking); } .use-office { fill: var(--u-office); background: var(--u-office); } .use-culture { fill: var(--u-culture); background: var(--u-culture); }
.use-service { fill: var(--u-service); background: var(--u-service); } .use-open { fill: var(--u-open); background: var(--u-open); }
.sview { height: 100%; overflow-y: auto; }
.sswitch { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 14px 20px 10px; border-bottom: 1px solid var(--line); align-items: stretch; }
.sswitch .snote { grid-column: 1 / -1; }
.sswitch a { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); background: var(--card); }
.sswitch a b { grid-row: 1 / 3; font: 800 30px/1 var(--display); color: var(--muted); }
.sswitch a span { font-weight: 600; } .sswitch a small { color: var(--muted); font-size: 11.5px; }
.sswitch a[aria-selected="true"] { border-color: var(--tuff); box-shadow: inset 0 -3px 0 var(--tuff); } .sswitch a[aria-selected="true"] b { color: var(--tuff); }
.snote { align-self: center; margin: 0; }
.sbody { display: grid; grid-template-columns: 440px 1fr; min-height: 640px; }
.slist { border-right: 1px solid var(--line); padding: 18px 20px 30px; }
.shead h1 { font: 800 34px/1 var(--display); margin: 2px 0 8px; } .shead p { max-width: 60ch; margin: 0 0 6px; }
.slist h2 { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 6px; }
.sblock { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; padding: 8px 6px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sblock .sw { margin-top: 4px; width: 14px; height: 14px; border-radius: 3px; border: 0; }
.sblock b { display: block; } .sblock .suse { display: block; font-size: 12px; color: var(--muted); } .sblock .smem { display: block; font: 500 11.5px var(--mono); color: var(--muted); }
.sblock p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink); max-width: 46ch; }
.modes { margin: 4px 0 0; padding-left: 14px; font-size: 11.5px; color: var(--muted); } .modes li { margin: 0; }
.sblock .snum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .sblock .snum small { display: block; color: var(--muted); font-size: 11px; }
.sblock:hover { background: var(--ground); } .sblock.on { background: var(--sel-soft); box-shadow: inset 3px 0 0 var(--sel); }
.smap { display: grid; grid-template-rows: 1fr auto; position: sticky; top: 0; align-self: start; height: calc(100vh - var(--topbar) - 98px); min-height: 560px; }
.smap .stage { min-height: 380px; }
.sblk { stroke: var(--paper); stroke-width: 1.2; cursor: pointer; fill-opacity: .92; } .sblk.new { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 2.5; fill-opacity: .8; }
.newtag { font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tuff-deep); background: var(--tuff-soft); padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-style: normal; vertical-align: middle; } .sblk:hover { stroke: var(--sel); stroke-width: 2; } .sblk.on { stroke: var(--sel); stroke-width: 3; }
.sopen { fill: var(--u-open); fill-opacity: .45; stroke: var(--u-open); stroke-width: .8; cursor: pointer; } .sopen.inside { fill: var(--paper); fill-opacity: .9; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 3 2; } .sopen.on { stroke: var(--sel); stroke-width: 3; }
.sremoved { fill: none; stroke: var(--muted); stroke-width: .6; stroke-dasharray: 2 1.5; }
.olbl { font: 700 8px var(--sans); letter-spacing: .12em; fill: var(--ink); fill-opacity: .7; pointer-events: none; }
.stotals { border-top: 1px solid var(--line); padding: 12px 18px 14px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.skey { display: flex; gap: 20px; } .skey div { border-top: 2px solid var(--tuff); padding-top: 4px; min-width: 96px; }
.skey b { display: block; font: 800 22px/1 var(--display); } .skey span { font-size: 11px; color: var(--muted); }
.sbars { display: grid; gap: 3px; } .sbar { display: grid; grid-template-columns: 170px 1fr 80px; gap: 8px; align-items: center; font-size: 11.5px; }
.sbar i { display: block; height: 10px; border-radius: 2px; } .sbar b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.scompare { padding: 22px 20px 50px; border-top: 1px solid var(--line); }
.scompare h2 { font: 800 26px/1.1 var(--display); margin: 0 0 12px; }
.ctab { border-collapse: collapse; font-size: 13px; min-width: 620px; } .ctab th, .ctab td { padding: 6px 14px; border-bottom: 1px solid var(--line); text-align: left; } .ctab th { font-weight: 600; } .ctab td.n { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .sswitch { grid-template-columns: repeat(3, 1fr); } .sbody { grid-template-columns: 1fr; } .smap { position: static; height: auto; } .slist { border-right: 0; border-bottom: 1px solid var(--line); } .stotals { grid-template-columns: 1fr; } }
@media print { .sview { overflow: visible; } .sbody { display: block; } .smap .stage { height: 150mm !important; } }

/* ---- Transport tab ---- */
:root { --t-bus: #1F6E8C; --t-trolley: #2E8B57; --t-minibus: #C97B2A; --t-train: #5A5A5A; --t-park: #B7C4D1; --t-park-line: #5C7A96; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-bus: #6FC3DF; --t-trolley: #6FCF97; --t-minibus: #E5A55C; --t-train: #B0B0B0; --t-park: #3A4A5A; --t-park-line: #8FB0CC; } }
:root[data-theme="dark"] { --t-bus: #6FC3DF; --t-trolley: #6FCF97; --t-minibus: #E5A55C; --t-train: #B0B0B0; --t-park: #3A4A5A; --t-park-line: #8FB0CC; }
.tview .ihero { grid-template-columns: 1fr 380px; }
.tkey { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-content: start; }
.tkey div { border-top: 2px solid var(--tuff); padding-top: 6px; }
.tkey b { display: block; font: 800 26px/1.05 var(--display); letter-spacing: .01em; white-space: nowrap; } .tkey span { font-size: 11.5px; color: var(--muted); }
.tmap .stage { height: 640px; } .tmap .ipanel { max-height: 640px; }
.tinfo { min-height: 96px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tinfo h3 { font: 800 22px/1.1 var(--display); margin: 0 0 8px; }
.tdl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 12.5px; margin: 0; } .tdl dt { color: var(--muted); } .tdl dd { margin: 0; }
.tlists { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.tcol h2 { font: 800 22px/1.1 var(--display); margin: 0 0 8px; } .tcol h2 small { font: 500 11.5px var(--sans); color: var(--muted); margin-left: 8px; }
.tlist { max-height: 480px; overflow-y: auto; border: 1px solid var(--line); background: var(--card); }
.titem { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.titem:hover { background: var(--ground); } .titem.on { background: var(--sel-soft); box-shadow: inset 3px 0 0 var(--sel); }
.titem b { display: block; font-size: 13px; line-height: 1.25; } .titem > div > span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.titem .tnum { font: 500 11.5px var(--mono); color: var(--muted); white-space: nowrap; }
.tbadge { display: inline-flex; justify-content: center; align-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 4px; font: 800 14px var(--display); letter-spacing: .03em; color: #fff; }
.tbadge.mode-bus, .trefs i.mode-bus { background: var(--t-bus); } .tbadge.mode-trolleybus, .trefs i.mode-trolleybus { background: var(--t-trolley); }
.tbadge.mode-minibus, .trefs i.mode-minibus { background: var(--t-minibus); } .tbadge.mode-train, .trefs i.mode-train { background: var(--t-train); }
:root[data-theme="dark"] .tbadge, :root[data-theme="dark"] .trefs i { color: #1a1617; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbadge, :root:not([data-theme="light"]) .trefs i { color: #1a1617; } }
.trefs i { display: inline-block; font: 700 10px/16px var(--sans); color: #fff; padding: 0 5px; border-radius: 3px; margin: 2px 3px 0 0; font-style: normal; }
.tdot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--ink); justify-self: center; }
.tpsw { width: 26px; height: 22px; border-radius: 3px; background: var(--t-park); color: var(--t-park-line); font: 800 14px/22px var(--display); text-align: center; justify-self: center; }
.legend .tl { height: 4px; border: 0; border-radius: 2px; } .legend .mode-bus { background: var(--t-bus); } .legend .mode-trolleybus { background: var(--t-trolley); } .legend .mode-minibus { background: var(--t-minibus); }
.legend .mode-train { background: var(--t-train); } .legend .tmetro-sw { background: var(--metro); }
/* map symbols */
.troute { stroke-width: 3.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-opacity: .85; cursor: pointer; }
.troute.mode-bus { stroke: var(--t-bus); } .troute.mode-trolleybus { stroke: var(--t-trolley); } .troute.mode-minibus { stroke: var(--t-minibus); } .troute.mode-train { stroke: var(--t-train); stroke-dasharray: 6 4; }
.troute.dim { stroke-opacity: .18; } .troute.hover, .troute.serves { stroke-opacity: 1; stroke-width: 4.5px; } .troute.on { stroke-opacity: 1; stroke-width: 6px; }
.tstop { fill: var(--ink); stroke: var(--paper); stroke-width: 1.4px; vector-effect: non-scaling-stroke; cursor: pointer; } .tstop.orphan { fill: var(--muted); fill-opacity: .6; }
.tstopg.hover .tstop, .tstopg.serves .tstop { fill: var(--sel); } .tstopg.on .tstop { fill: var(--sel); stroke: var(--ink); stroke-width: 2.5px; }
.tshelter { fill: none; stroke: var(--tuff); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: all; }
.tstop-t { font-family: var(--sans); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 2.5px; pointer-events: none; }
.tstreet { font-family: var(--sans); font-weight: 500; fill: var(--muted); letter-spacing: .04em; pointer-events: none; }
.tsite { font-family: var(--display); font-weight: 800; letter-spacing: .12em; fill: var(--tuff-deep); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; pointer-events: none; }
.tpk { fill: var(--t-park); fill-opacity: .8; stroke: var(--t-park-line); stroke-width: .6; cursor: pointer; } .tpk.minor { pointer-events: none; fill-opacity: .5; }
.tpk.hover { stroke: var(--sel); stroke-width: 2; } .tpk.on { fill: var(--sel-soft); stroke: var(--sel); stroke-width: 3; }
.tpkp { fill: var(--t-park-line); stroke: var(--paper); stroke-width: 1px; vector-effect: non-scaling-stroke; } .tpkp.taxi-rank { fill: var(--t-minibus); } .tpkp.bicycle { fill: var(--t-trolley); } .tpkp.EV-charging { fill: var(--t-trolley); } .tpkp.bus-station { fill: var(--t-bus); }
.twalk { fill: none; stroke: var(--muted); stroke-width: 1.5px; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; } .twalk-t { font-family: var(--sans); font-weight: 600; fill: var(--muted); }
.trail { fill: none; stroke: var(--t-train); stroke-width: 5; stroke-dasharray: 14 8; } .triver { fill: none; stroke: var(--water); stroke-width: 22; }
.tmetro { fill: none; stroke: var(--metro); stroke-width: 7; } .tmetro.planned { stroke-dasharray: 20 12; stroke-opacity: .7; }
.tmst { fill: var(--metro); stroke: var(--paper); stroke-width: 6; } .tmst.planned { fill: var(--paper); stroke: var(--metro); } .tmst-t { font-family: var(--sans); font-weight: 600; fill: var(--metro); }
@media (max-width: 1100px) { .tview .ihero { grid-template-columns: 1fr; } .tlists { grid-template-columns: 1fr; } }
@media print { .tmap .stage { height: 150mm !important; } .tlist { max-height: none; overflow: visible; } }

/* ---- Zones tab (option A room plans) ---- */
:root { --rt-caterer: #E5A55C; --rt-cafe: #E8C466; --rt-kitchen: #C9B49A; --rt-seating: #F1E6D2; --rt-shop: #D9913F; --rt-stall: #F0C98A;
  --rt-foyer: #E4D9E8; --rt-hall: #E6B9C3; --rt-stage: #A2485A; --rt-backstage: #C98C98; --rt-gallery: #EBCFD5; --rt-desks: #9CC3CF; --rt-meeting: #4C8A9E;
  --rt-office: #A7B3D6; --rt-studio: #B8A0CC; --rt-wc: #6FA8C9; --rt-storage: #B9B4B0; --rt-plant: #8F8781; --rt-circulation: #F6F2EA; --rt-terrace: #D8E6C8;
  --rt-lawn: #B7D3A6; --rt-planting: #8FB77F; --rt-parking: #CFCAC3; --rt-bar: #D48A4A; --rt-kids: #F3D29A; --rt-bikes: #C5D5DB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rt-seating: #4A4237; --rt-circulation: #3A3634; --rt-kitchen: #6B5D4A; --rt-foyer: #4A4152; --rt-gallery: #5A3A44; --rt-hall: #6E3E48; --rt-storage: #5A5651; --rt-parking: #4E4A46; --rt-terrace: #45553A; --rt-lawn: #3F5A35; --rt-desks: #3F6570; --rt-office: #4A5578; --rt-studio: #5A4A6E; --rt-stall: #7A6238; --rt-kids: #7A6238; --rt-bikes: #4A5A60; } }
:root[data-theme="dark"] { --rt-seating: #4A4237; --rt-circulation: #3A3634; --rt-kitchen: #6B5D4A; --rt-foyer: #4A4152; --rt-gallery: #5A3A44; --rt-hall: #6E3E48; --rt-storage: #5A5651; --rt-parking: #4E4A46; --rt-terrace: #45553A; --rt-lawn: #3F5A35; --rt-desks: #3F6570; --rt-office: #4A5578; --rt-studio: #5A4A6E; --rt-stall: #7A6238; --rt-kids: #7A6238; --rt-bikes: #4A5A60; }
.rt-caterer { fill: var(--rt-caterer); background: var(--rt-caterer); } .rt-cafe { fill: var(--rt-cafe); background: var(--rt-cafe); } .rt-kitchen { fill: var(--rt-kitchen); background: var(--rt-kitchen); }
.rt-seating { fill: var(--rt-seating); background: var(--rt-seating); } .rt-shop { fill: var(--rt-shop); background: var(--rt-shop); } .rt-stall { fill: var(--rt-stall); background: var(--rt-stall); }
.rt-foyer { fill: var(--rt-foyer); background: var(--rt-foyer); } .rt-hall { fill: var(--rt-hall); background: var(--rt-hall); } .rt-stage { fill: var(--rt-stage); background: var(--rt-stage); }
.rt-backstage { fill: var(--rt-backstage); background: var(--rt-backstage); } .rt-gallery { fill: var(--rt-gallery); background: var(--rt-gallery); } .rt-desks { fill: var(--rt-desks); background: var(--rt-desks); }
.rt-meeting { fill: var(--rt-meeting); background: var(--rt-meeting); } .rt-office { fill: var(--rt-office); background: var(--rt-office); } .rt-studio { fill: var(--rt-studio); background: var(--rt-studio); }
.rt-wc { fill: var(--rt-wc); background: var(--rt-wc); } .rt-storage { fill: var(--rt-storage); background: var(--rt-storage); } .rt-plant { fill: var(--rt-plant); background: var(--rt-plant); }
.rt-circulation { fill: var(--rt-circulation); background: var(--rt-circulation); } .rt-terrace { fill: var(--rt-terrace); background: var(--rt-terrace); } .rt-lawn { fill: var(--rt-lawn); background: var(--rt-lawn); }
.rt-planting { fill: var(--rt-planting); background: var(--rt-planting); } .rt-parking { fill: var(--rt-parking); background: var(--rt-parking); } .rt-bar { fill: var(--rt-bar); background: var(--rt-bar); }
.rt-kids { fill: var(--rt-kids); background: var(--rt-kids); } .rt-bikes { fill: var(--rt-bikes); background: var(--rt-bikes); }
.zview { display: grid; grid-template-columns: 360px 1fr; height: 100%; }
.zlist { border-right: 1px solid var(--line); overflow-y: auto; padding: 18px 16px 30px; }
.zlist .shead h1 { font-size: 30px; } .zlist .shead p { font-size: 13px; }
.zitem .snum small { display: block; color: var(--muted); font-size: 11px; }
.zdetail { overflow-y: auto; padding: 20px 26px 60px; display: grid; gap: 16px; align-content: start; }
.zsum { max-width: 78ch; font-size: 13.5px; color: var(--ink) !important; }
.zplans { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.zplans .panel:not(.zkey) { grid-column: 2; }
.zkey { grid-row: 1 / span 3; align-self: start; }
.zstage { height: 520px; }
.room { stroke: var(--card); stroke-width: .35; }
.rlbl { font-family: var(--sans); font-weight: 500; fill: var(--ink); pointer-events: none; } .rlbl.ten { font-weight: 700; } .rlbl.sub { fill: var(--muted); }
.wclbl { font-family: var(--display); font-weight: 800; fill: #fff; paint-order: stroke; stroke: var(--rt-wc); stroke-width: .6px; pointer-events: none; letter-spacing: .05em; }
.zt td.muted { color: var(--muted); font-size: 12px; } .zt { min-width: 700px; width: 100%; }
.zlegend2 { padding: 10px 14px 4px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); display: grid; }
.zlegend2 > span:nth-child(odd) { display: none; } .zlegend2 > span:nth-child(even) { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.zlegend2 > span:nth-child(even)::before { content: ""; display: none; }
@media (max-width: 1100px) { .zview { grid-template-columns: 1fr; grid-template-rows: 40% 60%; } .zlist { border-right: 0; border-bottom: 1px solid var(--line); } .zplans { grid-template-columns: 1fr; } .zplans .panel:not(.zkey) { grid-column: 1; } .zkey { grid-row: auto; } }

/* ---- Nearby tab ---- */
:root { --n-food: #C4553A; --n-grocery: #4C8A3F; --n-retail: #D9913F; --n-office: #4C6FA8; --n-building: #A99F99; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --n-food: #E88A70; --n-grocery: #7CC26C; --n-retail: #E5A55C; --n-office: #8FAAD8; --n-building: #6E6663; } }
:root[data-theme="dark"] { --n-food: #E88A70; --n-grocery: #7CC26C; --n-retail: #E5A55C; --n-office: #8FAAD8; --n-building: #6E6663; }
.nsw { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); justify-self: center; }
.nsq { width: 10px; height: 10px; border: 1px solid var(--line); justify-self: center; }
.n-food { background: var(--n-food); } .n-grocery { background: var(--n-grocery); } .n-retail { background: var(--n-retail); } .n-office { background: var(--n-office); } .n-building { background: var(--n-building); }
.legend .nsw, .legend .nsq { justify-self: start; }
.np { stroke: var(--paper); stroke-width: 1.2px; vector-effect: non-scaling-stroke; cursor: pointer; }
circle.np.n-food { fill: var(--n-food); } circle.np.n-grocery { fill: var(--n-grocery); } circle.np.n-retail { fill: var(--n-retail); } circle.np.n-office { fill: var(--n-office); }
rect.np.n-building { fill: var(--n-building); fill-opacity: .75; stroke-width: .8px; }
.np.hover { stroke: var(--sel); stroke-width: 2.5px; } .np.on { stroke: var(--ink); stroke-width: 3px; }
.np.filtered { display: none; }
.nrange { display: grid; grid-template-columns: 1fr 58px; gap: 10px; align-items: center; margin-bottom: 6px; }
.nrange input { width: 100%; accent-color: var(--tuff); margin: 0; }
.nrange output { font: 500 12px var(--mono); color: var(--ink); text-align: right; white-space: nowrap; }
.npt { font-family: var(--sans); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 2.5px; pointer-events: none; }
.npt.t1 { font-weight: 700; } .npt.t2 { font-weight: 600; }
.nfilter { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.nfilter input, .nfilter select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
.nfilter input { min-width: 280px; }
.nlists { grid-template-columns: repeat(5, 1fr); }
.nlists .titem { grid-template-columns: 20px 1fr auto; }
.ntr { font: 600 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 0 4px; border-radius: 6px; margin-left: 5px; font-style: normal; vertical-align: middle; }
.mono { font: 500 11px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.nview .tdl dd { min-width: 0; overflow-wrap: anywhere; }
.nview #n-count { margin-bottom: 18px; }
@media (max-width: 1400px) { .nlists { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .nlists { grid-template-columns: 1fr; } }
:root { --rt-museum: #C9A227; --rt-atelier: #E3C25A; --rt-flex: #B37AA6; }
.rt-museum { fill: var(--rt-museum); background: var(--rt-museum); } .rt-atelier { fill: var(--rt-atelier); background: var(--rt-atelier); } .rt-flex { fill: var(--rt-flex); background: var(--rt-flex); }
.zswitch { display: flex; gap: 6px; margin-bottom: 14px; }
.zswitch a { flex: 1; text-align: center; padding: 6px 0; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--muted); font: 800 18px/1 var(--display); background: var(--card); }
.zswitch a[aria-selected="true"] { color: var(--tuff); border-color: var(--tuff); box-shadow: inset 0 -3px 0 var(--tuff); }
.rt-classroom { fill: var(--rt-meeting); background: var(--rt-meeting); } .rt-library { fill: var(--rt-office); background: var(--rt-office); } .rt-residency { fill: var(--rt-studio); background: var(--rt-studio); } .rt-court { fill: var(--rt-planting); background: var(--rt-planting); } .rt-lane { fill: var(--rt-parking); background: var(--rt-parking); }