/*
 * Prompt Card
 *
 * v4.0 — May 2026 (scroll-based navigation; prompt is a strip flex item)
 *
 * The prompt card is APPENDED to .scrolling-strip as the last flex child
 * and shares the .strip-card class so it picks up the standard flex sizing
 * (width, aspect-ratio, transform baseline, transition). PromptCard.js
 * smooth-scrolls the strip to center the prompt — same mechanism as
 * clicking a pip — then on cleanup smooth-scrolls back to the originally
 * centered card and removes the prompt from the DOM.
 *
 * Why not overlay-with-keyframes any more (v1-v3):
 *   The transform-based slide-off + slide-back fought the carousel's
 *   native scrollLeft positioning. Every Plan A patch (function-list,
 *   scrollLeft pin/restore, canonical-recompute) surfaced a new failure
 *   layer in a different place. Pure scroll-based navigation reuses the
 *   carousel's well-tested smooth scroll for every transition and has no
 *   transform-vs-scrollLeft coupling to get wrong.
 *
 * getCards() in carousel-standalone.js excludes .strip-card--prompt so
 * the prompt doesn't show up in pip indexes / currentIndex / centered-
 * class toggling. PromptCard manages its own lifecycle.
 */

/* ── card surface (form lives inside .generate-card) ───────────── */
.strip-card--prompt .prompt-card-surface {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── text master ───────────────────────────────────────────────── */
/* HAL cards size their text off the SAME vmax master as the card-backs
   (standalone-carousel.css) — one steady size everywhere, flip-stable, with
   children in em. Covers the slide-in form + both flip overlays; the buttons
   and input already font:inherit, so they track it for free. */
.prompt-card-form,
.flip-confirm,
.flip-prompt-overlay {
    font-size: clamp(11px, 1.5vmax, 13px);
}

.prompt-card-form {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
}

/* Character identity image at the top of the card — circular avatar
   reading as "this question is about this character" at a glance.
   Width is a percentage of the prompt card so it scales with the
   card-zoom + viewport; aspect-ratio + object-fit:cover handles any
   source ratio (portrait card_portrait, landscape scene, square
   profile). EYES (slot-2) border ties it into the per-character theme — the
   site accent, matching the card borders. */
.prompt-card-thumbnail {
    display: block;
    width: 50%;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--secondary) 80%, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── text input (ask-name) ─────────────────────────────────────── */
.prompt-card-input {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: inherit;
    text-align: center;
    transition: border-color 120ms ease, background 120ms ease;
}

.prompt-card-input::placeholder {
    color: color-mix(in srgb, currentColor 45%, transparent);
}

.prompt-card-input:focus {
    outline: none;
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ── flip-prompt (a prompt card flipped onto a card's back) ────── */
/* PromptCard.flipPrompt's overlay — like flip-auth but for a non-native
   prompt card (ask-name): the input prompt lives on the generate card's back
   and flips back to the front (generate side) once answered, so you name the
   character and generate right there. inset:0 over the live back content;
   gradient mirrors .flip-back so it reads as the card's own face. */
.flip-prompt-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 16%, #22222a) 0%,
        #22222a 50%
    );
}
/* Surface-sizing (scoped to .strip-card--prompt for the slide-in card) re-asserted
   for the flipped overlay. */
.flip-prompt-overlay .prompt-card-surface {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── flip-confirm (HAL confirm flipped onto a card's back) ─────── */
/* PromptCard.flipConfirm's overlay — the in-place sibling of a slide-in prompt
   card, now rendering the shared .auth-confirm-surface grid (header / avatar /
   question / yes-no). inset:0 over the live back content; cancel removes it. The
   gradient mirrors .flip-back (standalone-carousel.css), hence the inlined hex. */
.flip-confirm {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: 10px;
    overflow: hidden;
    /* Backdrop only — the .auth-surface grid child (height:100%) lays out the
       header / avatar / question / buttons now. */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 16%, #22222a) 0%,
        #22222a 50%
    );
}

/* Buttons — .prompt-card-btn is retired; slide-in prompts + flip overlays use the
   shared .confirm-btn (auth-card.css) now. */