/* ============================================================
   東流生生 FLOWEVER — 這頁是一台終端機,不是一個網站。
   沒有導覽列、沒有區塊、沒有卡片、沒有頁尾。只有一個 prompt。
   .doc  = 完整靜態內容(爬蟲讀它,JS 掛了也讀它)
   .term = JS 起來後接管的終端機
   ============================================================ */

:root {
  color-scheme: dark;

  --bg: #000000;
  --bg-1: #040704;

  /* 護眼版:以 #00AA00 為主文字,其餘依它推。色相仍鎖純綠 120°。 */
  --g-hi: #00ee00;
  --g-txt: #00aa00;
  --g-mid: #008a00;
  --g-dim: #006b00;
  --g-line: #003d00;

  --amber: #c68a00;
  --red: #c02600;
  --violet: #6b21a8;
  --violet-lit: #7b2cbf;
  --nerv: #c02600;

  /* 語法上色:只借一點青與琥珀,主調還是綠 */
  --c-key: #22b8b8;
  --c-str: #7ac043;
  --c-num: #b8901f;
  --c-cmt: #006b00;
  --c-ret: #33cc33;

  /* 用系統的終端機字體,不從網路載。這樣在 Mac 上就是你每天看的那個字。 */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "TermCJK", "Liberation Mono", monospace;

  --glow: 0 0 8px rgba(0, 221, 0, 0.4);
  --pad: clamp(0.9rem, 3vw, 2rem);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f3ee;
  --bg-1: #e9ece5;

  --g-txt: #0c3d20;
  --g-hi: #04641f;
  --g-mid: #16653a;
  --g-dim: #4a7a5e;
  --g-line: #c3d2c4;

  --amber: #8a5a00;
  --red: #b32020;

  --c-key: #05606e;
  --c-str: #2c5f10;
  --c-num: #8a5a00;
  --c-cmt: #5a8067;
  --c-ret: #14653a;

  --glow: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

/* 中文在瀏覽器裡不是剛好兩格:蘋方 advance 是 1.0em,等寬西文是 0.6em,
   所以中文只佔 1.67 格,ASCII 表格的右邊框就對不齊。
   用 size-adjust 把中文校正成 1.2em = 剛好兩格。 */
/* ⚠️ local() 只認 PostScript 名,不認字型家族名。
   寫 local("PingFang TC") 會靜默失敗 —— @font-face 進 error 狀態,
   size-adjust 跟著失效,而且不會有任何錯誤訊息。這條規則曾經整條是死的,
   是量出「一個中文字只佔 1.66 格」才發現的。改動這裡要重量一次。 */
@font-face {
  font-family: "TermCJK";
  src: local("PingFangTC-Regular"), local("HiraginoSans-W3"),
    local("STHeitiTC-Light"), local("NotoSansCJKtc-Regular"),
    local("MicrosoftJhengHeiRegular"), local("MicrosoftJhengHei");
  unicode-range: U+2E80-303F, U+3040-30FF, U+3400-4DBF, U+4E00-9FFF,
    U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
  size-adjust: 120%; /* 開機時會實測並覆寫,見 app.js 的 fitCJK() */
}

body {
  background: var(--bg);
  color: var(--g-txt);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
  min-height: 100svh;
}

a {
  color: var(--g-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--g-hi);
}

::selection {
  background: var(--g-hi);
  color: #000;
}

:focus-visible {
  outline: 1px solid var(--g-hi);
  outline-offset: 2px;
}

/* ============ 文件層:給爬蟲與沒有 JS 的人 ============ */

.doc {
  line-height: 1.7;
  max-width: 78ch;
  margin-inline: auto;
  padding: 2.5rem var(--pad) 5rem;
}

.doc h1 {
  font-size: 1.7rem;
  line-height: 1.4;
  color: var(--g-hi);
  margin-bottom: 1.2rem;
}

.doc h2 {
  font-size: 1.25rem;
  color: var(--g-hi);
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--g-line);
}

.doc h3 {
  font-size: 1rem;
  color: var(--g-txt);
  margin: 1.4rem 0 0.4rem;
}

.doc p {
  color: var(--g-mid);
  margin-bottom: 0.8rem;
}

.doc ul {
  margin: 0 0 1rem 2ch;
  color: var(--g-mid);
}

.doc li {
  margin-bottom: 0.2rem;
}

/* JS 接手後,文件層退場 */
body.term .doc {
  display: none;
}

body.docmode .screen {
  display: none;
}

/* ============ 終端機 ============ */

.screen {
  display: none;
  min-height: 100svh;
  flex-direction: column;
  padding-bottom: 8.2rem;
}

body.term .screen {
  display: flex;
}

/* 螢幕輝光:整面一層極淡的綠。真的 CRT 是螢幕在發光,不是每個字。 */
body.term::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    68% 55% at 50% 42%,
    rgba(0, 221, 0, 0.05),
    transparent 72%
  );
}

html[data-theme="light"] body.term::before {
  background: none;
}

/* 掃描線只留暈影在最上層。紋理沉到內容底下——
   不然連反白色塊都會被打上橫紋,字也糊。 */
body.term::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: radial-gradient(125% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.62));
}

html[data-theme="light"] body.term::after {
  background: none;
}

/* 掃描線紋理:背景層,文字壓在它上面所以是乾淨的 */
body.term .scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.34) 0px,
    rgba(0, 0, 0, 0.34) 1px,
    transparent 1px,
    transparent 3px
  );
}

html[data-theme="light"] .scanlines {
  display: none;
}

/* ── 背景水流:整面極淡,一直在流 ── */
.river {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
}

.screen,
.status,
.monitor {
  position: relative;
  z-index: 2;
}

/* ── 色塊分區:反白。終端機原生的做法,不是網頁色塊。 ── */
.hdr {
  display: block;
  background: var(--g-mid);
  color: #000;
  padding: 0 1ch;
  margin-block: 0.5rem 0.35rem;
  font-weight: 700;
  white-space: pre;
  overflow-x: auto;
}

html[data-theme="light"] .hdr {
  background: var(--g-dim);
  color: var(--bg);
}

/* 主動搭話的提示條:琥珀反白,整行,很難忽略。
   跟綠色的區塊標題分開,一眼就知道「這句是在問我」。 */
.askbar {
  position: relative;
  z-index: 3;
  display: block;
  background: var(--violet);
  color: #fff;
  padding: 0 1ch;
  margin-block: 0.7rem 0.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: pre;
  overflow-x: auto;
  box-shadow: inset 4px 0 0 var(--violet-lit);
  animation: askflash 0.4s steps(2, start) 3;
}

@keyframes askflash {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .askbar {
    animation: none;
  }
}

/* EVA 的漢字標記:明體、超粗、字距拉開。
   跟等寬 sans 的反差正是 EVA 介面的特徵。 */
/* EVA 那種漢字標記。三件事是量出來才知道的:
   1. 明體在 14px 太小 —— 橫畫細到只剩一個像素,糊成一團,看起來像字型壞掉
      而不是像設計。放到 1.5em 才看得出明體的粗細對比。
   2. font-weight: 900 對宋體完全沒作用:它沒有粗體字面,瀏覽器也不合成,
      900 跟 400 畫出來一模一樣。要粗只能自己描邊。
   3. 這兩個字不需要卡在等寬格線上 —— 色塊是整條的,格線在色塊裡沒有意義。 */
.kanji {
  font-family: "Songti TC", "Noto Serif TC", "Hiragino Mincho ProN",
    "Yu Mincho", "SimSun", serif;
  font-size: 1.5em;
  line-height: 1; /* 不讓大字把整條撐高 */
  letter-spacing: 0.2em;
  -webkit-text-stroke: 0.4px currentColor; /* 宋體沒有粗體,粗度只能描出來 */
  padding-inline-end: 0.4ch;
  vertical-align: -0.12em;
}

/* 全螢幕警示:結果夠重才用。EVA 那種大字壓過整個畫面。 */
.alert {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-content: center;
  text-align: center;
  background: var(--nerv);
  color: #000;
  animation: alertflash 0.22s steps(2, start) 6;
}

.alert.on {
  display: grid;
}

.alert__k {
  font-family: "Songti TC", "Noto Serif TC", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  font-size: clamp(3.5rem, 16vw, 11rem);
  letter-spacing: 0.3em;
  line-height: 1;
  text-indent: 0.3em;
}

.alert__sub {
  margin-top: 1.6rem;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.4vw, 1.15rem);
  letter-spacing: 0.1em;
}

@keyframes alertflash {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert {
    animation: none;
  }
}

/* 幾何切角:EVA 介面愛用 */
.hdr,
.askbar {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 10px) 100%, 0 100%);
}

/* 小色塊:狀態標籤 */
.chipk {
  background: var(--g-dim);
  color: #000;
  padding: 0 0.6ch;
}

.chipk--on {
  background: var(--g-hi);
}

.chipk--warn {
  background: var(--amber);
}

.chipk--err {
  background: var(--red);
  color: #000;
}

html[data-theme="light"] .chipk,
html[data-theme="light"] .chipk--on,
html[data-theme="light"] .chipk--warn,
html[data-theme="light"] .chipk--err {
  color: var(--bg);
}

/* ── 監測 pane:像 tmux 的下分割窗格,一直在動 ── */
.monitor {
  position: fixed;
  inset-inline: 0;
  bottom: 2.4rem;
  z-index: 70;
  background: var(--bg);
  border-top: 1px solid var(--g-line);
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.15rem var(--pad) 0.25rem;
  max-height: 5.4rem;
  overflow: hidden;
}

.monitor__t {
  color: var(--g-dim);
}

.monitor .row {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 620px) {
  .monitor {
    font-size: 0.66rem;
    max-height: 4.2rem;
  }
}

/* sparkline */
.spark {
  letter-spacing: 0;
  white-space: pre;
  overflow-x: auto; /* 窄螢幕不要把趨勢線切掉 */
}

/* 輸出流 */
.screen__out {
  padding: 1rem var(--pad) 0;
  flex: 1;
}

.ln {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.35em;
}

.hi {
  color: var(--g-hi);
}

.txt {
  color: var(--g-txt);
}

.dim {
  color: var(--g-dim);
}

.warn {
  color: var(--amber);
}

.err {
  color: var(--red);
}

.ok {
  color: var(--g-hi);
}

/* 程式碼上色 */
.k { color: var(--c-key); }
.s { color: var(--c-str); }
.n { color: var(--c-num); }
.c { color: var(--c-cmt); }
.ret { color: var(--c-ret); }

.big {
  font-size: clamp(1.15rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow: var(--glow);
}

.stats {
  margin-block: 0.4rem;
}

/* 打字中的游標 */
.cur {
  display: inline-block;
  width: 1ch;
  height: 1.05em;
  background: var(--g-hi);
  vertical-align: -0.18em;
  box-shadow: var(--glow);
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ASCII 流場:scan 打完品牌名才長出來 */
.flowbox {
  border: 1px solid var(--g-line);
  background: var(--bg-1);
  margin-block: 0.7rem;
  aspect-ratio: 20 / 7;
  min-height: 130px;
  max-height: 260px;
  overflow: hidden;
}

.flowbox canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 輸入行 */
.screen__in {
  position: sticky;
  bottom: 8rem;
  display: flex;
  align-items: baseline;
  gap: 1ch;
  padding: 0.35rem var(--pad) 0.6rem;
  background: var(--bg);
}

.ps1 {
  color: var(--g-dim);
  flex-shrink: 0;
  white-space: nowrap;
}

.ps1--ask {
  color: var(--g-hi);
}

.screen__in input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--g-hi);
  font: inherit;
  caret-color: var(--g-hi);
  padding: 0;
}

/* tmux 狀態列:可以點,但它是終端機的東西,不是網頁按鈕 */
.status {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--g-mid);
  color: #000;
  font-size: 0.78rem;
  line-height: 1.75;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.status::-webkit-scrollbar {
  display: none;
}

html[data-theme="light"] .status {
  background: var(--g-dim);
  color: var(--bg);
}

.status__name {
  background: #000;
  color: var(--g-hi);
  padding: 0 1ch;
  flex-shrink: 0;
}

html[data-theme="light"] .status__name {
  background: var(--bg);
  color: var(--g-hi);
}

.win {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0 1ch;
  cursor: pointer;
  flex-shrink: 0;
}

.win:hover,
.win.on {
  background: #000;
  color: var(--g-hi);
}

html[data-theme="light"] .win:hover,
html[data-theme="light"] .win.on {
  background: var(--bg);
  color: var(--g-hi);
}

.status__right {
  margin-inline-start: auto;
  padding: 0 1ch;
  flex-shrink: 0;
}

/* ASCII 字標:字元拼出來的大字,不是放大的網頁字 */
.banner {
  color: var(--g-hi);
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 0 7px rgba(0, 221, 0, 0.28);
  font-size: clamp(6.5px, 1.35vw, 17px);
  overflow-x: auto;
  white-space: pre;
  margin-block: 0.6rem 0.2rem;
}

/* 窄螢幕塞不下 96 字元寬的點陣,收起來 */
@media (max-width: 560px) {
  .banner {
    font-size: 6px;
  }
}

/* ⚠️ 瀏覽器預設 pre{font-family:monospace},會蓋掉 body 繼承下來的字型。
   所以 <pre> 一直拿不到含 TermCJK 的堆疊,框線裡的中文只有 1.66 格。
   凡是新增 <pre>,字型要自己指定,不能靠繼承。 */
pre {
  font-family: var(--mono);
}

/* 中文沒辦法用點陣拼,就框起來 —— 一樣是純字元 */
.boxed {
  color: var(--g-hi);
  white-space: pre;
  overflow-x: auto;
  font-size: clamp(9px, 1.7vw, 15px);
  line-height: 1.35;
}

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

  body.term::after {
    background: none;
  }
}

@media print {
  .screen {
    display: none !important;
  }

  body.term .doc {
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   內容頁(/answers/…)

   這裡的讀者是從 AI 的答案點進來的,他要的是一個具體問題的答案。
   所以不放終端機,可讀性優先 —— 但配色、字體、切角都留著,
   一眼看得出是同一個站。

   內文不用純終端機綠:讀四千字的螢光綠會痛。標題留綠色,
   內文用偏白的淺綠,連結用紫色 —— 跟綠色對比夠,而且延續色塊那條線。
   ═══════════════════════════════════════════════════════════ */

body.reading {
  background: var(--bg);
  color: #b9d4c2;
  font-size: 15px;
  line-height: 1.9;
  padding: 0 1.2rem 4rem;
}

body.reading::before,
body.reading::after {
  content: none; /* 內容頁不要掃描線,會干擾閱讀 */
}

.rd-top {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.4rem 0 0;
  font-size: 0.8rem;
  color: var(--g-dim);
  letter-spacing: 0.04em;
}

.rd-top a {
  color: var(--g-mid);
  text-decoration: none;
}

.rd-top a:hover,
.rd-top a:focus-visible {
  color: var(--g-hi);
  text-decoration: underline;
}

.rd-top span {
  padding: 0 0.5ch;
}

.rd {
  max-width: 36rem;
  margin: 0 auto;
  padding-top: 2.2rem;
}

.rd h1 {
  color: var(--g-hi);
  font-size: clamp(1.45rem, 5.2vw, 2rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

/* 開場那段就是答案本身。實測被 AI 引用的頁面全部都在 H1 正下方
   四十到一百字內把話講完 —— 這一段是最可能被整段抓走的地方,
   所以給它一個看得出來「這是重點」的樣子。 */
.rd-lede {
  color: #d8ece0;
  font-size: 1.04em;
  border-inline-start: 3px solid var(--violet);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 0 0 1.4rem;
}

.rd-meta {
  color: var(--g-dim);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  margin: 0 0 2.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--g-line);
}

.rd-meta span {
  margin-inline-end: 0.6ch;
}

.rd h2 {
  color: var(--g-hi);
  font-size: 1.12rem;
  line-height: 1.5;
  font-weight: 700;
  margin: 2.8rem 0 0.9rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--g-mid);
  text-wrap: balance;
}

.rd h3 {
  color: #cfe8d8;
  font-size: 1rem;
  font-weight: 700;
  margin: 1.8rem 0 0.4rem;
}

.rd p {
  margin: 0 0 1.05rem;
}

.rd strong {
  color: var(--g-hi);
  font-weight: 700;
}

.rd ul {
  margin: 0 0 1.2rem;
  padding-inline-start: 0;
  list-style: none;
}

.rd li {
  position: relative;
  margin-bottom: 0.85rem;
  padding-inline-start: 1.6rem;
}

.rd li::before {
  content: "›";
  position: absolute;
  inset-inline-start: 0.25rem;
  color: var(--violet-lit);
  font-weight: 700;
}

.rd a {
  color: var(--violet-lit);
  text-underline-offset: 3px;
}

.rd a:hover,
.rd a:focus-visible {
  color: #fff;
  background: var(--violet);
}

#faq .qa {
  border-top: 1px solid var(--g-line);
  padding-top: 1.1rem;
  margin-top: 1.1rem;
}

#faq .qa h3 {
  margin-top: 0;
  color: var(--g-txt);
}

/* 文末的行動呼籲。切角延續終端機那套幾何語言。 */
.rd-cta {
  margin-top: 3.4rem;
  padding: 1.4rem 1.3rem;
  background: rgba(139, 47, 217, 0.14);
  border: 1px solid var(--violet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 16px) 100%, 0 100%);
}

.rd-cta p {
  margin-bottom: 0.7rem;
}

.rd-cta p:last-child {
  margin-bottom: 0;
}

.rd-fine {
  color: var(--g-dim);
  font-size: 0.8rem;
}

/* 目錄頁 */
.rd-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.rd-list li {
  padding: 0;
  margin: 0 0 0.9rem;
}

.rd-list li::before {
  content: none;
}

.rd-list a {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--g-line);
  color: inherit;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 12px) 100%, 0 100%);
}

.rd-list a:hover,
.rd-list a:focus-visible {
  border-color: var(--violet);
  background: rgba(139, 47, 217, 0.12);
}

.rd-list__q {
  display: block;
  color: var(--g-hi);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.rd-list__d {
  display: block;
  font-size: 0.88rem;
  color: #9fbdaa;
}

.rd-list__t {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--g-dim);
}

.rd-foot {
  max-width: 36rem;
  margin: 3.5rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--g-line);
  color: var(--g-dim);
  font-size: 0.78rem;
}

.rd-foot p {
  margin: 0 0 0.3rem;
}

@media (max-width: 30rem) {
  body.reading {
    font-size: 14.5px;
    line-height: 1.85;
    padding-inline: 1rem;
  }

  .rd h2 {
    margin-top: 2.2rem;
  }
}

html[data-theme="light"] body.reading {
  color: #1d3327;
}

html[data-theme="light"] .rd-lede {
  color: #10241a;
}

html[data-theme="light"] .rd-list__d {
  color: #3b5546;
}

/* ── 靜態層的表單:只有沒 JS 的人看得到 ──────────────────
   JS 起來後整個 .doc 隱藏,改走終端機的問答流程。
   兩邊收一樣的欄位、送同一支端點。 */

.doc-form {
  max-width: 32rem;
  margin: 1.4rem 0 2rem;
  padding: 1.2rem 1.2rem 0.6rem;
  border: 1px solid var(--g-line);
}

.doc-form p {
  margin-bottom: 1rem;
}

.doc-form label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--g-txt);
  font-size: 0.9rem;
}

.doc-form input,
.doc-form select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: var(--bg-1);
  border: 1px solid var(--g-line);
  color: var(--g-hi);
  font: inherit;
  font-size: 1rem; /* 16px 以下 iOS 會自動放大整頁 */
}

.doc-form input:focus-visible,
.doc-form select:focus-visible {
  border-color: var(--g-hi);
  outline: none;
}

.doc-form button {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--g-mid);
  color: #000;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 11px) 100%, 0 100%);
}

.doc-form button:hover,
.doc-form button:focus-visible {
  background: var(--g-hi);
}

.doc-form__fine {
  color: var(--g-dim);
  font-size: 0.82rem;
}

/* 蜜罐:機器人看得到、真人看不到。
   用 display:none 有些機器人會跳過,所以是移出畫面而不是隱藏。 */
.doc-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 關聯閱讀:文章不要是死路。
   對讀者是動線,對 AI 是把幾篇綁成同一個主題群。 */
.rd-more {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--g-line);
}

.rd-more h2 {
  margin-top: 0;
  font-size: 0.95rem;
  border: 0;
  padding-inline-start: 0;
  color: var(--g-mid);
}

.rd-more ul {
  margin: 0;
}

.rd-more li {
  margin-bottom: 0.55rem;
}

.rd-more li::before {
  content: "→";
  color: var(--g-mid);
}

/* 方向鍵選到的那一格。
   要跟 .on(目前所在的視窗)分得開 —— 一個是「你在這」,
   一個是「按 Enter 就去這」。用紫色,跟主動搭話同一套語言。 */
.win.sel {
  background: var(--violet);
  color: #fff;
  outline: 1px solid var(--violet-lit);
  outline-offset: -1px;
}

.win.sel::after {
  content: "⏎";
  margin-inline-start: 0.6ch;
  opacity: 0.85;
}

html[data-theme="light"] .win.sel {
  color: #fff;
}

/* 提示文字:輸入行空著又選到東西的時候才出現 */
#cli::placeholder {
  color: var(--violet-lit);
  opacity: 0.9;
}

/* 跳過連結:平常看不到,一按 Tab 就出現。
   JS 接手之後,只用鍵盤或讀螢幕的人會被關在終端機裡 —— 這是出口。
   不用 display:none,那樣連鍵盤都聚焦不到,等於沒做。 */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--g-hi);
  color: #000;
  padding: 0.7rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus,
.skip:focus-visible {
  left: 0;
}

/* 內容頁的連結原本是 #7b2cbf,對比只有 2.95,讀起來很吃力。
   換成 #9d5ce6(5.11)—— 這是離原本色相最近、又過得了 AA 的值。 */
.rd a,
.rd-list a:hover .rd-list__q {
  color: #9d5ce6;
}

/* ════════ 手機 ════════
   兩件實測出來的問題,都跟「這站的主要互動在一根手指上」有關。 */

@media (pointer: coarse), (max-width: 620px) {
  /* 1. iOS Safari 在字級小於 16px 的輸入框被點到時,會自動放大整頁。
        使用者得再手動縮回去。這站的核心互動就是那個輸入框,
        每次點都爆版等於不能用。16px 是唯一可靠的解法。
        提示字元要一起長大,不然同一行會高低不齊。 */
  #cli,
  .ps1 {
    font-size: 16px;
  }

  /* 2. 狀態列是不打字的人唯一的導覽,但按鈕只有 22px 高,
        遠低於 44px 的觸控建議。把可點範圍撐開 ——
        視覺高度不變,變的是手指打得到的範圍。 */
  .win {
    padding: 0.75rem 1.1ch;
    margin-block: -0.62rem; /* 撐開觸控範圍但不撐高狀態列 */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .status {
    /* 手指滑得動,而且不要被系統手勢攔截 */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════ 公開題庫頁 ════════
   一百多題要能「掃」不能只能「讀」。所以左邊是題目、右邊是題型標籤,
   眼睛沿著左緣往下掃,需要分類的時候才往右看。 */

.rd--wide {
  max-width: 44rem;
}

.qn {
  float: inline-end;
  color: var(--g-dim);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
}

.qnote {
  color: #9fbdaa;
  font-size: 0.92rem;
  margin-bottom: 1rem !important;
}

.qlist {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  counter-reset: q;
}

.qlist li {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  padding: 0.34rem 0 0.34rem 2.6ch;
  margin: 0;
  border-bottom: 1px solid rgba(0, 61, 0, 0.55);
  position: relative;
  counter-increment: q;
}

.qlist li::before {
  content: counter(q);
  position: absolute;
  inset-inline-start: 0;
  color: var(--g-dim);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.qq {
  flex: 1;
  color: #cfe8d8;
}

/* 題型標籤:窄、對齊、可以無視。它是輔助,不是主角。 */
.qt {
  flex-shrink: 0;
  color: var(--g-mid);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--g-line);
  padding: 0 0.6ch;
  cursor: help;
}

.qtypes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem 1.6rem;
  margin: 0 0 1rem;
}

.qtypes div {
  display: flex;
  gap: 1ch;
  align-items: baseline;
}

.qtypes dt {
  flex-shrink: 0;
  color: var(--g-hi);
  font-weight: 700;
  min-width: 4ch;
}

.qtypes dd {
  margin: 0;
  color: #9fbdaa;
  font-size: 0.9rem;
}

@media (max-width: 32rem) {
  .qlist li {
    flex-wrap: wrap;
    gap: 0.2rem 1ch;
  }

  .qq {
    flex-basis: 100%;
  }

  .qt {
    margin-inline-start: 0;
  }
}

/* ════════ 無障礙修正(審計抓出來的)════════ */

/* 1. 純文件模式要把終端機殘留收乾淨:狀態列跟監測面板本來 position:fixed
      浮在底部,切到 docmode 之後還蓋著內文下緣,而且那 10 個「執行 scan」
      按鈕仍在 tab 順序裡 —— 逃出終端機的人又被它們絆住。
      display:none 同時解決「蓋住」跟「還在 tab 順序」兩件事。 */
body.docmode #status,
body.docmode #monitor,
body.docmode .river,
body.docmode .scanlines {
  display: none;
}

/* 2. reading 頁的次要文字對比不足(--g-dim 在黑底只有 3.10:1,免責聲明、
      日期、題數這些是要讀的字,不是裝飾)。改用實測過關的顏色。
      終端機自己的 --g-dim(提示字元、監測時間戳)是終端機美感,不動。 */
:root {
  --rd-dim: #2ea25c; /* 黑底 ~5.4:1,過 AA */
}
html[data-theme="light"] {
  --rd-dim: #2c6b45; /* 淺底 ~5.7:1,過 AA */
}
.rd-top,
.rd-meta,
.rd-fine,
.rd-foot,
.rd-list__t,
.qn,
.doc-form__fine,
.qlist li::before {
  color: var(--rd-dim);
}

/* 3. 案例研究最關鍵的「未出現」用 .err 紅字,但 #c02600 只有 3.52:1。
      提亮到過 AA —— 這個字是整份案例的重點,不能讀不清楚。 */
:root {
  --err-read: #ff5c3a; /* 黑底 ~4.9:1 */
}
.err {
  color: var(--err-read);
}