/*
 * cross-engine-support.css — styles for the "New Support / Cross-Engine"
 * component rendered by assets/js/cross-engine-support.js.
 *
 * Everything is scoped under .xe (plus the global .xe-new-pill badge, which
 * pages also use in their own tab buttons). Layout reacts to the width of the
 * slot the component is mounted in (container queries), not the viewport, so
 * the same markup works in a narrow tab panel or a full-width page section.
 *
 * Themes: .xe--archfiend, .xe--red-eyes, .xe--endymion, .xe--witchcrafter and
 * .xe--light-darkness only swap custom properties.
 * Both pages declare Tailwind's preflight, which zeroes element styles; every
 * rule here is class-based so it wins regardless of stylesheet order.
 */

/* ---------------------------------------------------------------- tokens */

.xe {
    --xe-accent: #dc2626;
    --xe-accent-ink: #f87171;          /* accent as small text: >= 5.7:1 on every surface */
    --xe-accent-soft: rgba(220, 38, 38, 0.16);
    --xe-gold: #fdba74;
    --xe-ref-ink: #fca5a5;
    --xe-surface: #1a1a1a;
    --xe-surface-2: #222222;
    --xe-surface-3: rgba(0, 0, 0, 0.45);
    --xe-border: rgba(220, 38, 38, 0.35);
    --xe-border-soft: rgba(255, 255, 255, 0.08);
    --xe-text: #e5e5e5;
    --xe-text-2: #d4d4d4;
    --xe-muted: #a3a3a3;
    --xe-ink-on-fill: #0f0505;
    --xe-heading-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --xe-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --xe-radius: 0.75rem;
    --xe-radius-sm: 0.5rem;
    --xe-glow: 0 10px 40px rgba(220, 38, 38, 0.15);
    --xe-accent-deep: #3a0000;         /* dark end of filled buttons */
    --xe-art-bg: linear-gradient(160deg, #0b0b0b, #1c1111);
}

.xe--archfiend {
    --xe-accent: #b91c1c;
    --xe-accent-soft: rgba(139, 0, 0, 0.26);
    --xe-gold: #ffd700;
    --xe-ref-ink: #ffd700;
    --xe-surface: #1a0a0a;
    --xe-surface-2: #230e0e;
    --xe-border: rgba(139, 0, 0, 0.6);
    --xe-heading-font: 'Cinzel', Georgia, 'Times New Roman', serif;
    --xe-glow: 0 10px 40px rgba(139, 0, 0, 0.3);
}

.xe--red-eyes {
    --xe-accent: #dc2626;
    --xe-accent-soft: rgba(220, 38, 38, 0.16);
    --xe-gold: #fdba74;
    --xe-ref-ink: #fca5a5;
    --xe-surface: #1a1a1a;
    --xe-surface-2: #222222;
    --xe-border: #4a0404;
}

/* Midnight indigo and citadel gold, as on the Endymion page. */
.xe--endymion {
    --xe-accent: #4f46e5;
    --xe-accent-ink: #a5b4fc;
    --xe-accent-soft: rgba(99, 102, 241, 0.18);
    --xe-accent-deep: #1e1b4b;
    --xe-gold: #facc15;
    --xe-ref-ink: #fde047;
    --xe-surface: #14122e;
    --xe-surface-2: #1c1a3a;
    --xe-surface-3: rgba(11, 10, 29, 0.6);
    --xe-border: rgba(99, 102, 241, 0.45);
    --xe-ink-on-fill: #0b0a1d;
    --xe-heading-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --xe-glow: 0 10px 40px rgba(79, 70, 229, 0.22);
    --xe-art-bg: linear-gradient(160deg, #0b0a1d, #1c1a3a);
}

/* Atelier violet and gold, as on the Witchcrafter page. */
.xe--witchcrafter {
    --xe-accent: #9333ea;
    --xe-accent-ink: #d8b4fe;
    --xe-accent-soft: rgba(168, 85, 247, 0.18);
    --xe-accent-deep: #3b0764;
    --xe-gold: #facc15;
    --xe-ref-ink: #fde047;
    --xe-surface: #1d1b33;
    --xe-surface-2: #282844;
    --xe-surface-3: rgba(15, 13, 30, 0.55);
    --xe-border: rgba(168, 85, 247, 0.45);
    --xe-ink-on-fill: #1a1a2e;
    --xe-heading-font: 'Cinzel', Georgia, 'Times New Roman', serif;
    --xe-glow: 0 10px 40px rgba(147, 51, 234, 0.2);
    --xe-art-bg: linear-gradient(160deg, #131226, #282844);
}

/* Gold and violet on near-black, as on the Light and Darkness Ritual page. */
.xe--light-darkness {
    --xe-accent: #a855f7;
    --xe-accent-ink: #d8b4fe;
    --xe-accent-soft: rgba(168, 85, 247, 0.16);
    --xe-accent-deep: #2e1065;
    --xe-gold: #fde68a;
    --xe-ref-ink: #fde68a;
    --xe-surface: #16131d;
    --xe-surface-2: #1f1a29;
    --xe-surface-3: rgba(8, 7, 11, 0.6);
    --xe-border: rgba(168, 85, 247, 0.42);
    --xe-ink-on-fill: #0e0c13;
    --xe-heading-font: 'Cinzel', Georgia, 'Times New Roman', serif;
    --xe-glow: 0 10px 40px rgba(168, 85, 247, 0.18);
    --xe-art-bg: linear-gradient(160deg, #08070b, #1f1a29);
}

/* ------------------------------------------------------------------ base */

.xe {
    container-type: inline-size;
    container-name: xe;
    position: relative;
    color: var(--xe-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    background:
        radial-gradient(120% 60% at 100% 0%, var(--xe-accent-soft), transparent 60%),
        var(--xe-surface);
    border: 1px solid var(--xe-border);
    border-radius: var(--xe-radius);
    box-shadow: var(--xe-glow);
    padding: clamp(1rem, 4vw, 2rem);
    overflow-wrap: break-word;
}

.xe *,
.xe *::before,
.xe *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset: component classes below must be able to set margins. */
:where(.xe) :where(p, ul, ol, dl, dd, figure, h2, h3, h4) {
    margin: 0;
}

.xe strong { color: #fff; font-weight: 700; }
.xe em { font-style: italic; }

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

/* Global so pages can reuse it inside their own tab buttons. */
.xe-new-pill {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #0f0505;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: 0.15em;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

/* Card references open the site's card popup. */
.xe-ref {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    border-bottom: 1px dotted currentColor;
    background: none;
    color: var(--xe-ref-ink);
    font: inherit;
    font-weight: 600;
    text-align: inherit;
    cursor: pointer;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.xe-ref:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--xe-accent);
}

.xe-ref:focus-visible,
.xe-btn:focus-visible,
.xe-branch__btn:focus-visible,
.xe-official summary:focus-visible,
.xe-art:focus-visible {
    outline: 2px solid var(--xe-gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ------------------------------------------------------------------ hero */

.xe-hero {
    display: grid;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--xe-border-soft);
}

.xe-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--xe-accent-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.xe-title {
    font-family: var(--xe-heading-font);
    font-size: clamp(1.5rem, 5cqi, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

.xe-lede {
    max-width: 70ch;
    color: var(--xe-text-2);
    font-size: 1.0625rem;
}

.xe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.xe-chip {
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: 999px;
    background: var(--xe-surface-3);
    color: var(--xe-text-2);
    font-family: var(--xe-mono);
    font-size: 0.75rem;
}

.xe-chip--status {
    border-color: var(--xe-gold);
    color: var(--xe-gold);
}

/* --------------------------------------------------------------- sections */

.xe-block {
    margin-top: 2.25rem;
}

.xe-h3 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--xe-accent-soft);
    font-family: var(--xe-heading-font);
    font-size: clamp(1.15rem, 3.2cqi, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.xe-h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xe-accent-ink);
}

.xe-intro {
    max-width: 75ch;
    margin-bottom: 1rem;
    color: var(--xe-text-2);
}

.xe-note {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--xe-gold);
    border-radius: 0 var(--xe-radius-sm) var(--xe-radius-sm) 0;
    background: var(--xe-surface-3);
    color: var(--xe-text-2);
    font-size: 0.9rem;
}

/* One link under each block's heading; it opens the page's suggestion form
   right there (CardLoader.openSuggestionForm). Quiet until the block is
   hovered, like the [suggest edit] toolbars elsewhere on the page. */
.xe-suggest {
    margin: -0.6rem 0 0.75rem;
    font-size: 0.72rem;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.xe-hero .xe-suggest {
    margin: -0.5rem 0 0;
}

.xe-block:hover .xe-suggest,
.xe-hero:hover .xe-suggest,
.xe-suggest:focus-within {
    opacity: 1;
}

.xe-suggest__btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--xe-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.xe-suggest__btn:hover,
.xe-suggest__btn:focus-visible {
    color: var(--xe-accent-ink);
    text-decoration: underline;
}

.xe-suggest__btn:focus-visible {
    outline: 2px solid var(--xe-gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ------------------------------------------------------------- card art */

.xe-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 59 / 86;
    padding: 0.35rem;
    border: 1px dashed var(--xe-border);
    border-radius: 6px;
    background: var(--xe-art-bg);
    color: var(--xe-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

.xe-art:has(img) {
    padding: 0;
    border: 0;
    background: none;
    aspect-ratio: auto;
}

.xe-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* CardLoader's own fallback markup, normalised for small slots. */
.xe .card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0.25rem;
    background: transparent;
    box-shadow: none;
    color: var(--xe-muted);
    font-size: 0.625rem;
    text-align: center;
}

.xe-thumb {
    flex: 0 0 auto;
    width: 3.5rem;
    font-size: 0.5rem;
}

.xe-thumb .banned-badge,
.xe-thumb .limited-badge,
.xe-thumb .semilimited-badge {
    display: none;
}

/* ---------------------------------------------------------- card dossiers */

.xe-dossiers {
    display: grid;
    gap: 1.25rem;
}

.xe-dossier {
    container-type: inline-size;
    container-name: dossier;
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: clamp(1rem, 3cqi, 1.5rem);
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius);
    background: var(--xe-surface-2);
}

.xe-dossier--primary {
    border-color: var(--xe-border);
    border-top: 3px solid var(--xe-gold);
    box-shadow: var(--xe-glow);
}

.xe-dossier__head {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.xe-dossier__art {
    max-width: 11rem;
}

.xe-dossier__id {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
}

.xe-dossier__role {
    color: var(--xe-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.xe-dossier__arch {
    color: var(--xe-gold);
}

.xe-dossier__name {
    font-family: var(--xe-heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.xe-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: inherit;
    gap: 0.35rem;
    padding: 0;
    list-style: none;
}

.xe-stats li {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--xe-border);
    border-radius: 4px;
    background: var(--xe-surface-3);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--xe-text-2);
}

.xe-atkdef {
    display: flex;
    gap: 1.25rem;
    font-family: var(--xe-mono);
}

.xe-atkdef div {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

.xe-atkdef dt {
    color: var(--xe-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.xe-atkdef dd {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.xe-dossier__summon {
    color: var(--xe-text-2);
    font-size: 0.875rem;
    font-style: italic;
}

.xe-dossier__note {
    padding: 0.6rem 0.85rem;
    border: 1px dashed var(--xe-border);
    border-radius: var(--xe-radius-sm);
    color: var(--xe-text-2);
    font-size: 0.875rem;
}

@container dossier (min-width: 440px) {
    .xe-dossier__head {
        grid-template-columns: 9.5rem 1fr;
        align-items: start;
        justify-items: stretch;
        text-align: left;
    }

    .xe-dossier__id {
        justify-items: start;
    }

    .xe-stats {
        justify-content: flex-start;
    }
}

.xe-effects {
    display: grid;
    gap: 0.6rem;
    padding: 0;
    list-style: none;
}

.xe-effect {
    display: grid;
    grid-template-columns: 6.75rem 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.7rem 0.8rem;
    border-radius: var(--xe-radius-sm);
    background: var(--xe-surface-3);
    border: 1px solid var(--xe-border-soft);
}

.xe-effect__tag {
    justify-self: start;
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--xe-accent-soft);
    border: 1px solid var(--xe-border);
    color: var(--xe-accent-ink);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.xe-effect__label {
    color: var(--xe-gold);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.xe-effect__text {
    color: var(--xe-text);
    font-size: 0.9375rem;
}

@container dossier (max-width: 359px) {
    .xe-effect {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}

.xe-facts {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--xe-text-2);
}

.xe-facts li {
    position: relative;
    padding-left: 1.1rem;
}

.xe-facts li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.6em;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--xe-gold);
    transform: rotate(45deg);
}

.xe-official {
    border-top: 1px solid var(--xe-border-soft);
    padding-top: 0.75rem;
}

.xe-official summary {
    color: var(--xe-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.xe-official summary:hover {
    color: var(--xe-text);
}

.xe-official p {
    margin-top: 0.6rem;
    padding: 0.75rem;
    border-radius: var(--xe-radius-sm);
    background: rgba(0, 0, 0, 0.55);
    color: var(--xe-text-2);
    font-family: var(--xe-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* ------------------------------------------------------------ key enabler */

.xe-enabler {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--xe-border);
    border-left: 4px solid #ea580c;
    border-radius: var(--xe-radius-sm);
    background: var(--xe-surface-3);
}

.xe-enabler .xe-thumb {
    width: 4rem;
}

.xe-enabler__eyebrow {
    color: var(--xe-muted);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.xe-enabler__name {
    margin: 0.15rem 0 0.35rem;
    font-size: 1.0625rem;
}

.xe-enabler__text {
    color: var(--xe-text-2);
    font-size: 0.9rem;
}

/* ----------------------------------------------------------------- bridge */

.xe-bridge {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
}

.xe-bridge__node {
    padding: 1rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius);
    background: var(--xe-surface-2);
}

.xe-bridge__node--left { border-top: 3px solid var(--xe-accent); }
.xe-bridge__node--right { border-top: 3px solid var(--xe-accent); }

.xe-bridge__node--hub {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    border: 1px solid var(--xe-gold);
    box-shadow: 0 0 28px rgba(255, 215, 0, 0.12);
    text-align: center;
}

.xe-thumb--hub {
    width: 5.5rem;
}

.xe-bridge__hub-name {
    font-family: var(--xe-heading-font);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.xe-bridge__hub-meta {
    color: var(--xe-muted);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
}

.xe-bridge__title {
    font-family: var(--xe-heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.xe-bridge__cap {
    margin: 0.2rem 0 0.6rem;
    color: var(--xe-muted);
    font-size: 0.8125rem;
}

.xe-bridge__list {
    display: grid;
    gap: 0.3rem;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.xe-bridge__list li {
    position: relative;
    padding-left: 0.9rem;
}

.xe-bridge__list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--xe-accent-ink);
    font-weight: 700;
}

/* Connectors: vertical when stacked, horizontal once the row fits. */
.xe-bridge__link {
    position: relative;
    justify-self: center;
    width: 2px;
    height: 1.75rem;
    background: linear-gradient(var(--xe-accent), var(--xe-gold));
}

.xe-bridge__link::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--xe-gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--xe-gold);
}

.xe-bridge__link--out {
    background: linear-gradient(var(--xe-gold), var(--xe-accent));
}

.xe-bridge__footer {
    margin-top: 1rem;
    color: var(--xe-text-2);
    font-size: 0.9rem;
}

@container xe (min-width: 760px) {
    .xe-bridge {
        grid-template-columns: 1fr 2.5rem minmax(10rem, 12.5rem) 2.5rem 1fr;
        align-items: center;
    }

    .xe-bridge__link {
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--xe-accent), var(--xe-gold));
    }

    .xe-bridge__link--out {
        background: linear-gradient(90deg, var(--xe-gold), var(--xe-accent));
    }

    .xe-bridge__node--left,
    .xe-bridge__node--right {
        align-self: stretch;
    }
}

/* ------------------------------------------------------------ data tables */

.xe-table-wrap {
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius);
    overflow: hidden;
}

.xe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.xe-table th,
.xe-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--xe-border-soft);
    text-align: left;
    vertical-align: top;
}

.xe-table thead th {
    background: rgba(0, 0, 0, 0.55);
    color: var(--xe-accent-ink);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.xe-table tbody th {
    width: 32%;
    font-weight: 600;
    color: #fff;
}

.xe-table tbody td:nth-child(2) {
    width: 16%;
    color: var(--xe-muted);
    font-family: var(--xe-mono);
    font-size: 0.75rem;
    white-space: nowrap;
}

.xe-table tbody td:last-child {
    color: var(--xe-text-2);
}

.xe-table tbody tr:last-child th,
.xe-table tbody tr:last-child td {
    border-bottom: 0;
}

.xe-table tbody tr:hover {
    background: var(--xe-accent-soft);
}

/* Narrow slots: each row becomes a labelled card. */
@container xe (max-width: 639px) {
    .xe-table thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden; clip: rect(0, 0, 0, 0);
    }

    .xe-table,
    .xe-table tbody,
    .xe-table tr,
    .xe-table th,
    .xe-table td {
        display: block;
        width: 100% !important;
    }

    .xe-table tbody tr {
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid var(--xe-border-soft);
    }

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

    .xe-table th,
    .xe-table td {
        padding: 0.15rem 0;
        border: 0;
    }

    .xe-table tbody td:nth-child(2) {
        white-space: normal;
    }

    .xe-table tbody td::before {
        content: attr(data-label) ': ';
        color: var(--xe-muted);
        font-family: var(--xe-mono);
        font-size: 0.6875rem;
        text-transform: uppercase;
    }

    .xe-table tbody td:last-child::before {
        display: block;
    }
}

/* ------------------------------------------------------------ combo steps */

.xe-branch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.xe-branch__label {
    margin-right: 0.25rem;
    color: var(--xe-muted);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.xe-branch__btn {
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--xe-border);
    border-radius: 999px;
    background: var(--xe-surface-3);
    color: var(--xe-text-2);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.xe-branch__btn:hover {
    border-color: var(--xe-gold);
    color: #fff;
}

.xe-branch__btn[aria-pressed="true"] {
    border-color: var(--xe-gold);
    background: linear-gradient(180deg, var(--xe-accent), var(--xe-accent-deep));
    color: #fff;
    box-shadow: 0 0 16px var(--xe-accent-soft);
}

.xe-steps {
    display: grid;
    gap: 0;
    padding: 0;
    list-style: none;
}

.xe-step {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1rem;
    padding-bottom: 1.25rem;
}

/* Timeline spine between step thumbnails. */
.xe-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.75rem;
    top: 5.5rem;
    bottom: 0.25rem;
    width: 2px;
    background: linear-gradient(var(--xe-accent), transparent);
    transform: translateX(-50%);
}

.xe-step__body {
    padding: 0.85rem 1rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius-sm);
    background: var(--xe-surface-2);
}

.xe-step--branching .xe-step__body {
    border-color: var(--xe-border);
}

.xe-step__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.xe-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--xe-accent);
    color: #fff;
    font-family: var(--xe-mono);
    font-size: 0.8125rem;
}

.xe-step__text {
    color: var(--xe-text-2);
    font-size: 0.9375rem;
}

.xe-step__text[hidden],
.xe-step__art[hidden] {
    display: none;
}

/* End-of-line summary under a combo walkthrough. */
.xe-result {
    margin-top: 0.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--xe-border);
    border-left: 4px solid var(--xe-gold);
    border-radius: var(--xe-radius-sm);
    background: var(--xe-surface-3);
}

.xe-result__list {
    display: grid;
    gap: 0.4rem;
    padding-left: 1.1rem;
    list-style: disc;
    color: var(--xe-text-2);
    font-size: 0.9375rem;
}

.xe-result__list li::marker {
    color: var(--xe-gold);
}

@container xe (min-width: 640px) {
    .xe-step {
        grid-template-columns: 4.5rem 1fr;
        gap: 1.25rem;
    }

    .xe-step .xe-thumb {
        width: 4.5rem;
    }

    .xe-step:not(:last-child)::before {
        left: 2.25rem;
        top: 6.9rem;
    }
}

/* ----------------------------------------------------------- deck profile */

.xe-deck {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
}

.xe-deck__group {
    padding: 1rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius);
    background: var(--xe-surface-2);
}

.xe-deck__title {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xe-accent-ink);
}

.xe-deck__rows {
    display: grid;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

.xe-deck__row {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
}

.xe-deck__count {
    grid-row: span 2;
    align-self: start;
    padding: 0.2rem 0;
    border: 1px solid var(--xe-border);
    border-radius: 6px;
    background: var(--xe-surface-3);
    color: var(--xe-gold);
    font-family: var(--xe-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.xe-deck__card {
    font-size: 0.9375rem;
}

.xe-deck__role {
    color: var(--xe-muted);
    font-size: 0.8125rem;
}

/* ------------------------------------------------- burst chart and ledger */

.xe-assumptions {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 0;
    list-style: none;
    color: var(--xe-text-2);
    font-size: 0.875rem;
}

.xe-assumptions li {
    position: relative;
    padding-left: 1.1rem;
}

.xe-assumptions li::before {
    content: '•';
    position: absolute;
    left: 0.2rem;
    color: var(--xe-gold);
}

.xe-chart {
    padding: 1rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius);
    background: var(--xe-surface);
}

.xe-stack {
    position: relative;
    padding-top: 1.6rem;
}

.xe-stack__track {
    display: flex;
    gap: 2px;                          /* surface gap between segments */
    height: 2.25rem;
}

.xe-stack__seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;       /* labels start-aligned: clear of the LP line */
    min-width: 0;
    padding-left: 0.5rem;
    background: var(--xe-seg);
}

.xe-stack__track > .xe-stack__seg:last-child {
    border-radius: 0 4px 4px 0;        /* rounded data end, square baseline */
}

.xe-stack__val {
    color: var(--xe-ink-on-fill);
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xe-stack__tip {
    position: absolute;
    bottom: calc(100% + 0.6rem);
    left: 50%;
    z-index: 5;
    min-width: 9rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: 6px;
    background: #0b0b0b;
    color: var(--xe-text);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.xe-stack__tip span {
    color: var(--xe-muted);
}

.xe-stack__seg:first-child .xe-stack__tip {
    left: 0;
    transform: translate(0, 4px);
}

.xe-stack__seg:last-child .xe-stack__tip {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}

.xe-stack__seg:hover .xe-stack__tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.xe-stack__seg:first-child:hover .xe-stack__tip,
.xe-stack__seg:last-child:hover .xe-stack__tip {
    transform: translate(0, 0);
}

.xe-stack__seg:hover {
    filter: brightness(1.12);
}

/* 8,000 LP reference line. */
.xe-stack__lp {
    position: absolute;
    top: 0;
    bottom: -0.35rem;
    z-index: 2;
    width: 2px;
    background: var(--xe-text);
    pointer-events: none;
}

.xe-stack__lp span {
    position: absolute;
    top: 0;
    right: 0.4rem;
    color: var(--xe-text);
    font-family: var(--xe-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.xe-legend ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.9rem;
    padding: 0;
    list-style: none;
    color: var(--xe-text-2);
    font-size: 0.8125rem;
}

.xe-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.xe-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    background: var(--xe-seg);
}

.xe-ledger {
    width: 100%;
    max-width: 44rem;
    margin-top: 1rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.xe-ledger th,
.xe-ledger td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--xe-border-soft);
    text-align: left;
    vertical-align: top;
}

.xe-ledger tbody th {
    font-weight: 600;
    color: var(--xe-text);
}

.xe-ledger tbody th .xe-swatch {
    margin-right: 0.45rem;
    vertical-align: 0.05em;
}

.xe-ledger__n {
    width: 2rem;
    color: var(--xe-muted);
    font-family: var(--xe-mono);
}

.xe-ledger__note {
    display: block;
    color: var(--xe-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.xe-ledger__v {
    color: #fff;
    font-family: var(--xe-mono);
    font-variant-numeric: tabular-nums;
    text-align: right !important;
    white-space: nowrap;
}

.xe-ledger tfoot th,
.xe-ledger tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--xe-border);
    font-weight: 800;
    color: #fff;
}

.xe-ledger__over {
    display: block;
    color: var(--xe-gold);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- verdict */

.xe-verdict__headline {
    margin-bottom: 1rem;
    font-family: var(--xe-heading-font);
    font-size: clamp(1.05rem, 2.8cqi, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--xe-gold);
}

.xe-ratings {
    display: grid;
    gap: 0.9rem;
    padding: 0;
    list-style: none;
}

.xe-rating {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
}

.xe-rating__label {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

.xe-pips {
    display: inline-flex;
    gap: 3px;
}

.xe-pips i {
    display: block;
    width: 1.1rem;
    height: 0.45rem;
    border-radius: 2px;
    background: var(--xe-accent-soft);
    border: 1px solid var(--xe-border);
}

.xe-pips i.is-on {
    background: var(--xe-accent-ink);
    border-color: var(--xe-accent-ink);
}

.xe-rating__value {
    min-width: 2.25rem;
    color: var(--xe-text);
    font-family: var(--xe-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: right;
}

.xe-rating__note {
    grid-column: 1 / -1;
    color: var(--xe-muted);
    font-size: 0.8125rem;
}

@container xe (min-width: 640px) {
    .xe-rating {
        grid-template-columns: 9.5rem auto 2.5rem 1fr;
    }

    .xe-rating__note {
        grid-column: auto;
    }
}

.xe-verdict__text {
    margin-top: 1.25rem;
    max-width: 75ch;
    color: var(--xe-text-2);
}

.xe-watch {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
    color: var(--xe-text-2);
    font-size: 0.9rem;
}

.xe-watch li {
    position: relative;
    padding: 0.55rem 0.8rem 0.55rem 2.1rem;
    border: 1px solid var(--xe-border-soft);
    border-radius: var(--xe-radius-sm);
    background: var(--xe-surface-3);
}

.xe-watch li::before {
    content: '!';
    position: absolute;
    left: 0.65rem;
    top: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--xe-accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 900;
    line-height: 1;
}

/* ----------------------------------------------------------------- teaser */

.xe-teaser {
    padding: clamp(1rem, 3vw, 1.5rem);
    border-left: 4px solid var(--xe-gold);
}

/* The grid lives on an inner wrapper: a container query can't style the container itself. */
.xe-teaser__inner {
    display: grid;
    gap: 1rem;
    align-items: center;
}

.xe-teaser__art {
    display: flex;
    justify-content: center;
}

.xe-teaser__art .xe-thumb {
    width: 4.25rem;
}

.xe-teaser__art .xe-thumb + .xe-thumb {
    margin-left: -1.25rem;
    margin-top: 0.75rem;
    transform: rotate(6deg);
}

.xe-teaser__art .xe-thumb:first-child {
    transform: rotate(-4deg);
    z-index: 1;
}

.xe-teaser__body {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
}

.xe-teaser__title {
    font-family: var(--xe-heading-font);
    font-size: clamp(1.1rem, 3.5cqi, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.xe-teaser__text {
    max-width: 70ch;
    color: var(--xe-text-2);
    font-size: 0.9375rem;
}

.xe-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    margin-top: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--xe-gold);
    border-radius: var(--xe-radius-sm);
    background: linear-gradient(180deg, var(--xe-accent), var(--xe-accent-deep));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.xe-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--xe-accent-soft);
}

@container xe (min-width: 520px) {
    .xe-teaser__inner {
        grid-template-columns: auto 1fr;
        gap: 1.5rem;
    }
}

/* -------------------------------------------------------- wide containers */

@container xe (min-width: 880px) {
    .xe-dossiers {
        grid-template-columns: 1fr 1fr;
    }

    /* A single-card release keeps its one dossier full width. */
    .xe-dossiers--single {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    .xe *,
    .xe *::before,
    .xe *::after {
        transition: none !important;
        animation: none !important;
    }

    .xe-btn:hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    .xe-stack__seg,
    .xe-swatch,
    .xe-pips i.is-on {
        forced-color-adjust: none;
    }
}