/*
 * Opportunita — disciplines index V2 (Release 1.1.55.0).
 *
 * Twenty fixed fields and one honest picture of where research is hiring:
 * a weight mosaic, a rank list, a position-type balance view, the pace lists,
 * the searchable directory and the ready-made searches. Scoped to `.op-dx2`.
 *
 * It reuses the discipline page's `--dp-*` token family rather than declaring
 * a second one. The two screens ship together, share a design system and sit
 * one click apart; a separate `--dx-*` family would be two places to keep the
 * same palette in step, and they would drift.
 *
 * Same three deviations from the handoff as its sibling: inline colour becomes
 * tokens (three appearances), its dim/dark/light map onto the site's
 * light/dim/dark-contrast, and its 1240+40 frame becomes the site's one frame
 * (`.dx-pad` gutter 28/16, `.dx-wrap` 1144 → content edge 148/28/16).
 */

.op-dx2 { font-family: var(--op-font-sans); }

.op-dx2,
.op-dx2 *,
.op-dx2 *::before,
.op-dx2 *::after { box-sizing: border-box; }

.op-dx2 p { margin: 0; }
.op-dx2 h1, .op-dx2 h2, .op-dx2 h3 { margin: 0; color: var(--dp-ink); }
.op-dx2 button { font-family: inherit; }
.op-dx2 [hidden] { display: none !important; }

.op-dx2 :focus-visible {
	outline: 2px solid var(--dp-ac);
	outline-offset: 2px;
	border-radius: 8px;
}

/*
 * The detail panel's primary action is the design's designated gold CTA in
 * light and the accent everywhere else, so it reads from its own token rather
 * than from the page accent.
 */
.op-dx2 .dx-detail__acts a.dx-cta--primary { background: var(--dp-goldcta); color: var(--dp-goldcta-ink); }

/* The shared-sheet anchor trap: re-assert at (0,2,1). See the sibling sheet. */
.op-dx2 a.dx-cta--primary { color: var(--dp-onac); }
.op-dx2 a.dx-cta--ghost { color: var(--dp-t1); }
.op-dx2 a.dx-chip { color: var(--dp-t2); }

/* ---- Frame ------------------------------------------------------------ */
.dx-page {
	container-type: inline-size;
	width: 100%;
	background: var(--dp-bg);
}

.dx-pad { padding-inline: 28px; }
.dx-wrap { max-width: 1144px; margin: 0 auto; }
.dx-section { padding-block: 40px; }
.dx-section--panel { background: var(--dp-panel); border-block: 1px solid var(--dp-wa08); }

.dx-h1 { font-size: 42px; font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: pretty; }
.dx-secttl { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dx-lead { color: var(--dp-t4); font-size: 16.5px; line-height: 1.68; text-wrap: pretty; }
.dx-sub { color: var(--dp-t4); font-size: 13.5px; line-height: 1.66; margin-top: 6px; max-width: 760px; text-wrap: pretty; }
.dx-eyebrow { color: var(--dp-ac); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dx-foot { color: var(--dp-t6); font-size: 12px; line-height: 1.6; margin-top: 14px; max-width: 74ch; }
.dx-mono { font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* ---- Hero ------------------------------------------------------------- */
.dx-hero {
	background: var(--dp-panel);
	background-image: radial-gradient(var(--dp-dot) 1px, transparent 1px);
	background-position: -14px -14px;
	background-size: 32px 32px;
	border-bottom: 1px solid var(--dp-wa08);
	padding-block: 24px 36px;
}

.dx-herostack { display: flex; flex-direction: column; gap: 22px; }
.dx-crumb { align-items: center; color: var(--dp-t5); display: flex; flex-wrap: wrap; font-size: 11.5px; gap: 8px; }
.dx-crumb a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.dx-crumb a:hover { color: var(--dp-ac); }
.dx-crumb__here { color: var(--dp-t3); }

.dx-herotop { align-items: end; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 372px; }
.dx-herotext { display: flex; flex-direction: column; gap: 16px; max-width: 820px; min-width: 0; }
.dx-heroctas { display: flex; flex-wrap: wrap; gap: 11px; }

.dx-cta {
	align-items: center;
	border-radius: 12px;
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 700;
	gap: 9px;
	justify-content: center;
	padding: 12px 17px;
	text-decoration: none;
	transition: filter 170ms ease, background 170ms ease, border-color 170ms ease, transform 170ms ease;
	white-space: nowrap;
}

.dx-cta--primary { background: var(--dp-ac); color: var(--dp-onac); }
.dx-cta--primary:hover { filter: brightness(1.08); }
.dx-cta--ghost { background: transparent; border: 1px solid var(--dp-wa10); color: var(--dp-t1); }
.dx-cta--ghost:hover { background: var(--dp-wa05); border-color: var(--dp-wa14); }
.dx-cta:active { transform: scale(0.98); }
.dx-cta--sm { font-size: 12.5px; padding: 9px 13px; }

.dx-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dx-stat {
	background: var(--dp-panel);
	border: 1px solid var(--dp-wa08);
	border-radius: 14px;
	box-shadow: var(--dp-shxs);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 15px;
}

.dx-stat__n { color: var(--dp-ink); font-family: var(--op-font-mono, ui-monospace, monospace); font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.dx-stat__l { color: var(--dp-t5); font-size: 11.5px; line-height: 1.4; }
.dx-stat--accent .dx-stat__n { color: var(--dp-ac); }

/* ---- Field weight: heading + segmented control ------------------------ */
/*
 * Three areas, not two columns: the heading owns its own row so the aside can
 * begin level with the FIRST TILE rather than with the section title. Putting
 * the head inside the left column made the aside start a heading-height too
 * high, which is what the handoff's own grid-row assignment avoids.
 */
.dx-split { align-items: start; column-gap: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 356px; row-gap: 14px; }
.dx-splithead { align-items: end; display: flex; flex-wrap: wrap; gap: 16px; grid-column: 1; grid-row: 1; justify-content: space-between; min-width: 0; }
.dx-splitmain { grid-column: 1; grid-row: 2; min-width: 0; }

.dx-seg {
	background: var(--dp-wa05);
	border: 1px solid var(--dp-wa08);
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 3px;
	padding: 3px;
}

.dx-seg__btn {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--dp-t4);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 14px;
	transition: background 160ms ease, color 160ms ease;
	white-space: nowrap;
}

.dx-seg__btn:hover { color: var(--dp-t1); }
.dx-seg__btn[aria-pressed="true"] { background: var(--dp-segbg); color: var(--dp-segink); }

/* ---- View: weight mosaic ---------------------------------------------- */
.dx-mass { display: grid; gap: 8px; grid-auto-rows: minmax(58px, auto); grid-template-columns: repeat(12, minmax(0, 1fr)); }

/*
 * The tile is the handoff's own: icon at the top, figure and name at the
 * bottom, area carried by a column AND a row span rather than by a min-height,
 * and every colour and size read from the design file rather than approximated.
 */
.dx-tile {
	align-items: flex-start;
	background: color-mix(in oklab, var(--dp-tile-a) calc((var(--dp-tile-k0) + var(--dp-tile-k1) * var(--dx-w, 0)) * 100%), var(--dp-tile-b));
	border: 1px solid var(--dp-tile-bd);
	border-radius: 14px;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/*
	 * Spans come from custom properties rather than inline `grid-column` and
	 * `grid-row`, so the mobile rule can override them — an inline value cannot
	 * be beaten by a stylesheet without !important.
	 */
	grid-column: span var(--dx-span, 3);
	grid-row: span var(--dx-row, 2);
	justify-content: space-between;
	overflow: hidden;
	padding: 11px;
	position: relative;
	text-align: left;
	transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

/* The largest fields carry the wider padding the design gives them. */
.dx-tile[data-big="1"] { padding: 14px; }

.dx-tile:hover { box-shadow: var(--dp-sh); transform: translateY(-2px); }
.dx-tile[aria-pressed="true"] { border-color: var(--dp-tile-sel); box-shadow: var(--dp-tile-ring); }

/* The hover wash is the design's own: a flat veil, not a change in the ramp. */
.dx-tile::after {
	background: var(--dp-wa05);
	content: '';
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 170ms ease;
}
.dx-tile:hover::after { opacity: 1; }

/* The ramp is the tile's own background, so no overlay is needed. */
.dx-tile__fill { display: none; }

.dx-tile > * { position: relative; z-index: 1; }

.dx-tilebody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.dx-tilenum {
	color: var(--dp-tile-num);
	font-family: var(--op-font-mono, ui-monospace, monospace);
	font-size: 21px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-shadow: var(--dp-tile-numshadow);
}
.dx-tile[data-size="lg"] .dx-tilenum { font-size: 29px; }
.dx-tile[data-size="sm"] .dx-tilenum { font-size: 15px; }

.dx-tilename {
	color: var(--dp-tile-name-quiet);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.28;
	text-shadow: var(--dp-tile-nameshadow);
}
.dx-tile[data-strong="1"] .dx-tilename { color: var(--dp-tile-name); }
.dx-tile[data-size="lg"] .dx-tilename { font-size: 13px; }

/* The field's own icon, at the top of the tile and at full strength. */
.dx-tileicon { color: var(--dp-tile-icon-quiet); display: block; flex: 0 0 auto; }
.dx-tile[data-strong="1"] .dx-tileicon { color: var(--dp-tile-icon); }
.dx-tileicon svg { display: block; height: 15px; width: 15px; }
.dx-tile[data-size="lg"] .dx-tileicon svg { height: 18px; width: 18px; }

/* Indexed, nothing open: present and clearly empty, never hidden. */
.dx-tile[data-empty="1"] { background: var(--dp-wa05); border-color: var(--dp-wa08); }
.dx-tile[data-empty="1"] .dx-tilenum,
.dx-tile[data-empty="1"] .dx-tilename,
.dx-tile[data-empty="1"] .dx-tileicon { color: var(--dp-t5); text-shadow: none; }

.dx-legend { align-items: center; color: var(--dp-t6); display: flex; flex-wrap: wrap; font-size: 11px; gap: 14px; margin-top: 14px; }
.dx-legend span { align-items: center; display: inline-flex; gap: 6px; }
.dx-legend i { border-radius: 3px; display: inline-block; height: 10px; width: 22px; }
.dx-legend i.is-high { background: var(--dp-legend-high); }
.dx-legend i.is-low { background: var(--dp-legend-low); opacity: var(--dp-legend-low-op); }
.dx-legend i.is-none { background: var(--dp-wa05); border: 1px solid var(--dp-wa08); }
.dx-legend i.is-low { background: var(--dp-tile-b); }
.dx-legend i.is-high { background: var(--dp-tile-a); }
.dx-legend i.is-none { background: var(--dp-wa05); border: 1px solid var(--dp-wa08); }

/* ---- View: rank + balance rows ---------------------------------------- */
/*
 * The name sits on its own line with the bar directly beneath it, not beside
 * it. Side by side, a long field name either squeezed the bar to nothing or
 * wrapped to two lines and broke the rhythm of the list; stacked, every row is
 * the same height and the bar always has the full width to work with.
 */
.dx-rows {
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 16px;
	box-shadow: var(--dp-shxs);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 6px;
}

.dx-row {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 11px;
	color: inherit;
	cursor: pointer;
	display: grid;
	gap: 12px;
	grid-template-columns: 26px minmax(0, 1fr) 54px;
	padding: 9px 12px;
	text-align: left;
	transition: background 160ms ease;
	width: 100%;
}

.dx-row--nolead { grid-template-columns: minmax(0, 1fr) 54px; }
.dx-row:hover { background: var(--dp-wa05); }
.dx-row[aria-pressed="true"] { background: var(--dp-acw); }

.dx-row__i { color: var(--dp-t6); font-family: var(--op-font-mono, ui-monospace, monospace); font-size: 11px; }

.dx-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.dx-row__name {
	color: var(--dp-t1);
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dx-row__n {
	color: var(--dp-t2);
	font-family: var(--op-font-mono, ui-monospace, monospace);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dx-railwrap { background: var(--dp-wa06); border-radius: 999px; display: block; height: 6px; overflow: hidden; width: 100%; }
.dx-rail { background: var(--dp-rail); border-radius: 999px; display: block; height: 100%; transform-origin: left center; transition: transform 780ms cubic-bezier(0.2, 0, 0, 1); width: 100%; }
/* The one teal bar in the list is the row you picked. */
.dx-row[aria-pressed="true"] .dx-rail { background: var(--dp-ac); }
.dx-pre .dx-rail { transform: scaleX(0); }

/* Stacked position-type bar. */
.dx-stack { border-radius: 999px; display: flex; gap: 2px; height: 10px; overflow: hidden; width: 100%; }
.dx-seg8 { height: 100%; transform-origin: left center; transition: transform 780ms cubic-bezier(0.2, 0, 0, 1); }
.dx-pre .dx-seg8 { transform: scaleX(0); }

.dx-typelegend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.dx-typelegend span { align-items: center; color: var(--dp-t5); display: inline-flex; font-size: 11px; gap: 6px; }
.dx-typelegend i { border-radius: 3px; height: 10px; width: 10px; }

/*
 * Every one of these is a <p>, and `.op-dp2 p { margin: 0 }` is a (0,2,0)
 * selector: a single class never beats it, so the spacing set on the component
 * above silently evaluated to zero — which is what put the directory's result
 * line flat against the first card. Re-asserted here at (0,2,1).
 */
.op-dx2 .dx-sub { margin-top: 6px; }
.op-dx2 .dx-foot { margin-top: 14px; }
.op-dx2 .dx-detail__body { margin-top: 12px; }
.op-dx2 .dx-result { margin-bottom: 24px; }

/* ---- The attached detail panel ---------------------------------------- */
.dx-detail {
	background: var(--dp-wa03);
	border: 1px solid var(--dp-detail-bd);
	border-radius: 14px;
	box-shadow: var(--dp-detail-ring);
	margin-top: 8px;
	padding: 16px;
	position: relative;
}

/* In the mosaic the panel is a full-width cell right after the clicked row. */
.dx-mass .dx-detail { grid-column: 1 / -1; }

.dx-detail::before {
	background: var(--dp-wa03);
	border-left: 1px solid var(--dp-detail-bd);
	border-top: 1px solid var(--dp-detail-bd);
	content: "";
	height: 13px;
	left: var(--dx-caret, 50%);
	position: absolute;
	top: -7px;
	transform: translateX(-50%) rotate(45deg);
	width: 13px;
}

.dx-rows .dx-detail::before { display: none; }

.dx-detail__top { align-items: flex-start; display: flex; gap: 12px; }

.dx-detail__mark {
	background: var(--dp-acw);
	border: 1px solid var(--dp-acb);
	border-radius: 10px;
	color: var(--dp-ac);
	display: grid;
	flex: 0 0 auto;
	height: 38px;
	place-items: center;
	width: 38px;
}

.dx-detail__mark svg { height: 19px; width: 19px; }
.dx-detail__name { color: var(--dp-ink); font-size: 16px; font-weight: 700; }
.dx-detail__meta { color: var(--dp-t6); font-size: 11px; margin-top: 3px; }

.dx-detail__close {
	background: transparent;
	border: 1px solid var(--dp-wa10);
	border-radius: 9px;
	color: var(--dp-t4);
	cursor: pointer;
	display: grid;
	height: 30px;
	margin-left: auto;
	place-items: center;
	transition: background 160ms ease, color 160ms ease;
	width: 30px;
}

.dx-detail__close:hover { background: var(--dp-wa05); color: var(--dp-t1); }

.dx-detstats { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; }
.dx-detstat { background: var(--dp-panel); border: 1px solid var(--dp-wa08); border-radius: 10px; padding: 11px 12px; }
.dx-detstat b { color: var(--dp-t1); display: block; font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 700; }

/*
 * The figures carry their own meaning: the three that describe supply take the
 * accent, the deadline one takes the urgency hue, and the neutral one stays
 * neutral. Reading the panel should not require reading every label.
 */
.dx-detstat--accent b { color: var(--dp-ac); }
.dx-detstat--ind b { color: var(--dp-ind); }
.dx-detstat--quiet b { color: var(--dp-t5); }
.dx-detstat--amber b { color: var(--dp-amber); }

.dx-detstat span {
	color: var(--dp-t6);
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.4;
	margin-top: 3px;
	text-transform: uppercase;
}
.dx-detail__body { color: var(--dp-t4); font-size: 12.5px; line-height: 1.6; margin-top: 12px; }
.dx-detail__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---- Distribution aside ----------------------------------------------- */
.dx-aside { grid-column: 2; grid-row: 2; position: sticky; top: 118px; }

.dx-card {
	background: var(--dp-panel);
	border: 1px solid var(--dp-wa08);
	border-radius: 16px;
	box-shadow: var(--dp-shxs);
	padding: 18px;
}

.dx-asidehead { align-items: center; display: flex; gap: 10px; justify-content: space-between; }

.dx-tier { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.dx-tier__top { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.dx-tier__l { color: var(--dp-t2); font-size: 12.5px; font-weight: 600; }
.dx-tier__v { color: var(--dp-t5); font-family: var(--op-font-mono, ui-monospace, monospace); font-size: 11.5px; }
.dx-tier:nth-of-type(1) .dx-rail { background: var(--dp-ac); }
.dx-tier:nth-of-type(2) .dx-rail { background: var(--dp-tier2); }
.dx-tier:nth-of-type(3) .dx-rail { background: var(--dp-tier3); }

/* Four boxed figures, the 1px gap on a hairline background doing the dividing. */
.dx-facts {
	background: var(--dp-wa08);
	border: 1px solid var(--dp-wa08);
	border-radius: 14px;
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 16px;
	overflow: hidden;
}

.dx-fact { background: var(--dp-panel); display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; }
.dx-fact b { color: var(--dp-t1); font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 700; }
.dx-fact--amber b { color: var(--dp-amber); }
.dx-fact--accent b { color: var(--dp-statgold); }
.dx-fact span { color: var(--dp-t6); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; line-height: 1.4; text-transform: uppercase; }
.dx-updated { color: var(--dp-t6); font-family: var(--op-font-mono, ui-monospace, monospace); font-size: 10.5px; }

/* ---- Pace -------------------------------------------------------------- */
.dx-pace { display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-pacelist { display: flex; flex-direction: column; margin-top: 14px; }

.dx-pacelist {
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 16px;
	gap: 2px;
	padding: 8px 6px;
}

.dx-pacerow {
	align-items: center;
	border-radius: 11px;
	color: inherit;
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr) 92px 62px;
	padding: 10px 12px;
	text-decoration: none;
	transition: background 160ms ease;
}

.dx-pacerow:hover { background: var(--dp-wa05); }
.dx-pacerow__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.dx-pacerow__name {
	color: var(--dp-t1);
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dx-pacerow .dx-railwrap { height: 5px; }

.dx-pacerow__pct {
	font-family: var(--op-font-mono, ui-monospace, monospace);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dx-pacerow__n {
	color: var(--dp-t2);
	font-family: var(--op-font-mono, ui-monospace, monospace);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dx-pace--amber .dx-rail { background: var(--dp-amber); }
.dx-pace--amber .dx-eyebrow,
.dx-pace--amber .dx-pacerow__pct { color: var(--dp-amber); }
.dx-pace--fresh .dx-rail { background: var(--dp-ac); }
.dx-pace--fresh .dx-pacerow__pct { color: var(--dp-ac); }

/* ---- Directory --------------------------------------------------------- */
.dx-toolbar { align-items: center; display: flex; flex-wrap: nowrap; gap: 12px; margin: 18px 0 14px; min-width: 0; }

.dx-search {
	align-items: center;
	background: var(--dp-wa05);
	border: 1px solid var(--dp-wa08);
	border-radius: 12px;
	display: flex;
	flex: 0 1 300px;
	gap: 9px;
	height: 44px;
	padding: 0 14px;
}

.dx-search svg { color: var(--dp-t5); flex: 0 0 auto; }
.dx-search input { background: transparent; border: 0; color: var(--dp-t1); font-family: inherit; font-size: 13.5px; min-width: 0; outline: 0; width: 100%; }
.dx-search input::placeholder { color: var(--dp-t6); }

.dx-chips { display: flex; flex: 1 1 auto; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dx-chips::-webkit-scrollbar { display: none; }

.dx-chip {
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 999px;
	color: var(--dp-t2);
	cursor: pointer;
	font-size: 12px;
	padding: 8px 13px;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
	white-space: nowrap;
}

.dx-chip:hover { background: var(--dp-wa05); border-color: var(--dp-wa14); }
.dx-chip[aria-pressed="true"] { background: var(--dp-acw); border-color: var(--dp-acb); color: var(--dp-ac); }
.dx-chip b { font-family: var(--op-font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 400; margin-left: 5px; opacity: 0.7; }

.dx-result { align-items: center; color: var(--dp-t5); display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 8px; margin-bottom: 24px; }

.dx-clear { background: transparent; border: 0; color: var(--dp-ac); cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

.dx-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dx-fieldcard { display: flex; flex-direction: column; gap: 11px; transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease; }
.dx-fieldcard:hover { border-color: var(--dp-wa14); box-shadow: var(--dp-sh); transform: translateY(-2px); }
.dx-fieldcard__top { align-items: flex-start; display: flex; gap: 10px; }

.dx-fieldcard__mark {
	background: var(--dp-acw);
	border: 1px solid var(--dp-acb);
	border-radius: 10px;
	color: var(--dp-ac);
	display: grid;
	flex: 0 0 auto;
	height: 34px;
	place-items: center;
	width: 34px;
}

.dx-fieldcard__mark svg { height: 17px; width: 17px; }
.dx-fieldcard[data-empty="1"] .dx-fieldcard__mark { background: var(--dp-wa05); border-color: var(--dp-wa08); color: var(--dp-t5); }

.dx-fieldcard__name { color: var(--dp-ink); font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; text-decoration: none; text-wrap: pretty; }
.dx-fieldcard__name:hover { color: var(--dp-ac); }
.dx-fieldcard__cluster { color: var(--dp-t6); display: block; font-size: 11px; margin-top: 3px; }

.dx-badge { background: var(--dp-acw); border: 1px solid var(--dp-acb); border-radius: 999px; color: var(--dp-ac); flex: 0 0 auto; font-size: 10.5px; font-weight: 700; margin-left: auto; padding: 4px 9px; white-space: nowrap; }
.dx-fieldcard[data-empty="1"] .dx-badge { background: var(--dp-wa05); border-color: var(--dp-wa08); color: var(--dp-t5); }

.dx-fieldcard__body { color: var(--dp-t4); font-size: 12px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/*
 * A bordered box with hairline dividers rather than a bare row: the three
 * numbers are the card's evidence, and they need to read as one unit.
 */
.dx-strip {
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 12px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
}

.dx-strip div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 11px; }
.dx-strip div + div { border-left: 1px solid var(--dp-wa08); }
.dx-strip b { color: var(--dp-t1); font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 700; }
.dx-strip div:first-child b { color: var(--dp-ac); }
.dx-fieldcard[data-empty="1"] .dx-strip div:first-child b { color: var(--dp-t5); }

.dx-strip span {
	color: var(--dp-t6);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.dx-kws { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-kw { background: var(--dp-wa03); border: 1px solid var(--dp-wa08); border-radius: 999px; color: var(--dp-t5); font-size: 10.5px; padding: 4px 9px; }

.dx-fieldcard__acts { align-items: center; display: flex; gap: 10px; margin-top: auto; padding-top: 2px; }

/* The primary action is a real button; "View offers" stays a quiet link. */
.dx-cardcta {
	align-items: center;
	background: var(--dp-wa08);
	border: 1px solid var(--dp-wa14);
	border-radius: 12px;
	color: var(--dp-ink);
	display: inline-flex;
	flex: 1 1 auto;
	font-size: 12.5px;
	font-weight: 700;
	gap: 8px;
	padding: 11px 14px;
	text-decoration: none;
	transition: background 170ms ease, border-color 170ms ease, transform 170ms ease;
}

.op-dx2 a.dx-cardcta { color: var(--dp-ink); }
.dx-cardcta:hover { background: var(--dp-wa14); border-color: var(--dp-wa22); }
.dx-cardcta:active { transform: scale(0.97); }
.dx-cardcta svg { margin-left: auto; }

.dx-textlink {
	align-items: center;
	color: var(--dp-t5);
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	text-decoration: none;
	white-space: nowrap;
}

.op-dx2 a.dx-textlink { color: var(--dp-t5); }
.dx-textlink:hover, .op-dx2 a.dx-textlink:hover { color: var(--dp-ac); }
.dx-muted { color: var(--dp-t6); font-size: 12px; }

.dx-empty { background: var(--dp-panel); border: 1px solid var(--dp-wa08); border-radius: 16px; color: var(--dp-t4); padding: 30px; text-align: center; }
.dx-empty h3 { font-size: 17px; margin-bottom: 6px; }
.dx-empty p { margin: 0 auto 14px; max-width: 52ch; font-size: 13px; line-height: 1.6; }

/* ---- Presets ----------------------------------------------------------- */
.dx-presethead { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 18px; }

.dx-presets { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.dx-preset { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.dx-preset:hover { border-color: var(--dp-acb); box-shadow: var(--dp-sh); transform: translateY(-2px); }

.dx-pills { display: flex; flex-wrap: wrap; gap: 7px; }

/*
 * A pill states which filter it sets before it states the value — the card's
 * promise is "these two filters, already applied", and a bare value would not
 * say which control it lands in.
 */
.dx-pill {
	align-items: center;
	background: var(--dp-wa05);
	border: 1px solid var(--dp-wa08);
	border-radius: 999px;
	color: var(--dp-t2);
	display: inline-flex;
	font-size: 11.5px;
	font-weight: 600;
	gap: 7px;
	padding: 5px 11px;
}

.dx-pill b {
	color: var(--dp-t6);
	font-family: var(--op-font-mono, ui-monospace, monospace);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dx-presetline { align-items: baseline; display: flex; gap: 9px; }
.dx-preset__n { color: var(--dp-ink); font-family: var(--op-font-mono, ui-monospace, monospace); font-size: 27px; font-weight: 700; line-height: 1; }
.dx-preset__l { color: var(--dp-t4); font-size: 12.5px; }

.dx-presetact { align-items: center; color: var(--dp-ac); display: flex; font-size: 12.5px; font-weight: 700; gap: 10px; justify-content: space-between; margin-top: auto; }
.dx-presetact svg { flex: 0 0 auto; transition: transform 170ms ease; }
.dx-preset:hover .dx-presetact svg { transform: translateX(3px); }

/* The trust note reads as one line of prose beside its mark, not under it. */
.dx-trust {
	align-items: flex-start;
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 16px;
	display: flex;
	gap: 14px;
	margin-top: 18px;
	padding: 18px;
}

.dx-trust__mark {
	background: var(--dp-acw);
	border: 1px solid var(--dp-acb);
	border-radius: 12px;
	color: var(--dp-ac);
	display: grid;
	flex: 0 0 auto;
	height: 40px;
	place-items: center;
	width: 40px;
}

.dx-trust__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dx-trust strong { color: var(--dp-ink); font-size: 13.5px; }
.dx-trust p { color: var(--dp-t4); font-size: 12.5px; line-height: 1.6; }

/* ---- Reveal ------------------------------------------------------------ */
.dx-rev { transition: opacity 440ms cubic-bezier(0.2, 0, 0, 1), transform 440ms cubic-bezier(0.2, 0, 0, 1); }
.dx-rev.dx-pre { opacity: 0; transform: translateY(14px); }
.dx-rev.is-in { opacity: 1; transform: none; }
.dx-stag > *:nth-child(2) { transition-delay: 45ms; }
.dx-stag > *:nth-child(3) { transition-delay: 90ms; }
.dx-stag > *:nth-child(4) { transition-delay: 135ms; }
.dx-stag > *:nth-child(5) { transition-delay: 180ms; }
.dx-stag > *:nth-child(n+6) { transition-delay: 225ms; }

/* ---- Container queries ------------------------------------------------- */
@container (max-width: 1080px) {
	.dx-h1 { font-size: 34px; }
	.dx-herotop { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.dx-split { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.dx-splithead,
	.dx-splitmain,
	.dx-aside { grid-column: 1; }
	.dx-splitmain { grid-row: 2; }
	.dx-aside { grid-row: 3; position: static; }
	.dx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dx-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dx-detstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dx-presethead { align-items: flex-start; flex-direction: column; }
	.dx-row__name { width: 150px; }
}

@container (max-width: 720px) {
	.dx-pad { padding-inline: 16px; }
	.dx-h1 { font-size: 27px; }
	.dx-secttl { font-size: 21px; }
	.dx-lead { font-size: 14.5px; }
	.dx-grid { grid-template-columns: minmax(0, 1fr); }
	.dx-presets { grid-template-columns: minmax(0, 1fr); }
	.dx-pace { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.dx-detstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dx-heroctas .dx-cta { flex: 1 1 100%; }

	.dx-tap { min-height: 44px; }
	.dx-cta { min-height: 44px; }
	.dx-toolbar { flex-wrap: wrap; }
	.dx-search { flex: 1 1 100%; }

	/*
	 * The mosaic drops proportional sizing entirely: the grid stays twelve
	 * columns and every tile spans six, so they sit two per row at a readable
	 * size. Keeping the twelve-column grid is what matters — switching the
	 * grid to six columns while the tiles still carried their twelve-column
	 * spans made them overlap and clip.
	 */
	.dx-mass { gap: 6px; grid-auto-rows: auto; }
	.dx-tile { grid-column: span 6; grid-row: auto; min-height: 96px; }
	.dx-tile .dx-tilenum,
	.dx-tile[data-size="lg"] .dx-tilenum,
	.dx-tile[data-size="sm"] .dx-tilenum { font-size: 22px; }
	.dx-tile .dx-tilename,
	.dx-tile[data-size="lg"] .dx-tilename { font-size: 12px; }
	.dx-detail::before { display: none; }

	/* The rows already stack name over bar, so they only need tighter gutters. */
	.dx-row { gap: 8px; grid-template-columns: 22px minmax(0, 1fr) 44px; padding: 9px 8px; }
	.dx-row--nolead { grid-template-columns: minmax(0, 1fr) 44px; }
	.dx-pacerow { gap: 8px; grid-template-columns: minmax(0, 1fr) 74px 44px; padding: 10px 8px; }

	/* The strip STAYS three-up; it tightens rather than wrapping to two. */
	.dx-strip div { padding: 9px 8px; }
	.dx-strip b { font-size: 15px; }
	.dx-strip span { font-size: 8.5px; letter-spacing: 0.05em; }
	.dx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.op-dx2 .dx-rev,
	.op-dx2 .dx-rev.dx-pre { opacity: 1; transform: none; transition: none; }
	.op-dx2 .dx-rail,
	.op-dx2 .dx-pre .dx-rail,
	.op-dx2 .dx-seg8,
	.op-dx2 .dx-pre .dx-seg8 { transform: scaleX(1); transition: none; }
	.op-dx2 .dx-tile:hover,
	.op-dx2 .dx-fieldcard:hover,
	.op-dx2 .dx-preset:hover { transform: none; }
	.op-dx2 * { animation-duration: 0.01ms !important; }
}