/* Payroll: runs, the roster and run lines.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

/* The paragraph that introduces a screen or a flow step. Was 16px on one
   screen and 12px on another; one class means one answer. */
.lede { margin: 0 0 var(--space-16); }
/* A column of fields, one per person or per line. The gap replaces a
   margin-bottom on every child. */
.field-list { display: flex; flex-direction: column; gap: var(--space-10); }
.link-quiet { color: var(--text-faint); font-size: var(--text-12); }
/* Pay-run detail (js/screens/payroll.js openRunDetail): a collapsed line is
   name, amount, state — the rest opens on click, a native <details> like the
   sign-in screen's own credential-paste disclosure, so a run of any length
   fits the panel without every line's full method/destination/rate/fee
   showing at once. */
.run-line > summary { display: flex; align-items: baseline; gap: var(--space-12); padding: var(--space-10) 0; }
.run-line-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-line-state { color: var(--text-subtle); font-size: var(--text-12); flex-shrink: 0; }
.run-line-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.run-line > .def-group { padding-bottom: var(--space-10); }
/* No lines between people (DESIGN.md: whitespace separates). */
.pr-preview-group + .pr-preview-group { margin-top: var(--space-24); }
.pr-preview-person { margin-top: var(--space-8); }
.pr-preview-person + .pr-preview-person { margin-top: var(--space-20); }
.payroll-roster-head { align-items: flex-start; gap: var(--space-16); }
.payroll-roster-head .hint { max-width: 64ch; }
.payee-readiness { display: grid; gap: var(--space-4); min-width: 0; }
.payroll-options { display: grid; gap: var(--space-4); }
.payroll-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
}
.payroll-option .option-row { min-width: 0; }
.payroll-option .option-row > span { min-width: 0; }
.payroll-option .option-row:has(input:disabled) { opacity: 0.72; cursor: not-allowed; }
.payroll-selected { margin-bottom: 0; }
.payroll-selected + .payroll-selected { padding-top: var(--space-12); }
.payroll-selected-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.payroll-selected-head label { margin-bottom: var(--space-6); }
.payroll-date { margin: var(--space-12) 0 0; padding-inline-start: var(--space-24); }
@media (max-width: 640px) {
  .payroll-option { grid-template-columns: minmax(0, 1fr); }
  .payroll-option > .link { justify-self: start; margin-inline-start: var(--space-44); }
}
.pr-tabs { margin-bottom: var(--space-20); }
@media (max-width: 900px) {
  /* Payroll carries six facts per run. Stack those rows before the whole shell
     switches to its phone layout so a narrow desktop or tablet never clips the
     status and creator columns behind the viewport. */
  #runs .row-head,
  #runs .table-header {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  #runs .row[data-run] {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: var(--space-8);
      padding: var(--space-14) var(--space-12);
      margin-bottom: var(--space-8);
      background: var(--surface-2);
    }
  #runs .row[data-run] > * { min-width: 0; max-width: 100%; }
  #runs .row[data-run] > [data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: var(--space-2);
      color: var(--text-faint);
      font-size: 11px;
    }
  #runs .row[data-run] .cell-main { flex-wrap: wrap; }
  #runs .row[data-run] .cell-main::before { flex-basis: 100%; }
}
/* The run from the payroll (R5-14): one row per person, read-only, with the
   edit arrow and the leave-out cross at its end. */
.pr-people { display: flex; flex-direction: column; }
.pr-person { padding-block: var(--space-12); }
.pr-person:first-child { border-top: 0; padding-top: 0; }
.pr-person-main { display: flex; align-items: center; gap: var(--space-10); }
.pr-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pr-person-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-foot-summary { flex: 1 1 100%; margin: 0; color: var(--text-default); }
.pr-oneoff { display: flex; align-items: center; gap: var(--space-10); margin: var(--space-8) 0 0 var(--space-36); }
.pr-oneoff-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-person > .link { margin: var(--space-8) 0 0 var(--space-36); }
.pr-changed { margin: 0; }
.pr-problem { margin: 0; }
/* Payroll footers: a hint or summary sits inside the footer's own padding on
   a line of its own, and every button on the next line is one height. base.css
   gives a button after a paragraph a top margin, which in a wrapping footer
   made the first button taller than the rest (shared fix requested). */
.run-foot-line { flex: 1 1 100%; margin: 0; }
:is(#pr-foot, .run-foot) > .btn, .run-foot-line ~ .btn { margin-top: 0; }

/* Your payrolls: one line per payroll, the same column rhythm as Pay history. The bare design-system
   row is a one-column grid, which stacked every cell. */
#payrolls-list .row { grid-template-columns: minmax(180px, 1.4fr) 110px 100px minmax(110px, 0.8fr) auto; column-gap: var(--space-16); padding: var(--space-12) 0; }
#payrolls-list .row .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  #payrolls-list .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-4); }
  #payrolls-list .row > :first-child { grid-column: 1; }
  #payrolls-list .row > [data-payroll-total] { grid-column: 2; grid-row: 1; }
  #payrolls-list .row > .section-head-actions { grid-column: 1 / -1; }
}

/* Funding on Payroll: the shortfall tile reads in the negative colour, and the banner sits clear of the tiles. */
#funding [data-funding-shortfall] { color: var(--negative-text); }
#funding-shortfall { margin-bottom: var(--space-16); }
/* Pay history: the run, its date, people, status and total (js/screens/payroll.js, react/screens/payroll). One grid for
   the header and every row; the column widths are named so they read as decisions, not numbers on a rule. */
:root {
  --runs-col-run: 180px;
  --runs-col-date: 100px;
  --runs-col-people: 90px;
  --runs-col-status: 140px;
  --runs-col-total: 100px;
}
.runs-grid { grid-template-columns: minmax(var(--runs-col-run), 1.35fr) var(--runs-col-date) var(--runs-col-people) var(--runs-col-status) minmax(var(--runs-col-total), 0.8fr); }