/* ════════════════════════════════════════════════════════════════
 * css/intensity-tuner.css — Intensity Tuner ("Tune" panel)
 *
 * 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 discipline). Respects prefers-reduced-motion; >=44px touch
 * targets; aria-driven controls. The copy-confirm is a pure green color swap
 * (motion-free), matching the sibling convention.
 *
 * Interior built by js/features/intensity-tuner.js (textContent only — never
 * innerHTML with user/styled text). Defines range-slider styling from scratch
 * (no prior slider CSS exists in the project).
 * ════════════════════════════════════════════════════════════════ */

/* ── Shell + CLS reserve ──
 * Unlike the symbol library (collapsed disclosure), the Tune panel ships
 * FULLY EXPANDED — the interior is built at init in one runtime step, so we
 * reserve the whole panel height. Growth from typing / dragging is
 * interaction-driven (CLS-exempt). */
.it {
    margin-top: var(--s-md);
    min-height: 680px;     /* incl. preset row + Symbol caption (ships expanded) */
}
.it[hidden] { display: none; }
@media (max-width: 600px) {
    .it { min-height: 860px; }   /* presets can wrap to 2 rows on narrow screens */
}

/* ── Surface card ── */
.it__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 / controls rhythm ── */
.it__header { margin-bottom: var(--s-md); }
.it__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--c-text); }
.it__subtitle { margin: var(--s-xs) 0 0; font-size: 0.8rem; color: var(--c-text-muted); }
.it__controls { display: flex; flex-direction: column; gap: var(--s-lg); }

/* ── Presets — one-tap looks (entry point, above the granular controls) ── */
.it__presets-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s-xs);
    margin-bottom: var(--s-md);
}
.it__presets-cap {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.it__presets { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.it__preset {
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--c-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.it__preset:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    transform: translateY(-1px);
}
.it__preset:active { transform: translateY(0); }
.it__preset:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ── Base select ── */
.it__row--base { display: flex; flex-direction: column; gap: var(--s-xs); }
.it__select {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface-solid);
    color: var(--c-text);
    font-size: 0.95rem;
}
.it__select:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
@media (max-width: 600px) { .it__select { font-size: 16px; } }   /* no iOS zoom */

/* ── Sliders (from scratch) ── */
.it__slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-xs);
    gap: var(--s-sm);
}
.it__slider-label { font-size: 0.9rem; font-weight: 600; color: var(--c-text); }
.it__slider-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-text);
    background: var(--c-surface-hover);
    padding: 0.1rem 0.55rem;
    border-radius: var(--r-full);
    min-width: 2.2rem;
    text-align: center;
}
.it__slider-hint { margin: var(--s-xs) 0 0; font-size: 0.75rem; color: var(--c-text-muted); }

/* Track — reset native, draw a gradient-capable rail. 44px input height
 * supplies the touch target even though the visible track is thinner. */
.it__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 44px;
    height: 44px;
    background: transparent;
    cursor: pointer;
    margin: 0;
}
/* WebKit */
.it__range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--c-border-hover);
}
.it__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;                  /* center on 6px track */
    border-radius: var(--r-full);
    background: var(--grad-brand);
    border: 2px solid var(--c-surface-solid);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform var(--t-fast);
}
.it__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
/* Firefox */
.it__range::-moz-range-track {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--c-border-hover);
}
.it__range::-moz-range-progress {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--grad-brand);
}
.it__range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 2px solid var(--c-surface-solid);
    border-radius: var(--r-full);
    background: var(--grad-brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.it__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.it__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ── Decoration picker chips ── */
.it__decogroup { display: flex; flex-direction: column; gap: var(--s-xs); }
.it__decogroup-cap { display: block; }
.it__decopick { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.it__deco {
    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);
}
.it__deco:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    transform: translateY(-1px);
}
.it__deco:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.it__deco.is-active { border-color: transparent; background: var(--grad-brand); color: #fff; }
.it__decopick--off { opacity: 0.45; }
/* When density is 0 the whole group is "off"; neutralize the active chip's
 * bright brand fill so it doesn't read as "on" inside a dimmed group. */
.it__decopick--off .it__deco.is-active {
    background: var(--c-surface-hover);
    border-color: var(--c-border);
    color: var(--c-text);
}

/* ── Seed line ── */
.it__seedline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); }
.it__seed-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text); }
.it__seed-input {
    width: 7rem;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface-solid);
    color: var(--c-text);
    font-size: 0.9rem;
}
.it__seed-input:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.it__seed-hint { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--c-text-muted); }
.it__seedline--off { opacity: 0.45; }
@media (max-width: 600px) { .it__seed-input { font-size: 16px; } }

/* ── Buttons ── */
.it__btn {
    min-height: 44px;
    padding: 0.6rem 1.2rem;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.it__btn:hover { background: var(--c-surface-hover); border-color: var(--c-border-hover); }
.it__btn:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.it__btn--primary { border-color: transparent; color: #fff; background: var(--grad-brand); }
.it__btn--primary:hover { background: var(--grad-brand); transform: translateY(-1px); }

/* ── Preview box + copy-confirm ── */
.it__preview { margin-top: var(--s-lg); }
.it__preview-head {
    display: flex;
    align-items: center;
    gap: var(--s-sm);
    margin-bottom: var(--s-xs);
}
.it__preview-cap {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.it__preview-flag { font-size: 0.75rem; color: var(--c-text-muted); }
.it__preview-out {
    min-height: 84px;                  /* reserve ~2 lines incl. zalgo overflow */
    margin: 0 0 var(--s-sm);
    padding: var(--s-md);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--c-text);
    font-size: 1.5rem;
    line-height: 1.9;                  /* tall so stacked zalgo marks don't clip */
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;                  /* heavy zalgo can spill vertically */
}
.it__copy--done {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.45);
    color: var(--c-success);
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .it__inner { backdrop-filter: none; -webkit-backdrop-filter: none; }   /* GPU */
    .it__preview-out { font-size: 1.3rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .it__range::-webkit-slider-thumb,
    .it__deco,
    .it__preset,
    .it__btn { transition: none; }
    .it__deco:hover,
    .it__preset:hover,
    .it__btn--primary:hover { transform: none; }
    .it__range:hover::-webkit-slider-thumb { transform: none; }
}