@layer layout {
  .calculator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    inline-size: min(100% - 2rem, 82rem);
    margin-inline: auto;
    padding-block: clamp(1rem, 3vw, 2.5rem);
  }

  .results-column { min-inline-size: 0; }

  @media (min-width: 900px) {
    .calculator-layout {
      grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.85fr);
      align-items: start;
      gap: 2rem;
    }

    .results-column {
      position: sticky;
      inset-block-start: 1rem;
      max-block-size: calc(100dvh - 2rem);
      overflow-y: auto;
    }
  }

  @media (max-width: 899px) {
    fieldset, .material-fields { grid-template-columns: minmax(0, 1fr); }
    .field--wide { grid-column: auto; }
    .profile-bar { align-items: stretch; }
    .profile-bar > button { flex: 1 1 10rem; }
    .letter-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .letter-row > :first-child { grid-column: 1 / -1; }
    .letter-area { align-self: center; }
  }

  @media (max-width: 420px) {
    .calculator-layout { inline-size: min(100% - 1rem, 82rem); }
    fieldset, #internal-summary, .client-quote { padding: 1rem; }
    .choice-group { flex-direction: column; }
    .choice-group label { inline-size: 100%; }
    .profile-bar { flex-direction: column; }
    .letter-row { grid-template-columns: minmax(0, 1fr); }
    .letter-row > :first-child { grid-column: auto; }
    .letter-row button { inline-size: 100%; }
  }
}