/* J.J. Abrams easter-egg TYPE BADGES + per-page key — the ?jj=badges experiment.

   Episode-page-only and behind a query param, so it lives in its own sheet loaded
   only when the variant renders (like episode-linkbar.css / motif.css), NOT in
   massive-dynamic.css which 17 views share (no ?v= churn). Scoped under .md-skin
   so it never leaks to the retired ?hero=current|a|b|c shims (which don't load the
   skin). See App\Support\JjEgg + episode/sections/jj-easter-eggs.blade.php. */

.md-skin .jj-badge {
    display: inline-block;
    vertical-align: 0.08em;
    margin-left: 0.4em;
    padding: 0.05em 0.62em;
    border-radius: 20px;
    font-family: var(--md-font);
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Types are constant across the whole show, so their colours are FIXED — not the
   per-verse --md-accent. A reader learns to recognise "47" gold / "Lost" teal at
   a glance, and that recognition should hold from a blueverse page to a redverse
   one. Light tint + same-hue dark text (AA on the tint). */
.md-skin .jj-badge--47     { background: #faeeda; color: #633806; }
.md-skin .jj-badge--lost   { background: #e1f5ee; color: #085041; }
.md-skin .jj-badge--slusho { background: #fbeaf0; color: #72243e; }
.md-skin .jj-badge--kelvin { background: #e6f1fb; color: #0c447c; }

/* THE KEY — one gloss per distinct type on the page, however many facts use it.
   This is what replaces the per-item hover tooltip and dedupes the explanation
   (ep 114's two "47" facts -> a single "47" line here). It CLOSES the section
   (owner, 2026-08-02) as a legend/footnotes for the badges above it. */
.md-skin .jj-key {
    margin: 1.75rem 0 0;
    padding: 0.7rem 1.1rem;
    background: var(--md-surface);
    border: 1px solid var(--md-line);
    border-radius: 8px;
}

.md-skin .jj-key__item {
    display: grid;
    grid-template-columns: 5.25rem 1fr;
    gap: 0.35rem 0.95rem;
    align-items: baseline;
    padding: 0.4rem 0;
}

.md-skin .jj-key__item + .jj-key__item {
    border-top: 1px solid var(--md-line);
}

.md-skin .jj-key dt {
    margin: 0;
}

/* the key's own badge has no leading text to sit after */
.md-skin .jj-key dt .jj-badge {
    margin-left: 0;
    font-size: 0.8rem;
}

.md-skin .jj-key dd {
    margin: 0;
    color: var(--md-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .md-skin .jj-key__item {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}