/* ============================================================================
 * qc-confirm.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link> and applies only beside the AppShell
 * sidebar (body.ptshell). The MOBILE inline Source-of-Truth is NEVER touched.
 * The dark coffee QC hero + cards become a centred white light-2026 column
 * (canvas #F4F5F7, #E8EAEF hairline, soft shadow, radius 20). The sticky action
 * bar (already un-fixed by appshell.css) becomes a centred inline card. All
 * JS/state-machine/IDs/onclick/API unchanged — CSS only.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* page's own mobile header -> hidden (shell provides topbar + sidebar) */
  body.ptshell > header{display:none}

  /* ══ centred column ══ */
  /* html-prefixed !important: ptcargo-shell.js injects `body.ptshell .wrap{max-width:none!important}`
     at runtime (appended after this link), so a plain rule would be overridden. */
  html body.ptshell .wrap{max-width:920px!important;margin-left:auto;margin-right:auto;padding:0 4px}

  /* generic cards -> light-2026 hairline */
  body.ptshell .card{border:1px solid #E8EAEF!important;border-radius:20px;
    box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

  /* ══ dark coffee QC hero -> white light-2026 card (undo full-bleed) ══ */
  body.ptshell .hero.full{margin:18px 0 14px!important;border-radius:20px!important;
    border:1px solid #E8EAEF!important;background:#fff!important;
    box-shadow:0 22px 48px -30px rgba(20,25,35,.28)}
  body.ptshell .hero{background:#fff!important}
  body.ptshell .hero .oglow,
  body.ptshell .hero .odeco,
  body.ptshell .hero .blob{display:none!important}
  body.ptshell .hero.full .cpad{text-align:left;padding:24px 26px}
  body.ptshell .hero.full .otop{flex-direction:row;align-items:flex-start}
  body.ptshell .hero .oeyebrow{color:var(--sun-deep)}
  body.ptshell .hero .ono{color:var(--ink)}
  body.ptshell .hero .odate{color:var(--ink-2)}
  body.ptshell .hero .odate .num{color:var(--ink)}

  /* status pill -> light variants (keep รอ=amber · ยืนยัน=green · ตีคืน=red) */
  body.ptshell .opill.wait{background:#FFF7EC;border-color:#FFD8BE;color:#B45309}
  body.ptshell .opill.wait::before{background:#F59E0B}
  body.ptshell .opill.ok{background:#E6F6EF;border-color:#BFE6D3;color:#137A52}
  body.ptshell .opill.ok::before{background:#1E9E6A}
  body.ptshell .opill.ret{background:#FDECEA;border-color:#F3C9C4;color:#B03A30}
  body.ptshell .opill.ret::before{background:#E5544B}

  /* hero fact tiles + timeline on white */
  body.ptshell .ofact{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .ofact .fv{color:var(--ink)}
  body.ptshell .ofact .fk{color:var(--muted)}
  body.ptshell .ofact .fv[style]{color:var(--sun-deep)!important}   /* inline-coloured "1 ⚠" tile */
  body.ptshell .hero.full .tl{border-top-color:#EEF0F3}
  body.ptshell .tlstep{color:var(--muted)}
  body.ptshell .tlstep.done,
  body.ptshell .tlstep.now{color:var(--ink)}
  body.ptshell .tlstep .tdot{background:#E4E7EC}
  body.ptshell .tlstep.done .tdot{background:var(--leaf)}
  body.ptshell .tlstep.now .tdot{background:var(--sun);box-shadow:0 0 0 4px rgba(239,95,6,.15)}
  body.ptshell .tlstep.now .tdot::after{background:#fff}
  body.ptshell .tlstep:not(:last-child)::after{background:#E4E7EC}
  body.ptshell .tlstep.done:not(:last-child)::after{background:var(--leaf)}

  /* decision box stays soft peach — cap the radius to match */
  body.ptshell .qbox{border-radius:20px}

  /* ══ un-fixed action bar -> centred inline card ══ */
  html body.ptshell .actbar{max-width:920px!important;margin:14px auto 0!important;
    background:#fff!important;border:1px solid #E8EAEF!important;border-radius:18px!important;
    padding:16px!important;backdrop-filter:none!important;
    box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
}

/* >=1280: a touch wider beside the expanded sidebar */
@media (min-width:1280px){
  html body.ptshell .wrap,
  html body.ptshell .actbar{max-width:960px!important}
}