/* ==================================================================
 * RESEARCH  —  /research/ and /research/aeo-pipeline-data/
 *
 * THE ONLY TEXT-ONLY PAGES ON THE SITE, AND THE ONLY ONES WHOSE DESIGN
 * IS AN ARGUMENT.
 *
 * Every other page here is a rebuild of a measured original. These two
 * are not: there is nothing to match, and the brief is a reference
 * document - a Wikipedia article, not a landing page. That means plain
 * structure a machine can walk, a reading measure a human can hold, and
 * NOTHING decorative. No artwork, no cards, no shadows, no gradients,
 * no reveal animation.
 *
 * WHY NOT JUST USE .prose. Two reasons, both structural:
 *   1. .prose is for EDITOR-WRITTEN copy inside page.php. These pages are
 *      hand-built templates with their own sectioning, an infobox table,
 *      a contents list, definition lists and a changelog - none of which
 *      .prose has a rule for.
 *   2. .prose sets 68ch. This page's tables need to run WIDER than its
 *      paragraphs, which is a two-width layout .prose cannot express.
 *
 * THE TWO WIDTHS, and they are the whole layout:
 *   TEXT   72ch  - a reference document reads long-form; this is the
 *                  measure, and it is set on the elements, not the wrapper.
 *   TABLES full  - up to the 1200 band. A funnel table squeezed to 72ch
 *                  wraps its composition column into confetti.
 *
 * ONE COLOUR DECISION AND IT IS DELIBERATE: this page is black type on
 * white with navy headings and grey rules, and that is all. Orange is the
 * site's action colour and there is no action on this page.
 *
 * MEASUREMENTS ARE NOT MEASURED HERE. There is no live original to take
 * numbers off, so every value below is chosen from the tokens in
 * main.css. Any change is a design call, not a fidelity regression.
 * ================================================================== */


/* ==================================================================
 * 01 THE BAND
 *
 * Both pages are one section, not a stack of bands. There is no colour
 * change anywhere down the page, so a band boundary would be invisible
 * and would only cost vertical rhythm.
 * ================================================================== */

.rd {
	padding-block: clamp(2.5rem, 5vw, 60px) 100px;   /* the 100px tail the legal pages and articles both use */
	background: var(--c-bg);
}

/* THE TEXT MEASURE, SET ON THE ELEMENTS RATHER THAN THE WRAPPER, so that
   tables can opt out of it by simply not being on this list. Everything
   that is prose is here; everything that is data is not. */
.rd p,
.rd h1,
.rd h2,
.rd h3,
.rd h4,
.rd ul,
.rd ol,
.rd dl,
.rd blockquote {
	max-width: 72ch;
}

/* Body copy. 18px flat at every width - the same size the legal pages
   settled on, and for the same reason: this is a long document and the
   site's 22px lead is a band-intro size, not a reading size. */
.rd p {
	margin: 0 0 var(--s-4);
	font-size: 18px;
	font-weight: 300;
	line-height: var(--lh-body);
	color: var(--c-text);
}

.rd strong { font-weight: 600; }

/* Inline code, for the field and table names the method section has to
   name exactly. Not a block treatment - these are single tokens. */
.rd code {
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--c-page-chip);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	font-weight: 400;
}


/* ==================================================================
 * 02 HEADINGS
 *
 * LEXEND, NOT BEBAS. Every other page on this site sets its headings in
 * the display face, which is a condensed all-caps poster type. A
 * reference document with a numbered outline needs headings that carry
 * mixed case and long titles legibly, and it needs the outline to read
 * as a hierarchy rather than as four sizes of poster.
 *
 * SO THIS IS THE ONE PLACE ON THE SITE THAT DOES NOT USE --f-display,
 * and that is a decision, not an oversight.
 * ================================================================== */

.rd__title {
	margin: 0 0 var(--s-5);
	font-family: var(--f-body);
	font-size: clamp(2rem, 4vw, 44px);
	font-weight: 700;
	line-height: var(--lh-head);
	color: var(--c-navy);
	text-transform: none;
	letter-spacing: normal;
}

/* The standfirst. One size up from the body, and the only paragraph on
   the page that is set apart - it is the summary a machine lifts. */
.rd__standfirst {
	margin: 0;
	font-size: 20px;
	font-weight: 300;
	line-height: var(--lh-lead);
	color: var(--c-text);
}

/* A rule under the opening block, and it is the only rule of its kind on
   the page: it separates the document's masthead from its body. */
.rd__head {
	padding-bottom: var(--s-6);
	border-bottom: 2px solid var(--c-rule);
}

.rd__section { margin-top: var(--s-8); }

/* H2 - the numbered top-level sections. Ruled, because in a document this
   long the rule is what makes the outline scannable at a scroll. */
.rd__h2 {
	margin: 0 0 var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-rule);
	font-family: var(--f-body);
	font-size: clamp(1.5rem, 2.6vw, 30px);
	font-weight: 700;
	line-height: var(--lh-head);
	color: var(--c-navy);
	text-transform: none;
	letter-spacing: normal;
}

/* THE RULE UNDER AN H2 SPANS THE BAND, NOT THE READING MEASURE, because the
   tables under these headings do too - a 72ch rule sitting above a full-width
   table reads as a rule that failed to draw.

   `.rd .rd__h2` AND NOT `.rd__h2`, and the extra selector is load-bearing:
   the measure list above is `.rd h2`, which at (0,1,1) OUTRANKS a lone class
   at (0,1,0). Written the short way this declaration loses silently and the
   rule renders short with nothing to say why. */
.rd .rd__h2 { max-width: none; }

.rd__h3 {
	margin: var(--s-7) 0 var(--s-4);
	font-family: var(--f-body);
	font-size: clamp(1.25rem, 2vw, 23px);
	font-weight: 700;
	line-height: var(--lh-head);
	color: var(--c-navy);
	text-transform: none;
}

.rd__h4 {
	margin: var(--s-6) 0 var(--s-3);
	font-family: var(--f-body);
	font-size: 18px;
	font-weight: 600;
	line-height: var(--lh-head);
	color: var(--c-navy);
}

/* The first heading inside a section does not need the section's own top
   margin AND its own - that stacks to nearly 100px of white. */
.rd__section > .rd__h3:first-of-type,
.rd-entry > .rd__h3:first-child { margin-top: 0; }

/* ANCHOR OFFSET. Every h2 and h3 here is a link target from the contents
   list. The header is not sticky on this site, so this is only about not
   landing with the heading flush against the viewport edge. */
.rd [id] { scroll-margin-top: var(--s-6); }


/* ==================================================================
 * 03 THE CONTENTS LIST
 *
 * A real ordered list, nested, with the numbers on. It is navigation for
 * a human and an outline for a machine, and both want the numbering.
 * ================================================================== */

.rd-toc {
	margin-top: var(--s-8);
	padding: var(--s-5) var(--s-6);
	border: 1px solid var(--c-rule);
	border-radius: var(--radius);
	background: var(--c-grey-soft);
	max-width: 72ch;
}

.rd-toc .rd__h2 {
	margin-bottom: var(--s-4);
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.rd-toc__list,
.rd-toc__sub {
	margin: 0;
	padding-left: var(--s-5);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
}

.rd-toc__list > li + li,
.rd-toc__sub > li { margin-top: var(--s-2); }

/* THE SUB-LIST CARRIES NO MARKERS, and that is not a style preference.
   Each measurement's own heading is numbered - "1. The evidence-acquisition
   funnel" - and those numbers are content, quoted in the contents list as
   part of the title. Leaving the <ol> markers on renders "1. 1. The
   evidence-acquisition funnel", which is the list numbering the titles a
   second time and disagreeing with itself the moment an entry is added.

   It stays an <ol> rather than becoming a <ul>: the order is real, and the
   markup is what a machine reads. */
.rd-toc__sub {
	margin-top: var(--s-2);
	padding-left: var(--s-4);
	list-style: none;
}

/* THE CONTENTS LIST IS THE ONE PLACE ON THIS PAGE THAT UNDERLINES ITS
   LINKS. Everywhere else the links sit inside sentences and take the
   site's inline treatment; here they ARE the content, and an unstyled
   list of blue words reads as a list of terms rather than a menu. */
.rd-toc a {
	color: var(--c-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.rd-toc a:hover { color: var(--c-navy); }


/* ==================================================================
 * 04 LISTS
 * ================================================================== */

.rd-ol,
.rd-ul {
	margin: 0 0 var(--s-4);
	padding-left: var(--s-5);
	font-size: 18px;
	font-weight: 300;
	line-height: var(--lh-body);
	color: var(--c-text);
}

.rd-ol > li + li,
.rd-ul > li + li { margin-top: var(--s-4); }


/* ==================================================================
 * 05 TABLES
 *
 * THE DATA. Plain rules, no zebra striping, no fills - a striped table
 * says "dashboard" and this is a reference document.
 *
 * FULL BAND WIDTH, outside the 72ch text measure, and each one scrolls
 * inside its own wrapper rather than widening the page. The composition
 * column of the funnel gap table is a sentence, and it needs the room.
 * ================================================================== */

.rd-table-wrap {
	max-width: none;
	margin: 0 0 var(--s-6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rd-table {
	width: 100%;
	min-width: 520px;    /* below this the three-column tables collapse to confetti; the wrapper scrolls instead */
	border-collapse: collapse;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	text-align: left;
}

.rd-table__caption {
	padding-bottom: var(--s-3);
	color: var(--c-navy);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.rd-table th,
.rd-table td {
	padding: var(--s-3) var(--s-4) var(--s-3) 0;
	border-bottom: 1px solid var(--c-rule);
	vertical-align: top;
}

.rd-table thead th {
	border-bottom: 2px solid var(--c-navy);
	color: var(--c-navy);
	font-weight: 700;
	white-space: nowrap;
}

.rd-table tbody th { color: var(--c-navy); font-weight: 600; }

.rd-table tbody tr:last-child th,
.rd-table tbody tr:last-child td { border-bottom: 0; }

/* Counts right-aligned and tabular, so the funnel reads as a column of
   numbers rather than a column of words that happen to be digits. */
.rd-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* THE FUNNEL GAP LABELS - "1 -> 2" and its three siblings.
   Row headers wrap by default, which broke every one of these across two
   lines and turned a stage transition into what looked like two numbers in
   a list. Applied as a utility on the four cells rather than to
   `.rd-table tbody th`, because the row headers in the key/value tables are
   full sentences and nowrap would push those tables sideways. */
.rd-nowrap { white-space: nowrap; }

/* THE TWO-COLUMN KEY/VALUE TABLES - the dataset summary and the
   population. The label column is fixed so the values line up down the
   page, which is what makes it read as an infobox rather than a grid. */
.rd-table--pairs { min-width: 420px; }
.rd-table--pairs th[scope="row"] {
	width: 34%;
	padding-right: var(--s-5);
}


/* ==================================================================
 * 06 THE FROZEN VALUE LINE
 *
 * One sentence, set larger, directly under the heading it belongs to.
 * It is the answer to "what is this number", and it is the line a
 * featured snippet takes.
 * ================================================================== */

.rd-figure {
	margin: 0 0 var(--s-4);
	font-size: 22px;
	font-weight: 400;
	line-height: var(--lh-lead);
	color: var(--c-navy);
}

.rd-figure strong { font-weight: 700; }


/* ==================================================================
 * 07 SAMPLE SIZE AND DATE RANGE
 *
 * A definition list, and it must stay one. These pairs are the
 * qualifiers that make each figure quotable; a machine reading dt/dd
 * gets the association for free, and a two-column table would not
 * carry it any better while reading heavier on a phone.
 * ================================================================== */

.rd-meta {
	margin: 0 0 var(--s-5);
	padding: var(--s-4) var(--s-5);
	border-left: 3px solid var(--c-rule);
	font-size: 16px;
	line-height: 1.5;
}

.rd-meta dt {
	color: var(--c-navy);
	font-weight: 600;
}

.rd-meta dd {
	margin: 2px 0 0;
	font-weight: 300;
	color: var(--c-text);
}

.rd-meta dd + dt { margin-top: var(--s-3); }


/* ==================================================================
 * 08 THE QUOTABLE SENTENCE
 *
 * THE MOST IMPORTANT BLOCK ON THE PAGE, and the reason it is visually
 * distinct at all. Everything else here is reference; this is the
 * sentence the site is asking to be lifted, with its scope built into
 * it so that lifting it cannot strip the qualifier off the number.
 *
 * A <blockquote> with a labelled heading, because that is the pattern a
 * reader already knows means "quote this bit", and because the amber
 * left rule is the site's existing blockquote treatment from main.css
 * rather than a new idea.
 * ================================================================== */

.rd-quotable {
	margin: 0 0 var(--s-6);
	padding: var(--s-4) var(--s-5);
	border-left: 3px solid var(--c-amber);
	background: var(--c-grey-soft);
}

.rd-quotable__label {
	margin: 0 0 var(--s-2);
	color: var(--c-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* The sentence itself. Slightly up from body size and set in the
   regular weight rather than the light one - it is meant to be read
   whole and copied. */
.rd-quotable p:last-child {
	margin: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: var(--lh-lead);
	color: var(--c-navy);
}


/* ==================================================================
 * 09 ENTRIES, CITATION AND CHANGELOG
 * ================================================================== */

/* Each measurement is its own block, separated by a rule. Five of them
   run down one section and without this they read as one long stream. */
.rd-entry {
	margin-top: var(--s-7);
	padding-top: var(--s-7);
	border-top: 1px solid var(--c-rule);
}

.rd-citation {
	padding: var(--s-4) var(--s-5);
	border: 1px solid var(--c-rule);
	border-radius: var(--radius);
	font-size: 17px;
	/* The URL is long and must be allowed to break rather than push the
	   page sideways on a phone. */
	overflow-wrap: anywhere;
}

.rd-changelog { margin: 0 0 var(--s-5); }

.rd-changelog__date {
	margin-bottom: var(--s-3);
	color: var(--c-navy);
	font-size: 18px;
	font-weight: 700;
}

.rd-changelog__body { margin: 0; }

.rd-changelog__body p { margin-bottom: var(--s-3); }
.rd-changelog__body p:last-child { margin-bottom: 0; }

/* A closing note, set smaller and greyed - it is about the document
   rather than part of it. */
.rd-note {
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-rule);
	font-size: 16px;
}


/* ==================================================================
 * 10 THE INDEX PAGE
 *
 * One list, and it will stay one list for a while. Deliberately not a
 * card grid: with a single entry a grid is one lonely tile, and with
 * three it would still be a list wearing boxes.
 * ================================================================== */

.rd-list { margin: 0; }

.rd-list__name {
	margin-bottom: var(--s-2);
	font-size: 21px;
	font-weight: 700;
	line-height: var(--lh-head);
}

.rd-list__name a {
	color: var(--c-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rd-list__name a:hover { color: var(--c-orange); }

.rd-list__body {
	margin: 0 0 var(--s-6);
	padding-left: 0;
}

/* --c-blue-deep, not --c-blue: this is 16px type and the lighter brand
   blue misses the 4.5:1 floor at that size. See the token note in
   main.css. */
.rd-list__meta {
	font-size: 16px;
	color: var(--c-blue-deep);
}


/* ==================================================================
 * 11 PRINT
 *
 * A reference document gets printed and gets saved as a PDF. Chrome
 * drops backgrounds by default, so the two tinted blocks are given
 * borders that survive without them.
 * ================================================================== */

@media print {
	.rd-toc,
	.rd-quotable {
		border: 1px solid #999;
		background: transparent;
	}

	.rd-table-wrap { overflow-x: visible; }
	.rd-table { min-width: 0; }

	/* Never split a measurement across a page break if it can be helped. */
	.rd-entry,
	.rd-quotable,
	.rd-meta { break-inside: avoid; }
}