/* ==========================================================================================================
   A trip, made and kept (71-folio-trip.js) — 2026-10-03
   ==========================================================================================================
   The form (AddTrip board) in the activity's and the expense's grammar, 64-folio-form.css, plus what only a trip
   has: the cover, the country and people chips, the dates card, the Just for you block, Leaving it. Then Trip
   settings (TripSettings) and Hand it on (HandOn). Type on the scale of 2026-10-01: 24 / 16 / 14 / 12 / 10. */

/* ---- the form ------------------------------------------------------------------------------------------ */
.folio#planTripModal .ft-lead { padding: 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.folio#planTripModal .ft-lead__title { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; color: var(--fo-ink); }
.folio#planTripModal .ft-lead__line { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.folio .ft-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 20px 0 0; padding: 0 0 8px; border-bottom: 1px solid rgba(26,22,20,0.4); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .ft-head__who { color: var(--fo-graphite); }
.folio#planTripModal .ft-locked { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.folio#planTripModal .ft-trip { margin: 0; padding: 0; border: none; min-width: 0; }
.folio#planTripModal .ft-trip:disabled { opacity: 0.55; }
/* A co-planner's When, outside the owner's fieldset so it stays pressable. */
.folio#planTripModal .ft-planned { margin-top: 4px; }

/* The cover: the photograph, who took it, and Change; with none, the plate says where one comes from. */
.folio#planTripModal .ft-cover { position: relative; margin: 14px 0 0; height: 180px; background: var(--fo-bone); }
.folio#planTripModal .ft-cover__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.folio#planTripModal .ft-cover__credit { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 110px); padding: 3px 7px; background: var(--fo-card); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folio#planTripModal .ft-cover__change { position: absolute; right: 8px; bottom: 8px; min-height: 44px; padding: 0 14px; border: none; background: var(--fo-card); font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.folio#planTripModal .ft-cover__add { width: 100%; height: 100%; padding: 0 20px; border: 1px dashed var(--fo-hair-firm); background: repeating-linear-gradient(135deg, rgba(26,22,20,.05) 0 1px, transparent 1px 7px), var(--fo-bone-light); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); cursor: pointer; }

/* The name is the trip's own title: serif, a solid ink line under it (§04 title field). */
.folio#planTripModal .ft-name { padding: 14px 0 0; }
.folio#planTripModal .ft-name__input { font-family: var(--fo-serif); font-size: 24px; letter-spacing: -0.02em; min-height: 34px; padding-bottom: 6px; border-bottom: 1.5px solid var(--fo-ink); }

/* Chips: a country or a person, × to take it off; the dashed one adds. */
.folio#planTripModal .ft-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.folio#planTripModal .ft-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 0 0 12px; box-sizing: border-box; border: 1px solid var(--fo-rule); background: var(--fo-card); font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); }
.folio#planTripModal .ft-chip__x { width: 40px; height: 44px; padding: 0; border: none; background: transparent; font-size: 14px; color: var(--fo-graphite); cursor: pointer; }
.folio#planTripModal .ft-chip--add { padding: 0 12px; border: 1px dashed var(--fo-hair-open); background: transparent; cursor: pointer; }
.folio#planTripModal .ft-chip--person { padding-left: 4px; }
.folio#planTripModal .ft-chip__face { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--fo-band); font-family: var(--fo-mono); font-size: 10px; color: var(--fo-graphite); }
.folio#planTripModal .ft-chip__state { color: var(--fo-graphite); }

/* The dates as a card: the day you leave, the nights, the day you get home. */
.folio#planTripModal .ft-when { width: 100%; margin: 12px 0 0; padding: 14px 16px; box-sizing: border-box; border: 1px dashed var(--fo-hair-firm); background: transparent; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; text-align: left; color: var(--fo-ink); cursor: pointer; }
.folio#planTripModal .ft-when__end { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.folio#planTripModal .ft-when__end.is-right { align-items: flex-end; text-align: right; }
.folio#planTripModal .ft-when__day { font-family: var(--fo-sans); font-size: 16px; text-decoration: underline dotted; text-underline-offset: 5px; white-space: nowrap; }
.folio#planTripModal .ft-when__mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.folio#planTripModal .ft-when__n { font-family: var(--fo-serif); font-size: 24px; line-height: 1; }
.folio#planTripModal .ft-when .fo-eyebrow { color: var(--fo-graphite); }

/* Just for you: a band of its own, the person's fields. */
.folio#planTripModal .ft-mine { margin: 26px 0 0; padding: 4px 16px 14px; background: var(--fo-band); }
.folio#planTripModal .ft-head--mine { border-bottom-color: var(--fo-hair); }
.folio#planTripModal .ft-mine__row { padding: 12px 0 10px; border-bottom: 1px dashed var(--fo-hair); }
.folio#planTripModal .ft-mine__row:last-child { border-bottom: none; }
.folio#planTripModal .ft-origin { width: 100%; min-height: 44px; align-items: center; padding: 0; border: none; background: transparent; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--fo-sans); font-size: 16px; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio#planTripModal .ft-origin .is-empty { color: var(--fo-pale); }
.folio#planTripModal .ft-origin .fo-eyebrow { color: var(--fo-graphite); }
.folio#planTripModal .ft-money { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 16px; }
.folio#planTripModal .ft-money .ff-hint { grid-column: 1 / -1; }
.folio#planTripModal .ft-next { margin: 16px 0 0; padding: 12px 14px; background: var(--fo-band); font-size: 12px; line-height: 1.5; color: var(--fo-ink); }

/* Leaving it: a row a way out, as a menu's row (§33). */
.folio#planTripModal .ft-leave { width: 100%; min-height: 56px; padding: 10px 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; color: var(--fo-ink); cursor: pointer; }
.folio#planTripModal .ft-leave__text { display: flex; flex-direction: column; gap: 3px; }
.folio#planTripModal .ft-leave__name { font-size: 14px; }
.folio#planTripModal .ft-leave__sub { font-size: 12px; line-height: 1.45; color: var(--fo-graphite); }
.folio#planTripModal .ft-leave .fo-way { color: var(--fo-pale); }
.folio#planTripModal .ft-leave.is-held { cursor: default; }
.folio#planTripModal .ft-leave.is-held .ft-leave__name { color: var(--fo-graphite); }

/* ---- Trip settings, the reading page ------------------------------------------------------------------- */
.folio.ts-page .pgstack-body { background: var(--fo-paper); }
.folio .ts { padding: 0 0 40px; }
.folio .ts-cover { position: relative; height: 170px; background-color: var(--fo-bone); background-size: cover; background-position: center; }
.folio .ts-cover__credit { position: absolute; right: 8px; top: 8px; padding: 3px 7px; background: var(--fo-card); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .ts-title { padding: 18px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 6px; }
.folio .ts-title__name { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; color: var(--fo-ink); }
.folio .ts-title__dates { font-size: 12px; color: var(--fo-graphite); }
.folio .ts-sec { padding: 0 var(--fo-gutter); }
.folio .ts-sec .ft-head { margin-top: 24px; }
.folio .ts-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--fo-hair); }
.folio .ts-row__label { padding-top: 3px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .ts-row__value { font-size: 14px; line-height: 1.45; color: var(--fo-ink); min-width: 0; }
.folio .ts-person + .ts-person { margin-top: 8px; }
.folio .ts-person { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* A mate the owner may make a co-planner: the row is the press (2026-10-03). */
.folio .ts-person.is-tap { min-height: 44px; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.folio .ts-person.is-tap > span:first-child { flex: 1; min-width: 0; }
.folio .ts-you, .folio .ts-quiet { color: var(--fo-graphite); }
.folio .ts-notes { font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.4; }
.folio .ts-line { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-ink); }
.folio .ts-line b { font-weight: 500; }
.folio .ts-line--quiet { color: var(--fo-graphite); }
.folio .ts-way { width: 100%; min-height: 52px; margin-top: 8px; padding: 0; border: none; border-top: 1px dashed var(--fo-hair); border-bottom: 1px dashed var(--fo-hair); background: transparent; display: flex; justify-content: space-between; align-items: center; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.folio .ts-way .fo-way { color: var(--fo-pale); }
.folio .ts-leave, .folio .ts-ask { display: block; min-height: 44px; margin-top: 4px; padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- Hand it on ----------------------------------------------------------------------------------------- */
.folio.ho-page .pgstack-body { background: var(--fo-paper); }
.folio .ho { padding: 20px var(--fo-gutter) 40px; display: flex; flex-direction: column; align-items: stretch; }
.folio .ho > .fo-btn { align-self: flex-start; margin-top: 18px; }
.folio .ho-title { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; color: var(--fo-ink); }
.folio .ho-line { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.folio .ho-head { display: flex; justify-content: space-between; margin: 26px 0 0; padding-bottom: 10px; border-bottom: 1px dashed var(--fo-hair); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .ho-head span + span { color: var(--fo-graphite); }
.folio .ho-row { width: 100%; min-height: 58px; padding: 8px 0; box-sizing: border-box; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; color: var(--fo-ink); cursor: pointer; }
.folio .ho-row.is-asked { opacity: 0.5; cursor: default; }
.folio .ho-face { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--fo-band); font-family: var(--fo-mono); font-size: 12px; color: var(--fo-graphite); }
.folio .ho-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.folio .ho-name { font-size: 14px; font-weight: 500; }
.folio .ho-sub { font-size: 12px; color: var(--fo-graphite); }
.folio .ho-row .fo-way { font-size: 16px; color: var(--fo-pale); }