/* maths.css — "Show me the equations": static MathML cards (no JS). Fragment: _fragments/maths.html.
   Every selector is scoped under .rc-maths. Formulas follow research/maths.md (E1–E8, code over SPEC). */

.rc-maths { display: grid; gap: clamp(28px, 4vw, 48px); }

/* ---------- The card grid: 12 columns on desktop, one column below 960 px ---------- */
.rc-maths .rc-maths__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; }
.rc-maths .rc-maths__card { grid-column: span 6; }
.rc-maths .rc-maths__card--5 { grid-column: span 5; }
.rc-maths .rc-maths__card--7 { grid-column: span 7; }
.rc-maths .rc-maths__card--12 { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .rc-maths .rc-maths__card, .rc-maths .rc-maths__card--5, .rc-maths .rc-maths__card--7 { grid-column: 1 / -1; }
}

.rc-maths .rc-maths__card {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 16px;
  padding: clamp(18px, 2.2vw, 28px);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 55%, var(--bg)));
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
/* The short amber string that marks each step (same gesture as .step::after in page.css). */
.rc-maths .rc-maths__card::before {
  content: ""; position: absolute; left: clamp(18px, 2.2vw, 28px); top: -1px; width: 36px; height: 1.5px; border-radius: 1px;
  background: var(--reference);
}

.rc-maths .rc-maths__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rc-maths .rc-maths__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--reference); }
.rc-maths .rc-maths__title { font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.005em; color: var(--text); margin-right: auto; }
.rc-maths .rc-maths__tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  padding: 3px 10px 3px 9px; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
@media (max-width: 520px) {
  .rc-maths .rc-maths__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .rc-maths .rc-maths__tag { grid-column: 2; justify-self: start; }
}
.rc-maths .rc-maths__tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--reference); }

/* ---------- The formula well: sibling of .equation in base.css, but it can hold several lines
   and scrolls sideways inside the card instead of pushing the page wide. ---------- */
.rc-maths .rc-maths__formula {
  flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  border-left: 1.5px solid var(--reference); border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--reference) 8%, transparent), color-mix(in srgb, var(--reference) 1.5%, transparent) 75%);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; container-type: inline-size;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.rc-maths .rc-maths__formula:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0 var(--radius) var(--radius) 0; }
.rc-maths .rc-maths__lines { display: grid; gap: 18px; justify-items: start; width: fit-content; min-width: 100%; padding: 22px clamp(16px, 2vw, 24px); }
.rc-maths .rc-maths__line { display: grid; gap: 7px; justify-items: start; }
/* Captions never widen the well: they wrap to its visible width and stay put while a long formula scrolls. */
.rc-maths .rc-maths__cap { position: sticky; left: clamp(16px, 2vw, 24px); max-width: calc(100cqw - 2 * clamp(16px, 2vw, 24px)); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); line-height: 1.5; }
.rc-maths .rc-maths__row { display: flex; align-items: center; gap: 12px clamp(24px, 3vw, 44px); }
.rc-maths .rc-maths__row--wrap { flex-wrap: wrap; }

.rc-maths math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; color: var(--text); }
.rc-maths .rc-maths__formula math { display: block math; width: max-content; margin: 0; font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem); line-height: 1.2; white-space: nowrap; }
.rc-maths .rc-maths__formula math.rc-maths__sm { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); }
.rc-maths .rc-maths__hl { color: var(--reference); }          /* the quantity a card is about */
.rc-maths p math, .rc-maths li math, .rc-maths td math, .rc-maths th math, .rc-maths dd math { font-size: 1.08em; color: var(--text); }

.rc-maths .rc-maths__meaning { color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; max-width: 68ch; }
.rc-maths .rc-maths__meaning strong { color: var(--text); font-weight: 650; }
.rc-maths .rc-maths__fine { color: var(--text-2); font-size: var(--step--1); line-height: 1.55; max-width: 76ch; padding-top: 14px; border-top: 1px solid var(--hairline); }
.rc-maths .rc-maths__fine b { color: var(--text); font-weight: 650; }

/* Interval families in the solver card */
.rc-maths .rc-maths__families { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0; }
.rc-maths .rc-maths__families li { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 11px; border-radius: var(--radius-chip); background: var(--surface-2); font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.rc-maths .rc-maths__families b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* Solver card: copy beside the formula on wide screens */
.rc-maths .rc-maths__body { display: grid; gap: 16px; }
@media (min-width: 961px) {
  .rc-maths .rc-maths__body--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 2.6vw, 36px); align-items: stretch; }
  .rc-maths .rc-maths__body--split > .rc-maths__aside { align-self: center; }
  .rc-maths .rc-maths__card--12 > .rc-maths__fine { max-width: none; columns: 2; column-gap: clamp(20px, 2.6vw, 36px); }
}
.rc-maths .rc-maths__body > .rc-maths__formula { min-width: 0; }
.rc-maths .rc-maths__aside { display: grid; gap: 14px; align-content: center; min-width: 0; }

/* ---------- Worked example strip ---------- */
.rc-maths .rc-maths__example {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(20px, 3vw, 40px); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #151820, #0f1116);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 50px 100px -60px rgb(0 0 0 / 0.95);
}
@media (max-width: 960px) { .rc-maths .rc-maths__example { grid-template-columns: minmax(0, 1fr); } }
.rc-maths .rc-maths__example-copy { display: grid; gap: 14px; align-content: start; justify-items: start; }
.rc-maths .rc-maths__example-title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.012em; }
.rc-maths .rc-maths__example-title em { font-style: italic; color: var(--reference); }
.rc-maths .rc-maths__example-copy p { color: var(--text-2); font-size: 0.9375rem; max-width: 46ch; }
.rc-maths .rc-maths__given { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rc-maths .rc-maths__given .chip { font-variant-numeric: tabular-nums; }
.rc-maths .rc-maths__example-copy .rc-maths__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--reference); }

.rc-maths .rc-maths__table-wrap { min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
.rc-maths .rc-maths__table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rc-maths .rc-maths__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rc-maths .rc-maths__table caption { caption-side: bottom; text-align: left; padding-top: 14px; font-size: var(--step--1); color: var(--text-2); }
.rc-maths .rc-maths__table th, .rc-maths .rc-maths__table td { padding: 9px 0 9px 14px; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.rc-maths .rc-maths__table th:first-child, .rc-maths .rc-maths__table td:first-child { padding-left: 0; text-align: left; }
.rc-maths .rc-maths__table thead th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); vertical-align: bottom; line-height: 1.35; white-space: normal; }
.rc-maths .rc-maths__table thead th small { display: block; font-size: inherit; letter-spacing: 0.04em; text-transform: none; font-weight: 550; color: var(--dim); }
.rc-maths .rc-maths__table tbody th { font-family: var(--font-mono); font-weight: 400; font-size: 0.875rem; color: var(--text-2); }
.rc-maths .rc-maths__table tbody td { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text); }
.rc-maths .rc-maths__table tbody td.rc-maths__ideal { color: var(--text-2); }
.rc-maths .rc-maths__table tbody td.rc-maths__cents { color: var(--reference); font-weight: 600; }
.rc-maths .rc-maths__table tbody tr:last-child th, .rc-maths .rc-maths__table tbody tr:last-child td { border-bottom: 0; }
/* Offset bar: width ∝ cents, full scale = 21.53 ¢ (n = 8). Decorative — the number is in the cell before it. */
.rc-maths .rc-maths__table .rc-maths__bar-cell { width: 34%; padding-left: 18px; }
.rc-maths .rc-maths__bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rc-maths .rc-maths__bar i { display: block; height: 100%; width: calc(var(--c) / 21.53 * 100%); border-radius: 3px; background: linear-gradient(90deg, var(--copper), var(--reference)); }
@media (max-width: 520px) {
  .rc-maths .rc-maths__table .rc-maths__bar-cell { display: none; }
  .rc-maths .rc-maths__table th, .rc-maths .rc-maths__table td { padding-left: 8px; }
  .rc-maths .rc-maths__table tbody th, .rc-maths .rc-maths__table tbody td { font-size: 0.8125rem; }
}
@media (max-width: 400px) {
  .rc-maths .rc-maths__table th, .rc-maths .rc-maths__table td { padding-left: 4px; }
  .rc-maths .rc-maths__table thead th { letter-spacing: 0.06em; }
  .rc-maths .rc-maths__table tbody th, .rc-maths .rc-maths__table tbody td { font-size: 0.75rem; }
}

/* ---------- Closing honesty note ---------- */
.rc-maths .rc-maths__honesty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: start; max-width: 920px; padding-left: 2px; }
.rc-maths .rc-maths__honesty::before { content: ""; width: 1.5px; align-self: stretch; grid-row: 1 / span 2; border-radius: 1px; background: linear-gradient(180deg, var(--reference), color-mix(in srgb, var(--reference) 5%, transparent)); }
.rc-maths .rc-maths__honesty p { grid-column: 2; font-size: var(--step--1); line-height: 1.65; color: var(--text-2); }
.rc-maths .rc-maths__honesty strong { color: var(--text); font-weight: 650; }
@media (max-width: 520px) { .rc-maths .rc-maths__honesty { gap: 8px 14px; } }

/* A formula wider than its well scrolls sideways; fade the edge while there is more (class set in js/main.js). */
.rc-maths .rc-maths__formula.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }