/* Floor Flow · 小小电梯 — shared stylesheet for /privacy/ and /support/.
   Read mode on the game's own paper and ink. Line colours appear only in the
   shaft rail, stations and link underlines, never as body text. System fonts
   only; no remote assets. Generated pages: scripts/site/build-legal-pages.ts. */

:root {
  color-scheme: light dark;
  --paper: #fafbf8;
  --paper-2: #f1f3ee;
  --ink: #233d36;
  --ink-2: #4f645d;
  --ink-3: #6b7d77;
  --hair: rgba(35, 61, 54, 0.13);
  --line: #138a7d;
  --sel: rgba(19, 138, 125, 0.2);
  --sans-zh: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --sans-en: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --display-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --rail-x: 11px;
  --station: 13px;
  --gutter: clamp(20px, 5vw, 48px);
}
.page-support { --line: #e0634b; --sel: rgba(224, 99, 75, 0.2); }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171e24;
    --paper-2: #1e272e;
    --ink: #e4ece9;
    --ink-2: #b5c3be;
    --ink-3: #93a49e;
    --hair: rgba(228, 236, 233, 0.14);
    --line: #55c6b0;
    --sel: rgba(85, 198, 176, 0.28);
  }
  .page-support { --line: #ff927d; --sel: rgba(255, 146, 125, 0.26); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.75 var(--sans-zh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
}
[lang="en"] { font-family: var(--sans-en); line-height: 1.62; }
::selection { background: var(--sel); color: inherit; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--line) 70%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--line); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--ink); color: var(--paper);
  border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hair); }
.bar-inner { max-width: 1120px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 1px 3px rgba(35, 61, 54, 0.18); }
.brand b { font-weight: 650; font-size: 17px; letter-spacing: 0.02em; }
.brand small { font: 500 13px/1 var(--sans-en); color: var(--ink-3); margin-left: 2px; }
.nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.nav a[aria-current="page"] svg { color: var(--line); }
.nav svg { width: 18px; height: 18px; flex: none; }
.lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--paper-2); margin-left: 6px; }
.lang a { min-width: 44px; min-height: 38px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 9px;
  text-decoration: none; font: 600 14px/1 var(--sans-en); color: var(--ink-3); }
.lang a:first-child { font-family: var(--sans-zh); }
.lang a[aria-current="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(35, 61, 54, 0.14), 0 2px 8px rgba(35, 61, 54, 0.06); }
@media (max-width: 560px) {
  .bar-inner { gap: 4px; padding-inline: 14px; }
  .brand small { display: none; }
  .nav .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav a { padding: 0 10px; }
  .lang { margin-left: 2px; }
  .lang a { min-width: 40px; padding: 0 8px; }
  .brand b { font-size: 16px; }
}

/* Document */
.doc { max-width: 1120px; margin: 0 auto; padding: clamp(36px, 7vw, 88px) var(--gutter) 40px; }
.doc + .doc { border-top: 1px solid var(--hair); }
.lede { max-width: 46rem; }
h1 { margin: 0; font-weight: 650; font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.16; letter-spacing: 0.01em; text-wrap: balance; }
[lang="en"] h1 { font-family: var(--display-en); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.summary { overflow-wrap: anywhere; margin: 22px 0 0; font-size: clamp(1.06rem, 1rem + 0.35vw, 1.2rem); color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
[lang="en"] .summary { max-width: 36em; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-3); }
.facts li { display: inline-flex; gap: 6px; align-items: baseline; }
.facts b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.facts a { color: var(--ink-2); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 980px) {
  .layout { grid-template-columns: 236px minmax(0, 1fr); gap: 64px; align-items: start; }
  .toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
}

/* The contents list is drawn as one elevator line: a two-tone band with a
   station per section, matching the game's shaft backdrop. */
.toc h2 { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); }
[lang="en"] .toc h2 { letter-spacing: 0.04em; }
.toc ol { position: relative; margin: 0; padding: 4px 0; list-style: none; }
.toc ol::before { content: ""; position: absolute; left: calc(var(--rail-x) - 11px); width: 22px; top: -6px; bottom: -6px;
  border-radius: 11px; background: color-mix(in srgb, var(--line) 9%, transparent); }
.toc ol::after { content: ""; position: absolute; left: calc(var(--rail-x) - 2px); width: 4px; top: 18px; bottom: 18px;
  background: var(--line); border-radius: 2px; }
.toc li { position: relative; }
.toc a { display: block; position: relative; padding: 9px 0 9px 36px; min-height: 44px; text-decoration: none; color: var(--ink-2);
  font-size: 15px; line-height: 1.45; }
.toc a::before { content: ""; position: absolute; z-index: 1; left: calc(var(--rail-x) - var(--station) / 2); top: calc(9px + 0.725em - var(--station) / 2);
  width: var(--station); height: var(--station); border-radius: 50%; background: var(--paper); border: 3px solid var(--line); }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.toc a[aria-current="true"]::before { background: var(--line); box-shadow: 0 0 0 3px var(--paper); }
@media (prefers-reduced-motion: no-preference) { .toc a::before { transition: background-color 0.2s ease-out; } }

.body section { padding-top: 6px; }
.body section + section { margin-top: clamp(40px, 5vw, 60px); }
.body h2 { position: relative; margin: 0 0 16px; font-size: clamp(1.32rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.32; font-weight: 650; text-wrap: balance; }
[lang="en"] .body h2 { font-family: var(--display-en); letter-spacing: -0.012em; font-weight: 680; }
.body h2::before { content: ""; position: absolute; left: -30px; top: calc(0.66em - 7px); width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--line); background: var(--paper); }
@media (max-width: 1180px) { .body h2::before { display: none; } }
.body p { margin: 0; max-width: 38em; text-wrap: pretty; overflow-wrap: anywhere; }
[lang="en"] .body p { max-width: 68ch; }
.body p + p { margin-top: 0.9em; }
.items { margin: 0; padding: 0; list-style: none; max-width: 42em; }
[lang="en"] .items { max-width: 70ch; }
.items li { padding: 16px 0 18px; border-top: 1px solid var(--hair); }
.items li:last-child { border-bottom: 1px solid var(--hair); }
.items h3 { margin: 0 0 6px; font-size: 1.04rem; font-weight: 650; line-height: 1.4; }
.items p { color: var(--ink-2); max-width: none; }

.contact { margin-top: clamp(40px, 5vw, 60px); padding: 22px 24px; border-radius: 14px; background: var(--paper-2); max-width: 42em;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.contact h2 { margin: 0; font-size: 1.04rem; font-weight: 650; }
.contact h2::before { display: none; }
.contact a { font: 600 1.04rem/1.4 var(--sans-en); }
.contact .pending { color: var(--ink-3); }

/* No-JS fallback shows both languages stacked; the script narrows to one. */
html.js [data-lang-block][hidden] { display: none; }

.foot { border-top: 1px solid var(--hair); margin-top: 24px; }
.foot-inner { max-width: 1120px; margin: 0 auto; padding: 26px var(--gutter) 40px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: 14px; color: var(--ink-3); }
.foot a { color: var(--ink-2); }
.foot span { font-variant-numeric: tabular-nums; }

@media print {
  .bar, .toc, .foot, .skip { display: none; }
  [data-lang-block][hidden] { display: block !important; }
  body { background: #fff; color: #000; }
  .layout { display: block; }
}