/* Empty states and utility controls share the workspace's neutral material and rhythm. */
html[data-theme] .content .empty{
 display:grid;align-content:center;gap:8px;min-height:112px;margin:0;
 padding:28px;border:1px solid var(--line)!important;border-radius:14px;
 color:var(--muted)!important;background:linear-gradient(145deg,var(--clear-sheen),transparent 65%),var(--panel)!important;
 box-shadow:none!important;font:400 14px/1.65 var(--font-ui);text-align:left;
}
html[data-theme] .content .empty :is(h2,h3,strong){margin:0;color:var(--text)!important;font:500 18px/1.4 var(--font-ui)!important;letter-spacing:-.02em}
html[data-theme] .content .empty :is(p,span){max-width:72ch;margin:0;color:var(--muted)!important;font:400 14px/1.65 var(--font-ui)}
html[data-theme] .content :is(.panel,.whatsapp-inbox,.notification-center)>.empty{
 background:transparent!important;border:0!important;border-radius:0;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-theme] .content .project-grid>.empty{grid-column:1/-1}
html[data-theme] .content .whatsapp-inbox:has(>.empty){padding:0;overflow:visible}
html[data-theme] .content .whatsapp-empty{min-height:112px;padding:24px}
/* Finance labels are separate rows above bounded, equally aligned inputs. */
html[data-theme] .content .toolbar:has(#finance-month){
 display:grid;grid-template-columns:minmax(160px,240px) minmax(180px,280px) max-content;
 align-items:end;justify-content:start;gap:16px;margin:24px 0;
}
html[data-theme] .content .toolbar:has(#finance-month)>label{
 display:grid;align-content:start;gap:8px;min-width:0;color:var(--muted);font:400 12px/1.5 var(--font-ui);
}
html[data-theme] .content .toolbar :is(#finance-month,#finance-source){display:block;width:100%;min-width:0;max-width:none;min-height:44px;margin:0;font:400 14px/1.5 var(--font-ui)}
html[data-theme] .content .toolbar:has(#finance-month)>button{align-self:end;min-height:44px;margin:0;width:max-content}
/* The queue and its history align with every other content surface. */
html[data-theme] .content :is(.notification-section,.notification-history){
 width:100%!important;max-width:none;margin:0 0 20px;padding:24px;border:1px solid var(--line);border-radius:14px;
 background:linear-gradient(145deg,var(--clear-sheen),transparent 65%),var(--panel)!important;
 box-shadow:none;backdrop-filter:blur(5px) saturate(1);-webkit-backdrop-filter:blur(5px) saturate(1);
}
html[data-theme] .content .notification-section .panel-head{margin:0 0 16px;align-items:center}
html[data-theme] .content .notification-section .panel-head h2{margin:0;font:italic 400 26px/1.25 'Instrument Serif',Georgia,serif;letter-spacing:-.02em}
html[data-theme] .content .notification-section .panel-head>span{font-size:12px;color:var(--muted)}
html[data-theme] .content .notification-center{gap:0}
html[data-theme] .content .notification-center>.empty{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:100px;padding:20px 0;font-size:14px;text-align:left}
html[data-theme] .content .notification-center>.empty:before{
 content:'✓';display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;
 color:var(--text);border:1px solid var(--line);border-radius:50%;background:transparent;font:400 14px/1 var(--font-ui);
}
html[data-theme] .content .notification-card{padding:18px 0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;gap:12px}
html[data-theme] .content .notification-card:last-child{border-bottom:0}
html[data-theme] .content .notification-card .kind-dot{box-shadow:none}
html[data-theme] .content .notification-copy strong{font:500 14px/1.45 var(--font-ui)}
html[data-theme] .content .notification-copy small{font:400 12px/1.6 var(--font-ui)}
html[data-theme] .content .notification-state{font:400 10px/1.4 var(--font-ui);letter-spacing:.02em}
html[data-theme] .content .notification-actions{gap:8px;flex-wrap:wrap}
html[data-theme] .content .notification-actions button{font-size:12px}
html[data-theme] .content .notification-history summary{font:400 14px/1.5 var(--font-ui)}
/* Connection details remain readable without a lime headline or an opaque empty box. */
html[data-theme] .content .whatsapp-heading p{font:400 14px/1.65 var(--font-ui);max-width:58ch;margin:12px 0 0}
html[data-theme] .content .wa-count{min-width:100px;padding:14px 16px;gap:6px;border-radius:12px;backdrop-filter:blur(5px)}
html[data-theme] .content .wa-count strong{font:500 26px/1.2 var(--font-ui);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
html[data-theme] .content .wa-count span{margin:0;font:400 10px/1.5 var(--font-ui);letter-spacing:.04em}
html[data-theme] .content .whatsapp-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:12px;padding:16px;margin:24px 0 16px;backdrop-filter:blur(5px)}
html[data-theme] .content .wa-search{width:min(100%,520px);min-width:0;gap:8px;font:400 11px/1.5 var(--font-ui);letter-spacing:.04em}
html[data-theme] .content .wa-search input{width:100%;min-height:44px;font:400 14px/1.5 var(--font-ui)}
html[data-theme] .content .connection-state{margin:0;align-self:end;min-height:40px;display:inline-flex;align-items:center;gap:8px;font-size:12px}
html[data-theme] .content .access-note{padding:20px 24px;margin:0 0 16px;font:400 14px/1.65 var(--font-ui)}
html[data-theme] .content .access-note>strong{display:block;color:var(--text)!important;font:500 14px/1.6 var(--font-ui)}
html[data-theme] .content .access-note>p{max-width:100ch;margin:12px 0 0;color:var(--muted);font:400 14px/1.65 var(--font-ui)}
@media(max-width:740px){
 html[data-theme] .content .toolbar:has(#finance-month){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 html[data-theme] .content .toolbar:has(#finance-month)>button{grid-column:1/-1}
 html[data-theme] .content .whatsapp-toolbar{grid-template-columns:minmax(0,1fr) auto;padding:16px}
 html[data-theme] .content .wa-search{grid-column:1/-1;width:100%}
 html[data-theme] .content .connection-state{justify-self:start;min-width:0;white-space:normal}
 html[data-theme] .content :is(.notification-section,.notification-history){padding:18px}
 html[data-theme] .content .empty{padding:24px;min-height:104px}
 html[data-theme] .content .access-note{padding:18px}
}
@media(max-width:420px){html[data-theme] .content .toolbar:has(#finance-month){grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-transparency:reduce){html[data-theme] .content :is(.empty,.notification-section,.notification-history){background:var(--bg)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Remove inherited inset widths so every page shares the same content edge. */
html[data-theme] .content>:is(.heading,.intro,.quick-strip,.bento-grid,.metric-grid,.two-col,.cards,.stage-grid,.toolbar,.table-wrap,.project-grid,.delivery-summary,.task-board,.calendar-layout,.finance-hero,.finance-grid,.invoice-stats,.invoice-list,.portal-hero,.client-switcher,.portal-command-bar,.portal-grid,.portal-bento,.access-note,.inline-form,.people-grid,.panel,.whatsapp-toolbar,.whatsapp-inbox){width:100%;max-width:100%;margin-left:0;margin-right:0}
html[data-theme] .content>.heading{padding:0;margin-bottom:16px;gap:24px;align-items:center}
html[data-theme] .content>.intro{padding:0;margin:0 0 28px;max-width:72ch;font:400 14px/1.65 var(--font-ui)}
html[data-theme] .content .heading h1{font:italic 400 clamp(42px,4.5vw,64px)/1.1 'Instrument Serif',Georgia,serif;letter-spacing:-.025em;margin:0}
html[data-theme] .content .heading .actions{width:auto;justify-content:flex-end;flex-wrap:wrap;gap:10px}
html[data-theme] .content .access-note details{margin-top:10px;color:var(--muted);max-width:90ch}
html[data-theme] .content .access-note details summary{font:400 12px/1.6 var(--font-ui);cursor:pointer;width:max-content}
html[data-theme] .content .access-note details p{font:400 13px/1.65 var(--font-ui);margin:10px 0 0}
@media(max-width:740px){html[data-theme] .content>.heading{align-items:flex-start;gap:18px}html[data-theme] .content .heading .actions{justify-content:flex-start;width:100%}html[data-theme] .content .heading .actions button{flex:0 1 auto}html[data-theme] .content .heading h1{font-size:44px}}

/* Submit and session restoration share one loader; the auth callback keeps it mounted. */
html[data-theme] .auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;background:transparent;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text)}
html[data-theme] .auth-loading>.morphing-infinity{width:72px;height:72px;margin:0 0 8px}
html[data-theme] .auth-loading>span{font:400 12px/1.6 var(--font-ui);letter-spacing:.12em;text-transform:uppercase}
html[data-theme] .auth-loading>small{font:400 11px/1.6 var(--font-ui);letter-spacing:normal;color:var(--muted)}
html[data-theme] .signin-loading-stage.auth-loading{position:fixed;inset:0;z-index:60;min-height:100svh;padding:32px 20px;max-width:none;background:transparent!important;animation:none!important}

/* Empty ledger rows are information, not interactive green selections. */
@media(hover:hover){
 html[data-theme] .content :is(tbody tr,.upgrade-table tbody tr):hover{background:rgb(128 128 128 / .045)!important}
 html[data-theme] .content tbody tr:has(td[colspan]):hover{background:transparent!important}
}

.access-setup{display:grid;gap:6px;align-content:start;min-width:0;max-width:100%}
.access-setup small{display:block;max-width:34ch;color:var(--muted);font:400 11px/1.5 var(--font-ui);overflow-wrap:anywhere}
.employee-card footer:has(.access-setup){display:flex;flex-wrap:wrap;align-items:start;gap:10px}
.content .row:has(>.access-setup){display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.content .row:has(>.access-setup)>div:first-child{flex:1 1 200px;min-width:0}
@media(max-width:600px){.content .row:has(>.access-setup)>.access-setup{flex:1 1 100%}}

/* Lenis owns document interpolation; native smooth scrolling must not compete. */
html.lenis,html.lenis body{scroll-behavior:auto!important}
/* Dialog titles share the expressive face without an opaque header slab. */
html[data-theme] .modal>header{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;top:auto;margin:0 0 26px;padding:0 0 18px;background:transparent!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0;border-bottom:1px solid var(--line)}
html[data-theme] .modal>header h2{font:italic 400 clamp(30px,3vw,38px)/1.15 'Instrument Serif',Georgia,serif!important;letter-spacing:-.02em;margin:0;max-width:none;min-width:0;overflow-wrap:anywhere}
html[data-theme] .modal>header .icon-btn{flex:none;align-self:center;margin:0;display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;background:transparent!important;border:1px solid var(--line);border-radius:50%;font:400 24px/1 var(--font-ui)}
html[data-theme] .modal>.form-grid{gap:20px 18px;align-items:start}
html[data-theme] .modal .form-grid>label{display:grid;gap:8px;align-content:start;margin:0;min-width:0;font:400 13px/1.5 var(--font-ui);color:var(--muted)}
html[data-theme] .modal .form-grid>label:has(>input[type=checkbox]){display:flex;align-items:center;gap:10px}
html[data-theme] .modal .form-grid>label>input[type=checkbox]{width:18px;height:18px;min-height:18px;flex:none}
html[data-theme] .modal .form-grid>label :is(input,select,textarea){margin:0}

html[data-theme] .academy-editor>.panel-head h2{font:italic 400 30px/1.2 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;margin:0}
@media(prefers-reduced-motion:no-preference){html[data-theme]:not([data-motion=reduced]) .content .heading h1.soft-blur-in .sbi-character{animation:parity-word-reveal 1.6s cubic-bezier(.16,1,.3,1) both!important;animation-delay:var(--soft-blur-delay)!important}}