/* EnTuMesa components.
   A CSS translation of the design system's React primitives, so the server can render
   them without a JS build step. Values come from tokens/ — never hardcode a hex here.

   Brand rule enforced throughout: electric violet (--ar-accent) is used ONLY by AR
   surfaces (.etm-ar-*) and the focus ring. Ember orange is the single conversion colour. */

/* ---------------------------------------------------------------- layout */

.etm-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 900px) {
  .etm-container { padding: 0 var(--gutter-desktop); }
}

/* The diner's menu is a single centred column — never a wide grid. */
.etm-menu-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface-page);
  padding-bottom: var(--space-9);
}

.etm-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.etm-row { display: flex; align-items: center; gap: var(--space-3); }
.etm-spacer { flex: 1; }
.etm-hidden { display: none !important; }

/* ---------------------------------------------------------------- buttons */

.etm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-size);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.etm-btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
.etm-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--text-small); }
.etm-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--text-lead); }
.etm-btn--full { display: flex; width: 100%; }

/* Conversion colour. At most one of these per screen. */
.etm-btn--primary {
  background: var(--action-primary);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-action);
}
.etm-btn--primary:hover:not(:disabled) {
  background: var(--action-primary-hover);
  box-shadow: var(--shadow-action-hover);
}
.etm-btn--primary:active:not(:disabled) { background: var(--action-primary-active); }

.etm-btn--secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.etm-btn--secondary:hover:not(:disabled) { box-shadow: var(--shadow-sm); }

.etm-btn--ghost { background: transparent; color: var(--text-strong); }
.etm-btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); }

.etm-btn--danger {
  background: var(--status-error-soft);
  color: var(--status-error);
  border-color: var(--status-error);
}
.etm-btn--danger:hover:not(:disabled) { background: var(--status-error); color: var(--white); }

.etm-on-dark .etm-btn--secondary,
.etm-btn--secondary.etm-on-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--border-on-dark);
}
.etm-on-dark .etm-btn--ghost { color: var(--text-on-dark); }
.etm-on-dark .etm-btn--ghost:hover:not(:disabled) { background: rgba(250, 243, 232, .10); }

/* Never signal disabled with opacity alone — the design system is explicit about this. */
.etm-btn:disabled,
.etm-ar-btn:disabled {
  background: var(--action-disabled-bg);
  color: var(--action-disabled-text);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}

/* Links dressed as controls are not prose links. The base stylesheet underlines every
   <a> via border-bottom, and templates used to fight it with inline border-bottom:none —
   which also amputated the control's own bottom border (a three-sided button shipped
   that way). These rules out-rank both `a` and `a:hover` so no inline hack is needed. */
a.etm-btn, a.etm-btn:hover,
a.etm-iconbtn, a.etm-iconbtn:hover,
a.etm-ar-btn, a.etm-ar-btn:hover {
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
a.etm-btn--secondary, a.etm-btn--secondary:hover { border-bottom-color: var(--border-strong); }
a.etm-ar-btn--soft, a.etm-ar-btn--soft:hover { border-bottom-color: var(--ar-accent); }
a.etm-tag, a.etm-tag:hover { border-bottom: 1px solid var(--border-subtle); }
a.etm-tag[aria-pressed="true"], a.etm-tag[aria-pressed="true"]:hover {
  border-bottom-color: var(--carbon-800);
}
/* For links wrapping a badge or image, where any underline is noise. */
a.etm-plain, a.etm-plain:hover { border-bottom: none; }

.etm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.etm-iconbtn:hover { background: var(--surface-sunken); }
.etm-iconbtn--sm { width: 32px; height: 32px; }
.etm-iconbtn--outline { background: var(--surface-card); border-color: var(--border-subtle); }
.etm-on-dark .etm-iconbtn { color: var(--text-on-dark); }
.etm-on-dark .etm-iconbtn:hover { background: rgba(250, 243, 232, .12); }

/* ------------------------------------------------------- AR (violet only) */

.etm-ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill); /* everything AR is a pill — shape carries meaning too */
  background: var(--ar-accent);
  color: var(--ar-accent-on);
  box-shadow: var(--shadow-ar);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-size);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.etm-ar-btn:hover:not(:disabled) { background: var(--ar-accent-hover); box-shadow: var(--shadow-ar-hover); }
.etm-ar-btn:active:not(:disabled) { background: var(--ar-accent-active); transform: scale(var(--press-scale)); }
.etm-ar-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--text-small); }
.etm-ar-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--text-lead); }
.etm-ar-btn--full { display: flex; width: 100%; }
.etm-ar-btn--soft {
  background: transparent;
  color: var(--ar-accent);
  border-color: var(--ar-accent);
  box-shadow: none;
}
.etm-ar-btn--soft:hover:not(:disabled) { background: var(--volt-100); }

/* The only looping animation in the whole system. At most one per screen —
   in dish lists the AR buttons do NOT pulse. */
.etm-ar-btn--pulse { animation: etm-ar-pulse var(--duration-ar-pulse) var(--ease-standard) infinite; }

/* ---------------------------------------------------------------- badges */

.etm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  line-height: 1.4;
  white-space: nowrap;
}
.etm-badge--ar { background: var(--ar-accent-soft); color: var(--volt-700); border-color: rgba(124, 92, 255, .28); }
.etm-badge--ember { background: var(--action-primary-soft); color: var(--ember-700); border-color: rgba(255, 107, 53, .28); }
.etm-badge--success { background: var(--status-ok-soft); color: var(--status-ok); border-color: rgba(62, 140, 90, .28); }
.etm-badge--warning { background: var(--status-warn-soft); color: #9A7210; border-color: rgba(217, 162, 27, .32); }
.etm-badge--error { background: var(--status-error-soft); color: var(--status-error); border-color: rgba(196, 54, 47, .28); }

/* ---------------------------------------------------------------- cards */

.etm-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.etm-card--sunken { background: var(--surface-sunken); }
.etm-card--flush { padding: 0; overflow: hidden; }

/* ---------------------------------------------------------------- tags */

.etm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.etm-tag:hover { background: var(--surface-sunken); }
.etm-tag[aria-pressed="true"] {
  background: var(--carbon-800);
  border-color: var(--carbon-800);
  color: var(--text-on-dark);
}
.etm-tag-scroller {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0 var(--gutter-mobile) var(--space-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Fades the right edge so a cut-off chip reads as "scroll me", not as broken layout.
     carta.js drops the fade once the strip is scrolled to the end. */
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.etm-tag-scroller.is-at-end { mask-image: none; }
.etm-tag-scroller::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------- public menu header */

.etm-menu-header {
  position: relative;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  /* Extra bottom padding leaves dark band under the meta line, so the promo card
     overlapping below still clears the text instead of crowding it. */
  padding: var(--space-5) var(--gutter-mobile) var(--space-8);
  border-radius: 0 0 var(--radius-modal) var(--radius-modal);
}

/* Optional venue photo behind the header. The scrim is not decoration: white text over
   an unmasked photo fails contrast the moment the owner uploads a bright one, and this
   header is the first thing a diner reads. Carbon at 88% top to 66% bottom keeps the
   band reading as carbon — the design system's rhythm survives — while the photo shows
   through as atmosphere. The photo sits in ::before so it can be dimmed without
   dimming the text on top of it. */
.etm-menu-header--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(to bottom, rgba(20, 20, 20, .90), rgba(20, 20, 20, .74)),
    var(--etm-hero);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.etm-menu-header--photo > * { position: relative; z-index: 1; }
/* Warm grey secondary text survives on flat carbon but not over a bright photo, and
   the owner picks the photo — so on a hero the meta line goes full cream. */
.etm-menu-header--photo .etm-menu-meta { color: var(--text-on-dark); }
.etm-menu-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.etm-menu-header__logo { height: 26px; }
.etm-menu-controls { display: flex; align-items: center; gap: var(--space-2); }

.etm-menu-header h1 {
  color: var(--text-on-dark);
  /* Scales with the column: 38px on a 480px card, but never crowds a 375px iPhone. */
  font-size: clamp(28px, 9vw, var(--text-h2));
  margin: var(--space-6) 0 var(--space-2);
}
.etm-menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--text-on-dark-muted);
  font-size: var(--text-small);
}
.etm-menu-meta > span { display: inline-flex; align-items: center; gap: 6px; }
/* Indented to the width of the pin above it, so both lines share a left edge. */
.etm-menu-meta__address { padding-left: 21px; }

.etm-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
}
.etm-lang__globe { display: inline-flex; padding: 0 6px 0 8px; color: var(--warm-400); }
.etm-lang a {
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  letter-spacing: .04em;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.etm-lang a[aria-current="true"] { background: var(--carbon-800); color: var(--cream-50); }
.etm-on-dark .etm-lang { background: rgba(250, 243, 232, .10); border-color: var(--border-on-dark); }
.etm-on-dark .etm-lang__globe { color: var(--text-on-dark-muted); }
.etm-on-dark .etm-lang a { color: var(--text-on-dark); }
.etm-on-dark .etm-lang a[aria-current="true"] { background: var(--cream-50); color: var(--carbon-800); }

/* Currency toggle mirrors the language switcher so the pair reads as one control. */
.etm-currency { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(250, 243, 232, .10); border: 1px solid var(--border-on-dark); }
.etm-currency button {
  height: 28px;
  padding: 0 12px;
  /* Wide enough for the widest label in any language («UYU»/«USD» vs «$U»/«US$»), so
     switching language never resizes the control and nudges its neighbours sideways. */
  min-width: 52px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.etm-currency button[aria-pressed="true"] { background: var(--cream-50); color: var(--carbon-800); }

.etm-ar-promo {
  margin: var(--space-5) var(--gutter-mobile) var(--space-6);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
/* Overlaps the dark header, pulling the eye straight to the feature that sells.
   Kept shallow on purpose: a deeper overlap eats the header's rounded bottom corners
   and the dark band stops reading as a band. */
.etm-menu-header + .etm-ar-promo { margin-top: calc(var(--space-3) * -1); }

.etm-ar-promo__title {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lead);
  color: var(--text-strong);
}
.etm-ar-promo__body { font-size: var(--text-small); color: var(--text-muted); }

/* ---------------------------------------------------------------- dishes */

.etm-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-7) 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}

/* Dish spacing is its own thing — .etm-stack is shared with the panel, where a
   tighter 12px gap is right. */
.etm-dish-list { display: flex; flex-direction: column; gap: var(--space-4); }
.etm-section-header h3 { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-extrabold); }
.etm-section-header__count {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--warm-400);
}

.etm-dish {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.etm-dish:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.etm-dish--out { opacity: 1; }
.etm-dish--out .etm-dish__media { filter: grayscale(1); }

.etm-dish__media {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  border-radius: var(--radius-image);
  background: var(--surface-sunken) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-300);
  overflow: hidden;
}
.etm-dish__media .etm-badge { position: absolute; top: 8px; left: 8px; }
.etm-dish__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.etm-dish__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.etm-dish__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}
.etm-dish__desc { margin: 0; font-size: var(--text-small); color: var(--text-muted); line-height: var(--leading-normal); }
.etm-dish__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.etm-dish__ar { margin-top: var(--space-1); }

/* Held for a few seconds after the promo card points here, then dropped. A permanent
   ring would just be a second accent competing with the button it is pointing at. */
.etm-dish--pointed {
  box-shadow: 0 0 0 2px var(--ar-accent), var(--shadow-md);
  transform: translateY(-2px);
}

/* Price is Nunito ExtraBold, one step up from the dish name — the design system is
   specific about this: the price should be as easy to scan as the name. */
.etm-price {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lead);
  color: var(--text-price);
  white-space: nowrap;
}

/* --------------------------------------------------------- AR viewer sheet */

.etm-ar-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--surface-overlay);
  backdrop-filter: var(--blur-overlay);
  -webkit-backdrop-filter: var(--blur-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.etm-ar-overlay[hidden] { display: none; }
.etm-ar-sheet {
  width: min(560px, 100%);
  background: var(--surface-inverse);
  border: 1px solid var(--border-on-dark);
  border-bottom: none;
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  padding: var(--space-4) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: etm-fade-up var(--duration-slow) var(--ease-out);
  max-height: 96vh;
  overflow-y: auto;
}
.etm-ar-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* The sheet sits on carbon, so its controls need the on-dark treatment. */
.etm-ar-sheet .etm-iconbtn { color: var(--text-on-dark); }
.etm-ar-sheet .etm-iconbtn:hover { background: rgba(250, 243, 232, .12); }

/* The single permitted gradient in the whole system: the violet halo that reads as
   holographic light inside the 3D frame. */
.etm-ar-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 15%, rgba(124, 92, 255, .18), transparent 70%), var(--carbon-900);
  border: 1px solid var(--border-on-dark);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etm-ar-frame model-viewer { width: 100%; height: 320px; background: transparent; --poster-color: transparent; }
.etm-ar-frame__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--volt-300);
  font-size: var(--text-caption);
  text-align: center;
}
.etm-ar-sheet__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
/* The dish name wraps; the price never does — «$U 1.290» split across two lines
   reads as two different numbers. */
.etm-ar-sheet__meta { min-width: 0; }
.etm-ar-sheet__name {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h4);
  color: var(--text-on-dark);
}
.etm-ar-sheet__hint { font-size: var(--text-small); color: var(--text-on-dark-muted); }
.etm-ar-sheet__price {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h4);
  color: var(--ember-500);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- forms */

.etm-field { display: flex; flex-direction: column; gap: var(--space-2); }
.etm-field__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  color: var(--text-strong);
}
.etm-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: 0 var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.etm-field__control:focus-within {
  border-color: var(--carbon-700);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); /* focus halo — accessibility, not decoration */
}
.etm-field__prefix { color: var(--text-muted); font-size: var(--text-small); }
.etm-field input,
.etm-field textarea,
.etm-field select {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-body-size);
  color: var(--text-strong);
  padding: 10px 0;
}
.etm-field textarea { resize: vertical; min-height: 72px; line-height: var(--leading-normal); }
.etm-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--space-6); }
.etm-field__control--select { position: relative; }
.etm-field__chev { position: absolute; right: 12px; color: var(--warm-400); pointer-events: none; display: inline-flex; }
.etm-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.etm-field__error { font-size: var(--text-caption); color: var(--status-error); }
.etm-field--error .etm-field__control { border-color: var(--status-error); }

.etm-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.etm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.etm-switch__track {
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--warm-300);
  display: flex;
  align-items: center;
  transition: background var(--duration-base) var(--ease-standard);
}
.etm-switch__thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-standard);
}
.etm-switch input:checked + .etm-switch__track { background: var(--status-ok); }
.etm-switch input:checked + .etm-switch__track .etm-switch__thumb { transform: translateX(18px); }
.etm-switch input:focus-visible + .etm-switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.etm-switch__text { display: flex; flex-direction: column; gap: 2px; }
.etm-switch__label { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-small); color: var(--text-strong); }
.etm-switch__desc { font-size: var(--text-caption); color: var(--text-muted); }

/* ---------------------------------------------------------------- panel */

.etm-panel { display: flex; min-height: 100vh; background: var(--surface-page); }
.etm-sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* The design system calls for a fixed sidebar: the content scrolls, the menu stays.
     Without this, a tall settings page dragged the whole nav off-screen. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: flex-start;
}
.etm-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.etm-sidebar nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-on-dark-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.etm-sidebar nav a:hover { background: rgba(250, 243, 232, .06); color: var(--cream-50); }
.etm-sidebar nav a[aria-current="page"] { background: rgba(250, 243, 232, .12); color: var(--cream-50); }
.etm-sidebar__help {
  margin-top: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverse-raised);
  border: 1px solid var(--border-on-dark);
}
.etm-sidebar__help-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-small); color: var(--cream-50); margin-bottom: var(--space-3); }
.etm-sidebar__help-body { font-size: var(--text-caption); color: var(--text-on-dark-muted); margin: 4px 0 10px; }

.etm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.etm-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.etm-topbar h2 { margin: 0; font-size: var(--text-h3); }
.etm-topbar__sub { font-size: var(--text-small); color: var(--text-muted); }
.etm-content { padding: var(--space-6) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }

/* minmax(0, 1fr) rather than 1fr: a bare 1fr track floors at min-content, so one wide
   child pushes the whole grid past the viewport instead of wrapping inside it. */
.etm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.etm-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
/* The only place in the product where uppercase + tracking is allowed. */
.etm-metric__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-semibold);
}
.etm-metric__value {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h3);
  color: var(--text-strong);
  line-height: 1;
}
.etm-metric__row { display: flex; align-items: baseline; gap: var(--space-3); }
.etm-metric__delta { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-small); }
.etm-metric__delta--up { color: var(--status-ok); }
.etm-metric__delta--down { color: var(--status-error); }
.etm-metric__foot { font-size: var(--text-caption); color: var(--text-muted); }

/* Two equal fields side by side. minmax(0,1fr) for the same reason as .etm-split, and a
   single column on a phone, where two inputs would share about 150px each. */
.etm-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 560px) { .etm-duo { grid-template-columns: minmax(0, 1fr); } }

.etm-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.etm-bar-row { display: grid; grid-template-columns: minmax(0, 200px) 1fr 48px; align-items: center; gap: var(--space-4); }
.etm-bar-row__name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--text-body); min-width: 0; }
.etm-bar-row__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etm-bar { height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
/* Violet is legitimate here: this bar measures AR views specifically. */
.etm-bar__fill { display: block; height: 100%; background: var(--ar-accent); border-radius: var(--radius-pill); }
.etm-bar-row__n { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-small); color: var(--text-strong); text-align: right; }

.etm-table__head,
.etm-dishrow {
  display: grid;
  grid-template-columns: 44px minmax(0, 2.2fr) 1fr 100px 150px 170px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.etm-table__head {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.etm-dishrow {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-standard);
}
.etm-dishrow:hover { background: var(--surface-sunken); }
.etm-dishrow:last-child { border-bottom: none; }
.etm-dishrow__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-300);
}
.etm-dishrow__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.etm-dishrow__name > span:first-child {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.etm-dishrow__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
/* Hidden-from-menu rows read as switched off, but never via opacity alone. */
.etm-dishrow--off { background: var(--surface-sunken); }
.etm-dishrow--off .etm-dishrow__thumb { filter: grayscale(1); }
.etm-dishrow--off .etm-dishrow__name > span:first-child { color: var(--text-muted); }
.etm-muted { color: var(--text-muted); font-size: var(--text-small); }
/* For URLs and other unbroken strings inside flex rows: wrap instead of overflowing. */
.etm-break { overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------------------ drop zone */

.etm-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: var(--text-small);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.etm-drop:hover { background: var(--surface-sunken); }
/* Violet on hover is correct here: this drop zone only ever accepts 3D models. */
.etm-drop--over { border-color: var(--ar-accent); background: var(--ar-accent-soft); color: var(--volt-700); }
.etm-drop input[type="file"] { display: none; }
.etm-drop__name { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); }

/* ---------------------------------------------------------------- misc */

.etm-flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  border: 1px solid transparent;
}
.etm-flash--ok { background: var(--status-ok-soft); color: var(--status-ok); border-color: rgba(62, 140, 90, .28); }
.etm-flash--warn { background: var(--status-warn-soft); color: #9A7210; border-color: rgba(217, 162, 27, .32); }
.etm-flash--error { background: var(--status-error-soft); color: var(--status-error); border-color: rgba(196, 54, 47, .28); }

.etm-empty {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.etm-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter-mobile);
  background: var(--surface-inverse);
}
.etm-login__card { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--space-4); }

/* Real phones are 375–430px wide, not the 480px column the design system draws.
   Everything below keeps the menu honest at an iPhone SE width. */
@media (max-width: 480px) {
  /* Gutter stays at the design system's 20px — narrowing it is what made the
     column feel boxed in. Breathing room comes from vertical rhythm instead. */

  /* Logo on its own line, then language and currency as one balanced row.
     Left to wrap on its own, the currency toggle drifts under the switcher. */
  .etm-menu-controls { flex: 1 1 100%; justify-content: space-between; }
  .etm-menu-header__logo { height: 22px; }

  /* Text above, full-width button below — a bigger tap target and no more
     three-line title squeezed against the button. */
  .etm-ar-promo { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .etm-ar-promo .etm-ar-btn { width: 100%; justify-content: center; }

  /* Card padding drops back to 16 here so the wider gutter above doesn't squeeze
     the dish description into a four-line sliver. */
  .etm-dish { padding: var(--space-4); }
  .etm-dish__media { flex-basis: 96px; width: 96px; height: 96px; }
  .etm-dish__name { font-size: var(--text-body-size); }
  .etm-price { font-size: var(--text-body-size); }
  .etm-section-header h3 { font-size: var(--text-lead); }

  .etm-ar-sheet { padding: var(--space-4) var(--space-4) var(--space-5); }
  .etm-ar-sheet__name, .etm-ar-sheet__price { font-size: var(--text-lead); }
}

@media (max-width: 860px) {
  .etm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etm-split { grid-template-columns: minmax(0, 1fr); }
  .etm-panel { flex-direction: column; }
  .etm-sidebar {
    width: 100%;
    flex: none;
    gap: var(--space-4);
    padding: var(--space-4) var(--gutter-mobile);
    position: static;
    height: auto;
    overflow-y: visible;
  }
  /* One scrollable strip instead of a wrapped block that eats half the screen.
     min-width:0 is load-bearing: without it a nowrap flex child reports its full
     content width as its minimum and drags the whole panel past the viewport. */
  .etm-panel, .etm-sidebar, .etm-main { min-width: 0; max-width: 100%; }
  .etm-sidebar nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    /* A clipped item with no cue reads as "the menu ends here". The fade says
       "scroll me"; panel.js drops it once the strip is scrolled to the end —
       same pattern as the public menu's filter chips. */
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
  }
  .etm-sidebar nav.is-at-end {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .etm-sidebar nav::-webkit-scrollbar { display: none; }
  .etm-sidebar nav a { white-space: nowrap; }
  .etm-sidebar__help { display: none; }
  .etm-content, .etm-topbar { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
  .etm-topbar { flex-wrap: wrap; gap: var(--space-4); }
  .etm-table__head { display: none; }

  /* Full-width bar under the dish name — at this width the three-column version
     leaves about 50px for the bar, which stops being a chart. */
  .etm-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name count" "bar bar";
    row-gap: 6px;
  }
  .etm-bar-row__name { grid-area: name; }
  .etm-bar { grid-area: bar; }
  .etm-bar-row__n { grid-area: count; }

  /* The owner marks a dish sold out from the kitchen, on a phone. That switch has to
     be reachable without horizontal scrolling or squinting at a truncated name. */
  .etm-dishrow {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  name"
      "thumb cat   price"
      "state state actions";
    row-gap: var(--space-2);
    padding: var(--space-4);
  }
  .etm-dishrow > :nth-child(1) { grid-area: thumb; align-self: start; }
  .etm-dishrow > :nth-child(2) { grid-area: name; }
  .etm-dishrow > :nth-child(3) { grid-area: cat; }
  .etm-dishrow > :nth-child(4) { grid-area: price; text-align: right; }
  .etm-dishrow > :nth-child(5) { grid-area: state; }
  .etm-dishrow > :nth-child(6) { grid-area: actions; }
  /* Full names wrap here — a truncated «Niguiri de wagyu fla…» is useless in a list. */
  .etm-dishrow__name { flex-wrap: wrap; }
  .etm-dishrow__name > span:first-child { white-space: normal; overflow: visible; }
}