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