/* onboarding-board.css — the setup checklist page (#setupPage, route 'setup').
 * Owned by onboarding-owner. Tokens only (tokens.css). Prefixes: .su-* (customer
 * and shared) · .mi-* (Mesh internal, stage C6). Loaded after onboarding.css.
 * Reuses period-home's .ph-head / .ph-section-hd / .ph-card scaffolding. */

/* ── Page shell (mirrors .period-page) ── */
.su-page { flex: 1; display: none; flex-direction: column; overflow: hidden; background: var(--color-surface-0); }
.su-page.active { display: flex; }
.su-scroll { flex: 1; overflow: auto; padding: var(--space-9) var(--space-11) var(--space-13); }
.su-wrap { max-width: 980px; margin: 0 auto; }
.su-head .ph-sub { max-width: 60ch; }

/* ── Progress ── */
.su-prog-t { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.su-prog-t b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

/* ── Sections ── */
.su-section { margin-top: var(--space-12); }
.su-section .ph-section-hd { align-items: center; margin-bottom: var(--space-7); }
.su-count { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums; margin-left: var(--space-2); }
/* No overflow clip on the card: the Skip menu of the last row hangs below it.
   The first and last rows round themselves to the card's corners instead. */
.su-list > .su-row:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.su-list > .su-row:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* ── Rows: dot · title + sub · owner · status · actions ── */
.su-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 160px 168px 150px;
  align-items: start; gap: var(--space-4); padding: var(--space-8) var(--space-8);
  border-bottom: 1px solid var(--color-border); }
.su-row:last-child { border-bottom: 0; }
.su-row.is-open { background: var(--bg-info); }
.su-row .onb-review-dot { width: 16px; height: 16px; margin-top: 2px; }
.su-row .onb-review-dot.is-ok { border-color: var(--color-success); background: var(--color-success); color: var(--color-pure-white); }
.su-row-body { min-width: 0; }
/* Two lines, and everything on a line sits on that line (Tong, 09/14: "Share
   your files shares the same row with Open; the subtext shares the same row
   with Finance team and the progress bar"). The body's children are promoted
   into the row's own grid so the title can share row 1 with the action and the
   sub can share row 2 with the owner and the status. Mesh rows and the
   status-only step rows keep their single-line anatomy. */
.su-row.su-row--split > .su-row-body { display: contents; }
.su-row--split { grid-template-rows: auto auto; }
.su-row--split > .onb-review-dot { grid-row: 1; grid-column: 1; align-self: center; }
.su-row--split > .su-row-body > .su-row-t { grid-row: 1; grid-column: 2; align-self: center; }
.su-row--split > .su-row-acts { grid-row: 1; grid-column: 5; align-self: center; }
.su-row--split > .su-row-body > .su-row-s { grid-row: 2; grid-column: 2; margin-top: 0; }
.su-row--split > .su-row-own { grid-row: 2; grid-column: 3; }
.su-row--split > .su-row-st  { grid-row: 2; grid-column: 4; }
/* the chip and the bar are 26px boxes against an 18px line: lift them onto it */
.su-row--split > .su-row-own, .su-row--split > .su-row-st { align-self: start; margin-top: -6px; }
/* anything else the body carries — the ask line, the review list, the warn
   callout — falls below both, across the full width */
.su-row--split > .su-row-body > :not(.su-row-t):not(.su-row-s) { grid-row: 3; grid-column: 2 / -1; }
.su-row-t { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-strong); line-height: var(--leading-tight); }
.su-row-s { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); margin-top: var(--space-3); }
.su-row.is-done .su-row-t { color: var(--color-text-muted); }
.su-row.is-skipped .su-row-t { color: var(--color-text-subtle); text-decoration: line-through; }
.su-row.is-skipped .su-row-s { color: var(--color-text-subtle); }
.su-row-own, .su-row-st { display: flex; align-items: center; min-height: 26px; }
/* the action track sizes to its button — "Run checks" is wider than "Open",
   and a fixed second column pushed it left onto the park line (09/14) */
.su-row-acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: end; gap: var(--space-2); min-height: 26px; }
.su-row-acts > :first-child:last-child { grid-column: 1; }
.su-row .onb-review { max-width: 60ch; }
/* Warning state: a condition the person must fix — no dismiss, the task cannot complete around it */
.su-warn { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  max-width: 64ch; border: 1px solid var(--color-warning); border-left-width: 4px; border-radius: var(--radius-control); background: var(--bg-warning); color: var(--color-text-strong); }
.su-warn-ico { flex-shrink: 0; margin-top: 1px; color: var(--color-warning); }
.su-warn-b { flex: 1; min-width: 0; }
.su-warn-h { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-warning); letter-spacing: .02em; text-transform: uppercase; }
.su-warn-t { font-size: var(--text-sm); line-height: var(--leading-normal); margin-top: 2px; }
.su-btn--warn { flex-shrink: 0; border-color: var(--color-warning); color: var(--color-warning); background: var(--color-surface-0); }
.su-btn--warn:hover { background: var(--bg-warning); }
/* ── Mesh's question inside the task's own window: a panel down the right,
   the way the query panel opens beside the integration detail. The modal is
   laid out as head / body + panel / foot without touching index.html. ── */
.up-modal.has-ask { display: grid; grid-template-columns: minmax(0, 1fr) 296px; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1000px, 94vw); }
/* the panel adds its own width — it never eats the body's (each modal sets its own) */
#suDataRoom .up-modal.has-ask { width: min(900px, 94vw); }
#suPolicySource .up-modal.has-ask, #suJournal .up-modal.has-ask { width: min(1040px, 94vw); }
#suTeam .up-modal.has-ask { width: min(1130px, 94vw); }
.up-modal.has-ask > .up-hd, .up-modal.has-ask > .up-ft { grid-column: 1 / -1; }
.up-modal.has-ask > .up-bd { grid-column: 1; grid-row: 2; min-height: 0; }
.su-askpanel { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--color-border); background: var(--bg-warning); }
.su-ap-hd { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--bg-warning-strong); }
.su-ap-ic { flex-shrink: 0; margin-top: 1px; color: var(--color-warning); }
.su-ap-h { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-warning); }
.su-ap-s { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); }
.su-ap-bd { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); }
.su-ap-msg { padding: var(--space-4); border: 1px solid var(--bg-warning-strong); border-radius: var(--radius-control); background: var(--color-surface-0); }
.su-ap-who { font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.su-ap-note { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-strong); line-height: var(--leading-normal); }
.su-ap-hint { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); }
.su-ap-ft { padding: var(--space-5); border-top: 1px solid var(--bg-warning-strong); }
.su-ap-lbl { display: block; font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.su-ap-reply { margin-top: var(--space-2); min-height: 68px; }
.su-ap-send { width: 100%; margin-top: var(--space-3); justify-content: center; }
.su-ap-none { margin: var(--space-3) auto 0; }

/* What Mesh asked, on a row whose drill-in is not one of ours — one quiet line */
.su-ask { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  max-width: 64ch; border-left: 3px solid var(--color-warning); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--bg-warning); }
.su-ask-ic { flex-shrink: 0; color: var(--color-warning); align-self: center; }
.su-ask-b { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--color-text); line-height: var(--leading-normal); }
.su-ask-t { color: var(--color-text-strong); }
.su-ask-btn { display: inline; margin: 0 0 0 var(--space-2); }
.su-tm-warn { margin: 0 0 var(--space-4); max-width: none; }
.su-tm-ft-sum.is-warn { color: var(--color-warning); font-weight: var(--weight-medium); }

/* ── The status chip as a segmented progress bar once a criterion is met (one segment per criterion) ── */
.su-rowprog { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); cursor: default; min-width: 0; }
.su-rowprog-row { display: inline-flex; align-items: center; gap: var(--space-3); }
.su-rowprog-miss { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.su-rowsegs { display: inline-flex; gap: 3px; }
.su-rowseg { width: 18px; height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-border); transition: background var(--dur-fast); }
.su-rowseg.is-ok { background: var(--color-brand-500); box-shadow: none; }
.su-rowprog .su-prog-t { white-space: nowrap; }

/* ── Owner chip (the .pol-asn-chip anatomy with a square icon tile) ── */
.su-own { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; max-width: 100%;
  padding: 0 var(--space-3) 0 var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface-0); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-strong); }
.su-own-av { width: 20px; height: 20px; border-radius: var(--radius-control); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs2); font-weight: var(--weight-bold); color: var(--color-pure-white); }
.su-own-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-own--finance .su-own-av { background: var(--color-brand-500); }
.su-own--it .su-own-av { background: var(--color-extra-secure-sky); }
.su-own--mesh .su-own-av { background: var(--color-extra-reliable-blue); }

/* ── Status pill (the .pol-cr-stage pattern) ── */
.su-pill { display: inline-flex; align-items: center; padding: 2px var(--space-3); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--color-surface-2); color: var(--color-text-muted); }
.su-pill--progress { background: var(--bg-info); color: var(--color-brand-500); }
.su-pill--waiting  { background: var(--bg-warning); color: var(--color-warning); }
.su-pill--done     { background: var(--bg-success); color: var(--color-success); }
.su-pill--skipped  { background: var(--color-surface-1); color: var(--color-text-subtle); }
/* Mesh asked for more on this task and is waiting (js/19 onbReopen) */
.su-pill--needs    { background: var(--bg-warning-strong); color: var(--color-warning); }

/* ── Row actions ── */
.su-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-0);
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text); cursor: pointer; white-space: nowrap; }
.su-btn:hover { background: var(--color-surface-1); }
.su-btn--primary { background: var(--color-brand-500); border-color: var(--color-brand-500); color: var(--color-pure-white); }
.su-btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.su-btn--ghost { border-color: transparent; background: none; color: var(--color-text-muted); }
.su-btn--ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
.su-btn:disabled { opacity: .45; cursor: not-allowed; }
.su-btn--primary:disabled:hover { background: var(--color-brand-500); border-color: var(--color-brand-500); }
/* Skip is not a resting control (09/14): a row at rest carries one status and
   one action. The reason to park a task reads as a plain line inside the row
   being worked on, in the task's own words. */
/* It sits under the button in the actions column and its space is always
   reserved — hidden, not removed, so hovering a row never moves anything
   (Tong, 09/14: "i don't like the height shifting"). */
.su-rowskip { margin: 0; min-width: 0; max-width: 100%; height: 16px; line-height: 16px; font-size: var(--text-xs2);
  color: var(--color-text-subtle); visibility: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* It shares the button's row, in the actions column's spare track, so the slot
   costs no height at all — nothing moves on hover and no row is taller. */
.su-row-acts > .su-rowskip { grid-column: 1; grid-row: 1; justify-self: end; }
.su-row-acts > :not(.su-rowskip) { grid-column: 2; grid-row: 1; }
.su-row:hover .su-rowskip, .su-row:focus-within .su-rowskip, .su-row.is-open .su-rowskip { visibility: visible; }
.su-rowskip:hover { color: var(--color-text-strong); }
.su-rowskip > .onb-relink { color: var(--color-text-muted); }
.su-rowskip > .onb-relink:hover { color: var(--color-text-strong); }

/* ── Mesh's part: the status-only group row ──────────────────────────────
   No row is numbered any more (09/14). The one numbered badge left in the
   module is the welcome card's three moves, which are a sequence in prose. */
.su-stepn { width: 22px; height: 22px; margin: -2px auto 0; border-radius: 50%; border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-0); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.su-steprow .su-row-t { font-weight: var(--weight-semibold); }
.su-steprow .su-row-s { max-width: 64ch; }
.su-steprow-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ── Later group (collapsed until opened): the same .ph-section-hd heading as the groups above, made clickable ── */
.su-later-hd { width: 100%; border: 0; background: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; color: inherit; }
.su-later-hd:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
.su-later-chev { display: inline-flex; vertical-align: middle; margin-left: var(--space-2); color: var(--color-text-subtle);
  transition: transform var(--dur-fast); transform: rotate(-90deg); }
.su-later.is-open .su-later-chev { transform: none; }

/* ── Unconfirmed-count banner on the two mapping modals (the .pol-review-banner shape) ── */
.su-banner { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0;
  padding: var(--space-3) var(--space-5); margin: 0 0 var(--space-4);
  background: var(--bg-warning); border: 1px solid var(--bg-warning-strong);
  border-radius: var(--radius-card); color: var(--color-warning); }
.su-banner-ico { display: inline-flex; color: var(--color-warning); flex-shrink: 0; }
.su-banner-t { flex: 1; font-size: var(--text-sm); color: var(--color-text); line-height: var(--leading-normal); }
.su-banner-t strong { color: var(--color-warning); font-weight: var(--weight-bold); }
.su-banner-btn { flex-shrink: 0; padding: var(--space-1) var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--color-warning); background: var(--color-surface-0); color: var(--color-warning);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit; }
.su-banner-btn:hover { background: var(--bg-warning-strong); }
/* per-sheet count inside the schema tab's (N) */
.su-sch-open { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  margin-left: var(--space-2); padding: 0 var(--space-1); border-radius: var(--radius-pill);
  background: var(--bg-warning-strong); color: var(--color-warning); font-size: var(--text-xs2); font-weight: var(--weight-bold); }

/* ── Welcome screen (first boot of `/`, T10): three moves, the Mesh team, Start ── */
.su-welcome .ph-sub { max-width: 52ch; }
.su-wl-moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-9); }
.su-wl-move { padding: var(--space-6) var(--space-6) var(--space-7); }
.su-wl-move .su-stepn { margin: 0 0 var(--space-4); }
.su-wl-move-t { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-strong); line-height: var(--leading-tight); }
.su-wl-move-s { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.su-wl-team { margin-top: var(--space-10); }
.su-wl-team-h { font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.su-wl-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.su-wl-person { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.su-wl-av { width: 36px; height: 36px; border-radius: 50%; font-size: var(--text-sm); background: var(--color-extra-reliable-blue); }
.su-wl-name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-strong); }
.su-wl-role { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); }
.su-wl-acts { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-10); }
.su-wl-start { height: 36px; padding: 0 var(--space-8); font-size: var(--text-sm); }
.su-wl-skip { margin: 0; }

/* ── Documents (#documentsPage after setup is complete, T12): four read-only folders ── */
.su-docs-folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-9); }
.su-docs-folder { padding: var(--space-5) var(--space-6) var(--space-4); min-width: 0; }
.su-docs-folder-hd { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
.su-docs-folder-ic { width: 28px; height: 28px; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center;
  background: var(--bg-info); color: var(--color-brand-500); grid-row: span 2; }
.su-docs-folder-t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.su-docs-folder-s { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.su-docs-list { margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.su-docs-file { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-surface-2); }
.su-docs-file:last-child { border-bottom: 0; }
.su-docs-body { min-width: 0; }
.su-docs-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-docs-meta { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 1px; }
.su-docs-kind { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.su-docs-empty { margin-top: var(--space-4); padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-subtle); }

/* ── Support line and foot ── */
.su-support { margin-top: var(--space-10); font-size: var(--text-sm); color: var(--color-text-muted); }
.su-support-link { color: var(--color-brand-500); font-weight: var(--weight-medium); text-decoration: none; border-bottom: 1px solid currentColor; }
.su-support-link:hover { color: var(--color-brand-hover); }
.su-support + .su-foot { margin-top: var(--space-3); }
.su-foot { margin-top: var(--space-10); font-size: var(--text-xs); color: var(--color-text-subtle); }
.su-foot .onb-relink { display: inline; margin: 0; }
.su-foot .su-reset { color: var(--color-text-muted); }

/* ── Send to Mesh: the customer's finale, at the foot of Your part ── */
.su-send { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); }
.su-send.is-sent { border-style: solid; border-color: var(--bg-success-strong); background: var(--bg-success); }
.su-send-t { flex: 1; font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); max-width: 72ch; }
.su-send.is-sent .su-send-t { color: var(--color-text); }
.su-send-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%; background: var(--color-success); color: var(--color-pure-white); }
.su-send-btn { height: 32px; padding: 0 var(--space-7); font-size: var(--text-sm); }

/* ── The hero in the header after the handoff (the .ph-empty-hero shape, left-aligned) ── */
.su-hero { align-items: flex-start; text-align: left; gap: var(--space-2); margin-top: var(--space-5);
  padding: var(--space-8) var(--space-9); background: var(--bg-success); border-color: var(--bg-success-strong); box-shadow: none; }
.su-hero .ph-empty-t { font-size: var(--text-lg); }
.su-hero .ph-empty-s { max-width: 64ch; color: var(--color-text); }
.su-hero-ic { width: 36px; height: 36px; margin-bottom: var(--space-1); background: var(--bg-success-strong); color: var(--color-success); }
.su-hero--ready { background: var(--bg-info); border-color: var(--bg-info-strong); }
.su-hero--ready .su-hero-ic { background: var(--bg-info-strong); color: var(--color-brand-500); }
.su-hero-btn { margin-top: var(--space-3); }

/* ── Data Room (#suDataRoom): one column — drop zone on top, the file list under it ── */
.up-modal.su-dr-modal { width: 580px; }
.su-dr { display: flex; flex-direction: column; gap: var(--space-4); }
.su-dr .up-drop { padding: var(--space-6) var(--space-4); }
.su-dr .up-drop.over { border-color: var(--color-brand-500); background: var(--bg-info); }
.su-dr .up-drop-title { font-size: var(--text-sm); }
.su-dr-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-text-muted); }
.su-dr-hd b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.su-dr-hd-s { font-size: var(--text-xs); color: var(--color-text-subtle); }
.su-dr-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.su-dr-file { display: grid; grid-template-columns: 30px minmax(0, 1fr) 176px 28px; align-items: center; gap: var(--space-3);
  padding: var(--space-3); }
.su-dr-file + .su-dr-file { border-top: 1px solid var(--color-border); }
.su-dr-ico { width: 30px; height: 30px; border-radius: var(--radius-control); background: var(--color-surface-2); color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.su-dr-file.is-new .su-dr-ico { background: var(--bg-success-strong); color: var(--color-success); }
.su-dr-body { min-width: 0; }
.su-dr-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-dr-meta { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 1px; }
.su-dr-just { color: var(--color-success); font-weight: var(--weight-medium); }
.su-dr-sel { height: 28px; width: 100%; padding: 0 var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text-strong); font: inherit; font-size: var(--text-xs); }
.su-dr-sel:focus { border-color: var(--color-brand-500); box-shadow: var(--focus-ring); outline: none; }
.su-dr-x { width: 28px; height: 28px; border: 0; background: none; color: var(--color-text-subtle); border-radius: var(--radius-control);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.su-dr-x:hover { background: var(--color-surface-2); color: var(--color-text-strong); }
.su-dr-x:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.su-dr-empty { padding: var(--space-5) var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
.su-dr-tip { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.su-dr-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3);
  border-top: 1px solid var(--color-border); }
.su-dr-none-h { flex-basis: 100%; font-size: var(--text-xs); color: var(--color-text-muted); }
.su-dr-nones { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.su-dr-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); }
.su-dr-check input { accent-color: var(--color-brand-500); margin: 0; }
.su-dr-foot-s { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ── Shared stepper for the intake modals (the #asnModal recipe: sticky, clickable pips) ── */
#suPolicySource .up-modal { height: min(560px, 86vh); }
#suPolicySource .up-bd { padding-top: 0; }
.su-stepper { display: flex; align-items: center; position: sticky; top: 0; z-index: 6; background: var(--color-surface-0);
  padding: var(--space-6) 0 var(--space-5); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.su-step { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-subtle); white-space: nowrap; cursor: pointer; }
.su-step:hover { color: var(--color-text); }
.su-step.active { color: var(--color-text-strong); }
.su-step.done { color: var(--color-brand-500); }
.su-step-num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: var(--color-surface-0);
  color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; }
.su-step.active .su-step-num { border-color: var(--color-brand-500); color: var(--color-brand-500); }
.su-step.done .su-step-num { background: var(--color-brand-500); border-color: var(--color-brand-500); color: var(--color-pure-white); }
.su-step-line { flex: 1 1 auto; min-width: 16px; height: 1.5px; background: var(--color-border); margin: 0 var(--space-4); }
.su-ps-lead { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); margin-bottom: var(--space-6); max-width: 64ch; }
.su-ps-opt { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-7); margin-bottom: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-0); }
.su-ps-opt.is-set { border-color: var(--color-success); }
.su-ps-opt-h { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.su-ps-opt-h b { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.su-ps-opt-h em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-subtle); }
.su-ps-acts { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.su-ps-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-success); font-weight: var(--weight-medium); }
.su-ps-notes { width: 100%; box-sizing: border-box; margin-top: var(--space-2); padding: var(--space-3) var(--space-4); resize: vertical; min-height: 96px;
  border: 1px solid var(--color-border); border-radius: var(--radius-control); font-family: inherit; font-size: var(--text-sm); color: var(--color-text-strong);
  line-height: var(--leading-normal); background: var(--color-surface-0); outline: none; }
.su-ps-notes:focus { border-color: var(--color-brand-500); box-shadow: var(--focus-ring); }
.su-ps-notes::placeholder { color: var(--color-text-subtle); }
#suPolicySource .up-ft { justify-content: flex-start; }
.su-ps-sum { flex: 1; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); min-width: 0; }
.su-ps-sum.is-set { color: var(--color-success); }

/* ── Team (#suTeam): the sheet or several people at once, then every role confirmed ── */
#suTeam .up-modal { width: 840px; height: min(640px, 88vh); }
#suTeam .up-bd { padding-top: 0; }
.su-tm-lead { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); margin-bottom: var(--space-6); max-width: 72ch; }
.su-tm-two { display: flex; flex-direction: column; gap: var(--space-6); }
.su-tm-col { display: flex; flex-direction: column; gap: var(--space-3); }
.su-tm-col + .su-tm-col { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.su-tm-col .su-tm-drop { padding: var(--space-6) var(--space-4); }
.su-tm-col-h { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.su-tm-col-s { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); margin-top: calc(-1 * var(--space-2)); }
.su-tm-drop.over { border-color: var(--color-brand-500); background: var(--bg-info); }
/* "Use ‹file› from your files" — the Team modal's button, shared with the policy-source modal (.su-usefile) */
.su-usefile, .su-tm-usefile { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); text-align: left;
  border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-1); color: var(--color-text);
  font-family: inherit; font-size: var(--text-xs); cursor: pointer; }
.su-usefile:hover, .su-tm-usefile:hover { border-color: var(--color-brand-500); background: var(--bg-info); }
.su-usefile b, .su-tm-usefile b { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.su-usefile .su-dr-ico, .su-tm-usefile .su-dr-ico { flex-shrink: 0; }
.su-ps-files { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.su-tm-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.su-tm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 124px 24px; gap: var(--space-2); align-items: center; }
.su-tm-in { width: 100%; height: 28px; padding: 0 var(--space-3); box-sizing: border-box; border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface-0); font-family: inherit; font-size: var(--text-xs); color: var(--color-text-strong); outline: none; }
.su-tm-in:focus { border-color: var(--color-brand-500); box-shadow: var(--focus-ring); }
.su-tm-in::placeholder { color: var(--color-text-subtle); }
.su-tm-x { width: 24px; height: 24px; border: 0; background: none; color: var(--color-text-subtle); font-size: var(--text-md); line-height: 1; cursor: pointer; border-radius: var(--radius-control); font-family: inherit; }
.su-tm-x:hover { background: var(--color-surface-2); color: var(--color-text); }
.su-tm-addrow { align-self: flex-start; font-size: var(--text-xs); }
.su-tm-paste { width: 100%; box-sizing: border-box; min-height: 56px; padding: var(--space-2) var(--space-3); resize: vertical; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-control); font-family: inherit; font-size: var(--text-xs); color: var(--color-text-strong); line-height: var(--leading-normal); background: var(--color-surface-0); outline: none; }
.su-tm-paste:focus { border-color: var(--color-brand-500); box-shadow: var(--focus-ring); }
.su-tm-paste::placeholder { color: var(--color-text-subtle); }
.su-tm-invite { display: flex; gap: var(--space-2); }
.su-tm-invite-in { flex: 1; min-width: 0; height: 36px; padding: 0 var(--space-4); box-sizing: border-box; border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--color-surface-2); color: var(--color-text-strong); font: inherit; font-size: var(--text-sm); }
.su-tm-invite-in::placeholder { color: var(--color-text-subtle); }
.su-tm-invite-in:focus { background: var(--color-surface-0); border-color: var(--color-brand-500); box-shadow: var(--focus-ring); outline: none; }
.su-tm-invite-btn { height: 36px; }
.su-tm-access-h { margin-top: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.su-tm-access { display: flex; flex-direction: column; margin-top: var(--space-1); }
.su-tm-acc { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; }
.su-tm-acc-n { font-size: var(--text-sm); color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-tm-acc-n em { font-style: normal; color: var(--color-text-subtle); }
.su-tm-acc-e { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-tm-acc.is-pending .su-tm-acc-n { color: var(--color-text-muted); }
.su-tm-acc-r { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.su-tm-acc-av--pending { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--color-border-strong); display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); }
.su-tm-staged { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.su-tm-shape { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.su-tm-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-control); background: var(--bg-warning); color: var(--color-warning); font-size: var(--text-xs); line-height: var(--leading-normal); }
.su-tm-banner.is-ok { background: var(--bg-success); color: var(--color-success); }
.su-tm-banner b { font-weight: var(--weight-semibold); }
.su-tm-banner-t { flex: 1; }
.su-tm-banner .su-btn { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-surface-0); }
/* the roles legend on the Confirm roles step, and the "Learn more about roles" link (T8) */
.su-tm-legend { display: flex; align-items: flex-start; gap: var(--space-5); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-1); }
.su-tm-legend-h { flex: 0 0 auto; padding-top: 1px; font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.su-tm-legend-rows { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.su-tm-legend-i { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); min-width: 0; white-space: nowrap; }
.su-tm-legend-i .acl-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.su-tm-legend-i b { flex: 0 0 104px; font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.su-tm-legend-i > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.su-tm-roleslink { flex: 0 0 auto; margin: 0; align-self: center; white-space: nowrap; }
.su-tm-roleslink--inline { display: inline; margin: 0; font-size: inherit; }
.su-tm-tbl { border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.su-tm-tbl table.acl thead th { border-radius: 0; }
.su-tm-tbl table.acl td { vertical-align: middle; }
.su-tm-tbl table.acl tbody tr:last-child { border-bottom: 0; }
.su-tm-tbl table.acl tbody tr.is-added { opacity: .7; }
.su-tm-dept { font-size: var(--text-xs); color: var(--color-text-muted); }
.su-tm-rolewrap { position: relative; display: inline-block; }
.su-tm-td-act { white-space: nowrap; text-align: right; }
.su-tm-td-act .su-btn { margin-left: var(--space-2); }
.su-tm-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-success); }
.su-tm-review { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.su-tm-review-it { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control);
  font-size: var(--text-xs); color: var(--color-text); line-height: var(--leading-normal); }
.su-tm-review-it.is-ok { color: var(--color-text-muted); }
.su-tm-review-t { flex: 1; }
#suTeam .up-ft { justify-content: flex-start; }
.su-tm-ft-sp { flex: 1; }
.su-tm-ft-sum { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ── Journal template (#suJournal, built on demand): a sample export, then the fields Mesh found ── */
#suJournal .up-modal { width: 760px; height: min(600px, 88vh); }
#suJournal .up-bd { padding-top: 0; }
#suJournal .up-ft { justify-content: flex-start; }
.su-jr-drop { padding: var(--space-7) var(--space-4); }
.su-jr-drop.over { border-color: var(--color-brand-500); background: var(--bg-info); }
.su-jr-cands { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.su-jr-cands .su-tm-col-h { margin-bottom: var(--space-1); }
.su-jr-tbl table.acl th:first-child, .su-jr-tbl table.acl td:first-child { padding-left: var(--space-5); }
.su-jr-tbl table.acl tbody tr.is-open td { background: var(--bg-warning); }
.su-jr-col { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-strong); }
.su-jr-how { font-size: var(--text-xs); color: var(--color-text-muted); }
.su-jr-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-pill);
  background: var(--bg-success); color: var(--color-success); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.su-jr-chip--open { background: var(--bg-warning-strong); color: var(--color-warning); }
.su-jr-note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); }
#suJournal .su-ps-acts { margin-top: var(--space-4); }

/* What Mesh made of what they sent — the client's half of "drafted, then confirmed" */
.su-draftrow { grid-template-columns: 28px minmax(0, 1fr); }
.su-draftrow.is-warn .onb-review-dot { border-color: var(--color-warning); }
.su-draft-cite { margin-top: var(--space-3); font-size: var(--text-xs2); font-weight: var(--weight-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand-500); }

/* ── Narrow: the fixed columns step under the title ───────────────────────
   The row's three trailing tracks (owner 160 · status 168 · action 150) are
   fixed, so every pixel lost off the window came out of the title column —
   at 800px it was 99px wide and every row read "Outpu…", "Comp…", "Journa…"
   (Tong, 09/14). Under 1080 they move to their own line beneath the body,
   which is the whole width. */
@media (max-width: 1080px) {
  .su-row { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .su-row > .su-row-own, .su-row > .su-row-st, .su-row > .su-row-acts { margin-top: var(--space-4); }
  .su-row--split > .su-row-body > .su-row-t,
  .su-row--split > .su-row-body > .su-row-s { grid-column: 2 / -1; }
  .su-row--split > .su-row-body > :not(.su-row-t):not(.su-row-s) { grid-row: 4; }
  .su-row--split > .su-row-own { grid-column: 2; grid-row: 3; align-self: center; }
  .su-row--split > .su-row-st  { grid-column: 3; grid-row: 3; align-self: center; }
  .su-row--split > .su-row-acts { grid-column: 4; grid-row: 3; align-self: center; }
  /* the status-only group rows and the customer's Mesh rows keep one body */
  .su-steprow > .su-row-body { grid-column: 2 / -1; }
  .su-steprow > .su-row-own { grid-column: 2; }
  .su-steprow > .su-row-st  { grid-column: 3; }
  .su-steprow > .su-row-acts { grid-column: 4; }
}