/* ==========================================================================
   登入頁專屬的 RWD 斷點

   這支 CSS 只掛在 jcKeyword = 'login' 的頁面上（三個登入版型，即 templates/login 底下的
   form_input／form_qrcode／form_passkey，以及 templates/status 的三頁狀態頁，
   StatusPageController 一律帶 'login'），所以這裡定義的斷點只影響登入與狀態頁；全站其他頁面
   仍走 mmui/c/real/grid.css 與 css/main.css 那一套（--bp-md 769px、--bp-lg 1024px），不受影響。

   登入頁的四段式定義（依設計需求，與全站斷點刻意不同）：
     DESKTOP  >= 1920px          維持現況，完全不加規則
     LAPTOP   1440px ~ 1919px    卡片由 6/24 欄放寬到 8/24 欄
     TABLET   1024px ~ 1439px    卡片再放寬到 10/24 欄，仍是置中卡片
     MOBILE   <= 1023px          卡片單欄全寬

   卡片寬度是照版型裡的 --S（起始欄）／--C（跨欄數）算的。三個登入版型的 fieldset 都寫死行內
   style="--S: 10; --C: 6;"，行內宣告的優先度高於一般樣式表規則，所以下面覆寫 --S／--C 時一律
   加 !important —— 這樣才不必為了 RWD 去動三份模板的 markup（與 form_input.php 開頭註解所寫的
   「RWD 來自 CSS、不動 markup」同一個原則）。

   --S 一律取「置中」的那一欄：24 欄扣掉 --C 之後左右均分，例如 --C: 8 時左右各 8 欄，--S 就是 9。

   實際卡片寬度（欄寬 = (100vw - 2 × --ShellSidePadding - 23 × 16px) / 24，--ShellSidePadding 是
   css/main.css 的 clamp(16px, 5vw, 128px)）：
     1920px（DESKTOP，6 欄）  約 420px
     1919px（LAPTOP，8 欄）   約 565px
     1440px（LAPTOP，8 欄）   約 421px
     1439px（TABLET，10 欄）  約 530px
     1024px（TABLET，10 欄）  約 375px
     1023px（MOBILE，全寬）   約 921px
   每個斷點交界處卡片都會變寬一階，這是分段式 RWD 的正常現象：螢幕變窄、卡片佔比變大。
   ========================================================================== */

#OTPInputBox {
    overflow: hidden;
    height: 0px;
    justify-items: center;
    transition: all 0.3s;
}
#OTPInputBox .OTPFrontBox {
    margin-bottom: 12px; 
    width: 80%;
    justify-content: space-evenly;
}
#OTPInputBox #LoginBtn {
    margin-top: 12px;
}

/*
LAPTOP（1440px ~ 1919px）：視埠比桌機窄了最多 480px，但卡片仍照 6/24 欄算，1440px 時只剩約 300px
寬，扣掉 .Body 左右各 15px 的內距後輸入框不到 270px，「請輸入 公司統一編號」這種 placeholder 會
被擠到貼邊。放寬成 8/24 欄後 1440px 約 421px、1919px 約 565px，跟 1920px 桌機的 420px 幾乎接續，
整段 LAPTOP 看起來就是桌機版順順地長大，不會突然變成另一種版型。
*/
@media (min-width: 1440px) and (max-width: 1919px) {
    main > fieldset.mmui_Card {
        --S: 9 !important;
        --C: 8 !important;
    }
}

/*
TABLET（1024px ~ 1439px）：這一段是平板橫向與小筆電的寬度，內容區還有 920px ~ 1295px，整片拉成
單欄全寬會變成一條又寬又扁的登入卡（1439px 時近 1300px 寬），輸入框長到跟畫面等寬，視線從
placeholder 掃到游標要橫跨整個螢幕。所以這一段維持置中卡片，只是再放寬到 10/24 欄
（約 375px ~ 530px），仍在「一眼看得完」的表單寬度內。

mmui/c/real/grid.css 的 --GridColumns 覆寫是 1023px 以下才生效，這一段仍是 24 欄，
所以 --S／--C 可以直接照 24 欄算。
*/
@media (min-width: 1024px) and (max-width: 1439px) {
    main > fieldset.mmui_Card {
        --S: 8 !important;
        --C: 10 !important;
    }
}

/*
MOBILE（<= 1023px）：卡片改成單欄全寬。

mmui/c/real/grid.css 在 768px 以下已經用 .mmui_Grid_Col { grid-column: 1 / -1 !important } 做到
同一件事，但 769px ~ 1023px 那一段它只把 --GridColumns 降成 12 欄、沒有動欄位配置，行內的
--S: 10 配 --C: 6 就變成「從第 10 欄起、跨 6 欄」＝ 第 10 ~ 15 欄，超出 12 欄的部分會長出隱式欄，
卡片被推出格線右側。這條規則把整個 1023px 以下補齊成同一種行為，順便修掉那段破格。

本檔載入順序在 mmui 之後（見 src/View/PageShellRenderer.php 的 buildDefaultAssets），同為
!important 時後載入者勝，所以 768px 以下兩條規則結果一致、不會互相打架。
*/
@media (max-width: 1023px) {
    main > fieldset.mmui_Card {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================================
   LAPTOP + TABLET + MOBILE（<= 1919px）共用的卡片內部調整

   以下三條都是卡片變窄之後才會浮現的問題，DESKTOP（>= 1920px）維持現況不套用。
   共用一個 @media 是因為它們的成因相同：mmui/c/real/card.css 的 .Head／.Foot／.Cover 都是照
   桌機那張約 420px 寬的卡片設計的固定值。
   ========================================================================== */
@media (max-width: 1919px) {
    /*
    .Head 在 card.css 是寫死的 height: 72px，而 .mmui_Card 本身是 overflow: hidden。
    三個登入版型的 .Head 放的都是整句說明（最長的是 form_qrcode.php 的
    「請使用手機掃描 QRCODE 後，輸入手機上的驗證碼」），左右還各夾一顆 Star 圖示，在手機寬度會折到
    第三行；三行約 69px 已經逼近 72px，字級或文案再長一點就會被 overflow: hidden 直接裁掉，
    而且因為沒有捲軸，光看畫面不容易發現少了半行字。
    改成 min-height 保留原本的視覺高度，真的放不下時讓卡片自己長高；上下再各留 12px 內距，
    折行後的文字才不會貼著分隔線。
    */
    main > fieldset.mmui_Card > .Head {
        padding-top: 12px;
        padding-bottom: 12px;
        height: auto;
        min-height: 72px;
    }

    /*
    .Foot 在 card.css 是 grid-auto-flow: column，一列排到底、不會折行。form_input.php 的第二個
    .Foot 會同時放「切換 QRCODE 登入」與「切換 PassKey 登入」兩顆 .mmui_Button.S（form_qrcode.php
    與 form_passkey.php 的最後一個 .Foot 同理），兩顆合計約 353px；卡片可用寬度扣掉 .Foot 的左右
    16px 內距後，視埠約 430px 以下就放不下，一樣被 .mmui_Card 的 overflow: hidden 裁掉 —— 也就是
    手機上「切換登入方式」的按鈕會有一顆直接消失。
    改用 flex 並允許折行，放得下時維持同一列、放不下時自動換行成上下兩顆，不必為此再切一個斷點
    （按鈕文案日後變長也自動成立）。
    justify-content 改置中：折行後每列只剩一顆按鈕，繼承 card.css 的 space-between 會讓它們貼左，
    看起來像沒對齊；置中則不論一列或兩列都是對稱的。gap 沿用 card.css 的 var(--GridGap)，flex 同樣
    吃這個屬性。版型裡用來撐出 space-between 的空 <div></div> 佔位在 flex 下寬度為 0，不影響置中。
    */
    main > fieldset.mmui_Card > .Foot {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /*
    .Cover > img 在 card.css 是 width: 100%，QRCODE 圖（form_qrcode.php 的 base64 PNG）會被放大到
    跟卡片等寬。1023px 以下卡片是全寬的，1023px 時等於把一張小 PNG 拉到約 921px —— 又糊又佔掉整個
    首屏，使用者還得捲動才看得到底下的驗證碼輸入框。
    夾在 320px 以內並置中：手機上仍然填滿可用寬度（min() 會讓它跟著卡片縮），寬螢幕則停在夠掃描的
    大小。只有 form_qrcode.php 有 .Cover，其他兩個版型不受影響。
    */
    main > fieldset.mmui_Card > .Cover > img {
        margin: 0px auto;
        width: min(100%, 320px);
        display: block;
    }
}

/*
MOBILE（<= 1023px）：h1 副標「您最佳的業務助理」為 8 個全形字 = 8em 寬，在 3.5rem（--H1FontSize）
下會在窄螢幕被折成兩行。可用寬度為 100vw 扣掉外殼左右各一個 --ShellSidePadding（320px ~ 2560px
之間為 5vw），即 90vw；因此每字 10.5vw 可讓整句剛好維持一行並留些餘裕。
min() 自己會夾住上限：10.5vw 要小於 3.5rem（56px）得視埠窄於約 533px，所以這條規則實際只在真正的
手機尺寸生效，1023px ~ 533px 之間算出來就是原本的 --H1FontSize、與不套用完全相同。斷點寫成本頁
MOBILE 的上限 1023px 而非舊的 768px，是為了讓這份檔案的斷點語彙與上面四段一致，行為並未改變。
line-height 沿用設計稿的 2 倍字級比例（7rem / 3.5rem），避免縮字後行距失衡。
*/
@media (max-width: 1023px) {
    main > h1 {
        font-size: min(var(--H1FontSize), 10.5vw);
        line-height: 2em;
    }
}

/* ==========================================================================
   LAPTOP + TABLET + MOBILE（<= 1919px）：讓整頁塞得進視埠高度

   登入頁在垂直方向是「h1 + 卡片 + 版權列」三塊，除了 h1 之外全是固定高度，實測（Chrome，
   /login 帳密版型）：body 的 padding-top 60px + 卡片 503px + main 的兩個 row-gap 各 20px
   + 版權列 24px = 627px；h1 則是 224px（兩行 × --H1LineHeight 7rem），合計 851px。

   851px 在 DESKTOP（1920×1080）綽綽有餘，但往下就開始溢出、登入表單被推到摺線下：
     1536×730（1080p 螢幕 125% 縮放，再扣掉瀏覽器上緣）  溢出 121px
     1280×800                                           溢出  51px
     1024×768（iPad 橫向）                               溢出  83px
   注意溢出與否取決於視埠「高度」而不是寬度 —— 同樣是 LAPTOP 寬度，1440×900 不溢出、
   1536×730 卻溢出 —— 所以這裡不是按四段各給一組固定字級，而是讓 h1 直接跟著可用高度走。

   h1 固定是兩行（版型裡有 <br/>），line-height 又是 2em，所以 h1 高度 = 4 × font-size。
   要讓總高不超過視埠，即 var(--LoginFixedBlockH) + 4 × font-size <= 100vh，
   解出 font-size <= (100vh - var(--LoginFixedBlockH)) / 4，正是下面 min() 的第三項。

   --LoginFixedBlockH 由 js/login.js 量測實際高度後回寫，這裡宣告的 632px 只是量不到時
   （JS 被停用、或尚未執行到）的預設值，取自帳密版型沒有切換登入按鈕時的實測 627px 再留 5px 餘裕。
   之所以不在 CSS 寫死：這個高度實測從 627px 到 744px 都有，同時取決於是哪個版型、訪客有沒有
   用過 QRCODE／PassKey 登入（決定卡片底部那兩顆切換鈕出不出現），以及那兩顆鈕在目前寬度會不會
   折行 —— 最後一項是排版結果，CSS 選擇器看不到。詳細的數字與理由寫在 js/login.js。

   三項 min() 各自負責一個上限，合起來才是安全值：
     var(--H1FontSize)  設計稿原始字級，高度與寬度都夠時維持現況
     10.5vw             寬度上限，原本 MOBILE 那條規則的條件，避免副標被折成兩行
     (100vh - …) / 4    高度上限，本段新增
   外層再用 max() 給 1.5rem（= --H6FontSize）的下限：算到這個字級時總高已是 632 + 96 = 728px，
   視埠高度低於 728px 就再怎麼縮也塞不下（例如 360×640 的小手機），此時繼續縮字只會讓標題
   變得難讀卻仍然要捲動，不如停在還看得清楚的尺寸。下限取 1.5rem 而非更大的值，是因為
   1536×730（1080p 螢幕 125% 縮放後再扣掉瀏覽器上緣，很常見的筆電視窗）算出來是 24.5px，
   下限只要高於它就會讓這個尺寸白白溢出 25px。

   範圍用 main:has(> fieldset.mmui_Card) 限定在三個登入版型：狀態頁沒有那張卡片、垂直組成
   完全不同（h1 + 大段 h2 說明），套同一條算式會把它的 h1 縮得比需要的更小。
   :has() 不支援時整條規則會被丟掉，退回上面那條只看寬度的規則，不會壞成半套。

   --LoginFixedBlockH 宣告在 main 上而非 :root，是因為 js/login.js 也是把量測值寫在 main 的
   行內樣式上（行內優先度高於這裡的預設值，量到就自動接手），兩者放同一個元素才看得出接力關係。
   ========================================================================== */
@media (max-width: 1919px) {
    main:has(> fieldset.mmui_Card) {
        --LoginFixedBlockH: 632px;
    }
    main:has(> fieldset.mmui_Card) > h1 {
        font-size: max(1.5rem, min(
            var(--H1FontSize),
            10.5vw,
            calc((100vh - var(--LoginFixedBlockH)) / 4)
        ));
        line-height: 2em;
    }
}
/*
狀態頁（templates/status/ 的三頁，StatusPageController 一律帶 jcKeyword: 'login'，所以與登入頁
共用這支 CSS）在 main > h2 放的是整句說明文字，不是短標題：needlogin 最長的一行
「5 秒後將自動轉向登入畫面」實測 11.78em，在 3.1rem（--H2FontSize）下於手機會被折成兩行，
再配上 --H2LineHeight 固定的 6.2rem，整段說明會把畫面撐得又高又鬆。
可用寬度同上為 90vw，11.78em × 7.3vw ≈ 86vw，可讓最長的一行維持單行並留些餘裕
（375px 寬約 27px、768px 寬則吃回 --H2FontSize 的 49.6px）。
同上，min() 會自己夾住上限（7.3vw 小於 49.6px 需視埠窄於約 679px），斷點改寫成 MOBILE 的
上限 1023px 只是語彙一致，行為不變。
line-height 沿用設計稿的 2 倍字級比例（6.2rem / 3.1rem），避免縮字後行距失衡。
登入頁本身的 main 內沒有 h2，這條規則只會作用在狀態頁。
*/
@media (max-width: 1023px) {
    main > h2 {
        font-size: min(var(--H2FontSize), 7.3vw);
        line-height: 2em;
    }
}