/* 虛擬候位室(Surface W)。
 *
 * ⚠️ **這份 CSS 必須自足。** 它不 import shell.css —— 候位頁在應用層
 *    掛掉時仍要能看,而 shell.css 是給登入後的框架用的,帶著側欄、
 *    使用者列這些此處根本不存在的東西。
 *
 * ⚠️ 配色刻意**不用**紅色與警示色。規格(Annex C 15.15)寫著
 *    「不得看起來像故障」—— 排隊是正常運作,不是錯誤。
 *    用了紅色橫幅的話,使用者會關掉重開,而那正是排隊要避免的行為。
 */

body {
  margin: 0;
  background: var(--surface-1, #f7f9f8);
  color: var(--ink-900, #14211f);
  font-family: var(--font-app, system-ui, sans-serif);
  line-height: 1.5;
}

.w-wrap { max-width: 620px; margin: 0 auto; padding: 48px 20px 64px; }

.w-head { text-align: center; margin-bottom: 28px; }
.w-brand {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-700, #3e4b48); margin: 0 0 12px;
}
.w-head h1 { font-size: 26px; margin: 0 0 10px; }
.w-lead { margin: 0; color: var(--ink-700, #3e4b48); }

.w-card {
  background: var(--surface-0, #fff);
  border: 1px solid var(--line-200, #e3e6ea);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.w-card h2 { font-size: 15px; margin: 0 0 10px; }
.w-card ul { margin: 0; padding-left: 20px; color: var(--ink-700, #3e4b48); }
.w-card li + li { margin-top: 6px; }
.w-quiet { background: transparent; }

.w-label {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-700, #3e4b48); margin: 0 0 4px;
}
/* ⚠️ tabular-nums:位置每幾秒就變一次,比例字寬會讓數字左右跳動,
   而跳動看起來像頁面在閃 —— 那又回到「像故障」。 */
.w-big {
  font-size: 46px; font-weight: 700; margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.w-sub { margin: 0 0 16px; color: var(--ink-700, #3e4b48); font-variant-numeric: tabular-nums; }

.w-bar {
  height: 8px; border-radius: 999px;
  background: var(--line-200, #e3e6ea); overflow: hidden;
}
.w-bar-fill {
  height: 100%; width: 0%;
  background: var(--teal-600, #0d6e63);
  transition: width .6s ease;
}
@media (prefers-reduced-motion: reduce) { .w-bar-fill { transition: none; } }

.w-foot { margin-top: 28px; text-align: center; }
.w-note { font-size: 13px; color: var(--ink-700, #3e4b48); margin: 0 0 6px; }

/* 「快輪到你了」—— 用主色而非警示色,因為這是好消息。 */
.w-wrap.almost .w-big { color: var(--teal-600, #0d6e63); }

/* 「候位已關閉」與「已進入」把位置卡收起來。 */
.w-wrap.closed #w-position-card,
.w-wrap.admitted #w-position-card { display: none; }

@media (prefers-color-scheme: dark) {
  body { background: #1b1d21; color: #e6eae9; }
  .w-card { background: #26292d; border-color: #444548; }
  .w-lead, .w-note, .w-label, .w-sub, .w-card ul { color: #b4bdbb; }
  .w-bar { background: #444548; }
}

/* ── 三語 ────────────────────────────────────────────────
   ⚠️ **與登記頁同一個做法:三種語言的字全部寫在 HTML 裡,由 CSS 藏掉
      其餘兩種。** 這一頁的存在理由是「應用層掛了也要看得懂」——
      靠 JS 或 i18n catalogue 填字的話,那個前提就不成立了。
   ⚠️ 預設是繁體(HTML 上寫死 data-l="tc")。沒有這一組
      `[data-t="tc"]` 的基準規則,JS 還沒跑之前三種語言會**同時**顯示,
      看起來像文案重複了三遍。 */
[data-t] { display: none; }
[data-t="tc"] { display: inline; }
[data-l="en"] [data-t] { display: none; }
[data-l="en"] [data-t="en"] { display: inline; }
[data-l="sc"] [data-t] { display: none; }
[data-l="sc"] [data-t="sc"] { display: inline; }
[data-l="tc"] [data-t] { display: none; }
[data-l="tc"] [data-t="tc"] { display: inline; }

/* ⚠️ 簡體把 SC 排前面 —— 兩者碼位重疊而字形不同,順序決定看到哪一套。 */
[data-l="sc"] body, [data-l="sc"] .w-wrap {
  font-family: 'Noto Sans SC Subset', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}

.w-lang { display: flex; gap: 4px; justify-content: center; margin: 0 0 14px; }
.w-lang button {
  border: 1px solid var(--line-200); background: #fff; color: var(--ink-700);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.4; font-weight: 600;
}
/* ⚠️ `font: 600 12px/1.4 inherit` 是**無效宣告** —— 全域關鍵字不能當
      簡寫裡的字型名稱,整條會被丟掉,而 <button> 不繼承字型,
      落回 UA 的 Arial(沒有漢字)。登記頁的語言鍵就是這樣變成空盒子的。 */
.w-lang button[aria-pressed="true"] {
  background: var(--teal-500); color: var(--on-teal); border-color: var(--teal-500);
}