/* /meet: meeting-point finder. NAVIG tokens from navig-ui.css: ink and one yellow accent, one 6px radius. */
.mt-app { scroll-margin-top: var(--nv-bar-h); position: relative; height: calc(100dvh - var(--nv-bar-h)); min-height: 560px; display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); background: var(--nv-bg); }
.mt-map { grid-column: 2; grid-row: 1; min-width: 0; background: #e4e5e7; z-index: 0; }
.mt-sheet { grid-column: 1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; background: var(--nv-raised); border-right: 1px solid var(--nv-line); z-index: 2; overflow: hidden; }
.mt-handle { display: none; }
.mt-head { padding: 20px 20px 4px; }
.mt-h1 { margin: 0; font: 650 1.125rem/1.25 var(--nv-font); letter-spacing: -.02em; text-wrap: balance; }
.mt-sub { margin: 8px 0 0; color: var(--nv-muted); font-size: .9375rem; max-width: 40ch; }
.mt-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 28px; }

/* people: one compact row each; they stay on screen while the results below update */
.mt-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-person { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.mt-person .top-search-container { position: static; transform: none; top: auto; left: auto; width: auto; max-width: none; flex: 1; min-width: 0; z-index: auto; display: block; }
.mt-person .top-search-input-wrapper { width: 100%; }
.mt-person .mt-input { box-sizing: border-box; padding: 6px 12px; min-height: 40px; line-height: 1.3; font-size: 16px; }
.mt-person.is-bad .mt-input { border-color: var(--nv-bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nv-bad) 30%, transparent); }
.mt-person .top-search-results { margin-top: 4px; max-height: min(44vh, 320px); }
.mt-person-name, .mt-text-btn { display: none; }
.mt-person.is-set { padding: 0 4px 0 8px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: var(--nv-surface); }
.mt-person.is-set .top-search-container, .mt-person.is-set .mt-locate { display: none; }
.mt-person.is-set .mt-person-name { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .9375rem/1.3 var(--nv-font); }
.mt-person.is-set .mt-text-btn { display: inline-flex; }
.mt-badge { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nv-ink); color: #fff; font: 700 .6875rem/1 var(--nv-font); letter-spacing: 0; }
.mt-badge-sm { width: 24px; height: 24px; font-size: .625rem; margin: 0; }
/* 36px visual buttons with a 44px hit area from the pseudo-element */
.mt-icon-btn, .mt-text-btn, .mt-chip, .mt-app .nv-btn { position: relative; }
.mt-icon-btn::after, .mt-text-btn::after, .mt-chip::after, .mt-app .nv-btn::after { content: ""; position: absolute; inset: -4px -2px; }
.mt-icon-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--nv-r); background: transparent; color: var(--nv-ink); cursor: pointer; transition: background .2s, transform .2s var(--nv-ease); }
.mt-icon-btn:hover { background: var(--nv-bg); }
.mt-person.is-set .mt-icon-btn:hover { background: var(--nv-raised); }
.mt-icon-btn:active { transform: scale(.95); }
.mt-icon-btn[hidden] { display: none; }
.mt-icon-btn.is-busy { opacity: .55; }
.mt-icon-btn:disabled { cursor: progress; }
.mt-text-btn { flex: none; align-items: center; min-height: 36px; padding: 0 8px; border: 0; background: none; color: var(--nv-ink); font: 500 .875rem var(--nv-font); text-decoration: underline; text-decoration-color: var(--nv-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.mt-hint { min-height: 1.4em; margin: 8px 0 0; font-size: .875rem; color: var(--nv-muted); }
.mt-hint:empty { min-height: 0; margin: 0; }
.mt-hint.is-error { color: var(--nv-bad); }
.mt-add-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.mt-app .nv-btn { box-sizing: border-box; min-height: 36px; padding: 0 14px; font-size: .875rem; }
.mt-count { font: 500 .75rem var(--nv-mono); letter-spacing: .04em; color: var(--nv-muted); }
/* filters: two compact segmented rows */
.mt-filters { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nv-line); }
.mt-filter { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.mt-filter-label { flex: none; width: 5.25rem; white-space: nowrap; font: 500 .75rem var(--nv-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.mt-chips { display: inline-flex; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: var(--nv-surface); }
.mt-chip { min-height: 36px; padding: 0 12px; border: 0; border-left: 1px solid var(--nv-line); border-radius: 0; background: transparent; color: var(--nv-ink); font: 500 .875rem var(--nv-font); cursor: pointer; transition: background .2s, color .2s; }
.mt-chip:first-child { border-left: 0; border-radius: 5px 0 0 5px; }
.mt-chip:last-child { border-radius: 0 5px 5px 0; }
.mt-chip:hover { background: var(--nv-bg); }
.mt-chip[aria-pressed="true"] { background: var(--nv-accent); color: var(--nv-accent-ink); font-weight: 650; }
.mt-try { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--nv-line); }
.mt-try-h { margin: 0 0 4px; font: 500 .75rem var(--nv-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.mt-try ul { list-style: none; margin: 0; padding: 0; }
.mt-try a { display: flex; align-items: center; min-height: 44px; color: var(--nv-ink); text-decoration: underline; text-decoration-color: var(--nv-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* results */
.mt-peek { display: none; margin: 0; font: 600 .875rem/1.35 var(--nv-font); }
.mt-results { margin-top: 14px; transition: opacity .2s; }
.mt-results:empty { margin-top: 0; }
.mt-results.is-updating { opacity: .5; }
.mt-sheet[data-state="form"] .mt-results { display: none; }
.mt-try[hidden], .mt-sub[hidden], .mt-rank-set[hidden] { display: none; }
.mt-status { margin: 12px 0 0; font-size: .875rem; color: var(--nv-muted); }
.mt-status:empty { display: none; }
.mt-status.is-error { color: var(--nv-bad); }
.mt-status:not(.is-error) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-rank-set { margin-top: 14px; }
.mt-lead { margin: 12px 0; font-size: .875rem; max-width: 52ch; }
.mt-spots { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.mt-spot { padding: 12px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: var(--nv-surface); }
.mt-spot.is-selected { border-color: var(--nv-ink); box-shadow: 0 0 0 2px var(--nv-accent); background: var(--nv-raised); }
.mt-spot-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--nv-ink); font: inherit; text-align: left; cursor: pointer; }
.mt-rank { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--nv-ink); border-radius: var(--nv-r); background: var(--nv-accent); color: var(--nv-accent-ink); font: 700 .875rem/1 var(--nv-font); }
.mt-spot-title { flex: 1; min-width: 0; display: grid; }
.mt-spot-title strong { font-size: 1.0625rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mt-spot-title small { color: var(--nv-muted); font-size: .8125rem; }
.mt-tag { flex: none; color: var(--nv-ink); border-color: var(--nv-ink); }
.mt-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mt-bar-row { display: grid; grid-template-columns: 24px minmax(0, 6.5rem) minmax(0, 1fr) 3.5rem; align-items: center; gap: 8px; }
.mt-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--nv-muted); }
.mt-bar { display: block; height: 10px; min-width: 6px; border-radius: 3px; background: var(--nv-ink); transition: width .4s var(--nv-ease); }
.mt-bar.is-worst { background: var(--nv-accent); box-shadow: inset 0 0 0 1.5px var(--nv-ink); }
.mt-min { text-align: right; font: 600 .875rem var(--nv-mono); font-variant-numeric: tabular-nums; }
.mt-facts { margin: 10px 0 0; font-size: .8125rem; color: var(--nv-muted); }
.mt-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--nv-line); display: grid; gap: 8px; }
.mt-pop > summary { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: transparent; color: var(--nv-ink); font: 500 .875rem var(--nv-font); list-style: none; cursor: pointer; }
.mt-pop > summary::-webkit-details-marker { display: none; }
.mt-pop > summary::before { content: ""; position: absolute; inset: -4px 0; }
.mt-pop > summary::after { content: "⌄"; }
.mt-pop[open] > summary { background: var(--nv-surface); }
.mt-pop > summary:hover { background: var(--nv-surface); }
.mt-near ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .8125rem; }
.mt-near p { margin: 8px 0 0; font-size: .8125rem; }
.mt-near small { display: block; margin-top: 6px; color: var(--nv-muted); font-size: .75rem; }
.mt-routes { display: grid; gap: 0; }
.mt-route { display: block; font-size: .8125rem; border-bottom: 1px solid var(--nv-line); }
.mt-route > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; min-height: 44px; padding: 6px 0; cursor: pointer; }
.mt-route-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-route-time { font-weight: 650; font-variant-numeric: tabular-nums; }
.mt-route-chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.mt-route-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 21px; padding: 0 5px; border-radius: 3px; background: var(--nv-ink); color: white; font-size: .6875rem; font-weight: 600; }
.mt-route-chip.is-walk { padding: 0; background: none; color: var(--nv-muted); }
.mt-route-chip svg { width: 17px; height: 17px; }
.mt-route[open] { padding-bottom: 8px; }
.mt-share-options { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.mt-pop[open] { flex-basis: 100%; }
.mt-route .mt-badge { margin-top: 1px; }
.mt-route p { margin: 2px 0 0; }
.mt-route.is-loading { color: var(--nv-muted); animation: mt-pulse 1.2s ease-in-out infinite; }
.mt-route.is-loading .mt-badge { background: var(--nv-line); }
.mt-route-steps { color: var(--nv-ink); }
.mt-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--nv-ink); font: inherit; text-decoration: underline; text-decoration-color: var(--nv-accent); text-decoration-thickness: 2px; cursor: pointer; }
.mt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-btn { min-height: 36px; }
.mt-muted { color: var(--nv-muted); }
.mt-note { color: var(--nv-muted); font-size: .8125rem; margin: 10px 0 0; max-width: 68ch; }
.mt-error { padding: 14px; border: 1px solid var(--nv-bad); border-radius: var(--nv-r); background: var(--nv-surface); display: grid; gap: 10px; justify-items: start; }
.mt-error p { margin: 0; }
.mt-skel { height: 118px; border-radius: var(--nv-r); background: var(--nv-surface); border: 1px solid var(--nv-line); animation: mt-pulse 1.2s ease-in-out infinite; }
.mt-skel + .mt-skel { margin-top: 12px; }
@keyframes mt-pulse { 50% { opacity: .5; } }

/* map pins and legend */
.mt-pin-wrap { background: none; border: 0; }
.mt-pin-origin, .mt-pin-spot, .mt-pin-tag { position: absolute; display: grid; place-items: center; font-family: var(--nv-font); font-weight: 700; line-height: 1; box-sizing: border-box; }
.mt-pin-origin { left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--nv-ink); color: #fff; border: 2px solid #fff; font-size: 12px; box-shadow: 0 2px 6px rgba(18, 19, 22, .35); }
.mt-pin-spot { left: 7px; top: 7px; width: 30px; height: 30px; border-radius: var(--nv-r); background: var(--nv-accent); color: var(--nv-accent-ink); border: 2px solid var(--nv-ink); font-size: 14px; box-shadow: 0 2px 6px rgba(18, 19, 22, .3); }
.mt-pin-spot.is-selected { left: 4px; top: 4px; width: 36px; height: 36px; background: var(--nv-ink); color: var(--nv-accent); border-color: var(--nv-accent); font-size: 16px; }
.mt-pin-tag { left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--nv-ink); border: 2px solid var(--nv-ink); font-size: 10px; }
.leaflet-marker-icon:focus-visible { outline: 3px solid var(--nv-ink); outline-offset: -8px; border-radius: 50%; }
.mt-legend { display: grid; gap: 4px; padding: 8px 10px; background: rgba(255,255,255,.94); border: 1px solid var(--nv-line); border-radius: var(--nv-r); font: 500 .75rem var(--nv-font); color: var(--nv-ink); }
.mt-legend strong { display: block; margin-bottom: 0; font-weight: 600; }
.mt-legend-row { display: flex; align-items: center; gap: 8px; }
.mt-legend-row i { width: 18px; height: 12px; border: 1px solid #6b6f77; border-radius: 2px; }
.mt-legend small { color: var(--nv-muted); }
.mt-legend-ramp { display: flex; width: 152px; height: 10px; }
.mt-legend-ramp i { flex: 1; }
.mt-legend-range { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.mt-area-tooltip { width: max-content; max-width: 190px; white-space: normal; }

/* content under the tool */
.mt-content { padding-bottom: 40px; }
.mt-content .rf-scroll { max-width: 100%; overflow-x: auto; }
.mt-sec { padding: 32px 0 8px; border-top: 1px solid var(--nv-line); }
.mt-sec:first-child { border-top: 0; }
.mt-sec h2 { margin: 0 0 14px; }
.mt-sec .nv-tag { margin-bottom: 10px; }
.mt-sec p, .mt-sec .mt-note { max-width: 72ch; }
.mt-sec h3 { margin: 20px 0 4px; font: 600 1rem/1.3 var(--nv-font); }
.mt-sec a:not(.nv-btn) { color: var(--nv-ink); text-decoration: underline; text-decoration-color: var(--nv-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mt-lede { margin: 0 0 12px; max-width: 66ch; font-size: 1.0625rem; }
.mt-table th[scope="row"] { font: 600 .9375rem var(--nv-font); text-transform: none; letter-spacing: 0; color: var(--nv-ink); }
.mt-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-table th, .mt-table td { vertical-align: middle; }
.mt-table td:last-child { white-space: normal; }
.mt-content .nv-btn { box-sizing: border-box; min-height: 36px; padding: 0 14px; font-size: .875rem; }
.mt-open { min-height: 36px; }
.mt-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; }
ol.mt-steps li { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r); padding: 20px; }
ol.mt-steps li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 12px; border-radius: var(--nv-r); background: var(--nv-accent); color: var(--nv-accent-ink); font: 600 .875rem var(--nv-mono); }
.mt-steps h3 { margin: 0 0 8px; font-size: 1rem; }
.mt-steps p { margin: 0; color: var(--nv-muted); }
.mt-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 72ch; }
.mt-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mt-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; }
.mt-links a { display: inline-flex; align-items: center; min-height: 44px; }
.mt-faq details { border-top: 1px solid var(--nv-line); padding: 14px 0; }
.mt-faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.mt-faq p { margin: 4px 0 8px; max-width: 70ch; color: var(--nv-muted); }

@media (min-width: 821px) {
    .mt-form { position: sticky; top: 0; z-index: 3; margin: -16px -20px 0; padding: 16px 20px 12px; background: var(--nv-raised); border-bottom: 1px solid var(--nv-line); }
    .mt-sheet[data-state="form"] .mt-form { border-bottom: 0; }
}
/* phone: map first, panel as a bottom sheet */
@media (max-width: 820px) {
    .mt-app { display: block; height: calc(100dvh - var(--nv-bar-h)); min-height: 480px; }
    .mt-map { position: absolute; inset: 0; }
    .mt-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 64dvh; border-right: 0; border-top: 1px solid var(--nv-ink); border-radius: var(--nv-r) var(--nv-r) 0 0; box-shadow: 0 -12px 32px -16px rgba(18, 19, 22, .45); }
    .mt-handle { display: block; position: relative; width: 100%; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
    .mt-handle::before { content: ""; position: absolute; left: calc(50% - 28px); top: 11px; width: 56px; height: 5px; border-radius: 3px; background: var(--nv-ink); opacity: .35; }
    .mt-head { padding: 0 16px; }
    .mt-h1 { font-size: 1.0625rem; }
    .mt-sub { font-size: .875rem; margin-top: 4px; }
    .mt-body { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
    .mt-sheet[data-state="results"] .mt-h1 { font-size: 1.0625rem; }
    .mt-sheet[data-state="results"] { max-height: 64dvh; }
    .mt-sheet.is-collapsed { max-height: none; }
    .mt-sheet.is-collapsed .mt-body, .mt-sheet.is-collapsed .mt-sub { display: none; }
    .mt-sheet.is-collapsed .mt-peek:not(:empty) { display: block; margin: 2px 0 12px; }
    .mt-people { gap: 4px; }
    .mt-person { min-height: 40px; }
    .mt-person .mt-input { min-height: 38px; }
    .mt-person .mt-badge { width: 26px; height: 26px; }
    .mt-add-row { margin-top: 6px; }
    .mt-filters { margin-top: 8px; padding-top: 8px; gap: 4px; }
    .mt-filter-label { width: 5.25rem; white-space: nowrap; }
    .mt-filter { gap: 4px 8px; }
    .mt-chip { padding: 0 10px; }
    .mt-results { margin-top: 10px; }
    .mt-steps { grid-template-columns: 1fr; }
    .mt-bar-row { grid-template-columns: 24px minmax(0, 5rem) minmax(0, 1fr) 3.25rem; }
    .mt-legend { gap: 2px; padding: 6px 8px; font-size: .6875rem; }
    .mt-legend small { display: none; }
    .mt-legend-row i { width: 14px; height: 9px; }
    .mt-lead { font-size: .9375rem; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .mt-bar, .mt-chip, .mt-icon-btn { transition: none; }
    .mt-route.is-loading, .mt-skel { animation: none; }
}