/*
 * 公開博客的基礎樣式。
 *
 * ★ 設計目標：讓學生選的配色**真的看得見**。
 *   前一版幾乎所有面都是白底 + 深墨字，配色只出現在連結上，
 *   結果不論選哪一組看起來都一樣（負責人回報「完全沒有顏色」）。
 *
 *   現在配色出現在四個地方，且都是大面積或高頻元素：
 *     1. 頁面底色用 --bg（配色的淡化底），不是純白
 *     2. 站頭有一條 --accent 的粗邊，站名點綴色塊
 *     3. 文章列表的日期、標籤、分隔線帶 --accent
 *     4. 回覆區整塊用 --comment-surface，與正文的 --surface 明確分開
 *
 *   對比度全部由 packages/themes/test/palettes.test.ts 機械保證，
 *   所以「加顏色」不會犧牲可讀性。
 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg,#fbfaf9);color:var(--text,#1a1a1a);
  font-family:var(--font-body);font-size:var(--font-size,19px);line-height:var(--line-height,1.85)}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.3;margin:1.8em 0 .6em;
  letter-spacing:-.01em}
h1{font-size:1.9em}h2{font-size:1.4em}h3{font-size:1.15em}
p{margin:0 0 1.25em}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:1000;background:var(--surface);padding:.6em 1em;
  border:2px solid var(--accent);border-radius:var(--radius)}

.uc-scope{max-width:var(--content-width,720px);margin:0 auto;padding:0 1.15rem 5rem}

/* ── 站頭 ───────────────────────────────────────────── */
.site-header{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:flex-end;padding:2.5rem 0 1.1rem;margin-bottom:2.5rem;
  border-bottom:3px solid var(--accent)}
.site-identity{display:flex;gap:.9rem;align-items:center;min-width:0}
.site-avatar{border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 3px var(--wash)}
.site-names{min-width:0}
.site-title{margin:0;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em}
/* 站名是導航連結，不是句中的行內連結，所以要滿足 24x24 觸控目標 */
.site-title a{color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px}
.site-title a:hover{color:var(--link)}
.site-tagline{margin:.15rem 0 0;color:var(--text-muted);font-size:.9rem}
.site-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.site-nav ul{display:flex;flex-wrap:wrap;gap:.2rem;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;
  border-radius:999px;color:var(--text-muted);text-decoration:none;font-size:.9rem}
.site-nav a:hover{background:var(--wash);color:var(--text)}

/* 後台入口：頁首右上，帶主色邊，明顯但不喧賓奪主 */
.platform-admin{display:inline-flex;align-items:center;min-height:38px;padding:0 .95rem;
  font-size:.82rem;font-weight:600;color:var(--link);text-decoration:none;
  border:1.5px solid var(--accent);border-radius:999px;background:var(--surface)}
.platform-admin:hover{background:var(--accent);color:var(--surface);border-color:var(--accent)}

/* ── 文章列表 ───────────────────────────────────────── */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.post-item{padding:1.6rem 0;border-bottom:1px solid var(--border)}
.post-item:first-child{padding-top:0}
.post-item:last-child{border-bottom:0}
.post-list-cards .post-item{background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:var(--radius);
  padding:1.3rem 1.4rem;margin-bottom:1rem}
.post-item-title{margin:0 0 .3rem;font-size:1.3em;line-height:1.35}
.post-item-title a{color:var(--text);text-decoration:none}
.post-item-title a:hover{color:var(--link)}
.post-item-summary{margin:.35rem 0 .5rem;color:var(--text-muted)}
.post-item-meta,.post-meta{color:var(--text-muted);font-size:.84em;margin:0}
.post-item-meta time,.post-meta time{color:var(--link);font-variant-numeric:tabular-nums}
.post-cover{width:100%;height:auto;border-radius:var(--radius);margin-bottom:.8rem}

/* ── 文章 ───────────────────────────────────────────── */
.post-page{padding-top:.5rem;position:relative}
.post-title{margin:0 0 .5rem;font-size:2.05em;line-height:1.25}
.post-meta{padding-bottom:1.4rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}

/*
   ── 寬螢幕：把文章資訊搬到左邊的留白裡 ──────────────────────
   1440 的螢幕上，720 的欄兩側各留 360px 永遠空白，而右邊那條目錄
   只有在文章有 h2/h3 時才會出現（線上八篇文章一個標題都沒有，
   所以它從未出現過）。這裡把日期、字數、閱讀數移進左側留白，
   標題與正文位置完全不動——版面不再是一條孤零零的中線。

   寬度由留白自己算（max(0px, …)），算出來不夠就是 0，
   不會推擠正文，也不會產生橫向捲動。分隔線改掛在標題底下，
   免得 meta 移走之後標題與正文黏在一起。 */
@media (min-width:1180px){
  .post-title{padding-bottom:1.4rem;border-bottom:1px solid var(--border)}
  .post-page>.post{position:relative}
  .post-meta{
    position:absolute;top:.6rem;right:calc(100% + 1.75rem);
    width:max(0px, calc((100vw - 100%) / 2 - 3.5rem));
    max-width:12rem;overflow:hidden;
    padding:0;margin:0;border-bottom:0;text-align:right;line-height:1.7}
  /* 直排時就不需要「·」了；它們本來就是 aria-hidden 的裝飾 */
  .post-meta>*{display:block}
  .post-meta>[aria-hidden="true"]{display:none}
}

/* ── 讀完之後往哪去 ────────────────────────────────────────
   文章結尾原本沒有任何出口，只能按瀏覽器的上一頁。
   這裡只放上一篇／下一篇：回列表的入口頁首站名與頁尾都已經有了，
   第三份只是重複。 */
.post-nav{display:grid;gap:.75rem;margin:2.5rem 0 0;padding-top:1.4rem;
  border-top:1px solid var(--border)}
@media (min-width:640px){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{display:flex;flex-direction:column;gap:.25rem;min-height:44px;
  padding:.8rem 1rem;text-decoration:none;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}
.post-nav a:hover{border-color:var(--accent);background:var(--wash)}
.post-nav-next{text-align:right}
.post-nav-label{font-size:.78em;color:var(--text-muted)}
.post-nav-title{font-size:.95em;line-height:1.4}

/* 引用了、但原檔已經不在伺服器上的圖。
   舊版「上傳 24 小時 TTL」清掉過已經被引用的媒體；讀者看到的是破圖圖示，
   作者則完全不會知道。至少要讓兩邊都看得出這裡本來有一張圖。 */
.media-missing{display:flex;align-items:center;gap:.5em;margin:1.4em 0;
  padding:.9em 1.1em;border:1px dashed var(--border);border-radius:var(--radius);
  background:var(--wash);color:var(--text-muted);font-size:.88em}
.post-body img{max-width:100%;height:auto;border-radius:var(--radius)}
.post-body pre{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:1rem 1.1rem;overflow-x:auto;font-family:var(--font-mono);font-size:.87em;line-height:1.6}
.post-body code{font-family:var(--font-mono);font-size:.9em}
.post-body :not(pre)>code{background:var(--wash);border-radius:4px;padding:.1em .38em}
.post-body blockquote{margin:1.4em 0;padding:.5em 1.2em;
  border-left:3px solid var(--accent);background:var(--wash);
  border-radius:0 var(--radius) var(--radius) 0;color:var(--text)}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body .math-block{display:block;overflow-x:auto;max-width:100%;padding:.75em 0;margin:1em 0}
.post-body .math-inline{max-width:100%}
.post-body math[display="block"]{overflow-x:auto;max-width:100%}
/*
   表格原本是 table{display:block;overflow-x:auto}——那讓表格不再是表格：
   欄寬不再互相對齊，寬度也不再撐滿。捲動要由**外層**負責，
   表格本身保持 display:table。 */
.table-scroll{overflow-x:auto;margin:1.4em 0;max-width:100%}
.post-body table{width:100%;border-collapse:collapse}
.post-body th,.post-body td{border:1px solid var(--border);padding:.55em .75em;text-align:left}
.post-body th{background:var(--wash)}
.post-body hr{border:0;border-top:1px solid var(--border);margin:2.5em 0}
.post-body figure{margin:1.6em 0}
.post-body figcaption{color:var(--text-muted);font-size:.85em;text-align:center;margin-top:.5em}
.task-list-item{list-style:none;margin-left:-1.2em}
.post-tags{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.post-tags a{display:inline-flex;align-items:center;min-height:32px;padding:0 .7rem;
  border-radius:999px;background:var(--wash);color:var(--link);
  text-decoration:none;font-size:.82em}
.post-tags a:hover{background:var(--accent);color:var(--surface)}

.callout{margin:1.5em 0;padding:1em 1.2em;border-radius:var(--radius);
  border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface)}
.callout-title{margin:0 0 .4em;font-weight:700;font-size:.8em;letter-spacing:.06em;
  text-transform:uppercase;color:var(--link)}
.callout p:last-child{margin-bottom:0}

.footnotes{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--border);font-size:.9em}
.footnotes-title{font-size:.85em;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted)}
.external-link::after{content:"↗";font-size:.72em;margin-left:.15em;color:var(--text-muted)}
.blocked-link,.blocked-image{color:var(--text-muted);text-decoration:line-through}

.link-card{display:flex;gap:.9rem;border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:.85rem;text-decoration:none;color:inherit;background:var(--surface);margin:1.3em 0}
.link-card-thumb{width:96px;height:72px;object-fit:cover;border-radius:4px;flex:none}
.link-card-title{display:block;font-weight:600;color:var(--text)}
.link-card-desc{display:block;color:var(--text-muted);font-size:.88em;margin-top:.2em}
.link-card-source{display:flex;align-items:center;gap:.35em;color:var(--link);
  font-size:.8em;margin-top:.4em}
.link-card-favicon{width:14px;height:14px}

/* ── 側邊目錄（仿 bdfz.net）───────────────────────────── */
/*
   目錄本來是「平常透明、滑鼠移上去才顯形」。在觸控裝置上沒有 hover，
   於是 iPad 橫放（剛好過 1100px）永遠只看得到幾條槓；滑鼠使用者也得先
   猜到那裡有東西才會把游標移過去。現在預設就是可讀的次要文字色，
   hover／focus 只是加強。 */
.toc-rail{position:fixed;top:50%;transform:translateY(-50%);
  left:calc((100vw + var(--content-width,720px)) / 2 + 1.5rem);
  width:max(0px, calc((100vw - var(--content-width,720px)) / 2 - 3rem));
  max-height:76vh;overflow:hidden auto;z-index:5;scrollbar-width:none}
.toc-rail::-webkit-scrollbar{display:none}
.toc-nav ul{list-style:none;margin:0;padding:0}
.toc-nav li{margin:8px 0}
.toc-nav a{display:block;text-decoration:none;color:var(--text-muted);font-size:.8em;
  line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s ease}
.toc-nav a::before{content:"";display:inline-block;height:4px;border-radius:4px;
  background:var(--accent);opacity:.55;vertical-align:middle;transition:opacity .2s ease}
.toc-d2 a::before{width:18px;margin-right:12px}
.toc-d3 a::before{width:12px;margin-right:18px}
.toc-d4 a::before{width:8px;margin-right:22px}
.toc-nav a:hover,.toc-nav a:focus-visible{color:var(--link)}
.toc-nav a:hover::before,.toc-nav a:focus-visible::before{opacity:1}
@media (max-width:1100px){.toc-rail{display:none}}

/* ── 閱讀進度（零 JS：CSS scroll-driven animation）───────
   規範第九節要求閱讀進度。公開頁 CSP 是 script-src 'none'，
   所以用 scroll timeline；不支援的瀏覽器就看不到這條，不影響閱讀。 */
@supports (animation-timeline: scroll()){
  /* 只在作者打開時才出現。原本這條沒有 [data-progress] 限定，
     於是設定裡那個開關關掉也照樣顯示——一個永遠是開的開關。 */
  [data-progress="on"] .post-page::before{content:"";position:fixed;top:0;left:0;height:3px;width:100%;
    transform-origin:0 50%;background:var(--accent);z-index:50;
    animation:rdfz-progress linear;animation-timeline:scroll(root block)}
  @keyframes rdfz-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

@media (max-width:480px){
  .uc-scope{padding:0 .95rem 3.5rem}
  .site-header{padding-top:1.6rem;margin-bottom:1.8rem}
  .site-actions{width:100%;justify-content:space-between}
  .link-card{flex-direction:column}
  .link-card-thumb{width:100%;height:auto}
  .comment-depth-1{margin-left:.75rem}.comment-depth-2{margin-left:1.5rem}
  .comments{padding:1.2rem 1rem 1.4rem}
  .post-title{font-size:1.65rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* 回覆的讚 */
/* ── 回覆區 ─────────────────────────────────────────────
   ★ 整塊用 --comment-surface（配色的襯色），與正文的白底明確分開。
     這是產品要求：讀者要一眼分辨「作者寫的」與「別人回的」。
     色差門檻由 palettes.test.ts 的「回覆區底色與正文底色可辨」把關。 */
.comments{
  margin-top:3.5rem;padding:1.6rem 1.5rem 1.8rem;
  background:var(--comment-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.comments-closed{margin:0;font-size:.88em;color:var(--text-muted)}
.comment-list{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;gap:1.1rem}
.comment{padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
.comment:last-child{border-bottom:none;padding-bottom:0}
.comment-depth-1{margin-left:1.5rem}
.comment-depth-2{margin-left:3rem}
/*
   回覆的字級以前寫成 rem——rem 錨在瀏覽器的 16px，跟主題的「字級」無關。
   於是把正文調到 21px 的博客，回覆仍然是 14.7px、作者行 12.8px：
   一個把整篇文章放大的滑桿，管不到頁面上被讀得最頻繁的那一塊。
   改成 em（相對 body 的 --font-size）之後，兩者一起動。 */
.comment-author{
  margin:0 0 .3rem;font-size:.85em;color:var(--text-muted);
}
.comment-author a{color:var(--link);text-decoration:none}
.comment-author a:hover{text-decoration:underline}
.comment-body{font-size:.95em;line-height:1.75}
.comment-body p{margin:0 0 .5rem}
.comment-body p:last-child{margin-bottom:0}
.comment-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:.5rem;font-size:.85em}
.comment-actions form{margin:0}
/* 「回覆這則留言」只有 23px 高，低於 WCAG 2.2 AA 的 24×24。
   站名與頁尾連結都特地寫了最小高度，就這裡漏了。 */
.comment-actions a,.comment-actions button{display:inline-flex;align-items:center;min-height:24px}
.comment-actions button{font:inherit;color:var(--link);background:transparent;border:1px solid var(--border);border-radius:.3rem;padding:.2rem .5rem;cursor:pointer}

/* ── 列表頁（標籤／搜尋／歸檔） ───────────────────────────────────── */
.list-heading{font-family:var(--font-heading);font-size:1.5rem;margin:0 0 .25rem;}
.list-sub{color:var(--text-muted);margin:0 0 1rem;font-size:.9rem;}
.search-form{display:flex;gap:.5rem;margin:0 0 1.5rem;}
.search-form input{
  flex:1;padding:.5rem .7rem;font:inherit;
  color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
}
.search-form input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.search-form button{
  padding:.5rem 1rem;font:inherit;cursor:pointer;
  color:#fff;background:var(--link);
  border:1px solid var(--link);border-radius:var(--radius);
}
.tag-cloud{
  list-style:none;padding:0;margin:0 0 1.5rem;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.tag-cloud .tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .6rem;font-size:.85rem;
  color:var(--text);background:var(--wash);
  border-radius:999px;text-decoration:none;
}
.tag-cloud .tag:hover{outline:1px solid var(--accent);}
.tag-n{font-size:.75rem;color:var(--text-muted);font-variant-numeric:tabular-nums;}
/* ── 列表形式 ────────────────────────────────────────────────────────
   設定頁的「列表形式」以前只輸出一個 class 卻沒有對應樣式，
   三個選項看起來完全一樣。 */
[data-list="cards"] .post-list{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
[data-list="cards"] .post-item{
  margin:0;padding:1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow)}
[data-list="cards"] .post-item + .post-item{border-top:1px solid var(--border)}

[data-list="magazine"] .post-item:first-child .post-item-title{font-size:1.6rem;line-height:1.25}
[data-list="magazine"] .post-item:first-child .post-item-summary{font-size:1.02rem}
[data-list="magazine"] .post-item:first-child{
  padding-bottom:1.5rem;border-bottom:2px solid var(--accent)}
[data-list="magazine"] .post-item-title{font-size:1.15rem}

/* ── 版面 ────────────────────────────────────────────────────────────
   同樣是以前只存在於設定頁、渲染端完全不理會的選項。
   四種都只調整版心與留白，不改變 DOM 結構——換版面不該讓
   已經發布的文章重排到看不懂。 */
[data-layout="centered"] .uc-scope{text-align:initial}
[data-layout="centered"] .site-header{text-align:center;flex-direction:column;gap:.75rem}
[data-layout="centered"] .site-identity{flex-direction:column;align-items:center;text-align:center}
[data-layout="centered"] .post-title{text-align:center}

[data-layout="minimal"] .site-header{border-bottom:1px solid var(--border);padding-bottom:.8rem}
[data-layout="minimal"] .site-avatar{display:none}
[data-layout="minimal"] .post-item-summary{display:none}
[data-layout="minimal"] .uc-scope{--content-width:34rem}

[data-layout="sidebar"] .toc-rail{display:block}
@media (min-width:1100px){
  [data-layout="sidebar"] .uc-scope{max-width:calc(var(--content-width) + 16rem)}
}

/* ── 代碼配色 ────────────────────────────────────────────────────────
   highlight.js 會輸出 .hljs-* class，但這裡本來一條對應樣式都沒有——
   於是六個代碼配色選項全部無效，而且所有程式碼一律是單色的。

   只定義六個語意色，各主題覆寫這六個變數，不逐一列舉所有 token 類別。 */
.post-body pre{
  background:var(--code-bg);
  color:var(--code-fg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.9rem 1rem;
  overflow-x:auto}
.post-body pre code{background:none;padding:0;color:inherit;font-size:.88em}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-doctag,.hljs-name,.hljs-strong{color:var(--code-kw)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:var(--code-str)}
.hljs-comment,.hljs-quote,.hljs-deletion{color:var(--code-cm);font-style:italic}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:var(--code-num)}
.hljs-type,.hljs-built_in,.hljs-class .hljs-title,.hljs-params,.hljs-variable,.hljs-template-variable,.hljs-attr{color:var(--code-fn)}
.hljs-emphasis{font-style:italic}

/* 預設（github 淺） */
:root{--code-bg:#f6f8fa;--code-fg:#24292f;--code-kw:#cf222e;--code-str:#0a3069;
  --code-cm:#6e7781;--code-num:#0550ae;--code-fn:#8250df}
[data-code="github-dark"]{--code-bg:#0d1117;--code-fg:#c9d1d9;--code-kw:#ff7b72;--code-str:#a5d6ff;
  --code-cm:#8b949e;--code-num:#79c0ff;--code-fn:#d2a8ff}
[data-code="nord"]{--code-bg:#2e3440;--code-fg:#d8dee9;--code-kw:#81a1c1;--code-str:#a3be8c;
  --code-cm:#7b88a1;--code-num:#b48ead;--code-fn:#88c0d0}
[data-code="solarized"]{--code-bg:#fdf6e3;--code-fg:#586e75;--code-kw:#859900;--code-str:#2aa198;
  --code-cm:#93a1a1;--code-num:#d33682;--code-fn:#268bd2}
[data-code="mono"]{--code-bg:#f5f5f5;--code-fg:#222;--code-kw:#222;--code-str:#444;
  --code-cm:#8a8a8a;--code-num:#444;--code-fn:#222}
[data-code="mono"] .hljs-keyword{font-weight:700}
[data-code="carbon"]{--code-bg:#161616;--code-fg:#f4f4f4;--code-kw:#ff7eb6;--code-str:#42be65;
  --code-cm:#6f6f6f;--code-num:#82cfff;--code-fn:#78a9ff}
/*
   三組淺色的代碼配色（github／solarized／單色）在深色模式下要換成
   各自的深色版，否則深底頁面中間會嵌一塊白底程式碼，而且那些為白底
   挑的 token 顏色在深色周邊看起來刺眼。data-mode 由 renderDocument 寫在
   <html> 上（auto 只在系統是深色時才換）。 */
html[data-mode="dark"][data-code="github"]{--code-bg:#0d1117;--code-fg:#c9d1d9;--code-kw:#ff7b72;
  --code-str:#a5d6ff;--code-cm:#8b949e;--code-num:#79c0ff;--code-fn:#d2a8ff}
html[data-mode="dark"][data-code="solarized"]{--code-bg:#002b36;--code-fg:#93a1a1;--code-kw:#859900;
  --code-str:#2aa198;--code-cm:#657b83;--code-num:#d33682;--code-fn:#268bd2}
html[data-mode="dark"][data-code="mono"]{--code-bg:#1b1b1b;--code-fg:#e6e6e6;--code-kw:#e6e6e6;
  --code-str:#c8c8c8;--code-cm:#8a8a8a;--code-num:#c8c8c8;--code-fn:#e6e6e6}
@media (prefers-color-scheme:dark){
  html[data-mode="auto"][data-code="github"]{--code-bg:#0d1117;--code-fg:#c9d1d9;--code-kw:#ff7b72;
    --code-str:#a5d6ff;--code-cm:#8b949e;--code-num:#79c0ff;--code-fn:#d2a8ff}
  html[data-mode="auto"][data-code="solarized"]{--code-bg:#002b36;--code-fg:#93a1a1;--code-kw:#859900;
    --code-str:#2aa198;--code-cm:#657b83;--code-num:#d33682;--code-fn:#268bd2}
  html[data-mode="auto"][data-code="mono"]{--code-bg:#1b1b1b;--code-fg:#e6e6e6;--code-kw:#e6e6e6;
    --code-str:#c8c8c8;--code-cm:#8a8a8a;--code-num:#c8c8c8;--code-fn:#e6e6e6}
}
/* ── 共鳴 ────────────────────────────────────────────────────────────
   取代 1–5 分的滑桿。只有一個正向動作，沒有量表也沒有平均。 */
.resonate{margin:2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--border);}
.resonate form{margin:0;}
/* 只有一顆心，沒有文字；aria-label 讓螢幕閱讀器仍讀得到用途 */
.resonate-button{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .8rem;min-height:40px;
  font:inherit;font-size:.9rem;
  color:var(--link);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;cursor:pointer;
}
.resonate-button:hover{border-color:var(--link);background:var(--wash);}
.resonate-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.resonate-n{
  font-variant-numeric:tabular-nums;
  font-size:.88rem;color:var(--text-muted);
}

/* ── 回覆框（送出鍵長在框裡）──────────────────────────────────────
   以前是「標籤 + 說明文字 + 框 + 框外一顆方鈕」，四樣東西。
   現在只剩框，送出是右下角的圓鈕。 */
/*
 * 只給螢幕閱讀器的文字。
 *
 * 這個 class 在標記裡用了，但 base.css 從來沒有定義它——
 * 結果「回覆」這個本來該隱藏的標籤直接顯示在輸入框上方，
 * 正是要求裡說的多餘文字。用 clip-path 而不是 display:none，
 * 後者會讓螢幕閱讀器也讀不到。
 */
.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.comment-form{margin:0;}
.comment-box{position:relative;}
.comment-box textarea{
  width:100%;display:block;
  padding:.8rem 3.2rem .8rem .9rem;
  font:inherit;font-size:.95rem;line-height:1.6;
  color:var(--text);background:var(--comment-surface);
  border:1px solid var(--border);border-radius:var(--radius);
  resize:vertical;
}
.comment-box textarea::placeholder{color:var(--text-muted);opacity:.8;}
.comment-box textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.comment-send{
  position:absolute;right:.55rem;bottom:.55rem;
  width:2.1rem;height:2.1rem;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;color:#fff;background:var(--link);
  border:none;border-radius:999px;cursor:pointer;
}
.comment-send:hover{filter:brightness(1.08);}
.comment-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* ── 頁尾 ────────────────────────────────────────────────────────────
   站內入口固定出現，作者的自訂文字與社交連結疊在上面。 */
/*
 * 頁尾釘在底部並置中。
 *
 * 之前它只是接在內容後面，短文章的頁尾會浮在畫面中間、
 * 長文章的又跑到很下面——每篇文章的頁尾位置都不一樣。
 * body 改成整頁高的 flex 直列，主要內容 flex:1 撐開，
 * 頁尾自然被推到底；內容不夠長時它就貼在視窗底部。
 */
html{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
/*
 * ★ width:100% 不能省。
 *
 * body 改成 flex 直列（為了把頁尾釘在底部）之後，.uc-scope 的
 * margin:0 auto 就成了交叉軸上的 auto margin——它會取消 stretch，
 * 讓版心變成「收縮到內容寬度」。結果是每篇文章的寬度都不一樣：
 * 行長的文章寬、行短的窄，實測 720px 的版心只剩 465px。
 * 補上 width:100%，max-width 才重新變成真正的上限。
 */
body > .uc-scope{flex:1 0 auto;width:100%}
.site-footer{
  flex-shrink:0;
  margin-top:4rem;
  /* 色塊太大會變成頁面的第二個主角。收成一條窄帶，
     只用上緣一道線標示邊界，不鋪整片底色。 */
  padding:1.1rem 0 1.4rem;
  background:none;
  border-top:1px solid var(--border);
  font-size:.82rem;color:var(--text-muted);
  text-align:center;
}
.site-footer-nav ul,.site-social ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:.1rem 1rem;
  justify-content:center;
}
/* 觸控目標至少 24×24（WCAG 2.2 AA「目標大小（最小值）」）。
   剛加的頁尾連結只有 16px 高，手機上很難點中。 */
.site-footer-nav a,.site-social a{
  display:inline-flex;align-items:center;
  min-height:24px;padding:.25rem .1rem;
}
.site-footer-nav a{color:var(--link);text-decoration:none;}
.site-footer-nav a:hover,.site-social a:hover{text-decoration:underline;}
.site-social a{color:var(--text-muted);}
.site-footer-text{margin:.5rem 0 0;white-space:pre-line;}
.site-footer-meta{margin:.45rem 0 0;font-size:.75rem;opacity:.7;}
/* ── 分頁 ────────────────────────────────────────────────────────────
   頁碼會摺疊（頭尾 + 當前頁附近），否則寫久了頁尾會長出一條數字帶。 */
.pagination{
  margin:2.5rem 0 0;padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.88rem;
}
.page-list{
  list-style:none;display:flex;gap:.35rem;margin:0;padding:0;
  flex-wrap:wrap;justify-content:center;flex:1 1 auto;
}
.page-list a,.page-current{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2rem;height:2rem;padding:0 .5rem;
  border-radius:var(--radius);
  font-variant-numeric:tabular-nums;text-decoration:none;
}
.page-list a{color:var(--link);border:1px solid var(--border);}
.page-list a:hover{background:var(--wash);border-color:var(--link);}
.page-current{background:var(--accent);color:var(--text);font-weight:600;}
.page-gap{display:inline-flex;align-items:center;padding:0 .2rem;color:var(--text-muted);}
.page-step{color:var(--link);text-decoration:none;white-space:nowrap;}
.page-step:hover{text-decoration:underline;}
.page-step-off{color:var(--text-muted);opacity:.45;}
@media (max-width:480px){
  .pagination{justify-content:center;}
  .page-step{order:1;}
}
/* ── 嵌入（影片）────────────────────────────────────────────────────
   用 aspect-ratio 包一層，不寫死寬高：寫死寬度在手機上會撐破版面。
   這與「預覽被擠壓」是同一類問題——尺寸應該由容器決定。 */
.embed{
  position:relative;width:100%;margin:1.5rem 0;
  background:var(--wash);border-radius:var(--radius);overflow:hidden;
}
.embed-16-9{aspect-ratio:16/9}
.embed-1-1{aspect-ratio:1/1}
.embed iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* ── 長字串不得撐破版面 ──────────────────────────────────────────────
   實測 375px：首頁橫向捲動 79px。原因是 .post-list 是 grid，隱含欄寬
   由內容決定，而某篇摘要裡有一條 48 字元的網址——那個不可斷的字串
   把欄寬撐到 438px，整頁跟著橫向捲動。

   兩道一起下：欄寬鎖死在容器內（minmax(0,1fr)），
   長字串允許在任意處斷行。只做前者，字會被裁掉；只做後者，
   grid 仍可能被撐開。 */
.post-list{grid-template-columns:minmax(0,1fr)}
.post-item{min-width:0}
.post-item-title,.post-item-summary,.post-item-meta,
.post-title,.post-meta,.comment-body,.site-footer-text{
  overflow-wrap:anywhere;
}
/* 正文裡的長網址同理；程式碼區塊維持橫向捲動而不是硬斷 */
.post-body p,.post-body li,.post-body blockquote{overflow-wrap:break-word}
/* 長網址沒有空白可斷，只有它需要 anywhere */
.post-body a{overflow-wrap:anywhere}
.post-body pre{overflow-wrap:normal}