/* 3D menu — phone-first, no framework, no build step. */

:root {
  --bg: #12100e;
  --surface: #1c1917;
  --surface-2: #262220;
  --line: #332e2b;
  --text: #f5f0ea;
  --muted: #a49b93;
  --accent: #ff8a3d;
  --accent-ink: #1a1108;
  --radius: 16px;
  --shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: env(safe-area-inset-bottom); }

a { color: var(--accent); }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(18 16 14 / 92%);                       /* fallback */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}

.topbar h1 { text-align: center; }

/* The menu page's header carries only the title — the studio and capture
   buttons that used to flank it are gone. Left in the first column of a
   three-column grid the title would sit against the left edge, so give it the
   whole row when it is on its own. The operator pages keep their side links
   and are unaffected. */
.topbar-inner > h1:only-child { grid-column: 1 / -1; }

/* Icon-only action, so the title keeps the room it needs on a phone. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  flex: 0 0 auto;
}
.icon-btn:hover { color: var(--text); border-color: var(--muted); }
.icon-btn[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { display: block; }

.topbar h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ghost-link {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ghost-link:hover { color: var(--text); border-color: var(--muted); }

/* Horizontally scrolling category chips — the standard mobile pattern. */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 12px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ------------------------------------------------------------------ grid */

main { padding: 16px; max-width: 1100px; margin: 0 auto; }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: inherit;
  font: inherit;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
}
.card:active { transform: scale(.985); }
@media (hover: hover) {
  .card:hover { border-color: var(--muted); }
}

.card-media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2) center/cover no-repeat;
  position: relative;
}

.badge-3d {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 55%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
}

.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.card-name { font-size: 15px; font-weight: 600; line-height: 1.25; }
.card-desc {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-price { font-size: 14px; font-weight: 650; color: var(--accent); margin-top: 2px; }

.empty { color: var(--muted); text-align: center; padding: 48px 16px; }

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

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; }
.sheet[hidden] { display: none; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.sheet-panel {
  position: relative;
  margin: auto auto 0;
  width: 100%;
  max-height: 92vh;                                      /* fallback */
  max-height: 92dvh;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  animation: rise .22s cubic-bezier(.2, .7, .3, 1);
}

@keyframes rise { from { transform: translateY(4%); opacity: .6; } }

@media (min-width: 720px) {
  .sheet-panel {
    margin: auto;
    max-width: 620px;
    border-radius: var(--radius);
    max-height: 90vh;                                    /* fallback */
    max-height: 90dvh;
  }
}

.sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgb(0 0 0 / 45%);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.viewer-wrap { background: var(--surface-2); }

model-viewer {
  width: 100%;
  height: 46vh;                                          /* fallback */
  height: 46dvh;
  min-height: 260px;
  --poster-color: transparent;
  background: radial-gradient(120% 90% at 50% 15%, #322c28 0%, #1a1716 70%);
}

@media (min-width: 720px) { model-viewer { height: 380px; } }

.viewer-progress {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  overflow: hidden;
}
.viewer-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .15s linear;
}
.viewer-progress[hidden] { display: none; }

.ar-button {
  position: absolute;
  bottom: 14px;
  right: 14px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 40%);
}

.sheet-body { padding: 16px 18px 24px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: 21px; font-weight: 650; }
.price { color: var(--accent); font-weight: 700; white-space: nowrap; }
.desc { color: var(--muted); margin: 8px 0 0; }

.ar-note {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: #2a2320;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* ---------------------------------------------------------------- studio */

.studio { max-width: 640px; margin: 0 auto; padding: 20px 16px 60px; }
.studio h2 { font-size: 18px; margin: 28px 0 10px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted); }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="file"] { padding: 9px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

button.primary {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 13px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
}
button.primary:disabled { opacity: .5; cursor: default; }

.progress { margin-top: 16px; }
.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .3s ease;
}
.progress-label { font-size: 13px; color: var(--muted); margin-top: 8px; }

.log {
  margin-top: 12px;
  max-height: 220px;
  overflow-y: auto;
  background: #0d0b0a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #cfc6bd;
  white-space: pre-wrap;
}

.notice { border-radius: 10px; padding: 11px 13px; font-size: 13px; margin-top: 12px; }
.notice.warn { background: #3a2a12; color: #f2c98a; border: 1px solid #5a3f18; }
.notice.error { background: #3a1717; color: #f0a3a3; border: 1px solid #5c2626; }
.notice.ok { background: #16301f; color: #96e0b0; border: 1px solid #21492f; }

.tips { color: var(--muted); font-size: 13px; padding-left: 18px; }
.tips li { margin-bottom: 6px; }

/* ------------------------------------------------- dish management cards */
/* Shared by the studio and the export page: a dish plus the things you can
   do to it, so no screen makes you go somewhere else and re-pick it. */

.dish-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin-bottom: 8px;
}

.dish-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dish-card.is-target { border-color: var(--accent); }

.dish-thumb {
  aspect-ratio: 4 / 3;
  background: var(--surface-2) center/cover no-repeat;
  position: relative;
}
.dish-thumb .badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgb(0 0 0 / 60%);
  color: var(--text);
}

.dish-info { padding: 10px 12px 6px; }
.dish-name { font-size: 15px; font-weight: 600; line-height: 1.25; }
.dish-meta { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

.dish-actions {
  display: flex;
  gap: 6px;
  padding: 8px 12px 12px;
  margin-top: auto;
}

.action {
  flex: 1;
  text-align: center;
  font: inherit;
  font-size: 13px;
  padding: 9px 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.action:hover { border-color: var(--muted); }
.action.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 10px;
}
.section-head h2 { margin: 0; }

/* ------------------------------------------------------- viewer controls */
/* Dragging is not discoverable on a phone, and pinch-zoom competes with the
   page. Explicit buttons make both reachable one-handed. */

.viewer-wrap { position: relative; }

.viewer-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.viewer-controls button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 14%);
  background: rgb(0 0 0 / 48%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.viewer-controls button:active { background: rgb(0 0 0 / 70%); }

.viewer-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgb(0 0 0 / 50%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s ease;
}
.viewer-hint[hidden] { display: block; opacity: 0; }