:root {
  --paper: #f2f0e9;
  --ink: #111111;
  --ink-secondary: #4a4a46;
  --accent: #ff4d2e;
  --accent-2: #111111;
  --surface: #ffffff;
  --muted: #e5e2d8;
  --line: #111111;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; }
h1, h2, h3, .brand, .tab { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.01em; }
.layout { display: flex; align-items: flex-start; max-width: 1280px; margin: 0 auto; }

/* Sidebar */
aside.rail {
  width: 232px; flex: none; position: sticky; top: 0; align-self: stretch;
  border-right: 4px solid var(--ink); padding: 1.5rem 1.2rem; min-height: 100vh;
}
.brand { font-size: 1.7rem; font-weight: 700; margin: 0 0 0.2rem; line-height: 1; }
.brand span { color: var(--accent); }
.rail .tagline { color: var(--ink-secondary); font-size: 0.85rem; margin: 0 0 1.6rem; }
nav.tabs { display: flex; flex-direction: column; gap: 0.15rem; counter-reset: tabnum; }
.tab {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem;
  background: transparent; border: none; text-align: left; padding: 0.6rem 0.7rem;
  cursor: pointer; color: var(--ink-secondary); counter-increment: tabnum; border-radius: 3px;
}
.tab::before { content: '0' counter(tabnum) ' '; color: var(--ink-secondary); font-weight: 500; }
.tab.active { background: var(--ink); color: var(--paper); }
.tab.active::before { color: var(--accent); }
.tab:not(.active):hover { background: var(--muted); }
.rail-footer { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px dashed var(--line); font-size: 0.8rem; color: var(--ink-secondary); }

/* Content */
main { flex: 1; min-width: 0; padding: 1.7rem 2.4rem 4rem; }
.panel { display: none; }
.panel.active { display: block; }

.subtabs { display: flex; gap: 1.4rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.6rem; }
.subtabs button {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.03em; background: none; border: none; padding: 0.6rem 0; cursor: pointer;
  color: var(--ink-secondary); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.subtabs button.active { color: var(--ink); border-color: var(--accent); }
[data-subpanel] { display: none; }
[data-subpanel].active { display: block; }

.split { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 2.2rem; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* Markdown-rendered content — .md-content wraps the output of render_markdown_file().
   Prose elements (p/ul/ol/dl/callouts) get a readable measure; block widgets
   (the mini-graph grid, the trace table) are left free to use the full width. */
.md-content h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 0.6rem; line-height: 1.02; }
.md-content > p, .md-content > ul, .md-content > ol, .md-content > dl { max-width: 68ch; }
.md-content > p:first-of-type { font-size: 1.15rem; }
.md-content h3 { font-size: 1.15rem; margin: 1.8rem 0 0.5rem; }
.md-content h3:first-child { margin-top: 0; }
.md-content ol, .md-content ul { padding-left: 1.2rem; }
.md-content ol li, .md-content ul li { padding: 0.25rem 0; }

.md-content dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.7rem 1.4rem; align-content: start; }
.md-content dt { font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.md-content dd { margin: 0; color: var(--ink-secondary); }
code { background: var(--muted); padding: 0.1rem 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.88em; }

/* Custom widgets embedded as raw HTML inside markdown content */
.callout {
  border: 2px solid var(--ink); background: var(--surface); padding: 0.9rem 1.1rem; margin: 1.4rem 0;
  font-size: 0.95rem; position: relative; max-width: 68ch;
}
.callout::before { content: attr(data-label); position: absolute; top: -0.7em; left: 0.8rem; background: var(--ink); color: var(--paper); font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; letter-spacing: 0.05em; }
.callout.warn::before { background: var(--accent); }

table.trace-table { border-collapse: collapse; border: 2px solid var(--ink); font-variant-numeric: tabular-nums; margin: 0.9rem 0 1.2rem; }
table.trace-table th, table.trace-table td { border: 1px solid var(--muted); padding: 0.4rem 0.9rem; text-align: center; }
table.trace-table th { background: var(--ink); color: var(--paper); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; font-weight: 700; }
table.trace-table th:first-child, table.trace-table td:first-child,
table.trace-table th:nth-child(2), table.trace-table td:nth-child(2) { text-align: left; }
table.trace-table td.settled { font-weight: 700; background: rgba(255,77,46,0.14); }

.mini-graphs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mini-graph-card { border: 2px solid var(--ink); padding: 1rem; background: var(--surface); }
.mini-graph-card h3 { margin: 0.4rem 0 0.2rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.02em; }
.mini-graph-card p { margin: 0; font-size: 0.9rem; color: var(--ink-secondary); }

button[data-gd-step], button[data-gd-reset],
button[data-check], button[data-reveal], button[data-clear] {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.85rem;
  letter-spacing: 0.03em; background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  padding: 0.55rem 1.2rem; cursor: pointer;
}
button[data-gd-step]:hover, button[data-gd-reset]:hover,
button[data-check]:hover, button[data-reveal]:hover, button[data-clear]:hover { background: var(--accent); border-color: var(--accent); }
button:disabled { opacity: 0.35; cursor: default; }

/* Dijkstra practice widget: graph picker + pill lanes + hand-fillable trace table */
select[data-graph-picker] {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
  padding: 0.5rem 0.8rem; margin: 0.8rem 0 1.6rem; cursor: pointer;
}

.pill-lane { margin-bottom: 1.1rem; }
.pill-lane h4 {
  margin: 0 0 0.4rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-secondary);
}
.pill-row {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.5rem;
  min-height: 2.6rem; padding: 0.5rem; border: 2px dashed var(--line); margin-bottom: 0.5rem;
}
.pill {
  display: inline-flex; align-items: center; background: var(--ink); color: var(--paper);
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.85rem;
  padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; user-select: none;
}
.pill:hover { background: var(--accent); }
.pill.struck { text-decoration: line-through; opacity: 0.55; background: var(--ink-secondary); }
.pill.struck:hover { background: var(--ink-secondary); }
.pill.mark-active { background: #0a7a34; }
.pill.mark-active:hover { background: #0a7a34; }
.pill.mark-done { background: var(--accent); }
.pill.mark-done:hover { background: var(--accent); }
.pill-add { display: flex; gap: 0.5rem; }
.pill-add input {
  width: 4rem; border: 1px solid var(--ink-secondary); background: var(--paper); color: var(--ink);
  font-family: 'JetBrains Mono', monospace; text-align: center; padding: 0.35rem; text-transform: uppercase;
}
.pill-add button {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.78rem;
  background: var(--surface); border: 2px solid var(--ink); padding: 0.35rem 0.7rem; cursor: pointer;
}
.pill-add button:hover { background: var(--muted); }

.fill-table { border: 2px solid var(--ink); border-collapse: collapse; width: 100%; max-width: 480px; font-variant-numeric: tabular-nums; }
.fill-table th, .fill-table td { border-bottom: 1px solid var(--muted); padding: 0.4rem 0.5rem; text-align: center; vertical-align: top; }
.fill-table th { border-bottom: 2px solid var(--ink); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; }

.pill-stack { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; margin-bottom: 0.3rem; min-height: 1.6rem; }
.pill-stack .pill { font-size: 0.78rem; padding: 0.2rem 0.5rem; }

.fill-table td.pill-cell { cursor: pointer; }
.fill-table td.pill-cell:hover { background: var(--muted); }
.fill-table td.pill-cell.selected { background: var(--muted); box-shadow: inset 0 0 0 2px var(--accent); }
.fill-table td.pill-cell.correct { background: rgba(10, 122, 52, 0.12); }
.fill-table td.pill-cell.incorrect { background: rgba(255, 77, 46, 0.12); }

/* Single shared control for adding a pill to whichever cell is selected */
.pill-entry {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem;
  padding: 0.6rem 0.8rem; border: 2px dashed var(--line);
}
.pill-entry-label { font-size: 0.85rem; color: var(--ink-secondary); flex: 1 1 auto; min-width: 12ch; }
.pill-entry input {
  width: 5rem; border: 1px solid var(--ink-secondary); background: var(--paper); color: var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; padding: 0.35rem 0.4rem; text-align: center;
}
.pill-entry input:disabled { opacity: 0.4; }
.pill-entry button {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.03em; background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  padding: 0.4rem 0.9rem; cursor: pointer;
}
.pill-entry button:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.pill-entry button:disabled { opacity: 0.35; cursor: default; }

/* Marking up the diagram itself: click a node/edge to cycle green (active)
   then red (done), same as marking up the table's Node pill. */
[data-dijkstra-practice] .gd-node, [data-dijkstra-practice] .gd-edge { cursor: pointer; }
[data-dijkstra-practice] .gd-node.mark-active circle { fill: #0a7a34; stroke: #0a7a34; }
[data-dijkstra-practice] .gd-node.mark-active text { fill: #fff; }
[data-dijkstra-practice] .gd-node.mark-done circle { fill: var(--accent); stroke: var(--accent); }
[data-dijkstra-practice] .gd-node.mark-done text { fill: #fff; }
[data-dijkstra-practice] .gd-edge.mark-active { stroke: #0a7a34; stroke-width: 4; }
[data-dijkstra-practice] .gd-edge.mark-done { stroke: var(--accent); stroke-width: 4; }
.gd-table { border: 2px solid var(--ink); max-width: 420px; }
.gd-table th { border-bottom: 2px solid var(--ink); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em; }
.gd-table td { border-bottom: 1px solid var(--muted); }

pre.code {
  background: var(--ink); color: var(--paper); padding: 1.1rem 1.3rem; overflow-x: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 0.86rem; border: 2px solid var(--ink); max-width: 60ch;
}
.note { color: var(--ink-secondary); font-size: 0.92rem; }

details.practice {
  border: 2px solid var(--ink); background: var(--surface); padding: 1rem 1.2rem; max-width: 56ch;
}
details.practice summary { font-family: 'Space Grotesk', sans-serif; font-weight: 700; cursor: pointer; }
details.practice .answer { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); color: var(--ink-secondary); }