html, body { margin: 0; padding: 0; background: #2A1C4A; }
#root { height: 100%; }
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 0; height: 0; }
a { color: var(--text-brand); }
a:hover { color: var(--plum-600); }

/* Same three company inputs as the board; the vendored DS consumes their derived shades.
   Rebind semantic tokens here so they resolve against this kiosk's company colors. */
#kiosk-root {
  --plum-900: color-mix(in oklab, var(--brand) 75%, #000);
  --plum-800: color-mix(in oklab, var(--brand) 90%, #000);
  --plum-700: var(--brand);
  --plum-600: color-mix(in oklab, var(--brand) 90%, #fff);
  --plum-500: color-mix(in oklab, var(--brand) 80%, #fff);
  --plum-400: color-mix(in oklab, var(--brand) 65%, #fff);
  --lavender-300: color-mix(in oklab, var(--brand) 26%, #fff);
  --lavender-200: color-mix(in oklab, var(--brand) 16%, #fff);
  --lavender-100: color-mix(in oklab, var(--brand) 8%, #fff);
  --amber-400: color-mix(in oklab, var(--accent) 78%, #fff);
  --amber-500: var(--accent);
  --amber-600: color-mix(in oklab, var(--accent) 85%, #000);
  --amber-700: color-mix(in oklab, var(--accent) 75%, #000);
  --surface-page: var(--paper);
  --surface-sunken: color-mix(in oklab, var(--paper) 96%, var(--brand));
  --surface-brand: var(--brand);
  --surface-accent: var(--accent);
  --border-focus: var(--plum-500);
  --text-brand: var(--brand);
  --text-accent: var(--amber-700);
  --text-on-accent: var(--brand);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--plum-500) 28%, transparent);
  --shadow-focus-dark: 0 0 0 3px color-mix(in oklab, var(--accent) 42%, transparent);
}

#kiosk-root .innopos-dark {
  --border-default: color-mix(in oklab, var(--lavender-300) 24%, transparent);
  --text-faint: color-mix(in oklab, var(--lavender-200) 72%, transparent);
}

@keyframes kioskRipple { 0% { transform: scale(.6); opacity: .55 } 100% { transform: scale(2.6); opacity: 0 } }
@keyframes kioskRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes kioskFade { from { opacity: 0 } to { opacity: 1 } }
/* One dish slide: fades in over the outgoing one, then keeps drifting closer. Opacity and
   transform only, so it composites on the GPU and never relayouts the page. */
@keyframes kioskHero { from { opacity: 0; transform: scale(1) } 14% { opacity: 1 } to { opacity: 1; transform: scale(1.08) } }
@keyframes kioskSheet { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }

/* Orientation is LAYOUT, not state: driven by media queries, so rotating the
   kiosk never triggers a React re-render. Forced modes use .lay-rail / .lay-chips. */
.lay-rail.k-browse { flex-direction: row !important; }
.lay-rail .k-rail { flex-direction: column !important; flex: 0 0 clamp(160px,15vw,240px) !important; border-bottom: none !important; border-right: 1px solid var(--border-default) !important; }
.lay-rail .k-cat { flex: 1 1 0 !important; min-width: 0 !important; flex-direction: row !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important; }

.det-fullscreen.k-scrim { justify-content: stretch !important; }
.det-fullscreen .k-sheet { height: 100% !important; border-radius: 0 !important; }

/* Tall landscape (a real 32in kiosk turned sideways) gets the vertical rail.
   Short landscape windows keep the chip row, which always fits. */
@media (orientation: landscape) and (min-height: 700px) {
  .lay-auto.k-browse { flex-direction: row !important; }
  .lay-auto .k-rail { flex-direction: column !important; flex: 0 0 clamp(160px,15vw,240px) !important; border-bottom: none !important; border-right: 1px solid var(--border-default) !important; }
  .lay-auto .k-cat { flex: 1 1 0 !important; min-width: 0 !important; flex-direction: row !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important; }
}

@media (orientation: landscape) {
  .k-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
  .k-detailbody { flex-direction: row !important; }
  .k-media { flex: 1 !important; }
  .k-sheet { height: 100% !important; border-radius: 0 !important; }
  .k-opts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
}