/* Layout audit, 2026-09-27. Scoped to the recovered page IDs.
 * Transfer these rules to CalculatorProfit and Learning sources before rebuilding.
 */

/* A fixed 850px banner and flex items with min-width:auto pushed the sidebar
 * outside the calculator's container once the banner arrived from the API. */
.wrapperTemplateWithRightSidebar[data-v-02588a10] {
  column-gap: 24px;
}
.wrapperTemplateWithRightSidebar[data-v-02588a10] > .mainBlock {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}
.wrapperTemplateWithRightSidebar[data-v-02588a10] > .rightSidebar {
  flex: 0 1 32%;
  min-width: 0;
  max-width: 350px;
}
.wrapperTemplateWithRightSidebar[data-v-02588a10] > .rightSidebar > * {
  min-width: 0;
  max-width: 100%;
}
.wrapperTemplateWithRightSidebar[data-v-02588a10] .banner_main {
  width: 100%;
}
.wrapperTemplateWithRightSidebar[data-v-02588a10] #calc {
  min-width: 0;
  padding-right: 0;
}

/* Keep labels and inputs in separate columns instead of absolute overlays. */
.calc_iis__fields[data-v-02588a10] .line__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: start;
  gap: 16px;
  padding: 0;
}
.calc_iis__fields[data-v-02588a10] .line__inner > .text {
  min-width: 0;
  margin: 0;
}
.calc_iis__fields[data-v-02588a10] .line__inner > input {
  position: static;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
@media (max-width: 1100px) {
  .calc_iis__fields[data-v-02588a10] .line__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 800px) {
  .wrapperTemplateWithRightSidebar[data-v-02588a10] {
    column-gap: 0;
  }
}

/* A two-line label should not make only one learning filter taller. */
.p-selectbutton[data-v-cf92464a] {
  display: inline-flex;
  align-items: stretch;
}
.p-selectbutton[data-v-cf92464a] > .p-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}
@media (max-width: 600px) {
  .p-selectbutton[data-v-cf92464a] > .p-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }
  .p-selectbutton[data-v-cf92464a] .p-button-label {
    white-space: normal;
    line-height: 1.25;
  }
}

/* Shared spacing vocabulary. Apply to audited families, never to every container. */
:root {
  --fp-layout-space-1: 8px;
  --fp-layout-space-2: 12px;
  --fp-layout-space-3: 16px;
  --fp-layout-space-4: 20px;
  --fp-layout-space-5: 24px;
  --fp-layout-space-6: 32px;
  --fp-layout-space-7: 48px;
  --fp-layout-gutter: 20px;
}

/* Preserve all first-pass calculator and learning rules in the release. */

/* Grid tracks must be allowed to shrink below their contents' minimum width. */
.bm-filters[data-v-33cc6b8e] { gap: var(--fp-layout-space-3); }
.bm-block[data-v-33cc6b8e],
.bm-field[data-v-33cc6b8e] { min-width: 0; }
.bm-block[data-v-33cc6b8e] { padding: var(--fp-layout-space-3); }
.bm-grid-2[data-v-33cc6b8e] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fp-layout-space-2);
}
.bm-chip[data-v-33cc6b8e] { max-width: 100%; }
.bm-chip-label[data-v-33cc6b8e] { min-width: 0; overflow-wrap: anywhere; }
.bm-input[data-v-33cc6b8e] { min-width: 0; max-width: 100%; }
@media (max-width: 1100px) {
  .bm-filters[data-v-33cc6b8e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .bm-filters[data-v-33cc6b8e] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .bm-grid-2[data-v-33cc6b8e] { grid-template-columns: minmax(0, 1fr); }
}

/* The illustration must fit the payment status page on small/short screens. */
.success[data-v-d4ed3766] {
  height: auto;
  min-height: 60vh;
  padding: var(--fp-layout-space-7) var(--fp-layout-gutter);
  gap: var(--fp-layout-space-4);
  text-align: center;
}
.success img[data-v-d4ed3766] {
  width: min(100%, 490px);
  max-width: 100% !important; /* The recovered markup has an inline 490px maximum. */
  height: auto;
}
.success h2[data-v-d4ed3766] { margin: 0; line-height: 1.35; }

/* Embedded calculators inherit their host's gutter, including <=600px. */
.greyBg.cpb-embedded .flexWrapperColumn[data-v-0e46929a],
.greyBg.cpb-embedded .flexWrapperColumn[data-v-41d61949] {
  padding-inline: 0 !important;
}
@media (max-width: 600px) {
  .cpb-card[data-v-0e46929a], .cpb-card[data-v-41d61949] {
    padding: var(--fp-layout-space-3);
  }
  .newsContent[data-v-edbc7560] { padding-top: var(--fp-layout-space-5); }
}

/* Match the real lesson's gutter while it is still loading. */
.lesson_wrapper_skeleton[data-v-3441f85a] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .lesson_wrapper_skeleton[data-v-3441f85a] {
    width: 100%;
    padding-inline: var(--fp-layout-gutter);
  }
}

/* Long author names remain readable; loading cards use the same safe grid. */
.authors-grid[data-v-21b1ebd5], .authors-skeleton-grid[data-v-21b1ebd5] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--fp-layout-space-5);
}
.author-name[data-v-21b1ebd5] {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .author-card[data-v-21b1ebd5], .skeleton-author-card[data-v-21b1ebd5] {
    padding: var(--fp-layout-space-4);
  }
}

/* The ratings stylesheet itself is scoped in this release. These are its
 * spacing rules; .page.page:has(.rating-grid) identifies this existing page only. */
.page.page:has(.rating-grid) .hero { padding-block: var(--fp-layout-space-6); }
.page.page:has(.rating-grid) h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.page.page:has(.rating-grid) .section { padding-block: var(--fp-layout-space-6); }
.page.page:has(.rating-grid) .rating-grid { gap: var(--fp-layout-space-5); }
.page.page:has(.rating-grid) .rating-card { padding: var(--fp-layout-space-4); }
.page.page:has(.rating-grid) .lead { line-height: 1.5; }
@media (max-width: 768px) {
  .page.page:has(.rating-grid) .wrap { width: calc(100% - 2 * var(--fp-layout-gutter)); }
  .page.page:has(.rating-grid) .hero { padding-block: var(--fp-layout-space-5); }
  .page.page:has(.rating-grid) .rating-grid { gap: var(--fp-layout-space-3); }
  .page.page:has(.rating-grid) .section-head h2 { font-size: 26px; }
}