/* ── Wider content — only override the max-width variable ───────────────── */
:root {
  --content-max-width: 1200px;
}

/* ── Language switcher button ────────────────────────────────────────────── */
.lang-toggle-btn {
  background: none;
  border: 1px solid var(--icons);
  border-radius: 4px;
  color: var(--icons);
  cursor: pointer;
  font-size: 13px;
  margin-right: 6px;
  padding: 4px 9px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.lang-toggle-btn:hover {
  background: var(--icons);
  color: var(--bg);
}

/* ── Background fills edge-to-edge ──────────────────────────────────────── */
html, body {
  background-color: var(--bg) !important;
}

.page-wrapper {
  background-color: var(--bg) !important;
}

/* ── Nav arrows: smaller so they don't eat into content ─────────────────── */
.nav-chapters {
  min-width: 40px !important;
  max-width: 50px !important;
}

/* ── Live preview containers ─────────────────────────────────────────────── */
details[open] > div {
  overflow-x: auto;
}
details summary {
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */
pre code {
  font-size: 13px;
}

/* ── Section tabs (Code / Algorithmic Functioning) ───────────────────────── */
.doc-tabs {
  display: flex;
  gap: 0;
  margin: 1.5em 0 0;
  border-bottom: 2px solid var(--table-border-color, #4a4a4a);
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 4px 4px 0 0;
  color: var(--fg);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: -2px;
  padding: 8px 20px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--links); }
.tab-btn.active {
  border-bottom-color: var(--links);
  color: var(--links);
  font-weight: 600;
}
.tab-section-code,
.tab-section-algo { display: block; }

/* ── Page-level Code / Algo tab bar ─────────────────────────────────────── */
.sp-page-tabs {
  display: flex;
  gap: 0;
  margin: 1em 0 1.5em;
  border-bottom: 2px solid var(--table-border-color, #444);
}
.sp-ptb {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 4px 4px 0 0;
  color: var(--fg);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: -2px;
  padding: 8px 20px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sp-ptb:hover { color: var(--links); }
.sp-ptb.sp-ptb-act {
  border-bottom-color: var(--links);
  color: var(--links);
  font-weight: 600;
}