/* Flow 3 · From instruction to an acceptable offer (tools/genFlowToOffer.mjs). Orchard Lane's Site pages drawn on
   the .ss-… classes of screens-site.css, the letters on the .em-… classes of emails.css. Classes .fto-…; tokens only. */

/* Hero: actor, start, end */
.fto-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.fto-hero__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fto-hero__item dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 960px) { .fto-hero { grid-template-columns: minmax(0, 1fr); } }

/* A letter beside the screen it leads to */
.fto-duo { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-4); width: 100%; }
.fto-duo__mail { flex: none; zoom: 0.6; }
.fto-duo__mail .mail { margin: 0; }
.fto-duo .ap-frame .device--desktop { zoom: 0.54; }
@media (max-width: 1200px) { .fto-duo { flex-direction: column; align-items: center; } }

/* The app frame, and a drawer or dialog over the dimmed page */
.fto-app { position: relative; width: 1280px; height: 800px; overflow: hidden; }
.fto-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--color-overlay); }
.fto-scrim--end { align-items: stretch; justify-content: flex-end; padding: 0; }
.fto-drawer { height: 100%; }
.fto-drawer .c-drawer__body { gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.fto-drawer .c-drawer__head { padding: var(--space-3) var(--space-5); }
.fto-drawer .c-drawer__foot { align-items: center; padding: var(--space-3) var(--space-5); }
.fto-modal { width: 560px; }
.fto-grow { flex: 1; min-width: 0; }

/* Open questions */
.fto-q { display: inline-flex; align-items: center; align-self: flex-start; padding: 1px var(--space-2); border: 1px dashed var(--color-warning); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-warning-text); font-size: var(--text-xs); line-height: var(--leading-xs); }
.fto-qs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }

/* Small pieces */
.fto-tone--danger { color: var(--color-danger-text); font-weight: var(--weight-medium); }
.fto-bad { color: var(--color-danger-text); }
.fto-grey { color: var(--color-subtle); font-size: var(--text-xs); }
.fto-mini { height: 18px; font-size: var(--text-xs); }
.fto-strike { text-decoration: line-through; color: var(--color-muted); }
.btn.is-done { box-shadow: inset 0 0 0 1px var(--color-success); }
.fto-alert { padding-block: 6px; align-items: center; }
.fto-alert .c-alert__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.fto-alert__list { display: inline-flex; flex-wrap: wrap; gap: 2px var(--space-2); }
.fto-alert__acts { display: flex; gap: var(--space-2); margin-left: auto; }
.fto-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-3); align-items: start; }
.fto-row--wide { grid-template-columns: minmax(0, 1fr) 300px; }

/* Overview: the Partnerships clock's dates */
.fto-dc__dates { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); }
.fto-dc--late { background: var(--color-danger-soft); }

/* Recommendations: the filter and the Why panel */
.fto-filter { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.fto-reccard > header { align-items: center; }
.fto-filter .c-select__trigger { height: var(--size-control-sm); }
.fto-filter .c-select--filter { min-width: 96px; }
.fto-why { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fto-why p { margin: 0; }
.fto-why ul { list-style: none; margin: var(--space-1) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-3); font-size: var(--text-xs); }
.fto-why li { display: flex; gap: var(--space-1); align-items: flex-start; }
.fto-why li .icon { flex: none; width: 12px; height: 12px; margin-top: 2px; color: var(--color-success-text); }
.fto-out { color: var(--color-subtle); }

/* Selects and fields drawn still */
.fto-select { position: relative; }
.fto-select .c-select__trigger { height: var(--size-control-sm); font-size: var(--text-label); }
.fto-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2; min-width: 100%; width: max-content; display: block; }
.fto-select--bad .c-select__trigger { border-color: var(--color-danger-text); color: var(--color-danger-text); }
.fto-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fto-input { display: flex; align-items: center; height: var(--size-control-sm); overflow: hidden; white-space: nowrap; font-size: var(--text-label); }
.fto-input.is-focus { outline: 3px solid var(--color-primary-accent); outline-offset: 0; border-color: var(--color-ring); }
.fto-area { height: auto; min-height: 52px; align-items: flex-start; padding-block: var(--space-2); white-space: normal; }
.fto-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.fto-form2 .fto-field .btn { align-self: flex-start; }
.fto-caret { display: inline-block; width: 1px; height: 14px; margin-left: 1px; background: var(--color-foreground); }
.fto-gsel { display: inline-block; }
.fto-gsel .c-select__trigger { height: 26px; padding: 0 var(--space-2); }

/* The journey table */
.fto-jt td, .fto-jt th { padding-block: 3px; }
.fto-chk { width: 28px; }
.fto-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--color-emphasis); border-radius: var(--radius-sm); background: var(--color-surface); }
.fto-box.is-on { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); }
.fto-box .icon { width: 12px; height: 12px; }
.fto-contact { display: inline-block; margin-top: 2px; }
.fto-contact .c-select__trigger { height: 24px; min-width: 130px; }
.fto-col .ss-jcard .table-wrap { overflow: visible; }
.fto-col .ss-jcard { overflow: visible; }
.fto-row .ss-jcard .table-wrap { overflow: hidden; }
.fto-gate--bad { color: var(--color-danger-text); }
.fto-empty { padding: var(--space-4); gap: var(--space-2); }
.fto-empty .ill { width: 120px; height: auto; }
.fto-selbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-card); background: var(--color-primary-soft); }

/* The pitch round: recipients, the email, the recipient check */
.ap-page:has(> .fto-comp), .ap-page:has(> .fto-pend) { padding: var(--space-4) var(--space-6); }
.fto-comp { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fto-comp__bar { display: flex; align-items: center; gap: var(--space-4); }
.fto-comp__title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fto-comp__title h2 { margin: 0; }
.fto-comp__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: var(--space-3); align-items: start; }
.fto-rcs { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.fto-rc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 5px var(--space-3); border-top: 1px solid var(--color-default); }
.fto-rc:first-child { border-top: 0; }
.fto-rc.is-current { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.fto-rc.is-held .fto-rc__who strong { color: var(--color-muted); }
.fto-rc__who { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-label); line-height: 1.25; }
.fto-rc__who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-medium); }
.fto-rc .badge { flex: none; height: 20px; font-size: var(--text-xs); }
.fto-mail { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.fto-mail__row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-label); }
.fto-mail__row .t-label { width: 44px; flex: none; }
.fto-body { display: block; min-height: 0; padding: var(--space-3); white-space: normal; font-size: var(--text-label); line-height: var(--leading-sm); height: auto; }
.fto-body p { margin: 0 0 var(--space-2); }
.fto-sig { color: var(--color-muted); }
.fto-optout { margin-bottom: 0; padding-top: var(--space-2); border-top: 1px dashed var(--color-emphasis); color: var(--color-subtle); font-size: var(--text-xs); }
.fto-att { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fto-file { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); font-size: var(--text-xs); }
.fto-mail__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-default); }
.fto-check { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.fto-check h3, .fto-check p { margin: 0; }
.fto-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-label); }
.fto-checks li { display: flex; align-items: flex-start; gap: var(--space-2); }
.fto-checks .icon { flex: none; margin-top: 2px; }
.fto-held { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fto-held li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border: 1px solid var(--color-danger); border-radius: var(--radius-control); background: var(--color-danger-soft); }
.fto-held__who { display: flex; flex-direction: column; font-size: var(--text-label); }
.fto-held__why { color: var(--color-danger-text); font-size: var(--text-xs); font-weight: var(--weight-medium); }

/* Drafts with their sources */
.fto-draft { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.fto-draft__to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-label); }
.fto-draft__to .badge { margin-left: auto; }
.fto-pass { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-left: var(--space-3); border-left: 2px solid var(--color-primary-soft); }
.fto-pass p { margin: 0; font-size: var(--text-label); line-height: var(--leading-sm); }
.fto-drafts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fto-drafts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); padding: 4px 0; border-top: 1px solid var(--color-default); font-size: var(--text-label); }

/* A buyer's thread */
.fto-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fto-thread__item { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.fto-thread__item.is-reply { margin-left: var(--space-6); border-color: var(--color-info); background: var(--color-info-soft); }
.fto-thread__item.is-unknown { border-color: var(--color-warning); background: var(--color-warning-soft); }
.fto-thread__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--text-label); }
.fto-thread__who .t-caption { margin-left: auto; }
.fto-thread__who .badge { height: 20px; font-size: var(--text-xs); }
.fto-thread__text { margin: var(--space-1) 0 0; font-size: var(--text-label); line-height: var(--leading-sm); }
.fto-thread__log { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; }

/* A proposed update */
.fto-prop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--color-default); border-radius: var(--radius-card); overflow: hidden; }
.fto-prop__mail { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); background: var(--color-surface-muted); border-right: 1px solid var(--color-default); }
.fto-prop__mail p { margin: 0; }
.fto-prop__mail .t-label { display: flex; align-items: center; gap: var(--space-1); }
.fto-prop__quote { font-size: var(--text-label); line-height: var(--leading-sm); }
.fto-prop__quote mark { background: var(--color-warning-soft); color: var(--color-foreground); padding: 0 2px; border-radius: var(--radius-sm); }
.fto-prop__upd { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.fto-prop__upd p { margin: 0; }
.fto-prop__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-label); }
.fto-prop__head .badge { margin-left: auto; }
.fto-prop__change { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.fto-prop__acts { display: flex; justify-content: flex-end; gap: var(--space-2); }
.fto-audit { display: flex; align-items: center; gap: var(--space-1); }
.fto-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); }

/* Offers compared, the Pro Forma */
.fto-cmp > header { align-items: center; flex-wrap: wrap; }
.fto-cmp > header > :last-child:not(.t-caption) { margin-left: auto; }
.fto-cmp td { vertical-align: middle; }
.fto-cmp tr.fto-old td { color: var(--color-muted); background: var(--color-surface-muted); }
.fto-acts { text-align: right; white-space: nowrap; }
.fto-acts .btn + .btn { margin-left: var(--space-1); }
.fto-acts .t-label { margin-right: var(--space-2); }
.fto-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-default); }
.fto-pf__grid { display: grid; grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); align-items: start; }
.fto-pf__grid .fto-input { height: auto; min-height: 52px; align-items: flex-start; padding-block: var(--space-2); white-space: normal; }
.fto-pf__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.fto-pf__facts div { display: flex; flex-direction: column; }
.fto-pf__facts dd { margin: 0; font-weight: var(--weight-medium); font-size: var(--text-label); }
.fto-why-off { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Preferred RP chosen: who is told, the clocks */
.fto-side { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.fto-side h2, .fto-side h3 { margin: 0; }
.fto-notified { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fto-notified li { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-label); }
.fto-clocks { display: flex; flex-direction: column; gap: var(--space-2); }
.fto-clk { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-2); border-radius: var(--radius-control); background: var(--color-surface-muted); font-size: var(--text-label); }

/* The branded offer review */
.fto-doc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.fto-doc p { margin: 0; }
.fto-doc__band { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.fto-doc__band .em-mark svg { width: 18px; height: 20px; }
.fto-doc__band .t-caption { margin-left: auto; }
.fto-doc__title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); }
.fto-doc__t td { white-space: normal; }

/* Exception request */
.fto-approver { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); }

/* Pending proposals page */
.fto-pend { display: flex; flex-direction: column; gap: var(--space-3); max-width: 900px; }
.fto-pend__head { display: flex; align-items: baseline; gap: var(--space-3); }
.fto-pend__head h1 { margin: 0; }
.fto-pend__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.fto-pend__site { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.fto-pend__left p { margin: 0; }

/* Revision after the screenshot check: two columns on the Buyers tab, one-line journey rows */
.fto-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.fto-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fto-why { align-self: stretch; }
.fto-jt .ss-who { display: flex; flex-direction: row; align-items: baseline; gap: var(--space-2); }
.fto-row .ss-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fto-selbar { justify-content: flex-start; align-self: flex-start; }
.fto-mail__row span { white-space: nowrap; }
.fto-mail__row .badge { margin-left: auto; }
.fto-mail { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.fto-rc { padding-block: 3px; }
.fto-acts__in { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fto-acts .btn + .btn { margin-left: 0; }
.fto-duo .em-msg p + p { margin-top: var(--space-2); }

.fto-why { grid-column: 1 / -1; margin-top: 0; }
.fto-reccard .c-score__reason { white-space: normal; overflow: visible; }
.fto-reccard .ss-rec .c-score__buyer { padding-right: 0; }
.fto-reccard .ss-rec .c-score__actions { position: static; grid-column: 2; grid-row: 2; display: flex; gap: var(--space-2); }
.fto-reccard .fto-why { grid-row: 3; }
.fto-reccard .ss-rec { row-gap: var(--space-2); padding-block: var(--space-2); }
.fto-jt td { white-space: nowrap; }
.fto-mail__row { overflow: hidden; }
.fto-row--wide { grid-template-columns: minmax(0, 1fr); }
.fto-row--wide .fto-side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: start; gap: var(--space-2) var(--space-4); }
.fto-row--wide .fto-notified { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.fto-row--wide .fto-notified li { max-width: 240px; }
.fto-row--wide .fto-clocks { flex-direction: row; }
.fto-tool { display: flex; gap: var(--space-2); }
.fto-jt .badge { height: 18px; font-size: var(--text-xs); }

/* Review fixes: nothing cut in the frames */
.fto-app .ss-tile .t-caption, .fto-app .ss-dc__l2 .t-caption, .fto-app .ss-dc__name, .fto-app .ss-act__t, .fto-app .ss-row3 > .card > header .t-caption { white-space: normal; overflow: visible; text-overflow: clip; }
.fto-app .ss-dc__l2 { flex-wrap: wrap; }
.fto-pass .c-source--compact .c-source__text { max-width: none; }
.fto-mail__row { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
.fto-mail__row .badge, .fto-mail__row .c-source { flex: none; }
.fto-jt .ss-who:has(.fto-contact) { flex-direction: column; align-items: flex-start; gap: 2px; }
.fto-col .fto-jt { width: 100%; }
.ss-jcard:has(th.fto-chk), .ss-jcard:has(th.fto-chk) .table-wrap { overflow: visible; }
.fto-jt th.fto-chk, .fto-jt td.fto-chk { padding-left: var(--space-3); }
.fto-jt td:last-child { white-space: normal; }
.fto-jt td:last-child .badge { height: auto; min-height: 18px; white-space: normal; }
.fto-select--end .fto-list { left: auto; right: 0; }
.fto-contact .fto-list { width: 220px; }
.fto-contact .c-select__label { display: flex; flex-direction: column; white-space: normal; }
.fto-col .fto-jt td:first-child { max-width: 260px; }
.fto-acts .btn { height: auto; min-height: var(--size-control-sm); max-width: 170px; white-space: normal; text-align: left; line-height: 1.2; padding-block: 3px; }
.fto-cmp .ss-compact th { white-space: normal; }
.fto-cmp .fto-grey { white-space: normal; }
.fto-cmp .fto-acts .btn { max-width: 140px; }

/* The held pill stays on one line in the narrow Next step column */
.fto-heldpill { white-space: nowrap; }