/* Attachment Migrator UI components (public-next). No inline styles anywhere: every width that changes is a CSSOM write, every one-off is a utility class at the end. */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; font: 500 var(--fs-base)/1.5 var(--font); color: var(--ink); background: var(--bg); overflow: hidden; overflow-wrap: anywhere; }   /* Z12: any user text wraps rather than overflowing; nowrap+ellipsis cells opt out */   /* F2: the document never scrolls; only the page body does */
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 12px; }
/* Z8: before the session answer nothing of the app is painted; a quiet spinner appears only if the wait gets long */
.shell[hidden] { display: none; }   /* the hidden attribute does the hiding, with or without this stylesheet; display: grid above would otherwise win */
html[data-boot="1"] .skip, html[data-boot="1"] #netBanner, html[data-boot="1"] #toasts { visibility: hidden; }
html[data-boot="1"] body::after { content: ''; position: fixed; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); opacity: 0; animation: boot-show 0s linear .6s forwards, spin .8s linear infinite; }
@keyframes boot-show { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
#main:focus { outline: none; }
.ic { width: 18px; height: 18px; flex: none; }
.ic--sm { width: 15px; height: 15px; }
.ic--lg { width: 22px; height: 22px; }
.ic--xl { width: 32px; height: 32px; }
kbd { font: 500 11px/1 var(--font); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); }
.num, .tbl td.num, .tbl th.num, .big, .mono-num, .stat b, .count-strip b, .receipt-v { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sub { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
.t-bad { color: var(--bad); } .t-warn { color: var(--warn); } .t-ok { color: var(--ok); }
.nowrap { white-space: nowrap; }
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-head); letter-spacing: -.012em; }
.h3 { font-size: 14px; font-weight: 600; }
/* Owner rule: no hyperlink-styled text anywhere. Every .link is a small button in the page's own style */
.link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--btn-fill); color: var(--ink); font-weight: 500; font-size: 13px; text-decoration: none; vertical-align: middle; cursor: pointer; }
.link:hover { background: var(--btn-fill-hover); text-decoration: none; }
.link--quiet { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: inherit; font-weight: 600; }   /* a quiet word in a sentence, no box: the sign-in data notice */
.link--quiet:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
p .link, .foot .link, .auth-foot .link { margin: 0 2px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); height: 100%; min-height: 0; }
html[data-bare="1"] .shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
html[data-bare="1"] .side, html[data-bare="1"] .top, html[data-bare="1"] .scrim { display: none; }
.side { grid-row: 1 / span 2; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: var(--side); border-right: 0; overflow: hidden; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 14px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 28px; height: 28px; border-radius: 10px; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .brand-mark { background: var(--ink); color: var(--bg); }
.brand-mark svg { width: 16px; height: 16px; }
.brand-text { display: grid; line-height: 1.2; min-width: 0; }
.brand-text b { font-size: 13.5px; white-space: nowrap; }
.brand-text span { font-size: 12px; color: var(--ink-3); }
.side .side-close { display: none; }
.side-new { margin: 0 0 12px; justify-content: center; height: var(--h-md); }
.side-nav { display: grid; gap: 1px; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; }   /* the middle scrolls inside the sidebar; brand and foot stay */
.side-nav a, .side-foot a, .side-foot button { display: flex; align-items: center; gap: 10px; height: var(--h-nav); padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-weight: 600; width: 100%; text-align: left; }
.side-nav a:hover, .side-foot a:hover, .side-foot button:hover { background: var(--hover); color: var(--ink); }
.side-nav a[aria-current="page"], .side-foot a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.side-nav .lbl, .side-foot .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-group { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 14px 10px 4px; letter-spacing: .01em; }
.side-count { font-size: 11.5px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--neutral-soft); color: var(--ink-2); }
.side-count--warn { background: var(--warn-soft); color: var(--warn); }
.side-foot { flex: none; display: grid; gap: 1px; padding-top: 10px; border-top: 1px solid var(--line); }
.scrim { display: none; }

.top { grid-column: 2; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 0 24px; height: var(--top-h); background: var(--bg); border-bottom: 0; }   /* H2: pinned bars are opaque; nothing shows through */
.top .top-menu { display: none; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 500; min-width: 0; font-size: 13.5px; }
.crumbs .ic { width: 14px; height: 14px; }
.crumbs [data-crumb] { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-btn { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 36px; width: 280px; padding: 0 10px 0 14px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-3); font-size: 13px; }
.search-btn:hover { border-color: var(--line-2); }
.search-btn .lbl { flex: 1; text-align: left; }
.run-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.run-pill[data-sim-state="paused"] { background: var(--warn-soft); color: var(--warn); }
.run-pill[data-sim-state="finished"] { background: var(--ok-soft); color: var(--ok); }
.run-pill[data-sim-state="stopped"], .run-pill[data-sim-state="stopping"] { background: var(--neutral-soft); color: var(--neutral); }
.run-pill .mini-meter { width: 56px; height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.run-pill .mini-meter i { display: block; height: 100%; width: 0; background: currentColor; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; display: inline-block; flex: none; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: pulse 1.6s ease-out infinite; }
[data-sim-state="paused"] .pulse::after, [data-sim-state="finished"] .pulse::after, [data-sim-state="stopped"] .pulse::after { animation: none; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.env { font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.menu-wrap { position: relative; }
.user-btn { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; color: var(--ink-3); }
.user-btn:hover { background: var(--hover); }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--neutral-soft); color: var(--ink-2); font: 700 10.5px/1 var(--font); font-style: normal; flex: none; }
.user-btn .avatar { width: 28px; height: 28px; background: var(--accent-soft); color: var(--accent); }

.main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; padding: 0; }
html[data-bare="1"] .main { grid-column: 1; }
section[data-screen] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.page-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 32px 24px; }
[data-screen][data-loading="1"] .page-body > *, [data-screen][data-loading="1"] .auth > * { opacity: 0; }   /* PR1: neutral while the page reads its own data (opacity, not visibility: a page may place focus during its enter) */
section[data-screen] > .page-body:first-child { padding-top: 24px; }
.page-head, .page-body > * { max-width: var(--content-max); }   /* Z9: width before scroll; the token grows on wide monitors */
.page-body > .wiz { max-width: var(--content-max); }

/* ---------- page head, tabs, toolbar ---------- */
.page-head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px 32px 14px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-h1); line-height: 1.2; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head h1:focus { outline: none; }
.page-head .sub { margin-top: 4px; max-width: 70ch; }
.crumb-line { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a, .tabs button { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs a[aria-current="page"], .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .cnt { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--neutral-soft); color: var(--ink-2); }
.tabs .cnt--warn { background: var(--warn-soft); color: var(--warn); }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar--tight { margin-bottom: 8px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: var(--btn-fill); color: var(--ink-2); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }   /* soft fills, no borders (owner, 1.7.1) */
.filters button:hover { background: var(--btn-fill-hover); border-color: transparent; color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filters button .n { font-weight: 600; font-size: 12px; opacity: .75; }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-3); min-width: 300px; }   /* UI review: room for the placeholder and the / key */
.toolbar .btn--sm { height: 32px; }   /* UI review: a button in a toolbar is as tall as the search field beside it */
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { flex: 1; border: 0; background: none; outline: none; color: var(--ink); min-width: 0; }
.search input::placeholder { color: var(--ink-3); }
.bulkbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; }
.bulkbar .btn { background: var(--surface); }
.bulkbar .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }   /* G1: the primary action keeps its colours inside the bar */
.table-foot { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tbl-more { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.sysbars { grid-column: 1 / -1; display: flex; flex-direction: column; }   /* M1-UI: the test-environment line and the maintenance line share the banner row */
.sysbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; background: var(--warn-soft); color: var(--warn); font-weight: 500; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); text-align: center; }
.sysbar .ic { flex: none; }
html:not([data-sysbar="1"]) .sysbars { display: none; }
html[data-env-test="0"] .sysbar--env { display: none; }
.sysbar--maint[hidden] { display: none; }
.sysbar--maint { background: var(--accent-soft); color: var(--accent); border-top: 1px solid var(--line); }
html[data-sysbar="1"] .shell { grid-template-rows: auto var(--top-h) minmax(0, 1fr); }
html[data-bare="1"][data-sysbar="1"] .shell { grid-template-rows: auto minmax(0, 1fr); }   /* X1: bare screens with the banner: banner row, then main takes the rest (the rule above gave main a 52px row) */
html[data-sysbar="1"] .side { grid-row: 2 / span 2; }
.foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.app-foot { flex: none; margin: 0; padding: 9px 32px; background: var(--bg); }
html[data-bare="1"] .app-foot { display: none; }
.foot .link { font-weight: 500; }
.foot a { color: var(--ink-2); }
.foot .ph { color: var(--warn); }
.codes-dlg .codes { margin: 4px 0; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 0; border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--shadow-1); min-width: 0; }
.card--flush { padding: 0; overflow: clip; }
.card--quiet { background: var(--surface-2); box-shadow: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { font-size: var(--fs-h2); font-weight: var(--fw-head); white-space: nowrap; }
.card-head .sub { font-size: 13px; }
.card-head--pad { padding: 14px 18px 0; margin-bottom: 10px; }
.card-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-legend { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-md); padding: 0 16px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--btn-fill); color: var(--ink); font-weight: 700; white-space: nowrap; box-shadow: none; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--btn-fill-hover); border-color: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-ink); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn--ghost:hover { background: var(--hover); color: var(--ink); border-color: transparent; }
.btn--danger { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
.btn--danger:hover { background: color-mix(in srgb, var(--bad) 88%, black); }
.btn--danger-ghost { color: var(--bad); }
.btn--danger-ghost:hover { background: var(--bad-soft); }
.btn--sm { height: var(--h-sm); padding: 0 12px; font-size: 13px; border-radius: var(--r-pill); }
.btn--sm .ic { width: 15px; height: 15px; }
.btn--lg { height: var(--h-lg); padding: 0 22px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--h-md); padding: 0; }
.btn--icon.btn--sm { width: 28px; }
.icon-btn { width: 32px; height: 32px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--ink-3); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.row-gap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- forms ---------- */
.field { display: grid; gap: 5px; min-width: 0; }
.field + .field { margin-top: 14px; }
.field label, .field > legend, .lbl-t { font-weight: 500; font-size: 13.5px; display: flex; justify-content: space-between; gap: 8px; }
.field .opt { color: var(--ink-3); font-weight: 400; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea, .input { height: var(--h-md); padding: 0 12px; border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.field textarea { height: auto; padding: 8px 10px; }
.field input:focus, .field select:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input::placeholder { color: var(--ink-3); }
.field input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.field.is-invalid :is(input, select, textarea) { border-color: var(--bad); }
.field-error { color: var(--bad); font-size: 12.5px; display: flex; gap: 5px; align-items: flex-start; }
.field-error--block { margin: 8px 0 0; }
/* Z11: fields in one row share the row's tracks (subgrid): label, input, error and hint each sit on one line across the row,
   whatever the text length; align-items: start keeps a short field from being stretched and its input pushed down */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.field-grid > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 5px; align-content: start; }
.field-grid > .field > * { align-self: start; }
.field-grid .field + .field { margin-top: 0; }
.field-grid--host { grid-template-columns: 1fr 110px; }
.field-grid--rh { grid-template-columns: 160px minmax(260px, max-content) 1fr; align-items: end; }   /* DP1: User ID, Dates, the two buttons */   /* RH1: the filter row stays one row; the dates are not stretched */
.field-grid--rh .actions { padding-bottom: 1px; }
/* ESTACC: the estimate accuracy card on Run history (owner, desktop widths) */
.field-grid--ea { grid-template-columns: 190px 190px minmax(220px, 360px) auto; align-items: end; }
.field-grid--ea .actions { padding-bottom: 1px; }
.ea-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ea-kpi { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; background: var(--surface-2); }
.ea-kpi b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ea-kpi span { color: var(--ink-3); font-size: 12.5px; }
.ea-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ea-tables table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ea-tables th, .ea-tables td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ea-tables td.num, .ea-tables th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ea-sub { font-size: 13px; font-weight: 600; margin: 4px 0 8px; }
.ea-lines { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ea-lines li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.ea-lines li:last-child { border-bottom: 0; }
.ea-lines .why { color: var(--ink-3); }
.input-sm { max-width: 140px; }
.inline-num { width: 64px; height: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); margin: 0 4px; text-align: center; }
.inline-text { height: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); margin: 0 4px; min-width: 160px; font-family: var(--mono); font-size: 12.5px; }
.code-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: .18em; text-align: center; height: 48px !important; }
.check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.radio-list { display: grid; gap: 10px; }
.radio-list label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.radio-list input { accent-color: var(--accent); }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-cards label { display: flex; justify-content: flex-start; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }   /* UI review: .field label spreads its children apart; a radio card keeps the text next to the radio */
.radio-cards label:has(input:checked) { border-color: transparent; background: var(--btn-fill); }   /* Studio: the selected option is a neutral fill, no coloured border (owner) */
#maintModes label:has(input:checked:not([value="off"])) { background: var(--warn-soft); }   /* Maintenance and Drain stop new runs: the warning tone */
.radio-cards input { margin-top: 3px; accent-color: var(--ink); }
.radio-cards span { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.radio-cards b { color: var(--ink); font-size: 14px; }
/* Segmented control (Uploads / Downloads): a pill track with pill segments, so the selected shape matches the frame (owner, 1.7.1) */
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: var(--r-pill); background: var(--btn-fill); }
.seg label, .seg button { position: relative; }
.seg label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span, .seg button { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 14px; font-weight: 700; color: var(--ink-2); border-radius: var(--r-pill); cursor: pointer; }
.seg span:hover, .seg button:hover { color: var(--ink); }
.seg label:has(input:checked) span, .seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.seg--sm span, .seg--sm button { height: 26px; min-width: 34px; font-size: 13px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); background: var(--neutral-fill); color: var(--neutral-on); }
.copy-field { display: flex; gap: 8px; }
.copy-field input { flex: 1; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface-2); font-family: var(--mono); font-size: 12.5px; min-width: 0; }
.field-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.field-note .ic { width: 15px; height: 15px; margin-top: 1px; }

/* choices (direction cards) */
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); transition: border-color .12s, background .12s; }
.choice:hover { border-color: var(--ink-3); }
.choice[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.choice .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--ink-2); }
.choice[aria-checked="true"] .ic { color: var(--accent); }
.choice > span { display: grid; gap: 2px; }
.choice b { font-size: 14.5px; }
.choice > span > span { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.conn-pick { display: grid; gap: 8px; }
.conn-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; background: var(--surface); }
.conn-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.conn-opt input { accent-color: var(--accent); flex: none; }
.conn-opt-body { display: grid; gap: 1px; flex: 1; min-width: 0; }
.conn-opt-body b { font-size: 14px; }
.conn-opt-body span { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- chips and status ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--neutral-fill); color: var(--neutral-on); }
.chip .ic { width: 13px; height: 13px; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip--ok { background: var(--ok-fill); color: var(--ok-on); }
.chip--warn { background: var(--warn-fill); color: var(--warn-on); }
.chip--bad { background: var(--bad-fill); color: var(--bad-on); }
.chip--run, .chip--info { background: var(--accent-soft); color: var(--accent); }
.chip--neutral { background: var(--neutral-soft); color: var(--neutral); }
.chip--plain { background: transparent; padding: 0; font-weight: 500; color: var(--ink-2); }
.chip--plain.chip--ok { color: var(--ok); } .chip--plain.chip--bad { color: var(--bad); } .chip--plain.chip--warn { color: var(--warn); } .chip--plain.chip--run { color: var(--accent); }
.key-state { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 12.5px; }
.key-state--ok { color: var(--ok); }
.key-state .ic { width: 14px; height: 14px; }

/* ---------- tables ---------- */
/* Long lists: the page scrolls, column headers stay pinned under the top bar, rows come in pages of 50 ("Show more"). */
.table-wrap { max-width: 100%; overflow-x: auto; }   /* F25-1: a table wider than its card scrolls sideways instead of clipping its last column */
.table-wrap--tall { max-height: 520px; overflow: auto; }
.table-wrap--tall .tbl th { top: 0; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); }
.tbl th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; padding: var(--row-pad-y) 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th button { display: inline-flex; gap: 4px; align-items: center; font: inherit; color: inherit; }
.tbl th button .ic { width: 12px; height: 12px; opacity: .6; }
.tbl th[aria-sort] button { color: var(--ink); }
.tbl td { padding: var(--row-pad-y) 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: break-word; }   /* F25-1: not the body's 'anywhere', which lets the auto layout squeeze a column to one character per line; break-word keeps the longest word as the column's floor and still breaks an overlong token */
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.is-selected td { background: var(--accent-soft); }
.tbl tr.is-problem td { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.tbl tr.is-problem td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.tbl tr.is-muted td { color: var(--ink-3); }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl .sel { width: 36px; padding-right: 0; }
.tbl .sel input { accent-color: var(--accent); margin: 0; display: block; }
.tbl .row-act { width: 44px; text-align: right; }
.tbl .cell-main { display: grid; gap: 1px; min-width: 0; }
.tbl .cell-main b { font-weight: 600; }
.tbl .cell-main span { color: var(--ink-3); font-size: 12px; }
.tbl .file { display: flex; gap: 8px; align-items: center; min-width: 0; max-width: 420px; }
.tbl .file .ic { width: 15px; height: 15px; color: var(--ink-3); }
.tbl .file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#csvTable .file { max-width: none; } #csvTable .file span { white-space: normal; }   /* F25-1: the rows table shows whole file names, wrapped, so the table fits its card from a laptop up */
#csvTable td.rec { overflow-wrap: anywhere; min-width: 150px; }   /* F25-1: a record id (a GUID) may break once on a laptop rather than take the file column's room */
.tbl .why { color: var(--ink-2); font-size: 12.5px; max-width: 360px; }
.tbl tr.is-problem .why { color: var(--bad); }
.tbl .mini-bar { display: inline-flex; align-items: center; gap: 8px; }
.tbl .mini-bar .meter { width: 90px; }
.tbl--plain th { position: static; }
.tbl tr[data-open] { cursor: pointer; }
.tbl .person { display: flex; gap: 10px; align-items: center; }
.tbl .dir { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.tbl .dir .ic { width: 14px; height: 14px; }
.tbl .inline-acts { display: inline-flex; gap: 6px; }
.skeleton .sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--inset), var(--hover), var(--inset)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- menus ---------- */
.menu { position: absolute; z-index: 40; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); }
.menu--float { right: 0; top: calc(100% + 6px); }
.menu--float.menu--up { top: auto; bottom: calc(100% + 6px); }   /* PLAN-FLOW: above the button when the bottom would overflow */
.menu--float.menu--left { right: auto; left: 0; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu-head { padding: 8px 10px 10px; display: grid; gap: 1px; }
.menu-head span { color: var(--ink-3); font-size: 12.5px; }
.menu-label { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 6px 10px 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px; text-align: left; color: var(--ink); font-weight: 500; }
.menu-item:hover { background: var(--hover); }
.menu-item .ic { color: var(--ink-3); }
.menu-item kbd { margin-left: auto; }
.menu-item span { display: grid; gap: 1px; }
.menu-item small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.menu-item--danger { color: var(--bad); }
.menu-item--danger .ic { color: var(--bad); }
.theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 4px 4px; }
.theme-row button { display: flex; gap: 6px; align-items: center; justify-content: center; height: 32px; border: 1px solid var(--line); border-radius: 7px; font-weight: 500; color: var(--ink-2); font-size: 13px; }
.theme-row button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- callouts, empty, facts ---------- */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); line-height: 1.45; }
.callout .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.callout--warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.callout--warn .ic { color: var(--warn); }
.callout--bad { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); }
.callout--bad .ic { color: var(--bad); }
.callout--ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.callout--ok .ic { color: var(--ok); }
.callout--info .ic { color: var(--accent); }
.callout > div { flex: 1; min-width: 0; }
.callout .banner-acts { display: flex; gap: 8px; flex: none; align-items: center; }
.err3 > b { display: block; }
.err3 > span { display: block; color: var(--ink-2); }
.empty { display: grid; place-items: center; text-align: center; padding: 56px 24px; gap: 8px; border: 0; background: var(--surface); box-shadow: var(--shadow-1); border-radius: var(--r-card); }   /* owner 2026-10-21: a plain soft card, never a drop area; only .drop (the CSV area, which really takes files) keeps its outline */
.empty h1, .empty h2 { font-size: 16px; font-weight: 600; }
.empty p { color: var(--ink-2); max-width: 44ch; }
.empty .btn { margin-top: 8px; }
.empty-art { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--neutral-soft); color: var(--ink-3); margin-bottom: 4px; }
.empty-art .ic { width: 22px; height: 22px; }
.empty-art--ok { background: var(--ok-soft); color: var(--ok); }
.facts { display: grid; gap: 10px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.facts .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.facts b { display: block; }
.facts span { color: var(--ink-2); font-size: 13px; }
.bul { display: grid; gap: 6px; padding-left: 16px; list-style: disc; color: var(--ink-2); }
.num-list { display: grid; gap: 8px; padding-left: 20px; list-style: decimal; }
.dl { display: grid; gap: 10px; }
.dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
.dl dt { color: var(--ink-3); font-size: 13px; }
.dl--tight { gap: 8px; }
.dl--tight > div { grid-template-columns: 120px 1fr; }

/* ---------- meters, lanes ---------- */
.meter { height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s ease; }
.meter i.ok { background: var(--ok); }
.meter i.bad { background: var(--bad); }
.meter i.active { background: var(--accent); opacity: .55; }
.meter--lg { height: 10px; border-radius: 5px; }
.meter.is-done i { background: var(--ok); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 90;   /* UI review: bottom centre, clear of the primary buttons at the right of a step and the footer at the left */ display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: var(--toast-bg); color: var(--toast-ink); border-radius: 14px; box-shadow: var(--shadow-2); font-size: 13.5px; animation: toastIn .18s ease-out; }
.toast .ic { flex: none; color: var(--ok); }
.toast--bad .ic { color: var(--bad); } .toast--info .ic { color: var(--accent); }
.toast-msg { flex: 1; min-width: 0; }
.toast-act { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast-go { text-decoration: none; font: inherit; font-weight: 600; background: transparent; border: 1px solid currentColor; border-radius: 6px; padding: 3px 10px; cursor: pointer; }   /* RR2: a button that opens a route (no link) */
.toast-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.toast-x { color: inherit; opacity: .7; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.toast-x:hover { opacity: 1; background: rgba(255,255,255,.12); }
.toast.is-out { opacity: 0; transition: opacity .2s; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }

/* ---------- dialogs ---------- */
dialog { border: 0; padding: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: var(--scrim); }
.modal { margin: auto; width: min(480px, calc(100vw - 32px)); }
.modal--wide { width: min(640px, calc(100vw - 32px)); }
.modal-in { background: var(--surface); border-radius: var(--r-dialog); padding: 24px; box-shadow: var(--shadow-2); display: grid; gap: 12px; border: 0; overscroll-behavior: contain; max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; }   /* F26-1: a dialog taller than a small screen scrolls inside its box; its buttons stay reachable */
.modal { max-height: none; }
.modal-in h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.modal-in p { color: var(--ink-2); line-height: 1.5; }
.modal-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.modal-icon--warn { background: var(--warn-soft); color: var(--warn); }
.modal-icon--info { background: var(--accent-soft); color: var(--accent); }
.modal-icon--ok { background: var(--ok-soft); color: var(--ok); }
.modal-icon--bad { background: var(--bad-soft); color: var(--bad); }
.file-list { display: grid; gap: 6px; font-size: 13px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; max-height: 160px; overflow: auto; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; }
.file-list li span { color: var(--ink-3); white-space: nowrap; }
.rename-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.rename-pair .ic { color: var(--ink-3); }
.rename-pair b { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.drawer { margin: 0 0 0 auto; height: 100vh; width: min(520px, 100vw); }
.drawer--wide { width: min(760px, 100vw); }
.drawer-in { height: 100%; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2); }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.drawer-sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.drawer-title-file { word-break: break-word; }
.rd-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }   /* F27-1: the run panel's failed files */
.rd-list li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.rd-list b { font-weight: 600; overflow-wrap: anywhere; } .rd-list .rd-rec { color: var(--ink-3); } .rd-list .why { display: block; }
#filesRunBar { display: flex; align-items: center; gap: 12px; } #filesRunBar span { flex: 1; }
.qa-active { display: grid; gap: 8px; }   /* F29: the owner's runs in progress */
.qa-active-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.qa-active-main { display: grid; gap: 1px; min-width: 0; } .qa-active-main b { overflow-wrap: anywhere; }
@media (max-width: 760px) { .qa-active-row { grid-template-columns: 1fr auto; } .qa-active-row > div:nth-child(2) { grid-column: 1 / -1; } }
.drawer-body { flex: 1; overflow: auto; padding: 20px 24px; display: grid; gap: 16px; align-content: start; }
.drawer-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); min-width: 0; }   /* wraps to a second row instead of overflowing (a right-aligned nowrap row clipped its first button) */
.drawer-foot > .btn { flex: 0 0 auto; }
.drawer-h { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-top: 6px; }
.timeline { display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .tdot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.timeline .tdot i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: block; }
.timeline .tdot.ok i { background: var(--ok); } .timeline .tdot.bad i { background: var(--bad); } .timeline .tdot.warn i { background: var(--warn); } .timeline .tdot.run i { background: var(--accent); }
.timeline b { display: block; font-weight: 600; font-size: 13.5px; }
.timeline span { color: var(--ink-3); font-size: 12.5px; }
.palette { margin: 10vh auto auto; width: min(600px, calc(100vw - 32px)); }
.pal-in { background: var(--surface); border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.pal-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.pal-search input { flex: 1; border: 0; background: none; outline: none; font-size: 15px; color: var(--ink); }
#palList { max-height: 360px; overflow: auto; padding: 6px; }
#palList li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; }
#palList li[aria-selected="true"], #palList li:hover { background: var(--hover); }
#palList .ic { color: var(--ink-3); }
#palList .pal-g { margin-left: auto; color: var(--ink-3); font-size: 12px; }
#palList .pal-h { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 8px 10px 2px; }
.keys { display: grid; gap: 8px; }
.keys > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.keys dd { color: var(--ink-2); }

/* ---------- auth ---------- */
/* F3: the card centres in whatever height there is; if it cannot fit, only its body scrolls and the primary button stays */
.auth { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }   /* the row is the full height: the card's max-height 100% resolves against it, not against an auto row (which collapsed the body to nothing) */
.auth-left { display: grid; place-items: center; padding: 16px; min-height: 0; }
.auth-card { width: min(400px, 100%); max-height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: var(--surface); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.auth-card .auth-pane { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 auto; }   /* a real box: forms keep their semantics and are measurable */
.auth-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; gap: 12px; align-content: start; padding: 2px; margin: -2px; }
.auth-actions { flex: none; display: grid; gap: 8px; }
.auth-card:has(.enrol-grid) { width: min(760px, 100%); }
.enrol-grid { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 18px; align-items: start; }
.enrol-side { display: grid; gap: 0; justify-items: center; }
.steps-inline .copy-field input { font-size: 12px; }
@media (max-width: 760px) { .enrol-grid { grid-template-columns: 1fr; } }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.auth-card h1 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.auth-card .lead { color: var(--ink-2); margin-top: 2px; font-size: 13.5px; }
.auth-pane { display: grid; gap: 12px; }
.auth-help { color: var(--ink-3); font-size: 13px; }
.auth-foot { color: var(--ink-3); font-size: 12.5px; }
/* X2: short windows (1366x768, 1280x720 and the Test banner) get a compact card so the longest form (setup) fits without scrolling;
   shorter still (1280x500, phones) and the body scrolls inside the card with the heading and the primary button pinned */
@media (max-height: 840px) {
  .auth-left { padding: 8px; }
  .auth-card { padding: 12px 16px; gap: 8px; }
  .auth-card .auth-pane, .auth-body { gap: 8px; }
  .auth-card h1 { font-size: 17px; }
  .auth-card .lead { font-size: 12.5px; margin-top: 0; }
  .auth-card .field + .field { margin-top: 6px; }
  .auth-card .field input:not([type=radio]):not([type=checkbox]) { height: 32px; }
  .auth-card .field-note, .auth-card .hint { font-size: 12px; }
  .auth-card .steps-inline { gap: 6px; }
}
@media (max-height: 780px) {   /* 1280x720 with the banner: tighter still; nothing is hidden (Y2), the card scrolls inside with the button pinned if it must */
  .auth-card { padding: 10px 16px; gap: 4px; }
  .auth-card .auth-foot { font-size: 11.5px; line-height: 1.35; }
  .auth-card .hint, .auth-card .field-note { font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
  .auth-card .field { gap: 3px; }
  .auth-card .field + .field { margin-top: 3px; }
}
/* Z7: the landing page. Wide windows show an intro column beside the sign-in card; narrow or short ones show the card alone.
   Neutral surface and the app's own blue, like the rest of the product. */
.auth-intro { display: none; position: relative; overflow: hidden; background: var(--surface-2); color: var(--ink); border-right: 1px solid var(--line); padding: 36px clamp(28px, 4vw, 56px); }
.auth-intro-in { position: relative; max-width: 520px; display: grid; gap: 14px; align-content: center; height: 100%; margin: 0 auto; }
.brand-mark--xl { width: 44px; height: 44px; border-radius: 12px; }
.brand-mark--xl svg { width: 24px; height: 24px; }
.intro-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.intro-eyebrow { color: var(--ink-3); font-size: 13px; font-weight: 600; margin-top: 6px; }
.auth-intro h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; max-width: 17ch; }
.intro-lead { color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 46ch; }
/* The statistics read as short sentences, number first: "2,200+ files transferred". One rule above them, none below; no boxes. */
.intro-stats { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; padding: 18px 0 4px; border-top: 1px solid var(--line); }
.intro-stats[hidden], .intro-stats > [hidden] { display: none; }
.intro-stats > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; min-width: 0; }
.intro-stats dd { margin: 0; white-space: nowrap; font-size: 22px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.intro-stats > [data-stat="files"] dd { font-size: clamp(32px, 3vw, 40px); line-height: 1; letter-spacing: -.025em; }
.intro-stats dt { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.intro-facts { display: grid; gap: 14px; margin-top: 14px; }
.intro-facts li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.intro-facts .ic { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.intro-facts b { display: block; font-weight: 600; }
.intro-facts span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
/* Home milestone bar: one slim row, one 20px line box so every item shares one center line; text 13px, the figure 15px semibold */
.ms-bar { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px max(32px, calc(100% - var(--content-max) + 32px)) 8px 32px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); color: var(--ink); }
.ms-bar > p { margin: 0; font-size: 13px; line-height: 20px; }
.ms-bar[hidden] { display: none; }
.ms-num { flex: none; white-space: nowrap; color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; }
.ms-num b { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ms-div { flex: none; width: 1px; height: 16px; background: var(--accent-line); }
.ms-copy { flex: 1 1 0; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-personal { flex: 0 1 auto; min-width: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-x { flex: none; width: 28px; height: 28px; margin-right: -6px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; }
.ms-x:hover { background: var(--hover); color: var(--ink); }
.ms-x .ic { width: 16px; height: 16px; }
@media (max-width: 1199px) { .ms-personal { display: none; } }
@media (min-width: 900px) and (min-height: 560px) {
  .auth--landing { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .auth--landing .auth-intro { display: block; }
  .auth--landing .auth-card .auth-brand { display: none; }   /* the intro column carries the name; no second mark in the card */
}
.auth-right { background: var(--surface); border-left: 1px solid var(--line); display: grid; place-items: center; padding: 40px; }
.auth-right-in { width: min(420px, 100%); display: grid; gap: 18px; }
.auth-right h2 { font-size: 16px; font-weight: 600; }
.auth-steps { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.auth-steps b { color: var(--ink); font-weight: 600; }
.auth-steps .sep { width: 16px; height: 1px; background: var(--line-2); }
.qr { width: 160px; height: 160px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: grid; place-items: center; padding: 8px; }
.qr svg { width: 100%; height: 100%; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-family: var(--mono); font-size: 13.5px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; letter-spacing: .04em; }
.steps-inline { display: grid; gap: 8px; counter-reset: s; }
.steps-inline li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; counter-increment: s; }
.steps-inline li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--neutral-soft); color: var(--ink-2); }

/* ---------- home ---------- */
/* Home: a 12-column grid on the content container (same left edge as the page title). Alert strip and checklist span all 12;
   Recent runs takes 8 and the start card 4, same top, same height. Below 1280 everything stacks in one column. */
.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.home-grid > * { grid-column: 1 / -1; }
.home-grid > [hidden] { display: none; }
@media (min-width: 1280px) {
  .home-grid > .home-recent { grid-column: span 8; }
  .home-grid > .home-start { grid-column: span 4; }
  .home-grid:has(> .home-recent[hidden]) > .home-start { grid-column: 1 / -1; }
  .home-grid:has(> .home-recent:not([hidden])) .start-row { grid-template-columns: 1fr; }
}
.home-grid .card-head { min-height: 28px; margin-bottom: 14px; }
.home-recent .card-head { padding: 18px 20px 0; }
.home-start { display: flex; flex-direction: column; gap: 14px; }
.home-start .card-head { margin-bottom: 0; }
.start-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.start-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; min-height: 64px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); transition: border-color .12s, background .12s; }
.start-card:hover { border-color: var(--line-2); background: var(--hover); }
.start-card .ic { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; flex: none; }
.start-card b { display: block; font-size: 14px; font-weight: 600; }
.start-card span { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.home-idle { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.home-idle[hidden], .home-run[hidden] { display: none; }
.home-run { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
.home-run-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-run-foot .mini-run-meta { flex-direction: column; gap: 2px; }
.home-recent .tbl th, .home-recent .tbl td { white-space: nowrap; }
.home-recent .tbl th:first-child, .home-recent .tbl td:first-child { padding-left: 20px; }
.home-recent .tbl th:last-child, .home-recent .tbl td:last-child { padding-right: 20px; }
.home-recent .tbl .row-act { width: 1%; }
.home-recent .tbl td.num, .home-recent .tbl th.num { text-align: left; font-variant-numeric: tabular-nums; }
.home-recent .tbl .cell-main span { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
.home-alert { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r-card); padding: 2px 16px 2px 14px; box-shadow: var(--shadow-1); min-width: 0; }
.steps-list { display: grid; gap: 2px; }
.steps-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 8px; }
.steps-list li.is-next { background: var(--accent-soft); }
.steps-list .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: var(--accent-ink); }
.steps-list li.is-done .tick { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.steps-list li.is-next .tick { border-color: var(--accent); }
.steps-list .tick .ic { width: 14px; height: 14px; }
.steps-list b { display: block; font-weight: 600; }
.steps-list li.is-done b { color: var(--ink-3); text-decoration: line-through; font-weight: 500; }
.steps-list div > span { color: var(--ink-2); font-size: 13px; }
.ring { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.mini-run { display: grid; gap: 10px; }
.mini-run-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mini-run-meta { display: flex; gap: 16px; color: var(--ink-2); font-size: 13px; }
.attn { display: grid; }
.attn li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 0; }
.attn li + li { border-top: 1px solid var(--line); }
.attn li > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.attn b { flex: none; font-weight: 600; }
.attn div > span { color: var(--ink-2); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent { display: grid; }
.recent li a { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 4px; border-radius: 6px; }
.recent li + li a { border-top: 1px solid var(--line); }
.recent li a:hover { background: var(--hover); }
.recent .dir { color: var(--ink-3); display: grid; place-items: center; }
.recent-main { display: grid; min-width: 0; }
.recent-main span { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-n { color: var(--ink-2); font-size: 13px; }

/* ---------- wizard ---------- */
.wiz { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.rail { display: grid; gap: 0; }   /* H2: not pinned; the step list scrolls with the page */
.rail li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-bottom: 20px; position: relative; }
.rail li::before { content: ""; position: absolute; left: 12.5px; top: 28px; bottom: 2px; width: 1px; background: var(--line-2); }
.rail li:last-child::before { display: none; }
.rail .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: var(--bg); }
.rail li.is-done .n { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.rail li.is-done .n .ic { width: 14px; height: 14px; }
.rail li.is-current .n { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rail .t { font-weight: 600; color: var(--ink-3); line-height: 26px; }
.rail li.is-current .t, .rail li.is-done .t { color: var(--ink); }
.rail li > div { min-width: 0; }
.rail .r { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.rail li.is-done .r { color: var(--ink-2); }
.rail a.r { color: var(--accent); }
.wiz-main { display: grid; gap: 12px; }
.wiz-main > * { max-width: 720px; }   /* forms and sentences stay a readable width ... */
.wiz-main > .wiz-wide { max-width: none; }   /* ... a table (F25-1: Show all rows) takes the whole column */
.sentence { font-size: 20px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; margin-bottom: 4px; }
.sentence .blank { color: var(--ink-3); font-weight: 500; }   /* a part not known yet: a plain muted word, never a chip */
.sentence .filled { color: var(--ink); font-weight: 700; }
.sentence .filled--where { color: var(--ink-2); font-weight: 600; }   /* host, site, folder: quieter, never accent blue (it read as a hyperlink) */
.sentence-sub { color: var(--ink-2); margin-bottom: 18px; }
.block { background: var(--surface); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.block[data-state="open"] { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.block[data-state="todo"] { opacity: .55; box-shadow: none; }
.block-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.block-head .bn { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--neutral-soft); color: var(--ink-2); flex: none; }
.block[data-state="open"] .bn { background: var(--accent); color: var(--accent-ink); }
.block[data-state="done"] .bn { background: var(--ok); color: var(--ok-ink); }
.block[data-state="done"] .bn .ic { width: 14px; height: 14px; }
.block-head h2 { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
.block-head .receipt { color: var(--ink-2); font-weight: 400; font-size: 13.5px; }
.block-head .receipt b { color: var(--ink); font-weight: 500; }
.block-head .edit, .sec-head .edit { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13px; }   /* UI review: Change and Edit are small buttons, not link text */
.block-head .edit:hover, .sec-head .edit:hover { background: var(--hover); }
.block-body { padding: 4px 18px 18px 54px; display: grid; gap: 14px; }
.block[data-state="done"] .block-body, .block[data-state="todo"] .block-body { display: none; }
.block-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding-top: 4px; }
.block-acts .hint { margin: 0 auto 0 0; }
.check-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.conn-state { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 13px; }
.conn-state.is-ok { color: var(--ok); } .conn-state.is-bad { color: var(--bad); }
.wiz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; }
.wiz-foot .right { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.drop { display: grid; place-items: center; text-align: center; gap: 6px; padding: 40px 24px; border: 1.5px dashed var(--line-2); border-radius: var(--r-card); background: var(--surface); cursor: pointer; }
.drop:hover, .drop:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.drop .ic--xl { color: var(--accent); }
.drop b { font-size: 15px; }
.drop span { color: var(--ink-2); max-width: 52ch; }
.drop-links { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }   /* two buttons wrap on a narrow screen instead of overflowing */
.file-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.file-bar .ic--lg { color: var(--ink-3); }
.file-bar-main { flex: 1; display: grid; gap: 1px; min-width: 0; }
.file-bar-main span { color: var(--ink-2); font-size: 13px; }
.count-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.count-strip > div { padding: 14px 18px; display: grid; gap: 2px; align-content: start; }
.count-strip > div[hidden] { display: none; }
.count-strip .btn { justify-self: start; }
.count-strip > div + div { border-left: 1px solid var(--line); }
.count-strip b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.count-strip span { color: var(--ink-2); font-size: 13px; }
.count-strip .is-bad b { color: var(--bad); }
.count-strip .is-muted b { color: var(--ink-3); }
.probs { display: grid; gap: 8px; }
.prob { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: 8px; }
.prob .rown { color: var(--ink-3); font-size: 12.5px; }
.prob b { display: block; word-break: break-word; }
.prob .prob-why { color: var(--bad); font-size: 13px; }
.prob .prob-rec { color: var(--ink-3); font-size: 12.5px; }
.prob .prob-acts { display: flex; gap: 6px; }
.prob.is-skipped { border-left-color: var(--line-2); opacity: .65; }
.expander { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.expander > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 500; }
.expander > summary::-webkit-details-marker { display: none; }
.expander > summary .ic { color: var(--ink-3); transition: transform .15s; }
.expander[open] > summary .ic.chev { transform: rotate(180deg); }
.expander > summary .sum-note { color: var(--ink-3); font-weight: 400; margin-left: auto; font-size: 13px; flex: none; white-space: nowrap; }   /* DOCCONTROL-UI: a long options line wraps, the Change word never splits */
.expander > summary > b { white-space: nowrap; }
.expander > summary .sum-note.link { color: var(--accent); font-weight: 500; }
.expander > summary .sum-opt { color: var(--ink-2); font-weight: 400; min-width: 0; }
.expander-body { padding: 0 16px 16px; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.review-lines { display: grid; }
.review-lines > div { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.review-lines > div:last-child { border-bottom: 0; }
.review-lines dt { color: var(--ink-3); font-size: 13px; }
.review-lines dd { min-width: 0; }
.review-lines dd span { color: var(--ink-2); font-size: 13px; display: block; }
/* FOLD-A: the Save to line (folder bold, then the server muted on the same line) and the folder dialog (560 px) */
.review-lines dd .rv-folder { overflow-wrap: anywhere; }
.review-lines dd .rv-host { display: inline; color: var(--ink-3); margin-left: 8px; }
/* FOLD-B: the Review check lines (Intelex objects, Save to), their Check again button and what keeps Start off;
   the Connections Test SFTP answer on two lines */
.review-lines dd .rv-check { display: flex; gap: 6px; align-items: center; margin-top: 4px; overflow-wrap: anywhere; min-width: 0; }
.review-lines dd .rv-check .spin { display: inline-block; }
.review-lines dd .rv-check.is-ok { color: var(--ok); } .review-lines dd .rv-check.is-warn { color: var(--warn); } .review-lines dd .rv-check.is-bad { color: var(--bad); }
.rv-check-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; min-width: 0; }
.rv-check-list li { overflow-wrap: anywhere; color: var(--ink-2); } .rv-check-list li.is-bad { color: var(--bad); }
.review-lines dd .rv-check-again { margin-top: 6px; }
.rv-start-blocked { margin: 0; color: var(--bad); font-size: 13px; overflow-wrap: anywhere; }
.conn-state.conn-state--lines { display: block; white-space: pre-line; }
.modal--folder { width: min(560px, calc(100vw - 32px)); }
/* FOLD-E: the upload folder line under the connection block of step 1 (shown while the connection is chosen) */
.block-folder { padding: 0 18px 14px 54px; display: grid; gap: 6px; min-width: 0; }
.block-folder-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.block-folder-line b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
#sfdBody { overflow-wrap: anywhere; }
#srcFolderDialog .modal-acts { flex-wrap: wrap; }
#srcFolderDialog p.field-error { color: var(--bad); }
.sentence-sub .sentence-hint { display: block; }
/* FOLD-C: the folder picker in the same dialog (docs/PLAN-FOLDERS.md A.6): 760 px wide from 900 to 1920, at most
   640 px tall; header and footer fixed, the folder list scrolls inside its own box (F26-1 rule). Web only. */
.modal--picker { width: min(760px, calc(100vw - 64px)); }
.modal-in.fp { height: min(640px, calc(100vh - 96px)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.fp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; }
.fp-title { min-width: 0; }
.fp-title p { overflow-wrap: anywhere; }
.df-body.fp-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; overflow-y: auto; }
.fp-body > * { flex: none; }
.fp-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp-nav { display: flex; gap: 6px; flex: none; }
.fp-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.fp-crumb { flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 26px; }
.fp-crumb[aria-current] { font-weight: 600; color: var(--ink); }
.fp-sep { color: var(--ink-3); flex: none; }
.fp-go-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.fp-go-row input { flex: 1 1 auto; min-width: 0; }
.fp-go-row .btn { flex: none; }
.fp-body > .fp-list { flex: 1 1 auto; min-height: 96px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.fp-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border-radius: 6px; text-align: left; color: var(--ink); background: transparent; border: 0; cursor: pointer; flex: none; }
.fp-row:hover, .fp-row:focus-visible { background: var(--hover); }
.fp-row .ic { flex: none; color: var(--ink-3); }
.fp-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; line-height: 1.3; padding: 6px 0; }   /* 1.5.5: whole names, wrapped; no tooltip */
.fp-state { margin: 8px; color: var(--ink-2); }
.fp-state--bad p { color: var(--ink); margin: 0 0 10px; }
.fp-state-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-skel { height: 30px; padding: 9px 10px; flex: none; }
.fp-skel .sk { width: 40%; }
.fp-trunc { margin: 0; }
.fp-new-line { overflow-wrap: anywhere; }
.df-foot.fp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.fp-foot .modal-acts { min-width: 0; flex: 0 1 auto; margin-left: auto; }
.fp-use { min-width: 0; max-width: 520px; gap: 0; }
.fp-current { overflow-wrap: anywhere; } .fp-why { color: var(--warn); overflow-wrap: anywhere; }   /* 1.5.5: the full path, and why Use is off, next to the button */
.fp-use-sep { white-space: pre; }
.fp-use-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fp-use:has(.fp-use-path:empty) .fp-use-sep, .fp-use-path:empty { display: none; }
.df-body { display: grid; gap: 10px; min-width: 0; }
.df-recent-box { display: grid; gap: 8px; min-width: 0; }
.df-recent-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.df-recent-list { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.df-recent { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 26px; }
.df-foot { display: grid; gap: 8px; }
.df-foot .modal-acts { margin-top: 0; }
.review-break { display: grid; gap: 6px; }
.review-lines .rv-folders { display: grid; gap: 2px; margin: 6px 0; font-size: 13px; }
.review-lines .rv-folders li { display: flex; gap: 10px; justify-content: space-between; max-width: 520px; }
.review-lines .rv-folders .rvf-name { overflow-wrap: anywhere; min-width: 0; }
.review-lines .rv-folders .rvf-n { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-bad-rows { display: grid; gap: 2px; margin-top: 6px; font-size: 13px; }
.rv-bad-rows li { overflow-wrap: anywhere; }
/* FOLD-F: the folder of one list on Choose files */
.list-folder { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.list-folder > .ic { color: var(--ink-3); flex: none; }
.list-folder-main { flex: 1; display: grid; gap: 1px; min-width: 0; }
.list-folder-main b { overflow-wrap: anywhere; }
.list-folder-label { color: var(--ink-3); font-size: 12px; }
.list-folder-main .sub { color: var(--ink-2); font-size: 13px; }
.rd-list .rd-folder { display: block; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.review-break li { display: flex; gap: 10px; align-items: center; }
.sq { width: 10px; height: 10px; border-radius: 2px; background: var(--line-2); display: inline-block; flex: none; }
.sq--ok { background: var(--ok); } .sq--bad { background: var(--bad); } .sq--muted { background: var(--line-2); } .sq--info { background: var(--accent); }
.start-box { display: grid; gap: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.start-box .btn { justify-self: start; }
.opt-row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.opt-row > span { font-weight: 500; padding-top: 6px; }

/* ---------- live run ---------- */
.run-head { display: grid; gap: 6px; margin-bottom: 18px; padding: 20px 0 10px; margin-top: -4px; }   /* H2: not pinned; the page body is the only thing that scrolls */
.run-status { font-size: 22px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.run-meta { color: var(--ink-2); font-size: 13.5px; display: flex; gap: 14px; flex-wrap: wrap; }
.run-bar { display: grid; gap: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 14px; }
.run-bar-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.run-bar-top .big { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.run-bar-top .of { color: var(--ink-2); }
.run-bar-ctl { display: flex; gap: 8px; align-items: center; }
.run-stats { display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; }
.run-stats b { color: var(--ink); font-weight: 600; }
.run-stats .lanes-ctl { display: inline-flex; gap: 8px; align-items: center; }
.run-stats select { height: 26px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); padding: 0 6px; }
.capacity { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.lanes { display: grid; gap: 2px; }
.lane { display: grid; grid-template-columns: 18px minmax(0, 1fr) 140px 110px 70px; gap: 12px; align-items: center; padding: 9px 0; font-size: 13px; border-top: 1px solid var(--line); }
.lane:first-child { border-top: 0; }
.lane .ic { color: var(--ink-3); width: 15px; height: 15px; }
.lane .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane .lb { color: var(--ink-2); text-align: right; }
.lane .ls { color: var(--ink-3); text-align: right; }
.lane.is-stalled .meter i { background: var(--warn); }
.lanes-empty { color: var(--ink-3); font-size: 13px; padding: 10px 0; }
.run-tabs { display: flex; align-items: center; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.run-tabs button { padding: 10px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.run-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.run-tabs .tabs-note { margin-left: auto; color: var(--ink-3); font-size: 12.5px; padding-right: 8px; }
.done-banner, .stall-banner { margin-bottom: 14px; }

/* ---------- connections ---------- */
.conn-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.conn-list { display: grid; }
.conn-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.conn-row:last-child { border-bottom: 0; }
.conn-row:hover { background: var(--hover); }
.conn-row[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.conn-row .cic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--neutral-soft); color: var(--ink-2); }
.conn-row .cm { display: grid; min-width: 0; }
.conn-row .cm b { font-size: 14px; }
.conn-row .cm span { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-detail { display: grid; gap: 12px; }
.conn-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.conn-detail-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; display: flex; gap: 10px; align-items: center; }
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.sec-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sec-head .ic { color: var(--ink-3); }
.sec-head h3 { font-size: 14px; font-weight: 600; flex: 1; }
.sec-body { padding: 12px 16px; }
.sec-body .dl > div { grid-template-columns: 160px 1fr; }
.sec-body .dl dd { font-size: 13.5px; }
.sec-form { padding: 14px 16px; display: grid; gap: 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.sec-form .field + .field { margin-top: 0; }
.sec[data-editing="0"] .sec-form { display: none; }
.sec[data-editing="1"] .sec-body { display: none; }

/* ---------- fix names ---------- */
.fix-row input { font-family: var(--mono); font-size: 12.5px; height: 32px; }
.fix-row td:nth-child(3) { width: 38%; min-width: 320px; }
.fix-row.is-bad .fix-len { display: none; }
.fix-row.is-bad input { border-color: var(--bad); }
.fix-cur { font-family: var(--mono); font-size: 12px; color: var(--ink-2); word-break: break-all; max-width: 360px; }
.fix-len { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.fix-row.is-bad .fix-len { color: var(--bad); }
.sticky-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 32px; margin: 12px -32px 0; background: var(--surface); border-top: 1px solid var(--line); }   /* H2: the pinned action bar is opaque, edge to edge, with a clean line above it */
.fix-sum { margin-right: auto; color: var(--ink-2); font-size: 13px; }
.meta-pill { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 13px; }
.meta-pill .ic { width: 15px; height: 15px; color: var(--ink-3); }

/* ---------- team, settings, help ---------- */
.deploy-chip { font-weight: 500; }
.log { display: grid; }
.log li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.log li span { color: var(--ink-3); white-space: nowrap; }
.settings { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { display: grid; gap: 1px; }   /* H2: not pinned */
.settings-nav a, .settings-nav button { padding: 7px 10px; border-radius: 7px; color: var(--ink-2); font-weight: 500; text-align: left; width: 100%; }
.settings-nav a:hover, .settings-nav button:hover { background: var(--hover); color: var(--ink); }
.settings-nav a[aria-current="true"], .settings-nav button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.settings-body [role="tabpanel"]:focus { outline: none; }
.settings-body [role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-body { display: grid; gap: 14px; max-width: 760px; }
.set-sec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.set-intro .sub { font-size: 13px; margin-top: 2px; }
.set-fields { display: grid; gap: 14px; }
.set-act { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }   /* Z4: button pairs never touch */
.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kv-row .sub { display: block; font-size: 13px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card--wide { grid-column: 1 / -1; }
.faq { border-top: 1px solid var(--line); }
.faq summary { padding: 11px 0; cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); }
.faq[open] summary::after { content: "\2013"; }
.faq p { padding: 0 0 12px; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root { --side-w: 64px; }
  .side { padding: 10px 8px; }
  .brand-text, .side .lbl, .side-group, .side-count { display: none; }
  .side-nav a, .side-foot a, .side-foot button, .side-new { justify-content: center; padding: 0; }
  .side-head { justify-content: center; padding: 6px 0 12px; }
  .search-btn { width: 200px; }
  .wiz { grid-template-columns: 1fr; gap: 16px; }
  .rail { position: static; display: flex; gap: 14px; flex-wrap: wrap; }
  .rail li { padding-bottom: 0; grid-template-columns: 26px auto; }
  .rail li::before { display: none; }
  .rail .r { display: none; }
  .help-grid, .conn-layout { grid-template-columns: 1fr; }
  .settings { grid-template-columns: 1fr; }
  .settings-nav { display: flex; gap: 4px; position: static; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 272px; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility 0s linear .2s; border-right: 1px solid var(--line); padding: 12px; }
  .brand-text, .side .lbl, .side-group, .side-count { display: initial; }
  .brand-text { display: grid; }
  .side-nav a, .side-foot a, .side-foot button, .side-new { justify-content: flex-start; padding: 0 10px; }
  .side-head { justify-content: space-between; padding: 4px 4px 12px; }
  .side .side-close { display: grid; }
  .nav-open .side { transform: none; visibility: visible; transition: transform .2s, visibility 0s; }
  .btn--sm { height: 32px; }
  .nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 50; }
  .top { grid-column: 1; padding: 0 12px; gap: 8px; position: relative; }   /* F26-1: the shell grid holds the bar; sticky here made Chrome count a phantom scroll height for the document */
  .top .top-menu { display: grid; }
  .search-btn { width: 36px; padding: 0; justify-content: center; }
  .search-btn .lbl, .search-btn kbd { display: none; }
  .env, .crumb-root, .crumbs .ic:first-of-type { display: none; }
  .run-pill span:not(.sr) { display: none; }
  .run-pill { padding: 0 10px; }
  .main { grid-column: 1; }
  .page-head { padding: 16px 16px 10px; }
  .page-body { padding: 0 16px 16px; }
  section[data-screen] > .page-body:first-child { padding-top: 16px; }
  .app-foot { padding: 8px 16px; }
  .page-head h1 { font-size: 20px; }
  .choice-row, .count-strip, .field-grid, .radio-cards { grid-template-columns: 1fr; }
  .count-strip { grid-auto-flow: row; }
  .count-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .block-body { padding-left: 18px; }
  .sentence { font-size: 17px; }
  .prob { grid-template-columns: 1fr; gap: 6px; }
  .lane { grid-template-columns: 18px 1fr 90px; }
  .lane .ls, .lane .meter { display: none; }
  .set-sec { grid-template-columns: 1fr; gap: 12px; }
  .search { min-width: 0; width: 100%; margin-left: 0; }
  .table-wrap { overflow-x: auto; }
  .tbl th { top: 0; }
  .tbl { min-width: 640px; }
  .tbl .file { max-width: 220px; }
  .tbl--plain { min-width: 0; }
  .run-tabs .tabs-note { display: none; }
  .lanes-ctl label { display: none; }
  .auth-card { padding: 16px; }
  .auth-left { padding: 8px; }
  .modal-acts { flex-wrap: wrap; }
  .run-bar-top .big { font-size: 26px; }
  .drawer { width: 100vw; }
  .rename-pair { grid-template-columns: 1fr; }
  .dl > div, .review-lines > div { grid-template-columns: 1fr; gap: 2px; }
  .review-lines > div { grid-template-columns: 1fr auto; }
  .review-lines dt { grid-column: 1 / -1; }
  .opt-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- utilities (replace the prototype's style="" attributes under the strict CSP) ---------- */
.mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-40 { margin-top: 40px; }
.mb-6 { margin-bottom: 6px; } .mb-10 { margin-bottom: 10px; } .mb-14 { margin-bottom: 14px; } .m-0 { margin: 0; }
.p-18 { padding: 18px 20px; } .flex-1 { flex: 1; } .inherit { color: inherit; font-size: inherit; }
.sk--w30 { width: 30%; } .sk--w40 { width: 40%; } .sk--w60 { width: 60%; } .sk--w70 { width: 70%; }
.empty--inset { border: 0; padding: 32px; background: transparent; box-shadow: none; }   /* inside a table card */
.facts--2col { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.noscript { padding: 12px 16px; background: #fde8e8; color: #600; font: 14px sans-serif; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden-start { display: none; }
[data-mode="upload"] .m-down, [data-mode="download"] .m-up { display: none !important; }
[data-role="user"] .admin-only { display: none !important; }
[data-owner="0"] .owner-only { display: none !important; }   /* QM1: the queue page is the owner's (session.permissions has queue.view) */
[data-runs-view="0"] .runs-view-only { display: none !important; }   /* RH1: the run history page needs runs.view */
[data-reports-view="0"] .reports-view-only { display: none !important; }   /* RP1: the reports page needs reports.view */
[data-feedback-view="0"] .feedback-view-only { display: none !important; }   /* FB1: the feedback page needs feedback.view */
/* FB1: the feedback card after a run, and the owner's numbers */
.fb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.fb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-block { margin-bottom: 12px; }
.fb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fb-num { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 2px 0; }
.radio-cards--3 { grid-template-columns: 1fr 1fr 1fr; }
.radio-cards--col { grid-template-columns: 1fr; gap: 6px; } .radio-cards--col label { padding: 8px 12px; align-items: center; }   /* RP6: three short choices read best as a list */
.tbl tr.is-held td { background: var(--warn-soft); }
@media (max-width: 760px) { .facts--2col { grid-template-columns: 1fr; } }
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.run-tabs .cnt { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--neutral-soft); color: var(--ink-2); }
.run-tabs .cnt--warn { background: var(--warn-soft); color: var(--warn); }
.px-18 { padding-left: 18px; padding-right: 18px; }
.card-foot .link { white-space: nowrap; }
/* ---------- queue bar (U1) ---------- */
.queue-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 32px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.queue-bar .ic { color: var(--accent); flex: none; }
.queue-bar[data-kind="queued"] { background: var(--accent-soft); color: var(--ink); }
.queue-bar[data-kind="note"] { background: var(--warn-soft); color: var(--warn); }
.queue-bar .btn { margin-left: auto; }
.queue-bar--undo { background: var(--warn-soft); color: var(--ink); }   /* G1: results cleared a moment ago can come back */
/* ---------- onboarding tour (U7) ---------- */
#tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tour-ring { position: fixed; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 9999px rgba(18, 21, 28, .35); pointer-events: none; }
.tour-card { position: fixed; pointer-events: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 16px 18px; display: grid; gap: 6px; }
.tour-card h2 { font-size: 16px; font-weight: 600; }
.tour-card h2:focus { outline: none; }
.tour-card p { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.tour-step { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tour-acts { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
@media (max-width: 760px) { .queue-bar { padding: 8px 16px; } .queue-bar .btn { margin-left: 0; } }
.queue-card { display: flex; align-items: center; gap: 12px; }
.queue-card .ic { color: var(--accent); flex: none; }
.queue-card b { display: block; }
.queue-card span { color: var(--ink-2); font-size: 13px; }
.queue-card[data-kind="queued"], .queue-card[data-kind="running"] { border-color: var(--accent-line); background: var(--accent-soft); }
/* BN1: the busy notice (someone else holds the server) is a warning at a glance, like the test-environment line; blue stays for "your run" */
.queue-card[data-kind="busy"] { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.queue-card[data-kind="busy"] .ic, .queue-card[data-kind="busy"] b { color: var(--warn); }
.queue-bar[data-kind="busy"] { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.queue-bar[data-kind="busy"] .ic { color: var(--warn); }
html[data-tour="1"] .shell { opacity: .55; transition: opacity .2s; }   /* Z2: the app fades while the tour runs; tour.js makes it inert */
/* CM1, UI review: the column-matching sub-step on Choose files is one card with a tinted head, one row per field (what it
   means, the column from the file, an example value under it) and one button. The step's Back and Continue hide while it is open. */
.map-card { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.map-head { display: grid; gap: 4px; padding: 12px 20px; background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.map-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.map-lead { color: var(--ink-2); }
.map-why { color: var(--ink); font-weight: 500; }
.map-why:empty { display: none; }
.map-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.2fr); gap: 4px 24px; align-items: start; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.map-row .map-sample { grid-column: 2; }
@media (min-width: 1280px) {   /* the example value sits beside the select: five rows fit a 900px-tall window without scrolling */
  .map-row { grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr) minmax(180px, 1fr); align-items: center; padding: 8px 20px; }
  .map-row .map-sample { grid-column: auto; }
}
.map-what { display: grid; gap: 2px; }
.map-what b { display: flex; align-items: center; gap: 8px; }
.map-what span { color: var(--ink-2); font-size: 13px; }
.map-pick { display: grid; gap: 5px; }
.map-pick select { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.map-pick select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.map-row.is-missing select { border-color: var(--warn); }
.map-sample { color: var(--ink-3); font-size: 12.5px; min-height: 17px; overflow-wrap: anywhere; }
.map-sample b { color: var(--ink-2); font-weight: 500; }
.map-err { padding: 10px 20px 0; }
.map-acts { display: flex; gap: 8px; align-items: center; padding: 10px 20px; background: var(--surface-2); }
.map-left { margin-left: auto; color: var(--ink-2); font-size: 13px; }
/* REDOWNLOAD: where the new copies go (bulk Download again) */
.redl-folder { border: 0; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.redl-folder legend { font-weight: 600; margin-bottom: 4px; }
.redl-folder .input { max-width: 100%; }

/* RR2: the Run report page (#runs/<id>): one column from 900 px, two columns from 1280 px, Issues across the bottom */
.rr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
.rr-col { min-width: 0; }
@media (min-width: 1280px) { .rr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rr-wide { grid-column: 1 / -1; } }
.rr-grid .dl { margin-top: 12px; }
.rr-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; }
.rr-stats > div { display: grid; gap: 2px; min-width: 90px; }
.rr-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.rr-stats span { color: var(--ink-3); font-size: 13px; }
.rr-group { border: 1px solid var(--line); border-radius: 9px; margin-top: 12px; overflow: hidden; }
.rr-group > header { display: grid; gap: 2px; padding: 10px 14px; background: var(--surface-2); }
.rr-group > header b { font-weight: 600; }
.rr-group > header span { color: var(--ink-3); font-size: 13px; }
.rr-group .tbl td { vertical-align: top; }
.rr-group .why { overflow-wrap: anywhere; }
.rr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.timeline li > div { display: grid; gap: 1px; }
.timeline li > div span { color: var(--ink-3); font-size: 13px; }

/* ---------- DS1: design system, direction 3 "Studio" (owner pick 2026-10-21). Shapes and states that the rules above do not own ---------- */
.icon-btn, .user-btn, .filters button, [data-filter], .seg button, .seg label span { border-radius: var(--r-pill); }
.chip { padding: 0 10px; font-weight: 700; }
.toast-act { text-decoration: none; background: color-mix(in srgb, var(--toast-ink) 14%, transparent); border-radius: var(--r-pill); padding: 4px 10px; font-weight: 700; }   /* audit 21: an action, not a hyperlink */
.toast-act:hover { background: color-mix(in srgb, var(--toast-ink) 22%, transparent); }
.drawer, .modal-in { overscroll-behavior: contain; }   /* audit 11: wheel scroll stays inside the dialog */
.page-body { scroll-padding-top: 72px; scroll-padding-bottom: 80px; }   /* audit 10: a focused control is never left under the sticky bars */
.radio-cards label, .choice, .drop, .map-card, .fp-list, .empty { border-radius: var(--r-card); }
.callout--info { border-color: transparent; }
.btn--primary .ic, .side-new .ic { color: inherit; }

/* ---------- DP1: date-range picker (Run history). A button that reads like a field, a popover with presets and one month ---------- */
.field--dates { position: relative; }
.date-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--h-md); min-width: 240px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line-ctl); background: var(--surface); color: var(--ink-3); font-weight: 600; text-align: left; }
.date-btn .ic { color: var(--ink-3); } .date-btn.is-set { color: var(--ink); } .date-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dp { position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; display: grid; grid-template-columns: 150px 1fr; gap: 0; background: var(--surface); border-radius: var(--r-dialog); box-shadow: var(--shadow-2); overflow: hidden; }
.dp-presets { display: grid; align-content: start; gap: 2px; padding: 12px 10px; background: var(--surface-2); border-right: 1px solid var(--line); }
.dp-preset { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--r-pill); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.dp-preset:hover { background: var(--hover); color: var(--ink); } .dp-preset[aria-current="true"] { background: var(--ink); color: var(--bg); }
.dp-cal { padding: 12px 14px 12px; width: 318px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.dp-title { font-weight: 700; font-size: 14px; }
.dp-head .icon-btn { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-2); }
.dp-head .icon-btn:hover { background: var(--hover); color: var(--ink); }
.dp-wd, .dp-days { display: grid; grid-template-columns: repeat(7, 40px); }
.dp-wd span { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); padding: 4px 0 6px; }
.dp-days { row-gap: 2px; }
.dp-day { height: 36px; border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; color: var(--ink); position: relative; }
.dp-day.is-out { color: var(--ink-3); opacity: .55; }
.dp-day:hover { background: var(--hover); }
.dp-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.dp-day.is-in { background: var(--accent-soft); border-radius: 0; color: var(--ink); opacity: 1; }
.dp-day.is-from, .dp-day.is-to { background: var(--ink); color: var(--bg); opacity: 1; border-radius: var(--r-pill); }
.dp-day.is-from.is-in { border-radius: var(--r-pill) 0 0 var(--r-pill); } .dp-day.is-to.is-in { border-radius: 0 var(--r-pill) var(--r-pill) 0; } .dp-day.is-from.is-to { border-radius: var(--r-pill); }
.dp-day.is-from.is-in.is-to { border-radius: var(--r-pill); }
.dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-sum { flex: 1; font-size: 13px; color: var(--ink-2); }

/* ---------- PLAN-UI: Plans list, the plan page (builder, review, live, report), the Error catalog ---------- */
.pl-steps { display: grid; gap: 10px; }
.pl-step { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px 14px 18px; }
.pl-n { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--neutral-fill); color: var(--neutral-on); font-variant-numeric: tabular-nums; flex: none; }
.pl-tick { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.pl-tick .ic { width: 15px; height: 15px; }
.pl-tick--ok { background: var(--ok-fill); color: var(--ok-on); }
.pl-tick--neutral { background: var(--neutral-fill); color: var(--neutral-on); }   /* done with failed files: the plan went on */
.pl-tick--bad { background: var(--bad-fill); color: var(--bad-on); }
.pl-main { min-width: 0; display: grid; gap: 3px; }
.pl-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-head b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-head h2 { font-size: 15px; font-weight: 700; }
.pl-dir { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--neutral-fill); color: var(--neutral-on); font-size: 12px; font-weight: 700; flex: none; }
.pl-dir .ic { width: 13px; height: 13px; }
.pl-line { color: var(--ink-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; overflow-wrap: anywhere; }
.pl-line .pl-conn { color: var(--ink-3); }
.pl-line .pl-conn::before { content: "Connection "; }
.conn-opt.is-off { opacity: .45; }   /* PLAN-UI: a plan runs on one connection; the others are shown but cannot be picked */
.pl-line .meter { width: 140px; flex: none; }
.pl-acts { display: flex; gap: 2px; align-items: center; }
.pl-acts .icon-btn { width: 34px; height: 34px; color: var(--ink-2); background: var(--btn-fill); }
.pl-acts .icon-btn + .icon-btn { margin-left: 4px; }
.pl-acts .icon-btn:hover { background: var(--btn-fill-hover); color: var(--ink); }
.pl-acts .icon-btn:disabled { opacity: .35; }
.ic--up, .ic--down { transform: rotate(90deg); }   /* a left chevron turned clockwise points up, a right one down */
.pl-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.pl-totals { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pl-totals > div { display: grid; gap: 1px; min-width: 90px; }
.pl-totals b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pl-totals span { color: var(--ink-3); font-size: 13px; }
.pl-folder { overflow-wrap: anywhere; max-width: 320px; }
.pl-check { display: inline-flex; gap: 6px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--ok); max-width: 260px; }
.pl-check .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; margin-top: 6px; }
.pl-check--neutral { color: var(--ink-3); } .pl-check--bad { color: var(--bad); }
.tag { white-space: nowrap; }
.pl-keys .check { align-items: flex-start; }
.pl-keys .check > span { display: grid; gap: 3px; }
.pl-keys-sub { color: var(--ink-2); font-size: 13px; }
.pl-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pl-grid { display: grid; gap: 14px; }   /* owner: every card as wide as the banners; the current step's block sits above the list */
.pl-rows { display: grid; }
.pl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); }
.pl-row:first-child { border-top: 0; }
.pl-row.is-running { background: var(--accent-soft); }
.pl-live-line { margin: 8px 0 6px; }
.pl-live .lanes { display: grid; gap: 2px; }
.pl-live .lane { grid-template-columns: 18px minmax(0, 1fr) 120px 70px; }
.pl-rep .card-head { align-items: center; }
.pl-rep .card-head .actions { flex: none; }
.pl-rep-body { padding: 0 18px 16px; display: grid; gap: 10px; }
.pl-kinds { display: grid; gap: 6px; }
.pl-kinds li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-2); font-size: 13.5px; }
.pl-kinds li > span:first-child { color: var(--ink); }
.tag--neutral { background: var(--neutral-fill); color: var(--neutral-on); }
.tag--warn { background: var(--warn-fill); color: var(--warn-on); }
.tag--bad { background: var(--bad-fill); color: var(--bad-on); }
.ec-samples { display: grid; gap: 8px; padding: 18px 20px; }
.ec-samples li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.ec-samples li .ic { color: var(--ink-3); }
.ec-samples li.muted { grid-template-columns: 1fr; }

/* ---------- DOCCONTROL-UI: the Document Control page, the document drawer, the Convert to PDF changes drawer ---------- */
.dcd-sec { display: grid; gap: 10px; }
.dcd-sec + .dcd-sec { padding-top: 14px; border-top: 1px solid var(--line); }
.dcd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dcd-head h3 { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dcd-sec .dl > div { grid-template-columns: 180px 1fr; }
.dcd-sec .dl dd { overflow-wrap: anywhere; }
.dcd-sec .callout { padding: 10px 12px; }
.dcf-list { display: grid; gap: 8px; margin-top: 8px; }
.dcf-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.dcf-row.is-review { background: var(--warn-soft); }
.dcf-sel { display: grid; place-items: center; height: 24px; }
.dcf-sel input { margin: 0; accent-color: var(--accent); }
.dcf-main { display: grid; gap: 3px; min-width: 0; }
.dcf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dcf-line, .dcf-code { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.dcf-code b { color: var(--ink); font-weight: 600; }
#dcToolbar .bulkbar { margin-bottom: 0; }
/* the wizard: the third choice and Choose documents */
.choice-row--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }   /* three choices, or two when a feature is off: the row stays full */
@media (max-width: 1099px) { .choice-row--3 { grid-template-columns: 1fr 1fr; } }
.dir-hint { padding-top: 2px; }
.dcp-switch { padding: 14px 18px; }
.dcp-switch .check { align-items: flex-start; }
.dcp-switch .check > span { display: grid; gap: 3px; }
.dcp-switch .check input { width: 18px; height: 18px; }
.dcp-switch-sub { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.dcp-card { display: grid; }
.dcp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 10px; flex-wrap: wrap; }
.dcp-head h2 { font-size: 15px; font-weight: 700; }
.dcp-head .sub { font-size: 13px; max-width: 60ch; }
.dcp-head .search { margin-left: auto; min-width: 260px; }
.dcp-state { padding: 0 18px 10px; }
.dcp-error { margin: 0 18px 12px; }
.dcp-card .table-wrap--tall { max-height: 420px; border-top: 1px solid var(--line); }
.dcp-foot { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dcp-foot .sub { font-size: 13px; }
.dcp-more { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.drop--sm { padding: 22px 24px; gap: 4px; }
.drop--sm .ic--xl { width: 24px; height: 24px; }
.drop--sm b { font-size: 14px; }
.rv-ids { display: block; margin-top: 6px; overflow-wrap: anywhere; color: var(--ink-2); font-size: 12px; }

/* ---------- BETA-UI: early access per person. A feature that is off is not shown; a feature on shows a small Beta tag ---------- */
html:not([data-doc-control="1"]) [data-feature="doccontrol"] { display: none !important; }
.tag--beta { flex: none; font-size: 10px; line-height: 16px; padding: 0 6px; background: var(--accent-soft); color: var(--accent); }
.side-nav a:has(.tag--beta) { padding-right: 4px; gap: 10px; }   /* "Document Control" plus the tag fit the 208 px link; the pill's round end is the breathing room */
.side-nav a .tag--beta { margin-left: -6px; font-size: 9.5px; line-height: 15px; padding: 0 4px; }
.side-nav a .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-rail="1"] .side-nav a .tag--beta { display: none; }
.side-nav { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }   /* the Beta tag never widens the nav track: the label clips instead */
@media (max-width: 1100px) { .side-nav a .tag--beta { display: none; } }   /* the icon rail has no room for the tag; the title attribute still names the page */
.choice .tag--beta, .menu-item .tag--beta { margin-left: 8px; }
.team-beta-line { margin: -4px 0 10px; }
.team-beta { margin-left: 6px; }

/* MR1: My reports (Account): one wide block, a list that wraps; no table, no sideways scroll at 900 to 1920 */
.set-sec--wide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.settings-body:has(> .set-sec--wide:not([hidden])) { max-width: none; }   /* the other panels are forms and stay at 760px */
.my-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.my-rep { padding: 14px 16px; border-radius: var(--r-card, 14px); background: var(--surface-2); display: grid; gap: 8px; min-width: 0; }
.my-rep-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.my-rep-when { color: var(--ink-2); font-size: 13px; margin-right: 4px; }
.my-rep-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; max-width: 80ch; }
.my-rep--long:not(.is-open) .my-rep-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.my-rep .btn { justify-self: start; }
.my-rep-page { margin: 0; }

/* PLAN-FLOW: a plan step in the wizard: the connection line, the plan's steps beside the wizard, the step states */
.conn-line { color: var(--ink-2); margin: -10px 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conn-line b { color: var(--ink); font-weight: 600; }
.wiz.has-plan { grid-template-columns: 220px minmax(0, 1fr) 264px; }
.wiz.has-plan > .rail { grid-column: 1; } .wiz.has-plan > .wiz-main { grid-column: 2; } .wiz.has-plan > .plan-side { grid-column: 3; grid-row: 1; }   /* the panel is the third column whatever the markup order */
.plan-side { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: 16px 16px 14px; display: grid; gap: 10px; align-content: start; position: sticky; top: 8px; }
.plan-side .sub { font-size: 13px; }
.ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.ps-row.is-adding { background: var(--accent-soft); }
.ps-n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--neutral-fill); color: var(--neutral-on); font-variant-numeric: tabular-nums; }
.ps-row.is-adding .ps-n { background: var(--accent); color: var(--accent-ink); }
.ps-main { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.ps-main b { font-weight: 600; }
.ps-main span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-main .chip { justify-self: start; margin-top: 2px; }
.pl-step .pl-head .chip { flex: none; }
.pl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1279px) { .wiz.has-plan { grid-template-columns: 220px minmax(0, 1fr); } .wiz.has-plan > .plan-side { grid-column: 1 / -1; grid-row: auto; order: -1; position: static; } .ps-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 1100px) { .wiz.has-plan { grid-template-columns: 1fr; } }

/* LONG-NAME (owner bug, 2026-10-23): a 150-character mapping-file name never runs under the chip or the button: one line, an ellipsis,
   the full name on hover (title); on the plan report, the live rows, the builder cards, the steps panel; the Review table already clips its file names (.tbl .file) */
.pl-head { min-width: 0; flex: 1 1 auto; }
.pl-head > div { min-width: 0; }
.pl-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rep .card-head .pl-head { flex: 1 1 auto; min-width: 0; }
.pl-rep .card-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-rep .card-head .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* DRAFTS: the Continue / Discard callout on Home, New migration and a plan */
.draft-callout .banner-acts { display: flex; gap: 8px; flex: none; align-items: center; }
.draft-callout .err3 { min-width: 0; }

/* REDL-NOW: the folder choice of Download again; PREV-FOLDER: the box on Choose files */
.redl-pick { margin: 6px 0 0 28px; }
.redl-folder .hint { display: block; font-weight: 400; }
#redlDialog [data-redl="others"] { margin-top: 10px; }
.prev-folder { display: inline-flex; margin-left: 8px; }

/* MULTICONN: the plan's connections as pills; the route of a step; the connection list of a plan step */
.pl-conns { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.pl-route { color: var(--ink); font-weight: 600; }
.pl-route::after { content: " \00b7"; color: var(--ink-3); font-weight: 400; }
#pcList { display: grid; gap: 6px; }

/* ADMIN-TEAM-SETTINGS (KAN-9): the Team page is people only (status strip, one sticky toolbar, 44px rows); the service settings live on the Settings page */
[data-settings-view="0"] .settings-view-only { display: none !important; }   /* the owner, or whoever holds system.maintenance: the same people who saw the cards on Team */
.page-head--tight { padding-bottom: 8px; }
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.strip-item { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-2); font-size: 13px; text-decoration: none; }
a.strip-item:hover { background: var(--btn-fill-hover); color: var(--ink); }
.strip-item .ic { width: 15px; height: 15px; color: var(--ink-3); flex: none; } .strip-item b { color: var(--ink); font-weight: 700; } .strip-item span { color: var(--ink-3); }
.strip-item.is-ok .ic { color: var(--ok); }
.strip-item.is-warn { background: var(--warn-fill); color: var(--warn-on); } .strip-item.is-warn b, .strip-item.is-warn span, .strip-item.is-warn .ic { color: var(--warn-on); }
.toolbar--sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0 8px; margin-bottom: 8px; }
.toolbar--sticky .toolbar-end { flex: none; }
.tbl-dense .tbl td { padding: 7px 12px; } .tbl-dense .tbl th { padding: 8px 12px; } .tbl-dense .cell-main span { font-size: 11.5px; } .tbl-dense .person .avatar { width: 28px; height: 28px; font-size: 11px; }
.tbl .nowrap { white-space: nowrap; }
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: start; max-width: var(--content-max); }
.st-layout > .st-main { display: grid; gap: 12px; min-width: 0; }
.st-sec { padding: 16px 18px; scroll-margin-top: 8px; }
.st-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.st-row--sub + .st-row--sub { margin-top: 14px; padding-top: 14px; box-shadow: 0 -1px 0 var(--line); }
.st-sec > .h2 { margin-bottom: 8px; }
.st-what .h2 { margin-bottom: 4px; } .st-what .hint { margin: 0; } .st-h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.st-ctl .field { margin: 0; } .st-ctl .field input:not([type="checkbox"]) { max-width: 160px; } .st-ctl .check { margin-top: 2px; }
.st-now { color: var(--ink-2); font-size: 13px; margin: 6px 0 0; }
.st-notes { margin: 4px 0 0; padding-left: 0; list-style: none; color: var(--ink-3); font-size: 12.5px; }
.st-act { align-self: end; padding-top: 22px; } .st-row--sub .st-act { padding-top: 0; align-self: start; }
.st-act--end { margin-top: 12px; }
.st-index { position: sticky; top: 8px; display: grid; gap: 2px; }
.st-index button { text-align: left; padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.st-index button:hover { background: var(--btn-fill-hover); color: var(--ink); }
@media (max-width: 1099px) { .st-layout { grid-template-columns: minmax(0, 1fr); } .st-index { display: none; } .st-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } .st-act, .st-row--sub .st-act { padding-top: 0; justify-self: start; } }

/* ---------- KAN-10: the picker's columns builder (public-next/field-builder.js, pages/doccontrol.js AM.docPicker) ---------- */
.fb-tools { display: grid; gap: 8px; padding: 12px 16px 4px; }
.fb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-gap { flex: 1 1 auto; }
.fb-line { margin: 0; }
.fb-line--bad { color: var(--bad); }
.fb-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 13px; line-height: 1.45; }
.fb-notice[hidden], .fb-panel[hidden] { display: none; }
.fb-panel { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); max-height: min(440px, 36vh); overflow: auto; overscroll-behavior: contain; }
.fb-panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-lists { display: grid; gap: 14px; }
.fb-sec { display: grid; gap: 6px; }
.fb-sec-h { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.fb-shown { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fb-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface); }
.fb-item[draggable="true"] { cursor: grab; }
.fb-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: 13.5px; }
.fb-tag { color: var(--ink-3); font-size: 12.5px; }
.fb-grip { flex: 0 0 auto; width: 12px; height: 18px; background: radial-gradient(circle, var(--ink-3) 1.3px, transparent 1.6px) 0 0 / 6px 6px; opacity: .8; }
.fb-grip--off { visibility: hidden; }
.fb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; }
.fb-field { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.fb-field:hover { background: var(--hover); }
.fb-field input { margin-top: 3px; accent-color: var(--primary-bg); }
.fb-field-t { display: grid; gap: 1px; min-width: 0; font-size: 13.5px; }
.fb-field-t b { font-weight: 600; overflow-wrap: anywhere; }
.fb-meta { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.fb-val { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* KAN-10 phase 2: the Filter bar (same panel pattern as Columns; no borders, soft fills, black primary) */
.fb-filter { max-height: min(460px, 36vh); }
.fb-chips { display: grid; gap: 4px; }
.fb-chips-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb-chip { height: auto; min-height: 26px; padding: 3px 6px 3px 10px; white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.fb-chip b { font-weight: 800; }
.fb-chip-x { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; width: 22px; height: 22px; border-radius: 999px; cursor: pointer; }
.fb-chip-x:hover { background: var(--hover); }
.fb-group { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.fb-group--in { background: var(--surface-2); margin-left: 14px; }
.fb-filter .fb-group--in .fb-group--in { background: var(--surface); }
.fb-ghead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb-rule { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-letter { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--neutral-fill); color: var(--neutral-on); }
.fb-sel { width: auto; min-width: 150px; max-width: 280px; }
.fb-in { width: 200px; max-width: 100%; }
.fb-and { color: var(--ink-3); font-size: 13px; }
.fb-tag--bad { color: var(--bad); font-size: 12.5px; font-weight: 600; }
.fb-fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-issues { margin: 0; padding-left: 18px; color: var(--bad); font-size: 13px; line-height: 1.45; }
.fb-issues[hidden], .fb-chips[hidden] { display: none; }
.fb-saved { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#dcBulk, #dcpBulk { background: var(--surface-2); color: var(--ink); }
#dcBulk .btn, #dcpBulk .btn { background: var(--btn-fill); }
#dcBulk .btn--primary, #dcpBulk .btn--primary { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }

#costCard .cost-hint { display: block; margin-top: 2px; }   /* the switch label and its hint on their own lines */