/* 手機打卡 PWA
   依據：Apple HIG（觸控目標 ≥44pt、安全區域、系統字型）、Material Design 3（觸控目標 48dp、色彩角色、狀態層）、
   WCAG 2.2 AA（文字對比 ≥4.5:1、2.5.8 目標尺寸、2.4.7 焦點可見、不只用顏色表達狀態）、
   web.dev PWA（standalone、theme-color、maskable 圖示）。所有尺寸用 rem，跟著手機「文字大小」設定縮放。 */
:root{
  color-scheme:light dark;
  --primary:#1f3a6e; --on-primary:#fff; --primary-container:#dbe4f6; --on-primary-container:#0f2147;
  --bg:#f4f5f8; --surface:#fff; --surface-2:#eef1f6; --ink:#161b26; --muted:#4f5869; --line:#d9dde5;
  --ok:#17663f; --ok-bg:#e5f4ec; --ok-line:#a6d7bb;
  --warn:#7a4a00; --warn-bg:#fdf3df; --warn-line:#efcf8f;
  --err:#a1231b; --err-bg:#fcebe9; --err-line:#f0b9b3;
  --radius:16px; --tap:48px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --primary:#a9c3f2; --on-primary:#0c1d3f; --primary-container:#25406f; --on-primary-container:#dbe4f6;
    --bg:#0f1420; --surface:#171d2b; --surface-2:#1f2636; --ink:#e7eaf0; --muted:#a6aebd; --line:#2d3546;
    --ok:#8fd8ad; --ok-bg:#16301f; --ok-line:#2c5a3d;
    --warn:#f3c777; --warn-bg:#33270f; --warn-line:#5f4818;
    --err:#f6aca5; --err-bg:#3a1a18; --err-line:#6b2f2a;
    --shadow:none;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--font)}
body{min-height:100dvh;-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
.ico{width:1.25rem;height:1.25rem;flex:none;fill:currentColor}
.ico-lg{width:2rem;height:2rem}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

/* ---------- 頂部列 */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:calc(.75rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right)) .75rem calc(1.25rem + env(safe-area-inset-left));
  background:var(--primary);color:var(--on-primary)}
@media (prefers-color-scheme:dark){.appbar{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}}
.appbar-title{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.appbar-title b{font-size:1.0625rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-sub{font-size:.8125rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{font-size:.875rem;font-weight:500;padding:.25rem .75rem;border-radius:999px;background:rgba(255,255,255,.16);white-space:nowrap;max-width:10.5rem;overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){.who:not(:empty)~.lang-btn #lang-short{display:none}}
.who:empty{display:none}
@media (prefers-color-scheme:dark){.who{background:var(--surface-2)}}
.appbar-end{display:flex;align-items:center;gap:.5rem;min-width:0;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--tap);min-width:var(--tap);padding:0 .625rem;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;background:transparent;color:inherit;font-size:.875rem;font-weight:600;white-space:nowrap}
@media (prefers-color-scheme:dark){.lang-btn{border-color:var(--line)}}
.sheet{width:min(30rem,100%);max-width:100%;margin:auto auto 0;padding:1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom));border:0;
  border-radius:24px 24px 0 0;background:var(--surface);color:var(--ink)}
.sheet::backdrop{background:rgba(10,14,22,.45)}
.sheet h2{font-size:1.125rem;margin:0 0 .75rem}
.lang-list{display:grid;gap:.5rem;margin-bottom:.75rem}
.lang-opt{display:flex;align-items:center;justify-content:space-between;min-height:3.25rem;padding:0 1rem;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);font-size:1.0625rem;text-align:left}
.lang-opt[aria-checked="true"]{border-color:var(--primary);background:var(--primary-container);color:var(--on-primary-container);font-weight:600}
.lang-opt[aria-checked="true"]::after{content:"✓";font-weight:700}
.demo-banner{background:#5b3fa8;color:#fff;text-align:center;font-size:.8125rem;padding:.375rem .75rem}

main{max-width:30rem;margin:0 auto;padding:1rem calc(1rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left))}

/* ---------- 時鐘 */
.clock{text-align:center;padding:.75rem 0 .25rem}
.clock-date{color:var(--muted);font-size:.9375rem;font-weight:500;letter-spacing:.02em}
.clock-time{font-size:3.5rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ---------- 卡片與文字 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.125rem;margin:.75rem 0;box-shadow:var(--shadow)}
.card-head{display:flex;gap:.75rem;align-items:flex-start;color:var(--primary)}
.card-head h1{color:var(--ink)}
h1{font-size:1.25rem;font-weight:600;margin:0 0 .125rem;line-height:1.35}
p{margin:.5rem 0}
.muted{color:var(--muted)}.small{font-size:.875rem}.center{text-align:center;justify-content:center}
.note{display:flex;gap:.5rem;align-items:flex-start;color:var(--muted);font-size:.875rem;margin:.75rem 0;text-wrap:pretty}
.note.center span{text-wrap:balance;text-align:left}
.note .ico{width:1.125rem;height:1.125rem;margin-top:.1rem}

/* ---------- 步驟 */
.steps{display:flex;gap:.5rem;list-style:none;padding:0;margin:1rem 0 .25rem;counter-reset:s}
.steps li{flex:1;counter-increment:s;font-size:.8125rem;color:var(--muted);padding-top:.5rem;border-top:3px solid var(--line)}
.steps li::before{content:counter(s) "．";font-weight:600}
.steps li.on{color:var(--primary);border-color:var(--primary);font-weight:600}

/* ---------- 表單 */
.field{display:block;margin:.875rem 0;font-size:.875rem;font-weight:500;color:var(--muted)}
input,select{display:block;width:100%;min-height:var(--tap);margin-top:.375rem;padding:.75rem .875rem;font:400 1.0625rem/1.3 var(--font);
  color:var(--ink);background:var(--surface);border:1px solid #8a93a5;border-radius:12px;-webkit-appearance:none;appearance:none}
input::placeholder{color:#6a7285}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 28%,transparent)}
.note-field{margin:1rem 0 .75rem}
.req-mark{color:var(--warn);font-weight:600}
.chk{display:flex;gap:.625rem;align-items:flex-start;min-height:var(--tap);padding:.5rem 0}
.chk input{width:1.375rem;height:1.375rem;min-height:0;margin:.1rem 0 0;flex:none;-webkit-appearance:auto;appearance:auto}

/* ---------- 按鈕 */
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3.25rem;padding:.75rem 1rem;
  border:0;border-radius:999px;font-size:1.0625rem;font-weight:600;transition:filter .15s,transform .1s}
.btn-primary{background:var(--primary);color:var(--on-primary);margin-top:.5rem}
.btn-tonal{background:var(--primary-container);color:var(--on-primary-container)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:default}
.recover{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.recover p{margin:0 0 .5rem}

/* ---------- 打卡主按鈕 */
.punch-wrap{display:flex;justify-content:center;padding:1rem 0 .25rem}
.punch-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;
  width:12.5rem;height:12.5rem;border-radius:50%;border:0;background:var(--primary);color:var(--on-primary);
  font-size:1.75rem;font-weight:700;letter-spacing:.08em;
  box-shadow:0 0 0 .625rem color-mix(in srgb,var(--primary) 14%,transparent),0 10px 24px color-mix(in srgb,var(--primary) 30%,transparent);
  transition:transform .12s,box-shadow .2s}
.punch-ico{width:3.25rem;height:3.25rem}
.punch-btn:active{transform:scale(.97)}
.punch-btn[disabled]{cursor:progress}
.punch-btn[aria-busy="true"]::after{content:"";position:absolute;inset:-.625rem;border-radius:50%;
  border:3px solid transparent;border-top-color:var(--primary);animation:spin 1s linear infinite}
.punch-btn[aria-busy="true"] #punch-label{font-size:1.0625rem;letter-spacing:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 結果與訊息（顏色＋圖示＋文字，不只靠顏色） */
.result,.alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:var(--radius);padding:1rem 1.125rem;margin:1rem 0;border:1px solid}
.result .ico,.alert .ico{width:1.75rem;height:1.75rem;margin-top:.05rem}
.result.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.result.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.result .res-body{color:var(--ink);min-width:0}
.result .big{font-size:1.25rem;font-weight:700;line-height:1.35;margin-bottom:.125rem}
.result.ok .big{color:var(--ok)}.result.warn .big{color:var(--warn)}
.result .small{color:var(--muted);margin-top:.25rem}
.alert{background:var(--err-bg);border-color:var(--err-line);color:var(--err);font-weight:500}
.alert::before{content:"";flex:none;width:1.5rem;height:1.5rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 其他功能 */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.5rem;margin:.75rem 0}
.actions .action{font-size:.8125rem;line-height:1.25;text-align:center}
.action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:4.25rem;padding:.5rem .25rem;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--primary);font-size:.875rem;font-weight:500;box-shadow:var(--shadow)}
.action span{color:var(--ink)}
.action:active{background:var(--surface-2)}
.link{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .5rem;border:0;background:none;color:var(--primary);font-weight:600}

/* ---------- 紀錄 */
.card-title{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:.25rem}
#history ul{list-style:none;margin:0;padding:0}
#history li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-height:3.25rem;padding:.625rem 0;border-bottom:1px solid var(--line);font-size:.9375rem}
#history li:last-child{border:0}
.h-time{font-weight:600;font-variant-numeric:tabular-nums}
.h-sub{display:block;font-size:.8125rem;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border-radius:999px;font-size:.8125rem;font-weight:600;white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.warn{background:var(--warn-bg);color:var(--warn)}.tag.bad{background:var(--err-bg);color:var(--err)}
.tag.ok::before{content:"✓"}.tag.warn::before{content:"…"}.tag.bad::before{content:"✕"}

/* ---------- 診斷、提示、測試工具 */
.diag{word-break:break-all}
.diag-row{padding:.25rem 0;border-bottom:1px dashed var(--line)}
.diag-actions{display:flex;gap:.5rem;margin-top:.5rem}
.install{border:2px solid var(--primary)}
.install h2{font-size:1.125rem;font-weight:600;margin:0 0 .125rem;color:var(--ink)}
.howto{list-style:none;counter-reset:h;margin:1rem 0 .5rem;padding:0;display:grid;gap:.625rem}
.howto li{counter-increment:h;display:flex;gap:.75rem;align-items:center;min-height:3rem;font-size:.9375rem}
.howto li::before{content:counter(h);flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--primary);color:var(--on-primary);
  display:grid;place-items:center;font-weight:700;font-size:.875rem}
.howto-ico{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:10px;background:var(--surface-2);color:var(--primary)}
.btn-text{background:none;color:var(--primary);min-height:var(--tap);margin-top:.25rem}
.alert-inline{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);border-radius:12px;padding:.75rem;font-size:.9375rem;font-weight:500}
.callout{background:var(--primary-container);color:var(--on-primary-container);border-radius:14px;padding:1rem;margin:1rem 0}
.callout p{margin:.375rem 0}
.callout .btn{margin:.625rem 0 .25rem}
.demo{border-style:dashed;border-color:#9c88d8;background:color-mix(in srgb,#9c88d8 10%,var(--surface))}
.inbox{list-style:none;margin:6px 0 0;padding:0}.inbox li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:6px 0;font-size:.875rem}

@media (prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}
@media (min-height:760px){.punch-btn{width:13.5rem;height:13.5rem}}