/* A clear first action, followed by a small next step at each stage. */
body:has(#guide-area[aria-current="step"]) .explore .search,
body:has(#guide-area[aria-current="step"]) .explore .offer-filters,
body:has(#guide-area[aria-current="step"]) .explore > .explore-instruction { display: none; }
.how-steps strong { color: var(--ink); }
.intro { gap: 24px; padding-block: 22px; }
.intro-copy { min-width: 0; flex: 1 1 500px; }
.intro h1 { font-size: clamp(30px, 2.8vw, 42px); max-width: 720px; }
.intro p { font-size: 14px; line-height: 1.6; max-width: 600px; }
.header-right { gap: 16px; }
#how-it-works, #about { min-height: 44px; font-size: 16px; padding-left: 16px; }
.setup-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 0 1 430px; }
.setup-guide button {
  display: flex; align-items: center; gap: 9px; min-height: 58px;
  border: 1px solid var(--line); border-radius: 7px; padding: 10px;
  text-align: left; font-size: 16px; line-height: 1.3; background: #fffefb;
}
.step-number {
  display: grid; place-items: center; width: 26px; height: 26px;
  flex: 0 0 26px; border-radius: 50%; background: #edf0e9;
  color: var(--muted); font-size: 13px; font-weight: 700;
}
.setup-guide button[aria-current="step"] { border-color: var(--forest); background: var(--mint); }
.setup-guide button[aria-current="step"] .step-number { background: var(--forest); color: white; }
.setup-guide button.complete .step-number { background: #dcebdd; color: var(--forest); }
.setup-guide button.complete[aria-current="step"] .step-number { background: var(--forest); color: white; }
.area-finder form { width: 470px; }
.area-finder label { font-size: 14px; }
.area-finder .area-input input, .area-input .primary, .area-radius select,
.area-finder > .secondary { min-height: 44px; height: auto; font-size: 16px; }
.area-finder > p { font-size: 13px; }
.explore > .panel-heading { padding-bottom: 7px; }
.explore-instruction { margin: 0 20px 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.offer-filters { flex: 0 0 auto; margin: 8px 20px 0; border-bottom: 1px solid var(--line); }
.offer-filters > summary { min-height: 44px; padding: 11px 0; font-size: 16px; cursor: pointer; }
.offer-filters[open] { padding-bottom: 14px; }
.offer-filters .browse-modes { margin: 3px 0 12px; flex-wrap: wrap; }
.offer-filters .browse-modes button { flex: 1 1 125px; min-height: 44px; font-size: 16px; padding: 9px 8px; }
.offer-filters .city-tabs { flex-wrap: wrap; margin: 8px 0 12px; }
.offer-filters .city-tabs button { min-height: 44px; font-size: 16px; }
.offer-filters .filter-row { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.offer-filters .filter-row select { min-height: 44px; font-size: 16px; }
.explore .search input { min-height: 44px; font-size: 16px; }
.explore-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.explore-body > .offer-list { flex: none; min-height: 0; overflow: visible; }
.guided-empty {
  margin: 8px 7px 18px; padding: 24px 18px; border: 1px solid #c8d9ca;
  border-radius: 8px; background: #f1f5ed;
}
.guide-kicker { color: var(--forest); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }
.guided-empty h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 28px; line-height: 1.12; font-weight: 400; margin: 12px 0; }
.guided-empty p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.guided-empty .primary, .trip-empty .primary { min-height: 44px; font-size: 16px; }
.how-steps { padding-left: 22px; }
.how-steps li { padding-left: 4px; font-size: 14px; line-height: 1.7; }
.how-steps li + li { margin-top: 12px; }
#info-dialog [data-guide] { min-height: 44px; font-size: 16px; }
.plan-next, .planner-next { padding: 15px 20px; background: var(--mint); border-block: 1px solid #ccded1; }
.plan-next { flex: 0 0 auto; }
.plan-next[hidden], .planner-next[hidden], .map-guide[hidden] { display: none !important; }
.plan-next strong, .planner-next strong { display: block; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.plan-next p, .planner-next p { margin: 5px 0 12px; font-size: 13px; line-height: 1.6; color: #4c6758; }
.plan-next .primary, .planner-next .primary { min-height: 44px; font-size: 16px; }
@media (min-width: 1101px) {
  .plan-next { padding: 12px 18px; }
  .plan-next strong { font-size: 14px; margin-bottom: 9px; }
  #plan-next-copy { display: none; }
}
.start-question { margin: 0 0 10px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.start-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.start-actions button { width: 100%; min-height: 44px; font-size: 16px; }
.start-actions .start-primary { background: var(--forest); color: white; }
.start-actions .center-start { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.schedule-controls input, .schedule-controls select, .time-preferences input, .dwell-label input { min-height: 44px; font-size: 16px; }
.trip-empty .primary { max-width: 260px; margin: 0 auto; }
.map-guide {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 40px); max-width: 320px; z-index: 10;
  padding: 20px; background: #fffefbf5; border: 1px solid #c8d9ca;
  border-radius: 8px; box-shadow: var(--shadow);
}
.map-guide strong { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 28px; line-height: 1.2; font-weight: 400; }
.map-guide p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 10px 0 16px; }
.map-guide .primary { min-height: 44px; font-size: 16px; }
.map-prompt { font-size: 14px; }
.map-center-target { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; color: var(--forest); text-align: center; }
.map-center-target[hidden] { display: none; }
.map-center-target span { display: grid; place-items: center; width: 36px; height: 36px; margin: auto; border: 2px solid var(--forest); border-radius: 50%; background: #fffefbe6; font-size: 28px; box-shadow: 0 2px 8px #0002; }
.map-center-target small { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 6px; border-radius: 4px; background: #fffefb; font-size: 11px; }
.map-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.map-prompt-actions button { min-height: 44px; padding: 8px 10px; font-size: 16px; border-radius: 4px; }
#confirm-map-start { background: #fffefb; color: var(--forest); text-decoration: none; }
#cancel-pick { border: 1px solid #ffffff6b; }

@media (max-width: 1250px) {
  .intro { flex-wrap: wrap; gap: 14px; }
  .intro-copy { flex-basis: 100%; }
  .setup-guide { flex: 1 1 100%; max-width: 660px; }
  .setup-guide button { min-height: 48px; }
  .header-right .date-label { display: none; }
}
@media (max-width: 1100px) {
  .explore-body { flex: 1 0 auto; overflow: visible; }
  .plan-next {
    position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 16px; right: 16px; z-index: 1500; border: 1px solid #c5d8c9;
    border-radius: 8px; padding: 12px 16px; box-shadow: 0 6px 22px #193b2826;
  }
  .explore.mobile-active:has(.plan-next:not([hidden])) { padding-bottom: 190px; }
  .plan-next p { margin-bottom: 8px; }
  .offer-filters .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-filters .filter-row label { min-width: 0; }
  .mobile-nav button { font-size: 16px; }
}
@media (max-width: 1100px) and (max-height: 500px) {
  .plan-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; }
  .plan-next strong { font-size: 14px; }
  .plan-next .primary { width: auto; }
  #plan-next-copy { display: none; }
  .explore.mobile-active:has(.plan-next:not([hidden])) { padding-bottom: 110px; }
}
@media (max-width: 600px) {
  #about { display: none; }
  .header-right { gap: 0; }
  #how-it-works { padding-left: 10px; white-space: nowrap; }
  .intro { padding: 17px 18px; gap: 13px; }
  .intro h1 { max-width: 430px; margin-top: 8px; font-size: 32px; }
  .intro p { max-width: none; font-size: 14px; }
  .setup-guide { gap: 6px; }
  .setup-guide button { flex-direction: column; gap: 6px; align-items: flex-start; padding: 9px 8px; font-size: 16px; }
  .step-number { width: 23px; height: 23px; flex-basis: 23px; }
  .area-finder form { width: 100%; }
  .area-input { display: grid; grid-template-columns: minmax(0, 1fr); }
  .area-input input { width: 100%; }
  .area-input input { flex-basis: 150px; }
  .area-input .primary { flex: 1 0 auto; }
  .explore-instruction { font-size: 14px; }
  .offer-filters .filter-row { grid-template-columns: minmax(0, 1fr); }
  .plan-next { left: 10px; right: 10px; }
  .plan-next strong { font-size: 16px; }
  .map-prompt { left: 12px; right: 64px; top: 120px; }
  .map-prompt-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}