:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, system-ui, sans-serif;
  margin: 0;
  padding: 0 0 5rem 0;
  background: Canvas;
  color: CanvasText;
}
header {
  position: sticky; top: 0; z-index: 10;
  background: Canvas;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
  padding: 0.6rem 1rem 0.5rem;
}
.title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
h1 { font-size: 1.1rem; margin: 0; }
.nav-link { font-size: 0.85rem; text-decoration: none; color: #3b82f6; font-weight: 600; }
.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; }
.chip {
  flex: none; padding: 0.4rem 0.8rem; border-radius: 999px; border: none;
  background: color-mix(in srgb, CanvasText 10%, transparent);
  font-size: 0.85rem; white-space: nowrap;
  text-decoration: none; color: inherit; display: inline-flex; align-items: center;
}
.chip.active { background: #16a34a; color: white; }
main { padding: 0.5rem 1rem; }
.add-row { display: flex; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.add-row input {
  flex: 1; padding: 0.6rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, CanvasText 25%, transparent);
  font-size: 1rem; background: Field; color: FieldText;
}
.add-row button {
  padding: 0.6rem 1rem; border-radius: 8px; border: none;
  background: #3b82f6; color: white; font-weight: 600;
}
.category-header {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; opacity: 0.6; margin: 1rem 0 0.3rem;
}
.row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.2rem; border-bottom: 1px solid color-mix(in srgb, CanvasText 8%, transparent);
}
.row.bubbled { background: color-mix(in srgb, #16a34a 12%, transparent); border-radius: 8px; }
.row img { width: 26px; height: 26px; flex: none; }
.row .name { flex: 1; font-size: 1rem; }
.row .badge {
  font-size: 0.7rem; background: #16a34a; color: white;
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.row input[type=checkbox] { width: 22px; height: 22px; }
.pantry-meta { font-size: 0.78rem; opacity: 0.7; }
.pantry-meta.warn { color: #d97706; opacity: 1; }
.pantry-meta.expired { color: #dc2626; opacity: 1; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 0.4rem; }
.stepper button {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: color-mix(in srgb, CanvasText 10%, transparent); font-size: 1rem;
}
.del-btn { border: none; background: none; color: #dc2626; font-size: 1.1rem; padding: 0.2rem 0.4rem; }
.empty { opacity: 0.5; padding: 2rem 0; text-align: center; }
#toast {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
  background: #111; color: white; padding: 0.75rem 1rem; border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  transform: translateY(120%); transition: transform 0.2s ease; z-index: 20;
}
#toast.show { transform: translateY(0); }
#toast button { background: none; border: none; color: #7dd3fc; font-weight: 700; font-size: 0.9rem; }
.autocomplete { position: relative; }
.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 8px; max-height: 200px; overflow-y: auto; z-index: 5;
}
.suggestions div { padding: 0.5rem 0.7rem; }
.suggestions div:active { background: color-mix(in srgb, CanvasText 10%, transparent); }

/* Pantry: dense grid of collapsible items */
.pantry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.4rem;
  align-content: start;
}
.pantry-grid .category-header { grid-column: 1 / -1; margin: 0.6rem 0 0.1rem; }
.pantry-item {
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, CanvasText 3%, transparent);
}
.pantry-item summary {
  list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.6rem; cursor: pointer;
}
.pantry-item summary::-webkit-details-marker { display: none; }
.pantry-item summary img { width: 24px; height: 24px; flex: none; }
.pantry-item summary .name { flex: 1; font-size: 0.92rem; }
.pantry-item .details-body {
  padding: 0 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.pantry-item .field-row { display: flex; align-items: center; gap: 0.4rem; }
.pantry-item .field-row label { font-size: 0.72rem; opacity: 0.65; width: 4.2rem; flex: none; }
.pantry-item .field-row input,
.pantry-item .field-row select {
  flex: 1; padding: 0.3rem; border-radius: 6px;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  background: Field; color: FieldText; font-size: 0.85rem;
}

/* Notes: free-form notes and checklists */
.note-card {
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, CanvasText 3%, transparent);
  margin-bottom: 0.5rem;
}
.note-card summary {
  list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.7rem; cursor: pointer;
}
.note-card summary::-webkit-details-marker { display: none; }
.note-card .note-title-wrap { flex: 1; min-width: 0; }
.note-card .note-title {
  font-size: 0.95rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-card .note-meta { font-size: 0.75rem; opacity: 0.6; margin-top: 0.1rem; }
.note-card .note-category-label {
  display: inline-block; font-size: 0.7rem; opacity: 0.75; margin-top: 0.2rem;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  background: color-mix(in srgb, #16a34a 15%, transparent);
}
.note-card .details-body { padding: 0 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.note-card .category-picker { display: flex; flex-direction: column; gap: 0.3rem; }
.note-card .category-select, .note-card .category-new-input {
  padding: 0.4rem 0.5rem; border-radius: 8px; font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  background: Field; color: FieldText;
}
.note-card .title-input {
  width: 100%; padding: 0.5rem 0.6rem; border-radius: 8px; font-weight: 600;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  background: Field; color: FieldText; font-size: 0.95rem;
}
.note-card textarea {
  width: 100%; min-height: 6rem; padding: 0.6rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  background: Field; color: FieldText; font-size: 0.95rem; resize: vertical;
  font-family: inherit;
}
.note-card .note-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.note-card .note-actions button {
  padding: 0.4rem 0.7rem; border-radius: 8px; border: none;
  background: color-mix(in srgb, CanvasText 10%, transparent); font-size: 0.85rem;
}
.checklist-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 8%, transparent);
}
.checklist-row input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.checklist-row input[type=text] {
  flex: 1; border: none; background: transparent; font-size: 0.9rem;
  padding: 0.2rem; color: CanvasText;
}
.checklist-row.done input[type=text] { text-decoration: line-through; opacity: 0.55; }
.checklist-row .remove-task { flex: none; background: none; border: none; font-size: 0.9rem; opacity: 0.6; }

/* Quick Capture: a scratchpad, visually distinct (amber) from filed notes */
.qc-box {
  border: 1px solid color-mix(in srgb, #d97706 35%, transparent);
  background: color-mix(in srgb, #fbbf24 14%, transparent);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  margin: 0.6rem 0;
}
.qc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.qc-label { font-size: 0.8rem; font-weight: 700; opacity: 0.85; }
.qc-status { font-size: 0.72rem; opacity: 0.6; }
.qc-box textarea {
  width: 100%; min-height: 4.5rem; padding: 0.5rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  background: Field; color: FieldText; font-size: 0.92rem; resize: vertical;
  font-family: inherit;
}
.qc-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.qc-actions button { padding: 0.4rem 0.8rem; border-radius: 8px; border: none; font-size: 0.85rem; font-weight: 600; }
#qcKeepBtn { background: #d97706; color: white; }
#qcClearBtn { background: color-mix(in srgb, CanvasText 10%, transparent); }

/* Flyer deal matches surfaced on the Shopping List */
.deal-summary {
  border: 1px solid color-mix(in srgb, #ea580c 35%, transparent);
  background: color-mix(in srgb, #ea580c 12%, transparent);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.deal-meta { font-size: 0.75rem; color: #ea580c; font-weight: 600; margin-top: 0.1rem; }