/* SpotCam 量測站 · 共用樣式
   來源：00_設計/faceai-mockup.html（已通過 2026-09-16 的無障礙稽核）
   色票對比實測值見 00_設計/tokens.css 的註解，改色前先重新驗算。

   三條不可以改掉的規則：
   1. 白字不可放在 --brand 上（2.52:1）。主按鈕底色用 --brand-ink。
   2. 疲勞分級 fa 的 Low 代表狀態好，配色不可套「低＝紅」。
   3. af 的 Normal 是 API 預設值不是判讀結果，文案只能寫「未偵測到心律異常」。
*/

:root{
  /* 品牌。對比實測：brand 對白底只有 2.52:1，只能用在填色與圖表線。 */
  --brand:      #0CB2D3;
  --brand-ink:  #087489;  /* 白底文字/連結/主按鈕底色  5.43:1 */
  --brand-edge: #0A97B3;  /* 邊框、圖示                3.45:1 */
  --on-brand:   #FFFFFF;  /* 放在 --brand-ink 上的字   5.43:1 */

  --bg:         #FFFFFF;
  --canvas:     #EEF5F7;
  --surface:    #FFFFFF;
  --sunken:     #F5FAFB;
  --border:     #D9E6EA;
  --text:       #10232A;  /* 16.21:1 */
  --text-muted: #4A6470;
  --muted:      #4A6470;  /*  6.27:1 */

  --ok:    #0F7A4A;  --ok-bg:   #E4F4EC;
  --warn:  #8A5A00;  --warn-bg: #FBF0DC;
  --risk:  #A32222;  --risk-bg: #FBE7E7;

  --r:14px; --r-sm:9px;
  --sans:"Noto Sans TC","Outfit",system-ui,sans-serif;
  --disp:"Outfit","Noto Sans TC",system-ui,sans-serif;
}

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0B1418; --canvas:#070E11; --surface:#122127; --sunken:#0E1A1F;
  --border:#22383F; --text:#E6F1F4; --muted:#9FB6BE;
  --brand-ink:#0CB2D3; --brand-edge:#0CB2D3; --on-brand:#07161B;
  --ok:#4ADE9A; --warn:#E5B25A; --risk:#F08A8A;
  --ok-bg:#12312A; --warn-bg:#33270F; --risk-bg:#351A1A;
}}

:root[data-theme="dark"]{
  --bg:#0B1418; --canvas:#070E11; --surface:#122127; --sunken:#0E1A1F;
  --border:#22383F; --text:#E6F1F4; --muted:#9FB6BE;
  --brand-ink:#0CB2D3; --brand-edge:#0CB2D3; --on-brand:#07161B;
  --ok:#4ADE9A; --warn:#E5B25A; --risk:#F08A8A;
  --ok-bg:#12312A; --warn-bg:#33270F; --risk-bg:#351A1A;
}

*{box-sizing:border-box}

body{background:var(--canvas);color:var(--text);font-family:var(--sans);
  line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}

.appbar{display:flex;align-items:center;gap:10px;padding:8px 16px 12px;
  border-bottom:1px solid var(--border)}

.appbar .t{font-family:var(--disp);font-weight:600;font-size:16px;flex:1}

.back{color:var(--brand-ink);font-size:18px;line-height:1}

.body{padding:16px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:13px 14px}

.list{display:flex;flex-direction:column;gap:10px}

.person{display:flex;align-items:center;gap:12px}

.ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sunken);border:1px solid var(--border);
  font-family:var(--disp);font-weight:600;color:var(--brand-ink);font-size:15px}

.pn{font-weight:500;font-size:15px;display:block}

.pm{font-size:12.5px;color:var(--muted);display:block}

.pv{margin-left:auto;text-align:right;font-family:var(--disp);font-weight:600;
  font-size:19px;font-variant-numeric:tabular-nums;color:var(--text)}

.pv small{display:block;font-size:12px;font-weight:400;color:var(--muted);
  font-family:var(--sans)}

.empty{color:var(--muted);font-size:12.5px;margin-left:auto}

.btn{display:block;width:100%;text-align:center;background:var(--brand-ink);color:var(--on-brand);
  border:0;border-radius:var(--r-sm);padding:13px;font-family:var(--disp);font-weight:600;
  font-size:15.5px;cursor:pointer;margin-top:14px}

.btn.ghost{background:transparent;color:var(--brand-ink);border:1px solid var(--brand-edge)}

.btn.quiet{background:transparent;color:var(--muted);border:1px solid var(--border);
  font-weight:400}

.field{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--sunken);margin-bottom:9px}

.field label{font-size:13px;color:var(--muted);flex:none;width:44px}

.field .val{font-family:var(--disp);font-weight:600;font-size:17px;
  font-variant-numeric:tabular-nums}

.field .u{font-size:12px;color:var(--muted);margin-left:auto}

.hint{font-size:12px;color:var(--muted);margin:2px 0 14px;line-height:1.5}

.tips{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-direction:column;gap:9px}

.tips li{display:flex;gap:9px;font-size:13px;color:var(--text);align-items:flex-start}

.tips .d{width:6px;height:6px;border-radius:50%;background:var(--brand);margin-top:8px;flex:none}

.cam{aspect-ratio:3/4;max-width:100%;border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(165deg,#25454F 0%,#16303a 55%,#0d2028 100%);display:grid;place-items:center}

.oval{width:52%;aspect-ratio:3/4;border:2.5px solid rgba(255,255,255,.92);
  border-radius:50%;box-shadow:0 0 0 9999px rgba(7,20,25,.42)}

.count{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--disp);font-weight:700;font-size:34px;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.5)}

.camhint{position:absolute;bottom:14px;left:14px;right:14px;text-align:center;
  color:#fff;font-size:12.5px;background:rgba(7,20,25,.55);padding:7px 10px;
  border-radius:99px}

.rec{position:absolute;top:20px;left:16px;display:flex;align-items:center;gap:6px;
  color:#fff;font-size:11px;font-weight:500}

.rec i{width:8px;height:8px;border-radius:50%;background:#F05252;display:block}

.steps{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:13px}

.steps li{display:flex;gap:11px;align-items:center;font-size:13.5px}

.steps .mk{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;font-family:var(--disp)}

.steps .done .mk{background:var(--ok-bg);color:var(--ok)}

.steps .now .mk{background:var(--brand-ink);color:var(--on-brand)}

.steps .wait .mk{background:var(--sunken);color:var(--muted);border:1px solid var(--border)}

.steps .wait{color:var(--muted)}

.bar{height:7px;border-radius:99px;background:var(--sunken);overflow:hidden;
  border:1px solid var(--border)}

.bar i{display:block;height:100%;width:58%;background:var(--brand);border-radius:99px}

.hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;text-align:center;margin-bottom:11px}

.hero .lb{font-size:12px;color:var(--muted);letter-spacing:.05em}

.hero .big{font-family:var(--disp);font-weight:300;font-size:58px;line-height:1.02;
  font-variant-numeric:tabular-nums;color:var(--brand-ink);margin:2px 0}

.hero .un{font-size:12.5px;color:var(--muted)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}

.mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 8px;text-align:center;min-width:0}

.mini .k{font-size:12px;color:var(--muted);white-space:nowrap}

.mini .v{font-family:var(--disp);font-weight:600;font-size:19px;
  font-variant-numeric:tabular-nums;line-height:1.25}

.mini .v em{font-style:normal;font-size:12px;color:var(--muted);font-weight:400}

.blk{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;margin-bottom:11px}

.blk h4{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px}

.kv{display:flex;justify-content:space-between;align-items:baseline;
  padding:5px 0;font-size:13.5px;border-bottom:1px solid var(--border)}

.kv:last-child{border-bottom:0}

.kv b{font-family:var(--disp);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}

.kv .rg{font-size:12px;color:var(--muted);margin-left:6px;font-weight:400}

.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;
  font-weight:500;line-height:1.5}

.pill.ok{background:var(--ok-bg);color:var(--ok)}

.pill.warn{background:var(--warn-bg);color:var(--warn)}

/* 🔴 最危險的等級反而沒有樣式——ok 與 warn 都寫了，唯獨 risk 漏掉。
   結果眼口色澤的「貧血風險 高」是一行普通黑字，
   而「低」「正常」卻是綠色藥丸：畫面上最不顯眼的正是最需要注意的那一項。 */
.pill.risk{background:var(--risk-bg);color:var(--risk)}

.pill.neutral{background:var(--sunken);color:var(--muted);border:1px solid var(--border)}

.disc{font-size:12px;color:var(--muted);line-height:1.6;background:var(--sunken);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;margin-top:12px}

.scale{display:flex;gap:3px;margin:8px 0 6px}

.scale i{flex:1;height:7px;border-radius:2px;background:var(--sunken);
  border:1px solid var(--border)}

.scale i.on{background:var(--brand);border-color:var(--brand)}

.scalelb{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

.fail{text-align:center;padding:10px 0 4px}

.fail .ic{width:52px;height:52px;border-radius:50%;background:var(--warn-bg);
  color:var(--warn);display:grid;place-items:center;margin:0 auto 12px;font-size:25px}

.fail h3{font-family:var(--disp);font-size:18px;font-weight:600;margin:0 0 6px}

.fail p{font-size:13.5px;color:var(--muted);margin:0 auto;max-width:34ch}

.why{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;margin-top:16px;text-align:left}

.why h4{font-size:12.5px;margin:0 0 8px;font-weight:600}

.nav{display:flex;border-top:1px solid var(--border);background:var(--surface)}

.nav a{flex:1;text-align:center;padding:9px 0 11px;font-size:10.5px;color:var(--muted);
  text-decoration:none}

.nav a.on{color:var(--brand-ink);font-weight:500}

.nav a svg{display:block;margin:0 auto 2px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.tabs{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}

.tab{font-size:12px;padding:12px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:99px;border:1px solid var(--border);
  color:var(--muted);background:var(--surface);white-space:nowrap}

.tab.on{background:var(--brand-ink);color:var(--on-brand);border-color:var(--brand-ink)}

table{width:100%;border-collapse:collapse;font-size:13px}

th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}

th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}

td.n{font-variant-numeric:tabular-nums;font-family:var(--disp);font-weight:500}

:focus-visible{outline:2px solid var(--brand-edge);outline-offset:2px}

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

/* 登入頁的示範說明。只在 DEMO_AUTOLOGIN=true 時輸出。 */
.demo-note{border:1px solid var(--border);background:var(--sunken);
  border-radius:var(--r);padding:14px 15px;margin-bottom:20px;font-size:13.5px}
.demo-note b{font-family:var(--disp);font-size:14px;display:block;margin-bottom:5px}
.demo-note p{margin:0 0 9px;color:var(--muted)}
.demo-note dl{margin:0 0 11px;display:grid;grid-template-columns:auto 1fr;
  gap:3px 12px;align-items:baseline}
.demo-note dt{color:var(--muted);font-size:12.5px}
.demo-note dd{margin:0;font-family:var(--disp);font-weight:600;
  user-select:all;word-break:break-all}
.demo-note a{color:var(--brand-ink);display:inline-block;min-height:44px;
  display:inline-flex;align-items:center}

/* API token 管理 */
.token-new{border:1px solid var(--brand-edge);background:var(--sunken);
  border-radius:var(--r);padding:13px 14px;margin-bottom:14px}
.token-new b{font-family:var(--disp);font-size:13.5px;display:block;margin-bottom:8px}
.token-new code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;word-break:break-all;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 11px;user-select:all;line-height:1.6}
.token-new p{margin:9px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.token-row{align-items:flex-start;gap:12px}
.token-row small{color:var(--muted);font-size:12px;line-height:1.6;
  font-variant-numeric:tabular-nums}
.linkbtn{background:none;border:0;color:var(--risk);font-size:13px;cursor:pointer;
  padding:0;min-height:44px;font-family:inherit}

/* 語言切換。小而不搶戲，但點得到——每個目標至少 44px 高。 */
.langsw{display:inline-flex;align-items:center;border:1px solid var(--border);
  border-radius:99px;overflow:hidden;background:var(--surface)}
.langsw form{margin:0}
.langsw .on,.langsw button{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:34px;padding:0 10px;font-family:var(--disp);font-weight:600;
  font-size:12.5px;border:0;background:none;cursor:pointer;line-height:1}
.langsw .on{background:var(--brand-ink);color:var(--on-brand);cursor:default}
.langsw button{color:var(--muted)}
.langsw button:hover{color:var(--brand-ink);background:var(--sunken)}

/* 攝影機列表 */
.cam-row{display:flex;align-items:flex-start;gap:12px}
.cam-main{flex:1;min-width:0}
.cam-url{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--muted);margin-top:4px;word-break:break-all}
.cam-stat{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.cam-stat.ok{color:var(--ok)}
.cam-stat.bad{color:var(--risk)}
.cam-act{display:flex;flex-direction:column;gap:6px;flex:none}
.cam-act form{margin:0}
.btn.tiny{width:auto;min-width:64px;min-height:38px;padding:0 12px;font-size:13px;
  margin:0;display:inline-flex;align-items:center;justify-content:center}

/* 報告：每一列指標帶參考範圍與狀態 */
.mrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:11px 0;border-bottom:1px solid var(--border);align-items:baseline}
.mrow:last-child{border-bottom:0;padding-bottom:0}
.mrow .mk{font-size:14px}
.mrow .mv{font-family:var(--disp);font-weight:600;font-size:17px;
  text-align:right;font-variant-numeric:tabular-nums}
.mrow .mv em{font-style:normal;font-size:12px;color:var(--muted);font-weight:400;margin-left:2px}
.mrow .mr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mrow .mb{justify-self:end;font-size:11.5px;font-weight:500;padding:2px 8px;
  border-radius:99px;background:var(--sunken);color:var(--muted)}
.mrow .mb.normal{background:var(--ok-bg);color:var(--ok)}
.mrow .mb.low,.mrow .mb.high{background:var(--warn-bg);color:var(--warn)}
.mrow .mb.elevated{background:var(--warn-bg);color:var(--warn)}

/* 摘要 */
.blk.sum p{margin:0 0 7px;font-size:13.5px;line-height:1.7}
.blk.sum p:last-child{margin-bottom:0}
.blk.sum .ok{color:var(--ok)}
.blk.sum .warn{color:var(--warn)}
.blk.sum .note{color:var(--muted);font-size:12.5px;padding-top:7px;
  border-top:1px solid var(--border);margin-top:9px}

/* 主數值下方的狀態標 */
.hero .st{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:500;
  padding:3px 11px;border-radius:99px;background:var(--sunken);color:var(--muted)}
.hero .st.normal{background:var(--ok-bg);color:var(--ok)}
.hero .st.low,.hero .st.high{background:var(--warn-bg);color:var(--warn)}

/* 示範資料標示。要看得見但不搶走報告本身的注意力。 */
.demobar{display:flex;flex-direction:column;gap:3px;border:1px solid var(--warn);
  background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);
  padding:10px 13px;margin-bottom:14px}
.demobar b{font-family:var(--disp);font-size:13px}
.demobar span{font-size:12.5px;line-height:1.6;opacity:.9}

/* 餐前／餐後。沿用 .field 的外框，只處理裡面那兩顆選項。
   類名加 meal 前綴：站台已經有 .field 與 .opts 之類的通用名字，
   在這個專案類名撞車已經踩過五次了。 */
.field.mealpick{gap:8px}
.mealopts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
/* 🔴 width 與 flex 一定要覆寫回來。
   上面的通用規則 `.field label{width:44px;flex:none}` 也會套到這兩顆選項上
   （同樣是 .field 底下的 label，權重一樣，而那條有宣告 width，這條沒有），
   結果「餐前」被擠成兩個字直排、壓在 radio 圓圈上。
   自動稽核抓不到——它量的是橫向溢出，字在框內擠成一團不算溢出。
   類名撞車在這個專案已經踩到第六次了。 */
.mealopts label{display:inline-flex;align-items:center;gap:6px;font-size:14px;
  padding:7px 11px;border:1px solid var(--border);border-radius:99px;
  background:var(--surface);cursor:pointer;min-height:38px;
  width:auto;flex:0 0 auto;white-space:nowrap;color:var(--text)}
/* 選中的那個要看得出來。只靠原生 radio 的小圓點，在手機上很難分辨。 */
.mealopts label:has(input:checked){border-color:var(--brand-edge);background:var(--sunken);
  color:var(--brand-ink);font-weight:600}
.mealopts input{accent-color:var(--brand-ink);margin:0}

/* 血糖旁邊的餐前／餐後標記。小字、不搶數值的注意力，但一定要在。 */
.mrow .mealtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  font-style:normal;font-size:11px;font-weight:600;
  background:var(--sunken);border:1px solid var(--border);color:var(--muted)}

/* ── API 進站紀錄 ──────────────────────────────────────────────────
   類名一律 al- 前綴。這個站已經被 .species / .tabs / .bar 撞過，
   加元件前先 grep 是最便宜的防線。

   刻意不用表格：390px 放不下九欄，硬塞會讓整頁橫向捲。
   改成一張一張卡片，窄寬兩種視窗都讀得順。 */
.al-filter{margin-bottom:12px}
.al-row{display:flex;gap:8px;flex-wrap:wrap}
.al-filter label{display:block;flex:1 1 auto;min-width:0;margin-bottom:8px}
.al-filter label span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.al-filter input,.al-filter select{width:100%;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--sunken);color:var(--text);font-size:15px;min-height:42px}
.al-kw{display:block}
.al-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.al-actions .btn{width:auto;padding:9px 18px;margin:0}

.al-stat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}

.al-item{padding-top:13px;padding-bottom:13px}
.al-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.al-code{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--text)}
.al-time{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 路徑可能很長。讓它自己換行，不要撐寬整頁。 */
.al-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  word-break:break-all;line-height:1.55;margin-bottom:6px}
.al-method{display:inline-block;margin-right:7px;padding:1px 7px;border-radius:5px;
  background:var(--sunken);border:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--brand-ink)}

.al-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:4px}
.al-meta .al-err{color:var(--risk);font-weight:600}

.al-body{margin-top:8px}
.al-body summary{cursor:pointer;font-size:12.5px;color:var(--brand-ink);padding:3px 0}
/* 內容區塊自己橫向捲，不要讓整頁跟著捲。 */
.al-body pre{margin:6px 0 0;padding:10px 11px;background:var(--sunken);
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.6;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:320px}

.al-pager{margin:6px 0 2px;font-size:13px}
.al-pager svg{width:16px;height:16px;vertical-align:middle}

/* ── 免責聲明同意頁 ─────────────────────────────────────
   全螢幕的一道關卡。文字要看得清楚，不能為了版面好看而縮小。
   🔴 不要把 .consent-body 改成可捲動的小框：
      客戶的要求是「強制顯示」，塞進一個要捲三次才看得完的框裡
      等於沒有顯示。長就讓它長，頁面自己捲。 */
.consent{max-width:520px;margin:0 auto;padding:8px 0 32px}
.consent h1{font-family:var(--disp);font-size:20px;font-weight:600;margin:0 0 16px;line-height:1.4}
.consent-body{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:16px 17px;margin-bottom:20px}
.consent-body p{font-size:14px;line-height:1.85;color:var(--text);margin:0}
.consent-body p+p{margin-top:12px}
.consent-check{display:flex;gap:11px;align-items:flex-start;
  padding:13px 14px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;margin-bottom:14px}
.consent-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--brand)}
.consent-check span{font-size:14px;line-height:1.6}
.consent-err{color:var(--risk);font-size:13.5px;margin:0 0 12px}
.consent .btn:disabled{opacity:.45;cursor:not-allowed}
.consent-foot{font-size:12.5px;color:var(--muted);line-height:1.7;margin:16px 0 0}

/* ── 血糖個人化校準 ─────────────────────────────────────
   放在代謝指標裡、預設收合：多數人不會扎針對照，攤開會讓那一區變得很吵。
   🔴 收合的是「操作入口」不是揭露性文字——那條 note 展開後一定看得到。
   類名一律 calib 前綴。這個站已經被 .species / .tabs / .bar / .sp 撞過。 */
.calib{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.calib summary{font-size:13.5px;color:var(--brand-ink);cursor:pointer;
  min-height:32px;display:flex;align-items:center}
.calibform{display:flex;gap:8px;align-items:center}
.calibform input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:15px;background:var(--surface);color:var(--text)}
.calibform .btn{width:auto;flex:none;margin:0;padding:9px 16px;font-size:14px;min-height:40px}
.calib-err{color:var(--risk);font-size:13px;margin:8px 0 0}

/* ── 轉存 PDF（列印樣式）───────────────────────────────────
   客戶要「直接轉成 PDF 檔案」。做法是列印樣式 + window.print()，
   使用者在列印視窗選「另存為 PDF」，桌面與手機都有這個選項。

   🔴 刻意不加伺服器端的 PDF 引擎。這兩站交付時只有 web / php / db 三個容器，
      為了一個轉存功能多掛一套引擎（或塞一份中文字型進 dompdf）
      會讓客戶自己部署時多一份維護負擔，而且版面要另外維護一套。

   🔴 免責聲明、示範資料標籤、超出範圍的標記一定要印出來。
      被印成 PDF 的那一份會被轉寄、會被列印出來給別人看，
      那時候它已經脫離站台脈絡了，這幾句話是唯一還跟著數字的東西。

   ⚠️ 不要對任何要印的東西用 loading=lazy，會印成空白。
*/
@media print {
  /* 上下留寬一點，給瀏覽器自己的列印頁首（文件標題）與頁尾（頁碼）。 */
  @page { size: A4; margin: 16mm 13mm 16mm; }

  /* 瀏覽器預設不印背景色。狀態標籤（正常／偏高）靠底色分辨，
     不強制列印背景的話會整排變成一樣的灰字，看不出哪一項超出範圍。 */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html, body { background: #fff; height: auto; }
  .shell { max-width: none; min-height: 0; display: block; }
  main { padding: 0; }

  /* 螢幕上的操作元件印出來沒有意義，而且會佔掉半頁 */
  .topbar, .nav, .btn, .share-row, [data-share], [data-share-line],
  details.calib, .locale-switch, form { display: none !important; }

  /* 🔴 但沒有標題的紙不能給人看。
        報告頁有自己的列印抬頭（.printhead），其他頁沒有——
        把導覽列整個藏掉之後，印出來的歷史頁只剩「林淑惠 9/18 74 bpm」，
        沒有任何字說明這是什麼。
        所以只有「沒有 .printhead 的頁面」才把上方標題留著，
        並且拿掉 logo 與右側動作，只留那行字。 */
  body:not(:has(.printhead)) .topbar { display: flex !important;
        position: static; border: 0; border-bottom: 2px solid #087489;
        padding: 0 0 8px; margin-bottom: 10px; background: none; }
  body:not(:has(.printhead)) .topbar img,
  body:not(:has(.printhead)) .topbar .sep,
  body:not(:has(.printhead)) .topbar a { display: none !important; }
  body:not(:has(.printhead)) .topbar .t { font-size: 14pt; }

  /* 卡片在紙上不需要陰影與圓角，但邊框要留——沒有邊框的話
     一整頁數字會糊成一片，看的人分不出哪幾項是同一組。 */
  .blk, .hero { box-shadow: none; border: 1px solid #C9D9DE; border-radius: 4px;
                break-inside: avoid; page-break-inside: avoid; margin-bottom: 8px; }
  .hero .big { font-size: 40px; }

  /* 一項數值不要被切到下一頁 */
  .mrow, .vrow, .sum, .disc { break-inside: avoid; page-break-inside: avoid; }

  /* 免責與揭露性文字：印出來要看得清楚，不可以縮成淺灰小字 */
  .disc, .note, .hint { color: #2B3F46 !important; font-size: 10.5pt; }
  .demobar { border: 1px solid #8A5A00 !important; color: #6B4600 !important; }

  /* 紙上要知道這份是誰的、什麼時候量的、從哪裡來的 */
  .printhead { display: block !important; margin: 0 0 10px; padding-bottom: 8px;
               border-bottom: 2px solid #087489; }
  .printhead .t { font-size: 15pt; font-weight: 600; color: #10232A; }
  .printhead .m { font-size: 9.5pt; color: #4A6470; margin-top: 3px; }

  /* 每一頁都要看得出這是誰的——三頁的健康報告印出來散開之後，
     第二、三頁只剩一堆數字，那種紙不能交給別人看。

     🔴 但不要用 position:fixed 做每頁重複的頁尾。
        Chromium 的分頁輸出不照 bottom 走，bottom:0 與 bottom:-9mm 都會被
        丟到頁面頂端，結果頁尾疊在第一張卡片的標題上。
        （自動檢查還會全過——每一頁都「找得到名字」，是把 PDF 逐頁轉圖
          看才發現版面是壞的。）

        每頁的身分改靠瀏覽器自己的列印頁首：Chrome／Edge／Safari 預設會印
        文件標題與頁碼，而這一頁的 <title> 就是「姓名 · 時間 · SpotCam FaceAI」。
        使用者若自己關掉「頁首及頁尾」，第一頁的 .printhead 仍在。 */
}


/* 列印用的抬頭平常不顯示 */
.printhead { display: none; }

/* 未校準的血糖標記與說明。
   🔴 顏色用警示色不是灰色。這不是補充說明，是「這個數字現在不可信」。 */
.mealtag.uncal{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.calib-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);
  border-radius:var(--r-sm);padding:10px 12px;font-size:13px;line-height:1.7;margin:10px 0 12px}

/* 量測前的血糖校準欄。
   提示沿用 .calib-warn 的警示色：這一格沒填，血糖就是已知偏高的估算。
   「先跳過」放在 .field 外面——.field label 的 44px 寬度規則會把它擠成直排。 */
.calib-pre{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);
  border-radius:var(--r-sm);padding:9px 12px;font-size:13px;line-height:1.65;margin:8px 0 6px}
.calib-skip{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);
  line-height:1.6;margin:4px 0 10px;cursor:pointer}
.calib-skip input{margin:3px 0 0;accent-color:var(--brand-ink);flex:none}
.calibpick input:disabled{opacity:.45}
/* 🔴 上面給了 display:flex，會蓋掉 [hidden]——已校準時「先跳過」還掛在畫面上。 */
.calib-skip[hidden]{display:none}
/* 提示字不要跟填好的數值一樣粗大，否則看起來像已經填了 */
.calibpick input::placeholder{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--muted)}