/* ── 列印模組：A4 檔案卡／考察單／路綫資料冊 ─────────────────────
   A4 = 210×297mm。列印時 @page 邊界設 0，由 .card-page 自己留 12mm，
   避免瀏覽器邊界與頁面留白重疊造成內容被裁切或產生空白頁。
   顏色以深色字＋淡底＋框線為主，即使列印對話框沒勾「背景圖形」仍可讀。   */

@page { size: A4; margin: 0; }

.card-controls {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end;
  margin: .8rem 0 .4rem;
}

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn {
  background: var(--card); color: var(--ink); border: 0; padding: .4rem .8rem;
  font: inherit; font-size: .9rem; cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line-strong); }
.seg-btn.active { background: var(--accent, #0f766e); color: #fff; }

.card-hint { font-size: .82rem; color: var(--ink-soft); margin: .3rem 0 .9rem; }
/* .field 在 style.css 是 display:flex，會蓋掉瀏覽器預設的 [hidden]{display:none}，
   導致三種模式的欄位同時出現 → 這裡強制隱藏未選取的欄位。 */
.card-controls [hidden] { display: none !important; }
.card-sheet-wrap { overflow-x: auto; padding: .4rem 0 1rem; }
.card-sheet { display: flex; flex-direction: column; gap: 1.4rem; zoom: .5; }

/* ── A4 頁面 ─────────────────────────────────────────────── */
.card-page {
  width: 210mm; min-height: 292mm; padding: 12mm; box-sizing: border-box;
  background: #fff; color: #111827; border-radius: 2px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  font-size: 10.5pt; line-height: 1.5;
}
.card-page h2 { font-size: 16.5pt; margin: .05rem 0 0; color: #0f766e; line-height: 1.25; }
.card-page h3 {
  font-size: 10.5pt; margin: .75rem 0 .35rem; color: #0f766e;
  border-bottom: 1px solid #cbd5e1; padding-bottom: .12rem;
}
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 2.5px solid #0f766e; padding-bottom: .45rem; margin-bottom: .8rem;
}
.card-kicker { margin: 0; font-size: 8pt; letter-spacing: .1em; color: #0f766e; }
.card-tags { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.tag {
  border: 1px solid #0f766e; color: #0f766e; border-radius: 999px;
  padding: .06rem .45rem; font-size: 8.5pt; white-space: nowrap;
}
.card-body { display: grid; grid-template-columns: 60mm 1fr; gap: 7mm; align-items: start; }

.card-photo { margin: 0; }
.card-photo img { width: 100%; height: auto; border: 1px solid #cbd5e1; border-radius: 2px; display: block; }
.card-photo figcaption { font-size: 7pt; color: #4b5563; margin-top: .25rem; line-height: 1.35; }
.card-photo-empty {
  height: 58mm; border: 1px dashed #94a3b8; display: flex; align-items: center;
  justify-content: center; text-align: center; color: #64748b; font-size: 9pt;
}
.card-qr { margin-top: .6rem; text-align: center; }
.card-qr svg { width: 32mm; height: 32mm; }
.card-qr p { font-size: 8pt; margin: .2rem 0 0; color: #374151; }
.card-url { font-size: 6.5pt; color: #6b7280; word-break: break-all; line-height: 1.3; }

/* 優先保育名單：封面兩欄 + 名次表（欄位多，字要小一點才不會爆框） */
.card-sub { font-size: 9pt; color: #334155; margin: .15rem 0 0; }
.card-head.compact { padding-bottom: .3rem; margin-bottom: .4rem; }
.card-table.prio { font-size: 7.6pt; }
.card-table.prio th { width: auto; background: #f1f5f9; }
.card-table.prio td { padding: .12rem .22rem; }
.card-table.prio .small { font-size: 6.9pt; line-height: 1.25; }
/* 名單是長表格：一定要允許跨頁，否則整張表會被推到下一張紙（實測 50 列從 3 頁變 6 頁） */
.card-table.prio { page-break-inside: auto; break-inside: auto; }
.card-table.prio thead { display: table-header-group; }
.card-table.prio tr { page-break-inside: avoid; break-inside: avoid; }

.card-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.card-table th, .card-table td { border: 1px solid #cbd5e1; padding: .16rem .32rem; text-align: left; vertical-align: top; }
.card-table th { background: #f1f5f9; font-weight: 600; color: #0f172a; width: 30%; }
.card-form th { width: auto; }
/* 現場量測與觀察：填寫空間不足（2026-09-27 使用者回報）。
   ① 這張紙的左欄原本固定 60mm，四欄的表每格只有約 13mm 寬，手寫數字寫不下；
      改成 95mm（左欄）＋1fr（右欄：勾選／照片／素描）。
   ② 表格改成固定欄寬：標籤 23%、填寫格 27%，四個欄位正好 100%（標籤欄變窄，
      填寫格變寬；標籤字級 8.5pt，長標籤換行但不影響填寫）。
   ③ 填寫格高度 7.5mm → 13mm（約可寫兩行手寫字），七列共多出約 39mm；紙上仍留約 30mm 空白。 */
.card-form-page .card-body { grid-template-columns: 95mm 1fr; }
.card-form { table-layout: fixed; }
/* 標籤欄字級略小：欄寬變窄後長標籤（例如「健康狀況（健康／一般／需關注／瀕危）」）
   才不會換成四行；填寫格維持 9pt 不動。 */
.card-form th { font-size: 8.5pt; }
.card-form th:nth-child(odd) { width: 23%; }
.card-form td:nth-child(even) { width: 27%; }
.card-form td { height: 13mm; }
.card-list th { width: auto; text-align: left; }

/* 行動清單（v0.16.0）
   注意：.card-body 預設是「60mm ＋ 1fr」兩欄版面，表格若放在窄欄裡會被壓成 227px 寬
   （實測：每列折成 4 行、整份 12 頁）。行動清單是整頁寬的表格，因此改成單欄。 */
.card-actions .card-body { grid-template-columns: 1fr; gap: 0; }
.card-actions .card-table { font-size: 8pt; }
.card-actions .card-table th, .card-actions .card-table td { padding: .12rem .22rem; }
.card-actions .card-notes { margin: .2rem 0 0 1rem; padding: 0; font-size: 8pt; }
.card-actions .card-notes li { margin: .12rem 0; }
/* 欄寬一律固定：不指定的話，瀏覽器的自動表格版面會把長文字欄（依據／為什麼）
   壓成「一行兩三個字」，整張表從 3 頁變成 16 頁（v0.16.0 實測）。 */
.card-actions .card-table.action-summary { table-layout: fixed; }
.card-actions .card-table.action-summary th:nth-child(1) { width: 15%; }
.card-actions .card-table.action-summary th:nth-child(3) { width: 10%; }
.card-actions .card-table.action-rows { table-layout: fixed; }
.card-actions .card-table.action-rows th:nth-child(1) { width: 8%; }
.card-actions .card-table.action-rows th:nth-child(2) { width: 8%; }
.card-actions .card-table.action-rows th:nth-child(3) { width: 13%; }
.card-actions .card-table.action-rows th:nth-child(4) { width: 7%; }
.card-actions .card-table.action-rows th:nth-child(5) { width: 9%; }
.card-actions .card-table.action-rows th:nth-child(6) { width: 9%; }
.card-actions .card-table.action-rows th:nth-child(7) { width: 7%; }

.card-desc { font-size: 9pt; margin: .2rem 0 .4rem; }
.card-muted { color: #6b7280; }
.card-checklist { list-style: none; padding: 0; margin: 0; font-size: 9pt; }
.card-checklist li { display: flex; gap: .35rem; align-items: flex-start; margin-bottom: .22rem; }
.card-checklist .box {
  width: 3.4mm; height: 3.4mm; border: 1px solid #334155; display: inline-block;
  margin-top: .15rem; flex: none;
}
.card-checklist em { font-style: normal; color: #6b7280; font-size: 7.5pt; }
/* A4 考察單只能一頁：勾選欄橫向展開，讓 15 個勾選格壓在幾行內 */
.card-checklist.card-check-inline {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), auto);
  justify-content: start;
  column-gap: 4mm;
  row-gap: .1rem;
}
.card-checklist.card-check-inline li { margin-bottom: 0; }
.card-photo-area { height: 15mm; border-style: dashed; }

.card-note { border: 1px solid #cbd5e1; border-left: 3px solid #0f766e; padding: .45rem .6rem; font-size: 8.5pt; }
.card-note h3 { margin-top: 0; border: 0; }
.card-note ol, .card-note ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.card-sketch { margin-top: .7rem; }
.sketch-area { height: 38mm; border: 1px dashed #94a3b8; }

.card-foot { margin-top: .7rem; border-top: 1px solid #cbd5e1; padding-top: .28rem; font-size: 7pt; color: #4b5563; }

/* 政策方案摘要（mode=policy）：單欄、表格字小一點，好讓一頁放得下一個方向 */
.card-policy .card-body { grid-template-columns: 1fr; gap: 0; }
.card-policy .card-head { align-items: flex-start; }
.card-policy .card-meta { text-align: right; font-size: 7pt; color: #4b5563; margin: 0; }
.card-policy .card-meta p { margin: 0; }
.card-policy h3 { margin: .5rem 0 .2rem; font-size: 10pt; }
.card-policy .card-table { font-size: 7.8pt; }
.card-policy .card-table th, .card-policy .card-table td { padding: .12rem .22rem; }
.card-policy .card-table.small { font-size: 7.4pt; }
.card-policy .card-src { padding-left: 5mm; font-size: 6.8pt; margin: .2rem 0; }
.card-policy .card-src li { margin-bottom: 1mm; }
.card-policy .card-src .tiny { font-size: 6.2pt; word-break: break-all; }
.card-foot p { margin: .1rem 0; }

/* ── 路綫資料冊 ──────────────────────────────────────────── */
.card-map { width: 100%; height: auto; border: 1px solid #cbd5e1; display: block; }
.book-cover h3, .book-stop h3 { font-size: 12.5pt; border: 0; }
.book-stats { display: flex; gap: 1.2rem; flex-wrap: wrap; list-style: none; padding: 0; margin: .4rem 0 .7rem; font-size: 9pt; }
.book-cover-foot { display: flex; gap: 1rem; align-items: center; margin-top: .6rem; font-size: 8.5pt; }
.book-cover-foot .card-qr { margin-top: 0; }
.book-stop-foot { display: flex; gap: .8rem; align-items: flex-start; margin-top: .6rem; }
.book-stop-foot .card-note { flex: 1; }
.book-stop-foot .card-qr { margin-top: 0; }
.book-stop-foot .card-qr svg { width: 26mm; height: 26mm; }

@media (max-width: 820px) {
  .card-sheet { zoom: .34; }
}

/* ── 列印 ───────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 0; }
  /* 外層留白必須歸零：body／main／分頁容器只要多出幾 mm，
     內容就會超過 297mm 而多印出一張空白頁（實測 1 頁紙變 2 頁）。 */
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  main, #main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body > main { display: block !important; }
  body::before, body::after { display: none !important; }
  .site-header, .site-footer, .skip-link, .card-controls, .card-hint,
  .view-title, .view-sub { display: none !important; }
  /* 只印 A4 頁面本身：頁首頁尾、示範模式橫幅（main 底下 prepend 的 .notice）、
     其他分頁、以及列印分頁裡的控制列全部排除。
     少了這幾條，橫幅會佔掉第一頁，卡片被擠到第二頁、再多出一張空白頁。 */
  body > *:not(main) { display: none !important; }
  main > *:not(section.view) { display: none !important; }
  /* 只印「目前顯示」的那一個分頁就好：其他分頁本來就掛著 hidden 屬性（display:none），
     不需要、也不該寫死成「只印列印分頁」——那樣在政策方案／優先保育等分頁按 ⌘P，
     會得到一張完全空白的 A4（2026-09-27 實測：595×842pt、文字 0 字）。 */
  main > section.view[hidden] { display: none !important; }
  #view-card > *:not(.card-sheet-wrap) { display: none !important; }
  #view-card { padding: 0 !important; }
  .card-sheet-wrap { overflow: visible !important; padding: 0; }
  .card-sheet { zoom: 1 !important; gap: 0; display: block; }
  .card-page {
    box-shadow: none !important; border-radius: 0 !important; margin: 0 !important;
    page-break-after: always; break-after: page; page-break-inside: avoid;
  }
  .card-page:last-child { page-break-after: auto; break-after: auto; }
  .card-body, .book-cover, .book-stop { page-break-inside: avoid; }
  .card-table { page-break-inside: avoid; }
}

/* ── 一般分頁列印（v1.0.3）─────────────────────────────────
   在政策方案、優先保育、監測等分頁直接按 ⌘P 時，紙上也要看得懂：
   ① 一律用淺色輸出 —— 深色模式（prefers-color-scheme: dark）下變數是深底淺字，
      直接印會整張黑（還很吃碳粉），這裡把變數覆蓋回淺色。
   ② 互動元件不印：按鈕、篩選器、頁籤、排序列、彈出面板、提示。
   ③ 紙邊留白：A4 頁面卡自己留 12mm（@page 邊界是 0），一般分頁用卡片 margin 類比。
   ④ 表格可跨頁、表頭每頁重印、單列不切斷；長表格不會被裁掉。
   ⑤ 陰影／圓角／模糊等螢幕效果不印（紙上只會變髒）。 */
@media print {
  :root {
    --ink: #111; --ink-soft: #333; --ink-mute: #555;
    --paper: #fff; --card: #fff; --line: #bbb; --line-strong: #999;
    --link: #166534; --shadow: none;
    --green-100: #e8f5ec; --amber-100: #fdf3d7; --red-100: #fdeaea; --blue-100: #e8effd;
    color-scheme: light;
  }
  main > section.view:not(#view-card) {
    padding: 0 !important; max-width: none !important; font-size: 11pt;
  }
  main > section.view:not(#view-card) :is(
    .btn, .btn-row, .chips, .chip, .pager, .toolbar, .search-box, #filters, .filters,
    .sort-bar, .card-controls, .card-hint, #modal, .modal, .modal-backdrop, .toast,
    .notice, .demo-banner, nav.tabs, .tabs, button, select, .leaflet-control-container
  ) { display: none !important; }
  /* 篩選欄位本身也印不出東西（下拉、輸入框都是互動元件），
     只留下「符合條件 50 株／共 658 株」這種結果摘要。少了這條會印出一堆空標籤。 */
  main > section.view:not(#view-card) .field { display: none !important; }

  main > section.view:not(#view-card) :is(.card, .page-head, figure, .note, .callout) {
    box-shadow: none !important; border-radius: 0 !important;
    background: #fff !important; border-color: #bbb !important;
    margin: 6mm 12mm !important; padding: 3mm 4mm !important;
  }
  main > section.view:not(#view-card) .table-wrap { overflow: visible !important; }
  /* 螢幕樣式把「每一張卡片」都設成不跨頁（style.css 的 @media print 裡 .card 有
     page-break-inside: avoid），紙上就會出現大片空白：整張政策依據表放不進剩下的
     版面，只好整張跳到下一頁。這裡把「大容器」改回可跨頁；小的行動卡、表格列維持
     整塊不切斷，閱讀上比較清楚。 */
  main > section.view:not(#view-card) :is(.card, .table-wrap, table, tbody) {
    break-inside: auto !important; page-break-inside: auto !important;
  }
  main > section.view:not(#view-card) table {
    width: 100% !important; margin: 0 !important; border-collapse: collapse;
    font-size: 10pt;
  }
  main > section.view:not(#view-card) thead { display: table-header-group; }
  main > section.view:not(#view-card) tfoot { display: table-footer-group; }
  main > section.view:not(#view-card) tr { break-inside: avoid; page-break-inside: avoid; }
  main > section.view:not(#view-card) :is(h2, h3) { break-after: avoid; page-break-after: avoid; }
  /* 紙上寬度是 A4（約 793px），三欄的格線會把每欄壓到 260px 左右，
     中文變成每行兩三個字就斷行（實測政策方案的行動卡就是這樣壞掉）。
     所以列印時多欄一律收成單欄，小的卡片（統計數字、照片、QR）兩欄。 */
  main > section.view:not(#view-card) :is(.grid, .grid-2, .grid-3, .split, .map-layout, .policy-actions) {
    grid-template-columns: 1fr !important;
  }
  main > section.view:not(#view-card) :is(.grid-4, .photo-grid, .qr-sheet) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  main > section.view:not(#view-card) .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* 標籤／數值兩欄的表：固定欄寬，數值欄才不會被擠成一條細長條。 */
  main > section.view:not(#view-card) table.kv { table-layout: fixed; }
  main > section.view:not(#view-card) table.kv th { width: 15%; }
  main > section.view:not(#view-card) table.kv td { width: 85%; }
  main > section.view:not(#view-card) a[href^="http"]::after { content: "" !important; }
}