/* Holotype UI — panels.css
   Detail panels: lineage tree, compendium grid, leaderboard,
   featured cross, genome overview, loci cards, diploid locus card.
   Part 6/7 of the former styles.css; files are linked
   from index.html in order, so the cascade is unchanged. */

        /* ---- Lineage tree ---- */
        #lineage-section .lineage-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 8px;
        }
        #lineage-section .lineage-header h2 {
            margin: 0;
        }
        #lineage-section .lineage-tree,
        #inline-lineage {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow-x: auto;
        }
        #lineage-section .lineage-tree { padding: 14px; }
        .lineage-generation {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        .lineage-generation-label {
            font-family: var(--font-serif);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            font-weight: 600;
            color: var(--ink-faint);
            font-feature-settings: "smcp", "lnum";
            min-width: 84px;
        }
        /* Pedigree node — a small pinned specimen tile, square-cornered
           to match the notebook idiom. */
        .lineage-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 92px;
            padding: 6px;
            border: 1px solid var(--rule);
            border-radius: 1px;
            background: transparent;
            cursor: pointer;
            transition: transform 80ms ease, border-color 80ms ease;
        }
        .lineage-node:hover {
            transform: translateY(-2px);
            border-color: var(--copper);
        }
        .lineage-node.is-focal {
            border-color: var(--copper);
            box-shadow: 0 0 0 2px var(--copper-dim);
        }
        .lineage-node img {
            width: 78px;
            height: 78px;
            object-fit: cover;
            border-radius: 1px;
            background: var(--surface);
        }
        .lineage-node .lineage-node-name {
            font-family: var(--font-serif);
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            line-height: 1.2;
            color: var(--ink);
            word-break: break-word;
        }
        .lineage-empty {
            font-family: var(--font-hand);
            font-size: 16px;
            color: var(--ink-pen);
        }
        /* A small serif link inside a leaf — e.g. "open the full tree". */
        .leaf-link {
            margin-top: 14px;
            padding: 0;
            background: none;
            border: 0;
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 14px;
            color: var(--copper);
            cursor: pointer;
        }
        .leaf-link:hover { color: var(--copper-hover); }

        /* ---- Compendium grid ---- */
        /* Compendium — the field index. Each locus is a small framed
           page; cells inside are individual catalog entries. Discovery
           state encoded with copper (expressed) / brass (carrier) /
           hairline-dashed (undiscovered). */
        .compendium-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 6px;
        }
        .compendium-header h2 {
            margin: 0;
            font-family: var(--font-serif);
            font-size: 24px;
            font-weight: 500;
        }
        .compendium-progress {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .compendium-progress-text {
            font-family: var(--font-serif);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--copper);
            font-feature-settings: "smcp", "lnum";
            white-space: nowrap;
            font-variant-numeric: tabular-nums lining-nums;
        }
        .compendium-progress-bar {
            width: 160px;
            height: 4px;
            background: var(--rule);
            border-radius: 0;
            overflow: hidden;
        }
        .compendium-progress-fill {
            height: 100%;
            background: var(--copper);
            transition: width var(--motion-base);
        }
        .compendium-blurb {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 14px;
            color: var(--ink-muted);
            margin: 8px 0 22px;
            line-height: 1.55;
        }

        /* ---- Compendium tabs (Grid / Discoveries) ---- */
        .compendium-tabs {
            display: flex;
            gap: 6px;
            margin: 14px 0 4px;
            border-bottom: 1px solid var(--rule);
        }
        .compendium-tab {
            background: none;
            border: 0;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            padding: 7px 14px;
            font-family: var(--font-serif);
            font-size: 13px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink-faint);
            cursor: pointer;
            transition: color var(--motion-quick), border-color var(--motion-quick);
        }
        .compendium-tab:hover { color: var(--ink-muted); }
        .compendium-tab.is-active { color: var(--copper); border-bottom-color: var(--copper); }
        .compendium-pane[hidden] { display: none; }

        /* ---- Discovery history feed (#45) ---- */
        .dh-summary {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin: 16px 0 14px;
        }
        .dh-summary-total {
            font-family: var(--font-serif);
            font-size: 18px;
            color: var(--ink);
        }
        .dh-summary-sub { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }
        .discovery-history { display: flex; flex-direction: column; gap: 10px; }
        .dh-row {
            display: block;
            width: 100%;
            text-align: left;
            background: var(--bg-vellum);
            border: 1px solid var(--rule);
            border-left: 3px solid var(--rule-strong);
            border-radius: 3px;
            padding: 11px 14px;
            cursor: pointer;
            transition: border-color var(--motion-quick), transform var(--motion-quick);
        }
        .dh-row:hover:not([disabled]) { border-color: var(--copper); transform: translateX(2px); }
        .dh-row[disabled] { cursor: default; opacity: 0.7; }
        .dh-row.is-first { border-left-color: var(--gold-leaf); }
        .dh-row-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        .dh-badge {
            font-family: var(--font-serif);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .dh-badge-first { color: var(--gold-leaf); }
        .dh-badge-variant { color: var(--ink-faint); }
        .dh-when { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
        .dh-pheno { font-size: 14px; color: var(--ink); line-height: 1.45; }
        .dh-foot { margin-top: 5px; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.02em; }
        .compendium-grid {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        /* Locus material + title typography now come from the shared kit
           (.fj-plate / .fj-nameplate, added in render). Only the locus
           panel's own layout/padding + the title's underline stay here. */
        .compendium-locus {
            padding: 14px 16px 16px;
        }
        .compendium-locus-title {
            margin: 0 0 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--rule);
        }
        .compendium-cells {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 8px;
        }
        .compendium-cell {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 8px 10px;
            border-radius: 1px;
            border: 1px solid var(--rule);
            background: var(--bg-ink);
            font-size: 12px;
            cursor: help;
            transition: transform var(--motion-quick),
                        border-color var(--motion-quick);
        }
        .compendium-cell:hover {
            transform: translateY(-1px);
            border-color: var(--copper);
        }
        .compendium-cell.cell-expressed {
            border-color: var(--copper);
            background: var(--copper-dim);
        }
        .compendium-cell.cell-carrier {
            border-color: var(--brass);
            background: rgba(184, 149, 106, 0.10);
        }
        .compendium-cell.cell-undiscovered {
            opacity: 0.55;
            border-style: dashed;
        }
        .compendium-cell-species {
            font-family: var(--font-serif);
            font-weight: 500;
            font-size: 13px;
            color: var(--ink);
            letter-spacing: 0.005em;
        }
        .compendium-cell-allele {
            font-family: var(--font-mono);
            font-size: 10px;
            color: var(--ink-faint);
            letter-spacing: 0.04em;
        }
        .compendium-cell-state {
            font-family: var(--font-serif);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-weight: 600;
            font-feature-settings: "smcp", "lnum";
            margin-top: 2px;
        }
        .cell-expressed   .compendium-cell-state { color: var(--copper); }
        .cell-carrier     .compendium-cell-state { color: var(--brass); }
        .cell-undiscovered .compendium-cell-state { color: var(--ink-faint); }

        /* ---- Leaderboard — three category Top-5 boards ---- */
        .leaderboard-header h2 {
            margin: 0;
            font-family: var(--font-serif);
            font-size: 24px;
            font-weight: 500;
        }
        .leaderboard-blurb {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 14px;
            color: var(--ink-muted);
            margin: 8px 0 22px;
            line-height: 1.55;
        }
        /* Boards stack vertically — the content-pane (the book's right
           leaf) is too narrow for three side-by-side columns. Each
           board is a self-contained Top-5 list. */
        .leaderboard-boards {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        /* Board material + title typography now come from the shared kit
           (.fj-plate .fj-cartouche / .fj-nameplate, added in render). Only
           the board's own layout/padding stays here. */
        .lb-board {
            padding: 14px 14px 16px;
        }
        .lb-board-title {
            margin: 0 0 2px;
        }
        .lb-board-sub {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 11.5px;
            color: var(--ink-faint);
            margin: 0 0 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--rule);
        }
        .lb-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .lb-entry {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 7px 8px;
            border: 1px solid var(--rule);
            border-radius: 1px;
            background: var(--bg-ink);
            cursor: pointer;
            text-align: left;
            width: 100%;
            font: inherit;
            color: inherit;
            transition: transform var(--motion-quick),
                        border-color var(--motion-quick);
        }
        .lb-entry:hover {
            transform: translateY(-1px);
            border-color: var(--copper);
        }
        .lb-rank {
            flex: 0 0 auto;
            width: 20px;
            text-align: center;
            font-family: var(--font-serif);
            font-size: 17px;
            font-weight: 600;
            color: var(--ink-faint);
            font-variant-numeric: lining-nums;
        }
        /* Podium accents for the top three ranks. */
        .lb-rank-1 { color: var(--gold-leaf); text-shadow: 0 0 7px var(--gold-leaf-glow); }
        .lb-rank-2 { color: #c2c2c2; }
        .lb-rank-3 { color: #b87333; }
        .lb-thumb {
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            object-fit: cover;
            border: 1px solid var(--rule);
            border-radius: 1px;
            background: var(--bg-vellum-2);
        }
        .lb-thumb.lb-thumb-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-serif);
            font-size: 15px;
            color: var(--ink-faint);
        }
        .lb-entry-body {
            flex: 1 1 auto;
            min-width: 0;
        }
        .lb-entry-name {
            display: block;
            font-family: var(--font-serif);
            font-size: 13.5px;
            font-weight: 500;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lb-entry-meta {
            display: block;
            font-family: var(--font-mono);
            font-size: 9.5px;
            line-height: 1.4;
            color: var(--ink-faint);
            letter-spacing: 0.02em;
            margin-top: 2px;
        }
        .lb-value {
            flex: 0 0 auto;
            font-family: var(--font-serif);
            font-size: 16px;
            font-weight: 600;
            color: var(--copper);
            font-variant-numeric: tabular-nums lining-nums;
            min-width: 26px;
            text-align: right;
        }
        .lb-value.lb-value-tier {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-feature-settings: "smcp";
        }
        .lb-empty {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 13px;
            color: var(--ink-faint);
            padding: 18px 4px;
            text-align: center;
        }

        /* ---- Featured cross callout (above the swipe deck) ---- */
        .featured-cross {
            margin-bottom: 18px;
            padding: 14px 18px;
            border: 1px solid var(--copper);
            background: var(--copper-dim);
            border-radius: 1px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .featured-cross-headline {
            font-family: var(--font-serif);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--copper);
            font-feature-settings: "smcp", "lnum";
            margin: 0;
        }
        .featured-cross-thumbs {
            display: flex;
            gap: 14px;
            align-items: center;
        }
        .featured-cross-thumb {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 12px;
            color: var(--ink-muted);
        }
        .featured-cross-thumb img {
            width: 64px;
            height: 64px;
            object-fit: cover;
            border-radius: 1px;
            background: var(--bg-ink);
            border: 1px solid var(--rule);
        }
        .featured-cross-cells {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .featured-cross-cells span {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 1px;
            background: transparent;
            border: 1px solid var(--copper);
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--copper);
            letter-spacing: 0.04em;
        }

        /* ---- Genome overview (ribbon + avatar + callouts) ----
           One inline SVG that combines the locus ribbon at top, the user's
           uploaded creature below, and callout curves connecting each band
           to a body-zone dot. Bands are colored by phenotype category
           (pigment / structure / morphology); width is proportional to
           total bp. Hovering a band dims everything else and highlights
           the matching callout + zone; clicking scrolls to the locus card. */

        .genome-overview {
            margin-bottom: 20px;
        }
        /* The anatomy canvas is a mounted specimen sheet — it carries the
           shared .fj-plate material (parchment ground + scored bevel, added
           in render) instead of a flat grey slab, so the rack + framed
           specimen sit on the same leaf as every other plate. overflow stays
           visible so the pins/flags can extend past the viewBox. */
        .go-svg {
            display: block;
            width: 100%;
            height: auto;
            overflow: visible;
        }
        /* Chromosome rack — a horizontal rendered art plate per chromosome
           (chromosome-N.png). A transparent hit rect makes the whole column
           clickable (the art is mostly transparent). Click to expand. */
        .go-chr { cursor: pointer; }
        /* The clickable groups carry tabindex for keyboard use; suppress the
           UA's blue focus box on click, but keep a palette ring for keyboard
           focus (focus-visible doesn't fire on mouse click in modern browsers). */
        .go-chr:focus, .go-seg:focus, .go-pin:focus { outline: none; }
        .go-chr:focus-visible, .go-seg:focus-visible, .go-pin:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .go-chr-hit { fill: transparent; }
        .go-chr-img {
            opacity: 0.5;
            transition: opacity 120ms ease;
        }
        .go-chr-underline { fill: var(--accent); }
        .go-chr-label {
            font: 600 13px var(--font-serif);
            letter-spacing: 0.04em;
            fill: var(--text-muted);
            pointer-events: none;
            user-select: none;
            transition: fill 120ms ease;
        }
        /* Inactive glyphs recede; hover lifts; the active one is full-strength
           with an accent underline + label. */
        .go-chr:hover .go-chr-img { opacity: 0.8; }
        .go-chr--active .go-chr-img { opacity: 1; }
        .go-chr--active .go-chr-label { fill: var(--accent); }

        /* Active-chromosome strip — the chromosome expanded into a rounded-end
           capsule divided into its ~4-5 loci. Few, wide segments make the locus
           names legible (the old 21-band ribbon hid most of them). Straight
           borders + dividers, only the outer ends rounded — no hand-drawn
           wobble. Click a segment to jump to its locus card. */
        .go-strip-base {
            fill: var(--surface-2);
            stroke: var(--text-muted);
            stroke-width: 1.2;
        }
        .go-strip-outline {
            stroke: var(--ink);
            stroke-width: 1.5;
            pointer-events: none;
            opacity: 0.55;
        }
        .go-seg { cursor: pointer; }
        .go-seg rect {
            transition: opacity 120ms ease, fill-opacity 120ms ease;
        }
        /* Locus names — serif 600 to match the Loci view's .locus-title
           (the rest of the app names genes in serif, not monospace). */
        .go-seg-label {
            font: 600 14px var(--font-serif);
            letter-spacing: 0.02em;
            fill: var(--ink);
            pointer-events: none;
            user-select: none;
        }
        /* Pin + flag — each locus is pinned at its feature with a short stem to
           a small parchment flag bearing the gene name, the way a museum
           specimen is labelled (replaces the old curved callouts). */
        .go-pin { cursor: default; }
        .go-pin-stem {
            stroke: var(--ink-muted);
            stroke-width: 1;
        }
        .go-pin-head {
            fill: var(--ink);
            stroke: #14120f;
            stroke-width: 1;
        }
        .go-flag {
            fill: #e7d8b6;                 /* aged paper */
            stroke: #8a7a5c;               /* brass edge */
            stroke-width: 1;
            transition: opacity 120ms ease;
        }
        /* Category accent on the flag's left edge (a hairline tab). */
        .go-pin[data-category="pigment"]    .go-pin-head { fill: var(--copper); }
        .go-pin[data-category="structure"]  .go-pin-head { fill: var(--brass); }
        .go-pin[data-category="morphology"] .go-pin-head { fill: var(--sage); }
        .go-pin[data-category="magic"]      .go-pin-head { fill: var(--amethyst); }
        .go-flag-label {
            font: 600 12px var(--font-serif);   /* match the Loci view's .locus-title */
            letter-spacing: 0.01em;
            fill: #2a2118;                 /* dark ink on the paper flag */
            pointer-events: none;
            user-select: none;
        }
        /* Mounted specimen plate — the schematic on a colour-matched dark
           plate (so its own ground merges in, no screen-blend box), set into an
           ornate gilded Victorian frame (specimen-frame.png) with an engraved
           caption below. The frame casts a soft shadow so it sits on the panel. */
        .go-plate { fill: #171411; }
        .go-anatomy-img { opacity: 0.98; }
        .go-frame-img {
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
        }
        .go-plate-caption {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 12px;
            letter-spacing: 0.04em;
            fill: var(--ink-faint);
        }

        /* Hover state: dim non-matching elements, brighten the matched
           strip-segment + pin/flag (sharing the hovered data-locus-idx).
           Triggered by toggling .has-hover on the parent <svg>. */
        .go-svg.has-hover .go-seg:not(.is-hover) rect {
            opacity: 0.28;
        }
        .go-svg.has-hover .go-seg:not(.is-hover) .go-seg-label {
            opacity: 0.3;
        }
        .go-svg.has-hover .go-pin:not(.is-hover) {
            opacity: 0.3;
        }
        .go-svg.has-hover .go-pin.is-hover .go-flag {
            stroke: var(--accent);
            stroke-width: 1.6;
        }
        .go-svg.has-hover .go-pin.is-hover .go-pin-stem {
            stroke: var(--accent);
        }

        /* Legend for the three category colors. */
        .go-legend {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-top: 10px;
            font-size: 12px;
            color: var(--text-muted);
            flex-wrap: wrap;
        }
        .go-legend .swatch {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 6px;
            vertical-align: -2px;
            border: none;
        }
        .go-legend .pigment    { background: var(--copper); }
        .go-legend .structure  { background: var(--brass); }
        .go-legend .morphology { background: var(--sage); }
        .go-legend .magic      { background: var(--amethyst); }

        /* When a locus card is the target of a click on its band, briefly
           pulse so the user sees where they landed. */
        .locus-card.is-flash {
            animation: locus-flash 1.2s ease-out;
        }
        @keyframes locus-flash {
            0%   { box-shadow: 0 0 0 2px var(--accent); }
            100% { box-shadow: 0 0 0 0 transparent; }
        }

        /* ---- Loci cards ---- */

        /* Each locus is a catalogue entry on the page, separated by a
           hairline rule — not a boxed card. */
        .locus-card {
            padding: 18px 0;
            margin: 0;
            border-top: 1px solid var(--rule);
        }
        .locus-card:first-child {
            border-top: 0;
            padding-top: 2px;
        }
        .locus-card:last-child { padding-bottom: 0; }
        .locus-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .locus-title {
            font-family: var(--font-serif);
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 0.02em;
        }
        /* Allele name — a hairline-framed small-caps label, not a
           solid web tag. */
        .allele-tag {
            display: inline-block;
            background: transparent;
            color: var(--copper);
            border: 1px solid var(--copper);
            font-family: var(--font-serif);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-feature-settings: "smcp", "lnum";
            padding: 1px 7px;
            border-radius: 0;
            vertical-align: 2px;
        }

        /* ---- Diploid locus card ---- */

        /* Zygosity tag — hairline-framed small-caps label, matching
           the allele / provenance tags rather than a solid web pill. */
        .diploid-tag {
            display: inline-block;
            font-family: var(--font-serif);
            font-size: 10px;
            font-weight: 600;
            padding: 1px 7px;
            border-radius: 0;
            vertical-align: 2px;
            margin-left: 8px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-feature-settings: "smcp", "lnum";
            color: var(--ink-muted);
            background: transparent;
            border: 1px solid var(--rule-strong);
        }
        .allele-row {
            border-top: 1px dashed var(--border-2);
            padding-top: 18px;
            margin-top: 18px;
        }
        .allele-row:first-of-type {
            border-top: none;
            padding-top: 10px;
            margin-top: 0;
        }
        .allele-row.is-muted {
            opacity: 0.55;
        }
        .allele-row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            font-size: 15px;
        }
        .allele-row-title {
            font-weight: 600;
            font-size: 15px;
        }
        .allele-row-meta {
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            font-size: 13px;
        }
        /* "Allele A" / "Allele B" pill — sized so it carries the
           top-level "this is one of two homologs at this locus" message.
           Two pills stacked vertically inside a locus card make the
           diploid structure visually self-evident. */
        .allele-slot-tag {
            display: inline-block;
            padding: 3px 9px;
            background: transparent;
            color: var(--copper);
            border: 1px solid var(--rule-strong);
            border-radius: 0;
            font-family: var(--font-serif);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-feature-settings: "smcp", "lnum";
            margin-right: 8px;
            vertical-align: 1px;
        }
        .allele-collapsed {
            margin-top: 8px;
            color: var(--text-faint);
            font-size: 13px;
            font-style: italic;
        }
        /* Provenance badge — a hairline-framed small-caps label,
           matching the allele / zygosity labels. */
        .prov-badge {
            display: inline-block;
            font-family: var(--font-serif);
            font-size: 10.5px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-feature-settings: "smcp", "lnum";
            padding: 1px 6px;
            border-radius: 0;
            border: 1px solid var(--copper);
            vertical-align: 2px;
            margin-left: 4px;
            background: transparent;
            color: var(--copper);
        }
        .prov-badge.prov-passthrough {
            background: transparent;
            color: var(--ink-faint);
            border-color: var(--rule-strong);
        }
        /* Seed-provenance badge: distinguishes Evo2-generated 5'
           extension (Feature 1) from real RefSeq prefix (legacy). */
        .prov-badge.prov-evo2 {
            background: transparent;
            color: var(--accent);
            border-color: var(--accent);
        }
        .prov-badge.prov-refseq {
            background: transparent;
            color: var(--text-muted);
            border-color: var(--border-2);
        }

        /* Sequence legend: explains what the two colors in the
           sequence-block mean. Crucial because — depending on
           seed_provenance — the 5' half might be Evo2-generated
           (Feature 1 on) or real RefSeq (Feature 1 off / legacy). */
        .sequence-legend {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        .legend-swatch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            vertical-align: middle;
            margin-right: 4px;
        }
        /* Provenance legend swatches — match the .seq-prov.prov-c{1..4}
           colors defined further down. Four colors map to the four
           grandparental homologs after one round of meiosis. */
        .legend-swatch.legend-prov-c1 { background: var(--copper); }
        .legend-swatch.legend-prov-c2 { background: var(--brass); }
        .legend-swatch.legend-prov-c3 { background: var(--sage); }
        .legend-swatch.legend-prov-c4 { background: var(--oxblood-soft); }