/* Shared styling for the legal pages — same tokens as the site. */
:root{
  --ink:#05070c;--panel:#0b1018;--line:#1c2635;--fg:#e7ecf3;--fg-dim:#97a3b6;
  --fg-faint:#64718a;--accent:#4ea8ff;--warn:#e0b341;--gold:#c9a86a;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px))}
header{border-bottom:1px solid var(--line);background:rgba(5,7,12,.9);
  position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}
.hin{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:700;color:var(--fg);text-decoration:none;font-size:.98rem}
.brand svg{flex:0 0 auto}
.back{margin-inline-start:auto;font-size:.85rem;color:var(--fg-dim);text-decoration:none}
.back:hover{color:var(--fg)}
main{padding-block:clamp(36px,6vw,64px) 80px}
h1{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.15;
  margin:0 0 10px;letter-spacing:-.02em;text-wrap:balance}
h2{font-family:var(--display);font-size:1.12rem;margin:38px 0 12px;letter-spacing:-.01em}
h3{font-family:var(--display);font-size:1rem;margin:24px 0 8px}
p,li{color:var(--fg-dim);margin:0 0 14px}
li{margin-bottom:8px}
ul,ol{padding-inline-start:22px}
strong{color:var(--fg);font-weight:600}
a{color:var(--accent)}
.meta{font-family:var(--mono);font-size:.72rem;color:var(--fg-faint);
  letter-spacing:.04em;margin-bottom:30px;line-height:1.6}
.note{border:1px solid rgba(224,179,65,.3);background:rgba(224,179,65,.05);
  border-radius:10px;padding:16px 18px;margin:24px 0}
.note p{color:#d9cfae;margin:0}
.note p + p{margin-top:10px}
.draft{border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:16px 18px;margin:0 0 32px}
.draft p{color:var(--fg-dim);font-size:.86rem;margin:0}
.draft strong{color:var(--warn)}
.ph{color:var(--gold);font-family:var(--mono);font-size:.93em}
.sep{border:0;border-top:1px solid var(--line);margin:56px 0 44px}
.zh{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.85}
.zh h1,.zh h2,.zh h3{font-family:inherit;letter-spacing:0}
.lang-note{font-family:var(--mono);font-size:.72rem;color:var(--fg-faint);
  border-inline-start:2px solid var(--line);padding-inline-start:14px;margin-bottom:30px}
footer{border-top:1px solid var(--line);padding-block:26px;background:var(--panel)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}
footer a,footer span{font-size:.8rem;color:var(--fg-faint);text-decoration:none}
footer a:hover{color:var(--fg)}

/* ---------- 过渡 ----------
   跨文档视图过渡：从主站进入法务页时整页交叉淡入，品牌标识作为共享元素
   在两份文档之间保持连续。不支持的浏览器直接跳转，无任何副作用。 */
@view-transition{ navigation:auto }

.brand{ view-transition-name:brand }

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out .20s ease both }
  ::view-transition-new(root){ animation:vt-in .34s cubic-bezier(.22,1,.36,1) both }
  @keyframes vt-out{ to{ opacity:0 } }
  @keyframes vt-in{ from{ opacity:0; transform:translateY(10px) } }

  /* 页首分三级进场，正文随页面整体淡入，不做逐段滚动触发 */
  main > h1        { animation:rise .55s cubic-bezier(.22,1,.36,1) backwards }
  main > .meta     { animation:rise .55s cubic-bezier(.22,1,.36,1) .07s backwards }
  main > .lang-note{ animation:rise .55s cubic-bezier(.22,1,.36,1) .14s backwards }
  @keyframes rise{ from{ opacity:0; transform:translateY(12px) } }

  .back svg,.back{ transition:color .18s ease }
  h2{ scroll-margin-top:80px }
}

/* 返回链接的箭头在悬停时轻微退让，提示方向 */
.back{ display:inline-flex; align-items:center; gap:7px }
.back::before{ content:"\2190"; transition:transform .2s cubic-bezier(.22,1,.36,1); display:inline-block }
.back:hover::before{ transform:translateX(-3px) }
@media (prefers-reduced-motion:reduce){ .back::before{ transition:none } }
