:root {
  color-scheme: light;
  --ink: #12231d;
  --paper: #f2eee4;
  --lime: #d8ff52;
  --orange: #ff6534;
  --button-red: #ff3b30;
  --blue: #153de0;
  --muted: #687069;
  font-family: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
}
.street-background {
  position: fixed;
  inset: -4vh -4vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.street-background::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: url("images/busy-street-background.png") center / cover no-repeat;
  filter: saturate(.88) contrast(.88);
  transform: scale(1.08);
  animation: street-pan 24s ease-in-out infinite alternate;
  will-change: transform;
}
.street-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 62% 63%, rgba(255, 244, 182, .24), transparent 12%),
    radial-gradient(circle at 38% 70%, rgba(255, 82, 42, .14), transparent 9%),
    linear-gradient(rgba(242, 238, 228, .68), rgba(242, 238, 228, .78));
  background-size: 115% 115%, 120% 120%, 100% 100%;
  animation: street-lights 7s ease-in-out infinite alternate;
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.app-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(18, 35, 29, .16);
  background: rgba(242, 238, 228, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.brand { display: inline-flex; gap: 9px; align-items: center; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50% 50% 50% 0; background: var(--orange); transform: rotate(-45deg); }
.app-actions { display: flex; gap: 10px; align-items: center; }
.connection-pill { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font: 500 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.connection-pill > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #36a852; box-shadow: 0 0 0 3px rgba(54, 168, 82, .12); }
.connection-pill.is-offline > span:first-child { background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 101, 52, .12); }
.text-button { padding: 8px 12px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--lime); font: 600 11px "Manrope", sans-serif; cursor: pointer; }
.account-button.is-signed-in { background: var(--button-red); }
main { position: relative; z-index: 2; width: min(920px, calc(100% - 32px)); margin: 0 auto; }
.button-stage { min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 18px; padding: calc(92px + env(safe-area-inset-top)) 0 max(42px, env(safe-area-inset-bottom)); }
.intro { width: min(94vw, 820px); margin-bottom: 4px; text-align: center; }
.eyebrow { margin: 0 0 8px; color: var(--orange); font: 500 10px "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.intro h1 { margin: 0; font-size: clamp(25px, 4.5vw, 52px); line-height: .98; letter-spacing: -.06em; white-space: nowrap; }
.intro h1 em { color: var(--blue); font-style: normal; }
.run-button-motion { width: min(60vw, 470px); animation: button-drift 7.2s ease-in-out infinite; will-change: transform; }
#run-button {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(145deg, #ff6b3d 0%, var(--button-red) 58%, #e82f35 100%);
  box-shadow: 0 22px 50px rgba(18, 35, 29, .24), 0 8px 0 rgba(18, 35, 29, .9);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#run-button::before { content: ""; position: absolute; inset: 7%; z-index: -1; border: 1px solid rgba(18, 35, 29, .18); border-radius: 50%; }
#run-button:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 28px 62px rgba(18, 35, 29, .28), 0 10px 0 rgba(18, 35, 29, .92); }
#run-button:active { transform: translateY(5px) scale(.995); box-shadow: 0 13px 30px rgba(18, 35, 29, .22), 0 3px 0 rgba(18, 35, 29, .92); }
#run-button:focus-visible { outline: 4px solid var(--blue); outline-offset: 8px; }
#run-button:disabled { cursor: wait; background: #ffbd42; }
.button-kicker, .button-status { font: 500 clamp(9px, 1.3vw, 12px) "DM Mono", monospace; text-transform: uppercase; letter-spacing: .15em; }
.button-kicker { position: absolute; top: 17%; }
.button-label { font-size: clamp(43px, 7.4vw, 72px); line-height: .84; font-weight: 700; letter-spacing: -.075em; text-transform: uppercase; animation: label-breathe 4.8s ease-in-out infinite; }
.button-status { position: absolute; bottom: 16%; }
#run-button svg { position: absolute; width: 34px; right: 16%; bottom: 15%; fill: none; stroke: var(--ink); stroke-width: 1.5; animation: pin-bob 2.4s ease-in-out infinite; }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%; }
.orbit-one { width: 125%; height: 34%; transform: rotate(-19deg); animation: orbit-a 15s linear infinite; }
.orbit-two { width: 34%; height: 125%; transform: rotate(31deg); animation: orbit-b 21s linear infinite reverse; }
#run-button.is-loading .orbit-one { animation: orbit-a 2s linear infinite; }
#run-button.is-loading .orbit-two { animation: orbit-b 2.8s linear infinite reverse; }
.location-entry { width: min(76vw, 580px); margin-top: 8px; }
.location-entry label { display: block; margin: 0 0 8px 14px; color: var(--muted); font: 500 9px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.location-input-shell { display: flex; min-height: 58px; align-items: center; overflow: hidden; border: 1px solid rgba(18, 35, 29, .28); border-radius: 18px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 30px rgba(18, 35, 29, .1); backdrop-filter: blur(12px); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.location-input-shell:focus-within { border-color: var(--blue); background: #fffdf7; box-shadow: 0 0 0 4px rgba(21, 61, 224, .1), 0 12px 32px rgba(18, 35, 29, .12); }
.location-input-pin { width: 20px; margin-left: 17px; flex: 0 0 auto; fill: none; stroke: var(--blue); stroke-width: 1.7; }
.location-entry input {
  min-width: 0;
  padding: 17px 13px;
  flex: 1;
  border: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  font: 500 15px "Manrope", sans-serif;
}
.location-entry input::placeholder { color: #757c75; opacity: 1; }
.location-entry input:focus { outline: none; }
#location-button { display: grid; width: 42px; height: 42px; margin-right: 8px; padding: 0; place-items: center; flex: 0 0 auto; border: 0; border-radius: 13px; color: var(--ink); background: var(--lime); cursor: pointer; transition: background .16s ease, transform .16s ease; }
#location-button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
#location-button:hover, #location-button:focus-visible { background: #c8f32d; outline: 2px solid var(--ink); outline-offset: 1px; transform: scale(1.04); }
#privacy-note { margin: -4px 0 0; color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; text-align: center; }

.result-panel { padding: 80px 0 110px; border-top: 1px solid var(--ink); }
.result-kicker { margin: 0 0 42px; color: var(--orange); font: 500 11px "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.answer { display: grid; gap: 14px; }
.answer-section { padding: 24px 26px; border: 1px solid rgba(18, 35, 29, .22); border-radius: 20px; background: rgba(255, 253, 247, .78); }
.answer-section > h2 { margin: 0 0 16px; font: 700 19px "Manrope", sans-serif; letter-spacing: -.025em; text-transform: none; }
.answer-section p { margin: 0; white-space: pre-wrap; font-size: clamp(15px, 2vw, 18px); line-height: 1.7; }
.compact-result-list { display: grid; gap: 8px; }
.uniform-result-card { min-width: 0; border: 1px solid rgba(18, 35, 29, .18); border-radius: 14px; background: rgba(255, 255, 255, .72); }
.compact-result-row { position: relative; display: grid; min-height: 132px; padding: 15px 16px; gap: 10px; overflow: visible; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.compact-result-row[hidden] { display: none; }
.compact-result-row:hover, .compact-result-row:focus-within { z-index: 30; border-color: rgba(18, 35, 29, .48); background: #fffdf7; transform: translateY(-1px); }
.compact-result-row:has(.result-preview-anchor.is-open) { z-index: 30; }
.compact-result-row h3 { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.015em; }
.compact-result-row .result-preview-anchor { display: inline-flex; }
.result-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.result-chip { display: inline-flex; min-height: 24px; max-width: 100%; padding: 4px 8px; align-items: center; overflow: hidden; border: 1px solid rgba(18, 35, 29, .16); border-radius: 999px; color: var(--muted); background: rgba(242, 238, 228, .7); font: 600 9px "DM Mono", monospace; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.result-chip.is-category { color: #fff; border-color: var(--ink); background: var(--ink); text-transform: uppercase; letter-spacing: .05em; }
.result-supporting { margin: 0 !important; color: var(--muted); font-size: 11px !important; line-height: 1.45 !important; white-space: normal !important; }
.uniform-result-action { width: fit-content; margin-top: auto; color: inherit; font: 700 11px "Manrope", sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.compact-results-toggle { display: flex; width: 100%; min-height: 44px; margin-top: 10px; align-items: center; justify-content: center; border: 1px solid rgba(18, 35, 29, .34); border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, .72); font: 700 11px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.compact-results-toggle:hover, .compact-results-toggle:focus-visible { border-color: var(--ink); background: #fffdf7; transform: translateY(-1px); }
.result-group { display: grid; gap: 16px; margin-top: 30px; }
.result-group-header { display: flex; align-items: end; justify-content: space-between; padding: 0 5px; gap: 20px; }
.result-group-header span { color: var(--orange); font: 500 9px "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.result-group-header h2 { margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: .95; letter-spacing: -.055em; }
.result-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.result-group-grid > .answer-section { min-width: 0; }
.location-dashboard { position: relative; isolation: isolate; min-height: 420px; padding: 0; overflow: hidden; color: #fff; border-color: rgba(18, 35, 29, .55); background: #17372d; box-shadow: 8px 10px 0 var(--ink); }
.location-dashboard::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--city-image, linear-gradient(135deg, #315848, #17372d)); background-position: center; background-size: cover; transform: scale(1.03); }
.location-dashboard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 25, 20, .94) 0%, rgba(8, 25, 20, .8) 52%, rgba(8, 25, 20, .3) 100%); }
.location-dashboard-content { display: flex; width: min(650px, 100%); min-height: 420px; padding: clamp(28px, 6vw, 58px); flex-direction: column; justify-content: center; }
.location-dashboard-kicker { margin-bottom: 9px; color: var(--lime); font: 600 10px "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.location-dashboard h2 { margin: 0; font: 700 clamp(42px, 8vw, 74px)/.92 "Manrope", sans-serif; letter-spacing: -.07em; text-transform: none; }
.location-dashboard h2 a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.location-dashboard-address { margin-top: 13px !important; color: rgba(255, 255, 255, .72); font: 500 10px "DM Mono", monospace !important; letter-spacing: .08em; text-transform: uppercase; }
.location-dashboard-summary { max-width: 620px; margin-top: 24px !important; font-size: clamp(16px, 2.3vw, 20px) !important; line-height: 1.55 !important; }
.location-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.location-stats > div { display: grid; min-width: 150px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.location-stats strong { font-size: 23px; line-height: 1; }
.location-stats span { margin-top: 5px; color: rgba(255, 255, 255, .7); font: 500 9px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.location-fact { max-width: 650px; margin-top: 20px !important; color: rgba(255, 255, 255, .85); font-size: 13px !important; line-height: 1.55 !important; }
.location-weather { position: relative; display: grid; grid-template-columns: minmax(160px, .8fr) minmax(300px, 1.8fr); gap: 12px; max-width: 700px; margin-top: 24px; padding: 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px; background: rgba(8, 25, 20, .48); backdrop-filter: blur(12px); }
.location-weather-now { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 4px 7px; }
.weather-now-icon { font-size: 40px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .22)); }
.location-weather-now > div { display: grid; }
.location-weather-now strong { font-size: 36px; line-height: .95; letter-spacing: -.05em; }
.location-weather-now span:not(.weather-now-icon) { margin-top: 5px; font-size: 13px; font-weight: 700; }
.location-weather-now small { margin-top: 3px; color: rgba(255, 255, 255, .7); font: 500 9px "DM Mono", monospace; line-height: 1.35; }
.location-weather-outlook { display: grid; grid-template-columns: repeat(4, minmax(66px, 1fr)); gap: 7px; }
.location-weather-outlook > div { display: grid; justify-items: center; align-content: center; min-width: 0; padding: 7px 5px; border-radius: 11px; background: rgba(255, 255, 255, .09); text-align: center; }
.location-weather-outlook span { color: rgba(255, 255, 255, .72); font: 500 9px "DM Mono", monospace; text-transform: uppercase; }
.location-weather-outlook b { margin: 4px 0 2px; font-size: 20px; line-height: 1; }
.location-weather-outlook strong { white-space: nowrap; font-size: 12px; }
.location-weather-outlook small { margin-top: 3px; color: rgba(255, 255, 255, .66); font: 500 8px "DM Mono", monospace; }
.weather-attribution { position: absolute; right: 14px; bottom: -19px; color: rgba(255, 255, 255, .7); font: 500 8px "DM Mono", monospace; text-underline-offset: 3px; }
.location-dashboard-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.location-dashboard-actions a, .location-dashboard-actions button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .58); border-radius: 999px; color: #fff; background: rgba(8, 25, 20, .38); font: 700 11px "Manrope", sans-serif; text-decoration: none; cursor: pointer; }
.location-dashboard-actions a { display: inline-flex; align-items: center; }
.media-section { grid-column: 1 / -1; padding: 24px 0 25px; overflow: hidden; }
.media-section > h2, .media-section > .media-section-note, .media-section > .inline-sources, .media-section > .carousel-controls { margin-right: 24px; margin-left: 24px; }
.media-section-note { margin-bottom: 15px !important; color: var(--muted); font: 500 11px "DM Mono", monospace !important; }
.media-section-note a { color: inherit; text-underline-offset: 3px; }
.carousel-controls { display: flex; min-height: 36px; align-items: center; justify-content: flex-end; gap: 7px; margin-top: -48px; margin-bottom: 12px; }
.carousel-status { margin-right: 4px; color: var(--muted); font: 600 9px "DM Mono", monospace; letter-spacing: .05em; }
.carousel-arrow { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: #fffdf7; font: 700 16px/1 "Manrope", sans-serif; cursor: pointer; transition: color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease; }
.carousel-arrow:hover:not(:disabled), .carousel-arrow:focus-visible { color: #fff; background: var(--ink); outline: none; transform: translateY(-1px); }
.carousel-arrow:disabled { cursor: default; opacity: .3; }
.media-carousel-shell { position: relative; overflow: hidden; }
.media-carousel-shell::after { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 15px; width: 46px; background: linear-gradient(90deg, transparent, rgba(255, 253, 247, .92)); pointer-events: none; }
.media-carousel { display: grid; grid-auto-columns: minmax(220px, 30%); grid-auto-flow: column; gap: 12px; padding: 3px 24px 15px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-color: rgba(18, 35, 29, .42) transparent; scrollbar-width: thin; }
.media-result-card { display: flex; min-width: 0; min-height: 360px; flex-direction: column; border: 1px solid rgba(18, 35, 29, .24); border-radius: 17px; background: #fffdf7; overflow: hidden; scroll-snap-align: start; }
.media-result-visual { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--blue), var(--orange)); text-decoration: none; }
.media-result-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.media-result-card:hover .media-result-visual img { transform: scale(1.04); }
.media-result-fallback { font-size: 50px; font-weight: 700; opacity: .8; }
.place-carousel-visual { background: linear-gradient(135deg, #17372d, var(--blue)); }
.parks-carousel .place-carousel-visual { background: linear-gradient(135deg, #17372d, #4f7c55); }
.interesting-places-carousel .place-carousel-visual { background: linear-gradient(135deg, var(--orange), var(--blue)); }
.place-carousel-photo { position: absolute; z-index: 0; inset: 0; opacity: 0; }
.place-carousel-visual.has-google-photo .place-carousel-photo { opacity: 1; }
.place-carousel-visual.has-google-photo .media-result-fallback { opacity: 0; }
.place-photo-attribution { position: absolute; z-index: 2; right: 9px; bottom: 9px; left: 9px; display: none; width: fit-content; max-width: calc(100% - 18px); overflow: hidden; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(8, 19, 15, .78); font: 600 8px/1.2 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.place-photo-attribution a { color: inherit; text-underline-offset: 2px; }
.place-carousel-visual.has-google-photo .place-photo-attribution { display: block; }
.place-photo-hint { position: absolute; z-index: 2; right: 9px; bottom: 9px; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(8, 19, 15, .72); font: 600 8px/1.2 "DM Mono", monospace; }
.place-carousel-visual.has-google-photo .place-photo-hint { display: none; }
.place-carousel-visual.is-photo-loading .place-photo-hint { opacity: .8; }
.fuel-price-visual { align-content: center; gap: 4px; background: linear-gradient(135deg, #132d24, #3d7a55); }
.fuel-primary-price { font: 700 clamp(32px, 4.5vw, 52px)/1 "Manrope", sans-serif; letter-spacing: -.06em; }
.fuel-primary-label { color: rgba(255, 255, 255, .78); font: 600 9px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.fuel-price-list { display: grid; padding: 8px 10px; gap: 6px; border-radius: 11px; color: var(--muted); background: rgba(242, 238, 228, .62); font: 600 10px "DM Mono", monospace; }
.fuel-price-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fuel-price-item strong { color: var(--ink); font-size: 11px; }
.fuel-price-updated { display: block !important; margin: 0 !important; color: var(--muted) !important; font: 500 9px/1.4 "DM Mono", monospace !important; }
.fuel-prices-unavailable { margin: 0 24px !important; color: var(--muted); font-size: 13px !important; }
.transit-stop-visual { align-content: center; gap: 4px; background: linear-gradient(135deg, #17372d, #176b87 56%, #f07845); }
.transit-stop-icon { font-size: clamp(42px, 6vw, 68px); line-height: 1; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .24)); }
.transit-stop-type { color: rgba(255, 255, 255, .82); font: 700 9px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.transit-route-group { display: grid; padding: 9px 10px; gap: 6px; border-radius: 11px; background: rgba(23, 107, 135, .08); }
.transit-route-heading { color: var(--muted); font: 700 8px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.transit-route-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 7px; font-size: 10px; line-height: 1.35; }
.transit-route-row strong { color: var(--ink); white-space: nowrap; }
.transit-route-row span { display: -webkit-box; min-width: 0; overflow: hidden; color: var(--muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-result-body .transit-next-arrival { display: grid; flex: 0 0 auto; gap: 3px; margin: 0 !important; padding: 9px 10px; overflow: visible; border: 1px solid rgba(23, 107, 135, .15); border-radius: 11px; background: rgba(23, 107, 135, .08); color: var(--ink) !important; font: 700 11px/1.35 "DM Mono", monospace !important; white-space: normal; -webkit-box-orient: initial; -webkit-line-clamp: unset; }
.transit-next-arrival.is-live::before { content: "LIVE ESTIMATE"; color: #176b87; font-size: 8px; letter-spacing: .08em; }
.transit-next-arrival span { display: block; min-width: 0; color: var(--muted); overflow-wrap: anywhere; font-size: 9px; font-weight: 500; }
.transit-data-note { color: var(--muted) !important; font: 500 9px/1.4 "DM Mono", monospace !important; }
.transit-stops-unavailable { margin: 0 24px !important; color: var(--muted); font-size: 13px !important; }
.transit-disclosure { grid-column: 1 / -1; display: flex; min-height: 112px; padding: 22px 24px; align-items: center; justify-content: space-between; gap: 20px; border-style: dashed; background: linear-gradient(135deg, rgba(23, 107, 135, .08), rgba(255, 253, 247, .96)); }
.transit-disclosure h2 { margin-bottom: 5px; }
.transit-disclosure p { margin: 0 !important; color: var(--muted); font-size: 12px !important; }
.transit-expand-button { min-height: 42px; padding: 0 17px; flex: 0 0 auto; border: 1px solid var(--ink); border-radius: 999px; color: #fff; background: var(--ink); font: 700 10px "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: opacity .16s ease, transform .16s ease; }
.transit-expand-button:hover, .transit-expand-button:focus-visible { outline: none; transform: translateY(-1px); }
.transit-expand-button:disabled { cursor: wait; opacity: .58; transform: none; }
.media-result-badge { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(8, 25, 20, .75); font: 700 8px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.media-result-body { display: flex; min-height: 176px; flex: 1; flex-direction: column; gap: 9px; padding: 16px; }
.media-result-body h3 { display: -webkit-box; min-height: 40px; margin: 0; overflow: hidden; font-size: 16px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-result-body h3 a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.media-result-body p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.media-result-body .place-card-description { color: rgba(18, 35, 29, .82); -webkit-line-clamp: 3; }
.media-result-action { margin-top: auto; }
.event-result-card { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.event-result-card:hover, .event-result-card:focus-visible { border-color: var(--ink); box-shadow: 4px 5px 0 var(--ink); outline: none; transform: translate(-2px, -2px); }
.results-map { margin-top: 16px; border: 1px solid var(--ink); border-radius: 22px; background: rgba(255, 253, 247, .9); box-shadow: 5px 6px 0 var(--ink); overflow: hidden; }
.results-map summary { display: flex; min-height: 82px; padding: 18px 22px; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.results-map summary::-webkit-details-marker { display: none; }
.results-map summary > span:first-child { display: grid; gap: 3px; }
.results-map summary small { color: var(--orange); font: 600 8px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.results-map summary strong { font-size: 18px; }
.map-toggle { padding: 7px 10px; border: 1px solid var(--ink); border-radius: 999px; font: 700 9px "DM Mono", monospace; text-transform: uppercase; }
.results-map-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); border-top: 1px solid rgba(18, 35, 29, .2); }
.results-map-image { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.results-map-fallback { padding: 25px; color: var(--muted); }
.results-map-legend { display: grid; max-height: 430px; margin: 0; padding: 18px; gap: 7px; overflow-y: auto; list-style: none; counter-reset: none; background: #fffdf7; }
.results-map-legend li { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; }
.results-map-legend li span, .map-index { display: inline-grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 50%; color: #fff; background: var(--button-red); font: 700 10px "DM Mono", monospace; text-decoration: none; }
.results-map-legend a { min-width: 0; overflow: hidden; color: inherit; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.map-index { margin-right: 2px; vertical-align: middle; }
.distance-note-card { padding: 13px 18px; border-style: dashed; color: var(--muted); background: rgba(255, 253, 247, .55); }
.distance-note-card h2 { margin: 0; font-size: 9px; line-height: 1.5; }
.place-name-link { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.place-name-link:hover { text-decoration-thickness: 2px; }
.result-preview-anchor { position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: normal; }
.result-preview-anchor.is-long-title { display: inline; }
.result-preview-anchor.is-long-title .result-preview-toggle { margin-left: 5px; vertical-align: .08em; }
.result-preview-toggle { display: inline-grid; width: 19px; height: 19px; padding: 0; place-items: center; border: 1px solid rgba(18, 35, 29, .28); border-radius: 50%; color: inherit; background: rgba(255, 255, 255, .72); font: 700 11px/1 "DM Mono", monospace; cursor: pointer; opacity: .68; transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.result-preview-toggle:hover, .result-preview-toggle:focus-visible { opacity: 1; transform: scale(1.08); background: #fff; outline: none; }
.result-preview { position: absolute; z-index: 50; top: calc(100% + 10px); left: 0; isolation: isolate; display: grid; overflow: hidden; width: min(340px, calc(100vw - 54px)); padding: 0 16px 16px; gap: 8px; border: 1px solid rgba(18, 35, 29, .2); border-radius: 15px; color: var(--ink); background: #fffdf7; box-shadow: 0 18px 45px rgba(10, 24, 19, .28); font-size: 13px; line-height: 1.45; white-space: normal; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.result-preview::before { content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px; border-top: 1px solid rgba(18, 35, 29, .2); border-left: 1px solid rgba(18, 35, 29, .2); background: #fffdf7; transform: rotate(45deg); }
.result-preview-title { font-size: 14px; line-height: 1.3; }
.result-preview-detail { color: rgba(18, 35, 29, .75); }
.result-preview-action { width: fit-content; color: inherit; font-weight: 700; text-underline-offset: 3px; }
.result-preview-media { position: relative; display: grid; min-height: 82px; margin: 0 -16px 4px; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--blue), var(--orange)); }
.result-preview-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.result-preview-media.has-image { min-height: 150px; }
.result-preview-media.has-image .result-preview-image { opacity: 1; }
.result-preview-media-fallback { font: 600 30px/1 "DM Mono", monospace; }
.result-preview-media.has-image .result-preview-media-fallback { opacity: 0; }
.result-preview-domain { position: absolute; right: 10px; bottom: 9px; max-width: calc(100% - 20px); overflow: hidden; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(8, 19, 15, .7); font: 600 9px/1.2 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.result-preview-attribution { position: absolute; z-index: 2; bottom: 9px; left: 10px; display: none; max-width: calc(100% - 20px); overflow: hidden; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgba(8, 19, 15, .78); font: 600 9px/1.2 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.result-preview-attribution a { color: inherit; text-underline-offset: 2px; }
.result-preview-media.has-image .result-preview-attribution:not(:empty) { display: block; }
.result-preview-media.has-image .result-preview-domain { top: 9px; bottom: auto; }
.result-preview-anchor:hover .result-preview, .result-preview-anchor:focus-within .result-preview, .result-preview-anchor.is-open .result-preview { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.inline-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.inline-sources a { display: inline-flex; padding: 8px 11px; border: 1px solid rgba(21, 61, 224, .32); border-radius: 999px; color: var(--blue); background: rgba(255, 255, 255, .65); font-size: 11px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.inline-sources a:hover { border-color: var(--blue); background: #fff; }
.more-sources { background: transparent; }
.map-data { margin: 0 0 64px; padding: 28px; border: 1px solid rgba(18, 35, 29, .24); border-radius: 28px; background: rgba(255, 255, 255, .5); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-overline { margin: 0 0 5px; color: var(--orange); font: 500 9px "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.section-heading h2 { margin: 0; font-size: clamp(25px, 4vw, 38px); letter-spacing: -.045em; }
.google-attribution { flex: 0 0 auto; color: #5e5e5e; font-family: Roboto, "Manrope", sans-serif; font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: normal; white-space: nowrap; }
.place-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.place-card { display: flex; min-width: 0; min-height: 230px; flex-direction: column; padding: 20px; border: 1px solid var(--ink); border-radius: 20px; background: #fffdf7; box-shadow: 4px 5px 0 var(--ink); }
.place-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.place-kind, .place-status { overflow: hidden; color: var(--muted); font: 500 9px "DM Mono", monospace; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.place-status { color: #a73b24; }
.place-status.is-open { color: #237b3b; }
.place-card h3 { margin: 0 0 7px; font-size: 19px; line-height: 1.15; letter-spacing: -.025em; }
.place-meta { min-height: 19px; margin: 0 0 8px; color: var(--ink); font-size: 12px; font-weight: 700; }
.place-address { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.place-link { margin-top: auto; color: var(--blue); font-size: 12px; font-weight: 700; text-underline-offset: 3px; }
.review-link { align-self: flex-start; margin-top: 12px; padding: 0; border: 0; color: var(--ink); background: transparent; font: 700 12px "Manrope", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sponsor-card { border-color: var(--blue); background: #f0f3ff; box-shadow: 4px 5px 0 var(--blue); }
.sponsor-label { align-self: flex-start; margin-bottom: 18px; padding: 5px 8px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); font: 700 9px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.ranking-note { margin: 25px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.ranking-note a { color: inherit; }
.run-meta { margin: 48px 0 0; color: var(--muted); font: 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 42px; }
.action-button { min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 999px; color: var(--paper); background: var(--ink); font: 600 13px "Manrope", sans-serif; cursor: pointer; }
.action-button-secondary { color: var(--ink); background: transparent; }
.save-button { color: var(--ink); background: var(--lime); }
.action-button:focus-visible, .text-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.error-panel { margin: 0 auto 80px; padding: 24px; border: 1px solid var(--orange); background: rgba(255, 101, 52, .08); }
.error-panel p { margin-bottom: 0; }
.site-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 max(32px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(18, 35, 29, .2); color: var(--muted); font-size: 11px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.app-dialog { width: min(560px, calc(100% - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 32px; border: 2px solid var(--ink); border-radius: 28px; color: var(--ink); background: var(--paper); box-shadow: 12px 14px 0 var(--ink); overflow: auto; }
.app-dialog::backdrop { background: rgba(18, 35, 29, .58); backdrop-filter: blur(5px); }
.app-dialog h2 { margin: 0 0 10px; font-size: clamp(28px, 6vw, 44px); letter-spacing: -.05em; }
.dialog-close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: transparent; font-size: 23px; line-height: 1; cursor: pointer; }
.dialog-intro { margin: 0 35px 26px 0; color: var(--muted); line-height: 1.55; }
.auth-dialog form { display: grid; gap: 16px; }
.auth-dialog label, .review-form label { display: grid; gap: 7px; color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.auth-dialog input, .review-form select, .review-form textarea { width: 100%; border: 1px solid var(--ink); border-radius: 14px; color: var(--ink); background: #fffdf7; font: 500 15px "Manrope", sans-serif; }
.auth-dialog input { min-height: 50px; padding: 0 15px; }
.dialog-submit { width: 100%; margin-top: 4px; }
.dialog-switch { padding: 0; border: 0; color: var(--blue); background: transparent; font: 600 12px "Manrope", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-dialog > .dialog-switch { display: block; margin: 20px auto 0; }
.form-message { min-height: 18px; margin: 0; color: #a52820; font-size: 12px; }
.saves-dialog { width: min(760px, calc(100% - 28px)); }
.saves-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-right: 42px; }
.saved-list { display: grid; gap: 18px; margin-top: 26px; }
.saved-card { padding: 22px; border: 1px solid var(--ink); border-radius: 20px; background: #fffdf7; box-shadow: 4px 5px 0 var(--ink); }
.saved-card h3 { margin: 0 0 5px; font-size: 20px; }
.saved-meta { margin: 0 0 14px; color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.saved-preview { display: -webkit-box; margin: 0 0 16px; overflow: hidden; font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.review-form { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid #d5d1c8; }
.review-form select { height: 42px; padding: 0 10px; }
.review-form textarea { min-height: 42px; max-height: 120px; padding: 11px 12px; resize: vertical; }
.review-dialog { width: min(720px, calc(100% - 28px)); }
.review-summary { margin: -2px 0 24px; color: var(--muted); font-size: 13px; }
.community-reviews { display: grid; gap: 12px; }
.community-review { padding: 17px; border: 1px solid rgba(18, 35, 29, .22); border-radius: 16px; background: #fffdf7; }
.community-review > div:first-child { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; }
.community-review > div:first-child span { color: #d49200; letter-spacing: .08em; }
.community-review p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.review-report-button { margin-top: 13px; padding: 0; border: 0; color: var(--muted); background: transparent; font: 600 10px "DM Mono", monospace; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-report-button:disabled { cursor: default; opacity: .65; }
.review-gallery, .image-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.review-gallery img, .image-preview img { width: 100%; aspect-ratio: 1; border: 1px solid rgba(18, 35, 29, .2); border-radius: 11px; object-fit: cover; }
.place-review-form { display: grid; gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(18, 35, 29, .22); }
.place-review-form h3 { margin: 0 0 2px; font-size: 19px; }
.place-review-form label { display: grid; gap: 7px; color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.place-review-form label span { font-size: 9px; letter-spacing: .02em; text-transform: none; }
.place-review-form select, .place-review-form textarea, .place-review-form input[type="file"] { width: 100%; padding: 12px; border: 1px solid var(--ink); border-radius: 14px; color: var(--ink); background: #fffdf7; font: 500 14px "Manrope", sans-serif; }
.place-review-form textarea { min-height: 100px; resize: vertical; }
.account-management { margin-top: 26px; padding: 20px; border: 1px solid rgba(18, 35, 29, .24); border-radius: 18px; background: rgba(255, 253, 247, .72); }
.account-management h3 { margin: 0 0 6px; font-size: 17px; }
.account-management p { margin: 0 0 15px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-management > div, .moderation-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.danger-button { border-color: #a9231b; color: #fff; background: #a9231b; }
.moderation-list { display: grid; gap: 16px; margin-top: 22px; }
.moderation-card { padding: 18px; border: 1px solid rgba(18, 35, 29, .25); border-radius: 16px; background: #fffdf7; }
.moderation-card h3 { margin: 0 0 6px; }
.moderation-card blockquote { margin: 12px 0; padding-left: 13px; border-left: 3px solid var(--orange); font-size: 14px; }
.moderation-card > p:not(.saved-meta) { color: var(--muted); font-size: 12px; }
.mini-button { min-height: 42px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; color: var(--paper); background: var(--ink); font: 600 11px "Manrope", sans-serif; cursor: pointer; }
.mini-button-secondary { color: var(--ink); background: transparent; }
.empty-state { padding: 50px 20px; color: var(--muted); text-align: center; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: 13px 18px; border: 1px solid var(--ink); border-radius: 999px; color: var(--paper); background: var(--ink); box-shadow: 4px 5px 0 var(--button-red); font-size: 12px; transform: translateX(-50%); }
.legal-page main { width: min(720px, calc(100% - 32px)); padding: 70px 0; }
.legal-page article h1 { margin: 10px 0 34px; font-size: clamp(42px, 8vw, 72px); line-height: .95; letter-spacing: -.065em; }
.legal-page article h2 { margin-top: 34px; }
.legal-page article p { line-height: 1.75; }
.legal-back { display: inline-block; margin-bottom: 50px; color: var(--ink); }
[hidden] { display: none !important; }

@keyframes orbit-a { to { transform: rotate(341deg); } }
@keyframes orbit-b { to { transform: rotate(391deg); } }
@keyframes button-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.25deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(.25deg); }
}
@keyframes label-breathe {
  0%, 100% { transform: scale(1); letter-spacing: -.075em; }
  50% { transform: scale(1.035); letter-spacing: -.045em; }
}
@keyframes pin-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(3deg); }
}
@keyframes street-pan {
  0% { transform: scale(1.08) translate3d(-1.5%, -.5%, 0); }
  50% { transform: scale(1.12) translate3d(1%, 1%, 0); }
  100% { transform: scale(1.09) translate3d(1.8%, -.8%, 0); }
}
@keyframes street-lights {
  0% { background-position: 42% 48%, 58% 54%, 0 0; opacity: .84; }
  100% { background-position: 63% 62%, 35% 68%, 0 0; opacity: 1; }
}
@media (max-width: 700px) {
  .street-background::before { background-position: 56% center; }
  .app-bar { min-height: calc(58px + env(safe-area-inset-top)); }
  .connection-pill { font-size: 0; gap: 0; }
  .intro { width: min(96vw, 500px); }
  .intro h1 { font-size: clamp(20px, 6.5vw, 28px); }
  .run-button-motion { width: min(78vw, 410px); }
  #run-button { box-shadow: 0 18px 40px rgba(18, 35, 29, .23), 0 7px 0 rgba(18, 35, 29, .9); }
  .location-entry { width: min(90vw, 500px); }
  #run-button:hover { transform: none; box-shadow: 0 18px 40px rgba(18, 35, 29, .23), 0 7px 0 rgba(18, 35, 29, .9); }
  .button-label { font-size: clamp(40px, 12.5vw, 64px); }
  .result-panel { padding-top: 54px; }
  .map-data { padding: 20px 16px; border-radius: 22px; }
  .answer-section { padding: 20px 17px; }
  .compact-result-row { min-height: 124px; padding: 14px; }
  .result-group { margin-top: 22px; }
  .result-group-header { align-items: start; flex-direction: column-reverse; gap: 5px; }
  .result-group-grid { grid-template-columns: 1fr; }
  .location-dashboard { min-height: 500px; }
  .location-dashboard::after { background: linear-gradient(0deg, rgba(8, 25, 20, .96) 0%, rgba(8, 25, 20, .72) 75%, rgba(8, 25, 20, .4) 100%); }
  .location-dashboard-content { min-height: 500px; padding: 30px 22px; justify-content: end; }
  .location-dashboard h2 { font-size: clamp(42px, 15vw, 64px); }
  .location-weather { grid-template-columns: 1fr; padding: 12px; }
  .location-weather-outlook { gap: 5px; }
  .location-weather-outlook > div { padding: 7px 2px; }
  .location-weather-outlook strong { font-size: 10px; }
  .location-stats > div { min-width: 128px; flex: 1; }
  .media-section { padding-right: 0; padding-left: 0; }
  .transit-disclosure { min-height: 0; align-items: stretch; flex-direction: column; }
  .transit-expand-button { width: 100%; }
  .media-carousel { grid-auto-columns: minmax(245px, 82%); padding-right: 17px; padding-left: 17px; }
  .media-section > h2, .media-section > .media-section-note, .media-section > .inline-sources, .media-section > .carousel-controls { margin-right: 17px; margin-left: 17px; }
  .carousel-controls { margin-top: 0; justify-content: space-between; }
  .carousel-status { margin-right: auto; }
  .results-map-body { grid-template-columns: 1fr; }
  .results-map-image { min-height: 280px; }
  .results-map-legend { max-height: 270px; }
  .result-preview { left: -4px; width: min(310px, calc(100vw - 50px)); }
  .section-heading { align-items: end; }
  .place-grid { grid-template-columns: 1fr; }
  .place-card { min-height: 210px; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .save-button { grid-column: 1 / -1; }
  .action-button { padding-inline: 14px; }
  .app-dialog { padding: 26px 18px; border-radius: 22px; box-shadow: 7px 8px 0 var(--ink); }
  .review-form { grid-template-columns: 1fr; }
  .review-form textarea { min-height: 76px; }
}

@media (display-mode: standalone) {
  .app-bar { background: rgba(242, 238, 228, .94); }
  #install-button { display: none !important; }
}

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