/* ============================================================================
   ZYBENEFITS — M0 + RESTYLE SHARED STYLESHEET (round 3)
   Load AFTER: zq-dark → zq-suite-tokens → zyqual-suite → zybenefits → zybenefits-pages.
   Adds: inline-SVG icon system (CSP-safe, no icon fonts), merchant front-door
   patterns (M0-1…6), portal-shell + reviewer-console restyle recipes (RS-1…4).
   No new hex outside the flagged set in 09-M0-RESTYLE.md §2.
   ========================================================================= */

/* Font: Inter if present, system stack otherwise — no external font hosts. */
body { font-family: var(--zq-font-family, Inter, -apple-system, "Segoe UI", system-ui, sans-serif); }

/* Anchors used as controls keep the control's colour, not the link colour.
   (Round-3 pages render several suite buttons as <a>; suite selectors only
   target button elements, so the page-level a{} rule was winning.) */
a.zq-glass, a.zq-glass:hover { color: #fff; text-decoration: none; }
a.zq-btn, a.zq-btn:hover { text-decoration: none; }
a.zq-btn--primary, a.zq-btn--primary:hover { color: #fff; }
/* Dark theme: --zq-primary flips to lilac #bb86fc — primary fills need dark ink
   there (8.5:1) or labels vanish. Applies to buttons and anchor-buttons alike. */
[data-theme="dark"] .zq-btn--primary, [data-theme="dark"] .zq-btn--primary:hover,
[data-theme="dark"] a.zq-btn--primary, [data-theme="dark"] a.zq-btn--primary:hover { color: #1a1140; }
[data-theme="dark"] .zq-btn--primary .zqi:has(> use) { color: inherit; }
a.zq-btn--accent, a.zq-btn--accent:hover { color: #2e2e2e; }
a.zq-btn--ghost, a.zq-btn--ghost:hover,
a.zq-btn--outline, a.zq-btn--outline:hover,
a.zq-btn--quiet, a.zq-btn--quiet:hover { color: var(--zq-primary); }
a.zq-chip { text-decoration: none; }

/* ── ICONS (inline SVG only) ─────────────────────────────────────────────── */
.zqi { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.zqi--sm { width: 13px; height: 13px; }
.zqi--lg { width: 20px; height: 20px; }
.zqi--xl { width: 28px; height: 28px; stroke-width: 1.75; }
.zqi--fill { fill: currentColor; stroke: none; }

/* ── PAGE CHROME ─────────────────────────────────────────────────────────── */
.m0-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--zq-bg); }
.m0-pagehead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m0-journey { display: flex; align-items: center; gap: 8px; padding: 14px 0 4px; flex-wrap: wrap; }
[data-zqb-reduced="on"] *, [data-zqb-reduced="on"] *::before, [data-zqb-reduced="on"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
}

/* ── BRAND BAND (gradient only — no raster, strict CSP) ──────────────────── */
.m0-band {
  background-image: var(--zq-nebula-overlay, linear-gradient(rgba(255,255,255,0.04), rgba(0,0,0,0.12))),
                    linear-gradient(135deg, #2a0b52 0%, #4a148c 55%, #1B5062 140%);
  color: #fff;
}

/* ── M0 FORMS (registration, evidence, invite) ───────────────────────────── */
.m0-group { counter-increment: m0sec; }
.m0-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--zq-border-soft); }
.m0-group-n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--zq-primary-soft); color: var(--zq-primary);
  display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--zq-font-family); flex-shrink: 0;
}
.m0-why { font-size: 11px; line-height: 1.5; color: var(--zq-text-secondary); margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; }
.m0-why .zqi { width: 12px; height: 12px; margin-top: 1.5px; color: var(--zq-primary); }
.m0-field.is-invalid .zq-input, .m0-field.is-invalid .zq-select { border-color: var(--zq-danger); box-shadow: 0 0 0 3px rgba(244,67,54,0.12); }
.m0-err { font: 600 11px/1.4 var(--zq-font-family); color: var(--zq-danger); margin-top: 4px; display: flex; gap: 5px; align-items: center; }
.m0-declare { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--zq-border-soft); border-radius: 10px; cursor: pointer; }
.m0-declare input { width: 18px; height: 18px; accent-color: #4a148c; margin-top: 1px; flex-shrink: 0; }
.m0-declare.is-on { border-color: var(--zq-primary); background: var(--zq-primary-soft); }
.m0-market-chip { cursor: pointer; }

/* Evidence rows (M0-3): state via modifier */
.m0-evrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--zq-border-soft); border-radius: 10px; }
.m0-evrow--accepted { }
.m0-evrow--rejected { border-color: #ffcc80; background: rgba(255,152,0,0.04); }
.m0-evrow--failed { border-color: #ef9a9a; background: rgba(244,67,54,0.04); }
.m0-evrow .zqi--state { width: 20px; height: 20px; margin-top: 1px; }

/* Tracker (M0-4) */
.m0-track { display: flex; flex-direction: column; gap: 0; }
.m0-track-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.m0-track-rail { display: flex; flex-direction: column; align-items: center; }
.m0-track-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--zq-border-soft); flex-shrink: 0; margin-top: 3px; }
.m0-track-dot.is-done { background: var(--zq-success); }
.m0-track-dot.is-current { background: var(--zq-primary); box-shadow: 0 0 0 4px var(--zq-primary-soft); }
.m0-track-line { width: 2px; flex: 1; background: var(--zq-border-soft); min-height: 26px; }
.m0-track-step.is-last .m0-track-line { display: none; }
.m0-track-body { padding-bottom: 18px; }

/* Verified badge (M0-5) — the earned mark */
.m0-vbadge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--zq-radius-pill); background: #e8f5e9; color: #1b5e20;
  font: 800 13px/1 var(--zq-font-family); letter-spacing: 0.02em;
}
.m0-vbadge--sm { padding: 4px 10px; font-size: 10.5px; gap: 5px; }
.m0-vbadge--ondark { background: rgba(255,255,255,0.16); color: #fff; }
.m0-vmoment { animation: zqbPop 0.5s ease; }

/* Team roles (M0-6) */
.m0-rolecard { flex: 1; min-width: 220px; border: 1.5px solid var(--zq-border-soft); border-radius: 12px; padding: 14px; cursor: pointer; }
.m0-rolecard.is-on { border-color: var(--zq-primary); background: var(--zq-primary-soft); }
.m0-roleline { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.m0-roleline .zqi { width: 13px; height: 13px; }
.m0-roleline.can { color: var(--zq-text); }
.m0-roleline.cant { color: var(--zq-text-secondary); }

/* ── RS-1 · PORTAL SHELL ─────────────────────────────────────────────────── */
.rs-portal { border: 1px solid var(--zq-border-soft); border-radius: 14px; overflow: hidden; background: var(--zq-card-bg); }
.rs-portal-top { display: flex; align-items: center; gap: 10px; padding: 9px 16px; }
.rs-portal-body { display: flex; background: var(--zq-bg); min-height: 420px; }
.rs-nav { flex: 0 0 190px; border-right: 1px solid var(--zq-border-soft); background: var(--zq-card-bg); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.rs-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font: 600 12.5px/1 var(--zq-font-family); color: var(--zq-text-secondary); text-decoration: none; border: none; background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.rs-nav-item:hover { background: var(--zq-bg-soft); color: var(--zq-text); }
.rs-nav-item.is-active { background: var(--zq-primary-soft); color: var(--zq-primary); font-weight: 700; }
.rs-nav-sec { font: 700 9.5px/1 var(--zq-font-family); letter-spacing: 0.1em; color: var(--zq-text-secondary); padding: 12px 10px 5px; text-transform: uppercase; }
.rs-main { flex: 1; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── RS-2 · REVIEWER CONSOLE (calm, evidential) ──────────────────────────── */
.rv-queue-row {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--zq-border-soft); border-radius: 10px; background: var(--zq-card-bg);
  cursor: pointer; text-align: left; font: inherit; color: var(--zq-text); width: 100%;
}
.rv-queue-row:hover { border-color: var(--zq-primary); }
.rv-queue-row.is-open { border-color: var(--zq-primary); box-shadow: 0 0 0 3px var(--zq-primary-soft); }
.rv-age { font: 600 10.5px/1 ui-monospace, Menlo, monospace; color: var(--zq-text-secondary); }
.rv-evidence { border-left: 3px solid var(--zq-info); background: rgba(33,150,243,0.05); border-radius: 0 8px 8px 0; padding: 10px 12px; }
.rv-decision { display: flex; flex-direction: column; gap: 10px; }
.rv-decision textarea { min-height: 74px; }

/* ── RS-3 · RAIL + FORMATS ───────────────────────────────────────────────── */
.rail-frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--zq-shadow-md); }
.rail-progress { height: 4px; border-radius: var(--zq-radius-pill); background: rgba(255,255,255,0.25); overflow: hidden; }
.rail-progress > span { display: block; height: 100%; background: #ffe082; border-radius: inherit; }

/* ── RS-4 · COUNTER (M3 anchor, dark) ────────────────────────────────────── */
.m3-dark { background: #101017; color: #fff; }
.m3-plate { border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; }
.m3-plate--ok { background: #e8f5e9; color: #1b5e20; }
.m3-plate--warn { background: #fff3e0; color: #9c5700; }
.m3-plate--bad { background: #ffebee; color: #b71c1c; }
.m3-fields { background: #171923; border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 14px 16px; color: #e8eaf2; display: flex; flex-direction: column; gap: 8px; }

/* Responsive */
@media (max-width: 900px) {
  .rs-portal-body { flex-direction: column; }
  .rs-nav { flex: none; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--zq-border-soft); }
  .rs-nav-sec { display: none; }
  .m0-hero-grid { grid-template-columns: 1fr !important; }
}