/* ============================================================
   desktop.css — 螢幕夠寬時，把同一批東西重新排一次

   ── 為什麼不寫第二套 UI ──
   HTML 跟 JS 兩邊完全一樣，差的只是「東西擺在哪」。
   拆成兩份的話，之後每加一個功能都要改兩個地方，
   遲早有一邊會忘記改。所以：

     手機版 = 預設（tokens.css / components.css / pages.css）
     電腦版 = 手機版 + 這一支

   這支只做重排（寬度、欄數、位置、尺寸），
   不新增元件、不改顏色、不改任何互動。
   要改「長什麼樣子」還是去改前面三支，兩邊會一起改到。

   ── 三段斷點 ──
     620px 以上   單欄，但寬一點（平板直放）
     980px 以上   雙欄，左邊那張卡片固定不動（筆電）
    1440px 以上   再放寬，右欄吃掉多的空間（大螢幕）
   ============================================================ */


/* ============================================================
   620px — 平板直放：還是一欄，只是不要那麼窄
   ============================================================ */

@media (min-width: 620px) {
  body {
    padding: 32px 24px 56px;
  }

  .app {
    max-width: 560px;
  }
}


/* ============================================================
   980px — 筆電：變成左右兩欄
   ============================================================ */

@media (min-width: 980px) {

  /* ---------- 整體 ---------- */

  body {
    padding: 28px 32px 56px;
  }

  .app {
    /* 想讓它真的貼齊螢幕兩邊，就把這行改成 max-width: none。
       沒有預設這樣做是因為超寬螢幕上一行會拉得太長，讀起來很累。 */
    max-width: 1200px;
  }

  /* ---------- 頂部工具列：標題在左，分頁在右 ---------- */

  .topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }

  .topbar .tabs {
    margin-top: 0;
    width: 340px;
    flex-shrink: 0;
  }

  /* ---------- 三個畫面都是兩張卡片，一律左右排 ---------- */

  .page.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;      /* 卡片各自維持自己的高度，不要被拉到一樣高 */
    margin-top: 20px;
  }

  /* 間距交給 grid 的 gap，卡片自己的 margin 要拿掉，不然會多一截 */
  .page.on > .card {
    margin-top: 0;
    padding: 20px;
  }

  /* 調色與反查：左邊那張跟著捲動固定在原地。
     右邊拉滑桿或看結果時，左邊的顏色一直在視線裡。
     漆櫃不做，因為它左邊那張（漆的清單）可能比螢幕還高。 */
  .page[data-p="mix"]  > .card:first-child,
  .page[data-p="find"] > .card:first-child {
    position: sticky;
    top: 28px;
  }

  /* ---------- 調色：結果色塊放大 ---------- */

  .result {
    min-height: min(64vh, 540px);
    padding: 26px;
  }

  .rformula { font-size: 15px; }
  .rhex     { font-size: 26px; }
  .rname    { font-size: 17px; }

  .mixrow          { padding: 14px 0; }
  .mrtop .sw       { width: 26px; height: 26px; }
  .mrtop .nm       { font-size: 15px; }

  /* ---------- 反查：目標色預覽放大 ---------- */

  .target {
    height: 200px;
  }

  /* 結果那欄不用整頁捲，維持在右邊自己往下長 */
  .res {
    padding-top: 22px;
    margin-top: 22px;
  }

  /* 比較色塊放高一點。接縫越長越容易看出兩邊不一樣。 */
  .compare-swatches {
    height: 104px;
  }

  /* ---------- 漆櫃：一列高一點，滑鼠比手指難點 ---------- */

  .pl {
    padding: 9px 6px;
  }
}


/* ============================================================
   1440px — 大螢幕：再放寬，多的空間給右欄
   ============================================================ */

@media (min-width: 1440px) {
  .app {
    max-width: 1440px;
  }

  /* 右欄（配方、反查結果、色卡校正）比左欄寬一些，
     因為那邊是真正在操作的地方 */
  .page.on {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px;
  }

  .page.on > .card {
    padding: 24px;
  }
}