/* ==================================================================
 * print-studio · 站点内工具层（ps = print studio）
 *
 * 为什么工具代码放在站点自己这里，而不是 packages/theme：
 *   共享层（packages/**）归 S0 独占，方向会话并行改同一个组件必然互相覆盖
 *   （项目已踩过 sites.yaml 并行 Edit 覆盖的事故）。本方向要加 10+ 个工具，
 *   全部走共享层就得排 10 次队。放进 sites/print-studio/public/tools/ 后：
 *   · 皮肤令牌照用（var(--accent) 等），视觉与 stripe-press 一致；
 *   · 站内互不冲突，也不影响另外 7 个站；
 *   · 不进入 Astro 的 _astro 打包（构建期 JS 预算按 _astro/*.js 统计，不会误伤）。
 *
 * 皮肤纪律（12-C线 §6）：radius 0、单一烫印色、衬线正文。
 * 这里只用令牌，不引入第二套色板，也不给任何东西加圆角。
 * ================================================================== */

/* ---------- 本地承诺条：这个站的核心卖点必须一眼可见 ---------- */
.ps-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 20px;
  padding: 11px 14px;
  border-left: 3px solid var(--tool-accent, var(--accent));
  background: var(--accent-soft, #e6dcc4);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft, #555);
}
.ps-notice b { color: var(--ink, #111); }

/* ---------- 工具外壳 ---------- */
.ps-tool {
  margin: 26px 0;
  border: 1px solid var(--line, #ccc);
  border-top: var(--tool-accent-width, 3px) solid var(--tool-accent, var(--accent));
  background: var(--card-bg, #fff);
  padding: 24px;
}
.ps-tool > :first-child { margin-top: 0; }
.ps-tool hr { border: 0; border-top: 1px solid var(--line, #ccc); margin: 22px 0; }

/* 参数行：紧跟现有 .field / .field-grid 的观感，不另造一套表单语言 */
.ps-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.ps-fields .field span { display: block; margin-bottom: 5px; }
.ps-hint { font-size: 12px; line-height: 1.55; color: var(--ink-soft, #666); margin: 12px 0 0; }
.ps-hint code { font-size: 11px; }

/* 参数可分享：把当前设置回写成 URL，工具栏右侧的只读框 */
.ps-share { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ps-share input {
  flex: 1 1 auto;
  min-height: 38px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  border: 1px solid var(--line, #ccc);
  background: #fff;
  color: var(--ink, #111);
  padding: 6px 9px;
}

/* 结果区状态机（对齐共享层的 G3 契约）：
   idle 才隐藏 —— 跑过了但没数据、或者出错，都必须看得见。 */
.ps-out[data-state='idle'] { display: none; }

/* ---------- 纸张 ---------- */
.ps-print-root { margin: 0; }
/* 纸张按物理尺寸排版，屏幕放不下时整体等比缩小（见 ps-core.js#scaleSheets）。
   外套 `[data-ps-scale]` 只负责"缩放后应该占多高"，内栈 `[data-ps-stack]`
   才是被缩放的元素。 */
.ps-scale-outer { display: block; overflow: visible; }
.ps-scale-stack { transform-origin: top left; }
.ps-sheet {
  position: relative;
  width: 100%;
  max-width: 210mm;               /* A4 宽；Letter 由 data-paper 覆盖 */
  margin: 0 auto 22px;
  padding: 16mm 15mm;
  background: #fff;               /* 屏幕上纸张就是纸：纯白，不是骨白 */
  color: #111;
  font-family: var(--font-serif-print, Georgia, 'Times New Roman', serif);
  font-size: 12pt;
  line-height: 1.45;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.ps-sheet[data-paper='letter'] { max-width: 215.9mm; }
.ps-sheet + .ps-sheet { margin-top: 0; }
.ps-sheet:focus { outline: 2px solid var(--accent, #1b4b5a); outline-offset: 2px; }
.ps-sheet [contenteditable='true']:focus { outline: 1px dashed var(--accent, #1b4b5a); outline-offset: 2px; }

/* 生成器那张纸：网格要铺满整张纸，所以不留内边距 ——
   「离纸边多远」改由生成器自己的 margin 参数控制（那才是用户要调的东西）。 */
.ps-sheet--tight { padding: 0; }
.ps-sheet--tight::after { display: none; }
.ps-sheet--tight > svg { display: block; width: 100%; height: 100%; }
.ps-empty { background: #fff; }
.ps-empty code { font-family: var(--font-mono, monospace); font-size: 10pt; }

/* 打印机不可打印区参考线：只在屏幕上画，打印时不出现。
   多数喷墨 ≥6mm，激光常见 4–5mm —— 用户被裁边就等于这一页没做好（12-C线 §5.4）。 */
.ps-sheet::after {
  content: '';
  position: absolute;
  inset: 5mm;
  border: 1px dashed rgba(27, 75, 90, 0.28);
  pointer-events: none;
}
.ps-safe-hint { font-family: var(--font-sans, sans-serif); }

/* 屏幕上的纸张标签 */
.ps-sheet-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 210mm;
  margin: 0 auto 6px;
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #666);
}

/* ---------- 文档模板（resume / invoice / quote / …）---------- */
.ps-doc-body h1 { font-size: 20pt; margin: 0 0 2mm; letter-spacing: -0.01em; }
.ps-doc-body h2 {
  font-size: 10pt;
  font-family: var(--font-sans, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1b4b5a;
  margin: 7mm 0 2mm;
  padding-bottom: 1.2mm;
  border-bottom: 1px solid #d8d2c4;
}
.ps-doc-body h3 { font-size: 11.5pt; margin: 0 0 1mm; }
.ps-doc-body p { margin: 0 0 2.5mm; }
.ps-doc-body ul { margin: 0 0 3mm; padding-left: 5mm; }
.ps-doc-body li { margin-bottom: 1.2mm; }
.ps-doc-lead { display: grid; gap: 1mm; }
.ps-doc-lead .ps-name { font-size: 22pt; line-height: 1.1; }
.ps-doc-lead .ps-role { font-size: 11pt; color: #4a4a44; }
.ps-doc-contact { font-size: 9.5pt; color: #4a4a44; margin-top: 2mm; }
.ps-doc-rule { border: 0; border-top: 2px solid #1b4b5a; margin: 4mm 0 0; }

.ps-two-col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 8mm; }
.ps-two-col-wide { grid-template-columns: 1fr 1fr; }

/* 版式三态：同一份内容，三种栏结构。切换只动 CSS，
   所以「试试另一种结构」的成本是一次下拉，而不是重排一遍文档。 */
.ps-sheet[data-layout='single'] .ps-two-col { grid-template-columns: 1fr; gap: 5mm; }
.ps-sheet[data-layout='single'] .ps-two-col > div + div { margin-top: 1mm; }
.ps-sheet[data-layout='compact'] { font-size: 10.5pt; line-height: 1.3; }
.ps-sheet[data-layout='compact'] .ps-two-col { grid-template-columns: 1.7fr 1fr; gap: 6mm; }
.ps-sheet[data-layout='compact'] .ps-doc-body h2 { margin: 4.5mm 0 1.5mm; }
.ps-sheet[data-layout='compact'] .ps-doc-lead .ps-name { font-size: 19pt; }
.ps-sheet[data-layout='compact'] .ps-doc-body li { margin-bottom: 0.6mm; }

.ps-meta-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.ps-meta-table th, .ps-meta-table td { text-align: left; padding: 1.6mm 0; border: 0; border-bottom: 1px solid #e3ddd0; }
.ps-meta-table th { font-family: var(--font-sans, sans-serif); font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.08em; color: #4a4a44; font-weight: 600; }

/* 行项目表：可填、加行、自动算合计 */
.ps-lines { width: 100%; border-collapse: collapse; font-size: 10pt; margin-bottom: 3mm; }
.ps-lines th {
  font-family: var(--font-sans, sans-serif);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a4a44;
  text-align: left;
  padding: 1.6mm 2mm 1.6mm 0;
  border-bottom: 2px solid #1b4b5a;
}
.ps-lines td { padding: 1.4mm 2mm 1.4mm 0; border-bottom: 1px solid #e3ddd0; vertical-align: top; }
.ps-lines .num { text-align: right; white-space: nowrap; }
.ps-lines input, .ps-lines td[contenteditable='true'] { width: 100%; border: 0; background: none; font: inherit; color: inherit; padding: 0; }
.ps-lines input:focus, .ps-lines td[contenteditable='true']:focus { outline: 1px dashed #1b4b5a; outline-offset: 1px; }
.ps-totals { margin-left: auto; width: 62mm; font-size: 10.5pt; }
.ps-totals div { display: flex; justify-content: space-between; gap: 6mm; padding: 1.3mm 0; border-bottom: 1px solid #e3ddd0; }
.ps-totals .grand { border-top: 2px solid #1b4b5a; border-bottom: 0; font-size: 12pt; padding-top: 2mm; }
.ps-row-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4mm; }

/* 时间表 / 议程：横线即是书写行 */
.ps-lines-blank { border-bottom: 1px solid #d8d2c4; height: 7mm; }
.ps-agenda-row { display: grid; grid-template-columns: 26mm 1fr; gap: 4mm; padding: 1.6mm 0; border-bottom: 1px solid #e3ddd0; }
.ps-agenda-time { font-family: var(--font-sans, sans-serif); font-size: 9pt; color: #4a4a44; }

/* 免责/合规声明：发票类页面必须有（00 §4 合规红线） */
.ps-legal {
  margin-top: 5mm;
  padding-top: 3mm;
  border-top: 1px solid #d8d2c4;
  font-size: 8.5pt;
  color: #4a4a44;
}

/* ---------- 闪卡 ---------- */
.ps-card-grid { display: grid; gap: 4mm; }
.ps-flash-card {
  border: 1px dashed #9a9384;
  padding: 4mm;
  min-height: 26mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 11pt;
  break-inside: avoid;
}
.ps-flash-card .ps-card-term { font-weight: 600; }
.ps-flash-card .ps-card-def { font-size: 9.5pt; color: #4a4a44; margin-top: 1.5mm; }

/* ---------- PDF 本地检查报告 ---------- */
.ps-report { margin: 16px 0 0; border-top: 1px solid var(--line, #ccc); }
.ps-report dl { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 0; margin: 0; }
.ps-report dt,
.ps-report dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, #eee);
  font-size: 14px;
}
.ps-report dt { font-family: var(--font-sans, sans-serif); font-size: 12px; color: var(--ink-soft, #666); }
.ps-report dd { font-family: var(--font-mono, monospace); font-size: 12.5px; word-break: break-word; }
.ps-caveat { font-size: 13px; color: var(--ink-soft, #666); margin-top: 14px; }
.ps-drop {
  border: 1px dashed var(--line, #ccc);
  background: rgba(200, 190, 164, 0.16);
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft, #666);
}

/* ---------- 打印：只输出纸 ---------- */
/* 判据来自 12-C线 §5.4「打印这一件事要做对」：打印掉导航、页脚、工具栏、广告，
   以及**本页的说明正文** —— 用户按打印是要那张纸，不是要这篇解释。
 *
 * 这个块踩过一次坑，值得写清楚：最初只用 `visibility: hidden` 隐藏其余内容，
 * 结果一份单页简历打印出来是 **6 页** —— visibility 只让元素看不见，
 * 它仍然占据版面，于是隐藏的正文照样撑出 5 个空白页。
 * 所以这里两层一起用：
 *   ① `display: none` 负责"不占版面"（消除空白页）；
 *   ② `visibility` 负责"看不见"（万一 ① 的选择器失配，也绝不会把正文印出去）。
 *
 * 全部选择器都挂在 `body.tool-page:has(.ps-tool)` 下，原因有两个：
 *   · 本站有三个老工具（coloring-pages / photo-layout / paper-templates）走共享层的
 *     `interactive:` 通道，它们的工具容器是 `.tool-embed` 不是 `.ps-tool` ——
 *     不限定作用域就会把它们的工具一起隐藏掉，等于把三个能用的页面改坏；
 *   · `:has()` 不被支持时整块规则失效，退回主题原本的打印行为（安全降级）。
 *
 * ① 里出现的 `main` / `.wrap` / `.prose` / `.article-body` 是主题的固定包装层
 * （不是本站的约定），它们由 ⑫ 引擎漂移检查守着；主题换结构时这里会明显印错
 * （正文跑进纸里），而不是静默失效。 */
@media print {
  body.tool-page:has(.ps-tool) > *:not(main),
  body.tool-page:has(.ps-tool) main > *:not(.wrap),
  body.tool-page:has(.ps-tool) .wrap > *:not(.prose),
  body.tool-page:has(.ps-tool) .prose > *:not(.article-body),
  body.tool-page:has(.ps-tool) .article-body > *:not(.ps-tool),
  body.tool-page:has(.ps-tool) .ps-tool > *:not(.ps-print-root):not([data-ps-printable]) {
    display: none !important;
  }

  body.tool-page:has(.ps-tool) { background: #fff; }
  body.tool-page:has(.ps-tool) * { visibility: hidden; }
  body.tool-page:has(.ps-tool) .ps-print-root,
  body.tool-page:has(.ps-tool) .ps-print-root *,
  body.tool-page:has(.ps-tool) [data-ps-printable],
  body.tool-page:has(.ps-tool) [data-ps-printable] * { visibility: visible; }

  /* 撤销屏幕上的等比缩小：屏上缩到 80% 只是为了让 210mm 塞得进正文栏，
     纸上没有这个约束。@page 的尺寸已由脚本设成同一张纸，所以宽度给 100%。
     ⚠️ 这里**不要**动内栈的宽度：它就是纸张的物理宽度（脚本写成 mm），
     把它改成 auto 会让纸跟着正文栏变窄（166mm），于是内容被迫折更多行、
     单页简历打出来变成两页。这个坑踩过一次，记在这里。 */
  body.tool-page:has(.ps-tool) .ps-scale-outer { height: auto !important; }
  body.tool-page:has(.ps-tool) .ps-scale-stack { transform: none !important; }
  body.tool-page:has(.ps-tool) .ps-sheet {
    box-shadow: none;
    margin: 0 auto;
    max-width: none;
    width: 100% !important;      /* 覆盖脚本写在 style 里的物理宽度 */
    padding: 14mm 14mm 12mm;
    break-after: page;
  }
  body.tool-page:has(.ps-tool) .ps-sheet:last-child { break-after: auto; }
  body.tool-page:has(.ps-tool) .ps-sheet::after { display: none; }   /* 参考线不上纸 */
  body.tool-page:has(.ps-tool) .ps-sheet-label { display: none; }
  body.tool-page:has(.ps-tool) .ps-no-print,
  body.tool-page:has(.ps-tool) .ps-row-tools,
  body.tool-page:has(.ps-tool) .ps-toolbar { display: none !important; }
  /* 不产出"一张纸"的工具（PDF 检查器）自己声明 data-ps-printable，
     否则它那部分也被 ① 隐藏掉，打印出来是一张白纸。 */
  body.tool-page:has(.ps-tool) [data-ps-printable] { margin: 0; padding: 0; }
  body.tool-page:has(.ps-tool) .ps-report dl { grid-template-columns: minmax(140px, 190px) 1fr; }
}

@media (max-width: 700px) {
  .ps-tool { padding: 16px; }
  .ps-sheet { padding: 10mm 9mm; font-size: 11pt; }
  .ps-two-col, .ps-two-col-wide { grid-template-columns: 1fr; gap: 5mm; }
  .ps-report dl { grid-template-columns: 1fr; }
  .ps-report dt { padding-bottom: 0; border-bottom: 0; }
  .ps-report dd { padding-top: 3px; }
}