/* ==========================================================================
   Docs section (/docs/) — dark theme, matched to the dApp.
   The dApp runs `--bs-body-bg: #000` with `--bs-body-color: #fff`, surfaces
   at #222 / #3b3b3b and a #3E80FF primary; those values are reused here so
   docs → app is one continuous surface. Accent green #00ff99 comes from the
   landing page, callout accents from the shared brand set
   (#3E80FF / #00efb2 / #fb8b1e / #ff433d).
   ========================================================================== */

:root {
  --docs-accent: #00ff99;
  --docs-bg: #000;
  --docs-surface: #111;
  --docs-surface-2: #181818;
  --docs-ink: #e6e6e6;
  --docs-heading: #fff;
  --docs-muted: #8b8b8b;
  --docs-line: #262626;
  --docs-line-strong: #3b3b3b;
  --docs-link: #4d8dff;
  --docs-code-bg: #121212;
  --docs-code-ink: #00efb2;
  --docs-sidebar-w: 260px;
  --docs-toc-w: 200px;
  --docs-header-h: 64px;
  /* Measure of the prose column. The pager and footer share it so their
     rules line up with the text above them — change it here only. */
  --docs-content-w: 840px;
}

.docs-body {
  margin: 0;
  background: var(--docs-bg);
  color: var(--docs-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- header -- */

.docs-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--docs-header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  background: var(--docs-bg);
  border-bottom: 1px solid var(--docs-line);
}

.docs-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.docs-brand img {
  height: 34px;
  width: 34px;
}

.docs-brand span {
  color: var(--docs-accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.docs-header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.docs-header-nav a {
  color: #b9b9b9;
  text-decoration: none;
  font-size: 0.95rem;
}

.docs-header-nav a:hover {
  color: #fff;
}

/* Geometry on the base selector only — see the note on `.sf-launch` in
   customChanges.css. Hover changes colour and nothing else. */
.docs-header-nav .docs-launch {
  color: #000;
  background: var(--docs-accent);
  border: 0;
  border-radius: 6px;
  padding: 0.45rem 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color 0.2s;
}

/* Same hover shade as `.sf-launch` on the landing page, so the button behaves
   identically wherever it appears. */
.docs-header-nav .docs-launch:hover,
.docs-header-nav .docs-launch:focus {
  color: #000;
  background: #00e389;
}

.docs-sidebar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.docs-sidebar-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: #fff;
}

/* ----------------------------------------------------------------- shell -- */

.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w);
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
}

/* --------------------------------------------------------------- sidebar -- */

.docs-sidebar {
  position: sticky;
  top: var(--docs-header-h);
  align-self: start;
  height: calc(100vh - var(--docs-header-h));
  overflow-y: auto;
  padding: 2rem 1rem 3rem 1.5rem;
  border-right: 1px solid var(--docs-line);
}

.docs-sidebar-group {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.docs-sidebar-group:first-child {
  margin-top: 0;
}

.docs-sidebar ul {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.docs-sidebar li a {
  display: block;
  padding: 0.32rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: 5px;
  color: #c4c4c4;
  text-decoration: none;
  font-size: 0.94rem;
}

.docs-sidebar li a:hover {
  background: var(--docs-surface);
  color: #fff;
}

.docs-sidebar li a.active {
  background: var(--docs-surface-2);
  color: var(--docs-accent);
  font-weight: 600;
}

/* ------------------------------------------------------------------ main -- */

.docs-main {
  min-width: 0;
  padding: 2.5rem 3rem 4rem;
}

.docs-content {
  max-width: var(--docs-content-w);
}

.docs-meta {
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  color: var(--docs-muted);
}

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content strong {
  color: var(--docs-heading);
}

.docs-content h1 {
  margin: 0 0 1.2rem;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.docs-content h2 {
  margin: 2.8rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--docs-line);
  font-size: 1.5rem;
  font-weight: 600;
}

.docs-content h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* main.css zeroes `p` margins and sets `list-style-type: none` on every list
   for the landing page's layout. Prose needs both back — restored here rather
   than by editing main.css, so the landing page is untouched. */

.docs-content p,
.docs-content li {
  font-size: 1rem;
}

.docs-content p {
  margin: 0 0 1.1rem;
}

.docs-content ul {
  list-style-type: disc;
}

.docs-content ol {
  list-style-type: decimal;
}

.docs-content ul ul {
  list-style-type: circle;
  margin-top: 0.35rem;
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 1.1rem;
}

.docs-content a {
  color: var(--docs-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(77, 141, 255, 0.35);
}

.docs-content a:hover {
  border-bottom-color: var(--docs-link);
}

.docs-content ul,
.docs-content ol {
  padding-left: 1.4rem;
}

.docs-content li + li {
  margin-top: 0.35rem;
}

.docs-content strong {
  font-weight: 600;
}

.docs-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--docs-line);
}

.docs-content img {
  max-width: 100%;
  border-radius: 8px;
}

/* Escape hatch for assets that are still light-on-white (diagrams exported
   from tools that cannot emit a dark variant). Without it they read as a
   glaring white slab on the dark page. Apply in Markdown with
   `![alt](path){: .light-asset }`. Generated charts don't need it — they are
   rendered on the page background. */
.docs-content img.light-asset {
  background: #fff;
  padding: 1rem;
  border: 1px solid var(--docs-line);
}

.docs-content figure {
  margin: 1.8rem 0;
}

.docs-content figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--docs-muted);
}

/* ------------------------------------------------------------------ code -- */

.docs-content code {
  padding: 0.12em 0.38em;
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-line);
  border-radius: 4px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--docs-code-ink);
  word-break: break-word;
}

.docs-content pre {
  margin: 1.4rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-line);
  border-radius: 8px;
  overflow-x: auto;
}

.docs-content pre code {
  padding: 0;
  background: transparent;
  border: 0;
  color: #dcdcdc;
  font-size: 0.87rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- tables -- */

.docs-content table {
  width: 100%;
  margin: 1.6rem 0;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.docs-content th,
.docs-content td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--docs-line);
  vertical-align: top;
}

.docs-content th {
  background: var(--docs-surface);
  font-weight: 600;
  white-space: nowrap;
}

.docs-content td code {
  font-size: 0.82em;
}

/* -------------------------------------------------------------- callouts -- */
/* Authored with python-markdown's admonition syntax:
       !!! note "Optional title"
           Body text, indented four spaces.                                  */

.docs-content .admonition {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--docs-surface);
  border-left: 4px solid var(--docs-line-strong);
  border-radius: 0 6px 6px 0;
}

.docs-content .admonition > :last-child {
  margin-bottom: 0;
}

.docs-content .admonition-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.docs-content .admonition.note {
  border-left-color: #3e80ff;
  background: rgba(62, 128, 255, 0.1);
}
.docs-content .admonition.note .admonition-title {
  color: #7aa9ff;
}

.docs-content .admonition.tip {
  border-left-color: #00efb2;
  background: rgba(0, 239, 178, 0.09);
}
.docs-content .admonition.tip .admonition-title {
  color: #00efb2;
}

.docs-content .admonition.warning {
  border-left-color: #fb8b1e;
  background: rgba(251, 139, 30, 0.1);
}
.docs-content .admonition.warning .admonition-title {
  color: #fb8b1e;
}

.docs-content .admonition.danger {
  border-left-color: #ff433d;
  background: rgba(255, 67, 61, 0.1);
}
.docs-content .admonition.danger .admonition-title {
  color: #ff6b66;
}

/* ------------------------------------------------------------- card grid -- */
/* Used on the docs home page: <div class="docs-cards" markdown="1">        */

.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
}

.docs-card {
  display: block;
  padding: 1.2rem;
  border: 1px solid var(--docs-line);
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit;
  /* Colour-only hover, matching the Launch App button. Nothing shifts
     position, so a pointer never chases a moving target. */
  transition: background-color 0.2s, border-color 0.2s;
}

.docs-card:hover {
  background: var(--docs-surface);
  border-color: var(--docs-line-strong);
}

.docs-card strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.02rem;
}

.docs-card span {
  display: block;
  font-size: 0.9rem;
  color: var(--docs-muted);
  line-height: 1.5;
}

/* ----------------------------------------------------------------- pager -- */

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--docs-content-w);
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--docs-line);
}

.docs-pager a {
  flex: 0 1 48%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--docs-line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, border-color 0.2s;
}

.docs-pager a:hover {
  background: var(--docs-surface);
  border-color: var(--docs-line-strong);
}

.docs-pager-next {
  text-align: right;
}

.docs-pager span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.docs-pager strong {
  font-weight: 600;
}

/* ---------------------------------------------------------------- footer -- */

.docs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--docs-content-w);
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--docs-line);
  font-size: 0.85rem;
  color: var(--docs-muted);
}

.docs-footer p {
  margin: 0;
}

.docs-footer ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-footer a {
  color: var(--docs-muted);
  font-size: 1.05rem;
}

.docs-footer a:hover {
  color: #fff;
}

/* ------------------------------------------------------------------- toc -- */

.docs-toc {
  position: sticky;
  top: var(--docs-header-h);
  align-self: start;
  max-height: calc(100vh - var(--docs-header-h));
  overflow-y: auto;
  padding: 2.5rem 1.5rem 3rem 0;
  font-size: 0.88rem;
}

.docs-toc-title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--docs-line);
}

.docs-toc ul ul {
  border: 0;
  padding-left: 0.8rem;
}

.docs-toc li a {
  display: block;
  padding: 0.22rem 0 0.22rem 0.8rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--docs-muted);
  text-decoration: none;
  line-height: 1.4;
}

.docs-toc li a:hover {
  color: #fff;
}

.docs-toc li a.active {
  border-left-color: var(--docs-accent);
  color: #fff;
  font-weight: 600;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1200px) {
  .docs-shell {
    grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr);
  }
  .docs-toc {
    display: none;
  }
  .docs-main {
    padding: 2.5rem 2rem 4rem;
  }
}

@media (max-width: 860px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-sidebar-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }
  .docs-header-nav {
    order: 3;
    margin-left: 0;
    gap: 1rem;
  }
  .docs-header-nav a:not(.docs-launch) {
    display: none;
  }
  .docs-sidebar {
    display: none;
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--docs-line);
    padding: 1.5rem;
  }
  .docs-sidebar.open {
    display: block;
  }
  .docs-main {
    padding: 1.8rem 1.3rem 3rem;
  }
  .docs-content h1 {
    font-size: 1.8rem;
  }
  /* A wide table (contract addresses, the options grid) would otherwise
     stretch the whole page past the viewport and push the header's Launch
     App button off screen. Let the table scroll inside its own box instead. */
  .docs-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .docs-content th {
    white-space: normal;
  }
  .docs-pager {
    flex-direction: column;
  }
  .docs-pager a {
    flex: 1 1 auto;
  }
  .docs-pager-next {
    text-align: left;
  }
}