/* App-specific styles on top of Pico. No inline styles anywhere (CSP). */
main.container { padding-bottom: 5rem; }
.bottom-nav { position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-around;
  background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color);
  padding: .25rem 0 calc(.25rem + env(safe-area-inset-bottom)); z-index: 10; }
.bottom-nav a { min-height: 44px; min-width: 64px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; }
.bottom-nav a[aria-current="page"] { font-weight: 700; }
#toasts { position: fixed; top: 1rem; left: 1rem; right: 1rem; z-index: 20; display: grid; gap: .5rem; }
.toast { padding: .75rem 1rem; border-radius: var(--pico-border-radius);
  background: var(--pico-del-color); color: #fff; }
.field-error { color: var(--pico-del-color); font-size: .875rem; display: block; margin-top: -.5rem; margin-bottom: .75rem; }
.ingredient-row { display: grid; grid-template-columns: 4.5rem 6rem 1fr 44px; gap: .5rem; align-items: start; }
.ingredient-row .note { grid-column: 1 / 4; }
.ingredient-row button { min-height: 44px; padding: 0; }
.muted { color: var(--pico-muted-color); }
@media (max-width: 420px) { .ingredient-row { grid-template-columns: 4rem 5rem 1fr 44px; } }
.notes { white-space: pre-line; }
.notice { border-left: 4px solid var(--pico-primary); padding: .75rem 1rem; }

.stepper { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.step-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.step-btn[aria-disabled="true"] { opacity: .4; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.photos figure { margin: 0; }
.photos img { width: 100%; height: auto; border-radius: var(--pico-border-radius); }
/* Board */
.day { margin-bottom: 1.5rem; }
.day h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.slot { display: grid; gap: .125rem; min-height: 44px; padding: .5rem .75rem; margin-bottom: .5rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  color: inherit; text-decoration: none; }
.slot.empty { border-style: dashed; }
.slot-meal { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pico-muted-color); }
.slot-plan { font-weight: 600; }
.slot-proposals { margin: .25rem 0 0; padding-left: 1rem; font-size: .9rem; }
.slot-proposals li { margin: 0; }
.badge { display: inline-block; font-size: .8rem; padding: 0 .5rem; border-radius: 1rem;
  background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }
.votes { color: var(--pico-muted-color); white-space: nowrap; margin-left: .25rem; }
.proposals { padding: 0; }
.proposal { list-style: none; padding: .75rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.proposal-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.proposal-actions form { margin: 0; }
.proposal-actions button, .proposal-actions [role="button"] { min-height: 44px; margin: 0; padding: .25rem .75rem; }
.vote[aria-pressed="true"] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
fieldset label { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; }
/* Slot forms: show the end date only for meal prep; hide the slot for someday. */
.slot-form .prep-only { display: none; }
.slot-form:has(input[name="when"][value="prep"]:checked) label.prep-only,
.slot-form:has(input[name="when"][value="prep"]:checked) div.prep-only { display: block; }
.slot-form:has(input[name="when"][value="prep"]:checked) span.prep-only { display: inline; }
.slot-form:has(input[name="when"][value="prep"]:checked) .day-only { display: none; }
.slot-form:has(input[name="when"][value="someday"]:checked) .slot-fields { display: none; }

/* Shopping */
.aisle h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.items { padding: 0; list-style: none; }
.item { list-style: none; display: grid; grid-template-columns: 44px 1fr auto; gap: .5rem; align-items: center;
  padding: .25rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.item form { margin: 0; }
.tick { width: 44px; height: 44px; padding: 0; margin: 0; color: transparent; }
.tick[aria-pressed="true"] { color: var(--pico-primary-inverse); background: var(--pico-primary-background); }
.item-text { min-width: 0; overflow-wrap: anywhere; }
.item.checked .item-text { text-decoration: line-through; color: var(--pico-muted-color); }
.item-qty { color: var(--pico-muted-color); margin-left: .25rem; white-space: nowrap; }
.item-edit { margin: 0; }
.item-edit summary { min-height: 44px; display: flex; align-items: center; }
.item-edit[open] { grid-column: 1 / -1; }
.qty-form { margin: .5rem 0; }
.qty-row { display: flex; gap: .5rem; align-items: center; }
.qty-form .field-error { margin: .25rem 0 0; }
.qty-form input { margin: 0; max-width: 8rem; }
.qty-form button, .item-edit button { min-height: 44px; margin: 0; }
.range-form, .add-form { margin-bottom: 1rem; }

.ingredients { padding: 0; }
.ingredients li { list-style: none; border-bottom: 1px solid var(--pico-muted-border-color); padding: .5rem 0; }
.ingredient-form { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; margin: 0; }
.ingredient-name { grid-column: 1 / -1; font-weight: 600; }
.ingredient-form select, .ingredient-form button { margin: 0; min-height: 44px; }
.ingredient-form label { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin: 0; }

/* Members */
.members li { margin-bottom: .75rem; }
.member-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.member-actions form { margin: 0; }
.member-actions button { min-height: 44px; margin: 0; padding: .25rem .75rem; }