/* ==========================================================================
   ui.css（homepage-v4 · 2026-10-20 下午 · 控件栏合并，来自 spikes/17-design-system/ds-ui.css 的 T2 胶囊家族）
   [10-22 正圆] 选中圆 32×32，外层胶囊高 40（圆上下各留 4）、圆角 = 高/2，三档间距 8；声音按钮 40×40 正圆；触屏命中区 ≥44 靠伪元素。
   一个控件组件 .ui：顶栏右上一组（光线三档 / 声音 / 中 | EN）和吸顶栏里的同一组。Wanfang 10-20 拍板：胶囊（pure shape 比较简洁）。
     · 高 28（触屏 36）、圆角 999、.5px 描边 ink .18、透明底；每档 32 × 24（容器内留 2px，图形 28 居中）；单个按钮 36 × 28；组内间距 14（触屏 12）
     · 态（v3 · R40）：图形 = 实色主墨 --icon-ink，没有半透明待机 · 按下 底 ink .14 · 选中 只靠圆底 ink .08（夜里 .12）· focus-visible 1.5px ink .6 外圈 · 只有 aria-disabled 淡到 35%
     · 图形 1.5 墨线（和原来的太阳滑杆 / 喇叭同一套画法，在 js/ui.js 里）；喇叭做了光学居中（整组右移 .8px）
   只读 --ink-rgb（在墙上）；吸顶栏 / 子页同一个文件。
   ========================================================================== */
:root { --ui-pill: 40px; --ui-h: 28px;   /* --ui-h 只留给 cards-extra.css 的 CTA 按钮用 */
   --ui-w: 32px; --ui-pad: 4px; --ui-seg-gap: 8px; --ui-gap: 14px; --ui-r: 999px; }
.ui, .ui > *, .ui-btn { box-sizing: border-box; }
.ui {
  --ui-ink: var(--ink-rgb, 30 36 48);
  --ui-edge: inset 0 0 0 .5px rgb(var(--ui-ink) / .18); --ui-on: rgb(var(--ui-ink) / .08); --ui-down: rgb(var(--ui-ink) / .14);
  position: relative; display: inline-flex; align-items: center; gap: var(--ui-seg-gap); flex: 0 0 auto; height: var(--ui-pill); padding: 0 var(--ui-pad); margin: 0;
  border-radius: var(--ui-r); background: transparent; box-shadow: var(--ui-edge);
  color: rgb(var(--ui-ink)); font: 400 12px / 1 var(--font-text); letter-spacing: .04em;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: box-shadow .18s ease;
}
:root[data-theme="night"] .ui { --ui-edge: inset 0 0 0 .5px rgb(var(--ui-ink) / .24); --ui-on: rgb(var(--ui-ink) / .12); --ui-down: rgb(var(--ui-ink) / .18); }
.ui:hover { box-shadow: inset 0 0 0 .5px rgb(var(--ui-ink) / .32); }
.ui > button, .ui > a, .ui-btn {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--ui-w); height: var(--ui-w); padding: 0; margin: 0; border: 0;
  border-radius: 999px; background: transparent; color: var(--icon-ink); font: inherit; letter-spacing: inherit; text-decoration: none; cursor: pointer; line-height: 1;
  transition: background-color .18s ease;
}
.ui-btn:hover { background: var(--ui-on); }
.ui > button:active, .ui > a:active, .ui-btn:active { background: var(--ui-down); }
.ui > [aria-pressed="true"], .ui > [aria-current]:not([aria-current="false"]), .ui > .on { background: var(--ui-on); }
.ui > button:focus-visible, .ui > a:focus-visible, .ui-btn:focus-visible { outline: 1.5px solid rgb(var(--ui-ink) / .6); outline-offset: 1px; z-index: 1; }
.ui > button:focus:not(:focus-visible), .ui > a:focus:not(:focus-visible), .ui-btn:focus:not(:focus-visible) { outline: none; }
.ui > [aria-disabled="true"], .ui-btn[aria-disabled="true"] { cursor: default; opacity: .35; background: none; }
/* [v3 · R19 / R19b] 控件图形画在 28 画布上：按 20 / 24 缩，占位 = --icon-box 20；线宽 1.5 不随缩放变。
   视觉大小统一到墨迹约 13（20 盒的 2/3）：几枚原图墨迹偏小，按实测逐个放大（下面的 scale） */
.ui svg { display: block; width: calc(var(--icon-box) * 7 / 6); height: calc(var(--icon-box) * 7 / 6); margin: calc(var(--icon-box) / -12); overflow: visible; pointer-events: none; }
.ui .ui-line { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ui-light button[data-stop="day"] svg { scale: 1.18; }
.ui-light button[data-stop="night"] svg { scale: 1.42; }
.ui.ui-btn svg { scale: 1.25; }
.ui .ui-fill { fill: currentColor; stroke: none; }
/* 单个图标（声音）：容器就是按钮 */
.ui-btn.is-single { width: var(--ui-pill); height: var(--ui-pill); padding: 0; border-radius: 50%; }
.ui-btn .snd-slash { display: none; }
.ui-btn.is-muted .snd-wave { display: none; }
.ui-btn.is-muted .snd-slash { display: inline; }
/* 语言两档（暂不上线：html[data-lang-switch="off"] 时整个藏起来，DOM 和代码保留） */
.ui-lang { gap: 0; }
.ui-lang > a { width: auto; min-width: var(--ui-w); padding: 0 12px; font-size: 13px; }
.ui-lang .ls-dot { display: none; }
html[data-lang-switch="off"] .ui-lang, html[data-lang-switch="off"] .lang-switch { display: none !important; }
/* 一组控件并排 */
.ui-group { display: inline-flex; align-items: center; gap: var(--ui-gap); }
@media (hover: none), (pointer: coarse) {
  :root { --ui-h: 36px; --ui-gap: 12px; }
  /* 命中区 ≥ 44：伪元素向外扩，视觉尺寸不变（选中圆 32 → 44；声音按钮 40 → 44） */
  .ui > button::after, .ui > a::after { content: ""; position: absolute; inset: -6px; }
  .ui-btn.is-single::after { content: ""; position: absolute; inset: -2px; }
}
@media (prefers-reduced-motion: reduce) { .ui, .ui > *, .ui-btn { transition: none !important; } }

/* ==========================================================================
   设计系统 v3 · 全站共用组件（首页、关于页、故事页、魔法笔家长页都加载本文件）
   ========================================================================== */

/* ---------------- 线性图标（PLIKUI.icons.flip / ext / next / eraser / search，24 画布，画在 --icon-box 里）---------------- */
.ic { display: block; width: var(--icon-box); height: var(--icon-box); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic * { vector-effect: non-scaling-stroke; }

/* ---------------- 小贴纸 .stk-s（项目类卡片 / 小标签用；短文类不放贴纸 · R15d）----------------
   白色模切边 + 两层小投影；每张固定一个小角度；镭射（魔法笔的宝石）跟指针（--sx / --sy 由 js/topbar.js 写） */
.stk-s {
  --stk-r: 0deg; --stk-size: 28px;
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--stk-size); height: var(--stk-size); margin: 0;
  rotate: var(--stk-r); transition: rotate .35s cubic-bezier(.3, .7, .3, 1), translate .35s cubic-bezier(.3, .7, .3, 1);
  filter: drop-shadow(0 .5px .4px rgb(74 60 44 / .32)) drop-shadow(0 1.4px 1.8px rgb(74 60 44 / .14));
  pointer-events: none;
}
.stk-s > img, .stk-s > svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.stk-s.is-holo::after { content: ""; position: absolute; inset: 1px; border-radius: 5px; pointer-events: none; mix-blend-mode: overlay; opacity: .4; transition: opacity .3s;
  background: linear-gradient(112deg, rgb(255 79 133 / 0) 4%, rgb(253 108 165 / .9) 22%, rgb(111 202 255 / .95) 40%, rgb(217 244 123 / .8) 54%, rgb(161 107 255 / .9) 71%, rgb(255 139 101 / 0) 95%);
  background-size: 260% 260%; background-repeat: no-repeat; background-position: var(--sx, 50%) var(--sy, 40%); }
.narrative-card:hover .stk-s.is-holo::after { opacity: .8; }
.narrative-card:hover .stk-s { translate: 0 -1px; rotate: calc(var(--stk-r) * .5); }
:root[data-theme="night"] .stk-s { filter: drop-shadow(0 .6px .5px rgb(0 0 0 / .5)) drop-shadow(0 1.6px 2px rgb(0 0 0 / .28)) brightness(.94); }
@media (prefers-reduced-motion: reduce) { .stk-s { transition: none; } .narrative-card:hover .stk-s { translate: none; rotate: var(--stk-r); } }

/* ---------------- 小标签 .plik-label（R30 / R31）：首页卡片字条行、故事页页头、「接着读」、家长页，同一个组件 ----------------
   结构（PLIKUI.label 生成）：（贴纸 28）+ 类别词（600 · 墨 .8）+「 · 」+ 名词（+「 · 状态」）。12 / 1.4 / 字距 .14em / 墨 .72；高度固定 28。 */
.plik-label { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; min-height: 28px; margin: 0; padding: 0;
  font: 400 12px / 1.4 var(--font-text); letter-spacing: .14em; color: rgb(var(--ink-rgb) / var(--ink-3-a)); text-transform: none; white-space: nowrap; }
.plik-label > .stk-s { margin-right: 8px; }
.plik-label .pl-cat { font-weight: 600; color: rgb(var(--ink-rgb) / .8); }
.plik-label .pl-sep { white-space: pre; }
.plik-label .pl-n, .plik-label .pl-st { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-lang="en"] .plik-label { text-transform: uppercase; letter-spacing: .16em; }

/* ---------------- 小字标 .plik-mini（R33）：首页 PLIK 的缩小版 —— 同一套字形轮廓（js/glyphs.js）、同四色、同叠色；高 26
   中文名 = 首页标题同字体同字重（Smiley 400，字距 .03em，主墨）17px，和 PLIK 间距 12。用在首页吸顶栏、所有子页顶栏；手机只留 PLIK ---------------- */
.plik-mini { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); line-height: 1; text-decoration: none; }
.plik-mini .pm-mark { display: block; height: 26px; width: auto; isolation: isolate; overflow: visible; }
.plik-mini .pm-mark path { mix-blend-mode: multiply; }
:root[data-theme="night"] .plik-mini .pm-mark path { mix-blend-mode: screen; }
.plik-mini .pm-txt { font: 600 20px / 1 var(--font-brand-en); letter-spacing: -.01em; }
.plik-mini .pm-zh { margin: 0; font: 400 17px / 1 var(--font-brand-zh); letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
@media (max-width: 699.98px) { .plik-mini .pm-zh { display: none; } }

/* ---------------- 标题按「分句 → 词」断行（R36，js/ui.js PLIKUI.phrase 包 .cl / .wd）---------------- */
.wd { white-space: nowrap; }
.cl { display: inline-block; max-width: 100%; }

/* ---------------- 社交 logo .so（R19b）：实心品牌图形，占位 20、图形 14；颜色 = --icon-ink；点按区 32（触屏 44） ---------------- */
.so { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.so a { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--icon-ink); text-decoration: none;
  transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.so a:hover { background: rgb(var(--ink-rgb) / .06); }
.so a:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .55); outline-offset: 0; }
.so a:active { background: rgb(var(--ink-rgb) / .1); }
.so svg { display: block; width: var(--icon-box); height: var(--icon-box); padding: 3px; box-sizing: border-box; fill: currentColor; stroke: none; }
@media (hover: none), (pointer: coarse) { .so a { width: 44px; height: 44px; } }

/* ---------------- 主按钮（R39）：底 / 字来自派生 token --cta-bg / --cta-fg（tokens.css），在哪一面上就跟哪一面 ---------------- */
.btn.cta { background: var(--cta-bg); color: var(--cta-fg); }