[data-surface="compare"]{
	color-scheme: only light;
	/* Surface & Ink */


	/* Taxon Comparative Mineral Palette */
	--compare-color-taxon-a: #2b4c6f; /* Mineral Indigo */
	--compare-color-taxon-a-surface: #edf3f8;
	--compare-color-taxon-a-border: #a6c0d7;
	--compare-color-taxon-a-ink: #1b3552;

	--compare-color-taxon-b: #8c4a2a; /* Mineral Umber / Terracotta */
	--compare-color-taxon-b-surface: #f9f0eb;
	--compare-color-taxon-b-border: #d8ad98;
	--compare-color-taxon-b-ink: #5e2e16;

	--compare-color-taxon-c: #2d6961; /* Mineral Teal */
	--compare-color-taxon-c-surface: #edf5f3;
	--compare-color-taxon-c-border: #a0c9c3;
	--compare-color-taxon-c-ink: #1b4540;

	--compare-color-shared-all: #244837; /* Botanical Spruce Evergreen */
	--compare-color-shared-all-surface: #eaf1ed;
	--compare-color-shared-all-border: #a3c2b1;
	--compare-color-shared-all-ink: #163626;

	--compare-color-shared-ab: #584059; /* Plum Umber (A & B) */
	--compare-color-shared-ab-surface: #f3eef5;
	--compare-color-shared-ab-border: #c4b3c7;
	--compare-color-shared-ab-ink: #3b283c;

	--compare-color-shared-ac: #225666; /* Ocean Pine (A & C) */
	--compare-color-shared-ac-surface: #edf4f6;
	--compare-color-shared-ac-border: #9fbcc4;
	--compare-color-shared-ac-ink: #163842;

	--compare-color-shared-bc: #665427; /* Bronze Olive (B & C) */
	--compare-color-shared-bc-surface: #f6f3eb;
	--compare-color-shared-bc-border: #cbbe9f;
	--compare-color-shared-bc-ink: #423616;

	--compare-color-none: #e2ded4; /* Mineral Paper (No records) */
	--compare-color-none-surface: #f5f3ed;
	--compare-color-none-border: #d5d0c4;
	--compare-color-none-ink: #58625b;

	--compare-color-amber-guard: #7a5214;
	--compare-color-amber-guard-surface: #fdf8ee;
	--compare-color-amber-guard-border: #e8cfa5;


	/* Fonts */
}

/* Header */
.compare-header{
	border-bottom: 1px solid var(--ka-color-rule-subtle);
	padding-bottom: 20px;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Presets bar */
.preset-bar{
	display: grid;
	grid-template-columns: auto repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 8px;
	background: var(--ka-color-paper-surface);
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid var(--ka-color-rule-subtle);
}

.preset-label{
	font-size: 12px;
	font-weight: 600;
	color: var(--ka-color-ink-quiet);
	margin-right: 4px;
}

[data-surface="compare"] .preset-btn{
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-hairline);
	color: var(--ka-color-ink-secondary);
	font-size: 12px;
	padding: 10px 12px;
	min-height: 44px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: var(--ka-font-hangul-sans);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	text-align: left;
}

.preset-btn-title{
	font-weight: 700;
	color: var(--ka-color-ink-primary);
}

.preset-btn-purpose{
	font-size: 10.5px;
	line-height: 1.35;
	color: var(--ka-color-ink-quiet);
}

[data-surface="compare"] .preset-btn:hover{
	background: var(--ka-color-paper-sunken);
	color: var(--ka-color-ink-primary);
	border-color: var(--ka-color-rule-subtle);
}

@media (max-width: 1100px) {
	.preset-bar{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.preset-label{
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	/* Selecting the birds is the primary task. Curated examples are
	   secondary and therefore follow the editable selectors on phones. */
	.selection-controls-bar{
		order: 1;
	}
	.preset-bar{
		order: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.preset-label{
		grid-column: 1 / -1;
	}
	.preset-btn-purpose{
		display: none;
	}
}

/* Selection controls */
.selection-controls-bar{
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
	background: var(--ka-color-paper-surface);
	padding: 16px 18px;
	border-radius: 8px;
	border: 1px solid var(--ka-color-rule-subtle);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.selector-slot{
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

.slot-label{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.slot-letter{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	color: #fff;
	font-family: var(--ka-font-mono);
	font-weight: 700;
	font-size: 11px;
}

.slot-label-a .slot-letter{
	background: var(--compare-color-taxon-a);
}
.slot-label-b .slot-letter{
	background: var(--compare-color-taxon-b);
}
.slot-label-c .slot-letter{
	background: var(--compare-color-taxon-c);
}

.slot-label-a{
	color: var(--compare-color-taxon-a-ink);
}
.slot-label-b{
	color: var(--compare-color-taxon-b-ink);
}
.slot-label-c{
	color: var(--compare-color-taxon-c-ink);
}

.taxon-select{
	padding: 8px 12px;
	font-family: var(--ka-font-hangul-sans);
	font-size: 14px;
	font-weight: 500;
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 4px;
	color: var(--ka-color-ink-primary);
	width: 100%;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s ease;
}

.taxon-select:focus{
	border-color: var(--ka-color-focus-ring);
	box-shadow: 0 0 0 2px rgba(22, 54, 38, 0.15);
}

/* Accessible Searchable Combobox */
.ka-combobox{
	position: relative;
	width: 100%;
}

.select-with-remove{
	display: flex;
	gap: 6px;
	align-items: center;
	width: 100%;
}

.select-with-remove .ka-combobox{
	flex: 1 1 auto;
}

.ka-combobox-item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	padding: 6px 14px;
	color: var(--ka-color-ink-primary);
	cursor: pointer;
	border-left: 2px solid transparent;
	transition:
		background 0.1s ease,
		border-left-color 0.1s ease;
	line-height: 1.35;
	box-sizing: border-box;
}

.ka-combobox-item:hover,
.ka-combobox-item.active,
.ka-combobox-item[aria-selected="true"]{
	background: var(--ka-color-paper-sunken);
	border-left-color: var(--ka-color-focus-ring);
	color: var(--ka-color-ink-primary);
}

.ka-combobox-item.is-selected{
	font-weight: 600;
}

/* Conflict pulse animation */
@keyframes kaSlotConflictPulse {
	0%{
		box-shadow: 0 0 0 0 rgba(140, 58, 39, 0.6);
		border-color: #8c3a27;
	}
	50%{
		box-shadow: 0 0 0 5px rgba(140, 58, 39, 0.25);
		border-color: #8c3a27;
	}
	100%{
		box-shadow: 0 0 0 0 rgba(140, 58, 39, 0);
		border-color: var(--ka-color-rule-subtle);
	}
}

.ka-slot-conflict-pulse{
	animation: kaSlotConflictPulse 1.2s ease-out;
}

/* Comparison Alert Banner */
.compare-alert-banner{
	padding: 12px 18px;
	background: #fdf8ee;
	border: 1px solid #e8cfa5;
	border-radius: 6px;
	color: #7a5214;
	font-size: 13px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.compare-alert-banner.alert-conflict{
	background: #fcf1ef;
	border-color: #f1cfc8;
	color: #8c3a27;
}

/* Single-Seed Construction & Unavailable Profile Plates */
.construction-plate{
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 8px;
	padding: 32px 28px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

[data-surface="compare"] .unavailable-profile-plate{
	max-width: 800px;
	margin-inline: auto;
}

.construction-title{
	font-family: var(--ka-font-latin-serif);
	font-size: 20px;
	color: var(--ka-color-ink-primary);
	margin-bottom: 12px;
}

.construction-desc{
	font-size: 14px;
	color: var(--ka-color-ink-secondary);
	line-height: 1.6;
	margin-bottom: 20px;
}

.construction-taxon-card{
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 20px;
}


[data-surface="compare"] .state-cta-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--compare-color-shared-all-ink);
	background: var(--compare-color-shared-all-surface);
	border: 1px solid var(--compare-color-shared-all-border);
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.15s ease;
}

[data-surface="compare"] .state-cta-link:hover{
	background: #dfece4;
	border-color: var(--compare-color-shared-all-ink);
}

[data-surface="compare"] .remove-btn{
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-hairline);
	color: var(--ka-color-ink-quiet);
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}

[data-surface="compare"] .remove-btn:hover{
	background: #f7dede;
	color: #8c2020;
	border-color: #d69898;
}

.slot-actions{
	display: flex;
	align-items: center;
}

[data-surface="compare"] .toggle-mode-btn{
	padding: 8px 16px;
	font-family: var(--ka-font-hangul-sans);
	font-size: 13px;
	font-weight: 600;
	background: var(--ka-color-paper-base);
	border: 1px dashed var(--ka-color-rule-strong);
	color: var(--ka-color-ink-secondary);
	border-radius: 4px;
	cursor: pointer;
	height: 44px;
	min-height: 44px;
	white-space: nowrap;
	transition: all 0.15s ease;
}

[data-surface="compare"] .toggle-mode-btn:hover{
	background: var(--ka-color-paper-sunken);
	color: var(--ka-color-ink-primary);
	border-color: var(--ka-color-ink-primary);
}

/* App Main Container */
#app{
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Comparison operands are compact identity items, not stacked profile cards.
   Compare owns only their arrangement; image density and identity field
   geometry remain owned by TaxonIdentity. Narrow layouts stay one-column.
   Desktop lays the 2/3 operands side-by-side so comparison is visible before
   the analytical sections begin. */
.identity-strip{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
	background: var(--ka-color-paper-surface);
	border-radius: 8px;
	border: 1px solid var(--ka-color-rule-subtle);
	overflow: hidden;
}

.identity-strip-row{
	min-width: 0;
	padding: var(--ka-space-12) var(--ka-space-16);
	font-size: 13px;
}

.identity-strip-row > .species-quick-view-trigger,
.identity-strip-row .ka-taxon-identity{
	width: 100%;
	min-width: 0;
}

.identity-strip-row + .identity-strip-row{
	border-top: 1px solid var(--ka-color-rule-hairline);
}

@media (min-width: 901px) {
	.identity-strip{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.identity-strip.identity-strip--3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.identity-strip-row + .identity-strip-row{
		border-top: 0;
		border-left: 1px solid var(--ka-color-rule-hairline);
	}
}

.taxon-letter-chip{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	color: #fff;
	font-family: var(--ka-font-mono);
	font-weight: 700;
	font-size: 11px;
	flex-shrink: 0;
}

.identity-strip-row:nth-child(1) .taxon-letter-chip{
	background: var(--compare-color-taxon-a);
}
.identity-strip-row:nth-child(2) .taxon-letter-chip{
	background: var(--compare-color-taxon-b);
}
.identity-strip-row:nth-child(3) .taxon-letter-chip{
	background: var(--compare-color-taxon-c);
}

.identity-strip-metric{
	margin-left: auto;
	font-family: var(--ka-font-mono);
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 4px;
	background: var(--ka-color-paper-sunken);
	border: 1px solid var(--ka-color-rule-subtle);
	color: var(--ka-color-ink-primary);
	white-space: nowrap;
}

/* Synthesis Bar */
.synthesis-banner{
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.synthesis-title{
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--compare-color-shared-all-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.synthesis-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 4px;
}

.synthesis-grid-three{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.synthesis-explainer,
.synthesis-qualification{
	margin: 0;
	max-width: 900px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--ka-color-ink-quiet);
}

.comparison-plain-summary{
	margin: 2px 0 4px;
	max-width: 980px;
	color: var(--ka-color-ink-primary);
	font-size: 14px;
	line-height: 1.6;
}

.comparison-plain-summary strong{
	color: var(--compare-color-shared-all-ink);
}

.synthesis-qualification{
	padding-top: 4px;
}

.synthesis-metric-label{
	margin-bottom: 3px;
	font-family: var(--ka-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ka-color-ink-secondary);
}

.synthesis-metric-box{
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 6px;
	padding: 10px 14px;
}

[data-surface="compare"] button.synthesis-metric-box{
	font: inherit;
	text-align: left;
	cursor: pointer;
}

[data-surface="compare"] button.synthesis-metric-box:hover,
[data-surface="compare"] button.synthesis-metric-box:focus-visible{
	border-color: var(--ka-color-rule-strong, #8f978f);
	background: var(--ka-color-paper-sunken);
}

[data-surface="compare"] button.synthesis-metric-box.is-active{
	border-color: var(--compare-color-shared-all-ink);
	background: var(--ka-color-paper-sunken);
}

.synthesis-metric-box > span{ display: block; }
.synthesis-metric-action{
	margin-top: 8px;
	font-size: 10px;
	font-weight: 700;
	color: var(--compare-color-shared-all-ink);
}

.comparison-evidence-inspector{
	border-top: 1px solid var(--ka-color-rule-hairline);
	padding-top: 12px;
	outline: none;
}
.comparison-evidence-inspector h3{
	font-size: 14px;
	margin: 0 0 4px;
}
.comparison-evidence-inspector > p{
	font-size: 12px;
	color: var(--ka-color-ink-quiet);
	margin: 0 0 8px;
}
.comparison-inspector-list{ display: grid; gap: 4px; }
.comparison-inspector-row{
	display: grid;
	grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
	gap: 12px;
	padding: 6px 8px;
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 4px;
	font-size: 11px;
}
.comparison-inspector-row > span{ color: var(--ka-color-ink-secondary); }

.synthesis-metric-val{
	font-family: var(--ka-font-latin-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ka-color-ink-primary);
}

.synthesis-metric-desc{
	font-size: 12px;
	color: var(--ka-color-ink-quiet);
	margin-top: 2px;
}

.compare-section-nav{
	display: grid;
	/* Section availability is data-driven (for example, Conservation is omitted
	   when the release projection has no assessment source). Let the rendered
	   links define the equal-width columns instead of reserving historical slots. */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border-top: 2px solid var(--ka-color-brand-pine, #205c42);
	border-bottom: 1px solid var(--ka-color-rule-hairline);
	background: var(--ka-color-paper-surface);
}

.compare-section-nav a{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 10px;
	border-right: 1px solid var(--ka-color-rule-hairline);
	color: var(--ka-color-ink-secondary);
	font-size: 12px;
	font-weight: 650;
	text-decoration: none;
}

.compare-section-nav a:last-child{
	border-right: 0;
}

.compare-section-nav a:hover,
.compare-section-nav a:focus-visible{
	background: var(--ka-color-paper-sunken);
	color: var(--compare-color-shared-all-ink);
}

/* Section Shell */
.compare-section{
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.section-header{
	border-bottom: 1px solid var(--ka-color-rule-hairline);
	padding-bottom: 12px;
}

.section-title{
	font-family: var(--ka-font-latin-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--ka-color-ink-primary);
}

.section-caption{
	font-size: 13px;
	color: var(--ka-color-ink-quiet);
	margin-top: 4px;
	line-height: 1.45;
}

/* Spatial Stage: map column is the dominant visual object; the region
   inspector column stays comfortably usable but does not compete for width. */
.spatial-stage-layout{
	display: grid;
	grid-template-columns: repeat(var(--ka-grid-columns-mobile), 1fr);
	gap: var(--ka-grid-gutter);
	align-items: start;
}

.spatial-stage-layout .map-container,
.spatial-stage-layout .spatial-info-panel{
	grid-column: span var(--ka-grid-columns-mobile);
	min-width: 0;
}

@media (min-width: 768px) {
	.spatial-stage-layout{
		grid-template-columns: repeat(var(--ka-grid-columns-tablet), 1fr);
	}
	.spatial-stage-layout .map-container,
.spatial-stage-layout .spatial-info-panel{
		grid-column: span var(--ka-grid-columns-tablet);
	}
}

@media (min-width: 1024px) {
	.spatial-stage-layout{
		grid-template-columns: repeat(var(--ka-grid-columns-desktop), 1fr);
	}
	.spatial-stage-layout .map-container{
		grid-column: span 8;
	}
	.spatial-stage-layout .spatial-info-panel{
		grid-column: span 4;
	}

	/* Pin the short info panel beside the tall map so the region breakdown stays
     in view instead of scrolling away. The panel is itself the grid item and
     the row is as tall as the map, so it has room to travel — no align-self:
     stretch here, which would fill the row and defeat the sticky. */
	.spatial-stage-layout .spatial-info-panel{
		position: sticky;
		top: var(--ka-space-16);
	}
}

.map-container{
	background: var(--ka-color-paper-sunken);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.comparison-svg-map{
	width: 100%;
	max-width: none;
	height: auto;
	/* The 72vh cap and the reasoning behind it now live once, in
     ui/shared/evidenceMap.css .map-svg. */
	display: block;
}

.island-marker-pin{
	fill: #a63d2d;
}

.island-label{
	font-family: var(--ka-font-hangul-sans);
	font-size: 8px;
	font-weight: 700;
	fill: var(--ka-color-ink-primary);
}

/* SGIS Region Paths — evidence fill ONLY. Boundary/selected/active/hover
   all live in their own independent layers (../shared/evidenceMap.css). */
.region-path{
	cursor: pointer;
	stroke: none;
	transition: opacity 0.15s ease;
	outline: none;
}

.region-path:hover,
.region-path:focus-visible{
	outline: none !important;
}

/* Region Categorical Fills (SVG paths) */
.fill-shared_all{
	fill: var(--compare-color-shared-all);
}
.fill-taxon_a{
	fill: var(--compare-color-taxon-a);
}
.fill-taxon_b{
	fill: var(--compare-color-taxon-b);
}
.fill-taxon_c{
	fill: var(--compare-color-taxon-c);
}
.fill-shared_taxon_a_taxon_b{
	fill: var(--compare-color-shared-ab);
}
.fill-shared_taxon_a_taxon_c{
	fill: var(--compare-color-shared-ac);
}
.fill-shared_taxon_b_taxon_c{
	fill: var(--compare-color-shared-bc);
}
.fill-none{
	fill: var(--compare-color-none);
}

/* Same categorical colors for the HTML (non-SVG) evidence-key swatches —
   `fill` has no effect on an HTML element, so these need their own
   background-color rules or the swatch renders as an empty checkbox-like box. */
.legend-swatch.fill-shared_all{
	background-color: var(--compare-color-shared-all);
}
.legend-swatch.fill-taxon_a{
	background-color: var(--compare-color-taxon-a);
}
.legend-swatch.fill-taxon_b{
	background-color: var(--compare-color-taxon-b);
}
.legend-swatch.fill-taxon_c{
	background-color: var(--compare-color-taxon-c);
}
.legend-swatch.fill-shared_taxon_a_taxon_b{
	background-color: var(--compare-color-shared-ab);
}
.legend-swatch.fill-shared_taxon_a_taxon_c{
	background-color: var(--compare-color-shared-ac);
}
.legend-swatch.fill-shared_taxon_b_taxon_c{
	background-color: var(--compare-color-shared-bc);
}
.legend-swatch.fill-none{
	background-color: var(--compare-color-none);
}

/* Spatial Info Panel */
.spatial-info-panel{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Compact evidence key: sits BELOW the map (never beside it), tertiary to
   the map itself. Replaces the former wide side-by-side ".legend-card". */
.evidence-key-bar{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 4px 0;
	border-top: 1px solid var(--ka-color-rule-hairline);
}

.evidence-key-taxa{
	font-size: 12px;
	color: var(--ka-color-ink-secondary);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.evidence-key-taxon strong{
	font-family: var(--ka-font-mono);
	font-weight: 700;
	color: var(--ka-color-ink-primary);
}

.evidence-key-sep{
	color: var(--ka-color-rule-subtle);
}

.evidence-key-chips{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.evidence-key-chip{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--ka-color-ink-secondary);
	white-space: nowrap;
}

/* Groups the state-channel chips (Selected/Active) apart from the
   evidence-category chips above, without a second card. */
.evidence-key-state-chip{
	padding-left: 8px;
	border-left: 1px solid var(--ka-color-rule-hairline);
}

.legend-swatch{
	width: 10px;
	height: 10px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	display: inline-block;
}

.evidence-key-count{
	font-family: var(--ka-font-mono);
	font-size: 11px;
	color: var(--ka-color-ink-quiet);
}

[data-surface="compare"] .evidence-key-help-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 44px;
	min-height: 44px;
	margin: -11px -11px -11px 0;
	border: none;
	background: transparent;
	color: var(--ka-color-ink-quiet);
	cursor: pointer;
	font-size: 14px;
	border-radius: 50%;
}

[data-surface="compare"] .evidence-key-help-btn:hover{
	background: var(--ka-color-paper-sunken);
	color: var(--ka-color-ink-primary);
}

/* Region Inspect Drawer */
.region-inspect-card{
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.inspect-header{
	border-bottom: 1px solid var(--ka-color-rule-hairline);
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.inspect-region-name-en{
	font-family: var(--ka-font-latin-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--ka-color-ink-primary);
}

.inspect-region-name-ko{
	font-size: 13px;
	font-weight: 600;
	color: var(--ka-color-ink-quiet);
	margin-left: 6px;
	word-break: keep-all;
}

/* Master/list region inspection: scales to 0-17 selected regions without
   ever rendering more than one expanded detail block (.region-active-detail
   below). Rows communicate SELECTED (via inclusion in this list) while
   .is-active communicates the separate, single, currently INSPECTED region. */
.region-master-list{
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 12px;
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 6px;
	padding: 4px;
}

[data-surface="compare"] .region-master-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: none;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	color: var(--ka-color-ink-primary);
}

[data-surface="compare"] .region-master-row:hover{
	background: var(--ka-color-paper-sunken);
}

[data-surface="compare"] .region-master-row.is-active{
	background: var(--ka-color-paper-sunken);
	font-weight: 700;
	box-shadow: inset 2px 0 0 var(--ka-color-brand-pine, #205c42);
}

/* Temporary map<->inspector linking (hover/focus the map polygon), distinct
   from .is-active (persistent inspection choice) — a cool-blue channel
   matching .interaction-highlight-overlay, cleared on pointerleave/blur. */
[data-surface="compare"] .region-master-row.is-linked-highlight{
	outline: 1.5px dashed #205c9e;
	outline-offset: -1px;
}

.region-bulk-actions{
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

[data-surface="compare"] .region-bulk-action-btn{
	font-size: 11px;
	font-weight: 600;
	padding: 10px 12px;
	min-height: 44px;
	border-radius: 4px;
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-subtle);
	color: var(--ka-color-ink-secondary);
	cursor: pointer;
}

[data-surface="compare"] .region-bulk-action-btn:hover{
	background: var(--ka-color-paper-sunken);
	color: var(--ka-color-ink-primary);
}

.region-row-name-ko{
	font-weight: 400;
	color: var(--ka-color-ink-quiet);
	margin-left: 4px;
}

.region-row-pills{
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.region-row-taxon-pill{
	font-family: var(--ka-font-mono);
	font-size: 10px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 3px;
}

.region-row-taxon-pill.evidenced{
	background: var(--ka-color-paper-surface);
	color: var(--ka-color-forest, #205c42);
	border: 1px solid var(--ka-color-forest, #205c42);
}

.region-row-taxon-pill.none{
	background: transparent;
	color: var(--ka-color-ink-quiet);
	border: 1px solid var(--ka-color-rule-subtle);
}

.inspect-status-badge{
	font-family: var(--ka-font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 4px;
	text-transform: uppercase;
}

.inspect-taxa-breakdown{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.breakdown-row{
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 5px;
	padding: 8px 12px;
}

.breakdown-row-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.breakdown-taxon-name{
	font-weight: 600;
	font-size: 13px;
}

.breakdown-evidence-tag{
	font-family: var(--ka-font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 3px;
}

.breakdown-evidence-tag.evidenced{
	background: var(--compare-color-shared-all-surface);
	color: var(--compare-color-shared-all-ink);
}

.breakdown-evidence-tag.none{
	background: var(--ka-color-paper-sunken);
	color: var(--compare-color-none-ink);
}

.breakdown-sources{
	font-family: var(--ka-font-mono);
	font-size: 11px;
	color: var(--ka-color-ink-quiet);
}

.inspect-boundary-note{
	font-size: 11px;
	color: var(--ka-color-ink-quiet);
	line-height: 1.4;
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-subtle);
	padding: var(--ka-space-8) var(--ka-space-12);
	border-radius: 4px;
	margin-top: var(--ka-space-8);
}

.evidence-layer-label{
	font-size: 11px;
	line-height: 1.45;
	color: var(--ka-color-ink-secondary);
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 4px;
	padding: 7px 10px;
}

.per-source-evidence{
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 6px;
	overflow: hidden;
}
.per-source-heading{
	padding: 9px 12px;
	background: var(--ka-color-paper-sunken);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
}
.per-source-heading > span{ color: var(--ka-color-ink-quiet); }
.per-source-row{
	display: grid;
	grid-template-columns: minmax(210px, 0.9fr) minmax(0, 2fr);
	border-top: 1px solid var(--ka-color-rule-hairline);
}
.per-source-name,
.per-source-values{ padding: 9px 12px; }
.per-source-name{ display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.per-source-name > span{ font-size: 10px; color: var(--ka-color-ink-quiet); }
.per-source-values{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.per-source-cell{ display: flex; gap: 6px; align-items: baseline; font-size: 11px; }
.per-source-taxon{
	font-family: var(--ka-font-mono);
	font-weight: 700;
	min-width: 1.2em;
}

@media (max-width: 768px) {
	.synthesis-grid-three{ grid-template-columns: 1fr; }
	.synthesis-title{ align-items: flex-start; flex-direction: column; gap: 2px; }

	.synthesis-grid-three > .comparison-evidence-inspector.is-inline-mobile{
		width: 100%;
		margin-top: -4px;
		padding: 12px;
		border: 1px solid var(--ka-color-rule-hairline);
		border-radius: 6px;
		background: var(--ka-color-paper-sunken);
		box-sizing: border-box;
	}

	.per-source-row{ grid-template-columns: 1fr; }
	.per-source-values{ padding-top: 0; }
	.per-source-heading{ flex-direction: column; }
	.comparison-inspector-row{ grid-template-columns: 1fr; gap: 3px; }
}

.section-disclaimer{
	font-size: 12px;
	color: var(--ka-color-ink-quiet);
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-subtle);
	padding: 8px 12px;
	border-radius: 4px;
	line-height: 1.45;
}

/* Source Coverage Section */
.source-matrix-container{
	overflow-x: auto;
	max-width: 100%;
	border: 1px solid var(--ka-color-rule-hairline);
	border-radius: 6px;
}

.source-matrix-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.source-matrix-table th,
.source-matrix-table td{
	padding: 12px 14px;
	border: 1px solid var(--ka-color-rule-hairline);
	text-align: left;
}

.source-matrix-table thead th{
	background: var(--ka-color-paper-sunken);
	font-family: var(--ka-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ka-color-ink-secondary);
}

.source-role-subtext{
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--ka-color-ink-quiet);
	margin-top: 2px;
}

.source-coverage-cell{
	font-family: var(--ka-font-mono);
	font-size: 12px;
	font-weight: 600;
}

.source-coverage-cell.active{
	color: var(--compare-color-shared-all-ink);
}

.source-coverage-cell.inactive{
	color: var(--ka-color-ink-quiet);
}

/* Conservation Section */
.conservation-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.conservation-card{
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.conservation-card-header{
	font-weight: 700;
	font-size: 14px;
	color: var(--ka-color-ink-primary);
}

.status-field-row{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.status-field-label{
	font-size: 11px;
	font-family: var(--ka-font-mono);
	text-transform: uppercase;
	color: var(--ka-color-ink-quiet);
}

.status-field-value{
	font-size: 13px;
	font-weight: 600;
	color: var(--ka-color-ink-primary);
}

/* Taxonomic Guard Alert Box */
.pica-guard-banner{
	background: var(--compare-color-amber-guard-surface);
	border: 1px solid var(--compare-color-amber-guard-border);
	border-radius: 6px;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pica-guard-title{
	font-size: 13px;
	font-weight: 700;
	color: var(--compare-color-amber-guard);
}

.pica-guard-text{
	font-size: 12px;
	color: var(--ka-color-ink-secondary);
	line-height: 1.5;
}

/* Footer */
.compare-footer{
	border-top: 1px solid var(--ka-color-rule-subtle);
	margin-top: 40px;
	padding-top: 24px;
}

.footer-content{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.provenance-title{
	font-family: var(--ka-font-latin-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--ka-color-ink-primary);
}

.provenance-text{
	font-size: 11px;
	color: var(--ka-color-ink-quiet);
	line-height: 1.5;
	margin-top: 4px;
}

.footer-governance{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Responsive Overrides */
/* Unified site-wide tiers: 1024 (desktop→tablet), 768 (tablet→mobile).
   See species-reference/styles.css and surfaceHeader.css for the same
   convention. */
@media (max-width: 1024px) {
	.map-container{
		width: 100%;
		padding: 12px;
	}

	.comparison-svg-map{
		max-width: 100%;
	}

	.compare-section{
		padding: 16px 12px;
	}

	.selection-controls-bar{
		padding: 12px 10px;
		gap: 12px;
	}

	.source-matrix-table th,
.source-matrix-table td{
		padding: 8px 10px;
		font-size: 11px;
	}


	.source-matrix-table thead th:first-child{
		width: 140px;
	}
}

.technical-details{
	font-size: 0.75rem;
	color: var(--ka-color-ink-quiet);
	margin-top: 8px;
}
.technical-details summary{
	cursor: pointer;
	user-select: none;
}
.technical-details code{
	display: block;
	margin-top: 4px;
	background: var(--ka-color-paper-sunken);
	padding: 4px 8px;
	border-radius: 4px;
	font-family: var(--ka-font-mono);
}

/* ==========================================================================
   Compare Responsive Upgrades (Quarter Panels, Source Cards, Field Notices)
   ========================================================================== */

.slot-notice-container{
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	min-height: 0;
}

.slot-notice-container:empty{
	display: none;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.source-matrix-mobile-cards{
	display: none;
}

.source-matrix-card{
	background: var(--ka-color-paper-sunken);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.source-matrix-card-title{
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: var(--ka-color-ink-primary);
}

.source-card-taxon-row{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	margin-top: var(--ka-space-8);
}

.source-card-taxon-name{
	flex: 1;
	color: var(--ka-color-ink-secondary);
	font-weight: 500;
}

.slot-letter-sm{
	width: 14px !important;
	height: 14px !important;
	line-height: 14px !important;
	font-size: 9px !important;
	display: inline-block;
	text-align: center;
	color: #fff;
	border-radius: 2px;
}

@media (max-width: 768px) {
	/* Touch-target floor on the narrow tier, matching the 44px bar the map
     controls and chip buttons already meet. These render at 24px and 22px
     otherwise, well under a reliable finger target. */
	.preset-btn,
[data-surface="compare"] .region-bulk-action-btn{
		min-height: 44px;
	}


}

@media (max-width: 768px) {
	.source-matrix-desktop-wrap{
		display: none;
	}
	.source-matrix-mobile-cards{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}




/* The map's appearance is owned by ui/shared/evidenceMap.css. Basemap,
   graticule and boundary rules were duplicated here with values differing from
   the shared ones by fractions of a pixel and unnamed hex codes; the shared
   component is the single vocabulary. Compare keeps its own region fills,
   which encode taxon membership rather than evidence category and are
   genuinely a different scheme. */

/* Combobox option styling is owned by ui/shared/combobox.css. It was restated
   here in full, in tokens rather than the literals the shared sheet used, with
   values that had drifted a shade apart. The shared sheet now carries the
   tokens; this copy is gone. */

.inspect-status-badge.fill-shared_all,
.inspect-status-badge.fill-taxon_a,
.inspect-status-badge.fill-taxon_b,
.inspect-status-badge.fill-taxon_c{
	color: var(--ka-color-ink-inverse, #f7f6f2);
}

.inspect-status-badge.fill-none{
	color: var(--ka-color-evidence-none-ink, #58625b);
	border: 1px solid var(--ka-color-evidence-none-border, #d5d0c4);
}

.slot-letter--a,
.slot-letter-sm--a{
	background: var(--compare-color-taxon-a);
}
.slot-letter--b,
.slot-letter-sm--b{
	background: var(--compare-color-taxon-b);
}
.slot-letter--c,
.slot-letter-sm--c{
	background: var(--compare-color-taxon-c);
}

.slot-letter--inline{
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-size: 10px;
	border-radius: 2px;
	margin-right: 6px;
	vertical-align: middle;
	color: #fff;
}

.slot-letter--conservation{
	width: 18px;
	height: 18px;
	line-height: 18px;
	font-size: 11px;
}

.compare-inline-note{
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	color: var(--ka-color-ink-secondary);
}

.inspect-region-header-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: var(--ka-space-12);
}


.error-plate{
	padding: 24px;
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-strong);
	border-radius: 8px;
}

.error-plate-title{
	color: var(--ka-color-annotation-split-ink);
}

.error-plate-copy{
	margin-top: 8px;
	font-size: 13px;
	color: var(--ka-color-ink-quiet);
}

.compare-empty-title{
	font-size: 15px;
	font-weight: 600;
	color: var(--ka-color-ink-primary);
}

.compare-empty-subtitle,
.compare-empty-copy{
	font-size: 13px;
	color: var(--ka-color-ink-quiet);
}

.compare-empty-subtitle{
	margin-top: 4px;
}

.compare-empty-copy{
	line-height: 1.5;
}

.compare-empty-list{
	margin: 12px 0 20px 20px;
	font-size: 13.5px;
	color: var(--ka-color-ink-secondary);
	line-height: 1.6;
}

.compare-invalid-title{
	color: var(--ka-color-annotation-split-ink);
}

.inspect-header{
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
	margin-bottom: 12px;
}

.region-selector-control--full{
	width: 100%;
}


.source-matrix-heading-cell{
	width: 320px;
}