/* Warm, editorial personal bar and recipe discovery styling. Loaded after web.css. */
:root {
  --redesign-bg: #17120f;
  --redesign-panel: #241a14;
  --redesign-cream: #f4eadb;
  --redesign-muted: #c0b2a2;
  --redesign-rust: #a64c23;
  --redesign-line: rgb(245 230 207 / 13%);
  --shopping-blue: #26c6da;
  --shopping-line: #24545a;
  --shopping-fill: #112428;
  --redesign-serif: Georgia, "Times New Roman", serif;
  --page-gutter: clamp(14px, 4vw, 34px);
}
body { color-scheme: dark; background: var(--redesign-bg); color: var(--redesign-cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { width: min(100%, 920px); background: linear-gradient(180deg, #221914 0%, #19130f 38rem, #17120f 100%); box-shadow: 0 0 58px #0008; }
.topbar {
  position: sticky;
  z-index: 8;
  top: 0;
  height: calc(52px + env(safe-area-inset-top));
  gap: 7px;
  padding: env(safe-area-inset-top) clamp(8px, 2.2vw, 18px) 0;
  border-bottom: 1px solid rgb(255 241 220 / 9%);
  background: #35241d;
  box-shadow: 0 4px 18px #08050366;
}
.topbar #backToBar { display: none; }
.header-brand {
  order: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 96px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--redesign-cream);
  text-align: left;
  cursor: pointer;
}
.header-brand strong { font: 700 24px/1 var(--redesign-serif); letter-spacing: -.045em; }
.header-brand small { margin-top: 4px; color: #d4b89a; font: 700 7px/1.1 Inter, ui-sans-serif, sans-serif; letter-spacing: .15em; }
.topbar #menuButton,
.topbar #tutorialButton,
.topbar #favoritesButton { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #f7eddf; }
.topbar #menuButton svg,
.topbar #tutorialButton svg,
.topbar #favoritesButton svg { width: 22px; height: 22px; }
.topbar #favoritesButton.header-shopping { position: relative; color: var(--shopping-blue); }
.header-shopping-count { position: absolute; top: 1px; right: 0; display: grid; place-items: center; min-width: 17px; height: 17px; padding-inline: 3px; border-radius: 10px; background: var(--shopping-blue); color: #092024; font: 750 10px/1 ui-sans-serif, sans-serif; }
.topbar .toolbar-search {
  order: 2;
  display: flex;
  flex: 1 1 180px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgb(245 230 207 / 16%);
  border-radius: 22px;
  background: rgb(17 12 9 / 26%);
}
.topbar #recipeSearch {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--redesign-cream);
  font: inherit;
  font-size: 12px;
}
.topbar #recipeSearch::placeholder { color: #cbb9a6; }
.toolbar-search > svg { width: 18px; height: 18px; color: #ead4be; }
.topbar #tutorialButton,
.topbar #favoritesButton { order: 3; }
body[data-screen="auth"] .topbar::before { display: none; }
body[data-screen="auth"] .topbar .header-brand { display: flex; }
body[data-screen="auth"] .topbar .toolbar-search { display: none; }
body[data-screen="recipes"] #menuButton { display: flex; }
.topbar .icon-button:focus-visible,
.header-brand:focus-visible,
.quick-add-chip:focus-visible,
.capture-action:focus-visible,
.recipes-action:focus-visible,
.filter-strip button:focus-visible,
.discovery-card button:focus-visible,
.nearby-cta:focus-visible {
  outline: 2px solid #e0ad87;
  outline-offset: 3px;
}
/* My bar: photo hero, capture choices, quick add, owned ingredients and CTA. */
.bar-screen {
  display: block;
  min-height: calc(100dvh - 52px - env(safe-area-inset-top));
  padding: 0 var(--page-gutter) calc(38px + env(safe-area-inset-bottom));
}
body[data-screen="bar"] .bar-screen { padding-top: 0; padding-bottom: calc(38px + env(safe-area-inset-bottom)); }
.bar-actions {
  container-type: normal;
  position: relative;
  display: flex;
  width: calc(100% + 2 * var(--page-gutter));
  min-height: 0;
  flex-direction: column;
  align-items: center;
  margin: 0 calc(-1 * var(--page-gutter));
  padding: 0 var(--page-gutter) 17px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--redesign-line);
}
.bar-actions::before,
.bar-actions::after { position: absolute; z-index: -1; inset: 0; content: ""; }
.bar-actions::before { z-index: -2; background: url("assets/background.webp") 69% 48% / cover no-repeat; opacity: 1; }
.bar-actions::after { background:
    linear-gradient(90deg, #1a120fe7 0%, #1a120fc1 38%, #1a120f12 100%),
    linear-gradient(0deg, #1a120fe9 0%, transparent 46%, #1a120f18 100%); }
.scan-hero { display: flex; min-height: 0; flex-direction: column; justify-content: flex-end; padding: 24px 0 14px; }
.hero-copy { max-width: 610px; }
.hero-copy h1 { max-width: 480px; margin: 0 0 12px; color: #fbf0df; font: 400 clamp(30px, 7.7vw, 54px)/1.01 var(--redesign-serif); letter-spacing: -.05em; text-wrap: balance; text-shadow: 0 2px 20px #120c09b8; }
.hero-copy p { max-width: 380px; margin: 0; color: #ead9c7; font-size: 14px; line-height: 1.5; text-shadow: 0 1px 9px #130d0ad9; }
.bar-actions .action-controls { display: grid; grid-template-columns: minmax(76px, .8fr) minmax(150px, 1.6fr) minmax(76px, .8fr); align-items: center; gap: 7px; width: min(100%, 510px); margin: 0 auto; }
.bar-actions .capture-action.magic-border {
  display: flex;
  min-width: 44px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid transparent !important;
  border-radius: 28px;
  background:
    linear-gradient(#2b1e17, #2b1e17) padding-box,
    linear-gradient(115deg, #4a9cff9c, #f05b709c, #4a9cff9c) border-box !important;
  background-size: auto, 100% 100%;
  color: #f3e4d4;
  font: 600 10px/1.1 Inter, ui-sans-serif, sans-serif;
  box-shadow: 0 0 7px #4a9cff22, 0 0 7px #f05b7022, 0 5px 14px #08050355;
  animation: none;
}
.bar-actions .capture-action.magic-border:hover { filter: brightness(1.12); }
.bar-actions .capture-action.magic-border > .capture-action-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; padding: 0; background: transparent; }
.bar-actions .capture-action.magic-border > .capture-action-icon > span,
.bar-actions .capture-action.magic-border > .capture-action-icon svg {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.bar-actions .capture-action.magic-border > .capture-action-copy {
  display: flex;
  width: auto;
  height: auto;
  min-width: 0;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: transparent;
  text-align: left;
}
.bar-actions .capture-action.magic-border .capture-action-copy small { color: #f6e8d8; font-size: 10px; font-weight: 700; line-height: 1.1; }
.bar-actions .capture-action-copy > span,
.bar-actions .capture-action-description { display: none; }
.bar-actions .camera-primary.magic-border {
  min-height: 56px;
  gap: 9px;
  border-color: transparent !important;
  background:
    linear-gradient(#a64c23, #a64c23) padding-box,
    linear-gradient(115deg, #4a9cffc8, #f05b70c8, #4a9cffc8) border-box !important;
  color: #fff5e9;
  box-shadow: 0 0 12px #559ce844, 0 0 12px #f05b703c, 0 7px 20px #10090580;
}
.bar-actions .camera-primary.magic-border .capture-action-copy small { font-size: 16px; }
.bar-actions .camera-primary.magic-border > .capture-action-icon,
.bar-actions .camera-primary.magic-border > .capture-action-icon > span,
.bar-actions .camera-primary.magic-border > .capture-action-icon svg {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}
.bar-actions #micAction.magic-border.is-recording { background:
    linear-gradient(#842d28, #842d28) padding-box,
    linear-gradient(115deg, #4a9cff9c, #f05b709c, #4a9cff9c) border-box !important; }
.bar-actions #micStatus { margin: 8px 0 0; color: #f3dfcb; }
.bar-actions #micStatus:empty { display: none; }
.quick-add { padding: 16px 0 2px; }
.quick-add-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #cbb7a2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.quick-add-heading::before,
.quick-add-heading::after { height: 1px; flex: 1 1 auto; content: ""; background: linear-gradient(90deg, transparent, #8b6c53); }
.quick-add-heading::after { transform: scaleX(-1); }
.quick-add-chips { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.quick-add-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 3px;
}
.quick-add-row::-webkit-scrollbar { display: none; }
.quick-add-chip.magic-border {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  overflow: hidden;
  border: 1px solid transparent !important;
  border-radius: 24px;
  background:
    linear-gradient(#2e211a, #2e211a) padding-box,
    linear-gradient(115deg, #4a9cff70, #f05b7070, #4a9cff70) border-box !important;
  background-size: auto, 100% 100%;
  color: #f1e4d4;
  font: 600 13px/1.2 Inter, ui-sans-serif, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 5px #4a9cff18, 0 0 5px #f05b7018;
  animation: none;
}
.quick-add-chip.magic-border[aria-pressed="true"] {
  background:
    linear-gradient(#563820, #563820) padding-box,
    linear-gradient(115deg, #db955e, #efb07b, #db955e) border-box !important;
  color: #ffead4;
  box-shadow: 0 0 8px #e9955a40;
}
.bar-screen .bar-panel { margin-top: 22px; padding: 0 0 19px; border-bottom: 1px solid var(--redesign-line); }
.bar-screen .lane-heading,
.bar-screen .purchase-heading { margin: 0 0 10px; color: #e7d6c3; font: 700 13px/1.35 Inter, ui-sans-serif, sans-serif; }
.bar-screen .chip-row { min-height: 38px; border-color: #76513c; background: #39271d; color: #f1dfcd; }
.bar-screen .chip-label { min-height: 36px; color: #f1dfcd; }
.bar-screen .chip-edit,
.bar-screen .chip-remove { color: #e9c5a4; }
.bar-screen .purchase-panel { margin-top: 16px; padding: 14px; border-color: var(--redesign-line); border-radius: 14px; background: #231a15; }
.bar-screen .purchase-row { background: #2d211a; border-color: #4b382c; }
.bar-screen .purchase-add { background: #493328; color: #e7ad82; }
.bar-recipe-actions {
  position: static;
  z-index: auto;
  left: auto;
  bottom: auto;
  width: 100%;
  margin: 21px 0 0;
  padding: 0;
  transform: none;
  pointer-events: auto;
  background: transparent;
}
.bar-recipe-actions .recipe-action-wrap { width: min(100%, 480px); margin: 0 auto; }
.bar-recipe-actions .recipes-action {
  width: 100%;
  min-height: 58px;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: #e0b481;
  color: #2a1a10;
  font-size: 16px;
  font-weight: 650;
  box-shadow: 0 3px 10px #08050333;
  animation: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.bar-recipe-actions .recipes-action:not(:disabled):hover { background: #ecc593; box-shadow: 0 5px 14px #08050344; }
.bar-recipe-actions .recipes-action:not(:disabled):active { background: #d3a36d; box-shadow: 0 1px 4px #08050333; }
.bar-recipe-actions .recipes-action:disabled {
  border-color: #5b514a;
  background: #38312d;
  color: #a99e94;
  box-shadow: none;
}
.bar-recipe-actions .recipe-action-label { font-weight: inherit; }
.bar-recipe-actions .recipe-count-label { min-width: 28px; min-height: 26px; flex: 0 0 auto; padding: 0 8px; border-radius: 13px; background: #2a1a1014; font-size: 12px; }
.bar-recipe-actions .recipe-action-description { margin: 8px 6px 0; color: #c2b2a3; font-size: 12px; line-height: 1.4; text-align: center; }
/* Shared recipe hero, filter row and compact discovery list. */
body[data-screen="recipes"] { background: #17120f; }
body[data-screen="recipes"] .app-shell { background: linear-gradient(180deg, #211813, #17120f 36rem); box-shadow: none; }
body[data-screen="recipes"][data-recipe-view="results"],
body[data-screen="recipes"][data-recipe-view="results"] .app-shell { background: #17120f; }
body[data-screen="recipes"] #recipeScreen { min-height: calc(100dvh - 52px - env(safe-area-inset-top)); padding: 0 0 calc(38px + env(safe-area-inset-bottom)); }
body[data-screen="recipes"] #backToBar { display: none; }
body[data-recipe-view="results"] .tabs { display: none; }
.recipe-hero { position: relative; display: flex; min-height: 0; flex-direction: column; justify-content: flex-end; padding: 13px clamp(17px, 4vw, 34px) 12px; overflow: hidden; isolation: isolate; }
.recipe-hero::before,
.recipe-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; }
.recipe-hero::before { z-index: -2; background: url("assets/background.webp") center 45% / cover no-repeat; opacity: .66; }
.recipe-hero::after { background: linear-gradient(90deg, #1a120fe9 0%, #1a120fb4 56%, #1a120f24 100%), linear-gradient(0deg, #1b130f 0%, transparent 100%); }
.recipe-hero h1 { max-width: 610px; margin: 0 0 7px; color: #fbf0df; font: 400 clamp(30px, 6vw, 42px)/1.02 var(--redesign-serif); letter-spacing: -.05em; text-wrap: balance; }
.recipe-hero p { margin: 0; color: #e1cdb9; font-size: 12px; }
body[data-screen="recipes"] .discovery { display: none; }
body[data-screen="recipes"] .tabs { position: sticky; z-index: 5; top: calc(52px + env(safe-area-inset-top)); min-height: 46px; margin: 0; background: #35241d; }
body[data-screen="recipes"] .recipe-section { margin: 0; padding: 0; }
body[data-screen="recipes"] .filter-strip {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 13px 16px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body[data-screen="recipes"] .filter-strip::-webkit-scrollbar { display: none; }
body[data-screen="recipes"] #allFilters,
body[data-screen="recipes"] #resultsFavorites,
body[data-screen="recipes"] #featuredFilter button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid #78543e;
  border-radius: 22px;
  background: #2c2019;
  color: #ead9c8;
  font: 650 12px/1.15 Inter, ui-sans-serif, sans-serif;
  white-space: nowrap;
}
body[data-screen="recipes"] #allFilters[aria-pressed="true"],
body[data-screen="recipes"] #resultsFavorites[aria-pressed="true"],
body[data-screen="recipes"] #featuredFilter button[aria-pressed="true"] {
  border-color: #dfa77d;
  background: #563a2b;
  color: #ffead5;
}
body[data-screen="recipes"] #allFilters.magic-border[aria-pressed="true"] { --magic-fill: #a64c23; }
body[data-screen="recipes"] #resultsFavorites.magic-border { --magic-fill: #211812; }
body[data-screen="recipes"] #featuredFilter button svg { width: 16px; height: 16px; }
body[data-screen="recipes"] #featuredFilter { display: flex; flex: 0 0 auto; gap: 7px; }
body[data-screen="recipes"] #tagFilter,
body[data-screen="recipes"] #glassFilter { display: none !important; }
body[data-screen="recipes"] .library-count { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; color: #baaa99; font-size: 11px; }
body[data-screen="recipes"] #listTitle { margin: 0; color: #f5e8d7; font: 400 25px/1.15 var(--redesign-serif); text-transform: none; }
body[data-screen="recipes"] #recipeStatus { min-height: 17px; margin: 0; color: #baaa99; font-size: 11px; }
body[data-screen="recipes"] #recipeList,
body[data-screen="recipes"] #oneMoreRecipeList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 8px;
  margin: 8px 12px 18px;
  padding: 0;
  overflow: visible;
}
.app-shell #recipeScreen .discovery-card {
  display: grid;
  grid-template-columns: minmax(64px, 20%) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 8px;
  border: 1px solid rgb(223 192 162 / 14%);
  border-radius: 13px;
  background: linear-gradient(100deg, #100d0b, #1e1712 48%, #271c16);
  color: #f2e4d4;
  box-shadow: 0 5px 16px #08050345;
}
.app-shell #recipeScreen .discovery-art {
  display: block;
  align-self: stretch;
  min-width: 0;
  min-height: 60px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, #49372a, #100d0b 80%);
  cursor: pointer;
}
.app-shell #recipeScreen .discovery-art .recipe-art { display: grid; width: 100%; height: 100%; min-height: 60px; place-items: center; margin: 0; padding: 0; background: transparent; }
.app-shell #recipeScreen .discovery-art .recipe-art img,
.app-shell #recipeScreen .discovery-art .recipe-art svg { width: 100%; height: 100%; min-height: 60px; object-fit: contain; filter: none; }
.app-shell #recipeScreen .discovery-body { display: flex; min-width: 0; flex-direction: column; align-items: stretch; }
.app-shell #recipeScreen .discovery-visual { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 6px; }
.app-shell #recipeScreen .discovery-visual .discovery-art { flex: 1 1 auto; min-height: 0; }
.app-shell #recipeScreen .discovery-heading { position: relative; display: flex; min-height: 40px; align-items: flex-start; gap: 3px; padding-right: 68px; }
.app-shell #recipeScreen .discovery-heading .recipe-open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 1px 0 4px;
  border: 0;
  background: transparent;
  color: #fbefdf;
  text-align: left;
  cursor: pointer;
}
.app-shell #recipeScreen .discovery-heading h3 { margin: 0; font: 600 clamp(18px, 4.1vw, 20px)/1.12 var(--redesign-serif); letter-spacing: -.015em; text-transform: none; }
.app-shell #recipeScreen .discovery-favorite,
.app-shell #recipeScreen .recipe-chevron {
  position: absolute;
  top: -3px;
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #cfb59c;
  cursor: pointer;
}
.app-shell #recipeScreen .discovery-favorite { right: 32px; }
.app-shell #recipeScreen .one-away-card .discovery-heading { padding-right: 68px; }
.app-shell #recipeScreen .discovery-favorite[aria-pressed="true"] { color: #e0b269; }
.app-shell #recipeScreen .discovery-favorite[aria-pressed="true"] svg { fill: currentColor; }
.app-shell #recipeScreen .recipe-chevron { right: -7px; }
.app-shell #recipeScreen .recipe-chevron svg { width: 17px; height: 17px; }
.app-shell #recipeScreen .recipe-description { margin: 0 0 5px; color: #c5b5a4; font-size: 11px; line-height: 1.4; }
.app-shell #recipeScreen .recipe-ingredient-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.app-shell #recipeScreen .recipe-ingredient-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  gap: 4px;
  padding: 2px 5px 2px 3px;
  border: 1px solid rgb(223 192 162 / 12%);
  border-radius: 14px;
  background: #35271f;
  color: #e8d7c5;
  font-size: 10px;
  line-height: 1.15;
}
.app-shell #recipeScreen .recipe-ingredient-chip .ingredient-symbol { display: grid; width: 16px; height: 16px; place-items: center; color: var(--ingredient-color, #d9a67f); }
.app-shell #recipeScreen .recipe-ingredient-chip .ingredient-symbol svg { width: 14px; height: 14px; }
.app-shell #recipeScreen .missing-ingredient { margin: 2px 0 7px; color: var(--shopping-blue); font-size: 11px; font-weight: 700; }
.app-shell #recipeScreen .nearby-row { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgb(223 192 162 / 12%); }
.app-shell #recipeScreen .nearby-info { flex: 1 1 auto; min-width: 0; }
.app-shell #recipeScreen .nearby-status {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: #c4b2a0;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.app-shell #recipeScreen .nearby-status svg { width: 14px; height: 14px; flex: 0 0 14px; }
.app-shell #recipeScreen .nearby-cta {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid #97664b;
  border-radius: 22px;
  background: #422d22;
  color: #f0c39f;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.app-shell #recipeScreen .nearby-cta.magic-border { --magic-fill: #402c20; animation-duration: 4.8s; }
.app-shell #recipeScreen .nearby-disclosure { display: block; margin-top: 3px; color: #a79684; font-size: 9px; line-height: 1.25; }
.app-shell #recipeScreen .nearby-disclosure[hidden] { display: none; }
body[data-screen="recipes"] #oneMoreSection { margin: 18px 12px 0; padding-top: 14px; border-top: 1px solid var(--redesign-line); }
body[data-screen="recipes"] #oneMoreSection .one-away-heading { margin: 0 0 4px; color: #f0deca; font: 400 25px/1.15 var(--redesign-serif); }
body[data-screen="recipes"] #oneMoreSection .one-away-description { margin: 0 0 10px; color: #baa999; font-size: 12px; }
body[data-screen="recipes"] #oneMoreButton { display: none; }
body[data-screen="recipes"] #showMore {
  display: block;
  width: calc(100% - 32px);
  min-height: 44px;
  margin: 8px 16px 20px;
  border: 1px solid #76523c;
  border-radius: 24px;
  background: #2c2019;
  color: #ead8c5;
  font: 650 13px Inter, ui-sans-serif, sans-serif;
}
body[data-screen="recipes"] .recipe-hero { display: flex; }
.discovery-footer { margin: 15px 16px 0; padding: 13px 0 4px; border-top: 1px solid var(--redesign-line); color: #a99988; font: 12px/1.45 Inter, ui-sans-serif, sans-serif; text-align: center; }
body[data-screen="recipes"] .recipe-section .section-head > :is(#importButton, .footer-links) { display: none; }
.menu-panel { background: #211711; border-color: #554033; }
.menu-panel button:hover,
.menu-panel a:hover { background: #39281e; }
.menu-panel > button,
.menu-panel > a,
.menu-panel #accountButton {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--redesign-cream);
  font: inherit;
  text-align: left;
}
.menu-panel > :is(button, a) > [data-icon] { display: grid; place-items: center; flex: 0 0 24px; }
.menu-panel > :is(button, a) svg,
.menu-panel #accountButton svg { width: 24px; height: 24px; margin: 0; }
.menu-panel .menu-label { flex: 1 1 auto; min-width: 0; }
.menu-panel > .menu-bottle-link { margin-block: 6px; background: #39281e; font-size: 14px; line-height: 1.4; }
.menu-panel > .menu-bottle-link > :last-child { flex: none; color: #7cecf1; }
.menu-panel > .menu-bottle-link:focus-visible { outline: 2px solid #7cecf1; outline-offset: -2px; }
.menu-panel #menuShoppingCount { flex: 0 0 auto; margin-left: auto; }
.menu-panel #accountButton { margin-top: 8px; background: #39281e; font-weight: 700; }
.dialog { background: #241a14; color: var(--redesign-cream); }
@media (max-width: 600px) {
  :root { --page-gutter: 12px; }
  .topbar { gap: 3px; padding-inline: 7px; }
  .header-brand { min-width: 82px; }
  .header-brand small { font-size: 6.5px; }
  .topbar .toolbar-search { flex-basis: 80px; }
  .topbar #recipeSearch { padding-inline: 0; font-size: 11px; }
  .scan-hero { padding-block: 16px 12px; }
  .hero-copy h1 { max-width: 360px; font-size: clamp(30px, 8vw, 32px); }
  .hero-copy p { max-width: 300px; font-size: 12px; }
  .bar-actions .action-controls { grid-template-columns: minmax(72px, .8fr) minmax(148px, 1.6fr) minmax(72px, .8fr); gap: 6px; }
  .bar-actions .capture-action.magic-border { font-size: 9px; }
  .bar-actions .capture-action.magic-border#typeAction,
  .bar-actions .capture-action.magic-border#micAction { padding-inline: 4px; }
  .bar-actions .capture-action.magic-border .capture-action-copy small { font-size: 9px; }
  .bar-actions .camera-primary.magic-border { min-height: 54px; }
  .bar-actions .camera-primary.magic-border .capture-action-copy small { font-size: 15px; }
  .quick-add-chip.magic-border { min-height: 46px; }
  .recipe-hero { padding-block: 12px 10px; }
  .app-shell #recipeScreen .discovery-heading h3 { font-size: 20px; }
  body[data-screen="recipes"] .filter-strip { gap: 4px; padding-inline: 12px; }
  body[data-screen="recipes"] #allFilters,
  body[data-screen="recipes"] #resultsFavorites,
  body[data-screen="recipes"] #featuredFilter button { min-height: 44px; gap: 4px; padding-inline: 7px; font-size: 9.5px; }
  body[data-screen="recipes"] #resultsFavorites svg { width: 15px; height: 15px; }
  body[data-screen="recipes"] #featuredFilter { gap: 4px; }

}

/* Keep the bar's recipe CTA available while its ingredient lanes scroll. */
body[data-screen="bar"] .bar-screen {
  padding-bottom: calc(136px + env(safe-area-inset-bottom));
}
body[data-screen="bar"] .bar-recipe-actions {
  pointer-events: none;
  position: fixed;
  z-index: 7;
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100%, 760px);
  margin: 0;
  padding: 10px clamp(12px, 4vw, 24px) calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgb(23 18 15 / 0%), rgb(23 18 15 / 94%) 24%);
}
body[data-screen="bar"] .bar-recipe-actions .recipe-action-wrap {
  width: min(100%, 480px);
  margin: 0 auto;
  pointer-events: none;
}
body[data-screen="bar"] .bar-recipe-actions .recipes-action { pointer-events: auto; }
@media (max-width: 389px) {
  .header-brand { min-width: 76px; }
  .topbar .toolbar-search { flex-basis: 70px; }
  .bar-actions .action-controls { grid-template-columns: minmax(64px, .8fr) minmax(132px, 1.6fr) minmax(64px, .8fr); }
  .bar-actions .capture-action.magic-border .capture-action-copy small { font-size: 9px; }
  .app-shell #recipeScreen .discovery-heading h3 { font-size: 18px; }

}
@media (min-width: 760px) {
  .scan-hero { padding-block: 28px 18px; }
  .hero-copy,
  .hero-copy h1 { max-width: 700px; }
  .hero-copy h1 { font-size: clamp(44px, 5.5vw, 58px); }
  body[data-screen="recipes"] #recipeList,
  body[data-screen="recipes"] #oneMoreRecipeList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-hero { padding-block: 16px 14px; }

}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Content-led spacing overrides for the inherited bar and library layouts. */
body[data-screen="recipes"] .library-count:has(#listTitle.sr-only):has(#recipeStatus:empty) {
  display: none;
}
body[data-screen="recipes"] .filter-strip { padding-bottom: 3px; }
body[data-screen="recipes"] #recipeList,
body[data-screen="recipes"] #oneMoreRecipeList { margin-top: 4px; }
body[data-screen="bar"] .bar-panel { margin-top: 12px; }
body[data-screen="bar"] .ingredient-lane { margin: 2px 0 8px; }
body[data-screen="bar"] .lane-heading-row { min-height: 36px; margin-bottom: 2px; }
body[data-screen="bar"] .lane-heading-row .lane-heading { margin: 0; }
body[data-screen="bar"] .lane-chips { gap: 5px; }
body[data-screen="bar"] #purchaseSuggestions { display: none !important; }

/* Results keep the next-bottle suggestions in view while each list scrolls. */
body[data-screen="recipes"][data-recipe-view="results"] #recipeScreen {
  display: flex;
  height: calc(100dvh - 52px - env(safe-area-inset-top));
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
body[data-recipe-view="results"] .recipe-hero { flex: 0 0 auto; padding-block: 8px 5px; }
body[data-recipe-view="results"] .recipe-hero h1 { margin-bottom: 4px; font-size: clamp(22px, 5.7vw, 32px); line-height: 1.15; text-wrap: balance; letter-spacing: -.035em; }
body[data-recipe-view="results"] .recipe-hero p { font-size: 10px; }
body[data-recipe-view="results"] .filter-strip { padding-top: 4px; padding-bottom: 0; }
body[data-recipe-view="results"] .library-count { min-height: 30px; }
body[data-recipe-view="results"] #listTitle { font-size: 21px; }
body[data-recipe-view="results"] .recipe-section {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
body[data-recipe-view="results"] .filter-strip,
body[data-recipe-view="results"] .library-count { flex: 0 0 auto; }
body[data-screen="recipes"][data-recipe-view="results"] #recipeList,
body[data-screen="recipes"][data-recipe-view="results"] #oneMoreRecipeList {
  min-height: 0;
  align-content: start;
  grid-auto-rows: max-content;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #8c6447 #211812;
  scrollbar-gutter: stable;
  scroll-padding-block: 4px;
}
body[data-screen="recipes"][data-recipe-view="results"] #recipeList {
  flex: 1 1 0;
  margin-bottom: 8px;
  padding-bottom: 4px;
}
body[data-screen="recipes"][data-recipe-view="results"] #oneMoreSection {
  display: flex;
  height: clamp(200px, 34dvh, 260px);
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  margin-top: 0;
  padding-top: 8px;
}
body[data-screen="recipes"][data-recipe-view="results"] #oneMoreRecipeList {
  flex: 1 1 auto;
  margin: 0;
  padding-bottom: 4px;
}
body[data-recipe-view="results"] #oneMoreStatus {
  margin: 4px 0;
  color: #baa999;
  font-size: 12px;
}
body[data-recipe-view="results"] .recipe-section:has(#recipeList:empty) #recipeList { flex: 0; margin-block: 0; }
body[data-recipe-view="results"] .recipe-section:has(#recipeList:empty) #oneMoreSection { height: auto; flex: 1; margin-top: 8px; }
body[data-recipe-view="results"] #oneMoreSection:has(#oneMoreRecipeList:empty) { height: auto; min-height: 104px; }
body[data-recipe-view="results"] .discovery-footer { display: none; }

@media (max-height: 650px) {
  body[data-recipe-view="results"] .recipe-hero { padding-block: 7px 4px; }
  body[data-recipe-view="results"] .filter-strip { padding-top: 3px; }
  body[data-recipe-view="results"] .library-count { min-height: 28px; }
  body[data-screen="recipes"][data-recipe-view="results"] #oneMoreSection { height: 200px; }
  body[data-recipe-view="results"] #oneMoreSection .one-away-description { display: none; }
  body[data-recipe-view="results"] #recipeList .recipe-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-recipe-view="results"] #recipeList .recipe-ingredient-chips { flex-wrap: nowrap; overflow: hidden; }
  body[data-recipe-view="results"] #recipeList .recipe-ingredient-chip { flex-shrink: 0; }
}

@media (max-height: 500px) and (min-width: 650px) {
  body[data-recipe-view="results"] .recipe-hero h1 { font-size: 24px; }
  body[data-recipe-view="results"] .recipe-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 34px minmax(0, 1fr);
  }
  body[data-recipe-view="results"] .filter-strip { grid-column: 1 / -1; grid-row: 1; }
  body[data-recipe-view="results"] .library-count { grid-column: 1; grid-row: 2; }
  body[data-screen="recipes"][data-recipe-view="results"] #recipeList { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); }
  body[data-screen="recipes"][data-recipe-view="results"] #oneMoreSection {
    grid-column: 2;
    grid-row: 2 / 4;
    height: auto;
    margin-left: 0;
    padding: 0 0 0 10px;
    border-top: 0;
    border-left: 1px solid var(--redesign-line);
  }
  body[data-screen="recipes"][data-recipe-view="results"] #oneMoreRecipeList { grid-template-columns: minmax(0, 1fr); }
}

/* Android-style recipe carousels in the My Bar results view. */
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #recipeList,
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreRecipeList {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 12px 10px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #8c6447 transparent;
  scrollbar-gutter: auto;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #recipeList::after,
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreRecipeList::after {
  content: "";
  flex: 0 0 var(--carousel-tail, 20%);
  min-width: 0;
  pointer-events: none;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #recipeList {
  min-height: 0;
  flex: 0 1 196px;
  margin: 4px 0 8px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreRecipeList {
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-card {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 min(92%, 420px);
  width: min(92%, 420px);
  max-width: 420px;
  min-width: 0;
  min-height: 0;
  height: min(100%, 180px);
  max-height: 180px;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #292522;
  border-radius: 12px;
  background: #080808;
  box-shadow: none;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transform: scale(.94);
  transition: transform 180ms ease-out;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-card.is-current { transform: scale(1); }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card {
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .discovery-art {
  grid-column: 1;
  grid-row: 1;
  min-height: 82px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .discovery-body {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-start;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-art {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  background: #000;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-art .recipe-art,
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-art .recipe-art img,
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-art .recipe-art svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: transparent;
  object-fit: contain;
  mix-blend-mode: normal;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-body {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  align-items: flex-start;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-heading {
  flex: 0 0 auto;
  width: 100%;
  min-height: 36px;
  align-items: flex-start;
  padding-right: 68px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-heading .recipe-open {
  min-height: 34px;
  padding: 0 0 3px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-heading h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: #fff;
  font: 700 16px/1.12 Inter, ui-sans-serif, sans-serif;
  letter-spacing: .015em;
  text-transform: uppercase;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-category-badges {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 5px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-category-badge {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-height: 18px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid #37322e;
  border-radius: 10px;
  background: #171513;
  color: #c7b9aa;
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
}
body[data-screen="recipes"] #featuredFilter button {
  border-color: color-mix(in srgb, var(--tag-color, #9a8a7b) 55%, #342a22);
  background: #211b16;
  color: var(--tag-color, #e2d4c1);
}
body[data-screen="recipes"] #featuredFilter button[aria-pressed="true"] {
  border-color: var(--tag-color, #c9976f);
  background: var(--tag-color, #c9976f);
  color: #17130f;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-description {
  margin: 0 0 5px;
  font-size: 11px;
  line-height: 1.3;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-ingredient-chips {
  flex: 0 0 auto;
  align-items: flex-start;
  margin-top: auto;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-ingredient-chip {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection {
  height: clamp(220px, 30dvh, 250px);
  min-height: 0;
  padding-top: 8px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-heading {
  font-size: 22px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-description {
  margin-bottom: 5px;
  font-size: 11px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreButton {
  display: inline-flex;
  width: auto;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  padding: 3px 10px;
  border: 1px solid #43382e;
  border-radius: 16px;
  background: #171411;
  color: #d7c4b0;
  font: 600 10px/1.2 Inter, ui-sans-serif, sans-serif;
  animation: none;
  box-shadow: none;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreButton svg {
  width: 14px;
  height: 14px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreButton:has(#oneMoreCount:empty) { display: none; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .nearby-cta.magic-border {
  animation: none;
  box-shadow: none;
  background: #211a15 !important;
  border: 1px solid #5d493b !important;
}

@media (max-height: 650px) {
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #recipeList,
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreRecipeList {
    gap: 12px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreRecipeList { padding-top: 0; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-card {
    flex-basis: min(92%, 420px);
    width: min(92%, 420px);
    height: min(100%, 150px);
    max-height: 150px;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card { grid-template-columns: 60px minmax(0, 1fr); }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-art {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-body {
    grid-column: 2;
    grid-row: 1;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-heading {
    min-height: 30px;
    padding-right: 50px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .discovery-heading { padding-right: 50px; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .nearby-row {
    margin-top: 2px;
    padding-top: 3px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .nearby-info {
    width: 0;
    flex: 1 1 0;
    overflow: hidden;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .nearby-status {
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .nearby-status span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-card .nearby-cta {
    min-height: 30px;
    padding: 3px 5px;
    font-size: 9px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-heading .recipe-open {
    min-height: 28px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-heading h3 { font-size: 15px; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-favorite,
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-chevron {
    top: -5px;
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-favorite { right: 24px; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-chevron { right: -7px; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: normal;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-ingredient-chips {
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .recipe-ingredient-chip { flex-shrink: 0; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection {
    height: 202px;
    margin-top: 2px;
    padding-top: 0;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-heading {
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 1;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-description { display: none; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreButton {
    min-height: 22px;
    margin-bottom: 0;
    padding: 2px 8px;
  }
}

@media (max-height: 500px) and (min-width: 650px) {
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #recipeList,
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreRecipeList { gap: 10px; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-card {
    flex-basis: min(96%, 420px);
    width: min(96%, 420px);
    height: 130px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection {
    height: auto;
    min-height: 0;
    padding-left: 10px;
  }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-heading { font-size: 17px; }
}

/* Native ingredient checks and colored circular style badges on compact cards. */
.app-shell #recipeScreen .discovery-category-badges {
  display: flex;
  gap: 3px;
  margin: 0;
}
.app-shell #recipeScreen .discovery-category-badge {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tag-color);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tag-color) 20%, #080808);
  color: var(--tag-color);
  cursor: pointer;
}
.app-shell #recipeScreen .discovery-category-badge svg { width: 16px; height: 16px; }
.discovery-category-label { display: none; }
.discovery-category-badge[aria-expanded="true"] .discovery-category-label {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  left: 0;
  display: block;
  padding: 5px 8px;
  border: 1px solid var(--tag-color);
  border-radius: 6px;
  background: #171513;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-category-badges { position: relative; flex: 0 0 auto; justify-content: center; align-items: center; margin: 0; gap: 4px; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-category-badge { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; border-color: var(--tag-color); background: color-mix(in srgb, var(--tag-color) 20%, #080808); color: var(--tag-color); }
.app-shell #recipeScreen .discovery-ingredients { width: 100%; min-height: 0; margin: 3px 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.app-shell #recipeScreen .discovery-ingredients h4 { display: none; }
.app-shell #recipeScreen .discovery-ingredients ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.app-shell #recipeScreen .discovery-ingredients li { display: flex; align-items: flex-start; gap: 5px; padding: 0; font-size: 11px; line-height: 1.3; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-indicator { width: 15px; height: 15px; flex: 0 0 15px; color: #4caf50; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-indicator svg { width: 15px; height: 15px; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-indicator.riff { color: #ffa726; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-indicator.missing { color: #26c6da; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-indicator.optional { color: #888; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-text { min-width: 0; color: #eee4d9; font-size: 11px; overflow-wrap: anywhere; }
.app-shell #recipeScreen .discovery-ingredients .ingredient-original { font-size: 9px; }

/* Shared purchase actions and an even rhythm for both recipe carousels. */
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection { margin-inline: 0; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection > :is(h2, p, button) { margin-inline: 12px; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-visual { grid-column: 1; grid-row: 1; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-visual .discovery-art { height: auto; min-height: 0; }
.app-shell #recipeScreen .discovery-category-badge svg { display: block; align-self: center; justify-self: center; flex: none; }
.app-shell #recipeScreen .discovery-category-badges { justify-content: center; }
.shopping-add { display: inline-flex; width: fit-content; min-height: 28px; align-items: center; gap: 3px; margin: 2px 0 0; padding: 3px 6px; border: 1px solid var(--shopping-line); border-radius: 6px; background: var(--shopping-fill); color: var(--shopping-blue); font: 650 10px/1.2 Inter, ui-sans-serif, sans-serif; cursor: pointer; }
.shopping-add[aria-pressed="true"] { color: var(--shopping-blue); border-color: var(--shopping-blue); }
.shopping-add svg { width: 13px; height: 13px; }
.shopping-add { max-width: 100%; flex: 0 0 auto; text-align: left; }
.shopping-add span { min-width: 0; overflow-wrap: anywhere; }
.ingredient-text > .shopping-add { display: flex; }
.shopping-list-button { display: inline-flex; flex: 0 0 auto; min-height: 36px; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--shopping-line); border-radius: 18px; background: var(--shopping-fill); color: var(--shopping-blue); font: 650 11px/1.2 Inter, ui-sans-serif, sans-serif; cursor: pointer; }
.shopping-list-button svg { width: 16px; height: 16px; }
body[data-screen="recipes"] .library-count { flex-wrap: wrap; padding-block: 3px; }
body[data-screen="recipes"] #recipeStatus:empty { display: none; }
.nearby-row { width: 100%; min-width: 0; margin-top: 8px; }
.nearby-cta { display: flex; width: 100%; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--shopping-line); border-radius: 8px; background: var(--shopping-fill); color: var(--shopping-blue); text-decoration: none; }
.nearby-info { min-width: 0; flex: 1; }
.nearby-status { display: flex; min-width: 0; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 1.3; }
.nearby-status svg { width: 14px; height: 14px; flex: 0 0 14px; }
.nearby-status .store-name { color: var(--shopping-blue); font-weight: 750; overflow-wrap: anywhere; }
.nearby-cta > svg { width: 14px; height: 14px; flex: 0 0 14px; }
.nearby-disclosure { display: block; margin-top: 3px; color: #a99a88; font-size: 10px; line-height: 1.25; }
.nearby-disclosure[hidden] { display: none; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.one-away-card, .discovery-card) .nearby-row { flex: 0 0 auto; margin-top: auto; padding-top: 4px; border-top: 1px solid #292522; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.one-away-card, .discovery-card) .nearby-cta { width: 100%; min-height: 38px; padding: 3px 0; border: 0; border-radius: 4px; background: transparent; white-space: normal; font-size: 11px; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.one-away-card, .discovery-card) .nearby-info { width: auto; min-width: 0; flex: 1; overflow: visible; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.one-away-card, .discovery-card) .nearby-status { color: var(--shopping-blue); font-size: 11px; line-height: 1.25; white-space: normal; overflow: visible; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.one-away-card, .discovery-card) .nearby-status span { white-space: normal; overflow: visible; }
.app-shell #recipeScreen .discovery-ingredients { flex: 1 1 auto; padding-bottom: 2px; }
.app-shell #recipeScreen .discovery-ingredients .shopping-add { min-height: 22px; padding: 2px 5px; }
#detailContent .detail-section ul { display: grid; gap: 12px; padding-left: 0; list-style: none; }
#detailContent .detail-section li > strong { display: block; margin-bottom: 6px; }
#detailContent .ingredient-text { display: flex; min-width: 0; align-items: flex-start; flex-direction: column; gap: 4px; }
#detailContent .shopping-add { min-height: 36px; padding: 6px 9px; font-size: 12px; }
#detailContent .nearby-row { margin: 0; }
#detailContent .detail-actions { gap: 10px; }
#shoppingListDialog { width: min(560px, calc(100vw - 24px)); padding: 20px; }
.shopping-list-intro { margin: 0 0 12px; color: #cbb9a6; font-size: 14px; line-height: 1.5; }
#shoppingListItems { display: grid; gap: 12px; margin: 16px 0; padding: 0; list-style: none; }
.shopping-list-item { padding: 12px; border: 1px solid #4b392b; border-radius: 12px; background: #211a14; }
.shopping-item-heading { display: flex; align-items: center; gap: 8px; }
.shopping-item-label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; margin: 0; padding-block: 6px; color: #f4e6d5; font-size: 15px; }
.shopping-item-label input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--shopping-blue); }
.shopping-item-label strong { overflow-wrap: anywhere; }
.shopping-list-item.is-bought .shopping-item-label strong { color: var(--shopping-blue); text-decoration: line-through; }
.shopping-remove { flex: 0 0 40px; }
.shopping-unlocks { margin-top: 24px; padding-top: 18px; border-top: 1px solid #4b392b; }
.shopping-unlocks h3 { margin: 0 0 8px; color: #f1dec8; font: 400 24px/1.2 var(--redesign-serif); }
#shoppingRecipeSummary { font-size: 13px; line-height: 1.5; }
#shoppingListRecipes { display: grid; gap: 8px; }
.shopping-recipe { display: flex; width: 100%; min-height: 68px; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #39312a; border-radius: 10px; background: #080808; color: #f4e6d5; text-align: left; cursor: pointer; }
#shoppingListDialog .shopping-recipe .recipe-art { width: 48px; height: 52px; min-height: 0; flex: 0 0 48px; margin: 0; padding: 0; background: #000; }
#shoppingListDialog .shopping-recipe .recipe-art img { width: 100%; height: 100%; object-fit: contain; }
.shopping-recipe strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.shopping-recipe > svg { width: 16px; height: 16px; flex: 0 0 16px; }
@media (max-height: 650px) {
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.one-away-card, .discovery-card) .nearby-cta { min-height: 32px; }
}
@media (min-height: 651px) {
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection { height: 286px; }
}

/* Each result panel includes its heading and an equally sized carousel. */
.ready-section { display: contents; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.ready-section, #oneMoreSection) {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 6px 0 0;
  border: 0;
  border-top: 1px solid transparent;
  overflow: hidden;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection {
  border-top: 1px solid var(--redesign-line);
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(.library-count, .one-away-heading) {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  box-sizing: border-box;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(#listTitle, #oneMoreSection .one-away-heading) {
  color: var(--redesign-cream);
  font: 400 22px/1.15 var(--redesign-serif);
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-heading { margin: 0; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .one-away-description { display: none; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(#recipeList, #oneMoreRecipeList) {
  flex: 1 1 0;
  margin: 0;
  padding: 6px 12px 10px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreButton { display: none; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-card,
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .discovery-card.is-current {
  height: 100%;
  max-height: none;
  transform: none;
  transition: none;
}
.app-shell #recipeScreen .discovery-ingredients {
  overscroll-behavior: auto contain;
  touch-action: pan-y pinch-zoom;
}
/* Keep the purchase control readable when ingredient names wrap. */
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .shopping-add {
  min-height: 32px;
  gap: 5px;
  padding: 5px 8px;
  border-color: var(--shopping-line);
  color: var(--shopping-blue);
  font-size: 11px;
}
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .shopping-add svg { flex: 0 0 13px; }
body[data-screen="recipes"][data-recipe-view="results"] .filter-strip .magic-border {
  border: 1px solid #78543e !important;
  background: #211b16 !important;
  animation: none;
  box-shadow: none;
}
body[data-screen="recipes"][data-recipe-view="results"] .filter-strip .magic-border[aria-pressed="true"] {
  border-color: #dfa77d !important;
  background: #563a2b !important;
}
@media (max-height: 650px) {
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen :is(#listTitle, #oneMoreSection .one-away-heading) { font-size: 20px; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .shopping-add { min-height: 28px; padding: 3px 6px; font-size: 10px; }
}
@media (max-height: 500px) and (min-width: 650px) {
  body[data-recipe-view="results"] .recipe-section { grid-template-rows: auto minmax(0, 1fr); }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen .ready-section { grid-column: 1; grid-row: 2; }
  body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--redesign-line);
  }
}
/* A steady, centered handoff for startup and sign-in. */
.loading-screen,
body[data-screen="signing-in"] #signingInScreen {
  display: grid;
  min-height: calc(100dvh - 52px - env(safe-area-inset-top));
  place-content: center;
  justify-items: center;
  gap: 24px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center, #49302366, transparent 65%);
  text-align: center;
  animation: none;
}
.loading-brand { color: var(--redesign-cream); font: 600 42px/1.1 var(--redesign-serif); letter-spacing: -.04em; }
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e0b48126;
  border-top-color: #e0b481;
  border-right-color: #e0b481;
  border-radius: 50%;
  animation: loading-spin 900ms linear infinite;
}
.loading-screen p,
#signingInScreen p { margin: 0; color: var(--redesign-muted); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .01em; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation: none; }
  .bar-recipe-actions .recipes-action { transition: none; }
}

/* Shopping shares the missing-ingredient cart color across cards and dialogs. */
.app-shell :is(.nearby-cta, .nearby-status, .product-link, .preview-find, .shopping-add-all, #menuShoppingList, #bottlesLink),
.app-shell #recipeScreen :is(.nearby-cta, .nearby-status),
.app-shell #shoppingListDialog :is(h2, h3, .shopping-item-label, .shopping-remove, .shopping-recipe) {
  color: var(--shopping-blue);
}
.app-shell #recipeScreen .discovery-ingredients .ingredient-text.missing > span,
#detailContent .ingredient-text.missing > span { color: var(--shopping-blue); }
.app-shell :is(.shopping-add-all, #addPurchasedToBar) {
  border-color: var(--shopping-line);
  background: var(--shopping-fill);
  color: var(--shopping-blue);
}
.app-shell #recipeScreen .nearby-status,
.app-shell .nearby-status { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; }
.nearby-status .store-name { grid-column: 2; }
.ingredient-close-enough { font-style: italic; }
.one-away-header { display: flex; flex: 0 0 38px; min-height: 38px; min-width: 0; align-items: center; gap: 10px; padding-inline: 12px; }
body[data-screen="recipes"][data-recipe-view="results"] .app-shell #recipeScreen #oneMoreSection .one-away-header .one-away-heading {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  white-space: nowrap;
}
#oneMoreBottleChips { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
#oneMoreBottleChips::-webkit-scrollbar { display: none; }
.one-away-bottle-chip { display: inline-flex; flex: 0 0 auto; min-height: 32px; align-items: center; padding: 4px 9px; border: 1px solid var(--shopping-line); border-radius: 18px; background: var(--shopping-fill); color: var(--shopping-blue); font: 650 11px/1.2 ui-sans-serif, sans-serif; text-decoration: none; white-space: nowrap; }
.one-away-bottle-chip:focus-visible { outline: 2px solid var(--shopping-blue); outline-offset: -2px; }
@media (max-width: 360px) {
  .one-away-header { gap: 6px; }
}