/* ===========================================================
   /360 檢測頁與報告頁的元件樣式 — 只讀 tokens.css 的 token，不新增顏色
   規則：實色平面、無描邊；卡片右下切角；平台主按鈕靛藍；
   teal＝AI 說話、螢光黃＝你在這裡開口（一個構圖一次）；
   細線只出現在資料表列之間；口說句用字典襯線（.tm-speech）
   =========================================================== */
*{box-sizing:border-box}
html,body{background:var(--tm-desk);margin:0}
body{font-size:16px;line-height:1.75;padding:36px 16px 64px}
.sheet{max-width:640px;margin:0 auto;background:var(--tm-sheet);padding:30px 38px 40px;box-shadow:var(--tm-shadow)}

/* — 頁首：wordmark ＋ 唯一的 2px 錨定線 — */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:var(--tm-rule-anchor) solid var(--tm-rule)}
.wordmark{font-family:var(--tm-f-display);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1.1}
.wordmark span{color:var(--tm-brand)}
.wordmark small{display:block;font-family:var(--tm-f-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tm-ink-45);margin-top:6px}
.doctype{font-family:var(--tm-f-mono);font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--tm-ink-45);text-align:right;white-space:nowrap}
.who{font-size:13px;color:var(--tm-ink-70);text-align:right}
.who b{color:var(--tm-ink);font-weight:700}

/* — 進度：三格，進行中靛藍反白、完成打勾 — */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:22px 0 24px;padding:0}
.steps li{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--tm-mist);padding:8px 4px;font-family:var(--tm-f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tm-ink-45);font-weight:700}
.steps li.active{background:var(--tm-brand);color:var(--tm-on-brand)}
.steps li.done{background:var(--tm-brand-wash);color:var(--tm-brand-deep)}
.steps li.done::after{content:"check";font-family:"Material Symbols Rounded";font-size:14px;font-variation-settings:'FILL' 1,'wght' 500;text-transform:none;letter-spacing:0}

/* — 按鈕：控制項是填色、無外框；平台主按鈕靛藍 — */
button,.btn{font:inherit;font-family:var(--tm-f-body);font-weight:700;font-size:15px;letter-spacing:.02em;padding:14px 24px;border:0;border-radius:999px;cursor:pointer;background:var(--tm-brand);color:var(--tm-on-brand);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background-color .15s,transform .15s}
button:hover:not(:disabled),.btn:hover{background:var(--tm-brand-deep)}
button:disabled{opacity:.4;cursor:not-allowed}
button.wide{width:100%}
button.quiet{background:var(--tm-mist);color:var(--tm-ink-70)}
button.quiet:hover:not(:disabled){background:var(--tm-hair);color:var(--tm-ink)}
button .tm-icon{font-size:20px}

/* — 作答框：正方形、填色平面、切角 — */
.stage{background:var(--tm-wash);aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;padding:26px 28px}
.hidden{display:none!important}
.status{font-family:var(--tm-f-mono);font-size:12px;letter-spacing:.02em;color:var(--tm-ink-45);min-height:1.6em;margin:12px 0 0;text-align:center}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--tm-f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tm-brand);font-weight:700}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--tm-hair)}

/* — 歡迎頁 — */
.hero-title{font-family:var(--tm-f-display);font-weight:800;font-size:24px;line-height:1.35;letter-spacing:0;margin:0 0 6px}
.hero-sub{color:var(--tm-ink-70);font-size:14.5px;margin:0 0 20px}
.journey{text-align:center;font-size:12.5px;line-height:2;color:var(--tm-ink-45);margin:0 0 22px}
.journey b{color:var(--tm-ink-70)}
.journey i{font-style:normal;color:var(--tm-ink-25);margin:0 2px}
.checklist{background:var(--tm-wash);padding:18px 20px 16px;margin:0 0 20px}
.checklist .k{display:inline-block;font-family:var(--tm-f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tm-brand);margin:0 0 10px}
.checklist ol{margin:0;padding:0;counter-reset:c}
.checklist li{list-style:none;position:relative;padding-left:28px;font-size:13.5px;line-height:1.8;counter-increment:c}
.checklist li+li{margin-top:8px}
.checklist li::before{content:counter(c) ".";position:absolute;left:2px;top:0;font-family:var(--tm-f-mono);font-weight:700;color:var(--tm-brand)}
.checklist li b{font-weight:700}
.gate{background:var(--tm-mist);padding:22px 24px;text-align:center}
.gate p{margin:0 0 14px;font-size:14.5px;color:var(--tm-ink-70)}
.month{display:flex;justify-content:space-between;gap:12px;font-family:var(--tm-f-mono);font-size:11.5px;color:var(--tm-ink-45);margin:0 0 16px}

/* — 朗讀：口說句用字典襯線 — */
.read-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.read-kind{font-family:var(--tm-f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tm-brand)}
.read-count{font-family:var(--tm-f-mono);font-size:11.5px;color:var(--tm-ink-45)}
.read-line{font-size:25px;line-height:1.5;margin:0 0 6px}

canvas.wave{width:100%;height:40px;opacity:0;transition:opacity .2s;margin:12px 0 4px}
canvas.wave.active{opacity:1}

/* — 語音球：teal＝AI 說話，靛藍＝等你，螢光黃＝你在說（本頁唯一的螢光黃） — */
.scenario-brief{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:var(--tm-ink-70);max-width:52ch}
.scenario-tag{display:inline-block;align-self:flex-start;font-family:var(--tm-f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--tm-brand-deep);background:var(--tm-brand-wash);padding:5px 12px;margin-bottom:6px}
.orb-stage{text-align:center;padding:8px 0 4px;margin:auto 0}
.orb{position:relative;width:128px;height:128px;margin:26px auto 0}
.orb-core{position:absolute;inset:21px;border-radius:50%;background:var(--tm-brand);transition:background-color .3s,transform .3s}
.orb::before,.orb::after{content:"";position:absolute;inset:21px;border-radius:50%;border:2px solid var(--tm-teal);opacity:0}
.orb.speaking .orb-core{background:var(--tm-teal);animation:pulse 1.6s ease-in-out infinite}
.orb.speaking::before{animation:ripple 1.6s ease-out infinite}
.orb.speaking::after{animation:ripple 1.6s ease-out .8s infinite}
.orb.listening .orb-core{background:var(--tm-brand);animation:breathe 2.4s ease-in-out infinite}
.orb.recording .orb-core{background:var(--tm-marker);animation:pulse 1s ease-in-out infinite}
.orb-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.orb-ring circle{fill:none;stroke-width:4}
.orb-ring-track{stroke:var(--tm-hair)}
.orb-ring-fill{stroke:var(--tm-brand);stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset 1s linear,stroke .3s}
.orb.recording .orb-ring-fill{stroke:var(--tm-marker-deep)}
.orb-hint{font-size:14px;color:var(--tm-ink-70);margin:14px 0 2px;min-height:1.6em}
.countdown{font-family:var(--tm-f-mono);font-size:24px;font-weight:700;color:var(--tm-brand);margin:0;line-height:1.3}
.countdown.warning{color:var(--tm-drop)}
#countdown.hidden{display:block!important;visibility:hidden}
.rec-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--tm-f-mono);font-size:10.5px;letter-spacing:.14em;font-weight:700;color:var(--tm-marker-deep);min-height:1.4em}
.rec-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--tm-marker-deep);animation:blink 1s steps(1) infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes blink{50%{opacity:0}}

/* — 全場限時：視窗最上緣的一條軸，無文字 — */
.timebar{position:fixed;top:0;left:0;right:0;height:4px;background:var(--tm-hair);z-index:50}
.timebar span{display:block;height:100%;width:0;background:var(--tm-brand);transition:width 1s linear,background-color .6s}
.timebar.urgent span{background:var(--tm-drop)}

/* — 產生報告：柱狀生長 → 打勾 — */
.analysing{text-align:center}
.report-anim{position:relative;height:68px;width:128px;margin:0 auto 16px}
.report-bars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:8px}
.report-bars span{width:11px;background:var(--tm-brand);animation:grow 1.1s ease-in-out infinite alternate}
.report-bars span:nth-child(1){animation-delay:0s;height:34%}
.report-bars span:nth-child(2){animation-delay:.12s;height:55%;background:var(--tm-lv3)}
.report-bars span:nth-child(3){animation-delay:.24s;height:42%}
.report-bars span:nth-child(4){animation-delay:.36s;height:68%;background:var(--tm-lv3)}
.report-bars span:nth-child(5){animation-delay:.48s;height:48%}
.report-bars span:nth-child(6){animation-delay:.6s;height:60%}
@keyframes grow{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.report-check{position:absolute;inset:0;margin:auto;width:58px;height:58px;opacity:0}
.report-check circle,.report-check path{fill:none;stroke:var(--tm-brand);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.report-check path{stroke-dasharray:30;stroke-dashoffset:30}
.report-anim.done .report-bars{display:none}
.report-anim.done .report-check{opacity:1;animation:pop .45s ease-out}
.report-anim.done .report-check path{animation:draw .5s ease-out .2s forwards}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* — 兩個按鈕（看到報告之前） — */
.choice h2{font-family:var(--tm-f-display);font-weight:800;font-size:22px;margin:0 0 8px;text-align:center}
.choice p{font-size:14px;color:var(--tm-ink-70);text-align:center;margin:0 0 20px;line-height:1.8}
.choice .row{display:grid;gap:10px}
.choice small{display:block;text-align:center;font-family:var(--tm-f-mono);font-size:11px;color:var(--tm-ink-45);margin-top:12px}

/* — 逾時／錯誤 — */
.timeout-box{text-align:center}
.timeout-box .tm-icon{font-size:44px;color:var(--tm-drop);margin-bottom:10px}
.timeout-box h2{font-family:var(--tm-f-display);font-weight:800;font-size:20px;margin:0 0 10px}
.timeout-box p{font-size:14px;color:var(--tm-ink-70);line-height:1.9;margin:0 auto;max-width:30em}
.error{color:var(--tm-drop);font-size:14px;line-height:1.8;margin:0 0 18px;text-align:center}

footer{display:flex;justify-content:space-between;gap:14px;margin-top:26px;padding-top:12px;border-top:1px solid var(--tm-hair);font-family:var(--tm-f-mono);font-size:10px;color:var(--tm-ink-45);line-height:1.7}
footer a{color:var(--tm-brand);text-decoration:none;font-weight:700}

@media (max-width:640px){
  html,body{background:var(--tm-sheet)}
  body{padding:16px 0 40px}
  .sheet{box-shadow:none;padding:18px 20px 30px}
  .doctype{display:none}
}