/* ════════════════════════════════════════════════════════════════
 * legal/legal.css — 内容页共享样式（guides + legal）
 *
 * 与主页 apps/homepage/index.html **共用同一套 --fb-* 设计令牌**：
 * 同样的 sand / dark 两种 mode、同样的 Spectral + IBM Plex 字体系统、
 * 同样的 1120px 版心、同样的轻量页头页脚。
 *
 * 历史背景：本文件原来是一套独立的 --brand/--paper/--ink 令牌
 * （Space Grotesk + Inter + JetBrains Mono，只有亮色），与主页的
 * --fb-* 体系并存 —— 于是 /guides/ 和 /legal/ 打开后 mode 和字体
 * 都和主页不一致。现已统一到 --fb-*。
 *
 * ⚠ 令牌块必须与 apps/homepage/index.html 里的 :root 块逐字一致。
 *   tests/compliance/content-page-parity.test.mjs 会比对两边。
 *
 * ⚠ 本文件是**源文件**；各 app 的 public/legal/ 是 scripts/sync-shared.js
 *   构建时拷进去的副本（已 gitignore），改副本无效。
 * ════════════════════════════════════════════════════════════════ */

/* ── Tokens — 与主页逐字一致 ── */
:root,:root[data-theme="sand"]{
  --fb-bg:#F7F4EE; --fb-bg-card:#FFFEFC; --fb-ink:#1C1A17; --fb-ink-soft:#5A5853; --fb-ink-faint:#6F6B61;
  --fb-line:rgba(60,50,30,.09); --fb-line-strong:rgba(60,50,30,.14); --fb-brand:#364156; --fb-brand-soft:#E7EAEF;
  --fb-amber:#B5530C; --fb-amber-light:#E09550; --fb-radius-sm:8px; --fb-radius-md:12px; --fb-radius-lg:14px;
  --fb-shadow-sm:0 2px 8px rgba(60,50,30,.06); --fb-shadow-md:0 4px 16px rgba(60,50,30,.08); --fb-shadow-lg:0 12px 40px rgba(60,50,30,.12);
  --fb-max-w:1120px; --fb-font-display:"Spectral","Iowan Old Style",Georgia,serif; --fb-font-body:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif; --fb-font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --fb-accent-guardian:#185FA5; --fb-accent-soft-guardian:#E9F1F9; --fb-accent-poa:#534AB7; --fb-accent-soft-poa:#EEEDFE;
  --fb-accent-snt:#0C447C; --fb-accent-soft-snt:#E0EDF7; --fb-accent-uklpa:#2A500C; --fb-accent-soft-uklpa:#EAF3E2;
  --fb-ok:#1F7A4D; --fb-ok-soft:rgba(31,122,77,.10); --fb-ok-line:rgba(31,122,77,.24);
}
:root[data-theme="dark"]{
  --fb-bg:#141619; --fb-bg-card:#1C1F24; --fb-ink:#E9EAE5; --fb-ink-soft:#A9ABA2; --fb-ink-faint:#9A9C92;
  --fb-line:rgba(255,255,255,.10); --fb-line-strong:rgba(255,255,255,.18); --fb-brand:#A3B6D6; --fb-brand-soft:#2C3547; --fb-amber:#E09550;
  --fb-shadow-sm:0 2px 8px rgba(0,0,0,.3); --fb-shadow-md:0 4px 16px rgba(0,0,0,.4); --fb-shadow-lg:0 12px 40px rgba(0,0,0,.5);
  --fb-accent-guardian:#5CA8E8; --fb-accent-soft-guardian:rgba(92,168,232,.12); --fb-accent-poa:#A79FF0; --fb-accent-soft-poa:rgba(167,159,240,.12);
  --fb-accent-snt:#63AEEA; --fb-accent-soft-snt:rgba(99,174,234,.12); --fb-accent-uklpa:#8FC65F; --fb-accent-soft-uklpa:rgba(143,198,95,.12);
  --fb-ok:#7FC79E; --fb-ok-soft:rgba(127,199,158,.12); --fb-ok-line:rgba(127,199,158,.28);
}

/* ── 旧变量别名 ──
   统一前的老页面在**页内 <style>** 里引用 --ink / --line / --card 等旧名
   （例：guides/poa-accounting-template.html 的 .acct-table）。
   别名映射到新令牌，避免这些页内样式在换令牌后静默失效 ——
   未定义的 var() 会让 border/color 整条声明作废，而且不报错。 */
:root{
  --ink:var(--fb-ink); --ink-soft:var(--fb-ink-soft); --ink-faint:var(--fb-ink-faint);
  --paper:var(--fb-bg); --card:var(--fb-bg-card); --line:var(--fb-line); --paper-line:var(--fb-line);
  --brand:var(--fb-brand); --brand-soft:var(--fb-brand-soft);
  --accent:var(--fb-amber); --radius:var(--fb-radius-sm); --radius-lg:var(--fb-radius-lg);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fb-font-body);background:var(--fb-bg);color:var(--fb-ink);line-height:1.7;font-size:15px;min-height:100vh;-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}
.disp{font-family:var(--fb-font-display);letter-spacing:-.01em}
.mono{font-family:var(--fb-font-mono)}
a{text-decoration:none;color:inherit;transition:color .15s,opacity .15s}
button{font:inherit;transition:background .15s,color .15s,box-shadow .15s,transform .15s}
button:active{transform:scale(.97)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--fb-amber);outline-offset:3px}

/* ════════════════ 轻量页头 / 页脚 ════════════════
   与主页 .nav / footer 同一套几何（1120px 版心、同样的内边距与字号），
   但不复制主页的营销导航 —— 内容页只需要「回得去 + 能切 mode」。 */
.fb-top{max-width:var(--fb-max-w);margin:0 auto;padding:22px 32px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.fb-wordmark{font-family:var(--fb-font-display);font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;color:var(--fb-ink)}
.fb-wordmark .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--fb-amber);flex-shrink:0}
.fb-topnav{display:flex;align-items:center;gap:26px}
.fb-navlink{font-size:13px;color:var(--fb-ink-soft);white-space:nowrap}
.fb-navlink:hover{color:var(--fb-ink)}
.fb-theme-toggle{width:32px;height:32px;border-radius:var(--fb-radius-sm);border:1px solid var(--fb-line);background:var(--fb-bg-card);color:var(--fb-ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;flex-shrink:0}
.fb-theme-toggle:hover{color:var(--fb-ink);border-color:var(--fb-ink-faint)}

.fb-foot{max-width:var(--fb-max-w);margin:0 auto;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.fb-foot-copy{font-size:11.5px;color:var(--fb-ink-faint)}
.fb-foot-links{display:flex;gap:20px;flex-wrap:wrap}
.fb-foot-link{font-size:11.5px;color:var(--fb-ink-faint);white-space:nowrap}
.fb-foot-link:hover{color:var(--fb-ink-soft)}

/* ════════════════ 正文 ════════════════
   外层对齐主页版心（左边缘与页头页脚一致），
   正文限宽 760px —— 与主页 .faq-list / h1 的做法相同。 */
.legal-wrap{max-width:var(--fb-max-w);margin:0 auto;padding:44px 32px 72px}
.legal-wrap>*{max-width:760px}
.legal-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fb-ink-soft);margin-bottom:30px}
.legal-back:hover{color:var(--fb-ink)}
.legal-eyebrow{font-family:var(--fb-font-mono);font-size:11px;color:var(--fb-amber);letter-spacing:.04em;margin-bottom:12px;text-transform:uppercase}
.legal-wrap h1{font-family:var(--fb-font-display);font-size:34px;font-weight:600;letter-spacing:-.018em;line-height:1.18;margin-bottom:10px;color:var(--fb-ink)}
.legal-wrap .updated{font-size:12.5px;color:var(--fb-ink-faint);margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--fb-line)}
.legal-wrap h2{font-family:var(--fb-font-display);font-size:21px;font-weight:600;letter-spacing:-.01em;margin:34px 0 10px;color:var(--fb-ink)}
.legal-wrap h3{font-family:var(--fb-font-display);font-size:16.5px;font-weight:600;margin:24px 0 8px;color:var(--fb-ink)}
.legal-wrap h4{font-family:var(--fb-font-body);font-size:14px;font-weight:600;margin:18px 0 6px;color:var(--fb-ink)}
.legal-wrap p{margin:11px 0;color:var(--fb-ink-soft)}
.legal-wrap ul,.legal-wrap ol{padding-left:24px;margin:11px 0;color:var(--fb-ink-soft)}
.legal-wrap li{margin:5px 0}
.legal-wrap strong{color:var(--fb-ink);font-weight:600}
.legal-wrap a{color:var(--fb-brand)}
.legal-wrap a:hover{color:var(--fb-amber);text-decoration:underline}
.legal-wrap code{font-family:var(--fb-font-mono);font-size:.92em;background:var(--fb-brand-soft);padding:1px 5px;border-radius:4px;color:var(--fb-ink)}
.legal-wrap hr{border:0;border-top:1px solid var(--fb-line);margin:28px 0}
.legal-wrap blockquote{margin:16px 0;padding:2px 0 2px 18px;border-left:3px solid var(--fb-line-strong);color:var(--fb-ink-soft)}
/* 表格：guides 里的法条 / 截止日期对照表（原来只有个别页面自带页内样式） */
.legal-wrap table{width:100%;border-collapse:collapse;font-size:13px;margin:16px 0}
.legal-wrap th,.legal-wrap td{border:1px solid var(--fb-line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-wrap th{background:var(--fb-bg-card);color:var(--fb-ink);font-weight:600;font-size:12px}
.legal-wrap td{color:var(--fb-ink-soft)}

.legal-callout{background:var(--fb-bg-card);border:1px solid var(--fb-line);border-left:3px solid var(--fb-amber);border-radius:var(--fb-radius-md);padding:15px 19px;margin:20px 0;font-size:14px;color:var(--fb-ink-soft)}
.legal-callout strong{color:var(--fb-ink)}

.legal-toc{background:var(--fb-bg-card);border:1px solid var(--fb-line);border-radius:var(--fb-radius-md);padding:18px 22px;margin-bottom:32px}
.legal-toc h4{font-family:var(--fb-font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fb-ink-faint);margin-bottom:10px}
.legal-toc ol{padding-left:22px;margin:0;color:var(--fb-ink-soft);font-size:14px}
.legal-toc li{margin:4px 0}
.legal-toc a{color:var(--fb-brand);text-decoration:none}
.legal-toc a:hover{color:var(--fb-amber);text-decoration:underline}

.legal-footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--fb-line);font-size:12px;color:var(--fb-ink-faint)}
.legal-footer a{color:var(--fb-ink-soft)}
.legal-footer a:hover{color:var(--fb-ink)}

/* ── 文末 FAQ ──
   guides 用原生 <details>/<summary>（无 JS），pricing 用 .open class（有 JS）。
   两套选择器都覆盖，所以同一份样式在两种页面上都成立。 */
.faq-item{background:var(--fb-bg-card);border:1px solid var(--fb-line);border-radius:var(--fb-radius-md);margin:8px 0;overflow:hidden}
.faq-q{font-size:14px;font-weight:500;padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--fb-ink);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-q::after{content:"+";font-family:var(--fb-font-mono);font-size:16px;color:var(--fb-ink-faint);transition:transform .2s;flex-shrink:0}
.faq-item[open] .faq-q::after,.faq-item.open .faq-q::after{content:"\2212"}
.faq-a{font-size:13.5px;color:var(--fb-ink-soft);line-height:1.7;padding:0 18px 16px;margin:0}

/* ── 响应式：断点与主页一致（960 / 620）── */
@media (max-width:960px){
  .fb-top{padding:20px 28px 0}
  .fb-foot{padding:24px 28px}
  .legal-wrap{padding:40px 28px 64px}
}
@media (max-width:620px){
  .fb-top{padding:16px 20px 0}
  .fb-topnav{gap:14px}
  .fb-navlink{font-size:12px}
  .fb-foot{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px}
  .legal-wrap{padding:32px 20px 52px}
  .legal-wrap h1{font-size:27px}
  .legal-wrap h2{font-size:19px}
  .legal-toc{padding:15px 17px}
}

/* ════════════════ 404 ════════════════
   五个站各有一份手写 404（四个 app + homepage）。原来只有亮色、用
   system-ui 字体、写死 #F6F6F3，与全站字体和 mode 都不一致。
   这里只放骨架样式；每页用页内 #fb-404-accent 把 --fb-accent 接到
   自己的产品主色（homepage 接 --fb-brand）。

   --fb-on-accent 不在本文件的令牌集里（那是 pricing / ui 的派生令牌），
   所以「压在色块上的文字色」就近定义在 .fb-404 作用域内，不去改共享令牌
   —— 共享令牌块必须与主页逐字一致，往里加一条会让一致性护栏变红。 */
.fb-404{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;text-align:center;--fb-404-on:#FFFFFF}
:root[data-theme="dark"] .fb-404{--fb-404-on:#0A1404}
.fb-404-inner{max-width:520px;width:100%}
.fb-404 .fb-wordmark{justify-content:center}
.fb-404-sep{color:var(--fb-ink-faint);font-weight:400;margin:0 6px}
.fb-404-code{font-family:var(--fb-font-display);font-size:56px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--fb-ink);margin:30px 0 14px}
.fb-404-copy{font-size:15px;line-height:1.7;color:var(--fb-ink-soft);margin:0 0 28px}
.fb-404-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.fb-404-btn{display:inline-block;padding:12px 26px;border-radius:var(--fb-radius-md);background:var(--fb-accent);color:var(--fb-404-on);font-size:15px;font-weight:500;white-space:nowrap}
.fb-404-btn:hover{filter:brightness(1.1)}
.fb-404-link{font-size:14px;color:var(--fb-ink-soft);text-decoration:underline;white-space:nowrap}
.fb-404-link:hover{color:var(--fb-ink)}
@media (max-width:620px){
  .fb-404-code{font-size:44px}
  .fb-404-actions{flex-direction:column;gap:14px}
}