/* ============================================================================
 * delivery-bill-detail.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link> and applies only beside the AppShell
 * sidebar (body.ptshell, added by ptcargo-shell.js). The MOBILE Source-of-Truth
 * (delivery-bill-detail.css) is NEVER touched — phone view stays byte-equal.
 * Direction ref = account-hub.css + import-bill-detail.desktop.css: neutral
 * canvas (#F4F5F7); the mobile phone-frame + dark coffee hero become a white
 * light-2026 card (#E8EAEF hairline + soft shadow). Layout: address + the wide
 * parcels table span full width; the cost summary | payment cards pair 2-column.
 * Accent stays the page's own orange (--sun) — sparing. Money figures are the
 * page's demo DATA (see BACKEND GAP in delivery-bill-detail.js; DL getBill
 * overlay is shallow/progressive only).
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* neutralise the mobile phone frame -> centred light content column */
  body.ptshell .phone{max-width:1228px;margin-inline:auto;background:none;box-shadow:none;overflow:visible;padding:0 24px 40px}

  /* --- dark coffee hero -> light-2026 white card --- */
  body.ptshell .hero{margin:12px 0 0;border-radius:20px;padding:24px 28px;text-align:left;color:var(--ink);
    background:#fff;border:1px solid #E8EAEF;box-shadow:0 22px 48px -30px rgba(20,25,35,.28)}
  body.ptshell .hero .glow,body.ptshell .hero .deco{display:none}
  body.ptshell .hero .eyebrow{color:var(--sun-deep)}
  body.ptshell .hero .ono{color:var(--ink)}
  body.ptshell .hero .odate{color:var(--ink-2)}
  body.ptshell .hero .opill{position:absolute;top:2px;right:0;margin:0;background:#FFF3EA;border-color:#FFD8BE;color:var(--sun-deep)}
  body.ptshell .hero .opill i{background:var(--sun-deep);box-shadow:0 0 0 3px rgba(239,95,6,.18)}
  /* status stepper reads on a light hero (keeps green=done/cur, orange=now dots) */
  body.ptshell .hero .tl{border-top-color:#EEF0F3;justify-content:flex-start;gap:4px}
  body.ptshell .hero .tls{color:var(--muted)}
  body.ptshell .hero .tls.done,body.ptshell .hero .tls.now,body.ptshell .hero .tls.cur{color:var(--ink)}
  body.ptshell .hero .tls:not(:last-child)::after{background:#E4E7EC}
  body.ptshell .hero .tls.done:not(:last-child)::after,body.ptshell .hero .tls.cur:not(:last-child)::after{background:var(--leaf)}

  /* --- content grid: address + wide parcels table span full; cost | pay 2-col --- */
  body.ptshell main.page{max-width:1180px;margin-inline:auto;padding:20px 0 0;
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
  body.ptshell main.page>.methods{grid-column:1/-1;margin-bottom:0;gap:14px}
  body.ptshell main.page>.done{grid-column:1/-1;margin-bottom:0}
  body.ptshell main.page>.card{margin-top:0}
  /* children 3,4 = ที่อยู่จัดส่ง · พัสดุในบิล table -> full width */
  body.ptshell main.page>.card:nth-child(-n+3){grid-column:1/-1}

  /* cards: hairline + soft shadow (light-2026) */
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
  body.ptshell .mcard{border-color:#E8EAEF;box-shadow:0 12px 30px -24px rgba(20,25,35,.22)}

  /* --- mobile fixed bottom bar -> inline card below the grid --- */
  body.ptshell .bar{position:static;transform:none;left:auto;bottom:auto;width:auto;max-width:1180px;
    margin:20px auto 0;border:1px solid #E8EAEF;border-radius:18px;background:#fff;
    box-shadow:0 18px 44px -30px rgba(20,25,35,.26);backdrop-filter:none}
  body.ptshell .paybtn{width:220px}
}

/* >=1280: a touch wider beside the expanded sidebar */
@media (min-width:1280px){
  body.ptshell .phone{max-width:1288px}
  body.ptshell main.page,body.ptshell .bar{max-width:1240px}
}