/* District market pages and the city report's Districts section: server/district-pages.mjs.
   Uses the site tokens; logical properties only, so the same rules work for dir="rtl". */
.dp-head h1 bdi{unicode-bidi:isolate}
.dp-alt{margin:var(--s-2) 0 0;color:var(--muted);font-size:var(--t-md)}
.dp-note{margin-block-start:var(--s-3);max-inline-size:72ch;line-height:1.55}
.dp-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.dp-tracked-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-block:var(--s-4)}
.dp-kpis-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-block-end:var(--s-3)}
.dp-stats{padding-block-start:var(--s-4)}
.dp-table{inline-size:100%;border-collapse:collapse}
.dp-table th,.dp-table td{padding:10px 14px;text-align:start;border-block-end:1px solid var(--line);font-size:var(--t-sm)}
.dp-table tbody tr:last-child th,.dp-table tbody tr:last-child td{border-block-end:0}
.dp-table thead th{color:var(--muted);font-weight:600}
.dp-table .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-table .dp-thin{color:var(--muted);text-align:end}
.dp-two{padding-block-start:0}
.dp-bars{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.dp-bars li{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) auto;gap:var(--s-3);align-items:center;font-size:var(--t-sm);color:var(--ink-2)}
.dp-bar{block-size:10px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden;display:flex}
.dp-bar i{display:block;block-size:100%;background:var(--heat-3);border-radius:var(--r-pill)}
.dp-bars strong{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.dp-collecting strong{display:block;font-size:var(--t-md);margin-block-end:var(--s-2)}
.dp-collecting p{margin:0 0 var(--s-3)}
.dp-progress-row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s-3);align-items:center;margin-block:var(--s-2);font-size:var(--t-sm)}
.dp-progress-row progress{inline-size:100%;block-size:10px;appearance:none;border:0;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.dp-progress-row progress::-webkit-progress-bar{background:var(--surface-3);border-radius:var(--r-pill)}
.dp-progress-row progress::-webkit-progress-value{background:var(--palm);border-radius:var(--r-pill)}
.dp-progress-row progress::-moz-progress-bar{background:var(--palm);border-radius:var(--r-pill)}
.dp-map{margin:0;max-inline-size:760px}
.dp-map svg{display:block;inline-size:100%;block-size:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
/* The map sits on the Atlas base map's land colour (atlas-basemap.mjs), in either theme. Listing dots are ink, not madder: on maps, madder means above the market. */
.dp-map-bg{fill:#ebe7e2}:root[data-theme=dark] .dp-map-bg{fill:#211a17}:root[data-theme=dark] .dp-map-label{stroke:#211a17}
.dp-map-outline{fill:var(--dune-soft);fill-opacity:.8;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.dp-map-dot{fill:var(--ink-2);fill-opacity:.5}
.dp-map-centre{fill:var(--ink);stroke:var(--surface);stroke-width:3}
.dp-map-near{fill:var(--surface);stroke:var(--muted);stroke-width:2}
.dp-map a:hover .dp-map-near,.dp-map a:focus .dp-map-near{stroke:var(--ink);fill:var(--surface-3)}
.dp-map-label{font-size:13px;fill:var(--ink-2);paint-order:stroke;stroke:#ebe7e2;stroke-width:3px;stroke-linejoin:round}
.dp-map figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-block-start:var(--s-2)}
.dp-key{display:inline-block;inline-size:12px;block-size:12px;border-radius:50%;vertical-align:middle}
.dp-key-centre{background:var(--ink)}
.dp-key-near{background:var(--surface);border:2px solid var(--muted);margin-inline-start:var(--s-3)}
/* Districts as ruled rows of links (link lists are never cards). */
.dp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:0 var(--s-5);border-block-start:1px solid var(--line)}
.dp-grid a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;block-size:100%;padding:var(--s-3) 0;border-block-end:1px solid var(--line);color:var(--ink);text-decoration:none}
.dp-grid a:hover strong,.dp-grid a:focus-visible strong{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.dp-grid strong{flex-basis:100%;font-size:var(--fs-15);font-weight:600}
.dp-grid small,.dp-grid span{color:var(--muted);font-size:var(--fs-13)}
.dp-method p{max-inline-size:72ch;line-height:1.6;margin:0 0 var(--s-3)}
.dp-cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:900px){.dp-kpis,.dp-tracked-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dp-bars li{grid-template-columns:minmax(80px,120px) minmax(0,1fr) auto}.dp-progress-row{grid-template-columns:1fr}.dp-kpis-2{grid-template-columns:1fr}}
.dp-bar i.heat-4{background:var(--heat-4)}.dp-bar i.heat-5{background:var(--heat-5)}