/* ── Legal pages (privacy.html / terms.html) ────────────────────────────────
 *
 * 手写 CSS，**刻意不用 Tailwind 工具类**：vendor/css/tailwind-build.css 只由手工脚本
 * `npm run build:tailwind` 产出，不在 `npm run build` 里。静态页里写一个还没被编译过的
 * tw- 类会静默渲染成零样式且无任何报错。这份文件是普通 CSS，改了刷新即生效。
 *
 * 取色来自站点体系（tailwind.config.js + src/styles/index.css，两份是事实源）：
 *   纸 #F7F4EF / 暖墨 #241F19 / 深青 #2B6375 / 琥珀 #9C7D58，暗色纸 #16140F。
 * 暗色下强调色回落到 logo 青 #00C0F8 —— 深青压近黑底对比不足。
 *
 * 版式口径遵循站点两条既有决定：
 *   ① section 一律不上底色。原先那些 blue-50/yellow-50/green-50 圆角色块全部拆掉，
 *      分隔改用发丝线；需要强调的段落用左侧墨线（punctuation level），不铺底。
 *   ② 青只作标点级使用（链接、序号），不做大面积填充。
 * ------------------------------------------------------------------------ */

.legal {
    --lg-paper: #f7f4ef;
    --lg-ink: #241f19;
    --lg-ink-soft: #4a463f;
    --lg-ink-muted: #6b665c;
    --lg-rule: #e4daca;
    --lg-rule-strong: #d9d0bf;
    --lg-accent: #2b6375;
    --lg-quiet: #9c7d58;
    --lg-scrim: rgba(247, 244, 239, 0.86);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--lg-paper);
    color: var(--lg-ink);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.tw-dark .legal {
    --lg-paper: #16140f;
    --lg-ink: #f3ede1;
    --lg-ink-soft: #c8c0b0;
    --lg-ink-muted: #9c9384;
    --lg-rule: #2b271f;
    --lg-rule-strong: #3a352b;
    --lg-accent: #00c0f8;
    --lg-quiet: #dcb069;
    --lg-scrim: rgba(22, 20, 15, 0.88);
}

/* ── 顶栏 ──────────────────────────────────────────────────────────────────
 * 原本是 tw-bg-white + tw-shadow-md：一条白色带阴影的"架子"横切在纸面上。
 * 站点 Header 的口径是「底衬用页面色本身加透明度 + 一根发丝线」，这里照抄。 */
.legal-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--lg-scrim);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lg-rule);
}

.legal-topbar-inner {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lg-ink);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.legal-brand img {
    width: 26px;
    height: 26px;
    display: block;
}

/* ⚠ 暗色下**不要** invert logo。旧版这两页挂着 `dark:tw-invert`，把品牌青 #00C0F8
 * 翻成了它的补色橙 #FF3F07 —— 站点真正的 Header/Footer（headerParts.jsx、Footer.jsx）
 * 都是原图直出，青压在暖炭底上本来就够亮。 */

.legal-back {
    color: var(--lg-ink-soft);
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
    white-space: nowrap;
}

.legal-back:hover {
    color: var(--lg-ink);
    border-bottom-color: var(--lg-rule-strong);
}

/* ── 版心 ───────────────────────────────────────────────────────────────── */
.legal-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
}

/* 正文测量宽度。法律条文长句多，65ch 左右最好读；标题与列表同宽，整页一条左对齐轴。 */
.legal-doc {
    max-width: 40rem;
    margin: 0 auto;
}

/* ── 刊头 ───────────────────────────────────────────────────────────────── */
.legal-masthead {
    margin-bottom: 3.5rem;
}

/* ⚠ 刊头/刊记这几块都是 <p>，必须带 .legal-doc 前缀 —— 否则 `.legal-doc p` 的
 * 特异度 (0,1,1) 会盖掉裸类名 (0,1,0)，颜色全被拉回正文的 ink-soft。 */
.legal-doc .legal-kicker {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lg-quiet);
    margin: 0 0 1.25rem;
}

.legal-masthead h1 {
    font-family: "Poly", Georgia, Cambria, serif;
    font-weight: 400;
    letter-spacing: -0.015em;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    line-height: 1.08;
    text-wrap: balance;
    margin: 0 0 1.75rem;
    color: var(--lg-ink);
}

/* 生效日 —— 上下各一根发丝线，做成"刊记"那种可信的小型事实块 */
.legal-doc .legal-dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0.875rem 0;
    border-top: 1px solid var(--lg-rule);
    border-bottom: 1px solid var(--lg-rule);
    font-size: 0.875rem;
    color: var(--lg-ink-soft);
}

.legal-doc .legal-dateline dt,
.legal-doc .legal-dateline .legal-dt {
    font-weight: 500;
    color: var(--lg-ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}

.legal-doc .legal-dateline time {
    color: var(--lg-ink);
    font-variant-numeric: tabular-nums;
}

/* 导语 —— 比正文大半级，不加粗；这是全页唯一一处放大的正文 */
.legal-doc .legal-lede {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--lg-ink-soft);
    margin: 0 0 3rem;
}

/* ── 条款 ───────────────────────────────────────────────────────────────── */
.legal-section {
    padding-top: 2.5rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--lg-rule);
}

.legal-section:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.legal-section h2 {
    position: relative;
    font-family: "Poly", Georgia, Cambria, serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-size: 1.625rem;
    line-height: 1.25;
    text-wrap: balance;
    margin: 0 0 1.25rem;
    color: var(--lg-ink);
}

/* 条款序号。宽屏挂到版心左侧的空白里 —— 这是编号法律文本最好认的排法，
 * 标题本身回到与正文同一条左边线上。窄屏放不下，退回行内。 */
.legal-num {
    color: var(--lg-quiet);
    font-family: "Ubuntu", Roboto, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    margin-right: 0.6em;
}

@media (min-width: 960px) {
    .legal-num {
        position: absolute;
        right: 100%;
        top: 0.45em;
        margin-right: 1.5rem;
        text-align: right;
        white-space: nowrap;
    }
}

.legal-section h3 {
    font-family: "Ubuntu", Roboto, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--lg-ink);
    margin: 2rem 0 0.5rem;
}

.legal-section h3:first-child {
    margin-top: 0;
}

.legal-doc p {
    margin: 0 0 1rem;
    color: var(--lg-ink-soft);
    text-wrap: pretty;
}

.legal-doc p:last-child {
    margin-bottom: 0;
}

.legal-doc strong {
    color: var(--lg-ink);
    font-weight: 500;
}

.legal-doc a {
    color: var(--lg-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.05em;
    transition: opacity 160ms ease;
}

.legal-doc a:hover {
    opacity: 0.7;
}

.legal-doc ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.legal-doc li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--lg-ink-soft);
}

.legal-doc li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 4px;
    height: 1px;
    background-color: var(--lg-rule-strong);
}

.legal-doc li:last-child {
    margin-bottom: 0;
}

.legal-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    color: var(--lg-ink);
}

/* 需要强调的段落 —— 左侧一根墨线，不铺底色（站点口径：section 不上底色）。 */
.legal-note {
    border-left: 2px solid var(--lg-rule-strong);
    padding-left: 1.125rem;
    margin: 1.5rem 0;
}

.legal-note--accent {
    border-left-color: var(--lg-accent);
}

.legal-note p:last-child {
    margin-bottom: 0;
}

/* §12 / §13 的全大写免责段。保留原文，只让它读得动：
 * 缩一号、加字距、降到 soft 色，避免整块黑压压地砸在页面中间。 */
.legal-doc .legal-allcaps {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    line-height: 1.65;
    color: var(--lg-ink-muted);
}

/* 页尾刊记 */
.legal-colophon {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lg-rule);
    font-size: 0.8125rem;
    color: var(--lg-ink-muted);
}

.legal-colophon p {
    margin: 0;
    color: inherit;
}

.legal-footer {
    margin-top: auto;
    border-top: 1px solid var(--lg-rule);
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--lg-ink-muted);
}

.legal-footer p {
    margin: 0;
    max-width: 52rem;
    margin-inline: auto;
}

.legal-footer a {
    color: var(--lg-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--lg-rule-strong);
}

.legal-footer a:hover {
    color: var(--lg-ink);
}

/* CJK 无 Poly 字形，回退到各自字体栈避免豆腐块（与 index.css 同一处理）。
 * 这两页目前只有英文，规则先摆着，将来出本地化版本不会踩坑。 */
body.chinese-lang .legal-masthead h1,
body.japanese-lang .legal-masthead h1,
body.korean-lang .legal-masthead h1,
body.arabic-lang .legal-masthead h1,
body.chinese-lang .legal-section h2,
body.japanese-lang .legal-section h2,
body.korean-lang .legal-section h2,
body.arabic-lang .legal-section h2 {
    font-family: inherit;
    letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
    .legal-back,
    .legal-doc a {
        transition: none;
    }
}