/* OSH Workforce Preview — 版面與元件（手機優先，沿用 Artifact v5 的 UX 元件） */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.ic{flex:none;display:block}
.muted{color:var(--ink3)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}
.boot{padding:40px 16px;text-align:center;color:var(--ink3)}

/* ---------- shell ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;min-height:56px}
.top-title{flex:1;min-width:0;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-chip{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;background:var(--signal);color:var(--signal-ink);font-weight:700;min-height:40px}
.spacer{flex:1}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;position:relative;color:var(--ink);flex:none}
.icon-btn:active{background:var(--surface2)}
.badge{position:absolute;top:3px;right:calc(50% - 24px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;border:2px solid var(--surface)}
.av{--av:#3B6EA8;width:34px;height:34px;border-radius:50%;background:var(--av);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.av-lg{width:52px;height:52px;font-size:21px}
.page{padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px));max-width:760px;margin:0 auto}
.page.narrow{max-width:480px}
.preview-ribbon{background:repeating-linear-gradient(135deg,var(--signal) 0 10px,#15202B 10px 20px);height:4px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line2);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:12px;color:var(--ink3);position:relative;min-height:58px;text-decoration:none}
.tab.on{color:var(--ink);font-weight:700}
.tab.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--signal)}
.side{display:none}
@media (min-width:900px){
  .tabbar{display:none}
  .side{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;bottom:0;left:0;width:224px;padding:18px 12px;background:var(--surface);border-right:1px solid var(--line2);z-index:25}
  .side .brand{margin:0 6px 18px}
  .side a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--ink2);text-decoration:none;font-weight:600;position:relative}
  .side a.on{background:var(--surface2);color:var(--ink);box-shadow:inset 3px 0 0 var(--signal)}
  .side .badge{position:static;margin-left:auto;border:0}
  .main{margin-left:224px}
  .page{padding-bottom:48px}
}

/* ---------- type ---------- */
.h1{font-size:24px;line-height:1.3;font-weight:800;margin:4px 0 4px}
.h2{font-size:18px;font-weight:800;margin:0}
.lead{color:var(--ink2);margin:0 0 14px}
.eyebrow{font-size:13px;color:var(--ink3)}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:22px 2px 8px}
.sec h2{font-size:15px;font-weight:800;margin:0;color:var(--ink2)}
.sec .link{font-size:14px;color:var(--info);font-weight:600;padding:6px 0}

/* ---------- list rows ---------- */
.list{background:var(--surface);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.list>*+*{border-top:1px solid var(--line2)}
.list>.hz+*{border-top:0}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px 12px 14px;min-height:60px;background:var(--surface);text-align:left;text-decoration:none}
button.row:active,a.row:active{background:var(--surface2)}
.rowx{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-t{font-weight:700;line-height:1.35}
.row-s{font-size:13.5px;color:var(--ink3);line-height:1.4}
.chev{color:var(--ink3);flex:none}
.cnt{min-width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;flex:none;padding:0 6px}
.cnt-bad{background:var(--bad-bg);color:var(--bad)}
.cnt-warn{background:var(--warn-bg);color:var(--warn)}
.cnt-info{background:var(--info-bg);color:var(--info)}
.cnt-ok{background:var(--ok-bg);color:var(--ok)}
.cnt-mute{background:var(--mute-bg);color:var(--mute)}
.lead-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--surface2);color:var(--ink2);flex:none}
.ph-av{width:40px;height:40px;border-radius:12px;background:var(--mute-bg);color:var(--ink2);display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}
.ph-av.lg{width:56px;height:56px;border-radius:16px;font-size:22px}
.hz{height:6px;background:repeating-linear-gradient(135deg,var(--signal) 0 9px,#15202B 9px 18px)}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:7px;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap}
.tag.sm{font-size:11.5px;padding:2px 7px}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-bad{background:var(--bad-bg);color:var(--bad)}
.tag-info{background:var(--info-bg);color:var(--info)}
.tag-mute{background:var(--mute-bg);color:var(--mute)}
.tag-line{background:transparent;border:1px solid var(--line);color:var(--ink2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border-radius:12px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn.signal{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.btn.danger{color:var(--bad)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--info)}
.btn.sm{min-height:40px;padding:6px 12px;font-size:14.5px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns>.btn{flex:1 1 auto}
.link-btn{display:inline-flex;align-items:center;gap:4px;color:var(--info);font-weight:600;padding:8px 0;min-height:40px}
.sticky-cta{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:15;margin:18px -16px 0;padding:12px 16px;background:linear-gradient(to top,var(--bg) 72%,transparent)}
@media (min-width:900px){.sticky-cta{bottom:0}}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:14px}
.panel+.panel{margin-top:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0}
.kv dt{color:var(--ink3);font-size:14px;white-space:nowrap}
.kv dd{margin:0;font-weight:600;min-width:0;word-break:break-word}
.note{display:flex;gap:10px;padding:11px 12px;border-radius:12px;background:var(--surface2);color:var(--ink2);font-size:14px;line-height:1.5}
.note .ic{margin-top:2px}
.note.info{background:var(--info-bg);color:var(--info)}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.bad{background:var(--bad-bg);color:var(--bad)}
.note.ok{background:var(--ok-bg);color:var(--ok)}
.empty{text-align:center;padding:24px 16px;color:var(--ink3)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.bar{height:8px;border-radius:4px;background:var(--mute-bg);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ok);border-radius:4px}
.grp-h{font-size:13px;font-weight:800;color:var(--ink3);margin:16px 4px 6px}

/* status grid on person page */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;min-width:0}
.fact small{display:block;font-size:12.5px;font-weight:700;color:var(--ink3);margin-bottom:4px}
.fact .sub{display:block;font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.4}
.person-head{display:flex;gap:14px;align-items:center;margin:4px 0 14px}

/* ---------- forms ---------- */
.field{margin:0 0 16px}
.field>label,.field>.lbl{display:block;font-weight:700;margin:0 0 6px}
.field .hint{font-size:13px;color:var(--ink3);margin-top:5px}
.field .warnmsg{font-size:13.5px;color:var(--warn);margin-top:5px;font-weight:600}
.input{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font-size:16px}
.input:focus{outline:none;border-color:var(--focus)}
textarea.input{resize:vertical;min-height:76px;line-height:1.45}
.searchbox{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:52px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);width:100%;color:var(--ink3)}
.searchbox input{border:0;background:transparent;flex:1;min-width:0;font-size:16px;outline:none;min-height:48px;color:var(--ink)}
.searchbox:focus-within{border-color:var(--focus)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:7px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;display:inline-flex;align-items:center;gap:6px;font-size:15px}
.chip.on{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{flex:none}
.cbox{width:26px;height:26px;border-radius:7px;border:2px solid var(--line);flex:none;display:grid;place-items:center;color:var(--on-primary);background:var(--surface)}
.cbox.on{background:var(--primary);border-color:var(--primary)}

/* stage grid */
.stg{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
.stg button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);text-align:left;min-height:68px}
.stg button b{font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.stg button span{font-size:12.5px;color:var(--ink3);font-weight:700;line-height:1.3}
.stg button.on{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.stg .bad b{color:var(--bad)}.stg .warn b{color:var(--warn)}.stg .ok b{color:var(--ok)}.stg .info b{color:var(--info)}

/* flow strip / track */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 3px;font-size:13px;font-weight:700;color:var(--ink2)}
.flow span{padding:4px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line2)}
.flow span.done{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.flow span.cur{background:var(--primary);color:var(--on-primary);border-color:transparent}
.flow .ic{color:var(--ink3)}
.track{display:flex;flex-direction:column;margin:4px 0}
.trk{display:flex;align-items:center;gap:10px;padding:5px 0;color:var(--ink3);font-size:14.5px}
.trk .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);flex:none;background:var(--surface)}
.trk.done{color:var(--ink2)} .trk.done .dot{background:var(--ok);border-color:var(--ok)}
.trk.cur{color:var(--ink);font-weight:800} .trk.cur .dot{border-color:var(--primary);box-shadow:0 0 0 4px var(--info-bg);background:var(--primary)}

/* timeline */
.tl{display:flex;gap:12px;padding:11px 14px;background:var(--surface);align-items:flex-start}
.tl-d{min-width:50px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.3;font-size:14.5px}
.tl-d small{display:block;font-weight:600;color:var(--ink3);font-size:12px}
.tl-b{flex:1;min-width:0}
.tl-b .row-s{margin-top:2px}

/* attendance */
.att-row{display:flex;align-items:center;gap:8px 10px;padding:10px 12px 10px 14px;background:var(--surface);flex-wrap:wrap}
.att-seg{display:flex;gap:4px;background:var(--mute-bg);padding:3px;border-radius:11px;margin-left:auto}
.att-seg button{min-height:40px;padding:4px 10px;border-radius:8px;font-weight:700;font-size:14.5px;color:var(--ink2)}
.att-seg button.on.ok{background:var(--ok);color:#fff}
.att-seg button.on.bad{background:var(--bad);color:#fff}
.att-seg button.on.warn{background:var(--surface);color:var(--warn);box-shadow:inset 0 0 0 2px var(--warn)}

/* file preview */
.xl{background:#fff;color:#111;border:1px solid var(--line2);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.xl table{border-collapse:collapse;font-size:12.5px;min-width:640px;width:100%}
.xl th,.xl td{border:1px solid #cfcfcf;padding:6px 7px;white-space:nowrap;text-align:left}
.xl th{background:#f1f1f1;font-weight:700}
.xl .y{background:#FFF2CC}.xl .g{background:#E2EFDA}.xl .na{color:#8a8a8a;background:#fafafa}

/* login */
.brand{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;border-radius:12px;background:#15202B;color:var(--signal);display:grid;place-items:center;flex:none}
.brand-name{font-weight:800;font-size:18px;line-height:1.2}
.brand-sub{font-size:13px;color:var(--ink3)}
.who{display:grid;gap:10px;margin-top:14px}
.who-btn{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line2);min-height:76px;box-shadow:var(--shadow);width:100%;text-align:left}
.who-btn:active{background:var(--surface2)}
.who-name{font-weight:800;font-size:19px}
.who-role{color:var(--ink3);font-size:14px;margin-left:auto;margin-right:4px}
.pin-dots{display:flex;gap:18px;justify-content:center;margin:22px 0 10px}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink2)}
.pin-dots i.on{background:var(--ink);border-color:var(--ink)}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.pin-msg{text-align:center;min-height:24px;color:var(--ink3);font-size:14px;margin:0 0 12px}
.pin-msg.bad{color:var(--bad);font-weight:700}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto}
.key{height:66px;border-radius:18px;background:var(--surface);border:1px solid var(--line2);font-size:26px;font-weight:600;display:grid;place-items:center;box-shadow:var(--shadow)}
.key:active{background:var(--mute-bg)}
.key.fn{background:transparent;border-color:transparent;box-shadow:none;font-size:16px;color:var(--ink2)}

/* sheets / toast / dialog */
#sheet-root{position:fixed;inset:0;z-index:60;display:none}
#sheet-root.open{display:block}
.scrim{position:absolute;inset:0;background:var(--scrim);animation:fade .18s ease}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--sheet);border-radius:20px 20px 0 0;padding:6px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .22s cubic-bezier(.2,.8,.2,1);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (min-width:700px){.sheet{left:50%;right:auto;width:560px;transform:translateX(-50%);bottom:auto;top:8vh;border-radius:18px;max-height:84vh;animation:fade .18s ease}}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 8px}
.sheet-h{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.sheet-h h3{flex:1;margin:0;font-size:18px;font-weight:800}
@keyframes up{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
#toast-root{position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;justify-content:center;pointer-events:none;padding:0 14px}
.toast{pointer-events:auto;border:1px solid rgba(255,255,255,.14);background:#15202B;color:#fff;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:520px;width:100%;animation:up .2s ease;font-weight:600}
.toast button{color:var(--signal);font-weight:800;padding:6px 4px;margin-left:auto;white-space:nowrap}
#dialog-root{position:fixed;inset:0;z-index:95;display:none;place-items:center;background:var(--scrim);padding:24px}
#dialog-root.open{display:grid}
.dlg{width:100%;max-width:340px;border-radius:16px;background:var(--sheet);overflow:hidden;animation:fade .15s ease;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.dlg .t{padding:18px 18px 6px;font-weight:800;font-size:17px;line-height:1.35}
.dlg .d{padding:0 18px 16px;font-size:14.5px;color:var(--ink2)}
.dlg .b{display:flex;gap:10px;padding:0 14px 14px}
.dlg .b .btn{flex:1}

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