/* E-Movement: mobile-first employee kiosk. */
:root{--navy:#102e49;--ink:#172e46;--muted:#64758a;--blue:#1768d4;--line:#e3e9f1;--surface:#f4f7fb;--green:#16816b;--radius:20px;}
*{box-sizing:border-box;}
html{background:#e8eef5;scroll-behavior:smooth;scroll-padding-bottom:180px;}
body{margin:0;color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
button,input,a,summary{-webkit-tap-highlight-color:transparent;}
button,input{font:inherit;}
button,a,summary{touch-action:manipulation;}
button{cursor:pointer;}
button:disabled{cursor:not-allowed;}
a{color:var(--blue);text-decoration:none;}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #78b7ff;outline-offset:4px;}
[hidden]{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.app-shell{min-height:100vh;min-height:100dvh;background:var(--surface);}
.app-masthead{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:env(safe-area-inset-top,0px) 22px 48px;border-radius:0 0 28px 28px;}
.k-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0;}
.k-brand{display:flex;align-items:center;gap:10px;color:#fff;min-width:0;min-height:44px;}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:#fff;border-radius:13px;}
.brand-mark img{width:33px;height:33px;object-fit:contain;}
.brand-title{display:block;font-size:17px;font-weight:800;letter-spacing:-.6px;}
.brand-subtitle{display:block;font-size:9px;font-weight:600;letter-spacing:2px;color:#b7cddd;margin-top:1px;}
.k-actions{display:flex;align-items:center;gap:8px;}
.header-action{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border-radius:13px;border:1px solid #426078;background:transparent;color:#fff;font-size:20px;}
.header-action:hover{background:#26445e;color:#fff;}
#fullscreenBtn{display:none;}
.app-intro{position:relative;z-index:1;padding:8px 0 0;}
.intro-kicker{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:10px;letter-spacing:1.8px;font-weight:700;color:#75dfcb;text-transform:uppercase;}
.intro-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.app-intro h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-1.3px;line-height:1.2;}
.app-intro p:last-child{max-width:250px;margin:10px 0 0;color:#bfd0df;font-size:13px;line-height:1.7;}
.hero-route{position:absolute;right:-16px;bottom:35px;width:132px;height:132px;opacity:.6;pointer-events:none;}
.k-wrap{position:relative;max-width:1000px;margin:-23px auto 0;padding:0 16px calc(174px + env(safe-area-inset-bottom,0px));}
.flow-steps{display:flex;list-style:none;gap:0;padding:17px 15px;margin:0 0 20px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 18px #102e4908;}
.flow-step{position:relative;flex:1;display:flex;align-items:center;gap:7px;min-width:0;color:#8391a3;font-size:11px;font-weight:600;}
.flow-step:not(:last-child)::after{content:'';height:1px;flex:1;margin:0 9px 0 2px;background:var(--line);}
.step-dot{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border:1px solid var(--line);border-radius:50%;font-size:10px;font-weight:700;}
.flow-step[data-state="current"]{color:var(--blue);}
.flow-step[data-state="current"] .step-dot{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 4px #edf4ff;}
.flow-step[data-state="complete"]{color:var(--green);}
.flow-step[data-state="complete"] .step-dot{background:#e7f5ef;border-color:#d5ebdf;}
.k-body{display:grid;gap:16px;align-items:start;}
.k-top,.k-bottom{min-width:0;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 20px #102e4903;}
.section-heading{display:flex;align-items:center;gap:11px;margin-bottom:20px;}
.section-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:12px;background:#edf4ff;color:var(--blue);font-size:20px;}
.section-heading h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.4px;}
.section-eyebrow{margin:0 0 2px;font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);}
.section-trailing{margin-left:auto;color:#8292a5;font-size:19px;}
.edit-details{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;padding:8px 2px 8px 10px;border:0;border-radius:6px;background:transparent;color:var(--blue);font-size:12px;font-weight:600;}
.field-stack{display:grid;gap:16px;}
.k-label{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:#384d64;}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-icon{position:absolute;left:15px;font-size:19px;color:#8291a3;pointer-events:none;}
.k-input{width:100%;min-width:0;min-height:54px;padding:14px 16px 14px 44px;border:1px solid #dce4ee;border-radius:12px;background:#fafbfd;color:var(--ink);font-size:16px;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s;}
.k-input::placeholder{color:#94a0af;font-weight:400;}
.k-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px #1768d414;}
.k-input.pin{padding-right:56px;letter-spacing:3px;}
.k-input.pin::placeholder{font-size:18px;letter-spacing:5px;}
.pin-toggle{position:absolute;right:5px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9px;background:transparent;color:#6a7e92;font-size:20px;}
.pin-toggle:hover{background:#edf2f8;}
.field-note{display:flex;align-items:center;gap:6px;margin:9px 0 0;font-size:11px;line-height:1.5;color:var(--muted);}
.field-note i{font-size:13px;}
.k-preview{margin-top:18px;padding:13px;background:#f6f8fb;border:1px solid #e8edf3;border-radius:12px;}
.k-preview-head{display:flex;align-items:flex-start;gap:9px;}
.preview-copy{flex:1;min-width:0;}
.k-preview-name{font-size:13px;font-weight:700;line-height:1.5;overflow-wrap:anywhere;}
.k-preview-sub{font-size:12px;line-height:1.6;color:var(--muted);margin-top:3px;overflow-wrap:anywhere;}
.k-preview-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:4px 6px;background:#e7edf4;color:#64758a;border-radius:5px;font-size:8px;font-weight:700;letter-spacing:.3px;}
.k-preview.is-loading{background:#f4f8ff;border-color:#cddffd;}
.k-preview.is-loading .k-preview-badge{color:var(--blue);}
.k-preview.is-ready{background:#f2faf6;border-color:#d7ece1;}
.k-preview-badge.in{color:#166b50;background:#dcefe4;}
.k-preview-badge.out{background:#fff0d7;color:#885907;}
.k-preview.is-error{background:#fff5f3;border-color:#f1d5cf;}
.k-preview-badge.error{background:#fce3dd;color:#a83429;}
.k-preview.is-error .k-preview-sub{color:#a83429;}
.employee-details{margin-top:12px;border-top:1px solid #dcebe2;}
.employee-details summary,.k-right summary{display:flex;align-items:center;gap:7px;min-height:44px;list-style:none;cursor:pointer;font-weight:600;font-size:11px;}
summary::-webkit-details-marker{display:none;}
.details-chevron{margin-left:auto;transition:transform .2s;}
details[open]>summary>.details-chevron{transform:rotate(180deg);}
.k-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 12px;}
.k-preview-item-label{font-size:9px;color:var(--muted);margin-bottom:4px;}
.k-preview-item-value{font-size:11px;font-weight:600;overflow-wrap:anywhere;}
.k-preview-location{font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:#48604f;}
.k-preview-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:11px;font-weight:700;}
.k-right{margin-top:13px;color:var(--muted);}
.k-right summary>i:first-child{font-size:17px;}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px 0;}
.keypad button{height:51px;border:1px solid var(--line);border-radius:12px;background:#f7f9fc;color:var(--ink);font-size:19px;font-weight:600;}
.keypad button[data-key="CLR"],.keypad button[data-key="DEL"]{font-size:13px;color:var(--muted);}
.keypad button:active{background:#e8f1ff;border-color:var(--blue);}
.plant-section{min-width:0;border:0;margin:0;padding:0;}
.plant-help{min-height:36px;margin:0 0 15px;font-size:13px;line-height:1.6;color:var(--muted);}
.plant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.plant-pill{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"icon check" "copy copy";align-items:start;gap:16px 5px;min-width:0;padding:16px;cursor:pointer;border:1px solid #dce4ed;border-radius:15px;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s;}
.plant-pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.plant-pill:has(input:not(:disabled)):hover{border-color:#8ab4ee;background:#f7faff;}
.plant-pill:has(input:checked){background:#f0f6ff;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);}
.plant-pill:has(input:focus-visible){outline:3px solid #78b7ff;outline-offset:3px;}
.plant-pill:has(input:disabled){cursor:not-allowed;background:#fafbfd;}
.plant-pill:has(input:disabled) .plant-icon,.plant-pill:has(input:disabled) .plant-copy{opacity:.6;}
.plant-icon{grid-area:icon;width:39px;height:39px;display:grid;place-items:center;background:#f0f4f9;border-radius:11px;color:#56708b;font-size:21px;}
.plant-pill:has(input:checked) .plant-icon{color:var(--blue);background:#dceaff;}
.plant-copy{grid-area:copy;min-width:0;}
.plant-code{display:block;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.5px;}
.plant-name{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere;}
.plant-check{grid-area:check;display:grid;place-items:center;width:18px;height:18px;margin-top:2px;border:1.5px solid #cbd6e2;border-radius:50%;font-size:11px;color:transparent;}
.plant-pill:has(input:checked) .plant-check{background:var(--blue);border-color:var(--blue);color:#fff;}
.plant-footnote{display:flex;align-items:flex-start;gap:6px;margin:15px 0 0;font-size:11px;line-height:1.6;color:var(--muted);}
.plant-footnote i{font-size:13px;margin-top:1px;}
.gps-panel{display:flex;align-items:flex-start;gap:10px;margin-top:17px;padding:13px;background:#f7f9fc;border:1px solid var(--line);border-radius:13px;}
.gps-panel[hidden],.gps-retry[hidden]{display:none !important;}
.gps-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;background:#e9f0fb;color:var(--blue);border-radius:9px;font-size:17px;}
.gps-content{flex:1;min-width:0;}
.gps-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;}
.gps-title{font-size:12px;font-weight:700;}
.gps-status{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;background:#e7edf4;color:#5b6d82;border-radius:5px;font-size:10px;font-weight:700;}
.gps-status::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;}
.gps-detail{margin:7px 0 0;font-size:12px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere;}
.gps-panel[data-state="detecting"] .gps-status{background:#fff0d7;color:#885907;}
.gps-panel[data-state="detecting"] .gps-icon i{animation:kSpin 1.8s linear infinite;}
.gps-panel[data-state="ready"]{border-color:#d4eade;background:#f4faf6;}
.gps-panel[data-state="ready"] .gps-icon,.gps-panel[data-state="ready"] .gps-status{background:#def1e7;color:#166b50;}
.gps-panel[data-state="denied"],.gps-panel[data-state="error"]{background:#fff7f4;border-color:#f0d8d0;}
.gps-panel[data-state="denied"] .gps-status,.gps-panel[data-state="error"] .gps-status{background:#fce4dc;color:#a83429;}
.gps-retry{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:9px;padding:9px 12px;border:1px solid #d7e1ed;border-radius:9px;background:#fff;color:var(--blue);font-size:11px;font-weight:600;}
.support-row{display:flex;justify-content:center;align-items:center;gap:5px;margin:20px 0;color:#6a7d90;font-size:11px;}
.support-row a{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-weight:600;}
.k-actionbar{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:13px 20px calc(16px + env(safe-area-inset-bottom,0px));background:#fffffffa;border-top:1px solid var(--line);box-shadow:0 -6px 30px #102e4906;backdrop-filter:blur(16px);}
.action-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;}
.action-heading{font-size:11px;font-weight:700;}
.action-heading span{margin-right:6px;color:#8393a5;font-size:10px;}
.action-hint{display:flex;align-items:center;gap:5px;margin:0;font-size:10px;color:var(--muted);}
.action-hint i{font-size:13px;}
.action-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-in,.btn-out{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:14px 10px;border:1px solid var(--blue);border-radius:13px;font-size:14px;font-weight:700;transition:background .15s,transform .15s;}
.btn-in{background:var(--blue);color:#fff;box-shadow:0 4px 12px #1768d424;}
.btn-out{background:#fff;color:var(--ink);border-color:#d5dfeb;}
.btn-in i,.btn-out i{font-size:19px;}
.btn-in:not(:disabled):hover{background:#1158ba;}
.btn-out:not(:disabled):hover{background:#f1f6fd;}
.btn-in:not(:disabled):active,.btn-out:not(:disabled):active{transform:scale(.98);}
.btn-in:disabled{background:#e4eaf2;border-color:#e4eaf2;color:#8c9aab;box-shadow:none;}
.btn-out:disabled{background:#f7f9fc;color:#97a3b2;border-color:#e6ebf2;}
.action-footer{margin:9px 0 0;text-align:center;color:#6c7c90;font-size:10px;}
.toast-stack{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:16px;right:16px;z-index:14000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.toastx{display:grid;grid-template-columns:28px 1fr 44px;gap:9px;width:100%;max-width:420px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 10px 40px #102e4926;pointer-events:auto;animation:slideIn .2s ease-out;}
.toastx .ico{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#e6f4ed;color:#166b50;font-weight:700;}
.toastx.error .ico{background:#fce4de;color:#a83429;}
.toastx .ttl{font-size:12px;font-weight:700;}
.toastx .msg{font-size:11px;margin-top:3px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere;}
.toastx .x{display:grid;place-items:center;width:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;font-size:20px;cursor:pointer;color:#74879a;}
.k-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:flex-end;justify-content:center;background:#091e3699;backdrop-filter:blur(5px);}
.k-dialog{position:relative;width:100%;max-width:480px;padding:36px 26px calc(26px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:#fff;text-align:center;box-shadow:0 -10px 60px #071b3b26;animation:sheetIn .25s ease-out;outline:none;}
.k-dialog::before{content:'';position:absolute;top:11px;left:calc(50% - 18px);width:36px;height:4px;border-radius:9px;background:#dce3ec;}
.k-spinner{width:52px;height:52px;margin:4px auto 20px;border:4px solid #e8eff8;border-top-color:var(--blue);border-radius:50%;animation:kSpin .9s linear infinite;}
.k-dialog-title,.k-result-status{font-size:23px;font-weight:700;letter-spacing:-.8px;color:var(--ink);}
.k-dialog-text,.k-result-note{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere;}
.k-result-icon{display:grid;place-items:center;width:67px;height:67px;margin:4px auto 20px;border-radius:22px;font-size:30px;font-weight:600;}
.k-result-icon.success{background:#e4f5eb;color:#16816b;}
.k-result-icon.error{background:#ffebe4;color:#ad4636;}
.k-result-detail{margin:12px 0 0;font-size:13px;font-weight:600;line-height:1.6;overflow-wrap:anywhere;}
.k-result-btn{width:100%;min-height:52px;margin-top:24px;padding:14px 20px;border:0;border-radius:13px;background:var(--blue);color:#fff;font-weight:700;}
.app-splash{position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--navy);color:#fff;pointer-events:none;animation:splashDismiss .3s ease 1s forwards;}
.splash-logo{display:grid;place-items:center;width:104px;height:104px;border-radius:30px;background:#fff;box-shadow:0 0 0 14px #ffffff06,0 0 0 28px #ffffff03;animation:logoEnter .45s ease-out;}
.splash-logo img{width:80px;height:80px;object-fit:contain;}
.splash-title{margin:32px 0 6px;font-size:30px;font-weight:700;letter-spacing:-1px;}
.splash-subtitle{margin:0;color:#c2d3e0;font-size:12px;letter-spacing:.2px;}
.splash-line{width:36px;height:3px;margin-top:32px;border-radius:5px;background:#62d4c0;}
.splash-footer{position:absolute;bottom:calc(35px + env(safe-area-inset-bottom,0px));font-size:9px;letter-spacing:2px;color:#a0b8cb;}
.noscript-note{margin:16px;padding:16px;border-radius:12px;background:#fff0d7;color:#885907;}
@keyframes kSpin{to{transform:rotate(360deg);}}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes sheetIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes logoEnter{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes splashDismiss{to{opacity:0;visibility:hidden;}}
@media(max-width:359px){
  .app-masthead{padding-left:18px;padding-right:18px;}.k-wrap{padding-left:12px;padding-right:12px;}
  .k-top,.k-bottom{padding:16px;}.plant-pill{padding:13px;}.plant-grid{gap:9px;}
  .action-header{align-items:flex-start;flex-direction:column;gap:4px;}.k-actionbar{padding-left:16px;padding-right:16px;}
  .flow-steps{padding:15px 11px;}.flow-step{gap:5px;font-size:10px;}.flow-step:not(:last-child)::after{margin-right:6px;}
  .brand-title{font-size:15px;}.k-actions{gap:6px;}
}
@media(min-width:600px){
  .k-wrap{padding-left:26px;padding-right:26px;}.app-masthead{padding-left:32px;padding-right:32px;}
  .hero-route{right:36px;width:160px;height:160px;}.app-intro h1{font-size:38px;}
  .app-intro p:last-child{max-width:none;}.flow-steps{padding:20px 30px;}.flow-step{font-size:12px;gap:10px;}
  .k-actionbar{padding-left:max(26px,calc((100vw - 700px)/2));padding-right:max(26px,calc((100vw - 700px)/2));}
}
@media(min-width:800px){
  html{scroll-padding-bottom:30px;}.app-shell{max-width:1080px;min-height:calc(100vh - 48px);margin:24px auto;border:1px solid #dbe3ee;border-radius:28px;box-shadow:0 16px 70px #102e490a;}
  .app-masthead{padding:0 42px 51px;border-radius:27px 27px 28px 28px;}.k-header{padding-top:25px;}
  #fullscreenBtn{display:flex;}.app-intro{padding-top:10px;}.app-intro h1{font-size:40px;}
  .hero-route{right:85px;bottom:38px;width:190px;height:190px;}
  .k-wrap{padding:0 30px 10px;}.flow-steps{max-width:650px;margin:0 auto 25px;}
  .k-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;}.k-top,.k-bottom{padding:26px;}
  .k-actionbar{position:static;margin-top:20px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;box-shadow:none;}
  .action-header{margin-bottom:14px;}.action-heading{font-size:12px;}.action-hint{font-size:11px;}.action-footer{margin-top:12px;}
  .k-overlay{align-items:center;padding:24px;}.k-dialog{border-radius:24px;padding:36px;}.k-dialog::before{display:none;}
  .support-row{margin:8px 0 14px;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}*,*::before,*::after{transition:none !important;}
  .gps-panel[data-state="detecting"] .gps-icon i,.k-spinner,.k-dialog,.toastx,.splash-logo{animation:none;}
  .app-splash{animation:splashDismiss .01s linear .1s forwards;}
}