/* ==========================================================================
   62  Folio — the Days room: the journey's days, a day, an activity's ticket and its
       form, the calendar, the weather, the notes page, the link sheet
   --------------------------------------------------------------------------
   Built 2026-09-30 on css/60-folio.css, the second room. Drawn by public/61-folio-days.js
   (the days, a day, the sheets) over the records' own renderers (05-timeline.js's ticket,
   34-markup-activity.js's form, 01-core.js's calendar, 02-state.js's weather). The boards:
   Days, DayPage, AddToDay, AddKind, ActivityTicket, ActivityEdit, NotesFull, LinkActivity,
   Calendar, Weather.

   Every selector begins `.folio` (dev/assets.test.js holds this file to it). Three rooms
   here — the ticket, the form, the calendar sheet, the weather page — keep the deck log's
   markup and are dressed by REMAPPING ITS TOKENS on the folio element: `--log-stock` is the
   paper, `--log-ink` the ink, `--log-magenta` the red, `--log-print` the mono. Nine hundred
   rules of theirs read the folio's values without a copy of any of them; what the boards
   draw differently is named below. The deck log's own rooms are untouched: the tokens are
   redefined only under `.folio`.
   ========================================================================== */

/* ---- the deck log's tokens, read as the folio's ---------------------------------- */
.folio.fd-ticket-page, .folio#addActivityModal, .folio#tripSectionSheet, .folio.fd-wx-page, .folio.fd-day-page, .folio.fd-notes-page {
    --log-stock: var(--fo-paper);
    --log-stock-band: var(--fo-band);
    --log-stock-lit: var(--fo-card);
    --log-oilskin: var(--fo-ink);
    --log-on-oilskin: var(--fo-card);
    --log-ink: var(--fo-ink);
    --log-ink-soft: var(--fo-graphite);
    --log-rule: var(--fo-rule);
    --log-rule-firm: var(--fo-hair-firm);
    --log-magenta: var(--fo-red);
    --log-port: var(--fo-red);
    --log-starboard: var(--fo-ink);
    --log-print: var(--fo-mono);
    --log-write: var(--fo-sans);
    --log-type: 'Courier Prime', 'Courier New', ui-monospace, monospace;
}

/* ---- the Days view (Days board) --------------------------------------------------- */
/* The strip: every day as a cell, the stop's name over its first day, the weekday and the number. */
.folio .fd-strip { display: flex; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding: 0 var(--fo-gutter); border-bottom: 1px dashed var(--fo-hair); }
.folio .fd-strip::-webkit-scrollbar { display: none; }
.folio .fd-strip__day { position: relative; flex: none; min-width: 52px; padding: 6px 4px 8px; border: none; border-bottom: 2px solid transparent; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--fo-ink); font: inherit; cursor: pointer; }
.folio .fd-strip__day.is-on { border-bottom-color: var(--fo-ink); }
.folio .fd-strip__city { height: 12px; font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); white-space: nowrap; }
.folio .fd-strip__wd { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.folio .fd-strip__n { font-family: var(--fo-serif); font-size: 22px; line-height: 1; }
.folio .fd-strip__day.is-today .fd-strip__n { color: var(--fo-red); }
/* Lifted over the strip: the day the record would go to, and what the room says of it. */
.folio .fd-strip__day .fd-slot { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 4; margin-top: 4px; padding: 4px 8px; white-space: nowrap; background: var(--fo-ink); color: var(--fo-card); font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.folio .fd-strip__day .fd-slot.is-refused { background: var(--fo-red); }
/* One day at a time, on a card with the ticks. */
.folio .fd-deck { padding: 16px var(--fo-gutter) 0; }
.folio .fd-card { position: relative; padding: 14px 16px 6px; display: flex; flex-direction: column; }
.folio .fd-card__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .fd-card__today { display: flex; align-items: center; gap: 5px; color: var(--fo-red); }
.folio .fd-card__today i { width: 5px; height: 5px; border-radius: 9999px; background: var(--fo-red); }
.folio .fd-card__date { margin: 8px 0 10px; font-family: var(--fo-serif); font-weight: 400; font-size: var(--fo-display-2); letter-spacing: -0.025em; line-height: 1.02; }
.folio .fd-rows { display: flex; flex-direction: column; }
/* A row: the time, the name and under it the kind and the place, and the booking's word. The row is the press into
   the ticket; the under-side behind it holds Edit and Remove, reached by a swipe (foRowGestures). */
.folio .fd-swipe { position: relative; overflow: hidden; touch-action: pan-y; }
.folio .fd-swipe__under { position: absolute; inset: 0 0 0 auto; width: 152px; display: flex; }
.folio .fd-swipe__act { flex: 1; border: none; background: var(--fo-band); color: var(--fo-ink); font: inherit; font-size: 13px; cursor: pointer; }
.folio .fd-swipe__act.is-remove { background: var(--fo-ink); color: var(--fo-card); }
.folio .fd-row { position: relative; width: 100%; min-height: 44px; padding: 14px 0; border: none; border-top: 1px dashed var(--fo-hair); background: var(--fo-card); display: grid; grid-template-columns: 50px 1fr; align-items: start; gap: 0; color: var(--fo-ink); font: inherit; text-align: left; cursor: pointer; transition: transform 0.2s ease; }
.folio .fd-rows .fd-swipe:first-child .fd-row { border-top: none; }
.folio .fd-row.is-lifted { z-index: 5; box-shadow: 0 10px 24px rgba(26,22,20,0.18); transition: none; }
.folio .fd-swipe.is-source .fd-row { opacity: 0.92; }
.folio .fd-row__time { font-family: var(--fo-mono); font-size: 12px; padding-top: 4px; }
.folio .fd-row__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.folio .fd-row__name { font-family: var(--fo-serif); font-size: 19px; letter-spacing: -0.015em; line-height: 1.1; }
.folio .fd-row__sub { font-size: 12px; line-height: 1.4; color: var(--fo-graphite); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.folio .fd-row__kind { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .fd-row__book { font-size: 12px; color: var(--fo-graphite); }
.folio .fd-row__book.is-booked { color: var(--fo-ink); }
/* A free day: the serif line and a quiet one. */
.folio .fd-free { padding: 14px 0 6px; border-top: 1px dashed var(--fo-hair); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.folio .fd-free__say { margin: 0; font-family: var(--fo-serif); font-style: italic; font-size: 20px; color: var(--fo-graphite); }
.folio .fd-free .fo-quiet { margin: 0; font-size: 13px; line-height: 1.5; }
.folio .fd-card__photos { padding: 8px 0; border: none; border-top: 1px dashed var(--fo-hair); background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--fo-ink); font: inherit; cursor: pointer; }
.folio .fd-card__thumbs { display: flex; gap: 3px; }
.folio .fd-card__thumbs img { width: 26px; height: 26px; object-fit: cover; background: var(--fo-band); }
.folio .fd-card__tonight { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--fo-hair); font-size: 13px; }
.folio .fd-card__tonight .is-open { color: var(--fo-red); }
.folio .fd-card__foot { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-top: 1px dashed var(--fo-hair); }
.folio .fd-card__foot .fo-text { font-size: 13px; }
.folio .fd-pager { display: flex; justify-content: space-between; align-items: center; padding: 6px var(--fo-gutter) 0; }
.folio .fd-pager .fo-text:disabled { color: var(--fo-pale); text-decoration: none; cursor: default; }
.folio .fd-pager__n { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fo-graphite); }

/* ---- a day (DayPage board) ---------------------------------------------------------- */
.folio.fd-day-page .pgstack-body { background: var(--fo-paper); }
.folio .fd-day { padding-bottom: 24px; }
.folio .fd-pad { padding: 0 var(--fo-gutter); }
.folio .fd-day__nav { padding: 16px var(--fo-gutter) 0; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.folio .fd-day__nav .fo-text { font-size: 13px; text-decoration: none; justify-self: start; }
.folio .fd-day__nav .fo-text.is-right { justify-self: end; }
.folio .fd-day__nav .fo-text:disabled { visibility: hidden; }
.folio .fd-day__when { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.folio .fd-day__date { font-family: var(--fo-serif); font-size: var(--fo-display); letter-spacing: -0.02em; line-height: 1; }
.folio .fd-sec { margin: 24px var(--fo-gutter) 0; padding-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--fo-ink); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .fd-sec span + span { font-size: 9px; color: var(--fo-graphite); }
/* The day page's rows are plainer than the card's: the name in the sans, the kind at the end. */
.folio .fd-row--plain { padding: 11px 0; border-top: none; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline; }
.folio .fd-row--plain .fd-row__time { padding-top: 0; color: var(--fo-graphite); }
.folio .fd-row--plain .fd-row__name { font-family: var(--fo-sans); font-size: 15px; letter-spacing: 0; line-height: 1.3; }
.folio .fd-row--plain .fd-row__text { gap: 2px; }
.folio .fd-row__kind--end { font-size: 8px; color: var(--fo-graphite); }
.folio .fd-day .fd-free { padding-top: 12px; border-top: none; }
.folio .fd-day .fd-free .fo-btn--compact { height: 40px; padding: 0 14px; font-size: 14px; }
.folio .fd-quiet { margin: 12px 0 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; color: var(--fo-graphite); }
.folio .fd-spend { width: 100%; padding: 11px 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline; color: var(--fo-ink); font: inherit; text-align: left; cursor: pointer; }
.folio .fd-spend .fd-row__time { color: var(--fo-graphite); }
.folio .fd-spend__name { font-size: 15px; }
.folio .fd-spend__sum { font-family: var(--fo-mono); font-size: 13px; }
.folio .fd-more { display: block; padding-top: 10px; font-size: 13px; }
.folio .fd-entries { margin-top: 12px; }
.folio .fd-write { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.folio .fd-write .fo-btn--compact { height: 40px; padding: 0 14px; font-size: 14px; }
.folio .fd-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.folio .fd-tile { position: relative; height: 96px; padding: 0; border: none; background: var(--fo-band); overflow: hidden; cursor: pointer; }
.folio .fd-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folio .fd-tile--add { border: 1px dashed rgba(26,22,20,0.35); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--fo-ink); font: inherit; }
.folio .fd-tile--add > span:first-child { font-size: 20px; line-height: 1; }
.folio .fd-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }

/* ---- the ticket (ActivityTicket board) ----------------------------------------------- */
.folio.fd-ticket-page, .folio.fd-ticket-page .pgstack-body { background: rgba(26,22,20,0.62); }
.folio.fd-ticket-page .act-card { background: transparent; }
.folio.fd-ticket-page .tk-word { font-family: var(--fo-sans); font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fo-ink); text-underline-offset: 3px; }
.folio.fd-ticket-page .tk-stay-dates { display: flex; flex-wrap: wrap; gap: 12px; }
.folio.fd-ticket-page .tk-stay-dates .tk-value { white-space: normal; font-size: 14px; }
.folio.fd-ticket-page .tk-nights { flex: 1 0 100%; padding: 6px 0; border-top: 1px dashed var(--fo-hair-firm); border-bottom: 1px dashed var(--fo-hair-firm); text-align: center; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.folio.fd-ticket-page .tk-nights-n { font-family: var(--fo-mono); font-size: 9px; font-weight: 400; }
.folio.fd-ticket-page .tk { max-width: 330px; margin: 16px auto 0; padding: 0; background: var(--fo-card); border: none; }
.folio.fd-ticket-page .tk-band { padding: 12px 20px 8px; background: transparent; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio.fd-ticket-page .tk-issuer { font-family: var(--fo-mono); font-size: 9px; font-weight: 400; letter-spacing: 0.12em; color: var(--fo-graphite); }
.folio.fd-ticket-page .tk-act { font-family: var(--fo-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fo-ink); text-underline-offset: 3px; }
.folio.fd-ticket-page .tk-panel { padding: 8px 20px; }
.folio.fd-ticket-page .tk-name { font-family: var(--fo-serif); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.folio.fd-ticket-page .tk-label { font-family: var(--fo-mono); font-size: 9px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio.fd-ticket-page .tk-value { font-family: var(--fo-sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.folio.fd-ticket-page .tk-code { font-family: var(--fo-mono); font-size: 30px; font-weight: 400; letter-spacing: 0.02em; }
.folio.fd-ticket-page .tk-words { font-family: var(--fo-serif); font-style: italic; font-size: 15px; line-height: 1.45; }
.folio.fd-ticket-page .tk-state { font-family: var(--fo-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1.5px solid var(--fo-ink); color: var(--fo-ink); background: transparent; }
.folio.fd-ticket-page .tk-state.is-pending { border: 1.5px dashed rgba(26,22,20,0.45); color: var(--fo-graphite); }
.folio.fd-ticket-page .tk-figure { font-family: var(--fo-mono); font-size: 22px; letter-spacing: -0.01em; }
.folio.fd-ticket-page .tk-rule { border-color: var(--fo-hair-firm); }
.folio.fd-ticket-page .tk-tear { border-top: 1.5px dashed rgba(26,22,20,0.35); }
.folio.fd-ticket-page .tk-stub { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
/* The ticket's own card (ActivityTicket board; 61-folio-days.js renderFolioTicket): 330px of the card's white on the
   scrim, its rows on dashed hairlines, the counterfoil between two tears. */
.folio .ft { position: relative; width: 330px; max-width: calc(100% - 30px); margin: 16px auto 0; padding: 16px 20px 6px; background: var(--fo-card); color: var(--fo-ink); font-family: var(--fo-sans); }
.folio .ft-head { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed var(--fo-hair-firm); font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .ft-head .is-ink { color: var(--fo-ink); }
.folio .ft-stamp { position: absolute; right: 20px; top: 44px; padding: 3px 8px; border: 1.5px solid var(--fo-ink); font-family: var(--fo-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .ft-stamp.is-open { border: 1.5px dashed rgba(26,22,20,0.45); color: var(--fo-graphite); }
.folio .ft-stub .ft-stamp { position: static; }
.folio .ft-title { margin: 12px 96px 4px 0; font-family: var(--fo-serif); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.folio .ft-address { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--fo-hair-firm); font-size: 13px; line-height: 1.35; }
.folio .ft-address__acts { display: flex; gap: 12px; flex: none; }
.folio .ft-address__acts .fo-text { font-size: 12px; }
.folio .ft-label { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio .ft-value { font-size: 14px; line-height: 1.35; }
.folio .ft-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio .ft-row .ft-value { text-align: right; }
.folio .ft-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio .ft-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.folio .ft-cell.is-right { align-items: flex-end; text-align: right; }
.folio .ft-nights { padding: 6px 0; border-bottom: 1px dashed var(--fo-hair-firm); text-align: center; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.folio .ft-notes { margin: 0; padding: 10px 0; border-bottom: 1px dashed var(--fo-hair-firm); font-family: var(--fo-serif); font-style: italic; font-size: 15px; line-height: 1.45; }
.folio .ft-ends { margin: 14px 0 2px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.folio .ft-end { display: flex; flex-direction: column; }
.folio .ft-end.is-right { align-items: flex-end; text-align: right; }
.folio .ft-end .fo-quiet { font-size: 12px; }
.folio .ft-code { font-family: var(--fo-mono); font-size: 30px; letter-spacing: 0.02em; line-height: 1.1; }
.folio .ft-name { font-family: var(--fo-serif); font-size: 22px; line-height: 1.1; }
.folio .ft-ends--names { grid-template-columns: 1fr auto 1fr; }
.folio .ft-ends__rule { position: relative; height: 0; min-width: 40px; border-top: 1px solid var(--fo-ink); text-align: center; }
.folio .ft-ends__rule > span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0 6px; background: var(--fo-card); font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); white-space: nowrap; }
.folio .ft-tear { position: relative; margin: 10px -20px; border-top: 1.5px dashed rgba(26,22,20,0.35); }
.folio .ft-tear i { position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 9999px; background: rgba(26,22,20,0.62); }
.folio .ft-tear i:first-child { left: -8px; }
.folio .ft-tear i:last-child { right: -8px; }
.folio .ft-stub { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 0 6px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .ft-stub__lines { display: flex; flex-direction: column; gap: 4px; }
.folio .ft-stub .fo-quiet { font-size: 10px; letter-spacing: 0.12em; }
.folio .ft-cost { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 12px 0 8px; }
.folio .ft-cost .fo-quiet { font-size: 12px; }
.folio .ft-cost--none { align-items: center; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio .ft-figure { flex: none; font-family: var(--fo-mono); font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }
.folio .ft-cost .ft-cell { min-width: 0; }
.folio.fd-ticket-page .fd-ticket-acts { margin-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.folio .ft-file { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--fo-hair-firm); font-size: 13px; }
.folio .ft-file .fo-text { font-size: 13px; text-decoration: none; color: var(--fo-graphite); }
.folio .ft-links { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio .ft-link { font-size: 13px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; }
.folio .ft-foot { padding: 10px 0 14px; text-align: center; font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-pale); }
/* Under the card, on the scrim: the acts in the card's white, outlined. */
.folio .fd-ticket-acts { max-width: 330px; margin: 10px auto 24px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.folio .fd-ticket-act { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid rgba(253,252,250,0.7); background: transparent; color: #FDFCFA; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }

/* ---- the form (ActivityEdit board): the ticket being written, on the paper --------- */
.folio#addActivityModal .modal-content { background: var(--fo-paper); }
.folio#addActivityModal .tk, .folio#addActivityModal .af-tk { background: var(--fo-paper); border: none; width: 100%; margin: 0; }
.folio#addActivityModal .af-band { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 0 var(--fo-gutter); background: transparent; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio#addActivityModal .af-band .tk-issuer { order: 2; text-align: center; font-family: var(--fo-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#addActivityModal .af-band .af-acts { display: contents; }
.folio#addActivityModal .af-band .tk-act { 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#addActivityModal .af-band .tk-act:first-child { order: 1; justify-self: start; }
.folio#addActivityModal .af-band .tk-act.is-primary { order: 3; justify-self: end; color: var(--fo-red); }
.folio#addActivityModal .tk-panel { padding: 8px var(--fo-gutter); }
.folio#addActivityModal .tk-label, .folio#addActivityModal .form-label { font-family: var(--fo-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#addActivityModal .af-input, .folio#addActivityModal .form-input, .folio#addActivityModal input.af-day, .folio#addActivityModal .af-at { font-family: var(--fo-sans); font-size: 17px; color: var(--fo-ink); }
.folio#addActivityModal .af-input::placeholder, .folio#addActivityModal .form-input::placeholder { color: var(--fo-pale); }
.folio#addActivityModal .tk-name { font-family: var(--fo-serif); font-size: var(--fo-display); letter-spacing: -0.02em; }
/* Notes: the upright serif; only the placeholder is italic. */
.folio#addActivityModal textarea.af-notes, .folio#addActivityModal .rich-text-editor, .folio#addActivityModal .tiptap-editor-container, .folio#addActivityModal .tiptap-editor-container .ProseMirror { font-family: var(--fo-serif); font-style: normal; font-size: 15px; line-height: 1.5; color: var(--fo-ink); }
.folio#addActivityModal textarea.af-notes::placeholder, .folio#addActivityModal .rich-text-editor:empty::before, .folio#addActivityModal .ProseMirror p.is-editor-empty:first-child::before { font-style: italic; color: var(--fo-pale); }
.folio#addActivityModal .af-notes-box, .folio#addActivityModal .rich-text-editor, .folio#addActivityModal .tiptap-editor-container { border: 1px solid var(--fo-rule); background: var(--fo-card); }
/* The pick-ones: the chosen value with a chevron; the list they hung is a sheet now (61-folio-days.js). */
.folio#addActivityModal .category-selector { position: relative; padding: 0 20px 0 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 17px; color: var(--fo-ink); }
.folio#addActivityModal .category-selector::after { content: ''; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.4px solid var(--fo-ink); border-bottom: 1.4px solid var(--fo-ink); transform: rotate(45deg); }
.folio#addActivityModal .category-selector .dropdown-arrow { display: none; }
.folio#addActivityModal .currency-dropdown { display: none !important; }
/* The same-day drop's sheet (61-folio-days.js fdTimeSheet): the time proposed, the pick-one, No set time, Move and Cancel. */
.folio.fd-time .fd-time__body { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; --fo-field-x: 0; }
.folio.fd-time .fd-time__body .fo-quiet { margin: 0; font-size: 13px; line-height: 1.5; }
.folio.fd-time .fd-time__none { align-self: flex-start; min-height: 44px; font-size: 13px; }
.folio.fd-time .fd-time__none:disabled { color: var(--fo-pale); text-decoration: none; cursor: default; }
.folio.fd-time .fd-time__acts { display: flex; gap: 10px; }
.folio.fd-time .fd-time__acts .fo-btn { flex: 1; }
.folio#addActivityModal .toggle-slider { font-family: var(--fo-sans); }
/* Files: the dashed box with the plus at its end. */
.folio#addActivityModal .attachment-upload { position: relative; padding: 16px 70px 16px 18px; border: 1px dashed rgba(26,22,20,0.28); background: rgba(253,252,250,0.7); display: flex; flex-direction: column; gap: 5px; text-align: left; font-family: var(--fo-sans); letter-spacing: 0; text-transform: none; text-decoration: none; }
/* The form's word-acts (Read a booking, Remove this stay, Expand): the ink, in the sans, not the deck log's magenta print. */
.folio#addActivityModal .af-word-act, .folio#addActivityModal [data-af-drop] { font-family: var(--fo-sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fo-ink); }
.folio#addActivityModal .attachment-upload::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 1px solid var(--fo-edge); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.folio#addActivityModal .upload-text { font-family: var(--fo-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fo-ink); }
.folio#addActivityModal .upload-subtext { font-family: var(--fo-sans); font-size: 12px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--fo-graphite); }
.folio#addActivityModal .af-foot .tk-act, .folio#addActivityModal [data-af-drop] { color: var(--fo-ink); }
/* THE BOARD'S FIELD LAYOUT (ActivityEdit), over the ticket-being-written's parts. A field is a mono label over a
   17px value on a dashed hairline; pairs sit in two columns; the ticket's counterfoil, its codes at 30px and its
   head band go; the sections carry the board's heads; Boswell's band stands first. */
.folio#addActivityModal .tk-tear, .folio#addActivityModal .tk-stub, .folio#addActivityModal .tk-run { display: none; }
.folio#addActivityModal .tk-panel { padding: 0 var(--fo-gutter); }
.folio#addActivityModal .tk-panel + .tk-panel { margin-top: 8px; }
.folio#addActivityModal .fe-label, .folio#addActivityModal .tk-label, .folio#addActivityModal .form-label { display: block; margin: 0; padding: 10px 0 0; font-family: var(--fo-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#addActivityModal .fe-label.is-required, .folio#addActivityModal .tk-label.is-required { color: var(--fo-ink); }
.folio#addActivityModal .fe-label.is-required::after, .folio#addActivityModal .tk-label.is-required::after { content: '·'; margin-left: 3px; color: var(--fo-red); font-size: 16px; line-height: 0; }
.folio#addActivityModal .af-field, .folio#addActivityModal .fe-cell, .folio#addActivityModal .af-times > div, .folio#addActivityModal .af-when, .folio#addActivityModal .af-leaves, .folio#addActivityModal .af-place, .folio#addActivityModal .af-grow, .folio#addActivityModal .form-section { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0 0 8px; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; }
.folio#addActivityModal .af-field + .af-field, .folio#addActivityModal .af-pair + .af-field { margin-top: 0; }
.folio#addActivityModal .af-input, .folio#addActivityModal .form-input, .folio#addActivityModal .tk-code, .folio#addActivityModal .tk-name, .folio#addActivityModal .af-at, .folio#addActivityModal input.af-day, .folio#addActivityModal .amount-input { min-height: 28px; padding: 2px 0; border: none; background: transparent; box-shadow: none; font-family: var(--fo-sans); font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; color: var(--fo-ink); }
.folio#addActivityModal .af-input:focus, .folio#addActivityModal .form-input:focus, .folio#addActivityModal input.af-day:focus-visible, .folio#addActivityModal .af-at:focus-within { box-shadow: inset 0 -1.5px 0 0 var(--fo-ink); outline: none; }
.folio#addActivityModal .tk-code, .folio#addActivityModal .tk-name { font-family: var(--fo-sans); font-size: 17px; letter-spacing: 0; }
.folio#addActivityModal .af-ends, .folio#addActivityModal .af-where, .folio#addActivityModal .af-times, .folio#addActivityModal .af-stay-dates, .folio#addActivityModal .af-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; padding: 0; }
.folio#addActivityModal .af-where { display: none; }
.folio#addActivityModal .af-times > div, .folio#addActivityModal .af-times > div:last-child { align-items: flex-start; text-align: left; }
.folio#addActivityModal .af-at, .folio#addActivityModal .af-at-small { justify-content: flex-start; padding: 0; }
.folio#addActivityModal .af-word.is-unset, .folio#addActivityModal .is-unset { color: var(--fo-pale); }
.folio#addActivityModal .af-daytime { display: flex; gap: 16px; align-items: baseline; }
.folio#addActivityModal .af-head-row { display: block; }
.folio#addActivityModal .af-stamp-slot, .folio#addActivityModal .af-slot { display: block; }
.folio#addActivityModal .af-nights { padding: 8px 0; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); display: flex; gap: 4px; align-items: baseline; }
.folio#addActivityModal .af-nights .tk-nights-n, .folio#addActivityModal .af-nights .tk-nights-w { font: inherit; }
/* Boswell's band: the eyebrow, the words, and Read a booking as the filled button. */
.folio#addActivityModal .af-reader { margin: 16px var(--fo-gutter) 0; padding: 14px; background: var(--fo-band); display: flex; flex-direction: column; gap: 10px; }
.folio#addActivityModal .af-reader::before { content: 'Boswell reads it for you'; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#addActivityModal .af-reader-note { order: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--fo-ink); font-family: var(--fo-sans); }
.folio#addActivityModal .af-reader-act { order: 2; align-self: flex-start; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--fo-ink); color: var(--fo-card); font-family: var(--fo-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
.folio#addActivityModal .af-reader-out { order: 3; font-size: 13px; line-height: 1.5; }
.folio#addActivityModal .af-reader-out:empty { display: none; }
/* The sections' heads, as the board names them. */
.folio#addActivityModal .fe-sec, .folio#addActivityModal #flightFormCard .af-reader + .tk-panel::before, .folio#addActivityModal #stayFormCard .af-reader + .tk-panel::before, .folio#addActivityModal #transitFormCard > .tk-panel:first-of-type::before, .folio#addActivityModal #sightseeingFormCard > .tk-panel:first-of-type::before, .folio#addActivityModal #genericCardForm > .tk-panel:first-of-type::before, .folio#addActivityModal .af-cost::before, .folio#addActivityModal #attachmentsSection > .form-label, .folio#addActivityModal .af-notes-box > .af-notes-head > .tk-label, .folio#addActivityModal #stayBpSection2 > .tk-label, .folio#addActivityModal #flightNotesInput ~ *, .folio#addActivityModal .af-links-box > .tk-label { display: block; margin: 24px 0 0; padding: 0 0 6px; border-bottom: 1px dashed var(--fo-hair-firm); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#addActivityModal #flightFormCard .af-reader + .tk-panel::before { content: 'The flight'; }
.folio#addActivityModal #stayFormCard .af-reader + .tk-panel::before { content: 'The stay'; }
.folio#addActivityModal #transitFormCard > .tk-panel:first-of-type::before { content: 'The journey'; }
.folio#addActivityModal #sightseeingFormCard > .tk-panel:first-of-type::before { content: 'The sight'; }
.folio#addActivityModal #genericCardForm > .tk-panel:first-of-type::before { content: 'The plan'; }
.folio#addActivityModal .af-cost::before { content: 'Booking and cost'; }
.folio#addActivityModal #stayBpSection2 > .tk-label, .folio#addActivityModal #bpSection2 > .tk-label, .folio#addActivityModal #transitBpSection2 > .tk-label { display: block; margin: 24px 0 0; padding: 0 0 6px; border-bottom: 1px dashed var(--fo-hair-firm); color: var(--fo-ink); }
.folio#addActivityModal #stayBpSection2, .folio#addActivityModal #bpSection2, .folio#addActivityModal #transitBpSection2 { border-bottom: none; }
.folio#addActivityModal textarea.af-notes { margin-top: 8px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--fo-rule); background: var(--fo-card); }
/* The transport's How, the cost row and the booking pair. */
.folio#addActivityModal .af-mode { display: flex; flex-direction: column; gap: 5px; padding: 0 0 8px; border-bottom: 1px dashed var(--fo-hair); }
.folio#addActivityModal .af-mode::before { content: 'How'; padding-top: 10px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#addActivityModal .form-row-split { display: grid; grid-template-columns: 72px 1fr 1fr; gap: 0 16px; margin: 0; }
.folio#addActivityModal .form-group { display: flex; flex-direction: column; gap: 5px; padding: 0 0 8px; border-bottom: 1px dashed var(--fo-hair); }
.folio#addActivityModal .form-group > div { display: flex; flex-direction: column; gap: 5px; }
.folio#addActivityModal .amount-input-wrapper { display: flex; align-items: baseline; gap: 4px; }
.folio#addActivityModal .currency-symbol { display: none; }
.folio#addActivityModal #costPreview { padding: 6px 0 0; font-size: 12px; color: var(--fo-graphite); }
.folio#addActivityModal .already-booked-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--fo-hair); }
.folio#addActivityModal .already-booked-row .form-label { padding: 0; font-family: var(--fo-sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--fo-ink); }
.folio#addActivityModal #costPaymentSection { border-bottom: none; }
.folio#addActivityModal #attachmentsSection { padding-top: 4px; border-bottom: none; }
.folio#addActivityModal #attachmentList .tk-file { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--fo-hair-firm); font-size: 14px; }
.folio#addActivityModal #attachmentList .tk-file-act { padding: 0; border: none; background: none; font-family: var(--fo-sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fo-graphite); text-decoration: none; }
.folio#addActivityModal .af-foot { margin: 8px var(--fo-gutter) 0; padding: 14px 0 24px; border-top: 1px dashed var(--fo-hair-firm); }
.folio#addActivityModal .af-foot .af-drop { padding: 0; border: none; background: none; font-family: var(--fo-sans); font-size: 14px; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--fo-ink); }
.folio#addActivityModal .modal-actions { display: none; }
/* Nothing on the board is right-aligned; the pair's second column, the flight number and the time words sit left. */
.folio#addActivityModal .af-tk .is-right, .folio#addActivityModal .af-pair > .af-flightno, .folio#addActivityModal .af-pair > .af-pair-right, .folio#addActivityModal .af-pair > .af-flightno .tk-label { text-align: left; font-weight: 400; }
.folio#addActivityModal .af-word { font-family: var(--fo-sans); font-weight: 400; letter-spacing: 0; text-transform: none; }
.folio#addActivityModal #costPaymentSection > .form-label { display: none; }
.folio#addActivityModal .upload-subtext { display: block; }
/* Departs · / Arrives (the board's flight and journey states): the label, then the date and the time on one line —
   "Sat 26 Sep · 14:00" — whatever order the markup keeps them in. */
.folio#addActivityModal .af-times > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.folio#addActivityModal .af-times > div > .fe-label { order: 0; }
.folio#addActivityModal .af-times > div > input.af-day { order: 1; }
.folio#addActivityModal .af-times > div > .af-at { order: 2; }

/* Check in · / Check out likewise; the nights line under the pair, in the mono, on the left. */
.folio#addActivityModal .af-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.folio#addActivityModal .af-when > .tk-label { flex: 1 0 100%; }
.folio#addActivityModal .af-when > .af-at-small::before { content: '·'; margin-right: 6px; color: var(--fo-graphite); }
.folio#addActivityModal .af-stay-row { display: flex; flex-direction: column; }
.folio#addActivityModal .af-nights { order: 2; padding: 8px 0; justify-content: flex-start; }
.folio#addActivityModal .af-nights .tk-nights-n::after { content: ' '; }
/* The switches (Booked, Breakfast included): the board's pill, the row's words on the left. */
.folio#addActivityModal .already-booked-row .toggle-switch { position: relative; width: 40px; height: 22px; flex: none; }
.folio#addActivityModal .already-booked-row .toggle-slider { position: absolute; inset: 0; width: 40px; height: 22px; padding: 0; border: none; border-radius: 9999px; background: var(--fo-rule); box-shadow: none; font-size: 0; }
.folio#addActivityModal .already-booked-row .toggle-slider::before { content: ''; display: block; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 9999px; background: var(--fo-card); transition: transform 0.15s ease; }
.folio#addActivityModal .already-booked-row .toggle-slider::after { content: none; }
.folio#addActivityModal .already-booked-row .toggle-switch input:checked + .toggle-slider { background: var(--fo-ink); }
.folio#addActivityModal .already-booked-row .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.folio#addActivityModal #alreadyBookedSection .already-booked-row .form-label { font-size: 0; padding: 0; }
.folio#addActivityModal #alreadyBookedSection .already-booked-row .form-label::before { content: 'Booking'; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); display: block; }
.folio#addActivityModal #alreadyBookedSection .already-booked-row .form-label::after { content: 'Not yet'; font-size: 17px; color: var(--fo-ink); display: block; margin-top: 5px; }
.folio#addActivityModal #alreadyBookedSection:has(input:checked) .already-booked-row .form-label::after { content: 'Booked'; }
.folio#addActivityModal #breakfastSection .already-booked-row .form-label { font-size: 0; padding: 0; }
.folio#addActivityModal #breakfastSection .already-booked-row .form-label::before { content: 'Breakfast included'; font-size: 15px; color: var(--fo-ink); }
/* The stay's head slot (where the booked switch stood over the name) is empty on the folio: the switch sits with the
   booking ref under Booking and cost (61-folio-days.js). */
.folio#addActivityModal .af-stamp-slot:empty { display: none; }
.folio#addActivityModal #stayBpBookingRefRow, .folio#addActivityModal #bpBookingRow, .folio#addActivityModal #transitBpBookingRow, .folio#addActivityModal #sightBpBookingRow, .folio#addActivityModal #genericCardBookingRow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.folio#addActivityModal #bpBookingRow > .af-flightno { grid-column: 1 / -1; }
.folio#addActivityModal .af-pair > #alreadyBookedSection { grid-column: auto; }

/* ---- notes, bigger (NotesFull board) ------------------------------------------------ */
.folio.fd-notes-page .pgstack-body { background: var(--fo-paper); }
.folio .fd-notes { padding: 0 var(--fo-gutter); }
.folio .fd-notes .af-rack, .folio .fd-notes .rich-text-toolbar { display: flex; gap: 2px; margin: 0 calc(-1 * var(--fo-gutter)); padding: 8px 16px; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); }
.folio .fd-notes .rich-text-btn { height: 36px; min-width: 36px; padding: 0 6px; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--fo-ink); }
.folio .fd-notes .rich-text-btn.is-active { background: var(--fo-ink); color: var(--fo-card); }
.folio .fd-notes .tiptap-editor-container, .folio .fd-notes .ProseMirror { min-height: 40vh; padding: 20px 0 0; border: none; background: transparent; font-family: var(--fo-serif); font-size: 16px; line-height: 1.6; color: var(--fo-ink); }
.folio .fd-notes .ProseMirror h2, .folio .fd-notes .ProseMirror h3 { margin: 16px 0 6px; font-family: var(--fo-sans); font-weight: 500; font-size: 17px; }
.folio .fd-notes__note { margin: 24px 0 0; font-size: 12px; line-height: 1.5; }

/* ---- the calendar (Calendar board), in the section sheet ---------------------------- */
.folio#tripSectionSheet .trip-section-sheet-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 44px; padding: 0 var(--fo-gutter); background: var(--fo-paper); border-bottom: 1px dashed var(--fo-hair); }
.folio#tripSectionSheet .trip-section-sheet-title { grid-column: 2; margin: 0; font-family: var(--fo-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#tripSectionSheet .trip-section-sheet-actions { grid-column: 3; justify-self: end; display: flex; }
.folio#tripSectionSheet #tripSheetAddBtn { display: none; }
.folio#tripSectionSheet .trip-section-sheet-btn { min-height: 44px; padding: 0; border: none; background: transparent; 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#tripSectionSheet .trip-section-sheet-body, .folio#tripSectionSheet .tcal-scroll, .folio#tripSectionSheet .trip-cal-section { background: var(--fo-paper); }
.folio#tripSectionSheet .pcal-head { display: flex; justify-content: space-between; padding: 14px var(--fo-gutter) 14px; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripSectionSheet .pcal-place, .folio#tripSectionSheet .pcal-range { font: inherit; color: inherit; }
.folio#tripSectionSheet .pcal-dow { margin: 0 var(--fo-gutter); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.folio#tripSectionSheet .pcal-dow > div { height: 26px; display: flex; align-items: center; justify-content: center; font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripSectionSheet .pcal-grid { margin: 0 var(--fo-gutter); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 1px; background: rgba(26,22,20,0.16); }
.folio#tripSectionSheet .pcal-month { grid-column: 1 / -1; padding: 7px 10px; background: var(--fo-band); font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#tripSectionSheet .pcal-skip { grid-column: 1 / -1; padding: 4px; background: var(--fo-band); text-align: center; color: var(--fo-pale); font-size: 12px; }
.folio#tripSectionSheet .pcal-cell { position: relative; min-height: 58px; padding: 4px 0; background: var(--fo-paper); display: flex; flex-direction: column; align-items: center; border: none; border-radius: 0; }
.folio#tripSectionSheet .pcal-cell.is-void, .folio#tripSectionSheet .pcal-cell.is-outside { background: var(--fo-band); }
.folio#tripSectionSheet .pcal-cell.is-selected { outline: 1.5px solid var(--fo-ink); outline-offset: -1.5px; }
.folio#tripSectionSheet .pcal-num { font-family: var(--fo-mono); font-size: 13px; color: var(--fo-ink); }
.folio#tripSectionSheet .pcal-cell.is-outside .pcal-num { color: var(--fo-pale); }
.folio#tripSectionSheet .pcal-cell.is-today .pcal-num { color: var(--fo-red); }
.folio#tripSectionSheet .tcal-legend { display: flex; gap: 14px; padding: 10px var(--fo-gutter) 0; font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); border: none; background: transparent; }
.folio#tripSectionSheet .tcal-day { margin: 14px var(--fo-gutter) 0; padding: 0; background: transparent; border: none; }
.folio#tripSectionSheet .tcal-day-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1.5px solid var(--fo-ink); }
.folio#tripSectionSheet .tcal-day-num { font-family: var(--fo-serif); font-size: var(--fo-display); line-height: 1; }
.folio#tripSectionSheet .tcal-day-dow, .folio#tripSectionSheet .tcal-day-ctx { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripSectionSheet .tcal-day-open { margin-left: auto; min-height: 44px; padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; }
.folio#tripSectionSheet .tcal-row { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: baseline; padding: 11px 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; }
.folio#tripSectionSheet .tcal-row.is-stay, .folio#tripSectionSheet .tcal-row.is-journal { grid-template-columns: 1fr; }
.folio#tripSectionSheet .tcal-row-time { font-family: var(--fo-mono); font-size: 12px; color: var(--fo-graphite); }
.folio#tripSectionSheet .tcal-row-name { font-family: var(--fo-sans); font-size: 15px; font-weight: 400; color: var(--fo-ink); }
.folio#tripSectionSheet .tcal-row-meta { font-size: 12px; color: var(--fo-graphite); }
.folio#tripSectionSheet .tcal-sub { margin-top: 14px; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#tripSectionSheet .tcal-empty { margin: 12px 0 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; color: var(--fo-graphite); }

/* ---- the weather (Weather board), docked under the contents ------------------------- */
.folio.fd-wx-page .pgstack-body { background: var(--fo-paper); }
.folio.fd-wx-page .wx-subtitle { padding: 12px 20px 0; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio.fd-wx-page .wx-content { padding: 0 20px; }
.folio.fd-wx-page .wx-stop { margin-top: 18px; }
.folio.fd-wx-page .wx-stop-head { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid rgba(26,22,20,0.4); }
.folio.fd-wx-page .wx-stop-name { font-family: var(--fo-serif); font-size: 20px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; text-transform: none; color: var(--fo-ink); }
.folio.fd-wx-page .wx-stop-mode { font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio.fd-wx-page .wx-stop-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); font-family: var(--fo-sans); text-transform: none; letter-spacing: 0; }
.folio.fd-wx-page .wx-day { display: grid; grid-template-columns: 62px 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--fo-hair); }
.folio.fd-wx-page .wx-day-date { font-size: 13px; color: var(--fo-ink); font-family: var(--fo-sans); text-transform: none; letter-spacing: 0; }
.folio.fd-wx-page .wx-day-mark { width: 18px; height: 18px; color: var(--fo-ink); }
.folio.fd-wx-page .wx-day-cond { font-size: 13px; color: var(--fo-ink); }
.folio.fd-wx-page .wx-day-pop { font-size: 11px; color: var(--fo-graphite); }
.folio.fd-wx-page .wx-day-hi { font-family: var(--fo-mono); font-size: 13px; color: var(--fo-ink); }
.folio.fd-wx-page .wx-day-lo { font-family: var(--fo-mono); font-size: 13px; color: var(--fo-pale); }
.folio.fd-wx-page .wx-msg { font-family: var(--fo-serif); font-style: italic; font-size: 15px; color: var(--fo-graphite); }
.folio.fd-wx-page .wx-source { margin-top: 18px; padding: 10px 0 22px; border-top: 1px solid var(--fo-rule); font-family: var(--fo-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio.fd-wx-page .wx-spinner { border-color: var(--fo-rule); border-top-color: var(--fo-ink); }

/* Booking before Booking ref in every pair (the board); the flight number and the carrier on their own line. */
.folio#addActivityModal .af-pair > #alreadyBookedSection { order: 1; }
.folio#addActivityModal .af-pair > #bookingRefSection { order: 2; }
.folio#addActivityModal .af-pair > .af-flightno, .folio#addActivityModal .af-pair > .af-pair-right { order: 3; grid-column: 1 / -1; }
.folio#addActivityModal .af-when { flex-direction: column; align-items: flex-start; }
.folio#addActivityModal .af-when > .af-at-small::before { content: none; }

/* A date field keeps to its column: the pair's cells clip, the words shrink to 15px. */
.folio#addActivityModal .af-when, .folio#addActivityModal .af-times > div, .folio#addActivityModal .fe-cell { min-width: 0; overflow: hidden; }
.folio#addActivityModal input.af-day, .folio#addActivityModal .af-day-value, .folio#addActivityModal .af-at, .folio#addActivityModal .af-at-small { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folio#addActivityModal .af-at, .folio#addActivityModal .af-at-small { width: auto; }

/* ---- the polish pass (review of bc7f931) --------------------------------------------- */
/* Every field label is the one kit label (17w's .af-field .tk-label and .form-label outrank the room's by a class). */
.folio#addActivityModal .af-tk .af-field .tk-label, .folio#addActivityModal .af-tk .form-label, .folio#addActivityModal .af-tk .fe-label, .folio#addActivityModal .af-tk .tk-label { font-family: var(--fo-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#addActivityModal .af-tk .fe-label.is-required, .folio#addActivityModal .af-tk .tk-label.is-required { color: var(--fo-ink); }
/* The amount is a value like any other: the sans, the placeholder pale. */
.folio#addActivityModal .af-tk #activityCostInput, .folio#addActivityModal .af-tk .amount-input { min-height: 28px; font-family: var(--fo-sans); font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--fo-ink); }
.folio#addActivityModal .af-tk #activityCostInput::placeholder { color: var(--fo-pale); font-weight: 400; }
/* Check in · / Check out and Departs · / Arrives: the label above, "Sat 26 Sept · 14:00" below on one line, two
   columns that clip nothing. */
.folio#addActivityModal .af-when, .folio#addActivityModal .af-times > div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 5px; min-width: 0; overflow: visible; }
.folio#addActivityModal .af-when > .tk-label, .folio#addActivityModal .af-times > div > .fe-label { flex: 1 0 100%; order: 0; }
.folio#addActivityModal input.af-day, .folio#addActivityModal .af-day-value { order: 1; width: auto; max-width: 100%; flex: 0 1 auto; font-size: 15px; white-space: nowrap; overflow: visible; text-overflow: clip; }
.folio#addActivityModal .af-at, .folio#addActivityModal .af-at-small { order: 2; width: auto; font-size: 15px; }
.folio#addActivityModal .af-times > div > .af-at::before, .folio#addActivityModal .af-when > .af-at-small::before { content: '·'; margin-right: 6px; color: var(--fo-graphite); }
.folio#addActivityModal .af-times > div > input[type="hidden"] { display: none; }
/* Booking / Booking ref stand under Booking and cost for every kind (61-folio-days.js moves them there). */
.folio#addActivityModal .af-cost > .fe-booking { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.folio#addActivityModal .af-cost > .fe-booking > #alreadyBookedSection { order: 1; }
.folio#addActivityModal .af-cost > .fe-booking > #bookingRefSection { order: 2; }
.folio#addActivityModal .af-pair:empty, .folio#addActivityModal .af-slot:empty { display: none; }

/* Outranking 17w's own input rules (#addActivityModal .af-tk input.af-day): the date sits with its time on one line. */
.folio#addActivityModal .af-tk input.af-day, .folio#addActivityModal .af-tk .af-day-value { width: auto; max-width: 100%; min-height: 28px; padding: 2px 0; font-family: var(--fo-sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.folio#addActivityModal .af-tk .af-at, .folio#addActivityModal .af-tk .af-at-small { width: auto; min-height: 28px; padding: 2px 0; }
/* The switches' words are values, not labels: the sans, no capitals. */
.folio#addActivityModal .af-tk #alreadyBookedSection .already-booked-row .form-label::after, .folio#addActivityModal .af-tk #breakfastSection .already-booked-row .form-label::before { font-family: var(--fo-sans); letter-spacing: 0; text-transform: none; font-weight: 400; }
.folio#addActivityModal .af-tk #alreadyBookedSection .already-booked-row .form-label::after { font-size: 17px; }
.folio#addActivityModal .af-tk #breakfastSection .already-booked-row .form-label::before { font-size: 15px; }

/* A date input's own width is its box's, not its words': sized to the words so the time fits beside it. */
.folio#addActivityModal .af-tk input.af-day, .folio#addActivityModal .af-tk .af-day-value { width: 11.5ch; field-sizing: content; }

/* ---- the last nits (review of 69eefbd) ---------------------------------------------- */
/* No kind colour anywhere on the folio: the band's coloured hairline (17k) goes; colour codes only the expenses overview. */
.folio#addActivityModal .tk-band[style*="--tk-cat"], .folio#addActivityModal .af-band { border-left: none; --tk-cat: transparent; }
/* The time beside its date on one line: the button loses 17w's 5.5em floor, 44px height and underline; the pair's
   columns may shrink; the words are 14px so "Sat 26 Sept · 14:00" fits a column at 390. */
.folio#addActivityModal .af-tk .af-at, .folio#addActivityModal .af-tk .af-at-small { min-width: 0; min-height: 28px; box-shadow: none; flex: 0 0 auto; font-size: 14px; }
.folio#addActivityModal .af-tk input.af-day, .folio#addActivityModal .af-tk .af-day-value { flex: 0 0 auto; font-size: 14px; }
.folio#addActivityModal .af-tk .af-times, .folio#addActivityModal .af-tk .af-stay-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.folio#addActivityModal .af-tk .af-times > div, .folio#addActivityModal .af-tk .af-when { column-gap: 4px; }
/* A placeholder is a placeholder: the sans and the pale, the booking ref's too (17w names it by two ids). */
.folio#addActivityModal .af-tk #bookingRefSection .form-input, .folio#addActivityModal .af-tk #bookingRefSection .form-input::placeholder { font-family: var(--fo-sans); font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.folio#addActivityModal .af-tk #bookingRefSection .form-input::placeholder { color: var(--fo-pale); }
/* Currency / Amount / Method on one baseline: the row's cells start at the top, and every label has the same room above it. */
.folio#addActivityModal .af-tk #costPaymentSection .form-row-split { align-items: start; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0 16px; }
.folio#addActivityModal .af-tk #costPaymentSection .form-group, .folio#addActivityModal .af-tk #costPaymentSection .form-group > div { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; }
.folio#addActivityModal .af-tk #costPaymentSection .form-group { padding-bottom: 8px; }
.folio#addActivityModal .af-tk #costPaymentSection .fe-label { padding-top: 10px; line-height: 1.2; }
.folio#addActivityModal .af-tk #costPaymentSection .amount-input-wrapper { min-height: 28px; display: flex; align-items: center; }
.folio#addActivityModal .af-tk #costPaymentSection .category-selector { min-height: 28px; }

/* The card fills the screen between the gutters: 17k's 344px ticket measure is not the form's. */
.folio#addActivityModal .tk, .folio#addActivityModal .af-tk { max-width: none; }