@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root {
  color-scheme: light;
  --ink: #132849;
  --muted: #60708a;
  --cream: #f5f8fd;
  --paper: #fff;
  --line: #dce4f0;
  --mint: #dcecff;
  --green: #1768d7;
  --blue: #4a9ee8;
  --pink: #ed8eac;
  --gold: #e7af4e;
  --red: #d75f59;
  --shadow: 0 20px 70px rgba(25, 55, 101, .14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: linear-gradient(180deg, #fff 0, var(--cream) 42%); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; margin: 0; min-height: 100vh; overflow-x: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.site-header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(23, 38, 34, .08);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 74px;
  padding: 10px clamp(18px, 4vw, 62px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { align-items: center; color: var(--ink); display: inline-flex; font: 800 1.35rem "Manrope", sans-serif; gap: 10px; letter-spacing: -.055em; text-decoration: none; width: max-content; }
.brand > span > span { color: var(--green); }
.brand-mark { fill: var(--mint); height: 38px; overflow: visible; stroke: var(--ink); stroke-linecap: round; stroke-width: 1.8; width: 34px; }
.brand-mark circle { fill: var(--ink); stroke: none; }
.brand-mark path:last-child { fill: none; }
.header-tagline { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; margin: 0; }
.header-actions { align-items: center; display: flex; gap: 18px; justify-content: flex-end; }
.text-button { background: none; border: 0; cursor: pointer; font-size: .86rem; font-weight: 700; padding: 9px 1px; }
.text-button:hover { color: var(--green); }

.button { align-items: center; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; font-weight: 800; gap: 6px; justify-content: center; padding: 11px 16px; transition: background .16s, box-shadow .16s, transform .16s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .58; transform: none; }
.button-primary { background: var(--mint); box-shadow: 0 7px 18px rgba(23, 104, 215, .14); color: #123a72; }
.button-primary:hover { background: #c8e0ff; box-shadow: 0 9px 24px rgba(23, 104, 215, .22); }
.button-dark { background: var(--ink); color: white; }
.button-wide { width: 100%; }
.github-button { background: white; border: 1px solid var(--line); }
.github-button svg { height: 19px; width: 19px; }

.account-button { align-items: center; background: white; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; display: flex; font-size: .8rem; font-weight: 700; gap: 8px; max-width: 190px; padding: 5px 12px 5px 5px; }
.account-button > span:first-child { background: var(--mint); border-radius: 50%; display: grid; flex: 0 0 auto; height: 30px; place-items: center; width: 30px; }
#account-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { margin: 0 auto; max-width: 1540px; padding: 0 clamp(12px, 3.5vw, 54px) 42px; }
.hero { align-items: end; display: flex; justify-content: space-between; padding: clamp(34px, 5vw, 62px) 5px 28px; }
.eyebrow { color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .15em; margin: 0 0 8px; text-transform: uppercase; }
h1, h2, h3 { font-family: "Manrope", sans-serif; letter-spacing: -.05em; margin: 0; }
h1 { font-size: clamp(2.4rem, 5vw, 4.9rem); line-height: 1; }
h1 span { color: var(--green); }
h2 { font-size: 1.5rem; }
.community-proof { align-items: center; display: flex; gap: 14px; margin: 0 0 5px 35px; }
.profile-bubbles { display: flex; padding-left: 9px; }
.profile-bubbles span { align-items: center; background: #dcecff; border: 3px solid white; border-radius: 50%; box-shadow: 0 2px 8px rgba(25,55,101,.1); color: #164f9c; display: flex; font-size: .7rem; font-weight: 800; height: 38px; justify-content: center; margin-left: -9px; text-transform: uppercase; width: 38px; }
.profile-bubbles span:nth-child(2) { background: #ffe2ec; color: #9b3658; }
.profile-bubbles span:nth-child(3) { background: #fff0cf; color: #81580f; }
.profile-bubbles span:nth-child(4) { background: #e4e1ff; color: #5143a0; }
.community-proof p { display: grid; margin: 0; }
.community-proof strong { font: 800 1rem "Manrope", sans-serif; }
.community-proof p span { color: var(--muted); font-size: .76rem; margin-top: 2px; }

.search-region { position: relative; z-index: 5; }
.search-bar { background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 13px 34px rgba(29, 47, 41, .09); display: grid; gap: 10px; grid-template-columns: 23px minmax(100px, 1fr) auto auto; padding: 9px; }
.search-bar > svg { align-self: center; fill: none; height: 21px; margin-left: 7px; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.8; width: 21px; }
.search-bar input { background: transparent; border: 0; font-size: 1rem; min-width: 0; outline: 0; padding: 9px 3px; }
.locate-button { background: transparent; border: 0; border-radius: 9px; cursor: pointer; display: grid; padding: 9px; place-items: center; }
.locate-button:hover { background: #f0f5f2; }
.locate-button svg { fill: none; height: 21px; stroke: var(--ink); stroke-linecap: round; stroke-width: 1.8; width: 21px; }
.filters { align-items: center; display: flex; gap: 8px; overflow-x: auto; padding: 13px 2px 18px; scrollbar-width: none; }
.filter { align-items: center; background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: .79rem; font-weight: 700; gap: 6px; padding: 7px 11px; }
.filter:hover, .filter.active { background: var(--ink); border-color: var(--ink); color: white; }
.color-dot { border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 10px; width: 10px; }
.color-dot.mens { background: var(--blue); }
.color-dot.womens { background: var(--pink); }
.color-dot.family { background: var(--gold); }
.color-dot.both { background: linear-gradient(90deg, var(--blue) 0 50%, var(--pink) 50%); }
.working-toggle { align-items: center; cursor: pointer; display: flex; flex: 0 0 auto; font-size: .78rem; font-weight: 700; gap: 7px; margin-left: auto; }
.working-toggle input { opacity: 0; position: absolute; }
.working-toggle span { background: #c3cac7; border-radius: 30px; height: 21px; padding: 3px; transition: background .18s; width: 38px; }
.working-toggle span::after { background: white; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.18); content: ""; display: block; height: 15px; transition: transform .18s; width: 15px; }
.working-toggle input:checked + span { background: var(--green); }
.working-toggle input:checked + span::after { transform: translateX(17px); }

.map-shell { background: white; border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow); display: grid; grid-template-columns: 360px minmax(0,1fr); height: min(650px, calc(100vh - 215px)); min-height: 515px; overflow: hidden; position: relative; }
.results-panel { background: white; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .24s ease; }
.results-header { align-items: center; display: flex; justify-content: space-between; min-height: 78px; padding: 23px 72px 13px 20px; position: relative; }
.results-header > div, .map-key, .results-list { transition: opacity .12s ease, visibility .12s ease; }
.results-header .eyebrow { margin-bottom: 4px; }
.round-button { background: #f3f4ef; border: 0; border-radius: 50%; cursor: pointer; display: grid; font-size: 1.3rem; height: 34px; place-items: center; width: 34px; }
.panel-toggle { align-items: center; background: #edf4ff; border: 1px solid #d5e5fb; border-radius: 50%; color: var(--green); cursor: pointer; display: flex; flex: 0 0 auto; height: 40px; justify-content: center; position: absolute; right: 18px; top: 18px; transition: background .16s, border-color .16s, transform .16s; width: 40px; }
.panel-toggle:hover { background: #dcecff; border-color: #bfd8fa; transform: translateY(-1px); }
.panel-toggle:focus-visible { outline: 3px solid rgba(23,104,215,.2); outline-offset: 2px; }
.panel-toggle svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; transition: transform .24s ease; width: 20px; }
.map-key { background: #f6faf7; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .68rem; gap: 7px 12px; margin: 0 12px 7px; padding: 9px 10px; }
.map-key span { align-items: center; display: flex; gap: 5px; }
.results-list { overflow-y: auto; padding: 0 11px 18px; }
.empty-state { color: var(--muted); line-height: 1.55; padding: 35px 15px; text-align: center; }
.empty-state strong { color: var(--ink); }

.place-card { background: white; border: 1px solid transparent; border-bottom-color: var(--line); cursor: pointer; padding: 16px 9px; transition: background .15s, border .15s, border-radius .15s; }
.place-card:hover, .place-card.active { background: #fbfaf5; border-color: #deded6; border-radius: 13px; }
.place-main { align-items: flex-start; display: flex; gap: 11px; }
.mini-pin, .map-pin { align-items: center; border: 2px solid white; box-shadow: 0 3px 10px rgba(20,38,32,.23); color: white; display: flex; flex: 0 0 auto; justify-content: center; transform: rotate(-45deg); }
.mini-pin { border-radius: 50% 50% 50% 6px; font-size: .96rem; height: 35px; width: 35px; }
.mini-pin > span, .map-pin > span { transform: rotate(45deg); }
.pin-mens { background: var(--blue); }
.pin-womens { background: var(--pink); }
.pin-family { background: var(--gold); }
.pin-both { background: linear-gradient(90deg, var(--blue) 0 50%, var(--pink) 50%); }
.place-card h3 { font-size: .94rem; line-height: 1.25; margin: 1px 0 4px; }
.place-meta { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: 0; }
.status-row { align-items: center; display: flex; font-size: .76rem; justify-content: space-between; margin: 11px 0 0 46px; }
.station-status { align-items: center; color: var(--green); display: inline-flex; font-weight: 800; gap: 5px; }
.station-status::before { background: currentColor; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.station-status.issue { color: var(--red); }
.verified-time { color: var(--muted); }

.map-region { min-width: 0; position: relative; }
#map { height: 100%; width: 100%; }
.map-loading, .map-error { align-items: center; background: #e9efe9; display: flex; flex-direction: column; inset: 0; justify-content: center; position: absolute; text-align: center; }
.map-loading span { animation: spin 1s linear infinite; border: 3px solid rgba(23,104,215,.18); border-radius: 50%; border-top-color: var(--green); height: 32px; width: 32px; }
.map-loading p, .map-error p { color: var(--muted); font-size: .82rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.floating-add { align-items: center; background: var(--ink); border: 0; border-radius: 12px; bottom: 20px; box-shadow: 0 10px 25px rgba(23,38,34,.28); color: white; cursor: pointer; display: flex; font-weight: 800; gap: 6px; left: 50%; padding: 11px 15px; position: absolute; transform: translateX(-50%); z-index: 3; }
.map-pin { border-radius: 50% 50% 50% 8px; cursor: pointer; font-size: 1.22rem; height: 45px; transition: transform .14s; width: 45px; }
.map-pin:hover, .map-pin.selected { transform: rotate(-45deg) scale(1.14); z-index: 2; }
.map-pin.issue { filter: grayscale(.75); opacity: .75; }
.maplibregl-popup-content { border-radius: 12px; box-shadow: 0 10px 30px rgba(23,38,34,.18); font: .78rem "DM Sans", sans-serif; padding: 11px 13px; }

.detail-panel { background: white; box-shadow: -12px 0 35px rgba(23,38,34,.11); height: 100%; overflow-y: auto; padding: 26px 22px; position: absolute; right: 0; top: 0; width: min(370px, 100%); z-index: 6; }
.detail-close { margin-left: auto; }
.detail-pin { font-size: 1.7rem; margin-bottom: 18px; }
.detail-panel h2 { font-size: 1.8rem; }
.detail-address { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 8px 0 20px; }
.detail-fact { align-items: flex-start; border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 15px 0; }
.detail-fact > span { background: #f2f6f3; border-radius: 50%; display: grid; flex: 0 0 auto; height: 30px; place-items: center; width: 30px; }
.detail-fact strong { display: block; font-size: .88rem; }
.detail-fact p { color: var(--muted); font-size: .82rem; line-height: 1.45; margin: 3px 0 0; }
.detail-actions { display: grid; gap: 9px; margin-top: 15px; }
.button-outline { background: white; border: 1px solid var(--line); }

.trust-row { display: grid; gap: 28px; grid-template-columns: repeat(3,1fr); padding: 29px 17px 0; }
.trust-row article { align-items: flex-start; display: flex; gap: 11px; }
.trust-row article > span { background: var(--mint); border-radius: 50%; display: grid; flex: 0 0 auto; font-weight: 800; height: 30px; place-items: center; width: 30px; }
.trust-row strong { font-size: .82rem; }
.trust-row p { color: var(--muted); font-size: .75rem; line-height: 1.45; margin: 3px 0 0; }

.site-footer { border-top: 1px solid var(--line); margin: 18px auto 0; max-width: 1540px; padding: 34px clamp(18px, 4vw, 62px) 28px; }
.footer-inner { align-items: center; display: flex; gap: 28px; justify-content: space-between; }
.footer-company { display: grid; gap: 4px; }
.footer-company p { color: var(--muted); font-size: .78rem; line-height: 1.45; margin: 0; }
.footer-company p strong { color: var(--ink); font: 700 .94rem "Manrope", sans-serif; }
.footer-company .footer-kicker { color: var(--green); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.footer-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 18px; }
.footer-link { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: .82rem; font-weight: 800; padding: 10px 0; }
.footer-link:hover { color: var(--green); }
.footer-legal { color: var(--muted); font-size: .68rem; margin: 25px 0 0; }

.dialog { background: transparent; border: 0; max-height: 100vh; max-width: 620px; padding: 18px; width: calc(100% - 20px); }
.dialog::backdrop { backdrop-filter: blur(5px); background: rgba(14, 27, 22, .6); }
.dialog-card { background: var(--cream); border-radius: 22px; box-shadow: var(--shadow); display: grid; gap: 15px; margin: auto; padding: 28px; position: relative; }
.dialog-close { align-items: center; background: #eff1ec; border: 0; border-radius: 50%; cursor: pointer; display: flex; font-size: 1.45rem; height: 35px; justify-content: center; line-height: 1; position: absolute; right: 17px; top: 17px; width: 35px; z-index: 2; }
.dialog-close:hover { background: #e4e8e2; }
.dialog-close:focus-visible { outline: 3px solid rgba(23,104,215,.25); outline-offset: 2px; }
.dialog-brand { display: grid; place-items: center; }
.auth-card { max-width: 450px; text-align: center; }
.auth-card .brand-mark { height: 48px; width: 42px; }
.auth-card .eyebrow { margin-bottom: -7px; }
.dialog-intro { color: var(--muted); font-size: .83rem; line-height: 1.55; margin: -3px 0 1px; }
.auth-tabs { background: #eeefe9; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; }
.auth-tabs button { background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: .8rem; font-weight: 800; padding: 9px; }
.auth-tabs button.active { background: white; box-shadow: 0 2px 8px rgba(23,38,34,.08); }
.auth-card form, .form-card { text-align: left; }
.dialog label { display: grid; font-size: .78rem; font-weight: 800; gap: 6px; }
.dialog input:not([type="radio"]):not([type="checkbox"]), .dialog select, .dialog textarea { background: white; border: 1px solid var(--line); border-radius: 10px; outline: 0; padding: 10px 11px; resize: vertical; width: 100%; }
.dialog input::placeholder, .dialog textarea::placeholder { color: #8290a5; font-weight: 500; opacity: 1; }
.dialog input:focus, .dialog select:focus, .dialog textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,104,215,.11); }
#auth-form { display: grid; gap: 13px; }
.divider { align-items: center; color: var(--muted); display: flex; font-size: .7rem; gap: 9px; }
.divider::before, .divider::after { background: var(--line); content: ""; flex: 1; height: 1px; }
.auth-note { color: var(--muted); font-size: .67rem; line-height: 1.4; margin: -3px 0 0; }
.form-message { color: var(--red); font-size: .75rem; line-height: 1.4; margin: 0; min-height: 1em; text-align: center; }
.form-message.success { color: var(--green); }
.form-card { max-width: 590px; max-height: calc(100vh - 36px); overflow-y: auto; }
.form-card .eyebrow { margin-bottom: -8px; }
.two-columns { display: grid; gap: 11px; grid-template-columns: 1fr 1fr; }
.dialog fieldset { border: 0; margin: 0; padding: 0; }
.dialog legend { font-size: .78rem; font-weight: 800; }
.option-grid { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; margin-top: 7px; }
.option-grid label { align-items: center; background: white; border: 1px solid var(--line); border-radius: 10px; display: flex; font-weight: 600; gap: 7px; padding: 9px; }
.check-row { align-items: flex-start; display: flex !important; font-weight: 600 !important; line-height: 1.4; }
.status-options { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; margin-top: 7px; }
.status-options label { align-items: center; background: white; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; display: flex; font-weight: 600; gap: 7px; padding: 10px; }
.status-options span { background: #eef3ef; border-radius: 50%; display: grid; height: 25px; place-items: center; width: 25px; }
.steps { display: grid; gap: 18px; list-style: none; margin: 7px 0 0; padding: 0; }
.steps li { align-items: flex-start; display: flex; gap: 12px; }
.steps li > span { background: var(--mint); border-radius: 50%; display: grid; flex: 0 0 auto; font-weight: 800; height: 31px; place-items: center; width: 31px; }
.steps p { color: var(--muted); font-size: .8rem; margin: 3px 0 0; }
.info-card { max-width: 470px; }
.contact-card { text-align: center; }
.support-email { color: var(--green); font: 800 1.08rem "Manrope", sans-serif; margin: 2px 0 5px; overflow-wrap: anywhere; text-decoration: none; }
.support-email:hover { text-decoration: underline; }

.toast { background: var(--ink); border-radius: 11px; bottom: 22px; box-shadow: 0 8px 25px rgba(23,38,34,.25); color: white; font-size: .82rem; left: 50%; max-width: calc(100% - 30px); opacity: 0; padding: 12px 17px; pointer-events: none; position: fixed; text-align: center; transform: translate(-50%, 18px); transition: opacity .2s, transform .2s; z-index: 80; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { clip: rect(0,0,0,0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-tagline, .header-actions .text-button { display: none; }
  .map-shell { grid-template-columns: 320px minmax(0,1fr); }
}

@media (max-width: 720px) {
  .site-header { min-height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; }
  .brand { font-size: 1.2rem; }
  .brand-mark { height: 34px; width: 30px; }
  .header-actions { gap: 7px; }
  .header-actions > .button { font-size: .8rem; min-height: 44px; padding: 9px 11px; }
  .account-button { padding-right: 5px; }
  #account-label { display: none; }
  main { padding-inline: 8px; }
  .hero { align-items: flex-start; flex-direction: column; gap: 17px; padding: 23px 7px 18px; }
  .community-proof { margin: 0; }
  .community-proof strong { font-size: .94rem; }
  .community-proof p span { font-size: .78rem; }
  h1 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .search-bar { grid-template-columns: 21px minmax(80px,1fr) auto; }
  .search-bar .button-dark { display: none; }
  .search-bar input { font-size: 1rem; min-height: 44px; }
  .locate-button { min-height: 44px; min-width: 44px; }
  .filters { padding-block: 11px 15px; }
  .filter { min-height: 42px; padding-inline: 14px; }
  .working-toggle { margin-left: 0; }
  .working-toggle { min-height: 42px; }
  .map-shell { border-radius: 17px; display: block; height: max(500px, calc(100dvh - 225px)); min-height: 500px; }
  .map-region { height: 100%; }
  .results-panel { border: 0; border-radius: 17px 17px 0 0; bottom: 0; box-shadow: 0 -10px 32px rgba(25,55,101,.12); max-height: 48%; overflow: visible; overscroll-behavior: contain; position: absolute; transition: transform .22s; width: 100%; z-index: 5; }
  .results-panel::before { background: #cbd5e3; border-radius: 999px; content: ""; height: 4px; left: 50%; position: absolute; top: 8px; transform: translateX(-50%); width: 42px; }
  .results-panel.collapsed { transform: translateY(calc(100% - 72px)); }
  .results-header { min-height: 72px; padding: 22px 72px 10px 17px; }
  .round-button { height: 44px; min-width: 44px; width: 44px; }
  .panel-toggle { height: 44px; right: 14px; top: 17px; width: 44px; }
  .panel-toggle svg { transform: rotate(-90deg); }
  .results-panel.collapsed .panel-toggle svg { transform: rotate(90deg); }
  .map-key { display: none; }
  .floating-add { bottom: auto; min-height: 46px; top: -59px; white-space: nowrap; z-index: 7; }
  .detail-panel { border-radius: 20px 20px 0 0; bottom: 0; height: min(74%, 620px); overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); top: auto; width: 100%; }
  .detail-actions .button { min-height: 48px; }
  .trust-row { grid-template-columns: 1fr; padding: 24px 8px 0; }
  .site-footer { margin-top: 8px; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .footer-actions { justify-content: space-between; width: 100%; }
  .footer-legal { margin-top: 22px; }
  .dialog[open] { align-items: flex-end; display: flex; height: 100dvh; inset: 0; margin: 0; max-height: none; max-width: none; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); width: 100vw; }
  .dialog-card { border-radius: 20px; margin: auto 0 0; max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; padding: 27px 18px 22px; width: 100%; }
  .auth-card { background: white; gap: 13px; padding-top: 23px; }
  .auth-card .brand-mark { height: 41px; width: 37px; }
  .auth-card .eyebrow { margin-top: 1px; }
  .auth-card h2 { font-size: 1.42rem; }
  .auth-card .dialog-intro { margin-inline: auto; max-width: 390px; }
  .auth-card input:not([type="radio"]):not([type="checkbox"]) { background: #f8fafd; }
  .dialog-close { height: 40px; right: 14px; top: 14px; width: 40px; }
  .dialog input:not([type="radio"]):not([type="checkbox"]), .dialog select, .dialog textarea { font-size: 1rem; min-height: 46px; }
  .dialog .button { min-height: 48px; }
  .option-grid label, .status-options label { min-height: 48px; }
  .two-columns, .option-grid, .status-options { grid-template-columns: 1fr; }
  .toast { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .maplibregl-ctrl-top-right { right: 5px; top: 8px; }
}

@media (min-width: 721px) {
  .map-shell { display: block; }
  .map-region { height: 100%; width: 100%; }
  .results-panel { bottom: 0; box-shadow: 8px 0 24px rgba(25,55,101,.08); left: 0; position: absolute; top: 0; width: 360px; z-index: 5; }
  .results-panel.collapsed { transform: translateX(calc(-100% + 66px)); }
  .results-panel.collapsed .results-header { padding-inline: 12px; }
  .results-panel.collapsed .results-header > div,
  .results-panel.collapsed .map-key,
  .results-panel.collapsed .results-list { opacity: 0; pointer-events: none; visibility: hidden; }
  .results-panel.collapsed .panel-toggle { right: 12px; }
  .results-panel.collapsed .panel-toggle svg { transform: rotate(180deg); }
}

@media (min-width: 721px) and (max-width: 960px) {
  .results-panel { width: 320px; }
}

@media (max-width: 390px) {
  .brand { font-size: 1.08rem; gap: 7px; }
  .header-actions > .button { font-size: 0; min-width: 44px; padding: 9px; }
  .header-actions > .button span { font-size: 1.1rem; }
  h1 { font-size: 2.15rem; }
  .profile-bubbles span { height: 34px; width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}