/* ============================================================
   legal.css  —  隐私 / 条款 / 联系 / 404 四页共用
   ------------------------------------------------------------
   这四页属于「发布者」，不属于五个站里的任何一个，所以不套任何
   skin.css，直接用 tokens.css 的中性默认值。审核员从页脚点进来
   看到的应该是同一个发布者的门面，不是第六种视觉风格。

   目标读者只有两种，排版按这两种来：
     1. 广告平台的人工审核 —— 扫，找「有没有写该写的」
     2. 从页脚点进来的用户 —— 读一段，找「你们到底记了我什么」
   所以每页顶上先给一个方框，说人话的短版；细则放下面。
   ============================================================ */

/* 这四页不加载 engine.css，而 box-sizing 的重置在那边。不补这一行，
   .sheet 的 max-width 不含左右留白，实际宽度比 --measure 宽出 2×sp-5，
   和五个站的正文栏对不齐。 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

.sheet {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: grid;
  /* 宽表/长 URL 不该把整条轨道顶宽，见 game/depth.css 那次踩坑 */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

/* 顶栏：回首页 + 生效日期。不做导航条，这几页不需要被导航。 */
.crumb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--step--1);
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--sp-3);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.crumb time { font-variant-numeric: tabular-nums; }

h1 {
  margin: 0;
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h2 {
  margin: var(--sp-5) 0 0;
  font-size: var(--step-1);
  line-height: 1.3;
  text-wrap: balance;
}
h2 + p, h2 + ul, h2 + .grid { margin-top: var(--sp-3); }
p { margin: var(--sp-3) 0; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 3px; }

/* 短版方框：整页最先被读到的东西 */
.gist {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: var(--sp-4) var(--sp-5);
}
.gist p:first-child { margin-top: 0; }
.gist p:last-child { margin-bottom: 0; }

ul { margin: var(--sp-3) 0; padding-left: 1.3em; }
li { margin: var(--sp-2) 0; }
li > b { font-weight: 600; }

/* ---- 「记了什么 / 没记什么」两栏 ---------------------------
   隐私政策最常被跳读的就是这一段，所以不埋在段落里。
   两栏并排是为了让「没记什么」和「记了什么」一样显眼 ——
   分开写两段的话，读者只会读到前一段就走。 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
}
.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--paper);
}
.card.no { background: var(--raise); }
.card h3 {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card.yes h3 { color: var(--accent); }
.card ul { margin-bottom: 0; }
.card li { font-size: var(--step--1); line-height: 1.6; }

/* 字段清单：左边是库里的列名，右边是人话。
   审核员想看的是「你承认你存了什么」，列名比描述更有说服力。 */
dl.fields { margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-3); }
dl.fields > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
dl.fields dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
  overflow-wrap: anywhere;      /* 列名不折行会把右栏挤没 */
}
dl.fields dd { margin: 0; font-size: var(--step--1); line-height: 1.65; }
@media (max-width: 30rem) {
  dl.fields > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

/* 联系页那块：地址要能一键选中，别人真的会来发信 */
.contact {
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.contact .addr {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  overflow-wrap: anywhere;
  user-select: all;
}
.contact .when { font-size: var(--step--1); color: var(--muted); }

/* ---- 404 --------------------------------------------------
   Cloudflare Pages 会把根目录的 404.html 自动用作找不到页面时的
   响应，不需要任何配置。这一页唯一的任务是别让人走掉，所以
   直接把五个站列出来，不摆一个大大的「404」了事。 */
.lost { display: grid; gap: var(--sp-5); padding-top: var(--sp-6); }
.lost .code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.doors { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.doors a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.doors a:hover, .doors a:focus-visible {
  padding-left: var(--sp-3);
  color: var(--accent);
}
.doors b { font-weight: 600; }
.doors span { grid-column: 1; font-size: var(--step--1); color: var(--muted); }
.doors em {
  grid-row: 1; grid-column: 2;
  font-style: normal; font-size: var(--step--1);
  font-family: var(--font-mono); color: var(--faint);
}

/* 页脚：和五个站的 .site-foot 长一样，用的是 engine.css 那套类名。
   这四页不加载 engine.css（那是分屏和广告位用的），所以在这里补。

   注意它不在 .sheet 里面：build-seo.mjs 的 spliceFoot 把它装在
   </body> 之前，也就是 body 直接子元素。所以宽度和左右留白要自己
   写一遍，照抄 .sheet 的那两个值，否则它会贴着窗口两边跑通栏。 */
.site-foot {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
}
.site-foot a { color: var(--muted); text-underline-offset: 3px; }
.site-foot a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}