:root {
  --ink: #16211c;
  --ink-soft: #5a6b62;
  --line: #d8e0db;
  --panel: #ffffff;
  --accent: #1d5c46;
  --ok: #26734a;
  --caution: #9a6a00;
  --stressed: #c0392b;
  --unknown: #5f6e7c;
  --report: #6a3fb5;
  --sidebar-w: 340px;
  --topbar-h: 52px;
  /* Height of the collapsed sheet's visible strip: the 46px handle plus the
     sheet's 1px top border. Used by the transform and the map's offset so
     they cannot drift apart. */
  --sheet-peek: 47px;
}

* { box-sizing: border-box; }

/* An ID selector outranks the UA's [hidden] rule, which rendered a broken
   #photo-preview on every form open. Guard it once for the whole project:
   #detail, #search-results and #reports-clear all rely on [hidden] too. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}

/* ── top bar ───────────────────────────────────────────────── */
#topbar {
  position: fixed;
  inset: 0 0 auto 0;
  min-height: var(--topbar-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  z-index: 20;
}
#topbar .brand { display: flex; align-items: baseline; gap: 8px; }

#topbar .brand span { font-size: 13px; opacity: .85; }
#topbar .spacer { flex: 1; }
#prototype-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px;
}
#report-open {
  flex: none;
  font: inherit;
  font-weight: 600;
  padding: 7px 13px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
#report-open:hover { background: #eef5f1; }

/* ── layout ────────────────────────────────────────────────── */
#map {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: var(--sidebar-w);
  bottom: 0;
}
#map.picking { cursor: crosshair; }

#sidebar {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 0;
  z-index: 10;
}
/* The only scrolling box. Its padding is inside the scroller, so nothing can
   peek above the sheet handle. */
#sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  /* iOS home indicator. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

h2 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.swatches { list-style: none; margin: 0 0 10px; padding: 0; }
.swatches li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 14px; }
.sw { width: 22px; height: 5px; border-radius: 3px; display: inline-block; }
.sw.ok { background: var(--ok); }
.sw.caution { background: var(--caution); }
.sw.stressed { background: var(--stressed); }
.sw.unknown { background: var(--unknown); }

.disclaimer {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  background: #f6f8f7;
  border-left: 3px solid var(--caution);
  padding: 9px 10px;
  margin: 0 0 10px;
}
.meta { font-size: 12px; color: var(--ink-soft); margin: 0 0 6px; }

#legend, #detail, #reports-panel, #layers-panel, #keyboard-lists {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* The status key and its caveat now close the panel, so nothing follows it. */
#legend { border-bottom: 0; margin-bottom: 0; }
#reports-panel { border-bottom: 1px solid var(--line); }

/* ── detail panel ──────────────────────────────────────────── */
#detail h3 { margin: 0 0 2px; font-size: 17px; }
#detail .sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }

.status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.status-pill.ok { background: var(--ok); }
.status-pill.caution { background: var(--caution); }
.status-pill.stressed { background: var(--stressed); }
.status-pill.unknown { background: var(--unknown); }

.readings { list-style: none; margin: 0 0 10px; padding: 0; }
.readings li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--line);
}
.readings .label { color: var(--ink-soft); font-size: 13px; }
.readings .value { font-weight: 600; font-variant-numeric: tabular-nums; }
.readings .when { display: block; font-weight: 400; font-size: 11px; color: var(--ink-soft); }

.reasons { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.reasons li { margin-bottom: 3px; }

.links { font-size: 13px; }
.links a { color: var(--accent); display: block; margin-bottom: 3px; }

#reports-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#reports-list li { padding: 7px 0; border-bottom: 1px dotted var(--line); }
#reports-list .rwater { font-weight: 600; }
#reports-list .rmeta { color: var(--ink-soft); font-size: 12px; }

.link-btn {
  font: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}

/* ── modal ─────────────────────────────────────────────────── */
#report-modal { position: fixed; inset: 0; z-index: 40; }
#report-modal.picking { pointer-events: none; }
#report-modal.picking #report-form { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,30,24,.45); }

#report-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  padding: 0 18px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
#report-form header {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
#report-form header h2 { flex: 1; margin: 0; font-size: 15px; color: var(--ink); }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-right: -10px;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-soft);
}
.icon-btn:hover { background: #eef5f1; }

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 4px; }
.field.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field.grid2 label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 4px; }

input[type=text], input[type=number], input[type=file], select, textarea {
  font: inherit;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }
.inline { display: flex; gap: 6px; }
.inline select { width: auto; }

.hint { font-size: 12px; color: var(--ink-soft); margin: 5px 0 0; }
.hint.good { color: var(--ok); }
.hint.warn { color: #9a6a00; }

.loc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.loc-row button {
  font: inherit;
  font-size: 13px;
  padding: 7px 11px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.loc-row button.active { background: var(--accent); color: #fff; }

#photo-preview { display: block; max-width: 100%; max-height: 170px; margin-top: 9px; border-radius: 4px; }

.privacy {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: #f6f8f7;
  border-left: 3px solid var(--accent);
  padding: 9px 10px;
  margin: 0 0 14px;
}

#report-form footer { display: flex; align-items: center; gap: 12px; }
#r-submit {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

/* ── map popups / toast ────────────────────────────────────── */
.maplibregl-popup-content { font: inherit; padding: 11px 13px; }
.maplibregl-popup-content strong { display: block; margin-bottom: 3px; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: 20px;
  z-index: 60;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

@media (max-width: 820px) {
  :root { --sidebar-w: 0px; }
  #map { right: 0; bottom: 45%; }
  #sidebar { top: auto; height: 45%; width: 100%; border-left: 0; border-top: 1px solid var(--line); }
}

.unit-tag { align-self: center; font-size: 13px; color: var(--ink-soft); }

/* ── layers panel ──────────────────────────────────────────── */
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 2px 0 6px; }
.toggle input { width: auto; margin: 0; }
.mine-swatches { list-style: none; margin: 4px 0 0; padding: 0; }
.mine-swatches li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 1px 0; }
.mine-swatches i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.mine-swatches i.epa { background: #b8243c; }
.mine-swatches i.usmin { background: #7a5c2e; }
.mine-swatches i.mrds { background: #4a7a8c; }

/* ── topbar search ─────────────────────────────────────────── */
#search { position: relative; flex: 0 1 340px; margin-left: 18px; }
#search-input {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 7px 28px 7px 11px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  background: rgba(255,255,255,.15);
  color: #fff;
}
#search-input::placeholder { color: rgba(255,255,255,.75); }
#search-input:focus {
  outline: none;
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
#search-input:focus::placeholder { color: var(--ink-soft); }
#search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: 0;
  color: rgba(255,255,255,.8);
  cursor: pointer;
}
#search-input:focus ~ #search-clear { color: var(--ink-soft); }
#search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  z-index: 50;
}
#search-results li { padding: 7px 12px; cursor: pointer; color: var(--ink); }
#search-results li:hover, #search-results li.active { background: #eef5f1; }
#search-results .r-name { display: block; font-size: 14px; }
#search-results .r-sub { display: block; font-size: 12px; color: var(--ink-soft); }

/* ── map legend overlay ────────────────────────────────────── */
#map-legend {
  position: absolute;
  left: 12px;
  bottom: 40px;
  width: 248px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  z-index: 5;
  font-size: 12.5px;
  overflow: hidden;
}
#legend-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 9px 11px;
  cursor: pointer;
}
#legend-toggle span { flex: 1; text-align: left; }
#legend-toggle i { transition: transform .15s; font-style: normal; }
#legend-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
#legend-body { padding: 0 11px 10px; }
#legend-body[hidden] { display: none; }
#legend-body h3 {
  margin: 8px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  font-weight: 700;
}
#legend-body h3 small, #legend-body li small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
ul.lg { list-style: none; margin: 0; padding: 0; }
ul.lg li { display: flex; align-items: center; gap: 7px; padding: 2px 0; line-height: 1.3; }
ul.lg.toggles label { display: flex; align-items: center; gap: 7px; cursor: pointer; margin: 0;
  min-height: 24px; padding: 4px 0; width: 100%; }
ul.lg input[type=checkbox] { width: auto; margin: 0; }
ul.lg li.sub-swatch { padding-left: 21px; color: var(--ink-soft); }
.ln { width: 20px; height: 5px; border-radius: 3px; flex: none; }
.ln.ok { background: var(--ok); }
.ln.caution { background: var(--caution); }
.ln.stressed { background: var(--stressed); }
.ln.unknown { background: var(--unknown); }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.dot.gage { background: linear-gradient(90deg, #2e8b57 50%, #c0392b 50%); }
.dot.report { background: #6a3fb5; }
.dot.noaa { background: #1b6ca8; }
.dot.snotel { background: #00a3b4; }
.dot.epa { background: #b8243c; }
.dot.usmin { background: #7a5c2e; }
.dot.mrds { background: #4a7a8c; }
.lg-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); }

/* Item 3: the legend mirrors the map's dash patterns, so status is readable
   without relying on hue. Keep these in step with the featured-line layers. */
.ln { background-repeat: repeat-x; background-position: left center; }
.ln.ok { background: var(--ok); }
.ln.caution {
  background-image: repeating-linear-gradient(to right,
    var(--caution) 0 7px, transparent 7px 11px);
  background-color: transparent;
}
.ln.stressed {
  background-image: repeating-linear-gradient(to right,
    var(--stressed) 0 3px, transparent 3px 6px);
  background-color: transparent;
}
.ln.unknown {
  background-image: repeating-linear-gradient(to right,
    var(--unknown) 0 1.5px, transparent 1.5px 5px);
  background-color: transparent;
}
.sw.caution, .sw.stressed, .sw.unknown { background-color: transparent; }
.sw.caution { background-image: repeating-linear-gradient(to right, var(--caution) 0 7px, transparent 7px 11px); }
.sw.stressed { background-image: repeating-linear-gradient(to right, var(--stressed) 0 3px, transparent 3px 6px); }
.sw.unknown { background-image: repeating-linear-gradient(to right, var(--unknown) 0 1.5px, transparent 1.5px 5px); }
.lg .pat { font-size: 11px; color: var(--ink-soft); }

/* Item 4: the sidebar text lists are the keyboard route to map data. */
.feature-list { list-style: none; margin: 0 0 6px; padding: 0; }
.feature-list li { border-bottom: 1px dotted var(--line); }
.feature-list button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 2px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.feature-list button:hover { background: #eef5f1; }
.feature-list .fl-name { flex: 1; }
.feature-list .fl-status { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 4px; }
.row-del {
  font: inherit; font-size: 12px; line-height: 1;
  min-width: 32px; min-height: 32px;
  background: none; border: 0; border-radius: 4px;
  color: var(--ink-soft); cursor: pointer;
}
.row-del:hover { background: #f6e9e7; color: var(--stressed); }

/* Item 5: live region + inline validation. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#error-summary {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 2px solid var(--stressed);
  border-radius: 4px;
  background: #fdf3f2;
  font-size: 13.5px;
}
#error-summary h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--stressed); }
#error-summary ul { margin: 0; padding-left: 18px; }
#error-summary a { color: var(--stressed); }
.field-error { margin: 4px 0 0; font-size: 12.5px; color: var(--stressed); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--stressed) !important; border-width: 2px; }
fieldset[aria-invalid="true"] { border: 0 !important; }

/* Item 6: grouped questions are real fieldsets; strip the default chrome. */
.nmtu-q fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.nmtu-q legend {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
#loc-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#loc-fieldset legend {
  padding: 0; margin-bottom: 4px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft);
}

/* Item 7: native dialog replaces the hand-rolled modal. */
#report-modal {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
#report-modal::backdrop { background: rgba(15,30,24,.45); }
#report-modal[open] { display: flex; }
#report-form {
  position: static;
  transform: none;
  width: 100%;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  box-shadow: none;
  border-radius: 0;
}

/* Visible focus everywhere, since keyboard is now a supported route. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #1b6ca8;
  outline-offset: 2px;
}
#detail:focus { outline: none; }
#detail:focus-visible { outline: 3px solid #1b6ca8; outline-offset: 2px; }

/* Item 16-adjacent: honor reduced motion for the CSS side. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 820px) {
  /* Item 1: a real mobile arrangement. The brand subtitle and the prototype
     tag come off, the report button never shrinks, and search takes its own
     row rather than collapsing to 41px. */
  #topbar { gap: 8px; padding: 6px 10px; }
  #topbar .brand span, #prototype-tag { display: none; }
  #topbar .spacer { display: none; }
  #search { order: 3; flex: 1 0 100%; margin-left: 0; }
  #report-open { margin-left: auto; }

  /* Item 2: the legend becomes a bottom sheet with a sticky, always
     reachable collapse control, and never covers the ODbL attribution. */
  #map-legend {
    left: 8px;
    right: 8px;
    bottom: 34px;
    width: auto;
    max-width: 320px;
    max-height: 60%;
    display: flex;
    flex-direction: column;
  }
  #legend-toggle {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--line);
  }
  #legend-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ── NMTU mirrored questions ───────────────────────────────── */
.form-divider { margin: 18px 0 12px; padding-top: 14px; border-top: 2px solid var(--line); }
.form-divider h3 { margin: 0 0 3px; font-size: 14px; color: var(--ink); }
.nmtu-q > label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.nmtu-q .req { color: var(--stressed); }
.q-desc { white-space: pre-wrap; margin-bottom: 6px; }
.choices { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; }
.choice { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer;
  min-height: 24px; padding: 4px 0; }
.choice input { width: auto; margin: 2px 0 0; flex: none; }
.other-text { margin-top: 4px; }
#nmtu-send-note { display: block; margin-top: 6px; font-weight: 600; }

/* Item 4: report rows are buttons so keyboard users can reach them. */
#reports-list li.row-actions { display: flex; align-items: flex-start; gap: 4px; padding: 0; }
.report-row {
  flex: 1;
  display: block;
  min-height: 32px;
  padding: 7px 2px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.report-row:hover { background: #eef5f1; }
.report-row .rwater { display: block; font-weight: 600; font-size: 13px; }
.report-row .rmeta { display: block; color: var(--ink-soft); font-size: 12px; }
.skip-link:focus {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  z-index: 100;
  padding: 10px 14px;
  background: #fff;
  color: var(--accent);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
#topbar h1 { margin: 0; font-size: 16px; letter-spacing: .02em; }

#sheet-handle { display: none; }

/* ── Item 18: load / failure state on the map itself ───────── */
#map-loading {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: min(420px, calc(100% - 24px));
  padding: 10px 16px;
  text-align: center;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  font-size: 13.5px;
}
#map-loading.is-error { border-color: var(--stressed); border-width: 2px; }
#map-loading p { margin: 0; }
#map-retry {
  margin-top: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  min-height: 32px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.lg-busy { margin-left: auto; font-size: 11px; color: var(--ink-soft); }

/* ── Item 19: confirm dialog ───────────────────────────────── */
#confirm-modal {
  width: min(380px, calc(100vw - 32px));
  padding: 18px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
}
#confirm-modal::backdrop { background: rgba(15,30,24,.45); }
#confirm-modal h2 { margin: 0 0 6px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); }
#confirm-modal p { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }
.confirm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
#confirm-ok {
  font: inherit; font-weight: 600;
  min-height: 40px; padding: 9px 16px;
  border: 0; border-radius: 4px;
  background: var(--stressed); color: #fff; cursor: pointer;
}

/* ── Item 13/14: privacy block and the required-field note ─── */
.privacy ul { margin: 6px 0 8px; padding-left: 18px; }
.privacy li { margin-bottom: 4px; }
.privacy h3 { margin: 0 0 4px; font-size: 13px; color: var(--ink); }
.required-note { margin: 0 0 12px; }
.required-note .req { color: var(--stressed); font-weight: 700; }

@media (max-width: 820px) {
  /* ── Item 20: the map is the product; detail arrives as a sheet ── */
  /* The map stops above the sheet's peek bar so MapLibre's scale and the
     ODbL attribution are never permanently covered (item 2's licensing
     point). The sheet overlays the map only while the user has it open. */
  #map { bottom: calc(var(--sheet-peek) + env(safe-area-inset-bottom, 0px)); }
  #sidebar {
    top: auto;
    bottom: 0;
    /* dvh tracks iOS Safari's collapsing toolbar; vh is the fallback and is
       the large viewport, which put the sheet's foot under the chrome. */
    height: 58vh;
    height: 58dvh;
    max-height: 58vh;
    max-height: 58dvh;
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform .2s ease;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0,0,0,.18);
    z-index: 12;
  }
  body.sheet-open #sidebar { transform: translateY(0); }
  /* A real header, not a sticky child: it IS the top edge of the sheet. */
  #sheet-handle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    min-height: 46px;
    padding: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  #sheet-handle .grab {
    width: 36px; height: 4px; border-radius: 2px; background: var(--line);
  }

  /* The map legend already carries the status key; drop the duplicate. */
  #legend .swatches, #legend h2:first-child { display: none; }

  #map-legend { max-height: 48%; bottom: 8px; }
  /* When the detail sheet is up it would otherwise sit on top of the legend,
     making the collapse control unreachable all over again. */
  body.sheet-open #map-legend {
    bottom: calc(58vh - var(--sheet-peek) + 9px);
    bottom: calc(58dvh - var(--sheet-peek) + 9px);
    max-height: 32%;
  }
  #map-loading { top: 10px; }
}