/* =========================================================================
   LoopMenu v5 — Redesign Style Layer (Prompt 0)
   ADDITIVE ONLY. This sheet defines the v5 design tokens and shared
   components from the Master Brief (section 3) + LoopMenu_Prototype_v5.html.

   SAFETY: Nothing here is applied to any existing page. All tokens are
   namespaced under --v5-* and every component class is prefixed .v5-*, so
   loading this sheet cannot change the appearance of any current page.
   Pages opt in by adding a .v5 scope class (see .v5 root below) or by
   using .v5-* classes directly. Until a page does that, this is inert.

   Tokens (Master Brief §3):
     Background #FCFBF7 · Card #FFFFFF /1px #E7E3D8 /r16
     Emphasis card 1.5px #1D1B13 · Ink #1D1B13 · Muted #7A766B
     Accent yellow #FFDA4B (buttons, rings, bars, active states)
   ========================================================================= */

:root {
  /* ===== v5 tokens (namespaced — do not collide with --lm-* v3 tokens) ===== */
  --v5-bg:        #FCFBF7;   /* soft warm white page bg */
  --v5-card:      #FFFFFF;   /* card surface */
  --v5-line:      #E7E3D8;   /* 1px card border */
  --v5-ink:       #1D1B13;   /* all text + structure + emphasis border */
  --v5-muted:     #7A766B;   /* secondary text */
  --v5-sub:       #57513E;   /* tertiary/sub text (from prototype --sub) */
  --v5-accent:    #FFDA4B;   /* THE accent — yellow */
  --v5-accent-ink:#1D1B13;   /* text/border on yellow (always black on yellow) */

  --v5-radius-card: 16px;
  --v5-radius-kpi:  14px;
  --v5-radius-pill: 999px;

  --v5-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --v5-font-body: "Inter", system-ui, sans-serif;
}

/* =========================================================================
   Optional page scope. A page can wrap its content in <div class="v5"> …
   to get the v5 background + base type without affecting anything outside.
   NOT auto-applied anywhere in Prompt 0.
   ========================================================================= */
.v5 {
  background: var(--v5-bg);
  color: var(--v5-ink);
  font-family: var(--v5-font-body);
  -webkit-font-smoothing: antialiased;
}
.v5 h1, .v5 h2, .v5 h3 { font-family: var(--v5-font-display); color: var(--v5-ink); letter-spacing: -0.3px; }
.v5 .v5-sub { font-size: 12.5px; color: var(--v5-muted); margin: 3px 0 14px; }

/* =========================================================================
   SHARED COMPONENTS  (all .v5-* — inert until used)
   ========================================================================= */

/* ---- Buttons ---- */
.v5-btn-primary {
  background: var(--v5-accent);
  color: var(--v5-accent-ink);
  border: 1.5px solid var(--v5-ink);
  border-radius: var(--v5-radius-pill);
  padding: 11px 20px;
  font-weight: 800;
  font-size: 13.5px;
  font-family: var(--v5-font-body);
  cursor: pointer;
  line-height: 1;
  transition: transform .06s ease, filter .12s ease;
}
.v5-btn-primary:hover { filter: brightness(0.97); }
.v5-btn-primary:active { transform: translateY(1px); }
.v5-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.v5-btn-secondary {
  background: #fff;
  color: var(--v5-ink);
  border: 1.5px solid var(--v5-ink);
  border-radius: var(--v5-radius-pill);
  padding: 10px 18px;
  font-weight: 800;
  font-size: 13.5px;
  font-family: var(--v5-font-body);
  cursor: pointer;
  line-height: 1;
  transition: transform .06s ease, background .12s ease;
}
.v5-btn-secondary:hover { background: var(--v5-bg); }
.v5-btn-secondary:active { transform: translateY(1px); }
.v5-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

.v5-btn-ghost {
  background: none; border: none;
  color: var(--v5-ink); font-weight: 700; font-size: 12px;
  cursor: pointer; font-family: var(--v5-font-body);
}

/* ---- Cards ---- */
.v5-card {
  background: var(--v5-card);
  border: 1px solid var(--v5-line);
  border-radius: var(--v5-radius-card);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
/* Emphasis card — for suggestions/insights (1.5px black border) */
.v5-card-emphasis {
  background: var(--v5-card);
  border: 1.5px solid var(--v5-ink);
  border-radius: var(--v5-radius-card);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
/* Dark hero card — payout / loyalty (ink bg, white text, yellow details) */
.v5-hero {
  background: var(--v5-ink);
  color: #fff;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 10px;
  position: relative;
}
.v5-hero .v5-hero-accent { color: var(--v5-accent); }

/* ---- KPI card ---- */
.v5-kpi {
  background: var(--v5-card);
  border: 1px solid var(--v5-line);
  border-radius: var(--v5-radius-kpi);
  padding: 12px 14px;
  position: relative;
}
.v5-kpi .v5-kpi-label { font-size: 11px; color: var(--v5-muted); }
.v5-kpi .v5-kpi-value { font-size: 20px; font-weight: 800; color: var(--v5-ink); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---- Status pill ---- */
.v5-pill {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--v5-radius-pill);
  background: var(--v5-bg);
  border: 1px solid var(--v5-line);
  color: var(--v5-ink);
}
.v5-pill-active { /* StatusPill: yellow bg, black text */
  background: var(--v5-accent);
  color: var(--v5-accent-ink);
  border-color: var(--v5-ink);
}

/* ---- Toggle (yellow when on) ---- */
.v5-toggle {
  width: 40px; height: 22px; border-radius: 11px;
  background: #fff; border: 1px solid var(--v5-ink);
  position: relative; flex-shrink: 0; cursor: pointer;
  padding: 0; display: inline-block; vertical-align: middle;
  transition: background .15s ease;
}
.v5-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--v5-ink);
  transition: left .15s ease, background .15s ease;
}
.v5-toggle.v5-on { background: var(--v5-accent); }
.v5-toggle.v5-on::after { left: 21px; background: #fff; }

/* ---- Progress bar (yellow fill) ---- */
.v5-progress {
  width: 100%; height: 8px; border-radius: 999px;
  background: var(--v5-bg); border: 1px solid var(--v5-line);
  overflow: hidden;
}
.v5-progress > .v5-progress-fill {
  height: 100%; background: var(--v5-accent);
  border-radius: 999px; width: 0%;
  transition: width .4s ease;
}

/* ---- Progress ring (yellow) — for the Regulars meter (Prompt 2) ----
   Use with an SVG or conic-gradient; helper class sets the accent stops. */
.v5-ring {
  --v5-ring-pct: 0;
  width: 84px; height: 84px; border-radius: 50%;
  background:
    conic-gradient(var(--v5-accent) calc(var(--v5-ring-pct) * 1%), var(--v5-line) 0);
  display: grid; place-items: center;
  position: relative;
}
.v5-ring::before {
  content: ""; position: absolute; inset: 10px;
  background: var(--v5-card); border-radius: 50%;
}
.v5-ring > .v5-ring-label {
  position: relative; z-index: 1;
  font-weight: 800; font-size: 18px; color: var(--v5-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Filter chips (yellow active) ---- */
.v5-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.v5-chip {
  font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: var(--v5-radius-pill);
  background: #fff; border: 1px solid var(--v5-line);
  color: var(--v5-muted); cursor: pointer;
  font-family: var(--v5-font-body);
}
.v5-chip.v5-on {
  background: var(--v5-accent);
  border-color: var(--v5-ink);
  color: var(--v5-accent-ink);
}

/* ---- Underline tabs (yellow underline on active) ---- */
.v5-tabs {
  display: flex; gap: 18px;
  border-bottom: 1px solid var(--v5-line);
  overflow-x: auto;
}
.v5-tab {
  font-size: 13px; font-weight: 700;
  color: var(--v5-muted);
  padding: 10px 2px;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  cursor: pointer; white-space: nowrap;
  background: none; font-family: var(--v5-font-body);
}
.v5-tab.v5-on {
  color: var(--v5-ink); font-weight: 800;
  border-bottom-color: var(--v5-accent);
}

/* ---- Highlighted chart bar (yellow) — for Analytics (Prompt 8) ---- */
.v5-bar { background: var(--v5-bg); border: 1px solid var(--v5-line); border-radius: 6px; }
.v5-bar.v5-hi { background: var(--v5-accent); border-color: var(--v5-ink); }

/* ---- Nav marker (small yellow bar above active label) — Prompt 1 ---- */
.v5-nav-item { position: relative; color: var(--v5-muted); font-weight: 700; }
.v5-nav-item.v5-on { color: var(--v5-ink); font-weight: 800; }
.v5-nav-item.v5-on::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 2px; background: var(--v5-accent);
}

/* =========================================================================
   PROMPT 9 — Guest Feed + "Share your visit" composer (NET-NEW surfaces).
   Additive .lm-feed-* / .lm-share-* selectors built on v5 tokens. These do
   not touch any existing page. Skeleton loaders reuse a local .lm-skel.
   ========================================================================= */

/* ---- shared skeleton ---- */
.lm-skel { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size: 400% 100%; animation: lm-skel-sweep 1.2s ease infinite; border-radius: 8px; }
@keyframes lm-skel-sweep { 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce){ .lm-skel{ animation:none } }
.lm-skel-line { display:block; height:12px; margin:6px 0; }
.lm-skel-line--sm { width:40%; }

/* ---- Feed ---- */
.lm-feed-shell { padding: 4px 0 8px; }
.lm-feed-head { margin: 6px 2px 12px; }
.lm-feed-title { font-size: 26px; margin: 0; }
.lm-feed-sub { margin-top: 2px; }
.lm-feed-list { display: flex; flex-direction: column; }
.lm-feed-card { padding: 14px 15px; }
.lm-feed-card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.lm-feed-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background: var(--v5-accent); color: var(--v5-accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; border:1.5px solid var(--v5-ink); }
.lm-feed-byline { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.lm-feed-author { font-weight:800; font-size:13.5px; color:var(--v5-ink); }
.lm-feed-kind { font-size:10.5px; font-weight:700; color:var(--v5-muted); margin-left:4px; }
.lm-feed-at { font-size:12px; color:var(--v5-muted); }
.lm-feed-photo { width:100%; border-radius:12px; display:block; margin:2px 0 10px;
  background:var(--v5-bg); object-fit:cover; max-height:340px; border:1px solid var(--v5-line); }
.lm-feed-card--skel .lm-feed-photo { height:180px; }
.lm-feed-caption { font-size:14px; line-height:1.5; color:var(--v5-ink); margin:0 0 10px; }
.lm-feed-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lm-feed-src { font-size:11.5px; color:var(--v5-muted); font-weight:700; }
.lm-feed-order { font-size:12.5px; font-weight:800; color:var(--v5-accent-ink);
  background:var(--v5-accent); border:1.5px solid var(--v5-ink); border-radius:999px;
  padding:8px 15px; text-decoration:none; white-space:nowrap; }
.lm-feed-order:active { transform:translateY(1px); }
.lm-feed-empty { text-align:center; padding:26px 18px; }
.lm-feed-empty-title { font-weight:800; font-size:16px; color:var(--v5-ink); margin-bottom:6px; }
.lm-feed-empty-body { font-size:13.5px; color:var(--v5-muted); line-height:1.5; }
.lm-feed-note { text-align:center; font-size:12.5px; color:var(--v5-sub); font-weight:600; margin-top:4px; }
.lm-feed-post-btn { width:100%; margin-top:12px; padding:13px; font-size:14.5px; }

/* ---- Share composer ---- */
.lm-share-shell { padding: 4px 0 8px; }
.lm-share-head { margin: 6px 2px 14px; }
.lm-share-title { font-size: 26px; margin: 0; }
.lm-share-sub { margin-top: 2px; }
.lm-share-field-label { font-weight:800; font-size:13px; color:var(--v5-ink);
  display:block; margin-bottom:8px; }
.lm-share-stars-card { padding:14px 15px; }
.lm-share-stars-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lm-share-stars { display:flex; gap:4px; }
.lm-share-star { font-size:30px; line-height:1; background:none; border:0; cursor:pointer;
  color:#D9D5C7; padding:0 1px; }
.lm-share-star.is-on { color:var(--v5-accent); text-shadow:0 0 0.5px var(--v5-ink); }
.lm-share-stars-val { font-weight:800; font-size:18px; color:var(--v5-ink); }
.lm-share-caption-card { padding:14px 15px; }
.lm-share-caption { width:100%; border:1px solid var(--v5-line); border-radius:10px;
  padding:10px 12px; font-family:var(--v5-font-body); font-size:14px; color:var(--v5-ink);
  resize:vertical; background:#fff; box-sizing:border-box; }
.lm-share-caption:focus { outline:none; border-color:var(--v5-ink); }
.lm-share-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.lm-share-photo-card { text-align:left; cursor:pointer; padding:16px 15px; }
.lm-share-dish-card { padding:16px 15px; opacity:.75; }
.lm-share-photo-title { font-weight:800; font-size:14px; color:var(--v5-ink); }
.lm-share-photo-sub { font-size:11.5px; color:var(--v5-muted); margin-top:3px; }
.lm-share-photo-preview { margin-bottom:10px; }
.lm-share-photo-preview img { width:100%; border-radius:12px; display:block;
  border:1px solid var(--v5-line); max-height:280px; object-fit:cover; }
.lm-share-toggle-card { display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 15px; }
.lm-share-toggle-copy { min-width:0; }
.lm-share-toggle-label { font-size:12px; color:var(--v5-muted); font-weight:700; }
.lm-share-toggle-strong { font-weight:800; font-size:14px; color:var(--v5-ink); }
.lm-share-toggle-hint { font-size:11.5px; color:var(--v5-muted); margin-top:3px; line-height:1.4; }
.lm-share-points { text-align:center; padding:16px 15px; }
.lm-share-points-title { font-weight:800; font-size:15px; color:var(--v5-ink); }
.lm-share-points-sub { font-size:12px; color:var(--v5-muted); margin-top:4px; }
.lm-share-submit { width:100%; margin-top:12px; padding:14px; font-size:15px; }
.lm-share-empty { text-align:center; padding:26px 18px; }
.lm-share-empty-title { font-weight:800; font-size:16px; margin-bottom:6px; }
.lm-share-empty-body { font-size:13.5px; color:var(--v5-muted); line-height:1.5; margin-bottom:14px; }
.lm-share-empty-cta { display:inline-block; text-decoration:none; }

/* ---- Post-order CTA (injected into orderView confirmation, additive) ---- */
.lm-share-order-cta { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:12px 0; }
.lm-share-order-cta-copy { min-width:0; }
.lm-share-order-cta-title { font-weight:800; font-size:14.5px; color:var(--v5-ink); }
.lm-share-order-cta-sub { font-size:12px; color:var(--v5-muted); margin-top:2px; }
.lm-share-order-cta-btn { white-space:nowrap; text-decoration:none; }

/* ---- Invite-a-friend post-order card (additive; stacks on phone) ---- */
.lm-order-invite { flex-direction:column; align-items:stretch; gap:10px; }
.lm-order-invite .lm-share-order-cta-sub { line-height:1.4; }
.lm-order-invite-code { font-weight:800; letter-spacing:.5px; background:rgba(0,0,0,.06);
  padding:1px 6px; border-radius:6px; }
.lm-order-invite-stats { font-size:12px; color:var(--v5-muted); margin-top:6px; }
.lm-order-invite-stats strong { color:var(--v5-ink); }
.lm-order-invite-actions { display:flex; gap:8px; }
.lm-order-invite-actions .lm-share-order-cta-btn { flex:1; text-align:center; }
.lm-order-invite-actions .lm-order-invite-copy { flex:1; white-space:nowrap; }