/* styles/pages/lodge.css — 收信处（lodge，产品侧 submit 视图）的房间物件与本地控件。

   逐条取自 Claude r3 设计源的 `demos/rooms/lodge.css`（其头部注明该文件即
   "产品里对应 styles/rooms/lodge.css（WEBUI-039）"），类名、层次、材质与
   动画参数原样保留，只做两类改写：

     1. 位图路径：源站点在 demos/rooms/ 下，`url("../decor/…")` / `url("../../assets/house/…")`
        指向 demos/decor、demos/house。产品侧的装饰底图在 site-next/assets/ 下，
        本文件在 styles/pages/ 里，所以改成 `../../assets/decor/…`、
        `../../assets/house/walnut.webp`（与 styles/pages/help.css 同一写法）。
     2. 已经在 styles/page-shell.css 里搬过的通用物件不再重复：柜台底座
        .h-counter、信槽本体 .h-slot（含 __plate / __flap / __hint）、取号票
        .h-tray / .h-tickets / .h-ticket*、回执纸 .h-receipt、取件牌 .h-claim、
        蜡封 .h-wax、封缄按钮 .h-sealbtn。源文件里那一整段票根样式在 r4 已经
        抽走（源文件第 8–28 行只剩标题注释），这里同样不写。

   本文件只补“只在收信处出现”的那一批：题头、柜台单、信槽台、检票条分类、
   封面镜框、修灯签、告示牌、取件牌、回执外壳与状态行。
   @layer 与嵌套选择器 & 都不用（site-lint L10）。
   ===================================================================== */

/* 题头与两栏：左边柜台（8 栏），右边墙上（4 栏） */
.h-post-head { padding: var(--pm-s-8) 0 var(--pm-s-6); max-width: 40em; }
.h-post-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pm-s-7); align-items: start; }

/* ---- 柜台单：钉在柜台上的一张羊皮纸单子 ---- */
.h-post-slip { position: relative; padding: 26px 30px 28px; border-radius: 2px; color: var(--pm-ink); --pm-accent: var(--h-accent-ink);
  background: radial-gradient(ellipse 70% 50% at 22% 0%, rgb(var(--h-candle) / .22), transparent 70%), url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
  box-shadow: inset 0 0 0 1px rgb(255 250 236 / .35), inset 0 0 36px rgb(110 76 30 / .26), 3px 16px 22px -12px rgb(0 0 0 / .8); }
/* 单子顶端的铜夹 */
.h-post-slip::before { content: ""; position: absolute; left: 50%; top: -12px; width: 120px; height: 24px; margin-left: -60px; border-radius: 4px 4px 10px 10px;
  background: var(--h-bronze); box-shadow: inset 0 1px 0 rgb(255 240 200 / .7), 0 3px 4px rgb(0 0 0 / .5); }
.h-post-slip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1.5px solid rgb(60 40 20 / .65); padding-bottom: 8px; margin: 6px 0 20px; }
.h-post-slip__head h2 { margin: 0; font: 600 1.25rem/1.3 var(--pm-font-serif); }
.h-post-slip__head span { font: 12px var(--pm-font-mono); color: var(--pm-ink-3); }
.h-post-slip .pm-field { margin-bottom: 22px; }
.h-post-slip .pm-field > label, .h-post-slip .pm-field > .h-post-lbl, .h-post-slip legend { font-weight: 600; }
.h-post-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.h-post-slip .pm-alert { margin-bottom: 22px; }

/* 信槽里的“已投入的文件”：一张折好的信 */
.h-post-letter { display: none; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: min(360px, 96%); padding: 10px 12px; border-radius: 2px; text-align: left;
  background: url("../../assets/decor/paper-manila.webp") 0 0 / 512px 512px, #E5D5B1; box-shadow: inset 0 0 0 1px rgb(94 69 32 / .3), 2px 6px 10px -4px rgb(0 0 0 / .5); }
.h-post-letter svg { width: 24px; height: 24px; color: #5F3F28; }
.h-post-letter b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-post-letter small { font: 12px var(--pm-font-mono); color: var(--pm-ink-3); }
.h-slot[data-has="true"] .h-post-letter { display: grid; }
.h-slot[data-has="true"] .h-post-pick { display: none; }
.h-post-pick { display: inline-flex; position: relative; }
.h-post-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.h-post-pick:focus-within .pm-btn { outline: 2px solid #1A1A1A; outline-offset: 2px; }

/* ---- 信槽台：柜台上嵌着的一块深色胡桃木面板，黄铜信槽装在上面（文件先投，单子会被预填） ---- */
.h-post-slotbay { position: relative; display: grid; gap: 12px; margin: 0 0 var(--pm-s-6); padding: 16px 18px 18px; border-radius: 4px; color: var(--h-on);
  background: linear-gradient(rgb(14 8 4 / .5), rgb(14 8 4 / .5)), url("../../assets/house/walnut.webp") 0 0 / 256px 256px, #2E2016;
  box-shadow: inset 0 3px 8px rgb(0 0 0 / .65), inset 0 0 0 1px rgb(0 0 0 / .5), 0 1px 0 rgb(255 230 180 / .3); }
.h-post-slotbay .h-post-lbl { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--h-on); }
.h-post-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 12px/1 var(--pm-font-serif); color: #2A2116;
  background: var(--h-gilt-plate, var(--h-gilt)); box-shadow: inset 0 0 0 1px rgb(94 69 32 / .55), 0 1px 2px rgb(0 0 0 / .5); flex: none; }
.h-post-slotbay .h-post-lbl .pm-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 12px/1 var(--pm-font-serif); color: #2A2116;
  background: var(--h-gilt-plate, var(--h-gilt)); box-shadow: inset 0 0 0 1px rgb(94 69 32 / .55), 0 1px 2px rgb(0 0 0 / .5); }
.h-post-slip__head h2 { display: flex; align-items: center; gap: 10px; }
.h-post-slotbay .h-slot { background: transparent; box-shadow: none; padding: 8px 10px 4px; color: var(--h-on); }
.h-post-slotbay .h-slot[data-over="true"] { box-shadow: inset 0 0 0 2px #6FD6E3; background: rgb(111 214 227 / .06); }
.h-post-slotbay .h-slot__hint { color: var(--h-on-2); }
.h-post-slotbay .h-post-letter { color: var(--pm-ink); }
/* 链接：柜台单、告示牌、回执都是浅色纸，链接回到纸上的墨青 */
.h-post-slip a:not(.pm-btn), .h-post-board a:not(.pm-btn), .h-receipt a:not(.pm-btn) { color: var(--pm-link); }
.h-post-receipt { --pm-accent: var(--h-accent-ink); --pm-on-scene: var(--pm-ink); --pm-on-scene-2: var(--pm-ink-2); }

.h-post-submit { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px dashed rgb(94 69 32 / .4); }
.h-post-progress { display: none; margin-top: 16px; } .h-post-progress[data-on="true"] { display: grid; }
/* 中性提示（产品侧新增，r3 没有）：提交被拦下时在这条上说明通道未开放，不冒充回执。
   .pm-alert 自带 display: grid，会盖过 hidden 属性，所以自己补一条。 */
.h-post-notice { margin: 0 0 18px; }
.h-post-notice[hidden] { display: none; }

/* ---- 墙上的告示牌（预检）：深木框 + 羊皮纸芯 + 两根挂绳 ---- */
.h-post-board { position: relative; padding: 10px; margin-top: 30px; border-radius: 4px;
  background: linear-gradient(rgb(10 6 4 / .35), rgb(10 6 4 / .35)), url("../../assets/house/walnut.webp") 0 0 / 256px 256px, #2E2016;
  box-shadow: inset 0 1px 0 rgb(255 220 170 / .2), inset 0 0 0 1px rgb(0 0 0 / .5), var(--pm-light-x) 20px 30px -16px rgb(0 0 0 / .85); }
.h-post-board::before { content: ""; position: absolute; left: 18%; right: 18%; top: -30px; height: 30px; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #1A120A calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
              linear-gradient(to top left, transparent calc(50% - 1px), #1A120A calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.h-post-board::after { content: ""; position: absolute; left: 50%; top: -35px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1DDA4, #6E5428); box-shadow: 0 2px 2px rgb(0 0 0 / .6); }
.h-post-board__in { padding: 18px 18px 16px; border-radius: 2px; color: var(--pm-ink); --pm-on-scene: var(--pm-ink);
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgb(var(--h-candle) / .2), transparent 70%), url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
  box-shadow: inset 0 0 22px rgb(110 76 30 / .25); }
.h-post-board h2 { font: 600 1.0625rem/1.3 var(--pm-font-serif); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.h-post-board h2::before { content: ""; width: 8px; height: 8px; background: #A8894F; transform: rotate(45deg); }
.h-post-board .pm-check-list { font-size: 14px; }
.h-post-wallnote { margin-top: 26px; font-size: var(--pm-fs-sm); line-height: 1.75; color: var(--h-on-2); border-left: 2px solid rgb(211 180 116 / .45); padding-left: 14px; }
.h-post-wallnote b { color: var(--h-on); font-weight: 600; }

/* ---- 取件牌（查回执）：圆头铜牌，挂在墙上 ---- */
.h-post-claimbox { margin-top: 38px; }
.h-post-claimbox h2 { font: 600 1rem/1.3 var(--pm-font-serif); color: var(--h-on); margin: 0 0 10px; }
.h-claim .pm-input { height: 40px; min-width: 0; font-family: var(--pm-font-mono); font-size: 13px; letter-spacing: .04em; }
.h-claim .pm-btn { height: 40px; }
.h-post-claimbox p { font-size: 12px; color: var(--h-on-3); margin: 8px 0 0 4px; }

/* ---- 回执：投递后出现，蜡封盖上（WEB-M47） ---- */
.h-post-receipt { display: none; margin-top: var(--pm-s-7); }
.h-post-receipt[data-on="true"] { display: block; }
.h-post-receipt .h-receipt { grid-template-columns: auto 1fr; align-items: start; padding: 26px 30px; max-width: 760px; }
.h-post-receipt h2 { font: 600 1.25rem/1.3 var(--pm-font-serif); margin: 0 0 4px; outline: none; }
.h-post-receipt .pm-dir { margin: 14px 0 0; }
.h-post-cred { margin-top: 16px; padding: 14px 16px; border: 1px dashed rgb(94 69 32 / .55); border-radius: 3px; background: rgb(255 250 236 / .35); }
.h-post-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* 蜡封：落下（1.25→1）+ 微转 + 一圈被压出来的蜡 */
.h-post-waxwrap { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.h-post-waxwrap::before { content: ""; position: absolute; inset: 4px; border-radius: 52% 48% 55% 45% / 46% 54% 47% 53%; pointer-events: none;
  background: radial-gradient(circle, transparent 54%, #2A5E52 56%, #1F4A41 66%, rgb(31 74 65 / .0) 72%);
  filter: drop-shadow(1px 3px 3px rgb(0 0 0 / .4)); }
.h-post-receipt[data-on="true"] .h-post-waxwrap::before { animation: h-post-splash 420ms var(--pm-ease-out) both; }
.h-post-receipt[data-on="true"] .h-wax { animation: h-post-wax 420ms cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes h-post-wax { 0% { transform: scale(1.25) rotate(-10deg); opacity: 0; filter: brightness(1.2); } 55% { transform: scale(.97) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes h-post-splash { 0%, 45% { transform: scale(.72); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .h-post-receipt[data-on="true"] .h-wax, .h-post-receipt[data-on="true"] .h-post-waxwrap::before, .h-ticket input:checked + .h-ticket__body .h-ticket__stamp { animation: none; } .h-ticket__body { transition: none; } }
html.pm-motion-off .h-post-receipt[data-on="true"] .h-wax, html.pm-motion-off .h-post-receipt[data-on="true"] .h-post-waxwrap::before { animation: none; }

.h-post-states { margin: var(--pm-s-6) 0 var(--pm-s-8); font-size: var(--pm-fs-sm); color: var(--h-on-3); }
@media (max-width: 1099px) { .h-post-grid { grid-template-columns: 1fr; } .h-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 699px) { .h-post-twocol { grid-template-columns: 1fr; } .h-counter { padding: 20px 14px 28px; } .h-post-slip { padding: 22px 16px; } .h-post-receipt .h-receipt { grid-template-columns: 1fr; } }

/* ---- r4 封面图（只在“人设”票时出现）：一面小号拱顶镜框，里面是投放槽；放进图后镜里预览它在镜廊里的样子 ----
   预览与镜廊（rooms/mirrors.css 的 .h-mirror--cover）同一套参数：静止＝字 + 朦胧映影；悬停 / 聚焦预览＝字淡下去、图露出来。
   镜面只有镜廊的约 0.55 倍宽，模糊半径按比例取 4px（镜廊 7px），看上去朦胧的程度一样。图片本身不做任何处理。 */
.h-post-cover[hidden], .h-post-board li[hidden] { display: none; }   /* .pm-field / 清单行自带 display，盖过了 hidden 属性 */
.h-cover { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px 22px; align-items: start; margin-top: 8px; padding: 14px 16px 14px 14px; border-radius: 3px;
  background: rgb(94 69 32 / .06); box-shadow: inset 0 0 0 1px rgb(94 69 32 / .28); }
.h-cover__frame { position: relative; display: grid; justify-items: center; gap: 8px; }
.h-cover__glass { position: relative; width: 132px; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; display: grid; place-items: center; cursor: default;
  border-radius: 999px 999px 3px 3px / 999px 999px 3px 3px; outline: none;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #2A3836, #121A19 80%);   /* 空镜：暗的，像镜廊里的空镜框 */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 0 18px rgb(0 0 0 / .5); }
/* 鎏金拱顶框：与镜廊的镜框同一种框（三道内描边），只是小一号 */
.h-cover__arch { padding: 8px; border-radius: 999px 999px 6px 6px / 999px 999px 6px 6px; background: var(--h-gilt);
  box-shadow: inset 0 0 0 1px rgb(255 248 220 / .5), inset 0 0 0 3px rgb(110 84 40 / .55), inset 0 0 0 4px rgb(255 240 200 / .4), 3px 12px 16px -8px rgb(0 0 0 / .7), 0 1px 2px rgb(0 0 0 / .4);
  transition: box-shadow 160ms; }
.h-cover__glass::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;   /* 脱银暗斑（与镜廊同一张） */
  background: radial-gradient(ellipse 52% 50% at 50% 50%, transparent 70%, rgb(40 36 30 / .42) 100%), url("../../assets/decor/foxing.png") center / cover; mix-blend-mode: multiply; opacity: .55; }
/* 投放槽：镜心一块黄铜小牌，开一道缝 */
.h-cover__slot { position: relative; z-index: 3; display: grid; justify-items: center; gap: 8px; }
.h-cover__slit { display: block; width: 74px; height: 24px; border-radius: 5px; background: var(--h-bronze, linear-gradient(180deg, #E2C78A, #8A6C3A));
  box-shadow: inset 0 1px 0 rgb(255 240 200 / .7), 0 3px 4px rgb(0 0 0 / .55); position: relative; }
.h-cover__slit::before { content: ""; position: absolute; left: 12px; right: 12px; top: 9px; height: 6px; border-radius: 2px; background: #120C06; box-shadow: inset 0 2px 3px #000, 0 1px 0 rgb(255 240 200 / .5); }
.h-cover__slottext { font: 600 12px/1.4 var(--pm-font-serif); color: #B9CBC6; text-align: center; padding: 0 10px; }
.h-cover__ghost, .h-cover__sheen, .h-cover__face { display: none; }
.h-cover__state { font: 600 10px/1 var(--pm-font-sans); letter-spacing: .3em; color: var(--pm-ink-3); padding-left: .3em; }
.h-cover__state-sel { display: none; }
.h-cover[data-over="true"] .h-cover__arch { box-shadow: inset 0 0 0 1px rgb(255 248 220 / .5), 0 0 0 3px #0F6F7C, 0 0 18px 2px rgb(111 214 227 / .55); }
.h-cover[data-over="true"] .h-cover__glass { box-shadow: inset 0 0 26px rgb(111 214 227 / .35); }
.h-cover[data-over="true"] .h-cover__slit::before { box-shadow: inset 0 2px 3px #000, 0 0 12px 3px rgb(var(--h-candle, 255 206 128) / .7); }

/* 放进图以后：银镜 + 映影 + 字 */
.h-cover[data-has="true"] .h-cover__slot { display: none; }
.h-cover[data-has="true"] .h-cover__glass { cursor: zoom-in;
  background: linear-gradient(180deg, transparent 52%, rgb(28 58 48 / .55) 80%, rgb(16 34 28 / .75)), radial-gradient(ellipse 70% 60% at 30% 22%, #C8D2CE, #8E9C98 45%, #4D5A58 85%, #36403F); }
.h-cover[data-has="true"] .h-cover__ghost { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .30; mix-blend-mode: luminosity; transform: scale(1.08); filter: blur(4px) grayscale(.65) contrast(.85) brightness(.95);
  transition: opacity 600ms ease-out, filter 600ms ease-out, transform 600ms ease-out, mix-blend-mode 600ms ease-out allow-discrete; }
.h-cover__ghost img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.h-cover[data-has="true"] .h-cover__glass::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: .38; transition: opacity 600ms ease-out;
  background: radial-gradient(ellipse 70% 60% at 30% 22%, rgb(200 210 206 / .5), rgb(142 156 152 / .34) 45%, rgb(77 90 88 / .26) 85%); }
.h-cover[data-has="true"] .h-cover__sheen { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgb(255 255 255 / .22) 30%, rgb(255 255 255 / .05) 38%, transparent 44%); }
.h-cover[data-has="true"] .h-cover__face { display: block; position: relative; z-index: 4; transform: translateY(-4%);
  font: 600 2.4rem/1 var(--pm-font-serif); color: rgb(22 30 30 / .62); text-shadow: 0 1px 0 rgb(255 255 255 / .35), 0 0 14px rgb(255 255 255 / .25);
  transition: opacity 600ms ease-out 80ms, filter 600ms ease-out 80ms; }
/* 选中态：悬停或聚焦预览 */
.h-cover[data-has="true"] .h-cover__glass:is(:hover, :focus) .h-cover__ghost { opacity: .96; filter: blur(0) grayscale(0) contrast(1) brightness(1); transform: scale(1); mix-blend-mode: normal; transition-delay: 80ms; }
.h-cover[data-has="true"] .h-cover__glass:is(:hover, :focus) .h-cover__face { opacity: .10; filter: blur(1px); transition-delay: 0ms; }
.h-cover[data-has="true"] .h-cover__glass:is(:hover, :focus)::before { opacity: .18; transition-delay: 80ms; }
.h-cover[data-has="true"] .h-cover__frame:has(.h-cover__glass:is(:hover, :focus)) .h-cover__state-rest { display: none; }
.h-cover[data-has="true"] .h-cover__frame:has(.h-cover__glass:is(:hover, :focus)) .h-cover__state-sel { display: inline; color: var(--h-accent-ink); }
.h-cover__arch:has(.h-cover__glass:focus-visible) { outline: 2px solid #1A1206; outline-offset: 2px; box-shadow: inset 0 0 0 1px rgb(255 248 220 / .5), 0 0 0 6px #E8C878; }   /* 双圈：纸上单圈金色对比不够 */

.h-cover__side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.h-cover__picked { display: none; min-width: 0; }
.h-cover__picked b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-cover__picked small { font: 12px var(--pm-font-mono); color: var(--pm-ink-3); }
.h-cover__btns { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.h-cover__swap, .h-cover__remove { display: none; }
.h-cover[data-has="true"] .h-cover__picked { display: block; }
.h-cover[data-has="true"] .h-cover__pick { display: none; }
.h-cover[data-has="true"] .h-cover__swap, .h-cover[data-has="true"] .h-cover__remove { display: inline-flex; }
.h-cover__note { margin: 0; font-size: 13px; line-height: 1.65; color: var(--pm-ink-2); }
.h-cover__how { display: block; color: var(--pm-ink-3); font-size: 12px; }
.h-cover__err { margin: 0; padding: 6px 10px 6px 12px; border-left: 4px solid #8E2A1E; background: rgb(142 42 30 / .08); color: #7A2216; font-size: 13px; font-weight: 600; }
.h-cover__err:empty { display: none; }
@media (max-width: 459px) { .h-cover { grid-template-columns: 1fr; justify-items: center; } .h-cover__side { justify-items: start; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .h-cover__ghost, .h-cover__face, .h-cover__glass::before { transition: none !important; } }
html.pm-motion-off .h-cover__ghost, html.pm-motion-off .h-cover__face, html.pm-motion-off .h-cover__glass::before { transition: none !important; }
html.pm-tex-off .h-cover[data-has="true"] .h-cover__ghost { filter: none !important; transform: none !important; mix-blend-mode: normal !important; transition-property: opacity; }
html.pm-tex-off .h-cover[data-has="true"] .h-cover__face { filter: none !important; transition-property: opacity; }
html.pm-tex-off .h-cover__glass::after { background-image: none !important; }

/* r4 关闭纹理（?tex=off / html.pm-tex-off）：本房间所有用到位图的面只留底色（由 tools 脚本按 url() 自动列出） */
html.pm-tex-off .h-post-slip,
html.pm-tex-off .h-post-letter,
html.pm-tex-off .h-post-slotbay,
html.pm-tex-off .h-post-board,
html.pm-tex-off .h-post-board__in { background-image: none !important; }

/* ---- r4 分类（只在 skill / 工具票时出现；C-092、软件 P1 §3.14.2 / §3.14.7）：胡桃木浅槽里的一排小号检票条 ----
   与上方票据格同一材质（paper-tag 硬卡纸、两侧半圆缺口、左侧票根打孔线），小一号、横放。原生 radio（name="category"），方向键在一组里移动。
   选中＝被检票钳打了一个孔（透出下面的胡桃木）+ 印泥色描边 + 抬起 3px——孔是形状通道，灰度下也看得出选了哪张。
   徽标：skill＝圆形族纹印记（PM.familyMark），工具＝方形器物牌（pm-badge + 器物线描）；分类不靠颜色区分。放不下就换行，名字不折字。 */
.h-post-slip .pm-field[hidden] { display: none; }
.h-post-cat { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.h-post-cat legend { padding: 0; margin-bottom: 6px; }
.h-post-cat legend small { margin-left: 10px; font: 400 12px var(--pm-font-sans); letter-spacing: .04em; color: var(--pm-ink-3); }
.h-catslips__src { font-size: 13px; color: var(--h-accent-ink); }
.h-catslips { margin-top: 4px; padding: 14px 10px; border-radius: 4px;
  background: linear-gradient(rgb(14 8 4 / .45), rgb(14 8 4 / .45)), url("../../assets/house/walnut.webp") 0 0 / 256px 256px, #2E2016;
  box-shadow: inset 0 3px 8px rgb(0 0 0 / .65), inset 0 0 0 1px rgb(0 0 0 / .5), 0 1px 0 rgb(255 230 180 / .35); }
.h-catslips__set { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px 8px; }
.h-catslips__set[hidden] { display: none; }
.h-catslip { position: relative; display: block; min-width: 0; cursor: pointer; border-radius: 2px;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / .5)); transition: transform 180ms var(--pm-ease-out), filter 180ms; }
.h-catslip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h-catslip__body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  min-height: 52px; padding: 7px 14px 7px 20px; color: var(--pm-ink);
  background: radial-gradient(ellipse 80% 70% at 20% 0%, rgb(var(--h-candle) / .16), transparent 70%), url("../../assets/decor/paper-tag.webp") 0 0 / 512px 512px, #E6E3CD;
  box-shadow: inset 0 0 0 1px rgb(94 69 32 / .35), inset 0 0 12px rgb(110 76 30 / .16);
  /* 三层蒙版求交：左缺口、右缺口、检票孔（未选时半径 0） */
  --hole: 0px;
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000), radial-gradient(circle 5px at 100% 50%, transparent 98%, #000), radial-gradient(circle var(--hole) at calc(100% - 12px) calc(100% - 12px), transparent 98%, #000);
          mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000), radial-gradient(circle 5px at 100% 50%, transparent 98%, #000), radial-gradient(circle var(--hole) at calc(100% - 12px) calc(100% - 12px), transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.h-catslip__body::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; border-left: 1.5px dashed rgb(94 69 32 / .45); }   /* 票根打孔线 */
.h-catslip__body::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 14px; height: 14px; border-radius: 50%; opacity: 0;   /* 孔边被钳子压出的一圈 */
  box-shadow: 0 0 0 1.5px rgb(94 69 32 / .55), inset 0 0 0 1px rgb(255 250 236 / .5); }
.h-catslip__mark { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #F3EBD6;
  background: radial-gradient(circle at 38% 32%, #1E8A6E, #116E56 60%, #0B4A3A);
  box-shadow: 0 0 0 2px #8A6C3A, 0 0 0 3px #3A2A12, inset 0 -1px 2px rgb(0 0 0 / .35); margin: 3px; }
.h-catslip__mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.h-catslip__ware { --s: 30px; grid-row: 1 / span 2; margin: 2px; }
.h-catslip__name { font: 600 14px/1.25 var(--pm-font-serif); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.h-catslip__key { font: 600 10px/1.3 var(--pm-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-ink-3); }
.h-catslip:hover { transform: translateY(-2px); }
.h-catslip:has(input:checked) { transform: translateY(-3px); filter: drop-shadow(0 8px 6px rgb(0 0 0 / .6)); }
.h-catslip input:checked + .h-catslip__body { --hole: 5px; box-shadow: inset 0 0 0 2px #7A3E1E, inset 0 0 12px rgb(110 76 30 / .16); }
.h-catslip input:checked + .h-catslip__body::after { opacity: 1; }
.h-catslip input:checked + .h-catslip__body .h-catslip__name { color: #5A2C14; }
/* 焦点环画在不受蒙版裁切的外层；深色木槽上用金色 */
.h-catslip:has(input:focus-visible) { outline: 2px solid #F1DDA4; outline-offset: 3px; }
.h-catslips__what { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--pm-ink-2); }
.h-catslips__what b { color: var(--pm-ink); font-weight: 600; }
.h-catslips__not { display: block; font-size: 12px; color: var(--pm-ink-3); }
@media (max-width: 459px) {
  .h-catslips { padding: 12px 8px; }
  .h-catslips__set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .h-catslip__body { column-gap: 7px; padding: 6px 12px 6px 18px; }
  .h-catslip__body::before { left: 9px; }
  .h-catslip__mark { width: 24px; height: 24px; } .h-catslip__mark svg { width: 23px; height: 23px; }
  .h-catslip__ware { --s: 26px; }
  .h-catslip__name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .h-catslip { transition: none; } }
html.pm-motion-off .h-catslip { transition: none; }

/* ---- r4 署名（只在“反馈”票时出现，放在联系方式下面；C-091、软件 FE-REQ-36）：与联系方式同宽 ---- */
.h-post-sigrow { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-bottom: 22px; }
.h-post-sigrow[hidden] { display: none; }
.h-post-slip .h-post-sigrow .pm-field { margin-bottom: 0; }
#fb-page-field .pm-select { max-width: calc(50% - 11px); }
/* 修灯签预览：铜杆上垂下一根绳，挂一张羊皮纸签（灯簿 C-091 的“补灯的人”） */
.h-sigtag { position: relative; margin: 0; display: grid; justify-items: start; padding-top: 2px; }
.h-sigtag figcaption { font-size: 12px; color: var(--pm-ink-3); margin-bottom: 6px; }
.h-sigtag::before { content: ""; justify-self: stretch; height: 6px; max-width: 220px; width: 100%; border-radius: 3px;   /* 一小段铜杆 */
  background: linear-gradient(180deg, #F1DDA4, #A8894F 45%, #5E4520); box-shadow: 0 3px 5px rgb(0 0 0 / .4); order: 1; }
.h-sigtag figcaption { order: 0; }
.h-sigtag__cord { order: 2; justify-self: start; margin-left: 96px; width: 1px; height: 18px; background: linear-gradient(#2A1E12, #5E4520); }
.h-sigtag__tag { order: 3; position: relative; display: grid; gap: 2px; min-width: 140px; max-width: 220px; margin-left: 26px; padding: 16px 14px 10px; border-radius: 6px 6px 14px 14px;
  transform: rotate(-.8deg); transform-origin: 70px 0;
  background: radial-gradient(ellipse 80% 70% at 25% 0, rgb(var(--h-candle) / .22), transparent 70%), url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
  box-shadow: inset 0 0 0 1px rgb(110 76 30 / .4), inset 0 0 14px rgb(110 76 30 / .2), 2px 10px 12px -8px rgb(0 0 0 / .7); }
.h-sigtag__tag::before { content: ""; position: absolute; left: 65px; top: 5px; width: 10px; height: 10px; border-radius: 50%;   /* 绳孔 + 铜圈 */
  background: radial-gradient(circle, #1A140C 38%, #6E5428 44%, #E2C78A 62%, #8A6C3A); }
.h-sigtag__who { font: 600 1rem/1.3 var(--pm-font-serif); color: #221D17; overflow-wrap: anywhere; }
.h-sigtag__who[data-anon] { color: #5E5347; font-weight: 400; }
.h-sigtag__when { font: 12px/1.4 var(--pm-font-mono); color: #554A3E; }
.h-post-sig__foot { display: flex; align-items: baseline; gap: 12px; }
.h-post-sig__foot .pm-count { margin-left: auto; }
.h-post-sig .pm-ferr { margin: 0; }
.h-post-sig .pm-ferr:empty { display: none; }
.h-post-board .pm-v[data-anon] { color: var(--pm-ink-3); font-weight: 400; }
@media (max-width: 699px) { .h-post-sigrow { grid-template-columns: 1fr; gap: 14px; } #fb-page-field .pm-select { max-width: none; } }

html.pm-tex-off .h-catslips,
html.pm-tex-off .h-catslip__body,
html.pm-tex-off .h-sigtag__tag { background-image: none !important; }

/* r4 反馈类型 / 严重程度：沿用分类检票条，但不带印记，两行字（中文名 + 英文键） */
.h-fbslips { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.h-fbslips--3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.h-fbslip .h-catslip__body { grid-template-columns: minmax(0, 1fr); min-height: 48px; }
.h-fbslip .h-catslip__name { white-space: normal; }