/* ────────────────────────────────────────────────────────────────────────────
   门户全局提示条（toast）—— **唯一的一份样式来源**。

   为什么单开这个文件（而不是写进 app.css）：本仓有一条用户红线是「爬虫样式只改
   crawl.css，勿碰 extraction.css / app.css」，所以门户这批**不往 app.css 里加**。
   样式独立成文件也和「toast 是全局组件、不属于任何一屏」这件事更匹配。

   ── 背景：这一套以前被复制了四份 ──────────────────────────────────────────
   2026-09-27 排查「设置→备份/恢复 右上角那个提示是什么」时发现，门户里同时存在
   四份**各自为政**的提示实现，配色全是硬编码、且都不跟深色主题：

     ① index.html 的 <toast-container>（`Q.toast`）      — **右上角**，内联样式（本文件 .toast-host）
     ② user.html   自带的 toast()                        — 右下角，页面内联 <style>
     ③ spaces.html 自带的 toast()                        — 右下角，页面内联 <style>
     ④ board.html  自带的 toast()                        — 右下角，**注释里自己写着「抄自 spaces.html:51-53」**

   另有**两份死的**（本批不动，见各自的登记）：
     · app.css 的 `.toast-wrap` / `.toast`（底部居中，零活引用）
     · docs-page.js 的 `.docs-toast-container`（函数第一行就是 `return;`，空操作）

   ⇒ 四份里三份是同一个东西被抄了三遍。**这就是本文件存在的理由**：类名只此一处，
   位置差异用两个并列的类表达，配色只此一套 token。新增页面直接引本文件即可。

   ⚠️ 类名刻意**不叫 `.toast`** —— 那个名字同时被 app.css 的死规则和三个页面的
   内联 <style> 占用过，和 app.css 叠在一起时「谁赢」取决于 `<style>` 与 `<link>`
   的先后，改起来极易踩空。`.toast-item` / `.toast-host` 全仓零占用（动手前查过）。

   ── 对比度 ────────────────────────────────────────────────────────────────
   每个 `-fg` 都按 **AA（≥4.5:1）** 对着自己的 `-bg` 算过，数字写在注释里。
   🔴 顺带修掉三处**原本不达标**的配色（都是把主题色当底色 + 白字导致的）：
     · 浅色 info：`var(--primary)`=#1E90FF + #fff 只有 **3.24:1** ⇒ 换 #1870cc（4.97）
     · 深色 info：`var(--primary)`=#4da8ff + #fff 只有 **2.51:1** ⇒ 换 #1e5fb0（6.33）
     · 右下三份的失败底色 `var(--danger)`=#ef4444 + #fff 只有 **3.76:1** ⇒ 统一并到 #991b1b（8.31）
   闸门：`tests/test_portal_toast_css.py` 会**重算**这些数，改值不达标就红。
   ──────────────────────────────────────────────────────────────────────────── */

/* ── 配色 token ───────────────────────────────────────────────────────────── */
:root {
  --toast-ok-bg: #065f46;   --toast-ok-fg: #ffffff;   /* 7.68:1 */
  --toast-err-bg: #991b1b;  --toast-err-fg: #ffffff;  /* 8.31:1 */
  --toast-warn-bg: #92400e; --toast-warn-fg: #ffffff; /* 7.09:1 */
  /* 🔴 写**字面量** `#1870cc`（= `--primary-dark`），而不是 `var(--primary)`：
     后者当底色 + 白字只有 3.24:1。⚠️ 也刻意不写成 `var(--primary-dark)` —— 深色块里
     app.css 会把 `--primary-dark` 改成 `#1E90FF`，那样浅色这档会被深色的值污染，
     且闸门没法直接算对比度（要跨文件解析变量）。字面量让两边都确定。 */
  --toast-info-bg: #1870cc; --toast-info-fg: #ffffff; /* 4.97:1 */
}

[data-theme="dark"] {
  /* 深色下底色一律保持深色、把**字色**调成同色系的浅色（比纯白柔和，对比度反而够） */
  --toast-ok-bg: #065f46;   --toast-ok-fg: #d1fae5;   /* 6.78:1 */
  --toast-err-bg: #991b1b;  --toast-err-fg: #fee2e2;  /* 6.80:1 */
  --toast-warn-bg: #78350f; --toast-warn-fg: #fde68a; /* 7.28:1 */
  /* 🔴 必须显式覆盖：深色下 `--primary-dark` 被 app.css 改成了 #1E90FF，白字只有 3.24:1 */
  --toast-info-bg: #1e5fb0; --toast-info-fg: #ffffff; /* 6.33:1 */
}

/* ── 共用外观（两套位置都用它）───────────────────────────────────────────── */
/* 底色/字色**就写在基类上**，取的是 info 那一档 —— 因为 `<toast-container>` 是
   `:class="t.type"` 直接透传 type 的，万一将来有人传了个没登记过的 type，
   基类这一档保证它至少是个**正常可读的盒子**，而不是透明白底。三档具名配色覆盖它。 */
.toast-item {
  max-width: 360px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: var(--text-md);
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  overflow-wrap: anywhere; /* 长 URL / 长错误串别把盒子撑破 */
  background: var(--toast-info-bg);
  color: var(--toast-info-fg);
}

/* 配色覆盖。类名与 `Q.toast(text, type)` 的 type 实参一致。
   ⚠️ `warn` 与 `warning` 两种写法全仓都在用（query-history.js 传 'warn'、
   docs-page.js 传 'warning'）⇒ 两个都接，别只写一个。 */
.toast-item.success { background: var(--toast-ok-bg);   color: var(--toast-ok-fg); }
.toast-item.error   { background: var(--toast-err-bg);  color: var(--toast-err-fg); }
.toast-item.warn,
.toast-item.warning { background: var(--toast-warn-bg); color: var(--toast-warn-fg); }

/* ── 位置 ①：右上角宿主（index.html 的 <toast-container>）──────────────────
   宿主自己 fixed，条目按列排。定位值 = 原来内联样式里的那一组，未改。 */
.toast-host {
  position: fixed;
  top: 40px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── 位置 ②：右下角逐条 append（user.html / spaces.html / board.html）─────
   这三个页面是「每条一个 div 直接 append 到 body」，没有宿主容器，
   所以定位落在条目自己身上。定位/字号 = 原来内联 <style> 里的那一组，未改。
   ⚠️ 已知代价（**本批有意不动**）：逐条 fixed 等于每条都钉在同一个坐标 ⇒
   两条同时出现会**完全重叠**。修它要引入宿主容器 = 改 DOM 结构，不属于「只做样式」。 */
.toast-item.corner-br {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  padding: 10px 18px;
  font-size: var(--text-base);
  font-weight: 500;
  animation: toast-in .3s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}