/* ==========================================================================
   Home page (index.html). Loaded after marketing.css, which still supplies the
   pieces the demos share (bar cards, the shake timer, the guest menu, the
   glass drawings), so this file only adds the page's structure on top.

   The system, kept small on purpose:
   - Titles are the display serif. Everything else is the sans.
   - One gold, hairlines instead of boxes.
   - Every chapter reads the same way: a headline with a short standfirst
     beside it, then figures, each with a plain caption underneath.
   - Generous, even space between chapters so each one feels placed.
   ========================================================================== */

/* ---- The wall ----------------------------------------------------------- */
.wall {
  position: relative;
  z-index: 1;
  padding: 5.5rem 0 0;
  overflow: hidden;
}

.wall-inner {
  max-width: 1280px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
}

.wall-inner h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.12;
  color: var(--color-text-bright, #fff);
  max-width: 18ch;
  margin: 0 0 1rem;
}

.wall-inner p {
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary, #c9c3b8);
  margin: 0;
}

.wall-grid {
  display: grid;
  /* at most 12 columns: the wall holds 36 glasses, so three rows always fill (see ARCHITECTURE_AND_DECISION_GUIDE.md 3.15) */
  grid-template-columns: repeat(auto-fill, minmax(max(8.5rem, calc((100% - 8.25rem) / 12)), 1fr));
  gap: 0.75rem;
  padding: 0 0.75rem;
  max-height: 24.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
}

.wall-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 0.5rem 0.75rem;
  background: var(--color-bg-alt, #1a2433);
  border: 1px solid var(--color-border-subtle, rgba(235, 188, 114, 0.22));
  border-radius: var(--radius-sm, 4px);
  /* a quiet arrival: each card fades up a little, in a loose wave */
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: min(calc(var(--i) * 14ms), 450ms);
}

.wall.is-in .wall-card {
  opacity: 1;
  transform: none;
}

.wall-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5.25rem;
  background: none;
  border: 0;
  padding: 0;
}

.wall-glass img {
  height: 100%;
  width: auto;
  max-width: 100%;
}

.wall-name {
  font-size: 0.78rem;
  color: var(--color-text-muted, #a69f94);
  text-align: center;
  line-height: 1.25;
}

/* ---- Chapters ----------------------------------------------------------- */
.chapter {
  --card-pad: 1.4rem;
  --card-pad-x: 1.6rem;
  --row-gap: 0.6rem;
  --sec-gap: 1.4rem;
  --head-gap: 1.35rem;
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 7.5rem 2rem 0;
}

.chapter-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--color-border-active, rgba(235, 188, 114, 0.35));
}

.chapter-head h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.14;
  color: var(--color-text-bright, #fff);
  max-width: 24ch;
  margin: 0;
}

.chapter-lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary, #c9c3b8);
  max-width: 865px;
  margin: 0;
}

/* ---- Figures ------------------------------------------------------------ */
.plate-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 4.5rem;
  align-items: stretch;
}

.plate-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.plate {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.plate>.plate-card {
  flex: 1;
}

.plate-card {
  margin: 0;
}

/* A caption is a short title and one plain sentence. */
figcaption {
  margin-top: 1.1rem;
  max-width: 30rem;
}

/* Subgrid row alignment: binds cards to row 1 and captions to row 2 */
@supports (grid-template-rows: subgrid) {
  .plate-row {
    grid-template-rows: auto auto;
    row-gap: 1.1rem;
  }

  .plate-row.three {
    grid-template-rows: auto auto;
  }

  .plate {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    min-width: 0;
  }

  .plate>.plate-card {
    height: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .plate figcaption {
    margin-bottom: 0.8rem;
    max-width: 100%;
  }
}

figcaption h3 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--color-text-bright, #fff);
  margin: 0 0 0.35rem;
}

figcaption p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted, #a69f94);
  margin: 0;
}

/* ---- The pour ----------------------------------------------------------- */
.pour {
  --fill: 1;
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 8rem auto 0;
  padding: 6rem 2rem 7rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  border-top: 1px solid var(--color-border-active, rgba(235, 188, 114, 0.35));
}

.pour-glass.showcase-visual {
  display: flex;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pour-glass.is-garnished {
  filter: drop-shadow(0 10px 32px rgba(200, 16, 46, 0.28));
}

.pour-glass .speakeasy-glass-svg {
  width: 100%;
  max-width: 17rem;
  height: auto;
  margin: 0;
  transform-origin: 120px 200px;
}

/* the liquid rises with scroll; the glass outline stays put. (The glass-shaped
   clip already lives on .fluid-stack, so the rising edge goes on its child.) */
.pour-glass .fluid-layered-group,
.pour-glass .fluid-blended-group {
  clip-path: inset(calc((1 - var(--fill, 1)) * 100%) 0 0 0);
}

.pour-glass .fluid-bubble {
  display: none;
}

/* Negroni pour & mix flourish animations */
@keyframes pourSwirlForward {
  0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
  }
  15% {
    transform: rotate(-3deg) scale(1.02) translateY(-2px);
  }
  32% {
    transform: rotate(3.5deg) scale(1.03) translateY(-1px);
    filter: drop-shadow(0 12px 28px rgba(200, 16, 46, 0.35));
  }
  48% {
    transform: rotate(-2.5deg) scale(1.015);
  }
  65% {
    transform: rotate(1.5deg) scale(1.01) translateY(-0.5px);
  }
  82% {
    transform: rotate(-0.5deg) scale(1.003);
  }
  100% {
    transform: rotate(0deg) scale(1) translateY(0);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  }
}

@keyframes pourSwirlBackward {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(2.5deg) scale(1.015) translateY(-1px);
  }
  50% {
    transform: rotate(-2deg) scale(1.02);
  }
  75% {
    transform: rotate(1deg) scale(1.005);
  }
  100% {
    transform: rotate(0deg) scale(1) translateY(0);
  }
}

.pour-glass .speakeasy-glass-svg.is-blending-forward {
  animation: pourSwirlForward 850ms cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.pour-glass .speakeasy-glass-svg.is-blending-backward {
  animation: pourSwirlBackward 750ms cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

/* Orange twist garnish: hidden during initial pour, dropped on rim after mix */
.pour-glass .garnish {
  opacity: 0;
  transform-origin: 0 0;
  transform: translate(192px, 56px) rotate(-14deg) scale(0.65);
  transition: opacity 280ms ease, transform 350ms ease;
  pointer-events: none;
}

.pour-glass.is-garnished .garnish {
  opacity: 1;
  transform-origin: 0 0;
  transform: translate(192px, 96px) rotate(8deg) scale(1);
  animation: pourGarnishDrop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pourGarnishDrop {
  0% {
    opacity: 0;
    transform: translate(192px, 56px) rotate(-14deg) scale(0.65);
  }
  52% {
    opacity: 1;
    transform: translate(192px, 99px) rotate(10deg) scale(1.03);
  }
  76% {
    transform: translate(192px, 94.5px) rotate(7deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translate(192px, 96px) rotate(8deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pour-glass .garnish {
    opacity: 1 !important;
    transform: translate(192px, 96px) rotate(8deg) scale(1) !important;
    animation: none !important;
    transition: none !important;
  }
  .pour-glass.is-garnished {
    transition: none !important;
  }
  .pour-glass .speakeasy-glass-svg.is-blending-forward,
  .pour-glass .speakeasy-glass-svg.is-blending-backward {
    animation: none !important;
  }
}

.pour-copy h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--color-text-bright, #fff);
  margin: 0 0 1rem;
}

.pour-copy p {
  max-width: 30rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary, #c9c3b8);
  margin: 0 0 2rem;
}

/* the closing sections share the chapters' left edge and rhythm */
.trust-grid-section,
.landing-docs-section {
  max-width: 1280px;
}

.trust-grid-section {
  padding-top: 7.5rem;
}

/* ---- Guides & Documentation (4-column editorial text grid) ------------- */
.landing-docs-section {
  position: relative;
  z-index: 1;
  padding: 6rem 2rem 0;
  border-top: 1px solid var(--color-border-subtle, rgba(235, 188, 114, 0.22));
}

.docs-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2.75rem;
}

.docs-header h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-text-bright, #fff);
  margin: 0;
}

.docs-header-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #c9c3b8);
  margin: 0;
  max-width: 44ch;
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.docs-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease;
}

.docs-item:focus-visible,
.docs-all-link:focus-visible {
  outline: 2px solid var(--color-accent, #ebbc72);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 4px);
}

.docs-item-title {
  font-family: var(--font-display, 'Gurmukhi MN', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-bright, #ffffff);
  margin: 0 0 0.65rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  transition: color 160ms ease;
}

.docs-arrow {
  color: var(--color-accent, #ebbc72);
  font-size: 1.1rem;
  transition: transform 180ms ease, color 160ms ease;
  flex-shrink: 0;
}

.docs-item-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #c9c3b8);
  margin: 0;
  transition: color 160ms ease;
}

.docs-item:hover .docs-item-title {
  color: var(--color-accent-light, #f3cf8e);
}

.docs-item:hover .docs-arrow {
  transform: translateX(4px);
  color: var(--color-accent-light, #f3cf8e);
}

.docs-item:hover .docs-item-desc {
  color: var(--color-text-bright, #fff);
}

.docs-all-row {
  margin-top: 2.5rem;
}

.docs-all-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent, #ebbc72);
  text-decoration: none;
  transition: color 150ms ease;
}

.docs-all-link .docs-arrow {
  color: var(--color-accent, #ebbc72);
  transition: transform 180ms ease, color 150ms ease;
}

.docs-all-link:hover {
  color: var(--color-accent-light, #f3cf8e);
}

.docs-all-link:hover .docs-arrow {
  transform: translateX(4px);
  color: var(--color-accent-light, #f3cf8e);
}

/* ---- Narrower screens --------------------------------------------------- */
@media (max-width: 1000px) {
  .chapter-head {
    gap: 1.25rem;
  }

  .plate-row,
  .plate-row.three {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 3.25rem;
  }

  .plate {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .plate figcaption {
    margin-top: 1.1rem;
  }

  .pour {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

@media (max-width: 700px) {
  .chapter {
    padding: 4.5rem 1.25rem 0;
  }

  .chapter-head {
    margin-bottom: 2.25rem;
  }

  .wall {
    padding-top: 4rem;
  }

  .wall-inner {
    padding: 0 1.25rem;
  }

  .wall-grid {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    max-height: 26rem;
  }

  .pour {
    padding: 4rem 1.25rem 5rem;
    margin-top: 5rem;
  }

  .trust-grid-section {
    padding-top: 4.5rem;
  }

  .landing-docs-section {
    padding-top: 4.5rem;
  }

  .docs-header {
    margin-bottom: 2rem;
  }

  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .docs-all-row {
    margin-top: 2rem;
  }
}

/* ---- Reduced motion: the wall is simply there, the glass is simply full -- */
@media (prefers-reduced-motion: reduce) {
  .wall-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pour {
    --fill: 1 !important;
  }
}

/* when a card is stretched to match its neighbour, its content sits in the middle */
.plate-card .demo-cocktail-card {
  margin-block: auto;
}

/* in the row of three, every plate-card stretches to fill row 1 */
.plate-row.three .plate>.plate-card {
  height: 100%;
}

/* ---- The shelf: Backbar, Acquisitions, and Recipe Spec ------------------ */
#moment-shelf .plate-card {
  background: var(--color-surface, #2c3c54);
  border: 1px solid var(--color-border-subtle, rgba(235, 188, 114, 0.22));
  border-radius: var(--radius-sm, 4px);
  padding: 1.75rem 2rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* 1. Bar Switcher */
#moment-shelf .bar-card-switch {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

#moment-shelf .bar-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 4px);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: all 160ms ease;
}

#moment-shelf .bar-card-radio {
  display: none;
}

#moment-shelf .bar-card-name {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-bright, #fff);
}

#moment-shelf .bar-card-count {
  font-size: var(--text-label, 0.75rem);
  color: var(--color-text-muted, #a69f94);
}

#moment-shelf .bar-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

#moment-shelf .bar-card.active {
  background: rgba(212, 163, 89, 0.08);
  border-color: rgba(212, 163, 89, 0.45);
}

#moment-shelf .bar-card.active .bar-card-name {
  color: var(--color-text-bright, #fff);
}

#moment-shelf .bar-card.active .bar-card-count {
  color: var(--color-accent, #ebbc72);
}

#moment-shelf .ready-count,
#moment-shelf .swap-kicker {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
  margin-bottom: 0.75rem;
  padding: 0;
  line-height: 1.2;
}

/* 2. Ingredients on Hand (matches in-app .backbar-pill) */
#moment-shelf .backbar-shelf-section {
  margin-bottom: 0.85rem;
}

#moment-shelf .backbar-shelf-caption {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
  margin-bottom: 0.5rem;
}

#moment-shelf .bottle-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#moment-shelf .bottle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--radius-sm, 4px);
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted, #a69f94);
  cursor: pointer;
  user-select: none;
  transition: all 160ms ease;
}

#moment-shelf .bottle-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--color-text-bright, #fff);
}

#moment-shelf .bottle-chip.active {
  background: rgba(212, 163, 89, 0.14);
  border-color: rgba(212, 163, 89, 0.45);
  color: #fdfdfd;
}

#moment-shelf .bottle-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label, 0.75rem);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease;
}

#moment-shelf .bottle-chip.active .bottle-dot {
  transform: scale(1.08);
}

#moment-shelf .bottle-name {
  line-height: 1.2;
}

/* 3. Ready Drinks List */
#moment-shelf .ready-drink-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0;
  min-height: 8rem;
}

#moment-shelf .ready-drink {
  min-height: 2.35rem;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  background: rgba(2, 15, 32, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm, 4px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#moment-shelf .ready-drink.is-ready {
  background: rgba(2, 15, 32, 0.3);
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 1;
}

#moment-shelf .ready-drink.is-unready {
  background: rgba(2, 15, 32, 0.14);
  border-color: rgba(255, 255, 255, 0.03);
  opacity: 0.38;
}

#moment-shelf .ready-drink.is-unready .ready-drink-title {
  color: var(--color-text-muted, #a69f94);
}

#moment-shelf .ready-drink-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#moment-shelf .ready-drink-title {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-bright, #fff);
}

#moment-shelf .ready-drink-tag {
  font-size: var(--text-label, 0.75rem);
  font-weight: 500;
  color: var(--color-accent, #ebbc72);
}

/* 5. Manhattan spec */
#moment-shelf .demo-cocktail-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-block: 0;
}

#moment-shelf .demo-cocktail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#moment-shelf .demo-cocktail-name {
  font-family: var(--font-display, 'Gurmukhi MN', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-text-bright, #ffffff);
}

#moment-shelf .demo-cocktail-meta {
  font-size: var(--text-label, 0.75rem);
  color: var(--color-text-muted, #a69f94);
}

#moment-shelf .demo-sub-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: rgba(235, 188, 114, 0.06);
  border: 1px solid rgba(235, 188, 114, 0.2);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.78rem;
  color: var(--color-text-secondary, #f0eae1);
  line-height: 1.35;
}

#moment-shelf .demo-sub-banner strong {
  color: var(--color-accent, #ebbc72);
}

#moment-shelf .btn-sub-apply-link {
  background: none;
  border: none;
  color: var(--color-accent, #ebbc72);
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 2px;
  transition: all 160ms ease;
  white-space: nowrap;
}

#moment-shelf .btn-sub-apply-link:hover {
  color: var(--color-accent-light, #f3cf8e);
}

#moment-shelf .demo-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#moment-shelf .demo-spec-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: rgba(2, 15, 32, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm, 4px);
}

#moment-shelf .demo-spec-amount {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-accent, #ebbc72);
  min-width: 48px;
  flex-shrink: 0;
}

#moment-shelf .demo-spec-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

#moment-shelf .demo-spec-name {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-bright, #fff);
}

#moment-shelf .btn-sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  background: rgba(235, 188, 114, 0.08);
  border: 1px solid rgba(235, 188, 114, 0.25);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-label, 0.75rem);
  font-weight: 500;
  color: var(--color-accent, #ebbc72);
  cursor: pointer;
  line-height: 1.2;
  transition: all 160ms ease;
}

#moment-shelf .btn-sub-chip:hover {
  background: rgba(235, 188, 114, 0.16);
  border-color: rgba(235, 188, 114, 0.45);
}

#moment-shelf .demo-stock-toggle {
  font-size: var(--text-label, 0.75rem);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
  flex-shrink: 0;
}

#moment-shelf .demo-stock-toggle.in-stock {
  color: var(--color-text-muted, #a69f94);
}

#moment-shelf .demo-stock-toggle.in-stock .stock-check-glyph {
  color: var(--color-accent, #ebbc72);
  font-weight: bold;
}

#moment-shelf .demo-stock-toggle.out-of-stock {
  background: transparent;
  border: 1px solid rgba(235, 188, 114, 0.3);
  color: var(--color-accent, #ebbc72);
  font-weight: 500;
}

/* 6. Manhattan preparation steps (matches in-app .card-method-list) */
#moment-shelf .card-instructions {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#moment-shelf .card-method-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#moment-shelf .card-method-ordered {
  counter-reset: method-counter;
}

#moment-shelf .card-method-ordered>li {
  counter-increment: method-counter;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: baseline;
  line-height: 1.55;
  color: var(--color-text-secondary, #f0eae1);
  font-size: 0.85rem;
}

#moment-shelf .card-method-ordered>li::before {
  content: counter(method-counter) ".";
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-accent-light, #f3cf8e);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

#moment-shelf .card-method-ordered>li span {
  color: var(--color-text-secondary, #f0eae1);
}

/* ---- The counter: Step Timing, Allergen Safety, and Nutrition ----------- */
#moment-counter .counter-plate-card {
  background: var(--color-surface, #2c3c54);
  border: 1px solid var(--color-border-subtle, rgba(235, 188, 114, 0.22));
  border-radius: var(--radius-sm, 4px);
  padding: 1.5rem 1.25rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 13.5rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#moment-counter .counter-timer {
  margin: 0;
  align-self: center;
}

/* Dietary swap preview card refinements */
#moment-counter .diet-preview-box {
  background: rgba(2, 15, 32, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 4px);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#moment-counter .diet-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#moment-counter .diet-preview-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-bright, #fff);
}

#moment-counter .btn-foamer-swap {
  font-size: var(--text-label, 0.75rem);
  padding: 0.22rem 0.5rem;
  white-space: nowrap;
}

#moment-counter .diet-notes {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 2.85rem;
}

#moment-counter #diet-contains-row {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-secondary, #f0eae1);
}

#moment-counter .diet-notes-label {
  margin-right: 0.4rem;
  font-size: var(--text-label, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
}

#moment-counter .diet-notes-swap {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-accent-light, #f3cf8e);
  font-weight: 600;
}

/* Calorie estimate preview refinements */
#moment-counter .calorie-estimate-preview {
  background: rgba(2, 15, 32, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 4px);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#moment-counter .calorie-preview-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#moment-counter .calorie-drink-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-bright, #fff);
}

#moment-counter .calorie-drink-meta {
  font-size: var(--text-label, 0.75rem);
  color: var(--color-text-muted, #a69f94);
}

#moment-counter .calorie-total-badge {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-accent-light, #f3cf8e);
  white-space: nowrap;
}

#moment-counter .calorie-preview-breakdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #a69f94);
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#moment-counter .calorie-sep {
  color: rgba(235, 188, 114, 0.4);
}

/* ---- The hospitality: Guest Quiz, Menu Preview, Prep Matrix, and Flavor Radar ---- */
#moment-hospitality .plate-row+.plate-row {
  margin-top: 6rem;
}

#moment-hospitality .plate-row:first-of-type figcaption {
  margin-top: 1.25rem;
  padding-bottom: 0.5rem;
}

#moment-hospitality .plate-card {
  background: var(--color-surface, #2c3c54);
  border: 1px solid var(--color-border-subtle, rgba(235, 188, 114, 0.22));
  border-radius: var(--radius-sm, 4px);
  padding: 1.5rem 1.6rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Eyebrows matching #moment-shelf .swap-kicker */
#moment-hospitality .quiz-kicker,
#moment-hospitality .guest-menu-kicker,
#moment-hospitality .radar-kicker {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
  margin-bottom: 0.75rem;
  padding: 0;
  line-height: 1.2;
}

#moment-hospitality .radar-kicker {
  margin: 0 auto 0.75rem auto;
  font-size: 0.85rem;
}

/* 1. Quiz Module */
#moment-hospitality .home-quiz {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#moment-hospitality .home-quiz-step,
#moment-hospitality .home-quiz-result {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#moment-hospitality .home-quiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.35rem;
  margin-bottom: 0.6rem;
}

#moment-hospitality .home-quiz-back {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--color-text-muted, #a69f94);
  cursor: pointer;
  transition: color 150ms ease;
}

#moment-hospitality .home-quiz-back:hover {
  color: var(--color-accent-light, #f3cf8e);
}

#moment-hospitality .home-quiz-progress {
  display: inline-flex;
  gap: 0.35rem;
}

#moment-hospitality .home-quiz-progress i {
  display: inline-block;
  width: 1.35rem;
  height: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 160ms ease;
}

#moment-hospitality .home-quiz-progress i.on {
  background: var(--color-accent, #ebbc72);
}

#moment-hospitality .home-quiz-q {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.85rem);
  font-weight: 400;
  color: var(--color-text-bright, #fff);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}

#moment-hospitality .home-quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#moment-hospitality .home-quiz-opt {
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-text-secondary, #f0eae1);
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm, 4px);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: all 150ms ease;
}

#moment-hospitality .home-quiz-opt:hover {
  border-color: rgba(235, 188, 114, 0.45);
  color: var(--color-text-bright, #fff);
}

#moment-hospitality .home-quiz-opt.is-chosen {
  background: rgba(235, 188, 114, 0.15);
  border-color: var(--color-accent, #ebbc72);
  color: var(--color-accent-light, #f3cf8e);
}

#moment-hospitality .home-quiz-note {
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--text-label, 0.75rem);
  color: var(--color-text-muted, #a69f94);
}

#moment-hospitality .home-quiz-caption {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
  margin-bottom: 0.45rem;
}

#moment-hospitality .home-quiz-top-pick {
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm, 4px);
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: border-color 150ms ease;
  margin-bottom: 0.85rem;
}

#moment-hospitality .home-quiz-top-pick:hover {
  border-color: rgba(235, 188, 114, 0.4);
}

#moment-hospitality .home-quiz-runners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

#moment-hospitality .home-quiz-runner {
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 4px);
  padding: 0.6rem 0.75rem;
  text-decoration: none;
  transition: border-color 150ms ease;
}

#moment-hospitality .home-quiz-runner:hover {
  border-color: rgba(235, 188, 114, 0.4);
}

#moment-hospitality .home-quiz-result-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
}

#moment-hospitality .home-quiz-restart {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--color-text-muted, #a69f94);
  cursor: pointer;
  transition: color 150ms ease;
}

#moment-hospitality .home-quiz-restart:hover {
  color: var(--color-accent-light, #f3cf8e);
  text-decoration: underline;
}

/* 2. Guest Menu Module */
#moment-hospitality .guest-menu-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

#moment-hospitality .guest-menu-header-row .guest-menu-kicker {
  margin-bottom: 0;
}

#moment-hospitality .guest-mood-filter-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#moment-hospitality .guest-mood-chip {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #a69f94);
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm, 4px);
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  transition: all 150ms ease;
}

#moment-hospitality .guest-mood-chip:hover {
  border-color: rgba(235, 188, 114, 0.4);
  color: var(--color-text-bright, #fff);
}

#moment-hospitality .guest-mood-chip.active {
  background: rgba(235, 188, 114, 0.14);
  border-color: var(--color-accent, #ebbc72);
  color: var(--color-accent-light, #f3cf8e);
}

#moment-hospitality .guest-menu-cards-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0.2rem 0 0.5rem;
  min-height: 295px;
  position: relative;
}

#moment-hospitality .guest-menu-card {
  position: relative;
  border-radius: var(--radius-sm, 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.85rem 0.65rem 0.95rem;
  flex: 0 0 calc((100% - 1.5rem) / 3);
  max-width: calc((100% - 1.5rem) / 3);
  width: calc((100% - 1.5rem) / 3);
  box-sizing: border-box;
  opacity: 1;
  transform: scale(1);
  transform-origin: center center;
  border: 1px solid rgba(235, 188, 114, 0.2);
  background:
    radial-gradient(90% 55% at 50% 25%, rgba(212, 163, 89, 0.08), transparent 70%),
    rgba(2, 14, 30, 0.55);
  color: var(--color-text, #f0eae1);
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#moment-hospitality .guest-menu-card:hover {
  border-color: rgba(235, 188, 114, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

#moment-hospitality .guest-menu-card.is-pick {
  border-color: rgba(235, 188, 114, 0.35);
}

#moment-hospitality .guest-menu-card.is-requested {
  border-color: rgba(77, 131, 99, 0.8);
  background:
    radial-gradient(90% 55% at 50% 25%, rgba(77, 131, 99, 0.14), transparent 70%),
    rgba(2, 14, 30, 0.65);
}

#moment-hospitality .guest-menu-card-pick {
  height: 1.35rem;
  line-height: 1.25rem;
  box-sizing: border-box;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-light, #f3cf8e);
  background: rgba(235, 188, 114, 0.12);
  border: 1px solid rgba(235, 188, 114, 0.25);
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  margin-bottom: 0.35rem;
}

#moment-hospitality .guest-menu-card-pick.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#moment-hospitality .guest-menu-card-glass {
  flex: 0 0 115px;
  height: 115px;
  min-height: 115px;
  max-height: 115px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin: 0 0 0.45rem;
  box-sizing: border-box;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

#moment-hospitality .guest-menu-card-glass .speakeasy-glass-svg,
#moment-hospitality .guest-menu-card-glass svg {
  height: 100%;
  max-height: 115px;
  width: auto;
  max-width: 100%;
  display: block;
}

#moment-hospitality .guest-menu-card-name {
  font-family: var(--font-display, 'Gurmukhi MN', Georgia, serif);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-text-bright, #ffffff);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25rem;
  height: 1.25rem;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}

#moment-hospitality .guest-menu-card-blurb {
  font-size: var(--text-label, 0.75rem);
  line-height: 1.35;
  color: var(--color-text-muted, #a2b0c2);
  margin: 0 0 0.75rem;
  height: 2.7em;
  min-height: 2.7em;
  max-height: 2.7em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
}

#moment-hospitality .guest-card-action {
  font-family: inherit;
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent, #ebbc72);
  background: rgba(235, 188, 114, 0.08);
  border: 1px solid rgba(235, 188, 114, 0.28);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  margin-top: auto;
  flex-shrink: 0;
  transition: all 150ms ease;
}

#moment-hospitality .guest-menu-card:hover .guest-card-action {
  background: var(--color-accent, #ebbc72);
  color: var(--color-on-accent, #192331);
}

#moment-hospitality .guest-menu-card.is-requested .guest-card-action {
  background: rgba(77, 131, 99, 0.25);
  border-color: rgba(77, 131, 99, 0.7);
  color: #92e0b1;
}

/* 3. Event Prep Module */
#moment-hospitality .prep-menu-selector {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#moment-hospitality .prep-menu-label {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
}

#moment-hospitality .prep-drink-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

#moment-hospitality .prep-drink-pill {
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--color-text-muted, #a69f94);
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm, 4px);
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  transition: all 150ms ease;
}

#moment-hospitality .prep-drink-pill:hover {
  border-color: rgba(235, 188, 114, 0.4);
  color: var(--color-text-bright, #fff);
}

#moment-hospitality .prep-drink-pill.active {
  background: rgba(235, 188, 114, 0.14);
  border-color: var(--color-accent, #ebbc72);
  color: var(--color-accent-light, #f3cf8e);
}

#moment-hospitality .prep-breakdown-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#moment-hospitality .prep-pane {
  background: rgba(2, 15, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 4px);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
}

#moment-hospitality .prep-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#moment-hospitality .prep-pane-title {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a69f94);
}

#moment-hospitality .prep-pane-badge {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  color: var(--color-accent-light, #f3cf8e);
}

@keyframes prepRowFadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#moment-hospitality .prep-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 155px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-right: 0.3rem;
}

#moment-hospitality .prep-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text-bright, #ffffff);
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  animation: prepRowFadeIn 160ms ease-out both;
}

#moment-hospitality .prep-item-row > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#moment-hospitality .prep-item-tag {
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
}

#moment-hospitality .prep-item-tag.in-bar {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted, #a69f94);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#moment-hospitality .prep-item-tag.need-buy {
  background: rgba(235, 188, 114, 0.12);
  color: var(--color-accent-light, #f3cf8e);
  border: 1px solid rgba(235, 188, 114, 0.35);
}

#moment-hospitality .prep-summary-bar {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: var(--color-text-secondary, #f0eae1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#moment-hospitality .prep-summary-bar strong {
  color: var(--color-accent-light, #f3cf8e);
}

/* 4. Flavor Radar Module */
#moment-hospitality .flavor-breakout-visual {
  margin: 0.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#moment-hospitality .flavor-radar-shape {
  transition: fill 240ms ease, stroke 240ms ease;
}

#moment-hospitality .hospitality-radar-panel .flavor-toggle {
  margin-top: auto;
}

/* ==========================================================================
   Phones and narrow columns
   These live at the END of the file on purpose: they override the desktop
   rules above, which have the same specificity, so source order decides. Put
   them earlier and they silently do nothing.

   Card contents respond to the CARD'S width (container queries), not the
   screen's, because a card is just as narrow in a tablet-width column as on a
   phone. Only the card's own padding, which a container can't style on
   itself, keys off the screen.
   ========================================================================== */
#moment-shelf .plate-card,
#moment-hospitality .plate-card {
  container: plate / inline-size;
}

@media (max-width: 700px) {
  .plate-card,
  #moment-shelf .plate-card,
  #moment-hospitality .plate-card {
    padding: 1.35rem 1rem;
  }
}

/* Shopping list: stack the two panes once there isn't room for a full
   ingredient name beside its status badge, and let the list run its full
   length (an inner scrollbar is awkward on a touch screen). */
@container plate (max-width: 520px) {
  #moment-hospitality .prep-breakdown-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  #moment-hospitality .prep-items-list,
  #moment-hospitality .prep-pane:first-child .prep-items-list,
  #moment-hospitality .prep-pane:last-child .prep-items-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  #moment-hospitality .prep-item-row > span:first-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Guest menu and the swap banner: compact once each of the three drinks has
   under about 130px to itself. */
@container plate (max-width: 430px) {
  #moment-shelf .demo-sub-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
  }

  #moment-shelf .demo-sub-banner span {
    font-size: 0.76rem;
    line-height: 1.3;
  }

  #moment-shelf .btn-sub-apply-link {
    font-size: var(--text-label, 0.75rem);
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  #moment-hospitality .guest-menu-cards-grid {
    gap: 0.45rem;
    min-height: auto;
    margin: 0.2rem 0 0.4rem;
  }

  #moment-hospitality .guest-menu-card {
    flex: 0 0 calc((100% - 0.9rem) / 3);
    max-width: calc((100% - 0.9rem) / 3);
    width: calc((100% - 0.9rem) / 3);
    padding: 0.65rem 0.3rem 0.75rem;
  }

  #moment-hospitality .guest-menu-card-pick {
    height: 1.15rem;
    line-height: 1.1rem;
    font-size: var(--text-label, 0.75rem);
    letter-spacing: 0.02em;
    padding: 0.05rem 0.25rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
  }

  #moment-hospitality .guest-menu-card-glass {
    flex: 0 0 92px;
    height: 92px;
    min-height: 92px;
    max-height: 92px;
    margin-bottom: 0.35rem;
  }

  /* two lines are allowed, so "Tom Collins" never has to spill out of its card */
  #moment-hospitality .guest-menu-card-name {
    font-size: var(--text-label, 0.75rem);
    letter-spacing: 0;
    line-height: 1.1rem;
    height: 2.2rem;
    white-space: normal;
    text-align: center;
    margin-bottom: 0.2rem;
  }

  /* room for three short lines, so "Gin · Vermouth · Campari" isn't cut off */
  #moment-hospitality .guest-menu-card-blurb {
    font-size: var(--text-label, 0.75rem);
    line-height: 1.25;
    margin-bottom: 0.6rem;
    height: 3.75em;
    min-height: 3.75em;
    max-height: 3.75em;
  }

  #moment-hospitality .guest-card-action {
    font-size: var(--text-label, 0.75rem);
    padding: 0.28rem 0.4rem;
    width: 100%;
    max-width: 5rem;
  }
}

/* The flavor switcher wraps instead of scrolling sideways out of sight */
@container plate (max-width: 430px) {
  #moment-hospitality .hospitality-radar-panel .flavor-toggle {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    border-radius: 1.1rem;
    row-gap: 2px;
  }
}

/* One gutter on phones: the closing sections line up with the chapters. */
@media (max-width: 700px) {
  .trust-grid-section,
  .landing-docs-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---- Reserve room for what the page script fills in ----------------------
   The wall, the shelf's lists, the quiz and the radar are drawn by script.
   Holding their final size beforehand means nothing below them jumps. */
.wall-grid {
  min-height: 24.5rem;
}

#moment-shelf .ready-drink-list {
  min-height: 11.9rem;
}

#moment-shelf .ready-count {
  min-height: 1.4em;
}

/* The quiz measures and locks its exact height when it first draws; until then
   it holds about the same room (the measured values at each size). */
#moment-hospitality .home-quiz {
  min-height: 24.75rem;
}

@media (max-width: 480px) {
  #moment-hospitality .home-quiz {
    min-height: 25.4rem;
  }
}

@media (min-width: 1001px) {
  #moment-hospitality .home-quiz {
    min-height: 21rem;
  }
}

@media (min-width: 1200px) {
  #moment-shelf .ready-drink-list {
    min-height: 13.3rem;
  }
}

@media (max-width: 700px) {
  .wall-grid {
    min-height: 26rem;
  }
}

/* the radar is drawn by script; hold its size so nothing below it jumps */
#flavor-radar-mount {
  min-height: 280px;
}

@media (max-width: 480px) {
  #flavor-radar-mount {
    min-height: 230px;
  }
}

/* ---- Hero headline: the tagline takes its place on phones ----------------
   Below 600px the header drops its "The Craft Cocktail Companion" line to save
   room, so the hero says it instead. Both live in the h1; only one is shown
   (display:none also hides the other from screen readers). */
.hero-title-narrow {
  display: none;
}

@media (max-width: 600px) {
  .hero-title-wide {
    display: none;
  }

  .hero-title-narrow {
    display: inline;
  }
}

/* the quiz's result glasses are pre-drawn pictures (assets/glasses/<id>.svg) */
.home-shuffle-glass img {
  width: 100%;
  height: 100%;
  max-width: 145px;
  max-height: 145px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}