/* ===========================================================================
 * axis-page.css — extra styles unique to /axes/<axis>.html pages
 * Loaded after ch-page.css. Adds the hero-with-tint, sigil-mega, axis-radar
 * preview, sample-math card, citation list, and the orb-swatch chip.
 * =========================================================================== */

/* AXIS HERO ─ tinted gradient panel with mega sigil left, copy right */
.ax-hero {
  position: relative; padding: 96px 0 64px; overflow: hidden;
  background: linear-gradient(135deg, var(--ax-tint-soft) 0%, transparent 70%);
  border-bottom: 1px solid var(--rule);
}
.ax-hero-inner { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 880px) { .ax-hero-inner { grid-template-columns: 1fr; gap: 32px; } }
.ax-mega-sigil {
  width: 240px; height: 240px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 500 92px var(--font-mono); letter-spacing: 0.06em;
  color: var(--ax-tint); border: 2px solid var(--ax-tint);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--ax-tint-soft), 0 24px 64px var(--ax-tint-soft);
  position: relative;
}
.ax-mega-sigil::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px dashed var(--ax-tint); opacity: 0.4;
}
.ax-hero-eyebrow { font: 500 12px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ax-tint); margin: 0 0 16px; }
.ax-hero h1 { font: 500 64px/1.05 var(--font-display); letter-spacing: -0.025em; margin: 0 0 20px; max-width: 14ch; text-wrap: balance; }
.ax-hero h1 em { font-style: italic; color: var(--ax-tint); font-weight: 400; }
.ax-hero-lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }

/* MINI ID-ROW UNDER HERO ─ at-a-glance specs */
.ax-idrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); margin-top: 36px; overflow: hidden; }
@media (max-width: 880px) { .ax-idrow { grid-template-columns: repeat(2, 1fr); } }
.ax-id-cell { padding: 18px 20px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.ax-id-cell:last-child { border-right: none; }
.ax-id-lbl { font: 500 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.ax-id-val { font: 500 16px var(--font-display); color: var(--ink); }

/* SECTION ANCHOR HEADER (numbered chapter) */
.ax-chapter {
  font: 500 11px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ax-tint); padding: 4px 12px; border-radius: 999px;
  background: var(--ax-tint-soft); display: inline-block;
}
.ax-chapter-num { color: var(--ink-3); margin-right: 8px; }

/* SIGNAL TABLE — what we measure */
.ax-signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .ax-signals { grid-template-columns: 1fr; } }
.ax-signal {
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ax-signal-name { font: 500 15px/1.3 var(--font-sans); color: var(--ink); }
.ax-signal-source { font: 500 11px var(--font-mono); color: var(--ax-tint); letter-spacing: 0.1em; text-transform: uppercase; }
.ax-signal-desc { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* SAMPLE-MATH CARD — worked CH calc */
.ax-mathcard { padding: 32px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 880px) { .ax-mathcard { grid-template-columns: 1fr; } }
.ax-math-block h4 { font: 500 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.ax-math-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--rule); font: 500 14px var(--font-mono); }
.ax-math-row:last-child { border-bottom: none; padding-top: 16px; border-top: 2px solid var(--ax-tint); margin-top: 8px; }
.ax-math-row .ax-math-lbl { color: var(--ink-2); }
.ax-math-row .ax-math-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-math-row.is-result .ax-math-val { color: var(--ax-tint); font-size: 18px; }

/* DAY-BY-DAY (lift program) — 7-column week */
.ax-weekgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 880px) { .ax-weekgrid { grid-template-columns: repeat(2, 1fr); } }
.ax-day { padding: 14px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.ax-day-name { font: 500 11px var(--font-mono); color: var(--ax-tint); letter-spacing: 0.12em; text-transform: uppercase; }
.ax-day-action { font-size: 13px; line-height: 1.4; color: var(--ink); }
.ax-day-pay { font: 500 11px var(--font-mono); color: var(--ink-3); margin-top: auto; }

/* PAY LADDER — what HCR each verified action pays */
.ax-payladder { display: grid; grid-template-columns: 1fr 100px 100px; gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.ax-pay-header, .ax-pay-row { display: contents; }
.ax-pay-header > div { font: 500 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.ax-pay-row > div { padding: 14px 16px; border-bottom: 1px solid var(--rule); font: 500 14px var(--font-sans); color: var(--ink); }
.ax-pay-row:last-child > div { border-bottom: none; }
.ax-pay-row > div:nth-child(2), .ax-pay-row > div:nth-child(3) { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.ax-pay-row > div:nth-child(2) { color: var(--ax-tint); font-weight: 600; }

/* CITATIONS / LITERATURE */
.ax-cites { display: flex; flex-direction: column; gap: 14px; counter-reset: cite; }
.ax-cite { padding: 16px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; counter-increment: cite; position: relative; padding-left: 56px; }
.ax-cite::before { content: counter(cite, decimal-leading-zero); position: absolute; left: 18px; top: 18px; font: 500 11px var(--font-mono); color: var(--ax-tint); letter-spacing: 0.1em; }
.ax-cite-title { font: 500 14px/1.4 var(--font-sans); color: var(--ink); margin: 0 0 4px; }
.ax-cite-meta { font: 500 12px var(--font-mono); color: var(--ink-3); }

/* CASE STUDY MINI */
.ax-case { padding: 28px 32px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .ax-case { grid-template-columns: 1fr; } }
.ax-case-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--ax-tint-soft); border: 2px solid var(--ax-tint); display: flex; align-items: center; justify-content: center; font: 500 28px var(--font-display); color: var(--ax-tint); }
.ax-case-name { font: 500 17px var(--font-display); color: var(--ink); margin: 0 0 4px; }
.ax-case-meta { font: 500 11px var(--font-mono); color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.ax-case-quote { font: italic 18px/1.5 var(--font-display); color: var(--ink-2); margin: 0 0 12px; }
.ax-case-result { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rule); }
.ax-case-stat { display: flex; flex-direction: column; gap: 2px; }
.ax-case-stat-val { font: 500 22px var(--font-display); color: var(--ax-tint); line-height: 1; }
.ax-case-stat-lbl { font: 500 10px var(--font-mono); color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; }

/* AXIS NAV (jump between axes at top) */
.ax-axisnav {
  display: flex; gap: 4px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px; max-width: max-content; margin: 0 auto;
  position: sticky; top: 80px; z-index: 40; box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  flex-wrap: wrap; justify-content: center;
}
.ax-axisnav a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 11px var(--font-mono); color: var(--ink-2); text-decoration: none;
  border: 1px solid transparent; transition: all 120ms;
}
.ax-axisnav a:hover { background: var(--surface-2); }
.ax-axisnav a.is-current { background: var(--ax-tint); color: #fff; border-color: var(--ax-tint); }

/* RESEARCHER VIEW — what HCC data lives here */
.ax-research-card { padding: 28px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.ax-research-card .ch-card-label { color: var(--ax-tint); }
.ax-research-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 12px; }
@media (max-width: 720px) { .ax-research-fields { grid-template-columns: 1fr; } }
.ax-research-field { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--rule); font: 500 13px var(--font-mono); }
.ax-research-field-name { color: var(--ink); }
.ax-research-field-type { color: var(--ax-tint); margin-left: auto; }

/* CLINICAL PROTOCOL CARD */
.ax-protocol { padding: 28px 32px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.ax-protocol h3 { font: 500 22px/1.2 var(--font-display); margin: 0 0 16px; }
.ax-protocol ol { padding-left: 22px; margin: 0; }
.ax-protocol ol li { padding: 4px 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ax-protocol ol li::marker { color: var(--ax-tint); font-weight: 600; }

/* CTA BAR (per axis) */
.ax-ctabar {
  padding: 48px; background: var(--ax-tint-soft); border-radius: 16px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center;
}
@media (max-width: 880px) { .ax-ctabar { grid-template-columns: 1fr; padding: 32px; } }
.ax-ctabar h3 { font: 500 28px/1.2 var(--font-display); margin: 0 0 8px; color: var(--ink); }
.ax-ctabar p { color: var(--ink-2); margin: 0; line-height: 1.55; }
.ax-ctabar .ch-actions { justify-content: flex-end; }
@media (max-width: 880px) { .ax-ctabar .ch-actions { justify-content: flex-start; } }
.ax-ctabar .ch-btn--primary { background: var(--ax-tint); color: #fff; }
.ax-ctabar .ch-btn--primary:hover { background: var(--ink); }

/* SIBLING LINKS (other axes) */
.ax-siblings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
@media (max-width: 880px) { .ax-siblings { grid-template-columns: repeat(2, 1fr); } }
.ax-sibling {
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  text-decoration: none; display: flex; align-items: center; gap: 12px;
  transition: all 120ms;
}
.ax-sibling:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.ax-sibling-mini { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 10px var(--font-mono); border: 1px solid currentColor; }
.ax-sibling-name { font: 500 13px var(--font-sans); color: var(--ink); flex: 1; }
.ax-sibling-arrow { color: var(--ink-3); font-size: 14px; }