/*
  public/shared/retail-engaige.css — the RETAIL ENGAIGE shared design system.

  This is the promoted, reusable version of design/mockups/assets/tokens.css +
  design/mockups/assets/components.css (the approved look, docs/00-design-direction.md) — every
  surface (customer today; staff/console later) loads THIS ONE file for its tokens + primitive
  components, instead of forking CSS per surface. Do not fork this file per surface: surface-
  specific layout (a phone-shaped chat thread, a dense admin table, ...) belongs in that surface's
  own stylesheet, layered on top of what's defined here.

  ---------------------------------------------------------------------------------------------
  THEMEABLE vs FIXED (docs/05-white-label-architecture.md §4.1 / §4.3, docs/06 §5.2) — the whole
  point of this system:

    THEMEABLE — the `--re-*` brand cascade below. A tenant's brand.theme.tokens (the closed
    allow-list: primary/accent/onPrimary/logo/logoDark/favicon/avatar/radiusScale/fontFamily)
    is written to these custom properties AT RUNTIME by the surface's own app.js (see
    public/customer/app.js's applyTheme() — validated + contrast-guarded before it ever reaches
    the DOM). Everything wired to a `--re-*` variable re-skins per retailer: header/nav chrome,
    primary buttons, chat bubbles, the composer's accent.

    FIXED — every design TOKEN copied verbatim from tokens.css (`--ink-*`, `--paper-*`,
    `--teal-*`, `--ember-*`, `--fact-*`, `--safety-*`, `--font-*`, `--radius-*`, `--shadow-*`) and
    every component built from the fixed semantic palette (.fact-chip, .safety-banner). These are
    NEVER pointed at a `--re-*` variable and NEVER accept a tenant override — a verified price and
    a safety claim must look identical no matter which retailer's skin surrounds them. That
    consistency IS the trust story (design direction §9.2).

  A surface only ever sets the SIX `--re-*` variables below; it must never invent a new brand-
  cascade variable name, and never point a fixed/semantic rule at one.
*/

/* ================================================================================================
   1. DESIGN TOKENS — copied from design/mockups/assets/tokens.css (platform-default values).
   ================================================================================================ */
:root {
  /* ---- neutrals ---- */
  --ink-950: #0B0F14;
  --ink-900: #12161D;
  --ink-800: #1B212B;
  --ink-700: #2A3341;
  --ink-600: #3D4756;
  --ink-500: #5B6472;
  --ink-400: #7A828E;
  --ink-300: #9AA3AF;
  --ink-200: #D8DCE1;
  --ink-150: #E4E7EB;
  --ink-100: #EDEFF2;
  --paper-0:  #FFFFFF;
  --paper-50: #F6F8F9;
  --paper-100: #F1F3F5;

  /* ---- brand (platform-default; a tenant skin overrides via the --re-* cascade below, never
     these tokens directly) ---- */
  --teal-800: #095852;
  --teal-700: #0B6E68;
  --teal-600: #0E8D85;
  --teal-500: #17A79C;
  --teal-400: #43C2B6;
  --teal-100: #E3F5F3;
  --teal-50:  #F0FAF9;

  --ember-600: #E4622A;
  --ember-500: #F2793D;
  --ember-100: #FDE9DE;
  --ember-50:  #FEF3EC;

  --violet-400: #8B7CD8;
  --rose-400: #E2687C;

  /* ---- semantic / FIXED — never themeable, never reused for brand chrome (docs/05 §4.1) ---- */
  --fact-verified-fg: #146C2E;
  --fact-verified-bg: #E7F7EC;
  --fact-verified-border: #B7E4C4;

  --fact-low-fg: #92400E;
  --fact-low-bg: #FFF6E8;
  --fact-low-border: #F3D8A8;

  --fact-out-fg: #B42318;
  --fact-out-bg: #FDEEEC;
  --fact-out-border: #F3C4BC;

  --safety-fg: #7A3B00;
  --safety-bg: #FFF4E5;
  --safety-border: #F0A93E;
  --safety-icon-bg: #F0A93E;

  /* ---- type ---- */
  /* One unified typeface across the whole platform — Inter, matching EngaigeNow (this is a product
     under the EngaigeNow brand). Emphasis is by WEIGHT only (normal / semibold / bold), never by
     switching family. The three role tokens are kept so existing use sites keep working, but each
     is set DIRECTLY to the same Inter stack — no var() indirection (a --x: var(--y) alias layer
     computed to empty once on the customer surface; see qa.customer-surface-light.test.js). */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- shadow ---- */
  --shadow-sm: 0 1px 2px rgba(11,15,20,.06), 0 1px 1px rgba(11,15,20,.04);
  --shadow-md: 0 6px 20px rgba(11,15,20,.08), 0 1px 3px rgba(11,15,20,.06);
  --shadow-lg: 0 16px 40px rgba(11,15,20,.14), 0 2px 6px rgba(11,15,20,.06);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-micro: 120ms;
  --dur-std: 200ms;
  --dur-scene: 320ms;

  /* ==============================================================================================
     2. THE BRAND CASCADE — the ONLY variables a surface's app.js ever writes to at runtime, per
     the closed allow-list. Named `--re-*` (Retail Engaige) to match the existing, already-shipped
     runtime-theming contract in public/customer/app.js (applyTheme()) — kept stable here rather
     than renamed, so that contract needs no rewrite to sit on top of this shared system. Platform-
     default values below are deliberately DIFFERENT tokens from the fixed semantic set (§2.2 of
     the design direction): a verified fact must never accidentally inherit a brand colour just
     because a future edit points the wrong variable at the wrong name.
     ============================================================================================== */
  --re-primary: var(--ink-950);
  --re-accent: var(--teal-600);
  --re-on-primary: #ffffff;
  /* Text ON the accent background. Defaults to --re-on-primary so every pre-existing rule and
     every tenant that never sets an accent behaves exactly as before; the shopper surface
     overrides it per tenant (public/customer/app.js -> /shared/contrast.js) because one shared
     text token cannot stay legible on a light accent AND a dark primary at the same time. */
  --re-on-accent: var(--re-on-primary);
  --re-radius: var(--radius-md);
  --re-font: var(--font-body);
}

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

/* ================================================================================================
   3. COMPONENTS — copied from design/mockups/assets/components.css.
   ================================================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--re-font, var(--font-body));
  color: var(--ink-950);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }

/* ---------- layout helpers ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }

/* ---------- badge (sample-data disclosure) ---------- */
.sample-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ember-600); background: var(--ember-50);
  border: 1px solid var(--ember-100); border-radius: var(--radius-pill);
  padding: 5px 12px 5px 10px;
}
.sample-badge svg { width: 13px; height: 13px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--re-font, var(--font-body)); font-weight: 600; font-size: 0.9375rem;
  border-radius: var(--re-radius, var(--radius-md)); border: 1px solid transparent;
  padding: 0 20px; height: 48px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 0.875rem; }
/* Brand-cascade primary — themeable per retailer (docs/05 §4.1). */
.btn-primary { background: var(--re-primary); color: var(--re-on-primary); }
.btn-primary:hover { filter: brightness(0.92); }
.btn-accent { background: var(--re-accent); color: var(--re-on-accent); }
.btn-accent:hover { filter: brightness(0.92); }
.btn-secondary { background: var(--paper-0); color: var(--ink-950); border-color: var(--ink-200); }
.btn-secondary:hover { background: var(--paper-50); border-color: var(--ink-300); }
.btn-tertiary { background: transparent; color: var(--teal-700); padding: 0 6px; height: auto; }
.btn-tertiary:hover { color: var(--teal-600); }
.btn-ghost-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.16); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- cards ---------- */
.card {
  background: var(--paper-0); border: 1px solid var(--ink-150);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-hover { transition: box-shadow var(--dur-std) var(--ease-out), transform var(--dur-std) var(--ease-out); }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---------- fact chip (FIXED — never restyled per tenant, docs/06 §5.2) ---------- */
.fact-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  border-radius: var(--radius-md); border: 1.5px solid; padding: 6px 12px;
  font-family: var(--font-body);
}
.fact-chip .fc-label {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  opacity: .82;
}
.fact-chip .fc-value {
  font-size: 0.9375rem; font-weight: 700; display: flex; align-items: center; gap: 5px;
}
.fact-chip .fc-value svg { width: 14px; height: 14px; flex: none; }
.fact-verified { color: var(--fact-verified-fg); background: var(--fact-verified-bg); border-color: var(--fact-verified-border); }
.fact-low      { color: var(--fact-low-fg); background: var(--fact-low-bg); border-color: var(--fact-low-border); }
.fact-out      { color: var(--fact-out-fg); background: var(--fact-out-bg); border-color: var(--fact-out-border); }

/* Compact single-line variant of the same fixed fact chip (docs/06 §2.3's "mini" treatment for
   dense bundle rows) — same fixed palette, smaller footprint. Still NEVER themeable. */
.fact-chip-mini {
  font-size: 0.6875rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; border: 1.5px solid;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body);
}
.fact-chip-mini svg { width: 10px; height: 10px; flex: none; }

/* ---------- safety banner (FIXED) ---------- */
.safety-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--safety-bg); border: 2px solid var(--safety-border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.safety-banner .icon-roundel {
  width: 28px; height: 28px; border-radius: 50%; background: var(--safety-icon-bg);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.safety-banner .icon-roundel svg { width: 16px; height: 16px; color: #fff; }
.safety-banner h4 { color: var(--safety-fg); font-size: 0.9375rem; margin-bottom: 3px; font-family: var(--font-body); font-weight: 700; }
.safety-banner p { color: var(--safety-fg); font-size: 0.875rem; line-height: 1.45; }
.safety-banner .citation {
  margin-top: 8px; font-size: 0.75rem; color: var(--safety-fg); opacity: .85;
  display: flex; align-items: center; gap: 6px;
}

/* ---------- generated-prose vs retrieved-fact contract ---------- */
.prose { color: var(--ink-700); font-size: 0.9375rem; line-height: 1.5; }
.prose-quiet { color: var(--ink-500); font-size: 0.8125rem; font-style: italic; }

/* ---------- pill chips (tappable slot answers) ---------- */
.chip-option {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink-200); background: var(--paper-0);
  font-size: 0.875rem; font-weight: 600; color: var(--ink-800); cursor: pointer;
}
/* "Selected" is a fixed UI-state colour (platform teal), not the retailer's brand colour — a
   tenant's primary colour never has to double as a selection indicator (docs/mockups 01, screen 2). */
.chip-option.selected { background: var(--teal-100); border-color: var(--teal-500); color: var(--teal-700); }
.chip-option svg { width: 15px; height: 15px; }

/* ---------- inputs ---------- */
.input {
  height: 44px; border-radius: var(--radius-md); border: 1px solid var(--ink-200);
  background: var(--paper-0); padding: 0 14px; font-size: 0.9375rem; font-family: var(--font-body);
  color: var(--ink-950); width: 100%;
}
.input:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }
label.field-label {
  font-size: 0.75rem; font-weight: 700; color: var(--ink-500); letter-spacing: .03em;
  text-transform: uppercase; margin-bottom: 6px; display: block;
}

/* ---------- top nav (marketing) ---------- */
.topnav {
  position: sticky; top: 0; z-index: 40; background: rgba(246,248,249,.86);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink-150);
}
.topnav .container { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.brand-lockup { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.navlinks { display: flex; align-items: center; gap: 28px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-600); }
.navlinks a:hover { color: var(--ink-950); }

/* ---------- scrollbar niceties for phone frames / tables ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ---------- misc ---------- */
.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-700);
}
.divider { height: 1px; background: var(--ink-150); border: none; }

/* ================================================================================================
   4. SIGN-IN / GATE CARD — shared by every gate on this platform (admin, super-admin, supplier,
   the reset pages and the staff handoff). ONE copy here, none per surface: these screens carry the
   EngaigeNow MASTER brand (full-colour logo + the "Retail" vertical lockup), deliberately identical
   to app.engaigenow.com's sign-in, so the two front doors read as one company. That is why this
   section uses EngaigeNow's literal palette (navy #0f172a, red #dc2626) instead of the --re-* /
   teal tokens above: a gate is never tenant-themed, and its accent must match the hospitality
   sign-in exactly. Everything past the gate stays on the token system.
   ================================================================================================ */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: #0f172a; }
.login-screen::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(220,38,38,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(220,38,38,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.login-card {
  position: relative; background: #fff; border: 0; border-radius: 20px;
  padding: 48px 40px; width: 100%; max-width: 420px; box-shadow: 0 25px 60px rgba(0,0,0,.4);
}
/* Brand block: full-colour EngaigeNow logo with the "Retail" vertical lockup under it —
   letterspaced small caps flanked by hairlines. Quiet greys only, NO red: a red mark this close
   to the fields reads as a validation error. The lockup belongs to the logo (14px below it),
   not to the heading (28px above that). */
.login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.login-brand img { height: 48px; width: auto; object-fit: contain; }
.login-vertical { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.login-vertical::before, .login-vertical::after { content: ""; width: 22px; height: 1px; background: #d4d4d8; }
.login-vertical span { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #52525b; }
.login-card h1 { font-size: 22px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; margin-bottom: 6px; }
.login-card p.sub { font-size: 14px; color: #64748b; margin-bottom: 24px; }
/* Field rhythm lives on the LABELS (16px above each, none above the first), so surfaces whose
   markup is bare label+input pairs space out exactly like the admin gate's icon-wrapped fields. */
.login-card label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 16px 0 6px; }
.login-card label:first-of-type { margin-top: 0; }
.login-card .login-field { position: relative; }
.login-card .login-field .field-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #94a3b8; pointer-events: none;
}
.login-card input {
  width: 100%; padding: 11px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  font: inherit; font-size: 14px; color: #0f172a; background: #fff;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro); outline: none;
}
.login-card .login-field input { padding-left: 38px; }
.login-card .login-field.has-toggle input { padding-right: 44px; }
.login-card input:focus, .login-card input:focus-visible { outline: none; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.login-card .eye-toggle {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #94a3b8; display: flex; align-items: center; padding: 0;
}
.login-card .eye-toggle svg { width: 16px; height: 16px; }
/* The gate's buttons override the token-driven .btn-* chrome: same red as the hospitality door. */
.login-card .btn-primary { background: #dc2626; color: #fff; border-radius: 10px; }
.login-card .btn-primary:hover { background: #b91c1c; filter: none; }
.login-card .btn-secondary { border-radius: 10px; }
.login-err { color: #B42318; font-size: 0.8125rem; margin-top: 12px; min-height: 1.1em; }
.login-hint { font-size: 0.75rem; color: var(--ink-400); margin-top: 16px; line-height: 1.5; }
.login-card .link-btn {
  background: none; border: none; padding: 0; margin-top: 14px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: #dc2626;
}
.login-card .link-btn:hover { text-decoration: underline; }
/* Signpost to the other EngaigeNow vertical — mirror of the hospitality sign-in's static link. */
.login-alt {
  text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9;
  font-size: 12.5px; color: #94a3b8;
}
.login-alt a { color: #64748b; font-weight: 500; }
.login-alt a:hover { text-decoration: underline; }
.login-foot { text-align: center; margin-top: 16px; font-size: 12.5px; }
.login-foot a { color: #94a3b8; }

/* ---------- accessibility helpers shared by every surface ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 2px; }