/**
 * Contributor Résumé — frontend styles.
 *
 * Design tokens live on .cvr-resume; skins only redefine tokens.
 * Instance overrides (accent, radius, columns) arrive as inline custom
 * properties set by the renderer.
 */

/* ==========================================================================
   Tokens (light defaults)
   ========================================================================== */

.cvr-resume {
	--cvr-accent: #3858e9;
	--cvr-bg: transparent;
	--cvr-surface: #ffffff;
	--cvr-text: #1e1e1e;
	--cvr-muted: #667085;
	--cvr-border: #e4e7ec;
	--cvr-radius: 14px;
	--cvr-shadow: none;
	--cvr-gap: clamp(16px, 2.5vw, 28px);
	--cvr-columns: 3;
	--cvr-heading-font: inherit;

	container-type: inline-size;
	background: var(--cvr-bg);
	color: var(--cvr-text);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cvr-gap);
	font-size: 15px;
	line-height: 1.55;
	margin-block: 1.5em;
}

.cvr-resume *,
.cvr-resume *::before,
.cvr-resume *::after {
	box-sizing: border-box;
}

/* Sections stack full-width by default. The two compact chip sections
   (WordPress releases + Core credits) share a row when they sit next to each
   other, to save vertical space. A lone one, or a reordered pair, stays full
   width thanks to :has(). */
.cvr-resume > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.cvr-resume > .cvr-releases:has( + .cvr-credits ),
.cvr-resume > .cvr-releases:has( + .cvr-credits ) + .cvr-credits {
	grid-column: span 1;
}

@container (max-width: 560px) {
	.cvr-resume > .cvr-releases,
	.cvr-resume > .cvr-credits {
		grid-column: 1 / -1;
	}
}

/* Shadow presets (applied to cards/surfaces) */
.cvr-shadow-none    { --cvr-shadow: none; }
.cvr-shadow-subtle  { --cvr-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }
.cvr-shadow-medium  { --cvr-shadow: 0 2px 8px rgba(16, 24, 40, 0.1); }
.cvr-shadow-strong  { --cvr-shadow: 0 8px 24px rgba(16, 24, 40, 0.16); }

/* Dark tokens.
   Dark mode is self-contained: it paints its OWN dark background (not
   transparent) and adds padding, so the near-white text always sits on a dark
   surface the plugin controls. Without this, "auto" on the many themes that
   have no dark mode put light text on the theme's light background — invisible.
   The default mode is now "light" (see settings); "auto"/"dark" opt in. */
.cvr-dark {
	--cvr-bg: #12151d;
	--cvr-surface: #1d2330;
	--cvr-text: #e9ecf3;
	--cvr-muted: #aeb6c6;
	--cvr-border: #323b4d;
	--cvr-shadow: none;
	padding: clamp(20px, 3vw, 32px);
	border-radius: var(--cvr-radius);
}

@media (prefers-color-scheme: dark) {
	.cvr-auto {
		--cvr-bg: #12151d;
		--cvr-surface: #1d2330;
		--cvr-text: #e9ecf3;
		--cvr-muted: #aeb6c6;
		--cvr-border: #323b4d;
		--cvr-shadow: none;
		padding: clamp(20px, 3vw, 32px);
		border-radius: var(--cvr-radius);
	}
}

/* ==========================================================================
   Skins — each only redefines tokens (+ a few structural touches).
   The base tokens above are the "modern" skin.
   ========================================================================== */

/* Classic: a printed-résumé feel. Serif headings, hairline rules, restrained. */
.cvr-skin-classic {
	--cvr-radius: 4px;
	--cvr-heading-font: Georgia, "Times New Roman", serif;
	--cvr-gap: clamp(18px, 2.5vw, 30px);
}

.cvr-skin-classic .cvr-hero {
	padding-bottom: 16px;
	border-bottom: 2px solid var(--cvr-text);
}

.cvr-skin-classic .cvr-section__title {
	letter-spacing: 0.12em;
	color: var(--cvr-text);
	border-bottom: 1px solid var(--cvr-border);
	padding-bottom: 6px;
}

.cvr-skin-classic .cvr-card,
.cvr-skin-classic .cvr-impact__tile {
	box-shadow: none;
	border-color: var(--cvr-border);
}

.cvr-skin-classic .cvr-badge::before {
	display: none;
}

.cvr-skin-classic .cvr-badge {
	border-radius: 3px;
}

/* Mono: a stripped-down ASCII / terminal look. Everything square and flat
   (no radius, no fills, no shadows), hairline monochrome rules, and the
   graphical widgets (team meters, timeline dots, forum icons, badges, chips)
   rebuilt from ASCII / box characters. The accent is the single terminal
   colour, used only for markers and figures. */
.cvr-skin-mono {
	--cvr-radius: 0;
	--cvr-surface: transparent;
	--cvr-shadow: none;
	--cvr-heading-font: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
	font-family: var(--cvr-heading-font);
	font-size: 14px;
}

/* Command prompt before the name; square avatar with a hairline frame. */
.cvr-skin-mono .cvr-hero__name::before {
	content: "> ";
	color: var(--cvr-accent);
}

.cvr-skin-mono .cvr-hero__avatar img {
	border-radius: 0;
	box-shadow: none;
	border: 1px solid var(--cvr-border);
}

/* "# section" headers with a hairline underline. */
.cvr-skin-mono .cvr-section__title {
	text-transform: none;
	letter-spacing: 0;
	color: var(--cvr-text);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--cvr-border);
}

.cvr-skin-mono .cvr-section__title::before {
	content: "# ";
	color: var(--cvr-accent);
	font-weight: 700;
}

.cvr-skin-mono .cvr-section__count::before {
	content: "// ";
	opacity: 0.55;
}

/* Boxes are hairline outlines: no fill, no radius, no shadow, no hover lift. */
.cvr-skin-mono .cvr-card,
.cvr-skin-mono .cvr-impact__tile,
.cvr-skin-mono .cvr-forums__card,
.cvr-skin-mono .cvr-github__repo a {
	box-shadow: none;
	border: 1px solid var(--cvr-border);
	border-radius: 0;
}

.cvr-skin-mono .cvr-card:hover {
	transform: none;
}

.cvr-skin-mono .cvr-card__icon,
.cvr-skin-mono .cvr-github__avatar {
	border-radius: 0;
	border: 1px solid var(--cvr-border);
}

.cvr-skin-mono .cvr-photos__item {
	border-radius: 0;
}

/* Badges → #tags, version chips → [tokens]. Square, hairline, no dot. */
.cvr-skin-mono .cvr-badge,
.cvr-skin-mono .cvr-releases__chip,
.cvr-skin-mono .cvr-credits__chip {
	border-radius: 0;
}

.cvr-skin-mono .cvr-releases__chip {
	border-color: var(--cvr-border);
	color: var(--cvr-text);
}

.cvr-skin-mono .cvr-badge::before {
	content: "#";
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--cvr-accent);
	font-weight: 700;
}

.cvr-skin-mono .cvr-releases__chip::before,
.cvr-skin-mono .cvr-credits__chip::before {
	content: "[";
	opacity: 0.55;
}

.cvr-skin-mono .cvr-releases__chip::after,
.cvr-skin-mono .cvr-credits__chip::after {
	content: "]";
	opacity: 0.55;
}

/* Team focus: a bracketed ASCII meter instead of a rounded bar. */
.cvr-skin-mono .cvr-teams__bar {
	height: 14px;
	border-radius: 0;
	background: none;
	border: 1px solid var(--cvr-border);
	padding: 2px;
}

.cvr-skin-mono .cvr-teams__fill {
	border-radius: 0;
	opacity: 1;
	background: repeating-linear-gradient( 90deg, var(--cvr-accent) 0 5px, transparent 5px 8px );
}

/* Recent activity: square markers on a dashed rule. */
.cvr-skin-mono .cvr-activity__timeline::before {
	width: 1px;
	background: repeating-linear-gradient( var(--cvr-border) 0 3px, transparent 3px 6px );
}

.cvr-resume.cvr-skin-mono .cvr-activity__dot {
	width: 7px;
	height: 7px;
	border-radius: 0;
	background: var(--cvr-accent);
	box-shadow: none;
}

/* Support forums: drop the drawn icon for a terminal cursor. */
.cvr-skin-mono .cvr-forums__icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--cvr-accent);
}

.cvr-skin-mono .cvr-forums__icon svg {
	display: none;
}

.cvr-skin-mono .cvr-forums__icon::before {
	content: ">_";
	font-weight: 700;
}

/* ==========================================================================
   Shared section chrome
   ========================================================================== */

.cvr-section__title {
	margin: 0 0 14px;
	font-family: var(--cvr-heading-font);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cvr-muted);
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.cvr-section__count {
	font-variant-numeric: tabular-nums;
	color: var(--cvr-accent);
	font-size: 0.8125rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.cvr-hero {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 20px;
	align-items: center;
}

.cvr-hero__avatar img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	display: block;
	position: relative;
	box-shadow: 0 0 0 3px var(--cvr-surface), 0 0 0 5px var(--cvr-accent);
}

.cvr-hero__name {
	margin: 0;
	font-family: var(--cvr-heading-font);
	font-size: clamp(1.5rem, 4cqi, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--cvr-text);
}

.cvr-hero__job {
	margin: 2px 0 0;
	font-size: 1rem;
	color: var(--cvr-muted);
}

.cvr-hero__meta {
	margin: 6px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 0.8125rem;
	color: var(--cvr-muted);
}

.cvr-hero__handle {
	color: var(--cvr-accent);
	font-weight: 600;
}

.cvr-hero__badges {
	grid-column: 1 / -1;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cvr-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	background: var(--cvr-surface);
	box-shadow: var(--cvr-shadow);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
}

.cvr-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cvr-accent);
	align-self: center;
	flex-shrink: 0;
}

.cvr-badge__year {
	color: var(--cvr-muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* Badge families keep a hint of wp.org identity via the dot color. */
.cvr-badge--code::before,
.cvr-badge--core-contributor::before { background: #2271b1; }
.cvr-badge--plugins::before,
.cvr-badge--plugin-developer::before { background: #d63638; }
.cvr-badge--photo-contributor::before { background: #00a32a; }
.cvr-badge--support::before { background: #dba617; }
.cvr-badge--organizer::before,
.cvr-badge--speaker::before { background: #9b51e0; }

/* ==========================================================================
   Impact tiles
   ========================================================================== */

.cvr-impact__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(var(--cvr-gap) / 2);
}

.cvr-impact__tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	background: var(--cvr-surface);
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
}

.cvr-impact__window {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cvr-muted);
}

.cvr-impact__number {
	font-family: var(--cvr-heading-font);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--cvr-accent);
}

.cvr-impact__unit {
	font-size: 0.8125rem;
	color: var(--cvr-muted);
}

.cvr-impact__score {
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--cvr-muted);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Team focus
   ========================================================================== */

.cvr-teams__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cvr-teams__row {
	display: grid;
	grid-template-columns: minmax(90px, 140px) 1fr 52px;
	align-items: center;
	gap: 12px;
}

.cvr-teams__name {
	font-size: 0.875rem;
	font-weight: 500;
}

.cvr-teams__bar {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: var(--cvr-border);
	overflow: hidden;
}

.cvr-teams__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--cvr-accent);
	opacity: 0.9;
}

.cvr-teams__pct {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--cvr-muted);
	text-align: right;
}

/* ==========================================================================
   Cards grid (plugins, later themes/photos)
   ========================================================================== */

.cvr-grid {
	display: grid;
	grid-template-columns: repeat(var(--cvr-columns), 1fr);
	gap: calc(var(--cvr-gap) / 2);
}

.cvr-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: var(--cvr-surface);
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cvr-card:hover {
	transform: translateY(-2px);
}

.cvr-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cvr-card__icon {
	width: 48px;
	height: 48px;
	border-radius: calc(var(--cvr-radius) / 2);
	flex-shrink: 0;
}

.cvr-card__title {
	margin: 0;
	font-family: var(--cvr-heading-font);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.cvr-card__title a {
	color: var(--cvr-text);
	text-decoration: none;
}

.cvr-card__title a:hover,
.cvr-card__title a:focus {
	color: var(--cvr-accent);
}

.cvr-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	color: var(--cvr-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cvr-card__meta {
	margin: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 0.8125rem;
	color: var(--cvr-muted);
	font-variant-numeric: tabular-nums;
}

.cvr-card__rating {
	color: #dba617;
	font-weight: 600;
}

/* ==========================================================================
   States (empty / pending / unavailable) — editors only
   ========================================================================== */

.cvr-state {
	padding: 18px 20px;
	border: 1px dashed var(--cvr-border);
	border-radius: var(--cvr-radius);
	font-size: 0.875rem;
	color: var(--cvr-muted);
}

.cvr-state p {
	margin: 0 0 6px;
}

.cvr-state a {
	color: var(--cvr-accent);
	font-weight: 600;
	text-decoration: none;
}

.cvr-state--unavailable {
	border-color: #d63638;
}

/* ==========================================================================
   Compact mode
   ========================================================================== */

/* Compact = a genuinely dense résumé. Much smaller type, tighter line-height
   and spacing, and smaller figures and thumbnails across EVERY section. Hides
   nothing (the excerpt keeps its two lines, same as normal) — it just packs a
   lot more into the same height. */
.cvr-compact {
	--cvr-gap: 8px;
	font-size: 12.5px;
	line-height: 1.4;
}

.cvr-compact .cvr-section__title {
	margin-bottom: 5px;
	font-size: 0.72rem;
}

.cvr-compact .cvr-hero {
	gap: 1px 14px;
}

.cvr-compact .cvr-hero__avatar img {
	width: 52px;
	height: 52px;
}

.cvr-compact .cvr-hero__name {
	font-size: clamp(1.1rem, 3cqi, 1.35rem);
}

.cvr-compact .cvr-hero__job,
.cvr-compact .cvr-hero__meta {
	margin-top: 1px;
}

.cvr-compact .cvr-hero__badges {
	gap: 4px;
	margin-top: 6px;
}

.cvr-compact .cvr-badge {
	padding: 2px 7px;
	font-size: 0.7rem;
}

.cvr-compact .cvr-impact__tiles {
	gap: 6px;
}

.cvr-compact .cvr-impact__tile {
	padding: 7px 9px;
}

.cvr-compact .cvr-impact__number {
	font-size: 1.3rem;
}

.cvr-compact .cvr-grid {
	gap: 6px;
}

.cvr-compact .cvr-card {
	padding: 9px 10px;
	gap: 4px;
}

.cvr-compact .cvr-card__icon {
	width: 30px;
	height: 30px;
}

.cvr-compact .cvr-card__title {
	font-size: 0.9rem;
}

.cvr-compact .cvr-teams__list {
	gap: 4px;
}

.cvr-compact .cvr-forums__cards {
	gap: 6px;
}

.cvr-compact .cvr-forums__card {
	padding: 8px 10px;
}

.cvr-compact .cvr-forums__num,
.cvr-compact .cvr-translations__stat b,
.cvr-compact .cvr-time__headline b {
	font-size: 1.25rem;
}

.cvr-compact .cvr-github__avatar {
	width: 38px;
	height: 38px;
}

.cvr-compact .cvr-activity__item {
	padding-bottom: 9px;
}

.cvr-compact .cvr-photos__grid {
	gap: 5px;
}

/* ==========================================================================
   Container-query responsiveness (adapts to column/sidebar, not viewport)
   ========================================================================== */

/* The column setting drives plugins, themes, favorites, GitHub repos and
   photos alike; they all step down together as the container narrows. */
@container (max-width: 720px) {
	.cvr-grid,
	.cvr-favorites__grid,
	.cvr-github__repos,
	.cvr-photos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 560px) {
	.cvr-impact__tiles {
		grid-template-columns: 1fr;
	}

	.cvr-hero {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.cvr-events__list,
	.cvr-translations__roles {
		grid-template-columns: 1fr;
	}
}

@container (max-width: 460px) {
	.cvr-grid,
	.cvr-favorites__grid,
	.cvr-github__repos {
		grid-template-columns: 1fr;
	}

	/* Square photo thumbs keep at least two per row so they never blow up to
	   full width on a phone. */
	.cvr-photos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 720px) {
		.cvr-grid,
		.cvr-favorites__grid,
		.cvr-github__repos,
		.cvr-photos__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 560px) {
		.cvr-grid,
		.cvr-favorites__grid,
		.cvr-github__repos,
		.cvr-impact__tiles {
			grid-template-columns: 1fr;
		}

		.cvr-events__list,
		.cvr-translations__roles {
			grid-template-columns: 1fr;
		}

		.cvr-resume > .cvr-releases,
		.cvr-resume > .cvr-credits {
			grid-column: 1 / -1;
		}
	}
}

/* ==========================================================================
   Chips (releases, credits)
   ========================================================================== */

.cvr-releases__roles {
	margin: 0 0 10px;
	font-size: 0.875rem;
	color: var(--cvr-muted);
}

.cvr-releases__chips,
.cvr-credits__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cvr-releases__chip,
.cvr-credits__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	background: var(--cvr-surface);
	box-shadow: var(--cvr-shadow);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cvr-releases__chip {
	border-color: var(--cvr-accent);
	color: var(--cvr-accent);
}

/* ==========================================================================
   Media grid (themes)
   ========================================================================== */

.cvr-card--media {
	padding: 0;
	overflow: hidden;
}

.cvr-card__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cvr-card--media .cvr-card__body {
	padding: 14px 16px;
}

/* ==========================================================================
   Photo gallery
   ========================================================================== */

.cvr-photos__grid {
	display: grid;
	grid-template-columns: repeat(var(--cvr-columns), minmax(0, 1fr));
	gap: 8px;
}

.cvr-photos__item {
	display: block;
	border-radius: calc(var(--cvr-radius) / 2);
	overflow: hidden;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	cursor: zoom-in;
	background: none;
}

.cvr-photos__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
	display: block;
}

.cvr-photos__item:hover img,
.cvr-photos__item:focus-visible img {
	transform: scale(1.05);
}

/* Native <dialog> lightbox */
.cvr-lightbox {
	max-width: 90vw;
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	overflow: visible;
}

.cvr-lightbox::backdrop {
	background: rgba(9, 12, 20, 0.82);
	backdrop-filter: blur(2px);
}

.cvr-lightbox__figure {
	margin: 0;
}

.cvr-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 82vh;
	border-radius: 10px;
	object-fit: contain;
}

.cvr-lightbox__cap {
	margin-top: 8px;
	text-align: center;
	color: #fff;
	font-size: 0.875rem;
}

.cvr-lightbox__cap a {
	color: #fff;
	text-decoration: underline;
}

/* Lightbox controls reset the theme's button styling (appearance, min-width,
   fonts, borders) so they never inherit stray shapes — the cause of a "weird"
   close button under themes that restyle every <button>. */
.cvr-lightbox__close,
.cvr-lightbox__nav {
	position: absolute;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	min-width: 0;
	min-height: 0;
	background: #fff;
	color: #1e1e1e;
	line-height: 1;
	text-indent: 0;
	text-shadow: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.cvr-lightbox__close {
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	font-size: 22px;
}

.cvr-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	font-size: 26px;
	background: rgba(255, 255, 255, 0.92);
}

.cvr-lightbox__nav--prev {
	left: 10px;
}

.cvr-lightbox__nav--next {
	right: 10px;
}

.cvr-lightbox__counter {
	position: absolute;
	top: -28px;
	left: 0;
	color: #fff;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* Keep hidden controls hidden even under themes that restyle [hidden]. */
.cvr-lightbox [hidden] {
	display: none !important;
}

/* ==========================================================================
   Stat rows (translations, forums, time)
   ========================================================================== */

.cvr-translations__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 14px;
}

.cvr-translations__stat {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	color: var(--cvr-muted);
}

.cvr-translations__stat b {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--cvr-accent);
	font-variant-numeric: tabular-nums;
}

/* Forums — stat cards with icons */
.cvr-forums__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--cvr-gap) / 2);
	margin-bottom: 14px;
}

.cvr-forums__card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	padding: 16px 18px;
	background: var(--cvr-surface);
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
}

.cvr-forums__icon {
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cvr-accent) 12%, transparent);
	color: var(--cvr-accent);
}

.cvr-forums__num {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--cvr-accent);
	font-variant-numeric: tabular-nums;
}

.cvr-forums__label {
	font-size: 0.8125rem;
	color: var(--cvr-muted);
}

.cvr-translations__roles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
}

.cvr-translations__role {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	font-size: 0.875rem;
}

.cvr-translations__locale {
	font-weight: 600;
}

.cvr-translations__badge {
	color: var(--cvr-muted);
	font-size: 0.8125rem;
}

/* Per-locale role chips. Coordination roles (GTE/PTE, locale managers) are
   highlighted with the accent; plain translation contributors stay muted. */
.cvr-translations__badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cvr-translations__role-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 9px;
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	background: var(--cvr-surface);
	color: var(--cvr-muted);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

.cvr-translations__role-badge--lead {
	border-color: var(--cvr-accent);
	color: var(--cvr-accent);
	font-weight: 600;
}

.cvr-translations__shown {
	margin: 8px 0 0;
	font-size: 0.75rem;
	color: var(--cvr-muted);
}

.cvr-forums__link,
.cvr-github__name {
	color: var(--cvr-accent);
	font-weight: 600;
	text-decoration: none;
}

.cvr-time__headline {
	margin: 0 0 10px;
	font-size: 1rem;
}

.cvr-time__headline b {
	font-size: 2rem;
	font-weight: 700;
	color: var(--cvr-accent);
	font-variant-numeric: tabular-nums;
	margin-right: 6px;
}

.cvr-time__sponsors {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 0.875rem;
	color: var(--cvr-muted);
}

.cvr-time__sponsor-hours {
	font-weight: 600;
	color: var(--cvr-text);
	margin-left: 6px;
}

/* Five for the Future pledge badge — a visible, accent-tinted pill in the
   section title, linking to the program. */
.cvr-time__pledge {
	margin-left: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: var(--cvr-radius);
	background: color-mix(in srgb, var(--cvr-accent) 12%, transparent);
	color: var(--cvr-accent);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

.cvr-time__pledge:hover,
.cvr-time__pledge:focus {
	background: color-mix(in srgb, var(--cvr-accent) 22%, transparent);
}

.cvr-time__pledge-mark {
	flex-shrink: 0;
}

/* Sponsors that pledge time are linked to their Five for the Future page. */
a.cvr-time__sponsor-label {
	color: var(--cvr-accent);
	font-weight: 600;
	text-decoration: none;
}

a.cvr-time__sponsor-label:hover,
a.cvr-time__sponsor-label:focus {
	text-decoration: underline;
}

/* ==========================================================================
   GitHub
   ========================================================================== */

.cvr-github__head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 14px;
}

.cvr-github__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
}

.cvr-github__bio {
	margin: 2px 0;
	font-size: 0.875rem;
	color: var(--cvr-muted);
}

.cvr-github__meta {
	margin: 4px 0 0;
	display: flex;
	gap: 16px;
	font-size: 0.8125rem;
	color: var(--cvr-muted);
	font-variant-numeric: tabular-nums;
}

.cvr-github__repos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cvr-columns), minmax(0, 1fr));
	gap: 8px;
}

/* Each repo card fills its grid cell, so a wrapped language label on one card
   never leaves shorter neighbours with an empty gap below them. */
.cvr-github__repo {
	display: flex;
}

.cvr-github__repo a {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: flex-start;
	gap: 4px 10px;
	padding: 10px 14px;
	border: 1px solid var(--cvr-border);
	border-radius: 8px;
	background: var(--cvr-surface);
	text-decoration: none;
	color: var(--cvr-text);
}

.cvr-github__repo-name {
	font-weight: 600;
}

.cvr-github__repo-stars {
	color: #dba617;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.cvr-github__repo-lang {
	color: var(--cvr-muted);
	font-size: 0.75rem;
	margin-left: auto;
}

/* ==========================================================================
   Bio, work, activity
   ========================================================================== */

.cvr-bio__text p {
	margin: 0 0 4px;
	font-size: 0.9375rem;
}

.cvr-bio__interests {
	margin: 10px 0 0;
	font-size: 0.875rem;
	color: var(--cvr-muted);
}

.cvr-job__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cvr-job__entry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cvr-border);
}

.cvr-job__role {
	font-weight: 600;
}

.cvr-job__company {
	color: var(--cvr-accent);
	font-size: 0.875rem;
}

.cvr-job__dates {
	margin-left: auto;
	color: var(--cvr-muted);
	font-size: 0.8125rem;
}

/* Activity — vertical timeline with a coloured dot per type */
.cvr-activity__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.cvr-activity__timeline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--cvr-border);
}

.cvr-activity__item {
	position: relative;
	padding: 0 0 16px 24px;
}

.cvr-activity__item:last-child {
	padding-bottom: 0;
}

.cvr-activity__dot {
	position: absolute;
	left: 0;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cvr-accent);
	box-shadow: 0 0 0 3px var(--cvr-bg, var(--cvr-surface));
}

.cvr-activity--forums .cvr-activity__dot { background: #dba617; }
.cvr-activity--polyglots .cvr-activity__dot { background: #00a32a; }
.cvr-activity--core .cvr-activity__dot { background: #2271b1; }
.cvr-activity--plugins .cvr-activity__dot,
.cvr-activity--themes .cvr-activity__dot { background: #d63638; }

.cvr-activity__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 2px;
}

.cvr-activity__tag {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cvr-accent);
}

.cvr-activity__when {
	color: var(--cvr-muted);
	font-size: 0.75rem;
}

.cvr-activity__title {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

.cvr-activity__title a {
	color: var(--cvr-text);
	text-decoration: none;
}

.cvr-activity__title a:hover {
	color: var(--cvr-accent);
}

@container (max-width: 460px) {
	.cvr-forums__cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   1.1.0 — Hero links, Community, Events, Favorites, bio read-more, freshness
   ========================================================================== */

.cvr-hero__links {
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 0.8125rem;
}

.cvr-hero__links a {
	color: var(--cvr-accent);
	text-decoration: none;
	font-weight: 500;
}

.cvr-hero__links a:hover,
.cvr-hero__links a:focus {
	text-decoration: underline;
}

a.cvr-hero__handle {
	text-decoration: none;
}

a.cvr-hero__handle:hover,
a.cvr-hero__handle:focus {
	text-decoration: underline;
}

/* Community: labelled chip rows (teams, languages). */
.cvr-community__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-bottom: 10px;
}

.cvr-community__row:last-child {
	margin-bottom: 0;
}

.cvr-community__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cvr-muted);
	min-width: 90px;
}

.cvr-community__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cvr-community__chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--cvr-border);
	border-radius: var(--cvr-radius);
	background: var(--cvr-surface);
	box-shadow: var(--cvr-shadow);
	font-size: 0.8125rem;
	font-weight: 500;
}

.cvr-community__chip--team {
	border-color: var(--cvr-accent);
	color: var(--cvr-accent);
}

/* Events: role badge + event name per row. Two columns on desktop, collapsing
   to one on a narrow container. */
.cvr-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
}

.cvr-events__item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.cvr-events__role {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--cvr-radius);
	background: color-mix(in srgb, var(--cvr-accent) 12%, transparent);
	color: var(--cvr-accent);
	font-size: 0.75rem;
	font-weight: 600;
	min-width: 84px;
	justify-content: center;
}

.cvr-events__name {
	font-size: 0.9375rem;
	font-weight: 500;
}

.cvr-events__name a {
	color: var(--cvr-text);
	text-decoration: none;
}

.cvr-events__name a:hover,
.cvr-events__name a:focus {
	color: var(--cvr-accent);
}

/* Favorites: grid of small plugin/theme chips, following the column setting. */
.cvr-favorites__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cvr-columns), minmax(0, 1fr));
	gap: 8px;
}

.cvr-favorites__item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid var(--cvr-border);
	border-radius: calc(var(--cvr-radius) / 2);
	background: var(--cvr-surface);
	box-shadow: var(--cvr-shadow);
	color: var(--cvr-text);
	text-decoration: none;
}

.cvr-favorites__item a:hover,
.cvr-favorites__item a:focus {
	border-color: var(--cvr-accent);
}

.cvr-favorites__icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	flex-shrink: 0;
}

.cvr-favorites__name {
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
}

/* Bio extras: origin story subtitle + collapsible read-more. */
.cvr-bio__subtitle {
	margin: 14px 0 4px;
	font-family: var(--cvr-heading-font);
	font-size: 0.9375rem;
	font-weight: 600;
}

.cvr-bio__body.cvr-collapsed {
	max-height: 7.5em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}

.cvr-readmore-toggle {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cvr-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.cvr-readmore-toggle:hover,
.cvr-readmore-toggle:focus {
	text-decoration: underline;
}

/* Freshness footer. */
.cvr-updated {
	margin: 0;
	font-size: 0.75rem;
	color: var(--cvr-muted);
}

/* Mono skin: keep the new widgets squared and hairline. */
.cvr-skin-mono .cvr-community__chip,
.cvr-skin-mono .cvr-events__role,
.cvr-skin-mono .cvr-favorites__item a,
.cvr-skin-mono .cvr-favorites__icon,
.cvr-skin-mono .cvr-translations__role-badge,
.cvr-skin-mono .cvr-time__pledge {
	border-radius: 0;
}

.cvr-skin-mono .cvr-events__role,
.cvr-skin-mono .cvr-time__pledge {
	background: none;
	border: 1px solid var(--cvr-border);
}

.cvr-skin-mono .cvr-favorites__item a {
	box-shadow: none;
}

/* Compact: tighter new sections too. */
.cvr-compact .cvr-events__list {
	gap: 5px;
}

.cvr-compact .cvr-favorites__grid {
	gap: 5px;
}

.cvr-compact .cvr-favorites__item a {
	padding: 6px 9px;
}

.cvr-compact .cvr-community__chip {
	padding: 2px 8px;
	font-size: 0.75rem;
}

/* Linked section counts: the number links to the full list on wp.org, with
   the same small external arrow the profile uses. */
a.cvr-section__count {
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
}

a.cvr-section__count:hover,
a.cvr-section__count:focus {
	text-decoration: underline;
}

.cvr-ext {
	flex-shrink: 0;
	opacity: 0.65;
}

.cvr-translations__all {
	color: inherit;
	text-decoration: none;
}

.cvr-translations__all:hover,
.cvr-translations__all:focus {
	color: var(--cvr-accent);
	text-decoration: underline;
}

/* Favorites groups (plugins / themes). Theme favorites use a wide screenshot
   thumb instead of a square icon. */
.cvr-favorites__group {
	margin-bottom: 12px;
}

.cvr-favorites__group:last-child {
	margin-bottom: 0;
}

.cvr-favorites__label {
	margin: 0 0 6px;
	font-family: var(--cvr-heading-font);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cvr-muted);
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.cvr-favorites__gcount {
	font-size: 0.75rem;
	color: var(--cvr-accent);
	font-variant-numeric: tabular-nums;
}

.cvr-favorites__icon--shot {
	width: 48px;
	height: 36px;
	border-radius: 4px;
	object-fit: cover;
}