/* ===== Design tokens ===== */
:root {
  --bg: #f7f8fb;
  --bg-elevated: #ffffff;
  --bg-muted: #eef0f6;
  --text: #1a1d29;
  --text-muted: #565b6e;
  --border: #e1e4ee;
  --accent: #4338ca;
  --accent-2: #0d9488;
  --accent-soft: #eef0fd;
  --code-bg: #1a1d29;
  --code-text: #e7e9f5;
  --code-accent: #5eead4;
  --warn-bg: #fff7ed;
  --warn-border: #fb923c;
  --shadow: 0 1px 2px rgba(20, 23, 40, 0.04), 0 8px 24px rgba(20, 23, 40, 0.06);
  --radius: 14px;
  --max-width: 1080px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo,
    Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11121a;
    --bg-elevated: #181a26;
    --bg-muted: #1f2230;
    --text: #e9eaf3;
    --text-muted: #a3a8bd;
    --border: #2a2d3d;
    --accent: #8b87f7;
    --accent-2: #2dd4bf;
    --accent-soft: #232544;
    --code-bg: #0c0d14;
    --code-text: #e7e9f5;
    --code-accent: #5eead4;
    --warn-bg: #2a2113;
    --warn-border: #d97706;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* ===== Reset ===== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.main-nav {
  display: flex;
  gap: 1.5rem;
}

.main-nav a {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: none;
}

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  background: var(--bg-muted);
}

.lang-toggle a {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.lang-toggle a:hover {
  text-decoration: none;
}

.lang-toggle a.active {
  background: var(--accent);
  color: #fff;
}

.nav-toggle-btn {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
}

/* ===== Hero ===== */
.hero {
  padding: 4.5rem 0 3.5rem;
  background:
    radial-gradient(800px 400px at 15% -10%, var(--accent-soft), transparent),
    radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent);
}

.hero .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 1rem;
  max-width: 38ch;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  /* Wider than a strict reading measure so the hero's right edge sits closer to
     the content below it. Remove the cap entirely to align them exactly, at the
     cost of a ~120-character line. */
  max-width: 72ch;
  margin: 0 0 2rem;
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, black);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== Sections ===== */
main {
  padding-bottom: 4rem;
}

section {
  padding: 3rem 0;
}

section + section {
  border-top: 1px solid var(--border);
}

/* The hero is not a content section, so the rule above must not underline it.
   Without this, index and tools draw a divider under the hero while learning and
   projects (where a <div> follows the hero) do not — and on tools, where the next
   section has padding-top: 0, the line lands hard against the first card. */
.hero + section {
  border-top: none;
}

/* No max-width: the heading and its intro share the right margin of the content
   they introduce, rather than stopping short of it. */
.section-head {
  margin: 0 0 2.25rem;
}

.section-head .eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.6rem;
}

.section-head p {
  color: var(--text-muted);
  margin: 0;
}

/* ===== Nav cards (home) ===== */
.nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}

.nav-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.nav-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  text-decoration: none;
}

.nav-card .card-icon {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.nav-card h3 {
  margin: 0 0 0.4rem;
  color: var(--text);
  font-size: 1.15rem;
}

.nav-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.nav-card .card-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent);
}

/* ===== Spectrum strip (home) ===== */
.spectrum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.spectrum-step {
  flex: 1 1 150px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  position: relative;
}

.spectrum-step .num {
  display: block;
  font-weight: 800;
  color: var(--accent-2);
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

.spectrum-arrow {
  align-self: center;
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* ===== Tool category cards ===== */
.category {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
}

.category-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.category-badge {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}

.category-head h3 {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
}

.category-head .tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.category p {
  color: var(--text);
}

.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tool-chip {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.prompt-block,
.code-block {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  margin: 1.1rem 0;
  border-left: 4px solid var(--code-accent);
  overflow-x: auto;
  white-space: pre-wrap;
}

.prompt-block .prompt-label,
.code-block .prompt-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--code-accent);
  margin-bottom: 0.5rem;
}

/* ===== File tree ===== */
.file-tree {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 10px;
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.75;
  margin: 1.1rem 0;
  overflow-x: auto;
  white-space: pre;
}

.file-tree .dir {
  color: var(--code-accent);
  font-weight: 700;
}

.file-tree .note {
  color: #8b91ad;
}

/* ===== Challenge cards ===== */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.challenge {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.challenge h3 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
}

.challenge > p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.challenge .fix {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  font-size: 0.92rem;
}

.challenge .fix .label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  margin-bottom: 0.3rem;
}

/* ===== Doc layout with sticky table of contents ===== */
/* Uses the standard .wrap width so the TOC column lines up with the header,
   the hero and the pages that have no TOC. The column is sized to the longest
   TOC label (~166px bold) plus its padding and border. */
.doc-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.toc {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  font-size: 0.85rem;
}

.toc-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.toc nav {
  display: flex;
  flex-direction: column;
}

.toc a {
  color: var(--text-muted);
  padding: 0.34rem 0 0.34rem 0.85rem;
  border-left: 2px solid var(--border);
  line-height: 1.4;
}

.toc a:hover {
  color: var(--accent);
  text-decoration: none;
  border-left-color: var(--text-muted);
}

.toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 700;
}

.doc-content > section:first-child {
  padding-top: 0;
}

.doc-content section {
  scroll-margin-top: 84px;
}

@media (max-width: 1000px) {
  .doc-layout {
    /* minmax(0, …) so the track may shrink below its content's min-content
       width; a bare 1fr lets the TOC grid force the page wider than the screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .toc {
    position: static;
    max-height: none;
    overflow: visible;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.35rem;
  }

  .toc nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 0.1rem 1.25rem;
  }
}

/* ===== Checklist ===== */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 0.94rem;
}

.checklist li::before {
  content: "☐";
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1.25;
  flex-shrink: 0;
}

.callout {
  display: flex;
  gap: 0.7rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  margin-top: 1rem;
}

.callout .callout-icon {
  flex-shrink: 0;
}

.callout strong {
  display: block;
  margin-bottom: 0.15rem;
}

/* ===== Pedagogy split layout ===== */
.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.level-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.level-card h3 {
  margin: 0 0 0.4rem;
}

.level-card .level-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.level-card.entry .level-tag {
  background: color-mix(in srgb, var(--accent-2) 16%, transparent);
  color: var(--accent-2);
}

.level-card.advanced .level-tag {
  background: var(--accent-soft);
  color: var(--accent);
}

.level-card ul {
  padding-left: 1.1rem;
  margin: 1rem 0;
}

.level-card li {
  margin-bottom: 0.55rem;
}

.compare-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}

.compare-block .bad,
.compare-block .good {
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
}

.compare-block .bad {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
}

.compare-block .good {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border: 1px solid var(--accent-2);
}

.compare-block .label {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

/* ===== Tables ===== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--bg-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .main-nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 1rem;
    display: none;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-toggle-btn {
    display: inline-flex;
  }

  .level-grid {
    grid-template-columns: 1fr;
  }

  .compare-block {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 3rem 0 2.5rem;
  }

  .brand {
    min-width: 0;
  }

  .nav-controls {
    flex-shrink: 0;
  }

  .category {
    padding: 1.5rem;
  }
}

/* Below ~620px the wordmark cannot fit beside the language toggle and the
   hamburger (it is `white-space: nowrap`, so it will not shrink and instead
   pushes them off-screen). Collapse the brand to its logo mark. */
@media (max-width: 620px) {
  .brand {
    max-width: 28px;
    overflow: hidden;
    gap: 0;
  }
}