/* C-093 “制作规范”对话框的样式。
   逐条搬自 Claude r3 `demos/rooms/spec.css`，只改两处，其余数值、注释、类名不动：
     1. 纹理路径改到本产品的素材目录：../house/walnut.webp → ../../assets/house/walnut.webp，
        ../decor/paper-night.webp → ../../assets/decor/paper-night.webp
        （本文件在 styles/components/，产品素材在 assets/）。
     2. 文件头这段路径说明（设计源写的是 demos/rooms/… 的加载顺序）。

   加载顺序：tokens → fonts → decor → page-shell → components/sponsor.css →
   components/spec.css → 页面自己的版式。脚本 js/ui/spec.js（数据 data/spec-standards.js），
   对话框由脚本挂到 body 末尾。

   世界观：馆员从案下拉开一只胡桃木抽屉，抽出一页用铜夹夹着的“制式文书”——照这张
   样子写，馆才认得你的东西。
     · 和“添灯油”“确认”同一套抽屉（深胡桃木 + 羊皮纸），但这张纸更长、顶上有铜夹、
       里面是一张带行号的文书框（像档案馆的格式样张）。
     · 小签用房间色深版（--h-accent-ink）：在镜廊是绿、印室是青、器物柜是蓝、收信处是褐。
   尺寸：≥600 最宽 760、高至视口 86%，只有文书框内部滚动；<600 全宽、从底部抽出、高至 92%。 */

.h-spec { border: 0; padding: 0; background: transparent; color: var(--pm-ink); overflow: visible;
  width: min(760px, calc(100vw - 32px)); max-width: none; max-height: 86vh; max-height: 86dvh; }
.h-spec[open] { display: flex; flex-direction: column; }
.h-spec::backdrop { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgb(10 8 6 / .55), rgb(10 8 6 / .8)); }

/* 抽屉：深胡桃木，两侧内阴影 = 抽屉壁 */
.h-spec__drawer { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 22px 18px 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .45), rgb(0 0 0 / .15) 30%, rgb(0 0 0 / .3)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #2E2016;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 10px 0 14px -8px rgb(0 0 0 / .6), inset -10px 0 14px -8px rgb(0 0 0 / .6); }
.h-spec__front { flex: none; height: 40px; border-radius: 0 0 6px 6px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgb(255 230 180 / .12), rgb(0 0 0 / .2)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #3A2818;
  box-shadow: inset 0 1px 0 rgb(255 220 170 / .25), inset 0 0 0 1px rgb(0 0 0 / .4), 0 34px 64px -20px rgb(10 8 4 / .85); }
.h-spec__front::before { content: ""; width: 64px; height: 12px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #F1DDA4, #A8894F 50%, #5E4520); box-shadow: 0 3px 4px rgb(0 0 0 / .6); }   /* 杯形拉手 */

/* 羊皮纸：一页长文书 */
.h-spec__leaf { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 20px; border-radius: 2px 2px 0 0; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 80% 40% at 18% 0%, rgb(var(--h-candle, 255 206 128) / .22), transparent 70%), url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum, #EADFC6);
  box-shadow: inset 0 0 30px rgb(110 76 30 / .25), 0 -6px 14px rgb(0 0 0 / .35); }
/* 铜夹：夹住纸顶，一半压在抽屉沿上；两颗铆钉 + 下缘一道压痕 */
.h-spec__clip { position: absolute; left: 50%; top: -14px; width: 132px; height: 28px; margin-left: -66px; border-radius: 4px 4px 12px 12px; z-index: 2;
  background: var(--h-bronze, linear-gradient(135deg, #8A6A3A 0%, #E2C78A 22%, #9C7B44 46%, #5E4520 70%, #B8975A 100%));
  box-shadow: inset 0 1px 0 rgb(255 240 200 / .7), inset 0 -3px 0 rgb(60 40 14 / .35), 0 3px 5px rgb(0 0 0 / .55); }
.h-spec__clip::before, .h-spec__clip::after { content: ""; position: absolute; top: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF0C4, #A8894F 60%, #4A3618); box-shadow: 0 1px 1px rgb(0 0 0 / .5); }
.h-spec__clip::before { left: 16px; } .h-spec__clip::after { right: 16px; }

.h-spec__head { text-align: center; }
.h-spec__kicker { display: block; font: 600 11px/1 var(--pm-font-sans); letter-spacing: .26em; color: var(--h-accent-ink, #5E4526); margin-bottom: 8px; }
.h-spec__title { margin: 0; font: 600 1.375rem/1.3 var(--pm-font-serif); color: var(--pm-ink); }
.h-spec__ver { margin: 6px 0 0; font: 12px/1.4 var(--pm-font-mono); color: var(--pm-ink-2); }
.h-spec__ver::before, .h-spec__ver::after { content: "—"; margin: 0 8px; color: #A8894F; }

/* 警示便条：左侧 4px 警示色带；底是警示色 8%；字 #3A2A12（对比度见 tools/test-spec-r4.txt） */
.h-spec__warn { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; margin: 0; padding: 9px 12px 9px 12px; border-radius: 0 3px 3px 0;
  font: 600 14px/1.55 var(--pm-font-sans); color: #3A2A12; background: rgb(116 75 0 / .08); box-shadow: inset 4px 0 0 #744B00, inset 0 0 0 1px rgb(116 75 0 / .18); padding-left: 16px; }
.h-spec__warn svg { width: 18px; height: 18px; margin-top: 1px; color: #744B00; }
.h-spec__warn--demo { font-weight: 400; font-size: 13px; }
.h-spec__warn[hidden] { display: none; }

/* 模板文书框：浅一档的纸、内凹；左侧行号栏 + 一道铜色竖线（档案格式样张的装订线） */
.h-spec__doc { position: relative; flex: 1 1 auto; min-height: 140px; overflow: auto; overscroll-behavior: contain; border-radius: 3px;
  --ln-w: 3.4em;
  background: linear-gradient(90deg, rgb(110 76 30 / .05) 0 var(--ln-w), rgb(168 137 79 / .75) var(--ln-w) calc(var(--ln-w) + 1px), transparent 0) 0 0 / 100% 100% local, #F6EFDE;
  box-shadow: inset 0 0 0 1px rgb(110 76 30 / .32), inset 0 2px 8px rgb(110 76 30 / .18); }
.h-spec__doc:focus-visible { outline: 2px solid #1A1206; outline-offset: 2px; box-shadow: 0 0 0 4px #E8C878, inset 0 0 0 1px rgb(110 76 30 / .32); }
.h-spec__text { padding: 10px 0 12px; font: 13px/1.7 var(--pm-font-mono); color: var(--pm-ink); }
.h-spec__ln { display: grid; grid-template-columns: var(--ln-w) minmax(0, 1fr); }
.h-spec__ln::before { content: attr(data-n); padding-right: 10px; text-align: right; font: 12px/1.7 var(--pm-font-mono); color: var(--pm-ink-3); font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none; }
.h-spec__tx { padding: 0 14px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; -webkit-user-select: text; user-select: text; }
.h-spec__tx[data-empty]::after { content: "\200B"; }   /* 空行保持一行高（伪元素不会进剪贴板） */
.h-spec__ln[data-t="h"] .h-spec__tx { font-weight: 700; color: var(--h-accent-ink, #5E4526); }
.h-spec__ln[data-t="code"] .h-spec__tx, .h-spec__ln[data-t="fence"] .h-spec__tx { background: rgb(94 69 38 / .06); color: var(--pm-ink); }
.h-spec__ln[data-t="fence"] .h-spec__tx { color: var(--pm-ink-2); }
.h-spec__text ::selection { background: rgb(214 176 92 / .55); color: #1A1206; }

/* 底部：印钮 + 字数 / 结果 + 合上 */
.h-spec__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 2px; }
.h-spec__status { font: 13px/1.4 var(--pm-font-sans); color: var(--pm-ink-2); font-variant-numeric: tabular-nums; }
.h-spec__status[data-state="ok"] { color: #2A5E33; font-weight: 600; }
.h-spec__status[data-state="ok"]::before { content: "✓ "; }
.h-spec__status[data-state="select"] { color: #3A2A12; font-weight: 600; }
.h-spec__close { margin-left: auto; min-width: 96px; }
.h-spec__scratch { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* 动效：抽屉 240ms 从下滑上来；纸从 1° 落正（与 C-090 同） */
.h-spec[open] :is(.h-spec__drawer, .h-spec__front) { animation: h-spec-up 240ms var(--pm-ease-out, cubic-bezier(.2, .7, .2, 1)) both; }
.h-spec[open] .h-spec__leaf { animation: h-spec-settle 240ms var(--pm-ease-out, cubic-bezier(.2, .7, .2, 1)) 40ms both; }
@keyframes h-spec-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes h-spec-settle { from { transform: rotate(1deg) translateY(6px); } to { transform: none; } }
@keyframes h-spec-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .h-spec[open] :is(.h-spec__drawer, .h-spec__front, .h-spec__leaf) { animation: h-spec-fade 80ms linear both; }
}
html.pm-motion-off .h-spec[open] :is(.h-spec__drawer, .h-spec__front, .h-spec__leaf) { animation: h-spec-fade 80ms linear both; }
html.pm-tex-off :is(.h-spec__drawer, .h-spec__front, .h-spec__leaf) { background-image: none !important; }

/* 窄屏：全宽，从底部抽出；没有抽屉前脸，拉手画在抽屉顶沿上 */
@media (max-width: 599px) {
  .h-spec { width: 100vw; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; }
  .h-spec__drawer { padding: 20px 8px 0; border-radius: 10px 10px 0 0; }
  .h-spec__front { display: none; }
  .h-spec__leaf { padding: 26px 14px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .h-spec__clip { width: 104px; margin-left: -52px; }
  .h-spec__title { font-size: 1.25rem; }
  .h-spec__doc { --ln-w: 2.6em; min-height: 120px; }
  .h-spec__text { font-size: 12.5px; }
  .h-spec__tx { padding: 0 10px 0 8px; }
  .h-spec__copy { flex: 1 1 100%; justify-content: center; }
  .h-spec__copy, .h-spec__close { min-height: 44px; }   /* 触屏目标 ≥44 */
  .h-spec__status { flex: 1 1 auto; }
}

/* 收信处：选“反馈”票时收起整条“请先按制作规范…”提示（.pm-alert 的 display:grid 会盖过 [hidden]） */
.pm-alert[hidden] { display: none; }