/* ============================================================
   docs/ 底下三份文件共用的皮：只用 tokens.css 的變數，不自帶配色。
   結構類別（.doc-hero / .doc-toc / .prose）三份共用；
   假綠燈的卡（.trap）與資料邊界的圖版（figure）各自的類別也放這裡，方便一起改。
   ============================================================ */

/* ---------- 文件頂部：小標、主標、引言、數字 ---------- */
.doc-hero { padding-top: 4rem; }
.doc-hero h1 { font-size: clamp(1.7rem, 4.2vw, 2.8rem); font-weight: 800; letter-spacing: .01em; line-height: 1.25; max-width: 20ch; }
.doc-hero h1 em { font-style: normal; color: var(--amber); }
.doc-hero .lede { color: var(--text-2); font-size: clamp(1rem, 1.6vw, 1.1rem); max-width: 54rem; text-wrap: pretty; margin-top: 1.4rem; line-height: 1.8; }   /* ch 以「0」計寬，中文字是兩倍，用 rem 才對得上 */
.doc-hero .lede strong, .doc-hero .lede b { color: var(--text-1); font-weight: 600; }
.doc-hero .meta { margin-top: 1.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-3); }
.doc-hero .meta b { color: var(--green-2); font-family: var(--font-mono); font-size: .95rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em; color: var(--text-2); border: 1px solid var(--line); background: var(--bg-1); border-radius: 999px; padding: .35rem .9rem; margin-bottom: 1.4rem; }
.eyebrow b { color: var(--amber); }

/* 文件內的章節捷徑：一排 chips，手機可橫捲 */
.doc-toc { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.doc-toc a { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .7rem; transition: color .2s, border-color .2s; }
.doc-toc a:hover { color: var(--text-1); border-color: var(--cyan); }

/* ---------- 正文排版 ---------- */
.prose { color: #cbd5e1; line-height: 1.8; max-width: 72ch; }
.prose p { margin: .8rem 0; }
.prose strong, .prose b { color: var(--text-1); font-weight: 600; }
.prose ol, .prose ul { padding-left: 1.4rem; margin: .8rem 0; }
.prose li { margin: .4rem 0; }
.prose li::marker { color: var(--green-2); font-weight: 700; }
.prose q { font-style: normal; color: var(--text-1); background: var(--bg-2); padding: .1rem .4rem; border-radius: 4px; box-decoration-break: clone; }
.prose code, .doc code { font-family: var(--font-mono); font-size: .85em; background: var(--bg-2); border: 1px solid var(--line); padding: .1rem .45rem; border-radius: 5px; color: var(--text-2); }
.doc h3 { font-size: 1.1rem; margin: 1.8rem 0 .5rem; color: var(--text-1); }

/* 章節：與首頁 section.block 同節奏，章名旁邊帶數量 */
.cat-h { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.6rem; }
.cat-n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-3); border: 1px solid var(--line); padding: .2rem .6rem; border-radius: 6px; }

/* 開頭的「每次都要問」：一塊浮起的面板 */
.always { margin-top: 2.4rem; padding: 1.4rem 1.6rem; }
.always h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.always ol { margin: 0; padding-left: 1.4rem; color: #cbd5e1; line-height: 1.85; max-width: 64ch; }
.always li { margin-bottom: .4rem; }
.always li::marker { color: var(--green-2); font-weight: 700; }

/* ---------- 假綠燈：一型一張卡 ---------- */
.traps { display: grid; gap: 1rem; }
.trap { overflow: hidden; scroll-margin-top: 5.5rem; padding: 0; }
.trap-h { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.4rem; background: var(--bg-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
.tid { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); letter-spacing: .05em; }
.trap-h h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.trap-b { padding: 1.2rem 1.4rem 1.4rem; }
.case { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.8; }
.case b { color: var(--amber); font-weight: 600; }
.lbl { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--green-2); margin-bottom: .45rem; text-transform: uppercase; }
.asks { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.asks ul { margin: 0; padding-left: 1.2rem; color: var(--text-1); font-size: .9rem; line-height: 1.8; }
.asks li { margin-bottom: .45rem; }
.fix, .danger { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--line); color: var(--text-3); font-size: .88rem; line-height: 1.75; }

/* ---------- 資料邊界：白底圖版（SVG 是印刷風配色，不重繪，放在亮色面板上） ---------- */
.plate { margin: 1.2rem 0 .6rem; background: #fbfcfd; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem .9rem; overflow-x: auto; }
.plate svg { display: block; width: 100%; height: auto; min-width: 660px; }
figcaption { font-size: .8rem; color: var(--text-3); margin-top: .6rem; padding: 0 .3rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 1.2rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; vertical-align: top; color: #cbd5e1; }
.doc th { background: var(--bg-2); color: var(--text-1); font-weight: 600; }
.doc td.k { font-weight: 600; white-space: nowrap; background: var(--bg-1); color: var(--text-1); }
.tag { display: inline-block; font-size: .72rem; padding: .05rem .5rem; border-radius: 20px; border: 1px solid currentColor; white-space: nowrap; }
.t-local { color: var(--green-2); } .t-cloud { color: var(--blue-2); } .t-leak { color: #f87171; } .t-warn { color: var(--amber); }
.callout { margin-top: 1.2rem; border-left: 4px solid #f87171; background: rgba(248,113,113,.08); padding: .8rem 1rem; border-radius: 0 8px 8px 0; font-size: .9rem; color: #cbd5e1; }
.callout.ok { border-left-color: var(--green); background: rgba(16,185,129,.08); }
.callout b { color: var(--text-1); font-weight: 700; }
.script { padding: .4rem 1.4rem 1.1rem; margin-top: 1.2rem; }
.script ol { padding-left: 1.3rem; } .script li { margin: .7rem 0; font-size: .9rem; color: #cbd5e1; }

/* ---------- 資安頁：步驟卡與「您會看到什麼」 ---------- */
.stepgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.stepgrid .card h3 { font-size: 1.02rem; margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .5rem; }
.stepgrid .card h3 .n { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; color: var(--cyan); }
.stepgrid .card p { color: var(--text-2); font-size: .9rem; }
.stepgrid .card ul { margin: .6rem 0 0; padding-left: 1.1rem; color: #cbd5e1; font-size: .88rem; }
.stepgrid .card li { margin: .3rem 0; }
.evidence { margin-top: 2rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
@media (max-width: 820px) { .evidence { grid-template-columns: 1fr; } }
.evidence .card h3 { font-size: 1rem; margin-bottom: .5rem; }
.evidence .card ul { padding-left: 1.1rem; color: #cbd5e1; font-size: .9rem; }
.evidence .card li { margin: .35rem 0; }
.evidence .card.no { opacity: .85; }

/* 文件尾：說明＋兩顆按鈕 */
.doc-end { padding: 3rem 0 4rem; }
.doc-end .prose { max-width: 66ch; }
.doc-end .cta { margin-top: 1.4rem; display: flex; gap: .7rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .trap-h, .trap-b { padding-left: 1rem; padding-right: 1rem; }
  .doc-hero .meta { gap: 1rem; }
}
@media print {
  .top, footer, .board, .doc-toc { display: none !important; }
  body { background: #fff; color: #000; }
  .plate svg { min-width: 0; }
}