/* Explorer -- mobile-first map UI.
 *
 * Token palette below is ported verbatim from the old single-file UI
 * (`git show dcf8db7:explorer/api/static/index.html`, its `:root` and
 * `prefers-color-scheme: dark` blocks) so components built in later tasks
 * (chips, sheet, picker, scorecards) inherit the same light/dark look
 * without re-deriving colors. Everything below the token block is new:
 * the full-viewport map, fixed header, and bottom-sheet slot the plan's
 * mobile-first layout needs.
 */

:root {
  --topbar-h: 56px;
  /* One knob for control corners: pills retired for a subtler round. */
  --radius-control: 10px;
  --bg-panel: #faf9f5;
  --bg-panel-alt: #f1efe6;
  --bg-row-hover: #ece8dc;
  --text-primary: #23281f;
  --text-secondary: #656b5c;
  --text-faint: #8b9083;
  --border: #ded9c8;
  --accent: #2f6f4f;
  --accent-dark: #245a3f;
  --accent-contrast: #ffffff;
  --highlight: #ff5722;
  --highlight-soft: #fff0ea;
  --danger: #b3261e;
  --danger-bg: #fbeceb;
  --info-bg: #eaf1ef;
  --info-text: #2b5245;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --shadow: 0 8px 30px rgba(30, 35, 25, 0.16);
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* New for the mobile shell (not present in the old desktop UI). */
  --header-height: 56px;
  --touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-panel: #1c211c;
    --bg-panel-alt: #262c24;
    --bg-row-hover: #2f362c;
    --text-primary: #eef1e9;
    --text-secondary: #a7ae9d;
    --text-faint: #767d6d;
    --border: #3a4136;
    --accent: #5fae82;
    --accent-dark: #4c9a6f;
    --accent-contrast: #10150f;
    --highlight: #ff7a4d;
    --highlight-soft: #3a2620;
    --danger: #ff8a80;
    --danger-bg: #3a2220;
    --info-bg: #223129;
    --info-text: #a8e0c4;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  }
}

/* Explicit override wins over the OS preference (a user-facing theme
 * toggle, ported in a later task, sets `data-theme` on the root element). */
:root[data-theme="light"] {
  --bg-panel: #faf9f5;
  --bg-panel-alt: #f1efe6;
  --bg-row-hover: #ece8dc;
  --text-primary: #23281f;
  --text-secondary: #656b5c;
  --text-faint: #8b9083;
  --border: #ded9c8;
  --accent: #2f6f4f;
  --accent-dark: #245a3f;
  --accent-contrast: #ffffff;
  --highlight: #ff5722;
  --highlight-soft: #fff0ea;
  --danger: #b3261e;
  --danger-bg: #fbeceb;
  --info-bg: #eaf1ef;
  --info-text: #2b5245;
  --shadow: 0 8px 30px rgba(30, 35, 25, 0.16);
}
:root[data-theme="dark"] {
  --bg-panel: #1c211c;
  --bg-panel-alt: #262c24;
  --bg-row-hover: #2f362c;
  --text-primary: #eef1e9;
  --text-secondary: #a7ae9d;
  --text-faint: #767d6d;
  --border: #3a4136;
  --accent: #5fae82;
  --accent-dark: #4c9a6f;
  --accent-contrast: #10150f;
  --highlight: #ff7a4d;
  --highlight-soft: #3a2620;
  --danger: #ff8a80;
  --danger-bg: #3a2220;
  --info-bg: #223129;
  --info-text: #a8e0c4;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-panel-alt);
}

button,
input {
  font-family: inherit;
}

/* ------------------------------------------------------------------ */
/* Layout skeleton                                                     */
/* ------------------------------------------------------------------ */

#brand {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 3;
  width: 50px;
  height: 48px;
  background: #1c211e; /* the wordmark is always black, day or night */
  -webkit-mask: url(/static/logo.svg) no-repeat left top / contain;
  mask: url(/static/logo.svg) no-repeat left top / contain;
  pointer-events: none;
}

/* Subset of Outfit 500 (digits + "area disponible" glyphs, 2 KB): the
   brand face for the area readout without shipping the full family. */
/* The app face: DM Sans -- geometric like the Outfit wordmark without
   being it, and pointedly not the system/Inter stack. Variable, latin
   subset, self-hosted (14 KB). */
@font-face {
  font-family: "DM Sans";
  src: url(/static/fonts/dmsans-var.woff2?v=2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Outfit Sub";
  src: url(/static/fonts/outfit-500-sub.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* Mobile: share of Catalonia left by the filters, brand-corner style
   (mirrors #brand on the right). Desktop hides this; the readout moves
   into the filters column topbar. */
/* Mobile zooms by pinch/double-tap; the +/- widget only collided with
   the area readout in the corner. Desktop keeps it. */
@media (max-width: 899px) {
  .maplibregl-ctrl-top-right { display: none; }
}

#area-pct {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px; /* mirrors the brand corner */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Outfit Sub", "Outfit", system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-primary);
  pointer-events: none;
  text-align: right;
}
#area-pct.hidden { display: none; }
.area-pct-num { font-size: 52px; line-height: 1; }
.area-pct-label { font-size: 22px; margin-top: 2px; opacity: 0.75; }

/* Full-viewport map; every other piece of UI floats above it. */
#map {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Fixed header holding the condition chips, safe-area aware for notched
 * phones (`viewport-fit=cover` is set on the viewport meta tag). */
#chip-row {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--header-height);
  padding: max(8px, env(safe-area-inset-top)) 12px 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 10;
}

/* Bottom sheet slot: the 3-snap ranked-list sheet (js/sheet.js,
 * js/muni-list.js) mounts into this container in a later task. Padding
 * respects the home-indicator safe area on iOS. */
#sheet-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
}
#sheet-root > * {
  pointer-events: auto;
}

/* Full-screen overlays (add-condition picker, layers screen) mount here,
 * above everything else including the map and sheet. */
#overlay-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
#overlay-root:empty {
  display: none;
}
#overlay-root > * {
  pointer-events: auto;
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* API key modal (structure ported now; behavior wired in Task 2)      */
/* ------------------------------------------------------------------ */

#key-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 13, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.key-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.key-card h2 {
  margin: 0 0 6px 0;
  font-size: 17px;
}
.key-card p {
  margin: 0 0 14px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.key-card input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 9px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  margin-bottom: 10px;
}
.key-card .key-error {
  color: var(--danger);
  font-size: 12px;
  margin: -4px 0 10px 0;
  min-height: 15px;
}
.key-card button.submit {
  width: 100%;
  min-height: var(--touch-target);
  padding: 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.key-card button.submit:hover {
  background: var(--accent-dark);
}

/* ------------------------------------------------------------------ */
/* Chip row (js/chips.js)                                              */
/* ------------------------------------------------------------------ */

/* Horizontally scrollable, one chip per condition (or per OR-group) plus
 * a trailing "+" chip. Scroll-snap keeps a chip from landing half-visible
 * after a swipe; the row itself is #chip-row (styled in the layout
 * skeleton above -- this just adds the snapping and hides the scrollbar). */
#chip-row {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: var(--touch-target);
  padding: 0 16px;
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Solid = must. */
.chip-must {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}
.chip-must:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Outlined = want. */
.chip-want {
  border: 1.5px solid var(--accent);
  background: var(--bg-panel);
  color: var(--accent);
}
.chip-want:hover {
  background: var(--info-bg);
}

.chip-add {
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 700;
  padding: 0 14px;
  min-width: var(--touch-target);
  justify-content: center;
}
.chip-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Condition editor sheet (js/chips.js) -- a small modal, NOT the big     */
/* 3-snap municipality-list sheet (that's Task 6's sheet.js, mounted in   */
/* #sheet-root). This one mounts into #overlay-root and is dismissed by   */
/* Apply/Delete, its own × button, an outside tap, or Escape.             */
/* ------------------------------------------------------------------ */

.editor-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 13, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 30;
}

.editor-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
  padding: 18px 18px max(18px, env(safe-area-inset-bottom)) 18px;
}
/* On wider viewports the sheet doesn't need to hug the bottom edge --
 * center it like a regular modal card instead. */
@media (min-width: 480px) {
  .editor-backdrop {
    align-items: center;
  }
  .editor-sheet {
    border-radius: var(--radius-lg);
  }
}

.editor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.editor-layer-name {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}
.caveat-btn {
  border: none;
  background: none;
  color: var(--info-text);
  font-size: 16px;
  cursor: help;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}
.editor-close {
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

.editor-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}
.editor-stepper .step-btn {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
}
.editor-stepper .step-btn:hover {
  background: var(--bg-row-hover);
}
.editor-stepper .step-value {
  min-width: 110px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.editor-kind-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.editor-kind-toggle .kind-btn {
  flex: 1;
  min-height: var(--touch-target);
  border: none;
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.editor-kind-toggle .kind-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.editor-or-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-target);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  cursor: pointer;
}
.editor-or-toggle input {
  width: 18px;
  height: 18px;
}

.editor-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.editor-count {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}
.editor-delete,
.editor-apply {
  min-height: var(--touch-target);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.editor-delete {
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
.editor-delete:hover {
  background: var(--danger);
  color: var(--accent-contrast);
}
.editor-apply {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
}
.editor-apply:hover {
  background: var(--accent-dark);
}

/* ------------------------------------------------------------------ */
/* Add-condition picker (js/picker.js) -- a full-screen overlay mounted */
/* into #overlay-root, which already sits above #sheet-root (z-index 20 */
/* vs 5 -- see the layout skeleton above). picker.js always closes this  */
/* screen before opening chips.js's condition editor (never both at     */
/* once), so this doesn't need to out-rank .editor-backdrop's z-index    */
/* 30 -- picked to sit clearly above #overlay-root's own stacking       */
/* context regardless.                                                  */
/* ------------------------------------------------------------------ */

.picker-screen {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
}

.picker-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.picker-search {
  flex: 1;
  min-height: var(--touch-target);
  padding: 0 12px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
}

.picker-close {
  flex: 0 0 auto;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.picker-section-title {
  position: sticky;
  top: 0;
  padding: 10px 16px 6px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-panel);
}

.picker-row {
  width: 100%;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.picker-row:hover {
  background: var(--bg-row-hover);
}

.picker-row-name {
  flex: 1;
}

.picker-row-unit {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-control);
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.picker-row-caveat {
  flex: 0 0 auto;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--info-text);
  cursor: help;
}

.picker-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* 3-snap bottom sheet (js/sheet.js) -- generic drag container, mounted */
/* into #sheet-root (z-index 5, see the layout skeleton above). Sits    */
/* below #chip-row (z-index 10) and #overlay-root (z-index 20) even at  */
/* its most-open snap, by design.                                      */
/* ------------------------------------------------------------------ */

.sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
  /* transform's translateY is set imperatively by sheet.js (createSheet's
   * applyTransform) on every drag frame and on every snap -- no value here,
   * this is just the transition that makes a SNAP (not a live drag frame)
   * glide instead of jumping. sheet.js adds/removes this class itself and
   * its own SNAP_ANIMATION_MS constant matches the duration below. */
  transition: none;
}
.sheet.sheet--animating {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet-handle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  touch-action: none;
  cursor: grab;
}
.sheet-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-control);
  background: var(--border);
}

/* overflow-y/touch-action here are toggled inline by sheet.js
 * (updateScrollability): "auto"/"" at the full (most-open) snap so content
 * scrolls natively, "hidden"/"none" everywhere else so a drag anywhere on
 * the content area moves the sheet instead of fighting a scroll. Bottom
 * padding respects the home-indicator safe area regardless of snap --
 * #sheet-root's own safe-area padding (see the layout skeleton) has no
 * effect here since .sheet is itself `position: fixed`, escaping its
 * parent's box entirely, so the content area re-applies it directly. */
.sheet-content {
  flex: 1 1 auto;
  /* A flex item's default min-height is `auto`, which lets it refuse to
   * shrink below its own content's intrinsic height even inside a
   * fixed-height flex column like .sheet -- the classic flexbox overflow
   * pitfall. That would defeat overflow-y:hidden at non-full snaps (rows
   * spilling out under the header/map instead of being clipped), so it's
   * pinned to 0 here. */
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------ */
/* Ranked municipality list (js/muni-list.js) -- the sheet's content.  */
/* ------------------------------------------------------------------ */

.muni-peek {
  padding: 4px 16px 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.muni-empty {
  padding: 24px 16px 32px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.muni-sort {
  display: flex;
  gap: 8px;
  padding: 0 16px 10px 16px;
}
.muni-sort-btn {
  min-height: var(--touch-target);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
.muni-sort-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.muni-rows {
  display: flex;
  flex-direction: column;
}

.muni-row {
  width: 100%;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.muni-row:hover {
  background: var(--bg-row-hover);
}

.muni-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.muni-row-name {
  font-size: 14.5px;
  font-weight: 700;
}
.muni-row-comarca {
  font-size: 12px;
  color: var(--text-secondary);
}

.muni-row-bar {
  height: 5px;
  border-radius: var(--radius-control);
  background: var(--bg-panel-alt);
  overflow: hidden;
}
.muni-row-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-control);
}

.muni-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.muni-row-share {
  font-weight: 700;
  color: var(--text-primary);
}
.muni-row-dots {
  letter-spacing: 2px;
  color: var(--accent);
}
.muni-row-price {
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Relaxation chips -- the way out of a zero-result screen.
   --------------------------------------------------------------- */

.relaxations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 12px;
}

.relaxation-chip {
  min-height: var(--touch-target);
  padding: 8px 14px;
  border: 1px solid var(--highlight);
  border-radius: var(--radius-lg);
  background: var(--highlight-soft);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.relaxation-chip:active { background: var(--bg-row-hover); }

/* ---------------------------------------------------------------
   Preset cards -- the first-run answer to a blank builder.
   --------------------------------------------------------------- */

.preset-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 16px 20px;
}

.preset-lead {
  margin: 0 0 2px;
  color: var(--text-secondary);
  font-size: 14px;
}

.preset-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: var(--touch-target);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.preset-card:active { background: var(--bg-row-hover); }
.preset-card:disabled { opacity: 0.5; cursor: default; }
.preset-title { font-weight: 600; font-size: 15px; }
.preset-blurb { color: var(--text-secondary); font-size: 13px; line-height: 1.35; }
.preset-note { color: var(--text-faint); font-size: 12px; }

/* ---------------------------------------------------------------
   Scorecard -- why this town, criterion by criterion.
   --------------------------------------------------------------- */

.scorecard-holder { padding: 0 12px 12px; }

.scorecard {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt);
  padding: 14px 16px;
}

.scorecard-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.scorecard-name { font-weight: 600; font-size: 16px; }
.scorecard-where { color: var(--text-secondary); font-size: 13px; }

.scorecard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.scorecard-stat { display: flex; flex-direction: column; gap: 1px; }
.scorecard-stat-label { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.scorecard-stat-value { font-size: 15px; font-variant-numeric: tabular-nums; }

.scorecard-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.scorecard-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.scorecard-line-label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.scorecard-line-kind {
  color: var(--text-faint);
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 5px;
}
.scorecard-line-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scorecard-line-note { grid-column: 1 / -1; color: var(--text-faint); font-size: 11px; }
.muni-card-line-note { color: var(--text-faint); font-size: 11px; }
.scorecard-line.pass .scorecard-line-value { color: var(--accent); }
.scorecard-line.fail .scorecard-line-value { color: var(--danger); }
.scorecard-line.unknown .scorecard-line-value { color: var(--text-faint); }

/* ---------------------------------------------------------------
   Layers screen, toolbar button and toasts.
   --------------------------------------------------------------- */

#layers-btn {
  position: absolute;
  top: calc(var(--header-height) + 10px);
  right: 10px;
  z-index: 3;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.layers-title { margin: 0; font-size: 17px; }

.layer-row { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.layer-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.layer-toggle { display: flex; align-items: center; gap: 10px; min-height: var(--touch-target); cursor: pointer; }
.layer-toggle input { width: 20px; height: 20px; accent-color: var(--accent); }
.layer-name { font-size: 15px; }
.layer-unit { color: var(--text-faint); font-size: 11px; background: var(--bg-panel-alt); border-radius: var(--radius-control); padding: 2px 8px; }

.layer-legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.layer-legend-end { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.layer-legend-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  /* Matches the server's continuous ramp (rendering.py: pale yellow -> deep red). */
  background: linear-gradient(to right, rgb(255, 255, 178), rgb(189, 0, 38));
}

.layer-caveat {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}

.layer-provenance { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.layer-provenance summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.layer-provenance dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; }
.layer-provenance dt { color: var(--text-faint); }
.layer-provenance dd { margin: 0; overflow-wrap: anywhere; }

#toast-root {
  position: absolute;
  left: 50%;
  bottom: calc(18% + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: min(90vw, 420px);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg-panel);
  font-size: 13px;
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------
   Desktop: the sheet docks as a side panel. Same components.
   --------------------------------------------------------------- */

@media (min-width: 900px) {
  :root { --column-w: 420px; }

  .sheet.panel {
    top: 0;
    left: 0;
    right: auto;
    width: var(--column-w);
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: none !important;
    transition: none;
    box-shadow: var(--shadow);
  }

  .sheet.panel .sheet-handle { display: none; }
  .sheet.panel .sheet-content {
    max-height: none;
    height: 100%;
    overflow-y: auto;
    padding: 0 4px 24px !important; /* side gutter; mobile inset moot */
  }

  /* All categories visible at once: the horizontal carousel has no
     scrollbar affordance with a mouse, so the chips wrap instead. */
  body.desktop .category-carousel {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* The sticky header sits flush at the scroll container's top -- any
     container top-padding opens a slit where scrolled rows show through.
     The header carries its own breathing room instead. */
  body.desktop .drawer-topbar { padding-top: 28px; padding-bottom: 14px; }

  /* The wordmark sits over the MAP, left of nothing but the column. */
  body.desktop #brand { display: none; } /* the headbar carries the wordmark */
  body.desktop #topbar { display: flex; }
  body.desktop #map { top: var(--topbar-h); }
  body.desktop .sheet.panel { top: var(--topbar-h); height: calc(100% - var(--topbar-h)); }
  /* Permanent column: no dismissal affordances. */
  body.desktop .drawer-topbar-row .drawer-close { display: none; }
  /* Desktop: the readout floats bottom-left of the MAP (right of the
     filters column); the topbar twin stays for mobile only. */
  body.desktop #area-pct {
    top: auto;
    bottom: 24px;
    left: calc(var(--column-w) + 20px);
    right: auto;
    align-items: flex-start;
    text-align: left;
  }
  body.desktop .drawer-area { display: none; }
  body.desktop #filters-pill { display: none; }

  /* Applied chips wrap into rows -- desktop has the width. */
  body.desktop .actives-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.desktop .actives-chips .drawer-clear { margin-right: 0; }

  /* The mobile bottom bar dissolves; its pieces reposition over the map. */
  body.desktop #bottom-ui {
    left: auto;
    right: auto;
    bottom: auto;
    pointer-events: none;
    display: contents;
  }
  /* The search lives in the headbar's slot on desktop (reparented by
     applyLayout); results drop DOWN from it. */
  body.desktop #search-wrap { position: relative; pointer-events: auto; }
  body.desktop #search-input { height: 38px; box-shadow: none; background: var(--bg-inset, rgba(0,0,0,0.05)); }
  body.desktop #mobile-links { display: none; }
  body.desktop #search-results {
    top: calc(100% + 6px);
    bottom: auto;
    height: fit-content;
  }
  body.desktop #bottom-buttons { display: contents; }
  body.desktop #lista-btn {
    position: fixed;
    right: 16px;
    bottom: 34px;
    pointer-events: auto;
    z-index: 4;
  }

  /* Place detail floats over the map, same family as the editing card;
     the filters column never hides. */
  body.desktop #place-root .drawer-place {
    position: fixed;
    left: calc(var(--column-w) + 24px);
    right: 24px;
    bottom: 24px;
    max-width: 560px;
    margin: 0 auto;
    max-height: 52vh;
    overflow-y: auto;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    z-index: 5;
  }
  body.desktop #place-root.hidden { display: none; }

  /* The editing card sits over the map area, not over the column. */
  body.desktop .filter-card {
    left: calc(var(--column-w) + 24px);
    right: 24px;
    bottom: 24px;
    max-width: 520px;
  }

  /* Lista: a lateral panel docked on the RIGHT edge -- the map keeps its
     full canvas but the view gets right-padding (map.setViewPadding), so
     fly-to-municipality centres in the visible area, not under the panel. */
  body.desktop #list-view {
    position: fixed;
    right: 0;
    top: var(--topbar-h); /* below the headbar, flush to the bottom */
    bottom: 0;
    left: auto;
    width: 440px;
    overflow-y: auto;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    z-index: 3;
    padding-top: 16px;
  }
  /* Map chrome slides left of the open panel. */
  body.desktop.list-mode #lista-btn { right: calc(440px + 16px); }
  body.desktop.list-mode .maplibregl-ctrl-top-right { right: 440px; }
  body.desktop.list-mode .maplibregl-ctrl-bottom-right { right: 440px; }

  body.desktop #toast-root { left: calc(var(--column-w) + 50%); bottom: 24px; transform: translateX(-50%); }

  /* With the list panel open, floating chrome fits the remaining map
     area instead of sliding under the panel. */
  /* The search lives in the headbar now -- the list panel must not
     drag it around; only the floating cards dodge the panel. */
  body.desktop.list-mode #place-root .drawer-place,
  body.desktop.list-mode .filter-card {
    right: calc(440px + 24px);
  }
}

/* ---------------------------------------------------------------
   v3 maps-style chrome: search, pills, drawer, config card.
   --------------------------------------------------------------- */

#bottom-ui {
  position: absolute;
  left: 12px;
  right: 12px;
  /* Clears the basemap attribution strip: OpenFreeMap/OSM credit must
     stay readable below the controls. */
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
#bottom-ui > * { pointer-events: auto; }
#bottom-buttons { display: flex; gap: 8px; order: 2; flex: 0 0 auto; }
#search-wrap {
  position: relative;
  order: 1;
  flex: 1;
  min-width: 0;
}

#search-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg-panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  box-shadow: var(--shadow);
}

#search-results {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.search-hit {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--touch-target);
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:active { background: var(--bg-row-hover); }
.search-hit-comarca { color: var(--text-faint); font-size: 13px; }

#filters-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg-panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
}

#filters-count {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--result-orange-deep);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

#lista-btn {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg-panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
}

#drawer-root, #card-root { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#drawer-root.hidden { display: none; }
#drawer-root .sheet, #card-root .filter-card { pointer-events: auto; }

.drawer-content { padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 6px;
  font-weight: 600;
  font-size: 15px;
}
.drawer-clear { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }

.active-row { display: flex; align-items: center; padding: 0 8px 0 16px; }
.active-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: var(--touch-target);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.active-icon { font-size: 18px; }
.active-name { font-weight: 500; }
.active-details { color: var(--text-secondary); font-size: 13px; }
.active-remove {
  width: var(--touch-target);
  height: var(--touch-target);
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 18px;
  cursor: pointer;
}

.drawer-search { padding: 4px 16px 8px; }
.drawer-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font: inherit;
}

.category-carousel {
  display: flex;
  gap: 8px;
  padding: 2px 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.category-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.category-chip .cat-icon { margin-right: 5px; }
/* Monochrome icons were tried app-wide and reverted by design decision
   (2026-09-01): full-color emoji reads friendlier. The .mono-icon spans
   stay in the DOM as styling hooks. */
.mono-icon { filter: none; }

.catalogue-section { margin: 10px 16px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
/* Two-column catalogue: rows are short (icon + name), one column wasted
   half the sheet and doubled the scroll. Everything that is not a row
   (search, carousel, section headings) spans both columns. */
.drawer-catalogue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4px;
}
.drawer-catalogue > .drawer-search,
.drawer-catalogue > .category-carousel,
.drawer-catalogue > .catalogue-section,
.drawer-catalogue > .catalogue-empty { grid-column: 1 / -1; }

.catalogue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: var(--touch-target);
  padding: 0 8px 0 16px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.catalogue-name { min-width: 0; overflow-wrap: anywhere; }
.catalogue-row:disabled { opacity: 0.55; cursor: default; }
.catalogue-row:not(:disabled):active { background: var(--bg-row-hover); }
.catalogue-icon { font-size: 18px; }
.catalogue-detail, .catalogue-soon { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.catalogue-soon { background: var(--bg-panel-alt); color: var(--text-faint); border-radius: var(--radius-control); padding: 2px 8px; }
.catalogue-empty { padding: 16px; color: var(--text-secondary); }

.filter-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(122px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
}
.filter-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.filter-card-title { font-weight: 600; font-size: 16px; }
.filter-card-close { width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-faint); font-size: 20px; cursor: pointer; }

.mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mode-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mode-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.mode-btn.locked { opacity: 0.5; }

.slider-row { margin: 6px 0 10px; }
.slider-readout { text-align: center; font-size: 15px; font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--accent); }

.count-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; font-size: 14px; }
.count-value { font-size: 20px; font-weight: 700; min-width: 24px; text-align: center; }
.count-btn {
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
}

.filter-card-note { min-height: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.4; margin-bottom: 8px; }
.price-equivalents { color: var(--text-faint); font-size: 12px; text-align: center; margin: 2px 0 8px; }

.filter-card-use {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   List view: full-screen background swap (idealista-style).
   --------------------------------------------------------------- */

#list-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg-panel);
  overflow-y: auto;
  padding-top: calc(64px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
#list-view.hidden { display: none; }
body.list-mode #filters-pill { z-index: 3; }

/* Activos vs catálogo: the active set sits in its own tinted card so the
   split reads at a glance. */
.drawer-topbar {
  /* Pinned while the content scrolls beneath it: the title and the close
     button must never scroll away. */
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px 6px;
  background: var(--bg-panel);
}
.drawer-title { font-size: 17px; font-weight: 700; }
.drawer-topbar--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.drawer-topbar-row { display: flex; align-items: center; gap: 10px; }
.drawer-area {
  display: none; /* desktop-only, enabled in the media block */
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  font-family: "Outfit Sub", "Outfit", system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-primary);
}
.drawer-area-num { font-size: 44px; line-height: 1; }
.drawer-area-label { font-size: 22px; opacity: 0.75; }
.drawer-topbar-row .drawer-close { margin-left: auto; }
.actives-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
  /* Edge fade: the Baymard cue that more chips hide off-screen. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.actives-chips::-webkit-scrollbar { display: none; }
.active-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: rgba(253, 141, 60, 0.26);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.active-chip-x {
  color: var(--result-orange-deep);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
}
.actives-chips .drawer-clear { flex: 0 0 auto; margin-right: 24px; }
.drawer-topbar--place { gap: 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.drawer-topbar--place .drawer-close { margin-left: auto; }
.drawer-topbar--place .muni-card-comarca { flex: 0 1 auto; }
.drawer-actives {
  margin: 2px 12px 10px;
  padding: 2px 4px 4px;
  background: rgba(253, 141, 60, 0.16);
  border-radius: var(--radius-md);
}
.drawer-actives.open { padding-bottom: 8px; }
.drawer-actives-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 700;
  padding: 8px 8px 6px;
  cursor: pointer;
}
.drawer-chevron { color: var(--result-orange-deep); font-size: 14px; }
.drawer-actives .drawer-clear { margin: 6px 8px 2px; }
.drawer-head-actions { display: flex; align-items: center; gap: 4px; }
.drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Place detail inside the shared bottom sheet. */
.drawer-place { padding: 0 16px 16px; }
.drawer-place .muni-card-name { font-size: 18px; }
.place-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.place-granularity {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-dark);
  font-weight: 600;
  background: var(--info-bg);
  border-radius: var(--radius-control);
  padding: 2px 9px;
}
.place-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px 12px;
  margin-bottom: 8px;
}
.place-stat { display: flex; flex-direction: column; }
.place-stat-label { color: var(--text-faint); font-size: 11px; }
.place-stat-value { font-size: 14px; font-weight: 600; }

/* Tap-the-map municipality card. */
.muni-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(122px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.muni-card-head { display: flex; align-items: baseline; gap: 8px; }
.muni-card-name { font-weight: 700; font-size: 16px; }
.muni-card-comarca { color: var(--text-secondary); font-size: 13px; flex: 1; }
.muni-card-close { border: 0; background: transparent; color: var(--text-faint); font-size: 20px; cursor: pointer; width: 32px; height: 32px; }
.muni-card-verdict { margin: 4px 0 6px; font-size: 13px; font-weight: 600; }
.muni-card-verdict.ok { color: var(--accent); }
.muni-card-verdict.fail { color: var(--danger); }
.muni-card-stats { color: var(--text-secondary); font-size: 12px; margin-bottom: 6px; }
.muni-card-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.muni-card-lines .pass { color: var(--accent); }
.muni-card-lines .fail { color: var(--danger); }
.muni-card-lines .unknown { color: var(--text-faint); }

.spectrum-scale {
  display: flex;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 11px;
  padding: 0 2px;
}

.filter-card-source {
  color: var(--text-faint);
  font-size: 11px;
  margin: -4px 0 8px;
}

.catalogue-active-badge {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 600;
  background: var(--info-bg);
  border-radius: var(--radius-control);
  padding: 2px 8px;
  margin-left: auto;
}

/* The committed-result orange (CLASS_COLORMAP class 3/4 family). */
:root { --result-orange: #fd8d3c; --result-orange-deep: #d94701; }


/* ---------------- Headbar (desktop only) ---------------- */
#topbar {
  display: none; /* mobile: chromeless map; links ride the bottom bar */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 30;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  background: var(--bg-panel);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#topbar-brand {
  width: 40px;
  height: 38px;
  flex: 0 0 auto;
  background: #1c211e; /* the wordmark is always black, day or night */
  -webkit-mask: url(/static/logo.svg) no-repeat left center / contain;
  mask: url(/static/logo.svg) no-repeat left center / contain;
}
#topbar-search-slot { flex: 0 1 420px; margin-left: auto; }
#topbar-links {
  display: flex;
  gap: 18px;
  font-size: 13px;
}
#topbar-links a { color: var(--text-secondary, #6b6a64); text-decoration: none; }
#topbar-links a:hover { color: var(--text-primary); }

/* Mobile: the three doors under the search bar. */
#bottom-ui { flex-wrap: wrap; }
#mobile-links {
  order: 3;
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
}
#mobile-links a {
  color: var(--text-secondary, #6b6a64);
  text-decoration: none;
  background: var(--bg-panel);
  border-radius: var(--radius-control);
  padding: 3px 10px;
  box-shadow: var(--shadow);
}

/* Language toggle: rides with the nav links. */
.lang-toggle {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: none;
  color: var(--text-secondary, #6b6a64);
  border-radius: var(--radius-control);
  padding: 2px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lang-toggle:hover { color: var(--text-primary); }
#mobile-links .lang-toggle { background: var(--bg-panel); box-shadow: var(--shadow); border: 0; padding: 3px 10px; }

/* Boot veil: with saved filters, the map hides behind a blur until the
   first query result paints -- no baseline flash. */
#map-veil {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  background: rgba(247, 244, 238, 0.45);
}
#map-veil.hidden { display: none; }
body.desktop #map-veil { top: var(--topbar-h); left: var(--column-w); }
.map-veil-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border-radius: var(--radius-control);
  padding: 10px 18px;
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--text-secondary, #6b6a64);
}
.map-veil-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--accent, #2f6f4f);
  border-radius: 50%;
  animation: map-veil-spin 0.8s linear infinite;
}
@keyframes map-veil-spin { to { transform: rotate(360deg); } }

/* The traction door: slightly louder than the other nav links. */
#topbar-links .suggest-link {
  color: #15803d;
  font-weight: 600;
}
#mobile-links .suggest-link { color: #15803d; font-weight: 600; }