/* ============================================================================
   GOLEARNAI — GoCourse design system (matches gocourse.in / GoCourse Blog 2.0)

   Loaded LAST. It re-bases every token the older stylesheets (glass.css,
   learnai.css) read — --bg, --text, --muted, --glass-*, --card-*, --yellow… —
   onto the blog's palette, so the whole app takes the blog's look without
   rewriting each component: light surfaces, slate text, blue brand, purple AI
   accent, Plus Jakarta Sans / JetBrains Mono, and the same light / dark theme
   the blog has (same `gc-theme` preference key, same `data-theme` attribute).

   The admin console (.gc-admin) keeps the dark palette whatever the theme —
   its own stylesheet was designed for it.
   ============================================================================ */

/* ── 1. Tokens — exact values from the blog's theme.css ─────────────────── */
:root {
  --bg: #F8FAFC;  --bg2: #FFFFFF;
  --surface: #FFFFFF;  --surface2: #F1F5F9;  --sunken: #F8FAFC;
  --border: #E2E8F0;  --border2: #CBD5E1;
  --text: #0F172A;  --text2: #475569;  --text3: #94A3B8;
  --brand: #2563EB;  --brand2: #1D4ED8;  --brand3: #3B82F6;
  --brandsoft: #EFF6FF;  --brandline: #BFDBFE;
  --ai: #7C3AED;  --aisoft: #F5F3FF;  --ailine: #DDD6FE;
  --ok: #16A34A;  --oksoft: #F0FDF4;
  --warn: #F59E0B;  --warnsoft: #FFFBEB;
  --err: #DC2626;  --errsoft: #FEF2F2;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow2: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
  --shadow3: 0 20px 40px -12px rgba(15, 23, 42, .18);
  --navbg: rgba(255, 255, 255, .85);
  --t-blue: #EFF6FF; --t-blue-fg: #2563EB;   --t-green: #F0FDF4; --t-green-fg: #16A34A;
  --t-amber: #FFFBEB; --t-amber-fg: #B45309; --t-red: #FEF2F2;   --t-red-fg: #DC2626;
  --t-purple: #F5F3FF; --t-purple-fg: #7C3AED;
  /* Code panels stay dark in both themes, exactly as on the blog. */
  --code-bg: #0B1120; --code-line: #1E293B; --code-fg: #E2E8F0; --code-dim: #64748B;
}

html[data-theme="dark"],
.gc-admin {
  --bg: #0B1120;  --bg2: #0F172A;
  --surface: #111827;  --surface2: #172033;  --sunken: #0B1120;
  --border: #1E293B;  --border2: #334155;
  --text: #F1F5F9;  --text2: #94A3B8;  --text3: #64748B;
  --brand: #3B82F6;  --brand2: #60A5FA;  --brand3: #60A5FA;
  --brandsoft: rgba(37, 99, 235, .14);  --brandline: rgba(59, 130, 246, .32);
  --ai: #A78BFA;  --aisoft: rgba(124, 58, 237, .16);  --ailine: rgba(167, 139, 250, .32);
  --ok: #22C55E;  --oksoft: rgba(22, 163, 74, .14);
  --warn: #FBBF24;  --warnsoft: rgba(245, 158, 11, .14);
  --err: #F87171;  --errsoft: rgba(220, 38, 38, .16);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow2: 0 4px 10px -2px rgba(0, 0, 0, .5);
  --shadow3: 0 24px 48px -16px rgba(0, 0, 0, .7);
  --navbg: rgba(15, 23, 42, .85);
  --t-blue: rgba(59, 130, 246, .14); --t-blue-fg: #60A5FA;   --t-green: rgba(34, 197, 94, .14); --t-green-fg: #4ADE80;
  --t-amber: rgba(245, 158, 11, .14); --t-amber-fg: #FBBF24; --t-red: rgba(248, 113, 113, .14); --t-red-fg: #F87171;
  --t-purple: rgba(167, 139, 250, .16); --t-purple-fg: #A78BFA;
}

/* ── 2. Bridge — the names the older stylesheets read ───────────────────────
   Declared for every scope in which the tokens change: a custom property is
   resolved where it is DECLARED, so a bridge on :root alone would freeze the
   light values even inside html[data-theme="dark"] / .gc-admin. */
:root,
html[data-theme="dark"],
.gc-admin {
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --navy: var(--surface2);
  --muted: var(--text2);
  /* The old yellow accent becomes the brand blue everywhere it was used. */
  --yellow: var(--brand);
  --yellow-dim: var(--brandsoft);
  --yellow-bd: var(--brandline);
  --ai-from: var(--ai);
  --ai-to: #6366F1;
  --ai-glow: var(--aisoft);

  --glass-bg: var(--surface);
  --glass-bg2: var(--surface2);
  --glass-bd: var(--border);
  --glass-bd2: var(--border);
  --glass-blur: 0px;
  --card-bg: var(--surface);
  --card-bd: var(--border);
  --panel: var(--surface);
  --panel-hd: var(--sunken);

  --orb-a: transparent;
  --orb-b: transparent;
  --orb-c: transparent;

  --shadow-soft: var(--shadow);
  --shadow-lift: var(--shadow3);
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 12px;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--sans);
  --bs-border-color: var(--border);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand2);
  --bs-font-monospace: var(--mono);
  --bs-border-radius: 9px;
}

/* ── 3. Base ────────────────────────────────────────────────────────────── */
/* Reserve the scrollbar's width always: opening the drawer or the command
   palette sets `overflow: hidden` on the body, and without this the whole page
   jumps sideways by the scrollbar's width as it opens. */
html { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent !important; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent; border-radius: 99px;
  background: var(--border2) !important; background-clip: content-box !important;
}

body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* The ambient orbs and blurs of the old glass look are gone. */
html::before, html::after { display: none !important; content: none !important; }
.glass, .prompt-card, .course-card, .auth-card, .feature-card, .how-step, .gen-card,
.empty-state, .quota-banner, .settings-section, .set-panel, .cmdk, .nav-logo-drop,
.search-dropdown, .trust-strip, .learn-sidebar, .top-nav, .site-footer, .gc-toast,
.info-card, .bio-card, .profile-hero, .ai-rail, .note-panel {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand2); }
::selection { background: var(--brandline); color: var(--text); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand) !important; }
.skip-link { background: var(--brand); color: #fff; border-radius: 9px; }
/* Text fields draw their focus state on their own border (or on the card that
   wraps them), so the generic outline ring would be a second, offset frame. */
.prompt-card textarea:focus-visible, .course-search input:focus-visible, .auth-field input:focus-visible,
.auth-field textarea:focus-visible, .form-control:focus-visible, .ai-composer-input:focus-visible,
.note-panel textarea:focus-visible, .cmdk-input-row input:focus-visible { outline: none !important; box-shadow: none; }
.prompt-card textarea { border: 0 !important; box-shadow: none !important; }
.text-muted-2 { color: var(--text2) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -.02em; }
p { text-wrap: pretty; }

/* ── 4. Header (the blog's .gc-header / .gc-navbar) ─────────────────────── */
.top-nav, .top-nav.navbar {
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  background: var(--navbg) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important;
}
.top-nav > .container-fluid {
  display: flex; align-items: center; gap: 18px !important;
  height: 60px; max-width: 1600px; margin: 0 auto; padding: 0 24px !important; min-width: 0;
}
.nav-logo-link { margin: 0 !important; flex: none; }
.nav-logo-img { height: 32px !important; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav-link {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  border: 0; border-radius: 7px; background: none;
  font: 600 13.5px/1 var(--sans); color: var(--text2);
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s;
}
.site-nav-link:hover { background: var(--surface2); color: var(--text); }
.site-nav-link.active, .site-nav-link[aria-current="page"] { color: var(--brand); }
.site-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }

.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 0 !important;
  padding: 0 8px 0 10px !important; border: 1px solid var(--border) !important; border-radius: 8px !important;
  background: var(--surface) !important; color: var(--text3) !important;
  font: 500 13px/1 var(--sans) !important; cursor: pointer; transition: color .15s, border-color .15s;
}
.cmdk-trigger:hover { color: var(--text) !important; border-color: var(--border2) !important; }
.cmdk-trigger kbd, .site-kbd {
  font: 600 11px/1 var(--mono) !important; border: 1px solid var(--border) !important; border-radius: 4px !important;
  padding: 3px 5px !important; color: var(--text3) !important; background: none !important;
}

.site-icon-btn {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text2);
  cursor: pointer; font-size: 15px; transition: color .15s, background .15s;
}
.site-icon-btn:hover { color: var(--text); background: var(--surface2); }
/* Which icon shows follows the theme, so the button needs no script to relabel. */
.site-icon-btn .if-dark { display: none; }
html[data-theme="dark"] .site-icon-btn .if-dark { display: block; }
html[data-theme="dark"] .site-icon-btn .if-light { display: none; }

.nav-pill {
  height: 34px; padding: 0 14px !important; border-radius: 8px !important; gap: 6px;
  background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff !important;
  font: 600 13px/1 var(--sans) !important; box-shadow: none; transform: none !important;
}
.nav-pill:hover { background: var(--brand2) !important; border-color: var(--brand2) !important; }
.nav-user-name { font: 600 13px/1 var(--sans); color: var(--text2); white-space: nowrap; }

.nav-avatar-circle {
  width: 34px; height: 34px; font: 700 12px/1 var(--sans);
  color: #fff; box-shadow: none !important; letter-spacing: 0; overflow: hidden; flex: none;
}
.nav-avatar-circle.has-img { background: var(--surface2) !important; border: 1px solid var(--border); }
.nav-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
#gcAvatarBtn:hover .nav-avatar-circle { box-shadow: 0 0 0 3px var(--brandsoft) !important; }
.nav-btn-auth { height: 30px; padding: 0 12px !important; border-radius: 8px !important; font: 600 12.5px/1 var(--sans) !important; transition: .15s; }
.nav-btn-login { color: var(--text) !important; border: 1px solid var(--border2) !important; background: var(--surface) !important; }
.nav-btn-login:hover { background: var(--surface2) !important; }
.nav-btn-register { background: var(--brand) !important; color: #fff !important; border: 1px solid var(--brand) !important; box-shadow: none !important; margin-left: 0 !important; }
.nav-btn-register:hover { background: var(--brand2) !important; border-color: var(--brand2) !important; opacity: 1 !important; }

/* avatar menu (the blog's .gc-menu) */
.nav-logo-drop {
  top: 42px !important; width: 220px !important; padding: 6px !important;
  border: 1px solid var(--border) !important; border-radius: 11px !important;
  background: var(--surface) !important; box-shadow: var(--shadow3) !important;
}
.nld-item {
  gap: 10px !important; padding: 9px 10px !important; border-radius: 7px !important;
  font: 600 13px/1 var(--sans) !important; color: var(--text2) !important;
}
.nld-item:hover { background: var(--surface2) !important; color: var(--text) !important; }
.nld-item.nld-active { background: var(--brandsoft) !important; color: var(--brand) !important; }
.nld-item.nld-item-danger { color: var(--err) !important; }
.nld-item.nld-item-danger:hover { background: var(--errsoft) !important; color: var(--err) !important; }
.nld-divider { height: 1px; margin: 6px 4px; background: var(--border) !important; }
.nld-label { padding: 6px 10px 4px; font: 700 10.5px/1 var(--sans); color: var(--text3); letter-spacing: .09em; text-transform: uppercase; }
.nld-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.nld-head strong { display: block; font: 700 13px/1.3 var(--sans); color: var(--text); }
.nld-head span { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--sans); color: var(--text3); overflow: hidden; text-overflow: ellipsis; }

.top-nav > .container-fluid { flex-wrap: nowrap !important; }
@media (max-width: 991.98px) {
  .top-nav > .container-fluid { height: 56px; padding: 0 14px !important; gap: 8px !important; }
  .site-nav { display: none; }
  .nav-logo-img { height: 26px !important; }
  .site-actions { gap: 6px; }
  .nav-btn-auth { padding: 0 10px !important; }
  .nav-btn-login i { display: none; }
}
@media (max-width: 400px) {
  /* Both buttons lead to the same sign-in; keep the clearer one. */
  .nav-btn-register { display: none !important; }
  .nav-btn-login i { display: inline; }
}

/* ── 5. Buttons (the blog's .btn-gc family) ─────────────────────────────── */
.btn-yellow, .ws-action.primary, .gen-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px !important; border-radius: 9px !important;
  border: 1px solid var(--brand) !important; background: var(--brand) !important; color: #fff !important;
  font: 700 14.5px/1 var(--sans) !important; box-shadow: var(--shadow2) !important;
  transition: background .15s, border-color .15s !important; transform: none !important;
}
.btn-yellow:hover { background: var(--brand2) !important; border-color: var(--brand2) !important; color: #fff !important; transform: none !important; }
.btn-yellow[disabled], .btn-yellow[aria-disabled="true"] { opacity: .55; background: var(--brand) !important; box-shadow: none !important; }
.btn-yellow .ripple { background: rgba(255, 255, 255, .25) !important; }

.btn-glass, .ws-action, .example-chip, .filter-tab, .tool-btn, .ex-btn, .cc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border2) !important; border-radius: 8px !important;
  background: var(--surface) !important; color: var(--text) !important;
  font: 600 13px/1 var(--sans) !important; box-shadow: none !important; transform: none !important;
  transition: background .15s, border-color .15s, color .15s !important;
}
.btn-glass:hover, .ws-action:hover, .example-chip:hover, .filter-tab:hover, .tool-btn:hover, .ex-btn:hover, .cc-iconbtn:hover {
  background: var(--surface2) !important; color: var(--text) !important;
}
/* The mobile "Lessons" pill. Its display is owned by learnai.css (none on
   desktop, inline-flex in the ≤900px drawer), so nothing here may set it. */
.sidebar-toggle {
  gap: 6px; border: 1px solid var(--border2) !important; border-radius: 99px !important;
  background: var(--surface) !important; color: var(--text) !important;
  font: 600 13px/1 var(--sans) !important; box-shadow: var(--shadow2) !important;
}
.sidebar-toggle:hover { background: var(--surface2) !important; }

.example-chip { height: 32px; padding: 0 12px !important; border-radius: 99px !important; color: var(--text2) !important; font-weight: 500 !important; }
.filter-tab { height: 34px; padding: 0 14px !important; }
.filter-tab.active { background: var(--brandsoft) !important; border-color: var(--brandline) !important; color: var(--brand) !important; }
.filter-tab.active .ripple { background: var(--brandline) !important; }
.ws-action { height: 36px; padding: 0 14px !important; }
.cc-iconbtn.cc-delete:hover { color: var(--err) !important; border-color: var(--err) !important; background: var(--errsoft) !important; }

/* ── 6. Cards & surfaces (the blog's .card-gc) ──────────────────────────── */
.glass, .prompt-card, .course-card, .auth-card, .feature-card, .how-step, .gen-card,
.empty-state, .settings-section, .set-panel, .trust-strip, .quota-banner, .info-card,
.bio-card, .profile-hero, .search-dropdown, .cmdk, .note-panel, .video-card, .quiz-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important; border-radius: 12px !important;
}
.auth-card, .auth-card:hover { transform: none !important; }
.prompt-card { border-radius: 14px !important; box-shadow: var(--shadow2) !important; }
.prompt-card:focus-within { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brandsoft), var(--shadow2) !important; }
.prompt-card textarea { color: var(--text) !important; font-family: var(--sans); }
.prompt-card textarea::placeholder { color: var(--text3) !important; }
.prompt-hint { color: var(--text3); }
/* Level picker — a menu in the site's own style rather than the native popup. */
.level-select { position: relative; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.level-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid var(--border2); border-radius: 9px; background: var(--surface); color: var(--text2);
  font: 500 13.5px/1 var(--sans); cursor: pointer; transition: border-color .15s, background .15s;
}
.level-btn:hover, .level-select.open .level-btn { border-color: var(--brandline); background: var(--brandsoft); }
.level-btn > i:first-child { color: var(--brand); font-size: .95rem; }
.level-btn .level-value { color: var(--text); font-weight: 700; }
.level-btn .level-caret { margin-left: 2px; font-size: .75rem; color: var(--text3); transition: transform .15s; }
.level-select.open .level-caret { transform: rotate(180deg); color: var(--brand); }
.level-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60; min-width: 290px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow3);
  animation: rise .14s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.level-menu li {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer;
  color: var(--text2); text-align: left;
}
.level-menu li:hover, .level-menu li:focus { background: var(--surface2); outline: none; }
.level-menu li[aria-selected="true"] { background: var(--brandsoft); }
.level-menu .lm-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--surface2); color: var(--text2); font-size: 1rem; }
.level-menu li[aria-selected="true"] .lm-ico { background: var(--brand); color: #fff; }
.level-menu .lm-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.level-menu .lm-text strong { font: 700 13.5px/1.2 var(--sans); color: var(--text); }
.level-menu .lm-text span { font: 400 12px/1.3 var(--sans); color: var(--text3); }
.level-menu .lm-check { color: var(--brand); font-size: 1rem; opacity: 0; }
.level-menu li[aria-selected="true"] .lm-check { opacity: 1; }
@media (max-width: 575.98px) { .level-menu { left: 0; right: 0; min-width: 0; } .level-btn { width: 100%; justify-content: center; } }

.course-card { padding: 1.15rem 1.15rem 1rem !important; gap: .55rem !important; }
.course-card:hover { transform: translateY(-2px) !important; border-color: var(--brandline) !important; box-shadow: var(--shadow2) !important; }
.course-card .cc-topic { background: var(--brandsoft) !important; color: var(--brand) !important; border: 1px solid var(--brandline) !important; font-size: .66rem; }
.course-card .cc-title { color: var(--text); font-weight: 700; }
.course-card .cc-desc { color: var(--text2) !important; }
.course-card .cc-meta { color: var(--text3) !important; }
.course-card .cc-meta i { color: var(--text3) !important; }
.course-card .cc-foot { border-top: 1px solid var(--border) !important; }
.course-card .cc-author { color: var(--text3) !important; }
.course-card .cc-view { color: var(--brand) !important; }
.course-card .cc-level { color: var(--text3); }
.cc-avatar { background: var(--surface2) !important; color: var(--text2) !important; }
.cc-progress { background: var(--surface2) !important; }
.cc-progress-fill { background: var(--brand) !important; }
.cc-progress-label { color: var(--text3); }

.quota-banner { color: var(--text2) !important; border-radius: 10px !important; }
.quota-banner strong { color: var(--text); }
.quota-banner.admin { background: var(--aisoft) !important; border-color: var(--ailine) !important; color: var(--ai) !important; }
.quota-banner.limit { background: var(--warnsoft) !important; border-color: var(--warn) !important; color: var(--t-amber-fg) !important; }

.gc-toast {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-left: 3px solid var(--brand) !important; color: var(--text) !important; box-shadow: var(--shadow3) !important;
}
.gc-toast-success { border-left-color: var(--ok) !important; }
.gc-toast-error, .gc-toast-danger { border-left-color: var(--err) !important; }
.gc-toast-warning { border-left-color: var(--warn) !important; }
.gc-toast-x { color: var(--text3); }
.alert-glass, .auth-error { background: var(--errsoft) !important; border: 1px solid var(--err) !important; color: var(--err) !important; border-radius: 9px; }

/* ── 7. Home / landing ──────────────────────────────────────────────────── */
.home-hero { padding-top: 3.5rem; }
.home-badge { background: var(--aisoft) !important; border: 1px solid var(--ailine) !important; color: var(--ai) !important; }
.home-badge .dot { background: var(--ai) !important; }
.home-title { color: var(--text); font-weight: 800; letter-spacing: -.035em; }
.home-title .grad {
  /* background-image, not the shorthand: the shorthand resets background-clip. */
  background-image: linear-gradient(90deg, var(--brand), var(--ai)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.home-sub { color: var(--text2) !important; font-size: 1.05rem; }
.section-head h2 { color: var(--text); font-weight: 800; letter-spacing: -.03em; }
.section-head p { color: var(--text2) !important; }
.trust-strip { padding: 1rem 1.4rem !important; }
.trust-num { color: var(--text) !important; }
.trust-label { color: var(--text3) !important; }
.trust-divider { background: var(--border) !important; }
.how-step h3, .feature-card h3 { color: var(--text); }
.how-step p, .feature-card p { color: var(--text2) !important; }
.how-step > i { color: var(--brand) !important; }
.how-num { background: var(--brandsoft) !important; color: var(--brand) !important; border: 1px solid var(--brandline) !important; }
.ws-greeting { color: var(--text); }
.ws-sub { color: var(--text3) !important; }
.ws-empty { color: var(--text2) !important; background: var(--surface); border: 1px dashed var(--border2); border-radius: 12px; }
.landing-band { padding-top: 1rem; }
.home-hero { padding-bottom: 1rem; }
.section-head { margin-bottom: 1.6rem; }
.section-head p { margin-top: .35rem; }
.empty-state .es-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 14px; background: var(--brandsoft); color: var(--brand); font-size: 1.4rem; }
.empty-state h3 { font: 700 1.15rem/1.3 var(--sans); color: var(--text); margin: 0 0 .35rem; }
.empty-state p { color: var(--text2); margin: 0 0 1.1rem; }

.course-search {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: 13px !important; box-shadow: var(--shadow2) !important; transition: border-color .15s, box-shadow .15s;
}
.course-search:focus-within { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brandsoft) !important; }
.course-search input { color: var(--text) !important; background: none !important; font: 500 14.5px/1 var(--sans); }
.course-search input::placeholder { color: var(--text3) !important; font-weight: 400; }
.course-search .search-ico, .search-clear { color: var(--text3) !important; }
.course-search .btn-glass { height: 36px; background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.search-spin { border-color: var(--border) !important; border-top-color: var(--brand) !important; }
.search-status { color: var(--text3); }
.sd-item:hover, .sd-item.active { background: var(--surface2) !important; }
.sd-item .sd-topic { color: var(--brand) !important; }
.sd-item .sd-title { color: var(--text) !important; }
.sd-item .sd-meta { color: var(--text3) !important; }
.empty-state { color: var(--text2); padding: 2.5rem 1.5rem; text-align: center; }

/* ── 8. Forms ───────────────────────────────────────────────────────────── */
.auth-field label { color: var(--text2) !important; }
.auth-field input, .auth-field textarea, .auth-field select, .form-control, .note-panel textarea {
  background: var(--surface) !important; border: 1px solid var(--border2) !important;
  color: var(--text) !important; border-radius: 9px !important; font-family: var(--sans);
}
.auth-field input:focus, .auth-field textarea:focus, .form-control:focus {
  border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brandsoft) !important;
}
.auth-field input[readonly], .auth-field input[disabled] { background: var(--sunken) !important; color: var(--text2) !important; }
.auth-card h1 { color: var(--text); }
.auth-card .sub, .auth-foot { color: var(--text2) !important; }

/* Settings */
.set-tab { color: var(--text2) !important; border-radius: 8px !important; font-weight: 600; }
.set-tab:hover { background: var(--surface2) !important; color: var(--text) !important; }
.set-tab.active { background: var(--brandsoft) !important; color: var(--brand) !important; }
.set-h { color: var(--text); }
.set-sub { color: var(--text2) !important; }
.badge-role, .pro-badge { border-radius: 99px; font: 700 11px/1 var(--sans); letter-spacing: .06em; padding: 5px 10px; }
.badge-role.admin { background: var(--aisoft) !important; color: var(--ai) !important; border: 1px solid var(--ailine) !important; }
.pro-badge { background: var(--warnsoft) !important; color: var(--t-amber-fg) !important; }

/* ── 9. Lesson workspace ────────────────────────────────────────────────── */
.learn-sidebar { border-right: 1px solid var(--border) !important; background: var(--bg2) !important; }
.ls-course-title { color: var(--text); }
/* The list scrolls under the head; the rule says where the fixed part ends. */
.ls-list { border-top: 1px solid var(--border); }
.ls-item {
  position: relative; color: var(--text2) !important; border-radius: 8px;
  border: 1px solid transparent !important; transition: background .15s, color .15s;
}
.ls-item:hover { background: var(--surface2) !important; color: var(--text) !important; }
/* Where you are: tinted, outlined, bolder, and marked with a bar on the edge
   the eye scans down. The bar is what reads at a glance in a list of 35. */
.ls-item.active {
  background: var(--brandsoft) !important; color: var(--brand) !important;
  border-color: var(--brandline) !important; font-weight: 600;
}
.ls-item.active::before {
  content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 62%; border-radius: 0 3px 3px 0; background: var(--brand);
}
.ls-item.active:hover { background: var(--brandsoft) !important; color: var(--brand) !important; }
/* Collapse (in the sidebar head) and expand (in the collapsed gutter). */
.sb-collapse, .sb-expand {
  background: var(--surface) !important; border: 1px solid var(--border2) !important;
  color: var(--text2) !important; box-shadow: var(--shadow) !important;
}
.sb-collapse:hover, .sb-expand:hover {
  background: var(--surface2) !important; border-color: var(--brandline) !important; color: var(--brand) !important;
}
.ls-num { background: var(--surface2) !important; color: var(--text3) !important; }
.ls-item.active .ls-num { background: var(--brand) !important; color: #fff !important; }
.ls-item.done .ls-num { background: var(--oksoft) !important; color: var(--ok) !important; }
/* Completed *and* current: the current-lesson mark wins, since "done" is
   already said by the tick inside the badge. */
.ls-item.active.done .ls-num { background: var(--brand) !important; color: #fff !important; }
.ls-mini-track { background: var(--surface2) !important; }
.breadcrumbs a { color: var(--text3) !important; }
.breadcrumbs a:hover { color: var(--brand) !important; }
.lesson-h1, .lesson-title { color: var(--text); }
.lesson-meta { color: var(--text3); }

.prose { color: var(--text); font-size: 16px; line-height: 1.75; }
.prose p, .prose li { color: var(--text); }
.prose a { color: var(--brand) !important; text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text) !important; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text) !important; }
.prose blockquote { border-left: 3px solid var(--brandline); color: var(--text2); background: var(--sunken); }
.prose table { border: 1px solid var(--border); }
.prose th { background: var(--surface2) !important; color: var(--text) !important; }
.prose td { border-color: var(--border) !important; }
.prose code { background: var(--surface2) !important; color: var(--t-purple-fg) !important; border: 1px solid var(--border); border-radius: 5px; padding: .1em .35em; font-family: var(--mono); font-size: .9em; }
.prose pre, .prose pre code, .highlight, .highlight code { background: var(--code-bg) !important; color: var(--code-fg) !important; border: 0 !important; padding: 0; font-size: inherit; }
.prose pre, .highlight { border: 1px solid var(--code-line) !important; border-radius: 10px !important; padding: 1rem !important; }

/* ── Interactive code editors (CodeMirror 5) ────────────────────────────────
   CodeMirror renders EVERY line as its own <pre>, so the .prose pre rules above
   would give each line a border, radius, 1rem of padding and 1.2rem of margin —
   the "split lines" look. Reset the editor's internals first, then style the
   editor as one panel. */
.prose .CodeMirror pre,
.prose .CodeMirror code {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important;
  font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
}
.prose .CodeMirror pre.CodeMirror-line,
.prose .CodeMirror pre.CodeMirror-line-like { padding: 0 4px !important; }

.example-block { background: var(--code-bg) !important; border: 1px solid var(--code-line) !important; border-radius: 12px !important; overflow: hidden; }
.example-bar { background: rgba(255, 255, 255, .04) !important; border-bottom: 1px solid var(--code-line) !important; }
.example-bar .ex-title { color: var(--code-dim) !important; }

.CodeMirror {
  height: auto !important; border: 0 !important; border-radius: 0 !important;
  background: var(--code-bg) !important; color: var(--code-fg) !important;
  font-family: var(--mono) !important; font-size: 13.5px !important; line-height: 1.6 !important;
}
.CodeMirror-lines { padding: .6rem 0 !important; }
.CodeMirror-gutters { background: var(--code-bg) !important; border-right: 1px solid var(--code-line) !important; }
.CodeMirror-linenumber { color: var(--code-dim) !important; padding: 0 10px 0 8px !important; font-size: 12.5px; }
/* Read-only: no caret, but selection has to stay obvious — copying is the point. */
.CodeMirror-cursor { display: none !important; }
.CodeMirror-selected { background: rgba(59, 130, 246, .25) !important; }
.CodeMirror-focused .CodeMirror-selected { background: rgba(59, 130, 246, .34) !important; }
.CodeMirror-matchingbracket { color: var(--brand3) !important; border-bottom: 1px solid var(--brand3); font-weight: 700; }
.CodeMirror-nonmatchingbracket { color: var(--err) !important; }
.CodeMirror-scroll { overflow-x: auto; }
.prose .admonition { background: var(--brandsoft) !important; border: 1px solid var(--brandline) !important; color: var(--text) !important; border-radius: 10px; }
.prose .admonition-title { color: var(--brand) !important; }
.code-copy { background: var(--surface2) !important; border: 1px solid var(--border2) !important; color: var(--text2) !important; }
.code-copy:hover { color: var(--text) !important; }
.example-bar { background: var(--sunken) !important; border-color: var(--border) !important; }
.example-bar .ex-title { color: var(--text2); }
/* The link is just a wrapper — .ln-card draws the one border. */
.lesson-nav a { display: block; height: auto; }
.lesson-nav .ln-card { background: var(--surface); border: 1px solid var(--border2); padding: .9rem 1rem; border-radius: 12px; }
.lesson-nav a:hover .ln-card { background: var(--surface2); border-color: var(--brandline); }
.lesson-nav .ln-label { color: var(--text3); }
.lesson-nav .ln-title { color: var(--text); }
.quiz-card .quiz-opt { background: var(--surface) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; }
.quiz-card .quiz-opt:hover { background: var(--surface2) !important; }
.quiz-card .quiz-opt.correct { background: var(--oksoft) !important; border-color: var(--ok) !important; color: var(--t-green-fg) !important; }
.quiz-card .quiz-opt.wrong { background: var(--errsoft) !important; border-color: var(--err) !important; color: var(--t-red-fg) !important; }
.video-card { color: var(--text); }
.video-card .vc-title { color: var(--text); }
.video-card .vc-meta { color: var(--text3); }

/* ── AI Tutor — the right rail (ported from the blog's post rail) ────────── */
.ai-rail {
  position: sticky; top: var(--nav-h); align-self: start;
  height: calc(100vh - var(--nav-h)); padding: 18px 18px 20px;
  border-left: 1px solid var(--border); background: var(--bg);
  display: flex; flex-direction: column; min-height: 0;
}
.ai-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.ai-chat-head {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
.ai-mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(140deg, #7C3AED, #4F46E5);
  color: #fff; font: 800 9.5px/1 var(--sans); flex: none;
}
.ai-chat-title { font: 700 12.5px/1 var(--sans); color: var(--text); }

.ai-chat-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 15px; padding: 16px 2px;
}
.ai-chat-log { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ai-chat-log:hover { scrollbar-color: var(--border2) transparent; }
.ai-chat-log::-webkit-scrollbar { width: 7px; }
.ai-chat-log::-webkit-scrollbar-thumb {
  border: 2px solid transparent; border-radius: 99px;
  background: transparent; background-clip: content-box; transition: background .15s;
}
.ai-chat-log:hover::-webkit-scrollbar-thumb { background: var(--border2); background-clip: content-box; }

.ai-chat-lede { margin: 0; font: 400 12.5px/1.65 var(--sans); color: var(--text3); }
.ai-chat-lede strong { color: var(--text2); font-weight: 600; }
.ai-chat-lede-dim { margin-top: 6px; font-size: 11.5px; opacity: .8; }
.ai-chat-hint {
  margin-top: 16px; font: 700 10px/1 var(--sans); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text3);
}
.ai-chat-locked { display: flex; flex-direction: column; align-items: flex-start; }
.ai-chat-lock {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px;
  border: 1px solid var(--ailine); border-radius: 9px;
  background: var(--aisoft); color: var(--ai);
}

.ai-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ai-chip {
  padding: 6px 11px; border: 1px solid var(--ailine); border-radius: 99px;
  background: var(--aisoft); color: var(--ai);
  font: 600 11.5px/1.2 var(--sans); cursor: pointer;
  transition: border-color .15s, opacity .15s;
}
.ai-chip:hover { border-color: var(--ai); }
.ai-chip:disabled { opacity: .45; cursor: default; }

/* One turn: the reader's is a short bubble, the model's is plain full-width text. */
.ai-msg { font: 400 12.8px/1.65 var(--sans); max-width: 100%; }
.ai-msg-you {
  align-self: flex-end; max-width: 90%; padding: 8px 12px;
  border: 1px solid var(--brandline); border-radius: 12px 12px 4px 12px;
  background: var(--brandsoft); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ai-msg-ai { color: var(--text2); }
/* .ai-prose typography lives in the MARKDOWN section at the end of this file. */
.ai-prose.is-writing { white-space: pre-wrap; }
.ai-prose.is-writing::after {
  content: ''; display: inline-block; width: 6px; height: 12px;
  margin-left: 3px; vertical-align: -2px; border-radius: 1px;
  background: var(--ai); animation: ai-caret 1s steps(1) infinite;
}
@keyframes ai-caret { 50% { opacity: 0; } }

/* A refusal is not an answer and must not be dressed as one. */
.ai-msg-error {
  padding: 9px 12px; border: 1px solid var(--warn); border-radius: 9px;
  background: var(--warnsoft); color: var(--text2); font: 500 12px/1.55 var(--sans);
}

/* Waiting: a turning mark, so a slow answer looks like work rather than nothing. */
.ai-waiting { display: flex; align-items: center; gap: 8px; }
.ai-waiting-mark {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--ailine); border-top-color: var(--ai);
  animation: ai-turn 1.6s linear infinite;
}
.ai-waiting-word { font: 600 12px/1 var(--sans); color: var(--text3); }
@keyframes ai-turn { to { transform: rotate(360deg); } }

.ai-composer {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 6px 6px 6px 12px; border: 1px solid var(--border) !important; border-radius: 12px !important;
  background: var(--surface) !important; transition: border-color .15s;
}
.ai-composer:focus-within { border-color: var(--ailine) !important; }
.ai-composer-input {
  flex: 1; min-width: 0; max-height: 116px; padding: 7px 0;
  border: 0; outline: 0; background: none; resize: none;
  color: var(--text); font: 500 12.8px/1.5 var(--sans);
}
.ai-composer-input::placeholder { color: var(--text3); }
.ai-send {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0 !important; border-radius: 8px !important; background: var(--ai) !important; color: #fff !important; cursor: pointer;
}
.ai-send:hover { background: var(--ai) !important; filter: brightness(1.08); }
.ai-send:disabled { opacity: .4; cursor: default; }
.ai-chat-foot { flex: none; margin: 9px 2px 0; font: 500 10.5px/1.5 var(--sans); color: var(--text3); }
.ai-chat-cta {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; border-radius: 10px; background: var(--ai); color: #fff !important;
  font: 700 12.5px/1 var(--sans); text-decoration: none; transition: filter .15s;
}
.ai-chat-cta:hover { filter: brightness(1.08); }

/* ── Mobile: the rail becomes a full-screen sheet behind its own launcher ──
   Below ~900px there is no room for a rail, and a chat squeezed under the
   lesson is a chat nobody scrolls to. So the rail is not drawn inline at all:
   an "Ask AI" pill mirrors the "Lessons" pill, and opening it lifts the SAME
   #aiRail element to full screen. Both controls are off by default — every
   rule that turns them on is inside the ≤900px block below. */
.ai-toggle { display: none; }
.ai-close { display: none; }

/* Below three columns the rail stops being a rail and follows the lesson.
   Lower bound is mandatory: this file loads after learnai.css, so an unbounded
   `max-width: 1200px` would out-rank the ≤900px drawer rules at equal
   specificity and keep a 250px sidebar track on phones — a track the lesson
   then gets auto-placed into, because the drawer sidebar is `position: fixed`
   and no longer occupies one. That is what squeezed the lesson into a ~250px
   column beside a dead gutter. Keep both bounds. */
@media (min-width: 901px) and (max-width: 1200px) {
  .learn-shell.has-rail { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .learn-shell.sb-collapsed.has-rail { grid-template-columns: var(--sb-rail) minmax(0, 1fr); }
  .ai-rail {
    grid-column: 2; position: static; height: auto; max-width: 980px;
    margin: 0 clamp(.9rem, 3vw, 2.4rem) 3rem; padding: 16px 18px 18px;
    border: 1px solid var(--border); border-radius: 12px;
  }
  .ai-chat-log { max-height: 46vh; }
}

/* ── Lesson header: the blog's byline strip ─────────────────────────────── */
.lesson-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 20px; margin-bottom: 26px; padding: 14px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.lby-author { display: flex; align-items: center; gap: 12px; }
.avatar-grad {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand3), var(--ai));
  color: #fff; font: 700 12px/1 var(--sans); text-transform: uppercase; flex: none;
}
.lby-name { display: block; font: 700 13px/1 var(--sans); color: var(--text); }
.lby-date { display: block; margin-top: 5px; font: 500 12px/1 var(--sans); color: var(--text3); }
.lby-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12.5px/1 var(--sans); color: var(--text3); }
.lby-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.lby-actions .tool-btn { height: 32px; padding: 0 12px !important; font-size: 12.5px !important; text-decoration: none; }
.lby-actions .tool-btn.primary {
  background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
}
.lby-actions .tool-btn.primary:hover { background: var(--brand2) !important; border-color: var(--brand2) !important; }
.lby-actions .tool-btn.is-on { background: var(--brandsoft) !important; border-color: var(--brandline) !important; color: var(--brand) !important; }
@media (max-width: 600px) {
  /* .lesson-byline's phone `gap` lives in the ≤600px block further down — it has
     to come after the ≤1100px block, which also sets gap. */
  .lby-actions { margin-left: 0; width: 100%; }
}

/* ── The lesson being switched (htmx) ───────────────────────────────────── */
#lessonSwap { transition: opacity .15s ease; }
#lessonSwap.is-switching { opacity: .45; pointer-events: none; }

/* ============================================================================
   RESPONSIVE — the learn page at every width
   ============================================================================
   Four states, widest first:
     > 1200px   sidebar | lesson | AI rail
     ≤ 1200px   sidebar | lesson, rail follows the lesson as a card
     ≤ 900px    lesson only; sidebar is a drawer, rail still follows
     ≤ 600px    one column, touch-sized controls
   ------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .learn-shell.has-rail { --ai-w: 300px; }
}
@media (max-width: 1100px) {
  .lesson-byline { gap: 14px; }
  .lby-meta { order: 3; width: 100%; }
  .lby-actions { order: 2; }
}
@media (max-width: 900px) {
  /* The lesson is the page: one column, full width, no desktop chrome.
     Restated here (not inherited from the block above) because that block is
     now bounded at 901px — see the note on it. */
  .learn-shell, .learn-shell.has-rail,
  .learn-shell.sb-collapsed, .learn-shell.sb-collapsed.has-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .learn-main { grid-column: 1 / -1; max-width: 100%; min-width: 0; }
  .lesson-byline { margin-bottom: 20px; }

  /* The rail is out of the flow entirely; #aiToggle is the only way to it. */
  .ai-rail { display: none; }

  /* The launcher, twinned with the "Lessons" pill on the other side. It carries
     the AI accent so the two read as different actions, not a matched pair. */
  .ai-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; right: 18px; bottom: 18px; z-index: 1150;
    padding: .6rem 1.1rem; border: 1px solid var(--ai); border-radius: 99px;
    background: var(--ai); color: #fff;
    font: 600 13px/1 var(--sans); cursor: pointer;
    box-shadow: var(--shadow2); transition: opacity .2s ease, filter .15s;
  }
  .ai-toggle:hover { filter: brightness(1.08); }
  /* Only one sheet at a time: each pill stands down while anything is open. */
  body.ai-open .ai-toggle, body.drawer-open .ai-toggle,
  body.ai-open .sidebar-toggle { opacity: 0; pointer-events: none; }

  /* Open: the same element, lifted out of the grid to cover the viewport.
     The open state is a class on <body>, not on the rail — the rail is replaced
     wholesale by the out-of-band htmx swap on every lesson change, which would
     take any class of its own with it. */
  body.ai-open { overflow: hidden; }
  body.ai-open .ai-rail {
    display: flex; flex-direction: column; position: fixed; z-index: 1200;
    /* Longhands, never the `inset` shorthand. If `inset` is dropped — an older
       engine, or any ancestor with a transform/filter making itself the
       containing block — the base rule's `top: var(--nav-h)` survives with
       right/bottom/left auto, and the sheet shrink-wraps its content into a
       half-height panel hanging under the navbar. Set all four, and set the
       size outright rather than deriving it from the offsets. */
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100vh; height: 100dvh;
    max-width: none; max-height: none; margin: 0; overflow: hidden;
    /* Two declarations: if the env() line is dropped the padding still holds. */
    padding: 12px 16px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 0; background: var(--bg);
    animation: ai-sheet-in .22s cubic-bezier(.16, 1, .3, 1);
  }
  body.ai-open .ai-rail:focus { outline: none; }
  /* The conversation takes the screen; head and composer are the only fixed
     rows, so the composer sits on the bottom edge where a thumb expects it. */
  body.ai-open .ai-chat { height: 100%; min-height: 0; }
  /* Full screen means the log takes whatever is left, not a vh guess. */
  body.ai-open .ai-chat-log { max-height: none; }
  body.ai-open .ai-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: auto; flex: none;
    border: 1px solid var(--border2); border-radius: 9px;
    background: var(--surface); color: var(--text2); cursor: pointer;
  }
  body.ai-open .ai-close:hover { background: var(--surface2); color: var(--text); }
}
@keyframes ai-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .lesson-h1 { font-size: 1.45rem; line-height: 1.2; }
  .lesson-byline { align-items: flex-start; gap: 12px; padding: 12px 0; margin-top: 14px; }
  .lby-meta { font-size: 12px; }
  .lby-actions { gap: 6px; }
  /* Touch targets: 34px is the smallest thing a thumb finds reliably. */
  .lby-actions .tool-btn { height: 34px; flex: 1 1 auto; justify-content: center; }
  .ai-chat-log { padding: 14px 0; }
  .ai-msg, .ai-composer-input { font-size: 13.5px; }
  .ai-msg-you { max-width: 88%; }
  /* iOS zooms any field under 16px on focus. */
  .ai-composer-input { font-size: 16px; }
  .ai-composer { padding: 5px 5px 5px 11px; }
  .ai-send { width: 34px; height: 34px; }
  .ai-chat-foot { font-size: 10px; }
  .lesson-nav { flex-direction: column; }
  .lesson-nav .next { text-align: left; }
}
@media (max-width: 380px) {
  .lby-author { gap: 9px; }
  .avatar-grad { width: 30px; height: 30px; font-size: 11px; }
  .ai-chip { padding: 6px 9px; font-size: 11px; }
}
/* Coarse pointers get the quiet controls shown, since there is no hover. */
@media (hover: none) {
  .ai-chat-log { scrollbar-color: var(--border2) transparent; }
}

/* Generating */
.gen-card h1 { color: var(--text); }
.progress-track { background: var(--surface2) !important; }
.progress-fill { background: linear-gradient(90deg, var(--brand), var(--ai)) !important; }
.progress-pct { color: var(--text2); }
.gen-steps li { color: var(--text3); }
.gen-steps li.done { color: var(--text2); }
.gen-steps li.active { color: var(--brand); }
.gen-steps .gs-ico { background: var(--surface2) !important; border: 1px solid var(--border2) !important; }
.gen-steps li.done .gs-ico { background: var(--ok) !important; border-color: var(--ok) !important; }
.gen-steps li.active .gs-ico { background: var(--brand) !important; border-color: var(--brand) !important; }
.sk { background: var(--surface2) !important; }
.gl-title { color: var(--text) !important; }
.gl-dot { background: var(--ok) !important; }

/* Command palette */
.cmdk { border-radius: 14px !important; box-shadow: var(--shadow3) !important; }
.cmdk-overlay { background: rgba(15, 23, 42, .45); }
.cmdk-input-row { border-bottom: 1px solid var(--border); color: var(--text3); }
.cmdk-input-row input { color: var(--text) !important; }
.cmdk-input-row input::placeholder { color: var(--text3) !important; }
.cmdk-esc, .cmdk-foot kbd { background: none !important; border: 1px solid var(--border) !important; color: var(--text3) !important; }
.cmdk-item { color: var(--text2) !important; border-radius: 8px; }
.cmdk-item:hover, .cmdk-item.active { background: var(--surface2) !important; color: var(--text) !important; }
.cmdk-item span:nth-child(2) { color: var(--text) !important; }
.cmdk-foot { color: var(--text3) !important; border-top: 1px solid var(--border); }

/* ── 10. Footer (the blog's .gc-footer) ─────────────────────────────────── */
.site-footer {
  margin-top: 4rem !important; padding: 3rem 0 1.4rem !important;
  background: var(--bg2) !important; border-top: 1px solid var(--border) !important;
  color: var(--text2) !important; font-size: .9rem;
}
.site-footer .footer-tagline { color: var(--text2) !important; }
.site-footer .footer-h { color: var(--text) !important; font: 700 11.5px/1 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; }
.site-footer a { color: var(--text2) !important; font: 500 13px/1.4 var(--sans); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--brand) !important; text-decoration: none !important; }
.site-footer .footer-bottom {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  border-top: 1px solid var(--border) !important; color: var(--text3) !important; font-size: .8rem;
}
.site-footer .footer-logo img { height: 28px; opacity: 1; }
@media (max-width: 480px) {
  /* Matched !important, because the rules above are !important. The grid itself
     is laid out in learnai.css. */
  .site-footer { margin-top: 2.5rem !important; padding: 2rem 0 1.2rem !important; }
  .site-footer .footer-bottom { gap: .5rem; font-size: .76rem; }
}

/* ── 11. Motion — the blog's calm defaults ──────────────────────────────── */
.reveal { transform: translateY(8px); transition: opacity .25s ease-out, transform .25s ease-out; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================================
   MARKDOWN — everything the renderer can emit
   ============================================================================
   courses/services/markdown.py turns on: extra (tables, footnotes, abbr,
   attr_list), admonition, sane_lists, toc, ~~strikethrough~~ and task lists.
   Anything in that list can appear in a lesson or in an AI answer, so all of it
   is styled here, at two scales:

     .prose      the lesson article
     .ai-prose   the same content compressed into the AI rail

   Only the scale differs — a table is a table in both.
   ------------------------------------------------------------------------- */

/* ── Flow: the first and last child never add outer space ───────────────── */
.prose > :first-child, .ai-prose > :first-child { margin-top: 0; }
.prose > :last-child, .ai-prose > :last-child { margin-bottom: 0; }

/* ── Headings ───────────────────────────────────────────────────────────── */
.prose h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 .8rem; line-height: 1.25; }
.prose h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6rem 0 .6rem; line-height: 1.3; }
.prose h4 { font-size: 1.02rem; font-weight: 700; margin: 1.3rem 0 .5rem; }
.prose h5, .prose h6 {
  font-size: .82rem; font-weight: 700; margin: 1.2rem 0 .4rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text2) !important;
}
/* A heading straight after another is a subtitle, not a new section. */
.prose h2 + h3, .prose h3 + h4 { margin-top: .6rem; }
.ai-prose h1, .ai-prose h2, .ai-prose h3, .ai-prose h4, .ai-prose h5, .ai-prose h6 {
  margin: 12px 0 6px; font: 700 13px/1.4 var(--sans); color: var(--text) !important;
}
.ai-prose > h1:first-child, .ai-prose > h2:first-child, .ai-prose > h3:first-child { margin-top: 0; }

/* ── Paragraphs and inline marks ────────────────────────────────────────── */
.ai-prose { overflow-wrap: anywhere; }
.ai-prose p { margin: 0 0 9px; }
.prose em, .ai-prose em { font-style: italic; }
.prose del, .ai-prose del { color: var(--text3); text-decoration: line-through; }
.prose ins, .ai-prose ins { text-decoration: none; background: var(--oksoft); border-radius: 3px; padding: 0 3px; }
.prose mark, .ai-prose mark { background: var(--warnsoft); color: var(--text); border-radius: 3px; padding: 0 3px; }
.prose sup, .prose sub, .ai-prose sup, .ai-prose sub { font-size: .72em; line-height: 0; }
.prose abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.prose kbd {
  font: 600 .82em/1 var(--mono); color: var(--text); background: var(--surface2);
  border: 1px solid var(--border2); border-bottom-width: 2px; border-radius: 5px; padding: .15em .4em;
}
.ai-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.ai-prose strong { color: var(--text); font-weight: 700; }

/* ── Lists ──────────────────────────────────────────────────────────────── */
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--text3); }
.prose ol > li::marker { font-weight: 600; color: var(--text2); }
/* Nested lists sit closer than the paragraphs around them. */
.prose li > ul, .prose li > ol { margin: .3rem 0 .3rem; }
.prose li > p { margin: 0 0 .5rem; }
.prose li > p:last-child { margin-bottom: 0; }
.ai-prose ul, .ai-prose ol { margin: 0 0 9px; padding-left: 17px; }
.ai-prose li { margin: 4px 0; }
.ai-prose li::marker { color: var(--text3); }
.ai-prose li > ul, .ai-prose li > ol { margin: 4px 0; }

/* Task lists (pymdownx custom checkbox): a checklist, not a bulleted list. */
.prose .task-list, .ai-prose .task-list { padding-left: .2rem; list-style: none; }
.prose .task-list-item, .ai-prose .task-list-item { list-style: none; }
.prose .task-list-control, .ai-prose .task-list-control { display: inline-flex; align-items: baseline; gap: .5rem; }
.prose .task-list-control input, .ai-prose .task-list-control input { position: absolute; opacity: 0; }
.prose .task-list-indicator, .ai-prose .task-list-indicator {
  position: relative; top: 2px; display: inline-block; width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--border2); border-radius: 4px; background: var(--surface);
}
.prose .task-list-control input:checked + .task-list-indicator,
.ai-prose .task-list-control input:checked + .task-list-indicator {
  background: var(--brand); border-color: var(--brand);
}
.prose .task-list-control input:checked + .task-list-indicator::after,
.ai-prose .task-list-control input:checked + .task-list-indicator::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Definition lists (extra). */
.prose dl { margin: 0 0 1rem; }
.prose dt { font-weight: 700; color: var(--text); margin-top: .8rem; }
.prose dd { margin: .25rem 0 0 1.1rem; color: var(--text2); }

/* ── Blockquote ─────────────────────────────────────────────────────────── */
.prose blockquote {
  margin: 1.2rem 0; padding: .8rem 1.1rem; border-radius: 0 10px 10px 0;
  border-left: 3px solid var(--brandline) !important; background: var(--sunken); color: var(--text2);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.ai-prose blockquote {
  margin: 8px 0; padding: 7px 10px; border-left: 2px solid var(--brandline);
  background: var(--sunken); color: var(--text2); border-radius: 0 7px 7px 0;
}

/* ── Rules, images, media ───────────────────────────────────────────────── */
.prose hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--border); }
.ai-prose hr { margin: 12px 0; border: 0; border-top: 1px solid var(--border); }
.prose img { max-width: 100%; height: auto; margin: 1rem 0; border-radius: 10px; border: 1px solid var(--border); }
.ai-prose img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── Tables — they scroll inside themselves rather than widen the page ──── */
.prose table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem;
  border: 1px solid var(--border) !important; border-radius: 10px;
}
.prose th, .prose td { border: 1px solid var(--border) !important; padding: .55rem .8rem; text-align: left; vertical-align: top; }
.prose th { background: var(--surface2) !important; font-weight: 700; white-space: nowrap; }
.prose tbody tr:nth-child(even) td { background: var(--sunken); }
.prose td[align="right"], .prose th[align="right"] { text-align: right; }
.prose td[align="center"], .prose th[align="center"] { text-align: center; }
.ai-prose table {
  display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
  margin: 8px 0; font-size: 11.5px; border: 1px solid var(--border);
}
.ai-prose th, .ai-prose td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
.ai-prose th { background: var(--surface2); font-weight: 700; }

/* ── Code in the rail (the lesson's own blocks become CodeMirror) ───────── */
.ai-prose code {
  font: 500 11.5px/1.5 var(--mono); color: var(--text);
  background: var(--surface2); padding: 1px 5px; border-radius: 4px;
}
.ai-prose pre {
  margin: 8px 0; padding: 10px 12px; border-radius: 9px; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--code-line);
}
.ai-prose pre code {
  background: none; border: 0; padding: 0; color: var(--code-fg);
  font: 500 11.5px/1.6 var(--mono); white-space: pre;
}

/* ── Admonitions (!!! note / tip / warning) ─────────────────────────────── */
.prose .admonition { margin: 1.2rem 0; padding: .85rem 1.1rem; border-radius: 10px; }
.prose .admonition > :last-child { margin-bottom: 0; }
.prose .admonition-title { font-weight: 700; margin-bottom: .35rem; }
.prose .admonition.tip, .prose .admonition.hint, .prose .admonition.success {
  background: var(--oksoft) !important; border-color: var(--ok) !important;
}
.prose .admonition.tip .admonition-title, .prose .admonition.hint .admonition-title,
.prose .admonition.success .admonition-title { color: var(--ok) !important; }
.prose .admonition.warning, .prose .admonition.caution {
  background: var(--warnsoft) !important; border-color: var(--warn) !important;
}
.prose .admonition.warning .admonition-title, .prose .admonition.caution .admonition-title { color: var(--warn) !important; }
.prose .admonition.danger, .prose .admonition.error {
  background: var(--errsoft) !important; border-color: var(--err) !important;
}
.prose .admonition.danger .admonition-title, .prose .admonition.error .admonition-title { color: var(--err) !important; }

/* ── Footnotes and the table of contents (extra, toc) ───────────────────── */
.prose .footnote { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text2); }
.prose .footnote ol { padding-left: 1.1rem; }
.prose .footnote-ref { text-decoration: none; font-weight: 700; padding: 0 2px; }
.prose .footnote-backref { text-decoration: none; margin-left: 4px; }
.prose .toc { margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--sunken); }
.prose .toc ul { margin: 0; padding-left: 1.1rem; }
.prose .toc > ul { padding-left: .2rem; list-style: none; }

/* ── details / summary ──────────────────────────────────────────────────── */
.prose details, .ai-prose details {
  margin: 1rem 0; padding: .7rem 1rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
}
.prose summary, .ai-prose summary { cursor: pointer; font-weight: 700; color: var(--text); }
.prose details[open] summary { margin-bottom: .6rem; }

@media (max-width: 600px) {
  .prose { font-size: 15.5px; }
  .prose h2 { font-size: 1.3rem; margin-top: 1.6rem; }
  .prose h3 { font-size: 1.1rem; }
  .prose ul, .prose ol { padding-left: 1.15rem; }
  .prose table { font-size: .86rem; }
}