/* ── RUO Radar — the instrument, and the band that points at it ──────
 *
 * Operator, 2026-09-16: "i want sexier for the radar site and i want
 * our main page highlighting it."
 *
 * TWO BLOCKS, ONE FILE, ON PURPOSE. `.radar-site` dresses
 * ruoradar.com; `.radar-band` is the section a brand storefront puts on
 * its homepage. They share a visual language deliberately — the band's
 * whole job is to make a stranger click through to the site, and a
 * hand-off between two surfaces that look unrelated reads as a
 * redirect to somebody else's page. Keeping them in one file is also
 * the only way a change to one is made in sight of the other.
 *
 * ── The register: an instrument, not a magazine ─────────────────────
 *
 * Figures are the product here, so figures get the strongest treatment
 * in the file: monospace, `tabular-nums`, and enough size that a reader
 * scanning a column never has to align digits by eye. Prose is the
 * caption. That is the opposite weighting to a storefront and it is
 * why this does not simply reuse a brand sheet.
 *
 * ── No webfont, anywhere ────────────────────────────────────────────
 *
 * Every face is a system stack. Our own CSP is `default-src 'self'`,
 * and this repo has already lost every Google Ads conversion for days
 * to a subresource that was provably present in the HTML and silently
 * blocked in the browser. A font that fails that way on a page whose
 * entire job is to be trusted by a stranger fails invisibly, in
 * production, where it costs most. There is nothing to self-host, no
 * CDN request and no licence tier.
 *
 * ── The cascade rules that have already cost this business money ────
 *
 * `.radar-band` is layered over a brand sheet, and every brand sheet
 * carries generic element rules inside its own scope:
 *
 *   .peprally a  { color: var(--color-accent) }     (0,1,1)
 *   .peprally p  { color: …; font-size: 16px }      (0,1,1)
 *
 * A single class is (0,1,0) and LOSES to both — which shipped 1:1
 * contrast on four brands' checkout buttons, and rendered an auth
 * headline at 16px against a declared 1.9rem. So, without exception:
 *
 *   · every selector names the block root  (.radar-band .radar-band__x)
 *   · every anchor rule carries the `a`    (.radar-band a.radar-band__x)
 *   · no bare element is ever styled
 *
 * `.radar-site` has no brand sheet beneath it and needs none of this,
 * but it follows the same shape so that a rule moved between the two
 * blocks cannot arrive broken.
 *
 * ── Brand tokens only, in the band ──────────────────────────────────
 *
 * `.radar-band` hardcodes NO colour of its own. Every value is a
 * `--checkout-*` token, which is the one family all five brands
 * declare — the same reason `shared/auth.css` chose it. The CTA fill is
 * `--cta-accent`, never `--color-accent`: PepRally's #E8550F carries
 * white at 3.66:1 and #C1470C at 5.01:1, and that distinction is the
 * entire reason `--cta-accent` exists.
 *
 * ── Breakpoints are min-width only ──────────────────────────────────
 *
 * Mobile is the base declaration and desktop is the enhancement, so a
 * query that never matches leaves a page that works rather than a page
 * whose layout was only ever declared inside a query. That failure
 * mode — a `grid-area` referenced at the base width and declared only
 * inside a media query — stacked an entire auth form into row 1 at
 * 390px. There are no named grid areas in this file at all.
 */

/* ════════════════════════════════════════════════════════════════════
   1 · ruoradar.com — the instrument
   ════════════════════════════════════════════════════════════════════ */

/* ── Dark is the BASE, not a preference ─────────────────────────────
 *
 * Operator, 2026-09-16: *"get rid of the fucking white background on
 * shit... make it fucking readable. highlight with a good color. also
 * do not make everything so transparent."*
 *
 * The first cut of this file was light-by-default with `#ffffff`
 * panels, flipping dark only on `prefers-color-scheme: dark`. Most
 * operating systems report `light`, so in practice almost every
 * visitor would have got the white page he is objecting to — a default
 * nobody chose is how a decision ships by accident, which is the same
 * mistake `MarketScope::DEFAULT` made when it shipped `us_and_unknown`
 * before the numbers existed.
 *
 * So dark is declared on the block itself and there is NO automatic
 * switch. The light theme still exists and still works, reachable by
 * stamping `data-theme="light"` on the root — a data site somebody
 * wants to print or read in sunlight should be able to. It is simply
 * not chosen on the visitor's behalf.
 *
 * This is a deliberate departure from the house rule that both themes
 * follow the OS. An explicit operator instruction outranks a house
 * default, and the cost is bounded: nothing is removed, one thing stops
 * being automatic.
 *
 * ── And nothing load-bearing is painted with alpha ─────────────────
 *
 * "do not make everything so transparent" is the other half. Every
 * colour below is a solid value. Where a surface needs to sit above
 * another it gets its own opaque token, not an rgba() over whatever
 * happens to be behind it — which is how a panel's contrast becomes a
 * function of its parent and stops being measurable at all. */
.radar-site {
  --radar-paper:  #0b0f0e;
  --radar-panel:  #141c1a;
  --radar-ink:    #eef4f1;
  --radar-ink-2:  #c2cfca;
  --radar-muted:  #93a29c;
  --radar-rule:   #25322e;
  --radar-rule-2: #1b2422;
  --radar-accent: #2dd4bf;
  --radar-good:   #4ade80;
  --radar-warn:   #fbbf24;
  --radar-alarm:  #ff8d82;

  --radar-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radar-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --radar-measure: 66ch;
  --radar-wrap: 1060px;

  margin: 0;
  background: var(--radar-paper);
  color: var(--radar-ink);
  font-family: var(--radar-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Explicit, both directions, so a toggle can always get back to where
   it came from. `[data-theme="dark"]` restates the base rather than
   relying on it — a theme that works only by absence breaks the moment
   the base changes. */
.radar-site[data-theme="dark"] {
  --radar-paper:  #0b0f0e;
  --radar-panel:  #141c1a;
  --radar-ink:    #eef4f1;
  --radar-ink-2:  #c2cfca;
  --radar-muted:  #93a29c;
  --radar-rule:   #25322e;
  --radar-rule-2: #1b2422;
  --radar-accent: #2dd4bf;
  --radar-good:   #4ade80;
  --radar-warn:   #fbbf24;
  --radar-alarm:  #ff8d82;
}

.radar-site[data-theme="light"] {
  --radar-paper:  #eef1ef;
  --radar-panel:  #f8faf9;
  --radar-ink:    #0e1311;
  --radar-ink-2:  #3b4542;
  --radar-muted:  #5c6a65;
  --radar-rule:   #ccd4d0;
  --radar-rule-2: #dfe5e2;
  --radar-accent: #0b6259;
  --radar-good:   #136c34;
  --radar-warn:   #94450a;
  --radar-alarm:  #a81f17;
}

.radar-site .radar-wrap {
  max-width: var(--radar-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.radar-site .radar-measure { max-width: var(--radar-measure); }

/* ── Masthead ─────────────────────────────────────────────────────── */

.radar-site .radar-site__masthead {
  border-bottom: 1px solid var(--radar-rule);
  background: var(--radar-panel);
}

/* ── Vertical padding as LONGHANDS, and that is load-bearing ────────
 *
 * This element is also a `.radar-wrap`, which sets `padding: 0 20px`.
 * A `padding` SHORTHAND here has the same specificity and comes later,
 * so it silently resets the horizontal padding to zero — and the whole
 * masthead runs to both edges of a phone.
 *
 * Nothing warns. The rule is present, correct and applied; it is the
 * one before it that was destroyed. Found by pointing Chrome at 390px
 * after every static check in `radar_contrast_guard_test` was green,
 * which is the same way the auth surface's collapsed grid was found. */
.radar-site .radar-site__mast-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.radar-site .radar-site__mark {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--radar-accent);
}

.radar-site a.radar-site__wordmark {
  font-family: var(--radar-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--radar-ink);
  white-space: nowrap;
}

.radar-site a.radar-site__wordmark .radar-site__wordmark-2 { color: var(--radar-accent); }

/* The eyebrow carries live coverage or it does not render. A label
   that says only "prices" is decoration; one that says how many
   listings from how many sellers is the reason to keep reading. */
.radar-site .radar-site__eyebrow {
  margin-left: auto;
  font-family: var(--radar-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--radar-muted);
  font-variant-numeric: tabular-nums;
}

.radar-site .radar-site__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--radar-accent);
  vertical-align: baseline;
}

/* ── Page head ────────────────────────────────────────────────────── */

/* Longhands, for the reason given on `.radar-site__mast-inner`: this is
 * also a `.radar-wrap`, and a shorthand wipes its horizontal padding,
 * which runs every headline and paragraph off the left edge of a phone. */
.radar-site .radar-site__main { padding-top: 34px; padding-bottom: 10px; }

.radar-site .radar-site__h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--radar-ink);
  /* Compound labels are SCRAPED. `bpc-157-tb-500-ghk-cu-kpv` is a real
     one, and an unbreakable 26-character word at 30px is wider than a
     phone — which pushes the whole page sideways rather than wrapping. */
  overflow-wrap: anywhere;
}

.radar-site .radar-site__standfirst {
  margin: 0 0 6px;
  max-width: var(--radar-measure);
  font-size: 17px;
  color: var(--radar-ink-2);
}

.radar-site .radar-site__note {
  margin: 10px 0 0;
  max-width: var(--radar-measure);
  font-size: 13.5px;
  color: var(--radar-muted);
}

.radar-site .radar-site__back {
  margin: 0 0 14px;
  font-family: var(--radar-mono);
  font-size: 12.5px;
}

.radar-site a.radar-site__link { color: var(--radar-accent); }

/* ── The stat band ────────────────────────────────────────────────── */

.radar-site .radar-site__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 1px;
  margin: 26px 0 8px;
  background: var(--radar-rule);
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  overflow: hidden;
}

.radar-site .radar-site__stat {
  background: var(--radar-panel);
  padding: 16px 18px;
}

.radar-site .radar-site__stat-n {
  display: block;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--radar-ink);
}

.radar-site .radar-site__stat-l {
  display: block;
  margin-top: 4px;
  font-family: var(--radar-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

/* ── Section headings ─────────────────────────────────────────────── */

.radar-site .radar-site__h2 {
  margin: 34px 0 10px;
  font-size: 13px;
  font-family: var(--radar-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
  font-weight: 600;
}

/* ── Picker ───────────────────────────────────────────────────────── */

.radar-site .radar-site__picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 4px;
}

.radar-site .radar-site__picker-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--radar-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

.radar-site .radar-site__select,
.radar-site .radar-site__button {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--radar-rule);
  border-radius: 8px;
  background: var(--radar-panel);
  color: var(--radar-ink);
}

.radar-site .radar-site__select { min-width: 250px; }

.radar-site .radar-site__button {
  background: var(--radar-accent);
  border-color: var(--radar-accent);
  color: var(--radar-panel);
  font-weight: 600;
  cursor: pointer;
}

/* ── Tables ───────────────────────────────────────────────────────── */

/* Every table lives in one of these. A table that overflows the body
   makes the whole PAGE scroll sideways on a phone, which reads as
   broken rather than as wide. */
.radar-site .radar-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-panel);
  -webkit-overflow-scrolling: touch;
}

.radar-site .radar-site__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.radar-site .radar-site__th {
  text-align: left;
  padding: 11px 14px;
  font-family: var(--radar-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
  border-bottom: 1px solid var(--radar-rule);
  white-space: nowrap;
}

.radar-site .radar-site__td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--radar-rule-2);
  color: var(--radar-ink);
}

.radar-site .radar-site__row:last-child .radar-site__td { border-bottom: 0; }

.radar-site .radar-site__num {
  text-align: right;
  font-family: var(--radar-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.radar-site .radar-site__quiet { color: var(--radar-muted); }

.radar-site a.radar-site__compound {
  color: var(--radar-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--radar-rule);
}

.radar-site .radar-site__ours {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1px solid var(--radar-warn);
  border-radius: 4px;
  font-family: var(--radar-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--radar-warn);
}

/* ── The certificate cell — the column nobody else publishes ──────── */

.radar-cert {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--radar-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Zero of N is a MEASURED finding, not an absence, so it is the loudest
   thing in the table. Never rendered unless the field cleared the
   assessed quorum — an unasked question rendered as a zero is the most
   flattering wrong number available to us. */
.radar-cert--none { color: var(--radar-alarm, #b3261e); }
.radar-cert--some { color: var(--radar-good, #15803d); }
.radar-cert--ours { color: var(--radar-accent, #0f766e); }

/* ── The win callout ──────────────────────────────────────────────── */

.radar-site .radar-site__win {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--radar-good);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--radar-panel);
}

.radar-site .radar-site__win-h {
  margin: 0 0 8px;
  font-family: var(--radar-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-good);
}

.radar-site .radar-site__win-body { margin: 0 0 6px; }
.radar-site .radar-site__win-foot { margin: 0; font-size: 13.5px; color: var(--radar-muted); }
.radar-site .radar-site__save { color: var(--radar-good); }

/* ── The one advertisement, and the colophon ──────────────────────── */

.radar-site .radar-site__ad {
  margin: 38px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--radar-rule);
  border-radius: 10px;
  background: var(--radar-panel);
}

.radar-site .radar-site__ad-label {
  font-family: var(--radar-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--radar-muted);
}

.radar-site .radar-site__ad-body { margin: 9px 0 6px; }
.radar-site .radar-site__ad-foot { margin: 0; }

.radar-site .radar-site__colophon {
  margin-top: 34px;
  padding: 22px 0 46px;
  border-top: 1px solid var(--radar-rule);
  font-size: 13.5px;
  color: var(--radar-muted);
}

.radar-site .radar-site__colophon-p { max-width: var(--radar-measure); }

.radar-site :focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 2px;
}

@media (min-width: 720px) {
  .radar-site .radar-site__main { padding-top: 46px; padding-bottom: 10px; }
  .radar-site .radar-site__stats { margin: 32px 0 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   2 · The storefront band — a brand pointing at the instrument
   ════════════════════════════════════════════════════════════════════

   Not one colour below is this block's own. Every value resolves to a
   `--checkout-*` token the brand declares, so the same markup is Ember
   on PepRally and champagne on Glam without a brand-specific rule.
   ════════════════════════════════════════════════════════════════════ */

.radar-band {
  --rb-bg:     var(--checkout-summary-bg, var(--checkout-bg, #14141c));
  --rb-panel:  var(--checkout-card-bg, var(--checkout-bg, #1c1c26));
  --rb-text:   var(--checkout-text, #ffffff);
  --rb-muted:  var(--checkout-muted, #94a3b8);
  --rb-rule:   var(--checkout-border, #2a2a35);
  --rb-accent: var(--checkout-accent, #c1470c);
  /* The FILL, which is a different question from the accent. A brand's
     accent is chosen to be seen; a fill has to carry text on top of it.
     PepRally's #E8550F carries white at 3.66:1 and fails AA; its
     --cta-accent #C1470C carries it at 5.01:1. */
  --rb-cta:    var(--cta-accent, var(--checkout-accent, #c1470c));
  /* The ON-FILL colour, and the one literal in this block.
   *
   * `--checkout-text` is the PAGE's text colour, and on the four light
   * brands it is a dark ink — #111111 on MyPeptides, #2C2018 on Glam.
   * Painting that on a saturated fill measures 1.97:1 and 2.86:1: the
   * invisible-text defect, reintroduced by reaching for the nearest
   * plausible token. The first draft of this file did exactly that and
   * the guard beside it caught it.
   *
   * White is not a brand decision here, it is the contrast pair
   * `--cta-accent` was chosen for. Measured against every brand's fill:
   * PepRally 5.01, Glam 5.54, MyPeptides 9.60, SurfPeptides 4.90,
   * BacWater 9.44. All AA. A test reads this value out of this file and
   * re-measures it per brand, so a brand changing its accent fails in
   * CI rather than in front of a customer. */
  --rb-cta-text: #ffffff;
  --rb-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  display: block;
  padding: 40px 20px;
  background: var(--rb-bg);
  border-top: 1px solid var(--rb-rule);
  border-bottom: 1px solid var(--rb-rule);
}

.radar-band .radar-band__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.radar-band .radar-band__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--rb-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-accent);
}

.radar-band .radar-band__mark {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--rb-accent);
}

/* Coverage LEADS. It is a count of our own database — always true,
   always renderable, and the number that makes this look like an
   operation rather than a spreadsheet. The per-dose field beneath it is
   a narrower fact and reads as the whole thing when it goes first. */
.radar-band .radar-band__lede {
  margin: 0;
  font-size: clamp(21px, 2.9vw, 30px);
  line-height: 1.26;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--rb-text);
}

.radar-band .radar-band__sub {
  margin: 12px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rb-muted);
}

.radar-band .radar-band__item {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.radar-band .radar-band__compound {
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-text);
}

/* The generic name the market prints, beside our own word for it.
   Without this the heading is a page about a product the reader cannot
   look up anywhere else. */
.radar-band .radar-band__generic {
  font-family: var(--rb-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rb-muted);
}

.radar-band .radar-band__panel {
  padding: 22px 24px;
  background: var(--rb-panel);
  border: 1px solid var(--rb-rule);
  border-radius: 12px;
}

.radar-band .radar-band__verdict {
  margin: 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.45;
  color: var(--rb-text);
}

.radar-band .radar-band__position {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rb-muted);
  font-variant-numeric: tabular-nums;
}

.radar-band .radar-band__asof {
  margin: 16px 0 0;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

.radar-band .radar-band__actions {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.radar-band a.radar-band__cta {
  display: inline-block;
  padding: 14px 26px;
  background: var(--rb-cta);
  border: 1px solid var(--rb-cta);
  border-radius: 4px;
  color: var(--rb-cta-text);
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.radar-band a.radar-band__cta--ghost {
  background: transparent;
  border-color: var(--rb-rule);
  color: var(--rb-text);
}

.radar-band :focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .radar-band { padding: 58px 24px; }

  /* Two explicit columns, declared here and nowhere else. No named
     grid areas anywhere in this file — a `grid-area` is a REFERENCE,
     and a reference to something declared only inside a media query
     resolves to nothing at the base width rather than complaining,
     which stacked an entire auth form into row 1 at 390px. */
  .radar-band .radar-band__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-site *,
  .radar-site *::before,
  .radar-site *::after,
  .radar-band *,
  .radar-band *::before,
  .radar-band *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}