/* ============================================================
   Buyer's guide components (question cards, good/weak answers, levels table).
   Built only from the existing design tokens; loaded by the buyer's guide page only.
   ============================================================ */
.qa-card {
  position: relative;
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
}
.qa-num {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.article .qa-card h3 {
  position: relative;
  z-index: 1;
  margin: 0.35em 0 0.5em;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.3;
}
.qa-card .qa-why {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-text-muted);
}
.qa-answers {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.qa-good, .qa-weak {
  position: relative; /* anchors the cursor-light layer, same as the card around them */
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-med) var(--ease-out), transform 480ms var(--ease-out);
}
.qa-good { border-color: rgba(91, 157, 255, 0.38); background: var(--color-blue-soft); }
.qa-weak { border-color: rgba(255, 154, 82, 0.38); background: var(--color-amber-soft); }
.qa-label {
  display: block;
  margin-bottom: 0.4em;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.qa-good .qa-label { color: var(--color-blue); }
.qa-weak .qa-label { color: var(--color-amber); }
.article .qa-answers p { margin: 0; color: var(--color-text); line-height: 1.6; font-size: 0.97rem; }
/* Inner boxes behave like the card around them: each has its own cursor-following light
   (the shared .spotlight layer), a brighter border and a small lift under the pointer.
   On hover-capable pointers they also get the card's border of light: a transparent border over the
   same layered background the .spotlight rule uses, with the box's tint as an opaque fill. The tinted
   fill must stay opaque in the padding box or the ring light would show through it. */
.qa-good:hover { border-color: rgba(91, 157, 255, 0.7); --tf-hover: translateY(-3px); }
.qa-weak:hover { border-color: rgba(255, 154, 82, 0.7); --tf-hover: translateY(-3px); }
@media (hover: hover) and (pointer: fine) {
  .qa-good, .qa-weak {
    border-color: transparent;
    transition: border-color var(--dur-med) var(--ease-out), transform 480ms var(--ease-out), --ring 600ms var(--ease-out);
  }
  .qa-good {
    background:
      linear-gradient(var(--color-blue-soft), var(--color-blue-soft)) padding-box,
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px),
        rgba(255, 178, 110, calc(0.9 * var(--ring))), rgba(110, 165, 255, calc(0.6 * var(--ring))) 42%, transparent 72%) border-box,
      linear-gradient(rgba(91, 157, 255, 0.38), rgba(91, 157, 255, 0.38)) border-box;
  }
  .qa-weak {
    background:
      linear-gradient(var(--color-amber-soft), var(--color-amber-soft)) padding-box,
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px),
        rgba(255, 178, 110, calc(0.9 * var(--ring))), rgba(110, 165, 255, calc(0.6 * var(--ring))) 42%, transparent 72%) border-box,
      linear-gradient(rgba(255, 154, 82, 0.38), rgba(255, 154, 82, 0.38)) border-box;
  }
  .qa-good:hover, .qa-weak:hover { border-color: transparent; }
}

.levels-table td:nth-child(2) { color: var(--color-text-muted); font-weight: 400; white-space: normal; }
.levels-table { min-width: 720px; }

/* Illuminated header: the column labels are lit at rest, with a glowing gradient rule underneath,
   and brighten when the pointer is over them. Glow is text-shadow / box-shadow only. */
.levels-table thead th {
  position: relative;
  color: var(--color-text);
  text-shadow: 0 0 12px rgba(255, 154, 82, 0.4);
  border-bottom-color: transparent;
  transition: color var(--dur-med) var(--ease-out), text-shadow 400ms var(--ease-out);
}
.levels-table thead th:nth-child(3) { text-shadow: 0 0 12px rgba(91, 157, 255, 0.5); }
.levels-table thead th:nth-child(4) { text-shadow: 0 0 12px rgba(255, 154, 82, 0.5); }
.levels-table thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-amber), var(--color-blue));
  box-shadow: 0 0 10px rgba(255, 154, 82, 0.45), 0 0 18px rgba(91, 157, 255, 0.35);
  opacity: 0.75;
  transition: opacity var(--dur-med) var(--ease-out), box-shadow 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .levels-table thead th:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 154, 82, 0.75);
  }
  .levels-table thead th:nth-child(3):hover { text-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 0 20px rgba(91, 157, 255, 0.85); }
  .levels-table thead th:hover::after {
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 154, 82, 0.7), 0 0 26px rgba(91, 157, 255, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .levels-table thead th, .levels-table thead th::after { transition: none; }
}
html.motion-paused .levels-table thead th,
html.motion-paused .levels-table thead th::after { transition: none; }

/* Interactive rows: the row warms up under the pointer and the text under the cursor glows.
   Glow is text-shadow only (never filter: drop-shadow, see the clipped-text rectangle gotcha). */
.levels-table tbody tr { position: relative; transition: background var(--dur-med) var(--ease-out); }
.levels-table tbody th,
.levels-table tbody td {
  transition: color var(--dur-med) var(--ease-out), text-shadow 400ms var(--ease-out);
}
.levels-table tbody tr:first-child th { box-shadow: inset 3px 0 0 transparent; }
.levels-table tbody th { transition: color var(--dur-med) var(--ease-out), text-shadow 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .levels-table tbody tr:hover {
    background: linear-gradient(90deg, var(--color-amber-soft), var(--color-blue-soft) 70%, transparent);
  }
  .levels-table tbody tr:hover th {
    box-shadow: inset 3px 0 0 var(--color-amber);
    color: #fff;
    text-shadow: 0 0 14px rgba(255, 154, 82, 0.55);
  }
  .levels-table tbody tr:hover td {
    color: var(--color-text);
    text-shadow: 0 0 10px rgba(91, 157, 255, 0.28);
  }
  /* the cell actually under the cursor glows strongest */
  .levels-table tbody td:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.35), 0 0 18px rgba(91, 157, 255, 0.55);
  }
  .levels-table tbody td:nth-child(3):hover { text-shadow: 0 0 6px rgba(255, 255, 255, 0.35), 0 0 18px rgba(91, 157, 255, 0.6); }
  .levels-table tbody td:nth-child(4):hover { text-shadow: 0 0 6px rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 154, 82, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .levels-table tbody tr, .levels-table tbody th, .levels-table tbody td { transition: none; }
}
html.motion-paused .levels-table tbody tr,
html.motion-paused .levels-table tbody th,
html.motion-paused .levels-table tbody td { transition: none; }

.rule-of-thumb {
  margin: 0 0 1.6em;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-amber);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article .rule-of-thumb p { margin: 0; color: var(--color-text); font-size: 1.05rem; line-height: 1.65; }

.checklist { counter-reset: chk; list-style: none; padding: 0; margin: 0 0 1.6em; }
.checklist li {
  counter-increment: chk;
  position: relative;
  margin: 0 0 0.6em;
  padding: 0.85em 1em 0.85em 3.1em;
  border-radius: var(--radius-sm);   /* surface, border and the cursor's border of light come from .pain-card.spotlight */
  color: var(--color-text);
  line-height: 1.55;
  transition: border-color var(--dur-med) var(--ease-out), transform 480ms var(--ease-out), --ring 600ms var(--ease-out), opacity 800ms var(--ease-out);
}
.checklist li::before { z-index: 1; transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .checklist li:hover { --tf-hover: translateY(-3px); text-shadow: 0 0 12px rgba(91, 157, 255, 0.35); }
  .checklist li:hover::before {
    transform: scale(1.15);
    color: #fff;
    border-color: var(--color-amber);
    box-shadow: 0 0 10px rgba(255, 154, 82, 0.7), 0 0 20px rgba(255, 154, 82, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) { .checklist li, .checklist li::before { transition: none; } }
html.motion-paused .checklist li, html.motion-paused .checklist li::before { transition: none; }
.checklist li::before {
  content: counter(chk);
  position: absolute;
  left: 0.9em;
  top: 0.85em;
  width: 1.6em;
  height: 1.6em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .qa-answers { grid-template-columns: 1fr; }
  .qa-card { padding: var(--space-4); }
}
@media print {
  .qa-card, .checklist li { break-inside: avoid; }
}

/* ---- The table's scrollbar, in the site's language ----------------------------------------------
   Gradient thumb with a glow, dark track, no arrow buttons, and a slow breathing light under the
   bar. Chromium/Safari use the -webkit- parts; Firefox gets scrollbar-color (the two do not mix:
   when scrollbar-color is set Chromium ignores the -webkit- parts, so it is gated). */
.levels-wrap { padding-bottom: 6px; }
.levels-wrap::-webkit-scrollbar { height: 14px; }
.levels-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.levels-wrap::-webkit-scrollbar-track {
  margin: 0 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
}
.levels-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--color-amber), var(--color-blue));
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 10px rgba(255, 154, 82, 0.55), 0 0 18px rgba(91, 157, 255, 0.4);
}
.levels-wrap::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  box-shadow: 0 0 14px rgba(255, 154, 82, 0.8), 0 0 28px rgba(91, 157, 255, 0.6);
}
.levels-wrap::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg, #ffb27a, #7fb2ff);
  box-shadow: 0 0 18px rgba(255, 178, 110, 0.9), 0 0 32px rgba(110, 165, 255, 0.7);
}
@supports not selector(::-webkit-scrollbar) {
  .levels-wrap { scrollbar-color: var(--color-amber) var(--color-surface); scrollbar-width: thin; }
}
/* a slow breathing light under the bar (the thumb itself cannot be animated reliably) */
@keyframes levels-breathe {
  0%, 100% { box-shadow: 0 10px 22px -12px rgba(255, 154, 82, 0.10), 0 10px 22px -12px rgba(91, 157, 255, 0.08); }
  50%      { box-shadow: 0 12px 26px -10px rgba(255, 154, 82, 0.34), 0 12px 26px -10px rgba(91, 157, 255, 0.30); }
}
.levels-wrap { animation: levels-breathe 4.8s var(--ease-breath) infinite; }
.levels-wrap:hover { animation-duration: 2.6s; }
@media (prefers-reduced-motion: reduce) { .levels-wrap { animation: none; } }
html.motion-paused .levels-wrap { animation: none; }