/* pen-card.css（homepage-v4 · 2026-10-19 晚起；2026-10-22 设计系统 v3）—— 魔法笔卡的纸面 = 最新 Magical Pen（pen/card.html 的 iframe）。只管 #pen
   （首页的魔法笔卡，和魔法笔家长页 projects/magical-pen.html 的试写区是同一个组件：一页只放一支笔 · B13）。
   0 · 正面（IA 5a，2026-10-26）：字条行（小标签 + →，css/labels.css）→ 标题（card.pen.front.line，24）→ 舞台。首页卡片不放描述、不放文字按钮
   1 · 舞台：材质按钮 → 试写淡字（card.pen.front.trace）→ 纸面，三段间距都是 16（标题 → 材质按钮也是 16）；
       iframe 铺满纸面（纸色、纸纹由卡给，iframe 透明）；就绪前显示淡淡的 P 槽占位
   2 · 材质按钮（R1）：可点的圆形样本 = 48 命中区、无内边距，组内间距 12，外缘对齐内容线；选中 / 悬停 / 焦点环画在圆内（inset），不放大不外扩
       重来（R38）：橡皮擦图标按钮，48 命中区，和材质按钮同排同高；图标 20 / 1.5 线 / 墨 .8；无底无描边；写过字才出现
   1b · 舞台和纸面都是 touch-action: pan-y：手指从空白处竖着滑 = 滚页面；从字母笔画附近（32px 内）落下才写字，滚动由 pen/card.mjs §6 在 touchstart 上拦（2026-10-27）
   3 · 不倾斜、不抬起（写字的面要绝对静止）。魔法笔不翻面（B1），所以也没有 ↻ 角上的倾斜提示了 */

/* ---- 0 · 正面 ---- */
#pen .pen-front .card-heading { min-height: 0; margin: 0; }
#pen .card-heading .narrative-title { max-width: 22em; }
#pen .pen-stage { margin-top: 16px; }

/* ---- 1 · 舞台 ---- */
/* R23：写字区不和控件重叠 —— 材质按钮 48 + 16 → 试写淡字（行高 17）→ 16 → 纸面从 96 开始（取 8 的倍数；淡字下面实测 15）。所有宽度同一套 */
#pen .pen-stage { --pen-paper-top: 96px; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--card-r-in); background: none;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#pen .pen-frame { position: absolute; inset: var(--pen-paper-top) 0 0 0; width: 100%; height: calc(100% - var(--pen-paper-top)); border: 0; display: block; background: transparent; color-scheme: light;   /* 和 iframe 里一致：不一致 Chrome 会把 iframe 画成不透明 */
  touch-action: pan-y; opacity: 0; transition: opacity .45s ease; pointer-events: auto; }
#pen .pen-stage.is-ready .pen-frame { opacity: 1; }
#pen .pen-static { position: absolute; inset: var(--pen-paper-top) 0 0 0; width: 100%; height: calc(100% - var(--pen-paper-top)); pointer-events: none; }
#pen .pen-static path { fill: none; stroke: rgb(var(--ink-rgb) / .10); stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
#pen .pen-stage.is-ready .pen-static { display: none; }
/* 试写淡字：材质按钮正下方（48 + 16），12 / 1.4、墨 .42 */
#pen .pen-hint { position: absolute; z-index: 4; left: 2px; top: 64px; margin: 0; font: 400 12px / 1.4 var(--font-text); letter-spacing: .02em;
  color: rgb(var(--ink-rgb) / .42); white-space: nowrap; pointer-events: none; }
/* 加载失败：占位留着，底下一行小字 */
#pen .pen-stage.is-failed::after { content: attr(data-failed-text); position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; color: var(--ink-3); }

/* ---- 2 · 材质按钮 + 重来 ---- */
#pen .pen-brushes { position: absolute; z-index: 4; top: 0; left: 0; display: flex; align-items: center; gap: 12px; --pen-ink: var(--ink-rgb); --pen-sw: var(--ds-paper, #fcfbf9); }
:root.paper-dark[data-theme="night"] #pen .pen-brushes { --pen-sw: var(--dk-paper); }
#pen .pen-brush { position: relative; flex: none; width: 48px; height: 48px; padding: 0; margin: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#pen .pen-brush .pen-sw { width: 48px; height: 48px; border-radius: 50%; display: block; background: var(--pen-sw) center / cover no-repeat; -webkit-user-drag: none; pointer-events: none;
  box-shadow: inset 0 0 0 .5px rgb(var(--pen-ink) / .14), 0 1px 1.5px rgb(40 30 20 / .12); transition: box-shadow .2s; }
#pen .pen-brush[aria-checked="true"] .pen-sw { box-shadow: inset 0 0 0 1.5px rgb(var(--pen-ink) / .55), inset 0 0 0 4px rgb(255 255 255 / .9), 0 1px 1.5px rgb(40 30 20 / .12); }
@media (hover: hover) { #pen .pen-brush:not([aria-checked="true"]):hover .pen-sw { box-shadow: inset 0 0 0 1px rgb(var(--pen-ink) / .3), 0 1px 1.5px rgb(40 30 20 / .12); } }
#pen .pen-brush:focus { outline: none; }
#pen .pen-brush:focus-visible .pen-sw { box-shadow: inset 0 0 0 2px rgb(var(--pen-ink) / .8), inset 0 0 0 4px rgb(255 255 255 / .9); }
:root.paper-dark #pen .pen-brush .pen-sw { box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .4); }
:root.paper-dark #pen .pen-brush[aria-checked="true"] .pen-sw { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7), inset 0 0 0 4px rgb(20 18 16 / .85), 0 1px 2px rgb(0 0 0 / .4); }
#pen .pen-restart { position: relative; flex: none; width: 48px; height: 48px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; display: inline-grid; place-items: center;
  color: rgb(var(--pen-ink) / .8); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .2s, background-color .2s, opacity .3s; opacity: 0; pointer-events: none; }
#pen .pen-stage.has-ink .pen-restart { opacity: 1; pointer-events: auto; }
@media (hover: hover) { #pen .pen-restart:hover { color: rgb(var(--pen-ink)); background: rgb(var(--pen-ink) / .06); } }
#pen .pen-restart:focus { outline: none; }
#pen .pen-restart:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(var(--pen-ink) / .7); }
@media (prefers-reduced-motion: reduce) { #pen .pen-brush .pen-sw, #pen .pen-restart, #pen .pen-frame { transition: none; } }

/* ---- 3 · 不倾斜、不抬起：peek.css 把 --tilty / --tiltx / --pz 写进 .flip 的 transform，这里钉成 0；cards.css 的 hover 抬起（--zh）也不给 ---- */
#pen { --tilty: 0 !important; --tiltx: 0 !important; --pz: 0 !important; }
@media (hover: hover) and (pointer: fine) { #pen:hover { --zh: 0; } }