/* Cancer Policy Lab — the research pages: the study pages (/research/<study>/), and the theme
   pages, the full publication list (/research/) and /people/. These pages are built by
   scripts/build_research_pages.py (all but /people/); values come from tokens.css. */

/* ---------- Breadcrumb ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--text-small); line-height: 1.6; color: var(--color-text-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-text-muted); }
.crumbs a { color: var(--color-text); text-decoration-color: var(--color-chart-muted); }
.crumbs a:hover { text-decoration-color: currentColor; }

/* ---------- Study pages ----------
   One column, up to 52rem: the head (journal, kicker title, finding and, for the screening study,
   the update note), then the summary, the full-size chart (figure styles in site.css), the study
   and its citation, the data and how to cite, press and media (press.js), and links on. */
.study-head { padding-block: var(--space-6) var(--space-5); }
.study-head .wrap > * { max-width: 52rem; }
.study-src { margin-top: var(--space-5); font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
.study-head h1 { margin-top: var(--space-2); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 16em; }
.study-finding { margin-top: var(--space-4); font-size: var(--text-lead); line-height: var(--leading-lead); max-width: 34em; }
.study-head .update-note { margin-top: var(--space-4); }
.study-body { display: grid; gap: var(--space-6); padding-bottom: var(--section-gap); }
.study-body > * { max-width: 52rem; min-width: 0; }
.study-sec { border-top: 1px solid var(--color-rule); padding-top: var(--space-4); }
.study-sec h2, .research-h2, .section .research-h2 { font-size: var(--text-h3); line-height: var(--leading-heading); max-width: none; }
.study-sec > * + * { margin-top: var(--space-3); }
.study-sec .prose { margin-top: var(--space-3); }
.study-sec .prose > * + * { margin-top: var(--space-3); }
.study-more { font-weight: 600; }
.study-more .muted { font-weight: 400; }
.study-ref { max-width: var(--measure); overflow-wrap: break-word; }
.study-act { font-weight: 600; }
.study-data-what { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
.study-cite { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); max-width: 46em; overflow-wrap: break-word; }
.study-cite b { font-weight: 600; color: var(--color-text); }
/* The press section: press.js draws its card with the heading inside. */
.study-press { border-top: 0; padding-top: 0; }
.study-press .press-h { font-family: var(--font-serif); font-size: var(--text-h3); line-height: var(--leading-heading); }
.study-press .press-card { padding: var(--space-5); }
/* The photo stays at most 480px wide here (its file is 720px), so it is never enlarged. */
.study-press .press-photo { max-width: 30rem; }
.study-next ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-weight: 600; }
.study-next { border-top: 1px solid var(--color-rule); padding-top: var(--space-4); }
@media (min-width: 64rem) { .study-head { padding-top: var(--space-7); } }

/* ---------- Research index and theme pages ---------- */
.research-head { padding-block: var(--space-6) var(--space-5); }
.research-head h1 { margin-top: var(--space-2); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 18em; }
.research-head .crumbs + .eyebrow { margin-top: var(--space-5); }
.research-head .lead { margin-top: var(--space-4); }
.research-head .lead + .lead { margin-top: var(--space-3); }
@media (min-width: 64rem) { .research-head { padding-top: var(--space-7); } }
.research-h2--gap { margin-top: var(--space-7); }
.research-h3 { font-size: 1.25rem; line-height: var(--leading-heading); margin-bottom: var(--space-3); }
/* Theme cards: the same as on the homepage (home.css). */
.theme-cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
.theme-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; border-top: 2px solid var(--color-text); padding-top: var(--space-3); }
.theme-card h3 { font-size: 1.375rem; line-height: 1.2; }
.theme-card h3 a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-chart-muted); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.theme-card h3 a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.theme-card p { line-height: 1.5; color: var(--color-text-muted); }
.theme-card .theme-count { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-small); font-weight: 600; color: var(--color-text); }
@media (min-width: 37.5rem) { .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); } }
@media (min-width: 64rem) { .theme-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.study-links { list-style: none; margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.study-links a { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.study-links .muted { display: block; font-size: var(--text-small); }
.research-list, .research-themes { border-top: 0; padding-top: 0; }
.research-list .study-next { margin-top: var(--space-7); }
/* A theme's articles: title (the link), authors, journal and year, and the summary once approved. */
.tpubs { list-style: none; margin-top: var(--space-4); max-width: 46rem; border-bottom: 1px solid var(--color-rule); }
.tpub { padding-block: var(--space-4); border-top: 1px solid var(--color-rule); }
.tpub-title { font-weight: 600; line-height: 1.4; }
.tpub-title a { color: var(--color-text); text-decoration: none; }
.tpub-title a:hover { color: var(--color-accent); text-decoration: underline; }
.tpub-summary { margin-top: var(--space-2); max-width: var(--measure); }
.tpub-study { margin-top: var(--space-2); font-size: var(--text-small); font-weight: 600; }
.pub-type { display: inline-block; margin-left: var(--space-1); padding: 0 0.4rem; border: 1px solid var(--color-text-muted); border-radius: 2px; line-height: 1.4; color: var(--color-text); }
.pub-study { font-weight: 600; margin-left: var(--space-1); }

/* ---------- The full publication list (/research/) ----------
   pubs.js shows the search box and theme filters (hidden without JavaScript, when
   they could not work), keeps the status line current and lists the first 12 matches with a
   "Show all" button for the rest. Without JavaScript every publication is listed. */
.pubs-tools { margin-top: var(--space-4); }
.pubs-search { display: grid; gap: var(--space-2); max-width: 30rem; }
.pubs-search label { font-size: var(--text-small); font-weight: 600; line-height: 1.4; }
.pubs-search input {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 2.75rem;
  font: inherit; font-size: var(--text-body); line-height: 1.4; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-text-muted); border-radius: 2px;
  padding: 0.5rem 0.75rem;
}
/* Status line: "135 publications, newest first.", or the count that matches. */
.pubs-status { margin-top: var(--space-5); padding-block: 0.6rem; font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
.pubs { list-style: none; margin-top: var(--space-2); max-width: 46rem; border-bottom: 1px solid var(--color-rule); }
.pubs li { padding-block: var(--space-4); border-top: 1px solid var(--color-rule); }
.pubs a { color: var(--color-text); text-decoration: none; font-weight: 600; line-height: 1.4; }
.pubs a:hover { color: var(--color-accent); text-decoration: underline; }
.pubs .pub-study { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; white-space: nowrap; }
.pub-meta { display: block; margin-top: var(--space-1); font-size: var(--text-small); color: var(--color-text-muted); line-height: 1.5; }
.pub-meta b { font-weight: 600; color: var(--color-text); }
.pubs li[hidden] { display: none; }
/* Search matches, where the browser supports the CSS Custom Highlight API. */
::highlight(pub-match) { background-color: #FBE7A1; color: var(--color-text); }
@media (forced-colors: active) { ::highlight(pub-match) { background-color: Mark; color: MarkText; } }
.pubs-more { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; font-size: var(--text-small); }
.button { font: inherit; font-size: var(--text-small); font-weight: 600; color: var(--color-bg); background: var(--color-text); border: 0; border-radius: 2px; padding: 0.6rem 1.25rem; cursor: pointer; min-height: 2.75rem; }
.button[hidden] { display: none; }

@media print {
  .pubs-tools, .pubs-status, .pubs-more { display: none; }
  /* Every publication prints, whatever is filtered or shown on screen. */
  .pubs li[hidden] { display: block !important; }
}

/* ---------- People (/people/) ----------
   The person (styles in site.css, .person), the team and the contact section (#contact, linked
   from the nav as "Contact"). */
.people-sec, .people-contact { padding-block: var(--space-6); }
.people-sec .research-h2 + *, .people-contact .research-h2 + * { margin-top: var(--space-3); }
.people-contact p + p { margin-top: var(--space-2); }