/* ==========================================================================
   Design System Tokens — SPR-2.0.1
   ========================================================================== */
:root {
  /* LIGHT theme — calm editorial: warm paper, one restrained accent, flat */
  --bg-primary: #f6f4ef;     /* warm off-white paper */
  --bg-surface: #ffffff;
  --bg-elevated: #eeeae1;
  --text-primary: #1c1b18;   /* near-black ink */
  --text-secondary: #6b675f; /* warm grey */
  --accent-primary: #2f5d50; /* deep muted pine — the single accent */
  --accent-warm: #a8622f;    /* muted clay, used sparingly */
  --accent-success: #2f5d50;
  --accent-cta: #2f5d50;
  --border: #e4ded2;         /* warm hairline */
  --nav-bg: #ffffff;
  --nav-text: #1c1b18;
  --card-shadow: none;       /* editorial = hairline borders, not shadows */
  --radius: 8px;

  /* Spacing */
  --space-section: 4rem;
  --space-card: 1.5rem;
  --max-content-width: 1200px;

  /* Typography — serif display for character, sans for body */
  --font-heading: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
  --font-body: 'Heebo', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* DARK theme — warm-dark, same single accent */
html[data-theme="dark"] {
  --bg-primary: #15140f;
  --bg-surface: #1d1c17;
  --bg-elevated: #2a2822;
  --text-primary: #f0ece3;
  --text-secondary: #a8a297;
  --accent-primary: #6fae9c;
  --accent-warm: #cd8b5f;
  --accent-success: #6fae9c;
  --accent-cta: #6fae9c;
  --border: #34322a;
  --nav-bg: #1a1914;
  --nav-text: #f0ece3;
  --card-shadow: none;
}

/* --- Theme-aware overrides for Bootstrap dark utilities --- */
.navbar.bg-dark { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border); }
.navbar-dark .navbar-brand,
.navbar-dark .nav-link,
.navbar-dark .navbar-nav .nav-link { color: var(--nav-text) !important; }
.navbar-dark .navbar-toggler-icon { filter: var(--theme-light, none); }
footer.bg-dark { background: var(--nav-bg) !important; border-top: 1px solid var(--border); }
footer.bg-dark .text-secondary, footer.bg-dark a.text-secondary { color: var(--text-secondary) !important; }
.table-dark { --bs-table-bg: var(--bg-surface); --bs-table-color: var(--text-primary);
              --bs-table-border-color: var(--border); color: var(--text-primary); }
.badge.bg-dark { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
.btn { border-radius: 10px; }

/* ==========================================================================
   Base styles
   ========================================================================== */
body {
    font-family: var(--font-body), Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: var(--font-heading);
}

/* Ensure text-muted is visible on dark backgrounds */
.text-muted {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   Component: .card-surface
   ========================================================================== */
.card-surface {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-card);
}

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero {
  padding: 4.5rem 1rem 3rem;
  text-align: center;
  background: radial-gradient(circle at 50% -10%, rgba(59, 130, 246, 0.14), transparent 60%);
  border-radius: 16px;
}
.hero-badge {
  display: inline-block;
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-warm);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
}
.hero-title {
  font-size: clamp(3.25rem, 9vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.hero-tagline {
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.hero-punch {
  max-width: 660px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.75;
}
.hero-cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Slim homepage hero — keeps the joke but stays out of the way so cards show on entry */
.hero-slim {
  text-align: center;
  padding: 1.25rem 1rem 0.25rem;
}
.hero-brand {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.hero-joke {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* "Continue watching" — a slim, content-width link pill (no button) */
.continue-watching {
  display: flex;
  align-self: flex-start;          /* stay narrow inside the home flex column */
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--bg-elevated);                                          /* fallback */
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border));
  color: var(--text-primary);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.3;
  transition: background .15s ease, border-color .15s ease;
}
.continue-watching:hover {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-surface));
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.continue-watching .cw-ico { color: var(--accent-primary); font-size: 1.15rem; flex: 0 0 auto; }
.continue-watching .cw-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-watching .cw-time { color: var(--text-secondary); flex: 0 0 auto; }

/* Feature cards (the "what's actually here" grid) */
.feature-card {
  height: 100%;
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.feature-card .feature-icon {
  font-size: 1.9rem;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
  display: block;
}
.feature-card.is-soon {
  opacity: 0.65;
  cursor: default;
}
.feature-card.is-soon:hover {
  transform: none;
  border-color: var(--border);
}
.feature-card.is-soon .feature-icon {
  color: var(--text-secondary);
}
.soon-badge {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}
.live-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-success);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Apex section cards (the four big pillars) */
.apex-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  height: 100%;
  padding: 1.6rem 1.75rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.apex-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.apex-icon {
  font-size: 2.6rem;
  color: var(--accent-primary);
  flex-shrink: 0;
}
.apex-card.is-soon .apex-icon {
  color: var(--text-secondary);
}

/* Training catalog — domain & track grouping */
.domain-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.domain-icon {
  font-size: 2.2rem;
  color: var(--accent-primary);
  flex-shrink: 0;
  line-height: 1.2;
}
.track-title {
  border-inline-start: 3px solid var(--accent-primary);
  padding-inline-start: 0.6rem;
  margin-bottom: 1rem;
}
.track-title .bi {
  color: var(--accent-primary);
}

/* Drill-down browse cards (domain / track tiles) */
.browse-card {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.browse-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.browse-icon {
  font-size: 2.1rem;
  color: var(--accent-primary);
  flex-shrink: 0;
  line-height: 1.1;
}
.browse-card.is-soon {
  cursor: default;
}
.browse-card.is-soon:hover {
  transform: none;
  border-color: var(--border);
}
.browse-card.is-soon .browse-icon {
  color: var(--text-secondary);
}
.browse-hints {
  line-height: 2;
}
.hint-chip {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.72rem;
  margin-inline-end: 0.25rem;
  text-decoration: none;
}
a.hint-chip:hover {
  color: var(--text-primary);
}

/* Per-level intro cards (top of a domain page) */
.intro-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text-primary);
  border-inline-start: 3px solid var(--accent-primary);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.intro-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.intro-card.is-soon {
  opacity: 0.7;
  border-inline-start-color: var(--border);
  cursor: default;
}
.intro-card.is-soon:hover {
  transform: none;
}
.intro-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-primary);
}
.intro-card.is-soon .intro-label {
  color: var(--text-secondary);
}
.intro-title {
  font-weight: 600;
  font-size: 0.95rem;
}

/* ==========================================================================
   Component: .whatsapp-sticky
   ========================================================================== */
.whatsapp-sticky {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  background-color: var(--accent-cta);
  color: #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.whatsapp-sticky:hover {
  background-color: #15803d;
  color: #fff;
}

/* RTL mirror */
html[dir="rtl"] .whatsapp-sticky {
  right: auto;
  left: 16px;
}

/* Mobile: shrink to 48px */
@media (max-width: 768px) {
  .whatsapp-sticky {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    bottom: 1rem;
    right: 1rem;
  }
}

/* ==========================================================================
   Keyboard focus
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Corporate page components
   ========================================================================== */
.corporate-hero-photo {
  max-width: 300px;
  height: auto;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .corporate-hero-photo {
    max-width: 200px;
  }
}

.corporate-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.corporate-tier-cta {
  width: 100%;
  display: block;
}

/* Lesson notes markdown content */
.lesson-notes { padding: var(--space-card); }
/* Keep images in lesson notes within the page width */
.lesson-notes img {
  max-width: 100%; height: auto; display: block;
  margin: .75rem 0; border-radius: 8px; border: 1px solid var(--border);
}
.lesson-notes pre {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.lesson-notes code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    direction: ltr;
    unicode-bidi: embed;
}
/* In-lesson runnable Python cell: CodeMirror editor + Run + output.
   Breaks out of the notes-card padding so it's full-width and prominent. */
.pyrun { margin: 1.3rem calc(-1 * var(--space-card)) 3.2rem; background: var(--bg-surface);
  border-block: 1px solid var(--border); }
.pyrun .CodeMirror { height: auto; min-height: 200px; background: #fcfdff; color: #1a1d24;
  font-family: var(--font-mono); font-size: .95rem; line-height: 1.6; direction: ltr; text-align: left; }
.pyrun .CodeMirror-scroll { min-height: 200px; }
.pyrun .CodeMirror-gutters { background: #eef1f6; border-right: 1px solid var(--border); }
.pyrun .CodeMirror-linenumber { color: #9aa3b2; }
.pyrun-bar { display: flex; align-items: center; gap: .7rem;
  padding: .55rem var(--space-card); border-top: 1px solid var(--border); }
.pyrun-status { font-size: .8rem; font-weight: 600; color: #1a7f37; }
.pyrun-hint { margin-inline-start: auto; font-size: .72rem; color: var(--text-secondary);
  direction: ltr; }
/* "Click Run" emphasis: a pulsing button + an animated finger pointing at it.
   Both stop once the student runs the cell (.pyrun-used). */
.pyrun-point { font-size: 1.5rem; line-height: 1; transform-origin: 70% 60%;
  animation: pyrun-nudge 1.1s ease-in-out infinite; }
.pyrun-run.pyrun-cta { animation: pyrun-pulse 1.5s ease-in-out infinite; }
.pyrun.pyrun-used .pyrun-point { display: none; }
.pyrun.pyrun-used .pyrun-run { animation: none; }
/* A livelier "tap" wiggle so it grabs attention and points at the button. */
@keyframes pyrun-nudge {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  15%      { transform: translateX(-5px) rotate(-12deg) scale(1.05); }
  30%      { transform: translateX(-11px) rotate(-20deg) scale(1.18); }
  45%      { transform: translateX(-5px) rotate(-12deg) scale(1.05); }
  60%      { transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes pyrun-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(24,101,242,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(24,101,242,0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(24,101,242,0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pyrun-point, .pyrun-run.pyrun-cta { animation: none; }
}
/* .pyrun .pyrun-out (two classes) outranks ".lesson-notes pre", which would
   otherwise force a light background and make the light output text invisible. */
.pyrun .pyrun-out { margin: 0; padding: .85rem var(--space-card); background: #1a1d24; color: #e6e6e6;
  font-family: var(--font-mono); font-size: .88rem; line-height: 1.5; white-space: pre-wrap;
  word-break: break-word; border-top: 1px solid var(--border); max-height: 340px; overflow: auto;
  direction: ltr; text-align: left; }
/* Check result tint (3 classes -> still outranks .lesson-notes pre) */
.pyrun .pyrun-out.pyrun-ok { background: #0f2e1a; color: #9be7b4; font-family: inherit;
  font-size: .95rem; font-weight: 600; text-align: center; direction: rtl; }
.pyrun .pyrun-out.pyrun-fail { background: #2e1416; color: #f3b0b0; font-family: inherit;
  font-size: .92rem; text-align: center; direction: rtl; }
.pyrun-badge { font-size: .78rem; font-weight: 700; color: #1a7f37;
  background: rgba(26,127,55,.14); border-radius: 999px; padding: .12rem .6rem; }
.lesson-notes table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.lesson-notes th,
.lesson-notes td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
}
.lesson-notes thead th {
    background: var(--bg-elevated);
    font-weight: 600;
}
.lesson-notes tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Lesson reflection (AI feedback) */
.reflection-bubble {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.65;
}
.reflection-user {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.reflection-ai {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.30);
}
.reflection-ai .bi {
    color: var(--accent-primary);
}

/* ==========================================================================
   Lesson page — two-column layout
   ========================================================================== */
.lesson-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Sidebar — rendered FIRST in HTML so it sits on the right in RTL */
.lesson-sidebar {
  flex-shrink: 0;
  width: 280px;
}

.lesson-sidebar-inner {
  position: sticky;
  top: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.lesson-sidebar-course-title {
  display: block;
  padding: .75rem 1rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.lesson-sidebar-course-title:hover { color: var(--accent-primary); }

.lesson-list {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.lesson-list-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: .82rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.lesson-list-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.lesson-list-item--active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
  border-inline-end: 3px solid var(--accent-primary);
}
.lesson-list-item--locked {
  cursor: not-allowed;
  opacity: .45;
  pointer-events: none;
}

.lesson-list-icon { flex-shrink: 0; width: 18px; text-align: center; }
.lesson-list-title { flex-grow: 1; line-height: 1.3; }
.lesson-list-dur { flex-shrink: 0; font-size: .75rem; opacity: .7; }

/* Main content area */
.lesson-main { flex-grow: 1; min-width: 0; }

/* 16:9 responsive player */
.lesson-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}
.lesson-player iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Placeholder when not configured */
.lesson-player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 260px;
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

/* Mobile: collapse sidebar */
@media (max-width: 767px) {
  /* align-items:flex-start (set above for the desktop sticky sidebar) makes the
     stacked column size to content — a wide <pre> code line then blows the page
     out. Stretch to the container instead; wide code scrolls inside its block. */
  .lesson-layout { flex-direction: column; align-items: stretch; }
  .lesson-sidebar { width: 100%; }
  .lesson-main { min-width: 0; max-width: 100%; }
  .lesson-sidebar-inner { position: static; }
  .lesson-list { max-height: 240px; }
}

/* ==========================================================================
   Lesson quiz
   ========================================================================== */
.quiz-option {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
}
.quiz-option:hover { border-color: var(--accent-primary); }
.quiz-option:has(input:checked) {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated));
}
.quiz-already-done { opacity: .75; }

/* ==========================================================================
   Course completion certificate
   ========================================================================== */
/* A formal diploma — parchment + gold, fixed colors (theme-independent) so it
   looks identical in light/dark and prints true. --cert-gold is the one accent. */
.certificate-card {
  --cert-gold: #b8912e;
  --cert-gold-lt: #e7c766;
  --cert-ink: #2b261d;
  --cert-ink-soft: #6a6151;
  width: min(720px, 100%);
  background: #fdfbf3;                         /* parchment */
  background-image:
    radial-gradient(circle at 50% -5%, rgba(184,145,46,.07), transparent 55%),
    radial-gradient(circle at 50% 105%, rgba(184,145,46,.06), transparent 55%);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 12px 50px rgba(0,0,0,.28);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.certificate-border {
  position: relative;
  border: 2px solid var(--cert-gold);
  outline: 1px solid var(--cert-gold);
  outline-offset: 5px;                          /* double-rule gold frame */
  border-radius: 4px;
  padding: 3.4rem 2.75rem 2.4rem;
  text-align: center;
  color: var(--cert-ink);
}

/* gold corner flourishes */
.cert-corner {
  position: absolute; width: 26px; height: 26px;
  border: 2px solid var(--cert-gold); pointer-events: none;
}
.cert-corner-tl { top: 10px; inset-inline-start: 10px; border-inline-end: 0; border-bottom: 0; }
.cert-corner-tr { top: 10px; inset-inline-end: 10px; border-inline-start: 0; border-bottom: 0; }
.cert-corner-bl { bottom: 10px; inset-inline-start: 10px; border-inline-end: 0; border-top: 0; }
.cert-corner-br { bottom: 10px; inset-inline-end: 10px; border-inline-start: 0; border-top: 0; }

.certificate-logo {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-bottom: 1.1rem;
}
.certificate-wordmark { font-size: 1.5rem; font-weight: 900; letter-spacing: -.5px; color: var(--cert-ink); }
.certificate-wordmark span { color: var(--cert-gold); }

.certificate-label {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: .32em;
  color: var(--cert-gold);
  margin-bottom: 1.6rem;
  font-weight: 700;
}

.certificate-awarded-to { color: var(--cert-ink-soft); font-size: .92rem; margin-bottom: .35rem; }

.certificate-name {
  font-family: var(--font-heading);
  font-size: 2.4rem; font-weight: 700; color: var(--cert-ink);
  margin-bottom: 1.1rem; line-height: 1.1;
}

.certificate-text { color: var(--cert-ink-soft); font-size: .92rem; margin-bottom: .45rem; }

.certificate-course {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 700; color: var(--cert-ink); margin-bottom: 1.25rem;
}

.certificate-divider {
  position: relative;
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cert-gold), transparent);
  margin: 0 auto 1.4rem;
}
.certificate-divider::after {
  content: "\2666";                              /* ◆ */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: var(--cert-gold); font-size: .7rem; background: #fdfbf3; padding: 0 .4rem;
}

/* Gold seal of achievement with ribbon tails */
.certificate-seal { position: relative; width: 92px; height: 92px; margin: .5rem auto 1.6rem; }
.certificate-seal-disc {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--cert-gold-lt), var(--cert-gold) 62%, #8f6f17);
  color: #fff5d6; font-size: 2.2rem; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.25),
              inset 0 0 0 4px rgba(255,255,255,.3), inset 0 0 0 5px var(--cert-gold);
}
.certificate-seal-ribbon {
  position: absolute; top: 58px; width: 18px; height: 40px; background: var(--cert-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); z-index: 1;
}
.certificate-seal-ribbon   { left: 28px; transform: rotate(10deg); }
.certificate-seal-ribbon-2 { left: auto; right: 28px; transform: rotate(-10deg); background: #9f7c1c; }

.certificate-footer {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin: 0 auto 1.4rem; max-width: 460px;
}
.certificate-sign, .certificate-issued { flex: 1; text-align: center; }
.certificate-sign-name {
  font-family: var(--font-heading); font-size: 1.5rem; color: var(--cert-ink);
  font-style: italic; line-height: 1; padding-bottom: .35rem;
  border-bottom: 1px solid var(--cert-gold);
}
.certificate-date {
  font-size: 1rem; color: var(--cert-ink); padding-bottom: .35rem;
  border-bottom: 1px solid var(--cert-gold);
}
.certificate-sign-title { font-size: .72rem; color: var(--cert-ink-soft); margin-top: .35rem; letter-spacing: .04em; }

.certificate-id { font-size: .72rem; color: var(--cert-ink-soft); opacity: .75; margin: 0; }
.certificate-id code { font-size: .68rem; letter-spacing: .03em; color: var(--cert-ink-soft); }

a { color: #2c6e49; }

/* Community (EPIC-6.1/6.2): post bodies inside cards keep card padding only */
.card-surface .lesson-notes { padding: 0; }

/* =====================================================================
   Home — two-column shell with a collapsible community rail (RTL)
   ===================================================================== */
.home-shell { position: relative; }
.home-main { min-width: 0; }

/* ---- Rail: MOBILE-FIRST = off-canvas drawer from the physical right ---- */
.home-rail {
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: 86%; max-width: 360px; z-index: 1045;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(0,0,0,.20);
  transform: translateX(110%);          /* hidden off the right edge */
  transition: transform .25s ease;
}
.home-shell.rail-drawer-open .home-rail { transform: translateX(0); }
.home-rail-inner { height: 100%; overflow-y: auto; padding: 1rem; }
body.rail-no-scroll { overflow: hidden; }

.rail-backdrop {
  position: fixed; inset: 0; z-index: 1044;
  background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.home-shell.rail-drawer-open ~ .rail-backdrop { opacity: 1; visibility: visible; }

.rail-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1040;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--accent-primary); color: #fff; font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer;
}
.rail-reopen { display: none; }     /* desktop-only */
.rail-collapse { display: none; }   /* desktop-only */

/* ---- Rail content ---- */
.rail-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.rail-title { font-size: 1rem; font-weight: 700; margin: 0; flex: 1 1 auto; }
.rail-icon-btn {
  border: none; background: transparent; color: var(--text-secondary);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; line-height: 1;
}
.rail-icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

.rail-join {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem; margin-bottom: 1rem;
}
.rail-section { margin-bottom: 1.1rem; }
.rail-section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text-secondary); text-transform: uppercase;
  padding-bottom: .35rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.rail-section-head a { font-weight: 500; text-transform: none; text-decoration: none; color: var(--accent-primary); font-size: .8rem; }

.rail-item {
  display: block; text-decoration: none; color: var(--text-primary);
  padding: .5rem .25rem; border-radius: 8px;
}
.rail-item + .rail-item { border-top: 1px solid var(--border); }
.rail-item:hover { background: var(--bg-elevated); }
.rail-item-title { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.rail-item-text  { font-size: .85rem; line-height: 1.35; }
.rail-item-meta  { font-size: .75rem; color: var(--text-secondary); margin-bottom: .15rem; }

.rail-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #e11d48; margin-bottom: .15rem; }
.rail-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 0 rgba(225,29,72,.6); animation: railPulse 1.6s infinite; }
@keyframes railPulse { 0% { box-shadow: 0 0 0 0 rgba(225,29,72,.5); } 70% { box-shadow: 0 0 0 6px rgba(225,29,72,0); } 100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); } }

.rail-member { display: flex; align-items: center; gap: .5rem; padding: .4rem .25rem; text-decoration: none; color: var(--text-primary); border-radius: 8px; }
.rail-member:hover { background: var(--bg-elevated); }
.rail-member + .rail-member { border-top: 1px solid var(--border); }
.rail-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rail-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-secondary); }
.rail-member-name { flex: 1 1 auto; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-member-pts { font-size: .78rem; font-weight: 700; color: var(--accent-primary); }
.rail-empty { padding: 1rem .25rem; }

/* "coming soon" worlds subheading — makes the grid read as secondary */
.worlds-subhead {
  font-size: .95rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border);
}

/* ---- DESKTOP (≥992px): rail becomes an inline, sticky, collapsible column ---- */
@media (min-width: 992px) {
  .home-shell { display: flex; gap: 1.5rem; align-items: flex-start; }
  /* RTL flow puts the first child (the rail) on the right automatically */
  .home-rail {
    position: sticky; top: 72px; align-self: flex-start;
    flex: 0 0 320px; width: 320px; max-width: none;
    max-height: calc(100vh - 88px);   /* cap to viewport so it pins at top:72 */
    transform: none; background: transparent; border: none; box-shadow: none; z-index: auto;
  }
  .home-rail-inner {
    max-height: calc(100vh - 88px); overflow-y: auto; padding: 1rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--card-shadow);
  }
  /* Collapse control is FIXED (JS aligns it to the rail's edge) so it stays
     visible at any scroll position — sticky can't, because the rail gets
     pushed up by the bottom of a short main column. */
  .home-shell[data-rail="open"] .rail-collapse {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 80px; z-index: 1041;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--bg-surface); border: 1px solid var(--border);
    box-shadow: var(--card-shadow); color: var(--text-secondary);
  }
  .home-shell[data-rail="open"] .rail-collapse:hover { color: var(--text-primary); background: var(--bg-elevated); }
  .home-main { flex: 1 1 auto; }

  .rail-fab, .rail-close-mobile, .rail-backdrop { display: none !important; }
  .rail-collapse { display: inline-flex; align-items: center; justify-content: center; }

  /* Collapsed: hide the rail, show a thin re-open tab on the right edge */
  .home-shell[data-rail="collapsed"] .home-rail { display: none; }
  .home-shell[data-rail="collapsed"] ~ .rail-reopen {
    display: inline-flex; align-items: center; gap: .35rem;
    position: fixed; right: 0; top: 40%; z-index: 1040;
    border: 1px solid var(--border); border-right: none;
    background: var(--bg-surface); color: var(--text-primary);
    padding: .5rem .6rem; border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 10px rgba(0,0,0,.12); cursor: pointer; font-size: .85rem; font-weight: 600;
    writing-mode: vertical-rl;
  }
}

/* =====================================================================
   Home — "הדרכה" hero box (the live product, focal, light-blue)
   ===================================================================== */
.training-hero {
  display: flex; align-items: stretch; gap: 0;
  text-decoration: none; color: var(--text-primary);
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe; border-radius: var(--radius);
  overflow: hidden; min-height: 320px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.training-hero:hover {
  transform: translateY(-4px); color: var(--text-primary);
  box-shadow: 0 12px 30px rgba(24, 101, 242, .18);
}
html[data-theme="dark"] .training-hero {
  background: linear-gradient(135deg, #18223b 0%, #1e293b 100%);
  border-color: #2d3a5e;
}
.training-hero-body { flex: 1 1 58%; padding: 1.85rem 2rem; display: flex; flex-direction: column; }
.training-hero-title { font-size: 1.65rem; font-weight: 700; margin: 0 0 .5rem; }
.training-hero-title i { color: var(--accent-primary); margin-inline-end: .35rem; }
.training-hero-lead { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1rem; max-width: 46ch; }
.training-hero-list {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem;
}
.training-hero-list li { font-size: .92rem; font-weight: 500; display: flex; align-items: center; gap: .45rem; }
.training-hero-list i { color: var(--accent-primary); font-size: .9rem; flex: 0 0 auto; }
.training-hero-foot { margin-top: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.training-hero-meta { font-size: .82rem; color: var(--text-secondary); }
.training-hero-media { flex: 0 0 42%; background: #fff; position: relative; overflow: hidden; }
html[data-theme="dark"] .training-hero-media { background: rgba(255,255,255,.04); }
.thm-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.thm-layer.is-front { opacity: 1; }
.thm-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Per-clip caption: fades in/out in sync with each crossfade (JS toggles .is-on) */
.thm-caption {
  position: absolute; right: 0; left: 0; bottom: 0; z-index: 2;
  padding: 1.4rem 1.1rem .9rem;
  font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: #fff;
  text-align: right; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.thm-caption.is-on { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   STL gallery (the learner's 3D-model "exhibition") + enlarge modal
   ========================================================================== */
.stl-gallery { margin-top: 1rem; }
.stl-gallery-title { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; color: var(--text-secondary); }
.stl-gallery-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.stl-tile {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg-elevated); cursor: pointer; transition: border-color .15s, transform .15s;
}
.stl-tile:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.stl-tile-canvas { width: 100%; height: 84px; display: block; }
.stl-tile-label {
  font-size: .7rem; line-height: 1.2; padding: .3rem .4rem; text-align: center;
  color: var(--text-secondary); border-top: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* On the course page / certificate the tiles can be a touch larger */
.stl-gallery--lg .stl-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stl-gallery--lg .stl-tile-canvas { height: 140px; }

/* Member profile: the learner's reflections + shared links feed */
.reflection-feed { display: flex; flex-direction: column; gap: .7rem; }
.reflection-feed-item { border: 1px solid var(--border); border-radius: 10px; padding: .65rem .8rem; background: var(--bg-elevated); }
.reflection-feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.reflection-feed-lesson { font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--accent-primary); }
.reflection-feed-date { font-size: .72rem; color: var(--text-secondary); }
.reflection-feed-text { font-size: .88rem; line-height: 1.5; color: var(--text-primary); margin-bottom: .35rem; overflow-wrap: anywhere; }
.reflection-feed-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; text-decoration: none; color: var(--accent-cta); overflow-wrap: anywhere; }
.reflection-feed-link:hover { text-decoration: underline; }

/* Admin-only per-user lesson activity timeline (/c/<user>/activity/) */
.activity-feed { display: flex; flex-direction: column; gap: .6rem; }
.activity-item {
  border: 1px solid var(--border); border-inline-start-width: 3px; border-radius: 10px;
  padding: .6rem .8rem; background: var(--bg-elevated);
}
.activity-reflection { border-inline-start-color: var(--accent-primary); }
.activity-code { border-inline-start-color: #8b5cf6; }
.activity-submission { border-inline-start-color: var(--accent-cta); }
.activity-complete { border-inline-start-color: #22c55e; }
.activity-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.activity-label { font-weight: 700; font-size: .82rem; }
.activity-date { font-size: .72rem; color: var(--text-secondary); }
.activity-lesson { font-size: .8rem; margin: .15rem 0 .3rem; }
.activity-lesson a { text-decoration: none; color: var(--accent-primary); }
.activity-text {
  font-size: .86rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap;
  overflow-wrap: anywhere; background: var(--bg-surface); border-radius: 8px; padding: .4rem .55rem; margin-bottom: .3rem;
}
.activity-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; text-decoration: none; color: var(--accent-cta); overflow-wrap: anywhere; }
.activity-link:hover { text-decoration: underline; }
.activity-extra { font-size: .76rem; color: var(--text-secondary); margin-top: .25rem; }
.stl-gallery--lg .stl-tile-label { font-size: .8rem; }

.stl-modal {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
}
.stl-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.stl-modal-box {
  position: relative; z-index: 1; width: min(90vw, 640px);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.2rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.stl-modal-title { font-weight: 600; margin-bottom: .6rem; }
.stl-modal-canvas { width: 100%; height: min(60vh, 460px); border-radius: 10px; background: var(--bg-elevated); }
img.stl-tile-canvas { object-fit: cover; background: var(--bg-elevated); }
.stl-tile-icon { display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--accent-primary); font-size: 2.2rem; }
.stl-modal-frame { width: 100%; }
.stl-modal-frame iframe { width: 100%; height: min(64vh, 420px); border: 0; border-radius: 10px; }
/* Inline embedded Scratch player on the lesson */
.scratch-embed { position: relative; width: 100%; max-width: 485px; }
.scratch-embed iframe { width: 100%; height: 402px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); }
.stl-modal-close {
  position: absolute; top: .4rem; inset-inline-end: .6rem; background: none; border: none;
  font-size: 1.6rem; line-height: 1; color: var(--text-secondary); cursor: pointer;
}
.stl-modal-close:hover { color: var(--text-primary); }

/* "You're certified" trophy badge (lesson top + course page) */
.cert-trophy {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  padding: .25rem .7rem; border-radius: 999px;
  color: #8a6d1a; background: rgba(245, 197, 24, .16);
  border: 1px solid rgba(245, 197, 24, .5);
}
.cert-trophy:hover { background: rgba(245, 197, 24, .26); color: #6d560f; }
.cert-trophy .bi { color: #e0a800; }
html[data-theme="dark"] .cert-trophy { color: #f3d27a; }
html[data-theme="dark"] .cert-trophy:hover { color: #ffe9a8; }

/* Home: on desktop, fill exactly one screen — the training card grows to
   absorb the leftover vertical space so the page reads as one gapless view
   (no scroll, no dead gap above the footer). Where :has() is unsupported it
   simply falls back to the natural, already-fitting layout. */
@media (min-width: 992px) {
  main:has(> .home-main) { display: flex; flex-direction: column; }
  .home-main { display: flex; flex-direction: column; flex: 1 1 auto; }
  .home-train { display: flex; flex: 1 1 auto; }
  .home-train > .training-hero { flex: 1 1 auto; }
  /* Keep the tagline on a single line on desktop. */
  .hero-joke { white-space: nowrap; }
}

@media (max-width: 767px) {
  .training-hero { flex-direction: column; min-height: 0; }
  /* Mobile: drop the tagline entirely (it's a desktop attention-grabber). */
  .hero-slim { display: none; }
  .thm-caption { font-size: .92rem; padding: 1rem .9rem .7rem; }
  .training-hero-media { flex: 0 0 170px; order: -1; }   /* image on top on mobile */
  .training-hero-list { grid-template-columns: 1fr; }
  .training-hero-body { padding: 1.4rem 1.5rem; }
}

/* =====================================================================
   Courses catalog — visual grid with progress
   ===================================================================== */
.catalog-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.catalog-count {
  font-size: .9rem; font-weight: 600; color: var(--accent-primary);
  background: rgba(24,101,242,.1); border-radius: 999px; padding: .15rem .7rem;
  vertical-align: middle; margin-inline-start: .4rem;
}
.catalog-search-wrap { position: relative; flex: 0 1 320px; }
.catalog-search-wrap i {
  position: absolute; top: 50%; inset-inline-start: .8rem; transform: translateY(-50%);
  color: var(--text-secondary); pointer-events: none;
}
.catalog-search {
  width: 100%; padding: .55rem .9rem; padding-inline-start: 2.2rem;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-primary); font-size: .95rem;
}
.catalog-search:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(24,101,242,.15); }

/* Floating toolbar: view toggle + search, side by side, stuck under the navbar. */
.catalog-toolbar {
  position: sticky; top: var(--cat-toolbar-top, 56px); z-index: 15;
  display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap;
  padding: .6rem 0; margin-bottom: 1.1rem;
  background: var(--bg-primary); border-bottom: 1px solid var(--border);
}
.catalog-toolbar .view-toggle { flex: 0 0 auto; }
.catalog-toolbar .catalog-search-wrap { flex: 1 1 auto; max-width: 420px; }
/* Cards / list view toggle (Google-apps style) */
.view-toggle {
  display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; background: var(--bg-surface);
}
.view-btn {
  border: 0; background: transparent; color: var(--text-secondary);
  padding: .5rem .75rem; cursor: pointer; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center;
}
.view-btn.is-active { background: var(--bg-elevated); color: var(--text-primary); }
.view-btn:not(.is-active):hover { color: var(--text-primary); }

/* Filter chips */
.catalog-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.catalog-chip {
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-secondary); border-radius: 999px;
  padding: .35rem .9rem; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: all .12s ease;
}
.catalog-chip span { opacity: .7; font-size: .8rem; }
.catalog-chip:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.catalog-chip.is-active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.catalog-chip.is-active span { opacity: .9; }

/* Domain section header with per-domain accent */
.catalog-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .9rem; }
.catalog-section-title i { color: var(--accent-primary); }

/* ==========================================================================
   Inline navbar search box + live dropdown
   ========================================================================== */
/* Side groups shrink before the search does; the search box never collapses. */
.nav-side { flex: 0 1 auto; min-width: 0; }
.nav-search { position: relative; flex: 0 1 460px; min-width: 170px; margin-inline: auto; }
.nav-search-icon { position: absolute; top: 50%; inset-inline-start: .7rem; transform: translateY(-50%);
  color: #6c757d; pointer-events: none; font-size: .9rem; }
.nav-search-input { width: 100%; height: 38px; padding: .35rem .9rem; padding-inline-start: 2rem;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: #fff;
  color: #1a1d24; font-size: .9rem; }
.nav-search-input::placeholder { color: #6c757d; }
.nav-search-input:focus { outline: none; background: #fff;
  border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(24,101,242,.25); }
.nav-search-panel { position: absolute; top: calc(100% + .35rem); inset-inline-start: 0; inset-inline-end: 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 1050; max-height: 70vh; overflow-y: auto; padding: .35rem; }
.nav-search-group { font-size: .72rem; font-weight: 700; color: var(--text-secondary); padding: .45rem .6rem .2rem; }
.nav-search-group i { color: var(--accent-primary); }
.nav-search-item { display: flex; flex-direction: column; gap: .1rem; padding: .4rem .6rem;
  border-radius: 8px; text-decoration: none; color: var(--text-primary); }
.nav-search-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nss-t { font-weight: 600; font-size: .9rem; }
.nss-s { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-all { display: block; text-align: center; padding: .5rem; margin-top: .2rem;
  border-top: 1px solid var(--border); color: var(--accent-primary); text-decoration: none; font-size: .85rem; }
.nav-search-empty { padding: .8rem; text-align: center; color: var(--text-secondary); font-size: .88rem; }
@media (max-width: 575px) {
  .nav-search { flex: 1 1 auto; min-width: 110px; margin-inline: .25rem; }
  .nav-search-input { font-size: .82rem; padding-inline-start: 1.9rem; }
}

/* ==========================================================================
   Site-wide search (/search/)
   ========================================================================== */
.gsearch .cls-search-wrap { max-width: 560px; }
.gs-group { margin-bottom: 1.4rem; }
.gs-group-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.gs-group-title i { color: var(--accent-primary); }
.gs-list { display: flex; flex-direction: column; gap: .4rem; max-width: 720px; }
.gs-item { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface);
  text-decoration: none; color: var(--text-primary); transition: border-color .15s ease; }
.gs-item:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.gs-item-title { font-weight: 600; font-size: .92rem; flex-shrink: 0; }
.gs-item-sub { color: var(--text-secondary); font-size: .82rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Profile (own + public, one layout)
   ========================================================================== */
.profile-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.profile-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 2px solid var(--accent-primary); }
.profile-avatar-ph { display: flex; align-items: center; justify-content: center;
  background: var(--accent-primary); color: #fff; font-size: 1.8rem; font-weight: 700; }
.profile-id { flex: 1 1 auto; min-width: 0; }
.profile-name { font-size: 1.4rem; font-weight: 700; margin: 0 0 .3rem; }
.profile-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.profile-chip { font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary); }
.profile-chip-teacher { background: rgba(24,101,242,.14); color: var(--accent-primary); }
.profile-bio { color: var(--text-secondary); font-size: .92rem; margin: 0 0 .5rem; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .85rem; color: var(--text-secondary); }
.profile-stat strong { color: var(--text-primary); font-size: 1rem; }
.profile-actions { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.profile-section-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .7rem; }
.profile-certs { display: flex; flex-direction: column; gap: .5rem; }
.profile-cert { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: 10px; text-decoration: none;
  color: var(--text-primary); transition: border-color .15s ease; }
.profile-cert:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.profile-cert > .bi-trophy-fill { color: #e0a800; flex-shrink: 0; }
.profile-cert-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-cert-date { font-size: .8rem; color: var(--text-secondary); flex-shrink: 0; }
.profile-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.profile-badge { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary); }
@media (max-width: 575px) {
  .profile-head { flex-wrap: wrap; }
  .profile-actions { flex-direction: row; width: 100%; }
}

/* Continue-learning (right) + achievements (left) side-by-side; stacks on narrow */
.resume-split { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; }
.resume-split .resume-col { flex: 1 1 300px; min-width: 0; }

/* One-line horizontal cards: "continue learning" + "my achievements" */
.hcard-list { display: flex; flex-direction: column; gap: .55rem; }
.hcard {
  display: flex; align-items: center; gap: .65rem;
  height: 44px; padding: 0 .6rem 0 .75rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-surface); text-decoration: none; color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hcard:hover {
  border-color: var(--accent-primary); color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px);
}
.hcard-title {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Inline progress (continue learning) */
.hcard-progress { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.hcard-bar { width: 84px; height: 6px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; }
.hcard-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-primary); }
.hcard-pct { font-size: .8rem; font-weight: 700; color: var(--accent-primary); min-width: 2.7em; text-align: center; }
/* Achievements variant */
.hcard-meta { font-size: .8rem; color: var(--text-secondary); flex-shrink: 0; }
@media (max-width: 575px) {
  .hcard-bar { width: 52px; }
  .hcard-meta { display: none; }
}

/* Catalog two-column: training-status sidebar (right ~30%) + courses (left ~70%).
   No sidebar (anon / no progress) -> .catalog-layout stays block, courses full width. */
.catalog-layout.has-status {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);   /* RTL: first column = right = status */
  gap: 1.5rem;
  align-items: start;
}
.catalog-status {
  align-self: start;
  display: flex; flex-direction: column; gap: 1.4rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 1.1rem 1rem 1.2rem;
  position: sticky;
  top: calc(var(--cat-toolbar-top, 56px) + 58px);
  max-height: calc(100vh - var(--cat-toolbar-top, 56px) - 76px);
  overflow-y: auto;
}
.catalog-status .catalog-section-title { font-size: 1rem; margin-bottom: .7rem; }
.catalog-status .hcard { background: var(--bg-surface); }
.catalog-status .hcard-bar { width: 56px; }   /* tighter bar in the narrow band */
.status-block { min-width: 0; }

@media (max-width: 820px) {
  .catalog-layout.has-status { grid-template-columns: 1fr; }   /* stack on narrow screens */
  .catalog-status {
    position: static; max-height: none; overflow: visible; order: 2;   /* courses first, status below */
  }
  .catalog-main { order: 1; }
}

/* Categories are uniform light-gray collapsible bands - no per-domain colour or
   icon, just a clear foldable header. */
.catalog-domain { margin-bottom: 2.25rem; }
.catalog-domain-head {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem;
  padding: .8rem 1.05rem; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer; user-select: none;
}
.catalog-domain-head h2 { color: var(--text-primary); font-weight: 800; }
.catalog-domain-head:hover { filter: brightness(.98); }
.catalog-domain-head:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.catalog-domain-head-text { min-width: 0; }
.catalog-domain-count {
  margin-inline-start: auto; flex: 0 0 auto;
  background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border);
  font-size: .8rem; font-weight: 700;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .5rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.catalog-domain-chev { flex: 0 0 auto; color: var(--text-secondary); font-size: 1.05rem; transition: transform .18s ease; }
.catalog-domain.is-collapsed .catalog-domain-chev { transform: rotate(-90deg); }
.catalog-domain.is-collapsed .catalog-domain-body { display: none; }
.catalog-domain.is-collapsed .catalog-domain-head { margin-bottom: 0; }

/* Active domain filter chip takes on its domain's colour. */
.catalog-chip.is-active[data-domain="matazim"]    { background:#1865f2; border-color:#1865f2; }
.catalog-chip.is-active[data-domain="ai"]         { background:#7c3aed; border-color:#7c3aed; }
.catalog-chip.is-active[data-domain="innovation"] { background:#f59e0b; border-color:#f59e0b; }

/* Track sub-section header (e.g. AI levels רמה 1/2/3) */
.catalog-track { margin-bottom: 1.25rem; }
.catalog-track-head {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 .7rem; padding-inline-start: .8rem;
  border-inline-start: 3px solid var(--border);
}
.catalog-track-head.dk-matazim { border-color: rgba(24,101,242,.5); }
.catalog-track-head.dk-ai { border-color: rgba(124,58,237,.6); }
.catalog-track-head.dk-innovation { border-color: rgba(245,158,11,.6); }
.catalog-track-title { font-size: 1rem; font-weight: 700; }
.catalog-track-sub { font-size: .8rem; color: var(--text-secondary); }
.level-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
  font-size: .92rem; font-weight: 800; box-shadow: 0 2px 6px rgba(124,58,237,.35);
}

/* Course grid + cards */
.course-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.course-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.course-card:hover { transform: translateY(-4px); border-color: var(--accent-primary);
  box-shadow: 0 10px 24px rgba(20,30,50,.12); color: var(--text-primary); }
.course-thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-elevated); }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: var(--text-secondary); }
.course-badge {
  position: absolute; top: .55rem; inset-inline-end: .55rem;
  font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.course-badge.is-done { background: rgba(16,185,129,.92); color: #fff; }
.course-badge.is-prog { background: rgba(15,23,42,.78); color: #fff; }
.course-body { padding: .7rem .85rem .85rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.course-title { font-size: .92rem; font-weight: 700; line-height: 1.3; margin: 0 0 .4rem; }
.course-meta { display: flex; align-items: center; gap: .7rem; font-size: .76rem; color: var(--text-secondary); margin-bottom: .2rem; }

/* "Most popular" highlight */
.course-popular {
  position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .28rem;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
  font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  animation: pop-glow 1.2s ease-in-out infinite;   /* pulsing ring draws the eye */
}
.course-popular i {
  font-size: .74rem; display: inline-block; transform-origin: center;
  animation: pop-heartbeat 1.2s ease-in-out infinite;   /* lub-dub */
}
@keyframes pop-heartbeat {
  0%, 45%, 100% { transform: scale(1); }
  10% { transform: scale(1.7); }    /* lub */
  20% { transform: scale(1); }
  30% { transform: scale(1.45); }   /* dub */
}
@keyframes pop-glow {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 0 0 0 rgba(249,115,22,.6); }
  18%      { box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 0 0 8px rgba(249,115,22,0); }
}
@media (prefers-reduced-motion: reduce) {
  .course-popular, .course-popular i { animation: none; }
}
.course-card.is-popular { border-color: rgba(245,158,11,.55); box-shadow: 0 0 0 1px rgba(245,158,11,.25), var(--card-shadow); }
.course-card.is-popular:hover { border-color: #f59e0b; }
.course-diff { background: var(--bg-elevated); border-radius: 999px; padding: .05rem .5rem; }
.course-progress { height: 6px; background: var(--bg-elevated); border-radius: 999px; overflow: hidden; margin-top: .6rem; }
.course-progress-bar { height: 100%; background: var(--accent-primary); border-radius: 999px; }
.course-progress-label { font-size: .74rem; color: var(--text-secondary); margin-top: .3rem; }

/* List view: every grid becomes single-column rows; cards lay out horizontally
   as clean, image-free text rows. Toggled by #catalog.is-list. */
.catalog.is-list .course-grid { grid-template-columns: 1fr; gap: .5rem; }
.catalog.is-list .course-card { flex-direction: row; align-items: center; }
.catalog.is-list .course-card:hover { transform: none; }
.catalog.is-list .course-thumb { display: none; }   /* no thumbnails in list view */
.catalog.is-list .course-body { padding: .65rem 1rem; }

@media (max-width: 575px) {
  .course-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
  .course-title { font-size: .92rem; }
  .catalog-search-wrap { flex: 1 1 100%; }
}

/* =====================================================================
   Community hub — area tiles, feed items, rail
   ===================================================================== */
/* Area tiles (the "map") */
.comm-areas {
  display: grid; gap: .6rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.comm-area {
  display: flex; flex-direction: column; gap: .15rem;
  text-decoration: none; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .85rem;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.comm-area:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); color: var(--text-primary); }
.comm-area > i { font-size: 1.35rem; margin-bottom: .15rem; }
.comm-area-label { font-weight: 700; font-size: .95rem; }
.comm-area-sub { font-size: .76rem; color: var(--text-secondary); }
.ca-forum > i { color: #2563eb; } .ca-forum:hover { border-color: #2563eb; }
.ca-showcase > i { color: #7c3aed; } .ca-showcase:hover { border-color: #7c3aed; }
.ca-tips > i { color: #f59e0b; } .ca-tips:hover { border-color: #f59e0b; }
.ca-chat > i { color: #0ea5e9; } .ca-chat:hover { border-color: #0ea5e9; }
.ca-events > i { color: #14b8a6; } .ca-events:hover { border-color: #14b8a6; }
.ca-members > i { color: #ec4899; } .ca-members:hover { border-color: #ec4899; }
.ca-crashtech > i { color: #ef4444; } .ca-crashtech:hover { border-color: #ef4444; }

/* Composer action buttons row */
.comm-composer-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.comm-composer-actions .btn { flex: 1 1 auto; }

/* Feed items */
.feed-list { display: flex; flex-direction: column; gap: .6rem; }
.feed-item {
  display: flex; gap: .7rem; align-items: flex-start;
  text-decoration: none; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem .9rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.feed-item:hover { border-color: var(--accent-primary); box-shadow: var(--card-shadow); color: var(--text-primary); }
.feed-avatar { flex: 0 0 auto; }
.feed-avatar img, .feed-avatar-initial, .feed-avatar-icon {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.feed-avatar-initial { background: var(--accent-primary); color: #fff; }
.feed-avatar-icon { background: var(--bg-elevated); color: var(--text-secondary); }
.feed-body { flex: 1 1 auto; min-width: 0; }
.feed-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .25rem; }
.feed-actor { font-size: .88rem; }
.feed-time { font-size: .74rem; color: var(--text-secondary); }
.feed-text { display: block; font-size: .92rem; line-height: 1.45; }

/* Color-coded type chips */
.feed-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700; padding: .08rem .5rem; border-radius: 999px;
}
.feed-chip i { font-size: .68rem; }
.feed-chip-tip     { background: rgba(245,158,11,.14); color: #b45309; }
.feed-chip-thread  { background: rgba(37,99,235,.13);  color: #1d4ed8; }
.feed-chip-project { background: rgba(124,58,237,.14); color: #6d28d9; }
.feed-chip-answer  { background: rgba(16,185,129,.15); color: #047857; }
.feed-chip-badge   { background: rgba(245,158,11,.16); color: #92400e; }
.feed-chip-event   { background: rgba(20,184,166,.15); color: #0f766e; }
.feed-chip-event_photo { background: var(--bg-elevated); color: var(--text-secondary); }
html[data-theme="dark"] .feed-chip-tip { color: #fbbf24; }
html[data-theme="dark"] .feed-chip-thread { color: #60a5fa; }
html[data-theme="dark"] .feed-chip-project { color: #c4b5fd; }
html[data-theme="dark"] .feed-chip-answer { color: #34d399; }
html[data-theme="dark"] .feed-chip-event { color: #5eead4; }

/* Rail bits */
.rail-rank { display: inline-block; width: 1.2rem; color: var(--text-secondary); font-weight: 700; text-align: center; }
.comm-event { display: block; text-decoration: none; color: var(--text-primary); padding: .4rem 0; }
.comm-event + .comm-event { border-top: 1px solid var(--border); }
.comm-event:hover { color: var(--accent-primary); }
.comm-event-title { font-weight: 600; font-size: .88rem; line-height: 1.3; }
.comm-event-meta { font-size: .75rem; color: var(--text-secondary); }
.comm-join { border-color: var(--accent-primary); }

/* Skill Store area tile */
.ca-skill > i { color: #16a34a; } .ca-skill:hover { border-color: #16a34a; }

/* Community main column — big highlight cards stacked vertically */
.comm-bigcards { display: flex; flex-direction: column; gap: 1rem; }
.comm-bigcard {
  display: flex; align-items: stretch; min-height: 150px;
  text-decoration: none; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.comm-bigcard:hover { transform: translateY(-3px); border-color: var(--accent-primary);
  box-shadow: 0 10px 24px rgba(20,30,50,.12); color: var(--text-primary); }
.comm-bigcard-media {
  order: 2; flex: 0 0 38%; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; background: var(--bg-elevated); color: #fff; font-size: 2.4rem; overflow: hidden;
}
.comm-bigcard-media img { width: 100%; height: 100%; object-fit: cover; }
.comm-bigcard-body { order: 1; flex: 1 1 auto; padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.comm-bigcard-kicker { font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
.comm-bigcard-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin: 0 0 .35rem; }
.comm-bigcard-text { color: var(--text-secondary); font-size: .92rem; line-height: 1.4; margin: 0 0 .7rem; }
.comm-bigcard-cta { font-weight: 600; color: var(--accent-primary); font-size: .9rem; }
/* per-card accents */
.bc-showcase { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.kc-showcase { color: #7c3aed; }
.bc-event { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.bc-event .bc-event-date { font-size: 1.15rem; font-weight: 800; }
.kc-event { color: #0f766e; }
.bc-course { background: var(--bg-elevated); }
.kc-course { color: #f59e0b; }

@media (max-width: 575px) {
  .comm-bigcard { flex-direction: column; }
  .comm-bigcard-media { order: -1; flex: 0 0 130px; width: 100%; }
}

/* =====================================================================
   Calm-editorial pass — de-AI the look (overrides; cascade wins)
   Flat surfaces · one accent · quiet hovers · no decorative animation
   ===================================================================== */

/* Headings: editorial serif, tighter, more deliberate */
h1, h2, h3, .hero-brand, .training-hero-title, .comm-bigcard-title,
.course-title, .catalog-track-title { letter-spacing: -0.01em; }
.h4, .h5, .h6, h4, h5, h6 { font-family: var(--font-heading); }

/* Cards: hairline border, no drop shadow */
.card-surface { box-shadow: none; }

/* 1+2. Kill gradients & the aurora glow → flat fills */
.hero { background: none; }
.training-hero { background: var(--bg-surface); border-color: var(--border); }
.training-hero:hover { box-shadow: none; }
html[data-theme="dark"] .training-hero { background: var(--bg-surface); }
.comm-bigcard .bc-showcase { background: var(--bg-elevated); color: var(--accent-primary); }
.comm-bigcard .bc-event { background: var(--bg-elevated); color: var(--accent-primary); }
.comm-bigcard .bc-event .bc-event-date { color: var(--text-primary); }
.training-hero-media { background: var(--bg-elevated); }

/* 4. Quiet, uniform hover — no lift, no glow; just a border + faint tint */
.feature-card:hover, .apex-card:hover, .course-card:hover, .comm-area:hover,
.comm-bigcard:hover, .browse-card:hover, .training-hero:hover {
  transform: none; box-shadow: none; border-color: var(--accent-primary);
}
.feed-item:hover, .rail-item:hover, .comm-event:hover { box-shadow: none; }

/* 5. Remove decorative animation + glassmorphism */
.course-popular i { animation: none; }
.course-popular { animation: none; background: var(--accent-warm); box-shadow: none; }
.course-card.is-popular { box-shadow: none; border-color: var(--accent-warm); }
.rail-live-dot { animation: none; }
.course-badge { backdrop-filter: none; }
.course-badge.is-prog { background: rgba(28,27,24,.72); }

/* 6. Tighten the rainbow → one calm, consistent treatment */
/* Feed type chips: a single muted label instead of 6 colors */
.feed-chip { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; }
/* Area tiles: uniform ink icon, accent only on hover */
.comm-area > i { color: var(--text-primary) !important; }
.ca-forum:hover, .ca-showcase:hover, .ca-tips:hover, .ca-chat:hover,
.ca-events:hover, .ca-members:hover, .ca-crashtech:hover, .ca-skill:hover {
  border-color: var(--accent-primary) !important;
}
/* Per-domain identity is intentional (see .catalog-domain-head) so the three
   training zones read as distinct; track bars echo each domain's colour. */
.catalog-track-head.dk-matazim    { border-color: rgba(24,101,242,.55); }
.catalog-track-head.dk-ai         { border-color: rgba(124,58,237,.6); }
.catalog-track-head.dk-innovation { border-color: rgba(245,158,11,.6); }
.kc-showcase, .kc-event, .kc-course { color: var(--accent-primary); }

/* Badges: flat, restrained */
.live-badge { background: transparent; border-color: var(--accent-primary); color: var(--accent-primary); }
.soon-badge { background: var(--bg-elevated); }
.catalog-count { background: var(--bg-elevated); color: var(--text-secondary); }
.btn { border-radius: 6px; }

/* AI catalog search — flat ranked results */
.catalog-results-hint { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); margin-inline-start: 0.4rem; }

/* =====================================================================
   Site drawer (global off-canvas nav) — calm-editorial
   ===================================================================== */
.site-drawer { background: var(--bg-surface); color: var(--text-primary); width: 280px; max-width: 85vw; }
.site-drawer .offcanvas-header { border-bottom: 1px solid var(--border); }
.site-drawer .offcanvas-title { font-family: var(--font-heading); color: var(--text-primary); }
.site-drawer .btn-close { filter: var(--theme-light, none); }
html[data-theme="dark"] .site-drawer .btn-close { filter: invert(1); }

.site-drawer-nav a,
.site-drawer-nav button {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .6rem; margin: .1rem 0;
  border-radius: 8px;
  color: var(--text-primary); background: none; border: 0; width: 100%;
  text-align: start; text-decoration: none; font-size: 1.02rem;
  cursor: pointer; transition: background .12s, color .12s;
}
.site-drawer-nav a:hover,
.site-drawer-nav button:hover { background: var(--bg-elevated); color: var(--accent-primary); }
.site-drawer-nav a i,
.site-drawer-nav button i { color: var(--accent-primary); width: 1.3rem; text-align: center; }
.site-drawer-sep { border-color: var(--border); margin: .5rem 0; opacity: 1; }

/* =====================================================================
   Home "discover more" — image circles (members)
   ===================================================================== */
.home-circles {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2.75rem; padding: .5rem 0;
}
.home-circle {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--text-primary);
}
.home-circle-img {
  position: relative;
  width: 140px; height: 140px; border-radius: 50%;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--border);
  transition: box-shadow .18s ease, transform .18s ease;
}
.home-circle-img i {
  color: rgba(255, 255, 255, .9);
  font-size: 2.7rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.home-circle:hover .home-circle-img {
  box-shadow: 0 0 0 3px var(--accent-primary);
  transform: scale(1.04);
}
.home-circle-label {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 1.08rem; color: var(--text-primary);
}

/* Nostalgia: 8mm film-strip cell (video with sprocket holes top & bottom) */
.filmstrip {
  position: relative; display: block;
  background: #141210;
  padding: 16px 9px;                 /* black sprocket bars top & bottom */
  border-radius: 7px;
  box-shadow: 0 0 0 2px var(--border);
  transition: box-shadow .18s ease, transform .18s ease;
}
.filmstrip::before, .filmstrip::after {
  content: ""; position: absolute; left: 9px; right: 9px; height: 7px;
  background: repeating-linear-gradient(90deg,
      #e8e2d2 0 7px, transparent 7px 15px);   /* the perforations */
}
.filmstrip::before { top: 4.5px; }
.filmstrip::after  { bottom: 4.5px; }
.filmstrip-video {
  display: block; width: 168px; height: 112px;
  object-fit: cover; border-radius: 2px; background: #000;
}
.home-filmcell:hover .filmstrip {
  box-shadow: 0 0 0 3px var(--accent-primary);
  transform: scale(1.04);
}
.home-circles { align-items: center; }

/* Old-movie effect on the nostalgia clip: flicker + sepia + grain + vignette */
.filmstrip-video {
  filter: sepia(.34) saturate(.8) contrast(1.06) brightness(1.03);
  animation: film-flicker .32s steps(1, end) infinite;
}
@keyframes film-flicker {
  0%, 100% { opacity: 1; }
  22% { opacity: .9; }
  47% { opacity: 1; }
  61% { opacity: .85; }
  78% { opacity: .97; }
  90% { opacity: .92; }
}
.filmstrip-fx {
  position: absolute; inset: 16px 9px;        /* exactly over the video */
  border-radius: 2px; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.55) 100%);
}
.filmstrip-fx::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: overlay; opacity: .25;
  animation: film-grain .42s steps(2, end) infinite;
}
@keyframes film-grain {
  0% { background-position: 0 0; }
  50% { background-position: -26px 14px; }
  100% { background-position: 16px -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .filmstrip-video { animation: none; }
  .filmstrip-fx::after { animation: none; }
}

/* ==========================================================================
   Classrooms (Chapter 9)
   ========================================================================== */
.classes h1 { font-size: 1.5rem; }
.cls-h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.cls-h3 { font-size: .9rem; font-weight: 700; margin: 1rem 0 .4rem; }
.cls-small { font-size: .82rem; }
.cls-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.cls-search-wrap { max-width: 520px; margin-bottom: 1rem; }
.cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
#classResults:not(:empty) { margin-bottom: .8rem; }
.cls-card { display: flex; flex-direction: column; gap: .35rem; }
.cls-card-name { font-weight: 700; }
.cls-card-meta { font-size: .85rem; color: var(--text-secondary); }
.cls-card-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.cls-empty { color: var(--text-secondary); }

.cls-invite { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-top: 1px solid var(--border); }
.cls-invite:first-of-type { border-top: 0; }
.cls-invite-actions { display: flex; gap: .5rem; }
.cls-invite-actions form { margin: 0; }

.cls-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }

.cls-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .cls-manage-grid { grid-template-columns: 1fr; } }
.cls-link-row { display: flex; gap: .5rem; margin-bottom: .6rem; }
.cls-share-row { margin-bottom: .9rem; }
.cls-qr { text-align: center; margin: .5rem 0 .8rem; }
.cls-qr img { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 6px; }
.cls-qr-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }

/* Public join landing (the page a shared link opens for logged-out visitors) */
.cls-join-landing { max-width: 520px; margin: 1.5rem auto; text-align: center; }
.cls-join-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-primary); margin-bottom: .3rem; }
.cls-join-desc { color: var(--text-secondary); margin-bottom: 1rem; }

.cls-results { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.cls-result { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; margin: 0; }
.cls-pending { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .9rem; }
.cls-pending li { padding: .25rem 0; }

.cls-table-wrap { overflow-x: auto; }
.cls-table { width: 100%; border-collapse: collapse; }
.cls-table th, .cls-table td { text-align: start; padding: .55rem .5rem; border-bottom: 1px solid var(--border); }
.cls-table th { font-size: .82rem; color: var(--text-secondary); font-weight: 600; }
.cls-row-actions { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
.cls-row-actions form { margin: 0; }

.cls-controls { display: flex; align-items: center; gap: 1rem; }
.cls-controls form { margin: 0; }

.cls-lessons { list-style: none; padding: 0; margin: .2rem 0 0; }
.cls-lesson { padding: .45rem 0; border-top: 1px solid var(--border); }
.cls-lesson:first-child { border-top: 0; }
.cls-lesson-row { display: flex; align-items: center; gap: .5rem; }
.cls-lesson-row .bi-check-circle-fill { color: #1a7f37; }
.cls-lesson-row .bi-circle { color: var(--text-secondary); }
.cls-lesson-title { flex: 1 1 auto; min-width: 0; font-size: .92rem; }
.cls-lesson.is-done .cls-lesson-title { font-weight: 600; }
.cls-lesson-tag { font-size: .72rem; font-weight: 700; color: var(--accent-primary);
  border: 1px solid var(--accent-primary); border-radius: 999px; padding: 0 .45rem; flex-shrink: 0; }
.cls-lesson .stl-gallery { margin: .5rem 0 .2rem; }

.cls-course-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cls-course-pct { font-weight: 700; color: var(--accent-primary); }
.cls-bar { height: 6px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; margin: .4rem 0 .3rem; }
.cls-bar > span { display: block; height: 100%; background: var(--accent-primary); }
.cls-badge { font-size: .75rem; font-weight: 700; color: #1a7f37; background: rgba(26,127,55,.12);
  padding: .1rem .5rem; border-radius: 999px; text-decoration: none; margin-inline-start: .4rem; }
.cls-badge-soft { color: var(--text-secondary); background: var(--bg-elevated); }

.cls-room-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 820px) { .cls-room-grid { grid-template-columns: 1fr; } }
.cls-desc { color: var(--text-secondary); }
.cls-stream { display: flex; flex-direction: column; gap: .6rem; max-height: 460px; overflow-y: auto; margin-bottom: .8rem; }
.cls-msg { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); }
.cls-msg-teacher { border-color: var(--accent-primary); background: var(--bg-elevated); }
.cls-msg-head { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin-bottom: .25rem; }
.cls-msg-date { color: var(--text-secondary); font-size: .78rem; margin-inline-start: auto; }
.cls-tag { font-size: .72rem; font-weight: 700; color: var(--accent-primary); border: 1px solid var(--accent-primary);
  border-radius: 999px; padding: 0 .4rem; }
.cls-msg-body { font-size: .92rem; white-space: pre-wrap; }
.cls-post { display: flex; gap: .5rem; align-items: flex-end; }
.cls-post textarea { flex: 1 1 auto; }
.cls-gallery-block { margin-bottom: 1rem; }
.cls-gallery-name { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.cls-dir-desc { font-size: .85rem; color: var(--text-secondary); margin: .3rem 0 0; }
.cls-requests { list-style: none; padding: 0; margin: 0; }
.cls-requests li { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-top: 1px solid var(--border); }
.cls-requests li:first-child { border-top: 0; }
.cls-req-actions { display: flex; gap: .5rem; }
.cls-req-actions form { margin: 0; }
.cls-warn { font-size: .85rem; color: #9a6700; background: rgba(245, 197, 24, .14);
  border-radius: 8px; padding: .5rem .7rem; }
.cls-pending { list-style: none; padding: 0; margin: 0; }
.cls-pending-row { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .3rem 0; }
.cls-pending-row form { margin: 0; }

/* ==========================================================================
   Mobile adaptation pass — see docs/mobile_audit.md (2026-06-25)
   Grouped here so the whole responsive pass is easy to review / revert.
   ========================================================================== */

/* ---- P0-1 navbar + P1-4 lesson + P2-9 tap targets (phone width) ---- */
@media (max-width: 767px) {
  /* Search leaves the bar: hidden inline, shown as a full-width row under the
     bar when #navSearchToggle flips .nav-search-open on the navbar. */
  .nav-search {
    position: absolute; top: 100%; inset-inline: 0;
    margin: 0; padding: .5rem .75rem; flex: none; display: none; z-index: 1040;
    background: var(--nav-bg); border-bottom: 1px solid var(--border);
  }
  .navbar.nav-search-open .nav-search { display: block; }
  #navSearchToggle[aria-expanded="true"] { color: var(--accent-primary) !important; }

  /* Comfortable tap targets for every control left in the bar. */
  .navbar .nav-link,
  .navbar .btn {
    min-height: 44px; min-width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Lesson: video (main) first, playlist + materials below it. */
  .lesson-main { order: 1; }
  .lesson-sidebar { order: 2; }
}

/* P2-9 footer social icons — comfortable tap size at every width. */
footer .d-inline-flex > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}

/* ---- P0-2 cookie banner + P0-3 welcome strip (slim on phones) ---- */
@media (max-width: 575px) {
  #cookie-banner { font-size: .78rem; padding-top: .4rem; padding-bottom: .4rem; line-height: 1.25; }
  #cookie-banner .btn { font-size: .78rem; padding: .2rem .6rem; }
  #welcome-strip { padding-top: .35rem !important; padding-bottom: .35rem !important; }
  #welcome-strip .small { font-size: .78rem; }
}

/* ---- P1-5 class roster: table → stacked cards ---- */
@media (max-width: 575px) {
  .cls-table thead { display: none; }
  .cls-table, .cls-table tbody { display: block; width: 100%; }
  .cls-table tr {
    display: block; border: 1px solid var(--border); border-radius: 10px;
    padding: .65rem .8rem; margin-bottom: .65rem;
  }
  .cls-table td {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    border: none; padding: .22rem 0;
  }
  .cls-table td::before {
    content: attr(data-label); font-weight: 600; color: var(--text-secondary); font-size: .82rem;
  }
  .cls-table td.cls-cell-name {
    display: block; font-weight: 700; font-size: 1rem;
    border-bottom: 1px solid var(--border); padding-bottom: .4rem; margin-bottom: .35rem;
  }
  .cls-table td.cls-cell-name::before { content: none; }
  .cls-table td.cls-row-actions { gap: .5rem; padding-top: .55rem; }
  .cls-table td.cls-row-actions::before { content: none; }
  .cls-table td.cls-row-actions > * { flex: 1; margin: 0; }
  .cls-table td.cls-row-actions .btn { width: 100%; }
}

/* ---- P1-6 showcase stand filters: one swipeable row ---- */
@media (max-width: 575px) {
  .showcase-stands {
    flex-wrap: nowrap !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem;
  }
  .showcase-stands::-webkit-scrollbar { display: none; }
  .showcase-stands > .btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- P2-8 Hebrew-labeled file inputs (progressive enhancement; see base.html) ---- */
.he-file { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.he-file-input.he-file-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.he-file-name {
  font-size: .85rem; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* ==========================================================================
   Phase-2 mobile sweep — see docs/mobile_audit.md "Phase 2" (2026-06-25)
   ========================================================================== */

/* Wide data tables scroll horizontally on phones instead of stretching the
   page (admin dashboard cost/seat tables, studio course list, crashtech
   bonus/leaderboard, alerts config). .cls-table is excluded — it already
   becomes stacked cards. The scroll container only appears when a table is
   actually wider than the screen, so narrow tables are unaffected. */
@media (max-width: 575px) {
  table.table {
    display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Rich lesson-notes (markdown: code blocks, tables, images, long URLs) must
   stay inside the column — a wide child was forcing horizontal scroll on the
   whole lesson page. */
.lesson-notes { overflow-wrap: anywhere; }
.lesson-main pre, .lesson-notes pre { max-width: 100%; overflow-x: auto; }
.lesson-notes img, .lesson-notes video, .lesson-notes iframe { max-width: 100%; height: auto; }
.lesson-notes table { display: block; max-width: 100%; overflow-x: auto; }

/* ==========================================================================
   Avi Salmon Blog
   ========================================================================== */
.blog-wrap { max-width: 760px; margin: 0 auto; }

/* Header / masthead */
.blog-header { margin: 1rem 0 2.25rem; }
.blog-kicker {
  display: inline-block; font-size: .8rem; letter-spacing: .04em;
  color: var(--accent-primary); font-weight: 700; margin-bottom: .35rem;
}
.blog-masthead {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0; line-height: 1.1;
}
.blog-subhead { color: var(--text-secondary); margin-top: .5rem; }

/* Magazine layout: a full-width post, then a pair of normal cards, repeating */
.blog-rows { display: flex; flex-direction: column; gap: 2rem; }

/* Full-width post (cover beside the text) */
.blog-wide {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; overflow: hidden;
  text-decoration: none; color: inherit; padding: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog-wide:hover { box-shadow: 0 8px 28px rgba(0,0,0,.12); transform: translateY(-2px); }
.blog-wide-cover {
  background-size: cover; background-position: center; min-height: 240px; display: block;
  background-color: var(--bg-elevated);
}
.blog-wide-body {
  padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
  gap: .5rem; justify-content: center;
}
.blog-wide-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; margin: 0; }
.blog-wide-sub { color: var(--text-secondary); margin: 0; }

/* Text-only list items (no cover images): clear informative blocks */
.blog-item {
  display: flex; flex-direction: column; gap: .4rem; height: 100%;
  padding: 1.15rem 1.3rem; text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.blog-item-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem;
  line-height: 1.25; margin: .05rem 0 0; color: var(--text-primary);
}
.blog-item-sub { color: var(--text-secondary); font-size: .95rem; margin: 0; }
.blog-item-excerpt { font-size: .9rem; margin: .1rem 0 0; }
/* Full-width item: bigger title + an accent bar so it reads as a feature without an image */
.blog-item-wide { padding: 1.5rem 1.6rem; border-inline-start: 4px solid var(--accent-primary); }
.blog-item-wide .blog-item-title { font-size: 1.7rem; }

/* Card grid */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.blog-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-3px); }
.blog-card-cover {
  display: block; height: 158px; background-size: cover; background-position: center;
  background-color: var(--bg-elevated);
}
.blog-card-cover--blank {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 2rem;
}
.blog-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.blog-card-meta { font-size: .78rem; color: var(--text-secondary); }
.blog-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.18rem; margin: .1rem 0 0; }
.blog-card-sub { color: var(--text-secondary); font-size: .92rem; margin: 0; }
.blog-card-excerpt { font-size: .9rem; margin: .15rem 0 0; }

/* The two-up pair of normal cards between full-width posts (overrides .blog-grid) */
.blog-pair { grid-template-columns: repeat(2, 1fr); }

/* Tags */
.blog-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.blog-tag {
  font-size: .74rem; background: var(--bg-elevated); color: var(--text-secondary);
  padding: .1rem .5rem; border-radius: 999px;
}

/* Empty state */
.blog-empty { padding: 3rem 1.5rem; }

/* --- Single post --- */
.blog-back {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  color: var(--accent-primary); font-size: .9rem; margin-bottom: 1rem;
}
.blog-back:hover { text-decoration: underline; }
.blog-post-head { margin-bottom: 1.4rem; }
.blog-post-title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.15; margin: .3rem 0 .4rem;
}
.blog-post-sub { font-size: 1.2rem; color: var(--text-secondary); margin: 0 0 .6rem; }
.blog-cover { margin: 0 0 1.8rem; }
.blog-cover img { width: 100%; border-radius: var(--radius); display: block; }

/* Article body typography (reuses .lesson-notes; tuned for long-form reading) */
.blog-body { font-size: 1.08rem; line-height: 1.75; }
.blog-body > :first-child { margin-top: 0; }
.blog-body .blog-note {
  font-size: .82rem; line-height: 1.55; color: var(--text-secondary);
  font-style: italic; margin: 0 0 1.6rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
/* Artifact box: download the research / listen to the podcast */
.blog-artifacts {
  display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0;
  padding: 1.1rem 1.2rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-elevated);
}
.blog-artifacts .ba-label {
  flex-basis: 100%; font-size: .9rem; color: var(--text-secondary); margin-bottom: .1rem;
}
.blog-artifact {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 1px solid var(--accent-primary);
}
.blog-artifact.ba-primary { background: var(--accent-primary); color: #fff; }
.blog-artifact.ba-ghost { background: transparent; color: var(--accent-primary); }
.blog-artifact:hover { filter: brightness(1.06); text-decoration: none; }
.blog-artifact i { font-size: 1.1rem; }

.blog-body h2 { font-family: var(--font-heading); font-weight: 800; font-size: 1.55rem; margin: 2rem 0 .8rem; }
.blog-body h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; margin: 1.6rem 0 .6rem; }
.blog-body p { margin: 0 0 1.1rem; }
.blog-body a { color: var(--accent-primary); text-decoration: underline; }
.blog-body blockquote {
  border-inline-start: 3px solid var(--accent-primary); margin: 1.2rem 0;
  padding: .2rem 1rem; color: var(--text-secondary);
}
.blog-figure { margin: 1.6rem 0; }
.blog-figure img { width: 100%; border-radius: var(--radius); display: block; }
.blog-figure figcaption {
  font-size: .85rem; color: var(--text-secondary); text-align: center; margin-top: .45rem;
}

/* Gallery + related */
.blog-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; }
.blog-gallery .blog-figure { margin: 0; }
.blog-related { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }

/* Post footer: recommendation + actions + message-to-Avi */
.blog-foot {
  margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.8rem;
  display: flex; flex-direction: column; gap: 2rem;
}
.blog-foot-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; margin: 0 0 .9rem;
}
.blog-foot-title i { color: var(--accent-primary); }

.blog-rec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.blog-rec-item {
  display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem;
  text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog-rec-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); transform: translateY(-2px); }
.blog-rec-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; }
.blog-rec-sub { color: var(--text-secondary); font-size: .9rem; }

.blog-foot-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.blog-comment-note { color: var(--text-secondary); font-size: .92rem; margin: -.4rem 0 .9rem; }
.blog-comment-form { display: flex; flex-direction: column; gap: .7rem; max-width: 640px; }
.blog-comment-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.blog-comment-row .form-control { flex: 1 1 200px; }
.blog-comment-submit { display: flex; }
/* Honeypot: kept in the DOM for bots, hidden from people */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) {
  .blog-wide { grid-template-columns: 1fr; }
  .blog-wide-cover { min-height: 180px; }
  .blog-pair { grid-template-columns: 1fr; }
}