/* Menu board (TV / tablet / kiosk), ported from ModulerMenu. Layers on menu-tokens.css and menu.css; badge/chip styles live in menu.css. */
html, body { height: 100%; overflow: hidden; }
body { cursor: default; }
body.is-idle { cursor: none; }

.vt { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; padding: clamp(1rem, 2.2vw, 2.4rem) clamp(1.2rem, 3vw, 3.4rem); gap: clamp(.8rem, 1.6vw, 1.6rem); }

.vt-top { display: flex; align-items: center; gap: 2rem; }
.vt-brand { display: flex; align-items: center; gap: .9rem; font: var(--head-w) clamp(1.3rem, 2.3vw, 2.4rem)/1 var(--head); letter-spacing: var(--head-track); white-space: nowrap; }
.vt-brand img { height: clamp(2.2rem, 3.6vw, 4rem); width: auto; border-radius: 8px; }
.vt-tabs { flex: 1; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.vt-tabs button { padding: .55rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font-size: clamp(.85rem, 1.15vw, 1.15rem); font-weight: 600; cursor: pointer; transition: all .3s; }
.vt-tabs button.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vt-fs { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; background: none; color: var(--muted); cursor: pointer; font-size: .85rem; }
body.is-idle .vt-fs, .is-fullscreen .vt-fs { visibility: hidden; }

.vt-stage { position: relative; min-height: 0; }
.vt-slide { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: clamp(.8rem, 1.6vw, 1.6rem); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s .7s; }
.vt-slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vt-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.vt-head h2 { margin: 0; font: var(--head-w) clamp(2rem, 4.4vw, 4.6rem)/1 var(--head); letter-spacing: var(--head-track); color: var(--text); }
.vt-head span { color: var(--muted); font-size: clamp(.9rem, 1.3vw, 1.3rem); }

.vt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(.8rem, 1.5vw, 1.6rem); min-height: 0; }
.vt-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.vt-media { display: block; min-height: 0; background: var(--surface-2); overflow: hidden; }
.vt-media img { width: 100%; height: 100%; object-fit: cover; }
.vt-mono { display: grid; place-items: center; width: 100%; height: 100%; background: var(--accent-soft); color: var(--accent); font: 400 clamp(2.5rem, 6vw, 6rem) var(--font-display); }
.vt-info { display: grid; align-content: start; gap: .3rem; min-height: clamp(7rem, 11vw, 11rem); padding: clamp(.7rem, 1.2vw, 1.3rem) clamp(.9rem, 1.5vw, 1.6rem) clamp(.8rem, 1.3vw, 1.4rem); }
.vt-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.vt-name { font: var(--head-w) clamp(1.1rem, 1.9vw, 2rem)/1.15 var(--head); letter-spacing: var(--head-track); }
.vt-price { font: 400 clamp(1.2rem, 2vw, 2.1rem) var(--font-display); color: var(--accent); white-space: nowrap; }
.vt-desc { color: var(--muted); font-size: clamp(.8rem, 1.1vw, 1.15rem); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-tags { display: flex; gap: .4rem; flex-wrap: wrap; }

.vt-foot { display: grid; gap: .6rem; color: var(--muted); font-size: clamp(.8rem, 1.1vw, 1.1rem); }
.vt-progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.vt-progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* Narrow screen (phone / portrait tablet): two columns, no scrolling */
@media (max-width: 900px) {
    /* Category tabs stay visible as one row under the name; the row scrolls sideways and follows the current slide. */
    .vt-top { flex-wrap: wrap; row-gap: .8rem; }
    .vt-tabs { order: 3; flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .vt-tabs::-webkit-scrollbar { display: none; }
    .vt-tabs button { flex: none; }
    .vt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .vt-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); } .vt-card { grid-template-rows: auto auto; grid-template-columns: 38% 1fr; } .vt-card { display: flex; } .vt-media { width: 38%; flex: none; } }

/* Size / portion options and badges */
.vt-badges .badge { padding: .22em .75em; font-size: clamp(.7rem, .95vw, 1rem); }
.vt-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.vt-opts { color: var(--muted); font-size: clamp(.78rem, 1.05vw, 1.1rem); line-height: 1.4; }
.vt-card.is-soldout .vt-media, .vt-card.is-soldout .vt-line, .vt-card.is-soldout .vt-desc, .vt-card.is-soldout .vt-opts { opacity: .5; }
.vt-card.is-soldout .vt-media img { filter: grayscale(1); }
.vt-card.is-soldout .vt-price { text-decoration: line-through; }


/* Split layout (default): category photo on the left, price list on the right. ?layout=cards is the old card grid. */
.vt[data-layout="split"] .vt-top { gap: clamp(1rem, 2vw, 2rem); }
.vt[data-layout="split"] .vt-brand { font-size: clamp(1.1rem, 1.7vw, 1.8rem); }
.vt[data-layout="split"] .vt-brand img { height: clamp(1.8rem, 2.7vw, 3rem); }
.vt[data-layout="split"] .vt-tabs { gap: clamp(.3rem, 1vw, 1rem); }
.vt[data-layout="split"] .vt-tabs button { position: relative; padding: .6rem clamp(.5rem, 1vw, 1rem) .8rem; border: 0; border-radius: 0; background: none; font-size: clamp(.85rem, 1.2vw, 1.2rem); }
.vt[data-layout="split"] .vt-tabs button.is-on { background: none; color: var(--text); }
.vt[data-layout="split"] .vt-tabs button::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; border-radius: 3px; background: var(--line); }
.vt-fill { position: absolute; left: 0; bottom: 0; z-index: 1; width: 0; height: 3px; border-radius: 3px; background: var(--accent); }

.vt[data-layout="split"] .vt-slide { grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.2rem, 3vw, 3.4rem); }
.vt-hero { position: relative; min-height: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--accent-soft); box-shadow: var(--shadow); }
.vt-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-slide.is-on .vt-hero img { animation: vt-zoom 24s ease-out forwards; }
@keyframes vt-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.vt-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .04) 58%); }
.vt-hero-text { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: .5rem; padding: clamp(1.2rem, 2.4vw, 2.8rem); color: #fff; }
.vt-hero-text h2 { margin: 0; font: var(--head-w) clamp(2.2rem, 4.6vw, 5rem)/1 var(--head); letter-spacing: var(--head-track); }
.vt-hero-text span { font-size: clamp(.9rem, 1.3vw, 1.3rem); opacity: .85; }
.vt-hero:not(:has(img))::after { display: none; }
.vt-hero:not(:has(img)) .vt-hero-text { color: var(--text); }

/* Rows start at the top, next to the top of the category card (a short list is not pushed to the middle). */
.vt-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(.5rem, 1.2vw, 1.4rem); min-height: 0; }
.vt-row { display: grid; gap: .2rem; }
.vt-row-line { display: flex; align-items: baseline; gap: .8rem; }
.vt-row .vt-name { font-size: clamp(1.1rem, 1.9vw, 2rem); }
.vt-row .vt-price { font-size: clamp(1.3rem, 2.4vw, 2.5rem); }
.vt-leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--muted) 55%, transparent); transform: translateY(-.25em); }
.vt-row .vt-desc { -webkit-line-clamp: 1; font-size: clamp(.8rem, 1.05vw, 1.1rem); }
.vt-row.is-soldout .vt-name, .vt-row.is-soldout .vt-desc, .vt-row.is-soldout .vt-opts { opacity: .5; }
.vt-row.is-soldout .vt-price { opacity: .5; text-decoration: line-through; }

@media (max-width: 900px) {
    .vt[data-layout="split"] .vt-slide { grid-template-columns: 1fr; grid-template-rows: minmax(0, 26%) minmax(0, 1fr); }
    .vt-rows { justify-content: flex-start; overflow-y: auto; }
}

/* Featured slide: product photo on the left (same panel as category slides), large name / description / price on the right.
   The photo is not stretched full screen: uploads are mostly square and low resolution and blur when stretched. */
.vt[data-layout="split"] .vt-slide.vt-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vt-feature .vt-hero::after { display: none; }
.vt-feature-text { display: grid; justify-items: start; align-content: center; gap: clamp(.5rem, 1.1vw, 1.3rem); min-width: 0; }
.vt-feature-kicker { font-size: clamp(.8rem, 1.1vw, 1.15rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.vt-feature-kicker::before { content: "★ "; }
.vt-feature-text h2 { margin: 0; font: var(--head-w) clamp(2.4rem, 5vw, 5.6rem)/1.04 var(--head); letter-spacing: var(--head-track); color: var(--text); }
.vt-feature-text p { margin: 0; max-width: 34ch; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.7rem); line-height: 1.45; }
.vt-feature-price { padding: .15em .7em; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 400 clamp(1.6rem, 3vw, 3.2rem) var(--font-display); }
.vt-feature-opts { color: var(--muted); font-size: clamp(.9rem, 1.3vw, 1.4rem); }

@media (max-width: 900px) {
    .vt[data-layout="split"] .vt-slide.vt-feature { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
}

/* QR at bottom right */
.vt-foot-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: 1.5rem; }
.vt-qr { display: inline-flex; align-items: center; gap: .9rem; text-align: right; font-size: clamp(.75rem, 1vw, 1.05rem); }
.vt-qr img { width: clamp(3.6rem, 5.6vw, 6.4rem); height: auto; padding: .35rem; border-radius: 10px; background: #fff; }

/* On a bilingual board: tab bar / QR text for the language not currently shown */
.vt .is-off { display: none !important; }

/* Short screens: a list taller than the area used to overflow over the top tabs and the "Full screen" button
   (centered overflow also goes up), making the tabs unclickable. Now the overflow is clipped, the top strip stays in front,
   row sizes also follow screen height. Rows always start at the top (a short list is not centered). */
.vt-top { position: relative; z-index: 3; }
.vt-stage { overflow: hidden; }
.vt-rows { justify-content: flex-start; gap: clamp(.3rem, min(1.2vw, 2.2vh), 1.4rem); }
.vt-row .vt-name { font-size: clamp(1rem, min(1.9vw, 3.6vh), 2rem); }
.vt-row .vt-price { font-size: clamp(1.15rem, min(2.4vw, 4.2vh), 2.5rem); }
.vt-row .vt-desc { font-size: clamp(.75rem, min(1.05vw, 2vh), 1.1rem); }

.vt-branch { display: inline-flex; align-items: center; gap: .6em; color: var(--muted, currentColor); font: 600 .42em/1.3 var(--font-body, inherit); letter-spacing: .16em; text-transform: uppercase; }
.vt-branch::before { content: ""; width: 1.6em; height: 1px; background: var(--accent); }

/* Portrait screen (portrait TV / kiosk, above 901px): one column, photo on top, list below, large text. Below 900px the narrow screen rules above apply. */
@media (orientation: portrait) and (min-width: 901px) {
    .vt { padding: clamp(1.4rem, 3.2vw, 3.4rem); gap: clamp(1rem, 2vw, 2.2rem); }
    .vt-top { flex-wrap: wrap; row-gap: .9rem; }
    .vt-brand, .vt[data-layout="split"] .vt-brand { font-size: clamp(1.7rem, 3.6vw, 3.2rem); }
    .vt-brand img, .vt[data-layout="split"] .vt-brand img { height: clamp(2.6rem, 5vw, 4.6rem); }
    .vt-tabs { order: 3; flex-basis: 100%; }
    .vt[data-layout="split"] .vt-tabs button, .vt-tabs button { font-size: clamp(1rem, 2.1vw, 1.9rem); }

    .vt-grid { grid-template-columns: repeat(2, 1fr); }
    .vt-head h2 { font-size: clamp(2.4rem, 6vw, 5.4rem); }
    .vt-name { font-size: clamp(1.3rem, 2.8vw, 2.6rem); }
    .vt-price { font-size: clamp(1.4rem, 3vw, 2.8rem); }
    .vt-desc, .vt-opts { font-size: clamp(.95rem, 1.9vw, 1.7rem); }

    .vt[data-layout="split"] .vt-slide,
    .vt[data-layout="split"] .vt-slide.vt-feature { grid-template-columns: 1fr; grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
    .vt-rows { justify-content: flex-start; gap: clamp(1rem, 2.8vw, 2.8rem); overflow: hidden; }
    .vt-row .vt-name { font-size: clamp(1.4rem, 3.1vw, 2.9rem); }
    .vt-row .vt-price { font-size: clamp(1.6rem, 3.5vw, 3.3rem); }
    .vt-row .vt-desc { font-size: clamp(.95rem, 1.9vw, 1.7rem); }
    .vt-hero-text h2 { font-size: clamp(2.6rem, 7.4vw, 6.4rem); }
    .vt-hero-text span { font-size: clamp(1rem, 2.1vw, 1.9rem); }

    .vt-feature-text { justify-items: center; text-align: center; }
    .vt-feature-text h2 { font-size: clamp(2.6rem, 7vw, 6.4rem); }
    .vt-feature-text p { font-size: clamp(1.1rem, 2.4vw, 2.2rem); max-width: 40ch; }
    .vt-feature-price { font-size: clamp(2rem, 4.4vw, 4.2rem); }
    .vt-qr img { width: clamp(4.4rem, 8vw, 8rem); }
}

/* Branch closed: the menu stays and the status pill under the name reads "Closed · opens ..." (default); otherwise a "We're closed" screen (display setting). */
/* Top strip (announcements only): in the menu accent color, icon on the left. The menu moves down by the strip height. */
.vt-strips { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.vt:has(.vt-strips) { padding-top: calc(clamp(1rem, 2.2vw, 2.4rem) + var(--strip-h, 2.2rem)); }
.vt-ann { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.2rem; padding: .45rem clamp(1.2rem, 3vw, 3.4rem);
    background: var(--accent, #d0644b); color: var(--on-accent, #16120f); font: 600 clamp(.85rem, 1.1vw, 1.1rem)/1.3 var(--font-body); text-align: center; }
.vt-ann-ico { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-ann-track { min-width: 0; overflow: hidden; white-space: nowrap; }
.vt-ann-item { display: inline-block; white-space: nowrap; animation: vt-ann-in .5s ease; }
@keyframes vt-ann-in { from { opacity: 0; } to { opacity: 1; } }
/* A text wider than the strip starts at the left; display.js glides it once to its end. */
.vt-ann.is-long { justify-content: flex-start; text-align: left; }
.vt-ann.is-long .vt-ann-track { flex: 1; }
@media (prefers-reduced-motion: reduce) {
    .vt-ann-track, .vt-ann-item { white-space: normal; }
    .vt-ann-item { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; animation: none; }
}

/* Open/closed status: neutral pill under the business name; color only on the dot (open green, closing soon gold, closed coral). */
.vt-id { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; }
.vt-status { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .9rem .35rem .75rem; border: 1px solid color-mix(in srgb, var(--text, #f6efe4) 14%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--text, #f6efe4) 6%, transparent); color: var(--muted, #cfc6ba); font: 500 clamp(.8rem, .95vw, 1rem) var(--font-body); white-space: nowrap; }
.vt-status b { color: var(--text, #f6efe4); font-weight: 600; }
.vt-status i { width: .5rem; height: .5rem; border-radius: 50%; background: #3f9a66; flex: none; }
.vt-status.is-closessoon i { background: #d8a12a; }
.vt-status.is-closed i { background: #e07a5c; }
/* Full-screen notice (closed, switched off, empty, paused): one frame for every state.
   Calm hierarchy: logo, small business/branch line, heading, one line of text. Sits slightly above the exact center. */
.vt-notice { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 2rem 5vw; text-align: center; background: var(--bg, #16120f); color: var(--text, #f6efe4); }
.vt-notice-body { display: grid; justify-items: center; max-width: min(60rem, 90vw); transform: translateY(-4vh); }
.vt-notice-logo { display: block; width: clamp(48px, 4.6vw, 84px); height: clamp(48px, 4.6vw, 84px); margin: 0 auto clamp(1.2rem, 1.9vw, 2rem); border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 clamp(5px, .5vw, 8px) color-mix(in srgb, var(--accent, #d9694f) 12%, transparent), 0 14px 44px color-mix(in srgb, var(--accent, #d9694f) 22%, transparent); }
.vt-notice-eyebrow { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 0 clamp(.9rem, 1.3vw, 1.4rem); color: var(--muted, #cfc6ba); font: 600 clamp(.72rem, .85vw, .95rem)/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.vt-notice-eyebrow::before, .vt-notice-eyebrow::after { content: ""; width: clamp(18px, 2vw, 32px); height: 1px; flex: none; background: var(--accent, #d9694f); opacity: .7; }
.vt-notice h2 { margin: 0; font: 400 clamp(2rem, 3.8vw, 3.8rem)/1.08 var(--font-display, serif); letter-spacing: -.005em; text-wrap: balance; }
.vt-notice-text { margin: clamp(.7rem, 1vw, 1.1rem) 0 0; max-width: 36ch; font: 400 clamp(1rem, 1.45vw, 1.45rem)/1.5 var(--font-body); color: var(--muted, #cfc6ba); text-wrap: balance; }

/* The board grid must never grow past the screen: without a minmax(0) column the one-row tab strip (nowrap, scrolls sideways)
   widened the whole board on narrow screens and cut prices and the QR line on the right. */
.vt { grid-template-columns: minmax(0, 1fr); }
.vt-top, .vt-stage, .vt-foot, .vt-tabs { min-width: 0; }
/* A board is looked at, not scrolled: when a long list scrolls on a narrow screen, no system scrollbar is drawn. */
.vt-rows { scrollbar-width: none; }
.vt-rows::-webkit-scrollbar { display: none; }

/* Old price struck through next to a campaign price on the board. */
.vt-old { margin-right: .45em; font-size: .7em; opacity: .6; text-decoration: line-through; }