/* ============================================================================
   Trip map — "carto-neutral" visual system (direction 1a)
   The basemap carries the color; the UI is ink + paper, data is set in
   monospace, and each place gets a single primary action.
   ============================================================================ */

:root {
    --ink: #14201e;
    --ink-2: #4b5754;
    --muted: #8b9491;
    --paper: #fbfaf7;
    --white: #ffffff;
    --sand: #f4f2ec;
    --hair: rgba(20, 32, 30, .10);
    --hair-soft: rgba(20, 32, 30, .06);
    --green: #27655e;
    --green-dark: #1b4b45;
    --accent: var(--green);
    --ocre: #b57a1e;
    --coral: #c8553d;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --shadow-card: 0 22px 50px -30px rgba(15, 35, 32, .55), 0 1px 2px rgba(15, 35, 32, .05);
    --shadow-float: 0 14px 30px -20px rgba(15, 35, 32, .5);
}

* { box-sizing: border-box; }

/* Neutralize the browser's default focus ring globally (a mobile tap triggers :focus, not
   :focus-visible, which almost never fires on tap) — without this, any button/link can end up
   with an unexpected native ring. Replaced with an outline that matches the design, shown only
   for keyboard navigation (:focus-visible), and always inside the box (negative outline-offset)
   so it never visually "grows" the element. A global rule rather than one per button: more
   robust, and it also covers buttons added later.
   Special cases (e.g. Leaflet's +/- controls, which aren't plain <button>/<a> elements) keep
   their own dedicated rule further down in this file. */
button:focus, a:focus, [tabindex]:focus { outline: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--green); outline-offset: -2px;
}

body {
    font-family: var(--font-sans);
    margin: 0; padding: 0;
    background: #e8e6e0;
    color: var(--ink);
    overflow: hidden;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

#map { height: 100vh; height: 100dvh; width: 100vw; }

/* The basemap is muted so the ink-colored UI stays legible on top of it.
   The filter applies to the tiles only, never to the markers. */
.leaflet-tile-pane { filter: saturate(.45) brightness(1.05) contrast(.96); }

a { color: var(--green); text-decoration-color: rgba(39, 101, 94, .35); }
a:hover { color: var(--ink); }
::selection { background: rgba(39, 101, 94, .18); }

.sb-scroll, .timeline-list, .search-results { scrollbar-width: thin; scrollbar-color: rgba(20,32,30,.18) transparent; }
.sb-scroll::-webkit-scrollbar, .timeline-list::-webkit-scrollbar { width: 7px; }
.sb-scroll::-webkit-scrollbar-thumb, .timeline-list::-webkit-scrollbar-thumb { background: rgba(20,32,30,.16); border-radius: 99px; }
.sb-scroll::-webkit-scrollbar-track, .timeline-list::-webkit-scrollbar-track { background: transparent; }

/* ---------- Open button ---------- */
.burger-btn {
    position: absolute; top: 16px; left: 16px; z-index: 1000;
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 16px 0 12px;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--hair); border-radius: 12px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    cursor: pointer;
    box-shadow: var(--shadow-float);
    transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease;
}
.burger-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -20px rgba(15,35,32,.55); }
.burger-btn svg { flex-shrink: 0; color: var(--ink); }
.burger-btn .burger-mark { width: 22px; height: 22px; display: block; flex-shrink: 0; }
body.panel-open .burger-btn { opacity: 0; pointer-events: none; transform: translateX(-8px); }

/* ---------- Panel ---------- */
.sidebar {
    position: absolute; top: 14px; left: 14px;
    width: 336px; max-height: calc(100dvh - 28px);
    background: var(--paper);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    z-index: 1001;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(-100% - 26px));
    transition: transform .38s cubic-bezier(.22,.75,.2,1);
}
.sidebar.open { transform: none; }

/* Grip indicator for tablets: the panel slides horizontally in this layout (anchored left), so
   a vertical bar on the right edge matches the actual gesture direction, rather than a
   horizontal bar at the top that would wrongly suggest vertical dragging. Restricted to wide
   layouts (min-width/min-height): on small screens the panel becomes a vertical slide-up sheet
   with its own horizontal grip at the top (media query further down) — the two must never
   appear at the same time. */
@media (hover: none) and (pointer: coarse) and (min-width: 561px) and (min-height: 561px) {
    .sidebar::before {
        content: ''; position: absolute; top: 50%; right: 8px; left: auto; transform: translateY(-50%);
        width: 4px; height: 40px; border-radius: 99px; background: rgba(20,32,30,.18);
    }
}

.sb-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hair-soft);
}
.sb-mark { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.sb-head > div:not(.sb-head-actions) { flex: 1; min-width: 0; }
.sb-eyebrow {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.sb-head h3 {
    margin: 4px 0 0; font-family: var(--font-sans); font-weight: 600;
    font-size: 15px; line-height: 1.15; letter-spacing: -.015em; color: var(--ink);
}
.close-btn {
    flex-shrink: 0; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: 8px;
    font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer;
    transition: background .15s, color .15s;
}
.close-btn:hover { background: var(--sand); color: var(--ink); }

.sb-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 4px; }
.sb-foot { padding: 10px 16px 14px; border-top: 1px solid var(--hair-soft); }

/* ---------- Countdown ---------- */
.countdown-badge {
    display: none; align-items: baseline; gap: 8px;
    padding: 9px 12px; margin-bottom: 12px;
    background: var(--white);
    border: 1px solid var(--hair); border-radius: 10px;
}
.countdown-badge.visible { display: flex; }
.cd-k {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ocre);
}
.cd-v { font-size: 12.5px; font-weight: 500; color: var(--ink); }

/* ---------- Stats ---------- */
.trip-summary {
    display: grid; grid-template-columns: 1fr 1fr;
    margin-bottom: 18px;
    border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
    background: var(--white);
}
.trip-summary-item { padding: 10px 13px; }
.trip-summary-item:nth-child(2), .trip-summary-item:nth-child(4) { border-left: 1px solid var(--hair-soft); }
.trip-summary-item:nth-child(3), .trip-summary-item:nth-child(4) { border-top: 1px solid var(--hair-soft); }
.stat-k {
    font-family: var(--font-mono); font-size: 9px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.stat-v { display: flex; align-items: baseline; gap: 4px; min-height: 20px; }
.stat-v b {
    font-family: var(--font-mono); font-weight: 500;
    font-size: 15px; line-height: 1; color: var(--ink); letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.stat-v small { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--muted); }
.stat-v i { font-family: var(--font-mono); font-size: 10.5px; font-style: normal; color: var(--muted); }

/* ---------- Section titles ---------- */
.section-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 10px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* ---------- Timeline controls ---------- */
.timeline-section { margin-bottom: 18px; }
.timeline-controls { display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; }
.play-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--ink); color: var(--paper);
    border: none; border-radius: 10px; padding: 0 12px; height: 36px;
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
    cursor: pointer; transition: background .18s;
}
.play-btn:hover { background: #0c1614; }
.nav-btn {
    flex-shrink: 0; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); color: var(--ink-2);
    border: 1px solid var(--hair); border-radius: 10px;
    cursor: pointer; transition: background .15s, color .15s;
}
.nav-btn:hover:not(:disabled) { background: var(--sand); color: var(--ink); }
.nav-btn:disabled { opacity: .3; cursor: default; }

.overview-btn {
    width: 100%; margin: 0 0 12px; height: 34px;
    background: var(--white); color: var(--ink-2);
    border: 1px solid var(--hair); border-radius: 10px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.overview-btn:hover { background: var(--sand); color: var(--ink); }
.overview-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Timeline slider: thin rail, no large colored thumb */
.timeline-slider {
    width: 100%; margin: 0 0 14px; display: block;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    height: 3px; border-radius: 99px; background: rgba(20,32,30,.14); outline: none;
}
.timeline-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: rgba(20,32,30,.14); }
.timeline-slider::-moz-range-track { height: 3px; border-radius: 99px; background: rgba(20,32,30,.14); }
.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 13px; height: 13px; margin-top: -5px; border-radius: 50%;
    background: var(--day-color, var(--ink)); border: 2px solid var(--paper);
    box-shadow: 0 2px 5px rgba(15,35,32,.4); cursor: pointer;
}
.timeline-slider::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--day-color, var(--ink)); border: 2px solid var(--paper);
    box-shadow: 0 2px 5px rgba(15,35,32,.4); cursor: pointer;
}
.timeline-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--green); outline-offset: 2px; }
.timeline-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Selected day ---------- */
.current-day-badge {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    padding: 11px 13px;
    background: var(--white);
    border: 1px solid var(--hair); border-bottom: 0;
    border-left: 3px solid var(--day-color, var(--ink));
    border-radius: 5px 12px 0 0;
}
.db-main {
    font-family: var(--font-sans); font-weight: 600; font-size: 14.5px;
    line-height: 1.25; letter-spacing: -.015em; color: var(--ink);
}
.db-main em {
    font-style: normal; font-family: var(--font-mono); font-weight: 400;
    color: var(--muted); font-size: 11.5px; margin-left: 6px;
}
.db-theme {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--day-color, var(--ocre));
}

.day-info-card {
    background: var(--white);
    border: 1px solid var(--hair); border-top: 0;
    border-left: 3px solid var(--day-color, var(--ink));
    border-radius: 0 0 12px 5px;
    padding: 0; margin-bottom: 16px;
}
.weather-sun-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair-soft); }
.weather-badge, .sun-badge { padding: 10px 13px; }
.sun-badge { border-left: 1px solid var(--hair-soft); }
.wk {
    font-family: var(--font-mono); font-size: 9px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.wv { display: block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.wl { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
#weatherBadge { display: block; text-decoration: none; color: inherit; cursor: pointer; }
#weatherBadge:not([href]), #weatherBadge[href="#"] { cursor: default; }

.route-info-badge {
    display: block; padding: 10px 13px;
    border-top: 1px solid var(--hair-soft);
    background: var(--paper);
    border-radius: 0 0 11px 11px;
}
.rb-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.rb-main b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.rb-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,32,30,.25); }
.rb-seg, .rb-load { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.rb-note { font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 5px; }

/* ---------- Day list ---------- */
.timeline-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.timeline-item {
    position: relative; cursor: pointer;
    display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px;
    padding: 8px 10px 8px 12px;
    border-radius: 8px;
    box-shadow: inset 3px 0 0 var(--item-color, var(--hair));
    transition: background .15s, box-shadow .15s;
}
.timeline-item + .timeline-item { margin-top: 1px; }
.timeline-item:hover { background: var(--sand); }
.timeline-item.active { background: var(--sand); box-shadow: inset 4px 0 0 var(--item-color, var(--ink)); }
.ti-day {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: center;
    display: flex; align-items: center; justify-content: center;
    min-width: 30px; height: 28px; padding: 0 5px;
    border-radius: 8px;
    background: var(--item-color, var(--muted));
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0; text-transform: uppercase; color: var(--white);
}
.timeline-item .ti-title {
    grid-column: 2; grid-row: 1;
    font-size: 12.5px; line-height: 1.4; font-weight: 400; color: var(--ink-2);
}
.timeline-item.active .ti-title { color: var(--ink); font-weight: 500; }
.ti-date {
    grid-column: 2; grid-row: 2;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}

/* ---------- Collapsible sections ---------- */
.collapsible-section {
    margin: 0 0 8px;
    border: 1px solid var(--hair); border-radius: 12px;
    background: var(--white); overflow: hidden;
}
.collapsible-section summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px;
    transition: background .15s;
}
.collapsible-section summary::-webkit-details-marker { display: none; }
.collapsible-section summary:hover { background: var(--sand); }
.collapsible-section[open] summary { border-bottom: 1px solid var(--hair-soft); }
.cs-label { flex: 1; text-align: left; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.cs-hint { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--muted); }
.cs-chevron { flex-shrink: 0; color: var(--muted); transition: transform .22s cubic-bezier(.22,.75,.2,1); }
.collapsible-section[open] .cs-chevron { transform: rotate(180deg); }
.collapsible-section[open] .cs-hint { display: none; }
.cs-body { padding: 4px 13px 12px; }

.filter-group { display: flex; flex-direction: column; }
.filter-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-2);
    cursor: pointer; border-radius: 6px;
}
.filter-item + .filter-item { box-shadow: inset 0 1px 0 var(--hair-soft); }
.filter-item:hover { color: var(--ink); }
.filter-item input[type=checkbox] {
    width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; flex-shrink: 0;
}

.legend-box { font-size: 12px; color: var(--ink-2); }
.legend-sub {
    font-family: var(--font-mono); font-size: 9px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    margin: 4px 0 6px;
}
.legend-sub + .legend-sub, .legend-dates + .legend-sub { margin-top: 14px; }
.legend-dates { display: flex; flex-direction: column; }
.legend-row { display: grid; grid-template-columns: 12px 1fr; align-items: start; gap: 0 9px; padding: 6px 0; }
.legend-row + .legend-row { box-shadow: inset 0 1px 0 var(--hair-soft); }
.legend-row .legend-color { margin-top: 3px; }
.legend-row b {
    display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.legend-row span.legend-theme { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.legend-key { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 0 8px; padding: 5px 0; line-height: 1.45; }
.legend-color { width: 12px; height: 12px; border-radius: 3px; }
.legend-icon { width: 18px; height: 18px; }
.legend-dashed { width: 13px; height: 13px; border: 1.5px dashed; border-radius: 50%; margin: 0 auto; }
.legend-glyph { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Legend dot: same visual language as the map markers */
.legend-dot {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); border: 1.5px solid var(--ink);
    font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink);
}
.legend-dot.is-acc { background: var(--green); border-color: var(--green); color: var(--paper); }
.legend-dot.is-resto { border-color: var(--ocre); color: var(--ocre); }
.legend-dot.is-specialty { background: var(--ocre); border-color: var(--ocre); color: var(--white); }
.legend-dot.is-hiking { border-color: var(--green); color: var(--green); }
.legend-dot.is-tbd { border-style: dashed; border-color: var(--muted); color: var(--muted); }

.print-btn {
    width: 100%; height: 36px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--white); color: var(--ink-2);
    border: 1px solid var(--hair); border-radius: 10px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: background .15s, color .15s;
}
.print-btn:hover { background: var(--sand); color: var(--ink); }

/* ============================================================================
   Markers: numbered ink dots instead of multicolored icons
   ============================================================================ */
.dot-marker {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--paper); border: 1.5px solid var(--ink);
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; line-height: 1;
    color: var(--ink);
    box-shadow: 0 3px 9px -4px rgba(15,35,32,.65);
    transition: transform .15s ease;
}
.leaflet-marker-icon:hover .dot-marker { transform: scale(1.12); }
.dot-marker.is-step { background: var(--paper); }
.dot-marker.is-acc { background: var(--green); border-color: var(--paper); color: var(--paper); }
.dot-marker.is-resto { border-color: var(--ocre); color: var(--ocre); }
.dot-marker.is-specialty { background: var(--ocre); border-color: var(--paper); color: var(--white); }
.dot-marker.is-hiking { border-color: var(--green); color: var(--green); }
.dot-marker svg { width: 14px; height: 14px; display: block; }
.dot-marker.is-acc svg, .dot-marker.is-specialty svg { width: 15px; height: 15px; }
.dot-marker.is-tbd { border-style: dashed; border-color: var(--muted); color: var(--muted); background: rgba(251,250,247,.9); box-shadow: none; }
.leaflet-marker-icon.is-selected .dot-marker {
    background: var(--ink); border-color: var(--paper); color: var(--paper);
    transform: scale(1.18); box-shadow: 0 8px 20px -6px rgba(15,35,32,.75);
}

/* Step number badge attached to the dot */
.step-number {
    display: flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--ink); color: var(--paper);
    border: 1.5px solid var(--paper); border-radius: 99px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: 0; box-shadow: 0 2px 5px rgba(15,35,32,.4);
}

/* ============================================================================
   Place card (replaces the Leaflet popup) — always in the same spot,
   it never covers the selected dot.
   ============================================================================ */
.place-card {
    position: absolute; bottom: 14px; left: 14px; z-index: 1002;
    width: 340px; max-height: calc(100dvh - 28px);
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--hair); border-radius: 16px;
    box-shadow: 0 26px 55px -30px rgba(15,35,32,.6), 0 1px 2px rgba(15,35,32,.05);
    overflow: hidden;
    transform: translateY(14px); opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.22,.75,.2,1), opacity .2s ease, left .32s cubic-bezier(.22,.75,.2,1);
}
.place-card.open { transform: none; opacity: 1; pointer-events: auto; }
body.panel-open .place-card { left: 364px; }
.pc-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 0; }
.pc-head-spacer { flex: 1; }
.pc-close {
    flex-shrink: 0; width: 26px; height: 26px; margin: -4px -4px 0 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 7px;
    font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer;
}
.pc-close:hover { background: var(--sand); color: var(--ink); }
.pc-body { padding: 0 16px 14px; overflow-y: auto; }
.pc-body .popup-actions { margin: 0; }
.pc-foot { padding: 12px 16px; border-top: 1px solid var(--hair-soft); background: var(--white); }

/* ---------- Card / popup content (same classes as the engine) ---------- */
.popup-eyebrow {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.popup-title {
    font-family: var(--font-sans); font-weight: 600; font-size: 19px;
    line-height: 1.2; letter-spacing: -.025em; color: var(--ink); margin-bottom: 4px;
}
.popup-desc, .popup-list { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.popup-list { font-family: var(--font-sans); }
.popup-list b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink); }
.popup-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.popup-note {
    margin-top: 10px; padding: 9px 11px;
    background: var(--white); border: 1px solid var(--hair-soft); border-radius: 9px;
    font-size: 12px; line-height: 1.55; color: var(--ink-2);
}

/* Only one primary action; the rest stay subtle */
.popup-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.gmaps-btn, .waze-btn, .rando-btn, .info-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 14px; border-radius: 10px;
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.gmaps-btn {
    flex: 1; min-width: 130px;
    background: var(--green); color: var(--paper) !important; font-weight: 600;
}
.gmaps-btn:hover { background: var(--green-dark); }
.waze-btn, .rando-btn, .info-btn {
    background: var(--white); color: var(--ink-2) !important;
    border: 1px solid var(--hair);
}
.waze-btn:hover, .rando-btn:hover, .info-btn:hover { background: var(--sand); color: var(--ink) !important; }
.leaflet-popup-content a:not([class]) { color: var(--green); font-weight: 500; }

/* Residual Leaflet popup (day routes, grouped activities): same visual language */
.leaflet-popup-content-wrapper {
    border-radius: 14px; padding: 2px;
    background: var(--paper);
    box-shadow: 0 24px 50px -28px rgba(15,35,32,.6), 0 1px 2px rgba(15,35,32,.06);
}
.leaflet-popup-content {
    margin: 14px 16px; min-width: 200px; max-width: 268px;
    font-family: var(--font-sans);
    font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.leaflet-popup-content .popup-title { font-size: 17px; }
.leaflet-popup-content .gmaps-btn { min-width: 118px; }
.leaflet-popup-tip { background: var(--paper); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); font-size: 16px; padding: 8px 8px 0 0; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--ink); }

/* ---------- Leaflet styling ---------- */
.leaflet-bar, .leaflet-control-layers {
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-float) !important;
    overflow: hidden;
}
/* !important + explicitly targeting .leaflet-touch: Leaflet adds this class on touch devices
   and then applies ITS OWN default sizing rules (different from ours), which are more specific
   than ".leaflet-bar a" alone. Without this, the two rule sets fought depending on state
   (resting vs. tapped), producing different sizes only on mobile — never on desktop, where
   .leaflet-touch doesn't exist. */
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-bar a:hover {
    background: var(--paper); color: var(--ink);
    border-bottom-color: var(--hair-soft);
    width: 34px !important; line-height: 34px !important; height: 34px !important;
    font-weight: 400;
    display: flex; align-items: center; justify-content: center;
}
.leaflet-bar a svg { flex-shrink: 0; }
.leaflet-bar a:hover, .leaflet-touch .leaflet-bar a:hover { background: var(--sand); }
/* Leaflet's +/- buttons visually grew on tap (the browser's default active/focus state was
   never neutralized): transform is explicitly pinned to none across every state, and the
   default focus ring is replaced with an outline that doesn't change the box's size (outline,
   not border/padding). */
.leaflet-bar a,
.leaflet-bar a:active,
.leaflet-bar a:focus,
.leaflet-bar a:hover,
.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-bar a:active,
.leaflet-touch .leaflet-bar a:focus,
.leaflet-touch .leaflet-bar a:hover {
    transform: none !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.leaflet-bar a:focus,
.leaflet-bar a:focus-visible,
.leaflet-touch .leaflet-bar a:focus,
.leaflet-touch .leaflet-bar a:focus-visible {
    outline: 2px solid var(--green); outline-offset: -2px;
}
/* Custom map buttons: basemap switcher + geolocation */
.map-btn {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    background: var(--paper); color: var(--ink-2);
    border: 1px solid var(--hair); border-radius: 10px;
    box-shadow: var(--shadow-float);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.map-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.map-btn:hover { background: var(--white); color: var(--ink); border-color: var(--ink-2); }
.map-btn:active { transform: scale(.94); }
.map-btn:focus { outline: none; }
.map-btn:focus,
.map-btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.layers-ctl { position: relative; }
.layers-ctl.is-open .map-btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.layers-menu {
    position: absolute; top: 0; right: 44px;
    min-width: 148px; padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
    box-shadow: var(--shadow-float);
    opacity: 0; visibility: hidden;
    transform: translateX(6px) scale(.97); transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.layers-ctl.is-open .layers-menu { opacity: 1; visibility: visible; transform: none; }
.lm-title {
    padding: 2px 8px 6px;
    font-family: var(--font-mono); font-size: 9px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.layers-opt {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer; text-align: left;
    font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
    transition: background .14s ease, color .14s ease;
}
.layers-opt:hover { background: var(--sand); color: var(--ink); }
.layers-opt .lo-tick {
    width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid var(--hair); background: var(--white);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.layers-opt.is-on { color: var(--ink); font-weight: 500; }
.layers-opt.is-on .lo-tick {
    border-color: var(--green); background: var(--green);
    box-shadow: inset 0 0 0 2.5px var(--white);
}

.locate-btn.locating svg { animation: locate-spin 1s linear infinite; }
.locate-btn.active { background: var(--green); color: var(--white); border-color: var(--green); }
.locate-btn.active:hover { background: var(--green); color: var(--white); border-color: var(--ink); }
@keyframes locate-spin { to { transform: rotate(360deg); } }

.user-loc-dot { position: relative; }
.user-loc-dot .loc-pulse {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: var(--green); opacity: .5;
    animation: loc-pulse 2s ease-out infinite;
}
.user-loc-dot .loc-dot {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: var(--green); border: 2.5px solid var(--paper);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
@keyframes loc-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.4); opacity: 0; } }

.locate-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
    background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    max-width: 86vw; text-align: center; opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; z-index: 2000;
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.locate-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Same "small dark pill at the bottom" pattern as .locate-toast above, kept as its own class
   rather than shared: this one is created by carte.html's own loader script (offline fallback,
   before app.mjs even loads), not by app.mjs. */
.offline-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
    background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    max-width: 86vw; text-align: center; opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; z-index: 2000;
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.offline-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.leaflet-control-attribution {
    font-family: var(--font-mono); font-size: 9.5px;
    background: rgba(251,250,247,.85) !important; color: var(--muted);
    border-radius: 6px 0 0 0; padding: 3px 8px;
}
.leaflet-control-scale-line {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; color: var(--ink-2);
    background: rgba(251,250,247,.85); border-color: var(--ink-2); border-radius: 0 0 4px 4px;
    padding: 1px 6px;
}

/* ---------- Place search ---------- */
.search-wrap { position: relative; margin-bottom: 14px; }
.search-field {
    display: flex; align-items: center; gap: 9px;
    padding: 0 12px; height: 38px;
    background: var(--white); border: 1px solid var(--hair); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.search-field:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(20,32,30,.07);
}
.search-field svg { flex-shrink: 0; color: var(--muted); }
.search-field input {
    flex: 1; min-width: 0; border: 0; outline: none; background: none;
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 400; color: var(--ink);
}
.search-field input::placeholder { color: var(--muted); }
.search-clear {
    border: 0; background: none; cursor: pointer; padding: 2px 4px;
    font-size: 15px; line-height: 1; color: var(--muted); display: none;
}
.search-field.filled .search-clear { display: block; }
.search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5;
    max-height: 264px; overflow-y: auto;
    background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
    box-shadow: 0 22px 44px -24px rgba(15,35,32,.5);
    display: none; padding: 5px;
}
.search-results.open { display: block; }
.sr-item {
    width: 100%; display: block; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 8px; padding: 8px 9px;
    font-family: var(--font-sans);
}
.sr-item:hover, .sr-item:focus-visible { background: var(--sand); outline: none; }
.sr-name { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sr-meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--muted); }
.sr-empty { padding: 10px; font-size: 12px; color: var(--muted); }

/* ---------- Day card: overnight / departure / plan B ---------- */
.day-extra { border-top: 1px solid var(--hair-soft); display: grid; }
.dx-item { padding: 10px 13px; }
.dx-item + .dx-item { border-top: 1px solid var(--hair-soft); }
.dx-k {
    font-family: var(--font-mono); font-size: 9px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.dx-v { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.dx-v small { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.rb-alert {
    display: flex; gap: 7px; margin-top: 8px; padding: 8px 10px;
    background: var(--white);
    border: 1px solid rgba(181,122,30,.35);
    border-radius: 9px; font-size: 11.5px; line-height: 1.45; font-weight: 500; color: var(--ocre);
}

/* ---------- To book ---------- */
.booking-list { display: flex; flex-direction: column; }
.booking-item {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
    width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 8px; padding: 9px 6px;
    font-family: var(--font-sans);
}
.booking-item + .booking-item { box-shadow: inset 0 1px 0 var(--hair-soft); }
.booking-item:hover { background: var(--sand); }

.hub-back-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .04em; color: var(--muted); text-decoration: none;
    margin-bottom: 14px;
}
.hub-back-link:hover, .hub-back-link:focus-visible { color: var(--ink); }
.hub-back-link svg { flex-shrink: 0; }

/* ---------- Trip switcher (see app/trip-switcher.mjs) ---------- */
.trip-switch-list { display: flex; flex-direction: column; }
.trip-switch-item {
    display: block; width: 100%; text-align: left; text-decoration: none;
    cursor: pointer; background: none; border: 0; border-radius: 8px; padding: 8px 6px;
    font-family: var(--font-sans);
}
.trip-switch-item + .trip-switch-item { box-shadow: inset 0 1px 0 var(--hair-soft); }
.trip-switch-item:hover { background: var(--sand); }
.trip-switch-item.is-current { cursor: default; }
.trip-switch-item.is-current:hover { background: none; }
.ts-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.ts-sub { font-size: 11px; font-family: var(--font-mono); color: var(--muted); margin-top: 1px; }
.bk-day {
    grid-row: span 2; align-self: start; margin-top: 1px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    color: var(--ink); background: none;
    padding: 2px 0; border-radius: 0;
}
.bk-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.bk-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); }

/* ---------- Mini locator map ---------- */
.mini-map-ctl {
    width: 128px; height: 104px; overflow: hidden;
    border: 1px solid var(--hair); border-radius: 10px;
    box-shadow: var(--shadow-float);
    background: var(--paper);
}
.mini-map-ctl .leaflet-container { width: 100%; height: 100%; background: #dfe4e3; }
@media (max-width: 560px), (max-height: 560px) { .mini-map-ctl { display: none; } }

/* ---------- Print ---------- */
#printView { display: none; }
@media print {
    @page { margin: 14mm 12mm; }
    body * { visibility: hidden; }
    #printView, #printView * { visibility: visible; }
    #printView {
        display: block; position: absolute; top: 0; left: 0; width: 100%;
        padding: 24px; font-family: var(--font-sans); color: #111;
    }
    #printView h1 {
        font-weight: 600; font-size: 20pt; letter-spacing: -.02em;
        margin: 0 0 4pt; padding-bottom: 8pt; border-bottom: 1pt solid #111;
    }
    #printView .print-day { margin: 0; padding: 12pt 0; page-break-inside: avoid; border-bottom: .5pt solid #ddd; }
    #printView .print-day:last-child { border-bottom: none; }
    #printView .print-head { display: flex; gap: 12pt; align-items: flex-start; }
    #printView .print-head-main { flex: 1; }
    #printView .print-meta {
        display: flex; flex-wrap: wrap; gap: 4pt 14pt;
        margin: 8pt 0 0; padding: 6pt 0; border-top: .5pt solid #bbb; border-bottom: .5pt solid #bbb;
        font-family: var(--font-mono); font-size: 9pt;
    }
    #printView .print-meta b { font-weight: 500; }
    #printView .print-meta span i { font-style: normal; color: #666; }
    #printView .print-day-title { font-size: 13pt; font-weight: 600; letter-spacing: -.02em; }
    #printView .print-day-theme {
        font-family: var(--font-mono); font-size: 8pt; font-weight: 500; letter-spacing: .12em;
        text-transform: uppercase; color: #666; margin-bottom: 3pt;
    }
    #printView ul { margin: 4pt 0; padding-left: 16pt; font-size: 10.5pt; line-height: 1.6; }
    #printView li.on-foot { font-style: italic; color: #444; }
}

/* ============================================================================
   Mobile: the panel and the place card become slide-up sheets;
   the map stays visible at all times.
   ============================================================================ */
@media (max-width: 560px), (max-height: 560px) {
    .burger-btn { top: 10px; left: 10px; height: 42px; }

    .sidebar {
        top: auto; bottom: 0; left: 0;
        width: 100vw; height: auto; max-height: 92dvh;
        border-radius: 18px 18px 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        transform: translateY(calc(100% + 20px));
        transition: transform .38s cubic-bezier(.22,.75,.2,1);
        box-shadow: 0 -20px 44px -26px rgba(15,35,32,.5);
    }
    .sidebar.open { transform: none; }
    .sidebar::before {
        content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 99px; background: rgba(20,32,30,.18);
    }
    .sb-head { padding: 16px 16px 10px; }
    .sb-scroll { padding: 12px 16px 4px; }
    .sb-foot { padding: 10px 16px 16px; }
    .timeline-list { max-height: 300px; }
    .weather-sun-row { grid-template-columns: 1fr; }
    .sun-badge { border-left: 0; border-top: 1px solid var(--hair-soft); }

    .place-card {
        left: 0; right: 0; bottom: 0; width: 100vw;
        max-height: 76dvh;
        border-radius: 18px 18px 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        transform: translateY(calc(100% + 20px));
        box-shadow: 0 -24px 50px -26px rgba(15,35,32,.6);
    }
    body.panel-open .place-card { left: 0; }
    .place-card.open { transform: none; }
    .place-card::before {
        content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 99px; background: rgba(20,32,30,.18);
    }
    .pc-head { padding: 20px 18px 0; }
    .pc-body { padding: 0 18px 16px; }
    .popup-title { font-size: 23px; }
    .popup-actions { gap: 9px; }
    .gmaps-btn { height: 50px; min-width: 100%; font-size: 15px; }
    .waze-btn, .rando-btn, .info-btn { flex: 1; height: 46px; font-size: 13.5px; }
    .pc-foot { padding: 12px 18px 22px; }
}

/* ==========================================================================
   Trip picker screen (shown when carte.html is opened without a valid
   ?trip= param, or a data file fails to load) — uses the same stylesheet
   as the rest of the app, no colors/values hardcoded ad hoc in JS.
   ========================================================================== */
.picker-wrap {
    min-height: 100dvh; width: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #e8e6e0; padding: 32px 20px;
}
.picker-inner { width: 100%; max-width: 440px; text-align: center; }
.picker-mark { width: 56px; height: 56px; margin: 0 auto 18px; display: block; }
.picker-eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
}
.picker-title {
    font-family: var(--font-sans); font-weight: 600; font-size: 26px; letter-spacing: -.01em;
    color: var(--ink); margin: 0 0 28px;
}
.picker-error {
    background: rgba(181,122,30,.12); border: 1px solid rgba(181,122,30,.3);
    color: var(--ocre); border-radius: 10px; padding: 10px 14px;
    font-size: 13px; margin: 0 0 20px; text-align: left;
}
.picker-form { display: flex; gap: 8px; margin: 0 0 28px; }
.picker-input {
    flex: 1; min-width: 0; height: 44px; padding: 0 14px;
    background: var(--paper); border: 1px solid var(--hair); border-radius: 10px;
    font-family: var(--font-mono); font-size: 13.5px; color: var(--ink);
}
.picker-input::placeholder { color: var(--muted); }
.picker-input:focus-visible { outline: 2px solid var(--green); outline-offset: -1px; }
.picker-submit {
    flex-shrink: 0; height: 44px; padding: 0 18px; border: none; border-radius: 10px;
    background: var(--green); color: var(--paper); font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
.picker-submit:hover { background: var(--green-dark); }
.picker-list { display: flex; flex-direction: column; gap: 10px; }
.picker-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--paper); border: 1px solid var(--hair); border-radius: 14px;
    padding: 14px 16px; text-align: left; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-float);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.picker-card:hover, .picker-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: var(--card-accent, var(--green));
}
.picker-card-mark {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    background: var(--card-accent, var(--green));
    display: flex; align-items: center; justify-content: center;
}
.picker-card-mark img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.picker-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.picker-card-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.picker-card-sub { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }
.picker-card-go {
    flex-shrink: 0; color: var(--card-accent, var(--green)); font-size: 18px; opacity: .7;
    transition: transform .15s ease, opacity .15s ease;
}
.picker-card:hover .picker-card-go { transform: translateX(3px); opacity: 1; }


/* ============================================================================
   Field bar — the only surface visible at all times during the trip.
   Row 1: the current day + weather + route (tap opens the itinerary).
   Row 2: the day's stops, one by one, with directions in a single tap.
   ============================================================================ */
.field-bar {
    position: fixed; z-index: 1003;
    left: 50%; transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(520px, calc(100vw - 20px));
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--hair); border-radius: 18px;
    box-shadow: 0 26px 55px -30px rgba(15,35,32,.6), 0 1px 2px rgba(15,35,32,.06);
    overflow: hidden;
    transition: transform .38s cubic-bezier(.22,.75,.2,1), width .38s cubic-bezier(.22,.75,.2,1), opacity .2s ease;
}
/* transform rather than margin-left: consistent with .sidebar and .place-card, which already
   shift via transform (GPU-accelerated, smoother than a property that retriggers layout). */
body.panel-open .field-bar { transform: translateX(calc(-50% + 196px)); width: min(520px, calc(100vw - 420px)); }

/* Collapse handle: a thin strip at the top of the bar; tap it to hide/show the stops row
   (fb-actions). The day summary (fb-day) always stays visible. */
.fb-collapse {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 18px; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--muted);
}
.fb-collapse:hover { background: var(--sand); }
.fb-collapse-chev { flex-shrink: 0; transition: transform .25s ease; }
.field-bar.collapsed .fb-collapse-chev { transform: rotate(180deg); }

/* Mobile grip indicator: signals that the bar can be dragged, replacing the chevron (tap,
   desktop) which doesn't make sense on touch. Decorative only — the gesture works on the
   whole bar. */
.fb-grip { display: none; align-items: center; justify-content: center; width: 100%; height: 16px; }
.fb-grip span { width: 32px; height: 4px; border-radius: 99px; background: rgba(20,32,30,.16); }
.fb-actions {
    overflow: hidden;
}
.field-bar.collapsed .fb-actions {
    display: none;
}

.fb-day {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 10px 12px;
    background: var(--white); border: 0; border-bottom: 1px solid var(--hair-soft);
    font-family: var(--font-sans); text-align: left; cursor: pointer;
    transition: background .15s;
}
.fb-day:hover { background: var(--sand); }
.fb-pill {
    flex-shrink: 0; min-width: 42px; height: 42px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px; background: var(--fb-color, var(--ink)); color: #fff;
    font-family: var(--font-mono); font-size: 15px; font-weight: 500;
}
.fb-day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-title {
    font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-meta {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,32,30,.3); flex-shrink: 0; }
.fb-today {
    flex-shrink: 0; height: 34px; padding: 0 11px;
    display: none; align-items: center;
    background: var(--white); color: var(--ocre);
    border: 1.5px solid rgba(181,122,30,.45); border-radius: 9px;
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fb-today.visible { display: flex; }
.fb-chev { flex-shrink: 0; color: var(--muted); }

.fb-actions { display: flex; align-items: stretch; gap: 8px; padding: 9px; }
.fb-arrow {
    flex-shrink: 0; width: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--hair); border-radius: 12px; cursor: pointer;
    transition: background .15s;
}
.fb-arrow:hover:not(:disabled) { background: var(--sand); }
.fb-arrow:disabled { opacity: .3; cursor: default; }
.fb-arrow svg { width: 20px; height: 20px; }

.fb-go {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 14px;
    background: var(--green); color: var(--paper) !important;
    border: 0; border-radius: 12px; text-decoration: none;
    font-family: var(--font-sans); transition: background .15s;
}
.fb-go:hover { background: var(--green-dark); }
.fb-go > svg { flex-shrink: 0; width: 20px; height: 20px; }
.fb-go-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-go-k {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase; color: rgba(251,250,247,.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-go-v {
    font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--paper);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-go.is-empty { background: var(--white); border: 1px solid var(--hair); pointer-events: none; }
.fb-go.is-empty .fb-go-k { color: var(--muted); }
.fb-go.is-empty .fb-go-v, .fb-go.is-empty > svg { color: var(--ink) !important; }

/* Map controls shift up above the bar, but only on mobile (see media query below): on desktop
   the bar is centered and narrow, so it never reaches the bottom-right corner (mini-map) or the
   left-side stack (scale) — nothing there needs to move. Shifting them anyway left an
   unnecessary gap under the mini-map. */
.locate-toast { bottom: calc(var(--fb-h, 135px) + 32px); }

/* The bar fades out when the place card would cover it */
body:has(.place-card.open) .field-bar { opacity: 0; pointer-events: none; }

@media (max-width: 560px), (max-height: 560px) {
    .field-bar { width: calc(100vw - 12px); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
    /* No offset for the Leaflet/OSM attribution here (unlike before): the bar, nearly
       full-width on mobile, already covers it naturally — it stays "behind" rather than
       being pushed into visible space just above. */
    body.panel-open .field-bar { margin-left: 0; opacity: 0; pointer-events: none; }
    .fb-arrow { width: 50px; }
    .fb-go { height: 54px; }
}

/* Chevron (tap) vs. grip (drag): depends on the device's touch capability, not screen size —
   a tablet is touch-based but exceeds the width/height threshold above, so it still needs the
   drag gesture and its visual indicator. */
@media (hover: none) and (pointer: coarse) {
    .fb-collapse { display: none; }
    .fb-grip { display: flex; }
}

/* Phone in a car mount: short landscape screen */
@media (max-height: 480px) and (orientation: landscape) {
    .fb-day { padding: 7px 12px; }
    .fb-pill { height: 36px; min-width: 36px; }
    .fb-go, .fb-arrow { height: 46px; }
}