/* Champion lineage diagrams — used on /lineage/<slug>, /lineages and the card page.
   Sharp corners throughout, per the UI design system (/ui). */

/* Lineage colours — the SINGLE source of truth, shared by the badges (below) and the
   SVG arrows (static/lineage.js reads these exact variables by edge kind). Change a
   colour here and the label and its arrow move together; they can't get out of sync.
   Literal hex (not var()) so getComputedStyle returns a usable colour to the JS. */
:root {
    --ln-levelup: #a0a8b0;    /* matches --text-muted */
    --ln-locked: #d9667a;
    --ln-break: #a855f7;      /* matches --accent-purple */
    --ln-sidelevel: #3fb0c9;
    --ln-delevel: #e0a040;
    --ln-discount: #5aa86a;
}

.lineage-container {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- the level diagram --------------------------------------------------- */

.lineage-diagram {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 56px;            /* room between levels for the arrows */
    overflow-x: auto;
    padding: 8px 0 16px;
}

/* SVG arrow overlay: behind the cards, scrolls with the diagram content. */
.lineage-edges {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Hover highlight: hovering a card draws an underglow behind the arrows touching it —
   additive emphasis, so nothing else is hidden and the arrow kind-colours stay readable
   on top. The glow is a neutral grey (not gold, which clashed with the warm orange/green
   arrows; not a tinted grey either) and deliberately a touch darker than the level-up
   arrow grey (--ln-levelup), so it reads as a backing glow rather than another arrow.
   static/lineage.js stamps .is-active on the incident <path>s and clones them into the
   .lineage-halo group (which sits beneath the coloured arrows). */
.lineage-halo path {
    fill: none;
    stroke: #888;
    stroke-width: 7;
    stroke-opacity: 0.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lineage-edges path.is-active {
    stroke-width: 2.4;
}

.lineage-level {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.lineage-level-label {
    font-family: var(--font-card-data);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lineage-level-nodes {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.lineage-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 150px;
    text-decoration: none;
    color: var(--text-primary);
}

/* The shared .variant-thumbnail pulls following content up by 16px and rounds its
   top corners (for the "Other Printings" layout); cancel both here. */
.lineage-node .variant-thumbnail {
    margin-bottom: 0;
    border-radius: 0;
}

/* Left-aligned to match the (left-aligned) oddity tags; the card art's left edge
   lines up with the text since the border is around the art only. */
.lineage-node-name {
    font-size: 12px;
    line-height: 1.25;
    color: #fff;
}

/* The current card (card-page strip) keeps the purple selection outline; hovering
   any card previews it in gold (purple is reserved for "the card you're viewing"). */
.lineage-node-current .variant-thumbnail {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.lineage-node:hover .variant-thumbnail {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

.lineage-node-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lineage-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-family: var(--font-card-data);
}

/* Each badge reads the same --ln-* colour its arrow does. */
.lineage-badge-break    { background: var(--ln-break);     color: #fff; }
.lineage-badge-locked   { background: var(--ln-locked);    color: #fff; }
.lineage-badge-sidelevel { background: var(--ln-sidelevel); color: #06232b; }
.lineage-badge-delevel  { background: var(--ln-delevel);   color: #2e1d05; }
.lineage-badge-discount { background: var(--ln-discount);  color: #06210d; }

.lineage-pseudo-box {
    width: 150px;
    height: 60px;
    border: 1px dashed var(--border-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
    box-sizing: border-box;
}

.lineage-node-pseudo:hover .lineage-pseudo-box {
    border-color: var(--gold-primary);
    color: var(--text-primary);
}

/* --- index grid ---------------------------------------------------------- */

.lineage-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 20px 0 40px;
}

/* Reuses .clickable-box (sitewide.css) for background, border, padding and the
   lift-on-hover; only the column layout is local. */
.lineage-index-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lineage-index-card .variant-thumbnail {
    border-radius: 0;
}

.lineage-index-name {
    font-size: 16px;
    font-weight: 600;
}

.lineage-index-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lineage-break-list {
    line-height: 1.8;
}

/* --- card-page strip ----------------------------------------------------- */

.lineage-strip {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* --- legend -------------------------------------------------------------- */

.lineage-legend {
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
}

.lineage-legend .lineage-badge {
    margin-right: 4px;
}

/* --- vertical style ------------------------------------------------------ */
/* Levels stack top-to-bottom, each a row of cards. Far narrower than the wide
   horizontal columns — used for the card-page strip (so it doesn't squish the card
   image) and for every diagram on narrow screens. */
.lineage-diagram--vertical,
.lineage-diagram--mobile {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    gap: 52px;            /* vertical room between levels for the downward arrows */
}

.lineage-diagram--vertical .lineage-level,
.lineage-diagram--mobile .lineage-level {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.lineage-diagram--vertical .lineage-level-label,
.lineage-diagram--mobile .lineage-level-label {
    width: 34px;
    flex-shrink: 0;
    padding-top: 18px;
}

.lineage-diagram--vertical .lineage-level-nodes,
.lineage-diagram--mobile .lineage-level-nodes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 26px;            /* width between cards sharing a level */
}

@media (max-width: 768px) {
    /* Every diagram collapses to the vertical style on narrow screens. */
    .lineage-diagram {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
        gap: 52px;
    }
    .lineage-diagram .lineage-level {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }
    .lineage-diagram .lineage-level-label {
        width: 34px;
        flex-shrink: 0;
        padding-top: 18px;
    }
    .lineage-diagram .lineage-level-nodes {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 26px;
    }
}