/* Theme selectors are canonical for both the applied shell and locally scoped Appearance previews. */
:root,[data-portal-theme="afp-navy"]{--brand-primary:#071B58;--brand-primary-hover:#061747;--brand-primary-active:#04113D;--brand-primary-subtle:#EEF2FF;--brand-primary-border:rgba(7,27,88,.28);--brand-on-primary:#fff;--brand-focus:rgba(7,27,88,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#075AA5;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="ces-blue"]{--brand-primary:#075AA5;--brand-primary-hover:#064B8A;--brand-primary-active:#043F75;--brand-primary-subtle:#EFF7FF;--brand-primary-border:rgba(7,90,165,.28);--brand-on-primary:#fff;--brand-focus:rgba(7,90,165,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#2F80ED;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="command-blue"]{--brand-primary:#1E40AF;--brand-primary-hover:#1E3A8A;--brand-primary-active:#172F72;--brand-primary-subtle:#EFF6FF;--brand-primary-border:rgba(30,64,175,.28);--brand-on-primary:#fff;--brand-focus:rgba(30,64,175,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#3B82F6;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="royal-indigo"]{--brand-primary:#4338CA;--brand-primary-hover:#3730A3;--brand-primary-active:#2E2788;--brand-primary-subtle:#EEF2FF;--brand-primary-border:rgba(67,56,202,.28);--brand-on-primary:#fff;--brand-focus:rgba(67,56,202,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#6366F1;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="violet"]{--brand-primary:#6D28D9;--brand-primary-hover:#5B21B6;--brand-primary-active:#4C1D95;--brand-primary-subtle:#F5F3FF;--brand-primary-border:rgba(109,40,217,.28);--brand-on-primary:#fff;--brand-focus:rgba(109,40,217,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#8B5CF6;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="plum"]{--brand-primary:#7E22CE;--brand-primary-hover:#6B21A8;--brand-primary-active:#581C87;--brand-primary-subtle:#FAF5FF;--brand-primary-border:rgba(126,34,206,.28);--brand-on-primary:#fff;--brand-focus:rgba(126,34,206,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#A855F7;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="burgundy"]{--brand-primary:#881337;--brand-primary-hover:#701A2E;--brand-primary-active:#5A1226;--brand-primary-subtle:#FFF1F2;--brand-primary-border:rgba(136,19,55,.28);--brand-on-primary:#fff;--brand-focus:rgba(136,19,55,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#BE123C;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="rose"]{--brand-primary:#9F1239;--brand-primary-hover:#881337;--brand-primary-active:#70102E;--brand-primary-subtle:#FFF1F2;--brand-primary-border:rgba(159,18,57,.28);--brand-on-primary:#fff;--brand-focus:rgba(159,18,57,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#E11D48;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="burnt-orange"]{--brand-primary:#9A3412;--brand-primary-hover:#7C2D12;--brand-primary-active:#64240F;--brand-primary-subtle:#FFF7ED;--brand-primary-border:rgba(154,52,18,.28);--brand-on-primary:#fff;--brand-focus:rgba(154,52,18,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#EA580C;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="amber"]{--brand-primary:#92400E;--brand-primary-hover:#78350F;--brand-primary-active:#602A0C;--brand-primary-subtle:#FFFBEB;--brand-primary-border:rgba(146,64,14,.28);--brand-on-primary:#fff;--brand-focus:rgba(146,64,14,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#D97706;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="olive"]{--brand-primary:#4D5D12;--brand-primary-hover:#3F4D0F;--brand-primary-active:#333E0C;--brand-primary-subtle:#F7FEE7;--brand-primary-border:rgba(77,93,18,.28);--brand-on-primary:#fff;--brand-focus:rgba(77,93,18,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#758A24;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="forest"]{--brand-primary:#176522;--brand-primary-hover:#14551D;--brand-primary-active:#104618;--brand-primary-subtle:#F0FDF4;--brand-primary-border:rgba(23,101,34,.28);--brand-on-primary:#fff;--brand-focus:rgba(23,101,34,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#2E8B3C;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="emerald"]{--brand-primary:#047857;--brand-primary-hover:#065F46;--brand-primary-active:#064E3B;--brand-primary-subtle:#ECFDF5;--brand-primary-border:rgba(4,120,87,.28);--brand-on-primary:#fff;--brand-focus:rgba(4,120,87,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#10B981;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="teal"]{--brand-primary:#0F766E;--brand-primary-hover:#115E59;--brand-primary-active:#134E4A;--brand-primary-subtle:#F0FDFA;--brand-primary-border:rgba(15,118,110,.28);--brand-on-primary:#fff;--brand-focus:rgba(15,118,110,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#14B8A6;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="slate"]{--brand-primary:#334155;--brand-primary-hover:#1E293B;--brand-primary-active:#172033;--brand-primary-subtle:#F8FAFC;--brand-primary-border:rgba(51,65,85,.28);--brand-on-primary:#fff;--brand-focus:rgba(51,65,85,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#64748B;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}
[data-portal-theme="graphite"]{--brand-primary:#292524;--brand-primary-hover:#1C1917;--brand-primary-active:#141210;--brand-primary-subtle:#FAFAF9;--brand-primary-border:rgba(41,37,36,.28);--brand-on-primary:#fff;--brand-focus:rgba(41,37,36,.25);--theme-primary:var(--brand-primary);--theme-primary-hover:var(--brand-primary-hover);--theme-primary-active:var(--brand-primary-active);--theme-on-primary:var(--brand-on-primary);--theme-accent:#57534E;--theme-soft:var(--brand-primary-subtle);--theme-focus:var(--brand-focus);--theme-border-accent:var(--brand-primary-border)}

:root{--brand-navy:#071B58;--brand-blue:#075AA5;--brand-green:#176522;--brand-gold:#F2C300;--neutral-950:#101828;--neutral-900:#172033;--neutral-800:#253044;--neutral-700:#344054;--neutral-600:#475467;--neutral-500:#667085;--neutral-400:#98A2B3;--neutral-300:#D0D5DD;--neutral-200:#E4E7EC;--neutral-100:#F2F4F7;--neutral-50:#F8F9FB;--canvas:#F5F7FA;--surface:#FFFFFF;--success:var(--semantic-success);--success-soft:var(--semantic-success-subtle);--warning:var(--semantic-warning);--warning-soft:var(--semantic-warning-subtle);--danger:var(--semantic-danger);--danger-soft:var(--semantic-danger-subtle);--info:var(--semantic-information);--info-soft:var(--semantic-information-subtle);--shadow-sm:0 1px 2px rgba(16,24,40,.04);--shadow-md:0 12px 30px rgba(16,24,40,.10);--radius-sm:6px;--radius-md:9px;--radius-lg:12px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px}
*{box-sizing:border-box}html{color-scheme:light;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--canvas);color:var(--neutral-900);font-size:16px}body{margin:0;min-width:320px}a{color:var(--theme-primary);text-decoration-thickness:1px;text-underline-offset:3px}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea,summary{outline:none}:focus-visible{box-shadow:0 0 0 4px var(--theme-focus);border-color:var(--theme-primary)!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.app-skip-link{position:fixed;z-index:100;top:-64px;left:16px;padding:12px 18px;background:#fff;border:2px solid var(--theme-primary);border-radius:var(--radius-sm)}.app-skip-link:focus{top:12px}

/* Authenticated shell */
.app-topbar{height:72px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--neutral-200);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,2.2vw,36px);position:sticky;top:0;z-index:30}.app-brand{display:flex;align-items:center;gap:13px;color:var(--brand-navy);text-decoration:none;min-width:0}.app-brand-seal{display:grid;place-items:center;width:46px;height:48px;flex:0 0 auto}.app-brand-seal img{display:block;object-fit:contain;max-width:100%;max-height:100%}.app-brand-copy{display:grid;gap:2px;border-left:1px solid var(--neutral-200);padding-left:13px}.app-brand-copy strong{font:600 16px var(--font-application);letter-spacing:.065em}.app-brand-copy small{color:var(--neutral-500);font-size:11.5px;letter-spacing:.01em}.app-account{display:flex;align-items:center;gap:8px}.appearance-trigger,.account-menu summary{min-height:44px;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;padding:8px 11px;color:var(--neutral-700);font-size:13px;font-weight:500;cursor:pointer}.appearance-trigger:hover,.account-menu summary:hover{background:var(--neutral-100);color:var(--neutral-950)}.appearance-trigger svg,.account-signout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.appearance-trigger svg circle{fill:currentColor;stroke:none}.account-menu{position:relative}.account-menu summary{list-style:none}.account-menu summary::-webkit-details-marker{display:none}.account-menu summary>svg{width:16px;height:16px;fill:none;stroke:var(--neutral-500);stroke-width:1.7}.account-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--theme-soft);color:var(--theme-primary);border:1px solid var(--theme-border-accent);font-size:12px;font-weight:650}.account-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-popover{position:absolute;right:0;top:50px;width:260px;padding:8px;background:#fff;border:1px solid var(--neutral-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.account-popover-identity{display:flex;align-items:center;gap:10px;padding:10px 10px 14px;border-bottom:1px solid var(--neutral-200)}.account-popover-identity>span:last-child{display:grid;gap:2px;min-width:0}.account-popover-identity strong{font-size:13px;overflow:hidden;text-overflow:ellipsis}.account-popover-identity small{font-size:11px;color:var(--neutral-500)}.account-signout{width:100%;min-height:42px;margin-top:6px;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;text-align:left;font-size:13px;font-weight:500}.account-signout:hover{background:var(--neutral-100)}
.app-frame{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 72px)}.app-sidebar{background:#fff;border-right:1px solid var(--neutral-200);padding:28px 16px 20px;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:72px;height:calc(100vh - 72px)}.app-sidebar nav{display:grid;gap:28px}.nav-label,.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:650;font-size:10.5px;color:var(--neutral-500);margin:0 0 9px}.app-sidebar nav a{min-height:44px;position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;font-weight:500;font-size:13.5px;color:var(--neutral-700);transition:background-color 140ms ease,color 140ms ease}.app-sidebar nav a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.app-sidebar nav a:hover{background:var(--neutral-50);color:var(--neutral-950)}.app-sidebar nav a.active{background:var(--theme-soft);color:var(--theme-primary);font-weight:600}.app-sidebar nav a.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--theme-primary)}.sidebar-footer{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--neutral-200)}.security-mark{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--neutral-100);color:var(--neutral-600)}.security-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}.sidebar-footer>span:last-child{display:grid;gap:2px}.sidebar-footer strong{font-size:11.5px;font-weight:600}.sidebar-footer small{font-size:10.5px;color:var(--neutral-500)}.app-main{min-width:0;padding:clamp(28px,3vw,48px) clamp(22px,3.2vw,56px) var(--space-16)}

/* Page hierarchy and actions */
.page-header,.workspace-heading,.record-header,.record-heading{display:flex;justify-content:space-between;gap:var(--space-8);align-items:flex-start;margin:0 0 30px}.page-header.compact,.workspace-heading.compact{margin-bottom:22px}.page-header-copy{min-width:0}.page-header h1,.workspace-heading h1,.record-header h1,.record-heading h1,.error-state h1{font:600 clamp(29px,2.5vw,40px)/1.08 var(--font-application);letter-spacing:-.022em;color:var(--neutral-950);margin:0 0 10px}.page-header-copy>p:last-child,.workspace-heading>div>p:last-child,.record-heading p{margin:0;color:var(--neutral-500);font-size:14px;line-height:1.55;max-width:690px}.heading-actions,.record-summary{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.heading-actions{justify-content:flex-end}.record-summary{color:var(--neutral-600);font-size:13px;margin-top:13px}.summary-divider{width:3px;height:3px;border-radius:50%;background:var(--neutral-400)}.breadcrumbs{display:flex;gap:8px;align-items:center;margin-bottom:20px;font-size:12.5px;color:var(--neutral-500)}.breadcrumbs a{color:var(--neutral-600)}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border:1px solid transparent;border-radius:var(--radius-sm);font-weight:500;font-size:13.5px;line-height:1;text-decoration:none;cursor:pointer;background:#fff;color:var(--neutral-900);transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}.button:disabled{background:var(--neutral-100)!important;color:var(--neutral-400)!important;border-color:var(--neutral-200)!important;opacity:1;cursor:not-allowed}.button-primary{background:var(--theme-primary);color:var(--theme-on-primary);border-color:var(--theme-primary)}.button-primary:hover{background:var(--theme-primary-hover);border-color:var(--theme-primary-hover)}.button-primary:active{background:var(--theme-primary-active)}.button-secondary{border-color:var(--neutral-300);color:var(--neutral-700);box-shadow:var(--shadow-sm)}.button-secondary:hover{background:var(--neutral-50);border-color:var(--neutral-400)}.button-tertiary,.button-ghost{background:transparent;color:var(--theme-primary)}.button-tertiary:hover,.button-ghost:hover{background:var(--theme-soft)}.button-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.button-danger:hover{background:#912018;border-color:#912018}.button-small{min-height:36px;padding:6px 11px;font-size:12.5px}.button-full{width:100%}

/* Feedback */
.alert{display:grid;grid-template-columns:28px minmax(0,1fr) 32px;align-items:start;gap:11px;padding:14px 14px;border-radius:var(--radius-md);margin:0 0 22px;border:1px solid}.alert-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}.alert-icon:after{content:"✓"}.alert-copy{display:grid;gap:3px}.alert-copy strong,.alert>strong{font-size:13px;font-weight:600}.alert-copy>span,.alert>span:not(.alert-icon):not(.alert-copy),.alert li{font-size:13px;line-height:1.45;color:var(--neutral-600)}.alert-dismiss{width:32px;height:32px;border:0;background:transparent;border-radius:var(--radius-sm);font-size:21px;line-height:1;color:currentColor;cursor:pointer}.alert-success{background:var(--success-soft);border-color:#B7DEBF;color:var(--success)}.alert-success .alert-icon{background:#D5EFDA}.alert-error{background:var(--danger-soft);border-color:#F2BBB6;color:var(--danger)}.alert-error .alert-icon{background:#FBD5D2}.alert-error .alert-icon:after{content:"!"}.alert-warning{background:var(--warning-soft);border-color:#F5D5A9;color:var(--warning)}.alert-warning .alert-icon{background:#FBE6C8}.alert-warning .alert-icon:after{content:"!"}.alert-info{background:var(--info-soft);border-color:#B8D2F5;color:var(--info)}.alert-info .alert-icon{background:#D7E7FA}.alert-info .alert-icon:after{content:"i"}

.alert:not(:has(.alert-icon)){grid-template-columns:minmax(0,1fr);gap:3px;border-left-width:4px}.alert:not(:has(.alert-icon))>strong,.alert:not(:has(.alert-icon))>span,.alert:not(:has(.alert-icon))>ul{grid-column:1}

/* Data surfaces */
.data-surface,.reference-surface{background:#fff;border:1px solid var(--neutral-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.filter-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:18px 20px;background:var(--neutral-50);border-bottom:1px solid var(--neutral-200)}.filter-form label,.sort-control{display:grid;gap:6px;font-size:11.5px;font-weight:500;color:var(--neutral-600)}.filter-form input,.filter-form select,.sort-control select,.reference-search input{min-height:42px;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:8px 10px;background:#fff;color:var(--neutral-900);font-size:13px;transition:border-color 140ms ease,box-shadow 140ms ease}.filter-form input:hover,.filter-form select:hover,.sort-control select:hover,.reference-search input:hover{border-color:var(--neutral-400)}.search-field{flex:1 1 300px;min-width:240px}.search-control{position:relative;display:block}.search-control svg,.reference-search svg{position:absolute;width:17px;height:17px;left:12px;top:50%;transform:translateY(-50%);fill:none;stroke:var(--neutral-400);stroke-width:1.8;stroke-linecap:round}.search-control input{width:100%;padding-left:38px}.more-filters{position:relative}.more-filters summary{min-height:42px;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--neutral-300);background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:500;color:var(--neutral-700)}.filter-count{min-width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:var(--theme-soft);color:var(--theme-primary);font-size:10px}.more-filters>div{position:absolute;z-index:12;top:48px;right:0;width:340px;background:#fff;padding:16px;border:1px solid var(--neutral-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:grid;gap:12px}.more-filters>div label{width:100%}.more-filters>div select{width:100%}.data-panel-heading,.pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:20px}.data-panel-heading{border-bottom:1px solid var(--neutral-200)}.data-panel-heading h2{font-size:14px;font-weight:600;margin:0 0 3px;color:var(--neutral-800)}.data-panel-heading p,.pagination{font-size:12px;color:var(--neutral-500);margin:0}.sort-control{display:flex;align-items:center;gap:9px}.sort-control select{min-width:160px}.table-scroll{overflow-x:auto}.personnel-table,table{width:100%;border-collapse:collapse;min-width:800px}.personnel-table th,.personnel-table td,table th,table td{text-align:left;border-bottom:1px solid #EAECF0;padding:14px 16px;font-size:12.75px;line-height:1.35;vertical-align:middle}.personnel-table thead th,table thead th{background:#FAFBFC;font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;color:var(--neutral-500);white-space:nowrap}.personnel-table tbody tr,table tbody tr{transition:background-color 140ms ease}.personnel-table tbody tr:hover,table tbody tr:hover{background:color-mix(in srgb,var(--theme-soft) 55%,#fff)}.personnel-table th small,.personnel-table td small,table td small{display:block;color:var(--neutral-500);font-weight:400;margin-top:4px}.record-link{display:inline-block;font-size:13.5px;font-weight:600;color:var(--neutral-900);text-decoration:none}.record-link:hover{color:var(--theme-primary);text-decoration:underline}.identifier{font:600 11.5px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.015em;color:var(--neutral-700)}.row-open{text-align:right!important;white-space:nowrap}.row-open a{font-weight:500;text-decoration:none}.row-open a span{display:inline-block;margin-left:3px}.actions-column{width:78px}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:var(--neutral-100);color:var(--neutral-600);font-weight:600;font-size:11.5px;text-transform:capitalize;white-space:nowrap}.status-badge i{width:6px;height:6px;border-radius:50%;background:var(--neutral-400)}.status-active{background:var(--success-soft);color:var(--success)}.status-active i{background:var(--success)}.status-draft{background:var(--info-soft);color:var(--info)}.status-draft i{background:var(--info)}.status-inactive,.status-archived{color:var(--neutral-600)}.status-separated,.status-deceased{background:var(--danger-soft);color:var(--danger)}.status-separated i,.status-deceased i{background:var(--danger)}.empty-state,.empty-inline{text-align:center!important;padding:40px 20px!important;color:var(--neutral-500)}.empty-state strong,.empty-state span,.empty-inline strong,.empty-inline span{display:block}.empty-state strong,.empty-inline strong{color:var(--neutral-700);font-weight:600;margin-bottom:5px}.empty-state-mark{font-size:25px;margin-bottom:8px}.pagination{border-top:1px solid var(--neutral-200)}.pagination div{display:flex;gap:8px}

/* Detail */
.identity-band{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:22px;background:linear-gradient(100deg,var(--theme-soft),#fff 55%);border:1px solid var(--theme-border-accent);border-radius:var(--radius-lg)}.identity-monogram{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--theme-border-accent);color:var(--theme-primary);font:600 15px var(--font-application)}.identity-band>div{display:grid;gap:3px}.identity-band strong{font:600 18px var(--font-application);color:var(--neutral-950)}.identity-band p{margin:3px 0 0;color:var(--neutral-600);font-size:12.5px}.identity-band p>span{display:inline;margin:0 5px;color:var(--neutral-400)}.record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.detail-section{padding:24px 0 28px;border-top:1px solid var(--neutral-200)}.detail-section:nth-child(-n+2){border-top:0}.span-2{grid-column:span 2}.section-heading{margin-bottom:18px}.section-heading h2,.form-section h2,.reference-group h2,.reference-table-toolbar h2{margin:0;font:600 19px var(--font-application);color:var(--neutral-950)}.section-heading .eyebrow{margin-bottom:6px}.detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:17px 24px}.detail-list-4{grid-template-columns:repeat(4,minmax(0,1fr))}.detail-list div{min-width:0}.detail-list dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--neutral-500);font-weight:500}.detail-list dd{margin:6px 0 0;font-size:13px;font-weight:500;color:var(--neutral-800);overflow-wrap:anywhere}.empty-value{color:var(--neutral-400);font-weight:400}.audit-section table{border:1px solid var(--neutral-200);border-radius:var(--radius-md);overflow:hidden}.audit-outcome{color:var(--success);font-weight:600}.action-menu{position:relative}.action-menu summary{list-style:none}.action-menu summary::-webkit-details-marker{display:none}.action-menu>div{position:absolute;right:0;top:50px;z-index:10;width:330px;padding:10px;background:#fff;border:1px solid var(--neutral-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.action-menu button{width:100%;min-height:40px;border:0;background:transparent;text-align:left;padding:8px;border-radius:var(--radius-sm);font:inherit;font-size:13px;font-weight:500}.action-menu button:not(:disabled):hover{background:var(--danger-soft)}.action-menu small,.blocked-action small{display:block;color:var(--neutral-500);font-size:11px;line-height:1.4;margin-top:6px}.text-danger,.blocked-action{color:var(--danger)}

/* Forms */
.personnel-form{display:grid;gap:16px}.form-section{display:grid;grid-template-columns:220px minmax(0,1fr);padding:26px 28px;gap:34px;background:#fff;border:1px solid var(--neutral-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);max-width:1440px}.form-section-heading>span{display:grid;place-items:center;width:34px;height:34px;background:var(--theme-soft);border:1px solid var(--theme-border-accent);color:var(--theme-primary);font-size:12px;font-weight:650;border-radius:50%;margin-bottom:14px}.form-section-heading p{font-size:12.5px;line-height:1.5;color:var(--neutral-500);margin:8px 0 0}.form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.form-fields label,.compact-form label{display:grid;align-content:start;gap:7px;font-size:12.5px;font-weight:500;color:var(--neutral-700)}.form-fields input,.form-fields select,.form-fields textarea,.delete-dialog input,.compact-form textarea{width:100%;min-height:44px;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:9px 11px;background:#fff;transition:border-color 140ms ease,box-shadow 140ms ease}.form-fields input:hover,.form-fields select:hover,.form-fields textarea:hover,.compact-form textarea:hover{border-color:var(--neutral-400)}.form-fields input:disabled,.form-fields select:disabled{background:var(--neutral-100);border-color:var(--neutral-200);color:var(--neutral-600);opacity:1;cursor:not-allowed}.form-fields textarea,.compact-form textarea{min-height:96px;resize:vertical}.form-fields small,.readonly-field small{color:var(--neutral-500);font-weight:400;font-size:11px;line-height:1.45}.optional{font-size:10.5px;color:var(--neutral-400);font-weight:400}.field-error{position:relative;padding-left:18px;font-size:11.5px;color:var(--danger);font-weight:500}.field-error:before{content:"!";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:#fff;font-size:9px}.form-fields [aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(180,35,24,.10)}.form-actions{position:sticky;bottom:0;z-index:8;display:flex;justify-content:flex-end;gap:10px;padding:18px 0 4px;background:linear-gradient(transparent,var(--canvas) 25%)}.readonly-field{display:grid;gap:7px;align-content:start;font-size:12.5px;font-weight:500;color:var(--neutral-700)}.readonly-field .status-badge{justify-self:start}.field-manage{float:right;font-size:11.5px;font-weight:500;margin-left:auto;text-decoration:none}.standalone-section{margin-top:22px}.compact-form{display:block}.lifecycle-current{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:10px 12px;margin-bottom:18px;background:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:var(--radius-sm);font-size:12px;color:var(--neutral-500)}.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding:20px 22px;background:#fff;border:1px solid #F1C4C0;border-radius:var(--radius-lg)}.danger-zone h2{font:600 19px var(--font-application);margin:0 0 6px}.danger-zone p{margin:0;color:var(--neutral-500);font-size:12.5px}

/* Dialogs and Appearance */
.theme-dialog,.delete-dialog{border:0;border-radius:var(--radius-lg);padding:0;background:#fff;box-shadow:0 24px 72px rgba(10,19,34,.26);max-width:min(880px,calc(100% - 30px))}.theme-dialog::backdrop,.delete-dialog::backdrop{background:rgba(7,16,31,.56);backdrop-filter:blur(2px)}.theme-dialog[open],.delete-dialog[open]{animation:dialog-in 240ms ease-out}.theme-dialog form{padding:26px 28px}.dialog-heading{display:flex;justify-content:space-between;gap:24px}.dialog-heading h2,.delete-dialog h2{margin:0 0 7px;font:600 25px var(--font-application);color:var(--neutral-950)}.dialog-heading p{margin:0;color:var(--neutral-500);font-size:13px;line-height:1.5;max-width:590px}.icon-close{width:44px;height:44px;flex:0 0 auto;border:0;background:var(--neutral-100);color:var(--neutral-600);border-radius:50%;font-size:23px;cursor:pointer}.icon-close:hover{background:var(--neutral-200)}.theme-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-top:22px;margin-top:22px;border-top:1px solid var(--neutral-200)}.theme-section-heading h3{font-size:13px;font-weight:600;margin:0 0 4px}.theme-section-heading p{font-size:11.5px;color:var(--neutral-500);margin:0}.theme-section-heading>span{padding:4px 8px;border-radius:999px;background:var(--neutral-100);color:var(--neutral-600);font-size:10.5px}.theme-grid{border:0;padding:16px 0 4px;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.theme-option{min-width:0;position:relative;display:grid;grid-template-columns:1fr auto;gap:9px;border:1px solid var(--neutral-200);border-radius:var(--radius-md);padding:9px;cursor:pointer;background:#fff;transition:border-color 140ms ease,background-color 140ms ease}.theme-option:hover{border-color:var(--neutral-300);background:var(--neutral-50)}.theme-option:has(input:checked){border-color:var(--theme-primary);background:var(--theme-soft);box-shadow:inset 0 0 0 1px var(--theme-primary)}.theme-option input{position:absolute;opacity:0;pointer-events:none}.theme-preview{grid-column:1/-1;height:32px;border-radius:5px;background:var(--theme-workspace);border:1px solid var(--theme-border);display:flex;align-items:center;gap:5px;padding:6px;position:relative;overflow:hidden}.theme-preview i{height:100%;width:55%;background:var(--theme-sidebar-active);border-radius:3px}.theme-preview>span{height:100%;flex:1;background:var(--theme-surface);border-radius:3px}.theme-preview b{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--theme-accent);right:7px;bottom:6px;border:1px solid var(--theme-surface)}.theme-option-copy{display:grid;gap:2px;min-width:0}.theme-option-copy strong{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-option-copy small{font-size:10px;color:var(--neutral-500)}.theme-check{width:18px;height:18px;border:1px solid var(--neutral-300);border-radius:50%;display:grid;place-items:center;color:transparent}.theme-check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}.theme-option:has(input:checked) .theme-check{background:var(--theme-primary);border-color:var(--theme-primary);color:#fff}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.delete-dialog form{padding:28px;width:480px;max-width:100%}.delete-dialog p{color:var(--neutral-600);font-size:13px;line-height:1.5}.delete-dialog label{display:grid;gap:7px;margin:20px 0 7px;font-size:12.5px;font-weight:500}.dialog-consequence{font-weight:600;color:var(--neutral-800)!important}.danger-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--danger-soft);color:var(--danger);font-weight:700;margin-bottom:16px}@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Reference administration */
.reference-groups{display:grid;gap:30px}.reference-group{border-top:1px solid var(--neutral-200);padding-top:20px}.reference-group-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.reference-group-heading>span{font-size:11px;color:var(--neutral-500)}.reference-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reference-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:104px;padding:17px 18px;background:#fff;border:1px solid var(--neutral-200);border-radius:var(--radius-md);text-decoration:none;color:var(--neutral-800);transition:border-color 140ms ease,background-color 140ms ease}.reference-card:hover{border-color:var(--theme-border-accent);background:var(--theme-soft)}.reference-card-icon{width:36px;height:36px;border-radius:8px;background:var(--theme-soft);border:1px solid var(--theme-border-accent);position:relative}.reference-card-icon:before,.reference-card-icon:after{content:"";position:absolute;left:9px;right:9px;height:4px;border:1.5px solid var(--theme-primary);border-radius:2px}.reference-card-icon:before{top:9px}.reference-card-icon:after{top:20px}.reference-card>span:nth-child(2){display:grid;gap:3px}.reference-card strong{font:600 16px var(--font-application)}.reference-card small{font-size:11.5px;line-height:1.4;color:var(--neutral-500)}.reference-card>span:nth-child(2)>span{font-size:10.5px;color:var(--theme-primary);margin-top:2px}.reference-card>b{font-weight:400;color:var(--theme-primary)}.reference-form-section{margin-bottom:22px}.reference-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--neutral-200)}.reference-table-toolbar .eyebrow{margin-bottom:4px}.reference-table-toolbar>div>span{display:block;font-size:11px;color:var(--neutral-500);margin-top:3px}.reference-search{position:relative;width:min(320px,40%)}.reference-search input{width:100%;padding-left:38px}.usage-count{font-size:11.5px;color:var(--neutral-600);white-space:nowrap}.reference-state{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;text-transform:capitalize}.reference-state:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--neutral-400)}.reference-state-active{color:var(--success)}.reference-state-active:before{background:var(--success)}.manage-link{font-weight:500;text-decoration:none}.row-actions{display:flex;align-items:flex-start;gap:12px}.row-actions details{position:relative}.row-actions summary{cursor:pointer;color:var(--danger);font-size:12px;text-decoration:underline;text-underline-offset:3px}.inline-delete-form{position:absolute;right:0;z-index:18;width:330px;background:#fff;border:1px solid #F1C4C0;border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-md)}.inline-delete-form p{font-size:12px;line-height:1.45;color:var(--neutral-600)}.inline-delete-form label{display:grid;gap:5px;font-size:11.5px}.inline-delete-form input{width:100%;min-height:40px;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:8px;margin:3px 0 10px}.blocked-action{font-size:11px;max-width:240px}

.reference-delete-trigger{min-height:24px;padding:0;border:0;background:transparent;color:var(--danger);font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.reference-delete-trigger:hover{color:#912018}

/* Login and errors */
.login-main{min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,44%) minmax(400px,1fr)}.login-brand-panel{background:var(--brand-navy);color:#fff;padding:clamp(30px,6vw,80px);display:flex;flex-direction:column;justify-content:space-between}.login-brand-link{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;font:600 16px var(--font-application)}.login-brand-panel h1{font:600 clamp(38px,5vw,66px)/1 var(--font-application);margin:12px 0 20px}.login-brand-panel p{color:#D8E2FA;max-width:480px}.eyebrow.light{color:#9DB9EF}.login-form-panel{display:grid;place-items:center;background:#fff;padding:30px}.login-form-wrap{width:min(410px,100%)}.login-form-wrap h2{font:600 34px var(--font-application);margin:0 0 8px}.login-form-wrap>p{color:var(--neutral-500)}.login-form-wrap form{display:grid;gap:9px;margin:25px 0}.login-form-wrap label{font-size:13px;font-weight:500}.login-form-wrap input{min-height:46px;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:7px}.back-link{display:inline-block;margin-top:12px}.error-state{max-width:650px;padding:50px 0}.error-state p{color:var(--neutral-500);margin-bottom:22px}

/* Responsive behavior */
@media(max-width:1180px){.filter-form .search-field{flex-basis:100%}.detail-list-4{grid-template-columns:repeat(2,1fr)}.app-main{padding-left:32px;padding-right:32px}}
@media(max-width:1024px){.app-frame{grid-template-columns:82px minmax(0,1fr)}.app-sidebar{padding:24px 10px}.app-sidebar nav{gap:20px}.nav-label,.app-sidebar nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.app-sidebar nav a{justify-content:center;padding:9px}.app-sidebar nav a.active:before{top:8px;bottom:8px}.sidebar-footer{justify-content:center;padding:10px 0}.sidebar-footer>span:last-child{display:none}.form-section{grid-template-columns:190px minmax(0,1fr);gap:24px;padding:24px}.theme-dialog{max-width:min(800px,calc(100% - 30px))}}
@media(max-width:840px){.app-topbar{height:68px;padding:0 16px}.app-frame{display:block;min-height:calc(100vh - 68px)}.app-sidebar{position:sticky;top:68px;height:auto;z-index:20;padding:7px 14px;border-right:0;border-bottom:1px solid var(--neutral-200)}.app-sidebar nav{display:flex;gap:8px}.nav-group{display:contents}.nav-label{display:none}.app-sidebar nav a{justify-content:flex-start;padding:8px 12px}.app-sidebar nav a span{position:static;width:auto;height:auto;overflow:visible;clip:auto}.sidebar-footer{display:none}.app-main{padding:28px 22px 52px}.record-grid{grid-template-columns:1fr}.detail-section:nth-child(2){border-top:1px solid var(--neutral-200)}.span-2{grid-column:auto}.form-section{grid-template-columns:1fr}.form-section-heading{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px}.form-section-heading>span{grid-row:1/3;margin:0}.form-section-heading p{margin-top:5px}.reference-card-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-brand-panel{min-height:320px;padding:30px}.login-brand-panel h1{font-size:38px}.login-form-panel{padding:35px 20px}.more-filters>div{left:0;right:auto}.data-panel-heading{align-items:flex-start}.theme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.app-brand-copy small,.account-name{display:none}.app-brand-copy{border-left:0;padding-left:0}.appearance-trigger span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.appearance-trigger{width:44px;justify-content:center}.page-header,.workspace-heading,.record-header,.record-heading{display:grid;gap:18px;margin-bottom:24px}.heading-actions{justify-content:flex-start;width:100%}.filter-form>*{width:100%}.filter-form .button{width:100%}.more-filters>div{width:100%;position:static;margin-top:8px}.data-panel-heading,.reference-table-toolbar{align-items:flex-start;flex-direction:column}.sort-control{width:100%;justify-content:space-between}.sort-control select{flex:1}.detail-list,.detail-list-4{grid-template-columns:1fr}.identity-band{align-items:flex-start}.form-section{padding:20px 17px}.form-fields{grid-template-columns:1fr}.theme-dialog form{padding:22px 18px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme-section-heading{align-items:flex-start}.dialog-actions{flex-direction:column-reverse}.dialog-actions .button{width:100%}.danger-zone{align-items:flex-start;flex-direction:column}.danger-zone .button{width:100%}.reference-search{width:100%}.action-menu>div{left:0;right:auto;width:min(330px,calc(100vw - 44px))}}
@media(max-width:430px){.app-topbar{padding:0 10px}.app-brand-seal{width:40px}.app-brand-copy strong{font-size:14px}.app-account{gap:2px}.account-menu summary{padding:7px}.app-sidebar{padding:6px 10px}.app-sidebar nav a{min-height:44px;padding:8px 10px;font-size:12.5px}.app-main{padding:24px 14px 48px}.page-header h1,.workspace-heading h1,.record-header h1{font-size:29px}.heading-actions{display:grid;grid-template-columns:1fr}.heading-actions .button,.workspace-heading .button{width:100%}.filter-form{padding:15px}.data-panel-heading,.pagination{padding:14px 15px}.personnel-table th,.personnel-table td,table th,table td{padding:12px 13px}.identity-band{padding:15px}.identity-monogram{width:40px;height:40px}.form-actions{display:grid;grid-template-columns:1fr}.form-actions .button{width:100%}.dialog-heading{gap:12px}.dialog-heading h2{font-size:23px}.theme-option{padding:8px}.theme-preview{height:29px}.reference-card{padding:15px}.reference-table-toolbar{padding:15px}}
@media(max-width:360px){.app-brand-seal img{width:36px;height:37px}.app-account .appearance-trigger,.account-menu summary{padding:6px}.app-sidebar nav a svg{width:17px}.app-sidebar nav a{gap:7px;padding:8px}.app-main{padding-left:10px;padding-right:10px}.theme-dialog{max-width:calc(100% - 16px)}.theme-dialog form{padding:18px 14px}.theme-option-copy strong{font-size:10.5px}}
@media(max-width:768px){.app-body{--tablet-layout-active:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.theme-dialog[open],.delete-dialog[open]{animation:none}}

/* Phase 1 enterprise foundation
   Themes provide brand accents only. Neutral surfaces and semantic states are fixed. */
:root {
    --font-application: "Segoe UI Variable", "Aptos", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --semantic-success: #107E3E;
    --semantic-success-subtle: #F1F8F4;
    --semantic-warning: #B44F00;
    --semantic-warning-subtle: #FFF8E8;
    --semantic-danger: #BB0000;
    --semantic-danger-hover: #970000;
    --semantic-danger-subtle: #FFF1F1;
    --semantic-information: #0A6ED1;
    --semantic-information-subtle: #F0F7FD;
    --semantic-info: var(--semantic-information);
    --semantic-info-subtle: var(--semantic-information-subtle);
    --semantic-disabled: #8390A2;
    --surface-page: #F5F6F7;
    --surface-workspace: #FFFFFF;
    --surface-toolbar: #F7F8FA;
    --surface-table-header: #F5F6F7;
    --surface-panel: #FFFFFF;
    --surface-dialog: #FFFFFF;
    --surface-readonly: #F1F3F5;
    --border-default: #D5DADD;
    --border-subtle: #E5E9EC;
    --text-primary: #1D2D3E;
    --text-secondary: #475E75;
    --text-muted: #687A8C;
    --text-disabled: #8390A2;
    --density-control: 36px;
    --density-row: 42px;
    --shell-header-height: 68px;
    --shell-context-height: 0px;
    --shell-nav-width: 220px;
    --object-nav-height: 44px;
    --object-header-collapsed-height: 58px;
    --sticky-content-offset: calc(var(--shell-header-height) + var(--shell-context-height));
    --object-header-sticky-top: calc(var(--sticky-content-offset) + var(--space-2));
    --object-nav-sticky-top: calc(var(--object-header-sticky-top) + var(--object-header-collapsed-height) + var(--space-2));
    --object-section-scroll-offset: calc(var(--object-nav-sticky-top) + var(--object-nav-height) + var(--space-3));
    --layer-content-navigation: 16;
    --layer-context-header: 15;
    --layer-shell: 30;
    --layer-overlay: 40;
    --success: var(--semantic-success);
    --success-soft: var(--semantic-success-subtle);
    --warning: var(--semantic-warning);
    --warning-soft: var(--semantic-warning-subtle);
    --danger: var(--semantic-danger);
    --danger-soft: var(--semantic-danger-subtle);
    --info: var(--semantic-information);
    --info-soft: var(--semantic-information-subtle);
    --canvas: var(--surface-page);
    --surface: var(--surface-workspace);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 2px rgba(29,45,62,.06);
    --shadow-md: 0 8px 24px rgba(29,45,62,.14);
}

html { font-family: var(--font-application); color: var(--text-primary); background: var(--surface-page); }
body { background: var(--surface-page); color: var(--text-primary); }
a { color: var(--brand-primary); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { box-shadow: 0 0 0 3px var(--brand-focus); border-color: var(--brand-primary) !important; }
::selection { background: var(--brand-primary-subtle); color: var(--text-primary); }

/* Stable AFPCES institutional shell */
.app-topbar {
    height: var(--shell-header-height);
    padding: 0 clamp(20px, 2.2vw, 32px);
    background: #FFF;
    border-color: var(--border-subtle);
    z-index: var(--layer-shell);
}
.app-brand { gap: 12px; }
.app-brand-seal { width: 43px; height: 46px; }
.app-brand-copy { gap: 1px; padding-left: 12px; border-color: var(--border-subtle); }
.app-brand-copy strong { font: 700 15px/1.25 var(--font-application); letter-spacing: .06em; }
.app-brand-copy small { color: var(--text-secondary); font-size: 11px; }
.appearance-trigger, .account-menu summary { min-height: 40px; color: var(--text-secondary); font-size: 13px; }
.appearance-trigger:hover, .account-menu summary:hover, .account-signout:hover { background: #F2F4F5; }
.account-avatar { background: #F1F3F5; color: var(--text-secondary); border-color: var(--border-default); }
.app-frame { grid-template-columns: var(--shell-nav-width) minmax(0, 1fr); min-height: calc(100vh - var(--shell-header-height)); }
.app-sidebar {
    top: var(--shell-header-height);
    height: calc(100vh - var(--shell-header-height));
    padding: 24px 12px 16px;
    background: #FFF;
    border-color: var(--border-subtle);
}
.app-sidebar nav { gap: 24px; }
.nav-label, .eyebrow { color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .11em; }
.app-sidebar nav a { min-height: 40px; padding: 8px 11px; color: var(--text-secondary); font-size: 13px; border-radius: 4px; }
.app-sidebar nav a:hover { color: var(--text-primary); background: #F5F6F7; }
.app-sidebar nav a.active { color: var(--brand-primary); background: var(--brand-primary-subtle); }
.app-sidebar nav a.active::before { top: 7px; bottom: 7px; width: 3px; background: var(--brand-primary); }
.sidebar-footer { border-color: var(--border-subtle); }
.app-main { min-width: 0; padding: 22px clamp(24px, 3vw, 48px) 48px; }

/* Theme-colored contextual page header */
.breadcrumbs { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; }
.breadcrumbs a { color: var(--text-secondary); }
.page-header, .workspace-heading, .record-header, .record-heading {
    min-height: 134px;
    align-items: flex-end;
    margin: 0 0 22px;
    padding: 22px 26px;
    border: 1px solid color-mix(in srgb, var(--brand-primary-active) 75%, #0000);
    border-radius: var(--radius-lg);
    background: linear-gradient(112deg, var(--brand-primary-active), var(--brand-primary) 62%, color-mix(in srgb, var(--brand-primary) 86%, white));
    box-shadow: 0 1px 2px rgba(29,45,62,.08);
    color: var(--brand-on-primary);
}
.page-header.compact, .workspace-heading.compact { min-height: 120px; margin-bottom: 20px; }
.page-header .eyebrow, .workspace-heading .eyebrow, .record-header .eyebrow, .record-heading .eyebrow {
    margin-bottom: 6px;
    color: rgba(255,255,255,.78);
}
.page-header h1, .workspace-heading h1, .record-header h1, .record-heading h1, .error-state h1 {
    margin: 0 0 7px;
    color: inherit;
    font: 700 clamp(26px, 2.2vw, 32px)/1.15 var(--font-application);
    letter-spacing: -.018em;
}
.page-header-copy > p:last-child, .workspace-heading > div > p:last-child, .record-heading p {
    color: rgba(255,255,255,.82);
    font-size: 13.5px;
    line-height: 1.45;
}
.record-summary { margin-top: 10px; color: rgba(255,255,255,.86); }
.record-header .identifier { color: #FFF; }
.record-header .summary-divider { background: rgba(255,255,255,.5); }
.page-header .button-primary, .record-header .button-primary, .workspace-heading .button-primary {
    background: #FFF;
    border-color: #FFF;
    color: var(--brand-primary-active);
}
.page-header .button-primary:hover, .record-header .button-primary:hover, .workspace-heading .button-primary:hover { background: #F4F6F7; border-color: #F4F6F7; }
.page-header .button-secondary, .record-header .button-secondary, .workspace-heading .button-secondary {
    background: rgba(0,0,0,.08);
    border-color: rgba(255,255,255,.56);
    box-shadow: none;
    color: #FFF;
}
.page-header .button-secondary:hover, .record-header .button-secondary:hover, .workspace-heading .button-secondary:hover { background: rgba(0,0,0,.18); border-color: #FFF; }
.page-header :focus-visible, .record-header :focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.56); border-color: #FFF !important; }

/* Reusable actions and control states */
.button { min-height: var(--density-control); padding: 7px 13px; border-radius: 4px; font-size: 13px; font-weight: 600; }
.button-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); }
.button-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.button-primary:active { background: var(--brand-primary-active); border-color: var(--brand-primary-active); }
.button-secondary { border-color: var(--border-default); color: var(--text-secondary); }
.button-secondary:hover { border-color: #8996A3; background: #F5F6F7; }
.button-tertiary, .button-ghost { color: var(--brand-primary); }
.button-tertiary:hover, .button-ghost:hover { background: var(--brand-primary-subtle); }
.button-danger { background: var(--semantic-danger); border-color: var(--semantic-danger); }
.button-danger:hover { background: var(--semantic-danger-hover); border-color: var(--semantic-danger-hover); }
.button:disabled, button:disabled { color: var(--text-disabled) !important; cursor: not-allowed; }
.button-small { min-height: 32px; }
.button-icon, .icon-button { width: var(--density-control); min-width: var(--density-control); padding: 0; }

.filter-form input, .filter-form select, .sort-control select, .reference-search input,
.form-fields input, .form-fields select, .delete-dialog input, .login-form-wrap input,
.more-filters summary, .inline-delete-form input {
    min-height: var(--density-control);
    border-color: var(--border-default);
    border-radius: 4px;
    background: #FFF;
    color: var(--text-primary);
}
.form-fields textarea, .compact-form textarea { min-height: 88px; border-color: var(--border-default); border-radius: 4px; }
input:hover, select:hover, textarea:hover { border-color: #8996A3; }
input:read-only { background: var(--surface-readonly); color: var(--text-secondary); }
.form-fields input:disabled, .form-fields select:disabled { background: var(--surface-readonly); border-color: var(--border-subtle); color: var(--text-disabled); }
.form-fields [aria-invalid="true"] { border-color: var(--semantic-danger); box-shadow: 0 0 0 2px rgba(187,0,0,.12); }
.field-error { color: var(--semantic-danger); }
.field-error::before { background: var(--semantic-danger); }

/* Fixed semantic feedback and statuses */
.alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 4px; }
.alert-success { background: var(--semantic-success-subtle); color: var(--semantic-success); }
.alert-warning { background: var(--semantic-warning-subtle); color: var(--semantic-warning); }
.alert-error { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }
.alert-info { background: var(--semantic-information-subtle); color: var(--semantic-information); }
.status-active { background: var(--semantic-success-subtle); color: var(--semantic-success); }
.status-active i { background: var(--semantic-success); }
.status-draft { background: var(--semantic-information-subtle); color: var(--semantic-information); }
.status-draft i { background: var(--semantic-information); }
.status-separated, .status-deceased { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }
.status-separated i, .status-deceased i { background: var(--semantic-danger); }
.status-inactive, .status-archived { background: #EFF1F2; color: var(--text-secondary); }
.status-inactive i, .status-archived i { background: var(--text-muted); }
.status-warning { background: var(--semantic-warning-subtle); color: var(--semantic-warning); }
.status-warning i { background: var(--semantic-warning); }
.status-blocked { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }
.status-blocked i { background: var(--semantic-danger); }
.status-information { background: var(--semantic-information-subtle); color: var(--semantic-information); }
.status-information i { background: var(--semantic-information); }
.status-neutral { background: #EFF1F2; color: var(--text-secondary); }
.status-neutral i { background: var(--text-muted); }

/* Enterprise surfaces and compact desktop density */
.data-surface, .reference-surface, .form-section, .detail-section, .reference-card, .danger-zone {
    background: var(--surface-panel);
    border-color: var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.filter-form { padding: 14px 16px; gap: 10px; background: var(--surface-toolbar); border-color: var(--border-subtle); }
.filter-form label, .sort-control { gap: 5px; color: var(--text-secondary); font-size: 11.5px; }
.data-panel-heading, .pagination { padding: 13px 16px; }
.data-panel-heading { border-color: var(--border-subtle); }
.data-panel-heading h2 { color: var(--text-primary); font-size: 14px; }
.personnel-table th, .personnel-table td, table th, table td { height: var(--density-row); padding: 9px 14px; border-color: var(--border-subtle); font-size: 12.5px; }
.personnel-table thead th, table thead th { height: 36px; background: var(--surface-table-header); color: var(--text-muted); font-size: 11px; font-weight: 700; }
.record-link { color: var(--text-primary); font-size: 13.5px; }
.record-link:hover { color: var(--brand-primary); }
.identifier { color: var(--text-secondary); }
.identity-band { margin-bottom: 20px; padding: 15px 18px; border-color: var(--brand-primary-border); border-radius: var(--radius-md); background: linear-gradient(100deg, var(--brand-primary-subtle), #FFF 58%); }
.identity-monogram { color: var(--brand-primary); border-color: var(--brand-primary-border); font: 700 14px/1 var(--font-application); }
.identity-band strong { color: var(--text-primary); font: 700 16px/1.35 var(--font-application); }
.record-grid { gap: 0 24px; }
.detail-section { padding: 20px 0 24px; border-radius: 0; box-shadow: none; }
.section-heading { margin-bottom: 15px; }
.section-heading h2, .form-section h2, .reference-group h2, .reference-table-toolbar h2,
.danger-zone h2 { color: var(--text-primary); font: 700 20px/1.25 var(--font-application); }
.detail-list { gap: 15px 22px; }
.detail-list dt { color: var(--text-muted); font-size: 10.5px; font-weight: 700; }
.detail-list dd { color: var(--text-primary); font-size: 13px; }

/* Form and panel family */
.personnel-form { gap: 14px; }
.form-section { grid-template-columns: 200px minmax(0, 1fr); padding: 22px 24px; gap: 28px; }
.form-section-heading > span { background: var(--brand-primary-subtle); border-color: var(--brand-primary-border); color: var(--brand-primary); }
.form-fields { gap: 15px 18px; }
.form-fields label, .compact-form label { gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.form-fields small, .readonly-field small, .optional { color: var(--text-muted); }
.form-actions { padding-top: 14px; }
.danger-zone { padding: 17px 20px; border-color: #E8B8B8; }
.dialog-heading h2, .delete-dialog h2 { color: var(--text-primary); font: 700 24px/1.2 var(--font-application); }
.theme-dialog, .delete-dialog { border-radius: 8px; background: var(--surface-dialog); }

/* Appearance previews show the contextual surface each palette changes */
.theme-section-heading h3 { font-size: 13px; }
.theme-grid { gap: 10px; }
.theme-option { padding: 8px; border-color: var(--border-subtle); border-radius: 6px; }
.theme-option:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-subtle); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.theme-option:focus-within { outline: 3px solid var(--brand-focus); outline-offset: 2px; }
.theme-option-copy strong { font-size: 11px; font-family: var(--font-application); }
.theme-check { border-color: var(--border-default); }
.theme-option:has(input:checked) .theme-check { background: var(--brand-primary); border-color: var(--brand-primary); }

/* Reference administration */
.reference-groups { gap: 24px; }
.reference-group { padding-top: 17px; border-color: var(--border-subtle); }
.reference-card { min-height: 94px; padding: 15px 16px; }
.reference-card:hover { border-color: var(--brand-primary-border); background: var(--brand-primary-subtle); }
.reference-card-icon { background: var(--brand-primary-subtle); border-color: var(--brand-primary-border); }
.reference-card-icon::before, .reference-card-icon::after { border-color: var(--brand-primary); }
.reference-card strong { font: 700 15px/1.3 var(--font-application); }
.reference-card > span:nth-child(2) > span, .reference-card > b { color: var(--brand-primary); }
.reference-table-toolbar { padding: 15px 16px; border-color: var(--border-subtle); }
.reference-state-active { color: var(--semantic-success); }
.reference-state-active::before { background: var(--semantic-success); }
.reference-delete-trigger, .text-danger, .blocked-action { color: var(--semantic-danger); }
.reference-delete-trigger:hover { color: var(--semantic-danger-hover); }

/* Serif remains intentionally limited to the institutional login experience. */
.login-form-wrap h2 { font: 700 32px/1.2 var(--font-application); }
.error-state h1 { color: var(--text-primary); }

@media (max-width: 1180px) {
    .app-main { padding-left: 28px; padding-right: 28px; }
    .form-section { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    :root { --shell-nav-width: 64px; }
    .app-sidebar { padding: 20px 8px; }
    .form-section { grid-template-columns: 170px minmax(0, 1fr); padding: 20px; gap: 22px; }
}

@media (max-width: 840px) {
    :root { --density-control: 44px; --density-row: 44px; --shell-context-height: 58px; }
    .app-topbar { height: var(--shell-header-height); }
    .app-frame { min-height: calc(100vh - var(--shell-header-height)); }
    .app-sidebar { top: var(--shell-header-height); padding: 6px 14px; }
    .app-sidebar nav a { min-height: 44px; }
    .app-main { padding: 20px 22px 48px; }
    .form-section { grid-template-columns: 1fr; }
    .theme-preview { height: 62px; }
}

@media (max-width: 620px) {
    .app-main { padding: 16px 14px 44px; }
    .breadcrumbs { margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .page-header, .workspace-heading, .record-header, .record-heading {
        min-height: 0;
        padding: 20px;
        gap: 17px;
        align-items: stretch;
    }
    .page-header.compact, .workspace-heading.compact { min-height: 0; }
    .page-header h1, .workspace-heading h1, .record-header h1, .record-heading h1 { font-size: 26px; }
    .heading-actions { display: flex; flex-direction: column; align-items: stretch; }
    .heading-actions .button, .heading-actions .action-menu, .heading-actions .action-menu > summary { width: 100%; }
    .action-menu > div { top: 48px; width: 100%; }
    .form-section { padding: 18px 16px; }
    .filter-form { padding: 14px; }
    .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-preview { height: 68px; }
}

@media (max-width: 430px) {
    .app-main { padding: 14px 10px 40px; }
    .app-brand-copy strong { font-size: 13px; }
    .app-sidebar { padding-inline: 8px; overflow-x: auto; }
    .app-sidebar nav { min-width: max-content; }
    .page-header, .workspace-heading, .record-header, .record-heading { padding: 18px 16px; border-radius: 6px; }
    .page-header h1, .workspace-heading h1, .record-header h1, .record-heading h1 { font-size: 24px; }
    .personnel-table th, .personnel-table td, table th, table td { padding: 10px 12px; }
    .theme-dialog form { padding: 18px 14px; }
}

/* Biometric Attendance Phase 2 — guided face enrollment */
.face-enrollment-shell [hidden] { display: none !important; }
.face-enrollment-shell { min-width: 0; }
.enrollment-identity { display: grid; grid-template-columns: auto minmax(0,1fr) auto; }
.enrollment-identity-copy { min-width: 0; }
.enrollment-current-state { min-width: 180px; justify-items: end; text-align: right; }
.enrollment-current-state > span { color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.enrollment-current-state small { color: var(--text-muted); font-size: 11.5px; }
.face-enrollment-card { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elevation-surface); }
.face-enrollment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(135deg,color-mix(in srgb,var(--brand-primary-subtle) 60%,#FFF),#FFF); }
.face-enrollment-heading h2 { margin: 4px 0 6px; color: var(--text-primary); font-size: 21px; }
.face-enrollment-heading p:last-child { max-width: 720px; margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; }
.camera-indicator { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: 999px; background: #FFF; color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.camera-indicator i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.camera-indicator.is-active { border-color: color-mix(in srgb,var(--semantic-success) 28%,var(--border-default)); color: var(--semantic-success); }
.camera-indicator.is-active i { background: var(--semantic-success); box-shadow: 0 0 0 4px color-mix(in srgb,var(--semantic-success) 12%,transparent); }
.enrollment-initial,.enrollment-confirmation,.enrollment-success,.enrollment-error { padding: 28px 24px; }
.model-readiness { display: flex; align-items: center; gap: 11px; min-height: 48px; color: var(--text-secondary); font-size: 13px; }
.readiness-spinner { width: 22px; height: 22px; border: 2px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: face-model-spin .8s linear infinite; }
.model-readiness.is-ready { color: var(--semantic-success); font-weight: 700; }
.model-readiness.is-ready .readiness-spinner { position: relative; border: 0; background: var(--semantic-success-subtle); animation: none; }
.model-readiness.is-ready .readiness-spinner::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--semantic-success); content: "✓"; font-size: 13px; }
@keyframes face-model-spin { to { transform: rotate(360deg); } }
.enrollment-note { margin: 5px 0 18px; }
.enrollment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.camera-workspace { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(290px,.7fr); min-width: 0; }
.camera-column { min-width: 0; padding: 24px; border-right: 1px solid var(--border-subtle); background: color-mix(in srgb,var(--neutral-950) 95%,var(--brand-primary)); }
.camera-preview-wrap { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/3; border: 1px solid color-mix(in srgb,var(--theme-accent) 30%,transparent); border-radius: var(--radius-md); background: #090E14; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.camera-preview-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scaleX(-1); }
.camera-guide { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.camera-guide span { width: 45%; height: 67%; border: 2px solid color-mix(in srgb,var(--theme-on-primary) 84%,var(--theme-accent)); border-radius: 48% 48% 45% 45%/42% 42% 56% 56%; box-shadow: 0 0 0 999px rgba(3,9,16,.24),0 0 0 1px rgba(0,0,0,.2); }
.camera-guide-copy { position: absolute; right: 0; bottom: 13px; left: 0; color: rgba(255,255,255,.88); font-size: 11.5px; font-weight: 600; text-align: center; text-shadow: 0 1px 3px #000; pointer-events: none; }
.camera-picker { display: flex; align-items: center; gap: 10px; margin-top: 13px; color: rgba(255,255,255,.8); font-size: 11.5px; }
.camera-picker select { min-width: 0; max-width: 280px; min-height: 38px; padding: 6px 32px 6px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-sm); background: #FFF; color: var(--text-primary); }
.capture-column { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px 26px; }
.capture-instruction h3 { margin: 6px 0 8px; color: var(--text-primary); font-size: 21px; line-height: 1.3; }
.capture-instruction > p:last-child { min-height: 42px; margin: 0; color: var(--brand-primary); font-size: 13px; font-weight: 600; line-height: 1.5; }
.enrollment-progress { margin-top: 25px; padding: 17px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--neutral-50); }
.enrollment-progress > div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 11px; }
.enrollment-progress > div span { font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.enrollment-progress > div strong { color: var(--text-primary); }
.enrollment-progress ol { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.enrollment-progress li { height: 8px; border-radius: 999px; background: var(--border-default); transition: background-color 180ms ease,transform 180ms ease; }
.enrollment-progress li.is-current { background: color-mix(in srgb,var(--brand-primary) 42%,var(--border-default)); transform: scaleY(1.25); }
.enrollment-progress li.is-complete { background: var(--brand-primary); }
.capture-help { display: block; margin-top: 13px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.enrollment-confirmation,.enrollment-success,.enrollment-error { max-width: 720px; margin: 0 auto; text-align: center; }
.enrollment-confirmation h3,.enrollment-success h3,.enrollment-error h3 { margin: 8px 0; color: var(--text-primary); font-size: 23px; }
.enrollment-confirmation p:not(.eyebrow),.enrollment-success p,.enrollment-error p { color: var(--text-secondary); line-height: 1.55; }
.enrollment-confirmation .enrollment-actions,.enrollment-error .enrollment-actions { justify-content: center; }
.enrollment-success { display: grid; justify-items: center; gap: 6px; }
.enrollment-success > strong { margin-top: 5px; color: var(--text-primary); font-size: 17px; }
.enrollment-success > span:not(.completion-mark) { color: var(--text-muted); font-size: 12px; }
.completion-mark,.error-camera-icon { width: 48px; height: 48px; display: grid; margin: 0 auto 8px; place-items: center; border-radius: 50%; font-size: 22px; font-weight: 800; }
.completion-mark { background: var(--semantic-success-subtle); color: var(--semantic-success); }
.error-camera-icon { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }

@media (max-width: 840px) {
    .camera-workspace { grid-template-columns: 1fr; }
    .camera-column { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .capture-column { padding: 24px; }
}
@media (max-width: 620px) {
    .enrollment-identity { grid-template-columns: auto minmax(0,1fr); }
    .enrollment-current-state { grid-column: 1/-1; min-width: 0; align-items: start; justify-items: start; padding-top: 12px; border-top: 1px solid var(--brand-primary-border); text-align: left; }
    .face-enrollment-heading { display: grid; padding: 20px 17px; }
    .camera-indicator { justify-self: start; }
    .enrollment-initial,.enrollment-confirmation,.enrollment-success,.enrollment-error { padding: 23px 17px; }
    .camera-column { padding: 14px; }
    .camera-preview-wrap { max-height: 68vh; }
    .capture-column { padding: 22px 17px; }
    .enrollment-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .enrollment-actions .button { width: 100%; }
    .camera-picker { align-items: stretch; flex-direction: column; }
    .camera-picker select { width: 100%; max-width: none; }
}
@media (max-width: 430px) {
    .camera-guide span { width: 48%; height: 68%; }
    .capture-instruction h3 { font-size: 19px; }
    .enrollment-progress { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .readiness-spinner { animation: none; }
    .enrollment-progress li { transition: none; }
}

/* Biometric Attendance Phase 3 — face-verified terminal */
.attendance-terminal [hidden] { display: none !important; }
.attendance-terminal { min-width: 0; }
.biometric-terminal-header { position: relative; overflow: hidden; }
.terminal-header-mark { display: grid; grid-template-columns: repeat(2,18px); gap: 6px; padding: 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; opacity: .82; }
.terminal-header-mark span { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.85); }
.terminal-header-mark span:nth-child(1) { border-right: 0; border-bottom: 0; border-radius: 8px 0 0; }
.terminal-header-mark span:nth-child(2) { border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.terminal-header-mark span:nth-child(3) { border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.terminal-header-mark span:nth-child(4) { border-left: 0; border-top: 0; border-radius: 0 0 8px; }
.terminal-security-line { display: flex; align-items: center; gap: 10px; min-height: 46px; margin-bottom: 14px; padding: 9px 12px; border: 1px solid var(--brand-primary-border); border-radius: var(--radius-md); background: color-mix(in srgb,var(--brand-primary-subtle) 48%,#FFF); color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; }
.terminal-security-line > span:nth-child(2) { flex: 1; }
.terminal-security-line strong { color: var(--text-primary); }
.biometric-controls { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 9px; }
.voice-guidance-toggle { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--brand-primary-border); border-radius: 999px; background: var(--surface); color: var(--brand-primary); font: inherit; font-weight: 750; cursor: pointer; }
.voice-guidance-toggle:hover { background: var(--brand-primary-subtle); }
.voice-guidance-toggle:focus-visible { outline: 3px solid color-mix(in srgb,var(--brand-primary) 18%,transparent); outline-offset: 2px; }
.voice-guidance-toggle.is-off { border-color: var(--border-default); color: var(--text-muted); }
.voice-guidance-toggle:disabled { cursor: not-allowed; opacity: .8; }
.voice-volume-control { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.voice-volume-control select { min-height: 34px; padding: 4px 24px 4px 8px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface); color: var(--text-default); font: inherit; }
.voice-volume-control select:disabled { cursor: not-allowed; opacity: .72; }
.voice-icon { font-size: 14px; line-height: 1; }
.terminal-security-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--semantic-success-subtle); color: var(--semantic-success); font-weight: 800; }
.terminal-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 14px; min-width: 0; }
.terminal-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elevation-surface); }
.terminal-identity-card,.terminal-action-card { padding: 22px; }
.terminal-step-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 17px; border-bottom: 1px solid var(--border-subtle); }
.terminal-step-heading > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 12px; font-weight: 800; }
.terminal-step-heading .eyebrow { margin: 0 0 2px; }
.terminal-step-heading h2 { margin: 0; color: var(--text-primary); font-size: 17px; }
.terminal-search { padding-top: 20px; }
.terminal-search label { display: block; margin-bottom: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.terminal-search > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.terminal-search input { min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: #FFF; color: var(--text-primary); font: 650 13px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .03em; text-transform: uppercase; }
.terminal-search input:focus { border-color: var(--brand-primary); outline: 3px solid color-mix(in srgb,var(--brand-primary) 12%,transparent); }
.terminal-search > p { min-height: 18px; margin: 8px 0 0; color: var(--text-muted); font-size: 11.5px; }
.terminal-search > .terminal-or { display: flex; grid-template-columns: none; align-items: center; gap: 12px; margin: 18px 0 13px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.terminal-or::before,.terminal-or::after { height: 1px; flex: 1; background: var(--border-subtle); content: ""; }
.terminal-identify-face { width: 100%; min-height: 46px; justify-content: center; }
.terminal-identify-face > span { margin-right: 6px; }
.terminal-identify-help { display: block; margin-top: 8px; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; text-align: center; }
.terminal-person { padding-top: 18px; }
.terminal-person-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.terminal-person-top > div { min-width: 0; }
.terminal-person-top strong { color: var(--text-primary); font-size: 16px; }
.terminal-person-top p { overflow: hidden; margin: 4px 0 0; color: var(--text-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.terminal-person-top p > span { margin: 0 3px; }
.terminal-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 17px 0 0; }
.terminal-facts > div { min-width: 0; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--neutral-50); }
.terminal-facts dt,.terminal-success dt { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.terminal-facts dd,.terminal-success dd { margin: 6px 0 0; color: var(--text-primary); font-size: 12.5px; font-weight: 650; }
.terminal-facts dd small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10.5px; font-weight: 500; }
.terminal-action-card { display: flex; flex-direction: column; }
.action-display { display: grid; flex: 1; min-height: 142px; align-content: center; justify-items: center; gap: 5px; margin: 18px 0 13px; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--neutral-50); text-align: center; }
.action-display > span { padding: 5px 10px; border-radius: 999px; background: var(--neutral-200); color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.action-display > strong { color: var(--text-primary); font-size: 19px; }
.action-display > small { max-width: 260px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.action-display.is-time_in { border-color: color-mix(in srgb,var(--semantic-success) 26%,var(--border-default)); background: color-mix(in srgb,var(--semantic-success-subtle) 64%,#FFF); }
.action-display.is-time_in > span { background: var(--semantic-success); color: #FFF; }
.action-display.is-time_out { border-color: color-mix(in srgb,var(--brand-primary) 25%,var(--border-default)); background: var(--brand-primary-subtle); }
.action-display.is-time_out > span { background: var(--brand-primary); color: var(--brand-on-primary); }
.terminal-start { width: 100%; }
.verification-card,.terminal-confirmation,.terminal-success,.terminal-error { margin-top: 14px; }
.terminal-camera-workspace .camera-preview-wrap { aspect-ratio: 16/10; }
.terminal-guide-column { justify-content: flex-start; }
.live-sequence-badge { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--brand-primary-border); border-radius: 999px; background: #FFF; color: var(--brand-primary); font-size: 11px; font-weight: 750; }
.verification-guide { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.verification-guide li { position: relative; padding-left: 23px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.verification-guide li::before { position: absolute; left: 0; top: 1px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--brand-primary-subtle); color: var(--brand-primary); content: "✓"; font-size: 9px; font-weight: 800; }
.live-sequence { margin-top: 24px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--neutral-50); }
.live-sequence > span { color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.live-sequence ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.live-sequence li { height: 8px; border-radius: 999px; background: var(--border-default); transition: background-color 180ms ease; }
.live-sequence li.is-complete { background: var(--semantic-success); }
.terminal-confirmation,.terminal-success,.terminal-error { padding: 34px 24px; text-align: center; }
.terminal-confirmation { max-width: none; }
.terminal-confirmation > p:not(.eyebrow),.terminal-error > p:not(.eyebrow) { margin: 8px auto; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.terminal-confirmation h2,.terminal-success h2,.terminal-error h2 { margin: 7px 0; color: var(--text-primary); font-size: 25px; }
.terminal-confirmation .enrollment-actions,.terminal-error .enrollment-actions { justify-content: center; }
.terminal-confirmation > small { display: block; margin-top: 14px; color: var(--text-muted); font-size: 10.5px; }
.verified-mark { display: grid; width: 52px; height: 52px; margin: 0 auto 10px; place-items: center; border-radius: 50%; background: var(--semantic-success-subtle); color: var(--semantic-success); font-size: 24px; font-weight: 900; }
.confirm-action { width: fit-content; margin: 18px auto 0; padding: 9px 22px; border-radius: 999px; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 16px; font-weight: 850; letter-spacing: .08em; }
.confirm-action.is-time_in { background: var(--semantic-success); }
.terminal-success { display: grid; justify-items: center; background: linear-gradient(180deg,color-mix(in srgb,var(--semantic-success-subtle) 75%,#FFF),#FFF 54%); }
.terminal-success > strong { margin-top: 3px; color: var(--text-primary); font-size: 17px; }
.terminal-success > .identifier { color: var(--text-muted); }
.success-ring { display: grid; width: 70px; height: 70px; margin-bottom: 8px; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--semantic-success) 12%,#FFF); box-shadow: 0 0 0 8px color-mix(in srgb,var(--semantic-success) 6%,transparent); }
.success-ring i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--semantic-success); color: #FFF; font-size: 24px; font-style: normal; }
.success-time { display: grid; gap: 2px; margin: 20px 0 13px; }
.success-time strong { color: var(--brand-primary); font-size: clamp(28px,4vw,40px); line-height: 1; }
.success-time span { color: var(--text-secondary); font-size: 12px; }
.terminal-success dl { display: grid; grid-template-columns: repeat(2,minmax(160px,240px)); gap: 10px; margin: 0 0 22px; }
.terminal-success dl > div { padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(255,255,255,.75); }
.terminal-error { max-width: none; }

@media (max-width: 900px) {
    .terminal-grid { grid-template-columns: 1fr; }
    .action-display { min-height: 120px; }
}
@media (max-width: 620px) {
    .terminal-security-line { align-items: flex-start; flex-wrap: wrap; }
    .terminal-security-line .biometric-controls { width: 100%; margin-left: 34px; justify-content: space-between; }
    .terminal-identity-card,.terminal-action-card { padding: 17px; }
    .terminal-search > div { grid-template-columns: 1fr; }
    .terminal-search .button { width: 100%; }
    .terminal-person-top { grid-template-columns: auto minmax(0,1fr); }
    .terminal-person-top .button { grid-column: 1/-1; width: 100%; }
    .terminal-facts { grid-template-columns: 1fr; }
    .terminal-camera-workspace .camera-preview-wrap { aspect-ratio: 4/3; }
    .terminal-confirmation,.terminal-success,.terminal-error { padding: 28px 17px; }
    .terminal-success dl { grid-template-columns: 1fr; width: 100%; }
    .terminal-confirmation .enrollment-actions,.terminal-error .enrollment-actions { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
    .terminal-grid { gap: 10px; }
    .terminal-security-line { margin-bottom: 10px; padding: 9px; }
    .terminal-security-line > span:nth-child(2) { min-width: calc(100% - 36px); }
    .terminal-security-line .biometric-controls { margin-left: 0; }
    .voice-guidance-toggle { min-height: 44px; }
    .terminal-identity-card,.terminal-action-card { padding: 15px 13px; }
    .terminal-person-top p { white-space: normal; }
    .verification-card,.terminal-confirmation,.terminal-success,.terminal-error { margin-top: 10px; }
    .terminal-camera-workspace .camera-column { padding: 10px; }
    .terminal-guide-column { padding: 19px 14px; }
    .face-enrollment-heading { gap: 12px; }
    .live-sequence-badge { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .live-sequence li { transition: none; }
}

@media (max-width: 360px) {
    .app-main { padding-left: 8px; padding-right: 8px; }
    .page-header, .workspace-heading, .record-header, .record-heading { padding: 16px 14px; }
    .theme-option-copy strong { font-size: 10.5px; }
}

/* Phase 2 — Personnel list report */
.list-report {
    overflow: hidden;
    background: var(--surface-workspace);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.list-report-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(130px, .72fr)) auto auto;
    align-items: end;
    padding: 14px 16px;
}
.list-report-filters > label,
.list-report-filters > details { min-width: 0; width: auto; }
.list-report-filters select { width: 100%; }
.list-report-filters .more-filters > div { right: 0; }
.active-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 9px 16px;
    background: #FFF;
    border-bottom: 1px solid var(--border-subtle);
}
.filter-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 999px;
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
}
.filter-chip:hover { border-color: var(--brand-primary); }
.filter-chip b { font-size: 16px; font-weight: 400; line-height: 1; }
.clear-filters { margin-left: 3px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.list-report-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: 0 16px;
    background: #FFF;
    border-bottom: 1px solid var(--border-subtle);
    scrollbar-width: thin;
}
.list-report-tabs a {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
}
.list-report-tabs a:hover { color: var(--brand-primary); background: var(--brand-primary-subtle); }
.list-report-tabs a.active { color: var(--brand-primary); }
.list-report-tabs a.active::after { content: ""; position: absolute; right: 8px; bottom: 0; left: 8px; height: 3px; background: var(--brand-primary); }
.list-report-tabs a span { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.list-report-toolbar {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.list-report-toolbar h2 { margin: 0 0 2px; color: var(--text-primary); font-size: 15px; line-height: 1.3; }
.list-report-toolbar h2 span { color: var(--text-muted); font-weight: 500; }
.list-report-toolbar p { margin: 0; color: var(--text-muted); font-size: 11.5px; }
.list-report-table { min-width: 860px; }
.list-report-table tbody tr { height: 78px; }
.list-report-table tbody th { font-weight: 400; }
.list-report-table th:first-child { width: 31%; }
.list-report-table th:nth-child(2) { width: 18%; }
.list-report-table th:nth-child(3) { width: 35%; }
.personnel-row-identity {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    color: var(--text-primary);
    text-decoration: none;
}
.row-monogram {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--brand-primary-border);
    border-radius: 50%;
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    font-size: 11.5px;
    font-weight: 700;
}
.personnel-row-identity > span:last-child,
.classification-cell,
.assignment-cell { display: grid; gap: 2px; min-width: 0; }
.personnel-row-identity strong,
.classification-cell strong,
.assignment-cell strong { overflow: hidden; color: var(--text-primary); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.personnel-row-identity small,
.classification-cell small,
.assignment-cell small { margin: 0 !important; color: var(--text-muted) !important; font-size: 11px !important; }
.assignment-cell > span { overflow: hidden; color: var(--text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.classification-cell strong { font-weight: 600; }
.row-chevron { width: 48px; padding-right: 10px !important; text-align: right !important; }
.row-chevron a { display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: 4px; color: var(--text-muted); }
.row-chevron a:hover { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.row-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Phase 2 — Personnel object page */
.object-section-sentinel { display: block; height: 1px; scroll-margin-top: var(--object-section-scroll-offset); }
.object-page-header {
    display: block;
    min-height: 0;
    padding: 24px 26px;
    align-items: initial;
    transition: min-height 160ms ease, padding 160ms ease, box-shadow 160ms ease;
}
.js .object-page-header.is-collapsed { position: sticky; top: var(--object-header-sticky-top); z-index: var(--layer-context-header); }
.object-header-full { width: 100%; }
.object-header-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.object-profile { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; }
.object-monogram {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
}
.object-title-copy { min-width: 0; }
.object-title-copy h1 { overflow: hidden; margin-bottom: 6px; text-overflow: ellipsis; white-space: nowrap; }
.object-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: rgba(255,255,255,.84); font-size: 12px; }
.object-meta .status-badge { padding-block: 3px; }
.object-assignment-summary { display: grid; gap: 3px; margin: 20px 0 0 66px; }
.object-assignment-summary strong { color: #FFF; font-size: 15px; font-weight: 700; }
.object-assignment-summary span { color: rgba(255,255,255,.78); font-size: 12.5px; }
.object-key-facts { display: grid; grid-template-columns: repeat(3, minmax(130px, 210px)); gap: 22px; margin: 19px 0 0 66px; }
.object-key-facts div { min-width: 0; }
.object-key-facts dt { color: rgba(255,255,255,.64); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.object-key-facts dd { overflow: hidden; margin: 4px 0 0; color: #FFF; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.object-key-facts .empty-value { color: rgba(255,255,255,.7); }
.object-header-compact { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 20px; }
.object-header-compact > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.object-header-compact strong { overflow: hidden; color: #FFF; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.object-header-compact span { overflow: hidden; color: rgba(255,255,255,.76); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.object-page-header.is-collapsed { min-height: var(--object-header-collapsed-height); padding: 9px 14px; box-shadow: 0 8px 22px rgba(29,45,62,.18); }
.object-page-header.is-collapsed .object-header-full { display: none; }
.object-page-header.is-collapsed .object-header-compact { display: flex; }
.object-page-header.is-collapsed .button { min-height: 36px; }

.object-anchor-nav {
    display: flex;
    min-width: 0;
    align-items: stretch;
    gap: 3px;
    overflow-x: auto;
    margin: 0 0 14px;
    padding: 0 10px;
    background: #FFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
    white-space: nowrap;
}
.js .object-anchor-nav { position: sticky; top: var(--object-nav-sticky-top); z-index: var(--layer-content-navigation); }
.object-anchor-nav a {
    position: relative;
    display: inline-flex;
    min-height: var(--object-nav-height);
    flex: 0 0 auto;
    align-items: center;
    padding: 0 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}
.object-anchor-nav a:hover { color: var(--brand-primary); background: var(--brand-primary-subtle); }
.object-anchor-nav a.active { color: var(--brand-primary); }
.object-anchor-nav a.active::after { content: ""; position: absolute; right: 9px; bottom: -1px; left: 9px; height: 3px; background: var(--brand-primary); }
.object-page-content { padding: 0 24px; background: #FFF; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.object-section { padding: 25px 2px 28px; border-bottom: 1px solid var(--border-subtle); scroll-margin-top: var(--object-section-scroll-offset); }
.object-section:last-child { border-bottom: 0; }
.object-section .section-heading { margin-bottom: 18px; }
.object-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.object-section .detail-list-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.object-section.audit-section table { border: 0; }

/* Phase 2 — display/edit structural consistency and field proportions */
.form-anchor-nav { margin-bottom: 14px; }
.js .form-anchor-nav { top: calc(var(--sticky-content-offset) + var(--space-2)); }
.personnel-form:not(.compact-form) {
    gap: 0;
    overflow: visible;
    background: #FFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.personnel-form:not(.compact-form) > .form-section {
    max-width: none;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    scroll-margin-top: calc(var(--sticky-content-offset) + var(--object-nav-height) + var(--space-5));
}
.personnel-form:not(.compact-form) > .form-section:first-of-type { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.personnel-form:not(.compact-form) > .form-actions { margin: 0; padding: 14px 20px; background: #FFF; }
.personnel-form:not(.compact-form) .form-fields { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.personnel-form:not(.compact-form) .form-fields > label,
.personnel-form:not(.compact-form) .form-fields > .readonly-field { grid-column: span 6; }
.form-identity-section .form-fields > label:nth-child(1) { grid-column: span 6; }
.form-identity-section .form-fields > label:nth-child(2) { grid-column: span 4; }
.form-identity-section .form-fields > label:nth-child(3),
.form-identity-section .form-fields > label:nth-child(4),
.form-identity-section .form-fields > label:nth-child(5) { grid-column: span 4; }
.form-identity-section .form-fields > label:nth-child(6) { grid-column: span 2; }
.form-identity-section .form-fields > label:nth-child(7) { grid-column: span 6; }
.form-identity-section .form-fields > label:nth-child(n+8) { grid-column: span 4; }
.form-service-section .form-fields > label,
.form-service-section .form-fields > .readonly-field { grid-column: span 4; }
.form-assignment-section .form-fields > label { grid-column: span 6; }
.form-lifecycle-section .form-fields > label:nth-child(1),
.form-lifecycle-section .form-fields > label:nth-child(2) { grid-column: span 4; }
.form-lifecycle-section .form-fields > label:nth-child(3) { grid-column: 1 / -1; }
.form-lifecycle-section .form-fields { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 1180px) {
    .list-report-filters { grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(140px, .75fr)) auto auto; }
    .list-report-filters > label:nth-of-type(4) { grid-column: 2; }
    .object-section .detail-list-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .list-report-filters { grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(150px, .8fr)); }
    .list-report-filters > label:nth-of-type(4) { grid-column: auto; }
    .list-report-filters .more-filters > div { right: auto; left: 0; }
    .object-key-facts { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}

@media (max-width: 840px) {
    .list-report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .list-report-filters .search-field { grid-column: 1 / -1; }
    .list-report-filters .button { width: 100%; }
    .js .form-anchor-nav { top: calc(var(--sticky-content-offset) + var(--space-2)); }
    .object-key-facts { margin-left: 0; }
    .object-assignment-summary { margin-left: 0; }
    .personnel-form:not(.compact-form) > .form-section { scroll-margin-top: calc(var(--sticky-content-offset) + var(--object-nav-height) + var(--space-5)); }
}

@media (max-width: 620px) {
    .list-report-filters { grid-template-columns: 1fr; }
    .list-report-filters > *, .list-report-filters .search-field { grid-column: 1; width: 100%; }
    .list-report-filters .more-filters > div { position: static; width: 100%; margin-top: 7px; }
    .active-filter-row { align-items: flex-start; }
    .clear-filters { width: 100%; margin: 2px 0 0; }
    .list-report-toolbar { align-items: flex-start; flex-direction: column; }
    .list-report-toolbar .sort-control { width: 100%; }
    .list-report-toolbar .sort-control select { flex: 1; }
    .object-page-header { padding: 20px 18px; }
    .object-header-title-row { display: grid; gap: 18px; }
    .object-profile { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; }
    .object-monogram { width: 44px; height: 44px; font-size: 13px; }
    .object-title-copy h1 { font-size: 23px; }
    .object-meta { gap: 5px; }
    .object-key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    .object-key-facts div:last-child { grid-column: 1 / -1; }
    .object-header-compact > div { display: grid; gap: 1px; }
    .object-header-compact span { font-size: 10.5px; }
    .object-anchor-nav { padding-inline: 5px; }
    .object-anchor-nav a { min-height: 44px; padding-inline: 10px; }
    .object-page-content { padding: 0 16px; }
    .object-detail-list, .object-section .detail-list-4 { grid-template-columns: 1fr; }
    .personnel-form:not(.compact-form) .form-fields > label,
    .personnel-form:not(.compact-form) .form-fields > .readonly-field,
    .form-lifecycle-section .form-fields > label { grid-column: 1 / -1 !important; }
}

@media (max-width: 430px) {
    .list-report { border-radius: 4px; }
    .list-report-filters, .active-filter-row, .list-report-toolbar { padding-inline: 12px; }
    .list-report-tabs { padding-inline: 6px; }
    .object-page-header { padding: 18px 14px; }
    .object-page-header.is-collapsed { padding-inline: 10px; }
    .object-header-compact strong { font-size: 13px; }
    .object-header-compact .button { padding-inline: 10px; }
    .object-page-content { padding-inline: 13px; }
}

/* Phase 3 — dense administration catalog */
[hidden] { display: none !important; }
.admin-catalog {
    overflow: hidden;
    background: var(--surface-workspace);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.admin-catalog-group { padding: 0 20px; }
.admin-catalog-group + .admin-catalog-group { border-top: 8px solid var(--surface-page); }
.admin-catalog-heading {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border-default);
}
.admin-catalog-heading h2 { margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 700; }
.admin-catalog-heading span { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.admin-catalog-list { display: grid; }
.admin-catalog-row.reference-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 24px;
    min-height: 66px;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    background: #FFF;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    color: var(--text-primary);
}
.admin-catalog-row.reference-card:last-child { border-bottom: 0; }
.admin-catalog-row.reference-card:hover { background: var(--brand-primary-subtle); }
.admin-catalog-row.reference-card:active { background: color-mix(in srgb, var(--brand-primary-subtle) 72%, var(--brand-primary-border)); }
.admin-catalog-row.reference-card:focus-visible { position: relative; z-index: 1; box-shadow: inset 0 0 0 3px var(--brand-focus); }
.admin-catalog-icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--text-secondary); }
.admin-catalog-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.admin-catalog-copy { display: grid; gap: 2px; min-width: 0; }
.admin-catalog-copy strong { color: var(--text-primary); font: 700 13px/1.25 var(--font-application); }
.admin-catalog-copy small { overflow: hidden; color: var(--text-muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.admin-catalog-count { color: var(--text-secondary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.admin-catalog-chevron { width: 15px; height: 15px; fill: none; stroke: var(--text-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Phase 3 — individual reference masters */
.reference-editor-toggle { display: none; }
.js .reference-editor-toggle { display: inline-flex; }
.reference-form-section [data-reference-editor-close] { display: none; }
.js .reference-form-section [data-reference-editor-close] { display: inline-flex; }
.reference-form-section { scroll-margin-top: calc(var(--shell-header-height) + 16px); }
.js .reference-form-section:not(.is-open) { display: none; }
.reference-form-section.is-open { animation: admin-editor-in 180ms ease-out; }
@keyframes admin-editor-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.reference-form-fields { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.reference-form-fields > label { grid-column: span 6; }
.reference-form-fields > label:has(textarea) { grid-column: 1 / -1; }
.reference-master { border-radius: var(--radius-md); }
.reference-table-toolbar { min-height: 64px; }
.reference-table-toolbar h2 span { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.reference-master-table { min-width: 850px; }
.reference-master-table tbody tr { min-height: 58px; }
.reference-master-table tbody tr:focus-within { background: var(--brand-primary-subtle); box-shadow: inset 3px 0 0 var(--brand-primary); }
.reference-master-table tbody tr[aria-selected="true"] { background: var(--brand-primary-subtle); }
.usage-summary { display: grid; gap: 2px; }
.usage-summary strong { color: var(--text-primary); font-size: 11.5px; font-weight: 600; }
.usage-summary small { margin: 0 !important; color: var(--text-muted) !important; font-size: 10.5px !important; }
.usage-summary.state-zero strong { color: var(--text-muted); font-weight: 500; }
.reference-state { font-weight: 600; }
.reference-state-active { color: var(--semantic-success); }
.reference-state-active::before { background: var(--semantic-success); }
.reference-state-planned, .reference-state-draft { color: var(--semantic-information); }
.reference-state-planned::before, .reference-state-draft::before { background: var(--semantic-information); }
.reference-state-suspended { color: var(--semantic-warning); }
.reference-state-suspended::before { background: var(--semantic-warning); }
.reference-state-inactive, .reference-state-retired, .reference-state-closed { color: var(--text-muted); }
.reference-state-inactive::before, .reference-state-retired::before, .reference-state-closed::before { background: var(--text-muted); }
.manage-link, .reference-delete-trigger { display: inline-flex; min-height: 32px; align-items: center; padding: 0 3px; font-size: 11.5px; }
.manage-link { color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.manage-link:hover { text-decoration: underline; }
.blocked-action { max-width: 220px; color: var(--semantic-danger); }
.row-actions { align-items: center; gap: 10px; white-space: nowrap; }
.reference-row-menu { position: relative; }
.reference-row-menu > summary { display: inline-flex; min-height: 32px; align-items: center; gap: 4px; padding: 0 3px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.reference-row-menu > summary:hover { color: var(--brand-primary); }
.reference-row-menu > div { display: grid; padding-top: 3px; }
.reference-row-menu .reference-delete-trigger { border: 0; background: transparent; color: var(--semantic-danger); cursor: pointer; text-align: left; }
.reference-row-menu .reference-delete-trigger:hover { color: var(--semantic-danger-hover); text-decoration: underline; }
.delete-target { display: grid; gap: 10px; margin: 16px 0; }
.delete-target div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.delete-target dt { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.delete-target dd { margin: 0; color: var(--text-primary); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.dependency-dialog-content { width: 500px; max-width: 100%; padding: 24px 26px 22px; }
.dependency-dialog-content h3 { margin: 20px 0 8px; color: var(--text-primary); font-size: 13px; }
.dependency-dialog-content ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 12.5px; }
.dependency-dialog-content .safe-alternative { margin-top: 18px; padding: 10px 12px; background: var(--semantic-information-subtle); color: var(--text-primary); }

/* Phase 3 — explicit product states */
.state-value { display: inline-flex; align-items: center; min-height: 22px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.state-not-recorded { font-style: italic; }
.state-not-applicable { color: var(--text-disabled); }
.state-not-assigned { color: var(--semantic-information); }
.object-key-facts .state-value { color: rgba(255,255,255,.76); }
.state-panel { text-align: center; }
.state-panel-icon { display: grid; width: 38px; height: 38px; margin: 0 auto 13px; place-items: center; border-radius: 50%; background: #EFF1F2; color: var(--text-secondary); font-weight: 700; }
.state-no-permission .state-panel-icon { background: var(--semantic-warning-subtle); color: var(--semantic-warning); }
.state-unavailable .state-panel-icon { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }
.state-no-results::before, .state-empty::before { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 20px; }
.state-no-results::before { content: "⌕"; }
.state-empty::before { content: "○"; }
.state-loading { position: relative; padding-top: 42px !important; }
.state-loading::before { content: ""; position: absolute; top: 14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 2px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: state-spin .8s linear infinite; }
@keyframes state-spin { to { transform: rotate(360deg); } }

/* Phase 3 — controlled feedback and destructive dialogs */
.alert { border-left-width: 4px; }
.alert-copy ul { margin: 5px 0 0; padding-left: 18px; }
.alert-dismiss { transition: background-color 160ms ease, transform 160ms ease; }
.alert-dismiss:hover { background: rgba(29,45,62,.08); }
.alert-dismiss:active { transform: translateY(1px); }
.delete-dialog { border-top: 3px solid var(--semantic-danger); }
.delete-dialog form { padding: 24px 26px 22px; }
.delete-dialog h2 { font-size: 21px; }
.delete-dialog .danger-icon { width: 36px; height: 36px; margin-bottom: 13px; background: var(--semantic-danger-subtle); }
.delete-dialog .dialog-consequence { margin: 12px 0; padding: 8px 10px; border-left: 3px solid var(--semantic-danger); background: var(--semantic-danger-subtle); color: var(--text-primary) !important; font-size: 12px; }
.delete-dialog[open] { animation: controlled-dialog-in 180ms ease-out; }
@keyframes controlled-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }

/* Phase 3 — complete interaction-state audit */
.button, .app-sidebar nav a, .list-report-tabs a, .object-anchor-nav a, .admin-catalog-row, tbody tr {
    transition-duration: 160ms;
}
.button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(29,45,62,.16); }
.button[aria-busy="true"]::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: state-spin .7s linear infinite; }
.more-filters[open] > div, .account-menu[open] .account-popover, .action-menu[open] > div { animation: dropdown-in 160ms ease-out; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.app-sidebar nav a:active, .list-report-tabs a:active, .object-anchor-nav a:active { background: color-mix(in srgb, var(--brand-primary-subtle) 78%, var(--brand-primary-border)); }
.table-scroll:focus-visible { box-shadow: 0 0 0 3px var(--brand-focus); }

@media (max-width: 1024px) {
    .reference-master-table .col-effective { display: none; }
}

@media (max-width: 840px) {
    .admin-catalog-group { padding-inline: 16px; }
    .reference-form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-form-fields > label { grid-column: auto; }
    .reference-form-fields > label:has(textarea) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .list-report-scroll { overflow: visible; }
    .list-report-table { display: block; min-width: 0; }
    .list-report-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    .list-report-table tbody { display: grid; }
    .list-report-table tbody tr[data-personnel-row] { position: relative; display: grid; min-height: 0; padding: 14px 43px 14px 12px; border-bottom: 1px solid var(--border-subtle); }
    .list-report-table tbody tr[data-personnel-row]:focus-within { box-shadow: inset 3px 0 0 var(--brand-primary); }
    .list-report-table tbody tr[data-personnel-row] > th,
    .list-report-table tbody tr[data-personnel-row] > td { display: grid; height: auto; min-height: 0; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 9px; padding: 4px 0; border: 0; }
    .list-report-table tbody tr[data-personnel-row] > th { display: block; padding-bottom: 8px; }
    .list-report-table tbody tr[data-personnel-row] > td::before { content: attr(data-label); color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .055em; line-height: 1.6; text-transform: uppercase; }
    .list-report-table tbody tr[data-personnel-row] > .row-chevron { position: absolute; top: 15px; right: 8px; display: block; width: 32px; padding: 0; }
    .list-report-table tbody tr[data-personnel-row] > .row-chevron::before { content: none; }
    .list-report-table tbody tr[data-personnel-row] > .row-chevron a { display: grid; width: 32px; height: 32px; place-items: center; }
    .list-report-table .classification-cell,
    .list-report-table .assignment-cell { min-width: 0; }
    .list-report-table tbody tr:not([data-personnel-row]) { display: block; }
    .list-report-table tbody tr:not([data-personnel-row]) td { display: block; width: 100%; }
    .admin-catalog-group { padding-inline: 12px; }
    .admin-catalog-row.reference-card { grid-template-columns: 30px minmax(0, 1fr) 18px; min-height: 72px; gap: 9px; }
    .admin-catalog-icon { width: 28px; }
    .admin-catalog-count { grid-column: 2; color: var(--brand-primary); font-size: 10.5px; }
    .admin-catalog-chevron { grid-column: 3; grid-row: 1 / span 2; }
    .reference-form-fields { grid-template-columns: 1fr; }
    .reference-form-fields > label, .reference-form-fields > label:has(textarea) { grid-column: 1; }
    .reference-master-scroll { overflow: visible; }
    .reference-master-table { display: block; min-width: 0; }
    .reference-master-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    .reference-master-table tbody { display: grid; }
    .reference-master-table tbody tr[data-reference-row] { position: relative; display: grid; min-height: 0; padding: 13px 42px 13px 12px; border-bottom: 1px solid var(--border-subtle); }
    .reference-master-table tbody tr[data-reference-row]:focus-within { box-shadow: inset 3px 0 0 var(--brand-primary); }
    .reference-master-table tbody tr[data-reference-row] > th,
    .reference-master-table tbody tr[data-reference-row] > td { display: grid; height: auto; min-height: 0; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 9px; padding: 3px 0; border: 0; }
    .reference-master-table tbody tr[data-reference-row] > th::before,
    .reference-master-table tbody tr[data-reference-row] > td::before { content: attr(data-label); color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
    .reference-master-table tbody tr[data-reference-row] > .col-effective { display: none; }
    .reference-master-table .row-actions { display: flex; justify-content: flex-start; }
    .reference-master-table .blocked-action { max-width: none; }
    .reference-master-table .empty-state { display: block; }
    .reference-master-table tbody tr:not([data-reference-row]) { display: block; }
    .reference-master-table tbody tr:not([data-reference-row]) td { display: block; width: 100%; }
}

@media (max-width: 430px) {
    .reference-master-header .heading-actions { width: 100%; }
    .reference-master-header .reference-editor-toggle { width: 100%; }
    .delete-dialog form { padding: 21px 18px 18px; }
}

/* Phase 2 — theme-aware premium surface, depth, and restrained motion */
:root {
    --theme-accent-strong: color-mix(in srgb, var(--theme-accent) 72%, var(--brand-primary-active));
    --theme-accent-soft: color-mix(in srgb, var(--theme-accent) 14%, transparent);
    --theme-on-accent: var(--theme-on-primary);
    --hero-surface: color-mix(in srgb, var(--brand-primary) 88%, #101820);
    --hero-surface-strong: color-mix(in srgb, var(--brand-primary-active) 86%, #080D14);
    --hero-surface-soft: color-mix(in srgb, var(--brand-primary) 92%, var(--theme-accent));
    --hero-highlight: color-mix(in srgb, var(--theme-accent) 42%, white);
    --hero-flare-primary: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    --hero-flare-secondary: color-mix(in srgb, var(--brand-primary-active) 9%, transparent);
    --hero-texture: color-mix(in srgb, var(--theme-on-accent) 4%, transparent);
    --hero-edge-highlight: color-mix(in srgb, var(--theme-on-accent) 26%, transparent);
    --hero-shadow: 0 5px 16px color-mix(in srgb, var(--brand-primary-active) 18%, transparent);
    --accent-hover: var(--brand-primary-hover);
    --accent-active: var(--brand-primary-active);
    --elevation-surface: 0 1px 2px rgba(29,45,62,.07);
    --elevation-raised: 0 5px 14px rgba(29,45,62,.11);
    --elevation-overlay: 0 10px 26px rgba(20,34,49,.17);
    --elevation-dialog: 0 18px 42px rgba(10,19,34,.24);
}

:is(.page-header, .workspace-heading, .record-header, .record-heading) {
    position: relative;
    isolation: isolate;
    background-color: var(--brand-primary);
    background-image: linear-gradient(112deg, var(--hero-surface-strong), var(--hero-surface) 58%, var(--hero-surface-soft));
    border-color: color-mix(in srgb, var(--hero-highlight) 34%, transparent);
    box-shadow: inset 0 1px 0 var(--hero-edge-highlight), var(--hero-shadow);
    color: var(--theme-on-accent);
    animation: contextual-surface-enter 220ms ease-out both;
}
:is(.page-header, .workspace-heading, .record-header, .record-heading)::before,
:is(.page-header, .workspace-heading, .record-header, .record-heading)::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}
:is(.page-header, .workspace-heading, .record-header, .record-heading)::before {
    background-image:
        repeating-linear-gradient(135deg, transparent 0 11px, var(--hero-texture) 11px 12px),
        repeating-linear-gradient(45deg, transparent 0 31px, var(--hero-texture) 31px 32px);
    background-size: 17px 17px, 43px 43px;
}
:is(.page-header, .workspace-heading, .record-header, .record-heading)::after {
    background-image:
        radial-gradient(ellipse 72% 92% at 84% 4%, var(--hero-flare-primary), transparent 64%),
        radial-gradient(ellipse 58% 72% at 8% 112%, var(--hero-flare-secondary), transparent 70%);
    opacity: .92;
    transform: translate3d(0,0,0);
    transform-origin: 82% 12%;
    animation: contextual-flare-drift 26s ease-in-out infinite alternate;
}
:is(.page-header, .workspace-heading, .record-header, .record-heading) > * {
    position: relative;
    z-index: 1;
}

@keyframes contextual-surface-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
@keyframes contextual-flare-drift {
    0% { opacity: .88; transform: translate3d(-2px,1px,0) scale(1); }
    100% { opacity: .94; transform: translate3d(3px,-2px,0) scale(1.012); }
}

/* A compact three-level elevation system; dense information surfaces stay quiet. */
.data-surface, .reference-surface, .form-section, .detail-section, .danger-zone { box-shadow: var(--elevation-surface); }
.account-popover, .more-filters > div, .action-menu > div { box-shadow: var(--elevation-overlay); }
.theme-dialog, .delete-dialog { box-shadow: var(--elevation-dialog); }

/* Micro-interactions communicate hover, press, and selection without layout shift. */
.button {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}
.button:hover:not(:disabled) { box-shadow: var(--elevation-raised); }
.button:active:not(:disabled) { transform: translateY(1px); transition-duration: 90ms; }
.app-sidebar nav a, .list-report-tabs a, .object-anchor-nav a,
.action-menu button, .reference-row-menu .reference-delete-trigger,
.record-link, .manage-link {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.reference-card, .admin-catalog-row, .theme-option {
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.reference-card:hover, .admin-catalog-row:hover, .theme-option:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-raised);
}

.list-report-tabs a::after, .object-anchor-nav a::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 3px;
    background: var(--brand-primary);
    opacity: 0;
    transform: scaleX(.35);
    transform-origin: center;
    transition: opacity 180ms ease, transform 180ms ease;
}
.object-anchor-nav a::after { right: 9px; bottom: -1px; left: 9px; }
.list-report-tabs a.active::after, .object-anchor-nav a.active::after {
    opacity: 1;
    transform: scaleX(1);
}


/* Digital Experience Transformation Phase 1 — premium portal foundation
   Extends the existing application system; these primitives are intentionally
   unpopulated until the portal homepage phase. */
:root {
    /* Layout and rhythm */
    --portal-content-max: 1180px;
    --portal-wide-max: 1680px;
    --portal-reading-max: 760px;
    --page-gutter: clamp(16px, 3vw, 48px);
    --section-gap: clamp(32px, 4vw, 56px);
    --content-gap: clamp(18px, 2vw, 28px);

    /* Bright institutional surfaces */
    --surface-page: #F7F8F6;
    --surface-primary: #FFFFFF;
    --surface-elevated: #FFFFFF;
    --surface-quiet: #F3F5F3;
    --surface-editorial: #FBFAF7;
    --surface-interactive: #FFFFFF;
    --surface-hover: color-mix(in srgb, var(--brand-primary-subtle) 34%, #FFFFFF);
    --surface-selected: color-mix(in srgb, var(--brand-primary-subtle) 78%, #FFFFFF);

    /* Restrained shape and depth */
    --radius-control: 5px;
    --radius-surface: 8px;
    --radius-feature: 12px;
    --shadow-none: none;
    --shadow-lift: 0 3px 12px rgba(29,45,62,.09);
    --shadow-overlay: 0 16px 36px rgba(20,34,49,.18);

    /* Motion */
    --motion-fast: 120ms;
    --motion-standard: 180ms;
    --motion-slow: 240ms;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);

    /* Website-like type roles, all resolved from locally safe fonts */
    --font-display: var(--font-application);
    --type-display: clamp(2.45rem, 5vw, 5.25rem);
    --type-page-title: clamp(1.75rem, 2.7vw, 2.5rem);
    --type-section-title: clamp(1.25rem, 1.8vw, 1.55rem);
    --type-card-title: 1rem;
    --type-body: .875rem;
    --type-small-body: .78rem;
    --type-label: .6875rem;
    --type-metadata: .6875rem;
    --type-table: .78125rem;
    --type-financial: .875rem;
}

html, body { background: var(--surface-page); }
.app-main { background: var(--surface-page); }
.app-main > * { width: 100%; max-width: var(--portal-wide-max); margin-inline: auto; }
.portal-content, .portal-content-wide, .portal-reading { width: 100%; margin-inline: auto; }
.portal-content { max-width: var(--portal-content-max); }
.portal-content-wide { max-width: var(--portal-wide-max); }
.portal-reading { max-width: var(--portal-reading-max); }
.portal-section { margin-block: var(--section-gap); }
.portal-stack { display: grid; gap: var(--content-gap); }

/* Authenticated website shell */
.app-topbar {
    height: 72px;
    padding-inline: var(--page-gutter);
    background: var(--surface-primary);
    border-bottom-color: var(--border-subtle);
    box-shadow: 0 1px 0 rgba(29,45,62,.025);
}
.app-brand { gap: 13px; }
.app-brand-seal { width: 44px; height: 46px; }
.app-brand-copy { padding-left: 14px; border-left-color: var(--border-subtle); }
.app-brand-copy strong { color: var(--brand-navy); font-size: 15px; letter-spacing: .075em; }
.app-brand-copy small { color: var(--text-muted); font-size: 11px; }
.appearance-trigger, .account-menu summary {
    border-radius: var(--radius-control);
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.appearance-trigger:hover, .account-menu summary:hover, .account-signout:hover { background: var(--surface-hover); color: var(--text-primary); }
.account-avatar { background: var(--surface-selected); color: var(--brand-primary); border-color: var(--brand-primary-border); }
.account-popover { border-radius: var(--radius-surface); box-shadow: var(--shadow-overlay); }

.app-frame { grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.app-sidebar {
    top: 72px;
    height: calc(100vh - 72px);
    padding: 28px 12px 18px;
    background: color-mix(in srgb, var(--surface-primary) 92%, var(--surface-editorial));
    border-right-color: var(--border-subtle);
}
.app-sidebar nav { gap: 26px; }
.nav-label { margin: 0 10px 8px; color: var(--text-muted); font-size: 9.5px; letter-spacing: .15em; }
.app-sidebar nav a {
    min-height: 40px;
    gap: 10px;
    padding: 8px 11px;
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.app-sidebar nav a svg { width: 18px; height: 18px; stroke-width: 1.55; }
.app-sidebar nav a:hover { background: var(--surface-hover); color: var(--text-primary); }
.app-sidebar nav a.active { background: var(--surface-selected); color: var(--brand-primary); font-weight: 650; }
.app-sidebar nav a.active::before { top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; }
.sidebar-footer { padding-inline: 10px; border-top-color: var(--border-subtle); }
.security-mark { border-radius: var(--radius-control); background: var(--surface-quiet); }

/* Contextual headers read as editorial page introductions, not dashboard banners. */
:is(.page-header, .workspace-heading, .record-header, .record-heading) {
    min-height: 112px;
    padding: 24px 28px;
    overflow: hidden;
    border-color: var(--border-subtle);
    border-radius: var(--radius-surface);
    background: linear-gradient(104deg, var(--surface-selected), var(--surface-primary) 62%);
    box-shadow: var(--shadow-none);
    color: var(--text-primary);
    animation: none;
}
:is(.page-header, .workspace-heading, .record-header, .record-heading)::before {
    display: block;
    inset: 18px auto 18px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-primary);
    content: "";
}
:is(.page-header, .workspace-heading, .record-header, .record-heading)::after { display: none; }
:is(.page-header, .workspace-heading, .record-header, .record-heading) .eyebrow { color: var(--brand-primary); }
:is(.page-header, .workspace-heading, .record-header, .record-heading) h1 {
    color: var(--text-primary);
    font-size: var(--type-page-title);
    font-weight: 680;
    letter-spacing: -.025em;
}
.page-header-copy > p:last-child, .workspace-heading > div > p:last-child, .record-heading p,
.record-summary, .record-header .identifier { color: var(--text-secondary); }
.record-header .summary-divider { background: var(--text-muted); }
.page-header .button-primary, .record-header .button-primary, .workspace-heading .button-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}
.page-header .button-primary:hover, .record-header .button-primary:hover, .workspace-heading .button-primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.page-header .button-secondary, .record-header .button-secondary, .workspace-heading .button-secondary {
    background: var(--surface-primary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.page-header .button-secondary:hover, .record-header .button-secondary:hover, .workspace-heading .button-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
}
.page-header :focus-visible, .record-header :focus-visible { box-shadow: 0 0 0 3px var(--brand-focus); border-color: var(--brand-primary) !important; }

/* Shared typography, controls, surfaces, and semantic status */
.eyebrow { font-size: var(--type-metadata); line-height: 1.35; }
.section-heading h2, .form-section h2, .reference-group h2, .reference-table-toolbar h2, .danger-zone h2 { font-size: var(--type-section-title); }
.data-panel-heading h2, .payroll-panel-heading h3 { font-size: var(--type-card-title); }
table th, table td { font-size: var(--type-table); }
.money-cell, .number-cell, .payslip-net strong { font-variant-numeric: tabular-nums lining-nums; }

.button {
    min-height: 40px;
    border-radius: var(--radius-control);
    box-shadow: none;
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.button:hover:not(:disabled) { box-shadow: var(--shadow-lift); }
.button-tertiary, .button-ghost { background: transparent; }
.button-danger, .button-danger:hover { color: #FFFFFF; }
.button-icon, .icon-button { min-width: 40px; width: 40px; padding: 0; }

:is(input, select, textarea) {
    border-radius: var(--radius-control);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
:is(input, select, textarea)::placeholder { color: var(--text-muted); opacity: .8; }
:is(input, select, textarea):disabled { opacity: 1; cursor: not-allowed; }
.data-surface, .reference-surface, .form-section, .detail-section, .reference-card,
.payroll-panel, .biometric-status-card, .biometric-readiness-panel {
    border-color: var(--border-subtle);
    border-radius: var(--radius-surface);
    background: var(--surface-primary);
    box-shadow: var(--shadow-none);
}
.filter-form, .data-panel-heading, .reference-table-toolbar { background: var(--surface-quiet); }

.status-ready, .status-success, .status-available { background: var(--semantic-success-subtle); color: var(--semantic-success); }
.status-pending, .status-warning, .status-attention { background: var(--semantic-warning-subtle); color: var(--semantic-warning); }
.status-error { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }
.status-info, .status-information { background: var(--semantic-information-subtle); color: var(--semantic-information); }

/* Portal hero primitives */
.portal-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(360px, 52vw, 620px);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-feature);
    background: var(--surface-editorial);
}
.portal-hero-media, .portal-hero-overlay, .portal-hero-content { grid-area: 1 / 1; }
.portal-hero-media { min-width: 0; min-height: 0; }
.portal-hero-media :is(img, picture, video) { width: 100%; height: 100%; display: block; object-fit: cover; }
.portal-hero-overlay { z-index: 1; background: linear-gradient(90deg, rgba(10,19,34,.76), rgba(10,19,34,.22) 66%, transparent); pointer-events: none; }
.portal-hero-content { z-index: 2; align-self: end; max-width: 760px; padding: clamp(28px, 5vw, 72px); color: #FFFFFF; }
.portal-eyebrow { margin: 0 0 12px; font-size: var(--type-metadata); font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.portal-title { margin: 0; font: 600 var(--type-display)/.96 var(--font-display); letter-spacing: -.035em; }
.portal-subtitle { max-width: 640px; margin: 18px 0 0; font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.55; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.portal-hero-stats { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 28px; font-variant-numeric: tabular-nums; }

/* Portal shortcut and content-card primitives */
.portal-shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.portal-shortcut-tile {
    min-height: 112px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-surface);
    background: var(--surface-interactive);
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--motion-standard) ease, border-color var(--motion-standard) ease,
        background-color var(--motion-standard) ease, box-shadow var(--motion-standard) ease, transform var(--motion-standard) var(--motion-ease);
}
.portal-shortcut-tile:hover { transform: translateY(-2px); border-color: var(--brand-primary-border); background: var(--surface-hover); box-shadow: var(--shadow-lift); }
.portal-shortcut-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand-primary); }
.portal-shortcut-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portal-shortcut-copy { min-width: 0; }
.portal-shortcut-copy strong { display: block; font-size: var(--type-card-title); }
.portal-shortcut-copy small { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--type-small-body); line-height: 1.4; }

.portal-card-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--content-gap); }
.portal-card { min-width: 0; padding: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-primary); }
.portal-card h3 { margin: 0; font-size: var(--type-card-title); }
.portal-card-editorial { grid-column: span 7; padding: 0; overflow: hidden; background: var(--surface-editorial); }
.portal-card-metric { grid-column: span 3; border-top: 3px solid var(--brand-primary); }
.portal-card-action, .portal-card-attention { grid-column: span 5; }
.portal-card-attention { border-left: 3px solid var(--semantic-warning); background: var(--semantic-warning-subtle); }
.portal-card-event { grid-column: span 4; }
.portal-card-activity { grid-column: span 8; border-radius: 0; border-width: 1px 0; }

@media (max-width: 1180px) {
    .app-main { padding-inline: 28px; }
}

@media (max-width: 1024px) and (min-width: 841px) {
    .app-frame { grid-template-columns: 82px minmax(0, 1fr); }
    .app-sidebar { padding: 22px 8px 16px; }
    .app-sidebar nav { gap: 20px; }
    .app-sidebar nav a { justify-content: center; padding-inline: 9px; }
    .app-sidebar nav a.active::before { top: 8px; bottom: 8px; }
    .sidebar-footer { justify-content: center; padding-inline: 0; }
}

@media (max-width: 840px) {
    .app-topbar { height: 68px; padding-inline: 16px; }
    .app-frame { display: block; min-height: calc(100vh - 68px); }
    .app-sidebar {
        position: sticky;
        top: 68px;
        z-index: 20;
        height: auto;
        padding: 7px 14px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }
    .app-sidebar nav { min-width: max-content; display: flex; gap: 8px; }
    .app-sidebar nav a { min-height: 44px; justify-content: flex-start; padding: 8px 12px; }
    .app-sidebar nav a.active::before { top: 8px; bottom: 8px; }
    .app-main { padding: 22px 22px 48px; }
    .portal-card-editorial, .portal-card-metric, .portal-card-action, .portal-card-attention,
    .portal-card-event, .portal-card-activity { grid-column: span 12; }
    .portal-hero-overlay { background: linear-gradient(0deg, rgba(10,19,34,.8), rgba(10,19,34,.08) 72%); }
}

@media (max-width: 620px) {
    .app-topbar { padding-inline: 12px; }
    .app-main { padding: 18px 14px 44px; }
    :is(.page-header, .workspace-heading, .record-header, .record-heading) {
        min-height: 0;
        padding: 20px 18px;
    }
    :is(.page-header, .workspace-heading, .record-header, .record-heading) h1 { font-size: clamp(1.55rem, 8vw, 1.9rem); }
    .portal-hero { min-height: 440px; border-radius: var(--radius-surface); }
    .portal-hero-content { padding: 24px 20px; }
    .portal-actions { display: grid; }
    .portal-actions .button { width: 100%; min-height: 44px; }
    .portal-shortcut-grid { grid-template-columns: 1fr; }
    .portal-shortcut-tile { min-height: 96px; }
}

@media (max-width: 430px) {
    .app-topbar { padding-inline: 10px; }
    .app-sidebar { padding-inline: 8px; }
    .app-main { padding: 16px 10px 40px; }
    :is(.page-header, .workspace-heading, .record-header, .record-heading) { padding: 18px 16px; border-radius: var(--radius-control); }
    .button { min-height: 44px; }
}

@media (max-width: 360px) {
    .app-main { padding-inline: 8px; }
    :is(.page-header, .workspace-heading, .record-header, .record-heading) { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-shortcut-tile:hover { transform: none; }
}

/* AFPCES Digital Headquarters — Phase 2 */
.digital-headquarters { display: flow-root; }
.headquarters-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    min-height: clamp(430px, 42vw, 590px);
    background: var(--surface-primary);
}
.headquarters-hero .portal-hero-content {
    grid-area: 1 / 1;
    align-self: stretch;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 5vw, 72px);
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--surface-primary), var(--surface-selected));
}
.headquarters-hero .portal-eyebrow { color: var(--brand-primary); }
.headquarters-hero .portal-title {
    max-width: 760px;
    color: var(--brand-navy);
    font-size: clamp(2.65rem, 4.6vw, 4.85rem);
    line-height: .98;
}
.headquarters-hero .portal-subtitle { max-width: 610px; color: var(--text-secondary); font-size: clamp(.98rem, 1.45vw, 1.16rem); }
.headquarters-welcome { margin: 22px 0 -8px; color: var(--brand-primary); font-size: clamp(1rem, 1.7vw, 1.28rem); font-weight: 720; letter-spacing: -.012em; }
.headquarters-date { order: -1; margin: 0 0 16px; color: var(--text-muted); font-size: var(--type-small-body); }
.headquarters-hero .portal-eyebrow { order: -2; }
.headquarters-hero .portal-actions { margin-top: 30px; }
.headquarters-hero .portal-hero-media { grid-area: 1 / 2; position: relative; overflow: hidden; }
.headquarters-hero .portal-hero-media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-navy) 18%, transparent), transparent 42%);
    content: "";
    pointer-events: none;
}
.headquarters-media-fallback {
    background:
        radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--brand-accent) 40%, transparent), transparent 31%),
        linear-gradient(142deg, var(--brand-navy), color-mix(in srgb, var(--brand-navy) 72%, var(--brand-primary)));
}
.headquarters-hero-fallback {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 34px;
    color: var(--brand-on-primary);
    text-align: center;
}
.headquarters-hero-fallback::before, .headquarters-hero-fallback::after {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--brand-on-primary) 20%, transparent);
    content: "";
}
.headquarters-hero-fallback::before { inset: 9% 12%; }
.headquarters-hero-fallback::after { inset: 16% 20%; }
.headquarters-hero-fallback img { position: relative; z-index: 1; width: clamp(110px, 14vw, 180px); height: auto; filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--brand-navy) 45%, transparent)); }
.headquarters-hero-fallback span { position: relative; z-index: 1; font-size: var(--type-label); font-weight: 720; letter-spacing: .15em; text-transform: uppercase; }

.headquarters-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.headquarters-shortcuts .portal-shortcut-tile { min-height: 104px; }
.headquarters-shortcuts .portal-shortcut-tile > span:last-child { color: var(--text-muted); font-size: 1.1rem; transition: transform var(--motion-standard) var(--motion-ease); }
.headquarters-shortcuts .portal-shortcut-tile:hover > span:last-child { transform: translateX(3px); }
.headquarters-scope-note { grid-column: 1 / -1; display: grid; gap: 5px; padding: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-primary); }
.headquarters-scope-note span { color: var(--text-secondary); }

.headquarters-section-heading, .card-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
}
.headquarters-section-heading .portal-eyebrow, .card-section-heading .portal-eyebrow { margin-bottom: 7px; color: var(--brand-primary); }
.headquarters-section-heading h2, .card-section-heading h2, .feature-copy h2 { margin: 0; color: var(--text-primary); font-size: var(--type-section-title); letter-spacing: -.018em; }
.headquarters-section-heading > p { max-width: 470px; margin: 0; color: var(--text-secondary); font-size: var(--type-body); line-height: 1.6; text-align: right; }
.today-grid { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr); border-block: 1px solid var(--border-subtle); }
.today-primary { min-height: 290px; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 54px); background: var(--brand-navy); color: var(--brand-on-primary); }
.today-primary > strong { display: block; margin: 12px 0 4px; font-size: clamp(3.2rem, 7vw, 6.6rem); font-weight: 620; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.today-primary h3 { margin: 0; font-size: 1rem; }
.today-primary p { max-width: 430px; margin: 12px 0 0; color: color-mix(in srgb, var(--brand-on-primary) 74%, transparent); font-size: var(--type-small-body); line-height: 1.6; }
.today-source { color: inherit; font-size: var(--type-label); font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.today-rail { display: grid; background: var(--surface-primary); }
.today-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 18px; padding: 28px clamp(24px, 4vw, 44px); border-bottom: 1px solid var(--border-subtle); }
.today-row:last-child { border-bottom: 0; }
.today-row-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-weight: 760; }
.today-row .today-source { color: var(--text-muted); }
.today-row h3 { margin: 5px 0 4px; font-size: 1.08rem; }
.today-row p { margin: 0; color: var(--text-secondary); font-size: var(--type-small-body); line-height: 1.5; }

.personnel-feature { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); min-height: 430px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-feature); background: var(--surface-primary); }
.feature-media, .compact-media, .story-media { min-height: 0; overflow: hidden; }
.feature-media :is(picture, img), .compact-media :is(picture, img), .story-media :is(picture, img) { width: 100%; height: 100%; display: block; object-fit: cover; }
.feature-copy { align-self: center; padding: clamp(30px, 5vw, 64px); }
.feature-copy > .portal-eyebrow { color: var(--brand-primary); }
.feature-copy > p:not(.portal-eyebrow) { max-width: 650px; color: var(--text-secondary); line-height: 1.65; }
.personnel-stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 30px 0; background: var(--border-subtle); border-block: 1px solid var(--border-subtle); }
.personnel-stat-list div { padding: 20px 16px; background: var(--surface-primary); }
.personnel-stat-list dt { color: var(--text-muted); font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.personnel-stat-list dd { margin: 8px 0 0; color: var(--brand-navy); font-size: clamp(1.6rem, 3vw, 2.45rem); font-weight: 650; font-variant-numeric: tabular-nums; }
.text-link { color: var(--brand-primary); font-size: var(--type-body); font-weight: 720; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.operations-media-fallback {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    min-height: 250px;
    padding: 28px;
    overflow: hidden;
    background:
        linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--brand-primary) 10%, transparent) 48% 52%, transparent 52%),
        var(--surface-selected);
    color: var(--brand-primary);
    text-align: center;
}
.operations-media-fallback::after { position: absolute; width: 190px; height: 190px; border: 1px solid var(--brand-primary-border); border-radius: 50%; content: ""; }
.operations-line-icon { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--brand-primary-border); border-radius: 50%; background: var(--surface-primary); font-size: 1.35rem; font-weight: 760; }
.operations-media-fallback p { position: relative; z-index: 1; margin: 0; font-size: var(--type-small-body); font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }

.headquarters-work-grid { align-items: stretch; }
.attendance-feature { grid-column: span 7; padding: 0; overflow: hidden; }
.payroll-feature { grid-column: span 5; display: flex; flex-direction: column; }
.headquarters-work-grid > :only-child { grid-column: 1 / -1; }
.attendance-feature .compact-media { height: 190px; }
.attendance-feature .compact-media.operations-media-fallback { min-height: 190px; }
.attendance-feature .card-section-heading { padding: 22px 22px 0; }
.activity-list { list-style: none; margin: 0; padding: 0 22px 14px; }
.activity-list li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.activity-list time { color: var(--text-secondary); font-size: var(--type-small-body); font-variant-numeric: tabular-nums; }
.activity-list strong, .activity-list small { display: block; }
.activity-list small { margin-top: 3px; color: var(--text-muted); }
.activity-list em { padding: 4px 8px; border-radius: 999px; font-size: var(--type-label); font-style: normal; font-weight: 700; }
.headquarters-state { padding: 5px 9px; border-radius: 999px; font-size: var(--type-label); font-weight: 740; }
.payroll-coverage { margin: 0 0 22px; color: var(--text-secondary); }
.payroll-snapshot { margin: 0 0 28px; border-block: 1px solid var(--border-subtle); }
.payroll-snapshot div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.payroll-snapshot div:last-child { border-bottom: 0; }
.payroll-snapshot dt { color: var(--text-muted); font-size: var(--type-small-body); }
.payroll-snapshot dd { margin: 0; font-size: var(--type-body); font-weight: 680; text-align: right; }
.payroll-feature > .button { align-self: flex-start; margin-top: auto; }
.headquarters-empty { display: grid; gap: 5px; margin: 18px 22px 22px; padding: 18px; border-left: 3px solid var(--semantic-warning); background: var(--semantic-warning-subtle); color: var(--text-secondary); }
.payroll-feature > .headquarters-empty { margin-inline: 0; }
.headquarters-empty strong { color: var(--text-primary); }
.headquarters-empty span, .headquarters-empty small { font-size: var(--type-small-body); }
.headquarters-empty.healthy { border-left-color: var(--semantic-success); background: var(--semantic-success-subtle); }

.attention-section { max-width: var(--portal-content-max); margin-inline: auto; }
.attention-list { display: grid; gap: 10px; }
.attention-list a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--semantic-warning) 25%, var(--border-subtle)); border-radius: var(--radius-control); background: var(--semantic-warning-subtle); color: var(--text-primary); text-decoration: none; }
.attention-list a:hover { border-color: var(--semantic-warning); }
.attention-list strong, .attention-list small { display: block; }
.attention-list small { margin-top: 4px; color: var(--text-secondary); }
.attention-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--semantic-warning); color: var(--surface-primary); font-weight: 800; }
.attention-clear { grid-template-columns: 38px minmax(0, 1fr); align-items: center; margin: 0; }
.attention-clear strong, .attention-clear small { display: block; }
.attention-clear small { margin-top: 4px; color: var(--text-secondary); }
.healthy-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--semantic-success); color: var(--surface-primary); font-weight: 800; }

.branch-context { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr); gap: clamp(28px, 6vw, 90px); align-items: end; padding: clamp(28px, 4vw, 52px) 0; border-block: 1px solid var(--border-subtle); }
.branch-context .portal-eyebrow { margin-bottom: 8px; color: var(--brand-primary); }
.branch-context h2 { margin: 0; color: var(--brand-navy); font-size: clamp(1.55rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -.035em; }
.branch-context > p { margin: 0; color: var(--text-secondary); line-height: 1.75; }

.operations-story-grid { display: grid; grid-template-columns: 1.25fr .875fr .875fr; gap: var(--content-gap); }
.operations-story-grid article { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-primary); }
.story-media { aspect-ratio: 3 / 2; }
.story-media.operations-media-fallback { min-height: 0; }
.operations-story-grid article:first-child .story-media { aspect-ratio: 16 / 9; }
.operations-story-grid article > div:last-child { padding: 18px; }
.operations-story-grid h3 { margin: 0; font-size: var(--type-card-title); }
.operations-story-grid p { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--type-small-body); line-height: 1.6; }
.headquarters-closing { display: flex; align-items: center; gap: 16px; margin-top: var(--section-gap); padding: 24px 0 4px; border-top: 1px solid var(--border-subtle); }
.headquarters-closing img { width: 46px; height: auto; }
.headquarters-closing strong, .headquarters-closing small { display: block; }
.headquarters-closing small { margin-top: 4px; color: var(--text-muted); line-height: 1.45; }

.digital-headquarters :is(a, button):focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }

@media (max-width: 1024px) {
    .headquarters-hero { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
    .headquarters-hero .portal-title { font-size: clamp(2.4rem, 5vw, 4rem); }
    .personnel-feature { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); }
    .operations-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .operations-story-grid article:first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .headquarters-hero { grid-template-columns: 1fr; min-height: 0; }
    .headquarters-hero .portal-hero-content { grid-area: 2 / 1; padding: 34px 28px; }
    .headquarters-hero .portal-hero-media { grid-area: 1 / 1; min-height: 310px; }
    .headquarters-hero .portal-hero-media::after { background: linear-gradient(0deg, color-mix(in srgb, var(--brand-navy) 24%, transparent), transparent 48%); }
    .headquarters-hero-fallback { min-height: 310px; }
    .headquarters-shortcuts { grid-template-columns: 1fr; }
    .today-grid { grid-template-columns: 1fr; }
    .today-primary { min-height: 240px; }
    .personnel-feature { grid-template-columns: 1fr; }
    .feature-media { min-height: 330px; }
    .attendance-feature, .payroll-feature { grid-column: 1 / -1; }
    .branch-context { grid-template-columns: 1fr; gap: 18px; }
    .headquarters-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .headquarters-section-heading > p { max-width: none; text-align: left; }
}

@media (max-width: 430px) {
    .headquarters-hero .portal-hero-content { padding: 28px 20px; }
    .headquarters-hero .portal-title { font-size: clamp(2.15rem, 12vw, 3.15rem); }
    .headquarters-hero .portal-hero-media, .headquarters-hero-fallback { min-height: 260px; }
    .headquarters-hero-fallback img { width: 104px; }
    .headquarters-hero-fallback::before { inset: 8% 10%; }
    .headquarters-hero-fallback::after { inset: 15% 19%; }
    .headquarters-shortcuts .portal-shortcut-tile { min-height: 92px; }
    .today-primary { min-height: 220px; padding: 28px 22px; }
    .today-row { grid-template-columns: 36px minmax(0, 1fr); gap: 13px; padding: 22px 18px; }
    .today-row-icon { width: 36px; height: 36px; }
    .feature-media { min-height: 245px; }
    .feature-copy { padding: 28px 20px; }
    .personnel-stat-list { grid-template-columns: 1fr; }
    .personnel-stat-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 8px; }
    .personnel-stat-list dd { margin: 0; }
    .card-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .activity-list { padding-inline: 18px; }
    .activity-list li { grid-template-columns: 1fr auto; gap: 10px; }
    .activity-list time { grid-column: 1 / -1; }
    .operations-story-grid { grid-template-columns: 1fr; }
    .operations-story-grid article:first-child { grid-column: auto; }
    .headquarters-closing { align-items: flex-start; }
}

@media (max-width: 390px) {
    .headquarters-hero .portal-hero-content { padding-inline: 18px; }
    .headquarters-hero .portal-hero-media, .headquarters-hero-fallback { min-height: 235px; }
    .today-primary > strong { font-size: 3.4rem; }
}

@media (max-width: 360px) {
    .headquarters-hero .portal-hero-content { padding: 24px 16px; }
    .headquarters-hero .portal-title { font-size: 2.2rem; }
    .headquarters-hero .portal-hero-media, .headquarters-hero-fallback { min-height: 215px; }
    .portal-shortcut-copy small { font-size: .72rem; }
    .feature-copy { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .headquarters-shortcuts .portal-shortcut-tile > span:last-child { transition: none; }
    .headquarters-shortcuts .portal-shortcut-tile:hover > span:last-child { transform: none; }
}

/* Payroll Period management consumes the shared theme and fixed semantic tokens. */
.payroll-population-overview,.payroll-run-summary,.payroll-run-population{margin-top:20px}.population-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:1px;margin:0;background:var(--neutral-200);border-top:1px solid var(--neutral-200)}.population-metrics div{padding:16px 20px;background:var(--surface)}.population-metrics dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.045em;color:var(--neutral-500)}.population-metrics dd{margin:5px 0 0;font-size:22px;font-weight:650;color:var(--neutral-900)}.population-confirmation{max-width:760px;padding:24px}.population-confirmation>p{color:var(--neutral-700);line-height:1.6}.status-attention{background:var(--warning-soft);color:var(--warning)}.status-attention i{background:var(--warning)}.payroll-run-table{min-width:1380px}.inline-row-action{position:relative}.inline-row-action summary{cursor:pointer;color:var(--danger);font-weight:600}.inline-row-action form{position:absolute;z-index:4;right:0;width:290px;padding:14px;background:var(--surface);border:1px solid var(--neutral-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.inline-row-action label{display:grid;gap:6px;font-size:11px;color:var(--neutral-600)}.inline-row-action textarea{min-height:76px;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:8px;margin-bottom:10px}
.payroll-person-row{cursor:pointer}.payroll-person-row:focus{outline:3px solid color-mix(in srgb,var(--theme-accent) 30%,transparent);outline-offset:-3px}.payroll-person-link{appearance:none;border:0;padding:0;background:transparent;color:var(--theme-primary);font:inherit;font-weight:650;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}.payroll-person-link:hover{color:var(--theme-accent)}.money-cell{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.payroll-detail-dialog{width:min(1040px,calc(100vw - 40px));max-width:1040px;height:min(85vh,900px);max-height:85vh;padding:0;border:1px solid var(--neutral-200);border-radius:var(--radius-lg);background:var(--surface);color:var(--neutral-900);box-shadow:var(--elevation-dialog);overflow:hidden}.payroll-detail-dialog::backdrop{background:color-mix(in srgb,var(--neutral-950) 55%,transparent)}.payroll-detail-fragment,.payroll-detail-fragment>form{height:100%;min-height:0}.payroll-detail-fragment{display:flex;flex-direction:column}.payroll-detail-fragment>form{display:flex;flex:1;flex-direction:column;overflow:hidden}.payroll-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px;border-bottom:1px solid var(--neutral-200);background:linear-gradient(135deg,var(--theme-primary),var(--theme-accent));color:var(--theme-on-primary);position:sticky;top:0;z-index:3}.payroll-detail-header h2{margin:3px 0 6px;font-size:24px}.payroll-detail-header p{margin:0;color:color-mix(in srgb,var(--theme-on-primary) 82%,transparent)}.payroll-detail-header .eyebrow,.payroll-detail-header .identifier{color:inherit}.payroll-detail-header-actions{display:flex;align-items:center;gap:12px}.payroll-detail-header .icon-close{color:inherit}.payroll-detail-alert,.payroll-read-only-banner{margin:16px 24px 0}.payroll-read-only-banner{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--neutral-200);border-radius:var(--radius-sm);background:var(--neutral-50);color:var(--neutral-700)}.payroll-detail-body{overflow-y:auto;padding:20px 24px;display:grid;gap:16px;overscroll-behavior:contain}.payroll-detail-section{border:1px solid var(--neutral-200);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}.payroll-detail-section>.section-heading{padding:15px 18px;border-bottom:1px solid var(--neutral-200)}.payroll-detail-section>.detail-list{padding:16px 18px}.source-chip{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--theme-soft);color:var(--theme-primary);font-size:10.5px;font-weight:650}.component-list{display:grid}.component-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:13px 18px;border-bottom:1px solid var(--neutral-100)}.component-row:last-child{border-bottom:0}.component-row small{display:block;margin-top:4px;color:var(--neutral-500)}.component-amount{min-width:150px;text-align:right}.component-amount input{width:140px;text-align:right;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:8px}.adjustment-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}.adjustment-fields label{display:grid;gap:6px;font-size:11.5px;color:var(--neutral-600)}.adjustment-fields input,.adjustment-fields select,.adjustment-fields textarea{width:100%;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:9px;background:var(--surface);color:var(--neutral-900)}.adjustment-fields textarea{min-height:76px}.adjustment-fields .span-2{grid-column:1/-1}.payroll-totals dl{margin:0;padding:10px 18px 16px}.payroll-totals dl div{display:flex;justify-content:space-between;gap:20px;padding:8px 0}.payroll-totals dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}.payroll-totals .net-total{margin-top:5px;padding-top:14px;border-top:2px solid var(--theme-primary);font-size:18px;color:var(--theme-primary)}.readiness-list,.audit-adjustment-list{list-style:none;margin:0;padding:14px 18px}.readiness-list li{display:flex;gap:9px;padding:7px 0;color:var(--warning)}.readiness-list li span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--warning-soft);font-weight:700}.audit-adjustment-list li{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid var(--neutral-100)}.payroll-detail-footer{display:flex;justify-content:flex-end;gap:10px;padding:15px 24px;border-top:1px solid var(--neutral-200);background:var(--surface);position:sticky;bottom:0;z-index:3}.payroll-detail-loading{min-height:260px;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--neutral-500)}.loading-spinner{width:28px;height:28px;border:3px solid var(--neutral-200);border-top-color:var(--theme-primary);border-radius:50%;animation:payroll-spin 700ms linear infinite}@keyframes payroll-spin{to{transform:rotate(360deg)}}

/* Personnel biometric attendance foundation */
.biometric-section .section-heading > p:last-child { margin: 7px 0 0; color: var(--text-secondary); font-size: 13px; }
.biometric-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.biometric-status-card { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 20px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--brand-primary-subtle) 34%, var(--surface))); }
.biometric-status-card h3 { margin: 3px 0 0; color: var(--text-primary); font-size: 17px; }
.biometric-status-card dl { margin: 0; }
.biometric-status-card dt { margin-bottom: 6px; color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.biometric-status-card dd { margin: 0; }
.biometric-status-card .button { width: fit-content; }
.biometric-state { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.biometric-state::before { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); content: ""; }
.biometric-state-enrolled { color: var(--semantic-success); }
.biometric-state-enrolled::before { background: var(--semantic-success); }
.biometric-state-revoked { color: var(--semantic-danger); }
.biometric-state-revoked::before { background: var(--semantic-danger); }
.biometric-enrollment-detail { display: block; margin-top: 7px; color: var(--text-muted); font-size: 11.5px; }
.biometric-identity p { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.biometric-identity p > span { margin: 0; }
.biometric-readiness-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--brand-primary-border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.biometric-readiness-panel .readiness-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.biometric-readiness-panel h2 { margin: 4px 0 7px; color: var(--text-primary); font-size: 20px; }
.biometric-readiness-panel > div > p:last-child { max-width: 760px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.terminal-readiness { min-height: 190px; }

@media (max-width: 760px) {
    .biometric-status-grid { grid-template-columns: 1fr; }
    .biometric-readiness-panel { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .biometric-readiness-panel .button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 430px) {
    .biometric-status-card { padding: 17px; }
    .biometric-status-card .button { width: 100%; }
    .biometric-readiness-panel { grid-template-columns: 1fr; padding: 19px 17px; }
}

/* Biometric Attendance Phase 4 — WebAuthn device credentials */
.device-auth-shell { min-width: 0; display: grid; gap: 18px; }
.device-privacy-note { min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 17px 19px; border: 1px solid var(--brand-primary-border); border-radius: var(--radius-md); background: var(--brand-primary-subtle); color: var(--text-secondary); }
.device-privacy-note > span { flex: 0 0 auto; font-size: 21px; }
.device-privacy-note strong { display: block; margin-bottom: 4px; color: var(--text-primary); }
.device-privacy-note p { margin: 0; line-height: 1.55; }
.device-auth-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; }
.device-auth-card { min-width: 0; padding: 22px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.device-auth-card > p { color: var(--text-secondary); line-height: 1.55; }
.device-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.device-card-heading h2 { margin: 3px 0 0; color: var(--text-primary); font-size: 20px; }
.device-support-state { flex: 0 0 auto; max-width: 190px; padding: 6px 9px; border-radius: 999px; background: var(--neutral-100); color: var(--text-muted); font-size: 10.5px; font-weight: 700; text-align: center; }
.device-support-state.is-supported { background: var(--semantic-success-subtle); color: var(--semantic-success); }
.device-support-state.is-unavailable { background: var(--semantic-danger-subtle); color: var(--semantic-danger); }
.device-label-field { display: grid; gap: 7px; margin: 19px 0 13px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.device-label-field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; }
.device-primary-action { min-height: 44px; }
.device-inline-result { min-height: 22px; margin: 13px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.device-inline-result.is-success { color: var(--semantic-success); font-weight: 700; }
.device-inline-result.is-error { color: var(--semantic-danger); font-weight: 650; }
.credential-list { min-width: 0; display: grid; gap: 12px; }
.credential-item { min-width: 0; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--background-subtle); }
.credential-item.is-revoked { opacity: .72; }
.credential-summary { min-width: 0; display: flex; align-items: center; gap: 11px; }
.credential-summary > div { min-width: 0; display: grid; gap: 3px; }
.credential-summary strong { overflow-wrap: anywhere; color: var(--text-primary); }
.credential-icon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary-subtle); }
.credential-status { color: var(--semantic-success); font-size: 11px; font-weight: 700; }
.is-revoked .credential-status { color: var(--semantic-danger); }
.credential-item dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.credential-item dl div { min-width: 0; }
.credential-item dt { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.credential-item dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 12px; }
.credential-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.credential-actions .button { min-height: 44px; }
.credential-empty { display: grid; justify-items: center; gap: 5px; padding: 27px 16px; border: 1px dashed var(--border-default); border-radius: var(--radius-sm); color: var(--text-muted); text-align: center; }
.credential-empty[hidden] { display: none; }
.device-revoke-dialog { width: min(460px,calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); box-shadow: var(--elevation-dialog); }
.device-revoke-dialog::backdrop { background: color-mix(in srgb,var(--neutral-950) 55%,transparent); }
.device-revoke-dialog > div { padding: 24px; }
.device-revoke-dialog h2 { margin: 10px 0 8px; }
.device-revoke-dialog p { color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 768px) {
    .device-auth-grid { grid-template-columns: 1fr; }
    .device-auth-card { padding: 19px; }
}
@media (max-width: 430px) {
    .device-privacy-note { padding: 15px; }
    .device-card-heading { display: grid; }
    .device-support-state { max-width: 100%; width: fit-content; }
    .device-auth-card { padding: 17px 15px; }
    .device-primary-action,.credential-actions .button { width: 100%; }
    .credential-item dl { grid-template-columns: 1fr; }
    .device-revoke-dialog > div { padding: 20px 17px; }
    .device-revoke-dialog .dialog-actions { display: grid; }
    .device-revoke-dialog .button { width: 100%; min-height: 44px; }
}
@media(max-width:768px){.payroll-detail-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0}.payroll-detail-header{padding:18px}.payroll-detail-header h2{font-size:20px}.payroll-detail-body{padding:14px}.payroll-detail-alert,.payroll-read-only-banner{margin:12px 14px 0}.payroll-read-only-banner{display:grid}.adjustment-fields{grid-template-columns:1fr}.adjustment-fields .span-2{grid-column:auto}.component-row{gap:10px}.component-amount{min-width:120px}.component-amount input{width:116px}.payroll-detail-footer{padding:12px 14px}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}}
.payroll-period-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(135px, .75fr)) auto auto;
    align-items: end;
}
.archive-period-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(150px, .8fr)) auto auto;
    align-items: end;
}
.payroll-period-filters > *, .archive-period-filters > * { min-width: 0; }
.payroll-period-filters input, .payroll-period-filters select,
.archive-period-filters input, .archive-period-filters select { width: 100%; }
.payroll-period-table { min-width: 1080px; }
.archived-period-table { min-width: 1260px; }
.cell-secondary { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; font-weight: 400; }
.payroll-row-actions { align-items: center; }
.payroll-row-actions .action-menu > summary { color: var(--brand-primary); }
.payroll-row-actions .action-menu > div { top: 26px; width: 190px; display: grid; gap: 3px; padding: 6px; }
.payroll-row-actions .action-menu a,
.payroll-row-actions .menu-action-disabled {
    display: block;
    min-height: 36px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12.5px;
    text-decoration: none;
}
.payroll-row-actions .action-menu a:hover { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.payroll-row-actions .action-menu a.text-danger { color: var(--semantic-danger); }
.payroll-row-actions .action-menu a.text-danger:hover { background: var(--semantic-danger-subtle); color: var(--semantic-danger-hover); }
.payroll-row-actions .menu-action-disabled { color: var(--text-disabled); cursor: not-allowed; }
.payroll-period-fields > label { grid-column: span 6; }
.payroll-readonly-section { margin-bottom: 14px; }
.payroll-readonly-section small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; }
.payroll-period-detail .detail-section { min-width: 0; }
.dependency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.dependency-grid > div { min-width: 0; padding: 12px; background: var(--surface-toolbar); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.dependency-grid dt { color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dependency-grid dd { margin: 5px 0 0; color: var(--text-primary); font: 700 17px/1.2 var(--font-application); }
.semantic-note { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid; font-size: 12px; line-height: 1.5; }
.semantic-note-success { background: var(--semantic-success-subtle); border-color: var(--semantic-success); color: var(--semantic-success); }
.semantic-note-danger { background: var(--semantic-danger-subtle); border-color: var(--semantic-danger); color: var(--semantic-danger); }
.payroll-archive-panel { align-items: flex-start; border-color: var(--semantic-danger); background: var(--semantic-danger-subtle); }
.payroll-archive-panel h2 { color: var(--semantic-danger); }
.archive-dependencies { margin-top: 14px; padding-bottom: 16px; }
.archive-dependencies .dependency-grid { padding: 0 16px; }
.archive-dependencies .semantic-note { margin-inline: 16px; }
.archive-confirm-form { display: grid; gap: 16px; margin-top: 14px; padding: 20px; background: var(--surface-panel); border: 1px solid var(--semantic-danger); border-radius: var(--radius-md); box-shadow: var(--elevation-surface); }
.archive-confirm-form .form-actions { position: static; padding: 4px 0 0; background: transparent; }
.reason-cell { display: -webkit-box; max-width: 280px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.monospace-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.hash-value { overflow-wrap: anywhere; font-size: 11px !important; }

@media (max-width: 1180px) {
    .payroll-period-filters { grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(140px, 1fr)) auto; }
    .payroll-period-filters label:nth-of-type(4) { grid-column: 1; }
    .archive-period-filters { grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(140px, 1fr)) auto auto; }
}

@media (max-width: 768px) {
    .payroll-period-filters, .archive-period-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payroll-period-filters .search-field, .archive-period-filters .search-field { grid-column: 1 / -1; }
    .payroll-period-filters label:nth-of-type(4) { grid-column: auto; }
    .payroll-period-filters .button, .archive-period-filters .button { width: 100%; }
    .dependency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payroll-period-table { min-width: 0; }
    .payroll-period-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    .payroll-period-table, .payroll-period-table tbody { display: grid; }
    .payroll-period-table tbody tr[data-payroll-period-row] { display: grid; padding: 13px 14px; border-bottom: 1px solid var(--border-subtle); }
    .payroll-period-table tbody tr[data-payroll-period-row] > th,
    .payroll-period-table tbody tr[data-payroll-period-row] > td { display: grid; height: auto; min-height: 0; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 9px; padding: 4px 0; border: 0; }
    [data-payroll-period-row] > th::before,
    [data-payroll-period-row] > td::before { content: attr(data-label); color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
    .payroll-period-table tbody tr:not([data-payroll-period-row]) { display: block; }
    .payroll-period-table tbody tr:not([data-payroll-period-row]) td { display: block; width: 100%; }
    .reason-cell { max-width: none; }
}

@media (max-width: 430px) {
    .payroll-period-filters, .archive-period-filters { grid-template-columns: 1fr; }
    .payroll-period-filters > *, .archive-period-filters > *,
    .payroll-period-filters .search-field, .archive-period-filters .search-field { grid-column: 1; }
    .dependency-grid { grid-template-columns: 1fr; }
    .payroll-period-fields > label { grid-column: 1 / -1; }
    .archive-confirm-form { padding: 16px 14px; }
    .archive-confirm-form .form-actions { display: grid; }
}

@media (max-width: 620px) {
    :is(.page-header, .workspace-heading, .record-header, .record-heading)::after {
        background-image:
            radial-gradient(ellipse 62% 78% at 94% 2%, var(--hero-flare-primary), transparent 68%),
            radial-gradient(ellipse 50% 60% at 4% 108%, var(--hero-flare-secondary), transparent 72%);
    }
}

/* Payroll Detail Phase 2 field-rich encoding workbench */
.payroll-detail-dialog { width: min(1180px, calc(100vw - 40px)); max-width: 1180px; }
.payroll-detail-content { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.payroll-detail-fragment { flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden; }
.payroll-detail-fragment > form { height: auto; min-height: 0; flex: 1 1 auto; }
.payroll-detail-body { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; }
.payroll-save-state { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--theme-on-primary) 14%, transparent); color: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; }
.payroll-save-state.is-error { background: var(--danger-soft); color: var(--danger); }
.payroll-sticky-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-200); position: relative; z-index: 2; }
.payroll-sticky-summary > span { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 10px 16px; background: var(--surface); font-variant-numeric: tabular-nums; }
.payroll-sticky-summary small { color: var(--neutral-500); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.payroll-sticky-summary strong { color: var(--neutral-800); }
.payroll-sticky-summary .net strong { color: var(--theme-primary); font-size: 18px; }
.payroll-workbench { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.payroll-panel { position: relative; min-width: 0; height: auto; min-height: 0; overflow: visible; align-self: start; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--elevation-surface); }
.payroll-panel-wide { grid-column: 1 / -1; }
.payroll-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 62px; padding: 13px 16px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-50); }
.payroll-panel > .payroll-panel-heading { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.payroll-panel-heading h3 { margin: 2px 0 0; font-size: 15px; }
.payroll-panel-heading .eyebrow { margin: 0; }
.payroll-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.payroll-field-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.payroll-field-grid > div { min-width: 0; padding: 12px 15px; border-right: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); }
.payroll-field-grid dt { color: var(--neutral-500); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.payroll-field-grid dd { margin: 5px 0 0; color: var(--neutral-900); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-field-grid small { display: block; margin-top: 3px; color: var(--neutral-500); }
.payroll-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.payroll-input-field { display: grid; min-width: 0; gap: 6px; padding: 12px 15px; border-right: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100); }
.payroll-input-field > label, .payroll-field-label { color: var(--neutral-600); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.payroll-input-field > input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--neutral-400); border-radius: var(--radius-sm); background: var(--surface); color: var(--neutral-900); cursor: text; text-align: right; font: 650 14px/1.25 var(--font-application); font-variant-numeric: tabular-nums; }
.payroll-input-field > input:hover { border-color: var(--theme-primary); }
.payroll-input-field > input:focus { border-color: var(--theme-accent); outline: 3px solid color-mix(in srgb, var(--theme-accent) 20%, transparent); outline-offset: 1px; }
.payroll-input-field > small { min-height: 16px; color: var(--neutral-500); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.payroll-input-field.is-overridden { background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface)); }
.payroll-input-field.is-calculated { background: var(--neutral-50); }
.payroll-readonly-value { min-width: 0; padding: 3px 0; color: var(--neutral-800); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-readonly-value small { display: block; margin-top: 3px; color: var(--neutral-500); font-weight: 400; }
.override-chip { display: inline-flex; margin-left: 5px; padding: 3px 7px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 10px; font-weight: 700; }
.payroll-panel .semantic-note { margin: 12px 15px; }
.payroll-component-list { display: grid; }
.payroll-component-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 67px; padding: 11px 15px; border-bottom: 1px solid var(--neutral-100); }
.payroll-component-item:last-child { border-bottom: 0; }
.payroll-component-item > div:first-child > small { display: block; margin: 3px 0 5px; color: var(--neutral-500); }
.payroll-component-value { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 128px; text-align: right; font-variant-numeric: tabular-nums; }
.payroll-component-value small { display: block; color: var(--neutral-500); }
.payroll-component-value input, .payroll-add-component input { width: 124px; padding: 8px 9px; border: 1px solid var(--neutral-400); border-radius: var(--radius-sm); background: var(--surface); color: var(--neutral-900); cursor: text; text-align: right; font: inherit; font-variant-numeric: tabular-nums; }
.payroll-component-value input:focus, .payroll-add-component input:focus, .payroll-add-component select:focus, .payroll-adjustment-fields :is(input,textarea):focus { border-color: var(--theme-accent); outline: 3px solid color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.icon-button-danger { width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--neutral-200)); border-radius: var(--radius-sm); background: var(--surface); color: var(--danger); cursor: pointer; }
.payroll-add-component { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: end; gap: 9px; padding: 12px 15px; border-top: 1px solid var(--neutral-200); background: var(--neutral-50); }
.payroll-add-component label, .payroll-adjustment-fields label { display: grid; gap: 5px; color: var(--neutral-600); font-size: 10.5px; font-weight: 650; }
.payroll-add-component select { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--neutral-900); }
.payroll-adjustment-fields { display: grid; gap: 12px; padding: 15px; }
.payroll-adjustment-fields input, .payroll-adjustment-fields textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); background: var(--surface); color: var(--neutral-900); font: inherit; }
.payroll-adjustment-fields textarea { min-height: 70px; resize: vertical; }
.payroll-adjustment-fields small { color: var(--neutral-500); font-weight: 400; }
.payroll-total-list { margin: 0; padding: 8px 15px 14px; }
.payroll-total-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 2px; }
.payroll-total-list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.payroll-total-list .net { margin-top: 4px; padding-top: 13px; border-top: 2px solid var(--theme-primary); color: var(--theme-primary); font-size: 18px; }
.payroll-footer-note { margin-right: auto; color: var(--neutral-500); font-size: 11px; }

@media (max-width: 840px) {
    .payroll-workbench { grid-template-columns: 1fr; }
    .payroll-panel-wide { grid-column: auto; }
    .payroll-field-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .payroll-detail-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; }
}

@media (max-width: 620px) {
    .payroll-detail-header { display: grid; gap: 12px; }
    .payroll-detail-header-actions { flex-wrap: wrap; }
    .payroll-sticky-summary > span { display: grid; gap: 2px; padding: 8px; text-align: center; }
    .payroll-sticky-summary .net strong { font-size: 15px; }
    .payroll-field-grid, .payroll-field-grid-5 { grid-template-columns: 1fr; }
    .payroll-input-grid { grid-template-columns: 1fr; }
    .payroll-add-component { grid-template-columns: 1fr; }
    .payroll-add-component input { width: 100%; text-align: left; }
    .payroll-component-item { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.page-header, .workspace-heading, .record-header, .record-heading),
    :is(.page-header, .workspace-heading, .record-header, .record-heading)::after { animation: none !important; transform: none !important; }
    .button:hover:not(:disabled), .button:active:not(:disabled),
    .reference-card:hover, .admin-catalog-row:hover, .theme-option:hover { transform: none !important; }
}

/* Complete Payroll Run personnel encoding form */
body.payroll-dialog-open { overflow: hidden; }
.document-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.payslip-document,.payroll-sheet-document { background: var(--surface); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.payslip-document { width: min(100%,900px); max-width: 900px; margin: 0 auto 32px; padding: 32px; overflow: hidden; }
.payroll-document-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 3px solid var(--theme-primary); text-align: center; }
.payroll-document-header h1,.payroll-document-header h2,.payroll-document-header p { margin: 3px 0; }
.payroll-document-header h1 { font-size: 18px; }.payroll-document-header h2 { margin-top: 12px; color: var(--theme-primary); letter-spacing: .12em; }.payroll-document-header p { color: var(--neutral-600); }
.document-meta,.attendance-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 18px 0; background: var(--neutral-200); border: 1px solid var(--neutral-200); }
.document-meta>div,.attendance-grid>div { padding: 10px 12px; background: var(--surface); }.document-meta dt,.attendance-grid dt { color: var(--neutral-500); font-size: 10px; font-weight: 700; text-transform: uppercase; }.document-meta dd,.attendance-grid dd { margin: 4px 0 0; font-weight: 650; }
.payslip-section { min-width: 0; margin-top: 20px; }.payslip-section h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 2px solid var(--theme-primary); color: var(--theme-primary); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }.payslip-section table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }.payslip-section th,.payslip-section td { min-width: 0; padding: 9px; border-bottom: 1px solid var(--neutral-200); text-align: left; }.payslip-section th:first-child,.payslip-section td:first-child { white-space: normal; overflow-wrap: anywhere; word-break: normal; }.payslip-amount-column { width: 132px; }.payslip-section .money-cell { text-align: right; white-space: nowrap; }.payslip-columns { width: 100%; display: grid; grid-template-columns: minmax(0,58fr) minmax(0,42fr); gap: 24px; }.payslip-columns > .payslip-section { min-width: 0; }.total-row { border-top: 2px solid var(--theme-primary); }.payslip-net { display: flex; justify-content: flex-end; align-items: baseline; gap: 30px; margin-top: 24px; padding: 16px 20px; background: var(--theme-soft); color: var(--theme-primary); }.payslip-net span { font-weight: 800; letter-spacing: .08em; }.payslip-net strong { font-size: 26px; }.payslip-document footer,.payroll-sheet-document footer { margin-top: 20px; color: var(--neutral-500); font-size: 10px; }
.payroll-attendance-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--neutral-200); background: var(--neutral-50); }.payroll-attendance-status div { display: grid; gap: 2px; }.payroll-attendance-status span { color: var(--neutral-600); font-size: 10px; }.payroll-readonly-value.is-missing { color: var(--warning); font-weight: 800; }
.payroll-sheet-document { padding: 24px; }.sheet-header { grid-template-columns: auto minmax(360px,1fr) auto; text-align: left; }.sheet-header>div { text-align: center; }.sheet-header>dl { margin: 0; }.sheet-header dt { color: var(--neutral-500); font-size: 9px; text-transform: uppercase; }.sheet-header dd { margin: 2px 0 9px; font-weight: 700; }.sheet-period-meta { display: flex; flex-wrap: wrap; gap: 16px 30px; padding: 14px 0; }.payroll-sheet-scroll { width: 100%; overflow: auto; border: 1px solid var(--neutral-200); }.payroll-sheet-table { min-width: 1800px; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }.payroll-sheet-table th,.payroll-sheet-table td { min-width: 110px; padding: 8px 9px; border-right: 1px solid var(--neutral-200); border-bottom: 1px solid var(--neutral-200); background: var(--surface); white-space: nowrap; }.payroll-sheet-table thead th { position: sticky; top: 0; z-index: 3; background: var(--theme-primary); color: var(--theme-on-primary); text-align: center; }.payroll-sheet-table .sticky-col { position: sticky; z-index: 2; }.payroll-sheet-table .col-personnel { left: 0; min-width: 130px; }.payroll-sheet-table .col-name { left: 130px; min-width: 210px; }.payroll-sheet-table thead .sticky-col { z-index: 4; }.payroll-sheet-table .group-heading th { background: var(--theme-soft); color: var(--theme-primary); text-align: left; font-size: 12px; }.payroll-sheet-table .subtotal-row th,.payroll-sheet-table .subtotal-row td { background: var(--neutral-100); font-weight: 800; }.payroll-sheet-table .grand-total-row th,.payroll-sheet-table .grand-total-row td { background: var(--theme-primary); color: var(--theme-on-primary); font-weight: 850; }.payroll-sheet-table .number-cell,.payroll-sheet-table .money-cell { text-align: right; font-variant-numeric: tabular-nums; }.payroll-sheet-table .net-cell { color: var(--success); font-weight: 850; }
@media(max-width:840px){.payslip-columns{grid-template-columns:1fr}}
@media(max-width:768px){.payslip-document,.payroll-sheet-document{padding:14px}.payroll-document-header{grid-template-columns:1fr}.document-meta,.attendance-grid{grid-template-columns:1fr}.sheet-header{grid-template-columns:1fr}.sheet-header>dl{display:flex;justify-content:space-between}.payroll-attendance-status{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.payslip-amount-column{width:116px}.payslip-section th,.payslip-section td{padding:8px 6px}.payslip-net{justify-content:space-between;gap:12px;padding:14px}.payslip-net strong{font-size:22px}}
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    body { background: Canvas !important; color: CanvasText !important; }
    .app-sidebar, .app-topbar, .breadcrumbs, .no-print, .document-actions { display: none !important; }
    .app-frame, .app-main, .app-content {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: Canvas !important;
    }
    .payslip-document, .payroll-sheet-document {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        box-shadow: none;
    }
    .payslip-document .payroll-document-header, .payslip-document .payslip-section h3,
    .payslip-document .total-row { border-color: var(--brand-navy); }
    .payslip-document .payslip-section h3 { color: var(--brand-navy); }
    .payslip-document .payslip-net {
        background: color-mix(in srgb, var(--brand-navy) 7%, Canvas);
        color: var(--brand-navy);
    }
    .payslip-columns { grid-template-columns: minmax(0,58fr) minmax(0,42fr); }
    .payslip-section table { min-width: 0; table-layout: fixed; }
    .payslip-section, .payslip-net { break-inside: avoid; }
    .payroll-sheet-document { page: payroll-sheet; }
    .payroll-sheet-scroll { overflow: visible; border: 0; }
    .payroll-sheet-table { min-width: 0; font-size: 6pt; }
    .payroll-sheet-table th, .payroll-sheet-table td { min-width: 0; padding: 3px; white-space: normal; }
    .payroll-sheet-table .sticky-col, .payroll-sheet-table thead th { position: static; }
    .subtotal-row, .grand-total-row { break-inside: avoid; }
}
@page payroll-sheet { size: A4 landscape; margin: 6mm; }
.payroll-detail-dialog { width: min(1260px, calc(100vw - 28px)); max-width: 1260px; height: min(92vh, 960px); max-height: 92vh; }
.payroll-detail-header { padding: 15px 20px; }
.payroll-detail-header h2 { margin: 2px 0 3px; font-size: 20px; line-height: 1.15; }
.payroll-detail-header p { font-size: 11.5px; }
.payroll-detail-header .payroll-period-line { margin-top: 3px; opacity: .9; }
.payroll-detail-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.payroll-warning-count { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 22%, transparent); color: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; }
.payroll-warning-count.is-clear { background: color-mix(in srgb, var(--success) 24%, transparent); }
.payroll-sticky-summary > span { padding-block: 8px; }
.payroll-encoding-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 22px; padding: 14px 20px 20px; }
.payroll-warning-details { grid-column: 1 / -1; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--neutral-200)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface)); color: var(--neutral-700); font-size: 11.5px; }
.payroll-warning-details summary { padding: 9px 12px; color: var(--warning); font-weight: 700; cursor: pointer; }
.payroll-warning-details ul { margin: 0; padding: 0 28px 10px; }
.payroll-warning-details li { margin: 3px 0; }
.payroll-encoding-section { min-width: 0; padding-top: 9px; border-top: 2px solid var(--theme-primary); }
.payroll-encoding-section > h3, .payroll-encoding-summary > h3 { margin: 0 0 7px; color: var(--theme-primary); font-size: 12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.payroll-encoding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--neutral-200); border-left: 1px solid var(--neutral-200); }
.payroll-loan-type { min-width: 0; }
.payroll-loan-type-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px; background: var(--surface-muted, #eef2f7); border-right: 1px solid var(--neutral-200); font-size: 12px; }
.payroll-loan-type-heading a { font-size: 11px; text-decoration: underline; }
.payroll-loan-type input:disabled { opacity: 1; color: var(--text-secondary, #55657b); background: var(--surface-muted, #f4f6f9); cursor: not-allowed; }
.payroll-encoding-field { display: grid; min-width: 0; gap: 4px; padding: 7px 9px; border-right: 1px solid var(--neutral-200); border-bottom: 1px solid var(--neutral-200); background: var(--surface); }
.payroll-encoding-field.is-overridden { background: color-mix(in srgb, var(--warning-soft) 35%, var(--surface)); }
.payroll-encoding-field > label, .payroll-reference-grid label > span { color: var(--neutral-600); font-size: 9.5px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.payroll-encoding-field > input { width: 100%; min-width: 0; height: 31px; padding: 5px 8px; border: 1px solid var(--neutral-350, var(--neutral-300)); border-radius: 4px; background: var(--surface); color: var(--neutral-900); text-align: right; font: 650 13px/1 var(--font-application); font-variant-numeric: tabular-nums; }
.payroll-encoding-field > input:hover { border-color: var(--theme-primary); }
.payroll-encoding-field > input:focus, .payroll-reference-grid :is(input,textarea):focus { border-color: var(--theme-accent); outline: 2px solid color-mix(in srgb, var(--theme-accent) 20%, transparent); outline-offset: 1px; }
.payroll-encoding-field > small, .payroll-reference-grid small { min-height: 13px; color: var(--neutral-500); font-size: 8.75px; line-height: 1.25; overflow-wrap: anywhere; }
.payroll-encoding-support { grid-column: 1 / -1; }
.payroll-reference-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, .5fr); gap: 9px 12px; }
.payroll-reference-grid label { display: grid; min-width: 0; gap: 4px; }
.payroll-reference-grid :is(input,textarea) { width: 100%; padding: 7px 9px; border: 1px solid var(--neutral-300); border-radius: 4px; background: var(--surface); color: var(--neutral-900); font: inherit; }
.payroll-reference-grid textarea { min-height: 52px; resize: vertical; }
.payroll-notes-field { grid-column: 1 / -1; }
.payroll-encoding-summary { grid-column: 1 / -1; padding-top: 9px; border-top: 2px solid var(--theme-primary); }
.payroll-encoding-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--neutral-200); }
.payroll-encoding-summary dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-right: 1px solid var(--neutral-200); }
.payroll-encoding-summary dl > div:last-child { border-right: 0; }
.payroll-encoding-summary dt { color: var(--neutral-500); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.payroll-encoding-summary dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.payroll-encoding-summary .net { color: var(--theme-primary); }
.payroll-detail-footer { padding: 10px 20px; }

@media (max-width: 840px) {
    .payroll-encoding-form { grid-template-columns: 1fr; }
    .payroll-warning-details, .payroll-encoding-support, .payroll-encoding-summary { grid-column: auto; }
}

@media (max-width: 620px) {
    .payroll-detail-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; }
    .payroll-encoding-form { padding: 12px 14px 18px; }
    .payroll-encoding-grid, .payroll-reference-grid, .payroll-encoding-summary dl { grid-template-columns: 1fr; }
    .payroll-notes-field { grid-column: auto; }
    .payroll-encoding-summary dl > div { border-right: 0; border-bottom: 1px solid var(--neutral-200); }
    .payroll-encoding-summary dl > div:last-child { border-bottom: 0; }
    .payroll-footer-note { display: none; }
}

/* Biometric Attendance Phase 5 */
.terminal-method-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.terminal-method-actions label { grid-column: 1 / -1; }
.terminal-method-actions select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-panel); color: var(--text-primary); }
.terminal-method-actions .terminal-start { width: 100%; margin: 0; }
.live-attendance-header { align-items: center; }
.live-attendance { display: grid; gap: 14px; }
.live-attendance-filters { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, .7fr)) auto; align-items: end; gap: 12px; padding: 15px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-panel); }
.live-attendance-filters label { display: grid; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.live-attendance-filters :is(input,select) { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-panel); color: var(--text-primary); font: inherit; }
.live-filter-actions { display: flex; gap: 8px; }
.live-monitor-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 12px; }
.live-monitor-meta strong { color: var(--text-primary); }
.live-attendance-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-panel); }
.live-attendance-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.live-attendance-table :is(th,td) { padding: 12px 13px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.live-attendance-table thead th { background: var(--surface-toolbar); color: var(--text-muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.punch-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.punch-time-in { background: var(--semantic-success-subtle); color: var(--semantic-success); }
.punch-time-out { background: var(--brand-primary-subtle); color: var(--brand-primary); }

@media (max-width: 840px) {
    .live-attendance-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .live-attendance-filters label:first-child, .live-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .terminal-method-actions, .live-attendance-filters { grid-template-columns: 1fr; }
    .terminal-method-actions label, .live-attendance-filters label:first-child, .live-filter-actions { grid-column: auto; }
    .live-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .live-attendance-table { min-width: 0; }
    .live-attendance-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
    .live-attendance-table, .live-attendance-table tbody { display: grid; }
    .live-attendance-table tbody tr { display: grid; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
    .live-attendance-table tbody :is(th,td) { display: grid; min-height: 0; grid-template-columns: 112px minmax(0, 1fr); gap: 9px; padding: 4px 0; border: 0; }
    .live-attendance [data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .live-attendance-table tbody td[colspan] { display: block; }
    .live-attendance tbody td[colspan]::before { content: none; }
}

@media (max-width: 390px) {
    .live-filter-actions { grid-template-columns: 1fr; }
    .live-monitor-meta { display: grid; }
}

/* Digital Headquarters Phase 3 — operational destinations */
.module-destination,
.operational-module { display: flow-root; }

.module-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-feature);
    background: var(--surface-primary);
}
.module-hero-copy {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 5vw, 74px);
    background: linear-gradient(135deg, var(--surface-primary), var(--surface-selected));
}
.module-hero-copy .portal-eyebrow,
.workspace-intro .portal-eyebrow,
.payroll-editorial-hero .portal-eyebrow,
.archive-editorial-header .portal-eyebrow,
.module-workspace-header .portal-eyebrow,
.payroll-lifecycle .portal-eyebrow,
.current-payroll-band .portal-eyebrow,
.operations-overview .portal-eyebrow { color: var(--brand-primary); }
.module-hero-copy h1,
.payroll-editorial-hero h1,
.archive-editorial-header h1,
.module-workspace-header h1 {
    margin: 0;
    color: var(--brand-navy);
    font: 690 clamp(2.55rem, 4.4vw, 4.65rem)/.98 var(--font-display);
    letter-spacing: -.045em;
}
.module-hero-copy > p:last-of-type,
.payroll-hero-copy > p:last-child,
.archive-editorial-header > div > p:last-child,
.module-workspace-copy > p:last-child {
    max-width: 650px;
    margin: 24px 0 0;
    color: var(--text-secondary);
    font-size: clamp(.95rem, 1.25vw, 1.1rem);
    line-height: 1.65;
}
.module-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.module-hero-visual { position: relative; min-height: 390px; overflow: hidden; background: var(--brand-primary); }
.module-hero-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(7, 17, 48, .36)); content: ""; }
.module-hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.module-visual-fallback {
    display: grid;
    align-content: space-between;
    padding: clamp(28px, 4vw, 56px);
    background:
        radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--theme-accent) 60%, transparent), transparent 34%),
        linear-gradient(145deg, var(--brand-primary), var(--brand-primary-active));
    color: var(--brand-on-primary);
}
.module-visual-fallback::before { position: absolute; inset: 12% -12% auto auto; width: 220px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--brand-on-primary) 18%, transparent); border-radius: 50%; content: ""; }
.module-visual-fallback > * { position: relative; z-index: 1; }
.module-visual-index { font-size: .68rem; font-weight: 800; letter-spacing: .18em; opacity: .68; }
.module-visual-fallback > div:not(.attendance-signal) { align-self: end; display: grid; gap: 7px; font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 660; letter-spacing: -.025em; }
.module-visual-fallback > div:not(.attendance-signal) span { padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--brand-on-primary) 22%, transparent); }
.attendance-signal { width: min(210px, 70%); aspect-ratio: 1; align-self: center; justify-self: center; display: grid; place-items: center; }
.attendance-signal i { grid-area: 1 / 1; width: 42%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--brand-on-primary) 55%, transparent); border-radius: 50%; }
.attendance-signal i:nth-child(2) { width: 70%; opacity: .6; }
.attendance-signal i:nth-child(3) { width: 100%; opacity: .3; }
.module-visual-fallback > p { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 650; line-height: 1.18; }

.module-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.55fr repeat(3, 1fr);
    margin: 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-primary);
}
.module-summary > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--border-subtle); }
.module-summary > div:first-child { border-left: 0; }
.module-summary dt { order: 1; margin-top: 7px; color: var(--text-muted); font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.module-summary dd { order: 0; margin: 0; color: var(--text-primary); font-size: clamp(1.55rem, 2.6vw, 2.4rem); font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.module-summary small { order: 2; margin-top: 4px; color: var(--text-muted); font-size: .7rem; }
.module-summary-primary { background: var(--surface-editorial); }
.module-summary-primary dd { color: var(--brand-primary); font-size: clamp(2.6rem, 4vw, 4.15rem); line-height: .9; }
.module-summary dd.summary-time { font-size: clamp(1.15rem, 1.8vw, 1.55rem); letter-spacing: -.02em; }

.module-pathways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(26px, 3vw, 42px) 0 0;
    border-block: 1px solid var(--border-subtle);
}
.module-pathways a {
    min-width: 0;
    min-height: 102px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 13px;
    padding: 19px clamp(16px, 2vw, 26px);
    border-left: 1px solid var(--border-subtle);
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--motion-standard) ease, background-color var(--motion-standard) ease;
}
.module-pathways a:first-child { border-left: 0; }
.module-pathways a:hover { background: var(--surface-hover); color: var(--brand-primary); }
.module-pathways a > span { grid-row: 1 / 3; align-self: start; padding-top: 3px; color: var(--brand-primary); font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.module-pathways strong { font-size: .95rem; }
.module-pathways small { margin-top: 4px; color: var(--text-muted); font-size: .73rem; }
.module-pathways i { grid-row: 1 / 3; align-self: center; font-size: 1.05rem; font-style: normal; transition: transform var(--motion-standard) var(--motion-ease); }
.module-pathways a:hover i { transform: translateX(5px); }

.workspace-section { margin-top: clamp(48px, 6vw, 84px); scroll-margin-top: 90px; }
.workspace-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); align-items: end; gap: 36px; margin-bottom: 22px; padding-bottom: 21px; border-bottom: 1px solid var(--border-default); }
.workspace-intro.compact { margin-bottom: 0; }
.workspace-intro h2 { margin: 0; color: var(--brand-navy); font-size: clamp(1.75rem, 3vw, 2.65rem); letter-spacing: -.035em; }
.workspace-intro > p { max-width: 540px; justify-self: end; margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
[data-personnel-directory-report],
.payroll-period-directory { overflow: visible; border-radius: var(--radius-surface); box-shadow: none; }
[data-personnel-directory-report] .list-report-scroll,
.payroll-period-directory .list-report-scroll { overflow: auto; border-radius: 0 0 var(--radius-surface) var(--radius-surface); }
.list-report-toolbar h3 { margin: 0 0 2px; color: var(--text-primary); font-size: .95rem; }
[data-personnel-directory-report] tbody tr:hover,
.payroll-period-directory tbody tr:hover,
.live-attendance-table tbody tr:hover { background: var(--surface-hover); }

/* Attendance destination and workspaces */
.attendance-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-feature); overflow: hidden; }
.attendance-path { position: relative; min-height: 350px; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 4vw, 54px); background: var(--surface-primary); }
.attendance-path + .attendance-path { border-left: 1px solid var(--border-subtle); background: var(--surface-editorial); }
.attendance-path-terminal { background: linear-gradient(150deg, var(--surface-primary), var(--surface-selected)); }
.path-number { color: var(--text-muted); font-size: .65rem; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; }
.path-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 36px 0 20px; color: var(--brand-primary); }
.path-icon svg { width: 45px; height: 45px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.attendance-path h3 { margin: 0; color: var(--brand-navy); font-size: clamp(1.55rem, 2.5vw, 2.2rem); letter-spacing: -.035em; }
.attendance-path p { max-width: 560px; margin: 13px 0 26px; color: var(--text-secondary); line-height: 1.65; }
.attendance-path .button { margin-top: auto; }
.module-assurance { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 18px 0; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); }
.module-assurance > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--semantic-success-subtle); color: var(--semantic-success); font-weight: 800; }
.module-assurance p { max-width: 820px; margin: 2px 0 0; font-size: .78rem; line-height: 1.55; }
.module-assurance strong { color: var(--text-primary); }

.module-workspace-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 34px;
    margin-bottom: 22px;
    padding: 16px 0 28px;
    border-bottom: 1px solid var(--border-default);
}
.module-workspace-header h1 { font-size: clamp(2rem, 3.6vw, 3.6rem); }
.module-workspace-copy > p:last-child { max-width: 760px; margin-top: 17px; font-size: .9rem; }
.workspace-switcher { display: inline-flex; padding: 4px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-quiet); }
.workspace-switcher a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 13px; border-radius: 3px; color: var(--text-secondary); font-size: .75rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.workspace-switcher a:hover { color: var(--brand-primary); }
.workspace-switcher a.active { background: var(--surface-primary); color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.attendance-terminal { max-width: none; }
.attendance-terminal > .terminal-security-line { border-radius: var(--radius-control); }
.terminal-card { box-shadow: none; }
.terminal-grid { gap: 16px; }
.terminal-identity-card { border-top: 3px solid var(--brand-primary); }
.terminal-action-card { border-top: 3px solid var(--theme-accent); }

.operations-overview { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); align-items: stretch; margin: 0 0 clamp(42px, 5vw, 66px); border-block: 1px solid var(--border-default); }
.operations-overview-lead { display: flex; align-items: center; gap: 16px; padding: 24px 28px 24px 0; }
.operations-overview-lead h2 { margin: 0; color: var(--brand-navy); font-size: 1.35rem; }
.live-pulse { width: 13px; height: 13px; flex: 0 0 auto; border: 3px solid color-mix(in srgb, var(--semantic-success) 22%, transparent); border-radius: 50%; background: var(--semantic-success); box-shadow: 0 0 0 5px var(--semantic-success-subtle); }
.operations-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.operations-metrics > div { min-width: 0; padding: 23px 20px; border-left: 1px solid var(--border-subtle); }
.operations-metrics dt { color: var(--text-muted); font-size: .61rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.operations-metrics dd { margin: 9px 0 0; color: var(--text-primary); font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 720; font-variant-numeric: tabular-nums; }
.operations-metrics .metric-pair { display: flex; gap: 7px; }
.operations-metrics .metric-pair i { color: var(--text-muted); font-style: normal; font-weight: 400; }
.operations-metrics dd.metric-time { font-size: clamp(.95rem, 1.45vw, 1.25rem); white-space: nowrap; }
.live-attendance { gap: 0; }
.live-attendance-filters { border-radius: var(--radius-surface) var(--radius-surface) 0 0; border-bottom: 0; background: var(--surface-quiet); }
.live-attendance-table-wrap { border-radius: 0 0 var(--radius-surface) var(--radius-surface); box-shadow: none; }
.live-attendance-table tbody th { color: var(--text-primary); font-size: .82rem; }
.recorded-time { color: var(--brand-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-inline { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 28px; text-align: center; }
.empty-inline > span:not(.empty-state-mark) { max-width: 460px; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
.empty-inline .button { margin-top: 10px; }

/* Payroll destination */
.payroll-editorial-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 44px;
    padding: clamp(38px, 6vw, 82px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-feature);
    background:
        linear-gradient(115deg, var(--surface-primary) 0 64%, transparent 64%),
        linear-gradient(145deg, var(--surface-selected), var(--surface-editorial));
}
.payroll-editorial-hero h1 { font-size: clamp(2.55rem, 4.8vw, 5rem); }
.payroll-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.payroll-lifecycle { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 42px; margin: clamp(42px, 5vw, 68px) 0; }
.payroll-lifecycle header h2 { margin: 0; color: var(--brand-navy); font-size: clamp(1.65rem, 2.5vw, 2.35rem); letter-spacing: -.035em; }
.payroll-lifecycle header > p:last-child { margin: 13px 0 0; color: var(--text-secondary); line-height: 1.6; }
.payroll-lifecycle ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-block: 1px solid var(--border-default); list-style: none; }
.payroll-lifecycle li { position: relative; min-width: 0; padding: 24px 18px; border-left: 1px solid var(--border-subtle); }
.payroll-lifecycle li:first-child { border-left: 0; }
.payroll-lifecycle li > span { display: block; margin-bottom: 18px; color: var(--brand-primary); font-size: .62rem; font-weight: 800; }
.payroll-lifecycle li strong { display: block; color: var(--text-primary); font-size: .9rem; }
.payroll-lifecycle li small { display: block; margin-top: 7px; color: var(--text-muted); font-size: .66rem; line-height: 1.45; }
.lifecycle-exceptions { grid-column: 2; margin: -26px 0 0; color: var(--text-muted); font-size: .69rem; }
.current-payroll-band { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 36px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-feature); background: linear-gradient(125deg, var(--brand-primary), var(--brand-primary-active)); color: var(--brand-on-primary); }
.current-payroll-band .portal-eyebrow { color: color-mix(in srgb, var(--brand-on-primary) 68%, transparent); }
.current-payroll-heading h2 { margin: 0; color: inherit; font-size: clamp(1.7rem, 3vw, 2.65rem); letter-spacing: -.035em; }
.current-payroll-heading > p:last-child { margin: 9px 0 0; color: color-mix(in srgb, var(--brand-on-primary) 76%, transparent); font-size: .8rem; }
.current-payroll-band dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.current-payroll-band dl > div { padding: 5px 22px; border-left: 1px solid color-mix(in srgb, var(--brand-on-primary) 20%, transparent); }
.current-payroll-band dt { color: color-mix(in srgb, var(--brand-on-primary) 65%, transparent); font-size: .61rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.current-payroll-band dd { margin: 9px 0 0; color: inherit; font-size: 1.05rem; font-weight: 700; }
.current-payroll-band > .button-primary { background: var(--brand-on-primary); border-color: var(--brand-on-primary); color: var(--brand-primary); white-space: nowrap; }
.current-payroll-band > .button-primary:hover { background: var(--surface-selected); border-color: var(--surface-selected); color: var(--brand-primary-active); }
.payroll-period-directory .payroll-row-actions { flex-wrap: wrap; }
.payroll-period-directory .payroll-row-actions a { min-height: 34px; display: inline-flex; align-items: center; }

.archive-editorial-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; padding: clamp(36px, 5vw, 68px); border-block: 1px solid var(--border-default); background: linear-gradient(100deg, var(--surface-editorial), var(--surface-quiet)); }
.archive-editorial-header h1 { font-size: clamp(2.35rem, 4.3vw, 4.4rem); }
.archive-editorial-header > .button { grid-column: 2; }
.archive-index-mark { min-width: 180px; padding-left: 28px; border-left: 1px solid var(--border-default); }
.archive-index-mark span,
.archive-index-mark small { display: block; color: var(--text-muted); font-size: .65rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.archive-index-mark strong { display: block; margin: 12px 0 8px; color: var(--text-primary); font-size: 3.1rem; line-height: .85; }
.archive-workspace { margin-top: clamp(38px, 5vw, 64px); }
.archive-workspace .list-report { border-color: var(--border-subtle); }
.archive-workspace .record-link { color: var(--text-secondary); }
.record-context-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 20px; padding: 0 4px; color: var(--text-muted); font-size: .72rem; }
.record-context-nav a { color: var(--brand-primary); }
.record-context-nav strong { color: var(--text-secondary); }
.phase3-record-header { margin-bottom: 18px; }

@media (max-width: 1180px) {
    .module-hero { grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); }
    .module-hero-copy, .module-hero-visual { min-height: 350px; }
    .current-payroll-band { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
    .current-payroll-band > .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 1024px) {
    .module-summary { grid-template-columns: 1.35fr repeat(3, 1fr); }
    .module-summary > div { padding-inline: 18px; }
    .payroll-lifecycle { grid-template-columns: 1fr; gap: 22px; }
    .lifecycle-exceptions { grid-column: 1; margin-top: -10px; }
    .operations-overview { grid-template-columns: 1fr; }
    .operations-overview-lead { padding-left: 2px; border-bottom: 1px solid var(--border-subtle); }
    .operations-metrics > div:first-child { border-left: 0; }
}

@media (max-width: 840px) {
    .module-hero { grid-template-columns: 1fr; }
    .module-hero-copy { min-height: 0; padding: 42px clamp(22px, 6vw, 44px); }
    .module-hero-visual { min-height: 240px; max-height: 300px; }
    .module-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .module-summary > div:nth-child(3) { border-left: 0; }
    .module-summary > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
    .module-pathways { grid-template-columns: 1fr; }
    .module-pathways a { border-left: 0; border-top: 1px solid var(--border-subtle); }
    .module-pathways a:first-child { border-top: 0; }
    .workspace-intro { grid-template-columns: 1fr; align-items: start; gap: 10px; }
    .workspace-intro > p { justify-self: start; }
    .attendance-path-grid { grid-template-columns: 1fr; }
    .attendance-path { min-height: 310px; }
    .attendance-path + .attendance-path { border-left: 0; border-top: 1px solid var(--border-subtle); }
    .module-workspace-header { grid-template-columns: 1fr; align-items: start; gap: 20px; }
    .workspace-switcher { justify-self: start; }
    .payroll-editorial-hero { grid-template-columns: 1fr; align-items: start; padding: 44px 34px; background: linear-gradient(145deg, var(--surface-primary), var(--surface-selected)); }
    .payroll-hero-actions { justify-content: flex-start; }
    .current-payroll-band { grid-template-columns: 1fr; gap: 24px; }
    .current-payroll-band > .button { grid-column: 1; }
    .archive-editorial-header { grid-template-columns: minmax(0, 1fr) auto; }
    .archive-editorial-header > .button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 768px) {
    .operations-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .operations-metrics > div:nth-child(3) { border-left: 0; }
    .operations-metrics > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
    .payroll-lifecycle ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payroll-lifecycle li:nth-child(3) { border-left: 0; }
    .payroll-lifecycle li:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
    .current-payroll-band dl { grid-template-columns: 1fr; }
    .current-payroll-band dl > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--brand-on-primary) 20%, transparent); }
    .current-payroll-band dl > div:first-child { border-top: 0; }
    .current-payroll-band dd { margin: 0; text-align: right; }

    [data-personnel-directory-report] .personnel-table,
    .live-attendance-table { min-width: 0; }
    [data-personnel-directory-report] .personnel-table thead,
    .live-attendance-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    [data-personnel-directory-report] .personnel-table,
    [data-personnel-directory-report] .personnel-table tbody,
    .live-attendance-table,
    .live-attendance-table tbody { display: grid; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; height: auto; padding: 17px 56px 17px 15px; border-bottom: 1px solid var(--border-subtle); }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > th,
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td { display: block; width: auto; height: auto; min-height: 0; padding: 0; border: 0; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > th:first-child { grid-column: 1 / -1; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(3) { grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid var(--border-subtle); }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(2)::before,
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(3)::before,
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(4)::before { display: block; margin-bottom: 5px; color: var(--text-muted); content: attr(data-label); font-size: .58rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
    [data-personnel-directory-report] .personnel-table .row-chevron { position: absolute; top: 18px; right: 10px; }
    [data-personnel-directory-report] .personnel-table .row-chevron::before { display: none; }
    [data-personnel-directory-report] .personnel-table tbody tr:not([data-personnel-row]),
    .live-attendance-table tbody tr { display: block; }
    [data-personnel-directory-report] .personnel-table tbody tr:not([data-personnel-row]) td { display: block; width: 100%; }
    .live-attendance-table tbody tr { display: grid; padding: 15px 16px; border-bottom: 1px solid var(--border-subtle); }
    .live-attendance-table tbody :is(th,td) { display: grid; min-height: 0; grid-template-columns: 112px minmax(0, 1fr); gap: 9px; padding: 4px 0; border: 0; }
    .live-attendance [data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .live-attendance-table tbody td[colspan] { display: block; }
    .live-attendance tbody td[colspan]::before { content: none; }
    .personnel-row-identity strong,
    .classification-cell strong,
    .assignment-cell strong,
    .assignment-cell > span { white-space: normal; }
}

@media (max-width: 620px) {
    .module-hero-copy h1,
    .payroll-editorial-hero h1,
    .archive-editorial-header h1,
    .module-workspace-header h1 { font-size: clamp(2rem, 10.5vw, 2.75rem); }
    .module-hero-copy > p:last-of-type,
    .payroll-hero-copy > p:last-child,
    .archive-editorial-header > div > p:last-child { margin-top: 18px; font-size: .9rem; }
    .module-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .module-hero-actions .button { width: 100%; min-height: 44px; }
    .module-hero-visual { min-height: 205px; }
    .module-summary > div { padding: 18px 15px; }
    .module-summary-primary dd { font-size: 2.65rem; }
    .module-summary dd { font-size: 1.45rem; }
    .module-pathways a { min-height: 94px; }
    .workspace-section { margin-top: 46px; }
    .workspace-intro { padding-inline: 2px; }
    .workspace-intro h2 { font-size: 1.75rem; }
    .attendance-path { min-height: 0; padding: 28px 22px; }
    .path-icon { margin: 26px 0 15px; }
    .attendance-path .button { width: 100%; }
    .workspace-switcher { width: 100%; }
    .workspace-switcher a { flex: 1; justify-content: center; min-height: 44px; }
    .operations-metrics > div { padding: 18px 14px; }
    .live-attendance-filters { border-radius: var(--radius-control) var(--radius-control) 0 0; }
    .live-attendance-table-wrap { border-radius: 0 0 var(--radius-control) var(--radius-control); }
    .live-attendance-table tbody tr { gap: 3px; padding: 17px 15px; }
    .live-attendance-table tbody :is(th,td) { grid-template-columns: 105px minmax(0, 1fr); align-items: baseline; }
    .payroll-editorial-hero { padding: 34px 22px; }
    .payroll-hero-actions { display: grid; width: 100%; }
    .payroll-hero-actions .button { width: 100%; }
    .payroll-lifecycle li { padding: 20px 14px; }
    .current-payroll-band { padding: 28px 22px; border-radius: var(--radius-surface); }
    .current-payroll-band > .button { width: 100%; }
    .archive-editorial-header { grid-template-columns: 1fr; padding: 34px 22px; }
    .archive-index-mark { min-width: 0; padding: 20px 0 0; border-top: 1px solid var(--border-default); border-left: 0; }
    .archive-editorial-header > .button { grid-column: 1; width: 100%; }

    [data-personnel-directory-report] .personnel-table { min-width: 0; }
    [data-personnel-directory-report] .personnel-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    [data-personnel-directory-report] .personnel-table,
    [data-personnel-directory-report] .personnel-table tbody { display: grid; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; height: auto; padding: 17px 56px 17px 15px; border-bottom: 1px solid var(--border-subtle); }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > th,
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td { display: block; width: auto; height: auto; min-height: 0; padding: 0; border: 0; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > th:first-child { grid-column: 1 / -1; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(3) { grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid var(--border-subtle); }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(2)::before,
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(3)::before,
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] > td:nth-child(4)::before { display: block; margin-bottom: 5px; color: var(--text-muted); content: attr(data-label); font-size: .58rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
    [data-personnel-directory-report] .personnel-table .row-chevron { position: absolute; top: 18px; right: 10px; }
    [data-personnel-directory-report] .personnel-table .row-chevron::before { display: none; }
    [data-personnel-directory-report] .personnel-table tbody tr:not([data-personnel-row]) { display: block; }
    [data-personnel-directory-report] .personnel-table tbody tr:not([data-personnel-row]) td { display: block; width: 100%; }
    .personnel-row-identity strong,
    .classification-cell strong,
    .assignment-cell strong,
    .assignment-cell > span { white-space: normal; }
}

@media (max-width: 430px) {
    .module-hero,
    .attendance-path-grid,
    .payroll-editorial-hero { border-radius: var(--radius-control); }
    .module-hero-copy { padding: 32px 20px; }
    .module-summary { grid-template-columns: 1fr 1fr; }
    .module-summary dt { letter-spacing: .045em; }
    .module-summary small { display: none; }
    .module-pathways { margin-top: 24px; }
    .module-workspace-header { padding-bottom: 22px; }
    .operations-overview-lead { padding-block: 20px; }
    .operations-metrics dt { min-height: 26px; }
    .operations-metrics dd.metric-time { white-space: normal; }
    .live-attendance-table tbody :is(th,td) { grid-template-columns: 92px minmax(0, 1fr); }
    .payroll-lifecycle ol { grid-template-columns: 1fr; }
    .payroll-lifecycle li { border-top: 1px solid var(--border-subtle); border-left: 0; }
    .payroll-lifecycle li:first-child { border-top: 0; }
    .payroll-lifecycle li > span { margin-bottom: 9px; }
    .archive-editorial-header { margin-inline: -2px; }
    .phase3-record-header .heading-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
    .module-hero-copy { padding-inline: 17px; }
    .module-summary > div { padding-inline: 12px; }
    .module-pathways a { padding-inline: 14px; }
    .operations-metrics > div { padding-inline: 11px; }
    [data-personnel-directory-report] .personnel-table tr[data-personnel-row] { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .module-pathways a:hover i { transform: none; }
}

/* Digital Headquarters Phase 4 — shared record and transaction experiences */
.record-density-editorial { --record-space: clamp(28px, 4vw, 48px); }
.record-density-standard { --record-space: 24px; }
.record-density-operational { --record-space: 16px; }
.record-experience, .record-workspace-body { min-width: 0; }
.record-workspace-body {
    margin-top: 22px;
    padding: 0 clamp(18px, 2.2vw, 30px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-surface);
    background: var(--surface-primary);
}
.record-identity-header {
    min-height: 0;
    align-items: center;
    margin-bottom: 14px;
    padding: 22px clamp(20px, 2.4vw, 32px);
    background: linear-gradient(105deg, var(--surface-selected), var(--surface-primary) 64%);
}
.record-identity-header::before { inset-block: 15px; }
.record-identity-header h1 { margin-bottom: 7px; font-size: clamp(1.75rem, 2.7vw, 2.55rem); }
.record-form-header { min-height: 0; padding-block: 22px; }
.record-metadata-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--text-secondary);
    font-size: .76rem;
}
.record-metadata-strip > span:not(:last-child) { position: relative; }
.record-metadata-strip > span:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -8px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--text-muted);
    content: "";
}
.record-action-rail { align-self: center; }
.record-more-actions > div { width: min(280px, calc(100vw - 32px)); }
.record-more-actions > div a { display: block; padding: 9px 10px; text-decoration: none; }
.record-more-actions > div small { display: block; padding: 3px 10px 8px; color: var(--text-muted); line-height: 1.45; }
.record-section-nav { border-radius: var(--radius-control); box-shadow: none; }
.record-section { padding-block: var(--record-space, 24px); }
.record-section .section-heading > p:last-child,
.record-section .section-heading > div > p:last-child {
    max-width: 720px;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.55;
}
.section-heading-with-action { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.record-notice {
    display: flex;
    gap: 10px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-left: 3px solid var(--brand-primary);
    background: var(--brand-primary-subtle);
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.5;
}
.record-notice strong { color: var(--text-primary); }
.record-notice-neutral { border-color: var(--border-default); background: var(--surface-quiet); }
.record-empty-state { border: 1px dashed var(--border-default); border-radius: var(--radius-control); background: var(--surface-quiet); }

/* Personnel authoritative record and form */
.object-page-header.record-identity-header { display: block; }
.object-page-header .object-monogram {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
}
.object-page-header .object-meta,
.object-page-header .object-assignment-summary span { color: var(--text-secondary); }
.object-page-header .object-assignment-summary strong,
.object-page-header .object-key-facts dd,
.object-page-header .object-header-compact strong { color: var(--text-primary); }
.object-page-header .object-key-facts dt,
.object-page-header .object-header-compact span { color: var(--text-muted); }
.object-page-header .object-key-facts .empty-value { color: var(--text-muted); }
.object-page-header.is-collapsed {
    border-color: var(--border-default);
    background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
    backdrop-filter: blur(14px);
}
[data-record-experience] .object-section { padding-block: 27px; }
[data-record-experience] .section-heading { max-width: 820px; }
[data-record-experience] .section-heading > p:last-child { margin: 6px 0 0; color: var(--text-secondary); font-size: .78rem; }
.assignment-record-section .detail-list > div { position: relative; }
.assignment-record-section .detail-list > div:first-child::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 2px;
    border-radius: 2px;
    background: var(--brand-primary);
    content: "";
}
.form-guidance { margin: 0 0 14px; }
.form-guidance span { color: var(--text-secondary); }
.record-form > .form-actions {
    position: sticky;
    bottom: 12px;
    z-index: var(--layer-content-navigation);
    margin: 0 12px 12px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-primary) 95%, transparent);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(12px);
}
.record-form .form-section-heading h2 { margin-bottom: 5px; }
.record-form .form-fields label:has(:disabled) { color: var(--text-muted); }
.record-form .form-fields :is(input, select, textarea):disabled {
    border-style: dashed;
    background: var(--surface-readonly);
}
.lifecycle-section { margin-top: 24px; border-left: 3px solid var(--semantic-warning); }
.lifecycle-current { padding: 12px 14px; border: 1px solid var(--border-subtle); background: var(--surface-quiet); }

/* Guided personnel biometric identity */
.record-identity-strip { border-radius: var(--radius-control); box-shadow: none; }
.face-enrollment-card.transaction-workspace { border-radius: var(--radius-surface); box-shadow: none; }
.camera-column { display: grid; align-content: center; }
.camera-preview-wrap { max-width: 760px; justify-self: center; }
.enrollment-progress ol { align-items: start; gap: 10px; }
.enrollment-progress li {
    height: auto;
    display: grid;
    gap: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: .58rem;
    font-weight: 720;
    text-align: center;
    text-transform: uppercase;
    transform: none;
}
.enrollment-progress li::before { height: 7px; border-radius: 999px; background: var(--border-default); content: ""; }
.enrollment-progress li.is-current { background: transparent; color: var(--brand-primary); transform: none; }
.enrollment-progress li.is-current::before { background: color-mix(in srgb, var(--brand-primary) 48%, var(--border-default)); transform: scaleY(1.2); }
.enrollment-progress li.is-complete { background: transparent; color: var(--text-secondary); }
.enrollment-progress li.is-complete::before { background: var(--brand-primary); }
.enrollment-progress li b { font: inherit; }

/* Payroll Period command workspace */
.transaction-workspace-header .record-metadata-strip .identifier { color: var(--text-secondary); }
.transaction-stage {
    margin-top: 18px;
    padding: 20px clamp(18px, 2.2vw, 28px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-surface);
    background: var(--surface-primary);
}
.transaction-stage-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.transaction-stage-heading h2 { margin: 0; color: var(--text-primary); font-size: 1.05rem; }
.transaction-stage-heading > p { max-width: 520px; margin: 0; color: var(--text-muted); font-size: .7rem; line-height: 1.5; }
.transaction-stage ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; }
.transaction-stage li { position: relative; min-width: 0; display: grid; gap: 4px; padding: 13px 15px; border-top: 2px solid var(--border-default); background: var(--surface-quiet); }
.transaction-stage li + li { border-left: 1px solid var(--border-subtle); }
.transaction-stage li > span { color: var(--text-muted); font-size: .58rem; font-weight: 800; }
.transaction-stage li strong { color: var(--text-secondary); font-size: .78rem; }
.transaction-stage li small { color: var(--text-muted); font-size: .62rem; line-height: 1.35; }
.transaction-stage li.is-complete { border-top-color: var(--brand-primary-border); }
.transaction-stage li.is-current { border-top-color: var(--brand-primary); background: var(--brand-primary-subtle); }
.transaction-stage li.is-current > span, .transaction-stage li.is-current strong { color: var(--brand-primary); }
.record-summary-band {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(145px, 1fr));
    margin: 18px 0 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-surface);
    overflow: hidden;
    background: var(--surface-primary);
}
.record-metric { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px; border-left: 1px solid var(--border-subtle); }
.record-metric:first-child { border-left: 0; }
.record-metric dt { order: 1; margin-top: 6px; color: var(--text-muted); font-size: .62rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.record-metric dd { order: 0; margin: 0; color: var(--text-primary); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 730; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.record-metric small { order: 2; margin-top: 4px; color: var(--text-muted); font-size: .65rem; line-height: 1.35; }
.record-metric-primary { background: var(--surface-editorial); }
.record-metric-primary dd { color: var(--brand-primary); font-size: clamp(1.75rem, 2.7vw, 2.65rem); }
.record-metric .record-metric-date { font-size: 1rem; letter-spacing: -.01em; }
.record-workspace-body > .record-section { border-bottom: 1px solid var(--border-subtle); }
.record-workspace-body > .record-section:last-child { border-bottom: 0; }
.population-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 16px 0 0; border-block: 1px solid var(--border-subtle); }
.population-facts > div { min-width: 0; padding: 13px 14px; border-left: 1px solid var(--border-subtle); }
.population-facts > div:first-child { border-left: 0; }
.population-facts dt { color: var(--text-muted); font-size: .6rem; font-weight: 760; text-transform: uppercase; }
.population-facts dd { margin: 5px 0 0; color: var(--text-primary); font-size: 1.15rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.archive-readiness { color: var(--text-secondary); }

/* Payroll Run — dense financial workspace */
.payroll-workspace-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 320px); align-items: end; gap: 24px; padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-quiet); }
.payroll-workspace-toolbar h2 { margin: 0; color: var(--text-primary); font-size: 1.05rem; }
.payroll-workspace-toolbar > div > p:last-child { margin: 5px 0 0; color: var(--text-muted); font-size: .7rem; line-height: 1.45; }
.payroll-run-search { display: grid; gap: 6px; color: var(--text-secondary); font-size: .67rem; font-weight: 700; }
.payroll-run-search input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-default); background: var(--surface-primary); }
.payroll-filter-bar { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); scrollbar-width: thin; }
.payroll-filter-bar button { min-height: 36px; flex: 0 0 auto; padding: 7px 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); font-size: .7rem; font-weight: 680; cursor: pointer; }
.payroll-filter-bar button:hover { background: var(--surface-hover); color: var(--brand-primary); }
.payroll-filter-bar button.is-active { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.payroll-filter-bar button span { display: inline-grid; min-width: 19px; min-height: 19px; margin-left: 4px; place-items: center; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); font-size: .6rem; }
.payroll-filter-status { margin: 0; padding: 7px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-size: .65rem; }
.payroll-run-table { min-width: 1240px; }
.payroll-run-table thead th { position: sticky; top: 0; z-index: 2; }
.payroll-run-table tbody th { color: var(--text-primary); font-size: .78rem; text-align: left; }
.payroll-run-table :is(th, td) { padding: 11px 12px; }
.payroll-run-table .money-cell { text-align: right; }
.payroll-person-row > th:first-child { min-width: 220px; }
.payroll-person-row > td:nth-child(3) { min-width: 170px; }
.payroll-person-row > td:nth-child(5) { min-width: 145px; }
.payroll-person-row small { max-width: 230px; white-space: normal; overflow-wrap: anywhere; }
.payroll-person-link { color: var(--text-primary); text-decoration: none; }
.payroll-person-link:hover { color: var(--brand-primary); text-decoration: underline; }
.payroll-net-cell { color: var(--brand-primary); }
.source-state { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .67rem; font-weight: 700; }
.source-state::before { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); content: ""; }
.source-state.is-available::before { background: var(--semantic-success); }
.source-state.is-missing { color: var(--semantic-warning); }
.source-state.is-missing::before { background: var(--semantic-warning); }
.payroll-person-row[hidden] { display: none !important; }

/* Employee Payroll Detail value provenance */
.payroll-value-legend { display: flex; flex-wrap: wrap; gap: 7px 15px; padding: 8px 20px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-quiet); }
.value-key { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .61rem; font-weight: 680; }
.value-key i { width: 8px; height: 8px; border: 1px solid var(--border-default); border-radius: 2px; background: var(--surface-primary); }
.value-key-editable i { border-color: var(--brand-primary); background: var(--brand-primary-subtle); }
.value-key-calculated i { background: var(--surface-readonly); }
.value-key-missing i { border-color: var(--semantic-warning); background: var(--semantic-warning-subtle); }
.payroll-encoding-field.is-editable { box-shadow: inset 2px 0 0 var(--brand-primary-border); }
.payroll-encoding-field.is-source-derived { background: var(--surface-primary); }
.payroll-encoding-field.is-calculated { background: var(--surface-quiet); }
.payroll-encoding-field.is-missing { background: var(--semantic-warning-subtle); }
.locked-state { border-color: var(--border-default); background: var(--surface-quiet); color: var(--text-secondary); }

/* Premium digital payslip with preserved financial containment */
.payslip-document { max-width: 980px; padding: clamp(24px, 3.2vw, 42px); border-radius: var(--radius-surface); box-shadow: var(--shadow-lift); }
.payslip-brand-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; padding-bottom: 20px; border-bottom-width: 2px; text-align: left; }
.payslip-brand-header > div { text-align: center; }
.payslip-brand-header h1 { margin: 13px 0 0; color: var(--brand-navy); font-size: 1.35rem; letter-spacing: .16em; }
.payslip-kicker { color: var(--text-muted) !important; font-size: .62rem; font-weight: 760; letter-spacing: .08em; }
.payslip-service-name { display: block; color: var(--brand-navy); font-size: 1.05rem; letter-spacing: .03em; }
.payslip-document-mark { padding-left: 18px; border-left: 1px solid var(--border-default); color: var(--brand-primary); font-size: .58rem; font-weight: 800; letter-spacing: .1em; line-height: 1.55; text-align: right; }
.payslip-identity { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 28px; margin-top: 24px; padding: 20px 22px; background: var(--surface-editorial); border-left: 3px solid var(--brand-primary); }
.payslip-identity h2 { margin: 2px 0 5px; color: var(--text-primary); font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.025em; }
.payslip-identity p { margin: 0; color: var(--text-secondary); }
.payslip-identity > div:last-child { display: grid; align-content: center; justify-items: end; text-align: right; }
.payslip-identity > div:last-child strong { color: var(--brand-primary); font-size: 1rem; }
.payslip-identity > div:last-child span { margin-top: 5px; color: var(--text-muted); font-size: .7rem; }
.payslip-record-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); background: transparent; border: 1px solid var(--border-subtle); }
.payslip-record-meta > div { border-right: 1px solid var(--border-subtle); background: var(--surface-primary); }
.payslip-record-meta > div:nth-child(3n) { border-right: 0; }
.payslip-attendance .attendance-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.payslip-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.payslip-section h3 { color: var(--brand-navy); border-color: var(--brand-primary-border); }
.payslip-financial-table { min-width: 0 !important; }
.payslip-financial-table :is(th, td) { height: auto; }
.payslip-empty-line { color: var(--text-muted); font-style: italic; }
.payslip-financial-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; border: 1px solid var(--border-default); }
.payslip-financial-summary > div { min-width: 0; display: grid; gap: 6px; padding: 17px 20px; border-left: 1px solid var(--border-subtle); }
.payslip-financial-summary > div:first-child { border-left: 0; }
.payslip-financial-summary dt { color: var(--text-muted); font-size: .62rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.payslip-financial-summary dd { margin: 0; color: var(--text-primary); font-size: 1.05rem; font-weight: 760; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.payslip-financial-summary .payslip-net { display: grid; justify-content: initial; align-items: initial; gap: 6px; margin: 0; padding: 17px 20px; background: var(--brand-primary-subtle); color: var(--brand-primary); }
.payslip-financial-summary .payslip-net :is(dt, dd) { color: var(--brand-primary); }
.payslip-financial-summary .payslip-net dd { font-size: 1.35rem; }

/* Archived Payroll Period evidence */
.archived-record-header { background: linear-gradient(105deg, var(--surface-editorial), var(--surface-primary)); }
.archived-state-notice { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 15px 18px; border: 1px solid var(--border-default); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-control); }
.archived-state-notice p { margin: 4px 0 0; color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
.locked-state-mark { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary-subtle); color: var(--brand-primary); }
.archived-record-summary .record-metric-primary dd { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.archive-dependencies > p { color: var(--text-secondary); line-height: 1.55; }

/* Shared native dialog finish */
:is(.delete-dialog, .device-revoke-dialog, .payroll-detail-dialog, .theme-dialog) { border-color: var(--border-subtle); }
:is(.delete-dialog, .device-revoke-dialog, .payroll-detail-dialog, .theme-dialog)::backdrop { background: color-mix(in srgb, var(--text-primary) 54%, transparent); }
:is(.delete-dialog, .device-revoke-dialog, .payroll-detail-dialog, .theme-dialog)[open] { animation: record-dialog-in var(--motion-standard) var(--motion-ease); }
@keyframes record-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
    .record-summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record-metric:nth-child(3) { border-left: 0; }
    .record-metric:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
    .payslip-attendance .attendance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .record-identity-header { align-items: flex-start; }
    .transaction-stage-heading { display: grid; gap: 8px; }
    .transaction-stage ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .transaction-stage li:nth-child(3) { border-left: 0; }
    .population-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .population-facts > div:nth-child(odd) { border-left: 0; }
    .section-heading-with-action { display: grid; }
    .payroll-workspace-toolbar { grid-template-columns: 1fr; gap: 14px; }
    .payroll-run-table { min-width: 0; }
    .payroll-run-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .payroll-run-table, .payroll-run-table tbody { display: grid; }
    .payroll-run-table tbody tr.payroll-person-row { display: grid; gap: 0; padding: 15px 16px; border-bottom: 1px solid var(--border-subtle); }
    .payroll-run-table tbody tr.payroll-person-row > :is(th, td) { display: grid; min-width: 0; height: auto; grid-template-columns: 122px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 5px 0; border: 0; text-align: left; white-space: normal; }
    .payroll-run-table tbody tr.payroll-person-row > :is(th, td)::before { content: attr(data-label); color: var(--text-muted); font-size: .58rem; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
    .payroll-run-table tbody tr.payroll-person-row > th:first-child { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
    .payroll-run-table tbody tr.payroll-person-row > th:first-child::before { display: block; margin-bottom: 6px; }
    .payroll-run-table tbody tr.payroll-person-row > th:first-child small { max-width: none; }
    .payroll-run-table tbody tr:not(.payroll-person-row) { display: block; }
    .payroll-run-table tbody tr:not(.payroll-person-row) td { display: block; width: 100%; }
    .payroll-run-table .inline-row-action form { position: static; width: 100%; margin-top: 8px; }
    .payslip-brand-header { grid-template-columns: auto 1fr; }
    .payslip-document-mark { display: none; }
    .payslip-identity { grid-template-columns: 1fr; gap: 16px; }
    .payslip-identity > div:last-child { justify-items: start; text-align: left; }
    .payslip-record-meta, .payslip-attendance .attendance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payslip-record-meta > div:nth-child(3n) { border-right: 1px solid var(--border-subtle); }
    .payslip-record-meta > div:nth-child(even) { border-right: 0; }
}

@media (max-width: 620px) {
    .record-identity-header { display: grid; gap: 17px; padding: 19px 17px; }
    .record-action-rail { display: grid; grid-template-columns: 1fr; width: 100%; }
    .record-action-rail > :is(.button, details), .record-action-rail details > summary { width: 100%; }
    .record-action-rail details > summary { justify-content: center; }
    .record-metadata-strip { align-items: flex-start; flex-direction: column; gap: 6px; }
    .record-metadata-strip > span::after { display: none; }
    .record-form > .form-actions { bottom: 7px; margin-inline: 7px; }
    .transaction-stage { padding: 17px 14px; }
    .record-workspace-body { padding-inline: 15px; }
    .payroll-value-legend { flex-wrap: nowrap; overflow-x: auto; padding-inline: 14px; white-space: nowrap; }
    .payslip-columns { grid-template-columns: 1fr; gap: 4px; }
    .payslip-financial-summary { grid-template-columns: 1fr; }
    .payslip-financial-summary > div { border-top: 1px solid var(--border-subtle); border-left: 0; }
    .payslip-financial-summary > div:first-child { border-top: 0; }
}

@media (max-width: 430px) {
    .record-summary-band { grid-template-columns: 1fr; border-radius: var(--radius-control); }
    .record-metric { border-top: 1px solid var(--border-subtle); border-left: 0; }
    .record-metric:first-child { border-top: 0; }
    .record-metric:nth-child(3) { border-left: 0; }
    .transaction-stage ol { grid-template-columns: 1fr; }
    .transaction-stage li + li { border-left: 0; }
    .population-facts { grid-template-columns: 1fr; }
    .population-facts > div { border-top: 1px solid var(--border-subtle); border-left: 0; }
    .population-facts > div:first-child { border-top: 0; }
    .payroll-filter-bar { padding-inline: 8px; }
    .payroll-run-table tbody tr.payroll-person-row { padding-inline: 13px; }
    .payroll-run-table tbody tr.payroll-person-row > :is(th, td) { grid-template-columns: 104px minmax(0, 1fr); }
    .payslip-document { padding: 17px 13px; }
    .payslip-brand-header { grid-template-columns: 1fr; text-align: center; }
    .payslip-brand-header img { justify-self: center; width: 62px; height: auto; }
    .payslip-identity { padding: 17px 15px; }
    .payslip-record-meta, .payslip-attendance .attendance-grid { grid-template-columns: 1fr; }
    .payslip-record-meta > div { border-right: 0 !important; }
    .payslip-amount-column { width: 108px; }
    .payslip-financial-table :is(th, td) { padding-inline: 6px; }
    .archived-state-notice { align-items: flex-start; }
}

@media print {
    .payslip-document { padding: 0; border: 0; box-shadow: none; }
    .payslip-brand-header { grid-template-columns: auto 1fr auto; }
    .payslip-document-mark { display: block; }
    .payslip-identity { background: transparent; border: 1px solid var(--border-default); border-left: 3px solid var(--brand-navy); }
    .payslip-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payslip-financial-summary { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.delete-dialog, .device-revoke-dialog, .payroll-detail-dialog, .theme-dialog)[open] { animation: none; }
}

/* Digital Headquarters Phase 4.5 — theme-derived application shell hierarchy */
:root, [data-portal-theme] {
    --theme-primary-strong: color-mix(in srgb, var(--brand-primary-active) 88%, var(--neutral-950));
    --theme-header: color-mix(in srgb, var(--brand-primary) 88%, var(--neutral-950));
    --theme-header-hover: color-mix(in srgb, var(--brand-on-primary) 12%, transparent);
    --theme-header-active: color-mix(in srgb, var(--brand-on-primary) 19%, transparent);
    --theme-header-text: var(--brand-on-primary);
    --theme-header-muted: color-mix(in srgb, var(--brand-on-primary) 74%, transparent);
    --theme-sidebar: color-mix(in srgb, var(--brand-primary) 8%, var(--neutral-50));
    --theme-sidebar-hover: color-mix(in srgb, var(--brand-primary) 12%, var(--neutral-50));
    --theme-sidebar-active: color-mix(in srgb, var(--brand-primary) 18%, var(--neutral-50));
    --theme-sidebar-text: color-mix(in srgb, var(--brand-primary-active) 26%, var(--text-secondary));
    --theme-workspace-neutral: color-mix(in srgb, var(--neutral-200) 45%, var(--neutral-100));
    --theme-workspace: color-mix(in srgb, var(--brand-primary) 4%, var(--theme-workspace-neutral));
    --theme-surface: var(--white);
    --theme-border: color-mix(in srgb, var(--brand-primary) 14%, var(--neutral-200));
    --theme-focus-shell: color-mix(in srgb, var(--brand-on-primary) 78%, transparent);

    /* Existing surface aliases remain the shared source for operational pages. */
    --surface-page: var(--theme-workspace);
    --surface-workspace: var(--theme-surface);
    --surface-primary: var(--theme-surface);
    --surface-elevated: var(--theme-surface);
    --surface-interactive: var(--theme-surface);
    --canvas: var(--theme-workspace);
    --surface: var(--theme-surface);
}

.app-authenticated { background: var(--theme-workspace); }

.app-authenticated .app-topbar {
    background: var(--theme-header);
    border-bottom-color: color-mix(in srgb, var(--brand-on-primary) 17%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-primary-strong) 18%, transparent);
    color: var(--theme-header-text);
}
.app-authenticated .app-brand { color: var(--theme-header-text); }
.app-authenticated .app-brand-copy { border-left-color: color-mix(in srgb, var(--brand-on-primary) 27%, transparent); }
.app-authenticated .app-brand-copy strong { color: var(--theme-header-text); }
.app-authenticated .app-brand-copy small { color: var(--theme-header-muted); }
.app-authenticated .appearance-trigger,
.app-authenticated .account-menu summary { color: var(--theme-header-text); }
.app-authenticated .account-menu summary > svg { stroke: currentColor; opacity: .76; }
.app-authenticated .appearance-trigger:hover,
.app-authenticated .account-menu summary:hover { background: var(--theme-header-hover); color: var(--theme-header-text); }
.app-authenticated .appearance-trigger:active,
.app-authenticated .account-menu summary:active,
.app-authenticated .account-menu[open] summary { background: var(--theme-header-active); }
.app-authenticated .app-topbar :focus-visible {
    border-color: var(--theme-header-text) !important;
    box-shadow: 0 0 0 2px var(--theme-header), 0 0 0 5px var(--theme-focus-shell);
}
.app-authenticated .app-topbar .account-avatar {
    background: color-mix(in srgb, var(--brand-on-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--brand-on-primary) 31%, transparent);
    color: var(--theme-header-text);
}
.app-authenticated .account-popover {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--text-primary);
}
.app-authenticated .account-popover .account-avatar {
    background: var(--theme-sidebar-active);
    border-color: var(--theme-border);
    color: var(--brand-primary);
}
.app-authenticated .account-popover-identity { border-bottom-color: var(--theme-border); }
.app-authenticated .account-popover-identity small { color: var(--text-muted); }
.app-authenticated .account-signout { color: var(--text-secondary); }
.app-authenticated .account-signout:hover { background: var(--surface-hover); color: var(--text-primary); }

.app-authenticated .app-sidebar {
    background: var(--theme-sidebar);
    border-color: var(--theme-border);
    box-shadow: inset -1px 0 color-mix(in srgb, var(--brand-on-primary) 34%, transparent);
}
.app-authenticated .nav-label { color: color-mix(in srgb, var(--brand-primary-active) 34%, var(--text-muted)); }
.app-authenticated .app-sidebar nav a { color: var(--theme-sidebar-text); }
.app-authenticated .app-sidebar nav a:hover { background: var(--theme-sidebar-hover); color: var(--text-primary); }
.app-authenticated .app-sidebar nav a.active {
    background: var(--theme-sidebar-active);
    color: var(--theme-primary-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.app-authenticated .app-sidebar nav a.active::before { width: 3px; background: var(--brand-primary); }
.app-authenticated .app-sidebar nav a:focus-visible {
    border-color: var(--brand-primary) !important;
    box-shadow: inset 0 0 0 1px var(--brand-primary), 0 0 0 3px var(--theme-focus);
}
.app-authenticated .sidebar-footer { border-top-color: var(--theme-border); color: var(--theme-sidebar-text); }
.app-authenticated .sidebar-footer small { color: color-mix(in srgb, var(--brand-primary-active) 30%, var(--text-muted)); }
.app-authenticated .security-mark { background: var(--theme-sidebar-active); color: var(--theme-primary-strong); }

.app-authenticated .app-main { background: var(--theme-workspace); }
.app-authenticated :is(.data-surface, .reference-surface, .form-section, .detail-section,
    .payroll-panel, .biometric-status-card, .biometric-readiness-panel, .portal-card,
    .portal-shortcut-tile, .personnel-feature, .operations-story-grid article,
    .headquarters-scope-note, .attendance-path, .live-attendance-table-wrap,
    .record-workspace, .payroll-run-workspace, .payslip-document) {
    background-color: var(--theme-surface);
}
.app-authenticated .headquarters-hero {
    border-color: var(--theme-border);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-primary-strong) 8%, transparent);
}

/* Appearance previews show chrome, navigation, canvas, and operational surfaces. */
.theme-preview {
    height: 66px;
    display: grid;
    grid-template-columns: 24% minmax(0, 1fr);
    grid-template-rows: 17px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    background: var(--theme-workspace);
    box-shadow: none;
}
.theme-preview::before, .theme-preview::after { display: none; }
.theme-preview > .theme-preview-header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: var(--theme-header);
}
.theme-preview > .theme-preview-sidebar {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    align-content: start;
    gap: 5px;
    height: auto;
    padding: 7px 5px;
    border-radius: 0;
    background: var(--theme-sidebar);
}
.theme-preview > .theme-preview-sidebar > i {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 1px;
    background: var(--theme-border);
}
.theme-preview > .theme-preview-sidebar > i:first-child {
    background: var(--theme-sidebar-active);
    box-shadow: -2px 0 0 var(--brand-primary);
}
.theme-preview > .theme-preview-workspace {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr .64fr;
    gap: 5px;
    align-items: stretch;
    height: auto;
    padding: 6px;
    border-radius: 0;
    background: var(--theme-workspace);
}
.theme-preview > .theme-preview-workspace > b {
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 2px;
    background: var(--theme-surface);
}

@media (max-width: 840px) {
    .app-authenticated .app-sidebar {
        border-bottom-color: var(--theme-border);
        box-shadow: inset 0 -1px color-mix(in srgb, var(--brand-on-primary) 32%, transparent);
    }
}

@media (max-width: 620px) {
    .theme-preview { height: 68px; }
}

@media print {
    .app-authenticated, .app-authenticated .app-main { background: transparent; }
}

/* Digital Headquarters Phase 5.2 — local photographic storytelling */
:root {
    --dh-photo-edge: color-mix(in srgb, var(--theme-primary-strong) 12%, transparent);
    --dh-photo-border: color-mix(in srgb, var(--brand-primary) 18%, var(--border-subtle));
    --dh-photo-panel: color-mix(in srgb, var(--brand-primary) 4%, var(--theme-surface));
}

.dh-picture { width: 100%; height: 100%; display: block; }
.dh-picture > img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* The theme frames reality; generated photographs are never filtered or recolored. */
.headquarters-hero {
    grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
    border-color: var(--dh-photo-border);
    background: var(--theme-surface);
}
.headquarters-hero .portal-hero-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, var(--theme-surface), var(--dh-photo-panel));
}
.headquarters-hero .portal-hero-media { isolation: isolate; background: var(--theme-primary-strong); }
.headquarters-hero .portal-hero-media::before {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: clamp(56px, 10vw, 150px);
    background: linear-gradient(90deg, var(--dh-photo-panel), color-mix(in srgb, var(--dh-photo-panel) 72%, transparent) 34%, transparent);
    content: "";
    pointer-events: none;
}
.headquarters-hero .portal-hero-media::after {
    z-index: 1;
    background: linear-gradient(90deg, var(--dh-photo-edge), transparent 42%);
}
.headquarters-hero .portal-hero-media img { object-position: 62% center; }
.headquarters-hero .portal-title { max-width: 650px; font-size: clamp(2.55rem, 4.25vw, 4.55rem); text-wrap: balance; }
.headquarters-hero .portal-subtitle { text-wrap: pretty; }

.headquarters-shortcuts .portal-shortcut-tile:has(.shortcut-thumbnail) {
    grid-template-columns: 70px 34px minmax(0, 1fr) auto;
    padding: 12px;
}
.shortcut-thumbnail {
    width: 70px;
    height: 76px;
    display: block;
    overflow: hidden;
    border: 1px solid var(--dh-photo-border);
    border-radius: var(--radius-control);
    background: var(--surface-quiet);
}
.shortcut-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.headquarters-shortcuts .portal-shortcut-tile:nth-child(1) .shortcut-thumbnail img { object-position: 48% center; }
.headquarters-shortcuts .portal-shortcut-tile:nth-child(2) .shortcut-thumbnail img { object-position: 68% center; }
.headquarters-shortcuts .portal-shortcut-tile:nth-child(3) .shortcut-thumbnail img { object-position: 47% center; }

.feature-media, .compact-media, .story-media, .payroll-hero-media { position: relative; background: var(--theme-primary-strong); }
.feature-media::after, .compact-media::after, .story-media::after, .payroll-hero-media::after {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 13%, transparent);
    background: linear-gradient(180deg, transparent 58%, var(--dh-photo-edge));
    content: "";
    pointer-events: none;
}
.feature-media img { object-position: 50% center; }
.compact-media img { object-position: 68% center; }
.story-media img { object-position: center; }

.module-hero { border-color: var(--dh-photo-border); }
.module-hero-copy { position: relative; z-index: 2; background: linear-gradient(135deg, var(--theme-surface), var(--dh-photo-panel)); }
.module-hero-visual { isolation: isolate; }
.module-hero-visual::before {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: clamp(48px, 8vw, 120px);
    background: linear-gradient(90deg, var(--dh-photo-panel), transparent);
    content: "";
    pointer-events: none;
}
.module-hero-visual::after { z-index: 1; background: linear-gradient(180deg, transparent 64%, var(--dh-photo-edge)); }
.module-hero-personnel .module-hero-visual img { object-position: 52% center; }
.module-hero-attendance .module-hero-visual img { object-position: 68% center; }
.module-summary > div { background-color: var(--theme-surface); }
.module-summary-primary { background: var(--dh-photo-panel) !important; }

.payroll-editorial-hero {
    min-height: 300px;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: var(--dh-photo-border);
    background: var(--theme-surface);
}
.payroll-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 4.6vw, 62px);
    background: linear-gradient(135deg, var(--theme-surface), var(--dh-photo-panel));
}
.payroll-hero-copy h1 { font-size: clamp(2.25rem, 3.65vw, 4rem); text-wrap: balance; }
.payroll-hero-actions { justify-content: flex-start; margin-top: 28px; }
.payroll-hero-media { min-width: 0; min-height: 300px; overflow: hidden; }
.payroll-hero-media::before {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: clamp(52px, 8vw, 120px);
    background: linear-gradient(90deg, var(--dh-photo-panel), transparent);
    content: "";
    pointer-events: none;
}
.payroll-hero-media img { object-position: 48% center; }
.payroll-visual-fallback .payroll-hero-media { display: grid; place-content: center; padding: 32px; color: var(--theme-header-text); background: linear-gradient(135deg, var(--theme-primary-strong), var(--brand-primary)); }
.payroll-visual-fallback .payroll-hero-media span { position: relative; z-index: 3; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 680; line-height: 1.2; }

/* Digital Headquarters Phase 5.3 — canonical-token Appearance preview fidelity. */
.theme-option:hover .theme-preview { border-color: var(--brand-primary); }
.theme-option:has(input:checked) .theme-preview {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--theme-focus);
}
.theme-preview {
    height: 72px;
    grid-template-columns: 27% minmax(0, 1fr);
    grid-template-rows: 20px minmax(0, 1fr);
    border-color: var(--theme-border);
    background: var(--theme-workspace);
}
.theme-preview > .theme-preview-header {
    background: var(--theme-header);
    box-shadow: inset 0 -1px color-mix(in srgb, var(--brand-on-primary) 17%, transparent);
}
.theme-preview > .theme-preview-sidebar {
    padding: 8px 6px;
    background: var(--theme-sidebar);
    box-shadow: inset -1px 0 color-mix(in srgb, var(--brand-on-primary) 34%, transparent);
}
.theme-preview > .theme-preview-sidebar > i { height: 5px; background: var(--theme-border); }
.theme-preview > .theme-preview-sidebar > i:first-child {
    background: var(--theme-sidebar-active);
    box-shadow: -3px 0 0 var(--brand-primary);
}
.theme-preview > .theme-preview-workspace {
    padding: 7px;
    background: var(--theme-workspace);
}
.theme-preview > .theme-preview-workspace > b {
    border-color: var(--theme-border);
    background: var(--theme-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-primary-strong) 8%, transparent);
}

@media (max-width: 1180px) {
    .headquarters-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
    .headquarters-shortcuts .portal-shortcut-tile:has(.shortcut-thumbnail) { grid-template-columns: 62px 32px minmax(0, 1fr) auto; }
    .shortcut-thumbnail { width: 62px; }
    .payroll-editorial-hero { grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); }
}

@media (max-width: 840px) {
    .headquarters-hero { grid-template-columns: 1fr; }
    .headquarters-hero .portal-hero-media::before,
    .module-hero-visual::before,
    .payroll-hero-media::before { inset: 0 0 auto; width: auto; height: 56px; background: linear-gradient(180deg, var(--dh-photo-panel), transparent); }
    .headquarters-hero .portal-hero-media::before { inset: auto 0 0; background: linear-gradient(0deg, var(--dh-photo-panel), transparent); }
    .module-hero-visual { aspect-ratio: 16 / 7; }
    .payroll-editorial-hero { grid-template-columns: 1fr; }
    .payroll-hero-copy { padding: 42px 34px; }
    .payroll-hero-media { min-height: 220px; max-height: 260px; }
}

@media (max-width: 620px) {
    .headquarters-shortcuts .portal-shortcut-tile:has(.shortcut-thumbnail) { grid-template-columns: 64px 32px minmax(0, 1fr) auto; }
    .shortcut-thumbnail { width: 64px; height: 68px; }
    .module-hero-visual { aspect-ratio: 4 / 3; }
    .payroll-hero-copy { padding: 34px 22px; }
    .payroll-hero-media { min-height: 190px; max-height: 220px; }
    .theme-preview { height: 72px; }
}

@media (max-width: 430px) {
    .headquarters-hero .portal-hero-media { aspect-ratio: 4 / 3; min-height: 0; }
    .headquarters-hero .portal-hero-media img { object-position: 66% center; }
    .headquarters-shortcuts .portal-shortcut-tile:has(.shortcut-thumbnail) { grid-template-columns: 58px minmax(0, 1fr) auto; }
    .shortcut-thumbnail { width: 58px; height: 64px; }
    .headquarters-shortcuts .portal-shortcut-tile:has(.shortcut-thumbnail) .portal-shortcut-icon { display: none; }
    .feature-media { aspect-ratio: 4 / 3; min-height: 0; }
    .module-hero-visual { min-height: 0; max-height: none; }
    .payroll-hero-media { min-height: 180px; }
}

@media (max-width: 360px) {
    .headquarters-shortcuts .portal-shortcut-tile:has(.shortcut-thumbnail) { grid-template-columns: 52px minmax(0, 1fr) auto; }
    .shortcut-thumbnail { width: 52px; height: 60px; }
    .payroll-hero-copy { padding-inline: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .shortcut-thumbnail img, .dh-picture > img { transition: none; }
}

@media print {
    .shortcut-thumbnail, .headquarters-hero .portal-hero-media, .module-hero-visual, .payroll-hero-media,
    .feature-media, .compact-media, .story-media { display: none !important; }
    .headquarters-hero, .module-hero, .payroll-editorial-hero, .personnel-feature { grid-template-columns: 1fr; min-height: 0; }
    .headquarters-hero .portal-hero-content, .module-hero-copy, .payroll-hero-copy { padding: 18px; background: transparent; }
}

/* Digital Headquarters Phase 6 — calm, capable operational workspaces. */
:root {
    --operational-content-max: 1480px;
    --operational-reading-max: 760px;
    --operational-section-gap: clamp(20px, 2.4vw, 30px);
}

/* Deep routes share one bounded canvas while dense financial views retain width. */
.app-main-operational {
    width: 100%;
    max-width: var(--operational-content-max);
    justify-self: center;
}
.app-main-operational-dense { max-width: 1680px; }

/* Compact operational identity: theme-led accents, quiet readable surfaces. */
.operational-page-header,
.page-header.operational-page-header,
.record-header.operational-page-header,
.module-workspace-header.operational-page-header {
    min-height: 0;
    align-items: center;
    margin-bottom: 18px;
    padding: 19px clamp(18px, 2.2vw, 28px);
    overflow: visible;
    border: 1px solid var(--theme-border);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-surface);
    background: linear-gradient(105deg, var(--surface-selected), var(--surface-primary) 68%);
    box-shadow: none;
    color: var(--text-primary);
}
.operational-page-header::before,
.operational-page-header::after { display: none !important; }
.operational-page-header :is(.eyebrow, .portal-eyebrow) {
    margin-bottom: 6px;
    color: var(--brand-primary);
}
.operational-page-header :is(h1, h2) {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-family: var(--font-application);
    font-size: clamp(1.6rem, 2.25vw, 2.2rem);
    font-weight: 720;
    line-height: 1.12;
    letter-spacing: -.025em;
}
.operational-page-header :is(.page-header-copy, .module-workspace-copy) > p:last-child {
    max-width: var(--operational-reading-max);
    margin: 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.55;
}
.operational-page-header .record-metadata-strip,
.operational-page-header .object-meta,
.operational-page-header .object-assignment-summary span { color: var(--text-secondary); }
.operational-page-header .button-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}
.operational-page-header .button-primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-on-primary);
}
.operational-page-header .button-secondary {
    background: var(--surface-primary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.operational-page-header .button-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
}
.operational-page-header :focus-visible {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--theme-focus);
}

/* The archive directory is an operational history view, not a second hero. */
.archived-directory-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 24px;
}
.archived-directory-header h1 { font-size: clamp(1.65rem, 2.4vw, 2.3rem); }
.archived-directory-header > .button { grid-column: auto; }
.archived-directory-header .archive-index-mark {
    min-width: 138px;
    padding-left: 20px;
    border-left: 1px solid var(--border-default);
}
.archived-directory-header .archive-index-mark strong {
    margin: 5px 0 3px;
    color: var(--text-primary);
    font-size: 1.75rem;
}
.archive-workspace { margin-top: var(--operational-section-gap); }

/* Directory controls read as one deliberate toolbar across modules. */
.operational-toolbar {
    border-color: var(--border-subtle);
    background: var(--surface-quiet);
    box-shadow: inset 0 1px 0 var(--surface-primary);
}
.filter-form.operational-toolbar { padding: 13px 15px; }
.operational-toolbar :is(input, select) { max-width: 100%; }
.operational-toolbar .search-field { flex-basis: 260px; }
.reference-table-toolbar.operational-toolbar,
.payroll-workspace-toolbar.operational-toolbar { border-bottom-color: var(--border-subtle); }

/* Enterprise tables favor scanability and resilient content over decorative air. */
:is(.list-report-table, .reference-master-table, .live-attendance-table, .payroll-run-table) tbody tr { height: auto; }
:is(.list-report-table, .reference-master-table, .live-attendance-table, .payroll-run-table) :is(th, td) {
    vertical-align: middle;
    overflow-wrap: anywhere;
}
:is(.list-report-table, .reference-master-table, .live-attendance-table, .payroll-run-table) thead th {
    line-height: 1.3;
    vertical-align: bottom;
}
:is(.payroll-period-table, .payroll-run-table, .payroll-sheet-table, .payslip-financial-table) .money-cell,
:is(.payroll-period-table, .payroll-run-table, .payroll-sheet-table, .payslip-financial-table) .number-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.table-scroll:focus-visible {
    border-color: var(--brand-primary) !important;
    box-shadow: inset 0 0 0 2px var(--brand-primary), 0 0 0 3px var(--theme-focus);
}
.reason-cell { display: block; min-width: 180px; max-width: 340px; white-space: normal; }

/* System-supplied values remain authoritative and readable, never washed out. */
.app-main-operational :is(input, textarea)[readonly],
.app-main-operational .readonly-field,
.app-main-operational .payroll-encoding-field.is-calculated {
    background: var(--surface-readonly);
    color: var(--text-primary);
    opacity: 1;
}

/* Native dialogs remain recoverable at every supported viewport height. */
:is(.theme-dialog, .delete-dialog, .device-revoke-dialog) {
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
}
.theme-dialog form,
.delete-dialog form { max-height: calc(100dvh - 24px); overflow-y: auto; }
.theme-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 12px;
    background: var(--surface-dialog);
}

/* The miniature shell uses the canonical header as a real full-width band. */
.theme-preview {
    grid-template-columns: 25% minmax(0, 1fr);
    grid-template-rows: 17px minmax(0, 1fr);
}
.theme-preview > .theme-preview-header {
    grid-column: 1 / -1;
    width: 100%;
}

@media (max-width: 1024px) {
    .operational-page-header { gap: 18px; }
    .operational-page-header .record-action-rail { max-width: 46%; }
    .operational-toolbar { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .app-main-operational { max-width: none; }
    .operational-page-header,
    .page-header.operational-page-header,
    .record-header.operational-page-header,
    .module-workspace-header.operational-page-header { display: grid; align-items: start; }
    .operational-page-header .record-action-rail { width: 100%; max-width: none; }
    .archived-directory-header { grid-template-columns: minmax(0, 1fr) auto; }
    .archived-directory-header > .button { grid-column: 1 / -1; justify-self: start; }
    .operational-toolbar > :is(label, button, .button) { min-width: min(220px, 100%); }
}

@media (max-width: 430px) {
    .operational-page-header,
    .page-header.operational-page-header,
    .record-header.operational-page-header,
    .module-workspace-header.operational-page-header {
        padding: 16px 14px;
        border-radius: var(--radius-control);
    }
    .operational-page-header :is(h1, h2) { font-size: 1.5rem; }
    .archived-directory-header { grid-template-columns: 1fr; }
    .archived-directory-header .archive-index-mark {
        min-width: 0;
        padding: 13px 0 0;
        border-top: 1px solid var(--border-default);
        border-left: 0;
    }
    .archived-directory-header > .button { grid-column: 1; width: 100%; }
    .operational-toolbar > :is(label, button, .button) { width: 100%; min-width: 0; }
    .theme-dialog .dialog-actions { padding-bottom: 2px; }
}

@media (max-width: 390px) {
    .operational-page-header { gap: 14px; }
    .payroll-workspace-toolbar.operational-toolbar { padding-inline: 13px; }
}

@media (max-width: 360px) {
    .operational-page-header,
    .page-header.operational-page-header,
    .record-header.operational-page-header,
    .module-workspace-header.operational-page-header { padding-inline: 12px; }
    .operational-page-header :is(h1, h2) { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .operational-page-header,
    .operational-toolbar,
    .table-scroll { scroll-behavior: auto; transition: none; }
}

@media print {
    .operational-page-header { border-color: var(--border-default); background: transparent; color: var(--text-primary); }
    .operational-toolbar { display: none !important; }
}

/* Personnel Portal Phase 1 — dossier foundation */
.personnel-portal-header { overflow: hidden; }
.personnel-portal-header::after { width: min(38%, 420px); opacity: .42; }
.personnel-portal-identity { position: relative; z-index: 1; }
.personnel-portal-avatar {
    width: 68px;
    height: 76px;
    display: grid;
    align-content: center;
    gap: 3px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
}
.personnel-portal-avatar > span { font-size: 1.35rem; font-weight: 780; letter-spacing: .04em; }
.personnel-portal-avatar > small { color: var(--text-muted); font-size: .48rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.personnel-portal-avatar.has-photo { overflow: hidden; padding: 0; }
.personnel-portal-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.personnel-portal-header .object-profile { grid-template-columns: 68px minmax(0, 1fr); }
.personnel-portal-header .object-assignment-summary,
.personnel-portal-header .object-key-facts { margin-left: 84px; }
.personnel-preferred-name { margin: -1px 0 8px; color: var(--text-secondary); font-size: .76rem; }
.personnel-portal-nav { scrollbar-width: thin; }
.personnel-portal-content { padding-inline: clamp(18px, 2.5vw, 32px); }
.personnel-overview { padding-top: clamp(28px, 3vw, 40px); }
.personnel-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.personnel-overview-card { position: relative; min-width: 0; min-height: 150px; display: flex; flex-direction: column; padding: 22px; border-left: 1px solid var(--border-subtle); background: var(--surface-primary); }
.personnel-overview-card:first-child { border-left: 0; background: var(--surface-editorial); }
.personnel-overview-card .portal-card-index { color: var(--brand-primary); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.personnel-overview-card p { margin: auto 0 7px; color: var(--text-muted); font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.personnel-overview-card strong { overflow-wrap: anywhere; color: var(--text-primary); font-size: clamp(1rem, 1.4vw, 1.28rem); line-height: 1.2; }
.personnel-overview-card small { margin-top: 7px; color: var(--text-muted); font-size: .68rem; line-height: 1.45; }
.personnel-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--border-subtle); }
.personnel-profile-grid > article { min-width: 0; padding: clamp(18px, 2.3vw, 28px); background: var(--surface-primary); }
.personnel-profile-grid > article:nth-child(2) { background: var(--surface-quiet); }
.personnel-profile-grid h3 { margin: 0 0 20px; color: var(--brand-navy); font-size: 1rem; }
.personnel-profile-grid .object-detail-list { max-width: none; }
.personnel-attendance-panel { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-quiet); }
.personnel-attendance-panel > div { min-width: 0; display: flex; align-items: flex-start; gap: 14px; }
.personnel-attendance-panel strong { color: var(--text-primary); }
.personnel-attendance-panel p { max-width: 680px; margin: 5px 0 0; color: var(--text-secondary); font-size: .76rem; line-height: 1.55; }
.attendance-readiness-mark { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 4px; border: 3px solid var(--surface-primary); border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }
.personnel-attendance-panel .button { flex: 0 0 auto; }

@media (max-width: 1024px) {
    .personnel-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .personnel-overview-card:nth-child(3) { border-left: 0; }
    .personnel-overview-card:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 768px) {
    .personnel-portal-header .object-header-title-row { display: grid; }
    .personnel-portal-header .record-action-rail { width: 100%; display: flex; flex-wrap: wrap; }
    .personnel-portal-header .object-assignment-summary,
    .personnel-portal-header .object-key-facts { margin-left: 0; }
    .personnel-portal-header .object-key-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .personnel-profile-grid { grid-template-columns: 1fr; }
    .personnel-overview-card { min-height: 132px; }
}

@media (max-width: 430px) {
    .personnel-portal-header .object-profile { grid-template-columns: 54px minmax(0, 1fr); align-items: start; }
    .personnel-portal-avatar { width: 54px; height: 62px; }
    .personnel-portal-avatar > span { font-size: 1.05rem; }
    .personnel-portal-header .object-title-copy h1 { white-space: normal; overflow-wrap: anywhere; }
    .personnel-portal-header .record-action-rail { display: grid; grid-template-columns: 1fr; }
    .personnel-portal-header .record-action-rail .button { width: 100%; }
    .personnel-portal-header .object-key-facts { grid-template-columns: 1fr; gap: 12px; }
    .personnel-overview-grid { grid-template-columns: 1fr; }
    .personnel-overview-card { min-height: 118px; border-left: 0; border-top: 1px solid var(--border-subtle); }
    .personnel-overview-card:first-child { border-top: 0; }
    .personnel-attendance-panel { align-items: stretch; flex-direction: column; }
    .personnel-attendance-panel .button { width: 100%; }
}

@media (max-width: 360px) {
    .personnel-portal-content { padding-inline: 12px; }
    .personnel-overview-card, .personnel-profile-grid > article, .personnel-attendance-panel { padding: 16px; }
}

/* Payroll navigation recovery: keep every authorized module reachable in the shell. */
@media (min-width: 841px) {
    .app-sidebar { min-height: 0; gap: 16px; }
    .app-sidebar > nav {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }
}

@media (max-width: 840px) {
    .app-sidebar {
        max-height: calc(100dvh - 68px);
        overflow-x: clip;
        overflow-y: auto;
    }
    .app-sidebar > nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        min-width: 0;
        overflow: visible;
    }
    .app-sidebar .nav-group { display: contents; }
    .app-sidebar .nav-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .app-sidebar nav a {
        min-width: 0;
        justify-content: center;
        gap: 7px;
        padding-inline: 8px;
    }
    .app-sidebar nav a span {
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }
}

@media (max-width: 620px) {
    .app-sidebar > nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
    .app-sidebar > nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Final Payroll corrections — Issue A: every Payroll Detail layer is independently opaque. */
.payroll-detail-dialog,
.payroll-detail-content,
.payroll-detail-fragment,
.payroll-detail-fragment > form,
.payroll-detail-body,
.payroll-detail-loading,
.payroll-detail-footer {
    background: var(--surface-dialog);
}
.payroll-detail-content,
.payroll-detail-fragment,
.payroll-detail-fragment > form,
.payroll-sticky-summary,
.payroll-value-legend,
.payroll-detail-footer {
    width: 100%;
    min-width: 0;
}
.payroll-detail-header {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
}
.payroll-sticky-summary { background: var(--border-subtle); }
.payroll-sticky-summary > span,
.payroll-encoding-section,
.payroll-encoding-grid,
.payroll-encoding-field,
.component-list,
.component-row,
.payroll-reference-grid,
.payroll-encoding-summary,
.payroll-encoding-summary dl,
.payroll-encoding-summary dl > div {
    background: var(--surface-dialog);
}
.payroll-value-legend,
.payroll-attendance-status,
.payroll-detail-fragment.is-read-only .payroll-read-only-banner {
    background: var(--surface-quiet);
}
.payroll-warning-details {
    background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface-dialog));
}
.payroll-encoding-field.is-overridden {
    background: color-mix(in srgb, var(--warning-soft) 35%, var(--surface-dialog));
}
.payroll-encoding-field.is-source-derived { background: var(--surface-dialog); }
.payroll-encoding-field.is-calculated { background: var(--surface-readonly); }
.payroll-encoding-field.is-missing { background: var(--warning-soft); }
.payroll-encoding-field > input,
.payroll-reference-grid :is(input, textarea) {
    background: var(--surface-dialog);
}
.payroll-detail-header .button-tertiary,
.payroll-detail-header .icon-close {
    border-color: var(--surface-dialog);
    background: var(--surface-dialog);
    color: var(--theme-primary);
}
.payroll-detail-header .button-tertiary:hover,
.payroll-detail-header .icon-close:hover { background: var(--surface-quiet); }
.payroll-save-state,
.payroll-warning-count {
    background: color-mix(in srgb, var(--surface-dialog) 18%, var(--theme-primary));
}
.payroll-save-state.is-read-only {
    background: var(--surface-dialog);
    color: var(--theme-primary);
}
.payroll-value-legend.is-read-only > strong {
    color: var(--text-secondary);
    font-size: .61rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Backdrop dimming remains a separate native-dialog layer. */
.payroll-detail-dialog::backdrop {
    background: color-mix(in srgb, var(--text-primary) 54%, transparent);
}

/* Owner presentation workflow: prominent, ordered and permission aware. */
.presentation-workflow{margin:0 0 28px;container-type:inline-size}
.workflow-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}
.workflow-heading h2{font-size:clamp(22px,2.2vw,32px);line-height:1.15;margin:4px 0;color:var(--theme-primary,#071b58)}
.workflow-heading>p{max-width:240px;font-size:13px;color:var(--text-secondary,#526174);margin:0}
.workflow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.workflow-steps li{min-width:0;display:flex}
.workflow-step{display:flex;flex-direction:column;flex:1;min-width:0;gap:12px;padding:18px 16px;background:#fff;border:1px solid var(--theme-border,#cdd4df);border-top:3px solid var(--theme-primary,#071b58);border-radius:12px;color:#13213b;text-decoration:none;box-shadow:0 3px 12px #14254b08;transition:transform .16s,box-shadow .16s}
a.workflow-step:hover{transform:translateY(-3px);box-shadow:0 8px 20px #14254b18;border-color:var(--theme-primary,#071b58)}
.workflow-step:focus-visible{outline:3px solid var(--theme-accent,#075aa5);outline-offset:3px}
.workflow-step-top{display:flex;align-items:center;gap:10px;color:var(--theme-primary,#071b58)}
.workflow-number{font-size:12px;font-weight:800;letter-spacing:.08em}
.workflow-step svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.workflow-arrow{margin-left:auto;font-size:20px}.workflow-step strong{font-size:16px;line-height:1.25}.workflow-step small{font-size:12px;line-height:1.5;color:#536074}.workflow-step-unavailable{background:#edf0f5;border-top-color:#8b96a7}
.workflow-picker{background:#fff;border:1px solid var(--theme-border,#d5dbe4);border-radius:12px;padding:24px;margin-top:24px}.workflow-picker table{width:100%}.workflow-picker td,.workflow-picker th{padding:16px;text-align:left}.workflow-picker td{border-top:1px solid #e5e8ee}.workflow-picker .operational-toolbar{display:flex;gap:14px;align-items:end;margin-bottom:24px}.workflow-picker label{display:grid;gap:8px;flex:1}.workflow-picker input,.workflow-picker select{width:100%;min-height:44px}.workflow-report-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0}.workflow-report-summary h2{overflow-wrap:anywhere}
@media(max-width:1050px){.workflow-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.workflow-heading>p{display:none}}
@media(max-width:620px){.workflow-steps{grid-template-columns:1fr}.workflow-step{padding:16px;display:grid;grid-template-columns:65px 1fr;gap:5px 14px}.workflow-step-top{grid-row:span 2}.workflow-arrow{display:none}.workflow-step strong{font-size:16px}.workflow-picker{padding:14px}.workflow-picker .operational-toolbar,.workflow-report-summary{flex-direction:column;align-items:stretch}.workflow-picker td,.workflow-picker th{padding:12px}.workflow-heading h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.workflow-step{transition:none}a.workflow-step:hover{transform:none}}
.enrollment-picker table{min-width:0;table-layout:fixed}
.enrollment-picker th:first-child{width:35%}.enrollment-picker th:last-child{width:34%}
.enrollment-person-row{cursor:pointer}.enrollment-person-row:hover{background:#f0f5fc}
.enrollment-person-row:focus-visible{outline:2px solid #245b9e;outline-offset:-2px}
.enrollment-person-name{font-weight:700;text-decoration:none}.enrollment-person-name:hover{text-decoration:underline}
.enrollment-picker td{overflow-wrap:anywhere}.enrollment-picker .button{white-space:normal}