/* Docs pages. Inherits the variables and base from styles.css. */

.docs-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) 3rem;
  align-items: start;
}

/* Sidebar */
.docs-side {
  position: sticky;
  top: 5rem;
  border-right: 1px solid var(--border);
  padding-right: 1.2rem;
}
.docs-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.docs-side a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  color: var(--dim);
  font-size: 0.94rem;
}
.docs-side a:hover { color: var(--text); background: var(--bg-soft); }
.docs-side a.is-active { color: var(--text); background: var(--panel); border-left: 2px solid var(--green); }

/* Content prose */
.docs-content { min-width: 0; }
.docs-content h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 1.2rem; }
.docs-content h2 {
  font-size: 1.4rem; margin: 2.2rem 0 0.8rem; padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.docs-content h3 { font-size: 1.12rem; margin: 1.6rem 0 0.5rem; }
.docs-content p { color: #cdd6e0; margin: 0.8rem 0; }
.docs-content a { color: var(--green); text-decoration: none; }
.docs-content a:hover { text-decoration: underline; }
.docs-content ul, .docs-content ol { color: #cdd6e0; padding-left: 1.4rem; }
.docs-content li { margin: 0.35rem 0; }
.docs-content strong { color: var(--text); }

.docs-content code {
  font-family: var(--mono); font-size: 0.88em;
  background: #161b22; border: 1px solid var(--border);
  border-radius: 5px; padding: 0.1rem 0.38rem; color: #e6edf3;
}
.docs-content pre {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  overflow-x: auto; margin: 1rem 0;
}
.docs-content pre code {
  background: none; border: none; padding: 0; font-size: 0.86rem;
  line-height: 1.65; color: #e6edf3;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.docs-content blockquote {
  margin: 1rem 0; padding: 0.4rem 1rem;
  border-left: 3px solid var(--purple-deep); color: var(--dim);
}
.docs-content table {
  width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem;
}
.docs-content th, .docs-content td {
  border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left;
}
.docs-content th { background: var(--bg-soft); }
.docs-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Docs index */
.docs-intro { color: #cdd6e0; max-width: 48ch; margin-bottom: 1.6rem; }

@media (max-width: 820px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-side {
    position: static; border-right: none; border-bottom: 1px solid var(--border);
    padding: 0 0 1rem; margin-bottom: 0.5rem;
  }
  .docs-side ul { grid-auto-flow: row; }
}

/* Syntax highlighting (Pygments monokai tokens; box matches the site). */
.docs-content .codehilite { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; margin: 1rem 0; }
.docs-content .codehilite pre { margin: 0; padding: 0; background: none; border: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.docs-content .codehilite code { background: none; border: none; padding: 0; font-size: 0.86rem; line-height: 1.65; }
.docs-content .codehilite .c { color: #959077 } /* Comment */
.docs-content .codehilite .err { color: #ED007E; background-color: #1E0010 } /* Error */
.docs-content .codehilite .esc { color: #F8F8F2 } /* Escape */
.docs-content .codehilite .g { color: #F8F8F2 } /* Generic */
.docs-content .codehilite .k { color: #66D9EF } /* Keyword */
.docs-content .codehilite .l { color: #AE81FF } /* Literal */
.docs-content .codehilite .n { color: #F8F8F2 } /* Name */
.docs-content .codehilite .o { color: #FF4689 } /* Operator */
.docs-content .codehilite .x { color: #F8F8F2 } /* Other */
.docs-content .codehilite .p { color: #F8F8F2 } /* Punctuation */
.docs-content .codehilite .ch { color: #959077 } /* Comment.Hashbang */
.docs-content .codehilite .cm { color: #959077 } /* Comment.Multiline */
.docs-content .codehilite .cp { color: #959077 } /* Comment.Preproc */
.docs-content .codehilite .cpf { color: #959077 } /* Comment.PreprocFile */
.docs-content .codehilite .c1 { color: #959077 } /* Comment.Single */
.docs-content .codehilite .cs { color: #959077 } /* Comment.Special */
.docs-content .codehilite .gd { color: #FF4689 } /* Generic.Deleted */
.docs-content .codehilite .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
.docs-content .codehilite .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.docs-content .codehilite .gr { color: #F8F8F2 } /* Generic.Error */
.docs-content .codehilite .gh { color: #F8F8F2 } /* Generic.Heading */
.docs-content .codehilite .gi { color: #A6E22E } /* Generic.Inserted */
.docs-content .codehilite .go { color: #66D9EF } /* Generic.Output */
.docs-content .codehilite .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
.docs-content .codehilite .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
.docs-content .codehilite .gu { color: #959077 } /* Generic.Subheading */
.docs-content .codehilite .gt { color: #F8F8F2 } /* Generic.Traceback */
.docs-content .codehilite .kc { color: #66D9EF } /* Keyword.Constant */
.docs-content .codehilite .kd { color: #66D9EF } /* Keyword.Declaration */
.docs-content .codehilite .kn { color: #FF4689 } /* Keyword.Namespace */
.docs-content .codehilite .kp { color: #66D9EF } /* Keyword.Pseudo */
.docs-content .codehilite .kr { color: #66D9EF } /* Keyword.Reserved */
.docs-content .codehilite .kt { color: #66D9EF } /* Keyword.Type */
.docs-content .codehilite .ld { color: #E6DB74 } /* Literal.Date */
.docs-content .codehilite .m { color: #AE81FF } /* Literal.Number */
.docs-content .codehilite .s { color: #E6DB74 } /* Literal.String */
.docs-content .codehilite .na { color: #A6E22E } /* Name.Attribute */
.docs-content .codehilite .nb { color: #F8F8F2 } /* Name.Builtin */
.docs-content .codehilite .nc { color: #A6E22E } /* Name.Class */
.docs-content .codehilite .no { color: #66D9EF } /* Name.Constant */
.docs-content .codehilite .nd { color: #A6E22E } /* Name.Decorator */
.docs-content .codehilite .ni { color: #F8F8F2 } /* Name.Entity */
.docs-content .codehilite .ne { color: #A6E22E } /* Name.Exception */
.docs-content .codehilite .nf { color: #A6E22E } /* Name.Function */
.docs-content .codehilite .nl { color: #F8F8F2 } /* Name.Label */
.docs-content .codehilite .nn { color: #F8F8F2 } /* Name.Namespace */
.docs-content .codehilite .nx { color: #A6E22E } /* Name.Other */
.docs-content .codehilite .py { color: #F8F8F2 } /* Name.Property */
.docs-content .codehilite .nt { color: #FF4689 } /* Name.Tag */
.docs-content .codehilite .nv { color: #F8F8F2 } /* Name.Variable */
.docs-content .codehilite .ow { color: #FF4689 } /* Operator.Word */
.docs-content .codehilite .pm { color: #F8F8F2 } /* Punctuation.Marker */
.docs-content .codehilite .w { color: #F8F8F2 } /* Text.Whitespace */
.docs-content .codehilite .mb { color: #AE81FF } /* Literal.Number.Bin */
.docs-content .codehilite .mf { color: #AE81FF } /* Literal.Number.Float */
.docs-content .codehilite .mh { color: #AE81FF } /* Literal.Number.Hex */
.docs-content .codehilite .mi { color: #AE81FF } /* Literal.Number.Integer */
.docs-content .codehilite .mo { color: #AE81FF } /* Literal.Number.Oct */
.docs-content .codehilite .sa { color: #E6DB74 } /* Literal.String.Affix */
.docs-content .codehilite .sb { color: #E6DB74 } /* Literal.String.Backtick */
.docs-content .codehilite .sc { color: #E6DB74 } /* Literal.String.Char */
.docs-content .codehilite .dl { color: #E6DB74 } /* Literal.String.Delimiter */
.docs-content .codehilite .sd { color: #E6DB74 } /* Literal.String.Doc */
.docs-content .codehilite .s2 { color: #E6DB74 } /* Literal.String.Double */
.docs-content .codehilite .se { color: #AE81FF } /* Literal.String.Escape */
.docs-content .codehilite .sh { color: #E6DB74 } /* Literal.String.Heredoc */
.docs-content .codehilite .si { color: #E6DB74 } /* Literal.String.Interpol */
.docs-content .codehilite .sx { color: #E6DB74 } /* Literal.String.Other */
.docs-content .codehilite .sr { color: #E6DB74 } /* Literal.String.Regex */
.docs-content .codehilite .s1 { color: #E6DB74 } /* Literal.String.Single */
.docs-content .codehilite .ss { color: #E6DB74 } /* Literal.String.Symbol */
.docs-content .codehilite .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
.docs-content .codehilite .fm { color: #A6E22E } /* Name.Function.Magic */
.docs-content .codehilite .vc { color: #F8F8F2 } /* Name.Variable.Class */
.docs-content .codehilite .vg { color: #F8F8F2 } /* Name.Variable.Global */
.docs-content .codehilite .vi { color: #F8F8F2 } /* Name.Variable.Instance */
.docs-content .codehilite .vm { color: #F8F8F2 } /* Name.Variable.Magic */
.docs-content .codehilite .il { color: #AE81FF } /* Literal.Number.Integer.Long */

/* Docs search */
.docs-search {
  width: 100%; padding: 0.5rem 0.7rem; margin-bottom: 0.8rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--sans); font-size: 0.92rem;
}
.docs-search:focus { outline: none; border-color: var(--green-soft); }
.search-results { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.3rem; }
.search-results a { display: block; padding: 0.5rem 0.7rem; border-radius: 7px; }
.search-results a:hover { background: var(--bg-soft); }
.search-results .r-title { display: block; color: var(--text); font-size: 0.92rem; font-weight: 600; }
.search-results .r-snip { display: block; color: var(--dim); font-size: 0.82rem; }
.search-results .no-hit { color: var(--dim); padding: 0.5rem 0.7rem; font-size: 0.9rem; }