/* ============================================================================
 * 顶栏「境界细条」样式（2026-10-07）
 * ----------------------------------------------------------------------------
 * 定位：**提示**，不是主角 —— 高度不超过顶栏本身，不抢主导航，不进导航项。
 * 视觉沿用顶栏的浅色底与细边，与学情中枢的石碑母题**故意不同**：
 * 那块是碑刻（直角/纸纹/朱红印），这里是状态条（薄、无装饰），
 * 同一套信息两种呈现，靠「位置与密度」区分，不靠换色。
 * ========================================================================== */

.xj-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  margin-right: 2px;
  border: 1px solid var(--hair, rgba(0, 0, 0, .12));
  border-radius: 999px;        /* 状态条用胶囊，与顶栏其余控件同语言 */
  background: var(--bg-2, rgba(0, 0, 0, .04));
  color: var(--ink-2, #6b7080);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  flex: 0 0 auto;
  position: relative;          /* 「修为 +N」飞字的定位上下文 */
}
/* [P1 触摸目标] 扩展点击命中区到 ≥44pt：可见高度保持 30px，上下各补 7px 透明命中区 */
.xj-bar::after{content:'';position:absolute;inset:-7px 0}

/* ---- 即时入账：修为 +N ----
   ⛔ 无 emoji、无渐变、无发光；纯位移+透明度，1.6 秒后自动移除节点。
   ⛔ 不做「恭喜解锁」式贺词：孩子没被解锁任何东西，只是账上多了几笔。 */
.xj-fly {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--ink, #1f2430);
  pointer-events: none;
  animation: xjFly 1.5s ease-out 1 both;
}
@keyframes xjFly {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  16%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}
.xj-bar:hover { color: var(--ink, #1f2430); border-color: var(--hair, rgba(0, 0, 0, .22)); }

/* 段位名是这条里唯一"有分量"的东西 —— 只加粗，不上色、不发光 */
.xj-bar .xj-lv { font-weight: 600; color: var(--ink, #1f2430); }

/* 修为数用等宽数字，避免每次刷新宽度跳动 */
.xj-bar .xj-qi { font-variant-numeric: tabular-nums; }

.xj-bar .xj-next { color: var(--ink-3, #9aa0aa); }

/* [#783] 满级题名（第 8 段之后才出现）：借石碑同款朱红点一下题，
   但不上发光/渐变 —— 仍是状态条语言，不是碑刻语言 */
.xj-bar .xj-rank { color: #9e2b25; font-weight: 600; }

/* 窄屏：先舍"距…还差"，保住段位与修为（最要紧的两个数）。
   阈值取 900 而不是 1080：实测 1000px 宽时"还差多少"被藏掉太早，
   而 1000–1440 是常见窗口，那一段它其实放得下。 */
@media (max-width: 900px) {
  .xj-bar .xj-next { display: none; }
}
@media (max-width: 720px) {
  .xj-bar { height: 28px; padding: 0 8px; gap: 6px; font-size: 11px; }
  .xj-bar::after{inset:-8px 0}
  .xj-bar .xj-qi { display: none; }
}

/* 尊重系统与家长的「减少动效」开关 */
@media (prefers-reduced-motion: reduce) {
  .xj-bar { transition: none !important; animation: none !important; }
}
/* ---- #781 三把钥匙明细浮层：hover 细条展开；⛔ 纯只读，不是入口 ---- */
.xj-keys-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 216px;
  padding: 10px 12px;
  border: 1px solid var(--hair, rgba(0, 0, 0, .12));
  border-radius: 10px;
  background: var(--bg-1, #fff);
  color: var(--ink-2, #6b7080);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  text-align: left;
  white-space: normal;
}
.xj-bar:hover .xj-keys-pop,
.xj-bar:focus-within .xj-keys-pop { display: block; }
.xj-keys-pop .xj-krow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  line-height: 1.9;
}
.xj-keys-pop .xj-krow b {
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1f2430);
  font-weight: 600;
}
.xj-keys-pop .xj-knote {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--hair, rgba(0, 0, 0, .12));
  font-size: 11px;
  color: var(--ink-3, #9aa0aa);
}

/* ---- #781 即时回执：条下方浮出 3.6s 自灭；⛔ 无「恭喜/解锁」、无时间承诺 ---- */
.xj-receipt {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 31;
  max-width: 300px;
  padding: 8px 12px;
  border: 1px solid var(--hair, rgba(0, 0, 0, .12));
  border-radius: 10px;
  background: var(--bg-1, #fff);
  color: var(--ink, #1f2430);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  white-space: normal;
  pointer-events: none;
  animation: xjReceipt 3.6s ease-out 1 both;
}
@keyframes xjReceipt {
  0%   { opacity: 0; transform: translateY(6px); }
  8%   { opacity: 1; transform: translateY(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .xj-receipt { animation: none !important; opacity: 1; }
}

/* [#789] 第三把钥匙「自己想出来」双轨现场回执：四消费端（练一练/错题本/模考/三站）共用。
   主行 = 30 天窗口第 N 把；次行 = 全量累计点亮（窗口滑出也不回落）。
   视觉契约沿用既有金条 #c8a24a / 朱红 #9e2b25，暗档提亮 #e7c878 / #f0908a。 */
.xj-key {
  margin-top: 7px;
  border-left: 3px solid #c8a24a;
  padding: 5px 9px;
  color: #7a5b1e;
  font-weight: 700;
}
.xj-key-main { line-height: 1.5; }
.xj-key-main b { color: #9e2b25; font-weight: 700; }
.xj-key-life {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #9a7b34;
  line-height: 1.4;
}
html[data-theme="dark"] .xj-key {
  color: #e7c878;
  border-left-color: #caa64a;
}
html[data-theme="dark"] .xj-key-main b { color: #f0908a; }
html[data-theme="dark"] .xj-key-life { color: #caa64a; }

/* ============================================================================
 * 对比度兜底（2026-10-10 PM 实测）
 * ----------------------------------------------------------------------------
 * 背景：细条自身文字走 --ink* 主题变量，但它落地的**宿主顶栏**并不都由主题变量管：
 *   ① #/home 顶栏恒为深色镜面（body[data-tone="mirror"]，底 #0B0817 + 深紫渐变），
 *      浅色档下 var(--ink-*) 是深墨色 ⇒ 落深紫底几乎读不出（实测对比度 1.12：
 *      PM 截图里「— 修为 7 再攒 0 个知识点 · 0 道错题」整段看不见）。
 *   ② 错题本 .ebtop 深色档顶栏变深，但该页不定义 --ink*，
 *      var(--ink-2,#6b7080) 退化成中灰 ⇒ 只有 3.52。
 *   ③ 浮层 .xj-keys-pop / 回执 .xj-receipt 原写 var(--bg-1,#fff) + var(--ink*)，
 *      而 --bg-1 全站从未定义 ⇒ 卡片恒白底，深色档下 --ink* 又是白色 ⇒ 白字压白底。
 * 处理：按「实际落地的底」补色；浅色档 + 亮色顶栏的既有观感一律不动。
 * ========================================================================== */

/* ① 深色镜面顶栏（#/home）：该页两档主题下顶栏都是深底 ⇒ 细条一律浅色 */
body[data-tone="mirror"] .xj-bar{color:rgba(245,242,255,.72);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
body[data-tone="mirror"] .xj-bar:hover{color:#fff;border-color:rgba(255,255,255,.30)}
body[data-tone="mirror"] .xj-bar .xj-lv{color:#F5F2FF}
body[data-tone="mirror"] .xj-bar .xj-next{color:rgba(245,242,255,.56)}

/* ② 深色档 + 错题本深色顶栏：该页不定义 --ink*，按深底给浅色 */
html[data-theme="dark"] .ebtop .xj-bar{color:rgba(245,242,255,.70);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
html[data-theme="dark"] .ebtop .xj-bar:hover{color:#fff;border-color:rgba(255,255,255,.30)}
html[data-theme="dark"] .ebtop .xj-bar .xj-lv{color:#FFFFFF}
html[data-theme="dark"] .ebtop .xj-bar .xj-next{color:rgba(245,242,255,.55)}

/* ③ 不透明浮层按档位显式给色，不再依赖宿主变量（必须排在 .xj-keys-pop 原定义之后） */
.xj-keys-pop{background:#fff;color:#5B6172;border-color:rgba(15,12,30,.12)}
.xj-keys-pop .xj-krow b{color:#1F2430}
.xj-keys-pop .xj-knote{color:#8B90A0;border-top-color:rgba(15,12,30,.12)}
.xj-receipt{background:#fff;color:#1F2430;border-color:rgba(15,12,30,.12)}
html[data-theme="dark"] .xj-keys-pop{background:#1B1730;color:rgba(245,242,255,.80);border-color:rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.55)}
html[data-theme="dark"] .xj-keys-pop .xj-krow b{color:#FFFFFF}
html[data-theme="dark"] .xj-keys-pop .xj-knote{color:rgba(245,242,255,.50);border-top-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .xj-receipt{background:#1B1730;color:#F5F2FF;border-color:rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.55)}