/* =============================================
   Notion-style Design System
   ============================================= */

/* ── Animation 1/3: Card staggered fade-in ── */
@keyframes cardFadeIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.card-stagger {
    animation: cardFadeIn 0.35s ease-out both;
    animation-delay: var(--stagger-delay, 0ms);
}

/* ── Animation 2/3: Skeleton shimmer ── */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ── Animation 3/3: Toast slide up ── */
@keyframes toastIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Custom scrollbar (subtle) ── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}
.dark ::-webkit-scrollbar-thumb {
    background: #404040;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ── Notion-style course card ── */
.notion-card {
    background: #ffffff;
    border: 1px solid #e3e2de;
    border-radius: 8px;
    padding: 20px 22px;
    transition: background-color 0.15s ease;
}
.notion-card:hover {
    background: #fafaf8;
}
.dark .notion-card {
    background: #252525;
    border-color: #333333;
}
.dark .notion-card:hover {
    background: #2a2a2a;
}

/* ── Notion-style tag chips ── */
.notion-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

/* Tag colors — Notion palette (muted, low-contrast backgrounds) */
.tag-indigo {
    background: #eae4f2;
    color: #6940a5;
}
.dark .tag-indigo {
    background: rgba(105, 64, 165, 0.18);
    color: #b39ddb;
}

.tag-sky {
    background: #d3edf6;
    color: #2374ab;
}
.dark .tag-sky {
    background: rgba(46, 170, 220, 0.15);
    color: #7ec8e3;
}

.tag-cyan {
    background: #d3edf6;
    color: #0f7b6c;
}
.dark .tag-cyan {
    background: rgba(15, 123, 108, 0.15);
    color: #66c2a5;
}

.tag-violet {
    background: #eae4f2;
    color: #6940a5;
}
.dark .tag-violet {
    background: rgba(105, 64, 165, 0.18);
    color: #b39ddb;
}

.tag-orange {
    background: #fadec9;
    color: #d9730d;
}
.dark .tag-orange {
    background: rgba(217, 115, 13, 0.15);
    color: #e8a862;
}

.tag-teal {
    background: #dbeddb;
    color: #0f7b6c;
}
.dark .tag-teal {
    background: rgba(15, 123, 108, 0.15);
    color: #66c2a5;
}

.tag-purple {
    background: #eae4f2;
    color: #6940a5;
}
.dark .tag-purple {
    background: rgba(105, 64, 165, 0.18);
    color: #b39ddb;
}

.tag-emerald {
    background: #dbeddb;
    color: #0f7b6c;
}
.dark .tag-emerald {
    background: rgba(15, 123, 108, 0.15);
    color: #66c2a5;
}

.tag-rose {
    background: #fbe4e4;
    color: #eb5757;
}
.dark .tag-rose {
    background: rgba(235, 87, 87, 0.15);
    color: #f09898;
}

.tag-amber {
    background: #fadec9;
    color: #d9730d;
}
.dark .tag-amber {
    background: rgba(217, 115, 13, 0.15);
    color: #e8a862;
}

/* Low-confidence tag: dashed border, reduced opacity */
.tag-low-confidence {
    opacity: 0.6;
    border: 1px dashed currentColor;
}

/* ── Skeleton loading (Notion-style) ── */
.skeleton-card {
    border-radius: 8px;
    padding: 20px 22px;
    background: #f7f7f5;
    border: 1px solid #e3e2de;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dark .skeleton-card {
    background: #252525;
    border-color: #333;
}

.skeleton-block {
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        #ebebea 25%,
        #f5f5f4 50%,
        #ebebea 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}
.dark .skeleton-block {
    background: linear-gradient(
        90deg,
        #2f2f2f 25%,
        #383838 50%,
        #2f2f2f 75%
    );
    background-size: 200% 100%;
}

.skeleton-line-h    { height: 20px; }
.skeleton-line-sm   { height: 12px; }
.skeleton-line-body { height: 48px; }
.skeleton-tag       { height: 22px; width: 56px; border-radius: 4px; }
.skeleton-tags-row  { display: flex; gap: 6px; }

/* ── Filter chip (selected state) — used by JS ── */
.filter-chip-active {
    background: #d3edf6 !important;
    color: #2374ab !important;
    border-color: #a8d8ea !important;
}
.dark .filter-chip-active {
    background: rgba(46, 170, 220, 0.18) !important;
    color: #7ec8e3 !important;
    border-color: rgba(46, 170, 220, 0.3) !important;
}

/* ── Score accent ── */
.score-accent {
    color: #2eaadc;
    font-weight: 700;
}
.dark .score-accent {
    color: #5cb8d6;
}