/* ==========================================================================
   THE ACCOUNT AREA

   Two layouts in one file.

   The signed-in app is a fixed dark sidebar beside a scrolling main column,
   as the mock-ups have it. Below 1024px the sidebar becomes a drawer and the
   main column takes the full width.

   The signed-out forms are a narrow centred card on the site's own
   background. They share this file because they share the field, button and
   notice styling with everything inside the account - two copies of a text
   input is two things to keep level.

   Brand tokens come from critical.css. Anything here is either account
   furniture, which the site has no equivalent of, or a value the mock-ups
   introduced.
   ========================================================================== */

.account,
.account-auth,
.account-toasts {
	--account-sidebar-w: 268px;
	--account-topbar-h: 68px;
	--account-dark: var(--color-navy-900, #01224F);
	--account-dark-2: #021A3C;
	--account-line: var(--color-border, #E2E8EC);
	--account-teal: var(--color-primary, #028B93);
	--account-teal-ink: var(--color-primary-ink, #02737A);
	--account-soft: var(--color-primary-soft, #E6F4F5);
	--account-ink: var(--color-text, #1F2933);
	--account-muted: var(--color-text-muted, #5C6B7A);
	--account-radius: var(--radius-lg, 14px);
}

/* ==========================================================================
   THE SIGNED-IN SHELL
   ========================================================================== */

.account {
	display: flex;
	min-height: 100vh;
	/* The viewport that is actually visible on a phone, where the browser
	   chrome eats into 100vh - the lesson from assets/css/eligibility.css. */
	min-height: 100dvh;
	background: #F6F9FA;
}

.account__main {
	display: flex;
	flex-direction: column;
	/* Without this a wide table or a long unbroken string stretches the
	   column past the viewport instead of scrolling inside it. */
	min-width: 0;
	flex: 1 1 auto;
}

.account__content {
	flex: 1 1 auto;
	padding: clamp(18px, 2.4vw, 30px);
}
.account__content:focus { outline: none; }

/* --- Sidebar -------------------------------------------------------------- */

.account-sidebar__panel {
	display: flex;
	flex-direction: column;
	width: var(--account-sidebar-w);
	min-height: 100vh;
	min-height: 100dvh;
	padding: 22px 0 26px;
	background: linear-gradient(180deg, var(--account-dark) 0%, var(--account-dark-2) 100%);
	color: #fff;
}

@media (min-width: 1024px) {
	/* Stays with the page while the main column scrolls. At least as tall as
	   the window below the admin bar; when it is taller, account.js sets a
	   negative offset so it scrolls up until its foot meets the bottom of
	   the window and sticks there - no empty strip under it, and no
	   scrollbar of its own. */
	.account-sidebar__panel {
		position: sticky;
		top: var(--account-sidebar-top, var(--wp-admin--admin-bar--height, 0px));
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}
}

.account-sidebar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 20px 20px;
}
.account-sidebar__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 10px;
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(2, 12, 30, .28);
	color: var(--color-text, #0B2247);
	text-decoration: none;
	width: 196px!important;
}
.account-sidebar__brand .site-branding__text { color: inherit; }

.account-sidebar__close {
	display: none;
	padding: 6px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
}

/* --- Navigation ----------------------------------------------------------- */

.account-nav { flex: 1 1 auto; }
.account-nav__list {
	margin: 0;
	padding: 0 12px;
	list-style: none;
}
.account-nav__rule {
	height: 0;
	margin: 14px 20px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.account-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 2px;
	padding: 11px 14px;
	border-radius: 10px;
	color: rgba(255, 255, 255, .82);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.account-nav__link svg { flex: 0 0 auto; }
.account-nav__link:hover,
.account-nav__link:focus-visible {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.account-nav__link.is-on {
	background: var(--account-teal);
	color: #fff;
}
.account-nav__label { flex: 1 1 auto; }

/* A page whose stage is not built yet. Still a link - it explains itself when
   you get there - but it does not pretend to be ready. */
.account-nav__soon {
	flex: 0 0 auto;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.account-nav__link.is-on .account-nav__soon { background: rgba(0, 0, 0, .2); }

.account-sidebar__tagline {
	margin: 24px 20px 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, .55);
}

/* --- The drawer, under 1024px --------------------------------------------- */

.account-sidebar__scrim { display: none; }

@media (max-width: 1023px) {
	.account-sidebar {
		position: fixed;
		inset: 0;
		z-index: 90;
		/* Hidden rather than merely off-screen, so nothing inside it is a tab
		   stop while it is shut. */
		visibility: hidden;
	}
	.account-sidebar.is-open { visibility: visible; }

	.account-sidebar__panel {
		position: relative;
		z-index: 2;
		max-width: 84vw;
		height: 100%;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: 0 0 40px rgba(1, 34, 79, .35);
	}
	.account-sidebar.is-open .account-sidebar__panel { transform: none; }

	.account-sidebar__scrim {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		border: 0;
		padding: 0;
		background: rgba(1, 34, 79, .5);
		opacity: 0;
		transition: opacity .22s ease;
	}
	.account-sidebar.is-open .account-sidebar__scrim { opacity: 1; }

	.account-sidebar__close { display: inline-flex; }
}

/* --- Focus mode: a course is open ------------------------------------------

   The same drawer at every width, so a course has the whole screen. The
   menu button in the top bar opens it, exactly as on a phone. */

.account--focus .account-sidebar {
	position: fixed;
	inset: 0;
	z-index: 90;
	visibility: hidden;
}
.account--focus .account-sidebar.is-open { visibility: visible; }
.account--focus .account-sidebar__panel {
	position: relative;
	z-index: 2;
	max-width: 84vw;
	transform: translateX(-100%);
	transition: transform .22s ease;
	box-shadow: 0 0 40px rgba(1, 34, 79, .35);
}
.account--focus .account-sidebar.is-open .account-sidebar__panel { transform: none; }
.account--focus .account-sidebar__scrim {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 0;
	padding: 0;
	background: rgba(1, 34, 79, .5);
	opacity: 0;
	transition: opacity .22s ease;
}
.account--focus .account-sidebar.is-open .account-sidebar__scrim { opacity: 1; }
.account--focus .account-sidebar__close { display: inline-flex; }
.account--focus .account-topbar__menu { display: inline-flex; }

/* The drawer scrolls itself; the page behind it should not move under it. */
html.has-account-drawer,
html.has-account-drawer body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.account-sidebar__panel,
	.account-sidebar__scrim,
	.account--focus .account-sidebar__panel,
	.account--focus .account-sidebar__scrim { transition: none; }
}

/* --- Top bar -------------------------------------------------------------- */

.account-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	/* Wraps so the search field can become a second row below 860px rather
	   than being squeezed until it pushes the bar past the viewport. */
	flex-wrap: wrap;
	gap: 12px;
	min-height: var(--account-topbar-h);
	padding: 10px clamp(14px, 2.4vw, 24px);
	border-bottom: 1px solid var(--account-line);
	background: #fff;
}

.account-topbar__menu {
	display: none;
	padding: 8px;
	border: 1px solid var(--account-line);
	border-radius: 9px;
	background: #fff;
	color: var(--account-dark);
	cursor: pointer;
}
@media (max-width: 1023px) {
	.account-topbar__menu { display: inline-flex; }
}

.account-topbar__search {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	/* The missing lower bound is what let it shrink until the bar overflowed.
	   It now folds to a second row instead - see below. */
	min-width: 0;
	max-width: 640px;
	padding: 9px 14px;
	border: 1px solid var(--account-line);
	/* A field, not a pill. 999px made a capsule, which reads as a button
	   rather than as something to type in. The account menu beside it keeps
	   its pill, because that one really is a button. */
	border-radius: 10px;
	background: #F4F7F9;
	color: var(--account-muted);
}
.account-topbar__field {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--account-ink);
}
.account-topbar__field:focus { outline: none; }



/* --- Search, folded away on a narrow screen -------------------------------
   The two buttons exist only here. Above 860px the field is in the bar and
   neither has anything to do, so both are removed rather than hidden - a
   display:none button is still a tab stop in some browsers. */

.account-topbar__searchopen,
.account-topbar__searchclose { display: none; }

@media (max-width: 859px) {
	.account-topbar__searchopen {
		display: inline-flex;
		padding: 8px;
		border: 1px solid var(--account-line);
		border-radius: 9px;
		background: #fff;
		color: var(--account-dark);
		cursor: pointer;
	}

	/* Its own row, under the rest of the bar. order puts it after the tools
	   block even though it comes before it in the markup, where it belongs
	   for anyone reading the page in source order. */
	.account-topbar__search {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
		display: none;
	}
	.account-topbar.is-search-open .account-topbar__search { display: flex; }

	/* The label is worth the space here: the row is full width, and the field
	   is disabled, so saying why is the most useful thing on it. */
	

	.account-topbar__searchclose {
		display: inline-flex;
		flex: 0 0 auto;
		padding: 4px;
		margin-right: -4px;
		border: 0;
		border-radius: 7px;
		background: none;
		color: var(--account-muted);
		cursor: pointer;
	}
	.account-topbar__searchclose:hover { color: var(--account-dark); }
}

.account-topbar__tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.account-topbar__icon {
	display: inline-flex;
	padding: 8px;
	border-radius: 9px;
	color: var(--account-muted);
}
.account-topbar__icon.is-idle { opacity: .55; }

/* --- Account menu --------------------------------------------------------- */

.account-user { position: relative; }
.account-user__button {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 9px 5px 5px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font: inherit;
	color: var(--account-ink);
	cursor: pointer;
}
.account-user__button:hover { border-color: var(--account-line); }
.account-user__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.account-user__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
}
.account-user__name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-dark);
}
.account-user__role {
	font-size: 11.5px;
	color: var(--account-muted);
}
@media (max-width: 599px) {
	.account-user__text { display: none; }
}

.account-user__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 50;
	min-width: 212px;
	padding: 6px;
	border: 1px solid var(--account-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(1, 34, 79, .14);
}
.account-user__menu[hidden] { display: none; }
.account-user__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--account-ink);
	text-decoration: none;
}
.account-user__link:hover { background: #F4F7F9; }
.account-user__link--out { color: #B3261E; }

/* ==========================================================================
   NOTICES
   ========================================================================== */

.account-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 13px 15px;
	border-radius: 11px;
	font-size: 14.5px;
	line-height: 1.55;
}
.account-notice p { margin: 0; }
.account-notice svg { flex: 0 0 auto; margin-top: 2px; }

.account-notice--success {
	background: var(--account-soft);
	color: #0A4F53;
}
.account-notice--success svg { color: var(--account-teal-ink); }

.account-notice--error {
	background: #FDECEA;
	color: #8C1D18;
}
.account-notice--error svg { color: #B3261E; }

/* --- The same message as a toast ---------------------------------------
   News about something that has already happened, so it stays out of the
   layout entirely: fixed in the bottom corner, above everything, and gone
   on its own after a few seconds (assets/js/account.js). Hovering or
   focusing it holds it open, and the close button ends it early.
   ---------------------------------------------------------------------- */

.account-toasts {
	position: fixed;
	right: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	z-index: 200;
	display: grid;
	gap: 10px;
	justify-items: end;
	width: min(390px, calc(100vw - 28px));
	pointer-events: none;
}

/* The translated-page bar is fixed to the same edge; step over it. */
body:has(.translate-bar:not([hidden])) .account-toasts { bottom: 86px; }

.account-toast {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 11px;
	width: 100%;
	padding: 13px 13px 13px 14px;
	border: 1px solid #E1E8F2;
	border-left: 4px solid var(--account-teal-ink);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(11, 34, 71, .14);
	font-size: 14px;
	line-height: 1.5;
	color: var(--account-ink);
	pointer-events: auto;
	transition: opacity .28s ease, transform .28s ease;
}
.account-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--account-soft);
	color: var(--account-teal-ink);
}
.account-toast__icon svg { width: 16px; height: 16px; }
.account-toast__text { margin: 0; padding-top: 3px; font-weight: 600; }
.account-toast__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: none;
	color: #8494AB;
	cursor: pointer;
}
.account-toast__x:hover { background: #F1F5FA; color: var(--account-ink); }

.account-toast--error {
	border-left-color: #B3261E;
}
.account-toast--error .account-toast__icon { background: #FDECEA; color: #B3261E; }

/* Arrives from the right under its own steam, so it is there whether or not
   the script runs; the script only sees it out again. */
.account-toast { animation: account-toast-in .28s ease both; }
.account-toast.is-out { opacity: 0; transform: translateX(14px); }

@keyframes account-toast-in {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.account-toast { animation: none; transition: opacity .2s ease; }
	.account-toast.is-out { transform: none; }
}

/* Beside "Reminder on", not under it, and quieter than it: the schedule is
   a footnote to the switch rather than a second thing to read. */
.fav-row__said {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dash-slate, #51617A);
	white-space: nowrap;
}
.fav-row__said[hidden] { display: none; }

.account-verify {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 20px;
	padding: 13px 16px;
	border: 1px solid var(--color-accent-dark, #B9770E);
	border-radius: 11px;
	background: var(--color-accent-soft, #FDF3E2);
}
.account-verify svg { flex: 0 0 auto; color: var(--color-accent-dark, #B9770E); }
.account-verify__text {
	flex: 1 1 320px;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--account-dark);
}
.account-verify__form { margin: 0; }
.account-verify__button {
	padding: 8px 14px;
	border: 1px solid var(--color-accent-dark, #B9770E);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--color-accent-dark, #B9770E);
	cursor: pointer;
}
.account-verify__button:hover { background: var(--color-accent-dark, #B9770E); color: #fff; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */


.account-hero__greeting {
	margin: 0;
	font-size: clamp(16px, 2vw, 19px);
	color: var(--account-dark);
}
.account-hero__name {
	margin: 0 0 8px;
	font-size: clamp(27px, 4.4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--account-dark);
}
.account-hero__lead {
	margin: 0 0 14px;
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--account-ink);
}
.account-hero__quote {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: var(--account-muted);
}
.account-hero__quote span {
	display: block;
	font-style: normal;
	font-weight: 700;
	color: var(--account-dark);
}







.account-quick__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.account-quick__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: var(--account-radius);
	color: #fff;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}
.account-quick__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(1, 34, 79, .18);
}
.account-quick__card--courses  { background: linear-gradient(135deg, #0F6E86 0%, #0B9FA8 100%); }
.account-quick__card--toolkit  { background: linear-gradient(135deg, #14529E 0%, #1E7BD6 100%); }
.account-quick__card--english  { background: linear-gradient(135deg, #0C6E64 0%, #11A08D 100%); }

.account-quick__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .18);
}
.account-quick__title {
	font-size: 17px;
	font-weight: 800;
}
.account-quick__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}
.account-quick__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-dark);
}

.account-panel {
	padding: 20px;
	border: 1px solid var(--account-line);
	border-radius: var(--account-radius);
	background: #fff;
}
.account-panel__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
	color: var(--account-dark);
}
.account-panel__text {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--account-muted);
}

/* ==========================================================================
   COMING SOON
   ========================================================================== */

.account-soon {
	max-width: 520px;
	margin: clamp(30px, 8vw, 80px) auto;
	padding: 34px 26px;
	border: 1px solid var(--account-line);
	border-radius: var(--account-radius);
	background: #fff;
	text-align: center;
}
.account-soon__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--account-soft);
	color: var(--account-teal-ink);
}
.account-soon__title {
	margin: 0 0 10px;
	font-size: clamp(20px, 3vw, 25px);
	font-weight: 800;
	color: var(--account-dark);
}
.account-soon__text {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--account-muted);
}

/* ==========================================================================
   THE SIGNED-OUT FORMS
   ========================================================================== */

.account-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 6vw, 64px) 16px;
	background: #F6F9FA;
}
.account-auth__card {
	width: 100%;
	max-width: 440px;
	padding: clamp(24px, 4vw, 36px);
	border: 1px solid var(--account-line);
	border-radius: var(--account-radius);
	background: #fff;
	box-shadow: 0 18px 44px rgba(1, 34, 79, .07);
}
.account-form__title {
	margin: 0 0 7px;
	font-size: clamp(21px, 3vw, 26px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--account-dark);
}
.account-form__lead {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--account-muted);
}

/*
 * A field somebody was sent here to change.
 *
 * "Update in My Profile" on the Webinars page points at Country and Your
 * time zone by name. The section arrives already open, so this is only
 * about telling the two fields apart from the six around them - a tinted
 * panel and a rule, fading out once it has been noticed rather than
 * staying lit for the rest of the visit.
 */
.account-field.is-spotlight {
	position: relative;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--color-primary);
	background: var(--color-primary-soft);
	animation: mindship-spotlight 6s ease-out forwards;
}

@keyframes mindship-spotlight {
	0%, 55% { background: var(--color-primary-soft); border-left-color: var(--color-primary); }
	100%    { background: transparent; border-left-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.account-field.is-spotlight { animation: none; }
}

.account-field {
	margin: 0 0 15px;
}
.account-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-dark);
}
.account-field__optional {
	font-weight: 500;
	color: var(--account-muted);
}
.account-field input,
.account-field select {
	display: block;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--account-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--account-ink);
}
/* The password field and its Show control.

   Right padding on the input is what keeps a long password from running
   underneath the button; the button itself is positioned rather than laid
   out so that it cannot change the field's height. */
.account-field__reveal {
	position: relative;
	display: block;
}
.account-field__reveal input {
	padding-right: 68px;
}
.account-field__show {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	padding: 6px 10px;
	border: 0;
	border-radius: 7px;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--account-teal, #02737A);
	cursor: pointer;
}
.account-field__show:hover,
.account-field__show:focus-visible {
	background: var(--account-tint, #E6F4F5);
}

.account-field input:focus,
.account-field select:focus {
	outline: none;
	border-color: var(--account-teal);
	box-shadow: 0 0 0 3px var(--account-soft);
}
.account-field__hint {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--account-muted);
}

/* The honeypot. Off-screen rather than display:none, which some bots check
   for - see inc/newsletter-signup.php for the same trick. */
.account-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.account-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.account-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	color: var(--account-ink);
	cursor: pointer;
}
.account-check input { accent-color: var(--account-teal); }
.account-form__minor {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--account-teal-ink);
}

.account-form__submit {
	width: 100%;
	justify-content: center;
}
.account-form__legal {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--account-muted);
	text-align: center;
}
.account-form__alt {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--account-line);
	font-size: 14px;
	color: var(--account-muted);
	text-align: center;
}
.account-form__alt a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	color: var(--account-teal-ink);
}

/* ==========================================================================
   MY PROFILE

   One card per section, each its own form. The cards are deliberately plain:
   this is a long page of data entry, and a page of competing colours is a
   page nobody finishes.
   ========================================================================== */

.account-head { margin-bottom: 22px; }
.account-head__title {
	margin: 0 0 7px;
	font-size: clamp(23px, 3.4vw, 31px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--account-dark);
}
.account-head__lead {
	max-width: 68ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--account-muted);
}

/* --- Completion ----------------------------------------------------------- */

.profile-progress {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 20px;
	padding: 18px 20px;
	border: 1px solid var(--account-line);
	border-radius: var(--account-radius);
	background: #fff;
}
.profile-progress__meter {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 260px;
}
.profile-progress__value {
	flex: 0 0 auto;
	font-size: 25px;
	font-weight: 800;
	color: var(--account-teal-ink);
}
.profile-progress__track {
	flex: 1 1 auto;
	height: 9px;
	border-radius: 999px;
	background: #E6EDF1;
	overflow: hidden;
}
.profile-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--account-teal) 0%, #4FC3C9 100%);
}
.profile-progress__text { flex: 1 1 280px; }
.profile-progress__title {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--account-dark);
}
.profile-progress__list {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--account-muted);
}
.profile-progress__list a { color: var(--account-teal-ink); font-weight: 600; }

/* --- Section cards -------------------------------------------------------- */

.account-card {
	margin-bottom: 18px;
	padding: clamp(16px, 2.2vw, 24px);
	border: 1px solid var(--account-line);
	border-radius: var(--account-radius);
	background: #fff;
	/* Anchored from the "still to add" list, so the sticky top bar must not
	   sit over the heading when one is followed. */
	scroll-margin-top: calc(var(--account-topbar-h) + 14px);
}
.account-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.account-card__title {
	margin: 0;
	font-size: clamp(17px, 2.2vw, 20px);
	font-weight: 800;
	color: var(--account-dark);
}
.account-card__state {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #F1F5F7;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--account-muted);
}
.account-card__state.is-done {
	background: var(--account-soft);
	color: var(--account-teal-ink);
}
.account-card__intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--account-muted);
}

/* --- Fields --------------------------------------------------------------- */

.profile-grid {
	display: grid;
	gap: 0 16px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* The long ones take the full width whatever the grid is doing. */
.profile-grid .account-field--lines,
.profile-grid .account-field--checkbox { grid-column: 1 / -1; }

.account-field textarea {
	display: block;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--account-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: var(--account-ink);
	resize: vertical;
}
.account-field textarea:focus {
	outline: none;
	border-color: var(--account-teal);
	box-shadow: 0 0 0 3px var(--account-soft);
}
.account-field--checkbox label:not(.account-check) { display: none; }

/* A rail card's icon belongs beside the first line of its heading, not
   above a heading that has wrapped around it. */
.set-rail .account-card__title {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.set-rail .account-card__title > svg { flex: 0 0 auto; margin-top: 3px; }

/* ==========================================================================
   SETTINGS: THE PIECES THE DESIGN IS MADE OF

   A preference is a thing that is on or off right now, not a box on a form
   being filled in, so each one is a row: what it is and what it does on the
   left, a switch on the right, a hairline between. That shape is the whole
   difference between this page and a stack of tick boxes.
   ========================================================================== */

.set-rows { display: grid; }
.set-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 15px 0;
	border-bottom: 1px solid #EDF1F5;
}
.set-row:first-child { padding-top: 0; }
/* Still on, still saved, but it decides nothing while the switch above it
   is off. */
.set-row.is-moot { opacity: .5; }
.set-rows > .set-row:last-child { border-bottom: 0; padding-bottom: 0; }

.set-row__text { display: grid; gap: 4px; min-width: 0; cursor: pointer; }
.set-row__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--account-ink);
}
.set-row__line {
	max-width: 54ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--account-muted);
}

.set-pill {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--account-soft);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--account-teal-ink);
}

/* The switch. The checkbox stays a checkbox - it is still what the label
   points at, what the keyboard reaches and what the form posts; it is just
   not what is drawn. */
.set-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
}
.set-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.set-switch > span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #CBD7E2;
	pointer-events: none;
	transition: background .18s ease;
}
.set-switch > span::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(11, 34, 71, .22);
	transition: transform .18s ease;
}
.set-switch input:checked + span { background: var(--account-teal); }
.set-switch input:checked + span::before { transform: translateX(18px); }
.set-switch input:disabled { cursor: default; }
.set-switch input:disabled + span { opacity: .45; }
.set-switch input:focus-visible + span { outline: 3px solid var(--account-soft); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.set-switch > span,
	.set-switch > span::before { transition: none; }
}

/* A setting that belongs to the switch above it. */
.set-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 2px;
	padding: 11px 14px;
	border: 1px solid #E8EFF4;
	border-radius: 10px;
	background: #F5F9FB;
}
.set-foot[hidden] { display: none; }
.set-foot label { font-size: 13px; font-weight: 600; color: var(--account-muted); }
.set-foot select {
	width: auto;
	min-width: 110px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #DBE5ED;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	color: var(--account-ink);
}

/* --- Password ------------------------------------------------------------
   Current on its own line, then the new one and its confirmation side by
   side, each with a Show button inside the field.
   ---------------------------------------------------------------------- */

.set-pw {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}
.set-pw--wide { grid-column: 1 / -1; }
.set-pw .account-field { margin: 0; }
.set-pw__wrap { position: relative; display: block; }
.set-pw__wrap input { width: 100%; padding-right: 82px; }
.set-pw__show {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 7px;
	border: 0;
	border-radius: 7px;
	background: none;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: #637D93;
	cursor: pointer;
}
.set-pw__show:hover { background: #F1F5FA; color: var(--account-ink); }
.set-pw__show[hidden] { display: none; }

.set-tip {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 14px 0 0;
	padding: 11px 13px;
	border-radius: 9px;
	background: #F4F8FB;
	font-size: 13px;
	line-height: 1.5;
	color: var(--account-muted);
}
.set-tip svg { flex: 0 0 auto; }

.set-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.set-minor { font-size: 13.5px; font-weight: 600; color: var(--account-teal-ink); text-decoration: none; }
.set-minor:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- What the feed will say ---------------------------------------------- */

.set-preview {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid #D9EAE9;
	border-radius: 12px;
	background: #F6FBFB;
}
.set-preview__tag {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 9px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--account-teal-ink);
}
.set-preview__row { display: flex; align-items: flex-start; gap: 10px; }
.set-preview__dot {
	display: inline-flex;
	flex: 0 0 auto;
	padding: 8px;
	border-radius: 10px;
	background: #D7F4E9;
	color: #198368;
}
.set-preview__text { display: block; font-size: 13.5px; font-weight: 700; color: #294764; }
.set-preview__sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--account-muted); }

/* --- Small print ---------------------------------------------------------
   .set-small, not .set-note: the rail already uses .set-note for a whole
   card, and a display:flex meant for one line of small print turned those
   cards into a heading beside two columns of text.
   ---------------------------------------------------------------------- */

.set-small {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 13px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--account-muted);
}
.set-small svg { flex: 0 0 auto; margin-top: 2px; }
.set-small--tint {
	padding: 12px 14px;
	border: 1px solid #D9EEEB;
	border-radius: 10px;
	background: #F1FAF9;
}
.set-small--tint strong { color: var(--account-teal-ink); }

.set-box {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 4px;
	padding: 14px;
	border: 1px solid #E5ECF2;
	border-radius: 11px;
	background: #FBFCFE;
}
.set-box > svg { flex: 0 0 auto; margin-top: 1px; color: var(--account-teal-ink); }
.set-box strong { display: block; font-size: 14.5px; color: var(--account-ink); }
.set-box p { margin: 3px 0 7px; font-size: 13px; line-height: 1.55; color: var(--account-muted); }
.set-box a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-teal-ink);
	text-decoration: none;
}
.set-box a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Repeatable entries --------------------------------------------------- */

.profile-row {
	position: relative;
	margin: 0 0 14px;
	padding: 14px 16px 8px;
	border: 1px solid var(--account-line);
	border-radius: 11px;
	background: #FAFCFD;
}
.profile-row.is-blank {
	border-style: dashed;
	background: #fff;
}
.profile-row__legend {
	padding: 0 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--account-muted);
}
/* Under the entry's fields, on its own line, right-aligned.
   Outlined rather than bare: it was drawn with a transparent border that
   only appeared on hover, which left somebody looking for it with nothing
   to find. It is quiet - a thin red outline on white, not a filled red
   button - because it is a step to the side, not the thing the form is
   for, but it is there before the pointer is. */
.profile-row__remove {
	/* A block-level flex box, not inline-flex: margin-left: auto is what
	   pushes it to the right-hand edge, and that needs a block box. */
	display: flex;
	align-items: center;
	width: fit-content;
	gap: 6px;
	margin: 2px 0 10px auto;
	padding: 7px 12px;
	border: 1px solid #E6B4B0;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: #B3261E;
	cursor: pointer;
}
.profile-row__remove:hover,
.profile-row__remove:focus-visible { border-color: #B3261E; background: #FDECEA; }

/* --- "Add another ..." ---------------------------------------------------
   The blank entry folded away until it is asked for. A <details>, so the
   fold survives with scripting off.
   ---------------------------------------------------------------------- */

.profile-add { margin: 0 0 14px; }
.profile-add__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px dashed var(--account-teal);
	border-radius: 9px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-teal-ink);
	cursor: pointer;
	list-style: none;
}
.profile-add__go::-webkit-details-marker { display: none; }
.profile-add__go:hover { background: var(--account-soft); }
.profile-add[open] .profile-add__go { margin-bottom: 12px; }
.profile-add[open] .profile-add__go svg { transform: rotate(45deg); }
.profile-add__go svg { transition: transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
	.profile-add__go svg { transition: none; }
}

.profile-rows__add {
	margin-bottom: 14px;
	padding: 9px 15px;
	border: 1px dashed var(--account-teal);
	border-radius: 9px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-teal-ink);
	cursor: pointer;
}
.profile-rows__add:hover { background: var(--account-soft); }

/* --- Skills --------------------------------------------------------------- */

.profile-tags {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	margin-bottom: 8px;
}
.profile-tags__row input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--account-line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 14.5px;
	color: var(--account-ink);
}
.profile-tags__row input:focus {
	outline: none;
	border-color: var(--account-teal);
	box-shadow: 0 0 0 3px var(--account-soft);
}

.profile-form__actions {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--account-line);
}

/* --- Photograph ----------------------------------------------------------- */

.profile-photo__form {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 18px;
}
.profile-photo__current { flex: 0 0 auto; }
.profile-photo__image {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--account-line);
}
.profile-photo__controls { flex: 1 1 280px; }

/* The real file input is hidden behind the label, which is styled as a
   button - the browser's own control cannot be styled and looks like a
   different website on every platform. */
.profile-photo__file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.profile-photo__file { display: inline-block; cursor: pointer; }
.profile-photo__file .btn { pointer-events: none; }

.profile-photo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.profile-next { background: var(--account-soft); border-color: transparent; }

/* The completion meter reused on the dashboard, where it sits inside a panel
   rather than in its own card. */
.account-panel .profile-progress__meter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

/* --- Dashboard statistics -------------------------------------------------
   One tile for now. The grid is in place so the others can join it as the
   features they count arrive, rather than the row being rebuilt each time. */

.account-stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 22px;
}


.account-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--account-soft);
	color: var(--account-teal-ink);
}
.account-stat__text { flex: 1 1 auto; min-width: 0; }
.account-stat__value {
	display: block;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--account-dark);
}
.account-stat__label {
	display: block;
	font-size: 13px;
	color: var(--account-muted);
}
.account-stat__flag {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--color-accent-soft, #FDF3E2);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--color-accent-dark, #B9770E);
}




/* ==========================================================================
   OPPORTUNITIES IN THE ACCOUNT

   The public filter bar and results grid, reused inside the account shell.
   Both are built for a full-width page with its own container, so the few
   rules here undo that framing rather than restyling the components - two
   copies of a filter bar is two things to keep in step.
   ========================================================================== */

.account-opps__bar { margin-bottom: 16px; }

/* The bar carries its own full-bleed background and container on the public
   archive. Inside the account it is one card in a column. */
.account-opps .filters-bar {
	padding: 0;
	border: 0;
	background: none;
}
.account-opps .filters-bar > .container {
	width: auto;
	max-width: none;
	padding: 0;
}

.account-opps__count {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--account-muted);
}
.account-opps__saved {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--account-soft);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--account-teal-ink);
	text-decoration: none;
}

/* The grid's own padding-block belongs to a full-page archive. */
.account-opps__grid { padding-block: 0; }

@media (min-width: 700px) {
	.account-opps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
	.account-opps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.account-opps .pagination { padding-block: 24px 0; }

/* ==========================================================================
   RECENT ACTIVITY
   ========================================================================== */

.activity {
	margin: 0;
	padding: 0;
	list-style: none;
}
.activity__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--account-line);
}
.activity__item:first-child { border-top: 0; padding-top: 0; }

.activity__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--account-soft);
	color: var(--account-teal-ink);
}
.activity__body { flex: 1 1 auto; min-width: 0; }
.activity__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--account-dark);
}
.activity__detail {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--account-muted);
	/* A long opportunity title should not push the timestamp off the row. */
	overflow-wrap: anywhere;
}
.activity__detail a { color: var(--account-muted); }
.activity__detail a:hover { color: var(--account-teal-ink); }
.activity__when {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--account-muted);
	white-space: nowrap;
}
@media (max-width: 479px) {
	/* The timestamp drops under the text rather than squeezing it. */
	.activity__item { flex-wrap: wrap; }
	.activity__when { margin-left: 46px; }
}

.activity-empty {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--account-muted);
}

/* ==========================================================================
   SETTINGS
   ========================================================================== */

.account-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--color-accent-soft, #FDF3E2);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--color-navy-900, #01224F);
}
.account-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-accent-dark, #B9770E); }

/* The one thing on the page that cannot be undone, and it looks like it. */
.account-danger { border-color: #F0C8C4; }
.account-danger .account-card__title { color: #8C1D18; }
.account-danger__button {
	border: 1px solid #B3261E;
	background: #B3261E;
	color: #fff;
}
.account-danger__button:hover {
	background: #8C1D18;
	border-color: #8C1D18;
	color: #fff;
}

/* ==========================================================================
   THE DASHBOARD LAYOUT

   A main column of things to do and a rail of things to know, as the mock-up
   has it. The rail falls underneath below 1200px: at that width two columns
   give both of them too little, and the rail's content is the part a reader
   can scroll to rather than the part they came for.
   ========================================================================== */

.account-dash {
	display: grid;
	gap: 18px;
	align-items: start;
}
@media (min-width: 1200px) {
	.account-dash { grid-template-columns: minmax(0, 1fr) 336px; }
}

.account-dash__main,
.account-dash__rail { min-width: 0; }

.account-dash__rail {
	display: grid;
	gap: 18px;
	align-content: start;
}
.account-dash__rail .account-card { margin-bottom: 0; }

/* --- A statistic that cannot be counted yet ------------------------------- */




.account-stat__flag.is-soon {
	background: #F1F5F7;
	color: var(--account-muted);
}

/* --- Section headings with a link on the end ------------------------------ */




/* --- Latest opportunities -------------------------------------------------- */


.account-latest__grid {
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 620px) {
	.account-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.account-latest__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Community impact ------------------------------------------------------ */



.account-impact__list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}
.account-impact__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .72);
}
.account-impact__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--account-teal-ink);
}
.account-impact__value {
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 800;
	color: var(--account-dark);
}
.account-impact__label {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.4;
	color: var(--account-muted);
}
.account-impact__note {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: var(--account-muted);
}

/* ==========================================================================
   THE DASHBOARD, AFTER dashboard-latest.jpg (October 2026)

   The design is the previous dashboard's layout made colourful: a dark
   banner, tinted icon tiles, saturated hub cards, colour-coded activity and
   a live feed. Brand teal, navy and orange stay the spine; the design's
   blues and violet are tints of them, not new brand colours.

   A little tighter than before - the design is compact - but not as tight
   as the picture, which is drawn at 1600 x 900 with everything squeezed in.
   ========================================================================== */

.account {
	--stat-ink: #1C24D4;
	--stat-label: #4450E0;
	--dash-gap: 20px;
	--dash-radius: 14px;
	--dash-navy: #0B2247;
	--dash-slate: #51617A;
	--dash-line: #E4EAF2;
	/* The cards sit on a tinted page, often directly under a picture, so
	   their shadow is a hairline - enough to lift them off it, not a drop. */
	--dash-shadow: 0 1px 2px rgba(11, 34, 71, .05);
	--dash-shadow-hover: 0 4px 10px rgba(11, 34, 71, .08);
	--account-sidebar-w: 264px;

	/* The tints: [background, foreground] for icon tiles and icon circles. */
	--hue-teal-bg: #DDF4F3;    --hue-teal: #0B8F94;
	--hue-blue-bg: #E2EDFD;    --hue-blue: #1D5FD1;
	--hue-violet-bg: #ECE6FD;  --hue-violet: #6A47D8;
	--hue-mint-bg: #DCF6EC;    --hue-mint: #0E8C6C;
	--hue-pink-bg: #FDE4EA;    --hue-pink: #E23A62;
	--hue-amber-bg: #FFF0D6;   --hue-amber: #D9820B;

	background: #F3F6FB;
}

.account__content { padding: 18px clamp(16px, 2vw, 24px) 28px; }

/* --- Sidebar ---------------------------------------------------------------- */

/* No position here: the desktop rule above makes it sticky and the drawer
   rule makes it relative, and either one set here would undo the other. */
.account-sidebar__panel {
	overflow-x: hidden;
	padding-top: 20px;
	padding-bottom: 0;
	background: linear-gradient(185deg, #0C2C5C 0%, #082149 46%, #05173A 100%);
}
.account-sidebar__head { padding: 0 20px 20px; }
/* The public header's full-colour mark, on a light tile: half of it is the
   same navy as the sidebar and would otherwise disappear. */
.account-sidebar__brand .site-branding__mark {
	width: auto;
	height: 34px;
	object-fit: contain;
}

.account-nav__list { padding: 0 12px; }
.account-nav__link {
	gap: 12px;
	margin-bottom: 2px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: #fff;
}
.account-nav__link svg { opacity: .95; }
.account-nav__link:hover,
.account-nav__link:focus-visible { background: rgba(255, 255, 255, .09); }
.account-nav__link.is-on {
	background: linear-gradient(100deg, #14A7AE 0%, #0C7FA0 100%);
	box-shadow: 0 8px 20px rgba(9, 140, 160, .35);
	font-weight: 700;
}
.account-nav__rule {
	margin: 12px 22px;
	border-top: 1px solid rgba(76, 140, 230, .5);
}

/* "Coming soon" sits under the label rather than beside it: beside a long
   label like "Mindship Global Courses" it would fold the label onto three
   lines in a sidebar this wide. */
/* Not a link any more - a span, so there is nothing to click. Said here
   too, because the cursor is the only part of that a reader sees. */
.account-nav__link.is-soon {
	align-items: flex-start;
	cursor: default;
	opacity: .72;
}
.account-nav__link.is-soon:hover { background: none; }
.account-nav__link.is-soon svg { margin-top: 1px; }
.account-nav__link.is-soon .account-nav__label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
.account-nav__soon {
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(23, 199, 192, .16);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.5;
	text-transform: none;
	color: #7FE3E8;
}
.account-nav__link.is-on .account-nav__soon { background: rgba(0, 0, 0, .18); color: #fff; }

/* The navigation is the whole sidebar now: the globe and the
   "Global Opportunities, Brighter Futures" line were removed in October
   2026, and nothing replaced them. The padding below keeps the last link
   clear of the bottom edge. */
.account-nav { padding-bottom: 24px; }

/* --- Top bar ------------------------------------------------------------------ */

.account-topbar {
	gap: 16px;
	padding: 12px clamp(16px, 2vw, 24px);
	border-bottom: 0;
	background: #F3F6FB;
}

/* --- A bar with no search in it ------------------------------------------
   Settings and My Profile put no search field in the top bar, so the bar
   held nothing but the bell, the globe and the account menu - and still
   kept the height it needs to hold a search field. Those pages opened with
   a band of empty space above their first line.

   Shorter first: with only the 42px cluster to hold, it is as tall as the
   cluster. Then, where there is room for it, out of the flow entirely -
   the cluster parks in the top right corner and the page's own first line
   starts at the top, which is the only way there is no band at all.

   The first line then shares that band with the cluster, so it is held
   clear of it: on Settings that is the breadcrumb, which is short and does
   not notice; on My Profile it is the title and its Preview My CV button,
   which moves left by the width of the cluster.

   The Toolkit hub is not caught by this - it puts its own search in the
   bar, so it has one. Neither is the dashboard, whose bar already floats
   under a rule of its own; it is excluded by name because this one is the
   more specific of the two and would otherwise win.
   -------------------------------------------------------------------------- */
.account-topbar:not(:has(.account-topbar__search)) {
	min-height: 0;
	padding-top: 10px;
	padding-bottom: 6px;
}

@media (min-width: 1000px) {
	/* .account__main--plain is the shell saying "no search field in the
	   bar". A class, because the selector for it was a :has() inside a
	   :has(), which the spec does not allow - the rules were invalid and
	   silently dropped, the shell never became a containing block, and the
	   absolute bar fell back to the viewport and sat under the WordPress
	   admin bar. */
	.account__main--plain { position: relative; }

	.account__main--plain > .account-topbar {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		z-index: 5;
		width: auto;
		padding: 12px clamp(16px, 2vw, 24px);
		background: transparent;
		border: 0;
	}
	.account__main--plain > .account__content { padding-top: 14px; }

	/* The page's first line shares the band the cluster is in, so it is
	   held clear of it: the cluster is about 240px wide, and this is that
	   plus a gutter. */
	.account__main--plain > .account__content > :first-child { padding-right: 280px; }
}

.account-topbar__search {
	position: relative;
	gap: 12px;
	max-width: 660px;
	padding: 0 16px;
	min-height: 42px;
	border: 1px solid #DCE5F1;
	border-radius: 12px;
	background: #E9EFF8;
	color: #2C4A78;
}
.account-topbar__search:focus-within {
	border-color: #0B8F94;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11, 143, 148, .15);
}
.account-topbar input.account-topbar__field {
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13.5px;
	color: var(--dash-navy);
}
.account-topbar input.account-topbar__field:focus { outline: none; }
.account-topbar__field::placeholder { color: #5E7290; opacity: 1; }
.account-topbar__field::-webkit-search-cancel-button { display: none; }
.account-topbar__kbd {
	flex: 0 0 auto;
	padding: 2px 4px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: #2C4A78;
	background: none;
	border: 0;
	white-space: nowrap;
}
@media (max-width: 1100px) {
	.account-topbar__kbd { display: none; }
}

/* The Toolkit's own search sits in this bar in the account search's place.
   It has no second copy to fold out to on a narrow screen - it is the only
   search the page has - so it stays in the bar and takes its own row. */
@media (max-width: 859px) {
	.account-topbar .account-topbar__search--tools { display: flex; }
}

.account-topbar__tools { gap: 14px; }
.account-topbar__icon {
	position: relative;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: #1D4F9E;
	cursor: pointer;
}
.account-topbar__icon:hover { background: rgba(29, 79, 158, .08); }
.account-topbar__icon:focus-visible { outline: 2px solid #0B8F94; outline-offset: 2px; }

.account-topbar__rule {
	width: 1px;
	height: 34px;
	background: #D5DEEA;
}
@media (max-width: 599px) {
	.account-topbar__rule { display: none; }
}

.account-user__button { gap: 10px; padding: 4px 6px; }
.account-user__avatar { width: 36px; height: 36px; }
.account-user__name { font-size: 14px; color: var(--dash-navy); }
.account-user__role { font-size: 12px; color: #2C4A78; }
.account-user__button > svg { color: #1D4F9E; }

/* The bell. */
.account-bell { position: relative; }
.account-bell__count {
	position: absolute;
	top: 1px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border: 2px solid #F3F6FB;
	border-radius: 999px;
	background: #E5304F;
	font-size: 11px;
	font-weight: 800;
	line-height: 15px;
	text-align: center;
	color: #fff;
}

.account-pop {
	position: absolute;
	right: -8px;
	top: calc(100% + 8px);
	z-index: 50;
	width: min(330px, 86vw);
	padding: 12px;
	border: 1px solid var(--dash-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(11, 34, 71, .16);
}
.account-pop[hidden] { display: none; }
.account-pop__title {
	margin: 2px 4px 8px;
	font-size: 15px;
	font-weight: 800;
	color: var(--dash-navy);
}
.account-pop__list { 
	max-height: 400px;
	overflow-y: auto;
	margin: 0; padding: 0; list-style: none; 
}
.account-pop__item {
	display: flex;
	gap: 10px;
	padding: 9px 8px;
	border-radius: 10px;
	text-decoration: none;
}
.account-pop__item:hover { background: #F3F6FB; }
.account-pop__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hue-amber-bg);
	color: var(--hue-amber);
}
.account-pop__text { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--dash-navy); }
.account-pop__meta { display: block; font-size: 12.5px; color: var(--dash-slate); }
.account-pop__empty { margin: 0 4px 4px; font-size: 13.5px; line-height: 1.55; color: var(--dash-slate); }
.account-pop__all {
	display: block;
	margin-top: 6px;
	padding: 8px;
	border-top: 1px solid var(--dash-line);
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
	color: #0B8F94;
	text-decoration: none;
}

/* --- The bell's panel ----------------------------------------------------
   An unread item is marked down its leading edge rather than by colouring
   the whole row: the row is a link to an opportunity first, and news second.
   ---------------------------------------------------------------------- */

.account-pop--bell { width: min(360px, calc(100vw - 32px)); }

/* On a phone the bell is a hundred-odd pixels from the right edge, and a
   360px panel hung off its right-hand corner runs off the left of the
   screen. Below 600px it leaves the bell behind and centres itself on the
   window instead, with a scroll of its own if the list is long. */
@media (max-width: 599px) {
	.account-pop--tz,
	.account-pop--bell {
		position: fixed;
		top: calc(var(--account-topbar-h) + 6px);
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw - 24px);
		max-width: 380px;
		max-height: calc(100vh - var(--account-topbar-h) - 24px);
		max-height: calc(100dvh - var(--account-topbar-h) - 24px);
		overflow-y: auto;
	}
}
.account-pop__item.is-new { box-shadow: inset 3px 0 0 var(--account-teal); }
.account-pop__icon--deadline { background: #FFF1E8; color: #B4580E; }
.account-pop__icon--match { background: var(--account-soft); color: var(--account-teal-ink); }

.account-pop__ask {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 8px;
	padding: 9px 12px;
	border: 1px dashed var(--account-line);
	border-radius: 9px;
	background: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--account-muted);
	cursor: pointer;
}
.account-pop__ask:hover { border-color: var(--account-teal); color: var(--account-teal-ink); }
.account-pop__said {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--account-muted);
}

/* The language globe: just the icon in this bar. */
.account-lang .lang-switch__toggle {
	min-height: 0;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: #1D4F9E;
}
.account-lang .lang-switch__toggle:hover { background: rgba(29, 79, 158, .08); }
.account-lang .lang-switch__toggle svg:first-child { width: 22px; height: 22px; color: inherit; }
.account-lang .lang-switch__current,
.account-lang .lang-switch__toggle svg:last-child { display: none; }
.account-lang .lang-switch__menu { right: 0; left: auto; }

/* Search results. */
.account-search {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--dash-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(11, 34, 71, .18);
}
.account-search[hidden] { display: none; }
.account-search__label {
	margin: 8px 8px 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--dash-slate);
}
.account-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
}
.account-search__item:hover,
.account-search__item.is-active { background: #EEF4FB; }
.account-search__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--hue-teal-bg);
	color: var(--hue-teal);
}
.account-search__text { min-width: 0; }
.account-search__title {
	display: block;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--dash-navy);
}
.account-search__meta {
	display: block;
	overflow: hidden;
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--dash-slate);
}
.account-search__empty { margin: 10px 8px; font-size: 13.5px; color: var(--dash-slate); }
.account-search__all {
	display: block;
	margin-top: 6px;
	padding: 10px 8px 6px;
	border-top: 1px solid var(--dash-line);
	font-size: 13.5px;
	font-weight: 700;
	color: #0B8F94;
	text-decoration: none;
}

/* --- The layout ------------------------------------------------------------------ */

.account-dash { gap: var(--dash-gap); }
.account-dash__rail { gap: var(--dash-gap); }
@media (min-width: 1200px) {
	/* 360px as drawn at 1600; a little narrower on a laptop, so the main
	   column keeps room for four stat tiles in a row. */
	.account-dash { grid-template-columns: minmax(0, 1fr) clamp(310px, 23vw, 360px); }
}

/* The main column's grids follow its own width, not the window's: the
   same width of window gives it different room with the rail beside it
   and with the rail below. */
.account-dash__main { container-type: inline-size; }

/* Below 1200px the rail sits under the main column; side by side in pairs
   it is not a long single strip. */
@media (min-width: 760px) and (max-width: 1199px) {
	.account-dash__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Banner ----------------------------------------------------------------------- */

.dash-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-bottom: var(--dash-gap);
	padding: clamp(11px, 1.35vw, 17px) clamp(20px, 2.4vw, 32px);
	min-height: 130px;
	border-radius: var(--dash-radius);
	background:
		radial-gradient(ellipse 60% 120% at 82% 30%, rgba(40, 130, 230, .45) 0%, transparent 60%),
		radial-gradient(ellipse 40% 80% at 60% 100%, rgba(23, 199, 192, .28) 0%, transparent 70%),
		linear-gradient(110deg, #051738 0%, #0A2A5E 55%, #0D3B7C 100%);
	color: #fff;
}
.dash-banner.has-image {
	background:
		var(--dash-banner) center right / cover no-repeat,
		#0A2A5E;
}

@media (max-width: 800px){
	.dash-banner.has-image{
		background-image: none;
	}

}

.dash-banner__globe {
	position: absolute;
	z-index: -1;
	right: 4%;
	top: 50%;
	width: min(46%, 340px);
	height: auto;
	opacity: .5;
	transform: translateY(-50%);
	pointer-events: none;
}
.dash-banner__text { position: relative; max-width: 520px; }

/* The dashboard's own banner is centred, as the design has it. The
   Toolkit's stays left, beside its picture. */
.dash-banner--center {
	display: grid;
	place-items: center;
	min-height: 206px;
	text-align: center;
}
.dash-banner--center .dash-banner__text { max-width: 720px; }
.dash-banner--center .dash-banner__hello {
	display: inline-block;
	margin-bottom: 10px;
	padding-bottom: 7px;
	border-bottom: 2px solid rgba(47, 211, 215, .65);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.dash-banner--center .dash-banner__hello strong { font-weight: 800; }
.dash-banner--center .dash-banner__title { font-size: clamp(22px, 2.35vw, 34px); }
.dash-banner--center .dash-banner__title span { display: block; }
.dash-banner--center .dash-banner__lead {
	margin: 0 auto;
	max-width: 56ch;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
}
.dash-banner--center .dash-banner__cta { padding: 9px 22px; font-size: 13px; }
/* The picture fills the whole width here, so the tint is even rather than
   a left-hand wash. */
.dash-banner--center.has-image {
	background:
		var(--dash-banner) center / cover no-repeat,
		#0A2A5E;
}

.dash-banner__hello {
	margin: 0 0 6px;
	font-size: 13px;
	color: #fff;
}
.dash-banner__hello strong { font-weight: 800; }
.dash-banner__wave { display: inline-flex; margin-left: 4px; vertical-align: -4px; color: #FFC93C; }

.dash-banner__title {
	margin: 0 0 9px;
	font-size: clamp(25px, 2.25vw, 32px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fff;
}
.dash-banner__title span { display: block; color: #2FD3D7; }

.dash-banner__lead {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.tk-dash .dash-banner__lead {
    max-width: 360px;
}

.dash-banner__text-small {
	margin: 0 0 18px;
	max-width: 52ch;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .86);
}

.dash-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background: linear-gradient(100deg, #18B5B6 0%, #0E8FA9 100%);
	box-shadow: 0 8px 22px rgba(14, 160, 175, .4);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.dash-banner__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(14, 160, 175, .5);
	color: #fff;
}
.dash-banner__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- The member's numbers --------------------------------------------------------- */

.dash-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}
.dash-stat {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 84px;
	padding: 12px;
	border: 1px solid var(--dash-line);
	border-radius: var(--dash-radius);
	background: #fff;
	box-shadow: var(--dash-shadow);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.dash-stat:hover {
	transform: translateY(-2px);
	box-shadow: var(--dash-shadow-hover);
}
.dash-stat__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: var(--tint-bg);
	color: var(--tint);
}
.dash-stat__text { flex: 1 1 auto; min-width: 0; }
/* The number and the chevron share a line; the label sits under them, with
   a gap, as the design has it. */
.dash-stat__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}
.dash-stat__top > svg { flex: 0 0 auto; color: var(--stat-label); }
.dash-stat__value {
	display: block;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--stat-ink);
}
/*
 * There was an is-soon tile here: greyed out, with a dash where the number
 * goes, for a page in early access. It is gone because the tile is - a
 * quarter of the row spent saying nothing, and a dash that reads as a
 * number which failed to load rather than as a door that is shut. The
 * dashboard leaves those tiles out instead, and the row is sized to what
 * is left.
 */
.dash-stat__label {
	display: block;
	overflow: hidden;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -.004em;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--stat-label);
}
.dash-stat.is-pending .dash-stat__value { color: #9AA8BC; }
/* The Toolkit's own three tiles keep the page's quieter ink: they sit under
   a picture banner, not over one. */
.tk-dash .dash-stat__value { color: var(--dash-navy); }
.tk-dash .dash-stat__label { font-weight: 500; color: var(--dash-slate); }
.tk-dash .dash-stat__top > svg { color: #9AA8BC; }

.is-teal   { --tint-bg: var(--hue-teal-bg);   --tint: var(--hue-teal); }
.is-blue   { --tint-bg: var(--hue-blue-bg);   --tint: var(--hue-blue); }
.is-violet { --tint-bg: var(--hue-violet-bg); --tint: var(--hue-violet); }
.is-mint   { --tint-bg: var(--hue-mint-bg);   --tint: var(--hue-mint); }
.is-pink   { --tint-bg: var(--hue-pink-bg);   --tint: var(--hue-pink); }
.is-amber  { --tint-bg: var(--hue-amber-bg);  --tint: var(--hue-amber); }

/* --- Section headings --------------------------------------------------------------- */

.dash-section { margin-bottom: 28px; }
.dash-section__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	color: var(--dash-navy);
}
.dash-section__title > svg { color: #1D5FD1; }
/* The lead beside a heading. It is the heading's only unclassed span: the
   icon beside the title, and the Toolkit's rewritable heading, carry
   classes and keep their own colour and size. */
.dash-section__title > span:not([class]) {
	font-size: 13px;
	font-weight: 500;
	color: var(--dash-slate);
}
.dash-section__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: #1D5FD1;
	text-decoration: none;
}
.dash-section__more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 699px) {
	/* The lead folds away on a narrow screen; the heading's own icon is
	   not a lead and stays. */
	.dash-section__title > span:not([class]) { display: none; }
}

/* --- The three hubs ------------------------------------------------------------------ */

.dash-hubs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
.dash-hub {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	align-content: center;
	gap: 10px;
	min-height: 132px;
	padding: 18px 20px;
	border-radius: var(--dash-radius);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--dash-shadow);
	transition: transform .16s ease, box-shadow .16s ease;
}
.dash-hub:hover {
	transform: translateY(-3px);
	box-shadow: var(--dash-shadow-hover);
	color: #fff;
}
.dash-hub--courses { background: linear-gradient(135deg, #12A0A4 0%, #0B6E8E 55%, #0A4F7A 100%); }
.dash-hub--toolkit { background: linear-gradient(135deg, #2C82E8 0%, #1756C2 55%, #0D3D96 100%); }
.dash-hub--english { background: linear-gradient(135deg, #1AB0A8 0%, #0F7FA2 55%, #0B5784 100%); }

.dash-hub__art {
	position: absolute;
	z-index: -1;
	top: 10px;
	right: 25px;
	opacity: .14;
}
/* A big filled glyph on top, with no box behind it - the design draws the
   icon itself, not a tile. */
.dash-hub__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.dash-hub__icon { display: inline-flex; color: #fff; }
.dash-hub__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}
.dash-hub__title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.dash-hub__foot .dash-hub__title { min-width: 0; }
.dash-hub__go {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: #fff;
	transition: transform .15s ease;
}
.dash-hub:hover .dash-hub__go { transform: translateX(3px); }
/* In early access the arrow is replaced by the words, so the tile does not
   invite a click it cannot honour. */
.dash-hub__soon {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
}
.dash-hub:focus-visible { outline: 3px solid #0B8F94; outline-offset: 3px; }

/* --- Continue Learning ------------------------------------------------------------------

   A picture, the course's name and how far through it the member is. One
   card per course, three across where there is room. */

.dash-learn {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}
.dash-learn__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--dash-line);
	border-radius: var(--dash-radius);
	background: #fff;
	box-shadow: var(--dash-shadow);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.dash-learn__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--dash-shadow-hover);
}
.dash-learn__card:focus-visible { outline: 3px solid #0B8F94; outline-offset: 2px; }

.dash-learn__thumb {
	display: grid;
	place-items: center;
	flex: none;
	width: 62px;
	height: 62px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--hue-blue-bg);
	color: var(--hue-blue);
}
.dash-learn__thumb img { width: 100%; height: 100%; object-fit: cover; }

.dash-learn__text { display: grid; gap: 8px; min-width: 0; }
.dash-learn__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.dash-learn__title {
	display: -webkit-box;
	overflow: hidden;
	min-width: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--dash-navy);
}
.dash-learn__top > svg { flex: 0 0 auto; color: #1D5FD1; }

.dash-learn__bar { display: flex; align-items: center; gap: 10px; }
.dash-learn__track {
	flex: 1 1 auto;
	height: 7px;
	border-radius: 999px;
	background: #E6EDF6;
	overflow: hidden;
}
.dash-learn__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #17C7C0 0%, #0B6FB8 100%);
}
.dash-learn__pc {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: var(--dash-slate);
}

@media (prefers-reduced-motion: reduce) {
	.dash-learn__card { transition: none; }
}

/* --- Featured opportunities ------------------------------------------------------------ */

.dash-opps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
.dash-opp {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--dash-line);
	border-radius: var(--dash-radius);
	background: #fff;
	box-shadow: var(--dash-shadow);
}
.dash-opp__thumb {
	/* 16:9, as on the Opportunities page's cards: the ratio listing images
	   are uploaded in, so it crops least. */
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #E2EDFD;
}
.dash-opp__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.dash-opp:hover .dash-opp__thumb img { transform: scale(1.04); }

.dash-opp__chip {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 2px 9px;
	border-radius: 6px;
	background: #1D5FD1;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
/* The theme's own save heart, set over the picture's corner. */
.dash-opp > .fav--icon,
.dash-opp > .fav--icon__form {
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 8px;
	margin: 0;
}
.dash-opp > .fav--icon__form .fav--icon,
.dash-opp > .fav--icon { box-shadow: 0 4px 12px rgba(11, 34, 71, .18); }

.dash-opp__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px 16px;
}
.dash-opp__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.35;
}
.dash-opp__title a { color: var(--dash-navy); text-decoration: none; }
.dash-opp__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dash-opp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dash-opp__tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 6px;
	background: #EAF1FC;
	font-size: 11px;
	font-weight: 600;
	color: #1D5FD1;
}

.dash-opp__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.dash-opp__facts {
	display: grid;
	gap: 4px;
	margin: 0;
	font-size: 12.5px;
	color: var(--dash-navy);
}
.dash-opp__facts span { display: inline-flex; align-items: center; gap: 8px; }
.dash-opp__facts svg { color: #1D5FD1; }
.dash-opp__go {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #0D3F8F;
	color: #fff;
	box-shadow: 0 6px 14px rgba(13, 63, 143, .3);
	transition: background-color .15s ease;
}
.dash-opp__go:hover { background: #0B8F94; color: #fff; }
.dash-opp__go:focus-visible { outline: 3px solid #0B8F94; outline-offset: 2px; }

/* --- Rail cards --------------------------------------------------------------------------- */

.dash-card {
	padding: 18px 20px;
	border: 1px solid var(--dash-line);
	border-radius: var(--dash-radius);
	background: #fff;
	box-shadow: var(--dash-shadow);
}
.dash-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.dash-card__head .dash-card__title { margin: 0; }
.dash-card__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	color: #0D3F8F;
}
.dash-card__more { font-size: 12.5px; font-weight: 700; color: #1D5FD1; text-decoration: none; }
.dash-card__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-card__intro { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--dash-slate); }

/* Profile. */
.dash-profile__row { display: flex; align-items: center; gap: 16px; }
.dash-ring {
	position: relative;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
}
.dash-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ring__track { fill: none; stroke: #E6EEF6; stroke-width: 9; }
.dash-ring__fill {
	fill: none;
	stroke: url(#dash-ring-fill);
	stroke-width: 9;
	stroke-linecap: round;
	transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1);
}
.dash-ring__value {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 18px;
	font-weight: 800;
	color: #0D3F8F;
}
.dash-profile__text { min-width: 0; }
.dash-profile__lead { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: #0B8F94; }
.dash-profile__hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--dash-slate); }
.dash-profile__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 10px;
	background: var(--dash-navy);
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.dash-profile__btn:hover { background: #0D3F8F; color: #fff; }
.dash-profile__btn:focus-visible { outline: 3px solid #0B8F94; outline-offset: 2px; }

/* Recent activity, colour-coded (the list is shared with the History page). */
.activity__icon.is-teal,
.activity__icon.is-blue,
.activity__icon.is-violet,
.activity__icon.is-pink,
.activity__icon.is-amber { background: var(--tint-bg); color: var(--tint); }

.dash-card .activity__item { gap: 10px; padding: 8px 0; border-top: 0; }
.dash-card .activity__item:first-child { padding-top: 0; }
.dash-card .activity__icon { width: 32px; height: 32px; }
.dash-card .activity__title { font-size: 13px; color: #1D5FD1; }
.dash-card .activity__detail { font-size: 12px; line-height: 1.45; }
.dash-card .activity__detail a { color: var(--dash-slate); text-decoration: none; }
.dash-card .activity__when { font-size: 11.5px; color: var(--dash-slate); }

/* The community, live. */
.dash-feed__title { display: flex; align-items: center; gap: 8px; }
.dash-feed__title svg { color: #18B36B; }
.dash-feed__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #E2F7EC;
	font-size: 11.5px;
	font-weight: 700;
	color: #128A50;
}
.dash-feed__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #18B36B;
	box-shadow: 0 0 0 0 rgba(24, 179, 107, .5);
}
@media (prefers-reduced-motion: no-preference) {
	.dash-feed__dot { animation: dash-live 2s ease-out infinite; }
	.feed__item.is-new { animation: dash-feed-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
}
@keyframes dash-live {
	0% { box-shadow: 0 0 0 0 rgba(24, 179, 107, .5); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(24, 179, 107, 0); }
}
@keyframes dash-feed-in {
	from { opacity: 0; transform: translateY(-6px); background: #E2F7EC; }
}

/* --- The feed, rolling --------------------------------------------------
   A window three lines tall that the list rolls up through, like the
   deadline ticker on the homepage. The list is duplicated by account.js and
   the track is animated by exactly half its own height, so the copy arrives
   where the original started and the loop has no seam.

   It stops on hover and on focus - something moving away from under the
   pointer cannot be read or clicked - and does not run at all for a reader
   who has asked for less motion.
   ---------------------------------------------------------------------- */

.dash-feed__list[data-feed-roll] {
	position: relative;
	overflow: hidden;
	/* Three rows: each is 2 lines at 1.45 plus 14px of padding. */
	max-height: 174px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.dash-feed__track { animation: dash-feed-roll var(--feed-seconds, 24s) linear infinite; }
.dash-feed__list:hover .dash-feed__track,
.dash-feed__list:focus-within .dash-feed__track { animation-play-state: paused; }

@keyframes dash-feed-roll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.dash-feed__track { animation: none; }
	/* No roll means no reason to crop, and no reason to show the copy. */
	.dash-feed__list[data-feed-roll] { max-height: none; -webkit-mask-image: none; mask-image: none; }
	.dash-feed__track > [aria-hidden="true"] { display: none; }
}

.feed { margin: 0; padding: 0; list-style: none; }
.feed__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 0;
	border-radius: 8px;
}
.feed__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tint-bg);
	color: var(--tint);
}
.feed__body { min-width: 0; }
.feed__text {
	display: block;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--dash-slate);
}
.feed__text strong { font-weight: 700; color: #1D5FD1; }
.feed__text strong:first-child { color: var(--dash-navy); }
.feed__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	font-size: 11.5px;
	color: var(--dash-slate);
}
.feed__meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}
.feed-empty { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dash-slate); }

/* Community impact. */
.dash-impact {
	border-color: #CDEEEA;
	background: linear-gradient(160deg, #E4F7F5 0%, #EEF6FD 100%);
}
.dash-impact__head { display: flex; gap: 12px; margin-bottom: 8px; }
.dash-impact__head .dash-card__title { margin-bottom: 2px; }
.dash-impact__head .dash-card__intro { margin: 0; }
.dash-impact__badge { display: inline-flex; flex: 0 0 auto; color: #0D7FA6; }

/* One number to a row, each on its own white card with the icon in its own
   tint and a chevron to wherever the number comes from. */
.dash-impact__rows {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dash-impact__link {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 7px 11px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.dash-impact__link:hover { background: #fff; transform: translateY(-1px); }
.dash-impact__link:focus-visible { outline: 3px solid var(--account-soft, #0B8F94); outline-offset: 2px; }
.dash-impact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--tint-bg);
	color: var(--tint);
}
.dash-impact__value { font-size: 19px; font-weight: 800; line-height: 1; color: var(--dash-navy); }
.dash-impact__label { min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--dash-slate); }
.dash-impact__link > svg { color: #9FB0C6; }



@media (prefers-reduced-motion: reduce) {
	.dash-hub__go,
	.dash-stat,
	.dash-hub,
	.dash-banner__cta,
	.dash-opp__thumb img,
	.dash-ring__fill { transition: none; }
}

/* The rail a little narrower on a laptop, so the main column's cards keep
   a landscape shape. The floor is what the profile card needs - its ring
   beside a button that does not wrap - so the rail never has to spill. */
@media (min-width: 1200px) {
	.account-dash { grid-template-columns: minmax(0, 1fr) clamp(270px, 20vw, 330px); }
}

@container (min-width: 560px) {
	.dash-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 640px) {
	.dash-hubs,
	.dash-learn,
	.dash-opps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Four in a row from here on. On a 1280-wide laptop the main column is
   about 640px, which is this band: the tiles are made compact - less
   padding, a smaller icon, a smaller number - so four of them still read
   rather than folding into two rows of two. They get their full size back
   at 756px, and room to breathe at 1000px.

   .dash-stats--3 is the Toolkit's own three-tile row, which has never
   wanted any of this and still does not. My Favourites sets its own grid
   and sizes further down and overrides what it needs. */
@container (min-width: 560px) {
	.dash-stats:not(.dash-stats--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
	.dash-stats:not(.dash-stats--3) .dash-stat { gap: 8px; min-height: 68px; padding: 9px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__icon { width: 36px; height: 36px; border-radius: 10px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__icon svg { width: 22px; height: 22px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__top { margin-bottom: 2px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__value { font-size: 19px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__label { font-size: 9.5px; }
}
@container (min-width: 756px) {
	.dash-stats:not(.dash-stats--3) { gap: 12px; }
	.dash-stats:not(.dash-stats--3) .dash-stat { gap: 10px; min-height: 84px; padding: 12px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__icon { width: 48px; height: 48px; border-radius: 13px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__icon svg { width: 28px; height: 28px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__top { margin-bottom: 4px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__value { font-size: 23px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__label { font-size: 10px; }
}

/* --- The main dashboard's row, when it is short of tiles -----------------
   Only here: .dash-stats--main is the dashboard and nothing else. A member
   whose courses and certificates are not open to them has two tiles, and
   two tiles in a four-column grid is two tiles and two holes - so the row
   takes as many columns as there are tiles (--dash-stats-n, counted by the
   template) and caps each at 260px rather than stretching it across half
   the page. 260px is about what a tile gets when four of them share a wide
   dashboard, so two tiles read as the same tile.

   They are given the full-size treatment outright, because the compact one
   above exists to fit four across a 640px column and two have the room.
   ---------------------------------------------------------------------- */
@container (min-width: 560px) {
	.dash-stats--main:not(.dash-stats--tight) {
		grid-template-columns: repeat(var(--dash-stats-n, 4), minmax(0, 260px));
		justify-content: start;
		gap: 12px;
	}
	.dash-stats--main:not(.dash-stats--tight) .dash-stat { gap: 10px; min-height: 84px; padding: 12px; }
	.dash-stats--main:not(.dash-stats--tight) .dash-stat__icon { width: 48px; height: 48px; border-radius: 13px; }
	.dash-stats--main:not(.dash-stats--tight) .dash-stat__icon svg { width: 28px; height: 28px; }
	.dash-stats--main:not(.dash-stats--tight) .dash-stat__top { margin-bottom: 4px; }
	.dash-stats--main:not(.dash-stats--tight) .dash-stat__value { font-size: 23px; }
	.dash-stats--main:not(.dash-stats--tight) .dash-stat__label { font-size: 10px; }
}

/* One to a row where two would leave the label no room at all. */
@container (max-width: 419px) {
	.dash-stats { grid-template-columns: minmax(0, 1fr); }
}
/* Room to breathe once the tiles are wide. */
@container (min-width: 1000px) {
	.dash-stats:not(.dash-stats--3) .dash-stat { gap: 12px; padding: 13px 14px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__icon { width: 54px; height: 54px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__icon svg { width: 31px; height: 31px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__label { font-size: 11.5px; }
	.dash-stats:not(.dash-stats--3) .dash-stat__value { font-size: 25px; }
}

/* Three Quick Access tiles in a row as soon as the column can hold them. */
@container (min-width: 620px) {
	.dash-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* The dashboard rail is narrow at every width, so its activity rows keep
   their time on the right instead of wrapping under, as the History page's
   wider rows do on a phone. */
.dash-card .activity__item { flex-wrap: nowrap; }
.dash-card .activity__when { margin-left: 0; }

.dash-card__title { font-size: clamp(15px, 1.15vw, 16px); }
.dash-profile__btn { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1499px) {
	.dash-ring { width: 74px; height: 74px; }
	.dash-ring__value { font-size: 16px; }
	.dash-profile__row { gap: 12px; }
}


/* =========================================================================
   PERSONALISE YOUR EXPERIENCE, after first-page-after-login.jpg

   The screen a member sees once, the first time they sign in. It fills the
   window: a navy brand panel down the left and the question beside it. The
   account's own chrome is off (mindship_account_immersive), so this is the
   whole page.
   ========================================================================= */

/* This screen is the whole page: the account chrome around it goes, and
   the shell gives back its padding. */
.account:has(.pz) .account-sidebar,
.account:has(.pz) .account-topbar { display: none; }
.account:has(.pz) .account__content,
.account--immersive:has(.pz) .account__content {
	display: block;
	padding: 0;
	min-height: 100vh;
	min-height: 100dvh;
}

.pz {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100dvh;
	background: #F4F7FC;
}
@media (min-width: 900px) {
	.pz { grid-template-columns: clamp(260px, 22vw, 320px) minmax(0, 1fr); }
}

/* --- The panel ---------------------------------------------------------- */

.pz-brand {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 26px 30px;
	background:
		linear-gradient(180deg, rgba(4, 22, 51, .94) 0%, rgba(5, 28, 64, .82) 46%, rgba(6, 34, 74, .96) 100%),
		radial-gradient(120% 60% at 50% 100%, #0E5E86 0%, #061B3F 70%);
	color: #fff;
}
@media (min-width: 900px) { .pz-brand { display: flex; } }

.pz-brand__logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.pz-brand__logo .site-branding__text { color: #fff; }
.pz-brand__logo .site-branding__mark { width: auto; height: 42px; }

.pz-brand__rule { width: 46px; height: 3px; margin: 26px 0 22px; border-radius: 2px; background: #19B6C9; }
.pz-brand__rule--short { width: 70px; margin: 18px 0 18px; height: 2px; }

.pz-brand__title {
	margin: 0;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
}
.pz-brand__lead { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.45; color: #D7E6F4; }
.pz-brand__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #A9C2DC; }

.pz-brand__words {
	display: grid;
	gap: 2px;
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 20px;
	font-style: italic;
	color: #EAF3FB;
}

/* --- The page ----------------------------------------------------------- */

.pz-main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 20px clamp(16px, 3vw, 44px) 40px;
}

.pz-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.pz-steps {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.pz-step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 6px;
	min-width: clamp(104px, 13vw, 168px);
	font-size: 12.5px;
	color: #7C8CA6;
}
/*
 * The line between the numbers, drawn from each step back to the one before
 * it. It stops 6px short of either circle - half the 30px circle plus the
 * gap - so it joins the two without running underneath them. Drawn edge to
 * edge it crossed the number it was pointing at, and because a later step
 * paints over an earlier one the circle lost.
 */
.pz-step + .pz-step::before {
	content: "";
	position: absolute;
	top: 15px;
	right: calc(50% + 21px);
	left: calc(-50% + 21px);
	height: 2px;
	background: #D8E1EE;
}
.pz-step.is-now::before,
.pz-step.is-done::before { background: #11A8B8; }
.pz-step__n {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 2px solid #D8E1EE;
	border-radius: 50%;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #7C8CA6;
}
.pz-step.is-done .pz-step__n { border-color: #11A8B8; background: #11A8B8; color: #fff; }
.pz-step.is-now .pz-step__n { border-color: #0C2D63; background: #0C2D63; color: #fff; }
.pz-step.is-now .pz-step__label { font-weight: 800; color: #0C2D63; }

.pz-skip {
	padding: 10px 18px;
	border: 1px solid #D4DEEC;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #0C2D63;
	cursor: pointer;
}
.pz-skip:hover { border-color: #0C2D63; }
.pz-skip--under {
	padding: 0;
	border: 0;
	background: none;
	color: #1668E3;
	text-decoration: none;
}
.pz-skip--under:hover { text-decoration: underline; text-underline-offset: 3px; }

.pz-head { text-align: center; }
.pz-head__title {
	margin: 0 0 8px;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: #0C2D63;
}
.pz-head__ask { margin: 0 0 6px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; color: #3E5680; }
.pz-head__lead { margin: 0; font-size: 14px; color: #6B7E9C; }

/* --- The six areas ------------------------------------------------------ */

.pz-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	margin: 6px auto 0;
	width: 100%;
	max-width: 1180px;
}
@media (min-width: 860px) { .pz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pz-card {
	border: 1.5px solid var(--pz-line, #E3EAF4);
	border-radius: 14px;
	background: var(--pz-bg, #fff);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pz-card.is-on { border-color: var(--pz-on, #11A8B8); box-shadow: 0 1px 2px rgba(11, 34, 71, .05); }
.pz-card:focus-within { box-shadow: 0 0 0 3px rgba(17, 168, 184, .18); }

.pz-card--blue { --pz-bg: #F1F7FE; --pz-line: #DCE9F8; --pz-on: #1668E3; --pz-tint: #1668E3; --pz-tint-bg: #DCEAFB; }
.pz-card--amber { --pz-bg: #FFF8EC; --pz-line: #F6E6C8; --pz-on: #E39A1B; --pz-tint: #E39A1B; --pz-tint-bg: #FBEBCD; }
.pz-card--green { --pz-bg: #EFFAF3; --pz-line: #D3EEDC; --pz-on: #1E9E62; --pz-tint: #1E9E62; --pz-tint-bg: #D6F0E1; }
.pz-card--violet { --pz-bg: #F7F3FF; --pz-line: #E6DCFA; --pz-on: #6C3CE0; --pz-tint: #6C3CE0; --pz-tint-bg: #E7DEFB; }
.pz-card--red { --pz-bg: #FEF3F4; --pz-line: #F8DCDF; --pz-on: #E03146; --pz-tint: #E03146; --pz-tint-bg: #FBDDE1; }

.pz-card__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 16px;
	cursor: pointer;
}
.pz-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: var(--pz-tint-bg, #E6EEF9);
	color: var(--pz-tint, #1668E3);
}
.pz-card__text { display: grid; gap: 3px; min-width: 0; }
.pz-card__title { font-size: 15.5px; font-weight: 800; color: #0C2D63; }
.pz-card__line { font-size: 13px; line-height: 1.45; color: #5E7291; }

/* The box is the design's own square, ticked in the area's colour. */
.pz-card__box {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid #C6D3E6;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.pz-card__box:checked { border-color: var(--pz-on, #11A8B8); background: var(--pz-on, #11A8B8); }
.pz-card__box:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}
.pz-card__box:focus-visible { outline: 3px solid rgba(17, 168, 184, .4); outline-offset: 2px; }

/* --- The finer answer under Global Opportunities ------------------------ */

.pz-card__more { padding: 0 16px 16px; }
.pz-card__more[hidden] { display: none; }
.pz-card__ask { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #3E5680; }

.pz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1.5px solid #D8E3F2;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: #26416F;
	cursor: pointer;
}
.pz-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pz-chip > svg { display: none; }
.pz-chip.is-on { border-color: #0E8E7F; background: #0E8E7F; color: #fff; }
.pz-chip.is-on > svg { display: block; }
.pz-chip:focus-within { box-shadow: 0 0 0 3px rgba(14, 142, 127, .22); }

/* --- Saving ------------------------------------------------------------- */

.pz-save {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 1180px;
	margin: 8px auto 0;
	padding: 17px 24px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(100deg, #0C5A7A 0%, #0A4A6B 100%);
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
.pz-save:hover { background: linear-gradient(100deg, #0A4A6B 0%, #083C58 100%); }
.pz-save:focus-visible { outline: 3px solid #0C2D63; outline-offset: 3px; }

.pz-under { margin: 0; text-align: center; font-size: 14px; font-weight: 700; }

.pz-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	color: #7C8CA6;
	text-align: center;
}
.pz-foot > svg { flex: 0 0 auto; }

/* On a short laptop screen the whole thing still has to fit without the
   page feeling cramped, so the spacing comes in rather than the type. */
@media (max-height: 700px) and (min-width: 900px) {
	.pz-main { gap: 12px; padding-top: 14px; padding-bottom: 24px; }
	.pz-head__title { font-size: 30px; }
	.pz-card__row { padding: 12px 14px; }
	.pz-card__icon { width: 44px; height: 44px; }
	.pz-save { padding: 14px 24px; font-size: 16px; }
}


/* The profile's copy of the interests question: the same cards, one to a
   row in the page's narrower column. */
.profile-interests .pz-grid { max-width: none; margin-top: 4px; }
@media (min-width: 1100px) { .pz-grid--profile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-interests .pz-card__title { font-size: 14.5px; }
.profile-interests .pz-card__row { padding: 13px 14px; }
.profile-interests .pz-card__icon { width: 44px; height: 44px; }
.profile-interests .account-card__foot { margin-top: 16px; }


/* =========================================================================
   EXPLORE OPPORTUNITIES, after explore-opportunities.jpg
   ========================================================================= */

.opps-head {
	display: grid;
	gap: 16px;
	align-items: center;
}
@media (min-width: 1100px) { .opps-head { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); } }

.opps-head__text { min-width: 0; }

/* The invitation to choose interests, which is what decides the fourth
   number below it. */
.opps-reco {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 14px;
	padding: 14px 16px;
	border: 1px solid #C9E8EC;
	border-radius: 14px;
	background: linear-gradient(140deg, #E6F7F8 0%, #EFF8FD 100%);
}
.opps-reco__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #0E8795;
	color: #fff;
}
.opps-reco__text { display: grid; gap: 3px; min-width: 0; }
.opps-reco__text strong { font-size: 14.5px; font-weight: 800; line-height: 1.3; color: #0B2247; }
.opps-reco__text span { font-size: 12.5px; line-height: 1.45; color: #4E6480; }
.opps-reco__btn {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 10px 18px;
	border-radius: 10px;
	background: #0B2A4A;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.opps-reco__btn:hover { background: #113C68; color: #fff; }
@media (min-width: 560px) {
	.opps-reco { grid-template-columns: auto minmax(0, 1fr) auto; }
	.opps-reco__btn { grid-column: auto; }
}

.opps-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0 20px;
}
@media (min-width: 900px) { .opps-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .opps-stats { grid-template-columns: minmax(0, 1fr); } }
.opps-stats .dash-stat { gap: 10px; min-height: 76px; padding: 11px 12px; }
.opps-stats .dash-stat__icon { width: 44px; height: 44px; border-radius: 12px; }
.opps-stats .dash-stat__value { font-size: 24px; }
.opps-stats .dash-stat__label { overflow: visible; font-size: 12px; white-space: normal; }
.opps-stats .dash-stat__label small { display: block; font-weight: 500; color: #8795AD; }

/* --- The chips under the bar ------------------------------------------- */

.opps-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.opps-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #DFF2F4;
	font-size: 12.5px;
	font-weight: 600;
	color: #0A6A74;
	text-decoration: none;
}
.opps-chip:hover { background: #CDEAED; color: #07535B; }
/* A text link, in the brand teal. It is also rendered as a <button> by
   search-filter.js when a filter redraws the chips, so the browser's own
   button dressing is taken off here rather than in one of the two places. */
.opps-chips__clear {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: inherit;
	color: var(--account-teal-ink);
	text-decoration: none;
	cursor: pointer;
}
.opps-chips__clear:hover,
.opps-chips__clear:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* --- The card ----------------------------------------------------------- */

.opps-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .opps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .opps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) { .opps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .opps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.opp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--dash-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
.opp-card:hover { transform: translateY(-2px); box-shadow: var(--dash-shadow-hover); }

.opp-card__pic {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #E2EDFD;
}
.opp-card__pic img { width: 100%; height: 100%; object-fit: cover; }

/* The two chips the design lays over the bottom of the picture. */
.opp-card__over {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.opp-card__over-chip {
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(7, 24, 48, .72);
	font-size: 11.5px;
	font-weight: 600;
	color: #fff;
	backdrop-filter: blur(2px);
}

.opp-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 11px;
	border-radius: 7px;
	background: #E12741;
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
}

/* The heart the shared button draws, over the picture's top right. */
.opp-card__pic .fav--icon,
.opp-card__pic .favourite-button {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

/* The body fills the card, so the buttons can be pushed to the bottom of
   it (see .opp-card__go). A title that runs to two lines then lengthens
   its own card rather than leaving the one beside it with a gap where its
   buttons should be. */
.opp-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 9px; padding: 13px 14px 14px; }
.opp-card__title { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; }
.opp-card__title a { color: var(--dash-navy, #0B2247); text-decoration: none; }
.opp-card__title a:hover { color: #0E6E86; }

.opp-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.opp-card__chip {
	padding: 4px 10px;
	border-radius: 999px;
	background: #EEF3FA;
	font-size: 11.5px;
	font-weight: 600;
	color: #42597C;
}

.opp-card__when {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #4E6480;
}
.opp-card__when > svg { flex: 0 0 auto; color: #1668E3; }

/* margin-top: auto - the one line that keeps every row of cards ending on
   the same line of buttons however long the titles above them are. */
.opp-card__go { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 2px; }
.opp-card__go:has(.opp-card__check) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Below 1340px a card in a four-across grid is too narrow for "Check
   Eligibility" on one line beside "View Details", and it wrapped. One under
   the other instead: full-width buttons read better than two cramped ones,
   and the card is no taller for it than a wrapped button made it. */
@media (max-width: 1339px) {
	.opp-card__go:has(.opp-card__check) { grid-template-columns: minmax(0, 1fr); }
}
.opp-card__check,
.opp-card__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}
.opp-card__check { border: 1px solid #CFDDEC; background: #fff; color: #0E6E86; }
.opp-card__check:hover { border-color: #0E6E86; color: #0A5566; }
.opp-card__view { background: #0E7281; color: #fff; }
.opp-card__view:hover { background: #0A5B68; color: #fff; }
.opp-card__check:focus-visible,
.opp-card__view:focus-visible { outline: 3px solid #0B2A4A; outline-offset: 2px; }

/* A deadline inside the flag's window tints the whole card, as drawn. */
.opp-card.is-closing { border-color: #F6CBD2; }

@media (prefers-reduced-motion: reduce) {
	.opp-card { transition: none; }
}


/* The chips and the sort control share a line, as the design has them. */
.opps-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 12px;
}
.opps-row .account-opps__count { margin: 0; font-size: 12.5px; }
/* The chips sit between the count and the sort, as the design has them. */
.opps-row .opps-chips + .opps-sort,
.opps-row .account-opps__count + .opps-sort { margin-left: auto; }

/* --- The filter bar, inside the account ----------------------------------
   The public archive lays this out as a six-column grid from 900px up. That
   is a viewport media query, and in the account the bar is not in the
   viewport - it is in the main column, which at a 1280 window is about
   640px. Six columns of 640px is 95px each, and after the padding and the
   select's own arrow there were about fifty pixels left for the words: the
   client saw "All Cat", "All Cou", "All Fur".

   So in here it is a row that wraps, like the bar on My Favourites - which
   is also what the two should look like. Same height, same radius, same
   border, same type. Each control takes the width of its own content up to
   a cap, and the row wraps when it runs out of space instead of making
   every control narrower than its contents.
   ---------------------------------------------------------------------- */

.account-opps__bar .filters-bar__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.account-opps__bar .filters-bar input[type="text"],
.account-opps__bar .filters-bar select,
.account-opps__bar .filters-bar .btn {
	height: 42px;
	min-height: 42px;
	border-radius: 10px;
	font-size: 13px;
}
.account-opps__bar .filters-bar input[type="text"],
.account-opps__bar .filters-bar select {
	width: auto;
	min-width: 0;
	padding: 0 12px;
	border: 1px solid var(--dash-line, #E4EAF2);
	background: #fff;
	color: var(--dash-navy, #0B2247);
}
/* The only control that grows: the selects take the width their labels
   need and the keyword field takes what is left, so the row fills its
   container and the Filter button sits at the right-hand edge.

   The cap is where that stops being sensible. At 1600 the field is about
   520px, which is a generous search box; past that it was taking every
   extra pixel and on a 1920 screen it was 845px - half the row for one
   input. So it stops at 520 and the slack goes to the margin below
   instead. Everything at 1600 and under is untouched: below the cap the
   field absorbs all the free space, so there is none for that margin to
   take and nothing moves. */
.account-opps__bar .filters-bar input[type="text"] {
	flex: 1 1 170px;
	min-width: 150px;
	max-width: 520px;
}
.account-opps__bar .filters-bar select {
	/* A select is as wide as its longest option unless it is told
	   otherwise, and a country list is long enough to take the whole row -
	   so each one is given a width instead, and it is the width of its own
	   first option.

	   One shared width was wrong: "All Academic Levels" is half as long
	   again as "All Countries", so a width that suited the short ones
	   ellipsised the long ones. flex: 0 0 auto, so the keyword field
	   growing beside them cannot take it back either.

	   The numbers are the rendered width of each label plus the padding,
	   measured in the theme's own typeface - its metrics run wider than a
	   system fallback, so measuring without the webfont loaded
	   under-reads by about a seventh. */
	flex: 0 0 auto;
	width: 140px;
	padding-right: 20px;
	font-weight: 700;
	text-overflow: ellipsis;
}
.account-opps__bar .filters-bar select[name="category"] { width: 143px; }
.account-opps__bar .filters-bar select[name="country"] { width: 136px; }
.account-opps__bar .filters-bar select[name="funding_type"] { width: 166px; }
.account-opps__bar .filters-bar select[name="degree_level"] { width: 180px; }
/* Keeps the row ending at the content's own edge once the field has
   stopped growing - so a very wide screen reads as filters on the left and
   the action on the right, rather than as a row that gave up early with a
   ragged gap after it. It does nothing at all below the cap, because there
   is no free space for it to absorb. */
.account-opps__bar .filters-bar .btn { flex: 0 0 auto; margin-left: auto; padding-inline: 18px; }
.account-opps__bar .filters-bar label { font-size: 12px; }

.opps-row .opps-chips { margin: 0; }
.opps-sort {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	padding: 2px 10px;
	min-height: 36px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 9px;
	background: #fff;
}
.opps-sort label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #42597C;
	white-space: nowrap;
}
.opps-sort label > svg { color: #1668E3; }
.opps-sort select {
	height: 30px;
	min-height: 0;
	padding: 0 2px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dash-navy, #0B2247);
}

/* A pill the script adds or removes as filters change. */
/* The same chip, drawn as a <button> when search-filter.js redraws the row.
   font: inherit is a shorthand, and it was resetting font-size along with
   the family - back to the body's, which is why a chip applied by a filter
   came out half as big again as the "Clear All Filters" beside it. Only the
   family is inherited here; the chip's own type is restated. */
.opps-chip--btn {
	border: 0;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: inherit;
	cursor: pointer;
}
.opps-sort__go { margin-left: 6px; }


/* =========================================================================
   MY FAVOURITES, after my-favourites.jpg
   ========================================================================= */

.fav-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.fav-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: var(--dash-navy, #0B2247);
	text-decoration: none;
	white-space: nowrap;
}
.fav-back:hover { border-color: var(--dash-navy, #0B2247); color: var(--dash-navy, #0B2247); }

/* The four numbers: label above, number below, as this design has them. */
.fav-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0 16px;
}
@media (min-width: 900px) { .fav-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .fav-stats { grid-template-columns: minmax(0, 1fr); } }
.fav-stats .dash-stat { gap: 12px; min-height: 76px; padding: 12px 14px; cursor: default; }
.fav-stats .dash-stat:hover { transform: none; box-shadow: var(--dash-shadow); }
.fav-stats .dash-stat__icon { width: 44px; height: 44px; border-radius: 12px; }
.fav-stats .dash-stat__label {
	overflow: visible;
	margin-bottom: 1px;
	font-size: 12.5px;
	font-weight: 600;
	white-space: normal;
	color: var(--dash-slate, #51617A);
}
.fav-stats .dash-stat__value { font-size: 26px; color: var(--dash-navy, #0B2247); }
.fav-stats .dash-stat__note { display: block; margin-top: 1px; font-size: 11.5px; color: #8795AD; }

/* --- The line about what closes soon ------------------------------------ */

.fav-alert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 1px solid #F7CCD4;
	border-radius: 13px;
	background: #FDF1F3;
}
.fav-alert__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: #DC2B45;
}
.fav-alert__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.fav-alert__text strong { font-size: 14px; font-weight: 800; color: #B01A33; }
.fav-alert__text span { font-size: 12.5px; color: #8A4C59; }
.fav-alert__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 0;
	border-radius: 10px;
	background: #E02B47;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
.fav-alert__btn:hover { background: #C21F39; }
.fav-alert__btn.is-on { background: #8E1328; }

/* --- Tabs, sort, filter, search ----------------------------------------- */

.fav-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--dash-line, #E4EAF2);
}
.fav-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-right: auto; }
.fav-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border: 0;
	border-bottom: 2.5px solid transparent;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dash-slate, #51617A);
	cursor: pointer;
}
.fav-tab span { font-weight: 600; color: #8795AD; }
.fav-tab.is-on { border-bottom-color: #0E8795; color: #0E6E86; }
.fav-tab.is-on span { color: #0E8795; }

.fav-pick {
	display: inline-grid;
	gap: 1px;
	padding: 5px 12px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 10px;
	background: #fff;
}
.fav-pick > span { font-size: 11px; color: #8795AD; }
.fav-pick select {
	min-height: 22px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--dash-navy, #0B2247);
}

.fav-find {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	min-height: 44px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 10px;
	background: #fff;
	color: #8795AD;
}
.fav-find { flex: 1 1 180px; max-width: 280px; }
.fav-find input {
	min-width: 0;
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--dash-navy, #0B2247);
}
.fav-find input:focus { outline: none; }
.fav-find:focus-within { border-color: #0B8F94; box-shadow: 0 0 0 3px rgba(11, 143, 148, .15); }

/* --- A saved row --------------------------------------------------------- */

.fav-list { display: grid; gap: 12px; }
.fav-list[hidden] { display: none; }

.fav-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--dash-shadow);
}
.fav-row[hidden] { display: none; }
/* 200px against the picture's 128px height is roughly 16:10 - a landscape
   thumbnail, the shape these images are. At 150px it was all but square
   and object-fit: cover took the sides off every one of them. */
@media (min-width: 720px) { .fav-row { grid-template-columns: 224px minmax(0, 1fr) minmax(200px, 300px); } }

/* The one closing within a week is called out, as the design draws it. */
.fav-row.is-urgent { border-color: #F3C3CC; background: #FEF4F6; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.fav-row.is-urgent::before {
	content: "";
	grid-row: 1 / -1;
	margin: -14px 0 -14px -14px;
	width: 4px;
	border-radius: 14px 0 0 14px;
	background: #E02B47;
}
@media (min-width: 720px) { .fav-row.is-urgent { grid-template-columns: 4px 224px minmax(0, 1fr) minmax(170px, 300px); } }
.fav-row.is-closed { background: #F8FAFC; }
.fav-row.is-closed .fav-row__pic img { filter: grayscale(.6); opacity: .75; }

.fav-row__pic {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 16 / 10;
	background: #E2EDFD;
}
.fav-row__pic img { width: 100%; height: 100%; object-fit: cover; }
.fav-row__flag {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 7px;
	background: #E02B47;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

.fav-row__body { display: grid; gap: 7px; align-content: start; min-width: 0; }
.fav-row__meta { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8795AD; }
.fav-row__title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.fav-row__title a { color: var(--dash-navy, #0B2247); text-decoration: none; }
.fav-row__title a:hover { color: #0E6E86; }

.fav-row__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fav-row__chip {
	padding: 4px 10px;
	border-radius: 999px;
	background: #EEF3FA;
	font-size: 11.5px;
	font-weight: 600;
	color: #42597C;
}
.fav-row__chip.is-urgent { background: #FBE0E5; color: #B01A33; }
.fav-row__chip.is-closed { background: #E7EDF4; color: #5B6B82; }

/* The description is two lines until Show More is pressed. */
.fav-row__text {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dash-slate, #51617A);
	text-overflow: ellipsis;
}
.fav-row.is-open .fav-row__text { -webkit-line-clamp: unset; display: block; }

.fav-note { margin-top: 4px; }
.fav-note[hidden] { display: none; }
.fav-note__form { display: grid; gap: 6px; padding: 10px; border: 1px dashed #BFD2E6; border-radius: 10px; background: #F7FAFD; }
.fav-note__form label { font-size: 11.5px; font-weight: 700; color: #42597C; }
.fav-note__form textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	line-height: 1.5;
	resize: vertical;
}
.fav-note__save {
	justify-self: start;
	padding: 8px 14px;
	border: 0;
	border-radius: 8px;
	background: #0E7281;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
.fav-note__save:hover { background: #0A5B68; }

.fav-row__side { display: grid; gap: 8px; align-content: start; }
.fav-row__view,
.fav-row__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}
.fav-row__view { background: #0B2A4A; color: #fff; }
.fav-row__view:hover { background: #113C68; color: #fff; }
.fav-row__check { border: 1px solid #CFDDEC; background: #fff; color: #0E6E86; }
.fav-row__check:hover { border-color: #0E6E86; }

.fav-row__tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; }
.fav-row__tool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: #1668E3;
	cursor: pointer;
}
.fav-row__tool:hover { text-decoration: underline; text-underline-offset: 3px; }

.fav-none {
	margin: 0;
	padding: 20px;
	border: 1.5px dashed #BFD2E6;
	border-radius: 12px;
	font-size: 13.5px;
	color: var(--dash-slate, #51617A);
	text-align: center;
}
.fav-none[hidden] { display: none; }

/* --- The archived ones --------------------------------------------------- */

.fav-archive {
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 14px;
	background: #F3F6FB;
}
.fav-archive[hidden] { display: none; }
.fav-archive__head { display: flex; gap: 12px; margin-bottom: 12px; }
.fav-archive__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: #E4EBF4;
	color: #5B6B82;
}
.fav-archive__title { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--dash-navy, #0B2247); }
.fav-archive__title span { color: #8795AD; }
.fav-archive__head p { margin: 0; font-size: 12.5px; color: var(--dash-slate, #51617A); }

/* On the client's laptop the row keeps its shape by giving the picture and
   the buttons a little less room. */
@media (min-width: 720px) and (max-width: 1365px) {
	.fav-row { grid-template-columns: 184px minmax(0, 1fr) minmax(196px, 300px); }
	.fav-row.is-urgent { grid-template-columns: 4px 184px minmax(0, 1fr) minmax(196px, 300px); }
	.fav-row__title { font-size: 15px; }
}


/* =========================================================================
   MY PROFILE, after my-profile.jpg and my-profile-expanded.jpg

   Every section is a numbered row that opens where it stands - a <details>,
   so it opens and closes, takes the keyboard and works with no script at
   all. The forms inside are the ones that were always here.
   ========================================================================= */

.pf-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.pf-preview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid #CFE0F0;
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: #0E6E86;
	text-decoration: none;
	white-space: nowrap;
	margin-right: 90px;
}
.pf-preview:hover { border-color: #0E6E86; color: #0A5566; }

.pf { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1150px) { .pf { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 350px); } }
.pf-main { display: grid; gap: 10px; min-width: 0; }
.pf-rail { display: grid; gap: 14px; min-width: 0; }

/* --- A row -------------------------------------------------------------- */

.pf-row { padding: 0; }
.pf-row__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
}
.pf-row__head::-webkit-details-marker { display: none; }
.pf-row__head:focus-visible { outline: 3px solid var(--account-soft, #0B8F94); outline-offset: -3px; border-radius: 13px; }

.pf-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: #EAF1FB;
	color: #2B6CD4;
}
.pf-row.is-done .pf-row__icon { background: #E3F4F2; color: #0E8795; }

.pf-row__text { display: grid; gap: 2px; min-width: 0; }
.pf-row__title { font-size: 14.5px; font-weight: 800; color: var(--dash-navy, #0B2247); }
.pf-row__n { color: #8795AD; }

/* Exactly one line, always - see the note in the template for why. Two
   boxes rather than one: the flex is what lets the tick sit beside the
   words, and the ellipsis needs a block of its own to happen in. */
.pf-row__line {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--dash-slate, #51617A);
}
.pf-row__line > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pf-row__line > svg { flex: 0 0 auto; }
.pf-row__line--said { color: #41567A; }
.pf-row__line--na { color: #0A6A74; }

.pf-row__state {
	padding: 5px 11px;
	border-radius: 999px;
	background: #EEF2F8;
	font-size: 11.5px;
	font-weight: 700;
	color: #6B7E9C;
	white-space: nowrap;
}
.pf-row__state.is-done { background: #DFF3EC; color: #107A5B; }
.pf-row__state.is-added { background: #E5EFFC; color: #1D5FD1; }

.pf-row__chev { display: inline-flex; color: #8795AD; transition: transform .15s ease; }
.pf-row[open] .pf-row__chev { transform: rotate(180deg); }
.pf-row[open] { border-color: #BBD7F2; box-shadow: var(--dash-shadow-hover); }
.pf-row[open] .pf-row__head { border-bottom: 1px solid var(--dash-line, #E4EAF2); }
/* What is in the section is below, in the form. The description of what
   the section is for stays, because it is still the answer to "what goes
   in here?" while they are filling it in. */
.pf-row[open] .pf-row__line--said,
.pf-row[open] .pf-row__line--na { display: none; }

/* The form inside gets the padding the row's head has. */
.pf-row > form,
.pf-row > .profile-photo__form,
.pf-row > .account-card__intro { padding: 14px 16px 16px; margin: 0; }
.pf-row > .profile-form { padding: 14px 16px 16px; }

@media (max-width: 599px) {
	/* Icon, words and chevron on the first line; the badge on its own
	   underneath, lined up with the words.

	   Every one of the four is placed by name. The head has four children
	   and three columns here, so left to auto-placement the badge took the
	   chevron's slot and pushed the chevron onto the next row, under the
	   icon - which is what put a chevron on the left of each row and the
	   icon on top of the title. */
	.pf-row__head {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		row-gap: 8px;
	}
	.pf-row__icon  { grid-column: 1; grid-row: 1; }
	.pf-row__text  { grid-column: 2; grid-row: 1; }
	.pf-row__chev  { grid-column: 3; grid-row: 1; }
	.pf-row__state { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
}

/* --- The rail ----------------------------------------------------------- */

.pf-ring__row { display: flex; align-items: center; gap: 14px; margin: 10px 0 12px; }
.pf-ring__dial {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: conic-gradient(#12B5A6 var(--pf-ring, 0deg), #E4EBF4 0);
}
.pf-ring__dial::after {
	content: "";
	position: absolute;
	inset: 11px;
	border-radius: 50%;
	background: #fff;
}
.pf-ring__dial span {
	position: relative;
	z-index: 1;
	font-size: 20px;
	font-weight: 800;
	color: var(--dash-navy, #0B2247);
}
.pf-ring__count { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dash-slate, #51617A); }

.pf-ticks { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pf-tick { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #6B7E9C; }
.pf-tick > svg { flex: 0 0 auto; color: #C7D3E3; }
.pf-tick a { color: inherit; text-decoration: none; }
.pf-tick a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-tick.is-done { color: var(--dash-navy, #0B2247); font-weight: 600; }
.pf-tick.is-done > svg { color: #12B5A6; }

.pf-cv { border-color: #F3E3C4; background: linear-gradient(160deg, #FFF9EC 0%, #FFFDF8 100%); }
.pf-cv__head { display: flex; gap: 12px; margin-bottom: 10px; }
.pf-cv__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: #F6A932;
	color: #fff;
}
.pf-steps { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.pf-steps li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dash-navy, #0B2247); }
.pf-steps li > svg { flex: 0 0 auto; color: #12B5A6; }
.pf-cv__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 18px;
	border-radius: 10px;
	background: #0B2A4A;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.pf-cv__go:hover { background: #113C68; color: #fff; }

.pf-tips ul,
.pf-help ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.pf-tips li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--dash-slate, #51617A); }
.pf-tips li > svg { flex: 0 0 auto; margin-top: 2px; color: #12B5A6; }
.pf-tips .account-card__title,
.pf-help .account-card__title { display: flex; align-items: center; gap: 8px; }
.pf-tips .account-card__title > svg { color: #F6A932; }
.pf-help .account-card__title > svg { color: #2B6CD4; }

.pf-help__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 16px;
	border: 1px solid #CFE0F0;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #1D5FD1;
	text-decoration: none;
}
.pf-help__go:hover { border-color: #1D5FD1; }

/* The interests card and the CV card at the end of the main column keep
   the page's full width under the rows. */
.pf-main > .profile-interests,
.pf-main > .profile-next { margin-top: 8px; }


/* --- My Favourites, second pass ------------------------------------------
   The row as the design draws it: the picture filling its side, the two
   buttons on one line, and the tools under them with a hairline between. */

.fav-pick,
.fav-find { min-height: 42px; }
.fav-pick {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
}
.fav-pick > span { font-size: 12px; white-space: nowrap; }
.fav-pick { flex: 0 1 auto; min-width: 0; }
/* A select is as wide as its longest option unless it is told otherwise,
   and "Deadline (earliest first)" is long enough to push the search box
   onto a second line. */
.fav-pick select {
	width: clamp(104px, 10vw, 164px);
	height: 26px;
	min-width: 0;
	min-height: 0;
	text-overflow: ellipsis;
}
/* The field inherits the site's form padding - 11px top and bottom - and a
   height with it, which made the search box 52px beside two 42px pickers.
   The box here is .fav-find; the input inside it is only the text. */
.fav-find input {
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	line-height: 1.3;
}
/* Tabs, sort, filter and search share one line while there is room for
   them; the search is the one that gives way first. */
.fav-find { flex: 1 1 160px; max-width: 240px; }
@media (max-width: 1099px) { .fav-find { max-width: none; } }

/* 16:9, and centred in whatever height the row turns out to be.

   These images are shot 16:9 and a thumbnail that is not loses the sides of
   every one of them. Holding the ratio means the picture's height follows
   its column's width rather than the row's height - so where a row is
   taller than that, because its reminder schedule is showing or its notes
   box is open, the picture sits in the middle of it rather than at the top
   with a gap underneath. The flag rides on the picture because it is the
   picture's own box, not the column's. */
.fav-row__pic {
	align-self: center;
	aspect-ratio: 16 / 9;
	height: auto;
}
.fav-row__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.fav-row__side { align-content: start; gap: 10px; }
/* Both buttons on one line, each wide enough for its own words - and if
   the column is ever too narrow for that, they stack rather than wrapping
   their labels onto two lines. */
.fav-row__go { display: flex; flex-wrap: wrap; gap: 8px; }
/* Two buttons share the column; one on its own stops at a sensible width
   rather than stretching the full 300px. */
.fav-row__go > * { flex: 1 1 104px; max-width: 170px; }
.fav-row__view,
.fav-row__check {
	min-height: 40px;
	padding: 0 11px;
	font-size: 12.5px;
	white-space: nowrap;
}
.fav-row__check > svg,
.fav-row__view > svg { flex: 0 0 auto; }

.fav-row__tools { align-items: center; gap: 8px; }
.fav-row__bar { width: 1px; height: 16px; background: #D7E0EC; }
.fav-row__tool.is-on { color: #0E7281; }
.fav-row__tool[disabled] { opacity: .6; cursor: progress; }

/* Closing Soon is the tile that needs acting on, so it says so. */
.fav-stats .dash-stat.is-loud {
	border-color: #F3C3CC;
	background: linear-gradient(160deg, #FEF2F4 0%, #FFF8F9 100%);
}
.fav-stats .dash-stat.is-loud .dash-stat__value { color: #C4213A; }
.fav-stats .dash-stat.is-loud .dash-stat__label { color: #A33049; }
.fav-stats .dash-stat.is-loud .dash-stat__icon { background: #FBDDE2; color: #DC2B45; }


/* --- The dashboard's top row ---------------------------------------------
   With no search in it, the bar above the dashboard holds a bell, a globe
   and the account menu - and left a band of empty page beside them. On a
   wide screen the bar now floats in that band's right-hand end and the
   banner starts level with it, as the design has it. The rail's first card
   drops by the bar's height so it still clears those controls. */

@media (min-width: 1000px) {
	.account__main:has(.dash-banner--center) { position: relative; }
	.account__main:has(.dash-banner--center) > .account-topbar {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		z-index: 5;
		/* As wide as the rail it sits over, so the bell cannot reach back
		   across the banner beside it. */
		width: calc(clamp(270px, 20vw, 330px) + (2 * clamp(16px, 2vw, 24px)));
		justify-content: flex-end;
		flex-wrap: nowrap;
		padding: 14px clamp(16px, 2vw, 24px);
		background: transparent;
		border: 0;
	}
	.account__main:has(.dash-banner--center) > .account-topbar .account-user__name,
	.account__main:has(.dash-banner--center) > .account-topbar .account-user__role { white-space: nowrap; }
	.account__main:has(.dash-banner--center) > .account__content { padding-top: 16px; }
	.account__main:has(.dash-banner--center) .account-dash__rail { padding-top: 58px; }
}

/* --- The same row on a narrower laptop ------------------------------------
   On the dashboard this bar is only as wide as the rail it floats over -
   318px at 1280, of which 48px is padding, so 270px for the controls. The
   controls wanted 304px, and the 34px they could not have is why the bell
   sat out over the banner on the client's screen.

   So between 1000 and 1600 everything in the cluster comes down a size: a
   tighter gap, smaller glyphs, a smaller avatar, smaller name and role.
   Nothing is taken away and nothing moves to a second row - it is the same
   row, drawn at the size the space allows. Above 1600 the rail is wide
   enough for the full-size version and keeps it.

   Scoped to .account-topbar__tools, so this is the account bar's right-hand
   end and nothing else.
   ---------------------------------------------------------------------- */

@media (min-width: 1000px) and (max-width: 1599px) {
	.account-topbar__tools { gap: 8px; }

	.account-topbar__tools .account-topbar__icon,
	.account-topbar__tools .account-topbar__searchopen { padding: 6px; }
	.account-topbar__tools .account-topbar__icon > svg,
	.account-topbar__tools .account-topbar__searchopen > svg { width: 19px; height: 19px; }

	.account-topbar__tools .account-lang .lang-switch__toggle { padding: 6px; }
	.account-topbar__tools .account-lang .lang-switch__toggle svg:first-child { width: 19px; height: 19px; }

	.account-topbar__tools .account-topbar__rule { height: 26px; }

	.account-topbar__tools .account-user__button { gap: 7px; padding: 3px 5px 3px 3px; }
	.account-topbar__tools .account-user__avatar { width: 30px; height: 30px; }
	.account-topbar__tools .account-user__name { font-size: 12.5px; }
	.account-topbar__tools .account-user__role { font-size: 10.5px; }
	.account-topbar__tools .account-user__button > svg { width: 15px; height: 15px; }

	/* The badge follows the bell it sits on. */
	.account-topbar__tools .account-bell__count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; line-height: 12px; }
}

/* --- Your Profile, after complete-profile-half/full ---------------------- */

.dash-profile__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-top: 12px;
	padding: 13px 18px;
	border-radius: 11px;
	background: #0B2A4A;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.dash-profile__btn:hover { background: #113C68; color: #fff; }
.dash-profile__lead { font-size: 15px; font-weight: 800; line-height: 1.3; color: #0E8795; }
.dash-profile__hint { font-size: 12.5px; line-height: 1.5; color: var(--dash-slate); }

/* --- Deadlines closing soon ---------------------------------------------- */

.dash-soon { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-soon__item > a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--dash-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--dash-shadow);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.dash-soon__item > a:hover { transform: translateY(-1px); box-shadow: var(--dash-shadow-hover); }
.dash-soon__item > a > svg { color: #9FB0C6; }

.dash-soon__when {
	display: grid;
	justify-items: center;
	min-width: 54px;
	padding: 6px 8px;
	border-radius: 10px;
	background: #EEF4FD;
	line-height: 1.1;
}
.dash-soon__when strong { font-size: 15px; font-weight: 800; color: #1D5FD1; }
.dash-soon__when small { font-size: 10.5px; font-weight: 600; color: #6B82A6; }

.dash-soon__text { display: grid; gap: 2px; min-width: 0; }
.dash-soon__text strong {
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dash-navy);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dash-soon__text small { font-size: 11.5px; color: var(--dash-slate); }

.dash-soon__left {
	padding: 5px 10px;
	border-radius: 999px;
	background: #EEF2F8;
	font-size: 11.5px;
	font-weight: 700;
	color: #4E6480;
	white-space: nowrap;
}
.dash-soon__item.is-urgent > a { border-color: #F3C3CC; background: #FEF7F8; }
.dash-soon__item.is-urgent .dash-soon__when { background: #FBE0E5; }
.dash-soon__item.is-urgent .dash-soon__when strong { color: #C4213A; }
.dash-soon__item.is-urgent .dash-soon__when small { color: #A4566A; }
.dash-soon__item.is-urgent .dash-soon__left { background: #FBE0E5; color: #B01A33; }

@media (max-width: 560px) {
	.dash-soon__item > a { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
	.dash-soon__left { grid-column: 2; justify-self: start; }
	.dash-soon__item > a > svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dash-soon__item > a { transition: none; }
}


/* --- The three options above an optional section -------------------------
   From "final profile principle.docx": add it, say it does not apply, or
   move on. The form behind them is folded away until it is wanted. */

.pf-ask { padding: 14px 16px 0; }
.pf-ask.is-done { display: none; }
.pf-ask__q { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--dash-navy, #0B2247); }
.pf-ask__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-ask__na { margin: 0; }

.pf-ask__add,
.pf-ask__no,
.pf-ask__skip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 15px;
	border-radius: 10px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.pf-ask__add { background: #0E7281; color: #fff; }
.pf-ask__add:hover { background: #0A5B68; }
.pf-ask__no { border-color: #CFDDEC; background: #fff; color: #41567A; }
.pf-ask__no:hover { border-color: #41567A; }
.pf-ask__no.is-on { border-color: #0E7281; background: #E8F6F5; color: #0A5B68; }
.pf-ask__skip { background: none; color: #1668E3; }
.pf-ask__skip:hover { text-decoration: underline; text-underline-offset: 3px; }

.profile-form.is-folded { display: none; }


.pf-row__state.is-na { background: #E9EEF4; color: #5B6B82; }

/* --- Tips, statuses and the CV rule, in one card ------------------------- */

.pf-guide__head { display: flex; gap: 12px; margin-bottom: 12px; }
.pf-guide__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: #E3F4F2;
	color: #0E8795;
}
.pf-guide__part + .pf-guide__part { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dash-line, #E4EAF2); }
.pf-guide__part h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 9px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--dash-navy, #0B2247);
}
.pf-guide__part h3 > svg { color: #1D5FD1; }
.pf-guide__part > ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-guide__part > ul > li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--dash-slate, #51617A); }
.pf-guide__part > ul > li > svg { flex: 0 0 auto; margin-top: 1px; color: #12B5A6; }

.pf-guide__states > li {
	align-items: flex-start;
	gap: 10px;
	padding: 9px 10px;
	border-left: 3px solid #D7E0EC;
	border-radius: 0 9px 9px 0;
	background: #F6F9FD;
}
.pf-guide__states strong { display: block; font-size: 12.5px; color: var(--dash-navy, #0B2247); }
.pf-guide__states small { font-size: 11.5px; line-height: 1.45; color: var(--dash-slate, #51617A); }
.pf-guide__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #E4EBF4;
	color: #5B6B82;
}
.pf-guide__states .is-done { border-left-color: #12B5A6; background: #EEFAF6; }
.pf-guide__states .is-done .pf-guide__dot { background: #12B5A6; color: #fff; }
.pf-guide__states .is-na .pf-guide__dot { background: #8FA0B6; color: #fff; }
.pf-guide__states .is-progress { border-left-color: #F6A932; background: #FFF8EC; }
.pf-guide__states .is-progress .pf-guide__dot { background: #FCE2B8; color: #9A5B06; }
.pf-guide__cv p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--dash-slate, #51617A); }

/* A field the current-role tick has switched off. */
.pf-row input[disabled] { background: #F3F6FA; color: #8795AD; cursor: not-allowed; }

/* A tick box is a tick box. The account's fields are full width, which
   was pushing every checkbox onto a line of its own with its label
   stranded underneath. */
.pf-row .account-check,
.profile-form .account-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dash-navy, #0B2247);
	cursor: pointer;
}
.pf-row .account-check input[type="checkbox"],
.profile-form .account-check input[type="checkbox"],
.pf-row .account-field--checkbox input[type="checkbox"],
.profile-form .account-field--checkbox input[type="checkbox"] {
	width: 18px;
	min-width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}
.pf-row .account-field--checkbox,
.profile-form .account-field--checkbox { display: grid; gap: 4px; }


/* =========================================================================
   ACCOUNT SETTINGS, after mindship_account_settings.html
   ========================================================================= */

.set-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.set-badge {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #C9E8EC;
	border-radius: 12px;
	background: linear-gradient(140deg, #E6F7F8 0%, #EFF8FD 100%);
	color: #0A6A74;
}
.set-badge strong { display: block; font-size: 13px; font-weight: 800; color: #0B2247; }
.set-badge small { font-size: 11.5px; color: #4E6480; }

/* The jump links, which are anchors so they work with no script. */
.set-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dash-line, #E4EAF2);
}
.set-jump a {
	padding: 8px 14px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	color: #41567A;
	text-decoration: none;
}
.set-jump a:hover { border-color: #0E8795; color: #0A6A74; }

.set { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1150px) { .set { grid-template-columns: minmax(0, 1fr) clamp(280px, 23vw, 340px); } }
.set-main { display: grid; gap: 14px; min-width: 0; }
.set-rail { display: grid; gap: 14px; min-width: 0; }

/* The line that cannot be switched off. */
.set-always {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 11px;
	background: #F3F7FC;
}
.set-always__tag {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: #DFF3EC;
	font-size: 11px;
	font-weight: 700;
	color: #107A5B;
}
.set-always strong { display: block; font-size: 13px; color: var(--dash-navy, #0B2247); }
.set-always small { font-size: 12px; line-height: 1.5; color: var(--dash-slate, #51617A); }

.set-when { max-width: 340px; margin-top: 6px; }
.set-when select {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 14px;
}

/* Deleting an account is behind a disclosure, as the design has it. */
.set-danger > summary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border: 1px solid #F3C3CC;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #B01A33;
	cursor: pointer;
	list-style: none;
}
.set-danger > summary::-webkit-details-marker { display: none; }
.set-danger[open] > summary { margin-bottom: 14px; }
.set-danger[open] > summary svg { transform: rotate(180deg); }

.set-guide .account-card__title,
.set-note .account-card__title { display: flex; align-items: center; gap: 8px; }
.set-steps { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.set-steps li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--dash-slate, #51617A); }
.set-steps li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #1668E3;
	font-size: 11.5px;
	font-weight: 800;
	color: #fff;
}
.set-note p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dash-slate, #51617A); }
.set-note .account-card__title > svg { color: #0E8795; }


/* --- Account Settings, second pass --------------------------------------
   Closer to the client's HTML: the trail and eyebrow over the title, the
   jump links in their own white bar with the current one marked, and an
   icon beside every card's heading. */

.set-trail {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	font-size: 12.5px;
	color: var(--dash-slate, #51617A);
}
.set-trail a { color: #1D5FD1; text-decoration: none; }
.set-trail a:hover { text-decoration: underline; text-underline-offset: 3px; }
.set-trail > svg { color: #9FB0C6; }

.set-eyebrow {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #0E8795;
}

.set-jump {
	gap: 4px;
	margin-bottom: 18px;
	padding: 6px;
	border: 1px solid var(--dash-line, #E4EAF2);
	border-radius: 12px;
	background: #fff;
}
.set-jump a {
	border: 0;
	border-radius: 8px;
	background: none;
	color: #51617A;
}
.set-jump a:hover { background: #F1F6FC; color: #0B2247; }
.set-jump a.is-on { background: #E3F4F2; color: #0A6A74; }

.set-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.set-card__head .account-card__title { margin: 0; }
.set-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: #E6F2FB;
	color: #1D5FD1;
}
.set-card .account-card__intro { margin-top: 2px; }
#set-security .set-card__icon { background: #E3F4F2; color: #0E8795; }
#set-emails .set-card__icon { background: #FFF3E0; color: #E08A16; }
#set-feed .set-card__icon { background: #EDE9FD; color: #6C3CE0; }
#set-privacy .set-card__icon { background: #E7F7EE; color: #17895A; }
#set-delete .set-card__icon { background: #FBE2E6; color: #D02B45; }

/* The last thing in a card is its button, with a line above it. */
.set-card .profile-form__actions {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--dash-line, #E4EAF2);
}

.set-note--green { border-color: #CDEAD9; background: linear-gradient(160deg, #EEF9F2 0%, #F7FCF9 100%); }

.set-help p { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--dash-slate, #51617A); }
.set-help__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid #CFE0F0;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #0E6E86;
	text-decoration: none;
}
.set-help__go:hover { border-color: #0E6E86; }


/* ==========================================================================
   CV BUILDER GUIDE

   After phase2-final-changes/mindship_cv_builder_guide.html. The supplied
   page drew its own sidebar and header; only its middle is used, so the
   account's own shell is not doubled.
   ========================================================================== */

.cvg-head { margin-bottom: 14px; }

.cvg-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.cvg-facts li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--account-line);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--account-muted);
}
.cvg-facts svg { color: var(--account-teal-ink); }

.cvg-when {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 13px 15px;
	border: 1px solid #D9EEEB;
	border-radius: 11px;
	background: #F1FAF9;
	font-size: 14px;
	line-height: 1.55;
	color: var(--account-ink);
}
.cvg-when svg { flex: 0 0 auto; margin-top: 2px; color: var(--account-teal-ink); }

.cvg-card { margin-bottom: 16px; }
.cvg-card .account-card__title { display: flex; align-items: center; gap: 9px; }
.cvg-card .account-card__title svg { color: var(--account-teal-ink); }
.cvg-card--tip { border-color: #D9EEEB; background: #F1FAF9; }
.cvg-card--tip p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--account-ink); }

/* Two methods side by side where there is room, one above the other where
   there is not - they are alternatives, not a sequence. */
.cvg-methods,
.cvg-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}
.cvg-pair { margin-bottom: 16px; }
.cvg-pair .cvg-card { margin-bottom: 0; }

.cvg-method {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--account-line);
	border-radius: 12px;
	background: #FBFCFE;
}
.cvg-method__head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.cvg-method__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--account-soft);
	color: var(--account-teal-ink);
}
.cvg-method__tag {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--account-teal-ink);
}
.cvg-method__title { display: block; margin-top: 1px; font-size: 15.5px; color: var(--account-ink); }
.cvg-method__line { display: block; margin-top: 2px; font-size: 13px; color: var(--account-muted); }

.cvg-steps { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.cvg-steps li { display: flex; align-items: flex-start; gap: 10px; }
.cvg-steps__n {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--account-teal);
	font-size: 11.5px;
	font-weight: 800;
	color: #fff;
}
.cvg-steps strong { display: block; font-size: 13.5px; color: var(--account-ink); }
.cvg-steps li > span:last-child > span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.5; color: var(--account-muted); }

.cvg-method__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	width: fit-content;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-teal-ink);
	text-decoration: none;
}
.cvg-method__go:hover { text-decoration: underline; text-underline-offset: 3px; }

.cvg-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.cvg-list li { font-size: 14px; line-height: 1.6; color: var(--account-ink); }

.cvg-check { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cvg-check li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--account-ink); }
.cvg-check svg { flex: 0 0 auto; margin-top: 3px; color: #12B5A6; }

.cvg-go { margin: 4px 0 0; }

/* The builder, and the guide to it, on one line. */
.profile-next__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; }
.profile-next__guide {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--account-teal-ink);
	text-decoration: none;
}
.profile-next__guide:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   MY FAVOURITES ON A PHONE

   Inside a max-width query, so the desktop and tablet rows are untouched.
   ========================================================================== */

@media (max-width: 719px) {
	/* The urgent stripe was a grid item with grid-row: 1 / -1. In the
	   single column a phone gets, "all the rows" is the first one - so it
	   took a row of its own above the picture, which is the empty band and
	   the stray red bar. Positioned along the edge instead, it is not in
	   the flow and cannot take a row. */
	.fav-row.is-urgent { position: relative; }
	.fav-row.is-urgent::before {
		position: absolute;
		/* grid-row has to go with it. An absolutely positioned child of a
		   grid container takes its grid area as its containing block when
		   one is named - and "1 / -1" counts to the end of the *explicit*
		   grid, which here has no rows declared at all, so it resolved to
		   a single collapsed row and the stripe came out 246px of a 415px
		   card. Released from the grid, it measures the card. */
		grid-row: auto;
		grid-column: auto;
		inset: 0 auto 0 0;
		margin: 0;
		width: 4px;
		border-radius: 14px 0 0 14px;
	}

	/* Tabs across the top, then Sort and Filter taking half the width each
	   on one line, then the search field across the bottom. A wrapping flex
	   row gave each control its content width, which on a phone meant two
	   ragged lines of three different sizes. */
	.fav-bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.fav-bar > .fav-tabs { grid-column: 1 / -1; }
	.fav-bar > .fav-pick { width: 100%; min-width: 0; }
	.fav-bar > .fav-pick select { width: 100%; min-width: 0; flex: 1 1 auto; }
	.fav-bar > .fav-find { grid-column: 1 / -1; max-width: none; }

	/* --- "3 of your saved opportunities close within 7 days" --------------
	   Three things side by side in 340px gave the sentence about nine
	   characters a line and left the button hanging off the end. A stack:
	   the icon and the headline on one line, the explanation under them,
	   the button across the bottom where it is easy to hit.
	   ------------------------------------------------------------------ */
	.fav-alert {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 4px 12px;
		padding: 14px;
	}
	.fav-alert__icon { grid-row: 1; width: 34px; height: 34px; }
	.fav-alert__text { grid-column: 2; }
	.fav-alert__text strong { font-size: 13.5px; line-height: 1.4; }
	.fav-alert__btn {
		grid-column: 1 / -1;
		justify-content: center;
		width: 100%;
		margin-top: 10px;
	}
}

/* ==========================================================================
   THE FILTER SHEET, INSIDE THE ACCOUNT

   The sheet itself lives in archive.css, because the public opportunity
   archive uses the same bar and never loads this file.

   What belongs here is the undoing of the widths this file sets for the
   desktop row. account.css is enqueued after archive.css, and
   ".account-opps__bar .filters-bar select" and
   ".filters-bar.has-sheet .filters-bar__picks select" are three classes
   each - so the tie went to this file and a select inside the sheet came
   out 143px wide in a 504px panel. Measured, then fixed.

   Last in the file, so it is the last word on both counts.
   ========================================================================== */

@media (max-width: 719px) {
	.account-opps__bar .filters-bar.has-sheet .filters-bar__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
	}
	.account-opps__bar .filters-bar.has-sheet .filters-bar__grid > input[type="text"] {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
	}
	.account-opps__bar .filters-bar.has-sheet .filters-bar__go { grid-column: 2; grid-row: 1; }

	.account-opps__bar .filters-bar.has-sheet .filters-bar__picks select {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 46px;
		padding: 0 12px;
		/* 16px, or iOS zooms the page when the select is tapped. */
		font-size: 16px;
		font-weight: 600;
	}
	.account-opps__bar .filters-bar.has-sheet .filters-bar__apply {
		width: 100%;
		height: auto;
		min-height: 48px;
	}
}