/* ============================================================
   鸽小站 · 子页主题层（2026-09-15）
   ------------------------------------------------------------
   子页（计算器 / 番茄钟 / MBTI / WiFi / 每日 / 考试日历 / 试卷 /
   定义 / 数据 / 404）原来全是硬编码浅色，从首页的深夜模式点进去
   等于一头撞进白墙。这个文件把它们的 CSS 变量在 html.theme-dark 下
   整体翻成深夜版，并补上子页缺的三件事：

     1. 深夜调色板：和首页 home.css 的 OLED 一套色（#08070E 底 +
        紫色光晕 + #9B8CFF 强调色），点进来是同一片夜。
     2. 一次性入场：topbar → 内容两档交错（200–300ms），子页不再是
        「静态直出」，但也不做花活。
     3. 页间过渡：View Transitions 渐进增强（Chrome/Edge/Safari 18+
        生效，其它浏览器自动忽略，零风险）。

   加载顺序：放在每个子页自己的 <style> 之后 —— 变量覆盖靠
   html.theme-dark 的更高优先级生效，不依赖顺序；组件补丁段则靠后。
   ============================================================ */

/* ── 1. 深夜调色板 ────────────────────────────────────────────
   A 组（mbti / wifi / daily / exam-calendar / paper-code / definitions / data）
   和 B 组（pomodoro）变量名不同，这里一起覆盖；没有的变量写了也无害。 */
html.theme-dark {
  color-scheme: dark;

  /* A 组 */
  --bg: #08070E;
  --card: #14121F;
  --card-glass: rgba(20, 18, 31, .78);
  --border: rgba(255, 255, 255, .09);
  --text: #F4F1FF;
  --text2: #B3ACC7;
  --text3: #8B84A3;
  --fill: #1B1927;          /* 搜索框 / 胶囊 / 行内的浅填充 */
  --fill-2: #17151F;
  --hover: #221F35;         /* 悬浮时那层淡紫 */
  --accent-soft: rgba(155, 140, 255, .16);
  --toast-bg: #F4F1FF;      /* 深夜下 toast 反过来：浅底深字 */
  --toast-ink: #100E1A;
  --warn-bg: #2A2113;
  --warn-line: #4A3A1C;
  --warn-ink: #F0A65A;
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, .45);
  --gradient: linear-gradient(135deg, #7C6BFF 0%, #5A48EA 100%);

  /* B 组（番茄钟） */
  --line: rgba(255, 255, 255, .09);
  --ink: #F4F1FF;
  --muted: #B3ACC7;
  --faint: #8B84A3;
  --brand: #9B8CFF;
  --green: #4ADE80;

  /* 计算器：机身本来就是黑的，只要把页面底和顶部工具条压成夜色 */
  --page: #0B0C11;
  --ui-ink: #E7E5E1;
  --ui-muted: #A19F9A;
  --ui-line: rgba(255, 255, 255, .14);
  --ui-btn: #1A1C23;
  --ui-btn-ink: #D7D6D2;

  /* ── 「当正文用的强调色」深夜版（2026-09-17 新增）────────────────
     子页里有一批强调色是当文字用的：WiFi 密码、试卷编号图例、缺字段提示、
     「实时汇率」胶囊……那些琥珀 / 绿 / 蓝 / 粉在浅底上只有 2–4:1，配不上
     正文（WCAG AA 要 4.5:1），所以浅色下各页改用加深版：
         color: var(--ink-violet, #6d28d9)
     var() 的兜底值只在「变量没定义」时生效，所以浅色下自动用兜底，
     深夜下由这里接管 —— 加深版在深底上会糊成一片，必须翻回亮色。
     取值标准：在 #14121F 卡片上 ≥ 4.5:1（实测 7–10:1）。 */
  --ink-violet: #B9A6FF;
  --ink-violet-deep: #C9BCFF;
  --ink-amber: #F0A65A;
  --ink-green: #4ADE80;
  --ink-blue: #8AB4FF;
  --ink-pink: #FF9BC8;
  --ink-mute: #A19F9A;
  /* 番茄钟空花园那行字垫的半透明白底，深夜下换成深色玻璃 */
  --garden-plate: rgba(14, 12, 20, .94);
  /* 计算器页面下方那两行说明（.hint 写死的是浅色主题的深灰） */
  --hint-ink: #A19F9A;
  --hint-ink-strong: #E7E5E1;
}

/* 首页那层紫罗兰光晕，子页也来一点，别是死黑 */
html.theme-dark body::before {
  content: '';
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 520px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 18% 0%, rgba(109, 93, 246, .15), transparent 70%),
    radial-gradient(38% 52% at 82% 4%, rgba(180, 82, 15, .06), transparent 72%);
}
/* 只抬「普通内容块」：浮层（底部抽屉 / 遮罩 / 全屏专注 / toast）本来就是 fixed +
   自带 z-index，被这条改成 relative 会从浮层打回文档流（深夜模式下 toast 会掉到页尾）。 */
html.theme-dark body > *:not(.sheet):not(.sheet-mask):not(.fs):not(.toast) { position: relative; z-index: 1; }

/* ── 2. 组件补丁：把各页写死的浅色收进变量（浅色值不变）──────
   这些类名在各子页里是同一套（topbar / back / chip / row / sec…），
   所以一处覆盖，九页通吃。 */
.back, .tbtn, .copy, .iconbtn { background: var(--card); border-color: var(--border); color: var(--text2); }
.back:hover, .tbtn:hover, .copy:hover, .iconbtn:hover { color: var(--primary, var(--brand)); }
html.theme-dark .back,
html.theme-dark .tbtn,
html.theme-dark .copy,
html.theme-dark .iconbtn { background: var(--ui-btn, var(--fill)); border-color: var(--border); color: var(--text2); }
html.theme-dark .back:hover,
html.theme-dark .tbtn:hover,
html.theme-dark .copy:hover,
html.theme-dark .iconbtn:hover { background: var(--hover); }

.search, .chip, .row, .empty, .tag-soft { background: var(--fill); }
.row-hover, .copy:hover { background: var(--hover); }
html.theme-dark .search,
html.theme-dark .chip { background: var(--fill); border-color: var(--border); color: var(--text2); }
html.theme-dark .row { background: var(--fill-2); }
html.theme-dark .row:hover { background: var(--hover); }
html.theme-dark .warn { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
html.theme-dark .toast { background: var(--toast-bg); color: var(--toast-ink); }
html.theme-dark .toolbar,
html.theme-dark .sec,
html.theme-dark .tips { box-shadow: var(--shadow-soft); }

/* 输入控件 / 下拉：深夜下原生控件自己也会变，这里只兜底 */
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select { color: var(--text); }
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder { color: var(--text3); }

/* ── 2b. 逐页点名补丁（只在深夜下生效）───────────────────────── */
/* 番茄钟：花园计数气泡、空花园文字 */
html.theme-dark .garden-count { background: rgba(255, 255, 255, .12); color: var(--muted); }
html.theme-dark .garden-empty { color: var(--faint); }
/* 琥珀色提醒块：wifi 的 .warn、mbti 的三处、wifi 旧版说明 */
html.theme-dark .warn,
html.theme-dark .disclaim,
html.theme-dark .dimwarn,
html.theme-dark .reswarn,
html.theme-dark .set.is-old .set-sub {
  color: var(--warn-ink);
  background: var(--warn-bg);
  border-color: var(--warn-line);
}
/* 语义色底：粉 / 红的小色块，深夜下压成半透明 */
html.theme-dark .def.bullet .no { background: rgba(236, 72, 153, .14); }
/* 2026-09-17：三处写死的浅底没跟着天黑，浅字压浅底（实测 1.8–2.8:1，看着像没渲染出来）──
   定义页的页签条与序号徽章、番茄钟的时长胶囊 */
html.theme-dark .tabs { background: var(--fill); }
html.theme-dark .def .no { background: rgba(155, 140, 255, .16); }
html.theme-dark .pill { background: var(--fill); border-color: var(--line); }
html.theme-dark .pill:hover { border-color: var(--line); color: var(--ink); }
html.theme-dark .pill.on,
html.theme-dark .pill.on:hover { background: #6D5DF6; border-color: #6D5DF6; color: #fff; }
/* 番茄钟主按钮：深夜的品牌亮紫配白字只有 2.8:1，实底压深一档 */
html.theme-dark .main-btn { background: #6D5DF6; }
html.theme-dark .preview.bad { background: rgba(224, 49, 49, .12); border-color: rgba(224, 49, 49, .35); }
/* 考试日历 / 试卷：半透明玻璃卡在深夜下也要压暗 */
html.theme-dark .card,
html.theme-dark .sec,
html.theme-dark .toolbar,
html.theme-dark .tips,
html.theme-dark .panel { background: var(--card); border-color: var(--border); }

/* 滚动条：跟着夜色走 */
html.theme-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }

/* ── 3. 子页一次性入场：topbar 先落，内容两档跟上（共 260ms）──
   浮层一律排除：animation 带 fill-mode: both，等于把 transform / opacity 永久
   钉在终值上，优先级压过元素自己的声明 ——
   · .sheet      番茄钟白噪音抽屉靠 transform: translateY(103%) 藏在屏幕外，
                 被动画写成 transform: none 就变成「一打开页面抽屉就摊在那儿，
                 点收起也关不掉」（抽屉的显隐状态被动画吃掉了）
   · .sheet-mask 靠 opacity: 0 隐形，被写成 1 就整页蒙灰
   · .toast / .fs 同理，都是自带定位与显隐的浮层 */
@keyframes subPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
body.page-in > .wrap > .topbar,
body.page-in > .topbar { animation: subPageIn .24s cubic-bezier(.22, .8, .3, 1) both; }
body.page-in > .wrap > *:not(.topbar):not(.toast):not(.sheet):not(.sheet-mask):not(.fs),
body.page-in > *:not(.topbar):not(.toast):not(.sheet):not(.sheet-mask):not(.fs) {
  animation: subPageIn .28s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: .06s;
}
/* 第三档：页面里的大块（卡片组 / 列表）再晚 60ms 落 */
body.page-in > .wrap > .sec:nth-child(n+2),
body.page-in > .wrap > .set:nth-child(n+2) { animation-delay: .12s; }

/* ── 4. 页间过渡：View Transitions 渐进增强 ─────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: subPageOut .16s ease both; }
::view-transition-new(root) { animation: subPageIn .22s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes subPageOut { to { opacity: 0; transform: translateY(-4px); } }

/* ── 5. 减弱动效：入场、页间过渡、过渡全关 ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body.page-in > .wrap > *,
  body.page-in > * { animation: none !important; }
}

/* ============================================================
   a11y 工具层（2026-09-17 加）
   ------------------------------------------------------------
   为什么放在这里：这是**所有子页唯一共用**的样式表（15 个页面都引它），
   加在这里不用为一个 .sr-only 再多发一次请求。
     1. .sr-only —— 视觉隐藏但读屏可读（calculator / 404 的 h1 用它补主标题）
     2. :focus-visible —— 子页以前完全依赖浏览器默认轮廓，键盘用户看不出焦点在哪；
        统一成和首页一致的一圈紫色描边。
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--primary, #6D5DF6);
  outline-offset: 2px;
  border-radius: 6px;
}
/* 鼠标点击不要出现轮廓，只有键盘走查时才亮 */
:focus:not(:focus-visible) { outline: none; }