/* ==========================================================================
   Lab content — rendered LabStep.content_markdown / hint_text
   Output of the `lab_markdown` filter (labs/templatetags/lab_content.py),
   always wrapped in <div class="lab-prose">.

   Sizes are em-relative so the same markup works in the narrow session
   sidebar (~320-420px, small base font) and on wide detail/course pages.
   Tokens come from static/css/design-system.css (fallbacks inline).
   ========================================================================== */

.lab-prose {
    color: var(--text-secondary, #9CA3AF);
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
    line-height: 1.6;
    overflow-wrap: anywhere;
    min-width: 0;
}

.lab-prose > :first-child { margin-top: 0; }
.lab-prose > :last-child { margin-bottom: 0; }

/* ---- Text ------------------------------------------------------------- */
.lab-prose p {
    margin: 0 0 0.75em;
}

.lab-prose strong {
    color: var(--text-primary, #E5E7EB);
    font-weight: 600;
}

.lab-prose em { font-style: italic; }

.lab-prose a {
    color: var(--accent-cyan, #00FFFF);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lab-prose a:hover { text-decoration: none; }

.lab-prose h3,
.lab-prose h4 {
    font-family: var(--font-mono, 'Source Code Pro', Consolas, monospace);
    color: var(--text-primary, #E5E7EB);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.25em 0 0.5em;
}
.lab-prose h3 { font-size: 1.15em; }
.lab-prose h4 { font-size: 1em; }

.lab-prose hr {
    border: 0;
    border-top: 1px solid var(--border-color, #2a2f4a);
    margin: 1.25em 0;
}

.lab-prose blockquote {
    margin: 0 0 0.75em;
    padding: 0.5em 0.9em;
    border-left: 3px solid var(--border-color, #2a2f4a);
    color: var(--text-secondary, #9CA3AF);
    font-style: italic;
}

/* ---- Lists ------------------------------------------------------------ */
.lab-prose ul,
.lab-prose ol {
    margin: 0 0 0.75em;
    padding-left: 1.4em;
}
.lab-prose li { margin: 0.25em 0; }
.lab-prose li > ul,
.lab-prose li > ol { margin: 0.25em 0 0; }
.lab-prose li::marker { color: var(--text-dim, #6B7280); }
.lab-prose ol > li::marker {
    font-family: var(--font-mono, 'Source Code Pro', Consolas, monospace);
}

/* ---- Code ------------------------------------------------------------- */
.lab-prose code {
    font-family: var(--font-mono, 'Source Code Pro', Consolas, monospace);
    font-size: 0.9em;
    background: var(--bg-tertiary, #252a48);
    color: var(--accent-green, #00FF41);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm, 4px);
    overflow-wrap: anywhere;
}

.lab-prose pre {
    background: var(--darker-bg, #060a1f);
    border: 1px solid var(--border-color, #2a2f4a);
    border-radius: var(--radius, 6px);
    padding: 0.75em 0.9em;
    margin: 0 0 0.75em;
    overflow-x: auto;
    max-width: 100%;
    line-height: 1.5;
}
.lab-prose pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--text-primary, #E5E7EB);
    font-size: 0.88em;
    white-space: pre;
    overflow-wrap: normal;
}

/* ---- Tables ------------------------------------------------------------
   The renderer wraps every table in <div class="lc-table-wrap">, which
   scrolls horizontally; the table itself fills the wrapper when its content
   is narrower and grows past it (scrolling) when wider. */
.lab-prose .lc-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 0.75em;
}
.lab-prose table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.92em;
}
.lab-prose th,
.lab-prose td {
    border: 1px solid var(--border-color, #2a2f4a);
    padding: 0.4em 0.65em;
    text-align: left;
    vertical-align: top;
    overflow-wrap: normal;
}
.lab-prose th {
    background: var(--bg-tertiary, #252a48);
    color: var(--text-primary, #E5E7EB);
    font-family: var(--font-mono, 'Source Code Pro', Consolas, monospace);
    font-weight: 700;
    white-space: nowrap;
}
.lab-prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.lab-prose th[align="center"], .lab-prose td[align="center"] { text-align: center; }
.lab-prose th[align="right"], .lab-prose td[align="right"] { text-align: right; }

/* ---- Callouts --------------------------------------------------------- */
.lab-prose .lc-callout {
    --lc-callout-accent: var(--accent-cyan, #00FFFF);
    --lc-callout-tint: rgba(0, 255, 255, 0.07);
    background: var(--lc-callout-tint);
    border: 1px solid var(--border-color, #2a2f4a);
    border-left: 3px solid var(--lc-callout-accent);
    border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0;
    padding: 0.75em 0.9em;
    margin: 0 0 1em;
    color: var(--text-primary, #E5E7EB);
}
.lab-prose .lc-callout > :first-child { margin-top: 0; }
.lab-prose .lc-callout > :last-child { margin-bottom: 0; }
.lab-prose .lc-callout h3,
.lab-prose .lc-callout h4 { color: var(--lc-callout-accent); }

.lab-prose .lc-callout-objectives {
    --lc-callout-accent: var(--accent-green, #00FF41);
    --lc-callout-tint: rgba(0, 255, 65, 0.06);
    background: linear-gradient(135deg, rgba(0, 255, 65, 0.08), rgba(0, 255, 255, 0.03));
}
.lab-prose .lc-callout-info {
    --lc-callout-accent: var(--accent-cyan, #00FFFF);
    --lc-callout-tint: rgba(0, 255, 255, 0.07);
}
.lab-prose .lc-callout-success {
    --lc-callout-accent: var(--accent-green, #00FF41);
    --lc-callout-tint: rgba(0, 255, 65, 0.07);
}
.lab-prose .lc-callout-warning {
    --lc-callout-accent: var(--accent-yellow, #FFD93D);
    --lc-callout-tint: rgba(255, 217, 61, 0.08);
}
.lab-prose .lc-callout-danger {
    --lc-callout-accent: var(--accent-red, #FF4757);
    --lc-callout-tint: rgba(255, 71, 87, 0.08);
}

/* ---- Neutral panel ---------------------------------------------------- */
.lab-prose .lc-panel {
    background: var(--bg-secondary, #1a1f3a);
    border: 1px solid var(--border-color, #2a2f4a);
    border-radius: var(--radius-lg, 8px);
    padding: 0.75em 0.9em;
    margin: 0 0 1em;
}
.lab-prose .lc-panel > :first-child { margin-top: 0; }
.lab-prose .lc-panel > :last-child { margin-bottom: 0; }
/* Panels sit on --bg-secondary already; lift nested code one step */
.lab-prose .lc-panel code { background: var(--bg-elevated, #2d325a); }
.lab-prose .lc-panel pre code { background: transparent; }

/* ---- Card grid -------------------------------------------------------- */
/* min(100%, 13rem) collapses to one column in the narrow session sidebar */
.lab-prose .lc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.75em;
    margin: 0 0 1em;
}
.lab-prose .lc-card {
    background: var(--bg-secondary, #1a1f3a);
    border: 1px solid var(--border-color, #2a2f4a);
    border-radius: var(--radius-lg, 8px);
    padding: 0.75em 0.9em;
    min-width: 0;
}
.lab-prose .lc-card > :first-child { margin-top: 0; }
.lab-prose .lc-card > :last-child { margin-bottom: 0; }
.lab-prose .lc-card p { font-size: 0.95em; }
/* A leading emoji/icon paragraph sits directly on top of the card heading */
.lab-prose .lc-card > p:first-child { margin-bottom: 0; }
.lab-prose .lc-card > p:first-child + h3,
.lab-prose .lc-card > p:first-child + h4 { margin-top: 0.25em; }

/* Callouts used as grid cells (e.g. DO / DON'T columns) */
.lab-prose .lc-grid > .lc-callout {
    margin: 0;
    min-width: 0;
}

/* ---- Completion hero -------------------------------------------------- */
.lab-prose .lc-hero {
    text-align: center;
    padding: 1.25em 0.75em;
    margin: 0 0 1em;
}
.lab-prose .lc-hero > :last-child { margin-bottom: 0; }
.lab-prose .lc-hero h3,
.lab-prose .lc-hero h4 {
    color: var(--accent-green, #00FF41);
    font-size: 1.3em;
    margin-top: 0.25em;
}
.lab-prose .lc-hero p { color: var(--text-secondary, #9CA3AF); }
.lab-prose .lc-hero-icon {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 0.25em;
}

/* ---- Accent headings & dim text --------------------------------------- */
.lab-prose .lc-accent-cyan   { color: var(--accent-cyan, #00FFFF); }
.lab-prose .lc-accent-green  { color: var(--accent-green, #00FF41); }
.lab-prose .lc-accent-purple { color: var(--accent-purple-bright, #8B5CF6); }
.lab-prose .lc-accent-yellow { color: var(--accent-yellow, #FFD93D); }
.lab-prose .lc-accent-red    { color: var(--accent-red, #FF4757); }

.lab-prose .lc-text-dim { color: var(--text-dim, #6B7280); }

/* ---- Hint variant (hint_text rendered through the same filter) -------- */
.lab-prose.lab-prose-hint { color: inherit; }
.lab-prose.lab-prose-hint p:last-child { margin-bottom: 0; }

/* ---- Narrow containers (sidebar on small screens) --------------------- */
@media (max-width: 480px) {
    .lab-prose .lc-callout,
    .lab-prose .lc-panel,
    .lab-prose .lc-card { padding: 0.6em 0.7em; }
    .lab-prose ul,
    .lab-prose ol { padding-left: 1.2em; }
}