/* =============================================================
   /print 可打印数独 · 样式
   -------------------------------------------------------------
   两套版式，同一份标记：
     · 屏幕上  —— 控制条 + 一张张「纸」，方便先看再印
     · 纸面上  —— 只留题目本身，一页一张纸，按 A4 排版
   网格尺寸跟着「每页几题」走，用 mm 定死：打印时 1mm 就是 1mm，
   而 px 会被浏览器的缩放吃掉。
   ============================================================= */

/* ---------------------------- 控制条 ---------------------------- */

.pr-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  margin: 22px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-glow);
}

.pr-field { display: flex; flex-direction: column; gap: 5px; }

.pr-field label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pr-field select {
  font: inherit;
  font-size: 14px;
  padding: 7px 26px 7px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--ink-soft) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--ink-soft) 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.pr-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--ink-soft);
  padding-bottom: 8px;
  cursor: pointer;
}

.pr-check input { width: 15px; height: 15px; accent-color: var(--accent); }

.pr-actions { display: flex; gap: 8px; margin-left: auto; }

.pr-btn {
  font: inherit;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.pr-btn:hover { border-color: var(--ink-mute); }

.pr-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pr-btn.primary:hover { background: var(--accent-dark); }

.pr-btn[disabled] { opacity: .5; cursor: default; }

.pr-status {
  min-height: 20px;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ---------------------------- 纸面预览 ---------------------------- */

.pr-sheets { margin: 0 0 8px; }

.pr-sheet {
  width: 100%;
  max-width: 210mm;
  margin: 0 auto 22px;
  padding: 10mm 10mm 8mm;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(28, 31, 35, .07);
}

.pr-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6mm;
  padding-bottom: 2.5mm;
  border-bottom: .6pt solid #cfcabf;
  font-family: var(--sans);
  font-size: 10pt;
  color: #333;
}

.pr-sheet-head b { font-weight: 600; letter-spacing: .01em; }
.pr-sheet-head span { font-size: 8.5pt; color: #666; }

.pr-grid-wrap {
  display: grid;
  gap: 8mm 6mm;
  justify-items: center;
}

.pr-sheets[data-per="1"] .pr-grid-wrap { grid-template-columns: 1fr; }
.pr-sheets[data-per="2"] .pr-grid-wrap { grid-template-columns: 1fr; }
.pr-sheets[data-per="4"] .pr-grid-wrap { grid-template-columns: 1fr 1fr; }

.pr-item { margin: 0; text-align: center; }

.pr-item-cap {
  margin: 0 0 2mm;
  font-size: 8pt;
  color: #777;
  letter-spacing: .04em;
}

/* ---------------------------- 网格 ---------------------------- */

.pg {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  margin: 0 auto;
  border: 1.4pt solid #000;
  background: #fff;
  /* 字号按网格宽度缩放：单元格永远占 1/9，字占单元格的六成左右。
     这样一页一题和手机上的预览用的是同一套规则，不用为每种尺寸写死 mm。 */
  container-type: inline-size;
}

.pr-sheets[data-per="1"] .pg { width: 140mm; }
.pr-sheets[data-per="2"] .pg { width: 105mm; }
.pr-sheets[data-per="4"] .pg { width: 78mm; }

.pg > .pc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  /* 屏幕上用 px、纸面上用 pt：
     pt 在 96dpi 的屏幕里会被取整，.5pt 和 1.2pt 都变成 1px，
     预览就分不出宫线。各用各的单位，两边的对比才都在。 */
  border-right: 1px solid #b8b3a9;
  border-bottom: 1px solid #b8b3a9;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 8.6mm;      /* 不支持容器查询时的退路 */
  font-size: 6.1cqw;
  color: #111;
  overflow: hidden;
}

/* 宫的粗线：第 3/6 列的右边、第 3/6 行的下边 */
.pg > .pc:nth-child(9n+3),
.pg > .pc:nth-child(9n+6) { border-right: 3px solid #000; }

.pg > .pc:nth-child(n+19):nth-child(-n+27),
.pg > .pc:nth-child(n+46):nth-child(-n+54) { border-bottom: 3px solid #000; }

.pg > .pc:nth-child(9n) { border-right: 0; }
.pg > .pc:nth-child(n+73) { border-bottom: 0; }

/* 题面给的数字加粗，留白的格子保持空白 —— 纸面上没有颜色可用 */
.pg > .pc.g { font-weight: 700; }

/* 候选数：3×3 小格，位置固定，读起来和屏幕上的笔记一致 */
.pc .cand {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  font-size: .26em;
  line-height: 1;
  color: #5a5a5a;
}

.pc .cand span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-sheets[data-per="4"] .pc .cand { font-size: .34em; }

/* ---------------------------- 纸面页脚 ---------------------------- */

.pr-sheet-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 7mm;
  padding-top: 2.5mm;
  border-top: .6pt solid #cfcabf;
  font-family: var(--sans);
  font-size: 8pt;
  color: #777;
}

/* ---------------------------- 打印 ---------------------------- */

@media print {
  @page { size: A4; margin: 12mm; }

  html, body {
    padding: 0;
    margin: 0;
    background: #fff !important;
  }

  .site-head,
  .site-foot,
  .crumbs,
  .art-head,
  .pr-ctrl,
  .pr-status,
  .pr-prose,
  .pr-intro { display: none !important; }

  .wrap { max-width: none; margin: 0; padding: 0; }
  .pr-sheets { margin: 0; }

  /* 一页一张纸。不用 break-inside:avoid —— 那会把放不下的那张推到下一页，
     留出一整页空白，而这里的每张纸本来就已经算好不超过一页。 */
  .pr-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .pr-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .pr-sheet-head { margin-bottom: 5mm; }
  .pr-sheet-foot { margin-top: 5mm; }

  /* 纸面换回 pt：1pt = 1/72 英寸，打印机按这个分辨率出线，
     细线与宫线的粗细差才真的看得见 */
  .pg > .pc { border-right-width: .5pt; border-bottom-width: .5pt; }

  .pg > .pc:nth-child(9n+3),
  .pg > .pc:nth-child(9n+6) { border-right-width: 1.2pt; }

  .pg > .pc:nth-child(n+19):nth-child(-n+27),
  .pg > .pc:nth-child(n+46):nth-child(-n+54) { border-bottom-width: 1.2pt; }

  /* 最外圈不要线，否则和 .pg 自己的边框叠成两道 */
  .pg > .pc:nth-child(9n) { border-right-width: 0; }
  .pg > .pc:nth-child(n+73) { border-bottom-width: 0; }
}

/* 窄屏：控制条改成两列，纸面预览横向可滚动，别把网格压变形 */
@media (max-width: 620px) {
  .pr-ctrl { padding: 14px; gap: 12px; }
  .pr-actions { margin-left: 0; width: 100%; }
  .pr-actions .pr-btn { flex: 1; }
  .pr-sheet { padding: 6mm 5mm; }
  /* 窄屏上网格改成按容器宽度缩放：纸面尺寸是给打印用的，
     手机上照那个尺寸排会横向溢出。
     .pr-item 必须一起拉满，否则 width:100% 是在一个「宽度由内容决定」的
     盒子里算的，网格会缩成一条。 */
  .pr-grid-wrap { justify-items: stretch; }
  .pr-item { width: 100%; }
  .pr-sheets[data-per="1"] .pg,
  .pr-sheets[data-per="2"] .pg,
  .pr-sheets[data-per="4"] .pg { width: 100%; }
  .pr-sheets[data-per="4"] .pr-grid-wrap { grid-template-columns: 1fr; }
}