/* Parcel Viewer - tokens follow the validated dataviz reference palette; dark values are selected, not flipped. */
:root {
  color-scheme: light;
  --plane: #f9f9f7; --surface: #fcfcfb; --surface-2: #f2f1ed;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --hair: #e1e0d9; --axis: #c3c2b7; --ring: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6; --accent-ink: #ffffff;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;      /* categorical slots 1-3 (validated all-pairs) */
  --lakefront: #104281;
  --shadow: 0 10px 34px rgba(11, 11, 11, 0.14), 0 1px 3px rgba(11, 11, 11, 0.10);
  --bar-h: 58px; --radius: 12px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plane: #0d0d0d; --surface: #1a1a19; --surface-2: #242422;
    --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --hair: #2c2c2a; --axis: #383835; --ring: rgba(255, 255, 255, 0.10);
    --accent: #3987e5; --accent-ink: #ffffff;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70;
    --lakefront: #b7d3f6;
    --shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--plane); color: var(--ink); font-size: 14px; line-height: 1.45; overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.logo { width: 34px; height: 34px; flex: none; }
.logo rect { fill: var(--accent); }
.logo .lake { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.6s 0.2s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.brand:hover .lake { animation: ripple 1.2s ease-in-out; }
@keyframes ripple { 0%,100% { stroke-width: 11; } 50% { stroke-width: 15; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.brand-text em { font-style: normal; font-size: 11.5px; color: var(--ink-2); }

.search { position: relative; flex: 1 1 320px; max-width: 460px; }
.search input {
  width: 100%; height: 38px; padding: 0 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid transparent; outline: none;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); background: var(--surface); }
.results {
  position: absolute; left: 0; right: 0; top: 44px; list-style: none; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
}
.results li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: grid; gap: 1px; }
.results li[aria-selected="true"], .results li:hover { background: var(--surface-2); }
.results .r1 { font-weight: 600; }
.results .r2 { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .none { color: var(--ink-2); cursor: default; }

.pickers { display: flex; align-items: center; gap: 8px; }
.sheet-grip { display: none; }      /* only a bottom sheet has a grabber */
.legend-toggle { display: none; }   /* the legend only collapses where screen space is scarce */
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.tool, .select select {
  height: 36px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--hair); background: var(--surface);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 500; font-size: 13px;
}
.tool:hover, .select select:hover { border-color: var(--axis); }
.tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tool b { font-weight: 500; }
.select select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
#btn-stone:active span { display: inline-block; animation: skip 0.5s ease-out; }
@keyframes skip { 0% { transform: translate(0,0); } 30% { transform: translate(6px,-7px); } 60% { transform: translate(12px,0); } 80% { transform: translate(16px,-3px); } 100% { transform: translate(0,0); } }

/* ---------- map ---------- */
main { position: fixed; inset: var(--bar-h) 0 0 0; }
#map { position: absolute; inset: 0; background: var(--plane); }
.maplibregl-ctrl-attrib { font-size: 10.5px; }
.maplibregl-map { font-family: inherit; }

.about-link {
  position: absolute; left: 10px; bottom: 8px; z-index: 5; border: 0; border-radius: 6px; padding: 3px 8px; font-size: 11px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink-2);
}
.about-link:hover { color: var(--ink); }

/* ---------- legend ---------- */
.legend {
  position: absolute; left: 10px; bottom: 34px; z-index: 6; width: 232px; padding: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow);
}
.legend h3 { font-size: 12px; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.legend h3 small { font-weight: 400; color: var(--ink-2); }
.ramp { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.ramp i { height: 12px; display: block; }
.ramp i:first-child { border-radius: 4px 0 0 4px; } .ramp i:last-child { border-radius: 0 4px 4px 0; }
.ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: 10.5px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ticks span { text-align: center; }
.legend .nodata { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); margin-top: 8px; }
.sw { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--surface); font-size: 12px;
}
.chip:hover { border-color: var(--axis); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); font-weight: 600; }
.chip .n { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 400; }
.legend .hint { font-size: 11px; color: var(--ink-2); margin-top: 8px; }
.legend .keyline { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--ink-2); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
.keyline span { display: inline-flex; align-items: center; gap: 5px; }
.k-poly { width: 14px; height: 10px; border: 1.5px solid var(--ink-2); border-radius: 2px; }
.k-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--surface); }

/* ---------- time machine ---------- */
.time {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7; width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow);
}
.time-main { flex: 1; min-width: 0; }
.time-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.time-head strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.time-head span { font-size: 12px; color: var(--ink-2); text-align: right; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 22px; }
.round { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 14px; flex: none; display: grid; place-items: center; }
.round.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--hair); width: 32px; height: 32px; font-size: 12px; }
.round.ghost:hover { color: var(--ink); border-color: var(--axis); }

/* ---------- panels ---------- */
.card, .ledger {
  position: absolute; top: 10px; bottom: 10px; z-index: 10; width: 392px; max-width: calc(100vw - 20px); overflow: auto;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow);
  overscroll-behavior: contain;
}
.card { right: 10px; animation: in-right 0.24s ease-out; }
.ledger { left: 10px; animation: in-left 0.24s ease-out; }
@keyframes in-right { from { transform: translateX(16px); opacity: 0; } }
@keyframes in-left { from { transform: translateX(-16px); opacity: 0; } }
.panel-close { position: absolute; top: 10px; right: 10px; z-index: 3; background: color-mix(in srgb, var(--surface) 85%, transparent) !important; backdrop-filter: blur(6px); }

.portrait { position: relative; aspect-ratio: 3 / 2; background: var(--surface-2); overflow: hidden; border-radius: 15px 15px 0 0; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.35s; }
.portrait img.ready { opacity: 1; }
.portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portrait .outline { fill: rgba(255, 255, 255, 0.10); stroke: #fff; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); vector-effect: non-scaling-stroke; }
.portrait .cross { fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); vector-effect: non-scaling-stroke; }
.portrait .shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.portrait figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.portrait .failed { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font-size: 12px; padding: 20px; text-align: center; }

.body { padding: 16px 18px 20px; display: grid; gap: 18px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.badge.sale { background: var(--accent); color: var(--accent-ink); }
.badge.lake { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--lakefront); }
h1.addr { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.where { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hero .num { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.hero .lbl { color: var(--ink-2); font-size: 12px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact { padding: 6px 10px; border-radius: 9px; background: var(--surface-2); font-size: 12.5px; }
.fact b { font-weight: 600; }
.nohome { color: var(--ink-2); font-size: 13px; }

h2.sec { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
h2.sec small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.kv dt { color: var(--ink-2); }
.kv dd { text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; }
.kv dd.left { text-align: left; }

/* for-sale block on the card */
.forsale { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.fs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fs-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 999px; }
.fs-dom { font-size: 12px; color: var(--ink-2); }
.forsale a { color: var(--accent); text-decoration: none; } .forsale a:hover { text-decoration: underline; }
.legend .hint b { color: var(--ink); font-weight: 600; }

/* tax: stacked bar, 2px surface gaps, 4px rounded data-ends, text in ink (never series colour) */
.taxbar { display: flex; gap: 2px; height: 14px; margin: 4px 0 10px; }
.taxbar i { display: block; min-width: 3px; }
.taxbar i:first-child { border-radius: 4px 0 0 4px; } .taxbar i:last-child { border-radius: 0 4px 4px 0; }
.taxbar i:hover { filter: brightness(1.12); }
.taxrows { display: grid; gap: 5px; font-size: 13px; }
.taxrow { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; }
.taxrow .rate { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.taxrow .amt { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; text-align: right; }
.taxtotal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.taxtotal .big { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.taxtotal .per { color: var(--ink-2); font-size: 12px; }
.fine { font-size: 11.5px; color: var(--ink-2); margin-top: 8px; }
.fine li { margin-left: 16px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface); text-decoration: none; color: inherit; font-weight: 500; font-size: 13px; }
.btn:hover { border-color: var(--axis); background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.wide { grid-column: 1 / -1; }
.loading, .error { padding: 40px 24px; text-align: center; color: var(--ink-2); }

/* ---------- ledger ---------- */
.ledger .body { padding-top: 18px; }
.ledger h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ledger .sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { padding: 12px; border-radius: 12px; background: var(--surface-2); }
.tile .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tile .l { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.tile.wide { grid-column: 1 / -1; }
.insight { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); font-size: 13px; }
.insight b { font-weight: 700; }
.list { display: grid; gap: 2px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: 9px; border: 0; background: transparent; text-align: left; width: 100%; }
.row:hover { background: var(--surface-2); }
.row .a { font-weight: 600; font-size: 13px; }
.row .b { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
.row .c { grid-column: 1 / -1; color: var(--ink-2); font-size: 12px; }
table.towns { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.towns th { text-align: right; font-weight: 500; color: var(--ink-2); font-size: 11px; padding: 4px 6px; border-bottom: 1px solid var(--hair); }
table.towns th:first-child, table.towns td:first-child { text-align: left; }
table.towns td { padding: 6px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--hair); }
table.towns tr { cursor: pointer; } table.towns tbody tr:hover { background: var(--surface-2); }

/* ---------- hover tip, toast, dialog ---------- */
.tip { position: absolute; z-index: 9; pointer-events: none; padding: 7px 10px; border-radius: 9px; font-size: 12px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); transform: translate(12px, 12px); max-width: 260px; }
.tip b { font-weight: 600; } .tip span { opacity: 0.75; }
.toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 30; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 13px; box-shadow: var(--shadow); }
dialog.about { margin: auto; max-width: 560px; width: calc(100vw - 28px); border: 1px solid var(--hair); border-radius: 16px; padding: 24px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.about::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); }
dialog.about h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px; }
dialog.about p, dialog.about li { font-size: 13.5px; color: var(--ink-2); }
dialog.about ul { margin: 10px 0 12px 18px; display: grid; gap: 7px; }
dialog.about strong { color: var(--ink); }
dialog.about .caution { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
dialog.about .close { position: absolute; top: 14px; right: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) { .tool b { display: none; } .tool { padding: 0 10px; font-size: 16px; } }
/* ---------- phones ----------------------------------------------------------------------------------
   Written against Apple's Human Interface Guidelines and checked on a simulated iPhone 15 Pro (portrait and
   landscape) and an iPhone SE. Three rules drive most of it:
     - 44x44pt is the minimum touch target, so controls grow on coarse pointers even where the paint stays small;
     - iOS zooms the page when a focused form control is under 16px, and never zooms back;
     - the page is edge-to-edge (viewport-fit=cover), so every fixed edge needs its safe-area inset or it ends
       up under the Dynamic Island or the home indicator.
   Viewport height uses dvh: on iOS `vh` is the LARGE viewport and ignores the URL bar, so a 72vh sheet is
   taller than the screen whenever the bar is showing.
---------------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --bar-h: 104px; }

  .bar {
    flex-wrap: wrap; align-content: center; gap: 8px 10px;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  .brand-text { display: none; }            /* the mark alone identifies it; the words cost a whole row */
  .pickers { order: 2; flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }

  /* iOS auto-zooms any focused control under 16px, and never zooms back out. */
  /* Searching takes over the screen, as it does in iOS apps: the software keyboard eats the bottom half, so a
     floating dropdown anchored under the field has nowhere to go. */
  .results {
    position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0;
    max-height: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
  }
  .results li { padding: 12px 12px; min-height: 56px; }
  .select select { max-width: 148px; }
  .select:has(#region) { display: inline-flex; }     /* thirteen areas, and no way to reach them from a phone */
  .select:has(#region) select { max-width: 120px; }

  /* The four actions become a bottom toolbar: they did not fit beside the pickers (472px of controls in a
     393px window pushed two of them off-screen), and the bottom of the screen is where a thumb actually
     reaches on a phone this size. */
  nav.tools {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
    display: flex; justify-content: space-around; align-items: stretch; gap: 0;
    padding: 4px max(4px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--hair);
  }
  .tool {
    flex: 1 1 0; min-width: 0; height: 50px; padding: 0 2px;
    flex-direction: column; justify-content: center; gap: 2px;
    border: 0; background: none; box-shadow: none; font-size: 17px;
  }
  .tool b { display: block; font-size: 10px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tool[aria-pressed="true"] { background: none; color: var(--accent); }
  body.panel-open nav.tools { display: none; }       /* a sheet covers it, as a sheet covers an iOS tab bar */

  /* 44pt targets everywhere else */
  .legend .chip { min-height: 40px; }

  .card, .ledger {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none;
    height: var(--sheet-h, 72dvh); max-height: 94dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: in-up 0.26s ease-out;
  }
  @keyframes in-up { from { transform: translateY(24px); opacity: 0; } }
  .portrait { border-radius: 17px 17px 0 0; }

  /* the grabber: the iOS signal that a sheet resizes, and the drag handle itself */
  .sheet-grip {
    display: block; position: sticky; top: 0; z-index: 4; height: 22px; margin: 0 0 -6px;
    background: linear-gradient(var(--surface) 60%, transparent);
    touch-action: none; cursor: grab;
  }
  .sheet-grip::before {
    content: ''; display: block; width: 38px; height: 5px; margin: 7px auto 0;
    border-radius: 999px; background: var(--hair);
  }
  .sheet-dragging { transition: none !important; }
  .panel-close { top: 26px; }

  /* everything that lives against the bottom edge now clears the toolbar */
  .legend {
    width: auto; max-width: min(260px, calc(100vw - 20px));
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(74px + env(safe-area-inset-bottom)); padding: 10px;
  }
  .legend.collapsed { padding: 0; }
  .legend.collapsed > :not(.legend-toggle) { display: none; }
  .legend-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px;
    background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-align: left;
  }
  .legend:not(.collapsed) .legend-toggle { margin-bottom: 6px; }
  .legend .ticks span:not(:first-child):not(:last-child) { visibility: hidden; }

  .time { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .toast { top: calc(var(--bar-h) + 10px); max-width: calc(100vw - 32px); }
  .about-link { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { margin-bottom: calc(56px + env(safe-area-inset-bottom)); }

  body.panel-open .legend, body.panel-open .about-link, body.time-open .legend { display: none; }
}

/* A bottom sheet in landscape left a 10px strip of map - measured on a 852x393 viewport. The screen is wide
   and short there, so the sheet goes back to the side and the toolbar back into the header. */
@media (max-width: 900px) and (orientation: landscape) {
  :root { --bar-h: 58px; }
  .bar { flex-wrap: nowrap; gap: 8px; }
  .brand-text { display: none; }
  .search { order: 0; flex: 1 1 240px; min-width: 180px; }
  .pickers { flex: 0 1 auto; min-width: 0; }
  .select select { max-width: 140px; }
  nav.tools {
    position: static; display: flex; background: none; backdrop-filter: none; border-top: 0;
    padding: 0; gap: 6px; justify-content: flex-end;
  }
  .tool { flex: 0 0 auto; width: 44px; height: 44px; flex-direction: row; }
  .tool b { display: none; }
  body.panel-open nav.tools { display: flex; }
  .card, .ledger {
    top: 8px; bottom: 8px; left: auto;
    right: max(8px, env(safe-area-inset-right));
    width: min(380px, 55vw); height: auto; max-height: none;
    border-radius: 16px; border-bottom: 1px solid var(--hair);
    padding-bottom: 0;
  }
  .sheet-grip { display: none; }
  .panel-close { top: 10px; }
  .legend { display: none; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { margin-bottom: 0; }
  .about-link, .time { bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* Touch devices of any size, portrait or landscape. These are the rules that must not depend on width:
   a phone held sideways is 852px wide and would miss a `max-width: 760px` block entirely, but it is still a
   phone, still iOS, and still has a thumb rather than a mouse pointer. */
@media (pointer: coarse) {
  button, a, select, input, .chip, .tool { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .card, .ledger, .results { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* iOS zooms the page when a focused control is under 16px, and does not zoom back */
  .search input, .select select, .results li { font-size: 16px; }

  /* Apple's 44x44pt minimum. The paint can stay small; the hit area cannot. */
  .search input { min-height: 44px; }
  .select select { min-height: 44px; }
  .round { width: 44px; height: 44px; }
  .round.ghost { width: 44px; height: 44px; font-size: 15px; }
  .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
  .about-link { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 40px; }
  .btn { min-height: 44px; }          /* the card's own actions: Street View, county record, copy link */
}