/* Table ordering, staff tools and the privacy draft. Builds on site.css tokens. */
:root:not([data-offer="2"]) [data-only="2"] { display: none !important; }

/* ---------- Shared controls ---------- */
.field { font: 400 1rem var(--body); color: var(--ink); background: #fff; border: 1.5px solid var(--rule); border-radius: 6px; padding: .55rem .7rem; min-height: 46px; width: 100%; }
.field:focus { border-color: var(--leaf); outline: none; box-shadow: 0 0 0 3px var(--sage-pale); }
.ibtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1.5px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--leaf); cursor: pointer; }
.ibtn:hover { border-color: var(--leaf); }
.add { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: var(--leaf); color: var(--paper); cursor: pointer; flex: none; transition: transform .2s var(--ease), background .2s; }
.add:hover { background: var(--leaf-2); }
.add:active { transform: scale(.92); }
.add svg { width: 20px; height: 20px; }
.qty { display: inline-flex; align-items: center; gap: .55rem; }
.qty output { min-width: 1.6ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 42px; padding: .3rem .9rem; border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer; background: var(--paper); font-size: .95rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip small { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:has(input:checked) { border-color: var(--sage-ink); background: var(--sage-ink); color: #fff; }
.chip:has(input:checked) small { color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--leaf); outline-offset: 2px; }

/* ---------- Table page (phone first) ---------- */
.tbl-head { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: .8rem; padding: .55rem 16px; background: var(--sage-ink); }
.tbl-head__mark img { width: 128px; }
.tbl-head__table { margin-left: auto; color: #fff; font: 600 1.25rem var(--display); }
.tbl-head .lang { background: transparent; color: #fff; border-color: #ffffff88; }
.tbl-main { max-width: 760px; margin: 0 auto; padding: 1rem 16px 7rem; }
.tbl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tbl-optional { margin: .5rem 0 0; }
.tbl .menu__bar { top: 62px; }
.tbl .dishes { grid-template-columns: 1fr; }
.tbl .dish { grid-template-columns: 36% 1fr; }
.tbl-market { margin-top: 1.5rem; }
.tbl-status { margin-top: 1rem; border: 1.5px solid var(--sage-ink); border-radius: 4px; padding: .8rem 1rem; }
.tbl-status h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.tbl-status ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.st { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: baseline; font-size: .92rem; }
.st em { font-style: normal; font-weight: 600; font-size: .82rem; padding: .05rem .5rem; border-radius: 999px; background: var(--paper-2); white-space: nowrap; }
.st--cooking em { background: #f6e3c4; color: #7a4206; }
.st--ready em { background: var(--sage-ink); color: #fff; }
.st--served em { color: var(--muted); }
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom)); background: linear-gradient(#faf7ee00, var(--paper) 35%); }
.cartbar .btn { width: 100%; max-width: 728px; margin: 0 auto; display: flex; min-height: 54px; font-size: 1.05rem; box-shadow: var(--shadow); }

/* Bottom sheets (native <dialog>) */
.sheet { margin: auto auto 0; width: 100%; max-width: 640px; max-height: 92dvh; border: 0; border-radius: 12px 12px 0 0; padding: 0; background: var(--paper); color: var(--ink); box-shadow: 0 -10px 40px -10px #1e332855; }
.sheet::backdrop { background: #1e3328aa; }
.sheet[open] { animation: sheet-up .4s var(--ease); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet__media img { width: 100%; aspect-ratio: 315 / 206; object-fit: cover; }
.sheet__media .dish__media { border-radius: 0; }
.sheet__body { position: relative; padding: 1.1rem 16px calc(1.2rem + env(safe-area-inset-bottom)); display: grid; gap: .8rem; }
.sheet__body h2 { font-size: 1.35rem; padding-right: 2.6rem; }
.sheet__group { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sheet__group legend, .sheet__group .lbl { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; padding: 0; }
.sheet__group textarea { resize: vertical; }
.sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; bottom: 0; background: var(--paper); padding-top: .6rem; border-top: 1px solid var(--rule); }
.sheet__foot .btn { flex: 1; max-width: 260px; }
.sheet__close { position: absolute; top: .8rem; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
#item-sheet .sheet__close { top: -52px; background: #fffd; }
#item-sheet:not(:has(.sheet__media img)) .sheet__close { top: .8rem; }
.cart { list-style: none; margin: 0; padding: 0; display: grid; }
.cart li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.cart li b { font-weight: 600; display: block; }
.cart small { display: block; color: var(--muted); font-size: .85rem; }
.cart__total { display: flex; justify-content: space-between; font: 600 1.25rem var(--display); }
.cart__send { width: 100%; min-height: 52px; }
.upsell { background: var(--sage-pale); border-radius: 6px; padding: .8rem; display: grid; gap: .5rem; }
.upsell p { font-weight: 600; }
.upsell__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.upsell__row .btn { min-height: 42px; padding: .3rem .9rem; background: var(--paper); }
.upsell__row small { color: var(--muted); font-weight: 400; }

/* Website menu (offer 3): the picker and the order slide in from the right as side panels. */
.sheet--side { margin: 0 0 0 auto; width: min(440px, 100%); height: 100dvh; max-height: 100dvh; border-radius: 0; overflow-y: auto; box-shadow: -12px 0 40px -12px #1e332866; }
.sheet--side[open] { animation: sheet-in .45s var(--ease); }
@keyframes sheet-in { from { transform: translateX(48px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sheet--side[open] { animation: none; } }
.sheet--side .sheet__body { padding-top: 1.3rem; }
#cart-sheet.sheet--side .sheet__body { min-height: 100%; align-content: start; }
.cartbar--float { left: auto; right: 0; width: min(380px, 100%); background: none; }
.cartbar--float .btn { box-shadow: 0 10px 30px -8px #1e332888; }
.takeaway { display: grid; gap: .7rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.takeaway label { display: grid; gap: .3rem; }
.takeaway [aria-invalid="true"] { border-color: var(--rec); }
.menu__takeaway { margin-top: .4rem; padding: .55rem .9rem; border-radius: 6px; background: var(--sage-pale); font-weight: 600; justify-self: start; }

/* ---------- Staff ---------- */
.staff-head { display: flex; align-items: center; gap: 1rem; padding: .6rem var(--pad); background: var(--sage-ink); color: #fff; }
.staff-head .tbl-head__mark img { width: 128px; }
.staff-head h1 { font-size: 1.25rem; margin-right: auto; }
.staff-head .lang { background: transparent; color: #fff; border-color: #ffffff88; }
.tabs { display: flex; gap: .3rem; overflow-x: auto; padding: .6rem var(--pad) 0; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.tabs [role="tab"] { flex: none; border: 1px solid transparent; border-bottom: 0; background: transparent; padding: .55rem 1rem; font: 600 .95rem var(--body); color: var(--muted); cursor: pointer; border-radius: 6px 6px 0 0; min-height: 44px; }
.tabs [role="tab"][aria-selected="true"] { background: var(--paper); border-color: var(--rule); color: var(--ink); margin-bottom: -1px; }
.staff { background: var(--paper-2); }
.staff .tabs [role="tab"][aria-selected="true"] { background: var(--paper-2); }
.staff-main { padding: 1.2rem var(--pad) 3rem; max-width: 1280px; margin: 0 auto; }
.ktools { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.reqs { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.req { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; border-radius: 6px; background: #f6e3c4; font-weight: 600; }
.req--bill { background: var(--sage-pale); }
.kcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kcol h2 { font-size: 1.1rem; display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.kcount { font: 600 .85rem var(--body); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0 .55rem; }
.kcol > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticket { background: var(--paper); border-radius: 4px; padding: .8rem .9rem; box-shadow: var(--shadow); display: grid; gap: .5rem; }
.ticket.is-late { box-shadow: 0 0 0 2px var(--rec), var(--shadow); }
.ticket__top { display: flex; gap: .6rem; align-items: baseline; }
.ticket__top strong { font: 600 1.15rem var(--display); }
.ticket__top span { margin-left: auto; color: var(--muted); font-size: .85rem; }
.ticket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ticket li { display: grid; grid-template-columns: 2.2ch 1fr; gap: .4rem; }
.ticket li em { display: block; font-style: normal; color: var(--sage-ink); font-size: .88rem; font-weight: 600; }
.ticket li em.knote { color: var(--rec); }
.ticket--tk { background: #fffdf6; }
.ticket--tk .ticket__top strong { color: var(--pop); }
.ticket__tk { font-size: .9rem; font-weight: 600; background: #f6e3c4; border-radius: 4px; padding: .3rem .55rem; }
.kempty { color: var(--muted); }
.medit-wrap { overflow-x: auto; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow); margin: 1rem 0; }
.medit { width: 100%; border-collapse: collapse; font-size: .95rem; }
.medit th, .medit td { padding: .5rem .8rem; border-bottom: 1px solid var(--rule); text-align: left; }
.medit thead th { font-size: .85rem; color: var(--muted); }
.medit__cat th { background: var(--sage-pale); font-family: var(--display); }
.medit tbody th { font-weight: 400; }
.medit tbody th small { display: block; color: var(--muted); font-size: .8rem; }
.medit input[type="number"] { width: 6.5em; font: 400 1rem var(--body); padding: .35rem .5rem; border: 1.5px solid var(--rule); border-radius: 6px; font-variant-numeric: tabular-nums; }
.medit .is-out th { color: var(--muted); text-decoration: line-through; }
.switch { width: 22px; height: 22px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; }
.kpi { background: var(--paper); border-radius: 4px; padding: 1rem 1.1rem; box-shadow: var(--shadow); display: grid; }
.kpi span { color: var(--muted); font-size: .9rem; }
.kpi b { font: 600 1.8rem var(--display); font-variant-numeric: tabular-nums; }
.reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.report { background: var(--paper); border-radius: 4px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.report h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; gap: .6rem; align-items: center; font-size: .92rem; }
.bars i { height: 10px; border-radius: 5px; background: var(--sage); }
.hours { display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.hour { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; }
.hour i { width: 100%; background: var(--sage); border-radius: 3px 3px 0 0; min-height: 2px; }
.hour span { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qrsheet { display: grid; grid-template-columns: repeat(auto-fill, 220px); gap: 1rem; justify-content: center; }
.qrsheet .tcard { width: 220px; }
.qrsheet .tcard small { color: var(--muted); font-size: .75rem; text-align: center; padding: 0 .6rem; }
@media (max-width: 760px) { .kcols { grid-template-columns: 1fr; } .staff-head .tbl-head__mark { display: none; } }
@media print {
  body { background: #fff; }
  .demo-flag, .versions, .staff-head, .staff-tabs, .ktools { display: none !important; }
  .tcard { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  .tcard img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Demo staff PIN: the tools stay hidden until it is entered. */
:root:not([data-staff="ok"]) .staff-tabs, :root:not([data-staff="ok"]) .staff-main { display: none; }
:root[data-staff="ok"] .pin { display: none; }
.pin { max-width: 340px; margin: 3rem auto; padding: 1.6rem; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow); display: grid; gap: .8rem; text-align: center; }
.pin input { text-align: center; font-size: 1.6rem; letter-spacing: .5em; }

/* Bookings week */
.bweek { display: grid; gap: 1rem; }
.bday { background: var(--paper); border-radius: 4px; padding: .9rem 1.1rem; box-shadow: var(--shadow); }
.bday.is-today { box-shadow: 0 0 0 2px var(--sage-ink), var(--shadow); }
.bday h2 { font-size: 1.1rem; margin-bottom: .5rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.bday h2 small { font: 600 .8rem var(--body); color: var(--sage-ink); }
.bday h2 .bday__mon { color: var(--pop); }
.bday ul { list-style: none; margin: 0; padding: 0; display: grid; }
.bk { display: grid; grid-template-columns: 3.4rem 1fr auto auto; gap: .4rem 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--rule); }
.bk__time { font: 600 1.15rem var(--display); font-variant-numeric: tabular-nums; }
.bk__who small { display: block; color: var(--muted); font-size: .88rem; }
.bk__sample { font-size: .75rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 0 .35rem; }
.bk__st { font-style: normal; font-weight: 600; font-size: .82rem; padding: .05rem .55rem; border-radius: 999px; background: #f6e3c4; color: #7a4206; white-space: nowrap; }
.bk--confirmed .bk__st { background: var(--sage-pale); color: var(--leaf-2); }
.bk--cancelled { opacity: .55; }
.bk--cancelled .bk__who strong { text-decoration: line-through; }
.bk--cancelled .bk__st { background: var(--paper-2); color: var(--muted); }
.bk__acts { display: flex; gap: .4rem; }
.bk__acts .btn { min-height: 38px; padding: .25rem .8rem; font-size: .9rem; }
@media (max-width: 640px) { .bk { grid-template-columns: 3.2rem 1fr; } .bk__st, .bk__acts { grid-column: 2; justify-self: start; } }

/* ---------- Privacy draft ---------- */
.legal { max-width: 68ch; margin: 0 auto; padding: 2rem var(--pad) 4rem; display: grid; gap: .8rem; }
.legal h1 { font-size: 2rem; margin-top: .6rem; }
.legal h2 { font-size: 1.2rem; margin-top: 1rem; }
.legal .draft { background: #f6e3c4; color: #5c3305; padding: .6rem .9rem; border-radius: 4px; font-weight: 600; }