/* 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 · 正面：字条行（小标签 + ↗，css/labels.css）+ 卡片描述两行（R28，.card-desc）+ 纸面
   1 · 舞台：iframe 铺满纸面（纸色、纸纹由卡给，iframe 透明）；就绪前显示淡淡的 P 槽占位；纸面从材质按钮下面开始（R23）
   2 · 材质按钮（R1）：可点的圆形样本 = 48 命中区、无内边距，组内间距 12，外缘对齐内容线；选中 / 悬停 / 焦点环画在圆内（inset），不放大不外扩
       重来（R38）：橡皮擦图标按钮，48 命中区，和材质按钮同排同高；图标 20 / 1.5 线 / 墨 .8；无底无描边；写过字才出现
   3 · 不倾斜、不抬起（写字的面要绝对静止）。魔法笔不翻面（B1），所以也没有 ↻ 角上的倾斜提示了 */

/* ---- 0 · 正面 ---- */
#pen .pen-front .card-heading { min-height: 0; margin: 0; }
#pen .pen-actions { margin-top: 16px; padding-top: 0; }   /* 主按钮「了解更多 ↗」紧跟描述（10-22 18:30）；手机首屏要看得到，所以放在写字区上面 */
#pen .pen-stage { margin-top: 16px; }

/* ---- 1 · 舞台 ---- */
#pen .pen-stage { position: relative; overflow: hidden; isolation: isolate; border-radius: 3px; background: none;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#pen .pen-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: light;   /* 和 iframe 里一致：不一致 Chrome 会把 iframe 画成不透明 */
  touch-action: none; opacity: 0; transition: opacity .45s ease; pointer-events: auto; }
#pen .pen-stage.is-ready .pen-frame { opacity: 1; }
#pen .pen-static { position: absolute; inset: 0; width: 100%; height: 100%; 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; }
/* R23：写字区不和控件重叠 —— 纸面从材质按钮下面开始（48 + 16 = 64）；手机（< 560）由 Magical Pen 卡自己的上边带保留 */
@media (min-width: 560px) { #pen .pen-frame, #pen .pen-static { inset: 64px 0 0 0; height: calc(100% - 64px); } }
/* 加载失败：占位留着，底下一行小字 */
#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; } }