/* UOPD paper explorer (assets/js/uopd-lab.js) and the UOPD figure blocks.
   Light card on both the console and the academic view, matching the
   distillation-interaction widgets. Chart colors were checked with the
   dataviz palette validator (CVD and normal-vision separation, contrast). */

.uopd-lab {
	--ul-surface: #ffffff;
	--ul-raised: #f5f8f8;
	--ul-ink: #22313a;
	--ul-muted: #5b6c73;
	--ul-faint: #7d8b91;
	--ul-line: rgba(34, 49, 58, 0.13);
	--ul-line-strong: rgba(34, 49, 58, 0.26);
	--ul-student: #1b8a5c;
	--ul-student-soft: rgba(27, 138, 92, 0.12);
	--ul-teacher: #7152b0;
	--ul-teacher-soft: rgba(113, 82, 176, 0.13);
	--ul-threshold: #b8641f;
	--ul-baseline-mark: #87949a;
	--ul-uopd: #2a78d6;
	--ul-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
	background: var(--ul-surface);
	border: 1px solid var(--ul-line);
	border-radius: 0.7rem;
	box-shadow: 0 1.1rem 3rem rgba(20, 40, 48, 0.1);
	color: var(--ul-ink);
	font-size: 0.86rem;
	line-height: 1.5;
	min-width: 0;
	overflow: hidden;
	text-align: left;
}

.uopd-lab *,
.uopd-lab *::before,
.uopd-lab *::after {
	box-sizing: border-box;
}

.uopd-lab button {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	height: auto;
	line-height: 1.3;
	white-space: normal;
}

.ul-tabs {
	background: var(--ul-raised);
	border-bottom: 1px solid var(--ul-line);
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding: 0.45rem 0.5rem 0;
	scrollbar-width: thin;
}

.ul-tab {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 0.5rem 0.5rem 0 0;
	color: var(--ul-muted);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-weight: 600;
	gap: 0.45rem;
	margin: 0;
	padding: 0.6rem 0.85rem 0.65rem;
}

.ul-tab:hover {
	color: var(--ul-ink);
}

.ul-tab[aria-selected="true"] {
	background: var(--ul-surface);
	border-color: var(--ul-line);
	color: var(--ul-ink);
	margin-bottom: -1px;
}

.ul-tab-index {
	color: var(--ul-faint);
	font: 500 0.68rem/1 var(--ul-mono);
}

.ul-tab:focus-visible,
.ul-segment:focus-visible,
.ul-turn:focus-visible,
.ul-panel:focus-visible,
.ul-table-details summary:focus-visible {
	outline: 2px solid var(--ul-uopd);
	outline-offset: 2px;
}

.ul-panel {
	padding: 1.15rem 1.2rem 1.25rem;
}

.ul-panel[hidden] {
	display: none;
}

.ul-panel-lead {
	color: var(--ul-muted);
	margin: 0 0 1rem;
	max-width: 52rem;
}

.ul-controls {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1.4rem;
	margin-bottom: 0.9rem;
}

.ul-field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.ul-field-wide {
	flex: 1 1 26rem;
}

.ul-field-range {
	flex: 1 1 15rem;
}

.ul-field-label {
	color: var(--ul-faint);
	font: 500 0.68rem/1.3 var(--ul-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ul-segmented {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.ul-segment {
	align-items: baseline;
	background: var(--ul-surface);
	border: 1px solid var(--ul-line-strong);
	border-radius: 999px;
	color: var(--ul-ink);
	cursor: pointer;
	display: inline-flex;
	gap: 0.35rem;
	margin: 0;
	padding: 0.34rem 0.75rem;
}

.ul-segment:hover {
	border-color: var(--ul-ink);
}

.ul-segment[aria-pressed="true"] {
	background: var(--ul-ink);
	border-color: var(--ul-ink);
	color: #ffffff;
}

.ul-segment-label {
	font-size: 0.78rem;
	font-weight: 600;
}

.ul-segment-note {
	color: inherit;
	font: 400 0.66rem/1 var(--ul-mono);
	opacity: 0.72;
}

.ul-range {
	accent-color: var(--ul-uopd);
	width: 100%;
}

.ul-readouts {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 0 1rem;
}

.ul-readout {
	background: var(--ul-raised);
	border: 1px solid var(--ul-line);
	border-radius: 0.5rem;
	padding: 0.5rem 0.7rem;
}

.ul-readout dt {
	color: var(--ul-faint);
	font: 400 0.66rem/1.3 var(--ul-mono);
}

.ul-readout dd {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0.1rem 0 0;
}

.ul-rule-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.ul-rule-side {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.ul-chart {
	background: var(--ul-surface);
	border: 1px solid var(--ul-line);
	border-radius: 0.55rem;
	margin: 0;
	min-width: 0;
	padding: 0.8rem 0.85rem 0.75rem;
	position: relative;
}

.ul-chart-title {
	color: var(--ul-ink);
	font-size: 0.8rem;
	font-weight: 700;
	margin: 0 0 0.45rem;
	padding: 0;
	border: 0;
}

.ul-svg-host {
	min-width: 0;
	width: 100%;
}

.ul-svg-host svg {
	display: block;
	overflow: visible;
}

.uopd-lab .ul-grid {
	stroke: rgba(34, 49, 58, 0.09);
	stroke-width: 1;
}

.uopd-lab .ul-baseline {
	stroke: var(--ul-line-strong);
	stroke-width: 1;
}

.uopd-lab .ul-axis {
	fill: var(--ul-faint);
	font: 400 10.5px var(--ul-mono);
}

.uopd-lab .ul-axis-category {
	fill: var(--ul-muted);
	font: 600 11px system-ui, sans-serif;
}

.uopd-lab .ul-trace-line {
	fill: none;
	stroke: var(--ul-line-strong);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.uopd-lab .ul-hit {
	fill: transparent;
}

.uopd-lab .ul-marker {
	cursor: pointer;
}

.uopd-lab .ul-marker circle {
	stroke: var(--ul-surface);
	stroke-width: 2;
}

.uopd-lab .ul-marker.is-student circle {
	fill: var(--ul-student);
}

.uopd-lab .ul-marker.is-teacher circle {
	fill: var(--ul-teacher);
}

.uopd-lab .ul-threshold line,
.uopd-lab .ul-buffer-threshold {
	stroke: var(--ul-threshold);
	stroke-width: 2;
}

.uopd-lab .ul-threshold-label {
	fill: var(--ul-ink);
	font: 500 10.5px var(--ul-mono);
}

.uopd-lab .ul-buffer rect.is-teacher {
	fill: var(--ul-teacher);
}

.uopd-lab .ul-buffer rect.is-student-muted {
	fill: #b9c3c6;
}

.ul-turns {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin-top: 0.5rem;
}

.ul-turn {
	background: var(--ul-student-soft);
	border: 1px solid transparent;
	border-radius: 0.35rem;
	color: var(--ul-ink);
	cursor: pointer;
	font: 500 0.72rem/1 var(--ul-mono);
	margin: 0;
	min-height: 1.9rem;
	padding: 0.25rem 0;
}

.ul-turn.is-teacher {
	background: var(--ul-teacher-soft);
}

.ul-turn[aria-pressed="true"] {
	border-color: var(--ul-ink);
	font-weight: 700;
}

.ul-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}

.ul-legend li {
	align-items: center;
	color: var(--ul-muted);
	display: inline-flex;
	font-size: 0.74rem;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.ul-legend li::before {
	content: none;
}

.ul-key {
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	height: 0.62rem;
	width: 0.62rem;
}

.ul-key-rect {
	border-radius: 2px;
}

.ul-key-student {
	background: var(--ul-student);
}

.ul-key-teacher {
	background: var(--ul-teacher);
}

.ul-key-threshold {
	background: var(--ul-threshold);
	border-radius: 1px;
	height: 2px;
	width: 1rem;
}

.ul-key-baseline {
	background: var(--ul-baseline-mark);
}

.ul-key-uopd {
	background: var(--ul-uopd);
}

.ul-detail {
	background: var(--ul-raised);
	border: 1px solid var(--ul-line);
	border-radius: 0.55rem;
	padding: 0.85rem 0.9rem;
}

.ul-detail-title {
	color: var(--ul-ink);
	font: 600 0.8rem/1.4 var(--ul-mono);
	letter-spacing: 0;
	margin: 0 0 0.35rem;
	text-transform: none;
}

.ul-detail-body {
	color: var(--ul-muted);
	font-size: 0.8rem;
	margin: 0 0 0.7rem;
}

.ul-formula {
	display: grid;
	gap: 0.4rem;
}

.ul-branch {
	border: 1px solid var(--ul-line);
	border-left-width: 3px;
	border-radius: 0.4rem;
	display: grid;
	gap: 0.15rem;
	opacity: 0.55;
	padding: 0.45rem 0.6rem;
	transition: opacity 160ms ease, background-color 160ms ease;
}

.ul-branch code {
	background: none;
	border: 0;
	color: var(--ul-ink);
	font: 500 0.76rem/1.4 var(--ul-mono);
	padding: 0;
	white-space: normal;
}

.ul-branch span {
	color: var(--ul-muted);
	font-size: 0.72rem;
}

.ul-branch-student {
	border-left-color: var(--ul-student);
}

.ul-branch-teacher {
	border-left-color: var(--ul-teacher);
}

.ul-branch.is-active {
	background: var(--ul-surface);
	opacity: 1;
}

.ul-caveat,
.ul-source {
	color: var(--ul-faint);
	font-size: 0.72rem;
	margin: 0.85rem 0 0;
}

.ul-source {
	border-top: 1px solid var(--ul-line);
	margin: 0;
	padding: 0.75rem 1.2rem 0.9rem;
}

.ul-source a {
	color: var(--ul-uopd);
	font-weight: 600;
}

.uopd-lab .ul-bar-row,
.uopd-lab .ul-column {
	cursor: default;
	outline: none;
}

.uopd-lab .ul-bar-row .ul-bar,
.uopd-lab .ul-column .ul-bar {
	fill: var(--ul-baseline-mark);
	transition: opacity 140ms ease;
}

.uopd-lab .ul-bar-row.is-uopd .ul-bar,
.uopd-lab .ul-column.is-uopd .ul-bar {
	fill: var(--ul-uopd);
}

.uopd-lab .ul-bar-row:hover .ul-bar,
.uopd-lab .ul-bar-row:focus .ul-bar,
.uopd-lab .ul-column:hover .ul-bar,
.uopd-lab .ul-column:focus .ul-bar {
	opacity: 0.8;
}

.uopd-lab .ul-bar-row:focus .ul-hit,
.uopd-lab .ul-column:focus .ul-hit {
	stroke: var(--ul-uopd);
	stroke-width: 1.5;
}

.uopd-lab .ul-whisker {
	stroke: var(--ul-ink);
	stroke-width: 1.2;
}

.uopd-lab .ul-row-label {
	fill: var(--ul-muted);
	font: 500 11.5px system-ui, sans-serif;
}

.uopd-lab .ul-value {
	fill: var(--ul-muted);
	font: 500 11px var(--ul-mono);
}

.uopd-lab .is-strong {
	fill: var(--ul-ink);
	font-weight: 700;
}

.uopd-lab .ul-ref {
	stroke-width: 1;
}

.uopd-lab .ul-ref-teacher {
	stroke: var(--ul-ink);
}

.uopd-lab .ul-ref-student {
	stroke: var(--ul-faint);
}

.uopd-lab .ul-ref-label {
	fill: var(--ul-muted);
	font: 400 10px var(--ul-mono);
}

.ul-summary {
	border-top: 1px solid var(--ul-line);
	color: var(--ul-ink);
	font-size: 0.8rem;
	margin: 0.6rem 0 0;
	padding-top: 0.55rem;
}

.ul-tooltip {
	background: var(--ul-ink);
	border-radius: 0.4rem;
	box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.2);
	color: #ffffff;
	display: grid;
	font-size: 0.72rem;
	gap: 0.05rem;
	max-width: 17rem;
	padding: 0.45rem 0.6rem;
	pointer-events: none;
	position: absolute;
	z-index: 5;
}

.ul-tooltip[hidden] {
	display: none;
}

.ul-tooltip strong {
	font-size: 0.86rem;
}

.ul-tooltip span {
	color: rgba(255, 255, 255, 0.78);
}

.ul-stats {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 0.9rem;
}

.ul-stat {
	background: var(--ul-raised);
	border: 1px solid var(--ul-line);
	border-radius: 0.55rem;
	display: grid;
	gap: 0.15rem;
	padding: 0.7rem 0.85rem;
}

.ul-stat strong {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}

.ul-stat span {
	color: var(--ul-muted);
	font-size: 0.76rem;
}

.ul-table-details {
	margin-top: 0.8rem;
}

.ul-table-details summary {
	color: var(--ul-muted);
	cursor: pointer;
	font: 500 0.74rem/1.4 var(--ul-mono);
}

.ul-table-scroll {
	margin-top: 0.5rem;
	overflow-x: auto;
}

.uopd-lab table.ul-table {
	border: 0;
	border-collapse: collapse;
	font-size: 0.76rem;
	margin: 0;
	min-width: 36rem;
	width: 100%;
}

.uopd-lab .ul-table caption {
	caption-side: top;
	color: var(--ul-faint);
	font: 400 0.7rem/1.4 var(--ul-mono);
	padding-bottom: 0.4rem;
	text-align: left;
}

.uopd-lab .ul-table th,
.uopd-lab .ul-table td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ul-line);
	color: var(--ul-ink);
	font-variant-numeric: tabular-nums;
	padding: 0.42rem 0.55rem;
	text-align: right;
	vertical-align: baseline;
	white-space: nowrap;
}

.uopd-lab .ul-table thead th {
	color: var(--ul-faint);
	font: 500 0.68rem/1.3 var(--ul-mono);
	white-space: normal;
}

.uopd-lab .ul-table th[scope="row"],
.uopd-lab .ul-table thead th:first-child {
	font-weight: 600;
	text-align: left;
}

.uopd-lab .ul-table tbody tr:nth-child(2n) {
	background: transparent;
}

.uopd-lab .ul-table tr.is-reference th,
.uopd-lab .ul-table tr.is-reference td {
	color: var(--ul-faint);
}

.uopd-lab .ul-table tr.is-uopd th,
.uopd-lab .ul-table tr.is-uopd td {
	background: rgba(42, 120, 214, 0.07);
}

.uopd-lab .ul-table td.is-best {
	font-weight: 700;
}

.uopd-lab .ul-group-row th {
	color: var(--ul-faint);
	font: 500 0.66rem/1.3 var(--ul-mono);
	letter-spacing: 0.04em;
	padding-top: 0.75rem;
	text-align: left;
	text-transform: uppercase;
}

.ul-delta {
	color: var(--ul-faint);
	display: inline-block;
	font: 400 0.66rem/1 var(--ul-mono);
	margin-left: 0.35rem;
	min-width: 2.6rem;
	text-align: left;
}

.ul-delta.is-better {
	color: var(--ul-ink);
	font-weight: 500;
}

.ul-findings {
	color: var(--ul-muted);
	display: grid;
	font-size: 0.8rem;
	gap: 0.35rem;
	margin: 0.9rem 0 0;
	padding-left: 1.1rem;
}

.ul-findings li {
	margin: 0;
	padding: 0;
}

@media (max-width: 860px) {
	.ul-rule-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ul-readouts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.ul-panel {
		padding: 0.95rem 0.8rem 1rem;
	}

	.ul-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.ul-turns {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.uopd-lab *,
	.uopd-lab *::before,
	.uopd-lab *::after {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.uopd-lab .ul-bar-row.is-uopd .ul-bar,
	.uopd-lab .ul-column.is-uopd .ul-bar,
	.uopd-lab .ul-marker.is-teacher circle {
		fill: Highlight;
	}
}

/* ------------------------------------------------------------ page blocks */

.uopd-noscript {
	border: 1px dashed currentColor;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	margin: 0;
	opacity: 0.8;
	padding: 1rem;
}

.uopd-figure {
	background: #ffffff;
	border: 1px solid rgba(34, 49, 58, 0.14);
	border-radius: 0.6rem;
	margin: 0 0 1.1rem;
	overflow: hidden;
}

.uopd-figure img {
	display: block;
	height: auto;
	width: 100%;
}

.uopd-figure figcaption {
	border-top: 1px solid rgba(34, 49, 58, 0.12);
	color: #4f6168;
	font-size: 0.74rem;
	line-height: 1.5;
	padding: 0.65rem 0.9rem;
}

.uopd-figure-pair {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	margin-top: 1.1rem;
}

.uopd-figure-pair .uopd-figure {
	margin: 0;
}

.uopd-lab-host {
	margin: 1.1rem 0 0;
}

.uopd-figure-spaced {
	margin-top: 1.1rem;
}

.uopd-authors {
	font-size: 0.8rem;
	margin: 0 0 0.7rem;
	opacity: 0.85;
}

/* Console: research card and paper card. */
.research-card-uopd .uopd-card-figure {
	background: #ffffff;
	border-radius: 0.4rem;
	display: block;
	margin: 1.1rem 0 0;
	overflow: hidden;
}

.research-card-uopd .uopd-card-figure img {
	display: block;
	height: auto;
	width: 100%;
}

.paper-uopd {
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
}

.paper-uopd .paper-image {
	background: #ffffff;
	padding: 1rem 1.2rem;
}

.paper-uopd .paper-image img {
	height: auto;
	object-fit: contain;
}

@media (max-width: 860px) {
	.uopd-figure-pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Academic view: stacked feature (wide method figure) and the open note. */
.research-feature-uopd {
	grid-template-columns: minmax(0, 1fr);
}

.research-feature-uopd figure {
	padding: 0.6rem 0.8rem 0;
}

.research-feature-uopd .uopd-feature-figure {
	border: 0;
	display: block;
}

.research-feature-uopd figure img {
	height: auto;
}

/* The academic template strips native appearance from every input. */
.uopd-lab input.ul-range {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
	height: 1.4rem;
	margin: 0;
	padding: 0;
}

.uopd-disclosure {
	margin: 0 0 1.3em;
}

.uopd-disclosure .academic-methods-body > [data-uopd-lab] {
	margin-top: 1.1rem;
}

/* The console's paper-lab context box paints the BCB method figure behind
   itself; the UOPD box shows its own figure below instead. */
.uopd-section .paper-lab-context::before {
	display: none;
}