/* Phone-only travel views. The existing desktop workspace stays intact. */
.mobile-route-cards, .mobile-route-caption, .mobile-trip-heading,
.mobile-place-select, .mobile-detail-action, .mobile-sheet-handle { display:none; }
@media (max-width:680px) {
  :root { --mobile-nav-height:92px; }
  html:has(body:not(.trip-home-active)) { scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  body:not(.trip-home-active) .app-shell { padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  #mobileNavigation:not([hidden]) {
    position:fixed; top:auto; left:50%; bottom:calc(12px + env(safe-area-inset-bottom));
    display:flex; width:min(400px,calc(100% - 28px)); height:70px; padding:6px; gap:6px; margin:0;
    border:1px solid #dfebf7; border-radius:26px; transform:translateX(-50%);
    background:rgba(255,255,255,.96); box-shadow:0 6px 24px rgba(40,91,141,.14),0 1px 3px rgba(40,91,141,.05);
    z-index:40;
  }
  #mobileNavigation .mobile-nav-tab { display:flex; flex-direction:column; gap:3px; border-radius:20px; min-height:56px; padding:6px 8px; color:#687e96; }
  #mobileNavigation .mobile-nav-tab.active { background:#e7f3ff; color:var(--blue-strong); }
  #mobileNavigation .mobile-nav-symbol { display:grid; width:22px; height:22px; flex:0 0 22px; border-radius:0; background:transparent; color:inherit; transform:none; }
  #mobileNavigation .mobile-nav-symbol svg { display:block; width:22px; height:22px; }
  #mobileNavigation small { display:none; }
  #mobileNavigation .mobile-nav-copy { text-align:center; }
  #mobileNavigation .mobile-nav-copy strong { font-size:12px; line-height:16px; font-weight:500; }
  #mobileNavigation .mobile-nav-copy strong::after, #mobileNavigation .mobile-nav-tab.active::after { content:none; }
  #mobileNavigation .selection-slider { display:none; }
  #plannerWorkspace { display:block; width:100%; margin:0; padding:12px 14px 24px; min-height:calc(100svh - var(--mobile-topbar-height,64px) - var(--mobile-nav-height) - env(safe-area-inset-bottom)); }
  #plannerWorkspace > section { display:none !important; }
  #plannerWorkspace > section.mobile-active { display:block !important; position:relative; width:100%; max-height:none; height:auto; overflow:visible; }
  #plannerWorkspace > .mobile-page-leaving { display:block !important; }
  #plannerWorkspace > #recommendPanel { padding:0; background:transparent; box-shadow:none; border-radius:0; }
  #recommendPanel .recommend-controls { position:static; padding:0; background:transparent; backdrop-filter:none; box-shadow:none; }
  #recommendPanel .panel-toolbar { padding:0; border:0; }
  #recommendPanel .recommend-heading { padding:0 2px; margin:0 0 8px; }
  #recommendPanel .recommend-heading h2 { font-size:20px; }
  #recommendPanel .tabs { background:transparent; gap:8px; padding:0; margin:0 0 8px; }
  #recommendPanel .tab { flex:0 0 auto; width:auto; min-width:52px; padding:0 14px; min-height:40px; border-radius:999px; font-size:13px; }
  #recommendPanel .tab.active { background:var(--blue); color:white; box-shadow:none; }
  #recommendPanel .place-search { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 10px; border:0; }
  #placeSearchInput { width:100%; min-width:0; flex:1 1 160px; min-height:44px; background:white; border:0; border-radius:14px; font-size:14px; }
  #placeSearchKind { flex:0 0 70px; min-width:0; width:70px; border:0; background:white; border-radius:12px; }
  #placeSearchForm > button { min-height:44px; border:0; background:white; border-radius:12px; font-size:12px; }
  #recommendPanel .recommend-actions { border:0; padding:0 0 10px; gap:8px; }
  #recommendPanel .recommend-actions button { min-height:40px; font-size:12px; }
  #recommendPanel .select-toggle { font-size:12px; }
  #itineraryPanel { padding:0; border-radius:24px; }
  #itineraryPanel > .panel-toolbar { padding:16px; border:0; background:transparent; }
  #itineraryPanel > .panel-toolbar > div:first-child { display:none; }
  #itineraryPanel .route-actions { width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  #itineraryPanel .route-actions button { min-height:44px; min-width:40px; }
  .mobile-trip-heading { display:block; padding:24px; background:var(--blue); color:white; border-radius:22px 22px 0 0; }
  .mobile-trip-heading > span { color:#dfebff; font-size:12px; }
  .mobile-trip-heading h2 { color:white; font-size:24px; line-height:1.4; margin:8px 0; }
  .mobile-trip-heading p { color:#dfebff; font-size:13px; line-height:1.6; margin:0; }
  #itineraryDayTabs { position:relative; padding:12px 16px; border:0; background:#fff; }
  #itineraryPanel > #mapPreview { position:relative; top:auto; height:160px; margin:0 16px 16px; border:0; border-radius:16px; box-shadow:none; }
  #itineraryPanel .timeline { padding:4px 16px 24px; max-height:none; overflow:visible; }
  #itineraryPanel .timeline-item { grid-template-columns:42px 14px minmax(0,1fr); gap:7px; margin:0; padding:16px 0; }
  #itineraryPanel .timeline-item + .timeline-item { border-top:1px dashed #dce5f0; }
  #itineraryPanel .timeline-time { color:#71829a; font-size:12px; line-height:1.8; }
  #itineraryPanel .timeline-title { font-size:16px; line-height:1.6; }
  #itineraryPanel .timeline-body { padding:0; background:transparent; }
  #itineraryPanel .timeline-note { line-height:1.7; color:#697b92; }
  #itineraryPanel .timeline-line::before { background:#deebfc; }
  #itineraryPanel .timeline-dot { width:10px; height:10px; background:var(--blue); }
  #itineraryPanel .transport-options { gap:5px; flex-wrap:wrap; }
  #itineraryPanel .transport-pill { font-size:11px; padding:4px 7px; }
  #itineraryPanel .segment-nav-link { flex:none; min-width:44px; min-height:44px; }
  #itineraryPanel .scenic-internal-route { border:0; background:#f5f8fd; border-radius:12px; }
  #placeDetailDialog { width:100%; max-width:100%; max-height:90dvh; margin:auto 0 0; inset:auto 0 0; padding:0 0 env(safe-area-inset-bottom); border:0; border-radius:28px 28px 0 0; overflow:auto; overscroll-behavior:contain; }
  #placeDetailDialog::backdrop { background:rgba(25,44,72,.28); backdrop-filter:blur(2px); }
  #placeDetailDialog .mobile-sheet-handle { display:block; position:sticky; top:0; z-index:4; background:white; height:28px; touch-action:none; }
  #placeDetailDialog .mobile-sheet-handle button { display:grid; place-items:center; width:100%; height:28px; min-height:28px; padding:0; border:0; background:transparent; }
  #placeDetailDialog .mobile-sheet-handle span { width:36px; height:4px; background:#c7d3e1; border-radius:4px; }
  #placeDetailDialog .restaurant-detail-close { top:36px; }
  #placeDetailDialog .restaurant-detail-close button { width:44px; height:44px; min-height:44px; }
  #placeDetailDialog .place-detail-gallery { height:220px; }
  #placeDetailDialog .restaurant-detail-header { padding:22px 20px 12px; }
  #placeDetailDialog .restaurant-detail-title-row h2 { font-size:25px; }
  #placeDetailDialog .restaurant-detail-section { padding:16px 20px; }
  #placeDetailDialog .restaurant-detail-facts { margin:0 20px; border-radius:16px; }
  #placeDetailDialog .mobile-detail-action { display:block; position:sticky; bottom:0; padding:12px 20px; background:rgba(255,255,255,.97); }
  #placeDetailDialog .mobile-detail-action button { width:100%; min-height:48px; border-radius:999px; }
  #placeDetailDialog[open] { animation:mobile-sheet-enter 220ms ease-out; }
  @keyframes mobile-sheet-enter { from { transform:translateY(32px); opacity:0; } to { transform:translateY(0); opacity:1; } }
  @media (prefers-reduced-motion:reduce) { #placeDetailDialog[open] { animation:none; } }
}
@media (max-width:680px) {
  #plannerWorkspace > #recommendPanel.mobile-active { display:flex !important; flex-direction:column; }
  #recommendPanel .recommend-controls, #recommendPanel .panel-toolbar { display:contents; }
  #recommendPanel .recommend-heading { display:flex; }
  #recommendPanel .place-search { order:0; border-radius:14px; background:white; padding:0 8px; margin-bottom:10px; }
  #recommendPanel .place-search input { padding-inline:8px; }
  #recommendPanel .tabs { order:1; }
  #recommendPanel .recommend-actions { order:5; display:flex; flex-wrap:wrap; align-items:center; margin-top:2px; }
  #recommendPanel .city-auto-plan-status { order:6; }
  #recommendPanel .manual-basket-bar { margin-left:auto; }
  #recommendPanel .manual-basket-button { width:44px; height:44px; min-width:44px; }
  #itineraryPanel > #mapPreview { max-width:calc(100% - 32px); }
}
/* Softer blue and lighter button typography throughout the phone website. */
@media (max-width:680px) {
  :root { --blue:#216cf5; --blue-strong:#205fc6; }
  body button, #plannerWorkspace button, .account-dialog button { font-weight:400; font-size:14px; letter-spacing:0; }
  body.trip-home-active .trip-home-hero-copy { box-shadow:none; }
  body.trip-home-active .trip-home-hero-copy h1 { font-weight:600; }
  #plannerWorkspace #buildTrip, #plannerWorkspace #autoPlanCity { background:var(--blue); box-shadow:none; font-size:14px; font-weight:500; }
  #plannerWorkspace .mobile-page-intro, .mobile-trip-heading { background:#e8f1ff; color:#284766; }
  #plannerWorkspace .mobile-page-intro h2, .mobile-trip-heading h2 { color:#284766; font-weight:600; }
  #plannerWorkspace .mobile-page-intro p, #plannerWorkspace .mobile-page-intro > span,
  .mobile-trip-heading p, .mobile-trip-heading > span { color:#5d7894; }
  #recommendPanel .tab.active { background:#dcecff; color:#205fc6; }
  #recommendPanel .manual-basket-button { background:#e8f1ff; color:#205fc6; box-shadow:none; }
  #shareTrip { background:#e8f1ff; color:#205fc6; font-size:13px; font-weight:400; box-shadow:none; }
  .account-dialog:not(.is-authenticated) .dialog-head { background:#e8f1ff; }
  .account-dialog:not(.is-authenticated) .dialog-head h2 { color:#284766; }
  .account-dialog:not(.is-authenticated) .dialog-head p { color:#5d7894; }
}

@media (max-width:680px) {
  body, body.trip-home-active .trip-home { background:#f7faff; }
  body.trip-home-active .trip-home-hero { background:radial-gradient(ellipse at 50% 38%,#e1edff 0%,#f3f8ff 48%,#f7faff 74%); }
  body.trip-home-active .trip-home-hero-copy { background:rgba(255,255,255,.76); border:1px solid #fff; border-radius:24px; }
  .topbar, body.trip-home-active .topbar { background:#f7faff; }
  #plannerWorkspace { background:linear-gradient(180deg,#f7faff,#eef5ff 420px,#f7faff); }
  #plannerWorkspace .mobile-page-intro, .mobile-trip-heading, .account-dialog:not(.is-authenticated) .dialog-head { background:linear-gradient(130deg,#f0f6ff,#dceaff); }
  #placeDetailDialog .mobile-detail-action button { background:var(--blue); color:white; font-size:14px; font-weight:500; box-shadow:none; }
  body.trip-home-active .trip-home-card-actions button { font-size:14px; font-weight:400; box-shadow:none; }
}

@media (max-width:680px) {
  #recommendations { display:flex; flex-direction:column; gap:12px; margin:0; padding:4px 0 20px; width:100%; height:auto; max-height:none; overflow:visible; order:6; }
  #recommendations .place-detail { clear:both; display:block; font-size:13px; line-height:1.7; margin:8px 0; }
  #recommendations :is(.small-text,.link-row,.tag-row) { display:none; }
  #recommendations .mobile-place-select { display:block; clear:both; width:100%; min-height:44px; margin-top:12px; border:0; border-radius:999px; background:#eff5ff; color:#205fc6; font-size:13px; font-weight:400; }
  #recommendations .mobile-place-select[aria-pressed="true"] { background:#dfecff; }
  #recommendPanel .recommend-actions { order:2; }
  #recommendPanel .city-auto-plan-status { order:3; }
  #itineraryPanel .route-actions { flex-wrap:nowrap; overflow-x:auto; border:0; padding:0; background:transparent; border-radius:0; gap:6px; scrollbar-width:none; }
  #itineraryPanel .route-actions button { flex:0 0 44px; width:44px; padding:0; }
  #itineraryPanel .route-actions .hotel-shortcut-button span { display:none; }
  #itineraryPanel > #mapPreview { height:clamp(190px,28svh,280px); }
  #mobileRouteCaption:not([hidden]) { display:block; padding:0 20px; margin:0 0 10px; color:#617791; font-size:12px; }
  #mobileRouteCards:not([hidden]) { display:flex; gap:14px; padding:0 16px 20px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:16px; overscroll-behavior-x:contain; scrollbar-width:none; }
  #mobileRouteCards .mobile-route-card { display:flex; flex-direction:column; gap:8px; text-align:left; flex:0 0 82%; min-width:0; padding:12px; border:1px solid #edf2fa; border-radius:22px; background:white; scroll-snap-align:start; color:#263d59; box-shadow:0 5px 16px rgba(62,113,183,.04); }
  #mobileRouteCards .mobile-route-card.active { border-color:#b3d0ff; }
  #mobileRouteCards .mobile-route-photo { width:100%; height:140px; border-radius:14px; object-fit:cover; }
  #mobileRouteCards strong { font-size:17px; font-weight:500; line-height:1.5; }
  #mobileRouteCards span, #mobileRouteCards small { font-size:12px; line-height:1.6; color:#60758e; }
  #mobileRouteCards .mobile-route-time { color:#216cf5; }
  #mobileRouteCards small { margin-top:auto; color:#205fc6; }
  #placeDetailDialog .restaurant-detail-footer { position:static; }
  #placeDetailDialog .mobile-sheet-handle button { width:60px; min-height:28px; margin:auto; }
  #placeDetailDialog .restaurant-detail-section { margin:0 20px; padding:16px 0; }
  #placeDetailDialog .place-detail-tags span { color:#41638e; background:#edf4ff; }
}
@media (max-width:680px) {
  #recommendations :is(.place-detail,.mobile-place-select,.scenic-child-context,.scheduled-place-note) { grid-column:1 / -1; }
}

/* Search stays within reach; optional controls expand in place. */
.mobile-explore-count { display:none; }
@media (max-width:680px) {
  #recommendPanel .place-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:0; background:transparent; }
  #recommendPanel #placeSearchInput { grid-column:1; grid-row:1; width:100%; padding:12px 14px; border:1px solid #e8eff8; border-radius:16px; font-size:13px; }
  #placeSearchForm #mobileFilterToggle { display:flex; align-items:center; justify-content:center; gap:6px; grid-column:2; grid-row:1; min-width:44px; width:44px; padding:0; border:1px solid #d6e1ed; border-radius:50%; color:#506783; font-size:13px; }
  #mobileFilterToggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
  #placeSearchForm #mobileFilterToggle:is([aria-expanded="true"],.has-filter) { color:#216cf5; background:#e8f1ff; border-color:#d1e3ff; }
  #recommendPanel:not(.mobile-filters-open) :is(#recommendFilters,#placeSearchKind,#placeSearchForm > button[type="submit"],#autoPlanCity) { display:none; }
  #recommendPanel.mobile-filters-open #placeSearchKind { display:block; grid-column:1; grid-row:2; width:100%; min-height:44px; font-size:13px; }
  #recommendPanel.mobile-filters-open #placeSearchForm > button[type="submit"] { display:block; grid-column:1 / -1; grid-row:3; }
  #recommendPanel.mobile-filters-open #recommendFilters { display:flex; flex-wrap:wrap; overflow:visible; padding:4px 0 8px; }
  #recommendFilters .selection-slider { display:none; }
  #recommendPanel #recommendFilters .tab.active { background:#dcecff; color:#205fc6; }
  #recommendPanel #recommendActions { padding:4px 0 12px; }
  #recommendPanel #mobileExploreCount { display:none; }
  #recommendations .place-detail { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; color:#718097; }
  #recommendations .mobile-place-select { margin-top:2px; }
}

/* Each stop owns its schedule, travel choices and navigation links. */
#itineraryPanel :is(.segment-nav-link.provider-nav-link,.route-actions .provider-button) {
  border:0; background:transparent; box-shadow:none; border-radius:0;
}
#itineraryPanel :is(.segment-nav-link.provider-nav-link,.route-actions .provider-button):hover { background:#eff5ff; }
@media (max-width:680px) {
  #mobileRouteCards { align-items:flex-start; }
  #mobileRouteCards .mobile-route-card { gap:12px; cursor:default; }
  #mobileRouteCards .mobile-route-photo { width:100%; height:140px; }
  #mobileRouteCards .timeline-item { display:block; padding:0; border:0; width:100%; }
  #mobileRouteCards .timeline-line { display:none; }
  #mobileRouteCards .timeline-time { display:flex; gap:6px; margin:0 0 10px; color:#2878ed; font-size:12px; }
  #mobileRouteCards .timeline-time { display:block; }
  #mobileRouteCards .timeline-time br { display:inline; }
  #mobileRouteCards .timeline-time br::after { content:" — "; }
  #mobileRouteCards .timeline-body { width:100%; }
  #mobileRouteCards .timeline-title { font-size:17px; line-height:1.5; font-weight:500; color:#294562; }
  #mobileRouteCards .timeline-order { display:none; }
  #mobileRouteCards .timeline-note { font-size:12px; line-height:1.8; margin:8px 0; color:#61768e; }
  #mobileRouteCards .transport-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #mobileRouteCards .transport-pill { font-size:11px; padding:5px 8px; text-align:center; }
  #mobileRouteCards .segment-navigation { margin:12px 0; }
  #mobileRouteCards .segment-navigation > span { font-size:12px; line-height:1.7; }
  #mobileRouteCards .provider-logo { width:26px; height:26px; border-radius:0; }
  #mobileRouteCards .timeline-item-actions button { min-width:40px; min-height:40px; border:0; background:transparent; box-shadow:none; }
  #mobileRouteCards .mobile-route-detail { align-self:flex-start; min-height:44px; padding:0 4px; border:0; background:transparent; color:#2878ed; font-size:13px; font-weight:400; }
  #itineraryPanel #timeline:empty { display:none; }
  #mobileRouteCards .mobile-route-card:focus-visible { outline:2px solid #397dde; outline-offset:-2px; }
}

/* Keep toolbar icons centered and visually consistent. */
#itineraryPanel .route-actions > button {
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; box-shadow:none; color:#55718e;
}
#itineraryPanel .route-actions > button:hover:not(:disabled) {
  background:#eff5ff; box-shadow:none; color:#2878ed;
}
#itineraryPanel .route-actions > button[aria-pressed="true"] {
  background:#e8f1ff; box-shadow:none; color:#2878ed;
}
#itineraryPanel .route-actions .hotel-shortcut-button img { filter:none; }
@media (max-width:680px) {
  #itineraryPanel .route-actions { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0; }
  #itineraryPanel .route-actions > button {
    flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px;
    padding:0; margin:0; border-radius:12px; gap:0;
  }
  #itineraryPanel .route-actions > button > :is(img,svg) {
    display:block; flex:none; width:22px; height:22px; margin:0; object-fit:contain;
  }
  #itineraryPanel .route-actions > .provider-button > img { width:26px; height:26px; }
  #itineraryPanel .route-actions > button > span { display:none; }
}
@media (max-width:360px) {
  #itineraryPanel > .panel-toolbar { padding-inline:4px; }
  #itineraryPanel .route-actions { gap:0; }
}

/* Phone editing stays visible and supports tapping as well as dragging. */
@media (max-width:680px) {
  #plannerWorkspace > #itineraryPanel.mobile-active { min-height:0; }
  #itineraryPanel .route-actions { flex-wrap:wrap; justify-content:space-between; overflow:visible; gap:0; }
  #itineraryPanel .route-actions > #toggleRouteEdit {
    order:-1; flex:0 0 auto; width:auto; gap:6px; padding:0 10px;
    color:var(--blue-strong); background:#eaf4ff;
  }
  #itineraryPanel .route-actions > #toggleRouteEdit > span { display:inline; font-size:12px; }
  #itineraryPanel .route-actions > #toggleRouteEdit > svg { width:18px; height:18px; }
  #itineraryPanel.route-editing > .panel-toolbar { position:sticky; top:var(--mobile-topbar-height,64px); z-index:12; background:#fff; }
  #itineraryPanel .timeline-edit-controls { flex-wrap:wrap; gap:6px; }
  #itineraryPanel .timeline-edit-controls :is(button,select) { min-height:44px; }
  #itineraryPanel .timeline-edit-controls button { min-width:40px; }
  #itineraryPanel .timeline-day-select { flex:1 1 100%; width:100%; }
}

@media(max-width:340px) {
  #itineraryPanel .route-actions > #toggleRouteEdit { flex-basis:100%; justify-content:center; margin-bottom:6px; }
}

/* Phone polish: comfortable controls and a compact, readable place sheet. */
@media (max-width: 680px) {
  .workspace .place-search { gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
  .workspace .place-search input { min-height: 44px; font-size: 16px; border-radius: 12px; padding: 10px 12px; }
  .workspace .place-search button { min-height: 44px; padding-inline: 14px; border-radius: 12px; font-size: 14px; }
  .workspace .tabs { gap: 8px; scroll-padding-inline: 8px; }
  .workspace .tab { min-height: 44px; font-size: 13px; }
  .workspace .recommend-actions button { min-height: 44px; }
  .workspace .explore-day-bar select { font-size: 16px; }
  #mobileRouteCards .mobile-route-card { border-radius: 18px; }
  #itineraryPanel .timeline-note { font-size: 13px; }

  #placeDetailDialog { max-height: 92dvh; border-radius: 24px 24px 0 0; padding-bottom: 0; scroll-padding-block: 52px 84px; }
  #placeDetailDialog .mobile-sheet-handle { height: 48px; border-bottom: 1px solid #edf2f7; }
  #placeDetailDialog .mobile-sheet-handle button { width: 72px; height: 44px; min-height: 44px; }
  #placeDetailDialog .restaurant-detail-close { top: 2px; z-index: 5; padding-inline: 12px; margin-top: -46px; margin-bottom: 46px; }
  #placeDetailDialog .restaurant-detail-close button { border: 0; border-radius: 50%; box-shadow: none; background: #f3f6fa; }
  #placeDetailDialog .place-detail-gallery { height: clamp(160px, 25svh, 210px); }
  #placeDetailDialog .restaurant-detail-header { padding: 18px 16px 16px; }
  #placeDetailDialog .restaurant-detail-title-row h2 { font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
  #placeDetailDialog .restaurant-detail-title-row p { font-size: 13px; }
  #placeDetailDialog .restaurant-detail-rating strong { font-size: 26px; }
  #placeDetailDialog .restaurant-detail-rating.unavailable strong { font-size: 15px; }
  #placeDetailDialog .restaurant-detail-facts { margin: 0 16px 16px; border-radius: 12px; }
  #placeDetailDialog .restaurant-detail-facts > div { padding: 12px; }
  #placeDetailDialog .restaurant-detail-facts span { font-size: 12px; }
  #placeDetailDialog .restaurant-detail-section { margin: 0 16px; padding: 16px 0; }
  #placeDetailDialog .restaurant-detail-section h3 { font-size: 16px; margin-bottom: 8px; }
  #placeDetailDialog .restaurant-detail-section p { font-size: 14px; line-height: 1.75; }
  #placeDetailDialog .place-detail-footer { padding: 16px; gap: 14px; background: #fff; }
  #placeDetailDialog .place-platforms { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  #placeDetailDialog .place-platform { min-width: 0; min-height: 68px; padding: 8px 0; border-radius: 12px; background: #f6f9fd; font-size: 12px; color: #52647a; }
  #placeDetailDialog .place-platform:active { background: #e8f2ff; }
  #placeDetailDialog .place-ticket-note { font-size: 12px; color: #607086; }
  #placeDetailDialog .place-ticket-note button { border-radius: 10px; padding: 8px 10px; }
  #placeDetailDialog #placeDetailContent .explore-detail-action,
  #placeDetailDialog .mobile-detail-action { position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e8eef5; }
  #placeDetailDialog #placeDetailContent .explore-detail-action button,
  #placeDetailDialog .mobile-detail-action button { min-height: 48px; border-radius: 14px; font-size: 16px; font-weight: 500; }
}

/* Phone composition: one reading column, compact summaries, details on demand. */
.inspiration-source-link { display:block; width:fit-content; margin:18px 0 0 auto; font-size:12px; color:#526b85; text-underline-offset:3px; }
@media (max-width:680px) {
  :root { --mobile-nav-height:76px; }
  body:not(.trip-home-active) .app-shell { padding-bottom:0; }
  body:not(.trip-home-active) #plannerWorkspace { height:auto; max-height:none; padding:12px 14px 24px; background:#f5f7fa; }
  body:not(.trip-home-active) .site-footer { display:block; position:relative; clear:both; margin:0; padding:20px 18px calc(96px + env(safe-area-inset-bottom)); background:#f5f7fa; }
  .site-footer .footer-legal { font-size:11px; line-height:1.6; }
  #mobileNavigation:not([hidden]) {
    bottom:calc(10px + env(safe-area-inset-bottom)); width:min(400px,calc(100% - 28px));
    height:68px; padding:5px; gap:4px; border:1px solid rgba(255,255,255,.8); border-radius:34px;
    background:rgba(245,249,255,.76);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    backdrop-filter:blur(24px) saturate(165%);
    box-shadow:0 8px 28px rgba(25,50,80,.16),0 2px 6px rgba(25,50,80,.06),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.5);
    isolation:isolate;
  }
  #mobileNavigation::before {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,0) 40%,rgba(255,255,255,.28));
  }
  #mobileNavigation .mobile-nav-tab {
    min-height:56px; border:0; border-radius:28px; color:#435b73; background:transparent;
    transition:background-color .2s ease,color .2s ease,transform .2s ease;
  }
  #mobileNavigation .mobile-nav-tab.active {
    color:#155cb2; background:rgba(195,221,252,.65);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 1px 3px rgba(35,86,146,.09);
  }
  #mobileNavigation .mobile-nav-tab:active { transform:scale(.96); }
  #mobileNavigation .mobile-nav-tab:focus-visible { outline:2px solid #226cbb; outline-offset:-3px; }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    #mobileNavigation:not([hidden]) { background:#f7faff; }
  }
  @media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
    #mobileNavigation:not([hidden]) { background:#f7faff; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:#b6c8dc; }
    #mobileNavigation::before { display:none; }
    #mobileNavigation .mobile-nav-tab.active { background:#dcecff; }
  }
  @media (prefers-reduced-motion:reduce) {
    #mobileNavigation .mobile-nav-tab { transition:none; }
    #mobileNavigation .mobile-nav-tab:active { transform:none; }
  }
  .app-shell .topbar { min-height:60px; padding:8px 14px; gap:8px; }
  .topbar .top-account-avatar { width:32px; height:32px; aspect-ratio:1; flex:none; overflow:hidden; border-radius:50%; }
  .topbar .top-account-avatar img { width:100%; height:100%; object-fit:cover; }
  #plannerWorkspace > .controls-panel.mobile-active { padding:16px; border-radius:16px; margin:0; }
  #plannerPanel > .planner-heading { display:flex; align-items:center; gap:8px; }
  #plannerPanel.mobile-ready > .mobile-page-intro { display:none; }
  .controls-panel .day-tabs { gap:0; margin-top:12px; }
  .controls-panel .day-tab { min-height:60px; padding:8px 90px 8px 8px; border:0; border-bottom:1px solid #e8edf2; border-radius:0; grid-template-columns:32px 1fr; gap:10px; }
  .controls-panel .day-tab.active { background:#e9f2ff; border-radius:10px; }
  .controls-panel .day-number { width:28px; height:28px; font-size:13px; }
  .controls-panel .day-name strong { font-size:15px; }
  .controls-panel .day-name span { font-size:12px; }
  .controls-panel :is(.day-drag-handle,.remove-day) { min-width:44px; width:44px; height:44px; min-height:44px; }
  .controls-panel .day-drag-handle { right:44px; }
  .controls-panel .remove-day { right:0; }
  .controls-panel .add-day { min-height:44px; border-radius:10px; }
  #recommendPanel .explore-day-bar { padding:0; margin:2px 0 10px; border:0; background:transparent; border-radius:0; }
  #recommendPanel .explore-day-bar p { display:none; }
  #recommendPanel .explore-day-bar select { font-size:14px; background:white; border:1px solid #dfe7ef; }
  #recommendPanel #mobileExploreCount { margin:0 2px 8px; color:#52657a; }
  #recommendations { gap:12px; background:transparent; border-radius:0; padding:0; }
  #recommendations .place-detail { display:none; }
  #recommendations .explore-place-schedule { grid-column:2; width:fit-content; min-height:44px; padding:4px 12px; margin:2px 0 0; border:0; border-radius:8px; font-size:13px; }
  #itineraryPanel { background:transparent; border-radius:0; }
  #itineraryPanel > .panel-toolbar { padding:0 0 10px; }
  #itineraryDayTabs { padding:8px 0 12px; background:transparent; }
  #itineraryPanel > #mapPreview { position:sticky; top:max(60px,var(--mobile-topbar-height,64px)); z-index:15; margin:0 0 12px; max-width:100%; height:160px; border-radius:12px; background:#f5f7fa; }
  #mobileRouteCaption:not([hidden]) { padding:0; margin:14px 0 10px; color:#52657a; }
  #mobileRouteCards:not([hidden]) { display:flex; flex-direction:column; gap:10px; padding:0; overflow:visible; scroll-snap-type:none; height:auto; }
  #mobileRouteCards .mobile-route-card { position:relative; display:block; flex:none; width:100%; padding:14px; border:1px solid #e1e7ee; border-radius:14px; box-shadow:none; }
  #mobileRouteCards .mobile-route-photo { float:right; width:64px; height:64px; margin:0 0 8px 12px; border-radius:10px; }
  #mobileRouteCards .mobile-route-photo.image-unavailable { display:none; }
  #mobileRouteCards .timeline-item, #mobileRouteCards .timeline-body { width:auto; }
  #mobileRouteCards .timeline-time { margin:0 0 4px; font-size:12px; font-variant-numeric:tabular-nums; }
  #mobileRouteCards .timeline-heading-row { min-height:32px; }
  #mobileRouteCards .timeline-title { font-size:17px; line-height:1.5; color:#253b51; }
  #mobileRouteCards .timeline-note { margin:6px 0; color:#52657a; line-height:1.6; }
  #mobileRouteCards .timeline-note:empty { display:none; }
  #mobileRouteCards :is(.mobile-route-transport,.scenic-internal-route,.mobile-route-notes) { clear:both; margin:6px 0 0; padding:0; background:transparent; border:0; border-top:1px solid #edf0f4; border-radius:0; }
  #mobileRouteCards summary { min-height:44px; padding:12px 0; font-size:13px; line-height:20px; color:#48627e; cursor:pointer; }
  #mobileRouteCards .scenic-internal-route summary { flex-wrap:wrap; gap:4px; }
  #mobileRouteCards .transport-options { padding:0 0 10px; }
  #mobileRouteCards .segment-navigation { clear:both; display:flex; align-items:center; justify-content:flex-end; margin:4px 0; }
  #mobileRouteCards .segment-navigation > span { display:none; }
  #mobileRouteCards .segment-navigation > div { display:flex; gap:8px; }
  #mobileRouteCards .mobile-route-detail { display:block; margin-top:4px; padding:0; }
  #mobileRouteCards .timeline-item-actions button { min-width:44px; min-height:44px; }
  body.trip-home-active .trip-home-library { padding:20px 16px; border-radius:0; background:#fff; }
  #accountTripList .library-feature { min-height:200px; border-radius:14px; }
  #accountTripList .library-stats { padding:16px 0; }
  #accountTripList .library-trip-grid { gap:0; }
  #accountTripList .account-trip-row { padding:16px 0; border:0; border-bottom:1px solid #e3eaf1; border-radius:0; }
  #accountTripList .library-trip-thumbnail { width:72px; height:72px; border-radius:10px; }
  #accountTripList .account-trip-copy strong { font-size:15px; line-height:1.5; }
  #accountTripList .account-trip-actions { padding-top:4px; justify-content:flex-end; }
  #accountTripList .account-trip-actions > span { display:none; }
  #accountTripList .account-trip-actions button { min-height:44px; }
}
@media (max-width:680px) {
  #plannerWorkspace > section.mobile-active { top:auto; bottom:auto; margin-bottom:0; }
  #recommendPanel #recommendations .explore-place-schedule { grid-column:2; width:fit-content; padding:4px 12px; margin:2px 0 0; border:0; border-radius:8px; }
  #itineraryPanel .mobile-trip-heading { padding:14px 16px; background:#edf3fb; border-radius:12px; }
  #itineraryPanel .mobile-trip-heading > span { display:none; }
  #itineraryPanel .mobile-trip-heading h2 { margin:0 0 4px; font-size:20px; }
  #itineraryPanel .mobile-trip-heading p { font-size:12px; }
  #itineraryPanel > .panel-toolbar { margin-top:8px; }
}

@media (max-width:680px) {
  /* Keep map and editing controls from competing for the same sticky position. */
  #itineraryPanel.route-editing > .panel-toolbar { position:static; }
  html:has(#itineraryPanel.mobile-active) { scroll-padding-top:calc(max(60px,var(--mobile-topbar-height,64px)) + 172px); }
}