/*
 * The research surface.
 *
 * Built on the site's own tokens — --an-bg, --an-text, --an-accent, the IBM Plex
 * stack, the 4-128 spacing scale — because a second visual identity inside one
 * site is a bug, not a feature. Where this page departs from the rest of the
 * site it is for density: a findings page is read by someone scanning for a
 * figure, and generous line height that flatters an essay makes a table of
 * evidence slower to read.
 */

.an-intel { max-width: 1100px; margin: 0 auto; padding: var(--an-space-7, 48px) var(--an-gutter, 24px) var(--an-space-10, 128px); }

.an-intel-head { margin-bottom: var(--an-space-7, 48px); }
.an-intel-head h1 { font: 600 var(--an-t-h1, 3rem)/1.05 var(--an-font-editorial, Georgia, serif); letter-spacing: -.02em; margin: .2em 0 .4em; }
.an-intel-sub { color: var(--an-text-2, #A2A9A6); max-width: 62ch; font-size: var(--an-t-small, .9375rem); line-height: 1.6; }

/* ── the form ─────────────────────────────────────────────────── */

.an-intel-form {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--an-space-5, 24px);
	padding: var(--an-space-5, 24px);
	border: 1px solid var(--an-line, #262B2E);
	border-radius: var(--an-radius-lg, 16px);
	background: var(--an-surface, #15181A);
	margin-bottom: var(--an-space-7, 48px);
}
.an-intel-field-wide { grid-row: span 3; }
.an-intel-field label { display: block; font: 600 .8125rem/1 var(--an-font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--an-text-2, #A2A9A6); margin-bottom: 10px; }
.an-intel-field select,
.an-intel-field input {
	width: 100%;
	background: var(--an-sunk, #101314);
	color: var(--an-text, #ECEEEC);
	border: 1px solid var(--an-line, #262B2E);
	border-radius: var(--an-radius-sm, 6px);
	padding: 10px 12px;
	font: 400 1rem/1.4 var(--an-font-ui, system-ui);
}
.an-intel-field select[multiple] { padding: 6px; }
.an-intel-years { display: flex; align-items: center; gap: 10px; }
.an-intel-note { margin-top: 8px; font-size: .8125rem; color: var(--an-text-3, #7F8789); line-height: 1.5; }
.an-intel-go {
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--an-radius-sm, 6px);
	background: var(--an-accent, #E8763F);
	color: #17110D;
	font: 600 1rem/1 var(--an-font-ui, system-ui);
	cursor: pointer;
}

/* ── results ──────────────────────────────────────────────────── */

.an-intel-h2 { font: 600 var(--an-t-h3, 1.6rem)/1.2 var(--an-font-editorial, Georgia, serif); margin: var(--an-space-8, 64px) 0 var(--an-space-4, 16px); }

.an-intel-quality {
	display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
	padding: 14px 18px; border-left: 3px solid var(--an-accent, #E8763F);
	background: var(--an-surface, #15181A); border-radius: 0 8px 8px 0;
}
.an-intel-stars { font: 600 1rem/1 var(--an-font-mono, monospace); }
.an-intel-qtext { font-size: .8125rem; color: var(--an-text-3, #7F8789); }

.an-intel-finding {
	border: 1px solid var(--an-line, #262B2E);
	border-radius: var(--an-radius-md, 10px);
	padding: var(--an-space-5, 24px);
	margin-bottom: var(--an-space-4, 16px);
	background: var(--an-surface, #15181A);
}
.an-intel-finding h3 { font: 600 1.35rem/1.3 var(--an-font-editorial, Georgia, serif); margin-bottom: 16px; }

.an-intel-evidence { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.an-intel-evidence th,
.an-intel-evidence td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--an-line-soft, #1D2225); font-size: .9375rem; }
.an-intel-evidence th { font-weight: 400; color: var(--an-text-2, #A2A9A6); width: 55%; }
.an-intel-evidence td { font-family: var(--an-font-mono, monospace); font-variant-numeric: tabular-nums; }

.an-intel-conf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: .8125rem; color: var(--an-text-2, #A2A9A6); margin-bottom: 10px; }
.an-intel-bar { font-family: var(--an-font-mono, monospace); color: var(--an-accent, #E8763F); letter-spacing: -1px; }
.an-intel-basis { color: var(--an-text-3, #7F8789); }

.an-intel-how summary { cursor: pointer; font-size: .8125rem; color: var(--an-text-2, #A2A9A6); }
.an-intel-how p { margin-top: 10px; font-size: .875rem; line-height: 1.6; color: var(--an-text-2, #A2A9A6); }

.an-intel-limits { margin: 12px 0 0; padding-left: 1.1em; }
.an-intel-limits li { font-size: .875rem; line-height: 1.6; color: var(--an-text-3, #7F8789); margin-bottom: 6px; }

/* ── tables ───────────────────────────────────────────────────── */

.an-intel-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.an-intel-table th, .an-intel-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--an-line-soft, #1D2225); }
.an-intel-table thead th { font: 600 .75rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3, #7F8789); }
.an-intel-table td:nth-child(3), .an-intel-table td:nth-child(4) { font-family: var(--an-font-mono, monospace); font-variant-numeric: tabular-nums; }
.an-intel-table tr.is-selected { background: rgba(232, 118, 63, .08); }
.an-intel-source th { width: 210px; color: var(--an-text-2, #A2A9A6); font-weight: 400; }
.an-intel-cite { margin-top: 14px; font-size: .8125rem; color: var(--an-text-3, #7F8789); line-height: 1.6; }

/* ── the adversarial pass ─────────────────────────────────────── */

.an-intel-challenge { border-left: 3px solid var(--an-line, #262B2E); padding: 4px 0 4px 18px; margin-bottom: var(--an-space-4, 16px); }
.an-intel-challenge h3 { font: 600 1.05rem/1.35 var(--an-font-ui, system-ui); margin-bottom: 6px; }
.an-intel-test { font-size: .8125rem; color: var(--an-text-3, #7F8789); margin-bottom: 6px; }
.an-intel-verdict { font-size: .9375rem; line-height: 1.6; color: var(--an-text-2, #A2A9A6); }
.an-intel-challenge.is-fragile,
.an-intel-challenge.is-period-dependent,
.an-intel-challenge.is-weak-evidence-base { border-left-color: var(--an-warn, #D9A521); }
.an-intel-challenge.is-holds { border-left-color: var(--an-primary, #5FBF8E); }

/* ── charts ───────────────────────────────────────────────────── */

.an-intel-charts { display: grid; gap: var(--an-space-5, 24px); grid-template-columns: 1fr 1fr; margin-bottom: var(--an-space-6, 32px); }
.an-intel-chart { border: 1px solid var(--an-line, #262B2E); border-radius: var(--an-radius-md, 10px); padding: 18px; background: var(--an-surface, #15181A); }
.an-intel-chart h4 { font: 600 .75rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3, #7F8789); margin-bottom: 14px; }
.an-intel-chart svg { display: block; width: 100%; height: auto; }
.an-intel-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .8125rem; color: var(--an-text-2, #A2A9A6); }
.an-intel-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

.an-intel-empty ul { margin: 12px 0 24px; padding-left: 1.1em; }
.an-intel-empty li { margin-bottom: 8px; line-height: 1.6; }
.an-intel-empty p { max-width: 68ch; line-height: 1.7; color: var(--an-text-2, #A2A9A6); }
.an-intel-none { padding: var(--an-space-6, 32px); border: 1px dashed var(--an-line, #262B2E); border-radius: var(--an-radius-md, 10px); }

@media (max-width: 860px) {
	.an-intel-form { grid-template-columns: 1fr; }
	.an-intel-field-wide { grid-row: auto; }
	.an-intel-charts { grid-template-columns: 1fr; }
	.an-intel-evidence th { width: 60%; }
	.an-intel-source th { width: 40%; }
}

/* The theme provides this, but a caption that becomes visible because a class
   went missing is a visible bug on a research page, so it is defined here too. */
.an-intel .screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* A five-column table cannot fit a 375 px phone, and the wrong fix is to let
   the page scroll sideways — that moves the headline off screen to read a
   number. The table scrolls inside its own box instead. */
.an-intel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-intel-scroll > .an-intel-table { min-width: 460px; }

/* ── the species reference ────────────────────────────────────── */

.an-intel-form-species { grid-template-columns: 2fr 1fr; }
.an-intel-form-species .an-intel-field-wide { grid-row: auto; }

.an-intel-species-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin-top: var(--an-space-4, 16px);
}
.an-intel-species-card {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--an-line, #262B2E);
	border-radius: var(--an-radius-md, 10px);
	padding: 16px 18px;
	background: var(--an-surface, #15181A);
}
.an-intel-species-card:hover { border-color: var(--an-accent, #E8763F); }
.an-intel-species-card em { display: block; font: 600 1.05rem/1.3 var(--an-font-editorial, Georgia, serif); font-style: italic; }
.an-sp-common { display: block; margin-top: 4px; font-size: .8125rem; color: var(--an-text-2, #A2A9A6); }
.an-sp-meta { display: block; margin-top: 8px; font: 500 .6875rem/1 var(--an-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3, #7F8789); }
.an-sp-env { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.an-sp-env b {
	font: 500 .75rem/1 var(--an-font-mono, monospace);
	padding: 4px 8px; border-radius: 4px;
	background: var(--an-sunk, #101314); color: var(--an-text-2, #A2A9A6);
}

.an-intel-species { max-width: 760px; }
.an-intel-back { margin-bottom: var(--an-space-5, 24px); font-size: .875rem; }
.an-sp-name { font: 600 2rem/1.2 var(--an-font-editorial, Georgia, serif); margin-bottom: 6px; }
.an-sp-name em { font-style: italic; }
.an-sp-name small { font-size: .9rem; font-weight: 400; font-style: normal; color: var(--an-text-3, #7F8789); margin-left: 8px; }
.an-sp-commons { margin: 12px 0; line-height: 1.7; color: var(--an-text-2, #A2A9A6); font-size: .9375rem; }
.an-sp-group { font: 600 .75rem/1 var(--an-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--an-accent, #E8763F); margin: var(--an-space-6, 32px) 0 12px; }

@media (max-width: 860px) { .an-intel-form-species { grid-template-columns: 1fr; } }

/* Nutrition table.
   Fourteen nutrients will not fit a phone, so the table scrolls sideways inside
   its own box with the food name pinned — the alternative, shrinking type until
   it fits, makes a table nobody can read on any device. */
.an-sp-food { min-width: 46rem; font-variant-numeric: tabular-nums; }
.an-sp-food th[scope="col"] { font-size: .78rem; line-height: 1.25; font-weight: 600; text-align: right; vertical-align: bottom; }
.an-sp-food th[scope="col"] small { font-weight: 400; opacity: .62; }
.an-sp-food th[scope="col"]:first-child { text-align: left; }
.an-sp-food th[scope="row"] { position: sticky; left: 0; background: var(--an-intel-bg, #fff); text-align: left; font-weight: 500; white-space: nowrap; padding-right: 1.25rem; }
.an-sp-food td { text-align: right; font-size: .88rem; white-space: nowrap; }

/* An unmeasured nutrient. Held at low contrast on purpose: it should read as
   absent at a glance and never be mistaken for a zero. */
.an-intel-blank { opacity: .3; }

.an-sp-accepted { margin: .35rem 0 .15rem; }
.an-sp-accepted em { font-style: italic; }