/* jarvis/stations/_base.css — 四站共用的底
 *
 * 🔴 下面那個色票區塊是 skills/_視覺語言.md 第一節的**鏡像,不是第二份真相來源**。
 *    ⚠ 註解裡不要寫出那個選擇器的字面 —— check_duplicate_drift 抓的是「第一個」,
 *      寫在註解裡它會抽到註解那個空殼然後回報量不到(2026-08-11 實際踩到,樁 6 抓的)。
 *    要改色票 → 改那份 .md,不要改這裡。
 *    分岔會被 tools/check_duplicate_drift.py 抓到(夜巡每晚跑,鏡像 id: visual-language-css)。
 *
 * 為什麼要有這個檔:四站是四個獨立的 HTML,沒有共用底的話它們會各自長歪 ——
 * 而那正是這次要治的病(六個前端就是這樣漂開的,見 spec 儀表板-從觸發到收看/_當前狀態.md
 * 「換膚只作用在指揮台,其他五個入口仍是舊底」)。這個檔是那條病的保險絲。
 */

:root{
  /* 亮暗由這一行決定。light-dark() 第一個值是亮色、第二個是暗色 ——
     所以每個 token 只寫一次,不會有兩份會分岔的色票。 */
  color-scheme: light dark;

  /* ── 表面與文字階梯:彩度 0.007,暖是體感不是顏色 ── */
  --void:  light-dark(oklch(0.992 0.0070 65), oklch(0.155 0.0070 65));  /* 頁面底 */
  --deep:  light-dark(oklch(0.972 0.0070 65), oklch(0.190 0.0070 65));  /* 交錯區塊底 */
  --panel: light-dark(oklch(0.955 0.0070 65), oklch(0.225 0.0070 65));  /* 卡片/面板底 */
  --edge:  light-dark(oklch(0.875 0.0070 65), oklch(0.310 0.0070 65));  /* 所有邊框 */
  --mut:   light-dark(oklch(0.505 0.0035 65), oklch(0.655 0.0035 65));  /* 次要說明、圖說 */
  --ink:   light-dark(oklch(0.225 0.0035 65), oklch(0.935 0.0035 65));  /* 主文字 */

  /* ── 六個語意色:全 vault 的彩度都集中在這六個,表面一律讓位 ── */
  --cyan:    light-dark(oklch(0.560 0.1472 205), oklch(0.800 0.1377 205));  /* 主色 · 焦點 · 資料在流動 */
  --volt:    light-dark(oklch(0.560 0.1472 288), oklch(0.800 0.1377 288));  /* 紫電 · 判斷 · 分支 · AI 在決定 */
  --amber:   light-dark(oklch(0.560 0.1472 78), oklch(0.800 0.1377 78));  /* 科技黃 · 等人決定 · 警告 */
  --crimson: light-dark(oklch(0.560 0.1472 22), oklch(0.800 0.1377 22));  /* 發光紅 · 阻斷 · 失敗 · 不可逆 */
  --jade:    light-dark(oklch(0.560 0.1472 158), oklch(0.800 0.1377 158));  /* 科技綠 · 通過 · 驗收 · 成功 */
  --slate:   light-dark(oklch(0.560 0.0442 245), oklch(0.800 0.0413 245));  /* 灰藍 · 既有的 · 非本次重點 */

  /* ── 光暈版(halo 用 .15,邊框用 .34)── */
  --cyan-glow:    light-dark(oklch(0.560 0.1472 205 / .15), oklch(0.800 0.1377 205 / .15));
  --cyan-line:    light-dark(oklch(0.560 0.1472 205 / .34), oklch(0.800 0.1377 205 / .34));
  --volt-glow:    light-dark(oklch(0.560 0.1472 288 / .15), oklch(0.800 0.1377 288 / .15));
  --volt-line:    light-dark(oklch(0.560 0.1472 288 / .34), oklch(0.800 0.1377 288 / .34));
  --amber-glow:   light-dark(oklch(0.560 0.1472 78 / .15), oklch(0.800 0.1377 78 / .15));
  --amber-line:   light-dark(oklch(0.560 0.1472 78 / .34), oklch(0.800 0.1377 78 / .34));
  --crimson-glow: light-dark(oklch(0.560 0.1472 22 / .15), oklch(0.800 0.1377 22 / .15));
  --crimson-line: light-dark(oklch(0.560 0.1472 22 / .34), oklch(0.800 0.1377 22 / .34));
  --jade-glow:    light-dark(oklch(0.560 0.1472 158 / .15), oklch(0.800 0.1377 158 / .15));
  --jade-line:    light-dark(oklch(0.560 0.1472 158 / .34), oklch(0.800 0.1377 158 / .34));
  --slate-glow:   light-dark(oklch(0.560 0.0442 245 / .15), oklch(0.800 0.0413 245 / .15));
  --slate-line:   light-dark(oklch(0.560 0.0442 245 / .34), oklch(0.800 0.0413 245 / .34));

  /* ── 質感用:別再寫死 rgba(),亮色模式會整個看不見 ── */
  --grid:  light-dark(oklch(0.225 0 65 / .075), oklch(0.935 0 65 / .055));  /* 點陣網格 */
  --halo:  light-dark(oklch(0.560 0.1472 205 / .07), oklch(0.800 0.1377 205 / .11));  /* hero 徑向光 */
}

:root[data-theme="light"]{ color-scheme: light }
:root[data-theme="dark"] { color-scheme: dark  }

/* ══ 站台共用版式 ══════════════════════════════════════════ */

*{box-sizing:border-box}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',
              'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  font-size:16.5px; line-height:1.75;
  /* 點陣網格:一行 CSS 換來工程圖的體感(視覺語言第二節②) */
  background-image:radial-gradient(circle, var(--grid) 1px, transparent 1px);
  background-size:26px 26px;
}
/* 標籤 / 數字 / 時間走等寬,內文不走 —— 全站等寬看起來是終端機不是科技感(35 號) */
.mono{font-family:ui-monospace,'SF Mono',Consolas,monospace}

/* ── 頂欄:四站 + 一顆通往另一個世界的門 ── */
.nav{
  position:sticky; top:0; z-index:9; display:flex; align-items:stretch; gap:2px;
  padding:0 18px; background:color-mix(in oklch, var(--deep) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--edge);
}
.nav-station{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:11px 18px 10px; border:0; border-bottom:2px solid transparent;
  background:none; color:var(--mut); cursor:pointer; text-decoration:none;
  font:inherit; font-size:14.5px; text-align:left;
}
.nav-station:hover{color:var(--ink)}
.nav-station .nav-zh{font-size:11px; letter-spacing:.06em; color:var(--mut); opacity:.72}
.nav-station.on{color:var(--cyan); border-bottom-color:var(--cyan)}
.nav-station.on .nav-zh{color:var(--cyan); opacity:.65}

/* 交易腦那顆門:slate = 「既有的、不是本次重點」。
   用 --cyan 會把它升格成第五站(spec 面板總架構/02 第三節)。 */
.nav-spacer{flex:1}
.nav-door{
  align-self:center; display:flex; align-items:center; gap:7px;
  margin-left:14px; padding:6px 12px;
  border:1px solid var(--slate-line); border-radius:6px;
  background:var(--slate-glow); color:var(--slate);
  font-size:12.5px; text-decoration:none; white-space:nowrap;
}
.nav-door:hover{border-color:var(--slate)}
/* 跟四站之間的分隔靠 .nav-spacer 撐開的那段空白,沒有分隔線 ——
   spec 02 要的是「有間隔或分隔線」,間隔已經成立。
   (原本這裡有一條 ::before 的細線,絕對定位沒給座標所以根本沒渲染出來,
    2026-08-11 實拍看出來後刪掉;不留沒作用的死 CSS。) */

/* ── 頁面本體 ── */
.wrap{max-width:1080px; margin:0 auto; padding:34px 22px 80px}
.station-head{margin-bottom:26px}
.station-head h1{margin:0; font-size:31px; font-weight:700; letter-spacing:-.01em}
.station-head p{margin:5px 0 0; color:var(--mut); font-size:14px}

.block{
  border:1px solid var(--edge); border-radius:10px;
  background:var(--panel); padding:20px 22px; margin-bottom:18px;
}
.block-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
  padding-bottom:11px; border-bottom:1px solid var(--edge);
}
.block-head h2{margin:0; font-size:12px; font-weight:700; letter-spacing:.13em; color:var(--cyan)}
.block-head .when{margin-left:auto; font-size:11.5px; color:var(--mut)}

/* ── 行星列 ── */
.orbit{display:flex; flex-direction:column; gap:7px}
.orbit-row{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center; gap:12px;
  padding:9px 12px; border:1px solid var(--edge); border-radius:7px;
  border-left:3px solid var(--edge);
}
.orbit-row.lit{border-left-color:var(--cyan); background:var(--cyan-glow)}
.orbit-icon{font-size:19px; line-height:1; text-align:center}
.orbit-name{font-weight:600}
.orbit-why{display:block; font-size:12.5px; color:var(--mut); font-weight:400; line-height:1.5}
.orbit-n{font-size:12.5px; color:var(--mut); white-space:nowrap}
.orbit-star{
  display:inline-block; margin-left:8px; padding:1px 7px; border-radius:4px;
  border:1px solid var(--edge); font-size:10.5px; color:var(--mut); vertical-align:1px;
}

.total{margin-top:14px; padding-top:12px; border-top:1px solid var(--edge); font-size:14px}
.total b{color:var(--cyan); font-size:19px}

/* 讀不到就直說,不准填 0(工程紀律 #7②) */
.bad{color:var(--crimson); font-size:14px}

/* 這一站還沒搬進來的東西 —— 空的要自己承認是空的 */
.todo{
  border:1px dashed var(--edge); border-radius:10px;
  padding:15px 20px; color:var(--mut); font-size:13.5px;
}
.todo b{color:var(--amber); font-weight:700}