/* Usage guide pages (docs/guide/), generated by tools/build_guide.py. Builds on docs.css:
   chapter navigation on the left, the page in the middle, "On this page" on the right on
   wide screens and above the page on narrower ones. Dark only, like the rest of the site. */
.ug-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas: "nav toc" "nav doc";
  max-width: 1200px; row-gap: 0;
}
.ug-nav { grid-area: nav; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; gap: 14px; }
.ug-nav p a { color: var(--ink); padding: 0; border: 0; }
.ug-nav p a[aria-current="page"] { color: var(--accent); background: none; padding: 0; border: 0; }
.ug-nav li a { font-size: 13.5px; line-height: 1.35; padding: 5px 10px; }
.ug-doc { grid-area: doc; max-width: 820px; }
.ug-toc { grid-area: toc; min-width: 0; margin-bottom: 18px; font-size: 13.5px; }

.ug-toc details { border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; background-color: rgba(2,2,5,0.6); background-image: var(--grain); }
.ug-toc summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.ug-toc ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.ug-toc ol ol { margin: 2px 0 4px 12px; }
.ug-toc a { display: block; color: var(--muted); padding: 3px 0; overflow-wrap: anywhere; }
.ug-toc a:hover { color: var(--accent); }
.ug-toc code { font-family: var(--mono); font-size: 12.5px; }

@media (min-width: 1280px) {
  .ug-layout { grid-template-columns: 230px minmax(0, 1fr) 210px; grid-template-areas: "nav doc toc"; max-width: 1400px; }
  .ug-toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; margin: 0; }
  .ug-toc details { border: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); border-radius: 0; background: none; }
}
@media (max-width: 900px) {
  .ug-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "doc" "nav"; }
  .ug-nav { max-height: none; overflow: visible; margin-top: 40px; }
}

/* Content */
.ug-doc h2, .ug-doc h3, .ug-doc h4 { scroll-margin-top: 84px; }
.ug-doc h4 { font-size: 15.5px; margin: 22px 0 6px; }
.ug-anchor { margin-left: 8px; color: var(--muted-2) !important; font-weight: 400; text-decoration: none; opacity: 0; }
.ug-doc h2:hover .ug-anchor, .ug-doc h3:hover .ug-anchor, .ug-anchor:focus { opacity: 1; }
.ug-doc hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.ug-doc ul, .ug-doc ol { grid-template-columns: minmax(0, 1fr); }
.ug-doc li, .ug-doc p, .ug-doc td, .ug-doc th { min-width: 0; overflow-wrap: break-word; }
.ug-doc li > p:first-child { margin-top: 0; }
.ug-doc li > .table, .ug-doc li > .ug-code { margin: 10px 0; }
.ug-doc p code, .ug-doc li code, .ug-doc td code { overflow-wrap: anywhere; }
.ug-doc td { min-width: 9em; }
.ug-doc td:first-child { min-width: 7em; }
.ug-doc blockquote { margin: 18px 0; padding: 4px 16px; border-left: 2px solid var(--line-strong); color: var(--ink); }
.ug-doc blockquote p:first-child { margin-top: 6px; }

/* Code blocks: scroll inside their own box, with a copy button */
.ug-code { position: relative; margin: 16px 0; }
.ug-code pre { margin: 0; padding-right: 74px; }
.ug-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 3px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--ink); background: rgba(2,2,5,0.85); border: 1px solid var(--line-strong); }
.ug-copy:hover, .ug-copy:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

@media print {
  .ug-nav, .ug-toc, .ug-copy, .doc-next, .hdr, .footer { display: none !important; }
  .ug-layout { display: block; }
}