/* Sheets: bottom sheet, desktop rail and panel, groups and form controls, sliders. Loaded after style.css. */
/* Bottom sheet */
#backdrop { position: fixed; inset: 0; z-index: 3; background: var(--scrim); opacity: 0; transition: opacity var(--dur-sheet) var(--ease-out); }
#backdrop.is-open { opacity: 1; }
/* Height follows the content, capped just below the top; only the body scrolls. */
.sheet { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; width: min(100%, var(--sheet-max)); margin-inline: auto; max-height: calc(100dvh - var(--sheet-top)); display: flex; flex-direction: column; margin-block: 0;
  background: var(--bg); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet);
  transform: translateY(100%); transition: transform var(--dur-sheet) var(--ease-out); will-change: transform; overflow: hidden; }
.sheet.is-open { transform: translateY(0); }
.sheet.is-dragging { transition: none; }
.sheet-header { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 19px var(--space-3) var(--space-2) var(--space-5); touch-action: none; cursor: grab; user-select: none; }
.sheet.is-dragging .sheet-header { cursor: grabbing; }
.handle { position: absolute; top: 8px; left: calc(50% - 20px); width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); opacity: .7; }
.sheet-header h2 { flex: 1; min-width: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.close { position: relative; display: grid; place-items: center; flex-shrink: 0; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); }
.close::after { content: ''; position: absolute; inset: calc((var(--control-sm) - var(--touch)) / 2); }
.close:hover { background: var(--surface-2); color: var(--text); }
.close svg { width: var(--icon-sm); height: var(--icon-sm); }
.sheet-body { flex: 0 1 auto; min-height: 0; padding: var(--space-2) max(0px, calc(var(--space-5) - var(--sheet-gutter, 0px))) var(--space-5); overflow-y: auto; scrollbar-gutter: stable both-edges; scrollbar-width: thin; overscroll-behavior: contain; }
.sheet-footer { flex-shrink: 0; display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); }
.action-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
.action-row .btn { min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding-inline: 8px; }
.action-row .btn svg { flex-shrink: 0; }
.action-row .btn span { min-width: 0; white-space: nowrap; }
.action-row .btn span[hidden] { display: none; }
/* Both action rows: secondary left, wide primary right. */

.btn svg.mdi { fill: currentColor; stroke: none; }
@supports not (scrollbar-gutter: stable) { .sheet-body { overflow-y: scroll; } }
/* The details body and footer together leave one normal section gap. */
#details-content { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .sheet, #backdrop, .btn, .fab { transition: none !important; }
  .locating::after, .live-badge .live-dot, .site-fresh .fresh-dot, .toast { animation: none !important; }
  .locating::after { border-color: var(--follow); }
}
/* Rail tooltips only exist on desktop; below 1024px the rail dissolves into the familiar map buttons. */
.rail { display: contents; }
.rail-tip { display: none; }
/* Desktop (same query as DESKTOP_QUERY): a persistent rail on the left; the panel slides out right next to it,
   so the icon that opened it is always adjacent. Bottom sheets below 1024px. */
@media (min-width: 1024px) {
  :root { --rail: calc(64px + env(safe-area-inset-left)); --panel-bottom: max(12px, env(safe-area-inset-bottom));
    --panel-clearance: calc(var(--rail) + var(--sheet-max)); --map-clearance: var(--rail); }
  :root[data-panel-open] { --map-clearance: var(--panel-clearance); }
  #map { left: var(--rail); }
  /* Rail and panel share the page surface and a hairline: one connected column, not a floating card. */
  .rail { position: fixed; z-index: 5; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--top) 0 var(--panel-bottom) env(safe-area-inset-left); background: var(--bg); border-right: 1px solid var(--border); }
  .rail .map-fabs { display: contents; }
  /* Rail buttons use the shared control surface (style-controls.css); only size and tooltip are rail-specific. */
  .rail .fab { position: relative; inset: auto; width: var(--touch); height: var(--touch); }
  .rail .fab[aria-pressed="true"] { color: var(--on-follow); }
  .rail-tip { display: block; position: absolute; left: calc(100% + 12px); top: 50%; z-index: 1; transform: translate(-4px, -50%); width: max-content; max-width: 240px;
    padding: 4px 10px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font: var(--fw-medium) var(--fs-sm)/1.45 var(--font);
    box-shadow: 0 2px 8px #0003; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast); }
  .rail .fab:is(:hover, :focus-visible) .rail-tip { opacity: 1; transform: translate(0, -50%); transition-delay: 300ms; }
  .rail .fab:focus-visible .rail-tip { transition-delay: 0s; }
  /* The open panel already shows this title. */
  .rail .fab[aria-pressed="true"] .rail-tip { display: none; }
  .sheet { z-index: 4; left: var(--rail); right: auto; top: 0; bottom: 0;
    width: var(--sheet-max); height: auto; max-height: none; margin: 0;
    border-radius: 0; border-right: 1px solid var(--border); box-shadow: 10px 0 28px -16px #0006;
    transform: translateX(-100%); transition: transform 160ms ease-in, box-shadow 160ms ease-in; }
  .sheet:not(.is-open) { box-shadow: none; }
  .sheet.is-open { transform: none; transition: transform 220ms var(--ease-out); }
  .handle { display: none; }
  .sheet-header { min-height: 52px; padding-top: max(var(--space-4), env(safe-area-inset-top)); cursor: default; touch-action: auto; }
  .sheet.instant-swap { transition: none; }
  .sheet-body { flex: 1 1 auto; }
  .sheet-footer { padding-bottom: var(--panel-bottom); }
  #backdrop { display: none; }
  /* Zoom group and position button hang from the top on desktop. */
  .maplibregl-ctrl-top-right { top: var(--top); bottom: auto; }
  .position-fab { top: calc(var(--top) + 2 * var(--zoom-button) + 2px + var(--group-gap)); bottom: auto; }
  /* Map overlays follow the visible map edge: rail only, or rail plus panel. */
  .maplibregl-ctrl-top-left { left: calc(var(--map-clearance) + 16px - var(--rail)); }
  .toast { top: calc(var(--top) + (var(--search-h) - 26px) / 2); left: calc((100% + var(--panel-clearance)) / 2); max-width: min(420px, calc(100vw - var(--panel-clearance) - 2 * var(--toast-side))); }
  :root .hits-chip { left: calc((100% + var(--map-clearance)) / 2); max-width: calc(100vw - var(--map-clearance) - 120px); }
  /* Credits bottom right: the rail freed that corner, and the panel never covers it. */
  .maplibregl-ctrl-bottom-right { right: var(--edge); bottom: var(--bottom); }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
  .map-credits-text { max-width: calc(100vw - var(--map-clearance) - var(--edge) - 16px); }
  :root[data-panel-open] .map-credits-text { white-space: normal; text-align: right; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .sheet, .sheet.is-open { transform: none !important; transition: none !important; }
  .rail-tip { transition: none !important; }
}

/* Groups and form controls */
.group { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.group:last-child { margin-bottom: 0; }
.group > legend, .group > h3 { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 0; margin-bottom: var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#power-value { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); text-transform: none; letter-spacing: 0; }
#connectors { display: block; }
#connectors legend + * { margin-top: 0; }
#connectors { --gap: var(--space-2); }
#connectors > label { margin: 0 var(--space-2) var(--space-2) 0; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer; background: var(--bg); transition: background var(--dur-fast), border-color var(--dur-fast); }
.chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* 44 px tall hit area; rows of chips are 7 px apart, so neighbours barely overlap. */
.chip::after { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--chip-h) - var(--touch)) / 2); bottom: calc((var(--chip-h) - var(--touch)) / 2); }
.chip:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control); padding: 0 var(--space-4); background: var(--surface); cursor: pointer; }
.choice:first-of-type { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.choice:last-of-type { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.choice:only-of-type { border-radius: var(--radius-md); }
.choice + .choice { border-top: 1px solid var(--border); }
input[role="switch"] { appearance: none; position: relative; flex-shrink: 0; width: var(--switch-w); height: var(--switch-h); margin: 0; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background var(--dur-fast); }
input[role="switch"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(var(--switch-h) - 6px); height: calc(var(--switch-h) - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0004; transition: transform var(--dur-fast) var(--ease-out); }
input[role="switch"]:checked { background: var(--accent); }
input[role="switch"]:checked::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
.segments { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface); }
.segments button { position: relative; flex: 1; min-height: calc(var(--touch) - 6px); border: 0; border-radius: 9px; padding: 0 var(--space-3); font-size: var(--fs-md); font-weight: var(--fw-medium); background: transparent; }
.segments button::after { content: ''; position: absolute; inset: -3px 0; }
.segments button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px #0003; font-weight: var(--fw-semibold); }
:root[data-theme="dark"] .segments button[aria-pressed="true"] { background: var(--surface-2); }
.theme-segments button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; color: var(--muted); }
.theme-segments button[aria-pressed="true"] { color: var(--text); }
.theme-segments svg.mdi { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; stroke: none; }
.theme-segments span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.small { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* Power slider with detents */
.slider { position: relative; height: 44px; }
.slider::before { content: ''; position: absolute; top: 19px; left: 15px; right: 15px; height: 6px; border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--surface-2) 0 var(--from), var(--accent) var(--from) var(--to), var(--surface-2) var(--to) 100%); }
.slider input { position: absolute; inset: 0; margin: 0; width: 100%; height: 44px; appearance: none; background: transparent; pointer-events: none; }
.slider input::-webkit-slider-thumb { appearance: none; height: 24px; width: 24px; background: var(--bg); border: 0; border-radius: 50%; pointer-events: auto; cursor: grab; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px #0004; }
.slider input::-moz-range-thumb { height: 24px; width: 24px; background: var(--bg); border: 0; border-radius: 50%; pointer-events: auto; cursor: grab; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px #0004; }
.slider.single input { pointer-events: auto; }
#price-value { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); text-transform: none; letter-spacing: 0; }
.detents { position: relative; margin: 0 15px; height: 18px; font-size: var(--fs-xs); color: var(--muted); }
.detents span { position: absolute; transform: translateX(-50%); }
.detents span:nth-child(1){left:0%}.detents span:nth-child(2){left:12.5%}.detents span:nth-child(3){left:25%}.detents span:nth-child(4){left:37.5%}.detents span:nth-child(5){left:50%}.detents span:nth-child(6){left:62.5%}.detents span:nth-child(7){left:75%}.detents span:nth-child(8){left:87.5%}.detents span:nth-child(9){left:100%}

/* Filter sheet: calm sections split by hairlines, heading left and current value right; the two status
   switches share one grouped card at the foot. Chrome paints a fieldset from its legend's middle, so the
   hairline and the section gap belong to the legend itself. */
.filter-body > .group { margin: 0; padding: 0 0 var(--space-4); }
.filter-body > .group > legend { padding-top: var(--space-4); }
.filter-body > .group + .group > legend { border-top: 1px solid var(--border); }
.filter-body > .group:first-child > legend { padding-top: var(--space-1); }
.filter-body > #connectors { padding-bottom: var(--space-2); }
.filter-body > .price-range { padding-bottom: var(--space-1); }
.filter-body > .status-switches { padding: var(--space-3) 0 0; }
.filter-body .slider { margin-top: -6px; }
/* Thumbs end flush with the switch card's content inset and stay clear of the system back-swipe edge. */
.filter-body .slider { margin-inline: var(--space-4); }
.filter-body .detents { margin-inline: calc(15px + var(--space-4)); }
/* The current value stays on one line; a long heading wraps instead. */
.filter-body legend { gap: var(--space-3); }
.filter-body legend > output { flex-shrink: 0; white-space: nowrap; }
.price-range > legend { margin-bottom: 0; }
.group-note { margin: 0 0 var(--space-1); font-size: var(--fs-sm); color: var(--muted); }