/* ==========================================================================
   61  Folio — the Stops room: the journey's stops, a stop's page, its forms, the way
       between stops, and the map's chrome
   --------------------------------------------------------------------------
   Built 2026-09-30 on css/60-folio.css. Drawn by public/04-stops.js (the stops, the
   pages on the stack) and public/03-map-plan.js (the map). The boards: Trip, StopDetail,
   StopNew, AddStop, EditStop, StopName, PlaceSearch, Leg, LegPicker, Map, LoadingTrip.

   Every selector begins `.folio`, so nothing here reaches a room that has not moved
   (dev/assets.test.js holds this file to the same rule as 60). The page #tripMapPage
   carries the class; a page pushed on the stack by this room adds it to itself
   (foPage). The Days view still draws inside this page in the deck log's classes —
   it has not migrated — so the head, the bar and the sheet are dressed here by
   `.folio#tripMapPage`, which outranks 17j-trip-plan.css's `#tripMapPage` rules, and
   nothing below names a .dy-* class.
   ========================================================================== */

/* ---- 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; background: var(--fo-paper); padding-top: env(safe-area-inset-top, 0px); height: calc(44px + env(safe-area-inset-top, 0px)); }
.folio#tripMapPage .fs-bar .fs-back { justify-self: start; }
.folio#tripMapPage .fs-bar .fo-bar__act--right { justify-self: end; }
/* The Days view keeps the head's scale and tally (its own board has them there); the
   Stops view prints both in its sheet and hides these. */
.folio#tripMapPage .tp-tally-block { display: none; }
.folio#tripMapPage.is-days .tp-tally-block { display: block; }
.folio#tripMapPage .tp-sheet { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--fo-paper); padding: 0; }
.folio#tripMapPage .tp-sheet .trip-plan-body { padding: 0; }
/* The map view: the bar stands over the map on frosted paper, the plate is the page. */
.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.is-map .tp-plate { display: block; flex: 1; min-height: 0; border: none; background: var(--fo-band); }
.folio#tripMapPage .tp-plate { display: none; position: relative; overflow: hidden; }
.folio#tripMapPage .tp-canvas { position: absolute; inset: 0; }
/* When Google will not come: said in the middle of the plate, in the folio's words, 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; }
/* The glass capsule at the foot, over whichever view is showing (§10). */
.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 .fs-foot-space { height: 96px; }
/* §46 A: the quiet check line, right under the head. */
.folio#tripMapPage .fo-check { position: relative; z-index: 2; }
.folio#tripMapPage.is-map .fo-check { display: none; }

/* ---- the map's chrome (Map board) ------------------------------------------- */
.folio#tripMapPage .tp-near { position: absolute; top: calc(58px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; display: flex; align-items: center; gap: 2px; padding: 4px; 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-words { display: flex; gap: 2px; }
.folio#tripMapPage .tp-near-mark { width: 40px; height: 40px; padding: 0; border: none; border-radius: 9999px; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--fo-ink); cursor: pointer; }
.folio#tripMapPage .tp-near-mark.is-on { background: var(--fo-ink); color: var(--fo-card); }
.folio#tripMapPage .tp-near-mark svg { width: 20px; height: 20px; }
.folio#tripMapPage .tp-near-said { position: absolute; left: 0; right: 0; top: 46px; 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 .fs-map-tools { position: absolute; right: 24px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; border: 1px solid var(--fo-rule); background: var(--fo-card); }
.folio .fs-map-tools button { width: 44px; height: 44px; padding: 0; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fo-ink); }
.folio .fs-map-tools button + button { border-left: 1px solid var(--fo-rule); }
.folio .fs-map-legend { position: absolute; left: 24px; bottom: calc(110px + 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 .fs-map-legend > span { display: flex; flex-direction: column; gap: 5px; }
.folio .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); }
.folio .fs-map-empty { position: absolute; left: 24px; right: 24px; bottom: calc(110px + 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 .fs-map-empty[hidden] { display: none; }
.folio .fs-map-empty .fs-empty { margin: 0; font-size: 18px; line-height: 1.35; }

/* ---- the head of the Stops view ----------------------------------------------- */
.folio .fs-head { padding: 16px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 8px; }
.folio .fs-head--stop { gap: 6px; }
.folio .fs-title { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.folio .fs-title__to { font-style: italic; color: var(--fo-graphite); }
.folio .fs-sub { font-size: 13px; color: var(--fo-graphite); }
.folio .fs-pad { padding: 0 var(--fo-gutter); }

/* The scale of the journey's nights, and its legend. */
.folio .fs-scale { display: flex; flex-direction: column; padding: 16px var(--fo-gutter) 0; }
.folio .fs-scale__head { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .fs-scale .is-ink { color: var(--fo-ink); }
.folio .fs-scale__cells { display: grid; gap: 2px; }
.folio .fs-scale__cells > * { height: 12px; }
.folio .fs-scale__cells .fo-bone { height: 10px; }
.folio .fs-cell { display: block; box-sizing: border-box; background: var(--fo-band); }
.folio .fs-cell.is-bed { background: var(--fo-ink); }
.folio .fs-cell.is-travel { background: var(--fo-pale); }
.folio .fs-cell.is-open { border: 1px dashed var(--fo-red); background: rgba(196,17,31,0.08); }
.folio .fs-cell.is-taken { background: #CFCBC2; }
.folio .fs-cell.is-free { border: 1.5px solid var(--fo-ink); background: var(--fo-card); }
.folio .fs-cell.is-taking { background: var(--fo-ink); }
.folio .fs-scale__marks { display: grid; gap: 2px; height: 7px; margin-top: 3px; }
.folio .fs-scale__marks > span { display: flex; justify-content: center; }
.folio .fs-tri { display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--fo-red); }
.folio .fs-scale__ends { display: flex; justify-content: space-between; margin-top: 2px; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-pale); }
.folio .fs-scale__ends .is-ink { color: var(--fo-ink); }
.folio .fs-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 12px var(--fo-gutter) 16px; border-bottom: 1px dashed var(--fo-hair); }
.folio .fs-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .fs-legend .fs-cell { width: 12px; height: 7px; }
.folio .fs-legend .fs-tri { border-left-width: 4px; border-right-width: 4px; }

/* ---- the ledger: begins, legs, stops, gaps, finishes --------------------------- */
.folio .fs-ledger { display: flex; flex-direction: column; padding: 0 var(--fo-gutter); }
.folio .fs-terminus { display: flex; justify-content: space-between; padding: 14px 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .fs-terminus .is-ink { color: var(--fo-ink); }
.folio .fs-sum { margin: 0; padding-top: 12px; border-top: 1px dashed var(--fo-hair); font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.folio .fs-sum.is-fault { margin-top: 6px; padding-top: 0; border-top: none; color: var(--fo-red); }
.folio .fs-empty { margin: 10px 0 0; font-family: var(--fo-serif); font-style: italic; font-size: 17px; line-height: 1.4; }
.folio .fs-first { height: 150px; width: 100%; border: 1px dashed var(--fo-hair-open); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fo-ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.folio .fs-first__plus { font-size: 22px; color: var(--fo-red); }
.folio .fs-fault { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px dashed var(--fo-hair); border-bottom: 1px dashed var(--fo-hair); font-size: 14px; color: var(--fo-red); }
.folio .fs-fault .fo-text { align-self: flex-start; font-size: 13px; }

/* The thread a leg hangs on. */
.folio .fs-thread { display: flex; align-items: stretch; gap: 10px; padding-left: 18px; }
.folio .fs-thread__line { width: 0; flex-shrink: 0; border-left: 1px dashed var(--fo-hair-open); }
.folio .fs-leg { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border: none; background: transparent; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio .fs-leg.is-read { cursor: default; }
.folio .fs-leg.is-open { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; }
.folio .fs-leg__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.folio .fs-leg__row + .fs-leg__row { margin-top: 6px; }
.folio .fs-leg__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; }
.folio .fs-leg__open { padding: 0; border: none; background: transparent; text-align: left; color: var(--fo-ink); cursor: pointer; min-height: 44px; justify-content: center; }
.folio .fs-leg__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.folio .fs-leg__mode { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); white-space: nowrap; }
.folio .fs-leg__route { font-size: 13px; }
.folio .fs-leg__sub { font-size: 12px; color: var(--fo-graphite); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.folio .fs-leg__add { font-size: 14px; font-weight: 500; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; }
.folio .fs-leg__none { font-size: 14px; color: var(--fo-pale); }
.folio .fs-leg__n { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-pale); white-space: nowrap; flex-shrink: 0; width: 44px; }
.folio .fs-leg__ticket { padding: 0; border: none; background: transparent; font-size: 12px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }

/* A stop's card, with the panel Remove slides in from under it. */
.folio .fs-swipe { position: relative; overflow: hidden; }
.folio .fs-swipe__under { position: absolute; top: 0; right: 0; bottom: 0; width: 104px; background: var(--fo-ink); display: flex; align-items: center; justify-content: center; visibility: hidden; }
.folio .fs-swipe.is-swiping .fs-swipe__under, .folio .fs-swipe.is-open .fs-swipe__under { visibility: visible; }
.folio .fs-swipe__remove { width: 100%; height: 100%; border: none; background: transparent; color: var(--fo-card); font-size: 14px; font-weight: 500; cursor: pointer; }
.folio .fs-swipe:not(.is-open) .fs-swipe__remove { pointer-events: none; }
.folio .fs-stop { position: relative; padding: 16px 18px 12px; border: 1px dashed var(--fo-hair-firm); background: rgba(253,252,250,0.6); touch-action: pan-y; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.folio .fs-swipe.is-open .fs-stop { background: #FBFAF7; }
.folio .fs-stop.is-lifted { z-index: 5; background: var(--fo-card); border: 1px solid var(--fo-ink); box-shadow: 0 18px 30px -12px rgba(26,22,20,0.45); transition: none; }
.folio .fs-swipe.is-source { overflow: visible; }
.folio .fs-slot { margin: 10px 0; min-height: 44px; border: 1.5px dashed var(--fo-ink); display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .fs-slot.is-refused { border-color: var(--fo-red); color: var(--fo-red); font-family: var(--fo-sans); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 8px 12px; line-height: 1.4; }
.folio .fs-stop__main { display: flex; align-items: center; gap: 14px; }
.folio .fs-pic { position: relative; width: 64px; height: 64px; flex-shrink: 0; border: 1px solid var(--fo-rule); background-color: #D6D0C4; background-image: repeating-linear-gradient(135deg, rgba(26,22,20,.06) 0 1px, transparent 1px 7px); background-size: cover; background-position: center; }
.folio .fs-pic.has-image { background-image: none; }
.folio .fs-pic.has-image[style] { background-size: cover; }
.folio .fs-pic__n { position: absolute; left: -1px; bottom: -1px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--fo-ink); color: var(--fo-card); font-family: var(--fo-mono); font-size: 10px; }
.folio .fs-stop__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.folio .fs-stop__name { padding: 0; border: none; background: transparent; text-align: left; font-family: var(--fo-serif); font-size: 23px; letter-spacing: -0.02em; line-height: 1.05; color: var(--fo-ink); cursor: pointer; min-height: 30px; }
.folio .fs-way { color: var(--fo-pale); font-size: 18px; }
.folio .fs-stop__dates { font-size: 12px; line-height: 1.4; color: var(--fo-graphite); }
.folio .fs-stop__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--fo-hair); }
.folio .fs-stop__beds { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; line-height: 1.35; }
.folio .fs-stop__stay { color: var(--fo-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.folio .fs-stop__nobed { color: var(--fo-red); }
.folio .fs-nights { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.folio .fs-step { width: 44px; height: 44px; margin: -6px; padding: 0; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fo-ink); }
.folio .fs-step > span { width: 30px; height: 30px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fo-edge); font-size: 16px; line-height: 1; }
.folio .fs-step:disabled { cursor: default; color: var(--fo-pale); }
.folio .fs-step:disabled > span { border-color: var(--fo-rule); }
.folio .fs-nights__n { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.folio .fs-nights__n .fo-eyebrow { color: var(--fo-graphite); }
.folio .fs-nights__fig { font-family: var(--fo-serif); font-size: 24px; line-height: 1; }
.folio .fs-nights__fig.is-big { font-size: 28px; }
/* The Here stamp (§28): red, a little turned, a ruled edge. */
.folio .fs-here { position: absolute; top: 14px; right: 14px; z-index: 1; transform: rotate(-5deg); padding: 3px 8px; background: var(--fo-paper); border: 1.5px solid var(--fo-red); outline: 1px solid var(--fo-red); outline-offset: 2px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fo-red); font-weight: 500; }
.folio .fs-stop .fs-here { top: 20px; right: 18px; }
.folio .fs-here--inline { position: static; align-self: flex-start; display: inline-block; margin-top: 4px; }

/* Nights with no stop. */
.folio .fs-gap { margin: 10px 0; padding: 14px; border: 1px dashed var(--fo-hair-open); display: flex; flex-direction: column; gap: 8px; }
.folio .fs-gap__head { color: var(--fo-graphite); }
.folio .fs-gap__held { font-size: 13px; line-height: 1.45; }
.folio .fs-gap__add { align-self: flex-start; height: 36px; padding: 0 14px; font-size: 14px; }

/* Bones (§46 H), the shape of a stop's card. */
.folio .fs-bone-card { margin: 10px 0; padding: 14px; border: 1px dashed var(--fo-hair-firm); }
.folio .fs-bone-card__row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; }
.folio .fs-bone-pic { width: 64px; height: 64px; }
.folio .fs-bone-card__lines { display: flex; flex-direction: column; gap: 10px; }

/* ---- a page on the stack, in the folio (the stop, its form, the way) ------------ */
.folio.pgstack-page { background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); font-size: 15px; line-height: 1.4; }
.folio.pgstack-page .pgstack-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; box-sizing: content-box; background: var(--fo-paper); border-bottom: 1px dashed var(--fo-hair); }
.folio.pgstack-page .pgstack-back { justify-self: start; min-height: 44px; font-family: var(--fo-sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--fo-ink); }
.folio.pgstack-page .pgstack-title { flex: none; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); max-width: 190px; }
.folio.pgstack-page .pgstack-actions { justify-self: end; display: flex; }
.folio.pgstack-page .pgstack-actions:empty { display: block; }
.folio .fs-bar-act { min-height: 44px; padding: 0; border: none; background: transparent; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.folio .fs-bar-act.is-commit { color: var(--fo-red); text-decoration: underline; text-underline-offset: 3px; }
.folio.pgstack-page .pgstack-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; background: var(--fo-paper); }

/* A stop's page. */
.folio .fs-plate { margin: 16px var(--fo-gutter) 0; height: 190px; position: relative; background-color: #CFCBC2; background-image: repeating-linear-gradient(135deg, rgba(26,22,20,.06) 0 1px, transparent 1px 7px); background-size: cover; background-position: center; }
.folio .fs-plate[style] { background-image: none; background-size: cover; }
.folio .fs-plate--form { margin: 12px 0 0; height: 150px; }
.folio .fs-plate--form.is-empty { background-color: #E3E0D9; background-image: repeating-linear-gradient(135deg, rgba(26,22,20,.06) 0 1px, transparent 1px 7px); }
.folio .fs-plate__change { position: absolute; right: 8px; bottom: 6px; height: 30px; padding: 0 10px; border: none; display: flex; align-items: center; background: rgba(247,246,243,0.92); font-size: 13px; color: var(--fo-ink); cursor: pointer; }
.folio .fs-band { margin: 16px var(--fo-gutter) 0; padding: 12px 14px; background: var(--fo-band); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; }
.folio .fs-notes { margin: 16px var(--fo-gutter) 0; padding: 12px 0; border-top: 1px dashed var(--fo-hair); border-bottom: 1px dashed var(--fo-hair); font-family: var(--fo-serif); font-style: italic; font-size: 17px; line-height: 1.5; }
.folio .fs-sec { margin: 26px var(--fo-gutter) 0; }
.folio .fs-sec--acts { display: flex; justify-content: space-between; align-items: baseline; }
.folio .fs-sec__acts { display: flex; gap: 14px; }
.folio .fs-act { font-family: var(--fo-sans); font-size: 13px; letter-spacing: 0; text-transform: none; min-height: 24px; }
.folio .fs-note { margin-top: 10px; }
.folio .fs-inline-link { display: inline; min-height: 0; font-size: inherit; }
.folio .fs-al { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--fo-hair); }
.folio .fs-stays { padding-top: 14px; }
.folio .fs-stay { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.folio .fs-stay__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.folio .fs-stay__name { padding: 0; border: none; background: transparent; text-align: left; font-family: var(--fo-serif); font-size: 20px; color: var(--fo-ink); cursor: pointer; min-height: 30px; }
.folio .fs-stay__ends { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; }
.folio .fs-stay__ends > span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.folio .fs-stay__ends > .is-right { align-items: flex-end; }
.folio .fs-stay__rule { flex-direction: row !important; align-items: center; gap: 6px; padding-bottom: 4px; }
.folio .fs-stay__rule i { flex-grow: 1; border-top: 1px solid var(--fo-pale); }
.folio .fs-stay__more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--fo-hair); }
.folio .fs-stay__more > span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.folio .fs-nobed { padding: 16px; border: 1px dashed var(--fo-hair-open); display: flex; flex-direction: column; gap: 10px; }
.folio .fs-nobed__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.folio .fs-nobed .fo-btn--compact { height: 40px; padding: 0 16px; font-size: 14px; }
.folio .fs-bedline { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .fs-bedline.is-open { color: var(--fo-graphite); }
.folio .fs-bedline__cells { display: flex; gap: 2px; }
.folio .fs-bedline__cells i { width: 18px; height: 8px; box-sizing: border-box; border: 1px dashed rgba(26,22,20,0.45); }
.folio .fs-bedline__cells i.is-bed { border: none; background: var(--fo-ink); }
.folio .fs-day { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--fo-hair); }
.folio .fs-day__date { display: flex; flex-direction: column; gap: 2px; color: var(--fo-ink); }
.folio .fs-day.is-today .fs-day__date { color: var(--fo-red); }
.folio .fs-day.is-today .fs-day__date .fo-eyebrow { color: var(--fo-red); }
.folio .fs-day__n { font-family: var(--fo-serif); font-size: 26px; line-height: 1; }
.folio .fs-day__today { font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
.folio .fs-day__body { display: flex; flex-direction: column; min-width: 0; }
.folio .fs-day__head { padding: 3px 0 4px; }
.folio .fs-day__free { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.folio .fs-day__free > span { font-family: var(--fo-serif); font-style: italic; font-size: 16px; color: var(--fo-graphite); }
.folio .fs-plan { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; border: none; background: transparent; text-align: left; color: var(--fo-ink); cursor: pointer; min-height: 30px; }
.folio .fs-plan.is-past { color: var(--fo-pale); }
.folio .fs-plan__time { font-family: var(--fo-mono); font-size: 11px; color: var(--fo-graphite); }
.folio .fs-plan.is-past .fs-plan__time { color: var(--fo-pale); }
.folio .fs-plan__name { font-size: 15px; line-height: 1.35; }
.folio .fs-plan__state { font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .fs-plan__state.is-open { border-bottom: 1px dashed rgba(26,22,20,0.45); padding-bottom: 1px; }
.folio .fs-plan.is-past .fs-plan__state { color: var(--fo-pale); }

/* The form: Add a stop, Edit a stop. */
.folio .fs-form { padding: 20px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 8px; --fo-field-x: 0; }
.folio .fs-form .fo-field--title .fo-field__input { font-size: 34px; }
.folio .fs-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--fo-rule); background: var(--fo-card); color: var(--fo-ink); font-size: 13px; cursor: pointer; }
.folio .fs-location .fo-field__value.is-empty > span { color: var(--fo-pale); }
.folio .fs-location svg { flex-shrink: 0; }
.folio .fs-when { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.folio .fs-when__card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px; }
.folio .fs-when__end { display: flex; flex-direction: column; gap: 4px; font-size: 16px; white-space: nowrap; }
.folio .fs-when__end.is-right { align-items: flex-end; }
.folio .fo-quiet-ink { color: var(--fo-graphite); }
.folio .fs-photo-search { margin-top: 10px; }
.folio .fs-notes-field { margin-top: 28px; }
.folio .fs-remove { margin-top: 32px; padding-top: 14px; border-top: 1px dashed var(--fo-hair); display: flex; flex-direction: column; gap: 6px; }
.folio .fs-remove .fo-text { align-self: flex-start; font-size: 14px; }
.folio .fs-when .fo-quiet, .folio .fs-remove .fo-quiet, .folio .fs-nobed .fo-quiet, .folio .fs-form .fo-quiet { line-height: 1.5; }

/* The way (Leg) and choosing it (LegPicker). */
.folio .fs-piece { padding: 16px 0 14px; border-bottom: 1px dashed var(--fo-hair); display: flex; flex-direction: column; gap: 8px; }
.folio .fs-piece__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.folio .fs-piece__line { flex-direction: row; align-items: baseline; gap: 10px; }
.folio .fs-piece__line .fs-leg__n { width: auto; }
.folio .fs-piece__route { font-family: var(--fo-serif); font-size: 20px; letter-spacing: -0.02em; line-height: 1.15; }
.folio .fs-piece__when { font-size: 13px; color: var(--fo-graphite); }
.folio .fs-piece__when.is-ink { color: var(--fo-ink); }
.folio .fs-piece__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.folio .fs-piece__acts .fo-btn--compact { height: 40px; padding: 0 14px; font-size: 14px; }
.folio .fs-piece__acts .fs-act { margin-left: 6px; }
.folio .fs-connect { padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.folio .fs-dashed { height: 48px; width: 100%; border: 1px dashed var(--fo-hair-open); background: transparent; font-size: 14px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.folio .fs-dashed:disabled { color: var(--fo-pale); cursor: default; }
.folio .fs-cand { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; text-align: left; color: var(--fo-ink); cursor: pointer; }
.folio .fs-cand .fs-leg__text > span:nth-child(2) { font-size: 14px; }
.folio .fs-cand.is-on .fs-act { font-weight: 500; }
.folio .fs-modes { display: flex; flex-direction: column; }
.folio .fs-mode { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; text-align: left; color: var(--fo-ink); font-size: 15px; cursor: pointer; }
.folio .fs-mode .fs-leg__text { gap: 2px; }
.folio .fs-radio { width: 18px; height: 18px; box-sizing: border-box; border-radius: 9999px; border: 1.5px solid var(--fo-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.folio .fs-radio.is-on { border-color: var(--fo-ink); }
.folio .fs-radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: 9999px; background: var(--fo-ink); }
.folio .fs-ticket-ways { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.folio .fs-ticket-ways .fs-piece__acts { margin: 0; }

/* Reduced motion: the card does not glide back after a swipe. */
@media (prefers-reduced-motion: reduce) {
    .folio .fs-stop { transition: none; }
}

/* The Days view has not migrated: it draws the deck log's rows inside this page and needs room under
   them for the capsule, which the Stops view gives itself (.fs-foot-space). */
.folio#tripMapPage.is-days .tp-sheet { padding-bottom: 96px; }