/* /badges — the public reference for every seller badge (#4004).
 *
 * Scoped under .badges-page (the page's body class) and built only from the
 * :root --sx-* tokens base.html declares for both themes, so the page follows
 * the theme with no dark block of its own. The per-badge accent is the axis
 * ink the chips already use (.badge-visual-icon--*, sx-home.css), reused as
 * a tint behind each badge's mark rather than a new palette.
 */

/* The hero's tint is a band, and base.html wraps the page in a `.container` that is 1200px wide at
   most: on a wider window the band was a tile 32px outside the page column (where the logo above it
   sits) and short of the window's edges, while below 1200px it was the window's width, which is what
   it stays. Releasing the wrapper makes it the window's at every width. Only the band moves: the
   rest of the page is in its own `.sx-container`, on the column, and the top bar and footer are
   outside the wrapper (tests/test_badges_hero_band_reaches_the_windows_edges.py). */
body.badges-page { --container-max: none; }

.badges-page .bx-main { padding-bottom: 72px; }

.badges-page .bx-hero {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface-2);
}
.badges-page .bx-hero h1 {
  margin: 10px 0 12px;
  font-family: var(--sx-font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sx-text);
}
.badges-page .bx-lede {
  max-width: 720px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sx-text-2);
}

.badges-page .bx-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.badges-page .bx-index-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.badges-page .bx-index-chip:hover { box-shadow: 0 0 0 1px var(--sx-line-2) inset; }

.badges-page .bx-body { display: flex; flex-direction: column; gap: 36px; padding-top: 36px; }

.badges-page .bx-axis-head { margin-bottom: 12px; }
.badges-page .bx-axis-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.badges-page .bx-axis-question {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: var(--sx-text);
}

.badges-page .bx-badge {
  scroll-margin-top: 88px;
  padding: 20px 22px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.badges-page .bx-badge:target { box-shadow: 0 0 0 2px var(--sx-brand-text) inset; }
.badges-page .bx-badge-head { display: flex; align-items: center; gap: 14px; }
.badges-page .bx-badge-head h3 { margin: 0; font-size: 18px; color: var(--sx-text); }
.badges-page .bx-badge-name { margin: 2px 0 0; font-size: 13px; color: var(--sx-text-3); }

.badges-page .bx-badge-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}

.badges-page .bx-badge-meaning { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--sx-text); }

.badges-page .bx-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 14px 0 0;
}
.badges-page .bx-facts dt {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.badges-page .bx-facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sx-text-2); }

.badges-page .bx-criteria { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sx-line); }
.badges-page .bx-criteria-lead { margin: 0 0 8px; font-size: 14px; color: var(--sx-text-2); }
.badges-page .bx-criteria ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--sx-text-2); }
.badges-page .bx-criteria strong { color: var(--sx-text); }
.badges-page .bx-criteria ul.bx-criteria--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

.badges-page .bx-note { margin: 14px 0 0; font-size: 14px; color: var(--sx-text-2); }
.badges-page .bx-note a,
.badges-page .bx-faq a { font-weight: 600; color: var(--sx-brand-text); }

.badges-page .bx-faq h2 { margin: 0 0 12px; font-size: 20px; color: var(--sx-text); }
.badges-page .bx-faq-item { padding: 14px 0; border-top: 1px solid var(--sx-line); }
.badges-page .bx-faq-item h3 { margin: 0 0 6px; font-size: 15px; color: var(--sx-text); }
.badges-page .bx-faq-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sx-text-2); }

.badges-page .bx-cta { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .badges-page .bx-hero { padding: 28px 0 22px; }
  .badges-page .bx-badge { padding: 16px; }
  .badges-page .bx-facts { grid-template-columns: minmax(0, 1fr); }
}