/* Staff screens: one task per screen, readable controls, no automatic input zoom. */
html{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.staff-login,.mobile-shell{font-size:16px;line-height:1.5;min-height:100svh}
.staff-login{background:#f5f8ff;padding:max(20px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.staff-login>.brand{max-width:440px;width:100%;flex-shrink:0}
.staff-login .brand img,.mobile-shell .brand img{width:36px;height:36px}
.staff-login .brand strong,.mobile-shell .brand strong{font-size:18px}
.staff-login .brand span,.mobile-shell .brand span{font-size:11px;letter-spacing:.65px;line-height:1.4}
.staff-login-card{width:100%;max-width:440px;background:white;border:1px solid #e0e7f3;border-radius:24px;padding:28px}
.staff-login-card .eyebrow{color:var(--blue);font-size:12px;letter-spacing:1.2px;margin-bottom:10px}
.staff-login-card h1{font-size:30px;letter-spacing:-1px;line-height:1.15}
.staff-login-card .subtitle{font-size:16px;margin:12px 0 26px;line-height:1.5}
.staff-login .field{font-size:16px;gap:8px;margin-bottom:20px}
.staff-login input:not([type=checkbox]),.mobile-shell input:not([type=checkbox]),.mobile-shell select,.mobile-shell textarea{font-size:16px;line-height:1.4;min-height:56px;padding:14px 15px;border-radius:12px}
.staff-login input[name=secret]{font-size:20px;letter-spacing:3px}
.staff-login input[name=secret]::placeholder{font-size:16px;letter-spacing:0}
.staff-login .field small{font-size:14px}
.staff-login .check{font-size:15px;gap:12px;margin:6px 0 24px;line-height:1.4}
.staff-login .check input{width:23px;height:23px;min-height:23px;flex:0 0 23px;margin-top:0}
.staff-login .check small{display:block;font-size:13px;margin-top:4px}
.staff-login .btn.full{min-height:58px;font-size:17px;border-radius:13px;white-space:normal}
.staff-login .btn.full .icon{width:21px;height:21px}
.staff-login .login-links{margin:0;flex-wrap:wrap;gap:10px 22px;max-width:440px;justify-content:center}
.staff-login .login-links a,.staff-login .login-links button{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.staff-login .error-message{font-size:15px}
.staff-login-note{font-size:14px;color:var(--muted);margin-top:20px;display:flex;align-items:flex-start;gap:9px}
.staff-login-note .icon{width:19px;height:19px;color:var(--blue);margin-top:2px}
.mobile-shell{background:#f5f8ff;width:100%;min-width:0}
.mobile-top{max-width:560px;width:100%;padding:max(18px,env(safe-area-inset-top)) 20px 0;gap:12px}
.mobile-top .brand{min-width:0;gap:10px}
.mobile-top .brand>div{min-width:0}
.mobile-top .modal-close{width:44px;height:44px;flex:0 0 44px;background:white;border:1px solid var(--line)}
.mobile-top .modal-close .icon{width:23px;height:23px}
.mobile-content{width:100%;max-width:560px;padding:24px 20px calc(100px + env(safe-area-inset-bottom));min-width:0}
.mobile-content h1{font-size:28px;letter-spacing:-.9px;line-height:1.2}
.mobile-content h2{font-size:19px;line-height:1.35}
.mobile-content .subtitle{font-size:16px;line-height:1.5;margin:8px 0 0}
.staff-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.staff-heading>div{min-width:0}
.staff-heading .eyebrow{font-size:12px;letter-spacing:.8px;color:var(--muted);margin-bottom:5px}
.staff-heading h1{overflow-wrap:anywhere}
.staff-heading .avatar{width:42px;height:42px;flex:0 0 42px;font-size:13px;background:#e5edff}
.staff-clock{border-radius:24px;border:1px solid #dce5f5;background:white;padding:24px 22px}
.staff-clock-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.staff-clock-top .badge{font-size:13px;white-space:normal;padding:5px 10px;border-radius:20px}
.staff-time{font-size:24px;line-height:1;letter-spacing:-.7px;font-weight:600;font-variant-numeric:tabular-nums}
.scan-symbol{width:70px;height:70px;border-radius:22px;background:#edf3ff;color:var(--blue);display:grid;place-items:center;margin-bottom:20px;transform:rotate(-3deg)}
.scan-symbol .icon{width:38px;height:38px;stroke-width:1.5;transform:rotate(3deg)}
.staff-clock h2{font-size:25px;letter-spacing:-.75px;margin-bottom:9px}
.staff-clock .task-description{font-size:16px;color:var(--muted);line-height:1.5;margin-bottom:24px}
.mobile-content .btn{font-size:16px;min-height:50px;white-space:normal;border-radius:12px;padding:12px 16px;line-height:1.4;max-width:100%}
.mobile-content .btn.full{min-height:60px;font-size:17px;font-weight:650;width:100%;gap:10px}
.mobile-content .btn .icon{width:21px;height:21px}
.mobile-content .text-btn{font-size:15px;line-height:1.4;min-height:44px;white-space:normal;text-align:left}
.scan-steps{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:18px 2px 0}
.scan-steps span{display:inline-flex;align-items:center;gap:5px}
.scan-steps b{font-size:11px;border:1px solid #dbe4f4;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:white}
.scan-steps .current{color:var(--blue);font-weight:650}
.scan-steps .current b{background:var(--blue);border-color:var(--blue);color:white}
.staff-context{font-size:14px;line-height:1.5;color:var(--muted);display:flex;gap:10px;align-items:flex-start;margin-top:20px}
.staff-context .icon{width:19px;height:19px;flex:none;color:var(--blue);margin-top:1px}
.staff-centre{display:flex;gap:12px;align-items:center;padding:15px;background:#f1f5ff;border:1px solid #e0e8f8;border-radius:14px;margin:20px 0}
.staff-centre .icon{width:25px;height:25px;color:var(--blue)}
.staff-centre p{min-width:0;overflow-wrap:anywhere;font-size:16px;font-weight:650}
.staff-centre small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:2px}
.staff-confirm .scan-symbol{margin-bottom:18px}
.staff-confirm h1{font-size:29px}
.staff-confirm .task-description{font-size:16px;color:var(--muted);margin:12px 0}
.staff-confirm-note{font-size:14px;color:var(--muted);margin:15px 0 0;line-height:1.5}
.staff-problem{font-size:15px;color:var(--red);border:1px solid #f0ccd2;background:#fff5f6;border-radius:12px;padding:14px;margin:18px 0;overflow-wrap:anywhere}
.staff-problem:focus{outline:2px solid var(--red);outline-offset:3px}
.staff-receipt{text-align:center;padding:28px 22px}
.receipt-check{width:76px;height:76px;background:#e8f6ee;color:var(--green);border-radius:50%;display:grid;place-items:center;margin:6px auto 22px}
.receipt-check .icon{width:40px;height:40px}
.staff-receipt h1{font-size:28px;letter-spacing:-.9px}
.receipt-time{font-size:46px;line-height:1.25;letter-spacing:-1.5px;font-weight:600;font-variant-numeric:tabular-nums;margin:14px 0 7px}
.receipt-centre{font-size:17px;overflow-wrap:anywhere}
.receipt-caption{font-size:14px;color:var(--muted);margin:12px 0 25px}
.staff-receipt .text-btn{justify-content:center;margin-top:9px}
.mobile-content .panel-head{padding:20px 20px 14px}
.mobile-content .panel-head h2{font-size:18px}
.mobile-content .panel-head p{font-size:14px;margin-top:5px}
.mobile-content .panel-body{padding:0 20px 20px}
.mobile-content .timeline-row{gap:11px;padding:15px 0;align-items:center}
.mobile-content .timeline-row>div{min-width:0}
.mobile-content .timeline-row strong{font-size:16px}
.mobile-content .timeline-row small{font-size:14px;display:block;overflow-wrap:anywhere}
.mobile-content .timeline-row time{font-size:16px;white-space:nowrap;flex-shrink:0}
.mobile-content .timeline-row .activity-mark{width:36px;height:36px;flex:0 0 36px}
.mobile-content .empty{padding:22px 0}
.mobile-content .empty h3{font-size:17px}
.mobile-content .empty p,.mobile-content .muted.small{font-size:15px}
.mobile-content .notice{font-size:15px;line-height:1.5;padding:14px;gap:10px}
.other-movements{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.other-movements summary{font-size:14px;color:var(--muted);min-height:44px;display:list-item;padding:12px 0;cursor:pointer}
.other-movements .btn{width:100%}
.mobile-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));width:100%;max-width:none}
.mobile-nav a{min-width:0;min-height:48px;font-size:12px;gap:3px;line-height:1.3;padding:5px 2px}
.mobile-nav a .icon{width:23px;height:23px}
.mobile-shell .field{font-size:16px;margin-bottom:20px}
.mobile-shell textarea{min-height:130px}
.mobile-content .toolbar{margin-top:22px}
.mobile-content .toolbar .field{margin:0;flex:1;width:100%;min-width:0}
.staff-month{background:#edf3ff;border:1px solid #dce6f9;border-radius:18px;padding:20px;margin:20px 0}
.staff-month .eyebrow{font-size:12px;letter-spacing:1px;color:var(--muted)}
.staff-month .total{font-size:29px;letter-spacing:-1px;font-weight:650;margin:5px 0 18px}
.staff-exports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.staff-exports .btn{width:100%;font-size:14px;padding:11px 8px}
.staff-day{padding:19px;background:white;border:1px solid var(--line);border-radius:18px;margin-bottom:14px}
.staff-day-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:9px}
.staff-day-head h2{font-size:17px;line-height:1.4;text-transform:capitalize}
.staff-day-head strong{font-size:16px;white-space:nowrap}
.staff-day .badge{font-size:12px;margin:3px 0 7px}
.staff-day .timeline-row{padding:11px 0;gap:10px}
.staff-day .timeline-row .text-btn{font-size:15px;padding:0;min-height:32px}
.mobile-content .incident-box{font-size:16px;padding:16px}
.mobile-content .incident-box p{font-size:16px;overflow-wrap:anywhere}
.mobile-content .incident-box small{font-size:13px}
.mobile-content .trace-note{font-size:13px}
.scan-dialog .modal-head{margin-bottom:16px;gap:12px}
.scan-dialog .modal-head h2{font-size:23px;line-height:1.2}
.scan-dialog .modal-close{width:44px;height:44px}
.scan-dialog .subtitle{font-size:16px;line-height:1.5;margin-bottom:18px}
.scan-dialog .qr-video{display:block;width:100%;aspect-ratio:1;max-height:50svh;object-fit:cover;border-radius:18px;background:#142e53}
.scan-dialog #scan-message{font-size:15px;line-height:1.5;margin:14px 0;min-height:45px}
.scan-dialog .btn{min-height:52px;font-size:16px;white-space:normal;width:100%}
.scan-dialog .scan-privacy{font-size:13px;color:var(--muted);line-height:1.5;margin-top:15px}
@media(max-width:760px){
 input,select,textarea,.login-form input{font-size:16px}
 .login{min-height:100svh}
 .login-form .field{font-size:16px}
 .login-form input{min-height:54px}
 .login-form .btn.full{font-size:17px;min-height:56px}
 .login-form .login-tabs button{font-size:15px;min-height:44px}
 .login-form .login-hint{font-size:14px}
 .login-art{min-height:150px;padding:20px 24px}
 .login-copy{padding:20px 0 0}
 .login-copy h1{font-size:28px}
 .login-form-side{padding:26px 24px 36px;min-height:0}
 .modal-close{width:44px;height:44px}
 dialog{padding:22px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);font-size:16px}
 dialog .field,dialog .privacy-list,dialog .check{font-size:16px}
 dialog .field small,dialog .subtitle,dialog .small{font-size:14px}
 dialog input:not([type=checkbox]),dialog select,dialog textarea{font-size:16px;min-height:52px}
 dialog .btn{font-size:16px;min-height:50px;white-space:normal}
 dialog .modal-head h2{font-size:22px}
 .scan-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom))}
 .mobile-shell .month-grid{display:none}
 .mobile-shell .brand span{max-width:210px}
}
@media(max-width:360px){
 .staff-login{padding-inline:16px;gap:18px}
 .staff-login-card{padding:23px 20px}
 .staff-login-card h1{font-size:27px}
 .mobile-top{padding-inline:16px}
 .mobile-content{padding:22px 16px calc(96px + env(safe-area-inset-bottom))}
 .staff-clock{padding:22px 18px}
 .staff-clock h2{font-size:23px}
 .staff-heading h1{font-size:26px}
 .scan-steps{font-size:11px;gap:4px}
 .scan-steps b{width:18px;height:18px;font-size:10px}
 .mobile-top .brand span{max-width:180px;font-size:10px}
 .staff-exports{grid-template-columns:1fr}
}
@media(max-height:740px){.staff-login{justify-content:flex-start;gap:18px}.staff-login-card{padding-block:24px}.scan-symbol{width:58px;height:58px;margin-bottom:16px}.staff-clock-top{margin-bottom:18px}.staff-clock .task-description{margin-bottom:20px}}

.demo-camera{aspect-ratio:1;max-height:45svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#142e53;color:white;border-radius:18px;margin-bottom:18px}.demo-camera .icon{width:110px;height:110px;stroke-width:1.2}.demo-camera p{font-size:16px}

.staff-identity{margin:0 0 20px;overflow-wrap:anywhere}.staff-identity strong{display:block;font-size:17px;font-weight:650}.staff-identity span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.mobile-shell,.staff-login-card,dialog{overflow-wrap:anywhere}
@media(max-height:740px){.mobile-content{padding-top:16px}.staff-heading{margin-bottom:16px}.staff-heading .eyebrow{font-size:11px}.staff-clock{padding:20px 18px}.staff-clock-top{margin-bottom:14px}.scan-symbol{width:48px;height:48px;margin-bottom:12px;border-radius:16px}.scan-symbol .icon{width:29px;height:29px}.staff-clock h2{font-size:23px;margin-bottom:8px}.staff-clock .task-description{margin-bottom:18px}.staff-identity{margin-bottom:16px}.demo-strip{font-size:10px;min-height:20px;line-height:1.3}.demo-strip a{display:none}}