/* research.css -- the research pages of the training hub (/ai-ml/training/about/ and each
   study's research page). Loaded after /styles.css, whose tokens, page head, numbers band,
   folds and pager these pages use; this file adds the research navigation, the status pills,
   the figures and the tables. CSP style-src 'self': every style lives here.
   Against both surfaces (#f7f5f0 day, #0f1722 night), each pair of adjacent chart colors meets
   the minimum color difference for colorblind and for normal vision.
   SDE 2026-10-04  spacing for the token study's new research lines (one fold per line). */

:root {
  --rc-a: #00879c;    /* teal: the series under test, caught, met, guided */
  --rc-a2: #8ccbd4;   /* teal, lighter step: partly met */
  --rc-b: #d9603a;    /* coral: the dense control, 60 minutes, not met */
  --rc-c: #c88a04;    /* amber: right sentence, wrong reason */
  --rc-d: #8a63d2;    /* violet: by coincidence, being read */
  --rc-n: #6b6a66;    /* neutral mark: the plain table, the unguided control */
  --rc-n2: #b7b1a5;   /* gray fill: checked and passed */
  --rc-n3: #e2ddd2;   /* pale fill: never checked, not yet read */
  --rc-surface: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rc-a: #169fb0;
    --rc-a2: #1d5f6a;
    --rc-b: #e0694f;
    --rc-c: #b8841c;
    --rc-d: #9a7fe6;
    --rc-n: #8a99ab;
    --rc-n2: #4b5b6e;
    --rc-n3: #27354a;
  }
}
:root[data-theme="dark"] {
  --rc-a: #169fb0;
  --rc-a2: #1d5f6a;
  --rc-b: #e0694f;
  --rc-c: #b8841c;
  --rc-d: #9a7fe6;
  --rc-n: #8a99ab;
  --rc-n2: #4b5b6e;
  --rc-n3: #27354a;
}

/* the Research link in the site header is the current section */
[data-page="research"] .nav-research {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* ---- research navigation: equal cells, one row on wide screens, two rows of three on phones ---- */

.rh-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 1.25rem 0 0;
  border-bottom: 1px solid var(--rule);
}
.rh-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rh-nav a:hover { color: var(--text); }
.rh-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---- status line under the lead ---- */

.rh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 1.25rem;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.rh-meta .rh-state + .rh-state { margin-left: -10px; }
.rh-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.rh-live:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.rh-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.rh-state::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--rc-n); }
.rh-state-running::before { background: var(--rc-a); }
.rh-state-done::before { background: var(--k-mint); }
.rh-state-proposed::before { background: var(--rc-d); }
.rh-state-disproved::before { background: var(--rc-b); }
.rh-state-review::before { background: var(--lamp); }

/* ---- everything after the head sits in the main column, like the case studies ---- */

main.rh > :is(.rh-figs, .rh-sect) { margin-left: var(--col-start); }
main.rh .page-head { padding-top: clamp(1.75rem, 4vw, 3rem); }
main.rh > .numbers-band + .rh-sect { margin-top: 0; }
main.rh > .page-head + .rh-sect { margin-top: 0.25rem; }
main.rh > .rh-more-folds { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
main.rh > .rh-figs { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 760px; }

/* ---- figures ---- */

.rh-fig { margin: 0; }
.rh-fig + .rh-fig { margin-top: clamp(2rem, 4vw, 2.75rem); }
.rh-fig > figcaption {
  max-width: 44rem;
  margin-top: 0.75rem;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.rh-fig > figcaption a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rh-fig-n { color: var(--text); font-weight: 600; }
.rh-fig-data { margin-top: 0.9rem; }
.rh-fig-data > summary { font-size: 0.875rem; }

svg.rc { display: block; width: 100%; height: auto; overflow: visible; }
svg.rc-narrow { display: none; max-width: 420px; }
@media (max-width: 599.98px) {
  svg.rc-wide { display: none; }
  svg.rc-narrow { display: block; }
}

.rc text { font-family: var(--sans); }
.rc .rc-title { fill: var(--text); font-size: 12.5px; font-weight: 600; }
.rc .rc-lab { fill: var(--text-2); font-size: 11.5px; }
.rc .rc-lab-s { font-size: 11px; }
.rc .rc-val { fill: var(--text); font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.rc .rc-tick { fill: var(--text-3); font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.rc .rc-axt { fill: var(--text-2); font-size: 11.5px; }
.rc .rc-leg { fill: var(--text-2); font-size: 11.5px; }
.rc .rc-note { fill: var(--text-3); font-size: 11px; font-style: italic; }
.rc .rc-in { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rc .rc-in-a, .rc .rc-in-d, .rc .rc-in-b { fill: #ffffff; }
.rc .rc-in-c, .rc .rc-in-n2, .rc .rc-in-n3, .rc .rc-in-a2 { fill: var(--text); }

.rc .rc-grid { stroke: var(--rule); stroke-width: 1; }
.rc .rc-axis { stroke: var(--rule-strong); stroke-width: 1; }
.rc .rc-zero { stroke: var(--rule-strong); stroke-width: 1.25; }
.rc .rc-ref { stroke: var(--rc-n); stroke-width: 1.25; stroke-dasharray: 3 3; }
.rc .rc-link { stroke: var(--rc-n2); stroke-width: 2; stroke-linecap: round; }
.rc .rc-range, .rc .rc-ci { stroke-width: 2; stroke-linecap: round; fill: none; }
.rc .rc-a-s { stroke: var(--rc-a); }
.rc .rc-b-s { stroke: var(--rc-b); }
.rc .rc-n-s { stroke: var(--rc-n); }
.rc .rc-seed { fill: var(--rc-surface); stroke-width: 1.5; }
.rc .rc-mean { stroke: var(--rc-surface); stroke-width: 2; }
.rc .rc-hit { fill: transparent; stroke: none; }
.rc .rc-mark:hover .rc-mean, .rc .rc-mark:hover .rc-seed { stroke-width: 3; }

.rc .rc-a { fill: var(--rc-a); }
.rc .rc-a2 { fill: var(--rc-a2); }
.rc .rc-b { fill: var(--rc-b); }
.rc .rc-c { fill: var(--rc-c); }
.rc .rc-d { fill: var(--rc-d); }
.rc .rc-n { fill: var(--rc-n); }
.rc .rc-n2 { fill: var(--rc-n2); }
.rc .rc-n3 { fill: var(--rc-n3); }
.rc rect:hover { opacity: 0.85; }

/* ---- tables (the numbers behind each figure) ---- */

.rh-table-wrap { max-width: 100%; border-top: 1px solid var(--rule-strong); }
.rh-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.rh-table th, .rh-table td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.rh-table thead th { color: var(--text-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.rh-table tbody th { font-weight: 600; color: var(--text); }
.rh-table tbody th small,
.rh-table td small { display: block; margin-top: 2px; color: var(--text-3); font-weight: 400; font-size: 0.8125rem; }
.rh-table td { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-2); }
.rh-table .rh-total th, .rh-table .rh-total td { color: var(--text); font-weight: 600; }
.fold-body > .rh-table-wrap { max-width: none; margin: 0.4rem 0 1rem; }

/* wide tables become label and value lines on phones, so nothing scrolls sideways */
@media (max-width: 639.98px) {
  .rh-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .rh-table, .rh-table tbody, .rh-table tr, .rh-table th, .rh-table td { display: block; width: 100%; }
  .rh-table tr { padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .rh-table th, .rh-table td { padding: 2px 0; border: 0; }
  .rh-table td[data-h]::before { content: attr(data-h) ": "; color: var(--text-3); font-family: var(--sans); }
}

/* ---- prose additions ---- */

.rh-key { margin: 0 0 1em; }
.rh-key dt { margin-top: 0.7em; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.rh-key dt:first-child { margin-top: 0; }
.rh-key dd { margin: 0.15em 0 0; color: var(--read-2); }
.prose .rh-key dd { font-size: 1rem; line-height: 1.55; }

.rh-study { margin: 1.1em 0; padding-left: 14px; border-left: 2px solid var(--rule); }
.rh-study > p { margin: 0 0 0.6em; }
.rh-study-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--sans); font-size: 1rem; }
.rh-note { color: var(--k-amber); font-family: var(--sans) !important; font-size: 0.875rem !important; }

/* ---- the token study's new research lines: a short lead, then one fold per line ---- */

.rh-line-folds { margin-top: 1.1rem; }
.rh-line dd > :is(ol, ul) { margin: 0.25em 0 0; }
.rh-line dd li { margin: 0.3em 0; }

/* ---- the overview's sections ---- */

.rh-sect {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  max-width: 48rem;
}
.rh-h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.rh-sect-body > p,
.rh-sect-body dd {
  color: var(--read-2);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.rh-sect-body > p { margin: 0 0 0.9rem; max-width: 40em; }
.rh-sect-body > :last-child { margin-bottom: 0; }
.rh-key-wide dd { max-width: 40em; }

.rh-lines, .rh-next { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.rh-lines > li, .rh-next > li { border-bottom: 1px solid var(--rule); }
.rh-lines > li > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  padding: 14px 0 15px;
  color: var(--text);
  text-decoration: none;
}
.rh-next > li { display: grid; gap: 6px; padding: 14px 0 15px; }
.rh-line-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; grid-column: 1 / -1; }
.rh-line-top strong {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: balance;
}
.rh-line-text {
  max-width: 40em;
  color: var(--read-2);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.rh-line-date {
  align-self: end;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
}
.rh-lines > li > a:hover strong { color: var(--accent); }
.rh-lines > li > a:focus-visible { outline-offset: -2px; }
.rh-more { display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px; color: var(--accent); font-family: var(--sans); font-weight: 600; text-decoration: none; }
.rh-more:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .rh-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rh-nav a:nth-child(-n+3) { border-bottom-color: var(--rule); }
  .rh-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .rh-lines > li > a { grid-template-columns: minmax(0, 1fr); }
  .rh-line-date { align-self: start; }
}

/* paragraphs balance their last line where the browser can; the build also joins each block's last two words */
main.rh :is(p, dd, li, figcaption, th, td, .rh-line-text) { text-wrap: pretty; }