:root {
    color-scheme: light;
    --bg: oklch(1 0 0);
    --surface: oklch(0.97 0.006 60);
    --surface-strong: oklch(0.935 0.012 60);
    --ink: oklch(0.20 0.020 55);
    --muted: oklch(0.44 0.025 55);
    --border: oklch(0.88 0.012 60);
    --border-strong: oklch(0.72 0.025 60);
    --primary: oklch(0.62 0.15 58);
    --primary-dark: oklch(0.42 0.12 55);
    --berry: oklch(0.36 0.13 18);
    --berry-soft: oklch(0.94 0.035 18);
    --success: oklch(0.48 0.11 145);
    --success-soft: oklch(0.95 0.035 145);
    --warning: oklch(0.68 0.14 75);
    --warning-soft: oklch(0.95 0.045 75);
    --error: oklch(0.48 0.16 25);
    --error-soft: oklch(0.95 0.035 25);
    --focus: oklch(0.53 0.15 255);
    --font-ui: "Times New Roman", Times, "Nimbus Roman", "Liberation Serif", serif;
    --font-mono: "Cascadia Mono", Consolas, monospace;
    --content-width: 1440px;
    --text-caption: 0.875rem;
    --text-small: 0.95rem;
    --text-body: 1rem;
    --text-ui: 1rem;
    --text-subheading: 1.125rem;
}

.analysis-qc-notes { margin-block-start: 1.5rem; border-top: 1px solid var(--border); padding-block-start: 1rem; color: var(--ink); }
.analysis-qc-notes summary { cursor: pointer; font-weight: 700; padding-block: .5rem; }
.analysis-qc-notes summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.analysis-qc-notes dt { font-weight: 700; margin-block-start: 1rem; overflow-wrap: anywhere; }
.analysis-qc-notes dd { margin: .3rem 0 0; max-width: 75ch; overflow-wrap: anywhere; }

/* Persistent Strawberry AI launcher. The assistant stays available without
   competing with scientific content or primary navigation. */
.ai-dock {
    position: fixed;
    right: 22px;
    top: clamp(104px, 15vh, 138px);
    z-index: 45;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-sans, Arial, sans-serif);
}

.ai-dock-trigger {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 6px;
    border: 1px solid var(--berry);
    border-radius: 9px;
    background: var(--berry);
    color: var(--bg);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1;
    transition: background-color 180ms ease-out, border-color 180ms ease-out;
}

.ai-dock.is-open .ai-dock-trigger {
    display: none;
}

.ai-dock-trigger:hover,
.ai-dock-trigger[aria-expanded="true"] {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}

.ai-dock-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 6px;
    background: var(--bg);
    color: var(--berry);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.ai-dock-panel {
    width: min(390px, calc(100vw - 28px));
    height: min(540px, calc(100dvh - 44px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
}

.ai-dock-panel[hidden] {
    display: none;
}

.ai-dock-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px 15px;
    border-bottom: 1px solid var(--border);
}

.ai-dock-head h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-sans, Arial, sans-serif);
    font-size: 0.98rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ai-dock-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.ai-dock-close {
    width: 30px;
    min-height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.ai-dock-close:hover {
    background: var(--surface);
    color: var(--ink);
}

.ai-dock-thread {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ai-dock-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
}

.ai-dock-message.user {
    flex-direction: row-reverse;
}

.ai-dock-avatar {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    border-radius: 6px;
    background: var(--berry);
    color: var(--bg);
    font-size: 0.62rem;
    font-weight: 800;
}

.ai-dock-message.user .ai-dock-avatar {
    background: var(--surface);
    color: var(--ink);
}

.ai-dock-bubble {
    max-width: calc(100% - 40px);
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.ai-dock-message.user .ai-dock-bubble {
    background: var(--warning-soft);
}

.ai-dock-message.pending .ai-dock-bubble {
    color: var(--muted);
}

.ai-dock-message.failed .ai-dock-bubble {
    background: color-mix(in srgb, var(--warning-soft), white 42%);
    color: var(--primary-dark);
}

.ai-dock-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
}

.ai-dock-sources a {
    color: var(--berry);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ai-dock-shortened {
    margin: 9px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.ai-dock-prompts {
    display: grid;
    gap: 7px;
    margin: 4px 0 0 38px;
}

.ai-dock-prompts button {
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.73rem;
    line-height: 1.3;
    text-align: left;
}

.ai-dock-prompts button:hover {
    border-color: var(--berry);
    color: var(--berry);
}

.ai-dock-form {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.ai-dock-form textarea {
    width: 100%;
    min-height: 64px;
    max-height: 118px;
    display: block;
    resize: vertical;
    padding: 9px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.4;
}

.ai-dock-form textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

.ai-dock-form textarea:disabled {
    background: var(--surface);
    cursor: wait;
}

.ai-dock-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.ai-dock-status {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.3;
}

.ai-dock-send {
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--berry);
    border-radius: 7px;
    background: var(--berry);
    color: var(--bg);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 750;
}

.ai-dock-send:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}

.ai-dock-send:disabled {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--muted);
    cursor: wait;
}

.ai-dock-footer {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 9px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.68rem;
}

.ai-dock-footer span:first-child {
    color: var(--muted);
}

.ai-dock-footer a {
    color: var(--berry);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.ai-dock-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .ai-dock {
        right: 12px;
        top: 218px;
    }

    .ai-dock-panel {
        width: min(362px, calc(100vw - 24px));
        height: min(520px, calc(100dvh - 230px));
    }

    .ai-dock-trigger {
        width: 46px;
        padding: 6px;
    }

    .ai-dock-trigger-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ai-dock-head,
    .ai-dock-thread,
    .ai-dock-form {
        padding-inline: 14px;
    }

    .ai-dock-footer {
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-dock-trigger {
        transition: none;
    }
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 106.25%;
    line-height: 1.6;
    font-kerning: normal;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    font-size: var(--text-body);
}

a {
    color: var(--berry);
}

a:hover {
    color: var(--primary-dark);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

button,
input,
select {
    font: inherit;
}

/* Scientific names are italic wherever they appear. */
i,
em,
.sci,
.scientific {
    font-style: italic;
}

/* <option> cannot hold markup, so species dropdowns are italicised as a whole. */
select.species-options option {
    font-style: italic;
}

select.species-options option[value=""] {
    font-style: normal;
}

select.species-options optgroup {
    font-style: normal;
}

button,
.button,
input,
select {
    min-height: 42px;
    border-radius: 8px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    width: min(calc(100% - 40px), var(--content-width));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
}

.brand:hover {
    color: var(--ink);
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--berry);
    color: var(--bg);
    font-weight: 800;
    font-size: 1.1rem;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-size: 0.96rem;
}

.brand small {
    color: var(--muted);
    font-size: 0.75rem;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.primary-nav a {
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 650;
    font-size: 0.9rem;
    text-decoration: none;
}

.primary-nav a:hover {
    background: var(--surface);
    color: var(--ink);
}

.primary-nav a.active {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.home-main,
.downloads-main {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 0 auto;
}

.home-main {
    padding: 72px 0 64px;
}

.home-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
    gap: clamp(36px, 6vw, 90px);
    align-items: start;
}

.context-line {
    margin: 0 0 14px;
    color: var(--berry);
    font-size: 0.86rem;
    font-weight: 750;
}

.home-copy h1,
.page-heading h1 {
    margin: 0;
    max-width: 22ch;
    font-size: 2.55rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.home-copy > p:not(.context-line),
.page-heading > div > p:not(.context-line) {
    max-width: 72ch;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 1.03rem;
    text-wrap: pretty;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

/* Evidence-led breeding-gene shortlist on the home page. */
.gene-priority-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.gene-priority-list li {
    display: grid;
    grid-template-columns: 44px minmax(175px, 0.7fr) minmax(280px, 1.45fr) minmax(190px, 0.75fr);
    gap: 18px;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid var(--border);
    transition: background-color 160ms ease-out;
}

.gene-priority-list li:hover {
    background: var(--surface);
}

.gene-rank {
    color: var(--berry);
    font-size: 0.86rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gene-priority-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gene-priority-main strong {
    font-family: var(--font-mono);
    font-size: 0.93rem;
    overflow-wrap: anywhere;
}

.gene-priority-main span {
    color: var(--muted);
    font-size: 0.82rem;
}

.gene-priority-list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.48;
}

.gene-priority-list a {
    color: var(--berry);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.gene-priority-list a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Breeding evidence page: ranked loci and regulatory networks. */
.breeding-evidence-page {
    padding-bottom: 68px;
}

.ranking-method {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 32px 64px;
    align-items: end;
    padding: 26px 0 30px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ranking-method .eyebrow {
    color: var(--berry);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ranking-method h2 {
    max-width: 22ch;
    margin: 8px 0 0;
    font-size: 1.32rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.ranking-method .method-summary {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}

.breeding-feature {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    margin-top: 24px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--berry);
    background: var(--surface);
}

.feature-rank {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 28px 22px;
    border-right: 1px solid var(--border);
}

.feature-rank span {
    color: var(--berry);
    font-size: 2.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.feature-rank small {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.feature-content {
    min-width: 0;
    padding: 28px 32px 30px;
}

.evidence-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.evidence-labels span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.feature-content h3 {
    max-width: 31ch;
    margin: 15px 0 10px;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.feature-summary {
    max-width: 88ch;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.64;
}

.network-node-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.network-node-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: baseline;
}

.network-node-heading span {
    font-size: 0.94rem;
    font-weight: 800;
}

.network-node-heading small {
    color: var(--muted);
    font-size: 0.86rem;
}

.network-nodes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.network-nodes a {
    min-width: 0;
    padding: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 160ms ease-out, color 160ms ease-out;
}

.network-nodes a + a {
    border-left: 1px solid var(--border);
}

.network-nodes a:hover {
    background: color-mix(in oklch, var(--primary) 12%, var(--bg));
    color: var(--primary-dark);
}

.network-nodes strong,
.network-nodes code {
    display: block;
    overflow-wrap: anywhere;
}

.network-nodes strong {
    font-size: 0.94rem;
}

.network-nodes code {
    margin-top: 5px;
    color: var(--berry);
    font-size: 0.78rem;
}

.feature-footer {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-top: 24px;
}

.feature-footer p {
    max-width: 78ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.feature-footer p strong {
    color: var(--ink);
}

.primary-study-link {
    flex: 0 0 auto;
    color: var(--berry);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.primary-study-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.evidence-rank-list {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.evidence-rank-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(210px, 0.36fr);
    gap: 20px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    transition: background-color 160ms ease-out;
}

.evidence-rank-item:hover {
    background: var(--surface);
}

.evidence-rank-item .gene-rank {
    padding-top: 3px;
}

.evidence-entry-main {
    min-width: 0;
}

.evidence-entry-title {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    align-items: baseline;
}

.evidence-entry-title strong {
    font-family: var(--font-mono);
    font-size: 1.04rem;
    overflow-wrap: anywhere;
}

.evidence-entry-title span {
    color: var(--berry);
    font-size: 0.9rem;
    font-weight: 700;
}

.evidence-entry-main .evidence-labels {
    margin-top: 9px;
}

.evidence-entry-main p {
    max-width: 86ch;
    margin: 11px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.52;
}

.entry-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.entry-links > a {
    color: var(--berry);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: none;
}

.entry-links > a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.entry-links .gene-search-link {
    display: block;
    padding-left: 10px;
    border-left: 2px solid var(--primary);
}

.gene-search-link span,
.gene-search-link code {
    display: block;
}

.gene-search-link code {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.evidence-caveat {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 28px;
    margin-top: 34px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.evidence-caveat h2,
.evidence-caveat p {
    margin: 0;
}

.evidence-caveat h2 {
    font-size: 1rem;
}

.evidence-caveat p {
    max-width: 94ch;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 0;
    font-weight: 720;
    font-size: var(--text-ui);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}

.button:hover {
    transform: translateY(-1px);
}

.button.primary {
    background: var(--primary);
    color: var(--bg);
}

.button.primary:hover {
    background: var(--primary-dark);
    color: var(--bg);
}

.button.secondary {
    background: var(--surface-strong);
    color: var(--ink);
}

.button.secondary:hover,
.button.quiet:hover {
    background: var(--border);
    color: var(--ink);
}

.button.quiet {
    align-self: end;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.release-scope {
    padding: 24px 0 4px 26px;
    border-top: 3px solid var(--primary);
}

.release-scope h2,
.principles h2,
.catalog-toolbar h2,
.transfer-note h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}

.release-scope ol {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.release-scope li {
    padding: 13px 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.release-scope li span {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 750;
}

.principles {
    margin-top: 82px;
    padding: 32px 0;
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.4fr);
    gap: 48px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.principles p,
.principles dd,
.transfer-note p {
    color: var(--muted);
}

.principles p {
    max-width: 55ch;
}

.principles dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.principles dt {
    font-weight: 780;
}

.principles dd {
    margin: 6px 0 0;
    font-size: 0.9rem;
}

.downloads-main {
    padding: 52px 0 60px;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
}

.page-heading h1 {
    font-size: 2.15rem;
}

.catalog-panel {
    margin-top: 38px;
}

.catalog-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
}

.filter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: end;
    gap: 10px;
}

.filter-fields label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

input,
select {
    min-width: 180px;
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

input[type="search"] {
    min-width: min(310px, 70vw);
}

input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.type-strip {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 0 0 15px;
    scrollbar-width: thin;
}

.type-filter {
    min-height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
}

.type-filter strong {
    color: var(--ink);
    font-size: 0.75rem;
}

.type-filter:hover,
.type-filter.active {
    border-color: var(--primary);
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.catalog-status {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 0.84rem;
}

.catalog-status p {
    margin: 0;
}

.warning-panel {
    margin: 6px 0 16px;
    padding: 13px 15px;
    border-radius: 8px;
    background: var(--warning-soft);
    color: var(--primary-dark);
    font-size: 0.86rem;
}

.warning-panel ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.resource-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.resource-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.resource-table th,
.resource-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.resource-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 780;
}

.resource-table tbody tr:last-child td {
    border-bottom: 0;
}

.resource-table tbody tr:hover {
    background: var(--surface);
}

.resource-name-cell {
    min-width: 300px;
}

.resource-name-cell strong,
.resource-name-cell code {
    display: block;
}

.resource-name-cell code {
    max-width: 48ch;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 720;
    white-space: nowrap;
}

.type-genome,
.type-cds,
.type-protein {
    background: var(--success-soft);
    color: var(--success);
}

.type-variant,
.type-reads {
    background: var(--berry-soft);
    color: var(--berry);
}

.compression {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.7rem;
}

.numeric-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.action-cell {
    text-align: right !important;
}

.download-link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--berry);
    color: var(--bg);
    font-weight: 720;
    text-decoration: none;
}

.download-link:hover {
    background: var(--primary-dark);
    color: var(--bg);
}

.unavailable {
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.catalog-empty,
.catalog-error {
    padding: 44px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
}

.catalog-error {
    background: var(--error-soft);
}

.catalog-empty h3,
.catalog-error h3 {
    margin: 0;
}

.catalog-empty p,
.catalog-error p {
    max-width: 65ch;
    margin: 9px auto 20px;
    color: var(--muted);
}

.skeleton-row span {
    display: inline-block;
    width: 24%;
    height: 13px;
    margin-right: 5%;
    border-radius: 4px;
    background: var(--surface-strong);
    animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes skeleton-pulse {
    from { opacity: 0.52; }
    to { opacity: 1; }
}

.transfer-note {
    max-width: 78ch;
    margin-top: 38px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
}

.noscript-note {
    padding: 12px;
    background: var(--warning-soft);
}

.site-footer {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 0 auto;
    padding: 22px 0 28px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.78rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .ranking-method {
        grid-template-columns: 1fr;
    }

    .network-nodes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .network-nodes a + a {
        border-left: 0;
    }

    .network-nodes a:nth-child(even) {
        border-left: 1px solid var(--border);
    }

    .network-nodes a:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .evidence-rank-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px 14px;
    }

    .entry-links {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 18px;
    }

    .gene-priority-list li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 7px 14px;
    }

    .gene-priority-list p,
    .gene-priority-list a {
        grid-column: 2;
    }

    .home-intro,
    .principles {
        grid-template-columns: 1fr;
    }

    .principles dl {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .catalog-toolbar {
        align-items: start;
        flex-direction: column;
    }

    .filter-fields {
        width: 100%;
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .breeding-feature {
        grid-template-columns: 1fr;
    }

    .feature-rank {
        flex-direction: row;
        align-items: baseline;
        padding: 18px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .feature-content {
        padding: 22px 20px 24px;
    }

    .network-node-heading,
    .feature-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .network-nodes {
        grid-template-columns: 1fr;
    }

    .network-nodes a:nth-child(even) {
        border-left: 0;
    }

    .network-nodes a:nth-child(n + 2) {
        border-top: 1px solid var(--border);
    }

    .evidence-caveat {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .gene-priority-list li {
        padding: 15px 0;
    }

    .header-inner,
    .home-main,
    .downloads-main,
    .site-footer {
        width: min(calc(100% - 24px), var(--content-width));
    }

    .header-inner {
        padding: 10px 0;
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    .primary-nav {
        width: 100%;
        overflow-x: auto;
    }

    .home-main {
        padding-top: 44px;
    }

    .home-copy h1,
    .page-heading h1 {
        font-size: 2rem;
    }

    .page-heading,
    .catalog-status,
    .site-footer {
        align-items: start;
        flex-direction: column;
    }

    .filter-fields,
    .filter-fields label,
    input,
    input[type="search"],
    select,
    .filter-fields .button {
        width: 100%;
        min-width: 0;
    }

}

/* Fvb1 graph-site evidence -------------------------------------------------- */

.pangenome-site-evidence {
    padding: 22px 24px 20px;
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--berry);
    background: var(--bg);
    scroll-margin-top: 132px;
}

.pangenome-inline-state {
    padding: 18px 0 4px;
    color: var(--muted);
    font-size: var(--text-small);
}

.pangenome-evidence-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 8px 0 22px;
    border-block: 1px solid var(--border);
}

.pangenome-evidence-facts div {
    min-width: 0;
    padding: 14px 16px;
    border-left: 1px solid var(--border);
}

.pangenome-evidence-facts div:first-child {
    padding-left: 0;
    border-left: 0;
}

.pangenome-evidence-facts dt {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 750;
}

.pangenome-evidence-facts dd {
    margin: 3px 0 0;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 780;
}

.pangenome-evidence-facts small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.68rem;
}

.pangenome-site-map-panel {
    margin-bottom: 18px;
}

.pangenome-site-map-panel .pangenome-subheading > div > p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-site-map {
    display: grid;
    grid-template-columns: repeat(48, minmax(4px, 1fr));
    align-items: end;
    height: 112px;
    gap: 2px;
    padding-top: 8px;
    border-bottom: 1px solid var(--border-strong);
}

.pangenome-site-bin {
    position: relative;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pangenome-site-bin > span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 3px;
    background: oklch(0.62 0.12 145);
}

.pangenome-site-bin:hover > span,
.pangenome-site-bin.selected > span {
    background: var(--berry);
}

.pangenome-site-bin.selected::after {
    position: absolute;
    inset: -4px -2px;
    border: 1px solid var(--berry);
    content: "";
}

.pangenome-site-bin:focus-visible {
    z-index: 1;
    outline: 3px solid oklch(0.68 0.14 28 / 0.3);
    outline-offset: 2px;
}

.pangenome-site-map-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.pangenome-site-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(175px, 0.75fr)) auto;
    gap: 10px;
    align-items: end;
    margin: 20px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pangenome-site-filters label > span {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-caption);
    font-weight: 750;
}

.pangenome-site-filters input,
.pangenome-site-filters select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.pangenome-site-filters input {
    padding: 8px 10px;
}

.pangenome-site-filters select {
    padding: 8px 30px 8px 10px;
}

.pangenome-site-filters .button {
    min-height: 40px;
}

.pangenome-site-table {
    min-width: 1180px;
}

.pangenome-site-table code {
    display: inline-block;
    max-width: 230px;
    overflow-wrap: normal;
    user-select: all;
}

.pangenome-muted {
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-call.supported {
    background: oklch(0.95 0.035 145);
    color: oklch(0.36 0.08 145);
}

.pangenome-call.unresolved {
    background: oklch(0.96 0.018 60);
    color: var(--muted);
}

.pangenome-site-detail {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--ink);
    scroll-margin-top: 132px;
}

.pangenome-site-detail h3,
.pangenome-site-detail h4 {
    margin: 0;
}

.pangenome-site-detail h4 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.pangenome-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pangenome-carrier-table {
    min-width: 1060px;
}

.pangenome-interpretation-note {
    max-width: 92ch;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: var(--text-caption);
    line-height: 1.55;
}

@media (max-width: 1050px) {
    .pangenome-site-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pangenome-site-filters .pangenome-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .pangenome-site-evidence {
        padding: 18px 14px 16px;
    }

    .pangenome-evidence-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pangenome-evidence-facts div,
    .pangenome-evidence-facts div:first-child {
        padding: 12px 10px;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .pangenome-site-map {
        min-width: 620px;
    }

    .pangenome-site-map-panel {
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* Fvb1 publication-style binned evidence tracks. */
.pangenome-page .pangenome-site-map .density-row-frame {
    fill: oklch(0.975 0.004 245);
    stroke: oklch(0.86 0.012 245);
    stroke-width: 0.8;
}

.pangenome-page .pangenome-site-map .density-cell {
    shape-rendering: crispEdges;
}

.pangenome-page .pangenome-site-map .density-cell.candidates {
    fill: oklch(0.36 0.035 245);
}

.pangenome-page .pangenome-site-map .density-cell.pairwise {
    fill: oklch(0.49 0.16 25);
}

.pangenome-page .pangenome-site-map .density-cell.genes {
    fill: oklch(0.47 0.10 210);
}

.pangenome-page .pangenome-site-map .density-cell.reference-te {
    fill: oklch(0.58 0.13 72);
}

.pangenome-page .pangenome-site-map .density-cell.carrier-te {
    fill: oklch(0.47 0.10 128);
}

.pangenome-page .pangenome-site-map .density-cell.zero {
    fill: oklch(0.965 0.004 245);
    fill-opacity: 1;
}

.pangenome-page .pangenome-site-map .density-track-label,
.pangenome-page .pangenome-site-map .density-chromosome-label {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 600;
}

.pangenome-page .pangenome-site-map .density-track-maximum,
.pangenome-page .pangenome-site-map .density-axis-label,
.pangenome-page .pangenome-site-map .density-scale-note {
    fill: var(--muted);
    font-size: 10px;
}

.pangenome-page .pangenome-site-map .density-axis-tick {
    stroke: oklch(0.82 0.012 245);
    stroke-width: 0.8;
}

.pangenome-page .pangenome-site-map .density-chromosome {
    fill: oklch(0.78 0.015 245);
}

/* Pangenome SV/TE workbench ------------------------------------------------- */

.pangenome-view-tabs {
    display: flex;
    gap: 26px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--border-strong);
}

.pangenome-view-tabs button {
    position: relative;
    min-height: 48px;
    padding: 0 1px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.pangenome-view-tabs button[aria-selected="true"] {
    color: var(--ink);
}

.pangenome-view-tabs button[aria-selected="true"]::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: oklch(0.48 0.12 25);
    content: "";
}

.pangenome-view-tabs button:focus-visible {
    outline: 2px solid oklch(0.56 0.14 25 / 0.55);
    outline-offset: 4px;
}

.pangenome-tab-panel[hidden] {
    display: none;
}

.pangenome-tab-panel > .pangenome-section:first-child {
    margin-top: 24px;
}

.pangenome-site-evidence,
.pangenome-catalog,
.pangenome-overview {
    padding-top: 0;
    border-top: 0;
}

.pangenome-jbrowse-workbench {
    margin-top: 18px;
    border-top: 1px solid var(--border);
}

.pangenome-jbrowse-heading {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 16px 0 10px;
}

.pangenome-jbrowse-heading h3,
.pangenome-jbrowse-heading p {
    margin: 0;
}

.pangenome-jbrowse-heading h3 {
    font-size: 0.98rem;
}

.pangenome-jbrowse-heading p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.77rem;
}

.pangenome-jbrowse-controls {
    display: grid;
    grid-template-columns: auto minmax(250px, 430px) auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: oklch(0.965 0.008 55);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.pangenome-jbrowse-controls label {
    font-size: 0.76rem;
}

.pangenome-jbrowse-controls input {
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    background: white;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.79rem;
}

.pangenome-jbrowse-controls .button {
    min-height: 34px;
    padding: 5px 14px;
}

.pangenome-jbrowse-frame-wrap {
    height: min(610px, 68vh);
    min-height: 500px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: white;
}

.pangenome-jbrowse-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.pangenome-track-key {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.72rem;
}

.pangenome-track-key span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.pangenome-track-key i {
    width: 18px;
    height: 4px;
}

.pangenome-track-key .genes { background: oklch(0.52 0.09 210); }
.pangenome-track-key .te { background: oklch(0.61 0.13 65); }
.pangenome-track-key .candidate { background: oklch(0.48 0.13 25); }

.pangenome-site-map-panel {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pangenome-site-map {
    min-height: 0;
    height: auto;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.pangenome-site-map svg {
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto;
}

.pangenome-site-map-panel:has(.pangenome-site-map svg) .pangenome-site-map {
    overflow-x: auto;
}

.pangenome-site-map .landscape-baseline {
    stroke: oklch(0.79 0.015 55);
    stroke-width: 1;
}

.pangenome-site-map .landscape-area {
    stroke-width: 1.35;
    stroke-linejoin: round;
}

.pangenome-site-map .landscape-area.candidates {
    fill: oklch(0.45 0.025 245 / 0.18);
    stroke: oklch(0.38 0.03 245);
}

.pangenome-site-map .landscape-area.pairwise {
    fill: oklch(0.55 0.14 25 / 0.17);
    stroke: oklch(0.49 0.15 25);
}

.pangenome-site-map .landscape-area.genes {
    fill: oklch(0.54 0.08 210 / 0.16);
    stroke: oklch(0.47 0.10 210);
}

.pangenome-site-map .landscape-area.te {
    fill: oklch(0.66 0.13 66 / 0.19);
    stroke: oklch(0.57 0.14 66);
}

.pangenome-site-map .landscape-label,
.pangenome-site-map .landscape-axis {
    fill: var(--muted);
    font-size: 11px;
}

.pangenome-site-bin {
    cursor: pointer;
}

.pangenome-site-bin rect {
    fill: transparent;
    stroke: transparent;
}

.pangenome-site-bin:hover rect,
.pangenome-site-bin:focus-visible rect {
    fill: oklch(0.50 0.04 245 / 0.07);
}

.pangenome-site-bin.selected rect {
    fill: oklch(0.54 0.14 25 / 0.08);
    stroke: oklch(0.50 0.14 25);
    stroke-width: 1.1;
}

.pangenome-secondary-tool {
    padding: 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}

.pangenome-secondary-tool > summary {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 2px;
    cursor: pointer;
    list-style: none;
}

.pangenome-secondary-tool > summary::-webkit-details-marker {
    display: none;
}

.pangenome-secondary-tool > summary::before {
    margin-right: -8px;
    color: var(--muted);
    content: "+";
    font-size: 1.2rem;
}

.pangenome-secondary-tool[open] > summary::before {
    content: "−";
}

.pangenome-secondary-tool > summary span:first-of-type {
    display: grid;
    gap: 3px;
    margin-right: auto;
}

.pangenome-secondary-tool > summary small,
.pangenome-secondary-tool > summary span:last-child {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 400;
}

.pangenome-secondary-tool-body {
    padding: 0 0 20px;
}

.pangenome-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
}

.pangenome-sampling-diagnostics {
    margin-top: 24px;
    border-top: 1px solid var(--border);
}

.pangenome-sampling-diagnostics > summary {
    padding: 13px 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
}

.pangenome-sampling-diagnostics .pangenome-addition-figure {
    max-width: 850px;
    margin: 4px 0 20px;
}

.pangenome-matrix-cell.copy-0,
.pangenome-copy-legend .copy-0 {
    background: oklch(0.965 0.008 245);
    color: oklch(0.62 0.025 245);
}

.pangenome-matrix-cell.copy-1,
.pangenome-copy-legend .copy-1 {
    background: oklch(0.93 0.025 235);
    color: oklch(0.35 0.06 235);
}

.pangenome-matrix-cell.copy-2,
.pangenome-copy-legend .copy-2 {
    background: oklch(0.84 0.055 235);
    color: oklch(0.30 0.07 235);
}

.pangenome-matrix-cell.copy-5,
.pangenome-copy-legend .copy-5 {
    background: oklch(0.69 0.08 235);
    color: oklch(0.22 0.05 235);
}

.pangenome-matrix-cell.copy-10,
.pangenome-copy-legend .copy-10 {
    background: oklch(0.48 0.08 235);
    color: white;
}

.pangenome-phylogeny-figure {
    max-width: 980px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pangenome-phylogeny-figure > p {
    max-width: 760px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.pangenome-phylogeny-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.pangenome-phylogeny-figure .phylogeny-branch,
.pangenome-phylogeny-figure .phylogeny-scale {
    stroke: oklch(0.31 0.025 245);
    stroke-width: 1.6;
}

.pangenome-phylogeny-figure .phylogeny-taxon {
    fill: var(--ink);
    font-size: 14px;
}

.pangenome-phylogeny-figure .phylogeny-support,
.pangenome-phylogeny-figure .phylogeny-scale-label {
    fill: var(--muted);
    font-size: 10px;
}

@media (max-width: 760px) {
    .pangenome-view-tabs {
        gap: 18px;
        overflow-x: auto;
    }

    .pangenome-view-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .pangenome-jbrowse-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pangenome-jbrowse-controls {
        grid-template-columns: 1fr auto;
    }

    .pangenome-jbrowse-controls label {
        grid-column: 1 / -1;
    }

    .pangenome-jbrowse-frame-wrap {
        height: 540px;
        min-height: 480px;
    }

    .pangenome-secondary-tool > summary {
        align-items: flex-start;
    }

    .pangenome-secondary-tool > summary span:last-child {
        display: none;
    }
}

@media (max-width: 480px) {
    .pangenome-site-filters,
    .pangenome-evidence-facts {
        grid-template-columns: 1fr;
    }

    .pangenome-site-filters .pangenome-search-field {
        grid-column: auto;
    }

    .pangenome-site-filters .button,
    .pangenome-detail-actions .button {
        width: 100%;
    }

    .pangenome-detail-actions {
        width: 100%;
    }
}

/* F. vesca multi-tissue expression atlas */
.expression-page {
    display: grid;
    gap: 22px;
}

.expression-heading {
    align-items: flex-end;
}

.expression-heading > div {
    max-width: 820px;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--primary-dark);
    font-size: var(--text-small);
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.expression-dataset {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.expression-dataset > div {
    min-width: 0;
    padding: 17px 20px;
    border-right: 1px solid var(--border);
}

.expression-dataset > div:last-child {
    border-right: 0;
}

.expression-dataset span,
.expression-stats span {
    display: block;
    color: var(--muted);
    font-size: var(--text-small);
}

.expression-dataset strong {
    display: block;
    margin-top: 2px;
    font-size: var(--text-subheading);
    line-height: 1.35;
}

.expression-search {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(420px, 1.3fr);
    gap: 16px 34px;
    align-items: end;
    padding: 24px 26px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg);
}

.expression-search-copy h2,
.expression-search-copy p,
.expression-form label {
    margin: 0;
}

.expression-search-copy p {
    color: var(--muted);
}

.expression-search code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.expression-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.expression-input-row {
    display: flex;
    gap: 10px;
}

.expression-input-row input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-mono);
}

.expression-input-row input:hover {
    border-color: var(--primary);
}

.expression-search .gene-status {
    grid-column: 1 / -1;
    margin: -4px 0 0;
}

.expression-result-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.expression-result-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 24px 26px;
    border-bottom: 1px solid var(--border);
}

.expression-result-head h2,
.expression-result-head p {
    margin: 0;
}

.expression-result-head h2 {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    overflow-wrap: anywhere;
}

.expression-result-head > div > p:last-child {
    margin-top: 3px;
    color: var(--muted);
}

.expression-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.expression-stats > div {
    padding: 18px 26px;
    border-right: 1px solid var(--border);
}

.expression-stats > div:last-child {
    border-right: 0;
}

.expression-stats strong {
    display: block;
    margin-top: 3px;
    font-size: 1.3rem;
    line-height: 1.35;
}

.expression-stats small {
    color: var(--muted);
}

.expression-chart-section,
.expression-table-section,
.expression-samples {
    padding: 25px 26px;
    border-bottom: 1px solid var(--border);
}

.expression-samples {
    border-bottom: 0;
}

.expression-section-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
}

.expression-section-head h3,
.expression-section-head p,
.expression-table-section h3 {
    margin: 0;
}

.expression-section-head p {
    color: var(--muted);
    font-size: var(--text-small);
}

.metric-toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.metric-toggle button {
    min-height: 34px;
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.metric-toggle button:hover {
    color: var(--ink);
}

.metric-toggle button[aria-pressed="true"] {
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 12%, transparent);
}

.expression-bars {
    display: grid;
    gap: 10px;
}

.expression-bar-row {
    display: grid;
    grid-template-columns: 112px minmax(120px, 1fr) 92px;
    gap: 13px;
    align-items: center;
}

.expression-bar-label {
    font-weight: 700;
}

.expression-bar-track {
    height: 18px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--surface-strong);
}

.expression-bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--berry);
    transition: width 200ms ease-out;
}

.expression-bar-row strong,
.expression-table td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

.expression-bar-row strong {
    text-align: right;
}

.expression-table-section h3 {
    margin-bottom: 14px;
}

.expression-table th:not(:first-child),
.expression-table td:not(:first-child) {
    text-align: right;
}

.expression-sample-group {
    border-top: 1px solid var(--border);
}

.expression-sample-group:last-child {
    border-bottom: 1px solid var(--border);
}

.expression-sample-group summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 9px 4px;
    cursor: pointer;
}

.expression-sample-group summary span {
    font-weight: 700;
}

.expression-sample-group summary small {
    color: var(--muted);
}

.expression-sample-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 0 0 16px 22px;
}

.expression-sample-grid > div {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.expression-sample-grid span,
.expression-sample-grid small {
    display: block;
    color: var(--muted);
    font-size: var(--text-caption);
}

.expression-sample-grid strong {
    display: inline-block;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

.expression-source {
    display: grid;
    grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
    gap: 28px;
    padding: 24px 26px;
    border-left: 4px solid var(--primary);
    background: var(--surface);
}

.expression-source h2,
.expression-source p {
    margin-top: 0;
}

.expression-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 12px 0;
}

.expression-note {
    margin-bottom: 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.expression-empty {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
}

.expression-empty h2,
.expression-empty p {
    margin: 0 0 6px;
}

.expression-empty button {
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--berry);
    font-family: var(--font-mono);
    text-decoration: underline;
    cursor: pointer;
}

.expression-skeleton {
    display: grid;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.expression-skeleton span {
    width: 100%;
    height: 42px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-strong) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: expression-loading 1.2s ease-in-out infinite;
}

.expression-skeleton span:nth-child(2) {
    width: 72%;
}

.expression-skeleton span:nth-child(3) {
    width: 88%;
}

@keyframes expression-loading {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .expression-bar-track span,
    .expression-skeleton span {
        transition: none;
        animation: none;
    }
}

/* User manual */
.manual-heading {
    align-items: flex-start;
}

.manual-heading > div {
    max-width: 76ch;
}

.manual-updated {
    margin-top: 8px !important;
    color: var(--muted);
    font-size: var(--text-small);
}

.manual-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.manual-sidebar {
    position: sticky;
    top: 92px;
    padding: 16px 0;
    border-top: 2px solid var(--berry);
    border-bottom: 1px solid var(--border);
}

.manual-sidebar p {
    margin: 0 0 9px;
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 780;
}

.manual-sidebar ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manual-sidebar a {
    display: block;
    padding: 7px 8px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
}

.manual-sidebar a:hover {
    background: var(--surface);
    color: var(--berry);
}

.manual-sidebar a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
}

.manual-content {
    min-width: 0;
}

.manual-section {
    padding: 34px 0 8px;
    scroll-margin-top: 88px;
}

.manual-section:first-child {
    padding-top: 0;
}

.manual-section + .manual-section {
    margin-top: 28px;
    border-top: 1px solid var(--border);
}

.manual-section > h2 {
    margin: 0 0 16px;
    color: var(--primary-dark);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.manual-section > p,
.manual-topic > p,
.manual-tool-table p,
.manual-support p {
    max-width: 75ch;
    color: var(--muted);
    line-height: 1.65;
    text-wrap: pretty;
}

.manual-note {
    max-width: 75ch;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    line-height: 1.55;
}

.manual-note strong {
    color: var(--ink);
}

.manual-paths {
    margin-top: 26px;
    border-top: 1px solid var(--border);
}

.manual-paths > div {
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(260px, 1.5fr) auto;
    gap: 22px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.manual-paths span,
.manual-tool-table a {
    color: var(--ink);
    font-weight: 760;
}

.manual-tool-name {
    display: grid;
    gap: 7px;
    justify-items: start;
}

.manual-status {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.3;
}

.manual-status.available {
    background: var(--success-soft);
    color: var(--success);
}

.manual-status.partial {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.manual-status.unavailable {
    background: var(--surface-strong);
    color: var(--muted);
}

.manual-paths p,
.manual-tool-table p {
    margin: 0;
}

.manual-paths a,
.manual-topic > div > a,
.manual-link-group a {
    font-size: 0.9rem;
    font-weight: 720;
    white-space: nowrap;
}

.manual-steps {
    max-width: 75ch;
    display: grid;
    gap: 11px;
    margin: 0;
    padding-left: 24px;
    color: var(--muted);
    line-height: 1.6;
}

.manual-steps.compact {
    gap: 6px;
}

.manual-steps li::marker {
    color: var(--berry);
    font-weight: 760;
}

.manual-steps strong {
    color: var(--ink);
}

.manual-related {
    margin-top: 18px;
    font-size: 0.9rem;
}

.manual-topic {
    padding: 19px 0;
    border-top: 1px solid var(--border);
}

.manual-topic:last-child {
    border-bottom: 1px solid var(--border);
}

.manual-topic > div {
    display: flex;
    gap: 18px;
    align-items: baseline;
    justify-content: space-between;
}

.manual-topic h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.02rem;
    text-wrap: balance;
}

.manual-topic > p,
.manual-topic > .manual-steps {
    margin-top: 9px;
}

.manual-link-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
}

.manual-tool-table {
    border-top: 1px solid var(--border);
}

.manual-tool-table > div {
    display: grid;
    grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1.6fr);
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.manual-evidence-list {
    max-width: 75ch;
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.6;
}

.manual-support {
    max-width: 75ch;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.manual-support p {
    margin: 5px 0 0;
}

@media (max-width: 860px) {
    .manual-layout {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .manual-sidebar {
        position: static;
    }

    .manual-sidebar ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .manual-paths > div,
    .manual-tool-table > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .manual-topic > div,
    .manual-support {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Tools directory and Primer3 workbench ------------------------------------ */

.tools-page,
.primer-page {
    padding-top: 34px;
    padding-bottom: 70px;
}

.tools-kicker {
    margin: 0 0 6px;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.tools-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(420px, 1.3fr);
    gap: 50px;
    align-items: end;
    padding: 26px 0 32px;
    border-bottom: 2px solid var(--berry);
}

.tools-hero h1,
.tools-hero p {
    margin-top: 0;
    margin-bottom: 0;
}

.tools-hero h1 {
    font-size: 3rem;
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.tools-hero > p {
    max-width: 74ch;
    color: var(--muted);
}

.tools-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 42px;
    align-items: end;
    padding: 38px 0;
    border-bottom: 1px solid var(--border);
}

.tools-feature > div:first-child {
    min-width: 0;
}

.tools-number {
    position: absolute;
    top: 2px;
    left: 0;
    color: var(--border-strong);
    font: 700 1rem/1 var(--font-mono);
}

.tools-category,
.tools-feature h2,
.tools-feature p {
    margin: 0;
}

.tools-category {
    color: var(--berry);
    font-size: var(--text-caption);
    font-weight: 760;
}

.tools-feature h2 {
    margin-top: 2px;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

.tools-feature p:not(.tools-category) {
    max-width: 77ch;
    margin-top: 8px;
    color: var(--muted);
}

.tools-feature-action {
    display: grid;
    justify-items: end;
    gap: 9px;
}

.tools-feature-buttons {
    display: flex;
    gap: 9px;
}

.tools-feature-action .button,
.tools-feature-buttons .button {
    align-self: auto;
}

.tools-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-dark);
    font-size: var(--text-caption);
    font-weight: 700;
}

.tools-status::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning);
    content: "";
}

.tools-status.ready {
    color: var(--success);
}

.tools-status.ready::before {
    background: var(--success);
}

.tools-index {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: 60px;
    padding-top: 42px;
}

.tools-index-heading h2,
.tools-index-heading p {
    margin: 0;
}

.tools-index-heading h2 {
    font-size: 1.35rem;
}

.tools-index-heading p {
    margin-top: 7px;
    color: var(--muted);
}

.tools-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
}

.tools-groups h3 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-strong);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tools-groups a {
    display: grid;
    grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
}

.tools-groups a:hover strong {
    color: var(--berry);
}

.tools-groups strong,
.tools-groups span {
    font-size: var(--text-caption);
}

.tools-groups span {
    color: var(--muted);
}

.primer-breadcrumb {
    display: flex;
    gap: 8px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.primer-breadcrumb a {
    text-decoration: none;
}

.primer-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 26px 0 24px;
    border-bottom: 2px solid var(--berry);
}

.primer-hero h1,
.primer-hero p {
    margin: 0;
}

.primer-hero h1 {
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.primer-hero > div:first-child > p:last-child {
    max-width: 76ch;
    margin-top: 8px;
    color: var(--muted);
}

.primer-engine-status {
    max-width: 350px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0 10px 16px;
    border-left: 1px solid var(--border-strong);
}

.primer-engine-stack {
    display: grid;
    gap: 2px;
}

.primer-engine-stack .primer-engine-status {
    min-width: 255px;
}

.primer-engine-status span,
.primer-engine-status strong,
.primer-engine-status small {
    display: block;
}

.primer-engine-status strong {
    font-size: var(--text-small);
}

.primer-engine-status small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.primer-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--warning);
}

.primer-engine-status.ready .primer-status-dot {
    background: var(--success);
}

.primer-workbench,
.primer-results {
    margin-top: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.primer-panel-heading {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.primer-panel-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.primer-panel-heading h2,
.primer-panel-heading p {
    margin: 0;
}

.primer-panel-heading h2 {
    font-size: 1.1rem;
}

.primer-panel-heading p {
    color: var(--muted);
    font-size: var(--text-caption);
}

.primer-step {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--berry);
    color: var(--bg);
    font: 750 0.78rem/1 var(--font-mono);
}

.primer-workbench form {
    padding: 24px 26px 0;
}

.primer-source {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.primer-source legend {
    margin-bottom: 6px;
    font-size: var(--text-caption);
    font-weight: 740;
}

.primer-segmented {
    width: fit-content;
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.primer-segmented label {
    cursor: pointer;
}

.primer-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.primer-segmented span {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 6px;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 700;
}

.primer-segmented input:checked + span {
    background: var(--bg);
    color: var(--berry);
    box-shadow: 0 1px 3px oklch(0.15 0.02 55 / 0.14);
}

.primer-segmented input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.primer-source-panel {
    padding: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.primer-source-panel[hidden] {
    display: none;
}

.primer-field > span,
.primer-range-field > span,
.primer-triple-field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: var(--text-caption);
    font-weight: 740;
}

.primer-field span small,
.primer-range-field span small,
.primer-triple-field span small {
    color: var(--muted);
    font-weight: 500;
}

.primer-field input,
.primer-field select,
.primer-field textarea,
.primer-range-field input,
.primer-triple-field input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
}

.primer-field input,
.primer-field select,
.primer-range-field input,
.primer-triple-field input {
    padding: 7px 10px;
}

.primer-field textarea {
    min-height: 158px;
    padding: 10px 12px;
    resize: vertical;
    font: 0.85rem/1.5 var(--font-mono);
}

.primer-field input:hover,
.primer-field select:hover,
.primer-field textarea:hover,
.primer-range-field input:hover,
.primer-triple-field input:hover {
    border-color: var(--primary);
}

.primer-inline-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr);
    gap: 15px;
    align-items: end;
    margin-top: 13px;
}

.primer-inline-row .button {
    align-self: auto;
}

.primer-gene-grid,
.primer-settings-grid,
.primer-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.primer-field-wide {
    grid-column: 1 / -1;
}

.primer-source-note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: var(--text-caption);
}

.primer-settings-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 22px;
}

.primer-range-field > div,
.primer-triple-field > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.primer-range-field > div > span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: var(--text-caption);
}

.primer-advanced {
    margin-top: 20px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.primer-advanced summary {
    padding: 12px 0;
    color: var(--berry);
    cursor: pointer;
    font-size: var(--text-caption);
    font-weight: 740;
}

.primer-advanced-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px 0 15px;
}

.primer-triple-field > small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.primer-advanced > p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.78rem;
}

.primer-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin: 0 -26px;
    padding: 16px 26px;
    background: var(--surface);
}

.primer-submit-row p {
    max-width: 72ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.primer-submit-row > div,
.primer-downloads {
    display: flex;
    gap: 9px;
}

.primer-submit-row .button,
.primer-downloads .button {
    align-self: auto;
}

.primer-message {
    margin: 0;
    padding: 12px 26px;
    border-top: 1px solid var(--border);
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.primer-message.error {
    background: var(--error-soft);
    color: var(--error);
}

.primer-empty {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 26px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.primer-empty-mark {
    color: var(--border-strong);
    font: 700 1rem/1 var(--font-mono);
    letter-spacing: 0.05em;
}

.primer-empty h2,
.primer-empty p {
    margin: 0;
}

.primer-empty h2 {
    font-size: 1.05rem;
}

.primer-empty p {
    color: var(--muted);
    font-size: var(--text-caption);
}

.primer-evidence-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--warning-soft);
}

.primer-evidence-note span {
    color: var(--primary-dark);
    font-size: var(--text-caption);
    font-weight: 800;
}

.primer-evidence-note p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.primer-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.primer-summary div {
    min-width: 0;
    padding: 13px 16px;
    border-right: 1px solid var(--border);
}

.primer-summary div:last-child {
    border-right: 0;
}

.primer-summary dt {
    color: var(--muted);
    font-size: 0.72rem;
}

.primer-summary dd {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.primer-table-wrap {
    overflow-x: auto;
}

.primer-table {
    width: 100%;
    min-width: 1240px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.primer-table th,
.primer-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.primer-table thead th {
    background: var(--bg);
    color: var(--muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.primer-table tbody tr:hover {
    background: var(--surface);
}

.primer-direction {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--berry-soft);
    color: var(--berry);
    font: 750 0.7rem/1 var(--font-mono);
}

.primer-direction.reverse {
    background: var(--success-soft);
    color: var(--success);
}

.primer-sequence-cell {
    min-width: 280px;
}

.primer-sequence-cell code {
    color: var(--ink);
    font: 0.77rem/1.4 var(--font-mono);
}

.primer-sequence-cell button,
.primer-amplicon button {
    min-height: 28px;
    margin-left: 8px;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.primer-no-pairs {
    height: 120px;
    color: var(--muted);
    text-align: center !important;
}

.primer-specificity-action {
    min-width: 112px;
}

.primer-specificity-action .button {
    width: 100%;
    min-height: 34px;
    padding: 5px 10px;
    white-space: nowrap;
}

.primer-specificity-action .button[aria-pressed="true"] {
    border-color: var(--berry);
    background: var(--berry-soft);
    color: var(--berry);
}

.primer-pair-details {
    padding: 16px 20px 0;
}

.primer-pair-details > details,
.primer-explain {
    border-bottom: 1px solid var(--border);
}

.primer-pair-details summary,
.primer-explain summary {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    color: var(--ink);
    cursor: pointer;
    font-size: var(--text-caption);
    font-weight: 740;
}

.primer-pair-details summary span:last-child {
    color: var(--muted);
    font-weight: 500;
}

.primer-pair-body {
    padding: 2px 0 17px;
}

.primer-pair-body dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 13px;
}

.primer-pair-body dl div {
    padding-right: 14px;
}

.primer-pair-body dt {
    color: var(--muted);
    font-size: 0.72rem;
}

.primer-pair-body dd {
    margin: 1px 0 0;
    font-size: 0.86rem;
    font-weight: 700;
}

.primer-amplicon {
    padding: 11px 13px;
    background: var(--surface);
}

.primer-amplicon > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.primer-amplicon strong {
    font-size: 0.78rem;
}

.primer-amplicon code {
    display: block;
    max-height: 170px;
    margin-top: 7px;
    overflow: auto;
    color: var(--muted);
    font: 0.75rem/1.55 var(--font-mono);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.primer-explain {
    margin: 0 20px 18px;
}

.primer-explain > div {
    padding: 0 0 12px;
}

.primer-explain p {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    margin: 5px 0;
    color: var(--muted);
    font: 0.75rem/1.45 var(--font-mono);
}

.primer-explain strong {
    color: var(--ink);
    text-transform: capitalize;
}

/* Deterministic sequence processing ---------------------------------------- */

.sequence-page {
    padding-top: 34px;
    padding-bottom: 70px;
}

.sequence-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 26px 0 24px;
    border-bottom: 2px solid var(--berry);
}

.sequence-hero h1,
.sequence-hero p {
    margin: 0;
}

.sequence-hero h1 {
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.sequence-hero > div:first-child p {
    max-width: 74ch;
    margin-top: 8px;
    color: var(--muted);
}

.sequence-service-status {
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0 10px 16px;
    border-left: 1px solid var(--border-strong);
}

.sequence-service-status span,
.sequence-service-status strong,
.sequence-service-status small {
    display: block;
}

.sequence-service-status strong {
    font-size: var(--text-small);
}

.sequence-service-status small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.sequence-service-status.ready .primer-status-dot {
    background: var(--success);
}

.sequence-workbench,
.sequence-results {
    margin-top: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.sequence-panel-heading {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.sequence-panel-heading h2,
.sequence-panel-heading p {
    margin: 0;
}

.sequence-panel-heading h2 {
    font-size: 1.1rem;
}

.sequence-panel-heading p {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.sequence-workbench form {
    padding: 24px 26px 0;
}

.sequence-field > span {
    display: block;
    margin-bottom: 5px;
    font-size: var(--text-caption);
    font-weight: 740;
}

.sequence-field > span small,
.sequence-check small {
    color: var(--muted);
    font-weight: 500;
}

.sequence-field input,
.sequence-field select,
.sequence-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
}

.sequence-field input,
.sequence-field select {
    padding: 7px 10px;
}

.sequence-field textarea {
    min-height: 172px;
    padding: 11px 12px;
    resize: vertical;
    font: 0.85rem/1.55 var(--font-mono);
}

.sequence-field input:hover,
.sequence-field select:hover,
.sequence-field textarea:hover {
    border-color: var(--primary);
}

.sequence-field.disabled {
    opacity: 0.55;
}

.sequence-options {
    display: grid;
    grid-template-columns: minmax(210px, 1.3fr) repeat(2, minmax(170px, 0.8fr)) minmax(190px, 0.9fr);
    gap: 16px;
    align-items: end;
    margin-top: 18px;
}

.sequence-check {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--text-caption);
    font-weight: 700;
    white-space: nowrap;
}

.sequence-check input {
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: var(--berry);
}

.sequence-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 20px -26px 0;
    padding: 16px 26px;
    background: var(--surface);
}

.sequence-actions > div,
.sequence-downloads {
    display: flex;
    gap: 9px;
}

.sequence-actions .button,
.sequence-downloads .button {
    align-self: auto;
}

.sequence-empty {
    min-height: 150px;
    display: grid;
    grid-template-columns: auto minmax(0, 680px);
    gap: 22px;
    place-content: center;
    margin-top: 26px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.sequence-empty strong,
.sequence-empty p {
    margin: 0;
}

.sequence-empty p {
    color: var(--muted);
}

.sequence-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.sequence-summary div {
    min-width: 0;
    padding: 13px 15px;
    border-right: 1px solid var(--border);
}

.sequence-summary div:last-child {
    border-right: 0;
}

.sequence-summary dt {
    color: var(--muted);
    font-size: 0.72rem;
}

.sequence-summary dd {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sequence-caveats {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--warning-soft);
}

.sequence-caveats p {
    margin: 3px 0;
    color: var(--primary-dark);
    font-size: 0.78rem;
}

.sequence-outputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}

.sequence-output-block {
    min-width: 0;
    background: var(--bg);
}

.sequence-output-block header {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--surface);
}

.sequence-output-block strong {
    font-size: 0.82rem;
}

.sequence-output-block button,
.sequence-protein-cell button {
    min-height: 28px;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.sequence-output-block > code {
    min-height: 112px;
    max-height: 200px;
    display: block;
    padding: 13px 15px;
    overflow: auto;
    color: var(--ink);
    font: 0.76rem/1.55 var(--font-mono);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.sequence-data-section {
    border-bottom: 1px solid var(--border);
}

.sequence-data-section > header {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 11px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.sequence-data-section h3,
.sequence-data-section p {
    margin: 0;
}

.sequence-data-section h3 {
    font-size: 1rem;
}

.sequence-data-section p {
    color: var(--muted);
    font-size: 0.76rem;
}

.sequence-table-wrap {
    overflow-x: auto;
}

.sequence-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.sequence-composition-table {
    min-width: 420px;
}

.sequence-table th,
.sequence-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.sequence-table thead th {
    color: var(--muted);
    font-size: 0.72rem;
}

.sequence-table tbody tr:hover {
    background: var(--surface);
}

.sequence-protein-cell {
    min-width: 360px;
}

.sequence-protein-cell code {
    font: 0.75rem/1.45 var(--font-mono);
}

.sequence-more {
    border-bottom: 1px solid var(--border);
}

.sequence-more > summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 720;
}

.sequence-more[open] > summary {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* NCBI ORFfinder ---------------------------------------------------------- */

.orf-options {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(145px, 0.8fr)) minmax(180px, 0.9fr);
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.orf-evidence {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--success-soft);
}

.orf-evidence strong {
    font-size: 0.86rem;
}

.orf-evidence span {
    color: var(--muted);
    font-size: 0.82rem;
}

.orf-table {
    min-width: 920px;
}

.orf-table th,
.orf-table td {
    vertical-align: middle;
}

.orf-table tbody th {
    white-space: nowrap;
}

.orf-strand {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    margin-right: 7px;
    border-radius: 50%;
    font-weight: 800;
}

.orf-strand.plus {
    background: var(--berry-soft);
    color: var(--berry);
}

.orf-strand.minus {
    background: var(--success-soft);
    color: var(--success);
}

.orf-partial {
    display: block;
    margin-top: 2px;
    color: var(--warning);
    font-size: 0.72rem;
    font-weight: 650;
}

.orf-protein-cell {
    min-width: 330px;
}

.orf-protein-cell code {
    font: 0.76rem/1.45 var(--font-mono);
}

.orf-protein-cell button {
    min-height: 28px;
    margin-left: 10px;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
}

.orf-empty-result {
    padding: 30px 18px !important;
    color: var(--muted);
    text-align: center !important;
}

/* Whole-genome primer specificity ----------------------------------------- */

.specificity-primer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.specificity-primer-grid input {
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.specificity-options {
    display: grid;
    grid-template-columns: minmax(300px, 1.5fr) minmax(230px, 0.8fr) minmax(150px, 0.45fr);
    gap: 18px;
    align-items: end;
    margin-top: 20px;
}

.specificity-fixed-value {
    min-height: 42px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-caption);
    font-weight: 650;
}

.specificity-fixed-value[hidden] {
    display: none;
}

.sequence-field > .specificity-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.specificity-range b {
    color: var(--muted);
    font-weight: 500;
}

.specificity-verdict {
    display: flex;
    align-items: baseline;
    gap: 13px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--warning-soft);
}

.specificity-verdict.single_product {
    background: var(--success-soft);
}

.specificity-verdict.no_product {
    background: var(--surface);
}

.specificity-verdict strong {
    font-size: 1rem;
}

.specificity-verdict span {
    color: var(--muted);
    font-size: 0.84rem;
}

.specificity-summary {
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
}

.specificity-table {
    min-width: 920px;
}

.specificity-table code {
    color: var(--ink);
    font-family: var(--font-mono);
}

.specificity-orientation {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--berry-soft);
    color: var(--berry);
    font-weight: 800;
}

.specificity-orientation.reverse {
    background: var(--success-soft);
    color: var(--success);
}

.specificity-caveat {
    margin: 0;
    padding: 12px 18px;
    color: var(--muted);
    font-size: 0.8rem;
}

/* Exact-assembly batch retrieval ------------------------------------------ */

.batch-page {
    padding-top: 34px;
    padding-bottom: 70px;
}

.batch-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 26px 0 24px;
    border-bottom: 2px solid var(--berry);
}

.batch-hero h1,
.batch-hero p {
    margin: 0;
}

.batch-hero h1 {
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.batch-hero > div:first-child p {
    max-width: 72ch;
    margin-top: 8px;
    color: var(--muted);
}

.batch-service-status {
    max-width: 370px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0 10px 16px;
    border-left: 1px solid var(--border-strong);
}

.batch-service-status span,
.batch-service-status strong,
.batch-service-status small {
    display: block;
}

.batch-service-status strong {
    font-size: var(--text-small);
}

.batch-service-status small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.batch-service-status.ready .primer-status-dot {
    background: var(--success);
}

.batch-workbench,
.batch-results {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.batch-panel-heading {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.batch-panel-heading h2,
.batch-panel-heading p {
    margin: 0;
}

.batch-panel-heading h2 {
    font-size: 1.1rem;
}

.batch-panel-heading p {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.batch-workbench form {
    padding: 24px 26px 0;
}

.batch-field > span {
    display: block;
    margin-bottom: 5px;
    font-size: var(--text-caption);
    font-weight: 740;
}

.batch-field > span small {
    color: var(--muted);
    font-weight: 500;
}

.batch-field textarea,
.batch-field select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
}

.batch-field select {
    padding: 7px 10px;
}

.batch-field textarea {
    min-height: 138px;
    padding: 11px 12px;
    resize: vertical;
    font: 0.85rem/1.55 var(--font-mono);
}

.batch-field textarea:hover,
.batch-field select:hover {
    border-color: var(--primary);
}

.batch-options {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) minmax(210px, 0.75fr);
    gap: 18px;
    margin-top: 18px;
}

.batch-scope-note {
    max-width: 82ch;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.batch-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 20px -26px 0;
    padding: 16px 26px;
    background: var(--surface);
}

.batch-actions > div,
.batch-downloads {
    display: flex;
    gap: 9px;
}

.batch-actions .button,
.batch-downloads .button {
    align-self: auto;
}

.batch-empty {
    min-height: 150px;
    display: grid;
    grid-template-columns: auto minmax(0, 680px);
    gap: 22px;
    place-content: center;
    margin-top: 26px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.batch-empty strong,
.batch-empty p {
    margin: 0;
}

.batch-empty p {
    color: var(--muted);
}

.batch-evidence {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--success-soft);
}

.batch-evidence strong {
    color: var(--success);
    font-size: var(--text-caption);
}

.batch-evidence p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.batch-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.batch-summary div {
    min-width: 0;
    padding: 13px 15px;
    border-right: 1px solid var(--border);
}

.batch-summary div:last-child {
    border-right: 0;
}

.batch-summary dt {
    color: var(--muted);
    font-size: 0.72rem;
}

.batch-summary dd {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.batch-table-wrap {
    overflow-x: auto;
}

.batch-table {
    width: 100%;
    min-width: 1020px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.batch-table th,
.batch-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.batch-table thead th {
    color: var(--muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.batch-table tbody tr:hover {
    background: var(--surface);
}

.batch-table tbody th code,
.batch-checksum code {
    font: 0.75rem/1.45 var(--font-mono);
}

.batch-table td:nth-child(2) {
    min-width: 160px;
}

.batch-table td:nth-child(2) small {
    display: block;
    max-width: 48ch;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.batch-status-tag {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 760;
}

.batch-status-tag.ok {
    background: var(--success-soft);
    color: var(--success);
}

.batch-status-tag.partial,
.batch-status-tag.no_sequence {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.batch-status-tag.assembly_mismatch,
.batch-status-tag.not_found {
    background: var(--error-soft);
    color: var(--error);
}

.batch-row-actions {
    min-width: 145px;
}

.batch-row-actions button {
    min-height: 28px;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.batch-row-actions small {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
}

@media (max-width: 980px) {
    .tools-hero,
    .tools-index {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tools-hero {
        align-items: start;
    }

    .primer-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .primer-advanced-grid {
        grid-template-columns: 1fr;
    }

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

    .primer-summary div:nth-child(3) {
        border-right: 0;
    }

    .primer-summary div:nth-child(n+4) {
        border-top: 1px solid var(--border);
    }

    .sequence-options,
    .orf-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sequence-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sequence-summary div:nth-child(2n) {
        border-right: 0;
    }

    .sequence-summary div:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .batch-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .batch-summary div:nth-child(2n) {
        border-right: 0;
    }

    .batch-summary div:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 680px) {
    .tools-page,
    .primer-page,
    .sequence-page,
    .batch-page {
        padding-top: 23px;
        padding-bottom: 45px;
    }

    .tools-hero {
        padding-top: 18px;
    }

    .tools-feature,
    .primer-hero,
    .primer-panel-heading,
    .primer-submit-row,
    .sequence-hero,
    .sequence-panel-heading,
    .sequence-actions,
    .batch-hero,
    .batch-panel-heading,
    .batch-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .tools-feature {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tools-feature-action {
        width: 100%;
        justify-items: stretch;
    }

    .tools-feature-buttons {
        display: grid;
    }

    .tools-feature-action .button,
    .tools-feature-buttons .button {
        width: 100%;
    }

    .tools-groups,
    .primer-gene-grid,
    .primer-settings-grid,
    .primer-summary {
        grid-template-columns: 1fr;
    }

    .tools-groups a {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .primer-hero {
        display: flex;
    }

    .primer-hero h1,
    .sequence-hero h1,
    .batch-hero h1 {
        font-size: 2rem;
    }

    .primer-engine-status,
    .sequence-service-status,
    .batch-service-status {
        max-width: none;
        padding-left: 0;
        border-left: 0;
    }

    .primer-engine-stack {
        width: 100%;
        gap: 0;
    }

    .primer-engine-stack .primer-engine-status {
        min-width: 0;
    }

    .primer-workbench form,
    .sequence-workbench form,
    .batch-workbench form {
        padding: 18px 18px 0;
    }

    .primer-inline-row {
        grid-template-columns: 1fr;
    }

    .primer-submit-row {
        display: flex;
        margin: 0 -18px;
        padding: 16px 18px;
    }

    .primer-submit-row > div,
    .primer-submit-row .button,
    .primer-downloads,
    .primer-downloads .button {
        width: 100%;
    }

    .primer-submit-row > div,
    .primer-downloads {
        flex-direction: column;
    }

    .primer-empty {
        align-items: flex-start;
        flex-direction: column;
        padding: 34px 0;
    }

    .primer-evidence-note {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .primer-summary div,
    .primer-summary div:nth-child(3) {
        border-top: 1px solid var(--border);
        border-right: 0;
    }

    .primer-summary div:first-child {
        border-top: 0;
    }

    .primer-pair-body dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sequence-options,
    .orf-options,
    .sequence-summary,
    .sequence-outputs {
        grid-template-columns: 1fr;
    }

    .orf-evidence {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .sequence-actions {
        display: flex;
        margin: 18px -18px 0;
        padding: 16px 18px;
    }

    .sequence-actions > div,
    .sequence-actions .button,
    .sequence-downloads,
    .sequence-downloads .button {
        width: 100%;
    }

    .sequence-actions > div,
    .sequence-downloads {
        flex-direction: column;
    }

    .sequence-empty {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sequence-summary div,
    .sequence-summary div:nth-child(3n) {
        border-top: 1px solid var(--border);
        border-right: 0;
    }

    .sequence-summary div:first-child {
        border-top: 0;
    }

    .batch-options,
    .batch-summary {
        grid-template-columns: 1fr;
    }

    .batch-actions {
        display: flex;
        margin: 18px -18px 0;
        padding: 16px 18px;
    }

    .batch-actions > div,
    .batch-actions .button,
    .batch-downloads,
    .batch-downloads .button {
        width: 100%;
    }

    .batch-actions > div,
    .batch-downloads {
        flex-direction: column;
    }

    .batch-empty,
    .batch-evidence {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .batch-summary div,
    .batch-summary div:nth-child(3n) {
        border-top: 1px solid var(--border);
        border-right: 0;
    }

    .batch-summary div:first-child {
        border-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tools-page *,
    .primer-page *,
    .sequence-page *,
    .batch-page * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 900px) {
    .expression-dataset {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .expression-dataset > div:nth-child(3) {
        border-right: 0;
    }

    .expression-dataset > div:nth-child(n + 4) {
        border-top: 1px solid var(--border);
    }

    .expression-search,
    .expression-source {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .expression-heading,
    .expression-result-head,
    .expression-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .expression-dataset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expression-dataset > div,
    .expression-dataset > div:nth-child(3) {
        border-right: 1px solid var(--border);
        border-top: 1px solid var(--border);
    }

    .expression-dataset > div:nth-child(odd) {
        border-left: 0;
    }

    .expression-dataset > div:nth-child(even),
    .expression-dataset > div:last-child {
        border-right: 0;
    }

    .expression-dataset > div:last-child {
        grid-column: 1 / -1;
    }

    .expression-dataset > div:nth-child(-n + 2) {
        border-top: 0;
    }

    .expression-search,
    .expression-result-head,
    .expression-chart-section,
    .expression-table-section,
    .expression-samples,
    .expression-source {
        padding: 19px 17px;
    }

    .expression-input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .expression-stats {
        grid-template-columns: 1fr;
    }

    .expression-stats > div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .expression-stats > div:last-child {
        border-bottom: 0;
    }

    .expression-bar-row {
        grid-template-columns: 86px minmax(80px, 1fr) 72px;
        gap: 8px;
        font-size: var(--text-small);
    }

    .metric-toggle {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* GDS portal shell and home page ------------------------------------------------ */

:root {
    --header: oklch(0.245 0.045 152);
    --header-hover: oklch(0.31 0.055 151);
    --header-text: oklch(0.97 0.008 145);
    --leaf: oklch(0.43 0.095 145);
    --leaf-soft: oklch(0.95 0.025 145);
}

.site-header {
    background: var(--header);
    border-bottom: 0;
    color: var(--header-text);
}

.header-inner {
    min-height: 88px;
    align-items: center;
    gap: 32px;
}

.brand,
.brand:hover {
    flex: 0 1 auto;
    color: var(--header-text);
}

.brand-mark {
    width: 48px;
    height: 40px;
    border-radius: 8px;
    background: var(--berry);
    color: var(--header-text);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.brand-copy {
    min-width: 0;
}

.brand strong {
    color: var(--header-text);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.brand small {
    color: oklch(0.80 0.018 145);
    font-size: 0.84rem;
    line-height: 1.25;
}

.primary-nav {
    position: relative;
    flex: 0 0 auto;
    gap: 2px;
}

.primary-nav > .nav-link,
.nav-menu > summary {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 11px 15px;
    border-radius: 7px;
    color: oklch(0.88 0.015 145);
    font-size: 0.98rem;
    font-weight: 680;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease-out, color 180ms ease-out;
}

.primary-nav > .nav-link:hover,
.primary-nav > .nav-link.active,
.nav-menu > summary:hover,
.nav-menu > summary.active,
.nav-menu[open] > summary {
    background: var(--header-hover);
    color: var(--header-text);
}

.nav-menu {
    position: relative;
}

.nav-menu > summary {
    list-style: none;
}

.nav-menu > summary::-webkit-details-marker {
    display: none;
}

.nav-menu > summary::after {
    width: 6px;
    height: 6px;
    margin: -3px 1px 0 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 180ms ease-out;
}

.nav-menu[open] > summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

.nav-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    width: 268px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: 0 6px 8px oklch(0.15 0.02 145 / 0.16);
}

.nav-menu-right .nav-popover {
    right: 0;
    left: auto;
}

.nav-popover a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.93rem;
    font-weight: 590;
    line-height: 1.35;
    text-decoration: none;
}

.nav-popover a:hover,
.nav-popover a.active {
    background: var(--leaf-soft);
    color: var(--leaf);
}

.nav-popover a small {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nav-popover-cascade {
    width: 230px;
    padding: 6px;
    overflow: visible;
}

.nav-cascade {
    display: grid;
    gap: 2px;
}

.nav-submenu {
    position: static;
}

.nav-submenu > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.93rem;
    font-weight: 620;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.nav-submenu > summary::-webkit-details-marker {
    display: none;
}

.nav-submenu > summary::after {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.nav-submenu > summary:hover,
.nav-submenu > summary:focus-visible,
.nav-submenu > summary.active,
.nav-submenu[open] > summary {
    outline: none;
    background: var(--leaf-soft);
    color: var(--leaf);
}

.nav-submenu > summary:focus-visible {
    box-shadow: inset 0 0 0 2px var(--leaf);
}

.nav-submenu-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    z-index: 31;
    width: 292px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: 0 6px 8px oklch(0.15 0.02 145 / 0.16);
}

.nav-popover-species {
    width: min(1040px, calc(100vw - 32px));
    max-height: min(72vh, 660px);
    overflow-y: auto;
}

.nav-popover-title,
.nav-note {
    margin: 0;
    padding: 8px 10px;
}

.nav-popover-title {
    color: var(--berry);
    font-size: 0.88rem;
    font-weight: 780;
}

.nav-note {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.species-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 7px;
}

.species-nav-lead {
    display: flex;
    gap: 4px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
}

.species-nav-lead a {
    min-height: 38px;
}

.species-nav-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 12px;
}

.species-nav-section {
    min-width: 0;
    padding: 0 14px;
}

.species-nav-section:first-child {
    padding-left: 4px;
}

.species-nav-section + .species-nav-section {
    border-left: 1px solid var(--border);
}

.species-nav-section-pathogen {
    background: transparent;
}

.species-nav-heading {
    min-height: 58px;
    padding: 3px 10px 9px;
}

.species-nav-heading h3 {
    margin: 0;
    color: var(--leaf);
    font-size: 0.88rem;
    line-height: 1.35;
}

.species-nav-section-pathogen .species-nav-heading h3 {
    color: var(--error);
}

.species-nav-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.species-nav-links a {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.84rem;
}

.species-nav-links a small,
.t2t-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid color-mix(in oklch, var(--leaf) 32%, transparent);
    border-radius: 999px;
    background: var(--leaf-soft);
    color: var(--leaf);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.species-nav-section-pathogen .species-nav-links a {
    flex-wrap: wrap;
    column-gap: 5px;
}

.nav-strain {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-style: normal;
}

.home-main {
    width: 100%;
    padding: 0 0 72px;
}

.portal-intro,
.quick-links-section,
.tools-section,
.about-section,
.citation-section {
    width: min(calc(100% - 40px), var(--content-width));
    margin-right: auto;
    margin-left: auto;
}

.portal-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.7fr);
    gap: clamp(44px, 7vw, 104px);
    align-items: center;
    padding: 70px 0 64px;
}

.portal-copy h1 {
    max-width: 24ch;
    margin: 0;
    font-size: 2.75rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.intro-text {
    max-width: 70ch;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 1.03rem;
    text-wrap: pretty;
}

.coverage-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.coverage-line strong,
.coverage-line span {
    padding: 0 14px;
    border-right: 1px solid var(--border);
}

.coverage-line strong {
    padding-left: 0;
    color: var(--berry);
}

.coverage-line span:last-child {
    border-right: 0;
}

.migration-status {
    padding: 26px 0 2px 28px;
    border-top: 3px solid var(--leaf);
}

.status-label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--leaf-soft);
    color: var(--leaf);
    font-size: 0.73rem;
    font-weight: 760;
}

.migration-status h2 {
    max-width: 27ch;
    margin: 14px 0 20px;
    font-size: 1.3rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.migration-status dl {
    margin: 0;
}

.migration-status dl div {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.migration-status dt {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 750;
}

.migration-status dd {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.quick-links-section {
    padding: 42px 0 66px;
    border-top: 1px solid var(--border);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}

.section-heading h2,
.about-section h2,
.citation-section h2 {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: -0.025em;
}

.section-heading p {
    max-width: 68ch;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.91rem;
}

.text-link {
    flex: 0 0 auto;
    font-size: 0.86rem;
    font-weight: 720;
    text-decoration: none;
}

.species-directory {
    display: grid;
    grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.6fr);
    gap: 46px;
    margin-top: 30px;
}

.cultivated-directory,
.wild-directory {
    min-width: 0;
    padding-top: 18px;
    border-top: 2px solid var(--border-strong);
}

.cultivated-directory {
    border-top-color: var(--berry);
}

.wild-directory {
    border-top-color: var(--leaf);
}

.directory-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}

.directory-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.directory-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.cultivar-list a,
.wild-species-list a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-size: 0.84rem;
    text-decoration: none;
    transition: background-color 160ms ease-out, color 160ms ease-out;
}

.cultivar-list a:hover,
.wild-species-list a:hover {
    background: var(--surface);
    color: var(--berry);
}

.cultivar-list span,
.wild-species-list span {
    color: var(--muted);
    font-size: 0.74rem;
    text-align: right;
}

.wild-species-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.tools-section {
    padding: 34px 36px 38px;
    border-radius: 12px;
    background: var(--header);
    color: var(--header-text);
}

.light-on-dark p {
    color: oklch(0.78 0.018 145);
}

.migration-key {
    color: oklch(0.75 0.018 145);
    font-size: 0.72rem;
}

.migration-key b {
    color: var(--header-text);
}

.tool-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 34px;
    margin-top: 24px;
    border-top: 1px solid oklch(0.55 0.03 150 / 0.5);
}

.tool-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 4px;
    border-bottom: 1px solid oklch(0.55 0.03 150 / 0.5);
    color: var(--header-text);
    text-decoration: none;
}

.tool-row:hover {
    color: oklch(0.88 0.10 80);
}

.tool-row span,
.tool-row strong,
.tool-row small {
    display: block;
    min-width: 0;
}

.tool-row strong {
    font-size: 0.91rem;
}

.tool-row small {
    margin-top: 3px;
    overflow: hidden;
    color: oklch(0.75 0.018 145);
    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-row em {
    flex: 0 0 auto;
    color: oklch(0.75 0.018 145);
    font-size: 0.68rem;
    font-style: normal;
}

.tool-row-featured em {
    color: oklch(0.88 0.12 80);
    font-weight: 760;
}

.tool-row-unavailable {
    cursor: not-allowed;
    opacity: 0.72;
}

.tool-row-unavailable em {
    color: oklch(0.75 0.12 30);
}

.about-section {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: clamp(48px, 8vw, 110px);
    padding: 70px 0 58px;
}

.about-copy > p {
    max-width: 76ch;
    margin: 15px 0 26px;
    color: var(--muted);
    font-size: 0.94rem;
}

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

.highlights-list li {
    display: grid;
    grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
    font-size: 0.83rem;
}

.highlights-list span {
    color: var(--muted);
}

.news-panel {
    padding-top: 1px;
}

.news-panel ol {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.news-panel li {
    padding: 13px 0;
    border-top: 1px solid var(--border);
}

.news-panel time,
.news-panel span {
    display: block;
}

.news-panel time {
    color: var(--berry);
    font-size: 0.72rem;
    font-weight: 760;
}

.news-panel span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
}

.citation-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 30px;
    border-radius: 10px;
    background: var(--berry-soft);
}

.citation-section p {
    max-width: 90ch;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.citation-button,
.citation-button:hover {
    flex: 0 0 auto;
    background: var(--berry);
    color: var(--bg);
}

.site-footer strong {
    color: var(--ink);
}

@media (max-width: 1280px) {
    .header-inner {
        padding: 10px 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .primary-nav {
        width: 100%;
        flex-wrap: wrap;
    }

    .nav-menu {
        position: static;
    }

    .primary-nav > .nav-link,
    .nav-menu > summary {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 0.94rem;
    }

    .nav-menu-right .nav-popover {
        right: 0;
        left: auto;
    }

    .portal-intro {
        gap: 48px;
    }
}

@media (max-width: 820px) {
    .portal-intro,
    .species-directory,
    .about-section {
        grid-template-columns: 1fr;
    }

    .portal-copy h1 {
        font-size: 2.3rem;
    }

    .migration-status {
        max-width: 620px;
    }

    .tool-directory {
        grid-template-columns: 1fr;
    }

    .specificity-options {
        grid-template-columns: 1fr 1fr;
    }

    .specificity-genome-field {
        grid-column: 1 / -1;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .site-header {
        position: relative;
    }

    .brand-copy small {
        display: none;
    }

    .primary-nav {
        align-items: stretch;
        flex-wrap: wrap;
        overflow: visible;
    }

    .primary-nav > .nav-link,
    .nav-menu > summary {
        min-height: 44px;
        padding: 10px 12px;
    }

    .nav-menu {
        position: static;
    }

    .nav-popover,
    .nav-menu-right .nav-popover,
    .nav-popover-species {
        position: absolute;
        top: calc(100% + 5px);
        right: 0;
        left: 0;
        width: 100%;
        max-height: 65vh;
        overflow: auto;
    }

    .nav-popover-cascade {
        padding: 8px;
    }

    .nav-submenu-panel {
        position: static;
        width: auto;
        max-height: none;
        margin: 2px 4px 6px;
        padding: 4px;
        overflow: visible;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
    }

    .nav-submenu[open] > summary::after {
        transform: rotate(135deg);
    }

    .species-nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .species-nav-groups {
        grid-template-columns: 1fr;
    }

    .species-nav-section,
    .species-nav-section:first-child {
        padding: 12px 4px;
    }

    .species-nav-section + .species-nav-section {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .species-nav-heading {
        min-height: 0;
    }

    .portal-intro,
    .quick-links-section,
    .about-section {
        width: min(calc(100% - 24px), var(--content-width));
    }

    .portal-intro {
        padding: 44px 0 46px;
    }

    .portal-copy h1 {
        font-size: 2rem;
    }

    .coverage-line strong,
    .coverage-line span {
        width: 100%;
        padding: 0;
        border-right: 0;
    }

    .migration-status {
        padding-left: 20px;
    }

    .wild-species-list {
        grid-template-columns: 1fr;
    }

    .specificity-primer-grid,
    .specificity-options {
        grid-template-columns: 1fr;
    }

    .specificity-genome-field {
        grid-column: auto;
    }

    .specificity-verdict {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .directory-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .tools-section {
        width: 100%;
        padding: 30px 12px 34px;
        border-radius: 0;
    }

    .tool-row {
        padding-right: 2px;
        padding-left: 2px;
    }

    .highlights-list li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .citation-section {
        width: min(calc(100% - 24px), var(--content-width));
        align-items: flex-start;
        flex-direction: column;
        padding: 24px 20px;
    }
}

/* Native section pages: JBrowse launcher, varieties, publications ---------------- */

.page-main {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 0 auto;
    padding: 52px 0 64px;
}

.section-block {
    margin-top: 46px;
}

.section-block > .section-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.section-block > .section-heading h2 {
    font-size: 1.2rem;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 720;
    vertical-align: middle;
}

.page-note {
    margin: 18px 0 0;
    padding: 13px 15px;
    border-radius: 8px;
    background: var(--warning-soft);
    color: var(--primary-dark);
    font-size: 0.84rem;
}

/* JBrowse launcher cards */
.browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

/* Nuclear assemblies are grouped under their species; eight F. vesca versions in one flat
   grid read as eight unrelated genomes rather than one lineage. */
.browse-species + .browse-species {
    margin-top: 28px;
}

.browse-species-name {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
}

.browse-species-name span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 400;
}

.browse-species .browse-grid {
    margin-top: 14px;
}

.browse-error {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid #e3c08a;
    border-radius: 10px;
    background: #fdf6ec;
    color: #8a5a12;
}

.browse-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.browse-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 6px 16px oklch(0.15 0.02 145 / 0.08);
}

.browse-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.browse-card-head h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.3;
}

.browse-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 760;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.browse-tag.nuclear {
    background: var(--leaf-soft);
    color: var(--leaf);
}

.browse-tag.plastid {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.browse-tag.pathogen {
    background: var(--error-soft);
    color: var(--error);
}

.browse-card-pathogen {
    border-left: 4px solid var(--error);
}

.browse-meta {
    margin: 0;
    display: grid;
    gap: 8px;
}

.browse-meta div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.browse-meta dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.browse-meta dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.82rem;
}

.browse-meta dd code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--berry);
    word-break: break-all;
}

.browse-card .button {
    margin-top: auto;
    align-self: start;
}

/* Germplasm resources */
.germplasm-heading {
    max-width: 860px;
}

.germplasm-controls {
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(170px, 0.7fr));
    gap: 14px;
    align-items: end;
    margin: 24px 0 30px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.germplasm-field {
    min-width: 0;
}

.germplasm-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 740;
    letter-spacing: 0.02em;
}

.germplasm-controls input,
.germplasm-controls select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
}

.germplasm-controls input {
    padding: 8px 12px;
}

.germplasm-controls select {
    padding: 8px 34px 8px 10px;
}

.germplasm-controls input:focus-visible,
.germplasm-controls select:focus-visible,
.germplasm-set .table-scroll:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--berry) 28%, transparent);
    outline-offset: 2px;
    border-color: var(--berry);
}

.germplasm-controls select:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.germplasm-controls output {
    grid-column: 1 / -1;
    padding: 2px 2px 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.germplasm-load-state {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -10px 0 28px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.9rem;
}

.germplasm-load-state[data-state="error"] {
    border-color: color-mix(in srgb, var(--berry) 32%, var(--border));
    color: var(--ink);
}

.germplasm-load-state[hidden],
[data-germplasm-section][hidden] {
    display: none;
}

.germplasm-set + .germplasm-set {
    margin-top: 40px;
}

.germplasm-set {
    min-width: 0;
}

.germplasm-set .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.germplasm-set-heading {
    max-width: 900px;
    margin-bottom: 14px;
}

.germplasm-set-heading h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1.15rem;
}

.germplasm-set-heading p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.germplasm-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.45;
}

.germplasm-table th,
.germplasm-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.germplasm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-strong);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.germplasm-table tbody th {
    min-width: 168px;
    color: var(--ink);
    font-weight: 720;
}

.wild-taxa-table {
    min-width: 1040px;
}

.wild-materials-table {
    min-width: 1120px;
}

.wild-taxa-table th:first-child,
.wild-materials-table th:first-child {
    width: 20%;
}

.taxon-name {
    display: block;
    color: var(--ink);
    font-weight: 720;
}

.taxon-alias,
.material-meta,
.evidence-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.taxon-rank {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 720;
    letter-spacing: 0.025em;
    text-transform: capitalize;
}

.ploidy-value {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.material-identifiers {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.5;
}

.germplasm-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.germplasm-empty-row td {
    padding: 28px 14px;
    color: var(--muted);
    text-align: center;
}

.germplasm-table tbody tr:hover {
    background: var(--surface);
}

.germplasm-table a {
    color: var(--berry);
    font-weight: 680;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.germplasm-table .t2t-badge {
    margin-left: 6px;
    vertical-align: middle;
}

.germplasm-pagination {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
}

.germplasm-pagination span {
    min-width: 190px;
    color: var(--muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.germplasm-references ol {
    max-width: 980px;
    margin: 22px 0 0;
    padding-left: 24px;
}

.germplasm-references li {
    padding: 5px 0 5px 7px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.germplasm-references a {
    color: var(--berry);
}

@media (max-width: 760px) {
    .germplasm-controls {
        grid-template-columns: 1fr;
    }

    .germplasm-field,
    .germplasm-controls output {
        grid-column: 1;
    }

    .germplasm-controls output {
        padding-bottom: 0;
    }

    .germplasm-load-state {
        align-items: flex-start;
        flex-direction: column;
    }

    .germplasm-pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    .germplasm-pagination span {
        order: -1;
        width: 100%;
    }
}

/* Publications list */
.pub-list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.pub-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.pub-year {
    color: var(--berry);
    font-size: 0.9rem;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
}

.pub-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pub-title {
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.pub-title:hover {
    color: var(--berry);
    text-decoration: underline;
}

.pub-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.pub-doi {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
    word-break: break-all;
}

/* Strawberry AI knowledge-base catalog */
.knowledge-heading > div > p {
    max-width: 70ch;
}

.knowledge-ask-link {
    flex: 0 0 auto;
}

.knowledge-catalog {
    margin-top: 42px;
}

.knowledge-controls {
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.knowledge-controls label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.knowledge-search-field {
    width: min(100%, 680px);
}

.knowledge-controls input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.knowledge-controls input::placeholder {
    color: color-mix(in oklch, var(--muted) 88%, var(--ink));
}

.knowledge-controls input:focus {
    border-color: var(--berry);
    outline: 3px solid color-mix(in srgb, var(--berry) 20%, transparent);
    outline-offset: 1px;
}

.knowledge-results-head {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding-top: 14px;
}

.knowledge-results-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.knowledge-list {
    margin-top: 0;
}

.knowledge-record .pub-title:not(a) {
    cursor: default;
}

.knowledge-empty,
.knowledge-error {
    padding: 42px 0;
    text-align: center;
}

.knowledge-empty h3,
.knowledge-error p {
    margin: 0;
}

.knowledge-empty p {
    margin: 7px 0 0;
    color: var(--muted);
}

.knowledge-error .button {
    margin-top: 12px;
}

.knowledge-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 24px;
}

.knowledge-pagination span {
    min-width: 130px;
    color: var(--muted);
    font-size: 0.84rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.knowledge-skeleton > span,
.knowledge-skeleton div span {
    display: block;
    border-radius: 5px;
    background: var(--surface-strong);
    animation: knowledge-skeleton 1.1s ease-in-out infinite alternate;
}

.knowledge-skeleton > span {
    width: 45px;
    height: 18px;
}

.knowledge-skeleton div {
    display: grid;
    gap: 9px;
}

.knowledge-skeleton div span:nth-child(1) { width: min(100%, 760px); height: 21px; }
.knowledge-skeleton div span:nth-child(2) { width: min(70%, 520px); height: 15px; }
.knowledge-skeleton div span:nth-child(3) { width: min(45%, 330px); height: 13px; }

@keyframes knowledge-skeleton {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

/* Concise species tree -------------------------------------------------- */
.species-tree-main {
    --phylo-line: oklch(0.84 0.012 145);
    --phylo-line-strong: oklch(0.50 0.028 145);
    --phylo-highlight: oklch(0.52 0.13 20);
    --tip-diploid: oklch(0.83 0.075 150);
    --tip-tetraploid: oklch(0.84 0.065 235);
    --tip-hexaploid: oklch(0.82 0.07 295);
    --tip-octoploid: oklch(0.86 0.075 55);
    --tip-decaploid: oklch(0.82 0.065 330);
    width: min(calc(100% - 48px), 1320px);
    padding-top: 48px;
    padding-bottom: 76px;
}

.simple-tree-heading {
    margin-bottom: 22px;
    text-align: center;
}

.simple-tree-heading h1 {
    margin: 0;
    color: var(--ink);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.tree-heading-note {
    max-width: 720px;
    margin: 10px auto 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.6;
    text-wrap: balance;
}

.tree-scope-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.tree-scope-row span {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.simple-tree-figure {
    margin: 0;
    padding: 26px 30px 24px;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 4px 8px color-mix(in oklch, var(--ink) 7%, transparent);
}

.simple-tree-viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.simple-tree-viewport:focus-visible {
    outline: 2px solid color-mix(in oklch, var(--berry) 45%, transparent);
    outline-offset: 3px;
}

.simple-tree-svg {
    display: block;
    width: min(100%, 1180px);
    min-width: 940px;
    height: auto;
    margin-inline: auto;
    font-family: var(--font-sans);
    shape-rendering: geometricPrecision;
}

.tree-link {
    fill: none;
    stroke: var(--phylo-line);
    stroke-linecap: round;
    stroke-width: 2;
    transition: stroke 220ms cubic-bezier(0.22, 1, 0.36, 1),
        stroke-width 220ms cubic-bezier(0.22, 1, 0.36, 1);
    vector-effect: non-scaling-stroke;
}

.tree-link.is-highlighted {
    stroke: var(--phylo-highlight);
    stroke-width: 3;
}

.tree-taxon {
    text-decoration: none;
}

.tree-taxon-linked {
    cursor: pointer;
}

.tree-taxon-unlinked {
    cursor: default;
}

.tree-taxon rect {
    fill: transparent;
}

.tree-taxon circle {
    fill: var(--tip-diploid);
    stroke: color-mix(in oklch, var(--tip-diploid) 58%, var(--phylo-line-strong));
    stroke-width: 1.5;
    transition: fill 220ms cubic-bezier(0.22, 1, 0.36, 1),
        stroke 220ms cubic-bezier(0.22, 1, 0.36, 1),
        r 220ms cubic-bezier(0.22, 1, 0.36, 1);
    vector-effect: non-scaling-stroke;
}

.tree-taxon text {
    fill: var(--ink);
    font-size: 15px;
    font-style: italic;
    font-weight: 500;
    paint-order: stroke;
    stroke: var(--surface);
    stroke-linejoin: round;
    stroke-width: 4px;
    transition: fill 220ms cubic-bezier(0.22, 1, 0.36, 1),
        font-weight 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tree-taxon .tree-ploidy-label {
    fill: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    text-anchor: end;
    text-decoration: none;
}

.tree-taxon-unlinked text {
    fill: var(--muted);
    font-weight: 450;
}

.tree-taxon-tetraploid circle {
    fill: var(--tip-tetraploid);
    stroke: color-mix(in oklch, var(--tip-tetraploid) 58%, var(--phylo-line-strong));
}

.tree-taxon-hexaploid circle {
    fill: var(--tip-hexaploid);
    stroke: color-mix(in oklch, var(--tip-hexaploid) 58%, var(--phylo-line-strong));
}

.tree-taxon-octoploid circle {
    fill: var(--tip-octoploid);
    stroke: color-mix(in oklch, var(--tip-octoploid) 58%, var(--phylo-line-strong));
}

.tree-taxon-decaploid circle {
    fill: var(--tip-decaploid);
    stroke: color-mix(in oklch, var(--tip-decaploid) 58%, var(--phylo-line-strong));
}

.tree-taxon-cultivated circle {
    fill: var(--berry);
    stroke: color-mix(in oklch, var(--berry) 80%, var(--ink));
}

.tree-taxon-cultivated text {
    fill: var(--berry);
    font-weight: 650;
}

.tree-taxon-linked:hover text,
.tree-taxon-linked:focus-visible text {
    fill: var(--berry);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tree-taxon-linked:hover circle,
.tree-taxon-linked:focus-visible circle {
    fill: var(--berry);
    stroke: color-mix(in oklch, var(--berry) 80%, var(--ink));
    r: 6.5px;
}

.tree-taxon-linked:hover .tree-ploidy-label,
.tree-taxon-linked:focus-visible .tree-ploidy-label {
    fill: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.tree-taxon:focus {
    outline: none;
}

.tree-internal-nodes circle {
    fill: var(--phylo-line-strong);
    stroke: var(--surface);
    stroke-width: 1.5;
    transition: fill 220ms cubic-bezier(0.22, 1, 0.36, 1);
    vector-effect: non-scaling-stroke;
}

.tree-caption {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.tree-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tree-legend-dot {
    width: 10px;
    height: 10px;
    border: 1px solid color-mix(in oklch, currentColor 35%, transparent);
    border-radius: 50%;
}

.tree-legend-diploid {
    background: var(--tip-diploid);
}

.tree-legend-tetraploid {
    background: var(--tip-tetraploid);
}

.tree-legend-hexaploid {
    background: var(--tip-hexaploid);
}

.tree-legend-octoploid {
    background: var(--tip-octoploid);
}

.tree-legend-decaploid {
    background: var(--tip-decaploid);
}

.tree-legend-link i,
.tree-legend-unlinked i {
    min-width: 22px;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 600;
    text-align: center;
}

.tree-legend-link i {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tree-legend-unlinked i {
    color: var(--muted);
    font-weight: 450;
}

.tree-method-note {
    max-width: 92ch;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.65;
    text-wrap: pretty;
}

.tree-method-note strong {
    color: var(--ink);
}

.tree-evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 22px;
    margin-top: 30px;
}

.tree-evidence-card {
    min-width: 0;
    padding: 24px 26px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.tree-card-kicker {
    margin: 0 0 7px;
    color: var(--berry);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tree-evidence-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.16rem;
}

.tree-evidence-card > p:last-child {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.65;
}

.tree-evidence-card a {
    color: var(--berry);
    font-weight: 680;
    text-underline-offset: 3px;
}

.tree-parentage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.9fr);
    gap: 16px;
    align-items: center;
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tree-parentage > div {
    display: grid;
    gap: 7px;
}

.tree-parentage > span {
    color: var(--muted);
    font-size: 1.2rem;
}

.tree-parentage-result {
    font-size: 1.02rem;
}

.tree-unplaced-card dl {
    margin: 17px 0 0;
}

.tree-unplaced-card dl > div {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.tree-unplaced-card dt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
    font-weight: 700;
}

.tree-unplaced-card dt span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.tree-unplaced-card dd {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.tree-references {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.tree-references h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 700;
}

.tree-references ol {
    display: grid;
    gap: 7px;
    max-width: 108ch;
    margin: 0;
    padding-left: 1.3rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.tree-audit-note {
    max-width: 100ch;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.55;
}

.tree-references strong {
    color: var(--ink);
}

.tree-reference-location {
    display: block;
    margin-top: 2px;
    color: color-mix(in oklch, var(--muted) 88%, var(--ink));
}

.tree-references a {
    color: var(--berry);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.tree-references a:hover,
.tree-references a:focus-visible {
    color: color-mix(in oklch, var(--berry) 78%, var(--ink));
}

@media (max-width: 760px) {
    .species-tree-main {
        width: min(calc(100% - 24px), 1320px);
        min-width: 0;
        overflow-x: clip;
        padding-top: 36px;
        padding-bottom: 50px;
    }

    .simple-tree-heading {
        margin-bottom: 20px;
    }

    .simple-tree-heading h1 {
        font-size: 1.7rem;
    }

    .simple-tree-figure {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 18px 0 16px;
        border-radius: 12px;
    }

    .simple-tree-viewport {
        width: 100%;
        max-width: 100%;
    }

    .tree-caption {
        margin: 16px 18px 0;
    }

    .tree-legend {
        gap: 9px 14px;
    }

    .tree-evidence-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 22px;
    }

    .tree-evidence-card {
        max-width: 100%;
        padding: 20px;
        overflow-wrap: anywhere;
    }

    .tree-parentage {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tree-parentage > span {
        transform: rotate(90deg);
        justify-self: start;
    }

    .tree-references {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tree-link,
    .tree-taxon circle,
    .tree-taxon text,
    .tree-internal-nodes circle {
        transition: none;
    }
}

@media (max-width: 640px) {
    .page-main {
        width: min(calc(100% - 24px), var(--content-width));
        padding-top: 40px;
    }

    .browse-meta div {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .pub-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .knowledge-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .knowledge-heading .knowledge-ask-link {
        align-self: flex-start;
    }

    .knowledge-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .knowledge-controls .button {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knowledge-skeleton > span,
    .knowledge-skeleton div span {
        animation: none;
    }
}

/* Old-style homepage: photo species grid + info tabs --------------------------- */

.gds-hero,
.home-section {
    width: min(calc(100% - 40px), var(--content-width));
    margin-right: auto;
    margin-left: auto;
}

.gds-hero {
    padding: 44px 0 10px;
}

.gds-hero h1 {
    max-width: 26ch;
    margin: 10px 0 0;
    font-size: 2.1rem;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.gds-hero .intro-text {
    max-width: 80ch;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.gds-hero .intro-text strong {
    color: var(--berry);
}

.home-section {
    margin-top: 40px;
}

.home-license { padding-bottom: 20px; }
.home-license p { max-width: 85ch; line-height: 1.65; }
.home-license > a { font-weight: 650; }
.license-page { max-width: 1120px; }
.license-heading { padding: 12px 0 24px; border-bottom: 1px solid var(--border); }
.license-heading h1 { margin: 0 0 12px; font-size: 2rem; line-height: 1.2; }
.license-heading p { display: inline-block; margin: 0 24px 0 0; line-height: 1.6; }
.license-heading .license-date { color: var(--muted); font-size: 0.9rem; }
.license-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 40px; padding-top: 28px; align-items: start; }
.license-contents { display: flex; flex-direction: column; align-items: stretch; position: sticky; top: 96px; }
.license-contents strong { margin-bottom: 12px; }
.license-contents a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; line-height: 1.4; border-radius: 4px; text-decoration: none; }
.license-contents a:hover, .license-contents a:focus-visible { background: var(--leaf-soft); text-decoration: underline; }
.license-body { min-width: 0; }
.license-body p { margin: 12px 0 0; line-height: 1.7; overflow-wrap: anywhere; }
.license-body section { margin: 0; padding: 24px 0; border-top: 1px solid var(--border); scroll-margin-top: 110px; }
.license-body section:first-child { padding-top: 0; border-top: 0; }
.license-body section h2 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.4; }
@media (max-width: 760px) {
    .license-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 16px; }
    .license-heading h1 { font-size: 1.75rem; }
    .license-heading p { display: block; margin: 6px 0 0; }
    .license-contents { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
    .license-contents strong { flex-basis: 100%; margin-bottom: 4px; }
    .license-contents a { padding-inline: 8px; }
}

.home-heading {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--berry);
}

.home-heading h2 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.home-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}

.strawberry-group {
    margin-top: 28px;
}

.strawberry-group + .strawberry-group {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.strawberry-group-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.strawberry-group-heading h3,
.strawberry-group-heading p {
    margin: 0;
}

.strawberry-group-heading h3 {
    color: var(--ink);
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}

.strawberry-group-heading p {
    max-width: 70ch;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.88rem;
}

.group-count {
    flex: 0 0 auto;
    color: var(--berry);
    font-size: 0.82rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 16px 0 6px;
}

.cultivar-grid {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.species-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    text-decoration: none;
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}

.species-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 18px oklch(0.15 0.02 145 / 0.10);
    transform: translateY(-2px);
}

.species-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface);
}

.species-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 320ms ease-out;
}

.species-card:hover .species-photo img {
    transform: scale(1.05);
}

.species-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px 13px;
}

.species-caption .sci {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.species-caption .cultivar-name {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.35;
}

.cultivar-card .species-photo {
    aspect-ratio: 3 / 2;
}

.cultivar-card .common {
    font-size: 0.78rem;
}

.species-caption .common {
    color: var(--muted);
    font-size: var(--text-small);
}

.species-caption .ploidy {
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Homepage research ranking: a compact index paired with one article detail. */
.gene-study-section {
    margin-top: 48px;
}

.gene-study-browser {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    margin-top: 20px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.gene-study-mobile-picker {
    display: none;
}

.gene-study-index {
    grid-column: 1;
    grid-row: 1;
    padding: 18px 16px;
    border-right: 1px solid var(--border);
    background: var(--surface-muted);
}

.gene-study-index-title {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
}

.gene-study-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, 36px);
    gap: 4px;
}

.gene-study-tab {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 4px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
}

.gene-study-tab b {
    color: var(--berry);
    font-size: 0.86rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.gene-study-tab span {
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    text-overflow: ellipsis;
}

.gene-study-tab:hover {
    background: var(--surface-strong);
    color: var(--ink);
}

.gene-study-tab:focus-visible {
    outline: 2px solid var(--berry);
    outline-offset: 2px;
}

.gene-study-tab[aria-selected="true"] {
    background: var(--berry);
    color: #fff;
}

.gene-study-tab[aria-selected="true"] b {
    color: #fff;
}

.gene-study-panel {
    grid-column: 2;
    grid-row: 1;
    padding: 24px 28px;
}

.gene-study-panel[hidden] {
    display: none;
}

.gene-study-panel-header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 18px;
}

.gene-study-rank {
    display: flex;
    grid-row: 1 / span 2;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding-right: 18px;
    border-right: 1px solid var(--border);
    color: var(--berry);
    font-size: 2rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.gene-study-rank::before {
    content: "Rank";
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.gene-study-journal {
    color: var(--berry);
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
}

.gene-study-publication {
    color: var(--ink);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    text-wrap: pretty;
}

.gene-study-publication:hover {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gene-study-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.gene-study-label {
    display: block;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gene-study-genes {
    display: flex;
    min-width: 0;
    flex-flow: row wrap;
    gap: 9px 20px;
}

.gene-study-gene {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: baseline;
    gap: 7px;
    color: var(--ink);
    line-height: 1.3;
    text-decoration: none;
}

.gene-study-gene strong,
.gene-study-gene code {
    overflow-wrap: anywhere;
}

.gene-study-gene strong {
    font-size: 1rem;
}

.gene-study-gene code {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.86rem;
}

a.gene-study-gene:hover strong {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gene-study-function {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .gene-study-browser {
        display: block;
    }

    .gene-study-index {
        display: none;
    }

    .gene-study-mobile-picker {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 12px 18px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-muted);
    }

    .gene-study-mobile-picker label {
        color: var(--ink);
        font-size: 0.84rem;
        font-weight: 800;
    }

    .gene-study-select {
        width: 100%;
        min-height: 42px;
        padding: 8px 34px 8px 11px;
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        background: var(--surface);
        color: var(--ink);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .gene-study-select:focus-visible {
        outline: 2px solid var(--berry);
        outline-offset: 2px;
    }

    .gene-study-panel-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .gene-study-section {
        margin-top: 42px;
    }

    .gene-study-browser {
        margin-top: 16px;
    }

    .gene-study-mobile-picker {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 12px 16px;
    }

    .gene-study-select {
        min-height: 44px;
    }

    .gene-study-panel {
        padding: 20px 16px 22px;
    }

    .gene-study-panel-header {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 4px 14px;
    }

    .gene-study-rank {
        padding-right: 12px;
        font-size: 1.6rem;
    }

    .gene-study-publication {
        font-size: 1rem;
    }

    .gene-study-gene {
        flex-direction: column;
        gap: 1px;
    }
}

/* Homepage genetics and breeding ledger. */
.trait-gene-section {
    margin-top: 48px;
}

.trait-gene-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 20px;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border);
}

.trait-gene-column {
    min-width: 0;
    padding: 20px 4px 8px;
    border-top: 1px solid var(--border);
}

.trait-gene-column:first-child {
    border-top: 0;
}

.trait-gene-column h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.3;
}

.trait-gene-column h3::before {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--trait-accent, var(--berry));
    content: "";
}

.trait-gene-column--stress {
    --trait-accent: #456a50;
}

.trait-gene-column--quality {
    --trait-accent: var(--berry);
}

.trait-gene-column--growth {
    --trait-accent: #6a7041;
}

.trait-gene-column--ripening {
    --trait-accent: #98513e;
}

.trait-gene-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trait-gene-row {
    padding: 14px 0 15px;
    border-top: 1px solid var(--border);
}

.trait-gene-function {
    margin: 0;
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.4;
    text-wrap: pretty;
}

.trait-gene-genes {
    display: flex;
    min-width: 0;
    flex-flow: row wrap;
    gap: 7px 13px;
    margin-top: 9px;
}

.trait-gene {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex-direction: column;
    gap: 1px;
    color: var(--ink);
    line-height: 1.25;
    text-decoration: none;
}

.trait-gene i {
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 750;
}

.trait-gene code {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.25;
}

a.trait-gene:hover i {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trait-gene-reference {
    display: inline-block;
    margin-top: 10px;
    color: var(--berry);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration-color: color-mix(in srgb, var(--berry) 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.trait-gene-reference:hover {
    color: var(--primary-dark);
    text-decoration-color: currentColor;
}

.trait-gene a:focus-visible,
.trait-gene-reference:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--berry);
    outline-offset: 3px;
}

@media (min-width: 700px) {
    .trait-gene-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trait-gene-column {
        padding: 20px 22px 8px;
        border-top: 0;
    }

    .trait-gene-column:nth-child(even) {
        border-left: 1px solid var(--border);
    }

    .trait-gene-column:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }
}

@media (min-width: 1120px) {
    .trait-gene-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .trait-gene-column {
        padding: 20px 20px 8px;
        border-top: 0 !important;
        border-left: 1px solid var(--border);
    }

    .trait-gene-column:first-child {
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .trait-gene-section {
        margin-top: 42px;
    }

    .trait-gene-grid {
        margin-top: 16px;
    }
}

@media (max-width: 640px) {
    .strawberry-group-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .species-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .species-caption {
        padding: 10px 11px 12px;
    }
}

.info-panel {
    margin-top: 22px;
}

.visitor-map-section {
    display: grid;
    grid-template-columns: 192px minmax(150px, 1fr);
    align-items: center;
    align-self: start;
    gap: 20px;
    width: min(100%, 400px);
}

.visitor-map-section iframe {
    display: block;
    width: 192px;
    max-width: 100%;
    height: 192px;
    border: 0;
    background: transparent;
}

.visitor-globe {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.visitor-map-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
}

.visitor-map-key i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d34f43;
    box-shadow: 0 0 0 3px rgb(211 79 67 / 15%);
}

.visitor-insights {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.visitor-total {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.visitor-total strong {
    color: var(--berry);
    font-size: 1.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: 1;
}

.visitor-total strong[data-state="loading"] {
    color: var(--border-strong);
}

.visitor-total > span {
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 700;
    line-height: 1.35;
}

.visitor-country-summary {
    width: 100%;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.visitor-country-heading {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.25;
}

.visitor-country-heading strong {
    color: var(--berry);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.visitor-country-list {
    display: grid;
    gap: 4px;
    width: 100%;
    margin: 7px 0 6px;
    padding: 0;
    list-style: none;
}

.visitor-country-list li {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.visitor-country-list li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visitor-country-list li strong {
    color: var(--ink);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.visitor-country-list .visitor-country-status {
    justify-content: flex-start;
}

.info-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--header);
}

.info-tabs button {
    min-height: 42px;
    padding: 9px 18px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: var(--surface-strong);
    color: var(--muted);
    font-weight: 700;
    font-size: var(--text-ui);
    cursor: pointer;
    transition: background-color 160ms ease-out, color 160ms ease-out;
}

.info-tabs button:hover {
    background: var(--border);
    color: var(--ink);
}

.info-tabs button[aria-selected="true"] {
    background: var(--header);
    color: var(--header-text);
}

.info-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: 32px;
    padding: 20px 2px 4px;
}

.info-body [role="tabpanel"] {
    max-width: 92ch;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: 1.65;
}

.info-body p {
    margin: 0 0 12px;
}

.info-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .info-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .visitor-map-section {
        justify-self: center;
    }
}

@media (max-width: 420px) {
    .visitor-map-section {
        grid-template-columns: 154px minmax(126px, 1fr);
        gap: 12px;
    }

    .visitor-map-section iframe {
        width: 154px;
        height: 154px;
    }

    .visitor-map-key {
        font-size: 0.62rem;
    }

    .visitor-total strong {
        font-size: 1.65rem;
    }

    .visitor-country-summary {
        margin-top: 8px;
        padding-top: 8px;
    }

}

.info-list,
.info-news {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Institutional marks retain their original proportions and colors. */
.institution-logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 20px;
    padding: 4px 0 12px;
}

.institution-logo {
    display: flex;
    grid-column: span 2;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    text-align: center;
}

.institution-logo--wordmark {
    grid-column: span 3;
}

.institution-logo img {
    display: block;
    width: 80px;
    max-width: 100%;
    height: 80px;
    object-fit: contain;
}

.institution-logo--wordmark img {
    width: min(100%, 280px);
}

.institution-logo:not(.institution-logo--wordmark) img {
    border-radius: 50%;
}

.institution-logo figcaption {
    max-width: 34ch;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    line-height: 1.45;
    text-wrap: balance;
    overflow-wrap: break-word;
}

@media (max-width: 420px) {
    .institution-logos { gap: 22px 12px; }
    .institution-logo img { height: 68px; }
    .institution-logo:not(.institution-logo--wordmark) img { width: 68px; }
}

.info-list li {
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.info-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.info-list strong {
    color: var(--ink);
}

.sdh-highlights { max-width: 75ch; }
.sdh-highlights li { padding: 12px 0; text-wrap: pretty; }
.sdh-highlights a { text-underline-offset: 3px; }
.info-body .highlights-intro { max-width: 70ch; color: var(--ink); margin-bottom: 18px; }
.info-body .highlights-snapshot { max-width: 75ch; margin-top: 16px; font-size: 0.875rem; }

.info-news li {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.info-news li:first-child {
    border-top: 0;
    padding-top: 0;
}

.info-news time {
    flex: 0 0 auto;
    color: var(--berry);
    font-size: 0.88rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.news-archive-link { margin-top: 16px; line-height: 1.65; }
.news-archive-link a { font-weight: 700; text-underline-offset: 3px; }
.news-archive-link span { font-size: 0.9rem; }

.home-news-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.home-news-filters button { font: inherit; padding: 5px 12px; color: var(--ink); background: transparent; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.home-news-filters button[aria-pressed="true"] { color: white; background: #102b19; border-color: #102b19; }
.home-news-filters button:hover { text-decoration: underline; }
.home-news-filters button:focus-visible, .home-news-scroll:focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; }
.home-news-status, .home-news-context { font-size: 0.9rem; line-height: 1.6; }
.home-news-scroll { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 14px; }
.home-news-scroll h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.home-news-entries, .home-news-history { list-style: none; margin: 0; padding: 0; }
.home-news-entries > li, .home-news-history > li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.home-news-scroll p { margin: 0 0 8px; line-height: 1.7; overflow-wrap: anywhere; }
.home-news-scroll time { color: var(--berry); font-variant-numeric: tabular-nums; }
.home-news-history > li { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 12px; }
.home-news-scroll [hidden] { display: none !important; }
@media (max-width: 640px) {
    .home-news-scroll { max-height: 420px; padding-right: 8px; }
    .home-news-history > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media print {
    .home-news-scroll { max-height: none; overflow: visible; }
}

@media (max-width: 640px) {
    .gds-hero,
    .home-section {
        width: min(calc(100% - 24px), var(--content-width));
    }

    .gds-hero h1 {
        font-size: 1.8rem;
    }

    .species-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .info-news li {
        flex-direction: column;
        gap: 2px;
    }
}

/* Brand logo (real GDS strawberry logo) --------------------------------------- */

.brand-logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.brand-copy strong {
    font-size: 1.18rem;
    letter-spacing: 0.01em;
}

/* Species profile page --------------------------------------------------------- */

.species-main {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 0 auto;
    padding: 34px 0 64px;
    display: grid;
    grid-template-columns: minmax(250px, 0.28fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.species-sidebar {
    position: sticky;
    top: 96px;
    padding-top: 6px;
}

.species-sidebar h2 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--leaf);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--leaf);
}

.species-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.species-menu-group + .species-menu-group {
    margin-top: 22px;
}

.species-menu-group h3 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.species-sidebar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    border-left: 3px solid transparent;
    color: var(--ink);
    font-size: var(--text-ui);
    text-decoration: none;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.species-sidebar a:hover {
    background: var(--surface);
    color: var(--berry);
}

.species-sidebar a.active {
    border-left-color: var(--berry);
    background: var(--berry-soft);
    color: var(--berry);
    font-weight: 700;
}

.species-sidebar a small {
    color: var(--muted);
    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: 0.02em;
}

.species-menu-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.species-sidebar a .t2t-badge {
    color: var(--leaf);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.species-content {
    min-width: 0;
    scroll-margin-top: 16px;
}

.sp-head-nophoto { grid-template-columns: 1fr; }
.sp-head {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

.sp-head-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface);
}

.sp-head-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sp-head-copy h1 {
    margin: 8px 0 0;
    font-size: 2.15rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.sp-common {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 1.06rem;
}

.sp-scientific-name {
    margin: 7px 0 0;
    color: var(--berry);
    font-size: 1.14rem;
    font-weight: 650;
}

.sp-common-zh {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
    color: var(--berry);
    font-weight: 600;
}

.sp-extra-refs {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.sp-extra-refs h3 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-extra-refs ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.55;
}

.sp-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.sp-taxonomy span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--leaf-soft);
    color: var(--leaf);
    font-size: 0.82rem;
    font-weight: 650;
}

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.sp-pathogen-note {
    max-width: 70ch;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 4px solid var(--error);
    background: var(--error-soft);
    color: var(--ink);
    font-size: var(--text-small);
}

.sp-block {
    margin-top: 38px;
}

.sp-block > h2 {
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--berry);
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.sp-intro {
    margin: 18px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 12px;
    color: var(--muted);
    font-size: var(--text-body);
    line-height: 1.65;
}

.sp-intro li::marker {
    color: var(--berry);
    font-weight: 750;
}

.sp-intro em {
    color: var(--ink);
    font-style: italic;
}

.sp-assemblies {
    display: grid;
    gap: 22px;
    margin-top: 22px;
}

.sp-assembly {
    padding: 20px 22px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.sp-assembly h3 {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 1.08rem;
    color: var(--primary-dark);
}

.sp-assembly h3 .t2t-badge {
    margin-left: 10px;
    vertical-align: middle;
}

.sp-publication-year {
    display: inline-block;
    margin-left: 10px;
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 650;
    letter-spacing: 0;
    vertical-align: middle;
}

.sp-stats {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.sp-stats th,
.sp-stats td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.sp-stats th {
    width: 46%;
    color: var(--muted);
    font-weight: 650;
}

.sp-stats td {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.sp-stats tr:last-child th,
.sp-stats tr:last-child td {
    border-bottom: 0;
}

.sp-reference {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: var(--text-ui);
    line-height: 1.55;
}

.sp-reference strong {
    display: inline-block;
    margin-right: 6px;
    color: var(--ink);
}

.sp-reference-missing {
    font-style: italic;
}

.sp-release-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--warning);
    background: var(--warning-soft);
    color: var(--muted);
    font-size: var(--text-ui);
    line-height: 1.55;
}

.sp-release-note strong {
    color: var(--ink);
}

.sp-release-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--berry);
    background: color-mix(in srgb, var(--berry) 5%, white);
    color: var(--muted);
    font-size: var(--text-ui);
    line-height: 1.55;
}

.sp-release-note strong {
    color: var(--ink);
}

.sp-doi {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    white-space: nowrap;
}

.species-pending {
    padding: 56px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
}

.species-pending h2 {
    margin: 0 0 8px;
}

.species-pending p {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--muted);
}

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

    .species-sidebar {
        position: static;
    }

    .species-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .species-sidebar a {
        border-left: 0;
        border-bottom: 2px solid transparent;
    }

    .species-sidebar a.active {
        border-left: 0;
        border-bottom-color: var(--berry);
    }

    .sp-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .species-main {
        width: min(calc(100% - 24px), var(--content-width));
    }

    .sp-head-copy h1 {
        font-size: 1.7rem;
    }

    .sp-stats th {
        width: 52%;
    }
}

/* Grouped download catalog ------------------------------------------------------ */

.dl-collection {
    margin-top: 34px;
}

.dl-collection-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--berry);
}

.dl-collection-head h3 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.dl-collection-head span {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.dl-species {
    border-bottom: 1px solid var(--border);
}

.dl-species > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 6px;
    cursor: pointer;
    list-style: none;
}

.dl-species > summary::-webkit-details-marker {
    display: none;
}

.dl-species > summary::before {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    content: "";
    transform: rotate(-45deg);
    transition: transform 180ms ease-out;
}

.dl-species[open] > summary::before {
    transform: rotate(45deg);
}

.dl-species > summary:hover {
    background: var(--surface);
}

.dl-species-name {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.dl-species-meta {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.76rem;
}

.dl-organelle-section {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 3px solid var(--berry);
}

.dl-organelle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px 13px;
}

.dl-organelle-head h4 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: -0.015em;
}

.dl-organelle-head span {
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.dl-table-wrap {
    overflow-x: auto;
    padding: 0 0 14px;
}

.dl-table {
    width: 100%;
    min-width: 1220px;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.dl-table th,
.dl-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.dl-table thead th {
    background: var(--surface);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dl-table tbody tr:hover {
    background: var(--surface);
}

.dl-table tbody tr:last-child td,
.dl-table tbody tr:last-child th {
    border-bottom: 0;
}

.dl-assembly-cell {
    min-width: 190px;
}

.dl-assembly-cell strong {
    display: block;
    color: var(--ink);
    font-size: 0.86rem;
}

.dl-assembly-cell small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.dl-file-entry {
    min-width: 205px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.dl-file-entry + .dl-file-entry {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.dl-file-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dl-filename {
    max-width: 16ch;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-file-size {
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.dl-file {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 7px;
    background: var(--success);
    color: var(--bg);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease-out, transform 160ms ease-out;
}

.dl-file svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dl-file:hover {
    background: oklch(0.38 0.10 150);
    color: var(--bg);
    text-decoration: none;
    transform: translateY(-1px);
}

.dl-file:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.dl-missing {
    color: var(--border-strong);
    font-size: 0.9rem;
}

.dl-unpublished {
    color: var(--muted);
    font-size: 0.76rem;
}

.group-skeleton {
    display: grid;
    gap: 9px;
    margin-top: 22px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.group-skeleton span {
    height: 13px;
    border-radius: 4px;
    background: var(--surface-strong);
    animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
}

.group-skeleton span:first-child { width: 32%; }
.group-skeleton span:nth-child(2) { width: 88%; }
.group-skeleton span:last-child { width: 66%; }

@media (max-width: 640px) {
    .dl-collection-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .dl-organelle-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* Gene search ------------------------------------------------------------------- */

.gene-search-panel {
    margin-top: 26px;
    padding: 22px 24px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gene-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
}

.gene-field {
    display: grid;
    gap: 5px;
    flex: 1 1 240px;
}

.gene-field > span {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 720;
}

.gene-field > span small {
    margin-left: 6px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.gene-field input,
.gene-field select {
    width: 100%;
    background: var(--bg);
}

.gene-actions {
    display: flex;
    gap: 8px;
}

.gene-status {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.83rem;
}

.gene-status.warning {
    color: var(--primary-dark);
    font-weight: 600;
}

.gene-reference {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.55;
}

.gene-reference[hidden] {
    display: none;
}

.gene-reference .gene-assembly-citation {
    margin: 0;
}

.gene-assembly-citation {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.55;
}

.gene-assembly-citation strong {
    margin-right: 6px;
    color: var(--ink);
}

.gene-assembly-citation a {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    white-space: nowrap;
}

.gene-card {
    margin-top: 20px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.gene-card > h2 {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 1.02rem;
    letter-spacing: -0.015em;
}

/* Shown only for species whose assemblies are downloadable but absent from the gene database. */
.sp-no-genes {
    margin-top: 12px;
    max-width: 62ch;
    color: var(--muted);
    font-size: 0.92rem;
}

/* Filled in from the live database by genes.js, so the breadth of the data is visible up front. */
.gene-coverage {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.92rem;
}

.gene-coverage:empty {
    display: none;
}

/* Only rendered when a gene ID maps to more than one assembly (see ambiguitySection). */
.gene-ambiguous {
    border-color: #c8802a;
    background: #fdf6ec;
}

.gene-ambiguous > h2 {
    border-bottom-color: #e3c08a;
    color: #8a5a12;
}

.gene-ambiguous p {
    margin: 8px 0;
}

.gene-ambiguous ul {
    margin: 8px 0 8px 20px;
}

.gene-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.gene-card-head h2 {
    margin: 0;
    font-size: 1.02rem;
}

.gene-length {
    color: var(--muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.gene-card-head .copy-button {
    min-height: 32px;
    margin-left: auto;
    padding: 4px 12px;
    font-size: 0.78rem;
}

.gene-overview h2 {
    color: var(--berry);
    font-family: var(--font-mono);
    font-size: 1.25rem;
}

.gene-context-badge {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--error-soft);
    color: var(--error);
    font-size: 0.78rem;
    font-weight: 700;
}

.gene-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.gene-card dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gene-card dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 0.9rem;
}

.gene-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.gene-sequence {
    max-height: 260px;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre;
}

.gene-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.gene-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.86rem;
}

.gene-list a {
    font-weight: 700;
    text-decoration: none;
}

.gene-list span {
    color: var(--muted);
}

.gene-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gene-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--leaf-soft);
    color: var(--leaf);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.gene-chip:hover {
    background: var(--leaf);
    color: var(--bg);
}

.gene-table-wrap {
    overflow-x: auto;
}

.gene-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.gene-table th,
.gene-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.gene-table thead th {
    background: var(--surface);
    color: var(--muted);
    font-size: 0.71rem;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gene-card-empty {
    background: var(--surface);
}

.gene-card-empty h2 {
    border-bottom: 0;
    margin-bottom: 4px;
    padding-bottom: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.gene-card-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 0.83rem;
}

.gene-skeleton {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    padding: 20px 0;
}

.gene-skeleton span {
    height: 14px;
    border-radius: 4px;
    background: var(--surface-strong);
    animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
}

.gene-skeleton span:first-child { width: 40%; }
.gene-skeleton span:nth-child(2) { width: 90%; }
.gene-skeleton span:last-child { width: 70%; }

/* Community and help pages ------------------------------------------------------ */

.conf-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.conf-item {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.conf-when {
    color: var(--berry);
    font-size: 0.79rem;
    font-weight: 700;
}

.conf-body h3 {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.35;
    font-weight: 650;
}

.conf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.79rem;
}

.conf-link {
    white-space: nowrap;
    font-size: 0.8rem;
}

.link-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.link-list a {
    display: grid;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.link-list a:hover {
    border-color: var(--leaf);
    background: var(--leaf-soft);
}

.link-list strong {
    font-size: 0.88rem;
}

.link-list span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.73rem;
}

.faq-list {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
}

.faq-item > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item > summary::before {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    content: "";
    transform: rotate(-45deg);
    transition: transform 180ms ease-out;
}

.faq-item[open] > summary::before {
    transform: rotate(45deg);
}

.faq-item > summary:hover {
    background: var(--surface);
}

.faq-item > div {
    padding: 0 16px 15px 34px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.faq-item p {
    margin: 0 0 10px;
}

.faq-item p:last-child {
    margin-bottom: 0;
}

.contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.contact-list strong {
    font-size: 0.9rem;
}

.contact-list a {
    font-size: 0.82rem;
    word-break: break-all;
}

.contact-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .conf-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Gene family search ------------------------------------------------------------ */

.family-form {
    display: grid;
    gap: 18px;
}

.family-field {
    display: grid;
    gap: 5px;
    max-width: 520px;
}

.family-field label span {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 720;
}

.family-field input {
    width: 100%;
    background: var(--bg);
}

.field-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
}

.species-picker {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.species-picker legend {
    padding: 0 6px;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 720;
}

.species-picker legend small {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.species-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 16px;
    margin-bottom: 10px;
}

.species-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.83rem;
    cursor: pointer;
}

.species-check:hover {
    background: var(--surface);
}

.species-check input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    accent-color: var(--leaf);
}

.family-filter {
    width: 100%;
    max-width: 320px;
    margin-bottom: 10px;
    background: var(--bg);
}

/* Synteny table */
.gene-field-narrow {
    flex: 0 1 200px;
}

.syn-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.2fr) minmax(220px, 1fr) 170px auto;
    gap: 14px;
    align-items: end;
}

.syn-gene-field {
    min-width: 0;
}

.syn-actions {
    white-space: nowrap;
}

.syn-coverage {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.syn-coverage:empty {
    display: none;
}

.syn-query-card dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.syn-block {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.syn-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 13px;
    border-bottom: 1px solid var(--border);
}

.syn-block-head p,
.syn-block-head h2 {
    margin: 0;
}

.syn-block-head p {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.syn-block-head h2 {
    margin-top: 3px;
    font-size: 0.98rem;
}

.syn-orientation {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--leaf-soft);
    color: var(--leaf);
    font-size: 0.72rem;
    font-weight: 720;
}

.syn-orientation.reverse {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.syn-block-summary {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.syn-block-summary div {
    min-width: 0;
    padding: 11px 16px;
    border-right: 1px solid var(--border);
}

.syn-block-summary div:last-child {
    border-right: 0;
}

.syn-block-summary dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 720;
    text-transform: uppercase;
}

.syn-block-summary dd {
    margin: 3px 0 0;
    overflow: hidden;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.syn-context-table {
    min-width: 900px;
}

.syn-table td {
    white-space: nowrap;
}

.syn-gene {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    text-decoration: none;
}

.syn-gene:hover {
    color: var(--berry);
    text-decoration: underline;
}

.syn-anchor {
    background: var(--warning-soft);
}

.syn-anchor td {
    font-weight: 700;
}

.syn-anchor .syn-gene {
    color: var(--primary-dark);
}

.syn-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 16px 12px;
    color: var(--muted);
    font-size: 0.76rem;
}

.syn-swatch {
    display: inline-block;
    width: 22px;
    height: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--warning-soft);
}

.syn-location {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.71rem;
    white-space: nowrap;
}

@media (max-width: 1160px) {
    .syn-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .syn-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .syn-form-grid,
    .syn-query-card dl,
    .syn-block-summary {
        grid-template-columns: 1fr;
    }

    .syn-block-summary div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .syn-block-summary div:last-child {
        border-bottom: 0;
    }

    .syn-block-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.family-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 14px;
    max-height: 260px;
    margin-bottom: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.family-checkboxes .species-check span small {
    display: block;
    color: var(--muted);
    font-size: 0.66rem;
}

.tf-type-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.tf-type-label {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 720;
}

.tf-type-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-size: 0.84rem;
    cursor: pointer;
}

.tf-type-row input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    accent-color: var(--leaf);
}

.tf-species-blocks {
    display: grid;
    gap: 14px;
    padding: 0 14px 14px;
}

.tf-species-block h4 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 0.84rem;
    color: var(--leaf);
}

.tf-species-block h4 span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.tf-species-block .family-gene-list {
    max-height: 200px;
    padding: 0;
}

.family-groups {
    display: grid;
    gap: 10px;
}

.family-group {
    border: 1px solid var(--border);
    border-radius: 10px;
}

.family-group > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
}

.family-group > summary::-webkit-details-marker {
    display: none;
}

.family-group > summary::before {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    content: "";
    transform: rotate(-45deg);
    transition: transform 180ms ease-out;
}

.family-group[open] > summary::before {
    transform: rotate(45deg);
}

.family-group > summary:hover {
    background: var(--surface);
}

.family-species {
    font-size: 0.9rem;
    font-weight: 700;
}

.family-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.family-gene-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 320px;
    padding: 0 14px 14px;
    overflow-y: auto;
}

.family-gene-list a {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-decoration: none;
}

.family-gene-list a:hover {
    border-color: var(--leaf);
    background: var(--leaf-soft);
    color: var(--leaf);
}

/* TF v2 catalogue ------------------------------------------------------------- */

.tf-page {
    padding-bottom: 56px;
}

.tf-heading {
    align-items: end;
}

.tf-release-line {
    display: grid;
    gap: 3px;
    max-width: 520px;
    padding: 9px 0 9px 18px;
    border-left: 1px solid var(--border);
    text-align: right;
}

.tf-release-line strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.tf-release-line span {
    color: var(--muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.tf-filter-head,
.tf-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.tf-filter-head {
    margin-bottom: 18px;
}

.tf-filter-head h2,
.tf-results-head h2 {
    margin: 0;
    font-size: 1rem;
}

.tf-filter-head p,
.tf-results-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.tf-compact-form {
    gap: 14px;
}

.tf-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tf-select-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.tf-select-field > span {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 720;
}

.tf-select-field select {
    width: 100%;
    min-height: 44px;
    padding: 8px 38px 8px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
}

.tf-select-field select:hover {
    border-color: var(--muted);
}

.tf-select-field select:focus-visible {
    border-color: var(--leaf);
    outline: 2px solid color-mix(in srgb, var(--leaf) 24%, transparent);
    outline-offset: 1px;
}

.tf-select-field small {
    color: var(--muted);
    font-size: 0.7rem;
}

.species-checkboxes .species-check span,
.family-checkboxes .species-check span {
    min-width: 0;
}

.species-checkboxes .species-check span small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.66rem;
    font-style: normal;
}

.tf-assembly-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 5px 12px;
    max-height: 300px;
    margin-bottom: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.tf-assembly-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--ink);
    cursor: pointer;
}

.tf-assembly-option:hover {
    background: var(--surface);
}

.tf-assembly-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.72;
}

.tf-assembly-option input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-top: 2px;
    accent-color: var(--leaf);
}

.tf-assembly-option span {
    min-width: 0;
}

.tf-assembly-option strong,
.tf-assembly-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-assembly-option strong {
    font-size: 0.78rem;
    font-weight: 650;
}

.tf-assembly-option small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.66rem;
}

.tf-quality,
.tf-evidence {
    display: inline-flex;
    width: max-content;
    border-radius: 999px;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 700;
}

.tf-quality {
    padding: 2px 7px;
    background: var(--leaf-soft);
    color: var(--leaf);
}

.tf-quality.review {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.tf-quality.excluded {
    background: var(--error-soft);
    color: var(--error);
}

.tf-results {
    margin-top: 26px;
    padding: 20px 0 4px;
    border-top: 1px solid var(--border);
}

.tf-results-head {
    align-items: center;
    padding-bottom: 16px;
}

.tf-results-head > strong {
    color: var(--berry);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.tf-release-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tf-release-facts.family-release-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tf-release-facts > div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--border);
}

.tf-release-facts > div:last-child {
    border-right: 0;
}

.tf-release-facts dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.tf-release-facts dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-data-note {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--warning-soft);
    color: var(--primary-dark);
    font-size: 0.76rem;
}

.tf-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 28px;
    margin-top: 22px;
}

.tf-summary-table-wrap,
.tf-table-wrap {
    overflow-x: auto;
}

.tf-summary-table,
.tf-result-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
    font-size: 0.78rem;
}

.tf-summary-table caption,
.tf-result-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tf-summary-table th,
.tf-summary-table td,
.tf-result-table th,
.tf-result-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.tf-summary-table thead th,
.tf-result-table thead th {
    background: var(--surface);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.tf-summary-table tbody th {
    font-weight: 600;
}

.tf-summary-table td {
    font-variant-numeric: tabular-nums;
}

.tf-family-index h3 {
    margin: 0;
    font-size: 0.9rem;
}

.tf-family-index > p {
    margin: 4px 0 10px;
    color: var(--muted);
    font-size: 0.75rem;
}

.tf-family-index > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 430px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}

.tf-family-index button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tf-family-index button:nth-child(odd) {
    border-right: 1px solid var(--border);
}

.tf-family-index button:hover,
.tf-family-index button:focus-visible {
    background: var(--leaf-soft);
    color: var(--leaf);
}

.tf-family-index button:focus-visible,
.tf-assembly-option:has(input:focus-visible),
.species-check:has(input:focus-visible) {
    outline: 2px solid var(--leaf);
    outline-offset: 2px;
}

.tf-family-index small {
    color: var(--muted);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.family-index-section + .family-index-section {
    margin-top: 14px;
}

.family-index-section h4 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 720;
}

.family-index-section > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.family-review-note {
    display: block;
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 0.66rem;
}

.tf-result-table {
    min-width: 1080px;
}

.tf-result-table tbody tr:hover {
    background: var(--surface);
}

.tf-result-table td:first-child {
    min-width: 180px;
}

.tf-result-table td:first-child small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
}

.tf-gene-link,
.tf-arabidopsis {
    font-family: var(--font-mono);
    font-size: 0.74rem;
}

a.tf-arabidopsis {
    color: var(--berry);
    font-weight: 700;
    text-decoration: none;
}

a.tf-arabidopsis:hover {
    text-decoration: underline;
}

.tf-gene-link {
    color: var(--berry);
    font-weight: 700;
    text-decoration: none;
}

.tf-gene-link:hover {
    text-decoration: underline;
}

.tf-evidence {
    padding: 3px 7px;
    background: var(--leaf-soft);
    color: var(--leaf);
    white-space: nowrap;
}

.tf-none {
    color: var(--muted);
}

.tf-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
}

.tf-pagination span {
    color: var(--muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.tf-method {
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
}

.tf-method summary {
    width: max-content;
    color: var(--berry);
    cursor: pointer;
    font-weight: 700;
}

.tf-method > div {
    max-width: 92ch;
    padding-top: 8px;
    line-height: 1.6;
}

.tf-method p {
    margin: 0 0 7px;
}

@media (max-width: 860px) {
    .tf-heading,
    .tf-filter-head,
    .tf-results-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tf-release-line {
        max-width: none;
        padding: 8px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
        text-align: left;
    }

    .tf-release-facts,
    .tf-summary-layout {
        grid-template-columns: 1fr 1fr;
    }

    .tf-release-facts > div:nth-child(2) {
        border-right: 0;
    }

    .tf-release-facts > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    .tf-summary-table-wrap,
    .tf-family-index {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .gene-search-panel {
        padding: 18px 16px;
    }

    .gene-actions {
        width: 100%;
    }

    .gene-actions .button {
        flex: 1;
    }

    .tf-select-grid {
        grid-template-columns: 1fr;
    }

    .tf-release-facts,
    .tf-release-facts.family-release-facts,
    .tf-summary-layout {
        grid-template-columns: 1fr;
    }

    .tf-release-facts > div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .tf-release-facts > div:last-child {
        border-bottom: 0;
    }

    .tf-family-index > div {
        grid-template-columns: 1fr;
    }

    .family-index-section > div {
        grid-template-columns: 1fr;
    }

    .tf-family-index button:nth-child(odd) {
        border-right: 0;
    }

    .tf-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .tf-pagination .button {
        width: 100%;
    }
}

/* Transcriptome workspace ----------------------------------------------------- */

.tx-page {
    display: grid;
    gap: 24px;
    padding-bottom: 56px;
}

.tx-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    padding: 36px 0 24px;
    border-bottom: 1px solid var(--border-strong);
}

.tx-header h1,
.tx-header p {
    margin: 0;
}

.tx-header h1 {
    font-size: 2.25rem;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
}

.tx-header p {
    max-width: 68ch;
    margin-top: 10px;
    color: var(--muted);
    font-size: 1.05rem;
    text-wrap: pretty;
}

.tx-dataset-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
}

.tx-dataset-facts div {
    min-width: 92px;
    padding: 0 18px;
    border-right: 1px solid var(--border);
}

.tx-dataset-facts div:first-child {
    padding-left: 0;
}

.tx-dataset-facts div:last-child {
    padding-right: 0;
    border-right: 0;
}

.tx-dataset-facts dt,
.tx-dataset-facts dd {
    margin: 0;
}

.tx-dataset-facts dt {
    color: var(--muted);
    font-size: 0.82rem;
}

.tx-dataset-facts dd {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.tx-dataset-tabs {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
}

.tx-dataset-tabs button {
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 650;
    line-height: 1.15;
    text-align: left;
}

.tx-dataset-tabs small {
    display: block;
    margin-top: 3px;
    color: inherit;
    font-size: 0.72rem;
    font-weight: 500;
}

.tx-dataset-tabs button:hover {
    color: var(--ink);
}

.tx-dataset-tabs button[aria-pressed="true"] {
    border-color: var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.tx-dataset-tabs button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tx-dataset-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 720px);
}

.tx-dataset-selector label {
    color: var(--ink);
    font-weight: 700;
}

.tx-dataset-selector select {
    min-width: min(460px, 100%);
    min-height: 42px;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
}

.tx-dataset-selector span {
    color: var(--muted);
    font-size: 0.82rem;
}

.tx-view-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--border);
}

.tx-view-tabs button {
    position: relative;
    min-height: 64px;
    padding: 8px 2px 12px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

.tx-view-tabs button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: transparent;
    content: "";
}

.tx-view-tabs button:hover {
    color: var(--ink);
}

.tx-view-tabs button[aria-selected="true"] {
    color: var(--ink);
    font-weight: 750;
}

.tx-view-tabs button[aria-selected="true"]::after {
    background: var(--berry);
}

.tx-view-tabs small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.tx-panel[hidden] {
    display: none;
}

.tx-panel {
    min-width: 0;
}

.tx-workspace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 620px;
    overflow: clip;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg);
}

.tx-controls {
    padding: 24px 22px;
    border-right: 1px solid var(--border);
    background: var(--surface);
}

.tx-controls h2,
.tx-controls p {
    margin: 0;
}

.tx-controls h2 {
    font-size: 1.2rem;
}

.tx-controls > div:first-child > p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.88rem;
}

.tx-form {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

.tx-form-field {
    display: grid;
    gap: 8px;
}

.tx-form-field[hidden] {
    display: none;
}

.tx-form label {
    margin-top: 7px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
}

.tx-form label small {
    color: var(--muted);
    font-weight: 400;
}

.tx-form input,
.tx-form select,
.tx-form textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--bg);
    color: var(--ink);
}

.tx-form input,
.tx-form textarea {
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.tx-form textarea {
    min-height: 205px;
    resize: vertical;
    line-height: 1.55;
}

.tx-form input:hover,
.tx-form select:hover,
.tx-form textarea:hover {
    border-color: var(--primary);
}

.tx-form .button {
    width: 100%;
    margin-top: 8px;
}

.tx-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.tx-examples > span {
    width: 100%;
    color: var(--muted);
    font-size: 0.8rem;
}

.tx-examples button {
    min-height: 30px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--berry);
    cursor: pointer;
    font-size: 0.78rem;
}

.tx-examples button:hover {
    border-color: var(--berry);
    background: var(--berry-soft);
}

.tx-controls .gene-status {
    margin: 12px 0 0;
}

.tx-method-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.82rem;
}

.tx-method-note strong {
    color: var(--ink);
}

.tx-method-note p {
    margin-top: 4px;
}

.tx-output {
    min-width: 0;
    padding: 26px 28px 30px;
}

.tx-result-header,
.tx-heatmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.tx-result-header h2,
.tx-result-header p,
.tx-heatmap-header h2,
.tx-heatmap-header p {
    margin: 0;
}

.tx-result-header h2 {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.tx-result-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.tx-result-title span {
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.tx-result-header p,
.tx-heatmap-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.88rem;
}

.tx-profile-summary {
    display: flex;
    margin: 22px 0 26px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tx-profile-summary div {
    flex: 1;
    min-width: 0;
    padding: 15px 18px;
    border-right: 1px solid var(--border);
}

.tx-profile-summary div:first-child {
    padding-left: 0;
}

.tx-profile-summary div:last-child {
    padding-right: 0;
    border-right: 0;
}

.tx-profile-summary dt,
.tx-profile-summary dd {
    margin: 0;
}

.tx-profile-summary dt,
.tx-profile-summary small {
    color: var(--muted);
    font-size: 0.78rem;
}

.tx-profile-summary dd {
    margin-top: 2px;
    font-size: 1.08rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.tx-profile-summary small {
    display: block;
}

.tx-figure-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(520px, 1.22fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tx-figure {
    min-width: 0;
    padding: 22px 24px 24px 0;
}

.tx-figure + .tx-figure {
    padding-right: 0;
    padding-left: 26px;
    border-left: 1px solid var(--border);
}

.tx-figure-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
}

.tx-figure-heading h3,
.tx-figure-heading p {
    margin: 0;
}

.tx-figure-heading h3 {
    font-size: 1.05rem;
}

.tx-figure-heading p {
    color: var(--muted);
    font-size: 0.8rem;
}

.tx-figure-heading label {
    color: var(--muted);
    font-size: 0.76rem;
}

.tx-figure-heading select {
    display: block;
    min-height: 34px;
    margin-top: 3px;
    padding: 3px 25px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
}

.tx-tissue-bars {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.tx-tissue-row {
    display: grid;
    grid-template-columns: 82px minmax(72px, 1fr) 64px;
    gap: 9px;
    align-items: center;
    font-size: 0.82rem;
}

.tx-tissue-row > span {
    font-weight: 700;
}

.tx-tissue-row > strong {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tx-tissue-track {
    height: 13px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--surface-strong);
}

.tx-tissue-track i {
    display: block;
    height: 100%;
    min-width: 1px;
    border-radius: inherit;
    transition: width 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.tx-svg-wrap {
    min-width: 0;
    margin-top: 8px;
    overflow-x: auto;
}

.tx-boxplot {
    display: block;
    width: 100%;
    min-width: 650px;
    height: auto;
}

.tx-grid-line {
    stroke: var(--border);
    stroke-width: 1;
}

.tx-axis-line,
.tx-whisker {
    stroke: var(--border-strong);
    stroke-width: 1.2;
}

.tx-axis-text,
.tx-axis-label,
.tx-axis-title {
    fill: var(--muted);
    font-family: var(--font-ui);
    font-size: 12px;
}

.tx-axis-label {
    fill: var(--ink);
    font-size: 12.5px;
    font-weight: 650;
}

.tx-box {
    fill-opacity: 0.24;
    stroke: currentColor;
    stroke-width: 1.2;
}

.tx-median {
    stroke: var(--ink);
    stroke-width: 2;
}

.tx-sample-dot {
    fill-opacity: 0.52;
    stroke: var(--bg);
    stroke-width: 0.8;
}

.tx-development-figure {
    padding: 22px 0 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tx-development-figure h3 {
    margin: 0;
    font-size: 1.05rem;
}

.tx-development-chart {
    display: block;
    width: 100%;
    min-width: 620px;
    height: auto;
}

.tx-condition-bar {
    fill-opacity: 0.88;
    transition: fill-opacity 160ms cubic-bezier(0.25, 1, 0.5, 1);
}

.tx-condition-bar:hover {
    fill-opacity: 1;
}

.tx-bar-value {
    fill: var(--ink);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tx-condition-group {
    fill: var(--ink);
    font-family: var(--font-ui);
    font-size: 13px;
    font-style: italic;
    font-weight: 750;
}

.tx-condition-divider {
    stroke: var(--border-strong);
    stroke-dasharray: 4 5;
    stroke-width: 1;
}

.tx-data-table {
    margin-top: 22px;
}

.tx-data-table h3 {
    margin: 0;
    font-size: 1.05rem;
}

.tx-data-table .gene-table-wrap {
    margin-top: 12px;
}

.tx-empty {
    display: grid;
    min-height: 440px;
    place-content: center;
    text-align: center;
}

.tx-empty h2,
.tx-empty p {
    margin: 0;
}

.tx-empty p {
    max-width: 48ch;
    margin-top: 6px;
    color: var(--muted);
}

.tx-loading {
    margin: 0;
    border: 0;
}

.tx-heatmap-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.tx-heatmap-header h2 {
    font-size: 1.2rem;
}

.tx-missing {
    margin: 14px 0;
    padding: 9px 11px;
    border: 1px solid var(--warning);
    border-radius: 7px;
    background: var(--warning-soft);
    color: var(--ink);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.tx-heatmap-scroll {
    max-width: 100%;
    margin-top: 18px;
    overflow: auto;
    border: 1px solid var(--border);
}

.tx-heatmap-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.76rem;
}

.tx-condition-heatmap {
    min-width: 860px;
}

.tx-condition-heatmap .tx-heatmap-groups th {
    height: 34px;
}

.tx-condition-heatmap thead tr:nth-child(2) th {
    top: 34px;
    left: auto;
    z-index: 2;
}

.tx-heatmap-table th,
.tx-heatmap-table td {
    min-width: 86px;
    height: 50px;
    padding: 5px 7px;
    border-right: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
    text-align: center;
}

.tx-heatmap-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    color: var(--ink);
    font-weight: 750;
    white-space: normal;
}

.tx-heatmap-table thead th:first-child,
.tx-heatmap-table tbody th {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 202px;
    background: var(--bg);
    text-align: left;
}

.tx-heatmap-table thead th:first-child {
    z-index: 4;
    background: var(--surface);
}

.tx-heatmap-table tr:last-child th,
.tx-heatmap-table tr:last-child td {
    border-bottom: 0;
}

.tx-heatmap-table th:last-child,
.tx-heatmap-table td:last-child {
    border-right: 0;
}

.tx-heatmap-table tbody th button {
    min-height: 32px;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    text-align: left;
}

.tx-heatmap-table tbody th button:hover {
    text-decoration: underline;
}

.tx-heatmap-table td {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.tx-legend {
    display: grid;
    grid-template-columns: auto minmax(180px, 320px) auto auto;
    gap: 10px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.76rem;
}

.tx-legend i {
    width: 100%;
    height: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.tx-heatmap-help {
    max-width: 78ch;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.tx-provenance {
    display: grid;
    grid-template-columns: minmax(210px, 0.48fr) minmax(0, 1.52fr);
    column-gap: 44px;
    row-gap: 22px;
    padding: 30px 0 26px;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border);
}

.tx-provenance h2,
.tx-provenance p,
.tx-provenance dl,
.tx-provenance dd {
    margin: 0;
}

.tx-provenance h2 {
    font-size: 1.15rem;
}

.tx-provenance-heading {
    grid-row: 1 / span 2;
}

.tx-provenance-heading .eyebrow {
    margin-bottom: 7px;
}

.tx-provenance-heading > p:last-child {
    margin-top: 10px;
}

.tx-provenance p,
.tx-methods-list dd {
    max-width: 76ch;
    color: var(--muted);
}

.tx-methods-list {
    border-top: 1px solid var(--border);
}

.tx-methods-list > div {
    display: grid;
    grid-template-columns: minmax(126px, 0.3fr) minmax(0, 1.7fr);
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.tx-methods-list dt {
    color: var(--ink);
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tx-methods-list dd {
    line-height: 1.65;
}

.tx-methods-list .tx-method-warning {
    border-bottom-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

.tx-method-warning dt,
.tx-method-warning dd {
    color: var(--warning-ink, #7a4a00);
}

.tx-provenance-footer {
    grid-column: 2;
}

.tx-provenance-footer > p:first-child {
    font-size: 0.83rem;
    line-height: 1.6;
}

.tx-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px !important;
}

.tx-links a {
    font-weight: 700;
}

/* Cultivated strawberry eFP -------------------------------------------------- */

.tx-efp-workspace {
    overflow: clip;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg);
}

.tx-efp-toolbar {
    display: grid;
    grid-template-columns: minmax(230px, 0.75fr) minmax(420px, 1.25fr) auto;
    gap: 28px;
    align-items: end;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.tx-efp-toolbar h2,
.tx-efp-toolbar p,
.tx-efp-result h2,
.tx-efp-result h3,
.tx-efp-result h4,
.tx-efp-result p {
    margin: 0;
}

.tx-efp-intro h2 {
    font-size: 1.2rem;
}

.tx-efp-intro p {
    max-width: 48ch;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.84rem;
}

.tx-efp-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 750;
}

.tx-efp-form > div {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto;
    gap: 8px;
}

.tx-efp-form input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.84rem;
}

.tx-efp-form input:hover {
    border-color: var(--primary);
}

.tx-efp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 260px;
}

.tx-efp-actions > span {
    width: 100%;
    color: var(--muted);
    font-size: 0.76rem;
}

.tx-efp-actions button {
    min-height: 30px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--berry);
    cursor: pointer;
    font-size: 0.76rem;
}

.tx-efp-actions button:hover {
    border-color: var(--berry);
    background: var(--berry-soft);
}

.tx-efp-status {
    min-height: 0;
    margin: 0;
    padding: 0 24px;
}

.tx-efp-status:not(:empty) {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}

.tx-efp-result {
    padding: 22px 24px 26px;
    transition: opacity 160ms ease;
}

.tx-efp-result.is-loading {
    cursor: progress;
    opacity: 0.54;
}

.tx-efp-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.tx-efp-result-header h2 {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.tx-efp-result-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.86rem;
}

.tx-efp-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tx-efp-scale-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.82rem;
}

.tx-efp-scale-note strong {
    color: var(--ink);
}

.tx-efp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 0;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

.tx-efp-figure {
    min-width: 0;
    padding: 20px 26px 0 0;
}

.tx-efp-figure-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 22px;
}

.tx-efp-figure-heading h3,
.tx-efp-values-heading h3 {
    font-size: 1.03rem;
}

.tx-efp-figure-heading p,
.tx-efp-values-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
}

.tx-efp-legends {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 190px));
    gap: 12px;
}

.tx-efp-legend {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 0.7rem;
}

.tx-efp-legend > span {
    color: var(--ink);
    font-weight: 700;
}

.tx-efp-legend i {
    display: block;
    height: 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: linear-gradient(90deg, #fff8cf, #f5aa35 55%, #a92d3f);
}

.tx-efp-legend small {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.tx-efp-legend b {
    font-weight: 600;
}

.tx-efp-artwork-wrap {
    position: relative;
    min-height: 500px;
    margin-top: 8px;
}

.tx-efp-artwork {
    display: block;
    width: 100%;
    min-height: 500px;
    aspect-ratio: 3 / 2;
    border: 0;
    background: #fff;
}

.tx-efp-tooltip {
    position: absolute;
    z-index: 3;
    display: grid;
    min-width: 178px;
    max-width: 230px;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid color-mix(in oklch, var(--ink) 22%, var(--border));
    border-radius: 7px;
    background: color-mix(in oklch, var(--bg) 96%, transparent);
    box-shadow: 0 8px 22px color-mix(in oklch, var(--ink) 12%, transparent);
    color: var(--ink);
    pointer-events: none;
}

.tx-efp-tooltip[hidden] {
    display: none;
}

.tx-efp-tooltip strong,
.tx-efp-tooltip span,
.tx-efp-tooltip small {
    display: block;
}

.tx-efp-tooltip span {
    color: var(--berry);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tx-efp-tooltip small {
    color: var(--muted);
    font-size: 0.7rem;
}

.tx-efp-values {
    padding: 20px 0 0 24px;
    border-left: 1px solid var(--border);
}

.tx-efp-values > section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.tx-efp-project-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tx-efp-project-heading h4 {
    font-size: 0.9rem;
}

.tx-efp-project-heading a {
    color: var(--berry);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
}

.tx-efp-values > section > p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.73rem;
}

.tx-efp-value-list {
    display: grid;
    margin-top: 9px;
}

.tx-efp-value-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    min-height: 45px;
    padding: 6px 2px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

.tx-efp-value-row:hover {
    background: var(--surface);
}

.tx-efp-value-row > i {
    width: 10px;
    height: 30px;
    border: 1px solid color-mix(in oklch, var(--ink) 18%, var(--border));
    border-radius: 2px;
}

.tx-efp-value-row > span,
.tx-efp-value-row > span strong,
.tx-efp-value-row > span small {
    display: block;
    min-width: 0;
}

.tx-efp-value-row > span strong {
    font-size: 0.79rem;
}

.tx-efp-value-row > span small {
    margin-top: 1px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-efp-value-row > b {
    color: var(--ink);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tx-efp-value-row > b small {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .tx-tissue-track i,
    .tx-efp-result {
        transition: none;
    }
}

@media (max-width: 1100px) {
    .tx-header {
        align-items: start;
        flex-direction: column;
    }

    .tx-dataset-facts {
        justify-content: flex-start;
    }

    .tx-workspace {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .tx-figure-grid {
        grid-template-columns: 1fr;
    }

    .tx-figure,
    .tx-figure + .tx-figure {
        padding: 22px 0;
        border-left: 0;
    }

    .tx-figure + .tx-figure {
        border-top: 1px solid var(--border);
    }

    .tx-efp-toolbar {
        grid-template-columns: minmax(220px, 0.7fr) minmax(380px, 1.3fr);
    }

    .tx-efp-actions {
        grid-column: 1 / -1;
        max-width: none;
    }

    .tx-efp-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .tx-efp-figure-heading {
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .tx-header {
        padding-top: 24px;
    }

    .tx-header h1 {
        font-size: 1.8rem;
    }

    .tx-dataset-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tx-dataset-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tx-dataset-selector {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .tx-dataset-selector select {
        width: 100%;
    }

    .tx-dataset-tabs button {
        padding-right: 8px;
        padding-left: 8px;
    }

    .tx-dataset-facts div,
    .tx-dataset-facts div:first-child,
    .tx-dataset-facts div:last-child {
        padding: 8px 12px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .tx-dataset-facts div:nth-child(even) {
        border-right: 0;
    }

    .tx-view-tabs {
        gap: 16px;
    }

    .tx-view-tabs button {
        flex: 1;
    }

    .tx-workspace {
        display: block;
        overflow: visible;
    }

    .tx-controls {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .tx-output {
        padding: 20px 16px 24px;
    }

    .tx-efp-toolbar,
    .tx-efp-layout {
        display: block;
    }

    .tx-efp-form,
    .tx-efp-actions {
        margin-top: 18px;
    }

    .tx-efp-result {
        padding: 20px 16px 24px;
    }

    .tx-efp-result-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tx-efp-scale-note {
        grid-template-columns: 1fr;
    }

    .tx-efp-figure {
        padding-right: 0;
    }

    .tx-efp-legends {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tx-efp-artwork-wrap,
    .tx-efp-artwork {
        min-height: 0;
    }

    .tx-efp-values {
        margin-top: 22px;
        padding: 20px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .tx-result-header,
    .tx-heatmap-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tx-profile-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tx-profile-summary div,
    .tx-profile-summary div:first-child,
    .tx-profile-summary div:last-child {
        padding: 12px 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .tx-profile-summary div:last-child {
        border-bottom: 0;
    }

    .tx-figure-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .tx-figure-heading label {
        width: 132px;
    }

    .tx-tissue-row {
        grid-template-columns: 78px minmax(70px, 1fr) 58px;
    }

    .tx-legend {
        grid-template-columns: auto minmax(120px, 1fr) auto;
        width: 100%;
    }

    .tx-legend span:nth-last-child(2) {
        display: none;
    }

    .tx-provenance {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tx-provenance-heading {
        grid-row: auto;
    }

    .tx-provenance-footer {
        grid-column: auto;
    }

    .tx-methods-list > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* Metabolomics: study-scoped matrices and feature annotations. */
.met-page {
    padding-top: 30px;
}

.met-heading {
    margin-bottom: 22px;
}

.met-heading p {
    max-width: 70ch;
}

#metStatus:empty,
#metSearchStatus:empty {
    display: none;
}

.met-single-study .met-heading {
    margin-bottom: 10px;
}

.met-single-study .met-study-summary {
    margin-top: 12px;
}

.met-filter-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.met-study-filter {
    grid-column: span 2;
}

.met-filter-bar label,
.met-search-form label,
.met-assay-toolbar label,
.met-inline-control,
.met-box-controls label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 700;
}

.met-filter-bar select,
.met-search-form input,
.met-assay-toolbar select,
.met-inline-control select,
.met-box-controls select {
    width: 100%;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.met-study-summary {
    margin-top: 28px;
    padding: 8px 0 26px;
    border-bottom: 1px solid var(--border-strong);
}

.met-accession {
    margin: 0 0 4px;
    color: var(--berry);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 700;
}

.met-study-copy h2 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.met-study-copy > p:not(.met-accession) {
    max-width: 72ch;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.65;
}

.met-study-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 14px 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.met-capability {
    padding: 5px 9px;
    border-radius: 999px;
    background: oklch(0.94 0.025 145);
    color: oklch(0.36 0.09 145);
    font-weight: 750;
}

.met-capability.sparse {
    background: oklch(0.95 0.035 75);
    color: oklch(0.40 0.10 65);
}

.met-capability.none {
    background: var(--surface);
    color: var(--muted);
}

.met-study-meta details,
.met-assay-meta details {
    position: relative;
}

.met-study-meta summary,
.met-assay-meta summary {
    color: var(--berry);
    cursor: pointer;
    font-weight: 700;
}

.met-study-meta details[open] ul,
.met-assay-meta details[open] ul {
    width: min(680px, calc(100vw - 48px));
    margin: 8px 0 0;
    padding: 12px 14px 12px 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
    line-height: 1.5;
}

.met-section,
.met-viz-section {
    margin-top: 28px;
}

.met-section-head,
.met-assay-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
}

.met-section-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.met-section-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.met-table-scroll,
.met-canvas-scroll {
    max-width: 100%;
    overflow: auto;
}

.met-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.met-table th,
.met-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.met-table th {
    color: var(--muted);
    font-weight: 750;
    white-space: nowrap;
}

.met-table tbody tr:hover {
    background: var(--surface);
}

.met-table td small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.met-pagination {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    padding: 10px 0 0;
}

.met-pagination .button {
    align-self: auto;
}

.met-pagination span {
    min-width: 150px;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.met-assay-toolbar {
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.met-assay-toolbar label {
    width: min(390px, 100%);
}

.met-assay-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.met-assay-meta span,
.met-evidence {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 700;
}

.met-assay-meta details {
    align-self: center;
    font-size: var(--text-caption);
}

.met-empty {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}

.met-empty h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.met-empty p {
    max-width: 75ch;
    margin: 0 0 8px;
    color: var(--muted);
}

.met-viz-section {
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 28px;
}

.met-viz-section canvas {
    display: block;
    max-width: none;
    margin-top: 16px;
}

#metHeatmap {
    min-width: 100%;
}

#metPca {
    width: 100%;
    max-width: 100%;
}

.met-inline-control {
    width: 220px;
}

.met-box-controls {
    display: flex;
    gap: 12px;
}

.met-box-controls label:first-child {
    width: 290px;
}

.met-box-controls label:last-child {
    width: 190px;
}

.met-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.met-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.met-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--legend);
}

.met-search-form {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 160px 140px auto;
    gap: 12px;
    align-items: end;
    padding: 16px 0;
}

.met-search-form .button {
    min-width: 100px;
}

.met-search-section {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.met-search-section .met-section-head {
    padding-bottom: 8px;
}

.met-canonical-status {
    max-width: 75ch;
}

.met-canonical-status strong {
    color: var(--ink);
    font-weight: 780;
}

.met-canonical-line.identifier_mapped {
    color: oklch(0.38 0.09 145);
    font-weight: 700;
}

.met-canonical-line.needs_review {
    color: oklch(0.42 0.11 62);
    font-weight: 700;
}

.met-search-section .met-table-scroll {
    margin-inline: -20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.met-search-section .met-table th:first-child,
.met-search-section .met-table td:first-child {
    padding-left: 20px;
}

.met-search-section .met-table th:last-child,
.met-search-section .met-table td:last-child {
    padding-right: 20px;
}

.met-tooltip {
    position: fixed;
    z-index: 60;
    width: min(230px, calc(100vw - 24px));
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 4px 8px oklch(0.18 0.02 55 / 0.16);
    pointer-events: none;
    font-size: var(--text-caption);
    line-height: 1.45;
}

.met-tooltip strong,
.met-tooltip span {
    display: block;
}

.met-tooltip span {
    color: var(--muted);
}

.met-detail-button {
    min-width: 68px;
    padding: 7px 12px;
}

.met-detail-dialog {
    width: min(1080px, calc(100vw - 32px));
    max-height: min(90vh, 920px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--bg);
    color: var(--ink);
}

.met-detail-dialog::backdrop {
    background: oklch(0.22 0.02 45 / 0.56);
}

.met-detail-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.met-detail-header h2,
.met-detail-section h3 {
    margin: 0;
}

.met-dialog-close {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
}

.met-dialog-close:hover {
    border-color: var(--berry);
    color: var(--berry);
}

.met-detail-body {
    padding: 0 24px 28px;
}

.met-detail-loading {
    padding: 32px 0;
    color: var(--muted);
}

.met-detail-section {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}

.met-detail-section:last-child {
    border-bottom: 0;
}

.met-detail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--border);
}

.met-detail-summary > div {
    min-width: 0;
    padding: 13px 15px;
    background: var(--surface);
}

.met-detail-summary span,
.met-detail-summary strong {
    display: block;
}

.met-detail-summary span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.met-detail-summary strong {
    overflow-wrap: anywhere;
}

.met-detail-list {
    margin: 14px 0 0;
}

.met-detail-list > div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.met-detail-list > div:last-child {
    border-bottom: 0;
}

.met-detail-list dt {
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 700;
}

.met-detail-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.met-code-value {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--text-small);
}

.met-structure-section {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.met-structure-image-wrap {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.met-structure-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.met-detail-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.met-detail-section-head p,
.met-detail-message p,
.met-detail-note {
    color: var(--muted);
}

.met-detail-section-head p {
    margin: 3px 0 0;
    font-size: var(--text-small);
}

.met-curation-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 780;
}

.met-curation-badge.identifier_mapped {
    background: oklch(0.94 0.025 145);
    color: oklch(0.36 0.09 145);
}

.met-curation-badge.needs_review {
    background: oklch(0.95 0.035 75);
    color: oklch(0.40 0.10 65);
}

.met-canonical-summary {
    max-width: 680px;
    margin-top: 18px;
}

.met-evidence-table {
    margin-top: 18px;
    border-top: 1px solid var(--border);
}

.met-evidence-table .met-table {
    min-width: 760px;
}

.met-evidence-table td:first-child {
    min-width: 190px;
}

.met-spectrum-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 2px;
}

.met-spectrum-meta span {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 700;
}

.met-spectrum {
    display: block;
    max-width: none;
    margin-top: 12px;
}

.met-detail-note {
    margin: 12px 0 0;
    font-size: var(--text-caption);
    line-height: 1.55;
}

.met-detail-compact {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-block: 18px;
}

.met-detail-compact h3 {
    flex: 0 0 auto;
    font-size: 1rem;
}

.met-detail-compact p {
    margin: 0;
    font-size: var(--text-small);
}

.gene-card-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.met-evidence-correlation {
    border-color: var(--berry);
    color: var(--berry);
}

@media (max-width: 1180px) {
    .met-filter-bar {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 760px) {
    .met-filter-bar,
    .met-study-summary,
    .met-search-form {
        grid-template-columns: 1fr;
    }

    .met-study-filter {
        grid-column: auto;
    }

    .met-section-head,
    .met-assay-toolbar,
    .met-box-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .met-detail-summary,
    .met-structure-section {
        grid-template-columns: 1fr;
    }

    .met-detail-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .met-detail-body {
        padding-inline: 16px;
    }

    .met-detail-header {
        padding-inline: 16px;
    }

    .met-detail-compact {
        display: block;
    }

    .met-detail-compact p {
        margin-top: 5px;
    }

    .met-assay-meta {
        justify-content: flex-start;
    }

    .met-inline-control,
    .met-box-controls label:first-child,
    .met-box-controls label:last-child {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .met-page *,
    .met-page *::before,
    .met-page *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Epigenomics catalogue --------------------------------------------------- */
.epi-page {
    padding-top: 30px;
    padding-bottom: 54px;
}

.epi-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 44px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.epi-header h1 {
    margin: 0;
    color: var(--berry);
    font-size: 2.15rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}

.epi-header p {
    max-width: 72ch;
    margin: 8px 0 0;
    color: var(--muted);
    text-wrap: pretty;
}

.epi-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 28px;
    min-width: min(100%, 500px);
    margin: 0;
}

.epi-summary div {
    min-width: 78px;
}

.epi-summary dt {
    color: var(--muted);
    font-size: var(--text-caption);
}

.epi-summary dd {
    margin: 0;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.epi-page > .gene-status {
    min-height: 28px;
    margin: 12px 0 3px;
}

.epi-detail,
.epi-gene {
    margin-top: 28px;
}

.epi-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 26px;
    margin-bottom: 15px;
}

.epi-section-heading h2 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.012em;
}

.epi-section-heading p {
    max-width: 92ch;
    margin: 4px 0 0;
    color: var(--muted);
}

.epi-gene-form label {
    font-size: var(--text-small);
    font-weight: 700;
}

.epi-gene-form input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.epi-gene-form input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.epi-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.epi-table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.epi-table-scroll th,
.epi-table-scroll td {
    padding: 10px 11px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.epi-table-scroll th {
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-caption);
    white-space: nowrap;
}

.epi-table-scroll td {
    font-size: 0.88rem;
}

.epi-table-scroll td small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.35;
}

.epi-project-link {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.epi-project-link:hover {
    color: var(--primary-dark);
}

.epi-category {
    color: var(--ink) !important;
    font-size: 0.86rem !important;
}

.epi-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
}

.epi-badge.success {
    background: var(--success-soft);
    color: var(--success);
}

.epi-badge.warning {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.epi-badge.neutral {
    background: var(--surface-strong);
    color: var(--muted);
}

.epi-empty {
    padding: 28px;
    text-align: center;
}

.epi-empty h3 {
    margin: 0;
    font-size: 1.05rem;
}

.epi-empty p {
    max-width: 68ch;
    margin: 5px auto 0;
    color: var(--muted);
}

.epi-detail-skeleton span {
    display: block;
    height: 15px;
    border-radius: 4px;
    background: var(--surface-strong);
    animation: epi-pulse 1.2s ease-in-out infinite alternate;
}

.epi-detail {
    scroll-margin-top: 88px;
    padding: 20px 22px;
    background: var(--surface);
    border-top: 2px solid var(--berry);
    border-bottom: 1px solid var(--border-strong);
}

.epi-detail .epi-section-heading {
    align-items: start;
    margin-bottom: 18px;
}

.epi-detail .epi-section-heading h2 {
    max-width: 62ch;
}

.epi-mono {
    font-family: var(--font-mono);
}

.epi-detail .epi-mono {
    margin: 0 0 2px;
    color: var(--berry);
    font-size: var(--text-caption);
}

.epi-detail-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.8fr);
    gap: 36px;
    padding-bottom: 20px;
}

.epi-detail-overview > div > p:first-child {
    max-width: 78ch;
    margin-top: 0;
}

.epi-curator-note {
    max-width: 78ch;
    padding: 10px 12px;
    background: var(--warning-soft);
}

.epi-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.epi-detail-overview dl {
    margin: 0;
}

.epi-detail-overview dl div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.epi-detail-overview dt {
    color: var(--muted);
    font-size: var(--text-caption);
}

.epi-detail-overview dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--text-small);
}

.epi-data-section {
    border-top: 1px solid var(--border-strong);
}

.epi-data-section summary {
    padding: 11px 3px;
    cursor: pointer;
    font-weight: 700;
}

.epi-data-section summary span {
    margin-left: 8px;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 400;
}

.epi-data-section .epi-table-scroll {
    max-height: 520px;
    margin-bottom: 16px;
    background: var(--bg);
}

.epi-data-section thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.epi-section-empty,
.epi-gap-message {
    margin: 0 0 14px;
    color: var(--muted);
}

.epi-gap-message {
    display: flex;
    gap: 8px 18px;
    padding: 12px;
    background: var(--warning-soft);
}

.epi-checksum {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.epi-detail-skeleton {
    display: grid;
    gap: 12px;
    padding: 8px 0 20px;
}

.epi-detail-skeleton span:nth-child(2) { width: 86%; }
.epi-detail-skeleton span:nth-child(3) { width: 68%; }

.epi-gene {
    scroll-margin-top: 88px;
    padding-top: 24px;
    border-top: 1px solid var(--border-strong);
}

.epi-gene-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(190px, 0.8fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 15px;
    background: var(--surface);
}

.epi-gene-form label small {
    color: var(--muted);
    font-weight: 400;
}

.epi-gene-form input {
    display: block;
    margin-top: 4px;
}

.epi-gene > .gene-status {
    min-height: 28px;
    margin: 10px 0 2px;
}

.epi-evidence-table td:first-child {
    min-width: 210px;
}

.epi-evidence-table td:nth-child(2),
.epi-evidence-table td:last-child {
    min-width: 160px;
}

.epi-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    margin-top: 34px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.epi-methods h2 {
    margin: 0;
    font-size: 1.15rem;
}

.epi-methods p {
    max-width: 76ch;
    margin: 5px 0 0;
    color: var(--muted);
}

.epi-methods code {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.82em;
    overflow-wrap: anywhere;
}

@keyframes epi-pulse {
    from { opacity: 0.48; }
    to { opacity: 1; }
}

@media (max-width: 980px) {
    .epi-header {
        align-items: start;
        flex-direction: column;
        gap: 18px;
    }

    .epi-header > * {
        width: 100%;
        min-width: 0;
    }

    .epi-summary {
        justify-content: flex-start;
        min-width: 0;
    }

    .epi-detail-overview {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .epi-gene-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .epi-page {
        padding-top: 22px;
    }

    .epi-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px 20px;
    }

    .epi-section-heading {
        align-items: start;
        flex-direction: column;
        gap: 9px;
    }

    .epi-section-heading > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .epi-gene-form {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    .epi-detail {
        margin-right: -12px;
        margin-left: -12px;
        padding: 16px 12px;
    }

    .epi-detail-overview dl div {
        grid-template-columns: 95px minmax(0, 1fr);
    }

    .epi-gap-message,
    .epi-methods {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .epi-detail-skeleton span {
        animation: none;
    }
}

/* Epigenomics query workspace -------------------------------------------- */

.epi-page {
    padding-top: 28px;
}

.epi-heading-copy {
    max-width: 760px;
}

.epi-eyebrow,
.epi-context-kicker,
.epi-step-label {
    margin: 0 0 4px;
    color: var(--primary-dark);
    font-size: var(--text-caption);
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.epi-header {
    align-items: center;
    padding-bottom: 24px;
}

.epi-header h1 {
    color: var(--ink);
}

.epi-summary {
    flex: 0 0 auto;
    min-width: 430px;
}

.epi-assay-nav {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.epi-assay-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.epi-assay-tabs button {
    position: relative;
    min-width: max-content;
    min-height: 70px;
    padding: 12px 22px 13px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

.epi-assay-tabs button:first-child {
    border-left: 1px solid var(--border);
}

.epi-assay-tabs button::after {
    position: absolute;
    right: 18px;
    bottom: -1px;
    left: 18px;
    height: 3px;
    background: transparent;
    content: "";
}

.epi-assay-tabs button:hover {
    background: var(--surface);
    color: var(--ink);
}

.epi-assay-tabs button[aria-selected="true"] {
    background: var(--warning-soft);
    color: var(--berry);
}

.epi-assay-tabs button[aria-selected="true"]::after {
    background: var(--primary);
}

.epi-assay-tabs span,
.epi-assay-tabs small {
    display: block;
}

.epi-assay-tabs span {
    font-weight: 750;
}

.epi-assay-tabs small {
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.76rem;
}

.epi-workspace {
    display: grid;
    grid-template-columns: minmax(235px, 0.33fr) minmax(0, 1fr);
    margin-top: 24px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
}

.epi-assay-context {
    padding: 26px 24px;
    border-right: 1px solid var(--border-strong);
    background: var(--surface);
}

.epi-assay-context h2 {
    margin: 0;
    font-size: 1.34rem;
    line-height: 1.25;
}

.epi-assay-context > p:not(.epi-context-kicker) {
    margin: 9px 0 0;
    color: var(--muted);
}

.epi-context-stats {
    margin: 24px 0 0;
    border-top: 1px solid var(--border);
}

.epi-context-stats div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.epi-context-stats dt {
    color: var(--muted);
    font-size: var(--text-small);
}

.epi-context-stats dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.epi-availability-note {
    padding-left: 12px;
    border-left: 3px solid var(--warning);
    font-size: var(--text-small);
}

.epi-availability-note.is-ready {
    border-left-color: var(--success);
}

.epi-query-panel {
    min-width: 0;
    padding: 25px 28px 22px;
}

.epi-query-panel .epi-section-heading {
    align-items: start;
    margin-bottom: 18px;
}

.epi-query-panel .epi-section-heading h2,
.epi-results-heading h2 {
    font-size: 1.42rem;
}

.epi-mode-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.epi-mode-switch legend {
    float: left;
    margin-right: 8px;
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 700;
}

.epi-mode-switch label {
    position: relative;
    cursor: pointer;
}

.epi-mode-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
}

.epi-mode-switch span {
    display: block;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 700;
}

.epi-mode-switch input:checked + span {
    border-color: var(--berry);
    background: var(--berry-soft);
    color: var(--berry);
}

.epi-mode-switch input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.epi-query-grid {
    display: grid;
    grid-template-columns: minmax(165px, 0.55fr) minmax(230px, 1fr);
    gap: 13px 16px;
}

.epi-field {
    display: block;
    min-width: 0;
}

.epi-field-wide {
    grid-column: 1 / -1;
}

.epi-field > span {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-small);
    font-weight: 750;
}

.epi-field input,
.epi-field select {
    width: 100%;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.epi-field input {
    padding: 8px 12px;
}

.epi-field select {
    padding: 8px 34px 8px 12px;
}

.epi-field small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.76rem;
}

.epi-query-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.epi-query-panel > .gene-status {
    min-height: 24px;
    margin: 10px 0 -5px;
}

.epi-query-results {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-strong);
}

.epi-results-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.epi-results-heading h2,
.epi-results-heading p {
    margin: 0;
}

.epi-results-heading p:not(.epi-step-label) {
    margin-top: 4px;
    color: var(--muted);
}

.epi-evidence-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: collapse;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--text-small);
}

.epi-evidence-table th,
.epi-evidence-table td {
    padding: 10px 11px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.epi-evidence-table th {
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-caption);
    white-space: nowrap;
}

.epi-evidence-table td small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.74rem;
}

.epi-evidence-table tbody tr:hover {
    background: var(--surface);
}

.epi-project-link {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.epi-detail {
    scroll-margin-top: 90px;
}

.epi-detail-section {
    margin-top: 24px;
}

.epi-detail-section h3 {
    margin: 0 0 9px;
}

.epi-table-note {
    margin: -4px 0 9px;
    color: var(--muted);
    font-size: var(--text-small);
}

.epi-detail-note {
    padding: 11px 14px;
    border-left: 3px solid var(--primary);
    background: var(--warning-soft);
}

[hidden] {
    display: none !important;
}

@media (max-width: 1060px) {
    .epi-workspace {
        grid-template-columns: 1fr;
    }

    .epi-assay-context {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.75fr);
        gap: 0 28px;
        border-right: 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .epi-assay-context .epi-context-kicker,
    .epi-assay-context h2,
    .epi-assay-context > p:not(.epi-availability-note) {
        grid-column: 1;
    }

    .epi-context-stats,
    .epi-availability-note {
        grid-column: 2;
    }

    .epi-context-stats {
        grid-row: 1 / span 3;
        margin-top: 0;
    }

}

@media (max-width: 760px) {
    .epi-header {
        align-items: start;
    }

    .epi-summary {
        min-width: 0;
    }

    .epi-assay-tabs button {
        min-height: 62px;
        padding: 10px 16px;
    }

    .epi-assay-context {
        display: block;
        padding: 20px;
    }

    .epi-context-stats {
        margin-top: 18px;
    }

    .epi-query-panel {
        padding: 20px;
    }

    .epi-query-panel .epi-section-heading,
    .epi-results-heading {
        display: block;
    }

    .epi-query-panel .epi-section-heading .button,
    .epi-results-heading .button {
        margin-top: 10px;
    }

    .epi-query-grid {
        grid-template-columns: 1fr;
    }

    .epi-field-wide {
        grid-column: auto;
    }

}

@media (max-width: 520px) {
    .epi-mode-switch {
        align-items: stretch;
        flex-direction: column;
    }

    .epi-mode-switch legend {
        float: none;
    }

    .epi-query-actions {
        flex-direction: column;
    }

    .epi-query-actions .button {
        width: 100%;
    }

}

/* Epigenomics distilled layout ------------------------------------------ */

.epi-page {
    padding-top: 24px;
}

.epi-header {
    display: block;
    padding-bottom: 14px;
}

.epi-header h1 {
    font-size: 2rem;
}

.epi-header p {
    margin-top: 4px;
}

.epi-page > .gene-status {
    min-height: 0;
    margin: 6px 0;
}

.epi-assay-nav {
    margin-top: 0;
}

.epi-assay-tabs button {
    min-height: 48px;
    padding: 8px 18px 9px;
}

.epi-assay-note {
    min-height: 24px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.epi-assay-note.is-ready {
    color: var(--success);
}

.epi-workspace {
    display: block;
    margin-top: 4px;
    border: 0;
}

.epi-query-panel {
    padding: 12px 0 20px;
    border-bottom: 1px solid var(--border-strong);
}

.epi-query-panel .epi-section-heading {
    margin-bottom: 12px;
}

.epi-query-panel .epi-section-heading h2,
.epi-results-heading h2 {
    font-size: 1.25rem;
}

.epi-mode-switch {
    margin-bottom: 12px;
}

.epi-query-grid {
    gap: 10px 14px;
}

.epi-query-actions {
    margin-top: 14px;
}

.epi-example-strip {
    display: flex;
    align-items: center;
    gap: 12px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-small);
}

.epi-example-strip > span {
    flex: 0 0 auto;
}

.epi-example-strip > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.epi-example {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--primary-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.epi-example small {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
}

.epi-example:hover {
    border-color: var(--primary);
    background: var(--surface);
}

.epi-example:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.epi-query-results {
    margin-top: 22px;
    padding-top: 18px;
}

.epi-results-heading {
    margin-bottom: 12px;
}

.epi-result-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-small);
}

.epi-result-tools > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.epi-result-tools .button {
    min-height: 34px;
    padding: 5px 10px;
}

.epi-state-comparison,
.epi-genome-viewer {
    margin: 8px 0 0;
    border-bottom: 1px solid var(--border);
}

.epi-state-comparison > summary,
.epi-genome-viewer > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 8px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.epi-state-comparison > summary::-webkit-details-marker,
.epi-genome-viewer > summary::-webkit-details-marker {
    display: none;
}

.epi-state-comparison > summary::after,
.epi-genome-viewer > summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.1rem;
    line-height: 1;
}

.epi-state-comparison[open] > summary::after,
.epi-genome-viewer[open] > summary::after {
    content: "−";
}

.epi-state-comparison > summary small,
.epi-genome-viewer > summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
}

.epi-state-content {
    padding: 0 0 14px;
}

.epi-state-stage,
.epi-state-transitions li,
.epi-state-legend p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.epi-state-comparison p {
    margin: 0;
}

.epi-state-stage small,
.epi-state-transitions small,
.epi-state-footer,
.epi-state-legend span {
    color: var(--muted);
    font-size: var(--text-caption);
}

.epi-state-stages {
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.epi-state-stage {
    min-height: 44px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

.epi-state-stage > strong {
    min-width: 48px;
}

.epi-state-stage > span {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 5px;
}

.epi-state-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-caption);
    font-weight: 700;
    white-space: nowrap;
}

.epi-state-transitions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 22px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.epi-state-transitions li {
    min-height: 38px;
    border-bottom: 1px solid var(--border);
}

.epi-state-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.epi-state-legend {
    margin-top: 8px;
}

.epi-state-legend summary {
    width: fit-content;
    cursor: pointer;
    color: var(--primary-dark);
    font-weight: 700;
}

.epi-state-legend > div {
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.epi-state-legend p {
    min-height: 34px;
    border-bottom: 1px solid var(--border);
}

.epi-state-legend b {
    min-width: 66px;
}

.epi-state-legend span:first-of-type {
    min-width: 92px;
}

.epi-state-legend span:last-child {
    flex: 1;
}

.epi-genome-viewer {
    padding-bottom: 0;
}

.epi-genome-viewer iframe {
    display: block;
    width: 100%;
    height: 720px;
    border: 1px solid var(--border-strong);
    margin: 0 0 16px;
    border-radius: 8px;
    background: var(--bg);
}

.epi-detail-note {
    border: 1px solid var(--border);
    background: var(--warning-soft);
}

@media (max-width: 760px) {
    .epi-query-panel {
        padding-top: 10px;
    }

    .epi-result-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .epi-example-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .epi-example-strip > div,
    .epi-example {
        width: 100%;
    }

    .epi-example {
        justify-content: space-between;
    }

    .epi-genome-viewer iframe {
        height: 520px;
    }

    .epi-state-stage,
    .epi-state-transitions li,
    .epi-state-legend p {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .epi-state-stage > span {
        width: 100%;
    }
}

/* GWAS workspace ---------------------------------------------------------- */

.gwas-page {
    padding-top: 28px;
}

.gwas-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.gwas-header h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.gwas-query-panel {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.gwas-query-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(210px, 0.85fr) auto;
    gap: 12px;
    align-items: end;
}

.gwas-query-form label span {
    display: block;
    margin-bottom: 7px;
    font-size: var(--text-small);
    font-weight: 700;
}

.gwas-query-form select {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--border-strong);
    background-color: var(--bg);
    color: var(--ink);
}

.gwas-query-form .button {
    min-height: 42px;
    white-space: nowrap;
}

.gwas-empty-state {
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

.gwas-empty-state p {
    margin: 0;
}

#gwasResults {
    margin-top: 18px;
}

#gwasResults[hidden],
.gwas-empty-state[hidden] {
    display: none;
}

.gwas-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
}

.gwas-facts div {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.gwas-facts dt,
.gwas-marker-facts dt {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 700;
}

.gwas-facts dd,
.gwas-marker-facts dd {
    margin: 2px 0 0;
    font-weight: 700;
}

.gwas-workspace {
    margin-top: 0;
}

.gwas-toolbar {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.gwas-toolbar h2,
.gwas-panel-heading h2,
.gwas-provenance h2 {
    margin: 0;
    font-size: 1.2rem;
}

.gwas-trait-tabs {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    padding: 4px;
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.gwas-trait-tabs button {
    min-width: 130px;
    padding: 7px 16px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

.gwas-trait-tabs button[aria-pressed="true"] {
    background: var(--bg);
    color: var(--berry);
    box-shadow: 0 1px 3px oklch(0.25 0.02 55 / 0.13);
}

.gwas-trait-tabs small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
}

.gwas-filter-fields > label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--text-small);
    font-weight: 700;
}

.gwas-filter-fields > div {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.gwas-filter-fields input[type="search"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.gwas-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    white-space: nowrap;
}

.gwas-check input {
    width: 17px;
    height: 17px;
    min-height: 17px;
    accent-color: var(--berry);
}

.gwas-workspace > .gene-status {
    margin: 10px 0 0;
}

.gwas-workspace > .gene-status:empty {
    display: none;
}

.gwas-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.gwas-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.gwas-panel-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.gwas-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: var(--muted);
    font-size: var(--text-small);
}

.gwas-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gwas-legend i {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.gwas-legend .chr-a { background: #8d2f45; }
.gwas-legend .chr-b { background: #d28a2d; }
.gwas-legend .sig { background: #3d7047; }

.gwas-canvas-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gwas-canvas-wrap canvas {
    display: block;
    width: 100%;
    min-width: 0;
}

.gwas-tooltip {
    position: absolute;
    z-index: 4;
    width: max-content;
    max-width: min(310px, calc(100% - 16px));
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    box-shadow: 0 8px 22px oklch(0.25 0.02 55 / 0.16);
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.35;
    pointer-events: none;
}

.gwas-tooltip strong,
.gwas-tooltip span {
    display: block;
}

.gwas-tooltip strong {
    padding-bottom: 5px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.gwas-marker-facts {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.gwas-marker-facts div {
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid var(--border);
}

.gwas-marker-facts div:last-child {
    border-right: 0;
}

.gwas-marker-facts dd {
    overflow-wrap: anywhere;
}

.gwas-phenotype-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.4fr);
}

.gwas-phenotype-layout > div {
    min-width: 0;
    padding: 20px;
}

.gwas-phenotype-layout > div + div {
    border-left: 1px solid var(--border);
}

.gwas-phenotype-layout h3,
.gwas-group-summary h3 {
    margin: 0;
    font-size: 1.02rem;
}

.gwas-phenotype-layout p {
    margin: 3px 0 4px;
    color: var(--muted);
    font-size: var(--text-small);
}

.gwas-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.gwas-table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.gwas-group-summary .gwas-table-scroll {
    overflow-x: hidden;
}

.gwas-group-summary .gwas-table-scroll th,
.gwas-group-summary .gwas-table-scroll td {
    padding-right: 8px;
    padding-left: 8px;
}

.gwas-table-scroll th,
.gwas-table-scroll td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.gwas-table-scroll th {
    color: var(--muted);
    font-size: var(--text-small);
}

.gwas-table-scroll td {
    font-size: 0.91rem;
}

.gwas-results-table th button {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.gwas-results-table th button[data-direction="asc"]::after { content: "  ↑"; }
.gwas-results-table th button[data-direction="desc"]::after { content: "  ↓"; }

.gwas-results-table tbody tr {
    cursor: pointer;
}

.gwas-results-table tbody tr:hover,
.gwas-results-table tbody tr[aria-selected="true"] {
    background: var(--warning-soft);
}

.gwas-results-table td:first-child {
    font-family: var(--font-mono);
}

.gwas-results-table td:last-child small {
    display: block;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.72rem;
}

.gwas-unmapped {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.8rem;
}

.gwas-marker-button {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font: inherit;
}

.gwas-sig-label {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
}

.gwas-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    padding: 14px 18px;
}

.gwas-pagination .button {
    align-self: auto;
}

.gwas-page sub {
    line-height: 0;
}

/* GO and KEGG over-representation analysis ---------------------------------- */

.enrichment-page {
    padding-top: 34px;
}

.enrichment-header {
    padding-bottom: 22px;
    border-bottom: 2px solid var(--berry);
}

.enrichment-header h1,
.enrichment-header p {
    margin: 0;
}

.enrichment-header h1 {
    font-size: 2.15rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.enrichment-header p {
    max-width: 74ch;
    margin-top: 7px;
    color: var(--muted);
}

.enrichment-query {
    margin-top: 26px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.enrichment-query-heading {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.enrichment-query-heading h2,
.enrichment-query-heading p {
    margin: 0;
}

.enrichment-query-heading h2 {
    font-size: 1.1rem;
}

.enrichment-query-heading p {
    color: var(--muted);
    font-size: var(--text-small);
}

.enrichment-query form {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.7fr);
    gap: 18px 28px;
    padding: 24px 26px 26px;
}

.enrichment-query label > span,
.enrichment-toolbar label {
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 720;
}

.enrichment-query label > span {
    display: block;
    margin-bottom: 6px;
}

.enrichment-query select,
.enrichment-query textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
}

.enrichment-query textarea {
    min-height: 194px;
    padding: 10px 12px;
    resize: vertical;
    font: 0.88rem/1.5 var(--font-mono);
}

.enrichment-query select:hover,
.enrichment-query textarea:hover {
    border-color: var(--primary);
}

.enrichment-assembly-field {
    grid-column: 1;
}

.enrichment-gene-field {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.enrichment-file-row {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 13px;
}

.enrichment-file-row > span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enrichment-file-button {
    align-self: auto !important;
    cursor: pointer;
}

.button.text-button {
    min-height: 36px;
    padding: 5px 7px;
    background: transparent;
    color: var(--berry);
}

.button.text-button:hover {
    background: var(--berry-soft);
    color: var(--berry);
    transform: none;
}

.enrichment-actions {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.enrichment-actions .button.quiet {
    align-self: auto;
}

.enrichment-message {
    margin: 0;
    padding: 12px 26px;
    border-top: 1px solid var(--border);
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.enrichment-message.error {
    background: var(--error-soft);
    color: var(--error);
}

.enrichment-empty {
    min-height: 190px;
    display: grid;
    place-items: center;
    margin-top: 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

.enrichment-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 28px 0 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.enrichment-summary div {
    padding: 15px 18px;
    border-right: 1px solid var(--border);
}

.enrichment-summary div:last-child {
    border-right: 0;
}

.enrichment-summary dt {
    color: var(--muted);
    font-size: var(--text-caption);
}

.enrichment-summary dd {
    margin: 2px 0 0;
    font-size: 1.22rem;
    font-variant-numeric: tabular-nums;
    font-weight: 740;
}

.enrichment-excluded {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.enrichment-excluded summary {
    padding: 10px 14px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

.enrichment-excluded > div {
    display: grid;
    gap: 10px;
    padding: 0 14px 13px 34px;
}

.enrichment-excluded p {
    margin: 3px 0 0;
    color: var(--muted);
    font: 0.8rem/1.5 var(--font-mono);
    overflow-wrap: anywhere;
}

.enrichment-result-section,
.enrichment-chart-panel {
    margin-top: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.enrichment-result-heading,
.enrichment-chart-panel > header {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.enrichment-result-heading h2,
.enrichment-result-heading p,
.enrichment-chart-panel h2,
.enrichment-chart-panel p {
    margin: 0;
}

.enrichment-result-heading h2,
.enrichment-chart-panel h2 {
    font-size: 1.1rem;
}

.enrichment-result-heading p,
.enrichment-chart-panel p {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.enrichment-result-heading .button,
.enrichment-chart-panel .button {
    align-self: auto;
}

.enrichment-toolbar {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.enrichment-toolbar label {
    display: grid;
    gap: 4px;
}

.enrichment-toolbar input {
    min-width: min(310px, 48vw);
}

.enrichment-toolbar select {
    min-width: 130px;
}

.enrichment-tabs {
    display: inline-flex;
    margin-right: auto;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.enrichment-tabs button {
    min-height: 34px;
    padding: 5px 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

.enrichment-tabs button:hover {
    color: var(--ink);
}

.enrichment-tabs button[aria-pressed="true"] {
    background: var(--bg);
    color: var(--berry);
    box-shadow: 0 1px 3px oklch(0.15 0.02 55 / 0.14);
}

.enrichment-table-wrap {
    overflow: auto;
}

.enrichment-table {
    width: 100%;
    min-width: 1160px;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.kegg-enrichment-table {
    min-width: 1060px;
}

.enrichment-table th,
.enrichment-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.enrichment-table th {
    background: var(--bg);
    color: var(--muted);
    font-size: var(--text-caption);
    white-space: nowrap;
}

.enrichment-table th button {
    min-height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-weight: inherit;
}

.enrichment-table th button:hover {
    color: var(--ink);
    text-decoration: underline;
}

.enrichment-table tbody tr:hover {
    background: var(--surface);
}

.enrichment-description {
    min-width: 260px;
    max-width: 390px;
}

.ontology-badge {
    display: inline-flex;
    min-width: 32px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 780;
}

.ontology-badge.BP {
    background: var(--berry-soft);
    color: var(--berry);
}

.ontology-badge.MF {
    background: var(--leaf-soft);
    color: var(--leaf);
}

.ontology-badge.CC {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.enrichment-genes-cell {
    max-width: 260px;
}

.enrichment-genes-cell summary {
    color: var(--berry);
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.enrichment-genes-cell p {
    min-width: 230px;
    margin: 7px 0 0;
    color: var(--muted);
    font: 0.76rem/1.45 var(--font-mono);
    overflow-wrap: anywhere;
}

.enrichment-no-results {
    height: 110px;
    color: var(--muted);
    text-align: center !important;
    vertical-align: middle !important;
}

.enrichment-pagination {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    padding: 10px 16px;
}

.enrichment-pagination .button {
    align-self: auto;
}

.enrichment-pagination span {
    color: var(--muted);
    font-size: var(--text-small);
}

.enrichment-canvas-wrap {
    position: relative;
    min-height: 360px;
    overflow-x: auto;
    background: var(--bg);
}

.enrichment-canvas-wrap canvas {
    display: block;
    max-width: none;
}

.enrichment-tooltip {
    position: absolute;
    z-index: 5;
    width: min(330px, calc(100% - 20px));
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--ink);
    color: var(--bg);
    pointer-events: none;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    line-height: 1.4;
}

.enrichment-tooltip strong,
.enrichment-tooltip span {
    display: block;
}

.enrichment-tooltip strong {
    margin-bottom: 4px;
}

@media (max-width: 860px) {
    .enrichment-query form {
        grid-template-columns: 1fr;
    }

    .enrichment-assembly-field,
    .enrichment-gene-field,
    .enrichment-file-row,
    .enrichment-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .enrichment-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enrichment-summary div {
        border-top: 1px solid var(--border);
    }

    .enrichment-summary div:nth-child(-n+2) {
        border-top: 0;
    }

    .enrichment-summary div:nth-child(even) {
        border-right: 0;
    }

    .enrichment-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .enrichment-tabs {
        align-self: flex-start;
        margin-right: 0;
    }

    .enrichment-toolbar input,
    .enrichment-toolbar select {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .enrichment-page {
        padding-top: 24px;
    }

    .enrichment-header h1 {
        font-size: 1.85rem;
    }

    .enrichment-query-heading,
    .enrichment-result-heading,
    .enrichment-chart-panel > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .enrichment-query form {
        padding: 18px;
    }

    .enrichment-actions,
    .enrichment-actions .button {
        width: 100%;
    }

    .enrichment-actions {
        flex-direction: column;
    }

    .enrichment-summary {
        grid-template-columns: 1fr;
    }

    .enrichment-summary div,
    .enrichment-summary div:nth-child(-n+2) {
        border-top: 1px solid var(--border);
        border-right: 0;
    }

    .enrichment-summary div:first-child {
        border-top: 0;
    }

    .enrichment-tabs,
    .enrichment-tabs button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .enrichment-page *,
    .enrichment-page *::before,
    .enrichment-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.gwas-provenance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
    margin-top: 28px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.gwas-provenance p {
    max-width: 96ch;
    margin: 6px 0 0;
    color: var(--muted);
}

.gwas-source-links {
    display: flex;
    gap: 20px;
    white-space: nowrap;
}

.gwas-source-links a {
    font-weight: 700;
}

@media (max-width: 1160px) {
    .gwas-marker-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gwas-marker-facts div:nth-child(4) {
        border-right: 0;
    }

    .gwas-marker-facts div:nth-child(n+5) {
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 760px) {
    .gwas-page {
        padding-top: 24px;
    }

    .gwas-header h1 {
        font-size: 2rem;
    }

    .gwas-query-form {
        grid-template-columns: 1fr;
    }

    .gwas-facts {
        gap: 9px 22px;
    }

    .gwas-filter-fields > div {
        grid-template-columns: 1fr;
    }

    .gwas-filter-fields .button {
        align-self: stretch;
    }

    .gwas-trait-tabs,
    .gwas-trait-tabs button {
        width: 100%;
    }

    .gwas-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .gwas-marker-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gwas-marker-facts div,
    .gwas-marker-facts div:nth-child(4) {
        border-right: 1px solid var(--border);
        border-top: 1px solid var(--border);
    }

    .gwas-marker-facts div:nth-child(odd) {
        border-right: 1px solid var(--border);
    }

    .gwas-marker-facts div:nth-child(even) {
        border-right: 0;
    }

    .gwas-phenotype-layout {
        grid-template-columns: 1fr;
    }

    .gwas-phenotype-layout > div + div {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .gwas-canvas-wrap {
        overflow-x: auto;
    }

    .gwas-manhattan-panel canvas {
        min-width: 760px;
    }

    .gwas-provenance {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Unified reading scale ----------------------------------------------------
   Legacy pages accumulated many one-off 11–14 px labels. Keep supporting
   information secondary without turning normal interface copy into fine
   print. Plot axes remain compact because their available space is fixed. */
body small {
    font-size: var(--text-caption) !important;
    line-height: 1.45;
}

.eyebrow {
    font-size: var(--text-caption);
    letter-spacing: 0.025em;
    text-transform: none;
}

:is(
    .context-line,
    .catalog-status,
    .warning-panel,
    .page-note,
    .field-hint,
    .nav-note,
    .coverage-line,
    .pub-meta,
    .sp-taxonomy span,
    .sp-doi,
    .gene-status,
    .gene-card-empty p,
    .conf-when,
    .conf-meta,
    .species-check,
    .syn-legend,
    .tf-type-row label,
    .tx-method-note,
    .tx-missing,
    .gwas-tooltip,
    .enrichment-tooltip
) {
    font-size: var(--text-small);
    line-height: 1.5;
}

:is(
    .release-scope li span,
    .filter-fields label,
    .type-filter strong,
    .status-label,
    .migration-status dt,
    .migration-key,
    .directory-heading p,
    .tool-row em,
    .news-panel time,
    .citation-section p,
    .browse-tag,
    .browse-meta dd code,
    .pub-doi,
    .dl-collection-head span,
    .dl-species-meta,
    .dl-assembly-cell small,
    .dl-unpublished,
    .gene-length,
    .gene-card-head .copy-button,
    .gene-card dt,
    .gene-sequence,
    .link-list span,
    .syn-gene,
    .family-count,
    .family-gene-list a,
    .tx-view-tabs small,
    .tx-profile-summary dt,
    .tx-profile-summary small,
    .tx-dataset-facts dt,
    .tx-figure-heading label,
    .tx-legend,
    .epi-badge,
    .epi-checksum,
    .epi-assay-tabs small,
    .epi-field small,
    .gwas-trait-tabs small,
    .gwas-results-table td:last-child small,
    .gwas-sig-label
) {
    font-size: var(--text-caption);
    line-height: 1.45;
}

:is(
    .resource-table,
    .dl-table,
    .gene-table,
    .tx-heatmap-table,
    .enrichment-table
) {
    font-size: var(--text-small);
}

:is(
    .resource-table th,
    .dl-table thead th,
    .gene-table thead th
) {
    font-size: var(--text-caption);
    letter-spacing: 0.015em;
}

:is(
    .resource-name-cell code,
    .type-badge,
    .unavailable,
    .count-pill,
    .dl-file,
    .gene-assembly-citation a,
    .tx-examples button,
    .tx-examples > span,
    .tx-result-title span,
    .tx-tissue-row,
    .tx-heatmap-table tbody th button,
    .epi-project-link
) {
    font-size: var(--text-caption);
}

.gene-field > span {
    font-size: var(--text-caption);
}

:is(
    .tx-form label,
    .tx-form input,
    .tx-form textarea,
    .tx-result-header p,
    .tx-heatmap-header p
) {
    font-size: var(--text-small);
}

.site-footer {
    font-size: var(--text-caption);
}

/* Evidence-bound AI assistant -------------------------------------------- */
.ai-main {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 0 auto;
    padding: 42px 0 64px;
}

.ai-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.ai-heading h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.ai-heading p {
    max-width: 72ch;
    margin: 9px 0 0;
    color: var(--muted);
    text-wrap: pretty;
}

.ai-service-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 650;
}

.ai-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning);
}

.ai-service-state.ready .ai-state-dot {
    background: var(--success);
}

.ai-service-state.unavailable .ai-state-dot {
    background: var(--error);
}

.ai-mode-switch {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    margin-top: 22px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.ai-mode-switch button {
    min-height: 42px;
    padding: 8px 22px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 720;
    cursor: pointer;
}

.ai-mode-switch button.active {
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 1px 3px rgb(20 21 20 / 10%);
}

.ai-mode-description {
    margin: 10px 0 0;
    color: var(--muted);
}

.ai-workspace {
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.ai-conversation {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.ai-thread {
    flex: 1 1 auto;
    min-height: 510px;
    max-height: 68vh;
    padding: 28px clamp(20px, 4vw, 52px);
    overflow-y: auto;
    scroll-behavior: smooth;
}

.ai-empty {
    max-width: 760px;
    margin: 14px auto 0;
}

.ai-empty-copy {
    max-width: 62ch;
}

.ai-empty h2 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
}

.ai-empty p {
    margin: 8px 0 0;
    color: var(--muted);
}

.ai-prompts {
    margin-top: 28px;
    border-top: 1px solid var(--border);
}

.ai-prompts button {
    width: 100%;
    min-height: 64px;
    display: block;
    align-items: center;
    padding: 13px 4px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: padding 180ms ease-out, background-color 180ms ease-out;
}

.ai-prompts button[hidden] {
    display: none;
}

.ai-prompts button:hover {
    padding-right: 10px;
    padding-left: 10px;
    background: var(--surface);
}

.ai-message {
    max-width: 74ch;
    margin: 0 0 30px;
}

.ai-message.user {
    max-width: 62ch;
    margin-left: auto;
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--surface-strong);
}

.ai-message.assistant {
    margin-right: auto;
}

.ai-message-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.ai-message-head strong {
    font-size: 1rem;
}

.ai-message.pending .ai-message-body {
    width: min(100%, 540px);
    min-height: 76px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-strong) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: ai-skeleton 1.3s linear infinite;
}

.ai-message.failed .ai-message-body {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--error-soft);
    color: var(--error);
}

.ai-message-body {
    overflow-wrap: anywhere;
}

.ai-message-body p {
    margin: 0 0 13px;
}

.ai-message-body p:last-child,
.ai-message-body ul:last-child {
    margin-bottom: 0;
}

.ai-message-body ul {
    margin: 7px 0 15px;
    padding-left: 22px;
}

.ai-inline-citation {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--berry-soft);
    font-family: var(--font-mono);
    font-size: 0.82em;
    text-decoration: none;
}

.ai-copy-answer {
    min-height: 32px;
    margin-top: 10px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.875rem;
    cursor: pointer;
}

.ai-copy-answer:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

.ai-composer {
    padding: 16px 20px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.ai-composer > label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--text-caption);
    font-weight: 720;
}

.ai-composer textarea {
    width: 100%;
    min-height: 92px;
    max-height: 220px;
    padding: 11px 13px;
    resize: vertical;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
}

.ai-composer textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

.ai-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

.ai-composer-foot > span {
    color: var(--muted);
    font-size: 0.875rem;
}

.ai-composer-actions {
    display: flex;
    gap: 8px;
}

.ai-evidence {
    min-width: 0;
    padding: 22px 20px;
    border-left: 1px solid var(--border);
    background: var(--surface);
    overflow-y: auto;
}

.ai-evidence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 17px;
}

.ai-evidence h2,
.ai-evidence h3,
.ai-evidence h4 {
    margin: 0;
}

.ai-evidence h2 {
    font-size: 1.1rem;
}

.ai-evidence-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-caption);
}

.ai-mode {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 750;
}

.ai-mode.ready {
    background: var(--success-soft);
    color: var(--success);
}

.ai-mode.working,
.ai-mode.limited {
    background: var(--warning-soft);
    color: var(--primary-dark);
}

.ai-evidence-section {
    padding: 18px 0;
    border-top: 1px solid var(--border);
}

.ai-evidence-section h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
    font-size: 0.95rem;
}

.ai-evidence-section h3 span {
    color: var(--muted);
    font-size: 0.875rem;
}

.ai-rail-empty,
.ai-warning-list {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.ai-citation {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    scroll-margin-top: 92px;
}

.ai-citation:first-child {
    border-top: 0;
}

.ai-citation:target {
    border-radius: 8px;
    background: var(--berry-soft);
}

.ai-citation-index {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--berry-soft);
    color: var(--berry);
    font-size: 0.8rem;
    font-weight: 780;
}

.ai-citation h4 {
    font-size: 0.9rem;
    line-height: 1.4;
    text-wrap: pretty;
}

.ai-citation code {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.ai-citation a {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.875rem;
}

.ai-tool {
    border-top: 1px solid var(--border);
}

.ai-tool:first-child {
    border-top: 0;
}

.ai-tool summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.ai-tool summary > span:first-child {
    min-width: 0;
}

.ai-tool summary strong,
.ai-tool summary small {
    display: block;
}

.ai-tool summary strong {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.ai-tool summary small,
.ai-tool summary > span:last-child {
    color: var(--muted);
    font-size: 0.7rem;
}

.ai-tool pre {
    max-height: 280px;
    margin: 0 0 12px;
    padding: 10px;
    overflow: auto;
    border-radius: 6px;
    background: var(--ink);
    color: var(--bg);
    font: 0.75rem/1.55 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
}

.ai-module-actions a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--bg);
    font-size: 0.875rem;
    font-weight: 680;
    text-decoration: none;
}

.ai-warning-list {
    padding-left: 18px;
}

.ai-warning-list li + li {
    margin-top: 7px;
}

.ai-rail-skeleton {
    display: grid;
    gap: 8px;
}

.ai-rail-skeleton span {
    height: 48px;
    border-radius: 6px;
    background: var(--surface-strong);
}

@keyframes ai-skeleton {
    to { background-position-x: -200%; }
}

@media (max-width: 980px) {
    .ai-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .ai-workspace {
        grid-template-columns: 1fr;
    }

    .ai-evidence {
        max-height: none;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .ai-thread {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .ai-main {
        width: min(calc(100% - 24px), var(--content-width));
        padding-top: 28px;
    }

    .ai-heading h1 {
        font-size: 1.65rem;
    }

    .ai-workspace {
        margin-right: -12px;
        margin-left: -12px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .ai-thread {
        min-height: 430px;
        padding: 22px 16px;
    }

    .ai-prompts button {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ai-composer {
        padding: 14px 12px 16px;
    }

    .ai-composer-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .ai-composer-actions {
        width: 100%;
    }

    .ai-composer-actions .button {
        flex: 1 1 auto;
    }

    .ai-evidence {
        padding: 20px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-thread {
        scroll-behavior: auto;
    }

    .ai-message.pending .ai-message-body {
        animation: none;
    }

    .ai-prompts button {
        transition: none;
    }
}

/* Breeding: embedded GuideRNA workspace --------------------------------------- */

.guide-rna-page {
    max-width: 1400px;
}

.guide-rna-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 0.82rem;
}

.guide-rna-breadcrumb span:last-child {
    color: var(--ink);
    font-weight: 700;
}

.guide-rna-header h1,
.guide-rna-header p,
.guide-rna-copy h2,
.guide-rna-copy p,
.guide-rna-workspace-heading h2,
.guide-rna-workspace-heading p,
.guide-rna-example,
.guide-rna-inputs,
.guide-rna-frame-note {
    margin-top: 0;
}

.guide-rna-header h1 {
    margin-bottom: 10px;
    font-size: 2.35rem;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.guide-rna-header p {
    max-width: 70ch;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.guide-rna-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 42px;
    align-items: start;
    margin-top: 34px;
    padding: 28px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.guide-rna-copy h2,
.guide-rna-workspace-heading h2 {
    margin-bottom: 8px;
    font-size: 1.22rem;
    letter-spacing: -0.015em;
}

.guide-rna-copy > p {
    max-width: 72ch;
    margin-bottom: 22px;
    color: var(--muted);
    line-height: 1.62;
}

.guide-rna-inputs {
    margin-bottom: 0;
    border-top: 1px solid var(--border);
}

.guide-rna-inputs div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.guide-rna-inputs dt {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 750;
}

.guide-rna-inputs dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.48;
}

.guide-rna-example {
    margin-bottom: 0;
}

.guide-rna-example img {
    width: 100%;
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.guide-rna-example figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.78rem;
}

.guide-rna-workspace {
    margin-top: 42px;
}

.guide-rna-workspace-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
}

.guide-rna-workspace-heading h2 {
    margin-top: 0;
}

.guide-rna-workspace-heading p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.guide-rna-workspace-heading .button {
    flex: 0 0 auto;
}

.guide-rna-frame-shell {
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
}

.guide-rna-frame {
    width: 100%;
    height: clamp(760px, 82vh, 1040px);
    display: block;
    border: 0;
    background: var(--bg);
}

.guide-rna-frame-note {
    margin-bottom: 0;
    padding-top: 9px;
    color: var(--muted);
    font-size: 0.78rem;
}

.guide-rna-frame-note a {
    font-weight: 700;
}

@media (max-width: 820px) {
    .guide-rna-overview {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .guide-rna-example {
        max-width: 680px;
    }
}

@media (max-width: 640px) {
    .guide-rna-header h1 {
        font-size: 2rem;
    }

    .guide-rna-overview {
        margin-top: 28px;
        padding: 22px 0;
    }

    .guide-rna-workspace-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .guide-rna-workspace-heading .button {
        width: 100%;
        justify-content: center;
    }

    .guide-rna-frame {
        height: 860px;
    }
}

/* Breeding: embedded protein prediction models -------------------------------- */

.prediction-model-page .guide-rna-header h1 {
    max-width: 34ch;
    font-size: 2.1rem;
    overflow-wrap: break-word;
}

.prediction-model-overview {
    grid-template-columns: minmax(0, 920px);
}

.prediction-model-frame-shell {
    overflow: auto;
    overscroll-behavior: contain;
}

.prediction-model-frame {
    min-width: 600px;
    height: 1100px;
}

/* Pangenome: evidence-first release and catalog -------------------------------- */

.pangenome-page {
    padding-top: 30px;
    min-width: 0;
    overflow-x: hidden;
}

.pangenome-header {
    max-width: 880px;
    padding-bottom: 26px;
}

.pangenome-kicker,
.pangenome-section-label {
    margin: 0 0 6px;
    color: var(--berry);
    font-size: var(--text-caption);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pangenome-header h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.pangenome-header > p:last-child {
    max-width: 76ch;
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.62;
}

.pangenome-unavailable {
    padding: 22px 24px;
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--berry);
    background: var(--surface);
}

.pangenome-unavailable h2,
.pangenome-unavailable p {
    margin: 0;
}

.pangenome-unavailable h2 {
    font-size: 1.15rem;
}

.pangenome-unavailable p {
    margin-top: 7px;
    color: var(--muted);
}

.pangenome-release {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 20px 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border);
}

.pangenome-release h2,
.pangenome-section-heading h2,
.pangenome-provenance h2 {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.25;
}

.pangenome-release .pangenome-mono {
    margin: 5px 0 0;
    color: var(--muted);
}

.pangenome-state {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid oklch(0.73 0.09 145);
    border-radius: 999px;
    background: oklch(0.97 0.025 145);
    color: oklch(0.39 0.09 145);
    font-size: var(--text-caption);
    font-weight: 800;
}

.pangenome-state.preview {
    border-color: oklch(0.75 0.08 75);
    background: oklch(0.97 0.025 75);
    color: oklch(0.42 0.08 70);
}

.pangenome-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.pangenome-facts div {
    min-width: 0;
    padding: 20px 22px 20px 0;
}

.pangenome-facts div + div {
    padding-left: 22px;
    border-left: 1px solid var(--border);
}

.pangenome-facts dt,
.pangenome-detail-facts dt,
.pangenome-provenance dt {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 750;
}

.pangenome-facts dd {
    margin: 4px 0 2px;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.pangenome-facts small {
    color: var(--muted);
    font-size: 0.75rem;
}

.pangenome-boundary {
    display: grid;
    grid-template-columns: 180px minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: 24px;
    margin-top: 22px;
    padding: 18px 20px;
    border-left: 3px solid var(--honey);
    background: var(--surface);
}

.pangenome-boundary h2,
.pangenome-boundary p {
    margin: 0;
}

.pangenome-boundary h2 {
    font-size: 1rem;
}

.pangenome-boundary p {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.55;
}

.pangenome-section {
    margin-top: 38px;
}

.pangenome-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 12px;
}

.pangenome-section-heading > p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.pangenome-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    contain: inline-size paint;
    border: 1px solid var(--border);
    background: var(--bg);
    overscroll-behavior-inline: contain;
}

.pangenome-table-scroll:focus-visible {
    outline: 3px solid oklch(0.68 0.14 28 / 0.3);
    outline-offset: 2px;
}

.pangenome-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.pangenome-table th,
.pangenome-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.pangenome-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 800;
    white-space: nowrap;
}

.pangenome-table tbody tr:last-child td {
    border-bottom: 0;
}

.pangenome-table tbody tr:hover {
    background: oklch(0.98 0.008 75);
}

.pangenome-table code,
.pangenome-mono {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.pangenome-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pangenome-call {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.pangenome-call.present,
.pangenome-call.grouped,
.pangenome-call.core {
    background: oklch(0.95 0.035 145);
    color: oklch(0.38 0.08 145);
}

.pangenome-call.auxiliary,
.pangenome-call.unassigned {
    background: oklch(0.96 0.025 75);
    color: oklch(0.43 0.075 70);
}

.pangenome-call.not-detected {
    color: var(--muted);
}

.pangenome-filters {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) minmax(170px, 0.75fr) minmax(150px, 0.6fr) minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.pangenome-filters label > span {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-caption);
    font-weight: 750;
}

.pangenome-filters input,
.pangenome-filters select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.pangenome-filters input {
    padding: 8px 10px;
}

.pangenome-filters select {
    padding: 8px 30px 8px 10px;
}

.pangenome-filters .button {
    min-height: 40px;
}

.pangenome-catalog > .gene-status {
    min-height: 20px;
    margin: 0 0 8px;
}

.pangenome-open-detail {
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pangenome-open-detail[aria-current="true"] {
    color: var(--ink);
}

.pangenome-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.pangenome-pagination span {
    min-width: 110px;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-small);
}

.pangenome-detail {
    scroll-margin-top: 20px;
    padding-top: 22px;
    border-top: 2px solid var(--ink);
}

.pangenome-detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 0 0 18px;
}

.pangenome-detail-facts dd,
.pangenome-provenance dd {
    margin: 3px 0 0;
}

.pangenome-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 18px;
}

.pangenome-detail-grid h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.pangenome-detail-grid .pangenome-table {
    min-width: 620px;
}

.pangenome-member-scroll {
    max-height: 420px;
    overflow-y: auto;
}

.pangenome-provenance {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
    gap: 48px;
    margin-top: 46px;
    padding: 26px 0;
    border-top: 1px solid var(--border-strong);
}

.pangenome-provenance p:last-child {
    max-width: 78ch;
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.pangenome-provenance dl {
    margin: 0;
}

.pangenome-provenance dl div {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 1050px) {
    .pangenome-filters {
        grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(160px, 0.7fr));
    }

    .pangenome-filters label:nth-of-type(4) {
        grid-column: 1 / span 2;
    }

    .pangenome-boundary {
        grid-template-columns: 150px 1fr;
    }

    .pangenome-boundary p:last-child {
        grid-column: 2;
    }
}

@media (max-width: 760px) {
    .pangenome-release,
    .pangenome-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .pangenome-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pangenome-facts div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .pangenome-facts div:nth-child(4) {
        border-top: 1px solid var(--border);
    }

    .pangenome-boundary,
    .pangenome-detail-grid,
    .pangenome-provenance {
        grid-template-columns: 1fr;
    }

    .pangenome-boundary p:last-child {
        grid-column: auto;
    }

    .pangenome-filters {
        grid-template-columns: 1fr 1fr;
    }

    .pangenome-search-field,
    .pangenome-filters label:nth-of-type(4) {
        grid-column: 1 / -1;
    }

    .pangenome-filters .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .pangenome-facts,
    .pangenome-filters {
        grid-template-columns: 1fr;
    }

    .pangenome-facts div,
    .pangenome-facts div + div {
        padding: 14px 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .pangenome-search-field,
    .pangenome-filters label:nth-of-type(4) {
        grid-column: auto;
    }

    .pangenome-pagination {
        justify-content: space-between;
    }
}

/* Pangenome task workspace ---------------------------------------------------- */

.pangenome-header {
    max-width: 960px;
    padding: 8px 0 28px;
}

.pangenome-header h1 {
    font-size: 2.35rem;
}

.pangenome-header > p {
    max-width: 74ch;
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.62;
}

.pangenome-section-heading {
    align-items: flex-start;
}

.pangenome-section-heading h2 {
    font-size: 1.35rem;
}

.pangenome-section-heading div > p {
    max-width: 74ch;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.5;
}

.pangenome-graph {
    padding: 22px 24px 18px;
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--ink);
    background: var(--bg);
    scroll-margin-top: 132px;
}

.pangenome-graph-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.7fr) minmax(140px, 0.55fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 18px;
}

.pangenome-graph-controls label > span {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-caption);
    font-weight: 750;
}

.pangenome-graph-controls input,
.pangenome-graph-controls select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.pangenome-graph-controls .button {
    min-height: 40px;
}

.pangenome-graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.pangenome-graph-toolbar .button {
    min-height: 34px;
    padding: 6px 11px;
    font-size: var(--text-small);
}

.pangenome-graph > .gene-status {
    min-height: 20px;
    margin: 12px 0 7px;
}

.pangenome-graph-viewport {
    width: 100%;
    overflow-x: auto;
    contain: inline-size paint;
    border: 1px solid var(--border);
    background: var(--surface);
    overscroll-behavior-inline: contain;
}

.pangenome-graph-viewport:focus-visible {
    outline: 3px solid oklch(0.68 0.14 28 / 0.28);
    outline-offset: 2px;
}

.pangenome-graph-loading {
    display: grid;
    min-height: 240px;
    place-items: center;
    padding: 20px;
    color: var(--muted);
    text-align: center;
}

.pangenome-graph-loading.error {
    color: var(--berry);
}

.pangenome-graph-svg {
    display: block;
    width: 100%;
    min-width: 920px;
    height: auto;
    padding: 10px 12px;
}

.pangenome-graph-svg .graph-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.pangenome-graph-svg .graph-axis,
.pangenome-graph-svg .graph-coverage {
    fill: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.pangenome-graph-svg .graph-species {
    fill: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.pangenome-graph-svg .graph-lane {
    fill: var(--border);
}

.pangenome-graph-svg .graph-segment {
    opacity: 0.94;
}

.pangenome-graph-svg .graph-segment.forward {
    fill: oklch(0.55 0.12 145);
}

.pangenome-graph-svg .graph-segment.reverse {
    fill: oklch(0.68 0.12 70);
}

.pangenome-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-graph-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pangenome-graph-legend i {
    display: inline-block;
    width: 14px;
    height: 9px;
}

.pangenome-graph-legend .forward {
    background: oklch(0.55 0.12 145);
}

.pangenome-graph-legend .reverse {
    background: oklch(0.68 0.12 70);
}

.pangenome-graph-legend .gap {
    background: var(--border);
}

.pangenome-overview {
    padding: 22px 0 18px;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--border-strong);
    background: var(--bg);
}

.pangenome-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pangenome-analysis-grid figure {
    min-width: 0;
    margin: 0;
    padding: 20px 22px 20px 0;
}

.pangenome-analysis-grid figure + figure {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--border);
}

.pangenome-analysis-grid figcaption {
    margin-bottom: 18px;
    font-size: 0.92rem;
    font-weight: 800;
}

.pangenome-analysis-grid figcaption > span {
    display: inline-grid;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    place-items: center;
    border: 1px solid var(--ink);
    font-size: 0.76rem;
}

.pangenome-composition-bar {
    display: flex;
    width: 100%;
    height: 26px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background: var(--bg);
}

.pangenome-composition-bar span {
    display: block;
    min-width: 1px;
}

.pangenome-composition-bar .all,
.pangenome-composition-facts .all i {
    background: oklch(0.51 0.12 145);
}

.pangenome-composition-bar .subset,
.pangenome-composition-facts .subset i {
    background: oklch(0.65 0.10 195);
}

.pangenome-composition-bar .one,
.pangenome-composition-facts .one i {
    background: oklch(0.74 0.09 73);
}

.pangenome-composition-facts {
    display: grid;
    gap: 0;
    margin: 16px 0 0;
}

.pangenome-composition-facts > div {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.pangenome-composition-facts dt,
.pangenome-composition-facts dd,
.pangenome-composition-facts p {
    margin: 0;
}

.pangenome-composition-facts dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-small);
    font-weight: 750;
}

.pangenome-composition-facts dt i {
    width: 10px;
    height: 10px;
}

.pangenome-composition-facts dd {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pangenome-composition-facts dd small,
.pangenome-addition-figure > p {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
}

.pangenome-addition-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.pangenome-addition-chart .addition-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.pangenome-addition-chart .addition-axis,
.pangenome-addition-chart .addition-label {
    fill: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.pangenome-addition-chart .addition-label {
    font-weight: 700;
}

.pangenome-addition-chart .addition-line {
    fill: none;
    stroke-width: 2;
}

.pangenome-addition-chart .addition-line.pan,
.pangenome-addition-chart .addition-dot.pan,
.pangenome-addition-legend i.pan {
    stroke: oklch(0.50 0.13 28);
    fill: oklch(0.50 0.13 28);
}

.pangenome-addition-chart .addition-line.shared,
.pangenome-addition-chart .addition-dot.shared,
.pangenome-addition-legend i.shared {
    stroke: oklch(0.51 0.12 145);
    fill: oklch(0.51 0.12 145);
}

.pangenome-addition-chart .addition-subset-dot {
    stroke: none;
    opacity: 0.32;
}

.pangenome-addition-chart .addition-subset-dot:hover {
    opacity: 1;
    stroke: var(--bg);
    stroke-width: 1.5;
}

.pangenome-addition-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 6px 0 0 54px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-addition-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pangenome-addition-legend i {
    width: 16px;
    height: 2px;
}

.pangenome-addition-legend b {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
}

.pangenome-addition-figure > p {
    margin: 10px 0 0 54px;
    line-height: 1.45;
}

.pangenome-occupancy-detail {
    margin-top: 20px;
}

.pangenome-occupancy-detail .pangenome-subheading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pangenome-heading-actions p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
}

.pangenome-heading-actions .button {
    min-height: 34px;
    padding: 6px 10px;
    white-space: nowrap;
}

.pangenome-matrix-table {
    min-width: 1260px;
}

.pangenome-matrix-table th,
.pangenome-matrix-table td {
    vertical-align: middle;
}

.pangenome-matrix-gene {
    min-width: 220px;
}

.pangenome-matrix-gene small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.pangenome-matrix-species {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pangenome-matrix-cell {
    width: 76px;
    min-width: 76px;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.pangenome-matrix-cell.copy-0,
.pangenome-copy-legend .copy-0 {
    background: oklch(0.97 0.004 75);
    color: oklch(0.61 0.02 75);
    font-weight: 500;
}

.pangenome-matrix-cell.copy-1,
.pangenome-copy-legend .copy-1 {
    background: oklch(0.91 0.05 145);
    color: oklch(0.32 0.08 145);
}

.pangenome-matrix-cell.copy-2,
.pangenome-copy-legend .copy-2 {
    background: oklch(0.80 0.09 145);
    color: oklch(0.25 0.07 145);
}

.pangenome-matrix-cell.copy-5,
.pangenome-copy-legend .copy-5 {
    background: oklch(0.66 0.11 145);
    color: white;
}

.pangenome-matrix-cell.copy-10,
.pangenome-copy-legend .copy-10 {
    background: oklch(0.43 0.10 145);
    color: white;
}

.pangenome-chart-legend i.grouped {
    background: linear-gradient(90deg, oklch(0.75 0.13 72) 0 25%, oklch(0.63 0.10 245) 25% 60%, oklch(0.76 0.10 15) 60% 78%, oklch(0.63 0.14 28) 78% 100%);
}

.pangenome-occupancy-mark .occupancy-unassigned,
.pangenome-chart-legend i.unassigned {
    background: oklch(0.78 0.02 75);
    fill: oklch(0.78 0.02 75);
}

.pangenome-copy-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 11px;
    margin: -2px 0 8px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-copy-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pangenome-copy-legend i {
    width: 14px;
    height: 14px;
    border: 1px solid oklch(0.72 0.02 145);
}

.pangenome-text-button {
    min-height: 32px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--berry);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-small);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pangenome-text-button:hover {
    color: var(--ink);
}

.pangenome-text-button:focus-visible,
.pangenome-occupancy-mark:focus-visible,
.pangenome-open-detail:focus-visible {
    outline: 3px solid oklch(0.68 0.14 28 / 0.28);
    outline-offset: 3px;
}

.pangenome-occupancy-chart {
    min-height: 280px;
}

.pangenome-occupancy-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.pangenome-occupancy-chart .occupancy-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.pangenome-occupancy-chart .occupancy-axis,
.pangenome-occupancy-chart .occupancy-label,
.pangenome-occupancy-chart .occupancy-value {
    fill: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.pangenome-occupancy-chart .occupancy-label {
    font-weight: 700;
}

.pangenome-occupancy-chart .occupancy-value {
    fill: var(--ink);
    font-size: 11px;
    font-weight: 700;
}

.pangenome-occupancy-mark {
    cursor: pointer;
}

.pangenome-occupancy-mark .occupancy-hit {
    fill: transparent;
}

.pangenome-occupancy-mark .occupancy-grouped {
    fill: oklch(0.55 0.12 145);
}

.pangenome-occupancy-mark .occupancy-unassigned {
    fill: oklch(0.74 0.08 75);
}

.pangenome-occupancy-mark:hover .occupancy-hit,
.pangenome-occupancy-mark.selected .occupancy-hit {
    fill: oklch(0.96 0.015 28);
}

.pangenome-occupancy-mark.selected .occupancy-grouped,
.pangenome-occupancy-mark.selected .occupancy-unassigned {
    stroke: var(--berry);
    stroke-width: 2;
}

.pangenome-chart-loading {
    grid-column: 1 / -1;
    align-self: center;
    color: var(--muted);
    text-align: center;
}

.pangenome-chart-legend i.grouped {
    background: oklch(0.55 0.12 145);
}

.pangenome-chart-legend i.unassigned {
    background: oklch(0.74 0.08 75);
}

.pangenome-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.pangenome-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pangenome-chart-legend i {
    display: inline-block;
    width: 11px;
    height: 11px;
}

.pangenome-profile-panel {
    margin-bottom: 22px;
    padding: 18px 20px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.pangenome-profile-panel h3,
.pangenome-subheading h3 {
    margin: 0;
    font-size: 1rem;
}

.pangenome-presence-profile {
    display: grid;
    grid-template-columns: repeat(7, minmax(70px, 1fr));
    gap: 12px;
    min-width: 630px;
    margin-top: 14px;
}

.pangenome-profile-panel {
    overflow-x: auto;
}

.pangenome-profile-column {
    display: grid;
    grid-template-rows: 22px 90px auto;
    gap: 5px;
    text-align: center;
}

.pangenome-profile-column > strong {
    align-self: end;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.pangenome-profile-column > span:last-child {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pangenome-profile-track {
    display: flex;
    align-items: flex-end;
    height: 90px;
    border-bottom: 1px solid var(--border-strong);
}

.pangenome-profile-track i {
    display: block;
    width: 100%;
    min-height: 3px;
}

.pangenome-profile-track .detected {
    background: oklch(0.55 0.12 145);
}

.pangenome-profile-track .empty {
    background: var(--border-strong);
}

.pangenome-subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.pangenome-subheading .pangenome-text-button {
    flex: 0 0 auto;
}

.pangenome-methods {
    margin: 38px 0 6px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-small);
}

.pangenome-methods summary {
    width: fit-content;
    color: var(--ink);
    cursor: pointer;
    font-weight: 750;
}

.pangenome-methods p {
    max-width: 76ch;
    margin: 10px 0 0;
    line-height: 1.55;
}

.pangenome-references {
    margin: 20px 0 6px;
    padding: 20px 0 2px;
    border-top: 1px solid var(--border);
}

.pangenome-references h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 700;
}

.pangenome-references ol {
    max-width: 108ch;
    margin: 0;
    padding-left: 1.3rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.pangenome-references a {
    margin-left: 8px;
    color: var(--berry);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pangenome-references a:hover,
.pangenome-references a:focus-visible {
    color: color-mix(in oklch, var(--berry) 78%, var(--ink));
}

@media (max-width: 760px) {
    .pangenome-header h1 {
        font-size: 1.95rem;
    }

    .pangenome-overview {
        padding: 18px 14px 14px;
    }

    .pangenome-analysis-grid {
        grid-template-columns: 1fr;
    }

    .pangenome-analysis-grid figure,
    .pangenome-analysis-grid figure + figure {
        padding: 18px 0;
        border-left: 0;
    }

    .pangenome-analysis-grid figure + figure {
        border-top: 1px solid var(--border);
    }

    .pangenome-addition-chart {
        overflow-x: auto;
    }

    .pangenome-addition-chart svg {
        min-width: 620px;
    }

    .pangenome-heading-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .pangenome-graph {
        padding: 18px 14px 14px;
    }

    .pangenome-graph-controls {
        grid-template-columns: 1fr 1fr;
    }

    .pangenome-graph-controls label:first-child {
        grid-column: 1 / -1;
    }

    .pangenome-graph-controls .button {
        width: 100%;
    }

    .pangenome-occupancy-chart {
        min-width: 650px;
    }

    .pangenome-occupancy-detail {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .pangenome-graph-controls {
        grid-template-columns: 1fr;
    }

    .pangenome-graph-controls label:first-child {
        grid-column: auto;
    }

    .pangenome-graph-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pangenome-addition-legend,
    .pangenome-addition-figure > p {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pangenome-occupancy-mark {
        transition: none;
    }
}

/* Pangenome: publication-style analytical workspace ------------------------- */

.pangenome-page,
.pangenome-page button,
.pangenome-page input,
.pangenome-page select {
    font-family: Arial, Helvetica, sans-serif;
}

.pangenome-page h1,
.pangenome-page h2,
.pangenome-page h3,
.pangenome-page h4,
.pangenome-page th,
.pangenome-page figcaption,
.pangenome-page label {
    font-family: Arial, Helvetica, sans-serif;
}

.pangenome-header {
    max-width: none;
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--border-strong);
}

.pangenome-header h1 {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    letter-spacing: -0.025em;
}

.pangenome-quick-find {
    margin: 0;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--border-strong);
}

.pangenome-quick-find > label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.82rem;
    font-weight: 700;
}

.pangenome-quick-find > div {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 8px;
}

.pangenome-quick-find input {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
}

.pangenome-quick-find .button {
    min-height: 42px;
}

.pangenome-quick-find > p {
    min-height: 18px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.pangenome-section {
    margin-top: 32px;
    scroll-margin-top: 118px;
}

.pangenome-catalog,
.pangenome-site-evidence,
.pangenome-overview {
    padding-top: 18px;
    border-top: 2px solid var(--ink);
}

.pangenome-graph {
    border-top-width: 2px;
}

.pangenome-section-heading h2 {
    font-size: 1.22rem;
    letter-spacing: -0.01em;
}

.pangenome-result-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pangenome-result-tools > span {
    margin-right: auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.pangenome-result-tools .button,
.pangenome-comparison .button {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 0.76rem;
}

.pangenome-select-cell {
    width: 36px;
    min-width: 36px;
    text-align: center !important;
}

.pangenome-select-cell input {
    display: block;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    accent-color: oklch(0.56 0.16 28);
}

.pangenome-comparison {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-strong);
}

.pangenome-comparison .pangenome-section-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.pangenome-selected-matrix {
    min-width: max-content;
}

.pangenome-selected-matrix th,
.pangenome-selected-matrix td {
    min-width: 72px;
    text-align: center;
}

.pangenome-selected-matrix th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    background: var(--surface);
    text-align: left;
}

.pangenome-graph-sync,
.pangenome-observation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.76rem;
}

.pangenome-graph-sync {
    margin-left: auto;
}

.pangenome-observation-toggle {
    margin: 9px 0 0 54px;
}

.pangenome-graph-sync input,
.pangenome-observation-toggle input {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: oklch(0.56 0.16 28);
}

.pangenome-addition-chart .subset-observations {
    display: none;
}

.pangenome-addition-chart.show-subsets .subset-observations {
    display: block;
}

.pangenome-addition-chart .addition-boxplot .box-whisker,
.pangenome-addition-chart .addition-boxplot .box-median {
    fill: none;
    stroke-width: 1.2;
}

.pangenome-addition-chart .addition-boxplot .box-body {
    stroke-width: 1.2;
}

.pangenome-addition-chart .addition-boxplot.pan .box-whisker,
.pangenome-addition-chart .addition-boxplot.pan .box-median,
.pangenome-addition-chart .addition-boxplot.pan .box-body {
    stroke: oklch(0.57 0.16 28);
}

.pangenome-addition-chart .addition-boxplot.pan .box-body {
    fill: oklch(0.87 0.07 28 / 0.78);
}

.pangenome-addition-chart .addition-boxplot.shared .box-whisker,
.pangenome-addition-chart .addition-boxplot.shared .box-median,
.pangenome-addition-chart .addition-boxplot.shared .box-body {
    stroke: oklch(0.52 0.12 245);
}

.pangenome-addition-chart .addition-boxplot.shared .box-body {
    fill: oklch(0.88 0.05 245 / 0.82);
}

.pangenome-addition-chart .addition-line.pan,
.pangenome-addition-chart .addition-subset-dot.pan,
.pangenome-addition-legend i.pan {
    stroke: oklch(0.57 0.16 28);
    fill: oklch(0.57 0.16 28);
}

.pangenome-addition-chart .addition-line.shared,
.pangenome-addition-chart .addition-subset-dot.shared,
.pangenome-addition-legend i.shared {
    stroke: oklch(0.52 0.12 245);
    fill: oklch(0.52 0.12 245);
}

.pangenome-assembly-composition-figure {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pangenome-assembly-composition-figure figcaption {
    margin-bottom: 13px;
    font-size: 0.92rem;
    font-weight: 800;
}

.pangenome-assembly-composition {
    display: grid;
    gap: 5px;
}

.pangenome-assembly-composition-row {
    display: grid;
    grid-template-columns: minmax(145px, 190px) minmax(280px, 1fr) 70px;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 30px;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

.pangenome-assembly-composition-row:hover .pangenome-assembly-stack,
.pangenome-assembly-composition-row:focus-visible .pangenome-assembly-stack {
    outline: 2px solid oklch(0.56 0.16 28 / 0.4);
    outline-offset: 2px;
}

.pangenome-assembly-composition-row > i {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pangenome-assembly-composition-row > strong {
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pangenome-assembly-stack {
    display: flex;
    height: 18px;
    overflow: hidden;
    background: var(--surface);
}

.pangenome-assembly-stack > span {
    min-width: 1px;
}

.pangenome-assembly-stack .core,
.pangenome-composition-legend .core,
.pangenome-occupancy-mark .occupancy-grouped.core {
    background: oklch(0.63 0.14 28);
    fill: oklch(0.63 0.14 28);
}

.pangenome-assembly-stack .near-core,
.pangenome-composition-legend .near-core,
.pangenome-occupancy-mark .occupancy-grouped.near-core {
    background: oklch(0.76 0.10 15);
    fill: oklch(0.76 0.10 15);
}

.pangenome-assembly-stack .dispensable,
.pangenome-composition-legend .dispensable,
.pangenome-occupancy-mark .occupancy-grouped.dispensable {
    background: oklch(0.63 0.10 245);
    fill: oklch(0.63 0.10 245);
}

.pangenome-assembly-stack .private,
.pangenome-composition-legend .private,
.pangenome-occupancy-mark .occupancy-grouped.private {
    background: oklch(0.75 0.13 72);
    fill: oklch(0.75 0.13 72);
}

.pangenome-composition-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin: 10px 0 0 202px;
    color: var(--muted);
    font-size: 0.73rem;
}

.pangenome-composition-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pangenome-composition-legend i {
    width: 11px;
    height: 11px;
}

.pangenome-matrix-cell.copy-0,
.pangenome-copy-legend .copy-0 {
    background: oklch(0.97 0.01 245);
    color: oklch(0.60 0.03 245);
}

.pangenome-matrix-cell.copy-1,
.pangenome-copy-legend .copy-1 {
    background: oklch(0.91 0.045 28);
    color: oklch(0.36 0.10 28);
}

.pangenome-matrix-cell.copy-2,
.pangenome-copy-legend .copy-2 {
    background: oklch(0.79 0.10 28);
    color: oklch(0.29 0.11 28);
}

.pangenome-matrix-cell.copy-5,
.pangenome-copy-legend .copy-5 {
    background: oklch(0.62 0.16 28);
    color: white;
}

.pangenome-matrix-cell.copy-10,
.pangenome-copy-legend .copy-10 {
    background: oklch(0.39 0.12 28);
    color: white;
}

@media (max-width: 760px) {
    .pangenome-quick-find > div {
        grid-template-columns: 1fr;
    }

    .pangenome-quick-find .button,
    .pangenome-result-tools .button {
        width: 100%;
    }

    .pangenome-result-tools > span {
        flex-basis: 100%;
    }

    .pangenome-graph-sync {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .pangenome-observation-toggle,
    .pangenome-composition-legend {
        margin-left: 0;
    }

    .pangenome-assembly-composition {
        min-width: 620px;
    }

    .pangenome-assembly-composition-figure {
        overflow-x: auto;
    }
}

@media (min-width: 1000px) {
    .prediction-model-frame {
        min-width: 1200px;
    }
}

@media (max-width: 640px) {
    .prediction-model-page .guide-rna-header h1 {
        font-size: 1.65rem;
        line-height: 1.18;
    }

    .prediction-model-frame {
        height: 980px;
    }
}

/* Pangenome workbench cascade gate. Keep this block at the end of the file. */
.pangenome-page .pangenome-site-evidence,
.pangenome-page .pangenome-catalog,
.pangenome-page .pangenome-overview {
    padding: 0;
    border: 0;
    background: transparent;
}

.pangenome-page .pangenome-site-map-panel {
    margin-top: 34px;
    margin-bottom: 18px;
    padding-top: 18px;
    overflow-x: visible;
    border-top: 1px solid var(--border);
}

.pangenome-page .pangenome-site-map {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin-top: 8px;
    padding: 0;
    overflow-x: auto;
    border: 0;
    background: transparent;
}

.pangenome-page .pangenome-site-map svg {
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto;
}

.pangenome-page .pangenome-site-bin {
    position: static;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.pangenome-page .pangenome-site-bin rect {
    fill: transparent;
    stroke: transparent;
}

.pangenome-page .pangenome-site-bin:hover rect,
.pangenome-page .pangenome-site-bin:focus-visible rect {
    fill: oklch(0.50 0.04 245 / 0.07);
}

.pangenome-page .pangenome-site-bin.selected rect {
    fill: oklch(0.54 0.14 25 / 0.08);
    stroke: oklch(0.50 0.14 25);
    stroke-width: 1.1;
}

.pangenome-page .pangenome-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
}

.pangenome-page .pangenome-secondary-tool {
    padding: 0;
    border: 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    background: transparent;
}

.pangenome-page .pangenome-matrix-cell.copy-0,
.pangenome-page .pangenome-copy-legend .copy-0 {
    background: oklch(0.965 0.008 245);
    color: oklch(0.62 0.025 245);
}

.pangenome-page .pangenome-matrix-cell.copy-1,
.pangenome-page .pangenome-copy-legend .copy-1 {
    background: oklch(0.93 0.025 235);
    color: oklch(0.35 0.06 235);
}

.pangenome-page .pangenome-matrix-cell.copy-2,
.pangenome-page .pangenome-copy-legend .copy-2 {
    background: oklch(0.84 0.055 235);
    color: oklch(0.30 0.07 235);
}

.pangenome-page .pangenome-matrix-cell.copy-5,
.pangenome-page .pangenome-copy-legend .copy-5 {
    background: oklch(0.69 0.08 235);
    color: oklch(0.22 0.05 235);
}

.pangenome-page .pangenome-matrix-cell.copy-10,
.pangenome-page .pangenome-copy-legend .copy-10 {
    background: oklch(0.48 0.08 235);
    color: white;
}

@media (max-width: 760px) {
    .pangenome-page .pangenome-phylogeny-figure {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .pangenome-page .pangenome-phylogeny-figure svg {
        width: 720px;
        max-width: none;
    }

    .pangenome-page .pangenome-phylogeny-figure > p {
        min-width: 0;
    }
}

/* Homepage genome directory: four compact, publication-style data tables. */
.genome-directory {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 40px auto 0;
    color: var(--ink);
}

.genome-directory .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.genome-directory .directory-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--berry);
}

.genome-directory .directory-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.genome-directory .directory-heading p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.genome-directory .directory-search {
    position: relative;
    display: flex;
    flex: 0 1 320px;
    align-items: center;
}

.genome-directory .directory-search svg {
    position: absolute;
    left: 13px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}

.genome-directory .directory-search input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 40px 0 40px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
}

.genome-directory .directory-search input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.genome-directory .directory-search button {
    position: absolute;
    right: 4px;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    cursor: pointer;
}

.resource-quadrants {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 46px;
}

.genome-directory .resource-panel {
    min-width: 0;
    align-self: start;
    border-top: 3px solid var(--section-accent);
}

.resource-panel--cultivated { --section-accent: var(--berry); }
.resource-panel--wild { --section-accent: var(--primary); }
.resource-panel--pathogens { --section-accent: oklch(0.43 0.06 75); }
.resource-panel--pangenome { --section-accent: oklch(0.43 0.075 235); }

.genome-directory .resource-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding-top: 14px;
}

.genome-directory .resource-panel-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.genome-directory .resource-count {
    flex: 0 0 auto;
    color: var(--section-accent);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.genome-directory .resource-count strong {
    font-size: 0.92rem;
}

.genome-directory .resource-description {
    min-height: 21px;
    margin: 5px 0 13px;
    color: var(--muted);
    font-size: 0.78rem;
}

.genome-directory .resource-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.81rem;
}

.genome-directory .resource-table th,
.genome-directory .resource-table td {
    height: 39px;
    padding: 8px 11px;
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.genome-directory .resource-table th {
    position: static;
    z-index: auto;
    background: transparent;
    color: inherit;
}

.genome-directory .resource-table thead th {
    height: auto;
    padding-top: 7px;
    padding-bottom: 7px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.genome-directory .resource-table tbody th {
    font-weight: 600;
}

.genome-directory .resource-table tbody td {
    color: var(--muted);
}

.genome-directory .resource-table tbody tr:hover {
    background: color-mix(in oklch, var(--surface) 78%, white);
}

.genome-directory .resource-table a {
    color: var(--ink);
    text-decoration: none;
    text-underline-offset: 3px;
}

.genome-directory .resource-table a:hover,
.genome-directory .resource-table a:focus-visible {
    color: var(--section-accent);
    text-decoration: underline;
}

.genome-directory .resource-table i {
    font-size: 0.92rem;
}

.genome-directory .resource-table .mono {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.genome-directory .resource-table .version,
.genome-directory .resource-table .ploidy {
    white-space: nowrap;
}

.genome-directory .resource-table .membership {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.genome-directory .resource-table .membership::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: oklch(0.52 0.08 235);
}

.genome-directory .resource-table .membership--groups {
    color: oklch(0.43 0.06 75);
}

.genome-directory .resource-table .membership--groups::before {
    background: oklch(0.58 0.08 75);
}

.resource-panel--cultivated col:first-child { width: 40%; }
.resource-panel--wild col:nth-child(1) { width: 60%; }
.resource-panel--wild col:nth-child(2) { width: 40%; }
.resource-panel--pathogens col:nth-child(1) { width: 32%; }
.resource-panel--pathogens col:nth-child(2) { width: 45%; }
.resource-panel--pangenome col:nth-child(1) { width: 60%; }
.resource-panel--pangenome col:nth-child(2) { width: 40%; }

.genome-directory .resource-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 38px;
    padding-top: 7px;
    color: var(--muted);
    font-size: 0.7rem;
}

.genome-directory .resource-panel-footer button,
.genome-directory .resource-panel-footer a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--section-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.genome-directory .resource-panel-footer :is(button, a):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.genome-directory .resource-empty {
    padding: 20px 11px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
}

.genome-directory [hidden] {
    display: none !important;
}

.genome-directory .directory-footnote {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    font-size: 0.78rem;
}

.genome-directory .directory-footnote a {
    color: var(--primary);
    text-decoration: none;
}

.genome-directory .directory-footnote a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.footer-institution-logos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.footer-logo {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: contain;
}

.footer-logo--wide {
    width: auto;
    max-width: 220px;
    height: 46px;
    border-radius: 0;
}

.footer-copy {
    color: var(--muted);
}

@media (max-width: 1050px) {
    .resource-quadrants {
        gap: 30px 26px;
    }

    .genome-directory .resource-table th,
    .genome-directory .resource-table td {
        padding-right: 8px;
        padding-left: 8px;
    }

    .genome-directory .resource-table .membership {
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .genome-directory {
        width: min(calc(100% - 24px), var(--content-width));
        margin-top: 32px;
    }

    .genome-directory .directory-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 22px;
    }

    .genome-directory .directory-search {
        flex-basis: auto;
        width: 100%;
    }

    .resource-quadrants {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .genome-directory .resource-table th,
    .genome-directory .resource-table td {
        height: 42px;
    }

    .footer-institution-logos {
        gap: 14px 18px;
    }

    .footer-logo {
        width: 40px;
        height: 40px;
    }

    .footer-logo--wide {
        max-width: 155px;
        height: 38px;
    }
}