/* Place and sector pages (scripts/build_places.py). Loaded after site.css. */
/* two page widths on the site: 720 px for text (About, Sources), 1040 px for tables (these pages, Compare,
   Analysis), both centred, the footer as wide as the page above it (design audit B15) */
.page.place, .page.place.wide { max-width: 1040px; }
main.place ~ .site-footer { max-width: 1040px; }
.page.place h1 { margin-bottom: 4px; }
.page.place h1 .alt { font-size: 18px; font-weight: 400; color: var(--muted); margin-inline-start: 8px; }
.page.place h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 650; margin: 28px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.facts { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.summary { margin: 8px 0; }
.fn, .muted { font-size: 13px; color: var(--muted); }
.page.place p.fn { max-width: none; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* a soft shadow at an edge that has more table behind it, so a phone reader sees it scrolls (audit C7) */
  background: linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) right / 10px 100% no-repeat scroll; }
p.cap { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.below { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) { .page .scroll > table { display: table; } }  /* the wrapper scrolls, not the table */
.page table.data td.est { color: var(--muted); font-style: italic; }
.page table.data { font-size: 14px; margin: 4px 0; }
.page table.data th, .page table.data td { padding: 4px 8px 4px 0; white-space: nowrap; }
.page table.data th[scope="row"] { font-weight: 400; white-space: normal; min-width: 120px; }
.page table.data thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.page table.data tbody.sides tr.first th, .page table.data tbody.sides tr.first td { border-top: 2px solid var(--border); }
.page table.data .of { color: var(--muted); }
.page table.hist td:last-child { white-space: normal; min-width: 140px; }
.page table.members th[scope="row"] { min-width: 140px; }
table.sortable thead th { cursor: pointer; }
table.sortable thead th[aria-sort="descending"]::after { content: " \25BE"; }
table.sortable thead th[aria-sort="ascending"]::after { content: " \25B4"; }
.w { display: none; }
main[data-within="all"] .w-all, main[data-within="sector"] .w-sector, main[data-within="district"] .w-district { display: inline; }
.within { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 6px; font-size: 13px; }
.within span { color: var(--muted); margin-inline-end: 4px; }
.within button { font: inherit; padding: 3px 9px; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); background: var(--surface); cursor: pointer; }
.within button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.sw { display: block; font-size: 11px; color: var(--muted); }
a.csv { font-size: 12px; }
.trendfig { margin: 8px 0 4px; max-width: 560px; }
svg.trend { width: 100%; height: auto; display: block; }
svg.trend .grid { stroke: var(--border); stroke-width: 1; }
svg.trend .ax { fill: var(--muted); font-size: 10px; font-family: inherit; }
@media (max-width: 600px) { svg.trend .ax { font-size: 14px; } }  /* about 9 px on a phone otherwise (D9) */
svg.trend polyline { fill: none; }
svg.trend polyline.loc { stroke-width: 2; }
svg.trend polyline.nat { stroke: var(--muted) !important; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
/* bloc colours: tables/palette.json "blocs", as on the map (audit B10) */
.s-right { stroke: #2c5aa0; fill: #2c5aa0; color: #2c5aa0; }
.s-left { stroke: #c2306f; fill: #c2306f; color: #c2306f; }
.s-arab { stroke: #16834f; fill: #16834f; color: #16834f; }
.s-unc { stroke: #8a6fb0; fill: #8a6fb0; color: #8a6fb0; }
.trendfig figcaption { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; }
.key::before { content: ""; display: inline-block; width: 14px; height: 0; border-top: 2px solid currentColor;
  vertical-align: middle; margin-inline-end: 4px; }
.key { color: var(--muted); }
.key.s-right::before { border-color: #2c5aa0; } .key.s-left::before { border-color: #c2306f; }
.key.s-arab::before { border-color: #16834f; } .key.nat::before { border-top: 1px dashed var(--muted); }
dl.links { font-size: 14px; margin: 0; }
dl.links dt { font-weight: 600; margin-top: 10px; }
dl.links dd { margin: 2px 0 0; }
ul.areas { list-style: none; padding: 0; margin: 0; columns: 3 220px; column-gap: 16px; font-size: 13px; }
ul.areas li { break-inside: avoid; }
.search { margin: 8px 0; }
.search label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }  /* label above the box (D10) */
.search input { font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); width: min(320px, 100%); }
/* comparison page (from the prototype) */
.switch { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 12px 0 4px; font-size: 13px; }
.switch span { color: var(--muted); margin-inline-end: 4px; }
.switch a { padding: 3px 9px; border: 1px solid var(--border); border-radius: 4px; text-decoration: none;
  color: var(--text); background: var(--surface); }
.switch a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.page table.st { font-size: 13px; min-width: 760px; }
.page table.st caption { text-align: start; color: var(--muted); font-size: 13px; padding: 0 0 6px; }
.page table.st th, .page table.st td { padding: 5px 6px; white-space: nowrap; }
.page table.st th:first-child, .page table.st td:first-child { position: sticky; inset-inline-start: 0;
  background: var(--bg); white-space: normal; min-width: 130px; padding-inline-start: 0; }
.page table.st th[scope="row"] { font-weight: 400; }
.page table.st tr.total th, .page table.st tr.total td { font-weight: 600; border-bottom: 2px solid var(--border); }
.spark { vertical-align: middle; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark circle { fill: var(--accent); }
.page ol.notes { font-size: 13px; color: var(--muted); padding-inline-start: 20px; }
.page ol.notes li { margin: 4px 0; }
html[dir="rtl"] .page th, html[dir="rtl"] .page td { text-align: right; }
html[dir="rtl"] .page td.n, html[dir="rtl"] .page th.n { text-align: left; }
html[dir="rtl"] .page table.data th, html[dir="rtl"] .page table.data td { padding: 4px 0 4px 8px; }
.page p.rule { font-size: 14px; margin: 4px 0 8px; }
details.members { margin: 4px 0 8px; }
details.members summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.page table.members td.nb { white-space: normal; min-width: 180px; font-size: 13px; }
.page table.members td.why { white-space: normal; min-width: 160px; font-size: 12px; color: var(--muted); }
table.rank .ra { display: none; }
table.rank tr.minor { display: none; }
main.all-ranks table.rank tr.minor { display: table-row; }
main.all-ranks table.rank .ra { display: inline; }
main.all-ranks table.rank .rb { display: none; }
.toggle { font-size: 13px; margin: 4px 0; }
@media (max-width: 720px) { .site-header nav a.wide-only { display: none; } .page.place h1 .alt { display: block; margin: 2px 0 0; } }
/* locator map (minimap.js): a framed box beside the facts, below them on a phone */
.lead { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; }
.lead-text { grid-column: 1; grid-row: 1; min-width: 0; }
.lead-text > :first-child { margin-top: 0; }
figure.minimap { grid-column: 2; grid-row: 1; margin: 2px 0 12px; padding: 3px; background: var(--surface);
  border: 1px solid var(--border); }
.minimap .mm { position: relative; height: 280px; background: var(--map-bg); overflow: hidden; }
.minimap .mm-map { position: absolute; inset: 0; display: block; }
.minimap .mm-map:focus-visible { outline-offset: -3px; }
.minimap .mm-map canvas { cursor: pointer; }
.minimap .mm-inset { position: absolute; top: 6px; inset-inline-start: 6px; width: 32px; height: 86px;
  border: 1px solid #8a8a8a; background: #c6dcea; pointer-events: none; opacity: 0; transition: opacity .2s; }
.minimap.ready .mm-inset { opacity: 1; }
.minimap .mm-inset img { display: block; width: 100%; height: 100%; }
.minimap .mm-inset i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #d0021b; box-shadow: 0 0 0 1.5px #fff; }
.minimap .mm-credit { position: absolute; bottom: 0; inset-inline-end: 0; font-size: 10px; line-height: 1.4;
  padding: 0 4px; background: rgba(255,255,255,.75); color: #333; }
.minimap .mm-credit a { color: #333; }
.minimap figcaption { font-size: 12px; line-height: 1.4; color: var(--muted); padding: 4px 2px 1px; }
.minimap.failed .mm { display: none; }
@media (max-width: 720px) {
  .lead { display: flex; flex-direction: column; align-items: stretch; }
  .lead-text { display: contents; }
  .lead-text > * { order: 2; }
  .lead-text > p.facts { order: 0; }
  figure.minimap { order: 1; margin: 4px 0 8px; }
  .minimap .mm { height: 220px; }
}