/*
 * OT Flashcards — front-end styles.
 *
 * One single card visible at a time, click/tap to flip. Prev/Next
 * chevrons + counter underneath. CSS-only flip via 3D transform on the
 * inner element; no JS needed for the animation itself.
 *
 * Theming: every colour comes from CSS custom properties so the
 * containing theme can override them. Defaults match opentuition's
 * palette (red accent, neutral surface) but degrade gracefully on any
 * theme.
 */
.ot-flashcards {
    --otfc-radius: 8px;
    --otfc-bg: var(--ot-surface, var(--color-ot-bg, #ffffff));
    --otfc-bg-back: var(--ot-surface, var(--color-ot-bg, #ffffff));
    --otfc-fg: var(--ot-text, var(--color-ot-ink, #1a1a1a));
    --otfc-muted: var(--ot-muted, var(--color-ot-muted, #6b7280));
    --otfc-border: var(--ot-line, var(--color-ot-border, rgba(0, 0, 0, 0.08)));
    --otfc-shadow: 0 18px 42px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06);
    --otfc-accent: var(--ot-red, var(--color-ot-red, #cc0000));
    --otfc-blue: var(--ot-blue, #0066cc);
    --otfc-green: var(--ot-green, #007d6e);

    /* Card-shaped, not banner-shaped. ~520 × 400 default gives roughly the
       proportions of a real index card (4:3) and reads as "a card I might
       hold in my hand" rather than "a banner across the page". Min-height
       grows the card naturally for long answers; the answer body scrolls
       inside if it overflows.

       Both --otfc-min-height and --otfc-max-width are overridable from
       admin (Flashcards → Sliders → Display options). Mobile breakpoint
       below switches to a narrower, taller portrait card. */
    --otfc-min-height: clamp(480px, 58vw, 560px);
    --otfc-max-width: 680px;

    width: 100%;
    max-width: min(var(--otfc-max-width), calc(100vw - 2rem));
    margin: 0 auto 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    color: var(--otfc-fg);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ot-flashcards:focus-visible {
    box-shadow: none;
}

.ot-flashcards:focus-visible .ot-flashcard.is-current .ot-flashcard__face {
    outline: 2px solid var(--otfc-accent);
    outline-offset: 4px;
}

/* Viewport: holds every card; only one is visible (others have [hidden]). */
.ot-flashcards__viewport {
    position: relative;
    /* perspective on the parent so individual cards can flip in 3D */
    perspective: 1200px;
    min-height: var(--otfc-min-height);
    isolation: isolate;
}

/* A single card. Hidden cards collapse via the `hidden` HTML attribute. */
.ot-flashcard {
    --otfc-title-size: clamp(1.2rem, 2.2vw, 1.58rem);
    --otfc-title-line-height: 1.26;

    position: relative;
    width: 100%;
    cursor: pointer;
    /* Min-height keeps short answers from collapsing the surface; tall
       answers grow the card naturally. Body itself is the source of truth. */
    min-height: var(--otfc-min-height);
    cursor: pointer;
    border-radius: var(--otfc-radius);
    z-index: 1;
}

.ot-flashcard.has-medium-front {
    --otfc-title-size: clamp(1.08rem, 1.9vw, 1.34rem);
    --otfc-title-line-height: 1.3;
}

.ot-flashcard.has-long-front {
    --otfc-title-size: clamp(1rem, 1.55vw, 1.16rem);
    --otfc-title-line-height: 1.34;
}

.ot-flashcard.has-longest-front {
    --otfc-title-size: clamp(0.94rem, 1.35vw, 1.06rem);
    --otfc-title-line-height: 1.38;
}

.ot-flashcard[hidden] {
    display: none !important;
}

/*
 * The flip mechanism: inner wrapper has two faces (front / back) that
 * are rotated 180° relative to each other. Toggling .is-flipped on the
 * card rotates the inner wrapper, swapping which face faces the viewer.
 */
.ot-flashcard__inner {
    position: relative;
    width: 100%;
    min-height: var(--otfc-min-height);
    transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.ot-flashcard.is-flipped .ot-flashcard__inner {
    transform: rotateY(180deg);
}

.ot-flashcard__face {
    position: absolute;
    inset: 0;
    /* Hide back-of-card when facing away from viewer. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--otfc-bg) 96%, #f8fafc 4%) 0%, var(--otfc-bg) 100%);
    border: 1px solid var(--otfc-border);
    border-radius: var(--otfc-radius);
    box-shadow: var(--otfc-shadow);
    padding: 2rem 2.1rem 4rem;  /* extra bottom padding for the CTA */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ot-flashcard__face--back {
    background: linear-gradient(180deg, color-mix(in srgb, var(--otfc-bg-back) 96%, #f8fafc 4%) 0%, var(--otfc-bg-back) 100%);
    transform: rotateY(180deg);
}

.ot-flashcard__face::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--otfc-accent);
}

.ot-flashcard__face--back::before {
    background: var(--otfc-blue);
}

/* Tiny "Question" / "Answer" label at the top — sets context. */
.ot-flashcard__hint {
    width: max-content;
    max-width: 100%;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--otfc-accent) 9%, var(--otfc-bg));
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--otfc-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.ot-flashcard__face--back .ot-flashcard__hint {
    background: color-mix(in srgb, var(--otfc-blue) 10%, var(--otfc-bg));
    color: var(--otfc-blue);
}

.ot-flashcard__title {
    max-width: 54ch;
    max-height: calc(var(--otfc-min-height) - 9rem);
    overflow-y: auto;
    overflow-wrap: anywhere;
    font-size: var(--otfc-title-size);
    font-weight: 850;
    line-height: var(--otfc-title-line-height);
    color: var(--otfc-fg);
    /* Center vertically on the front face (titles are usually short). */
    margin: auto;
    text-align: center;
}

.ot-flashcard__body {
    font-size: 1.05rem;
    line-height: 1.62;
    color: var(--otfc-fg);
    flex: 1 1 auto;
    overflow-y: auto;
    /* Smooth-scroll hint for long answers. */
    scroll-behavior: smooth;
}

.ot-flashcard__body p:first-child { margin-top: 0; }
.ot-flashcard__body p:last-child  { margin-bottom: 0; }

.ot-flashcard__cta {
    position: absolute;
    bottom: 1.1rem;
    left: 2rem;
    right: 2rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 750;
    color: var(--otfc-blue);
    pointer-events: none;
}

/* Back-face action row: "I know this" button + small "click to flip
   back" hint. Sits at the bottom of the back face, replaces the
   standalone CTA on cards that have an answer. The button must catch
   pointer events so it can be clicked WITHOUT triggering the card's
   click-to-flip handler (the JS also stops propagation). */
.ot-flashcard__back-actions {
    position: absolute;
    bottom: 1rem;
    left: 1.4rem;
    right: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ot-flashcard__known-btn {
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 0.62rem 1.05rem;
    font: 800 0.85rem/1 inherit;
    color: #fff;
    /* Brand-green leans "completion / done"; #16a34a is the same green
       used elsewhere in opentuition (solution badges, etc.), so the
       slider lands inside the existing visual vocabulary. */
    background: #16a34a;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.35);
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ot-flashcard__known-btn:hover {
    background: #128a3e;
    box-shadow: 0 3px 8px rgba(22, 163, 74, 0.45);
}
.ot-flashcard__known-btn:active { transform: scale(0.96); }

.ot-flashcard__cta-inline {
    font-size: 0.7rem;
    color: var(--otfc-muted);
    pointer-events: none;
}

/* Admin-toggled "view only" mode: hide the green "I know this" button
   (and its inline hint) so the slider becomes a simple flip-and-browse
   reference deck with no progress tracking. The Restart link + counter
   "(N done)" annotation also become irrelevant — neither will show up
   because they're driven by the known-set, which stays empty. */
.ot-flashcards.is-no-known-btn .ot-flashcard__back-actions {
    /* Replace the row layout with a centered hint, mirroring the front
       face's CTA placement so the back doesn't look "missing" something. */
    display: block;
    text-align: center;
}
.ot-flashcards.is-no-known-btn .ot-flashcard__known-btn { display: none; }
.ot-flashcards.is-no-known-btn .ot-flashcard__cta-inline { font-size: 0.75rem; }

/* Counter "(N done)" annotation. Smaller + muted so it reads as a
   secondary stat alongside the main "X / Y" position. */
.ot-flashcards__counter-known {
    color: var(--otfc-muted);
    font-size: 0.8125rem;
    margin-left: 0.4em;
}

/* Restart link sits below the nav row, only shown after at least one
   card has been marked. Quiet text-link styling — the user has already
   committed to this deck; the restart isn't a primary action. */
.ot-flashcards__restart {
    text-align: center;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--otfc-muted);
}
.ot-flashcards__restart a {
    color: var(--otfc-muted);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.ot-flashcards__restart a:hover { color: var(--otfc-accent); }

/* Deck-complete: full takeover of the slider area when every card has
   been marked. Confetti emoji + headline + restart button. JS toggles
   the [hidden] attribute on .ot-flashcards__viewport and __nav to
   give this state the stage. */
.ot-flashcards__done {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--otfc-border);
    border-radius: var(--otfc-radius);
    background: var(--otfc-bg);
    box-shadow: var(--otfc-shadow);
}
.ot-flashcards__done-icon { font-size: 3rem; line-height: 1; }
.ot-flashcards__done-title {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--otfc-fg);
}
.ot-flashcards__done-text {
    margin: 0 0 1.25rem;
    color: var(--otfc-muted);
    font-size: 0.9375rem;
}
.ot-flashcards__done-btn {
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font: 600 0.9375rem/1 inherit;
    color: #fff;
    background: var(--otfc-accent);
    box-shadow: 0 2px 4px rgba(204, 0, 0, 0.3);
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ot-flashcards__done-btn:hover {
    background: #a30000;
    box-shadow: 0 3px 8px rgba(204, 0, 0, 0.4);
}
.ot-flashcards__done-btn:active { transform: scale(0.96); }

/*
 * Nav row: prev / counter / next.
 * Buttons are simple circular chevrons. Disabled state at edges of deck.
 */
.ot-flashcards__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.35rem;
}

.ot-flashcards__btn {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--otfc-border);
    border-radius: 50%;
    background: var(--otfc-bg);
    color: var(--otfc-blue);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.ot-flashcards__btn:hover:not(:disabled) {
    background: var(--otfc-accent);
    color: #fff;
    border-color: var(--otfc-accent);
}

.ot-flashcards__btn:active:not(:disabled) {
    transform: scale(0.95);
}

.ot-flashcards__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ot-flashcards__counter {
    min-width: 6rem;
    min-height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border: 1px solid var(--otfc-border);
    border-radius: 999px;
    background: var(--otfc-bg);
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--otfc-fg);
    font-size: 0.95rem;
    font-weight: 800;
}

/* Dark mode — opt in via [data-theme="dark"] on a parent (matches the
   theme's mode handshake in inc/dark-mode.php). Just retunes the palette;
   the layout is unchanged. */
[data-theme="dark"] .ot-flashcards {
    --otfc-bg: var(--ot-surface, var(--color-ot-bg, #1f2329));
    --otfc-bg-back: var(--ot-surface-soft, var(--color-ot-elev, #14171c));
    --otfc-fg: var(--ot-text, var(--color-ot-ink, #e5e7eb));
    --otfc-muted: var(--ot-muted, var(--color-ot-muted, #9aa0a6));
    --otfc-border: var(--ot-line, var(--color-ot-border, rgba(255, 255, 255, 0.08)));
    --otfc-shadow: var(--ot-shadow, 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4));
}

/* Mobile — slightly tighter padding. The card itself is fluid-width so
   the viewport breakpoint is the only change needed. */
@media (max-width: 600px) {
    .ot-flashcards {
        --otfc-min-height: clamp(500px, 68svh, 620px);
        max-width: min(350px, calc(100vw - 2rem));
    }
    .ot-flashcard__face {
        padding: 1.35rem 1.2rem 4rem;
    }
    .ot-flashcard__title {
        max-height: calc(var(--otfc-min-height) - 8.5rem);
        line-height: var(--otfc-title-line-height);
    }
    .ot-flashcard__body {
        font-size: 0.98rem;
        line-height: 1.58;
    }
    .ot-flashcard__back-actions {
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.9rem;
    }
    .ot-flashcards__nav {
        gap: 0.75rem;
        margin-top: 1rem;
    }
    .ot-flashcards__btn {
        width: 2.75rem;
        height: 2.75rem;
    }
    .ot-flashcards__counter {
        min-width: 5.4rem;
        padding: 0 0.75rem;
        font-size: 0.88rem;
    }
}

/* Respect users who've asked the OS to reduce motion. The flip becomes
   an instant face swap rather than a 0.55s rotation. */
@media (prefers-reduced-motion: reduce) {
    .ot-flashcard__inner {
        transition: none;
    }
}

/* Print: show both faces stacked so the deck is readable on paper. */
@media print {
    .ot-flashcards__nav { display: none; }
    .ot-flashcard { break-inside: avoid; page-break-inside: avoid; margin-bottom: 0.5rem; }
    .ot-flashcard[hidden] { display: block !important; }
    .ot-flashcard__inner { transform: none !important; }
    .ot-flashcard__face {
        position: static;
        backface-visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    .ot-flashcard__face--back {
        margin-top: 0.25rem;
    }
}