/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand ExoBridge · redesign: full · scope: app · copy: verbatim · posture: restrained · nav: existing 11 destinations · footer: colophon · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V, retained the established scientific navigation and made the data hierarchy clearer through open tables rather than added decoration. */
/* Hallmark · waive 39b · app screen with native cohort and matrix buttons · entire overlap figures remain clickable as requested; ordinary form controls use a shared 40px height and the breadcrumb button has a 32px target. */
/* Hallmark · finish-review: subagent · 2 resolved, 0 partial, 0 unresolved · Floor 0 FAIL · Reflex 0 open, 39b waived. */
/* Waive app-density: a scientific workbench needs complete metric names and audit context; source facts and nomenclature stay verbatim. */

/* A capped work surface, with the data given the available width. */
.skip-link { position: absolute; left: var(--space-lg); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); font-size: var(--text-sm); white-space: nowrap; }
.skip-link:focus-visible { top: var(--space-xs); outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-3xs); }
body { background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); }
.site { width: calc(100% - var(--gutter) * 2); max-width: var(--container); margin: 0 auto; background: var(--color-paper); color: var(--color-ink); border: 0; box-shadow: none; font-variant-numeric: tabular-nums; }
.site .layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: var(--gap-columns); padding: var(--space-lg) var(--space-lg) var(--space-xl); background: var(--color-paper); align-items: start; }
.site .layout > *, .site #content, .site main, .site .sidebar-disclosure, .site .sidebar-disclosure > aside { min-width: 0; }
.site details:not([open]) > :not(summary) { display: none; }
.site :is(h1, h2, h3, h4) { min-width: 0; overflow-wrap: break-word; font-family: var(--font-display); color: var(--color-ink); letter-spacing: var(--tracking-display); text-wrap: balance; }
.site .layout :is(p, small, label, dt, dd, li, summary, td, th, span, .muted, .analysis-summary, .table-key) { color: var(--color-ink-2); }
.site .layout :is(strong, b) { color: var(--color-ink); }
.site .layout :is(p, li) { line-height: 1.7; }
.site .layout :is(small, .muted, .chart-note, .chart-notes, .chart-methods, .table-key) { font-size: var(--text-xs); color: var(--color-muted); }
.site .layout a { color: var(--color-accent); }
.site .layout :is(button, input, select, textarea) { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink); }
.site .layout :is(td, th, output, progress, .coverage-numbers, .overlap-count, .focus-counts, .public-data-stats, .sample-qc-summary) { font-variant-numeric: tabular-nums; }
.site :is(.home-grid, .chart-grid, .detail-columns, .overlap-analysis-grid, .rna-plot-grid) { gap: var(--space-lg); }

/* Compact identity and a familiar, legible application navigation. */
.site .masthead { height: auto; min-height: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-paper); border: 0; }
.site .masthead .wordmark { font-family: var(--font-display); font-size: var(--wordmark-size); font-weight: 750; letter-spacing: -.045em; line-height: 1.1; }
.site .logo-exo { color: var(--color-brand-blue); } .site .logo-bridge { color: var(--color-brand-teal); }
.site .logo-version { font-size: var(--text-xs); color: var(--color-accent); margin-left: var(--space-2xs); padding-top: var(--space-3xs); }
.site .wordmark small { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0; line-height: 1.4; }
.site .masthead-description { display: block; flex: 1; padding: 0; min-width: 0; line-height: 1.5; }
.site .masthead-description .brand-fullname, .site .masthead-description strong { font-size: var(--text-sm); font-style: normal; font-weight: 500; color: var(--color-ink-2); line-height: 1.6; }
.site .masthead-description .brand-fullname :is(b, .brand-initial) { color: var(--color-ink); font-weight: 700; }
.site .masthead-description > span { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0; }
.site .masthead-vesicles { display: none; }
.site .language-switch, .site .nav-toggle { font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.4; min-height: var(--touch-height); padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-control-border); border-radius: var(--radius-card); color: var(--color-ink); background: var(--color-paper); align-self: center; }
.site .nav-toggle { display: none; }
.site .main-nav { display: flex; flex-wrap: nowrap; align-items: stretch; min-height: var(--nav-height); padding: 0 var(--space-md); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); gap: 0; }
.site .main-nav a, html[lang=en] .site .main-nav a { flex: 1 1 auto; justify-content: center; padding: var(--space-sm) var(--space-xs); gap: var(--space-2xs); border: 0; border-bottom: var(--rule-strong) solid transparent; color: var(--color-ink-2); background: transparent; font-size: var(--text-sm); line-height: 1.5; text-decoration: none; }
.site .main-nav a small { display: none; }
.site .main-nav a:hover { color: var(--color-accent); background: var(--color-paper-2); }
.site .main-nav a.active { color: var(--color-accent); font-weight: 650; background: transparent; border-bottom-color: var(--color-accent); }
.site .status-line { padding: 0 var(--space-lg); background: var(--color-paper); border-bottom: 0; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }
.site .status-line :is(span, button, b) { color: var(--color-muted); font-size: var(--text-xs); }
.site #connection-status { color: var(--color-ink-2); }
.site .status-line button { min-height: 32px; padding-inline: var(--space-2xs); }
.site .status-line i { display: none; }
.site .chart-mode-toolbar { padding: var(--space-2xs) var(--space-lg); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); gap: var(--space-xs); }

/* No stacked title bands: open sections are separated by breathing room. */
.site .layout .box { border: 0; border-radius: 0; background: var(--color-paper); margin-bottom: var(--section-gap); box-shadow: none; }
.site .layout .box:last-child { margin-bottom: 0; }
.site .layout .box-body { padding: var(--space-md) 0 0; background: var(--color-paper); }
.site .layout .box-heading, .site .layout .box-heading.dark { padding: 0 0 var(--space-sm); background: transparent; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-size: var(--text-section); line-height: 1.45; font-weight: 650; gap: var(--space-md); }
.site .layout .box-heading :is(small, button, a) { font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.site .page-title { padding: 0; margin-bottom: var(--space-md); border: 0; font-size: var(--text-display); font-weight: 650; color: var(--color-ink); line-height: 1.35; }
.site .page-title small { color: var(--color-muted); font-size: var(--text-sm); margin-left: var(--space-sm); font-weight: 400; }
.site .page-intro, .site .welcome-copy, .site .help-copy { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.75; }
.site :is(.section-row h2, .overlap-section-title h3, .overlap-cohort-analysis > h3, .focus-matrix-heading h3, .focus-pair-section h3) { font-size: var(--text-section); color: var(--color-ink); }
.site :is(.rna-plot h3, .rna-components-heading, .overlap-analysis-card h4, .sample-qc-panel h3, .evidence-panel h3) { font-size: var(--text-title); color: var(--color-ink); line-height: 1.5; }
.site .layout :is(.rna-section, .rna-plot, .overlap-analysis-card, .focus-metric-picker, .metric-range-filter, .public-catalogue, .evidence-panel, .sample-qc-panel, .qc-local-reference, .qc-experiment-reference) { background: var(--color-paper); border: 0; border-radius: 0; box-shadow: none; }
.site .layout :is(.rna-section, .overlap-analysis-card, .focus-metric-picker, .metric-range-filter, .public-catalogue, .qc-local-reference, .qc-experiment-reference) { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; }
.site .layout .rna-plot { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; margin-bottom: var(--space-md); }
.site .layout :is(.rna-section > summary, .focus-metric-picker > summary, .metric-range-filter > summary, .public-catalogue > summary) { background: transparent; padding: var(--space-xs) 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.site :is(.note-strip, .sidebar-note, .data-snapshot-note) { border: 0; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; background: transparent; color: var(--color-muted); font-size: var(--text-xs); }
.site .layout .brand-name-note { font-size: var(--text-sm); color: var(--color-muted); }

/* Sidebar taxonomy remains available without becoming another panel. */
.site .sidebar-disclosure { border: 0; margin: 0; padding: 0; }
.site .sidebar-disclosure > summary { display: none; }
.site .sidebar-disclosure > aside { display: block; padding-right: var(--space-md); border-right: var(--rule-hair) solid var(--color-rule); }
.site .layout .sidebar-box { margin-bottom: var(--space-lg); }
.site .layout .sidebar-box .box-heading { font-size: var(--text-sm); padding-bottom: var(--space-sm); }
.site .type-tree { padding: var(--space-xs) 0; }
.site .type-tree :is(summary, button), .site :is(.all-types, .sidebar-links, .stat-list > div) { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.site .type-tree summary { padding: var(--space-xs) 0; }
.site .type-tree button { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); gap: var(--space-xs); min-height: var(--touch-height); }
.site .type-tree button span { color: var(--color-muted); font-size: var(--text-xs); flex: 0 0 auto; }
.site .type-tree :is(.subtype-parent, .tissue-parent) { font-weight: 600; }
.site .type-tree :is(.subtype-sites, .tissue-sites) > summary { font-size: var(--text-xs); padding-left: var(--space-xs); }
.site .type-tree :is(.subtype-sites, .tissue-sites) button { padding-left: var(--space-lg); }
.site .type-tree button:hover, .site .type-tree button.active, .site .all-types:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.site .type-tree button.active { box-shadow: inset var(--rule-strong) 0 0 var(--color-accent); }
.site :is(.subtype-tree, .tissue-source-leaves, .all-types) { border-color: var(--color-rule); }
.site .all-types { padding: var(--space-sm) 0; }
.site .sidebar-links { padding: var(--space-sm) 0; gap: var(--space-xs); }
.site .sidebar-links button { color: var(--color-ink-2); text-align: left; padding: var(--space-2xs) 0; font-size: var(--text-sm); }
.site .stat-list { padding: var(--space-xs) 0; }
.site .stat-list dd { color: var(--color-ink); }

/* Form surfaces distinguish the controls from the working data. */
.site .layout :is(.filter-form, .analysis-controls, .evidence-context-form, .public-filter-form, .sample-qc-filters, .rna-controls, .focus-controls) { background: var(--color-paper-2); border: 0; border-radius: var(--radius-card); padding: var(--space-md); gap: var(--space-md); margin-bottom: var(--space-lg); }
.site .layout :is(.filter-form, .public-filter-form, .sample-qc-filters, .focus-controls) label { font-size: var(--text-xs); line-height: 1.5; gap: var(--space-xs); }
.site .layout :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border: var(--rule-hair) solid var(--color-control-border); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-card); font-size: var(--text-sm); line-height: 1.4; min-height: var(--control-height); padding: var(--space-xs) var(--space-sm); min-width: 0; }
.site .layout :is(input, select, textarea):hover { border-color: var(--color-ink-2); }
.site :is(input[type=checkbox], input[type=radio], progress) { accent-color: var(--color-accent); }
.site input::placeholder, .site textarea::placeholder { color: var(--color-muted); opacity: 1; }
.site .filter-actions, .site .public-filter-actions { gap: var(--space-xs); }
.site .metric-range-fields { gap: var(--space-sm); }
.site .layout .metric-range-filter { margin: 0; }
.site .layout details.metric-range-filter { padding: var(--space-xs); background: transparent; }
.site .focus-controls, .site .focus-pair-controls, .site .overlap-pair-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One primary action and one quiet utility treatment, with explicit states. */
.site :is(.btn, .language-switch, .nav-toggle, .page-controls button, .public-pagination button, .evidence-pagination button, .sample-qc-pagination button, .chart-mode-toolbar button, .echarts-figure-tools button, .focus-group-chips button, .public-source-chips button, .overlap-analysis-controls > button, .overlap-degree-tabs button, .overlap-mode-tabs button, .chart-viewer-toolbar button, .chart-viewer-close) { border-radius: var(--radius-card); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.site .layout .btn, .chart-viewer-download { color: var(--color-accent-ink); background: var(--color-accent); border: var(--rule-hair) solid var(--color-accent); padding: var(--space-xs) var(--space-md); min-height: var(--control-height); font-size: var(--text-sm); line-height: 1.4; }
.site .layout .btn:hover, .chart-viewer-download:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-ink); }
.site .layout .btn.light, .site :is(.language-switch, .nav-toggle, .page-controls button, .public-pagination button, .evidence-pagination button, .sample-qc-pagination button, .chart-mode-toolbar button, .echarts-figure-tools button, .focus-group-chips button, .public-source-chips button, .overlap-degree-tabs button, .overlap-mode-tabs button, .overlap-analysis-controls > button, .chart-viewer-toolbar button) { color: var(--color-ink-2); background: var(--color-paper); border: var(--rule-hair) solid var(--color-control-border); padding: var(--space-xs) var(--space-sm); min-height: var(--touch-height); font-size: var(--text-xs); line-height: 1.4; }
.site .layout .btn.light:hover, .site :is(.language-switch, .nav-toggle, .page-controls button, .public-pagination button, .evidence-pagination button, .sample-qc-pagination button, .chart-mode-toolbar button, .echarts-figure-tools button, .focus-group-chips button, .public-source-chips button, .overlap-degree-tabs button, .overlap-mode-tabs button, .overlap-analysis-controls > button, .chart-viewer-toolbar button):hover { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
.site :is(.chart-mode-toolbar button, .echarts-figure-tools button, .overlap-degree-tabs button, .overlap-mode-tabs button, .overlap-analysis-controls > button)[aria-pressed=true], .site :is(.public-pagination button[aria-current=page], .focus-group-chips button[aria-pressed=true], .public-source-chips button.active) { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent); }
.site :is(button, a, input, select, textarea, summary):focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-3xs); }
.site :is(button, .btn):active { transform: translateY(var(--rule-hair)); }
.site :is(button, .btn, input, select, textarea):disabled, .site [aria-disabled=true] { opacity: .48; cursor: not-allowed; box-shadow: none; }
.site [aria-busy=true] { cursor: progress; }
.site .layout :is([role=alert], .rna-form-error, .public-load-error p, .evidence-error) { color: var(--color-error); }
.site :is(.rna-reference-note, .sample-qc-conflict, .evidence-context-note, .evidence-hint-note) { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-soft); }

/* Tabs read as one control, not another row of cards. */
.site .layout :is(.tabs, .rna-tabs, .chart-mode-tabs) { border-color: var(--color-rule); gap: var(--space-xs); margin-bottom: var(--space-md); }
.site .layout :is(.tabs, .rna-tabs, .chart-mode-tabs, .rna-dist-switch) button { border: 0; border-bottom: var(--rule-strong) solid transparent; padding: var(--space-sm) var(--space-xs); color: var(--color-muted); background: transparent; font-size: var(--text-sm); border-radius: 0; min-height: var(--control-height); }
.site .layout :is(.tabs, .rna-tabs, .chart-mode-tabs, .rna-dist-switch) button.active { border-bottom-color: var(--color-accent); background: transparent; color: var(--color-accent); font-weight: 600; }
.site .tabs button.active::after { display: none; }
.site .layout :is(.tabs, .rna-tabs, .chart-mode-tabs, .rna-dist-switch) button:hover { color: var(--color-accent); background: var(--color-paper-2); }

/* Tables carry the scientific detail at a consistent native reading size. */
.site .layout table { font-size: var(--text-sm); line-height: 1.6; }
.site .layout table :is(th, td) { padding: var(--space-sm); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); line-height: 1.6; font-size: var(--text-sm); }
.site .layout table th { background: var(--color-paper-3); color: var(--color-ink); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }
.site .layout table td { background: var(--color-paper); }
.site .layout table tr:nth-child(even) td { background: var(--color-paper-2); }
.site .layout table tbody tr:hover td { background: var(--color-accent-soft); }
.site .layout table td :is(button, a), .site .layout .sort-button { font-size: var(--text-sm); color: var(--color-accent); }
.site .layout table :is(th, td) small { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.site .layout table td .mono { font-family: var(--font-outlier); }
.site .layout .kv td:first-child { background: var(--color-paper-2); color: var(--color-ink-2); }
.site :is(.results-toolbar, .pagination, .public-pagination, .overlap-table-toolbar, .overlap-pagination, .public-results-heading, .sample-qc-pagination) { color: var(--color-muted); font-size: var(--text-xs); gap: var(--space-sm); margin-block: var(--space-md); }
.site .layout :is(.coverage-chip, .status-tag, .source-pill, .overlap-set-label > span) { color: var(--color-accent); background: var(--color-accent-soft); border: 0; border-radius: var(--radius-card); font-size: var(--text-xs); padding: var(--space-3xs) var(--space-xs); }
.site .layout .status-tag.pending, .site .layout .source-pill.limited { color: var(--color-warning); background: var(--color-warning-soft); }
.site :is(.table-wrap, .chart-scroll, .rna-chart-scroll, .focus-matrix-wrap, .focus-pair-figure) { max-width: 100%; min-width: 0; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--color-muted) var(--color-paper-2); }
.site .focus-matrix-wrap { max-height: none; }
.site .focus-pair-figure > .analysis-svg { width: auto; max-width: none; height: auto; }
.site .focus-scroll-hint { display: none; }
.site .overlap-combinations .chart-scroll > .overlap-svg-single { min-width: 330px; }

/* Shared coverage has one visible hierarchy: overall scope, then overlap. */
.site .overlap-summary-line { font-size: var(--text-sm); gap: var(--space-lg); margin-bottom: var(--space-md); }
.site .overlap-summary-line strong { font-size: var(--text-title); }
.site .overlap-headlines { gap: 0; margin-bottom: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); }
.site .layout .overlap-summary-card { border: 0; border-right: var(--rule-hair) solid var(--color-rule); border-radius: 0; padding: var(--space-md); background: transparent; text-align: left; }
.site .layout .overlap-summary-card:last-child { border-right: 0; }
.site .layout .overlap-summary-card span { color: var(--color-muted); font-size: var(--text-xs); }
.site .layout .overlap-summary-card strong { font-size: var(--text-3xl); color: var(--color-ink); margin-top: var(--space-xs); }
.site .layout .overlap-summary-card.active { box-shadow: inset 0 calc(var(--rule-strong) * -1) 0 var(--color-accent); background: var(--color-accent-soft); }
.site .layout .overlap-summary-card:hover { background: var(--color-paper-2); }
.site .overlap-caption, .site .overlap-method { font-size: var(--text-xs); color: var(--color-muted); }
.site .overlap-combinations { border-color: var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-lg); }
.site .overlap-selection { border: 0; border-left: var(--rule-strong) solid var(--color-accent); background: var(--color-accent-soft); padding: var(--space-sm) var(--space-md); }
.site .overlap-count { color: var(--color-accent); font-size: var(--text-sm); padding: var(--space-sm); text-decoration-color: var(--color-control-border); }
.site .layout .overlap-matrix .overlap-count { color: var(--color-ink); }
.site .overlap-matrix :is(th, td) { border: var(--rule-hair) solid var(--color-rule); text-align: center; }
.site .overlap-matrix td.overlap-tone-0 { background: var(--color-paper-2) !important; }
.site .overlap-matrix td.overlap-tone-1 { background: var(--color-chart-blue-1) !important; }
.site .overlap-matrix td.overlap-tone-2 { background: var(--color-chart-blue-2) !important; }
.site .overlap-matrix td.overlap-tone-3 { background: var(--color-chart-blue-3) !important; }
.site .overlap-matrix td.overlap-tone-4 { background: var(--color-chart-blue-4) !important; }
.site .overlap-matrix td.overlap-tone-5 { background: var(--color-chart-blue-5) !important; }
.site .focus-subtitle { font-size: var(--text-title); letter-spacing: 0; margin-bottom: var(--space-md); }
.site .focus-counts { font-size: var(--text-sm); gap: var(--space-lg); margin-bottom: var(--space-md); }
.site .focus-counts strong { font-size: var(--text-2xl); color: var(--color-ink); }
.site .focus-metric-grid { padding: var(--space-sm) 0; gap: var(--space-sm) var(--space-md); }
.site .focus-metric-grid label { font-size: var(--text-sm); }
.site .focus-matrix-heading { gap: var(--space-xs) var(--space-md); }
.site .focus-matrix-heading > span { font-size: var(--text-xs); color: var(--color-muted); }
.site .layout .focus-heatmap :is(th, td) { border: var(--rule-hair) solid var(--color-rule); }
.site .layout .focus-heatmap th { padding: var(--space-sm) var(--space-xs); font-size: var(--text-sm); line-height: 1.5; }
.site .layout .focus-heatmap td { padding: 0; }
.site .layout .focus-heatmap td strong { font-size: var(--text-title); color: var(--color-ink); }
.site .layout .focus-heatmap td small { font-size: var(--text-xs) !important; color: var(--color-ink-2); }
.site .layout .focus-heatmap td small, .site .layout .focus-heatmap .focus-diagonal small { color: var(--color-ink); }
.site .focus-heatmap thead { top: var(--rule-hair); }
.site .focus-heatmap td button { color: var(--color-ink); }
.site .focus-heatmap button:hover { box-shadow: inset 0 0 0 var(--rule-strong) var(--color-accent); }
.site .focus-heatmap td.focus-selected-cell { outline-color: var(--color-focus); }
.site .focus-pair-stats, .site .overlap-paired-stats { background: var(--color-paper-2); border: 0; border-block: var(--rule-hair) solid var(--color-rule); padding: var(--space-md); gap: var(--space-md); }
.site .focus-pair-stats :is(b, strong) { font-size: var(--text-sm); }
.site .focus-pair-section, .site .focus-comparison, .site .focus-method { border-color: var(--color-rule); }

/* Home uses the existing specimen icons, without decorative containers. */
.site .type-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-lg) var(--space-sm); padding: var(--space-md) 0; }
.site .type-tile { border: 0; border-radius: var(--radius-card); padding: var(--space-sm) var(--space-2xs); gap: var(--space-xs); background: var(--color-paper); }
.site .type-tile:hover { background: var(--color-paper-2); }
.site .type-tile .sample-type-icon { width: var(--icon-size); height: var(--icon-size); margin-bottom: var(--space-2xs); }
.site .type-tile strong { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: normal; }
.site .type-tile small { color: var(--color-muted); font-size: var(--text-xs); }
.site .type-tile:hover .sample-type-icon { transform: none; }
.site .coverage-numbers { background: var(--color-paper); border-color: var(--color-rule); padding: var(--space-md) 0; }
.site .coverage-numbers strong { color: var(--color-ink); font-size: var(--text-2xl); }
.site :is(.coverage-bars, .method-bars) { padding: var(--space-md) 0; gap: var(--space-md); }
.site .type-grid-foot { padding: var(--space-sm) 0; font-size: var(--text-xs); }
.site .feature-lines { gap: var(--space-sm) var(--space-md); border-color: var(--color-rule); padding-top: var(--space-md); }
.site .feature-lines span { font-size: var(--text-sm); }
.site .feature-lines b { background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-card); }

/* Public data shares the same controls and units, retaining its source context. */
.site .layout :is(.public-data-stats, .evidence-summary, .sample-qc-summary, .qc-browser-summary, .sample-qc-counts, .evidence-local-counts, .public-stats) { background: var(--color-paper); border: 0; border-block: var(--rule-hair) solid var(--color-rule); gap: 0; }
.site .layout :is(.public-data-stats, .qc-browser-summary, .public-stats) > div { padding: var(--space-md); border-color: var(--color-rule); }
.site .layout :is(.public-data-stats, .qc-browser-summary, .sample-qc-counts, .public-stats) strong { color: var(--color-ink); font-size: var(--text-2xl); font-weight: 600; }
.site .layout :is(.sample-qc-counts, .evidence-local-counts) > div { border: 0; border-right: var(--rule-hair) solid var(--color-rule); background: transparent; padding: var(--space-sm); }
.site .layout :is(.sample-qc-counts, .evidence-local-counts) > div:last-child { border-right: 0; }
.site .layout :is(.public-group-heading, .evidence-heading, .sample-qc-heading) { background: transparent; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; }
.site .public-group-heading h2, .site .evidence-heading h2 { color: var(--color-ink); font-size: var(--text-section); }
.site .public-group-heading p { font-size: var(--text-xs); color: var(--color-muted); }
.site .public-detail-panel { border-left-color: var(--color-rule); background: var(--color-paper-2); }
.site .public-detail-fields, .site .public-detail-fields dt, .site .public-detail-fields dd { font-size: var(--text-sm); }
.site .public-detail-fields > div { border-color: var(--color-rule); padding-block: var(--space-sm); }
.site .sample-qc-panel[data-qc-browser] .box-body { padding-inline: 0; }
.site .sample-qc-panel[data-qc-browser] .qc-browser-section { margin-block: var(--section-gap); }
.site .sample-qc-panel[data-qc-browser] .qc-browser-section .box-heading { font-size: var(--text-section); }
.site .sample-qc-panel[data-qc-browser] .qc-browser-section .box-body { padding: var(--space-md) 0; }
.site .sample-qc-panel[data-qc-browser] .qc-detail-row > td:first-child { background: var(--color-paper-2); }
.site .sample-qc-panel :is(.sample-qc-note, .sample-qc-distribution-note, .sample-qc-context, .qc-stat-caption, .qc-granularity) { font-size: var(--text-xs); color: var(--color-muted); }

/* Field disclosure and analysis notes use the same functional reading size. */
.site .layout :is(.field-picker, .field-options label, .preset-row button, .metric-picker label, .association-form label, .rna-controls label, .rna-tabs button, .rna-dist-switch button, .focus-group-chips button, .focus-metric-grid label > span > small:last-child, .rna-summary, .rna-small, .rna-valid-count, .analysis-summary, .focus-method, .stat-details) { font-size: var(--text-xs); }
.site .layout .field-picker { background: var(--color-paper); border: 0; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; }
.site .layout :is(.field-picker, .source-context) > summary { font-size: var(--text-xs); color: var(--color-ink-2); }
.site .layout .field-picker p { font-size: var(--text-xs); }
.site .layout .preset-row button { color: var(--color-ink-2); background: var(--color-paper); border-color: var(--color-control-border); border-radius: var(--radius-card); padding: var(--space-xs) var(--space-sm); }
.site .layout .preset-row button:hover { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
.site .association-statistics { border: 0; border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.site .association-statistics > div { border-color: var(--color-rule); }
.site .association-statistics :is(strong, span) { font-size: var(--text-xs); }

/* Colophon and modal retain their native semantics and scrolling behavior. */
.site .footer { margin-inline: var(--space-lg); padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-muted); font-size: var(--text-xs); }
.site .footer :is(strong, p, span) { color: var(--color-muted); font-size: var(--text-xs); }
.chart-viewer { width: calc(100% - var(--space-lg)); border-color: var(--color-control-border); background: var(--color-paper); border-radius: var(--radius-card); box-shadow: none; }
.chart-viewer::backdrop { background: var(--color-overlay); }
:is(.chart-viewer-heading, .chart-viewer-toolbar) { background: var(--color-paper); border-color: var(--color-rule); padding: var(--space-sm) var(--space-md); }
.chart-viewer-heading h2 { color: var(--color-ink); font-size: var(--text-section); }
.chart-viewer-stage { background: var(--color-paper-3); padding: var(--space-lg); }
.chart-viewer-surface, .site .echarts-host { background: var(--color-paper); box-shadow: none; }
.chart-viewer-close { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-control-border); }
.site svg text { fill: var(--color-ink-2); }
/* The figure viewer lives beside .site and uses the same control states. */
.chart-viewer { font-family: var(--font-body); color: var(--color-ink); }
.chart-viewer-toolbar button, .chart-viewer-close { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink-2); background: var(--color-paper); border: var(--rule-hair) solid var(--color-control-border); border-radius: var(--radius-card); padding: var(--space-xs) var(--space-sm); min-height: var(--touch-height); }
.chart-viewer-toolbar button:hover, .chart-viewer-close:hover { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
.chart-viewer-toolbar .chart-viewer-download { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); margin-left: auto; }
.chart-viewer-toolbar .chart-viewer-download:hover { color: var(--color-accent-ink); background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.chart-viewer :is(button, a):focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-3xs); }
.chart-viewer button:disabled { opacity: .48; cursor: not-allowed; }
.chart-viewer-status { font-size: var(--text-xs); color: var(--color-error); }
.chart-viewer-toolbar output { font-size: var(--text-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
/* SVG and ECharts axis geometry is intentionally retained; enlarged views use their native metric labels. */

@media (max-width: 1200px) {
  .site .layout { grid-template-columns: calc(var(--sidebar-width) - var(--space-lg)) minmax(0, 1fr); }
  .site .main-nav a, html[lang=en] .site .main-nav a { font-size: var(--text-xs); padding-inline: var(--space-2xs); }
  .site .masthead-description .brand-fullname { font-size: var(--text-xs); }
  .site .type-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .site { width: calc(100% - var(--gutter)); margin-block: var(--space-sm); }
  .site .masthead { flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); }
  .site .masthead .wordmark { flex: 1; }
  .site .masthead-description { order: 4; flex: 1 0 100%; }
  .site .masthead-description .brand-fullname { font-size: var(--text-sm); }
  .site .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site .main-nav { display: none; overflow: visible; min-height: 0; padding: var(--space-xs) var(--space-md); }
  .site .main-nav[data-expanded=true] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .main-nav a, html[lang=en] .site .main-nav a { justify-content: flex-start; font-size: var(--text-sm); padding: var(--space-sm); white-space: nowrap; }
  .site .status-line { padding-inline: var(--space-md); }
  .site .layout { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); gap: var(--space-lg); }
  .site .sidebar-disclosure { border-block: var(--rule-hair) solid var(--color-rule); }
  .site .sidebar-disclosure > summary { display: list-item; padding: var(--space-sm) 0; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
  .site .sidebar-disclosure > aside { display: block; border: 0; padding: var(--space-sm) 0; }
  .site .sidebar-disclosure:not([open]) > aside { display: none; }
  .site .sidebar-disclosure[open] .type-tree { max-height: 50dvh; overflow: auto; }
  .site .layout > aside { display: block; }
  .site .filter-form, html[lang=en] .site .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site :is(.home-grid, .chart-grid, .detail-columns, .overlap-analysis-grid) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .site .focus-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .page-title small { display: block; margin: var(--space-xs) 0 0; }
}
@media (max-width: 600px) {
  .site { width: 100%; margin: 0; }
  .site .masthead .wordmark { font-size: var(--wordmark-mobile); }
  .site .main-nav[data-expanded=true] { grid-template-columns: minmax(0, 1fr); }
  .site .masthead-description .brand-fullname { font-size: var(--text-xs); }
  .site .masthead-description > span { font-size: var(--text-xs); }
  .site .status-line { flex-wrap: wrap; gap: var(--space-2xs); }
  .site .page-title { font-size: var(--text-2xl); }
  .site .focus-scroll-hint { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-block: var(--space-xs); }
  .site .layout :is(.filter-form, .public-filter-form, .sample-qc-filters, .focus-controls, .focus-pair-controls, .overlap-pair-controls) { grid-template-columns: minmax(0, 1fr); }
  .site .filter-form label.wide, .site .sample-qc-panel[data-qc-browser] .qc-search { grid-column: 1 / -1; }
  .site .filter-actions { justify-content: flex-start; }
  .site .focus-metric-grid { grid-template-columns: minmax(0, 1fr); }
  .site .overlap-headlines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .layout .overlap-summary-card { padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .site .layout .overlap-summary-card:nth-child(2) { border-right: 0; }
  .site .layout .overlap-summary-card:nth-last-child(-n+2) { border-bottom: 0; }
  .site .overlap-summary-line { gap: var(--space-xs) var(--space-lg); }
  .site .type-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-xs); }
  .site .type-tile .sample-type-icon { width: var(--icon-mobile); height: var(--icon-mobile); }
  .site .type-tile strong { font-size: var(--text-xs); }
  .site .feature-lines { grid-template-columns: minmax(0, 1fr); }
  .site .focus-pair-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .chart-mode-toolbar { justify-content: flex-start; padding-inline: var(--space-md); }
  .chart-viewer { inset: var(--space-2xs); width: calc(100% - var(--space-xs)); }
  .chart-viewer-stage { padding: var(--space-md) var(--space-xs); }
  .site .footer { margin-inline: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}