/* LearnSlides base CSS — injected into all slides for consistency.
   Loaded FIRST so lecture inline styles can still override. */

:root {
    --accent-blue: #61afef;
    --accent-green: #98c379;
    --accent-yellow: #e5c07b;
    --accent-red: #e06c75;
    --accent-purple: #c678dd;
    --accent-cyan: #56b6c2;
}

/* Consistent heading sizes */
.reveal h1 { font-size: 1.8em; }
.reveal h2 { font-size: 1.3em; color: var(--accent-blue); }
.reveal h3 { font-size: 1.1em; }

/* Consistent box components — colors as low-specificity defaults */
.reveal .highlight-box,
.reveal .warning-box,
.reveal .success-box,
.reveal .principle-box,
.reveal .equation-box {
    font-size: 0.82em;
    padding: 12px 15px;
    border-radius: 6px;
}
.reveal .highlight-box {
    background: rgba(97, 175, 239, 0.12);
    border-left: 3px solid var(--accent-blue);
}
.reveal .warning-box {
    background: rgba(224, 108, 117, 0.12);
    border-left: 3px solid var(--accent-red);
}
.reveal .success-box {
    background: rgba(152, 195, 121, 0.12);
    border-left: 3px solid var(--accent-green);
}
.reveal .principle-box {
    background: rgba(198, 120, 221, 0.12);
    border-left: 3px solid var(--accent-purple);
}
.reveal .equation-box {
    background: rgba(86, 182, 194, 0.08);
    border-left: 3px solid var(--accent-cyan);
}

/* Layout utilities */
.reveal .two-column {
    display: flex;
    gap: 2em;
    align-items: flex-start;
}
.reveal .two-column > * { flex: 1; }
.reveal .three-column {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}
.reveal .three-column > * { flex: 1; }

/* Typography helpers */
.reveal .small-text { font-size: 0.75em; }
.reveal .tiny-text { font-size: 0.6em; }
.reveal .keyword {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Code blocks */
.reveal pre {
    width: 100%;
    max-height: 420px;
}
.reveal pre code {
    font-size: 0.7em;
    line-height: 1.4;
}

/* List density */
.reveal li {
    font-size: 0.88em;
    line-height: 1.5;
}

/* Scrollbar styling for slides that opt in (e.g. .mcq-slide, .open-slide) */
.reveal .slides section::-webkit-scrollbar {
    width: 4px;
}
.reveal .slides section::-webkit-scrollbar-thumb {
    background: rgba(139, 148, 158, 0.3);
    border-radius: 2px;
}

/* Slide toolbar — stacked buttons top-right */
.ls-toolbar {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mobile: reduce layout utilities to stack */
@media (max-width: 768px) {
    .reveal .two-column,
    .reveal .three-column {
        flex-direction: column;
        gap: 1em;
    }
    .ls-toolbar {
        top: 10px;
        right: 10px;
        gap: 6px;
    }
}