/* css/comp-public.css — 對外公開頁（public.html）。契約 §12.12。
 *
 * 顏色一律用 base.css 的 token（--c-*），所以深／淺兩個主題自動跟著走，
 * 而且 scripts/check_frontend.py 的「用到的自訂屬性一定要有定義」那一關會過。
 * **不重複 comp.css**：後台的樣式帶著它自己的版面假設（左側導覽、表單網格），
 * 公開頁是一頁到底的閱讀型版面，共用只會互相牽制。
 *
 * 手機優先：兩張表都放在 .pub-table-wrap（橫向捲動）裡——名次表有 10 欄，
 * 硬塞進 360px 的做法是縮字級，而看不清楚的名次表等於沒有名次表。
 */

.pub {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 12px 32px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- topbar */

.pub-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.pub-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-primary);
}

.pub-btn {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}

.pub-btn:hover { background: var(--c-surface-alt); }
.pub-btn:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
.pub-btn-ghost { background: transparent; }

/* ------------------------------------------------------------------ view */

.pub-view { flex: 1 1 auto; padding-top: 12px; }

.pub-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 12px 14px 16px;
  margin-bottom: 14px;
}

.pub-h1 { font-size: 1.3rem; margin: 2px 0 6px; }
.pub-comp-head { padding: 10px 2px 4px; }
.pub-comp-meta { margin: 0; font-size: 0.9rem; }
.pub-empty { color: var(--c-text-dim); margin: 12px 2px; }
.pub-loading { padding: 20px 4px; }
.pub-note { font-size: 0.82rem; margin: 10px 2px 0; }
.pub-footer {
  border-top: 1px solid var(--c-border);
  margin-top: 18px;
  padding: 12px 2px 0;
  font-size: 0.82rem;
}

.pub-error .pub-btn { margin-top: 8px; }

/* -------------------------------------------------------- competition list */

.pub-cards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }

.pub-card-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  min-height: var(--tap-min);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}

.pub-card-btn:hover { border-color: var(--c-primary); }
.pub-card-btn:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
.pub-card-name { font-weight: 600; font-size: 1.02rem; }
.pub-card-meta { font-size: 0.86rem; }

/* ------------------------------------------------------------------ tabs */

.pub-tabs { display: flex; gap: 4px; margin: 6px 0 12px; }

.pub-tab {
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--c-border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--c-text-dim);
  font: inherit;
  cursor: pointer;
}

.pub-tab.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--c-primary);
}

.pub-tab:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

/* --------------------------------------------------------------- filters */

.pub-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.pub-field { display: flex; align-items: center; gap: 6px; }
.pub-field-label { color: var(--c-text-dim); font-size: 0.86rem; }

.pub-select {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  color: var(--c-text);
  font: inherit;
}

/* ---------------------------------------------------------------- tables */

.pub-day {
  font-size: 0.98rem;
  margin: 14px 2px 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}

/* ⭐ 橫向捲動 ＋ **「還有東西在右邊」的提示**。

   兩張表在窄螢幕上都會橫捲（名次表 10 欄、賽程表 6 欄），而 2026-09-16 在
   375px 實測到一件事：`clientHeight === offsetHeight` ⇒ **這裡沒有替捲軸保留
   任何高度**（行動裝置是 overlay 捲軸，不捲的時候根本不畫）⇒ 頁面上**一個
   提示都沒有**，讀者不會知道這張表可以往右滑。

   做法是經典的 scroll shadow：兩層**跟著內容捲**的底色遮片（`local`）壓在兩層
   **固定在容器邊**的陰影（`scroll`）上。捲到最左邊時左邊的遮片正好蓋住左邊的
   陰影，捲到最右邊時同理 ⇒ **陰影只在真的還有內容被藏起來的那一邊出現**。
   它因此不需要 JS，也不會在不捲的寬度上留下一道假提示。
   （遮片的顏色要跟底下那一層一致 ⇒ `--c-surface`，因為表格坐在 `.pub-panel`
   裡；陰影用 `--c-border`，兩個主題都已經調過。） */
.pub-table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--c-surface), transparent)
      0 0 / 24px 100% no-repeat local,
    linear-gradient(to left, var(--c-surface), transparent)
      100% 0 / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--c-border), transparent)
      0 0 / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--c-border), transparent)
      100% 0 / 10px 100% no-repeat scroll;
}

.pub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pub-table th {
  text-align: left;
  font-weight: 600;
  color: var(--c-text-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}

.pub-table td {
  padding: 8px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.pub-table tbody tr:last-child td { border-bottom: none; }
.pub-table .num { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------- schedule */

/* ⚠ 賽程是**一個日期一張 table**（views.js 的 scheduleTable 逐日呼叫），而
   `table-layout: auto` 讓瀏覽器**逐表**依內容算欄寬 ⇒ 每一天的「比分」欄從不同的
   x 開始。2026-09-15 在正式站量到：六張表的比分欄起點是 734／772／814，**漂 80px**，
   而那個寬度取決於**那一天最長的隊名組合**。

   ⇒ `table-layout: fixed` ＋ **明寫每一欄的寬度**：六張表因此用同一組欄寬。
   （只靠 fixed 而不寫寬度也會對齊——六張表的表頭文字相同——**但那是巧合**，
   哪天某一欄的表頭字數改了就又散了。寫下來才是規則。）

   ## ⭐ 對戰欄的寬度是**算出來的**，不是它自己宣告的（2026-09-16 實測訂正）

   這一段原本寫著「對戰欄仍由它自己的 `min-width: 220px` 撐開」。**那句話是錯的**，
   而且錯得很安靜：`table-layout: fixed` 底下，**cell 的 `min-width` 完全不參與
   欄寬計算**。證據不是「1440px 量到 200 < 220」（那個數字本身就是錯的——HEAD 在
   1440px 量到的是 **282**），而是**遠低於宣告值的那兩格**：HEAD 在 768px 量到
   **10px**、在 560px 與 375px 量到 **0px**，而那裡宣告的是 220px（≤560 段甚至
   另外宣告了 170px）。一個宣告了 170 卻量到 0 的 `min-width`，從頭到尾沒有做
   任何事。

   **真正的機制只有一條：**

       對戰欄寬度 ＝ max(表格 min-width, 容器寬度) − 明寫寬度的五欄之和

   （容器 ＝ 視窗 − `.pub` 的 24px padding − `.pub-panel` 的 28px padding ＋ 2px 邊框，
   且被 `.pub { max-width: 1040px }` 封頂 ⇒ 986px。）

   ⇒ 結論有二，都是這一版照著做的：
   ① **加一欄就是從對戰欄扣寬度**，一比一。所以新的第六欄（賽後檢視）要多少，
      對戰欄就少多少——沒有第三個地方可以拿。
   ② 想給對戰欄一個真正的下限，**唯一有效的旋鈕是表格的 `min-width`**
      （它撐開表格，底下由 `.pub-table-wrap` 的 `overflow-x: auto` 橫向捲）。
      那正是 ≤900px 那一段在做的事。**所以那個 `min-width: 220px` 被拿掉了**：
      一個看起來會 work 而其實不會的宣告，比沒有那個宣告糟。

   ## ⚠ 第六欄的 7.5rem 是**量英文那一版**量出來的（前一版沒量，於是每個桌機寬度都溢出）

   前一版寫 6rem，註解還寫著「英文那一版量出來的下限再留一點」——**英文版根本
   沒量過**。實測：`.pub-matchview-link` 的外框在英文是 **89.2px**（`View match`，
   字級 0.76rem 是絕對 rem，**不隨表格字級縮小**），加上 td 的 8px×2 padding ⇒
   **需要 105.2px**，而 6rem 只有 96px ⇒ **1440／1280／1024／900 每一個桌機寬度
   都溢出**，表頭在截圖上被裁成「MATCH VIEV」。
   7.5rem ＝ 120px ⇒ 對 89.2px 的膠囊留 14.8px 餘裕（字體換一套也還撐得住）。
   繁中那一版是 66px，本來就不是瓶頸——**雙語同級是硬規定，不是英文可以打折**。

   `min-width: 45.5rem` ＝五個固定欄之和（9.5＋4＋18＋6.5＋7.5）。`.pub-col-score` 的
   18rem 是五局比分那一行的下限（`25-18 25-16 20-25 22-25 15-12`，nowrap）；
   `.pub-col-time` 從 15rem 收到 9.5rem 的交換條件是**場館名與時區都允許換行**
   （見下面 `.pub-zone`），只有時刻本身仍然 nowrap。 */
.pub-schedule { table-layout: fixed; min-width: 45.5rem; }
.pub-schedule .pub-col-time { width: 9.5rem; }
.pub-schedule .pub-col-no { width: 4rem; }
.pub-schedule .pub-col-score { width: 18rem; }
/* 狀態欄 6.5rem ＝ 104px：實測**六個狀態的英文標籤裡最寬的那一個**
   （`Provisional` 83.5px；`Scheduled` 81.6、`Postponed` 81.5、`Cancelled` 77.8、
   `Final` 46；繁中最寬 54）＋ td 的 8px×2 ⇒ 99.5px 是下限。
   ⚠ HEAD 的 6rem（＝內容寬 80px）**本來就裝不下 `Provisional`**——那是既有的
   小溢出，不是這一批造成的；但 ≤900px 之後狀態欄變成**最後一欄**，它的溢出
   會直接變成整張表的橫向捲動 ⇒ 順手一起量對。 */
.pub-schedule .pub-col-status { width: 6.5rem; }
/* 第六欄（賽後檢視）也要明寫寬度，理由同上面那一段：`fixed` 底下沒寫的欄靠
   內容決定，而這一欄**逐列有無內容**（沒有結果的列是空的）⇒ 不寫就會逐日漂。 */
.pub-schedule .pub-col-matchview { width: 7.5rem; }

/* 只有**時刻**是一個不能斷的量 ⇒ 只有它 nowrap。 */
.pub-time { display: block; font-size: 1rem; white-space: nowrap; }
/* 時區寫在時刻底下：畫的是**場地當地時間**，讀者不必猜是誰的當地時間。

   ⚠ **`white-space: nowrap` 拿掉了，而且要 `overflow-wrap: anywhere`。**
   IANA 的長名字（`America/Argentina/Buenos_Aires`、`America/North_Dakota/New_Salem`）
   在 0.72rem 下量到 **184px**，而時間欄從 15rem 收到 9.5rem 之後只剩 136px 的
   內容寬 ⇒ 前一版實測 `td.pub-col-time` 的 scrollWidth/clientWidth 是
   1440 **200/160**、900 與 768 **200/128**、375 **198/128**（HEAD 在每一個寬度
   都是 240/240，零溢出）——時區名整條壓到隔壁的場次編號欄上。
   ⚠️ 光是允許換行**不夠**：`/` 與 `_` 都不是換行機會（UAX #14），所以
   `white-space: normal` 之後那個字串仍然是一個不可斷的長 token。
   要 `overflow-wrap: anywhere` 才真的斷得開。 */
.pub-zone {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.pub-place { display: block; font-size: 0.78rem; }
/* ⚠ 場次編號欄**不能 nowrap**。4rem ＝ 64px（內容寬 48px），而承辦編得出
   `PUB-NORMAL` 這種長度的編號：2026-09-16 實測 `td.pub-col-no` 的
   scrollWidth−clientWidth 在桌機是 **15px**、≤900px 是 **23px** ⇒ 編號整條壓在
   隔壁的隊名上（截圖裡「M-NORMAL」與「Measure Alpha」疊在一起）。
   **這是 HEAD 就有的**（那裡也是 4rem ＋ nowrap），不是這一批造成的——但它就在
   新欄旁邊、又是一行改得掉的，所以一起修：允許換行之後 `-` 是合法的斷點
   （UAX #14），`PUB-` / `NORMAL` 兩行，不再蓋到別人。
   `overflow-wrap: anywhere` 是第二道：`-` 之後那一段本身若還是太長（≤900px
   實測仍差 5px、≤560px 差 8px），就再斷一次。**斷開一個編號很醜，蓋住隔壁的
   隊名是讀錯資料**——兩害相權。 */
.pub-col-no { color: var(--c-text-dim); overflow-wrap: anywhere; }

.pub-team { display: inline-block; }
.pub-team.is-winner { font-weight: 700; color: var(--c-primary); }
.pub-vs { display: inline-block; margin: 0 6px; font-size: 0.8rem; }
.pub-pool-tag { display: block; font-size: 0.78rem; }

.pub-col-score { white-space: nowrap; }
.pub-sets { display: block; font-size: 1rem; font-weight: 700; }
/* 判負／未到場／未完成／取消的比分不是打出來的，所以不給它「正常比分」的
   份量——標籤才是重點（views.js 的 scoreCell）。 */
.pub-sets.is-irregular { font-weight: 600; color: var(--c-text-dim); }
.pub-kind { border-color: var(--c-warn); color: var(--c-warn); margin-top: 2px; }
.pub-setscores { display: block; font-size: 0.78rem; }

/* ⭐ 正在打的那一列（views.js 的 liveCell，P-0023 §4.2）。

   ## 顏色：外框 `--c-err`、**字走 `--c-text`**

   紅色是這個標記唯一認得出來的東西（FIVB 的計分板、電視角標都是紅的），
   但**紅字在深色主題不合格**：`--c-err` 深色是 #e9573d，落在 `.pub-panel` 的
   #16283c 上只有 **4.20:1**，而這顆膠囊是 0.76rem 的小字 ⇒ WCAG 1.4.3 要 4.5。
   （淺色那一半沒問題：#b3261e on #ffffff ＝ 6.54:1。）
   ⇒ 紅色留給**外框與那顆點**——兩者都是非文字元素，門檻是 1.4.11 的 3:1，
   而 4.20／6.54 都過；字色走 `--c-text`（兩個主題都 >13:1）。
   **不是把紅字調亮就好**：調亮之後它與 `--c-err` 分岔，下一個人改 token 時
   這裡會安靜地退回不合格。

   ## 那顆點是 `::before`，不是一個字

   用 `●` 當文字的話它會進到可及名稱裡（螢幕閱讀器唸「黑圓 LIVE」），而它
   要傳達的東西「LIVE」這四個字母已經說完了。`::before` 的背景色不進
   可及性樹，也不會被使用者的字型設定換成一個奇怪的符號。 */
.pub-live {
  display: block;
  width: fit-content;
  border-color: var(--c-err);
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.pub-live::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--c-err);
  vertical-align: 0.08em;
}

/* 「成績待匯入」：relay 說打完了、封存包還沒進來。**刻意是灰的**——那一格
   的重點是「這個數字還不是官方成績」，而不是「出事了」。 */
.pub-live-pending {
  display: block;
  width: fit-content;
  color: var(--c-text-dim);
  margin-top: 2px;
}

/* 局中比分（「第 3 局 18-15」）。與 `.pub-setscores` 同級：它是輔助資訊，
   那一列的主角是上面那個局數。 */
.pub-live-set {
  display: block;
  font-size: 0.78rem;
  /* 比分欄整欄是 `nowrap`（那是為了「25-18 25-16 …」那一行），但這一行有
     兩個天然斷點且在 560px 只有 9.5rem 可用 ⇒ 允許它折，不要讓它壓到隔壁。
     同 `.pub-setscores` 在 ≤900 段的處置，只是這一行在每個寬度都需要。 */
  white-space: normal;
}

/* 狀態徽章：值域是 fixtures.status（§12.1）。沒有列到的值仍會顯示文字，
   只是不帶顏色——不吞資料（i18n.js 的 statusLabel 同一個原則）。 */
.pub-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  font-size: 0.76rem;
  white-space: nowrap;
}

/* 賽後檢視連結（views.js 的 matchViewLink）。
   ⚠ **公開頁在這之前渲染不出任何 `<a>`**，所以這裡沒有 anchor 的預設樣式可以
   繼承——`:focus-visible` 要**自己補**，不補的話鍵盤使用者在這一欄會完全看不到
   焦點在哪（這一頁的 `.pub-btn`／`.pub-tab`／`.pub-card-btn` 三個可聚焦元素
   各自都寫了一份，這是第四份）。
   外觀刻意做成與 `.pub-badge` 同一個膠囊形狀：它跟狀態徽章在同一列上並排，長得
   像另一種東西只會讓那一列變吵。

   ## ⭐ 底色是 `--c-surface`（`.pub-panel`），**不是** `--c-bg`

   整張賽程表坐在 `.pub-panel` 裡，而那一層宣告 `background: var(--c-surface)`
   ⇒ 算對比度要對的是 `--c-surface`（淺色 **#ffffff**、深色 **#16283c**），
   不是頁面的 `--c-bg`。**前一版這裡四個數字全錯**，其中一個就錯在挑了 `--c-bg`
   當底色（差 0.29）。下面每一個比值都是 2026-09-16 用 WCAG 2.x 公式重算、
   並在真瀏覽器上量 computed color 對過的。

   ## ⭐ 顏色：`--c-primary-text`，**不是** `--c-primary`（2026-09-16 實測訂正）

   `base.css:257-259` 逐字寫著「主色在淺色只當底／框／高亮，字色走
   `--c-primary-text`」，而這裡原本寫的是 `color: var(--c-primary)`。
   淺色底下那解析成 **#f8cc55 on #ffffff ⇒ 1.53:1**（WCAG 1.4.3 要 4.5:1）——
   在白底上那是**看不見的黃字**。換成 `--c-primary-text`（淺色 #14324f）⇒
   **13.13:1**；深色的 `--c-primary-text` 是 #f6b93b，與原本的 `--c-primary`
   逐字同值（on #16283c ＝ **8.50:1**）⇒ **深色主題逐像素不變**。

   ## ⭐ 邊框也要 3:1：這個膠囊的**形狀**是「我是一個控制項」唯一的訊號

   底線只在 hover 出現（一整欄都是底線會把表格變成一片藍），所以靜止狀態下
   辨識它的是那個膠囊外框 ⇒ 它落在 WCAG 1.4.11（非文字對比，3:1）裡，而
   `--c-border` 兩個主題都不到：淺色 #c3ceda on #ffffff ＝ **1.60:1**、
   深色 #2c4763 on #16283c ＝ **1.56:1**。**兩個主題都改**（深色那一次是修，
   不是回歸——它本來就不合格）。改後兩邊都走 `--c-primary-text`，
   ⇒ 淺色 **13.13:1**、深色 **8.50:1**。
   ⚠️ 隔壁的 `.pub-badge` 仍然用 `--c-border`，**那是刻意的**：它是純資訊、
   不可互動，1.4.11 不涵蓋它，而把它也描粗會讓「哪一個點得下去」這件事消失。

   hover 走「主色當底」那條（§27-1 允許的用法）：黃底 ＋ `--c-primary-ink`
   墨色（淺色 **10.81:1**、深色 **7.46:1**），而且**顏色不是唯一的訊號**
   ——同時補上底線。 */
.pub-col-matchview { white-space: nowrap; }

.pub-matchview-link {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-primary-text);
  font-size: 0.76rem;
  white-space: nowrap;
  color: var(--c-primary-text);
  text-decoration: none;
}

.pub-matchview-link:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-ink);
  text-decoration: underline;
}

.pub-matchview-link:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

/* ⭐ 同一個連結渲染兩次，**永遠只有一個在版面上**（views.js 的「兩個位置」）：
   桌機在第六欄，≤900px 在對戰欄裡。這裡是桌機那一半——把對戰欄裡那一顆藏起來。
   ⚠ 用 `display: none`（不是 `visibility`／`opacity`）是刻意的：只有
   `display: none` 會把節點**同時**移出版面**與可及性樹**，螢幕閱讀器的
   「列出整頁連結」才不會一列看到兩個。 */
.pub-matchview-inline { display: none; }

/* ⭐ 被 `?fixture=` 標出來的那一列（P-0023 §4.2）。

   ## 為什麼是**左緣一條**，不是整列換底色

   整列換底色在窄螢幕會與 `.pub-sets.is-irregular`／狀態徽章的顏色打架，而那
   兩個帶的是**資料的意思**（這場判負、這場取消）；強調帶的是**導覽的意思**
   （你要找的是這一列）。兩種意思用同一種視覺語彙，讀者分不出哪一個在說話。
   左緣那條 `box-shadow` 是 `inset` 的：`<tr>` 上的 `border` 在
   `border-collapse` 底下會被隔壁儲存格的邊吃掉，而 `outline` 會整列描一圈、
   在橫捲的表格裡切成兩半。

   ⚠️ **顏色不是唯一的訊號**：那一列同時被捲到畫面中央（`app.js` 的
   `scrollToMarkedFixture()`），而提示句（`.pub-fixture-hint`）就在表格上方。
   色盲與高對比模式的讀者靠的是後兩者。 */
.pub-fixture[data-highlight] {
  box-shadow: inset 3px 0 0 0 var(--c-primary);
  background: var(--c-surface-alt);
}

/* 「這場比賽尚未開始…」——**只有一種情況會出現**，見 views.js 的 fixtureHint()。 */
.pub-fixture-hint {
  border-left: 3px solid var(--c-primary);
  padding-left: 10px;
  margin: 10px 0;
  color: var(--c-text);
}

.pub-st-completed { border-color: var(--c-ok); color: var(--c-ok); }
.pub-st-draft { color: var(--c-text-dim); }
.pub-st-postponed, .pub-st-cancelled { border-color: var(--c-warn); color: var(--c-warn); }

/* ------------------------------------------------------------- standings */

.pub-col-rank { white-space: nowrap; }
.pub-rank { font-weight: 700; font-size: 1rem; margin-right: 4px; }
.pub-col-team { min-width: 160px; }
.pub-mp { font-weight: 700; color: var(--c-primary); }
.pub-tied { color: var(--c-text-dim); }
.pub-drawn { border-color: var(--c-primary); color: var(--c-primary); }

/* -------------------------------------------------- tablet & phone (≤900) */

/* ⭐ 900px 以下：**第六欄整欄收起來，那顆膠囊改在對戰欄裡**。

   ## 為什麼不是「把第六欄再收窄一點」

   2026-09-16 在 375px 實測前一版：`.pub-table-wrap` 的可見區是 x=[27,348]，
   而賽後檢視欄落在 x=[675,763] ⇒ **整欄在畫面外**，可見區只蓋得住表格的
   43.6%，要往右捲 **415px** 才碰得到那顆膠囊。捲到底之後隊名整個離開畫面，
   膠囊旁邊只剩一個狀態徽章——**連這是哪一場都看不出來**。
   而 user 要的就是「從賽程表連到比賽」這個動作，**現場觀眾九成用手機**。
   一個要橫捲兩個螢幕寬才找得到的入口，對使用者而言與沒做差不多。

   ⇒ ≤900px 讓 `.pub-col-matchview` 整欄 `display: none`（表頭與每一格），
   改讓 `.pub-matchview-inline` 那一份在**對戰欄裡**現身，就在兩隊名字底下。
   它因此坐在對戰欄的**左緣**——那是這張表在窄螢幕上最先被看到的位置之一。
   實測（375px）：膠囊 x=[158,224]（繁中）／[158,247]（英文），
   而可見區是 [0,321] ⇒ **不橫捲就碰得到**。

   ## 欄寬：固定欄收窄，換給對戰欄一個真正的下限

   依據是上面那條公式——對戰欄 ＝ max(表格 min-width, 容器) − 固定欄之和。
   桌機那一組（45rem ＝ 720px）在 900px 視窗只剩 126px 給對戰欄、768px 更少：
   兩個隊名疊在一個擠扁的欄裡溢出到隔壁。HEAD 一樣有這個病（768px ⇒ 10px、
   560／375 ⇒ **0**），**不是新欄造成的**，但新欄讓它提早發生，所以一起修
   ——不修的話「不比改動前差」會變成「一起爛在同一個地方」。

   ① 第六欄收起來 ＋ 固定欄收到 28.5rem（7.5＋3.5＋11＋6.5）。
      `.pub-setscores` 在這裡**允許換行**——五局比分排成兩行，比把對戰欄擠成 0
      划算；那也是它在桌機要 18rem 的唯一原因。
   ② `min-width` 設成 40rem ＝ 28.5rem ＋ **對戰欄的 11.5rem 下限**。
      ⚠️ 40rem ＝ 640px **是照 768px（iPad 直立）挑的**：那個寬度的 wrap
      clientWidth 是 **714**，所以 640 剛好落在裡面 ⇒ **768px 完全不橫捲**。
      前一版把這裡釘在 46rem＝736px，於是 768px 上最後一欄超出 22px，
      膠囊的右邊框看得見缺口（HEAD 在 768 是 714/714）。**一個斷點的數字要對著
      一個真實裝置的寬度挑，不是挑一個好看的整數。** */
@media (max-width: 900px) {
  .pub-schedule { min-width: 40rem; }
  .pub-schedule .pub-col-time { width: 7.5rem; }
  /* 4.2rem 不是估的：英文表頭 `MATCH` 在 `nowrap` 下量到的字框是 59px
     （≤560 段量到 61px），3.5rem=56px 裝不下 ⇒ 表頭的墨水會**疊到隔壁的
     `TEAMS` 上 5px**，截圖上讀作 `MATCHTEAMS`。溢出盒子還看得出來，
     兩個表頭的字疊在一起不會被 `scrollWidth > clientWidth` 抓到——
     所以 `stage_public_layout` 的那條全格掃描之外，另外釘了字框不重疊。 */
  .pub-schedule .pub-col-no { width: 4.2rem; }
  .pub-schedule .pub-col-score { width: 11rem; }
  .pub-schedule .pub-col-status { width: 6.5rem; }
  .pub-schedule .pub-col-matchview { display: none; }
  .pub-setscores { white-space: normal; }
  /* 自己一行、靠左，寬度只包住文字（`inline-block` 會被前面的隊名拉到同一行
     的行尾，那正是「在畫面外」的小型版）。 */
  .pub-matchview-inline {
    display: block;
    width: fit-content;
    margin-top: 4px;
  }
}

/* ----------------------------------------------------------------- phone */

@media (max-width: 560px) {
  .pub-table { font-size: 0.86rem; }
  .pub-table th, .pub-table td { padding: 6px; }
  .pub-brand { font-size: 0.94rem; }
  /* ⚠ `.pub-col-teams { min-width: 170px }` 本來在這裡，**拿掉了**：
     `table-layout: fixed` 底下 cell 的 `min-width` 不參與欄寬計算（見上面那段
     實測——這裡宣告 170px，HEAD 在 375px 量到的是 **0**），它從來沒有生效過。
     一個看起來會 work 而不會的宣告要拿掉，不是留著當註解。 */
  /* 手機再收一輪：**目的是讓對戰欄整欄落進 375px 的可見區**。
     固定欄 25.25rem ＝ 404px、`min-width` 34rem ＝ 544px ⇒ 對戰欄 140px 起於
     x=152，而 375px 的可見區是 [0,321] ⇒ 對戰欄（連同那顆膠囊）**整個看得見**。
     表格仍然橫捲 223px 去看比分——那是六欄塞不進 375px 的必然，
     但**入口不必等那一捲**。 */
  .pub-schedule { min-width: 34rem; }
  .pub-schedule .pub-col-time { width: 6.5rem; }
  /* 同 ≤900 段的理由：英文 `MATCH` 表頭在這一段量到 59px，3rem=48px
     差 11px ⇒ 字疊到 `TEAMS` 上。4rem=64px 是量出來的下限再留一點。 */
  .pub-schedule .pub-col-no { width: 4rem; }
  .pub-schedule .pub-col-score { width: 9.5rem; }
  .pub-schedule .pub-col-status { width: 6.25rem; }
}