/* ==========================================================================================================
   The activity form (ActivityEdit board), written again — 2026-10-01
   ==========================================================================================================
   The owner, after a day of fixes that did not hold: 重写吧. The deck log's tickets re-skinned had become three
   hundred override rules in 62-folio-days.css fighting 17w-activity-form.css and 17k-ticket.css, which named
   the old markup by id two deep and won. The markup is new (34-markup-activity.js, classes ff-*) and so is
   this file; neither of the old stylesheets reaches it.

   One grammar for every field, measured from the board: a mono label 10px, 14px below the rule above it and
   6px over its value; the value 17px sans; 8px under it a dashed rule. Two fields side by side are a row.
   A section head is the mono in ink with its own dashed rule. Red is Save, the required dot and a fault. */

/* The whole screen, from the top: the sheet the modal frame draws (85% high, 24px inset) is not this form. */
.folio#addActivityModal .modal-content.ff { top: 0; bottom: 0; height: 100%; max-height: none; margin: 0; padding: 0; border: none; border-radius: 0; display: flex; flex-direction: column; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); }
.folio#addActivityModal .ff-body { flex: 1 1 auto; width: 100%; max-width: none; min-height: 0; margin: 0;   /* 09-modal sets a modal body to 90% */ padding: 0 0 40px; overflow-y: auto; overscroll-behavior: contain; background: var(--fo-paper); }
.folio#addActivityModal .ff-form { margin: 0; }
.folio#addActivityModal .ff-carriers, .folio#addActivityModal #activityFormActions, .folio#addActivityModal .ff-stub { display: none !important; }
.folio#addActivityModal .ff-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.folio#addActivityModal .ff-card { padding: 0 var(--fo-gutter); }

/* The bar: Cancel | ADD A STAY | Save, on the paper, staying while the form scrolls. */
.folio#addActivityModal .ff-bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 44px; margin: 0 calc(-1 * var(--fo-gutter)); padding: 0 var(--fo-gutter); background: var(--fo-paper); border-bottom: 1px dashed var(--fo-hair); }
.folio#addActivityModal .ff-bar__act { justify-self: start; min-height: 44px; padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.folio#addActivityModal .ff-bar__act.is-commit { justify-self: end; color: var(--fo-red); text-decoration: underline; text-underline-offset: 3px; }
.folio#addActivityModal .ff-bar__title { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); white-space: nowrap; }

/* Boswell reads it for you. */
.folio#addActivityModal .ff-reader { margin: 16px 0 0; padding: 14px; background: var(--fo-band); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.folio#addActivityModal .ff-reader__head { font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#addActivityModal .ff-reader__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fo-ink); }
.folio#addActivityModal .ff-reader__act { height: 40px; padding: 0 14px; border: none; background: var(--fo-ink); color: var(--fo-card); font-family: var(--fo-sans); font-size: 14px; font-weight: 500; cursor: pointer; }
.folio#addActivityModal .ff-reader__act[aria-disabled="true"] { opacity: 0.6; }
.folio#addActivityModal .af-reader-out { width: 100%; font-size: 13px; line-height: 1.5; }
.folio#addActivityModal .af-reader-out:empty { display: none; }
.folio#addActivityModal .af-reader-out button { min-height: 32px; padding: 0; border: none; background: transparent; font: inherit; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Sections and fields. */
.folio#addActivityModal .ff-sec { margin: 26px 0 0; padding: 0 0 8px; border-bottom: 1px dashed var(--fo-hair-firm); font-family: var(--fo-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#addActivityModal .ff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.folio#addActivityModal .ff-field { display: flex; flex-direction: column; min-width: 0; padding: 14px 0 8px; border-bottom: 1px dashed var(--fo-hair); }
.folio#addActivityModal .ff-label { display: block; margin: 0 0 6px; padding: 0; font-family: var(--fo-mono); font-size: 10px; font-weight: 400; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.folio#addActivityModal .ff-label.is-required { color: var(--fo-ink); }
.folio#addActivityModal .ff-label.is-required::after { content: '·'; margin-left: 4px; color: var(--fo-red); font-weight: 700; }
.folio#addActivityModal .ff-input { display: block; width: 100%; min-height: 26px; box-sizing: border-box; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-family: var(--fo-sans); font-size: 17px; line-height: 1.35; color: var(--fo-ink); -webkit-appearance: none; appearance: none; resize: none; }
.folio#addActivityModal .ff-input::placeholder { color: var(--fo-pale); opacity: 1; }
.folio#addActivityModal .ff-input--sub { margin-top: 4px; font-size: 14px; color: var(--fo-graphite); }
.folio#addActivityModal .ff-input:focus-visible { outline: none; }
.folio#addActivityModal .ff-field:focus-within { border-bottom-color: var(--fo-ink); }
/* An address is searched for (fdAddressSheet): the glass at the right, as a stop's Location shows it. */
.folio#addActivityModal .ff-address { padding-right: 24px; cursor: pointer; caret-color: transparent; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2366635F' stroke-width='1.3'><circle cx='7' cy='7' r='5.2'/><path d='M11 11l3.5 3.5'/></svg>") no-repeat right 2px center; }

/* A day and its time: "Sat 26 Sept · 14:00"; the time its own word, opening the time sheet. */
.folio#addActivityModal .ff-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 26px; }
.folio#addActivityModal .ff-day { width: auto; min-width: 3ch; max-width: 100%; field-sizing: content; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; font-family: var(--fo-sans); font-size: 17px; line-height: 1.35; color: var(--fo-ink); cursor: pointer; }
.folio#addActivityModal .ff-day::placeholder { color: var(--fo-pale); opacity: 1; }
.folio#addActivityModal .ff-time { min-height: 26px; padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 17px; line-height: 1.35; color: var(--fo-ink); text-align: left; cursor: pointer; white-space: nowrap; }
.folio#addActivityModal .ff-when .ff-time::before { content: '·'; margin-right: 6px; color: var(--fo-graphite); }
.folio#addActivityModal .ff-time .is-unset { color: var(--fo-pale); }
.folio#addActivityModal .ff-nights { margin: 0; padding: 8px 0; font-family: var(--fo-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#addActivityModal .ff-nights:has(#stayNightsDisplay:empty) { display: none; }

/* Notes: a label over a box; the box is serif, upright, and only its placeholder leans. */
.folio#addActivityModal .ff-notes { padding: 14px 0 0; }
.folio#addActivityModal .ff-notes__head { display: flex; justify-content: space-between; align-items: baseline; }
.folio#addActivityModal .ff-box { display: block; width: 100%; min-height: 84px; box-sizing: border-box; margin: 0; padding: 10px 12px; border: 1px solid var(--fo-rule); border-radius: 0; background: var(--fo-card); box-shadow: none; outline: none; font-family: var(--fo-serif); font-size: 15px; line-height: 1.45; color: var(--fo-ink); resize: none; }
.folio#addActivityModal .ff-box::placeholder { font-style: italic; color: var(--fo-pale); opacity: 1; }
.folio#addActivityModal .ff-box:focus { border-color: var(--fo-ink); }
.folio#addActivityModal .ff-notes--rich .ProseMirror { min-height: 64px; outline: none; font-family: var(--fo-serif); font-size: 15px; line-height: 1.45; }
.folio#addActivityModal .ff-notes--rich .ProseMirror p { margin: 0 0 6px; }
.folio#addActivityModal .ff-tools { display: none; gap: 4px; padding: 6px 0; }
.folio#addActivityModal #sightsNotesEditorGroup:focus-within .ff-tools { display: flex; }
.folio#addActivityModal .ff-tools .rich-text-btn { min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid var(--fo-rule); background: transparent; font-family: var(--fo-sans); font-size: 13px; color: var(--fo-ink); cursor: pointer; }
.folio#addActivityModal .ff-tools .rich-text-btn.active { background: var(--fo-ink); color: var(--fo-card); border-color: var(--fo-ink); }
.folio#addActivityModal .ff-quiet { font-size: 12px; color: var(--fo-graphite); }

/* Words that act: Expand, Add, Remove — the ink, underlined. */
.folio#addActivityModal .ff-text { min-height: 32px; padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 13px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Useful links. */
.folio#addActivityModal .ff-links { padding: 14px 0 0; }
.folio#addActivityModal .ff-links__add { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--fo-hair); }

/* A pick-one: the value and ▾, opening a sheet (currency, method, How, Booking). */
.folio#addActivityModal .ff-pick { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 26px; padding: 0; border: none; background: transparent; box-shadow: none; font-family: var(--fo-sans); font-size: 17px; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio#addActivityModal .ff-pick::after { content: ''; flex: none; width: 7px; height: 7px; margin: -4px 3px 0 0; border-right: 1.3px solid var(--fo-ink); border-bottom: 1.3px solid var(--fo-ink); transform: rotate(45deg); }
.folio#addActivityModal .ff-pick > span { font: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
.folio#addActivityModal .currency-dropdown { display: none !important; }
.folio#addActivityModal .ff-booked__yes { display: none; }
.folio#addActivityModal #alreadyBookedSection:has(input:checked) .ff-booked__yes { display: inline; }
.folio#addActivityModal #alreadyBookedSection:has(input:checked) .ff-booked__no { display: none; }

/* Booking | Booking ref, the booking first whichever order the sections arrive in. */
.folio#addActivityModal .ff-booking { align-items: start; }
.folio#addActivityModal .ff-booking #alreadyBookedSection { order: -1; }
.folio#addActivityModal .ff-booking .ff-slot { min-width: 0; }

/* A switch row: Breakfast included. */
.folio#addActivityModal .ff-switch-row { border-bottom: 1px dashed var(--fo-hair); }
.folio#addActivityModal .ff-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; font-family: var(--fo-sans); font-size: 15px; color: var(--fo-ink); cursor: pointer; }
.folio#addActivityModal .ff-switch__box { flex: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: 9999px; background: var(--fo-rule); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background .15s; }
.folio#addActivityModal .ff-switch__box::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fo-card); transition: transform .15s; }
.folio#addActivityModal .ff-switch__box:checked { background: var(--fo-ink); }
.folio#addActivityModal .ff-switch__box:checked::after { transform: translateX(18px); }

/* The money: Currency | Amount | Method, and what it comes to under them. */
.folio#addActivityModal .ff-money { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);   /* the board: 72 | 118 | 119 at 390 */ gap: 0 16px; }
.folio#addActivityModal .ff-money__said { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; color: var(--fo-graphite); }
.folio#addActivityModal .ff-money__said:empty { display: none; }

/* Files: the section head, the files already here, then Add files. */
.folio#addActivityModal .ff-files__list { display: flex; flex-direction: column; }
.folio#addActivityModal .ff-file { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--fo-hair); font-size: 14px; }
.folio#addActivityModal .ff-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio#addActivityModal .ff-files__add { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; padding: 16px 18px; border: 1px dashed rgba(26,22,20,0.28); background: rgba(253,252,250,0.6); cursor: pointer; }
.folio#addActivityModal .ff-files__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.folio#addActivityModal .ff-files__title { font-size: 15px; font-weight: 500; color: var(--fo-ink); }
.folio#addActivityModal .ff-files__sub { font-size: 12px; line-height: 1.45; color: var(--fo-graphite); }
.folio#addActivityModal .ff-files__plus { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fo-ink); font-size: 18px; color: var(--fo-ink); }

/* Remove, when editing. */
.folio#addActivityModal .ff-foot { margin-top: 24px; padding-top: 14px; border-top: 1px dashed var(--fo-hair-firm); }
.folio#addActivityModal .ff-foot__drop { min-height: 44px; 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; }
.folio#addActivityModal .ff-hint { margin: 6px 0 0; font-size: 12px; color: var(--fo-graphite); }
.folio#addActivityModal .ff-hint .ff-text { min-height: 0; font-size: 12px; }