/* Calculator layout safeguard.
   The legacy HTML still carries Tailwind 12-column span classes while the
   unified UI uses a 2-column calculator. Reset both positioning and grid
   placement so forms/results can never occupy the same implicit columns. */

body.app-shell .simple-input-panel,
body.app-shell .input-panel,
body.app-shell .simple-results,
body.app-shell #results,
body.app-shell #heroCard,
body.planner-page .simple-planner-inputs,
body.planner-page .planner-inputs,
body.planner-page .simple-planner-results,
body.planner-page .planner-results {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
}

body.app-shell .simple-calculator-grid,
body.planner-page .simple-planner-grid,
body.planner-page .planner-grid {
  isolation: isolate;
}

/* Kill the old lg:col-span-5 / lg:col-span-7 geometry.
   Without this reset a 2-column grid can create implicit columns and let the
   result card visually collide with the input card at some viewport widths. */
@media (min-width: 851px) {
  body.app-shell .simple-calculator-grid,
  body.planner-page .simple-planner-grid,
  body.planner-page .planner-grid {
    grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr) !important;
    grid-auto-columns: 0 !important;
    grid-auto-flow: row !important;
  }

  body.app-shell .simple-calculator-grid > .simple-input-panel,
  body.app-shell .simple-calculator-grid > .input-panel,
  body.planner-page .simple-planner-grid > .simple-planner-inputs,
  body.planner-page .simple-planner-grid > .planner-inputs,
  body.planner-page .planner-grid > .planner-inputs {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.app-shell .simple-calculator-grid > .simple-results,
  body.app-shell .simple-calculator-grid > #results,
  body.planner-page .simple-planner-grid > .simple-planner-results,
  body.planner-page .simple-planner-grid > .planner-results,
  body.planner-page .planner-grid > .planner-results {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 850px) {
  body.app-shell .simple-calculator-grid,
  body.planner-page .simple-planner-grid,
  body.planner-page .planner-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }

  body.app-shell .simple-calculator-grid > .simple-input-panel,
  body.app-shell .simple-calculator-grid > .input-panel,
  body.app-shell .simple-calculator-grid > .simple-results,
  body.app-shell .simple-calculator-grid > #results,
  body.planner-page .simple-planner-grid > .simple-planner-inputs,
  body.planner-page .simple-planner-grid > .planner-inputs,
  body.planner-page .simple-planner-grid > .simple-planner-results,
  body.planner-page .simple-planner-grid > .planner-results,
  body.planner-page .planner-grid > .planner-inputs,
  body.planner-page .planner-grid > .planner-results {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

body.app-shell #heroCard,
body.planner-page .planner-primary {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}