/**
 * Magon Content Graph — /graph/ page stylesheet.
 *
 * Uses design-system tokens (var(--*)) with explicit fallback values so the
 * plugin works with any WordPress theme, not just magon-child.
 *
 * Fallback values match design-system v1.3 light-mode tokens exactly.
 * Dark mode is handled via prefers-color-scheme with local token overrides.
 *
 * Naming: BEM-style, prefixed with .mcg- to avoid collisions.
 * Max payload target: < 20 KB minified.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0. LOCAL TOKEN FALLBACKS
   Ensures the plugin works without magon-child's tokens.css loaded.
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-page {
	--mcg-bg-primary:    var(--bg-primary,    #FAFAF7);
	--mcg-bg-secondary:  var(--bg-secondary,  #F4F1EC);
	--mcg-bg-tertiary:   var(--bg-tertiary,   #ECE8E1);
	--mcg-text-primary:  var(--text-primary,  #1C1C28);
	--mcg-text-secondary:var(--text-secondary,#4A4A5A);
	--mcg-text-muted:    var(--text-muted,    #7A7A8A);
	--mcg-accent:        var(--accent,        #2B6CB0);
	--mcg-accent-hover:  var(--accent-hover,  #1D4E80);
	--mcg-accent-light:  var(--accent-light,  #EBF0F7);
	--mcg-border:        var(--border,        #E2DED8);
	--mcg-border-strong: var(--border-strong, #C8C2BA);
	--mcg-font-serif:    var(--font-serif,    'PT Serif', Georgia, serif);
	--mcg-font-sans:     var(--font-sans,     'PT Sans', -apple-system, sans-serif);

	/* Spacing */
	--mcg-s1:  4px;
	--mcg-s2:  8px;
	--mcg-s3:  12px;
	--mcg-s4:  16px;
	--mcg-s5:  20px;
	--mcg-s6:  24px;
	--mcg-s8:  32px;
	--mcg-s10: 40px;
	--mcg-s12: 48px;
}

/* Dark mode token overrides (standalone — no theme dependency) */
@media (prefers-color-scheme: dark) {
	.mcg-page:not([data-theme="light"]) {
		--mcg-bg-primary:    var(--bg-primary,    #1A1A2E);
		--mcg-bg-secondary:  var(--bg-secondary,  #22223A);
		--mcg-bg-tertiary:   var(--bg-tertiary,   #2C2C48);
		--mcg-text-primary:  var(--text-primary,  #E0E0E8);
		--mcg-text-secondary:var(--text-secondary,#A8A8B8);
		--mcg-text-muted:    var(--text-muted,    #6E6E82);
		--mcg-accent:        var(--accent,        #5B9BD5);
		--mcg-accent-hover:  var(--accent-hover,  #7DB5E8);
		--mcg-accent-light:  var(--accent-light,  #1E2840);
		--mcg-border:        var(--border,        #2E2E42);
		--mcg-border-strong: var(--border-strong, #3E3E56);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-page {
	background-color: var(--mcg-bg-primary);
	color: var(--mcg-text-primary);
	font-family: var(--mcg-font-serif);
}

/*
 * .mcg-article no longer sets a fixed max-width. When GeneratePress right-sidebar
 * layout is active, the content column is ~752px (design-system §2). On non-GP
 * themes the article expands to fill its container naturally.
 * The old 1040px cap is removed to avoid fighting the theme's column system.
 */
.mcg-article {
	width: 100%;
	padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SECTION BASE
   Each section has a border-top stroke and generous vertical padding,
   matching the Pencil mockup vertical rhythm.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Horizontal padding is intentionally 0: GeneratePress #main already supplies
 * side gutters. On non-GP themes we add a small fallback via the class below.
 * Vertical rhythm preserved at 40px (--mcg-s10).
 */
.mcg-section {
	padding: var(--mcg-s10) 0;
	border-top: 1px solid var(--mcg-border);
}

/* First section (hero) has no top border */
.mcg-section:first-child,
.mcg-hero {
	border-top: none;
	padding-top: var(--mcg-s8);
}

/* Section header */
.mcg-section__head {
	margin-bottom: var(--mcg-s6);
}

.mcg-section__eyebrow {
	font-family: var(--mcg-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--mcg-text-muted);
	text-transform: uppercase;
	margin: 0 0 var(--mcg-s2) 0;
}

.mcg-section__title {
	font-family: var(--mcg-font-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mcg-text-primary);
	margin: 0 0 var(--mcg-s3) 0;
}

.mcg-section__desc {
	font-family: var(--mcg-font-serif);
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
	color: var(--mcg-text-secondary);
	margin: 0;
	/* No fixed max-width: column width is controlled by the theme layout */
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. HERO SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-hero {
	padding-bottom: var(--mcg-s10);
}

/* Meta line: eyebrow + update date */
.mcg-hero__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mcg-s8);
}

.mcg-hero__eyebrow {
	font-family: var(--mcg-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: var(--mcg-accent);
	text-transform: uppercase;
}

.mcg-hero__updated {
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	color: var(--mcg-text-muted);
}

/* Title block */
.mcg-hero__title-wrap {
	margin-bottom: var(--mcg-s8);
}

.mcg-hero__title {
	font-family: var(--mcg-font-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--mcg-text-primary);
	margin: 0 0 var(--mcg-s4) 0;
	text-wrap: balance;
}

.mcg-hero__lead {
	font-family: var(--mcg-font-serif);
	font-size: 16px;
	font-style: italic;
	line-height: 1.65;
	color: var(--mcg-text-secondary);
	margin: 0;
	/* No fixed max-width: column width is controlled by the theme layout */
}

/* Asymmetric body: lead-stat left + stats right */
.mcg-hero__body {
	display: flex;
	gap: var(--mcg-s8);
	align-items: flex-start;
	padding: var(--mcg-s10) 0 var(--mcg-s8) 0;
	border-top: 1px solid var(--mcg-border);
}

/* Left: years-online large number */
.mcg-hero__lead-stat {
	flex: 0 0 auto;
}

.mcg-stat-lead {
	margin: 0;
}

.mcg-stat-lead__label {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--mcg-text-muted);
	letter-spacing: 0.3px;
	margin-bottom: var(--mcg-s1);
}

.mcg-stat-lead__value {
	font-family: var(--mcg-font-serif);
	font-size: clamp(56px, 8vw, 96px);
	font-weight: 700;
	line-height: 1;
	color: var(--mcg-text-primary);
	margin: 0;
}

.mcg-stat-lead__sub {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	color: var(--mcg-text-muted);
	margin: var(--mcg-s2) 0 0 0;
	letter-spacing: 0.3px;
}

/* Right: hairline stat rows */
.mcg-hero__stats {
	flex: 1 1 auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mcg-hero__stat-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--mcg-s3) 0;
	border-bottom: 1px solid var(--mcg-border);
}

.mcg-hero__stat-row:first-child {
	border-top: 1px solid var(--mcg-border);
}

.mcg-hero__stat-label {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	color: var(--mcg-text-muted);
}

.mcg-hero__stat-value {
	font-family: var(--mcg-font-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	margin: 0;
}

/* Secondary pills row — 4 equal columns for visual alignment */
.mcg-hero__pills {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mcg-s4);
	margin: 0;
	padding-top: var(--mcg-s4);
}

.mcg-hero__pill {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mcg-hero__pill-value {
	font-family: var(--mcg-font-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	margin: 0;
}

.mcg-hero__pill-value--sm {
	font-size: 15px;
}

.mcg-hero__pill-label {
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	color: var(--mcg-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. CHRONICLE (SPARKLINE)
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-chronicle__figure {
	margin: var(--mcg-s4) 0 0 0;
}

.mcg-sparkline {
	display: block;
	width: 100%;
	height: 90px;
	overflow: visible;
}

.mcg-spark__bar {
	fill: var(--mcg-accent);
	opacity: 0.7;
	transition: opacity 200ms ease;
}

.mcg-spark__bar--peak {
	opacity: 1;
}

.mcg-spark__bar:hover,
.mcg-spark__bar:focus {
	opacity: 1;
	outline: none;
}

.mcg-chronicle__caption {
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	font-style: italic;
	color: var(--mcg-text-muted);
	letter-spacing: 0.4px;
	margin-top: var(--mcg-s2);
}

/* Sparkline year/count labels — one per bar, aligned to SVG columns */
.mcg-spark__labels {
	display: flex;
	gap: 4px; /* visual approximation of SVG bar gap proportion (SVG gap=4/960 viewBox units) */
	list-style: none;
	margin: var(--mcg-s2) 0 0 0;
	padding: 0;
}

.mcg-spark__label {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.mcg-spark__count {
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--mcg-text-primary);
	line-height: 1.2;
}

.mcg-spark__year {
	font-family: var(--mcg-font-sans);
	font-size: 10px;
	font-weight: 400;
	color: var(--mcg-text-muted);
	letter-spacing: 0.4px;
	line-height: 1.2;
}

/* Peak year: accent count */
.mcg-spark__label--peak .mcg-spark__count {
	color: var(--mcg-accent);
}

/*
 * Narrow content column (sidebar layout): content ≤ ~752px means each spark
 * column is ~70-75px — year labels at 10px each overlap. Hide year labels by
 * default in sidebar-aware layout; keep them only on extra-wide screens (≥1200px).
 * Peak-year year label is always shown (styled via .mcg-spark__label--peak).
 */
@media (max-width: 1199px) {
	/* Hide year on all bars except peak (peak has --peak modifier class) */
	.mcg-spark__label:not(.mcg-spark__label--peak) .mcg-spark__year {
		display: none;
	}

	/* Override: force-show year on specific bars (add .mcg-spark__label--show-year
	   via PHP render logic on bars 0, 4, 8 for cadenced labels). */
	.mcg-spark__label--show-year .mcg-spark__year {
		display: block;
	}
}

/* Mobile ≤480px: hide all year labels, keep counts slightly smaller */
@media (max-width: 480px) {
	.mcg-spark__year {
		display: none;
	}

	.mcg-spark__count {
		font-size: 11px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. COVERAGE — sortable table
   Replaced per-row <dl> labels with a single <thead> + click-sort columns.
   ══════════════════════════════════════════════════════════════════════════ */

/* Scroll wrapper for mobile horizontal overflow */
.mcg-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--mcg-border) transparent;
	margin-top: var(--mcg-s3);
}

/* Table reset — no vertical or top borders (design system §7.14: border-bottom only) */
.mcg-coverage-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-family: var(--mcg-font-serif);
}

/*
 * Defeat theme/WP cascaded vertical lines on every cell + row. Some themes
 * apply `border: 1px solid` via shorthand which beats per-side resets without
 * specificity matching, so we use `border: 0` first then re-add only the
 * border-bottom on rows below.
 */
.mcg-coverage-table tr,
.mcg-coverage-table th,
.mcg-coverage-table td {
	border: 0;
	box-shadow: none;
}

/* ── thead ─────────────────────────────────────────────────────────────── */

.mcg-coverage-table thead tr {
	border-bottom: 2px solid var(--mcg-border-strong);
}

/* Column header cell */
.mcg-coverage-table__th {
	padding: var(--mcg-s3) var(--mcg-s3) var(--mcg-s3) 0;
	text-align: left;
	vertical-align: bottom;
	white-space: nowrap;
}

/* First column header: restore left breathing room */
.mcg-coverage-table__th:first-child {
	padding-left: var(--mcg-s3);
}

/* Numeric columns: align right */
.mcg-coverage-table__th--num {
	text-align: right;
}

/* Sort button inside <th scope="col"> */
.mcg-sort-btn {
	/* Full UA reset — prevents Chrome/Safari grey fill */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: none;
	/* padding: 0 right 0 0 — right side reserved for arrow indicator */
	padding: 0 20px 0 0;
	margin: 0;
	cursor: pointer;

	/* Inherit font stack to override UA system-ui leak */
	font: inherit;

	/* Typography per design system §7.14 */
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mcg-text-secondary);

	/* Inline-flex so ::after (arrow) sits on the same baseline */
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1.2;
	position: relative;
}

/*
 * Strong override against theme button styles (GeneratePress/etc may apply
 * dark backgrounds on button:hover / button:focus). Pin background, shadow,
 * decoration in every interactive state.
 */
.mcg-sort-btn,
.mcg-sort-btn:hover,
.mcg-sort-btn:focus,
.mcg-sort-btn:focus-visible,
.mcg-sort-btn:active {
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.mcg-sort-btn:hover {
	color: var(--mcg-accent);
}

.mcg-sort-btn:focus {
	outline: none;
}

.mcg-sort-btn:focus-visible {
	outline: 2px solid var(--mcg-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Sort direction arrows via CSS ::after + mask-image (inline SVG data URI).
 * Per design system §7.27 — no Unicode arrows (PT subset gap).
 * Chevron-down for descending, chevron-up for ascending.
 */

/* Arrow shown when this column is the active sort */
.mcg-sort-btn[data-sort-active]::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: var(--mcg-accent);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* Descending: chevron pointing down */
.mcg-sort-btn[data-sort-active="descending"]::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ascending: chevron pointing up */
.mcg-sort-btn[data-sort-active="ascending"]::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 7l4-4 4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 7l4-4 4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── tbody ─────────────────────────────────────────────────────────────── */

.mcg-coverage-table tbody tr {
	border-bottom: 1px solid var(--mcg-border);
	transition: background 150ms ease;
}

.mcg-coverage-table tbody tr:last-child {
	border-bottom: none;
}

.mcg-coverage-table tbody tr:hover {
	background-color: var(--mcg-accent-light);
}

/* Row name: <th scope="row"> — symmetric padding, left edge no longer flush */
.mcg-coverage-table__name {
	padding: var(--mcg-s3);
	font-family: var(--mcg-font-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	text-align: left;
	vertical-align: middle;
	min-width: 160px;
}

/* Quiet-deep: muted italic name */
[data-status="quiet-deep"] .mcg-coverage-table__name {
	color: var(--mcg-text-muted);
	font-style: italic;
}

/* Category link */
.mcg-cov-link {
	color: inherit;
	text-decoration: none;
}

.mcg-cov-link:hover,
.mcg-cov-link:focus-visible {
	color: var(--mcg-accent);
}

/* Numeric data cells */
.mcg-cov-td {
	padding: var(--mcg-s3) var(--mcg-s3) var(--mcg-s3) var(--mcg-s4);
	vertical-align: middle;
}

.mcg-cov-td--num {
	font-family: var(--mcg-font-sans);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--mcg-text-primary);
	text-align: right;
	white-space: nowrap;
}

/* Data-status warning colours preserved from the old row structure */
[data-status="quiet"] .mcg-cov-td--num {
	color: var(--mcg-text-secondary);
}

[data-status="quiet-deep"] .mcg-cov-td--num {
	color: var(--mcg-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. FRESHNESS
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-freshness__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mcg-s12);
	margin-top: var(--mcg-s4);
}

.mcg-freshness__col-title {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mcg-text-muted);
	margin: 0 0 var(--mcg-s3) 0;
}

.mcg-freshness__list {
	margin: 0;
}

.mcg-freshness__item {
	padding: var(--mcg-s3) 0;
	border-bottom: 1px solid var(--mcg-border);
}

.mcg-freshness__item:last-child {
	border-bottom: none;
}

.mcg-freshness__name {
	font-family: var(--mcg-font-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	margin-bottom: 4px;
}

.mcg-freshness__link {
	color: inherit;
	text-decoration: none;
}

.mcg-freshness__link:hover,
.mcg-freshness__link:focus-visible {
	color: var(--mcg-accent);
}

.mcg-freshness__date {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mcg-s2) var(--mcg-s3);
	margin: 0;
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	color: var(--mcg-text-muted);
}

.mcg-freshness__days {
	color: var(--mcg-text-muted);
}

.mcg-freshness__words {
	color: var(--mcg-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CONNECTIVITY
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-conn__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mcg-s12);
	margin-top: var(--mcg-s4);
}

/* Histogram SVG */
.mcg-conn__hist-fig {
	margin: 0;
}

.mcg-hist {
	display: block;
	width: 100%;
	height: 80px;
}

.mcg-hist__bar {
	fill: var(--mcg-accent);
	opacity: 0.75;
	transition: opacity 200ms ease;
}

.mcg-hist__bar:hover {
	opacity: 1;
}

.mcg-conn__hist-labels {
	display: flex;
	justify-content: space-between;
	margin-top: var(--mcg-s2);
}

.mcg-conn__hist-label {
	font-family: var(--mcg-font-sans);
	font-size: 11px;
	color: var(--mcg-text-muted);
	text-align: center;
}

/* Magnets list */
.mcg-conn__magnets-title {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mcg-text-muted);
	margin: 0 0 var(--mcg-s3) 0;
}

.mcg-conn__magnet-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcg-conn__magnet-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mcg-s3);
	padding: var(--mcg-s2) 0;
	border-bottom: 1px solid var(--mcg-border);
}

.mcg-conn__magnet-item:last-child {
	border-bottom: none;
}

.mcg-conn__magnet-link {
	font-family: var(--mcg-font-serif);
	font-size: 15px;
	color: var(--mcg-accent);
	text-decoration: none;
	flex: 1 1 auto;
	/* Clamp to 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mcg-conn__magnet-link:hover,
.mcg-conn__magnet-link:focus-visible {
	color: var(--mcg-accent-hover);
	text-decoration: underline;
}

.mcg-conn__magnet-count {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--mcg-text-muted);
	flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. ORPHANS / «ДАВНО МОЛЧАТ»
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-orphans__cards {
	margin-top: var(--mcg-s3);
}

.mcg-orphans__card {
	padding: var(--mcg-s4) 0;
	border-bottom: 1px solid var(--mcg-border);
}

.mcg-orphans__card:last-child {
	border-bottom: none;
}

.mcg-orphans__card-title {
	font-family: var(--mcg-font-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	margin: 0 0 var(--mcg-s1) 0;
}

.mcg-orphans__card--deep .mcg-orphans__card-title {
	font-style: italic;
	color: var(--mcg-text-secondary);
}

.mcg-orphans__card-link {
	color: var(--mcg-accent);
	text-decoration: none;
}

.mcg-orphans__card-link:hover,
.mcg-orphans__card-link:focus-visible {
	color: var(--mcg-accent-hover);
	text-decoration: underline;
}

.mcg-orphans__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mcg-s2) var(--mcg-s4);
	margin: 0;
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	color: var(--mcg-text-muted);
}

.mcg-orphans__footnote {
	margin-top: var(--mcg-s6);
	padding-top: var(--mcg-s4);
	border-top: 1px solid var(--mcg-border);
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	color: var(--mcg-text-muted);
}

.mcg-orphans__footnote p {
	margin: 0 0 var(--mcg-s2) 0;
}

.mcg-orphans__footnote p:last-child {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. TAGS
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-tags__top {
	margin-top: var(--mcg-s4);
}

.mcg-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mcg-s2) var(--mcg-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcg-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--mcg-s1);
	padding: 4px 10px;
	border: 1px solid var(--mcg-border);
	border-radius: 2px;
	background: var(--mcg-accent-light);
	color: var(--mcg-accent);
	font-family: var(--mcg-font-sans);
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
	white-space: nowrap;
}

.mcg-tag:hover,
.mcg-tag:focus-visible {
	background: var(--mcg-accent);
	color: #fff;
	border-color: var(--mcg-accent);
}

/* Size buckets */
.mcg-tag--lg {
	font-size: 15px;
	padding: 5px 13px;
}

.mcg-tag--md {
	font-size: 13px;
}

.mcg-tag--sm {
	font-size: 12px;
	padding: 3px 8px;
}

.mcg-tag--orphan {
	opacity: 0.7;
}

.mcg-tag__count {
	font-size: 0.85em;
	/* No opacity: full accent color (#2B6CB0 on #EBF0F7 = 5.97:1, passes WCAG AA).
	   Opacity 0.75 blended it to ~#5b8dc2 = 3.03:1, which failed WCAG AA. */
	color: var(--mcg-accent);
}

/* Disclosure for orphan tags */
.mcg-tags__orphans {
	margin-top: var(--mcg-s6);
}

.mcg-tags__orphans-summary {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--mcg-text-muted);
	cursor: pointer;
	padding: var(--mcg-s2) 0;
	list-style: none;
	user-select: none;
}

.mcg-tags__orphans-summary::-webkit-details-marker {
	display: none;
}

.mcg-tags__orphans-summary::before {
	content: '+';
	display: inline-block;
	margin-right: var(--mcg-s2);
	font-weight: 700;
	transition: transform 200ms ease;
}

.mcg-tags__orphans[open] .mcg-tags__orphans-summary::before {
	content: '\2212'; /* U+2212 MINUS SIGN — visually distinct from hyphen-minus */
}

.mcg-tags__orphans-summary:focus-visible {
	outline: 2px solid var(--mcg-accent);
	outline-offset: 2px;
}

.mcg-tag-list--orphan {
	margin-top: var(--mcg-s3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PHOTOS
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-photos__overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mcg-s6) var(--mcg-s12);
	margin: var(--mcg-s4) 0 var(--mcg-s6) 0;
}

.mcg-photos__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mcg-photos__stat-label {
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	color: var(--mcg-text-muted);
}

.mcg-photos__stat-value {
	font-family: var(--mcg-font-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	margin: 0;
}

.mcg-photos__albums-title {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mcg-text-muted);
	margin: 0 0 var(--mcg-s3) 0;
}

.mcg-photos__album-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcg-photos__album-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mcg-s3);
	padding: var(--mcg-s2) 0;
	border-bottom: 1px solid var(--mcg-border);
}

.mcg-photos__album-item:last-child {
	border-bottom: none;
}

.mcg-photos__album-name {
	font-family: var(--mcg-font-serif);
	font-size: 15px;
	color: var(--mcg-text-primary);
	flex: 1 1 auto;
}

/* Link variant — same typography as plain name + accent + underline (DS §7.23) */
.mcg-photos__album-link {
	color: var(--mcg-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 200ms ease;
}

.mcg-photos__album-link:hover {
	color: var(--mcg-accent-hover, var(--mcg-accent));
}

/*
 * Focus: colour shift + rounded outline ring.
 * The global a:focus-visible rule (§12) already sets outline + outline-offset;
 * we only add border-radius here to soften the ring on this element.
 */
.mcg-photos__album-link:focus-visible {
	color: var(--mcg-accent-hover, var(--mcg-accent));
	border-radius: 2px;
}

.mcg-photos__album-stats {
	display: flex;
	gap: var(--mcg-s4);
	margin: 0;
	flex: 0 0 auto;
}

.mcg-photos__album-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
}

.mcg-photos__album-stat-label {
	font-family: var(--mcg-font-sans);
	font-size: 11px;
	color: var(--mcg-text-muted);
}

.mcg-photos__album-stat-value {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--mcg-text-secondary);
	margin: 0;
}

.mcg-photos__synced {
	margin-top: var(--mcg-s6);
	font-family: var(--mcg-font-sans);
	font-size: 12px;
	color: var(--mcg-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. COLD-CACHE FALLBACK
   ══════════════════════════════════════════════════════════════════════════ */

.mcg-fallback {
	text-align: center;
	padding: var(--mcg-s12) var(--mcg-s10);
	border-top: none;
}

.mcg-fallback__title {
	font-family: var(--mcg-font-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--mcg-text-primary);
	margin: 0 0 var(--mcg-s4) 0;
}

.mcg-fallback__desc {
	font-family: var(--mcg-font-serif);
	font-size: 16px;
	font-style: italic;
	color: var(--mcg-text-secondary);
	max-width: 480px;
	margin: 0 auto var(--mcg-s4) auto;
	line-height: 1.6;
}

.mcg-fallback__admin-hint {
	font-family: var(--mcg-font-sans);
	font-size: 13px;
	color: var(--mcg-text-muted);
	max-width: 480px;
	margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. ACCESSIBILITY — FOCUS & INTERACTION
   ══════════════════════════════════════════════════════════════════════════ */

/* Focus-visible 2px accent outline on all interactive elements */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--mcg-accent);
	outline-offset: 2px;
}

/* SVG bars: focusable state (keyboard nav via tabindex on rect) */
.mcg-spark__bar:focus-visible,
.mcg-hist__bar:focus-visible {
	outline: 2px solid var(--mcg-accent);
	outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE — SIDEBAR LAYOUT ADAPTATION (≤1119px viewport)
   In GeneratePress right-sidebar layout the content column is ~752px.
   The hero asymmetric body (lead-stat left + stats right) needs to stack
   vertically at this width because ~35% + gap is too narrow for the numbers.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1119px) {
	/* Stack hero body vertically in sidebar layout */
	.mcg-hero__body {
		flex-direction: column;
		gap: var(--mcg-s6);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. RESPONSIVE — MOBILE (<768px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	/* On mobile (#main gets outer side padding from the theme), add small inner
	   horizontal padding so content breathes without double-guttering. */
	.mcg-section {
		padding-top: var(--mcg-s8);
		padding-bottom: var(--mcg-s8);
	}

	.mcg-hero__title {
		font-size: 28px;
	}

	.mcg-hero__lead {
		font-size: 15px;
	}

	/* Hero body already stacked from ≤1119px rule; keep gap tight on mobile */
	.mcg-hero__body {
		gap: var(--mcg-s5);
	}

	.mcg-stat-lead__value {
		font-size: clamp(48px, 12vw, 72px);
	}

	/* Coverage table: reduce name column min-width on mobile */
	.mcg-coverage-table__name {
		min-width: 120px;
		font-size: 14px;
	}

	.mcg-cov-td--num {
		font-size: 13px;
	}

	/* Freshness: single column */
	.mcg-freshness__cols {
		grid-template-columns: 1fr;
		gap: var(--mcg-s8);
	}

	/* Connectivity: single column */
	.mcg-conn__body {
		grid-template-columns: 1fr;
		gap: var(--mcg-s8);
	}

	/* Hero meta: stack */
	.mcg-hero__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mcg-s1);
	}

	.mcg-section__title {
		font-size: 22px;
	}
}

/* Pills responsive: 2×2 at ≤640px, single column at ≤380px */
@media (max-width: 640px) {
	.mcg-hero__pills {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {
	.mcg-hero__pills {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.mcg-spark__bar,
	.mcg-hist__bar,
	.mcg-tag,
	.mcg-tags__orphans-summary::before,
	.mcg-photos__album-link {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. PRINT
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
	.mcg-page {
		background: #fff;
		color: #000;
	}

	.mcg-section {
		break-inside: avoid;
		border-top: 1px solid #ccc;
	}

	.mcg-sparkline,
	.mcg-hist {
		max-width: 100%;
	}

	.mcg-tags__orphans[open] .mcg-tag-list--orphan {
		display: flex;
	}
}