/* =============================================================================
   Research library — /research and /research/:chemistry_key, every brand
   that publishes one (ResearchLibrary; BacWater does not).
   =============================================================================
   Operator, 2026-10-03, on the live BacWater page: "Light on light color."

   The two partials used to paint PepRally's dark palette INLINE — #9CA3AF,
   #6B7280, #D1D5DB, and `var(--brand-heading, #F5F5F0)` fallbacks for tokens
   no brand declared, so the fallback was live on all five. On the four light
   brands that measured #D1D5DB at 1.47:1 and #9CA3AF at 2.54:1.

   This sheet paints with the `--checkout-*` family ONLY, because it is the one
   token family every brand sheet declares on its own body. Every TEXT rule
   takes --checkout-text: measured AA on every brand's page and card
   (glam 14.84 / 15.83, peprally 17.29 / 16.89, mypeptides and surfpeptides
   18.88). --checkout-muted is deliberately NOT used for copy: on Glam it is
   3.71:1. Hierarchy comes from size and weight, never from a failing grey.
   The accent is used only where it is not ink (a card's top edge).

   The block paints its own ground, so a ratio here is a fact about the rule
   rather than about whatever the brand layout happens to put behind it.

   Cascade rules (research_contrast_guard_test holds them):
     · every selector names the block root — `.peprally p { … }` is (0,1,1)
       and beats a lone class on colour AND typography;
     · anchors carry `a.` — `.brand a { color: accent }` would otherwise win;
     · no literal colours, no var() fallbacks, no alpha on text.
   ========================================================================== */

.research,
.research *,
.research *::before,
.research *::after { box-sizing: border-box; }

.research {
  background: var(--checkout-bg);
  color: var(--checkout-text);
  font-family: var(--checkout-font-body);
  margin: 0 auto;
  padding: 40px 20px 56px;
  max-width: 960px;
  line-height: 1.6;
}

.research.research--show { max-width: 800px; }

.research .research__eyebrow {
  color: var(--checkout-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.research .research__title {
  color: var(--checkout-text);
  font-family: var(--checkout-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.research .research__intro {
  color: var(--checkout-text);
  font-size: 16px;
  max-width: 640px;
  margin: 0 0 32px;
}

/* ── Index: one card per compound ─────────────────────────────────────── */

.research .research__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.research a.research__card {
  display: block;
  background: var(--checkout-card-bg);
  color: var(--checkout-text);
  border: 1px solid var(--checkout-border);
  border-top: 3px solid var(--checkout-accent);
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
}

.research a.research__card:hover,
.research a.research__card:focus-visible { border-color: var(--checkout-accent); }

.research .research__card-title {
  color: var(--checkout-text);
  font-family: var(--checkout-font-display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
}

.research .research__card-meta {
  color: var(--checkout-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  margin: 0 0 10px;
}

.research .research__card-text {
  color: var(--checkout-text);
  font-size: 14px;
  margin: 0;
}

.research .research__card-aka {
  color: var(--checkout-text);
  font-size: 13px;
  font-style: italic;
  margin: 10px 0 0;
}

.research .research__empty {
  color: var(--checkout-text);
  text-align: center;
  padding: 48px 0;
}

/* ── Show: identity facts, then (only when cited) the prose ───────────── */

.research a.research__back {
  display: inline-block;
  color: var(--checkout-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0 0 20px;
}

.research .research__facts {
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 8px;
  margin: 8px 0 32px;
  padding: 4px 20px;
}

.research .research__fact {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--checkout-border);
}

.research .research__fact:last-child { border-bottom: 0; }

.research .research__fact-label {
  color: var(--checkout-text);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.research .research__fact-value {
  color: var(--checkout-text);
  font-size: 15px;
  margin: 0;
  overflow-wrap: anywhere;
}

.research .research__fact-value--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.research .research__section { margin: 0 0 32px; }

.research .research__h2 {
  color: var(--checkout-text);
  font-family: var(--checkout-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
}

.research .research__prose {
  color: var(--checkout-text);
  font-size: 16px;
  line-height: 1.7;
}

.research .research__prose p { margin: 0 0 12px; }

/* Bullets come from ResearchProse as real lists, so a dropped bullet
   leaves no stray "•" behind (2026-10-03). */
.research .research__prose .research__list { margin: 0 0 12px; padding-left: 20px; }
.research .research__prose .research__list li { margin: 0 0 6px; }
.research .research__prose .research__list .research__list-sub { margin-left: 20px; }

/* References: each citation exactly as published, one per line. */
.research .research__references {
  color: var(--checkout-text);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding-left: 20px;
}

.research .research__references .research__reference { margin: 0 0 8px; }
.research .research__references .research__reference cite { font-style: normal; }

.research .research__product {
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 8px;
  margin: 40px 0 0;
  padding: 20px;
}

.research .research__product-label {
  color: var(--checkout-text);
  font-size: 13px;
  margin: 0 0 4px;
}

.research .research__product-name {
  color: var(--checkout-text);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 14px;
}

/* The CTA inverts the page's own pair: ground is the brand's ink, ink is its
   card. That is AA by construction on every brand, dark or light, without
   reaching for an accent whose white-on ratio differs per brand. */
.research a.research__cta {
  display: inline-block;
  background: var(--checkout-text);
  color: var(--checkout-card-bg);
  border: 1px solid var(--checkout-text);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 22px;
  text-decoration: none;
}

.research a.research__cta:hover,
.research a.research__cta:focus-visible { text-decoration: underline; }

.research .research__disclaimer {
  background: var(--checkout-card-bg);
  color: var(--checkout-text);
  border: 1px solid var(--checkout-border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
  margin: 40px 0 0;
  padding: 16px;
}

.research .research__disclaimer p { margin: 0 0 8px; }
.research .research__disclaimer p:last-child { margin: 0; }

@media (min-width: 768px) {
  .research { padding: 56px 32px 72px; }
  .research .research__title { font-size: 40px; }
}