/* TEMPLATE: glass ("Vetro liquido"). Translucent glass over a background that takes the colours of the restaurant, in the manner of Apple's iOS 26.
   Written against contract 1 (docs/templates.md): it sets the tokens documented at the top of css/menu.css and adds rules under .menu (the page) and .m-scope (the sheets).

   HOW IT IS BUILT
   - Every colour comes from the restaurant's own (--m-accent and friends, written on .menu by the page): change the colour in the profile and the whole glass changes with it.
   - Glass = a translucent surface (--glass-glass*) + a lit rim (border + inset highlight) + a soft drop shadow. The blur (backdrop-filter) is only on the few surfaces that have something
     to blur behind them: the name plate over the cover, the sticky section bar, the search and filter pills, the sheets. Dish cards are translucent without a blur of their own:
     a blur on every one of sixty cards would cost the battery of a phone, and over a smooth background it shows nothing anyway.
   - TEXT: whatever carries the restaurant's colour as text (--m-at) sits on a surface that is at least as light (light scheme) or as dark (dark scheme) as the soft tint --m-at was
     checked against, so its 4.5:1 holds. The pixel test of tests/e2e/test_templates_look.py measures it on the rendered page, for extreme colours too.
   - iPhone Safari: nothing here is fixed or sticky edge to edge, there is no fixed full-screen layer (the background is on the page, it scrolls with it), the sticky bar stays a pill. */

/* ---------------------------------------------------------------------------------------------------- tokens: light */
.menu, .m-scope {
  --glass-base: color-mix(in srgb, var(--m-accent) 5%, #f1f4fb);                                   /* the page under the glass */
  --glass-solid: #ffffff;                                                                          /* what glass becomes when transparency is not wanted */
  --glass-glass: rgba(255, 255, 255, .66);                                                         /* a card */
  --glass-strong: rgba(255, 255, 255, .85);                                                         /* a surface that carries text over something that moves or has a picture */
  --glass-quiet: rgba(255, 255, 255, .5);                                                          /* a calm area inside a card */
  --glass-sheet: rgba(250, 252, 255, .84);
  --glass-rim: rgba(255, 255, 255, .9);                                                            /* the lit edge */
  --glass-hi: rgba(255, 255, 255, .95);                                                            /* the highlight along the top inside edge */
  --glass-rim-low: rgba(255, 255, 255, .5);                                                        /* the faint light on the opposite corner */
  --glass-edge: rgba(24, 36, 72, .09);                                                             /* a faint dark outer line so that the glass reads on a pale page */
  --glass-drop: 0 14px 34px rgba(34, 46, 90, .13), 0 2px 8px rgba(34, 46, 90, .06);
  --glass-drop-sm: 0 8px 22px rgba(34, 46, 90, .10), 0 1px 4px rgba(34, 46, 90, .05);
  --glass-blur: blur(22px) saturate(1.7);
  --glass-blur-strong: blur(30px) saturate(1.9);
  --glass-blob-1: color-mix(in srgb, color-mix(in srgb, var(--m-accent) 42%, #ffffff) 88%, transparent);
  --glass-blob-2: color-mix(in srgb, color-mix(in srgb, var(--m-accent) 26%, #ffcf9e) 86%, transparent);
  --glass-blob-3: color-mix(in srgb, color-mix(in srgb, var(--m-accent) 20%, #a9d3ff) 86%, transparent);

  --m-bg: var(--glass-base); --m-surface: var(--glass-glass); --m-surface-2: var(--glass-quiet); --m-line: rgba(24, 36, 72, .10); --m-border: rgba(24, 36, 72, .34);
  --m-text: #10141d; --m-muted: #475064;
  --m-r-card: 26px; --m-r-ctl: 999px; --m-r-photo: 18px; --m-r-sheet: 32px;
  --m-shadow: var(--glass-drop-sm); --m-float: var(--glass-drop);
  --m-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --m-h1: 26px; --m-h2: 24px; --m-name: 17px;
}

/* ---------------------------------------------------------------------------------------------------- tokens: dark */
:root[data-theme="dark"] .menu, :root[data-theme="dark"] .m-scope {
  --glass-base: color-mix(in srgb, var(--m-accent) 12%, #090b11);
  --glass-solid: #1a1d2a;
  --glass-glass: rgba(30, 34, 50, .6);
  --glass-strong: rgba(20, 23, 34, .88);
  --glass-quiet: rgba(255, 255, 255, .07);
  --glass-sheet: rgba(22, 25, 38, .86);
  --glass-rim: rgba(255, 255, 255, .2);
  --glass-hi: rgba(255, 255, 255, .26);
  --glass-rim-low: rgba(255, 255, 255, .1);
  --glass-edge: rgba(0, 0, 0, .4);
  --glass-drop: 0 16px 38px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  --glass-drop-sm: 0 10px 24px rgba(0, 0, 0, .38), 0 1px 4px rgba(0, 0, 0, .24);
  --glass-blob-1: color-mix(in srgb, color-mix(in srgb, var(--m-accent) 58%, #060810) 88%, transparent);
  --glass-blob-2: color-mix(in srgb, color-mix(in srgb, var(--m-accent) 32%, #22103c) 86%, transparent);
  --glass-blob-3: color-mix(in srgb, color-mix(in srgb, var(--m-accent) 26%, #062c48) 86%, transparent);
  --m-bg: var(--glass-base); --m-line: rgba(255, 255, 255, .1); --m-border: rgba(255, 255, 255, .34);
  --m-text: #f3f5fb; --m-muted: #b4bccd;
}

/* ---------------------------------------------------------------------------------------------------- the page: a soft mesh of the restaurant's colour behind everything
   It is the background of the menu itself (the screen): on the website the document scrolls and the mesh goes with it (a FIXED layer would make iPhone Safari paint its strips with it);
   inside Telegram the menu has its own scroller and the cards slide over a mesh that stays, like content over an iPhone's wallpaper. Every blob fades out well inside its tile,
   so the tiles join without a seam, however long the menu is. */
.menu {
  background-color: var(--glass-base);
  background-image:
    radial-gradient(70% 460px at 14% 230px, var(--glass-blob-1), transparent 72%),                 /* the glow behind the cover, once, at the top */
    radial-gradient(62% 330px at 6% 330px, var(--glass-blob-1), transparent 72%),
    radial-gradient(58% 360px at 98% 720px, var(--glass-blob-2), transparent 72%),
    radial-gradient(64% 320px at 4% 1030px, var(--glass-blob-3), transparent 72%);
  background-size: 100% 760px, 100% 1300px, 100% 1300px, 100% 1300px;
  background-repeat: no-repeat, repeat-y, repeat-y, repeat-y;
  background-position: 0 0, 0 620px, 0 620px, 0 620px;
}
.menu .scroll { background: transparent; }                                                      /* the base look paints the scroller: here the mesh behind it must show */
html.doc { background-color: #eef1f8; }                                  /* under the page (Safari paints its strips and the pull-down with it): the same pale tone */
html.doc[data-theme="dark"] { background-color: #0b0d14; }

/* ---------------------------------------------------------------------------------------------------- the top: the cover as a rounded card, the name on a glass plate over it */
.menu .menu-page { padding-top: calc(10px + var(--sat)); }                                  /* padding, not the hero's margin: a margin would slide out of the page and show what is behind it */
.menu .m-hero { width: calc(100% - 20px - var(--sal) - var(--sar)); max-width: 700px; margin: 0 auto; border-radius: 34px; overflow: hidden; isolation: isolate;
  box-shadow: var(--glass-drop); border: 1px solid var(--glass-rim); background: var(--m-surface-2); }
.menu .m-cover { height: clamp(250px, 74vw, 380px); }
.menu .m-hero:not(.has-cover) .m-cover { height: clamp(200px, 56vw, 280px); }
.menu .m-cover.plain {                                                       /* no photo yet: the restaurant's colour as light and depth, not a flat fill */
  background: radial-gradient(110% 80% at 12% 0%, color-mix(in srgb, var(--m-accent) 55%, #ffffff), transparent 62%),
              radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--m-accent) 60%, #241046), transparent 70%),
              linear-gradient(135deg, var(--m-accent), color-mix(in srgb, var(--m-accent) 55%, #4a2a86)); }
.menu .m-id { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; max-width: none; margin: 0; padding: 12px 16px 12px 12px; display: flex; align-items: center; gap: 12px;
  border-radius: 26px; background: var(--glass-strong); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm);
  -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); }
.menu .m-logo { width: 58px; height: 58px; margin: 0; border-radius: 18px; border: 1px solid var(--glass-rim); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.menu .m-id-text { min-width: 0; padding: 0; gap: 2px; }
.menu .m-id:not(:has(.m-logo)) .m-id-text { padding: 2px 0 2px 6px; }
.menu .m-id h1 { font-size: var(--m-h1); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.menu .m-id p { font-size: var(--t-sm); line-height: 1.3; }
.menu .m-back, .menu .m-edit { background: var(--glass-strong); color: var(--m-text); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* ---------------------------------------------------------------------------------------------------- actions, note, search, filters: glass capsules */
.menu .m-actions { margin: 0 -10px -16px; padding: var(--s5) 10px 26px; }                      /* room around the capsules for their shadows: the scroller would cut them off */
.menu .m-action { background: color-mix(in srgb, var(--m-as) 45%, rgba(255, 255, 255, .96)); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm); color: var(--m-at);
  transition: transform .25s cubic-bezier(.2, .9, .25, 1.1); }
:root[data-theme="dark"] .menu .m-action { background: color-mix(in srgb, var(--m-as) 70%, rgba(0, 0, 0, .4)); }
.menu .m-note { border-radius: 22px; background: var(--glass-glass); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm); }
.menu .m-tools { margin-top: var(--s3); }
.menu .m-search-wrap, .menu .m-filter-btn { min-height: 52px; background: var(--glass-strong); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform .25s cubic-bezier(.2, .9, .25, 1.1), box-shadow .2s; }
.menu .m-search-wrap { padding: 0 18px; }
.menu .m-tools[aria-hidden="true"] { min-height: 52px; }                                  /* the place kept for them by the server's first screen: the same height as the real ones */
.menu .m-search-wrap:focus-within { border-color: var(--m-at); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 3px color-mix(in srgb, var(--m-accent) 32%, transparent); }
.menu .m-search::placeholder { color: var(--m-muted); opacity: 1; }
.menu .m-count { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ---------------------------------------------------------------------------------------------------- the sticky section bar: a floating glass pill (never edge to edge) */
.menu .m-tabs { background: var(--glass-strong); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop);
  -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); }
:root[data-theme="dark"] .menu .m-tabs { background: var(--glass-strong); border-color: var(--glass-rim); }
.menu .m-tab { transition: background .3s cubic-bezier(.2, .9, .25, 1.1), color .2s, transform .25s cubic-bezier(.2, .9, .25, 1.1); }
.menu .m-tab[aria-selected="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px color-mix(in srgb, var(--m-accent) 45%, transparent); }

/* ---------------------------------------------------------------------------------------------------- sections and dishes: each dish a glass card */
.menu .m-cat { margin-top: 34px; }
.menu .m-cat h2 { padding-left: 8px; font-weight: 800; letter-spacing: -.02em; }
.menu .m-cat > .m-muted { padding-left: 8px; }
.menu .m-items { gap: 12px; margin-top: var(--s3); }
.menu .m-item { background: linear-gradient(160deg, var(--glass-hi) -40%, var(--glass-glass) 38%); background-color: var(--glass-glass); border: 1px solid var(--glass-rim); outline: 1px solid var(--glass-edge); outline-offset: -1px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm); }
:root[data-theme="dark"] .menu .m-item { background: linear-gradient(160deg, rgba(255, 255, 255, .12) -40%, var(--glass-glass) 38%); }
.menu .m-item-btn { padding: 15px; gap: 14px; transition: transform .25s cubic-bezier(.2, .9, .25, 1.1); }
.menu .m-name { font-weight: 750; letter-spacing: -.01em; }
.menu .m-desc { font-size: 14.5px; }
.menu .m-photo { width: 96px; height: 96px; border: 1px solid var(--glass-rim); box-shadow: 0 6px 16px rgba(34, 46, 90, .16); }
.menu .m-price b { font-weight: 750; }
.menu .m-badge { background: color-mix(in srgb, var(--m-as) 45%, rgba(255, 255, 255, .96)); box-shadow: inset 0 1px 0 var(--glass-hi); }
:root[data-theme="dark"] .menu .m-badge { background: color-mix(in srgb, var(--m-as) 70%, rgba(0, 0, 0, .4)); box-shadow: none; }

/* ---------------------------------------------------------------------------------------------------- the foot */
.menu .m-foot { margin-top: 44px; padding: 24px 20px; border: 1px solid var(--glass-rim); border-radius: 30px; background: var(--glass-glass); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-sm); }
.menu .seg { background: var(--glass-quiet); border: 1px solid var(--glass-rim); border-radius: 999px; }
.menu .seg button { border-radius: 999px; color: var(--m-muted); }
.menu .seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--m-text); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px rgba(34, 46, 90, .18); }
.menu .notice { color: var(--m-text); }
.menu .notice p { color: var(--m-muted); }

/* ---------------------------------------------------------------------------------------------------- the sheets of a dish and of the filters */
.m-scope.sheet { background: var(--glass-sheet); border: 1px solid var(--glass-rim); border-bottom: 0; border-radius: var(--m-r-sheet) var(--m-r-sheet) 0 0; color: var(--m-text);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 -14px 44px rgba(20, 30, 70, .2); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); font-family: var(--m-font); }
.m-scope .sheet-grip i { background: var(--m-muted); opacity: .45; }
.m-scope .sheet-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.m-scope .icon-btn { background: var(--glass-quiet); color: var(--m-text); }
.m-scope .dish-photo { border-radius: 24px; border: 1px solid var(--glass-rim); box-shadow: 0 10px 26px rgba(34, 46, 90, .2); }
.m-scope .dish-prices li { border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-hi); }
.m-scope .dish-allergens li { border: 1px solid var(--glass-rim); }
.m-scope .chip { background: var(--glass-quiet); border-color: var(--glass-rim); color: var(--m-text); }
.m-scope .btn.quiet { background: var(--glass-quiet); color: var(--m-text); border: 1px solid var(--glass-rim); }
.m-scope .btn { border-radius: 999px; }
@media (min-width: 720px) { .m-scope.sheet { border-bottom: 1px solid var(--glass-rim); border-radius: var(--m-r-sheet); } }

/* ---------------------------------------------------------------------------------------------------- the lit edge
   A ring one pixel wide, drawn on top of the border, bright where the light comes from (top left), dark in the middle, a glint again at the bottom right. It is a pseudo-element
   (it does not touch the markup) cut out of a gradient with a mask; where masks are not available the plain border stays and nothing is lost. */
.menu .m-item, .menu .m-note, .menu .m-foot, .menu .m-search-wrap, .menu .m-filter-btn, .menu .m-action { position: relative; }
.menu .m-item, .menu .m-note, .menu .m-foot, .menu .m-id, .menu .m-tabs, .menu .m-search-wrap, .menu .m-filter-btn, .menu .m-action, .menu .m-back, .menu .m-edit { border-color: transparent; }
.menu .m-item::before, .menu .m-note::before, .menu .m-foot::before, .menu .m-id::before, .menu .m-tabs::before, .menu .m-search-wrap::before, .menu .m-filter-btn::before,
.menu .m-action::before, .menu .m-back::before, .menu .m-edit::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--glass-hi) 0%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 64%, var(--glass-rim-low) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------------------------------------------------------------------------------------------------- touch and hover: a little spring, only where a hand or a pointer is */
.menu .m-action:active, .menu .m-filter-btn:active, .menu .m-item-btn:active, .menu .m-tab:active { transform: scale(.975); }
@media (hover: hover) {
  .menu .m-action:hover, .menu .m-filter-btn:hover { transform: translateY(-1px); }
  .menu .m-item:hover { box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop); }
}

/* ---------------------------------------------------------------------------------------------------- where the blur is not available, or not wanted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu, .m-scope { --glass-strong: var(--glass-solid); --glass-sheet: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .menu, .m-scope { --glass-glass: var(--glass-solid); --glass-strong: var(--glass-solid); --glass-sheet: var(--glass-solid); --glass-quiet: color-mix(in srgb, var(--m-text) 7%, var(--glass-solid)); }
  .menu .m-id, .menu .m-back, .menu .m-edit, .menu .m-search-wrap, .menu .m-filter-btn, .menu .m-tabs, .m-scope.sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Browsers that cannot mix colours (before Safari 16.2 / Chrome 111): plain colours instead of the ones made from the restaurant's own, no mesh. The menu is still readable and still glass. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .menu, .m-scope { --glass-base: #f1f4fb; --glass-blob-1: transparent; --glass-blob-2: transparent; --glass-blob-3: transparent; }
  :root[data-theme="dark"] .menu, :root[data-theme="dark"] .m-scope { --glass-base: #0d1018; --glass-quiet: rgba(255, 255, 255, .07); }
  .menu .m-action, .menu .m-badge { background: var(--m-as); }
}
/* Windows' high-contrast themes replace every colour with the system's: the edges must stay drawn, and the lit ring (a gradient) is not needed. */
@media (forced-colors: active) {
  .menu .m-item, .menu .m-note, .menu .m-foot, .menu .m-id, .menu .m-tabs, .menu .m-search-wrap, .menu .m-filter-btn, .menu .m-action, .menu .m-back, .menu .m-edit { border-color: CanvasText; }
  .menu .m-item::before, .menu .m-note::before, .menu .m-foot::before, .menu .m-id::before, .menu .m-tabs::before, .menu .m-search-wrap::before, .menu .m-filter-btn::before,
  .menu .m-action::before, .menu .m-back::before, .menu .m-edit::before { display: none; }
}
@media (prefers-contrast: more) {
  .menu, .m-scope { --glass-rim: rgba(0, 0, 0, .55); --m-border: currentColor; --m-line: rgba(0, 0, 0, .4); }
  :root[data-theme="dark"] .menu, :root[data-theme="dark"] .m-scope { --glass-rim: rgba(255, 255, 255, .7); --m-line: rgba(255, 255, 255, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .menu .m-action, .menu .m-filter-btn, .menu .m-item-btn, .menu .m-tab, .menu .m-search-wrap { transition: none; }
}