:root {
  --ink: #102a43;
  --muted: #586b7c;
  --paper: #f7f8f6;
  --surface: #ffffff;
  --line: #d9e0e5;
  --soft: #edf2f5;
  --accent: #d94f3d;
  --accent-dark: #ad3528;
  --teal: #087f6f;
  --gold: #c98a14;
  --shadow: 0 12px 36px rgba(16,42,67,.09);
  --radius: 14px;
  --radius-sm: 8px;
  --results-panel-surface: #f8f9f7;
  --results-card-surface: #ffffff;
  --results-card-border: #d7dfe4;
  --results-card-hover: #fcfdfc;
  --results-border-strong: #cfd8de;
  --results-text: #334e68;
  --results-positive: #05695d;
  --results-positive-surface: #f0faf7;
  --results-warning: #765b20;
  --results-warning-surface: #fff8e8;
  --results-warning-border: #ead4a1;
  --results-danger: #a42f24;
  --results-danger-surface: #fbeceb;
  --results-neutral-border: #b7c4cc;
  --results-map-home: #52758a;
  --results-map-destination: #8a6f4d;
  --results-space-1: 4px;
  --results-space-2: 8px;
  --results-space-3: 12px;
  --results-space-4: 16px;
  --results-space-5: 24px;
  --results-space-6: 32px;
  --results-space-7: 48px;
  font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, select, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(8,127,111,.3); outline-offset: 2px; }
.site-header { height: 68px; padding: 0 clamp(18px,4vw,52px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(247,248,246,.96); position: relative; z-index: 500; }
.brand { border: 0; background: none; color: var(--ink); display: flex; align-items: center; gap: 10px; font-family:"Fraunces",Georgia,serif; font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; padding: 4px; text-decoration: none; }
.brand-mark { width: 31px; height: 31px; display:block; overflow:visible; }
.mark-ground,.mark-route,.mark-pin {fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}.mark-ground{stroke-width:1.7}.mark-route{stroke-width:1.9;stroke-dasharray:1.5 3}.mark-pin{fill:var(--surface);stroke-width:2}.mark-center,.mark-start{fill:var(--accent)}
.step-status { color: var(--muted); font-size: .86rem; font-weight: 650; }
.header-right { display: flex; align-items: center; gap: 16px; }
.lang-switch { font-size: .86rem; font-weight: 650; white-space: nowrap; }
.lang-switch a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--ink); border-bottom-color: currentColor; }
.lang-current { color: var(--ink); }
main { min-height: calc(100vh - 150px); }
.landing { min-height: calc(100vh - 150px); display: grid; align-items: center; grid-template-columns: minmax(0,1.04fr) minmax(390px,.96fr); gap: clamp(36px,5vw,76px); max-width: 1200px; padding: 48px 32px 64px; margin: auto; }
.eyebrow { color: var(--teal); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; margin: 0 0 16px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: "Petrona", Georgia, serif; font-size: clamp(2.8rem,6vw,5.8rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; margin-bottom: 24px; max-width: 720px; }
.landing h1 {font-family:"Petrona",Georgia,serif;font-size:clamp(2.75rem,5vw,4.75rem);font-weight:500;letter-spacing:-.03em;max-width:650px;}
.lead { color: #334e68; font-size: clamp(1.05rem,1.45vw,1.22rem); line-height: 1.55; max-width: 620px; margin-bottom: 26px; }
.landing-action{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.landing-action>p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.35}.landing-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:0;list-style:none;color:#334e68;font-size:.88rem;font-weight:650}.landing-proof li{display:flex;align-items:center;gap:7px}.landing-proof li::before{content:'✓';display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#dff3ed;color:#05695d;font-size:.75rem;font-weight:800}
.button { border: 1px solid transparent; border-radius: 8px; padding: 13px 20px; font-weight: 750; color: var(--surface); background: var(--teal); display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; text-decoration: none; transition: transform .15s, background .15s; }
.button:hover { background: #066657; transform: translateY(-1px); }.button:active { transform: none; }
.button.secondary { color: var(--ink); background: var(--surface); border-color: var(--line); }.button.secondary:hover { background: var(--soft); }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.landing-visual { position: relative; min-height: 500px; border: 1px solid rgba(16,42,67,.18); border-radius: 22px; background: #dce5e7; box-shadow: 0 30px 70px rgba(16,42,67,.18), 0 4px 14px rgba(16,42,67,.09); overflow: hidden; isolation:isolate; }
.landing-visual::before{content:"";position:absolute;inset:0;z-index:400;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 -130px 100px -105px rgba(16,42,67,.3)}
#landingMap {position:absolute;inset:0;z-index:0;filter:saturate(.78) contrast(1.03)}#landingMap .leaflet-control-attribution{background:rgba(255,255,255,.72);color:#607180}#landingMap .leaflet-control-attribution a{color:#40596c}
.landing-map-kicker {position:absolute;left:20px;top:20px;z-index:500;max-width:270px;background:rgba(255,255,255,.94);border:1px solid rgba(16,42,67,.1);border-radius:12px;padding:12px 15px 13px;box-shadow:0 10px 28px rgba(16,42,67,.14);color:var(--muted);line-height:1.25;backdrop-filter:blur(10px)}.landing-map-kicker small,.landing-map-kicker strong,.landing-map-kicker span{display:block}.landing-map-kicker small{color:var(--teal);font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}.landing-map-kicker strong{color:var(--ink);font-size:.94rem}.landing-map-kicker span{font-size:.75rem;margin-top:4px}
.landing-score-legend{position:absolute;right:18px;top:18px;z-index:500}.landing-score-legend strong{display:block}
.mini-result { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index:500; background: rgba(255,255,255,.96); border:1px solid rgba(16,42,67,.11); border-radius: 13px; padding: 12px 15px 13px; box-shadow:0 16px 36px rgba(16,42,67,.2); backdrop-filter:blur(12px) }
.mini-result-head,.mini-result-row{display:grid;grid-template-columns:minmax(0,1fr) 94px;align-items:center;column-gap:12px}.mini-result-head{color:var(--muted);font-size:.7rem;padding:0 1px 7px}.mini-result-head>span,.mini-result-row>strong{text-align:right;white-space:nowrap}.mini-result-head small{font-size:inherit;font-weight:800;letter-spacing:.075em;text-transform:uppercase;color:var(--teal)}.mini-result-row{min-height:42px;border-top:1px solid var(--line);margin:0 -5px;padding:0 6px;border-radius:7px}.mini-result-row.selected{background:#eef8f5;border-top-color:transparent;margin-top:-1px}.mini-result-row>span{display:flex;align-items:center;gap:9px;min-width:0}.mini-result-row>span b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--teal);font-size:.72rem;flex:0 0 auto}.mini-result-row.selected>span b{background:var(--teal);color:white}.mini-result-copy{display:flex!important;align-items:flex-start!important;flex-direction:column;gap:0!important;min-width:0}.mini-result-copy strong,.mini-result-copy small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-result-row strong{font-size:.9rem}.mini-result-row>strong{font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.mini-result-row small{color:var(--muted);font-size:.68rem;font-weight:600}.mini-result-row>strong small{font-family:inherit;margin-left:2px}
.wizard { max-width: 820px; margin: 0 auto; padding: 54px 24px 70px; }
.progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 38px; }
.progress span { height: 3px; background: var(--line); }.progress span.active { background: var(--teal); }
.wizard h1 { font-size: clamp(2.2rem,5vw,3.8rem); margin-bottom: 12px; }
.intro { color: var(--muted); line-height: 1.55; max-width: 650px; margin-bottom: 34px; }
.section-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px,4vw,34px); margin-bottom: 18px; box-shadow: 0 5px 18px rgba(16,42,67,.04); }
.section-card h2 { font-size: 1.18rem; margin-bottom: 7px; }.section-card > p { color: var(--muted); font-size: .93rem; line-height: 1.5; }
.mode-choice{border:0;margin:26px 0 26px;padding:0}.mode-choice legend{font-weight:720;font-size:.9rem;margin-bottom:9px;padding:0}.mode-choice>div{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:white}.mode-choice label{margin:0;cursor:pointer}.mode-choice input{position:absolute;opacity:0;pointer-events:none}.mode-choice span{display:grid;place-items:center;min-height:40px;font-size:.86rem;font-weight:650;color:var(--muted);border-right:1px solid var(--line)}.mode-choice label:last-child span{border-right:0}.mode-choice input:checked+span{background:var(--teal);color:white}.mode-choice input:focus-visible+span{outline:3px solid rgba(8,127,111,.3);outline-offset:-3px}.mode-choice p,.field-note{color:var(--muted);font-size:.8rem;line-height:1.4;margin:8px 0 0}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-grid.triple { grid-template-columns: repeat(3,1fr); }
.trip-finetune{margin:0 0 4px;padding-top:0}.trip-finetune summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;font-weight:720;font-size:.9rem;color:var(--ink)}.trip-finetune summary::-webkit-details-marker{display:none}.trip-finetune summary::before{content:'+';display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;color:var(--teal);font-weight:600;font-size:.85rem}.trip-finetune[open] summary::before{content:'−'}.trip-finetune .field-grid{margin-top:18px}
label, .field-label { display: block; font-weight: 720; font-size: .9rem; margin-bottom: 7px; }
select, input[type="number"] { width: 100%; min-height: 48px; border: 1px solid #b9c5ce; border-radius: 7px; background: white; padding: 10px 12px; color: var(--ink); }
input[type="time"]{width:100%;min-height:48px;border:1px solid #b9c5ce;border-radius:7px;background:white;padding:10px 12px;color:var(--ink)}.input-suffix{position:relative}.input-suffix input{padding-right:44px}.input-suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.84rem;pointer-events:none}.housing-card{margin-bottom:14px}
.housing-fields{margin-top:20px}.optional-step-note{margin:16px 0 0!important;padding:14px;background:var(--soft);border-left:3px solid #b7c4cc}
input[type="text"], input[type="search"] { width:100%; min-height:48px; border:1px solid #b9c5ce; border-radius:7px; background:white; padding:10px 12px; color:var(--ink); }
.destination-row { margin-bottom: 22px; }.destination-row:not(.destination-collapsible) { padding-top: 22px; }.destination-row:not(.destination-collapsible):first-of-type { padding-top: 4px; }
.destination-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }.destination-title strong { font-size: 1rem; }.optional { color: var(--muted); font-size: .82rem; font-weight: 500; }
.destination-collapsible{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:22px}.destination-collapsible>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:15px 16px;list-style:none}.destination-collapsible>summary::-webkit-details-marker{display:none}.destination-collapsible>summary strong::before{content:'+';display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;border:1px solid var(--line);border-radius:50%;color:var(--teal);font-weight:600;background:var(--surface)}.destination-collapsible[open]>summary strong::before{content:'−'}.destination-collapsible-body{padding:18px 16px 18px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm)}.destination-remove{min-height:32px;padding:6px 10px;flex-shrink:0}
.add-destination{margin-bottom:22px}
.check-inline{display:flex;align-items:flex-start;gap:6px;margin-top:9px;cursor:pointer}.check-inline input{width:15px;height:15px;margin-top:2px;accent-color:var(--teal);flex:0 0 auto}.check-inline span{font-size:.78rem;color:var(--muted);line-height:1.3}
.address-search { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }.address-search .button {min-width:135px;}
.address-search input {width:100%;min-width:0;min-height:48px;border:1px solid #b9c5ce;border-radius:7px;padding:10px 12px;font-size:1rem;box-shadow:none}.address-search input::placeholder{color:#7c8b97}.address-search .button{min-height:48px;padding:10px 18px}
.address-status { min-height:25px; padding-top:4px; color:var(--muted); font-size:.84rem; }.address-status.error {color:#a42f24;}.selected-address {color:var(--teal);font-weight:700;}
.address-results {display:grid;gap:6px;}.address-results:not(:empty){margin:6px 0 8px;}.address-results button {border:1px solid var(--line);background:white;text-align:left;padding:10px 12px;border-radius:7px;color:var(--ink);}.address-results button:hover,.address-results button:focus-visible{border-color:var(--teal);background:#f0faf7}.address-results strong,.address-results span{display:block}.address-results span{color:var(--muted);font-size:.76rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:620px}.destination-row .check{margin-top:16px}.privacy-note{font-size:.78rem!important;border-top:1px solid var(--line);padding-top:15px;margin:0!important;}
.quick-destinations{margin:4px 0 6px}.quick-destinations>span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:9px}.quick-groups{display:flex;flex-wrap:wrap;gap:10px 24px}.quick-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.quick-group small{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.quick-group>span{display:flex;flex-wrap:wrap;gap:5px}.quick-destinations button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:5px 9px;font-size:.78rem}.quick-destinations button:hover,.quick-destinations button:focus-visible,.quick-destinations button[aria-pressed="true"]{border-color:var(--teal);background:#f0faf7;color:#05695d}
.check-list { display:grid; gap: 11px; margin-top: 18px; }
.check { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); padding: 14px; border-radius: 8px; cursor: pointer; }
.check:has(input:checked) { border-color: var(--teal); background: #f0faf7; }
.check input { width: 19px; height: 19px; accent-color: var(--teal); flex: 0 0 auto; }.check span { font-weight: 650; }.check small { display:block; color: var(--muted); font-weight:400; margin-top: 3px; line-height:1.35; }
.slider-list { display: grid; gap: 6px; }
.preference { display: grid; grid-template-columns: 180px 1fr 132px; align-items: center; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }.preference:last-child { border-bottom:0; }
.preference label { margin: 0; }.pref-value { font-size: .84rem; color: var(--muted); text-align:right; white-space: nowrap; }
.preference-section { padding: 18px 0 5px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }.preference-section:first-child { padding-top: 2px; }
.preference-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.preference-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
input[type="range"] { width: 100%; accent-color: var(--teal); }
.wizard-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; gap: 14px; }.wizard-actions .button:last-child { margin-left:auto; }
.results-shell {
  display: grid;
  grid-template-columns: minmax(410px, 500px) minmax(0, 1fr);
  block-size: calc(100vh - 68px);
  block-size: calc(100dvh - 68px);
  min-block-size: 0;
  overflow: hidden;
  overflow: clip;
}

.results-panel {
  min-inline-size: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: var(--results-space-6) clamp(var(--results-space-5), 3vw, var(--results-space-6)) var(--results-space-7);
  background: var(--results-panel-surface);
  border-inline-end: 1px solid var(--results-border-strong);
}

.results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--results-space-4);
  margin-block-end: var(--results-space-5);
}

.results-head h1 {
  margin-block-end: var(--results-space-2);
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.results-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.results-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: var(--results-space-2);
}

.show-more-results { display: block; inline-size: 100%; margin: 0 0 var(--results-space-5); text-align: center; }
.text-button {
  min-block-size: 36px;
  padding: 7px var(--results-space-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}

.text-button:hover,
.text-button:focus-visible {
  border-color: #aebdc7;
  background: var(--results-card-surface);
}

.filter-note {
  margin-block-end: var(--results-space-4);
  padding: var(--results-space-3) var(--results-space-4);
  border: 1px solid var(--results-warning-border);
  border-radius: var(--radius-sm);
  background: var(--results-warning-surface);
  color: #6e541c;
  font-size: .85rem;
  line-height: 1.4;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--results-space-2);
  margin-block-end: var(--results-space-4);
}

.highlight-card {
  display: flex;
  flex-direction: column;
  gap: var(--results-space-1);
  padding: var(--results-space-3) var(--results-space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--results-card-surface);
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.highlight-card:hover,
.highlight-card:focus-visible,
.highlight-card.primary {
  border-color: var(--teal);
  background: var(--results-positive-surface);
}

.highlight-label {
  color: var(--teal);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.highlight-card strong { color: var(--ink); font-size: .98rem; }
.highlight-score { color: var(--muted); font-size: .8rem; font-weight: 700; }
.highlight-note { margin-block-start: var(--results-space-1); color: var(--muted); font-size: .78rem; line-height: 1.35; }

.result-card {
  position: relative;
  margin-block-end: var(--results-space-3);
  border: 1px solid var(--results-card-border);
  border-inline-start: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--results-card-surface);
  scroll-margin-block-start: var(--results-space-5);
  transition: background-color .15s, border-color .15s;
}

.result-card:hover,
.result-card.selected {
  border-color: #8196a5;
  border-inline-start-color: var(--teal);
  background: var(--results-card-hover);
}

.result-summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--results-space-3);
  inline-size: 100%;
  padding: var(--results-space-4);
  border: 0;
  background: none;
  color: var(--ink);
  text-align: start;
}

.result-summary:focus-visible { outline-offset: -4px; }
.rank { color: var(--muted); font-weight: 700; }
.result-name { min-inline-size: 0; }
.result-name strong { font-size: 1.08rem; }
.result-name small { display: block; margin-block-start: var(--results-space-1); color: var(--muted); }
.score { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score small { margin-inline-start: .2em; color: var(--muted); font-family: inherit; font-size: .75rem; font-weight: 600; }

.result-details { padding: var(--results-space-1) var(--results-space-4) 20px 60px; }
.result-details h3 { margin: 0 0 var(--results-space-2); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.result-details ul { margin: 0 0 var(--results-space-4); padding-inline-start: 20px; color: var(--results-text); font-size: .9rem; line-height: 1.5; }

.tradeoff {
  margin: 0 0 var(--results-space-4);
  padding-inline-start: var(--results-space-3);
  border-inline-start: 2px solid var(--gold);
  color: #5e4b24;
  font-size: .9rem;
  line-height: 1.45;
}

.compare-check {
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 var(--results-space-4) var(--results-space-4) 60px;
}

.compare-check input { margin-block-start: 0; }
.compare-check:has(input:checked) > span { color: var(--results-positive); font-weight: 700; }
.compare-check input:disabled + span { opacity: .55; }
.compare-limit-note { flex-basis: 100%; padding-inline-start: 21px; color: var(--muted); font-size: .75rem; font-weight: 400; line-height: 1.35; }

.data-badges { display: flex; flex-wrap: wrap; gap: var(--results-space-2); margin: 0 0 var(--results-space-3); }
.prototype-badge { display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; color: var(--results-warning); font-size: .75rem; font-weight: 700; }
.prototype-badge.verified { color: var(--results-positive); }
.domain-fact-missing strong { color: var(--muted); font-weight: 600; }
.trip-facts span.trip-caveat { color: var(--results-warning); }

.trip-facts,
.domain-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--results-space-2);
}

.trip-facts { margin: 0 0 var(--results-space-3); }
.trip-facts > div:last-child:nth-child(odd),
.domain-facts > .domain-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.trip-facts div { padding: var(--results-space-3); background: var(--soft); }

.trip-facts small,
.trip-facts strong,
.trip-facts span,
.nature-fact small,
.nature-fact strong,
.nature-fact span,
.housing-fact small,
.housing-fact strong,
.housing-fact span,
.domain-fact small,
.domain-fact strong,
.domain-fact span { display: block; line-height: 1.3; }

.trip-facts small,
.trip-facts span,
.nature-fact small,
.nature-fact span,
.housing-fact small,
.housing-fact span,
.domain-fact small,
.domain-fact span { color: var(--muted); font-size: .75rem; }

.trip-facts strong { margin-block-start: var(--results-space-1); font-size: .96rem; }
.trip-facts span { margin-block-start: var(--results-space-1); }

.nature-fact,
.housing-fact {
  margin: 0 0 var(--results-space-3);
  padding: var(--results-space-3) var(--results-space-3) var(--results-space-3) var(--results-space-4);
  border-inline-start: 2px solid var(--teal);
  background: var(--results-positive-surface);
}

.nature-fact { margin-block-end: var(--results-space-4); }
.nature-fact strong,
.housing-fact strong { margin: var(--results-space-1) 0; font-size: .93rem; }
.housing-fact.priority-domain,
.nature-fact.priority-domain { border-inline-start-width: 4px; }
.housing-fact.budget-borderline { border-inline-start-color: var(--gold); background: #fff9ea; }
.housing-fact.budget-above { border-inline-start-color: #a8573f; background: #fcf1ed; }

.housing-fact .budget-status {
  display: inline-block;
  inline-size: max-content;
  margin: var(--results-space-1) 0;
  padding: var(--results-space-1) var(--results-space-2);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}

.housing-fact .budget-status.within { background: #dff3ed; color: var(--results-positive); }
.housing-fact .budget-status.borderline { background: #fff0c9; color: var(--results-warning); }
.housing-fact .budget-status.above { background: #f7e5df; color: #8a3f2d; }

.domain-facts { margin: 0 0 var(--results-space-4); }
.domain-fact { padding: var(--results-space-3); border: 1px solid var(--line); background: var(--results-card-surface); }
.domain-fact strong { margin: var(--results-space-1) 0; font-size: .9rem; }

.routing-note {
  display: flex;
  align-items: center;
  gap: var(--results-space-3);
  margin-block-end: var(--results-space-4);
  padding: var(--results-space-3);
  border: 0;
  border-inline-start: 3px solid var(--results-neutral-border);
  border-radius: var(--radius-sm);
  background: #eef2f3;
}

.routing-note > div { display: flex; flex-direction: column; }
.routing-note small { margin-block-start: var(--results-space-1); color: var(--muted); font-size: .78rem; }
.routing-note.success { border-color: var(--teal); background: #edf7f4; }
.routing-note.error { justify-content: space-between; border-color: var(--gold); background: var(--results-warning-surface); }
.routing-note button { border: 0; background: none; color: var(--ink); font-weight: 700; text-decoration: underline; }

.spinner {
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid #c9d3d8;
  border-block-start-color: var(--teal);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.results-loading > span { display: block; margin: 0 0 var(--results-space-3); color: var(--muted); font-size: .82rem; }
.result-skeleton { display: grid; grid-template-columns: 28px 1fr 48px; align-items: center; gap: var(--results-space-3); block-size: 82px; margin-block-end: var(--results-space-3); padding: var(--results-space-4); border: 1px solid var(--line); background: var(--results-card-surface); }
.result-skeleton i,
.result-skeleton b,
.result-skeleton em { display: block; border-radius: 3px; background: #e6ebee; animation: pulse 1.2s ease-in-out infinite alternate; }
.result-skeleton i { inline-size: 22px; block-size: 22px; border-radius: 50%; }
.result-skeleton b { block-size: 13px; max-inline-size: 180px; }
.result-skeleton em { block-size: 28px; }
.result-skeleton:nth-child(3) i,
.result-skeleton:nth-child(3) b,
.result-skeleton:nth-child(3) em { animation-delay: .15s; }
.result-skeleton:nth-child(4) i,
.result-skeleton:nth-child(4) b,
.result-skeleton:nth-child(4) em { animation-delay: .3s; }

@keyframes pulse { to { opacity: .45; } }

.excluded,
.method { margin-block-start: var(--results-space-5); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.excluded summary,
.method summary { padding: var(--results-space-4); font-weight: 700; cursor: pointer; }
.excluded[open],
.method[open] { border-color: #b9c5ce; }
.excluded article { padding: var(--results-space-3) var(--results-space-4); border-block-start: 1px solid var(--line); }
.excluded article strong { font-size: .9rem; }
.excluded article ul { margin: var(--results-space-1) 0 0; padding-inline-start: 20px; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.method { margin-block-start: var(--results-space-5); }
.method p { margin: 0; padding: 0 var(--results-space-4) var(--results-space-3); color: var(--muted); font-size: .84rem; line-height: 1.5; }
.method p:first-of-type { padding-block-start: var(--results-space-3); border-block-start: 1px solid var(--line); }
.method a { color: var(--teal); font-weight: 700; }

.compare { margin-block-start: var(--results-space-6); padding-block-start: var(--results-space-5); border-block-start: 1px solid var(--line); }
.compare h2 { font-family: "Petrona",Georgia,serif; font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; }
.compare > .intro { margin: 0 0 var(--results-space-4); }
.compare > .address-search { gap: var(--results-space-3); }
.compare > .compare-check {
  justify-content: flex-start;
  padding-block: var(--results-space-4) 0;
  padding-inline: 0;
  text-align: start;
}
.comparison { margin-block-start: var(--results-space-4); padding: var(--results-space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--results-card-surface); }
.comparison-scores { display: flex; align-items: center; justify-content: space-between; gap: var(--results-space-4); }
.comparison-scores div { flex: 1; }
.comparison-scores small { display: block; color: var(--muted); }
.comparison-scores strong { font-size: 1.2rem; }
.comparison-arrow { color: var(--muted); }
.delta-list { margin: var(--results-space-4) 0 0; padding: var(--results-space-4) 0 0 20px; border-block-start: 1px solid var(--line); color: var(--results-text); font-size: .9rem; line-height: 1.5; }

.compare-hint { margin: var(--results-space-3) 0 0; color: var(--muted); font-size: .84rem; }
.compare-tool { margin-block-start: var(--results-space-5); }
.compare-tool h2 { margin-block-end: var(--results-space-1); font-family: "Petrona",Georgia,serif; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.compare-table-wrap { margin-block-start: var(--results-space-3); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--results-card-surface); }
.compare-table { inline-size: 100%; border-collapse: collapse; font-size: .86rem; }
.compare-table th,
.compare-table td { min-inline-size: 140px; padding: var(--results-space-3) var(--results-space-4); border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; line-height: 1.4; }
.compare-table thead th { background: var(--soft); color: var(--ink); font-weight: 700; }
.compare-table thead th:first-child { min-inline-size: 0; border-block-end: 0; background: transparent; }
/* A column name and its remove button used to just flow inline, so a name
   long enough to fill the column pushed the button onto its own line below -
   the header grew to two or three lines for no reason. Pinning both to one
   flex row (in a wrapper div, not the <th> itself - a flexed table cell
   breaks column layout in some browsers) and truncating the name instead
   keeps every header the same height regardless of how long the name is. */
.compare-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--results-space-2); }
.compare-col-name { min-inline-size: 0; max-inline-size: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.compare-table thead th small { display: block; margin-block-end: var(--results-space-1); overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.compare-table tbody th { position: sticky; inset-inline-start: 0; z-index: 1; min-inline-size: 120px; background: var(--results-card-surface); color: var(--muted); font-weight: 600; }
.compare-table td { color: var(--results-text); }
.compare-table td.compare-best { background: var(--results-positive-surface); color: var(--results-positive); font-weight: 700; }
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th { border-block-end: 0; }

.compare-remove { flex: 0 0 auto; padding: var(--results-space-1); border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: .9rem; line-height: 1; cursor: pointer; }
.compare-remove:hover,
.compare-remove:focus-visible { background: var(--results-danger-surface); color: var(--results-danger); }

.housing-summary,
.feedback,
.refinement { margin-block-start: var(--results-space-6); padding-block-start: var(--results-space-5); border-block-start: 1px solid var(--line); }
.housing-summary h2,
.feedback h2,
.refinement h2 { font-family: "Petrona",Georgia,serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.housing-summary h2,
.feedback h2 { margin-block-end: var(--results-space-2); }
.refinement h2 { margin-block-end: var(--results-space-2); }
.housing-summary > div { display: flex; gap: var(--results-space-2); }
.housing-summary span { flex: 1; padding: var(--results-space-3); border: 1px solid var(--line); background: var(--results-card-surface); }
.housing-summary small,
.housing-summary strong { display: block; }
.housing-summary small { color: var(--muted); }
.housing-summary p { margin: var(--results-space-2) 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.feedback > p:not(.feedback-thanks) { margin: 0 0 var(--results-space-3); color: var(--muted); font-size: .82rem; line-height: 1.45; }

.feedback-buttons { display: flex; flex-wrap: wrap; gap: var(--results-space-2); }
.feedback-buttons button { min-inline-size: 76px; padding: var(--results-space-2) var(--results-space-4); border: 1px solid var(--line); border-radius: 7px; background: var(--results-card-surface); color: var(--ink); font-weight: 700; transition: background-color .15s, border-color .15s; }
.feedback-buttons button:hover,
.feedback-buttons button[aria-pressed="true"] { border-color: var(--teal); background: var(--results-positive-surface); }
.feedback-thanks { margin: var(--results-space-3) 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.feedback-thanks button { padding: 0; border: 0; background: none; color: var(--teal); font-weight: 700; text-decoration: underline; }
.feedback-thanks button:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.feedback-thanks button + button { margin-inline-start: var(--results-space-3); }
.feedback-error { margin: var(--results-space-2) 0 0; color: var(--results-danger); font-size: .8rem; }
.feedback-followup { display: grid; gap: var(--results-space-4); margin-block-start: var(--results-space-4); }
.feedback-followup label { font-size: .82rem; font-weight: 700; }
.feedback-followup input { font-size: .9rem; }

.refinement p { margin-block-end: var(--results-space-3); color: var(--muted); font-size: .88rem; line-height: 1.5; }
.refinement > div { display: flex; flex-wrap: wrap; gap: var(--results-space-2); }

.map-wrap { display: flex; flex-direction: column; min-inline-size: 0; }
.map-pane-toggle { display: flex; flex: 0 0 auto; border-block-end: 1px solid var(--line); background: var(--results-card-surface); }
.map-pane-toggle button { flex: 1; padding: var(--results-space-3); border: 0; border-block-end: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s; }
.map-pane-toggle button:hover { color: var(--ink); }
.map-pane-toggle button[aria-selected="true"] { border-block-end-color: var(--teal); color: var(--teal); }
#map,
#compareSection { flex: 1 1 auto; min-block-size: 0; }
#map[hidden],
#compareSection[hidden] { display: none; }
#compareSection { display: flex; flex-direction: column; background: var(--surface); }
.compare-sheet-head { display: none; }
.compare-sheet-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: var(--results-space-5); }
.compare-sheet-body .compare-tool { margin-block-start: 0; }
.compare-sheet-body .compare-hint { margin: 0; color: var(--muted); font-size: .9rem; }
#map {
  inline-size: 100%;
  background: #dce5e7;
}
/* Leaflet's own stylesheet sets Helvetica Neue directly on .leaflet-container
   (the #map div itself), which beats the app-wide Source Sans 3 on :root
   since it's a rule that targets the element directly rather than an
   inherited one - so every label, control and tooltip on the map silently
   fell back to the browser default without this. */
.leaflet-container { font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.leaflet-control-attribution { font-size: 11px; }
.map-wrap .leaflet-interactive:focus { outline: none; }
.map-wrap .leaflet-interactive:focus-visible { outline: none; stroke: #fff; stroke-width: 3; }

.route-line-casing,
.route-line { animation: route-line-in .45s cubic-bezier(.2,.8,.2,1) both; }
.route-line-0 { animation-delay: 0ms; }
.route-line-1 { animation-delay: 60ms; }
.route-line-2 { animation-delay: 120ms; }
.route-line { filter: drop-shadow(0 2px 3px rgba(16,42,67,.28)); }
@keyframes route-line-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .route-line-casing, .route-line, .route-line-badge-wrap { animation: none; }
}

.route-line-badge-wrap {
  background: transparent;
  border: 0;
  animation: route-line-in .3s ease .2s both;
}
.route-line-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  margin: 1px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 5px rgba(16,42,67,.4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* A permanent tooltip anchored to a boarding badge or an alighting dot -
   used for the start/transfer/end stop-name labels along a route. Semi-bold
   rather than bold keeps small map text legible without shouting. */
.map-stop-label.leaflet-tooltip {
  padding: 2px 8px;
  border: 1px solid rgba(16,42,67,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(16,42,67,.18);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.3;
}
.map-stop-label.leaflet-tooltip::before { display: none; }
.map-stop-label-hidden { visibility: hidden; }

.route-stop-dot { filter: drop-shadow(0 1px 2px rgba(16,42,67,.35)); }

.map-cell-tooltip.leaflet-tooltip {
  padding: var(--results-space-2) var(--results-space-3);
  border: 0;
  border-radius: 6px;
  background: rgba(16,42,67,.96);
  box-shadow: 0 5px 16px rgba(16,42,67,.24);
  color: white;
  font-family: "Source Sans 3",sans-serif;
  line-height: 1.2;
  pointer-events: none;
}

.map-cell-tooltip.leaflet-tooltip::before { border-block-start-color: rgba(16,42,67,.96); }
.map-cell-tooltip strong,
.map-cell-tooltip span { display: block; white-space: nowrap; }
.map-cell-tooltip strong { font-size: .82rem; font-weight: 700; }
.map-cell-tooltip span { margin-block-start: var(--results-space-1); color: #d9e2e8; font-size: .75rem; }

.map-destination,
.map-home {
  display: grid !important;
  place-items: center;
  border: 0;
  background: transparent;
}

.map-destination span,
.map-home span { display: grid; place-items: center; }
.map-rank { display: grid !important; place-items: center; border: 0; background: transparent; }
.map-rank,
.map-home { cursor: pointer; }
.map-rank:focus { outline: none; }
.map-rank span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(8,111,98,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 5px rgba(16,42,67,.2);
  color: #086f62;
  font-size: .76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background .15s, color .15s, transform .15s;
}

.map-rank.selected span {
  border-color: white;
  background: #087f6f;
  box-shadow: 0 2px 8px rgba(16,42,67,.25);
  color: white;
  transform: scale(1.12);
}

.map-rank:focus-visible span { box-shadow: 0 0 0 3px rgba(8,127,111,.28); }

/* A solid teardrop pin tinted to match that destination's route accent and
   halo (see routeColors/legend in app.js) - the fill colour comes in as
   --pin-color per marker so one rule covers every destination. */
.map-destination span { inline-size: 30px; block-size: 30px; }
.map-destination svg {
  inline-size: 30px;
  block-size: 30px;
  filter: drop-shadow(0 2px 4px rgba(16,42,67,.45));
}
.map-destination svg path { fill: var(--pin-color, #52758a); stroke: none; }
.map-destination svg circle { fill: #fff; stroke: none; }

/* Home is a selectable place like a candidate rank marker, not a fixed
   destination - so it gets the same circular-badge language as .map-rank
   (including a matching selected/focus state) rather than a pin. */
.map-home span {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--muted);
  box-shadow: 0 2px 8px rgba(16,42,67,.3);
  color: #fff;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.map-home svg { inline-size: 15px; block-size: 15px; fill: currentColor; stroke: none; }
.map-home:hover span { transform: scale(1.06); }
.map-home.selected span {
  background: #087f6f;
  box-shadow: 0 3px 10px rgba(16,42,67,.4);
  transform: scale(1.12);
}
.map-home:focus { outline: none; }
.map-home:focus-visible span { box-shadow: 0 0 0 3px rgba(8,127,111,.28); }

.map-legend {
  padding: var(--results-space-2) var(--results-space-3);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 8px 24px rgba(16,42,67,.14), 0 1px 2px rgba(16,42,67,.08);
  font-size: .75rem;
  line-height: 1.4;
}
/* Only meaningful once the map is short enough to need collapsing chrome
   behind it - see the mobile breakpoint below, which is where this actually
   gets shown. */
.map-info-toggle { display: none; }

.map-route-key {
  display: flex;
  align-items: center;
  gap: var(--results-space-2);
  max-inline-size: min(300px, calc(100vw - 92px));
  padding: var(--results-space-2) var(--results-space-3);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 8px 24px rgba(16,42,67,.14), 0 1px 2px rgba(16,42,67,.08);
  color: var(--results-text);
  font-size: .75rem;
  line-height: 1.35;
}
.map-route-key.ready { display: block; }
.map-route-key.error { color: var(--muted); }
.map-route-key > strong { display: block; color: var(--ink); }
.route-key-list { display: grid; gap: var(--results-space-2); margin-block-start: var(--results-space-2); }
.route-key-list > span { display: flex; align-items: center; gap: var(--results-space-2); }
.route-key-swatch { flex: 0 0 auto; display: block; overflow: visible; }
.route-key-chips { display: inline-flex; gap: 3px; margin-inline-start: var(--results-space-1); }
.route-key-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 17px;
  block-size: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.02em;
}
.route-key-note {
  display: block;
  margin-block-start: var(--results-space-2);
  padding-block-start: var(--results-space-2);
  border-block-start: 1px solid rgba(16,42,67,.08);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 500;
}
.route-key-spinner {
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid #cbd5da;
  border-block-start-color: var(--results-map-home);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.legend-swatches { display: grid; grid-template-columns: repeat(4, 1fr); inline-size: 124px; block-size: 7px; margin: var(--results-space-1) 0; }
.legend-swatches i:nth-child(1) { background: #d6cfc1; }
.legend-swatches i:nth-child(2) { background: #c4a15d; }
.legend-swatches i:nth-child(3) { background: #6f9b82; }
.legend-swatches i:nth-child(4) { background: #176f64; }
.legend-unchecked { display: flex; align-items: center; gap: var(--results-space-2); margin-block-start: var(--results-space-2); color: var(--muted); }
.legend-unchecked i { inline-size: 12px; block-size: 7px; background: #7f8c91; opacity: .35; }
footer { border-top:1px solid var(--line); padding:20px clamp(18px,4vw,52px); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:.75rem; line-height:1.45; } footer p {margin:0; max-width:620px;}
footer a,.privacy-page a{color:var(--teal);font-weight:700}.privacy-page{max-width:820px}.privacy-page .section-card{display:grid;gap:8px}.privacy-page h2{font-size:1.15rem;margin-top:16px}.privacy-page h2:first-child{margin-top:0}.privacy-page p{color:var(--muted);line-height:1.6;margin:0}
body[data-view="4"] > footer { display:none; }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--ink);color:white;padding:11px 16px;border-radius:7px;z-index:1000;transition:.2s;box-shadow:var(--shadow); }.toast.show {opacity:1;transform:translate(-50%,0);}
.consent-banner{position:fixed;z-index:2000;left:18px;right:18px;bottom:18px;max-width:760px;margin:auto;background:white;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px 18px}.consent-banner[hidden]{display:none}.consent-banner p{margin:0 0 12px;color:var(--muted);font-size:.86rem;line-height:1.45}.consent-banner p strong{color:var(--ink)}.consent-banner>div{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.consent-banner .button{min-height:38px;padding:8px 13px;font-size:.8rem}.consent-banner a{color:var(--teal);font-size:.8rem;font-weight:700;margin-left:4px}
.no-results { padding: var(--results-space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--results-card-surface); line-height: 1.5; }
.no-results > p { margin: var(--results-space-2) 0 var(--results-space-4); }
.no-results > .button { margin-block-start: var(--results-space-4); }
.data-note { margin: var(--results-space-5) 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
@media (max-width: 850px) {
  .landing { grid-template-columns:1fr; padding-top:42px; }.landing-copy{max-width:680px}.landing-visual {min-height:430px;}
  .results-shell {
    display: flex;
    flex-direction: column;
    block-size: calc(100vh - 68px);
    block-size: calc(100dvh - 68px);
  }
  .results-panel {
    order: 2;
    flex: 1 1 auto;
    min-block-size: 0;
    padding-block-start: var(--results-space-5);
    border-inline-end: 0;
  }
  .map-wrap {
    z-index: 1;
    order: 1;
    flex: 0 0 auto;
    block-size: 34vh;
    block-size: 34dvh;
    min-block-size: 230px;
    box-shadow: 0 10px 22px rgba(16,42,67,.14);
  }
  .results-head { align-items: center; }
  .result-details { padding-inline-start: var(--results-space-4); }
  .compare-check { padding-inline-start: var(--results-space-4); }
  footer{flex-direction:column}
  /* A short, fixed-height strip is a fine place to browse the map, but the
     compare table needs real room to breathe and its own scroll region - not
     a second scrollbar nested inside that strip, under the results list's
     own scroll. On mobile it takes over the screen as a full-height sheet
     instead, with its own header/close button standing in for the tabs
     (covered underneath) as the way back to the map. */
  .map-pane-toggle {
    border-block-end: 0;
    box-shadow: 0 2px 10px rgba(16,42,67,.08);
    position: relative;
    z-index: 1;
  }
  .map-pane-toggle button { padding: 13px var(--results-space-3); font-size: .92rem; }
  #compareSection:not([hidden]) {
    position: fixed;
    inset-block-start: 68px;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 600;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 34px rgba(16,42,67,.22);
  }
  .compare-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--results-space-3);
    flex: 0 0 auto;
    padding: var(--results-space-4);
    border-block-end: 1px solid var(--line);
    background: var(--surface);
    border-radius: 16px 16px 0 0;
  }
  .compare-sheet-head strong { font-family: "Petrona", Georgia, serif; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
  .compare-sheet-close {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
  }
  .compare-sheet-close:hover,
  .compare-sheet-close:focus-visible { background: var(--results-card-surface); border-color: #aebdc7; }
  #compareSection .compare-tool > h2 { display: none; }
  /* A map this short doesn't have room to also permanently host a legend, a
     route key, zoom buttons and the tile attribution - together they were
     more chrome than map. Zoom stays reachable by pinch/double-tap, and the
     rest collapses behind .map-info-toggle (added in initMap()) so the map
     itself is what's on screen by default; a tap reveals all three together
     without needing separate controls for each. */
  .leaflet-control-zoom { display: none; }
  .map-wrap .map-legend,
  .map-wrap .map-route-key,
  .map-wrap .leaflet-control-attribution { display: none; }
  .map-wrap.map-info-open .map-legend,
  .map-wrap.map-info-open .leaflet-control-attribution { display: block; }
  .map-wrap.map-info-open .map-route-key { display: revert; }
  .map-info-toggle {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    margin: 0;
    border: 1px solid #cbd5da;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    box-shadow: 0 3px 12px rgba(16,42,67,.1);
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: .92rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
  }
  .map-wrap.map-info-open .map-info-toggle { background: var(--teal); border-color: var(--teal); color: white; }
  .map-legend,
  .map-route-key { margin-block-end: 6px; }
}
@media (max-width: 560px) {
  .site-header {height:60px;padding:0 14px}.step-status{font-size:.78rem}.header-right{gap:10px}.lang-switch{font-size:.78rem}.landing{padding:30px 18px 46px;gap:32px}.landing h1{font-size:clamp(2.45rem,12vw,3.05rem);line-height:1.04;margin-bottom:18px}.lead{line-height:1.48;margin-bottom:22px}.landing-action{align-items:flex-start;gap:10px}.landing-action .button{width:100%}.landing-action>p{font-size:.78rem}.landing-proof{margin-top:22px;display:grid;gap:9px}.landing-visual{min-height:390px;border-radius:17px}.landing-map-kicker{left:12px;top:12px;max-width:calc(100% - 24px);padding:10px 12px}.landing-score-legend{display:none}.mini-result{left:12px;right:12px;bottom:12px;padding:10px 11px 11px}.mini-result-head,.mini-result-row{grid-template-columns:minmax(0,1fr) 86px}.wizard{padding:35px 16px 54px}.field-grid,.field-grid.triple{grid-template-columns:1fr}.mode-choice>div{grid-template-columns:1fr 1fr}.address-search{grid-template-columns:1fr}.address-search .button{width:100%}.destination-collapsible>summary{padding:14px 14px}.destination-collapsible-body{padding:16px 14px 16px}.quick-group{display:block}.quick-group small{display:block;margin-bottom:4px}.preference{grid-template-columns:1fr 132px;gap:6px}.preference input{grid-column:1/-1;grid-row:2}.pref-value{grid-column:2;grid-row:1}.wizard-actions{flex-wrap:wrap}.wizard-actions .button{flex:1}
  .results-shell {
    block-size: calc(100vh - 60px);
    block-size: calc(100dvh - 60px);
  }
  .map-wrap { block-size: 34vh; block-size: 34dvh; min-block-size: 220px; }
  #compareSection:not([hidden]) { inset-block-start: 60px; }
  .results-panel { padding-inline: var(--results-space-4); padding-block-end: var(--results-space-6); }
  .results-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--results-space-3); }
  .results-actions { flex-direction: row; }
  .result-summary { grid-template-columns: 28px minmax(0, 1fr) auto; padding: var(--results-space-4); }
  .result-details { padding: var(--results-space-1) var(--results-space-4) var(--results-space-5); }
  .compare-check { padding: 0 var(--results-space-4) var(--results-space-4); }
  .trip-facts,
  .domain-facts { grid-template-columns: 1fr; }
  .comparison-scores { align-items: flex-start; }
  .comparison-arrow { display: none; }
  .housing-summary > div { display: grid; grid-template-columns: 1fr; }
  .housing-summary span { min-inline-size: 0; }
  .map-legend,
  .map-route-key { padding: var(--results-space-1) var(--results-space-2); font-size: .7rem; }
  .map-legend .legend-swatches { inline-size: 96px; }
  .map-route-key { max-inline-size: min(220px, calc(100vw - 80px)); }
}
@media (max-width: 390px) {
  .results-head { grid-template-columns: 1fr; }
  .results-actions { justify-content: flex-start; }
  .result-summary { grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--results-space-2); }
  .score { font-size: 1.45rem; }
  .header-right { gap: 6px; }
  .step-status {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}
@media (pointer: coarse) {
  .results-actions .text-button,
  .feedback-buttons button,
  .map-pane-toggle button,
  .compare-remove { min-block-size: 44px; }
  .compare-sheet-close { inline-size: 44px; block-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }