/* WizClock design tokens: generated from the WizClock Design System tokens.json. Light is the default; dark follows data-theme or the phone setting. */
:root{color-scheme:light;--bg:#F7F2EA;--surface:#FFFDF9;--surface-sunken:#EDE6DA;--border:#E2D8CA;--border-strong:#8E8172;--scrim:rgba(36, 26, 18, 0.56);--ink:#2B221B;--ink-muted:#5F5348;--ink-disabled:#5C5045;--ink-inverse:#FFFDF9;--brand:#A9482A;--brand-pressed:#8A3920;--on-brand:#FFFFFF;--brand-soft:#F8E3D7;--brand-ink:#7A321C;--focus:#A9482A;--success-ink:#2D682B;--success-soft:#E2EFD8;--success:#3B8738;--warning-ink:#765000;--warning-soft:#FAEBC0;--warning:#A87500;--error-ink:#A01B47;--error-soft:#FADDE6;--error:#C4295B;--pending-ink:#22508F;--pending-soft:#DFE9F7;--pending:#2F67B8;--leave-ink:#5F3F98;--leave-soft:#EDE5F7;--leave:#7B57C0;--neutral-soft:#EDE6DA;--elevation-0:none;--elevation-1:0 1px 2px rgba(20, 32, 26, 0.10), 0 4px 12px rgba(20, 32, 26, 0.08);--elevation-2:0 -2px 16px rgba(20, 32, 26, 0.14);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--tap-min:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-sheet:24px;--radius-full:999px;--font-sans:"Atkinson Hyperlegible Next", "Noto Sans Bengali", system-ui, sans-serif;--text-display-clock:700 44px/52px var(--font-sans);--text-display-amount:700 30px/36px var(--font-sans);--text-title-lg:700 20px/26px var(--font-sans);--text-title:700 17px/24px var(--font-sans);--text-body-strong:600 15px/22px var(--font-sans);--text-body:400 15px/22px var(--font-sans);--text-body-sm:400 13px/18px var(--font-sans);--text-label:700 12px/16px var(--font-sans)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#1A1612;--surface:#24201B;--surface-sunken:#332C26;--border:#3D352E;--border-strong:#85796C;--scrim:rgba(0, 0, 0, 0.64);--ink:#F3ECE3;--ink-muted:#BDB1A4;--ink-disabled:#ABA094;--ink-inverse:#1A1612;--brand:#EE9B74;--brand-pressed:#F4B394;--on-brand:#2A140A;--brand-soft:#46291C;--brand-ink:#F6C4AB;--focus:#F6C4AB;--success-ink:#A0D592;--success-soft:#22331D;--success:#78C26A;--warning-ink:#F0C866;--warning-soft:#3A2E12;--warning:#DBA637;--error-ink:#FFA0BB;--error-soft:#43202B;--error:#EE6A8F;--pending-ink:#A6C4F2;--pending-soft:#1F2B40;--pending:#6E9BE0;--leave-ink:#CDB9F1;--leave-soft:#30263F;--leave:#A88BE0;--neutral-soft:#332C26;--elevation-1:0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);--elevation-2:0 -2px 16px rgba(0, 0, 0, 0.6)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#1A1612;--surface:#24201B;--surface-sunken:#332C26;--border:#3D352E;--border-strong:#85796C;--scrim:rgba(0, 0, 0, 0.64);--ink:#F3ECE3;--ink-muted:#BDB1A4;--ink-disabled:#ABA094;--ink-inverse:#1A1612;--brand:#EE9B74;--brand-pressed:#F4B394;--on-brand:#2A140A;--brand-soft:#46291C;--brand-ink:#F6C4AB;--focus:#F6C4AB;--success-ink:#A0D592;--success-soft:#22331D;--success:#78C26A;--warning-ink:#F0C866;--warning-soft:#3A2E12;--warning:#DBA637;--error-ink:#FFA0BB;--error-soft:#43202B;--error:#EE6A8F;--pending-ink:#A6C4F2;--pending-soft:#1F2B40;--pending:#6E9BE0;--leave-ink:#CDB9F1;--leave-soft:#30263F;--leave:#A88BE0;--neutral-soft:#332C26;--elevation-1:0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);--elevation-2:0 -2px 16px rgba(0, 0, 0, 0.6)}}
/* Atkinson Hyperlegible Next is not bundled: the server only serves whitelisted files, so the stack falls back to the phone's system font. */

/* Legacy aliases: keep screens not yet redesigned readable on the new palette. Removed once every screen uses the tokens directly. */
:root{--accent:var(--brand);--accent-hover:var(--brand-pressed);--accent-soft:var(--brand-soft);--accent-text:var(--brand-ink);--page:var(--bg);--surface-alt:var(--surface-sunken);--muted:var(--ink-muted);--line:var(--border);--header:var(--ink);--positive:var(--success-ink);--positive-bg:var(--success-soft);--warning-bg:var(--warning-soft);--danger:var(--error-ink);--danger-bg:var(--error-soft);font-family:var(--font-sans);font-size:16px;line-height:1.55;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:var(--page)}a{color:var(--accent-text);text-underline-offset:3px}button,input,select,textarea{font:inherit}button,input,select,textarea,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}::selection{background:var(--accent-soft);color:var(--ink)}
header{display:flex;align-items:center;gap:24px;min-height:76px;padding:15px max(24px,calc((100vw - 1160px)/2));background:var(--header);color:#f7f5ff;border-bottom:3px solid var(--accent)}.brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;color:#fff;text-decoration:none;font-size:1.5rem;font-weight:800;letter-spacing:-.055em}.brand:before{content:"";display:block;width:35px;height:35px;background:url('/icon.svg') center/contain no-repeat}.brand:after{content:"";height:7px;width:7px;background:#cab8ff;border-radius:50%;align-self:flex-start;margin:7px 0 0 -5px}#identity{font-size:.84rem;color:#d9d5e7;max-width:45%;overflow-wrap:anywhere}header button.quiet{color:#f2edff;background:#373346;border-color:#534a68}
main{max-width:1208px;margin:0 auto;padding:30px 24px 38px}h1,h2,h3{color:var(--ink);font-weight:700}h1{font-size:clamp(1.85rem,3.3vw,2.6rem);line-height:1.15;letter-spacing:-.055em;margin:6px 0 18px}h2{font-size:1.16rem;letter-spacing:-.025em;line-height:1.35;margin:0 0 12px}h3{font-size:.98rem;margin:22px 0 10px}p{margin:0 0 14px}.eyebrow{display:inline-block;color:var(--accent-text);font-size:.71rem;line-height:1.4;letter-spacing:.11em;font-weight:750;margin-bottom:5px}.muted,small,footer{color:var(--muted);font-size:.86rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin:0 0 20px;min-width:0}.card>:last-child{margin-bottom:0}.page-heading,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.page-heading{margin-bottom:4px}.section-heading{margin-bottom:12px}.section-heading h2{margin:0}.banner{padding:11px 15px;border-left:3px solid #bf9745;background:var(--warning-bg);border-radius:0 7px 7px 0;color:var(--warning);font-size:.82rem;margin:0 0 22px}
button{min-height:43px;padding:10px 17px;border:1px solid transparent;border-radius:8px;background:var(--accent);color:#fff;font-size:.88rem;font-weight:650;line-height:1.35;transition:background .15s,border-color .15s,box-shadow .15s}button:hover:not(:disabled){background:var(--accent-hover)}button.secondary,button.quiet{background:var(--surface-alt);color:var(--ink);border-color:var(--line)}button.secondary:hover:not(:disabled),button.quiet:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}button+button{margin-left:5px}form>button{margin-top:12px}button[aria-busy="true"]{cursor:progress}
.tabs{display:flex;flex-wrap:wrap;gap:5px;padding:5px;margin:0 0 22px;border-radius:10px;background:var(--surface-alt)}.tabs button{margin:0;background:transparent;color:var(--muted);padding:9px 14px;border-radius:7px}.tabs button:hover:not(:disabled){color:var(--ink);background:var(--surface)}.tabs button.selected{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 4px #18102313}nav.tabs{border-radius:0;padding:0 0 8px;gap:8px;background:transparent;border-bottom:1px solid var(--line)}nav.tabs button{border-radius:7px;padding:10px 15px;color:var(--muted)}nav.tabs button.selected{background:var(--accent);color:#fff;box-shadow:none}
label{display:block;font-weight:600;font-size:.86rem;margin:12px 0}input,select,textarea{display:block;width:100%;min-width:0;min-height:44px;margin-top:6px;padding:10px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:7px;font-size:.94rem;line-height:1.4}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}textarea{resize:vertical;min-height:86px}input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}input[type="file"]{padding:8px;font-size:.85rem}input[type="file"]::file-selector-button{padding:7px 10px;background:var(--accent-soft);color:var(--accent-text);border:0;border-radius:4px;margin-right:10px;font:inherit}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}.toolbar{display:flex;align-items:end;gap:18px;margin:0 0 20px}.toolbar label{width:100%;max-width:340px;margin:0}.toolbar input,.toolbar select{background:var(--surface)}fieldset{min-width:0;border:1px solid var(--line);border-radius:9px;margin:22px 0;padding:17px}legend{color:var(--ink);font-size:.87rem;font-weight:700;padding:0 7px}.weekdays{display:flex;flex-wrap:wrap;gap:8px}.weekdays label{display:flex;gap:7px;align-items:center;background:var(--surface-alt);border:1px solid var(--line);border-radius:6px;padding:8px 11px;margin:0;cursor:pointer}.weekdays label:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}.weekdays input{width:17px;height:17px;min-height:17px;margin:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:20px;overflow:hidden}.stats .card{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;margin:0;padding:20px}.stats .card:last-child{border-right:0}.stats span{display:block;font-size:.81rem;color:var(--muted)}.stats strong{display:block;font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.2;font-weight:750;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:10px 0}.stats .card:first-child strong{color:var(--accent-text)}.stats small{display:block;font-size:.77rem}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{border-collapse:collapse;width:100%;text-align:left;font-size:.86rem}th,td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);background:var(--surface-alt);font-weight:600;white-space:nowrap;font-size:.79rem}th:first-child{border-radius:5px 0 0 0}th:last-child{border-radius:0 5px 0 0}td{max-width:400px;overflow-wrap:anywhere}tbody tr:last-child td{border-bottom:0}td small{display:block;font-size:.78rem;margin-top:3px}.badge{display:inline-block;border-radius:5px;padding:3px 8px;background:var(--surface-alt);font-weight:650;font-size:.74rem;white-space:nowrap}.badge.approved{background:var(--positive-bg);color:var(--positive)}.badge.pending{background:var(--warning-bg);color:var(--warning)}.badge.rejected{background:var(--danger-bg);color:var(--danger)}.pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:14px 0 0;color:var(--muted);font-size:.8rem}.pager button{min-width:40px;min-height:38px;padding:6px 11px;margin:0}.pager span{font-variant-numeric:tabular-nums}.breakdown{display:grid;grid-template-columns:1fr auto;margin:18px 0}.breakdown dt,.breakdown dd{margin:0;padding:12px 2px;border-bottom:1px solid var(--line);font-size:.91rem}.breakdown dd{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;padding-left:18px}.breakdown .total{margin-top:8px;padding:16px 12px;background:var(--accent-soft);color:var(--accent-text);border-bottom:0;font-size:1.1rem;font-weight:750}#salary-schedule{padding-left:20px;font-size:.87rem}.warning{background:var(--warning-bg);color:var(--warning);padding:12px 14px;border-radius:7px;font-size:.86rem}.empty,.empty-state{text-align:center;padding:38px 24px;color:var(--muted)}.empty-state{background:var(--surface);border:1px dashed var(--line);border-radius:12px;margin:0 0 20px}.empty-state h2{margin-bottom:8px}.empty-state p{max-width:480px;margin:0 auto 14px}.empty-state:before{content:"✦";display:block;font-size:1.8rem;color:var(--accent-text);margin-bottom:10px}
#auth{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:72vh;padding:24px 0}.intro{max-width:480px;padding:20px 0}.intro h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.065em;margin:15px 0 24px}.intro>p{max-width:400px;font-size:1rem}.intro>p.muted{font-size:.85rem}.intro:after{content:"Your time. Your team. In sync.";display:block;border-left:3px solid var(--accent);padding:10px 15px;margin-top:30px;font-size:.9rem;font-weight:650;color:var(--accent-text)}.auth-card{border-radius:16px;border-top:4px solid var(--accent);padding:28px;margin:0;box-shadow:0 18px 45px #24223809}.auth-card .tabs{gap:2px;padding:4px;margin-bottom:24px}.auth-card .tabs button{font-size:.76rem;padding:9px 10px;flex:1}.auth-card form>button[type="submit"]{width:100%;margin:18px 0 0;min-height:46px}.auth-card h2{font-size:1.4rem}.password-hint{font-size:.76rem;line-height:1.5;color:var(--muted);margin:8px 0 0}.password-toggle{font-size:.75rem;min-height:32px;padding:5px 10px;margin:6px 0 0!important;background:var(--surface-alt);color:var(--muted);border:1px solid var(--line)}.password-toggle:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-text)}.field-error,.auth-error{color:var(--danger);font-size:.8rem;margin:7px 0}.auth-error:not(:empty){background:var(--danger-bg);border-radius:7px;padding:11px 13px}input[aria-invalid="true"]{border-color:var(--danger)}
.code-row{display:flex;align-items:stretch;gap:9px;margin:16px 0;min-width:0}.code-row code,#invitation-code{display:block;flex:1;min-width:0;padding:14px;background:var(--surface-alt);color:var(--ink);border:1px dashed var(--line);border-radius:7px;overflow-wrap:anywhere;font-size:.87rem;user-select:all}.code-row button{align-self:stretch;flex:none;margin:0}.personal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.personal-grid>.card{margin-bottom:20px}.leave-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.leave-summary>article,.leave-summary>div{padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--surface-alt)}.leave-summary h3{margin:0 0 12px}.leave-summary strong{color:var(--accent-text);font-variant-numeric:tabular-nums}.leave-summary p{font-size:.84rem;margin:9px 0 0}#allowances table input{max-width:150px;min-width:85px;margin:0}#allowances .form-grid button{align-self:end;margin:0 0 12px}#allowance-context{padding:10px 0;margin:0}#clock-readiness,#office-location-note,#policy-schedule,#install-help{margin-top:15px}#location-result:empty{display:none}
.map-search{display:flex;align-items:end;gap:10px;margin:14px 0 10px}.map-search label{flex:1;margin:0}.map-search input{flex:1;margin:0}.map-search button{flex:none;margin:0;min-height:44px}#office-map{height:320px;width:100%;border:1px solid var(--line);border-radius:10px;margin:14px 0;isolation:isolate;background:var(--surface-alt);z-index:0}#map-results{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto}#map-results button{display:block;width:100%;text-align:left;margin:0 0 5px;padding:11px 13px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500;font-size:.85rem}#map-results button:hover{background:var(--accent-soft);border-color:var(--accent)}.leaflet-container a{color:#215b97}.leaflet-container button{min-height:0}.leaflet-control-attribution{font-size:10px!important}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:18px 0}.photo-grid>article,.photo-grid>div,.photo-grid>figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--surface-alt)}.photo-preview{display:block;width:100%;max-width:220px;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--surface-alt)}.photo-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}.photo-grid figcaption,.photo-grid p{font-size:.8rem;overflow-wrap:anywhere;margin:8px 0 0}.photo-grid button{margin-top:8px;width:100%}
#notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10000;width:max-content;max-width:min(520px,calc(100vw - 32px));padding:13px 20px;background:var(--header);color:#fff;border:1px solid #645b7b;border-radius:10px;box-shadow:0 8px 30px #0003;font-size:.88rem;line-height:1.5;overflow-wrap:anywhere;text-align:left;pointer-events:none}#notice:empty{display:none}#notice:not(:empty){animation:toast-in .18s ease-out}#notice.error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}footer{max-width:1208px;margin:auto;padding:0 24px 30px;font-size:.76rem}footer a{color:var(--muted)}@keyframes toast-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@media(max-width:900px){#auth{gap:35px}.auth-card{padding:23px}.stats .card{padding:17px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}nav.tabs{gap:3px}nav.tabs button{font-size:.82rem;padding:10px 11px}}
@media(max-width:680px){header{padding:14px 18px;gap:12px;flex-wrap:wrap;min-height:70px}.brand{font-size:1.3rem}.brand:before{width:30px;height:30px}#identity{font-size:.75rem;max-width:45%}header button{min-height:36px;padding:8px 10px}main{padding:23px 16px 28px}#auth{grid-template-columns:1fr;gap:23px;padding:0;min-height:0}.intro{padding:4px 0}.intro h1{font-size:2.65rem;margin:12px 0 17px}.intro:after{display:none}.intro>p{max-width:none}.intro>p:last-child{margin:0}.auth-card{padding:22px}.personal-grid{grid-template-columns:1fr;gap:0}.card{padding:19px;margin-bottom:16px;border-radius:11px}.stats{grid-template-columns:1fr 1fr;margin-bottom:16px}.stats .card{padding:17px;border-bottom:1px solid var(--line)}.stats .card:nth-child(2){border-right:0}.stats .card:nth-last-child(-n+2){border-bottom:0}.stats strong{font-size:1.6rem}.page-heading{align-items:start;gap:10px}.page-heading button{font-size:.75rem;min-height:36px;padding:8px 10px;flex-shrink:0}.section-heading{align-items:start;flex-wrap:wrap;gap:5px}.page-heading h1{font-size:1.9rem}.banner{font-size:.77rem;margin-bottom:16px}nav.tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}nav.tabs button{flex-shrink:0;min-height:40px}.toolbar{gap:12px}.toolbar label{font-size:.78rem}.toolbar input,.toolbar select{font-size:.87rem}.table-wrap table{min-width:500px}th,td{padding:11px 9px}.leave-summary{gap:10px}.leave-summary>article,.leave-summary>div{padding:13px}#office-map{height:300px}.map-search{flex-wrap:wrap}.map-search input,.map-search label{min-width:180px}.map-search button{padding:10px 12px}#notice{bottom:16px;font-size:.82rem;padding:12px 16px}footer{padding:0 16px 24px}.form-grid{gap:0 13px}}
@media(max-width:420px){.form-grid{grid-template-columns:1fr}.auth-card .tabs button{padding:8px 6px;font-size:.71rem}.brand:after{display:none}#identity{max-width:42%}.toolbar{align-items:stretch;flex-direction:column}.toolbar label{max-width:none}.code-row{gap:6px}.code-row code{padding:12px;font-size:.78rem}.code-row button{padding:9px 12px}.leave-summary{grid-template-columns:1fr}.breakdown dt,.breakdown dd{font-size:.81rem}.breakdown .total{font-size:.95rem}.weekdays{gap:6px}.weekdays label{padding:7px 9px}.page-heading h1{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.office-pin{color:var(--brand);font-size:34px;text-shadow:0 2px 3px var(--surface);line-height:24px}video.photo-preview{margin:14px 0;max-width:360px;transform:scaleX(-1)}

/* ===== WizClock Design System components (bundle.css, unchanged except .wc-root) ===== */
.wc-num { font-variant-numeric: tabular-nums; }
.wc-icon { width: 24px; height: 24px; flex: none; display: block; }
.wc-icon--sm { width: 16px; height: 16px; }

/* Shared focus ring: 2px solid, 2px gap */
.wc-btn:focus-visible, .wc-clock__btn:focus-visible, .wc-nav__item:focus-visible,
.wc-row:focus-visible, .wc-update:focus-visible, .wc-loc__action:focus-visible,
.wc-toast__action:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ---------- Tones ---------- */
.wc-tone-success { --t-soft: var(--success-soft); --t-ink: var(--success-ink); --t-solid: var(--success); }
.wc-tone-warning { --t-soft: var(--warning-soft); --t-ink: var(--warning-ink); --t-solid: var(--warning); }
.wc-tone-error   { --t-soft: var(--error-soft);   --t-ink: var(--error-ink);   --t-solid: var(--error); }
.wc-tone-pending { --t-soft: var(--pending-soft); --t-ink: var(--pending-ink); --t-solid: var(--pending); }
.wc-tone-leave   { --t-soft: var(--leave-soft);   --t-ink: var(--leave-ink);   --t-solid: var(--leave); }
.wc-tone-neutral { --t-soft: var(--neutral-soft); --t-ink: var(--ink-muted);   --t-solid: var(--ink-muted); }
.wc-tone-brand   { --t-soft: var(--brand-soft);   --t-ink: var(--brand-ink);   --t-solid: var(--brand); }

/* ---------- Clock button ---------- */
.wc-clock { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) 0; }
.wc-clock__btn {
  width: 184px; height: 184px; border-radius: var(--radius-full);
  border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  font: 700 19px/24px var(--font-sans);
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 0 0 10px var(--brand-soft), var(--elevation-1);
}
.wc-clock__btn:active { background: var(--brand-pressed); }
.wc-clock__btn .wc-icon { width: 40px; height: 40px; }
.wc-clock__btn--out { background: var(--ink); color: var(--ink-inverse); box-shadow: 0 0 0 10px var(--neutral-soft), var(--elevation-1); }
.wc-clock__btn--out:active { background: var(--ink-muted); }
.wc-clock__btn:disabled, .wc-clock__btn[aria-disabled="true"] {
  cursor: default; background: var(--surface-sunken); color: var(--ink-disabled);
  box-shadow: 0 0 0 10px var(--bg), inset 0 0 0 2px var(--border-strong);
}
.wc-clock__btn[aria-busy="true"] { cursor: progress; position: relative; }
.wc-clock__btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: -10px; border-radius: var(--radius-full);
  border: 4px solid transparent; border-top-color: var(--brand);
  animation: wc-spin 1s linear infinite;
}
/* Compact size for Home over the map (152px) */
.wc-clock__btn--sm { width: 152px; height: 152px; gap: 6px; font-size: 17px; line-height: 22px; }
.wc-clock__btn--sm .wc-icon { width: 32px; height: 32px; }
/* After the grace time: clock-in turns red and carries the words "Late arrival" */
.wc-clock__btn--late { background: var(--error); color: var(--ink-inverse); box-shadow: 0 0 0 10px var(--error-soft), var(--elevation-1); }
.wc-clock__btn--late:active { background: var(--error-ink); }
.wc-clock__tag { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; }
/* Rectangular bar: the Home default. Full width, 60px, keeps every colour state above */
.wc-clock__btn--bar { width: 100%; height: 60px; border-radius: var(--radius-md); flex-direction: row; gap: 10px; font-size: 17px; line-height: 22px; text-decoration: none; }
.wc-clock__btn--bar, .wc-clock__btn--bar.wc-clock__btn--late, .wc-clock__btn--bar.wc-clock__btn--out { box-shadow: var(--elevation-1); }
.wc-clock__btn--bar .wc-icon { width: 24px; height: 24px; }
.wc-clock__btn--bar .wc-clock__tag { font-size: 14px; line-height: 20px; font-weight: 600; }
.wc-clock__btn--bar:disabled, .wc-clock__btn--bar[aria-disabled="true"] { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.wc-clock__btn--bar[aria-busy="true"]::after { display: none; }
.wc-clock__note { margin: 0; max-width: 280px; text-align: center; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.wc-clock__sub { margin: 0; max-width: 280px; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- Spinner (small) ---------- */
.wc-spinner { width: 20px; height: 20px; flex: none; border-radius: var(--radius-full);
  border: 3px solid var(--t-soft, var(--surface-sunken)); border-top-color: var(--t-ink, var(--ink-muted));
  animation: wc-spin 1s linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wc-spinner, .wc-clock__btn[aria-busy="true"]::after { animation: none; }
}

/* ---------- Location status bar ---------- */
.wc-loc {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--t-soft, var(--neutral-soft)); color: var(--ink);
}
.wc-loc > .wc-icon { color: var(--t-ink, var(--ink-muted)); }
.wc-loc__text { flex: 1; min-width: 0; }
.wc-loc__title { margin: 0; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--t-ink, var(--ink)); }
.wc-loc__detail { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink); }
.wc-loc__action {
  flex: none; min-height: 48px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); border: 1.5px solid var(--t-ink); background: transparent;
  color: var(--t-ink); font: 600 13px/18px var(--font-sans); cursor: pointer;
}

/* One-line bar: title only, 48px tall */
.wc-loc--compact { min-height: 48px; padding: 6px 12px; gap: 10px; }
.wc-loc--compact > .wc-icon, .wc-loc--compact > .wc-spinner { width: 20px; height: 20px; }
.wc-loc--compact .wc-loc__title { font-size: 14px; line-height: 20px; }
.wc-loc--compact .wc-loc__action { min-height: 36px; }

/* ---------- Status chip ---------- */
.wc-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 28px; padding: 0 10px 0 8px; border-radius: var(--radius-full);
  background: var(--t-soft, var(--neutral-soft)); color: var(--t-ink, var(--ink-muted));
  font: 700 12px/16px var(--font-sans); letter-spacing: .01em; white-space: nowrap;
}
.wc-chip .wc-icon { width: 16px; height: 16px; }

/* ---------- Update card ---------- */
.wc-update {
  display: block; position: relative; text-align: left; width: 100%;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  font: inherit;
}
.wc-update__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.wc-update__time { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.wc-update__title { margin: var(--space-3) 0 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.wc-update__body { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; }
.wc-update__amount { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--t-soft, var(--neutral-soft)); color: var(--t-ink, var(--ink)); font-size: 13px; line-height: 18px; }
.wc-update__amount strong { font-size: 17px; line-height: 24px; font-variant-numeric: tabular-nums; }
.wc-update__by { margin: var(--space-2) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.wc-update--unread::after { content: ""; position: absolute; top: 22px; right: 16px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand); }
.wc-update--unread .wc-update__top { padding-right: 20px; }

/* ---------- Stat tile ---------- */
.wc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.wc-stats--2 { grid-template-columns: repeat(2, 1fr); }
.wc-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--t-soft, var(--surface)); border: 1px solid var(--border); color: var(--ink);
}
.wc-stat[class*="wc-tone-"] { border-color: transparent; }
.wc-stat__label { font: 700 12px/16px var(--font-sans); letter-spacing: .01em; color: var(--t-ink, var(--ink-muted)); }
.wc-stat__value { font-size: 20px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-stat__value--empty { color: var(--ink-muted); }
/* Compact: label + value only, about 52px tall */
.wc-stat--compact { padding: 6px 12px; gap: 0; border-radius: var(--radius-sm); }
.wc-stat--compact .wc-stat__value { font-size: 17px; line-height: 22px; }
.wc-stat__sub { font-size: 13px; line-height: 18px; color: var(--t-ink, var(--ink-muted)); }

/* ---------- Bottom nav ---------- */
.wc-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border);
}
.wc-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 56px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-muted); font: 700 12px/16px var(--font-sans); text-decoration: none;
}
.wc-nav__pill { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: var(--radius-full); }
.wc-nav__item[aria-current="page"] { color: var(--brand-ink); }
.wc-nav__item[aria-current="page"] .wc-nav__pill { background: var(--brand-soft); }
.wc-nav__badge {
  position: absolute; top: -4px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand);
  font: 700 12px/20px var(--font-sans); text-align: center; box-shadow: 0 0 0 2px var(--surface);
}

/* ---------- List row ---------- */
.wc-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.wc-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: 64px; padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 0; color: var(--ink); text-align: left; font: inherit; text-decoration: none;
}
.wc-list > li + li .wc-row, .wc-list > .wc-row + .wc-row { border-top: 1px solid var(--border); }
button.wc-row, a.wc-row { cursor: pointer; }
button.wc-row:active, a.wc-row:active { background: var(--surface-sunken); }
.wc-row__lead { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  background: var(--t-soft, var(--neutral-soft)); color: var(--t-ink, var(--ink)); font: 700 13px/1 var(--font-sans); }
.wc-row__text { flex: 1; min-width: 0; }
.wc-row__title { display: block; font-weight: 600; font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-row__sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.wc-row__trail { flex: none; display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.wc-row__value { color: var(--ink); font-weight: 600; }

/* ---------- Buttons ---------- */
.wc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font: 600 15px/20px var(--font-sans); cursor: pointer; text-decoration: none; border: 0;
}
.wc-btn--block { display: flex; width: 100%; }
.wc-btn--primary { background: var(--brand); color: var(--on-brand); }
.wc-btn--primary:active { background: var(--brand-pressed); }
.wc-btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.wc-btn--secondary:active { background: var(--surface-sunken); }
.wc-btn:disabled, .wc-btn[aria-disabled="true"] { cursor: default; background: var(--surface-sunken); color: var(--ink-disabled); box-shadow: none; }
.wc-btn[aria-busy="true"] { cursor: progress; }
.wc-btn .wc-spinner { --t-soft: currentColor; border-color: transparent; border-top-color: currentColor; border-right-color: currentColor; }

/* ---------- Text field ---------- */
.wc-field { display: flex; flex-direction: column; gap: 6px; }
.wc-field__label { font-weight: 600; font-size: 13px; line-height: 18px; color: var(--ink); }
.wc-field__input {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--border-strong);
  font: 400 15px/22px var(--font-sans); resize: vertical;
}
.wc-field__input::placeholder { color: var(--ink-muted); opacity: 1; }
.wc-field__input:focus, .wc-field__input.is-focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--focus); }
.wc-field__input:disabled { background: var(--surface-sunken); color: var(--ink-disabled); box-shadow: inset 0 0 0 1.5px var(--border); }
.wc-field__help { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.wc-field--error .wc-field__input { box-shadow: inset 0 0 0 2px var(--error); }
.wc-field--error .wc-field__help { display: flex; gap: 6px; align-items: flex-start; color: var(--error-ink); font-weight: 600; }
.wc-field--error .wc-field__help .wc-icon { margin-top: 2px; }

/* ---------- Confirm bottom sheet ---------- */
.wc-scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; flex-direction: column; justify-content: flex-end; }
.wc-sheet {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--elevation-2);
}
.wc-sheet__handle { width: 40px; height: 4px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); background: var(--border-strong); }
.wc-sheet__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
.wc-sheet__body { margin: var(--space-2) 0 0; }
.wc-sheet__note { display: flex; gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-3); border-radius: var(--radius-sm);
  background: var(--t-soft, var(--neutral-soft)); color: var(--ink); font-size: 13px; line-height: 18px; }
.wc-sheet__note .wc-icon { color: var(--t-ink, var(--ink-muted)); width: 20px; height: 20px; }
.wc-sheet__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Toast ---------- */
.wc-toast {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); background: var(--ink); color: var(--ink-inverse);
  box-shadow: var(--elevation-1); font-size: 15px; line-height: 22px;
}
.wc-toast__text { flex: 1; padding: 4px 0; }
.wc-toast__action { flex: none; min-height: 40px; min-width: 48px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--brand-soft); font: 700 14px/20px var(--font-sans); cursor: pointer; }
.wc-toast--error { background: var(--error-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--error), var(--elevation-1); }
.wc-toast--error > .wc-icon { color: var(--error-ink); }
.wc-toast--error .wc-toast__action { color: var(--error-ink); }

/* Icons: 2px round line icons that take the text colour. */
.wc-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.wc-btn,button.wc-row,button.wc-nav__item,button.wc-clock__btn,button.wc-loc__action{margin:0;transition:none}
.wc-btn--primary:hover:not(:disabled){background:var(--brand)}.wc-btn--secondary:hover:not(:disabled){background:var(--surface)}
.wc-row:hover:not(:disabled){background:var(--surface)}
.wc-nav__item:hover:not(:disabled){background:none}
.wc-clock__btn:hover:not(:disabled){background:var(--brand)}.wc-clock__btn--out:hover:not(:disabled){background:var(--ink)}.wc-clock__btn--late:hover:not(:disabled){background:var(--error)}
.wc-clock__btn:disabled{opacity:1}.wc-btn:disabled{opacity:1}
.wc-scrim{z-index:20000}
.sheet-field{margin:var(--space-4) 0 0}
.wc-field textarea.wc-field__input{min-height:96px}

/* Toast: the one global notice, above the bottom nav. */
#notice{position:fixed;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:none;z-index:15000;width:auto;max-width:480px;margin:0 auto;display:flex;align-items:center;min-height:48px;padding:var(--space-2) var(--space-4);border:0;border-radius:var(--radius-sm);background:var(--ink);color:var(--ink-inverse);box-shadow:var(--elevation-1);font:var(--text-body);pointer-events:none}
#notice.error{background:var(--error-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--error),var(--elevation-1)}

/* Shared form pieces added by app.mjs: password show/hide, rules hint, form error */
.wc-field .password-toggle{align-self:flex-end;min-height:32px;margin:0!important;padding:0 var(--space-2);background:transparent;color:var(--brand-ink);border:0;font:600 13px/18px var(--font-sans)}
.wc-field .password-toggle:hover:not(:disabled){background:transparent;text-decoration:underline}
.password-hint{margin:6px 0 0;font-size:13px;line-height:18px;color:var(--ink-muted)}
.form-error:empty{display:none}.form-error{margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--error-soft);color:var(--ink);font-size:13px;line-height:18px}
input.wc-field__input,textarea.wc-field__input,select.wc-field__input{display:block;margin-top:0;border:0}

/* Sign in */
body:not([data-role])>header,body:not([data-role])>footer{display:none}
body:not([data-role]) main{max-width:440px;padding:var(--space-8) var(--space-4)}
.auth{display:flex;flex-direction:column;gap:var(--space-6)}
.auth__brand{display:flex;align-items:center;gap:var(--space-3);font:700 22px/28px var(--font-sans);color:var(--ink)}
.auth__brand img{border-radius:var(--radius-md)}
.auth__card{padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.auth__links{display:flex;flex-direction:column;gap:var(--space-1)}
button.auth__link{min-height:48px;margin:0;padding:0 var(--space-2);background:transparent;color:var(--brand-ink);border:0;text-align:left;font:600 15px/22px var(--font-sans)}
button.auth__link:hover:not(:disabled){background:transparent;text-decoration:underline}
.auth__links .selected{display:none}

/* Page building blocks shared by employee and authority screens */
.emp-form{display:flex;flex-direction:column;gap:var(--space-4)}
.emp-form .emp-title{margin-bottom:var(--space-1)}
.emp-text{margin:0;font-size:15px;line-height:22px}
.emp-help{margin:var(--space-2) 0 0;font-size:13px;line-height:18px;color:var(--ink-muted)}
.emp-help--tight{margin-top:var(--space-1)}
label.wc-field{margin:0;font-weight:inherit;font-size:inherit}
button.wc-row{border-radius:0;min-height:64px}

/* ===== Motion and softness =====
   Only opacity and transform animate, so low-end WebViews stay smooth. All of it switches off under prefers-reduced-motion. */
:root{--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-sheet:28px;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.3,1.3,.5,1)}
html{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:none}
button,a,[role="tab"]{touch-action:manipulation}

/* Page changes: forward slides in from the right, back from the left, tabs fade up */
@keyframes wc-in-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wc-in-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes wc-in-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
body[data-nav="tab"] .view:not([hidden]):not(.emp-home):not(.emp-scan){animation:wc-in-up .22s var(--ease-out) both}
body[data-nav="forward"] .view:not([hidden]):not(.emp-home):not(.emp-scan){animation:wc-in-right .24s var(--ease-out) both}
body[data-nav="back"] .view:not([hidden]):not(.emp-home):not(.emp-scan){animation:wc-in-left .24s var(--ease-out) both}
.emp-home:not([hidden]) .emp-panel{animation:wc-in-up .28s var(--ease-out) both}
.emp-scan:not([hidden]){animation:wc-fade .2s ease-out both}
@keyframes wc-fade{from{opacity:0}to{opacity:1}}
/* Lists settle in one after another */
.view:not([hidden]) .wc-list>li,.view:not([hidden]) .wc-update,.view:not([hidden]) .wc-stats>*{animation:wc-in-up .26s var(--ease-out) both}
.view:not([hidden]) .wc-list>li:nth-child(2),.view:not([hidden]) .wc-stats>*:nth-child(2){animation-delay:30ms}
.view:not([hidden]) .wc-list>li:nth-child(3),.view:not([hidden]) .wc-stats>*:nth-child(3){animation-delay:60ms}
.view:not([hidden]) .wc-list>li:nth-child(4),.view:not([hidden]) .wc-stats>*:nth-child(4){animation-delay:90ms}
.view:not([hidden]) .wc-list>li:nth-child(n+5){animation-delay:120ms}

/* Press feedback: everything tappable gives a little */
.wc-btn,.wc-clock__btn,.wc-nav__item,.wc-row,.wc-loc__action,.emp-back,.emp-icon-btn,.emp-avatar,.emp-recenter,.emp-stat-btn,.emp-cal__day,.auth__link{transition:transform .16s var(--ease-spring),background-color .2s ease,box-shadow .2s ease,color .2s ease,opacity .2s ease}
.wc-btn:active:not(:disabled),.wc-clock__btn:active:not(:disabled),.wc-loc__action:active,.emp-stat-btn:active,.auth__link:active{transform:scale(.97)}
.emp-back:active,.emp-icon-btn:active:not(:disabled),.emp-avatar:active,.emp-recenter:active{transform:scale(.9)}
.wc-row:active{transform:scale(.985)}
.wc-clock__btn--bar:not(:disabled){box-shadow:0 2px 8px rgba(43,34,27,.14),0 8px 20px rgba(43,34,27,.10)}
.wc-clock__btn[aria-busy="true"]{opacity:.85}
/* Nav: the pill grows in behind the active icon */
.wc-nav__pill{transition:background-color .25s ease,transform .25s var(--ease-spring)}
.wc-nav__item .wc-nav__pill::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--brand-soft);transform:scaleX(.4);opacity:0;transition:transform .3s var(--ease-spring),opacity .2s ease;z-index:-1}
.wc-nav__item .wc-nav__pill{isolation:isolate}
.wc-nav__item[aria-current="page"] .wc-nav__pill{background:transparent}
.wc-nav__item[aria-current="page"] .wc-nav__pill::before{transform:none;opacity:1}
.wc-nav__item:active .wc-nav__pill{transform:scale(.9)}
.wc-nav__badge{animation:wc-pop .35s var(--ease-spring) both}
@keyframes wc-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* Sheets slide up over a fading scrim and slide back down when closed */
.wc-scrim{animation:wc-fade .2s ease-out both}
.wc-scrim .wc-sheet{animation:wc-sheet-up .3s var(--ease-out) both}
@keyframes wc-sheet-up{from{transform:translateY(100%)}to{transform:none}}
.wc-scrim.is-closing{animation:wc-fade-out .2s ease-in both}
.wc-scrim.is-closing .wc-sheet{animation:wc-sheet-down .2s ease-in both}
@keyframes wc-fade-out{to{opacity:0}}
@keyframes wc-sheet-down{to{transform:translateY(100%)}}

/* Toast rises in and sinks away */
#notice{transition:opacity .22s ease,transform .26s var(--ease-spring)}
#notice:not(:empty){animation:wc-toast-in .3s var(--ease-spring) both}
#notice.is-leaving{opacity:0;transform:translateY(12px)}
@keyframes wc-toast-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* Softer surfaces */
.wc-update,.wc-list,.emp-card,.auth__card{box-shadow:0 1px 2px rgba(43,34,27,.04)}
.wc-field__input{transition:box-shadow .18s ease}
.emp-day-detail{animation:wc-in-up .22s var(--ease-out) both}
.wc-stat__value,.emp-head__time{transition:color .3s ease}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Micro-interactions: each one says something (ready, working, done, wrong) ===== */
/* Face scan: the oval breathes while looking, a soft line sweeps while checking, and turns green with a drawn check only after the server records the time */
@keyframes wc-breathe{50%{transform:translateX(-50%) scale(1.025);border-color:#fff}}
.emp-scan[data-phase="framing"] .emp-scan__oval{animation:wc-breathe 2.4s ease-in-out infinite}
.emp-scan__oval{overflow:hidden}
.emp-scan__oval::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(to bottom,transparent,rgba(166,196,242,.35),transparent);opacity:0;transform:translateY(-100%)}
.emp-scan[data-phase="checking"] .emp-scan__oval::after{opacity:1;animation:wc-sweep 1.4s ease-in-out infinite}
@keyframes wc-sweep{from{transform:translateY(-100%)}to{transform:translateY(340%)}}
.emp-scan[data-phase="done"] .emp-scan__oval{border-style:solid;border-color:#78C26A;transition:border-color .2s}
.emp-scan[data-phase="done"] .emp-scan__title{color:#A0D592;font-size:20px;line-height:26px}
.emp-scan__done{position:absolute;left:50%;top:calc(18% + min(256px,72vw)*0.66 - 44px);width:88px;height:88px;transform:translateX(-50%);display:none}
.emp-scan[data-phase="done"] .emp-scan__done{display:block}
.emp-scan__done circle{fill:#3B8738;transform-origin:center;animation:wc-pop .35s var(--ease-spring) both}
.emp-scan__done path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:wc-draw .35s .18s ease-out forwards}
@keyframes wc-draw{to{stroke-dashoffset:0}}
.emp-scan[data-phase="failed"] .emp-scan__oval{animation:wc-shake .4s ease both}
@keyframes wc-shake{20%,60%{transform:translateX(calc(-50% - 6px))}40%,80%{transform:translateX(calc(-50% + 6px))}}

/* Home: the location bar eases between colours; the clock button glows once when it becomes ready */
.wc-loc{transition:background-color .35s ease}
.wc-loc .wc-loc__title,.emp-loc-lead{transition:color .35s ease}
.emp-loc-lead.is-new .wc-icon{animation:wc-pop .35s var(--ease-spring) both}
.wc-clock__btn.is-ready{animation:wc-ready 1s ease-out 1}
@keyframes wc-ready{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* Buttons that wait on the server show a small spinner beside the -ing label */
.wc-btn[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:wc-spin .8s linear infinite;flex:none}

/* A field with a problem gives a short shake so the eye finds it */
.wc-field--error .wc-field__input{animation:wc-field-shake .35s ease both}
@keyframes wc-field-shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* Loading rows shimmer instead of saying "Loading…" */
.emp-skeleton{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--border) 50%,var(--surface-sunken) 75%);background-size:200% 100%;animation:wc-shimmer 1.2s linear infinite}
.emp-skeleton--title{width:55%;height:14px;margin-bottom:8px}.emp-skeleton--sub{width:35%}
@keyframes wc-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Toasts carry a small icon: a check for done, an alert for problems */
#notice::before{content:"";flex:none;width:20px;height:20px;margin-right:10px;background:currentColor;-webkit-mask:var(--toast-icon) center/contain no-repeat;mask:var(--toast-icon) center/contain no-repeat;--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")}
#notice.error::before{color:var(--error-ink);--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")}

/* New updates glow softly once */
.wc-update--unread{animation:wc-in-up .26s var(--ease-out) both,wc-glow 1.6s .3s ease-out 1}
@keyframes wc-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 30%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.emp-scan__done path{stroke-dashoffset:0}}

/* ===== Dark theme, softer: a lighter neutral charcoal instead of deep brown ===== */
:root[data-theme="dark"]{--bg:#212327;--surface:#2B2E33;--surface-sunken:#34383E;--border:#3E434A;--border-strong:#8A909B;--scrim:rgba(0,0,0,.55);--ink:#ECEEF1;--ink-muted:#B6BBC4;--ink-disabled:#A4AAB4;--ink-inverse:#212327;--brand-soft:#45332D;--neutral-soft:#34383E;--success-soft:#24362A;--warning-soft:#3C3421;--error-soft:#452B33;--pending-soft:#23334A;--leave-soft:#342C47}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#212327;--surface:#2B2E33;--surface-sunken:#34383E;--border:#3E434A;--border-strong:#8A909B;--scrim:rgba(0,0,0,.55);--ink:#ECEEF1;--ink-muted:#B6BBC4;--ink-disabled:#A4AAB4;--ink-inverse:#212327;--brand-soft:#45332D;--neutral-soft:#34383E;--success-soft:#24362A;--warning-soft:#3C3421;--error-soft:#452B33;--pending-soft:#23334A;--leave-soft:#342C47}}

/* ===== Appearance choices (saved on this phone) ===== */
/* Colour: clay is the default; each set keeps text on its fills at 4.5:1 or better */
:root[data-brand="indigo"]{--brand:#4A4FB0;--brand-pressed:#3B3F92;--on-brand:#FFFFFF;--brand-soft:#E4E5F7;--brand-ink:#33377F;--focus:#4A4FB0}
:root[data-brand="teal"]{--brand:#1D6B6B;--brand-pressed:#155555;--on-brand:#FFFFFF;--brand-soft:#D9ECEB;--brand-ink:#134C4C;--focus:#1D6B6B}
:root[data-brand="plum"]{--brand:#7A3E8F;--brand-pressed:#633273;--on-brand:#FFFFFF;--brand-soft:#F0E1F4;--brand-ink:#552A63;--focus:#7A3E8F}
:root[data-theme="dark"][data-brand="indigo"]{--brand:#A9ACF2;--brand-pressed:#BFC1F5;--on-brand:#1A1C45;--brand-soft:#33365A;--brand-ink:#CDCFF8;--focus:#CDCFF8}
:root[data-theme="dark"][data-brand="teal"]{--brand:#86CFCB;--brand-pressed:#A3DCD8;--on-brand:#0B2A29;--brand-soft:#24403F;--brand-ink:#BCE6E3;--focus:#BCE6E3}
:root[data-theme="dark"][data-brand="plum"]{--brand:#D3A3E3;--brand-pressed:#DFBAEB;--on-brand:#2E1238;--brand-soft:#453050;--brand-ink:#E8CCF1;--focus:#E8CCF1}
@media(prefers-color-scheme:dark){
 :root:not([data-theme="light"])[data-brand="indigo"]{--brand:#A9ACF2;--brand-pressed:#BFC1F5;--on-brand:#1A1C45;--brand-soft:#33365A;--brand-ink:#CDCFF8;--focus:#CDCFF8}
 :root:not([data-theme="light"])[data-brand="teal"]{--brand:#86CFCB;--brand-pressed:#A3DCD8;--on-brand:#0B2A29;--brand-soft:#24403F;--brand-ink:#BCE6E3;--focus:#BCE6E3}
 :root:not([data-theme="light"])[data-brand="plum"]{--brand:#D3A3E3;--brand-pressed:#DFBAEB;--on-brand:#2E1238;--brand-soft:#453050;--brand-ink:#E8CCF1;--focus:#E8CCF1}
}
/* Font: phone fonts only, so nothing extra downloads */
:root[data-font="classic"]{--font-sans:"Noto Serif",Georgia,"Times New Roman","Noto Sans Bengali",serif}
:root[data-font="narrow"]{--font-sans:"Roboto Condensed","sans-serif-condensed","Arial Narrow","Noto Sans Bengali",sans-serif}
:root[data-font="classic"] body,:root[data-font="narrow"] body{font-family:var(--font-sans)}
/* Text size: the Android app scales text natively; in a browser the pages zoom instead */
:root[data-size="large"]:not([data-native-zoom]) .view:not(.emp-home):not(.emp-scan){zoom:1.12}
:root[data-size="xlarge"]:not([data-native-zoom]) .view:not(.emp-home):not(.emp-scan){zoom:1.25}
.emp-swatches{display:flex;gap:var(--space-3)}
button.emp-swatch{width:48px;height:48px;min-height:48px;padding:0;margin:0;border-radius:var(--radius-full);border:0;background:var(--sw);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px transparent;display:flex;align-items:center;justify-content:center;color:#fff}
button.emp-swatch:hover:not(:disabled){background:var(--sw)}
button.emp-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4.5px var(--ink)}
button.emp-swatch .wc-icon{width:22px;height:22px;opacity:0}button.emp-swatch[aria-checked="true"] .wc-icon{opacity:1}
.emp-appearance{display:flex;flex-direction:column;gap:var(--space-6)}
[data-brand-pick="clay"]{--sw:#A9482A}[data-brand-pick="indigo"]{--sw:#4A4FB0}[data-brand-pick="teal"]{--sw:#1D6B6B}[data-brand-pick="plum"]{--sw:#7A3E8F}
.emp-font-classic{font-family:"Noto Serif",Georgia,serif!important}.emp-font-narrow{font-family:"Roboto Condensed","sans-serif-condensed","Arial Narrow",sans-serif!important}
#appearance-screen .wc-field+.wc-field{margin-top:var(--space-6)}

/* Background choice (light mode only): cream is the default; white and light grey are lighter alternatives */
:root[data-bg="white"]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-sunken:#F2F2F4;--border:#E4E4E8;--border-strong:#8A8A93;--neutral-soft:#F2F2F4;--ink:#1E1E22;--ink-muted:#5A5A63;--ink-disabled:#5A5A63;--ink-inverse:#FFFFFF;--scrim:rgba(20,20,24,.5)}
:root[data-bg="grey"]{--bg:#F4F5F7;--surface:#FFFFFF;--surface-sunken:#EBEDF0;--border:#E0E3E8;--border-strong:#858B96;--neutral-soft:#EBEDF0;--ink:#1E2026;--ink-muted:#565C67;--ink-disabled:#565C67;--ink-inverse:#FFFFFF;--scrim:rgba(20,22,28,.5)}
:root[data-bg="white"] .wc-update,:root[data-bg="white"] .wc-list,:root[data-bg="white"] .emp-card,:root[data-bg="white"] .wc-stat:not([class*="wc-tone-"]){box-shadow:0 1px 3px rgba(20,20,30,.06)}
/* Dark mode keeps its own colours whatever background is chosen */
:root[data-theme="dark"][data-bg]{--bg:#212327;--surface:#2B2E33;--surface-sunken:#34383E;--border:#3E434A;--border-strong:#8A909B;--neutral-soft:#34383E;--ink:#ECEEF1;--ink-muted:#B6BBC4;--ink-disabled:#A4AAB4;--ink-inverse:#212327;--scrim:rgba(0,0,0,.55)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"])[data-bg]{--bg:#212327;--surface:#2B2E33;--surface-sunken:#34383E;--border:#3E434A;--border-strong:#8A909B;--neutral-soft:#34383E;--ink:#ECEEF1;--ink-muted:#B6BBC4;--ink-disabled:#A4AAB4;--ink-inverse:#212327;--scrim:rgba(0,0,0,.55)}}