/* Shared styles for exam and reading list pages */
:is(.exam-container, .reading-container) .stats-box {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
}

:is(.exam-container, .reading-container) .stat-item {
    text-align: center;
    color: white;
}

:is(.exam-container, .reading-container) .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

:is(.exam-container, .reading-container) .search-box input {
    padding-left: 40px;
    border-radius: 25px;
}

:is(.exam-container, .reading-container) .progress {
    height: 8px;
    border-radius: 10px;
    background: #e9ecef;
}

:is(.exam-container, .reading-container) .progress-bar {
    border-radius: 10px;
}

.exam-container .card-actions,
.reading-container .card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

/* ============================================================
   Motion utility helpers — opt-in via class.
   Pair with motion tokens defined in app.css (--motion-*, --ease-*).
   See plan: master-prompt-aptis-platform-expressive-nest.md (Week 1).
============================================================ */

/* Hover lift — subtle 2px raise, used for cards and interactive list items */
.u-hover-lift {
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.u-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Press feedback — physical click sensation */
.u-press {
    transition: transform var(--motion-instant) var(--ease-out);
}
.u-press:active {
    transform: scale(0.97);
}

/* Skeleton shimmer — apply to placeholder blocks while loading */
@keyframes u-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.u-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-muted, #F1EFE8) 25%,
        rgba(255, 255, 255, 0.5) 50%,
        var(--bg-muted, #F1EFE8) 75%
    );
    background-size: 200% 100%;
    animation: u-shimmer 1.5s var(--ease-linear) infinite;
    border-radius: var(--radius-md);
}

/* Submit-ready breathing — pulsing CTA when user has completed prerequisites */
@keyframes u-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 111, 104, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(31, 111, 104, 0);
    }
}
.u-breathe {
    animation: u-breathe 1.6s var(--ease-in-out) infinite;
}

/* Streak pulse — single-shot bump when value increases (add via JS, auto-removes after 400ms) */
@keyframes u-pulse-once {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.u-pulsed {
    animation: u-pulse-once 400ms var(--ease-spring);
}

/* Stagger entry — pair with inline style="--i: N" on each child (0,1,2,...) */
@keyframes u-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.u-stagger > * {
    opacity: 1;
    animation: u-fade-up var(--motion-base) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * var(--stagger-base));
}

/* Pop-in — for badges/icons appearing after parent settles */
@keyframes u-pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.u-pop-in {
    animation: u-pop-in var(--motion-base) var(--ease-spring) both;
}

/* Drawer / dropdown / toast helpers — use with .is-open toggling */
.u-fade-in {
    animation: u-fade-up var(--motion-base) var(--ease-out) both;
}

/* ============================================================
   Lucide icon layout helpers
   By default svg.lucide is display:block (see app.css).
   Use these helpers for inline/row icon+text layouts.
============================================================ */

/* Icon + text row — wrap both in this for proper alignment */
.icon-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Inline icon that sits on text baseline (e.g. inside <p> or <span>) */
.lucide-inline {
    display: inline-block !important;
    vertical-align: -0.15em;
    line-height: 0;
    flex-shrink: 0;
}