/* v433G — Check Status page manual layout cleanup.
   Scope: tracking.html only. Page-by-page pass after Fees and FAQ. */

body:has(#trackingForm){
  --tracking-rail: 1368px;
  --tracking-gutter: clamp(36px, 4.2vw, 72px);
  --tracking-gap: clamp(28px, 3vw, 48px);
}

/* One fixed rail for the full Check Status page. */
body:has(#trackingForm) main.section > .form-shell,
body:has(#trackingForm) footer > .container,
body:has(#trackingForm) .footer-grid{
  width:min(calc(100% - (var(--tracking-gutter) * 2)), var(--tracking-rail)) !important;
  max-width:var(--tracking-rail) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* The top title area should not feel like it starts on a different line from the cards. */
body:has(#trackingForm) main.section{
  padding-top:clamp(82px, 7vw, 126px) !important;
  padding-bottom:clamp(78px, 7vw, 118px) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

body:has(#trackingForm) .form-shell{
  display:block !important;
}

body:has(#trackingForm) .form-shell > .eyebrow,
body:has(#trackingForm) .form-shell > h1,
body:has(#trackingForm) .form-shell > p.muted{
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}

body:has(#trackingForm) .form-shell > h1{
  max-width:1180px !important;
  font-size:clamp(40px, 4vw, 62px) !important;
  line-height:1.05 !important;
  letter-spacing:-.045em !important;
}

body:has(#trackingForm) .form-shell > p.muted{
  max-width:1180px !important;
  font-size:clamp(17px, 1.55vw, 22px) !important;
  line-height:1.62 !important;
}

/* The two cards are now one centered composition, not a left-heavy form plus a drifting help card. */
body:has(#trackingForm) .status-help-grid{
  width:100% !important;
  max-width:100% !important;
  margin:clamp(30px, 3.2vw, 48px) auto 0 !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1.04fr) minmax(420px, .96fr) !important;
  gap:var(--tracking-gap) !important;
  align-items:stretch !important;
  box-sizing:border-box !important;
}

body:has(#trackingForm) .status-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:clamp(30px, 3.2vw, 46px) !important;
  border-radius:28px !important;
  box-sizing:border-box !important;
}

body:has(#trackingForm) .status-card h2{
  font-size:clamp(34px, 3.4vw, 52px) !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  margin-top:0 !important;
  margin-bottom:16px !important;
}

body:has(#trackingForm) .status-card p.muted,
body:has(#trackingForm) .status-note-list{
  max-width:100% !important;
}

/* Input row: keep it proportional inside the card. */
body:has(#trackingForm) .status-input-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 180px !important;
  gap:16px !important;
  align-items:end !important;
  width:100% !important;
}

body:has(#trackingForm) .status-input-row label{
  width:100% !important;
}

body:has(#trackingForm) .status-input-row input{
  width:100% !important;
  min-height:58px !important;
  border-radius:18px !important;
}

body:has(#trackingForm) .status-input-row .btn,
body:has(#trackingForm) .status-input-row button{
  width:180px !important;
  min-height:58px !important;
  border-radius:999px !important;
}

/* Right help card spacing, so it reads as a matched pair with the form card. */
body:has(#trackingForm) .status-note-list{
  margin-top:18px !important;
  padding-left:26px !important;
}

body:has(#trackingForm) .status-note-list li{
  margin-bottom:12px !important;
  line-height:1.55 !important;
}

body:has(#trackingForm) .status-safe-note{
  margin-top:22px !important;
  border-radius:18px !important;
}

/* Keep floating Need Help from visually cutting into the right card too much on this page. */
@media (min-width:1100px){
  body:has(#trackingForm) .vge-chatbot-root:not(.is-open){
    right:18px !important;
  }
}

/* Responsive: stack cleanly while preserving the same rail. */
@media (max-width:1080px){
  body:has(#trackingForm){
    --tracking-gutter:clamp(24px, 5vw, 42px);
  }

  body:has(#trackingForm) .status-help-grid{
    grid-template-columns:1fr !important;
  }

  body:has(#trackingForm) .status-card{
    max-width:100% !important;
  }
}

@media (max-width:700px){
  body:has(#trackingForm){
    --tracking-gutter:18px;
  }

  body:has(#trackingForm) main.section{
    padding-top:48px !important;
    padding-bottom:62px !important;
  }

  body:has(#trackingForm) .form-shell > h1{
    font-size:clamp(32px, 9vw, 44px) !important;
  }

  body:has(#trackingForm) .status-card{
    padding:22px !important;
    border-radius:22px !important;
  }

  body:has(#trackingForm) .status-card h2{
    font-size:clamp(28px, 8vw, 38px) !important;
  }

  body:has(#trackingForm) .status-input-row{
    grid-template-columns:1fr !important;
  }

  body:has(#trackingForm) .status-input-row .btn,
  body:has(#trackingForm) .status-input-row button{
    width:100% !important;
  }
}