/* 「頭痛之外」— 樣式表
   原則：行動優先、任何內容都不得撐破版面、字級與行距以長文可讀為準。 */

/* ---------- 基礎重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 平滑捲動只在使用者「明確沒有」要求減少動態時才開。
   刻意用 no-preference，而不是預設開啟再由 reduce 關掉 ⸺
   偵測不到偏好時，安靜地直接跳過去才是安全的預設值。
   前庭功能障礙與偏頭痛患者對捲動動畫特別敏感，
   在一個神經內科的站上把這件事做反格外諷刺。 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* ---------- 設計變數 ---------- */
:root {
  /* 品牌色 #182A55。這個深藍直接當連結色會太接近內文的近黑，
     讀者分不出哪些字可以點，所以 --accent 提亮到 #23417d，
     對 --paper 有 9.6:1，既明顯是藍、也明顯不是內文。
     #182A55 本身留給 favicon、社群卡與 theme-color 這些純色塊用途。 */
  --ink: #191c24;
  --ink-soft: #4d515c;
  /* 中繼資料、圖說、頁尾都用這個灰。偏冷以配合藍色系，
     對 --paper 為 4.7:1，過 WCAG AA 的 4.5:1，維持弱化感。 */
  --ink-faint: #6e727c;
  --paper: #fbfcfd;
  --paper-raised: #ffffff;
  --rule: #e0e4ec;
  --accent: #23417d;
  --accent-soft: #edf1f8;
  --focus: #2b6cb0;

  /* 內容文字區寬度，Hero 圖以此為上限。
     長文一行超過 45 個中文字，視線從行尾回行首就容易跑錯行，所以文章欄
     刻意維持窄 ⸺ 這個值只在 48rem 以上才放寬到 42.5rem（680px）。 */
  --measure: 40rem;
  /* 首頁在寬螢幕的容器上限。首頁的工作是讓人一眼看完站上有什麼，不是逐字讀，
     兩欄卡片需要的寬度和長文該有的行寬是兩回事，所以分成兩個變數。 */
  --measure-home: 62.5rem;
  --gutter: 1.25rem;
  --radius: 12px;

  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Noto Sans Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 底色刻意用帶藍的深色而不是近黑，和品牌色 #182A55 同一個色調家族。
       但仍然壓得夠暗 ⸺ 深色模式的用途是降低夜間閱讀的眩光，
       底色太淺就失去意義，文字的層次也會變扁。

       連結則反過來提亮：#182A55 在深底上幾乎融進背景，看不出是連結。 */
    --ink: #e9ebf1;
    --ink-soft: #adb3c1;
    /* 對 --paper-raised 為 4.8:1，過 WCAG AA */
    --ink-faint: #9298a8;
    --paper: #1b2338;
    --paper-raised: #232c45;
    --rule: #363f5c;
    --accent: #a8c0ea;
    --accent-soft: #252f4a;
    --focus: #7cb3ea;
  }
}

/* ---------- 版面骨架 ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  /* 中英數混排時留一點呼吸空間 */
  letter-spacing: 0.01em;
  /* 保險：任何漏網的長字串都不該產生橫向捲軸 */
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 內容容器。用 min() 讓左右邊距在窄螢幕自動吃掉，不會溢出。

   --wrap-max 沒設定時就等於文字區寬度，也就是全站的預設行為；
   首頁在寬螢幕會把它覆寫成 --measure-home。覆寫放在 .wrap 這一層，
   頁首、主內容、頁尾三段的容器才會一起變寬、左緣對齊 ⸺
   只放寬其中一段的話，站名和文章卡片會各站各的邊。 */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap-max, var(--measure)));
  margin-inline: auto;
  /* flex/grid 子元素若沒有 min-width:0，長內容會把容器撐開 */
  min-width: 0;
}

main {
  flex: 1 0 auto;
  padding-block: 1.5rem 3.5rem;
}

/* ---------- 頁首 ---------- */
/* 一列兩端：左邊是身分（站名＋副標），右邊是導覽（只有首頁會有）。
   文章頁不傳 headerNav，右邊就是空的，身分靠左，看起來和以前一樣。

   border-bottom 不能拿掉。淺色模式 --paper 與 --paper-raised 的對比只有
   1.03:1，深色也才 1.13:1，肉眼等於同一個顏色 ⸺ 少了這條線，頁首就沒有
   下緣。底色的作用是配合這條線，不是取代它。 */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  padding-block: 1rem;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  /* 站名（1.375rem）與導覽（0.875rem）字級差很多，baseline 對齊會讓
     導覽看起來掉在站名下面。改成垂直置中。 */
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

/* 站名與副標綁成一組，兩者之間的關係不受右邊導覽影響 */
.site-identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.site-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0;
  min-width: 0;
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover {
  color: var(--accent);
}

.site-byline {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
  min-width: 0;
}

/* ---------- Hero ---------- */
/* 圖片等比例縮放，寬度不超過內容文字區寬度（.wrap 已限制為 --measure）。 */
.hero {
  margin: 0 0 2rem;
}

.hero img {
  display: block;
  width: auto;
  height: auto; /* 等比例，不變形 */

  /* 寬度不超過內容文字區（.wrap 已限制為 --measure）。 */
  max-width: 100%;

  /* 直式照片若只限制寬度，在桌機上會高得把標題和正文整個推出螢幕。
     再加一道高度上限，瀏覽器會等比例縮小，不會裁切也不會變形。 */
  max-height: 72vh;

  /* 受高度上限而變得比容器窄時置中 */
  margin-inline: auto;

  border-radius: var(--radius);
  background: var(--accent-soft);
}

.hero figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---------- 首頁 ---------- */
.intro {
  margin-bottom: 2.25rem;
}

.intro h1 {
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}

.intro p {
  color: var(--ink-soft);
  font-size: 1rem;
}

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;

  /* 從導覽條跳過來時，標題不要貼在視窗最上緣 */
  scroll-margin-top: 1.5rem;
}

/* ---------- 首頁錨點導覽 ---------- */
/* 只有首頁會輸出，位置在頁首右側（build.mjs 的 layout({ headerNav })）。
   目的是讓第一次來的人一眼看到站上有什麼。刻意做得很輕 ⸺
   這不是入口網站，導覽應該像一行小字，不是一排按鈕：沒有底色、
   沒有外框、沒有圓角，也不標示當前位置。
   也刻意不做 sticky：手機上一直吃掉垂直空間，這個站的調性是克制的。

   下面這組 margin 與上下髮絲線，是這個元件「自己獨立成一條橫幅」時的
   樣子。實際擺進頁首之後由 .site-header .site-nav 覆寫，見下一段。
   保留預設值是為了讓元件不必知道自己被放在哪裡。 */
.site-nav {
  margin: 1.75rem 0 2.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* 進了頁首就要把自帶的兩條髮絲線拿掉：頁首本身已經有 border-bottom，
   再加上下兩條，右上角會圈成一個框，比導覽本身還搶眼。 */
.site-header .site-nav {
  margin: 0;
  border-top: 0;
  border-bottom: 0;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 窄螢幕自動換行，不擠爆也不橫向溢出 */
  /* row-gap 不能是 0：字級放大到 140% 以上時三個項目會折成兩列，
     沒有列距的話兩列觸控目標會直接貼在一起。正常寬度不折行，看不出差別。 */
  gap: 0.25rem 1.75rem;
  min-width: 0;
}

.site-nav a {
  display: block;
  /* 上下各 0.7rem，加上 0.875rem×1.6 的行高，點擊區約 45px，
     過行動裝置 44px 的最小觸控目標，但視覺上仍然只是一行小字。 */
  padding-block: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* ---------- 門診專長 ---------- */
/* Hero 圖片裡也有這些字，但那是烤進像素的，手機上縮到讀不了，
   搜尋引擎與螢幕閱讀器也讀不到。這裡是真正的網頁文字版本。

   曾經做成一排藥丸（圓角、有框、底色 --accent-soft），但那違反了這個站
   已經成立的視覺規則：有框的圓角塊 = 可以點（文章卡、目錄都是這樣）。
   專長清單點不下去，於是每個讀者都要試一次才知道。現在改成
   「組名 + 一句文字」的描述清單 ⸺ 沒有外框、沒有底色、沒有 hover，
   項目之間用真正的頓號分隔（頓號在 HTML 裡，不是 ::after 生的，
   否則 textContent 會把所有詞黏成一串），一眼就是文字，不是控制項。 */
.specialty-groups {
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.specialty-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  min-width: 0;
}

/* 組與組之間只用一條細線，不是每組各自框起來 ⸺ 線是分隔，框是容器。 */
.specialty-group + .specialty-group {
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
}

.specialty-group dt {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* 這條短線刻意沿用 .toc-heading::before（只把 0.95rem × 3px 收成
   0.75rem × 2px 以配合較小的組名）。它在這個站上的既有意思是
   「這是一個小節的名字」，不是「這裡可以點」⸺ 別把它換成別的記號，
   也別在其他可點元素上重複使用，那會把這個約定弄糊。 */
.specialty-group dt::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: 0.32em;
  margin-right: 0.5rem;
}

/* 字級與行高跟內文同一套，不是 UI 小字：這是給人讀的一句話。
   --accent 只留給那條短線，文字色一律 --ink / --ink-soft，
   免得又被誤認成連結。 */
.specialty-group dd {
  margin: 0;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- 關於作者 ---------- */
/* site.config.json 的 sameAs 與 worksFor 是寫給機器的身分宣告，讀者看不到。
   這一區是同一份資訊的可見版本：病人搜尋進來，要知道這位醫師在哪裡看診、
   怎麼掛號。卡片外觀刻意與文章卡、目錄一致，讀者一眼認得出是同一個系統。 */
.author-body {
  /* <address> 預設是斜體，中文字型只能合成假斜體，很難看 */
  font-style: normal;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.3rem;
  min-width: 0;
}

.author-name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}

.author-role {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-faint);
}

.author-intro {
  margin: 0.85rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* 連結與上面的身分敘述之間拉一條線：上半是「他是誰」，下半是「可以去哪」 */
.author-links {
  list-style: none;
  display: grid;
  /* 連結本身用上下內距撐出觸控目標，列距因此收掉，否則整塊會太鬆 */
  gap: 0.125rem;
  margin: 1.1rem 0 0;
  padding: 0.45rem 0 0;
  border-top: 1px solid var(--rule);
}

.author-links a {
  /* inline 元素的命中範圍只有字身高度（約 21.6px），指頭點不準。
     改成 inline-block 讓上下內距撐開：15px×1.6 = 24px 行高，
     加上下各 0.7rem（11.2px），實測總高 46.4px。
     留了 2.4px 餘裕，日後微調 font-size 也不會靜默掉到 44px 以下。 */
  display: inline-block;
  padding-block: 0.7rem;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  min-width: 0; /* 長標籤在窄螢幕要能折行，不得撐破卡片 */
}

.author-links a:hover {
  text-decoration: underline;
}

/* 外部連結指示。純裝飾，HTML 那邊已標 aria-hidden。 */
.author-links .ext {
  margin-left: 0.15rem;
  font-size: 0.8125em;
  white-space: nowrap;
  /* 少數環境會把 U+2197 當 emoji 上色，明確要求文字外觀 */
  font-variant-emoji: text;
}

/* 中文任兩字之間都能斷行，所以窄螢幕上箭頭會自己掉到下一行變成孤字。
   前面補一個不斷行空格（U+00A0，換行類別 GL，前後皆不得斷開），
   把箭頭黏在最後一個字後面。用生成內容處理，不動 DOM、不動錨點文字。 */
.author-links .ext::before {
  content: "\00a0";
}

.page-home .author-bio {
  margin-top: 3rem;
}

/* 文章結尾的精簡版。和正文拉開足夠距離，讀者知道文章已經結束。 */
.post-footer {
  margin-top: 3.5rem;
}

.card-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 0.9rem;
  min-width: 0; /* grid 子項防溢出 */
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  border-color: var(--accent);
}

.card-link {
  color: inherit;
  text-decoration: none;
  display: block;
  min-width: 0;
}

.card-title {
  font-size: 1.1875rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.card-link:hover .card-title {
  color: var(--accent);
}

.card-summary {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

/* ---------- 中繼資料列（作者／日期／計數）---------- */
.meta {
  display: flex;
  flex-wrap: wrap; /* 窄螢幕自動換行，不擠爆 */
  align-items: center;
  gap: 0.3rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  line-height: 1.6;
  margin: 0;
  min-width: 0;
}

.meta > * {
  min-width: 0;
}

.meta .author {
  color: var(--ink-soft);
  font-weight: 600;
}

.views[hidden] {
  display: none;
}

.views::before {
  content: "👁 ";
}

/* ---------- 文章 ---------- */
.post-header {
  margin-bottom: 1.75rem;
}

.post-header h1 {
  font-size: clamp(1.5rem, 5.5vw, 2.05rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}

.post-body {
  min-width: 0;
  /* 中文方塊字沒有西文的上下伸部當視覺呼吸空間，行距要比英文版面寬。
     2.05 是長文久讀不累、又不至於散掉的落點。 */
  line-height: 2.05;
}

/* 段落之間的距離明顯大於行距，讀者一眼看得出哪裡是段落邊界。
   行距 2.05 約 2.2rem，段距取 2rem 已能清楚區隔。 */
.post-body > * + * {
  margin-top: 2rem;
}

.post-body h2 {
  font-size: 1.3125rem;
  line-height: 1.55;
  margin-top: 2.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--rule);
  letter-spacing: 0.02em;
}

.post-body h3 {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-top: 2rem;
  color: var(--accent);
}

.post-body ul,
.post-body ol {
  padding-left: 1.4rem;
}

.post-body li + li {
  margin-top: 0.6rem;
}

.post-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
}

.post-body blockquote > * + * {
  margin-top: 0.75rem;
}

.post-body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-inline: auto;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2rem;
}

/* 連結：長網址不得撐破版面 */
a {
  color: var(--accent);
  overflow-wrap: anywhere;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 程式碼與表格：以捲動容器包住，絕不撐破 ---------- */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.code-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.code-scroll pre {
  margin: 0;
  padding: 0.9rem 1rem;
  min-width: 0;
}

.code-scroll code {
  background: none;
  padding: 0;
  white-space: pre;
  overflow-wrap: normal;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);

  /* 內容超出時左右邊緣自動浮現陰影，提示還可以再滑。
     background-attachment 的 local/scroll 混用讓它隨捲動位置自己消長，不需要 JS。 */
  background-image: linear-gradient(
      to right,
      var(--paper-raised) 30%,
      rgba(0, 0, 0, 0)
    ),
    linear-gradient(to left, var(--paper-raised) 30%, rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)),
    radial-gradient(
      farthest-side at 100% 50%,
      rgba(0, 0, 0, 0.16),
      rgba(0, 0, 0, 0)
    );
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

table {
  border-collapse: collapse;
  /* 撐到內容需要的自然寬度，但至少填滿容器。
     窄螢幕時由 .table-scroll 橫向捲動，而不是把每一格擠成兩三行。 */
  width: max-content;
  min-width: 100%;
  font-size: 0.9375rem;
  background: transparent;
}

th,
td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th {
  background: var(--accent-soft);
  font-weight: 600;
  white-space: nowrap;
}

/* 首欄釘住。窄螢幕橫向捲動時，若列標題跟著捲走，右側就只剩一排
   無法對應的數字。border-collapse: collapse 下 sticky 儲存格的框線
   不會跟著移動，因此分隔線改用 box-shadow。 */
.table-scroll th:first-child,
.table-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--rule);
}

.table-scroll th:first-child {
  background: var(--accent-soft);
  z-index: 2;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- 本篇目錄 ---------- */
.toc {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem 1.45rem;
  margin-bottom: 2.5rem;
  min-width: 0;
}

/* 標題要有份量，讀者一眼認出「這裡是目錄」而不是某段引言。
   用實心底線把標題和清單分開，區塊結構更明確；
   前面那截強調色短線提示這是導覽而非內文。 */
.toc-heading {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}

.toc-heading::before {
  content: "";
  display: inline-block;
  width: 0.95rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: 0.3em;
  margin-right: 0.6rem;
}

.toc-list,
.toc-sub {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list > li + li {
  margin-top: 0.55rem;
}

.toc-sub {
  margin: 0.45rem 0 0 0.9rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule);
}

.toc-sub li + li {
  margin-top: 0.4rem;
}

.toc a {
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  display: inline-block;
}

.toc-sub a {
  font-size: 0.9375rem;
  color: var(--ink-faint);
}

.toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* 目前讀到的段落。用邊框而非只變色，色盲讀者也分得出來。 */
.toc a[aria-current] {
  color: var(--accent);
  font-weight: 600;
}

/* 點目錄跳過去時，標題不要黏在視窗最上緣 */
.post-body :is(h2, h3) {
  scroll-margin-top: 1.5rem;
}

/* ---------- 捲動揭露 ---------- */
/* 沒有 JS（html 沒有 .js）時，這些規則完全不生效，
   內容直接是最終狀態。動畫是加分，不是前提。 */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 長條圖 ---------- */
.chart {
  margin: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
  min-width: 0;
}

.chart-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.chart-bars {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chart-row {
  /* 標籤與數值同一列、長條獨立一列。
     三欄並排在窄螢幕會把長條壓到只剩一小截，這樣排就沒有那個問題。 */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "track track";
  gap: 0.3rem 0.75rem;
  align-items: baseline;
  min-width: 0;
}

.chart-row + .chart-row {
  margin-top: 1.05rem;
}

.chart-label {
  grid-area: label;
  font-size: 0.875rem;
  color: var(--ink-soft);
  min-width: 0;
}

.chart-value {
  grid-area: value;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  /* 數字跑動時位數會變，等寬數字才不會讓右緣抖動 */
}

.chart-track {
  grid-area: track;
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}

.chart-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
}

.js .reveal:not(.is-visible) .chart-fill {
  width: 0;
}

.chart-source {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---------- 數值 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.85rem;
  min-width: 0;
}

.stat {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.05rem;
  min-width: 0;
}

.stat-value {
  font-size: clamp(1.5rem, 6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin: 0;
}

.stat-label {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- 回到頂部 ---------- */
.to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20;

  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;

  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--accent);
  cursor: pointer;
  padding: 0;

  box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
  animation: to-top-in 0.25s ease both;
}

.to-top[hidden] {
  display: none;
}

.to-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

.to-top:hover {
  border-color: var(--accent);
}

@keyframes to-top-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- 頁面切換 ---------- */
/* 原生跨文件轉場。支援的瀏覽器會在換頁時交叉淡入淡出，
   不支援的瀏覽器直接照舊，不需要任何 JS。 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: 0.2s;
}

::view-transition-new(root) {
  animation-duration: 0.28s;
}

/* 不支援 view transition 的瀏覽器退而求其次：進站時淡入 */
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    body {
      animation: page-fade-in 0.3s ease both;
    }
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- 動態偏好 ---------- */
/* 前庭功能障礙與偏頭痛患者對動態特別敏感。這是一個神經內科的
   部落格，這件事不能只當作勾選項目 ⸺ 全部關掉，內容照常呈現。 */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .reveal:not(.is-visible) .chart-fill {
    width: var(--w);
  }

  .chart-fill {
    transition: none;
  }

  .to-top {
    animation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- 返回連結 ---------- */
.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* ---------- 頁尾 ---------- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
  padding-block: 1.75rem 2.5rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink-faint);
}

.site-footer h2 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.site-footer > .wrap > * + * {
  margin-top: 1.25rem;
}

.credit {
  overflow-wrap: anywhere;
}

.disclaimer {
  border-left: 3px solid var(--rule);
  padding-left: 0.85rem;
}

.colophon {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  color: var(--ink-faint);
}

/* ---------- 寬螢幕微調 ---------- */
@media (min-width: 40rem) {
  :root {
    --gutter: 2rem;
  }

  body {
    font-size: 1.09375rem;
  }

  main {
    padding-block: 2.5rem 4.5rem;
  }

  /* 站名放大之後頁首變高，Hero 直接接在下面會顯得擠。
     只補首頁的 Hero，不動共用的 main padding ⸺ 那會連帶把文章頁的
     .back-link 一起往下推。 */
  .page-home .hero {
    margin-top: 0.5rem;
  }

  .card {
    padding: 1.35rem 1.5rem 1.1rem;
  }
}

/* ---------- 桌機：文章欄稍微放寬 ---------- */
/* 640 → 680px，一行約 39 個中文字，仍在長文舒適的範圍內。
   刻意從 48rem 才開始，48rem 以下（手機與小平板）的行寬一個像素都不動 ⸺
   --measure 若在 :root 直接改掉，704px 到 767px 之間的版面會跟著移動。 */
@media (min-width: 48rem) {
  :root {
    --measure: 42.5rem;
  }
}

/* ---------- 桌機：首頁改成寬版面 ---------- */
/* 首頁是列表，不是長文。它可以、也應該用掉桌機多出來的寬度；
   文章頁則維持窄欄不動，兩者的需求本來就不一樣。

   斷點取 60rem（960px）：再窄一點，兩欄卡片會擠成兩條細長條，
   標題每行剩不到十個字，反而比單欄難讀。 */
@media (min-width: 60rem) {
  .page-home .wrap {
    --wrap-max: var(--measure-home);
  }

  /* 文章卡片兩欄。站主的決定：三欄在只有幾篇文章時會空掉，
     兩欄的卡片也比較寬，摘要不會被截成一小截。 */
  .page-home .card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  /* 同一列的兩張卡片高度由 grid 拉齊，但內容長短不一，
     日期那一行若各停在各自的位置會顯得歪。壓到卡片底部對齊。 */
  .page-home .card {
    display: flex;
    flex-direction: column;
  }

  .page-home .card .meta {
    margin-top: auto;
  }

  /* 門診專長：窄版面下組名在上、項目在下（兩行）；到了 1000px 的版面，
     組名收成左欄、項目排在右欄的同一條基線上，兩組的組名對齊成一直行。
     左欄給 10rem ⸺ 目前最長的組名「頭痛與偏頭痛」是六個中文字，
     16px 字級下約 100px，留了餘裕但不至於把右欄擠窄。 */
  .page-home .specialty-groups {
    gap: 0.7rem;
  }

  .page-home .specialty-group {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: baseline;
  }

  .page-home .specialty-group + .specialty-group {
    padding-top: 0.7rem;
  }

  /* 「關於作者」在寬版面下左右分欄：左邊是「他是誰」，右邊是「可以去哪」。
     一張 1000px 寬、只有三行字的卡片會空得很明顯，而把整段介紹拉成
     1000px 長的一行也不能讀。分欄同時解決這兩件事 ⸺ 左欄約 570px，
     介紹句一行約 37 個中文字，正好落在長文的舒適區。

     欄與欄之間用一條直線代替原本橫著的分隔線，語意不變：
     線的上面（或左邊）是身分，下面（或右邊）是連結。 */
  .page-home .author-body {
    display: grid;
    /* 三列對應姓名、職稱、介紹；最後一列吃掉剩餘高度，
       右欄才能用 1 / -1 從頭貫穿到底。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    grid-template-rows: auto auto 1fr;
    gap: 0 2.25rem;
    padding: 1.5rem 1.75rem 1.6rem;
  }

  .page-home .author-name,
  .page-home .author-role,
  .page-home .author-intro {
    grid-column: 1;
  }

  .page-home .author-links {
    grid-column: 2;
    grid-row: 1 / -1;
    align-content: start;
    margin: 0;
    padding: 0 0 0 2.25rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  /* 頁尾跟著容器變寬，但裡面的說明文字不該跟著拉長。
     邊框與版權那條線仍然齊整個版面，字收在可讀的行寬內。 */
  .page-home .credit p,
  .page-home .disclaimer p {
    max-width: var(--measure);
  }
}

/* ---------- 手機：頁首拆成上下兩段 ---------- */
/* 640px 以下，站名與導覽並排會把導覽擠成兩到三列。改成站名一段、
   導覽一段，導覽補回一條上緣髮絲線當作兩段之間的分隔。

   和下面 max-width: 22.5rem 那段是兩件事，不要合併 ⸺ 那一段調的是
   --gutter 與基礎字級，套用範圍與時機都不同。 */
@media (max-width: 39.999rem) {
  .site-header {
    padding-block: 0.875rem;
  }

  .site-header .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* 垂直空間在手機上比較貴：站名與副標改成同一列橫排，擠不下才折行 */
  .site-identity {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
  }

  .site-title {
    font-size: 1.25rem;
  }

  .site-header .site-nav {
    border-top: 1px solid var(--rule);
  }

  /* 320px 三項要排得下，橫向間距從 1.75rem 收到 1.5rem。
     列距維持 0.25rem，放大字級折行時兩列觸控目標才不會貼在一起。 */
  .site-header .site-nav ul {
    gap: 0.25rem 1.5rem;
  }
}

/* 螢幕極窄（例如 320px）時再收一點，確保不破框 */
@media (max-width: 22.5rem) {
  :root {
    --gutter: 0.875rem;
  }

  body {
    font-size: 1rem;
  }
}

@media print {
  .site-header,
  .site-footer,
  .back-link,
  .views {
    display: none;
  }
}