/* ==========================================================================
   labels.css（homepage-v4 · 2026-10-20 下午起；2026-10-22 设计系统 v3 重写）—— 卡片外壳：字条行 / 卡片级动作 / 卡片描述 / 卡片背面 / 光标
   1 · 字条行 .lb：左 = 小标签 .plik-label（组件样式在 css/ui.css，全站共用 · R30），右槽 = 卡片级动作（↻ 翻 · → 读 · ↗ 打开 · R28），
       图标 = PLIKUI.icons 同一套 SVG，盒 --icon-box 20、颜色 --icon-ink（R19 / R40）；动词：桌面 hover 出、触屏常显；高度固定 28（R15d）
   2 · 卡片描述 .card-desc：只有一档 13 / 1.6 / ink-2，铺满文字栏，只受 40em 行长约束（R6 / R24 / R43）；多段在卡上接成一段（copy.js data-copy-join · R16）
   3 · 卡片背面（所有翻面卡共用 · R20）：内距 = --card-inset；大标题 24 / 1.35 / ink；正文 = 卡片描述那一档，段距 .8em；↻ 右缘对内距线、和大标题第一行居中，点按区 44
   4 · 各物件：字条放哪；5 · 光标：只有真能点的东西是手；魔法笔写字区 = 笔尖（css/pen-cursor.css 由 js/labels.js 插进 iframe）
   DOM 的搬动在 js/labels.js（字条行是运行时从卡里现成的 .card-name / .flip-btn 搬出来的）。
   ========================================================================== */
:root { --pen-cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M23.5%203.5l5%205L10%2027l-6.6%201.6L5%2022z%22%20fill%3D%22%23fff%22%20stroke%3D%22%231E2430%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M20%207l5%205%22%20fill%3D%22none%22%20stroke%3D%22%231E2430%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M5%2022l5%205%22%20fill%3D%22none%22%20stroke%3D%22%231E2430%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M3.4%2028.6l2.2-.6-1.6-1.6z%22%20fill%3D%22%231E2430%22/%3E%3C/svg%3E") 3 29, crosshair; }

/* ---------------- 1 · 字条行 ---------------- */
html .lb { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin: 0; }
html .lb .lb-n { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; }   /* R5：字条行自己管子元素的对齐 */
html .lb .lb-n > * { margin: 0; align-self: center; grid-area: auto; position: static; }
/* 右槽：一个图标（+ 动词）。盒子右缘 = 内距线 */
html .narrative-grid .lb .lb-act { position: static !important; inset: auto !important; flex: none; display: inline-flex; align-items: center; gap: 6px; width: auto !important; min-width: 0 !important; height: 28px !important;
  margin: 0 -4px 0 0; padding: 0 4px !important; border: 0; border-radius: 4px; background: none !important; box-shadow: none !important; text-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--icon-ink) !important; font: 400 12px / 1.4 var(--font-text); letter-spacing: .14em; text-transform: none; text-decoration: none; z-index: 6; }
html .narrative-grid .lb .lb-act:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .55); outline-offset: 1px; }
html .lb .lb-s { display: inline-grid; place-items: center; width: var(--icon-box); height: var(--icon-box); font-style: normal; transition: translate .18s ease, rotate .25s ease; }
html .lb .lb-v { color: rgb(var(--ink-rgb) / var(--ink-3-a)); }
html .lb .lb-v::after { content: attr(data-zh); }
html[data-lang="en"] .lb .lb-v::after { content: attr(data-en); }
html .lb .lb-v { transition: opacity .18s ease; }
@media (hover: hover) and (pointer: fine) {
  html .lb .lb-v { opacity: 0; }
  html .narrative-card:hover .lb .lb-v, html .lb .lb-act:focus-visible .lb-v, html .narrative-card:focus-within .lb .lb-act .lb-v { opacity: 1; }
  html .lb a.lb-act[target="_blank"]:hover .lb-s, html #pen .lb a.lb-act:hover .lb-s { translate: 1px -1px; }
  html .lb a.lb-act:not([target]):hover .lb-s { translate: 2px 0; }
  html .lb button.lb-act:hover .lb-s { rotate: 20deg; }
  html .m-plastic.tf-open .lb .lb-v { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {   /* 触屏：动词常显，热区 ≥ 44 */
  html .narrative-grid .lb .lb-act { height: 44px !important; margin: -8px -10px -8px 0; padding: 0 10px !important; }
}

/* ---------------- 2 · 卡片描述 ---------------- */
.card-desc { margin: 0; max-width: var(--desc-max); font-size: var(--t-s); line-height: var(--desc-lh); color: rgb(var(--ink-rgb) / var(--desc-a)); }   /* R43：描述只有一个灰（--desc-a），不跟各表面的 --ink-2 走 */
.card-desc p { margin: 0; font: inherit; color: inherit; }

/* ---------------- 3 · 卡片背面（通用 · R20）---------------- */
/* 背面内距 = --card-inset：卡片默认内距（css/mvp.css `.narrative-card .face-body`），这里不再另写 */
html .flip-tile .face.back .back-title { margin: 0 0 12px; padding-right: calc(var(--icon-box) + 16px); font: 400 var(--t-l) / 1.35 var(--font-text); letter-spacing: .01em; color: var(--ink); }
html .flip-tile .face.back .story { max-width: var(--desc-max); margin: 0; font-size: var(--t-s); line-height: var(--desc-lh); letter-spacing: 0; color: var(--ink-2); }
html .flip-tile .face.back .story p { margin: 0; font: inherit; color: inherit; }
html .flip-tile .face.back .story p + p { margin-top: .8em; }
/* 背面 ↻：图标右缘 = 内距线，和大标题第一行（24 × 1.35 = 32.4 高）垂直居中；点按区 44
   （10-22：触屏上 mobile-skin 的 .corner-turn 带 justify-content:flex-end，会把图标推到按钮最右、只离卡边 4px → 这里用 place-content 钉回居中） */
html .flip-tile .face.back .flip-btn { position: absolute; top: calc(var(--card-inset) + (32.4px - 44px) / 2); right: calc(var(--card-inset) - (44px - var(--icon-box)) / 2);
  width: 44px; height: 44px; min-width: 0; padding: 0; margin: 0; display: grid; place-items: center; place-content: center; gap: 0; border: 0; background: none; color: var(--icon-ink); text-shadow: none; z-index: 6; cursor: pointer; }
html .flip-tile .face.back .flip-btn .lb-s { display: block; width: var(--icon-box); height: var(--icon-box); }

/* ---------------- 4 · 各物件：字条放哪 ---------------- */
/* 我：下白边第一行 */
html .me-card .me-strip { display: flex; flex-direction: column; align-items: stretch; }
html .me-card .me-strip > .lb { margin: 0; }
/* 魔法笔：左上；状态「即将上线」在小标签里 */
html #pen .card-heading > .lb { margin: 0 0 8px; }
/* 盆：字条在盆的正面上（内距规则在 css/tub.css） */
html .m-plastic .face-body > .lb { margin: 0 0 12px; position: relative; z-index: 2; }
html .m-plastic .ss-txt { display: none !important; }
html .m-plastic .story-sticker::after { content: none !important; }
html .m-plastic .story-sticker { pointer-events: none; }
/* 找故事：字条占整行（网格区域在 css/mvp.css） */
html #finder .finder-body > .lb { grid-area: lb; margin: 0 0 12px; }

/* ---------------- 5 · 光标：只有真能点的才是手 ---------------- */
html .narrative-grid, html .narrative-grid * { cursor: default; }
html .narrative-grid :is(a[href], a[href] *, button:not(:disabled), button:not(:disabled) *, label[for], select) { cursor: pointer; }
html #about, html #about * { cursor: pointer; }                              /* 点相纸 = 翻 */
html .m-plastic, html .m-plastic * { cursor: pointer; }                      /* [10:31] 点盆 = 去故事页（hover 拉抽屉只是预览） */
html #finder, html #finder * { cursor: pointer; }                            /* [10:31] 点找故事卡 = 去 story.plik.fun */
html #pen, html #pen * { cursor: pointer; }                                  /* v3 · B1：点魔法笔卡 = 去家长页；写字区除外（下一行） */
html .narrative-grid :is(input[type="email"], input[type="text"], textarea) { cursor: text; }
html #pen .pen-stage, html #pen .pen-stage *, html #pen iframe { cursor: var(--pen-cursor); }
html #pen .pen-stage button, html #pen .pen-stage button * { cursor: pointer; }

/* hidden 兜底（别的样式表给了 display，会盖过 [hidden]；找故事的 .card-actions 留在网格里会撑出隐式列） */
html .narrative-grid [hidden] { display: none !important; }