/* YU.IS — 域名目录柜：柜面检字，抽屉里是索引卡，抽出一张看登记。 */
/* 只在本机没有 American Typewriter 时才会下载，作为记录字体的兜底。 */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* 白天的目录柜：米黄纸底、木色柜体、索引卡面、墨绿馆藏章。 */
  --bg: #e6dfcd; --wood: #cbbf9f; --wood-in: #d6cbae; --inside: #ddd4bd;
  --front: #f6f0e1; --front-hi: #fffaf0; --front-edge: #b3a685; --handle: #8c7a52; --guide: #d9cfb6;
  --ink: #2b2620; --soft: #4d4436; --muted: #6c6252; --faint: #8f8572;
  --line: #cfc4ab; --line-2: #b9ad91;
  --accent: #1f6b4f; --on-accent: #f6f0e1; --accent-soft: rgb(31 107 79 / .12);
  --warn: #a2442c; --rule: rgb(162 68 44 / .38);
  --scrim: rgb(43 38 32 / .42);
  --shadow: 0 1px 2px rgb(43 38 32 / .08), 0 6px 18px rgb(43 38 32 / .09);
  --shadow-lift: 0 2px 4px rgb(43 38 32 / .12), 0 14px 32px rgb(43 38 32 / .18);
  --noise-a: .07;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Cambria, Georgia, "Noto Serif", "Songti SC", "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
  --type: "American Typewriter", "JetBrains Mono", "Courier New", monospace;
  --zh: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --r: 2px;
  --pad: 16px;
  /* 抽屉阻尼：拉出时先快后慢，推回时更快。 */
  --slide: cubic-bezier(.22, .9, .24, 1);
  --push: cubic-bezier(.5, 0, .75, .2);
  --press: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* 夜里的目录柜：深胡桃木、暗色卡面、提亮的绿章。 */
  --bg: #1b1915; --wood: #2c2720; --wood-in: #332d25; --inside: #221e19;
  --front: #2f2a23; --front-hi: #3a342b; --front-edge: #14120f; --handle: #a8956a; --guide: #3a342b;
  --ink: #efe6d3; --soft: #d8cdb6; --muted: #aca28e; --faint: #8a816f;
  --line: #4a4337; --line-2: #5c5446;
  --accent: #6cc59e; --on-accent: #10261c; --accent-soft: rgb(108 197 158 / .14);
  --warn: #e39577; --rule: rgb(227 149 119 / .35);
  --scrim: rgb(0 0 0 / .55);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .28);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / .4), 0 14px 32px rgb(0 0 0 / .45);
  --noise-a: .05;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--zh); -webkit-font-smoothing: antialiased; }
/* 纸纹铺在固定层上，深浅主题各自调透明度。 */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-a);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* ---------- 外壳：顶部常驻，下面一块舞台放柜面或抽屉 ---------- */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 1240px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); }
/* 页首：DOM 顺序是 标识 → 查词 → 联系（即键盘顺序）；手机上用网格把查词排到第二行。 */
.top { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 28px 24px auto; grid-template-areas: "brand links" "count links" "search search"; align-items: center; column-gap: 14px; row-gap: 6px; padding-bottom: 12px; }
/* 标识：柜面上拉开的「Y」抽屉 + Charter 粗体字标；悬停时抽屉面变亮，按下时下沉。 */
.wordmark { grid-area: brand; flex: none; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.brand-mark { flex: none; width: 28px; height: 28px; transition: transform .26s var(--press); }
.bm-edge, .bm-letter { fill: var(--ink); }
.bm-face { fill: var(--front); transition: fill .2s; }
.bm-pull { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.brand-word { font: 700 21px/1 var(--serif); letter-spacing: .03em; }
.brand-word span { color: var(--accent); }
.wordmark:hover .bm-face { fill: var(--front-hi); }
.wordmark:active .brand-mark { transform: translateY(1.5px); transition-duration: 80ms; }
.top-links { grid-area: links; justify-self: end; margin-right: -8px; display: flex; align-items: center; gap: 2px; }
/* 总量带可见单位；窄屏放在标识下方，给联系按钮留下完整点击区域。 */
.top-count { grid-area: count; justify-self: start; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--front); font: 400 12px/1 var(--type); color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--soft); transition: background-color .15s, color .15s; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-btn[aria-expanded="true"] { background: var(--front); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line-2); }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

/* 查词框：像目录柜旁的检索台，粗实线、卡面底色。 */
.search { grid-area: search; position: relative; min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 2px 0 12px; background: var(--front); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); transition: box-shadow .2s; }
.search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); border-color: var(--accent); }
.search-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--type); letter-spacing: .01em; }
.search input::placeholder { font: 400 14px/1 var(--zh); color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--muted); }
.search-clear:hover { color: var(--ink); background: var(--accent-soft); }
.search-clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kbd { flex: none; min-width: 24px; height: 24px; margin-right: 6px; display: grid; place-items: center; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r); font: 400 11.5px/1 var(--type); color: var(--muted); }
.search:focus-within .kbd { display: none; }
@media (hover: none) { .kbd { display: none; } }

.stage { position: relative; flex: 1; min-height: 0; }

/* ---------- 柜面 ---------- */
.cabinet { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.cabinet::-webkit-scrollbar { display: none; }
.cabinet-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--wood); border: 1.5px solid var(--line-2); border-radius: var(--r); box-shadow: inset 0 0 0 4px var(--wood-in); }
.shelf-title { display: flex; align-items: baseline; gap: 8px; margin: 2px 2px -2px; font: 600 12.5px/1.2 var(--zh); color: var(--soft); }
.shelf-title span { font: 400 12px/1 var(--type); color: var(--soft); font-variant-numeric: tabular-nums; }
/* 分类签后拉出一条细规矩线，把这一层抽屉归成一组。 */
.shelf-title::after { content: ""; flex: 1; align-self: center; border-top: 1px solid var(--line-2); opacity: .7; }
/* 抽屉正面：卡面底、深色下沿、一道铜拉手。按下沉 2px，拉开时朝外凸出一截。 */
.front { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; min-width: 0; padding: 6px 4px 20px; border: 1px solid var(--front-edge); border-radius: var(--r); background: var(--front); color: var(--ink); box-shadow: 0 2px 0 var(--front-edge);
  transition: transform .26s var(--press), box-shadow .26s var(--press), background-color .2s, border-color .2s; }
.front::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 18px; height: 7px; margin-left: -9px; border: 1.5px solid var(--handle); border-top: 0; border-radius: 0 0 10px 10px; transition: border-color .2s; }
.front:hover { background: var(--front-hi); transform: translateY(-2px); box-shadow: 0 4px 0 var(--front-edge); }
.front:hover::after { border-color: var(--accent); }
.front:active { transform: translateY(2px); box-shadow: 0 0 0 var(--front-edge); transition-duration: 80ms; }
.front.is-open { transform: translateY(3px) scale(1.04); background: var(--front-hi); border-color: var(--ink); box-shadow: 0 8px 16px rgb(43 38 32 / .22); z-index: 1; }
.front.is-open .k { color: var(--accent); }
.front.is-open::after { border-color: var(--accent); }
.front:disabled { opacity: .45; cursor: default; }
.front .k { font: 700 22px/1 var(--serif); }
.front .n { font: 400 12px/1 var(--type); color: var(--muted); font-variant-numeric: tabular-nums; }
.front.lead { min-height: 128px; gap: 10px; padding: 14px 14px 26px; }
.front.lead .label { display: flex; align-items: baseline; gap: 8px; font: 600 13.5px/1 var(--zh); color: var(--accent); }
.front.lead .label .n { color: var(--accent); }
.front.lead .peek { max-width: 100%; display: flex; justify-content: center; gap: 16px; overflow: hidden; font: 700 23px/1.1 var(--serif); white-space: nowrap; }
.front.lead.is-open { transform: translateY(3px) scale(1.015); }
.letters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.letters .front { height: 72px; }
.digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.35fr; gap: 6px; }
.digits .front { height: 70px; }
.digits .k { font-size: 15.5px; }
/* 「其他」不属于数字，和前四格隔开一点。 */
.digits .front:last-child { margin-left: 8px; }
/* 首次进入：抽屉按阅读顺序依次落位，只播一次。 */
.cabinet.entering .front { animation: settle .42s var(--slide) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }
.front.skeleton { color: transparent; background: var(--front); }
.front.skeleton::after { opacity: .3; }
.front.skeleton .k, .front.skeleton .n { visibility: hidden; }

.domain-suffix { font-weight: 400; color: var(--muted); }
/* 末几字符和后缀绑成一个整体，长名换行时后缀不会单独甩到一行。 */
.tail { white-space: nowrap; }

/* ---------- 拉开的抽屉 ---------- */
.drawer { container: drawer / inline-size; position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--inside); border: 1.5px solid var(--line-2); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; box-shadow: inset 0 10px 16px rgb(43 38 32 / .12); }
.drawer-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 8px 8px 6px; background: var(--front); border-bottom: 1.5px solid var(--line-2); border-radius: var(--r) var(--r) 0 0; }
.drawer-back { flex: none; height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 6px; border: 0; border-radius: var(--r); background: none; font: 600 13px/1 var(--zh); color: var(--soft); }
.drawer-back svg, .step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer-back:hover { background: var(--accent-soft); color: var(--accent); }
.drawer-label { min-width: 0; display: flex; align-items: baseline; gap: 10px; padding-left: 4px; }
.drawer-label h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 24px/1.1 var(--serif); }
.drawer-label h2 small { font: 600 13px/1 var(--zh); color: var(--muted); margin-left: 6px; }
.drawer-label span { flex: none; font: 400 12px/1 var(--type); color: var(--muted); }
.drawer-steps { margin-left: auto; display: flex; gap: 0; }
.step { flex: none; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; margin-left: -1px; border: 1px solid var(--line-2); border-radius: 0; background: var(--front); font: 700 15px/1 var(--serif); color: var(--soft); white-space: nowrap; transition: background-color .15s, border-color .15s, transform .2s var(--press); }
.drawer-steps .step:first-child { margin-left: 0; border-radius: var(--r) 0 0 var(--r); }
.drawer-steps .step:last-child { border-radius: 0 var(--r) var(--r) 0; }
.step:hover, .step:focus-visible { position: relative; z-index: 1; }
.step:hover { border-color: var(--ink); background: var(--front-hi); }
.step:active { transform: scale(.96); transition-duration: 80ms; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 10px max(24px, env(safe-area-inset-bottom)); }
.drawer.bump { animation: bump .3s var(--press); }
@keyframes bump { 30% { transform: translateX(var(--bump, 12px)); } }

/* 导卡：比索引卡高出一截的标签，位置左右错开，像真正的分隔卡。 */
.guide { position: relative; height: 30px; margin: 22px 0 -2px; background: var(--guide); border: 1px solid var(--line-2); border-radius: var(--r); }
.guide:first-child { margin-top: 8px; }
.guide .tab { position: absolute; top: -15px; left: var(--x, 10px); max-width: calc(100% - 20px); height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--guide); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; font: 700 15px/1 var(--serif); white-space: nowrap; }
/* 导卡数量压在导卡色上，用 --soft 保证对比 ≥4.5:1（--muted 只有 3.86:1）。 */
.guide .tab b { font: 400 12px/1 var(--type); color: var(--soft); font-variant-numeric: tabular-nums; }
.guide:nth-of-type(3n+2) { --x: 34%; }
.guide:nth-of-type(3n) { --x: 62%; }
/* 索引卡：叠放只露上沿；按住抬起，像把卡往外抽。 */
.card { container: index-card / inline-size; position: relative; width: 100%; min-width: 0; height: max-content; display: flex; align-items: center; min-height: 62px; margin-top: -5px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--front); color: var(--ink); text-align: left;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 4px rgb(43 38 32 / .07); transition: transform .24s var(--press), box-shadow .24s var(--press), border-color .2s; }
.card-content { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
:root[data-theme="dark"] .card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 2px 4px rgb(0 0 0 / .25); }
.guide + .card { margin-top: 0; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink); z-index: 2; }
.card:active { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--ink); transition-duration: 90ms; }
.card:focus-visible { z-index: 3; }
.card.is-pulled { visibility: hidden; }
.hw { min-width: 0; white-space: normal; overflow-wrap: anywhere; font: 700 24px/1.2 var(--serif); letter-spacing: -.005em; }
.hw.long { font-size: 18px; }
/* 索引卡完整显示身份，窄列自然换行，不依赖脚本测量和缩字。 */
.hw .tail { white-space: normal; }
.card .rec { min-width: 0; max-width: 140px; justify-self: end; overflow-wrap: anywhere; font: 400 12px/1.35 var(--type); color: var(--soft); text-align: right; font-variant-numeric: tabular-nums; }
.card .rec-warn { color: var(--warn); font-weight: 700; }
.card .rec-exp.warn { color: var(--warn); }
.card.featured .hw::after { content: "精"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px; border: 1.2px solid var(--accent); border-radius: 50%; font: 700 10px/1 var(--zh); color: var(--accent); transform: rotate(-8deg); }
.drawer-body.entering .card, .drawer-body.entering .guide { animation: file-in .34s var(--slide) both; animation-delay: calc(min(var(--i, 0), 10) * 22ms); }
@keyframes file-in { from { opacity: 0; transform: translate(var(--from-x, 0), 10px); } }
.drawer-empty { margin: 48px 12px; text-align: center; color: var(--soft); }
.drawer-empty p { margin: 0 0 6px; font: 700 20px/1.3 var(--serif); color: var(--ink); }
.drawer-empty small { display: block; margin-bottom: 18px; font: 400 13px/1.5 var(--type); }
/* 空态下的两个按钮并排居中，窄了自动换行。 */
.empty-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-line { height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--front); font-size: 13.5px; font-weight: 600; transition: background-color .15s, transform .2s var(--press); }
.btn-line:hover { background: var(--front-hi); }
.btn-line:active { transform: scale(.97); }
.state { height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); text-align: center; }
.state p { margin: 0; font: 700 20px/1.3 var(--serif); color: var(--ink); }

/* ---------- 联系方式小卡：从页首图标下方弹出 ---------- */
.contact-pop { position: fixed; z-index: 40; width: min(300px, calc(100vw - 32px)); padding: 12px 16px 16px; background: var(--front); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-lift); transform-origin: calc(100% - var(--caret, 20px)) -8px; }
/* 小尖角指向被点的图标。 */
.contact-pop::before { content: ""; position: absolute; top: -6px; right: calc(var(--caret, 20px) - 6px); width: 11px; height: 11px; background: var(--front); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }
.contact-pop.opening { animation: pop-in .2s var(--slide) both; }
.contact-pop.closing { animation: pop-in .14s var(--push) reverse both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
.contact-head { position: relative; display: flex; align-items: center; gap: 8px; margin-right: -10px; padding-bottom: 10px; }
/* 索引卡的红线。 */
.contact-head::after { content: ""; position: absolute; left: -16px; right: -6px; bottom: 0; height: 1px; background: var(--rule); }
.contact-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-head h2 { margin: 0; font: 700 18px/1 var(--serif); }
.contact-close { margin-left: auto; }
.contact-value { margin: 14px 0 16px; font: 400 17px/1.35 var(--type); letter-spacing: .01em; overflow-wrap: anywhere; user-select: all; }
.contact-acts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.contact-acts .cta, .contact-acts .btn2 { height: 44px; font-size: 14px; }
.btn2.done { border-color: var(--accent); color: var(--accent); }
/* 移动端浮层打开时压一层暗纱；body::before 已被纸纹占用，这里用 ::after。 */
@media (max-width: 640px) {
  body.contact-open::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgb(43 38 32 / .22); }
  :root[data-theme="dark"] body.contact-open::after { background: rgb(0 0 0 / .42); }
}

/* ---------- 抽出的一张卡：完整登记 ---------- */
.sheet { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--front); color: var(--ink); box-shadow: var(--shadow-lift); overflow: auto; overscroll-behavior: contain; }
.sheet::backdrop { background: var(--scrim); }
.sheet[open]::backdrop { animation: fade .25s ease-out both; }
.sheet.closing::backdrop { animation: fade .18s ease-in reverse both; }
@keyframes fade { from { opacity: 0; } }
.sheet-inner { position: relative; padding: 0 22px 30px; }
/* 抽屉名和关闭键浮在卡头上方，不占高度，词头才能在红线以上的整块区域里上下居中。 */
.sheet-top { position: absolute; z-index: 1; top: 10px; left: 22px; right: 12px; display: flex; align-items: center; gap: 10px; }
.sheet-drawer { font: 400 12px/1 var(--type); color: var(--muted); }
.sheet-close { margin-left: auto; }
.sheet-head { position: relative; }
.sheet-name { position: relative; margin: 0; padding: 50px 0; font: 700 52px/1.05 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.sheet-name.long { font-size: 30px; }
.sheet-name a { transition: color .15s; }
.sheet-name a[href]:hover { color: var(--accent); }
/* 索引卡的红色横线：词头写在线上，下面才是登记。 */
.sheet-name::after { content: ""; position: absolute; left: -22px; right: -22px; bottom: 0; height: 1px; background: var(--rule); }
.sheet-stamp { position: absolute; top: calc(50% - 25px); right: -2px; width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; font: 700 17px/1 var(--zh); color: var(--accent); transform: rotate(-10deg); opacity: .9; }
.sheet-stamp::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--accent); border-radius: 50%; opacity: .6; }
/* 盖了精品章时，词头文字给印章让出安全位（红线仍通长）。 */
.sheet.stamped .sheet-name { padding-right: 68px; }
.sheet-desc { margin: 14px 0 0; font-size: 14px; color: var(--soft); }
.sheet-meta { margin: 16px 0 24px; }
.sheet-meta div { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font: 400 13.5px/1.3 var(--type); }
.sheet-meta dt { flex: none; color: var(--muted); }
/* 点线引导：标签和取值之间拉一条打字机点线。 */
.sheet-meta div::after { content: ""; order: 1; flex: 1; min-width: 16px; border-bottom: 1.5px dotted var(--line-2); transform: translateY(-3px); }
.sheet-meta dd { order: 2; margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sheet-meta dd.warn { color: var(--warn); }
.sheet-acts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.cta, .btn2 { height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r); font-size: 15px; font-weight: 600; transition: transform .22s var(--press), background-color .15s, border-color .15s; }
.cta { background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent); }
.cta:hover { filter: brightness(1.08); }
.btn2 { border: 1.5px solid var(--ink); background: var(--front); }
.btn2:hover { background: var(--front-hi); }
.cta:active, .btn2:active { transform: scale(.97); transition-duration: 80ms; }
.cta svg, .btn2 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta svg, .btn2 svg { transition: transform .2s var(--press); }
.cta:hover svg, .sheet-acts .btn2:hover svg { transform: translateX(3px); }
/* 底部打孔：目录卡穿杆用的孔。 */
.sheet-hole { position: absolute; left: 50%; bottom: 10px; width: 14px; height: 8px; margin-left: -7px; border-radius: 50%; background: var(--inside); box-shadow: inset 0 1px 2px rgb(43 38 32 / .3); }
/* 打字机记录逐行打出来。 */
.sheet.typing .sheet-meta div { animation: type-in .26s steps(6, end) both; animation-delay: calc(140ms + var(--i, 0) * 55ms); }
.sheet-meta div:nth-child(2) { --i: 1; }
.sheet-meta div:nth-child(3) { --i: 2; }
.sheet-meta div:nth-child(4) { --i: 3; }
.sheet-meta div:nth-child(5) { --i: 4; }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sheet.typing .sheet-stamp { animation: stamp .42s cubic-bezier(.3, 1.6, .5, 1) .42s both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-10deg) scale(1.6); } }

/* ---------- 桌面：左柜面，右边固定拉开一个抽屉 ---------- */
@media (min-width: 960px) {
  :root { --pad: 28px; }
  .app { padding-top: 18px; }
  .top { grid-template-columns: auto minmax(0, 560px) auto auto; grid-template-rows: auto; grid-template-areas: "brand search count links"; gap: 20px; padding-bottom: 18px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-word { font-size: 22px; }
  .top-links { gap: 6px; }
  /* 行高锁定为舞台高度，柜面和抽屉各自在内部滚动，不被内容撑高。 */
  .stage { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 22px; }
  .cabinet, .drawer { min-height: 0; }
  .cabinet { padding-bottom: 24px; }
  .drawer { position: relative; inset: auto; z-index: auto; }
  .drawer-back { display: none; }
  .drawer-label { padding-left: 10px; }
  .drawer-body { padding: 18px 18px 32px; }
  .letters .front { height: 70px; }
  .card { min-height: 64px; }
  .hw { font-size: 25px; }
}
/* 按抽屉实际可用宽度排两摞，而不是只看视口是否达到桌面断点。 */
@container drawer (min-width: 680px) {
  .drawer-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-content: start; }
  .drawer-body > .guide, .drawer-body > .drawer-empty { grid-column: 1 / -1; }
  .drawer-body > .guide + .card + .card { margin-top: 0; }
}
@container drawer (max-width: 320px) {
  .drawer-head { flex-wrap: wrap; }
  .drawer-label { flex: 1; }
  .drawer-steps { flex-basis: 100%; justify-content: flex-end; }
  .drawer-steps:has(.step:not([hidden])) { padding-top: 2px; }
  .drawer-steps:not(:has(.step:not([hidden]))) { display: none; }
}
/* 看每张卡的内容宽度：桌面双列里的窄卡也要把记录移到词头下面。 */
@container index-card (max-width: 360px) {
  .card-content { grid-template-columns: minmax(0, 1fr); }
  .card .rec { display: flex; flex-wrap: wrap; gap: 0 10px; max-width: none; justify-self: stretch; text-align: left; }
  .card .rec br { display: none; }
}
@media (max-width: 959px) {
  .stage { max-width: 620px; width: 100%; margin: 0 auto; }
  .top { max-width: 620px; width: 100%; margin: 0 auto; }
}
/* 手机横屏：宽度够就恢复柜面+抽屉双栏，栏宽收窄。 */
@media (min-width: 700px) and (max-width: 959px) and (orientation: landscape) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto; grid-template-areas: "brand search count links"; gap: 16px; max-width: none; }
  .stage { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; max-width: none; }
  .cabinet, .drawer { min-height: 0; }
  .drawer { position: relative; inset: auto; z-index: auto; }
  .drawer-back { display: none; }
  .front.lead .peek { font-size: 18px; gap: 10px; }
}
/* 手机：抽出的卡从底部升起，占满宽度。 */
@media (max-width: 640px) {
  .sheet { width: calc(100vw - 12px); max-width: none; margin: auto auto 6px; }
  .sheet-inner { padding: 0 18px 30px; }
  .sheet-top { top: 8px; left: 18px; right: 8px; }
  .sheet-name { padding: 48px 0; font-size: 44px; }
  .sheet-name.long { font-size: 26px; }
  .sheet-name::after { left: -18px; right: -18px; }
  .sheet-stamp { top: calc(50% - 22px); right: -2px; width: 44px; height: 44px; font-size: 15px; }
  .sheet.stamped .sheet-name { padding-right: 58px; }
  .letters .front .k { font-size: 21px; }
}
@media (max-width: 360px) {
  .letters { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 5px; }
  .letters .front { height: 64px; padding-bottom: 18px; }
  .front.lead .peek { font-size: 20px; gap: 12px; }
}
@media (max-height: 700px) and (max-width: 959px) {
  .letters .front { height: 60px; padding-bottom: 17px; gap: 2px; }
  .digits .front { height: 58px; padding-bottom: 17px; }
  .front.lead { min-height: 100px; }
}
/* 矮屏（手机横屏等）：登记卡收紧卡头、记录排两栏，两个按钮不用滚动就能看到；词头仍上下居中。 */
@media (max-height: 520px) {
  .sheet-name { padding: 48px 0; font-size: 40px; }
  .sheet-name.long { font-size: 24px; }
  .sheet-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 10px 0 16px; }
  .sheet-meta div { padding: 5px 0; }
  .sheet-inner { padding-bottom: 26px; }
}
/* 触屏：页首、抽屉步进和弹层关闭键的点击区域不小于 44px。 */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .step { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}