@layer map-first {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, #map { width: 100%; height: 100%; margin: 0; overflow: hidden; }
  html, body { background: #e9e7e2; color: var(--text-strong); font-family: var(--font-sans); }
  button, input { font: inherit; }
  button { color: inherit; }
  #map { position: fixed; inset: 0; }
  .scalar-debug-inspector {
    position: fixed; z-index: 8; right: var(--space-3); bottom: var(--space-3);
    width: min(32rem, calc(100vw - 1.5rem)); max-height: min(44dvh, 28rem); padding: var(--space-3);
    overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--surface-raised), transparent 2%); box-shadow: var(--shadow-raised);
    color: var(--text-body); font: 0.75rem/1.4 ui-monospace, monospace; pointer-events: auto;
    text-align: left; white-space: pre-wrap;
  }

  .criteria-overlay {
    --dock-height: 3.75rem;
    position: fixed; z-index: 4; top: var(--space-4); left: 50%;
    width: min(74rem, calc(100vw - 8rem)); pointer-events: none; transform: translateX(-50%);
  }
  .criteria-shell { position: relative; }
  .criteria-dock {
    height: var(--dock-height); padding: 0.375rem; overflow: hidden;
    border: 1px solid color-mix(in oklch, var(--border-strong), transparent 25%);
    border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface-raised), transparent 3%);
    box-shadow: var(--shadow-raised); pointer-events: auto;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .criteria-dock__scroller {
    display: flex; height: 100%; gap: var(--space-2); align-items: center; overflow-x: auto;
    overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;
  }
  .criteria-dock__scroller::-webkit-scrollbar { display: none; }
  .criteria-dock__item { flex: 0 0 auto; }
  .criterion-chip {
    display: inline-flex; min-height: 2.75rem; max-width: 15rem; flex: 0 0 auto; gap: 0.375rem;
    align-items: center; justify-content: center; padding: 0.625rem var(--space-3); overflow: hidden;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised);
    color: var(--text-body); cursor: pointer; font-size: var(--text-sm); font-weight: 610; line-height: 1.1;
    text-overflow: ellipsis; touch-action: manipulation; user-select: none; white-space: nowrap;
    transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
  }
  .criterion-chip:hover { border-color: var(--accent); }
  .criterion-chip[data-selected="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--text-strong); }
  .criterion-chip[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
  .criterion-chip__mark { font-weight: 750; }
  .criterion-chip--add { border-style: dashed; background: var(--surface-1); }
  .criteria-dock__limit {
    display: inline-flex; min-height: 2.75rem; flex: 0 0 auto; align-items: center;
    padding-inline: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap;
  }
  .criteria-editor {
    position: absolute; top: calc(var(--dock-height) + var(--space-2));
    left: clamp(14rem, var(--editor-anchor, 50%), calc(100% - 14rem));
    width: min(28rem, calc(100vw - 2rem)); padding: var(--space-4);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--surface-raised), transparent 2%); box-shadow: var(--shadow-raised);
    pointer-events: auto; transform: translateX(-50%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .criteria-editor__header {
    display: flex; min-height: 2rem; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-3);
  }
  .criteria-editor__title { margin: 0; font-size: var(--text-base); line-height: var(--leading-ui); }
  .criteria-editor__close, .criteria-editor__remove, .gradient-scrubber__reset {
    min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--text-body); cursor: pointer; font-size: var(--text-sm);
    text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em;
  }
  .criteria-editor__close { min-width: 2.75rem; text-decoration: none; }
  .criteria-editor__close::before { content: "×"; margin-right: var(--space-1); font-size: 1.3em; }
  .criteria-editor__remove { display: block; min-height: auto; margin-top: var(--space-2); padding: var(--space-1) 0; color: var(--text-muted); }
  .criterion-method { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.45; }
  .criterion-method__summary { display: inline-flex; min-height: 2.75rem; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
  .criterion-method__text { margin: 0 0 var(--space-2); }
  .gradient-scrubber__reset:disabled { opacity: 0.48; cursor: default; }
  :where(button, input):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .criterion-activation { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }
  .criterion-activation__state { color: var(--text-strong); }
  .criterion-activation[data-enabled="false"] .criterion-activation__state { color: var(--text-muted); }
  .criterion-activation__mobile { display: none; }
  .continuous-criterion { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; }
  .gradient-scrubber { min-width: 0; }
  .gradient-scrubber__endpoints { display: flex; justify-content: space-between; color: var(--text-muted); font-size: var(--text-xs); }
  .gradient-scrubber__rail { position: relative; height: 3.25rem; padding-top: 1.35rem; }
  .gradient-scrubber__rail input {
    width: 100%; height: 1.75rem; margin: 0; appearance: none; background: transparent; cursor: grab;
  }
  .gradient-scrubber__rail input:active { cursor: grabbing; }
  .gradient-scrubber__rail input:disabled { cursor: default; opacity: 0.48; }
  .gradient-scrubber__rail input::-webkit-slider-runnable-track {
    height: 0.625rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--band-1), var(--band-3), var(--band-5));
  }
  .gradient-scrubber--travel .gradient-scrubber__rail input::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--accent-wash), var(--band-3), var(--accent));
  }
  .gradient-scrubber__rail input::-moz-range-track {
    height: 0.625rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--band-1), var(--band-3), var(--band-5));
  }
  .gradient-scrubber__rail input::-webkit-slider-thumb {
    width: 1.75rem; height: 1.75rem; margin-top: -0.625rem; appearance: none;
    border: 3px solid var(--surface-raised); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
    transition: transform var(--duration-fast) var(--ease);
  }
  .gradient-scrubber__rail input::-moz-range-thumb {
    width: 1.4rem; height: 1.4rem; border: 3px solid var(--surface-raised);
    border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
    transition: transform var(--duration-fast) var(--ease);
  }
  .gradient-scrubber[data-interacting="true"] input::-webkit-slider-thumb { transform: translateY(-1px) scale(1.08); }
  .gradient-scrubber[data-interacting="true"] input::-moz-range-thumb { transform: translateY(-1px) scale(1.08); }
  .gradient-scrubber__value {
    position: absolute; top: 0; left: clamp(2rem, var(--range-progress), calc(100% - 2rem));
    padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); background: var(--text-strong);
    color: var(--surface-raised); font-size: var(--text-xs); font-weight: 680; line-height: 1.2;
    font-variant-numeric: tabular-nums; opacity: 0.72; white-space: nowrap; transform: translateX(-50%);
    transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  }
  .gradient-scrubber[data-interacting="true"] .gradient-scrubber__value,
  .gradient-scrubber:focus-within .gradient-scrubber__value { opacity: 1; transform: translateX(-50%) translateY(-2px); }
  .gradient-scrubber__actions { display: flex; gap: var(--space-2); align-items: center; }
  .gradient-scrubber__step {
    display: inline-grid; width: 2.25rem; height: 2.25rem; padding: 0; place-items: center;
    border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-raised);
    cursor: pointer; font-size: 1.2rem; line-height: 1;
  }
  .gradient-scrubber__step:disabled { cursor: default; opacity: 0.45; }
  .gradient-scrubber__reset { min-height: auto; padding: 0; }
  .state-toggle {
    min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--accent);
    border-radius: var(--radius-md); background: var(--accent-wash); cursor: pointer; font-weight: 680;
  }
  .state-toggle[aria-pressed="false"] { border-color: var(--border-strong); background: var(--surface-1); }
  .boolean-criterion { display: flex; align-items: center; gap: var(--space-3); }
  .criterion-help { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
  .unavailable-criterion { display: grid; gap: var(--space-3); }
  .unavailable-criterion .criterion-help { display: block; }
  .unavailable-criterion .criterion-activation__toggle:disabled { cursor: not-allowed; }
  .multi-select { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .multi-select__option { position: relative; cursor: pointer; }
  .multi-select__option input { position: absolute; opacity: 0; }
  .multi-select__option span {
    display: inline-flex; min-height: 2.75rem; align-items: center; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); font-size: var(--text-sm);
  }
  .multi-select__option input:checked + span { border-color: var(--accent); background: var(--accent-wash); font-weight: 650; }
  .multi-select__option input:checked + span::before { content: "✓"; margin-right: 0.375rem; }
  .multi-select__option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .criteria-editor--school { width: min(38rem, calc(100vw - 2rem)); }
  .school-criterion { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .school-criterion__section { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
  .school-criterion__feedback:empty { display: none; }
  .school-criterion__results { grid-column: 1 / -1; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
  .school-criterion__section--status { grid-column: 1 / -1; }
  .school-criterion__unknown { grid-column: 1 / -1; }
  .school-choice { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
  .school-choice__legend { width: 100%; margin-bottom: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); font-weight: 650; }
  .school-choice__option { position: relative; cursor: pointer; }
  .school-choice__option input { position: absolute; opacity: 0; }
  .school-choice__option span { display: inline-flex; min-height: 2.5rem; align-items: center; padding: var(--space-1) var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-sm); }
  .school-choice__option input:checked + span { border-color: var(--accent); background: var(--accent-wash); font-weight: 650; }
  .school-choice__option input[type="checkbox"]:checked + span::before { content: "✓"; margin-right: var(--space-1); }
  .school-choice__option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .school-choice__option input:disabled + span { cursor: default; opacity: .48; }
  .school-range { display: grid; align-content: start; gap: var(--space-1); min-width: 0; color: var(--text-muted); font-size: var(--text-xs); }
  .school-range__header { display: flex; justify-content: space-between; gap: var(--space-2); }
  .school-range__value { color: var(--text-strong); font-weight: 700; white-space: nowrap; }
  .school-range input { width: 100%; accent-color: var(--accent); }
  .school-criterion__unknown { display: flex; min-height: 2.5rem; align-items: center; gap: var(--space-2); color: var(--text-body); font-size: var(--text-sm); }
  .criteria-editor--health { width: min(34rem, calc(100vw - 2rem)); padding-block: var(--space-3); }
  .health-criterion { display: grid; gap: var(--space-2); }
  .health-criterion__top, .health-criterion__actions, .health-criterion__footer,
  .health-range__header, .health-configurator__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .health-criterion__count { color: var(--text-muted); font-size: var(--text-xs); }
  .health-inspector { position: fixed; z-index: 9; inset-block: var(--space-4); inset-inline-end: var(--space-4); width: min(23rem, calc(100vw - 2rem)); overflow: auto; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-raised) 96%, transparent); box-shadow: var(--shadow-raised); color: var(--text-body); }
  .health-inspector header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .health-inspector h2, .health-inspector h3 { margin: 0; }
  .health-inspector h3 { margin-block-start: var(--space-4); font-size: 1rem; }
  .health-inspector dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); margin-block-end: 0; }
  .health-inspector dt { font-weight: 650; }
  .health-inspector dd { margin: 0; color: var(--text-muted); }
  .health-needs { display: grid; gap: .25rem; max-height: 8.5rem; overflow-y: auto; }
  .health-need {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 2.35rem; gap: var(--space-2);
    align-items: center; padding: .35rem var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md);
    background: transparent; color: var(--text-body); cursor: pointer; text-align: left;
  }
  .health-need:hover { background: var(--surface-1); }
  .health-need[data-selected="true"] { border-color: var(--accent); background: var(--accent-wash); }
  .health-need__label { overflow: hidden; font-size: var(--text-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .health-need__role, .health-need__value { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
  .health-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
  .health-setting__title { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); }
  .health-range { display: grid; gap: .15rem; min-width: 0; font-size: var(--text-xs); }
  .health-range__value { color: var(--text-strong); font-weight: 700; }
  .health-range input { width: 100%; accent-color: var(--accent); }
  .health-setting__method { grid-column: 1; margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
  .health-role { display: flex; grid-column: 2; grid-row: 2 / span 2; align-items: end; gap: .2rem; margin: 0; padding: 0; border: 0; }
  .health-role__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .health-role__option { position: relative; cursor: pointer; }
  .health-role__option input { position: absolute; opacity: 0; }
  .health-role__option span { display: inline-flex; min-height: 2.35rem; align-items: center; padding: .25rem .45rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-xs); }
  .health-role__option input:checked + span { border-color: var(--accent); background: var(--accent-wash); font-weight: 650; }
  .health-role__option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .health-criterion__configure, .health-criterion__details, .health-configurator__cancel, .health-configurator__apply {
    min-height: 2.5rem; padding: .35rem var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-body); cursor: pointer; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: .2em;
  }
  .health-configurator__apply { background: var(--accent); color: var(--surface-raised); text-decoration: none; }
  .health-criterion__footer { color: var(--text-muted); font-size: var(--text-xs); }
  .health-criterion__status { font-weight: 650; }
  .health-configurator { display: grid; gap: var(--space-2); }
  .health-configurator__title { margin: 0; font-size: var(--text-sm); }
  .health-configurator__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem var(--space-2); margin: 0; padding: 0; border: 0; }
  .health-configurator__choice { display: flex; min-height: 2.35rem; gap: var(--space-2); align-items: center; font-size: var(--text-xs); }
  .health-configurator__choice input { width: 1rem; height: 1rem; accent-color: var(--accent); }
  .health-configurator__proposal { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
  .criteria-catalogue__list { display: grid; gap: var(--space-2); }
  .criteria-catalogue__item {
    min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); background: var(--surface-1); cursor: pointer; text-align: left;
  }
  .criteria-catalogue__item::after { content: "+"; float: right; color: var(--accent); font-weight: 750; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /*
   * Wide landscape windows use a floating rail rather than a permanent
   * application sidebar. The map still fills the viewport behind it and the
   * supporting editor grows sideways, so a complex criterion never masks the
   * central north/south map corridor.
   */
  @media (min-width: 80rem) and (min-height: 38rem) and (min-aspect-ratio: 4 / 3) {
    .criteria-overlay {
      --dock-height: auto;
      top: var(--space-4); bottom: var(--space-4); left: var(--space-4);
      width: 13.5rem; transform: none;
    }
    .criteria-shell { height: 100%; }
    .criteria-dock {
      width: 100%; height: auto; max-height: 100%;
    }
    .criteria-dock__scroller {
      flex-direction: column; height: auto; max-height: calc(100dvh - 2.75rem);
      align-items: stretch; overflow-x: hidden; overflow-y: auto;
      overscroll-behavior: contain; touch-action: pan-y;
    }
    .criteria-dock__item, .criterion-chip, .criteria-dock__limit { width: 100%; }
    .criterion-chip { max-width: none; justify-content: flex-start; text-align: left; }
    .criteria-dock__limit { justify-content: center; text-align: center; white-space: normal; }
    .criteria-editor {
      top: 0; left: calc(100% + var(--space-2));
      width: min(28rem, calc(100vw - 15.5rem)); max-height: calc(100dvh - 2rem);
      overflow-y: auto; overscroll-behavior: contain; transform: none;
    }
    .criteria-editor--school { width: min(34rem, calc(100vw - 15.5rem)); }
    .criteria-editor--health { width: min(31rem, calc(100vw - 15.5rem)); }
  }

  @media (max-width: 62rem) and (min-width: 48rem) {
    .criteria-overlay { width: calc(100vw - 6rem); }
    .criterion-chip { max-width: 12.5rem; }
  }
  @media (max-width: 47.99rem) {
    .criteria-overlay {
      --dock-height: 4rem; top: auto; right: 0; bottom: 0; left: 0; width: 100%;
      padding: 0 var(--space-2) max(var(--space-2), env(safe-area-inset-bottom)); transform: none;
    }
    .criteria-shell { display: flex; flex-direction: column; gap: var(--space-2); }
    .criteria-dock { order: 2; border-radius: var(--radius-lg); }
    .criterion-chip { min-height: 3rem; max-width: 14rem; }
    .criteria-editor {
      position: relative; top: auto; left: auto; order: 1; width: 100%; min-height: 9.5rem; max-height: 9.5rem;
      padding: var(--space-3) var(--space-4); overflow-y: auto;
      border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg);
      overscroll-behavior: contain; transform: none;
    }
    .criteria-editor__header { min-height: 1.75rem; margin-bottom: var(--space-1); }
    .criteria-editor__close { min-height: 2.75rem; margin-block: -0.5rem; }
    .criteria-editor__remove { position: absolute; top: auto; right: auto; bottom: var(--space-2); left: var(--space-4); margin: 0; }
    .criterion-activation__desktop { display: none; }
    .criterion-activation__mobile { display: inline; }
    .continuous-criterion { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .gradient-scrubber__rail { height: 2.75rem; }
    .gradient-scrubber__actions { justify-content: flex-end; }
    .criterion-help { display: none; }
    .criteria-catalogue { max-height: min(70dvh, 34rem); }
    .criteria-catalogue .criteria-editor__header { margin-bottom: var(--space-3); }
    .criteria-catalogue__list { overflow-y: auto; }
    .criteria-editor--school { max-height: min(42dvh, 23rem); padding-block: var(--space-2); }
    .criteria-editor--school .school-criterion { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .criteria-editor--school .criteria-editor__remove { position: static; margin-top: var(--space-1); }
    .criteria-editor--health { min-height: 11rem; max-height: min(44dvh, 24rem); overflow-y: auto; }
    .criteria-editor--health .criteria-editor__remove { position: static; margin-top: 0; }
    .health-needs { display: none; }
    .health-setting { grid-template-columns: minmax(0, 1fr); }
    .health-role { grid-column: 1; grid-row: auto; }
    .health-setting__method { grid-column: 1; }
    .health-configurator__choices { grid-template-columns: 1fr; }
    .maplibregl-ctrl-bottom-right { bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; }
    body:has(.criteria-overlay[data-expanded="true"]) .maplibregl-ctrl-bottom-right { bottom: calc(13rem + env(safe-area-inset-bottom)) !important; }
  }
  @media (max-width: 23rem) {
    .criterion-chip { max-width: 12.5rem; }
    .criteria-editor { padding-inline: var(--space-3); }
    .criteria-editor__remove { left: var(--space-3); }
  }
  @media (max-width: 47.99rem) and (max-height: 32rem) {
    .criteria-editor, .criteria-editor--school, .criteria-editor--health {
      min-height: 0; max-height: min(34dvh, 14rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
  }
  @media (forced-colors: active) {
    .criterion-chip[data-selected="true"], .multi-select__option input:checked + span,
    .state-toggle[aria-pressed="true"] { border-width: 2px; }
  }
}

@media (max-width: 47.99rem) {
  .health-inspector { inset: auto 0 0; width: auto; max-height: 56dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}
.road-gpu-benchmark {
  position: fixed;
  inset: 1rem 1rem auto auto;
  z-index: 30;
  display: grid;
  gap: .55rem;
  width: min(29rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--color-ink, #2c2925) 18%, transparent);
  border-radius: .8rem;
  background: color-mix(in srgb, #fffaf1 94%, transparent);
  box-shadow: 0 .4rem 1.4rem rgb(39 31 23 / 16%);
  color: #302a25;
  font: 500 .82rem/1.35 var(--font-sans, sans-serif);
}

.road-gpu-benchmark output { white-space: pre-wrap; overflow-wrap: anywhere; }
.road-gpu-benchmark__metrics {
  margin: 0;
  white-space: pre-wrap;
  font: 500 .75rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.road-gpu-benchmark__actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.road-gpu-benchmark button,
.road-gpu-benchmark a {
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px solid currentColor;
  border-radius: .55rem;
  background: #fffaf1;
  color: inherit;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}
.road-gpu-benchmark button:first-child { flex: 1 1 100%; font-size: .9rem; }

.region-generalization-qa {
  position: fixed; inset: .75rem .75rem auto auto; z-index: 50;
  width: min(21rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); overflow: auto;
  display: grid; gap: .55rem; padding: .8rem; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow-raised); color: var(--text-body); font-size: .82rem;
}
.region-generalization-qa p { margin: 0; color: var(--text-muted); line-height: 1.35; }
.region-generalization-qa label { display: grid; gap: .2rem; }
.region-generalization-qa label:has(input[type="checkbox"]) { grid-template-columns: auto 1fr; align-items: center; min-height: 2.4rem; }
.region-generalization-qa select,
.region-generalization-qa button { min-height: 2.75rem; font: inherit; }
.region-generalization-qa input[type="range"] { width: 100%; }
.region-generalization-qa__metrics { margin: 0; max-height: 12rem; overflow: auto; white-space: pre-wrap; font-size: .68rem; }
.connected-living-why {
  display: block; padding: .55rem .65rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-raised));
  color: var(--text-body); line-height: 1.4;
}
body:has([data-region-generalization-qa]) .road-gpu-benchmark { inset: auto .75rem .75rem auto; max-height: 42vh; }

.region-color-qa {
  position: fixed;
  inset: .75rem .75rem auto auto;
  z-index: 52;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem .65rem;
  width: min(23rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 95%, transparent);
  box-shadow: var(--shadow-raised);
  color: var(--text-body);
  font-size: .8rem;
  backdrop-filter: blur(10px);
}
.region-color-qa header,
.region-color-qa > p,
.region-color-qa > label:has(input[type="range"]),
.region-color-qa__sample,
.region-color-qa__intent,
.region-color-qa__state,
.region-color-qa__actions { grid-column: 1 / -1; }
.region-color-qa header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.region-color-qa header span { color: var(--text-muted); font-size: .68rem; font-weight: 720; text-align: right; }
.region-color-qa p { margin: 0; color: var(--text-muted); line-height: 1.35; }
.region-color-qa label { display: grid; gap: .2rem; color: var(--text-muted); font-weight: 650; }
.region-color-qa label:has(input[type="checkbox"]) { grid-template-columns: auto 1fr; align-items: center; min-height: 2.25rem; }
.region-color-qa select,
.region-color-qa button { min-height: 2.65rem; font: inherit; }
.region-color-qa select { width: 100%; min-width: 0; }
.region-color-qa input[type="range"] { width: 100%; accent-color: var(--pmv-region-fill); }
.region-color-qa__sample {
  height: 2.4rem;
  border: 1px solid var(--pmv-region-border);
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pmv-region-fill) 8%, transparent);
  transition: background-color 185ms cubic-bezier(.2,.7,.2,1), border-color 185ms cubic-bezier(.2,.7,.2,1);
}
.region-color-qa__intent { color: var(--text-muted); line-height: 1.35; }
.region-color-qa__state { white-space: pre-wrap; font: 600 .7rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.region-color-qa__actions { display: flex; gap: .45rem; }
.region-color-qa__actions button {
  flex: 1;
  padding-inline: .65rem;
  border: 1px solid color-mix(in srgb, var(--pmv-region-border) 52%, var(--border-subtle));
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-body);
  font-weight: 760;
  cursor: pointer;
}
.region-color-capture .region-color-qa,
.region-color-capture .criteria-overlay,
.region-color-capture .road-runtime-status,
.region-color-capture .scalar-debug-inspector,
.region-color-capture .maplibregl-ctrl { visibility: hidden !important; }
body:has([data-region-color-qa]) .criteria-overlay,
body:has([data-region-color-qa]) .road-runtime-status,
body:has([data-region-color-qa]) .scalar-debug-inspector { display: none; }
@media (max-width: 47.99rem) {
  .region-generalization-qa { inset: .5rem .5rem auto; width: auto; max-height: 46vh; grid-template-columns: 1fr 1fr; }
  .region-generalization-qa > strong,
  .region-generalization-qa > p,
  .region-generalization-qa > button,
  .region-generalization-qa__metrics { grid-column: 1 / -1; }
  .connected-living-why { grid-column: 1 / -1; }
  body:has([data-region-generalization-qa]) .road-gpu-benchmark {
    inset: auto .5rem .5rem;
    width: auto;
    max-height: 42vh;
  }
  body:has([data-region-generalization-qa]) .road-gpu-benchmark__actions {
    position: sticky;
    bottom: 0;
    padding-top: .35rem;
    background: color-mix(in srgb, #fffaf1 96%, transparent);
  }
  .region-color-qa {
    inset: .5rem .5rem auto;
    width: auto;
    max-height: 58dvh;
    padding: .7rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .region-color-qa > * { grid-column: 1; min-width: 0; }
  .region-color-qa header { display: grid; grid-template-columns: minmax(0, 1fr); }
  .region-color-qa header span { text-align: left; }
}

.road-runtime-status {
  position: fixed;
  z-index: 3;
  bottom: 1rem;
  left: 1rem;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: .45rem .7rem;
  border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 .2rem .8rem rgb(39 31 23 / 10%);
  color: var(--text-muted);
  font: 650 var(--text-xs)/1.3 var(--font-sans);
  pointer-events: none;
}

.road-runtime-status[data-state="COMPLETE"] { color: var(--text-body); }

@media (max-width: 47.99rem) {
  .road-runtime-status {
    right: .75rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    left: .75rem;
    max-width: none;
    border-radius: var(--radius-md);
    text-align: center;
  }
}

/* Exploration direction: one ink colour, floating controls, quiet basemap. */
@layer map-first {
  :root { --accent: #2448e8; --accent-wash: #eef1ff; --focus-ring: #2448e8; }
  .criteria-dock { border-color: rgb(60 70 104 / 12%); border-radius: 20px;
    box-shadow: 0 4px 24px rgb(36 46 74 / 10%); }
  .criteria-dock__scroller { padding: 2px; }
  .criterion-chip { border-color: transparent; border-radius: 13px; background: transparent; }
  .criterion-chip[data-selected="true"] { border-color: rgb(36 72 232 / 25%); color: #1734b7; background: #eef1ff; }
  .criterion-chip--add { border-color: rgb(60 70 104 / 20%); }
  .gradient-scrubber__rail input::-webkit-slider-runnable-track { border: 0; border-radius: 999px;
    background: linear-gradient(90deg, #dbe2ff, #8299f3, #2448e8); }
  .gradient-scrubber__rail input::-moz-range-track { border: 0; border-radius: 999px;
    background: linear-gradient(90deg, #dbe2ff, #8299f3, #2448e8); }
}
.road-runtime-status::before { content: ""; display: inline-block; width: .6rem; height: .6rem;
  margin-right: .45rem; border-radius: 50%; background: #2448e8; }

/* Criteria: one compact dock, one bounded editor, and an explicit map-only state. */
@layer map-first {
  .criteria-overlay { --dock-height: 6.875rem; }
  .criteria-dock { display: flex; flex-direction: column; }
  .criteria-dock__heading {
    display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); width: 100%; min-height: 2.75rem;
    padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md);
    background: transparent; text-align: left; cursor: pointer; font-size: var(--text-sm);
  }
  .criteria-dock__heading:hover { background: var(--surface-1); }
  .criteria-dock__title { font-weight: 700; }
  .criteria-dock__count { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
  .criteria-dock__action { margin-left: auto; color: var(--accent); font-size: var(--text-xs); }
  .criteria-dock__strip { display: flex; align-items: center; min-height: 0; gap: .125rem; }
  .criteria-dock__strip[hidden] { display: none; }
  .criteria-dock__scroller { flex: 1; min-width: 0; padding: 3px; scroll-padding: 3px; }
  .criteria-dock__scroll {
    display: none; flex: 0 0 2.75rem; width: 2.75rem; min-height: 2.75rem; padding: 0;
    border: 0; border-radius: var(--radius-md); background: var(--surface-1);
    color: var(--accent); cursor: pointer; font-size: 1.5rem;
  }
  .criteria-dock__strip[data-overflow="true"] .criteria-dock__scroll { display: block; }
  .criteria-dock__scroll:disabled { color: var(--text-muted); background: transparent; cursor: default; }
  .criteria-overlay[data-collapsed="true"] { --dock-height: 3.625rem; }
  .criteria-overlay[data-collapsed="true"] .criteria-dock { width: min(100%, 18rem); height: var(--dock-height); margin-inline: auto; }
  .criterion-chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .criterion-chip__mark { flex: 0 0 auto; }
  .criterion-chip { gap: .45rem; }
  .criteria-editor {
    display: flex; flex-direction: column; max-height: calc(100dvh - var(--dock-height) - 3rem); overflow: hidden;
  }
  .criteria-editor__header { flex: 0 0 auto; background: var(--surface-raised); }
  .criteria-editor__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-padding-block: var(--space-3); padding: 3px; margin: -3px; }
  .criteria-editor__close { margin-block: 0; }
  .criteria-editor__remove {
    position: static; min-height: 2.75rem; margin-top: var(--space-2); padding: var(--space-2) 0;
  }
  .criterion-activation { align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
  .criterion-activation__toggle {
    min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; font-size: var(--text-sm);
  }
  .criterion-activation[data-enabled="false"] .criterion-activation__toggle {
    border-color: var(--accent); background: var(--accent); color: var(--surface-raised);
  }
  .criterion-distance-label { margin: 0; color: var(--text-body); font-size: var(--text-sm); }
  .continuous-criterion { gap: var(--space-2); }
  .gradient-scrubber__rail { height: 4.125rem; padding-top: 1.375rem; }
  .gradient-scrubber__rail input { height: 2.75rem; scroll-margin-block-start: 1.5rem; }
  .gradient-scrubber__step { width: 2.75rem; height: 2.75rem; }
  .gradient-scrubber__reset { min-height: 2.75rem; padding-inline: var(--space-2); margin-left: auto; }
  .school-range input, .health-range input { min-height: 2.75rem; margin: 0; }
  .school-choice__option span, .school-criterion__unknown, .health-role__option span,
  .health-configurator__choice, .health-criterion__configure, .health-criterion__details,
  .health-configurator__cancel, .health-configurator__apply { min-height: 2.75rem; }
  .health-need { width: 100%; min-height: 2.75rem; }
  .health-need[data-selected="true"] :is(.health-need__role, .health-need__value) { color: var(--text-body); }
  .health-needs { max-height: none; overflow: visible; }
  .criterion-method__summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  @media (min-width: 80rem) and (min-height: 38rem) and (min-aspect-ratio: 4 / 3) {
    .criteria-overlay { --dock-height: auto; width: 15rem; }
    .criteria-dock__scroller { max-height: calc(100dvh - 6rem); }
    .criteria-editor { max-height: calc(100dvh - 2rem); }
    .criteria-overlay[data-collapsed="true"] { bottom: auto; }
  }
  @media (max-width: 47.99rem) {
    .criteria-overlay { --dock-height: 6.875rem; bottom: 1.5rem; }
    .criteria-editor, .criteria-editor--school, .criteria-editor--health {
      min-height: 0; max-height: min(44dvh, calc(100dvh - 11rem));
      padding: var(--space-3); border-radius: var(--radius-lg); overflow: hidden;
    }
    .criteria-editor__header { margin-bottom: var(--space-2); }
    .criteria-editor__remove { position: static; }
    .health-needs { display: grid; }
    .gradient-scrubber__rail { height: 4.125rem; }
    .health-need { grid-template-columns: minmax(0, 1fr) auto; }
    .health-need__role { grid-column: 1; grid-row: 2; }
    .health-need__value { grid-column: 2; grid-row: 1 / 3; }
    .criterion-help { display: block; }
    .health-criterion__footer { flex-wrap: wrap; }
    .maplibregl-ctrl-bottom-right,
    body:has(.criteria-overlay[data-expanded="true"]) .maplibregl-ctrl-bottom-right { bottom: 0 !important; }
  }
  @media (max-width: 47.99rem) and (max-height: 32rem) {
    .criteria-editor, .criteria-editor--school, .criteria-editor--health { max-height: 32dvh; }
  }
}
@media (max-width: 47.99rem) {
  .road-runtime-status { top: max(.75rem, env(safe-area-inset-top)); bottom: auto; right: auto; left: .75rem; max-width: calc(100vw - 1.5rem); text-align: left; }
}

/* Annual air: same bounded native controls as the other real criteria. */
.air-criterion { display: grid; gap: 1rem; }
.air-criterion .criterion-help { margin: 0; }
.air-criterion a { color: var(--color-accent, #454eb0); text-underline-offset: .18em; }


/* Palier 1 — une intention grand public, sans reproduire la taxonomie Géorisques. */
.criteria-editor__heading { display: grid; gap: .15rem; }
.criteria-editor__family { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.categorical-risk-criterion { display: grid; gap: 1rem; }
.categorical-risk-criterion .criterion-help { margin: 0; }
.categorical-risk-criterion a { color: var(--color-accent, #454eb0); text-underline-offset: .18em; }
.categorical-risk-criterion .school-choice__option { display: grid; }
.criterion-option__detail { display: block; margin: .2rem .5rem .4rem; color: var(--text-muted); font-size: var(--text-xs); }