/* ==========================================================================
   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: 720px;
  margin: 0 auto;
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 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;
}
.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) {
  .lesson-layout { flex-direction: column; }
  .lesson-sidebar { 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; }
.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; }

@media (max-width: 767px) {
  .training-hero { flex-direction: column; min-height: 0; }
  .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 .55rem 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); }

/* 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); }
.catalog-domain { margin-bottom: 2rem; }
.catalog-domain-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem;
  border-inline-start: 4px solid var(--accent-primary); padding-inline-start: .7rem; }
.catalog-domain-head i { font-size: 1.6rem; color: var(--accent-primary); }
.catalog-domain-head.dk-matazim { border-color: #1865f2; } .dk-matazim i { color: #1865f2; }
.catalog-domain-head.dk-ai { border-color: #7c3aed; } .dk-ai i { color: #7c3aed; }
.catalog-domain-head.dk-innovation { border-color: #f59e0b; } .dk-innovation i { 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; }

@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;
}
/* AI level badge: quiet ink circle, not a purple gradient */
.level-num { background: var(--text-primary); box-shadow: none; }
/* Domain accent bars → single accent */
.catalog-domain-head.dk-matazim, .catalog-domain-head.dk-ai, .catalog-domain-head.dk-innovation,
.catalog-track-head.dk-matazim, .catalog-track-head.dk-ai, .catalog-track-head.dk-innovation {
  border-color: var(--accent-primary);
}
.dk-matazim i, .dk-ai i, .dk-innovation i { color: var(--accent-primary); }
.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; }
}