.food-preference-board { background: #f1f8f5; border: 1px solid #c9dfd7; border-radius: 20px; padding: clamp(16px, 3vw, 30px); }
.food-preference-board > h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); color: #123e34; }
.food-preference-board > p { max-width: 70ch; color: #395d53; }
.food-picker-toolbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.food-picker-toolbar label, .food-choice-card label { display: grid; gap: 7px; font-size: .86rem; font-weight: 600; color: #31574c; }
.food-picker-toolbar input, .food-picker-toolbar select, .food-choice-card select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #b8d2c8; border-radius: 9px; padding: 10px; color: #163e33; background: white; font: inherit; }
.food-choice-summary { font-size: .9rem; color: #31574c; padding: 12px 0; }
.food-choice-groups { display: grid; gap: 12px; }
.food-choice-groups .preference-disclosure { border: 1px solid #c5dcd2; border-radius: 12px; background: #fff; overflow: hidden; }
.food-choice-groups summary { padding: 18px; cursor: pointer; font-size: 1rem; font-weight: 700; color: #174b3d; }
.food-group-description { margin: 0 18px 14px; color: #44685d; font-size: .92rem; }
.food-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.food-choice-card { min-width: 0; border: 1px solid #dde9e3; border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-content: start; background: #fafcfb; }
.food-choice-card h4 { margin: 0; font-size: 1rem; color: #173e33; overflow-wrap: anywhere; }
.food-choice-availability { color: #547268; font-size: .77rem; line-height: 1.4; }
.food-choice-card[data-preference="love"] { border-color: #549b81; background: #edf8f1; }
.food-choice-card[data-preference="avoid"] { border-color: #b58872; background: #fff7f1; }
.food-choice-card[hidden], .food-choice-groups details[hidden], .food-choice-empty[hidden] { display: none !important; }
.food-picker-note { font-size: .86rem; line-height: 1.6; }
.food-preference-board :is(select, input, summary):focus-visible { outline: 3px solid #17876d; outline-offset: 3px; }
@media (max-width: 1100px) { .food-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .food-choice-grid, .food-picker-toolbar { grid-template-columns: minmax(0, 1fr); } .food-choice-groups summary { padding: 14px; } }