/*
 * Opportunita — discipline page V2 (Release 1.1.54.0).
 *
 * One academic field: how many positions are open, what kinds, when they close,
 * where they are, who is hiring and what they ask for — then a handoff to the
 * filtered search. Scoped to `.op-dp2`.
 *
 * THREE DELIBERATE DEVIATIONS FROM THE HANDOFF.
 *
 * 1. The prototype carries most of its colour, size and spacing inline and
 *    keeps only structure in a <style> block. Inline values cannot follow an
 *    appearance, and this site has three, so every value here is a `--dp-*`
 *    token declared three times. The numbers are the prototype's.
 *
 * 2. Its theme names are dim / dark / light with dim as the default. The site's
 *    are light (the bare class), dim and dark-contrast, and light is the
 *    default. Same three palettes, re-pointed at the appearance the site
 *    actually publishes.
 *
 * 3. It frames content at 1240 + 40px padding. The site has one content frame,
 *    Browse's, and this page has to line up with the header, the footer and
 *    every other public template: `.dp-pad` carries the 28/16 gutter and
 *    `.dp-wrap` caps at 1144, giving the standard 148 / 28 / 16 content edge.
 *
 * Layout is container queries on `.dp-page`, per the spec, so the page answers
 * to the space it is given rather than to the window.
 */

.op-dp2 {
	/* ---- Light (site default) ---- */
	--dp-bg: #f6f7f8;
	--dp-panel: #ffffff;
	--dp-pop: #f4f6f8;
	--dp-ink: #15202b;
	--dp-t0: #15202b;
	--dp-t1: #2f3b46;
	--dp-t2: #46525c;
	--dp-t3: #46525c;
	--dp-t4: #5c6670;
	--dp-t5: #5c6670;
	--dp-t6: #697380;
	--dp-ac: #12615d;
	--dp-ac2: #0d4744;
	--dp-onac: #ffffff;
	--dp-acw: rgba(18, 97, 93, 0.07);
	--dp-acb: rgba(18, 97, 93, 0.24);
	--dp-rose: #be123c;
	--dp-onrose: #ffffff;
	--dp-rosew: rgba(190, 18, 60, 0.06);
	--dp-roseb: rgba(190, 18, 60, 0.22);
	--dp-amber: #b45309;
	--dp-amberw: rgba(180, 83, 9, 0.06);
	--dp-amberb: rgba(180, 83, 9, 0.22);
	--dp-ind: #4f46e5;
	--dp-onind: #ffffff;
	--dp-indw: rgba(79, 70, 229, 0.06);
	--dp-indb: rgba(79, 70, 229, 0.20);
	--dp-wa03: #fbfcfd;
	--dp-wa05: rgba(21, 32, 43, 0.04);
	--dp-wa06: #e6eaee;
	--dp-wa08: #d9dee3;
	--dp-wa10: #d2d8dd;
	--dp-wa14: #c2cad1;
	--dp-wa22: #aab3bc;
	--dp-sh: 0 10px 28px rgba(21, 32, 43, 0.10);
	--dp-shxs: 0 1px 2px rgba(21, 32, 43, 0.06);
	--dp-dot: rgba(21, 32, 43, 0.14);
	--dp-imgline: rgba(0, 0, 0, 0.10);

	/*
	 * The chart palette. Light is NOT the dark palette on a white ground: the
	 * handoff switches the whole data-visualisation family to one warm gold
	 * ramp and reserves teal for four designated highlights — the PhD series,
	 * the Top-5 tier, the primary metric and the primary CTA. Teal on white at
	 * chart weight competes with the interface; gold recedes and lets the one
	 * teal thing on screen mean something.
	 *
	 * These are literal hexes on purpose. They are a chart palette, not UI
	 * chrome, and they must not drift with the surface tokens.
	 */
	--dpt-phd: #12615d;
	--dpt-postdoc: #d97706;
	--dpt-researcher: #b45309;
	--dpt-student: #eab308;
	--dpt-professor: #7c3a06;
	--dpt-research_assistant: #c99a5b;
	--dpt-lecturer: #f5d67a;
	--dpt-fellowship: #8a7350;
	--dpt-administrative: #a8a29e;
	--dpt-other: #d6d3d1;

	--dp-rail: #e3b168;
	--dp-tier2: #d97706;
	--dp-tier3: #eab308;
	/*
	 * The mosaic tile, straight from the handoff's own tileStyle(): light runs
	 * a gold ramp between two fixed hues at the plain weight; dim and dark mix
	 * the accent INTO the panel over a 14%-76% band. k0/k1 carry that
	 * difference so both cases can share one background declaration.
	 */
	--dp-tile-a: #d97706;
	--dp-tile-b: #eab308;
	--dp-tile-k0: 0;
	--dp-tile-k1: 1;
	--dp-tile-bd: rgba(120, 53, 15, 0.22);
	--dp-tile-sel: #92400e;
	--dp-tile-ring: 0 0 0 3px rgba(146, 64, 14, 0.18);
	--dp-tile-num: #ffffff;
	--dp-tile-name: #ffffff;
	--dp-tile-name-quiet: #ffffff;
	--dp-tile-icon: rgba(255, 255, 255, 0.94);
	--dp-tile-icon-quiet: rgba(255, 255, 255, 0.94);
	--dp-tile-numshadow: 0 1px 2px rgba(120, 53, 15, 0.42);
	--dp-tile-nameshadow: 0 1px 2px rgba(120, 53, 15, 0.45);
	--dp-legend-high: #d97706;
	--dp-legend-low: #eab308;
	--dp-legend-low-op: 1;
	--dp-goldcta: #c2670c;
	--dp-goldcta-ink: #ffffff;
	--dp-detail-bd: #d97706;
	--dp-detail-ring: 0 0 0 4px rgba(217, 119, 6, 0.12);
	--dp-segbg: rgba(217, 119, 6, 0.12);
	--dp-segink: #b45309;
	--dp-statgold: #b45309;

	background: var(--dp-bg);
	color: var(--dp-t2);
	font-family: var(--op-font-sans);
}

html[data-op-theme="dim"] .op-dp2 {
	--dp-bg: #0b1220;
	--dp-panel: #0b1322;
	--dp-pop: #131c2e;
	--dp-ink: #ffffff;
	--dp-t0: #f1f5f9;
	--dp-t1: #e2e8f0;
	--dp-t2: #cbd5e1;
	--dp-t3: #a7b3c4;
	--dp-t4: #94a3b8;
	--dp-t5: #8b98ad;
	--dp-t6: #7e8ba0;
	--dp-ac: #2dd4bf;
	--dp-ac2: #5eead4;
	--dp-onac: #06231f;
	--dp-acw: rgba(45, 212, 191, 0.10);
	--dp-acb: rgba(45, 212, 191, 0.26);
	--dp-rose: #fb7185;
	--dp-onrose: #2b0a12;
	--dp-rosew: rgba(251, 113, 133, 0.10);
	--dp-roseb: rgba(251, 113, 133, 0.28);
	--dp-amber: #fbbf24;
	--dp-amberw: rgba(251, 191, 36, 0.10);
	--dp-amberb: rgba(251, 191, 36, 0.26);
	--dp-ind: #a5b4fc;
	--dp-onind: #131c2e;
	--dp-indw: rgba(165, 180, 252, 0.10);
	--dp-indb: rgba(165, 180, 252, 0.26);
	--dp-wa03: rgba(255, 255, 255, 0.03);
	--dp-wa05: rgba(255, 255, 255, 0.05);
	--dp-wa06: rgba(255, 255, 255, 0.06);
	--dp-wa08: rgba(255, 255, 255, 0.08);
	--dp-wa10: rgba(255, 255, 255, 0.10);
	--dp-wa14: rgba(255, 255, 255, 0.14);
	--dp-wa22: rgba(255, 255, 255, 0.22);
	--dp-sh: 0 10px 30px rgba(0, 0, 0, 0.42);
	--dp-shxs: 0 1px 2px rgba(0, 0, 0, 0.30);
	--dp-dot: rgba(148, 163, 184, 0.16);
	--dp-imgline: rgba(255, 255, 255, 0.10);

	/* On a dark ground the family keeps its own hues; gold is a light-only rule. */
	--dpt-phd: #a5b4fc;
	--dpt-postdoc: #2dd4bf;
	--dpt-researcher: #5eead4;
	--dpt-student: rgba(255, 255, 255, 0.30);
	--dpt-professor: #fb7185;
	--dpt-research_assistant: #a7b3c4;
	--dpt-lecturer: #fbbf24;
	--dpt-fellowship: #7e8ba0;
	--dpt-administrative: rgba(255, 255, 255, 0.18);
	--dpt-other: rgba(255, 255, 255, 0.12);

	--dp-rail: rgba(255, 255, 255, 0.22);
	--dp-tier2: #a5b4fc;
	--dp-tier3: rgba(255, 255, 255, 0.22);
	--dp-tile-a: var(--dp-ac);
	--dp-tile-b: var(--dp-panel);
	--dp-tile-k0: 0.14;
	--dp-tile-k1: 0.62;
	--dp-tile-bd: var(--dp-wa08);
	--dp-tile-sel: var(--dp-ac);
	--dp-tile-ring: 0 0 0 3px var(--dp-acw);
	--dp-tile-num: var(--dp-ink);
	--dp-tile-name: var(--dp-t1);
	--dp-tile-name-quiet: var(--dp-t4);
	--dp-tile-icon: var(--dp-ink);
	--dp-tile-icon-quiet: var(--dp-t4);
	--dp-tile-numshadow: none;
	--dp-tile-nameshadow: none;
	--dp-legend-high: var(--dp-ac);
	--dp-legend-low: var(--dp-ac);
	--dp-legend-low-op: 0.32;
	--dp-goldcta: #2dd4bf;
	--dp-goldcta-ink: #06231f;
	--dp-detail-bd: var(--dp-ac);
	--dp-detail-ring: 0 0 0 4px rgba(45, 212, 191, 0.10);
	--dp-segbg: #f1f5f9;
	--dp-segink: #0b1220;
	--dp-statgold: #2dd4bf;
}

html[data-op-theme="dark-contrast"] .op-dp2 {
	--dp-bg: #101013;
	--dp-panel: #16161a;
	--dp-pop: #1d1d20;
	--dp-ink: #f9fafb;
	--dp-t0: #f3f4f6;
	--dp-t1: #e5e7eb;
	--dp-t2: #d1d5db;
	--dp-t3: #c3c8cf;
	--dp-t4: #9ca3af;
	--dp-t5: #9ca3af;
	--dp-t6: #878e99;
	--dp-ac: #2dd4bf;
	--dp-ac2: #5eead4;
	--dp-onac: #061412;
	--dp-acw: rgba(45, 212, 191, 0.10);
	--dp-acb: rgba(45, 212, 191, 0.28);
	--dp-rose: #fb7185;
	--dp-onrose: #2b0a12;
	--dp-rosew: rgba(251, 113, 133, 0.10);
	--dp-roseb: rgba(251, 113, 133, 0.30);
	--dp-amber: #fbbf24;
	--dp-amberw: rgba(251, 191, 36, 0.10);
	--dp-amberb: rgba(251, 191, 36, 0.28);
	--dp-ind: #a5b4fc;
	--dp-onind: #16161a;
	--dp-indw: rgba(165, 180, 252, 0.10);
	--dp-indb: rgba(165, 180, 252, 0.28);
	--dp-wa03: rgba(255, 255, 255, 0.04);
	--dp-wa05: rgba(255, 255, 255, 0.06);
	--dp-wa06: rgba(255, 255, 255, 0.07);
	--dp-wa08: rgba(255, 255, 255, 0.10);
	--dp-wa10: rgba(255, 255, 255, 0.12);
	--dp-wa14: rgba(255, 255, 255, 0.16);
	--dp-wa22: rgba(255, 255, 255, 0.22);
	--dp-sh: 0 10px 30px rgba(0, 0, 0, 0.55);
	--dp-shxs: 0 1px 2px rgba(0, 0, 0, 0.40);
	--dp-dot: rgba(255, 255, 255, 0.10);
	--dp-imgline: rgba(255, 255, 255, 0.10);

	/* On a dark ground the family keeps its own hues; gold is a light-only rule. */
	--dpt-phd: #a5b4fc;
	--dpt-postdoc: #2dd4bf;
	--dpt-researcher: #5eead4;
	--dpt-student: rgba(255, 255, 255, 0.30);
	--dpt-professor: #fb7185;
	--dpt-research_assistant: #c3c8cf;
	--dpt-lecturer: #fbbf24;
	--dpt-fellowship: #878e99;
	--dpt-administrative: rgba(255, 255, 255, 0.18);
	--dpt-other: rgba(255, 255, 255, 0.12);

	--dp-rail: rgba(255, 255, 255, 0.22);
	--dp-tier2: #a5b4fc;
	--dp-tier3: rgba(255, 255, 255, 0.22);
	--dp-tile-a: var(--dp-ac);
	--dp-tile-b: var(--dp-panel);
	--dp-tile-k0: 0.14;
	--dp-tile-k1: 0.62;
	--dp-tile-bd: var(--dp-wa08);
	--dp-tile-sel: var(--dp-ac);
	--dp-tile-ring: 0 0 0 3px var(--dp-acw);
	--dp-tile-num: var(--dp-ink);
	--dp-tile-name: var(--dp-t1);
	--dp-tile-name-quiet: var(--dp-t4);
	--dp-tile-icon: var(--dp-ink);
	--dp-tile-icon-quiet: var(--dp-t4);
	--dp-tile-numshadow: none;
	--dp-tile-nameshadow: none;
	--dp-legend-high: var(--dp-ac);
	--dp-legend-low: var(--dp-ac);
	--dp-legend-low-op: 0.32;
	--dp-goldcta: #2dd4bf;
	--dp-goldcta-ink: #061412;
	--dp-detail-bd: var(--dp-ac);
	--dp-detail-ring: 0 0 0 4px rgba(45, 212, 191, 0.10);
	--dp-segbg: #f3f4f6;
	--dp-segink: #101013;
	--dp-statgold: #2dd4bf;
}

/* ---- Reset, scoped ---------------------------------------------------- */
.op-dp2,
.op-dp2 *,
.op-dp2 *::before,
.op-dp2 *::after { box-sizing: border-box; }

.op-dp2 p { margin: 0; }
.op-dp2 h1, .op-dp2 h2, .op-dp2 h3 { margin: 0; color: var(--dp-ink); }
.op-dp2 ol, .op-dp2 ul { margin: 0; padding: 0; list-style: none; }
.op-dp2 button { font-family: inherit; }

/*
 * `[hidden]` loses to any `display` rule, and every panel here is a grid or a
 * flex row. Without this the whole page renders at once on first paint.
 */
.op-dp2 [hidden] { display: none !important; }

/*
 * `.op-public-page a { color: inherit }` lives in the shared frontend sheet at
 * (0,2,0) and swallows any single-class colour an anchor sets here — the
 * primary CTA rendered slate-on-teal at 1.1:1 before this block existed, and
 * the back link and keyword chips lost their own tones the same way.
 *
 * These four are the anchors in this file that set a colour of their own, so
 * they are re-asserted at (0,2,1): higher than the shared rule rather than
 * merely later than it, because a tie would leave the page depending on
 * stylesheet order to look right.
 */
.op-dp2 a.dp-cta--primary { color: var(--dp-onac); }
.op-dp2 a.dp-cta--ghost { color: var(--dp-t1); }
.op-dp2 a.dp-back { color: var(--dp-t5); }
.op-dp2 a.dp-back:hover { color: var(--dp-ac); }
.op-dp2 a.dp-kw { color: var(--dp-t2); }
.op-dp2 a.dp-kw:hover { color: var(--dp-ac); }

/* A visible focus ring on every control, from the accent token. */
.op-dp2 :focus-visible {
	outline: 2px solid var(--dp-ac);
	outline-offset: 2px;
	border-radius: 8px;
}

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

.dp-pad { padding-inline: 28px; }
.dp-wrap { max-width: 1144px; margin: 0 auto; }

.dp-h1 {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.032em;
	text-wrap: pretty;
}

.dp-secttl {
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.dp-sectsub {
	color: var(--dp-t4);
	font-size: 13.5px;
	line-height: 1.6;
	margin-top: 6px;
}

.dp-sechead { margin-bottom: 18px; }

.dp-section { padding-block: 34px; }
.dp-section--panel { background: var(--dp-panel); border-top: 1px solid var(--dp-wa08); }

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

.dp-herostack { display: flex; flex-direction: column; gap: 26px; }

.dp-crumbline { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }

.dp-crumb {
	align-items: center;
	color: var(--dp-t5);
	display: flex;
	flex-wrap: wrap;
	font-size: 11.5px;
	gap: 8px;
}

.dp-crumb a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.dp-crumb a:hover { color: var(--dp-ac); }
.dp-crumb__here { color: var(--dp-t3); }

.dp-back {
	align-items: center;
	color: var(--dp-t5);
	display: inline-flex;
	font-size: 11.5px;
	font-weight: 600;
	gap: 6px;
	text-decoration: none;
	transition: color 160ms ease;
}

.dp-back:hover { color: var(--dp-ac); }
.dp-back svg { flex: 0 0 auto; transition: transform 160ms ease; }
.dp-back:hover svg { transform: translateX(-3px); }

.dp-herotop {
	align-items: start;
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(0, 1fr) 372px;
}

.dp-herotext { display: flex; flex-direction: column; gap: 17px; min-width: 0; }

.dp-eyebrow { align-items: center; display: flex; gap: 11px; }

.dp-eyebrow__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: 42px;
	place-items: center;
	width: 42px;
}

.dp-eyebrow__mark svg { height: 21px; width: 21px; }
.dp-eyebrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dp-kicker {
	color: var(--dp-ac);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dp-index {
	color: var(--dp-t6);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 11px;
}

.dp-lead {
	color: var(--dp-t4);
	font-size: 16.5px;
	line-height: 1.68;
	max-width: 70ch;
	text-wrap: pretty;
}

.dp-herofoot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.dp-herocta { display: grid; grid-template-columns: auto auto; gap: 11px; }

.dp-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;
}

.dp-cta--primary { background: var(--dp-ac); color: var(--dp-onac); }
.dp-cta--primary:hover { filter: brightness(1.08); }

.dp-cta--ghost {
	background: transparent;
	border: 1px solid var(--dp-wa10);
	color: var(--dp-t1);
}

.dp-cta--ghost:hover { background: var(--dp-wa05); border-color: var(--dp-wa14); }
.dp-cta:active { transform: scale(0.98); }

.dp-herotrust {
	align-items: center;
	background: var(--dp-acw);
	border: 1px solid var(--dp-acb);
	border-radius: 12px;
	color: var(--dp-t3);
	display: flex;
	font-size: 12px;
	gap: 9px;
	line-height: 1.45;
	padding: 11px 14px;
}

.dp-herotrust svg { color: var(--dp-ac); flex: 0 0 auto; }
.dp-herotrust strong { color: var(--dp-t1); font-weight: 700; }

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

.dp-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;
}

.dp-stat__n {
	color: var(--dp-ink);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.dp-stat__l { color: var(--dp-t5); font-size: 11.5px; line-height: 1.4; }
.dp-stat--soon .dp-stat__n { color: var(--dp-amber); }

/* ---- Tab strip -------------------------------------------------------- */
.dp-tabsrow { background: var(--dp-panel); border-bottom: 1px solid var(--dp-wa08); }

.dp-tabs {
	align-items: center;
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.dp-tabs::-webkit-scrollbar { display: none; }

.dp-tab {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--dp-t4);
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	padding: 14px 14px 12px;
	transition: color 160ms ease, border-color 160ms ease, opacity 160ms ease, transform 160ms ease;
	white-space: nowrap;
}

.dp-tab:hover { color: var(--dp-t1); }
.dp-tab[aria-pressed="true"] { border-bottom-color: var(--dp-ac); color: var(--dp-ink); }

.dp-tab__badge {
	background: var(--dp-wa06);
	border-radius: 999px;
	color: var(--dp-t5);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 10.5px;
	padding: 2px 7px;
}

.dp-tab[aria-pressed="true"] .dp-tab__badge { background: var(--dp-acw); color: var(--dp-ac); }

/* ---- Shared card furniture ------------------------------------------- */
.dp-card {
	background: var(--dp-panel);
	border: 1px solid var(--dp-wa08);
	border-radius: 16px;
	box-shadow: var(--dp-shxs);
	padding: 16px;
	transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

a.dp-card { color: inherit; text-decoration: none; }
a.dp-card:hover { border-color: var(--dp-wa14); box-shadow: var(--dp-sh); transform: translateY(-2px); }

.dp-barwrap {
	background: var(--dp-wa06);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
	width: 100%;
}

.dp-bar {
	background: var(--dp-ac);
	border-radius: 999px;
	display: block;
	height: 100%;
	transform-origin: left center;
	transition: transform 780ms cubic-bezier(0.2, 0, 0, 1);
	width: 100%;
}

.dp-pre .dp-bar { transform: scaleX(0); }

/* ---- Panel: position types ------------------------------------------- */
.dp-sharebar {
	border-radius: 999px;
	display: flex;
	gap: 2px;
	height: 10px;
	margin-bottom: 18px;
	overflow: hidden;
	width: 100%;
}

.dp-shareseg {
	border-radius: 2px;
	height: 100%;
	transform-origin: left center;
	transition: transform 780ms cubic-bezier(0.2, 0, 0, 1);
}

.dp-pre .dp-shareseg { transform: scaleX(0); }

.dp-types {
	align-items: start;
	display: grid;
	gap: 8px 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dp-typecell { position: relative; }
.dp-typecell.is-open { z-index: 60; }

.dp-typerow {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 9px;
	cursor: pointer;
	display: flex;
	gap: 11px;
	padding: 10px 11px;
	text-align: left;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
	width: 100%;
}

.dp-typerow:hover { background: var(--dp-wa05); border-color: var(--dp-wa10); }
.dp-typerow:active { transform: scale(0.985); }
.dp-typerow[aria-pressed="true"] { background: var(--dp-acw); border-color: var(--dp-acb); }

.dp-typerow[data-empty="1"] { opacity: 0.75; pointer-events: none; }

.dp-typerow__n {
	color: var(--dp-ink);
	flex: 0 0 auto;
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 18px;
	font-weight: 700;
	min-width: 34px;
}

.dp-typerow[data-empty="1"] .dp-typerow__n { color: var(--dp-t6); }
.dp-typerow__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dp-typerow__l { color: var(--dp-t1); font-size: 13px; font-weight: 600; }
.dp-typerow__note { color: var(--dp-t5); font-size: 11px; line-height: 1.35; }

.dp-pickbox {
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	background: color-mix(in srgb, var(--dp-pop) 92%, var(--dp-ac) 8%);
	border: 1px solid var(--dp-acb);
	border-radius: 12px;
	box-shadow: var(--dp-sh);
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 3px;
	left: 0;
	max-width: min(300px, 88cqw);
	min-width: 100%;
	padding: 10px 13px;
	position: absolute;
	text-decoration: none;
	top: calc(100% + 9px);
	transition: background 160ms ease, border-color 160ms ease;
	width: max-content;
}

.dp-pickbox::before {
	background: color-mix(in srgb, var(--dp-pop) 92%, var(--dp-ac) 8%);
	border-left: 1px solid var(--dp-acb);
	border-radius: 2px 0 0 0;
	border-top: 1px solid var(--dp-acb);
	content: "";
	height: 11px;
	left: 20px;
	position: absolute;
	top: -6px;
	transform: rotate(45deg);
	width: 11px;
}

.dp-pickbox:hover { background: color-mix(in srgb, var(--dp-pop) 86%, var(--dp-ac) 14%); border-color: var(--dp-ac); }
.dp-pickbox svg { transition: transform 160ms ease; }
.dp-pickbox:hover svg { transform: translateX(3px); }

.dp-picknote {
	align-items: center;
	color: var(--dp-ink);
	display: flex;
	font-size: 12.5px;
	font-weight: 700;
	gap: 7px;
	justify-content: space-between;
}

.dp-pickmeta { color: var(--dp-t5); font-size: 10.5px; }

/* ---- Panel: deadlines ------------------------------------------------- */
.dp-plotwrap { display: flex; gap: 16px; align-items: flex-end; }

.dp-plot {
	align-items: flex-end;
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	min-height: 212px;
	min-width: 0;
}

.dp-week {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dp-stack {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	gap: 3px;
	width: 100%;
}

.dp-dot {
	border-radius: 999px;
	display: block;
	height: 9px;
	transition: transform 420ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease;
	width: 9px;
}

.dp-pre .dp-dot { transform: scale(0); }

/* Band emphasis: the unselected bands recede, they are never hidden. */
.dp-plotwrap[data-band] .dp-dot { opacity: 0.22; }
.dp-plotwrap[data-band="soon"] .dp-dot[data-band="soon"],
.dp-plotwrap[data-band="mid"] .dp-dot[data-band="mid"],
.dp-plotwrap[data-band="far"] .dp-dot[data-band="far"] { opacity: 1; }

.dp-weeklab { color: var(--dp-t6); font-size: 10px; text-align: center; }
.dp-weeklab--n { color: var(--dp-t4); font-weight: 700; }

.dp-undated {
	align-items: center;
	border-left: 1px dashed var(--dp-wa14);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 8px;
	min-height: 212px;
	justify-content: flex-end;
	padding-left: 16px;
}

.dp-bands { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }

.dp-band {
	background: var(--dp-panel);
	border: 1px solid var(--dp-wa08);
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	text-align: left;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dp-band:hover { background: var(--dp-wa05); border-color: var(--dp-wa14); }
.dp-band:active { transform: scale(0.985); }
.dp-band[aria-pressed="true"] { background: var(--dp-acw); border-color: var(--dp-acb); }

.dp-band__n {
	color: var(--dp-ink);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 20px;
	font-weight: 700;
}

.dp-band__l { color: var(--dp-t5); font-size: 11.5px; }
.dp-band--soon .dp-band__n { color: var(--dp-amber); }

/*
 * `.op-dp2 p { margin: 0 }` above is (0,2,0) and was eating this box's
 * margin-top, so the undated-postings note sat flush against the band cards
 * with a 0px gap. Scoped to match it and win on order — the same trap the
 * anchors hit, in the one place a component here needs a margin of its own.
 */
.op-dp2 .dp-note {
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 12px;
	color: var(--dp-t5);
	font-size: 12px;
	line-height: 1.55;
	margin-top: 14px;
	padding: 12px 14px;
}

/* ---- Panel: where it is open ----------------------------------------- */
.dp-two { align-items: start; display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-stack24 { display: flex; flex-direction: column; gap: 10px; }

.dp-country { display: flex; flex-direction: column; gap: 11px; }
.dp-country__top { align-items: center; display: flex; gap: 11px; }

.dp-flag {
	border: 1px solid var(--dp-imgline);
	border-radius: 5px;
	flex: 0 0 auto;
	height: 22px;
	overflow: hidden;
	width: 30px;
}

.dp-flag img { display: block; height: 100%; object-fit: cover; width: 100%; }

.dp-country__name { color: var(--dp-ink); font-size: 15px; font-weight: 700; min-width: 0; }

.dp-country__n {
	color: var(--dp-ink);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 18px;
	font-weight: 700;
	margin-left: auto;
}

.dp-facts { display: grid; gap: 6px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-fact { color: var(--dp-t4); display: flex; font-size: 11.5px; gap: 6px; justify-content: space-between; }
.dp-fact strong { color: var(--dp-t2); font-weight: 700; }

.dp-inst {
	align-items: center;
	border-radius: 12px;
	color: inherit;
	display: flex;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	transition: background 160ms ease;
}

.dp-inst:hover { background: var(--dp-wa05); }

.dp-initials {
	align-items: center;
	background: var(--dp-wa05);
	border: 1px solid var(--dp-wa08);
	border-radius: 9px;
	color: var(--dp-t3);
	display: flex;
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	height: 34px;
	justify-content: center;
	overflow: hidden;
	width: 34px;
}

.dp-initials img { display: block; height: 100%; object-fit: contain; width: 100%; }

.dp-inst__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }

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

.dp-inst__n {
	color: var(--dp-ink);
	flex: 0 0 auto;
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 14px;
	font-weight: 700;
}

/* ---- Panel: keywords -------------------------------------------------- */
.dp-kws { display: flex; flex-wrap: wrap; gap: 9px; }

.dp-kw {
	align-items: center;
	background: var(--dp-wa03);
	border: 1px solid var(--dp-wa08);
	border-radius: 999px;
	color: var(--dp-t2);
	display: inline-flex;
	gap: 7px;
	text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
	/* Size scales with sqrt(n/max), handed in as --dp-kw-w (0..1). */
	font-size: calc(11.5px + (3.5px * var(--dp-kw-w, 0.5)));
	padding: calc(6px + (3px * var(--dp-kw-w, 0.5))) calc(11px + (5px * var(--dp-kw-w, 0.5)));
}

.dp-kw:hover { background: var(--dp-acw); border-color: var(--dp-acb); color: var(--dp-ac); transform: translateY(-1px); }

.dp-kw__n {
	color: var(--dp-t6);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.82em;
}

/* ---- Open now --------------------------------------------------------- */
.dp-offers { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dp-more {
	align-items: center;
	background: var(--dp-acw);
	border: 1px solid var(--dp-acb);
	border-radius: 18px;
	box-shadow: var(--dp-shxs);
	color: inherit;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 16px;
	padding: 20px 22px;
	text-decoration: none;
	transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.dp-more:hover { border-color: var(--dp-ac); box-shadow: var(--dp-sh); transform: translateY(-2px); }
.dp-morelede { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.dp-morelede > span { color: var(--dp-t2); font-size: 13.5px; }

.dp-morenum {
	color: var(--dp-ac);
	font-family: var(--op-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.dp-more svg { color: var(--dp-ac); margin-left: auto; transition: transform 170ms ease; }
.dp-more:hover svg { transform: translateX(3px); }

.dp-empty {
	background: var(--dp-panel);
	border: 1px solid var(--dp-wa08);
	border-radius: 16px;
	color: var(--dp-t4);
	padding: 26px;
	text-align: center;
}

.dp-empty h3 { font-size: 17px; margin-bottom: 6px; }

/* ---- Related fields --------------------------------------------------- */
.dp-rel { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dp-relcard { display: flex; flex-direction: column; gap: 10px; }
.dp-relcard__top { align-items: center; display: flex; gap: 10px; }

.dp-relcard__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;
}

.dp-relcard__mark svg { height: 17px; width: 17px; }
.dp-relcard__name { color: var(--dp-ink); font-size: 14px; font-weight: 700; line-height: 1.3; }
.dp-relcard__meta { color: var(--dp-t5); font-size: 11.5px; line-height: 1.5; }

.dp-disclaimer {
	background: var(--dp-acw);
	border: 1px solid var(--dp-acb);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.dp-disclaimer svg { color: var(--dp-ac); }
.dp-disclaimer strong { color: var(--dp-ink); font-size: 13px; }
.dp-disclaimer p { color: var(--dp-t4); font-size: 11.5px; line-height: 1.55; }

/* ---- Reveal ----------------------------------------------------------- */
/*
 * Additive: content is visible unless the script has armed it, so a missed
 * callback can never leave the page blank.
 */
.dp-rev { transition: opacity 440ms cubic-bezier(0.2, 0, 0, 1), transform 440ms cubic-bezier(0.2, 0, 0, 1); }
.dp-rev.dp-pre { opacity: 0; transform: translateY(14px); }
.dp-rev.is-in { opacity: 1; transform: none; }

.dp-stag > *:nth-child(2) { transition-delay: 45ms; }
.dp-stag > *:nth-child(3) { transition-delay: 90ms; }
.dp-stag > *:nth-child(4) { transition-delay: 135ms; }
.dp-stag > *:nth-child(5) { transition-delay: 180ms; }
.dp-stag > *:nth-child(6) { transition-delay: 225ms; }
.dp-stag > *:nth-child(n+7) { transition-delay: 270ms; }

/* ---- Container queries ------------------------------------------------ */
@container (max-width: 1080px) {
	.dp-h1 { font-size: 36px; }
	.dp-herotop { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.dp-two { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.dp-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dp-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 720px) {
	.dp-pad { padding-inline: 16px; }
	.dp-h1 { font-size: 29px; letter-spacing: -0.025em; }
	.dp-lead { font-size: 15px; }
	.dp-secttl { font-size: 22px; }
	.dp-types { grid-template-columns: minmax(0, 1fr); }
	.dp-offers { grid-template-columns: minmax(0, 1fr); }
	.dp-rel { grid-template-columns: minmax(0, 1fr); }
	.dp-bands { grid-template-columns: minmax(0, 1fr); }
	.dp-facts { grid-template-columns: minmax(0, 1fr); }

	.dp-tap { min-height: 44px; }
	.dp-cta { justify-content: center; min-height: 44px; }
	.dp-herofoot { align-items: stretch; flex-direction: column; }
	.dp-herocta { grid-template-columns: minmax(0, 1fr); }
	.dp-herotrust { justify-content: center; text-align: center; }

	.dp-plot { gap: 5px; min-height: 158px; }
	.dp-dot { height: 6px; width: 6px; }
	.dp-weeklab { font-size: 9px; }
	.dp-undated { display: none; }

	/*
	 * The handoff stops floating and attaches to its row, so the two read as
	 * one shape: the row squares its bottom corners and drops its bottom
	 * border into the box.
	 */
	.dp-typerow[aria-pressed="true"] { border-bottom-color: transparent; border-radius: 9px 9px 0 0; }

	.dp-pickbox {
		background: var(--dp-acw);
		border-radius: 0 0 9px 9px;
		border-top: 0;
		box-shadow: none;
		max-width: none;
		padding: 9px 10px 10px 28px;
		position: static;
		width: auto;
	}

	.dp-pickbox::before { display: none; }
	.dp-picknote { font-size: 11px; }
	.dp-pickmeta { font-size: 9.5px; }

	/*
	 * The tab strip becomes a revolver: any tab can reach the middle, and the
	 * script parks the active one there after every change.
	 */
	.dp-tabs {
		padding-inline: 50%;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
	}

	.dp-tab { scroll-snap-align: center; }
	.dp-tab[aria-pressed="false"] { opacity: 0.5; transform: scale(0.92); }

	.dp-more { gap: 10px; padding: 14px 16px; }
	.dp-morelede { gap: 7px; }
	.dp-morelede > span { font-size: 12px; }
	.dp-morenum { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.op-dp2 .dp-rev,
	.op-dp2 .dp-rev.dp-pre { opacity: 1; transform: none; transition: none; }
	.op-dp2 .dp-dot,
	.op-dp2 .dp-pre .dp-dot { transform: scale(1); transition: none; }
	.op-dp2 .dp-bar,
	.op-dp2 .dp-pre .dp-bar,
	.op-dp2 .dp-shareseg,
	.op-dp2 .dp-pre .dp-shareseg { transform: scaleX(1); transition: none; }
	.op-dp2 a.dp-card:hover,
	.op-dp2 .dp-kw:hover,
	.op-dp2 .dp-more:hover { transform: none; }
	.op-dp2 .dp-tabs { scroll-behavior: auto; }
	.op-dp2 * { animation-duration: 0.01ms !important; }
}