/* ============================================================
   Learning platform design layer ("lp-" prefix).
   Loaded on PUBLIC_SITE deployments only (base.html), which
   render dark ([data-bs-theme="dark"]). Values come from the
   SmartCVI design tokens (static/css/tokens.css).
   Principles: one primary action per screen, progressive
   disclosure, subtle motion (disabled for body.reduce-motion
   and prefers-reduced-motion).
   ============================================================ */

/* ---- Cards ------------------------------------------------ */
.lp-card {
    position: relative;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.lp-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}
.lp-card-locked { filter: grayscale(0.7); opacity: 0.75; }
.lp-card-locked:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-subtle);
}

.lp-lock-overlay {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(33, 37, 41, 0.75);
    color: var(--gray-0);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Thumbnails ------------------------------------------- */
.lp-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #10161d;
}
.lp-thumb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--gray-400);
    background: linear-gradient(135deg, #16202b 0%, #263646 100%);
    font-size: var(--fs-2xs);
    letter-spacing: 0.15em;
}
.lp-thumb-placeholder .bi { font-size: 1.6rem; letter-spacing: 0; }

/* ---- Progress bars ---------------------------------------- */
.lp-progress {
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--progress-track);
    overflow: hidden;
}
.lp-progress > .lp-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--progress-fill-a), var(--progress-fill-b));
    transition: width var(--dur-slow) var(--ease-standard);
}
.lp-progress-label { font-size: 0.8rem; color: var(--text-muted); }

/* ---- Stars ------------------------------------------------- */
.lp-stars { color: var(--star); white-space: nowrap; }
.lp-stars .bi-star { color: var(--star-empty); }
.lp-stars-lg { font-size: 1.25rem; }

/* ---- Chapter hero (chapter page header) -------------------- */
.lp-hero {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
}
.lp-hero .lp-thumb {
    width: 220px;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 10;
}

/* ---- Stat tiles (progress page) ----------------------------- */
.lp-stat {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    text-align: center;
    padding: 1rem 0.5rem;
    background: var(--surface-card);
}
.lp-stat .lp-stat-value {
    font-size: 1.9rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--text-strong);
}
.lp-stat .lp-stat-label { color: var(--text-muted); font-size: 0.85rem; }

/* ---- Assessment verdict --------------------------------------- */
.lp-ai-verdict-text { font-size: var(--fs-lg); line-height: var(--lh-normal); }

/* ---- Attempt header (report form) ---------------------------- */
.lp-attempt-header {
    background: linear-gradient(90deg, #16202b, #263646);
    color: #e8eef4;
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.9rem;
    margin: 0.5rem 0;
}
.lp-attempt-header .lp-attempt-title .bi { color: var(--star); margin-right: 0.35rem; }

/* ---- Launch panel (case page) -------------------------------- */
.lp-launch-options { display: flex; flex-direction: column; gap: 0.5rem; }
.lp-launch-option {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 0;
    transition: background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.lp-launch-option:hover { background: var(--surface-raised); }
.lp-launch-option:has(input:checked) {
    border-color: var(--green-500);
    background: rgba(28, 143, 110, 0.12);
}
.lp-launch-option input {
    margin-top: 0.3rem;
    flex: 0 0 auto;
    accent-color: var(--green-500);
}
.lp-launch-option small { display: block; color: var(--text-muted); }

/* ---- Achievement chips -------------------------------------- */
.lp-achievement {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    border: 1px solid rgba(242, 201, 76, 0.35);
    border-radius: var(--radius-pill);
    background: rgba(242, 201, 76, 0.10);
    max-width: 100%;
}
.lp-achievement-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--star);
    color: #5c4400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.lp-achievement-title {
    display: block;
    font-weight: var(--fw-semibold);
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--text-strong);
}
.lp-achievement-desc { display: block; font-size: 0.75rem; color: var(--text-muted); }
.lp-achievement-locked { filter: grayscale(1); opacity: 0.5; }

/* ---- Empty states ------------------------------------------ */
.lp-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    background: transparent;
}
.lp-empty .bi { font-size: 2rem; display: block; margin-bottom: 0.5rem; }

/* ---- Soft badges (dark surfaces) ----------------------------
   One shape, per the DS Badge spec (fs 11px, .28em/.55em padding,
   semibold, 2px radius) — keep in sync with marketing.css. */
.badge-soft-success,
.badge-soft-primary,
.badge-soft-warning,
.badge-soft-danger {
    border-radius: var(--radius-xs);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    padding: 0.28em 0.55em;
}
.badge-soft-success {
    background: rgba(25, 135, 84, 0.18);
    color: var(--success-fg);
}
.badge-soft-primary {
    background: var(--accent-weak);
    color: var(--blue-300);
}
.badge-soft-warning {
    background: rgba(230, 168, 23, 0.18);
    color: var(--warning-deep);
}
.badge-soft-danger {
    background: rgba(220, 53, 69, 0.18);
    color: var(--danger-fg);
}

/* ---- Mono values (comparison tables) ------------------------ */
.lp-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---- Motion preferences ------------------------------------ */
body.reduce-motion .lp-card,
body.reduce-motion .lp-launch-option,
body.reduce-motion .lp-progress > .lp-progress-fill { transition: none; }
body.reduce-motion .lp-card:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-card, .lp-launch-option, .lp-progress > .lp-progress-fill { transition: none; }
    .lp-card:hover { transform: none; }
}