/* Property portal - tokens from the dataviz reference palette (validated 2026-10-26: 6 categorical slots pass all
   hard gates light and dark; light slots 3-5 are under 3:1 so every chart carries a legend and a table view). */
:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f3f2ee;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --ring: rgba(11,11,11,0.10);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --other: #b5b3ab;
  --q1: #b7d3f6; --q2: #86b6ef; --q3: #5598e7; --q4: #2a78d6; --q5: #1c5cab; --q6: #104281;
  --good: #006300; --warn-bg: #fff4d6; --warn-ink: #6b4a00; --link: #1c5cab;
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
    --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --ring: rgba(255,255,255,0.10);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --other: #6b6a64;
    --q1: #184f95; --q2: #1c5cab; --q3: #256abf; --q4: #3987e5; --q5: #6da7ec; --q6: #9ec5f4;
    --good: #0ca30c; --warn-bg: #3a2f12; --warn-ink: #f5d58a; --link: #86b6ef;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
  --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --ring: rgba(255,255,255,0.10);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --other: #6b6a64;
  --q1: #184f95; --q2: #1c5cab; --q3: #256abf; --q4: #3987e5; --q5: #6da7ec; --q6: #9ec5f4;
  --good: #0ca30c; --warn-bg: #3a2f12; --warn-ink: #f5d58a; --link: #86b6ef;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-size: 14px; line-height: 1.45; }
a { color: var(--link); }
header.top { position: sticky; top: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--grid); }
header.top .bar { max-width: 1320px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
header.top .brand { font-weight: 650; font-size: 16px; }
header.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
header.top nav a { text-decoration: none; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; }
header.top nav a.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
header.top .theme { margin-left: auto; background: none; border: 1px solid var(--grid); color: var(--ink-2); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
main { max-width: 1320px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 6px 0 2px; font-weight: 650; }
.sub { color: var(--ink-2); margin: 0 0 14px; }
.banner { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0 0 16px; }
.filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
.filters select, .filters input { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--grid); border-radius: 8px; padding: 6px 8px; min-width: 120px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--ring); border-radius: var(--radius); padding: 12px 14px; }
.kpi .label { color: var(--ink-2); font-size: 12px; }
.kpi .value { font-size: 24px; font-weight: 600; margin-top: 2px; }
.kpi .note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: var(--radius); padding: 14px; min-width: 0; }
.card.wide { grid-column: 1 / -1; }
.card h2 { font-size: 15px; margin: 0; font-weight: 600; }
.card .desc { color: var(--ink-2); font-size: 12px; margin: 2px 0 10px; }
.card .head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.card .toggle { font: inherit; font-size: 12px; background: none; border: 1px solid var(--grid); color: var(--ink-2); border-radius: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin: 4px 0 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
svg text { fill: var(--ink-2); font-size: 11px; }
svg .axis-label { fill: var(--muted); }
svg .value-label { fill: var(--ink); font-size: 11px; }
.tip { position: fixed; pointer-events: none; z-index: 2000; background: var(--surface); color: var(--ink); border: 1px solid var(--grid); border-radius: 8px; padding: 7px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-width: 280px; display: none; }
.tip b { font-size: 13px; }
.tip .row { display: flex; align-items: center; gap: 6px; }
.tip .key { width: 12px; height: 2px; display: inline-block; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 6px 8px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
table.data th { color: var(--ink-2); font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { max-height: 520px; overflow: auto; }
.empty { color: var(--muted); padding: 18px 4px; }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--ink-2); }
.pager button { font: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--grid); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.map { height: 460px; border-radius: 8px; }
.pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.heat td.num { color: var(--ink); }
.loading { opacity: 0.45; transition: opacity .15s; }
footer { max-width: 1320px; margin: 10px auto 30px; padding: 0 16px; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .kpi .value { font-size: 20px; } }
header.top .pdf { margin-left: auto; background: none; border: 1px solid var(--grid); color: var(--ink-2); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
header.top .pdf + .theme { margin-left: 0; }
header.top .pdf:disabled { opacity: 0.6; cursor: progress; }

/* print layout - used by the server's PDF renderer (print=1) and by the browser's own print */
.print-meta { display: none; }
html.print .print-meta { display: block; color: var(--ink-2); font-size: 12px; margin: 0 0 8px; }
html.print body { width: 186mm; margin: 0; background: #fff; }   /* A4 portrait less 12 mm margins */
html.print table.data { font-size: 11px; }
html.print table.data th, html.print table.data td { padding: 4px 5px; }
html.print table.data th { white-space: normal; }
html.print.landscape body { width: 273mm; }
html.print main, html.print footer { max-width: none; padding-left: 0; padding-right: 0; }
html.print header.top .bar { padding-left: 0; padding-right: 0; }
html.print .leaflet-control-zoom { display: none; }
html.print header.top { position: static; }
html.print header.top nav, html.print header.top button, html.print .card .toggle, html.print .pager { display: none; }
html.print .scroll { max-height: none; overflow: visible; }
html.print .filters label { flex-direction: row; gap: 4px; font-size: 12px; }
html.print .filters .printed-value { color: var(--ink); font-weight: 600; }
html.print .filters label + label::before { content: "·"; color: var(--muted); margin-right: 4px; }
html.print .filters { gap: 6px; }
@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main, footer { max-width: none; padding-left: 0; padding-right: 0; }
  header.top { position: static; border-bottom: 0; }
  header.top .bar { padding-left: 0; padding-right: 0; }
  header.top nav, header.top button, .card .toggle, .pager, .tip { display: none !important; }
  .scroll { max-height: none; overflow: visible; }
  .card, .kpi, .banner, tr, .legend { break-inside: avoid; }
  .card:has(table.data) { break-inside: auto; }   /* a long table flows across pages instead of leaving one blank */
  .card .head, h1, .sub { break-after: avoid; }
  table.data th { position: static; }
}