:root{--navy:#102b4e;--blue:#2f6fe4;--green:#159875;--gold:#c98425;--ink:#172840;--muted:#6d7c90;--line:#e1e8f1;--paper:#fff;--bg:#f3f7fb;--shadow:0 18px 50px rgba(22,51,88,.10)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}.portal-header{height:72px;padding:0 max(22px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.portal-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}.portal-brand>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--navy);color:#fff;font-weight:800}.portal-brand strong,.portal-brand small{display:block}.portal-brand strong{font-size:16px}.portal-brand small{font-size:12px;color:var(--muted);margin-top:2px}.header-action{border:1px solid var(--line);background:#fff;color:var(--blue);border-radius:9px;padding:9px 13px;font-size:14px}main{width:min(1120px,calc(100% - 34px));margin:0 auto}.login-shell{min-height:calc(100vh - 132px);display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}.login-copy{padding-left:20px}.eyebrow{display:block;font-size:12px;letter-spacing:.15em;color:var(--blue);font-weight:800}.login-copy h1{font-size:48px;line-height:1.2;margin:18px 0;color:var(--navy);letter-spacing:-.04em}.login-copy p{font-size:16px;line-height:1.8;color:var(--muted);max-width:520px}.privacy-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.privacy-points span{padding:8px 11px;background:#e9f7f2;border-radius:30px;color:#177c61;font-size:13px}.login-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}.login-card-head>span{color:var(--blue);font-size:12px;font-weight:800}.login-card-head h2{font-size:28px;margin:8px 0}.login-card-head p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 24px}.login-card label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#53647b;margin:16px 0}.login-card input{height:48px;border:1px solid #cad5e3;border-radius:10px;padding:0 13px;font-size:16px;outline:none}.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,228,.1)}.login-button{width:100%;height:50px;border:0;border-radius:10px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;margin-top:8px}.login-button:disabled{opacity:.6}.form-message{min-height:20px;color:#c34852;font-size:13px;text-align:center}.login-help{font-size:12px;color:var(--muted);text-align:center;border-top:1px solid var(--line);padding-top:16px}.profile-shell{padding:30px 0 60px}.welcome-card{background:linear-gradient(120deg,#102b4e,#174d7c);border-radius:18px;color:#fff;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}.welcome-card .eyebrow{color:#95c3ff}.welcome-card h1{font-size:30px;margin:8px 0}.welcome-card p{font-size:14px;color:#c6d6e8;margin:0}.status-pill{border-radius:30px;background:#dff7ef;color:#147a5f;padding:8px 14px;font-size:14px;font-weight:800}.status-pill.off{background:#fff0f1;color:#b9434d}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}.info-card,.section-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(22,51,88,.05)}.info-card{padding:22px;position:relative}.card-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#e9f7f2;color:var(--green);font-weight:800;margin-bottom:24px}.card-icon.blue{background:#edf3ff;color:var(--blue)}.card-icon.gold{background:#fff3e5;color:var(--gold)}.info-card small{display:block;font-size:12px;color:var(--muted)}.info-card strong{display:block;font-size:18px;margin-top:7px;line-height:1.5}.info-card strong b{font-size:25px;color:var(--blue)}.info-card p{font-size:12px;color:var(--muted);margin:5px 0 0}.section-card{padding:24px;margin-top:14px}.section-head{display:flex;justify-content:space-between;align-items:center}.section-head span{font-size:11px;letter-spacing:.13em;color:#8ca0b8;font-weight:800}.section-head h2{font-size:19px;margin:4px 0}.section-head>strong{color:var(--blue);font-size:14px}.section-head>small{color:var(--muted)}.term-line{display:grid;grid-template-columns:1fr minmax(60px,1.5fr) 1fr;align-items:center;margin-top:22px}.term-line i{height:2px;background:linear-gradient(90deg,var(--blue),#b9ceef);position:relative}.term-line i:before,.term-line i:after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--blue);transform:translateY(-50%)}.term-line i:before{left:0}.term-line i:after{right:0}.term-line div:last-child{text-align:right}.term-line small{display:block;color:var(--muted);font-size:12px}.term-line strong{display:block;margin-top:6px;font-size:16px}.term-note,.benefit-note{font-size:13px;color:var(--muted);background:#f7f9fc;border-radius:8px;padding:10px 12px;margin:18px 0 0}.benefit-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.benefit-list span{padding:9px 12px;border-radius:8px;background:#eaf7f3;color:#15765c;font-size:14px}.benefit-list .empty{background:#f3f5f8;color:var(--muted)}.hours-list{margin-top:16px}.hours-row{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:10px;align-items:center;padding:13px 4px;border-top:1px solid var(--line)}.hours-row:first-child{border-top:0}.hours-row small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.hours-row strong{font-size:14px}.hours-row .hours-total{color:var(--blue)}.empty-hours{color:var(--muted);font-size:14px;text-align:center;padding:28px 0}.profile-actions{text-align:center;margin-top:24px}.profile-actions button{border:1px solid #d5dde8;background:#fff;border-radius:9px;padding:10px 20px;color:#5a6980}.profile-actions p{font-size:12px;color:#8996a8}footer{text-align:center;color:#8a98aa;font-size:12px;padding:20px}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(47,111,228,.25);outline-offset:2px}
@media(max-width:780px){.portal-header{padding:0 17px}.login-shell{grid-template-columns:1fr;gap:24px;padding:40px 0}.login-copy{padding:0}.login-copy h1{font-size:35px}.login-card{padding:25px}.info-grid{grid-template-columns:1fr}.welcome-card{align-items:flex-start;padding:24px}.welcome-card h1{font-size:24px}.welcome-card p{max-width:220px;line-height:1.6}.hours-row{grid-template-columns:1.2fr 1fr 1fr}.hours-row div:nth-child(4),.hours-row div:nth-child(5){display:none}}
@media(max-width:420px){main{width:min(100% - 24px,1120px)}.portal-brand small{display:none}.login-copy h1{font-size:31px}.privacy-points span{font-size:12px}.welcome-card{flex-direction:column;gap:18px}.term-line{grid-template-columns:1fr 50px 1fr}.section-card{padding:19px}.hours-row{font-size:12px}}
[hidden]{display:none!important}

.login-card .skip-code { display:flex; align-items:center; gap:8px; font-size:13px; }
.login-card .skip-code input { width:18px; height:18px; margin:0; }

.confirmation-card {padding:18px;margin:14px 0;border:1px solid #dce3ec;border-radius:12px;overflow-wrap:anywhere}.confirmation-card button{padding:9px 14px;margin:6px;border:1px solid #d6deeb;background:#eff5ff;border-radius:8px;color:#214676}.confirmation-card label{display:block;margin-top:16px}.confirmation-card textarea{display:block;width:100%;padding:12px;margin:12px 0;border:1px solid #d6deeb;border-radius:8px}.confirmation-card p{line-height:1.8}

.chat-panel{margin-top:22px;padding:22px}.chat-messages{height:340px;overflow-y:auto;background:#f6f8fc;border:1px solid #e0e5ef;border-radius:12px;padding:16px}.chat-message{padding:12px;margin:10px 0;border-radius:10px;background:white;overflow-wrap:anywhere}.chat-message.finance{border-left:3px solid #3767de}.chat-message.employee{border-left:3px solid #219d84}.chat-message.system{background:#edf2fb;color:#526480}.chat-message p{white-space:pre-wrap;margin:6px 0}.chat-message small{font-size:12px;color:#748294}.chat-compose textarea{display:block;width:100%;min-height:80px;border:1px solid #d9e0ec;border-radius:8px;padding:12px;margin-top:8px;font:inherit}.chat-compose button{background:#3767de;color:white;border:0;border-radius:8px;padding:10px 22px;margin-top:10px}.chat-hints{margin:12px 0}.chat-suggestion{display:block;text-align:left;background:#f3f7ff;border:1px solid #dde5f5;border-radius:8px;padding:8px;margin:6px 0;color:#35527e;font-size:12px}.chat-status{color:#287865;font-size:13px}.chat-person{max-width:100%;padding:10px}

.smart-shortcuts{padding:16px 20px;margin-bottom:20px;border:1px solid #dce5f4;border-radius:14px;background:linear-gradient(115deg,#f0f5ff,#fff)}.smart-shortcuts>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.smart-shortcuts small{font-size:12px;color:#77859a}.shortcut-edit{margin-left:auto;background:transparent;border:0;color:#3863b8;cursor:pointer}.shortcut-items{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.shortcut-items button{padding:9px 14px;background:white;color:#304c7a;border:1px solid #d9e3f3;border-radius:9px;cursor:pointer}.shortcut-items button.pinned{color:#285fc4;background:#e9f1ff}.shortcut-message{font-size:12px;color:#aa413c;margin:5px 0}.shortcut-items button:hover{border-color:#4876d9}
.employee-task-summary{background:#edf4ee;color:#245e55;padding:14px;border-radius:10px;font-weight:700;margin:14px 0}.employee-task-tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.employee-task-tabs button{padding:10px 14px;border:1px solid #dce7de;border-radius:8px;background:white;color:#476750}.employee-task-tabs button.active{background:#245e55;color:#fff}.portal-header{background:#245e55}.welcome-card{background:linear-gradient(120deg,#245e55,#36786b)}

/* Specific, accessible optional explanations; never hides status, warnings or fields. */
.ui-explanation { margin: .35rem 0; max-width: 100%; font-size: .875rem; line-height: 1.55; }
.ui-explanation > summary { cursor: pointer; display: list-item; padding: .45rem .15rem; min-height: 44px; box-sizing: border-box; color: inherit; font-weight: 600; }
.ui-explanation > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.ui-explanation > p { margin: .35rem 0 .65rem; overflow-wrap: anywhere; }
.daily-clerk-note > p { margin: .25rem 0; }

/* Reviewed optional hints: native details preserves keyboard and no-JS access. */
details.ui-hint-disclosure{margin:0;max-width:100%;min-width:0;font-size:12px;line-height:1.5}
details.ui-hint-disclosure>summary{width:fit-content;max-width:100%;min-height:44px;box-sizing:border-box;padding:10px 4px;line-height:24px;font-weight:500;overflow-wrap:anywhere}
details.ui-hint-disclosure[open]{margin-bottom:6px}
details.ui-hint-disclosure>p{margin:4px 0 8px;overflow-wrap:anywhere}
.ui-hint-heading{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;min-width:0}
.ui-hint-heading>h3{margin:0}
.ui-hint-heading>details.ui-hint-disclosure[open]{flex-basis:100%}