/*
RWD notes (see docs/architecture.md): application_v1 had zero @media queries anywhere and a
fixed 1144px/128px shell — below ~1400px viewport width the top nav and submenus would overflow.
The container is now fluid (clamp-based side padding instead of a fixed 128px), and below the
--bp-md breakpoint the desktop hover-flyout submenu is replaced by a tap-friendly off-canvas
panel (#BD_MobileNav, see mobile_nav.css / MobileNav.js) instead of trying to force the
1144px-wide SubMenu flyout to fit a phone screen.
*/
:root {
    --bp-sm: 480px;
    /* Breakpoints are the first desktop-side width; --bp-md is 769px so the mobile layout's
       upper bound is 768px inclusive (the exact iPad-portrait / tablet width counts as mobile). */
    --bp-md: 769px;
    --bp-lg: 1024px;
    --ShellSidePadding: clamp(16px, 5vw, 128px);
}

body {
    overflow-y: scroll;
    padding: 60px var(--ShellSidePadding) 0px var(--ShellSidePadding);
}

nav#BD_MainMenu {
    overflow: hidden;
    position: fixed;
    z-index: 8;
    padding: 0px var(--ShellSidePadding) 0px var(--ShellSidePadding);
    top: 0px; left: 0px;
    width: 100%; height: 60px;
    background-color: var(--GlobalBGColor);
    transition: all 0.2s;

    grid-template-rows: 60px auto ;
}
nav#BD_MainMenu.Open {
    overflow: unset;
    height: 240px;
    background-color: #FEFEFE;
    border-bottom: 1px solid var(--GlobalBorderColor);
    box-shadow:
    0px 1px 0px 0px var(--GlobalBorderShadowColor1),
    0px 1px 0px 0px var(--GlobalBorderShadowColor1) inset ;
}
nav#BD_MainMenu > ul {
    display: flex;
}
nav#BD_MainMenu > ul > li {
    padding: 18px 16px 0px 16px;
    font-family: var(--GlobalFontFamilyBold);
}
nav#BD_MainMenu > ul > li:hover {
    cursor: pointer;
}
nav#BD_MainMenu > ul > li.BackOff {
    opacity: 0.42;
}
/* 游標停在被淡化的項目上時，把它還原成正常字色。「簡報」沒有子選單、不會觸發
   SubMenuWork，別的項目開著子選單時它會一直維持 .BackOff 而沒有任何 hover 回饋。 */
nav#BD_MainMenu > ul > li.BackOff:hover {
    opacity: 1;
    color: var(--GlobalFontColor);
}
/* 沒有子選單的選單列（「簡報」）以 onclick 驅動，會吃到 mmui.php 給 [onclick] 的按壓底色；
   頂欄是整片 60px 高的橫列，一格變綠底太搶眼，這裡改回不變色。 */
nav#BD_MainMenu > ul > li:active {
    background-color: transparent;
}
nav#BD_MainMenu > ul > .Logo {
    margin-right: 16px;
    font-size: 1.2rem;
}

/* Hamburger toggle — hidden on desktop (hover-capable, wide) viewports, shown below --bp-md. */
#BD_MobileNavToggle {
    display: none;
}

#BD_SubMenuBox {
    position: relative;
    width: 100%; height: 100%;
}
nav.SubMenu {
    position: absolute;
    z-index: 7;
    width: 1144px;
    max-width: calc(100vw - (2 * var(--ShellSidePadding)));

    opacity: 0;
    translate: 0px -5px;
    transition: all 0.5s ease-in-out;

    grid-template-columns: 111px auto ;
}
nav.SubMenu.Open {
    z-index: 8;
    opacity: 1;
    translate: 0px 0px;
}
nav.SubMenu > .L {
    margin-right: 16px;
    padding: 0px 16px 0px 16px;
    width: 111px;

    display: grid;
    align-content: start;
    justify-items: center;
    grid-row-gap: 8px;
}
nav.SubMenu > .R {
    width: 660px;
    max-width: 100%;

    display: flex;
    flex-flow: wrap;
}
nav.SubMenu > .R > div {
    padding: 16px 16px;
}
nav.SubMenu > .R > div:hover {
    cursor: pointer;
}
nav.SubMenu > .SrchBox {
    width: 516px;
    max-width: 100%;
}

/* Below --bp-md: hover-only flyout submenus give way to the off-canvas mobile nav panel. */
@media (max-width: 768px) {
    nav#BD_MainMenu > ul {
        display: none;
    }
    #BD_MobileNavToggle {
        display: inline-flex;
    }
    nav.SubMenu {
        display: none !important;
    }
}

main {
    
}
main.BottomH1 {
    padding-bottom: 360px;
}
main > .TitleBox {
    position: sticky; 
    z-index: 7;
    top: 60px;
    width: 100%;
    background-color: var(--GlobalBGColor);
/*
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    justify-content: space-between;
*/
    align-items: baseline; 
}
main > .TitleBox > h1 {
    display: grid;
    grid-auto-flow: column;
    align-items: baseline;
    justify-content: start;
}
main > .TitleBox > .R {
    display: flex;
    justify-content: end;
}
main.Stuck > .TitleBox {
    align-items: center;
}
main.Stuck > .TitleBox > h1 {
    font-size: var(--H4FontSize);
    line-height: var(--H4LineHeight);
}

#BD_ToolBox {
    position: fixed;
    z-index: 9;
    top: 0px; right: var(--ShellSidePadding);
    height: 60px;

    display: grid;
    grid-auto-flow: column;
    gap: 0px;
    align-items: center;
}

#AccountInfoBox > .IconMesgC {
    position: absolute;
    top: 0px; left: 0px;
    width: 0px; height: 0px;
}
#AccountInfoBox > .IconMesgC.On {
    top: 27px; left: 21px;
    width: 21px; height: 21px;

    color: #FFF;
    font-size: 0.7rem;
    font-weight: bolder;
    line-height: 21px;
    justify-content: center;

    border-radius: 50%;
    background-color: #D32F2F;
}

/*
Below --bp-md the shared .mmui_Grid_R2C2 fallback (mmui/c/real/grid.css) collapses every R2C2
grid into one column, which stacks the account button into three rows -- avatar, then name,
then title -- roughly 96px tall inside the 60px #BD_ToolBox bar. That fallback exists for the
wide SubMenu panels; the account button is only a 36px avatar plus two short lines, so it still
fits side by side on a phone. Keep the two-column shape here (the id outranks the
.mmui_Grid_R2C2 class, so no !important is needed) and centre the avatar against the text
block.
*/
@media (max-width: 768px) {
    #AccountInfoBox {
        align-items: center;
        grid-template-columns: min-content auto;
        grid-template-areas:
        "R12C1 R1C2"
        "R12C1 R2C2"
        ;
    }
    #AccountInfoBox > .R12C1 {
        align-self: center;
    }
    /* One row means the text grows leftwards from #BD_ToolBox's fixed right edge, so cap it:
       a long name would otherwise run under #BD_MobileNavToggle on the left. */
    #AccountInfoBox > .R1C2,
    #AccountInfoBox > .R2C2 {
        display: block;
        overflow: hidden;
        max-width: 45vw;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

#AccountToolBox {
    width: 300px;
}

.ProductSelectorListItemBox,
.CustomerSelectorListItemBox {
    display: grid;
    grid-template-columns: auto 102px ;
    gap: 12px;
    align-items: center;
}

main .SubMenuDeskBox {
    height: fit-content;
    position: sticky;
    top: 172px; 
    z-index: 7;
}

/*
手機解析度（< --bp-md）：上面那個 top: 172px 是照桌機的標題列算出來的 —— 固定頂欄 nav#BD_MainMenu
的 60px（也是 main > .TitleBox 的 top）加上 h1 的 --H1LineHeight（7rem = 112px）。桌機
--GridColumns 為 24 時 h1 與右側 .R 工具列同一列，整條標題列就是 112px 高，底緣正好落在 172px。

手機 --GridColumns 降為 1 欄（mmui/c/real/grid.css）後，.TitleBox 的 subgrid 把 h1 與 .R 拆成上下
兩列，標題列高度變成「h1 行高 + row-gap + 工具列高」；各列表頁 CSS 又把 h1 字級收斂成
min(--H1FontSize, 8vw)，高度隨螢幕寬度變動，報價／訂單的 h1 內還有一顆檢視切換鈕
（quotation／order 的 title_left.php），詳細頁的標題（「產品詳細資訊」等）則可能折行。寫死的
172px 於是有時比標題列矮，捲動中的內容從標題列與卡片之間的縫隙穿過；有時比標題列高，卡片壓住標題列
右側的上頁／跳頁／下頁按鈕。

因此手機改成跟著標題列的實際高度走：60px 是固定頂欄的高度（即 .TitleBox 的 top），
var(--TitleBoxHeight) 是 js/_app.js 以 ResizeObserver 量測 main > .TitleBox 後寫在 main 上的實際
高度。不在 CSS 裡推像素算式，是因為各頁標題列的組成不同、又隨寬度變動，量測才每頁每寬度都準，日後
工具列或標題結構改動也不必重算。量不到時（JS 尚未執行或被停用）退回 112px，即原本的 172px 行為。

桌機維持 172px 不動：桌機捲動後 main.Stuck 會把 h1 換成 --H4FontSize／--H4LineHeight、標題列跟著
變矮，固定的 172px 才是原本的行為；手機各頁 CSS 對 main.Stuck 的 h1 指定與捲動前同一尺寸，標題列
高度本來就不變，量測值不會因捲動而跳動。

順帶把 main > .TitleBox 抬到 z-index: 8：兩者原本都是 7（上面的 main .SubMenuDeskBox 與第 137 行
的 main > .TitleBox），同層時由 DOM 順序決定繪製先後，.SubMenuDeskBox 在後面所以會蓋住標題列。
對齊之後正常情況已不重疊，這條是防次像素捨入、以及量測套用前的第一個影格。8 與固定頂欄
nav#BD_MainMenu 同層但兩者不重疊（頂欄 0～60px，標題列從 60px 起貼）；桌機 hover 用的
nav.SubMenu.Open 同為 8，但手機 nav > ul 是 display: none，不會同時出現。#BD_ToolBox（9）與行動
選單 #BD_MobileNavBox／#BD_MobileNav（20／21）仍在標題列之上，操作不受影響。

規則放在 main.css 而非各頁 CSS：172px 本身就定義在這裡，且列表頁與詳細頁（quotation／order／
product／customer 的 detail、quotation/preview）都有 .SubMenuDeskBox，同一個問題一次修完。
*/
@media (max-width: 768px) {
    main .SubMenuDeskBox {
        top: calc( 60px + var(--TitleBoxHeight, 112px) );
    }
    main > .TitleBox {
        z-index: 8;
    }
}


/* ==========================================================================
   詳細頁的手機版（< --bp-md）

   customer／product／order／quotation 四個詳細頁的結構相同：標題列 + 左側常駐的「快捷選單」卡片
   （#AnchorMenu，.SubMenuDeskBox）+ 右側的表單卡片群，卡片裡的錨點目標一律叫 #Area1、#Area2…。
   手機把 --GridColumns 降為 1 欄（mmui/c/real/grid.css）之後四頁壞的地方也一模一樣，因此規則寫在
   main.css 一次修完，而不是在四份頁面 CSS 各抄一遍 —— 與上面 main .SubMenuDeskBox 那段同一個理由。

   範圍靠 main:has(#DetailAnchorMenu) 框住：#DetailAnchorMenu 是
   templates/layout/detail_anchor_menu.php 產生的手機版快捷選單 popover，只有那四頁會輸出它。
   不用 main:has(#AnchorMenu) —— quotation/preview.php 也用了 #AnchorMenu 這個 id，但它裝的是
   「調整選項」（發票專用章 + 重新產生），不是錨點清單，被下面那條 display: none 收掉會直接少掉功能。

   :has() 不支援時整條規則會被丟掉，四頁退回調整前的樣子，不會壞成半套。
   ========================================================================== */

/*
h1 吃 --H1FontSize（3.5rem = 56px）與 --H1LineHeight（7rem = 112px），手機 .TitleBox 的 subgrid
又把 h1 與右側 .R 工具列拆成上下兩列，光標題就佔掉整條 sticky 標題列近三分之二的高度；詳細頁的
標題還可能更長（「報價單 Q202600005」）而折行。

收斂方式：外殼左右各留一個 --ShellSidePadding（768px 以下為 5vw），可用寬度即 90vw，以 8vw 收斂
（375px 寬約 30px、768px 寬約 61px）；行高改 1.6em 跟著字級走。main.Stuck（捲動後上面第 162 行把
h1 換成 --H4FontSize／--H4LineHeight）一併套用，維持捲動前後同一尺寸。

這條規則原本散在 8 個頁面 CSS（Customer／Quotation／Product／order／CustomerInsert／
QuotationInsert／productInsert 七份字串完全相同，dashboard 多一個 flex）外加本檔一份用
main:has(#DetailAnchorMenu) 限定詳細頁的版本，共 9 份重複，每份還各配一段講同樣道理的註解。
改放這裡一次涵蓋全部頁面：main.css 每頁都載入，選擇器 main > .TitleBox > h1 是原先各版本的
超集，宣告完全相同，所以原本已有規則的九頁行為不變。

副作用是原本沒有這條規則的八頁（/message、/account 五頁、/account/files、
/quotation/pdf-waiting）也跟著從 56px/112px 收斂成 40px/64px —— 那正是本規則要解決的問題，
這些頁先前只是沒被涵蓋到。

h1 內那顆「快捷選單」下拉鈕的字級由 mmui/c/real/button.css 的 .mmui_Button 自己指定 1rem，不隨
h1 縮放；報價／訂單列表頁 title_left.php 的檢視切換鈕同理。要為個別頁另外調整時，在該頁 CSS
覆寫即可（它晚於 main.css 載入）。
*/
@media (max-width: 768px) {
    main > .TitleBox > h1,
    main.Stuck > .TitleBox > h1 {
        font-size: min(var(--H1FontSize), 8vw);
        line-height: 1.6em;
    }
}

/*
標題列右側的工具列：按鈕文字收成圖示，按鈕組下方補 8px。

各頁 *_title_right.php 已把按鈕文字包進 .TextFull，這裡在手機切成 display: none —— 兩種狀態都在
DOM 裡，不需 JS，也不會有載入時的閃動；文字藏起來後按鈕只剩圖示，樣板另有 aria-label 保留無障礙
名稱。.mmui_Button 是 grid-auto-flow: column 的單列 grid，display: none 會讓文字整個離開格線，不像
visibility: hidden 會留下空欄與 var(--GridGap) 的間距，gap 不必另外歸零。報價詳細頁最多會有八顆
按鈕，是四頁裡最擠的一組。

.R 是手機標題列的最後一列，按鈕組的下緣原本正好等於 .TitleBox 的下緣（兩者都是 0 內距），捲動時
內容會緊貼著按鈕從底下穿過，.mmui_Button／.mmui_ButtonBox 的 box-shadow 還帶一圈 0 0 0 3px 的外框
會被切掉。內距加在 .R 而不是 .mmui_ButtonBox 本身：後者是 border-radius: 39px、padding 0px 13px
的膠囊，單獨加下內距會把它撐成上下不對稱、按鈕被推到偏上；加在 .R 則是把 sticky 標題列的不透明
背景往下多延伸 8px，膠囊不變形。標題列因此變高 8px，.SubMenuDeskBox 的 sticky top 與下面的
scroll-margin-top 都跟著 js/_app.js 量測的 --TitleBoxHeight 自動修正。

只針對 .R：h1 內那顆「快捷選單」下拉鈕的文字是選單名稱而非可省略的按鈕文案，藏掉只會剩一個下拉
箭頭，因此不套用。
*/
@media (max-width: 768px) {
    main:has(#DetailAnchorMenu) > .TitleBox > .R .mmui_Button > .TextFull {
        display: none;
    }
    main:has(#DetailAnchorMenu) > .TitleBox > .R {
        padding-bottom: 8px;
    }
}

/*
標題列裡「獨立一顆」的按鈕（四頁都只有「返回」）在手機改成圓形圖示鈕。

文字被上一段收掉之後，.mmui_Button 原本的 padding: 9px 27px 與 border-radius: 39px 會讓只剩一個
圖示的它變成一顆左右很寬的橢圓，跟旁邊那組膠囊按鈕組的比例對不上。mmui 本來就有這個狀態的預設
—— mmui/c/real/button.css 的 .mmui_Button.Icon（padding 歸零、45x45、border-radius: 100%）——
這裡把同一組值套上去。

不是在樣板直接加 class="mmui_Button Icon"：那會連桌機一起變成 45px 的圓，而桌機的文字還在，會直接
撐破。CSS 也沒辦法「只在某個寬度加上 class」，要嘛用 JS 在斷點切 class（會有載入時的閃動，與本段
其他規則「兩種狀態都在 DOM 裡、不需 JS」的作法不一致），要嘛就是這裡的作法：只在手機套用 .Icon
的那組值。日後 button.css 調整 .Icon 的尺寸，這裡要跟著對一次。

「獨立一顆」靠子代選擇器判斷：> .TitleBox > .R > .mmui_Button 只會選到 .R 的直接子按鈕，也就是
沒有被包進 .mmui_ButtonBox 的那些；按鈕組裡的按鈕是 .R 的孫代，維持 button.css 給它們的方形分隔
樣式（padding 9px 13px、無圓角、右側一條分隔線），整組仍是一顆完整的膠囊。
訂單詳細頁在沒有列印權限時整列只剩「返回」一顆，同樣走這條規則。
*/
@media (max-width: 768px) {
    main:has(#DetailAnchorMenu) > .TitleBox > .R > .mmui_Button {
        padding: 0px;
        width: 45px; height: 45px;
        border-radius: 100%;
        justify-content: center;
    }
}

/*
h1 內的「快捷選單」下拉鈕（templates/layout/detail_anchor_menu.php 的 .MobileOnly）只在手機出現：
桌機（>= --bp-md）左側一直看得到 #AnchorMenu 卡片（.SubMenuDeskBox 側欄），標題列再放一份是重複
入口；手機那張卡片被收起（見下一段），才需要這顆按鈕。

預設（桌機）display: none，再於 @media (max-width: 768px) 還原成 .mmui_Button 原本的 display: grid
（mmui/c/real/button.css）—— 用「預設隱藏 + 手機還原」而不是 min-width 的反向查詢，是為了與本段
其他規則共用同一個 max-width: 768px 斷點，兩段條件互為精確補集，不會有 768～769px 之間的縫隙。
作法與 css/Customer.css 對列表頁標題列搜尋鈕的處理相同；這顆不在 .mmui_ButtonBox 內，沒有該檔那條
收掉相鄰按鈕 border-right 的問題。
*/
main:has(#DetailAnchorMenu) > .TitleBox > h1 .mmui_Button.MobileOnly {
    display: none;

    /*
    h1 是 grid-auto-flow: column 的兩欄格線（標題文字 + 這顆按鈕，見上面第 149 行），欄寬由內容
    決定。客戶詳細頁的標題只有「客戶」兩個字沒問題，但報價／訂單的標題帶單號（「報價單
    Q202600001」），在手機寬度會把按鈕那欄壓到剩下一個字的寬度，「快捷選單」跟著折成兩行。
    按鈕文字不折行之後，要換行的是標題那欄（單號本來就會折到第二行），按鈕維持完整一行。
    */
    white-space: nowrap;
}
@media (max-width: 768px) {
    main:has(#DetailAnchorMenu) > .TitleBox > h1 .mmui_Button.MobileOnly {
        display: grid;
    }
}

/*
側欄的「快捷選單」卡片（#AnchorMenu）收起，錨點的捲動落點讓開 sticky 標題列。

--GridColumns 降為 1 欄後側欄不再在表單左邊，而是整張卡片排到表單上方，一進頁面就把第一張卡片推出
首屏；錨點在手機改由標題列那顆下拉鈕提供，卡片沒有留在版面上的理由，因此直接隱藏而不是做成可開合
——下拉鈕開的是 popover，不需要卡片當容器。用 display: none 而不是 visibility 或 height：卡片是
外層 subgrid 的格線項目，display: none 會讓它連同該列的 row-gap 一起離開版面，表單直接遞補到標題列
下方；visibility: hidden 會留下整張卡片高度的空白。

手機的錨點由 js/_app.js 以 scrollIntoView 捲動，目標的上緣會貼齊視窗頂端，正好被固定頂欄
nav#BD_MainMenu（60px）與其下的 main > .TitleBox 蓋住。scroll-margin-top 讓瀏覽器自己把落點往下
讓開這段高度，不必在 JS 裡推像素；算式與上面 main .SubMenuDeskBox 同一組，再加一個 --GridBaseGap
當視覺留白，卡片上緣才不會緊貼標題列。選擇器用 [id^="Area"] 而不是逐頁列出 #Area1…#Area5：四頁的
錨點數量不同（產品的「組合販售內容」還是條件式輸出），前綴比對才不必跟著每頁維護。

桌機完全不套用：卡片維持常駐側欄、mmui/j/anchor.js 的錨點照舊（它走 window.scrollTo，位移已含
#AnchorMenu 的 sticky 偏移，不經過 scrollIntoView），標題列那顆下拉鈕本來就是 display: none。
*/
@media (max-width: 768px) {
    main:has(#DetailAnchorMenu) #AnchorMenu {
        display: none;
    }

    main:has(#DetailAnchorMenu) [id^="Area"] {
        scroll-margin-top: calc( 60px + var(--TitleBoxHeight, 112px) + var(--GridBaseGap, 16px) );
    }
}

/*
卡片內的表格：卡片不被撐開、欄寬貼齊內容、超出的部分用手指左右滑動。

桌機 24 欄時表格排得下（客戶的聯絡人一覽六欄、報價與訂單的項目表七欄、產品的組合項目五欄），手機
降為 1 欄後同一張表格只剩約一個螢幕寬，於是同時壞了兩件事：

- .mmui_Table 的 width: 100% 加上預設的 table-layout: auto，會把每一欄壓到內容擠不下為止 ——
  姓名「呂大明」折成三行、電子郵件逐字斷行、公司名稱折成兩行，整張表變成一片直條。
- 欄位再多一點連折都折不下：折無可折之後表格的 min-content 寬度仍大於螢幕。<fieldset> 帶有 UA 樣式
  min-inline-size: min-content（是明確值，.mmui_Card 的 overflow: hidden 消不掉），卡片因此被撐得
  比同一欄裡的其他卡片寬，整頁跟著出現橫向捲動。

解法是把表格交給一個捲動容器：各樣板已把 <table> 包進 mmui 自帶的 .mmui_Table_Box
（mmui/c/real/table.css 的 overflow: auto）。捲動容器的 min-content 寬度是 0，<fieldset> 的
min-inline-size 跟著收斂，卡片回到與其他卡片同寬（下面仍把 min-inline-size 明確歸零當保險，作法與
css/Quotation.css 對 #StatusMenu 那張卡片相同，且用 :has() 限定在「裝了表格的卡片」，不動到同頁
其他卡片的最小寬度）；溢出的部分只留在容器的橫向捲動軸內，overscroll-behavior-x: contain 避免滑到
底時把整頁往旁邊帶。

欄寬則改成貼齊內容：width: auto 讓 table-layout: auto 依內容決定欄寬，儲存格一律 nowrap 不再折行；
min-width: 100% 保留「內容不滿一個螢幕時表格仍填滿卡片」的行為，橫線不會只畫半截。<th> 原本是
padding: 4px 0px（欄寬由 width: 100% 撐開時不需要左右內距），改成 nowrap 之後標題會彼此相黏，
因此補上與 <td> 相同的 8px 左右內距；.mmui_Table > thead/tbody/tfoot 三種位置的 <th> 都要涵蓋，
collector 的表頭在 <thead>、客戶詳細頁的則在隱式 <tbody> 裡。

捲動範圍即 .mmui_Card > .Body 的內容區，左右內距沿用 card.css 對 .Body 的 15px，與站上其他卡片
一致。桌機不套用：表格本來就排得下，.mmui_Table_Box 的 overflow: auto 不會產生捲動軸。
*/
@media (max-width: 768px) {
    main:has(#DetailAnchorMenu) .mmui_Card:has(.mmui_Table_Box) {
        min-width: 0;
        min-inline-size: 0;
    }

    main:has(#DetailAnchorMenu) .mmui_Table_Box {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    main:has(#DetailAnchorMenu) .mmui_Table_Box > .mmui_Table {
        width: auto;
        min-width: 100%;
    }
    main:has(#DetailAnchorMenu) .mmui_Table_Box > .mmui_Table th,
    main:has(#DetailAnchorMenu) .mmui_Table_Box > .mmui_Table td {
        white-space: nowrap;
    }
    main:has(#DetailAnchorMenu) .mmui_Table_Box > .mmui_Table th {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/*
「審核進度」卡片（報價／訂單詳細頁的 #Area1）裡的流程列：內容自然展開，超出卡片的部分橫向捲動。

.mmui_Process（mmui/c/real/process.css）是 flex-direction: row 的一列，每個步驟是一欄「膠囊 +
下方的時間／退件理由」。flex 項目預設 flex-shrink: 1，手機 --GridColumns 降為 1 欄之後整列只剩
一個螢幕寬，於是每一欄都被壓到比內容還窄：膠囊裡的「製單」「提交」被擠成一個字，底下的時間折成
兩三行，進度看起來像四根直條。

對策與表格那段同一套，只是容器不同：
- .mmui_Process 給 min-width: max-content —— 容器至少要有所有步驟的最大內容寬，flex-shrink 就不會
  被觸發，每一欄拿到自己的自然寬度（膠囊照 process.css 的 min-width: 80px 與左右 24px 內距，說明
  文字照它自己的 max-width: 144px 折行）。原本的 width: 98% 留著：步驟少、排得下時仍維持置中留白
  的樣子，只有內容真的超過時 max-content 才會勝出。
- 捲動容器直接用卡片自己的 .Body，不像表格那樣另外包一層 —— 流程列是 .Body 的唯一內容，沒有需要
  留在捲動範圍外的東西（表格那邊還有一個隱藏的 preload <textarea>），用 :has(> .mmui_Process) 認
  出這張卡片就夠，樣板不必改。
- <fieldset> 的 UA min-inline-size: min-content 同樣要歸零，否則被撐開的是整張卡片而不是捲動軸，
  卡片會比同一欄裡的其他卡片寬。理由與表格那段相同。

桌機不套用：24 欄時整列本來就排得下，.Body 不會產生捲動軸。
*/
@media (max-width: 768px) {
    main:has(#DetailAnchorMenu) .mmui_Card:has(> .Body > .mmui_Process) {
        min-width: 0;
        min-inline-size: 0;
    }

    main:has(#DetailAnchorMenu) .mmui_Card > .Body:has(> .mmui_Process) {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    main:has(#DetailAnchorMenu) .mmui_Process {
        min-width: max-content;

        /*
        process.css 給 .mmui_Process 的是 justify-self: center，原意是整列比卡片窄時置中留白。
        Chrome 現在對區塊排版也吃 justify-self，所以流程列一旦寬過 .Body，溢出的部分會被平均分到
        左右兩側 —— 左邊那一半在捲動範圍之外（scrollLeft 不能為負），第一個步驟永遠看不到，右邊也
        只捲得到一半。手機改成 start，起點對齊 .Body 的內容左緣，整列都在捲動範圍內。
        桌機維持 center 不變（那裡整列本來就比卡片窄，置中才是原本的樣子）。
        */
        justify-self: start;
    }

    /*
    步驟之間的連接線（process.css 的 .mmui_Process > hr，flex: 1 1 auto）本來是靠剩餘空間撐開的。
    容器改吃 max-content 之後就沒有剩餘空間了，線會縮成 0，一整列只剩幾顆孤立的膠囊，看不出是一條
    流程。改成固定 24px 的基準寬度，線回來了，也一併計入 max-content 讓捲動範圍算得準。
    顏色仍由 process.css 的 hr.Done 決定，狀態看得出來。
    */
    main:has(#DetailAnchorMenu) .mmui_Process > hr {
        flex: 0 0 24px;
    }
}


/* #BizdroidAIAgent moved to css/ai_agent.css — it renders for logged-in users only, and that file
   is loaded only for them (PageShellRenderer), whereas main.css is on every page. */

/* ==========================================================================
   phonekey 兩頁（/phonekey 掃描頁與 /phonekeystart 啟動頁）的外層版面

   這兩頁是唯二沒有 <main> 的頁面：訪客身分不經過 templates/layout/main_frame.php，
   PageShellRenderer 直接把 templates/phonekey 的內容放進 body，所以 h4 標題、<br>、
   .mmui_CardBox 與版權列都成了 body.mmui_Grid 的直接子元素。它們沒有任何格線定位，於是各自
   被自動放進 24 欄（或 --bp-lg 以下的 12 欄）中的「一欄」—— 實測 1920px 時 h4 與 .mmui_CardBox
   只有 57px 寬、1024px 時只剩 23px，而卡片自帶行內 width: 360px，整張卡就從那個 23px 的格子
   裡溢出來，標題與卡片也各據一欄、完全沒有置中。只有 768px 以下 --GridColumns 降成 1 欄時
   才剛好正常，也就是說這兩頁一直以來只有手機寬度是對的。

   依登入頁那套四段斷點（DESKTOP >= 1920、LAPTOP 1440~1919、TABLET 1024~1439、MOBILE <= 1023）
   檢視，壞掉的是 DESKTOP／LAPTOP／TABLET 三段，以及 MOBILE 的 769px ~ 1023px。修法四段共用
   同一條規則，不必分段：跨滿整條格線之後，每一段各自的欄數多少都不影響結果，768px 以下原本
   就等效（1 欄的 1 / -1 就是原本的樣子），行為不變。

   選擇器用 body:has(> .mmui_CardBox) 框住：.mmui_CardBox 在其他十幾個模板也有用，但那些頁
   都被 main_frame.php 包在 <main> 裡，只有 phonekey 這兩頁讓它當 body 的直接子元素。
   規則放這裡而不是 css/phonekey.css，是因為那支只掛在 /phonekey（JCKeyword 為 phonekey），
   /phonekeystart 的 JCKeyword 是 phonekeystart、沒有對應的 CSS 檔；兩頁的外層結構完全相同，
   放 main.css 一次涵蓋，不必為了同一段規則多開一個檔案或抄兩份 —— 與上面 .SubMenuDeskBox、
   詳細頁那兩段收斂進本檔是同一個理由。
   :has() 不支援時整條規則會被丟掉，退回調整前的樣子，不會壞成半套。
   ========================================================================== */
body:has(> .mmui_CardBox) > * {
    grid-column: 1 / -1;
}

/*
.mmui_CardBox 自己是 display: grid（mmui/c/real/card.css），跨滿格線之後它就是整頁寬，裡面那張
行內寬 360px 的卡片預設會靠左。置中它 —— 這兩頁只有一張卡片，置中才是原本設計稿的樣子
（768px 以下 1 欄時卡片幾乎填滿可用寬度，看不出差別，所以先前沒被發現）。
*/
body:has(> .mmui_CardBox) > .mmui_CardBox {
    justify-items: center;

    /*
    .mmui_CardBox 沒有指定 grid-template-columns，只有一個隱式欄，寬度取內容的 max-content ——
    也就是卡片行內的 360px。那樣的話下面 min-width 放開之後，卡片的 max-width: 100% 算的百分比
    基準仍是那個 360px 的欄，等於沒放開。改成 minmax(0, 1fr) 讓欄跟著 .mmui_CardBox 撐滿，
    百分比才是真正的可用寬度；卡片仍靠上面的 justify-items 置中，寬螢幕看起來完全一樣。
    */
    grid-template-columns: minmax(0, 1fr);
}

/*
卡片的 min-width 要放開。.mmui_Card 本來就有 max-width: 100%（mmui/c/real/card.css），但它是
.mmui_CardBox 這個 grid 的項目，grid 項目的 min-width 預設是 auto、也就是內容的最小尺寸，只要
內容撐得住就縮不下去，max-width 根本吃不到 —— /phonekey 的相機預覽框原本寫死 358px 就是這樣
把卡片頂在 360px，讓 360x640、320x568 的手機整頁橫向捲動。放開之後 max-width: 100% 才真的生效。
兩頁都套：啟動頁目前的內容縮得下去、套了沒有差別，但它同樣帶著行內 width: 360px，日後內容一變
就會遇到同一件事。
*/
body:has(> .mmui_CardBox) > .mmui_CardBox > fieldset.mmui_Card {
    min-width: 0;
}

/*
h4 標題跟著可用寬度與可用高度收斂，作法與 css/login.css 的 h1 相同。

寬度：兩頁的副標最長是啟動頁的「行動裝置登入啟動設定」10 個全形字 = 10em。可用寬度為 100vw
扣掉外殼左右各一個 --ShellSidePadding（320px ~ 2560px 之間為 5vw），即 90vw；每字 8.5vw 可讓
整句維持一行並留些餘裕。原本 36.8px（--H4FontSize）時 390px 的手機會折成三行，光標題就多吃
74px —— 啟動頁在 390x844 因此溢出 48px，正是這兩頁的主力裝置。
min() 自己夾住上限：8.5vw 小於 --H4FontSize 需視埠窄於約 433px，所以這一項只在手機生效。

高度：兩頁垂直方向是「h4 + 卡片 + 版權列」，h4 以外的部分實測 630px ~ 671px（掃描頁的卡片
比啟動頁略矮，窄螢幕時 .Head 折行又會補回來）。h4 固定兩行（版型有 <br/>）、line-height 2em，
所以高度 = 4 x font-size，解 var(--PhoneKeyFixedBlockH) + 4 x font-size <= 100vh 得第三項。
變數取 676px，是實測上界 671px 再留 5px 餘裕。這裡直接用常數而不像登入頁那樣用 JS 量測，
是因為這兩頁沒有「切換登入方式」那種會不會出現、會不會折行的浮動區塊，跨度只有 41px。

下限 1.5rem（= --H6FontSize）與登入頁同一個理由：算到這個字級時總高已是 676 + 96 = 772px，
視埠比這更矮就再怎麼縮也塞不下，繼續縮只會讓標題難讀卻仍要捲動。

不分四段寫 @media：三項 min() 各自自我設限，高視埠寬螢幕算出來就是原本的 --H4FontSize，
與不套用完全相同，四段自然各自成立。登入頁當初把 DESKTOP 排除在外是因為那一段本來就正確、
要求維持現況；這兩頁的 DESKTOP 原本是壞的（見上面那段），沒有現況可以維持。
*/
body:has(> .mmui_CardBox) {
    --PhoneKeyFixedBlockH: 676px;
}
body:has(> .mmui_CardBox) > h4 {
    font-size: max(1.5rem, min(
        var(--H4FontSize),
        8.5vw,
        calc((100vh - var(--PhoneKeyFixedBlockH)) / 4)
    ));
    line-height: 2em;
}