.payroll-layout{max-width:1440px}.payroll-layout h1{margin:0}.payroll-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}.payroll-heading p{margin:6px 0 0;color:var(--muted,#65756f)}.payroll-field{display:grid;gap:7px;font-size:13px;min-width:0}.payroll-field>span{font-weight:600}.payroll-month-controls svg{width:18px;height:18px}.payroll-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.payroll-stat{background:#fffefa;border:1px solid #dbdfd3;border-radius:14px;padding:18px;display:grid;gap:7px;min-width:0}.payroll-stat>span{font-size:13px}.payroll-stat>strong{font-size:clamp(20px,2.1vw,28px);font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.payroll-stat small{font-size:11px;color:#64736b}.payroll-stat-accent{background:#174b40;color:#fff;border-color:#174b40}.payroll-stat-accent small{color:#d4e5dc}.payroll-panel{border:1px solid #dbdfd3;border-radius:14px;background:#fffefa;overflow:hidden;margin-bottom:16px;min-width:0}.payroll-panel-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:17px 20px}.payroll-panel-heading h2{margin:0;font-size:22px}.payroll-panel-heading>span,.payroll-panel-heading small{font-size:12px;color:#64736b}.payroll-name{font-size:17px;font-weight:700;color:#174b40;text-decoration:none}.payroll-name:hover{text-decoration:underline}.payroll-identity,.payroll-figure{display:grid;gap:5px;min-width:0}.payroll-identity small,.payroll-figure span,.payroll-figure small{font-size:11px;color:#66776f}.payroll-figure strong{font-size:15px;font-variant-numeric:tabular-nums}.payroll-progress>div{display:flex;gap:8px;align-items:baseline;justify-content:space-between}.payroll-progress strong{font-size:18px}.payroll-progress span{font-size:11px;color:#62766a}.payroll-progress progress{display:block;width:100%;height:7px;margin-top:8px;border:0;border-radius:10px;overflow:hidden;accent-color:#a7ba58;background:#edf0e4}.payroll-progress progress::-webkit-progress-bar{background:#edf0e4}.payroll-progress progress::-webkit-progress-value{background:#a7ba58}.payroll-unset{font-size:12px;color:#98651e}.payroll-footnote{font-size:12px;color:#62766a;margin:16px 0}.payroll-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.payroll-calculation{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:15px;padding:0 20px 18px}.payroll-calculation>div{display:grid;gap:8px}.payroll-calculation span{font-size:12px;color:#62766a}.payroll-calculation strong{font-size:20px}.payroll-performance>.payroll-progress,.payroll-performance>.muted,.payroll-performance>.payroll-unset{display:block;margin:0 20px 18px}.payroll-performance .payroll-progress>div{justify-content:flex-start;gap:16px}.payroll-ledger-row{display:grid;grid-template-columns:minmax(0,1fr) auto 70px;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid #e3e5db;font-size:13px}.payroll-ledger-row small,.payroll-sources small{display:block;color:#64736b;font-size:11px;margin-top:4px}.payroll-ledger-row p{margin:5px 0 0;overflow-wrap:anywhere}.payroll-ledger-row .btn{min-height:36px;padding:6px;font-size:12px}.payroll-entry-amount{white-space:nowrap;font-variant-numeric:tabular-nums}.payroll-ledger-row.is-void{background:#f4f4ee;color:#758077}.is-void .payroll-entry-amount{text-decoration:line-through}.payroll-entry-state{font-size:11px}.payroll-void-reason{font-size:11px}.payroll-inline-note{padding:13px 20px;margin:0;font-size:11px;background:#f6f7ef}.payroll-empty{padding:20px;margin:0;color:#62766a;font-size:13px}.payroll-sources>div{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid #e3e5db;font-size:13px}.payroll-sources>div>strong{white-space:nowrap}.payroll-side summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:18px 20px;font-weight:650;list-style:none}.payroll-side summary small{display:block;font-weight:400;color:#62766a;margin-top:5px;font-size:12px}.payroll-side summary svg{width:18px;height:18px}.payroll-side details[open]>summary{border-bottom:1px solid #e3e5db}.payroll-form{display:grid;gap:16px;padding:18px 20px}.payroll-form p{margin:0;font-size:12px;color:#62766a;line-height:1.5}.payroll-form input,.payroll-form select{width:100%;min-width:0;min-height:44px}.payroll-form [hidden]{display:none!important}.payroll-tier{display:grid;grid-template-columns:minmax(0,1fr) 75px 28px;gap:8px;align-items:end;margin-bottom:10px}.payroll-tier label{display:grid;gap:6px;font-size:11px}.payroll-tier input{padding:10px}.payroll-tier .btn{padding:5px;min-width:0}.payroll-tier svg{width:16px;height:16px}.payroll-form [data-payroll-tiers]>.btn{font-size:12px;min-height:36px;margin-bottom:10px}.payroll-rules{padding:20px}.payroll-rules h2{font-size:20px;margin:0 0 14px}.payroll-rules p{font-size:12px;color:#536a5e;line-height:1.6;margin:0 0 10px}.payroll-rules small{font-size:11px;color:#708078}.payroll-history>div{padding:12px 20px;border-top:1px solid #e3e5db;display:grid;gap:5px;font-size:12px}.payroll-history small{color:#708078;font-size:11px}.payroll-history>p{padding:0 20px;font-size:12px}.payroll-pagination{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px;font-size:12px}.payroll-pagination .btn{min-height:36px;font-size:12px}.payroll-dialog{width:min(500px,calc(100vw - 24px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #dbdfd3;border-radius:16px;background:#fffefa;color:#174b40;overflow:auto}.payroll-dialog::backdrop{background:#153e355c}.payroll-dialog>.payroll-panel-heading{border-bottom:1px solid #dbdfd3}.payroll-dialog>p{padding:0 20px;font-size:13px}.payroll-form-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payroll-form-error{margin:0}.payroll-layout .hint-box{margin-bottom:16px}.payroll-name:focus-visible,.payroll-side summary:focus-visible{outline:2px solid #174b40;outline-offset:3px}
@media(max-width:1200px){.payroll-detail-grid{grid-template-columns:minmax(0,1fr) 300px}.payroll-heading{flex-wrap:wrap}}
@media(max-width:850px){.payroll-detail-grid{grid-template-columns:1fr}.payroll-side{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:16px}.payroll-side>.payroll-panel{margin:0}.payroll-history{grid-column:1 / -1}.payroll-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.payroll-heading{gap:14px;margin-bottom:16px}.payroll-heading h1{font-size:30px}.payroll-stats{gap:8px}.payroll-stat{padding:13px 12px}.payroll-stat strong{font-size:22px}.payroll-stat small{font-size:10px}.payroll-side{grid-template-columns:1fr}.payroll-panel-heading{padding:14px;flex-wrap:wrap}.payroll-panel-heading h2{font-size:20px}.payroll-panel-heading .btn{min-height:40px;padding:9px;font-size:12px}.payroll-calculation{padding:0 14px 15px;grid-template-columns:1fr 1fr}.payroll-calculation>div:first-child{grid-column:1 / -1}.payroll-ledger-row{padding:12px 14px;grid-template-columns:minmax(0,1fr) auto;gap:6px}.payroll-ledger-row>.btn,.payroll-entry-state{grid-column:2;justify-self:end}.payroll-ledger-row>div{grid-row:1 / 3}.payroll-sources>div{padding:12px 14px}.payroll-form-pair{grid-template-columns:1fr}.payroll-form{padding:16px}.payroll-dialog{max-height:calc(100dvh - 24px)}.payroll-inline-note{padding:12px 14px}.payroll-stats+.hint-box{font-size:12px}}

/* Keep the native month picker, with consistent geometry and text on iOS. */
.payroll-heading>div:first-child{min-width:0}
.payroll-month-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:7px 8px;width:330px;max-width:100%;min-width:0;flex-shrink:0}
.payroll-month-controls>label{grid-column:1/-1;font-size:12px;font-weight:600}
.payroll-month-controls>.btn{width:44px;height:44px;min-height:44px;min-width:0;padding:10px;display:grid;place-items:center}
.payroll-month-controls [data-action="payroll-next"] svg{transform:rotate(180deg)}
.payroll-month-picker{position:relative;display:grid;place-items:center;min-width:0;height:44px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--white);overflow:hidden;font-size:16px;font-weight:600}
.payroll-month-picker>span{pointer-events:none;white-space:nowrap}
.payroll-month-controls .payroll-month-picker input{position:absolute;inset:0;display:block;width:100%;max-width:100%;min-width:0;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;box-sizing:border-box}
.payroll-month-picker:focus-within{outline:2px solid var(--green);outline-offset:2px}
/* Roster rows adapt to their available width, including the desktop sidebar. */
.payroll-roster{container:payroll-roster/inline-size}
.payroll-person{--payroll-person-columns:minmax(140px,1fr) minmax(420px,3fr) 44px;display:grid;grid-template-columns:var(--payroll-person-columns);grid-template-areas:"identity figures open" "progress progress progress";gap:0 18px;align-items:center;padding:13px 18px;border-top:1px solid #e3e5db;min-width:0}
.payroll-person .payroll-identity{grid-area:identity;gap:4px;overflow-wrap:anywhere}
.payroll-person .payroll-name{font-size:16px;line-height:21px}
.payroll-person .payroll-identity small{font-size:11px;line-height:16px}
.payroll-person-figures{grid-area:figures;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0;align-items:start}
.payroll-person-figures .payroll-figure{gap:3px;line-height:17px;min-width:0}
.payroll-person-figures .payroll-figure strong{font-size:15px;line-height:20px;overflow-wrap:anywhere}
.payroll-figure-balance strong{color:var(--green)}
.payroll-person>.payroll-person-open{grid-area:open;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;align-self:center}
.payroll-person-open svg{width:18px;height:18px}
.payroll-person-progress{grid-area:progress;display:grid;grid-template-columns:var(--payroll-person-columns);align-items:center;gap:12px 18px;margin-top:10px;padding-top:8px;border-top:1px solid #edf0e7;font-size:11px;color:#62766a;min-width:0}
.payroll-person-progress>span{overflow-wrap:anywhere}
.payroll-person-progress progress{grid-column:2/-1;display:block;width:100%;height:5px;border:0;border-radius:5px;overflow:hidden;accent-color:#a7ba58;background:#edf0e4}
.payroll-person-progress progress::-webkit-progress-bar{background:#edf0e4}
.payroll-person-progress progress::-webkit-progress-value{background:#a7ba58}
@container payroll-roster (max-width:760px){
  .payroll-person{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"identity open" "figures figures" "progress progress";padding:12px 14px;gap:0 10px}
  .payroll-person-figures{margin-top:10px;gap:8px}
  .payroll-person-figures .payroll-figure strong{font-size:14px;line-height:19px}
  .payroll-person-progress{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:8px;padding-top:7px}
  .payroll-person-progress progress{grid-column:1}
}
@container payroll-roster (max-width:480px){
  .payroll-person-figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
}
.payroll-stat{align-content:start}
.payroll-stat-gross{display:grid;gap:4px;padding-top:9px;margin-top:2px;border-top:1px solid #dbdfd3;min-width:0}
.payroll-stat-gross>span{font-size:12px}
.payroll-stat-gross>b{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.payroll-stat-accent .payroll-stat-gross{border-color:#ffffff40}
.payroll-sgk-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;padding:15px 18px;margin-bottom:12px;background:#edf3e9;border:1px solid #d1ddca;border-radius:14px}
.payroll-sgk-summary h2{margin:0;font-family:inherit;font-size:16px;line-height:1.3;font-weight:700;color:#174b40}
.payroll-sgk-summary dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;min-width:0}
.payroll-sgk-summary dl>div{display:grid;gap:4px;min-width:0;padding-left:16px;border-left:1px solid #d1ddca}
.payroll-sgk-summary dt{font-size:12px;color:#536a5e}
.payroll-sgk-note{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5;color:#536a5e}
.payroll-sgk-summary dd{margin:0;font-size:20px;line-height:1.3;font-weight:650;font-variant-numeric:tabular-nums;color:#174b40;overflow-wrap:anywhere}
@media(max-width:540px){
  .payroll-sgk-summary{grid-template-columns:1fr;gap:10px;padding:13px 12px;margin-bottom:8px}
  .payroll-sgk-summary dl{gap:8px}
  .payroll-sgk-summary dl>div{padding-left:8px}
  .payroll-sgk-summary dl>div:first-child{padding-left:0;border-left:0}
  .payroll-sgk-summary dt{font-size:11px}
  .payroll-sgk-summary dd{font-size:17px}
}
@media(max-width:359px){.payroll-sgk-summary dd{font-size:15px}}
.payroll-calculation>div{min-width:0;align-content:start}
.payroll-calculation strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:540px){
  .payroll-month-controls{width:100%}
  .payroll-heading p{font-size:14px;line-height:21px}
  .payroll-panel-heading{gap:5px 12px}
  .payroll-panel-heading h2{font-size:18px}
}
@media(max-width:359px){
  .payroll-stat>strong{font-size:19px}
  .payroll-person{padding-inline:12px}
  .payroll-person-figures .payroll-figure strong{font-size:13px}
}