/* ==========================================================================================================
   The trip page's frame, and the map's chrome (Trip, Map boards) — rewritten 2026-10-01
   ==========================================================================================================
   #tripMapPage (33-markup-trip.js) is a column the screen's height: the bar, the quiet check line, then either the
   sheet (Stops and Days draw their own heads into it) or the map's plate, and the glass capsule over the foot. On
   the map the bar stands over the chart on frosted paper; the plate carries Nearby at the top (41-nearby.js), the
   two tools and the legend over the cards, and the cards (66-folio-map.js) over the tabs. Whole screen puts all of
   it away but the tools. Every measure is the Map board's at 390 × 844, its 44px status bar read as the safe area.
   This replaces the frame rules that were spread over 61-folio-stops.css and 08-chassis.css. */

/* ---- the page --------------------------------------------------------------------------------------------- */
.folio#tripMapPage { background: var(--fo-paper); color: var(--fo-ink); }
.folio#tripMapPage.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: clip; position: relative; }
.folio#tripMapPage .fs-bar { flex: none; position: relative; z-index: 3; height: calc(44px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; background: var(--fo-paper); border-bottom: 1px dashed var(--fo-hair); }
.folio#tripMapPage .fs-bar .fs-back { justify-self: start; }
.folio#tripMapPage .fs-bar .fo-bar__act--right { justify-self: end; }
.folio#tripMapPage .fo-check { position: relative; z-index: 2; }
.folio#tripMapPage .tp-sheet { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--fo-paper); }
.folio .fs-foot-space { height: 96px; }

/* The glass capsule (§10): Stops, Days, Map, and Boswell apart at the end. */
.folio#tripMapPage .fs-tabs { position: absolute; left: 20px; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 4; backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); }
.folio#tripMapPage .fs-tabs .fo-tabs__tab { flex-grow: 0; padding: 0 14px; }
.folio#tripMapPage .fs-tabs .fo-tabs__tab.is-on { padding: 0 18px; }
.folio#tripMapPage .fs-tabs .fo-tabs__tab--aside { margin-left: auto; padding: 0 16px; }
/* A booking read while its sheet was closed: a small red mark on Boswell. */
.folio#tripMapPage .fs-tabs .fo-tabs__tab.has-word::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 9999px; background: var(--fo-red); vertical-align: 1px; }

/* ---- the map view ----------------------------------------------------------------------------------------- */
.folio#tripMapPage .tp-plate { display: none; position: relative; overflow: hidden; }
.folio#tripMapPage.is-map .tp-plate { display: block; flex: 1; min-height: 0; background: var(--fo-band); }
.folio#tripMapPage.is-map .tp-sheet,
.folio#tripMapPage.is-map .fo-check { display: none; }
.folio#tripMapPage.is-map .fs-bar { position: absolute; left: 0; right: 0; top: 0; background: rgba(247,246,243,0.82); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }
.folio#tripMapPage .tp-canvas { position: absolute; inset: 0; }
/* When Google will not come: said in the middle of the plate, with Try again. */
.folio#tripMapPage .tp-canvas .tp-quiet { position: absolute; left: var(--fo-gutter); right: var(--fo-gutter); top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--fo-graphite); }
.folio#tripMapPage .tp-canvas .tp-again { display: block; margin: 8px auto 0; padding: 0; border: none; background: transparent; min-height: 44px; font: inherit; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Nearby: the label, a hairline, five drawings; the pressed one a black pill with its word. */
.folio#tripMapPage .tp-near { position: absolute; top: calc(58px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 2px; padding: 4px; white-space: nowrap; background: rgba(253,252,250,0.96); border: 1px solid var(--fo-rule); border-radius: 9999px; box-shadow: 0 6px 18px rgba(26,22,20,0.10); }
.folio#tripMapPage .tp-near[hidden] { display: none; }
.folio#tripMapPage .tp-near__label { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 10px; border-right: 1px solid var(--fo-rule); font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripMapPage .tp-near-words { display: flex; gap: 2px; }
.folio#tripMapPage .tp-near-mark { height: 40px; min-width: 40px; padding: 0; border: none; border-radius: 9999px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--fo-ink); cursor: pointer; }
.folio#tripMapPage .tp-near-mark.is-on { padding: 0 14px 0 11px; background: var(--fo-ink); color: var(--fo-card); }
.folio#tripMapPage .tp-near-mark span { font-size: 13px; font-weight: 500; }
.folio#tripMapPage .tp-near-said { position: absolute; left: 0; right: 0; top: 54px; margin: 0; text-align: center; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripMapPage .tp-near-said:empty { display: none; }

/* The tools (Whole screen, the whole journey) at the right and the legend at the left, over the cards. */
.folio#tripMapPage .fs-map-tools { position: absolute; right: 24px; bottom: calc(272px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; border: 1px solid var(--fo-rule); background: var(--fo-card); }
.folio#tripMapPage .fs-map-tools button { width: 44px; height: 44px; padding: 0; border: none; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--fo-ink); cursor: pointer; }
.folio#tripMapPage .fs-map-tools button + button { border-left: 1px solid var(--fo-rule); }
.folio#tripMapPage .fs-map-tools button[aria-pressed="true"] { background: var(--fo-ink); color: var(--fo-card); }
.folio#tripMapPage .fs-map-legend { position: absolute; left: 24px; bottom: calc(272px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: grid; grid-template-columns: auto auto; column-gap: 14px; padding: 8px 10px; background: rgba(253,252,250,0.9); border: 1px solid var(--fo-rule); }
.folio#tripMapPage .fs-map-legend > span { display: flex; flex-direction: column; gap: 5px; }
.folio#tripMapPage .fs-map-legend > span > span { display: flex; align-items: center; gap: 8px; font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }

/* The cards: the whole trip, then each stop, 12 apart, the one shown in the gutter, the others paler. */
.folio#tripMapPage .fm-deck { position: absolute; left: 0; right: 0; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); z-index: 3; height: 164px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.folio#tripMapPage .fm-track { display: flex; gap: 12px; padding: 0 var(--fo-gutter); transition: transform .45s cubic-bezier(.22,1,.36,1); will-change: transform; }
.folio#tripMapPage .fm-card { flex: none; width: calc(100% - 24px); height: 150px; box-sizing: border-box; padding: 14px 16px 12px; border: 1px dashed var(--fo-hair-firm); background: var(--fo-card); display: flex; flex-direction: column; gap: 6px; opacity: .55; transition: opacity .35s; }
.folio#tripMapPage .fm-card.is-on { opacity: 1; }
.folio#tripMapPage .fm-card:not(.is-on) { cursor: pointer; }
.folio#tripMapPage .fm-card__eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripMapPage .fm-state { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.folio#tripMapPage .fm-state.is-now { color: var(--fo-red); }
.folio#tripMapPage .fm-state.is-now::before { content: ''; width: 5px; height: 5px; border-radius: 9999px; background: var(--fo-red); }
/* The board's 24, a notch under as the display scale is (owner, 2026-09-30). */
.folio#tripMapPage .fm-card__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--fo-serif); font-size: var(--fo-figure); letter-spacing: -0.02em; line-height: 1.1; }
.folio#tripMapPage .fm-card__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--fo-graphite); }
.folio#tripMapPage .fm-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--fo-hair); }
.folio#tripMapPage .fm-dir { height: 44px; margin: -6px 0; padding: 0; border: none; background: transparent; display: flex; align-items: center; cursor: pointer; }
.folio#tripMapPage .fm-dir span { height: 32px; padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--fo-edge); font-size: 12px; font-weight: 500; color: var(--fo-ink); }
.folio#tripMapPage .fm-hint { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripMapPage .fm-link { min-height: 44px; margin: -6px 0; padding: 0; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .folio#tripMapPage .fm-track, .folio#tripMapPage .fm-card { transition: none; } }

/* No stops yet: one dashed card where the cards would be, and no legend over it. */
.folio#tripMapPage .fs-map-empty { position: absolute; left: 24px; right: 24px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 16px; border: 1px dashed var(--fo-hair-open); background: var(--fo-card); display: flex; flex-direction: column; gap: 8px; }
.folio#tripMapPage .fs-map-empty[hidden] { display: none; }
.folio#tripMapPage .fs-map-empty .fs-empty { margin: 0; font-family: var(--fo-serif); font-style: italic; font-size: 18px; line-height: 1.35; }
.folio#tripMapPage .fs-map-empty .fo-text { align-self: flex-start; font-size: 14px; }
.folio#tripMapPage .fs-map-empty:not([hidden]) ~ .fs-map-legend,
.folio#tripMapPage .fs-map-empty:not([hidden]) ~ .fm-deck { display: none; }

/* Whole screen: the chart alone, and the tools to come back by. */
.folio#tripMapPage.is-whole .fs-bar,
.folio#tripMapPage.is-whole .tp-near,
.folio#tripMapPage.is-whole .fs-map-legend,
.folio#tripMapPage.is-whole .fs-map-empty,
.folio#tripMapPage.is-whole .fm-deck,
.folio#tripMapPage.is-whole .fs-tabs { display: none; }
.folio#tripMapPage.is-whole .fs-map-tools { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---- what is drawn on the chart --------------------------------------------------------------------------- */
/* A photograph's place (PhotoPinOverlay): a point, a hairline leader, and the board's 44 square at its end. */
.folio#tripMapPage .tm-pin { position: absolute; width: 0; height: 0; cursor: pointer; }
.folio#tripMapPage .tm-pin-leader { position: absolute; left: 0; top: 0; width: var(--pin-len, 58px); height: 1px; transform-origin: 0 50%; transform: rotate(var(--pin-turn, -90deg)); background: var(--fo-ink); }
.folio#tripMapPage .tm-pin-frame { position: absolute; left: var(--pin-dx, 0); top: var(--pin-dy, -58px); transform: translate(-50%, -50%); display: block; width: 44px; height: 44px; background: var(--fo-rule); border: 1px solid var(--fo-ink); outline: 3px solid var(--fo-card); outline-offset: 0; }
.folio#tripMapPage .tm-pin-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folio#tripMapPage .tm-pin-frame:active { outline-color: var(--fo-ink); }
.folio#tripMapPage .tm-pin-n { position: absolute; right: -1px; bottom: -1px; min-width: 16px; height: 15px; padding: 0 3px; display: flex; align-items: center; justify-content: center; background: var(--fo-ink); color: var(--fo-card); font-family: var(--fo-mono); font-size: 10px; line-height: 1; }
/* The kept map (40-offline-map.js): the stops by number in the ink, and a line saying it is the kept copy. */
.folio#tripMapPage .offmap { position: absolute; inset: 0; background: var(--fo-band); }
.folio#tripMapPage .offmap-stop { min-width: 24px; height: 24px; box-sizing: border-box; padding: 0 6px; border: 2px solid var(--fo-paper); border-radius: 9999px; background: var(--fo-ink); color: var(--fo-card); font-family: var(--fo-mono); font-size: 10px; line-height: 20px; text-align: center; white-space: nowrap; cursor: pointer; }
.folio#tripMapPage .offmap-note { position: absolute; left: 24px; top: calc(110px + env(safe-area-inset-top, 0px)); margin: 0; padding: 4px 8px; background: var(--fo-card); border: 1px solid var(--fo-rule); font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); pointer-events: none; }
/* A found place (41-nearby.js), on either map, and its note: the name in the serif, the line in the mono. */
.folio#tripMapPage .nb-pin { width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--fo-paper); border-radius: 50%; background: var(--fo-graphite); cursor: pointer; }
.folio#tripMapPage .gm-style .gm-style-iw-c { padding: 0; background: var(--fo-card); border: 1px solid var(--fo-rule); border-radius: 0; box-shadow: 0 6px 18px rgba(26,22,20,0.10); }
.folio#tripMapPage .gm-style .gm-style-iw-d { overflow: hidden !important; }
.folio#tripMapPage .gm-style .gm-style-iw-tc::after { background: var(--fo-card); }
.folio#tripMapPage .maplibregl-popup-content { padding: 0; background: var(--fo-card); border: 1px solid var(--fo-rule); border-radius: 0; box-shadow: 0 6px 18px rgba(26,22,20,0.10); }
.folio#tripMapPage .maplibregl-popup-tip { display: none; }
.folio#tripMapPage .mk-pop { min-width: 140px; padding: 10px 14px; }
.folio#tripMapPage .mk-pop-name { font-family: var(--fo-serif); font-size: 17px; letter-spacing: -0.01em; color: var(--fo-ink); }
.folio#tripMapPage .mk-pop-said { margin-top: 3px; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripMapPage .mk-pop-said:empty { display: none; }
.folio#tripMapPage .mk-pop-go { min-height: 44px; margin: 0 0 -10px; padding: 0; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }