/* M10 的共用樣式（◇4.4 段 1，裁決 485(3)；◇4.4 段 2b 照 10-10 的樣張與參考圖重做，裁決 495、496）。
   規則：只用變數（每一份風格檔宣告同一組）；零色值字面、零外部資源；字型只在 fonts.css；display:none 只給市場篩選；漲跌的對映在這裡。
   一份 HTML、兩種版型（[data-layout]）：咖啡館（relaxed）＝ 頂欄 ＋ 牛皮紙的資料時點帶；專業（compact）＝ 可收合的側欄 ＋ 一排 KPI 卡。
   排序表：桌機每一列兩行（上行第 1 級、下行第 2 級與可展開的評分面板），手機每一列一張卡片——只換排法，不換主次與內容。
   網頁字型：標題（h1、h2、h3、.brand）用 var(--font-heading)；其他一律繼承 html 的 var(--font-body)、數字 var(--font-numeric)
   （fonts.json 宣告的元素；契約 check_fonts 兩端互比）。 */

/* ================================================================ 基礎 */
:root { --gutter: clamp(1rem, 3.2vw, 2rem); --nav-w: 16rem; --nav-w-collapsed: 4.5rem; --lane: 1.45em; --nav-motion: 220ms; }
:root[data-updown="tw"] { --color-up: var(--tone-red); --color-down: var(--tone-green); --color-up-bg: var(--tone-red-bg); --color-down-bg: var(--tone-green-bg); }
:root[data-updown="us"] { --color-up: var(--tone-green); --color-down: var(--tone-red); --color-up-bg: var(--tone-green-bg); --color-down-bg: var(--tone-red-bg); }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-border-strong) transparent;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; background: var(--color-bg); font-size: var(--text-md); }
::selection { background: var(--select-bg); color: var(--color-ink); }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight); color: var(--color-ink); text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-2); }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
button { font: inherit; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-code] { overflow-wrap: anywhere; }
.num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.is-missing { color: var(--color-ink-muted); }
.why { margin-inline-start: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-muted); }
[data-dir="up"] { color: var(--color-up); }
[data-dir="down"] { color: var(--color-down); }

/* ================================================================ 頁首：站名・導覽・風格與設定 */
.skip-link { position: absolute; inset-inline-start: var(--space-2); top: -6rem; z-index: 60; padding: var(--space-2) var(--space-3);
  background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-2); }
.topbar { background: var(--shell-bg); color: var(--shell-ink); border-bottom: var(--border-width) solid var(--shell-line); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); max-width: var(--content-width);
  min-height: 4rem; margin: 0 auto; padding: var(--space-2) var(--gutter); }
.brand { flex: none; margin: 0; font-family: var(--font-heading); font-weight: var(--weight-display); font-size: var(--text-lg);
  letter-spacing: 0.02em; line-height: var(--leading-tight); }
.brand a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--shell-ink); text-decoration: none; }
/* 商標（畫出來的 inline SVG、aria-hidden）：專業是強調色的磚與白的記號；咖啡館的深色頂欄上是奶油色的磚與濃縮咖啡色的記號 */
.brand-mark { display: inline-flex; flex: none; }
.logo { display: block; }
.logo-tile { fill: var(--color-accent); }
.logo-ink { fill: none; stroke: var(--color-on-accent); stroke-linecap: round; }
.logo-fill { fill: var(--color-on-accent); }
.logo-soft { fill: var(--color-on-accent); opacity: 0.5; }
.topbar .logo-tile { fill: var(--shell-ink); }
.topbar .logo-ink { stroke: var(--shell-bg); }
.topbar .logo-fill { fill: var(--shell-bg); }
.topbar .logo-soft { fill: var(--color-accent); opacity: 0.6; }
[data-layout="compact"] .topbar .logo-tile { fill: var(--color-accent); }
[data-layout="compact"] .topbar .logo-ink { stroke: var(--color-on-accent); }
[data-layout="compact"] .topbar .logo-fill { fill: var(--color-on-accent); }
[data-layout="compact"] .topbar .logo-soft { fill: var(--color-on-accent); opacity: 0.5; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); }
.site-nav .nav-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--shell-muted); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: var(--text-sm); }
.site-nav .nav-link:hover { color: var(--shell-ink); }
.site-nav .nav-link[aria-current="page"], .site-nav .nav-link.is-current { color: var(--shell-ink); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 0.6em; }
summary.nav-link { list-style: none; }
summary.nav-link::marker { content: ""; }
.nav-group[open] > summary .icon-caret { transform: rotate(180deg); }
.nav-group-panel { padding: var(--space-2) var(--space-2) var(--space-3); }
.nav-market { margin: var(--space-2) var(--space-2) var(--space-1); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-ink-muted); }
.nav-sublist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0 var(--space-2); }
.nav-ticker { display: flex; align-items: baseline; gap: var(--space-2); min-height: 40px; padding: var(--space-2); border-radius: var(--radius-sm);
  color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); }
.nav-ticker:hover { background: var(--hover-bg); }
.nav-ticker[aria-current="page"] { background: var(--nav-active-bg); color: var(--color-accent); font-weight: var(--weight-strong); }
.nav-code { font-family: var(--font-numeric); font-size: var(--text-xs); color: var(--color-ink-muted); }
.nav-unrated { margin-inline-start: auto; padding: 0 var(--space-2); font-size: var(--text-xs); color: var(--color-flag-warn);
  background: var(--chip-warn-bg); border-radius: 999px; }
/* 沒有 JavaScript：「個股」整片展開在頂欄下面（深色的頂欄裡，用紙面的底） */
.nav-tickers .nav-group-panel { background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-md); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.menu { position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3) 0 var(--space-4);
  border: var(--border-width) solid var(--shell-muted); border-radius: 999px; color: var(--shell-ink); cursor: pointer; user-select: none;
  font-size: var(--text-sm); }
.menu summary::marker { content: ""; }
.menu summary:hover { border-color: var(--shell-ink); }
.menu[open] summary .icon-caret { transform: rotate(180deg); }
.menu-panel { position: absolute; z-index: 25; inset-inline-end: 0; top: calc(100% + var(--space-2)); width: 16rem; padding: var(--space-2);
  background: var(--color-surface); color: var(--color-ink); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); }
.menu-title { margin: var(--space-1) var(--space-2) var(--space-2); font-size: var(--text-xs); color: var(--color-ink-muted); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.menu-panel button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); text-align: start; cursor: pointer; }
.menu-panel button:hover { background: var(--hover-bg); }
.menu-panel button[aria-pressed="true"] { background: var(--nav-active-bg); color: var(--color-accent); font-weight: var(--weight-strong); }
.swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: var(--border-width) solid var(--color-border-strong); }
.swatch + .swatch { margin-inline-start: -0.45rem; }
/* 風格選單：目前這個風格的三個代表色（風格檔的 --swatch-1～3 ＝ themes.yaml 的色票，常駐測試兩端互比） */
.menu-swatches { display: inline-flex; }
.menu-swatches .swatch { width: 0.95rem; height: 0.95rem; border-color: var(--shell-muted); }
.sw-1 { background: var(--swatch-1); }
.sw-2 { background: var(--swatch-2); }
.sw-3 { background: var(--swatch-3); }
.icon-menu circle { fill: var(--shell-bg); }
.tone-up-tw { background: linear-gradient(90deg, var(--tone-red) 50%, var(--tone-green) 50%); }
.tone-up-us { background: linear-gradient(90deg, var(--tone-green) 50%, var(--tone-red) 50%); }

.nav-toggle, .nav-collapse { visibility: hidden; position: absolute; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3); border: var(--border-width) solid var(--shell-muted); border-radius: 999px;
  background: transparent; color: var(--shell-ink); cursor: pointer; font-size: var(--text-sm); }
.nav-toggle-bars { width: 1rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

/* 咖啡館（relaxed）的頂欄：導覽的圖示不出現；「個股」在有 JavaScript 時是下拉面板 */
@media (min-width: 48rem) {
  [data-layout="relaxed"] .site-nav .icon-nav { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-js="on"][data-layout="relaxed"] .nav-tickers { position: relative; }
  [data-js="on"][data-layout="relaxed"] .nav-group-panel { position: absolute; z-index: 25; inset-inline-start: 0; top: calc(100% + var(--space-2));
    width: min(44rem, calc(100vw - 2 * var(--gutter))); border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
}

/* ================================================================ 資料時點帶（第 0 級）：咖啡館的牛皮紙帶與章；專業的一排 KPI 卡 */
.tier0-band { background: var(--band-bg); border-bottom: var(--border-width) solid var(--color-line); }
.band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); max-width: var(--content-width);
  margin: 0 auto; padding: var(--space-3) var(--gutter); font-size: var(--text-sm); }
.kpi { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0; }
.kpi-label { color: var(--color-ink-muted); }
.kpi-value { color: var(--color-ink); }
.kpi-note { font-size: var(--text-xs); color: var(--color-ink-muted); }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.kpi-icon .icon { width: 1rem; height: 1rem; }
[data-layout="relaxed"] .kpi-icon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* 咖啡館：資料時點是一枚斜蓋的章；輪次標示是一顆提醒色的小藥丸 */
[data-layout="relaxed"] .kpi-time { flex-direction: column; align-items: center; gap: 0; padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-accent); transform: rotate(var(--stamp-rotate)); }
[data-layout="relaxed"] .kpi-time .kpi-label { font-size: var(--text-xs); letter-spacing: 0.24em; color: var(--color-accent); }
[data-layout="relaxed"] .kpi-time .kpi-value { color: var(--color-accent); font-weight: var(--weight-strong); letter-spacing: 0.06em; }
[data-layout="relaxed"] .kpi-time .kpi-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-layout="relaxed"] .kpi-round { padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-flag-warn);
  border-radius: 999px; background: var(--chip-warn-bg); color: var(--color-flag-warn); }
[data-layout="relaxed"] .kpi-round .kpi-label, [data-layout="relaxed"] .kpi-round .kpi-value,
[data-layout="relaxed"] .kpi-round .kpi-note { color: var(--color-flag-warn); font-size: var(--text-xs); }
[data-layout="relaxed"] .kpi-round .kpi-icon { position: static; width: auto; height: auto; clip-path: none; }
[data-layout="relaxed"] .kpi-round a { color: var(--color-flag-warn); font-weight: var(--weight-strong); }
[data-layout="relaxed"] .kpi-round .code { color: var(--color-flag-warn); }
[data-layout="relaxed"] .kpi-pipe { margin-inline-start: auto; }
[data-layout="relaxed"] .kpi-review .kpi-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* 免責聲明（第 0 級，永遠看得到）：帶的最後一行，小字 */
.band-disclaimer { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--color-ink-muted); }
/* 專業：一排 KPI 卡（白色圓角、細框、淡色底的圖示） */
[data-layout="compact"] .tier0-band { border-bottom: 0; }
/* 兩欄（平板與手機）／四欄（桌機）：第一版 auto-fit——帶上的免責聲明橫跨整個格線（1 / -1），auto-fit 多出來的空欄就收不掉，
   1280 寬、側欄收合時四張卡只佔五分之四（確認點 2 之後在使用者的視窗截到） */
[data-layout="compact"] .band-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
  align-items: stretch; padding-top: var(--space-5); padding-bottom: 0; }
@media (min-width: 64rem) { [data-layout="compact"] .band-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 卡的內容一律靠上（第一版置中：說明長短不同 ⇒ 四張卡的數字不在同一條基線——finish reviewer 第一輪第 5 條）；數字比標籤大一級以上。
   圖示在右上角、數字佔整張卡的寬（數字放大之後，圖示在左邊一欄會把「2026-10-08 08:53 UTC」擠出卡外） */
[data-layout="compact"] .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
  grid-template-areas: "label icon" "value value" "note note";
  align-items: start; gap: 0 var(--space-3); padding: var(--space-4); background: var(--color-surface);
  border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
[data-layout="compact"] .kpi-icon { grid-area: icon; align-self: start; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }
[data-layout="compact"] .kpi-icon .icon { width: 1.2rem; height: 1.2rem; }
[data-layout="compact"] .kpi-label { grid-area: label; align-self: center; font-size: var(--text-xs); }
[data-layout="compact"] .kpi-value { grid-area: value; margin: 2px 0; font-size: var(--text-xl); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
[data-layout="compact"] .band-disclaimer { grid-column: 1 / -1; }
[data-layout="compact"] .kpi-note { grid-area: note; }
[data-tint="1"] { background: var(--tint-1); color: var(--chart-1); }
[data-tint="2"] { background: var(--tint-2); color: var(--chart-2); }
[data-tint="3"] { background: var(--tint-3); color: var(--chart-3); }
[data-tint="4"] { background: var(--tint-4); color: var(--chart-4); }
[data-tint="5"] { background: var(--tint-5); color: var(--chart-5); }
[data-layout="relaxed"] [data-tint] { background: transparent; color: inherit; }

/* ================================================================ 主區與頁尾 */
main { display: block; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter) var(--space-6); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0 var(--space-2); }
.title-text { min-width: 0; }
/* 導語寬度以 em 計：ch 是「0」的寬（約半個中文字），46ch 只放得下二十三個中文字就折行 */
/* 折行平均（導語一到三行）：第一版用 pretty，方法說明與使用說明的導語照樣剩下一小截（「碼的意思。」「助，不是建議。」） */
.lead { max-width: 38em; margin: var(--space-3) 0 0; color: var(--color-ink-muted); text-wrap: balance; }
.title-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border: var(--border-width) solid var(--color-border-strong);
  border-radius: 999px; background: transparent; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--hover-bg); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); font-weight: var(--weight-strong); }
.btn-primary:hover { background: var(--color-accent); filter: brightness(0.92); }
[data-layout="compact"] .btn { border-radius: var(--radius-md); }
.site-footer { max-width: var(--content-width); margin: var(--space-6) auto 0; padding: var(--space-5) var(--gutter) var(--space-6);
  border-top: var(--border-width) solid var(--color-line); font-size: var(--text-sm); color: var(--color-ink-muted); }
.disclaimer { color: var(--color-ink); }
.version { font-size: var(--text-xs); overflow-wrap: anywhere; }

/* ================================================================ 區塊標題與市場篩選 */
.board-section, .etf-section { margin-top: var(--space-5); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.section-note { margin: 0 0 0 auto; font-size: var(--text-sm); color: var(--color-ink-muted); }
.filter { display: inline-flex; padding: 3px; gap: 2px; border: var(--border-width) solid var(--color-border-strong); border-radius: 999px;
  background: var(--color-surface); }
.filter button { min-height: 40px; min-width: 3.75rem; padding: 0 var(--space-4); border: 0; border-radius: 999px; background: transparent;
  color: var(--color-ink); cursor: pointer; font-size: var(--text-sm); }
.filter button:hover { background: var(--hover-bg); }
.filter button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
[data-layout="compact"] .filter { border: 0; border-radius: var(--radius-md); background: var(--thead-bg); }
[data-layout="compact"] .filter button { border-radius: var(--radius-sm); }
[data-layout="compact"] .filter button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); font-weight: var(--weight-strong);
  box-shadow: var(--shadow-card); }

/* ================================================================ 排序表：一份 HTML；桌機每一列兩行、手機每一列一張卡片 */
/* 版面由表自己的寬度決定（container query）：專業的側欄占掉寬度時，表照它真正分到的寬度換排法，不撐出橫向捲動 */
.table-wrap { overflow-x: auto; container-type: inline-size; }
table.board, table.board thead, table.board tbody { display: block; width: 100%; }
table.board { border-collapse: collapse; background: var(--color-surface); border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
table.board tr { display: grid; column-gap: var(--space-3); row-gap: 0; align-items: center; }
:where(table.board) :where(th, td) { display: block; padding: 0; text-align: start; font-weight: var(--weight-regular); min-width: 0; }
/* 第 2 級那一格的內容（旗標、未評的原因、論點、評分面板）各自排進列的格線；DOM 的順序與 data-tier 不變 */
table.board td.c-thesis { display: contents; }
table.board tbody tr { position: relative; padding: var(--row-pad) var(--space-4); border-bottom: var(--border-width) solid var(--color-line); }
table.board tbody tr:last-child { border-bottom: 0; }
[data-layout="relaxed"] table.board { --row-pad: var(--space-3); }
[data-layout="compact"] table.board { --row-pad: var(--space-3); }

/* 窄（預設）：每一列一張卡片；表頭只給螢幕閱讀器 */
table.board thead tr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
table.board tbody tr { grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-areas: "rank name score" "rank price upside" ". range range" ". flags flags" ". unrated unrated" ". thesis thesis" ". panel panel"; }
table.board .c-rank { grid-area: rank; align-self: start; }
table.board .c-name { grid-area: name; }
table.board .c-composite { grid-area: score; align-items: flex-end; }
table.board .c-price { grid-area: price; justify-self: start; text-align: start; margin-top: var(--space-2); }
table.board .c-upside { grid-area: upside; margin-top: var(--space-2); }
table.board .c-range { grid-area: range; margin-top: var(--space-2); }
table.board .row-flags { grid-area: flags; margin-top: var(--space-2); }
table.board .c-thesis .unrated { grid-area: unrated; margin-top: var(--space-2); }
table.board .c-thesis .thesis { grid-area: thesis; margin-top: var(--space-2); display: block; }
table.board .c-thesis .thesis .pair { display: block; margin-bottom: 2px; }
table.board .c-thesis .thesis dt, table.board .c-thesis .thesis dd { display: inline; }
table.board .c-thesis .thesis dt { margin-inline-end: var(--space-2); }
table.board .c-thesis .score-panel { grid-area: panel; }

/* 寬：每一列兩行——上一行第 1 級與旗標，下面是論點、新鮮度與評分面板；列尾一個「進入」的角（CSS 畫的，不是字元或 svg） */
/* 54rem ＝ 各欄最小寬（48rem）＋ 七個欄距（3.5rem）＋ 左右內距（2rem）；區間條那一欄 16rem ＝ rangebar.RENDER_PX（標籤的防重疊照它算）。
   ★ 確認點 2（使用者 2026-10-16）：使用者的視窗約 1280×664（2560×1600、200%）——專業側欄展開時表只剩約 921 px，
   第一版的門檻 59rem（944 px）讓整張表退成手機卡片（一檔一張、一頁一檔多）。各欄最小寬與欄距收緊，門檻降到 54rem（864 px） */
@container (min-width: 54rem) {
  table.board thead tr, table.board tbody tr { column-gap: var(--space-2);
    grid-template-columns: 2.75rem minmax(4rem, 1fr) 8.5rem 6rem minmax(16rem, 1.8fr) 5.5rem minmax(4.5rem, 0.9fr) 0.75rem;
    grid-template-areas: "rank name score price range upside flags go" ". unrated unrated unrated unrated unrated unrated ."
      ". thesis thesis thesis thesis thesis thesis ." ". panel panel panel panel panel panel ."; }
  table.board thead tr { position: relative; width: auto; height: auto; overflow: visible; clip-path: none; align-items: end;
    padding: var(--space-2) var(--space-4); background: var(--thead-bg); border-bottom: var(--border-width) solid var(--color-border-strong);
    font-size: var(--text-xs); color: var(--color-ink-muted); }
  [data-layout="compact"] table.board thead tr { border-bottom-color: var(--color-line); }
  table.board .h-rank { grid-area: rank; }
  table.board .h-name { grid-area: name; }
  table.board .h-composite { grid-area: score; }
  table.board .h-price { grid-area: price; justify-self: end; text-align: end; }
  table.board .h-range { grid-area: range; }
  table.board th[data-col="upside_raw"] { grid-area: upside; justify-self: end; text-align: end; }
  table.board .h-thesis { grid-area: flags; padding-bottom: var(--space-2); letter-spacing: 0.04em; }
  table.board .c-composite { align-items: flex-start; }
  table.board .c-composite .scorebar { width: 100%; height: auto; }
  table.board .c-price, table.board .c-upside { justify-self: end; text-align: end; margin-top: 0; }
  table.board .c-range, table.board .row-flags { margin-top: 0; }
  table.board .c-thesis .thesis { display: flex; font-size: var(--text-sm); line-height: 1.45; }
  table.board .c-thesis .thesis .pair { display: flex; margin-bottom: 0; }
  /* 列高（finish reviewer 第一輪第 1 條：方向合約「表的前四到五列」）：分數鈕 34 px（桌機；手機照舊 40 px） */
  table.board .score-toggle { min-height: 34px; }
  table.board tbody tr::after { content: ""; grid-area: go; justify-self: end; width: 0.5rem; height: 0.5rem;
    border-inline-end: 1.6px solid var(--color-border-strong); border-bottom: 1.6px solid var(--color-border-strong); transform: rotate(-45deg); }
  table.board tbody tr:hover::after { border-color: var(--color-accent); }
}
.row-flags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.row-flags .flag { margin: 0; }
button.sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; letter-spacing: 0.04em; font-size: var(--text-xs); }
button.sort:hover { color: var(--color-ink); }
.icon-sort path { stroke-width: 1.5; opacity: 0.35; }
th[aria-sort] { color: var(--color-ink); }
th[aria-sort="ascending"] .icon-sort .up, th[aria-sort="descending"] .icon-sort .down { opacity: 1; }
.th-sub { display: block; font-size: var(--text-xs); letter-spacing: 0; color: var(--color-ink-muted); line-height: 1.35; }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: var(--hover-bg); }

/* 名次 */
.c-rank { display: flex; flex-direction: column; line-height: var(--leading-tight); }
.rank-overall { font-size: var(--text-xl); font-weight: var(--weight-strong); }
.rank-overall .rank-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rank-market { font-size: var(--text-xs); color: var(--color-ink-muted); }
.rank-tag { font-size: var(--text-xs); color: var(--color-ink-muted); }
html:not([data-market="all"]) .rank-market { font-size: var(--text-xl); font-weight: var(--weight-strong); color: var(--color-ink); order: -1; }
html:not([data-market="all"]) .rank-overall { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-ink-muted); }
html:not([data-market="all"]) .rank-overall .rank-tag { position: static; width: auto; height: auto; clip-path: none; }
html[data-market="TW"] tr[data-market="US"], html[data-market="US"] tr[data-market="TW"] { display: none; }

/* 標的 */
.name-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); color: var(--color-ink); text-decoration: none; }
.name-link .name { font-size: var(--text-md); font-weight: var(--weight-strong); }
.name-link .ticker { font-family: var(--font-numeric); font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--color-ink-muted); }
.name-link:hover .name { text-decoration: underline; text-decoration-color: var(--color-border-strong); }

/* 綜合評分：一個可以按的分數（展開四個成分）＋ 底下一段共用短尺 */
.c-composite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.score-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2) 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-ink); cursor: pointer; }
.score-toggle:hover { border-color: var(--color-accent); }
.score-toggle .num, .score .num { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.score-toggle[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.score-toggle[aria-expanded="true"] .icon-caret { transform: rotate(180deg); }
.scorebar { display: block; overflow: visible; }
.sb-track { stroke: var(--color-line); stroke-width: 1; }
.sb-cap { stroke: var(--color-border-strong); stroke-width: 1; }
/* 分數照正負上紅綠（使用者 2026-10-16 確認點 2：「分數我覺得可以用紅綠沒關係」——撤回 finish reviewer 第一輪第 2 條的墨色） */
.sb-zero { stroke: var(--color-ink); stroke-width: 1; }
.sb-pos { fill: var(--color-accent); }
.sb-neg { fill: var(--color-border-strong); }

/* 現價、上漲空間 */
.c-price { text-align: end; justify-self: end; }
.c-price .num { font-size: var(--text-md); }
.ccy { margin-inline-end: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-muted); }
.c-upside { justify-self: end; text-align: end; }
.updown { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--weight-strong); }
.updown .num { font-size: var(--text-md); }
.updown[data-tone="up"] { color: var(--color-up); }
.updown[data-tone="down"] { color: var(--color-down); }
[data-layout="compact"] .updown { padding: var(--space-1) var(--space-2); border-radius: 999px; }
[data-layout="compact"] .updown[data-tone="up"] { background: var(--color-up-bg); }
[data-layout="compact"] .updown[data-tone="down"] { background: var(--color-down-bg); }
.c-upside .why, .tri-none .why { display: block; margin-inline-start: 0; }

/* 目標價區間條：條 ＋ 三個目標價的標籤（錨點 --x ＝ 記號的 x；重疊的上下錯開、靠兩端的換錨點；裁決 497(1)） */
/* min-width ＝ rangebar.RENDER_PX（16rem）：標籤的道是照條最窄畫多寬算的 */
.rb { display: block; width: 100%; max-width: 20rem; min-width: 16rem; }
.rangebar { display: block; width: 100%; height: auto; overflow: visible; }
.rb-labels { position: relative; height: var(--lane); }
.rb[data-lanes="2"] .rb-labels { height: calc(2 * var(--lane)); }
.rb[data-lanes="3"] .rb-labels { height: calc(3 * var(--lane)); }
.rb-label { position: absolute; top: 0; left: var(--x); white-space: nowrap; font-size: var(--text-xs); line-height: var(--lane); color: var(--color-ink-muted); }
.rb-label[data-anchor="middle"] { transform: translateX(-50%); }
.rb-label[data-anchor="end"] { transform: translateX(-100%); }
.rb-label[data-lane="1"] { top: var(--lane); }
.rb-label[data-lane="2"] { top: calc(2 * var(--lane)); }
.rb-label[data-mark="neutral"] { color: var(--color-ink); }
.rb-tag { margin-inline-end: 2px; color: var(--color-ink-muted); }
.rb-track { fill: var(--range-track); }
.rb-fill { fill: var(--range-fill); }
.rb-below-zero { fill: var(--range-below-zero); }
.rb-zero { stroke: var(--color-ink); stroke-width: 1; }
.rb-zero-label { fill: var(--color-ink); font-size: 10px; font-weight: var(--weight-strong); font-family: var(--font-numeric); }
.rb-low, .rb-high { stroke: var(--color-ink-muted); stroke-width: 1.5; }
.rb-neutral { stroke: var(--range-neutral); stroke-width: 2.5; stroke-linecap: round; }
.rb-price { fill: var(--range-marker); stroke: var(--color-surface); stroke-width: 2; }
.tri-none { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--text-sm); }

/* 第 2 級：一句話論點四樣、新鮮度（小字，一行裡流排；標籤加粗，樣與樣之間留白） */
.c-thesis { font-size: var(--text-sm); color: var(--color-ink); }
.thesis { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); margin: 0; }
.thesis .pair { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.thesis dt { flex: none; font-weight: var(--weight-strong); font-size: var(--text-xs); letter-spacing: 0.04em; }
.thesis dt .code { text-decoration: none; color: var(--color-ink); }
.thesis dd { margin: 0; color: var(--color-ink-muted); }
.thesis dd.fresh { font-size: var(--text-xs); }
.side + .side::before, .event + .event::before, .absent::before { content: "；"; color: var(--color-ink-muted); }
.code { color: inherit; text-decoration: underline dotted var(--color-border-strong); text-underline-offset: 0.25em; }
.code:hover { text-decoration-color: var(--color-accent); }
.flag { display: inline-block; margin-inline-end: var(--space-1); }
.flag .code { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: 999px; text-decoration: none;
  font-size: var(--text-xs); color: var(--color-flag-info); background: var(--chip-info-bg); border: var(--border-width) solid var(--color-border-strong); }
.flag[data-flag="conservative_negative"] .code, .flag[data-flag="high_accruals"] .code, .flag[data-flag="high_leverage"] .code,
.flag[data-flag="stale_report"] .code, .flag[data-flag="divergence"] .code {
  color: var(--color-flag-warn); background: var(--chip-warn-bg); border-color: var(--color-flag-warn); }
/* 「需要人工複核」24 檔裡 15 檔：在每一列淡化成小字（使用者 2026-10-15）——不加框、不上色 */
.flag[data-flag="human_review"] .code { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--color-ink-muted);
  text-decoration: underline dotted var(--color-border-strong); }
.unrated { margin: 0 0 var(--space-1); color: var(--color-flag-warn); }
.unrated .reason + .reason::before { content: "；"; }
.none { color: var(--color-ink-muted); }

/* 評分面板（原生 <details>；點列裡的分數也會開它） */
.score-panel { margin-top: var(--space-2); }
.score-panel > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; list-style: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--color-accent); }
.score-panel > summary::marker { content: ""; }
.score-panel[open] > summary .icon-caret { transform: rotate(180deg); }
/* 有 JavaScript：面板只由分數那顆鈕開關——第一版每一列另有一行「評分怎麼來的」，同一塊面板兩個開關（finish reviewer 第一輪第 1 條）；
   沒有 JavaScript：照舊用 summary 開。
   ★ 不用 display: none（build 的守衛只准市場篩選用它）：summary 是重複的開關、不是資料——visibility: hidden 讓它不佔版面、不在 Tab 順序裡；
   收起時面板沒有外距，列不多一行 */
[data-js="on"] .score-panel > summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; }
[data-js="on"] .score-panel:not([open]) { margin: 0; }
.panel-list { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2);
  background: var(--color-bg); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md); }
[data-layout="compact"] .panel-list { background: var(--color-bg); }
.comp { display: grid; grid-template-columns: 9rem 6rem minmax(12rem, 1fr) minmax(12rem, 1.4fr); align-items: center; gap: var(--space-1) var(--space-4); }
.comp .k { font-size: var(--text-xs); color: var(--color-ink-muted); }
.comp-name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-strong); }
.comp-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--chart-1); }
/* 成分的顏色只認 data-color（總覽的評分面板與個股頁的四個成分共用） */
[data-color="2"] .comp-dot { background: var(--chart-2); }
[data-color="3"] .comp-dot { background: var(--chart-3); }
[data-color="4"] .comp-dot { background: var(--chart-4); }
[data-color="1"] .sb-pos, [data-color="1"] .sb-neg { fill: var(--chart-1); }
[data-color="2"] .sb-pos, [data-color="2"] .sb-neg { fill: var(--chart-2); }
[data-color="3"] .sb-pos, [data-color="3"] .sb-neg { fill: var(--chart-3); }
[data-color="4"] .sb-pos, [data-color="4"] .sb-neg { fill: var(--chart-4); }
.deduct { padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-flag-warn);
  background: var(--chip-warn-bg); border-radius: 999px; }
.comp-score { display: inline-flex; align-items: center; gap: var(--space-2); }
.comp-score .num { min-width: 3.2em; font-weight: var(--weight-strong); }
.comp-facts { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--text-xs); }
.panel-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-ink-muted); }


/* ================================================================ ETF（基準）、資料表 */
table.etf, table.data { border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); }
table.etf { width: 100%; border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
table.etf th, table.etf td, table.data th, table.data td { padding: var(--space-2) var(--space-3); text-align: start; font-weight: var(--weight-regular);
  border-bottom: var(--border-width) solid var(--color-line); }
table.etf thead th, table.data thead th { background: var(--thead-bg); color: var(--color-ink-muted); font-size: var(--text-xs); }
/* 個股頁的資料表表頭：--data-thead-bg（咖啡館 ＝ 表頭的值；專業 ＝ 與補充旗標同一個藍，使用者 2026-10-17「與下面那個旗標一樣深的藍色」）。
   敏感度表的軸刻度照舊上漲跌色（使用者：「我還是想保留紅綠色」）——專業的值取 #F0F4FF 而不是旗標的 #EEF2FF：
   綠字在 #EEF2FF 上 4.45、差 0.05 過不了 4.5；#F0F4FF 上 4.52（audit 的 P1 是表頭灰上 4.3:1） */
main[data-ticker] table.data thead th { background: var(--data-thead-bg); }
/* 專業：表頭的標籤字用墨色（使用者 2026-10-17「我想改成黑色」；第一版是次要字色）；軸刻度的紅綠照舊。墨色 × 表頭在 EXTRA_PAIRS 裡 */
[data-layout="compact"] main[data-ticker] table.data thead th { color: var(--color-ink); }
table.etf tbody tr:last-child td { border-bottom: 0; }
.num-col { text-align: end; }
table.data .num-col { text-align: end; }

/* ================================================================ 個股簡版 */
.page-head { padding: var(--space-5) 0 var(--space-3); }
.crumb { margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.crumb a { color: var(--color-ink-muted); }
.crumb span[aria-hidden] { margin: 0 var(--space-1); }
.page-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.page-head h1 .ticker { font-family: var(--font-numeric); font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--color-ink-muted); }
/* 第 1 級：兩欄四個數（名次｜現價、綜合評分｜上漲空間），目標價區間在下面橫跨兩欄；
   桌機改成右邊一塊（第一版是四個數排一排、區間在下一列只佔半寬，右半邊空著；手機一欄到底，區間被擠到第一屏的底邊） */
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rank price" "composite upside" "range range";
  gap: var(--space-4) var(--space-5); padding: var(--space-5);
  background: var(--color-surface); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.fact { min-width: 0; }
.fact-label { margin: 0 0 var(--space-1); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-ink-muted); }
.fact-value { margin: 0; font-size: var(--text-lg); }
.fact-value.big .num { font-size: var(--text-xl); font-weight: var(--weight-strong); }
.f-rank { grid-area: rank; }
.f-price { grid-area: price; }
.f-composite { grid-area: composite; }
.f-upside { grid-area: upside; }
.f-range { grid-area: range; }
.f-range .rb { max-width: 34rem; min-width: 18rem; }
@media (min-width: 64rem) {
  .summary { grid-template-columns: minmax(9rem, 12rem) minmax(11rem, 15rem) minmax(0, 1fr);
    grid-template-areas: "rank price range" "composite upside range"; align-items: start; }
  .f-range { align-self: center; padding-inline-start: var(--space-5); border-inline-start: var(--border-width) solid var(--color-line); }
  .f-range .rb { max-width: none; }
}
/* 四個成分：分數旁邊那一條短尺，和總覽的評分面板同一把（−1～+1）、同一個顏色 */
.comp-facts-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.comp-facts-list .comp-dot { display: inline-block; margin-inline-end: var(--space-2); vertical-align: 0.05em; }
.comp-facts-list .scorebar { width: 7.5rem; height: auto; }
.strip { margin-top: var(--space-2); }
.strip .scorebar { width: 100%; max-width: 16rem; height: auto; }
.fact-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-ink-muted); }
.sep { margin: 0 var(--space-2); color: var(--color-border-strong); }
.tier2 { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); background: var(--color-surface);
  border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); }
.tier2 .thesis { margin-top: var(--space-3); }
.flags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.flags-label { margin-inline-end: var(--space-2); color: var(--color-ink-muted); }
.detail-section { margin-top: var(--space-5); padding: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg); }
.detail-section h2 { margin-bottom: var(--space-3); }
.detail-section h3 { margin: var(--space-5) 0 var(--space-2); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-5); margin: 0; }
.facts dt { color: var(--color-ink-muted); }
.facts dd { margin: 0; }
.absent-list .absent:first-of-type::before { content: none; }

/* ================================================================ 讀的頁：方法說明、圖例說明、使用說明 */
.reading { max-width: 48rem; }
.reading > .page-head, .palette-page > .page-head { padding-top: var(--space-6); }
.reading > section { margin-top: var(--space-6); }
.h-note { margin-inline-start: var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular);
  letter-spacing: 0; color: var(--color-ink-muted); }
.reading h2 { margin-bottom: var(--space-3); }
.reading h3 { margin: var(--space-4) 0 var(--space-2); }
.toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: var(--border-width) solid var(--color-line);
  border-radius: 999px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); }
.toc a:hover { border-color: var(--color-border-strong); }
[data-layout="compact"] .toc a { border-radius: var(--radius-md); }
.formula { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }
.reading ul, .reading ol { padding-inline-start: var(--space-5); }
.reading li + li { margin-top: var(--space-2); }
.weights { font-size: var(--text-sm); }
.glossary { margin: 0; display: grid; gap: var(--space-3); }
.glossary dt { font-weight: var(--weight-strong); }
.glossary dd { margin: 0; color: var(--color-ink-muted); }
.code-id { margin-inline-start: var(--space-2); font-family: var(--font-numeric); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-ink-muted); }
.fonts-credit { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-line);
  font-size: var(--text-xs); color: var(--color-ink-muted); }

/* 圖例說明 */
.legend-page { max-width: var(--content-width); }
.board-sample { margin-top: var(--space-2); }
.anatomy-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-3) var(--space-6); margin-top: var(--space-4);
  padding: 0; list-style: none; counter-reset: key; }
.anatomy-keys li { position: relative; padding-inline-start: 2.25rem; margin: 0; }
.anatomy-keys li::before { counter-increment: key; content: counter(key); position: absolute; inset-inline-start: 0; top: 0.1em; width: 1.5rem;
  height: 1.5rem; border-radius: 50%; background: var(--color-ink); color: var(--color-surface); font-family: var(--font-numeric);
  font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.5rem; text-align: center; }
.anatomy-keys .k { display: block; font-weight: var(--weight-strong); }
.anatomy table.board td:not(.c-thesis), .anatomy .row-flags, .anatomy .thesis { outline: 1px dashed var(--color-border-strong); outline-offset: 2px; }
/* 旗標與論點本身沒有內距：虛線框貼著字（偵測器 cramped-padding）——只在這一列樣本上給一點 */
.anatomy .row-flags, .anatomy .thesis { padding: var(--space-1) var(--space-2); }
/* 第一名那一列上的標號：與下面的清單同一個順序（CSS 的計數器；不是頁面上的數）。
   ★ 起點放在表上、不放在 .anatomy：.anatomy 就是 .table-wrap（container-type 帶樣式隔離），放在它身上的起點
   進不到裡面——第一版每一格各自從 1 數起（新鮮度在論點裡面，所以是 2）。
   標號在每一格虛線框的左上方、框外，不蓋住格子裡的字；新鮮度在它的標籤下面。 */
.anatomy table.board { counter-reset: cell; }
.anatomy :is(.c-rank, .c-name, .c-composite, .c-price, .c-range, .c-upside, .row-flags, .thesis, .pair-fresh) { position: relative; }
.anatomy :is(.c-rank, .c-name, .c-composite, .c-price, .c-range, .c-upside, .row-flags, .thesis, .pair-fresh)::before {
  counter-increment: cell; content: counter(cell); position: absolute; z-index: 2; top: -1.6rem; inset-inline-start: -2px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-ink); color: var(--color-surface); font-family: var(--font-numeric);
  font-size: 11px; font-weight: var(--weight-strong); line-height: 1.25rem; text-align: center; }
.anatomy .pair-fresh::before { top: auto; bottom: -1.6rem; }
.anatomy table.board tbody tr { padding-top: 2.5rem; row-gap: 1.75rem; }
.range-legend { margin: 0; padding: var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg); }
.range-key { width: 100%; max-width: 22rem; height: auto; }
.key-label { fill: var(--color-ink-muted); font-size: 11px; }
.range-legend figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.flag-list { display: grid; gap: var(--space-2); margin: 0; }
.flag-list .entry { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-3); align-items: baseline; }
.flag-list dd { margin: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }
.tone-sample { font-weight: var(--weight-strong); }
.tone-sample[data-tone="up"] { color: var(--color-up); }
.tone-sample[data-tone="down"] { color: var(--color-down); }
.kind { margin-top: var(--space-5); }
.kind > p { max-width: 70ch; color: var(--color-ink-muted); }

/* 配色與字體（色卡） */
.palette-page { max-width: var(--content-width); }
.palette-theme { margin-top: var(--space-6); }
.palette-theme h2 { margin-bottom: var(--space-4); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-3); }
.swatch-card { overflow: hidden; background: var(--color-surface); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md); }
.swatch-card .chip { display: block; height: 3.5rem; border-bottom: var(--border-width) solid var(--color-line); }
.swatch-card p { margin: 0; padding: 0 var(--space-3); font-size: var(--text-xs); color: var(--color-ink-muted); }
.swatch-card .sw-name { padding-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink); }
.swatch-card .sw-value { font-family: var(--font-numeric); color: var(--color-ink); }
.swatch-card .sw-use { padding-bottom: var(--space-3); }
.chip-sm { display: inline-block; width: 0.85rem; height: 0.85rem; margin-inline-end: var(--space-2); vertical-align: -0.1em; border-radius: 3px;
  border: var(--border-width) solid var(--color-line); }
.palette-page table.data { width: 100%; margin-top: var(--space-2); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md); }
.palette-page table.data tr.total th, .palette-page table.data tr.total td { font-weight: var(--weight-strong); border-bottom: 0; }
.palette-page #fonts { margin-top: var(--space-6); }

/* ================================================================ 專業的桌機：左側欄（可收合成一排圖示） */
@media (min-width: 64rem) {
  [data-layout="compact"] .topbar, [data-layout="compact"] .page { margin-inline-start: var(--nav-w); }
  [data-layout="compact"] .topbar-inner { max-width: none; min-height: 4rem; }
  [data-layout="compact"] .page main, [data-layout="compact"] .band-inner, [data-layout="compact"] .site-footer { max-width: var(--content-width); }
  /* 17.5rem：商標 ＋ 完整的站名 ＋ 收合鈕放得下（16rem 會切到站名的最後一兩個字——使用者 2026-10-16） */
  [data-layout="compact"] { --brand-h: 4rem; --nav-w: 17.5rem; }
  [data-layout="compact"][data-nav-collapsed="true"] { --nav-w: var(--nav-w-collapsed); --brand-h: 7rem; }
  /* 側欄頂端：商標 ＋ 站名 ＋ 收合鈕（收合之後只剩商標，收合鈕排在它下面——與底下一排圖示對齊） */
  [data-layout="compact"] .brand { position: fixed; z-index: 31; inset-inline-start: 0; top: 0; width: var(--nav-w); height: var(--brand-h);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3) 0 var(--space-4);
    overflow: hidden; white-space: nowrap; background: var(--nav-bg); border-inline-end: var(--border-width) solid var(--color-line); }
  [data-layout="compact"] .brand a { color: var(--color-ink); font-size: var(--text-md); min-width: 0; }
  [data-layout="compact"] .site-nav { position: fixed; z-index: 30; inset-inline-start: 0; top: var(--brand-h); bottom: 0; width: var(--nav-w);
    overflow-x: hidden; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-5); background: var(--nav-bg);
    border-inline-end: var(--border-width) solid var(--color-line); }
  [data-layout="compact"] .nav-list { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; }
  [data-layout="compact"] .site-nav .nav-link { width: 100%; white-space: nowrap; color: var(--color-ink-muted); font-size: var(--text-md); }
  [data-layout="compact"] .site-nav .nav-link:hover { background: var(--hover-bg); color: var(--color-ink); }
  [data-layout="compact"] .site-nav .nav-link[aria-current="page"], [data-layout="compact"] .site-nav .nav-link.is-current {
    background: var(--nav-active-bg); color: var(--color-accent); text-decoration: none; font-weight: var(--weight-strong); }
  /* 「個股」：有 JavaScript 時往右側展開（側欄旁邊的一塊面板，和咖啡館的下拉面板同一種展示，方向不同——使用者 2026-10-16）；
     沒有 JavaScript 就在側欄裡整片展開 */
  [data-layout="compact"] .nav-group summary .icon-caret { margin-inline-start: auto; transform: rotate(-90deg); }
  [data-layout="compact"] .nav-tickers .nav-group-panel { background: transparent; padding: 0 0 var(--space-2) var(--space-5); }
  [data-layout="compact"] .nav-sublist { grid-template-columns: 1fr; }
  [data-js="on"][data-layout="compact"] .nav-tickers .nav-group-panel { position: fixed; z-index: 45; top: calc(var(--brand-h) + var(--space-2));
    inset-inline-start: calc(var(--nav-w) + var(--space-2)); width: min(44rem, calc(100vw - var(--nav-w) - 3rem));
    max-height: calc(100vh - var(--brand-h) - 2rem); overflow-y: auto; padding: var(--space-3) var(--space-3) var(--space-4);
    background: var(--color-surface); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 16px 40px color-mix(in srgb, var(--color-ink) 12%, transparent); }
  [data-js="on"][data-layout="compact"] .nav-sublist { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  [data-js="on"][data-layout="compact"] .nav-group[open] > summary { background: var(--nav-active-bg); color: var(--color-accent); }
  [data-layout="compact"] .nav-collapse { visibility: visible; position: static; flex: none; width: 2.5rem; min-height: 2.5rem; padding: 0;
    justify-content: center; border-color: var(--color-line); border-radius: var(--radius-md); color: var(--color-ink-muted); }
  [data-layout="compact"] .nav-collapse .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-layout="compact"] .menu summary { border-color: var(--color-line); color: var(--color-ink); border-radius: var(--radius-md); }
  [data-layout="compact"][data-nav-collapsed="true"] .brand { flex-direction: column; justify-content: center; gap: var(--space-3); padding: 0; }
  [data-layout="compact"][data-nav-collapsed="true"] .nav-label, [data-layout="compact"][data-nav-collapsed="true"] .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-layout="compact"][data-nav-collapsed="true"] .nav-group .icon-caret { visibility: hidden; position: absolute; }
  [data-layout="compact"][data-nav-collapsed="true"] .site-nav .nav-link { justify-content: center; padding: 0; }
}

/* ================================================================ 平板與手機：排序表每一列一張卡片；表頭只給螢幕閱讀器 */
@media (max-width: 63.99rem) {
  .comp { grid-template-columns: 1fr auto; }
  .comp-score, .comp-facts { grid-column: 1 / -1; }
  /* 窄的時候論點四樣一樣一段：標籤接著內容流排 */
  .thesis { display: block; }
  .thesis .pair { display: block; margin-bottom: 2px; }
  .thesis dt, .thesis dd { display: inline; }
  .thesis dt { margin-inline-end: var(--space-2); }
}

@media (max-width: 47.99rem) {
  :root { --gutter: 1rem; }
  .topbar-inner { min-height: 3.5rem; flex-wrap: nowrap; gap: var(--space-2); }
  .brand { font-size: var(--text-md); min-width: 0; }
  .controls { flex-wrap: nowrap; gap: var(--space-1); }
  .menu summary { padding: 0 var(--space-3); gap: var(--space-1); }
  .menu-label, .menu summary .icon-caret { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .brand { font-size: var(--text-sm); }
  .brand a { gap: 6px; }
  .brand .logo { width: 1.5rem; height: 1.5rem; }
  .controls { order: 2; }
  [data-js="on"] .nav-toggle { visibility: visible; position: static; order: 3; padding: 0 var(--space-3); }
  [data-js="on"] .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-js="on"] .site-nav { position: fixed; z-index: 40; top: 0; bottom: 0; inset-inline-end: 0; width: min(22rem, 88vw); overflow-y: auto;
    padding: var(--space-5) var(--space-4); background: var(--nav-bg); color: var(--color-ink); box-shadow: var(--shadow-card);
    transform: translateX(100%); visibility: hidden; }
  [data-js="on"][data-nav-open="true"] .site-nav { transform: none; visibility: visible; }
  [data-js="on"] .nav-list { flex-direction: column; align-items: stretch; }
  [data-js="on"] .site-nav .nav-link { width: 100%; color: var(--color-ink); font-size: var(--text-md); }
  [data-js="on"] .site-nav .nav-link[aria-current="page"] { background: var(--nav-active-bg); color: var(--color-accent); text-decoration: none; }
  [data-js="on"] .nav-sublist { grid-template-columns: 1fr; }
  [data-js="on"] .nav-group-panel { position: static; width: auto; border: 0; box-shadow: none; }
  [data-js="on"][data-nav-open="true"] body::after { content: ""; position: fixed; inset: 0; z-index: 35; background: var(--color-ink); opacity: 0.32; }
  .band-inner { padding-top: var(--space-2); padding-bottom: var(--space-2); gap: var(--space-1) var(--space-3); }
  [data-layout="relaxed"] .kpi-review, [data-layout="relaxed"] .kpi-pipe { font-size: var(--text-xs); }
  [data-layout="relaxed"] .kpi-pipe { margin-inline-start: 0; }
  /* 咖啡館的手機：章與輪次標示同一行（標示可以折兩行） */
  [data-layout="relaxed"] .band-inner { flex-wrap: wrap; align-items: center; }
  [data-layout="relaxed"] .kpi-time { padding: var(--space-1) var(--space-2); }
  [data-layout="relaxed"] .kpi-time .kpi-label { font-size: 11px; letter-spacing: 0.16em; }
  [data-layout="relaxed"] .kpi-time .kpi-value { font-size: var(--text-sm); }
  [data-layout="relaxed"] .kpi-round { flex: 1 1 11rem; border-radius: var(--radius-md); }
  [data-layout="relaxed"] .kpi-round .kpi-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-layout="compact"] .band-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-2); padding-top: var(--space-2); }
  [data-layout="compact"] .kpi { padding: 6px var(--space-3); grid-template-columns: 1fr; grid-template-areas: "label" "value"; }
  /* 免責聲明在帶上多了兩行：專業的手機把帶與標題收緊一點，第一張卡的第 1 級（含區間條的標籤）才留在 375×667 的第一屏（490(7)） */
  .band-disclaimer { line-height: 1.35; }
  [data-layout="compact"] .page-title { padding-top: var(--space-3); }
  /* 第 0 級永遠看得到：「這一輪」那一張的說明（純量化臂・已知偏差）留著；只收圖示與第 3 級的說明 */
  [data-layout="compact"] .kpi-icon, [data-layout="compact"] .kpi-review .kpi-note, [data-layout="compact"] .kpi-time .kpi-note {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-layout="compact"] .kpi { grid-template-areas: "label" "value" "note"; }
  [data-layout="compact"] .kpi-note { font-size: 11px; }
  [data-layout="compact"] .kpi-value { font-size: var(--text-sm); }
  .page-title { padding-top: var(--space-4); gap: var(--space-3); }
  h1 { font-size: var(--text-xl); }
  .lead { margin-top: var(--space-1); font-size: var(--text-sm); }
  .title-actions .btn { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-sm); }
  .board-section { margin-top: var(--space-3); }
  .section-head { gap: var(--space-2) var(--space-3); }
  .section-note { margin-inline-start: 0; font-size: var(--text-xs); }
  table.board tbody tr { padding: var(--space-3); }
  .rb { max-width: none; }
  .comp { grid-template-columns: 1fr; }
  .flag-list .entry { grid-template-columns: 1fr; }
  .summary { gap: var(--space-3) var(--space-4); padding: var(--space-4); }
}

/* ================================================================ 動態：短、ease-out；尊重「減少動態效果」 */
/* 全部掛在 [data-nav-ready="true"] 之下（site.js 在第一次繪製之後才設）：載入時 site.js 會收起「個股」、套上記住的風格，
   第一版的動態在每一次載入都播一次（箭頭從朝上轉到朝右、底色從咖啡館淡到專業） */
@media (prefers-reduced-motion: no-preference) {
  [data-nav-ready="true"]:is(html), [data-nav-ready="true"] :is(body, .topbar, .tier0-band) {
    transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease); }
  [data-nav-ready="true"] :is(tr[data-href], .menu summary, .filter button, .menu-panel button, .btn, .score-toggle, .site-nav .nav-link) {
    transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease),
      color var(--motion-duration) var(--motion-ease); }
  [data-nav-ready="true"] .icon-caret { transition: transform var(--motion-duration) var(--motion-ease); }
  [data-nav-ready="true"] .site-nav { transition: transform var(--motion-duration) var(--motion-ease), visibility var(--motion-duration); }
}
/* 專業的桌機：收合／展開側欄時，側欄的框橫向伸縮、右邊的內容跟著讓位（使用者 2026-10-16 確認點 2：「框框要橫向展開，不要直接平移」；
   第一版沒有動態，寬度一步跳過去）。字在收合的那一刻就收起；展開時字跟著框一起露出來（不折行、超出的先裁掉） */
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  [data-nav-ready="true"][data-layout="compact"] :is(.brand, .site-nav) {
    transition: width var(--nav-motion) var(--motion-ease), height var(--nav-motion) var(--motion-ease), top var(--nav-motion) var(--motion-ease); }
  [data-nav-ready="true"][data-layout="compact"] .topbar {
    transition: margin-inline-start var(--nav-motion) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease); }
  [data-nav-ready="true"][data-layout="compact"] .page { transition: margin-inline-start var(--nav-motion) var(--motion-ease); }
}