/* nav-floating-tools.css
   首页与扩展导航目录共用的两颗悬浮按钮（.desc-toggle / .back-to-top）。
   从 home-directory.css 原样抽出，避免两套视觉和两套交互。
   描述开关仍用 body.show-card-desc / body.hide-card-desc：
   首页作用在 .site-card-desc，扩展目录作用在 .platform-description。
   改颜色、尺寸、位置时只改这一份。 */

.back-to-top {
  position: fixed;
  z-index: 40;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  /* 外观与 .desc-toggle 逐项一致，两颗悬浮按钮在左右下角对称出现，各长一个样会读成两类控件。

     2026-09-18 从「白底 + 粉描边 + 深粉字」换成蓝系。起因是站主反馈「跟背景太像」——
     实测那条粉边框 `#f0c6d5` 压白底只有 **1.53:1**，压页面底色 `#f6f7fb` 更是 1.43:1，
     等于没有边界。注意换色相本身救不了：blue-200 是 1.42、blue-300 是 1.80，一样看不见。
     所以「浅蓝」落在**底色**上（#eff6ff），边框则必须过 WCAG 1.4.11 那条 3:1。

     字色是站主手调的（2026-09-18 末），hover 方向是**加深**：

       常态   字 #3d3eee 压底 6.18:1   边框 #6366f1 压白 4.47:1
       hover  字 #0000ee 压底 8.64:1   边框/底色/阴影均不变

     边框取 indigo-500，与字色同色系（原来的 blue-500 #3b82f6 偏天蓝，跟靛蓝的字色不是
     一家）。indigo-400 以浅的都不行：#818cf8 压白 2.98:1、#a5b4fc 1.99:1，都低于
     WCAG 1.4.11 对 UI 组件的 3:1，会退回「边框看不见」那个老问题。

     两颗按钮的 color / border / background / box-shadow 必须逐项相同 —— 它们在左右下角
     对称出现，各长一个样会读成两类控件。改一颗就要改另一颗。

     蓝在这个粉色站里是刻意的「系统控件」色：这两颗是工具按钮，不是内容。 */
  gap: 5px;
  padding: 5px 7px;
  color: #3d3eff;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  /* 边框用 currentColor 而不是把字色再抄一遍：图标本来就继承 color，这样
     文字 / 图标 / 边框**结构上**就是同一个颜色，hover 时也只需要改 color 一处。
     2026-09-18 之前是写死的十六进制，改过一次字色之后边框就掉队了（两颗按钮还各自
     漂成了 #3d3eff 与 #3d3eEE、hover 漂成 #0000FF 与 #0000EE）。 */
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #eff6ff;
  /* 双层阴影，是这两颗按钮「浮在页面之上」而不是「贴在页面上」的全部原因：
     第一层是 1px 的接触阴影，让边缘不发虚；第二层是扩散阴影，染成与按钮同系的蓝
     （中性灰的话会和卡片混作一谈 —— 原值 `0 6px 16px rgba(23,33,43,.14)` 与
     `.bookmark-toast` 逐字相同，与 `.directory-panel` 等卡片也同一家族）。
     强度刻意落在卡片（3–6px / .035–.14）与真正的顶层 `.site-tooltip`（16px 36px / .2）之间。 */
  box-shadow:
    0 1px 2px rgba(23, 33, 43, .10),
    0 10px 24px rgba(29, 78, 216, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 变色只改 `color` 一处，文字 / 图标 / 边框跟着一起变（图标继承、边框是 currentColor）。
   底色与阴影不变。不加下划线 —— 站主口径。

   **`:hover` 必须关在 `@media (hover: hover)` 里。** 触屏没有真正的悬停，浏览器会在点击后
   给元素留一个**模拟 hover 态**，而且点到页面别处（非交互区域）往往不会清掉它 ——
   表现就是手机上点完按钮，它永远停在深色上。2026-09-18 站主报的就是这个。
   `(hover: hover)` 只在「主输入设备真的能悬停」时为真，所以触屏根本不会进入这条规则；
   带触控板的笔记本仍然照常 hover。

   **触屏的高亮靠 `:focus`，不是 `:hover` 也不是 `:focus-visible`。** 三者在触屏上的行为完全不同：
     :hover          点击后留一个模拟态，点别处也常常不清掉 → 粘住，所以关在上面那个能力查询里
     :focus-visible  **只对键盘生效**，指针/触屏点击不匹配 → 手机上什么都不亮
     :focus          点击即进入，点页面别处自动 blur → 正好是「焦点离开就恢复」
   站主要的就是最后这一个：点了要变色，焦点离开要恢复。
   `:focus` 是 `:focus-visible` 的超集，键盘用户照样覆盖；全局那条
   `button:focus-visible { outline }`（:62）不变，所以鼠标/触屏点击不会多出一圈描边。
   `:active` 保留，提供按下瞬间的反馈。 */
@media (hover: hover) {
  .back-to-top:hover {
    color: #0000ff;
  }
}

.back-to-top:focus,
.back-to-top:active {
  color: #0000ff;
  text-decoration: none;
}

.back-to-top-icon {
  font-size: 13px;
  line-height: 1;
}

.desc-toggle {
  position: fixed;
  z-index: 40;
  /* 贴左下角，与右下角的「返回顶部」对称（两者 bottom 相同）。
     用 left 而不是算一个相对 back-to-top 的 right 偏移：这张表两个语言变体共用，
     英文回退文案 "Show descriptions" 比「显示描述」宽一截，任何写死的偏移都会错位。 */
  /* 与「返回顶部」严格对称：桌面 20px、窄屏 12px（窄屏那档在 640 块里）。
     这两个值必须跟着 .back-to-top 走，否则桌面端会一高一低。 */
  left: 20px;
  bottom: 20px;
  /* 两端都显示。`[hidden]` 仍然压得住它 —— 脚本在没有卡片的页面（en 变体全是胶囊）
     靠那个属性把按钮留在隐藏状态。 */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  /* 配色与 .back-to-top 逐项相同，理由见那里的注释（含边框为什么用 currentColor）。 */
  color: #3d3eff;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid currentColor;
  /* 与「返回顶部」的取值一致（窄屏那档在 640 块里）。 */
  border-radius: 6px;
  background: #eff6ff;
  /* 与 .back-to-top 逐项相同，理由见那里的注释。 */
  box-shadow:
    0 1px 2px rgba(23, 33, 43, .10),
    0 10px 24px rgba(29, 78, 216, .22);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* 与 .back-to-top 逐项相同：hover 关在 (hover: hover) 里、触屏高亮走 :focus。
   理由见那边的注释。 */
@media (hover: hover) {
  .desc-toggle:hover {
    color: #0000ff;
  }
}

.desc-toggle:focus,
.desc-toggle:active {
  color: #0000ff;
  text-decoration: none;
}

.desc-toggle[hidden] {
  display: none;
}

.desc-toggle-icon {
  font-size: 13px;
  line-height: 1;
  /* 状态切换时转半圈：☰ 与 ✕ 之间加一点动作，让"按下去了"这件事在小尺寸上也读得出来。 */
  transition: transform .18s ease;
}

.desc-toggle.is-on .desc-toggle-icon {
  transform: rotate(180deg);
}

/* 宽屏：两颗悬浮按钮跟着**内容列**走，而不是钉在视口角落。
   内容列在 1160px 封顶（--max），而窗口常常 1900px 以上，按钮贴在视口角就会与内容隔着
   一大片空白。这里让它们的外缘贴住内容列外边缘、留 8px 间隙，正好落在空白的装订线里，
   不遮挡任何内容。

   两个实现要点：

   1. **左按钮用 `right` 定位、右按钮用 `left` 定位。** 这样「按钮外缘贴在内容边缘上」
      不需要知道按钮有多宽（中英文文案宽度差一倍）。常见的 `transform: translateX(-100%)`
      手法在这里**不可用** —— `.back-to-top` 的显隐动画占着 transform（隐藏态是
      `translateY(8px)`），两者叠在同一个属性上会打架。
   2. **用 `100%` 而不是 `100vw`。** fixed 元素的百分比按初始包含块解析，**不含滚动条**；
      `100vw` 含滚动条，在 Windows 上会偏 15px 左右。宽度公式与 `.page` 保持一致。

   阈值 1500px 是算出来的：最宽的一颗是英文的 "Show descriptions"（约 148px），
   需要 1160 + 2×(148 + 8 间隙 + 8 边距) ≈ 1488px 才放得下装订线。更窄时保持 20px 角落。

   ⚠ 验证盲点：`sync-inline-style-classes.mjs` 的 MEDIA_CTX 最宽只到 **1400px**，
   所以这一整块**不被任何校验器覆盖**（cascade-diff 同理）。改这里只能手算 + 浏览器实测。
   手算对照（视口 2000px）：内容列 1160，左边缘在 x=420；按钮 right = 50% + 580 + 8 = 1588，
   其右缘落在 x = 2000 − 1588 = 412，正好与内容左缘留 8px。 */
@media (min-width: 1500px) {
  .desc-toggle {
    right: calc(50% + min(var(--max), 100% - 40px) / 2 + 8px);
    left: auto;
  }

  .back-to-top {
    left: calc(50% + min(var(--max), 100% - 40px) / 2 + 8px);
    right: auto;
  }
}

@media (max-width: 640px) {
  /* 只剩贴角位置。原来这里还压着 padding / border-radius / font-size 三条「窄屏小 2px」，
     2026-09-17 把基础层统一成 .desc-toggle 的取值之后，那三条与基础层逐字节相同，
     留着只会让人以为窄屏还有一套自己的尺寸。 */
  /* 两颗悬浮按钮在窄屏一起往角里收 8px。两条必须同改，否则桌面/窄屏会出现一高一低。 */
  .back-to-top {
    right: 12px;
    bottom: 12px;
  }

  .desc-toggle {
    left: 12px;
    bottom: 12px;
  }

  /* 按钮往角里收了 8px，底部让位跟着少 8px：12 + 26.4 + 约 10 间隙（理由见基础层 body）。 */
  body {
    padding-bottom: 48px;
  }

  /* 窄屏常态色，逐步调淡到 #6769ff（#3d3eff → #4f50ff → 再淡 15%）。
     **这是在真机上定的，不是在浏览器的手机模拟里定的。** 两者渲染不一样：
     真机多为 P3 广色域 + 3x 像素密度，同一个高饱和蓝会更艳、1px 边框与 12px 小字也更锐，
     观感明显比模拟器重。以后调这类值一律以真机为准，模拟器不能当验收。

     对比度代价（压按钮底 #eff6ff）：5.79 → 4.92 → **3.83:1**。
     已经低于 12px 小字的 AA 4.5:1，但仍高于 WCAG 1.4.11 对 UI 组件（边框）的 3:1 ——
     站主在看过真机之后明确选了这一档，是知情的取舍。再淡就连边框也保不住了。

     字 / 图标 / 边框都绑在同一个 color 上（边框是 currentColor、图标继承），改这一处三者同变。
     桌面端常态仍是 #3d3eff（5.79:1），高亮态仍是 #0000ff（7.90:1），落差因此更明显。 */
  .back-to-top,
  .desc-toggle {
    color: #6769ff;
  }

  /* 这里 2026-09-22 短暂加过一条 `.back-to-top, .desc-toggle { min-height: 40px;
     padding: 8px 12px }`，把两颗悬浮按钮从基础层的 26.4px 高抬到 40px，当天按站主要求撤销。

     **不要再以「触摸目标太小」为由加回来。** 当时的论据是：26.4px 高配 82–132px 宽，
     在屏幕最下角读起来更像一行说明文字而不是按钮。那条论据本身没被推翻 ——
     但 26.4px **并不违反** WCAG 2.5.8（那条要 24×24，它过了），所以这是观感判断不是合规问题，
     而站主看过实物后的判断是：原尺寸更合适。观感的事以他的眼睛为准。
     顺带一个当时没算够的代价：两颗是 fixed + z-index 40，抬高 13.6px 等于在每一屏都多
     盖住底部内容约 14px。

     窄屏在这里只改位置与颜色（见上下两块），尺寸一律继承基础层。 */
}

/* RTL：物理 left/right 对调，使「关闭描述」仍在行首一侧、「返回顶部」在行末一侧。
   当前九个导航首页都是 ltr，这些规则不会改变它们。 */
html[dir="rtl"] .desc-toggle {
  right: 20px;
  left: auto;
}

html[dir="rtl"] .back-to-top {
  left: 20px;
  right: auto;
}

@media (min-width: 1500px) {
  html[dir="rtl"] .desc-toggle {
    left: calc(50% + min(var(--max), 100% - 40px) / 2 + 8px);
    right: auto;
  }

  html[dir="rtl"] .back-to-top {
    right: calc(50% + min(var(--max), 100% - 40px) / 2 + 8px);
    left: auto;
  }
}

@media (max-width: 640px) {
  html[dir="rtl"] .desc-toggle {
    right: 12px;
    left: auto;
  }

  html[dir="rtl"] .back-to-top {
    left: 12px;
    right: auto;
  }
}