/* Groceries: a paper list on the fridge. Aisles are pencilled headings with a leafy green rule; ticked items drop
   into the basket below, crossed out. */
:root { --page: #f1f4ec; --card: #ffffff; --ink: #1a2014; --soft: #5a6450; --line: #d6ddcc; --field: #e9eee2; --act: #3f7d20; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #11140e; --card: #1a1e16; --ink: #ecf1e5; --soft: #a5af9a; --line: #2f3828; --field: #11140e; --act: #9ad977; --on-act: #102507; --stop: #ff8a80; color-scheme: dark; }
}
#list { display: grid; gap: 16px; }
#list h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--act); border-bottom: 2px solid var(--act); padding-bottom: 4px; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); min-height: 52px; }
.items .check { flex: 1; min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.items select { width: auto !important; min-height: 40px !important; font-size: 14px !important; padding: 4px 30px 4px 8px !important; border-bottom-width: 1px !important; color: var(--soft); max-width: 42vw; }
#basket .check span { text-decoration: line-through; color: var(--soft); }
.incoming { border: 2px solid var(--act); }