/* ==========================================================================
   品牌色 token（依 .claude/rules/brand-identity.md）
   主色 cyan #00aeff、Accent、結構性次色、中性色
   ========================================================================== */

:root {
  /* Brand cyan 9 階色票 */
  --brand-cyan-50:  #e0f4ff;
  --brand-cyan-100: #b3e3ff;
  --brand-cyan-200: #80d1ff;
  --brand-cyan-300: #4dbfff;
  --brand-cyan-400: #26b3ff;
  --brand-cyan-500: #00aeff;
  --brand-cyan-600: #009ee6;
  --brand-cyan-700: #0089bf;
  --brand-cyan-800: #006d99;
  --brand-cyan-900: #003e57;

  /* Accent（固定 2 個） */
  --accent-action:    #ef6c00;  /* CTA、活動公告 */
  --accent-emergency: #d32f2f;  /* 緊急求救、警告 */

  /* 結構性次色（綁定三大主題） */
  --cat-privacy:  #4caf50;  /* 個人隱私指引 */
  --cat-relay:    #7b1fa2;  /* Tor Relay 校園建立 */
  --cat-payments: #ef6c00;  /* 匿名支付（與 --accent-action 同色） */

  /* 中性 */
  --neutral-muted:  #546e7a;
  --neutral-border: #cdcdcd;

  /* 指南分類色（sidebar 導覽 chip 用 UI 色，非內容語意色，見 brand-identity.md）
     刻意避開三大主題保留色：綠 #4caf50、紫 #7b1fa2、橙 #ef6c00 與緊急紅 #d32f2f */
  --guide-basics:    #0079a3;  --guide-basics-d:    #4dbfff;  /* 概念：品牌 cyan（深一階以過 AA 對比） */
  --guide-tools:     #2e7d32;  --guide-tools-d:     #66bb6a;  /* 工具：深綠（跟 cyan 拉開，比隱私綠 #4caf50 更深） */
  --guide-scenarios: #ad1457;  --guide-scenarios-d: #f06292;  /* 場景：洋紅 */
  --guide-advanced:  #4527a0;  --guide-advanced-d:  #b39ddb;  /* 進階：靛紫（暗色提亮以過 AA 對比） */
  --guide-reports:   #946c00;  --guide-reports-d:   #e0b020;  /* 報告：琥珀金（離開藍色系，色盲下與概念完全分開） */
}

/* ==========================================================================
   活動頁議程主題標籤 .sess-tag（對齊 2026 三大主題；soft chip 淡底深字、過 AA）
   見 .claude/rules/brand-identity.md；不挪用 --guide-* sidebar 導覽色
   ========================================================================== */
.sess-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.02rem 0.4rem;
  margin-right: 0.3rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  vertical-align: 0.1em;
  border: 1px solid transparent;
}
.sess-tag--basic    { background: var(--brand-cyan-50); color: var(--brand-cyan-800); border-color: var(--brand-cyan-200); }
.sess-tag--privacy  { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.sess-tag--relay    { background: #f3e5f5; color: #6a1b9a; border-color: #ce93d8; }
.sess-tag--payments { background: #fff3e0; color: #b35309; border-color: #ffcc80; }

[data-md-color-scheme="slate"] .sess-tag--basic    { background: rgba(0,174,255,.15); color: var(--brand-cyan-300); border-color: rgba(0,174,255,.40); }
[data-md-color-scheme="slate"] .sess-tag--privacy  { background: rgba(76,175,80,.18); color: #81c784; border-color: rgba(76,175,80,.42); }
[data-md-color-scheme="slate"] .sess-tag--relay    { background: rgba(123,31,162,.24); color: #ce93d8; border-color: rgba(123,31,162,.50); }
[data-md-color-scheme="slate"] .sess-tag--payments { background: rgba(239,108,0,.18); color: #ffb74d; border-color: rgba(239,108,0,.45); }

/* 議程表：場次圖示與標題也套上分類色（對齊 .sess-tag，只在活動頁議程表出現；
   :has(+ strong) 精準選到標題前的場次圖示，描述列的箭頭圖示維持中性） */
.md-typeset td:has(.sess-tag--basic)    strong,
.md-typeset td:has(.sess-tag--basic)    .twemoji:has(+ strong) { color: var(--brand-cyan-800); }
.md-typeset td:has(.sess-tag--privacy)  strong,
.md-typeset td:has(.sess-tag--privacy)  .twemoji:has(+ strong) { color: #1b5e20; }
.md-typeset td:has(.sess-tag--relay)    strong,
.md-typeset td:has(.sess-tag--relay)    .twemoji:has(+ strong) { color: #6a1b9a; }
.md-typeset td:has(.sess-tag--payments) strong,
.md-typeset td:has(.sess-tag--payments) .twemoji:has(+ strong) { color: #b35309; }

[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--basic)    strong,
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--basic)    .twemoji:has(+ strong) { color: var(--brand-cyan-300); }
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--privacy)  strong,
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--privacy)  .twemoji:has(+ strong) { color: #81c784; }
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--relay)    strong,
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--relay)    .twemoji:has(+ strong) { color: #ce93d8; }
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--payments) strong,
[data-md-color-scheme="slate"] .md-typeset td:has(.sess-tag--payments) .twemoji:has(+ strong) { color: #ffb74d; }

html.js-focus-visible.js body header.md-header.md-header--shadow nav.md-header__inner.md-grid {
    padding: 0 1rem;
}

@media screen and (max-width: 100em) {
  .md-grid {
    max-width: 1200px;
  }
}

@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 1440px;
  }
}

/* ==========================================================================
   左側 sidebar：section 群組標題做成有左側品牌色強調棒的區塊標頭
   套用範圍：桌面寬度（看得到左側 sidebar 時）的 navigation.sections 群組
   （指南 tab 下的 概念 / 工具 / 場景 / 進階 / 報告 等）
   只在桌面套用，窄螢幕收進抽屜選單時維持 Material 預設樣式
   ========================================================================== */

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__item--section > .md-nav__link {
    margin: 0.9rem 0.4rem 0.25rem 0;
    padding: 0.3rem 0.5rem 0.3rem 0.55rem;
    background-color: color-mix(in srgb, var(--brand-cyan-500) 12%, transparent);
    border-left: 0.2rem solid var(--brand-cyan-500);
    border-radius: 0 0.2rem 0.2rem 0;
    color: var(--brand-cyan-700);
    font-weight: 700;
  }

  .md-sidebar--primary .md-nav__item--section > .md-nav__link:hover {
    background-color: color-mix(in srgb, var(--brand-cyan-500) 20%, transparent);
    color: var(--brand-cyan-800);
  }

  /* 第二層群組標題（概念 / 工具 / 場景 / 進階 / 報告）：細框 + 圓角 chip 樣式 */
  .md-sidebar--primary .md-nav__item--section .md-nav__item--section > .md-nav__link {
    margin: 0.6rem 0.4rem 0.2rem 0;
    padding: 0.3rem 0.5rem;
    background-color: transparent;
    border: 1px solid var(--brand-cyan-200);
    border-radius: 5px;
    color: var(--brand-cyan-700);
    font-weight: 600;
  }

  /* 每個分類給自己的主題色：color 同時染標題文字與 SVG 圖示，border-color 染框。
     用 lifted 路徑 + nth-of-type 依位置鎖定 5 個分類（概念=1…報告=5），與 active
     狀態無關（避免瀏覽該分類時 href 收斂成 ./ 而退色）；排除報告底下的子章節。
     注意：依賴 mkdocs.yml 的分類順序，改順序需同步調整對應色。 */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav__link    { color: var(--guide-basics);    border-color: var(--guide-basics); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav__link     { color: var(--guide-tools);     border-color: var(--guide-tools); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav__link { color: var(--guide-scenarios); border-color: var(--guide-scenarios); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav__link  { color: var(--guide-advanced);  border-color: var(--guide-advanced); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav__link   { color: var(--guide-reports);   border-color: var(--guide-reports); }

  /* 第二層群組（概念 / 工具 / 場景 / 進階 / 報告）底下的項目：右縮，
     讓項目圖示與群組標題的圖示對齊（chip 的 border + padding 把標題圖示推右了） */
  .md-sidebar--primary .md-nav__item--section .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
    padding-left: 0.5rem;
  }

  /* lifted 的當前 tab 標頭（指南）是 position:sticky 的遮罩列，背景必須不透明，
     否則 hover 或捲動時會透出底下捲上來的 nav 文字。改用不透明同色 tint，
     box-shadow 也染同色，沿用 Material 的 sticky 遮罩 */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active.md-nav__item--section > .md-nav__link {
    background-color: color-mix(in srgb, var(--brand-cyan-500) 12%, var(--md-default-bg-color));
    box-shadow: 0 0 0.4rem 0.4rem var(--md-default-bg-color);
  }

  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active.md-nav__item--section > .md-nav__link:hover {
    background-color: color-mix(in srgb, var(--brand-cyan-500) 18%, var(--md-default-bg-color));
    box-shadow: 0 0 0.4rem 0.4rem var(--md-default-bg-color);
  }

  /* 暗色模式（slate）：頂層與第二層群組標題文字提亮，確保深底上對比足夠 */
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--section > .md-nav__link {
    color: var(--brand-cyan-300);
  }

  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--section .md-nav__item--section > .md-nav__link {
    color: var(--brand-cyan-300);
  }

  /* 暗色：每類用較亮的變體（nth 對應同上），維持彼此區隔與深底對比 */
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav__link    { color: var(--guide-basics-d);    border-color: var(--guide-basics-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav__link     { color: var(--guide-tools-d);     border-color: var(--guide-tools-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav__link { color: var(--guide-scenarios-d); border-color: var(--guide-scenarios-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav__link  { color: var(--guide-advanced-d);  border-color: var(--guide-advanced-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav__link   { color: var(--guide-reports-d);   border-color: var(--guide-reports-d); }

  /* 各分類底下的子連結文字（含圖示，fill:currentColor）也套該分類主題色 */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav .md-nav__link { color: var(--guide-basics); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav .md-nav__link { color: var(--guide-tools); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav .md-nav__link { color: var(--guide-scenarios); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav .md-nav__link { color: var(--guide-advanced); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav .md-nav__link { color: var(--guide-reports); }

  /* 暗色：子連結用較亮的變體 */
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav .md-nav__link { color: var(--guide-basics-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav .md-nav__link { color: var(--guide-tools-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav .md-nav__link { color: var(--guide-scenarios-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav .md-nav__link { color: var(--guide-advanced-d); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav .md-nav__link { color: var(--guide-reports-d); }

  /* active（當前頁）連結：加粗 + 顏色比所屬分類色再深一點，從同色兄弟中突出 */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav .md-nav__link--active { font-weight: 700; }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-basics) 70%, black); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-tools) 70%, black); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-scenarios) 70%, black); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-advanced) 70%, black); }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-reports) 70%, black); }

  /* 暗色：active 連結輕度加深（過深會在深底上看不清），仍加粗 */
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-basics-d) 85%, black); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-tools-d) 85%, black); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-scenarios-d) 85%, black); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-advanced-d) 85%, black); }
  [data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav .md-nav__link--active { color: color-mix(in srgb, var(--guide-reports-d) 85%, black); }
}

/* 麵包屑（navigation.path）：亮色用 cyan-800 過 WCAG AA（白底 5.76:1），
   暗色維持 cyan-500（slate 上 5.28:1）。hover 各自再深/再亮一階。 */
[data-md-color-scheme="default"] .md-path__link { color: var(--brand-cyan-800); }
[data-md-color-scheme="slate"]   .md-path__link { color: var(--brand-cyan-500); }
[data-md-color-scheme="default"] .md-path__link:hover { color: var(--brand-cyan-900); }
[data-md-color-scheme="slate"]   .md-path__link:hover { color: var(--brand-cyan-300); }

/* ==========================================================================
   圖示尺寸與對齊（Material 的 :icon:{ .lg .middle } 在非 Insiders 不生效，自補）
   .lg → 2rem（卡片標題用）
   .xl → 3rem
   .huge → 4rem（Hero 用）
   .middle → 垂直置中
   ========================================================================== */

.twemoji.lg svg,
.md-typeset .twemoji.lg svg {
  height: 1.75rem;
  width: 1.75rem;
}

.twemoji.xl svg,
.md-typeset .twemoji.xl svg {
  height: 2.5rem;
  width: 2.5rem;
}

.twemoji.huge svg,
.md-typeset .twemoji.huge svg {
  height: 4rem;
  width: 4rem;
}

.twemoji.middle,
.md-typeset .twemoji.middle {
  vertical-align: middle;
}

/* ==========================================================================
   .brand-frame — 文章內截圖 / 流程圖的品牌色框
   用法：
     - markdown: ![alt](url){.brand-frame}
     - HTML: <img class="brand-frame" src="..." alt="...">
   ========================================================================== */

.md-typeset img.brand-frame {
  border-radius: 10px;
  border: 1px solid var(--brand-cyan-500);
  box-shadow: 0 0 0.3rem var(--brand-cyan-500);
}

/* ==========================================================================
   .hero-icon — 首頁 H1 旁的 logo（同 header / favicon 使用 logo-tonal）
   用法：# <img src="./assets/images/logo-tonal.svg" class="hero-icon"> 標題
   ========================================================================== */

.md-typeset h1 img.hero-icon {
  height: 2.5rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* ==========================================================================
   .md-button — wrap 後保留垂直呼吸
   桌面寬度單行排列時 right margin 已足夠，手機 wrap 後加 bottom margin
   ========================================================================== */

.md-typeset .md-button {
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   暗色模式（slate）：內文與一般文字改純白
   預設是半透明灰白（約 rgba(226, 228, 233, 0.82)），閱讀時不夠凸顯
   ========================================================================== */

[data-md-color-scheme="slate"] {
  --md-typeset-color: #ffffff;
  --md-default-fg-color: #ffffff;
}

/* ==========================================================================
   內容頁 H1 標題：亮色純黑、暗色純白（Material 預設 h1 是較淺的灰/灰白）
   ========================================================================== */

[data-md-color-scheme="default"] .md-typeset h1 {
  color: #000000;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #ffffff;
}

/* ==========================================================================
   WCAG AA 對比（亮色模式）：Material 「light blue」primary 太淺，內文連結
   #02a6f2 在白底僅 2.71:1。把連結 / accent / header 底色統一改品牌 cyan-800
   #006d99（白底 5.76:1，仍在 cyan 色階、只是較深）。
   只改亮色：cyan-800 在 slate 暗底僅 2.27，故暗色維持 Material 預設（已過 AA）。
   ========================================================================== */

[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--brand-cyan-800);   /* 內文連結 2.71 → 5.76 */
  --md-accent-fg-color: var(--brand-cyan-800);   /* hover / accent / 按鈕 */
  --md-primary-fg-color: var(--brand-cyan-800);  /* header 底色，白字 2.71 → 5.76 */
}

/* ==========================================================================
   Footer 文字改純白（footer 底色在亮暗模式都是深色，純白兩種模式皆適用）
   蓋掉 Material 預設的半透明白（版權、Made with… 等）
   ========================================================================== */

.md-footer {
  --md-footer-fg-color: #ffffff;
  --md-footer-fg-color--light: #ffffff;
  --md-footer-fg-color--lighter: #ffffff;
}

/* ==========================================================================
   Footer「本站可離線閱讀」是新功能：做成醒目的 pill 連結 + 「新」標記
   （結構見 overrides/partials/copyright.html 的 .md-copyright__offline）
   ========================================================================== */

.md-copyright__offline {
  margin-top: 0.6em !important;
}

.md-copyright__offline a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background-color: var(--brand-cyan-500);
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
}

.md-copyright__offline a:hover {
  background-color: var(--brand-cyan-600);
}

/* 前綴「新」徽章，標示這是近期新功能 */
.md-copyright__offline a::before {
  content: "新";
  padding: 0.12em 0.45em;
  border-radius: 999px;
  background-color: var(--accent-action);
  color: #ffffff;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.3;
}

/* ==========================================================================
   語言切換選單：窄螢幕改成靠右展開，修掉整頁的橫向溢出
   Material 預設用 left: 50% 搭配 translate3d(-50%, 0.3rem, 0)，把
   .md-select__inner 置中掛在按鈕下方。三個語言標籤的中文字面讓選單有 177px
   寬，窄螢幕時按鈕又貼近視窗右緣，選單會往右頂出約 14px。收合時 max-height
   是 0 看不見，可是版面寬度已經被撐開，整頁能往右滑，露出置頂公告與 header
   底色蓋不到的白色空白。
   實測 959px 以下每個寬度都會發生，960px 起按鈕離右緣夠遠沒有這個問題，所以
   只在 Material 的 59.984375em 斷點以下覆寫，桌面維持原本的置中展開。
   靠右展開同時讓選單完整留在畫面內，窄螢幕原本會被視窗右緣切掉一截。
   ========================================================================== */

@media screen and (max-width: 59.984375em) {
  .md-select__inner {
    left: auto;
    right: 0;
    transform: translate3d(0, 0.3rem, 0);
  }

  .md-select:focus-within .md-select__inner,
  .md-select:hover .md-select__inner {
    transform: translate3d(0, 0, 0);
  }

  /* 指向按鈕的小箭頭一併改成靠右定位。按鈕寬 2.4rem，中心距選單右緣 1.2rem，
     箭頭本身寬 0.4rem，所以右側留 1rem */
  .md-select__inner::after {
    left: auto;
    margin-left: 0;
    right: 1rem;
  }
}

/* ==========================================================================
   置頂公告的連結色
   .md-banner 在兩種主題都是深底，淺色主題疊合後是 rgb(33, 33, 33)，深色主題是
   rgb(23, 25, 31)。可是裡面的連結沿用 Material 的 --md-typeset-a-color，也就是
   主色 #006d99，深藍配黑底在淺色主題只有 2.79:1，遠低於 WCAG AA 要求的 4.5:1，
   字幾乎融進黑底看不出來是連結。
   改用品牌 cyan-300，淺色主題 7.83:1、深色主題 8.54:1，兩邊都達 AAA。這也是本檔
   既有的深底用色，見 --guide-basics-d 與 slate 的 sess-tag 覆寫。
   hover 與 focus 再亮一階到 cyan-200，維持狀態變化看得出來。
   ========================================================================== */

.md-banner__inner a {
  color: var(--brand-cyan-300);
}

.md-banner__inner a:focus,
.md-banner__inner a:hover {
  color: var(--brand-cyan-200);
}

/* ==========================================================================
   .source-note — 查證來源、出處註記
   用法（段落之後另起一行，注意是冒號形式的區塊語法）：
     查證來源（2026-08）：[標題](url){target="_blank"} - 出處單位，2025-02-20。
     {: .source-note }
   出處註記不是內文層級，字級與顏色各降一階，左側細線與正文拉開。
   顏色與框線用 Material 的 --md-default-fg-color--light 與 --lighter，兩者在
   slate 主題會自動換成淺色前景，因此不需要另寫 [data-md-color-scheme="slate"]
   覆寫。淺色主題下 --light 疊在白底是 4.61:1，小字仍達 WCAG AA 的 4.5:1。
   左框線刻意用 2px，與 Material blockquote 的 4px 拉開，避免看成引言。
   ========================================================================== */

.md-typeset .source-note {
  border-left: 2px solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
  line-height: 1.6;
  margin-top: 1.2em;
  padding-left: 0.8em;
}

/* ==========================================================================
   表格寬度

   Material 預設沒有給表格設 width，寬度隨內容長短而定。同一篇文章裡的
   表格因此寬窄不一，全部靠左，右邊界與段落文字對不齊，讀起來像沒有對位。
   改為佔滿內容區，讓表格與段落共用同一組左右邊界。

   欄數少的表格會被拉開，數值欄建議在 Markdown 用 ---: 靠右，數字才會
   聚在一起方便比較大小。
   ========================================================================== */

.md-typeset table:not([class]) {
  width: 100%;
}