/* ============================================================
   Stop detail – photo hero + iOS grouped sections
   ============================================================ */
.stop-page { padding-top: 0; }
.sd-hero {
  position: relative; height: calc(248px + var(--safe-t)); margin: 0 calc(-1 * var(--gutter)); overflow: hidden;
  background: var(--surface-3); color: #fff; isolation: isolate;
}
@media (min-width: 712px) { .sd-hero { margin: 12px 0 0; border-radius: 14px; height: 260px; } }
.sd-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-hero .place-fallback { position: absolute; inset: 0; font-size: 40px; }
.sd-hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62) 100%); }
.sd-hero-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 8px) 12px 0; z-index: 2; }
.sd-switch { display: flex; align-items: center; height: 36px; border-radius: 18px; background: rgba(0, 0, 0, .36); color: #fff; backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }
.sd-sw-btn { width: 44px; height: 44px; margin: -4px 0; border: 0; background: transparent; color: inherit; border-radius: 50%; display: grid; place-items: center; }
.sd-sw-btn:disabled { opacity: .35; }
.sd-sw-n { font-weight: 600; font-size: 13px; min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.sd-hero-text { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
.sd-name { font: 700 28px/1.12 var(--font-ui); letter-spacing: -0.028em; margin: 0 0 4px; overflow-wrap: anywhere; }
.sd-when { font-size: 15px; font-weight: 500; opacity: .92; }
.sd-credit { font-size: 11px; color: var(--ink-3); text-align: right; margin: 6px 0 0; line-height: 1.3; }
.sd-credit a { color: inherit; text-decoration: none; }

/* sections: overview card + one grouped list */
.sd-sections { margin-top: 12px; }
.sd-sections .acc-summary { max-width: 46%; }
.sd-group { margin-top: 24px; background: var(--surface); border-radius: 12px; overflow: clip; }
.sd-group > .acc { border-radius: 0; background: transparent; }
.sd-group > .acc + .acc { margin-top: 0; border-top: .5px solid var(--line); }
.sd-group > .acc + .acc .acc-btn { position: relative; }
.sd-sub { font-size: 13px; font-weight: 400; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 4px; }
.sd-nights { border-top: .5px solid var(--line); padding-top: 8px; }
.sd-nights .field-label { font-size: 16px; color: var(--ink); font-weight: 400; }
.sd-edit-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; margin-top: 8px; border: 0; border-top: .5px solid var(--line); background: none; color: var(--ink); font-weight: 400; font-size: 16px; text-align: left; }
.sd-edit-toggle > .icon { color: var(--ink-3); flex: none; }
.sd-edit-toggle > .icon:first-child { color: var(--ink-3); }
.sd-edit { padding: 2px 0 0; animation: accIn .2s var(--ease); }
.sd-order { gap: 4px; }
.sd-order .icon-btn { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--accent); }
.sd-order .icon-btn:disabled { color: var(--ink-3); }
.sd-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; flex-wrap: wrap; }
.sd-line-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-line-main .field-label { color: var(--ink); font-size: 16px; font-weight: 400; }
.sd-del { align-self: flex-start; margin-left: -12px; }

/* items */
.it-list { list-style: none; margin: 0; padding: 0; }
.it + .it { border-top: .5px solid var(--line); }
.it-row { display: flex; align-items: center; gap: 4px; }
.it-row .check { flex: 1 1 auto; min-width: 0; }
.it-cost { flex: none; font-size: 15px; font-weight: 400; color: var(--ink-3); }
.it-ai { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); vertical-align: 1px; text-decoration: none; }
.it-edit-btn { color: var(--ink-3); margin-right: -10px; }
.it-editor { padding: 4px 0 14px 36px; display: grid; gap: 10px; animation: accIn .2s var(--ease); }
.it-empty { padding: 4px 0 10px; font-size: 15px; }
.it-add { display: flex; gap: 8px; margin-top: 8px; }
.it-add .input { flex: 1 1 auto; min-width: 0; }
.it-add-btn { width: 46px; min-height: 46px; padding: 0; flex: none; border-radius: 10px; }
.it-add-btn:disabled { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-3) !important; opacity: 1; }
.it-more { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.it-more .btn { margin-left: -12px; font-weight: 400; }
.it-more .btn:last-child:not(:first-child) { margin-left: 0; margin-right: -12px; }
.it-meta { display: block; font-size: 13px; color: var(--ink-3); font-weight: 400; margin-top: 1px; text-decoration: none; }
.ai-loading { display: flex; align-items: center; gap: 12px; padding: 18px 4px; color: var(--ink-3); }
.check.is-on .check-label { color: var(--ink); }

/* stays (hairline rows) */
.sd-stays { list-style: none; padding: 0; margin: 0 0 8px; }
.sd-stay { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 56px; }
.sd-stay + .sd-stay { border-top: .5px solid var(--line); }
.sd-stay-ico { flex: none; display: grid; place-items: center; color: var(--ink-3); }
.sd-stay.is-chosen .sd-stay-ico { color: var(--accent); }
.sd-stay-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd-stay-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-stay-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.sd-stay-price { flex: none; text-align: right; display: flex; flex-direction: column; font-weight: 600; font-size: 15px; }
.sd-stay-price .is-missing { color: var(--warn); font-weight: 500; font-size: 15px; }
.sd-stay-sub { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.sd-stays-btn { margin-top: 2px; }

/* connections (plain rows) */
.sd-conn { display: flex; align-items: center; gap: 8px; padding: 8px 0; text-decoration: none; color: inherit; min-height: 56px; }
.sd-conn .tl { flex: 1 1 auto; min-width: 0; }
.sd-conn .conn-go { color: var(--ink-3); flex: none; }
.sd-from { margin: 0 0 4px 40px; font-size: 13px; }
.sd-local { margin-top: 4px; border-top: .5px solid var(--line); }
.sd-next-stop { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; border-bottom: .5px solid var(--line); border-radius: 0; background: none; color: var(--ink); text-align: left; min-height: 60px; }
.sd-next-stop > .icon { color: var(--ink-3); }
.sd-next-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.sd-next-stop .place-fallback { font-size: 14px; }
.sd-next-stop .grow { display: flex; flex-direction: column; }
.sd-next-name { font: 600 16px/1.25 var(--font-ui); }

/* costs */
.sd-costs { margin: 0; display: grid; }
.sd-costs > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 16px; }
.sd-costs > div + div { border-top: .5px solid var(--line); }
.sd-costs dt { color: var(--ink); }
.sd-costs dd { margin: 0; font-weight: 400; color: var(--ink-3); }
.sd-costs-total dt { color: var(--ink); font-weight: 600; }
.sd-costs-total dd { font-weight: 600; color: var(--ink); }
.sd-costs-note { font-weight: 400; font-size: 13px; color: var(--ink-3); margin-left: 4px; }
.sd-foreign { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; margin-top: 8px; }
.sd-issues { margin-top: 8px; padding: 10px 0 0; border-top: .5px solid var(--line); }
.sd-issues ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-3); }
.sd-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 400; color: var(--accent); text-decoration: none; }
.sd-who { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

/* missing */
.sd-missing-top { padding: calc(var(--safe-t) + 10px) 0 8px; }
.sd-missing { margin-top: 8px; }

/* ============ add stop / position picker sheets ============ */
.as-search { position: relative; }
.as-search .input { padding-left: 40px; }
.as-search-ico { position: absolute; left: 13px; top: 14px; color: var(--ink-3); pointer-events: none; }
.as-status { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; padding: 6px 2px; }
.as-results { list-style: none; margin: 0; padding: 0; border-radius: 12px; overflow: hidden; transition: opacity .2s; background: var(--fill-group); }
.as-results.is-stale { opacity: .6; }
.as-results li + li { border-top: .5px solid var(--line); }
.as-result { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border: 0; background: transparent; text-align: left; color: var(--ink); }
.as-result:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.as-r-ico { color: var(--ink-3); flex: none; }
.as-r-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.as-r-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-r-sub { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-r-cc { flex: none; max-width: 38%; display: inline-block; line-height: 20px; overflow: hidden; text-overflow: ellipsis; }
.as-results.is-compact .as-result { min-height: 48px; }
.as-cand { border: 0; border-radius: 12px; padding: 12px 14px; background: var(--fill-group); display: grid; gap: 12px; animation: accIn .25s var(--ease); }
.as-cand-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.as-cand-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-coords-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin-top: -6px; font-size: 15px; color: var(--accent); text-decoration: none; }
.as-cand-pin { color: var(--accent); flex: none; }
.as-change { margin-left: auto; padding: 0 4px; min-height: 36px; font-size: 14px; }
.as-name-wrap { position: relative; }
.as-name-spin { position: absolute; right: 12px; bottom: 15px; color: var(--ink-3); }
.as-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.as-row .grow { min-width: 150px; }

.picker { position: relative; height: 260px; border-radius: 12px; overflow: hidden; border: 0; background: var(--map-water); }
.picker.is-tall { height: 320px; }
.picker-canvas { position: absolute; inset: 0; }
.picker-svg { width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; user-select: none; -webkit-user-select: none; }
.picker .map-base * { vector-effect: non-scaling-stroke; }
.picker .map-grat { fill: none; stroke: var(--map-grat); stroke-width: 1; }
.picker .map-land { fill: var(--map-land); stroke: var(--map-land-edge); stroke-width: 1; }
.picker .map-borders { fill: none; stroke: var(--map-border); stroke-width: .8; }
.pk-dot circle { fill: var(--ink-3); stroke: var(--surface); stroke-width: 2; }
.pk-dot text { font: 700 9px/1 var(--font-ui); fill: var(--surface); text-anchor: middle; dominant-baseline: central; }
.pk-drop { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.pk-hole { fill: #fff; }
.pk-shadow { fill: rgba(0, 0, 0, .25); }
.pk-pin.is-drop .pk-drop, .pk-pin.is-drop .pk-hole { animation: pinDrop .35s var(--ease); }
@keyframes pinDrop { from { transform: translateY(-14px); opacity: .3; } }
.picker-msg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 500; color: var(--ink-2); pointer-events: none; }
.picker-msg.is-soft { color: var(--ink-3); }