:root{--bg:#0e1116;--panel:#161b22;--panel2:#1c2230;--line:#2a3240;--ink:#e6edf3;
 --mut:#8b97a7;--acc:#4fd1a1;--accb:#5aa9ff;--warn:#e3a008;
 --have:#3fb950;--partial:#e3a008;--missing:#d24b4b;
 --done:#3fb950;--prog:#58a6ff;--block:#d24b4b;--idle:#586573;--head:#11161f;}
html[data-theme="light"]{--bg:#f5f7fa;--panel:#fff;--panel2:#eef2f6;--line:#d7dee6;
 --ink:#1a2129;--mut:#5b6772;--acc:#0f8f63;--accb:#1d6fd0;--warn:#8a5a00;--head:#fff;}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accb)}
.topbar{height:50px;background:var(--head);border-bottom:1px solid var(--line);display:flex;
 align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{font-weight:800;letter-spacing:.16em;color:var(--acc);font-size:16px}
.brand .tag{color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em}
.brand .prod{border-left:1px solid var(--line);padding-left:10px;color:var(--ink);font-size:13px;font-weight:600}
@media (max-width:640px){.brand .tag{display:none}}
.btn{cursor:pointer;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
 border-radius:7px;padding:5px 11px;font-size:12.5px;font-weight:600}
.btn.primary{background:var(--acc);color:#06231a;border-color:transparent}
.app{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 50px)}
.rail{border-right:1px solid var(--line);overflow:auto;padding:12px}
.rail h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:6px 4px}
.dealcard{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px;margin:8px 0;cursor:pointer}
.dealcard.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.dealcard .addr{font-weight:600;font-size:13px}
.dealcard .meta{color:var(--mut);font-size:11.5px;margin-top:2px}
.main{overflow:auto;padding:18px 22px 60px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tab{cursor:pointer;padding:7px 13px;font-size:13px;color:var(--mut);border:1px solid transparent;border-bottom:none;border-radius:7px 7px 0 0}
.tab.active{background:var(--panel2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc)}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:700;color:#fff;font-size:13px}
/* `.GO` / `.CONDITIONALGO` / `.NOGO` stood here, coloured from an adjudication word the engine
   no longer produces. A programme either clears the hurdle it was tested on or falls short of
   it, and that is a property of the programme rather than a call on the study. */
.pill.clears{background:#2ea36b}.pill.short{background:#d24b4b}.pill.unknown{background:#6b7280}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#fff}
.b-HAVE{background:var(--have)}.b-PARTIAL{background:var(--partial)}.b-MISSING{background:var(--missing)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.metric{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.metric .v{font-size:18px;font-weight:700}.metric .k{font-size:11.5px;color:var(--mut)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0}
.sec-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.phase{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.state{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.caveat{background:rgba(227,160,8,.12);border-left:3px solid var(--partial);padding:7px 10px;border-radius:5px;font-size:12px;margin-top:7px}
.q{margin:7px 0;padding-left:11px;border-left:3px solid var(--accb)}.q .a{font-weight:700}
.ddcat{margin:14px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accb)}
.ddrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--line);
 border-radius:7px;margin:5px 0;background:var(--panel);cursor:pointer}
.ddrow:hover{background:var(--panel2)}
.ddrow .it{flex:1}.ddrow .nt{color:var(--mut);font-size:11.5px}
/* the phase reading, beside the readiness badge: an input that is not due yet is not a
   gap, and it should not read in the same colour as one. */
.ddrow .ddstate{white-space:nowrap;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--mut)}
.hint{color:var(--mut);font-size:12px;margin:4px 0 10px}
table{border-collapse:collapse;width:100%;font-size:12.5px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--panel2);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:none}.num{text-align:right;font-variant-numeric:tabular-nums}
.board{overflow-x:auto}.board td{text-align:center}
.cell{width:15px;height:15px;border-radius:3px;display:inline-block;cursor:pointer;border:1px solid #0004}
.s-complete{background:var(--done)}.s-in-progress{background:var(--prog)}
.s-blocked-on-inputs{background:var(--block)}.s-not-started{background:var(--idle);opacity:.45}
.legendrow span{margin-right:14px;font-size:12px;color:var(--mut)}
.legendrow i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:4px}
.uwrow{display:flex;align-items:center;gap:12px;margin:7px 0}
.uwrow label{width:170px;font-size:12.5px;color:var(--mut)}
.uwrow input[type=range]{flex:1}
.uwrow .val{width:96px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
#map{height:440px;border-radius:10px;border:1px solid var(--line)}
select,input[type=number]{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:12.5px}
.empty{color:var(--mut);margin-top:40px;text-align:center}
.flash{animation:fl .6s}@keyframes fl{0%{background:rgba(79,209,161,.25)}100%{background:transparent}}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
@media (max-width:760px){.charts{grid-template-columns:1fr}}
.chartcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.chartcard h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:600}
.chartbox{position:relative;height:240px}
/* Questions / Index surfaces */
.qcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accb);border-radius:8px;padding:10px 13px;margin:8px 0}
.qhd{font-size:13.5px;line-height:1.5}
.qsrc{color:var(--mut);font-size:11px;margin-left:4px}
.qcite{color:var(--mut);font-size:11.5px;margin-top:4px}
.qform{display:grid;grid-template-columns:1fr 220px 130px auto;gap:8px;align-items:start;margin-top:8px}
.qform textarea{min-height:38px;resize:vertical;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:12.5px}
.qform input,.qform select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:12.5px}
@media (max-width:760px){.qform{grid-template-columns:1fr}}
/* Answer + evidence on question cards */
.qans{margin:6px 0 2px;font-size:13px;line-height:1.5}
.qev{margin:2px 0}
.qev ul{margin:2px 0 2px 2px;padding-left:16px}
.qev li{font-size:12px;color:var(--mut)}
.qtag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--acc);font-weight:700;margin-right:6px}
.qform textarea{min-height:44px}
.qform{grid-template-columns:1fr 200px auto auto}

/* Deal parameters panel: override markers, typed inputs, scenarios */
.uwrow input[type=number]{width:120px}
.uwrow .rst{padding:0 7px;font-size:12px;line-height:20px}
.rst-sp{display:inline-block;width:30px}
.ovdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:6px;vertical-align:1px}
.ovcount{color:var(--acc);font-size:10px;letter-spacing:0;text-transform:none}
.scin{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:12.5px}
.qparam{grid-column:1/-1;display:flex;align-items:center;gap:8px}
.qparam input{width:140px}

/* Ranking tab + asset-type selector */
.selrow td{background:color-mix(in srgb, var(--acc) 9%, transparent)}
#assetsel{max-width:340px}

/* ---- tenancy: topbar identity, study status, agent chat ---- */
.topright{display:flex;align-items:center;gap:9px}
.topright .who{color:var(--mut);font-size:11.5px}
@media (max-width:760px){.topright .who{display:none}}
.statusdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:7px;vertical-align:1px}

.chat{display:flex;flex-direction:column;height:calc(100vh - 220px);min-height:360px}
.msgs{flex:1;overflow-y:auto;padding:2px 2px 10px}
.msg{margin:11px 0;display:flex;gap:9px}
.msg .av{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;
 justify-content:center;font-size:10.5px;font-weight:700;margin-top:2px}
.msg.user .av{background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
.msg.bot .av{background:var(--acc);color:#06231a}
.msg .bub{background:var(--panel);border:1px solid var(--line);border-radius:11px;
 padding:10px 13px;font-size:13.5px;max-width:calc(100% - 44px);overflow-wrap:anywhere}
.msg.user .bub{background:var(--panel2)}
.msg .bub p{margin:.32em 0}
.msg .bub ul,.msg .bub ol{margin:.35em 0;padding-left:19px}
.msg .bub code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}
.msg .bub pre{background:var(--panel2);padding:9px 11px;border-radius:7px;overflow-x:auto}
.msg .bub table{border-collapse:collapse;width:100%;margin:.55em 0;font-size:12.5px}
.msg .bub th,.msg .bub td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.srcs{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);color:var(--mut);font-size:11px}
.askbar{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:11px}
.askbar textarea{flex:1;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
 border-radius:9px;padding:9px 12px;font:13.5px/1.45 inherit;resize:vertical;height:44px;max-height:140px}
.askbar textarea:focus{outline:none;border-color:var(--acc)}
.askbar button{align-self:flex-end;height:44px;padding:0 17px}
.suggest{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.suggest button{background:var(--panel);border:1px solid var(--line);color:var(--mut);
 border-radius:999px;padding:5px 12px;font-size:11.5px;cursor:pointer}
.suggest button:hover{border-color:var(--acc);color:var(--ink)}
.typing{color:var(--mut);font-style:italic}

/* ---- Platform attribution -------------------------------------------------
   The engine is Versant-branded throughout; this is the platform credit beneath
   it. `.poweredby-fixed` is a page-level corner mark for the two app shells,
   pinned bottom-LEFT: Leaflet renders its own attribution in the map's
   bottom-right, and the Map tab would collide. pointer-events:none so it can
   never intercept a click on whatever sits under it. */
.poweredby{color:var(--mut);font-size:11px;letter-spacing:.06em}
.poweredby-fixed{position:fixed;left:14px;bottom:10px;z-index:15;pointer-events:none;
 opacity:.75}

/* ---------- Permits on the Map tab ----------
   The layer answers "what is going up around this parcel". These rules carry the four surfaces
   that make it readable: the filter bar, the in-map legend, the split chart/list row, and the
   nearest-permits table. Theme tokens only, so light mode follows without a second ruleset. */
.pmbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.pmlab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);
  margin-left:6px}
.pmlab:first-child{margin-left:0}
.chip{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:3px 11px;font-size:12px;cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--accb)}
.chip.on{background:var(--accb);border-color:var(--accb);color:#fff}
.pmnote{font-size:11.5px;color:var(--mut);margin:6px 0}

/* Split the space under the map: the year chart says how activity moved, the list says what is
   nearest. Collapses to one column when there is not room for two. */
.pmsplit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:900px){.pmsplit{grid-template-columns:1fr}}

.pmtable{width:100%;border-collapse:collapse;font-size:12px}
.pmtable tr{border-bottom:1px solid var(--line);cursor:pointer}
.pmtable tr:hover{background:var(--panel2)}
.pmtable td{padding:5px 6px;vertical-align:top}
.pmtable td.d{white-space:nowrap;color:var(--accb);font-weight:600;width:1%}
.pmtable td.d span{color:var(--mut);font-weight:400}
.pmtable td.v{text-align:right;white-space:nowrap}
.pmtable .t{color:var(--mut);font-size:11px}

/* Leaflet control, so it sits inside the map frame rather than above it. */
.pmlegend{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font-size:11px;color:var(--ink);line-height:1.5;
  box-shadow:0 1px 6px rgba(0,0,0,.35);max-width:150px}
.pmlegend h5{margin:4px 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mut);font-weight:600}
.pmlegend h5:first-child{margin-top:0}
.pmlegend div{display:flex;align-items:center;gap:6px}
.pmlegend i{width:11px;height:11px;border-radius:50%;flex:none;border:1px solid #222}
.pmlegend .dot{background:var(--mut);border-radius:50%;flex:none;display:inline-block}

/* ---- 3D map (Google Photorealistic 3D Tiles via CesiumJS, web/map3d.js) ---- */

.hidden{display:none !important}

/* The 2D/3D switch. Reuses .chip so it reads as the same control family as the permit filters
   directly below it, rather than as a second, competing kind of button. */
.mapmode{display:flex;gap:0;margin:0 0 8px}
.mapmode .chip{border-radius:0}
.mapmode .chip:first-child{border-radius:6px 0 0 6px}
.mapmode .chip:last-child{border-radius:0 6px 6px 0;border-left:none}

/* Same box as #map, so toggling between them does not move the page. `position:relative` is what
   the legend, the marker card and the orbit button are positioned against. */
#map3d{height:440px;border-radius:10px;border:1px solid var(--line);position:relative;
  overflow:hidden;background:var(--panel2)}
#map3d .m3dcanvas{position:absolute;inset:0}
/* Cesium's own widget CSS gives the container a black background and its canvas a fixed size;
   these two rules are what make it fill a 440px card instead. */
#map3d .cesium-widget,#map3d .cesium-widget canvas{width:100%;height:100%;background:transparent}

.m3dnote{padding:14px 16px;font-size:12.5px;color:var(--mut)}
.m3dnote.m3derr{color:var(--warn)}
.m3dnote .t{color:var(--mut);font-size:11.5px}

.m3dlegend{position:absolute;right:8px;bottom:8px;z-index:2}
.m3dorbit{position:absolute;left:8px;top:8px;z-index:2}

/* Camera cluster. The container is 440px tall and its four corners are already spoken for — orbit
   chip, permit card, legend, and Google's mandatory credits — so this sits on the left edge at
   mid-height. Buttons reuse .chip so they read as the same control family as the permit filters. */
.m3dnav{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.m3dnav .m3drow{display:flex;gap:4px}
.m3dnav .chip{width:26px;height:24px;padding:0;line-height:1;display:flex;
  align-items:center;justify-content:center;font-size:12px}

.m3dcompass{width:34px;height:34px;padding:0;margin-bottom:2px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.m3dcompass:hover{border-color:var(--accb)}
.m3dcompass svg{width:26px;height:26px;overflow:visible}
.m3dcompass circle{fill:none;stroke:var(--line);stroke-width:1}
/* The needle turns; the N stays put, so the dial reads as a compass and not as a spinning label. */
.m3dneedle{transform-origin:16px 16px;transition:transform .25s linear}
.m3dneedle path{fill:var(--acc)}
.m3dcompass text{fill:var(--mut);font-size:9px;text-anchor:middle;font-family:inherit}

/* Names the gestures the buttons do not cover. Muted and out of the way: it is a reminder, not a
   label, and it must never compete with the imagery for attention. */
.m3dhint{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:2;
  font-size:10.5px;color:#fff;opacity:.72;text-shadow:0 1px 3px rgba(0,0,0,.9);
  pointer-events:none;white-space:nowrap}

/* The picked-permit card. Pinned to a corner rather than tracking the marker across the screen —
   see m3dPickHandler in map3d.js for why. */
.m3dcard{display:none;position:absolute;right:8px;top:8px;z-index:2;max-width:290px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 26px 8px 10px;
  font-size:11.5px;line-height:1.5;color:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.35)}
.m3dclose{position:absolute;right:4px;top:2px;background:none;border:none;color:var(--mut);
  font-size:15px;line-height:1;cursor:pointer;padding:2px 5px;font-family:inherit}
.m3dclose:hover{color:var(--ink)}

/* Google's attribution, prepended into Cesium's credit container. Required by the Map Tiles API
   terms, so it is styled to stay legible over imagery rather than to stay out of the way. */
#map3d .cesium-widget-credits{font-size:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#map3d .m3dgoogle{height:16px;width:auto;flex:none}