/* Chart + layout tokens.
   Categorical hues are the validated dark-surface steps (blue / orange / aqua), assigned in
   fixed order and never cycled. Verified with the palette validator on the all-pairs list:
   worst CVD dE 9.4, worst normal-vision dE 20.9, all >= 3:1 against the dark surface. */

:root {
  /* Framework caps the whole body at this width and centres it. The default 1440px left a
     wide empty gutter on the right once the sidebar was subtracted; charts now have room to
     grow into instead. */
  --observablehq-max-width: 1760px;

  --surface-1: #1b1b1b;
  --surface-2: #232323;
  --border-1: #343434;

  --ink-1: #f5f5f4;
  --ink-2: #c7c5c0;
  --ink-3: #8b8983;

  /* categorical - fixed order */
  --series-1: #3987e5; /* Flanders  / House */
  --series-2: #d95926; /* Wallonia  / Apartment */
  --series-3: #199e70; /* Brussels  */

  /* status */
  --good: #199e70;
  --warn: #c98500;
  --bad: #e66767;

  --accent: #f59e0b; /* carried over from the previous dashboard */
}

/* ---------- prose + column width ---------- */
/* Framework's 17px body is a touch small for a wide reading column. */
body { font-size: 18px; line-height: 1.55; }

/* Framework caps `p, table, figure, figcaption, h1..h6` at a 640px reading measure. On a
   dashboard the charts ARE the content, and that cap was clamping every plot to 640px no
   matter how much room the column had, which is what left the wide gutter on the right.
   Charts, tables and callouts get the full column; running prose keeps a bounded measure,
   because 1300px-long lines of text are genuinely hard to read. */
#observablehq-main :is(figure, table, figcaption, h1, h2, h3, h4, h5, h6) {
  max-width: none;
}

#observablehq-main :is(p, ul, ol, blockquote) {
  max-width: 900px;
}

#observablehq-main .note {
  max-width: none;
}

/* Plot sizes its SVG from the measured container width, so it must never be allowed to
   overflow that container and reintroduce a horizontal scrollbar. */
#observablehq-main figure svg {
  max-width: 100%;
}

/* ---------- KPI tiles ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 1rem 0 1.5rem;
}

.kpi {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 14px 16px;
}

.kpi h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.kpi .value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

.kpi .delta {
  font-size: 14px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.kpi .delta.up { color: var(--good); }
.kpi .delta.down { color: var(--bad); }
.kpi .delta.flat { color: var(--ink-3); }
.kpi .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* ---------- notices ---------- */
.note {
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 16px;
  color: var(--ink-2);
  margin: 1rem 0;
}

.note strong { color: var(--ink-1); }

.note.info {
  border-left-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 8%, transparent);
}

/* ---------- tables ---------- */
/* Full column width would strand nine columns across 1300px with huge gaps between
   them; this keeps the row scannable as a unit. */
.tbl { width: 100%; max-width: 1180px; border-collapse: collapse; font-size: 15px; }
.tbl th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border-1);
  padding: 8px 12px 8px 0;
  position: sticky;
  top: 0;
  background: var(--surface-1);
}
.tbl td {
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-1) 45%, transparent);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.tbl td.name { color: var(--ink-1); }
.tbl-scroll { max-height: 560px; overflow-y: auto; overflow-x: auto; }

/* Wide content must scroll inside its own box, never the page body. */
.scroll-x { overflow-x: auto; }


.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); margin: 4px 0 10px; }
.legend .item { display: flex; align-items: center; gap: 6px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 2px; }