:root {
  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f5f8f7;
  --sidebar-bg: #f3f6f5;

  /* Text */
  --fg: #29333d;
  --fg-strong: #10202b;
  --muted: #5d6b75;

  /* Lines */
  --border: #e3e9e8;

  /* Accent: teal primary, green secondary */
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --accent-soft: #d3f3ee;
  --accent-tint: #ecfaf7;
  --green: #16a34a;
  --green-strong: #15803d;
  --green-soft: #e3f7e8;

  /* Code */
  --code-bg: #f4f7f6;
  --code-border: #e3e9e8;

  /* Callouts */
  --note-bg: #fff8e6;
  --note-border: #f0c674;
  --note-label: #9a6f00;
  --warn-bg: #fdeceb;
  --warn-border: #e09a96;
  --warn-label: #b3261e;

  --measure: 50rem;
  --radius: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

/* Burger + backdrop are mobile-only; hidden on desktop. */
.nav-burger,
.nav-backdrop { display: none; }

aside.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 1.75rem 1.1rem 2.5rem;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

aside.sidebar h1 {
  font-size: 1.05rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.3;
}

aside.sidebar h1 a {
  color: var(--fg-strong);
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

aside.sidebar h1 a::before {
  content: "";
  width: 0.55rem;
  height: 1.05rem;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}

aside.sidebar h1 a:hover { color: var(--accent-strong); }

.nav-section { margin: 0.15rem 0; }

.nav-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  padding: 0.4rem 0.4rem;
  margin-top: 0.35rem;
  border-radius: 6px;
  user-select: none;
}

.nav-section > summary::-webkit-details-marker { display: none; }

.nav-section > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.nav-section[open] > summary::before { transform: rotate(90deg); }

.nav-section > summary:hover {
  color: var(--accent-strong);
  background: var(--accent-tint);
}

aside.sidebar .nav-section > ul {
  margin: 0.15rem 0 0.7rem 1.05rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

aside.sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

aside.sidebar li { margin: 0.1rem 0; }

aside.sidebar a {
  color: var(--fg);
  text-decoration: none;
  display: block;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

aside.sidebar a:hover {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

aside.sidebar a.current {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

aside.sidebar ul ul {
  margin: 0.15rem 0 0.4rem 0.7rem;
  border-left: 1px solid var(--border);
  padding-left: 0.5rem;
}

aside.sidebar ul ul a {
  font-size: 0.84rem;
  color: var(--muted);
}

aside.sidebar ul ul a:hover { color: var(--accent-strong); }
aside.sidebar ul ul a.current { color: #fff; }

/* ---------- Main column ---------- */

main {
  padding: 2.75rem 4rem 4rem;
  max-width: calc(var(--measure) + 8rem);
  margin: 0 auto;
  width: 100%;
}

article { max-width: var(--measure); }

main h1, main h2, main h3 {
  color: var(--fg-strong);
  line-height: 1.25;
  text-wrap: balance;
  scroll-margin-top: 1rem;
}

main h1 {
  font-size: 2.1rem;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

main h2 {
  font-size: 1.45rem;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--accent-soft);
}

main h3 {
  font-size: 1.18rem;
  margin: 1.85rem 0 0.6rem;
}

main p, main li { line-height: 1.72; }
main p { margin: 0 0 1.05rem; }
main li { margin: 0.25rem 0; }
main ul, main ol { padding-left: 1.4rem; }

main a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.12s ease;
}
main a:hover { border-bottom-color: var(--accent-strong); }

strong { color: var(--fg-strong); font-weight: 650; }

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

/* ---------- Code ---------- */

code {
  font-family: "SFMono-Regular", "Consolas", "Menlo",
               "Liberation Mono", monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.08em 0.35em;
  /* Long inline tokens (file paths like exercises/07/01-hello.lua) should
     wrap on narrow screens rather than push the page wider than the
     viewport. Harmless in <pre>, where white-space: pre keeps lines intact. */
  overflow-wrap: anywhere;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  line-height: 1.5;
  margin: 1.1rem 0;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.86rem;
}

.code-block {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  z-index: 1;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: background 0.12s ease, color 0.12s ease,
              border-color 0.12s ease, opacity 0.12s ease;
}

.code-block:hover .copy-btn { opacity: 1; }

.copy-btn:hover {
  background: var(--accent-tint);
  color: var(--accent-strong);
  border-color: var(--accent-soft);
}

.copy-btn.copied {
  color: var(--green);
  border-color: var(--green-soft);
  background: var(--green-soft);
  opacity: 1;
}

/* ---------- Blockquote ---------- */

blockquote {
  border-left: 4px solid var(--accent);
  background: var(--accent-tint);
  margin: 1.2rem 0;
  padding: 0.6rem 1.1rem;
  color: var(--fg);
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }

/* ---------- Callouts ---------- */

.note, .warn, .try-this, .homework {
  padding: 0.75rem 1.1rem;
  margin: 1.3rem 0;
  border-radius: var(--radius);
  border: 1px solid;
  border-left-width: 4px;
}

.note > :last-child,
.warn > :last-child,
.try-this > :last-child,
.homework > :last-child { margin-bottom: 0; }

.note::before, .warn::before, .try-this::before {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.note {
  background: var(--note-bg);
  border-color: var(--note-border);
}
.note::before { content: "Note"; color: var(--note-label); }

.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.warn::before { content: "Watch out"; color: var(--warn-label); }

.try-this {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  border-left-color: var(--accent);
}
.try-this::before { content: "Try this"; color: var(--accent-strong); }

.homework {
  background: var(--green-soft);
  border-color: #bfe6c9;
  border-left-color: var(--green);
}

.homework h3:first-child { margin-top: 0.2rem; }
.homework h3 { color: var(--green-strong); }

/* ---------- Pager ---------- */

nav.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

nav.pager a {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  background: var(--bg);
  max-width: 48%;
  transition: border-color 0.12s ease, background 0.12s ease;
}
nav.pager a:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}
nav.pager .next { text-align: right; margin-left: auto; }
nav.pager .prev::before { content: "\2190\00a0\00a0"; }
nav.pager .next::after  { content: "\00a0\00a0\2192"; }
nav.pager span.disabled { color: var(--muted); }

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.2rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.94rem;
}

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

th {
  background: var(--bg-subtle);
  color: var(--fg-strong);
  font-weight: 650;
}

tbody tr:nth-child(even) { background: #fafcfb; }

/* ---------- Responsive ---------- */

@media (max-width: 940px) {
  /* minmax(0, 1fr) instead of 1fr: a bare 1fr track is minmax(auto, 1fr),
     whose auto minimum is the column's min-content. A wide descendant (a
     code line, a long file path) then stretches the single column past the
     viewport, so the page renders slightly wider than the screen and the
     browser zooms out to fit. minmax(0, …) lets the track shrink to 0 so it
     tracks the viewport; wide children scroll/wrap within it instead. */
  .layout {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  main { min-width: 0; }

  /* Burger button: fixed top-left, opens the off-canvas sidebar. */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 30;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.6rem;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  .nav-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--fg-strong);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Off-canvas sidebar: slides in from the left over the content. */
  aside.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    border-right: 1px solid var(--border);
    border-bottom: none;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
  }
  /* Leave room for the chapter title so the burger doesn't cover it. */
  main { padding: 4rem 1.25rem 3rem; }

  /* On a narrow viewport links shouldn't push the panel wider than the
     screen; let the chapter links and part headings wrap instead. */
  aside.sidebar a,
  .nav-section > summary { white-space: normal; }

  /* Backdrop dims the page while the menu is open; tapping it closes. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  /* Open state (checkbox checked). */
  #nav-toggle:checked ~ .layout aside.sidebar { transform: translateX(0); }
  #nav-toggle:checked ~ .layout .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  #nav-toggle:checked ~ .layout .nav-burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  #nav-toggle:checked ~ .layout .nav-burger span:nth-child(2) { opacity: 0; }
  #nav-toggle:checked ~ .layout .nav-burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ---------- Flowcharts (generated inline SVG) ---------- */

.flowchart {
  margin: 1.4rem 0;
  overflow-x: auto;
  text-align: center;
}

.fc {
  max-width: 100%;
  height: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fc-term     { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; }
.fc-action   { fill: var(--bg-subtle); stroke: var(--muted); stroke-width: 1.5; }
.fc-decision { fill: var(--green-soft); stroke: var(--green-strong); stroke-width: 1.5; }
.fc-text     { fill: var(--fg-strong); font-size: 13px; }
.fc-edge     { stroke: #8a97a0; stroke-width: 1.6; }
.fc-arrowhead{ fill: #8a97a0; }
.fc-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Pandoc syntax highlight ---------- */

pre.sourceCode { background: var(--code-bg); }
code.sourceCode span.kw { color: #b3261e; font-weight: 600; }   /* keyword */
code.sourceCode span.cf { color: #b3261e; font-weight: 600; }   /* control flow */
code.sourceCode span.dt { color: #7c3aed; }                     /* type */
code.sourceCode span.dv { color: #0a59c2; }                     /* decimal */
code.sourceCode span.fl { color: #0a59c2; }                     /* float */
code.sourceCode span.bn { color: #0a59c2; }                     /* base-n */
code.sourceCode span.st { color: #0a7d4d; }                     /* string */
code.sourceCode span.ch { color: #0a7d4d; }                     /* char */
code.sourceCode span.co { color: #6b7780; font-style: italic; } /* comment */
code.sourceCode span.op { color: #475569; }                     /* operator */
code.sourceCode span.fu { color: #0f766e; }                     /* function */
code.sourceCode span.cn { color: #b3261e; }                     /* constant: nil/true/false */
code.sourceCode span.va { color: var(--fg); }                   /* variable */
code.sourceCode span.bu { color: #0f766e; }                     /* built-in (e.g. __index) */
code.sourceCode span.sc { color: #b45309; }                     /* escape: \n \t \" */
code.sourceCode span.vs { color: #0a7d4d; }                     /* long/verbatim string */
code.sourceCode span.er { color: #b3261e; }                     /* lexer error (shown on purpose) */