/* Diner-facing menu viewer. Mobile-first; the desktop case is just a narrow
   column centred in the window. */

:root {
  --bg: #14100d;
  --bg-elev: #1e1916;
  --line: #322a25;
  --text: #f6f1ea;
  --muted: #a8998c;
  --accent: #c9a227;
  --accent-ink: #14100d;
  --radius: 14px;
  --topbar-h: 56px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark; /* dark scrollbars and native controls */
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* The `hidden` attribute is only a UA-stylesheet `display: none`, so any class
   below that sets its own `display` would silently outrank it — which left the
   loading/error overlay covering the menu. Everything here is toggled with
   `hidden`, so make it win outright. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* the viewer owns all scrolling/gestures */
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Flex column rather than fixed grid rows on purpose. With `grid-template-rows`
   a child that goes `display: none` (the tabs, when there is only one menu) is
   removed from the grid, so every later child shifts up a row and the footer
   claims the 1fr meant for the viewer. Flex distributes by child, not by slot,
   so any of these can be hidden without disturbing the rest. */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin: 0 auto;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
}

.topbar,
.tabs,
.pager,
.special {
  flex: none;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--bg-elev);
  flex: none;
}

.brand-text {
  min-width: 0;
  flex: 1;
}

.brand-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-tag {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

.icon-btn:active {
  background: #2a2320;
}

/* ---------- menu tabs ---------- */

.tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.tab[aria-selected='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- the zoomable page ---------- */

.viewer {
  position: relative;
  overflow: hidden;
  background: #0d0a08;
  flex: 1 1 auto;
  min-height: 0; /* without this a flex item refuses to shrink below its content */
}

.viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none; /* required: we handle every gesture ourselves */
  cursor: grab;
}

.viewport.is-zoomed {
  cursor: grab;
}

.stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Absolutely filling the stage with `object-fit: contain`, rather than sizing
   the element itself with max-width/max-height. As a centred grid item the
   image's percentage max-height resolved against an auto-sized grid row that
   had already grown to the image's own height, so it never clamped and tall
   pages overflowed on wide screens. This way no intrinsic sizing is involved.
   ZoomPane.fittedRect() derives the same contain geometry from naturalWidth /
   naturalHeight, so the gesture maths still lines up exactly. */
.page-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* Keeps small text legible while the user is zoomed in. */
  image-rendering: -webkit-optimize-contrast;
}

.page-img.is-loading {
  opacity: 0;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- page navigation ---------- */

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 16, 13, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.nav-arrow svg {
  width: 22px;
  height: 22px;
}

.nav-arrow.prev {
  left: 8px;
}

.nav-arrow.next {
  right: 8px;
}

/* Arrows are a desktop/backup affordance — on touch the swipe is primary, so
   they only surface on devices with a real pointer. */
@media (hover: hover) and (pointer: fine) {
  .viewer:hover .nav-arrow:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }
}

.viewer.show-arrows .nav-arrow:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- filmstrip ---------- */

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.filmstrip {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  max-width: 100%;
}

.filmstrip::-webkit-scrollbar {
  display: none;
}

.thumb {
  position: relative;
  flex: none;
  height: 54px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: center;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s, transform 0.15s;
}

.thumb img {
  display: block;
  height: 100%;
  width: auto;
  /* Falls back to a sane box before the aspect ratio is known. */
  min-width: 30px;
  object-fit: cover;
}

.thumb-n {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
}

.thumb[aria-current='true'] {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ---------- specials banner ---------- */

.special {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.05));
  border-bottom: 1px solid var(--line);
}

.special-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.special-text {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
}

.special-close {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.special-close:active {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- welcome screen ---------- */

/* Sits above the menu (which keeps rendering underneath, so tapping through is
   instant) but below the splash and the contact sheet. */
.home {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--safe-t) + 14px) 14px calc(var(--safe-b) + 16px);
}

.home-scroll {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Contain, never crop: a welcome flyer is a designed thing and cutting the
   bottom off it is worse than a letterboxed edge. */
.home-art {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.home-brand {
  text-align: center;
  padding: 18px 8px 4px;
}

.home-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 21px;
  background: var(--bg-elev);
}

.home-name {
  margin: 13px 0 0;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.home-tag {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.home-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-btn {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  font: 600 17px/1.25 inherit;
  cursor: pointer;
}

.home-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.home-btn.accent {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 162, 39, 0.12);
}

.home-btn:active {
  filter: brightness(0.94);
}

.home-menus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.home-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.home-chip:active {
  border-color: var(--accent);
}

.home-link {
  padding: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* Header pill that hops between the menu and today's special. */
.chip-btn {
  flex: none;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--accent);
  font: 600 13px/1 inherit;
  cursor: pointer;
}

.chip-btn:active {
  background: rgba(201, 162, 39, 0.26);
}

/* ---------- splash ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.4s ease, visibility 0.4s;
}

.splash.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-inner {
  display: grid;
  justify-items: center;
  gap: 14px;
  animation: splashin 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes splashin {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

.splash-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 20px;
}

.splash-name {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.splash-bar {
  width: 84px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.splash-bar > i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: splashbar 1.1s ease-in-out infinite;
}

@keyframes splashbar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

.reset-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 16, 13, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 600 13px/1 inherit;
  cursor: pointer;
}

.reset-zoom svg {
  width: 15px;
  height: 15px;
}

.viewer.is-zoomed .reset-zoom {
  display: flex;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(20, 16, 13, 0.75);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  animation: hintfade 4s ease forwards;
}

@keyframes hintfade {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- empty / error states ---------- */

.state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: #0d0a08;
}

.state-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.state-body {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 32ch;
}

/* ---------- contact sheet ---------- */

.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 20;
  animation: fade 0.2s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: 85vh;
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 16px calc(16px + var(--safe-b));
  border-radius: 20px 20px 0 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideup 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes slideup {
  from {
    transform: translateY(100%);
  }
}

.sheet-grab {
  width: 38px;
  height: 4px;
  margin: 4px auto 14px;
  border-radius: 2px;
  background: #4a3f38;
}

.sheet h2 {
  margin: 0 0 4px;
  font-size: 19px;
}

.sheet-sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 4px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.contact-row .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #2a2320;
  font-size: 17px;
}

.contact-row .lbl {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-row .val {
  font-size: 15px;
  overflow-wrap: anywhere;
  /* Multi-line addresses are entered with real line breaks — keep them. */
  white-space: pre-line;
}

.hours {
  margin: 14px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.hours h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 4px;
  font-size: 14px;
}

.hours-row .d {
  color: var(--muted);
}

.sheet-close {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: 600 15px/1 inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}