/* ============================================================================
   ZYBENEFITS — IMPLEMENTATION STYLESHEET
   v1 · 14 August 2026 · handoff copy

   Load AFTER: zyqual-design-system.css (--zq-*), zq-dark.css, zq-suite-tokens.css,
   zyqual-suite.css (.zq-* primitives). This file adds --zqb-* tokens and .zqb-*
   component classes only; it introduces no colour outside 01-DESIGN-TOKENS.md.
   The prototype is inline-styled (streaming runtime); build against these classes.
   ========================================================================= */

:where(:root) {
  --zqb-foil: #cfa8ff;
  --zqb-card-grad: linear-gradient(132deg, #2a0b52 0%, #4a148c 46%, #6a1b9a 74%, #1B5062 128%);
  --zqb-card-glow: radial-gradient(circle at 82% 12%, rgba(207,168,255,0.22), transparent 42%),
                   radial-gradient(circle at 12% 88%, rgba(77,208,196,0.14), transparent 46%);
  --zqb-card-muted: linear-gradient(132deg, #3a3446 0%, #55495f 60%, #4a4456 100%);
  --zqb-card-dead: linear-gradient(132deg, #2b2f38 0%, #3d4350 70%, #333846 100%);
  --zqb-ladder-fill: linear-gradient(90deg, #4a148c, #1B5062);
  --zqb-clock: #ffe082;      /* warm accent on the always-dark card face */
  --zqb-star: #ff9800;       /* rating stars, both themes */
}

/* ── MOTION ─────────────────────────────────────────────────────────────── */
@keyframes zqbLive   { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes zqbPop    { 0% { transform: scale(0.6); opacity: 0; } 55% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes zqbUnlock { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.45); } 100% { box-shadow: 0 0 0 14px rgba(76,175,80,0); } }
@media (prefers-reduced-motion: reduce) {
  .zqb-live, .zqb-pop, .zqb-unlock, .zqb-scanline { animation: none !important; }
}
.zqb-live { animation: zqbLive 1.4s infinite; }
.zqb-pop { animation: zqbPop 0.45s ease; }
.zqb-unlock { animation: zqbUnlock 1.1s ease 2; }

/* ── 1 · MEMBERSHIP CARD ────────────────────────────────────────────────────
   <button class="zqb-card [is-pending|is-dead]"> — whole card is the control.
   Modes: .zqb-card--embedded (wallet) / .zqb-card--full (presentation). */
.zqb-card {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  position: relative; overflow: hidden; color: #fff;
  border-radius: 14px; padding: 14px 16px;
  background-image: var(--zqb-card-glow), var(--zqb-card-grad);
  box-shadow: var(--zq-shadow-md);
}
.zqb-card.is-pending { background-image: var(--zqb-card-muted); }
.zqb-card.is-dead    { background-image: var(--zqb-card-dead); }
.zqb-card--full { border-radius: 22px; padding: 16px 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.5); cursor: default; }

.zqb-card-wordmark { font: 800 11px/1 var(--zq-font-family); letter-spacing: 0.12em; color: var(--zqb-foil); }
.zqb-card--full .zqb-card-wordmark { font-size: 12px; letter-spacing: 0.14em; }
.zqb-card-edition {
  font: 700 9px/1 var(--zq-font-family); letter-spacing: 0.10em;
  color: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--zq-radius-pill); padding: 3px 8px;
}
.zqb-card-photo {
  width: 62px; height: 62px; border-radius: 10px; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.55); flex-shrink: 0;
}
.zqb-card--full .zqb-card-photo { width: 80px; height: 80px; border-radius: 12px; }
.zqb-card.is-pending .zqb-card-photo, .zqb-card.is-dead .zqb-card-photo { filter: grayscale(0.8); }
.zqb-card-initials { /* no-photo fallback: same box */
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4);
  font: 800 20px/1 var(--zq-font-family); color: #fff;
}
.zqb-card-name { font: 800 17px/1.2 var(--zq-font-family); }
.zqb-card--full .zqb-card-name { font-size: 23px; letter-spacing: -0.3px; }
.zqb-card-role { font: 600 11px/1.45 var(--zq-font-family); color: rgba(255,255,255,0.82); }
.zqb-card-region { font: 600 9.5px/1.4 var(--zq-font-family); color: rgba(255,255,255,0.6); }
.zqb-card-number { font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.zqb-card-foot {
  display: flex; gap: 8px; margin-top: 10px;
  font: 600 9.5px/1.3 var(--zq-font-family); color: rgba(255,255,255,0.6);
}
.zqb-card-divider { border-top: 1px solid rgba(255,255,255,0.22); }
.zqb-card-personal { text-align: center; font: 700 8.5px/1 var(--zq-font-family); letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }
.zqb-card-banner { /* pending/suspended/expired explainer */
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px; padding: 9px 12px; display: flex; gap: 8px; align-items: center;
  font: 600 11px/1.45 var(--zq-font-family); color: rgba(255,255,255,0.92);
}
/* Fullscreen backdrop shell */
.zqb-present-backdrop { position: fixed; inset: 0; background: rgba(9,7,18,0.86); backdrop-filter: blur(6px); z-index: 9500; }
.zqb-present-label { font: 700 10px/1 var(--zq-font-family); letter-spacing: 0.08em; color: rgba(255,255,255,0.6); text-transform: uppercase; }

/* ── 2 · QR PANELS ─────────────────────────────────────────────────────────
   Always a white panel for scan contrast; svg/canvas aria-hidden, membership
   number is the accessible fallback. Ink #1a1140. */
.zqb-qr { background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; }
.zqb-qr--embedded { width: 104px; height: 104px; }
.zqb-qr--full { border-radius: 18px; padding: 16px; box-shadow: 0 10px 34px rgba(0,0,0,0.35); }
.zqb-qr-refresh { /* seconds-remaining bar */
  position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px;
  border-radius: var(--zq-radius-pill); background: #efe9f6; overflow: hidden;
}
.zqb-qr-refresh > span { display: block; height: 100%; background: var(--zq-primary); border-radius: inherit; }
.zqb-qr-cover { /* NOT VALID plate over dead cards */
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.82); border-radius: inherit;
}
.zqb-demo-watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.zqb-demo-watermark > span {
  font: 800 22px/1 var(--zq-font-family); letter-spacing: 0.22em; color: rgba(255,255,255,0.32);
  border: 2px solid rgba(255,255,255,0.32); border-radius: 10px; padding: 8px 16px; transform: rotate(-18deg);
}

/* ── 3 · AUTHENTICITY CLOCK ────────────────────────────────────────────── */
.zqb-clock { display: flex; align-items: center; gap: 6px; color: var(--zqb-clock); }
.zqb-clock-digits {
  font: 800 16px/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;   /* fixed-width slot — layout never twitches */
}
.zqb-clock--full .zqb-clock-digits { font-size: 26px; }
.zqb-clock--mini .zqb-clock-digits { font-size: 13px; }
.zqb-clock-colon { transition: none; } /* opacity 1 even seconds / 0.25 odd — set by JS */
.zqb-clock-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--zqb-clock); animation: zqbLive 1.2s infinite; }
.zqb-clock--full .zqb-clock-dot { width: 4px; height: 4px; }
.zqb-clock-date { font: 600 9px/1 var(--zq-font-family); letter-spacing: 0.06em; color: rgba(255,255,255,0.62); text-transform: uppercase; }

/* ── 4 · PRICE LADDER ─────────────────────────────────────────────────── */
.zqb-ladder-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; }
.zqb-ladder-dot { width: 12px; height: 12px; border-radius: 50%; justify-self: center; background: var(--zq-border-soft); }
.zqb-ladder-dot.is-reached { background: var(--zq-primary); box-shadow: 0 0 0 3px var(--zq-primary-soft); }
.zqb-ladder-price { font: 800 15px/1.1 var(--zq-font-family); font-variant-numeric: tabular-nums; }
.zqb-ladder-row.is-active .zqb-ladder-price { color: var(--zq-primary); }
.zqb-ladder-row.is-ahead .zqb-ladder-price { color: var(--zq-text-secondary); }
.zqb-ladder-threshold { font-size: 10.5px; color: var(--zq-text-secondary); }
.zqb-progress-fill { background: var(--zqb-ladder-fill) !important; } /* on .zq-progress > span */
.zqb-minibar { flex: 1; height: 5px; border-radius: var(--zq-radius-pill); background: var(--zq-bg-soft); overflow: hidden; }
.zqb-minibar > span { display: block; height: 100%; border-radius: inherit; background: var(--zqb-ladder-fill); }

/* ── 5 · SECTION SHADES + COLLAPSIBLE HEADERS ──────────────────────────── */
.zqb-sec { border-left: 4px solid var(--zq-primary); }
.zqb-sec--about   { border-left-color: #4a148c; background: linear-gradient(180deg, rgba(74,20,140,0.055), rgba(74,20,140,0.015)), var(--zq-card-bg); }
.zqb-sec--ladder  { border-left-color: #1B5062; background: linear-gradient(180deg, rgba(27,80,98,0.055), rgba(27,80,98,0.015)), var(--zq-card-bg); }
.zqb-sec--goal    { border-left-color: #00bcd4; background: linear-gradient(180deg, rgba(0,188,212,0.06),  rgba(0,188,212,0.015)), var(--zq-card-bg); }
.zqb-sec--who     { border-left-color: #3f51b5; background: linear-gradient(180deg, rgba(63,81,181,0.055), rgba(63,81,181,0.015)), var(--zq-card-bg); }
.zqb-sec--ratings { border-left-color: #ff9800; background: linear-gradient(180deg, rgba(255,152,0,0.06),  rgba(255,152,0,0.015)), var(--zq-card-bg); }
.zqb-sec--perk    { border-left-color: #e91e63; background: linear-gradient(180deg, rgba(233,30,99,0.05),  rgba(233,30,99,0.012)), var(--zq-card-bg); }
.zqb-sec--redeem  { border-left-color: #4caf50; background: linear-gradient(180deg, rgba(76,175,80,0.055), rgba(76,175,80,0.015)), var(--zq-card-bg); }
.zqb-toggle {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--zq-border-soft);
  background: transparent; display: flex; align-items: center; justify-content: center;
  color: var(--zq-primary); cursor: pointer; flex-shrink: 0;
}
.zqb-toggle .material-icons { font-size: 15px; }

/* ── 6 · COUNTDOWN + GOAL ─────────────────────────────────────────────── */
.zqb-countdown { font-variant-numeric: tabular-nums; border: none; cursor: pointer; min-height: 32px; } /* on .zq-chip.zq-chip--info */
.zqb-goal-line { font: 700 12.5px/1.35 var(--zq-font-family); }

/* ── 7 · MEDIA GALLERY ────────────────────────────────────────────────── */
.zqb-media-strip { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.zqb-media { flex: 0 0 150px; }
.zqb-media-frame { position: relative; width: 150px; height: 100px; border-radius: 10px; overflow: hidden; background: var(--zq-bg-soft); border: 1px solid var(--zq-border-soft); }
.zqb-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.zqb-media-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
}
.zqb-media-dur { position: absolute; right: 6px; bottom: 6px; font-size: 8.5px; padding: 2px 7px; background: rgba(0,0,0,0.6); color: #fff; border-radius: var(--zq-radius-pill); }
.zqb-media--audio { background: linear-gradient(135deg, #38106b, #1B5062); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; }
.zqb-wave { display: flex; align-items: flex-end; gap: 2.5px; height: 22px; }
.zqb-wave > span { width: 3px; border-radius: 2px; background: rgba(255,255,255,0.75); }
.zqb-wave > span.is-accent { background: var(--zqb-clock); }
.zqb-media-cap { font-size: 9.5px; line-height: 1.35; color: var(--zq-text-secondary); margin-top: 4px; }

/* ── 8 · CALENDAR SHEET (renders ZyCalendar data) ─────────────────────── */
.zqb-cal-scrim { position: absolute; inset: 0; background: rgba(15,16,22,0.5); border: none; cursor: pointer; z-index: 5; }
.zqb-cal-sheet {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; overflow: hidden;
  background: var(--zq-card-bg); border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.3); max-height: 88%;
  display: flex; flex-direction: column;
}
.zqb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--zq-border-soft); border: 1px solid var(--zq-border-soft); border-radius: 10px; overflow: hidden; }
.zqb-cal-dow { text-align: center; font: 700 8.5px/1 var(--zq-font-family); letter-spacing: 0.06em; color: var(--zq-text-secondary); padding: 4px 0; }
.zqb-cal-day { border: none; font: 600 9.5px/1 var(--zq-font-family); color: var(--zq-text); background: var(--zq-card-bg); min-height: 42px; padding: 4px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.zqb-cal-day.is-outside { opacity: 0.4; }
.zqb-cal-day.has-events { cursor: pointer; }
.zqb-cal-day.is-selected { box-shadow: inset 0 0 0 1.5px var(--zq-primary); }
.zqb-cal-day.is-today .zqb-cal-n { min-width: 18px; height: 18px; border-radius: var(--zq-radius-pill); background: var(--zq-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.zqb-cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.zqb-cal-dot--close { background: #fb8c00; }  /* Task */
.zqb-cal-dot--window { background: #00bcd4; } /* Support */
.zqb-cal-dot--event { background: #3f51b5; }  /* Formative */
.zqb-cal-dot--invite { background: #7b1fa2; } /* Observation */
/* Boarding-stub agenda row */
.zqb-stub { display: flex; align-items: stretch; border: 1px solid var(--zq-border-soft); border-radius: 10px; overflow: hidden; }
.zqb-stub-date { width: 52px; flex-shrink: 0; background: var(--zq-bg-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px 0; border-right: 1.5px dashed var(--zq-border-soft); }
.zqb-stub-day { font: 800 16px/1 var(--zq-font-family); font-variant-numeric: tabular-nums; }
.zqb-stub-dow { font: 700 10px/1.5 var(--zq-font-family); letter-spacing: 0.08em; color: var(--zq-text-secondary); }

/* ── 9 · WHO'S IN ─────────────────────────────────────────────────────── */
.zqb-who-chip { gap: 6px; padding: 4px 10px 4px 4px; } /* on .zq-chip.zq-chip--outline */
.zqb-who-avatar { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 9px/1 var(--zq-font-family); }

/* ── 10 · STARS + REVIEWS ─────────────────────────────────────────────── */
.zqb-stars { display: inline-flex; color: var(--zqb-star); }
.zqb-stars .material-icons { font-size: 13px; }
.zqb-stars--lg .material-icons { font-size: 14px; }
.zqb-stars--sm .material-icons { font-size: 11px; }
.zqb-dist-bar { flex: 1; height: 5px; border-radius: var(--zq-radius-pill); background: var(--zq-bg-soft); overflow: hidden; }
.zqb-dist-bar > span { display: block; height: 100%; background: var(--zqb-star); border-radius: inherit; }
.zqb-review-reply { margin-top: 8px; padding: 9px 12px; border-left: 3px solid var(--zq-primary); background: var(--zq-primary-soft); border-radius: 0 8px 8px 0; }
.zqb-rate-star { border: none; background: transparent; cursor: pointer; padding: 2px; min-width: 44px; min-height: 44px; }
.zqb-rate-star .material-icons { font-size: 34px; color: var(--zq-border-soft); }
.zqb-rate-star.is-on .material-icons { color: var(--zqb-star); }

/* ── 11 · RECEIPT ─────────────────────────────────────────────────────── */
.zqb-receipt { background: var(--zq-card-bg); border: 1px solid var(--zq-card-border); border-radius: 14px; box-shadow: var(--zq-shadow-md); overflow: hidden; }
.zqb-receipt-amount { font: 800 32px/1 var(--zq-font-family); font-variant-numeric: tabular-nums; text-align: center; }
.zqb-receipt-tear { border-bottom: 1.5px dashed var(--zq-border-soft); }
.zqb-receipt-no { font: 600 10px/1.6 ui-monospace, Menlo, monospace; color: var(--zq-text-secondary); }
.zqb-barcode { display: flex; align-items: flex-end; gap: 1.5px; height: 26px; }
.zqb-barcode > span { width: 2px; background: var(--zq-text); } /* heights 60–100% inline; theme-safe ink */
.zqb-scan-frame { /* member scan-back + M3 idle */
  border-radius: 16px; border: 3px dashed rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center; position: relative; color: rgba(255,255,255,0.5);
}
.zqb-scanline { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: rgba(102,187,106,0.8); animation: zqbLive 1.6s infinite; }

/* ── 12 · TAB BAR + MORE ──────────────────────────────────────────────── */
.zqb-tabbar { display: flex; border-top: 1px solid var(--zq-border-soft); background: var(--zq-card-bg); padding: 5px 6px 1px; }
.zqb-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; min-height: 44px;
  font: 700 9.5px/1 var(--zq-font-family); color: var(--zq-text-secondary);
}
.zqb-tab .material-icons { font-size: 20px; }
.zqb-tab.is-active { color: var(--zq-primary); }
.zqb-more-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--zq-border-soft); background: var(--zq-card-bg); }

/* ── 13 · INBOX ───────────────────────────────────────────────────────── */
.zqb-bell-badge {
  position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: var(--zq-radius-pill); background: var(--zq-danger); color: #fff;
  font: 800 8.5px/14px var(--zq-font-family); text-align: center;
}
.zqb-inbox-row {
  display: flex; gap: 9px; align-items: center; width: 100%; min-height: 44px;
  border: 1px solid var(--zq-border-soft); border-radius: 9px; background: var(--zq-bg);
  padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; color: var(--zq-text);
}

/* ── 14 · MISC ────────────────────────────────────────────────────────── */
.zqb-offline-code { font: 800 20px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.10em; color: var(--zqb-clock); }
.zqb-penalty-step { display: flex; gap: 10px; align-items: center; opacity: 0.55; }
.zqb-penalty-step.is-active { opacity: 1; }
.zqb-closing-stub { flex: 0 0 168px; } /* CLOSING THIS WEEK rail card, on .zq-card--pad-sm */

/* Dark theme: no per-component rules needed — every colour above is either a
   token, an rgba wash over a token surface, or a documented literal (clock,
   stars, foil, card gradients, family dots) that stays identical in both
   themes. If a new rule needs a dark exception, it is reaching past the
   tokens — fix that instead. */