/* 纸张渲染样式：屏幕预览与打印输出共用这一份。
 *
 * 打印保真的两条纪律：
 *   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-slotted {
  overflow: hidden;
  box-sizing: border-box;
}

/* 拖动中的元素跟着光标走（transform 由 studio.js 实时写）。
   Figma 的手感是「拿起来了」：略微抬起、带一点影、压在最上面，
   而不是原地变淡——变淡看着像被禁用，而它其实正被你捏在手里。 */
.pb-slotted-dragging {
  opacity: .92;
  cursor: grabbing;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  will-change: transform;
}
.pb-block-image, .pb-block-text { cursor: grab; }
/* 关掉浏览器自带的图片拖放：它会吞掉我们自己的指针序列（BUG-045）。
   img.draggable=false 已经挡了一层，这里是给 Safari/WebKit 的那一层。 */
.pb-block-image img { -webkit-user-drag: none; user-select: none; }
.pb-block-image:active, .pb-block-text:active { cursor: grabbing; }

/* 会吸进去的那一格。不告诉用户落点，磁吸就成了碰运气。
   pointer-events:none —— 它绝不能挡住拖动本身。 */
.pb-slot-target {
  position: absolute;
  outline: 1.6px dashed var(--accent, #2563eb);
  outline-offset: -1.6px;
  background: rgba(37, 99, 235, .08);
  pointer-events: none;
  z-index: 2;
}

/* 选中元素四角的把手：抓住一个角拖，对角钉住不动，跨度按格数算。
   用户 2026-09-07：「Figma 虽然是一个九宫格或者任意宫格，
   它可以让一个图片或一个字占任意的宫格」——分格是参考线，不是格子牢笼。

   四个角都给：只给右下角的话，站在右下角的元素没法往左上扩，
   用户得先把它挪走再拉回来，那就不是直接操作了。

   把手长在**元素旁边的一层**（.pb-slot-chrome），不长在元素里面：
   元素是 overflow:hidden，放里面的把手只能整个缩在边内，骑不到角上，
   看着像「图上贴了四个小方块」。这一层自己不吃事件，
   否则它盖在元素上，元素就点不着也拖不动了。 */
.pb-slot-chrome {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}

.pb-slot-handle {
  position: absolute;
  width: 2.6mm;
  height: 2.6mm;
  background: #fff;
  border: 0.45mm solid var(--accent, #2563eb);
  border-radius: 0.5mm;
  /* 白底把手压在浅色图上几乎看不见，给一圈影子把它托起来 */
  box-shadow: 0 0 0 0.2mm rgba(255, 255, 255, .9), 0 0.4mm 1mm rgba(0, 0, 0, .25);
  pointer-events: auto;
  touch-action: none;
}

/* 命中区比看到的大一圈：2.6mm 的方块在屏幕上不到 10px，
   照着它点很容易点空，而点空 = 变成一次移动，元素就跑了。
   视觉保持小巧，手感放大到 ~7mm 见方。 */
.pb-slot-handle::before {
  content: '';
  position: absolute;
  inset: -2.2mm;
}

/* 骑在角上：往外挪半个身位，角点正好落在把手中心 */
.pb-slot-handle-nw { left: -1.3mm; top: -1.3mm; cursor: nwse-resize; }
.pb-slot-handle-ne { right: -1.3mm; top: -1.3mm; cursor: nesw-resize; }
.pb-slot-handle-sw { left: -1.3mm; bottom: -1.3mm; cursor: nesw-resize; }
.pb-slot-handle-se { right: -1.3mm; bottom: -1.3mm; cursor: nwse-resize; }

.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），
   这里只负责把屏幕上的外壳、缩放和阴影统统摘掉。 */
/* 图片块：高度由 heightMm 定死，宽度铺满版心。
   图本身按 fit 摆（contain 不裁 / cover 铺满），块本身不留内边距——
   纸上的留白应当来自页边距与块间距，不是来自这里又加一层。 */
.pb-block-image {
  width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
}

@media print {
  /* 屏幕上 body 是一条顶栏 + 三栏的竖排 flex，高度钉死在视口上；纸上要回到普通的文档流，
     否则第二页起排不下（打印按纸一页页往下排，不认一个固定高度的盒子） */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    display: block !important;
    height: auto !important;
  }

  /* 纸上只印本页自己的东西。浏览器扩展（翻译悬浮球、划词按钮、收藏按钮……）会往每个网页的
     <html>、<body> 底下插自己的元素，屏幕上它们画在哪儿网页管不着，纸上不许有。
     判据只认「通向纸的那一支」：从 <html> 往下每一层，不是纸（.pb-canvas）也不装着纸的，一律不印。
     不列举我们自己有哪些元素，所以扩展插在哪一层都一样被排除；
     反过来，要印的东西必须放进 .pb-canvas，放在外面会被这条吃掉（AGENTS.md §8.6）。 */
  :has(.pb-canvas) > :not(.pb-canvas):not(:has(.pb-canvas)) {
    display: none !important;
  }

  .pb-no-print,
  .pb-nav,
  .pb-subnav,
  .pb-slot-target,
  .pb-slot-chrome,
  .pb-slot-handle,
  .pb-library,
  .pb-finder,
  .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;
  }

  /* 缩放占位容器在打印时不占位、不居中。屏幕上它靠 margin:auto 夹在资源区与设置列中间居中；
     打印按纸宽排版（A4 约 794px），比手机版断点 900px 还窄，手机版样式在纸上照样生效——
     不归零的话，屏幕上是居中，纸上就是整张往右推、右边一截印到纸外（2026-10-12 打印验收逮到，BUG-059）。
     手机版给纸底下留的那一排页签的空（padding-bottom）也一样，由上面那条 padding:0 收掉。 */
  #pb-canvas-space {
    margin: 0 !important;
    width: auto !important;
    height: auto !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;
  }
}