/* ==========================================================================
   品牌色 token（說明見 https://anoni.net/brand/ 的「配色 Token」）
   主色 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 色，非內容語意色，見 community/visual-guide.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-reports:   #946c00;  --guide-reports-d:   #e0b020;  /* 報告：琥珀金（離開藍色系，色盲下與概念完全分開） */
}

/* ==========================================================================
   活動頁議程主題標籤 .sess-tag（對齊 2026 三大主題；soft chip 淡底深字、過 AA）
   見 https://anoni.net/brand/ 的「結構性次色」，不挪用 --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); }

/* ==========================================================================
   Changelog urgency tags .urg-tag (used by the operating systems group; matches
   the .sess-tag soft chip: light background, dark text, AA compliant). Colour is
   supplementary only, each tag carries its own label so it stays readable under
   colour blindness or monochrome printing.
   Light contrast 5.72 / 5.81 / 8.35, dark 6.41 / 9.33 / 7.24, all pass AA 4.5
   ========================================================================== */
.urg-tag,
.chan-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;
}
.urg-tag--now     { background: #fdeceb; color: #b3261e; border-color: #f4b8b4; }
.urg-tag--soon    { background: #fff4e0; color: #8a5300; border-color: #ffd699; }
.urg-tag--routine { background: #eceff1; color: #37474f; border-color: #b0bec5; }

[data-md-color-scheme="slate"] .urg-tag--now     { background: rgba(211,47,47,.18);  color: #ef9a9a; border-color: rgba(211,47,47,.45); }
[data-md-color-scheme="slate"] .urg-tag--soon    { background: rgba(230,145,0,.18);  color: #ffcc80; border-color: rgba(230,145,0,.45); }
[data-md-color-scheme="slate"] .urg-tag--routine { background: rgba(120,144,156,.20); color: #b0bec5; border-color: rgba(120,144,156,.45); }

.chan-tag--stable { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.chan-tag--alpha  { background: #f3e5f5; color: #6a1b9a; border-color: #ce93d8; }

[data-md-color-scheme="slate"] .chan-tag--stable { background: rgba(76,175,80,.18);  color: #81c784; border-color: rgba(76,175,80,.42); }
[data-md-color-scheme="slate"] .chan-tag--alpha  { background: rgba(123,31,162,.24); color: #ce93d8; border-color: rgba(123,31,162,.50); }

/* ==========================================================================
   RSS 圖示：全站提到 RSS 的地方前面都放 :material-rss-box:{ .rss-icon }，
   用 RSS 慣用的橘色。旁邊一定有「RSS」文字，圖示只是輔助辨識，所以不另外
   要求文字的對比。放在連結裡也維持橘色，不跟著連結色
   ========================================================================== */
.md-typeset .rss-icon {
  color: #f26522;
}

/* ==========================================================================
   更新日誌首頁「最近的更新」，由 hooks/changelog_digest.py 產生
   篩選是一組 radio 加上 :has()，不用 JavaScript（Tor Browser 最安全等級會關掉它）。
   各選項藏哪些項目的規則由 hook 跟著選項一起輸出，這裡只管外觀。
   ========================================================================== */
.cl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 0.4rem;
}

/* radio 本身不顯示，但留在無障礙樹與鍵盤順序裡，方向鍵照樣切換選項 */
.cl-filter input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.cl-filter label {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 1rem;
  cursor: pointer;
  user-select: none;
}

.cl-filter label:hover {
  border-color: var(--md-accent-fg-color);
}

.cl-filter input:checked + label {
  background: var(--brand-cyan-800);
  border-color: var(--brand-cyan-800);
  color: #fff;
}

[data-md-color-scheme="slate"] .cl-filter input:checked + label {
  background: var(--brand-cyan-300);
  border-color: var(--brand-cyan-300);
  color: #0d1b24;
}

/* Material 的 polyfill 加的是 .focus-visible 類別，原生的另寫一條，
   其中一個選擇器不被認得時另一條照樣生效 */
.cl-filter input.focus-visible + label {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.cl-filter input:focus-visible + label {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.md-typeset .cl-asof,
.md-typeset .cl-meta,
.md-typeset .cl-latest,
.md-typeset .cl-recent time {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .cl-asof {
  margin-top: 0;
}

/* RSS 連結一次只露出目前選項那一份，切換規則由 hook 輸出 */
.md-typeset .cl-feed {
  font-size: 0.68rem;
}

.md-typeset .cl-feed [data-feed]:not([data-feed="all"]) {
  display: none;
}

.md-typeset ul.cl-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.md-typeset ul.cl-list > li {
  margin: 0 0 0.6rem;
}

.md-typeset .cl-meta,
.md-typeset .cl-latest {
  display: block;
}

/* 時間線：日期一欄、內容一欄，內容斷行時對齊內容那一欄 */
.md-typeset .cl-recent > li {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.md-typeset .cl-recent time {
  font-variant-numeric: tabular-nums;
}

.md-typeset .cl-recent > li.cl-empty {
  display: block;
}

/* 「現在要處理的」最上面固定的 Tor Browser 穩定版，跟底下的急迫條目隔開 */
.md-typeset ul.cl-now > li.cl-pinned {
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--md-default-fg-color--lightest);
}

.md-typeset .cl-empty,
.md-typeset .cl-none {
  color: var(--md-default-fg-color--light);
}

/* 空結果的說明只給選了特定選項的人看，「全部」底下不出現 */
.md-typeset:has(#cl-f-all:checked) .cl-list .cl-empty {
  display: none;
}

/* 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 依位置鎖定 4 個分類（概念=1…報告=4），與 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-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-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-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-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-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-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);
}

/* ==========================================================================
   .diagram-tall — Sizing for the vertical hand-written SVGs in docs/diagrams/
   The canvas is drawn 400 wide, shrinks to the content column on phones
   (328 at a 360 viewport, 358 at 390) and scales up to 480 on desktop.
   The scale factor depends on width alone, so the canvas is sized for phones
   and brought back up here. Spec in community/visual-guide.md.
   Leave it off the older horizontal diagrams (canvas 880 to 1000): clamping
   them to 480 makes their text smaller than it is today.
   Usage: <img class="diagram-tall" src="..." alt="...">
   ========================================================================== */

.md-typeset img.diagram-tall {
  width: 480px;
  max-width: 100%;
}

/* ==========================================================================
   .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%;
}

/* ==========================================================================
   Deployment variant chip and the IPFS banner

   The pill in the header marks whether this build is the onion or the IPFS edition;
   the standard site shows nothing. All three languages share one
   partials/header.html through a symlink, so the wording comes from config.extra.

   The border uses currentcolor so it follows the header foreground and survives a
   palette change without edits here.

   On narrow screens only the icon remains: the header already carries the language,
   search and source buttons, and one more text run would squeeze out the site name.
   ========================================================================== */

.anoni-variant {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0.2rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentcolor;
  border-radius: 999px;
  color: inherit;
  font-size: 0.62rem;
  line-height: 1.7;
  white-space: nowrap;
  opacity: 0.82;
  transition: opacity 125ms;
}

.anoni-variant:hover,
.anoni-variant:focus-visible {
  opacity: 1;
}

.anoni-variant__icon {
  display: inline-flex;
}

.anoni-variant__icon svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentcolor;
}

@media screen and (max-width: 76.1875em) {
  .anoni-variant__label {
    display: none;
  }

  .anoni-variant {
    padding: 0.15rem 0.35rem;
  }
}

.anoni-announce__host {
  font-family: var(--md-code-font-family);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   左側 sidebar：nav 連結底下的 subtitle（frontmatter 的 subtitle 欄位）
   套用範圍：所有帶 subtitle 的 nav 連結，桌面 sidebar 與窄螢幕抽屜都套用

   theme 把它渲染成 <span class="md-ellipsis">標題<br><small>副標</small></span>，
   對 <small> 沒有任何規則，於是行高沿用內文那一套。副標一長就斷成兩行，兩行之間
   加上 <br> 的換行，整塊比標題本身還高。

   <br> 換成 small 的 display:block，換行由區塊產生，間距改用 margin 控制，
   行高壓到 1.2。text-wrap:pretty 讓瀏覽器盡量不留下太短的末行，Chrome 與 Safari
   有效，Firefox 目前會忽略，所以它只是加分，中文的斷行主要還是靠文案長度控制。
   ========================================================================== */

.md-nav__link .md-ellipsis br {
  display: none;
}

.md-nav__link .md-ellipsis small {
  display: block;
  margin-top: 0.05rem;
  line-height: 1.2;
  text-wrap: pretty;
}

/* 窄螢幕收進抽屜之後可用寬度比桌面 sidebar 更窄，字級卻更大（12.8px 對 11.2px），
   同一句在這裡會多斷一行，中文還會掉下一兩個字。縮到 0.58rem（11.6px，仍比桌面
   那份大）之後，360、390、768 三個寬度的抽屜裡所有副標都收得回一行。 */
@media screen and (max-width: 76.1875em) {
  .md-nav__link .md-ellipsis small {
    font-size: 0.58rem;
  }
}

/* ==========================================================================
   窄螢幕抽屜：隱藏 GitHub repo 那一排
   套用範圍：抽屜裡的 .md-nav__source，桌面 header 與頁尾社群列不受影響

   設了 repo_url 之後，partials/nav.html 會在抽屜標題底下放一個
   .md-nav__source，內容是 repo 名稱與 star、fork 數，位置排在導覽清單之前。
   讀者打開抽屜第一眼看到的就是那一排，而站上多數讀者沒有技術背景，
   GitHub 的星數對他們沒有意義，還把「開始」、「指南」往下擠了一行。

   Material 給這個元素的規則是單一 class 的 .md-nav__source，只在
   max-width 那組媒體查詢裡開成 display:block。底下用兩個 class 的選擇器
   把權重蓋過去，不跟著 theme 的斷點走，升級改了斷點也不會失效。

   repo 連結沒有消失。桌面 header 從 60em 起照樣顯示，頁尾社群列的 GitHub
   圖示在所有寬度都在。
   ========================================================================== */

.md-nav--primary .md-nav__source {
  display: none;
}

/* ==========================================================================
   設定抽屜
   套用範圍：所有寬度，亮暗切換、閱讀語言與離線內容收進從右側滑出的抽屜

   窄螢幕的 header 右側常駐三顆圖示，390px 上量到亮暗 48px、語言 48px、搜尋
   40px，共 140px，標題只剩 130px，而站名要 236px 才放得下。亮暗與語言兩顆
   收進抽屜，header 只留一顆設定圖示與搜尋。搜尋留著，那是文件站最高頻的
   動作，收進第二層等於每次多一次點擊。

   收進抽屜還有一個空間以外的好處。那兩顆在 header 上都只有圖示沒有文字，
   抽屜裡放得下「外觀」與「閱讀語言」的標題，亮暗也從點一下換下一個改成三個
   並列，目前選的是哪一個直接看得到。

   這一組原本只在 76.234375em 以下成立，桌面維持 header 上三顆圖示並排，抽屜整個
   不存在。結果是離線內容那一組在桌面完全看不到：管理裝置中的內容與檢查更新都
   綁在同一個媒體查詢裡，桌面讀者只剩頁尾那條連結，也沒有主動檢查更新的入口。

   改成所有寬度都一樣。同一顆設定圖示在任何螢幕打開的內容都相同，讀者不必為了
   不同裝置記兩套位置。

   為什麼不是「桌面把亮暗與語言留在 header、抽屜只放離線那一組」：亮暗與語言是
   .anoni-settings 的子元素，靠 display:contents 才排得進 header 的 flex。抽屜
   要在桌面也存在，這個容器就得變成 position:fixed，而 fixed 元素的子孫沒辦法
   回到祖先的 flex 版面裡。同一份 DOM 二選一。繞過去要兩個面板容器與兩份標題列，
   代價是同一顆圖示在桌面與手機打開的內容不同，那種不一致比原本的問題更糟。

   DOM 只有一份，所以 base.html 讀 .md-header__option .md-select__link 的語言
   偏好與 bundle.js 的 palette 都照常運作。
   ========================================================================== */

/* 短站名。標題在 390px 上收掉兩顆圖示之後有 178px，完整站名要 236px，還是會
   截斷。短站名走 config，因為 header.html 是三個語系共用的符號連結。

   這一項的斷點跟抽屜不同，維持 44.9375em。720px 起標題那一格已經有四百多 px，
   完整站名放得下，沒有理由換掉。 */
.anoni-site-name--short {
  display: none;
}

@media screen and (max-width: 44.9375em) {
  .anoni-site-name {
    display: none;
  }

  .anoni-site-name--short {
    display: inline;
  }
}

.anoni-settings__button.md-header__button {
  display: inline-block;
}

/* 窄螢幕只留圖示。文字要多約 32px，而標題那一格在 320px 上連短站名都放不下
   （108px 對 116px）、360px 只剩約 30px，擠進去站名就開始截斷。斷點跟
   anoni-variant 那顆藥丸的標籤取同一個。 */
.anoni-settings__button-label {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .anoni-settings__button.md-header__button {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
    width: auto;
  }

  .anoni-settings__button-label {
    display: inline;
    font-size: 0.7rem;
    line-height: 1;
  }
}

/* overlay 與抽屜都在 .md-header__inner 裡面。.md-header 是 z-index 4 的堆疊
   環境，抽屜放到 header 外面會被 Material 的 .md-overlay（z-index 5）蓋住。
   放在裡面之後，整個 header 開啟時提到 6，overlay 才遮得到 header 這一條，
   讀者不會在抽屜開著的時候還按得到漢堡與搜尋。 */
#__settings:checked ~ .md-header {
  z-index: 6;
}

.anoni-settings__overlay {
  background-color: #0000008a;
  display: block;
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 0.25s, visibility 0ms 0.25s;
  visibility: hidden;
  z-index: 1;
}

#__settings:checked ~ .md-header .anoni-settings__overlay {
  opacity: 1;
  transition: opacity 0.25s, visibility 0ms;
  visibility: visible;
}

/* 關閉時用 visibility:hidden 把整個抽屜移出 tab 順序。留在畫面外但還可以
   tab 進去的話，讀者會在看不到東西的狀態下走進一串連結。 */
.anoni-settings {
  background-color: var(--md-default-bg-color);
  /* 抽屜長在 .md-header 裡面，文字色從 header 繼承下來是 --md-primary-bg-color
     （白的）。底下每一列都各自指定過顏色所以看不出問題，直到放進一顆用
     color:inherit 的 .anoni-banner-action，白字落在白底上整顆變空白。
     在容器這一層定一次，之後往抽屜裡加東西不會再踩到。標題列自己會覆蓋回
     primary 那組。 */
  color: var(--md-default-fg-color);
  /* 字級也要在容器定一次，理由跟上面的文字色一樣。Material 的 body 是 .5rem
     （10px），各元件自己設自己的。抽屜裡每一列都指定過所以看不出問題，直到
     放進一顆 font:inherit 的 .anoni-banner-action，那顆按鈕就掉到 10px，比
     旁邊每一列都小，連它自己底下的狀態列都比它大。底部提示卡那份沒事，是因為
     .anoni-toast 有設 .7rem。 */
  font-size: 0.7rem;
  bottom: 0;
  display: block;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0ms 0.25s;
  visibility: hidden;
  width: 12.1rem;
  z-index: 2;
}

#__settings:checked ~ .md-header .anoni-settings {
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0ms;
  visibility: visible;
}

.anoni-settings__head {
  align-items: center;
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  display: flex;
  height: 2.4rem;
  padding: 0 0.4rem 0 0.8rem;
}

.anoni-settings__title {
  flex-grow: 1;
  font-size: 0.8rem;
  font-weight: 700;
}

.anoni-settings__close {
  cursor: pointer;
  padding: 0.4rem;
}

.anoni-settings__close svg {
  display: block;
  fill: currentcolor;
  height: 1.2rem;
  width: 1.2rem;
}

/* 離線閱讀那一頁的入口。排版跟語言那幾列一致，兩組並排時左側圖示欄對得起來 */
.anoni-settings__link {
  align-items: center;
  color: var(--md-default-fg-color);
  display: flex;
  font-size: 0.7rem;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
}

.anoni-settings__link-icon {
  display: block;
  flex-shrink: 0;
}

.anoni-settings__link-icon svg {
  display: block;
  fill: currentcolor;
  height: 0.9rem;
  width: 0.9rem;
}

.anoni-settings__update:not([hidden]) {
  display: block;
  padding: 0.2rem 0.8rem 0.8rem;
}

/* 按鈕撐滿抽屜寬度。抽屜只有 12.1rem，靠左的窄按鈕在這個寬度裡看起來像沒排好 */
.anoni-settings__update .anoni-banner-action {
  justify-content: center;
  width: 100%;
}

/* 退出開關那一組。整組連群組標題都由 js/analytics.js 建出來，所以這裡的規則要
   認得 JS 給的 class。標題自己帶 .anoni-settings__group 的內距，按鈕與說明另外
   包一層，兩層都加內距的話左右會多縮排一次。 */
.anoni-settings__optout-body {
  padding: 0.2rem 0.8rem 0.8rem;
}

.anoni-settings__optout .anoni-banner-action {
  justify-content: center;
  width: 100%;
}

.anoni-settings__status {
  color: var(--md-default-fg-color--light);
  font-size: 0.62rem;
  line-height: 1.35;
  margin: 0.4rem 0 0;
  text-wrap: pretty;
}

.anoni-settings__group {
  color: var(--md-default-fg-color--light);
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  margin: 0;
  padding: 0.8rem 0.8rem 0.2rem;
}

/* .md-header__option 在 header 裡是橫排，抽屜裡要直排。搜尋展開時 Material
   會把它壓成 max-width:0，那條規則在抽屜裡也要擋掉，否則抽屜內容會消失。 */
.anoni-settings .md-header__option,
[data-md-toggle="search"]:checked ~ .md-header .anoni-settings .md-header__option {
  display: block;
  max-width: none;
  opacity: 1;
  transition: none;
  white-space: normal;
}

/* header 上那顆循環切換的圖示按鈕在抽屜裡沒有用處，三個選項已經並排。

   兩條選擇器指同一件事，第二條是為了特異性。上游有一條
   .md-option:checked + label:not([hidden])，特異性 (0,3,1)，比只寫類別的
   (0,3,0) 高。讀者按過任何一個外觀選項之後，那條就把循環按鈕放出來，抽屜裡多
   一個沒有邊框的燈泡圖示夾在選項中間。第二條補上 :not([hidden]) 湊到 (0,4,0)，
   B 欄先比，壓得過去。 */
.anoni-settings .md-header__option > .md-header__button,
.anoni-settings .md-header__option > .md-header__button:not([hidden]) {
  display: none;
}

/* 外觀那三項排成一排三顆按鈕。原本一項一列，三列加上組標題佔掉抽屜上半部，
   「閱讀語言」以下三組都被推到要捲動才看得到的位置。三個選項是同一個問題的三個
   答案，並排比疊成三列更接近它們的關係，也是系統設定裡常見的擺法。

   只改 palette 這一份，語言那一份維持一項一列。語言的項數跟著 extra.alternate
   走，之後多一個語系就排不成一排。

   搜尋展開時的那條選擇器要一起指定。上面那組把 display 壓回 block，兩邊特異性
   相同，這一條靠排在後面才蓋得過去。 */
.anoni-settings [data-md-component="palette"],
[data-md-toggle="search"]:checked ~ .md-header .anoni-settings [data-md-component="palette"] {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem 0.8rem 0;
}

/* 抽屜寬 12.1rem，兩側各留 0.8rem，扣掉兩道 0.2rem 的間隙，每一顆約 67px，
   文字可用寬度 59px。「跟隨系統」在 0.6rem 下量到 48px，一行排得下，英文的
   Follow system 斷成兩行，三顆靠 flex 的預設拉伸維持同高。

   圖示與名稱疊成兩層，不橫排。橫排要放「跟隨系統」四個字加一顆圖示得有 70px，
   這個寬度給不起。

   邊框粗細與圓角取底下「檢查更新」那顆按鈕的同一組值，樣式定義在 base.html 的
   styles block。抽屜裡兩種可按的東西長得一致。 */
.anoni-settings__choice {
  align-items: center;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.15rem;
  color: var(--md-default-fg-color);
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.6rem;
  gap: 0.15rem;
  justify-content: center;
  line-height: 1.3;
  min-width: 0;
  padding: 0.35rem 0.15rem;
  text-align: center;
}

/* 滑過轉成強調色，跟「檢查更新」那顆的 hover 一致 */
.anoni-settings__choice:hover {
  border-color: var(--md-accent-fg-color);
}

/* 鍵盤焦點的框。上游有一條 .md-option.focus-visible + label，套的是緊接在後面
   那顆循環按鈕，而那顆在抽屜裡是 display:none，框畫在看不見的元素上。這裡把它
   接到再下一格的選項按鈕。Material 用的是自己那支 polyfill 加的 focus-visible
   類別，原生的 :focus-visible 另寫一條，兩種都接得住，也不會因為其中一個選擇器
   不被認得就整條失效。 */
.anoni-settings .md-option.focus-visible + .md-header__button + .anoni-settings__choice {
  outline-color: var(--md-accent-fg-color);
  outline-style: auto;
}

.anoni-settings .md-option:focus-visible + .md-header__button + .anoni-settings__choice {
  outline-color: var(--md-accent-fg-color);
  outline-style: auto;
}

/* 兩個字的名稱斷行時兩行等長，英文的 Follow system 不會斷成一長一短 */
.anoni-settings__choice-text {
  text-wrap: balance;
}

.anoni-settings__choice-icon {
  display: block;
  flex-shrink: 0;
}

.anoni-settings__choice-icon svg {
  display: block;
  fill: currentcolor;
  height: 0.9rem;
  width: 0.9rem;
}

/* 勾號跟圖示同尺寸，也排在圖示那一格，換上去的時候按鈕高度與名稱位置都不變 */
.anoni-settings__choice-mark {
  display: none;
}

.anoni-settings__choice-mark svg {
  display: block;
  fill: var(--md-accent-fg-color);
  height: 0.9rem;
  width: 0.9rem;
}

/* 目前選的是哪一個，看上游那顆循環 label 的 hidden。bundle.js 每次換配色都會
   把 index 對應的那一顆解除 hidden，其餘關掉，所以它一定跟著現況走。

   不綁 input 的 :checked，因為第一次進站三顆 radio 都還沒被勾選（配色是從
   localStorage 或 prefers-color-scheme 算出來的），綁 :checked 會整排都沒有
   選中的樣子。

   順序是 input、循環 label、抽屜選項，由 palette.html 固定，中間不能插東西。 */
.anoni-settings .md-header__button:not([hidden]) + .anoni-settings__choice {
  background-color: var(--md-accent-fg-color--transparent);
  border-color: var(--md-accent-fg-color);
}

/* 選到的那一顆把圖示換成勾號，兩者在 palette.html 裡是相鄰的兩格，換過去名稱
   不會移位。三顆並排之後，選中與否原本只剩邊框與底色的差別，那是純色彩的區別，
   色弱或高對比模式下的讀者分不出來。名稱就在勾號底下一行，換掉圖示不影響認出
   這一顆是哪一個，Material Design 3 的 filter chip 也是這樣做。 */
.anoni-settings .md-header__button:not([hidden]) + .anoni-settings__choice .anoni-settings__choice-icon {
  display: none;
}

.anoni-settings .md-header__button:not([hidden]) + .anoni-settings__choice .anoni-settings__choice-mark {
  display: block;
}

/* 語言切換在 header 是滑過才展開的下拉，抽屜裡直接把清單攤開 */
/* .md-select__inner 在 header 是 position:absolute 的浮層，靠 hover 才展開。
   抽屜裡要它回到文件流，位置與動畫那一整組都得歸零，只留清單本身。 */
.anoni-settings .md-select__inner {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  left: auto;
  margin-top: 0;
  max-height: none;
  opacity: 1;
  position: static;
  top: auto;
  transform: none;
  transition: none;
  z-index: auto;
}

/* 上游的 .md-select:hover .md-select__inner 與 :focus-within 那一條特異性是
   (0,3,0)，壓得過上面只有兩個類別的 (0,2,0)。滑鼠移進抽屜的語言那一區，清單就被
   上游的 translate3d(-50%, 0, 0) 往左推半個自己的寬度，1280px 實測位移 121px，
   兩個語言名稱有一半掉到抽屜外被裁掉。

   960px 以下不會發生，上面「語言切換選單」那一組的窄螢幕覆寫已經把 hover 的
   transform 改成 translate3d(0, 0, 0)。抽屜改成所有寬度都存在之後，桌面才露出來。

   補一層 .anoni-settings 湊到 (0,4,0) 壓回去。max-height 一起接住，上游同一條把
   展開值設成 10rem，語言再多幾個清單就會長出捲軸。 */
.anoni-settings .md-select:focus-within .md-select__inner,
.anoni-settings .md-select:hover .md-select__inner {
  max-height: none;
  transform: none;
}

.anoni-settings .md-select__inner::after {
  display: none;
}

.anoni-settings .md-select {
  display: block;
}

.anoni-settings .md-select > .md-header__button {
  display: none;
}

.anoni-settings .md-select__list {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}

/* .md-select__item 帶 1.8rem 的 line-height，加上連結自己的 padding，兩個
   語言之間會空出比外觀那三項多一倍的距離。 */
.anoni-settings .md-select__item {
  line-height: 1.4;
}

/* 跟外觀那三項共用一組左側圖示欄，兩組並排時對得起來 */
.anoni-settings .md-select__link {
  align-items: center;
  color: var(--md-default-fg-color);
  display: flex;
  font-size: 0.7rem;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  width: 100%;
}

.anoni-settings .anoni-lang__icon {
  display: block;
  flex-shrink: 0;
}

.anoni-settings .anoni-lang__icon svg {
  display: block;
  fill: currentcolor;
  height: 0.9rem;
  width: 0.9rem;
}

/* ==========================================================================
   .post-tag — category label in front of each row of "Recent updates" on the
   home page. Emitted by hooks/latest_posts.py as `Category`{.post-tag
   .post-tag--community}.

   Classes replaced inline styles because an inline colour cannot follow the
   colour scheme: every one of the six values failed AA 4.5 in one mode or the
   other, and the old default --brand-cyan-800 scores only 2.80 on slate.
   The label is a <code> element, so contrast is measured against Material's
   code background: #f5f5f5 in light, #272a35 in slate. The number at the end
   of each line is the measured ratio. All six pass AA 4.5 in both modes.

   The category-to-class table lives in CATEGORY_CLASSES in
   hooks/latest_posts.py. Anything not listed there falls back to the neutral
   colour. The news and tech hues sit close to --guide-scenarios and the
   indigo the former Advanced category used, which are sidebar navigation UI
   colours used in a different component, so the hue is reused but the token
   is not.
   ========================================================================== */

.md-typeset .post-tag            { color: #546e7a; }  /* default   4.95 */
.md-typeset .post-tag--update    { color: #2e7d32; }  /* update    4.70 */
.md-typeset .post-tag--event     { color: #b35309; }  /* event     4.63 */
.md-typeset .post-tag--community { color: #006d99; }  /* community 5.28 */
.md-typeset .post-tag--news      { color: #ad1457; }  /* news      6.39 */
.md-typeset .post-tag--tech      { color: #673ab7; }  /* tech      6.72 */

[data-md-color-scheme="slate"] .md-typeset .post-tag            { color: #b0bec5; }  /* 7.50 */
[data-md-color-scheme="slate"] .md-typeset .post-tag--update    { color: #81c784; }  /* 7.10 */
[data-md-color-scheme="slate"] .md-typeset .post-tag--event     { color: #ffb74d; }  /* 8.26 */
[data-md-color-scheme="slate"] .md-typeset .post-tag--community { color: #4dbfff; }  /* 6.95 */
[data-md-color-scheme="slate"] .md-typeset .post-tag--news      { color: #f48fb1; }  /* 6.41 */
[data-md-color-scheme="slate"] .md-typeset .post-tag--tech      { color: #b39ddb; }  /* 5.97 */

/* ==========================================================================
   文章章節的適合讀者標籤 .role-tag（沿用 .sess-tag 的 soft chip 淡底深字）
   淺色五組對比 8.35 / 5.71 / 8.68 / 7.85 / 9.56，深色 6.19 / 5.06 / 5.89 /
   6.21 / 5.86，全部過 AA 4.5。顏色只是輔助，標籤本身帶文字，色盲與單色
   列印都讀得到。不挪用 --guide-* sidebar 導覽色
   ========================================================================== */
.md-typeset .role-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.32rem;
  margin: -0.3rem 0 1.2rem;
  line-height: 1.7;
}
.role-tags__label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--neutral-muted);
  white-space: nowrap;
}
.role-tags__note {
  flex: 1 1 100%;
  font-size: 0.68rem;
  color: var(--neutral-muted);
}
.role-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.02rem 0.45rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.role-tag--all   { background: #eceff1; color: #37474f; border-color: #b0bec5; }
.role-tag--faith { background: #e0f2f1; color: #00695c; border-color: #80cbc4; }
.role-tag--civic { background: #e8eaf6; color: #283593; border-color: #9fa8da; }
.role-tag--dev   { background: #fce4ec; color: #880e4f; border-color: #f48fb1; }
.role-tag--press { background: #efebe9; color: #4e342e; border-color: #bcaaa4; }

[data-md-color-scheme="slate"] .role-tag--all   { background: rgba(120,144,156,.20); color: #b0bec5; border-color: rgba(120,144,156,.45); }
[data-md-color-scheme="slate"] .role-tag--faith { background: rgba(0,150,136,.20);   color: #4db6ac; border-color: rgba(0,150,136,.45); }
[data-md-color-scheme="slate"] .role-tag--civic { background: rgba(63,81,181,.22);    color: #9fa8da; border-color: rgba(63,81,181,.50); }
[data-md-color-scheme="slate"] .role-tag--dev   { background: rgba(233,30,99,.18);    color: #f48fb1; border-color: rgba(233,30,99,.45); }
[data-md-color-scheme="slate"] .role-tag--press { background: rgba(121,85,72,.25);    color: #bcaaa4; border-color: rgba(121,85,72,.50); }

/* --neutral-muted #546e7a 在 slate 底只有 2.93，深色另給一階亮的灰藍（6.12 過 AA） */
[data-md-color-scheme="slate"] .role-tags__label,
[data-md-color-scheme="slate"] .role-tags__note { color: #90a4ae; }

/* 章節標題的報告頁碼移到標籤列，虛線外框與實心角色標籤區隔開 */
.role-tags__page {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.02rem 0.45rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  border: 1px dashed var(--neutral-border);
  color: var(--neutral-muted);
  font-variant-numeric: tabular-nums;
}
[data-md-color-scheme="slate"] .role-tags__page { border-color: rgba(144,164,174,.45); color: #90a4ae; }