/* ════════════════════════════════════════════════════════════════
 * css/themed-packs.css — Themed "Vibes" Packs
 *
 * Additive, self-contained. Uses main.css design tokens only (light-mode is
 * automatic — never hard-code colors, only rgba() accents). Reserves height
 * to prevent CLS (mirrors the gaming-identity / style-builder / symbol-library
 * / intensity-tuner discipline). Respects prefers-reduced-motion; >=44px touch
 * targets; aria-driven controls. The copy-confirm is a pure green color swap
 * (motion-free) so it always fires.
 *
 * The vibe-card accent (a per-pack hex/gradient) is injected by JS as the
 * --tp-accent custom property and used ONLY for card chrome (top bar + selected
 * glow) and the detail head rule — never as a text background, so --c-text
 * contrast holds in both themes.
 *
 * Interior built by js/features/themed-packs.js (textContent only — never
 * innerHTML with user/styled text).
 * ════════════════════════════════════════════════════════════════ */

/* ── Shell + CLS reserve ──
 * The gallery is built at init in one runtime step; reserve its height so the
 * reveal doesn't shift the page. The detail panel below is selection-driven
 * (CLS-exempt) and stays hidden until the first pick. */
.tp {
    margin-top: var(--s-md);
    min-height: 360px;     /* gallery: ~3 card rows + header */
}
.tp[hidden] { display: none; }
@media (max-width: 600px) {
    /* On a ~360px column the 12 cards wrap to ~5-6 rows; reserve enough so the
     * reveal doesn't push content down (mobile CLS is scored hardest). */
    .tp { min-height: 580px; }
}

/* ── Surface card ── */
.tp__inner {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Header ── */
.tp__header { margin-bottom: var(--s-md); }
.tp__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--c-text); }
.tp__subtitle { margin: var(--s-xs) 0 0; font-size: 0.8rem; color: var(--c-text-muted); }

/* ── Gallery grid ── */
.tp__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s-md);
    animation: tpFadeIn var(--t-base) both;
}
@media (max-width: 600px) {
    .tp__gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ── Vibe card ── */
.tp__card {
    position: relative;
    overflow: hidden;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-xs);
    padding: var(--s-md);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.03);
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
/* Accent chrome — top bar only; text stays --c-text for contrast. */
.tp__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tp-accent, var(--grad-brand));
}
.tp__card:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    transform: translateY(-2px);
}
.tp__card:active { transform: translateY(0); }
.tp__card:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
/* Selected: a 2px ring drawn in the pack's own accent (gradient-safe via a
 * masked ::after overlay, since a gradient can't live in box-shadow) plus a
 * neutral soft drop-shadow for depth. Each vibe glows its own color. */
.tp__card.is-active {
    border-color: transparent;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.tp__card.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--tp-accent, var(--grad-brand));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.tp__card-emoji { font-size: 2rem; line-height: 1; }
.tp__card-label { font-size: 0.85rem; font-weight: 700; text-align: center; }

/* ── Detail panel (selection-driven) ── */
.tp__detail {
    margin-top: var(--s-lg);
    border-top: 1px solid var(--c-border);
    padding-top: var(--s-lg);
}
.tp__detail[hidden] { display: none; }

.tp__detail-head {
    display: flex;
    align-items: center;
    gap: var(--s-sm);
    padding-left: var(--s-sm);
    border-left: 3px solid transparent;
    border-image: var(--tp-accent, var(--grad-brand)) 1;
    margin-bottom: var(--s-md);
}
.tp__detail-emoji { font-size: 1.75rem; line-height: 1; }
.tp__detail-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text); }
.tp__detail-tagline { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--c-text-muted); }

/* ── Block captions + hints ── */
/* The caption text stays muted (contrast); a short accent rule threads the
 * pack's color through the whole panel so each selected vibe feels themed. */
.tp__cap {
    display: flex;
    align-items: center;
    gap: var(--s-xs);
    margin: var(--s-lg) 0 var(--s-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.tp__cap::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: var(--r-full);
    background: var(--tp-accent, var(--grad-brand));
    flex: 0 0 auto;
}
.tp__hint { margin: 0 0 var(--s-sm); font-size: 0.75rem; color: var(--c-text-muted); }

/* ── First-open nudge ── */
.tp__nudge {
    margin: var(--s-md) 0 0;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    text-align: center;
}

/* ── Style rows (full-width copy buttons) ── */
.tp__styles { display: flex; flex-direction: column; gap: var(--s-sm); }
.tp__style {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    min-height: 56px;
    padding: var(--s-sm) var(--s-md);
    text-align: left;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tp__style:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    transform: translateY(-1px);
}
.tp__style:active { transform: translateY(0); }
.tp__style:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.tp__style-preview {
    font-size: 1.4rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.tp__style-name { font-size: 0.72rem; color: var(--c-text-muted); }

/* ── Decoration tiles ── */
.tp__decos { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.tp__deco {
    min-width: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
/* Dividers / wide strings get a roomier tile so they don't crush. */
.tp__deco--wide { width: auto; padding: 0 0.75rem; font-size: 1rem; }
.tp__deco-glyph { white-space: nowrap; }
.tp__deco:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    transform: translateY(-1px);
}
.tp__deco:active { transform: translateY(0); }
.tp__deco:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ── Bio block ── */
.tp__bio-out {
    min-height: 84px;
    margin: 0 0 var(--s-sm);
    padding: var(--s-md);
    border: 1px solid var(--c-border);
    border-left: 3px solid transparent;
    border-image: var(--tp-accent, var(--grad-brand)) 1;   /* accent left rule */
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--c-text);
    font-size: 1.05rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.tp__bio-copy,
.tp__kit-copy {
    min-height: 44px;
    padding: 0.6rem 1.2rem;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--t-fast);
}
/* Whole-vibe button = the matched-set payoff; give it a little air + an accent
 * outline so it reads as the "kit" action, distinct from the bio button. */
.tp__kit-copy {
    margin-left: var(--s-sm);
    background: transparent;
    color: var(--c-text);
    border: 1px solid transparent;
    border-image: var(--tp-accent, var(--grad-brand)) 1;
}
.tp__bio-copy:hover,
.tp__kit-copy:hover { transform: translateY(-1px); }
.tp__bio-copy:active,
.tp__kit-copy:active { transform: translateY(0); }
.tp__bio-copy:focus-visible,
.tp__kit-copy:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
@media (max-width: 600px) {
    .tp__kit-copy { margin-left: 0; margin-top: var(--s-sm); }
}

/* ── Copy-confirm (pure color swap — always on, motion-free) ── */
.tp__copied {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    border-image: none !important;   /* override accent border-image so green shows */
    color: var(--c-success) !important;
}

/* ── Fade-in ── */
@keyframes tpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Mobile ── */
@media (max-width: 600px) {
    .tp__inner { backdrop-filter: none; -webkit-backdrop-filter: none; }   /* GPU */
    .tp__style-preview { font-size: 1.25rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .tp__gallery { animation: none; }
    .tp__card,
    .tp__style,
    .tp__deco,
    .tp__bio-copy,
    .tp__kit-copy { transition: none; }
    .tp__card:hover,
    .tp__style:hover,
    .tp__deco:hover,
    .tp__bio-copy:hover,
    .tp__kit-copy:hover { transform: none; }
}