/* Hallmark · macrostructure: Statement Workbench · tone: clear financial document · anchor hue: blue
 * Source: SMARTPAYROLL's own payroll screens. Pre-emit code critique: P5 H4 E4 S5 R5 V4.
 */
.payroll-workflow, .payroll-result, .payroll-history {
  max-width: 800px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding-bottom: var(--space-xl);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.payroll-workflow [hidden], .payroll-result [hidden] { display: none !important; }
.payroll-workflow :is(h1,h2,h3), .payroll-result :is(h1,h2,h3), .payroll-history :is(h1,h2,h3) { color: var(--color-graphite); font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; }
.payroll-workflow h1, .payroll-result h1, .payroll-history h1 { font-size: var(--text-title); letter-spacing: -0.01em; font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-xs); }
.payroll-workflow h2, .payroll-result h2 { font-size: var(--text-section); font-weight: 600; margin: 0; }
.payroll-workflow h3, .payroll-result h3 { font-size: var(--text-base); font-weight: 600; }
.payroll-workflow .field-help, .payroll-result .field-help { color: var(--color-slate); margin: var(--space-xs) 0; font-size: var(--text-sm); }
.payroll-workflow a, .payroll-result a, .payroll-history a { color: var(--color-link); }
.payroll-workflow :is(button,input,select), .payroll-result :is(button,input) { font-family: inherit; }
:is(.payroll-workflow,.payroll-result,.payroll-history) :is(.primary,.secondary) { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 40px; border-radius: var(--radius-pill); padding: var(--space-xs) 20px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: none; }
:is(.payroll-workflow,.payroll-result,.payroll-history) .primary { color: var(--color-paper); background: var(--color-accent); border-color: var(--color-accent); }
:is(.payroll-workflow,.payroll-result,.payroll-history) .secondary { color: var(--color-link); background: var(--color-paper); border-color: var(--color-accent); }
:is(.payroll-workflow,.payroll-result) .text-button { color: var(--color-link); width: auto; min-height: 40px; padding: var(--space-xs) 0; font-size: var(--text-sm); font-weight: 600; text-decoration: none; background: none; }
:is(.payroll-workflow,.payroll-result,.payroll-history) :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
:is(.payroll-workflow,.payroll-result) button:disabled { cursor: not-allowed; opacity: 0.55; }
:is(.payroll-workflow,.payroll-result) button:active:not(:disabled) { transform: translateY(1px); }
.payroll-workflow-heading, .payroll-result-heading, .payroll-history .employee-table-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.payroll-workflow-heading > div:first-child { flex: 1 1 280px; min-width: 0; }
.payroll-workflow-heading .run-payroll-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.payroll-workflow form { margin: 0; }
.payroll-workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-lg) 0 var(--space-xl); gap: var(--space-xs); }
.payroll-workflow-steps button { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; min-width: 0; min-height: 44px; width: 100%; border: 0; border-radius: 0; background: none; text-align: left; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.payroll-workflow-step-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--color-rule-control); border-radius: var(--radius-pill); font-weight: 600; }
.payroll-workflow-steps button[data-state="current"] { color: var(--color-ink); font-weight: 700; }
.payroll-workflow-steps button[data-state="current"] .payroll-workflow-step-number { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.payroll-workflow-steps button[data-state="complete"] .payroll-workflow-step-number { border-color: var(--color-link); color: var(--color-link); }
.payroll-workflow-panel { min-width: 0; }
.payroll-workflow-section-heading, .payroll-result-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin: 0 0 var(--space-md); }
.payroll-workflow-section-heading .field-help { font-size: var(--text-xs); margin: 0 0 var(--space-2xs); }
.payroll-workflow-hero, .payroll-result-hero { border: 1px solid var(--color-rule); border-radius: var(--radius-base); background: var(--color-paper); overflow: clip; }
.payroll-workflow-period { padding: var(--space-lg); }
.payroll-workflow-schedule { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.payroll-workflow-schedule .field-help { margin: 0; font-size: var(--text-xs); }
.payroll-workflow-schedule strong { font-size: var(--text-base); font-weight: 600; }
.payroll-workflow-date-navigation { display: flex; align-items: center; gap: var(--space-sm); }
.payroll-workflow .payroll-workflow-period-arrow { border-radius: var(--radius-pill); width: 36px; min-height: 36px; height: 36px; padding: 0; flex: 0 0 36px; font-size: var(--text-section); }
.payroll-workflow-dates { display: flex; align-items: center; flex-wrap: wrap; flex: 1; gap: var(--space-xs); min-width: 0; padding-top: var(--space-2xs); }
.payroll-workflow-date { display: flex; flex-direction: column; align-items: center; min-width: 80px; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-base); background: var(--color-paper); text-align: center; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.payroll-workflow-date strong { font-size: var(--text-date); font-weight: 300; line-height: 1.15; }
.payroll-workflow-date-label { background: var(--color-chip-green); color: var(--color-ink); font-size: var(--text-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-base); font-weight: 600; margin-top: calc(var(--space-sm) * -1); margin-bottom: var(--space-xs); }
.payroll-workflow-date[data-kind="payday_on"] .payroll-workflow-date-label { background: var(--color-chip-teal); }
.payroll-workflow-date .text-button { font-size: var(--text-xs); }
.payroll-workflow-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-sm); border-top: 1px solid var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-lg); }
.payroll-workflow-actions > .secondary { margin-right: auto; }
.payroll-workflow-roster-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.payroll-workflow-roster-actions p { margin: 0; }
.payroll-workflow-roster-actions > div { display: flex; gap: var(--space-md); }
.payroll-workflow .team-table-scroll, .payroll-result .team-table-scroll, .payroll-history .team-table-scroll { width: 100%; min-width: 0; border: 0; border-radius: 0; overflow-x: auto; }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table { min-width: 0; width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table th { font-size: var(--text-sm); color: var(--color-ink); background: none; font-weight: 600; }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table :is(th,td) { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table thead th { border-bottom: 2px solid var(--color-rule-heavy); }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table tfoot :is(th,td) { border-top: 2px solid var(--color-graphite); border-bottom: 2px solid var(--color-graphite); font-weight: 700; }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table .payroll-number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.payroll-workflow,.payroll-result,.payroll-history) .team-table th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
/* The shared calculated-statement partial predates the numeric-cell class. */
.payroll-result .payroll-statement-body .team-table :is(th,td):not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.payroll-roster th[scope="row"] { min-width: 210px; width: 60%; }
.payroll-roster-person { display: flex; gap: var(--space-sm); align-items: center; min-height: 44px; cursor: pointer; }
.payroll-roster-person input[type="checkbox"] { display: block; width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; flex: 0 0 18px; accent-color: var(--color-accent); }
.payroll-roster-person > span { display: grid; gap: var(--space-2xs); }
.payroll-roster-person strong { font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.payroll-roster-person small { font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.payroll-roster-issue { color: var(--color-slate); font-size: var(--text-xs); font-weight: 400; margin: var(--space-xs) 0 0 30px; max-width: 55ch; }
.payroll-roster-vacation { display: block; white-space: normal; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.payroll-roster-unavailable .payroll-roster-person { cursor: default; color: var(--color-muted); }
.payroll-workflow-contractors { margin-top: var(--space-xl); }
.payroll-workflow-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.payroll-workflow-summary > div { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); min-width: 0; }
.payroll-workflow-summary > div + div { border-top: 1px solid var(--color-rule); }
.payroll-workflow-summary-period { grid-column: 1 / -1; }
.payroll-workflow-summary > .payroll-workflow-name { border-left: 1px solid var(--color-rule); }
.payroll-workflow-summary .field-help { margin: 0; font-size: var(--text-xs); }
.payroll-workflow-summary-count .payroll-workflow-figure { font-size: var(--text-amount); font-weight: 300; line-height: 1.15; font-variant-numeric: tabular-nums; }
.payroll-workflow-summary .text-button { justify-self: start; }
.payroll-workflow-name { margin: 0; }
.payroll-workflow-name label { font-size: var(--text-sm); font-weight: 600; }
.payroll-workflow-name input { min-height: 40px; border: 1px solid var(--color-rule-control); border-radius: var(--radius-base); margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); background: var(--color-paper); color: var(--color-ink); }
.payroll-workflow-name input:focus { border-color: var(--color-focus); }
.payroll-workflow-estimate { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); }
.payroll-workflow-estimate strong { font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.payroll-workflow-estimate .field-help { flex-basis: 100%; margin: 0; }
.payroll-workflow-errors { border-left: 3px solid var(--color-error); padding: var(--space-md); margin: var(--space-lg) 0; color: var(--color-ink); background: var(--color-error-tint); overflow-wrap: anywhere; }
.payroll-workflow-errors h2 { font-size: var(--text-base); }
.payroll-workflow-errors ul { padding-left: var(--space-lg); margin: var(--space-sm) 0 0; }
.payroll-workflow-errors li { margin: var(--space-xs) 0; }
.payroll-workflow-errors li li { font-weight: 400; }
.payroll-workflow-notice { padding: var(--space-sm) var(--space-md); color: var(--color-success); background: var(--color-success-tint); border-radius: var(--radius-base); }
.payroll-workflow-empty { padding: var(--space-lg) 0; border-block: 1px solid var(--color-rule); }
.payroll-workflow-empty .primary, .payroll-workflow-empty .secondary { display: inline-flex; }
.payroll-result-hero { text-align: center; padding: var(--space-xl) var(--space-lg) var(--space-lg); margin-bottom: var(--space-lg); }
.payroll-result-total { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 var(--space-lg); font-size: clamp(30px,6vw,var(--text-amount)); font-weight: 300; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-result-cost-label { color: var(--color-slate); margin: var(--space-lg) 0 var(--space-xs); }
.payroll-result-total > span { font-size: var(--text-sm); color: var(--color-slate); }
.payroll-result-total > strong { font-size: clamp(30px,6vw,var(--text-amount)); font-weight: 300; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-result-dates { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: var(--space-lg) 0; }
.payroll-result-dates > div { display: grid; gap: var(--space-xs); padding: var(--space-sm); min-width: 0; }
.payroll-result-dates > div + div { border-left: 1px solid var(--color-rule); }
.payroll-result-dates :is(dt,span) { color: var(--color-slate); font-size: var(--text-xs); }
.payroll-result-dates :is(dd,strong) { margin: 0; font-size: var(--text-sm); font-weight: 500; }
.payroll-result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-md); color: var(--color-slate); font-size: var(--text-xs); }
.payroll-result-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-slate); }
.payroll-status-pill { display: inline-block; background: var(--color-surface-muted); color: var(--color-ink); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.payroll-status-pill-approved { color: var(--color-success); background: var(--color-success-tint); }
.payroll-result-table small { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; margin-top: var(--space-2xs); }
.payroll-result-table .payroll-result-subrow th { padding-left: var(--space-lg); font-weight: 400; color: var(--color-muted); }
.payroll-result-document { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); border-block: 1px solid var(--color-rule); padding: var(--space-md) 0; }
.payroll-result-document > div { flex: 1 1 240px; }
.payroll-result-statement-actions, .payroll-result-statement-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.payroll-result-statement-net { text-align: right; margin-left: auto; }
.payroll-result-section { margin: var(--space-xl) 0; }
.payroll-result-section > h2 { margin-bottom: var(--space-md); }
.payroll-result-actions { justify-content: center; gap: var(--space-sm); margin: var(--space-lg) 0 0; }
.payroll-result-actions p { flex-basis: 100%; text-align: center; margin: 0; }
.payroll-result-statements { display: grid; gap: var(--space-xs); }
.payroll-result .payroll-bill-statement { border: 1px solid var(--color-rule); border-radius: var(--radius-base); overflow: clip; margin: 0; }
.payroll-result .payroll-bill-statement summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); cursor: pointer; min-height: 44px; background: none; }
.payroll-result .payroll-bill-statement summary > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.payroll-result .payroll-bill-statement summary::-webkit-details-marker { display: none; }
.payroll-result .payroll-bill-statement summary strong { font-size: var(--text-sm); }
.payroll-result .payroll-bill-statement summary small { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.payroll-result .payroll-bill-statement summary::after { content: "+"; margin-left: var(--space-sm); color: var(--color-slate); }
.payroll-result .payroll-bill-statement[open] summary::after { content: "−"; }
.payroll-result .payroll-statement-body { padding: 0 var(--space-md) var(--space-md); }
.payroll-result .payroll-statement-body .team-table th { font-size: var(--text-xs); }
.payroll-result-documents { list-style: none; padding: 0; margin: var(--space-md) 0; }
.payroll-result-documents li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); }
.payroll-result-documents small { display: block; color: var(--color-muted); }
:is(.payroll-workflow,.payroll-result,.payroll-history) .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  :is(.payroll-workflow,.payroll-result,.payroll-history) .primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
  :is(.payroll-workflow,.payroll-result,.payroll-history) .secondary:hover, .payroll-workflow-steps button:hover, .payroll-roster tr:has(input):hover, .payroll-result summary:hover { background: var(--color-surface-muted); }
  :is(.payroll-workflow,.payroll-result) .text-button:hover { text-decoration: underline; }
}
.payroll-roster tr:focus-within { background: var(--color-surface-muted); }
@media (max-width: 640px) {
  .payroll-workflow h1, .payroll-result h1, .payroll-history h1 { font-size: 28px; }
  .payroll-workflow-steps { grid-template-columns: minmax(0,1fr); gap: 0; margin-bottom: var(--space-lg); }
  .payroll-workflow-steps button { padding: var(--space-xs); }
  .payroll-workflow-period { padding: var(--space-md) var(--space-xs); }
  .payroll-workflow-date-navigation { gap: var(--space-2xs); }
  .payroll-workflow-dates { gap: var(--space-2xs); }
  .payroll-workflow-date-label { padding-inline: var(--space-xs); }
  .payroll-workflow .payroll-workflow-period-arrow { flex-basis: 30px; width: 30px; min-height: 30px; height: 30px; }
  .payroll-workflow-summary { grid-template-columns: minmax(0,1fr); }
  .payroll-workflow-summary > div { padding: var(--space-md); }
  .payroll-workflow-summary > div + div { border-left: 0; border-top: 1px solid var(--color-rule); }
  .payroll-workflow-summary > .payroll-workflow-name { border-left: 0; }
  .payroll-workflow-section-heading, .payroll-result-section-heading { align-items: flex-start; }
  .payroll-result-hero { padding: var(--space-lg) var(--space-sm); }
  .payroll-result-dates { grid-template-columns: minmax(0,1fr); }
  .payroll-result-dates > div + div { border-left: 0; border-top: 1px solid var(--color-rule); }
  .payroll-result .payroll-statement-body { padding-inline: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.payroll-workflow,.payroll-result) button:active:not(:disabled) { transform: none; }
}

/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · Existing payroll tokens */
.payroll-workflow, .payroll-result { max-width: 1160px; }
.payroll-workflow-steps { grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-md); }
.payroll-workflow-steps > a { display:flex; align-items:center; gap:var(--space-xs); color:var(--color-muted); font-weight:600; min-height:44px; text-decoration:none; }
.payroll-workflow-steps [aria-current="step"] { color:var(--color-link); }
.payroll-transfer-edit summary { cursor:pointer; color:var(--color-link); font-weight:600; min-height:32px; }
.payroll-confirm input { width:18px; height:18px; min-height:18px; flex:0 0 18px; padding:0; margin:0; accent-color:var(--color-accent); }
.payrun-schedule-panel { border:1px solid var(--color-rule); border-radius:var(--radius-base); overflow:clip; }
.payrun-schedule-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-md); padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--color-rule); }
.payrun-schedule-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-sm); }
.payrun-schedule-title > span { color:var(--color-slate); font-size:var(--text-sm); }
.payrun-schedule-title strong { font-size:var(--text-sm); font-weight:600; }
.payrun-period-controls { display:flex; gap:var(--space-xs); }
.payroll-workflow .payrun-period-controls button { gap:var(--space-xs); padding-inline:var(--space-sm); border-color:var(--color-rule); color:var(--color-ink); border-radius:var(--radius-base); }
.payrun-date-summary { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.payrun-period-dates, .payrun-payday { min-width:0; padding:var(--space-lg); }
.payrun-payday { border-left:1px solid var(--color-rule); background:var(--color-surface-muted); }
.payrun-date-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-xs); margin-bottom:var(--space-md); min-height:40px; }
.payroll-workflow .payrun-date-heading h3 { margin:0; font-size:var(--text-sm); font-weight:600; }
.payroll-workflow .payrun-date-heading .text-button { min-height:40px; padding:0; white-space:nowrap; font-size:var(--text-xs); }
.payrun-date-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); margin:0; }
.payrun-payday .payrun-date-range { grid-template-columns:minmax(0,1fr); }
.payrun-date-range dt { color:var(--color-slate); font-size:var(--text-xs); margin-bottom:var(--space-xs); }
.payrun-date-range dd { display:grid; gap:var(--space-2xs); margin:0; }
.payrun-date-range time { font-size:var(--text-section); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4; }
.payrun-date-range dd > span { font-size:var(--text-xs); color:var(--color-slate); }
.payroll-workflow-summary > .payroll-workflow-summary-period { padding:0; gap:0; }
.payroll-workflow-summary-period > .text-button { margin:var(--space-sm) var(--space-lg); }
@media (hover:hover) and (pointer:fine) {
 .payroll-workflow .payrun-period-controls button:hover:not(:disabled) { background:var(--color-surface-muted); }
}
@media (max-width:768px) {
 .payrun-date-summary { grid-template-columns:minmax(0,1fr); }
 .payrun-payday { border-left:0; border-top:1px solid var(--color-rule); }
 .payrun-schedule-toolbar, .payrun-period-dates, .payrun-payday { padding:var(--space-md); }
}
@media (max-width:414px) {
 .payrun-date-range { grid-template-columns:minmax(0,1fr); gap:var(--space-md); }
 .payrun-schedule-title { width:100%; }
}
.payroll-roster-tools { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(80px,.4fr); gap:var(--space-md); margin-block:var(--space-md); }
.payroll-roster-tools label, .payroll-transfer-edit label { display:grid; gap:var(--space-xs); font-weight:600; }
:is(.payroll-roster-tools,.payroll-search,.payroll-transfer-edit) :is(input,select) { min-width:0; width:100%; min-height:42px; border:1px solid var(--color-rule-control); border-radius:var(--radius-base); padding:var(--space-xs) var(--space-sm); background:var(--color-paper); color:var(--color-ink); font:inherit; }
.payroll-pagination, .payroll-downloads, .payroll-search { display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; margin-block:var(--space-md); }
.payroll-pagination > span { margin-right:auto; color:var(--color-slate); }
.payroll-search input { flex:1 1 200px; width:auto; }
.payroll-search select { width:auto; }
.payroll-downloads { margin:0; }
.payroll-approval-panel { border:1px solid var(--color-rule-control); border-radius:var(--radius-base); padding:var(--space-lg); margin-top:var(--space-xl); scroll-margin-top:var(--space-lg); }
.payroll-confirm { display:flex; align-items:flex-start; gap:var(--space-sm); margin-block:var(--space-md); }
.payroll-funding-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--color-rule); gap:var(--space-lg); padding-block:var(--space-lg); }
.payroll-funding-summary dt { color:var(--color-slate); margin-bottom:var(--space-sm); }
.payroll-funding-summary dd { margin:0; font-size:var(--text-base); font-weight:600; overflow-wrap:anywhere; }
.payroll-transfer-edit form { display:grid; gap:var(--space-xs); min-width:190px; max-width:320px; padding:var(--space-sm) 0; }
.payroll-transfer-edit .secondary { margin-top:var(--space-xs); }
@media (max-width:768px) {
 .payroll-workflow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .payroll-funding-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .payroll-roster-tools { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:414px) {
 .payroll-workflow-steps, .payroll-funding-summary { grid-template-columns:minmax(0,1fr); }
 .payroll-workflow-section-heading, .payroll-result-section-heading { flex-direction:column; }
}


.payroll-search select { max-width:100%; }

.payroll-saved-runs { margin-block: var(--space-lg); min-width: 0; }
.payroll-saved-runs-list { list-style: none; padding: 0; margin: var(--space-md) 0 0; border: 1px solid var(--color-rule); border-radius: var(--radius-base); overflow: hidden; }
.payroll-saved-runs-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding: var(--space-md); }
.payroll-saved-runs-list > li + li { border-top: 1px solid var(--color-rule); }
.payroll-saved-run-details { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.payroll-saved-run-details .field-help { margin-bottom: 0; }
.payroll-saved-runs-list .secondary { flex: 0 0 auto; }

.payroll-saved-run-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md); }
.payroll-saved-run-actions .text-button { color:var(--color-error); }

/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · Timesheet review uses existing tokens */
.payroll-timesheet-expansion > td { position:relative; padding-top:0; text-align:left; white-space:normal; }
.payroll-employee-timesheet summary { cursor:pointer; color:var(--color-link); font-size:var(--text-sm); min-height:44px; display:list-item; align-content:center; width:fit-content; padding-right:var(--space-md); }
.payroll-employee-timesheet summary:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }
.payroll-employee-timesheet summary:hover { text-decoration:underline; }
.payroll-timesheet-detail { padding:var(--space-md); border:1px solid var(--color-rule); border-radius:var(--radius-base); margin-block:var(--space-sm); background:var(--color-paper); }
.payroll-timesheet-detail caption { text-align:left; color:var(--color-slate); font-size:var(--text-xs); padding-bottom:var(--space-sm); }
.payroll-timesheet-detail .team-table th[scope="row"] { width:auto; min-width:120px; font-size:var(--text-xs); font-weight:400; }
.payroll-timesheet-detail .team-table :is(th,td) { font-size:var(--text-xs); padding:var(--space-xs); }
.payroll-timesheet-detail tfoot { border-top:1px solid var(--color-rule); }
.payroll-employee-timesheet-edit { font-size:var(--text-xs); white-space:nowrap; }
.payroll-roster tbody[hidden] { display:none; }
@media (max-width:640px) {
 .payroll-timesheet-detail { padding:var(--space-xs); }
 .payroll-workflow-section-heading .payroll-downloads { align-items:flex-start; }
}

/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · Compact payroll review ledger */
.payroll-review-overview { border:1px solid var(--color-rule); border-radius:var(--radius-base); padding:var(--space-lg); }
.payroll-review-period, .payroll-review-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-md); }
.payroll-review-period .field-help { margin-bottom:0; }
.payroll-review-totals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-lg); padding-block:var(--space-lg); margin:var(--space-md) 0; border-block:1px solid var(--color-rule); }
.payroll-review-totals dt { font-size:var(--text-xs); color:var(--color-slate); }
.payroll-review-totals dd { font-size:var(--text-section); font-weight:600; margin:var(--space-xs) 0 0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.payroll-review-totals > div:last-child { color:var(--color-link); }
.payroll-review-toolbar > p { flex:1 1 320px; margin:0; max-width:68ch; }
.payroll-review-breakdown { border-bottom:1px solid var(--color-rule); margin-top:var(--space-md); }
.payroll-review-breakdown > summary { padding-block:var(--space-md); cursor:pointer; font-size:var(--text-sm); font-weight:600; }
.payroll-review-breakdown > summary > span { font-weight:400; color:var(--color-muted); margin-left:var(--space-sm); }
.payroll-review-filters { display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:flex-end; padding:var(--space-md) 0; }
.payroll-review-filters label { display:grid; gap:var(--space-xs); font-size:var(--text-xs); font-weight:600; min-width:0; }
.payroll-review-filters label:first-of-type { flex:1 1 220px; }
.payroll-review-filters :is(input,select) { width:100%; min-width:0; min-height:42px; padding:var(--space-xs) var(--space-sm); border:1px solid var(--color-rule-control); border-radius:var(--radius-base); background:var(--color-paper); color:var(--color-ink); font:inherit; font-size:var(--text-sm); }
.payroll-ledger-scroll { overflow-x:auto; border:1px solid var(--color-rule); border-radius:var(--radius-base); }
.payroll-ledger { min-width:690px; }
.payroll-ledger-head, .payroll-ledger-employee > summary { display:grid; grid-template-columns:minmax(200px,2fr) repeat(3,minmax(110px,1fr)) 24px; gap:var(--space-sm); align-items:center; padding:var(--space-md); }
.payroll-ledger-head { background:var(--color-surface-muted); font-size:var(--text-xs); font-weight:600; color:var(--color-slate); }
.payroll-ledger-head > :not(:first-child), .payroll-ledger-employee > summary > :not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.payroll-ledger-employee { border-top:1px solid var(--color-rule); }
.payroll-ledger-employee > summary { cursor:pointer; font-size:var(--text-sm); list-style:none; min-height:68px; }
.payroll-ledger-employee > summary::-webkit-details-marker { display:none; }
.payroll-ledger-name { min-width:0; overflow-wrap:anywhere; }
.payroll-ledger-name small { display:block; color:var(--color-muted); font-size:var(--text-xs); margin-top:var(--space-2xs); }
.payroll-ledger-employee > summary:hover, .payroll-ledger-employee[open] > summary { background:var(--color-surface-muted); }
.payroll-ledger-employee[open] .payroll-ledger-chevron { transform:rotate(180deg); }
.payroll-ledger-employee > .payroll-statement-body { padding:var(--space-lg); border-top:1px solid var(--color-rule); max-width:900px; }
.payroll-ledger-employee .payroll-statement-body h3 { font-size:var(--text-sm); margin-top:var(--space-lg); }
.payroll-ledger-employee .payroll-statement-body h3:first-child { margin-top:0; }
.payroll-ledger-employee > summary:focus-visible, .payroll-review-breakdown > summary:focus-visible { outline:2px solid var(--color-focus); outline-offset:-3px; }
@media (max-width:768px) {
 .payroll-review-totals { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .payroll-review-overview { padding:var(--space-md); }
}
@media (max-width:375px) {
 .payroll-review-totals { grid-template-columns:minmax(0,1fr); }
 .payroll-review-filters label { flex:1 1 100%; }
}

/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · PDF settings, existing payroll tokens */
.payroll-pdf-designs { border:0; padding:0; margin:var(--space-xl) 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
.payroll-pdf-designs legend { font-size:var(--text-section); font-weight:600; margin-bottom:var(--space-md); }
.payroll-pdf-design { display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--space-sm); padding:var(--space-md); border:1px solid var(--color-rule); border-radius:var(--radius-base); cursor:pointer; align-content:start; }
.payroll-pdf-design:has(input:checked) { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); }
.payroll-pdf-design input { width:18px; height:18px; min-height:18px; margin:3px 0 0; accent-color:var(--color-accent); }
.payroll-pdf-design > .field-help, .payroll-pdf-swatch { grid-column:1 / -1; }
.payroll-pdf-swatch { display:grid; gap:var(--space-xs); padding:var(--space-md); border:1px solid var(--color-rule); background:var(--color-paper); font-size:var(--text-sm); }
.payroll-pdf-swatch i { display:block; height:12px; background:var(--color-surface-muted); border-bottom:1px solid var(--color-rule); }
.payroll-pdf-swatch-modern { border-top:4px solid var(--color-accent); color:var(--color-accent); }
.payroll-pdf-swatch-compact { font-size:var(--text-xs); gap:var(--space-2xs); }
.payroll-pdf-swatch-compact i { height:8px; }
.payroll-pdf-branding { max-width:680px; margin-bottom:var(--space-xl); }
.payroll-pdf-field { display:grid; gap:var(--space-xs); margin-block:var(--space-md); font-weight:600; }
.payroll-pdf-field .field-help { font-weight:400; }
.payroll-pdf-field :is(input,textarea) { min-width:0; width:100%; padding:var(--space-sm); border:1px solid var(--color-rule-control); border-radius:var(--radius-base); font:inherit; background:var(--color-paper); color:var(--color-ink); }
.payroll-pdf-logo { display:block; max-width:160px; max-height:80px; object-fit:contain; }
.payroll-pdf-design:focus-within { outline:2px solid var(--color-focus); outline-offset:3px; }
@media (max-width:768px) { .payroll-pdf-designs { grid-template-columns:minmax(0,1fr); } }

.payroll-ledger-with-downloads { min-width:850px; }
.payroll-ledger-with-downloads .payroll-ledger-head, .payroll-ledger-with-downloads .payroll-ledger-employee > summary { grid-template-columns:minmax(200px,2fr) repeat(3,minmax(110px,1fr)) 120px 24px; }
.payroll-ledger-with-downloads .payroll-employee-pdf { justify-self:end; white-space:nowrap; font-size:var(--text-xs); }

:is(.payroll-downloads, .payroll-result-statement-links, .payroll-statement-navigation) :is(a,button), .payroll-employee-pdf { display:inline-flex; align-items:center; gap:var(--space-xs); }
:is(.employee-payslip-actions, .payroll-downloads, .payroll-result-statement-links, .payroll-statement-navigation, .payroll-employee-pdf) .workspace-icon { width:18px; height:18px; flex:0 0 18px; }

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · Overview-aligned payroll workbench */
.payroll-workflow { max-width: var(--layout-content-max); }
.payroll-workflow-heading { align-items: flex-end; }
.payroll-workflow-eyebrow { margin: 0 0 var(--space-xs); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.payroll-workflow-heading .field-help { max-width: 65ch; margin: 0; font-size: var(--text-base); }
.payroll-workflow-heading .run-payroll-links { flex: 0 0 auto; align-items: center; }
.payroll-workflow-main { min-width: 0; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.payroll-workflow-preview { margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); color: var(--color-muted); font-size: var(--text-xs); }
.payroll-workflow-section-heading { align-items: flex-start; margin-bottom: var(--space-xl); }
.payroll-workflow-section-heading .field-help { color: var(--color-accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.payroll-workflow-section-heading h2 { font-weight: 700; }
.payroll-workflow .payrun-schedule-panel { border-radius: var(--radius-card); }
.payroll-workflow .payrun-schedule-toolbar { background: var(--color-surface-muted); }
.payroll-workflow .payrun-payday { background: var(--color-surface-muted); }
.payroll-workflow-panel > .field-help:last-child { margin-top: var(--space-md); }
.payroll-workflow-actions { margin-top: var(--space-xl); }
.payroll-workflow .payroll-workflow-save { margin-right: auto; }
.payroll-workflow .payroll-saved-runs { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.payroll-workflow .payroll-saved-runs-list { border: 0; border-radius: 0; }
.payroll-workflow .payroll-saved-runs-list > li { padding-inline: 0; }
.payroll-workflow .payroll-saved-runs-list > li:first-child { border-top: 1px solid var(--color-rule); }
.payroll-workflow .payroll-workflow-summary { border-radius: var(--radius-card); }
.payroll-workflow .payroll-workflow-estimate { padding: var(--space-lg); border-radius: var(--radius-input); background: var(--color-surface-muted); }
.payroll-result { max-width: var(--layout-content-max); }
.payroll-result-back { display: inline-flex; margin-bottom: var(--space-sm); }
.payroll-result .payroll-workflow-heading .field-help { max-width: 65ch; margin: 0; font-size: var(--text-base); }
.payroll-result .payroll-review-overview { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); }
.payroll-result .payroll-review-totals { gap: var(--space-lg); }
.payroll-result .payroll-review-breakdown { padding: var(--space-lg) var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); margin-top: var(--space-xl); }
.payroll-result .payroll-review-breakdown > summary { color: var(--color-link); }
.payroll-result .payroll-approval-panel { border-radius: var(--radius-card); background: var(--color-surface-muted); }
.payroll-result .payroll-result-statements { margin-top: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
@media (max-width: 640px) { .payroll-workflow-main, .payroll-result .payroll-review-overview, .payroll-result .payroll-result-statements { padding: var(--space-lg); } :is(.payroll-workflow,.payroll-result) .payroll-workflow-heading > div:first-child { flex: initial; } .payroll-workflow-heading .run-payroll-links { width: 100%; justify-content: space-between; } .payroll-result .payroll-review-breakdown { padding-inline: var(--space-lg); } }
@media (max-width: 414px) { .payroll-workflow-main { padding: var(--space-md); } .payroll-workflow-actions { gap: var(--space-xs); } }

/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · PayHr cards and hierarchy */
.payroll-workflow-top-grid, .payroll-workflow-bottom-grid { display: grid; gap: var(--space-lg); margin-block: var(--space-lg); align-items: stretch; }
.payroll-workflow-top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); }
.payroll-workflow-bottom-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.payroll-workflow-card, .payroll-workflow .payroll-saved-runs { min-width: 0; margin: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.payroll-workflow-card-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.payroll-workflow-card-heading h2 { margin: 0; }
.payroll-workflow-card-heading .field-help { margin: var(--space-2xs) 0 0; }
.payroll-hours-card { display: flex; flex-direction: column; }
.payroll-hours-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs); margin: auto 0 var(--space-sm); color: var(--color-graphite); font-variant-numeric: tabular-nums; }
.payroll-hours-value strong { font-size: var(--text-amount); font-weight: 600; line-height: 1.1; }
.payroll-hours-value span { color: var(--color-slate); font-size: var(--text-sm); }
.payroll-hours-card > .field-help { margin-bottom: 0; }
.payroll-saved-runs-list { max-height: 15rem; overflow-y: auto; }
.payroll-workflow .payroll-saved-runs-list > li { padding-block: var(--space-sm); }
.payroll-saved-run-details { min-width: 0; overflow-wrap: anywhere; }
.payroll-card-empty { margin: var(--space-lg) 0 0; color: var(--color-slate); font-size: var(--text-sm); }
.payroll-history-card .ui-table-scroll { border: 0; box-shadow: none; }
.payroll-history-card .ui-data-table { width: 100%; }
.payroll-history-actions { white-space: nowrap; }
.payroll-history-actions a + a { margin-left: var(--space-md); }
.payroll-holiday-list { list-style: none; margin: 0; padding: 0; }
.payroll-holiday-list li { display: flex; gap: var(--space-md); align-items: center; padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.payroll-holiday-list time { display: grid; place-items: center; flex: 0 0 3rem; padding: var(--space-xs); border-radius: var(--radius-base); background: var(--color-surface-muted); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.payroll-holiday-list time span { font-size: var(--text-xs); text-transform: uppercase; }
.payroll-holiday-list time strong { font-size: var(--text-section); }
.payroll-holiday-list li > div { display: grid; gap: var(--space-2xs); min-width: 0; }
.payroll-holiday-list li > div strong { overflow-wrap: anywhere; }
.payroll-holiday-list li > div span { color: var(--color-slate); font-size: var(--text-sm); }
@media (max-width: 900px) { .payroll-workflow-top-grid, .payroll-workflow-bottom-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .payroll-workflow-card, .payroll-workflow .payroll-saved-runs { padding: var(--space-lg); } }
@media (max-width: 414px) { .payroll-workflow-card, .payroll-workflow .payroll-saved-runs { padding: var(--space-md); } }

/* Hallmark · payroll history → record → payment tracking, using the existing PayHr system */
.payroll-history-page, .payroll-record-page, .payroll-transactions { min-width: 0; }
.payroll-transactions > .payroll-result-section, .payroll-tracking-grid > .payroll-result-section { min-width: 0; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.payroll-tracking-resources h2, .payroll-tracking-recipients h2, .payroll-tracking-remittances h2 { margin: 0; }
.payroll-tracking-recipients .field-help { margin: var(--space-xs) 0 0; }
/* Hallmark · macrostructure: Index-First · tone: utilitarian · theme: existing PayHr · pre-emit critique: P5 H5 E4 S5 R5 V4 */
.payroll-history-page .payroll-workflow-heading { margin-bottom: var(--space-xl); }
.payroll-history-group + .payroll-history-group { margin-top: var(--space-xl); }
.payroll-history-group h2 { margin: 0 0 var(--space-md); font-size: var(--text-section); }
.payroll-history-group-empty { margin: 0; padding: var(--space-lg); border-radius: var(--radius-base); background: var(--color-surface-muted); color: var(--color-slate); text-align: center; }
.payroll-history-page .payroll-history-table-scroll { overflow-x: auto; }
.payroll-history-page .payroll-history-list { min-width: 610px; table-layout: auto; }
.payroll-history-page .payroll-history-list :is(th, td) { padding-block: var(--space-md); vertical-align: middle; }
.payroll-history-page .payroll-history-list thead th { border-bottom: 2px solid var(--color-rule-heavy); }
.payroll-history-page .payroll-history-list tbody tr:last-child > * { border-bottom: 1px solid var(--color-rule); }
.payroll-history-date { white-space: nowrap; }
.payroll-history-description { min-width: 250px; font-weight: 400; }
.payroll-history-description a { color: var(--color-ink); text-decoration: none; }
.payroll-history-description a:hover { color: var(--color-link); text-decoration: underline; }
.payroll-history-description small { display: block; margin-top: var(--space-2xs); color: var(--color-slate); font-size: var(--text-xs); font-weight: 400; }
.payroll-history-page .payroll-history-actions { width: 1%; white-space: nowrap; text-align: right; }
.payroll-history-page .payroll-history-actions a { display: inline-flex; align-items: center; min-height: var(--size-control); font-weight: 600; }
.payroll-history-page .team-table-scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.payroll-history-group-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.payroll-history-page-size, .payroll-history-group-pages { display: flex; align-items: center; gap: var(--space-xs); }
.payroll-history-page-size select { width: auto; min-width: 70px; min-height: var(--size-control); }
.payroll-history-page-size .secondary { min-height: var(--size-control); }
.payroll-history-group-pages { margin-left: auto; font-variant-numeric: tabular-nums; }
.payroll-history-group-pages > span:first-child { margin-right: var(--space-xs); }
.payroll-history-page-arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--size-control); height: var(--size-control); border: 1px solid var(--color-rule); border-radius: var(--radius-base); text-decoration: none; font-size: var(--text-section); }
.payroll-history-page-arrow:hover { background: var(--color-surface-muted); }
.payroll-history-page-arrow:active { background: var(--color-rule); }
.payroll-history-page-arrow.is-disabled { color: var(--color-slate); opacity: .5; }
.payroll-history-disclosure { margin-top: var(--space-xl); }
.payroll-record-page .payroll-review-overview { margin-top: var(--space-lg); }
.payroll-record-totals { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-lg) 0; padding-block: var(--space-lg); border-block: 1px solid var(--color-rule); }
.payroll-record-totals > div { flex: 1 1 160px; min-width: 0; }
.payroll-record-totals .payroll-record-total { flex: 2 1 250px; }
.payroll-record-totals dt { color: var(--color-slate); font-size: var(--text-xs); }
.payroll-record-totals dd { margin: var(--space-xs) 0 0; color: var(--color-ink); font-size: var(--text-section); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-record-totals .payroll-record-total dd { font-size: var(--text-amount); line-height: 1.1; }
.payroll-record-totals .field-help { margin: var(--space-sm) 0 0; }
.payroll-record-page .payroll-review-toolbar { align-items: center; }
.payroll-record-page > .payroll-result-section { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.payroll-record-page > .payroll-result-statements { display: block; }
.payroll-transactions .payroll-workflow-heading { margin-bottom: var(--space-xl); }
.payroll-tracking-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: var(--space-lg); align-items: stretch; }
.payroll-tracking-grid > .payroll-result-section { margin: 0; }
.payroll-tracking-funding .payroll-workflow-section-heading { margin-bottom: var(--space-md); }
.payroll-tracking-funding .payroll-workflow-eyebrow, .payroll-tracking-resources .payroll-workflow-eyebrow, .payroll-tracking-recipients .payroll-workflow-eyebrow { margin-bottom: var(--space-xs); }
.payroll-tracking-funding .payroll-funding-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--space-md); }
.payroll-tracking-funding .payroll-funding-summary > div:first-child dd { font-size: var(--text-amount); line-height: 1.1; }
.payroll-tracking-resources { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.payroll-tracking-resources > .field-help, .payroll-tracking-resources > .payroll-workflow-eyebrow { margin: 0; }
.payroll-tracking-resources .payroll-downloads { display: grid; justify-items: stretch; align-self: stretch; }
.payroll-tracking-resources .payroll-downloads :is(a, button) { justify-content: center; }
.payroll-tracking-resources .payroll-tracking-note { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.payroll-transactions > .payroll-result-section { margin-block: var(--space-lg) 0; }
.payroll-transactions .payroll-search { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) auto; align-items: end; gap: var(--space-md); margin-block: var(--space-lg); }
.payroll-transactions .payroll-search label { display: grid; gap: var(--space-xs); min-width: 0; font-size: var(--text-xs); font-weight: 600; }
.payroll-transactions .payroll-search :is(input, select) { width: 100%; }
.payroll-transactions .team-table-scroll { overflow-x: auto; }
.payroll-tracking-recipients .team-table { min-width: 780px; }
.payroll-tracking-remittances .team-table { max-width: 680px; }
.payroll-transactions .payroll-pagination { margin-bottom: 0; }
@media (max-width: 900px) { .payroll-tracking-grid { grid-template-columns: minmax(0, 1fr); } .payroll-tracking-resources .payroll-downloads { display: flex; flex-wrap: wrap; } }
@media (max-width: 640px) { .payroll-record-page > .payroll-result-section, .payroll-transactions > .payroll-result-section, .payroll-tracking-grid > .payroll-result-section { padding: var(--space-lg); } .payroll-transactions .payroll-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .payroll-transactions .payroll-search button { grid-column: 1 / -1; justify-self: start; } .payroll-record-totals .payroll-record-total { flex-basis: 100%; } }
@media (max-width: 414px) { .payroll-record-page > .payroll-result-section, .payroll-transactions > .payroll-result-section, .payroll-tracking-grid > .payroll-result-section { padding: var(--space-md); } .payroll-tracking-funding .payroll-funding-summary, .payroll-transactions .payroll-search { grid-template-columns: minmax(0, 1fr); } .payroll-transactions .payroll-search button { grid-column: auto; } }

.payroll-download-menu { position: relative; display: inline-block; flex: 0 0 auto; }
.payroll-download-menu > summary { display: inline-flex; align-items: center; gap: var(--space-xs); width: auto; min-height: 44px; cursor: pointer; list-style: none; }
.payroll-download-menu > summary::-webkit-details-marker { display: none; }
.payroll-download-menu > summary::after { content: "⌄"; margin-left: var(--space-xs); }
.payroll-download-menu[open] > summary::after { transform: rotate(180deg); }
.payroll-download-menu > summary:focus-visible, .payroll-download-menu-items a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.payroll-download-menu-items { position: absolute; z-index: 5; top: calc(100% + var(--space-xs)); right: 0; min-width: 190px; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); }
.payroll-download-menu-items a { display: flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .payroll-download-menu-items a:hover { background: var(--color-surface-muted); } }
.payroll-download-menu .workspace-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.payroll-tracking-resources .payroll-download-menu { align-self: flex-start; }
.payroll-transfer-dialog { width: min(480px, calc(100vw - 2 * var(--space-md))); }
.payroll-transfer-dialog form { display: grid; gap: var(--space-xs); max-width: none; padding: 0; }
.payroll-transfer-dialog form label { margin: var(--space-sm) 0 0; }
.payroll-transfer-dialog .ui-dialog-actions { margin-top: var(--space-lg); }
.payroll-transfer-dialog .ui-dialog-actions button { margin-top: 0; }

.payroll-record-page .payroll-record-header { align-items: flex-start; }
.payroll-record-page .payroll-record-header > div:first-child { flex: 1 1 auto; }
.payroll-record-page .payroll-record-header .payroll-result-back { flex: 0 0 auto; margin: 0 0 0 auto; }
.payroll-tracking-section { margin-top: var(--space-xl); scroll-margin-top: var(--layout-header-height); }
.payroll-tracking-section > .payroll-workflow-section-heading { margin-bottom: var(--space-lg); }
.payroll-tracking-section > .payroll-workflow-section-heading .field-help { color: var(--color-slate); font-size: var(--text-sm); font-weight: 400; letter-spacing: normal; text-transform: none; }
.payroll-tracking-section .payroll-tracking-funding h3, .payroll-tracking-section .payroll-tracking-resources h3, .payroll-tracking-section .payroll-tracking-recipients h3 { margin: 0; }
.payroll-tracking-section .team-table-scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 640px) { .payroll-record-page .payroll-record-header .payroll-result-back { margin-left: auto; } }

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · one payroll record, visible totals and one people ledger */
.payroll-record-header-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: var(--space-xs); margin-inline-start: auto; }
.payroll-record-page .payroll-record-header-actions .payroll-result-back { margin: 0; }
.payroll-record-page .payroll-review-breakdown { overflow: visible; }
.payroll-breakdown-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.payroll-breakdown-heading h2 { margin: 0; }
.payroll-breakdown-heading .field-help { margin-bottom: 0; }
.payroll-breakdown-heading > span { color: var(--color-slate); font-size: var(--text-sm); }
.payroll-record-page .payroll-review-breakdown > .payroll-result-section { margin-block: var(--space-lg) 0; }
.payroll-record-page .payroll-review-breakdown h3 { margin: 0; }
.payroll-record-page .payroll-review-breakdown .team-table tfoot { background: var(--color-surface-muted); }
.payroll-record-page .payroll-tracking-grid { grid-template-columns: minmax(0, 1fr); }
.payroll-record-page .payroll-transactions .payroll-search { grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(130px, 1fr)) auto; }
.payroll-person-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); min-width: 180px; }
.payroll-person-actions > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.payroll-person-actions .payroll-transfer-edit > button { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 641px) { .payroll-record-page .payroll-transactions .payroll-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payroll-record-page .payroll-transactions .payroll-search button { justify-self: start; } }
@media (max-width: 640px) {
  .payroll-record-page .payroll-transactions .payroll-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-record-page .payroll-transactions .payroll-search label:first-child, .payroll-record-page .payroll-transactions .payroll-search button { grid-column: 1 / -1; }
}
@media (max-width: 414px) { .payroll-record-page .payroll-transactions .payroll-search { grid-template-columns: minmax(0, 1fr); } .payroll-record-page .payroll-transactions .payroll-search label:first-child, .payroll-record-page .payroll-transactions .payroll-search button { grid-column: auto; } }

/* Hallmark · genre: modern-minimal · macrostructure: Stat-Led record · theme: studied-DNA (source: image) · design-system: DESIGN.md */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · approved record only */
.payroll-record-page .payroll-record-summary { display: grid; gap: var(--space-xl); padding: var(--space-xl); }
.payroll-record-summary-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.payroll-record-summary-heading h2 { margin: 0; font-size: var(--text-section); line-height: 1.35; overflow-wrap: anywhere; }
.payroll-record-summary-heading .payroll-status-pill { flex: 0 0 auto; }
.payroll-record-cost { display: grid; justify-items: center; gap: var(--space-xs); padding-block: var(--space-lg); text-align: center; }
.payroll-record-cost p, .payroll-record-cost small { margin: 0; color: var(--color-slate); }
.payroll-record-cost p { font-size: var(--text-sm); font-weight: 600; }
.payroll-record-cost strong { min-width: 0; color: var(--color-ink); font-size: clamp(var(--text-section), 7vw, var(--text-amount)); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.payroll-record-cost small { font-size: var(--text-xs); }
.payroll-record-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.payroll-record-dates > div { min-width: 0; padding-inline: var(--space-lg); text-align: center; }
.payroll-record-dates > div + div { border-left: 1px solid var(--color-rule); }
.payroll-record-dates dt { color: var(--color-slate); font-size: var(--text-sm); font-weight: 600; }
.payroll-record-dates dd { margin: var(--space-md) 0 0; color: var(--color-ink); font-size: var(--text-section); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-record-actions { display: flex; justify-content: center; align-items: center; }
.payroll-record-actions .payroll-download-menu-items { right: auto; left: 50%; transform: translateX(-50%); }
.payroll-record-summary > .payroll-tracking-section { min-width: 0; margin: 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.payroll-record-summary > .payroll-tracking-section > .payroll-workflow-section-heading { margin-bottom: var(--space-md); }
.payroll-record-summary > .payroll-tracking-section .payroll-funding-summary { margin-bottom: var(--space-md); }
.payroll-record-page .payroll-review-breakdown:not(details) { display: grid; gap: var(--space-lg); }
.payroll-record-page .payroll-record-breakdown { display: block; }
.payroll-record-page .payroll-record-breakdown > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-xl); min-height: var(--size-control); cursor: pointer; list-style: none; color: var(--color-ink); }
.payroll-record-page .payroll-record-breakdown > summary::-webkit-details-marker { display: none; }
.payroll-record-page .payroll-record-breakdown > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.payroll-breakdown-heading-copy { display: grid; gap: var(--space-2xs); }
.payroll-breakdown-heading-copy strong { font-size: var(--text-section); }
.payroll-breakdown-heading-copy small { color: var(--color-slate); font-size: var(--text-sm); font-weight: 400; }
.payroll-record-page .payroll-record-breakdown > summary > span { margin: 0; color: inherit; }
.payroll-breakdown-amount { font-size: var(--text-section); font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-record-page .payroll-record-breakdown > summary > .payroll-breakdown-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-link); font-weight: 600; white-space: nowrap; }
.payroll-breakdown-chevron { display: inline-block; font-size: var(--text-section); transition: transform var(--dur-micro) var(--ease-out); }
.payroll-breakdown-close-label, .payroll-record-breakdown[open] .payroll-breakdown-open-label { display: none; }
.payroll-record-breakdown[open] .payroll-breakdown-close-label { display: inline; }
.payroll-record-breakdown[open] .payroll-breakdown-chevron { transform: rotate(180deg); }
.payroll-record-page .payroll-breakdown-heading { padding-bottom: 0; border-bottom: 0; }
.payroll-record-breakdown-content { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.payroll-record-breakdown-content h3 { margin: 0; padding-block: var(--space-lg) var(--space-md); }
.payroll-record-page .payroll-record-detail-table { width: 100%; font-variant-numeric: tabular-nums; }
.payroll-record-page .payroll-record-detail-table :is(th, td) { border-bottom: 0; padding: var(--space-sm) var(--space-md); }
.payroll-record-page .payroll-record-detail-table tbody th { font-weight: 500; }
.payroll-record-page .payroll-record-detail-table :is(.payroll-record-net-row, .payroll-record-tax-total) > * { border-bottom: 1px solid var(--color-rule); padding-block: var(--space-lg); }
.payroll-record-page .payroll-record-detail-table .payroll-record-tax-heading > * { padding-top: var(--space-lg); }
.payroll-record-page .payroll-record-detail-table .payroll-record-tax-line > * { color: var(--color-slate); padding-block: var(--space-xs); }
.payroll-record-page .payroll-record-detail-table .payroll-record-tax-line th { padding-left: var(--space-xl); font-weight: 400; }
.payroll-record-page .payroll-record-detail-table .payroll-record-tax-subtotal > * { padding-block: var(--space-md) var(--space-lg); }
.payroll-record-contractor-details { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.payroll-record-contractor-details h3 { margin: 0; padding-block: var(--space-lg) var(--space-sm); }
.payroll-record-contractor-line { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); font-variant-numeric: tabular-nums; }
.payroll-record-contractor-line + .payroll-record-contractor-line { border-top: 1px solid var(--color-rule); }
.payroll-record-contractor-line small { display: block; color: var(--color-slate); }
.payroll-record-page .payroll-tracking-funding .payroll-funding-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-md); }
.payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div { min-width: 0; padding-inline: var(--space-lg); }
.payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div:first-child { padding-left: 0; }
.payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div + div { border-left: 1px solid var(--color-rule); }
.payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div:first-child dd { font-size: var(--text-section); }
.payroll-record-page .payroll-tracking-funding .payroll-funding-summary dt { font-size: var(--text-sm); }
.payroll-record-page .payroll-person-actions { min-width: 0; justify-content: flex-end; }
.payroll-record-page .payroll-person-actions > a { color: var(--color-link); font-size: var(--text-sm); font-weight: 600; }
@media (max-width: 768px) { .payroll-record-page .payroll-record-dates dd { font-size: var(--text-base); } .payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div { padding-inline: var(--space-md); } }
@media (max-width: 640px) { .payroll-record-page .payroll-record-breakdown > summary { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); } .payroll-breakdown-amount { grid-column: 1; grid-row: 2; } .payroll-breakdown-toggle { grid-column: 2; grid-row: 1 / 3; } .payroll-record-page .payroll-record-detail-table { min-width: 520px; } }
@media (max-width: 640px) {
  .payroll-record-page .payroll-record-summary { gap: var(--space-lg); padding: var(--space-lg); }
  .payroll-record-summary-heading { align-items: flex-start; }
  .payroll-record-dates { grid-template-columns: minmax(0, 1fr); }
  .payroll-record-dates > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; text-align: left; }
  .payroll-record-dates > div + div { border-left: 0; border-top: 1px solid var(--color-rule); }
  .payroll-record-dates dd { margin: 0; text-align: right; }
  .payroll-record-page .payroll-tracking-funding .payroll-funding-summary { grid-template-columns: minmax(0, 1fr); }
  .payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; }
  .payroll-record-page .payroll-tracking-funding .payroll-funding-summary > div + div { border-left: 0; border-top: 1px solid var(--color-rule); }
  .payroll-record-page .payroll-tracking-funding .payroll-funding-summary dt { margin: 0; }
  .payroll-record-page .payroll-person-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .payroll-breakdown-chevron { transition: none; } }

/* Hallmark · component: pay-statement disclosure · genre: modern-minimal · theme: studied-DNA (source: image) · pre-emit critique: P5 H5 E4 S5 R5 V4 */
.payroll-statements-heading { align-items: center; margin-bottom: var(--space-md); }
.payroll-statements-heading .field-help { color: var(--color-slate); font-size: var(--text-sm); font-weight: 400; letter-spacing: normal; text-transform: none; }
.payroll-statements-controls { display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.payroll-statements-controls .text-button { min-height: var(--size-control); }
.payroll-statement-filters { margin-block: var(--space-md); }
.payroll-statement-filters > summary { display: list-item; width: fit-content; min-height: var(--size-control); color: var(--color-link); cursor: pointer; font-weight: 600; }
.payroll-statement-filters > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.payroll-statement-filters .payroll-search { margin-bottom: var(--space-md); }
.payroll-statements-list { border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); overflow: clip; }
.payroll-statement-card + .payroll-statement-card { border-top: 1px solid var(--color-rule); }
.payroll-statement-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-sm) var(--space-lg); padding: var(--space-lg) var(--space-xl); list-style: none; cursor: pointer; }
.payroll-statement-card > summary.has-download { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
.payroll-statement-card > summary::-webkit-details-marker { display: none; }
.payroll-statement-card > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .payroll-statement-card > summary:hover .payroll-statement-identity strong { color: var(--color-link); } }
.payroll-statement-identity { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: var(--space-md); min-width: 0; }
.payroll-statement-identity strong { min-width: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.payroll-statement-identity small { flex: 0 0 auto; color: var(--color-slate); font-size: var(--text-sm); }
.payroll-statement-hours { min-width: 0; color: var(--color-slate); overflow-wrap: anywhere; }
.payroll-statement-amount { font-size: var(--text-section); font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-statement-download { display: inline-flex; align-items: center; justify-content: center; width: var(--size-control); height: var(--size-control); border-radius: var(--radius-base); color: var(--color-link); }
.payroll-statement-download:hover { background: var(--color-surface-muted); }
.payroll-statement-download:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.payroll-statement-download .workspace-icon { width: 20px; height: 20px; }
.payroll-statement-chevron { color: var(--color-ink); font-size: var(--text-section); transition: transform var(--dur-micro) var(--ease-out); }
.payroll-statement-card[open] .payroll-statement-chevron { transform: rotate(180deg); }
.payroll-statement-detail { padding: 0 var(--space-xl) var(--space-lg); }
.payroll-tracking-recipients .payroll-statement-table { width: 100%; min-width: 620px; font-variant-numeric: tabular-nums; }
.payroll-record-page .payroll-statement-table :is(th, td) { padding-block: var(--space-xs); }
.payroll-record-page .payroll-statement-table thead th { border-bottom: 2px solid var(--color-rule-heavy); }
.payroll-record-page .payroll-statement-table :is(th, td):not(:first-child) { text-align: right; }
.payroll-record-page .payroll-statement-table .payroll-statement-subrow > * { color: var(--color-slate); font-weight: 400; }
.payroll-record-page .payroll-statement-table .payroll-statement-subrow th { padding-left: var(--space-xl); }
.payroll-record-page .payroll-statement-table .payroll-statement-group > * { padding-top: var(--space-md); font-weight: 600; }
.payroll-record-page .payroll-statement-table .payroll-statement-net > * { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-weight: 700; }
.payroll-record-page .payroll-statement-table .payroll-statement-employer > * { border-top: 1px solid var(--color-rule); }
.payroll-statement-bill { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.payroll-statement-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.payroll-statement-payment { display: grid; gap: var(--space-2xs); }
.payroll-statement-payment span { color: var(--color-slate); }
.payroll-statement-footer .payroll-person-actions { min-width: 0; justify-content: flex-end; }
.payroll-statement-footer .payroll-person-actions > a { white-space: nowrap; }
@media (max-width: 640px) {
  .payroll-statements-heading { flex-direction: row; align-items: center; }
  .payroll-statement-card > summary { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-md); }
  .payroll-statement-card > summary.has-download { grid-template-columns: minmax(0, 1fr) auto auto; }
  .payroll-statement-identity { align-items: flex-start; }
  .payroll-statement-identity small { text-align: right; }
  .payroll-statement-hours { grid-column: 1; }
  .payroll-statement-amount { grid-column: 2 / -1; justify-self: end; }
  .payroll-statement-card > summary .payroll-status-pill { grid-column: 1; justify-self: start; }
  .payroll-statement-download { grid-column: 2; }
  .payroll-statement-chevron { grid-column: -2; justify-self: end; }
  .payroll-statement-detail { padding-inline: var(--space-md); }
  .payroll-statement-footer .payroll-person-actions { justify-content: flex-start; }
}
@media (max-width: 414px) { .payroll-statements-heading { flex-direction: column; align-items: flex-start; } .payroll-statement-identity { flex-direction: column; gap: var(--space-2xs); } }
@media (prefers-reduced-motion: reduce) { .payroll-statement-chevron { transition: none; } }