/* css/allergens.css — the allergen table: the top-nav affordance and the
 * full-screen overlay it opens.
 *
 * Finding #6 (venue, 2026-08-11). `style.css` is FROZEN (00-contracts.md §5
 * [A3]), so the whole feature is styled here; linked after it in index.html.
 *
 * The venue's constraint was "ne zavarja a rendelési folyamatot" — it must not
 * disturb the ordering flow. That is why this is an overlay over the live
 * screen rather than a screen of its own: nothing about the guest's order
 * changes while it is open, and closing it is a no-op rather than a route back.
 */

/* ===== THE AFFORDANCE =====
 * Sits at the right end of the `.top-nav` on the four screens where a guest is
 * still CHOOSING (categories, category list, option steps, confirm). Not on the
 * cart or anything past it: by then the decision is made, and every element on
 * those screens is about money.
 *
 * Quiet on purpose. `.top-nav-title` already carries `flex: 1` (style.css), so
 * this lands hard right without any margin trickery, next to the mode switch
 * where that is shown. Deliberately styled UNLIKE `.mode-switch-btn`'s solid
 * grey pill — an outline reads as secondary, and the mode switch is the more
 * consequential of the two controls in that corner.
 *
 * 56px tall: below the 64px used for money-critical controls, above the 44px
 * floor for a touch target on the 1080x1920 glass. */
.allergen-btn {
  flex-shrink: 0;
  background: transparent;
  border: 2px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0 22px;
  min-height: 56px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--mid-gray);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.allergen-btn:active {
  background: var(--light-gray);
  transform: scale(0.96);
}

/* ===== THE OVERLAY =====
 * `.overlay` (style.css) already supplies the fixed inset-0 backdrop, the blur,
 * `z-index: 100` and the flex centring, and `.overlay.active { display: flex }`
 * is the show/hide idiom every other dialog on this page uses. Only the sheet
 * inside it is ours — this is a full-bleed document, not a `.dialog` card. */
.allergen-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* Not 100%: the gap the backdrop keeps around the sheet is what tells the
   * guest this is a layer over their order rather than a new screen. */
  width: 96%;
  height: 96%;
}

/* The table is a single A4 page (portrait, 1:1.414) and the glass is 1080x1920
 * (1:1.78), so width is the binding constraint and the whole sheet fits with
 * room to spare for the button below it.
 *
 * Sized by its own aspect ratio (`max-width`/`max-height`, no `flex: 1`) rather
 * than stretched to fill the column. With `flex: 1` the <img> BOX grew to the
 * full 1747px while the painted table stayed 1465px, and the white background
 * below is painted on the box — so the sheet showed ~280px of empty white
 * banding above and below the table. Both maxima are set so a replacement table
 * in another shape still fits whole; `object-fit` then keeps it undistorted if
 * one of them ever binds. The venue swaps this file when the menu changes. */
.allergen-img {
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: var(--white);
}

/* At the BOTTOM, not the top corner. On a 1920px-tall portrait kiosk the top
 * right is above most guests' comfortable reach, and this is the control that
 * gets them out. Wide and unmissable for the same reason. */
.allergen-close {
  flex-shrink: 0;
  min-width: 300px;
  min-height: 76px;
  padding: 0 44px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--dark);
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s;
}
.allergen-close:active { transform: scale(0.97); }