/* ============================================================
   home.css —— 根域导航页的皮，第六套。
   ------------------------------------------------------------
   跟五个站的关系：只读 tokens.css 的变量名，不读 engine.css
   （engine.css 是多屏流程的引擎，这一页是一张静态页，引进来只会
   跟版式打架）。规则跟 skin.css 一样：只重新赋值，不新增变量名，
   局部参数走 --_ 前缀。

   为什么长得跟五个站都不一样：
   五个站的强调色全是暖色（红 #e5104c / 朱 #b4231f / 玫 #d81b60 /
   橙 #ff5b2e / 琥珀 #ffb020），底色是两浅一冷两深。这一页反过来
   ——底色是唯一一块偏绿的灰，页面自己不带彩，**全部彩色都借五个
   站自己的强调色**。所以这页的配色不是挑出来的，是五个站的色票表。
   用户扫一眼就知道等会儿要进哪种画风，颜色在这里是导航，不是装饰。
   ============================================================ */

:root {
  --paper: #e4e6e1;        /* 淡鼠尾草灰，比 quiz 的纸冷、比 fortune 的蓝纸绿 */
  --raise: #eef0ec;
  --sink:  #d3d6cf;

  --ink:   #10120f;        /* 绿黑，不是中性黑也不是蓝黑 */
  --muted: #4d514a;
  --faint: #7f857b;

  --accent:      #1b4d3a;  /* 深常春藤：只用在焦点环和页脚的线上 */
  --accent-ink:  #ffffff;
  --accent-soft: #d5e2da;

  --rule: #c6cac0;

  /* 展平的人文无衬线：Windows 有 Candara，macOS 有 Optima。
     刻意避开五个站用过的 system-ui / Georgia / Arial Narrow /
     Bahnschrift / 等宽，声音要能一眼听出不同。 */
  --font-display: Candara, Optima, "Gill Sans", "Gill Sans MT",
                  "Trebuchet MS", sans-serif;

  --radius-s: 0; --radius-m: 0; --radius-l: 0;   /* 索引页不要圆角 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d120f; --raise: #141b17; --sink: #0a0f0c;
    --ink: #e8ece6; --muted: #9aa89f; --faint: #6a7a70;
    --accent: #7fd6a6; --accent-ink: #0d120f; --accent-soft: #152a20;
    --rule: #242e28;
  }
}
:root[data-theme="dark"] {
  --paper: #0d120f; --raise: #141b17; --sink: #0a0f0c;
  --ink: #e8ece6; --muted: #9aa89f; --faint: #6a7a70;
  --accent: #7fd6a6; --accent-ink: #0d120f; --accent-soft: #152a20;
  --rule: #242e28;
}

*, *::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.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
}

.icon {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

:where(a):focus-visible, :where(button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- 报头 -------------------------------------------------- */
/* 宽屏两栏：左边正文，右边色票图例。不这么分的话 38rem 的正文右边
   会空掉一半屏，而那块空白填不进任何真内容 —— 图例是现成的真内容，
   而且它承担导航：先认色，再认站。 */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--sp-5) var(--sp-6);
  align-items: start;
}
.kicker, .wordmark { grid-column: 1 / -1; }

.kicker {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.015em;
  text-wrap: balance;
}
/* 第二行用重量拉开层级，不靠加字号 —— 展平体加粗之后骨架变化很大，
   一行轻一行重本身就是这套字的性格。 */
.wordmark b { font-weight: 700; }

.lede {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--step-1);
  color: var(--muted);
}

/* 色票图例：颜色 → 站名。下面每一行的左轨就是这五个颜色，
   所以这块既是图例也是预告 —— 颜色在这一页负责导航。
   aria-hidden：内容跟下面的索引重复，读屏念两遍是噪音。 */
.key {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}
.key li { display: flex; align-items: center; gap: var(--sp-3); }
.key i { width: 24px; height: 8px; background: var(--_c); flex: none; }

/* ---- 索引行 ------------------------------------------------ */
.index {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--rule);
}

.entry {
  display: grid;
  grid-template-columns: 4px 3.5rem minmax(0, 1fr) 13rem 6.5rem 1.5rem;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.entry:hover { background: var(--raise); }

/* 左轨：这一行唯一的彩色块，颜色是那个站自己的强调色。
   载入时从上往下画一次，只动 transform。 */
.rail {
  align-self: stretch;
  background: var(--_c);
  transform-origin: top;
  animation: rail var(--dur-slow) var(--ease) both;
  animation-delay: calc(var(--_i) * 70ms);
}
@keyframes rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.entry:hover .rail { box-shadow: 0 0 0 2px var(--_c); }

.plate {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
}
.what { display: block; margin-top: 2px; color: var(--muted); }

/* 「读什么」列：这一列不是文案，是每台仪器真正吃进去的输入。
   谁在跑第三方的活数据、谁全在本地算，一眼看得出来 —— 这也是
   出问题时第一个要查的地方。 */
.reads {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}
.reads b { display: block; color: var(--faint); font-weight: 400; letter-spacing: .1em; }

.chip {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
}
.chip[data-kind="live"] { border-color: var(--_c); color: var(--ink); }

.arrow { font-size: 1.15rem; color: var(--faint); transition: transform var(--dur-fast) var(--ease); }
.entry:hover .arrow { transform: translateX(4px); color: var(--ink); }

/* ---- 页脚 -------------------------------------------------- */
.colophon {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-5);
}
.colophon h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.colophon p { margin: 0; font-size: var(--step--1); color: var(--muted); }
.colophon a { color: var(--ink); text-underline-offset: 3px; }

/* ---- 窄屏：网格塌成两行，右边三列跟到第二行 ---------------- */
@media (max-width: 860px) {
  .wrap { padding-top: var(--sp-6); }
  .masthead { grid-template-columns: 1fr; }
  .entry {
    grid-template-columns: 4px 3rem minmax(0, 1fr) 1.5rem;
    row-gap: var(--sp-3);
  }
  .rail { grid-row: 1 / 3; }
  .reads { grid-column: 3 / 5; }
  .chip { grid-column: 3 / 5; }
  .key { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}