/* fish-zero.com 站台共用樣式。
 *
 * ⚠️ **這個檔案在磁碟上叫 site.css，但頁面引用的是 /assets/site.<8碼雜湊>.css。**
 * scripts/build-site.mjs 產生 HTML 時會依內容算雜湊並改寫網址，
 * lib/app.mjs 收到請求時再把雜湊剝掉對映回這個檔案（見 lib/assets.mjs 檔頭）。
 *
 * 所以：**改了這個檔案就一定要跑 `npm run build`**，否則 HTML 裡的雜湊會對不上內容，
 * `npm run build:check` 會紅燈（那是刻意的防護，不是誤報）。
 *
 * 好處是拿得到一年 immutable，而且改樣式時網址會變，
 * 不會再踩到「Cloudflare 邊緣送舊檔四小時」那個坑（見 INTRODUCTION.md §5）。
 */

:root {
    --bg: #1e1e2e;
    --fg: #cdd6f4;
    --muted: #a6adc8;
    --accent: #89b4fa;
    --surface: #313244;
    --border: #45475a;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --fg: #1f2430;
        --muted: #5c6370;
        --accent: #1e66f5;
        --surface: #f4f6fa;
        --border: #d8dee9;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.75;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 24px 24px 96px; }

/* 語言切換：純連結，不用 JS。爬蟲跟得上，沒有 JS 也能用 */
.langbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 0;
    font-size: .9rem;
}
.langbar a {
    color: var(--muted);
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.langbar a:hover { color: var(--accent); border-color: var(--accent); }
.langbar a[aria-current="true"] {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

h1 { font-size: 2.1rem; line-height: 1.3; margin: 32px 0 12px; }
h2 { font-size: 1.35rem; margin: 40px 0 10px; }
.tagline { color: var(--muted); font-size: 1.1rem; margin: 0 0 32px; }
.meta { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }

.cta {
    display: inline-block;
    background: var(--accent);
    color: #11111b;
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 8px;
    text-decoration: none;
}
.cta:hover { filter: brightness(1.1); }

ul { padding-left: 1.3em; }
li { margin: 9px 0; }
a { color: var(--accent); }

code {
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .92em;
}

.note, .lead {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 15px 19px;
    margin: 30px 0;
}
.note { color: var(--muted); font-size: .94rem; }

figure { margin: 32px 0; }
figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
figcaption { color: var(--muted); font-size: .88rem; margin-top: 8px; text-align: center; }

hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }

footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .88rem;
}

/* ── 以下是 scripts/build-site.mjs 產生的手冊頁面用到的樣式 ───────────────
 * 這些 class 由產生器與 lib/markdown.mjs 決定，改名前先搜尋那兩個檔案。
 */

.muted { color: var(--muted); }
h3 { font-size: 1.08rem; margin: 30px 0 8px; }

/* 麵包屑：手冊頁面用，故意做得很淡，不跟 h1 搶注意力 */
.crumbs { color: var(--muted); font-size: .85rem; margin: 16px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

blockquote {
    margin: 28px 0;
    padding: 2px 18px;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}
blockquote p { margin: 14px 0; }

pre {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    overflow-x: auto;
    line-height: 1.6;
}
pre code {
    background: none;
    padding: 0;
    font-size: .87rem;
    white-space: pre;
}

/* 寬表格自己橫向捲動 —— 讓整頁跟著橫捲是手機上最常見的版面破法 */
.table-wrap { overflow-x: auto; margin: 26px 0; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
th { background: var(--surface); font-weight: 600; }

li.task { list-style: none; margin-left: -1.35em; }
li.task input { margin-right: 6px; }

/* 手冊目錄 */
.chapters { list-style: none; padding: 0; }
.chapters li {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0;
    line-height: 1.6;
}
.chapters li:hover { border-color: var(--accent); }
.chapters a { text-decoration: none; }
.chapters strong { font-size: 1.05rem; }

/* 下載本頁 .md */
.dl {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 13px 17px;
    font-size: .92rem;
}

/* 上一章／下一章 */
.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 44px 0 20px;
    font-size: .95rem;
}
.pager a {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    text-decoration: none;
    line-height: 1.6;
}
.pager a:hover { border-color: var(--accent); }
.pager a:last-child { text-align: right; }
.pager .muted { font-size: .82rem; }

/* ── 首頁的工具卡格線 ────────────────────────────────────────────────────────
   由 scripts/build-site.mjs 的 `:::tools` 區塊產生（資料來自 site-config 的 TOOLS）。

   ⚠️ 這一段是 2026-08-13 為了解決「首頁像一頁式廣告」加的。當時的實測：整頁 5082px＝
      6.5 個螢幕，其中 83% 是單一產品的行銷長文，而「工具索引」只是加粗的連結加段落，
      跟內文長得一模一樣、掃不了。索引要能被掃視，就必須在視覺上跟內文分開。 */
.tool-grid {
    list-style: none;
    margin: 1.6rem 0 2rem;
    padding: 0;
    display: grid;
    /* 放不下 260px 就自動換行。⚠️ 最小值寫 min(260px, 100%)：
       只寫 260px 的話，視窗比它窄時欄寬不會縮，整頁會出現橫向捲軸。 */
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 14px;
}
.tool-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.tool-card:hover { border-color: var(--accent); }
.tool-card h3 { margin: 0; font-size: 1.05rem; }
.tool-card h3 a { text-decoration: none; }
.tool-card p { margin: 0; font-size: .92rem; line-height: 1.65; }
.tool-card .tool-links {
    margin-top: auto;
    padding-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .9rem;
}
.tool-card .tool-open { font-weight: 600; }

/* ⚠️ 視窗夠寬時，工具卡刻意**突破 760px 的閱讀欄寬**。
   索引要能一眼掃完；760px 只放得下兩張卡，三個工具就變成 2＋1 的不平衡排法。
   760 ＋ 2×96 ＝ 952px 剛好放三張，所以門檻抓 1040px（留頁面左右的空白）。
   ⚠️ 不用 100vw 做滿版：100vw 在某些瀏覽器含捲軸寬度，會多出橫向捲軸。 */
@media (min-width: 1040px) {
    .tool-grid { margin-inline: -6rem; }
}