/* ── Menu Card Module ─────────────────────────────────
   Extracted from style.css — conceptually cohesive unit:
   structured card (v1.3) + legacy layout + version mgmt + skeleton.
   Keyframe deps: skPulse defined in style.css (shared with drawer/invitation).
   ──────────────────────────────────────────────────── */

.menu-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  width: 100%;
  white-space: normal;
  animation: menuCardIn 400ms ease both;
}

@keyframes menuCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Structured menu card (v1.3) ─────────────────── */

/* Override old two-column .menu-sec layout for new card structure */
.menu-card-sec.menu-sec {
  display: block;
  gap: 0;
  margin-bottom: 0;
}

/* Reset old label sizing inside new sections */
.menu-card-sec .menu-sec-label {
  width: auto;
  flex-shrink: unset;
  padding-top: 0;
}

.menu-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
}

.menu-card-title {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
}

.menu-card-meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--ink-4);
  letter-spacing: 0.08em;
}

/* Section header row (gold label + count badge) */
.menu-card-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--color-gold);
  font-size: var(--font-size-xs);
  letter-spacing: 2px;
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  margin-top: var(--space-3);
}

.menu-card-section-title {
  /* Inherits section color/font */
}

.menu-card-section-count {
  color: var(--ink-4);
  letter-spacing: 0;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
}

/* Section dish list */
.menu-card-dishes {
  padding-top: var(--space-1);
}

/* Individual dish row */
.menu-card-dish {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-1) 0;
}

.menu-card-dish-name {
  font-family: var(--font-kai);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  flex: 1;
  min-width: 0;
}

.menu-card-dish-star {
  color: var(--color-gold);
  margin-left: var(--space-1);
  font-style: normal;
}

/* Summary row */
.menu-card-summary {
  border-top: 1px solid var(--color-border) !important;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--ink-3);
  font-family: var(--font-family-mono);
  letter-spacing: 0.05em;
  text-align: left !important;    /* override legacy .menu-footer right-align */
}

/* Action buttons row */
.menu-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.menu-card-action-primary {
  grid-column: 1 / -1;
}

.menu-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  min-height: var(--touch-min);
  cursor: pointer;
  border: 1.5px solid;
  background: transparent;
  transition: opacity var(--duration-fast) var(--easing-standard),
              transform var(--duration-fast) var(--easing-standard);
  -webkit-tap-highlight-color: transparent;
}

.menu-card-action:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.menu-card-action:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.menu-card-action-primary {
  border-color: var(--status-confirmed);
  color: var(--status-confirmed);
  background: var(--status-confirmed-bg);
}

.menu-card-action-secondary {
  border-color: var(--color-border);
  color: var(--ink-3);
  background: var(--color-surface);
}

@media (hover: hover) {
  .menu-card-action-primary:hover {
    background: var(--status-confirmed);
    color: var(--color-text-inverse);
  }
  .menu-card-action-secondary:hover {
    background: var(--color-surface-hover);
  }
}

/* ── Legacy menu layout (kept for backward compat) ── */

.menu-header {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--color-gold-muted);
  margin-bottom: 13px;          /* 13:21(title→sec) = φ⁻¹ */
}

.menu-title {
  font-family: var(--font-family-menu, var(--font-family-serif));
  font-size: 19px;              /* 15 × √φ = 19.08 */
  font-weight: 400;
  letter-spacing: 0.25em;
  line-height: 1.618;           /* φ */
  color: var(--color-brand-dark);
  margin-bottom: 21px;
  padding-bottom: 13px;         /* 13:21 = φ⁻¹ */
  border-bottom: 1px solid rgba(180, 160, 120, 0.15);
}

.menu-title-en {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 24px;              /* 15 × φ = 24.27 */
  letter-spacing: 0.06em;
  margin-right: 5px;
}

.menu-sec {
  display: flex;
  gap: 13px;
  margin-bottom: 21px;
}

.menu-sec:last-of-type {
  margin-bottom: 0;
}

/* 左侧分类标签 — 华文楷体加粗 */
.menu-sec-label {
  font-family: var(--font-family-menu, var(--font-family-serif));
  font-size: clamp(16px, 4.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  flex-shrink: 0;
  width: 2.6em;
  padding-top: 1px;
}

/* 右侧菜品列表 */
.menu-sec-dishes {
  flex: 1;
  min-width: 0;
}

/* 兼容旧格式（menu-sec-title） */
.menu-sec-title {
  font-family: var(--font-family-menu, var(--font-family-serif));
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--color-brand);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.menu-sec-count {
  font-size: 9px;
  color: var(--color-brand-light);
  letter-spacing: 0.05em;
}

.menu-item {
  font-family: var(--font-family-menu, var(--font-family-serif));
  font-size: clamp(15px, 4.2vw, 17px);  /* 手机15px，桌面17px */
  letter-spacing: 0.06em;
  padding: 2px 0;
  color: var(--color-text-primary);
  line-height: 1.618;           /* φ */
  overflow-wrap: break-word;
  word-break: break-all;
}

.msg-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-gold-muted);
  line-height: 1.6;
}

.menu-item-sc {
  display: block;
  font-size: 13px;             /* 从11→13，确保简体中文可读 */
  color: var(--color-gold-muted);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.menu-footer {
  margin-top: 21px;
  padding-top: 13px;
  border-top: 1.5px solid var(--color-brand-dark);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-brand-dark);
  text-align: right;
}

/* ── Menu version management ─────────────────────── */

.menu-card { position: relative; }

.menu-ver-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  padding: 2px 8px;
  background: var(--color-surface-secondary);
  color: var(--color-gold-muted);
  border-radius: 3px;
  letter-spacing: 0.08em;
  z-index: 1;
}

.menu-ver-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  align-items: center;
}

.menu-ver-tab {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-gold-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-standard);
  -webkit-tap-highlight-color: transparent;
}

.menu-ver-tab.active {
  background: var(--color-brand-dark);
  color: var(--card-bg);
  border-color: var(--color-brand-dark);
}

.menu-ver-tab:not(.active):active {
  background: var(--color-surface-secondary);
}

@media (hover: hover) {
  .menu-ver-tab:not(.active):hover {
    background: var(--color-surface-secondary);
  }
}

.menu-ver-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.menu-ver-track {
  display: flex;
  transition: transform var(--duration-normal) var(--easing-standard);
}

.menu-ver-slide {
  min-width: 100%;
  flex-shrink: 0;
}

/* ── Menu Skeleton ───────────────────────────────── */
/* Mirrors real menu-card layout with golden ratio proportions */

.menu-skeleton {
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  width: 100%;
  animation: menuCardIn 400ms ease both;
}

.menu-skeleton .sk-header {
  width: 61.8%;               /* φ⁻¹ */
  height: 10px;
  background: var(--color-border);
  border-radius: var(--radius-sm);  /* 5px — Fibonacci sm */
  margin-bottom: 13px;        /* 13:21 = φ⁻¹, matches .menu-header */
  animation: skPulse 2.618s ease-in-out infinite;
}

.menu-skeleton .sk-title {
  width: 38.2%;              /* 1 - φ^-1 = 38.2% */
  height: 18px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 21px;       /* Fibonacci */
  padding-bottom: 13px;      /* matches real title border-bottom space */
  animation: skPulse 2.618s ease-in-out infinite;
}

.menu-skeleton .sk-sec {
  display: flex;
  gap: 13px;                  /* Fibonacci, matches .menu-sec */
  margin-bottom: 21px;        /* Fibonacci, matches .menu-sec */
}
.menu-skeleton .sk-sec:last-of-type { margin-bottom: 0; }

.menu-skeleton .sk-label {
  width: 2.4em;
  height: 16px;
  flex-shrink: 0;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  animation: skPulse 2.618s ease-in-out infinite;
}

.menu-skeleton .sk-dishes { flex: 1; min-width: 0; }

.menu-skeleton .sk-dish {
  width: 61.8%;              /* φ⁻¹ — long bar */
  height: 14px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  animation: skPulse 2.618s ease-in-out infinite;
}
.menu-skeleton .sk-dish:nth-child(even) { width: 50%; }  /* medium bar — visual rhythm */
.menu-skeleton .sk-dish.w70 { width: 38.2%; }            /* 1-φ⁻¹ — short, always last */

.menu-skeleton .sk-footer {
  width: 23.6%;              /* φ^-2 */
  height: 12px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: 34px;          /* Fibonacci */
  margin-left: auto;
  animation: skPulse 2.618s ease-in-out infinite;
}