/* Toronto Condo Market — full-screen map app.
   The dark price map is the base layer; everything floats on it in solid dark
   panels. No gradients. */
:root{
  --map-bg:#0b1220;
  --panel:#091320; --panel-2:#0f1d33; --panel-3:#18294a;   /* dark blue, near-black */
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --ink:#eef3fb; --ink-2:#a6b6cf; --muted:#6d7d97;
  --accent:#f6821f; --accent-2:#ff9c47; --accent-wash:rgba(246,130,31,.16);
  --good:#34d399; --bad:#f87171;
  --flow-new:#f6821f; --flow-delisted:#4fb0d0;
  --g1:#8f4f1e; --g2:#b56a25; --g3:#d9862f; --g4:#efa04f; --g5:#f6c48a; --g6:#ffe2c4;
  --r:12px; --r-sm:8px;
  --topbar-h:54px;
  --shadow:0 10px 40px -12px rgba(0,0,0,.7);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--map-bg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.015em}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.tnum{font-variant-numeric:tabular-nums}.mono{font-family:var(--mono)}
button{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- map base ---------- */
#stage{position:fixed;inset:0;z-index:0}
#map{position:absolute;inset:0;background:var(--map-bg)}
.leaflet-container{background:var(--map-bg)!important;font-family:var(--sans)}
.leaflet-control-zoom{border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;
  margin-bottom:26px!important;margin-right:16px!important}
.leaflet-bar a{background:var(--panel-2)!important;color:var(--ink)!important;
  border-color:var(--line)!important}
.leaflet-bar a:hover{background:var(--panel-3)!important}
.leaflet-control-attribution{background:rgba(11,18,32,.72)!important;color:var(--muted)!important;
  font-size:10px!important;backdrop-filter:blur(4px)}
.leaflet-control-attribution a{color:var(--ink-2)!important}
/* crosshair registration marks */
.xh{position:fixed;width:14px;height:14px;pointer-events:none;z-index:400;opacity:.5}
.xh::before,.xh::after{content:"";position:absolute;background:var(--line-2)}
.xh::before{width:100%;height:1px;top:6.5px}.xh::after{height:100%;width:1px;left:6.5px}
.xh.tl{top:calc(var(--topbar-h) + 12px);left:12px}
.xh.tr{top:calc(var(--topbar-h) + 12px);right:12px}
.xh.br{bottom:12px;right:12px}

/* dark leaflet popup */
.leaflet-popup-content-wrapper{background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--panel-2);border:1px solid var(--line-2)}
.leaflet-popup-content{font-family:var(--sans);font-size:12.5px;margin:12px 14px;line-height:1.55}
.leaflet-popup-content .pp-price{font-size:16px;font-weight:680;color:#fff;letter-spacing:-.02em}
.leaflet-popup-content .pp-meta{color:var(--ink-2);margin-top:3px}
.leaflet-popup-content .pp-cell{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:6px}
.leaflet-popup-content a{color:var(--accent);font-weight:560}
.leaflet-popup-close-button{color:var(--muted)!important}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:1000;
  display:flex;align-items:center;gap:16px;padding:0 16px;
  background:rgba(6,12,24,.86);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:680;
  letter-spacing:-.025em;color:#fff;white-space:nowrap}
.mark .dot{width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.tb-mid{display:flex;align-items:center;gap:12px;flex:1;min-width:0;overflow:hidden}
.tb-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.readout{display:flex;gap:16px;font-family:var(--mono);font-size:10.5px}
.readout .r{display:flex;flex-direction:column;gap:1px;text-align:right;line-height:1.25}
.readout .r b{color:var(--ink);font-weight:600;font-size:12px}
.readout .r span{color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.readout .live{color:var(--good)}

.seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:9px;padding:3px}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:inherit;
  font-weight:560;padding:6px 15px;border-radius:6px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--accent);color:#fff}
.seg-sm button{padding:5px 10px;font-size:12.5px}
.seg-sm button.on{background:rgba(255,255,255,.14);color:#fff}

/* bed chips */
.chips{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;white-space:nowrap}
.chip{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--ink-2);font:inherit;font-size:12px;font-weight:560;padding:5px 11px;
  border-radius:7px;cursor:pointer;white-space:nowrap;transition:.13s}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:#fff;border-color:#fff;color:#0b1220}
.chip .c-n{color:var(--muted);font-weight:450;margin-left:5px;font-variant-numeric:tabular-nums}
.chip.on .c-n{color:#5a6b85}

/* ---------- left insight panel ---------- */
.panel{position:fixed;left:16px;top:calc(var(--topbar-h) + 14px);width:328px;z-index:800;
  max-height:calc(100vh - var(--topbar-h) - 30px);
  background:rgba(8,16,32,.96);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .4s var(--ease),opacity .3s}
.panel.collapsed{transform:translateX(calc(-100% - 22px))}
.panel-collapse{position:absolute;right:-13px;top:18px;width:26px;height:26px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer;
  z-index:2;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:var(--shadow)}
.panel.collapsed .panel-collapse{right:-40px;transform:rotate(180deg)}
.panel-scroll{overflow-y:auto;padding:16px 16px 18px}
.p-head{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.p-title{font-size:15px;font-weight:680;letter-spacing:-.02em;color:#fff}
.map-modes{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:8px;padding:3px;width:100%}
.map-modes button{flex:1;appearance:none;border:0;background:transparent;color:var(--ink-2);
  font:inherit;font-size:12.5px;font-weight:560;padding:6px;border-radius:5px;cursor:pointer}
.map-modes button.on{background:rgba(255,255,255,.13);color:#fff}

/* KPI cluster inside panel */
.kpi-cluster{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.kpi{background:var(--panel);padding:10px 11px}
.kpi.hl{grid-column:1/-1;background:var(--panel-3)}
.kpi .k-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi .k-val{font-size:16px;font-weight:680;letter-spacing:-.02em;margin-top:5px;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.kpi.hl .k-val{font-size:26px}
.kpi .k-sub{font-size:10.5px;color:var(--ink-2);margin-top:3px}
.kpi.hl .k-sub{font-size:11.5px}

.p-sec{margin-bottom:18px}
.rail-h{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
.rail-h .mono{color:var(--ink-2)}
/* price scale */
.scale .row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2);
  padding:3.5px 0;font-variant-numeric:tabular-nums}
.scale .row i{width:15px;height:15px;border-radius:4px;flex:none}
.scale .row .bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.scale .row .bar b{display:block;height:100%;border-radius:3px}
.scale .row .cnt{color:var(--muted);font-family:var(--mono);font-size:10px;min-width:24px;text-align:right}
/* extremes */
.ex-row{display:flex;align-items:center;gap:9px;padding:3px 5px;margin:0 -5px;border-radius:6px;
  cursor:pointer;transition:background .12s}
.ex-row:hover{background:rgba(255,255,255,.05)}
.ex-row:hover .nm{color:var(--accent)}
.ex-row .rk{font-family:var(--mono);font-size:10px;color:var(--muted);width:13px}
.ex-row .swatch{width:8px;height:20px;border-radius:2px;flex:none}
.ex-row .nm{color:var(--ink);font-size:12px;font-weight:540;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-row .pr{color:var(--ink-2);font-size:12px;font-variant-numeric:tabular-nums;font-weight:600}
/* points filters */
.map-controls{display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--line);padding-top:15px}
.mc-field label{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:7px}
.mc-field select{width:100%;appearance:none;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;font:inherit;font-size:12.5px}
.mc-field input[type=range]{width:100%;accent-color:var(--accent)}
.mc-val{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:6px}

/* ---------- bottom sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:rgba(6,12,26,.97);backdrop-filter:blur(16px);border-top:1px solid var(--line-2);
  transform:translateY(calc(100% - 46px));transition:transform .45s var(--ease);
  max-height:82vh;display:flex;flex-direction:column;box-shadow:0 -14px 44px -20px rgba(0,0,0,.8)}
.sheet.open{transform:translateY(0)}
.sheet-handle{height:46px;flex:none;width:100%;appearance:none;border:0;background:transparent;
  color:var(--ink);font:inherit;font-weight:600;font-size:13px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:9px;letter-spacing:.01em}
.sheet-handle .ch{color:var(--muted);transition:transform .4s var(--ease);font-size:11px}
.sheet.open .sheet-handle .ch{transform:rotate(180deg)}
.sheet-handle .cnt{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400}
.sheet-body{overflow-y:auto;padding:6px 24px 30px}
.sheet-inner{max-width:1180px;margin:0 auto}
.sheet h3{font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:18px 0 12px}
.yield-note{font-size:12px;color:var(--ink-2);margin:-4px 0 12px;max-width:640px}

/* map location pin (pulsing) */
.nb-pin{position:relative}
.nb-pin .ring{position:absolute;width:46px;height:46px;left:-23px;top:-23px;border-radius:50%;
  border:2px solid var(--accent);animation:pin-pulse 1.8s var(--ease) infinite}
.nb-pin .core{position:absolute;width:12px;height:12px;left:-6px;top:-6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(76,141,255,.28)}
@keyframes pin-pulse{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.15);opacity:0}}
/* clickable table name */
td.name-cell{cursor:pointer}
td.name-cell:hover .name{color:var(--accent)}

/* charts */
.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.chart-card{padding:15px 15px 6px}
.chart-card .c-title{font-size:12.5px;font-weight:620;color:var(--ink)}
.chart-card .c-legend{display:flex;gap:14px;margin-top:6px;font-size:11px;color:var(--ink-2)}
.chart-card .c-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.chart-box{height:170px;margin-top:6px}

/* table */
.nb-toolbar{display:flex;gap:12px;align-items:center;margin:6px 0 12px;flex-wrap:wrap}
.search{position:relative}
.search input{appearance:none;border:1px solid var(--line);background:var(--panel-2);
  border-radius:8px;padding:8px 12px 8px 32px;font:inherit;font-size:13px;width:250px;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.search svg{position:absolute;left:10px;top:9px;color:var(--muted)}
.table-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl-scroll{overflow-x:auto;max-height:44vh;overflow-y:auto}
table.nb{width:100%;border-collapse:collapse;font-size:12.5px}
table.nb th,table.nb td{padding:10px 14px;text-align:right;white-space:nowrap}
table.nb th:first-child,table.nb td:first-child{text-align:left}
table.nb thead th{position:sticky;top:0;background:var(--panel-2);font-family:var(--mono);
  font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  cursor:pointer;user-select:none;border-bottom:1px solid var(--line);z-index:1}
table.nb thead th:hover{color:#fff}
table.nb thead th .arw{color:var(--accent);margin-left:3px}
table.nb tbody tr{border-bottom:1px solid var(--line)}
table.nb tbody tr:hover{background:rgba(255,255,255,.03)}
table.nb td.tnum{font-variant-numeric:tabular-nums}
table.nb td .name{font-weight:560;color:#fff}
td.price-cell .pricebar{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;width:100%}
.pricebar .track{width:50px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pricebar .track b{display:block;height:100%;border-radius:3px;background:var(--accent)}
td.spark{width:110px}
.show-more{display:block;width:100%;text-align:center;padding:11px;background:var(--panel);border:0;
  border-top:1px solid var(--line);color:var(--accent);font:inherit;font-weight:560;cursor:pointer}
.show-more:hover{background:var(--panel-2)}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:560;
  background:rgba(255,255,255,.07);color:var(--ink-2)}
.pill.cut{background:rgba(248,113,113,.16);color:#fca5a5}
.sheet-foot{color:var(--muted);font-size:11.5px;margin-top:20px;line-height:1.6}
.sheet-foot a{color:var(--ink-2)}

/* market summary chip (floats over map bottom-center, optional) */
.summary{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:700;
  background:rgba(8,16,32,.93);border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100vw - 380px);overflow:hidden;text-overflow:ellipsis}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .panel{left:10px;right:10px;width:auto;top:auto;bottom:56px;max-height:52vh;
    transform:none}
  .panel.collapsed{transform:translateY(calc(100% + 70px))}
  .panel-collapse{display:none}
  .kpi-cluster{grid-template-columns:1fr 1fr 1fr}
  .tb-mid .chips .lbl{display:none}
  .readout{display:none}
  .charts{grid-template-columns:1fr}
  .summary{display:none}
  .xh{display:none}
  .sheet{max-height:88vh}
}
@media(max-width:560px){
  .topbar{gap:8px;padding:0 10px}
  .mark span:not(.dot){display:none}
  .tb-mid{gap:8px}
}