/* Shared layout tokens and component rules, loaded after the original screens. */
:root{
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
 --page-gutter:24px;--card-inset:20px;--section-gap:16px;--card-radius:14px;--control-radius:6px;--tap-size:44px;
 --font-xs:.625rem;--font-sm:.75rem;--font-md:.875rem;--font-field:1rem;--font-heading:1.5rem;--font-section:1rem;
}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--font-md)}
main,main.grafik-page{max-width:calc(1024px + 2 * var(--page-gutter));width:100%;margin-inline:auto;padding:var(--page-gutter);min-width:0}
main.grafik-page{--calendar-inset:var(--card-inset)}
main>*,.workspace,.details-page,.payout-page,.settings-grid{min-width:0}
.details-page,.payout-page,.grafik-layout,.summary-page{max-width:1024px;width:100%;margin-inline:auto}
.panel{border:1px solid var(--line);border-radius:var(--card-radius)}
.calendar-panel,.details-page .payroll-card,.payout-form-panel,.settings-section{padding:var(--card-inset)}
.calendar-panel .month-summary{margin:0;padding:var(--space-3) 0 0}
.calendar-panel .month-controls{grid-template-columns:var(--tap-size) minmax(0,1fr) var(--tap-size)}
.calendar-panel .month-controls>.icon-button,.month-controls>.icon-button{width:var(--tap-size);height:var(--tap-size);min-width:var(--tap-size)}
.month-controls{justify-content:center;min-width:0;gap:var(--space-1)}
.month-select{min-width:0;max-width:100%;font-size:1.25rem;line-height:1.4}
.calendar-panel .month-select{font-size:clamp(1.125rem,3vw,1.5rem)}
.calendar-panel .calendar-toolbar{margin-bottom:var(--space-4)}
.calendar-panel .legend-toggle{width:var(--tap-size);height:var(--tap-size)}
.calendar-panel .legend-details{padding:0}
.calendar-panel .has-net .stat strong{overflow-wrap:anywhere;font-size:clamp(1rem,4.5vw,1.875rem)}
.calendar-panel .has-net .stat>span{font-size:var(--font-xs);min-height:2.8em}
.calendar-panel .net-stat{min-height:var(--tap-size)}
.calendar-panel .net-stat[aria-pressed=true]{font-size:var(--font-sm);overflow-wrap:anywhere;white-space:normal}
.page-title-row,.details-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--section-gap);min-height:var(--tap-size)}
.page-title-row{flex-wrap:wrap}
.page-title-row h1,.details-heading h1{margin:0;font:600 var(--font-heading)/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.5px;overflow-wrap:anywhere}
.details-heading>span{font-size:var(--font-xs);flex-shrink:0}
.details-month{margin-bottom:var(--section-gap)}
.details-month .month-select{font-size:1.125rem}
.details-page .payroll-card{margin:var(--section-gap) 0 0}
.details-page .forecast-net{font-size:clamp(1.5rem,7vw,2.5rem);overflow-wrap:anywhere}
.forecast-metrics strong{font-size:var(--font-md);overflow-wrap:anywhere}
.forecast-metrics span,.forecast-label{font-size:var(--font-xs)}
.payroll-control-body strong{white-space:normal;overflow-wrap:anywhere}
.payroll-controls{gap:var(--space-2);padding-top:var(--space-3);margin-top:var(--space-3)}
.payroll-control-label,.payroll-controls .payout-link{font-size:var(--font-xs)}
.payroll-controls .monthly-fixed-bonus{font-size:var(--font-sm)}
.deductions dl>div{font-size:var(--font-sm)}
.deductions>summary{min-height:var(--tap-size);padding-top:var(--space-2);font-size:var(--font-xs)}
.deductions dt,.deductions dd{overflow-wrap:anywhere;min-width:0}
.details-table-scroll,.table-scroll{max-width:100%;overscroll-behavior-inline:contain}
.details-table{min-width:440px}.details-table .date-col{width:64px}.details-table .shift-col{width:52px}.details-table .total-col{width:48px}.details-table .net-col{width:80px}.details-table th,.details-table td{height:46px;padding:4px 6px;font-size:var(--font-xs)}.details-table thead th,.details-table tfoot th,.details-table tfoot td{height:46px;border-top-width:1px}.details-table tbody th:first-child{border-right-width:2px}.details-table .shift-badge{width:36px;min-width:36px;height:36px}.details-table .hours-input{height:36px}.details-table-scroll{width:100%;min-width:0;overflow:auto;isolation:isolate}
.details-table .day-net{font-size:var(--font-xs)}
.details-table .day-total,.details-table .hours-input,.details-table tfoot td:nth-child(n+3):nth-child(-n+7){font-family:inherit;font-size:var(--font-field);font-weight:400;line-height:1.5;vertical-align:middle;font-variant-numeric:tabular-nums}
.details-table .day-control{font-size:12px;min-width:50px;height:36px;min-height:36px}
.details-table .day-control span{font-size:.5625rem}
.payout-form-panel{margin-bottom:0}
.payout-fields{gap:var(--space-2)}
.payout-fields label{font-size:var(--font-sm);line-height:1.4;min-width:0}
.payout-fields input{font-size:var(--font-field);border-radius:var(--control-radius)}
.payout-metric-card,.payout-overall-value{border-radius:var(--control-radius)}
.settings-grid{gap:var(--section-gap)}
.settings-heading{gap:var(--space-3);margin-bottom:var(--space-4);align-items:center}
.settings-heading h2{font-size:var(--font-section);margin:0;line-height:1.4}
.settings-heading p{font-size:var(--font-xs);line-height:1.6;margin:var(--space-1) 0 0}
.settings-heading>.icon{width:22px;height:22px;color:var(--gold);flex-shrink:0}
.payroll-fields,.limits-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.payroll-fields>label,.limits-fields>label{min-width:0;font-size:var(--font-sm);line-height:1.4;color:var(--muted)}
.payroll-fields input:not([type=checkbox]),.payroll-fields select,.limits-fields input,.limits-fields select{width:100%;max-width:none;min-width:0;min-height:var(--tap-size);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--control-radius);background:var(--bg);color:var(--ink);font-size:var(--font-field);text-align:center}
.limits-fields .year-select{grid-column:1/-1;justify-self:start}
.year-select{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--muted);flex-shrink:0}
.year-select select,.limits-fields .year-select select{width:auto;min-width:76px;min-height:var(--tap-size);margin:0;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);color:var(--ink);font-size:var(--font-md);text-align:center}
.check-label{min-height:var(--tap-size);font-size:var(--font-sm)}
.theme-choice{min-height:var(--tap-size);font-size:var(--font-sm);padding:var(--space-2);gap:var(--space-2)}
.theme-columns{gap:var(--space-3)}
.button{min-height:var(--tap-size);border-radius:var(--control-radius)}
.icon-button:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dialog-top{gap:var(--space-3);margin-bottom:var(--space-4)}
.dialog-top h2{font-size:1.25rem;line-height:1.4;overflow-wrap:anywhere}
.dialog-top>.icon-button{width:var(--tap-size);min-width:var(--tap-size);height:var(--tap-size);margin:0}
.status-options{gap:var(--space-3)}
.status-option{min-height:var(--tap-size);font-size:var(--font-sm)}
.dialog-top p,.small-text{font-size:var(--font-xs)}
@media(max-width:700px){
 :root{--page-gutter:16px;--card-inset:14px;--section-gap:12px}
 main.grafik-page{--page-gutter:16px;padding-bottom:calc(84px + var(--page-gutter) + env(safe-area-inset-bottom))}
 .topbar{min-height:72px;height:auto;padding:var(--space-2) var(--page-gutter);border-radius:0 0 var(--card-radius) var(--card-radius)}
 .topbar-right{gap:var(--space-3)}
 .avatar{width:var(--tap-size);height:var(--tap-size);font-size:var(--font-sm);flex-shrink:0}
 .connection{font-size:.5625rem;white-space:nowrap}
 .mobile-brand>.brand-credit{font-size:12px;line-height:16px;font-weight:450;color:color-mix(in srgb,var(--ink) 76%,var(--muted))}
 .page-title-row h1,.details-heading h1{font-size:1.375rem}
 .payroll-fields{grid-template-columns:minmax(0,1fr)}
 .limits-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .details-table{min-width:440px}
 .details-table .date-col{width:64px}.details-table .shift-col{width:52px}.details-table .total-col{width:48px}.details-table .net-col{width:80px}
 .payout-page .payout-fields label{font-size:var(--font-xs);white-space:normal}
 .payout-page .payout-actions .button{font-size:var(--font-xs)}
 .payout-actions .payout-status{font-size:var(--font-xs);white-space:normal}
 .payout-page .payout-metric-card dt{font-size:var(--font-sm)}
 .payout-page .payout-metric-card dd{font-size:var(--font-md)}
 .payout-page .has-long-money .payout-fields{grid-template-columns:minmax(0,1fr)}
 .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);padding:6px max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-radius:var(--card-radius) var(--card-radius) 0 0}
 .bottom-nav .nav-item{display:grid;grid-template-rows:27px 2.4em;justify-items:center;align-content:center;gap:4px;min-width:0;min-height:68px;padding:4px 1px;font-size:12px;line-height:1.2}
 .bottom-nav .nav-item span{max-width:100%;overflow-wrap:normal;white-space:normal;text-align:center;line-height:1.2}
 .bottom-nav .nav-item .icon{width:26px;height:26px}
 .page-footer{padding:var(--space-5) var(--page-gutter) calc(100px + env(safe-area-inset-bottom))}
 dialog{padding:var(--card-inset);border-radius:var(--card-radius);max-width:calc(100vw - 2 * var(--page-gutter))}
}
@media(max-width:360px){:root{--page-gutter:12px;--card-inset:12px}main.grafik-page{--page-gutter:12px}.year-select{gap:var(--space-1)}.year-select>span{display:none}.year-select select{min-width:72px}.topbar-right{gap:var(--space-2)}}

.brand .brand-credit{font-size:12px;font-weight:450;color:color-mix(in srgb,var(--ink) 76%,var(--muted))}.brand-credit i{font-size:14px}
.deductions>summary{flex-wrap:wrap;row-gap:8px}.deductions-label{font-size:12px}.deductions-total{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;max-width:100%;margin-left:auto;font-variant-numeric:tabular-nums}.deductions-percent{font-size:20px;line-height:1.25;font-weight:600;color:var(--ink)}.deductions-amount{font-size:12px;color:var(--ink)}.deductions-total b{flex:none}

@media(max-width:700px){.bottom-nav .nav-item.active{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}[data-theme=light] .bottom-nav .nav-item.active,[data-theme=warm] .bottom-nav .nav-item.active,[data-theme=frost] .bottom-nav .nav-item.active{color:color-mix(in srgb,var(--gold) 60%,var(--ink))}}