/**
 * Testing result page — /testing/<slug>/  (page-templates/testing-result.php)
 *
 * Deliberately NOT self-contained. functions.php loads this file on top of
 * the hub's own chain (saiwei-wp-bridge + saiwei-shared + page-testing), so
 * every shared component — hero, kicker, buttons, method steps, FAQ
 * accordion, related grid, final panel, .container, .table-scroll, breadcrumb
 * and the design tokens on .saiwei-page — is inherited from those files.
 * Only the components unique to a published result are defined here.
 *
 * That coupling is intentional: a result page must read as part of the
 * evidence hub, not as a second design. Never redefine a hub component here.
 *
 * Everything is scoped to .saiwei-page.sai-testing-result, which the template
 * puts on the page wrapper, so no rule can leak onto another page.
 */

/* ── Section rhythm ─────────────────────────────────────────────────────
   Only the background is declared here. Vertical padding is deliberately
   NOT set: page-testing.css carries a site-wide
   `.saiwei-page section { padding: 75px 0 !important }` (55px under 780px),
   so any padding written here would be dead code. A published result keeps
   the same band rhythm as every other page on the site. Only the sections
   this template adds are declared; .hero, .method, .related and .final
   already carry their background from page-testing.css. */
.saiwei-page.sai-testing-result .result  { background: var(--cream); }
.saiwei-page.sai-testing-result .reading { background: var(--cream-2); }
.saiwei-page.sai-testing-result .photos  { background: var(--cream); }
.saiwei-page.sai-testing-result .faq     { background: var(--cream-2); }

/* ── Evidence record console ────────────────────────────────────────────
   Reuses .evidence-console / .console-head / .evidence-fields / .e-field
   from page-testing.css. The hub lists eight requirements; a result page
   lists the same eight with this test's state beside each one. */
.saiwei-page.sai-testing-result .evidence-fields {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.saiwei-page.sai-testing-result .e-field {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 10px;
	align-items: baseline;
}

.saiwei-page.sai-testing-result .e-field .e-no {
	color: var(--silver-600);
}

.saiwei-page.sai-testing-result .e-field strong {
	color: var(--blue-950);
	font-size: 0.8rem;
	font-weight: 850;
}

.saiwei-page.sai-testing-result .e-field em {
	grid-column: 1 / -1;
	font-style: normal;
	font-size: 0.64rem;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--silver-600);
}

/* Overrides the hub's grouped `.e-field span` rule, which would otherwise
   render this sentence in the same small uppercase style as the number. */
.saiwei-page.sai-testing-result .e-field .e-value {
	grid-column: 1 / -1;
	color: var(--silver-600);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.55;
	text-transform: none;
}

.saiwei-page.sai-testing-result .e-field.is-complete em { color: #15803D; }
.saiwei-page.sai-testing-result .e-field.is-partial  { border-color: #FDE68A; background: rgba(255, 251, 235, 0.92); }
.saiwei-page.sai-testing-result .e-field.is-partial em { color: #B45309; }
.saiwei-page.sai-testing-result .e-field.is-missing  { border-color: #FECACA; background: rgba(254, 242, 242, 0.92); }
.saiwei-page.sai-testing-result .e-field.is-missing em { color: #B91C1C; }

.saiwei-page.sai-testing-result .status-badge.is-gap {
	background: #FEF3C7;
	color: #92400E;
}

/* ── Editor notice (unregistered test) ──────────────────────────────── */
.saiwei-page.sai-testing-result .result-note {
	margin: 22px 0 0;
	padding: 20px 22px;
	border: 1px solid #FDE68A;
	border-radius: 20px;
	background: #FFFBEB;
	color: #78350F;
	font-size: 0.84rem;
	line-height: 1.65;
}

.saiwei-page.sai-testing-result .result-note code {
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(120, 53, 15, 0.08);
	font-size: 0.9em;
}

/* ── Equipment / conditions cards ───────────────────────────────────── */
.saiwei-page.sai-testing-result .meta-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	margin-top: 52px;
}

.saiwei-page.sai-testing-result .meta-card {
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 26px;
	background: #fff;
	box-shadow: var(--shadow-sm);
}

.saiwei-page.sai-testing-result .meta-card h3 {
	margin: 0 0 8px;
	color: var(--blue-950);
	font-size: 1.05rem;
}

.saiwei-page.sai-testing-result .meta-list { display: grid; }

.saiwei-page.sai-testing-result .meta-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.8rem;
}

.saiwei-page.sai-testing-result .meta-row span {
	color: var(--silver-600);
	font-weight: 800;
}

.saiwei-page.sai-testing-result .meta-row strong {
	color: #111827;
	font-weight: 700;
}

/* An unrecorded field is flagged, never quietly blank: the hub publishes
   what it does not know as loudly as what it does. */
.saiwei-page.sai-testing-result .meta-row strong.unrecorded {
	color: #B45309;
	font-weight: 850;
}

.saiwei-page.sai-testing-result .meta-foot {
	margin: 16px 0 0;
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.6;
}

/* ── Summary cards ──────────────────────────────────────────────────── */
.saiwei-page.sai-testing-result .summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 30px 0 26px;
}

.saiwei-page.sai-testing-result .summary-card {
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--shadow-sm);
}

.saiwei-page.sai-testing-result .summary-card h3 {
	margin: 0;
	color: var(--silver-700);
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.saiwei-page.sai-testing-result .summary-figure {
	margin: 10px 0 6px;
	color: var(--blue-950);
	font-size: 1.9rem;
	font-weight: 950;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.saiwei-page.sai-testing-result .summary-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.78rem;
}

/* ── Result table ───────────────────────────────────────────────────── */
.saiwei-page.sai-testing-result table caption {
	caption-side: top;
	padding: 0 0 16px;
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.62;
	text-align: left;
}

/* A <caption> box is exactly as wide as its table, so the sample log's long
   caption inherited the table's 638px width inside a 306px scroll box on a
   phone and was cut mid-word. The caption is therefore hidden (it still names
   the table for assistive tech) and the same information is carried by the
   visible paragraph above the scroll box, which wraps to the page. */
.saiwei-page.sai-testing-result .raw-card caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.saiwei-page.sai-testing-result .raw-card .table-caption {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.62;
}

/* page-testing.css styles every th as a small uppercase column header.
   A <th scope="row"> inside the body is a data cell, so it must not inherit
   that treatment. */
.saiwei-page.sai-testing-result tbody th[scope="row"] {
	background: transparent;
	color: #111827;
	font-size: 0.78rem;
	font-weight: 850;
	letter-spacing: 0;
	text-transform: none;
}

/* Only the sample log gets nowrap: its row headers are short identifiers
   like "CFSM01 / CFSM02" that must not break mid-token. Scoped to .raw-card
   because the limitations register uses full sentences as row headers, and
   nowrap there inflated that column to ~509px — crushing the effect column
   to the width of one word. */
.saiwei-page.sai-testing-result .raw-card tbody th[scope="row"] {
	white-space: nowrap;
}

.saiwei-page.sai-testing-result tbody tr:nth-child(even) {
	background: rgba(17, 24, 39, 0.022);
}

.saiwei-page.sai-testing-result th.is-emphasis,
.saiwei-page.sai-testing-result td.is-emphasis {
	background: var(--blue-100);
	color: var(--blue-950);
	font-weight: 900;
}

.saiwei-page.sai-testing-result td.is-blank {
	color: var(--silver-400);
}

.saiwei-page.sai-testing-result .table-foot {
	margin: 18px 0 0;
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.68;
}

/* Long result tables get a bounded scroll box with a pinned header, so the
   column meaning stays on screen while reading row 30. The scroll container
   carries tabindex="0" + role="region" in the template, which is what makes
   a scrollable region reachable by keyboard. */
.saiwei-page.sai-testing-result .raw-card .table-scroll,
.saiwei-page.sai-testing-result .limitation-card .table-scroll {
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 781px) {
	.saiwei-page.sai-testing-result .raw-card .table-scroll {
		max-height: min(72vh, 780px);
		overflow: auto;
	}

	.saiwei-page.sai-testing-result .raw-card thead th {
		position: sticky;
		top: 0;
		z-index: 2;
	}
}

/* ── Reading the data + limitations ─────────────────────────────────── */
.saiwei-page.sai-testing-result .reading-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* Grid items default to `min-width: auto`, so a track can never shrink below
   the widest unbreakable thing inside it. The limitations table inside
   .table-scroll has a min-content around 692px, which pushed the whole
   two-column layout — and every sibling in it — wider than a phone viewport,
   where .saiwei-page{overflow:hidden} then clipped it silently.
   Pairing minmax(0,…) tracks with min-width:0 items lets the item shrink and
   hand the surplus to .table-scroll, which is what actually scrolls. */
.saiwei-page.sai-testing-result .reading-layout > *,
.saiwei-page.sai-testing-result .meta-grid > *,
.saiwei-page.sai-testing-result .meta-list > *,
.saiwei-page.sai-testing-result .summary-grid > *,
.saiwei-page.sai-testing-result .figure-grid > * { min-width: 0; }

.saiwei-page.sai-testing-result .reading-list {
	display: grid;
	gap: 14px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.saiwei-page.sai-testing-result .reading-list li {
	position: relative;
	padding-left: 30px;
	color: #424242;
	font-size: 0.9rem;
	line-height: 1.68;
}

.saiwei-page.sai-testing-result .reading-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 14px;
	height: 2px;
	border-radius: 999px;
	background: var(--blue-300);
}

.saiwei-page.sai-testing-result .limitation-card {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: #fff;
	box-shadow: var(--shadow-sm);
}

.saiwei-page.sai-testing-result .limitation-card h3 {
	margin: 0;
	color: var(--blue-950);
	font-size: 1.3rem;
}

.saiwei-page.sai-testing-result .limitation-card tbody th[scope="row"] {
	width: 38%;
}

/* ── Photographic record ────────────────────────────────────────────── */
.saiwei-page.sai-testing-result .figure-group-title {
	margin: 44px 0 18px;
	color: var(--blue-950);
	font-size: 1.1rem;
}

.saiwei-page.sai-testing-result .figure-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

.saiwei-page.sai-testing-result figure {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

/* Intrinsic ratio only — never a forced aspect-ratio with object-fit, which
   would crop the thing the photograph exists to prove. */
.saiwei-page.sai-testing-result figure img {
	width: 100%;
	height: auto;
}

.saiwei-page.sai-testing-result figcaption {
	flex: 1;
	padding: 18px 20px 20px;
	color: #4B5563;
	font-size: 0.82rem;
	line-height: 1.62;
}

.saiwei-page.sai-testing-result .fig-source {
	display: block;
	margin-top: 10px;
	color: var(--silver-400);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.saiwei-page.sai-testing-result .meta-grid,
	.saiwei-page.sai-testing-result .reading-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.saiwei-page.sai-testing-result .meta-grid { margin-top: 40px; }
}

@media (max-width: 780px) {
	.saiwei-page.sai-testing-result .summary-grid,
	.saiwei-page.sai-testing-result .figure-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.saiwei-page.sai-testing-result .meta-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.saiwei-page.sai-testing-result .summary-figure { font-size: 1.6rem; }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
	.saiwei-page.sai-testing-result .raw-card .table-scroll {
		max-height: none;
		overflow: visible;
	}
}