/* ==========================================================================
   Snackbox — "Cosy Cupboard" overhaul (Build 23)
   Load AFTER styles.css. Every rule here overrides styles.css by cascade
   order only — no !important except where styles.css already uses it.
   Sections are labelled C1–C14 to match the critique table in the brief.
   ========================================================================== */

/* ---------- Fonts (self-hosted so the PWA works offline) ---------------- */
@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Gaegu"; src: url("/fonts/gaegu-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- C3 / C4 Tokens: cocoa replaces black; contrast fixes ------------------------------------------------ */
:root {
  --paper: #f3e8d4;          /* was #efe4d2 — a touch warmer, more lamplit */
  --paper-light: #fbf4e6;
  --paper-deep: #e8d9bf;
  --cream: #fff9ef;
  --on-accent: #fff9ef;   /* text on tomato, cocoa and other dark fills, both themes */
  --ink: #3b2c22;            /* cocoa, was near-black #2f2922 */
  --cocoa: #4a3528;          /* all former black surfaces */
  --muted: #6b5a4a;          /* 5.4:1 on paper (was 4.4:1) */
  --line: #c9b79b;
  --fine-line: rgba(110, 84, 58, .2);
  --tomato: #b5523a;         /* white text now 5.0:1 (was 4.2:1) */
  --tomato-dark: #923f2c;
  --moss: #5b6f4c;
  --mustard: #d9a845;
  --mustard-ink: #6d5016;
  --r-s: 10px; --r-m: 14px; --r-l: 22px; --r-xl: 28px;
  --lift: 0 1px 0 rgba(255,255,255,.65) inset, 0 2px 6px rgba(74,53,40,.10);
  --shadow: 0 24px 60px rgba(74, 53, 40, .24);
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Gaegu", "Figtree", cursive;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- C2 Typography: three voices ----------------------------------
   display = labels on jars (Young Serif, single 400 weight — never bold it)
   body    = everything you read (Figtree)
   hand    = pencil marks: counts, eyebrows, little notes (Gaegu)        */
body { font: 16px/1.45 var(--font-body); }

.brand, .stock-heading p, .section-title h2, .compact-sheet > h2, .treat-name strong, .empty-state h3,
.sheet-header h2, .limit-sheet h2, .install-sheet h2, .catalogue-name strong,
.scan-result-product strong, .assortment-heading strong, .product-assortment-card > p strong,
.assortment-component-row > span, .settings-group h3, .profile-settings-button strong,
.profile-chooser > p, .profile-section .section-title h3, .profile-product-row strong,
.install-instructions strong, .reset-card strong {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em;
}
.sheet-header h2, .limit-sheet h2, .install-sheet h2, .compact-sheet > h2 { font-size: 27px; line-height: 1.12; }
.section-title h2 { font-size: 23px; }
.treat-name strong { font-size: 16.5px; line-height: 1.2; }

/* Counts use the display serif. (Gaegu was trialled here: its "1" is a bare
   stroke that reads as an apostrophe — "1 wishes" — so it is labels only.) */
.quantity-button, .large-stepper strong, .mini-stepper strong, .stepper output,
.assortment-total strong, .profile-stats strong {
  font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums;
}
.quantity-button { font-size: 22px; }
.large-stepper strong { font-size: 36px; }
.profile-stats strong { font-size: 26px; }
.stepper output, .mini-stepper strong { font-size: 19px; }

/* C12 Eyebrows: from shouty tracked caps to a handwritten note */
.eyebrow, .settings-kicker, .assortment-heading span, .product-assortment-card > p span {
  font: 700 19.5px/1.05 var(--font-hand); letter-spacing: 0; word-spacing: -.12em; text-transform: lowercase; color: var(--tomato-dark);
}
.setup-divider, .assortment-total span, .reset-card span { letter-spacing: .04em; font-size: 11.5px; }

/* Glyph buttons use the body face so + − ♥ are drawn consistently */
.consume-ring, .plus-button, .row-wish span, .wish-badge, .assortment-open,
.assortment-toggle span, .profile-settings-button > span:last-child {
  font-family: var(--font-body); font-weight: 600;
}

/* ---------- C5 Legibility floor (nothing under 12px that matters) ------- */
.treat-name small { font-size: 12.5px; }
.section-title #stockCount { font: 700 17px/1 var(--font-hand); word-spacing: -.12em; color: var(--muted); }
.shopping-intro { font-size: 13px; }
.wish-person { font-size: 11.5px; font-weight: 600; }
.quantity-card > span, .big-input > span, .snack-form label > span:first-child,
.scan-result-quantity > span { font-size: 13px; font-weight: 600; }
.quantity-card small, .profile-settings-button small, .profile-product-row small,
.catalogue-name small, .settings-note, .profile-chooser > small, .limit-note,
.scan-note, .setup-copy, .profile-empty { font-size: 12.5px; }
.profile-stats small { font-size: 11px; letter-spacing: .04em; }
.assortment-quantity small { font-size: 10px; }
.settings-group > p:not(.settings-kicker), .settings-sync div > p:not(.settings-kicker) { font-size: 13.5px; }

/* ---------- C14 Atmosphere: lamplight over paper -------------------------- */
html { background: var(--paper); }
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(130% 55% at 50% -8%, rgba(255, 238, 205, .85), rgba(255, 238, 205, 0) 62%),
    radial-gradient(120% 70% at 50% 115%, rgba(140, 98, 60, .10), rgba(140, 98, 60, 0) 60%),
    url("/paper-texture.svg");
}

/* ---------- C1 Brand lockup ----------------------------------------------
   Lynx head + box letter, both kept in their original black-ink style.  */
.brand { letter-spacing: -.02em; }

/* C14 Header summary: stop the 108px squeeze that wrapped it onto two lines */
.stock-heading p { font-size: 19px; max-width: none !important; }
.ledger-header, .primary-nav { border-bottom: 0; }
.heading-line { min-height: 48px; padding: 4px 0 2px; }

/* ---------- C7 Primary nav tiles: a real selected state ----------------- */
.primary-nav { gap: 14px; margin-top: 8px; padding-bottom: 6px; }
.primary-option { transition: transform .28s var(--spring), filter .2s ease; }
/* Tile artwork is left exactly as drawn; selection is shown by a lift and a pill beneath */
.primary-option.active { transform: translateY(-2px); filter: drop-shadow(0 6px 8px rgba(74,53,40,.2)); }
.primary-option.active::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 34px; height: 5px;
  border-radius: 99px; transform: translateX(-50%); background: var(--moss);
}
.primary-option.shopping-option.active::after { background: var(--tomato); }
.primary-option:hover { transform: translateY(-2px); filter: none; }
.view-count {
  top: -5px; right: -5px; min-width: 24px; height: 24px; border: 2.5px solid var(--paper);
  border-radius: 99px; background: var(--tomato); color: var(--on-accent);
  font: 600 12px/1 var(--font-body);
}
.view-window { padding-top: 26px; }

/* ---------- C9 Section headings: stitched rules, steadier symbols -------- */
.section-rule { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 12px); opacity: .9; }
.section-symbol.star { font-size: 21px; }
.box-symbol { border-radius: 4px; }

/* ---------- C9 Lists become trays on a shelf ---------------------------- */
.treat-list, .shopping-list, .profile-product-list {
  margin-top: 6px; padding: 2px 8px; border: 1px solid var(--fine-line); border-radius: var(--r-l);
  background: rgba(255, 249, 239, .62); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(74,53,40,.06);
}
.treat-row, .shopping-row, .profile-product-row { border-bottom: 1px dashed rgba(110, 84, 58, .22); }
.treat-row { grid-template-columns: 42px 54px minmax(0,1fr) 42px 40px 46px; gap: 4px; }

/* ---------- C8 Row controls: one shape family (round pebbles) ---------- */
.consume-ring {
  width: 32px; height: 32px; border: 1.5px solid var(--line); background: var(--cream);
  color: var(--muted); font-size: 20px; box-shadow: var(--lift);
}
.consume-button:hover .consume-ring { border-color: var(--tomato); color: var(--tomato); }
.consume-button:active .consume-ring { transform: scale(.86); background: var(--tomato); border-color: var(--tomato); color: var(--on-accent); }

.plus-button {
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; place-self: center;
  border: 1.5px solid #c49634; border-radius: 99px; background: #f6e3b4;
  color: var(--mustard-ink); font-size: 24px; line-height: 1; box-shadow: var(--lift);
  transition: transform .2s var(--spring), background .15s ease;
}
.plus-button:hover { background: #f2d996; }
.plus-button:active { transform: scale(.88); }
.treat-row.is-out .plus-button { background: var(--mustard); border-color: #b88a2c; color: #3e2d12; }

.row-wish span { width: 34px; height: 34px; border: 0; background: rgba(181, 82, 58, .09); color: var(--tomato); font-size: 19px; transition: transform .2s var(--spring); }
.row-wish[aria-pressed="true"] span { background: var(--tomato); color: var(--on-accent); box-shadow: 0 2px 6px rgba(146,63,44,.28); }
.row-wish:active span { transform: scale(.85); }
.wish-badge { border-color: var(--cream); }

/* C10 Medallions: soften platform emoji so iOS and Android look like one family */
.product-medallion { background: var(--paper-deep); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 -3px 6px rgba(110,84,58,.12); }
.product-fallback { filter: saturate(.55) sepia(.3) contrast(.95); font-size: 23px; }
.treat-row.is-out .product-medallion { opacity: .6; }

.mini-stepper, .stepper { border-radius: var(--r-m); background: var(--cream); border: 1.5px solid var(--line); overflow: hidden; }
.large-stepper { gap: 10px; }
.large-stepper button { border-radius: 99px; border: 1.5px solid var(--line); background: var(--cream); box-shadow: var(--lift); font-family: var(--font-body); }
.assortment-open { border-radius: 99px; border-color: #c49634; background: #f6e3b4; }

/* ---------- C6 Sheets, cards, buttons, inputs: soften every corner ----- */
.modal-backdrop { background: rgba(59, 44, 34, .46); backdrop-filter: blur(4px) saturate(.9); }
.sheet { border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background-color: var(--paper-light); }
.compact-sheet { border: 0; border-radius: var(--r-xl); }
.sheet-handle { width: 42px; height: 5px; border-radius: 99px; background: var(--line); }

.primary-button, .secondary-button { min-height: 52px; border-radius: var(--r-m); font: 800 16px/1.2 var(--font-body); }
.primary-button {
  border: 0; background: var(--tomato); color: var(--on-accent);
  box-shadow: 0 3px 0 var(--tomato-dark), 0 8px 18px rgba(146, 63, 44, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.primary-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tomato-dark); }
.primary-button:disabled { background: #b8aa94; box-shadow: none; }
.secondary-button { border: 1.5px solid var(--line); background: rgba(255, 249, 239, .55); }
.wish-sheet-button[aria-pressed="true"] { background: rgba(181, 82, 58, .1); }

.big-input input, .snack-form input, .snack-form select, .barcode-form input, .copy-field input {
  height: 50px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--cream);
}
.big-input input:focus, .snack-form input:focus, .snack-form select:focus, .barcode-form input:focus {
  border-color: var(--tomato); box-shadow: 0 0 0 4px rgba(181, 82, 58, .14);
}
.check-row { border-radius: var(--r-m); background: rgba(255, 249, 239, .5); }

/* C3 Segmented control: from a black slab to a soft recessed tray */
.add-modes { padding: 4px; gap: 4px; border: 0; border-radius: var(--r-m); background: var(--paper-deep); }
.add-mode { border: 0 !important; border-radius: var(--r-s); font-size: 14px; font-weight: 600; }
.add-mode.active { background: var(--cream); color: var(--ink); box-shadow: 0 1px 3px rgba(74,53,40,.16); }

/* C3 Former black surfaces → cocoa; C14 no-wrap buttons */
.barcode-form button, .copy-field button { border-radius: var(--r-m); background: var(--cocoa); color: var(--on-accent); white-space: nowrap; }
.scanner-frame { border: 0; border-radius: var(--r-l); background: radial-gradient(90% 80% at 50% 40%, #5b4232, var(--cocoa)); }
.scanner-placeholder { background: transparent; }
.scanner-placeholder small { color: #e3d2bd; }

.quantity-card, .product-assortment-card, .profile-chooser, .profile-stats, .install-instructions,
.reset-card, .scan-result, .profile-settings-button {
  border-radius: var(--r-l); background: rgba(255, 249, 239, .6); border-color: var(--fine-line);
}
.profile-stats { overflow: hidden; }
.edit-details { border-color: var(--fine-line); }
.welcome-icon, .limit-mark, .install-mark { border: 0; border-radius: var(--r-m); background: var(--paper-deep); }
.person-portrait { border: 3px solid var(--paper-light); box-shadow: 0 2px 8px rgba(74,53,40,.18); }
.person-portrait.active { border-color: var(--moss); box-shadow: 0 0 0 3px var(--paper-light), 0 4px 12px rgba(74,53,40,.22); }
.sync-alert { border-radius: 99px; padding: 5px 10px; font-size: 11px; }

/* ---------- C11 Toast: a note, not a blackout --------------------------- */
.toast {
  width: min(420px, calc(100% - 28px)); max-width: none; justify-content: space-between;
  bottom: calc(18px + env(safe-area-inset-bottom)); padding: 13px 14px 13px 18px;
  border-radius: var(--r-l); background: var(--cocoa); color: var(--on-accent);
  font-size: 14.5px; line-height: 1.35;
  transition: transform .32s var(--spring), opacity .18s ease;
}
.toast button {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 99px;
  background: rgba(255, 249, 239, .14); color: #ffd7c8; font: 800 14px/1 var(--font-body);
}
/* When a sheet is open, the toast moves to the top so it never covers inputs or the main button */
body:has(.sheet:not([hidden])) .toast { top: calc(14px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -16px); }
body:has(.sheet:not([hidden])) .toast.show { transform: translate(-50%, 0); }

/* ---------- C13 Motion: one orchestrated arrival ------------------------ */
@keyframes settle { from { opacity: 0; transform: translateY(10px); } }
.ledger-header { animation: settle .5s ease-out both; }
.primary-option { animation: settle .55s var(--spring) both; }
.primary-option:nth-child(1) { animation-delay: .08s; }
.primary-option:nth-child(2) { animation-delay: .16s; }
.primary-option:nth-child(3) { animation-delay: .24s; }
.view-window { animation: settle .5s ease-out .34s both; }
@keyframes sheet-in { from { transform: translate(-50%, 40px); opacity: 0; } }
.sheet { animation: sheet-in .32s var(--spring); }
.compact-sheet { animation: compact-in .3s var(--spring); }
@keyframes compact-in { from { transform: translate(-50%, 46%) scale(.97); opacity: 0; } }

/* ---------- Responsive re-tunes ----------------------------------------- */
@media (max-width: 620px) {
  .treat-row { grid-template-columns: 40px 48px minmax(0,1fr) 40px 36px 44px; }
  .treat-name strong { font-size: 15.5px; }
}
@media (max-width: 390px) {
  .treat-row { grid-template-columns: 38px 44px minmax(0,1fr) 38px 34px 42px; gap: 3px; }
  .treat-list, .shopping-list, .profile-product-list { padding-inline: 4px; }
  .plus-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .stock-heading p { font-size: 18px; }
  .treat-name strong { font-size: 15px; letter-spacing: -.012em; }
}
@media (max-width: 340px) {
  .treat-row { grid-template-columns: 34px 40px minmax(0,1fr) 32px 30px 38px; }
  .plus-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
}

/* ==========================================================================
   Build 25 — built from the three tiles: painted frames, tile paper,
   motifs cut from the artwork, exact-circle portraits, category art.
   ========================================================================== */

/* T1 Painted frames + tile paper on every tray ---------------------------- */
.treat-list, .shopping-list, .profile-product-list, .scan-result, .quantity-card {
  border: 16px solid transparent;
  border-image: url("/artwork/motifs/frame-moss.png") 26 / 16px stretch;
  border-radius: 18px;
  margin-top: 8px; padding: 0 2px;
  background: url("/artwork/motifs/paper-grain.jpg") center / 220px auto repeat, #f5eadb;
  background-clip: border-box; background-origin: border-box;
  box-shadow: none;
  filter: drop-shadow(0 4px 8px rgba(74, 53, 40, .08));
}
/* rows sit just inside the painted stroke */
.treat-list, .shopping-list, .profile-product-list { margin-inline: -4px; padding: 0 6px; }
#shoppingList, #profileWishlist { border-image-source: url("/artwork/motifs/frame-tomato.png"); }
.scan-result { border-image-source: url("/artwork/motifs/frame-mustard.png"); padding: 6px 4px; }
.quantity-card { padding: 4px; }
.treat-row:last-child, .shopping-row:last-child, .profile-product-row:last-child { border-bottom: 0; }
/* a tray with nothing in it shows no frame */
.treat-list:empty, .profile-product-list:empty { border: 0; background: none; filter: none; }

/* T2 Section symbols drawn from the tiles --------------------------------- */
.section-symbol { font-size: 0 !important; background: center / contain no-repeat; transform: none; border: 0; }
.section-symbol.box-symbol { width: 34px; height: 30px; transform: none; background-image: url("/artwork/motifs/crate-cut.png"); }
.section-symbol.star { width: 18px; height: 32px; background-image: url("/artwork/motifs/sprig.png"); transform: rotate(12deg); }
.section-symbol.heart { width: 26px; height: 28px; background-image: url("/artwork/motifs/heart.png"); transform: rotate(-6deg); }
.profile-star { font-size: 0; width: 14px; height: 26px; justify-self: center; background: url("/artwork/motifs/sprig.png") center / contain no-repeat; }
.pin-mark { font-size: 0; width: 12px; height: 22px; background: url("/artwork/motifs/sprig.png") center / contain no-repeat; }

/* T3 Empty and welcome states: painted vignettes with sprigs either side --- */
.empty-state { min-height: 170px; }
.empty-state span {
  display: block; width: 168px; height: 72px; margin: 0 auto; font-size: 0;
  background:
    url("/artwork/motifs/sprig.png") left 6px bottom 0 / auto 58px no-repeat,
    url("/artwork/motifs/sprig-flip.png") right 6px bottom 0 / auto 58px no-repeat,
    url("/artwork/motifs/crate-cut.png") center / auto 72px no-repeat;
}
#shoppingList .empty-state span {
  background:
    url("/artwork/motifs/sprig.png") left 22px bottom 0 / auto 54px no-repeat,
    url("/artwork/motifs/sprig-flip.png") right 22px bottom 0 / auto 54px no-repeat,
    url("/artwork/motifs/heart.png") center / auto 60px no-repeat;
}
.empty-state h3 { margin-top: 12px; font-size: 21px; }
.empty-state p { font-size: 13px; }
.welcome-icon { width: 96px; height: 82px; font-size: 0; background: url("/artwork/motifs/crate-cut.png") center / contain no-repeat; border-radius: 0; transform: rotate(-2deg); }

/* T4 Sparkles: the scan tile's little rays, used for moments worth noticing */
.scan-result > .eyebrow, .welcome-icon + .eyebrow { position: relative; padding-left: 22px; }
.scan-result > .eyebrow::before, .welcome-icon + .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 28px; transform: translateY(-50%);
  background: url("/artwork/motifs/sparkle-left.png") center / contain no-repeat;
}

/* T5 Portraits: files are now exact circles, so the frame hugs the painting */
.person-portrait, .settings-profile-portrait, .wish-person img { background: transparent; }
.person-portrait img, .settings-profile-portrait img { object-fit: cover; }

/* T6 Category art (drop PNGs into /artwork/categories/ — emoji shows until then) */
.product-medallion .category-art { width: 92%; height: 92%; object-fit: contain; filter: none; mix-blend-mode: normal; }
.product-medallion:has(.category-art) .product-fallback { display: none; }
.product-medallion:has(.category-art) { background: transparent; box-shadow: none; }

/* ==========================================================================
   Build 26 — shopping list that works on its own, evening theme, safekeeping
   ========================================================================== */

/* S1 Write-in field ---------------------------------------------------------- */
.list-add { display: flex; gap: 8px; margin: 10px 0 18px; }
.list-add input {
  flex: 1; min-width: 0; height: 50px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--cream); color: var(--ink);
}
.list-add input:focus { outline: 0; border-color: var(--tomato); box-shadow: 0 0 0 4px rgba(181, 82, 58, .14); }
.list-add button {
  padding: 0 20px; border: 0; border-radius: var(--r-m); background: var(--tomato); color: var(--on-accent);
  font: 800 15px/1 var(--font-body); box-shadow: 0 3px 0 var(--tomato-dark); cursor: pointer;
}
.list-add button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tomato-dark); }

.list-add input::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; }

/* S2 Restock / Fancies sub-headings ------------------------------------------ */
#shoppingPanel .list-section + .list-section { margin-top: 22px; }
.list-subtitle { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.list-subtitle h3 { margin: 0; font: 400 19px/1.2 var(--font-display); }
.list-subtitle small { color: var(--muted); font: 700 16px/1 var(--font-hand); word-spacing: -.12em; }
.list-subtitle .section-symbol.star { width: 14px; height: 26px; }
.list-subtitle .section-symbol.heart { width: 20px; height: 22px; }
#restockList { border-image-source: url("/artwork/motifs/frame-moss.png"); }

/* S3 List rows: Got it + remove -------------------------------------------- */
.shopping-row { grid-template-columns: 52px minmax(0,1fr) auto auto; }
.restock-row { grid-template-columns: 52px minmax(0,1fr) auto; }
.list-actions { display: flex; align-items: center; gap: 4px; }
.got-it {
  min-height: 38px; padding: 0 14px; border: 1.5px solid #c49634; border-radius: 99px;
  background: #f6e3b4; color: var(--mustard-ink); font: 800 13.5px/1 var(--font-body);
  box-shadow: var(--lift); cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--spring);
}
.got-it:active { transform: scale(.92); }
.list-remove {
  width: 34px; height: 34px; border: 0; border-radius: 99px; background: transparent;
  color: var(--muted); font: 600 20px/1 var(--font-body); cursor: pointer;
}
.list-remove:active { background: rgba(110, 84, 58, .12); }
@media (max-width: 390px) {
  .got-it { padding: 0 11px; font-size: 13px; }
  .shopping-people .wish-person span { display: none; }
}

/* S4 Toast with two buttons --------------------------------------------------- */
.danger-actions button { color: var(--tomato-dark); }
.toast-buttons { display: flex; gap: 6px; flex: 0 0 auto; }
#toastAction { background: var(--tomato); color: var(--on-accent); }

/* S5 Scan: match a written-in treat ----------------------------------------- */
.scan-match {
  display: grid; gap: 8px; margin: 12px 0 0; padding: 12px 14px;
  border: 1.5px dashed rgba(181, 82, 58, .45); border-radius: var(--r-m); background: rgba(181, 82, 58, .06);
}
.scan-match p { margin: 0; font: 400 16px/1.3 var(--font-display); }
.scan-match .secondary-button { min-height: 44px; }

/* S6 Settings: theme switch + backup ---------------------------------------- */
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; padding: 4px; border-radius: var(--r-m); background: var(--paper-deep); }
.theme-switch button { min-height: 42px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); font: 600 14px/1 var(--font-body); cursor: pointer; }
.theme-switch button.active { background: var(--cream); color: var(--ink); box-shadow: 0 1px 3px rgba(74,53,40,.16); }
.backup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.backup-actions .secondary-button { display: grid; place-items: center; min-height: 48px; padding: 0 10px; font-size: 14.5px; text-align: center; cursor: pointer; }
.file-button:focus-within { outline: 3px solid rgba(181,82,58,.28); outline-offset: 2px; }

/* ==========================================================================
   E Evening — the same room with the lamp turned down
   Applies when the phone is in dark mode (Auto) or Evening is chosen.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #2a1f18; --paper-light: #33261d; --paper-deep: #3f2f24; --cream: #3a2b21;
    --ink: #f3e6d0; --cocoa: #1c140f; --muted: #c9b59b; --line: #6d5845;
    --fine-line: rgba(243, 230, 208, .14);
    --tomato: #c9603f; --tomato-dark: #e08a6b; --on-accent: #fff4e6; --moss: #9db389; --mustard: #e2b555; --mustard-ink: #3e2d12;
    --lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(0,0,0,.35);
    --shadow: 0 24px 60px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="evening"] {
  --paper: #2a1f18; --paper-light: #33261d; --paper-deep: #3f2f24; --cream: #3a2b21;
  --ink: #f3e6d0; --cocoa: #1c140f; --muted: #c9b59b; --line: #6d5845;
  --fine-line: rgba(243, 230, 208, .14);
  --tomato: #c9603f; --tomato-dark: #e08a6b; --on-accent: #fff4e6; --moss: #9db389; --mustard: #e2b555; --mustard-ink: #3e2d12;
  --lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(0,0,0,.35);
  --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sheet { background-image: none; background-color: var(--paper-light); }
:root:not([data-theme="light"]) .product-medallion::after { opacity: 0; }
:root:not([data-theme="light"]), :root:not([data-theme="light"]) body { background-color: var(--paper); }
:root:not([data-theme="light"]) body { background-image:
  radial-gradient(130% 55% at 50% -8%, rgba(255, 196, 120, .14), rgba(255, 196, 120, 0) 62%),
  radial-gradient(120% 70% at 50% 115%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
:root:not([data-theme="light"]) .primary-option { filter: brightness(.94); }
:root:not([data-theme="light"]) .primary-option.active { filter: brightness(.98) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
:root:not([data-theme="light"]) .treat-list, :root:not([data-theme="light"]) .shopping-list, :root:not([data-theme="light"]) .profile-product-list, :root:not([data-theme="light"]) .scan-result, :root:not([data-theme="light"]) .quantity-card {
  background: linear-gradient(rgba(42, 31, 24, .86), rgba(42, 31, 24, .86)), url("/artwork/motifs/paper-grain.jpg") center / 220px auto repeat, #2f231b;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}
:root:not([data-theme="light"]) .treat-row, :root:not([data-theme="light"]) .shopping-row, :root:not([data-theme="light"]) .profile-product-row { border-bottom-color: rgba(243, 230, 208, .12); }
:root:not([data-theme="light"]) .product-medallion { background: #4a382b; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.06); }
:root:not([data-theme="light"]) .consume-ring { background: var(--cream); border-color: var(--line); color: var(--muted); }
:root:not([data-theme="light"]) .plus-button, :root:not([data-theme="light"]) .got-it, :root:not([data-theme="light"]) .assortment-open { background: #5a4520; border-color: #a9822f; color: #f6dfa6; }
:root:not([data-theme="light"]) .treat-row.is-out .plus-button { background: var(--mustard); color: #2b1f0c; }
:root:not([data-theme="light"]) .row-wish span { background: rgba(201, 96, 63, .16); color: #e98b6a; }
:root:not([data-theme="light"]) .row-wish[aria-pressed="true"] span { background: var(--tomato); color: #fff4e6; }
:root:not([data-theme="light"]) .primary-button, :root:not([data-theme="light"]) .list-add button, :root:not([data-theme="light"]) #toastAction { color: #fff4e6; }
:root:not([data-theme="light"]) .secondary-button { background: rgba(255, 244, 230, .05); border-color: var(--line); color: var(--ink); }
:root:not([data-theme="light"]) .toast { background: #120c08; color: #f3e6d0; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
:root:not([data-theme="light"]) .scanner-frame { background: radial-gradient(90% 80% at 50% 40%, #3a2a1f, #120c08); }
:root:not([data-theme="light"]) .modal-backdrop { background: rgba(10, 7, 5, .62); }
:root:not([data-theme="light"]) .check-row, :root:not([data-theme="light"]) .profile-settings-button, :root:not([data-theme="light"]) .profile-chooser, :root:not([data-theme="light"]) .profile-stats, :root:not([data-theme="light"]) .install-instructions, :root:not([data-theme="light"]) .reset-card { background: rgba(255, 244, 230, .04); }
:root:not([data-theme="light"]) .empty-state span, :root:not([data-theme="light"]) .welcome-icon { filter: brightness(.92); }
:root:not([data-theme="light"]) .product-photo { mix-blend-mode: normal !important; filter: saturate(.8) brightness(.92) !important; border-radius: 50%; }
:root:not([data-theme="light"]) .wish-badge { border-color: var(--paper-light); }
:root:not([data-theme="light"]) .view-count { border-color: var(--paper); }
}
:root[data-theme="evening"], :root[data-theme="evening"] body { background-color: var(--paper); }
:root[data-theme="evening"] body { background-image:
  radial-gradient(130% 55% at 50% -8%, rgba(255, 196, 120, .14), rgba(255, 196, 120, 0) 62%),
  radial-gradient(120% 70% at 50% 115%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
:root[data-theme="evening"] .primary-option { filter: brightness(.94); }
:root[data-theme="evening"] .primary-option.active { filter: brightness(.98) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
:root[data-theme="evening"] .treat-list, :root[data-theme="evening"] .shopping-list, :root[data-theme="evening"] .profile-product-list, :root[data-theme="evening"] .scan-result, :root[data-theme="evening"] .quantity-card {
  background: linear-gradient(rgba(42, 31, 24, .86), rgba(42, 31, 24, .86)), url("/artwork/motifs/paper-grain.jpg") center / 220px auto repeat, #2f231b;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}
:root[data-theme="evening"] .treat-row, :root[data-theme="evening"] .shopping-row, :root[data-theme="evening"] .profile-product-row { border-bottom-color: rgba(243, 230, 208, .12); }
:root[data-theme="evening"] .product-medallion { background: #4a382b; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.06); }
:root[data-theme="evening"] .consume-ring { background: var(--cream); border-color: var(--line); color: var(--muted); }
:root[data-theme="evening"] .plus-button, :root[data-theme="evening"] .got-it, :root[data-theme="evening"] .assortment-open { background: #5a4520; border-color: #a9822f; color: #f6dfa6; }
:root[data-theme="evening"] .treat-row.is-out .plus-button { background: var(--mustard); color: #2b1f0c; }
:root[data-theme="evening"] .row-wish span { background: rgba(201, 96, 63, .16); color: #e98b6a; }
:root[data-theme="evening"] .row-wish[aria-pressed="true"] span { background: var(--tomato); color: #fff4e6; }
:root[data-theme="evening"] .primary-button, :root[data-theme="evening"] .list-add button, :root[data-theme="evening"] #toastAction { color: #fff4e6; }
:root[data-theme="evening"] .secondary-button { background: rgba(255, 244, 230, .05); border-color: var(--line); color: var(--ink); }
:root[data-theme="evening"] .toast { background: #120c08; color: #f3e6d0; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
:root[data-theme="evening"] .scanner-frame { background: radial-gradient(90% 80% at 50% 40%, #3a2a1f, #120c08); }
:root[data-theme="evening"] .modal-backdrop { background: rgba(10, 7, 5, .62); }
:root[data-theme="evening"] .check-row, :root[data-theme="evening"] .profile-settings-button, :root[data-theme="evening"] .profile-chooser, :root[data-theme="evening"] .profile-stats, :root[data-theme="evening"] .install-instructions, :root[data-theme="evening"] .reset-card { background: rgba(255, 244, 230, .04); }
:root[data-theme="evening"] .empty-state span, :root[data-theme="evening"] .welcome-icon { filter: brightness(.92); }
:root[data-theme="evening"] .product-photo { mix-blend-mode: normal !important; filter: saturate(.8) brightness(.92) !important; border-radius: 50%; }
:root[data-theme="evening"] .wish-badge { border-color: var(--paper-light); }
:root[data-theme="evening"] .view-count { border-color: var(--paper); }
:root[data-theme="evening"] .sheet { background-image: none; background-color: var(--paper-light); }
:root[data-theme="evening"] .product-medallion::after { opacity: 0; }


/* ==========================================================================
   Build 27 — one box list, a picker that matches the box, scan-first logging,
   evening logo on a paper label
   ========================================================================== */

/* R1 Regulars live in the box list, marked with a sprig ------------------- */
.treat-row.is-regular .treat-name strong::before {
  content: ""; display: inline-block; width: 9px; height: 16px; margin-right: 6px; vertical-align: -1px;
  background: url("/artwork/motifs/sprig.png") center / contain no-repeat; transform: rotate(10deg);
}
.treat-row.is-regular.is-out { opacity: .82; }
.treat-row.is-regular.is-out .treat-name small { font-size: 0; white-space: normal; overflow: visible; }
.treat-row.is-regular.is-out .treat-name small::after { content: "Run out \B7  on the list"; font-size: 12.5px; color: var(--tomato-dark); }
.pick-row .treat-name small { white-space: normal; }

/* R2 The shared row: Past treats and the shopping picker use the box layout */
.pick-row { grid-template-columns: 50px minmax(0,1fr) 40px 46px; gap: 4px; }
.pick-row .product-medallion { margin-left: 4px; }
.plus-button.is-done { background: transparent; border-color: var(--moss); color: var(--moss); box-shadow: none; cursor: default; }
.pick-new .treat-name { cursor: default; }
.pick-new .treat-name strong { color: var(--tomato-dark); }
.catalogue-results, .picker-list { max-height: min(56vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.catalogue-results { margin-top: 12px; }
.catalogue-empty { padding: 26px 14px; color: var(--muted); text-align: center; font-size: 13px; }

/* R3 Add to the list ----------------------------------------------------- */
.list-picker { margin: 10px 0 18px; }
.picker-toggle {
  width: 100%; min-height: 50px; border: 1.5px dashed rgba(181, 82, 58, .55); border-radius: var(--r-m);
  background: rgba(181, 82, 58, .06); color: var(--tomato-dark); font: 800 15.5px/1 var(--font-body); cursor: pointer;
}
.picker-toggle[aria-expanded="true"] { border-style: solid; background: var(--cream); color: var(--ink); }
.picker-panel { margin-top: 10px; }
.picker-panel input {
  width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-m);
  background: var(--cream); color: var(--ink);
}
.picker-panel input:focus { outline: 0; border-color: var(--tomato); box-shadow: 0 0 0 4px rgba(181, 82, 58, .14); }

/* R4 Log treats: two tabs, the name form as a quiet fallback ------------ */
.add-modes { grid-template-columns: repeat(2, 1fr); }
.text-link {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: transparent;
  color: var(--tomato-dark); font: 700 14px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.manual-intro { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-m); background: rgba(217, 168, 69, .16); color: var(--ink); font-size: 14px; line-height: 1.45; }

/* R5 Evening logo: the original ink logo, on a paper label */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .brand-lockup {
  padding: 6px 14px 6px 8px; border-radius: 14px;
  background: #f1e3c8 url("/artwork/motifs/paper-grain.jpg") center / 220px auto;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .35);
}
:root:not([data-theme="light"]) .brand { color: #3b2c22; }
:root:not([data-theme="light"]) .brand-head, :root:not([data-theme="light"]) .box-letter img { filter: grayscale(1) contrast(1.08); }
}
:root[data-theme="evening"] .brand-lockup {
  padding: 6px 14px 6px 8px; border-radius: 14px;
  background: #f1e3c8 url("/artwork/motifs/paper-grain.jpg") center / 220px auto;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .35);
}
:root[data-theme="evening"] .brand { color: #3b2c22; }
:root[data-theme="evening"] .brand-head, :root[data-theme="evening"] .box-letter img { filter: grayscale(1) contrast(1.08); }