/* ============================================================================
 * create-claim.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 hero + form sections become a centred white light-2026 column
 * (canvas #F4F5F7, #E8EAEF hairline, soft shadow, radius 20). The sticky submit
 * bar (already un-fixed by appshell.css) is centred to match the form width.
 * Claim rules (lost / po_short only) + all JS/IDs/onclick/API are unchanged.
 * ========================================================================== */
body.ptshell{background:#F4F5F7}

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

/* ══ centred form 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:900px!important;margin-left:auto;margin-right:auto;padding:0 4px}

/* ══ dark hero -> white light-2026 card, left aligned, no full-bleed ══ */
body.ptshell .hero{
  margin:18px 0 4px!important;border-radius:20px!important;padding:22px 24px!important;
  text-align:left!important;color:var(--ink);
  background:#fff!important;border:1px solid #E8EAEF;
  box-shadow:0 22px 48px -30px rgba(20,25,35,.28)}
body.ptshell .hero::after{display:none!important}
body.ptshell .hero-top{flex-direction:row!important;justify-content:flex-start;gap:12px;margin-bottom:8px}
body.ptshell .hero h2{color:var(--ink)}
body.ptshell .hero p{color:var(--ink-2)!important;max-width:640px;margin-left:0;margin-right:0}
body.ptshell .hero-time{background:#FFF1E8!important;border:1px solid #FFD8BE!important;color:var(--sun-deep)!important}
/* the .hero-ic tile keeps its orange accent (reads well on white) */

/* ══ sections -> white cards (base .sec is unstyled on mobile) ══ */
body.ptshell .sec{
  background:#fff;border:1px solid #E8EAEF;border-radius:20px;
  padding:20px 22px;margin-top:14px;
  box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
body.ptshell .sec:first-of-type{margin-top:0}
/* section header row (number + title) — flex on desktop */
body.ptshell .sec-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}

/* ══ un-fixed submit bar -> centred, transparent, capped button ══ */
html body.ptshell .subbar{max-width:900px!important;margin:6px auto 0!important;background:none!important;padding:0!important}
body.ptshell .subbtn{max-width:360px;margin-left:auto;margin-right:auto}

/* empty-state -> white card */
body.ptshell #emptyView .empty{
  background:#fff;border:1px solid #E8EAEF;border-radius:20px;margin-top:18px;
  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 .subbar{max-width:940px!important}
}