/* ============================================================================
 * create-container.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link>, applies only beside the AppShell
 * sidebar (body.ptshell, set by ptcargo-shell.js). The MOBILE Source-of-Truth
 * (create-container.css) is NEVER touched — phone view stays byte-equal.
 * Direction ref = account-hub.css + delivery-address-book.desktop.css: neutral
 * canvas (#F4F5F7); the dark coffee hero becomes a white light-2026 card with a
 * #E8EAEF hairline + soft shadow; form cards go 2-column (inputs left · media +
 * notes right). Accent stays the page's OWN orange (--sun/--sun-deep) — sparing.
 * The page's <header> is hidden fleet-wide by ptcargo-shell.js; .subbar is
 * de-fixed by appshell.css — this file only re-skins it light-2026.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* content column + 2-col card grid (hero spans both) */
  body.ptshell main.page{max-width:var(--pt-content-max);margin-inline:auto;padding:20px 24px 40px;
    display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:20px 22px;align-items:start}

  /* --- dark coffee hero → white light-2026 card (full width) --- */
  body.ptshell main.page>.chero{grid-column:1/-1;margin: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 .chero .blob{display:none}
  body.ptshell .chero .cticon{margin:0 0 12px;color:var(--sun-deep)}
  body.ptshell .chero .cticon svg{filter:none}
  body.ptshell .chero .ct{color:var(--ink)}
  body.ptshell .chero .cs{color:var(--ink-2);margin-left:0;max-width:660px}

  /* --- form cards: light-2026 hairline + soft shadow --- */
  body.ptshell main.page>.card{margin:0;min-width:0}
  body.ptshell main.page>.card:nth-child(1){grid-column:1;grid-row:1}
  body.ptshell main.page>.card:nth-child(2){grid-column:1;grid-row:2}
  body.ptshell main.page>.card:nth-child(3){grid-column:2;grid-row:1}
  body.ptshell main.page>.card:nth-child(4){grid-column:2;grid-row:2}
  body.ptshell main.page>.card:nth-child(5){grid-column:2;grid-row:3}
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

  /* --- inputs light-2026 (soft #F7F8FA · accent focus) --- */
  body.ptshell .fld input,body.ptshell .fld select,body.ptshell .fld textarea{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .fld input:focus,body.ptshell .fld select:focus,body.ptshell .fld textarea:focus{
    background:#fff;border-color:var(--sun);box-shadow:0 0 0 3px rgba(242,86,11,.12)}
  body.ptshell .drop{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .drop:hover{border-color:var(--sun);background:#FFF7EF}

  /* --- fixed submit bar → inline light-2026 card (appshell already de-fixes .subbar) --- */
  body.ptshell .subbar{max-width:1180px;margin:22px auto 0;background:#fff;border:1px solid #E8EAEF;
    border-top:1px solid #E8EAEF;border-radius:18px;box-shadow:0 18px 44px -30px rgba(20,25,35,.26);backdrop-filter:none}
  body.ptshell .subbar .in{max-width:none}
  body.ptshell main.page>.actbar{grid-column:1;grid-row:3;align-self:start;width:100%;margin:0;
    border:1px solid #E8EAEF;border-radius:18px;background:#fff;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
}

@media (min-width:1280px){
  body.ptshell main.page,body.ptshell .subbar{max-width:var(--pt-content-max)}
}