/* ============================================================================
   station-pages.css —— 車站語言延伸到「計時測驗頁」與「文章實戰／練習頁」
   （2026-09-07 第二階段 prototype）
   ----------------------------------------------------------------------------
   為什麼是一支檔而不是 station-test.css ＋ station-practice.css：
   兩頁共用同一個「站牌 header + 安靜打字區」的骨架，拆兩支會有一整段重複的
   header 規則，改一邊忘另一邊就會兩頁長得不一樣。兩頁本來就是同一批 prototype、
   要退也是一起退，所以放同一支、內部分兩節。

   核心原則（使用者裁示）：**打字中的核心輸入區要比首頁更安靜。**
   因此本檔的規矩是：
     · 深藍只用在「外框／狀態列」（離開、標題、計時、進度條軌道）
     · 螢光黃在打字區只保留**有意義**的那一個：焦點槽的底線、進度條的填色
     · 打字舞台（.play-target / .test-conveyor）**不加任何票根、切角、箭頭、裝飾**
   station.css 已經換掉全站色票，這裡只做結構。

   不動 style.css / test.css / fingers.css 任何一行。
   ============================================================================ */

/* --- 共通：站牌式 header ---------------------------------------------------
   把 topline 拉成卡片頂端的整條深藍色帶（負 margin 貼齊卡片邊緣），
   像月台上方的資訊看板。打字區完全不受影響。 */
/* 刻意**不**在卡片上加 overflow: hidden —— 飛出殘影（.test-flyout）要溢出卡片才看得見，
   本專案的地雷第 2 條就是這個。改成讓 header 自己帶上方圓角去貼齊卡片。 */
.test-card,
.play-card {
  padding-top: 0;
}

.test-topline,
.play-topline {
  margin: 0 -24px 16px;
  padding: 12px 20px;
  border-radius: 12px 12px 0 0;
  background: var(--primary-deep);
  color: var(--white);
}

.play-card .play-topline {
  margin: 0 -18px 14px;      /* .play-card 的 padding 是 18px */
}

/* padding-top 歸零後，實體鍵盤提醒（排在 topline 之前）會貼到卡片頂邊 */
.test-card > .physical-keyboard-notice:not([hidden]),
.play-card > .physical-keyboard-notice:not([hidden]) {
  margin-top: 14px;
}

.test-topline h2,
.play-topline h2 {
  color: var(--white);
  font-weight: 900;
}

.test-unit-note,
.play-topline .play-status {
  color: rgba(255, 255, 255, .66);
}

/* 離開鍵：深藍底上的白框幽靈鍵 */
.test-exit,
.play-exit {
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: transparent;
  box-shadow: none;
  color: var(--white);
  font-weight: 700;
}

.test-exit:hover,
.play-exit:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, .12);
}

/* --- 1. 計時測驗頁 --------------------------------------------------------- */

/* 計時器＝月台上的時刻牌：黃底、等寬、方角 */
.test-clock {
  padding: 3px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--amber);
}

.test-timer {
  color: var(--primary-deep);
  font-size: 28px;
}

/* 倒數告急時整塊翻成紅底白字（原本只換文字色，在黃底上看不出來） */
.test-clock:has(.test-timer.urgent) {
  background: var(--err);
}

.test-clock:has(.test-timer.urgent) .test-timer,
.test-clock:has(.test-timer.urgent) small {
  color: var(--white);
}

.test-clock small {
  color: var(--primary-deep);
  font-weight: 700;
}

/* 時長選擇＝票種 */
.test-setup {
  border: 2px solid var(--line);
  background: var(--panel);
}

.test-setup-label {
  color: var(--primary-deep);
  font-weight: 700;
  letter-spacing: .16em;
}

.duration-btn {
  border: 2px solid var(--line-strong);
  box-shadow: none;
  font-weight: 700;
}

.duration-btn.active {
  border-color: var(--primary-deep);
  background: var(--primary-deep);
  box-shadow: none;
  color: var(--white);
}

/* 進榜資格用 PASS 標籤取代 🏆 —— 同樣是一眼可辨，而且是本套視覺語言的字彙 */
.duration-btn.ranked::before {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--amber);
  color: var(--primary-deep);
  content: "PASS";
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: 1px;
}

.duration-btn.ranked.active::before {
  background: var(--amber);
}

/* 進度條＝路線軌道：深藍軌、螢光黃列車 */
.test-bar,
.play-bar {
  border: 0;
  background: rgba(22, 35, 78, .14);
}

/* --- 打字舞台：這裡刻意什麼都不加 ------------------------------------------
   只把底色從米色 panel2 換成純白、邊框換成中性線，讓字更突出。
   焦點槽的黃色底線（test.css 的 .test-slot-current）是**有意義的指示**，保留。 */
.test-target,
.play-target {
  border-color: var(--line);
  background: var(--panel);
}

/* 即時統計＝時刻表列：上方一條細線，數字等寬 */
.play-progress.test-live {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.test-live-value {
  font-size: 22px;
}

.test-live-label {
  letter-spacing: .04em;
}

/* --- 2. 文章實戰／練習頁 --------------------------------------------------- */

/* 狀態列（剩餘秒數／進度）在深藍 header 上，改成黃字等寬 */
.play-topline .play-timer {
  color: var(--amber);
  font-size: 13px;
}

.play-progress {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: .04em;
}

/* 中打輸入框：外框改成深藍細框，聚焦時才亮起來。不加任何票券造型。 */
.test-zh-field,
.play-card .zh-input {
  border-color: var(--line-strong);
}

.test-zh-field:focus-within,
.play-card .zh-input:focus {
  border-color: var(--primary-deep);
}

/* 實體鍵盤提醒：黃色但克制，不要在打字前先搶眼 */
.physical-keyboard-notice {
  border-color: var(--line-strong);
  background: var(--panel2);
  color: var(--primary-deep);
  font-weight: 500;
}

/* --- 3. 結算卡：唯一允許出現票根的地方（它不是打字中的畫面）--------------- */
.test-result-card .result-grid {
  padding: 14px 0;
  border-block: 2px dashed rgba(22, 35, 78, .22);
}

.test-result-card .result-num span {
  font-variant-numeric: tabular-nums;
}

/* --- 4. 小尺寸：≤560px ----------------------------------------------------- */
@media (max-width: 560px) {
  /* ≤560px 時 style.css 把 .card 的 padding 改成 18px（不是 16），
     負 margin 要跟著改，否則 header 兩側會露出一條白邊。 */
  .test-topline,
  .play-topline {
    margin-inline: -18px;
    padding: 10px 14px;
  }

  /* test.css 在 ≤560px 把時刻牌 justify-self: stretch 成整列。
     原本是米色膠囊看不出來，換成螢光黃之後就變成一條滿版黃色帶
     （正是提案裡點名不要的「滿版黃色」）。改成與「離開」同一列、靠右的小牌子。 */
  .test-clock {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    justify-content: flex-end;
    padding: 2px 12px;
  }

  .test-heading {
    grid-column: 2;
    grid-row: 2;
  }

  .test-timer {
    font-size: 22px;
  }

  .test-live-value {
    font-size: 18px;
  }

  /* PASS 標籤在 3 欄的時長鍵裡會把字擠掉，改成只留一個黃點 */
  .duration-btn.ranked::before {
    margin-right: 4px;
    padding: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    vertical-align: 2px;
  }
}