/*
SPDX-FileCopyrightText: 2026 Jorge Pérez Burgueño and Nodus contributors
SPDX-License-Identifier: AGPL-3.0-only

The documentation reader. It loads assets/css/nodus.css first and only adds what
a docs layout needs on top: the three-column shell, the navigation rail, and the
chapter components. Colours, type, radii and surfaces all come from the design
system, so the wiki and the rest of the site cannot drift apart.
*/

:root {
  --side: 286px;
  --toc: 216px;
  --doc-accent: var(--violet-2);
}

/* nodus.css gives every <section> marketing-sized padding; a chapter is not one */
.wiki-page section { padding: 0; }
.wiki-page h1, .wiki-page h2, .wiki-page h3 { letter-spacing: -0.032em; }

/* ============================================================ shell */
.layout {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--toc);
  max-width: 1680px;
  min-height: 100vh;
  margin-inline: auto;
  padding-top: var(--nav-h);
  position: relative;
  z-index: 1;
}

main#article {
  min-width: 0;
  padding: clamp(38px, 5vw, 68px) clamp(26px, 4.5vw, 76px) 120px;
  background: rgba(9, 8, 15, 0.62);
}

/* ============================================================ navigation rail */
.sidebar {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 16px 24px;
  border-right: 1px solid var(--membrane);
  background: rgba(13, 11, 21, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 10px 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
#nav-close, .nav-backdrop { display: none; }

.nav-group { margin-top: 22px; }
.nav-group > b {
  display: block; margin: 0 10px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}

.nav-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 1px 0; padding: 8px 10px;
  border-radius: var(--r-s);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.4;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--skin); }
.nav-link.active {
  color: var(--ink); font-weight: 620;
  background: color-mix(in srgb, var(--doc-accent) 15%, transparent);
}
/* the rail marker that follows the reader down the page */
.nav-link.active::before {
  content: ''; position: absolute; left: -16px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--doc-accent);
}
.nav-dot {
  width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%;
  background: currentColor; opacity: 0.42;
}
.nav-link.active .nav-dot { opacity: 1; box-shadow: 0 0 9px currentColor; }

/* a vault and its chapters, one open at a time */
.nav-vault { margin-top: 4px; }
.nav-vault > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-s);
  color: var(--ink); font-size: 13.5px; font-weight: 620;
  cursor: pointer; list-style: none;
  transition: background 0.18s var(--ease);
}
.nav-vault > summary::-webkit-details-marker { display: none; }
.nav-vault > summary:hover { background: var(--skin); }
.nav-vault > summary::after {
  margin-left: auto; color: var(--ink-3); content: '›';
  font-size: 16px; transition: transform 0.22s var(--ease);
}
.nav-vault[open] > summary::after { transform: rotate(90deg); }
.vault-mark {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 7px; line-height: 0;
  background: color-mix(in srgb, var(--vault-accent) 20%, transparent);
  color: var(--vault-accent);
}
.nav-vault .nav-link { padding-left: 42px; font-size: 13px; }
.nav-vault .nav-link.active::before { left: -16px; }
.vault-icon-svg { display: block; width: 14px; height: 14px; }

.sidebar-foot {
  display: flex; justify-content: space-between; gap: 10px;
  margin: 26px 10px 0; padding-top: 14px;
  border-top: 1px solid var(--membrane);
  font-size: 10.5px; color: var(--ink-3);
}

/* ============================================================ on this page */
.toc {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(38px, 5vw, 68px) 22px;
  border-left: 1px solid var(--membrane);
  background: rgba(9, 8, 15, 0.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.toc > b {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.toc a {
  display: block; margin-top: 9px; padding-left: 11px;
  border-left: 2px solid transparent;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.toc a:hover { color: var(--ink-2); }
.toc a.active { color: var(--ink); border-left-color: var(--doc-accent); }

/* ============================================================ page head */
.wiki-page .eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--doc-accent);
}
.wiki-page .eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.6; }

.wiki-page h1 {
  max-width: 20ch;
  font: 600 clamp(34px, 4.4vw, 58px)/1.04 var(--serif);
  letter-spacing: -0.038em;
}
.wiki-page .lead {
  max-width: 68ch; margin: 20px 0 0;
  font-size: 17.5px; line-height: 1.72; color: var(--ink-2);
}
.meta-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.pill {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--membrane); background: var(--skin);
  font-size: 12px; color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 18px;
  border: 1px solid var(--membrane); border-radius: var(--r-m);
  background: var(--skin); color: var(--ink);
  font-size: 13.5px; font-weight: 620;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease);
}
.action:hover { color: var(--ink); border-color: rgba(167, 139, 250, 0.55); background: var(--skin-2); }
.action.primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #8b5cf6);
  box-shadow: 0 10px 34px -12px rgba(124, 58, 237, 0.7);
  font-weight: 700;
}
.action.primary:hover { color: #fff; box-shadow: 0 16px 46px -12px rgba(139, 92, 246, 0.85); }
.download-icon { width: 16px; height: 16px; flex: 0 0 auto; margin-right: 8px; }

.hero-shot {
  position: relative; margin: 40px 0 48px; padding: 9px;
  border: 1px solid var(--membrane); border-radius: var(--r-l);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow);
}
.hero-shot::before {
  display: block; height: 18px; content: '';
  background:
    radial-gradient(circle at 8px 9px, #ff625c 0 4px, transparent 4.5px),
    radial-gradient(circle at 23px 9px, #ffbd44 0 4px, transparent 4.5px),
    radial-gradient(circle at 38px 9px, #00ca4e 0 4px, transparent 4.5px);
}
.hero-shot img {
  display: block; width: 100%; max-height: 640px;
  object-fit: cover; object-position: top; border-radius: 10px;
}

/* ============================================================ a chapter */
.doc-section { scroll-margin-top: calc(var(--nav-h) + 26px); margin-top: 58px; }
.section-kicker {
  margin: 0 0 8px; font: 700 10.5px var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--doc-accent);
}
.wiki-page h2 { margin: 0; font: 600 clamp(25px, 2.8vw, 33px)/1.18 var(--serif); }
.section-summary {
  max-width: 72ch; margin: 13px 0 0;
  font-size: 16.5px; font-weight: 550; line-height: 1.66; color: var(--ink);
}
.section-details { max-width: 72ch; margin: 15px 0 0; color: var(--ink-2); line-height: 1.72; }

.start-box {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; max-width: 940px; margin-top: 24px; overflow: hidden;
  border: 1px solid var(--membrane); border-radius: var(--r-m);
  background: var(--membrane);
}
.start-box > div { padding: 15px 18px; background: rgba(17, 14, 28, 0.96); }
.start-box span {
  display: block; margin-bottom: 5px;
  font: 700 9.5px var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.start-box strong { display: block; color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1.55; }

.section-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(210px, 0.7fr);
  gap: 16px; margin-top: 24px;
}
.howto, .tipbox {
  padding: 22px; border-radius: var(--r-m);
  border: 1px solid var(--membrane);
  background: linear-gradient(180deg, rgba(23, 19, 40, 0.7), rgba(11, 9, 21, 0.66));
}
.howto h3, .tipbox h3 {
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.howto ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.howto li {
  position: relative; min-height: 28px; padding: 0 0 14px 38px;
  color: var(--ink-2); counter-increment: steps; line-height: 1.65;
}
.howto li:last-child { padding-bottom: 0; }
.howto li::before {
  content: counter(steps);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 25px; height: 25px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--doc-accent) 18%, transparent);
  color: var(--doc-accent); font: 700 11px var(--mono);
}
.tipbox {
  border-color: color-mix(in srgb, var(--doc-accent) 26%, var(--membrane));
  background: color-mix(in srgb, var(--doc-accent) 7%, rgba(11, 9, 21, 0.7));
}
.tipbox ul { margin: 0; padding-left: 17px; color: var(--ink-2); line-height: 1.65; }
.tipbox li::marker { color: var(--doc-accent); }

.doc-figure {
  margin: 26px 0 0; padding: 8px;
  border: 1px solid var(--membrane); border-radius: var(--r-m);
  background: rgba(14, 11, 24, 0.9);
}
.doc-figure img {
  display: block; width: 100%; max-height: 620px;
  object-fit: cover; object-position: top; border-radius: 9px;
}
.doc-figure figcaption { padding: 9px 6px 2px; font-size: 11.5px; color: var(--ink-3); }

/* ============================================================ wiki home */
.vault-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 32px;
}
.vault-card {
  padding: 24px; border-radius: var(--r-l);
  border: 1px solid var(--membrane);
  background: linear-gradient(150deg, color-mix(in srgb, var(--card-accent) 13%, rgba(19, 15, 33, 0.86)), rgba(11, 9, 21, 0.84));
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
.vault-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-accent) 50%, transparent); }
.vault-card .vault-mark { width: 38px; height: 38px; margin-bottom: 16px; border-radius: 11px; }
.vault-card .vault-icon-svg { width: 20px; height: 20px; }
.wiki-page .vault-card h2 { font: 600 22px/1.22 var(--serif); }
.vault-card p { margin: 9px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.vault-card a { font-size: 13px; font-weight: 650; color: color-mix(in srgb, var(--card-accent) 70%, white); }
.vault-card a:hover { color: #fff; }
.vault-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.vault-card-actions .vault-pdf-download {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
  padding: 5px 11px; border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--card-accent) 32%, var(--membrane));
  background: color-mix(in srgb, var(--card-accent) 9%, transparent);
  color: var(--ink-2);
}
.vault-card-actions .vault-pdf-download:hover { color: #fff; border-color: color-mix(in srgb, var(--card-accent) 62%, var(--membrane)); }

.callout {
  margin-top: 34px; padding: 24px;
  border: 1px solid rgba(167, 139, 250, 0.26); border-radius: var(--r-l);
  background: rgba(139, 92, 246, 0.09);
}
.callout b { display: block; margin-bottom: 7px; color: var(--ink); }
.callout p { margin: 0; color: var(--ink-2); }

/* ============================================================ search results */
.search-results {
  position: absolute; top: calc(100% + 9px); left: 0; right: 0;
  max-height: min(560px, calc(100vh - 96px)); overflow: auto;
  padding: 7px; border-radius: var(--r-m);
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: var(--raised); box-shadow: var(--shadow);
}
.search-result { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 10px; border-radius: var(--r-s); }
.search-result:hover, .search-result:focus { outline: none; background: rgba(139, 92, 246, 0.13); }
.result-icon {
  display: grid; place-items: center; width: 30px; height: 30px; line-height: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--result-accent) 20%, transparent);
  color: var(--result-accent);
}
.result-icon .vault-icon-svg { width: 17px; height: 17px; }
.nodus-mark { display: block; width: 16px; height: 16px; object-fit: contain; }
.search-result > span:last-child { min-width: 0; }
.search-result b { display: block; color: var(--ink); line-height: 1.35; }
.search-result > span:last-child > span { display: block; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.search-empty { padding: 22px; text-align: center; color: var(--ink-3); }

/* ============================================================ video tutorials */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.video-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid var(--membrane); border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(23, 19, 40, 0.8), rgba(11, 9, 21, 0.76));
  color: inherit; font: inherit; cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.video-card:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.45); }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--deep); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: transform 0.6s var(--ease), opacity 0.3s; }
.video-card:hover .video-thumb img { transform: scale(1.06); opacity: 1; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-play svg {
  width: 46px; height: 46px; padding: 14px; border-radius: 50%; fill: #fff;
  background: rgba(10, 8, 19, 0.72); border: 1px solid rgba(255, 255, 255, 0.24);
  transition: transform 0.35s var(--ease), background 0.3s;
}
.video-card:hover .video-play svg { transform: scale(1.12); background: var(--violet); }
.video-copy { padding: 15px 17px 18px; }
.video-copy b { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--ink); }

.video-modal {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 24px;
  background: rgba(4, 3, 8, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.video-modal.open { display: grid; }
.video-dialog {
  width: min(100%, 940px); overflow: hidden;
  border: 1px solid var(--membrane); border-radius: var(--r-l);
  background: var(--raised); box-shadow: var(--shadow);
}
.video-head { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--membrane); }
.video-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 15.5px; }
.video-close {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--membrane); background: var(--skin);
  color: var(--ink-2); font-size: 18px; line-height: 1;
}
.video-close:hover { color: var(--ink); background: var(--skin-2); }
.video-frame { aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ============================================================ the organism, behind the docs */
#organism.awake { opacity: 0.3; }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  :root { --toc: 0px; }
  .layout { grid-template-columns: var(--side) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 900px) {
  :root { --side: 0px; }
  .layout { display: block; }
  main#article { padding: 38px 22px 90px; }
  .sidebar {
    position: fixed; z-index: 46; top: var(--nav-h); left: 0;
    width: min(340px, 88vw);
    background: rgba(12, 10, 20, 0.98);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.55);
    transform: translateX(-105%); transition: transform 0.24s var(--ease);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open { overflow: hidden; }
  /* the drawer scrolls as one block; only the header stays pinned */
  .sidebar .wiki-search-wrap {
    position: static;
    margin: 0 10px 18px; padding: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0;
  }
  .sidebar-head {
    position: sticky; z-index: 2; top: -26px;
    margin: -26px -16px 16px; padding: 20px 18px 14px 26px;
    border-bottom: 1px solid var(--membrane);
    background: rgba(12, 10, 20, 0.98);
  }
  #nav-close {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--membrane); border-radius: var(--r-s);
    background: var(--skin); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .nav-backdrop {
    position: fixed; z-index: 45; inset: var(--nav-h) 0 0;
    width: 100%; height: auto; padding: 0; border: 0;
    background: rgba(0, 0, 0, 0.64); backdrop-filter: blur(3px); cursor: default;
  }
  .nav-backdrop:not([hidden]) { display: block; }
  .section-grid, .start-box { grid-template-columns: minmax(0, 1fr); }
  .hero-shot { margin-inline: -10px; }
}

@media print {
  [data-nodus-site-header], .sidebar, .toc, .hero-actions, #organism { display: none !important; }
  .layout { display: block; padding: 0; }
  main#article { padding: 0; background: none; }
  body { background: #fff; color: #111; }
}

/* ============================================================ wiki chrome
   The header itself comes from nodus.css; these are the two controls only the
   documentation needs. site-header.css carries its own copy for the demos. */
/* deliberately the same box as .nav-toggle in nodus.css: on a phone the two sit
   side by side, and a half-size neighbour would read as a different control */
.wiki-menu-toggle {
  display: none; place-items: center;
  width: 40px; height: 36px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--membrane); border-radius: var(--r-s);
  background: var(--skin); color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
/* a book, not a second hamburger: the header already has one for the site menu */
.wiki-menu-toggle svg { width: 18px; height: 18px; }
.wiki-menu-toggle:hover { border-color: rgba(167, 139, 250, 0.5); background: var(--skin-2); }

/* --search-inset is the distance from this box's padding edge to the field
   itself. The icon and the shortcut are absolute against the wrapper, so any
   padding the wrapper takes on has to be added back here or they drift out of
   the input and leave a hole in front of the placeholder. */
.wiki-search-wrap {
  position: relative; display: flex; align-items: center;
  flex: 1 1 340px; min-width: 0; max-width: 460px;
  --search-inset: 0px;
}
.wiki-search-wrap > svg {
  position: absolute; left: calc(var(--search-inset) + 13px); width: 15px; height: 15px;
  fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.wiki-search-wrap input {
  /* Safari draws type="search" as a native searchfield: it centres its own text
     and ignores the padding, leaving the placeholder floating mid-box */
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: 9px 58px 9px 36px;
  border: 1px solid var(--membrane); border-radius: 11px;
  background: rgba(16, 13, 28, 0.85); color: var(--ink);
  font: 500 13.5px var(--sans);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* the sidebar is narrow: a placeholder that overflows must fade, not clip mid-word */
.wiki-search-wrap input::placeholder {
  color: var(--ink-3);
  text-overflow: ellipsis;
}
.wiki-search-wrap input:focus {
  outline: none; border-color: rgba(167, 139, 250, 0.62);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.13);
}
.wiki-search-wrap input::-webkit-search-cancel-button { display: none; }
.wiki-search-wrap kbd {
  position: absolute; right: calc(var(--search-inset) + 9px); padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  background: var(--skin); color: var(--ink-2); font: 10.5px/1.4 var(--sans);
}

/* the search lives at the top of the rail: pinned there while the
   navigation scrolls past underneath it */
.sidebar .wiki-search-wrap {
  position: sticky; top: -26px; z-index: 3;
  flex: none; width: 100%; max-width: none;
  margin: 0 -16px 18px; padding: 0 16px 14px;
  --search-inset: 16px;
  background: rgba(13, 11, 21, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--membrane);
}

@media (max-width: 1180px) {
  .wiki-nav .gh-badge .lbl,
  .wiki-nav .release-downloads .download-word { display: none; }
  .wiki-nav .release-downloads { min-width: 58px; padding-inline: 10px; }
}
/* The docs button is written first in the markup so it reads right after the
   landmark, but on a phone it belongs with the other menu control: reorder it
   into the pair at the end of the bar rather than stranding it beside the logo. */
@media (max-width: 1080px) {
  .wiki-nav .wiki-menu-toggle { display: grid; order: 2; margin-left: auto; }
  .wiki-nav .nav-toggle { order: 3; margin-left: 0; }
  .wiki-nav { gap: 10px; }
}
/* the phone header holds a logo and two buttons in one row, so it keeps the
   standard 62px band: the taller wrapping bar dates from when the search box
   still rode in the header */
@media (max-width: 760px) {
  .wiki-nav { padding-inline: 16px; }
}