/* 排版与页面骨架。**JS 之前先立得住**：CSS 到位、脚本未加时，
   每一页都还是一个能读的文档，不是一个空白页。 */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: calc(var(--step) * 3);
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* 键盘可达性不是可选项——盘上的行星是能聚焦的 */
:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 2px; }

a { color: var(--brass-lit); text-decoration: none; }
a:hover { text-decoration: underline; }

.masthead { border-bottom: var(--hair) solid var(--brass-dim); padding-bottom: calc(var(--step) * 2); }
.masthead h1 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: .06em; color: var(--brass-lit); }
.masthead__sub { margin: var(--step) 0 0; color: var(--text-dim); }
.masthead nav { margin-top: calc(var(--step) * 2); display: flex; gap: calc(var(--step) * 3); }

main { margin-top: calc(var(--step) * 3); }
h2 { font-weight: 400; font-size: 22px; color: var(--brass); margin: 0 0 var(--step); }
h3 { font-weight: 400; font-size: 18px; color: var(--brass); margin: calc(var(--step) * 3) 0 var(--step); }

/* 模式入口 */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--step) * 2); }
.mode { display: block; padding: calc(var(--step) * 2); border: var(--hair) solid var(--brass-dim); background: var(--ink-2); }
.mode p { color: var(--text-dim); margin: 0; }
.mode:hover { border-color: var(--brass); }

/* 表单 */
/* ★ `min-width: 0` 是必需的，不是装饰（2026-10-12 用户实测：卜卦页的
   「所问之宫」与「宫位制」两个下拉**重叠**在一起）。网格项默认 `min-width: auto`
   ⇒ **控件里最长的那条选项决定它的最小宽度**——「留空 —— 由模型判断问题属于哪一宫」
   比 180px 的轨道宽，选择框便溢出自己的格子，压在后一格的控件上；而它什么时候
   与谁相邻，取决于视口宽度，所以在开发机上不一定复现。 */
.field {
  display: grid; gap: calc(var(--step) / 2);
  margin-bottom: calc(var(--step) * 1.5);
  min-width: 0;
  /* ★ `align-content: start` 是必需的（2026-10-12 用户实测：「第二行那些下拉框以及
     输入框……参差不齐」）。`.field` 是网格项、被外层行**拉高等高**，而 `align-content`
     的默认值 `stretch` 会把这份富余高度**均分给内部每一行**——同一个外行里各格的行数
     不同（有 hint 的三行、没有的两行）、hint 高矮又不同 ⇒ 均分到的余量各不相同 ⇒
     标签被拉到 65px、输入框被拉到 83px，而隔壁的选择框 35px：**每一格单独看都"对"，
     整行却参差**。start 让三行各按内容取高、贴顶排。 */
  align-content: start;
}
.field label { color: var(--text-dim); font-size: 14px; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--text); background: var(--ink-2);
  border: var(--hair) solid var(--brass-dim); padding: calc(var(--step) * 0.75) var(--step);
  /* 控件填满自己的格子，且**允许比内容窄**：过长的选项文字由浏览器截断显示，
     绝不溢出到隔壁格子上（`box-sizing: border-box` 在 base.css 顶部是全局的） */
  width: 100%; min-width: 0;
}
/* ★ 必须排在 `font: inherit` **之后**：那条简写会把 line-height 一并重置成继承值
   （1.65），同一特异性下后者胜，写在前面等于没写。 */
.field input, .field select {
  /* 两种控件的**固有高度本来就不相等**（16px 字号下实测 40px / 35px：`<input>` 的
     行盒按 line-height 算，`<select>` 按字体度量算），故高度显式给定一份。
     40px = 5 × --step，与输入框原先的高度一致，视觉重量不变。 */
  height: calc(var(--step) * 5);
  line-height: 1.25;   /* 定高之后，文字在框内的上下留白由行高决定 */
}
.field .hint { color: var(--text-dim); font-size: 13px; }
.field--wide { grid-column: 1 / -1; }
form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 calc(var(--step) * 2); }

button {
  font: inherit; color: var(--ink); background: var(--brass);
  border: var(--hair) solid var(--brass); padding: var(--step) calc(var(--step) * 2); cursor: pointer;
}
button:disabled { opacity: .5; cursor: progress; }
button.ghost { background: none; color: var(--brass); }

/* 引文一律原文英文，不翻译（§16.5） */
.cite { font-style: italic; color: var(--text-dim); }
[lang="en"] { font-family: var(--serif); }

/* 盘与面板的排布：宽屏并排，窄屏上下 */
.spread { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.2fr); gap: calc(var(--step) * 3); align-items: start; }
@media (max-width: 900px) { .spread { grid-template-columns: 1fr; } }

.colophon { margin-top: calc(var(--step) * 4); padding-top: calc(var(--step) * 2); border-top: var(--hair) solid var(--brass-dim); color: var(--text-dim); font-size: 14px; }