/* ============================================================
 * site.css —— aiyooyai 站点共享层（Phase 1）
 *
 * 目的：把 10 个各自为政的页面收成一套 token + 一套组件样式。
 *
 * ★ 所有共享 class 一律加 `sn-` 前缀，这是硬性要求不是洁癖：
 *   站点现有页面里已经存在 .nav(index) / .topnav + nav.links(chat) /
 *   .header(domain,profile,pay) / .topbar(dashboard)。共享 CSS 一旦定义
 *   这些名字，会在加载瞬间静默改掉那几个页面 —— 而且很难查。
 *
 * ★ 加载位置 = 视觉开关（重要）：
 *   本文件与各页内联 <style> 里的 :root 同为 :root 选择器、特异性相同，
 *   **后出现者胜**。
 *     - 放在页面内联 <style> 之【前】 → 页面自己的 token 胜出 → 视觉零变化
 *       （Phase 1-3 用这个位置）
 *     - 放在之【后】               → 本文件胜出 → 该页立刻变暖色
 *       （Phase 4 逐页迁移时翻过来）
 *   每个页面的 link 位置都是刻意的，别随手挪。
 *
 * ★ token 取值以 chat.html / index.html / dashboard.html 的 A 系
 *   「Warm Editorial」为准 —— 这三页已经是同一套，直接沿用。
 * ============================================================ */

:root {
  /* ── 基础色板（与 chat.html:16-19 逐字一致）──────────────────── */
  --bg:            #F6F3EE;
  --ink:           #1A1917;
  --muted:         #6E6759;
  --faint:         #9C9484;
  --accent:        #C96442;
  --accent-hover:  #B55435;
  --accent-soft:   #F3E3DB;
  --card:          #FFFDF9;
  --border:        #E7E1D8;

  /* ── dashboard / chat 扩展的同族变量（chat.html:24-25）────────── */
  --bg-deep:       #EFEAE2;
  --ink-2:         #3A372F;
  --border-2:      #DAD2C6;
  --border-strong: #DAD4CA;

  /* ── 字体（chat.html:20-21,26）─────────────────────────────── */
  --font-display: Georgia, 'Songti SC', 'STSong', serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC',
                  'Microsoft YaHei', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── 间距刻度 ───────────────────────────────────────────────
   * ★ 站点原本有三套互不兼容的间距命名：index 用 --space-1..9、
   *   dashboard/chat 用 --s1..--s6、login/register 完全没有。
   *   这里统一成 --s1..--s8。
   * ⚠️ --s7/--s8 是本次新增的：dashboard.html:23 引用了从未定义的
   *   --s8（该声明当前无效被丢弃，左右 padding 实际为 0）。
   *   定义它【会改变那一处的渲染】—— 属可见改动，上线后要单独确认。
   * ─────────────────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  --r:    8px;
  --r-sm: 5px;

  --shadow-sm: 0 1px 2px rgb(26 25 23 / .05);
  --shadow-md: 0 4px 16px rgb(26 25 23 / .08);
  --shadow-lg: 0 16px 44px -18px rgb(26 25 23 / .18);

  /* ── 语义色：★ 不参与暖色化 ──────────────────────────────────
   * 表格里的红/绿表示成功/失败（email/domain/pay 都有）。把语义色
   * 一起"调成暖色"会直接破坏含义。所以语义色单列，保持原有色相，
   * 迁移时只动"外壳色"。
   * ─────────────────────────────────────────────────────────── */
  --ok:        #2C6E63;   /* 沿用原 --teal / --green 的色相 */
  --ok-soft:   #DFEAE6;
  --err:       #C23B2E;   /* 沿用原 --danger / --red */
  --err-soft:  #F5E0DD;
  --err-ink:   #A8342A;   /* 铺在 --err-soft 上时用，对比度 4.19 → 5.20 */
  --warn:      #C8862C;
  --warn-soft: #F4E8D5;

  /* 正文/链接的对比度护栏：
     --accent(#C96442) 铺在 --card(#FFFDF9) 上约 3.6:1 —— 达不到 4.5:1。
     所以正文与链接一律用 --ink；确需强调色的链接用更深的 --accent-hover。 */
}

/* ============================================================
 * 统一导航 .sn-nav
 * 结构：<header class="sn-nav">
 *         <a class="sn-brand">…</a>
 *         <nav class="sn-links"><a>…</a></nav>
 *         <div class="sn-auth">…</div>
 *       </header>
 * 视觉逐字对照 chat.html:61-78 的 .topnav / .brand / .links ——
 * 让首页（/ = chat.html）在接入后【零视觉变化】。
 * ============================================================ */
.sn-nav {
  position: relative; z-index: 30; flex: none;
  display: flex; align-items: center; gap: 22px;
  padding: 0 24px; min-height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
}
.sn-brand {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.sn-brand em { font-style: normal; color: var(--accent); }

.sn-links { display: flex; align-items: center; gap: 20px; }
.sn-links a {
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.sn-links a:hover { color: var(--ink); }
.sn-links a.on {
  color: var(--accent-hover); font-weight: 600;
  border-bottom-color: var(--accent);
}

/* 右侧登录态区（由 site.js 按 SiteAuth 结果渲染）*/
.sn-auth { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.sn-auth a { text-decoration: none; }

/* ============================================================
 * 按钮（.sn-btn 系列）—— 对照 chat.html:405-421 的 .btn 系列
 * ============================================================ */
.sn-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  font-family: var(--font-body);
  transition: background .15s, border-color .15s, transform .12s;
}
.sn-btn:active { transform: scale(.98); }
.sn-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.sn-btn-pri  { background: var(--accent); color: #fff; }
.sn-btn-pri:hover { background: var(--accent-hover); }
.sn-btn-sec  { background: var(--card); color: var(--ink-2); border-color: var(--border-2); }
.sn-btn-sec:hover { background: var(--bg-deep); }
.sn-btn-danger { background: var(--err); color: #fff; }
.sn-btn-sm { padding: 5px 11px; font-size: 12px; }

/* ============================================================
 * Toast —— 站点原本在 domain/profile/pay/login/register 各复制一份，
 * 这里收成一份。
 * 用法：Site.toast('已保存', 'ok')
 * ============================================================ */
.sn-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: var(--card);
  padding: 10px 18px; border-radius: var(--r);
  font-size: 13.5px; font-family: var(--font-body);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .2s, transform .2s;
  max-width: min(90vw, 480px);
}
.sn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sn-toast.ok  { background: var(--ok);  color: #fff; }
.sn-toast.err { background: var(--err); color: #fff; }

/* ============================================================
 * 表单原生的焦点环与自动填充在奶油色背景上会显蓝，必须覆盖。
 * （Phase 4 迁移时如果没有这段，输入框聚焦会突兀地闪蓝边，
 *   而且 Chrome 自动填充会把整个输入框刷成浅蓝底。）
 * ============================================================ */
.sn-nav :focus-visible,
.sn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sn-field:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sn-field:-webkit-autofill,
.sn-field:-webkit-autofill:hover,
.sn-field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  transition: background-color 9999s ease-out;
}

/* 原生控件（复选框、下拉、日期选择器）跟随主题色 */
.sn-nav, .sn-btn, .sn-field { accent-color: var(--accent); }

/* ============================================================
 * 移动端：导航换行（对照 chat.html:442-446）
 * ============================================================ */
@media (max-width: 820px) {
  .sn-nav { flex-wrap: wrap; gap: 4px; padding: 8px 14px; min-height: 0; }
  .sn-links { order: 3; width: 100%; gap: 16px; }
  .sn-links a { padding: 13px 0 11px; }
  .sn-auth { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-nav *, .sn-btn, .sn-toast { transition: none !important; }
}

/* ── 一级菜单下拉（资源）—— 与 .sn-links 同观感 ─────────────────────── */
.sn-menu { position: relative; display: inline-flex; align-items: center; gap: 4px;
           /* ★ 必须与 .sn-links a 逐项一致 —— 它是 <span> 不是 <a>，
              不显式写就会继承父级的字号（实测差 0.5px，肉眼能看出「资源」比别的字大）。 */
           font-size: 13.5px; font-weight: 400; letter-spacing: normal;
           color: var(--muted); cursor: default; }
.sn-menu:hover, .sn-menu.on { color: var(--ink); }
.sn-caret { font-size: 10px; opacity: .7; }
.sn-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
          min-width: 132px; padding: 6px 0; margin-top: 6px;
          background: var(--card, #fff); border: 1px solid var(--border);
          border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .12);
          display: none; z-index: 60; }
.sn-menu:hover .sn-sub, .sn-menu:focus-within .sn-sub { display: block; }
.sn-sub a { display: block; padding: 8px 14px; text-decoration: none;
            color: var(--ink-2, var(--muted)); font-size: 13px; white-space: nowrap; }
.sn-sub a:hover { background: var(--bg-deep, #f6f7f9); color: var(--accent); }