/* =============================================================
courses.css — shared styles for every /courses/ page
Includes ALL classes used across Python hub, install guide,
and lesson pages. Do NOT duplicate in page <style>.
============================================================= */

body { font-family: 'Inter', sans-serif; }
header.p-5 { padding: 0; }

/* -------------------------------------------------------------
THEME TOKENS
------------------------------------------------------------- */
:root {
--py-blue: #3776AB;
--py-blue-lt: #4B8BBE;
--py-yellow: #FFD43B;
--py-yellow-dk: #FFC107;

--bg: #0b1220;
--bg-alt: #0f172a;
--surface: #111c2f;
--surface-2: #0a1525;
--surface-3: #1a2a42;
--border: #1e3251;
--border-2: #2d4468;
--text: #e8eef7;
--text-soft: #b8c7dd;
--text-muted:#7d8fa9;

--accent: var(--py-blue);
--accent-lt: var(--py-blue-lt);
--accent-hl: var(--py-yellow);

--code-bg: #060f1c;
}

/* -------------------------------------------------------------
BASE OVERRIDES
------------------------------------------------------------- */
html, body {
background: var(--bg) !important;
color: var(--text-soft) !important;
}
body.bg-slate-950 { background: var(--bg) !important; }
body.text-slate-300 { color: var(--text-soft) !important; }

.bg-slate-950 { background-color: var(--bg) !important; }
.bg-slate-900 { background-color: var(--surface) !important; border-color: var(--border) !important; }
.bg-slate-800 { background-color: var(--surface-2) !important; }
.border-slate-800, .border-slate-700 { border-color: var(--border) !important; }
.text-slate-300 { color: var(--text-soft) !important; }
.text-slate-400 { color: var(--text-muted) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-white { color: var(--text) !important; }
.text-blue-400, .text-blue-500 { color: var(--py-yellow) !important; }
.hover:text-blue-400:hover { color: var(--py-yellow) !important; }
.hover:border-blue-500/50:hover { border-color: var(--py-blue-lt) !important; }

.navbar, nav.navbar, footer { background: var(--surface) !important; border-color: var(--border) !important; }
.nav-container a, footer a, footer span { color: var(--text-soft) !important; }
footer .text-blue-500 { color: var(--py-yellow) !important; }

main h1, main h2, main h3, main h4 { color: var(--text) !important; }
main p, main li, main td, main summary { color: var(--text-soft) !important; }
main .text-slate-400, main .text-slate-500 { color: var(--text-muted) !important; }

main a.block { background: var(--surface) !important; border-color: var(--border) !important; }
main a.block:hover { border-color: var(--py-blue-lt) !important; }
main a.block .text-white { color: var(--text) !important; }

/* Inline code inside prose (used in intro boxes, concept cards, mistakes) */
main p code,
main li code,
.info-box code,
.pro-tip code,
.warning-box code,
.concept-card code,
.mistake code,
.challenge code,
.step-body code,
.checklist code,
.error-card code {
color: var(--py-yellow) !important;
background: rgba(255, 212, 59, 0.1);
padding: 0.05rem 0.35rem;
border-radius: 0.2rem;
font-size: 0.9em;
}

/* -------------------------------------------------------------
HERO
------------------------------------------------------------- */
.py-hero {
background: linear-gradient(135deg, #0d1b2e 0%, #132a4a 100%);
border: 1px solid var(--border-2);
border-radius: 1.5rem;
padding: 2.75rem 2rem;
margin: 1.5rem 0;
position: relative;
overflow: hidden;
}
.py-hero::before {
content: '';
position: absolute; top: -60%; right: -10%;
width: 70%; height: 220%;
background: radial-gradient(circle, rgba(55,118,171,0.35), transparent 60%);
pointer-events: none;
}
.py-hero::after {
content: '';
position: absolute; bottom: -40%; left: -5%;
width: 50%; height: 180%;
background: radial-gradient(circle, rgba(255,212,59,0.08), transparent 60%);
pointer-events: none;
}
.py-hero > * { position: relative; z-index: 1; }
.py-hero .badge {
display: inline-flex; align-items: center; gap: 0.45rem;
background: rgba(255,212,59,0.12);
color: var(--py-yellow) !important;
border: 1px solid rgba(255,212,59,0.3);
padding: 0.35rem 0.8rem;
border-radius: 999px;
font-size: 0.7rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 1.1rem;
}
.py-hero h1 {
font-size: clamp(1.75rem, 4vw, 2.9rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 0.9rem;
letter-spacing: -0.02em;
color: var(--text) !important;
}
.py-hero h1 .py-accent {
background: linear-gradient(135deg, var(--py-blue-lt), var(--py-yellow));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.py-hero .lead {
font-size: 1.02rem;
color: var(--text-soft) !important;
line-height: 1.65;
max-width: 640px;
margin-bottom: 1.6rem;
}
.py-hero .meta {
display: flex; gap: 1.4rem; flex-wrap: wrap;
font-size: 0.78rem; color: var(--text-muted) !important;
}
.py-hero .meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.py-hero .meta i { color: var(--py-yellow); }

/* -------------------------------------------------------------
QUICK NAV
------------------------------------------------------------- */
.quick-nav {
display: flex; flex-wrap: wrap; gap: 0.5rem;
margin: 1rem 0 1.5rem;
}
.quick-nav a {
display: inline-flex; align-items: center; gap: 0.35rem;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-soft) !important;
padding: 0.4rem 0.8rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.quick-nav a:hover {
border-color: var(--py-yellow);
color: var(--py-yellow) !important;
}

/* -------------------------------------------------------------
CODE BLOCK
------------------------------------------------------------- */
.code-block {
position: relative;
background: var(--code-bg);
border-radius: 0.75rem;
overflow: hidden;
margin: 1rem 0;
border: 1px solid var(--border-2);
}
.code-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.9rem;
background: rgba(55,118,171,0.1);
border-bottom: 1px solid var(--border-2);
}
.code-header .lang {
font-size: 0.65rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--py-yellow);
}
.code-header .dots { display: flex; gap: 0.3rem; }
.code-header .dots span { width: 9px; height: 9px; border-radius: 50%; }
.code-header .dots span:nth-child(1) { background: #ef4444; }
.code-header .dots span:nth-child(2) { background: #eab308; }
.code-header .dots span:nth-child(3) { background: #22c55e; }
.code-block pre {
color: #e8eef7; padding: 1rem;
overflow-x: auto; font-size: 0.8rem;
margin: 0; line-height: 1.7;
font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
}
.code-block pre .kw { color: #c084fc; font-weight: 600; }
.code-block pre .str { color: #86efac; }
.code-block pre .num { color: #fbbf24; }
.code-block pre .com { color: #64748b; font-style: italic; }
.code-block pre .fn { color: #60a5fa; }
.code-block pre .out { color: #86efac; }
.code-block pre .cmd { color: var(--py-yellow); font-weight: 600; }
.copy-btn {
background: rgba(55,118,171,0.3); color: var(--py-yellow);
border: 1px solid rgba(255,212,59,0.3);
padding: 0.3rem 0.7rem; border-radius: 0.375rem;
cursor: pointer; font-size: 0.7rem; font-weight: 700;
font-family: inherit; transition: all 0.2s;
}
.copy-btn:hover { background: rgba(55,118,171,0.5); }
.copy-btn.copied { background: #10b981; color: #fff; border-color: #10b981; }

/* -------------------------------------------------------------
SECTION HELPERS
------------------------------------------------------------- */
.section-title { color: var(--text) !important; font-weight: 800; font-size: 1.35rem; margin-bottom: 0.4rem; }
.section-sub { color: var(--text-muted) !important; font-size: 0.85rem; margin-bottom: 1rem; }

.info-box {
background: linear-gradient(135deg, rgba(55,118,171,0.12), rgba(55,118,171,0.04)) !important;
border-left: 4px solid var(--py-yellow);
padding: 1.1rem 1.3rem; border-radius: 0.6rem; margin: 1.25rem 0;
}
.info-box p { color: var(--text) !important; }
.pro-tip {
background: var(--surface) !important;
border-left: 4px solid var(--py-yellow);
padding: 0.85rem 1.1rem; border-radius: 0.5rem; margin: 0.85rem 0;
}
.pro-tip p { color: var(--text-soft) !important; }

.warning-box {
background: rgba(239,68,68,0.06) !important;
border-left: 4px solid #ef4444;
padding: 0.85rem 1.1rem; border-radius: 0.5rem; margin: 0.85rem 0;
}
.warning-box p { color: var(--text-soft) !important; }
.warning-box strong { color: #f87171 !important; }

/* -------------------------------------------------------------
STEP (numbered instruction block)
------------------------------------------------------------- */
.step {
display: flex; gap: 1rem;
padding: 1.25rem 1.35rem;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--py-blue);
border-radius: 0.85rem;
margin-bottom: 1rem;
}
.step-num {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--py-blue), var(--py-blue-lt));
color: #fff !important;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 0.9rem;
box-shadow: 0 3px 10px rgba(55,118,171,0.35);
}
.step-body { flex: 1; min-width: 0; }
.step-body h4 {
font-size: 0.98rem; font-weight: 800;
color: var(--text) !important; margin-bottom: 0.4rem;
}
.step-body p {
font-size: 0.84rem; color: var(--text-soft) !important;
line-height: 1.65; margin-bottom: 0.6rem;
}
.step-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------
OS TABS (install guide)
------------------------------------------------------------- */
.os-tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0;
flex-wrap: wrap;
}
.os-tab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 0.7rem 1rem;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
color: var(--text-muted) !important;
transition: all 0.2s;
margin-bottom: -1px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.os-tab:hover { color: var(--text) !important; }
.os-tab.active {
color: var(--py-yellow) !important;
border-bottom-color: var(--py-yellow);
}
.os-panel { display: none; }
.os-panel.active { display: block; }

/* -------------------------------------------------------------
CHECKLIST (install guide)
------------------------------------------------------------- */
.checklist {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.85rem;
padding: 1.25rem 1.4rem;
}
.checklist h3 {
color: var(--text) !important;
font-size: 1rem;
font-weight: 800;
margin-bottom: 0.75rem;
}
.checklist ul { list-style: none; padding: 0; margin: 0; }
.checklist li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.83rem;
color: var(--text-soft) !important;
padding: 0.35rem 0;
line-height: 1.5;
}
.checklist li::before {
content: '✓';
color: #22c55e;
font-weight: 900;
flex-shrink: 0;
font-size: 0.85rem;
}

/* -------------------------------------------------------------
ERROR CARDS (install guide)
------------------------------------------------------------- */
.error-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid #ef4444;
border-radius: 0.7rem;
padding: 0.9rem 1.1rem;
margin-bottom: 0.6rem;
}
.error-card .err-title {
font-family: 'SF Mono', 'Consolas', monospace;
font-size: 0.78rem;
color: #f87171 !important;
font-weight: 700;
margin-bottom: 0.3rem;
}
.error-card .err-body {
font-size: 0.8rem;
color: var(--text-soft) !important;
line-height: 1.55;
}

/* -------------------------------------------------------------
PHASE CARDS (hub)
------------------------------------------------------------- */
.phase-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.25rem; }
.phase {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--py-blue);
border-radius: 0.9rem;
padding: 1.25rem 1.4rem;
position: relative;
transition: border-color 0.2s, transform 0.2s;
}
.phase:hover { border-left-color: var(--py-yellow); transform: translateX(2px); }
.phase-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.65rem; }
.phase-num {
flex-shrink: 0; width: 40px; height: 40px;
border-radius: 0.6rem;
background: linear-gradient(135deg, var(--py-blue), var(--py-blue-lt));
color: #fff !important;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 1rem;
box-shadow: 0 4px 12px rgba(55,118,171,0.3);
}
.phase-head h3 { font-size: 1.02rem; font-weight: 800; color: var(--text) !important; margin: 0 0 0.15rem; }
.phase-head .dur {
font-size: 0.7rem; color: var(--py-yellow) !important;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.phase > p { font-size: 0.82rem; color: var(--text-soft) !important; line-height: 1.6; margin-bottom: 0.65rem; }
.phase-topics { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.phase-topics span {
background: rgba(55,118,171,0.15);
border: 1px solid rgba(55,118,171,0.35);
color: var(--py-blue-lt) !important;
font-size: 0.7rem; font-weight: 600;
padding: 0.2rem 0.6rem; border-radius: 999px;
}
.phase-links { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.78rem; }
.phase-links a { color: var(--py-yellow) !important; text-decoration: none; font-weight: 700; }
.phase-links a:hover { text-decoration: underline; }

/* -------------------------------------------------------------
CONCEPT CARDS
------------------------------------------------------------- */
.concept-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem; margin-top: 1.25rem;
}
.concept-card {
background: var(--surface);
border: 1px solid var(--border);
border-top: 2px solid var(--py-blue);
border-radius: 0.75rem;
padding: 1.05rem 1.15rem;
transition: border-color 0.2s;
}
.concept-card:hover { border-top-color: var(--py-yellow); }
.concept-card h4 { font-size: 0.85rem; font-weight: 800; color: var(--text) !important; margin-bottom: 0.4rem; }
.concept-card p { font-size: 0.75rem; color: var(--text-muted) !important; line-height: 1.55; }

/* -------------------------------------------------------------
MISTAKE CARDS
------------------------------------------------------------- */
.mistake {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid #ef4444;
border-radius: 0.7rem;
padding: 0.85rem 1.1rem; margin-bottom: 0.6rem;
}
.mistake .mtitle {
font-family: 'SF Mono', 'Consolas', monospace;
font-size: 0.77rem; color: #f87171 !important;
font-weight: 700; margin-bottom: 0.3rem;
}
.mistake p { font-size: 0.8rem; color: var(--text-soft) !important; line-height: 1.55; }

/* -------------------------------------------------------------
PROJECT CARDS
------------------------------------------------------------- */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.85rem; margin-top: 1.25rem;
}
.project-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.9rem;
padding: 1.1rem;
transition: all 0.2s;
}
.project-card:hover { border-color: var(--py-blue-lt); transform: translateY(-2px); }
.project-card .lvl {
display: inline-block;
font-size: 0.6rem; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 800;
padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 0.55rem;
}
.project-card .lvl.beg { background: rgba(34,197,94,0.15); color: #4ade80; }
.project-card .lvl.mid { background: rgba(255,212,59,0.15); color: var(--py-yellow); }
.project-card .lvl.adv { background: rgba(239,68,68,0.15); color: #f87171; }
.project-card h4 { font-size: 0.88rem; font-weight: 800; color: var(--text) !important; margin-bottom: 0.35rem; }
.project-card p { font-size: 0.74rem; color: var(--text-muted) !important; line-height: 1.55; }

/* -------------------------------------------------------------
CHALLENGE (lesson 1)
------------------------------------------------------------- */
.challenge {
background: linear-gradient(135deg, rgba(255,212,59,0.08), rgba(255,212,59,0.02)) !important;
border: 1px solid rgba(255,212,59,0.3);
border-radius: 0.9rem;
padding: 1.4rem 1.5rem;
margin: 1.25rem 0;
}
.challenge h4 {
color: var(--py-yellow) !important;
font-size: 0.95rem;
font-weight: 800;
margin-bottom: 0.5rem;
display: flex; align-items: center; gap: 0.4rem;
}
.challenge p { color: var(--text-soft) !important; font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.5rem; }
.challenge p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------
FAQ
------------------------------------------------------------- */
main details {
background: var(--surface) !important;
border: 1px solid var(--border);
}
main details[open] { border-color: var(--py-blue-lt); }
main details summary { color: var(--py-yellow) !important; }
main details p { color: var(--text-soft) !important; }

/* -------------------------------------------------------------
BACK LINK + LANGUAGE SIGNATURE
------------------------------------------------------------- */
.back-link {
display: inline-block; margin-top: 2rem;
color: var(--py-yellow) !important;
text-decoration: none; font-weight: 700;
}
.lang-signature {
text-align: center;
padding: 1.5rem 1rem 0.5rem;
font-size: 0.7rem; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.15em;
font-weight: 700;
}
.lang-signature .dot {
display: inline-block;
width: 8px; height: 8px; border-radius: 50%;
background: var(--py-yellow);
margin: 0 0.5rem; vertical-align: middle;
}

/* =============================================================
PREVIEW SYSTEM — inline code previews (DARK)
============================================================= */

.preview-btn {
background: rgba(255,255,255,0.1);
color: #cbd5e1;
border: 1px solid rgba(255,255,255,0.2);
padding: 0.3rem 0.7rem;
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.7rem;
font-weight: 700;
font-family: inherit;
transition: all 0.2s;
margin-left: 0.4rem;
}
.preview-btn:hover {
background: rgba(255,255,255,0.2);
color: #fff;
}
.preview-btn.active {
background: var(--py-blue);
color: #fff;
border-color: var(--py-blue);
}

.preview-panel {
background: #0b1220;
border-top: 2px solid var(--py-blue, #1572B6);
padding: 1.5rem;
color: #e2e8f0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.95rem;
line-height: 1.6;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.preview-panel[hidden] {
display: none;
}
.preview-panel * {
max-width: 100%;
}
.preview-panel.dark-preview {
background: #0b1220;
color: #e2e8f0;
}
.preview-panel pre {
background: #1e293b;
color: #e2e8f0;
padding: 0.75rem;
border-radius: 0.4rem;
overflow-x: auto;
}

/* =============================================================
CODE/OUTPUT TOGGLE — for SQL lessons
Shows code OR output in the same code-block, toggled
============================================================= */

.code-output-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.code-output-tabs button {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #94a3b8;
padding: 0.5rem 1rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
font-family: inherit;
margin-bottom: -1px;
transition: all 0.15s;
}
.code-output-tabs button:hover { color: #e2e8f0; }
.code-output-tabs button.active {
color: var(--py-yellow, #10b981);
border-bottom-color: var(--py-yellow, #10b981);
}

.code-output-pane { display: none; }
.code-output-pane.active { display: block; }

/* Table styling for SQL output */
.sql-output-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
color: #e2e8f0;
}
.sql-output-table th {
background: rgba(16, 185, 129, 0.15);
color: #34d399;
text-align: left;
padding: 0.5rem 0.75rem;
font-weight: 700;
border-bottom: 1px solid #334155;
font-family: 'SF Mono', Consolas, monospace;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.sql-output-table td {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid #1e293b;
font-family: 'SF Mono', Consolas, monospace;
font-size: 0.78rem;
}
.sql-output-table tr:last-child td { border-bottom: none; }
.sql-output-table tr:hover td { background: rgba(16,185,129,0.05); }
.sql-output-null { color: #64748b; font-style: italic; }
.sql-output-rows {
color: #64748b;
font-size: 0.7rem;
padding: 0.5rem 0.75rem;
border-top: 1px solid #334155;
text-align: right;
}

/* =============================================================
TS CODE / OUTPUT TABS — extends the SQL variant
Shows TypeScript source vs compiled JavaScript vs run output.
Uses switchCodeOutput() from courses.js — no JS changes needed.
============================================================= */

.code-block .code-output-tabs {
background: rgba(49, 120, 198, 0.08);
border-bottom: 1px solid var(--border-2, #2d4468);
}
.code-block .code-output-tabs button {
color: #94a3b8;
}
.code-block .code-output-tabs button:hover { color: #e8eef7; }
.code-block .code-output-tabs button.active {
color: #5B9BD5;
border-bottom-color: #5B9BD5;
}

/* Slightly different tint per pane, so it's obvious which is which */
.code-output-pane[data-pane="ts"] pre { background: #060f1c; }
.code-output-pane[data-pane="js"] pre { background: #08141f; }
.code-output-pane[data-pane="out"] pre { background: #04120c; }

/* Small label chip that sits inside the pane header */
.pane-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.18rem 0.5rem;
border-radius: 999px;
margin-left: 0.5rem;
}
.pane-chip.ts { background: rgba(49,120,198,0.18); color:#5B9BD5; border:1px solid rgba(49,120,198,0.4); }
.pane-chip.js { background: rgba(247,223,30,0.12); color:#F7DF1E; border:1px solid rgba(247,223,30,0.3); }
.pane-chip.out { background: rgba(34,197,94,0.14); color:#4ade80; border:1px solid rgba(34,197,94,0.35); }