.prep-levels {
  container: prep-levels / inline-size;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 1.5rem 0;
  padding: clamp(.5rem, 2vw, 1rem);
  border: 1px solid #d9e0e6;
  border-radius: .5rem;
  background: #fff;
  color: #243c48;
  text-align: left;
}
.prep-levels *, .prep-levels *::before, .prep-levels *::after { box-sizing: border-box; }
.prep-levels h2 { font-size: 1.25rem; }
.prep-levels [hidden] { display: none !important; }
.prep-levels p { line-height: 1.45; overflow-wrap: anywhere; }
.prep-levels-generals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.prep-levels fieldset { min-width: 0; max-width: 100%; margin: .5rem 0; padding: .75rem; border: 1px solid #d9e0e6; }
.prep-levels legend { width: auto; max-width: 100%; font-size: 1rem; font-weight: 600; white-space: normal; }
.prep-levels-choice { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem; cursor: pointer; }
.prep-levels-choice input { flex: 0 0 18px; width: 18px; height: 18px; margin: .2rem 0 0; accent-color: #276b40; }
.prep-levels-choice > span { min-width: 0; overflow-wrap: anywhere; }
.prep-levels-choice:has(input:checked) { background: #eef6ff; border-radius: .25rem; }
.prep-levels-choice small { display: block; margin-top: .25rem; line-height: 1.4; }
.prep-levels-example { display: flex; flex-direction: column; align-items: flex-start; margin-top: .5rem; }
.prep-levels-example > small { font-size: .7rem; color: #526573; }
.prep-levels-example-images { display: flex; align-items: flex-start; gap: 6px; width: 100%; max-width: 220px; min-width: 0; }
.prep-levels-example-product { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; }
.prep-levels-example-product:only-child { flex: 0 1 56px; }
.prep-levels-example-product img { display: block; width: 56px; max-width: 100%; height: 64px; object-fit: contain; }
.prep-levels-example-name, .prep-levels-example-missing { width: 100%; text-align: center; overflow-wrap: anywhere; font-size: .7rem; color: #526573; }
.prep-levels-example-arrow { flex: 0 0 auto; padding-top: 20px; font-size: 1.1rem; color: #526573; }

/* Two columns is the minimum, including narrow mobiles. Breakpoints use the panel's inner width. */
.prep-levels-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .5rem; min-width: 0; margin-top: 1rem; }
.prep-levels-line { display: flex; flex-direction: column; min-width: 0; max-width: 100%; padding: .6rem; border: 1px solid #d9e0e6; border-radius: .5rem; background: #fff; }
.prep-levels-product-visual { display: flex; align-items: center; justify-content: center; min-width: 0; height: 112px; margin-bottom: .5rem; background: #f6f8fa; border-radius: .3rem; }
.prep-levels-product-image { display: block; width: 100%; max-width: 112px; height: 112px; object-fit: contain; }
.prep-levels-product-missing { padding: .5rem; text-align: center; font-size: .75rem; color: #526573; }
.prep-levels-product-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; min-height: 4.2em; max-height: 4.2em; font-size: .875rem; line-height: 1.4; }
.prep-levels-product-preference { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: .6rem 0; }
.prep-levels-product-level { padding: .15rem .45rem; border-radius: 1rem; background: #edf5ef; color: #245738; font-size: .8rem; font-weight: 700; }
.prep-levels-product-source { font-size: .75rem; color: #526573; overflow-wrap: anywhere; }
.prep-levels button.prep-levels-product-edit, .prep-levels button.prep-levels-product-inherit { min-height: 44px; width: 100%; min-width: 0; margin: .25rem 0 0; padding: .5rem .25rem; white-space: normal; overflow-wrap: anywhere; font-size: .8rem; touch-action: manipulation; }
.prep-levels-product-editor { min-width: 0; margin-top: .5rem; }
.prep-levels-product-editor fieldset { padding: .35rem; }
.prep-levels-product-editor legend { font-size: .85rem; }
.prep-levels-product-editor p { font-size: .75rem; }
.prep-levels-product-editor .prep-levels-choice { gap: .3rem; padding: .35rem .1rem; }
.prep-levels-product-editor .prep-levels-choice strong { font-size: .75rem; }
.prep-levels-product-editor .prep-levels-choice small { font-size: .7rem; }
.prep-levels summary { cursor: pointer; padding: .5rem 0; white-space: normal; overflow-wrap: anywhere; }
.prep-levels-status.is-error { color: #a02020; }
.prep-levels button { margin: .25rem .5rem .25rem 0; }

@container prep-levels (min-width: 520px) {
  .prep-levels-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
}
@container prep-levels (min-width: 720px) {
  .prep-levels-generals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prep-levels-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container prep-levels (min-width: 1000px) {
  .prep-levels-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container prep-levels (min-width: 1240px) {
  .prep-levels-products-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}