/* VetDayOut — field notes for a day well spent. */
:root {
  --ink: #213b33; --forest: #173f35; --paper: #f4f2eb;
  --mint: #edf3eb; --line: #e0e3d9; --muted: #65746a;
  --gold: #a38047; --brass: #cfb276; --rust: #b36045;
  --shadow: 0 5px 20px #243e3210, 0 1px 3px #243e3208;
}
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
button, a, input, select, summary { touch-action: manipulation; }
button { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: #ab7e38; outline-offset: 3px; }
.masthead { height: 74px; padding: 0 28px; background: var(--forest); color: #fcfaf2; border-bottom: 1px solid #ffffff16; }
.brand { gap: 12px; color: #fcfaf2; font-size: 19px; letter-spacing: 1.6px; font-weight: 650; }
.brand i { color: var(--brass); font-size: 24px; }
.brand small { color: #d8e0d2; font-size: 7px; letter-spacing: 2.3px; margin-top: 5px; }
.brand-emblem { width: 43px; height: 43px; border: 0; color: var(--brass); }
.brand-emblem svg { display: block; width: 43px; height: 43px; stroke: currentColor; stroke-width: 1.2; }
.header-right { gap: 22px; }
.day-stamp { display: flex; align-items: center; gap: 10px; padding-right: 22px; border-right: 1px solid #ffffff20; letter-spacing: 0; }
.stamp-date { width: 39px; height: 43px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #cdb47b6b; border-radius: 5px; color: #f6e8c9; }
.stamp-date small { font-size: 8px; letter-spacing: 1.5px; line-height: 1; }
.stamp-date strong { font-size: 23px; font-weight: 500; letter-spacing: -1px; line-height: 1.2; }
.stamp-caption { color: #fcfaf2; font-size: 12px; font-weight: 500; }
.stamp-caption small { display: block; font-size: 7px; color: #b8c9ba; letter-spacing: 1px; margin-top: 5px; }
#how-it-works, #about { color: #f4f6ec; border: 0; padding: 10px 0; font-size: 12px; font-weight: 500; }
#how-it-works { color: #f0dcae; }
.intro { position: relative; isolation: isolate; overflow: hidden; padding: 22px 28px 20px; gap: 28px; flex-wrap: nowrap; }
.intro-copy { flex: 1 1 auto; min-width: 0; }
.eyebrow { color: #947545; font-size: 9px; letter-spacing: 1.8px; font-weight: 650; }
.hero-contours { position: absolute; z-index: -1; width: 650px; height: 190px; right: 0; top: -5px; color: #52735c; opacity: .075; pointer-events: none; stroke: currentColor; stroke-width: 1; }
.intro .hero-title { font-family: 'Libre Caslon Display', Georgia, serif; font-size: clamp(35px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -1.4px; margin: 9px 0 8px; max-width: none; }
.hero-title em { color: #62795f; font-style: italic; white-space: nowrap; }
.intro p { font-size: 13px; color: #627064; line-height: 1.5; max-width: none; }
.setup-guide { flex: 0 0 420px; max-width: none; gap: 7px; padding: 7px; border: 1px solid #dce2d3; border-radius: 12px; background: #fffdf7b3; box-shadow: 0 2px 8px #193f2b04; }
.setup-guide button { position: relative; min-height: 51px; padding: 9px 8px; gap: 8px; font-size: 12px; font-weight: 550; border: 0; border-radius: 7px; background: transparent; color: #6d786b; line-height: 1.35; }
.step-number { width: 24px; height: 24px; flex-basis: 24px; background: #e9ede2; color: #6a795f; font-size: 10px; }
.setup-guide button[aria-current="step"] { background: var(--forest); color: #fffdf5; box-shadow: 0 3px 7px #193f2b15; }
.setup-guide button[aria-current="step"] .step-number { background: #ffffff20; color: #f2dfb8; }
.setup-guide button.complete .step-number { background: #e3e9da; color: #58724e; }
.setup-guide button.complete[aria-current="step"] .step-number { background: #ffffff20; color: #f2dfb8; }
.area-finder { margin: 0 24px 18px; padding: 12px 16px; gap: 14px; border: 1px solid #dde1d5; border-radius: 12px; background: #fffdf8; box-shadow: 0 3px 12px #173f3505; align-items: flex-end; flex-wrap: nowrap; }
.area-finder form { width: auto; flex: 1 1 440px; max-width: 580px; }
.area-finder label { font-size: 10px; font-weight: 650; letter-spacing: .7px; color: #60715c; margin: 0 0 7px; }
.area-input { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px 4px 4px 12px; border: 1px solid #d0d9c9; border-radius: 7px; background: white; box-shadow: 0 1px 2px #193f2b03; }
.area-input > .ui-icon { width: 18px; height: 18px; color: #789071; }
.area-finder .area-input input { font-size: 14px; width: 100%; padding: 6px 2px; min-height: 38px; }
.area-input:focus-within { border-color: #8ba080; box-shadow: 0 0 0 3px #e7eddf; }
.area-input input:focus-visible { outline: none; }
.primary { background: var(--forest); border: 1px solid var(--forest); border-radius: 7px; font-weight: 600; letter-spacing: .05px; box-shadow: 0 2px 3px #173f350a; }
.area-input .primary { min-height: 38px; padding: 9px 17px; font-size: 12px; }
.secondary { border-color: #d6ddcf; border-radius: 7px; background: #fffefa; }
.area-radius { width: 112px; flex: 0 0 112px; }
.area-radius select { min-height: 48px; height: 48px; font-size: 13px; padding: 9px 10px; border-color: #d6ddcf; border-radius: 7px; background: #fbfcf8; }
.area-finder > .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; height: 48px; padding: 10px 15px; font-size: 12px; white-space: nowrap; }
.area-finder > p { flex: 0 1 285px; border-left: 1px solid var(--line); padding: 3px 0 3px 17px; margin: 0 0 4px; font-size: 11px; line-height: 1.6; color: #71806f; max-width: 285px; }
.connection-note { margin: 0 24px 16px; border: 1px solid #e2d3af; border-radius: 8px; }
.workspace { padding: 0 24px 22px; gap: 14px; border: 0; grid-template-columns: 325px minmax(300px, 1fr) 372px; height: calc(100dvh - 296px); min-height: 520px; }
.panel { border: 1px solid #dce1d4; border-radius: 13px; background: #fffef9; box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { min-height: 66px; padding: 17px 19px 12px; }
.panel-heading h2 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 28px; font-weight: 400; letter-spacing: -.6px; gap: 9px; }
.count { min-width: 24px; height: 22px; background: #e9efe2; color: #58704c; font-size: 10px; }
.text-button { font-size: 11px; color: #64765d; text-decoration-color: #b4c1ab; }
.explore > .panel-heading { padding-bottom: 9px; }
.explore-instruction { margin: 0 19px 15px; font-size: 11px; line-height: 1.65; color: #7b8578; }
.explore-body { padding-top: 2px; scrollbar-color: #c9d3c0 transparent; }
.search { margin: 0 16px; gap: 8px; padding: 0 12px; border: 1px solid #dce2d4; border-radius: 7px; background: #f6f8f1; }
.search > .ui-icon { width: 17px; height: 17px; color: #829277; }
.explore .search input { min-height: 43px; height: 43px; font-size: 12px; color: var(--ink); }
.search input::placeholder { color: #919a8b; }
.offer-filters { margin: 5px 17px 0; border-bottom: 1px solid var(--line); }
.offer-filters > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; list-style: none; font-size: 11px; color: #5b7253; font-weight: 550; }
.offer-filters > summary::-webkit-details-marker { display: none; }
.offer-filters > summary .ui-icon { width: 15px; height: 15px; }
.offer-filters > summary .ui-icon:last-child { margin-left: auto; transition: transform .15s ease; }
.offer-filters[open] > summary .ui-icon:last-child { transform: rotate(180deg); }
.offer-filters .browse-modes { gap: 5px; }
.offer-filters .browse-modes button, .offer-filters .city-tabs button { font-size: 11px; min-height: 38px; border-radius: 6px; }
.offer-filters .filter-row select { font-size: 12px; min-height: 40px; border-radius: 6px; }
.research-note { padding: 11px 18px; font-size: 9px; gap: 7px; color: #85917f; }
.research-note .inline-link { color: #718066; }
.status-dot { width: 5px; height: 5px; background: #91a57c; }
.offer-list { padding: 0 12px 12px; }
.offer-card { margin: 0 0 11px; padding: 16px; border: 1px solid #e1e6da; border-radius: 10px; background: #fff; box-shadow: 0 2px 5px #293f2510; }
.offer-card.is-selected { border-color: #9caf8e; background: #fafcf6; box-shadow: inset 3px 0 0 #8ba075, 0 2px 5px #293f2508; }
.offer-top { align-items: flex-start; gap: 8px; }
.offer-identity { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.business-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; background: #edf2e7; color: #668254; border: 1px solid #e0e7d6; border-radius: 10px; }
.business-mark .ui-icon { width: 20px; height: 20px; }
.shopping .business-mark { background: #f6efdf; color: #9c824f; border-color: #eee2ca; }
.services .business-mark { background: #edf1f4; color: #6e8691; border-color: #dce5e9; }
.experiences .business-mark { background: #f2ecf2; color: #997c95; border-color: #e6dce5; }
.brand-meta { min-width: 0; }
.brand-name { display: block; font-size: 12px; line-height: 1.4; font-weight: 650; color: #334b3a; }
.brand-category { display: block; margin-top: 3px; font-size: 9px; color: #91a089; line-height: 1.4; }
.city-name { font-size: 8px; line-height: 1.4; color: #8b987f; text-align: right; max-width: 76px; padding-top: 3px; }
.offer-title, .offer-value { font-family: 'DM Sans', Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.22; letter-spacing: -.65px; color: #263e30; margin: 16px 0 12px; }
.offer-meta { gap: 5px; margin: 10px 0; }
.badge { font-size: 8px; letter-spacing: .2px; line-height: 1.5; border-radius: 4px; padding: 4px 6px; background: #edf3e7; color: #6a815b; }
.badge.window { background: #f4f4ed; color: #8b907b; }
.badge.standing { background: #edf1f3; color: #6c8490; }
.badge.unconfirmed { background: #fbf1dd; color: #9a793e; }
.offer-address { font-size: 10px; line-height: 1.6; color: #889280; margin: 11px 0 8px; }
.offer-bottom { gap: 10px; padding-top: 12px; border-top: 1px solid #edf0e8; margin-top: 13px; }
.location-hint { font-size: 9px; line-height: 1.5; color: #909b86; }
.add-button { min-height: 36px; padding: 8px 10px; border-color: #bccdb1; border-radius: 6px; color: #45663c; background: #f7faf2; font-size: 10px; font-weight: 600; }
.add-button.selected { background: var(--forest); color: #f7f7ea; border-color: var(--forest); }
.business-selection { background: #edf3e6; border: 1px solid #e1ead7; border-radius: 6px; font-size: 10px; padding: 9px; }
.business-selection span { font-size: 9px; color: #819471; }
.explore-footer { padding: 10px 12px; font-size: 8px; background: #fbfcf6; border-color: #e6eadd; color: #98a08f; }
.map-panel { border: 1px solid #d3ddcc; border-radius: 13px; box-shadow: var(--shadow); }
.map-top { left: 14px; right: 76px; top: 14px; gap: 7px; }
.map-title, .map-button { border: 1px solid #ffffffb3; border-radius: 7px; background: #fffef7ed; box-shadow: 0 3px 12px #21412c13; }
.map-title { font-size: 8px; letter-spacing: 1.1px; min-height: 38px; padding: 9px 11px; color: #75866a; }
.map-title .ui-icon { width: 15px; height: 15px; color: #71915e; }
.map-button { min-height: 38px; padding: 8px 10px; gap: 7px; }
.map-button .ui-icon { width: 15px; height: 15px; }
.map-button span { font-size: 10px; }
.map-bottom { left: 14px; right: 64px; bottom: 29px; }
.legend { gap: 10px; font-size: 8px; background: #fffef6ed; border-color: #ffffffc7; border-radius: 7px; padding: 9px 11px; color: #7f8b75; box-shadow: 0 3px 12px #21412c10; }
.dot { width: 6px; height: 6px; }
.planner > .panel-heading { min-height: 66px; padding: 17px 20px 14px; background: var(--forest); color: #f8f6ed; border-bottom: 1px solid #ffffff12; }
.planner .panel-heading .count { background: #ffffff1b; color: #d9e4cd; }
.planner .saved-label { font-size: 8px; color: #a4b89f; max-width: 84px; text-align: right; line-height: 1.5; }
.planner-body { background: #fcfcf6; }
.trip-settings { border-bottom: 1px solid #e3e7d9; }
.trip-settings > summary { min-height: 66px; padding: 15px 19px; background: #f4f6ed; }
.trip-settings > summary strong { font-size: 12px; font-weight: 650; color: #546b47; }
.trip-settings > summary small { margin-top: 5px; font-size: 10px; color: #8d9a80; }
.settings-chevron { font-size: 19px; color: #7a9069; }
.planner-settings { padding: 15px 19px; background: #fcfcf8; }
.start-question { font-size: 14px; color: #4c6540; }
.start-card { background: #f4f7ec; border-color: #e1e7d5; border-radius: 8px; }
.start-symbol .ui-icon { width: 24px; height: 24px; color: #7a9466; }
.start-card strong { font-size: 12px; }
.start-card small { font-size: 10px; }
.start-actions { gap: 6px; }
.start-actions button { font-size: 12px; min-height: 42px; }
.start-actions .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.start-actions .center-start { font-size: 11px; min-height: 35px; }
.schedule-controls { gap: 10px; }
.schedule-controls label, .roundtrip { font-size: 11px; }
.schedule-controls input, .schedule-controls select { font-size: 12px; min-height: 42px; border-color: #d8e1cc; border-radius: 6px; }
.route-summary { margin: 14px 14px 0; padding: 14px 9px; background: #eff3e6; border: 1px solid #e1e8d3; border-radius: 9px; gap: 0; text-align: center; }
.route-summary > div + div { border-left: 1px solid #dbe4cf; }
.route-summary b { font-family: 'DM Sans', Arial, sans-serif; font-size: 21px; letter-spacing: -.8px; font-weight: 550; white-space: nowrap; color: #43613b; }
.route-summary small { color: #98a182; font-size: 7px; letter-spacing: .5px; line-height: 1.4; margin-top: 6px; }
.route-status, .route-status:not(:empty) { font-size: 10px; line-height: 1.65; color: #8b977c; padding: 12px 18px; border: 0; }
.route-status:empty { padding: 0; }
.route-status.error { background: #fcf2e1; color: #9d7844; border-block: 1px solid #efdfbd; }
.trip-list { padding: 0 14px 15px; }
.trip-stop { gap: 10px; margin: 0 0 12px; padding: 17px 13px; border: 1px solid #e1e6d7; border-radius: 9px; background: white; box-shadow: 0 2px 4px #1e392506; }
.stop-number { width: 23px; height: 23px; font-size: 10px; background: #5b7a4d; box-shadow: 0 0 0 4px #eef3e7; margin-top: 2px; }
.trip-stop strong { font-size: 13px; line-height: 1.5; padding-right: 24px; color: #3a5231; }
.trip-stop p { font-size: 10px; line-height: 1.6; margin: 6px 0; color: #8c987f; }
.trip-stop .trip-offer { font-size: 11px; line-height: 1.45; color: #627d51; font-weight: 500; margin: 2px 0 8px; }
.stop-time { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.5; color: #4a6e3d; margin-top: 12px; }
.stop-time .ui-icon, .stop-travel .ui-icon { width: 13px; height: 13px; }
.stop-travel { display: flex; align-items: center; gap: 6px; }
.trip-stop .stop-hours { padding-top: 7px; border-top: 1px dashed #e6ebdd; margin-top: 9px; font-size: 9px; color: #9aa58e; }
.remove-stop { width: 36px; height: 36px; right: 3px; top: 7px; font-size: 19px; color: #9caa90; border-radius: 50%; }
.dwell-label { gap: 5px; font-size: 9px; line-height: 1.5; margin-top: 10px; color: #8b9d7d; }
.dwell-label input { width: 48px; min-height: 33px; font-size: 11px; padding: 6px; border-color: #dce5d3; background: #f7faf2; border-radius: 5px; }
.dwell-label .details-button { min-height: 32px; font-size: 9px; padding: 6px 3px; color: #839777; }
.time-preferences { color: #8a9d7b; }
.time-preferences summary { min-height: 35px; padding-block: 8px; font-size: 9px; text-decoration-color: #c0cdb4; }
.time-preferences small { font-size: 9px; }
.time-preferences input { font-size: 11px; min-height: 36px; border-color: #dce5d3; width: 106px; background: #f7faf2; }
.trip-stop .warning { font-size: 9px; color: #ab8555 !important; }
.trip-stop.is-return { background: #f1f5e9; border-style: dashed; box-shadow: none; align-items: center; }
.is-return .stop-number { background: #dfe8d3; color: #748c5d; box-shadow: none; }
.is-return p { color: #6f875c; }
.planner-footer { background: #fffef7; border-color: #e2e7d6; padding: 12px 15px; }
.planner-footer .primary { min-height: 44px; font-size: 12px; letter-spacing: .2px; }
.planner-footer .text-button { min-height: 32px; font-size: 10px; color: #8c9c7b; }
.planner-footer > div { margin: 2px 0; }
.planner-footer small { font-size: 8px; color: #a0aa92; line-height: 1.55; }
.plan-next, .planner-next { background: #edf3e6; border-color: #d9e4ce; padding: 14px 16px; }
.plan-next strong, .planner-next strong { font-size: 13px; color: #536f43; }
.plan-next .primary, .planner-next .primary { font-size: 12px; min-height: 43px; }
.plan-next p, .planner-next p { font-size: 11px; line-height: 1.6; color: #859a72; }
.guided-empty { position: relative; padding: 26px 20px; margin: 4px 2px 12px; border: 1px solid #d8e3cb; border-radius: 10px; background: linear-gradient(145deg, #f0f4e7, #fafbf4); box-shadow: inset 0 1px 0 white; }
.empty-pin { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid #d3dfc4; border-radius: 10px; color: #79945e; background: #e8efdc; }
.empty-pin .ui-icon { width: 22px; height: 22px; }
.guide-kicker { font-size: 8px; letter-spacing: 1.2px; color: #819868; }
.guided-empty h3 { margin: 10px 0 12px; font-size: 31px; line-height: 1.1; color: #49623a; }
.guided-empty p { font-size: 11px; line-height: 1.75; color: #899979; margin-bottom: 20px; }
.guided-empty .primary { font-size: 12px; min-height: 44px; }
.trip-empty { padding: 26px 13px 25px; }
.route-illustration { margin: 0 auto 15px; max-width: 230px; color: #a9bb93; }
.route-illustration svg { display: block; width: 100%; height: 90px; stroke: currentColor; stroke-width: 1.5; }
.route-illustration .empty-route-path { stroke-dasharray: 4 5; }
.trip-empty h3 { font-size: 28px; color: #5c7448; }
.trip-empty p { font-size: 11px; color: #94a182; line-height: 1.75; margin: 13px 0 21px; }
.trip-empty .primary { max-width: 220px; font-size: 12px; min-height: 44px; }
.map-guide { border: 1px solid #d6e0ca; border-radius: 12px; background: #fffef8f5; box-shadow: 0 12px 36px #36552e19; padding: 23px; }
.map-guide strong { font-size: 32px; color: #49643a; }
.map-guide p { font-size: 12px; color: #869979; line-height: 1.75; }
.map-guide .primary { font-size: 12px; min-height: 44px; }
.map-prompt { background: #173f35f5; border: 1px solid #ffffff40; border-radius: 10px; box-shadow: 0 8px 28px #173f3524; font-size: 12px; padding: 16px; }
.map-prompt-actions button { font-size: 12px; min-height: 44px; }
.map-center-target span { border-color: #4b7346; color: #4b7346; box-shadow: 0 2px 10px #173f3520; }
.site-footer { padding: 0 28px 18px; border: 0; font-size: 9px; color: #9a9e8c; }
.site-footer button { font-size: 9px; color: #8e977e; min-height: 30px; padding-inline: 8px; }
.toast { background: var(--forest); border: 1px solid #c5d5b4; border-radius: 10px; box-shadow: 0 9px 30px #173f3530; }
dialog { border-color: #d2ddc7; border-radius: 16px; padding: 28px; background: #fcfcf5; box-shadow: 0 28px 100px #10291f38; }
dialog::backdrop { background: #183c2d74; backdrop-filter: blur(6px); }
dialog h2 { font-size: 37px; color: #415e35; }
dialog p, dialog li { color: #7c906c; }
dialog .close { border-radius: 50%; color: #8a9c77; font-size: 25px; }
#location-dialog { border-radius: 16px; }
.location-picker-header { padding: 26px 25px 0; background: #fafcf3; }
.location-picker-header h2 { font-size: 36px; color: #405d33; }
.location-offers strong { font-size: 13px; font-weight: 500; color: #718b5c; }
.location-filter-note { color: #96a685 !important; }
.location-picker-filters .search { border-radius: 7px; background: white; }
.location-picker-filters .search input, .location-picker-filters select { font-size: 13px; min-height: 44px; }
.location-picker-meta { color: #9aab88; font-size: 10px; border-color: #e2e9d7; }
#location-count { color: #70885a; }
.location-options { background: #fcfdf8; padding: 12px 20px; }
.location-option { border: 1px solid #dee8d2; border-radius: 10px; background: white; padding: 16px; margin-bottom: 11px; box-shadow: 0 2px 6px #2a492408; }
.location-option:last-child { border-bottom: 1px solid #dee8d2; }
.location-city-label { background: #eef4e4; color: #8a9e70; border-radius: 4px; font-size: 9px; }
.location-distance { color: #9bad87; font-size: 10px; }
.location-option h3 { font-size: 15px; font-weight: 500; color: #48623b; margin: 10px 0 14px; }
.location-choice-actions { gap: 10px; }
.location-choice .details-button { font-size: 11px; color: #889c72; }
.location-choice .add-button { font-size: 12px; min-height: 44px; }
.location-picker-footer { padding: 14px 24px; background: #f5f8ee; border-color: #e2e9d5; }
.location-picker-footer > span { color: #92a17e; font-size: 11px; }
.location-picker-footer .secondary { border-color: #d2dfc3; min-height: 44px; color: #6e8657; }
.place-attributions { background: #fafcf3; color: #98a68a; padding: 7px 25px; font-size: 9px; }
.google-popup { color: #49613b; }

@media (hover: hover) and (pointer: fine) {
  .primary:hover:not(:disabled) { background: #255846; border-color: #255846; box-shadow: 0 3px 9px #173f351a; }
  .secondary:hover, .add-button:hover { background: #edf3e3; border-color: #aabc96; }
  .add-button.selected:hover { background: #255846; color: white; }
  .offer-card:hover { border-color: #c2d0b4; box-shadow: 0 4px 12px #243e3210; }
  .remove-stop:hover { background: #f5eee5; color: #a27854; }
  .setup-guide button:hover:not([aria-current="step"]) { background: #edf1e5; color: #5e7b49; }
}
@media (min-width: 1650px) {
  .workspace { grid-template-columns: 360px minmax(340px, 1fr) 400px; }
  .intro { padding-inline: 32px; }
  .offer-title { font-size: 23px; }
  .offer-card { padding: 18px; }
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .workspace { grid-template-columns: 320px minmax(290px, 1fr) 360px; padding-inline: 16px; gap: 11px; }
  .intro { padding-inline: 22px; gap: 16px; }
  .intro .hero-title { font-size: 36px; max-width: 540px; }
  .hero-title em { white-space: normal; }
  .setup-guide { flex-basis: 365px; padding: 5px; gap: 3px; }
  .setup-guide button { font-size: 11px; gap: 6px; padding: 8px 6px; }
  .area-finder { margin-inline: 16px; }
  .area-finder > p { flex-basis: 205px; font-size: 10px; }
  .offer-card { padding: 13px; }
  .offer-title { font-size: 20px; }
}
@media (max-width: 1100px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .masthead { height: 66px; padding-inline: 22px; }
  .day-stamp { display: none; }
  .intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 21px 22px 17px; gap: 17px; }
  .intro .hero-title { font-size: 38px; line-height: 1.05; max-width: 580px; }
  .hero-title em { white-space: normal; }
  .intro p { font-size: 12px; }
  .setup-guide { grid-template-columns: 1fr; gap: 2px; padding: 4px; width: 157px; }
  .setup-guide button { min-height: 35px; font-size: 11px; padding: 5px 8px; flex-direction: row; }
  .step-number { width: 22px; height: 22px; flex-basis: 22px; }
  .area-finder { margin: 0 18px 18px; padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
  .area-finder form { max-width: none; flex-basis: 400px; }
  .area-finder > p { flex-basis: 100%; max-width: none; border: 0; padding: 0; margin: 0; font-size: 11px; }
  .workspace { display: block; height: auto; min-height: 0; padding: 0 18px 20px; }
  .workspace > .panel, .workspace > .map-panel { display: none; }
  .workspace > .mobile-active { display: flex; }
  .workspace > .map-panel.mobile-active { display: block; }
  .explore, .planner { min-height: calc(100dvh - 100px); border: 1px solid #dce1d4; }
  .map-panel { height: max(420px, calc(100dvh - 110px)); }
  .panel-heading h2 { font-size: 31px; }
  .panel-heading, .planner > .panel-heading { min-height: 72px; padding: 17px 22px 13px; }
  .explore-instruction { font-size: 12px; margin: 0 22px 16px; }
  .explore-body, .planner-body { flex: 1 0 auto; overflow: visible; }
  .explore .search input, .location-picker-filters .search input, .location-picker-filters select { font-size: 16px; min-height: 46px; }
  .search { margin-inline: 20px; }
  .offer-filters { margin-inline: 21px; }
  .offer-filters > summary { min-height: 46px; font-size: 13px; }
  .offer-filters .browse-modes button, .offer-filters .city-tabs button, .offer-filters .filter-row select { min-height: 44px; font-size: 14px; }
  .research-note { padding-inline: 23px; font-size: 10px; }
  .offer-list { padding: 0 16px 16px; }
  .offer-card { padding: 20px; margin-bottom: 14px; border-radius: 12px; }
  .brand-name { font-size: 14px; }
  .brand-category { font-size: 11px; }
  .business-mark { width: 43px; height: 43px; flex-basis: 43px; }
  .city-name { font-size: 10px; max-width: 95px; }
  .offer-title, .offer-value { font-size: 26px; line-height: 1.2; margin: 18px 0 13px; }
  .badge { font-size: 9px; padding: 5px 7px; }
  .offer-address { font-size: 12px; }
  .location-hint { font-size: 11px; }
  .offer-bottom { padding-top: 14px; }
  .offer-bottom button, .add-button { min-height: 44px; font-size: 12px; padding: 10px 13px; }
  .business-selection, .business-selection span { font-size: 11px; }
  .explore-footer { font-size: 10px; padding: 13px; }
  .trip-stop { padding: 20px 16px; gap: 12px; }
  .trip-stop strong { font-size: 16px; padding-right: 30px; }
  .trip-stop p { font-size: 12px; }
  .trip-stop .trip-offer { font-size: 13px; }
  .trip-stop .stop-hours { font-size: 11px; }
  .stop-time { font-size: 14px; }
  .stop-time .ui-icon, .stop-travel .ui-icon { width: 15px; height: 15px; }
  .trip-stop .warning { font-size: 11px; }
  .remove-stop { width: 44px; height: 44px; top: 9px; right: 5px; }
  .dwell-label { font-size: 11px; }
  .dwell-label input { min-height: 44px; font-size: 16px; width: 60px; }
  .dwell-label .details-button { min-height: 44px; font-size: 12px; }
  .time-preferences summary { min-height: 44px; font-size: 11px; }
  .time-preferences input, .schedule-controls input, .schedule-controls select { min-height: 44px; font-size: 16px; }
  .time-preferences small { font-size: 10px; }
  .start-actions button { min-height: 44px; font-size: 14px; }
  .start-actions .center-start { min-height: 44px; font-size: 12px; }
  .trip-settings > summary strong { font-size: 14px; }
  .trip-settings > summary small { font-size: 11px; }
  .route-summary { padding: 16px 12px; margin: 16px; }
  .route-summary b { font-size: 25px; }
  .route-summary small { font-size: 8px; }
  .route-status, .route-status:not(:empty) { font-size: 12px; padding: 13px 22px; }
  .route-status:empty { padding: 0; }
  .planner-footer .primary { min-height: 48px; font-size: 14px; }
  .planner-footer .text-button { min-height: 44px; font-size: 12px; }
  .planner-footer small { font-size: 10px; }
  .plan-next { background: #f3f7ecf5; border-color: #b8cba7; box-shadow: 0 10px 38px #183c2d2b; border-radius: 12px; left: 24px; right: 24px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); padding: 13px 16px; backdrop-filter: blur(14px); }
  .plan-next strong, .planner-next strong { font-size: 14px; }
  .plan-next p, .planner-next p { font-size: 12px; }
  .plan-next .primary, .planner-next .primary { min-height: 44px; font-size: 14px; }
  .guided-empty { margin: 3px 2px 16px; padding: 25px; }
  .guided-empty h3 { max-width: 500px; font-size: 35px; }
  .guided-empty p { font-size: 13px; }
  .guided-empty .primary, .trip-empty .primary { min-height: 46px; font-size: 14px; }
  .trip-empty h3 { font-size: 33px; }
  .trip-empty p { font-size: 13px; }
  .mobile-nav { height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 5px 16px calc(5px + env(safe-area-inset-bottom, 0px)); border-color: #d8e2cf; background: #fffff7f5; box-shadow: 0 -4px 24px #243e3212; backdrop-filter: blur(16px); gap: 8px; }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 52px; padding: 5px 10px; color: #8b9b7c; border-radius: 10px; }
  .mobile-nav button .ui-icon { width: 22px; height: 22px; stroke-width: 1.7; }
  .mobile-nav .nav-label { background: transparent; color: inherit; margin: 0; padding: 0; border-radius: 0; font-size: 11px; font-weight: 500; line-height: 1.2; }
  .mobile-nav button[aria-current="page"] { background: #edf3e5; color: #4d6e3e; }
  #mobile-count { display: inline-block; min-width: 16px; padding: 2px 4px; border-radius: 10px; background: #e0e9d5; color: #688653; font-size: 9px; font-weight: 600; margin-left: 3px; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .map-button { min-height: 44px; }
  .map-button span { font-size: 12px; }
  .map-prompt { font-size: 13px; }
  .map-prompt-actions button { font-size: 14px; }
  .map-guide p { font-size: 13px; }
  .map-guide .primary { font-size: 14px; }
  .site-footer { padding: 0 23px 20px; font-size: 10px; line-height: 1.7; }
  .site-footer button { font-size: 10px; min-height: 40px; }
  #location-dialog { border-radius: 16px; }
  #location-dialog .close { top: 7px; right: 9px; margin-right: 9px; background: #f3f7eafb; }
  .location-options { padding: 14px 16px; }
  .location-option { padding: 18px; }
  .location-city-label, .location-distance { font-size: 11px; }
  .location-option h3 { font-size: 16px; }
  .location-choice .details-button, .location-choice .add-button { font-size: 12px; }
  .location-picker-footer > span { font-size: 11px; }
  .location-picker-footer .secondary { font-size: 14px; }
}
@media (max-width: 600px) {
  .masthead { height: 61px; padding: 0 17px; gap: 10px; }
  .brand { gap: 8px; font-size: 16px; letter-spacing: 1px; }
  .brand i { font-size: 21px; }
  .brand small { font-size: 5.5px; letter-spacing: 1.5px; }
  .brand-emblem, .brand-emblem svg { width: 33px; height: 33px; }
  #how-it-works { font-size: 11px; padding-left: 8px; min-height: 44px; }
  #about, .day-stamp { display: none; }
  .intro { display: flex; flex-direction: column; align-items: stretch; padding: 19px 19px 14px; gap: 14px; }
  .intro-copy { flex: none; }
  .intro .eyebrow { font-size: 7px; letter-spacing: 1.3px; }
  .intro .hero-title { font-size: 37px; line-height: .99; letter-spacing: -1.1px; max-width: 410px; margin: 9px 0 8px; }
  .hero-title em { display: inline; white-space: nowrap; }
  .intro p { font-size: 12px; line-height: 1.5; }
  .hero-contours { width: 440px; height: 180px; right: -100px; top: 25px; opacity: .07; }
  .setup-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; flex: none; padding: 4px; gap: 3px; border-radius: 9px; }
  .setup-guide button { flex-direction: row; gap: 6px; align-items: center; min-height: 43px; font-size: 10px; padding: 7px 6px; line-height: 1.35; border-radius: 6px; }
  .step-number { width: 20px; height: 20px; flex-basis: 20px; font-size: 9px; }
  .area-finder { margin: 0 14px 16px; padding: 12px; border-radius: 10px; gap: 10px; }
  .area-finder form { width: 100%; flex: 1 0 100%; }
  .area-finder label { font-size: 10px; letter-spacing: .3px; margin-bottom: 7px; }
  .area-input { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 5px; padding: 4px 4px 4px 8px; }
  .area-finder .area-input input { font-size: 16px; min-height: 40px; padding: 4px 0; }
  .area-input .primary { min-height: 40px; font-size: 11px; padding: 8px 10px; white-space: nowrap; }
  .area-input > .ui-icon { width: 16px; height: 16px; }
  .area-radius { display: flex; gap: 7px; align-items: center; width: auto; flex: 1 1 auto; }
  .area-radius label { margin: 0; font-size: 10px; white-space: nowrap; }
  .area-radius select { width: 95px; min-height: 40px; height: 40px; font-size: 14px; padding-inline: 8px; }
  .area-finder > .secondary { width: auto; min-height: 40px; height: 40px; padding: 9px 11px; font-size: 12px; }
  .area-finder > p { font-size: 10px; line-height: 1.5; flex-basis: 100%; }
  .workspace { padding: 0 12px 17px; }
  .panel { border-radius: 12px; }
  .panel-heading, .planner > .panel-heading { min-height: 65px; padding: 16px 18px 12px; }
  .panel-heading h2 { font-size: 29px; }
  .explore-instruction { margin-inline: 18px; font-size: 11px; }
  .search { margin-inline: 15px; }
  .offer-filters { margin-inline: 16px; }
  .research-note { padding: 10px 17px; font-size: 9px; }
  .offer-list { padding: 0 10px 12px; }
  .offer-card { padding: 16px; margin-bottom: 11px; }
  .offer-identity { gap: 9px; }
  .business-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-name { font-size: 13px; }
  .brand-category { font-size: 10px; }
  .city-name { max-width: 72px; font-size: 9px; }
  .offer-title, .offer-value { font-size: 24px; letter-spacing: -.65px; }
  .offer-address { font-size: 11px; }
  .offer-bottom { gap: 9px; }
  .location-hint { font-size: 10px; }
  .offer-bottom button { font-size: 11px; padding-inline: 10px; }
  .guided-empty { padding: 22px 19px; }
  .guided-empty h3 { font-size: 31px; }
  .guided-empty p { font-size: 12px; }
  .guided-empty .primary { font-size: 13px; }
  .trip-list { padding-inline: 12px; }
  .trip-stop { padding: 18px 12px; gap: 10px; }
  .trip-stop strong { font-size: 15px; }
  .trip-stop p { font-size: 11px; }
  .trip-stop .trip-offer { font-size: 12px; }
  .route-summary { margin: 13px 12px 0; padding: 15px 5px; }
  .route-summary b { font-size: 21px; }
  .route-summary small { font-size: 7px; letter-spacing: .25px; }
  .route-status, .route-status:not(:empty) { font-size: 11px; padding-inline: 18px; }
  .route-status:empty { padding: 0; }
  .time-preferences input { width: 100%; max-width: none; }
  .plan-next { left: 18px; right: 18px; padding: 12px 14px; border-radius: 10px; }
  .plan-next strong { font-size: 13px; }
  .plan-next p { font-size: 11px; }
  .plan-next .primary { font-size: 13px; }
  .planner-next { padding: 16px 18px; }
  .map-top { left: 10px; top: 11px; right: 71px; }
  .map-title { font-size: 6px; padding: 8px; gap: 6px; min-height: 34px; }
  .map-title .ui-icon { width: 13px; height: 13px; }
  .map-button { padding: 8px; }
  .map-button span { font-size: 10px; }
  .map-bottom { left: 10px; right: 61px; }
  .legend { font-size: 7px; gap: 8px; padding: 8px; }
  .map-prompt { left: 10px; right: 63px; padding: 12px; font-size: 12px; }
  .map-prompt-actions button { font-size: 13px; }
  .map-guide { width: calc(100% - 32px); padding: 20px; }
  .map-guide strong { font-size: 30px; }
  .map-guide p { font-size: 12px; }
  .mobile-nav { padding-inline: 12px; gap: 7px; }
  .connection-note { margin-inline: 14px; padding: 11px 13px; font-size: 11px; }
  .site-footer { padding-inline: 18px; font-size: 9px; }
  .location-picker-header { padding-inline: 18px; }
  .location-picker-header h2 { font-size: 34px; }
  .location-offers strong { font-size: 12px; }
  .location-picker-filters .search input, .location-picker-filters select { font-size: 16px; }
  .location-options { padding: 12px; }
  .location-option { padding: 15px; }
  .location-option h3 { font-size: 15px; }
  .location-choice-actions { align-items: flex-start; }
  .location-choice .details-button { font-size: 10px; }
  .location-choice .add-button { font-size: 11px; padding-inline: 10px; white-space: nowrap; }
  .location-picker-footer { padding: 12px 16px; }
}
@media (max-width: 360px) {
  .masthead { padding-inline: 13px; }
  .brand { font-size: 14px; gap: 6px; }
  .brand i { font-size: 18px; }
  .brand small { font-size: 5px; letter-spacing: 1px; }
  .brand-emblem, .brand-emblem svg { width: 30px; height: 30px; }
  #how-it-works { font-size: 10px; }
  .intro { padding-inline: 16px; }
  .intro .hero-title { font-size: 33px; }
  .setup-guide button { font-size: 9px; padding-inline: 4px; gap: 4px; }
  .area-input { grid-template-columns: minmax(0, 1fr) auto; padding-left: 8px; }
  .area-input > .ui-icon { display: none; }
  .area-radius { gap: 4px; }
  .area-radius select { width: 85px; }
  .area-finder > .secondary { font-size: 11px; padding-inline: 8px; }
  .offer-title, .offer-value { font-size: 22px; }
  .offer-card { padding: 14px; }
  .route-summary b { font-size: 18px; }
  .route-summary small { font-size: 6.5px; }
  .plan-next { left: 14px; right: 14px; }
}
@media (max-width: 1100px) and (max-height: 500px) {
  .map-panel { height: 420px; }
  .plan-next { padding: 8px 12px; }
  .plan-next strong { font-size: 12px; }
  .plan-next .primary { min-height: 44px; font-size: 12px; }
  .mobile-nav { height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-block: 3px calc(3px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav button { min-height: 50px; gap: 3px; }
  .mobile-nav button .ui-icon { width: 19px; height: 19px; }
  .mobile-nav .nav-label { font-size: 10px; }
  .plan-next { bottom: calc(71px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  button, .offer-filters > summary .ui-icon { transition: none; }
}
/* Author display rules must never override the application's hidden states. */
.plan-next[hidden], .planner-next[hidden], .map-guide[hidden], .map-center-target[hidden],
.map-prompt[hidden], .route-summary[hidden], .city-tabs[hidden], .connection-note[hidden] { display: none !important; }

/* Reading the offers and itinerary takes priority over fitting more cards. */
.brand-name { font-size: 14px; }
.brand-category { font-size: 11px; color: #68795c; }
.city-name { font-size: 10px; color: #6e7b63; }
.explore-instruction { font-size: 12px; color: #68745f; }
.explore .search input { font-size: 14px; }
.offer-address { font-size: 12px; color: #68775e; }
.location-hint { font-size: 11px; color: #6d7b62; }
.badge { font-size: 10px; color: #527043; }
.badge.window { color: #6f755d; }
.badge.standing { color: #526e7c; }
.badge.unconfirmed { color: #8b662f; }
.offer-bottom button { min-height: 44px; font-size: 13px; }
.business-selection, .business-selection span { font-size: 11px; color: #587149; }
.research-note, .research-note .inline-link { font-size: 10px; color: #6f7b64; }
.offer-filters > summary { font-size: 13px; }
.offer-filters .browse-modes button, .offer-filters .city-tabs button { font-size: 12px; min-height: 44px; }
.offer-filters .filter-row select { font-size: 14px; min-height: 44px; }
.guided-empty p, .trip-empty p, .map-guide p { font-size: 13px; color: #6d7f5c; }
.guided-empty .primary, .trip-empty .primary, .map-guide .primary { font-size: 14px; }
.guide-kicker { font-size: 10px; color: #657c4f; }
.explore-footer { font-size: 10px; color: #768267; }
.trip-stop strong { font-size: 16px; }
.trip-stop p { font-size: 13px; color: #68795a; }
.trip-stop .trip-offer { font-size: 13px; color: #526f40; }
.trip-stop .stop-hours { font-size: 12px; color: #6d7d60; }
.stop-time { font-size: 14px; }
.stop-time .ui-icon, .stop-travel .ui-icon { width: 15px; height: 15px; }
.route-status, .route-status:not(:empty) { font-size: 12px; color: #6a795c; }
.route-status.error { color: #865e2c; }
.route-summary small { font-size: 9px; color: #6a7958; }
.trip-settings > summary strong { font-size: 14px; }
.trip-settings > summary small { font-size: 11px; color: #6e7f5d; }
.start-card strong { font-size: 13px; }
.start-card small { font-size: 11px; color: #6d7e5b; }
.start-actions button { font-size: 13px; min-height: 44px; }
.start-actions .center-start { font-size: 12px; min-height: 44px; }
.schedule-controls input, .schedule-controls select { font-size: 14px; min-height: 44px; }
.dwell-label { font-size: 11px; color: #6d7c5c; }
.dwell-label input { font-size: 14px; min-height: 40px; }
.dwell-label .details-button { min-height: 44px; font-size: 12px; color: #627a50; }
.time-preferences summary { min-height: 44px; font-size: 12px; color: #697f55; }
.time-preferences small { font-size: 11px; color: #6e805e; }
.time-preferences input { font-size: 14px; min-height: 42px; }
.trip-stop .warning { font-size: 12px; color: #956b34 !important; }
.planner-footer .primary { font-size: 14px; }
.planner-footer .text-button { font-size: 12px; min-height: 38px; color: #6a7d56; }
.planner-footer small { font-size: 10px; color: #778368; }
.plan-next strong, .planner-next strong { font-size: 14px; }
.plan-next p, .planner-next p { font-size: 12px; color: #627951; }
.plan-next .primary, .planner-next .primary { font-size: 14px; min-height: 44px; }
.map-title { font-size: 9px; color: #627653; }
.map-button span { font-size: 12px; }
.legend { font-size: 10px; color: #67785a; }
.site-footer, .site-footer button { font-size: 10px; color: #727c65; }
.location-offers strong { font-size: 14px; color: #5f794b; }
.location-filter-note { font-size: 12px !important; color: #718462 !important; }
.location-picker-meta, .location-distance, .location-city-label { font-size: 11px; color: #6c825a; }
.location-choice .details-button { font-size: 12px; color: #698151; }
.location-choice .add-button { font-size: 13px; }
.location-picker-footer > span { font-size: 11px; color: #6e805c; }
.place-attributions { font-size: 10px; color: #768566; }
dialog p, dialog li { color: #647851; }
.masthead button:focus-visible, .masthead a:focus-visible { outline: 3px solid #f4d899; outline-offset: 4px; }
@media (max-width: 1100px) {
  .explore .search input, .offer-filters .filter-row select, .schedule-controls input,
  .schedule-controls select, .dwell-label input, .time-preferences input { font-size: 16px; min-height: 44px; }
  .map-title { font-size: 8px; }
  .legend { font-size: 9px; }
}
.count:empty { display: none; }
body:has(#guide-area[aria-current="step"]) #reset-filters { display: none; }
@media (max-width: 600px) {
  .intro { padding: 14px 18px 12px; gap: 10px; }
  .intro .eyebrow, .intro > .intro-copy > p { display: none; }
  .intro .hero-title { font-size: 32px; line-height: 1.04; margin: 0; }
  .setup-guide { padding: 3px; gap: 3px; }
  .setup-guide button { min-height: 44px; font-size: 12px; padding: 6px; gap: 5px; }
  #how-it-works { font-size: 12px; }
  .area-finder { padding: 10px 11px; margin-bottom: 12px; }
  .area-finder label { margin-bottom: 5px; }
  .area-finder .area-input input, .area-input .primary,
  .area-finder > .secondary, .area-radius select { min-height: 44px; height: auto; }
  .area-input .primary { font-size: 12px; }
  .area-radius label { margin-bottom: 0; }
}
.offer-filters .research-note { padding: 12px 0 0; margin-top: 10px; border-top: 1px solid var(--line); }
.offer-bottom .add-button:not(.selected), .location-choice .add-button:not(.selected) {
  color: #fffdf5; background: var(--forest); border-color: var(--forest);
  min-height: 44px; box-shadow: 0 2px 4px #173f3510;
}
.offer-bottom .add-button.selected, .location-choice .add-button.selected { background: #edf3e6; color: #4c6b3d; border-color: #a8bc97; }
.picker-source { font-size: 11px; font-weight: 500; color: #567444; text-underline-offset: 3px; white-space: nowrap; }
.location-offers > div { gap: 5px 8px; }
.location-offers strong { font-size: 13px; line-height: 1.4; }
.location-filter-note { margin-block: 9px !important; line-height: 1.5 !important; }
.location-picker-meta { padding-block: 10px; line-height: 1.5; }
.location-option { padding: 14px; }
.location-option h3 { margin: 8px 0 10px; line-height: 1.45; }
@media (min-width: 1281px) {
  .workspace { grid-template-columns: 360px minmax(300px, 1fr) 380px; }
}
@media (min-width: 1650px) {
  .workspace { grid-template-columns: 370px minmax(340px, 1fr) 400px; }
}
@media (min-width: 1101px) {
  .explore > .explore-instruction { display: none; }
  .explore > .panel-heading { padding-bottom: 15px; }
  .plan-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 14px; }
  .plan-next strong { font-size: 12px; line-height: 1.4; margin: 0; }
  .plan-next .primary { width: auto; font-size: 12px; min-height: 44px; padding: 9px 11px; }
}
@media (max-width: 1100px) {
  .location-picker-header { padding-top: 19px; }
  .location-picker-header h2 { clear: none; padding-right: 0; margin: 7px 43px 12px 0; font-size: 31px; }
  .location-options { padding: 10px 13px; }
  .location-option { padding: 13px; margin-bottom: 9px; }
  .location-option h3 { font-size: 14px; margin: 7px 0 10px; }
  .location-picker-footer { padding-block: 10px; }
  .location-picker-footer > span { font-size: 10px; }
}
@media (max-width: 600px) {
  .guided-empty { padding: 19px 18px; }
  .guided-empty .empty-pin { width: 34px; height: 34px; margin-bottom: 10px; }
  .guided-empty h3 { font-size: 28px; margin: 8px 0 9px; }
  .guided-empty p { font-size: 12px; line-height: 1.6; margin-bottom: 15px; }
}

/* Keep key decisions legible against the quiet paper and sage surfaces. */
.remove-stop, dialog .close { color: #53634d; }
.area-input:focus-within, .search:focus-within {
  border-color: #8b682b;
  outline: 3px solid #8b682b;
  outline-offset: 3px;
  box-shadow: none;
}
.search input::placeholder { color: #65746a; }
.trip-stop .stop-hours, .dwell-label, .time-preferences summary,
.time-preferences small, .guided-empty p, .trip-empty p, .map-guide p,
.location-picker-meta, .location-distance, .location-city-label,
.location-choice .details-button, .location-picker-footer > span,
.place-attributions, #location-count, .explore-footer,
.planner-footer small, .site-footer, .site-footer button,
.trip-settings > summary small, .start-card small, .city-name,
.route-summary small, .plan-next p, .planner-next p, .badge.window { color: #53634d; }
.location-filter-note { color: #53634d !important; }
.planner .saved-label { font-size: 10px; color: #d0dec9; }

@media (min-width: 1101px) {
  .intro { padding: 14px 28px 12px; }
  .area-finder { padding: 8px 16px; margin-bottom: 12px; }
  .workspace { height: calc(100dvh - 300px); }
  .offer-title, .offer-value { margin: 12px 0 8px; }
  .offer-meta { margin: 6px 0; }
  .offer-address { margin: 6px 0; }
  .offer-bottom { margin-top: 8px; padding-top: 8px; }
}
@media (max-width: 1100px) {
  .mobile-nav button { color: #53634d; }
  .planner.mobile-active:has(#navigate:not(:disabled)) { padding-bottom: 75px; }
  .planner.mobile-active #navigate:not(:disabled) {
    position: fixed;
    z-index: 2010;
    left: 18px;
    right: 18px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 36px);
    max-width: none;
    min-height: 48px;
    margin: 0;
    border-radius: 9px;
    box-shadow: 0 0 0 6px var(--paper), 0 7px 24px #173f3529;
  }
}
@media (max-width: 1100px) and (max-height: 500px) {
  .planner.mobile-active #navigate:not(:disabled) {
    bottom: calc(71px + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
  }
}

/* VetDayOut identity */
.brand .vetdayout-logo{display:block;width:250px;height:auto;max-width:100%}
@media(max-width:700px){.brand .vetdayout-logo{width:203px}}
@media(max-width:380px){.brand .vetdayout-logo{width:178px}}