/* The reference layer's page styles (/benchmarks/*).
 *
 * These pages are server-rendered by a Pages Function, so the markup lives in
 * src/lib/aeo/reference-render.ts while the styling lives here, under src/app,
 * where the brand checks and the asset pipeline can see it.
 *
 * Design position: this is not a new look. The reference layer is the same
 * broadsheet register as the State of Shopify report, deliberately, because a
 * reader who arrives from a quoted figure should land somewhere that reads like
 * the same publication. Every colour and face resolves through the locked
 * --oddly-* token contract; there are no page-local hexes.
 *
 * The one element these pages own is the RANGE BAR. Every published figure is a
 * distribution, not a point, and a median printed alone invites a reader to
 * treat it as the price. The bar draws the interquartile range with the median
 * marked inside it, so the spread is the first thing the eye gets. It encodes
 * exactly what the data says and nothing it does not: two quartile bounds and a
 * middle, no invented curve between them.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.reference {
  font-family: var(--oddly-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--oddly-ink);
  background: var(--oddly-canvas);
}

.rf-main { max-width: 860px; margin: 0 auto; padding: 56px 24px 96px; }

.rf-crumb { font-size: 14px; color: var(--oddly-ink-secondary); margin-bottom: 20px; }
.rf-crumb a { color: var(--oddly-teal); text-decoration: none; }
.rf-crumb a:hover { text-decoration: underline; }

.rf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oddly-teal); background: var(--oddly-teal-wash);
  padding: 5px 12px; border-radius: var(--oddly-radius-pill); margin-bottom: 18px;
}

.rf-main h1 {
  font-family: var(--oddly-font-serif); font-optical-sizing: auto;
  font-size: clamp(30px, 4.6vw, 46px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.08;
  margin: 0 0 18px; color: var(--oddly-ink);
}

.rf-lede {
  font-size: clamp(17px, 2.2vw, 20px); color: var(--oddly-ink-secondary);
  line-height: 1.6; margin: 0 0 24px; max-width: 62ch;
}

.rf-main h2 {
  font-family: var(--oddly-font-serif); font-optical-sizing: auto;
  font-size: clamp(21px, 2.6vw, 28px); font-weight: 500;
  letter-spacing: -0.015em; margin: 52px 0 6px; color: var(--oddly-ink);
}
.rf-note { font-size: 14px; color: var(--oddly-ink-secondary); margin: 0 0 18px; }

/* The answer block: the sentence this page exists to be quoted for. It sits
 * above everything else because that is the order a reader and a crawler both
 * want it in. */
.rf-answer {
  margin: 4px 0 8px; padding: 22px 24px;
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-left: 3px solid var(--oddly-teal); border-radius: var(--oddly-radius-lg);
}
.rf-answer p {
  margin: 0; font-family: var(--oddly-font-serif);
  font-size: clamp(18px, 2.4vw, 23px); line-height: 1.45;
  font-weight: 500; letter-spacing: -0.01em; color: var(--oddly-ink);
}
.rf-answer .rf-prov {
  display: block; margin-top: 12px;
  font-family: var(--oddly-font-sans); font-size: 12.5px;
  color: var(--oddly-ink-secondary); letter-spacing: 0.01em;
}

/* The range bar. Left edge is p25, right edge is p75, the notch is the median.
 * Widths come from the server as inline percentages of the row's own scale. */
.rf-range { margin-top: 12px; }
.rf-range-track {
  position: relative; height: 10px; border-radius: var(--oddly-radius-pill);
  background: var(--oddly-surface-sunken); overflow: hidden;
}
.rf-range-span {
  position: absolute; top: 0; bottom: 0;
  background: var(--oddly-teal-wash); border-radius: var(--oddly-radius-pill);
}
.rf-range-median {
  position: absolute; top: -3px; width: 3px; height: 16px;
  background: var(--oddly-teal); border-radius: 2px;
}
.rf-range-scale {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 12px; color: var(--oddly-ink-secondary);
}

/* Figure rows: one observed distribution per row, quotable as it stands. */
.rf-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rf-row {
  padding: 16px 18px; border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md); background: var(--oddly-surface);
}
.rf-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; justify-content: space-between; }
.rf-row-name { font-size: 16px; font-weight: 600; color: var(--oddly-ink); }
.rf-row-name a { color: var(--oddly-ink); text-decoration: none; }
.rf-row-name a:hover { color: var(--oddly-teal); text-decoration: underline; }
.rf-row-value { font-family: var(--oddly-font-serif); font-size: 22px; font-weight: 500; color: var(--oddly-ink); }
.rf-row-prov { display: block; margin-top: 10px; font-size: 12.5px; color: var(--oddly-ink-secondary); }

.rf-empty {
  padding: 16px 18px; border: 1px dashed var(--oddly-border);
  border-radius: var(--oddly-radius-md); color: var(--oddly-ink-secondary); font-size: 15px;
}

/* Index: the register of every published page. */
.rf-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rf-card {
  padding: 18px; border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md); background: var(--oddly-surface);
}
.rf-card a { color: var(--oddly-ink); text-decoration: none; font-weight: 600; font-size: 17px; }
.rf-card a:hover { color: var(--oddly-teal); text-decoration: underline; }
.rf-card .rf-card-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--oddly-ink-secondary); }

.rf-links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rf-links a { color: var(--oddly-teal); text-decoration: none; font-size: 15px; }
.rf-links a:hover { text-decoration: underline; }

/* Method + provenance block. */
.rf-method {
  margin-top: 56px; padding: 24px; background: var(--oddly-surface);
  border: 1px solid var(--oddly-border); border-radius: var(--oddly-radius-lg);
}
.rf-method h2 { margin-top: 0; }
.rf-method ul { padding-left: 20px; margin: 0; }
.rf-method li { font-size: 15px; color: var(--oddly-ink-secondary); line-height: 1.7; margin-bottom: 8px; }
.rf-method a { color: var(--oddly-teal); }
.rf-updated { font-size: 13px; color: var(--oddly-ink-secondary); margin-top: 14px; }

/* The one call to action these pages carry. */
.rf-cta {
  margin-top: 40px; padding: 24px; border-radius: var(--oddly-radius-lg);
  background: var(--oddly-teal-wash); border: 1px solid var(--oddly-border);
}
.rf-cta h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 25px); }
.rf-cta p { margin: 0 0 16px; font-size: 15px; color: var(--oddly-ink-secondary); }
.rf-cta a.rf-button {
  display: inline-block; padding: 12px 22px; border-radius: var(--oddly-radius-pill);
  background: var(--oddly-teal); color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 15px;
}
.rf-cta a.rf-button:hover { background: var(--oddly-teal-hover); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--oddly-teal); outline-offset: 3px; border-radius: var(--oddly-radius-sm);
}

@media (max-width: 640px) {
  .rf-main { padding: 40px 18px 72px; }
  .rf-row-head { gap: 4px; }
  .rf-row-value { font-size: 20px; }
}

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