/* ===========================================================================
   app.css — 版面與元件
   規則：只引用 tokens.css 的 custom property，不得出現裸色碼。
   圓角只有兩種：互動元件 18px、容器 24px，小元件 6px。
   單色系統，不用漸層、不用彩色陰影、不用色塊填滿。
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset 與基礎
   -------------------------------------------------------------------------- */

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

html {
  /* 頁面本身不得橫向捲動；只有表格外層可以捲。 */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--text-muted);
}

/* 全站統一的 focus 樣式：1px hairline ring，無位移（DESIGN.md Elevation） */
:where(a, button, select, input, summary, th[data-sort], tr[data-system-id]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-small);
}

/* --------------------------------------------------------------------------
   2. 版面骨架
   -------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  /* 上緣留 20px 就好。48px 是當初為「第一個元素是大標題」留的呼吸空間，
     現在最上面是一列 40px 高的控制項，同樣的留白就變成一大塊空白。 */
  padding: var(--spacing-20) var(--spacing-24) var(--spacing-48);
}

/* 沒有 JS 時整條工具列會隱藏，第一個元素又變回大標題，那時候才需要原本的留白。 */
.page:has(.toolbar[hidden]) {
  padding-top: var(--spacing-48);
}

.section {
  margin-top: var(--section-gap);
  min-width: 0;
}

.section:first-of-type {
  margin-top: 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  flex-wrap: wrap;
}

.section__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.section__note {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  max-width: 68ch;
}

.eyebrow {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   3. 卡片（DESIGN.md Card）
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
}

/* 只留底色，不要外框。陰影也一併拿掉——--shadow-subtle 的第一段是
   0 0 0 1px 的 ring，留著等於邊框還在，只是換了畫法。 */
.card--plain {
  border: none;
  box-shadow: none;
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  border-bottom: var(--border-hairline);
  flex-wrap: wrap;
}

.site-header__title {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* OpenMyMy 是字標，不是標題的一部分——用比品名重一階的字重把它獨立出來 */
.site-header__brand {
  font-weight: var(--font-weight-bold);
}

.site-header__tagline {
  margin-top: var(--spacing-8);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--text-muted);
  max-width: 60ch;
}

.site-header__aside {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-16);
}

.sources {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Toolbar — 語言與深淺，頁面最上方獨立一行靠右。
   刻意放在 <header> 之外：它們是控制項，不是標題區的內容；跟來源日期擠在
   同一行會讓右上角同時出現「資料」與「按鈕」兩種性質的東西。
   --------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.toolbar[hidden] {
  display: none;
}

/* 語言：兩個選項都露出來，中間一條分隔線，亮的那個是目前語言。
   比單顆「按了會變成什麼」的鈕好懂——不必按下去才知道現在在哪。 */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.lang-switch__option {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-feature-settings: var(--font-features);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.lang-switch__option:hover {
  color: var(--text-secondary);
}

/* 目前語言。只靠顏色區分，色覺障礙者分不出來，所以同時加粗。 */
.lang-switch__option[aria-current='true'] {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.lang-switch__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-small);
}

.lang-switch__divider {
  width: 1px;
  height: 14px;
  background: var(--color-hairline);
}

/* 深淺：圓形圖示鈕，只有淺色與深色兩態（沒有「跟隨系統」這一態）。 */
.icon-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface-muted);
  color: var(--text-primary);
  border: var(--border-hairline);
  border-radius: 50%;
  cursor: pointer;
}

.icon-button:hover {
  background: var(--surface-raised);
}

.icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 兩個圖示疊在同一個 grid 格子裡，由 [data-icon] 決定顯示哪一個，
   切換時不會有版面位移。 */
.icon {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
}

/* 圖示反映「目前是什麼」：淺色顯示太陽、深色顯示月亮。 */
.icon-button[data-icon='sun'] .icon--moon,
.icon-button[data-icon='moon'] .icon--sun {
  display: none;
}

.sources__item {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 兩個來源日期永遠分開顯示，不合併成單一 as-of。 */
.sources__value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. 控制列（DESIGN.md Input Field）
   -------------------------------------------------------------------------- */

.controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
}

.field__label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.field__control {
  width: 100%;
  height: var(--control-height);
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--surface-input-fill);
  color: var(--text-primary);
  border: 1px solid transparent;   /* rest 無邊框，focus 才有 1px ring */
  border-radius: var(--radius-inputs);
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  font-feature-settings: var(--font-features);
  appearance: none;
  -webkit-appearance: none;
}

select.field__control {
  /* 保留瀏覽器原生下拉箭頭；單色系統不另外畫彩色圖示。 */
  appearance: auto;
  -webkit-appearance: auto;
  padding-right: var(--spacing-12);
}

.field__control::placeholder {
  color: var(--text-muted);
}

.field__control:focus,
.field__control:focus-visible {
  outline: none;
  border-color: var(--color-hairline);
  box-shadow: none;
}

.field__control:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

input[type="number"].field__control {
  font-variant-numeric: tabular-nums;
}

.controls__footer {
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: var(--border-hairline);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.controls__footer strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* 選定 profile 的說明＋任務單位。跟 footer 同層級的輔助文字，但不加分隔線——
   它屬於上面的選單，不是卡片的註腳。 */
.controls__hint {
  margin-top: var(--spacing-12);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Limitations — 「先講清楚這個站不能告訴你什麼」。
   放在控制列與推薦卡之間，不藏進頁尾的摺疊區。用 hairline 框而不是卡片陰影：
   它是註記，不是又一張內容卡。
   --------------------------------------------------------------------------- */

.limits {
  margin-top: var(--spacing-16);
  padding: var(--spacing-16) var(--card-padding);
  border: var(--border-hairline);
  border-radius: var(--radius-nested);
}

.limits__title {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  /* QA：這一塊不能是整頁最安靜的區塊。標題用主色，內文維持 muted。 */
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-8);
}

.limits__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.limits__list strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 768px) {
  .limits__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   6. Badge（DESIGN.md Badge — Solid / Soft / Outline）
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-badges);
  border: 1px solid transparent;
  background: var(--color-surface-alt);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.badge--solid {
  background: var(--color-ink-soft);
  color: var(--color-surface-alt);
}

.badge--soft {
  background: var(--color-canvas);
  color: var(--color-ink-soft);
}

.badge--outline {
  background: transparent;
  border-color: var(--color-hairline);
  color: var(--text-primary);
}

/* 降權用灰階，不用 --color-ember。 */
.badge--quiet {
  background: transparent;
  border-color: var(--color-hairline);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. 推薦卡（CONTRACT.md 3.2 tpl-recommendation ／ DESIGN.md Stat Block）
   class 名由契約決定，不得更動。
   -------------------------------------------------------------------------- */

.rec-grid {
  display: grid;
  /* 五個模式是固定的（Economy / Balanced / Speed / Frontier / SLA），
     所以寬螢幕給五欄，讓一排剛好放完，不會留一張孤兒卡在第二列。 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.rec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
  background: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
  /* 整張卡是一顆按鈕（JS 補上 role/tabindex），所以要看起來能按 */
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.rec-card:hover {
  border-color: var(--color-ink-soft);
  transform: translateY(-2px);
}

/* 按下去要有回饋：彈回原位並把陰影收掉，像被壓下去 */
.rec-card:active {
  transform: translateY(0);
  box-shadow: none;
}

.rec-card:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: var(--shadow-subtle), 0 0 0 3px var(--surface-muted);
}

/* 會動的東西一律尊重系統的減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  .rec-card {
    transition: none;
  }

  .rec-card:hover {
    transform: none;
  }
}

.rec-card__mode {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  padding-right: var(--spacing-48);   /* 讓出右上角 tier badge 的位置 */
}

.rec-card__model {
  /* 30px 在五欄卡片裡會把「Claude Sonnet 4.6 (Non-reasoning, Low Effort)」折成四行，
     每張卡的高度都不一樣。降到 18px 讓幾乎所有名稱兩行內放得下，並固定保留兩行高度
     ——短名稱不會把下面的內容往上拉，五張卡的組織名與數字才會落在同一條線上。 */
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  min-height: calc(var(--text-subheading) * var(--leading-subheading) * 2);
  /* 極少數超長名稱（239 個裡只有一個 45 字）仍會超過兩行，截斷保住對齊，
     完整名稱放在 title 與 Why 面板。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.rec-card__org {
  margin-top: calc(-1 * var(--spacing-8));
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.rec-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12) var(--spacing-8);
  padding-top: var(--spacing-4);
  /* 模型名稱長度不一（「Claude Fable 5 (with fallback)」會折三行），若讓內容自然
     由上往下流，五張卡的數字就會落在不同高度。把數字以下的區塊推到卡片底部對齊，
     讀者掃視同一列數字時才不會上下跳。 */
  margin-top: auto;
}

.rec-card__metrics > div {
  min-width: 0;
}

.rec-card__label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  /* 四個標籤現在都是一個字（ECST / ETST / SUCCESS / CAPABILITY），一行放得下，
     所以不再預留兩行——之前那兩行的空高正是標籤與數字之間那段多餘的間距。

     五欄版面下每格只有 92px，而 CAPABILITY 加上字距後剛好也是 92px，一點餘裕
     都沒有。nowrap 保證不折行（折了同一列的數字就上下錯開），字距收到 0.4px
     擠出一點空間，ellipsis 則是 Geist 沒載到、退回系統字體變寬時的最後防線——
     寧可截字，也不要溢出去疊到隔壁欄。 */
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-card__metrics dd {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.rec-card__bar {
  height: var(--bar-height);
  border-radius: var(--radius-small);
  background: var(--color-canvas);
  overflow: hidden;
}

.rec-card__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-small);
  background: var(--color-ink-soft);
}

.rec-card__evidence {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin-top: auto;
}

.rec-card__tier {
  position: absolute;
  top: var(--card-padding);
  right: var(--card-padding);
}

/* 推薦卡空狀態（JS 尚未填入時的佔位說明） */
.rec-grid__empty {
  grid-column: 1 / -1;
  padding: var(--spacing-24);
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius-cards);
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Frontier 圖表容器
   JS 會在 #frontier-chart 注入 <svg>，這裡只負責尺寸與比例。
   -------------------------------------------------------------------------- */

.chart {
  /* tooltip 是絕對定位的子元素，座標以這個容器為基準 */
  position: relative;
  width: 100%;
  aspect-ratio: var(--chart-aspect);
  min-height: var(--chart-min-height);
  background: var(--surface-muted);
  border: var(--border-hairline);
  border-radius: var(--radius-nested);
  overflow: hidden;
}

.chart > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-16);
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: var(--border-hairline);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
}

/* 圖例的小圓必須是圖上四階的縮小版，同一個東西不能兩種長相。
   基底（不帶修飾）= F3：空心圈，跟圖上同色（ink-soft）。 */
.chart-legend__swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--color-ink-soft);
  background: transparent;
}

/* F1：實心圓 */
.chart-legend__swatch--solid {
  background: var(--color-ink-soft);
}

/* D：淡色的空心圈，跟圖上同一個中灰 */
.chart-legend__swatch--muted {
  border-color: var(--color-mid-gray);
}

/* F2：空心圈中間一個小點。圖上是兩個同心圓，圖例用 inset 陰影做出同樣的樣子：
   12px 外圈、1px 邊框、inset 4px 留白 → 中心點直徑約 2px，對上 CORE_RATIO = 0.22。 */
.chart-legend__swatch--core {
  box-shadow: inset 0 0 0 4px var(--surface-card);
  background: var(--color-ink-soft);
}

/* 模式推薦：跟圖上一樣的實心圓徽章，中間鏤空星號。圖上的徽章比資料點大一圈，
   圖例也跟著比其他四個色塊大一號。星號字元用底色上色，等於從圓裡挖掉一個星形。 */
.chart-legend__swatch--ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: var(--color-ink);
}

.chart-legend__swatch--ring::after {
  content: '★';
  color: var(--surface-card);
  font-size: 10px;
  line-height: 1;
}

/* 圖表內的 SVG 元素也只走 token（JS 產生的節點沿用這些 class） */
.chart .axis line,
.chart .axis path,
.chart .grid line {
  stroke: var(--color-hairline);
  stroke-width: 1;
  fill: none;
}

.chart .axis text,
.chart .chart-label {
  fill: var(--color-mid-gray);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
}

.chart .dot {
  fill: var(--color-paper);
  stroke: var(--color-mid-gray);
  stroke-width: 1;
  cursor: pointer;
}

/* 四階：實心 → 圈中有點 → 空圈 → 淡圈。不靠顏色——#e7000b 只給 destructive，
   被支配不是 destructive（AGENTS.md 第 4 條）。
   以前 F2 與 F3 只差筆畫顏色（ink-soft 對 mid-gray），深色底上分不出來，
   等於四個分層只看得出三階。中心點那顆是 .chart-dot-core，畫在另一層。 */
.chart .dot--f1 {
  fill: var(--color-ink-soft);
  stroke: var(--color-ink);
}

.chart .dot--f2 {
  fill: var(--surface-card);
  stroke: var(--color-ink-soft);
  stroke-width: 1.25;
}

/* F3 跟 F2 同色，差別只在有沒有中心那顆點——四階是「實心／圈加點／圈／淡圈」，
   淡的那一階留給 D。以前 F3 用 mid-gray，結果圖例畫深、圖上畫淡，兩邊對不起來。 */
.chart .dot--f3 {
  fill: var(--surface-card);
  stroke: var(--color-ink-soft);
}

/* 最淡的一階：淡色的圈。不能再淡了——以前用 --color-hairline，在 #fafafa 的
   卡片上對比只有 1.0:1，跟格線同色，勾起來等於沒勾，而「想看全部就勾起來」
   正是預設隱藏它們的正當性所在。--color-mid-gray 是 6.0:1，是刻度上唯一
   同時「比 ink-soft 明顯淡」又過得了 WCAG 1.4.11 三比一的值（這些 <circle>
   帶 role="button"，算可操作元件）。 */
.chart .dot--d {
  fill: none;
  stroke: var(--color-mid-gray);
}

/* F2 的中心點。裝飾用，滑鼠事件一律讓給底下那顆真正的資料點。 */
.chart .chart-dot-core {
  fill: var(--color-ink-soft);
  stroke: none;
  pointer-events: none;
}

.chart .dot.is-selected {
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.chart .dot:focus-visible {
  outline: none;
  stroke: var(--color-ink);
  stroke-width: 2.5;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: var(--chart-min-height);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-body);
}

/* 前緣連線：淡色的點點線。它是三維前緣（能力、成本、時間）壓到二維的投影，
   會出現「多花錢能力反而低」的倒退段——所以只能是背景裡的視覺輔助，
   不能畫成一條看起來可以照著讀的實線。顏色壓到中灰、線型用圓點。 */
.chart .frontier-line {
  fill: none;
  stroke: var(--color-mid-gray);
  stroke-width: 1;
  stroke-dasharray: 0.1 5;
  stroke-linecap: round;
}

/* F1 點旁邊的模型名稱。刻度字級 12px 太大會撞在一起，所以這裡小一階。
   pointer-events 關掉，否則壓在點上的字會吃掉 hover 與點擊。 */
.chart .chart-dot-label {
  fill: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  pointer-events: none;
}

/* 五個模式的推薦標記：12px 實心圓徽章、中間鏤空星號 ＋ 模式名稱，疊在資料點上層。
   星號用底色填，視覺上就是從實心圓挖掉一個星形。 */
.chart .chart-pick-badge {
  fill: var(--color-ink);
  pointer-events: none;
}

.chart .chart-pick-star {
  fill: var(--surface-card);
  pointer-events: none;
}

.chart .chart-pick-label {
  fill: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

/* 自製 tooltip。取代原生 <title>：那個要等一秒才浮出來、樣式無法控制，
   手機上更是完全看不到。深淺色靠 token 自動對應，不寫深色分支。 */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  max-width: 260px;
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-nested);
  box-shadow: var(--shadow-subtle);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  /* 跟著游標走，絕不能自己吃掉滑鼠事件 */
  pointer-events: none;
}

.chart-tooltip.is-visible {
  display: block;
}

.chart-tooltip__model {
  display: block;
  margin-bottom: var(--spacing-4);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.chart-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.chart-tooltip__label {
  color: var(--text-muted);
}

.chart-tooltip__value {
  color: var(--text-primary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. 表格（CONTRACT.md 3.2 tpl-row、3.3 排序）
   -------------------------------------------------------------------------- */

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-cards);
}

.data-table {
  width: 100%;
  min-width: var(--table-min-width);
  border-collapse: collapse;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.data-table caption {
  text-align: left;
  padding: var(--card-padding) var(--card-padding) var(--spacing-12);
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.data-table th,
.data-table td {
  padding: var(--table-cell-padding-y) var(--spacing-12);
  text-align: left;
  border-bottom: var(--border-hairline);
  white-space: nowrap;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--surface-muted);
}

.data-table .num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table .col-model {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: normal;
  min-width: 220px;
}

.data-table .col-org {
  color: var(--text-muted);
}

/* 表格上方的「只看合格系統」勾選框。 */
.table-filter {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.table-filter input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  /* accent-color 讓原生勾選框跟著主題走，不必自己重畫一個 */
  accent-color: var(--color-ink);
  cursor: pointer;
}

.table-filter label {
  cursor: pointer;
}

/* 「圖上未顯示 N 個」——附註語氣，不跟勾選框本身搶注意力 */
.table-filter__note {
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.table-filter input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 展開更多。鈕本身沿用 toolbar 那顆圓形圖示鈕的樣式。 */
/* 1fr auto 1fr：兩側的計數文字長度不同，用 flex 會把鈕推歪，grid 才能讓鈕
   永遠落在正中間。兩段文字各自往中間靠，讀起來是「顯示 1–20 ⌄ 共 53 筆」。 */
.table-more[hidden] {
  display: none;
}

.table-more {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-16);
  /* card--flush 沒有內距，所以上下留白由這裡給，否則鈕會貼在卡片邊緣 */
  padding: var(--spacing-16) 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.table-more__range {
  text-align: right;
}

.table-more__total {
  text-align: left;
}

/* 全部展開之後鈕與範圍都不見了，只剩總數。改成單欄置中，
   不然那句話會留在右半欄，看起來像沒對齊。 */
.table-more.is-complete {
  grid-template-columns: 1fr;
}

.table-more.is-complete .table-more__total {
  text-align: center;
}

/* .icon-button 的 display: grid 權重是 (0,1,0)，蓋得掉 UA 的 [hidden]，
   所以這裡要 (0,2,0) 才擋得住。 */
.table-more [hidden] {
  display: none;
}

/* 全部被濾掉時的說明列。
   選擇器必須寫成 `.data-table td.table-empty`：`.data-table td` 的權重是 (0,1,1)，
   單靠 .table-empty 的 (0,1,0) 蓋不掉它的 padding 與 text-align，而且那條規則的
   white-space: nowrap 會把整句說明排成一長行，逼使用者橫向捲才看得完。 */
.data-table td.table-empty {
  padding: var(--spacing-24);
  text-align: center;
  white-space: normal;
  color: var(--text-muted);
}

/* 排序：CSS 只依 aria-sort 做提示，不自行維護狀態。 */
th[data-sort] {
  cursor: pointer;
  user-select: none;
}

th[data-sort]::after {
  content: "";
  display: inline-block;
  width: 1ch;
  margin-left: var(--spacing-4);
  color: var(--text-muted);
}

th[data-sort][aria-sort="none"]::after {
  content: "\2195";          /* ↕ */
  opacity: 0.35;
}

th[data-sort][aria-sort="ascending"]::after {
  content: "\2191";          /* ↑ */
  opacity: 1;
}

th[data-sort][aria-sort="descending"]::after {
  content: "\2193";          /* ↓ */
  opacity: 1;
}

th[data-sort]:where([aria-sort="ascending"], [aria-sort="descending"]) {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   10. 狀態 class（CONTRACT.md 3.4）
   -------------------------------------------------------------------------- */

/* 被穩健支配（tier D）：灰階降權，絕不用 --color-ember。
   降權只靠改成 muted 色，不再疊 opacity。muted 本身對背景是 4.7:1（淺色）／
   6.7:1（深色），都過 AA；再乘 0.55 不透明度會掉到 2.0:1／2.9:1，兩個主題
   都不合格。而這一層在多數 task profile 下佔了表格七成的列，等於大半張表都
   讀不清楚。muted 與 primary 的落差已經足夠表達「這些被比下去了」。 */
.is-dominated {
  color: var(--text-muted);
}

.is-dominated .col-model {
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
}

/* 在穩健前緣上（tier F1）：左側一條 hairline 標記加深字重，不加色。 */
.is-frontier .col-model {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 2px 0 0 0 var(--color-ink-soft);
}

.rec-card.is-frontier {
  border-color: var(--color-ink-soft);
}

/* 使用者點選 */
.is-selected {
  background: var(--surface-muted);
}

.data-table tbody tr.is-selected td {
  border-bottom-color: var(--color-ink-soft);
}

/* 選中的卡：粗一階的框 ＋ 左緣一道實心色條，跟 hover 的細框分得開。
   只靠 border-color 的話，hover 一張卡就跟已選中的那張長得一樣。 */
.rec-card.is-selected {
  border-color: var(--color-ink);
  box-shadow: var(--shadow-subtle), inset 3px 0 0 0 var(--color-ink);
}

.rec-card.is-selected:hover {
  transform: none;
}

/* 未通過相容性篩選 */
.is-hidden {
  display: none !important;
}

/* 載入中：掛在 <body>，內容區降不透明度並停用互動 */
body.is-loading main {
  opacity: var(--opacity-loading);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Why 面板與方法論
   -------------------------------------------------------------------------- */

/* 刻意不設 min-height。原本有一行 96px，用意是先撐開高度讓選取系統時版面
   不要跳——但填滿後實際是 280px，96px 擋不住那個跳動，只是讓空狀態底下多出
   76px 的空白。要真的防跳動得撐到 280px，那反而更難看。 */
.why-panel {
  color: var(--text-muted);
}

.why-panel p + p {
  margin-top: var(--spacing-12);
}

.why-panel strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* 逐行浮現。每次換選 renderWhy 都會重建整個 <dl>，動畫因此自然重播——
   不需要清除 class 或設計時器。--i 由 JS 逐行寫入，只用來排延遲。 */
.why-list > div {
  animation: why-line-in 260ms ease-out both;
  animation-delay: calc(var(--i, 0) * 75ms);
}

.why-list > div + div {
  margin-top: var(--spacing-12);
}

.why-list dt {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

@keyframes why-line-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 減少動態：內容照樣逐行出現才看得出換過，但不位移、時間也縮短 */
@media (prefers-reduced-motion: reduce) {
  .why-list > div {
    animation-duration: 1ms;
    animation-delay: 0s;
  }
}

.methodology {
  margin-top: var(--spacing-16);
}

.methodology__title {
  margin-bottom: var(--spacing-12);
}

/* 跟 Why 面板一樣：只留底色，不要外框與那圈 1px 的陰影 ring。 */
.methodology details {
  background: var(--surface-raised);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.methodology details + details {
  margin-top: var(--spacing-12);
}

.methodology summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.methodology summary::-webkit-details-marker {
  display: none;
}

.methodology summary::after {
  content: "+";
  float: right;
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
}

.methodology details[open] summary::after {
  content: "\2212";          /* − */
}

.methodology details[open] summary {
  margin-bottom: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  border-bottom: var(--border-hairline);
}

.methodology p {
  color: var(--text-muted);
  max-width: 76ch;
}

.methodology p + p {
  margin-top: var(--spacing-12);
}

.methodology code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-caption);
  background: var(--color-canvas);
  border-radius: var(--radius-small);
  padding: 1px var(--spacing-4);
  color: var(--text-secondary);
}

.grade-list {
  margin-top: var(--spacing-12);
  display: grid;
  gap: var(--spacing-8);
}

.grade-list li {
  display: flex;
  gap: var(--spacing-12);
  align-items: baseline;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--section-gap-lg);
  padding-top: var(--spacing-24);
  border-top: var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12) var(--spacing-24);
  justify-content: space-between;
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* --------------------------------------------------------------------------
   13. 響應式：1280 / 1024 / 768 / 480
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .page {
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }

  /* 五欄在這個寬度以下會把模型名擠成三行，退成三欄 */
  .rec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .rec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-header__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }
}

@media (max-width: 768px) {
  .page {
    padding: var(--spacing-12) var(--spacing-16) var(--spacing-48);
  }

  .page:has(.toolbar[hidden]) {
    padding-top: var(--spacing-24);
  }

  .section {
    margin-top: var(--spacing-48);
  }

  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header {
    align-items: flex-start;
  }

  .sources {
    text-align: left;
  }

  .chart {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .rec-grid,
  .controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-header__title {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }

  /* 窄螢幕是單欄，卡片寬度夠，不需要再為標題另設字級——
     沿用 18px 兩行的規則即可。 */

  .chart {
    aspect-ratio: 1 / 1;
    min-height: 260px;
  }
}

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