/* ================================================================
   Jackle Blog — 文章頁樣式
   數值取自 https://jackle.pro 的 headless Chrome 實測值。
   舊站的程式碼區塊樣式由 Prism 主題勝出（未分層 CSS 蓋過 @layer components），
   這裡直接寫最終生效值，不重現那個層級衝突。
   ================================================================ */

/* ---------- 閱讀進度條 ---------- */
.reading-progress {
  position: fixed; left: 0; top: 0; z-index: 10;
  height: 4px; width: 0%;
  background-image: linear-gradient(to right, #00bba7 0%, #00b8db 100%);
  transition: width .1s linear;
}

/* ---------- 版面容器 ---------- */
.article-wrap { padding-inline: 1rem; }
/* 這 2rem 一路吃到桌機，不要再為 ≥64rem 另外加一段。
   它必須跟背景層 .bg-layer 的 2rem 一樣，兩層才會用同一個置中基準；
   曾經寫成 5rem，結果兩個 max-width:80rem 的容器在都還沒到頂的寬度區間
   左緣不一樣 —— 1024 px 時紙緣在 64 px、內容卻在 192 px，
   差 128 px 而不是講好的 80 px，文章與目錄還白白少了 96 px 可用寬。 */
@media (min-width: 40rem) { .article-wrap { padding-inline: 2rem; } }
.article-grid {
  max-width: 80rem; margin-inline: auto;
  margin-top: 4rem;
  display: flex; align-items: flex-start;
}
/* 7rem = 背景 .bg-column 自己的 2rem + 要的 5rem 間距。
   只寫 2rem 的話兩條邊剛好重疊、文章會直接貼在版心邊界上。
   80 px 是舊站的間距。 */
@media (min-width: 64rem) { .article-grid { margin-top: 8rem; padding-inline: 7rem; } }
.article-main { min-width: 0; flex: 1 1 auto; max-width: 48rem; }

/* ---------- 封面圖、日期、標題 ---------- */
.article-cover {
  width: 100%; border-radius: .625rem; display: block;
  object-fit: cover; margin-bottom: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  font-size: .875rem; color: var(--muted-fg); margin-bottom: .75rem;
}
.article-tag {
  display: inline-block; border-radius: 9999px;
  padding: .125rem .625rem; font-size: .75rem;
  background: rgb(0 187 167 / .12); color: var(--accent-deep);
}
.dark .article-tag { color: var(--accent-text); }
.article-title { margin-bottom: 2rem; }

/* ---------- 內文 ---------- */
#article { overflow-x: hidden; }
#article p { font-size: 1rem; line-height: 1.75rem; margin-bottom: 1.5rem; }
@media (min-width: 64rem) { #article p { font-size: 1.125rem; } }
#article ul { list-style: disc;    margin-bottom: 1.5rem; padding-left: 1.5rem; }
#article ol { list-style: decimal; margin-bottom: 1.5rem; padding-left: 2rem; }
#article ul > *:not(:last-child), #article ol > *:not(:last-child) { margin-block-end: .5rem; }
#article li { font-size: 1rem; line-height: 1.75rem; }
@media (min-width: 64rem) { #article li { font-size: 1.125rem; } }
#article hr {
  border: 0; border-top: 2px solid rgb(228 228 231 / .5);
  margin-block: 3rem; overflow: hidden;
}
.dark #article hr { border-top-color: rgb(63 63 70 / .5); }
#article a {
  /* 正文裡直接貼裸網址的段落，在手機上整條 URL 是一個不能斷的「字」，
     會被 .content 的 overflow:hidden 從中間切掉、讀者看到半截網址。
     實測 nowaylm-philosophy 那篇的 gist 連結在 390 px 下超出 209 px。 */
  overflow-wrap: anywhere;
  font-weight: 500; color: var(--accent-text);
  text-decoration-line: underline; text-decoration-color: #00786f;
  text-decoration-thickness: 2px; text-underline-offset: 2px;
  transition: text-decoration-color .15s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) { #article a:hover { text-decoration-color: var(--accent-text); } }

/* ---------- 程式碼區塊 ---------- */
#article pre {
  position: relative;
  background: #2d2d2d; color: #ccc;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1rem; line-height: 1.5rem;
  padding: 1rem; margin-block: .5rem;
  border: 1px solid #4a5565; border-radius: .625rem;
  white-space: pre-wrap; overflow: auto;
  text-align: left; tab-size: 4;
}
.dark #article pre { border-color: #6b7280; }
#article pre > code {
  background: transparent; display: block; padding: 0;
  white-space: pre-wrap; font: inherit; color: inherit;
}
#article :not(pre) > code {
  background: rgb(0 0 0 / .06); border-radius: .25rem;
  padding: .125rem .375rem; font-size: .9em;
  font-family: var(--font-mono);
}
.dark #article :not(pre) > code { background: rgb(255 255 255 / .1); }
.code-copy-btn {
  position: absolute; top: .75rem; right: .75rem; z-index: 10;
  display: inline-flex; align-items: center; gap: .375rem;
  border: 1px solid #4a5565; border-radius: .375rem;
  background: rgb(0 0 0 / .35); color: #ccc;
  padding: .25rem .5rem; font-size: .75rem; cursor: pointer;
  font-family: var(--font-sans);
}
.code-copy-btn:hover { background: rgb(0 0 0 / .55); color: #fff; }

/* ---------- 圖片 ---------- */
#article figure { margin-block: 3rem; margin-inline: auto; }
#article figcaption {
  margin-top: .75rem; font-size: .875rem; line-height: 1.25rem;
  text-align: center; color: #4a5565;
}
.dark #article figcaption { color: #99a1af; }
#article img {
  margin-inline: auto; margin-top: 1.5rem; display: block;
  border-radius: .625rem; object-fit: cover; max-width: 100%; height: auto;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
@media (min-width: 48rem) { #article img { margin-top: 4rem; } }
#article figure img { margin-top: 0; }

/* ---------- 表格 ---------- */
/* 舊站行動版用 w-screen 溢出再靠 overflow hidden 裁掉，這裡改成不溢出的等效做法 */
.table-scroll { overflow-x: auto; max-width: 100%; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch;
  /* 表格比容器窄時，右側空白會露出背景網格 */
  background: var(--surface); border-radius: .625rem;
}
@media (min-width: 48rem) { .table-scroll { max-width: 48rem; } }
#article table {
  width: 100%; min-width: 40rem;
  border-collapse: collapse; border: 1px solid #e5e7eb;
  background: #fff; font-size: .875rem; text-align: left;
}
.dark #article table { background: #101828; border-color: #364153; }
#article th {
  background: #f9fafb; border: 1px solid #e5e7eb; padding: 1rem;
  font-weight: 500; color: #101828;
}
.dark #article th { background: #1e2939; border-color: #364153; color: #f3f4f6; }
#article td { border: 1px solid #e5e7eb; padding: 1rem; }
.dark #article td { border-color: #364153; }
#article tbody tr { transition: background-color .15s; }
#article tbody tr:hover { background: rgb(249 250 251 / .5); }
.dark #article tbody tr:hover { background: rgb(30 41 57 / .5); }

/* ---------- 嵌入影音 ---------- */
#article iframe, #article video {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: .625rem; margin-block: 2rem; display: block;
}
/* 直式的 YouTube Shorts，套 16:9 會被壓扁 */
#article iframe.vertical {
  /* 手機上就滿版，別給固定上限 —— 22rem＝352 px 比 390 px 手機的可用寬（343 px）還寬，
     會被 #article 的 overflow:hidden 裁掉右邊。桌機才收窄，不然一支直式影片會佔掉整欄。 */
  aspect-ratio: 9 / 16; width: 100%; max-width: 100%; margin-inline: auto;
}
@media (min-width: 48rem) { #article iframe.vertical { max-width: 22rem; } }

/* ---------- 版本切換（分頁） ----------
   兩個版本互斥，所以做成分頁而不是展開：舊版快照是完整的一頁、自己帶標題，
   疊在新版下面會變成同一篇文章出現兩個標題。 */
.ver-tabs {
  display: inline-flex; gap: .25rem; margin-bottom: 2.5rem;
  padding: .25rem; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--surface);
}
.ver-tab {
  border: 0; border-radius: 9999px; cursor: pointer;
  padding: .4375rem 1rem; font-size: .875rem; font-family: inherit; font-weight: 500;
  background: transparent; color: var(--muted-fg);
  transition: background .15s, color .15s;
}
.ver-tab:hover { color: var(--foreground); }
.ver-tab[aria-selected="true"] {
  background: var(--accent-deep); color: #fff; font-weight: 600;
}
.dark .ver-tab[aria-selected="true"] { background: var(--accent); color: #0b1a18; }
.ver-tab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* 兩個版本共用同一個 #article，所以排版、字級、程式碼高亮全部一致，
   切換就只是換掉裡面那一塊內容，不會有第二層捲軸。 */
.ver-pane[hidden], .outline[hidden], .outline-mobile[hidden], .legacy-note[hidden] { display: none; }
/* 內文第一個標題的 5rem 上距是用來跟前一段拉開的，接在切換鈕下面時會疊成 112 px */
.ver-pane > :first-child { margin-top: 0; }
.legacy-note {
  font-size: .8125rem; line-height: 1.6; color: var(--muted-fg);
  margin: 0 0 1.5rem; padding: .75rem 1rem;
  border-left: 3px solid var(--border); border-radius: 0 .375rem .375rem 0;
  background: linear-gradient(var(--divider), var(--divider)), var(--surface);
}

/* ---------- 留言 ---------- */
.comments { margin-top: 2.5rem; }
.comments h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.tk-content p { margin-bottom: 1.5rem; }
.tk-content li p { margin-bottom: .5rem; }
.tk-content ul { list-style: disc; margin-bottom: 1.5rem; margin-left: 1rem; padding-left: 20px; }
.tk-content ol { list-style: decimal; margin-bottom: 1.5rem; margin-left: 1rem; padding-left: 20px; }

/* ---------- 右側目錄 ---------- */
.outline { display: none; }
@media (min-width: 64rem) {
  .outline {
    display: flex; flex-direction: column;
    height: fit-content; flex: 1 1 0%;
    position: sticky; top: 4rem; padding-left: 2.5rem;
    font-size: .8125rem; font-weight: 500;
  }
}
.outline-title { font-size: .75rem; line-height: 1rem; margin-bottom: 1rem; color: #000; }
.dark .outline-title { color: #fff; }
.outline ul { position: relative; color: #71717b; list-style: none; padding: 0; }
.dark .outline ul { color: #9f9fa9; }
.outline a { display: block; font-family: var(--font-mono); line-height: 1.75rem; transition: color .15s; }
.outline a:hover, .outline a[aria-current="true"] { color: #3f3f46; }
.dark .outline a:hover, .dark .outline a[aria-current="true"] { color: #d4d4d8; }
.outline-marker {
  position: absolute; left: -12px; width: 4px; height: 18px;
  border-radius: 4px; background: var(--accent); opacity: 0;
  transition: top .5s cubic-bezier(0,1,.5,1), opacity .25s, background-color .5s;
}
/* 舊站行動版完全沒有目錄，這裡補一個摺疊版 */
.outline-mobile { margin-bottom: 2rem; }
@media (min-width: 64rem) { .outline-mobile { display: none; } }
.outline-mobile summary {
  cursor: pointer; font-size: .875rem; font-weight: 500;
  padding: .625rem .875rem; border: 1px solid var(--border); border-radius: .625rem;
}
.outline-mobile ul { list-style: none; padding: .75rem .875rem 0; margin: 0; font-size: .875rem; }
.outline-mobile a { display: block; padding-block: .375rem; color: var(--muted-fg); }

/* ---------- 語法高亮配色 ----------
   逐條照抄舊站 site/legacy/assets/shared-9.css 的 Prism 主題，讓程式碼區塊的顏色
   跟舊版一模一樣。少了這段，那 4354 個保留下來的 token 標記全部不會上色，
   程式碼會變成一片灰。選擇器不綁 language-*，因為重排後的區塊不一定帶那個 class。 */
#article .token.block-comment,
#article .token.cdata,
#article .token.comment,
#article .token.doctype,
#article .token.prolog { color: #999; }
#article .token.punctuation { color: #ccc; }
#article .token.attr-name,
#article .token.deleted,
#article .token.namespace,
#article .token.tag { color: #e2777a; }
#article .token.function-name { color: #6196cc; }
#article .token.boolean,
#article .token.function,
#article .token.number { color: #f08d49; }
#article .token.class-name,
#article .token.constant,
#article .token.property,
#article .token.symbol { color: #f8c555; }
#article .token.atrule,
#article .token.builtin,
#article .token.important,
#article .token.keyword,
#article .token.selector { color: #cc99cd; }
#article .token.attr-value,
#article .token.char,
#article .token.regex,
#article .token.string,
#article .token.variable { color: #7ec699; }
#article .token.entity,
#article .token.operator,
#article .token.url { color: #67cdcc; }
#article .token.bold,
#article .token.important { font-weight: 700; }
#article .token.italic { font-style: italic; }
#article .token.entity { cursor: help; }
#article .token.inserted { color: green; }