/* Manual-specific styles. Loaded AFTER site.css (which provides reset, base,
 * scrollbars, selection, .site-header, link/typography defaults).
 */

/* ── Sidebar ── */
.sidebar {
  position: fixed;
  top: 49px;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #010409;
  border-right: 1px solid #21262d;
  overflow-y: auto;
  padding: 20px 0;
  z-index: 110;
  scrollbar-color: #30363d #010409;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: #010409; }
.sidebar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

.content {
  max-width: 820px;
  padding: 80px 32px 120px;
  /* center within the viewport area right of the sidebar */
  margin-left: max(292px, calc(260px + (100vw - 260px - 820px) / 2));
  margin-right: auto;
}

.content section img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em 0;
  border-radius: 4px;
  border: 1px solid #30363d;
}

.content section img.centered {
  margin-left: auto;
  margin-right: auto;
}

.image-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2em 0;
}

.image-row img {
  border: 1px solid #30363d;
  border-radius: 4px;
  margin: 0;
}

/* ── Cover ── */
.cover {
  text-align: center;
  padding: 80px 0 60px;
  border-bottom: 1px solid #21262d;
  margin-bottom: 48px;
}

.cover-logo {
  max-width: 672px;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.cover-subtitle {
  font-size: 18px;
  color: #8b949e;
  font-weight: 400;
  margin-bottom: 6px;
}

.cover-version {
  font-size: 14px;
  color: #484f58;
  margin-top: 20px;
}

/* ── Sidebar TOC ── */
.toc {
  padding: 0;
}

.toc-list {
  list-style: none;
}

.toc-list li {
  margin: 0;
}

.toc-list a {
  display: block;
  color: #8b949e;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 16px 4px 20px;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.toc-list a:hover {
  color: #c9d1d9;
  background: rgba(88, 166, 255, 0.06);
}

.toc-list a.active {
  color: #58a6ff;
  border-left-color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
}

.toc-h2 a { padding-left: 32px; font-size: 12px; }
.toc-h3 a { padding-left: 44px; font-size: 11px; }

/* ── Headings ── */
h1, h2, h3, details[id] {
  scroll-margin-top: 72px;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  color: #e6edf3;
  margin-top: 72px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #21262d;
}

h1:first-child { margin-top: 0; }

h2 {
  font-size: 22px;
  font-weight: 600;
  color: #58a6ff;
  margin-top: 48px;
  margin-bottom: 16px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  color: #e6edf3;
  margin-top: 32px;
  margin-bottom: 12px;
}

/* ── Body Text ── */
p {
  margin-bottom: 14px;
  color: #c9d1d9;
}

strong { color: #e6edf3; }

/* ── Callout Boxes ── */
.callout {
  background: #161b22;
  border-left: 3px solid #58a6ff;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.65;
}

.callout-title {
  font-weight: 600;
  color: #58a6ff;
  display: block;
  margin-bottom: 6px;
}

/* ── Worked Examples ── */
.worked-example {
  background: #161b22;
  border-left: 3px solid #d29922;
  border-radius: 6px;
  padding: 20px 24px;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.7;
}

.worked-example-title {
  font-weight: 700;
  color: #d29922;
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
}

.worked-example p {
  margin-bottom: 10px;
}

.worked-example p:last-child {
  margin-bottom: 0;
}

/* ── Collapsible Sections (shared base) ── */
details.technical-detail,
details.explorer-detail,
details.info-detail,
details.worked-example-collapsible {
  background: #0d1117;
  border-radius: 6px;
  margin: 28px 0;
  padding: 0;
  border: 1px solid #21262d;
}

details.technical-detail > summary,
details.explorer-detail > summary,
details.info-detail > summary,
details.worked-example-collapsible > summary {
  cursor: pointer;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

details.technical-detail > summary::-webkit-details-marker,
details.explorer-detail > summary::-webkit-details-marker,
details.info-detail > summary::-webkit-details-marker,
details.worked-example-collapsible > summary::-webkit-details-marker { display: none; }

details.technical-detail > summary::before,
details.explorer-detail > summary::before,
details.info-detail > summary::before,
details.worked-example-collapsible > summary::before {
  content: "\25b6";
  font-size: 12px;
  transition: transform 0.15s ease;
}

details.technical-detail[open] > summary::before,
details.explorer-detail[open] > summary::before,
details.info-detail[open] > summary::before,
details.worked-example-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

details.technical-detail > .detail-body,
details.explorer-detail > .detail-body,
details.info-detail > .detail-body {
  padding: 4px 24px 24px;
  border-top: 1px solid #21262d;
}

details.worked-example-collapsible > .example-body {
  padding: 0 24px 20px;
  border-top: 1px solid #21262d;
}

details.worked-example-collapsible > .example-body p {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.7;
}

details.worked-example-collapsible > .example-body p:last-child {
  margin-bottom: 0;
}

/* ── Info Detail (green) ── */
details.info-detail {
  border-color: #1f6e2f;
}
details.info-detail > summary { color: #3fb950; }
details.info-detail > summary::before { color: #3fb950; opacity: 0.5; }

/* ── Explorer (blue) ── */
details.explorer-detail {
  border-color: #1f4a6e;
}
details.explorer-detail > summary { color: #58a6ff; }
details.explorer-detail > summary::before { color: #58a6ff; opacity: 0.5; }

/* ── Technical Detail (red) ── */
details.technical-detail {
  border-color: #6e1f1f;
}
details.technical-detail > summary { color: #f85149; }
details.technical-detail > summary::before { color: #f85149; opacity: 0.5; }

/* ── Worked Example (amber) ── */
details.worked-example-collapsible {
  border-color: #5c3d0e;
}
details.worked-example-collapsible > summary { color: #d29922; }
details.worked-example-collapsible > summary::before { color: #d29922; opacity: 0.5; }

/* ── Interactive Elements ── */
.interactive {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 20px 24px;
  margin: 28px 0;
}

/* ── Formula / Code Lines ── */
.formula {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size: 14px;
  color: #79c0ff;
  background: #161b22;
  border-radius: 4px;
  padding: 10px 16px;
  margin: 12px 0;
  display: block;
  white-space: pre-wrap;
  border: 1px solid #21262d;
}

/* ── Data Tables ── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

thead th {
  background: #161b22;
  color: #e6edf3;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid #30363d;
}

tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  vertical-align: top;
}

tbody tr:nth-child(even) {
  background: rgba(22, 27, 34, 0.5);
}

tbody td:first-child {
  color: #e6edf3;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Back-to-Top Button ── */
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 100;
}

#back-to-top:hover {
  background: #30363d;
  color: #e6edf3;
}

/* ── Section spacing ── */
section {
  margin-bottom: 24px;
}