:root {
  /* One interface for every map style: system sans, frosted overlay panels, fully rounded controls. The map styles
     change the map, never the chrome around it. */
  --ui-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --paper: rgba(255, 255, 255, .86); --solid: #ffffff; --ink: #1d1d1f; --muted: #6e6e73; --line: rgba(60, 60, 67, .16);
  --fill: rgba(118, 118, 128, .12);   /* control wells: the style switcher track, hover rows */
  /* the primary: pure blue, rgb(0, 0, 255), for everything you press or follow (fills, checks, links, grid
     references). 8.6:1 on white, so small text needs no darker variant. */
  --accent: #0000ff;
  --accent-ink: #0000ff;
  --os-blue: #0000ff;           /* grid references */
  --radius: 22px;               /* panels */
  --blur: saturate(180%) blur(20px);
  --shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 8px 28px rgba(0, 0, 0, .12);
  /* distance of the floating panels from the screen edge, clear of notches and the home indicator */
  --gap: 12px;
  --sheet-w: 344px;             /* the place sheet on wide screens */
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}
/* no rubber-banding past the page edges (the panels that scroll use overscroll-behavior: contain) */
html, body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }   /* no text highlighting, except where you type */
html, body { margin: 0; height: 100%; background: #efece4; font-family: var(--ui-font); color: var(--ink); -webkit-font-smoothing: antialiased; }
#map { position: absolute; inset: 0; }
.panel { position: absolute; background: var(--paper); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--radius); box-shadow: var(--shadow), inset 0 0 0 .5px rgba(0, 0, 0, .06); }
button { touch-action: manipulation; font-family: var(--ui-font); }
/* every button is a pill */
button.panel { border-radius: 999px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* search sits above the Key button, the Layers panel and the map controls */
#search { top: calc(var(--gap) + var(--sat)); left: calc(var(--gap) + var(--sal)); width: min(300px, calc(100vw - 2 * var(--gap) - var(--sal) - var(--sar))); z-index: 5; }
#search:focus-within { box-shadow: var(--shadow), 0 0 0 1.5px rgba(0, 0, 255, .45); }
/* wide screens: while the place sheet is open the search bar widens to its width, so the two read as one column */
@media (min-width: 700px) {
  #search { transition: width .32s var(--ease-sheet); }
  body.sheet-open #search { width: var(--sheet-w); }
}
#search .bar { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 18px; height: 46px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 16px: iOS Safari zooms the page into any input set smaller */
#q { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); min-width: 0; }
#q::placeholder { color: var(--muted); }
#q::-webkit-search-cancel-button, #q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
#q-clear { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -2px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: rgba(60, 60, 67, .38); cursor: pointer; }
#q-clear:hover { color: rgba(60, 60, 67, .6); }
#q-clear[hidden] { display: none; }
#results { list-style: none; margin: 0; padding: 4px 0 6px; border-top: 1px solid var(--line); max-height: min(60vh, calc(100dvh - 120px)); overflow: auto; overscroll-behavior: contain; }
#results:empty { display: none; }
#results li { padding: 8px 18px; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; }
#results li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#results li .cx { color: var(--muted); }
#results li .k { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
#results li.on { background: var(--fill); }
#results li.empty, #results li[aria-disabled="true"] { cursor: default; color: var(--muted); }
#results li.empty { font-size: 13.5px; }

/* style and layers: a popover beside the Map button (inside the top-right control stack, so it follows it) */
.map-ctrl { position: relative; }
#layers-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; padding: 0; border-radius: 999px; cursor: pointer; color: var(--ink);
  background: var(--paper); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); }
#layers-btn:hover { background: var(--solid); }
#layers-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
#layers { display: none; top: 0; right: calc(100% + 10px); padding: 12px 16px; font: 14px/1.4 var(--ui-font); color: var(--ink); z-index: 2; min-width: 188px; }
#layers.open { display: block; }
#layers label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; user-select: none; }
#layers label[hidden] { display: none; }
#layers input { accent-color: var(--accent); margin: 0; }
#layers .h { font-size: 12px; font-weight: 600; color: var(--muted); margin: 2px 0 6px; }
#styles { display: flex; background: var(--fill); border-radius: 999px; padding: 3px; margin: 0 0 12px; }
#styles button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 999px; cursor: pointer; color: var(--ink); }
#styles button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 255, .3); font-weight: 600; }

#readout { position: absolute; left: calc(var(--gap) + var(--sal)); bottom: max(calc(8px + var(--sab)), var(--attrib-l, 0px)); z-index: 2; font-size: 12.5px; color: var(--ink); background: var(--paper); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; pointer-events: none; display: flex; gap: 12px; }
#readout #gr { color: var(--os-blue); font-weight: 600; letter-spacing: .02em; }
#readout span:empty { display: none; }
#readout:has(#gr:empty) { display: none; }

.maplibregl-ctrl-bottom-left { bottom: max(calc(30px + var(--sab)), calc(var(--attrib-lm, 0px) + 22px)); left: var(--sal); }
.maplibregl-ctrl-bottom-right { bottom: var(--sab); right: var(--sar); }
.maplibregl-ctrl-top-right { top: var(--sat); right: var(--sar); }
.maplibregl-ctrl-scale { background: rgba(255, 255, 255, .85); border-color: var(--ink); color: var(--ink); font-family: var(--ui-font); }
.maplibregl-ctrl-group { border-radius: 999px !important; box-shadow: var(--shadow) !important; overflow: hidden; background: var(--paper) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.maplibregl-ctrl-group button { width: 36px !important; height: 36px !important; }
.maplibregl-ctrl-group button + button { border-top: 0 !important; }   /* zoom: one pill, no divider */
.maplibregl-ctrl-group.north { display: none; }                      /* the compass hides at north */
/* 3D: a "3D" pill; on, it opens into "2D" over a vertical tilt slider */
.d3 { width: 36px; border-radius: 999px; background: var(--paper); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow); overflow: hidden; }
.d3-mode { display: block; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; color: var(--ink);
  font: 600 13px/36px var(--ui-font); padding: 0; letter-spacing: .01em; }
.d3-mode:hover { background: var(--fill); }
.d3-slider { display: none; position: relative; height: 112px; cursor: grab; touch-action: none; outline-offset: -4px; }
.d3.on .d3-slider { display: block; }
.d3-track { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.d3-knob { position: absolute; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--accent);
  top: calc(9px + (1 - var(--tilt, 0)) * (100% - 18px - 18px)); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.d3-slider:active { cursor: grabbing; }
.maplibregl-ctrl-attrib { font-size: 11px; font-family: var(--ui-font); background: rgba(255, 255, 255, .86) !important; border-radius: 999px 0 0 0; }
.maplibregl-ctrl-attrib a { color: var(--ink); }
.maplibregl-marker { z-index: 2; }
/* the selection's pin (areas, empty ground) drops in */
.sel-pin svg { transform-origin: 50% 100%; animation: pin-drop .3s cubic-bezier(.3, 1.4, .6, 1) both; }
@keyframes pin-drop { from { transform: translateY(-12px) scale(.6); opacity: 0; } }

/* The place sheet: the app's place card (docs/ios/design-spec.md §4.6, §5.8). Wide screens dock it on the left under
   the search bar, full height, sliding in from the left; phones get a bottom sheet (the media query below). */
#sheet { top: calc(var(--gap) + var(--sat) + 56px); bottom: calc(var(--gap) + var(--sab)); left: calc(var(--gap) + var(--sal));
  width: var(--sheet-w); z-index: 4; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
  visibility: hidden; transform: translateX(calc(-100% - var(--gap) - var(--sal) - 12px));
  transition: transform .32s var(--ease-sheet), visibility 0s .32s, opacity .15s; }
#sheet.open { visibility: visible; transform: none; transition: transform .32s var(--ease-sheet), visibility 0s, opacity .15s; }
/* the search results take the sheet's place while they show */
body:has(#results:not(:empty)) #sheet.open { visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s .15s; }
.sh-grab { display: none; }
.sh-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: start; gap: 10px; padding: 14px 14px 0; flex: none; }
.sh-titles { text-align: center; padding-top: 5px; }
#sheet-title { margin: 0; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.012em; overflow-wrap: anywhere; outline: none; }
#sh-kind { margin: 3px 0 0; font-size: 15px; line-height: 1.3; color: var(--muted); }
#sh-kind:empty { display: none; }
.sh-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fill); color: var(--ink); }
.sh-btn:hover { background: rgba(118, 118, 128, .2); }
.sh-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 22px; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.sh-cols { display: flex; gap: 20px; }
.sh-cols > .sh-f { flex: 1 1 0; min-width: 0; }
.sh-f[hidden], .sh-link[hidden] { display: none; }
.sh-l { font-size: 13px; line-height: 1.3; color: var(--muted); }
.sh-v { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 17px; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sh-gr { color: var(--os-blue); font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.sh-copy { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -4px 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer; }
.sh-copy:hover { background: var(--fill); color: var(--ink); }
.sh-copy .i-done, .sh-copy.done .i-copy { display: none; }
.sh-copy.done .i-done { display: block; }
.sh-copy.done { color: #1f8a3b; }
.sh-link { display: flex; align-items: center; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sh-link svg { flex: none; }
.sh-toast { position: absolute; top: 56px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.sh-toast.on { opacity: 1; transform: none; }
/* the scale and the readout move out from under the sheet */
.maplibregl-ctrl-bottom-left, #readout { transition: transform .32s var(--ease-sheet); }
body.sheet-open .maplibregl-ctrl-bottom-left, body.sheet-open #readout { transform: translateX(calc(var(--sheet-w) + var(--gap))); }

/* tile data missing (fresh clone, or a deploy without the .pmtiles) */
#nodata { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 18px 20px; }
#nodata b { display: block; font-size: 16px; }
#nodata p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

body.shot #search, body.shot #layers, body.shot #readout, body.shot .maplibregl-ctrl-top-right { display: none; }
/* Phones: the place sheet is a bottom sheet with a grabber (a side sheet doesn't fit), at its full height or peeking
   (--sheet-y, set while dragging); the scale and attribution ride above it (--sheet-cover). */
@media (max-width: 699px) {
  #sheet { top: auto; left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); bottom: calc(8px + var(--sab)); width: auto;
    max-height: min(72dvh, calc(100dvh - 150px)); transform: translateY(calc(100% + 24px + var(--sab))); }
  #sheet.open { transform: translateY(var(--sheet-y, 0px)); }
  #sheet.dragging { transition: none; }
  .sh-grab { display: block; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(60, 60, 67, .3); }
  .sh-head { padding-top: 18px; touch-action: none; cursor: grab; }
  body.sheet-open .maplibregl-ctrl-bottom-left, body.sheet-open .maplibregl-ctrl-bottom-right, body.sheet-open #readout { transform: translateY(calc(-1 * var(--sheet-cover, 0px))); }
  .maplibregl-ctrl-bottom-right { transition: transform .32s var(--ease-sheet); }
  body.sheet-dragging .maplibregl-ctrl-bottom-left, body.sheet-dragging .maplibregl-ctrl-bottom-right { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  #sheet, #sheet.open, #search, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right, #readout { transition: none; }
  .sel-pin svg { animation: none; }
}
@media (max-width: 600px) {
  /* zoom buttons and compass sit below the search bar, not under it */
  .maplibregl-ctrl-top-right { top: calc(58px + var(--sat)); }
  #readout { flex-wrap: wrap; max-width: calc(100vw - 120px); gap: 2px 10px; }
  #readout #ll { display: none; }
  .maplibregl-ctrl-attrib.maplibregl-compact-show { max-width: calc(100vw - 130px); }
}

/* OS sheet-margin grid numbers (the overlay lives inside #map) */
#margin { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.gm { position: absolute; left: 0; top: 0; will-change: transform; font: 600 11px/1 var(--ui-font); color: var(--os-blue);
  background: rgba(255, 255, 255, .9); padding: 2px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gm.big { font-size: 12.5px; color: #fff; background: var(--os-blue); }
body.shot #margin { display: none; }

/* Map key */
/* the Map popup's second page: the key */
#layers { max-height: calc(100dvh - 2 * var(--gap) - var(--sat) - var(--sab) - 60px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; }
#layers.keying { width: min(330px, calc(100vw - 72px - var(--sal) - var(--sar))); }
.row-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 0; padding: 9px 2px 1px;
  border: 0; border-top: 1px solid var(--line); background: transparent; font: 600 14px var(--ui-font); color: var(--ink); cursor: pointer; }
.row-btn svg, .back-btn svg { color: var(--muted); }
.back-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px -2px; padding: 4px 2px; border: 0; background: transparent;
  font: 600 14px var(--ui-font); color: var(--accent-ink); cursor: pointer; }
.back-btn svg { color: var(--accent-ink); }
#key .kh b { display: block; font-size: 20px; font-weight: 700; }
#key .kh span { display: block; color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
#key section { border-top: 1px solid var(--line); padding: 8px 0 4px; }
#key h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
#key .kr { display: flex; align-items: center; gap: 10px; min-height: 22px; }
#key .ks { width: 50px; display: flex; justify-content: center; align-items: center; flex: none; }
#key .kl { font-size: 13px; line-height: 1.25; }
#key .kl i { font-style: normal; margin-left: 6px; font-size: 12px; font-weight: 500; letter-spacing: .02em; }
#key .kt { white-space: nowrap; }
#key .kf { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 12px 0 0; }
#key .kc { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
#key .kc h4 { margin-bottom: 4px; }
#key .kc ul { margin: 0; padding: 0 0 0 14px; }
#key .kc li { margin: 0 0 4px; }
#key .kc a { color: var(--accent-ink); }

/* 1810: an engraved sheet has no National Grid, so the modern cyan grid styling goes; panels clear the border */
body[data-style="os1810"] { --gap: 24px; }
body[data-style="os1810"] #margin { display: none; }
body[data-style="os1810"] #readout { bottom: max(calc(22px + var(--sab)), var(--attrib-l, 0px)); }

.d3.on .d3-mode { color: var(--accent); }   /* 3D on: its "2D" reads as the active control */