.payroll-note { color:var(--text-secondary); max-width:75ch; line-height:1.5; }
#payroll-rates { display:grid; gap:var(--space-3); }
.payroll-rate-card { display:grid; grid-template-columns:minmax(150px,1fr) 130px 170px auto; gap:var(--space-4); align-items:center; background:var(--surface-primary); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:var(--space-4); }
.payroll-rate-card label { display:grid; gap:var(--space-2); font-size:12px; color:var(--text-secondary); }
.payroll-rate-card input { width:100%; box-sizing:border-box; border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:var(--space-2); color:var(--text-primary); background:var(--surface-primary); font:inherit; }
.payroll-rate-card input:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.payroll-rate-card small { display:block; margin-top:var(--space-1); color:var(--text-secondary); }
.payroll-feedback { grid-column:1/-1; margin:0; min-height:1.4em; color:var(--text-secondary); font-size:12px; }
.resource-head .payroll-journal-value { position:absolute; bottom:1px; right:var(--space-2); max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:10px; color:var(--text-link); background:var(--surface-primary); }
.payroll-journal-value[hidden], [data-payroll-own][hidden] { display:none!important; }
[data-payroll-own] { color:var(--text-link); font-size:12px; white-space:nowrap; }
.analytics-staff-row [data-payroll-analytics] small { font-size:10px; }
@media(max-width:768px) { .payroll-rate-card { grid-template-columns:1fr 1fr; } .payroll-rate-card>div,.payroll-rate-card>button { grid-column:1/-1; } }
@media(max-width:768px) {
  body[data-mobile-journal-only] .mobile-journal-summary-row:has([data-payroll-own]:not([hidden])) { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:18px 14px; row-gap:var(--space-1); }
  .mobile-journal-summary-row:has([data-payroll-own]:not([hidden])) .mobile-journal-date-picker { grid-column:1; grid-row:1/3; }
  .mobile-journal-summary-row:has([data-payroll-own]:not([hidden])) .mobile-journal-earnings-label { grid-column:2; grid-row:1; line-height:18px; }
  .mobile-journal-summary-row:has([data-payroll-own]:not([hidden])) .mobile-journal-earnings-value { grid-column:3; grid-row:1; line-height:18px; }
  .mobile-journal-summary-row [data-payroll-own] { grid-column:2/4; grid-row:2; justify-self:end; line-height:14px; }
}