/* Flow 11 · The MD's exceptions and decisions (tools/genFlowMdExceptions.mjs). Classes .fmx-…; tokens only.
   The key screens' own styles come from screens-pipeline.css, screens-insights.css, screens-site.css and emails.css. */

/* The hero: actors, start, end */
.fmx-hero { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
.fmx-hero__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; }
.fmx-hero__list dt { margin-bottom: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.fmx-hero__list dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.fmx-hero p { margin: 0; }
@media (max-width: 900px) { .fmx-hero__list { grid-template-columns: 1fr; } }

/* A step with more than one picture: frames and letters one under another */
.fmx-stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 100%; }
.fmx-stack > .ap-frame { width: 100%; }
.fmx-letter { width: 600px; max-width: 100%; }

/* The frame grows with its page; a scrim with a drawer or a dialog, a notification panel and a toast sit over it */
.fmx-frame .ap { height: auto; min-height: 800px; }
.fmx-stage { position: relative; }
.fmx-frame .ap-main { position: relative; }
.fmx-scrim { position: absolute; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 120px var(--space-6) var(--space-6); background: var(--color-overlay); }
.fmx-scrim--end { justify-content: flex-end; padding: 0; }
.fmx-scrim .c-modal { box-shadow: var(--shadow-overlay); }
.fmx-drawer { height: auto; min-height: 100%; width: 560px; }
.fmx-drawer .c-drawer__row { align-items: start; }
.fmx-drawer .c-drawer__row dd { min-width: 0; }
/* The row the user clicked, lifted over the scrim so its ring is seen */
.fmx-lift { position: relative; z-index: calc(var(--z-modal) + 1); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fmx-toast { position: absolute; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast); max-width: 420px; box-shadow: var(--shadow-overlay); }

/* The notification centre, open under the bell */
.fmx-bell { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.fmx-notif { position: absolute; top: 60px; right: var(--space-6); z-index: var(--z-toast); width: 400px; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-overlay); overflow: hidden; }
.fmx-notif > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-default); }
.fmx-notif ul { list-style: none; margin: 0; padding: 0; }
.fmx-notif li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-sm); }
.fmx-notif li + li { border-top: 1px solid var(--color-default); }
.fmx-notif li > .icon { flex: none; margin-top: 2px; color: var(--color-muted); }
.fmx-notif li.is-new { background: var(--color-primary-soft); }
.fmx-notif li.is-new > .icon { color: var(--color-primary-strong); }
.fmx-notif li > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }

/* Small shared pieces */
.fmx-block { display: block; }
.fmx-muted { color: var(--color-muted); }
.fmx-cap { margin: var(--space-2) 0 0; }
.fmx-wrap { height: auto; white-space: normal; text-align: left; }
.fmx-req { color: var(--color-subtle); font-weight: var(--weight-regular); }
.fmx-lines { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: var(--space-1) 0; }
.fmx-lines i { display: block; height: 8px; border-radius: var(--radius-full); background: var(--color-default); }
.fmx-lines i:last-child { width: 60%; }
.fmx-alert { margin-top: var(--space-3); }
.fmx-alert .c-alert__actions { align-self: center; }
.fmx-info { border-color: transparent; background: var(--color-info-soft); color: var(--color-info-text); }
.fmx-band { margin: 0 0 var(--space-4); }
.fmx-routed { display: block; margin: 2px 0; white-space: normal !important; overflow: visible !important; }
.fmx-routed .badge { height: auto; white-space: normal; text-align: left; }

/* Fields drawn closed */
.fmx-field { gap: var(--space-1); }
.fmx-input { display: flex; align-items: center; min-height: var(--size-control); overflow: hidden; }
.fmx-input.c-input--area { align-items: flex-start; min-height: 72px; padding-top: var(--space-2); white-space: normal; line-height: var(--leading-sm); }
.fmx-input--empty { color: var(--color-subtle); }
.fmx-select .c-select__trigger { width: 100%; }
.fmx-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); }
.fmx-form__btn { display: flex; justify-content: flex-end; }
.fmx-kv { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.fmx-kv > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-sm); }
.fmx-kv dt { color: var(--color-subtle); font-size: var(--text-label); }
.fmx-kv dd { margin: 0; }
.fmx-modal { width: 560px; max-width: 100%; }
.fmx-modal .c-modal__actions { margin-top: var(--space-4); }

/* The Lead page: the card wide, a column beside it */
.sp-grid.fmx-grid21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fmx-excepted .c-approval__what { display: flex; flex-direction: column; gap: 2px; }
.fmx-evi { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.fmx-evi .fmx-input { min-height: 32px; font-size: var(--text-label); }

/* The Site pages */
.fmx-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.fmx-pad { padding: 0 var(--space-4) var(--space-4); }
.fmx-buyers { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.fmx-buyers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-default); font-size: var(--text-sm); }
.fmx-buyers li strong { flex: 1; }
.fmx-ctr { display: flex; flex-direction: column; gap: var(--space-3); }
.fmx-ctr__who { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fmx-ctr .fmx-alert { margin-top: 0; }

/* The send history in the drawer */
.fmx-hist { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fmx-hist__line { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.fmx-hist__who { margin: 0; }
.fmx-hist__now { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.fmx-hist__now li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

/* The decided requests under the pending ones, and the empty card */
.fmx-donehead { padding-top: var(--space-3); }
.fmx-done .badge { flex: none; }
.fmx-emptyli { display: block; }
.fmx-empty { padding: var(--space-4) 0; }
.fmx-empty .ill { width: 160px; height: auto; }
.fmx-props .ap-list { margin: 0; }
.fmx-props .fmx-cap { padding: 0 var(--space-4) var(--space-3); }
.fmx-reqb { display: inline-flex; margin-top: var(--space-1); }
.fmx-notif--low { top: 400px; }
.fmx-done .ap-list__text > span { white-space: normal; overflow: visible; }
.fmx-props { max-width: 680px; }
.fmx-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.fmx-frame .si-prop .fmx-done .ap-list__text,
.fmx-frame .si-prop .fmx-done .ap-list__text span { white-space: normal; overflow: visible; text-overflow: clip; }
.fmx-frame .si-prop .fmx-routed,
.fmx-frame .si-prop .fmx-routed span { white-space: normal; overflow: visible; text-overflow: clip; }
.fmx-toast--side { top: 400px; bottom: auto; }
/* The ringed row's number sits outside its card: the card lets it show */
.fmx-frame .si-card:has(.fmx-lift[data-flow-target]) { overflow: visible; }
/* "No decisions wait for you" is not an alert */
.si-exc.fmx-calm { color: var(--color-muted); }
/* The pitch form: the two selects side by side, Send under them, so neither value is cut */
.fmx-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fmx-form__btn { grid-column: 1 / -1; }