/* =============================================================================
   ECR — STAFF DIRECTORY
   Phase 5 · visual implementation

   DESIGN CONTRACT
   Structure  : the client's staff structure (meeting document §4) — six
                functional areas, their sub-services, people as cards.
   Skin       : the ECR visual language already established by the Contacts
                page and the site-wide `--ecr-*` tokens. Nothing here invents
                a palette, a typeface or a radius.

   This file introduces NO new design system. Every colour, radius and shadow
   resolves to the `--ecr-*` custom properties that exist site-wide in
   `custom_css` post 6314:
       --ecr-primary #1866A5 · --ecr-primary-dark #114C7D · --ecr-accent #7BADDE
       --ecr-text #1E293B · --ecr-border #E2E8F0 · --ecr-bg #F8FAFC
       --ecr-radius 24px · --ecr-shadow · --ecr-shadow-hover

   TYPOGRAPHY: no font-family and (almost) no font-weight is declared here,
   deliberately. The site's real face is proxima-nova (Adobe Typekit kit
   mcy2vnk), applied through the Fonts-plugin theme mods on `salient-child`
   — NOT the 'Open Sans' that Salient's own stylesheet declares. Headings
   compute to weight 900, body to 400. Inheriting rather than declaring is
   what guarantees this page tracks the site if that typography changes.

   Geometry is measured from page 6060's `_wpb_post_custom_css` (the Contacts
   page) so the two sections read as the same site: 24px group / 18px card /
   999px pill, the same paddings, the same hover language.

   WHAT IS DELIBERATELY NOT REPRODUCED: the `<details>` accordion. The Phase 4
   page copied it and, correctly, read as "Contacts with different content".
   Areas are open sections here; the structure is visible without interaction.

   Breakpoints are Salient's own: 1300 small desktop · 1000 tablet · 690 phone.
   ========================================================================== */

.ecr-op {
	/* Local aliases with fallbacks, so the section still renders correctly if
	   the global token block is ever moved or scoped. Values are identical. */
	--op-primary: var(--ecr-primary, #1866A5);
	--op-primary-dark: var(--ecr-primary-dark, #114C7D);
	--op-accent: var(--ecr-accent, #7BADDE);
	--op-text: var(--ecr-text, #1E293B);
	--op-border: var(--ecr-border, #E2E8F0);
	--op-bg: var(--ecr-bg, #F8FAFC);
	--op-white: var(--ecr-white, #FFFFFF);
	--op-radius: var(--ecr-radius, 24px);
	--op-radius-card: 18px;
	--op-radius-input: 16px;
	--op-shadow: var(--ecr-shadow, 0 12px 40px rgba(15, 23, 42, .08));
	--op-shadow-hover: var(--ecr-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));

	/* Measured off the rendered Contacts page, where they are what actually
	   paints: the group card carries 6% black rather than the global slate
	   shadow, and two greys are page-local. */
	--op-shadow-group: 0 12px 40px rgba(0, 0, 0, .06);
	--op-shadow-card: 0 2px 10px rgba(15, 23, 42, .04);

	/* The Contacts page paints its per-group count in #98A2B3, which is
	   2.58:1 on white and fails WCAG AA. #667085 is the grey that same page
	   uses for its lede, is visually near-identical, and measures 4.97:1. */
	--op-muted: #667085;
	--op-tint: #EFF6FF;

	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 25px;
	color: var(--op-text);
}

/* -----------------------------------------------------------------------------
   LABEL COLOUR AND CONTRAST

   --ecr-accent (#7BADDE) is the ECR light blue. Measured against white it is
   2.37:1, so it CANNOT carry the 10-12px label text it was originally used
   for here — that is a WCAG AA failure at normal-text size, and the legacy
   Contacts page has the same defect in `.group-label`.

   It is therefore kept for what it is good at — rules, separators, hover and
   large text on the deep field — and the label system splits in two:

     · section eyebrows  -> --op-primary (#1866A5, 6.03:1), matching the page
                            eyebrow that already used it;
     · in-card field labels -> --op-muted (#667085, 4.97:1), quiet enough not
                            to compete with the chips they introduce.

   Every value below was measured in-browser against its real computed
   background, not estimated.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.ecr-op__header {
	text-align: center;
	margin-bottom: 44px;
}

.ecr-op__eyebrow {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--op-primary);
	font-weight: 700;
	margin-bottom: 12px;
}

.ecr-op .ecr-op__title {
	font-size: clamp(2.4rem, 4vw, 4rem);
	line-height: 1.1;
	margin: 0 0 15px;
	color: var(--op-text);
	/* weight inherited: 900 */
}

.ecr-op__lede {
	max-width: 700px;
	margin: 0 auto;
	color: var(--op-muted);
}

/* Search — the Contacts page's input geometry, with a submit button docked
   inside it so the form still works without JavaScript. */
.ecr-op__searchform {
	position: relative;
	display: flex;
	align-items: center;
	margin: 30px auto 0;
	width: 100%;
	max-width: 700px;
	background: var(--op-white);
	border-radius: var(--op-radius-input);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	padding: 6px 6px 6px 0;
}

.ecr-op__search {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	border: none;
	background: transparent;
	padding: 0 8px 0 24px;
	font-size: 16px;
	color: var(--op-text);
	-webkit-appearance: none;
	appearance: none;
}

.ecr-op__search::-webkit-search-cancel-button {
	cursor: pointer;
}

.ecr-op__search:focus,
.ecr-op__search:focus-visible {
	outline: none;
}

.ecr-op__searchform:focus-within {
	outline: 2px solid var(--op-primary);
	outline-offset: 2px;
}

.ecr-op__searchbtn {
	flex: 0 0 auto;
	border: none;
	cursor: pointer;
	height: 46px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--op-primary);
	color: var(--op-white);
	font-weight: 700;
	font-size: .9375rem;
	transition: background-color .25s ease;
}

.ecr-op__searchbtn:hover,
.ecr-op__searchbtn:focus-visible {
	background: var(--op-primary-dark);
}

.ecr-op__status {
	margin: 14px 0 0;
	min-height: 1.2em;
	font-size: .875rem;
	font-weight: 600;
	color: var(--op-muted);
}

.ecr-op__noresults {
	margin: 30px 0 0;
	text-align: center;
	color: var(--op-muted);
}

.ecr-op__noresults[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------------
   AREA RAIL
   The structure, stated before you scroll. This is the element that makes the
   page read as an organisation chart rather than a list.
   -------------------------------------------------------------------------- */

.ecr-op-rail {
	background: var(--op-white);
	border-radius: var(--op-radius);
	box-shadow: var(--op-shadow-group);
	padding: 14px;
	margin-bottom: 44px;
}

.ecr-op-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.ecr-op-rail__item {
	margin: 0;
	list-style: none;
	min-width: 0;
}

.ecr-op-rail__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--op-bg);
	color: var(--op-text);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.3;
	transition: background-color .25s ease, color .25s ease;
}

.ecr-op-rail__link:hover,
.ecr-op-rail__link:focus-visible {
	background: var(--op-primary);
	color: var(--op-white);
}

.ecr-op-rail__name {
	min-width: 0;
}

.ecr-op-rail__count {
	flex: 0 0 auto;
	min-width: 30px;
	text-align: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--op-white);
	color: var(--op-primary);
	font-size: .8125rem;
	font-weight: 700;
}

.ecr-op-rail__link:hover .ecr-op-rail__count,
.ecr-op-rail__link:focus-visible .ecr-op-rail__count {
	background: rgba(255, 255, 255, .18);
	color: var(--op-white);
}

/* -----------------------------------------------------------------------------
   AREA SECTION
   -------------------------------------------------------------------------- */

.ecr-op__structure {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.ecr-op-area {
	scroll-margin-top: 120px;
}

.ecr-op-area__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 18px;
	border-bottom: 3px solid var(--op-primary);
	margin-bottom: 30px;
}

.ecr-op-area__eyebrow {
	display: block;
	color: var(--op-primary);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	margin-bottom: 6px;
}

.ecr-op .ecr-op-area__name {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
	color: var(--op-text);
	/* weight inherited: 900 */
}

.ecr-op-area__aside {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.ecr-op-area__count {
	color: var(--op-muted);
	font-weight: 600;
	white-space: nowrap;
}

.ecr-op-area__all {
	color: var(--op-primary);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color .25s ease;
}

.ecr-op-area__all:hover,
.ecr-op-area__all:focus-visible {
	border-bottom-color: var(--op-primary);
}

/* -----------------------------------------------------------------------------
   SUB-SERVICE (UNIT)
   -------------------------------------------------------------------------- */

.ecr-op-unit {
	margin-bottom: 34px;
}

.ecr-op-unit:last-child {
	margin-bottom: 0;
}

.ecr-op-unit[hidden] {
	display: none;
}

/* Three classes, not two. Salient's heading rule includes `.row .col h3`
   (0,2,1), and WPBakery wraps this page in exactly that markup, so the
   two-class selector this used to carry lost the cascade and the sub-service
   heading painted at Salient's 30px/38px instead of the 13px specified here.
   Measured with CSS.getMatchedStylesForNode, not guessed. */
.ecr-op .ecr-op-unit .ecr-op-unit__name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--op-primary);
	margin: 0 0 16px;
}

.ecr-op-unit__name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
}

.ecr-op-unit__name a:hover,
.ecr-op-unit__name a:focus-visible {
	border-bottom-color: currentColor;
}

.ecr-op-unit__count {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--op-tint);
	color: var(--op-primary);
	font-size: .6875rem;
	letter-spacing: .04em;
}

/* -----------------------------------------------------------------------------
   CARD GRID
   auto-fill + minmax means the same declaration serves large desktop, desktop
   and tablet; only the phone needs its own rule.
   -------------------------------------------------------------------------- */

.ecr-op-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 18px;
	align-items: stretch;
}

/* -----------------------------------------------------------------------------
   STAFF CARD
   -------------------------------------------------------------------------- */

.ecr-op-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: var(--op-white);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-card);
	box-shadow: var(--op-shadow-card);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	min-width: 0;
}

/* Hover effect on staff cards — meeting document §9. Same language as the
   Contacts group card: a 2px lift and a deeper shadow, nothing else. */
.ecr-op-card:hover,
.ecr-op-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--op-shadow-hover);
	border-color: transparent;
}

.ecr-op-card[hidden] {
	display: none;
}

.ecr-op-card__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

/* Photo slot. 0 of 114 records carry a photograph today, so every card shows
   initials. The box is identical either way, so adding photographs later
   changes no layout at all (decision D-3). */
.ecr-op-avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--op-tint);
	border: 1px solid var(--op-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ecr-op-avatar__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ecr-op-avatar__initials {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--op-primary);
	line-height: 1;
}

.ecr-op-card__id {
	min-width: 0;
	padding-top: 2px;
}

.ecr-op .ecr-op-card__name {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--op-text);
	overflow-wrap: anywhere;
	/* weight inherited: 900 */
}

/* RULE A — never rendered when op_job_title is empty. There is deliberately
   no ":empty" fallback, no placeholder and no dash. */
.ecr-op-card__role {
	margin: 4px 0 0;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--op-muted);
}

/* --- chip rows ------------------------------------------------------------ */

.ecr-op-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ecr-op-chips {
	min-width: 0;
}

.ecr-op-chips__label {
	display: block;
	/* Salient's body rule resolves to a 32px line-height here, which on a
	   10px label reserves three times the space the label needs. */
	line-height: 1.4;
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--op-muted);
	margin-bottom: 6px;
}

.ecr-op-chips__set {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Filled rather than outlined, deliberately: the avatar beside it is a
   bordered circle, and a two-letter chip such as "HR" in that same treatment
   reads as a second avatar. #EFF6FF is already used for badges in the
   project's global custom_css — not a new colour. */
.ecr-op-chip {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.4;
	color: var(--op-primary);
	background: var(--op-tint);
	border: 1px solid transparent;
	padding: 4px 11px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ecr-op-chip:hover,
.ecr-op-chip:focus-visible {
	background: var(--op-primary);
	color: var(--op-white);
}

/* Committees and delegations are coverage, not identity — quieter, so the
   "Responsible for" row stays the one that reads first. The text is the ECR
   blue of every other link on the card (10 November 2026), so they read as
   links on a phone too, where there is no hover: 5.8:1 on this background. */
.ecr-op-chip--committee,
.ecr-op-chip--delegation {
	background: var(--op-bg);
	color: var(--op-primary);
	border-color: var(--op-border);
}

.ecr-op-chip--committee:hover,
.ecr-op-chip--committee:focus-visible,
.ecr-op-chip--delegation:hover,
.ecr-op-chip--delegation:focus-visible {
	background: var(--op-primary);
	border-color: var(--op-primary);
	color: var(--op-white);
}

/* --- facts ---------------------------------------------------------------- */

.ecr-op-card__facts {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .8125rem;
	line-height: 1.5;
}

.ecr-op-fact {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.ecr-op-fact__key {
	flex: 0 0 62px;
	margin: 0;
	line-height: 1.5;
	color: var(--op-muted);
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	padding-top: 3px;
}

.ecr-op-fact__val {
	margin: 0;
	min-width: 0;
	color: var(--op-muted);
	overflow-wrap: anywhere;
}

.ecr-op-fact__val a {
	color: var(--op-primary);
	font-weight: 600;
	text-decoration: none;
}

.ecr-op-fact__val a:hover,
.ecr-op-fact__val a:focus-visible {
	text-decoration: underline;
}

.ecr-op-office {
	display: inline-block;
	margin-right: 10px;
	white-space: nowrap;
}

.ecr-op-office b {
	color: var(--op-primary);
	font-weight: 700;
	letter-spacing: .04em;
	margin-right: 3px;
}

/* --- actions -------------------------------------------------------------- */

/* margin-top:auto pins the action row to the bottom of the card, so a row of
   cards of unequal content still has its buttons on one line. */
.ecr-op-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.ecr-op-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Explicit: the inherited 32px would make a 13px button 50px tall. */
	line-height: 1.4;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	color: var(--op-primary);
	font-size: .8125rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ecr-op-btn:hover,
.ecr-op-btn:focus-visible {
	background: var(--op-primary);
	border-color: var(--op-primary);
	color: var(--op-white);
}

.ecr-op-btn--primary {
	background: var(--op-primary);
	border-color: var(--op-primary);
	color: var(--op-white);
}

.ecr-op-btn--primary:hover,
.ecr-op-btn--primary:focus-visible {
	background: var(--op-primary-dark);
	border-color: var(--op-primary-dark);
	color: var(--op-white);
}

.ecr-op-btn--ghost {
	background: var(--op-white);
}

.ecr-op-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.ecr-op-btn__icon svg {
	display: block;
}

/* -----------------------------------------------------------------------------
   FILTERED RESULTS VIEW
   -------------------------------------------------------------------------- */

.ecr-op-results__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 18px;
	border-bottom: 3px solid var(--op-primary);
	margin-bottom: 30px;
}

.ecr-op-results__eyebrow {
	display: block;
	color: var(--op-primary);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	margin-bottom: 6px;
}

.ecr-op .ecr-op-results__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
	color: var(--op-text);
}

.ecr-op-results__count {
	margin: 6px 0 0;
	color: var(--op-muted);
	font-weight: 600;
}

.ecr-op-empty {
	text-align: center;
	color: var(--op-muted);
	padding: 40px 0;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE — Salient's own breakpoints
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1300px) {
	.ecr-op {
		padding: 64px 25px;
	}
}

@media only screen and (max-width: 1000px) {
	.ecr-op {
		padding: 56px 22px;
	}

	.ecr-op__header {
		margin-bottom: 36px;
	}

	.ecr-op-rail__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ecr-op__structure {
		gap: 46px;
	}

	.ecr-op-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

	/* The Country and Supports values are inline links inside a text block.
	   At 13px/1.5 their hit box is 19px, under the 24px WCAG 2.2 minimum.
	   SC 2.5.8 exempts links inside a sentence, but on a phone this is worth
	   fixing anyway.

	   Line-height alone does NOT do it: it grows the LINE box, while an
	   inline element's own hit box stays at its font metrics — measured at
	   19px either way. Vertical padding on the inline link is what actually
	   grows the target, and because the link has no background or border it
	   is invisible and does not move a single pixel of layout. The taller
	   line-height is kept so the padded boxes on wrapped lines do not touch.
	   13px + 3px + 3px = 25px. */
	.ecr-op-fact__val {
		line-height: 1.85;
	}

	.ecr-op-fact__val a {
		padding: 3px 0;
	}

	/* Same treatment for the sub-service heading link, which is 13px text and
	   therefore an 18px target. Padding on the inline link, not the heading,
	   so the heading's own spacing is unchanged. */
	.ecr-op-unit__name a {
		padding: 4px 0;
	}
}

@media only screen and (max-width: 690px) {
	.ecr-op {
		padding: 40px 18px;
	}

	.ecr-op-rail {
		padding: 10px;
		margin-bottom: 34px;
	}

	/* One column below the phone breakpoint: at 320px two columns would put
	   the area name on three lines and clip the count. */
	.ecr-op-rail__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ecr-op__searchform {
		flex-wrap: wrap;
		padding: 8px;
		gap: 8px;
	}

	.ecr-op__search {
		flex: 1 0 100%;
		padding: 0 12px;
	}

	.ecr-op__searchbtn {
		flex: 1 0 100%;
	}

	.ecr-op-area__header,
	.ecr-op-results__header {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.ecr-op-area__aside {
		gap: 14px;
	}

	/* Single column. minmax(0,1fr) rather than 1fr so a long unbroken string
	   (an email address) cannot force horizontal overflow. */
	.ecr-op-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ecr-op-card {
		padding: 18px;
	}

	.ecr-op-avatar {
		width: 46px;
		height: 46px;
	}

	.ecr-op-avatar__initials {
		font-size: 14px;
	}

	.ecr-op-fact {
		flex-direction: column;
		gap: 2px;
	}

	.ecr-op-fact__key {
		flex: 0 0 auto;
		padding-top: 0;
	}


	/* Full-width tap targets on the phone — meeting document §9 asks for a
	   mobile-friendly layout, and 44px is the minimum comfortable target. */
	.ecr-op-btn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 11px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecr-op-card,
	.ecr-op-chip,
	.ecr-op-btn,
	.ecr-op-rail__link {
		transition: none;
	}

	.ecr-op-card:hover,
	.ecr-op-card:focus-within {
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
   EMPTY STATE
   The client's own search example ("Bureau") legitimately returns nobody,
   because no source names which Secretariat staff service it. Rather than a
   dead end, the state explains where the term does exist. See
   ecr_op_render_no_results().
   -------------------------------------------------------------------------- */

.ecr-op-empty__lead {
	margin: 0 0 14px;
	font-weight: 700;
	color: var(--op-text);
}

.ecr-op-empty__hints {
	list-style: none;
	margin: 0 auto 20px;
	padding: 0;
	max-width: 620px;
}

.ecr-op-empty__hints li {
	margin: 0 0 8px;
	list-style: none;
	line-height: 1.55;
	color: var(--op-muted);
}

.ecr-op-empty__hints a {
	color: var(--op-primary);
	font-weight: 600;
}

.ecr-op-empty__actions {
	margin: 0;
}

/* -----------------------------------------------------------------------------
   Phase 9 — the instant-search empty state now carries a way forward.
   -------------------------------------------------------------------------- */

.ecr-op__noresults-more {
	display: inline-block;
	margin-left: .35em;
	color: var(--ecr-primary, #1866A5);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecr-op__noresults-more:hover,
.ecr-op__noresults-more:focus-visible {
	color: #114C7D;
}

/* =============================================================================
   CLIENT FEEDBACK, SEPTEMBER 2026 — hierarchy and titles
   ========================================================================== */

/* "Perhaps the subheadings could be more pronounced." The sub-service / role
   headings were 13px caps in blue — the smallest text on the card grid. They
   become a real heading: 20px, dark grey, ordinary bold, with a rule. Same
   three-class specificity as the rule above, for the reason given there. */
.ecr-op .ecr-op-unit .ecr-op-unit__name {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--op-text);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--op-border);
	margin: 0 0 18px;
}

.ecr-op .ecr-op-unit .ecr-op-unit__name a {
	color: inherit;
}

/* Leadership tiers: each level is a block of its own, spaced apart. */
.ecr-op .ecr-op-tier {
	margin-top: 34px;
}

.ecr-op .ecr-op-tier:first-child {
	margin-top: 8px;
}

/* An office sits UNDER the tier it serves: indented, a lighter and smaller
   heading, a left rule tying it to the level above. It must never read as the
   same level as the Secretary General or the Deputies. */
.ecr-op .ecr-op-tier--office {
	margin-top: 16px;
	margin-left: 28px;
	padding-left: 20px;
	border-left: 2px solid var(--op-border);
}

.ecr-op .ecr-op-tier--office .ecr-op-unit__name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--op-muted);
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 12px;
}

@media only screen and (max-width: 690px) {
	.ecr-op .ecr-op-tier--office {
		margin-left: 8px;
		padding-left: 14px;
	}
}

/* "Please highlight the titles ... in the box with all the details." The job
   title under the name was 14px grey — the same weight as the office codes.
   It becomes the second thing you read: ECR blue, semibold. */
.ecr-op-card__role {
	font-weight: 600;
	color: var(--op-primary);
	font-size: .9375rem;
}

/* -----------------------------------------------------------------------------
   WHO ASSISTS WHOM (refinements, 30/09/2026)
   A leader with assistants is one group: their card, then — indented, on the
   same left rule as the "Office of …" tiers above, under the word
   "Assistants" — the people listed in their Assistants box. Groups keep the
   tier's order; on a phone they stack (leader, assistants, next leader).
   -------------------------------------------------------------------------- */

.ecr-op-leads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 24px 18px;
	align-items: start;
}

.ecr-op-lead {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.ecr-op-lead__assistants {
	margin-left: 22px;
	padding-left: 18px;
	border-left: 2px solid var(--op-border);
}

.ecr-op-lead__label {
	margin: 0 0 10px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--op-muted);
}

.ecr-op-lead__list {
	display: grid;
	gap: 12px;
}

.ecr-op-lead__list .ecr-op-card__name {
	font-size: 1.0625rem;
}

@media only screen and (max-width: 690px) {
	.ecr-op-leads { grid-template-columns: minmax(0, 1fr); }
	.ecr-op-lead__assistants { margin-left: 8px; padding-left: 14px; }
}

/* -----------------------------------------------------------------------------
   NATIONAL DELEGATIONS BY COUNTRY (refinements, 30/09/2026)
   One block per country (its own Country field), and inside it one small
   group per role — heads first — as on ecrgroup.eu/contacts.
   -------------------------------------------------------------------------- */

/* Countries side by side (most have one or two contacts), each a column. */
.ecr-op-countries {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 32px 18px;
	align-items: start;
}

.ecr-op .ecr-op-countries .ecr-op-country { margin: 0; }

.ecr-op-country .ecr-op-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media only screen and (max-width: 690px) {
	.ecr-op-countries { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.ecr-op-role + .ecr-op-role {
	margin-top: 18px;
}

.ecr-op-role--titled {
	margin-left: 0;
}

.ecr-op .ecr-op-role__name {
	margin: 0 0 12px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--op-primary);
}

.ecr-op-role--titled .ecr-op-card__name {
	font-size: 1.0625rem;
}

/* A Member's assistants on their profile: the staff cards, without the
   directory's own section padding. */
.ecr-op.ecr-mep-assistants { padding: 0; max-width: none; margin: 32px 0 0; }

/* =============================================================================
   CLIENT FEEDBACK, 9 NOVEMBER 2026 — clearer units, editable titles
   ========================================================================== */

/* The optional "Subtitle on Our People" of a section or a unit (term meta,
   edited on the Departments screen). Nothing is printed when it is empty. */
.ecr-op .ecr-op-area__subtitle {
	margin: 8px 0 0;
	max-width: 760px;
	color: var(--op-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.ecr-op .ecr-op-unit__subtitle {
	margin: -8px 0 18px;
	max-width: 760px;
	color: var(--op-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

/* A long name set by the client wraps instead of pushing the count off the
   line: section headings, unit headings and the section menu. */
.ecr-op .ecr-op-area__heading { min-width: 0; flex: 1 1 320px; }

/* On a phone the header is a column, where that 320px basis would become a
   320px-tall gap under the heading (seen 9 November 2026): no basis there. */
@media only screen and (max-width: 690px) {
	.ecr-op .ecr-op-area__heading { flex: 0 0 auto; }
}
.ecr-op .ecr-op-area__name,
.ecr-op .ecr-op-unit__name a,
.ecr-op-rail__name { overflow-wrap: anywhere; }

/* Parliamentary Committees: the head(s) of a unit first, under a small
   "Head of Unit" label (the Assistants label's style), then everyone else. */
.ecr-op-unit__heads {
	margin: 0 0 22px;
	padding: 0 0 22px;
	border-bottom: 1px dashed var(--op-border);
}

/* Instant search can hide every head of a unit while other colleagues still
   match: the label then goes with them. */
.ecr-op-unit__heads:not(:has(.ecr-op-card:not([hidden]))) { display: none; }

/* -----------------------------------------------------------------------------
   PARLIAMENTARY DELEGATIONS (9 November 2026) — compact by decision: one line
   per European Parliament delegation, its name then the advisors who follow
   it. Two newspaper columns on a wide screen keep the alphabetical order
   reading down; one column on a phone.
   -------------------------------------------------------------------------- */

.ecr-op .ecr-op-dels {
	margin: 0;
	padding: 0;
	columns: 2 26rem;
	column-gap: 56px;
}

.ecr-op-del {
	break-inside: avoid;
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: 4px 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--op-border);
}

.ecr-op-del[hidden],
.ecr-op-del__person[hidden] {
	display: none;
}

.ecr-op .ecr-op-del__name {
	margin: 0;
	padding: 0;
	font-weight: 700;
	line-height: 1.4;
	color: var(--op-text);
	overflow-wrap: anywhere;
}

.ecr-op-del__name a {
	color: var(--op-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
}

.ecr-op-del__name a:hover,
.ecr-op-del__name a:focus-visible {
	border-bottom-color: currentColor;
}

.ecr-op .ecr-op-del__people {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.ecr-op .ecr-op-del__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecr-op .ecr-op-del__person {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Commas only between the names that are showing, during a search too. */
.ecr-op-del__person:not([hidden]) ~ .ecr-op-del__person:not([hidden])::before {
	content: ", ";
}

.ecr-op-del__person a {
	color: var(--op-text);
	text-decoration: none;
	border-bottom: 1px solid var(--op-border);
}

.ecr-op-del__person a:hover,
.ecr-op-del__person a:focus-visible {
	color: var(--op-primary);
	border-bottom-color: currentColor;
}

@media only screen and (max-width: 690px) {
	.ecr-op-del { grid-template-columns: minmax(0, 1fr); }
}