/* 纸张渲染样式：屏幕预览与打印输出共用这一份。
 *
 * 打印保真的两条纪律：
 *   1. 尺寸只用 mm，不用 px——屏幕上的 210mm 和纸上的 210mm 是同一个数。
 *   2. 屏幕上的缩放只作用在最外层的 .pb-canvas 上（transform: scale），
 *      纸张与内容本身永远是 1:1，打印时把这个 transform 清掉即可。
 */

.pb-page {
  position: relative;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .10);
  border-radius: 1px;
  margin: 0 auto;
  /* 纸张尺寸是硬约束：作为 flex 子项时默认的 flex-shrink:1 会把 A4 压扁，
     方格量到的可用高度随之变成几乎为零，整页就渲成一片空白。 */
  flex: 0 0 auto;
}

.pb-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3mm;
}

/* 文本块：高度由内容决定 */
.pb-block-text {
  flex: 0 0 auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}

.pb-block-text:empty::before {
  content: '';
  display: block;
  height: 0;
}

/* 方格块：auto 模式吃掉版心里剩下的空间，因此永远铺满且不溢出 */
.pb-block-grid {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pb-block-grid-fixed {
  flex: 0 0 auto;
}

.pb-grid-inner {
  position: relative;
}

.pb-grid-svg {
  display: block;
}

.pb-grid-chars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pb-cell-char {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* 练字格里的字要居中在格子里，行高与基线的默认偏移会破坏这一点 */
  font-feature-settings: 'palt' 0;
}

/* fixed 模式下格子超出版心时给个可见提示，但不偷偷缩放骗人 */
.pb-overflow {
  outline: 0.6mm dashed #e0574c;
  outline-offset: 1mm;
}

/* ── 编辑器里的选中态。打印时全部清掉。 ────────────────────── */
.pb-canvas-interactive .pb-block {
  cursor: pointer;
}

.pb-canvas-interactive .pb-block:hover {
  outline: 0.5mm solid rgba(60, 130, 246, .35);
  outline-offset: 0.8mm;
}

.pb-canvas-interactive .pb-block-selected,
.pb-canvas-interactive .pb-block-selected:hover {
  outline: 0.6mm solid #3c82f6;
  outline-offset: 0.8mm;
}

/* ── 打印 ───────────────────────────────────────────────────
   @page 的 size 由页面在打印前按文档方向动态注入（见 studio.js / gallery.js），
   这里只负责把屏幕上的外壳、缩放和阴影统统摘掉。 */
@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .pb-no-print,
  .pb-nav,
  .pb-sidebar,
  .pb-inspector,
  .pb-toolbar,
  .pb-toast,
  .pb-hintbar {
    display: none !important;
  }

  .pb-shell,
  .pb-main,
  .pb-canvas-wrap {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .pb-canvas {
    transform: none !important;
    zoom: 1 !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* 展示馆的打印容器：屏幕上不占位，打印时才现身 */
  .pb-printonly {
    display: block !important;
  }

  .pb-page {
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    margin: 0 !important;
    break-after: page;
    page-break-after: always;
  }

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

  .pb-block,
  .pb-block:hover,
  .pb-block-selected {
    outline: none !important;
  }

  .pb-grid-inner,
  .pb-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}