/*
 * 玩家数据四页共用的内部导航样式（2026-10-13 加，2026-10-13 R1 返工改选中项配色）
 *
 * 只服务一个组件：`app/templates/_player_data_nav.php` 里的 `.pdata-nav`。
 * 为什么单独一个文件、不写进 style.css / tune.css：首页、主导航与子服那一批正在改那两份公共样式，
 * 分开放两边就不用抢同一个文件；本文件里的选择器也一律带 `.pdata-nav` 前缀，不会影响别处。
 *
 * 颜色分两类：
 *   · 底色、边框、次要文字用全站设计令牌（`--soft` / `--line` / `--muted` 等），跟着主题走；
 *   · **选中态（实心填色）用本文件自己的两套明确颜色**，不借 `--blue-deep` ——
 *     那个变量在深色主题里是给深底当"蓝色文字/链接"的浅蓝 #a8bfff，
 *     拿它铺底配白字只有 1.82:1（2026-10-13 GPT 验收 R1 的判定）。
 * 实测对比度见 `_临时工作区/20261013-玩家数据导航/contrast-check.mjs` 的输出（解析真实主题变量后计算）：
 *   浅色 #3558c8 + 白字 6.21:1；深色 #86aaff + 深字 #111726 7.84:1；两处次要文字合成后 4.90 / 5.16:1。
 * 想改外观改这里即可，改完 `asset()` 会带上新的版本号，浏览器不会用旧缓存。
 */

.pdata-nav {
  /* 移动端的横向边距与全站正文一致，桌面端靠 .wrap 居中 */
  margin: 0 0 4px;
}
.pdata-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 8px;
  list-style: none;
  /* 一整条淡淡的底 + 细边框：跟站里 `.pick-cta` / `.top-hist` 那一套同一路数 */
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--soft);
}
.pdata-nav-list > li {
  /* 桌面端四格等宽；窄屏靠下面的 media query 变两列 */
  flex: 1 1 0;
  min-width: 0;
}

.pdata-nav-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  min-height: 50px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  /* 触屏上点按不出高亮方块，靠下面的 :active / 选中态给反馈 */
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.pdata-nav-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-mid);
  color: var(--ink-2);
  /* 标签必须读得完整：不截断、不省略号；放不下时整块换行 */
  white-space: normal;
  overflow-wrap: anywhere;
  transition: color .22s ease;
}
.pdata-nav-note {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

/*
 * 当前项：整块实心填色。
 *
 * ⚠️ **不要把这个背景改回 `var(--blue-deep)`**：浅色主题里它是 #3558c8（配白字 6.21:1，可用），
 *    但深色主题里它是 **#a8bfff**（那是给深底当"蓝色文字/链接"用的浅蓝），拿它铺底配白字只有 **1.82:1**，
 *    整条标签都会糊掉（2026-10-13 GPT 验收 R1 就是这么判的）。
 *    所以这里给两套明确值：浅色 #3558c8 + 白字；深色 #86aaff + 深字 #111726（4.5:1 以上，见核对脚本）。
 */
.pdata-nav-item.is-current {
  background: #3558c8;
  border-color: #3558c8;
}
html[data-theme="dark"] .pdata-nav-item.is-current {
  background: #86aaff;
  /* 边框盖住通用 hover 的 --line 描边，选中态在任何情况下都看得出是一整块 */
  border-color: #86aaff;
}
.pdata-nav-item.is-current .pdata-nav-name {
  color: #fff;
}
html[data-theme="dark"] .pdata-nav-item.is-current .pdata-nav-name {
  color: #111726;
}
.pdata-nav-item.is-current .pdata-nav-note {
  /* 实心底上的次要文字：不用 --muted（那是对白底挑的灰），用半透明白 */
  color: rgba(255, 255, 255, .84);
}
html[data-theme="dark"] .pdata-nav-item.is-current .pdata-nav-note {
  /* 浅蓝底 + 深字那一套：次要文字用半透明深色（合成后仍 ≥ 4.5:1） */
  color: rgba(17, 23, 38, .78);
}
/* 键盘焦点：只在 Tab 走位时出现，跟全站 `:focus-visible` 一个规矩 */
.pdata-nav-item:focus-visible {
  /* outline-offset 将环放在按钮外侧；颜色必须与导航条底色形成对比。 */
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
}
@media (hover: hover) {
  .pdata-nav-item:hover {
    background: #fff;
    border-color: var(--line);
  }
  .pdata-nav-item:hover .pdata-nav-name {
    color: var(--blue-deep);
  }
  /* 选中项的 hover 必须**再写一遍**：上面两条通用 hover 会把它盖掉（同权重、后者生效） */
  .pdata-nav-item.is-current:hover {
    background: #3558c8;
    border-color: #3558c8;
  }
  .pdata-nav-item.is-current:hover .pdata-nav-name {
    color: #fff;
  }
  html[data-theme="dark"] .pdata-nav-item.is-current:hover {
    background: #86aaff;
    border-color: #86aaff;
  }
  html[data-theme="dark"] .pdata-nav-item.is-current:hover .pdata-nav-name {
    color: #111726;
  }
}
.pdata-nav-item:active {
  transform: translateY(1px);
}

/* 深色主题：导航底与**未选中项**的悬停底色另给（沿用全站深色那套 #141b28 / #1c2434） */
html[data-theme="dark"] .pdata-nav-list {
  background: #141b28;
  border-color: var(--line);
}
@media (hover: hover) {
  /*
   * ⚠️ `:not(.is-current)` 不能省：这条规则排在选中项那几条之后，
   *    同权重时它会赢 —— 少了它会变成"深色下 hover 选中项时背景被抹成 #1c2434"，
   *    选中态当场消失（GPT 验收 R1 的第二条）。
   */
  html[data-theme="dark"] .pdata-nav-item:not(.is-current):hover {
    background: #1c2434;
    border-color: var(--line);
  }
}

/*
 * 窄屏（手机与小平板）：两列排布 —— 四颗都露在外面，不横向滚动、不折成四行占满首屏。
 * 不用 `overflow-x: auto` 的横滑：那样最右边那颗默认会被切掉一半，反而不好找。
 */
@media (max-width: 700px) {
  .pdata-nav-list {
    gap: 6px;
    padding: 6px;
  }
  .pdata-nav-list > li {
    flex: 1 1 calc(50% - 3px);
    max-width: calc(50% - 3px);
  }
  .pdata-nav-item {
    padding: 8px 10px;
  }
  .pdata-nav-note {
    display: none;   /* 手机上只留标签，说明交给 title */
  }
}

/* 系统开了「减少动态效果」：本组件不加入场动画（与全站那条约定一致） */
@media (prefers-reduced-motion: reduce) {
  .pdata-nav-item {
    transition: none;
  }
}