/* ============================================================================
 * 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.
 * ========================================================================== */
@media (min-width:768px){
  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}
}