/* ==========================================================================
   topbar.css（homepage-v4 · 2026-10-20 下午 · 控件栏合并，来自 spikes/18-five-col/css/s18-uni.css §1 §2 + spikes/19 topbar.css）
   1 · 首页顶栏：右上一组 = [中 | EN（暂不上线，藏）] [声音] [光线三档]，T2 胶囊（css/ui.css），间距 14；太阳滑杆退役。
       控件带 28 高从 10px 起 → 字母顶从 36 挪到 50（多 14px 呼吸）。内容对齐卡片网格的外边（masthead 本来就是 maxw + 2 × pad-x 居中）。
   2 · 吸顶栏（Wanfang 10-20 定稿 d）：整宽实底、不模糊；底色奶油 = 纸色 token（白天 / 夕阳 #FFFDF8，夜里暗纸 #2B2722）；?barbg=white 对照白（#FFFFFF / 夜里墙 #1C1915）；
       下边缘一条发丝线 ink .14；高 = --bar-h 56（v3 · R25）；左 = 小字标 .plik-mini（点 = 回顶 · R33，样式在 css/ui.css），右同一组控件；里面的内容对齐内容网格的外边（首页 = 卡片网格，子页 = 内容列 / 图集），底色整宽。
       显隐（js/topbar.js）：往下滚藏、往上滚出、页顶附近（header 还在）不出，阈值 8px；reduced-motion 不滑动。
   3 · 子页（about / stories）顶栏 .site-head：左字标、右光线三档（子页没有声音）；吸顶栏同一套。
   ========================================================================== */

/* ---------------- 1 · 首页顶栏（v3 · R41）----------------
   中对齐：右上控件组（高 --ui-pill）的中线 = PLIK 字母墨迹中线（js/mvp.js 量字母写 --mh-mid，单位 = 从 masthead 顶算的 px；中文名 + tagline 也居中到这条线）。
   控件组按宽度简化：≥ 1024 全部展开；700–1023 收进一个「⋯」（40 圆，js/topbar.js），点开浮层；< 700 缩一档（高 32、按钮 28）放在 PLIK 右边，触屏命中区仍 ≥ 44。 */
.mh-switch { position: absolute; top: calc(var(--mh-mid, 108px) - var(--ui-pill) / 2); right: var(--pad-x); z-index: 6; display: flex; align-items: center; gap: var(--ui-gap, 14px); }
.mh-switch .lang-switch { position: static; height: auto; gap: 0; }
.mh-switch .lang-switch a { margin: 0; padding: 0 12px; color: inherit; font-weight: 400; }
.mh-switch .lang-switch a[aria-current="true"] { font-weight: 400; }
.mh-switch .lang-switch a:focus-visible { outline-offset: 1px; }
.mh-pop { display: contents; }
.mh-more { display: none; }
@media (min-width: 700px) { .masthead { padding-top: calc(36px - 23px * var(--hs) + 14px); } }   /* 字母墨迹顶 = 50 */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .mh-more { display: inline-grid; }
  .mh-pop { display: none; }
  .mh-switch.is-open .mh-pop { display: flex; align-items: center; gap: var(--ui-gap, 14px); position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
    padding: 8px; border-radius: 999px; background: var(--wall); box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .14), 0 6px 18px rgb(40 30 20 / .12); }
  .mh-switch.is-open .mh-more { background: var(--ui-on); }
}
@media (max-width: 699.98px) {
  .masthead { padding-top: 16px; }
  .mh-switch { --ui-pill: 32px; --ui-w: 28px; --ui-gap: 8px; --ui-seg-gap: 4px; --ui-pad: 2px; }
  .mh-switch .lang-switch a { padding: 0 10px; margin: 0; }
  .mh-switch .ui > button::after { content: ""; position: absolute; inset: -8px; }   /* 28 → 44 */
  .mh-switch .ui-btn.is-single::after { content: ""; position: absolute; inset: -6px; }   /* 32 → 44 */
}

/* ---------------- 2 · 吸顶栏 ---------------- */
.topbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--bar-h); pointer-events: none; opacity: 0; translate: 0 -8px; transition: opacity .25s ease, translate .3s cubic-bezier(.3, .7, .3, 1);
  --bar-cream: #FFFDF8; --bar-white: #FFFFFF; --bar-bg: var(--bar-cream); background: var(--bar-bg); box-shadow: 0 .5px 0 rgb(var(--ink-rgb) / .14); }
:root[data-theme="night"] .topbar { --bar-cream: var(--night-paper); --bar-white: #1C1915; }
html[data-barbg="white"] .topbar { --bar-bg: var(--bar-white); }
.topbar.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.topbar:not(.is-on), .topbar:not(.is-on) * { pointer-events: none !important; }
.topbar .bar-in { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: calc(var(--bar-w, var(--maxw, 1200px)) + 2 * var(--pad-x, 40px)); margin: 0 auto; padding: 0 var(--pad-x, 40px); }
/* 左：小字标 .plik-mini（点 = 回顶）。按钮本身不带样式，光学左缘对齐内容网格 */
.topbar .bar-mark { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; text-decoration: none; }
.topbar .bar-mark:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .55); outline-offset: 2px; }
@media (max-width: 699.98px) { .topbar .bar-in { padding: 0 var(--pad-x, 16px); } }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; translate: none !important; } }

/* ---------------- 3 · 子页顶栏（关于页、魔法笔家长页、美人鱼 / 蜡笔海故事页）：高 = --bar-h 56（R25），左 = 小字标 .plik-mini（R33） ---------------- */
/* 顶栏本身（flex、高 56、没有上下内距）在 site.css 原件（app/src/css/site.css）里定义；这里只管里面的东西 */
.site-head .site-brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-head .ui-group { flex: none; }