/* Screen specification: DESIGN.md. Fonts and icons are served locally. */
:root {
  --primary: #3468DA; --primary-pressed: #2854B5; --on-primary: #FFFFFF;
  --ink: #15263A; --ink-body: #15263A; --body-secondary: #687381; --muted: #687381;
  --surface: #FFFFFF; --surface-warm: #F7F8F5; --border: #DFE4EA;
  --route-tint: #EAF0FA; --error: #C44848;
  --shadow-soft: 0 3px 12px rgb(21 38 58 / 12%);
}
* { box-sizing: border-box; }
body { display: grid; grid-template-columns: 410px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--surface-warm); font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
button { -webkit-tap-highlight-color: transparent; }
button, input { touch-action: manipulation; }
svg { width: 24px; height: 24px; flex: none; vertical-align: middle; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#top { grid-column: 1 / -1; margin: 0; padding: calc(16px + env(safe-area-inset-top)) 20px 16px; gap: 12px; background: var(--surface-warm); border-bottom: 1px solid var(--border); }
#title { display: flex; flex-direction: column; gap: 2px; text-align: center; }
#trip-title { font-size: 22px; font-weight: 700; color: var(--ink); }
#save-status { color: var(--body-secondary); font-size: 13px; font-weight: 500; }
#top h1 { font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.4px; }
#back-btn { color: var(--ink); }
.btn { height: 48px; padding: 0 20px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.btn-text { min-height: 44px; border-radius: 12px; font-weight: 600; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; padding: 0; }
.icon-btn svg { width: 22px; height: 22px; }
#avatar-btn { min-width: 44px; min-height: 44px; padding: 4px; }
#avatar img, .avatar-fallback { width: 36px; height: 36px; }
.avatar-fallback { background: #CADBFC; color: var(--ink); font-size: 16px; font-weight: 600; }
#menu { border-radius: 12px; box-shadow: none; z-index: 20; }
#menu button { min-height: 44px; }
#sidebar { grid-row: 2; display: flex; flex-direction: column; width: auto; min-height: 0; padding: 0; overflow: hidden; background: var(--surface-warm); }
.panel-header { flex: none; padding: 24px 20px 0; }
#panel-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); scrollbar-width: thin; }
#panel-toggle { display: none; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.section-heading h2 { font-size: 20px; font-weight: 600; letter-spacing: -.4px; margin: 0; }
#stop-count { display: block; font-size: 13px; color: var(--body-secondary); white-space: nowrap; }
#total { display: flex; align-items: center; gap: 16px; min-height: 48px; margin: 0 0 8px; padding: 10px 16px; border-radius: 12px; color: var(--ink); background: var(--route-tint); font-size: 16px; }
#total strong { font-weight: 600; }
#total strong + strong { border-left: 1px solid #A6B8D7; padding-left: 16px; }
#total:empty { display: none; }
.card { padding: 0; border: 0; background: transparent; }
.stop { align-items: flex-start; gap: 0; padding: 12px 0; border: 0; background: transparent; }
#stops .stop:not(:last-child)::after { left: 55px; top: 52px; height: calc(100% - 38px); border-left: 2px dashed var(--border); pointer-events: none; }
.handle { flex: none; width: 36px; min-width: 36px; margin-right: 4px; height: 44px; min-height: 44px; padding: 0; color: #89919A; cursor: grab; touch-action: none; }
.handle.icon-btn svg { width: 18px; height: 18px; }
.dot { width: 30px; height: 30px; margin-top: 7px; margin-right: 12px; font-size: 16px; font-weight: 600; }
.info { flex: 1; min-width: 0; margin-right: 4px; padding: 3px 0; min-height: 44px; border-radius: 4px; }
.name { font-size: 16px; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.address { font-size: 13px; font-weight: 400; color: var(--body-secondary); margin-top: 3px; overflow-wrap: anywhere; }
.leg { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--body-secondary); margin-top: 8px; }
.leg:empty { display: none; }
.leg svg { width: 20px; height: 20px; }
.stop-actions { position: relative; flex: none; width: 44px; margin: 0; }
.stop-menu { width: 44px; height: 44px; color: var(--ink); }
.stop-dropdown { position: fixed; inset: auto; margin: 0; z-index: 5; width: 190px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.stop-dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; font: inherit; font-weight: 500; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; }
.stop-dropdown button svg { width: 20px; height: 20px; }
.stop-dropdown .del { color: var(--error); }
.stop-dropdown button:hover { background: var(--surface-warm); }
.note-input { min-height: 44px; font-size: 16px; }
.add-stop { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin: 12px 0 0; border-color: #8290A1; background: transparent; color: var(--ink); }
.add-stop:hover { background: var(--route-tint); }
#privacy-link { position: absolute; left: 10px; bottom: 36px; padding: 0 5px; border-radius: 3px; background: rgb(255 255 255 / 50%); font-size: 11px; line-height: 18px; color: rgb(0 0 0 / 75%); text-decoration: none; }
#privacy-link:hover { text-decoration: underline; }
#add-msg:empty { display: none; }
#detail:empty { display: none; }
#detail { padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; }
#map-wrap { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; }
.map-controls { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; }
.map-button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); cursor: pointer; }
.map-button:hover { background: var(--route-tint); }
#locate { right: 20px; bottom: 36px; width: 44px; height: 44px; border: 0; border-radius: 12px; color: var(--primary); }
#layers-btn[aria-pressed="false"] { color: var(--body-secondary); background: var(--surface-warm); }
.marker { border-radius: 50%; color: var(--on-primary); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; border: 3px solid var(--surface); font-family: 'Be Vietnam Pro', sans-serif; font-size: 16px; line-height: 1; font-weight: 600; background: var(--ink); box-shadow: none; }
dialog { padding: 24px 20px; border: 1px solid var(--border); box-shadow: none; max-height: calc(100dvh - 40px); overflow-y: auto; }
dialog h2 { font-size: 20px; font-weight: 600; }
dialog input { height: 48px; border-radius: 12px; }
dialog .dialog-actions { flex-wrap: wrap; }
#toast { box-shadow: none; }
@media (max-width: 700px) {
  body { --panel-height: 56dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(80px, 1fr) var(--panel-height); overflow: hidden; }
  body[data-panel-state="collapsed"] { --panel-height: calc(164px + env(safe-area-inset-bottom)); }
  body[data-panel-state="expanded"] { --panel-height: calc(100dvh - 176px - env(safe-area-inset-top)); }
  #top { padding: calc(10px + env(safe-area-inset-top)) 16px 12px; gap: 8px; border-bottom: 0; background: var(--surface); }
  #title { min-height: 44px; justify-content: center; text-align: left; }
  #save-status { font-size: 12px; line-height: 16px; font-weight: 400; }
  #top h1 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
  #login { flex: none; min-width: 44px; font-size: 14px; line-height: 20px; padding: 0 2px; white-space: nowrap; }
  #user-name { display: none; }
  #map-wrap { grid-column: 1; grid-row: 2; }
  #sidebar { grid-column: 1; grid-row: 3; height: auto; width: 100%; border: 0; border-radius: 20px 20px 0 0; margin-top: -12px; z-index: 2; }
  .panel-header { padding: 0 16px; }
  #panel-content { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
  #panel-toggle { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 29px; padding: 0 0 8px; border: 0; background: transparent; color: var(--body-secondary); touch-action: none; cursor: ns-resize; }
  .panel-grip { display: block; width: 36px; height: 5px; border-radius: 4px; background: #BBC5CE; }
  #panel-chevron { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 29px; }
  #panel-chevron svg { width: 20px; height: 20px; }
  .section-heading { margin: 0 0 8px; min-height: 44px; }
  .section-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
  .section-heading h2 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
  #stop-count { margin: 0; font-size: 12px; line-height: 16px; font-weight: 400; }
  #total { margin-bottom: 8px; font-size: 15px; line-height: 20px; }
  .map-controls { top: 12px; right: 12px; flex-direction: row; gap: 8px; }
  #locate { right: 16px; bottom: 36px; }
  .stop { gap: 0; padding-block: 12px; }
  .name { font-size: 15px; line-height: 21px; font-weight: 600; }
  .address, .note { font-size: 13px; line-height: 18px; font-weight: 400; }
  .leg { font-size: 12px; line-height: 16px; font-weight: 400; }
  .btn, .btn-text { font-size: 14px; line-height: 20px; font-weight: 600; }
  svg, .icon-btn svg { width: 20px; height: 20px; }
  .dot { width: 28px; height: 28px; font-size: 13px; line-height: 18px; margin-top: 8px; }
  #stops .stop:not(:last-child)::after { left: 54px; }
  .handle { min-width: 36px; margin-left: 0; }
  .stop-actions { margin-right: 0; }
  body[data-panel-state="collapsed"] .section-heading h2 { display: none; }
  body[data-panel-state="collapsed"] #stop-count { font-size: 16px; font-weight: 600; color: var(--ink); }
  body[data-panel-state="collapsed"] .section-heading { min-height: 44px; margin-bottom: 8px; }
}
@media (max-width: 380px) {
  #top { gap: 4px; }
  #total { gap: 12px; padding-inline: 12px; }
  #total strong + strong { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
.map-button:disabled { opacity: .5; cursor: default; }

/* A single destination form; its footer stays within the visible viewport. */
.add-dialog { padding: 0; width: min(92vw, 440px); max-height: calc(100dvh - 32px); overflow: hidden; }
.add-dialog form { display: flex; flex-direction: column; max-height: inherit; }
.add-dialog-header { flex: none; padding: 20px 20px 0; }
.dialog-grip { display: none; }
.add-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.add-title-row h2 { margin: 0; }
.add-title-row .icon-btn { margin-right: -10px; }
.add-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 0; }
.add-dialog-body label { display: block; font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
.place-input-shell { display: flex; align-items: center; min-height: 48px; padding-left: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--body-secondary); }
.place-input-shell:focus-within { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: -1px; }
.place-input-shell input { flex: 1; min-width: 0; width: 0; border: 0; outline: none; background: transparent; color: var(--ink); padding: 0 10px; }
.place-input-shell .icon-btn { margin-right: 2px; }
.place-input-shell:has(input[aria-invalid="true"]) { border-color: var(--error); }
#add-msg:empty { display: none; }
#add-msg { font-size: 13px; margin: 8px 0; }
.add-suggest { list-style: none; margin: 8px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 12px; }
.add-suggest button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.add-suggest button:hover, .add-suggest button:focus-visible { background: var(--surface-warm); }
#add-help { font-size: 13px; margin: 10px 0 0; line-height: 1.7; }
.add-dialog-footer { flex: none; padding: 20px; }
#add-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
#add-spinner svg { width: 20px; height: 20px; animation: add-spin 1s linear infinite; }
@keyframes add-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .add-dialog { position: fixed; inset: auto 0 var(--keyboard-bottom, 0px); margin: 0; width: 100%; max-width: none; max-height: calc(var(--visual-height, 100dvh) - 12px); border: 0; border-radius: 20px 20px 0 0; }
  .add-dialog-header { padding-top: 10px; }
  .dialog-grip { display: block; width: 36px; height: 5px; border-radius: 4px; background: #BBC5CE; margin: 0 auto 12px; }
  .add-dialog-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { #add-spinner svg { animation: none; } }

.name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.note { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--body-secondary); margin-top: 4px; }
.note span { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.stop.active { background: var(--route-tint); border-radius: 12px; }
.stop.active .stop-menu { background: #DFE7F3; }
.marker.active { outline: 3px solid var(--primary); outline-offset: 3px; }
.note-editor { margin-top: 8px; }
textarea.note-input { display: block; width: 100%; min-height: 80px; resize: vertical; font: inherit; font-size: 16px; line-height: 24px; background: var(--surface); color: var(--ink); border-color: var(--primary); }
.note-actions { display: none; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.note-actions .btn { height: 44px; padding-inline: 12px; }
.note-shortcuts { font-size: 12px; color: var(--body-secondary); margin-top: 6px; }
@media (max-width: 700px) {
  .note-actions { display: flex; }
  .note-shortcuts { display: none; }
  .add-dialog-header { padding-inline: 16px; }
  .add-dialog-body { padding-inline: 16px; }
  .add-dialog-footer { padding-inline: 16px; }
}

/* Account menu is anchored below the avatar, within a 16px viewport inset. */
#menu { position: fixed; inset: auto; width: 280px; max-width: calc(100vw - 32px); min-width: 0; padding: 8px; border-radius: 12px; z-index: 50; }
#menu::before { content: ''; position: absolute; top: -7px; right: var(--menu-arrow-right, 16px); width: 12px; height: 12px; transform: rotate(45deg); background: var(--surface); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.account-summary { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 8px 16px; }
#menu-avatar img, #menu-avatar .avatar-fallback { width: 36px; height: 36px; border-radius: 50%; display: grid; object-fit: cover; }
.account-identity { min-width: 0; }
#account-name { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
#account-email { margin-top: 2px; color: var(--body-secondary); font-size: 13px; line-height: 18px; font-weight: 400; overflow-wrap: anywhere; }
.account-menu-group { padding: 4px 0; border-top: 1px solid var(--border); }
#menu .account-menu-action { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; line-height: 20px; font-weight: 500; }
.account-menu-action svg { width: 20px; height: 20px; }
#avatar-btn[aria-expanded="true"] { outline: 3px solid #CADBFC; outline-offset: 2px; }

@media (max-width: 700px) { #avatar-btn { border-radius: 50%; } }

/* The library replaces the itinerary pane; the active map stays in memory. */
#library-panel { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface-warm); border-right: 1px solid var(--border); }
body.library-open #sidebar { display: none; }
.library-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#trip-tabs { display: flex; flex: none; gap: 0; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--border); }
#trip-tabs button { flex: 1; min-width: 0; min-height: 52px; padding: 10px 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--body-secondary); background: transparent; font-size: 14px; line-height: 20px; font-weight: 500; }
#trip-tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.library-toolbar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
#trip-count { color: var(--body-secondary); font-size: 12px; line-height: 16px; }
#new-trip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; font-weight: 500; }
#trip-list { margin: 0; padding: 0; max-height: none; overflow: visible; }
#trip-list .library-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 0 16px 0 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.trip-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px 0 16px 16px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.trip-thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--route-tint); color: var(--ink); }
.trip-thumb svg { width: 20px; height: 20px; }
.trip-thumb.unavailable { color: var(--body-secondary); }
.t-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#trip-list .t-name { flex: none; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 15px; line-height: 21px; font-weight: 600; }
.t-updated, .t-sharing { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--body-secondary); }
.t-sharing { display: flex; align-items: center; gap: 6px; color: var(--primary); }
.t-sharing svg { width: 16px; height: 16px; }
.library-actions { flex: none; }
.trip-menu-btn { border: 1px solid var(--border); color: var(--body-secondary); background: var(--surface); }
.trip-dropdown { position: fixed; inset: auto; margin: 0; width: 220px; max-width: calc(100vw - 32px); padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); }
.trip-dropdown button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font-size: 14px; line-height: 20px; font-weight: 500; }
.trip-dropdown button svg { width: 20px; height: 20px; }
.trip-dropdown button:hover { background: var(--surface-warm); }
.trip-dropdown button.danger { color: var(--error); border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 8px 8px; }
#trip-list .library-state { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 32px 16px; border: 0; }
.library-state h2 { margin: 0; color: var(--ink); font-size: 15px; line-height: 21px; font-weight: 600; }
.library-state p { margin: 0; color: var(--body-secondary); font-size: 12px; line-height: 18px; }
.library-state .btn { display: flex; align-items: center; gap: 8px; height: 44px; }
#received-help { margin: 0; padding: 20px 16px; color: var(--body-secondary); font-size: 12px; line-height: 18px; }
#trip-list .library-skeleton { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--surface); }
.skeleton-thumb { width: 44px; height: 44px; border-radius: 12px; background: var(--border); }
.skeleton-copy { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.skeleton-copy span { height: 12px; width: 80%; border-radius: 4px; background: var(--border); }
.skeleton-copy span + span { width: 60%; height: 10px; }
.library-skeleton { animation: library-pulse 1.3s ease-in-out infinite alternate; }
@keyframes library-pulse { to { opacity: .45; } }
@media (max-width: 700px) {
  body.library-open { grid-template-rows: auto minmax(0, 1fr); }
  body.library-open #map-wrap { display: none; }
  #library-panel { border: 0; }
}
@media (prefers-reduced-motion: reduce) { .library-skeleton { animation: none; } }

.share-dialog { padding: 20px; width: min(92vw, 440px); max-height: calc(100dvh - 24px); }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-heading h2 { margin: 0; }
.share-heading .icon-btn { margin-right: -8px; }
#share-trip-name { margin: 12px 0 20px; font-size: 15px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere; }
.share-explanation { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.share-explanation strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.share-explanation p { margin: 4px 0 0; font-size: 13px; line-height: 18px; }
#share-link-block label { display: block; color: var(--body-secondary); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
#share-link { display: flex; align-items: center; gap: 8px; padding-left: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-warm); color: var(--body-secondary); }
#share-link input { min-width: 0; flex: 1; padding-left: 0; background: transparent; border: 0; color: var(--ink); }
#share-copy, #share-create { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; }
#share-loading { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--body-secondary); font-size: 14px; }
#share-loading svg { width: 20px; height: 20px; animation: add-spin 1s linear infinite; }
#share-msg:empty { display: none; }
#share-msg { color: var(--error); font-size: 13px; line-height: 18px; margin-top: 12px; }
#share-off-block { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 12px; }
#share-off { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; text-align: left; color: var(--error); }
#share-off-block p { font-size: 12px; line-height: 18px; margin: 4px 0 0; }
@media (max-width: 700px) {
  .share-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; padding: 10px 16px max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) { #share-loading svg { animation: none; } }

.title-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.title-line h1 { min-width: 0; }
#shared-indicator { flex: none; color: var(--body-secondary); }
#shared-copy-footer { flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
#copy-trip { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
#shared-copy-footer p { margin: 6px 0 0; color: var(--body-secondary); text-align: center; font-size: 12px; line-height: 18px; }
body.shared-view #stops .stop:not(:last-child)::after { left: 15px; }
.access-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: var(--body-secondary); }
#access-icon svg { width: 28px; height: 28px; }
#access-action { width: 100%; margin-top: 8px; }
@media (max-width: 700px) {
  #shared-copy-footer { padding-inline: 16px; }
  body.shared-view #stops .stop:not(:last-child)::after { left: 14px; }
  body.shared-view[data-panel-state="collapsed"] { --panel-height: calc(260px + env(safe-area-inset-bottom)); }
}

.google-route, .google-route-segment { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 44px; height: 44px; padding: 0 12px; font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.google-route { margin-bottom: 8px; border-color: #8290A1; background: transparent; }
.google-route:hover, .google-route-segment:hover { background: var(--route-tint); }
.google-route svg, .google-route-segment svg { width: 20px; height: 20px; }
.add-stop { height: 44px; font-size: 14px; line-height: 20px; font-weight: 500; }
.stop-dropdown { width: 220px; max-width: calc(100vw - 32px); }
.stop-dropdown a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.stop-dropdown button { font-size: 14px; line-height: 20px; font-weight: 500; }
.stop-dropdown a svg { width: 20px; height: 20px; }
.stop-dropdown a:hover { background: var(--surface-warm); }
.stop-dropdown .edit { border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }
#google-route-segments { display: flex; flex-direction: column; gap: 8px; }

/* Route metadata and explicit backend save. */
#trip-info-btn { display: block; align-self: flex-start; width: fit-content; max-width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; }
#trip-info-btn:disabled { cursor: default; opacity: 1; }
#trip-info-btn .title-line { display: flex; }
#trip-title { display: block; min-width: 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trip-description { display: block; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--body-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trip-pencil { flex: none; color: var(--body-secondary); }
#trip-pencil svg { width: 14px; height: 14px; }
#save-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; color: var(--primary); background: var(--route-tint); }
#save-btn svg { width: 20px; height: 20px; }
#save-btn:disabled { color: #89919A; background: transparent; cursor: default; }
#save-btn[aria-busy="true"] { color: var(--primary); background: var(--route-tint); }
#save-btn[aria-busy="true"] svg { animation: add-spin 1s linear infinite; }
.trip-info-dialog { width: min(92vw, 440px); }
.trip-info-dialog label { display: block; margin: 20px 0 8px; font-size: 14px; font-weight: 600; }
.trip-info-dialog p { margin: 6px 0 0; color: var(--body-secondary); font-size: 12px; }
@media (max-width: 700px) {
  .trip-info-dialog { position: fixed; inset: auto 0 var(--keyboard-bottom, 0px); margin: 0; width: 100%; max-width: none; max-height: calc(var(--visual-height, 100dvh) - 12px); padding: 10px 16px max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) { #save-btn[aria-busy="true"] svg { animation: none; } }