/* Keep the itinerary readable even when the browser window is short. */
.workspace {
  grid-template-columns: 320px minmax(300px, 1fr) 380px;
  height: calc(100dvh - 335px);
  min-height: 640px;
}
.workspace > * { min-width: 0; }
.planner { display: flex; flex-direction: column; overflow: hidden; }
.planner > .panel-heading, .planner-footer { flex: 0 0 auto; }
.planner > .panel-heading { padding: 18px 20px 14px; }
.planner-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.trip-list { flex: none; min-height: 0; max-height: none; overflow: visible; padding: 0 20px; }
.trip-settings { border-bottom: 1px solid var(--line); }
.trip-settings > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 20px; min-height: 64px; cursor: pointer;
  list-style: none; background: #f7f8f3;
}
.trip-settings > summary::-webkit-details-marker { display: none; }
.trip-settings > summary strong { display: block; font-size: 14px; }
.trip-settings > summary small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.settings-chevron { font-size: 24px; flex: 0 0 auto; }
.trip-settings[open] .settings-chevron { transform: rotate(180deg); }
.planner-settings { padding: 12px 20px 16px; border: 0; }
.start-card strong { font-size: 13px; line-height: 1.4; }
.start-card small { font-size: 11px; line-height: 1.5; }
.start-actions { flex-wrap: wrap; }
.start-actions button { min-height: 44px; padding: 8px; font-size: 12px; }
.schedule-controls label, .roundtrip { font-size: 12px; }
.schedule-controls input, .schedule-controls select { min-height: 44px; font-size: 14px; }
.roundtrip { min-height: 36px; }
.roundtrip input { width: 18px; height: 18px; }
.route-summary { padding: 16px 20px; gap: 12px; }
.route-summary b { font-size: 20px; }
.route-summary small { font-size: 9px; line-height: 1.5; display: block; margin-top: 4px; }
.route-status { padding-inline: 20px; font-size: 12px; line-height: 1.65; }
.route-status:not(:empty) { padding: 12px 20px; }
.trip-stop { gap: 12px; padding: 20px 0; }
.trip-stop-main, .pending-stop-main { min-width: 0; flex: 1; }
.trip-stop strong { display: block; padding-right: 35px; font-size: 16px; line-height: 1.4; }
.trip-stop p { font-size: 13px; line-height: 1.6; margin: 7px 0; overflow-wrap: anywhere; }
.stop-number { flex-shrink: 0; }
.stop-time { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.remove-stop { top: 10px; right: -9px; width: 44px; height: 44px; font-size: 24px; }
.dwell-label { flex-wrap: wrap; gap: 7px; font-size: 12px; line-height: 1.5; margin-top: 12px; }
.dwell-label input { width: 62px; min-height: 40px; padding: 7px; font-size: 14px; }
.dwell-label .details-button { min-height: 44px; padding: 8px; font-size: 12px; margin-left: auto; }
.time-preferences { font-size: 12px; }
.time-preferences summary { min-height: 44px; padding-block: 12px; line-height: 1.6; }
.time-preferences small { font-size: 11px; line-height: 1.5; }
.time-preferences > div { flex-wrap: wrap; }
.time-preferences input { width: 110px; min-height: 44px; font-size: 14px; }
.trip-stop .warning { font-size: 12px; }
.planner-footer { padding: 12px 20px; }
.planner-footer .primary { min-height: 46px; font-size: 13px; }
.planner-footer > div { margin: 3px 0; }
.planner-footer .text-button { min-height: 38px; font-size: 12px; }
.planner-footer small { display: block; font-size: 10px; line-height: 1.6; }
.trip-empty p { font-size: 13px; }

/* The native zoom controls own the right edge of the map. */
.map-top { right: 76px; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; }
.map-title { min-height: 44px; pointer-events: none; }
.map-button { min-height: 44px; padding: 10px 12px; }
.map-button span { display: inline; font-size: 12px; }
.map-prompt { top: 120px; right: 76px; font-size: 13px; line-height: 1.5; }
.map-prompt button { min-height: 44px; }
.leaflet-control-zoom { margin-top: 16px !important; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
summary:focus-visible { outline: 3px solid #bf9549; outline-offset: -3px; }
.close { min-width: 44px; min-height: 44px; }

@media (min-width: 1650px) {
  .workspace { grid-template-columns: 360px minmax(300px, 1fr) 400px; }
}
@media (min-width: 1101px) and (max-width: 1250px) {
  .workspace { grid-template-columns: 285px minmax(300px, 1fr) 350px; }
}

/* Tablets and phones use direct views instead of three narrow columns. */
@media (max-width: 1100px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .workspace { display: block; height: auto; min-height: 0; }
  .workspace > .panel, .workspace > .map-panel { display: none; }
  .workspace > .mobile-active { display: flex; }
  .workspace > .map-panel.mobile-active { display: block; }
  .map-panel { height: max(420px, calc(100dvh - 100px)); }
  .explore { height: auto; min-height: calc(100dvh - 80px); border-right: 0; }
  .offer-list { overflow: visible; flex: none; }
  .planner { min-height: calc(100dvh - 80px); border-left: 0; }
  .planner-body { flex: 1 0 auto; overflow: visible; }
  .planner-footer { position: static; }
  .planner-footer .primary, .planner-footer > div { max-width: none; }
  .trip-list { min-height: 0; max-height: none; }
  .planner .panel-heading { grid-column: auto; }
  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
    background: #fffefa; border-top: 1px solid #d8e2d9;
    box-shadow: 0 -3px 18px #234a3510; z-index: 2000;
    justify-content: space-around; align-items: stretch; gap: 5px;
  }
  .mobile-nav button { flex: 1; min-height: 44px; padding: 8px 6px; border-radius: 6px; font-size: 13px; }
  .mobile-nav button[aria-current="page"] { background: var(--mint); color: var(--forest); font-weight: 700; }
  .mobile-nav span { background: #e4eddf; padding: 2px 6px; border-radius: 30px; margin-left: 3px; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .map-panel, .explore, .planner { scroll-margin-top: 0; }
  .header-right .date-label { display: none; }
  .area { display: none; }
  .area-finder { padding-inline: 22px; }
  .site-footer { flex-wrap: wrap; }
  .offer-card { padding: 20px 12px; }
  .offer-address, .city-name, .catalog-note, .location-hint { font-size: 12px; }
  .offer-bottom button, .browse-modes button, .city-tabs button { min-height: 44px; font-size: 12px; }
  .offer-title { font-size: 26px; }
  .brand-name { font-size: 16px; }
  .search input, .filter-row select, .schedule-controls input, .schedule-controls select,
  .time-preferences input, .dwell-label input, .location-picker-filters select { font-size: 16px; min-height: 44px; }
  .research-note { font-size: 11px; line-height: 1.5; }
  .research-note button { min-height: 36px; }
  .filter-row, .browse-modes, .search { margin-inline: 20px; }
  .filter-row { flex-wrap: wrap; }
  .filter-row label { min-width: 130px; }
  .city-tabs { flex-wrap: wrap; gap: 4px; margin-inline: 20px; }
  .location-picker-filters .search input { font-size: 16px; }
  #location-dialog { max-height: 90dvh; overflow-y: auto; }
  #location-dialog[open] { display: block; }
  #location-dialog .close { position: sticky; top: 0; float: right; right: 8px; margin-right: 8px; background: var(--paper); z-index: 2; width: 44px; height: 44px; }
  .location-picker-header h2 { padding-right: 24px; }
  .location-options { overflow: visible; min-height: 0; max-height: none; }
  .location-picker-footer { position: sticky; bottom: 0; background: var(--paper); }
  .location-choice-actions button { min-height: 44px; font-size: 12px; }
  .location-choice .details-button, .location-choice .add-button { font-size: 12px; }
  .location-picker-footer .secondary { flex: 0 0 auto; min-width: 70px; min-height: 44px; }
  .location-picker-filters { clear: both; }
  dialog p, dialog li { font-size: 14px; }
  dialog a { font-size: 13px; }
}
@media (max-width: 600px) {
  .masthead { gap: 12px; }
  .brand { font-size: 17px; gap: 8px; white-space: nowrap; }
  .brand small { font-size: 6px; }
  .quiet { padding: 8px 0 8px 10px; min-height: 44px; font-size: 10px; }
  .intro { padding: 20px 18px; }
  h1 { font-size: 34px; }
  .area-finder { padding-inline: 18px; }
  .map-top { left: 12px; top: 12px; gap: 6px; }
  .map-title { font-size: 7px; padding: 8px; min-height: 36px; }
  .map-button { min-height: 44px; }
  .legend { font-size: 9px; gap: 8px; padding: 8px; }
  .map-bottom { left: 12px; right: 60px; }
  .location-picker-header { padding: 18px 16px 0; }
  .location-picker-header h2 { font-size: 28px; clear: both; }
  .location-options { padding-inline: 16px; }
  .location-picker-footer { padding: 10px 16px; gap: 10px; }
  .location-picker-footer > span { max-width: none; }
  .time-preferences > div { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .time-preferences input { width: 100%; max-width: none; }
}
@media (max-width: 360px) {
  .brand { font-size: 15px; gap: 6px; }
  .brandmark { width: 28px; height: 28px; font-size: 22px; }
  .masthead { padding-inline: 12px; gap: 6px; }
  .route-summary { padding-inline: 16px; gap: 7px; }
  .route-summary b { font-size: 18px; }
  .start-actions button { flex-basis: 100%; }
}