/* ConjuLab: Le Trainer — design system (mobile-first) */

.conjulab-trainer {
    --clt-blue: #0A2D57;
    --clt-blue-2: #1e40af;
    --clt-accent: #2563eb;
    --clt-accent-soft: #eff6ff;
    --clt-green: #10b981;
    --clt-green-soft: #ecfdf5;
    --clt-red: #ef4444;
    --clt-red-soft: #fef2f2;
    --clt-amber: #f59e0b;
    --clt-amber-soft: #fffbeb;
    --clt-violet: #7c3aed;
    --clt-violet-soft: #f5f3ff;
    --clt-border: rgba(10, 45, 87, 0.08);
    --clt-shadow-sm: 0 1px 2px rgba(10, 45, 87, 0.06);
    --clt-shadow: 0 12px 28px -14px rgba(10, 45, 87, 0.28), 0 2px 8px rgba(10, 45, 87, 0.06);
    --clt-radius-lg: 1.5rem;
    --clt-radius-md: 1rem;
    position: relative;
}

@keyframes conjulabPop { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes cltFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.conjulab-trainer .vct-correct { border-color: var(--clt-green) !important; background: var(--clt-green-soft) !important; color: #047857 !important; animation: conjulabPop .3s ease; }
.conjulab-trainer .vct-wrong   { border-color: var(--clt-red) !important; background: var(--clt-red-soft) !important; color: #b91c1c !important; animation: conjulabPop .3s ease; }

.conjulab-trainer .vct-mode:disabled { opacity: .6; pointer-events: none; }
.conjulab-trainer .vct-verb:focus-visible,
.conjulab-trainer .vct-tense:focus-visible,
.conjulab-trainer .vct-mode:focus-visible,
.conjulab-trainer button:focus-visible { outline: 2px solid var(--clt-accent); outline-offset: 2px; }

/* ── Base card shell — replaces flat borders with soft elevation ───────── */
.conjulab-trainer .clt-card {
    background: #fff;
    border: 1px solid var(--clt-border);
    border-radius: var(--clt-radius-lg);
    box-shadow: var(--clt-shadow);
    animation: cltFadeUp .35s ease both;
}

/* ── Mobile stepper (navigation repensée) ──────────────────────────────── */
.conjulab-trainer .clt-mobile-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}
.conjulab-trainer .clt-step-btn {
    min-height: 3rem;
    border-radius: .95rem;
    border: 1px solid #dbe2ee;
    background: #f8fafc;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: all .18s ease;
}
.conjulab-trainer .clt-step-btn .clt-step-num {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #dbe2ee;
    font-size: .68rem;
    color: #64748b;
}
.conjulab-trainer .clt-step-btn.is-active {
    background: linear-gradient(135deg, var(--clt-accent-soft), #fff);
    border-color: #93c5fd;
    color: var(--clt-blue);
    box-shadow: var(--clt-shadow-sm);
}
.conjulab-trainer .clt-step-btn.is-active .clt-step-num {
    background: var(--clt-blue);
    border-color: var(--clt-blue);
    color: #fff;
}
.conjulab-trainer .clt-step-btn.is-done {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}
.conjulab-trainer .clt-step-btn.is-done .clt-step-num {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.conjulab-trainer .clt-step-btn.is-disabled {
    opacity: .55;
}

/* ── Small icon badges used next to headings ───────────────────────────── */
.conjulab-trainer .clt-icon-badge {
    width: 2.1rem; height: 2.1rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: var(--clt-accent-soft);
    color: var(--clt-accent);
    font-size: .95rem;
}
.conjulab-trainer .clt-icon-btn {
    width: 2.25rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: #f3f4f6; color: #4b5563;
    border: 0; transition: background-color .15s ease, color .15s ease, transform .15s ease;
    flex: none;
}
.conjulab-trainer .clt-icon-btn:hover { background: var(--clt-accent-soft); color: var(--clt-accent); }
.conjulab-trainer .clt-icon-btn:active { transform: scale(.92); }

/* ── Pills (tense / timer / streak / level) ────────────────────────────── */
.conjulab-trainer .clt-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .75rem; font-weight: 700;
    padding: .3rem .7rem; border-radius: 9999px; white-space: nowrap;
    line-height: 1.1;
}
.conjulab-trainer .clt-pill-blue   { background: var(--clt-accent-soft); color: var(--clt-blue); }
.conjulab-trainer .clt-pill-neutral{ background: #f3f4f6; color: #4b5563; }
.conjulab-trainer .clt-pill-amber  { background: var(--clt-amber-soft); color: #b45309; }
.conjulab-trainer .clt-pill-green  { background: var(--clt-green-soft); color: #047857; }
.conjulab-trainer .clt-pill-violet { background: var(--clt-violet-soft); color: #6d28d9; }
.conjulab-trainer .clt-pill:empty  { display: none; }

.conjulab-trainer .clt-level-a1 { background: var(--clt-green-soft); color: #047857; }
.conjulab-trainer .clt-level-a2 { background: var(--clt-accent-soft); color: var(--clt-blue); }
.conjulab-trainer .clt-level-b1 { background: var(--clt-violet-soft); color: #6d28d9; }

/* ── Tense list (step 1) ────────────────────────────────────────────────── */
.conjulab-trainer .vct-tense {
    position: relative;
    box-shadow: var(--clt-shadow-sm);
}
.conjulab-trainer .vct-tense .clt-tense-icon {
    width: 2.5rem; height: 2.5rem; flex: none; border-radius: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clt-accent-soft); color: var(--clt-accent); font-size: 1.05rem;
    transition: transform .15s ease;
}
.conjulab-trainer .vct-tense.clt-active .clt-tense-icon { background: var(--clt-blue); color: #fff; }
.conjulab-trainer .vct-tense:active { transform: scale(.985); }

/* ── Segmented control (answering mode) ────────────────────────────────── */
.conjulab-trainer .clt-segmented {
    display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
    background: #f3f4f6; border-radius: 9999px; padding: .3rem;
    max-width: 26rem; margin: 0 auto;
}
.conjulab-trainer .vct-mode {
    border: 0 !important; border-radius: 9999px !important;
    padding-top: .6rem; padding-bottom: .6rem;
}
.conjulab-trainer .vct-mode.clt-on { background: #fff !important; color: var(--clt-blue) !important; box-shadow: var(--clt-shadow-sm); }
.conjulab-trainer .vct-mode.clt-off { background: transparent !important; color: #6b7280 !important; }

/* ── Horizontal scrollable chip row (verb group filter) ────────────────── */
.conjulab-trainer .clt-chip-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
}
.conjulab-trainer .clt-chip-row::-webkit-scrollbar { display: none; }
.conjulab-trainer .vct-group { flex: none; }

.conjulab-trainer #vct-verb-search::placeholder { color: #94a3b8; }

/* ── Verb grid (chips instead of full-width rows → less scroll) ────────── */
.conjulab-trainer .vct-verb {
    flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; text-align: center; padding: .85rem .5rem;
    box-shadow: var(--clt-shadow-sm);
}
.conjulab-trainer .vct-verb i { display: none; }
.conjulab-trainer .vct-verb:active { transform: scale(.96); }

/* ── Random-verbs highlight button ─────────────────────────────────────── */
.conjulab-trainer #vct-random {
    background: linear-gradient(135deg, var(--clt-accent-soft) 0%, #fff 100%);
    box-shadow: var(--clt-shadow-sm);
}
.conjulab-trainer #vct-random .clt-icon-badge { background: linear-gradient(135deg, var(--clt-accent) 0%, var(--clt-blue) 100%); color: #fff; width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }

/* ── Game screen: progress bar ──────────────────────────────────────────── */
.conjulab-trainer .clt-progress-track {
    width: 100%; height: .45rem; border-radius: 9999px;
    background: #eef1f6; overflow: hidden;
}
.conjulab-trainer .clt-progress-fill {
    height: 100%; border-radius: 9999px;
    background: linear-gradient(90deg, var(--clt-accent), var(--clt-blue));
    transition: width .35s ease;
}

/* ── Pronoun focus card ─────────────────────────────────────────────────── */
.conjulab-trainer .clt-pronoun-card {
    background: linear-gradient(180deg, var(--clt-accent-soft) 0%, rgba(239,246,255,0) 100%);
    border-radius: var(--clt-radius-md);
    padding: 1.4rem 1rem 1.1rem;
}

/* ── MCQ options: 2-column grid + lettered badges ──────────────────────── */
.conjulab-trainer #vct-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conjulab-trainer .vct-opt {
    position: relative;
    padding-left: 2.6rem !important;
    min-height: 3.4rem;
    box-shadow: var(--clt-shadow-sm);
    text-align: left;
}
.conjulab-trainer .vct-opt::before {
    position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
    width: 1.5rem; height: 1.5rem; border-radius: 9999px;
    background: #fff; border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800; color: #6b7280;
}
.conjulab-trainer .vct-opt:nth-of-type(1)::before { content: "A"; }
.conjulab-trainer .vct-opt:nth-of-type(2)::before { content: "B"; }
.conjulab-trainer .vct-opt:nth-of-type(3)::before { content: "C"; }
.conjulab-trainer .vct-opt:nth-of-type(4)::before { content: "D"; }
.conjulab-trainer .vct-opt:active { transform: scale(.97); }
.conjulab-trainer .vct-correct::before { content: "\2713"; background: var(--clt-green); border-color: var(--clt-green); color: #fff; }
.conjulab-trainer .vct-wrong::before   { content: "\2715"; background: var(--clt-red); border-color: var(--clt-red); color: #fff; }

@media (max-width: 380px) {
    .conjulab-trainer #vct-options { grid-template-columns: 1fr; }
}

/* ── Feedback banner ────────────────────────────────────────────────────── */
.conjulab-trainer .clt-feedback-ok,
.conjulab-trainer .clt-feedback-bad {
    border-radius: var(--clt-radius-md);
    padding: .85rem 1rem;
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .9rem;
}
.conjulab-trainer .clt-feedback-ok  { background: var(--clt-green-soft); color: #047857; font-weight: 700; }
.conjulab-trainer .clt-feedback-bad { background: var(--clt-red-soft); color: #991b1b; }
.conjulab-trainer .clt-feedback-bad strong { color: #b91c1c; }
.conjulab-trainer .clt-feedback-bad .clt-note { display: block; margin-top: .3rem; color: #7f1d1d; opacity: .8; font-weight: 400; }

/* ── Primary / ghost buttons ────────────────────────────────────────────── */
.conjulab-trainer .clt-btn-primary {
    background: linear-gradient(135deg, var(--clt-blue) 0%, var(--clt-blue-2) 100%) !important;
    box-shadow: 0 10px 20px -8px rgba(10, 45, 87, .45);
    border: 0 !important;
}
.conjulab-trainer .clt-btn-primary:active { transform: scale(.985); }
.conjulab-trainer a.clt-end-cta,
.conjulab-trainer a.clt-end-cta:hover,
.conjulab-trainer a.clt-end-cta:focus { color: #fff !important; text-decoration: none !important; }
.conjulab-trainer a.clt-end-cta-low { background: #16a34a !important; }
.conjulab-trainer a.clt-end-cta-low:hover { background: #15803d !important; }

.conjulab-trainer .clt-action-dock {
    display: grid;
    gap: .6rem;
}

/* ── Accent quick-insert row ────────────────────────────────────────────── */
.conjulab-trainer #vct-accent-row .vct-accent { box-shadow: var(--clt-shadow-sm); }

/* ── End screen: score ring ─────────────────────────────────────────────── */
.conjulab-trainer .clt-score-ring {
    --pct: 0;
    width: 8.5rem; height: 8.5rem; border-radius: 50%;
    background: conic-gradient(var(--clt-green) calc(var(--pct) * 1%), #edf0f5 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.conjulab-trainer .clt-score-ring::before {
    content: ""; position: absolute; inset: .55rem;
    background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--clt-border);
}
.conjulab-trainer .clt-score-ring > * { position: relative; z-index: 1; }

/* ── Leaderboard: card rows on mobile instead of a cramped table ───────── */
@media (max-width: 640px) {
    .conjulab-trainer #vct-board-table table,
    .conjulab-trainer #vct-board-table thead,
    .conjulab-trainer #vct-board-table tbody,
    .conjulab-trainer #vct-board-table th,
    .conjulab-trainer #vct-board-table td,
    .conjulab-trainer #vct-board-table tr { display: block; width: 100%; }
    .conjulab-trainer #vct-board-table thead { display: none; }
    .conjulab-trainer #vct-board-table tr {
        border: 1px solid var(--clt-border); border-radius: var(--clt-radius-md);
        padding: .65rem .9rem; margin-bottom: .6rem; background: #fff !important;
        box-shadow: var(--clt-shadow-sm);
    }
    .conjulab-trainer #vct-board-table td {
        display: flex; align-items: center; justify-content: space-between;
        padding: .25rem 0 !important; border: 0 !important;
    }
    .conjulab-trainer #vct-board-table td[data-label]::before {
        content: attr(data-label);
        font-size: .68rem; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; color: #9ca3af;
    }
    .conjulab-trainer #vct-board-table td.clt-rank { justify-content: flex-start; gap: .5rem; font-size: 1rem; }
    .conjulab-trainer #vct-board-table td.clt-rank::before { content: none; }
}

/* ── Mobile: parcours en étapes — (1) Choose a tense, puis (2) How to practise ──
   Sur desktop (>= lg) rien ne change : temps à gauche + contenu à droite. */
.conjulab-trainer .clt-back { display: none; }

@media (max-width: 1023px) {
    .conjulab-trainer.clt-step-tense #vct-main { display: none !important; }
    .conjulab-trainer.clt-step-verbs #vct-side { display: none !important; }
    .conjulab-trainer.clt-step-verbs .clt-back { display: inline-flex; }
    .conjulab-trainer #vct-side,
    .conjulab-trainer #vct-main { min-height: 0; }

    .conjulab-trainer .clt-mobile-steps {
        position: sticky;
        top: 5rem;
        z-index: 6;
        background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 100%);
        backdrop-filter: blur(6px);
        border: 1px solid var(--clt-border);
        border-radius: .95rem;
        padding: .4rem;
    }
}

/* ── Mobile spacing: tighten so the game fits with less scrolling ──────── */
@media (max-width: 640px) {
    .conjulab-trainer .clt-card { border-radius: 1.25rem; }
    .conjulab-trainer #vct-game,
    .conjulab-trainer #vct-setup-verbs,
    .conjulab-trainer #vct-end { padding: 1.1rem 1rem 1.4rem; }
    .conjulab-trainer #vct-pronoun { font-size: 2.1rem; }

    .conjulab-trainer .clt-action-dock {
        position: sticky;
        bottom: .55rem;
        z-index: 5;
        background: rgba(255,255,255,.92);
        border: 1px solid var(--clt-border);
        border-radius: .9rem;
        padding: .5rem;
        backdrop-filter: blur(6px);
    }

    /* Extra bottom room so the sticky action dock clears theme floating buttons */
    .conjulab-trainer #vct-game { padding-bottom: 5.2rem; }
}

/* ── Leaderboard pagination ────────────────────────────────────────────── */
.conjulab-trainer .clt-pager {
    align-items: center;
    display: flex;
    gap: .8rem;
    justify-content: center;
    margin-top: 1.1rem;
}

.conjulab-trainer .clt-pager.is-hidden { display: none; }
.conjulab-trainer .clt-pager .clt-icon-btn.is-disabled { opacity: .35; pointer-events: none; }

.conjulab-trainer .clt-pager-label {
    color: #6b7280;
    font-size: .8rem;
    font-weight: 700;
    min-width: 6rem;
    text-align: center;
}