/* A4 讲义版式（手写）。网页显示、浏览器打印、PDF 导出共用同一套规则。规范见 docs/print-design.md */

:root {
  --ink: #1d2430;
  --muted: #555;
  --line: #e1e4e9;
  --soft: #f3f5f8;
  --accent: #c8102e;
  --sheet-font: "Noto Sans CJK SC", "Noto Sans SC", "Noto Sans", sans-serif;
}

/* 命名页面：不能叫 portrait / landscape，Chrome 不认 */
@page pgP { size: 210mm 297mm; margin: 0; }
@page pgL { size: 297mm 210mm; margin: 0; }

/* ---------- 纸张 ---------- */
.sheet-stack { position: relative; }

.sheet {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto 24px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--sheet-font);
  line-height: 1.35;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .2);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  zoom: var(--s, 1); /* app.js 按容器宽度写入 --s，使整张 A4 等比缩放 */
}
.sheet-portrait { page: pgP; width: 210mm; height: 297mm; padding: 9mm 10mm 8mm; }
.sheet-landscape { page: pgL; width: 297mm; height: 210mm; padding: 8mm 7mm 6mm; }
.sheet-body { display: flex; flex-direction: column; height: 100%; }
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }

.folio { position: absolute; bottom: 3mm; font-size: 7.3pt; color: var(--muted); }

/* ---------- 页眉 ---------- */
.sheet-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6mm;
  margin-bottom: 2mm;
  padding-bottom: 1.6mm;
  border-bottom: 1.6pt solid var(--ink);
}
.sheet-header h1 { margin: 0; font-size: 17pt; font-weight: 700; letter-spacing: .5pt; }
.sheet-header h1 small { margin-left: 3mm; font-size: 10pt; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.sheet-meta { flex: none; font-size: 7.5pt; color: var(--muted); text-align: right; line-height: 1.35; }

/* ---------- 表格 ---------- */
.rtable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8.3pt; }
.rtable th {
  padding: 1.3mm 1.2mm;
  background: var(--ink);
  color: #fff;
  font-size: 7.6pt;
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
}
.rtable th.num, .rtable td.num { text-align: right; }
.rtable th.ctr { text-align: center; }
.rtable td {
  height: 4.82mm;
  padding: 0 1.2mm;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: .3pt solid var(--line);
}
.rtable tbody tr:nth-child(even) td { background: var(--soft); }
.rtable td.rk { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.rtable td.ab { font-weight: 700; letter-spacing: .4pt; }
.rtable td.num { font-variant-numeric: tabular-nums; }
.rtable td.pop { font-weight: 700; }
.rtable td.rg { font-size: 7.6pt; color: #333; }
.rtable tfoot td {
  height: 5.4mm;
  border-top: 1pt solid var(--ink);
  border-bottom: 0;
  background: #fff;
  font-weight: 700;
}
.rtable tr.row-flash td { background: #fff3b0 !important; }

/* 分类色：变量由 /lessons/{slug}/theme.css 按 data.json 生成 */
.cat-bar { box-shadow: inset 3px 0 0 var(--bar); }
.dot {
  display: inline-block;
  width: 2.6mm;
  height: 2.6mm;
  margin-right: 1mm;
  border: .6pt solid var(--bar);
  border-radius: .6mm;
  background: var(--fill);
  vertical-align: -.35mm;
}
.star { margin-left: .8mm; font-size: 7pt; color: var(--accent); }
.sheet-meta .lg { margin: 0 0 0 3mm; }
.legend .star { margin: 0 1mm 0 0; }

/* ---------- 页脚 ---------- */
.sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4mm;
  margin-top: auto;
  padding-top: 1.8mm;
  font-size: 7.3pt;
  color: #444;
}
.lg { margin-right: 3.5mm; white-space: nowrap; }
.map-note { display: block; margin-top: .6mm; }
.sheet-footer-right { flex: none; }

/* ---------- 地图 ---------- */
.map-wrap { position: relative; flex: 1; min-height: 0; }
.us-map { display: block; width: 100%; height: 100%; }
.us-map .mab { font-weight: 700; fill: var(--ink); }
.us-map .men { fill: #333; }
.us-map .mzh { fill: var(--ink); font-weight: 500; }
.us-map .inset { fill: none; stroke: #9aa3ad; stroke-width: .7; stroke-dasharray: 3 2; }
.us-map .ttl { font-size: 9px; fill: #777; }
.us-map path[data-abbr] { cursor: pointer; transition: opacity .1s; }
.us-map path[data-abbr]:hover { opacity: .78; }
.map-zoom-btn {
  position: absolute;
  top: 2mm;
  right: 2mm;
  padding: 1.6mm 3.4mm;
  border: 1px solid var(--line);
  border-radius: 1mm;
  background: #fff;
  font: inherit;
  font-size: 9pt;
  color: var(--ink);
  cursor: pointer;
}
.map-zoom-btn:hover { background: var(--soft); }

/* 悬停提示 */
.map-tip {
  position: fixed;
  z-index: 70;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(29, 36, 48, .96);
  color: #fff;
  font: 13px/1.5 var(--sheet-font);
  pointer-events: none;
}
.map-tip b { font-size: 15px; }

/* 放大模态框 */
.map-modal { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: rgba(15, 20, 30, .94); }
.map-modal-bar { display: flex; flex: none; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.map-modal-bar button {
  min-width: 40px;
  padding: 6px 12px;
  border: 1px solid #5a6472;
  border-radius: 6px;
  background: #1d2430;
  color: #fff;
  font: 14px var(--sheet-font);
  cursor: pointer;
}
.map-modal-bar button:hover { background: #2c3646; }
.map-modal-bar .spacer { flex: 1; }
.map-rotate { display: none; }
@media (orientation: portrait) { .map-rotate { display: inline-block; } }
.map-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
.map-pan { position: absolute; inset: 0; }
.map-rot { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: top left; }
.map-rot.rotated { left: 100%; transform: rotate(90deg); }
.map-rot svg { display: block; width: 100%; height: 100%; background: #fff; }
html.modal-open { overflow: hidden; }

/* ---------- 游客水印与打印限制 ---------- */
.wm-guest {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: url("/wm/guest.svg") repeat;
  pointer-events: none;
}
.print-trace, .print-notice { display: none; }

/* ---------- 书籍模式（导出 PDF 与后台预览） ---------- */
@page pgB { size: 216mm 303mm; margin: 0; } /* 封面封底带 3mm 出血时使用 */

.book-page.recto { padding-left: 16mm; } /* 右页：装订边在左，内侧边距加 6mm */
.book-page.verso { padding-right: 16mm; } /* 左页：装订边在右 */
.book-page .folio { bottom: 3.2mm; font-size: 8pt; }
.book-page.recto .folio { right: 10mm; }
.book-page.verso .folio { left: 10mm; }
.sheet.blank { background: #fff; }

/* 横版页放到竖版纸上：整页顺时针旋转 90° */
.sheet .rot-box {
  position: absolute;
  top: 0;
  width: 297mm;
  height: 204mm;
  padding: 8mm 7mm 6mm;
  transform-origin: 0 0;
  transform: translateX(204mm) rotate(90deg);
}
.book-page.recto .rot-box { left: 6mm; }
.book-page.verso .rot-box { left: 0; }
.rot-box .sheet-body { height: 100%; }

.sheet-bleed { page: pgB; width: 216mm; height: 303mm; }

/* 封面、封底 */
.sheet.part-cover, .sheet.part-backcover { padding: 0; background: #1d2430; color: #fff; }
.cover, .backcover { display: flex; flex-direction: column; height: 100%; padding: 26mm 22mm 20mm; }
.sheet-bleed .cover, .sheet-bleed .backcover { padding: 29mm 25mm 23mm; }
.cover-top { margin: 0; font-size: 10pt; letter-spacing: 2pt; color: #aab2bf; }
.cover-main, .backcover-main { margin: auto 0; }
.cover-title { margin: 0; font-size: 38pt; font-weight: 700; line-height: 1.25; }
.cover-rule { width: 26mm; height: 2.2mm; margin: 9mm 0; background: var(--accent); }
.cover-sub { margin: 0; font-size: 15pt; color: #d4d9e1; }
.cover-swatches { display: flex; height: 5mm; margin-bottom: 10mm; }
.cover-swatches i { flex: 1; }
.cover-swatches .sw1 { background: #3b6fb6; }
.cover-swatches .sw2 { background: #3f8f3a; }
.cover-swatches .sw3 { background: #d07a1c; }
.cover-swatches .sw4 { background: #7c55b0; }
.cover-foot, .backcover-foot { margin: 0; font-size: 10pt; line-height: 1.7; color: #aab2bf; }
.backcover-title { margin: 0; font-size: 26pt; font-weight: 700; line-height: 1.3; }
.backcover-sub { margin: 0 0 6mm; font-size: 13pt; color: #d4d9e1; }
.backcover-text { margin: 0; max-width: 120mm; font-size: 10.5pt; line-height: 1.9; color: #c4cad4; }

/* 版权页 */
.copyright { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; font-size: 9pt; line-height: 1.7; color: #333; }
.copyright p { margin: 0; }
.copyright-title { font-size: 13pt; font-weight: 700; }
.copyright dl { display: grid; grid-template-columns: 20mm 1fr; margin: 5mm 0; }
.copyright dt { color: #777; }
.copyright dd { min-height: 1.7em; margin: 0; }
.copyright-note { margin-top: 2mm !important; font-size: 8.5pt; color: #555; }

/* 前言、目录、附录 */
.part-heading { margin: 0 0 8mm; padding-bottom: 2mm; border-bottom: 1.6pt solid var(--ink); font-size: 20pt; font-weight: 700; }
.preface p { margin: 0 0 4mm; font-size: 10.5pt; line-height: 1.85; text-indent: 2em; }
.preface h3 { margin: 7mm 0 3mm; font-size: 12pt; font-weight: 700; }
.preface ul { margin: 0; padding-left: 5mm; list-style: disc; font-size: 10.5pt; line-height: 1.8; }
.preface li { margin-bottom: 1.5mm; }
.preface-modules { display: grid; grid-template-columns: 38mm 1fr; margin: 0; font-size: 10pt; line-height: 1.7; }
.preface-modules dt { font-weight: 700; }
.preface-modules dd { margin: 0; color: #444; }
.preface-sign { margin-top: 8mm !important; text-align: right; text-indent: 0 !important; }

.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-module { margin: 6mm 0 1.5mm; padding-bottom: 1mm; border-bottom: .5pt solid #c9ced6; font-size: 12pt; font-weight: 700; }
.toc-key { margin-right: 2mm; color: var(--accent); }
.toc-lesson { display: flex; align-items: baseline; gap: 3mm; font-size: 10.5pt; line-height: 2; }
.toc-num { flex: none; width: 18mm; color: #777; }
.toc-dots { flex: 1; border-bottom: 1pt dotted #999; transform: translateY(-1mm); }
.toc-page { flex: none; width: 10mm; text-align: right; font-variant-numeric: tabular-nums; }

.appendix-note { margin: 0 0 6mm; font-size: 9.5pt; color: #555; }
.glossary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; margin: 0; }
.glossary-row { display: flex; gap: 3mm; padding: 1.5mm 0; border-bottom: .3pt solid var(--line); font-size: 9pt; line-height: 1.5; }
.glossary-row dt { flex: none; width: 21mm; font-weight: 700; }
.glossary-row dd { margin: 0; color: #444; }

/* ---------- 窄屏：重排模式（< 820px），同一份 HTML 换成响应式排版 ---------- */
@media screen and (max-width: 819px) {
  .sheet { zoom: 1; width: auto; height: auto; margin-bottom: 16px; padding: 14px; font-size: 14px; }
  .sheet-portrait, .sheet-landscape { width: auto; height: auto; padding: 14px; }
  .sheet-body { height: auto; }
  .sheet-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sheet-header h1 { font-size: 20px; }
  .sheet-header h1 small { display: block; margin: 2px 0 0; font-size: 13px; }
  .sheet-meta { text-align: left; font-size: 12px; }
  .sheet-footer { flex-direction: column; align-items: flex-start; margin-top: 12px; font-size: 12px; }

  .rtable, .rtable tbody, .rtable tfoot, .rtable tr, .rtable td { display: block; width: auto; font-size: 14px; }
  .rtable colgroup, .rtable thead { display: none; }
  .rtable tbody tr, .rtable tfoot tr { margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
  .rtable tbody tr:nth-child(even) td { background: none; }
  .rtable td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    padding: 2px 0;
    border: 0;
    white-space: normal;
    text-align: left !important;
  }
  .rtable td::before { flex: none; content: attr(data-label); color: var(--muted); font-size: 12px; }
  .rtable tfoot td { border: 0; }
  .rtable tfoot td:empty { display: none; }
  .rtable td.cat-bar { box-shadow: none; }
  .rtable tbody tr td:first-child { font-weight: 700; }

  .map-wrap { height: auto; }
  .us-map { height: auto; aspect-ratio: 1080 / 604; }
  .map-zoom-btn { top: 6px; right: 6px; font-size: 13px; padding: 6px 12px; }
}

/* ---------- 浏览器打印 ---------- */
@media print {
  html, body { background: #fff !important; }
  .site-header, .site-footer, .lesson-head, .lesson-foot, .map-zoom-btn, .wm-guest, .teaser-card, .map-tip, .map-modal { display: none !important; }
  .site-main { max-width: none !important; margin: 0 !important; padding: 0 !important; }

  .sheet { zoom: 1; margin: 0; box-shadow: none; break-after: page; break-inside: avoid; }
  .sheet-stack > .sheet:last-of-type { break-after: auto; }

  /* 员工：每页带本人水印和打印人信息，屏幕上看不到 */
  .print-trace { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .print-trace-tile { position: absolute; inset: 0; }
  .print-trace-line {
    position: absolute;
    right: 10mm;
    bottom: 2.4mm;
    margin: 0;
    font-size: 7pt;
    color: #8a8f98;
  }

  /* 游客：不打印讲义，只显示提示语 */
  .print-blocked .lesson-area { display: none !important; }
  .print-blocked .print-notice { display: block; padding: 60mm 20mm; font-size: 16pt; text-align: center; color: var(--ink); }
}