/* Genetic Heatmap (/Tools/GeneticHeatmap), 02-10-2026.
   Same design language as the Ancient Ancestry Maps (wwwroot/css/ancient-ancestry-maps.css, unchanged) and the free tools:
   page-header, white cards, site buttons, _ToolStyles alerts. Only the input card, the map, the legend, the results table
   and the popups are specific to this page. Mobile first: nothing may scroll sideways at 375 px. */

.gh-page .container { max-width: 1180px; }
.page-header .breadcrumb { flex-wrap: wrap; }
.gh-page [hidden] { display: none !important; }

.gh-howto p { line-height: 1.65; }

/* Cards */
.gh-page .result-card { background: var(--color-white); border: 1px solid #e5e7eb; border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-6); scroll-margin-top: 96px; }
.gh-page .result-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.gh-page .result-card p { color: var(--color-gray-700); line-height: 1.75; margin-bottom: var(--space-4); }
.gh-page .result-card p:last-child { margin-bottom: 0; }
.gh-h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }

/* Input card */
.gh-input-card .gh-lead { margin-bottom: var(--space-3) !important; }
.gh-textarea { display: block; width: 100%; min-height: 104px; padding: 0.8rem 0.9rem; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; color: var(--color-gray-800); background: #fcfcfd; resize: vertical; transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.gh-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 206, 254, 0.12); background: var(--color-white); }
.gh-textarea.is-invalid { border-color: #f87171; }
.gh-error { margin-top: var(--space-3); padding: 0.65rem 0.85rem; border-radius: var(--radius-lg); background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: var(--text-sm); line-height: 1.55; }
.gh-error.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.gh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.gh-actions .btn { margin: 0; }
.gh-status { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.5; }
.gh-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-gray-100); }
.gh-pick label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-700); }
.gh-pick-row { display: flex; flex: 1 1 320px; gap: var(--space-2); min-width: 0; max-width: 520px; }
.gh-pick input { flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.8rem; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); font-family: inherit; font-size: var(--text-sm); color: var(--color-gray-800); }
.gh-pick input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 206, 254, 0.12); }
.gh-pick .btn { margin: 0; flex-shrink: 0; padding: 0.55rem 1rem; font-size: var(--text-sm); border-radius: var(--radius-lg); }
.gh-pick .btn:hover { transform: none; }
.gh-privacy { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0 0 !important; font-size: var(--text-sm); color: var(--color-gray-600) !important; line-height: 1.6 !important; }
.gh-privacy svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: #059669; }
.gh-nog25 { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(21, 206, 254, 0.06); border: 1px solid rgba(21, 206, 254, 0.18); font-size: var(--text-sm); color: var(--color-gray-800); line-height: 1.65; }
.gh-nog25 a { font-weight: var(--font-semibold); color: var(--color-primary-dark); }

/* Map card */
.gh-map-card { padding: var(--space-5) !important; }
.gh-map-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.gh-map-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.gh-map-head h2 { margin-bottom: var(--space-1) !important; font-size: var(--text-lg) !important; line-height: 1.3; overflow-wrap: anywhere; }
.gh-map-head .gh-map-sub { margin: 0 !important; font-size: var(--text-sm); color: var(--color-gray-500) !important; line-height: 1.45 !important; overflow-wrap: anywhere; }
.gh-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.gh-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-full); background: var(--color-white); }
.gh-seg-label { padding: 0 0.4rem 0 0.6rem; font-size: 0.7rem; font-weight: var(--font-bold); color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
.gh-seg button { border: 0; background: transparent; padding: 0.4rem 0.8rem; border-radius: var(--radius-full); font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-700); cursor: pointer; white-space: nowrap; }
.gh-seg button:hover { color: var(--color-primary-dark); }
.gh-seg button.active { background: var(--gradient-brand); color: var(--color-white); }
.gh-seg button:focus-visible { outline: 3px solid rgba(21, 206, 254, 0.45); outline-offset: 1px; }
.gh-opacity, .gh-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-700); cursor: pointer; }
.gh-opacity input { width: 96px; accent-color: var(--color-secondary); }
.gh-check input { width: 16px; height: 16px; accent-color: var(--color-secondary); }
.gh-btns { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.gh-controls .gh-tool { margin: 0; padding: 0.4rem 0.85rem; gap: 6px; border-radius: var(--radius-full); font-size: var(--text-sm); line-height: 1.2; }
.gh-controls .gh-tool svg { width: 16px; height: 16px; flex-shrink: 0; }
.gh-controls .gh-tool:hover svg { transform: none; }
.gh-controls .gh-tool:focus-visible { outline: 3px solid rgba(21, 206, 254, 0.45); outline-offset: 2px; }
.gh-controls .gh-tool.is-busy { opacity: 0.6; cursor: progress; transform: none; }
.gh-toast { position: absolute; left: 50%; bottom: 16px; z-index: 1000; transform: translateX(-50%); max-width: calc(100% - 24px); width: max-content; padding: 0.5rem 0.95rem; border-radius: var(--radius-full); background: rgba(24, 24, 27, 0.88); color: var(--color-white); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.35; text-align: center; pointer-events: none; opacity: 0; transition: opacity var(--transition-base); }
.gh-toast.show { opacity: 1; }
.gh-toast:empty { padding: 0; }
/* Before the first analysis: a short hint at the top, clear of the zoom buttons (hidden on narrow maps, the heading says it) */
.gh-hint { position: absolute; top: 12px; left: 56px; right: 56px; z-index: 900; margin: 0 auto; width: fit-content; max-width: calc(100% - 112px); padding: 0.45rem 0.9rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.94); border: 1px solid #e5e7eb; box-shadow: var(--shadow-sm); color: var(--color-gray-700); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.35; text-align: center; pointer-events: none; }

/* The map: its own stacking context, so Leaflet panes and controls stay under the sticky header */
.gh-map { position: relative; z-index: 0; height: 560px; border-radius: var(--radius-lg); border: 1px solid #e5e7eb; background: #eef0f2; overflow: hidden; }
.gh-map.leaflet-container { font-family: var(--font-body); }
.gh-map-msg { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-6); text-align: center; background: rgba(248, 250, 252, 0.85); color: var(--color-gray-600); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.6; }
.gh-surface { pointer-events: none; }

/* Legend: deep red (closest) on the left, pale yellow (farthest) on the right */
.gh-legend { margin-top: var(--space-3); }
.gh-legend-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-700); margin-bottom: 6px; line-height: 1.4; overflow-wrap: anywhere; }
.gh-legend-bar { height: 12px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.06); background: linear-gradient(to right, #800026, #bd0026, #e31a1c, #fc4e2a, #fd8d3c, #feb24c, #fed976, #ffeda0, #ffffcc); }
.gh-legend-ticks { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-gray-600); }
/* 02-10-2026 (review): centre each tick label on its 25/50/75% mark, whatever its width */
.gh-legend-ticks span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
.gh-legend-ticks span:first-child { flex-grow: .5; text-align: left; }
.gh-legend-ticks span:last-child { flex-grow: .5; text-align: right; }
.gh-legend-bands { display: flex; margin-top: 2px; font-size: 0.72rem; font-weight: var(--font-semibold); color: var(--color-gray-600); text-align: center; }
.gh-legend-bands span { flex: 1 1 0; min-width: 0; }
.gh-legend-ends { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.75rem; color: var(--color-gray-500); }
.gh-note { margin: var(--space-3) 0 0 !important; font-size: var(--text-sm); color: var(--color-gray-500) !important; line-height: 1.6 !important; }

/* Results (left) and the notes (right) on wide screens */
.gh-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.gh-grid .result-card, .gh-grid .alert { margin-bottom: var(--space-6); }
.gh-summary { padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(21, 206, 254, 0.06); border: 1px solid rgba(21, 206, 254, 0.18); color: var(--color-gray-800) !important; }
.gh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); box-shadow: none; }
.gh-table { display: table !important; width: 100%; min-width: 0 !important; font-size: var(--text-sm); }
.gh-table th, .gh-table td { padding: var(--space-2) var(--space-3); }
.gh-table th.num, .gh-table td.num { text-align: right; }
.gh-table td.num { white-space: nowrap; }
.gh-table td.rank { color: var(--color-gray-500); width: 2.25rem; font-variant-numeric: tabular-nums; }
.gh-dist { display: block; font-family: var(--font-mono); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: var(--color-gray-900); }
.gh-table .gh-badge { margin-top: 3px; }
.gh-locate { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--font-semibold); color: var(--color-gray-900); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.gh-locate:hover { color: var(--color-primary-dark); text-decoration: underline; }
.gh-name { font-weight: var(--font-semibold); color: var(--color-gray-900); overflow-wrap: anywhere; }
.gh-meta { display: block; margin-top: 1px; font-size: 0.75rem; color: var(--color-gray-500); line-height: 1.45; }
.gh-meta a { color: var(--color-primary-dark); font-weight: var(--font-semibold); white-space: nowrap; }
.gh-meta .gh-sep { margin: 0 0.35em; color: var(--color-gray-300, #d4d4d8); }
.gh-more { margin-top: var(--space-4); }
.gh-small { font-size: var(--text-sm); color: var(--color-gray-500) !important; line-height: 1.6 !important; margin-top: var(--space-3) !important; }

/* Closeness badges: the colours of the bands on the map */
.gh-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--radius-full); font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-bold); line-height: 1.4; white-space: nowrap; text-transform: none; }
.gh-b-vclose { background: #bd0026; color: #fff; }
.gh-b-close { background: #fc4e2a; color: #fff; }
.gh-b-moderate { background: #feb24c; color: #7c2d12; }
.gh-b-distant { background: #ffeda0; color: #713f12; border: 1px solid #fde68a; }

/* Method + links */
.gh-method h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); color: inherit; }
.gh-method p { line-height: 1.7; }
.gh-method p + p { margin-top: var(--space-2); }
.gh-links a { font-weight: var(--font-semibold); }

/* FAQ (same look as the Ancient Ancestry Maps and the Population Atlas) */
.gh-faq { margin-bottom: var(--space-6); scroll-margin-top: 96px; }
.gh-faq details { border: 1px solid #e5e7eb; border-radius: var(--radius-lg); margin-bottom: var(--space-3); background: var(--color-white); overflow: hidden; }
.gh-faq summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: var(--font-semibold); color: var(--color-gray-900); list-style: none; }
.gh-faq summary::-webkit-details-marker { display: none; }
.gh-faq summary::before { content: '+'; color: var(--color-primary-dark); font-weight: var(--font-extrabold); margin-right: var(--space-3); }
.gh-faq details[open] summary::before { content: '\2212'; }
.gh-faq details[open] summary { border-bottom: 1px solid var(--color-gray-100); }
.gh-faq details p { padding: var(--space-3) var(--space-5) var(--space-4); margin: 0; color: var(--color-gray-600); line-height: 1.65; font-size: var(--text-sm); }

.gh-upsell .tool-upsell { margin: 0 auto var(--space-6) !important; }

/* Popups and hover labels */
.gh-popup .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; color: var(--color-gray-800); }
.gh-pop strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--color-gray-900); line-height: 1.3; overflow-wrap: anywhere; }
.gh-pop-country { color: var(--color-gray-500); font-size: 12px; }
.gh-pop-val { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; font-weight: var(--font-semibold); }
.gh-pop-val b { font-size: 16px; font-family: var(--font-mono); }
.gh-pop-sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.15); flex-shrink: 0; }
.gh-pop-rank, .gh-pop-hint, .gh-pop-self { margin-top: 4px; font-size: 12px; color: var(--color-gray-500); }
.gh-pop-self { color: #9f1239; font-weight: var(--font-semibold); }
.gh-pop-atlas { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: var(--font-semibold); color: var(--color-primary-dark) !important; }
.gh-pop-atlas:hover { text-decoration: underline; }
.gh-pop-h { margin-top: 8px; font-size: 11px; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-gray-500); }
.gh-pop ul { margin: 2px 0 0; padding-left: 16px; }
.gh-pop-others { max-height: 150px; overflow-y: auto; }
.gh-pop-others li { font-family: var(--font-mono); font-size: 12px; }
.gh-pop-link { padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: 13px; font-weight: var(--font-semibold); color: var(--color-primary-dark); text-align: left; cursor: pointer; }
.gh-pop-link:hover { text-decoration: underline; }
.gh-pop-more { list-style: none; margin-left: -16px; font-family: var(--font-body) !important; color: var(--color-gray-500); }
.leaflet-tooltip.gh-tip { padding: 4px 8px; font-size: 12px; font-weight: var(--font-semibold); color: var(--color-gray-800); border-radius: 6px; }

@media (max-width: 900px) {
    .gh-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 640px) {
    .gh-page .result-card { padding: var(--space-4); }
    .gh-map-card { padding: var(--space-3) !important; }
    .gh-map { height: min(64vh, 460px); min-height: 320px; }
    .gh-controls { width: 100%; justify-content: space-between; }
    .gh-opacity input { width: 72px; }
    /* 16 px stops iOS from zooming into the field on focus */
    .gh-textarea, .gh-pick input { font-size: 16px; }
    .gh-actions .btn { flex: 1 1 auto; }
    .gh-pick-row { flex-basis: 100%; max-width: none; }
    .gh-table th, .gh-table td { padding: var(--space-2); }
    .gh-table td.rank { width: 1.75rem; }
    .gh-legend-bands { font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .gh-hint { display: none; }
}