/* ==========================================================================
   SWISS INTERNATIONALIST PHYSICS LAB SPEC - 舒適大字體安全鎖版 (完整版)
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    color: #000000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    /* 🔴 全局基礎字體調大，讓所有相對單位 (rem) 等比例放大 */
    font-size: 16px; 
}

/* 響應式核心架構 */
.lab-three-column-container {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100vw;
    overflow-y: auto;
}

/* 欄位一：左側操作控制區 */
.lab-control-sidebar {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    overflow-y: visible;
    padding: 30px 20px;
}

.lab-breadcrumb {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
    line-height: 1.6;
}
.lab-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}
.lab-breadcrumb .bc-back {
    display: inline-block;
    padding: 4px 10px;
    border: 1.5px solid #000000;
    color: #000000;
    font-weight: 800;
    background: #ffffff;
    transition: background 0.15s, color 0.15s;
}
.lab-breadcrumb .bc-back:hover {
    background: #000000;
    color: #ffffff;
}
.lab-breadcrumb a:hover {
    color: #2563eb;
}
.lab-breadcrumb .bc-sep {
    margin: 0 8px;
    color: #cbd5e1;
}
.lab-breadcrumb .bc-current {
    color: #000000;
}

.lab-header {
    margin-bottom: 35px;
    border-bottom: 2px solid #000000;
    padding-bottom: 20px;
}

.lab-number {
    font-size: 1.0rem; /* 🔴 放大編號 */
    font-weight: 800;
    color: #2563eb;
    font-family: monospace;
    margin-bottom: 8px;
}

.lab-title {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* 控制面板 */
.control-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.control-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 🔴 左側滑桿上方的文字標籤與數值放大 */
.control-box label {
    font-size: 1.2rem; /* 顯著放大，看得很清楚 */
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    /* 欄位變窄時，讓「數值」整塊落到下一行，而不是把「自行車速度」斷成
       「自行車速 / 度」。中文沒有詞間空格，一旦換行就是斷在詞中間。 */
    flex-wrap: wrap;
    gap: 0 12px;
}

.control-box label > span {
    white-space: nowrap;
}

.control-box input[type="range"] {
    width: 100%;
    height: 10px; /* 🔴 滑桿稍微加粗更易觸控 */
    accent-color: #2563eb;
    cursor: pointer;
}

/* 🔴 發射與重設按鈕加大 */
.control-box button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 18px; /* 增加點擊填充 */
    font-size: 1.15rem; /* 字體放大 */
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
    letter-spacing: 1px;
}
.control-box button:hover { background-color: #2563eb; }

/* 左側專屬數據儀表盒樣式 */
.live-data-box {
    grid-column: 1 / -1;
    background-color: #f8fafc;
    border: 1px solid #000000;
    padding: 15px;
    margin-top: 10px;
}

.live-data-title {
    font-size: 0.8rem;
    font-family: monospace;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 8px;
}

.live-data-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 15px;
    font-family: monospace;
    font-size: 1.0rem;
}

.grid-label { color: #475569; }
.grid-value { font-weight: 700; text-align: right; }

/* 欄位二：中間物理舞台 */
.lab-stage-center {
    background-color: #f8fafc;
    width: 100%;
    height: 60vh;
    min-height: 440px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    display: flex;
    flex-direction: column;
}

.canvas-wrapper {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

#physicsCanvas {
    background-color: #ffffff;
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #000000;
    display: block;
}

/* 欄位三：右側多功能分頁區 */
.lab-tabs-sidebar {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.tab-headers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 2px solid #000000;
}

/* 🔴 右側分頁標頭字體放大 */
.tab-btn {
    background-color: #ffffff;
    color: #64748b;
    border: none;
    border-right: 1px solid #e2e8f0;
    padding: 18px 5px; /* 增加厚度 */
    font-size: 1.1rem; /* 放大頁籤文字 */
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.tab-btn:last-child { border-right: none; }
.tab-btn.active { background-color: #000000; color: #ffffff; }

.tab-content-container {
    flex: 1;
    padding: 30px 20px;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

.pane-meta-title {
    font-size: 0.95rem;
    font-family: monospace;
    font-weight: 800;
    color: #475569;
    border-left: 3px solid #000000;
    padding-left: 8px;
    margin-bottom: 20px;
}

/* 瑞士風格即時數據卡片網格 */
.data-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* 1. 卡片內部的留白稍微加大，給大字體更多呼吸空間 */
.data-card {
    background-color: #f8fafc;
    border: 1px solid #000000;
    padding: 22px 20px; /* 🟢 增加填充空間 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.data-card.highlight {
    background-color: #ffffff;
    border: 2px solid #2563eb;
}
.data-card.highlight .card-label { color: #2563eb; }
.data-card.highlight .card-num { color: #2563eb; }

/* 2. 放大卡片上方的小標籤（TIME, POS_X 等英文與中文說明） */
.card-label {
    font-size: 1.05rem; /* 🟢 從 0.85rem 大幅升級，變得非常清晰 */
    font-family: monospace;
    font-weight: 900;    /* 🟢 改為極粗體，強化瑞士直角儀表感 */
    color: #475569;     /* 🟢 顏色調深一點，提升對比度 */
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.card-num-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

/* 3. 數據卡片數字 */
.card-num {
    font-size: 1.8rem;
    font-family: monospace;
    font-weight: 900;
    color: #000000;
    line-height: 1.0;
}

/* 4. 數字旁邊的單位（s, m）也同步調大 */
.card-unit {
    font-size: 1.2rem;   /* 🟢 從 1.0rem 放大 */
    color: #475569;
    margin-left: 8px;
    font-family: monospace;
    font-weight: 700;
}

/* 圖表渲染框架樣式 */
.chart-container { width: 100%; }
.chart-wrapper {
    width: 100%;
    height: 240px; 
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 15px;
}

/* ==========================================================================
   🔴 LAB MARKDOWN CONTENT - 右側「實驗描述」與「探究思考」文字全面重度放大
   ========================================================================== */
.lab-markdown-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #1a1a1a;
}

.lab-markdown-content h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 35px 0 15px 0;
    padding-top: 15px;
    border-top: 1px dashed #000000;
}

.lab-markdown-content h3 {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 25px 0 12px 0;
}

.lab-markdown-content p { 
    margin-bottom: 20px; 
}

.lab-markdown-content ol, 
.lab-markdown-content ul { 
    padding-left: 24px; 
    margin-bottom: 22px; 
}

.lab-markdown-content li { 
    margin-bottom: 14px; /* 增加行距，防止文字擠在一起 */
}

/* 行內加粗與公式 */
.lab-markdown-content strong { 
    font-weight: 700; 
    background-color: #f1f5f9; 
    padding: 2px 6px; 
}

/* 提示引導區塊字體同步放大 */
.lab-markdown-content blockquote {
    border-left: 4px solid #2563eb;
    padding: 18px 22px;
    margin: 25px 0;
    background-color: #f8fafc;
    font-size: 1.15rem;
    color: #334155;
}

/* --------------------------------------------------------------------------
   📊 表格
   --------------------------------------------------------------------------
   ⚠️ **2026-09 之前這裡是一條規則都沒有的**，而右側欄在 1100px 時只有約
   253px 的內容寬（1600px 時約 339px）——`_experiments/` 裡有 52 張表格，
   2～6 欄都有。沒有樣式的表格等於瀏覽器預設值：**沒有框線，儲存格之間只有
   2px 的 `border-spacing`**。於是欄與欄在視覺上黏成一整段文字，學生看不出
   「這一格到哪裡為止」——而這一欄的表格幾乎每一張都是「現象／為什麼」這種
   兩欄對照，欄界一消失，整張表就讀不出來。

   四件事缺一不可：
     · **框線**：`border-collapse: collapse` ＋ 1px 淺灰，把欄界畫出來。
     · **內距**：5px／6px，文字不再貼著框線。
     · **字級降一級**（0.78rem）＋行高收到 1.5：表格是拿來「查」的，比內文小
       一級才塞得進窄欄；內文的 1.75 行高在表格裡只是浪費高度。
     · **不准強制斷字**（**不要**加 `overflow-wrap: anywhere`）。這一條是
       實際踩過才知道的：`09-convection.md` 的 Ra 欄是 `1.5×10⁻⁵` 這種寫法，
       `anywhere` 會在「10」和「⁻⁵」之間斷開，畫面上變成 `1.5×10` 換行 `⁵`
       ——**每個數字看起來都少了一個數量級**。同一件事也發生在 `$...$` 上。
       塞不下時的正解是讓它**橫向捲動**，不是把字切斷（見下面 `.table-scroll`）。

   ⚠️ **`strong` 的灰底籤在表格裡一定要關掉。** 上面那條
   `.lab-markdown-content strong { background:#f1f5f9; padding:2px 6px }`
   在內文裡是很好讀的重點標記，但在一個只有 ~56px 寬的儲存格裡，那 12px 的
   左右內距當場吃掉五分之一的欄寬，而且每個粗體字都變成一塊灰方塊。所以在
   表格內只留 `font-weight`（下面那兩條選擇器）。

   ⚠️ **橫向捲動：`.table-scroll` 是 `_layouts/experiment.html` 的 JS 包上去的，
   不是寫在 markdown 裡。** 表寬是 `table-layout: auto` 算的，而
   **`overflow` 對 `display: table` 的元素無效**，所以一定要有一層 div
   才捲得動。包在 layout 裡的好處是 33 頁、52 張表一個字都不用改，
   而且以後新開的頁自動適用。

   ⚠️ **`.table-scroll` 是安全網，不是常態——要讓它「幾乎永遠不觸發」。**
   一支 DOM 掃描（1100px、48 頁全掃）量出來的數字才是這幾個值訂下來的原因：

   | 字級／內距 | 在 253px 的右欄裡排不下的表 |
   |---|---|
   | 0.82rem／`6px 7px` | **3 張**：`08-standing-wave` 271px（+18）、
     `09-convection` 266px（+13）、`15-gas-laws` 262px（+9） |
   | 0.78rem／`5px 6px` | **0 張** |

   差別在**每一欄的固定開銷**：`2 × padding + 邊框`，6 欄的表就是 6 份。
   0.82→0.78 讓文字縮 5%，7→6 讓 6 欄省下 12px——兩者相加剛好把那 9～18px
   吃掉。**這不是為了好看，是因為「差 9px」的表格在畫面上讀起來就是
   「被切掉」**：學生看到的是右邊框不見了，不是「這裡可以捲」。
   （捲軸本身是 `--hide-scrollbars` 之外的東西，手機上根本看不到。）

   ⚠️ **量這張表要用「步進掃描」，不能只截自己關心的那一頁。**
   第一次只查了 5、6 欄的候選頁，漏掉 `08-standing-wave`——它是 **4 欄**，
   窄的是第 4 欄裡那串 `$x = 0,\ \frac{L}{n},\ \dots$`（MathJax 的
   inline 數學不會斷行，`min-content` 就是整串的寬度）。
   **欄數少不代表表窄**，只有全站掃一遍才知道。
   -------------------------------------------------------------------------- */
.lab-markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

.lab-markdown-content th,
.lab-markdown-content td {
    border: 1px solid #e2e8f0;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}

/* 表格的橫向捲動容器（由 `_layouts/experiment.html` 的 JS 包上）。
   ⚠️ 表格自己不能捲——`overflow` 對 `display: table` 不生效——所以捲動一定要
   落在這一層 div 上。`width: 100%` 的表格在 `table-layout: auto` 下是
   「至少 100%」：內容排得下就剛好填滿，排不下就撐成比容器寬、由這一層捲。 */
.table-scroll {
    overflow-x: auto;
    margin: 0 0 24px 0;
    /* 捲到底／捲到邊的時候不要讓捲動鏈傳染給整個側欄 */
    overscroll-behavior-x: contain;
}

.table-scroll > table {
    margin-bottom: 0;
}

.lab-markdown-content thead th {
    background-color: #f1f5f9;
    font-weight: 800;
    color: #0f172a;
}

.lab-markdown-content tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.lab-markdown-content th strong,
.lab-markdown-content td strong {
    background: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   ⌨️ 字圖／程式碼區塊
   --------------------------------------------------------------------------
   ⚠️ 這一條也是 2026-09 補的，而且補的理由和表格一模一樣：**右側欄只有
   354px 的內容寬**（1100px 視窗時更窄），而 `pre` 是 `white-space: pre`——
   **不會換行**，超出右緣的部分直接被切掉，畫面上只看到半張圖，`errs=0`。
   `_experiments/` 裡只有兩個 fenced block（兩張字圖），原本一張 92 欄、
   一張 91 欄，在側欄裡各自只看得到大約 35 欄。

   兩邊都要做：
     · **`overflow-x: auto`** 是安全網——以後再有寬區塊，至少捲得動、不至於
       無聲無息被裁掉（`pre` 是 block，`overflow` 對它有效，不需要包裝 div）。
     · **字級壓到 0.72rem**：這兩個是「字圖」，不是程式碼，縮小才讀得到整體
       形狀。0.72rem ＝ 11.5px，ASCII 字元約 6.9px → 354px 的欄寬塞得下
       **約 47 欄**，那就是字圖的欄寬預算（兩張圖都已改寫到 44 欄以內）。
   -------------------------------------------------------------------------- */
.lab-markdown-content pre {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 12px;
    margin: 0 0 24px 0;
    overflow-x: auto;
    font-size: 0.72rem;
    line-height: 1.4;
}

.lab-markdown-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 行內 `code`：和 `strong` 一樣灰底，但**不要**在表格裡撐寬欄寬 */
.lab-markdown-content p code,
.lab-markdown-content li code {
    background-color: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.88em;
}

/* ==========================================================================
   ⚡ 核心中斷點：大螢幕與 MacBook 13 吋安全鎖佈局
   ========================================================================== */
/* ==========================================================================
   🖥️ 三欄版面（電腦 + iPad 橫向）
   --------------------------------------------------------------------------
   門檻訂在 1024px 而非傳統的 1200px：iPad 橫向的 CSS 寬度落在 1024~1366，
   訂 1200 會讓絕大多數 iPad 掉進堆疊模式（只剩 12.9 吋過關）。

   但光看寬度不夠——iPad Pro 12.9 直向正好是 1024×1366，也會撞進三欄，
   而直向時中間畫布會變成 493×1306 的極端比例，兩側留白比堆疊更難看。
   故加上 orientation 條件，直向一律走堆疊。
   ========================================================================== */
@media (min-width: 1024px) and (orientation: landscape) {
    body {
        overflow: hidden;
        /* 🔴 在 Mac 13 吋或大螢幕上，將預設基準字體鎖定在 16px，維持完美比例 */
        font-size: 16px;
    }

    .lab-three-column-container {
        display: grid;
        /* 兩側欄位加絕對下限：純 vw 在 1024px 時左欄只有 205px，內容區剩 145px，
           標題「參考系」會被拆成「參/考系」、標籤斷在「自行車速/度」。
           下限只在 <1300px 時生效，1440px 以上仍與原本的 20vw / 26vw 完全相同。 */
        grid-template-columns: minmax(260px, 20vw) 1fr minmax(330px, 26vw);
        height: 100dvh;
        overflow: hidden;
    }

    .lab-control-sidebar {
        width: auto;
        height: 100dvh;
        overflow-y: auto;
        border-right: 2px solid #000000;
        padding: 40px 30px;
    }

    .control-panel {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .lab-stage-center {
        width: auto;
        height: 100dvh;
        border: none;
    }

    .canvas-wrapper {
        padding: 30px;
        max-height: 100dvh;
        overflow: hidden;
    }

    .lab-tabs-sidebar {
        width: auto;
        height: 100dvh;
        border-left: 2px solid #000000;
        overflow: hidden;
    }

    .tab-content-container {
        flex: 1;
        overflow-y: auto;
        padding: 40px 30px;
        max-height: calc(100dvh - 65px);
    }
}

/* 側欄被壓到下限（1024~1300px，見上面的 minmax）時，標籤字級略降，
   讓「自行車速度」與「2.0 m/s」仍能同行 —— 否則較長的那個標籤會獨自
   換行，三個標籤高低不一，看起來像壞掉。 */
@media (min-width: 1024px) and (max-width: 1300px) and (orientation: landscape) {
    .control-box label {
        font-size: 1.05rem;
    }
}

/* ==========================================================================
   📱 手機 + 直向平板：允許整頁垂直滾動
   --------------------------------------------------------------------------
   必須在桌面版之後，才能覆蓋 overflow: hidden。
   條件是上面三欄版的互補集合 —— 兩者務必一起改，否則會出現
   「寬度夠但不符合三欄條件」的視窗兩邊都沒套到規則的空窗。
   ========================================================================== */
@media (max-width: 1023px), (orientation: portrait) {
    body {
        height: auto;
        overflow: visible;
    }

    .lab-stage-center {
        height: 60vh;
        min-height: 300px;
    }
}