:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
#map { position: absolute; inset: 0; background: #f4f1e6; }

/* ---------- focus ---------- */
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #007aff; outline-offset: 2px;
}
/* #searchbox:focus-within draws the ring for the input */
#search:focus-visible { outline: 0; }

/* ---------- button reset for rows and cards rendered as <button> ---------- */
button.card, button.crow, button.sug, button.ov-stat, button.nb {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: left;
  border: 0; width: 100%; cursor: pointer; background: none;
}
button.card { display: block; background: #fff; }
button.crow { display: flex; border-bottom: .5px solid rgba(0,0,0,.06); }
button.crow:last-child, button.crow.cmp-open { border-bottom: 0; }
button.sug { display: flex; }
button.ov-stat { display: flex; flex-direction: column; text-align: center; background: rgba(142,142,147,.05); }
button.nb { display: flex; background: #fff; }

/* ---------- chrome: rail + panel ---------- */
#chrome {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 1000;
  display: flex; pointer-events: none; overflow: hidden;
}
#chrome > * { pointer-events: auto; }

#rail {
  width: 50px; background: rgba(255,255,255,.82); backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-right: .5px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px;
}
.railbtn {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, transform 160ms var(--ease-out);
}
.railbtn .sf { width: 17px; height: 17px; color: #86868b; transition: color .15s ease; }
.railbtn.active { background: #007aff; }
.railbtn.active .sf { color: #fff; }
/* "current" marks the page the panel shows; "active" is reserved for the panel toggle. */
.railbtn.current { background: rgba(0,122,255,.12); }
.railbtn.current .sf { color: #007aff; }

#panel {
  width: 400px; background: rgba(255,255,255,.88); backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-right: .5px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), visibility 0s;
}
#panel.collapsed {
  transform: translateX(-100%); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), visibility 0s .25s;
}

/* grab handle: a real button, shown only on the mobile sheet */
#grab { display: none; }
.grab-bar { width: 36px; height: 5px; border-radius: 2.5px; background: rgba(0,0,0,.25); }

#panel-head { padding: 16px 16px 12px; position: relative; }
#panel-head.scrolled { box-shadow: 0 .5px 0 rgba(0,0,0,.08); }
#panel-titlerow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
#panel-title {
  font-size: 22px; font-weight: 700; letter-spacing: -.4px; flex: 1; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#panel-title.long { font-size: 20px; }
#backbtn, #closebtn {
  width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.05);
  color: #1d1d1f; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: background .15s ease, transform 160ms var(--ease-out);
}
#backbtn[hidden], #closebtn[hidden] { display: none; }
#backbtn svg, #closebtn svg { width: 14px; height: 14px; stroke: #1d1d1f; fill: none; }

#searchwrap { position: relative; }
#searchbox {
  display: flex; align-items: center; gap: 8px; height: 36px;
  background: rgba(142,142,147,.12); border-radius: 10px; padding: 0 10px;
  transition: background .15s ease, box-shadow .15s ease;
}
#searchbox:focus-within {
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(0,122,255,.3);
}
#searchbox > svg { color: #8e8e93; flex: none; }
#search {
  flex: 1; border: 0; outline: 0; font-size: 14px; background: transparent;
  min-width: 0; color: #1d1d1f;
}
#search::placeholder { color: #8e8e93; }
/* padding + negative margin grows the hit area without moving the layout;
   background-clip keeps the visible circle at the content size */
#clearsearch {
  border: 0; background: rgba(142,142,147,.5); background-clip: content-box; color: #fff; border-radius: 50%;
  box-sizing: content-box; width: 16px; height: 16px; padding: 6px; margin: -6px;
  cursor: pointer; display: none; position: relative; flex: none;
  transition: background .15s ease;
}
#clearsearch svg {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  stroke: #fff; fill: none;
}
#suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  max-height: min(320px, 50vh); overflow-y: auto;
  background: #fff; border-radius: 12px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.18);
}
.sug {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer;
  transition: background .1s ease;
}
.sug[aria-selected="true"] { background: rgba(0,122,255,.08); }
.sug .icn {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.sug .icn .sf { stroke: #fff; }
.sug .sub { color: #6e6e73; font-size: 12px; margin-left: auto; }
.sug.nores { cursor: default; color: #6e6e73; justify-content: center; }

/* visually hidden, still read by screen readers (live regions) */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

#pillsrow {
  display: flex; gap: 6px; align-items: center; margin-top: 10px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  touch-action: pan-x;
}
#pillsrow::-webkit-scrollbar { display: none; }
/* Pills never wrap. When the row overflows, a fade marks the hidden side
   (.scrollable, .scrolled-end and .scrolled-mid come from JS) */
#pillsrow.scrollable {
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
#pillsrow.scrollable.scrolled-end {
  -webkit-mask-image: linear-gradient(to left, black 85%, transparent 100%);
  mask-image: linear-gradient(to left, black 85%, transparent 100%);
}
#pillsrow.scrollable.scrolled-mid {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 85%, transparent 100%);
}
.apill {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; flex: none;
  background: rgba(255,255,255,.9); border: 0; border-radius: 16px; padding: 0 14px;
  font-size: 13px; font-weight: 500; color: #1d1d1f; cursor: pointer;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform 160ms var(--ease-out);
}
.apill.on { background: #007aff; color: #fff; box-shadow: none; }
/* A menu pill stays visibly pressed while its popover or sheet is open */
.apill[aria-expanded="true"]:not(.on), .apill[aria-expanded="true"]:not(.on):hover { background: rgba(0,0,0,.08); box-shadow: none; }
.apill.on[aria-expanded="true"], .apill.on[aria-expanded="true"]:hover { background: #0062d1; }
.apill.iconpill { width: 32px; padding: 0; justify-content: center; }
.apill.iconpill svg { width: 14px; height: 14px; fill: #1d1d1f; }
.apill.on.iconpill svg { fill: #fff; }
.sortpill .pill-label { margin-left: 2px; }
.typepill .sf { width: 12px; height: 12px; }

#panel-content {
  flex: 1; overflow-y: scroll; padding: 2px 16px 20px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#panel-content::-webkit-scrollbar { width: 6px; }
#panel-content::-webkit-scrollbar-track { background: transparent; }
#panel-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }
#panel-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }

/* ---------- cards ---------- */
.seclabel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 20px; font-weight: 700; color: #1d1d1f; margin: 20px 2px 12px;
  letter-spacing: -.2px;
}
.seclabel .sl-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.seclabel .seeall { margin-left: auto; }
.seclabel .note { font-size: 12px; font-weight: 400; color: #6e6e73; letter-spacing: 0; }
.card {
  background: #fff; border-radius: 12px; margin-bottom: 10px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden; transition: box-shadow .15s ease;
}
.card.clickable { cursor: pointer; transition: box-shadow .15s ease, transform 160ms var(--ease-out); }

/* ---------- SF Symbol icons ---------- */
.sf { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icn-md { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icn-md .sf { stroke: #fff; }
.icn-lg { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icn-lg .sf { stroke: #fff; }
.apill .sf { width: 14px; height: 14px; }
.iconpill .sf { width: 16px; height: 16px; }

/* find-nearby style grid — Apple Maps horizontal buttons */
.nearby { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  background: #fff; border: 0;
  border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.06);
  font-size: 14px; font-weight: 500; color: #1d1d1f;
  transition: background-color .15s ease, box-shadow .15s ease, transform 160ms var(--ease-out);
  overflow: hidden; min-width: 0;
}
.nb-label {
  min-width: 0; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nb .icn-lg {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.nb .icn-lg .sf { width: 16px; height: 16px; }

/* the one text link button. Negative margins keep the layout while the padding grows the hit area */
.linkbtn, .showmore, .seeall, .notelink {
  display: inline-block; border: 0; background: none; color: #0066cc; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  padding: 8px 6px; margin: -8px -6px; border-radius: 8px; box-shadow: none;
  transition: background-color .15s ease, transform 160ms var(--ease-out);
}
.linkbtn.block, .showmore {
  display: block; width: 100%; margin: 0; padding: 12px 14px; text-align: center;
}

/* council result card — condensed */
.ccard { padding: 12px 14px; }
.ccard-row { display: flex; align-items: center; gap: 8px; }
.ccard-left { flex: 1; min-width: 0; }
.ccard .t {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.15px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard .v { font-size: 13px; margin-top: 2px; font-weight: 600; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.ccard .v span { color: #6e6e73; font-weight: 400; }
.ccard .rk {
  font-size: 11px; font-weight: 600; color: #6e6e73; flex: none;
  background: rgba(142,142,147,.1); padding: 2px 7px; border-radius: 6px;
}
.ccard .cbarline { height: 3px; background: #f2f2f7; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.ccard .cbarline > span { display: block; height: 100%; border-radius: 2px; }
.ccard.sel { outline: 2.5px solid #007aff; outline-offset: -2.5px; border-radius: 12px; }

/* overview stats card */
.ovcard { padding: 14px 14px; }
.ov-stats { display: flex; gap: 8px; }
.ov-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 10px 4px; border-radius: 12px;
  background: rgba(142,142,147,.05);
}
.ov-stat.clickable { cursor: pointer; }
.ov-icon { margin-bottom: 6px; }
.ov-icon .sf { width: 20px; height: 20px; color: #007aff; }
.ov-val { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.ov-val-sm { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.ov-label { font-size: 11px; color: #6e6e73; margin-top: 2px; }
.ov-stat.clickable .ov-label { color: #0066cc; }
.ov-stat.clickable .ov-label::after { content: " ›"; }

/* generic row inside cards */
.crow {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: .5px solid rgba(0,0,0,.06);
  transition: background .1s ease;
}
.crow:last-child { border-bottom: 0; }
.crow.clickable { cursor: pointer; }
.crow.excluded { opacity: .75; }
.crow-divider {
  font-size: 11px; font-weight: 600; color: #6e6e73; padding: 10px 14px 4px;
  border-top: .5px solid rgba(0,0,0,.06);
}
.logo {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  overflow: hidden; position: relative;
}
.logo-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sug .logo-sm { width: 36px; height: 36px; border-radius: 10px; }
.crow .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.crow .body { flex: 1; min-width: 0; }
.crow .nm { font-size: 13.5px; font-weight: 500; }
.crow .ms { font-size: 11.5px; color: #6e6e73; margin-top: 2px; }
.crow .amt { font-size: 13.5px; font-weight: 600; flex: none; text-align: right; }
.crow .amt .sub { display: block; font-weight: 400; font-size: 10.5px; color: #6e6e73; }
.crow .pct { font-size: 11.5px; color: #6e6e73; width: 34px; text-align: right; flex: none; }
.mbar { height: 4px; background: #f2f2f7; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.mbar > span { display: block; height: 100%; border-radius: 2px; }
.tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: #248a3d;
  background: rgba(36,138,61,.1); border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px;
}
.bigstats.tight { padding-bottom: 6px; }

/* place card head: the same 14px side inset as every row in a card */
.placehead { padding: 14px 14px 0; }
.placehead .pt { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.placehead .ps { color: #6e6e73; font-size: 13px; margin-top: 3px; }
/* the publication state is a tag in the state colour, then "Source ↗ · Share" */
.placehead .state { margin-top: 8px; font-size: 12.5px; line-height: 1.7; }
.placehead .state .tag { margin-left: 0; vertical-align: 0; font-weight: 500; }
.placehead .state .linkbtn.inline { white-space: nowrap; }
/* three tiles: the hero takes the top row, the other two share the second */
.bigstats.grid2 .bigstat:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.bigstats { display: flex; gap: 8px; padding: 14px 14px 14px; }
.bigstat {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: rgba(142,142,147,.06); border-radius: 12px; padding: 12px 12px;
}
.bigstats .bigstat .v { font-size: 17px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
/* two-line minimum keeps the three tiles the same height */
.bigstat .k { font-size: 11px; color: #6e6e73; margin-top: 2px; line-height: 1.3; min-height: 2.6em; }

/* segmented control */
.segwrap { padding: 0 14px 14px; }
/* a tab group between a section label and its card, outside any card */
.segwrap.bare { padding: 6px 0 10px; }
.seclabel + .segwrap.bare { padding-top: 0; }
.seg {
  display: flex; background: rgba(142,142,147,.1); border-radius: 10px; padding: 2px;
}
.seg button {
  flex: 1; border: 0; background: none; border-radius: 8px; height: 28px;
  font-size: 13px; font-weight: 500; color: #6e6e73; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg button.on {
  background: #fff; color: #1d1d1f;
  box-shadow: 0 .5px 2px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
  font-weight: 600;
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.achip {
  border: 0; background: #fff; border-radius: 14px; height: 28px; padding: 0 12px;
  font-size: 12.5px; font-weight: 500; color: #1d1d1f; cursor: pointer;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform 160ms var(--ease-out);
}
.achip.on { background: #1d1d1f; color: #fff; box-shadow: none; }
.achip.more { color: #0066cc; background: rgba(0,122,255,.06); }

/* compare */
.cmp-head { display: flex; gap: 8px; padding: 0 0 10px; }
.cmp-head .ccard { flex: 1; margin: 0; }
.cmp-head .ccard .t { font-size: 14px; }
.cmp-head .swatch, .cmp-names .swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none;
  margin-right: 6px; vertical-align: 1px;
}
.cmp-swap { margin: 0 0 10px; }
.cmp-names { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px; }
.cmp-names button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; font-size: 15px; font-weight: 700; color: #1d1d1f; cursor: pointer; padding: 0;
}
.cmp-names span { color: #6e6e73; font-size: 12px; }
.cmp-row {
  display: grid; grid-template-columns: 1fr 108px 1fr; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 13px; border-bottom: .5px solid rgba(0,0,0,.05);
}
.cmp-row:last-child { border-bottom: 0; }
/* a long supplier name stops at two lines; the title carries the full name */
.cmp-row .cl {
  text-align: center; color: #6e6e73; font-size: 12px; line-height: 1.25; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-row .cv { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.cmp-row .cv.a { justify-content: flex-end; }
.cmp-row .cv.b { justify-content: flex-start; }
.cmp-row .cv.zero { color: #6e6e73; font-weight: 400; }
.cbar { flex: 1; max-width: 84px; height: 5px; background: #f2f2f7; border-radius: 3px; overflow: hidden; }
.cv.a .cbar { transform: scaleX(-1); }
.cbar > span { display: block; height: 100%; border-radius: 3px; }

/* compare picker (inside popover/action sheet) */
.pop-compare { min-width: 280px; }
.cmp-search {
  display: flex; align-items: center; gap: 8px; height: 36px;
  background: rgba(142,142,147,.12); border-radius: 10px; padding: 0 10px; margin: 4px 8px 6px;
}
.cmp-search input {
  flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; color: #1d1d1f;
}
.cmp-section { font-size: 11px; font-weight: 600; color: #6e6e73; padding: 8px 14px 4px; text-transform: none; }
.compare-scroll {
  max-height: 300px; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.compare-scroll::-webkit-scrollbar { width: 4px; }
.compare-scroll::-webkit-scrollbar-track { background: transparent; }
.compare-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 2px; }
.compare-item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 14px; font-size: 14.5px; font-weight: 400; color: #1d1d1f;
  border-bottom: .5px solid rgba(0,0,0,.06); cursor: pointer;
  transition: background .1s ease;
}
.compare-item:last-child { border-bottom: 0; }
.compare-item:active { background: rgba(0,122,255,.1); }

.chartwrap { padding: 12px 14px 14px; }
.chartwrap svg { width: 100%; height: 84px; }
.chartwrap svg text { font-size: 10px; }
.chart-axis { stroke: rgba(0,0,0,.08); }
.chart-max { font-size: 10px; fill: #6e6e73; }
.empty { padding: 20px 14px; color: #6e6e73; font-size: 13px; text-align: center; }
.council-grid .empty { grid-column: 1 / -1; }

/* v2 round 1 */
/* an open category or supplier row: pressed tone, same as an open menu pill */
.crow[aria-expanded="true"], .crow.clickable[aria-expanded="true"] { background: rgba(0,0,0,.05); border-bottom: 0; }
/* receipts: the payment list under an expanded row */
.receipts {
  padding: 4px 14px 8px; border-top: .5px solid rgba(0,0,0,.06);
  border-bottom: .5px solid rgba(0,0,0,.06); background: rgba(142,142,147,.04);
}
.receipts:last-child { border-bottom: 0; }
.receipts .linkbtn { margin-top: 10px; margin-bottom: 2px; }
.receipts .linkbtn + .linkbtn { margin-left: 14px; }
/* a payment list that sits directly in a card takes the card inset */
.receipt-list { padding: 4px 14px; }
.receipt {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  padding: 7px 0; font-size: 13px; border-bottom: .5px solid rgba(0,0,0,.05);
}
.receipt:last-of-type { border-bottom: 0; }
.receipt .rd { color: #6e6e73; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt .rn { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt .rn .linkbtn.inline { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.receipt .ra { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt .rdesc {
  grid-column: 2 / -1; color: #6e6e73; font-size: 12px; margin-top: 1px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt.excluded { background: rgba(178,80,0,.035); }
.receipt .rdesc .tag { font-size: 10px; padding: 1px 5px; margin-left: 0; margin-right: 4px; vertical-align: 1px; }
/* inline text link: same colour as .linkbtn, no hit-area padding, sits in a sentence */
.linkbtn.inline {
  display: inline; padding: 0; margin: 0; border-radius: 2px;
  font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: none;
}
.linkbtn.inline:active { transform: none; }
/* shard placeholder: three grey bars while a payment shard loads */
.skeleton-rows { padding: 10px 14px 12px; }
.skeleton-rows > span {
  display: block; height: 12px; border-radius: 6px; margin: 0 0 10px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-rows > span:nth-child(2) { width: 82%; }
.skeleton-rows > span:nth-child(3) { width: 64%; margin-bottom: 0; }
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.shard-error {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; font-size: 13px; color: #6e6e73;
}
.shard-error .linkbtn { flex: none; }
/* Over the years */
.fy-chart { padding: 12px 14px 6px; }
.fy-chart svg { width: 100%; height: 84px; }
.fy-chart svg text { font-size: 10px; }
.fy-chart .fy-actions { display: flex; justify-content: flex-end; padding: 8px 0 4px; }
/* the current, incomplete year: a dashed outline in the council blue; the fill stays empty */
.fy-chart rect.partial, .fy-chart rect[data-partial] {
  fill: transparent; stroke: #007aff; stroke-width: 1; stroke-dasharray: 3 2; opacity: .8;
}
.fy-table { border-top: .5px solid rgba(0,0,0,.06); }
.fy-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; column-gap: 10px; align-items: baseline;
  padding: 8px 14px; font-size: 13px; border-bottom: .5px solid rgba(0,0,0,.06);
}
.fy-row:last-child { border-bottom: 0; }
.fy-row .fy { font-weight: 500; white-space: nowrap; }
.fy-row .fy .sub { color: #6e6e73; font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.fy-row .tot { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fy-row .chg { color: #6e6e73; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.fy-row.partial .tot, .fy-row.partial .chg { color: #6e6e73; font-weight: 400; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 14px 12px; font-size: 11.5px; color: #6e6e73; }
.stack-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stack-legend .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
/* publication states */
.tag.amber { color: #b25000; background: rgba(178,80,0,.1); }
.tag.red { color: #c62828; background: rgba(198,40,40,.1); }
.tag.grey { color: #6e6e73; background: rgba(110,110,115,.1); }
.pub-row .ccard-row { align-items: center; }
.pub-row .v { flex: none; margin: 0; font-weight: 400; color: #6e6e73; text-align: right; white-space: nowrap; }
.pub-row .v .me { color: #1d1d1f; font-weight: 600; }
.pub-row .cbarline { margin-top: 8px; }
/* a count after a tab label */
.seg .n { font-weight: 400; color: #8e8e93; margin-left: 3px; font-variant-numeric: tabular-nums; }
.seg button.on .n { color: #6e6e73; }

/* v2 round 2 */
/* the budget tile's label carries the outturn link at the label size */
.bigstat .k .linkbtn.inline { font-size: inherit; font-weight: 500; }
/* similar councils: band = peer range, tick = peer median, dot = this council */
.peer-panel .peer-imd { font-size: 12px; color: #6e6e73; line-height: 1.4; padding: 10px 14px 6px; }
.peer-panel .peer-imd + .peer-row { border-top: .5px solid rgba(0,0,0,.06); }
.peer-row {
  display: grid; grid-template-columns: minmax(84px, 1fr) 2fr auto; column-gap: 10px; align-items: center;
  padding: 8px 14px; font-size: 12.5px; border-bottom: .5px solid rgba(0,0,0,.06);
}
.peer-row:last-child { border-bottom: 0; }
.peer-row > :first-child { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.peer-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(0,0,0,.05); min-width: 0; }
.peer-range { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(0,122,255,.18); }
.peer-median { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.35); }
.peer-marker {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #007aff; box-shadow: 0 0 0 1.5px #fff;
}
.peer-val { font-size: 12px; color: #6e6e73; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.peer-val b, .peer-val .me { color: #1d1d1f; font-weight: 600; }
/* Companies House entity card */
.entity-card .entity-row {
  display: grid; grid-template-columns: 112px 1fr; column-gap: 10px; align-items: baseline;
  padding: 7px 14px; font-size: 13px; border-bottom: .5px solid rgba(0,0,0,.06);
}
.entity-card .entity-row:last-child { border-bottom: 0; }
.entity-row .el { color: #6e6e73; }
.entity-row .ev { color: #1d1d1f; min-width: 0; overflow-wrap: anywhere; }
.entity-row .tag { margin-left: 0; }
/* supplier family: a sentence, then the member links separated by " · " */
.family-card { padding: 10px 14px 12px; font-size: 13px; line-height: 1.45; color: #1d1d1f; }
.family-members { display: flex; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.family-members > * { white-space: nowrap; }
.family-members > :not(:last-child)::after {
  /* inline-block stops the hover underline of the link from running under the separator */
  content: " · "; display: inline-block; color: #6e6e73; white-space: pre; font-weight: 400; pointer-events: none;
}
/* four segments ("Neighbours · Same type · Similar · All") must fit a 300px popover and a 390px sheet */
.seg button { padding: 0 4px; min-width: 0; white-space: nowrap; }
/* content-sized segments: "Neighbours" gets more room than "All" inside a 300px popover */
.seg.four button, .pop-compare .seg button { font-size: 12px; flex: 1 1 auto; padding: 0 6px; }
.pop-compare .segwrap { padding: 0 4px 6px; }

/* v2 round 3 */
/* end-of-section link row: "Download CSV", "Share", and the existing section links on one wrapped line */
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 14px; font-size: 12.5px; }
.dl-row .linkbtn { font-size: inherit; }
/* a short grey fact on the same line as the links ("300 largest of 305k payments") */
.dl-row .dl-note { color: #6e6e73; }
.dl-row .dl-note:not(:first-child) { margin-left: auto; }
/* share popover: full-width link rows with an icon slot (the .pop-item geometry in .linkbtn blue), then the embed code */
.share-pop { min-width: 240px; }
.share-pop .share-row {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
  padding: 8px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.25; text-align: left;
}
.share-pop .share-row .sf, .share-pop .share-row svg { width: 16px; height: 16px; flex: none; stroke: currentColor; }
.share-pop .share-code {
  display: block; margin: 4px 7px 7px; padding: 8px; border-radius: 8px;
  font: 11.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #6e6e73;
  background: rgba(0,0,0,.04); white-space: pre-wrap; word-break: break-all;
  user-select: all; -webkit-user-select: all; max-height: 96px; overflow: auto;
}
/* embed mode (?embed=1): only the panel and the map remain; the credit links back to the full site */
body.embed #rail, body.embed #searchwrap, body.embed #pillsrow, body.embed #legend-toggle { display: none; }
body.embed #panel-head { padding-top: 10px; }
/* MapLibre attribution is off and #attrib sits bottom-right, so the left edge is free.
   Desktop: the panel is 400px wide with no rail, so the credit sits just right of it */
.embed-credit {
  position: fixed; left: 412px; bottom: 8px; z-index: 950;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border-radius: 10px; padding: 6px 10px; font-size: 12px; line-height: 1.2; color: #6e6e73;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.1);
  white-space: nowrap;
}
.embed-credit .linkbtn.inline { font-weight: 500; }
/* about page: the methodology. Sections are .seclabel headings with cards under
   them, like a council card; prose between cards is 13.5px */
.about { font-size: 13.5px; line-height: 1.5; color: #1d1d1f; padding: 2px 0 8px; }
.about .about-lede { font-size: 15px; line-height: 1.45; letter-spacing: -.1px; margin: 6px 2px 10px; }
.about .about-lede + .card { margin-top: 14px; }
.about > p { margin: 0 2px 12px; color: #1d1d1f; }
.about .seclabel { margin-top: 24px; }
.about .about-cardhead { font-size: 13px; font-weight: 600; color: #1d1d1f; margin: 0; padding: 12px 14px 0; letter-spacing: -.1px; line-height: 1.3; }
.about .about-note { font-size: 12px; color: #6e6e73; line-height: 1.45; margin: 0; padding: 4px 14px 12px; }
.about .about-note:first-child { padding-top: 12px; }
.about .about-cardhead + .about-note { padding-top: 2px; }
.about .fy-chart { padding-top: 10px; }
.about .stack-legend { padding-bottom: 4px; }
/* hero: four tiles in two columns */
.bigstats.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.bigstats.grid2 .bigstat .v { white-space: normal; }
.bigstats.grid2 .bigstat .k { min-height: 0; }
/* share bar: one rounded bar of proportional segments; the legend carries the values */
.sharebar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 10px 14px 8px; background: #f2f2f7; }
.sharebar > span { display: block; height: 100%; min-width: 1px; }
.sharebar > span + span { box-shadow: -1px 0 0 #fff; }
.share-legend { padding-top: 0; }
.share-legend b { font-weight: 600; color: #1d1d1f; margin-left: 2px; }
/* horizontal bars: label, bar, value */
.hbars { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.hbar-row { display: grid; grid-template-columns: minmax(96px, 5fr) 6fr auto; column-gap: 10px; align-items: center; font-size: 12.5px; }
.hbar-row .hl { min-width: 0; line-height: 1.25; }
.hbar-row .hl .sub { display: block; font-size: 11px; color: #6e6e73; }
.hb { display: block; height: 8px; border-radius: 4px; background: rgba(0,0,0,.05); overflow: hidden; min-width: 0; }
.hb > span { display: block; height: 100%; border-radius: 4px; }
.hbar-row .hv { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* before and after a repair */
.ba { padding: 6px 14px 12px; }
.ba-row { padding: 8px 0; border-bottom: .5px solid rgba(0,0,0,.06); }
.ba-row:last-child { border-bottom: 0; }
.ba-name { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ba-name { display: flex; align-items: baseline; gap: 6px; }
.ba-name .sub { font-weight: 400; color: #6e6e73; font-size: 11.5px; }
.ba-name .ba-chg { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #007aff; font-variant-numeric: tabular-nums; }
.ba-bar { display: grid; grid-template-columns: 44px 1fr 64px; column-gap: 10px; align-items: center; font-size: 12px; margin-top: 4px; }
.ba-bar .k { color: #6e6e73; }
.ba-bar .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* numbered steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 6px 14px 8px; }
.steps li { counter-increment: step; position: relative; padding: 8px 0 8px 32px; font-size: 13px; line-height: 1.45; border-bottom: .5px solid rgba(0,0,0,.06); }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%;
  background: #007aff; color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0;
}
.steps .st-t { display: block; font-weight: 600; }
.steps .st-d { display: block; color: #6e6e73; font-size: 12.5px; margin-top: 1px; }
/* plain lists inside a card */
.limits { margin: 0; padding: 10px 14px 12px 30px; font-size: 13px; line-height: 1.45; }
.limits li { margin: 0 0 6px; }
.limits li:last-child { margin-bottom: 0; }
.limits li::marker { color: #6e6e73; }
/* one grey sentence under a page title (category and group descriptions) */
.cat-desc { font-size: 12.5px; color: #6e6e73; line-height: 1.45; max-width: 34em; padding: 0 0 10px; margin: 0; }
/* glossary: term with its category dot, then a grey definition */
.glossary dl { margin: 0; }
.glossary-card .glossary { padding: 0 14px 12px; }
.glossary dt { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #1d1d1f; margin: 0 0 2px; }
.glossary dt .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.glossary dd { margin: 0 0 8px; font-size: 12.5px; color: #6e6e73; line-height: 1.45; }
.glossary dd:last-child { margin-bottom: 0; }

/* ---------- popover ---------- */
#popover {
  position: absolute; z-index: 2000; background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-radius: 14px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.2);
  min-width: 220px; max-width: 300px; padding: 5px;
  max-height: 360px; overflow-y: auto;
  opacity: 1; transform: scale(1);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
#popover.is-closed {
  opacity: 0; transform: scale(0.96);
  transition-duration: 160ms;
}
#popover[hidden] { display: none; }
.pop-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; color: #1d1d1f; cursor: pointer; text-align: left;
  transition: background .1s ease, transform 160ms var(--ease-out);
}
.pop-item .ck { width: 14px; color: #007aff; font-weight: 700; flex: none; }
.pop-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; max-width: 300px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: calc(50px + 400px + (100vw - 450px) / 2); bottom: 24px; z-index: 4000;
  transform: translate(-50%, 8px);
  background: rgba(30,30,32,.92); color: #fff; font-size: 13px; font-weight: 500;
  padding: 10px 16px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* data-honesty furniture */
.covnote {
  font-size: 11.5px; color: #6e6e73; padding: 8px 14px 2px;
  line-height: 1.45;
}
.ov-note {
  font-size: 11.5px; color: #6e6e73; padding: 8px 14px 10px;
  border-top: .5px solid rgba(0,0,0,.05); line-height: 1.4;
}
.covbanner {
  background: rgba(255,159,10,.10); color: #1d1d1f; font-size: 12.5px; line-height: 1.4;
  padding: 10px 14px; border-radius: 12px; margin: 0 0 10px;
}
.chips.excluded-list { padding: 4px 12px 8px; }
.crow.unc .nm { color: #6e6e73; }
.crow.unc .amt { color: #6e6e73; }
.card.crosslink { padding: 2px 0; }
.card.crosslink .chips { padding: 0; }

/* ---------- map furniture ---------- */
#legend {
  position: absolute; right: 64px; bottom: 24px; z-index: 900;
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-radius: 12px; padding: 10px 12px; width: 220px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.1);
  transition: opacity .2s var(--ease-out);
}
#legend-title { font-size: 11px; color: #1d1d1f; font-weight: 600; margin-bottom: 6px; letter-spacing: -.1px; }
#legend-bar { height: 8px; border-radius: 4px; }
#legend-labels {
  display: grid; grid-template-columns: repeat(5, 1fr); text-align: center;
  font-size: 10px; color: #6e6e73; margin-top: 4px; font-variant-numeric: tabular-nums;
}
#legend-labels span:first-child { text-align: left; }
#legend-labels span:last-child { text-align: right; }
.legend-caption { font-size: 10px; color: #6e6e73; margin-top: 4px; }
#legend-nodata { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #6e6e73; margin-top: 6px; }
.sw { width: 12px; height: 8px; border-radius: 2px; background: #e8e4d8; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); flex: none; }

#tooltip {
  position: absolute; z-index: 1500; pointer-events: none;
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.16);
  font-size: 12.5px; max-width: 240px;
}
#tooltip .tn { font-weight: 600; font-size: 13px; }
#tooltip .tv { color: #1d1d1f; margin-top: 2px; }
#tooltip .tp { color: #6e6e73; font-size: 10.5px; margin-top: 1px; }
#tooltip .trows { margin-top: 6px; padding-top: 6px; border-top: .5px solid rgba(0,0,0,.1); font-size: 11.5px; }
#tooltip .tr { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
#tooltip .tr .dot { width: 8px; height: 8px; border-radius: 2.5px; flex: none; }
#tooltip .tr .tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6e6e73; }
#tooltip .tr b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* chart bars: the hit column tints on hover so the pointer target is visible */
.cbar .hit { fill: transparent; }
.cbar:hover .hit { fill: rgba(0,0,0,.05); }

#attrib {
  position: absolute; right: 8px; bottom: 4px; z-index: 900;
  font-size: 10px; color: #6e6e73;
  background: rgba(255,255,255,.6); padding: 1px 6px; border-radius: 6px;
}
#attrib a { color: #6e6e73; text-decoration: none; }
#attrib a:hover { text-decoration: underline; }

.maplibregl-ctrl-group {
  border-radius: 10px !important;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}
.maplibregl-ctrl-group button {
  width: 36px !important; height: 36px !important;
}
.maplibregl-ctrl-bottom-right { margin-bottom: 24px; }

/* locate button lives in the MapLibre control stack and matches the zoom buttons */
#locbtn {
  border: 0; cursor: pointer; color: #333; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s var(--ease-out);
}
.maplibregl-ctrl #locbtn {
  position: static; width: 36px; height: 36px; border-radius: 0;
  box-shadow: none; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.maplibregl-ctrl #locbtn svg { width: 18px; height: 18px; stroke: #333; }
#locbtn:active { transform: scale(.94); }
#locbtn.busy svg { animation: locPulse 1s ease-in-out infinite; }
@keyframes locPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* map tiles still loading after the data is in */
.map-loading {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 950;
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-radius: 14px; padding: 6px 12px; font-size: 12px; color: #6e6e73;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.1);
}
.map-loading[hidden] { display: none; }

/* ---------- loading skeleton ---------- */
#loading {
  position: fixed; inset: 0; z-index: 9999;
  background: #f4f1e6;
  display: flex; align-items: flex-end; justify-content: center;
  transition: opacity .3s ease, visibility 0s .3s;
}
#loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
.load-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #007aff, transparent);
  animation: loadSlide 1.2s ease-in-out infinite;
}
@keyframes loadSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.load-panel {
  width: 100%; max-width: 390px; padding: 24px 20px;
  background: rgba(249,249,249,.97); border-radius: 14px 14px 0 0;
  height: 40%;
}
.load-error { text-align: center; padding: 24px; color: #1d1d1f; font-size: 14px; }
.load-error .linkbtn.block { margin-top: 10px; }
.skel {
  background: rgba(0,0,0,.06); border-radius: 8px;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.skel-title { width: 120px; height: 22px; margin-bottom: 14px; }
.skel-input { width: 100%; height: 36px; margin-bottom: 18px; border-radius: 10px; }
.skel-card { width: 100%; height: 72px; margin-bottom: 10px; border-radius: 12px; }
.skel-card.short { width: 70%; }
@keyframes skelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@media (min-width: 761px) and (min-height: 501px) {
  .load-panel { max-width: 340px; position: absolute; left: 50px; bottom: 0; top: 0; height: auto; border-radius: 0; }
}

/* ---------- press + hover (hover only on fine pointers) ---------- */
.card.clickable:active,
.nb:active,
.apill:active,
.achip:active,
.railbtn:active,
.pop-item:active,
.as-item:active,
.linkbtn:active, .showmore:active, .seeall:active, .notelink:active,
.ov-stat.clickable:active,
#backbtn:active,
#closebtn:active {
  transform: scale(0.97);
}
.crow.clickable:active, .sug:not(.nores):active { background: rgba(0,122,255,.08); }
@media (hover: hover) and (pointer: fine) {
  .railbtn:not(.active):not(.current):hover { background: rgba(0,0,0,.05); }
  .railbtn:not(.active):not(.current):hover .sf { color: #6e6e73; }
  .railbtn.current:hover { background: rgba(0,122,255,.18); }
  #backbtn:hover, #closebtn:hover { background: rgba(0,0,0,.1); }
  #clearsearch:hover { background-color: rgba(142,142,147,.7); }
  .sug:hover { background: rgba(0,122,255,.06); }
  .sug.nores:hover { background: none; }
  .apill:not(.on):hover { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.08); }
  .apill.on:hover { background: #0071eb; }
  .card.clickable:hover { box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.1); }
  .ccard.hovered { box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.1); }
  .nb:hover { background: rgba(142,142,147,.06); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.1); }
  .ov-stat.clickable:hover { background: rgba(0,122,255,.05); }
  .crow.clickable:hover { background: rgba(0,122,255,.04); }
  .crow.clickable[aria-expanded="true"]:hover { background: rgba(0,0,0,.07); }
  .linkbtn.inline:hover { background: none; text-decoration: underline; }
  .seg button:hover { color: #1d1d1f; }
  .achip:not(.on):hover { background: rgba(142,142,147,.08); }
  .achip.on:hover { background: #000; }
  .compare-item:hover { background: rgba(0,122,255,.04); }
  .linkbtn:hover, .showmore:hover, .seeall:hover, .notelink:hover { background: rgba(0,122,255,.08); }
  .pop-item:hover { background: rgba(0,122,255,.08); }
}

/* ---------- mobile: bottom sheet ---------- */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  #rail { display: none; }
  #chrome {
    top: auto; left: 0; right: 0; bottom: 0;
    height: 92vh;
    height: 92dvh;
    overflow: visible;
    will-change: transform;
    transition: transform 320ms var(--ease-drawer);
  }
  #chrome.dragging, #chrome.settling { transition: none; }
  #panel {
    width: 100%; border-right: 0; border-radius: 14px 14px 0 0;
    box-shadow: 0 -1px 0 rgba(0,0,0,.06), 0 -4px 24px rgba(0,0,0,.1);
    background: rgba(255,255,255,.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: none;
  }
  #panel.collapsed {
    transform: none; margin-left: 0; opacity: 1; visibility: visible; pointer-events: auto;
  }
  /* 44px hit area; the bottom 22px overlap the head so the bar sits where the old handle was.
     #panel-head is positioned, so the grab needs a z-index to stay on top of the overlap */
  #grab {
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
    width: 100%; height: 44px; padding: 8px 0 24px; margin-bottom: -22px;
    border: 0; background: none; cursor: grab;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  }
  /* the back and close buttons must win taps over the overlapping grab */
  #backbtn, #closebtn { position: relative; z-index: 2; }
  #panel-head {
    padding: 6px 16px 10px;
    touch-action: none;
    user-select: none; -webkit-user-select: none;
  }
  #panel-head #search { user-select: text; -webkit-user-select: text; }
  #panel-titlerow { margin-bottom: 6px; min-height: 0; }
  #panel-title { font-size: 17px; }
  #panel-title.long { font-size: 16px; }
  #searchbox { height: 38px; }
  /* Prevent iOS auto-zoom on focus — 16px minimum */
  #search { font-size: 16px; }
  #panel-content {
    padding: 2px 16px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* In peek mode, hide scroll */
  #chrome.peek #panel-content { overflow-y: hidden; }
  /* the sheet owns vertical swipes until it is full and the list has scrolled */
  #chrome:not(.full) #panel-content, #panel-content.at-top { touch-action: none; }
  #chrome.full #panel-content:not(.at-top) { touch-action: pan-y; }

  #legend {
    bottom: auto; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; width: 150px; padding: 8px 10px;
  }
  /* the narrow legend keeps the low, median and high ticks only */
  #legend-labels { grid-template-columns: repeat(3, 1fr); }
  #legend-labels span:nth-child(2), #legend-labels span:nth-child(4) { display: none; }
  /* three ticks leave room for the 11px touch-screen minimum */
  #legend-labels, .legend-caption, #legend-nodata { font-size: 11px; }
  /* the four publication bands are discrete steps, so every label stays */
  #legend.bands #legend-labels { grid-template-columns: repeat(4, 1fr); }
  #legend.bands #legend-labels span:nth-child(2), #legend.bands #legend-labels span:nth-child(4) { display: block; }
  #chrome.full ~ #legend { opacity: 0; pointer-events: none; }
  #attrib { display: none; }
  .maplibregl-ctrl-bottom-right {
    margin-bottom: calc(var(--sheet-visible, 50vh) + 8px);
  }
  .maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; }
  #toast { left: 50%; bottom: calc(var(--sheet-visible, 50vh) + 16px); }
  .card { margin-bottom: 8px; }

  /* mobile council grid — 2 columns like Apple Maps Cities */
  .council-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .council-grid .ccard {
    padding: 14px 12px; margin: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 72px;
  }
  .council-grid .ccard .ccard-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .council-grid .ccard .rk { position: absolute; top: 8px; right: 8px; }
  .council-grid .ccard { position: relative; }

  .ccard { padding: 12px 12px; }
  .ccard .t { font-size: 14px; }
  .bigstats { padding: 10px 12px 12px; gap: 6px; }
  .bigstats.tight { padding-bottom: 4px; }
  .bigstat { padding: 10px 10px; border-radius: 10px; }
  .bigstats .bigstat .v { font-size: 15px; }
  .segwrap { padding: 0 12px 10px; }
  .segwrap.bare { padding: 6px 0 8px; }
  .seclabel + .segwrap.bare { padding-top: 0; }
  .placehead { padding: 12px 12px 0; }
  .cmp-row { grid-template-columns: 1fr 92px 1fr; padding: 8px 12px; }
  .covnote { padding-left: 12px; padding-right: 12px; }
  .placehead .pt { font-size: 19px; }

  /* larger touch targets */
  .apill { height: 36px; border-radius: 18px; }
  .apill.iconpill { width: 36px; }
  .apill.sortpill { width: 36px; padding: 0; justify-content: center; }
  .sortpill .pill-label { display: none; }
  .achip { height: 32px; border-radius: 16px; }
  .seg button { height: 32px; }
  #clearsearch { width: 28px; height: 28px; padding: 8px; margin: -8px; }
  #backbtn, #closebtn { width: 36px; height: 36px; }
  .linkbtn, .seeall, .notelink { padding: 16px 10px; margin: -16px -10px; }
  .linkbtn.block, .showmore { padding: 14px; margin: 0; }
  .linkbtn.inline { padding: 0; margin: 0; }
  .as-item { padding: 14px 16px; min-height: 48px; }

  /* v2 round 1: receipts keep three columns; the description may take two lines */
  .receipt { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 6px; }
  .receipt .rd { font-size: 11.5px; }
  .receipt .rdesc {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .fy-row { grid-template-columns: minmax(0, 1fr) auto 56px; column-gap: 8px; padding: 8px 12px; }
  .fy-row .fy .sub { display: block; margin-left: 0; }
  .receipts { padding: 4px 12px 8px; }

  /* v2 round 2: the peer bar takes its own line under the label and value */
  .peer-row { grid-template-columns: 1fr auto; row-gap: 6px; padding: 8px 12px; }
  .peer-row > :first-child { grid-row: 1; grid-column: 1; }
  .peer-row .peer-val { grid-row: 1; grid-column: 2; }
  .peer-row .peer-bar { grid-row: 2; grid-column: 1 / -1; }
  .entity-card .entity-row { grid-template-columns: 96px 1fr; padding: 7px 12px; }
  .family-card { padding: 10px 12px 12px; }
  .peer-panel .peer-imd { padding: 10px 12px 6px; }

  /* v2 round 3: the share rows match the action-sheet item size; the credit floats above the sheet edge */
  .dl-row { padding: 8px 12px; gap: 12px 16px; }
  .share-pop .share-row { padding: 14px 16px; min-height: 48px; font-size: 17px; border-radius: 12px; }
  .share-pop .share-row .sf, .share-pop .share-row svg { width: 20px; height: 20px; }
  .share-pop .share-code { margin: 4px 8px 8px; font-size: 12px; user-select: all; -webkit-user-select: all; }
  /* the credit follows --sheet-visible like the toast and map controls, so it never sits under the sheet */
  .embed-credit {
    left: 12px; bottom: calc(var(--sheet-visible, 50vh) + 8px);
    max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis;
  }
  .about { font-size: 14.5px; padding: 2px 0 8px; }
  .about .about-lede { font-size: 16px; }
  .about .about-cardhead { font-size: 14px; }
  .about .about-note { font-size: 13px; }
  .hbar-row, .steps li, .limits, .ba-name { font-size: 14px; }
  .steps .st-d { font-size: 13px; }
  .cat-desc { font-size: 13px; }
  .glossary dt { font-size: 14px; }
  .glossary dd { font-size: 13px; }

  /* tooltip: hide on mobile (use tap card instead) */
  #tooltip { display: none !important; }

  /* popover: hide on mobile (action sheet used instead) */
  #popover { display: none !important; }
}

/* ---------- action sheet (mobile popovers) ---------- */
#actionsheet {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: flex-end; justify-content: center;
}
#actionsheet[hidden] { display: none; }
#actionsheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 1;
  transition: opacity 280ms var(--ease-drawer);
}
#actionsheet-body {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: rgba(249,249,249,.98);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-radius: 14px 14px 0 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y;
  transform: translateY(0);
  transition: transform 280ms var(--ease-drawer);
}
/* at the top of the list a downward swipe dismisses the sheet instead of scrolling */
#actionsheet-body.at-top { touch-action: none; }
.as-item, .as-chips .achip, .compare-item { touch-action: inherit; }
#actionsheet[data-closed] #actionsheet-backdrop { opacity: 0; }
#actionsheet[data-closed] #actionsheet-body { transform: translateY(100%); }
#actionsheet.exiting #actionsheet-backdrop,
#actionsheet.exiting #actionsheet-body { transition-duration: 200ms; }
#actionsheet-body::before {
  content: ""; display: block; width: 36px; height: 5px; border-radius: 2.5px;
  background: rgba(0,0,0,.15); margin: 4px auto 12px;
}
.as-title {
  font-size: 13px; font-weight: 600; color: #6e6e73;
  text-transform: none; letter-spacing: -.1px;
  padding: 4px 14px 10px;
}
.as-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 14px 16px; min-height: 48px; border-radius: 12px;
  font-size: 17px; color: #1d1d1f; cursor: pointer; text-align: left;
  transition: background .1s ease, transform 160ms var(--ease-out);
}
.as-item:active { background: rgba(0,122,255,.08); }
.as-item .ck { width: 20px; color: #007aff; font-weight: 700; flex: none; font-size: 16px; }
.as-chips {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 12px;
}
.as-chips .achip { height: 36px; padding: 0 16px; font-size: 15px; border-radius: 18px; }

/* hide action sheet on desktop */
@media (min-width: 761px) and (min-height: 501px) {
  #actionsheet { display: none !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .load-bar, .skel { animation: none; }
  .skeleton-rows > span { animation: none; background: rgba(0,0,0,.07); }
  #locbtn.busy svg { animation: none; opacity: .6; }
  #chrome { transition: none !important; }
  #panel, #panel.collapsed {
    transform: none !important;
    transition: opacity .2s ease, visibility 0s;
  }
  #panel.collapsed { transition: opacity .2s ease, visibility 0s .2s; }
  #popover { transition: opacity 150ms ease; }
  #popover.is-closed { transform: none; }
  #actionsheet-body {
    transition: none;
    transform: none !important;
  }
  #actionsheet-backdrop { transition: opacity 200ms ease; }
  #toast { transition: opacity .2s ease; }
  #toast, #toast.show { transform: translate(-50%, 0); }
  .card.clickable:active,
  .nb:active,
  .apill:active,
  .achip:active,
  .railbtn:active,
  .pop-item:active,
  .as-item:active,
  .linkbtn:active, .showmore:active, .seeall:active, .notelink:active,
  .ov-stat.clickable:active,
  #backbtn:active,
  #closebtn:active {
    transform: none;
  }
}