/* Learn ZudoJS — lesson pages (/learn). Sits on site.css + docs.css. */

/* ==================== HERO ==================== */

.lx-hero {
  position: relative;
  border: 4px solid #1A1A2E;
  background: #FFFFFF;
  padding: 2.25rem 2rem 1.75rem;
  margin-bottom: 2.5rem;
}
.lx-hero-tag {
  position: absolute;
  top: -0.85rem;
  left: 1.5rem;
  background: #C0392B;
  color: #FAFAF9;
  border: 2px solid #1A1A2E;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.75rem;
}
.lx-hero-part {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0.25rem 0 0.35rem;
}
.lx-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.lx-hero-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #374151;
  max-width: 44rem;
  margin: 0;
}
.lx-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: #374151;
}
.lx-hero-meta li { margin: 0; }
.lx-hero-index { padding-bottom: 2rem; }
.lx-start {
  display: inline-block;
  margin-top: 1.5rem;
  background: #1E8449;
  color: #FFFFFF;
  font-weight: 800;
  padding: 0.75rem 1.4rem;
  border: 3px solid #1A1A2E;
  box-shadow: 4px 4px 0 #1A1A2E;
  text-decoration: none;
}
.lx-start:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #1A1A2E; }

/* ==================== BODY TYPOGRAPHY ==================== */

.lx-body { font-size: 1.0625rem; line-height: 1.75; color: #1F2937; }
.lx-body > section { margin-bottom: 3rem; }
.lx-body h2 {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.25;
  border-bottom: 4px solid #1A1A2E;
  padding-bottom: 0.4rem;
  margin: 2.75rem 0 1.1rem;
  scroll-margin-top: 90px;
}
.lx-body h3 { font-size: 1.2rem; font-weight: 800; margin: 2rem 0 0.6rem; scroll-margin-top: 90px; }
.lx-body p { margin: 0 0 1rem; }
.lx-body ul, .lx-body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.lx-body ul { list-style: square; }
.lx-body ol { list-style: decimal; }
.lx-body li { margin-bottom: 0.35rem; }
.lx-body a { color: #2471A3; text-decoration: underline; text-underline-offset: 2px; }
.lx-body strong { font-weight: 700; color: #111827; }
.lx-body :not(pre) > code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.86em;
  background: #EEF0F3;
  border: 1px solid #E1E4E8;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}
.lx-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.95rem; }
.lx-body th, .lx-body td { border: 2px solid #1A1A2E; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.lx-body th { background: #1A1A2E; color: #FAFAF9; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.lx-body td code { white-space: normal; }
.lx-table-wrap { overflow-x: auto; margin-bottom: 1.25rem; }
.lx-table-wrap table { margin: 0; }
.lx-body .callout { font-size: 0.975rem; }
.lx-body .callout p:last-child { margin-bottom: 0; }
.lx-callout-label { font-size: 0.75rem !important; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 0.3rem !important; }
.lx-body kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8em;
  border: 1px solid #9CA3AF;
  border-bottom-width: 2px;
  padding: 0 0.3rem;
  background: #FFFFFF;
}

/* ==================== RUNNABLE EXAMPLE ==================== */

.lx-example, .lx-shell {
  margin: 1.25rem 0 1.5rem;
  border: 2px solid #1A1A2E;
  background: #1E1E2E;
  box-shadow: 4px 4px 0 #1A1A2E;
}
.lx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem 0.45rem 0.9rem;
  background: #181825;
  border-bottom: 1px solid #313244;
  min-height: 2.6rem;
}
.lx-file {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  color: #CDD6F4;
  font-weight: 600;
}
.lx-run {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #A6E3A1;
  color: #11111B;
  border: 2px solid #11111B;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.lx-run svg { width: 0.8rem; height: 0.8rem; }
.lx-run:hover { background: #C7F0C3; }
.lx-run:focus-visible { outline: 3px solid #F9E2AF; outline-offset: 2px; }
.lx-nodeonly {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F9E2AF;
  border: 1px solid #F9E2AF;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
.lx-code {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  color: #CDD6F4;
  tab-size: 2;
  white-space: pre;
}
.lx-code .t-kw   { color: #CBA6F7; }
.lx-code .t-str  { color: #A6E3A1; }
.lx-code .t-tpl  { color: #A6E3A1; }
.lx-code .t-cmt  { color: #9399B2; font-style: italic; }
.lx-code .t-num  { color: #FAB387; }
.lx-code .t-cn   { color: #F38BA8; }
.lx-code .t-ty   { color: #F9E2AF; }
.lx-code .t-fn   { color: #89B4FA; }
.lx-code .t-prop { color: #B4BEFE; }
.lx-code .t-op   { color: #94E2D5; }
.lx-code .t-pn   { color: #9399B2; }
.lx-code .t-dec  { color: #F5C2E7; }

.lx-out { border-top: 2px dashed #45475A; background: #11111B; }
.lx-out-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #A6ADC8;
  padding: 0.55rem 1.1rem 0;
}
.lx-out-label code {
  text-transform: none;
  letter-spacing: 0;
  background: transparent !important;
  border: 0 !important;
  color: #F9E2AF;
  font-size: 0.95em !important;
  padding: 0 !important;
}
.lx-out pre {
  margin: 0;
  padding: 0.5rem 1.1rem 0.95rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #E6E9EF;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lx-out-tsc pre { color: #F9C6CF; }

/* ==================== TERMINAL ON YOUR COMPUTER ==================== */

.lx-shell { background: #0B0B12; }
.lx-shell .lx-bar::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #F38BA8;
  box-shadow: 1rem 0 0 #F9E2AF, 2rem 0 0 #A6E3A1;
  margin-right: 2.4rem;
  flex: none;
}
.lx-shell .lx-bar { justify-content: flex-start; }
.lx-shell-body {
  margin: 0;
  padding: 0.9rem 1.1rem 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #BAC2DE;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lx-cmd { color: #FFFFFF; font-weight: 600; }
.lx-prompt { color: #A6E3A1; user-select: none; }
.lx-cmt { color: #7F849C; font-style: italic; }
.lx-res { color: #BAC2DE; }

/* ==================== EXERCISE ==================== */

.lx-exercise {
  border: 3px solid #1A1A2E;
  background: #FFFBEA;
  padding: 1.25rem 1.4rem 0.6rem;
  margin: 2rem 0;
}
.lx-exercise-label { font-size: 0.72rem !important; font-weight: 900; letter-spacing: 0.08em; color: #7D6608; margin: 0 0 0.2rem !important; }
.lx-exercise h3 { margin-top: 0 !important; }
.lx-solution { margin: 0.5rem 0 0.9rem; }
.lx-solution summary { cursor: pointer; font-weight: 800; color: #1A5276; padding: 0.3rem 0; }
.lx-solution[open] summary { margin-bottom: 0.25rem; }

/* ==================== FINISH + PAGER ==================== */

.lx-finish { margin: 3rem 0 0; }
.lx-done {
  width: 100%;
  border: 3px solid #1A1A2E;
  background: #FFFFFF;
  font-weight: 800;
  padding: 0.9rem;
  cursor: pointer;
}
.lx-done:hover { background: #F0FFF4; }
.lx-done[aria-pressed="true"] { background: #1E8449; color: #FFFFFF; }
.lx-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 2px solid #1A1A2E;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
.lx-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 2px solid #1A1A2E;
  padding: 0.8rem 1rem;
  font-weight: 800;
  text-decoration: none;
  color: #1A1A2E;
  background: #FFFFFF;
}
.lx-pager-link span { font-size: 0.75rem; font-weight: 700; color: #6B7280; letter-spacing: 0.03em; }
.lx-pager-link:hover { background: #F5F5F0; }
.lx-pager-next { text-align: right; grid-column: 2; }

/* ==================== SIDEBAR ==================== */

.lx-side-item { display: flex !important; align-items: flex-start; gap: 0.5rem; }
.lx-side-num {
  flex: none;
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid currentColor;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 0.1rem;
}
.lx-side-item.is-done .lx-side-num { background: #1E8449; border-color: #1E8449; color: #FFFFFF; font-size: 0; }
.lx-side-item.is-done .lx-side-num::after { content: "✓"; font-size: 0.72rem; }

/* ==================== COURSE MAP ==================== */

.lx-map { margin-top: 1rem; }
.lx-map-part { margin-bottom: 2.75rem; }
.lx-map-kicker { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; color: #C0392B; margin: 0; }
.lx-map h2 { font-size: 1.6rem; font-weight: 900; margin: 0.15rem 0 0.35rem; scroll-margin-top: 90px; }
.lx-map-lead { color: #4B5563; margin: 0 0 1rem; }
.lx-map-list { list-style: none; padding: 0; margin: 0; border: 2px solid #1A1A2E; background: #FFFFFF; }
.lx-map-list li + li { border-top: 1px solid #D1D5DB; }
.lx-map-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  color: #1A1A2E;
  text-decoration: none;
}
.lx-map-list a:hover { background: #F5F5F0; }
.lx-map-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid #1A1A2E;
  font-weight: 900;
}
.lx-map-list a.is-done .lx-map-num { background: #1E8449; color: #FFFFFF; border-color: #1E8449; }
.lx-map-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx-map-text strong { font-weight: 800; }
.lx-map-text span { font-size: 0.9rem; color: #4B5563; line-height: 1.45; }
.lx-map-min { flex: none; font-size: 0.8rem; font-weight: 700; color: #6B7280; }

/* ==================== SMALL SCREENS ==================== */

@media (max-width: 640px) {
  .lx-main { padding-left: 1rem !important; padding-right: 1rem !important; }
  .lx-hero { padding: 2rem 1.1rem 1.4rem; }
  .lx-body { font-size: 1rem; }
  .lx-code, .lx-out pre, .lx-shell-body { font-size: 0.78rem; }
  .lx-pager { grid-template-columns: 1fr; }
  .lx-pager-next { grid-column: 1; }
  .lx-map-min { display: none; }
  .lx-example, .lx-shell { box-shadow: 3px 3px 0 #1A1A2E; }
}

/* A plain JSON response, as a browser shows it. */
.lx-json {
  margin: 0.5rem 0 1.25rem;
  padding: 0.8rem 1rem;
  border: 2px solid #1A1A2E;
  background: #FFFFFF;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Copy buttons live in the title bar (moved there by learn.js). */
.lx-bar .copy-btn {
  position: static;
  margin-left: auto;
  opacity: 1;
  flex: none;
}
.lx-bar .copy-btn + .lx-run, .lx-bar .copy-btn + .lx-nodeonly { margin-left: 0; }
.lx-example .lx-run, .lx-example .lx-nodeonly { margin-left: auto; }
.has-docked-copy .code-wrap > pre { padding-right: 1.1rem; }
@media (max-width: 480px) {
  .lx-bar { flex-wrap: wrap; row-gap: 0.4rem; }
  .lx-bar .copy-btn span { display: none; }
}

/* ==================== TIERS ==================== */

.lx-tier {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 2px solid #1A1A2E;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #1A1A2E;
}
.lx-tier::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: 0.02rem; background: currentColor; }
.lx-tier-foundation { background: #E8F6EE; color: #14683A; border-color: #14683A; }
.lx-tier-core { background: #E8F0FB; color: #1B4F9C; border-color: #1B4F9C; }
.lx-tier-advanced { background: #F3EBFA; color: #6B2FA0; border-color: #6B2FA0; }
.lx-tier-production { background: #1A1A2E; color: #FAFAF9; border-color: #1A1A2E; }
.lx-tier-sm { margin: 0 0.5rem 0 0; font-size: 0.6rem; padding: 0 0.35rem; }
.lx-map-kicker .lx-tier { letter-spacing: 0.04em; }
.lx-tiers { margin: 2rem 0 2.5rem; border: 2px solid #1A1A2E; background: #FFFFFF; padding: 1.25rem 1.5rem; }
.lx-tiers h2 { font-size: 1.35rem; font-weight: 900; margin: 0 0 0.5rem; scroll-margin-top: 90px; }
.lx-tiers p { margin: 0 0 0.9rem; color: #374151; }
.lx-tiers a { color: #1B4F9C; font-weight: 700; text-decoration: underline; }
.lx-tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.lx-tier-list li { display: flex; align-items: center; gap: 0.75rem; }
.lx-tier-list .lx-tier { margin-left: 0; flex: none; min-width: 7.5rem; text-align: left; }


/* ==================== EDIT BUTTON + HERO ACTIONS ==================== */

.lx-bar .lx-edit {
  margin-left: auto;
  flex: none;
  background: transparent;
  color: #CDD6F4;
  border: 1px solid #585B70;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.lx-bar .lx-edit:hover { background: #313244; color: #FFFFFF; }
.lx-bar .lx-edit:focus-visible { outline: 3px solid #F9E2AF; outline-offset: 2px; }
.lx-bar .lx-edit ~ .copy-btn,
.lx-bar .lx-edit ~ .lx-run,
.lx-bar .lx-edit ~ .lx-nodeonly { margin-left: 0; }

.lx-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.lx-open-ide, .lx-hero-test {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid #1A1A2E;
  cursor: pointer;
  text-decoration: none;
}
.lx-open-ide { background: #1E1E1E; color: #FFFFFF; }
.lx-open-ide::before { content: "</>"; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #4FC1FF; }
.lx-open-ide:hover { background: #333333; }
.lx-hero-test { background: #FFFFFF; color: #1A1A2E; }
.lx-hero-test:hover { background: #F5F5F0; }

/* ==================== TEST YOURSELF ==================== */

.lx-quiz { margin: 3rem 0 1rem; border: 4px solid #1A1A2E; background: #FFFFFF; padding: 1.5rem 1.5rem 1.25rem; }
.lx-quiz h2 { font-size: 1.6rem; font-weight: 900; margin: 0 0 0.5rem; scroll-margin-top: 90px; }
.lx-quiz-lead { color: #374151; margin: 0 0 1rem; }
.lx-quiz-btn {
  background: #1E8449;
  color: #FFFFFF;
  font-weight: 800;
  padding: 0.6rem 1.2rem;
  border: 3px solid #1A1A2E;
  box-shadow: 3px 3px 0 #1A1A2E;
  cursor: pointer;
}
.lx-quiz-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1A1A2E; }
.lx-quiz-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.lx-quiz-btn.is-small { padding: 0.3rem 0.8rem; font-size: 0.85rem; box-shadow: 2px 2px 0 #1A1A2E; }
.lx-quiz-link { background: none; border: 0; padding: 0.3rem 0.4rem; color: #1B4F9C; font-weight: 700; text-decoration: underline; cursor: pointer; }
.lx-quiz-link:disabled { color: #9CA3AF; cursor: default; }
.lx-quiz-status { font-weight: 700; margin: 0 0 0.8rem; }
.lx-quiz-status.is-passed, .lx-quiz-score.is-passed { color: #14683A; }
.lx-quiz-status.is-failed, .lx-quiz-score.is-failed { color: #B91C1C; }
.lx-quiz-score { font-weight: 800; font-size: 1.05rem; margin: 0 0 0.8rem; }
.lx-q-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.lx-q { min-width: 0; border: 2px solid #1A1A2E; padding: 1rem 1.1rem; background: #FAFAF9; }
.lx-quiz, .lx-quiz-body { min-width: 0; max-width: 100%; }
.lx-q.is-right { border-color: #14683A; background: #F0FAF3; }
.lx-q.is-wrong { border-color: #B91C1C; background: #FEF3F2; }
.lx-q-kind { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; margin: 0 0 0.4rem; }
.lx-q-text { font-weight: 600; margin-bottom: 0.7rem; }
.lx-q-text p { margin: 0 0 0.5rem; }
.lx-q-code { border: 2px solid #11111B; background: #1E1E2E; margin: 0 0 0.8rem; }
.lx-q-file { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #CDD6F4; background: #181825; padding: 0.3rem 0.7rem; border-bottom: 1px solid #313244; }
.lx-q-code pre { margin: 0; padding: 0.8rem 0.9rem; overflow-x: auto; color: #CDD6F4; font-size: 0.85rem; background: transparent; }
.lx-q-editor {
  display: block;
  width: 100%;
  border: 0;
  resize: vertical;
  background: #1E1E2E;
  color: #CDD6F4;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.8rem 0.9rem;
  tab-size: 2;
  white-space: pre;
}
.lx-q-editor:focus { outline: 3px solid #F9E2AF; outline-offset: -3px; }
.lx-q-options { display: grid; gap: 0.45rem; }
.lx-q-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border: 2px solid #D1D5DB;
  background: #FFFFFF;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}
.lx-q-option:hover { border-color: #1A1A2E; }
.lx-q-option input { margin-top: 0.3rem; flex: none; }
.lx-q-option:has(input:checked) { border-color: #1B4F9C; background: #E8F0FB; }
.lx-q-option.is-answer { border-color: #14683A; background: #E8F6EE; }
.lx-q-option.is-picked-wrong { border-color: #B91C1C; background: #FDECEA; }
.lx-q-out { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; color: #111827; }
.lx-q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: -0.3rem 0 0.6rem; }
.lx-q-run, .lx-q-feedback { margin-top: 0.6rem; }
.lx-q-run pre, .lx-q-feedback pre {
  margin: 0.3rem 0 0.6rem;
  background: #11111B;
  color: #CDD6F4;
  padding: 0.6rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lx-q-run-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #6B7280; }
.lx-q-verdict { font-weight: 900; margin: 0 0 0.3rem; }
.lx-q.is-right .lx-q-verdict { color: #14683A; }
.lx-q.is-wrong .lx-q-verdict { color: #B91C1C; }
.lx-q-explain { color: #1F2937; }
.lx-q-explain p { margin: 0 0 0.5rem; }
.lx-quiz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.2rem; }
.lx-quiz-foot .lx-quiz-score { flex-basis: 100%; }
.lx-quiz-note { color: #4B5563; font-size: 0.9rem; }
@media (max-width: 640px) {
  .lx-quiz { padding: 1.1rem 0.9rem; }
  .lx-q { padding: 0.85rem 0.75rem; }
}