/**
 * SCL Guide — Launcher, Hilfezentrum, Schritt-Dialog (TRAIN18-B).
 *
 * Tokenvertrag: verschachtelte var()-Ketten mit Literal-Fallback (Projektmuster).
 * z-Band 110000er — unter Beta-FAB (2147483000), ueber dem 9990-Kollisionsband
 * (Architektur patch-b/01). Bedienziele >= 44x44 (§2.8). Reduced Motion:
 * saemtliche Animationen fallen weg.
 */

/* ── Launcher ─────────────────────────────────────────────────────────────── */
.scl-guide-launcher {
    position: fixed;
    right: 16px;
    bottom: 84px; /* oberhalb des Beta-FAB-Bereichs, kein Verdecken (§6.1) */
    z-index: 110000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.16)));
    border-radius: 999px;
    background: var(--surface, var(--bg, #14101f));
    color: var(--text, var(--text-color, #f2eefe));
    font: inherit;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.scl-guide-launcher:hover { border-color: var(--accent, #a78bfa); }
.scl-guide-launcher:focus-visible {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: 2px;
}
.scl-guide-launcher__icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #a78bfa);
    color: var(--surface, #14101f);
    font-weight: 700;
}

/* ── Hilfezentrum (modaler Dialog) ────────────────────────────────────────── */
.scl-guide-center {
    z-index: 110010;
    /* TRAIN18-FABLE-V: natives <dialog> zentrieren (klebte sonst oben links). */
    margin: auto;
    width: min(440px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.16)));
    border-radius: 16px;
    background: var(--surface, var(--bg, #14101f));
    color: var(--text, var(--text-color, #f2eefe));
}
.scl-guide-center::backdrop { background: rgba(0, 0, 0, .55); }
.scl-guide-center__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.scl-guide-center__title { margin: 0; font-size: 1.15rem; }
.scl-guide-center__section {
    margin: 14px 0 8px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, var(--muted, rgba(242,238,254,.65)));
}
.scl-guide-center__list { display: grid; gap: 8px; }
.scl-guide-center__empty { margin: 0 0 8px; color: var(--text-muted, var(--muted, rgba(242,238,254,.65))); }
.scl-guide-card {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.14)));
    border-radius: 12px;
    background: var(--card-bg, rgba(255,255,255,.04));
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.scl-guide-card:hover { border-color: var(--accent, #a78bfa); }
.scl-guide-card:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }
.scl-guide-card__title { font-weight: 600; }
.scl-guide-card__desc { font-size: .85rem; color: var(--text-muted, var(--muted, rgba(242,238,254,.65))); }
.scl-guide-card--schnappi { margin-top: 12px; }

/* ── Schritt-Dialog (nichtmodal) ──────────────────────────────────────────── */
.scl-guide-step {
    z-index: 110005;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.16)));
    border-radius: 12px;
    background: var(--surface, var(--bg, #14101f));
    color: var(--text, var(--text-color, #f2eefe));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.scl-guide-step:focus { outline: none; }
.scl-guide-step:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }
.scl-guide-step__count {
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--text-muted, var(--muted, rgba(242,238,254,.65)));
}
.scl-guide-step__text { margin: 0; line-height: 1.45; }
.scl-guide-step__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* TRAIN18-R2/FABLE-V: Die Bar war vollbreit fixed-bottom und machte Cookie-
 * Consent, Fusszeilen-Links und den Beta-FAB unklickbar. Sie ist jetzt ein
 * kompaktes, zentriertes Panel — die aeusseren Bereiche (FAB rechts,
 * Fusszeile) bleiben frei — und ihr `bottom` wird per JS ueber einen
 * sichtbaren Cookie-Banner bzw. den Beta-FAB gehoben (Platz reservieren statt
 * ueberlagern; kein Loesungsweg ueber hoeheren z-index). */
.scl-guide-step--bar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(480px, calc(100vw - 96px));
    max-width: min(480px, calc(100vw - 96px));
    max-height: 40vh;
    overflow-y: auto;
    z-index: 110005;
}
.scl-guide-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.2)));
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.scl-guide-btn--primary {
    background: var(--accent, #a78bfa);
    border-color: var(--accent, #a78bfa);
    color: var(--surface, #14101f);
    font-weight: 600;
}
.scl-guide-btn--ghost:hover { border-color: var(--accent, #a78bfa); }
.scl-guide-btn:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }
.scl-guide-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Zielmarkierung: hebt hervor, verdeckt nie (§2.8) ─────────────────────── */
.scl-guide-target {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: 3px;
    border-radius: 6px;
}
.scl-guide-target--pulse { animation: scl-guide-pulse .5s ease 2; }
@keyframes scl-guide-pulse {
    0%, 100% { outline-offset: 3px; }
    50%      { outline-offset: 6px; }
}

/* ── Toast + Live-Region ──────────────────────────────────────────────────── */
.scl-guide-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 110020;
    max-width: min(480px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.2)));
    background: var(--surface, var(--bg, #14101f));
    color: var(--text, var(--text-color, #f2eefe));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.scl-guide-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Motion & kleine Viewports ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .scl-guide-target--pulse { animation: none; }
    .scl-guide-launcher,
    .scl-guide-step,
    .scl-guide-toast { transition: none; }
}
@media (max-width: 480px) {
    .scl-guide-launcher__label { display: none; }
    .scl-guide-launcher { right: 12px; bottom: 76px; padding: 10px; }
    .scl-guide-center { padding: 14px; }
}