@media (min-width: 1001px), (min-width: 761px) and (min-height: 601px) {
  .backup-section {
    margin: 18px 0 10px;
    border: 1px solid #bae6fd;
    border-radius: 14px;
    background: #f3fbff;
    overflow: hidden;
  }
  .backup-section > summary {
    min-height: 48px;
    padding: 8px 14px;
    color: #075985;
    font-weight: 800;
    cursor: pointer;
  }
  .backup-count {
    display: inline-flex;
    min-width: 30px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: .82rem;
  }
  .backup-section > p { margin: 0 14px 10px; color: #526575; font-size: .84rem; line-height: 1.5; }
  .backup-search-label { display: block; margin: 0 14px 5px; font-size: .82rem; font-weight: 800; }
  #backupSearch {
    width: calc(100% - 28px);
    min-height: 44px;
    margin: 0 14px 10px;
    padding: 0 12px;
    border: 1px solid #9acfe5;
    border-radius: 10px;
    font: inherit;
  }
  .backup-location-list { display: grid; gap: 8px; margin: 0; padding: 0 12px 12px; list-style: none; }
  .backup-location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #d7edf7;
    border-radius: 12px;
    background: #fff;
  }
  .backup-location-main { display: block; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .backup-location-main:hover strong { text-decoration: underline; }
  .backup-location-main:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; border-radius: 6px; }
  .backup-location strong { display: block; font-size: .92rem; line-height: 1.4; }
  .backup-location small { display: block; margin-top: 3px; color: #526575; font-size: .78rem; line-height: 1.4; }
  .backup-location-actions { display: flex; flex-wrap: wrap; gap: 7px; }
  .backup-location-actions .button {
    min-height: 44px;
    padding: 0 12px;
    touch-action: manipulation;
    transition: transform .1s ease, filter .1s ease;
  }
  .backup-location-actions .button:active { transform: scale(.98); filter: brightness(.94); }
  .backup-location-actions .button:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
  .popup-add-today { display: none; }
  .stop-note-badge { display: none; }
}

@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  /* 我的位置 (2026-10-04): blue outline while watching, filled blue while the map follows. */
  .map-fab.is-tracking { color: #2563eb; border-color: #2563eb; }
  .map-fab.is-following { background: #2563eb; color: #fff; }
  .sidebar {
    padding: 12px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /* All five days fit even at 320px (#10 item 1): the columns may shrink below 58px, which only happens under 360px,
     and the label keeps its width because the tab has no side padding and does not wrap. */
  .day-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .day-tabs::-webkit-scrollbar { display: none; }
  .day-tab { min-height: 52px; padding-inline: 0; font-size: .82rem; white-space: nowrap; }
  .day-tab span { font-size: .68rem; }

  .day-summary { margin: 14px 2px 12px; }
  .day-summary h2 { font-size: 1.3rem; }
  .day-summary p { font-size: .9rem; }

  .route-meta { min-height: 44px; font-size: .82rem; }
  .drag-help { margin: 12px 2px 6px; font-size: .86rem; }
  .itinerary-list { gap: 9px; padding-top: 10px; }
  .stop-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 78px;
    padding: 11px 9px;
    border-radius: 16px;
  }
  .stop-index { width: 34px; height: 34px; font-size: .9rem; }
  .stop-main button.stop-name { min-height: 38px; font-size: 1rem; }
  .stop-main p { font-size: .78rem; }
  .stop-edit { min-height: 38px; font-size: .8rem; }
  .stop-actions { align-items: center; gap: 4px; }
  .stop-actions .drag-handle {
    width: 54px;
    height: 56px;
    gap: 1px;
    touch-action: none;
    color: #075985;
    background: #e0f2fe;
    font-size: .69rem;
    font-weight: 800;
  }
  .stop-actions .drag-handle svg { width: 20px; height: 20px; }
  .stop-actions .stop-remove { width: auto; min-width: 44px; height: 48px; padding: 0 6px; font-size: .68rem; }

  .backup-section {
    margin: 18px 0 10px;
    border: 1px solid #bae6fd;
    border-radius: 16px;
    background: #f3fbff;
    overflow: hidden;
  }
  .backup-section > summary {
    min-height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #075985;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
  }
  .backup-section > p { margin: 0 14px 10px; font-size: .82rem; line-height: 1.45; color: #526575; }
  .backup-search-label { display: block; margin: 0 14px 5px; font-size: .8rem; font-weight: 800; }
  #backupSearch {
    width: calc(100% - 28px);
    min-height: 48px;
    margin: 0 14px 10px;
    border: 1px solid #9acfe5;
    border-radius: 12px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
  }
  .backup-location-list { display: grid; gap: 8px; margin: 0; padding: 0 10px 12px; list-style: none; }
  .backup-location {
    display: block;
    padding: 0;
    border: 1px solid #d7edf7;
    border-radius: 13px;
    background: #fff;
  }
  .backup-location-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 0;
    border-radius: 13px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }
  .backup-location-main::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; color: #0369a1; font-size: 1.6rem; line-height: 1; }
  .backup-location-main:active { background: #eef8fd; }
  .backup-location-main:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
  .backup-location strong { grid-column: 1; display: block; font-size: 1rem; line-height: 1.4; }
  .backup-location small { grid-column: 1; display: block; color: #526575; font-size: .8rem; }
  .backup-location-actions { display: none; }
  .backup-count {
    display: inline-flex;
    min-width: 32px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: .85rem;
  }
  .backup-empty { padding: 14px 10px; color: #526575; font-size: .88rem; }
  .trip-note { font-size: .85rem; }

  .leaflet-top.leaflet-left { top: 10px !important; }
  .popup-actions [data-day-select],
  .popup-actions [data-popup-action="add"] { display: none !important; }
  .popup-actions [data-popup-action="edit"], .popup-actions [data-popup-action="backup"],
  .popup-actions [data-popup-action="remove"] { min-height: 44px; }

  .poi-card-body { gap: 11px; }
  .poi-card-body > p { font-size: .9rem; line-height: 1.5; }
  .poi-card-body > label, .poi-preview > label { margin-top: 4px; }
  .poi-card input, .poi-card select { min-height: 50px; font-size: 1rem; }
  .poi-card .poi-link-row input { min-width: 0; }
  .poi-card .poi-link-row button { min-height: 50px; }
  .poi-card .poi-actions { display: grid; grid-template-columns: 1fr; }
  .poi-card #poiAddToDay { display: none; }
  .poi-card #poiSaveBackup {
    width: 100%;
    min-height: 54px;
    border: 0;
    background: #075985;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
  }
  .poi-card #poiSaveBackup::after { content: ""; }
  .poi-card .poi-advanced > summary,
  .poi-card .poi-google-import > summary { min-height: 48px; display: flex; align-items: center; }
  .poi-candidate { min-height: 58px; }
  .poi-edit-card input, .poi-edit-card select, .poi-edit-card textarea { min-height: 50px; font-size: 1rem; }
  .poi-edit-card textarea[name="note"] { min-height: 96px; line-height: 1.5; }
  .poi-edit-card > p { font-size: .9rem; line-height: 1.45; }
  .poi-edit-link-preview { display: grid; gap: 8px; padding: 10px; border: 1px solid #bae6fd; border-radius: 12px; background: #f0f9ff; }
  .poi-edit-link-preview[hidden] { display: none; }
  .poi-edit-link-preview > div { min-width: 0; }
  .poi-edit-link-preview strong { display: block; color: #526575; font-size: .78rem; }
  .poi-edit-link-preview p { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .88rem; }
  .poi-edit-link-preview a { min-height: 48px; display: flex; align-items: center; padding: 0 10px; border-radius: 9px; background: #fff; color: #075985; font-weight: 800; overflow-wrap: anywhere; }
  .poi-edit-more { border: 1px solid #d7edf7; border-radius: 12px; padding: 0 10px; }
  .poi-edit-more > summary { min-height: 50px; display: flex; align-items: center; color: #075985; font-size: .9rem; font-weight: 800; }
  .poi-edit-more-fields { display: grid; gap: 10px; padding: 0 0 12px; }
  .mobile-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mobile-nav button { min-height: 54px; font-size: .78rem; }
  .just-added { outline: 3px solid #0ea5e9; background: #effaff; }
  .is-dragging { opacity: .55; }
  .drag-target-before { border-top: 4px solid #0284c7 !important; }
  .drag-target-after { border-bottom: 4px solid #0284c7 !important; }
}

@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .workspace.plan-view .sidebar { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .workspace.plan-view .planner-scroll-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 20px;
  }
  .workspace.plan-view .planner-scroll-content > * { flex-shrink: 0; }
  /* The sticky day tabs sit flush with the top of the list, and a band in the page colour covers their rounded corners,
     so no stop shows through above them (#7 batch C). */
  .workspace.plan-view .planner-scroll-content > .day-tabs { top: -12px; box-shadow: 0 0 0 8px #feffff; }
  .workspace.plan-view .planner-scroll-content > .day-tabs { order: 0; }
  .workspace.plan-view .planner-scroll-content > .day-summary { order: 1; }
  .workspace.plan-view .planner-scroll-content > .backup-section { order: 7; }
  .workspace.plan-view .planner-scroll-content > .route-meta { order: 3; }
  .workspace.plan-view .planner-scroll-content > .drag-help { order: 4; }
  .workspace.plan-view .planner-scroll-content > .itinerary-list { order: 5; }
  .workspace.plan-view .planner-scroll-content > .trip-note { order: 6; }
}


@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .map-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    left: 8px;
    right: 8px;
    top: 8px;
    max-width: none;
    z-index: 650;
  }
  .map-toolbar .filter-row,
  .map-toolbar .radius-row {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 14px rgba(8,47,73,.18);
    overflow-x: auto;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .map-toolbar .filter-row::-webkit-scrollbar,
  .map-toolbar .radius-row::-webkit-scrollbar { display: none; }
  .map-toolbar .filter-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 9px;
    font-size: .77rem;
    white-space: nowrap;
  }
  .map-toolbar .radius-row { justify-content: flex-start; }
  .map-toolbar .radius-row > span { display: none; }
  .map-toolbar .segmented {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .map-toolbar .segmented::-webkit-scrollbar { display: none; }
  .map-toolbar .segmented button {
    flex: 1 0 auto;
    min-width: 40px;
    min-height: 34px;
    padding: 0 5px;
    font-size: .7rem;
    white-space: nowrap;
  }
  .map-toolbar .switch {
    flex: 0 0 auto;
    gap: 5px;
    padding: 0 4px;
    font-size: .7rem;
    white-space: nowrap;
  }
  .map-toolbar .switch span { width: 32px; height: 19px; }
  .map-toolbar .switch span:after { width: 13px; height: 13px; left: 3px; top: 3px; }
  .map-toolbar .switch input:checked + span:after { transform: translateX(13px); }
  .leaflet-top.leaflet-left { top: 112px !important; left: 9px; }
}

/* Phones: keep map filters out of the way while a Leaflet popup is open. Desktop keeps them usable. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .map-toolbar.popup-open, .map-panel.popup-open .leaflet-control-zoom { visibility: hidden; }
}

#map .leaflet-popup-close-button {
  top: 4px !important;
  right: 4px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e0f2fe;
  color: #082f49 !important;
  font: 30px/1 system-ui, sans-serif !important;
  text-decoration: none;
  touch-action: manipulation;
}

#map .leaflet-popup-close-button:hover,
#map .leaflet-popup-close-button:focus-visible { background: #bae6fd; }

#map .leaflet-popup-content { padding-top: 40px; }

.route-fit-label{display:none}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px){#fitRouteBtn{display:flex;width:auto;min-width:84px;padding:0 9px;gap:6px;justify-content:center;align-items:center}#fitRouteBtn .route-fit-label{display:inline;font-size:.8rem;font-weight:800;white-space:nowrap}}

@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px){
  .mobile-detail-panel{position:absolute;z-index:700;right:0;bottom:0;left:0;display:flex;flex-direction:column;height:var(--mobile-detail-height,44%);min-height:110px;max-height:calc(100% - 100px);overflow:hidden;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -8px 26px rgba(8,47,73,.2)}
  .mobile-detail-panel[hidden]{display:none!important}
  .map-panel.mobile-detail-open #map{height:calc(100% - var(--mobile-detail-height,44%))}
  .mobile-detail-resize{height:44px;flex:0 0 44px;display:grid;place-items:center;touch-action:none;cursor:row-resize;user-select:none;outline-offset:-3px}
  .mobile-detail-resize>span{width:54px;height:6px;border-radius:999px;background:#94a3b8}
  .mobile-detail-resize:focus-visible{outline:3px solid #0284c7}
  .mobile-detail-toolbar{height:50px;flex:0 0 50px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 18px;border-bottom:1px solid #e2e8f0;color:#082f49}
  .mobile-detail-toolbar button{width:48px;height:48px;border:0;border-radius:12px;background:#e0f2fe;color:#082f49;font:32px/1 system-ui,sans-serif}
  .mobile-detail-toolbar button:focus-visible{outline:3px solid #0284c7;outline-offset:2px}
  .mobile-detail-content{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
  .mobile-detail-content .popup-card{width:auto;max-width:none;padding:0 0 8px}
  .mobile-detail-content .popup-card h3{font-size:1.08rem;line-height:1.4}
  .mobile-detail-content .popup-grid{grid-template-columns:72px minmax(0,1fr);font-size:.88rem;gap:7px 9px}
  .mobile-detail-content .popup-note{font-size:.9rem;overflow-wrap:anywhere}
  .mobile-detail-content .popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .mobile-detail-content .popup-actions>*{min-width:0;min-height:48px;font-size:.86rem}
  .mobile-detail-content .popup-actions [data-day-select],.mobile-detail-content .popup-actions [data-popup-action="add"]{display:none!important}
  .mobile-detail-content .popup-add-today{position:sticky;bottom:0;z-index:2;display:block;width:100%;min-height:54px;margin:12px 0 6px;border-radius:14px;font-size:1.05rem;font-weight:800}
  .mobile-detail-content .popup-actions a{overflow-wrap:anywhere}
}

@media (min-width: 761px) and (max-width: 1000px) and (max-height: 600px){
  .map-panel.mobile-detail-open .map-toolbar{left:72px;right:8px;grid-template-columns:minmax(0,1fr) minmax(300px,auto);align-items:start}
  .map-panel.mobile-detail-open .radius-row{margin-top:0}
  .map-panel.mobile-detail-open .leaflet-top.leaflet-left{top:8px!important;left:8px}
}

/* Keep the desktop filters clear of Leaflet's zoom controls on every desktop window, short ones included (#7 finding 8),
   and inside the map on its right edge (styles.css drops the right inset at 1050px and below). */
@media (min-width: 1001px), (min-width: 761px) and (min-height: 601px){
  .map-toolbar{left:70px;max-width:calc(100% - 88px)}
}

/* Landscape phones: a compact detail header leaves room for the 加入 button. */
@media (max-width: 1000px) and (max-height: 600px) {
  /* The resize strip and the header share one 44px row: × and 復原 sit at its right end and the title is kept for screen
     readers only, so the name and the stop buttons fit without scrolling (#7 review D2). */
  .mobile-detail-resize { height: 44px; flex-basis: 44px; border-bottom: 1px solid #e2e8f0; }
  .mobile-detail-toolbar { position: absolute; top: 0; right: 14px; z-index: 1; height: 44px; padding: 0; border: 0; background: transparent; pointer-events: none; }
  .mobile-detail-toolbar > strong { position: absolute; top: 0; right: calc(100% + 8px); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-detail-toolbar-actions { pointer-events: auto; }
  .mobile-detail-toolbar button { width: 44px; height: 44px; font-size: 28px; }
  .mobile-detail-toolbar .mobile-detail-undo { width: auto; height: 44px; font-size: 16px; }
  .mobile-detail-content .popup-card { display: flex; flex-direction: column; }
  .mobile-detail-content .popup-add-today { order: -1; position: static; min-height: 44px; margin: 2px 0 4px; }
}

/* Phones: the stop's move buttons and the family notes sit right under the place name (#7). */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .mobile-detail-content .popup-stop-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 6px; }
  .mobile-detail-content .popup-stop-actions > button { min-width: 0; min-height: 52px; padding: 4px 6px; border: 1px solid #7dd3fc; border-radius: 14px; background: #e0f2fe; color: #075985; font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.25; touch-action: manipulation; }
  .mobile-detail-content .popup-stop-actions > button:active:not(:disabled) { background: #bae6fd; }
  .mobile-detail-content .popup-stop-actions > button:disabled { border-color: #cbd5e1; background: #f1f5f9; color: #64748b; cursor: not-allowed; }
  .mobile-detail-content .popup-stop-actions > button[aria-expanded="true"] { border-color: #075985; background: #075985; color: #fff; }
  .mobile-detail-content .popup-stop-actions > button:focus-visible, .mobile-detail-content .popup-day-chooser button:focus-visible { outline: 3px solid #0284c7; outline-offset: 2px; }
  .mobile-detail-content .popup-stop-caption { grid-column: 1 / -1; margin: 0; color: #075985; font-size: .9rem; font-weight: 800; line-height: 1.3; }
  .mobile-detail-content .popup-day-chooser { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid #bae6fd; border-radius: 14px; background: #f0f9ff; }
  .mobile-detail-content .popup-day-chooser[hidden] { display: none; }
  .mobile-detail-content .popup-day-chooser p { grid-column: 1 / -1; margin: 0; color: #075985; font-size: 1rem; font-weight: 800; }
  .mobile-detail-content .popup-day-chooser button { min-width: 0; min-height: 52px; padding: 4px 8px; border: 1px solid #7dd3fc; border-radius: 12px; background: #fff; color: #082f49; font: inherit; font-size: .95rem; font-weight: 800; line-height: 1.3; text-align: left; overflow-wrap: anywhere; touch-action: manipulation; }
  .mobile-detail-content .popup-day-chooser button:disabled { border-color: #cbd5e1; background: #f1f5f9; color: #64748b; cursor: not-allowed; }
  .mobile-detail-content .family-content { margin: 8px 0 12px; }
  .mobile-detail-content .family-content > details > summary { min-height: 48px; font-size: 1rem; }
  .mobile-detail-content .family-forms label { font-size: .95rem; }
  .mobile-detail-content .family-forms button { min-height: 48px; font-size: 1rem; }
  .mobile-detail-content .family-entry-list { margin-top: 10px; }
  .mobile-detail-content .family-entry-note, .mobile-detail-content .family-entry-link { font-size: .95rem; }
  .toast { bottom: var(--toast-phone-bottom, calc(var(--mobile-nav) + 12px)); }
  :root.mobile-detail-visible .toast { bottom: var(--toast-above-detail, calc(var(--mobile-nav) + 12px)); }
  /* 復原 next to × in the detail header, and a full-size 復原 on the plan tab. */
  .mobile-detail-toolbar-actions { display: flex; align-items: center; gap: 8px; }
  .mobile-detail-toolbar .mobile-detail-undo { width: auto; min-width: 64px; height: 44px; padding: 0 14px; border: 1px solid #7dd3fc; border-radius: 12px; background: #fff; color: #075985; font: inherit; font-size: 16px; font-weight: 800; }
  .mobile-detail-toolbar .mobile-detail-undo[hidden] { display: none; }
  #undoBtn { min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 16px; }
  .stop-note-badge { justify-self: start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: #fef3c7; color: #78350f; font-size: .85rem; font-weight: 800; }
  /* iOS zooms into a focused field whose text is under 16px; this floor wins over every field style (none is larger), except
     the ledger's amount, which trip-records.css makes larger still (#6 review P2-7). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(#tripExpenseAmount), select, textarea:not(#dayNoteInput) { font-size: 16px !important; }
}

/* Landscape phones: the map is short, so 建立新地點 and 我的位置 sit side by side near the bottom, below the filters
   and clear of zoom (#7 re-review 3). Portrait keeps its stacked buttons. */
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .map-panel #locateBtn { right: 11px; bottom: 22px; }
  .map-panel #addPoiBtn { right: 67px; bottom: 22px; }
  /* The short map puts zoom − right above the legend: move the legend right of the zoom column (#7 batch C). */
  .map-panel .legend { left: 72px; bottom: 12px; }
}

/* Landscape phones: like the add button, the move buttons come first so they show without scrolling; the name follows. */
@media (max-width: 1000px) and (max-height: 600px) {
  .mobile-detail-content .popup-stop-actions { order: -1; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; margin: 0 0 2px; }
  .mobile-detail-content .popup-stop-caption { grid-column: auto; }
  .mobile-detail-content .popup-stop-actions > button { min-height: 46px; padding-block: 2px; }
}

/* Phones: 導航到這裡 (#11) takes the place of the detail title, left in the header row, so it shows at every panel height
   without scrolling; 復原 and × stay at the right end. Landscape keeps one header row with the resize strip, 52px tall
   so this 48px button has a little room above and below. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .mobile-detail-toolbar > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-detail-toolbar { gap: 8px; padding-left: 12px; }
  .mobile-detail-navigate { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 12px; background: #166534; color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; touch-action: manipulation; }
  .mobile-detail-navigate:active { background: #14532d; }
  .mobile-detail-navigate:focus-visible { outline: 3px solid #0284c7; outline-offset: 2px; }
  .mobile-detail-navigate svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
  .mobile-detail-navigate[hidden] { display: none; }
}
@media (max-width: 1000px) and (max-height: 600px) {
  .mobile-detail-resize { height: 52px; flex-basis: 52px; }
  .mobile-detail-toolbar { left: 14px; height: 52px; padding-left: 0; justify-content: space-between; }
  .mobile-detail-navigate { pointer-events: auto; }
}

/* Landscape phones (review of #13): the map-tall screen leaves about 250px for the plan, so the day heading, 出發時間 and
   看路線 share one row, the long day summary and the drag hint are left out, and the status row loses its padding; the
   first stop then shows without scrolling. */
@media (max-width: 1000px) and (max-height: 600px) {
  .day-summary { margin: 9px 2px 2px; gap: 10px; }
  .day-summary > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; min-width: 0; }
  .day-summary h2 { margin: 0; font-size: 1.15rem; }
  .day-summary #daySummary { display: none; }
  .day-summary .day-start-time { margin-top: 0; }
  .day-summary .day-start-time input { min-height: 44px; }
  .route-meta { padding-block: 0; }
  .drag-help { display: none; }
  .itinerary-list { padding-top: 2px; }
}

/* Per-day notes (#10 item 7, owner-approved redesign 2026-10-03): on phones the note is read on a pale-yellow card (18px,
   never cut) with a 48px 修改, or a full-width 48px ＋ 寫這天的筆記 when there is none. #dayNoteDialog takes the whole screen like
   旅行帳本: only its body scrolls and 儲存筆記 sits in the action bar below it, so it never covers the text (like 記一筆,
   #6 review P2-5). The textarea is 18px (above the 16px field floor). In landscape there is no card: a 44px 筆記 chip in
   the status row, beside 復原, opens the same dialog and costs no height. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .workspace.plan-view .planner-scroll-content > .day-note { order: 1; }
  .day-note { margin: -2px 2px 12px; }
  .day-note-sticky { padding: 10px 12px 14px; border: 2px solid #fde68a; border-radius: 16px; background: #fffbeb; box-shadow: 0 3px 10px rgba(146, 64, 14, .1); }
  .day-note-sticky-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
  .day-note-sticky-head h3 { margin: 0; color: #92400e; font-size: 1.05rem; font-weight: 800; }
  .day-note-edit { min-width: 72px; min-height: 48px; padding: 0 16px; border: 2px solid #fcd34d; border-radius: 12px; background: #fff; color: #92400e; font: inherit; font-size: 17px; font-weight: 800; touch-action: manipulation; }
  .day-note-text { margin: 0; color: #422006; font-size: 18px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  .day-note-add { width: 100%; min-height: 48px; padding: 0 14px; border: 2px dashed #f59e0b; border-radius: 14px; background: #fff; color: #92400e; font: inherit; font-size: 17px; font-weight: 800; touch-action: manipulation; }
  .day-note :is(.day-note-edit, .day-note-add):focus-visible { outline: 3px solid #0284c7; outline-offset: 2px; }
  .day-note-chip { display: none; }
  .day-note-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border-radius: 0; background: #fffdf5; }
  .day-note-dialog-card { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; padding: calc(8px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
  .day-note-dialog-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
  .day-note-dialog-head h2 { margin: 0; color: var(--ink-strong); font-size: 1.3rem; }
  .day-note-dialog-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; }
  .day-note-field-label { color: #475569; font-size: 16px; font-weight: 700; }
  .day-note-dialog textarea { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-height: 180px; padding: 12px; border: 2px solid #fcd34d; border-radius: 14px; background: #fff; color: var(--ink-strong); font: inherit; font-size: 18px; line-height: 1.6; resize: none; }
  .day-note-counter { margin: 0; color: #475569; font-size: 16px; font-weight: 700; }
  .day-note-counter.over { color: #b91c1c; }
  .day-note-dialog-actions { display: grid; flex: 0 0 auto; gap: 8px; padding-top: 8px; border-top: 1px solid #fde68a; }
  .day-note-dialog button { min-height: 48px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 17px; font-weight: 800; touch-action: manipulation; }
  .day-note-cancel, .day-note-keep { border: 2px solid #bae6fd; background: #fff; color: #075985; }
  .day-note-save { width: 100%; min-height: 52px; border: 2px solid #0369a1; background: #0369a1; color: #fff; }
  .day-note-save:disabled { border-color: #cbd5e1; background: #f1f5f9; color: #64748b; }
  .day-note-confirm:not([hidden]) { display: grid; gap: 8px; }
  .day-note-confirm p { margin: 0; color: #7c2d12; font-size: 18px; font-weight: 800; }
  .day-note-confirm-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .day-note-discard { border: 2px solid #b91c1c; background: #b91c1c; color: #fff; }
  .day-note-dialog :is(button, textarea):focus-visible { outline: 3px solid #0284c7; outline-offset: 2px; }
}
@media (max-width: 1000px) and (max-height: 600px) {
  .workspace.plan-view .planner-scroll-content > .day-note { display: none; }
  .route-meta #routeStatus { flex: 0 1 auto; min-width: 0; }
  .day-note-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 44px; max-width: min(18em, 36%); min-height: 44px; margin-left: auto; padding: 0 12px; border: 1px solid #9acfe5; border-radius: 12px; background: #fff; color: #075985; font: inherit; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; touch-action: manipulation; }
  .day-note-chip.has-note { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
  .day-note-chip svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .day-note-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .day-note-chip:focus-visible { outline: 3px solid #0284c7; outline-offset: 2px; }
  .day-note-dialog-head { min-height: 48px; }
  .day-note-dialog textarea { min-height: 96px; }
  .day-note-confirm:not([hidden]) { grid-template-columns: 1fr auto; align-items: center; }
}