:root {
  color-scheme: dark;
  --bg: #0b0f1a;
  --panel: #141b2d;
  --panel-soft: #1a2340;
  --fg: #e8ecf4;
  --dim: #9aa7c0;
  --accent: #6ab0ff;
  --border: #1f2740;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  font-size: 16px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
kbd {
  background: #222b45;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9em;
  color: #ffe58a;
}
code { font-family: ui-monospace, SFMono-Regular, monospace; }
.layout {
  display: grid;
  grid-template-columns: 18rem 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem;
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-height: 100vh;
}
.sidebar .home { display: block; color: var(--dim); font-size: 0.85rem; margin-bottom: 0.75rem; }
.sidebar h1 { font-size: 1.15rem; margin: 0 0 1rem; letter-spacing: -0.01em; }
.sidebar h1 a { color: var(--fg); }
.toc ul { list-style: none; padding-left: 1rem; margin: 0.25rem 0; }
.toc > ul { padding-left: 0; }
.toc li { margin: 0.15rem 0; }
.toc a {
  display: block;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  color: var(--fg);
  font-size: 0.92rem;
}
.toc a:hover { background: var(--panel-soft); text-decoration: none; }
.toc a.current { background: var(--panel-soft); color: var(--accent); }

/* vs-dnz: collapsible sidebar sections (<details> per parent).
 * Marker is a CSS `::before` chevron inline with the label — no separate
 * toggle button, no native ::marker on its own line. Clicking anywhere
 * on the summary toggles the section (native <details> behavior);
 * clicking the link inside navigates via the partial-swap JS. */
.toc details { margin: 0; }
.toc details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.toc details > summary::-webkit-details-marker { display: none; }
.toc details > summary::marker { content: ""; }
.toc details > summary::before {
  content: "\25B8"; /* ▸ */
  flex: 0 0 auto;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  color: var(--dim);
  transition: transform 150ms ease, color 120ms ease;
}
.toc details[open] > summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}
.toc details > summary > a { flex: 1 1 auto; min-width: 0; }
.toc details > ul {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 150ms ease, opacity 150ms ease;
}
.toc details[open] > ul {
  max-height: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .toc details > ul { transition: none; }
  .toc details > summary::before { transition: none; }
}
.toc-controls {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.toc-controls .toc-ctrl {
  flex: 1;
  background: var(--panel-soft);
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  transition: color 120ms ease, border-color 120ms ease;
}
.toc-controls .toc-ctrl:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Content swap: a subtle opacity pulse signals the partial nav exchange
   without a full flicker. Driven by the `.is-loading` class set by
   guidebook-nav.js around the fetch. */
.content { transition: opacity 120ms ease; }
.content.is-loading { opacity: 0.4; }
.content { padding: 2rem clamp(1rem, 3vw, 2.5rem); max-width: 64rem; }
.page-header h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin: 0.25rem 0 1.5rem;
  letter-spacing: -0.02em;
}
.crumbs { color: var(--dim); font-size: 0.9rem; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--accent); }
.doc h2 { font-size: 1.4rem; margin: 1.75rem 0 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.doc h3 { font-size: 1.15rem; margin: 1.25rem 0 0.4rem; color: var(--accent); }
.doc p { margin: 0.5rem 0; }
.doc ul { padding-left: 1.5rem; }
.doc li { margin: 0.2rem 0; }
.doc .box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.doc .colorbox {
  background: var(--panel);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
}
.doc .table-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
}
.embed {
  display: inline-block;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--dim);
}
.embed-caption { color: var(--fg); margin-left: 0.25rem; }
.embed.has-sprite {
  background: var(--panel);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}
.embed-sprite-img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
  display: inline-block;
}
.tag-unknown {
  color: #d07a7a;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85em;
}
.data { color: var(--dim); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; }
pre.raw { white-space: pre-wrap; background: var(--panel); padding: 1rem; border-radius: 4px; color: var(--dim); font-size: 0.85em; }
.page-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--dim); font-size: 0.85rem; }
.note { color: var(--dim); font-size: 0.9rem; border-left: 3px solid var(--border); padding-left: 0.75rem; }
.top-level { list-style: none; padding: 0; }
.top-level li { margin: 0.5rem 0; }
.top-level a { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
}

/* vs-3o7: expanded embed tables (reagents / recipes / tech / lawsets) */
.embed-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.92rem;
}
.embed-table thead th {
  background: var(--panel-soft);
  color: var(--dim);
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.embed-table tbody td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.embed-table tbody tr:first-child td { border-top: none; }
.embed-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.reagent-table .reagent-name {
  white-space: nowrap;
  font-weight: 600;
  color: var(--fg);
}
.reagent-table .reagent-desc { color: var(--dim); }
.reagent-swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 2px;
  border: 1px solid var(--border);
  margin-right: 0.4em;
  vertical-align: middle;
}
.recipe-table .recipe-result,
.recipe-table .recipe-name {
  white-space: nowrap;
}
.recipe-table .recipe-time {
  color: var(--dim);
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85em;
}
.entity-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.entity-cell-img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.entity-cell-label { font-size: 0.9em; }
.ingredient-count {
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85em;
}
.reagent-cell { color: var(--fg); }
.tech-table .tech-tier {
  width: 3rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--accent);
  font-weight: 600;
}
.tech-table .tech-cost {
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, monospace;
  text-align: right;
  width: 6rem;
}
.embed-group {
  margin: 1rem 0 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.embed-group > .embed-table {
  margin: 0;
  border: none;
  border-radius: 0;
}
.embed-group-title {
  padding: 0.5rem 0.85rem;
  font-weight: 600;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--border);
}
.lawset-list { display: flex; flex-direction: column; gap: 0.5rem; }
.lawset-group .lawset-laws {
  margin: 0;
  padding: 0.75rem 1rem 0.75rem 2.25rem;
  color: var(--fg);
}
.lawset-group .lawset-laws li { margin: 0.25rem 0; }

/* vs-05o: richer reagent tables (effects + thresholds + group pills) */
.reagent-group { /* small group pill inside reagent-group-cell */
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--dim);
  white-space: nowrap;
}
.reagent-group-medicine { color: #6ab0ff; border-color: #2a4466; }
.reagent-group-toxin { color: #e08b6a; border-color: #663a2a; }
.reagent-group-narcotic { color: #c98bf0; border-color: #4d2a66; }
.reagent-group-biological { color: #8be38b; border-color: #2a663a; }
.reagent-group-drink { color: #ffd27a; border-color: #66552a; }
.reagent-group-food { color: #f0c97a; border-color: #665a2a; }
.reagent-group-botanical { color: #8be38b; border-color: #2a663a; }
.reagent-group-pyrotechnic { color: #ff7a7a; border-color: #662a2a; }
.reagent-group-admin { color: #d07a7a; border-color: #663a3a; }
.reagent-effects .effect-list {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--fg);
  font-size: 0.86rem;
  line-height: 1.35;
}
.reagent-effects .effect-list li { margin: 0.1rem 0; }
.reagent-effects .effects-none { color: var(--dim); font-style: italic; }
.reagent-thresholds {
  white-space: nowrap;
  font-size: 0.85rem;
}
.threshold-safe { color: #8be38b; }
.threshold-od { color: #ffd27a; }
.threshold-toxic { color: #ff7a7a; font-weight: 600; }
.plant-effects {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}
.plant-effects .plant-tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.35rem;
  margin-right: 0.3rem;
  background: rgba(139, 227, 139, 0.12);
  color: #8be38b;
  border: 1px solid #2a663a;
  border-radius: 4px;
  vertical-align: baseline;
}

/* Rich single-reagent detail card (GuideReagentEmbed) */
.reagent-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin: 0.75rem 0 1.25rem;
}
.reagent-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.reagent-card-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.reagent-card-name {
  margin: 0;
  font-size: 1.15rem;
  color: var(--fg);
}
.reagent-swatch-big {
  width: 1.35em;
  height: 1.35em;
  border-radius: 4px;
  margin-right: 0;
}
.reagent-meta p { margin: 0.3rem 0; }
.reagent-subtle { color: var(--dim); font-size: 0.88rem; }
.reagent-section { margin-top: 0.85rem; }
.reagent-section h4 {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.reagent-section .effect-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--fg);
  font-size: 0.93rem;
  line-height: 1.4;
}
.reagent-section.plant-effects {
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  margin-top: 0.85rem;
}
.reagent-dose { margin: 0.2rem 0 0.4rem; color: var(--fg); }
.threshold-ladder {
  margin: 0.3rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  color: var(--fg);
}
.threshold-ladder li { margin: 0.2rem 0; }
.reagent-related {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--dim);
}
.reagent-related .related-label { margin-right: 0.35rem; }

/* Recipe table appliance column */
.recipe-table .recipe-appliance {
  color: var(--dim);
  font-size: 0.85em;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* vs-05o.2: reaction embeds — single card + group table */
.reaction-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin: 0.75rem 0 1.25rem;
}
.reaction-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.reaction-card-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.reaction-card-name {
  margin: 0;
  font-size: 1.1rem;
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.reaction-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.78rem;
}
.reaction-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.05em 0.55em;
  color: var(--dim);
  white-space: nowrap;
}
.reaction-badge-temp { color: #8cd8ff; }
.reaction-badge-mixer { color: #ffd280; }
.reaction-badge-source { color: #c5c5c5; }
.reaction-badge-quantized { color: #b0b0b0; }
.reaction-badge-impact-high { color: #ff9090; border-color: #a55; }
.reaction-badge-impact-medium { color: #ffd280; border-color: #a85; }
.reaction-badge-impact-low { color: #8cd8ff; border-color: #588; }
.reaction-reagent-list {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.93rem;
  line-height: 1.4;
}
.reaction-reagent-list li { margin: 0.15rem 0; }
.reaction-reagent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.reaction-reagent-chip .reagent-swatch {
  width: 0.9em;
  height: 0.9em;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--border);
}
.reaction-reagent-name { color: var(--fg); }
.reaction-catalysts h4 small {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
  margin-left: 0.35rem;
  font-weight: normal;
}

/* "Produced by" section inside the reagent detail card */
.reagent-produced-by .produced-by-list {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.reagent-produced-by .produced-by-list li { margin: 0.25rem 0; }
.reagent-produced-by .badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.05em 0.5em;
  font-size: 0.72rem;
  color: var(--dim);
  margin-left: 0.2em;
  white-space: nowrap;
}

/* Grouped reaction table */
.reaction-group-wrap { overflow-x: auto; }
.reaction-group-table td {
  vertical-align: top;
  font-size: 0.9rem;
}
.reaction-group-table .reaction-id {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
  white-space: nowrap;
  color: var(--fg);
}
.reaction-group-table .reaction-gates {
  font-size: 0.78rem;
  white-space: normal;
}
.reaction-group-table .reaction-none {
  color: var(--dim);
  font-style: italic;
}

/* Responsive: collapse reagent-group-table extra columns on narrow widths */
@media (max-width: 720px) {
  .reagent-group-table thead th:nth-child(3),
  .reagent-group-table thead th:nth-child(4),
  .reagent-group-table tbody td:nth-child(3),
  .reagent-group-table tbody td:nth-child(4) {
    display: none;
  }
  .reagent-group-table .reagent-thresholds {
    font-size: 0.78rem;
  }
  .recipe-table thead th:nth-child(3),
  .recipe-table tbody td:nth-child(3) {
    display: none;
  }
  /* vs-05o.2: drop the Catalysts column on narrow widths; catalysts
     stay readable inside the single-reaction card view. */
  .reaction-group-table thead th:nth-child(3),
  .reaction-group-table tbody td:nth-child(3) {
    display: none;
  }
}

/* vs-05o.1: entity stat blocks under GuideEntityEmbed sprites */
.embed.has-stats {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  vertical-align: top;
}
.entity-stats {
  display: block;
  width: 100%;
  min-width: 12rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
}
.entity-stats-summary {
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  color: var(--dim);
  list-style: none;
  user-select: none;
}
.entity-stats-summary::-webkit-details-marker { display: none; }
.entity-stats-summary::marker { content: ""; }
.entity-stats-summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  margin-right: 0.3rem;
  transition: transform 120ms ease;
}
.entity-stats[open] .entity-stats-summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}
.entity-stats-summary:hover { color: var(--accent); }
.entity-stats-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border);
  font-family: inherit;
}
.entity-stats-table th,
.entity-stats-table td {
  padding: 0.2rem 0.5rem;
  border-top: 1px solid var(--border);
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}
.entity-stats-table tr:first-child th,
.entity-stats-table tr:first-child td {
  border-top: none;
}
.entity-stats-table th {
  color: var(--dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  width: 8rem;
}
.entity-stats-table td {
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
@media (prefers-reduced-motion: reduce) {
  .entity-stats-summary::before { transition: none; }
}