/* range-medical.com — the site's own page parts in the Range Clinics design
   (owner, 2026-10-23: the rangeclinics.com design on every range-medical.com
   page, the way rangesanclemente.com was done the day before with
   sc-skin.css). Loaded by components/clinics/NewportLayout.jsx in `skin` mode,
   AFTER styles/globals.css, rails.css and /clinics/site.css, and scoped to
   `.rails-skin`, the wrapper the frame puts round a page built on the old
   parts (the tx-* explainer bands, svc-* service pages, rh-* bands, the
   .range-mono layer at the end of globals.css). It maps those parts onto the
   Brand Rails: near-black, white, mist bands, Sun Day Red on the one action,
   Archivo 500 uppercase headlines, DejaVu Sans Mono labels, thin rules,
   square corners.

   Tokens only: every colour is a --rails-* value (rails.css) or one of
   site.css's own (--mist, --ink-soft, --rule-light, --gray-num). Never type a
   new hex. The page's words, links, prices, forms and tracking are untouched.

   Left alone on purpose: the patient guides (they keep the house guide frame,
   components/house/GuideChrome.jsx), and anything a named staff member asked
   for in a colour (CLAUDE.md, "A Palette Pass Never Repaints A Colour Staff
   Asked For") — nothing here touches note ink, the highlighter palette or the
   --rm-note-* tokens, which live only in the staff app. */

/* ── The old system's tokens, re-pointed at the rails ─────────────────────── */
.rails-skin {
  --black: var(--rails-black);
  --dark-gray: var(--ink-soft);
  --mid-gray: var(--ink-soft);
  --accent: var(--ink-soft);
  --rule: var(--rule-light);
  --bg-light: var(--mist);
  --color-bg: var(--rails-white);
  --color-bg-alt: var(--mist);
  --color-surface: var(--rails-white);
  --color-dark: var(--rails-black);
  --color-text: var(--rails-black);
  --color-text-secondary: var(--ink-soft);
  --color-text-muted: var(--ink-soft);
  --color-accent: var(--rails-black);
  --color-accent-hover: var(--ink-soft);
  --color-border: var(--rule-light);
  background: var(--rails-white);
  color: var(--rails-black);
  font-family: var(--f-body);
}

/* site.css sets bare p / img / section for the new pages. On an old page the
   old rules must keep deciding, so the bare rules step back to the browser's
   own (an old page's class rules still win, being more specific). */
body :where(.rails-skin) p { margin-block: 1em; max-width: none; color: var(--ink-soft); line-height: 1.65; }
:where(.rails-skin) img { display: revert; }
:where(.rails-skin) section { padding-block: revert; }
:where(.rails-skin) .hero { padding-block: revert; }
:where(.rails-skin) .result { background: revert; color: revert; padding: revert; display: revert; gap: revert; }
:where(.rails-skin) .result p { color: revert; }
:where(.rails-skin) .rule { border: revert; margin: revert; }

/* ── Type ──────────────────────────────────────────────────────────────────── */
/* Anchored on Next's root (#__next) so a page's own scoped styles (styled-jsx
   gives `.eo-hero.jsx-1 h1.jsx-1`, three classes deep) cannot outrank the
   rails type, labels or buttons. Still tokens only. */
#__next .rails-skin :is(h1, h2, h3) {
  font-family: var(--f-head);
  font-weight: 500;
  text-transform: uppercase;
  text-wrap: balance;
}
#__next .rails-skin h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1.04; letter-spacing: -0.02em; }
#__next .rails-skin h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.015em; }
#__next .rails-skin h3 { line-height: 1.14; letter-spacing: -0.01em; }
.rails-skin h4 { font-family: var(--f-body); font-weight: 600; text-transform: none; }
.rails-skin :is(h1, h2, h3) em { font-style: normal; }
.rails-skin :is(strong, b) { font-weight: 600; }

/* Section labels (eyebrows): mono, the one red mark on a light band, white on
   black. The old 34px lead-in rule comes off — the rails label stands alone. */
#__next .rails-skin :is(.tx-label, .v2-label, .rh-eyebrow, .svc-label, .section-label, .hero-label, .eyebrow) {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rails-red);
}
#__next .rails-skin :is(.tx-label, .v2-label, .rh-eyebrow, .svc-label, .section-label, .hero-label, .eyebrow)::before { content: none; display: none; }
#__next .rails-skin :is(.tx-section-dark, .tx-cta, .section-dark, .rh-dark, .svc-dark, .dark) :is(.tx-label, .v2-label, .rh-eyebrow, .svc-label, .section-label, .eyebrow) { color: var(--rails-white); }

/* Numbers and small labels: mono, gray (decoration). */
.rails-skin :is(.tx-step-num, .rh-hero-step-num, .step-num, .tx-num, .index, .rh-index, .svc-num) {
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gray-num);
}

/* ── Bands ─────────────────────────────────────────────────────────────────── */
.rails-skin :is(.tx-section-alt, .tx-section-light, .section-alt, .svc-section-alt, .bg-light) { background: var(--mist); }
.rails-skin :is(.tx-section-dark, .tx-cta, .section-dark, .rh-dark, .final-cta) { background: var(--rails-black); }
.rails-skin [class*="shadow"] { box-shadow: none; }

/* ── Buttons: the one action is Sun Day Red ────────────────────────────────── */
#__next .rails-skin :is(.tx-btn, .tx-book-btn, .btn-primary, .rh-btn-dark, .svc-btn-book, .svc-btn-start,
  .loc-btn-primary, .fq-btn-primary, .g-btn-primary, .wl-btn-primary, .ivb-btn, .al-btn, .gc-btn, .fs-btn,
  .of-btn, .lm-btn, .learn-cta-btn, .rm-cta-btn, .tx-book-select-btn, .tx-book-choice-cta, .ty-home-btn,
  .vr-submit-btn, .fs-link-btn, .ct-btn, .gv-btn, .join-submit, .su-submit, .rm-next):not(:is(.tx-btn-outline, .tx-book-btn--outline, [disabled])) {
  background: var(--rails-red);
  border: 1.5px solid var(--rails-red);
  color: var(--rails-white);
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
}
#__next .rails-skin :is(.tx-btn, .tx-book-btn, .btn-primary, .rh-btn-dark, .svc-btn-book, .svc-btn-start,
  .loc-btn-primary, .fq-btn-primary, .g-btn-primary, .wl-btn-primary, .ivb-btn, .al-btn, .gc-btn, .fs-btn,
  .of-btn, .lm-btn, .learn-cta-btn, .rm-cta-btn, .tx-book-select-btn, .tx-book-choice-cta, .ty-home-btn,
  .vr-submit-btn, .fs-link-btn, .ct-btn, .gv-btn, .join-submit, .su-submit, .rm-next):not(:is(.tx-btn-outline, .tx-book-btn--outline, [disabled])):hover {
  background: var(--rails-red-deep);
  border-color: var(--rails-red-deep);
  color: var(--rails-white);
}

/* Second actions: an outline, black on light, white on dark. */
#__next .rails-skin :is(.tx-btn-outline, .tx-book-btn--outline, .rh-btn-ghost, .g-btn-outline, .wl-btn-outline,
  .v2-btn-outline, .fs-link-btn-outline, .btn-outline) {
  background: transparent;
  border: 1.5px solid var(--rails-black);
  color: var(--rails-black);
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#__next .rails-skin :is(.tx-section-dark, .tx-cta, .section-dark, .final-cta) :is(.tx-btn-outline, .rh-btn-ghost, .btn-outline-white, .rh-btn-light) {
  border-color: var(--rails-white);
  color: var(--rails-white);
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.rails-skin :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { border-radius: 0; }
.rails-skin :is(input, select, textarea):focus-visible { outline: 2px solid var(--rails-red); outline-offset: 2px; }

/* ── The trust strip under the header: white and mono, the way San Clemente's
   reads, so the frame's black announcement strip is the only black bar. ──── */
#__next .rails-skin .trust-bar { background: var(--rails-white); color: var(--rails-black); border-bottom: 1px solid var(--rule-light); }
#__next .rails-skin .trust-bar .trust-item { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-color: var(--rule-light); }
#__next .rails-skin .trust-bar .trust-rating { color: var(--rails-black); }

/* A closing black band never runs straight into the black footer. */
main:has(.rails-skin) + footer.site { border-top: 1px solid var(--ink-soft); }

/* The unregistered peptide guides (ara-290, epithalon, follistatin, hcg,
   pt-141, selank, semax, thymosin-alpha-1) carry .guide-editorial, whose
   heading rule is !important in globals.css; only an !important answers it. */
#__next .rails-skin .guide-editorial :is(h1, h2, h3) {
  font-family: var(--f-head) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.015em !important;
}