/* layouts/home-v2.css — 整合主頁桌機版面
   依賴：tokens.css、chrome.css、home-v2.css、body.home-v2
   LOG + LOOK mode：兩欄並排（1200px 容器）
   LAB mode：全寬單欄（同樣 1200px 容器） */

@media (min-width: 1024px) {

  /* 垂直置中 + 高度上限 */
  html:has(body.home-v2) { display: flex; align-items: center; }
  body.home-v2 { max-height: var(--app-max-h); width: 100%; }

  /* 1200px 置中 */
  .home-v2 .masthead,
  .home-v2 .mode-stripe,
  .home-v2 .phase-row,
  .home-v2 .play-actions,
  .home-v2 .input-stack  { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
  .home-v2 .swipe-wrap   { max-width: 1200px; margin: 0 auto; width: 100%; }

  /* dots 桌機顯示（舊 home.css 曾 hide，這裡重開） */
  .home-v2 .page-dots  { display: flex; }
  .home-v2 .swipe-hint { display: none; }
  .home-v2.keyboard-open .kb-badge { display: none; }

  /* ── LOG / LOOK mode：兩欄並排 ── */
  .home-v2[data-mode="log"]  .swipe-track,
  .home-v2[data-mode="look"] .swipe-track {
    width: 100%; transform: none !important; transition: none;
    flex-direction: row;
  }
  .home-v2[data-mode="log"]  .swipe-page,
  .home-v2[data-mode="look"] .swipe-page { width: 50%; }
  /* LAB panel 在 LOG/LOOK 桌機模式下隱藏 */
  .home-v2[data-mode="log"]  .page-lab,
  .home-v2[data-mode="look"] .page-lab { display: none; }

  /* input-panels 並排 */
  .home-v2[data-mode="log"]  .input-panels,
  .home-v2[data-mode="look"] .input-panels {
    width: 100%; transform: none !important; transition: none;
  }
  .home-v2[data-mode="log"]  .input-panel,
  .home-v2[data-mode="look"] .input-panel { width: 50%; }
  .home-v2[data-mode="log"]  .lab-input,
  .home-v2[data-mode="look"] .lab-input { display: none; }

  /* LOG / LOOK 分隔線（對齊 shoe page spread::before 色值） */
  .home-v2[data-mode="log"]  .page-look,
  .home-v2[data-mode="look"] .page-look {
    border-left: 1px solid var(--paper-2);
  }
  .home-v2[data-mode="log"]  .look-input,
  .home-v2[data-mode="look"] .look-input {
    border-left: 1px solid var(--paper-2);
  }

  /* ── LAB mode：全寬單欄 ── */
  .home-v2[data-mode="lab"] .swipe-track {
    width: 100%; transform: none !important; transition: none;
  }
  .home-v2[data-mode="lab"] .swipe-page { width: 100%; }
  .home-v2[data-mode="lab"] .page-log,
  .home-v2[data-mode="lab"] .page-look { display: none; }

  .home-v2[data-mode="lab"] .input-panels {
    width: 100%; transform: none !important; transition: none;
  }
  .home-v2[data-mode="lab"] .input-panel { width: 100%; }
  .home-v2[data-mode="lab"] .log-input,
  .home-v2[data-mode="lab"] .look-input { display: none; }
  .home-v2[data-mode="lab"] .lab-input  { width: 100%; }

  /* 修正：桌機 typing 指示器回到對話底部
     v6 為手機 column-reverse 把 .typing 排到 .thread 之前（DOM 第一個子元素）；
     手機靠 column-reverse 翻成視覺最底，桌機無 column-reverse → .typing 卡在最上面
     把對話往下推。這裡讓 swipe-page 成 flex column，用 order 把 typing 排到底部。 */
  .home-v2 .swipe-page:not(.page-lab) {
    display: flex;
    flex-direction: column;
  }
  .home-v2 .swipe-page:not(.page-lab) > .grid-overlay { order: 0; }
  .home-v2 .swipe-page:not(.page-lab) > .thread       { order: 1; }
  .home-v2 .swipe-page:not(.page-lab) > .typing       { order: 2; }

  /* 特異度修正：typing flex 規則（0,3,0）在後面蓋掉 LAB display:none（0,3,0）。
     加 body 使選擇器升至 0,3,1，確保 LAB 模式下 LOG/LOOK 面板被隱藏。 */
  body.home-v2[data-mode="lab"] .page-log,
  body.home-v2[data-mode="lab"] .page-look { display: none; }

}