/* ─── Shopping View (extracted from original main.css) ───────────────────── */

/* ─── Shopping List ──────────────────────────────────────────────────────── */
.shopping-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sl-done-section {
  border-top: 1px solid var(--card-border);
  margin-top: var(--sp-3);
}

.sl-done-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast);
  border-radius: var(--r-md);
}

.sl-done-summary::-webkit-details-marker { display: none; }
.sl-done-summary:hover { background: var(--s1); }
.sl-done-summary:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.sl-done-count {
  font-size: 0.6875rem;
  background: var(--s2);
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
}

.sl-done-chevron {
  margin-left: auto;
  transition: transform var(--t-base);
  color: var(--ink-muted);
}

.sl-done-section[open] .sl-done-chevron {
  transform: rotate(180deg);
}

@keyframes checkPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.shopping-list { list-style: none; display: flex; flex-direction: column; }

/* ─── Shopping item — Quick Scan ─────────────────────────────────────────── */
.shopping-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  transition: background var(--t-fast);
  min-height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.shopping-item:active { background: var(--hover-overlay); }

.shopping-item--checked {
  opacity: 0.5;
}

/* Category accent bar (left edge) */
.shopping-item__accent {
  width: 4px;
  align-self: stretch;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  flex-shrink: 0;
  /* color set inline per category */
}

.shopping-item__checkbox {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  background: var(--s1);
  box-shadow: inset 0 1px 3px rgba(var(--shadow-color), 0.06);
}

.shopping-item__checkbox:hover { border-color: var(--success); box-shadow: inset 0 1px 2px rgba(var(--shadow-color), 0.05), 0 0 0 3px rgba(16,185,129,.15); }
.shopping-item__checkbox:focus-visible {
  outline: 3px solid rgba(16,185,129,.25);
  outline-offset: 2px;
  border-color: var(--success);
}

.shopping-item__checkbox--checked {
  background: var(--success);
  border-color: var(--success);
  animation: checkPop 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shopping-item__checkbox svg {
  width: 16px;
  height: 16px;
  stroke: white;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.shopping-item__checkbox--checked svg { opacity: 1; }

/* Icon bubble — hidden in Quick Scan design */
.shopping-item__icon {
  display: none;
}

.shopping-item__body { flex: 1; min-width: 0; }

.shopping-item__name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  transition: color var(--t-fast);
}

.shopping-item--checked .shopping-item__name {
  text-decoration: line-through;
}

/* "oder X" alternative hint under item name */
.shopping-item__alt {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.2;
  margin-top: 1px;
  font-style: italic;
}

.shopping-item--checked .shopping-item__alt {
  text-decoration: line-through;
  opacity: 0.5;
}

/* Inline category label under item name */
.shopping-item__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1;
  /* color set inline per category */
}

/* Right side: amount stacked above source badge */
.shopping-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.shopping-item__amount {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 4px 10px;
  background: var(--s2);
  border-radius: var(--r-pill);
}

/* Source badge (right side) */
.shopping-item__src {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.shopping-item__src--recipe { background: var(--clay-subtle); color: var(--clay); }
.shopping-item__src--plan   { background: var(--sage-subtle); color: var(--sage-hover); }
.shopping-item__src--staple { background: var(--s2);          color: var(--ink-muted); }

/* ─── Shopping category divider — Quick Scan (dot + label + line) ────────── */
.sl-category { margin-top: var(--sp-2); }
.sl-category:first-child { margin-top: 0; }

.sl-category__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}

.sl-category__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* color set inline per category */
}

.sl-category__line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.sl-category__count {
  font-size: 0.625rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.sl-category__name {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* color set inline per category */
}

/* ─── Shopping progress bar ──────────────────────────────────────────────── */
.sl-progress {
  height: 3px;
  background: var(--s3);
  flex-shrink: 0;
}

.sl-progress__fill {
  height: 100%;
  background: var(--sage);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  transition: width var(--t-slow);
  min-width: 0;
}


/* ─── New List Options ────────────────────────────────────────────────────── */
.new-list-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.new-list-option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--s1);
  border: 1px solid var(--card-border);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-base);
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-card);
}

.new-list-option:active,
.new-list-option:focus-visible {
  background: var(--s2);
  border-color: var(--today-border);
  box-shadow: none;
}

.new-list-option__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--clay-subtle);
  color: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.new-list-option__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.new-list-option__sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 2px;
}


/* ─── Staple Items (Shopping List) ───────────────────────────────────────── */
.shopping-item--staple .shopping-item__name {
  color: var(--ink-muted);
}

.staple-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sage);
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.staple-section {
  margin-top: var(--sp-3);
}

.staple-section__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sp-3) 0;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.staple-section__summary::-webkit-details-marker { display: none; }

.staple-section__count {
  font-size: 0.75rem;
  background: var(--s2);
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 1px 7px;
}

.shopping-list--staples {
  opacity: 0.85;
}


/* ─── Staples Modal ───────────────────────────────────────────────────────── */
.staples-hint {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: var(--sp-2) 0 var(--sp-4);
  line-height: 1.5;
}

.staples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.staple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-3);
  background: var(--s1);
  border-radius: var(--r-md);
  min-height: 52px;
}

.staple-row__name {
  font-size: 0.9375rem;
  color: var(--ink);
}


/* ─── Household Pool ──────────────────────────────────────────────────────── */
.pool-empty {
  font-size: 0.875rem;
  color: var(--ink-muted);
  font-style: italic;
  padding: var(--sp-3) 0;
}

.pool-group {
  margin-bottom: var(--sp-4);
}

.pool-group__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-2);
}

.pool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pool-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--s3);
  background: var(--s1);
  color: var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pool-chip:active {
  background: var(--s2);
}

.pool-chip:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.pool-chip--added {
  border-color: var(--sage);
  color: var(--sage);
  background: color-mix(in srgb, var(--sage) 10%, transparent);
}

.pool-chip:disabled {
  opacity: 0.7;
  cursor: default;
}

.pool-item-cat {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 1px;
}


/* ─── Choosy Modal ────────────────────────────────────────────────────────── */
.choosy-header {
  text-align: center;
  padding-bottom: var(--sp-3);
}

.choosy-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clay-subtle);
  color: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}

.choosy-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}

.choosy-sub {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

.choosy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
}

.choosy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--s3);
  background: var(--s1);
  color: var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.choosy-chip:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.choosy-chip--on {
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  border-color: var(--sage);
  color: var(--sage);
  text-decoration: line-through;
  opacity: 0.7;
}

.choosy-chip__amt {
  font-size: 0.75rem;
  opacity: 0.7;
}

.choosy-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-bottom: var(--sp-2);
}


/* ─── Shopping FAB (Floating Action Button) ─────────────────────────────────── */
.shopping-fab {
  position: sticky;
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  margin-left: auto;
  margin-top: -56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--clay);
  color: var(--ink-on-clay);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-btn), 0 6px 20px rgba(224, 120, 86, 0.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  z-index: 3;
}
.shopping-fab:hover {
  background: var(--clay-hover);
  box-shadow: var(--shadow-btn-hover), 0 8px 28px rgba(224, 120, 86, 0.3);
  transform: scale(1.05);
}
.shopping-fab:active {
  transform: scale(0.95);
}
.shopping-fab:focus-visible {
  outline: 3px solid var(--focus-ring-strong);
  outline-offset: 2px;
}

/* Scroll padding so FAB doesn't cover last item */
.shopping-items-wrap {
  position: relative;
  padding-bottom: 80px;
}

/* ─── Header Actions (share/delete/leave icons) ────────────────────────────── */
.modal-header__actions {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  flex-shrink: 0;
}
.modal-header__action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-header__action:hover {
  background: var(--hover-overlay);
  color: var(--ink-secondary);
}
.modal-header__action:active {
  background: var(--active-overlay);
}
.modal-header__action:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.modal-header__action--danger:hover {
  color: var(--error);
  background: var(--danger-bg);
}
.modal-header__action--danger:active {
  background: var(--danger-bg-hover);
}


/* ─── Shopping Quick-Actions Bar ────────────────────────────────────────────── */
.shopping-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.sqa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--s1);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.sqa-btn:hover { background: var(--s2); box-shadow: var(--shadow-card); }
.sqa-btn:active { transform: scale(0.96); }
.sqa-btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.sqa-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sqa-btn:nth-child(1) .sqa-btn__icon { background: var(--clay-subtle); color: var(--clay); }
.sqa-btn:nth-child(2) .sqa-btn__icon { background: var(--sage-subtle); color: var(--sage); }
.sqa-btn:nth-child(3) .sqa-btn__icon { background: #ebe8f5; color: #6a5a8f; }
.sqa-btn:nth-child(4) .sqa-btn__icon { background: #f0ece0; color: #8a7040; }

.sqa-btn__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}

.sqa-btn__sub {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.3;
  max-width: 14ch;
}


/* ─── Shopping List Cards (sl-card) ─────────────────────────────────────────── */
.sl-list {
  list-style: none;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.sl-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.sl-card:hover { background: var(--s2); box-shadow: var(--shadow-card-hover); }
.sl-card:active { transform: scale(0.985); }
.sl-card:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

.sl-card__ring { flex-shrink: 0; }
.sl-card__ring svg { overflow: visible; }

.sl-card__ring-bg {
  fill: none;
  stroke: var(--s3);
  stroke-width: 2.5;
}
.sl-card__ring-fill {
  fill: none;
  stroke: var(--sage);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--t-slow);
}
.sl-card__ring-fill--done { stroke: var(--success); }

.sl-card__ring-pct {
  font-size: 5px;
  font-weight: 700;
  fill: var(--ink-secondary);
  font-family: var(--font-body);
  dominant-baseline: central;
}

.sl-card__body { flex: 1; min-width: 0; }
.sl-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-card__meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.sl-card__chevron { color: var(--ink-muted); flex-shrink: 0; opacity: 0.45; }


/* ─── Add Item: Typeahead Search ────────────────────────────────────────────── */

.ai-search-modal {
  display: flex;
  flex-direction: column;
  min-height: calc(80dvh - var(--sp-5) - 36px);
}

.ai-search-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ai-search-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1.0625rem;
  border: 2px solid var(--s3);
  border-radius: var(--r-md);
  background: var(--s1);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--font-body);
  flex-shrink: 0;
}
.ai-search-input:focus {
  border-color: var(--clay);
  box-shadow: var(--shadow-input-focus);
}
.ai-search-input::placeholder {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.ai-search-results {
  margin-top: var(--sp-2);
  background: var(--s0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ai-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink);
  border-bottom: 1px solid var(--border-subtle);
}
.ai-result:last-child { border-bottom: none; }
.ai-result:hover,
.ai-result:focus-visible {
  background: var(--s1);
}
.ai-result:active {
  background: var(--s2);
}

.ai-result__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--s1);
}
.ai-result__icon--custom {
  background: rgba(106,96,96,.08);
  color: var(--ink-muted);
}

.ai-result__body {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1;
}

.ai-result__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-result__name mark {
  background: var(--clay-subtle);
  color: var(--clay);
  border-radius: 2px;
  padding: 0 1px;
}

.ai-result__hint {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.ai-result__cat {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.ai-result--custom {
  border-top: 1px solid var(--s2);
}

/* ─── Add Item: Detail step ───────────────────────────────────────────────── */

.ai-detail__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  flex-wrap: wrap;
}

.ai-detail__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--s1);
}
.ai-detail__icon--custom {
  background: rgba(106,96,96,.08);
}

.ai-detail__name {
  font-size: 1.125rem;
}
.ai-detail__sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  width: 100%;
}

/* ─── Recipe-picker standalone (Aus-Rezept flow) ────────────────────── */
.recipe-picker-standalone {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

/* ─── Merge Preview (Recipe → List) ───────────────────────────────────────── */
.merge-legend {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.merge-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.75rem;
  color: var(--ink-secondary);
}
.merge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.merge-dot--new   { background: var(--sage); }
.merge-dot--merge { background: var(--clay); }

.merge-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 280px;
  overflow-y: auto;
}
.merge-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
}
.merge-row--new   { background: rgba(107,143,110,.08); }
.merge-row--merge { background: var(--clay-subtle); }

.merge-row__name {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merge-row__amount { font-size: 0.75rem; color: var(--ink-secondary); white-space: nowrap; }
.merge-row__badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--new   { background: var(--sage-subtle); color: var(--sage); }
.badge--merge { background: var(--clay-subtle); color: var(--clay); }

/* ═══════════════════════════════════════════════════════════════════════════
   KONZEPT 3 — NEW COMPONENTS
   Filter pills, hero cards, compact cards, 3-panel desktop, interactive ingredients
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED SHOPPING LISTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card shared indicator ──────────────────────────────────────────────── */
.sl-card__shared {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sage);
}
.sl-card__shared svg {
  width: 12px;
  height: 12px;
  stroke: var(--sage);
}

/* ── Member dots bar — stacked avatars ──────────────────────────────────── */
.sl-members-bar {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
}
.sl-members-stack {
  display: flex;
  align-items: center;
}
.sl-member-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  border: 2.5px solid var(--s1);
  position: relative;
  cursor: pointer;
  transition: transform var(--t-fast);
}
.sl-members-stack .sl-member-dot + .sl-member-dot {
  margin-left: -8px;
}
.sl-member-dot:hover {
  transform: scale(1.12);
  z-index: 2;
}
.sl-members-label {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-left: var(--sp-2);
}

/* ── Attribution dot — filled with initial ──────────────────────────────── */
.shopping-item__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  line-height: 1;
}
.shopping-item__checked-by {
  font-size: 0.625rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ── Tap-Tooltip (mobile) ───────────────────────────────────────────────── */
.tap-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--s0);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: tapTipIn 150ms ease-out;
}
.tap-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
}
@keyframes tapTipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Share Modal — Kühlschrank-Magnet ───────────────────────────────────── */
.share-modal {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.share-modal__header {
  text-align: center;
}
.share-modal__header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--sp-1);
}
.share-modal__header p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* Code display — individual letter tiles */
.share-code-tiles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-4) var(--sp-3);
}
.share-code-tile {
  width: 36px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--s2);
  border-radius: var(--r-sm);
  border: 1px solid var(--s3);
  user-select: all;
  transition: transform var(--t-fast), background var(--t-fast);
}
.share-code-tiles:hover .share-code-tile {
  background: var(--sage-subtle);
  border-color: var(--sage);
}
.share-code-dash {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 2px;
  user-select: none;
}

/* Copy button inline */
.share-copy-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: calc(-1 * var(--sp-2));
}
.share-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sage);
  background: var(--sage-subtle);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.share-copy-btn:hover { background: rgba(99, 102, 241, 0.2); }
.share-copy-btn:active { transform: scale(0.96); }
.share-copy-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.share-copy-btn--done { color: var(--success); background: rgba(16, 185, 129, 0.12); }

/* Share action buttons */
.share-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Members section */
.share-members-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-3);
}
.share-members-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}
.share-members-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.share-member {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.share-member:hover {
  background: var(--s1);
}
.share-member__info {
  flex: 1;
  min-width: 0;
}
.share-member__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-member__role {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.share-member__role--owner {
  color: var(--clay);
}
.share-member__remove {
  background: none;
  border: none;
  padding: var(--sp-1);
  cursor: pointer;
  color: var(--ink-muted);
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.share-member:hover .share-member__remove {
  opacity: 1;
}
@media (hover: none) {
  .share-member__remove { opacity: 1; }
}
.share-member__remove:hover {
  background: rgba(220, 38, 38, .1);
  color: var(--color-error);
}
.share-member__remove:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  opacity: 1;
}

/* Footer danger link */
.share-danger-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.share-danger-link:hover { color: var(--color-error); background: rgba(220,38,38,.06); }
.share-danger-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ── Join Modal — PIN entry tiles ───────────────────────────────────────── */
.join-modal {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.join-modal__header {
  text-align: center;
}
.join-modal__header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--sp-1);
}
.join-modal__header p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* PIN tiles */
.join-tiles {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-2) 0;
}
.join-tile {
  width: 34px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--s2);
  border-radius: var(--r-sm);
  border: 2px solid var(--s3);
  transition: border-color var(--t-fast), background var(--t-fast);
  caret-color: transparent;
}
.join-tile--active {
  border-color: var(--sage);
  background: var(--sage-subtle);
}
.join-tile--filled {
  border-color: var(--ink-muted);
}
.join-dash {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-muted);
  user-select: none;
}
/* Hidden real input behind tiles */
.join-real-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Preview card with accent stripe */
.join-preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--s1);
  border-radius: var(--r-md);
  border-left: 3px solid var(--sage);
  font-size: var(--fs-sm);
  width: 100%;
  animation: joinPreviewIn 200ms ease-out;
}
@keyframes joinPreviewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Generate Modal: Timeline-Ribbon Design ───────────────────────────── */

.gen-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Header: Title + Plan Badge ─────────────────────────────────────────── */
.gen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
}

.gen-plan-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--s1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.gen-plan-badge:hover {
  border-color: var(--border);
  background: var(--s2);
}
.gen-plan-badge svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

/* ── Timeline Ribbon: The Signature Element ─────────────────────────────── */
.gen-timeline {
  position: relative;
  margin-bottom: var(--sp-1);
}

/* The connecting track line */
.gen-timeline__track {
  position: absolute;
  top: 50%;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--border-subtle);
  transform: translateY(calc(-50% - 10px)); /* Account for label offset */
  z-index: 0;
  border-radius: 1px;
}

.gen-timeline__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
  z-index: 2;
}

.gen-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-1);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.gen-day:active { transform: scale(0.92); }
.gen-day:focus-visible { outline: none; }
.gen-day:focus-visible .gen-day__dot {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.gen-day__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--s1);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  transition: all var(--t-base);
  position: relative;
}

.gen-day__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--t-fast), font-weight var(--t-fast);
}

/* States */
.gen-day--empty .gen-day__dot {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}

.gen-day--past {
  opacity: 0.4;
}
.gen-day--past .gen-day__label {
  text-decoration: line-through;
}

/* Selected: Elevated with glow */
.gen-day--on .gen-day__dot {
  background: var(--clay);
  border-color: var(--clay);
  color: white;
  box-shadow: 0 4px 20px rgba(224, 120, 86, 0.25);
  transform: scale(1.1);
}
.gen-day--on .gen-day__label {
  color: var(--clay);
  font-weight: 700;
}

/* ── Presets as Segmented Control ───────────────────────────────────────── */
.gen-presets {
  display: flex;
  background: var(--s2);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}

.gen-preset {
  flex: 1;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.gen-preset:hover {
  color: var(--ink-secondary);
  background: rgba(255,255,255,0.5);
}
.gen-preset:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: -2px;
}
.gen-preset--active {
  background: var(--s1);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Summary: Visual with icons ─────────────────────────────────────────── */
.gen-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, rgba(224, 120, 86, 0.06) 0%, rgba(224, 120, 86, 0.02) 100%);
  border: 1px solid rgba(224, 120, 86, 0.12);
  border-radius: var(--r-md);
  min-height: 44px;
}
.gen-summary .spinner {
  width: 18px;
  height: 18px;
  margin: 0;
  border-width: 2px;
}

.gen-summary__stat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
}
.gen-summary__stat strong {
  color: var(--ink);
  font-weight: 600;
}
.gen-summary__stat svg {
  width: 16px;
  height: 16px;
  color: var(--clay);
  flex-shrink: 0;
}

.gen-summary__divider {
  width: 1px;
  height: 16px;
  background: var(--border);
}

/* ── Target Selection: Clean Tabs ───────────────────────────────────────── */
.gen-target {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gen-target__tabs {
  display: flex;
  gap: var(--sp-2);
}

.gen-target__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 2px solid var(--border-subtle);
  background: var(--s0);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.gen-target__tab:hover {
  border-color: var(--border);
  background: var(--s1);
}
.gen-target__tab:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.gen-target__tab svg {
  width: 18px;
  height: 18px;
}
.gen-target__tab--active {
  border-color: var(--clay);
  background: rgba(224, 120, 86, 0.04);
  color: var(--ink);
}
.gen-target__tab--active svg {
  color: var(--clay);
}

/* ── Existing Lists Panel ───────────────────────────────────────────────── */
.gen-target__existing {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gen-target__existing--visible {
  display: flex;
}

.gen-target__list {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-subtle);
  background: var(--s0);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  text-align: left;
}
.gen-target__list:hover {
  border-color: var(--border);
  background: var(--s1);
}
.gen-target__list:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.gen-target__list--active {
  border-color: var(--clay);
  background: rgba(224, 120, 86, 0.04);
}

.gen-target__ring {
  flex-shrink: 0;
}

.gen-target__list-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.gen-target__list-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-target__list-meta {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.gen-target__check {
  flex-shrink: 0;
  color: var(--clay);
}

/* ── Name Field: Hide when appending ────────────────────────────────────── */
.gen-name-field {
  display: block;
}
.gen-name-field--hidden {
  display: none;
}

/* ── Desktop Enhancements ───────────────────────────────────────────────── */
@media (min-width: 520px) {
  .gen-day__dot {
    width: 44px;
    height: 44px;
    font-size: var(--fs-base);
  }
  .gen-day__label {
    font-size: var(--fs-xs);
  }
  .gen-day--on .gen-day__dot {
    transform: scale(1.08);
  }
  .gen-target__existing {
    max-height: 220px;
  }
  .gen-preset {
    padding: var(--sp-2) var(--sp-3);
  }
}

/* ─── Shopping Item Edit Button ──────────────────────────────────────────── */
.shopping-item__edit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Show on hover (desktop) and always on touch devices */
.shopping-item:hover .shopping-item__edit,
.shopping-item:focus-within .shopping-item__edit {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .shopping-item__edit {
    opacity: 0.6;
    pointer-events: auto;
  }
  .shopping-item:active .shopping-item__edit {
    opacity: 1;
  }
}

.shopping-item__edit:hover {
  background: var(--s2);
  color: var(--ink-secondary);
}

.shopping-item__edit:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  opacity: 1;
  pointer-events: auto;
}

.shopping-item__edit:active {
  background: var(--s3);
}

/* Hide edit button on checked items */
.shopping-item--checked .shopping-item__edit {
  display: none;
}

/* ─── Edit Item Modal ────────────────────────────────────────────────────── */
.edit-item-modal {
  padding: var(--sp-4);
}

.edit-item-modal__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.edit-item-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edit-item-modal__title {
  margin: 0;
}

.edit-item-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.edit-item-modal__row {
  display: flex;
  gap: var(--sp-3);
}

.edit-item-modal__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.edit-item-modal__actions .btn {
  flex: 1;
}

.edit-item-modal__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.edit-item-modal__delete:hover {
  background: rgba(239, 68, 68, 0.08);
}

.edit-item-modal__delete:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

.edit-item-modal__delete:active {
  background: rgba(239, 68, 68, 0.15);
}

/* ─── Category Chip Picker ───────────────────────────────────────────────── */
.edit-cat-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-1);
}

.edit-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.edit-cat-chip svg {
  flex-shrink: 0;
}

.edit-cat-chip:hover {
  border-color: var(--chip-color);
  color: var(--chip-color);
  background: var(--chip-bg);
}

.edit-cat-chip:focus-visible {
  outline: 2px solid var(--chip-color);
  outline-offset: 2px;
}

.edit-cat-chip--selected {
  border-color: var(--chip-color);
  color: var(--chip-color);
  background: var(--chip-bg);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--chip-color);
}



/* ─── Item Note Chip ──────────────────────────────────────────────────────── */

.shopping-item__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  background: rgba(245, 158, 11, 0.10);
  color: var(--mustard);
  border: 1px solid rgba(245, 158, 11, 0.18);
  -webkit-tap-highlight-color: transparent;
}

.shopping-item__note:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.35);
}

.shopping-item__note--empty {
  background: transparent;
  color: var(--ink-muted);
  border-color: transparent;
  opacity: 0.45;
}

.shopping-item__note--empty:hover {
  background: var(--hover-overlay);
  border-color: var(--border);
  opacity: 0.75;
}

.shopping-item__note-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.shopping-item--checked .shopping-item__note {
  opacity: 0.35;
  pointer-events: none;
}

/* ─── Inline Note Editor ──────────────────────────────────────────────────── */

.shopping-item__note-edit {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  background: var(--s2);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
  animation: noteEditSlide 130ms ease-out;
}

@keyframes noteEditSlide {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.shopping-item__note-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 0.8125rem;
  font-family: var(--font-body);
}

.shopping-item__note-input::placeholder {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.shopping-item__note-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.shopping-item__note-btn--save {
  color: var(--mustard);
}

.shopping-item__note-btn--save:hover {
  background: rgba(245, 158, 11, 0.15);
}

.shopping-item__note-btn--cancel {
  color: var(--ink-muted);
  margin-right: 2px;
}

.shopping-item__note-btn--cancel:hover {
  color: var(--error);
  background: var(--danger-bg);
}

/* ─── Detail Modal Progress Bar ──────────────────────────────────────────── */

.sl-detail-progress {
  height: 2px;
  background: var(--border-subtle);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.sl-detail-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--sage);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  transition: width var(--t-slow);
}

.sl-detail-progress__fill--done {
  background: var(--success);
}

/* ─── Add-item modal note field label enhancement ─────────────────────────── */

.ai-note-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai-note-optional {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--ink-muted);
  margin-left: 2px;
}