/* ============================================================================
 * import-calculator.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link> and only applies beside the AppShell
 * sidebar (body.ptshell). MOBILE Source-of-Truth (import-calculator.css) is
 * untouched — phone view byte-equal. No dark hero on this page; the light-2026
 * work is the neutral canvas + a 2-column layout: the INPUT form (product +
 * dimensions | channel | CTA) fills the left, the RESULT panel sits in a sticky
 * right rail beside it. Inputs get a soft #F7F8FA field + orange focus ring.
 * Accent stays the page's own orange (--sun/--sun-deep). Figures are demo/local
 * — see BACKEND GAP in import-calculator.js.
 * ========================================================================== */
body.ptshell{background:#F4F5F7}

/* content column → 2-col: form (left) | result (right rail) */
body.ptshell main.page{max-width:var(--pt-content-max);margin-inline:auto;padding:20px 24px 44px;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
body.ptshell main.page>.card{margin-top:0;border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
/* result card → right column, spans the form rows, sticky while scrolling */
body.ptshell main.page>.card:nth-of-type(3){grid-column:2;grid-row:1 / span 3;position:sticky;top:104px}
/* CTA card sits under the form in the left column */
body.ptshell main.page>.card:nth-of-type(4){grid-column:1}

/* inputs light-2026: soft field + orange focus ring */
body.ptshell .field input,body.ptshell .field select,body.ptshell .field textarea{background:#F7F8FA;border-color:#E8EAEF}
body.ptshell .field input:focus,body.ptshell .field select:focus,body.ptshell .field textarea:focus{
  background:#fff;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(242,86,11,.12)}

/* channel selector a touch roomier */
body.ptshell .paych{gap:12px}

/* ghost CTA hugs its content on desktop */
body.ptshell .btn.ghost{display:inline-flex;width:auto;padding-left:28px;padding-right:28px}

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