@layer pfa-layout {
  :where(.card-head) {
    --head-gap: var(--s4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--head-gap);
  }

  :where(.card-title) {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
  }

  :where(.card) {
    padding:
      var(--card-pad-y) var(--card-pad-x)
      var(--card-pad-y-end, var(--card-pad-y));
  }

  .card.card-collapsible,
  details.card.secondary {
    padding: 0;
  }

  details.card.secondary {
    overflow: hidden;
  }

  details.card.secondary:not([open]) {
    padding-block: var(--s1);
  }

  .card.card-compact {
    --card-pad-y: var(--s1);
  }

  :where(
    .card-disclosure > summary,
    .card-disclosure > .disclosure-body,
    .pfa-card-disclosure-header,
    .pfa-card-disclosure-content > .disclosure-body
  ) {
    padding-inline: var(--card-pad-x);
  }

  :where(
    .card-disclosure > .disclosure-body,
    .pfa-card-disclosure-content > .disclosure-body
  ) {
    padding-block: 0 var(--s4);
    margin: 0;
  }

  @media (min-width: 640px) {
    :where(
      .card.card-collapsible:not(.card-compact) > .card-disclosure > .disclosure-body,
      .card.card-collapsible:not(.card-compact) > .pfa-card-disclosure > .pfa-card-disclosure-item > .pfa-card-disclosure-content > .disclosure-body
    ) {
      padding-block: 0 var(--s5);
    }
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--s3));
  }

  .stack-2 {
    --stack-gap: var(--s2);
  }

  .stack-3 {
    --stack-gap: var(--s3);
  }

  .stack-4 {
    --stack-gap: var(--s4);
  }

  .tx-answer {
    --card-pad-y: var(--s3);
    --card-pad-y-end: var(--s3);
  }

  @media (max-width: 639px) {
    .tx-answer {
      --card-pad-y: var(--s2);
      --card-pad-y-end: var(--s2);
    }
  }

  .content-pair,
  .position-cash-layout,
  .fl-chart {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--s5);
  }

  .content-pair > *,
  .position-cash-layout > *,
  .fl-chart > * {
    min-width: 0;
  }

  @media (min-width: 1000px) {
    .content-pair:has(> :nth-child(2)),
    .fl-chart {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .content-pair > :nth-child(2) {
      border-inline-start: 1px solid var(--hairline-soft);
      padding-inline-start: var(--s5);
    }

    .fl-plot {
      grid-column: 1;
      grid-row: 1 / 4;
      border-inline-end: 1px solid var(--hairline-soft);
      padding-inline-end: var(--s5);
      align-self: stretch;
    }

    .fl-chart > :not(.fl-plot) {
      grid-column: 2;
    }
  }

  .retirement-assumption-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    justify-items: start;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--row-gap, var(--s2));
  }

  .row-2 {
    --row-gap: var(--s2);
  }

  .row-3 {
    --row-gap: var(--s3);
  }

  .row-4 {
    --row-gap: var(--s4);
  }

  .bleed {
    margin-inline: calc(-1 * var(--card-pad-x));
    padding-inline: var(--card-pad-x);
  }

  .icon-slot-tap {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: calc((var(--tap-min) - var(--icon-inline)) / 2);
    margin: calc((var(--icon-inline) - var(--tap-min)) / 2);
  }
}