/**
 * css/site-width.css — 全站版面寬度的唯一來源
 *
 * 為什麼要有這個檔
 * ------------------------------------------------------------------
 * 站上各頁的 `.container` 寬度原本四處各寫一份，實測有
 * 1000 / 1100 / 1140 / 1150 / 1200 / 1400 六種值，甚至 topic.php
 * 在手機上寫成 max-width:100%。結果是同一個站，換一頁內容就左右
 * 位移一次，頁首導覽列也跟內文對不齊——這正是「不精練」的來源。
 *
 * 現在只有這一個變數。要調全站寬度，改這裡一行，所有引用
 * var(--spa-max) 的頁面一起跟著動。
 *
 * 怎麼用
 * ------------------------------------------------------------------
 *   .container { max-width: var(--spa-max, 1200px); }
 *
 * 一律帶 fallback：少數不經過 navbar.php 的頁面拿不到這個檔，
 * fallback 讓它維持正常，不會變成滿版。
 *
 * 為什麼是 1200
 * ------------------------------------------------------------------
 * 頁首導覽列（s_header.php、header.php、navbar.php）本來就是 1200。
 * 內文對齊導覽列，視覺上才有一條共同的左右邊界；若內文用 1140，
 * 兩者差 30px，在大螢幕上就是看得出來的一截錯位。
 *
 * 刻意保留自己寬度的頁面
 * ------------------------------------------------------------------
 *   manual_update_reviews.php（800）  單欄工具頁，窄才好讀
 *   ranking.php（1000）               刻意收窄的排行閱讀頁
 *   table_manager.php（1400）         寬表格，需要橫向空間
 *   admin/article_refs.php（1400）    同上
 *   admin/mail_test.php（1400）       同上
 * 這些請不要改成 var(--spa-max)。
 */

:root {
    /* 全站內容最大寬度（含導覽列） */
    --spa-max: 1200px;
}

/*
 * 全站收斂。
 *
 * 只在 xl（≥1200px）這一階生效——這是最關鍵的一點：
 * 若不加 media query，max-width:1200 會在 992–1199 這種「平板橫放／
 * 小筆電」寬度把 Bootstrap 原本的 960 撐成滿版，左右留白整個消失，
 * 反而比原本更不精練。
 *
 * 1200 以下沿用 Bootstrap 的階梯（540／720／960），那是經過驗證的
 * 呼吸節奏；1200 以上才由這個變數統一天花板。
 *
 * 這個檔由 navbar.php 載入，位於各頁自己的 <style> 之後，
 * 同特異度下後載入的勝出。頁面若真的需要不同寬度（工具頁、寬表格），
 * 把選擇器寫成 `body .container` 提高特異度即可，不需要 !important。
 */
@media (min-width: 1200px) {
    .container {
        max-width: var(--spa-max, 1200px);
    }
}

/*
 * 分頁列在 320px 會撐出 20px 的橫向滾動。
 *
 * Bootstrap 4 的 .pagination 是 display:flex 但沒有 flex-wrap，
 * 10 個頁碼擠不進 290px 就會溢出容器（實測 scrollWidth 325 vs 290），
 * 整頁因此多出一條沒必要的水平捲軸。允許換行只在「本來就放不下」時
 * 生效，桌機完全不受影響。
 */
.pagination {
    flex-wrap: wrap;
}