/* Hide vertical scroll indicators without disabling wheel, touch or keyboard scrolling. */
html,
body,
dialog,
.dialog-content,
.tea-recipe-content,
.japanese-detail-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
dialog::-webkit-scrollbar,
.dialog-content::-webkit-scrollbar,
.tea-recipe-content::-webkit-scrollbar,
.japanese-detail-content::-webkit-scrollbar {
  width: 0;
}

/* Every recipe: top-aligned full drink, then one continuous recipe scroll. */
@media all {
  .recipe-dialog[open] {
    display: block;
    height: auto;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 12px auto;
  }
  .tea-recipe-dialog { margin: 12px auto; max-height: calc(100svh - 24px); }
  .tea-recipe-layout,
  .japanese-detail-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .tea-recipe-layout { gap: 24px; padding: 0 24px 32px; }
  .dialog-media,
  .japanese-detail-media {
    display: grid;
    place-items: start center;
    min-height: 0;
    padding: 0 24px;
  }
  .dialog-media img,
  .tea-recipe-media img,
  .japanese-detail-media img {
    display: block;
    width: calc(100% * var(--recipe-photo-scale, .7));
    height: auto;
    max-width: 100%;
    max-height: calc((100svh - 72px) * var(--recipe-photo-scale, .7));
    object-fit: contain;
    object-position: center top;
    transform: none;
    mask-image: none;
  }
  .dialog-content,
  .tea-recipe-content,
  .japanese-detail-content {
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    justify-content: flex-start;
  }
  .dialog-content,
  .japanese-detail-content { padding: 24px 24px 36px; }
  .tea-recipe-content { width: 100%; max-width: 960px; margin-inline: auto; }
}

/* Portrait dialogs shrink to their contents and remain centered. */
@media (orientation: portrait) {
  .recipe-dialog[open],
  .tea-recipe-dialog {
    height: fit-content;
    min-height: 0;
    max-height: calc(100svh - 24px);
    margin: auto;
  }
  .dialog-content { padding: 16px 24px 24px; }
  .tea-recipe-layout { gap: 16px; padding-bottom: 24px; }
  .recipe-instruction:empty { display: none; }
}

/* Landscape: keep the drink on the left while the recipe scrolls on the right. */
@media (orientation: landscape) {
  .recipe-dialog[open],
  .tea-recipe-layout,
  .japanese-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-rows: minmax(0, auto);
    height: auto;
    max-height: calc(100svh - 24px);
    min-height: 0;
    overflow: hidden;
    align-items: center;
  }
  .recipe-dialog[open],
  .tea-recipe-dialog { width: min(1100px, calc(100% - 32px)); height: fit-content; margin: auto; }
  .tea-recipe-dialog { overflow: hidden; }
  .tea-recipe-layout { gap: 0; padding: 0; }
  .tea-recipe-close { position: absolute; top: 16px; right: 16px; margin: 0; float: none; }
  .dialog-media,
  .tea-recipe-media,
  .japanese-detail-media {
    min-width: 0;
    min-height: 0;
    padding: 24px 12px;
    display: grid;
    place-items: center;
  }
  .dialog-content,
  .tea-recipe-content,
  .japanese-detail-content {
    height: auto;
    min-height: 0;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 48px 32px;
    margin: 0;
    max-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ingredient-format-row,
  .japanese-ingredient-row {
    grid-template-columns: minmax(0, 1fr) minmax(42px, auto) minmax(36px, auto);
    gap: 8px;
  }
  .ingredient-format-row span:first-child,
  .japanese-ingredient-row span:first-child { grid-column: auto; }
}