/* v5_desktop_pages.css — Loop 6 G6.3 P0：victim 頁（proposal §四 4.1 機制②
   單一 DOM 響應式 reflow）desktop CSS。login_v5/signup_v5/billing_v5/radar_v5/
   goldvein_v5/adfactory 六頁共用，逐 archetype 寫 reflow rule。

   ⚠ 呢個檔同機制①（天眼/設定，`_desktop_shell.html`＋`v5_desktop.css`＋
   `scripts/build_desktop_css.py`）完全分離、互不污染——**唔准手改嗰三個
   檔**。呢度全部規則包喺 @media(min-width:1100px)，同 mobile 16 靶零撞。
   token 用返 v5.css `:root` 已定義嘅 --bg/--surface/--raised/--line/--cyan/
   --violet/--gold/--ink/--dim/--faint（billing/radar/goldvein 直接 load
   v5.css；base_v5 家族由 tokens.css→v5.css→v5_sub.css cascade 蓋章拎到同一
   份），保證同機制①視覺語言一致。

   改咗要同步 routes._asset_version() 個 hash 清單，否則 cache 唔 bust（鐵律）。
*/

/* ══════════════════════════════════════════════════════════════════════
   一、desktop chrome partial（_desktop_chrome.html）── 240px 側欄＋64px 頂欄
   複製 _desktop_shell.html 嘅視覺數值（css_probe 驗 parity）。default 喺
   任何 viewport 都 display:none，≥1100px 先顯示——保證 mobile 16 靶零 regress
   （呢個 guarantee 唔靠 media query cascade order，直接寫死 base rule）。
   ══════════════════════════════════════════════════════════════════════ */
.dchrome-aside, .dchrome-header{display:none}

@media(min-width:1100px){
  .dchrome-aside{
    display:flex;flex-direction:column;position:fixed;left:0;top:0;
    width:240px;height:100vh;background:var(--surface);
    border-right:1px solid var(--line);box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
    padding:16px;box-sizing:border-box;z-index:50;
  }
  .dchrome-brand{margin-bottom:40px;padding:0 8px}
  .dchrome-brand-name{
    font-family:'Space Grotesk','Noto Sans HK',sans-serif;font-size:24px;font-weight:700;
    color:var(--cyan);letter-spacing:-.02em;text-transform:uppercase;margin:0;
  }
  .dchrome-brand-eyebrow{font-size:10px;color:var(--faint);letter-spacing:.2em;margin:4px 0 0;text-transform:uppercase}
  .dchrome-nav{flex:1;display:flex;flex-direction:column;gap:8px}
  .dchrome-nav-item{
    display:flex;align-items:center;gap:12px;padding:10.5px 12px;border-radius:8px;
    color:var(--dim);text-decoration:none;font-size:14px;font-weight:500;
    transition:background .2s,color .2s;
  }
  .dchrome-nav-item .ms{font-size:20px;font-variation-settings:'FILL' 0,'wght' 400,'opsz' 24}
  .dchrome-nav-item:hover{color:var(--ink);background:var(--raised)}
  .dchrome-nav-item.is-active{
    color:var(--cyan);background:var(--raised);border-left:4px solid var(--cyan);padding-left:8px;
  }
  .dchrome-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px}
  .dchrome-who{display:flex;align-items:center;gap:12px;padding:0 8px}
  .dchrome-avatar{
    width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;
    border:1px solid var(--line);background:var(--raised);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--cyan);
  }
  .dchrome-who-text{min-width:0;overflow:hidden}
  .dchrome-tenant{font-size:12px;font-weight:700;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dchrome-plan{font-size:10px;color:var(--faint);margin:2px 0 0}
  .dchrome-upgrade{
    /* css_probe（tools/fidelity/chrome_probe.py）parity 對 _desktop_shell.html
       嘅 .btn-bevel-violet + rounded-lg(1rem) + tracking-widest(.1em)（Tailwind
       抽血實測值，唔係隨手估）—— 兩套 CSS 來源獨立，但視覺數值鎖死一致。 */
    display:block;text-align:center;width:100%;padding:10px 0;font-size:11px;font-weight:900;
    letter-spacing:.1em;color:#120826;text-decoration:none;border-radius:16px;box-sizing:border-box;
    background:linear-gradient(135deg,rgb(157,92,255) 0%,rgb(122,72,199) 100%);
    box-shadow:rgba(255,255,255,.3) 0 1px 0 inset,rgba(0,0,0,.2) 0 -1px 0 inset,rgba(157,92,255,.3) 0 4px 12px;
    transition:transform .15s var(--ease);
  }
  .dchrome-upgrade:active{transform:scale(.96)}

  .dchrome-header{
    display:flex;position:fixed;top:0;right:0;left:240px;height:64px;z-index:40;
    background:rgba(11,16,28,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.3);
    align-items:center;justify-content:space-between;padding:0 24px;box-sizing:border-box;
  }
  .dchrome-header-left{display:flex;align-items:center;gap:14px;min-width:0}
  .dchrome-header-icon{font-size:22px;color:var(--cyan);flex:none}
  .dchrome-header-title{
    font-family:'Space Grotesk','Noto Sans HK',sans-serif;font-size:18px;font-weight:700;
    color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .dchrome-header-sub{font-size:12px;color:var(--dim);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dchrome-header-right{display:flex;align-items:center;gap:4px;flex:none}
  .dchrome-header-btn{
    width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    color:var(--dim);text-decoration:none;transition:background .2s,color .2s;
  }
  .dchrome-header-btn:hover{color:var(--ink);background:var(--raised)}
  .dchrome-header-btn .ms{font-size:20px}
}

/* ══════════════════════════════════════════════════════════════════════
   二、共用「phone-frame 中和」── 任何 body[class^="dsk-page-"]（即所有開咗
   desktop_chrome opt-in 嘅頁：P0 billing/radar/goldvein/adfactory＋P1
   profile/referral/council/news/assets/generate/pack）,.phone 唔再係手機
   框，變返做 chrome canvas 嘅內容欄（ml-240px、pt-96px 清 fixed header、
   內容 max-width 1200 置中）。用 attribute-starts-with selector 令呢條規則
   自動 cover 所有 opt-in 頁，唔使逐頁加選擇器（Loop 6 G6.3 P1 精簡，P0 六頁
   視覺數值完全不變——純選擇器語法收窄，body class 仍然一 body 一 class）。
   ⚠ .phone／.screen 兩條要 :not(.dsk-page-login):not(.dsk-page-signup)──
   attribute selector 令呢兩條特異性 (0,2,1) 高過 §三 login/signup 專屬嘅
   (0,2,0)，蓋走 P0 login/signup 嘅置中卡＋branded 背景（Loop 6 後 P1 誤中，
   2026-07-11 hotfix）。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  body[class^="dsk-page-"]{
    display:block;min-height:100vh;background:var(--bg);
  }
  body[class^="dsk-page-"]:not(.dsk-page-login):not(.dsk-page-signup) .phone{
    width:auto;height:auto;max-width:none;min-height:100vh;
    border:none;border-radius:0;box-shadow:none;background:transparent;overflow:visible;
    margin-left:240px;
  }
  body[class^="dsk-page-"]:not(.dsk-page-login):not(.dsk-page-signup) .screen{
    max-width:1200px;margin:0 auto;height:auto;min-height:0;display:block;
    padding:96px 0 48px;overflow:visible;
  }
  body[class^="dsk-page-"] .apphead{
    display:none; /* 手機頂欄品牌塊——chrome header 已頂替 */
  }
  body[class^="dsk-page-"] .stage{
    position:static;overflow:visible;flex:none;height:auto;
  }
  body[class^="dsk-page-"] .page{
    position:static;overflow:visible;display:block;
    padding:0 32px 48px;animation:none;
  }
  /* ⚠ 上面兩條 property 唔准加 !important——adfactory 嘅 archetype D flex reflow
     （§七 `.page[data-page="adfactory"]{display:flex}`）要靠高特異性（多個
     attribute selector）自然覆蓋呢度嘅 display:block，!important 會令佢覆蓋唔到。 */
  body[class^="dsk-page-"] .subhead{
    display:none; /* 手機 back-arrow+kicker+h1 ── chrome header 頂替頁題／麵包屑職責 */
  }
  body[class^="dsk-page-"] .nav{
    display:none; /* 手機底部 tab bar ── 側欄已頂替 */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   三、login_v5 / signup_v5 ── Archetype B，冇側欄。殺 400px 手機邊框，
   換做全屏 branded 背景 + 置中 auth 卡（max-width 420px）。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  body.dsk-page-login, body.dsk-page-signup{
    display:block;min-height:100vh;background:var(--bg);
  }
  .dsk-page-login .phone, .dsk-page-signup .phone{
    width:100%;height:100vh;max-width:none;border:none;border-radius:0;box-shadow:none;
    display:flex;align-items:center;justify-content:center;overflow:visible;
    background:
      radial-gradient(120% 60% at 50% -8%, rgba(56,214,255,.12), transparent 60%),
      radial-gradient(85% 55% at 100% 108%, rgba(157,92,255,.12), transparent 60%),
      var(--bg);
  }
  .dsk-page-login .screen, .dsk-page-signup .screen{
    max-width:none;height:auto;min-height:0;display:block;padding-bottom:0;overflow:visible;
  }
  .dsk-page-login .auth, .dsk-page-signup .auth{
    max-width:420px;width:100%;margin:0 auto;padding:0;overflow:visible;flex:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   四、billing_v5 ── Archetype C，4-up 卡陣（<1400px 跌 2×2）。
   .dsk-billing-grid wrapper 包住 4 個 .plancard（template 加嘅結構 div）。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  .dsk-page-billing .seg{max-width:360px}
  .dsk-page-billing .dsk-billing-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px;align-items:stretch;
  }
  .dsk-page-billing .dsk-billing-grid .plancard{margin-top:0;height:100%;display:flex;flex-direction:column}
  .dsk-page-billing .dsk-billing-grid .plancard .feats{flex:1}
  .dsk-page-billing .manage{max-width:640px}
}
@media(min-width:1400px){
  .dsk-page-billing .dsk-billing-grid{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   五、radar_v5 ── Archetype C：setup 態 Archetype B 置中卡；list 態 2-col
   卡陣＋頂 chip filter。.page[data-radar-state] 由 template 加嘅屬性分態。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  .dsk-page-radar .page[data-radar-state="setup"]{max-width:640px;margin:0 auto}
  .dsk-page-radar .page[data-radar-state="list"]{max-width:1200px;margin:0 auto}
  .dsk-page-radar .feed{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .dsk-page-radar .feed > .card{margin-top:0}
  .dsk-page-radar .chiprow{overflow-x:visible;flex-wrap:wrap}
  .dsk-page-radar .managerow{max-width:560px}
}

/* ══════════════════════════════════════════════════════════════════════
   六、goldvein_v5 ── Archetype C：2-col 卡陣＋頂 chip filter＋底 gv-daily
   卡橫跨（.gv-daily 喺 .feed 之外，自然全寬，唔使額外規則）。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  .dsk-page-goldvein .page{max-width:1200px;margin:0 auto}
  .dsk-page-goldvein .feed{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .dsk-page-goldvein .feed > .card{margin-top:0}
  .dsk-page-goldvein .chiprow{overflow-x:visible;flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════════════════
   七、adfactory ── Archetype D：5 個 wk-tab 由頂橫排 → 內容區左直 sub-nav，
   右內容 max-width 900px。`.wk-panel{display:none}`／`.is-active{display:block}`
   （tokens.css 已有）令同一時間得返 .sub + .wk-tabs + 一個 active panel 參與
   layout，flex-wrap 令 .sub 全寬換行，wk-tabs／panel 並排—— wk-tab JS
   （wkTab()）行為完全冇改，純 CSS reflow。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  .dsk-page-adfactory .page[data-page="adfactory"]{
    display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px;max-width:1160px;
  }
  .dsk-page-adfactory .page[data-page="adfactory"] > .rise:has(.subhead){display:none}
  .dsk-page-adfactory .page[data-page="adfactory"] > .sub{flex:0 0 100%;margin-bottom:4px}
  .dsk-page-adfactory .wk-tabs{
    flex:0 0 200px;flex-direction:column;overflow:visible;padding:4px;gap:6px;
    position:sticky;top:96px;align-self:flex-start;
  }
  .dsk-page-adfactory .wk-tab{justify-content:flex-start;padding:12px 14px;border-radius:12px;flex:none;width:100%}
  .dsk-page-adfactory .wk-panel.is-active{flex:1;min-width:0;max-width:900px}
}

/* ══════════════════════════════════════════════════════════════════════
   Loop 6 G6.3 P1 —— profile/referral/council/news/assets/generate/pack。
   全部包裝 div 純 DOM 分組，唔改變 mobile 相對次序（wrapper 冚喺已經連續嘅
   內容外層，mobile 冇對應 CSS 規則、default display:block 順排落去，同
   改前完全一樣）。desktop 先開 grid/max-width reflow。
   ══════════════════════════════════════════════════════════════════════ */

/* 八、profile ── Archetype A：左主欄＝知識庫 items list，右 rail 350px＝
   公司身份（名 form＋AI 執靚＋OCR 名片提示）。DOM 順序係 rail 在前、main 在
   後（has_data 分支本身已經係咁排），desktop 用 grid-column 明確擺返左右。 */
@media(min-width:1100px){
  .dsk-page-profile .dsk-profile-grid{display:grid;grid-template-columns:1fr 350px;gap:24px;align-items:start}
  .dsk-page-profile .dsk-profile-main{grid-column:1;grid-row:1;min-width:0}
  .dsk-page-profile .dsk-profile-rail{grid-column:2;grid-row:1;min-width:0}
}

/* 九、referral ── Archetype E 文｜圖對半：左＝分享機制（單一套，G0.6 已併，
   desktop 唔准復活第二套），右＝推薦成績。DOM 順序已經係分享在前、成績在
   後，唔使額外 grid-column override。 */
@media(min-width:1100px){
  .dsk-page-referral .dsk-referral-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .dsk-page-referral .dsk-referral-share{min-width:0}
  .dsk-page-referral .dsk-referral-stats{min-width:0}
}

/* 十、council ── Archetype A：左主欄＝問軍師＋名人軍師 roster＋各路專才
   department accordion（既有 dept-grid 已經 grid-cols-2，desktop 唔使加寬，
   維持 proposal「roster grid-cols-2」判斷），右 rail＝近排軍師意見。
   dropdown 召喚台 G0.3 已殺，desktop 唔准復活。 */
@media(min-width:1100px){
  .dsk-page-council .dsk-council-grid{display:grid;grid-template-columns:1fr 350px;gap:24px;align-items:start}
  .dsk-page-council .dsk-council-main{min-width:0} /* 名人軍師橫向滑 row 有 overflow-x:auto
    子元素，冇呢句 grid item 會攞返個未截嘅 min-content 闊度，谷爆右 rail 出畫面。 */
  .dsk-page-council .dsk-council-rail{min-width:0}
}

/* 十一、news_setup（page_id=news）── Archetype B 置中 max-w-720：聚焦設定
   任務，闊度賺唔到。quick chips（一撳加）改 grid-cols-3/4——零打字原則
   （chips 優先，手打 input 留喺 chips 下面，desktop 冇改動）。已選 topic
   chips（#chips）維持 flex-wrap，長度變化大唔啱迫等寬格。 */
@media(min-width:1100px){
  .dsk-page-news .dsk-news-col{max-width:720px;margin:0 auto}
  .dsk-page-news #quick.cf-chip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
}
@media(min-width:1400px){
  .dsk-page-news #quick.cf-chip-row{grid-template-columns:repeat(4,1fr)}
}

/* 十二、assets ── Archetype C：素材本質係圖庫，2–3 col gallery grid。
   .assetgrid 抽出 inline style 做正經 class（assets.html <style> 定義
   mobile default 2-col），desktop 加寬到 3-col，唔使 !important。 */
@media(min-width:1100px){
  .dsk-page-assets .assetgrid{grid-template-columns:repeat(3,1fr)}
}

/* 十三、generate ── Archetype B 置中 max-w-640：單一生成動作，闊咗只會令
   form 散，闊度賺唔到。 */
@media(min-width:1100px){
  .dsk-page-generate .dsk-generate-col{max-width:640px;margin:0 auto}
}

/* 十四、pack ── Archetype E 文｜圖對半：左＝post 文案（複製），右＝圖預覽
   ＋換圖。圖預覽兩個互斥分支（已生成 vs 未生成）各自加 dsk-pack-image
   class，desktop 淨係得一個會 render，grid-column 明確擺右，唔使郁 DOM。 */
@media(min-width:1100px){
  .dsk-page-pack .dsk-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .dsk-page-pack .dsk-pack-captions{grid-column:1;grid-row:1;min-width:0}
  .dsk-page-pack .dsk-pack-image{grid-column:2;grid-row:1;min-width:0}
}

/* ══════════════════════════════════════════════════════════════════════
   Loop 6 G6.3 P2 —— council_minister/council_history/dashboard，全部
   Archetype B 置中窄欄（proposal §二 P2 段判「低投資，置中窄欄就係設計答案，
   唔准加碼」）。三頁共用同一個 max-width（640px）、同一個 wrapper class
   （.dsk-p2-col），page_id 各自獨立（council-minister/council-history/
   dashboard）避免撞 council.html 嘅 Archetype A grid 選擇器。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  /* 十五、council_minister — 單一戰力卡 detail。 */
  .dsk-page-council-minister .dsk-p2-col{max-width:640px;margin:0 auto}
  /* 十六、council_history — 單一對話流；history 左窄 rail 列軍師「可加唔強求」
     （proposal 明文），呢版判唔加。 */
  .dsk-page-council-history .dsk-p2-col{max-width:640px;margin:0 auto}
  /* 十七、dashboard — first-run wizard 過渡頁（Bug1 已 redirect /app，低優
     先）；wizard modal 本身 position:fixed 唔受呢個 max-width 影響，呢度淨係
     窄返底下 jn-scope 天眼卡內容（同 dashboard.html jn-preview 1:1 正方形預
     覽），唔畀佢喺 1200px canvas 谷到成個 hero 卡爆版。 */
  .dsk-page-dashboard .dsk-p2-col{max-width:640px;margin:0 auto}
}

/* ══════════════════════════════════════════════════════════════════════
   十八、broadcasts／message ── base.html 舊殼（proposal §二 P2「最低投資」）。
   呢兩頁**唔用** _desktop_chrome.html／dsk-page-* 機制（base.html 冇 body
   class block，唔重構佢）——/app/broadcasts、/app/message 路徑已經由
   _nav.html 全站條件攞到 .app-sidebar／.app-topbar（tokens.css 既有機制），
   但 `body:has(.app-sidebar) .wrap{max-width:none}` 令內容全寬伸展，單一
   表單/campaign list 喺闊 mon 拖到成千 px 唔靚。淨加一個 wrapper class
   （.dsk-appform-col）收窄，唔靠 body class 選擇器，因為 base.html 冇呢個
   掛勾點——class 名本身夠專屬，唔使頁面級 scoping。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  .dsk-appform-col{max-width:720px}
}