/* Stepper button / stepper group geometry comes from
   ../shared/surfaceToolbar.css, shared verbatim with Species Reference. */
/* Width/flex intentionally NOT set here: the shared
   .ka-toolbar-stepper-group .ka-combobox rule owns field sizing so GIS and
   Species Reference stay identical. An earlier 240px min-width override here
   undercut the shared 280px floor and clipped the taxon label. */
#taxon-combobox-wrap{
	position: relative;
}


/* Contextual Basemap Substrate */
.basemap-group{
	pointer-events: none;
}

.basemap-north-korea{
	fill: #d7d1c2;
	stroke: #b8b19f;
	stroke-width: 0.75px;
}

.basemap-china,
.basemap-russia,
.basemap-japan{
	fill: #ded9cc;
	stroke: #c8c2b5;
}

/* Selected Region Detail Card */
.region-detail-card{
	background: var(--ka-color-paper-surface);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	position: relative;
}

.region-detail-header{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--ka-space-20);
	flex-wrap: wrap;
	gap: 8px;
}

.detail-region-names{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.detail-english-name{
	font-size: 20px;
	font-weight: 800;
	color: var(--ka-color-ink-primary);
}

.detail-korean-subtitle{
	font-size: 13px;
	color: var(--ka-color-ink-secondary);
	font-weight: 600;
	word-break: keep-all;
}

.evidence-status-pill{
	font-family: var(--ka-font-mono);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 12px;
	text-transform: uppercase;
}
.evidence-status-pill.evidenced{
	background: var(--ka-color-forest-surface);
	border: 1px solid var(--ka-color-forest);
	color: var(--ka-color-forest-dark);
}
.evidence-status-pill.none{
	background: var(--ka-color-paper-sunken);
	border: 1px solid var(--ka-color-rule-subtle);
	color: var(--ka-color-ink-quiet);
}

.detail-body{
	display: flex;
	flex-direction: column;
	gap: var(--ka-space-16);
	font-size: 13px;
}

.detail-row{
	display: flex;
	justify-content: space-between;
}

.detail-row-label{
	color: var(--ka-color-ink-secondary);
	font-weight: 500;
}

.detail-row-value{
	font-weight: 600;
	color: var(--ka-color-ink-primary);
	text-align: right;
}

.detail-row-value-muted{
	font-weight: 500;
	color: var(--ka-color-ink-quiet);
	text-align: right;
}

.detail-sources-list{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.region-reference-link{
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	padding-top: var(--ka-space-12);
	border-top: 1px solid var(--ka-color-rule-hairline);
	color: var(--ka-color-link);
	font-weight: 700;
	text-decoration: none;
}

.region-reference-link:hover,
.region-reference-link:focus-visible{
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.source-badge{
	font-family: var(--ka-font-mono);
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--ka-color-paper-sunken);
	color: var(--ka-color-ink-primary);
	border: 1px solid var(--ka-color-rule-subtle);
}

.detail-qualification-box{
	background: var(--ka-color-paper-base);
	border: 1px solid var(--ka-color-rule-subtle);
	padding: 8px 12px;
	font-size: 11px;
	color: var(--ka-color-ink-secondary);
	border-radius: 4px;
	margin-top: 4px;
}

/* Pica isolation callout */
.pica-guard-card{
	background: #fffdf5;
	border: 1px solid #e0d8b0;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 12px;
	line-height: 1.45;
	color: #524719;
}
.pica-guard-title{
	font-weight: 700;
	margin-bottom: 4px;
}

/* Mobile Docked Contextual Region Card */
/* 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: 768px) {
	.ka-surface-toolbar{
		flex-direction: column;
		align-items: stretch;
		padding-bottom: 12px;
		margin-bottom: 24px;
	}
	.ka-toolbar-stepper-group{
		width: 100%;
		justify-content: space-between;
	}
	#taxon-combobox-wrap{
		flex: 1;
		min-width: 0;
	}
	/* Intentionally minimal — matches Species Reference's equivalent rule.
     All real input chrome (border, background, padding, search icon) comes
     from the shared .ka-combobox-root .ka-combobox-input convention; this
     mobile override must only constrain overflow, not restyle the field. */
	.taxon-select{
		max-width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.map-canvas-container{
		max-height: 52vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.map-svg{
		max-height: 52vh;
		width: auto;
		max-width: 100%;
	}
}

/* ==========================================================================
   Regional Evidence Explorer — Unified Task Architecture (Points 3, 4, 5, 6, 7)
   ========================================================================== */

.regional-evidence-explorer{
	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(27, 36, 32, 0.04);
	margin-bottom: 24px;
}

.explorer-task-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ka-color-rule-subtle);
}

.explorer-title-wrap{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.explorer-title{
	font-size: 18px;
	font-weight: 700;
	color: var(--ka-color-ink-primary);
	letter-spacing: -0.01em;
	margin: 0;
}

.explorer-subtitle{
	font-size: 12.5px;
	color: var(--ka-color-ink-secondary);
}

.explorer-controls-cluster{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.explorer-stage-grid{
	display: grid;
	grid-template-columns: repeat(var(--ka-grid-columns-mobile), minmax(0, 1fr));
	gap: var(--ka-grid-gutter);
	align-items: start;
}

.explorer-map-stage,
.explorer-inspector-stage{
	grid-column: span var(--ka-grid-columns-mobile);
	min-width: 0;
}

@media (min-width: 768px) {
	.explorer-stage-grid{
		grid-template-columns: repeat(var(--ka-grid-columns-tablet), minmax(0, 1fr));
	}
	.explorer-map-stage,
.explorer-inspector-stage{
		grid-column: span var(--ka-grid-columns-tablet);
	}
}

@media (min-width: 1180px) {
	.explorer-stage-grid{
		grid-template-columns: repeat(var(--ka-grid-columns-desktop), minmax(0, 1fr));
	}
	.explorer-map-stage,
.explorer-inspector-stage{
		grid-column: span 6;
	}

	/* The inspector card was previously pinned to fill ~800px of empty column
     beside the tall map. The region x source matrix now occupies that column,
     so the void is filled with content instead and the pin is removed — it
     would otherwise overlap the matrix scrolling beneath it. */
	.explorer-inspector-stage{
		align-self: start;
	}
}

.explorer-map-stage{
	position: relative;
	width: 100%;
}

.explorer-inspector-stage{
	display: flex;
	flex-direction: column;
}

.region-inspector-card{
	background: var(--ka-color-paper-sunken);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 18px 20px;
}

.methodology-caveat-card{
	background: var(--ka-color-paper-sunken);
	border: 1px solid var(--ka-color-rule-subtle);
	border-radius: 6px;
	padding: 18px 20px;
	margin-top: 16px;
}

/* Tablet & Mobile Layout Reflow */
@media (max-width: 1024px) {
	.regional-evidence-explorer{
		padding: 16px;
	}
	.explorer-task-bar{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.explorer-controls-cluster{
		width: 100%;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	.region-selector-control{
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* The map's appearance is owned by ui/shared/evidenceMap.css.
   Rules for .map-*, .basemap-*, .graticule-* and .marine-label were duplicated
   here and overrode it, which is how the same evidence category came to render
   in a different colour on each surface and how this surface's legend stopped
   matching its own map. Do not reintroduce them: a surface needing a different
   map is a different component, not an override. Verified by
   scripts/audit_style_conflicts.mjs. */


.nav-btn-link{
	text-decoration: none;
}