/* Flow: Cut-over from Excel (tools/genFlowCutOver.mjs). The screens are Settings › Data import, drawn with the
   look of Settings › Rules (screens-insights.css › .si-*); .fco-* is what this flow adds. Tokens only. */

/* ── The hero: actors, start, end ── */
.fco-hero dl { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-4); margin: 0; }
.fco-hero dl > div { 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); }
.fco-hero dt { color: var(--color-subtle); font-size: var(--text-label); line-height: var(--leading-label); text-transform: uppercase; letter-spacing: 0.04em; }
.fco-hero dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 960px) { .fco-hero dl { grid-template-columns: minmax(0, 1fr); } }

/* ── A frame with a small picture of the moment before or after under it ── */
.fco-with { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.fco-aside { display: flex; align-items: flex-start; gap: var(--space-4); width: 845px; max-width: 100%; }
.fco-aside__cap { flex: none; width: 150px; margin: 0; padding-top: var(--space-2); }
.fco-aside__box { zoom: 0.66; display: flex; flex: 1; flex-direction: column; align-items: center; padding: var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); background: var(--color-page); color: var(--color-foreground); font-size: var(--text-sm); }
.fco-aside__box > * { width: 620px; max-width: 100%; }
.fco-aside__box .c-modal { width: 100%; box-shadow: var(--shadow-card); }
@media (max-width: 960px) { .fco-aside { flex-direction: column; } .fco-aside__box { zoom: 1; } }

/* ── The screen: the app with an overlay drawn over it ── */
.fco-screen { position: relative; width: 1280px; height: 800px; }
.fco-over { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding: 120px var(--space-6) var(--space-6); background: var(--color-overlay); }
.fco-over > .c-modal { width: 560px; }
.fco-over--end { align-items: stretch; justify-content: flex-end; padding: 0; }
.fco-over--end > .c-drawer { width: 440px; }
.fco-page { gap: var(--space-4); }
.fco-muted { color: var(--color-muted); }
.fco-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fco-bar__right { display: flex; align-items: center; gap: var(--space-2); }
.fco-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fco-row--end { justify-content: flex-end; }
.fco-pad { padding: 0 var(--space-4) var(--space-4); }
.fco-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.fco-form { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.fco-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.si-cols--rc { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.si-cols--cut { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.fco-card > header { align-items: center; }
.fco-card--bad { border-color: var(--color-danger-text); }
.btn.is-pressed { box-shadow: inset 0 0 0 2px var(--color-primary-strong); }

/* Tables inside a card: compact, the card draws the edge */
.fco-table { font-size: var(--text-sm); }
.fco-table th, .fco-table td { padding: 7px var(--space-4); vertical-align: middle; }
.fco-table thead th { border-top: 1px solid var(--color-default); }
.fco-table .fco-arrow { width: 16px; padding-left: 0; padding-right: 0; color: var(--color-subtle); }
.fco-table tr.is-bad td { background: var(--color-danger-soft); }
.fco-table tr.is-done td { color: var(--color-subtle); }
.fco-body .fco-table, .fco-form .fco-table { border: 1px solid var(--color-default); border-radius: var(--radius-control); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.fco-body .fco-table thead th { border-top: 0; }
.fco-body .fco-table th, .fco-body .fco-table td { padding: 6px var(--space-3); }

/* The empty start */
.fco-empty { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6); }
.fco-empty .ill { flex: none; width: 200px; height: auto; }
.fco-empty__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.fco-empty__text p { margin: 0; text-align: left; }

/* The trackers of the status view, in two columns */
.fco-tl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0 var(--space-4) var(--space-3); column-gap: var(--space-6); list-style: none; }
.fco-tl > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: 4px 0; border-top: 1px solid var(--color-default); }
.fco-tl--plain > li { min-height: 34px; }
.fco-tl--one { grid-template-columns: minmax(0, 1fr); }
.fco-tl--one > li { min-height: 34px; padding: 2px 0; }
.fco-tl > li.is-flag { margin: 0 calc(-1 * var(--space-2)); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-control); background: var(--color-warning-soft); }
.fco-tl__text { display: flex; min-width: 0; flex-direction: column; }
.fco-tl__text strong { overflow: hidden; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.fco-tl .badge, .fco-tl .btn { flex: none; }
.fco-warn { color: var(--color-warning-text) !important; }

/* A band across the page: the parallel run, the cut-over, the Land log */
.fco-band { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-primary-soft); border-radius: var(--radius-card); background: var(--color-primary-soft); }
.fco-band__icon { display: inline-flex; color: var(--color-primary-strong); }
.fco-band__text { display: flex; flex-direction: column; gap: 2px; }
.fco-band__text strong { color: var(--color-primary-strong); font-weight: var(--weight-semibold); }
.fco-band--quiet { padding-top: var(--space-2); padding-bottom: var(--space-2); border-color: var(--color-default); background: var(--color-surface); }
.fco-band--quiet .fco-band__text strong { color: var(--color-foreground); }
.fco-band .ill { flex: none; width: 96px; height: auto; }

/* The import map */
.fco-pick { display: flex; align-items: center; gap: var(--space-3); }
.fco-pick .c-select { width: 380px; flex: none; }
.fco-pick .t-caption { min-width: 0; }
.fco-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.fco-chips .tag { display: inline-flex; align-items: center; gap: var(--space-1); }

/* The dry run and the batch */
.fco-files { margin: 0; padding: 0; list-style: none; }
.fco-run { align-self: flex-start; }
.fco-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-2); }
.fco-count { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.fco-count__n { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); }
.fco-count--warn .fco-count__n { color: var(--color-warning-text); }
.fco-bhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fco-bhead__name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.fco-wait { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; }
.fco-wait p { margin: 0; }
.fco-wait .ld { color: var(--color-primary); }
.fco-fail { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-6) var(--space-6); text-align: center; }
.fco-fail p { margin: 0; }
.fco-fail .ill { width: 160px; height: auto; }

/* Facts of a record */
.fco-dl { display: flex; flex-direction: column; margin: 0; padding: 0 var(--space-4) var(--space-3); }
.fco-dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3); padding: 7px 0; border-top: 1px solid var(--color-default); }
.fco-dl dt { color: var(--color-subtle); font-size: var(--text-label); line-height: var(--leading-sm); }
.fco-dl dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.fco-who { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.fco-by { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }

/* The moment before: a bar with the button, and a dialog on a dimmed ground */
.fco-stub { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fco-stub--col { flex-direction: column; align-items: flex-start; }
.fco-dim { display: flex; justify-content: center; margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-overlay); }

/* Duplicates: two records side by side */
.ap-list > li.fco-more { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.fco-pair { display: flex; flex: 1; align-items: center; gap: var(--space-2); min-width: 0; }
.fco-pair .icon { flex: none; color: var(--color-subtle); }
.fco-card .ap-list > li > .icon { flex: none; color: var(--color-primary); }
.fco-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.fco-vs__mid { display: flex; flex-direction: column; color: var(--color-subtle); }
.fco-radios { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fco-acct { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.fco-acct p { margin: 0; }
.fco-acct__head { display: flex; align-items: center; gap: var(--space-2); }
.fco-acct__head > .icon { color: var(--color-success-text); }
.fco-acct .fco-dl { padding: 0; }
.fco-quote { padding-left: var(--space-3); border-left: 2px solid var(--color-default); color: var(--color-muted); }
.fco-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.fco-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-foreground); font: inherit; text-align: left; cursor: pointer; }

/* Reconciliation, checks, cut-over */
.fco-rl > li { justify-content: space-between; }
.fco-big { margin: 0; font-size: var(--text-md); }
.fco-big .tnum { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.fco-q { margin: 0; white-space: normal !important; }
.fco-qid { color: var(--color-warning-text); font-family: var(--font-mono); }
.fco-done { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-success-soft); }
.fco-done .ill { flex: none; width: 72px; height: auto; }
.fco-done p { margin: 0; }
.fco-ro { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-sm); }
.fco-access { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); }
.fco-access .ill { flex: none; width: 96px; height: auto; }
.fco-access p { margin: 0; }
.fco-empty__text { max-width: 560px; }
.fco-pick .t-label { white-space: nowrap; }
.si-cols--map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fco-table td strong { white-space: nowrap; }
.fco-tight th, .fco-tight td { padding-top: 5px; padding-bottom: 5px; }
.fco-bar .c-tabs { flex: none; }
.fco-ro { white-space: nowrap; }
.fco-table .mono, .fco-qid, .fco-table td.num { white-space: nowrap; }
.si-cols--rc { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.si-cols--ck { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.fco-tl--one > li { min-height: 0; padding: 1px 0; }
.fco-tl--one .btn, .fco-tl--one .badge { height: 24px; }
.si-cols--rc { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
.fco-diff th, .fco-diff td { padding-left: 10px; padding-right: 10px; }
.fco-diff td strong { white-space: normal; }

/* Review: a dialog drawn below what it is about, so the records and the batch stay in view */
.fco-over--low { padding-top: 250px; }
.fco-over--below { justify-content: flex-start; padding: 470px var(--space-6) var(--space-6) 300px; }
.fco-vs { align-items: stretch; }
/* The read-only mark beside the tabs fits the page's width */
.fco-ro { gap: var(--space-1); padding: 0 var(--space-2); font-size: var(--text-label); }
/* Longer Ukrainian labels: the tab bar wraps rather than push its buttons out; captions in tables wrap */
.fco-bar { flex-wrap: wrap; }
.fco-bar__right { margin-left: auto; }
.fco-table .t-caption { white-space: normal; }
.si-cols--cut { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }