/* ══════════════════════════════════════════════════════════════════════════
   DIVINITI — FIND YOUR CUP
   Shared quiz styles. Loaded on every go-live page alongside find-your-cup.js.

   ⚠ TOKEN RULE — READ BEFORE EDITING.
   The site runs two CSS-variable families that do NOT overlap:
     index.html · b2b · feedback · track-order · standing-order-management
        → --c-ivory-dim / -faint / -ghost, --c-void-mid
     brew-guide · journal · policies · field-dispatch-*
        → --c-dim / -faint / -ghost, --c-mid
   Only the CORE tokens are identical everywhere: --c-void, --c-ivory,
   --c-gold, --c-gold-bright, --f-display/body/label/mono.
   So this file uses core tokens only, and declares its own --fyc-* locals for
   everything else. Never reach for --c-ivory-dim or --c-dim in here — one of
   them is always undefined and the quiz renders half-invisible on half the site.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --fyc-void:   #0D0D0D;
  --fyc-panel:  #141414;
  --fyc-dim:    rgba(245, 238, 217, 0.74);
  --fyc-faint:  rgba(245, 238, 217, 0.50);
  --fyc-ghost:  rgba(245, 238, 217, 0.10);
  --fyc-gold-faint: rgba(212, 174, 58, 0.25);
  --fyc-ease:   cubic-bezier(0.65, 0, 0.35, 1);
  --fyc-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── FLOATING TRIGGER ─────────────────────────────────────────────────── */
#quiz-trigger-wrap { position: fixed; right: 2.5rem; bottom: 9rem; z-index: 150; }
#quiz-trigger {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--c-void, var(--fyc-void)); border: 1px solid var(--c-gold);
  padding: 1.15rem 1.9rem; backdrop-filter: blur(12px);
  font-family: var(--f-label); font-size: 0.86rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-ivory); cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
#quiz-trigger:hover { border-color: var(--c-gold-bright); color: var(--c-gold-bright); background: rgba(184,149,42,0.1); }
#quiz-trigger .qt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  #quiz-trigger .qt-dot { animation: fycPulse 2.5s ease-in-out infinite; }
}
@keyframes fycPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

/* ── OVERLAY + PANEL ──────────────────────────────────────────────────── */
/* The scrim is deliberately light. At the old 0.88 the blur was doing real work
   and you simply could not see it — the page behind read as flat black. Keep
   this low enough that the blurred page stays visible behind the panel. */
#quiz-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8,8,8,0.55);
  -webkit-backdrop-filter: blur(22px) saturate(0.9);
          backdrop-filter: blur(22px) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--fyc-ease), visibility 0.35s;
  padding: 1.5rem;
}
/* No blur support (older Firefox, some Android webviews): fall back to the
   heavy scrim, otherwise the overlay would be near-transparent and unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #quiz-overlay { background: rgba(5,5,5,0.92); }
}
#quiz-overlay.open { opacity: 1; visibility: visible; }
#quiz-panel {
  width: min(520px, 100%); max-height: calc(100vh - 3rem); overflow-y: auto;
  background: var(--fyc-panel); border: 1px solid var(--fyc-ghost);
  padding: 2.5rem; position: relative; transform: translateY(24px);
  transition: transform 0.4s var(--fyc-spring);
}
#quiz-overlay.open #quiz-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  #quiz-overlay, #quiz-panel { transition: none; }
}

.quiz-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: var(--f-mono); font-size: 0.7rem; color: var(--fyc-faint);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fyc-ghost); cursor: pointer; background: none;
  transition: color 0.2s, border-color 0.2s;
}
.quiz-close:hover { color: var(--c-ivory); border-color: var(--fyc-dim); }

.quiz-eyebrow { font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--c-gold); text-transform: uppercase; margin-bottom: 1rem; }
.quiz-question { font-family: var(--f-display); font-size: clamp(1.45rem, 3vw, 1.95rem); letter-spacing: 0.03em; color: var(--c-ivory); margin-bottom: 0.5rem; line-height: 1.15; }
.quiz-help { font-family: var(--f-body); font-size: 0.95rem; color: var(--fyc-faint); line-height: 1.5; margin-bottom: 1.5rem; }
.quiz-step-indicator { font-family: var(--f-mono); font-size: 0.52rem; letter-spacing: 0.14em; color: var(--fyc-faint); margin-bottom: 0.5rem; }
.quiz-progress-bar { height: 1px; background: var(--fyc-ghost); margin-bottom: 1.75rem; position: relative; overflow: hidden; }
.quiz-progress-fill { height: 100%; background: var(--c-gold); transition: width 0.4s var(--fyc-ease); }

/* ── OPTIONS ──────────────────────────────────────────────────────────── */
.quiz-options { display: flex; flex-direction: column; gap: 0.55rem; }
.quiz-option {
  border: 1px solid var(--fyc-ghost); padding: 0.8rem 1.05rem;
  font-family: var(--f-body); font-size: 0.98rem; color: var(--fyc-dim);
  text-align: left; cursor: pointer; background: none; width: 100%;
  display: flex; flex-direction: column; gap: 0.15rem;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.quiz-option:hover { border-color: var(--fyc-gold-faint); color: var(--c-ivory); background: rgba(245,238,217,0.03); }
.quiz-option .qo-sub { font-family: var(--f-label); font-size: 0.62rem; letter-spacing: 0.09em; color: var(--fyc-faint); text-transform: uppercase; }
/* Multi-select (the equipment question) */
.quiz-option.is-multi { flex-direction: row; align-items: center; gap: 0.75rem; }
.quiz-option .qo-box {
  width: 15px; height: 15px; border: 1px solid var(--fyc-dim); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 0.65rem; color: var(--c-void); line-height: 1;
}
.quiz-option.selected { border-color: var(--c-gold); color: var(--c-ivory); background: rgba(184,149,42,0.08); }
.quiz-option.selected .qo-box { background: var(--c-gold); border-color: var(--c-gold); }
.quiz-next {
  margin-top: 1.1rem; width: 100%; background: var(--c-gold); color: var(--c-void);
  font-family: var(--f-label); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.85rem 1rem; border: 1px solid var(--c-gold);
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.quiz-next:hover { background: transparent; color: var(--c-gold-bright); }
.quiz-next:disabled { opacity: 0.35; cursor: not-allowed; }
.quiz-back {
  margin-top: 0.9rem; font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fyc-faint); background: none; border: 0;
  cursor: pointer; padding: 0;
}
.quiz-back:hover { color: var(--c-ivory); }

/* ── RESULT ───────────────────────────────────────────────────────────── */
#quiz-result { display: none; }
#quiz-result.show { display: block; }
.qr-title { font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: 0.03em; color: var(--c-ivory); line-height: 1.05; margin-bottom: 0.35rem; }
.qr-subtitle { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-bright); margin-bottom: 1.2rem; }
.qr-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--fyc-ghost); border: 1px solid var(--fyc-ghost); margin-bottom: 1.2rem; }
.qr-spec-cell { background: var(--fyc-panel); padding: 0.8rem 0.9rem; }
.qr-spec-cell .k { font-family: var(--f-mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-bright); margin-bottom: 0.2rem; }
.qr-spec-cell .v { font-family: var(--f-label); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--c-ivory); }
.qr-rationale { font-family: var(--f-body); font-size: 1rem; color: var(--fyc-dim); line-height: 1.6; margin-bottom: 1.4rem; }
.qr-because { font-family: var(--f-body); font-size: 0.9rem; color: var(--fyc-faint); line-height: 1.55; font-style: italic; margin-bottom: 1.4rem; }
.qr-shop-btn {
  display: block; width: 100%; text-align: center; background: var(--c-gold); color: var(--c-void);
  font-family: var(--f-label); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 1rem; border: 1px solid var(--c-gold); cursor: pointer; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.qr-shop-btn:hover { background: transparent; color: var(--c-gold-bright); }
.qr-brew-link {
  display: block; text-align: center; margin-top: 0.85rem;
  font-family: var(--f-label); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--c-gold-bright); text-decoration: none;
}
.qr-brew-link:hover { color: var(--c-ivory); }
.quiz-restart {
  font-family: var(--f-label); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fyc-faint); text-decoration: underline; text-underline-offset: 3px;
  background: none; border: none; cursor: pointer; margin-top: 1.25rem; display: block;
}
.quiz-restart:hover { color: var(--fyc-dim); }

/* ── MOBILE: trigger docks as a bottom bar ────────────────────────────── */
/* The bar is fixed over the page, so every page that loads this file also
   needs the matching body padding — declared here, not per page, so the
   footer is never covered on the pages that don't have their own rule. */
@media (max-width: 768px) {
  /* Clears the docked bar (50–56px depending on the page's base font size)
     plus breathing room, so no page's footer ever sits under it. */
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  #quiz-trigger-wrap { left: 0; right: 0; bottom: 0; }
  #quiz-trigger {
    width: 100%; justify-content: center;
    padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    font-size: 0.72rem; border-left: 0; border-right: 0; border-bottom: 0;
    border-top: 1px solid var(--c-gold); background: rgba(13,13,13,0.97);
  }
  #cart-notice { bottom: calc(4.3rem + env(safe-area-inset-bottom, 0px)) !important; }
  #quiz-panel { padding: 2rem 1.4rem; }
}
/* Hide behind the mobile nav overlay (index uses .nav-open, the standalone
   pages use #mobile-menu.open — cover both). */
body.nav-open #quiz-trigger-wrap { display: none; }
body.menu-open #quiz-trigger-wrap { display: none; }