/* dashkit: the shared look of the story dashboards – the same drawing as the city and the story page.
   Grid paper shows through (nothing is a white card); thin drafting lines with 3px corners, no shadows;
   the city's palette: glass blue for the data, dark ink, red only for reference lines, and muted washes
   for second series. Light and dark are both chosen, not flipped. */
.dk {
  color-scheme: light;
  --dk-text: #16181d; --dk-text-2: #4f545c; --dk-muted: #5e636c; --dk-rule: #cbc6b9; --dk-grid: #e3dfd5;
  --dk-surface: #f4f2ec; --dk-series: #3f86d8; --dk-series-hi: #2a6db8; --dk-ref: #b6b0a3; --dk-focus: #1c5cab; --dk-on: #23272f; --dk-on-text: #f4f2ec;
  --dk-s0: #c9dcf2; --dk-s1: #94bbe8; --dk-s2: #5e98dc; --dk-s3: #3f86d8; --dk-s4: #1f4f8a; --dk-series-2: #23272f; --dk-none: #e3dfd5;
  --dk-ink: #23272f; --dk-red: #c2410c; --dk-wash-1: #9fb6cc; --dk-wash-2: #d8bc8e; --dk-wash-3: #b6b0a3;
  --dk-serif: "Noto Serif Hebrew", Georgia, serif; --dk-sans: "Assistant", system-ui, sans-serif;
  font-family: var(--dk-sans); color: var(--dk-text); font-size: 16px; line-height: 1.55;
  max-width: 1180px; margin-inline: auto; padding: 8px clamp(16px, 4vw, 40px) 40px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .dk {
    color-scheme: dark;
    --dk-text: #e7eef7; --dk-text-2: #c3cedd; --dk-muted: #93a3b8; --dk-rule: #34496b; --dk-grid: #1c2c45;
  --dk-surface: #0e1a2b; --dk-series: #5fa4ec; --dk-series-hi: #8fc0f2; --dk-ref: #5c6b80; --dk-focus: #8db4ff; --dk-on: #e7eef7; --dk-on-text: #0e1a2b;
  --dk-s0: #1b3556; --dk-s1: #24507f; --dk-s2: #3a74b4; --dk-s3: #5fa4ec; --dk-s4: #b4d3f6; --dk-series-2: #e7eef7; --dk-none: #1c2c45;
  --dk-ink: #e7eef7; --dk-red: #ff9b7a; --dk-wash-1: #4c6788; --dk-wash-2: #8a7552; --dk-wash-3: #5c6b80;
    --dk-ink: #e7eef7; --dk-red: #ff9b7a; --dk-wash-1: #4c6788; --dk-wash-2: #8a7552; --dk-wash-3: #5c6b80;
  }
}
:root[data-theme="dark"] .dk {
  color-scheme: dark;
  --dk-text: #e7eef7; --dk-text-2: #c3cedd; --dk-muted: #93a3b8; --dk-rule: #34496b; --dk-grid: #1c2c45;
  --dk-surface: #0e1a2b; --dk-series: #5fa4ec; --dk-series-hi: #8fc0f2; --dk-ref: #5c6b80; --dk-focus: #8db4ff; --dk-on: #e7eef7; --dk-on-text: #0e1a2b;
  --dk-s0: #1b3556; --dk-s1: #24507f; --dk-s2: #3a74b4; --dk-s3: #5fa4ec; --dk-s4: #b4d3f6; --dk-series-2: #e7eef7; --dk-none: #1c2c45;
  --dk-ink: #e7eef7; --dk-red: #ff9b7a; --dk-wash-1: #4c6788; --dk-wash-2: #8a7552; --dk-wash-3: #5c6b80;
}
.dk * { box-sizing: border-box; }
.dk :focus-visible { outline: 2px solid var(--dk-focus); outline-offset: 2px; border-radius: 3px; }

.dk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0; margin: 8px 0 28px;
  border-block: 1px solid var(--dk-rule); }
.dk-tile { padding: 14px 16px 14px 0; background: transparent; }
.dk-tile + .dk-tile { border-inline-start: 1px solid var(--dk-rule); padding-inline-start: 16px; }
.dk-tile .lbl { font-size: 13.5px; font-weight: 600; color: var(--dk-muted); }
/* a clean technical face for the numbers: the sans, with lining tabular figures */
.dk-tile .val { font: 700 30px/1.15 var(--dk-sans); margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.dk-tile .sub { font-size: 13px; color: var(--dk-muted); margin-top: 2px; }
@media (max-width: 560px) {
  .dk-tile, .dk-tile + .dk-tile { padding: 12px 0; border-inline-start: 0; }
  .dk-tile + .dk-tile { border-top: 1px solid var(--dk-rule); }
}

.dk-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 16px; }
.dk-card { background: transparent; border: 1px solid var(--dk-rule); border-radius: 3px; padding: 16px 18px 18px; margin-bottom: 16px; min-width: 0; }
.dk-card h2 { font: 800 19px/1.3 var(--dk-serif); margin: 0 0 2px; }
.dk-card .dk-sub { margin: 0 0 12px; font-size: 14px; color: var(--dk-text-2); }
.dk-card .dk-note { margin: 10px 0 0; font-size: 13.5px; color: var(--dk-text-2); border-inline-start: 3px solid var(--dk-rule); padding-inline-start: 10px; }
.dk-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 12px; }
.dk-controls .dk-label { font-size: 13.5px; color: var(--dk-text-2); }
.dk-segs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dk-rule); border-radius: 3px; overflow: hidden; }
.dk-seg { font: 600 14px var(--dk-sans); color: var(--dk-text-2); background: transparent; border: 0; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.dk-seg + .dk-seg { border-inline-start: 1px solid var(--dk-rule); }
.dk-seg[aria-pressed="true"] { background: var(--dk-on); color: var(--dk-on-text); }

.dk-hbars, .dk-pairs { display: grid; gap: 6px; }
.dk-hrow, .dk-prow { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr; align-items: center; gap: 4px 10px; padding: 2px 4px; border-radius: 3px; cursor: default; }
.dk-hrow:hover, .dk-hrow:focus-visible, .dk-prow:hover, .dk-prow:focus-visible { background: color-mix(in srgb, var(--dk-series) 9%, transparent); }
.dk-hname { font-size: 14.5px; overflow-wrap: anywhere; }
/* the track: the bar, then its value right after the bar's end (room for the longest value is kept at
   the far end, so a full-length bar still has its label beside it) */
.dk-htrack { display: flex; align-items: center; gap: 6px; min-height: 16px; padding-inline-end: var(--dk-valw, 5ch); }
.dk-hbar { --bar: var(--dk-series); flex: none; display: block; height: 14px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--bar) 70%, var(--dk-ink)) 0 1.2px, transparent 1.2px 5px),
              color-mix(in srgb, var(--bar) 58%, var(--dk-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ink) 75%, transparent); border-radius: 0 2px 2px 0; }
[dir="rtl"] .dk-hbar, .dk .dk-hbar { border-radius: 2px 0 0 2px; }
.dk-hbar.b { --bar: var(--dk-wash-2); }
.dk-hrow.is-muted .dk-hbar { --bar: var(--dk-wash-3); }
.dk-hval { flex: none; font-size: 13.5px; color: var(--dk-text-2); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.dk-pbars { display: grid; gap: 3px; }
.dk-pline { display: block; }
.dk-pline .dk-hbar { height: 11px; }

.dk-legend, .dk-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--dk-text-2); margin-bottom: 10px; }
.dk-key, .dk-step { display: inline-flex; align-items: center; gap: 6px; }
.dk-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 2px; background: var(--dk-series); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ink) 60%, transparent); }
.dk-swatch.a { background: color-mix(in srgb, var(--dk-series) 58%, var(--dk-surface)); }
.dk-swatch.b { background: color-mix(in srgb, var(--dk-wash-2) 58%, var(--dk-surface)); }
.dk-swatch.s0 { background: var(--dk-s0); } .dk-swatch.s1 { background: var(--dk-s1); } .dk-swatch.s2 { background: var(--dk-s2); }
.dk-swatch.s3 { background: var(--dk-s3); } .dk-swatch.s4 { background: var(--dk-s4); }
.dk-legend-title { font-size: 13.5px; font-weight: 700; color: var(--dk-text); margin-bottom: 4px; }

.dk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dk-svg .dk-grid { stroke: var(--dk-grid); stroke-width: 1; }
.dk-svg .dk-axis { stroke: var(--dk-text-2); stroke-width: 1; }
.dk-svg .dk-tick { font: 12px var(--dk-sans); fill: var(--dk-muted); }
.dk-svg .dk-mark { stroke: color-mix(in srgb, var(--dk-ink) 75%, transparent); stroke-width: .8; }
.dk-svg .dk-hatch-bg { fill: color-mix(in srgb, var(--dk-series) 58%, var(--dk-surface)); }
.dk-svg .dk-hatch-line { stroke: color-mix(in srgb, var(--dk-series) 70%, var(--dk-ink)); stroke-width: 1.2; }
.dk-svg .dk-hit { fill: transparent; }
.dk-svg .dk-col:hover .dk-mark, .dk-svg .dk-col:focus .dk-mark { stroke: var(--dk-ink); stroke-width: 1.4; }
.dk-svg .dk-col:focus { outline: none; }

.dk-mapwrap { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; align-items: stretch; }
/* the table beside a map is exactly as tall as the map (it scrolls inside): the map sets the row's
   height, the table column adds none of its own (contain: size) and stretches to it */
.dk-mapwrap > :last-child { display: flex; flex-direction: column; min-height: 0; contain: size; }
.dk-mapwrap > :last-child .dk-table-wrap { flex: 1 1 0; min-height: 0; max-height: none; }
.dk-map { display: block; width: 100%; height: auto; max-height: 78vh; }
.dk-area { stroke: var(--dk-surface); stroke-width: 0.8; stroke-linejoin: round; cursor: default; }
.dk-area.s-1 { fill: var(--dk-none); } .dk-area.s0 { fill: var(--dk-s0); } .dk-area.s1 { fill: var(--dk-s1); }
.dk-area.s2 { fill: var(--dk-s2); } .dk-area.s3 { fill: var(--dk-s3); } .dk-area.s4 { fill: var(--dk-s4); }
.dk-area:hover, .dk-area:focus { stroke: var(--dk-text); stroke-width: 1.6; outline: none; }
.dk-maplegend { margin-top: 10px; }
@media (max-width: 760px) {
  .dk-mapwrap { grid-template-columns: 1fr; } .dk-map { max-height: 70vh; }
  .dk-mapwrap > :last-child { contain: none; }
  .dk-mapwrap > :last-child .dk-table-wrap { flex: none; max-height: 560px; }
}

.dk-table-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; border: 1px solid var(--dk-rule); border-radius: 3px; }
.dk-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.dk-table caption { text-align: start; font-weight: 700; padding: 8px 10px; }
.dk-table th, .dk-table td { padding: 7px 10px; text-align: start; border-bottom: 1px solid var(--dk-grid); }
.dk-table th { position: sticky; top: 0; background: var(--dk-surface); z-index: 1; }
.dk-table th button { font: 700 13.5px var(--dk-sans); color: var(--dk-text); background: none; border: 0; padding: 4px 0; cursor: pointer; min-height: 32px; }
.dk-table th[aria-sort="descending"] button::after { content: " ↓"; }
.dk-table th[aria-sort="ascending"] button::after { content: " ↑"; }
.dk-table .num { text-align: end; }

.dk-method { font-size: 14.5px; color: var(--dk-text-2); }
.dk-method h2 { color: var(--dk-text); }
.dk-method ul { margin: 6px 0 0; padding-inline-start: 20px; }
.dk-method li + li { margin-top: 4px; }

.dk-tip { position: absolute; z-index: 10; pointer-events: none; max-width: 260px; padding: 8px 10px; font: 14px/1.4 var(--dk-sans);
  color: var(--dk-text, #16181d); background: var(--dk-surface, #fff); border: 1px solid var(--dk-ink, #23272f); border-radius: 3px;
  direction: rtl; }
.dk-tip b { display: block; margin-bottom: 2px; }

/* One hue per chart, from muted tones that sit with the city drawing (glass blue, teal, sage, ochre,
   terracotta, rose, slate violet). Every hue is drawn the same way – hatched, softened toward the paper,
   with a thin ink outline – so colour tells charts apart without turning into solid app bars.
   Red stays reserved for reference lines. */
.dk .hue-blue    { --dk-series: #3f86d8; }
.dk .hue-aqua    { --dk-series: #2f9488; }
.dk .hue-green   { --dk-series: #6a9a45; }
.dk .hue-yellow  { --dk-series: #c99a2e; }
.dk .hue-orange  { --dk-series: #c9733f; }
.dk .hue-magenta { --dk-series: #b5577d; }
.dk .hue-violet  { --dk-series: #7468b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dk .hue-blue    { --dk-series: #5fa4ec; }
  :root:not([data-theme="light"]) .dk .hue-aqua    { --dk-series: #4fbfb1; }
  :root:not([data-theme="light"]) .dk .hue-green   { --dk-series: #8cbf68; }
  :root:not([data-theme="light"]) .dk .hue-yellow  { --dk-series: #e0b852; }
  :root:not([data-theme="light"]) .dk .hue-orange  { --dk-series: #e6935e; }
  :root:not([data-theme="light"]) .dk .hue-magenta { --dk-series: #d982a5; }
  :root:not([data-theme="light"]) .dk .hue-violet  { --dk-series: #a39ae0; }
}
:root[data-theme="dark"] .dk .hue-blue    { --dk-series: #5fa4ec; }
:root[data-theme="dark"] .dk .hue-aqua    { --dk-series: #4fbfb1; }
:root[data-theme="dark"] .dk .hue-green   { --dk-series: #8cbf68; }
:root[data-theme="dark"] .dk .hue-yellow  { --dk-series: #e0b852; }
:root[data-theme="dark"] .dk .hue-orange  { --dk-series: #e6935e; }
:root[data-theme="dark"] .dk .hue-magenta { --dk-series: #d982a5; }
:root[data-theme="dark"] .dk .hue-violet  { --dk-series: #a39ae0; }

/* a broken bar: too long for the scale of the other bars – a zigzag cut near its end, its full value beside it */
.dk-hbar.is-broken { position: relative; }
.dk-cut { position: absolute; inset-block: -3px; inset-inline-end: 16px; width: 9px; background: var(--dk-surface);
  clip-path: polygon(0 0, 55% 0, 100% 17%, 45% 33%, 100% 50%, 45% 67%, 100% 83%, 55% 100%, 0 100%, 45% 83%, 0 67%, 45% 50%, 0 33%, 45% 17%); }
.dk-break-note { margin-top: 6px; }
.dk-svg .dk-vlabel { font-size: 11px; fill: var(--dk-text-2); font-variant-numeric: tabular-nums; }
.dk-svg .dk-vlabel.is-key { font-weight: 700; fill: var(--dk-text); paint-order: stroke; stroke: var(--dk-surface); stroke-width: 3px; }