/* Einkauf: quick add, the list with ticked items, the overflow menu. */
@layer features {
  .shopping .shopping-count { margin-top: calc(-1 * var(--space-3)); }
  .shopping-add { display: flex; align-items: flex-end; gap: var(--space-3); }
  .shopping-add .field { flex: 1 1 auto; min-width: 0; }
  .shopping-add .button { flex: none; }
  /* Phones: the field gets the width, the button shows its icon (its name stays "Hinzufügen"). */
  @media (max-width: 599px) {
    .shopping-add .add-label { display: none; }
    .shopping-add .button { padding-inline: var(--space-3); min-width: var(--tap-min); }
  }
  .shopping-list { display: grid; }
  .shopping-row .check { flex: 1 1 auto; min-width: 0; }
  .shopping-row .row-title { font-size: var(--text-md); }
  .shopping-row.pending .row-title { color: var(--color-text-muted); }
  .shopping-row.failed { border-left: 3px solid var(--color-danger); padding-left: var(--space-2); }
  .shopping-row.failed .row-meta { color: var(--color-danger); font-weight: var(--weight-bold); }
  .shopping-row .row-retry { flex: none; gap: var(--space-2); }
  /* Phones: "Erneut versuchen" becomes an icon button beside × (its name says what is sent again), so
     "nicht gespeichert" keeps the row's width. */
  @media (max-width: 599px) {
    .shopping-row .row-retry { min-width: var(--tap-min); padding-inline: var(--space-3); }
    .shopping-row .retry-label { display: none; }
  }
  .shopping-done .card-header { margin-bottom: var(--space-2); }

  /* "Erledigte ausblenden": the pressed state is visible (accent, with a check), not only announced. */
  .shopping-hide-toggle { gap: var(--space-2); }
  .shopping-hide-toggle .toggle-mark { display: none; }
  .shopping-hide-toggle[aria-pressed='true'] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .shopping-hide-toggle[aria-pressed='true'] .toggle-mark { display: inline-flex; }

  /* The overflow menu opens below its button (the shared .menu is placed under the header). */
  .page-menu-wrap { position: relative; }
  .page-menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; left: auto; }

  /* Wall tablets: larger rows, read from a distance. */
  :root[data-device='wall'] .shopping-row .row-title { font-size: var(--text-lg); }
}