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

  /* content column → 2-col: form (left) | result (right rail) */
  body.ptshell main.page{max-width:1180px;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:1240px}
}