/* FoodFriend styles */

:root {
  --ink: #2b2420;
  --accent: #d9622b;
  --like: #ff3b5c;
  --full-height: 100vh;
}
@supports (height: 100dvh) {
  :root {
    --full-height: 100dvh;
  }
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none; /* no pull-to-refresh / bounce */
  background: #111;
}

/* ---------- vertical feed ----------
   Nothing here scrolls natively: GSAP moves .feed-inner (y) and
   .recipe-track (x) with transforms. */

.feed {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.feed-inner {
  will-change: transform;
}

.recipe {
  height: var(--full-height);
  position: relative;
  overflow: hidden;
}

/* ---------- horizontal track ---------- */

.recipe-track {
  --panels: 3; /* photo, ingredients, method */
  display: flex;
  width: calc(var(--panels) * 100%);
  height: 100%;
  position: relative;
  z-index: 1; /* above .details-backdrop */
}

.panel {
  flex: 0 0 calc(100% / var(--panels));
  height: 100%;
  position: relative;
}

/* ---------- hero panel ---------- */

.panel-hero {
  /* Shown when the recipe has no photo (or it fails to load) */
  background: linear-gradient(
    160deg,
    hsl(var(--hue) 55% 45%),
    hsl(calc(var(--hue) + 40) 60% 25%)
  );
  color: #fff;
  overflow: hidden;
  touch-action: none; /* swipes are handled by GSAP Observer */
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Only the current recipe and its neighbours get their own GPU layers (app.js
   marks them .is-near). Giving all of them one costs memory and smoothness */
.recipe.is-near .recipe-track,
.recipe.is-near .hero-img {
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6rem 1.5rem 2.5rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.35) 60%,
    transparent
  );
}
@media (min-width: 768px) {
  .hero-overlay {
    padding: 8rem 4rem 4rem;
  }
}

.recipe-name {
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 14ch;
  margin-bottom: 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.recipe-tags .badge {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5em 0.9em;
}
.tag-equipment {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}
.tag-feature {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Marks AI-generated photos (files named <slug>.jpg.ai) */
.ai-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  pointer-events: none;
}

/* ---------- likes ---------- */

.panel-hero {
  user-select: none;
} /* double-tap shouldn't select text */

.hero-overlay {
  padding-right: 5.5rem;
} /* room for the heart */

.like-btn,
.list-btn {
  position: absolute;
  right: 1.25rem;
  bottom: 2.5rem;
  z-index: 3;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .like-btn {
    right: 4rem;
    bottom: 4rem;
  }
  .list-btn {
    right: 4rem;
    bottom: 8rem;
  }
  .hero-overlay {
    padding-right: 8.5rem;
  }
}
.like-btn svg,
.list-btn svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* Not liked yet: faded so it doesn't compete with the photo */
.like-btn:not(.is-liked),
.list-btn:not(.in-list) {
  background: rgba(0, 0, 0, 0.12);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.like-btn:not(.is-liked):focus-visible,
.list-btn:not(.in-list):focus-visible {
  opacity: 1;
}
/* Only real mouse hover - touch screens keep :hover after a tap */
@media (hover: hover) {
  .like-btn:not(.is-liked):hover,
  .list-btn:not(.in-list):hover {
    opacity: 1;
  }
}
/* Bookmark sits above the heart */
.list-btn {
  bottom: 6.5rem;
}
.list-btn.in-list svg {
  fill: #fff;
}
.like-btn.is-liked svg {
  fill: var(--like);
  stroke: var(--like);
}
.like-btn:focus-visible,
.list-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.like-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.like-burst svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}

/* ---------- pull to shuffle ---------- */

.pull-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%; /* GSAP moves it down to the middle of the pulled gap */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.pull-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
}

/* ---------- ingredients & method panels ----------
   Same language as the photo panel: the recipe's photo (blurred and darkened)
   behind white text anchored bottom-left, with frosted-glass cards that echo
   the tag pills. */

/* Transparent: both panels sit over one shared .details-backdrop */
.panel-details {
  color: #fff;
  overflow: hidden;
}

/* One backdrop per recipe, behind the track. GSAP slides it in with the
   ingredients panel and keeps it still between ingredients and method.
   Starts off screen to the right (app.js takes over from here). */
.details-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #111;
  transform: translateX(100%);
  visibility: hidden; /* app.js shows it only while ingredients/method are on screen */
}
/* The recipe photo (--photo, set on .recipe) or its gradient, heavily blurred */
.details-backdrop::before {
  content: "";
  position: absolute;
  inset: -60px; /* hide the blur's soft edges */
  background: var(
      --photo,
      linear-gradient(
        160deg,
        hsl(var(--hue) 55% 45%),
        hsl(calc(var(--hue) + 40) 60% 25%)
      )
    )
    center / cover no-repeat;
  filter: blur(32px) brightness(0.45) saturate(1.2);
}
.details-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.15) 70%
  );
}

/* The only native scroll on the page: long ingredient lists / methods */
.details-scroll {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
.details-scroll::-webkit-scrollbar {
  display: none;
}

/* Bottom-left, matching .hero-overlay's padding */
.details-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5rem 1.5rem 2.5rem;
}
.details-inner > * {
  max-width: 640px;
}
@media (min-width: 768px) {
  .details-inner {
    padding: 6rem 4rem 4rem;
  }
}

.section-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}

.details-name {
  font-size: clamp(2.25rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Frosted-glass card, shared by ingredient groups and method steps */
.ingredient-group,
.method-step,
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.25rem;
}
/* Only the drawer's cards (which don't move) get the frosted blur */
.glass-card {
  backdrop-filter: blur(8px);
}

.ingredient-group {
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 0.75rem;
}

/* Same small caps as the recipe name above the heading */
.group-title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- ingredients: icon + name pills ---------- */

.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Like a feature tag, with the icon in front */
.ingredient-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}
.ingredient-pill.is-advised {
  border-color: rgba(255, 255, 255, 0.6);
}
/* Not in your pantry (browse.js markMissingIngredients) */
.ingredient-pill.is-missing {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
}
.ingredient-pill.is-missing .pill-icon,
.ingredient-pill.is-missing .pill-name {
  opacity: 0.5;
}

.pill-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  object-fit: contain;
  font-size: 1.4rem;
  line-height: 1;
}

.pill-advised {
  margin-left: 0.15rem;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ---------- method ---------- */

.method-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.method-step {
  counter-increment: step;
  position: relative;
  padding: 1rem 1.1rem 1rem 1.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
  cursor: pointer; /* tap to mark done; faded by app.js */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.method-step:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Done: the card dims here; the text fades in app.js. The card itself never
   changes opacity, since that glitches with its backdrop-filter */
.method-step {
  transition: background-color 0.3s, border-color 0.3s;
}
.method-step.is-done {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.step-text {
  display: block;
}

/* ---------- shared controls: chips, pill buttons, inputs ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Outlined like a feature tag; solid white like an equipment tag when on */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip.is-on {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.chip[hidden] {
  display: none;
}

.pill-btn {
  padding: 0.65em 1.3em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pill-solid {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.text-input {
  width: 100%;
  min-width: 0;
  padding: 0.65em 1em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem; /* 16px+ stops iOS zooming in on focus */
}
.text-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.text-input:focus {
  outline: none;
  border-color: #fff;
}

.input-row {
  display: flex;
  gap: 0.5rem;
}

.chip:focus-visible,
.pill-btn:focus-visible,
.drawer-tab:focus-visible,
.sheet-row:focus-visible,
.list-open:focus-visible,
.list-delete:focus-visible,
.filter-badge:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.glass-card {
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 0.75rem;
}

.drawer-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* ---------- Browse drawer (swipe right on a photo) ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 20;
  color: #fff;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(217, 98, 43, 0.25), transparent 60%),
    linear-gradient(160deg, #2a211c, #0d0b0a);
  transform: translateX(-100%); /* app takes over with GSAP */
  will-change: transform;
}

.drawer-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
.drawer-scroll::-webkit-scrollbar {
  display: none;
}

.drawer-inner {
  max-width: 640px;
  padding: 3rem 1.5rem 3rem;
}
@media (min-width: 768px) {
  .drawer-inner {
    padding: 4rem 4rem 4rem;
  }
}

/* Segmented control */
.drawer-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.drawer-tab {
  flex: 1;
  padding: 0.55em 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.drawer-tab.is-active {
  background: #fff;
  color: var(--ink);
}

.drawer-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Lists tab */
.list-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.list-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.list-name {
  font-size: 1.15rem;
  font-weight: 700;
}
.list-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}
.list-delete {
  padding: 0.35em 0.8em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  cursor: pointer;
}

.list-shop {
  white-space: nowrap;
}

/* "How to use FoodFriend" at the bottom of the drawer (tutorial.js) */
.drawer-help {
  display: block;
  margin: 2rem auto 0;
  padding: 0.5rem;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- first-visit tutorial (tutorial.js) ---------- */

.tutorial {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  background: rgba(10, 8, 7, 0.85);
  backdrop-filter: blur(6px);
  color: #fff;
}
.tutorial[hidden] {
  display: none;
}
.tutorial-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A little phone that acts out each gesture */
.demo-phone {
  position: relative;
  height: min(100%, 360px);
  aspect-ratio: 9 / 18;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 1.6rem;
  overflow: hidden;
  background: #111;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.demo-screen-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.demo-strip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
.demo-col {
  flex-direction: column;
  width: 100%;
  height: 200%;
}
.demo-col .demo-screen {
  height: 50%;
}
.demo-row {
  width: 300%;
  height: 100%;
}
.demo-row .demo-screen {
  width: calc(100% / 3);
}
.demo-screen {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(160deg, hsl(var(--hue, 20) 45% 40%), hsl(calc(var(--hue, 20) + 40) 45% 20%));
}
.demo-single {
  position: absolute;
  inset: 0;
}
.demo-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-photo::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.demo-name {
  position: absolute;
  left: 10%;
  bottom: 15%;
  z-index: 1;
  width: 62%;
  height: 7%;
  border-radius: 4px;
  background: #fff;
}
.demo-tags {
  position: absolute;
  left: 10%;
  bottom: 8%;
  z-index: 1;
  display: flex;
  gap: 4px;
}
.demo-tags i {
  width: 24px;
  height: 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.75);
}
.demo-details,
.demo-drawer {
  padding: 44px 16px 0; /* px: in the 3-wide strip a % would be of the whole strip */
  background: linear-gradient(160deg, #2a211c, #0d0b0a);
}
.demo-title {
  display: block;
  width: 60%;
  height: 14px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: #fff;
}
.demo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.demo-pills i {
  width: 38px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 99px;
}
.demo-step {
  position: relative;
  display: block;
  height: 30px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.demo-step::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 30%;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
}
.demo-heart {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
}
.demo-heart svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.demo-drawer {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 32px 14px 0;
}
/* Small real text inside the phone (drawer, sheets, lists) */
.demo-heading {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
}
.demo-label {
  display: block;
  margin-bottom: 4px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.demo-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
}
.demo-tabs i {
  flex: 1;
  padding: 2px 0;
  border-radius: 99px;
  font-size: 7px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
.demo-tabs i.is-on {
  background: #fff;
  color: var(--ink);
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.demo-chips i {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 99px;
  font-size: 7.5px;
  font-style: normal;
}
.demo-chips i:first-child {
  background: #fff;
  color: var(--ink);
}
.demo-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  object-fit: contain;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
}
/* Bookmark and heart on the demo photo */
.demo-bookmark,
.demo-like {
  position: absolute;
  right: 8%;
  z-index: 1;
  width: 18px;
  height: 18px;
}
.demo-bookmark {
  bottom: 22%;
}
.demo-like {
  bottom: 10%;
}
/* Outlined until tapped, like the real buttons */
.demo-bookmark svg,
.demo-like svg {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: #fff;
  stroke-width: 2;
  transition: fill 0.2s;
}
.demo-bookmark.is-on svg,
.demo-like.is-on svg {
  fill: #fff;
}
/* "Save to list" sheet */
.demo-sheet {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  padding: 10px 10px 14px;
  border-radius: 12px 12px 0 0;
  background: #241d19;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}
.demo-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
}
.demo-sheet-row.is-on {
  background: #fff;
  color: var(--ink);
}
/* Pantry tab */
.demo-summary {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 8.5px;
  font-weight: 600;
}
.demo-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.demo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.demo-tile .demo-icon {
  width: 22px;
  height: 22px;
  font-size: 18px;
  line-height: 22px;
}
.demo-tile small {
  max-width: 100%;
  overflow: hidden;
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-tile.is-on {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
/* Lists tab and the shopping list */
.demo-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 700;
}
.demo-list-card small {
  display: block;
  font-size: 7px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.demo-list-card b {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  font-size: 7.5px;
  font-weight: 600;
  white-space: nowrap;
}
.demo-shopping {
  z-index: 2;
}
.demo-check-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 9px;
  font-weight: 500;
}
.demo-check-row > i {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}
.demo-check-row.is-on > i {
  background: #fff;
  border-color: #fff;
}
.demo-check-row.is-on {
  color: rgba(255, 255, 255, 0.45);
}
.demo-pull {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
}
/* The finger */
.demo-hand {
  position: absolute;
  z-index: 5;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

.tutorial-card {
  width: min(420px, 100%);
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.5rem;
  background: rgba(30, 25, 22, 0.92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.tutorial-card .sheet-title {
  margin-bottom: 0.4rem;
}
.tutorial-card .drawer-note {
  min-height: 5.5em; /* keeps the buttons still as the text length changes */
}
.tutorial-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.tutorial-dots {
  flex: 1;
  display: flex;
  gap: 6px;
}
.tutorial-dots i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s, background-color 0.3s;
}
.tutorial-dots i.is-on {
  width: 20px;
  background: #fff;
}
.tutorial-footer .pill-btn[hidden] {
  display: none;
}

/* ---------- shopping list (Lists tab → 🛒 Shop) ---------- */

.shop {
  position: fixed;
  inset: 0;
  z-index: 25; /* over the drawer, under the confirm dialog */
  color: #fff;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(217, 98, 43, 0.25), transparent 60%),
    linear-gradient(160deg, #2a211c, #0d0b0a);
}
.shop[hidden] {
  display: none;
}
.shop-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.shop-summary {
  margin: -1rem 0 1.25rem;
  color: rgba(255, 255, 255, 0.7);
}
.shop-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  background: none;
  color: #fff;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shop-row + .shop-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.shop-check {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: transparent;
  font-size: 0.8rem;
  font-weight: 800;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.shop-row.is-ticked .shop-check {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.shop-row.is-ticked .pill-icon,
.shop-row.is-ticked .shop-text {
  opacity: 0.45;
}
.shop-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.shop-for {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "To get" / "If you want" between the cards */
.shop-heading {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.shop-heading:first-child {
  margin-top: 0;
}
.shop-heading-quiet {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
}
/* Optional extras and spices: smaller and dimmer than what you need */
.shop-quiet {
  background: transparent;
  border-style: dashed;
}
.shop-quiet .shop-row {
  padding: 0.35rem 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.shop-quiet .pill-icon {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.05rem;
}
.shop-quiet .shop-check {
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.7rem;
}
/* Already in your pantry: folded away at the bottom */
.shop-pantry {
  margin-top: 1.5rem;
  background: transparent;
  backdrop-filter: none;
}
.shop-pantry summary {
  margin: 0;
  cursor: pointer;
}
.shop-pantry[open] summary {
  margin-bottom: 0.75rem;
}
.shop-pantry .ingredient-pill {
  opacity: 0.6;
  font-size: 0.85rem;
}
.shop-row:focus-visible,
.shop-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Pantry tab */
.pantry-search {
  margin-bottom: 0.75rem;
}
.pantry-group[hidden] {
  display: none;
}

/* Pantry: tiles like the admin's ingredients page, a big icon over the name */
.pantry-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.25rem;
}
.pantry-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, border-color 0.2s;
}
.pantry-tile[hidden] {
  display: none;
}
@media (hover: hover) {
  .pantry-tile:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
  }
}
.pantry-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* In stock: outlined, lighter, with a tick in the corner */
.pantry-tile.is-on {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.pantry-tile.is-on::after {
  content: '✓';
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-align: center;
}
.pantry-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  font-size: 2.3rem;
  line-height: 48px;
  text-align: center;
}
.pantry-name {
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
}
.pantry-count {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pantry-nearly {
  margin-top: 1.25rem;
}
.js-show-pantry {
  margin-bottom: 0.25rem;
}

/* On a photo while the "One ingredient away" filter is on: "Need Stock Cube".
   Frosted like the AI tag and filter badge */
.pantry-marker {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3em 0.85em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.pantry-marker[hidden] {
  display: none;
}

.js-lists-empty {
  margin-top: 0.25rem;
}

/* ---------- "Save to list" sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
}
.sheet[hidden] {
  display: none;
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.sheet-panel {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 75%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.5rem 2rem;
  border-radius: 1.5rem 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(30, 25, 22, 0.88);
  backdrop-filter: blur(20px);
  color: #fff;
}
@media (min-width: 768px) {
  .sheet-panel {
    left: 50%;
    right: auto;
    width: 480px;
    margin-left: -240px;
  }
}
.sheet-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.sheet-lists {
  margin-bottom: 1rem;
}
.sheet-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.sheet-row-name {
  flex: 1;
  font-weight: 600;
}
.sheet-row-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.sheet-row-check {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}
.sheet-row.is-on .sheet-row-check {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* ---------- feed status ---------- */

.filter-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  padding: 0.35em 0.85em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: pre;
  cursor: pointer;
}
.filter-badge[hidden],
.feed-empty[hidden] {
  display: none;
}

.feed-empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem 1.5rem;
  color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(160deg, #2a211c, #0d0b0a);
}
.feed-empty .details-name {
  color: #fff;
}

/* ---------- confirm dialog (replaces the browser's confirm()) ---------- */

.dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.dialog[hidden] {
  display: none;
}
.dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.dialog-panel {
  position: relative;
  width: min(360px, 100%);
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.5rem;
  background: rgba(30, 25, 22, 0.92);
  backdrop-filter: blur(20px);
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dialog-panel .sheet-title {
  margin-bottom: 0.5rem;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.pill-danger {
  background: var(--like);
  border-color: var(--like);
  color: #fff;
}

/* ---------- history ---------- */

/* Under the method once every step is ticked */
.done-banner {
  display: block;
  width: fit-content;
  margin: 0.5rem auto 0;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
}
.done-banner[hidden] {
  display: none;
}

/* "Used it all?" under the done banner (browse.js askUsedUp) */
.used-up {
  margin-top: 1rem;
}
.show-steps {
  display: block;
  margin: 1rem auto 0;
}
.show-steps[hidden] {
  display: none;
}
.used-up[hidden] {
  display: none;
}
.used-up-note {
  margin: -0.3rem 0 0.4rem;
  font-size: 0.8rem;
}
.used-up-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: #fff;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.used-up-row:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* "All gone" only shows once tapped */
.used-up-tag {
  flex: 0 0 auto;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
}
.used-up-row.is-gone .used-up-tag {
  opacity: 1;
  transform: none;
}
.used-up-row + .used-up-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.used-up-row .pill-name {
  flex: 1;
  min-width: 0;
}
.used-up-row.is-gone .pill-icon,
.used-up-row.is-gone .pill-name {
  opacity: 0.5;
}

.history-card .list-open:disabled {
  cursor: default;
}

/* ---------- splash ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(217, 98, 43, 0.25), transparent 60%),
    linear-gradient(160deg, #2a211c, #0d0b0a);
  will-change: transform;
  /* Safety net: if the script never runs, get out of the way anyway */
  animation: splash-fallback 0.4s ease 4s forwards;
}
@keyframes splash-fallback {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Each letter rises up from behind this edge */
.splash-word {
  display: flex;
  overflow: hidden;
  padding: 0 0.1em;
  color: #fff;
  font-size: clamp(2.5rem, 13vw, 7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.splash-letter {
  display: inline-block;
  opacity: 0; /* app.js brings each one in */
}

/* ---------- end of the feed ---------- */

/* One more screen below the last recipe; app.js slides it up and down */
.feed-end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background:
    radial-gradient(120% 80% at 100% 100%, rgba(217, 98, 43, 0.25), transparent 60%),
    linear-gradient(160deg, #2a211c, #0d0b0a);
  transform: translateY(100%); /* app.js takes over */
  will-change: transform;
}
/* Bottom-left, like the text on every other screen */
.feed-end-inner {
  padding: 5rem 1.5rem 2.5rem;
}
@media (min-width: 768px) {
  .feed-end-inner {
    padding: 6rem 4rem 4rem;
  }
}
.feed-end-note {
  margin: -0.75rem 0 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}