/* =============================================================================
   THE CODEX — CODING CODEX — SHARED STYLESHEET
   thecodex.expert/coding/
   Version: 1.0 — Session 01
   Last updated: June 2026
   All pages link to this one file. Never inline CSS after Session 01.
   All paths in HTML must reference /coding/style.css (absolute).
   ============================================================================= */

/* ─── RESET ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ─── CSS VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  /* Core backgrounds */
  --bg:          #F8F9FA;
  --bg2:         #F0F2F5;
  --bg3:         #E8EBF0;
  --bg-code:     #1E2128;
  --bg-subtle:   #f8fafc;
  --white:       #ffffff;

  /* Text */
  --ink:         #1A1D23;
  --ink2:        #3D4350;
  --ink3:        #475569;
  --ink4:        #94a3b8;
  --ink5:        #cbd5e1;
  --code-fg:     #ABB2BF;

  /* Brand Blue */
  --blue:        #0066CC;
  --blue-dk:     #004999;
  --blue-lt:     #2563eb;
  --blue-bg:     #eff6ff;
  --blue-bdr:    #bfdbfe;
  --blue-dim:    rgba(0, 102, 204, 0.10);
  --blue-dim2:   rgba(0, 102, 204, 0.06);

  /* Syntax colours */
  --syn-green:   #22863A;
  --syn-purple:  #6F42C1;
  --syn-orange:  #D18616;
  --syn-red:     #B31D28;
  --syn-blue:    #93c5fd;
  --syn-comment: #64748b;

  /* Semantic colours */
  --green:       #059669;
  --green-bg:    #f0fdf4;
  --green-bdr:   #a7f3d0;
  --amber:       #D18616;
  --amber-bg:    #fffbeb;
  --amber-bdr:   #fde68a;
  --red:         #B31D28;
  --red-bg:      #fef2f2;
  --red-bdr:     #fecaca;

  /* Borders */
  --border:      rgba(26, 29, 35, 0.10);
  --border2:     #f1f5f9;
  --card-bg:     #ffffff;

  /* Layout */
  --nav-bg:      rgba(248, 249, 250, 0.97);
  --max:         1080px;
  --max-article: 760px;
  --r:           8px;
  --r-lg:        12px;
  --t:           0.15s ease;
  --nav-h:       60px;
  --chap-nav-h:  44px;

  /* Typography */
  --font-body:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code',
                 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
}

/* ─── BASE ELEMENTS ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink2);
  line-height: 1.8;
  font-size: 0.94rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--t);
}

a:hover {
  color: var(--blue-dk);
}

p {
  color: var(--ink3);
  margin-bottom: 1.1rem;
  line-height: 1.8;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  padding-left: 1.5rem;
  color: var(--ink3);
}

li {
  margin-bottom: 0.4rem;
  line-height: 1.75;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

em {
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ─── HEADINGS ──────────────────────────────────────────────────────────────── */
h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 2.2rem;
  line-height: 1.3;
}

h2:first-child {
  margin-top: 0;
}

h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
  margin-top: 1.8rem;
}

h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 0.5rem;
  margin-top: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h5, h6 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink3);
  margin-bottom: 0.4rem;
}

/* ─── CODE — INLINE ─────────────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg2);
  color: var(--syn-red);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* ─── CODE — BLOCK ──────────────────────────────────────────────────────────── */
pre {
  background: var(--bg-code);
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  border-radius: var(--r);
  overflow-x: auto;
  padding: 1.2rem 1.4rem;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: inherit;
}

/* ─── CODE BLOCK WRAPPER ────────────────────────────────────────────────────── */
.code-block {
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.4rem 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.code-header {
  background: #171b22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  gap: 1rem;
}

.code-lang {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--syn-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.code-filename {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink4);
  flex: 1;
}

.code-copy {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--t), color var(--t);
  min-width: 44px;
  min-height: 28px;
  white-space: nowrap;
}

.code-copy:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.code-copy.copied {
  color: var(--green);
  border-color: var(--green);
}

/* ─── LAYOUT WRAPPER ────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── SKIP LINK ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--blue);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--r) var(--r);
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* ─── BACK TO PARENT SITE ───────────────────────────────────────────────────── */
.parent-back {
  background: var(--ink);
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.35rem 0;
  letter-spacing: 0.04em;
  transition: color var(--t);
}

.parent-back:hover {
  color: rgba(255, 255, 255, 0.9);
}

.parent-back span {
  color: rgba(0, 153, 255, 0.85);
}

/* ─── TOP NAVIGATION ────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}

.nav-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 8px;
}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}

.nav-logo-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 10px;
  margin-right: 12px;
}

.nav-links a {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink3);
  padding: 6px 8px;
  border-radius: 6px;
  transition: color var(--t), background var(--t);
  white-space: nowrap;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--blue-dim2);
}

.nav-links a.active {
  color: var(--blue);
  font-weight: 600;
  background: var(--blue-dim);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--blue);
  color: #fff !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  transition: background var(--t) !important;
  margin-left: 4px;
  flex-shrink: 0;
}

.nav-cta:hover {
  background: var(--blue-dk) !important;
  color: #fff !important;
}

/* hamburger */
.nav-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-ham span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink2);
  border-radius: 2px;
  transition: background var(--t);
}

/* mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.nav-drawer.open {
  opacity: 1;
  pointer-events: all;
}

.nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(280px, 88vw);
  background: var(--white);
  border-left: 1px solid var(--border);
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nav-drawer.open .nav-panel {
  transform: translateX(0);
}

.nav-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.nav-panel-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.nav-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--ink3);
  padding: 4px 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-panel a {
  display: block;
  padding: 10px 12px;
  font-size: 0.87rem;
  color: var(--ink3);
  border-radius: var(--r);
  transition: background var(--t), color var(--t);
  text-decoration: none;
}

.nav-panel a:hover {
  background: var(--blue-bg);
  color: var(--blue);
}

/* ─── CHAPTER NAVIGATION ────────────────────────────────────────────────────── */
.chap-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--chap-nav-h);
}

.chap-nav-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chap-nav-in::-webkit-scrollbar {
  display: none;
}

.chap-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink4);
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  text-decoration: none;
}

.chap-link:hover {
  color: var(--ink);
}

.chap-link.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}

/* ─── PAGE HERO ─────────────────────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #1E2128 0%, #1a2a4a 60%, #1E2128 100%);
  padding: 48px 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-hero .wrap {
  color: #fff;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color var(--t);
}

.breadcrumb a:hover {
  color: rgba(0, 153, 255, 0.9);
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.2);
}

.label-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue-lt);
  background: rgba(0, 102, 204, 0.25);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.page-hero h1 {
  color: #fff;
  margin-bottom: 12px;
}

.hero-lead {
  font-size: clamp(0.9rem, 2vw, 1.03rem);
  color: rgba(255, 255, 255, 0.65);
  max-width: 680px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.meta-tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.meta-tag-blue {
  background: rgba(0, 102, 204, 0.2);
  color: #93c5fd;
  border-color: rgba(0, 102, 204, 0.3);
}

/* ─── HUB HERO (lighter version for hub page) ──────────────────────────────── */
.hub-hero {
  background: linear-gradient(135deg, #1E2128 0%, #0f1d38 50%, #1a2a4a 100%);
  padding: 64px 0 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 102, 204, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.hub-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin-bottom: 16px;
  position: relative;
}

.hub-hero .hero-lead {
  margin: 0 auto 20px;
  position: relative;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.6);
}

.hub-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #93c5fd;
  background: rgba(0, 102, 204, 0.2);
  border: 1px solid rgba(0, 102, 204, 0.35);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  display: inline-block;
  position: relative;
}

.hub-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 28px;
  position: relative;
  flex-wrap: wrap;
}

.hub-stat {
  text-align: center;
}

.hub-stat-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hub-stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
  display: block;
}

/* ─── HUB SEARCH ────────────────────────────────────────────────────────────── */
.hub-search-wrap {
  max-width: 520px;
  margin: 24px auto 0;
  position: relative;
}

.hub-search-input {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0 50px 0 48px;
  font-size: 0.9rem;
  color: #fff;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--t), background var(--t);
  -webkit-appearance: none;
}

.hub-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.hub-search-input:focus {
  border-color: rgba(0, 102, 204, 0.6);
  background: rgba(255, 255, 255, 0.09);
}

.hub-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.hub-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  font-size: 1rem;
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.hub-search-clear.visible {
  display: flex;
}

/* ─── TWO-COLUMN ARTICLE LAYOUT ─────────────────────────────────────────────── */
.art-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  padding: 40px 0 60px;
  align-items: start;
}

.art-body {
  min-width: 0;
  overflow-wrap: break-word;
}

.art-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--chap-nav-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── SIDEBAR CARDS ─────────────────────────────────────────────────────────── */
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.sidebar-card h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 12px;
  margin-top: 0;
}

.sidebar-item {
  display: block;
  font-size: 0.82rem;
  color: var(--ink3);
  padding: 5px 0;
  border-bottom: 1px solid var(--border2);
  text-decoration: none;
  transition: color var(--t);
}

.sidebar-item:last-child {
  border-bottom: none;
}

.sidebar-item:hover {
  color: var(--blue);
}

.sidebar-item.active {
  color: var(--blue);
  font-weight: 600;
}

.sidebar-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--border2);
}

.sidebar-meta-row:last-child {
  border-bottom: none;
}

.sidebar-meta-label {
  color: var(--ink4);
  font-size: 0.75rem;
}

.sidebar-meta-val {
  color: var(--ink2);
  font-weight: 500;
  font-size: 0.8rem;
}

/* ─── READING LEVEL TABS ────────────────────────────────────────────────────── */
.level-tabs-wrap {
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  position: sticky;
  top: calc(var(--nav-h) + var(--chap-nav-h));
  z-index: 50;
  background: var(--bg);
  padding-top: 4px;
}

.level-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.level-tabs::-webkit-scrollbar {
  display: none;
}

.level-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  padding: 10px 18px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink4);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: var(--font-body);
  transition: color var(--t), border-color var(--t);
  min-height: 44px;
}

.level-tab:hover {
  color: var(--ink2);
}

.level-tab.active-curious {
  color: var(--green);
  border-bottom-color: var(--green);
}

.level-tab.active-exploring {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.level-tab.active-deep {
  color: var(--red);
  border-bottom-color: var(--red);
}

.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tab-dot-green  { background: var(--green); }
.tab-dot-blue   { background: var(--blue); }
.tab-dot-red    { background: var(--red); }

.level-section {
  display: none;
}

.level-section.active {
  display: block;
}

/* ─── CANONICAL DEFINITION BOX ──────────────────────────────────────────────── */
.canonical-def {
  background: var(--blue-bg);
  border: 1px solid var(--blue-bdr);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 28px;
}

.canonical-def-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: 8px;
}

.canonical-def p {
  font-size: 0.95rem;
  color: var(--ink);
  font-style: italic;
  margin: 0;
  line-height: 1.7;
}

/* ─── CALLOUT BOXES ─────────────────────────────────────────────────────────── */
.callout {
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 1.4rem 0;
  border-left: 3px solid;
}

.callout-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.callout-blue {
  background: var(--blue-bg);
  border-color: var(--blue);
}

.callout-blue .callout-head {
  color: var(--blue);
}

.callout-green {
  background: var(--green-bg);
  border-color: var(--green);
}

.callout-green .callout-head {
  color: var(--green);
}

.callout-amber {
  background: var(--amber-bg);
  border-color: var(--amber);
}

.callout-amber .callout-head {
  color: var(--amber);
}

.callout-red {
  background: var(--red-bg);
  border-color: var(--red);
}

.callout-red .callout-head {
  color: var(--red);
}

.callout p {
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
  color: var(--ink2);
}

/* ─── CONCEPT RELATIONSHIP MAP ──────────────────────────────────────────────── */
.concept-map {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 1.6rem 0;
}

.concept-map-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink3);
  margin-bottom: 14px;
}

.concept-map-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.concept-map-row:last-child {
  margin-bottom: 0;
}

.cm-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink4);
  min-width: 90px;
  padding-top: 1px;
  flex-shrink: 0;
}

.cm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cm-link {
  font-size: 0.8rem;
  color: var(--blue);
  background: var(--blue-bg);
  border: 1px solid var(--blue-bdr);
  padding: 2px 9px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}

.cm-link:hover {
  background: var(--blue);
  color: #fff;
}

/* ─── COMMONLY CONFUSED BOX ─────────────────────────────────────────────────── */
.confused-box {
  background: var(--amber-bg);
  border: 1px solid var(--amber-bdr);
  border-left: 3px solid var(--amber);
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 1.6rem 0;
}

.confused-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--amber);
  margin-bottom: 10px;
}

.confused-item {
  font-size: 0.88rem;
  color: var(--ink2);
  margin-bottom: 8px;
  line-height: 1.65;
  padding-left: 1rem;
  position: relative;
}

.confused-item::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--amber);
}

.confused-item:last-child {
  margin-bottom: 0;
}

/* ─── SOURCES SECTION ───────────────────────────────────────────────────────── */
.sources-section {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-top: 3rem;
}

.sources-section h2 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink3);
  border: none;
  padding-bottom: 0.5rem;
}

.source-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border2);
  font-size: 0.83rem;
}

.source-item:last-child {
  border-bottom: none;
}

.source-num {
  color: var(--ink4);
  font-weight: 700;
  min-width: 20px;
  flex-shrink: 0;
}

.source-body {
  color: var(--ink3);
  line-height: 1.6;
}

.source-body a {
  color: var(--blue);
  word-break: break-all;
}

/* ─── SECTION GRID CARDS (hub page sections) ─────────────────────────────────── */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.section-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-card:hover {
  border-color: var(--blue-bdr);
  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
  transform: translateY(-1px);
}

.sc-icon {
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: block;
}

.sc-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.3;
}

.sc-desc {
  font-size: 0.8rem;
  color: var(--ink3);
  line-height: 1.55;
  margin: 0;
}

.sc-count {
  font-size: 0.7rem;
  color: var(--ink4);
  margin-top: 8px;
  display: block;
}

/* ─── LANGUAGE GRID ─────────────────────────────────────────────────────────── */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.lang-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t);
}

.lang-card:hover {
  border-color: var(--blue-bdr);
  box-shadow: 0 2px 10px rgba(0, 102, 204, 0.08);
}

.lang-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.lang-card-year {
  font-size: 0.72rem;
  color: var(--ink4);
  margin-bottom: 6px;
}

.lang-card-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--blue-bg);
  color: var(--blue);
}

.lang-card-tag-pending {
  background: var(--bg2);
  color: var(--ink4);
}

/* ─── START HERE CARDS ──────────────────────────────────────────────────────── */
.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.start-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t);
}

.start-card:hover {
  border-color: var(--blue-bdr);
  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
}

.start-card-emoji {
  font-size: 1.8rem;
  margin-bottom: 12px;
  display: block;
}

.start-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.start-card-desc {
  font-size: 0.82rem;
  color: var(--ink3);
  line-height: 1.6;
  margin: 0;
}

/* ─── COMPLEXITY TABLE ──────────────────────────────────────────────────────── */
.complexity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin: 1.2rem 0;
}

.complexity-table th {
  background: var(--bg2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}

.complexity-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2);
  color: var(--ink2);
  vertical-align: middle;
}

.complexity-table tr:last-child td {
  border-bottom: none;
}

.complexity-table code {
  font-size: 0.85em;
}

.big-o {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.88rem;
}

.big-o-best    { color: var(--green); }
.big-o-avg     { color: var(--amber); }
.big-o-worst   { color: var(--red); }
.big-o-neutral { color: var(--ink2); }

/* ─── RESPONSIVE TABLES ─────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--border);
  margin: 1.2rem 0;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.table-wrap th {
  background: var(--bg2);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.table-wrap td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border2);
  color: var(--ink2);
  vertical-align: top;
}

.table-wrap tr:last-child td {
  border-bottom: none;
}

/* ─── QUIZ COMPONENT ────────────────────────────────────────────────────────── */
.quiz-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 2rem 0;
}

.quiz-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.quiz-subtitle {
  font-size: 0.82rem;
  color: var(--ink3);
  margin-bottom: 24px;
}

.quiz-q {
  margin-bottom: 24px;
}

.quiz-q-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.55;
}

.quiz-options {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.quiz-option label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--ink2);
  flex: 1;
  transition: border-color var(--t), background var(--t);
  min-height: 44px;
  line-height: 1.5;
}

.quiz-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue);
}

.quiz-option label:hover {
  border-color: var(--blue-bdr);
  background: var(--blue-bg);
}

.quiz-submit {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 11px 24px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--t);
  min-height: 44px;
  margin-top: 8px;
}

.quiz-submit:hover {
  background: var(--blue-dk);
}

.quiz-submit:disabled {
  background: var(--ink4);
  cursor: not-allowed;
}

.quiz-result {
  display: none;
  padding: 16px 18px;
  border-radius: var(--r);
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.quiz-result.pass {
  background: var(--green-bg);
  border: 1px solid var(--green-bdr);
  color: var(--green);
}

.quiz-result.fail {
  background: var(--amber-bg);
  border: 1px solid var(--amber-bdr);
  color: var(--amber);
}

.quiz-explanation {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--ink3);
  margin-top: 8px;
  line-height: 1.6;
}

/* ─── METADATA / STAMP ──────────────────────────────────────────────────────── */
.page-stamp {
  font-size: 0.75rem;
  color: var(--ink4);
  border-top: 1px solid var(--border2);
  padding-top: 1rem;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
}

.stamp-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stamp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.stamp-dot-high   { background: var(--green); }
.stamp-dot-medium { background: var(--amber); }
.stamp-dot-low    { background: var(--red); }

/* ─── FOOTER ────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding: 52px 0 28px;
  margin-top: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-brand {
  max-width: 220px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  text-decoration: none;
}

.footer-logo .logo-mark {
  background: var(--blue);
}

.footer-logo-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.footer-brand-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.65;
  margin: 0;
}

.footer-col h5 {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 14px;
  margin-top: 0;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--t);
}

.footer-col a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.3);
}

.footer-legal {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.25);
  max-width: 520px;
  line-height: 1.6;
  text-align: right;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* ─── INLINE CHIP / TAGS ────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1px solid;
  line-height: 1.5;
}

.chip-blue   { background: var(--blue-bg);   color: var(--blue);  border-color: var(--blue-bdr);   }
.chip-green  { background: var(--green-bg);  color: var(--green); border-color: var(--green-bdr);  }
.chip-amber  { background: var(--amber-bg);  color: var(--amber); border-color: var(--amber-bdr);  }
.chip-red    { background: var(--red-bg);    color: var(--red);   border-color: var(--red-bdr);    }
.chip-muted  { background: var(--bg2);       color: var(--ink3);  border-color: var(--border);     }

/* ─── UTILITY ───────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted  { color: var(--ink4); }
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mt-4  { margin-top: 2rem; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }

/* ─── SEARCH RESULTS (hub page inline results) ──────────────────────────────── */
.search-no-results {
  text-align: center;
  padding: 32px 20px;
  color: var(--ink4);
  font-size: 0.88rem;
}

.search-result-count {
  font-size: 0.78rem;
  color: var(--ink4);
  margin-bottom: 12px;
}

/* ─── RESPONSIVE — BREAKPOINTS ──────────────────────────────────────────────── */

/* Tablet — 900px and below */
@media (max-width: 900px) {
  .art-layout {
    grid-template-columns: 1fr;
  }
  .art-sidebar {
    position: static;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }
}

/* Mobile — 768px and below */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .nav-ham {
    display: flex;
  }
  .nav-cta {
    display: none;
  }
  .hub-stats {
    gap: 20px;
  }
  .section-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .start-grid {
    grid-template-columns: 1fr;
  }
}

/* Small mobile — 480px and below */
@media (max-width: 480px) {
  .wrap {
    padding: 0 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hub-hero {
    padding: 44px 0 36px;
  }
  .hub-stats {
    gap: 16px;
  }
  .hub-stat-num {
    font-size: 1.3rem;
  }
  .level-tab {
    padding: 10px 12px;
    font-size: 0.78rem;
  }
  .quiz-wrap {
    padding: 20px 16px;
  }
}

/* Minimum body text 16px enforced on mobile */
@media (max-width: 480px) {
  body {
    font-size: 1rem;
  }
  p, li {
    font-size: 1rem;
  }
  .art-body p,
  .art-body li {
    font-size: 1rem;
  }
}

/* ─── FOCUS STATES (accessibility) ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ─── PRISM.JS SYNTAX HIGHLIGHTING (self-hosted) ────────────────────────────── */
/* These classes must match what Prism.js emits. Add Prism CSS here in Session 02+
   when the first code-heavy page is built. Stub kept here for structure. */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--syn-comment); }
.token.punctuation { color: var(--code-fg); }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: var(--syn-orange); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin { color: var(--syn-green); }
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--code-fg); }
.token.atrule, .token.attr-value, .token.keyword { color: var(--syn-purple); }
.token.function, .token.class-name { color: var(--syn-blue); }
.token.regex, .token.important, .token.variable { color: var(--syn-orange); }
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }

/* ─── PRINT ─────────────────────────────────────────────────────────────────── */
@media print {
  .site-nav, .chap-nav, .art-sidebar, .site-footer, .nav-ham, .nav-drawer { display: none !important; }
  .art-layout { grid-template-columns: 1fr; }
  body { color: #000; background: #fff; }
  a { color: #000; }
  pre { white-space: pre-wrap; word-break: break-all; }
}

/* ─── PLAYGROUND WIDGET ─────────────────────────────────────────────────────── */
/* Reusable in-browser code playground. Language-agnostic shell. S54.           */

.playground {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 1.6rem 0;
  background: var(--bg-code);
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

.playground-header {
  background: #171b22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.playground-lang {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--syn-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1;
}

.playground-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.playground-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t), transform 0.1s;
  font-family: var(--font-body);
  line-height: 1.4;
}

.playground-btn:active { transform: scale(0.97); }

.playground-run {
  background: #22863a;
  color: #fff;
}

.playground-run:hover { opacity: 0.88; }

.playground-run.running {
  opacity: 0.65;
  cursor: not-allowed;
}

.playground-reset {
  background: rgba(255,255,255,0.08);
  color: var(--ink5);
  border: 1px solid rgba(255,255,255,0.10);
}

.playground-reset:hover { background: rgba(255,255,255,0.14); }

.playground-editor {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-code);
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  padding: 1.1rem 1.3rem;
  border: none;
  resize: vertical;
  min-height: 120px;
  outline: none;
  tab-size: 2;
  -moz-tab-size: 2;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.playground-editor:focus {
  background: #1a1f27;
}

.playground-output-wrap {
  background: #12151a;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.playground-output-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 1.3rem 0;
  display: block;
}

.playground-output {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--code-fg);
  padding: 0.5rem 1.3rem 1rem;
  min-height: 44px;
  white-space: pre-wrap;
  word-break: break-all;
}

.playground-output.pg-empty {
  color: var(--ink4);
  font-style: italic;
}

.playground-output.pg-error {
  color: #ff7b7b;
}

.playground-output.pg-success {
  color: var(--code-fg);
}

/* Compact embed variant (used inline within lesson pages) */
.playground-embed .playground-editor {
  min-height: 90px;
  font-size: 0.8rem;
}

/* ─── SEARCH ────────────────────────────────────────────────────────────────── */
.nav-search-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 4px;
}
.nav-search-input {
  width: 36px;
  padding: 6px 10px 6px 30px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--ink2);
  cursor: pointer;
  transition: width 0.22s ease, border-color 0.15s, background 0.15s;
  font-family: var(--font-body);
}
.nav-search-input:hover {
  background: var(--bg3);
}
.nav-search-input:focus,
.nav-search-input:not(:placeholder-shown) {
  outline: none;
  border-color: var(--blue);
  width: 220px;
  padding: 6px 30px 6px 30px;
  background: var(--white);
  cursor: text;
}
.nav-search-input::placeholder { color: var(--ink4); }
.nav-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink4);
  font-size: 0.78rem;
  pointer-events: none;
}
.nav-search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink4);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  display: none;
  line-height: 1;
}
.nav-search-clear.visible { display: block; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 500;
  display: none;
  max-height: 420px;
  overflow-y: auto;
}
.search-dropdown.open { display: block; }
.search-result {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--bg2); }
.sr-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.sr-desc { font-size: 0.78rem; color: var(--ink4); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta { display: flex; gap: 6px; margin-top: 3px; }
.sr-tag { font-size: 0.68rem; padding: 1px 6px; border-radius: 3px; background: var(--bg3); color: var(--ink3); text-transform: capitalize; }
.search-empty { padding: 20px 14px; font-size: 0.85rem; color: var(--ink4); text-align: center; }
.search-footer { padding: 8px 14px; border-top: 1px solid var(--border2); display: flex; justify-content: space-between; align-items: center; }
.search-footer a { font-size: 0.78rem; color: var(--blue); text-decoration: none; }
.search-footer span { font-size: 0.75rem; color: var(--ink4); }
@media(max-width:768px) {
  .nav-search-wrap { display: none; }
}
/* Full search page */
.search-page-input {
  width: 100%;
  padding: 14px 20px;
  font-size: 1.1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  margin-bottom: 8px;
  font-family: var(--font-body);
  box-sizing: border-box;
}
.search-page-input:focus { outline: none; border-color: var(--blue); }
.search-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.sf-btn {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg2);
  color: var(--ink3);
  cursor: pointer;
  transition: all 0.15s;
}
.sf-btn:hover, .sf-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.search-results-list { display: grid; gap: 12px; }
.search-result-card {
  display: block;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-result-card:hover { border-color: var(--blue); box-shadow: 0 2px 12px rgba(0,102,204,0.1); }
.src-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.src-desc { font-size: 0.88rem; color: var(--ink3); line-height: 1.5; margin-bottom: 8px; }
.src-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.src-tag { font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; background: var(--bg3); color: var(--ink3); text-transform: capitalize; }

/* ── Progress tracking (progress.js) ───────────────────────────── */
.cb-progress-slot{display:inline-flex;align-items:center;}
.cb-done-btn{font-size:0.72rem;font-weight:700;padding:4px 12px;border-radius:8px;border:1.5px solid #1d4ed8;background:#fff;color:#1d4ed8;cursor:pointer;transition:all .15s ease;white-space:nowrap;}
.cb-done-btn:hover{background:#eff6ff;}
.cb-done-btn.is-done{background:#16a34a;border-color:#16a34a;color:#fff;}
.cb-done-btn.is-done:hover{background:#15803d;}
/* Course-page progress panel */
.course-progress{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:0 0 24px;}
.course-progress-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
.course-progress-label{font-size:0.82rem;font-weight:700;color:#111827;}
.course-progress-count{font-size:0.82rem;font-weight:700;color:#1d4ed8;}
.course-progress-bar{height:9px;background:#e5e7eb;border-radius:6px;overflow:hidden;}
.course-progress-fill{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:6px;width:0;transition:width .4s ease;}
.course-progress-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.course-continue-btn{font-size:0.82rem;font-weight:700;padding:8px 16px;border-radius:8px;background:#1d4ed8;color:#fff;text-decoration:none;border:none;cursor:pointer;}
.course-continue-btn:hover{background:#1e40af;}
.course-reset-btn{font-size:0.8rem;font-weight:600;padding:8px 14px;border-radius:8px;background:#fff;color:#6b7280;border:1px solid #d1d5db;cursor:pointer;}
.course-reset-btn:hover{background:#f9fafb;color:#374151;}
.lesson-done-tick{color:#16a34a;font-weight:800;margin-left:6px;}
/* Completed lesson rows in the course map */
.lesson-row.is-done .lesson-row-title{color:#16a34a;}

/* Coming-soon items (neutralized dead links) — visible but not clickable */
.soon-link{cursor:not-allowed;opacity:0.55;text-decoration:none;position:relative;}
.soon-link:hover::after{content:"Coming soon";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#111827;color:#fff;font-size:0.68rem;padding:3px 8px;border-radius:5px;white-space:nowrap;margin-bottom:4px;z-index:10;}

/* ── Project deliverable pages (problem→approach→build→test→docs→run) ── */
.proj-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;max-width:1080px;margin:0 auto;padding:0 20px;}
.proj-main{min-width:0;}
@media(max-width:880px){.proj-layout{grid-template-columns:1fr;}.proj-menu{position:static !important;}}
.proj-menu{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow-y:auto;font-size:0.85rem;}
.proj-menu-title{font-size:0.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9ca3af;margin:0 0 10px;}
.proj-menu a{display:block;padding:7px 12px;color:#4b5563;text-decoration:none;border-left:2px solid #e5e7eb;line-height:1.4;transition:all .12s;}
.proj-menu a:hover{color:#1d4ed8;border-left-color:#93c5fd;background:#f8fafc;}
.proj-menu a.active{color:#1d4ed8;border-left-color:#1d4ed8;font-weight:700;background:#eff6ff;}
.proj-section{scroll-margin-top:80px;padding:28px 0;border-bottom:1px solid #f0f0f0;}
.proj-section:last-child{border-bottom:none;}
.proj-section-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#eff6ff;color:#1d4ed8;font-size:0.8rem;font-weight:800;margin-right:10px;}
.proj-section h2{display:flex;align-items:center;font-size:1.4rem;font-weight:800;color:#111827;margin:0 0 8px;}
.proj-section-lead{font-size:0.95rem;color:#4b5563;line-height:1.65;margin:0 0 18px;}
.proj-usecase{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:16px 18px;margin:16px 0;font-size:0.88rem;color:#78350f;line-height:1.6;}
.proj-usecase strong{color:#92400e;}
.proj-think{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:16px 18px;margin:16px 0;font-size:0.88rem;color:#075985;line-height:1.65;}
.proj-think-title{font-weight:800;margin-bottom:6px;color:#0c4a6e;}
.proj-test{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:6px 12px;margin:10px 0;font-size:0.82rem;color:#166534;display:flex;align-items:center;gap:8px;}
.proj-test::before{content:"\2713";font-weight:800;}
.mermaid-box{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px;margin:16px 0;overflow-x:auto;text-align:center;}
.swagger-box{border:1px solid #e5e7eb;border-radius:10px;margin:16px 0;overflow:hidden;}
.endpoint{border:1px solid #e5e7eb;border-radius:8px;margin:10px 0;overflow:hidden;}
.endpoint-top{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:default;}
.endpoint.get .endpoint-top{background:#eff6ff;}.endpoint.post .endpoint-top{background:#f0fdf4;}
.endpoint-method{font-size:0.72rem;font-weight:800;padding:3px 10px;border-radius:5px;color:#fff;letter-spacing:.03em;}
.endpoint.get .endpoint-method{background:#3b82f6;}.endpoint.post .endpoint-method{background:#16a34a;}
.endpoint-path{font-family:ui-monospace,monospace;font-size:0.85rem;font-weight:700;color:#111827;}
.endpoint-desc{font-size:0.82rem;color:#6b7280;margin-left:auto;}
.endpoint-body{padding:14px;border-top:1px solid #e5e7eb;font-size:0.82rem;}
.endpoint-body h5{font-size:0.7rem;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;margin:12px 0 6px;}

/* Mermaid diagrams must not inherit code-block (dark) pre styling */
pre.mermaid{background:transparent !important;color:inherit !important;padding:0 !important;text-align:center;border:none;}
pre.mermaid svg{max-width:100%;height:auto;}
.mermaid-box pre.mermaid:not([data-processed])::before{content:"Rendering diagram…";color:#9ca3af;font-size:0.82rem;}

/* ── Domain layer (browse by what you build) ──────────────────── */
.section-card-icon{font-size:1.6rem;margin-bottom:8px;}
.section-card-tag{display:inline-block;margin-top:10px;font-size:0.68rem;font-weight:700;color:#1d4ed8;background:#eff6ff;padding:3px 9px;border-radius:10px;}
.domain-group-title{font-size:1.25rem;font-weight:800;color:#111827;margin:32px 0 14px;display:flex;align-items:center;gap:10px;}
.domain-group-count{font-size:0.8rem;font-weight:700;color:#1d4ed8;background:#eff6ff;padding:2px 10px;border-radius:10px;}
.domain-other{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);}
.domain-other-title{font-size:0.95rem;font-weight:700;color:#374151;margin:0 0 12px;}
.domain-pills{display:flex;flex-wrap:wrap;gap:8px;}
.domain-pill{font-size:0.82rem;font-weight:600;color:#374151;background:#fff;border:1px solid var(--border);border-radius:20px;padding:7px 14px;text-decoration:none;transition:all .15s;}
.domain-pill:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff;}

/* ── Domain tags shown on content pages (closes the loop hub<->page) ── */
.page-domains{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;}
.page-domains-label{font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.6);}
.page-domain-tag{font-size:0.74rem;font-weight:600;color:#fff;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:14px;padding:4px 11px;text-decoration:none;transition:all .15s;}
.page-domain-tag:hover{background:rgba(255,255,255,0.22);border-color:rgba(255,255,255,0.4);}

/* ── Language bands inside domain hubs (group content by language) ── */
.lang-band{background:#fff;border:1px solid var(--border);border-radius:14px;padding:8px 24px 24px;margin:0 0 24px;box-shadow:0 1px 3px rgba(26,29,35,0.05);}
.lang-band-head{display:flex;align-items:center;gap:16px;padding:18px 0 16px;border-bottom:2px solid #f0f2f5;margin-bottom:8px;}
.lang-band-icon{font-size:2rem;flex-shrink:0;}
.lang-band-name{font-size:1.4rem;font-weight:800;color:#111827;margin:0;}
.lang-band-sub{font-size:0.85rem;color:#6b7280;margin:2px 0 0;}
.lang-band-link{margin-left:auto;font-size:0.85rem;font-weight:700;color:#1d4ed8;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.lang-band-link:hover{text-decoration:underline;}
.lang-band-soon{background:#fafbfc;border-style:dashed;text-align:left;}
.lang-band-soon .lang-band-head{border-bottom:none;padding-bottom:0;margin-bottom:0;}
/* tighten group titles inside a band */
.lang-band-body .domain-group-title:first-child{margin-top:18px;}

/* ── Project teaching extras (mistakes, breaks, try-next) ── */
.proj-mistake{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:0.85rem;}
.proj-mistake:last-child{border-bottom:none;}
.proj-mistake-wrong{color:#b91c1c;flex:1;min-width:240px;}
.proj-mistake-fix{color:#15803d;flex:1;min-width:240px;}
.proj-break{padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.05);font-size:0.85rem;}
.proj-break:last-child{border-bottom:none;}
.proj-break-symptom{font-weight:700;color:#92400e;margin-bottom:3px;}
.proj-break-fix{color:#4b5563;}
.proj-trynext{background:#fdf4ff !important;border-color:#e9d5ff !important;}
.proj-trynext ol{margin:6px 0 0;padding-left:20px;}
.proj-trynext li{font-size:0.86rem;color:#4b5563;line-height:1.6;margin-bottom:6px;}

/* ── Fuzzy search results (search.js) ── */
.sr-tag{display:inline-block;font-size:0.62rem;font-weight:700;text-transform:capitalize;color:#1d4ed8;background:#eff6ff;padding:2px 7px;border-radius:8px;margin-right:5px;}
.search-seeall{display:block;padding:9px 14px;font-size:0.78rem;font-weight:700;color:#1d4ed8;text-decoration:none;text-align:center;border-top:1px solid var(--border);background:#fafbfc;}
.search-seeall:hover{background:#eff6ff;}

/* ── Domain learning paths (the curriculum piece) ── */
.domain-path{background:linear-gradient(180deg,#f0f9ff,#fff);border:1px solid #bae6fd;border-radius:16px;padding:24px 26px;margin:0 0 32px;}
.domain-path-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;}
.domain-path-icon{font-size:1.8rem;flex-shrink:0;}
.domain-path-title{font-size:1.3rem;font-weight:800;color:#0c4a6e;margin:0 0 4px;}
.domain-path-lead{font-size:0.9rem;color:#075985;margin:0;line-height:1.6;}
.domain-path-steps{display:flex;flex-direction:column;gap:0;}
.path-step{display:flex;align-items:center;gap:14px;padding:14px 12px;text-decoration:none;border-radius:10px;position:relative;transition:background .15s;}
.path-step:hover{background:#e0f2fe;}
.path-step:not(:last-child)::after{content:"";position:absolute;left:28px;top:44px;bottom:-2px;width:2px;background:#bae6fd;}
.path-step-num{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#0284c7;color:#fff;font-weight:800;font-size:0.85rem;display:flex;align-items:center;justify-content:center;z-index:1;}
.path-step-body{flex:1;min-width:0;}
.path-step-title{display:block;font-size:0.92rem;font-weight:700;color:#0c4a6e;margin-bottom:2px;}
.path-step-badge{font-size:0.6rem;font-weight:700;text-transform:uppercase;padding:1px 7px;border-radius:8px;vertical-align:middle;margin-left:4px;}
.path-step-badge.feature{background:#dbeafe;color:#1e40af;}
.path-step-badge.stdlib{background:#dcfce7;color:#166534;}
.path-step-badge.project{background:#fef3c7;color:#92400e;}
.path-step-why{display:block;font-size:0.82rem;color:#0369a1;line-height:1.5;}
.path-step-arrow{flex-shrink:0;color:#0284c7;font-size:1.1rem;font-weight:700;}
.domain-browse-title{font-size:1.15rem;font-weight:800;color:#111827;margin:8px 0 18px;padding-top:8px;}

/* ── Projects hub (tier-organized cards) ── */
.pj-tier{margin-bottom:40px;}
.pj-tier-title{font-size:1.3rem;font-weight:800;color:#111827;margin:0 0 4px;display:flex;align-items:baseline;gap:12px;}
.pj-tier-label{font-size:0.8rem;font-weight:600;color:#6b7280;}
.pj-tier:not(:first-child) .pj-tier-title{margin-top:8px;padding-top:24px;border-top:1px solid var(--border);}
.pj-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 20px;text-decoration:none;box-shadow:0 1px 3px rgba(26,29,35,0.05);transition:all .15s;}
.pj-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,29,35,0.1);border-color:#bfdbfe;}
.pj-card-title{font-size:1.05rem;font-weight:800;color:#111827;margin-bottom:6px;}
.pj-card-desc{font-size:0.85rem;color:#4b5563;line-height:1.55;flex:1;}
.pj-card-meta{display:flex;align-items:center;gap:10px;margin-top:14px;}
.pj-card-live{font-size:0.68rem;font-weight:700;color:#15803d;background:#dcfce7;padding:3px 9px;border-radius:10px;}
.pj-card-soon{font-size:0.68rem;font-weight:700;color:#92400e;background:#fef3c7;padding:3px 9px;border-radius:10px;}
.pj-card-langs{font-size:0.72rem;color:#9ca3af;}

/* ── Project Universe page (mode picker + variant cards) ── */
.pu-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:28px;padding:14px 18px;background:#f8fafc;border:1px solid var(--border);border-radius:12px;}
.pu-nav-label{font-size:0.85rem;font-weight:700;color:#374151;}
.pu-nav-pill{font-size:0.82rem;font-weight:600;color:#1d4ed8;background:#fff;border:1px solid #bfdbfe;border-radius:16px;padding:5px 13px;text-decoration:none;transition:all .15s;}
.pu-nav-pill:hover{background:#eff6ff;}
.pu-mode{margin-bottom:36px;scroll-margin-top:80px;}
.pu-mode-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;}
.pu-mode-icon{font-size:1.8rem;flex-shrink:0;}
.pu-mode-title{font-size:1.3rem;font-weight:800;color:#111827;margin:0 0 4px;}
.pu-mode-desc{font-size:0.9rem;color:#6b7280;margin:0;line-height:1.6;max-width:640px;}
.pu-variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.pu-variant{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;border:1px solid var(--border);text-decoration:none;background:#fff;transition:all .15s;}
.pu-live:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,29,35,0.1);border-color:#86efac;}
.pu-soon{opacity:0.72;background:#fafbfc;border-style:dashed;cursor:default;}
.pu-variant-icon{font-size:1.5rem;flex-shrink:0;}
.pu-variant-name{font-weight:700;color:#111827;font-size:0.92rem;flex:1;display:flex;flex-direction:column;gap:2px;}
.pu-variant-why{font-weight:400;font-size:0.75rem;color:#9ca3af;}
.pu-variant-status{font-size:0.7rem;font-weight:700;white-space:nowrap;}
.pu-status-live{color:#15803d;}
.pu-status-soon{color:#a16207;background:#fef3c7;padding:3px 8px;border-radius:8px;}
.pu-foot{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);text-align:center;}
.pu-foot p{font-size:0.88rem;color:#6b7280;margin:0 0 12px;}
.pu-foot-link{font-size:0.85rem;font-weight:700;color:#1d4ed8;text-decoration:none;}
.pu-mode-chip{font-size:0.6rem;font-weight:700;text-transform:uppercase;color:#1d4ed8;background:#eff6ff;padding:2px 7px;border-radius:8px;margin-right:4px;}

/* ── Technologies layer ── */
.tech-cat{margin-bottom:40px;}
.tech-cat-title{font-size:1.3rem;font-weight:800;color:#111827;margin:0 0 16px;display:flex;align-items:center;gap:10px;}
.tech-cat:not(:first-child) .tech-cat-title{margin-top:8px;padding-top:24px;border-top:1px solid var(--border);}
.tech-cat-count{font-size:0.78rem;font-weight:700;color:#1d4ed8;background:#eff6ff;padding:2px 10px;border-radius:10px;}
.tech-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 20px;text-decoration:none;box-shadow:0 1px 3px rgba(26,29,35,0.05);transition:all .15s;}
.tech-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,29,35,0.1);border-color:#bfdbfe;}
.tech-card-name{font-size:1.05rem;font-weight:800;color:#111827;margin-bottom:6px;}
.tech-card-desc{font-size:0.84rem;color:#4b5563;line-height:1.55;flex:1;}
.tech-card-tag{display:inline-block;margin-top:12px;font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;background:#f3f4f6;padding:3px 9px;border-radius:8px;align-self:flex-start;}
.tech-section{margin-bottom:28px;}
.tech-section h2{font-size:1.2rem;font-weight:800;color:#111827;margin:0 0 10px;}
.tech-section p{font-size:0.95rem;color:#374151;line-height:1.7;margin:0;}
.tech-section code{background:#f3f4f6;padding:1px 6px;border-radius:5px;font-size:0.86em;color:#0f5132;}
.tech-soon-note{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px 18px;margin-bottom:24px;font-size:0.88rem;color:#78350f;line-height:1.6;}

/* Coming-soon language band tag */
.lang-band-soon-tag{margin-left:auto;font-size:0.7rem;font-weight:700;color:#a16207;background:#fef3c7;padding:4px 11px;border-radius:12px;white-space:nowrap;flex-shrink:0;}

/* ── Per-language learning paths in domain hubs ── */
.path-lang-head{display:flex;align-items:center;gap:10px;margin:20px 0 4px;padding-top:16px;border-top:1px solid #bae6fd;}
.path-lang-icon{font-size:1.4rem;}
.path-lang-name{font-size:1.05rem;font-weight:800;color:#0c4a6e;}
.path-lang-tag-live{font-size:0.68rem;font-weight:700;color:#15803d;background:#dcfce7;padding:3px 10px;border-radius:10px;}
.path-lang-lead{font-size:0.88rem;color:#075985;margin:0 0 14px;line-height:1.5;}
.path-lang-soon-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed #bae6fd;}
.path-lang-soon{display:flex;align-items:center;gap:7px;padding:7px 13px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:20px;}
.path-lang-soon-icon{font-size:1rem;opacity:.5;}
.path-lang-soon-name{font-size:0.8rem;font-weight:600;color:#9ca3af;}
.path-lang-soon-tag{font-size:0.62rem;font-weight:700;color:#a16207;background:#fef3c7;padding:2px 7px;border-radius:8px;}

/* ── "Try It Yourself" runnable editors (tryit.js) ── */
.tryit{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:18px 0;background:var(--white);}
.tryit-head{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--border);}
.tryit-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink3);margin-right:auto;}
.tryit-run{font-size:0.8rem;font-weight:700;color:#fff;background:var(--green);border:none;border-radius:6px;padding:6px 16px;cursor:pointer;transition:background var(--t);}
.tryit-run:hover{background:#047857;}
.tryit-run.running{background:var(--amber);cursor:wait;}
.tryit-reset{font-size:0.78rem;font-weight:600;color:var(--ink3);background:transparent;border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;transition:all var(--t);}
.tryit-reset:hover{background:var(--bg3);color:var(--ink);}
.tryit-localbadge{font-size:0.68rem;font-weight:700;color:var(--amber);background:#fef3c7;padding:3px 10px;border-radius:10px;}
.tryit-note{font-size:0.82rem;color:var(--ink3);padding:8px 12px 0;line-height:1.5;}
.tryit-editor{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--border);padding:14px 16px;font-family:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;font-size:0.86rem;line-height:1.6;color:var(--ink);background:#fbfcfd;resize:vertical;outline:none;tab-size:4;}
.tryit-editor:focus{background:#fff;}
.tryit-output{margin:0;padding:14px 16px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:0.84rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;min-height:20px;background:#1A1D23;color:#e2e8f0;}
.tryit-output.tryit-empty{color:#64748b;font-style:italic;background:var(--bg);}
.tryit-output.tryit-ok{color:#86efac;}
.tryit-output.tryit-err{color:#fca5a5;}
.tryit-localhint{font-size:0.8rem;color:var(--ink3);padding:12px 16px;background:#fffbeb;border-top:1px solid var(--border);line-height:1.55;}
/* Pre-JS fallback: show the code plainly if tryit.js hasn't run yet */
.tryit:not(.tryit-ready){padding:14px 16px;font-family:monospace;font-size:0.85rem;white-space:pre-wrap;color:var(--ink2);}

/* ─── JS PROJECT PAGES — proj-hero / proj-menu family ───────────────────────
   These classes were used across all 33 live JS project pages (bmi-calculator,
   quiz-engine, etc.) but never defined anywhere — proj-hero had zero width/
   layout rules (content ran off-screen unconstrained) and proj-menu's <ul><li>
   had no list-style reset (raw bullets). Matches the site's existing dark
   page-hero gradient language for visual consistency with every other page
   type. CSS-only fix — zero HTML changes across the 33 existing pages. */

.proj-hero {
  background: linear-gradient(135deg, #1E2128 0%, #1a2a4a 60%, #1E2128 100%);
  padding: 44px 0 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.proj-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  color: #fff;
}
.proj-breadcrumb {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
}
.proj-breadcrumb a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.15s;
}
.proj-breadcrumb a:hover { color: rgba(0, 153, 255, 0.9); }
.proj-tier-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue-lt);
  background: rgba(0, 102, 204, 0.25);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.proj-title {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
}
.proj-one-liner {
  font-size: clamp(0.9rem, 2vw, 1.03rem);
  color: rgba(255, 255, 255, 0.65);
  max-width: 680px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.proj-lang-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.lang-pill:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.lang-pill-active {
  background: rgba(0, 102, 204, 0.35);
  color: #fff;
}

/* proj-menu: reset the raw <ul><li> list (was showing default bullets/indent) */
.proj-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.proj-menu li { margin: 0; }

/* Sections not covered by the earlier proj-* block (S-unknown) */
.proj-interface {
  font-size: 0.88rem;
  color: #4b5563;
  line-height: 1.7;
}
.proj-trynext ol {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 0.88rem;
  color: #4b5563;
  line-height: 1.9;
}
.proj-learned {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 20px;
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.7;
}
.proj-learned h3 { font-size: 0.95rem; color: #111827; margin: 0 0 8px; }
.proj-learned a { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.proj-learned a:hover { text-decoration: underline; }

/* The Try It block on project pages sits as a sibling right after
   .proj-layout closes (not inside it) — give it the same content-column
   width instead of full body width. */
.proj-layout + .tryit {
  max-width: 1080px;
  margin: 28px auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media(max-width:880px){ .proj-layout + .tryit { padding-left:16px; padding-right:16px; } }

/* ─── REFERENCE PAGES (JS / React / Express) — ref-hero/ref-tabs/sidebar family
   98 pages (69 JS reference + 16 React + 13 Express) used this class vocabulary
   with ZERO CSS definitions anywhere. Same root pattern as the JS course page
   and JS project bugs fixed earlier this session. Critically, .hidden was also
   undefined — meaning the Beginner/Intermediate/Expert tab panels were NEVER
   actually hidden; all three rendered stacked simultaneously regardless of
   which tab was "active". CSS-only fix, zero HTML changes across 98 pages. */

/* Tab panel visibility — functional fix, not just cosmetic */
.hidden { display: none !important; }

/* Two-column layout: sidebar + main content */
.ref-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 24px 60px;
  align-items: start;
}
@media (max-width: 880px) {
  .ref-layout { grid-template-columns: 1fr; }
  .sidebar { position: static !important; }
}
.ref-main { min-width: 0; }

/* Sidebar */
.sidebar {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  font-size: 0.85rem;
}
.sidebar-section { margin-bottom: 22px; }
.sidebar-heading {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 8px;
}
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { margin: 0; }
.sidebar-list a {
  display: block;
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  color: #4b5563;
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.12s, color 0.12s;
}
.sidebar-list a:hover { background: #f8fafc; color: #1d4ed8; }
.sidebar-list a.sidebar-active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

/* Hero */
.ref-hero {
  background: linear-gradient(135deg, #1E2128 0%, #1a2a4a 60%, #1E2128 100%);
  border-radius: 12px;
  padding: 32px 30px 28px;
  margin-bottom: 22px;
}
.ref-hero-inner { color: #fff; }
.ref-breadcrumb {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}
.ref-breadcrumb a { color: rgba(255, 255, 255, 0.45); text-decoration: none; }
.ref-breadcrumb a:hover { color: rgba(0, 153, 255, 0.9); }
.ref-title {
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 10px;
}
.ref-subtitle {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 0 16px;
}
.ref-canonical-def {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
}
.ref-canonical-def strong { color: #fff; }

/* Reading-level tabs */
.ref-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.ref-tab {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 6px 11px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ref-tab:hover { color: #111827; }
.ref-tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.ref-tab-panel { font-size: 0.92rem; color: #374151; line-height: 1.75; }
.ref-tab-panel h2 { font-size: 1.3rem; font-weight: 800; color: #111827; margin: 26px 0 12px; }
.ref-tab-panel h2:first-child { margin-top: 0; }
.ref-tab-panel p { margin: 0 0 14px; }

/* Sources */
.ref-sources {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}
.sources-list { list-style: none; margin: 10px 0; padding: 0; }
.sources-list li { padding: 5px 0; font-size: 0.85rem; }
.sources-list a { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.sources-list a:hover { text-decoration: underline; }
.sources-note { font-size: 0.8rem; color: #9ca3af; margin: 8px 0 0; line-height: 1.6; }

/* ─── COURSE BANNER — lesson prev/next nav (92 pages, same missing-CSS issue) ── */
.course-banner {
  background: #111827;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cb-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cb-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; }
.cb-course-link { color: #93c5fd; text-decoration: none; font-weight: 600; }
.cb-course-link:hover { text-decoration: underline; }
.cb-lesson-num { color: rgba(255, 255, 255, 0.45); }
.cb-nav { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; }
.cb-prev, .cb-next {
  color: #93c5fd;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.cb-prev:hover, .cb-next:hover { text-decoration: underline; }
.cb-disabled { color: rgba(255, 255, 255, 0.3); cursor: default; pointer-events: none; }

/* ─── SESSION A: remaining undefined-CSS templates ──────────────────────────
   Continues the systematic fix of HTML shipped against undefined classes.
   All render-verified. CSS-only, zero HTML changes. */

/* Callout variants warn/key/tip (blue/amber/green/red already existed) */
.callout-warn { background: var(--amber-bg); border-color: var(--amber); }
.callout-warn .callout-head { color: var(--amber); }
.callout-key { background: var(--blue-bg); border-color: var(--blue); }
.callout-key .callout-head { color: var(--blue); }
.callout-tip { background: var(--green-bg); border-color: var(--green); }
.callout-tip .callout-head { color: var(--green); }

/* ─── LEARN TRACK PAGES — lesson cards + quiz (40 stub-language pages) ─────── */
.lessons-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 28px; }
.lesson-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lesson-card:hover { border-color: #93c5fd; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.lesson-num {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  padding: 4px 10px;
  border-radius: 100px;
  margin-top: 2px;
}
.lesson-body { flex: 1; min-width: 0; }
.lesson-title { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 4px; }
.lesson-desc { font-size: 0.86rem; color: #4b5563; line-height: 1.6; margin: 0 0 10px; }
.lesson-wlf {
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0 0;
}
.lesson-wlf-title { font-size: 0.78rem; font-weight: 700; color: #334155; margin: 0 0 6px; }
.lesson-wlf ul { margin: 0; padding-left: 18px; }
.lesson-wlf li { font-size: 0.82rem; color: #4b5563; line-height: 1.55; }
.lesson-prereq { font-size: 0.8rem; color: #92400e; background: #fffbeb; border-radius: 6px; padding: 6px 10px; margin: 8px 0 0; }
.lesson-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lesson-time { font-size: 0.76rem; color: #9ca3af; white-space: nowrap; }
.lesson-arrow { color: #93c5fd; font-size: 1.1rem; font-weight: 700; }
@media (max-width: 640px) {
  .lesson-card { flex-wrap: wrap; }
  .lesson-meta { flex-direction: row; align-items: center; }
}

/* Track quiz */
.quiz-section { margin: 36px 0; }
.quiz-container { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.quiz-q {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px 20px;
}
.quiz-question { font-size: 0.95rem; font-weight: 700; color: #111827; margin: 0 0 14px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  text-align: left;
  font-size: 0.88rem;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.quiz-opt:hover { background: #eff6ff; border-color: #93c5fd; }
.quiz-opt.quiz-correct { background: #f0fdf4; border-color: #16a34a; color: #166534; font-weight: 600; }
.quiz-opt.quiz-wrong { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.quiz-feedback { font-size: 0.84rem; margin: 12px 0 0; line-height: 1.55; min-height: 1px; }
.quiz-feedback.quiz-fb-correct { color: #166534; }
.quiz-feedback.quiz-fb-wrong { color: #991b1b; }
.quiz-result { font-size: 0.95rem; font-weight: 700; color: #111827; margin-top: 16px; }

/* Track-navigation link at bottom of a track page */
.track-nav-prev, .track-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  transition: background 0.12s;
}
.track-nav-prev:hover, .track-nav-next:hover { background: #eff6ff; }

/* ─── LEARN HUB PAGES — track cards (stub-language learn hubs) ─────────────── */
.track-card {
  display: block;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: 4px solid #94a3b8;
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.track-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.track-card-green { border-top-color: #059669; }
.track-card-blue { border-top-color: #2563eb; }
.track-card-red { border-top-color: #dc2626; }
.track-badge {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
}
.track-title { font-size: 1.25rem; font-weight: 800; color: #111827; margin: 0 0 4px; }
.track-tagline { font-size: 0.88rem; color: #6b7280; margin: 0 0 14px; }
.track-lessons-list { margin: 0 0 16px; padding-left: 18px; }
.track-lessons-list li { font-size: 0.84rem; color: #4b5563; line-height: 1.7; }
.track-meta { display: flex; gap: 16px; font-size: 0.78rem; color: #9ca3af; margin-bottom: 14px; }
.track-cta { font-size: 0.86rem; font-weight: 700; color: #1d4ed8; }

/* ─── PROJECT UNIVERSE PAGES — language hub-cards (33 pages) ───────────────── */
.hub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 8px 0;
}
.hub-card {
  display: block;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hub-card:hover { border-color: #93c5fd; box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-2px); }
.hub-card-title { font-size: 1.05rem; font-weight: 700; color: #111827; }

/* ─── COMPARISON TABLES (grid-based, 9 pages) ─────────────────────────────── */
.comparison-table {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
}
.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid #f0f0f0;
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row > div { padding: 11px 16px; font-size: 0.85rem; color: #374151; line-height: 1.55; border-right: 1px solid #f0f0f0; }
.comparison-row > div:last-child { border-right: none; }
.comparison-header { background: #f8fafc; }
.comparison-header > div { font-weight: 700; color: #111827; font-size: 0.82rem; }
@media (max-width: 640px) {
  .comparison-row { grid-template-columns: 1fr; }
  .comparison-row > div { border-right: none; border-bottom: 1px solid #f3f4f6; }
}

/* ─── SECTION CARDS (hub landing tiles, 9 pages) ──────────────────────────── */
.section-card {
  display: block;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.section-card:hover { border-color: #93c5fd; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.section-card-title { font-size: 0.98rem; font-weight: 700; color: #111827; margin: 0 0 4px; }
.section-card-desc { font-size: 0.84rem; color: #6b7280; line-height: 1.55; margin: 0; }

/* Footer variants on 404/contact/legal pages (footer-col base already exists) */
.footer-tagline { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 8px 0; }
.footer-heading { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 10px; }

/* ref-table — simple data tables inside reference/project content */
.ref-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.85rem; }
.ref-table th, .ref-table td { text-align: left; padding: 9px 14px; border: 1px solid #e5e7eb; }
.ref-table th { background: #f8fafc; font-weight: 700; color: #111827; }
.ref-table td { color: #374151; }
.ref-table tr:nth-child(even) td { background: #fafbfc; }
.level-badge{display:inline-block;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;padding:2px 8px;border-radius:8px;margin-left:6px;vertical-align:middle;}
.level-green{color:#15803d;background:#dcfce7;}
.level-amber{color:#a16207;background:#fef3c7;}