@charset "UTF-8";

/* =========================================================
   review-core.qb.GOLD.css — QB Review CORE (GOLD)
   Authority System — Skin-driven, scoped, cloneable

   PURPOSE
   - CORE = baseline layout + typography + components for qb-* reviews.
   - Designed to be extended by review-heavy.qb.GOLD.css (addon).

   CONTRACT RULES
   1) Skin single-source: accent from --accent-main/hover OR --skin-main/hover
   2) Strict scope: only inside .qb-review
   3) Minimal specificity, no ID selectors for styling (IDs only as anchors)
   4) No patch stacking. Keep blocks unique.

   MAP (A3 / PASS-3)
   0) Anchor / offset (scoped)
   1) Tokens + page baseline
   2) Layout (wrap, hero grid)
   3) Components (cards, typography, pills, buttons, toc, score, callout, grids, lists,
      proscons, compare, footer-cta, back-to-top)
   Notes:
   - NO section styling by id selector in CORE (moved to review-heavy via qb-sec sections hooks)
========================================================= */


/* =========================
   0) ANCHOR JUMP FIX (SCOPED)
========================= */

.qb-review{ --qb-anchor-offset: 0px; }

body.admin-bar .qb-review{ --qb-anchor-offset: 104px; }
@media (max-width: 782px){
  body.admin-bar .qb-review{ --qb-anchor-offset: 118px; }
}

/* Targets inside the review scope (single source) */
.qb-review [id]{ scroll-margin-top: var(--qb-anchor-offset); }


/* =========================
   1) TOKENS + PAGE (CORE — clean, skin-driven)
========================= */

.qb-review{
  --qb-bg: #ffffff;
  --qb-bg2: #f6f8fb;

  --qb-card: #ffffff;
  --qb-text: #0f172a;
  --qb-muted: rgba(15,23,42,.72);
  --qb-line: rgba(15,23,42,.12);

  /* Accent system (single source) */
  --qb-accent: var(--accent-main, var(--skin-main, #2563EB));
  --qb-accent-hover: var(--accent-hover, var(--skin-hover, #1D4ED8));

  /* Softs fallback (skin-aware, sans color-mix) */
  --qb-accent-rgb: var(--skin-main-rgb, 37 99 235);
  --qb-accent-soft: rgb(var(--qb-accent-rgb) / 0.10);
  --qb-accent-soft-2: rgb(var(--qb-accent-rgb) / 0.16);
  --qb-accent-border: rgb(var(--qb-accent-rgb) / 0.22);

  /* Status tokens */
  --qb-pro: #16a34a;
  --qb-warn: #f59e0b;
  --qb-con: #f97316;

  /* Status RGB (for HEAVY gradients) */
  --qb-pro-rgb: 22 163 74;
  --qb-warn-rgb: 245 158 11;
  --qb-con-rgb: 249 115 22;

  --qb-radius: 16px;
  --qb-max: 1080px;

  color: var(--qb-text);
  line-height: 1.55;
  background: linear-gradient(180deg, var(--qb-bg), var(--qb-bg2));

  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  padding: 22px 0;
}

/* Upgrade soft derivations when supported (skin-true, dynamic) */
@supports (color-mix(in srgb, #000 10%, transparent)){
  .qb-review{
    --qb-accent-soft: color-mix(in srgb, var(--qb-accent) 10%, transparent);
    --qb-accent-soft-2: color-mix(in srgb, var(--qb-accent) 16%, transparent);
    --qb-accent-border: color-mix(in srgb, var(--qb-accent) 22%, transparent);
  }
}

/* Links */
.qb-review a{
  color: var(--qb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.qb-review a:hover{
  color: var(--qb-accent-hover);
  text-decoration-thickness: 2px;
}

/* Long text readability */
.qb-review p{
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 12px 0;
}

.qb-review .qb-muted{ color: var(--qb-muted); }
.qb-review .qb-small{ font-size: 13px; }
.qb-review .qb-disclaimer{ color: var(--qb-muted); }


/* =========================
   2) LAYOUT (WRAP + HERO GRID)
========================= */

.qb-review .qb-wrap{
  max-width: var(--qb-max);
  margin: 0 auto;
  padding: 22px 18px 28px;
}



/* =========================
   3) COMPONENTS
========================= */

/* Cards */
.qb-review .qb-card{
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius);
  padding: 20px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 10px 26px rgba(15,23,42,.06);
}
.qb-review .qb-card + .qb-card{ margin-top: 20px; }

.qb-review .qb-card-soft{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.018);
}

.qb-review .qb-hr{
  height: 1px;
  background: var(--qb-line);
  margin: 16px 0;
}

/* Typography */
.qb-review .qb-kicker{
  color: var(--qb-muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  margin: 0 0 6px;
}

.qb-review .qb-h1{
  margin: .35rem 0 .6rem;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.qb-review .qb-h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  position: relative;
  padding-left: 12px;
}
.qb-review .qb-h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:5px;
  height:1.1em;
  border-radius:999px;
  background: var(--qb-accent);
  opacity:.9;
}

.qb-review .qb-h3{
  margin: 6px 0 .4rem;
  font-size: 18px;
  line-height: 1.2;
}

.qb-review .qb-lead{ margin: .5rem 0; }

/* Small-card titles (component-ish) */
.qb-review .qb-card-soft .qb-h3,
.qb-review .qb-grid2 .qb-h3{
  color: rgba(15,23,42,.86);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.qb-review .qb-card-soft .qb-h3{ margin-bottom: 10px; }

/* Pills */
.qb-review .qb-badge-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.qb-review .qb-pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--qb-line);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--qb-muted);
  font-weight: 800;
  font-size: 13px;
  background: rgba(15,23,42,.02);
}
.qb-review .qb-pill strong{ color: var(--qb-text); }

/* Buttons */
.qb-review .qb-btns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.qb-review .qb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--qb-accent-border);

  font-weight: 800;
  text-decoration: none;

  transition:
    transform .08s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease;

  outline: none;
}

.qb-review .qb-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}
.qb-review .qb-btn:active{
  transform: translateY(0);
  box-shadow: none;
}
.qb-review .qb-btn:focus-visible{
  box-shadow:
    0 0 0 4px var(--qb-accent-soft-2),
    0 10px 18px rgba(15,23,42,.08);
  border-color: var(--qb-accent-border);
}

.qb-review .qb-btn.qb-btn-primary{
  background: var(--qb-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}
.qb-review .qb-btn.qb-btn-primary:hover{
  background: var(--qb-accent-hover);
  box-shadow: 0 10px 22px rgba(15,23,42,.16);
}

.qb-review .qb-btn.qb-btn-ghost{
  background: var(--qb-accent-soft);
  border-color: var(--qb-accent-border);
  color: var(--qb-accent-hover);
}
.qb-review .qb-btn.qb-btn-ghost:hover{
  background: var(--qb-accent-soft-2);
  border-color: var(--qb-accent-border);
}

.qb-review .qb-btn-full{ width: 100%; }
.qb-review .qb-btns-tight{ margin: 0; }

/* TOC pills */
.qb-review .qb-toc{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.qb-review .qb-toc a{
  border: 1px solid var(--qb-accent-border);
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--qb-text);
  font-weight: 800;
  font-size: 13px;
  background: var(--qb-accent-soft);
  text-decoration: none;
}
.qb-review .qb-toc a:hover{
  background: var(--qb-accent-soft-2);
  border-color: color-mix(in srgb, var(--qb-accent) 32%, transparent);
}
@media (max-width: 720px){
  .qb-review .qb-toc{ gap: 8px; }
  .qb-review .qb-toc a{ font-size: 13px; padding: 10px 12px; }
}

/* Score card */
.qb-review .qb-score{ display: grid; gap: 10px; }
.qb-review .qb-score__sub{ color: var(--qb-muted); font-weight: 800; }
.qb-review .qb-score__value{
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  margin-top: 2px;
}

/* Callout */
.qb-review .qb-callout{
  border-left: 3px solid var(--qb-warn);
  padding: 10px 12px;
  background: rgba(245,158,11,.08);
  border-radius: 12px;
}

/* Grids + spacing helpers */
.qb-review .qb-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px){
  .qb-review .qb-grid2{ grid-template-columns: 1fr; }
}

.qb-review .qb-mt10{ margin-top: 10px; }
.qb-review .qb-mt12{ margin-top: 12px; }
.qb-review .qb-mt14{ margin-top: 14px; }

/* Lists */
.qb-review .qb-list{
  margin: .4rem 0 0;
  padding-left: 18px;
}
.qb-review .qb-list li{
  margin: 8px 0;
  line-height: 1.6;
}

/* Pros & cons (structure only — look is owned by HEAVY per contract) */
.qb-review .qb-proscons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .qb-review .qb-proscons{ grid-template-columns: 1fr; }
}

/* Compare rows */
.qb-review .qb-compare{ display: grid; gap: 12px; }

.qb-review .qb-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--qb-line);
  border-radius: 14px;
  background: rgba(15,23,42,.018);
}
@media (max-width: 700px){
  .qb-review .qb-row{ grid-template-columns: 1fr; }
}

.qb-review .qb-lhs{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Back to top (component) */
.qb-review .qb-backtotop{
  margin: 18px 0 32px;
  padding: 0 18px;
}
.qb-review .qb-backtotop__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  color: var(--qb-accent);
}
.qb-review .qb-backtotop__link:hover{
  color: var(--qb-accent-hover);
  text-decoration: underline;
}

:where(.footer-editorial){
  --ft-link: var(--qb-accent, var(--accent-main, #1e73be));
  --ft-link-hover: var(--qb-accent-hover, var(--accent-hover, var(--ft-link)));
  --ft-text: var(--qb-text, #2b2b2b);
  --ft-muted: var(--qb-muted, #666);
  --ft-faint: color-mix(in oklab, var(--ft-muted), transparent 25%);
}