/* v114 — Size columns from the available content width, including the sidebar. */
#root :is(.main-area, .content, .my-enrollments),
#root .content > * {
  min-width: 0 !important;
  box-sizing: border-box;
}
#root .offer-grid:not(.fs-offer-list):not(.fs-home-offers),
#root .event-list:not(.home-events) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 60px) / 4))), 1fr)) !important;
  gap: 20px !important;
}
#root :is(.offer-grid, .event-list) > article {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#root :is(.fs-home-link-grid, .fs-category-grid, .representatives-grid, .fs-admin-task-grid, .fs-health-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}
#root :is(.fs-resource-list, .fs-profile-page, .fs-preference-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
}
#root .fs-profile-page {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) !important;
}
#root :is(.fs-home-link-grid, .fs-category-grid, .representatives-grid, .fs-admin-task-grid, .fs-health-grid, .fs-resource-list) > * {
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
#root .fs-home-page .fs-home-section {
  container: fs-home-row / inline-size;
}
#root .fs-home-page .fs-home-section .home-events {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, calc((100% - 40px) / 3))), 1fr)) !important;
}
/* The selected offers always occupy one row; narrower layouts scroll within it. */
#root .fs-home-page .fs-home-section .offer-grid.fs-home-offers {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 12px !important;
}
#root .fs-home-page .fs-home-offers > .offer-card {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  scroll-snap-align: start;
}
@container fs-home-row (max-width: 840px) {
  #root .fs-home-page .fs-home-section .offer-grid.fs-home-offers {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}
@container fs-home-row (max-width: 560px) {
  #root .fs-home-page .fs-home-section .offer-grid.fs-home-offers {
    grid-auto-columns: 90%;
    gap: 12px !important;
  }
}
/* Requests: prevent intrinsic text widths from stretching cards off screen. */
#root .my-enrollments.redesigned.compact-requests {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)) !important;
  gap: 20px !important;
  align-items: start;
}
#root .my-enrollments.redesigned.compact-requests > article {
  container: fs-request / inline-size;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#root .my-enrollments.redesigned.compact-requests > article:not(.fs-request-compact) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}
#root .my-enrollments.redesigned.compact-requests > article:not(.fs-request-compact) > * {
  grid-area: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
#root .my-enrollments .fund-message {
  width: 100% !important;
}
#root .my-enrollments .fs-request-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
#root .my-enrollments :is(.fs-request-body, .fs-request-expanded) > * {
  grid-area: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
#root .my-enrollments .fs-request-expanded[hidden] {
  display: none !important;
}
#root .my-enrollments :is(.request-card-head, .request-main, .fs-request-expanded, .request-card-footer, .request-card-actions, .fund-message, .fund-message > div, .payment-progress) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#root .my-enrollments :is(.request-main, .fund-message, .fs-request-facts, .fs-request-locked) {
  overflow-wrap: anywhere;
  white-space: normal !important;
}
#root .my-enrollments .fs-progress-6 {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
#root .my-enrollments .fs-progress-6 > div {
  min-width: 0 !important;
  width: auto !important;
}
#root .my-enrollments .fs-progress-6 span {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
#root .my-enrollments .request-card-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
#root .my-enrollments .request-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-left: auto;
}
#root .my-enrollments .request-card-actions button {
  min-width: 0 !important;
  min-height: 44px;
  max-width: 100%;
  height: auto !important;
  white-space: normal !important;
}
@container fs-request (max-width: 640px) {
  #root .my-enrollments .fs-progress-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #root .my-enrollments .fs-progress-6::before,
  #root .my-enrollments .fs-progress-6 > div::before,
  #root .my-enrollments .fs-progress-6 > div::after {
    display: none !important;
  }
  #root .my-enrollments .request-card-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  #root .my-enrollments .request-card-actions {
    width: 100% !important;
  }
  #root .my-enrollments .request-card-actions button {
    flex: 1 1 130px !important;
  }
}
@container fs-request (max-width: 340px) {
  #root .my-enrollments .fs-progress-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* File inputs have a large intrinsic width in several browsers. */
#root .content input[type="file"],
.fs-detail-dialog input[type="file"] {
  box-sizing: border-box;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* A real 44 px hit area avoids the old pseudo-element spilling out of the icon. */
#root :is(.offer-visual, .event-thumb) > .favorite-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
}
#root :is(.offer-visual, .event-thumb) > .favorite-button::before {
  inset: 0 !important;
}