/**
 * Darealmop_GeneticsLineage — Lineage Band Structural Skeleton
 *
 * TOKEN-DRIVEN WITH NEUTRAL FALLBACKS. Every colour, font, radius, size and
 * spacing is a `--dm-lineage-*` custom property that carries a sober neutral
 * fallback as the LAST link of its var() chain, so a theme that sets no tokens
 * still gets a legible, structurally-sound tree (greys/borders for connectors, a
 * muted accent for node markers, standard text colours) and a theme re-skins
 * purely by setting tokens on :root. The tree connector lines are drawn with
 * borders coloured by `--dm-lineage-connector`; the ONLY literal colours in this
 * file are the neutral fallbacks inside `var(--dm-lineage-*, <neutral>)`.
 *
 * Per-surface tokens fall through to the module-wide set, e.g.
 *   --dm-lineage-node-bg -> --dm-lineage-bg -> neutral.
 *
 * strain_type colouring (soft, only when Darealmop_StrainGenetics is present):
 * nodes carry data-strain-type="<id>"; a theme can accent them, e.g.
 *   .dm-lineage__node[data-strain-type="1"] { --dm-lineage-node-accent: <indica>; }
 */

.dm-lineage {
    display: block;
    margin-block: var(--dm-lineage-margin-block, 24px);
    padding: var(--dm-lineage-padding, 20px);
    background: var(--dm-lineage-bg, #f8fafc);
    color: var(--dm-lineage-text, #1f2937);
    border-radius: var(--dm-lineage-radius, 8px);
    font-family: var(--dm-lineage-font, inherit);
}

.dm-lineage * {
    box-sizing: border-box;
}

/* ── Editorial eyebrow (issue #73) ──────────────────────────────── */

.dm-lineage__eyebrow {
    margin: 0 0 4px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--dm-lineage-eyebrow-size, 0.75rem);
    font-weight: var(--dm-lineage-eyebrow-weight, 600);
    color: var(--dm-lineage-eyebrow-color, #6b7280);
}

.dm-lineage__heading {
    margin: 0 0 12px;
    line-height: 1.2;
    font-size: var(--dm-lineage-heading-size, 1.5rem);
    font-weight: var(--dm-lineage-heading-weight, 700);
    color: var(--dm-lineage-heading-color, var(--dm-lineage-text, #1f2937));
}

/* ── Genotype / notes text ──────────────────────────────────────── */

.dm-lineage__genotype {
    margin: 0 0 8px;
    line-height: 1.5;
    font-size: var(--dm-lineage-genotype-size, 0.95rem);
    color: var(--dm-lineage-genotype-color, var(--dm-lineage-text, #1f2937));
}

.dm-lineage__genotype-label {
    font-weight: var(--dm-lineage-label-weight, 600);
    color: var(--dm-lineage-label-color, var(--dm-lineage-genotype-color, #111827));
}

.dm-lineage__notes {
    margin: 0 0 16px;
    line-height: 1.6;
    font-size: var(--dm-lineage-notes-size, 0.95rem);
    color: var(--dm-lineage-notes-color, var(--dm-lineage-text, #1f2937));
    white-space: pre-line;
}

/* ── Homepage explorer widget chrome (issue #73) ────────────────────
   The .dm-lineage--explorer host reuses the same tree; only the intro +
   optional CTA are widget-specific. */

.dm-lineage__intro {
    margin: 0 0 16px;
    line-height: 1.6;
    font-size: var(--dm-lineage-intro-size, var(--dm-lineage-notes-size, 0.95rem));
    color: var(--dm-lineage-intro-color, var(--dm-lineage-text, #1f2937));
}

/* ── Sister-phenotype count tail (issue #73) ────────────────────── */

.dm-lineage__sisters {
    margin: 12px 0 0;
    line-height: 1.5;
    font-size: var(--dm-lineage-sisters-size, 0.9rem);
    color: var(--dm-lineage-sisters-color, #4b5563);
}

.dm-lineage__cta {
    margin: 16px 0 0;
}

.dm-lineage__cta-link {
    display: inline-block;
    padding: var(--dm-lineage-cta-padding, 8px 16px);
    background: var(--dm-lineage-cta-bg, var(--dm-lineage-node-bg, var(--dm-lineage-bg, #eef2f7)));
    color: var(--dm-lineage-cta-color, var(--dm-lineage-name-linked-color, var(--dm-lineage-text, #1f2937)));
    border: var(--dm-lineage-cta-border-width, 1px) solid var(--dm-lineage-cta-border, #cbd5e1);
    border-radius: var(--dm-lineage-cta-radius, var(--dm-lineage-radius, 8px));
    font-size: var(--dm-lineage-cta-size, var(--dm-lineage-name-size, 1rem));
    font-weight: var(--dm-lineage-cta-weight, var(--dm-lineage-name-weight, 600));
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   TREE — nested lists with border-drawn connector lines.
   Each level indents; connectors are the left/top borders of the li.
   ═════════════════════════════════════════════════════════════ */

.dm-lineage__tree {
    margin-top: 8px;
    overflow-x: auto;
}

.dm-lineage__level {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nested levels indent and grow a connector spine on the left. */
.dm-lineage__branch {
    position: relative;
    margin-left: 20px;
    padding-left: 16px;
    border-left: var(--dm-lineage-connector-width, 2px) solid var(--dm-lineage-connector, #cbd5e1);
}

.dm-lineage__node {
    position: relative;
    padding-block: 4px;
}

/* Horizontal elbow from the spine to each node row. */
.dm-lineage__branch > .dm-lineage__level > .dm-lineage__node::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -16px;
    width: 14px;
    border-top: var(--dm-lineage-connector-width, 2px) solid var(--dm-lineage-connector, #cbd5e1);
}

.dm-lineage__node-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--dm-lineage-node-padding, 4px 10px);
    background: var(--dm-lineage-node-bg, var(--dm-lineage-bg, #ffffff));
    border: var(--dm-lineage-node-border-width, 1px) solid var(--dm-lineage-node-border, #e2e8f0);
    border-left-width: var(--dm-lineage-node-accent-width, 3px);
    border-left-color: var(--dm-lineage-node-accent, var(--dm-lineage-node-border, #6b7280));
    border-radius: var(--dm-lineage-node-radius, var(--dm-lineage-radius, 8px));
}

.dm-lineage__relation {
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--dm-lineage-relation-size, 0.7rem);
    font-weight: var(--dm-lineage-relation-weight, 600);
    color: var(--dm-lineage-relation-color, #6b7280);
}

.dm-lineage__name {
    font-size: var(--dm-lineage-name-size, 1rem);
    font-weight: var(--dm-lineage-name-weight, 600);
    color: var(--dm-lineage-name-color, var(--dm-lineage-text, #1f2937));
    text-decoration: none;
}

.dm-lineage__node--linked .dm-lineage__name {
    color: var(--dm-lineage-name-linked-color, var(--dm-lineage-name-color, #1f2937));
    text-decoration: var(--dm-lineage-name-linked-decoration, underline);
}

.dm-lineage__node--cycle .dm-lineage__name {
    font-style: italic;
    opacity: 0.75;
}

/* ── Expand / collapse toggle ───────────────────────────────────── */

.dm-lineage__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    background: var(--dm-lineage-toggle-bg, transparent);
    color: var(--dm-lineage-toggle-color, var(--dm-lineage-text, #1f2937));
    border: var(--dm-lineage-toggle-border-width, 1px) solid var(--dm-lineage-toggle-border, #cbd5e1);
    border-radius: var(--dm-lineage-toggle-radius, 50%);
    line-height: 1;
}

/* A pure-CSS +/- glyph so the toggle needs no icon font. */
.dm-lineage__toggle-icon {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
}

.dm-lineage__toggle-icon::before,
.dm-lineage__toggle-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
}

.dm-lineage__toggle-icon::before {
    top: 4px;
    left: 0;
    width: 10px;
    height: 2px;
}

.dm-lineage__toggle-icon::after {
    top: 0;
    left: 4px;
    width: 2px;
    height: 10px;
}

/* Collapse the vertical stroke when the branch is open → "−". */
.dm-lineage__toggle[aria-expanded="true"] .dm-lineage__toggle-icon::after {
    height: 0;
    top: 5px;
}

/* ═══════════════════════════════════════════════════════════════
   PATH HIGHLIGHT (issue #73, part B) — hover / focus a node and the
   whole path from it UP TO THE ROOT lights up.

   Chosen approach: pure CSS, no JS. In this tree the ancestors of a node
   are its DOM ancestors (we render a strain's parents as nested children),
   and CSS `:hover` / `:focus-within` already match an element when the
   pointer / focus is inside a descendant. So the chain of enclosing
   .dm-lineage__node / .dm-lineage__branch elements from the hovered node up
   to the root is exactly the path we want — no coordination needed.

   Why not JS: the tree is a set of nested CSP-Alpine islands (one per
   branch) and the root nodes sit outside any island; wiring a shared
   highlight store across them under the arg-less CSP build would mean
   giving every <li> its own x-data — invasive and fragile. The CSS route is
   cleaner, works with JS disabled, and is keyboard-accessible via
   :focus-within. Descendant (forward) traversal is NOT attempted — the
   repository only exposes getParents(); see README "deferred".

   Tokens fall through to the resting connector / node tokens, so a theme
   that sets none still gets a structurally-correct (if uncoloured) result. */

.dm-lineage__node:hover > .dm-lineage__node-row,
.dm-lineage__node:focus-within > .dm-lineage__node-row {
    background: var(--dm-lineage-path-active-bg, var(--dm-lineage-node-bg, var(--dm-lineage-bg, #eef2f7)));
    border-color: var(--dm-lineage-path-active-border, var(--dm-lineage-node-border, #cbd5e1));
    border-left-color: var(--dm-lineage-path-active-accent, var(--dm-lineage-node-accent, var(--dm-lineage-node-border, #6b7280)));
    color: var(--dm-lineage-path-active-color, var(--dm-lineage-text, #1f2937));
}

.dm-lineage__branch:hover,
.dm-lineage__branch:focus-within {
    border-left-color: var(--dm-lineage-path-active-connector, var(--dm-lineage-connector, #94a3b8));
}

/* Each on-path node's own elbow — scoped to match the base ::before rule so only
   the hovered node and its ancestors light (not their siblings). */
.dm-lineage__branch > .dm-lineage__level > .dm-lineage__node:hover::before,
.dm-lineage__branch > .dm-lineage__level > .dm-lineage__node:focus-within::before {
    border-top-color: var(--dm-lineage-path-active-connector, var(--dm-lineage-connector, #94a3b8));
}

/* Alpine sets x-cloak off after init; keep server-open branches visible if JS
   never runs (no [x-cloak] hiding here — fail-open is correct for content). */

/* ═══════════════════════════════════════════════════════════════
   ABSTAMMUNGS-EXPLORER PAGE (issue #145) — the standalone browsable
   /genetics-lineage/ page: browse-by-parent index, a parent's children,
   and a strain's ancestry + sisters.

   Same discipline as the band above: every colour / size is a
   `--dm-lineage-explorer-*` custom property that falls through to the
   module-wide `--dm-lineage-*` set and finally to a sober NEUTRAL literal,
   so the page is legible with zero theme tokens and re-skins purely by
   setting tokens on :root. The ONLY literal colours here are those neutral
   fallbacks inside var(--dm-lineage-explorer-*, <neutral>). The embedded
   ancestry tree reuses the .dm-lineage / .dm-lineage__* rules above.
   ═════════════════════════════════════════════════════════════ */

.dm-lineage-explorer {
    display: block;
    margin-block: var(--dm-lineage-explorer-margin-block, var(--dm-lineage-margin-block, 24px));
    padding: var(--dm-lineage-explorer-padding, var(--dm-lineage-padding, 20px));
    color: var(--dm-lineage-explorer-text, var(--dm-lineage-text, #1f2937));
    font-family: var(--dm-lineage-explorer-font, var(--dm-lineage-font, inherit));
}

.dm-lineage-explorer * {
    box-sizing: border-box;
}

.dm-lineage-explorer__eyebrow {
    margin: 0 0 4px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--dm-lineage-explorer-eyebrow-size, var(--dm-lineage-eyebrow-size, 0.75rem));
    font-weight: var(--dm-lineage-explorer-eyebrow-weight, var(--dm-lineage-eyebrow-weight, 600));
    color: var(--dm-lineage-explorer-eyebrow-color, var(--dm-lineage-eyebrow-color, #6b7280));
}

.dm-lineage-explorer__heading {
    margin: 0 0 8px;
    line-height: 1.2;
    font-size: var(--dm-lineage-explorer-heading-size, 1.75rem);
    font-weight: var(--dm-lineage-explorer-heading-weight, var(--dm-lineage-heading-weight, 700));
    color: var(--dm-lineage-explorer-heading-color, var(--dm-lineage-heading-color, var(--dm-lineage-text, #1f2937)));
}

.dm-lineage-explorer__intro {
    margin: 0 0 20px;
    line-height: 1.6;
    max-width: 60ch;
    font-size: var(--dm-lineage-explorer-intro-size, var(--dm-lineage-intro-size, 0.95rem));
    color: var(--dm-lineage-explorer-intro-color, var(--dm-lineage-intro-color, var(--dm-lineage-text, #4b5563)));
}

.dm-lineage-explorer__section-heading {
    margin: 24px 0 12px;
    line-height: 1.25;
    font-size: var(--dm-lineage-explorer-section-size, 1.25rem);
    font-weight: var(--dm-lineage-explorer-section-weight, var(--dm-lineage-heading-weight, 700));
    color: var(--dm-lineage-explorer-section-color, var(--dm-lineage-heading-color, var(--dm-lineage-text, #1f2937)));
}

/* ── Breadcrumb / back navigation ───────────────────────────────── */

.dm-lineage-explorer__crumbs {
    margin: 0 0 8px;
}

.dm-lineage-explorer__back {
    display: inline-block;
    font-size: var(--dm-lineage-explorer-back-size, 0.875rem);
    font-weight: var(--dm-lineage-explorer-back-weight, 600);
    color: var(--dm-lineage-explorer-back-color, var(--dm-lineage-name-linked-color, #2563eb));
    text-decoration: var(--dm-lineage-explorer-back-decoration, underline);
}

.dm-lineage-explorer__back::before {
    content: '\2039\00a0'; /* ‹ + nbsp — a pure-CSS back chevron, no icon font. */
}

.dm-lineage-explorer__focus-pdp {
    margin: 0 0 12px;
    font-size: var(--dm-lineage-explorer-pdp-size, 0.875rem);
}

.dm-lineage-explorer__focus-pdp a,
.dm-lineage-explorer__card-pdp {
    color: var(--dm-lineage-explorer-pdp-color, var(--dm-lineage-name-linked-color, #2563eb));
    text-decoration: var(--dm-lineage-explorer-pdp-decoration, underline);
}

/* ── Browse-by-parent index — a wrapping row of parent-line chips ── */

.dm-lineage-explorer__index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-lineage-explorer-index-gap, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-lineage-explorer__index-item {
    display: inline-flex;
}

.dm-lineage-explorer__index-link {
    display: inline-block;
    padding: var(--dm-lineage-explorer-chip-padding, 8px 14px);
    background: var(--dm-lineage-explorer-chip-bg, var(--dm-lineage-node-bg, var(--dm-lineage-bg, #f1f5f9)));
    color: var(--dm-lineage-explorer-chip-color, var(--dm-lineage-name-color, var(--dm-lineage-text, #1f2937)));
    border: var(--dm-lineage-explorer-chip-border-width, 1px) solid
        var(--dm-lineage-explorer-chip-border, var(--dm-lineage-node-border, #e2e8f0));
    border-left-width: var(--dm-lineage-explorer-chip-accent-width, 3px);
    border-left-color: var(--dm-lineage-explorer-chip-accent, var(--dm-lineage-node-accent, var(--dm-lineage-node-border, #6b7280)));
    border-radius: var(--dm-lineage-explorer-chip-radius, var(--dm-lineage-radius, 8px));
    font-size: var(--dm-lineage-explorer-chip-size, var(--dm-lineage-name-size, 1rem));
    font-weight: var(--dm-lineage-explorer-chip-weight, var(--dm-lineage-name-weight, 600));
    text-decoration: none;
}

.dm-lineage-explorer__index-link:hover,
.dm-lineage-explorer__index-link:focus {
    background: var(--dm-lineage-explorer-chip-hover-bg, var(--dm-lineage-path-active-bg, var(--dm-lineage-node-bg, #e2e8f0)));
    border-color: var(--dm-lineage-explorer-chip-hover-border, var(--dm-lineage-path-active-border, var(--dm-lineage-node-border, #cbd5e1)));
}

/* ── Card lists (children of a parent, sister phenotypes) ────────── */

.dm-lineage-explorer__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--dm-lineage-explorer-card-min, 220px), 1fr));
    gap: var(--dm-lineage-explorer-card-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-lineage-explorer__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--dm-lineage-explorer-card-padding, 12px 14px);
    background: var(--dm-lineage-explorer-card-bg, var(--dm-lineage-node-bg, var(--dm-lineage-bg, #ffffff)));
    border: var(--dm-lineage-explorer-card-border-width, 1px) solid
        var(--dm-lineage-explorer-card-border, var(--dm-lineage-node-border, #e2e8f0));
    border-left-width: var(--dm-lineage-explorer-card-accent-width, 3px);
    border-left-color: var(--dm-lineage-explorer-card-accent, var(--dm-lineage-node-accent, var(--dm-lineage-node-border, #6b7280)));
    border-radius: var(--dm-lineage-explorer-card-radius, var(--dm-lineage-radius, 8px));
}

.dm-lineage-explorer__card-name {
    font-size: var(--dm-lineage-explorer-card-name-size, var(--dm-lineage-name-size, 1rem));
    font-weight: var(--dm-lineage-explorer-card-name-weight, var(--dm-lineage-name-weight, 600));
    color: var(--dm-lineage-explorer-card-name-color, var(--dm-lineage-name-linked-color, var(--dm-lineage-text, #1f2937)));
    text-decoration: var(--dm-lineage-explorer-card-name-decoration, none);
}

.dm-lineage-explorer__card-pdp {
    font-size: var(--dm-lineage-explorer-card-pdp-size, 0.8125rem);
}

/* ── Empty states ───────────────────────────────────────────────── */

.dm-lineage-explorer__empty {
    margin: 12px 0 0;
    padding: var(--dm-lineage-explorer-empty-padding, 16px);
    line-height: 1.5;
    background: var(--dm-lineage-explorer-empty-bg, var(--dm-lineage-bg, #f8fafc));
    border: var(--dm-lineage-explorer-empty-border-width, 1px) dashed
        var(--dm-lineage-explorer-empty-border, var(--dm-lineage-node-border, #cbd5e1));
    border-radius: var(--dm-lineage-explorer-empty-radius, var(--dm-lineage-radius, 8px));
    font-size: var(--dm-lineage-explorer-empty-size, 0.95rem);
    color: var(--dm-lineage-explorer-empty-color, var(--dm-lineage-sisters-color, #4b5563));
}

/* The embedded ancestry tree keeps a little breathing room from its heading. */
.dm-lineage-explorer__tree-host {
    margin-top: 4px;
}