/* ==========================================================================
   品牌色 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); }

/* Schedule table: tint the session icon + title with the category colour (matches .sess-tag,
   only appears on the activity page; :has(+ strong) targets the session icon before the title,
   leaving the description arrow neutral) */
.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 — Brand-color frame for article screenshots / diagrams
   Usage:
     - 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 — Home page H1 logo (same logo-tonal as header / favicon)
   ========================================================================== */

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

/* ==========================================================================
   .md-button — keep vertical breathing room after wrap
   The right margin is enough on a single desktop row; add bottom margin so
   buttons that wrap onto a second row on mobile don't stick together.
   ========================================================================== */

.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: "NEW";
  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;
}

/* ==========================================================================
   Table width

   Material does not set a width on tables, so each one is only as wide as its
   content. Within a single page this leaves tables at differing widths, all
   flush left, with right edges that never line up with the surrounding text.
   Filling the content area gives tables and paragraphs the same left and right
   boundaries.

   Tables with few columns get stretched. Right-align numeric columns with ---:
   in Markdown so the figures stay grouped and remain easy to compare.
   ========================================================================== */

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