/* The documentation page only.  Everything shared with the homepage is in site.css. */
.docs-band { padding-block: 20px 24px; background-position: right -150px top -150px, 0 0;
  h1 { font: 200 clamp(38px, 4.6vw, 58px)/1.05 var(--heading); letter-spacing: -.025em; color: #fff }
}

/* The outline stays put down the left side while the page scrolls, and scrolls on its own when it is too long. */
/* The left edge lines up with the header's, but the page runs wider than the header to the right on screens that
   have the room.  Text keeps its comfortable measure; examples and wide figures use the extra width. */
.docs { --left: calc((100vw - var(--wrap)) / 2); width: min(1500px, 100vw - var(--left) - 48px); margin-inline: var(--left) 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 44px 96px }
.outline { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding-block: 20px 40px; margin-top: -20px; font-size: 14px; line-height: 1.35;
  ul { list-style: none; margin: 0; padding: 0 }
  ul ul { padding-left: 13px; margin-bottom: 4px }
  ul ul ul { font-size: 13px }
  a { display: block; padding: 4px 0 4px 11px; border-left: 2px solid transparent; color: var(--muted) }
  > ul > li > a { margin-top: 12px; font: 600 16px var(--heading); color: var(--ink) }
  a:hover { color: var(--link); text-decoration: none }
  a[aria-current] { border-left-color: var(--blue); color: var(--link) }
}

.prose { min-width: 0; font-size: 16px; line-height: 1.7;
  h2, h3, h4 { scroll-margin-top: 20px }
  h2 { font-size: 32px; margin: 64px 0 14px; padding-top: 10px;
    &::before { content: '// '; color: #8fb9ea }
    &:first-child { margin-top: 0 }
  }
  h3 { font-size: 23px; margin: 44px 0 10px }
  h4 { font: 600 18px var(--heading); margin: 30px 0 8px }
  p, ul, ol { margin: 0 0 16px; max-width: 800px }
  ul, ol { padding-left: 24px }
  li { margin-bottom: 6px }
  li > ul, li > ol { margin: 6px 0 0 }
  :not(pre) > code { font-size: .86em; background: var(--wash); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px }
  hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 }
  table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 16px }
  th, td { border: 1px solid var(--line); padding: 6px 12px; text-align: left }
  th { background: var(--wash) }

  /* A code block before it becomes an editor, and one that never does because scripts are off.  It is sized like the
     editor that replaces it, so the page doesn't jump as that happens. */
  pre[data-lang] { margin: 0 0 22px; padding: 14px 16px 14px 46px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); font-size: 13px; line-height: 1.4; overflow-x: auto; tab-size: 2 }
}
.bench-wide { overflow-x: auto; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 5px;
  img { display: block; width: max(100%, 900px); height: auto; max-width: none }
}

/* An example: source on the left, its live result on the right, divided by a handle that can be dragged. */
play-ground { display: flex; align-items: stretch; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); overflow: hidden;
  code-editor-2, .static-code { display: block; min-width: 0; font-size: 13px }
  .cm-editor { outline: none !important; font-size: 13px }
  .cm-editor, .cm-gutters { background: var(--card) }
  .cm-gutters { color: var(--gutter); border: none }
  .cm-scroller { font-family: var(--mono) }
  .cm-activeLine, .cm-activeLineGutter { background: var(--wash) }
  iframe { display: block; border: 0; background: var(--card) }
  flex-resizer:hover, flex-resizer:active { background: color-mix(in srgb, var(--blue) 35%, transparent) }
}

/* The button that opens the outline, in the header.  Only phones show it; see the end of this file. */
#outline-toggle { display: none; place-items: center; width: 36px; height: 36px; margin: -6px -2px -6px -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: #c9d4e0;
  svg { width: 22px; height: 22px }
  &:hover, &[aria-expanded=true] { color: #fff; background: #ffffff1a }
}

@media (max-width: 1100px) {
  .docs { width: var(--wrap); margin-inline: auto; grid-template-columns: 200px minmax(0, 1fr); gap: 36px }
}
@media (max-width: 767px) {
  .docs-band { padding-block: 14px 18px }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 24px 60px }

  /* The outline becomes a list at the top of the page rather than a column. */
  .outline { position: static; max-height: 260px; margin: 0 0 32px; padding: 6px 12px 12px; border: 1px solid var(--line); border-radius: 5px }
  .prose h2 { font-size: 27px; margin-top: 48px }
  play-ground { flex-direction: column }
}

/* On a phone the header follows the reader down the page, and its button drops the outline over the text from
   wherever they are, since the list at the top is a long way back.  The bar is shorter than it is on the desktop so
   it costs little of a small screen.  documentation.js opens and closes the outline, so with scripts off (or a browser
   too old for this query) none of this applies and the outline stays the list at the top of the page. */
@media (max-width: 767px) and (scripting: enabled) {
  :root { --header: 46px }
  .site-header { position: sticky; top: 0; z-index: 300;
    .wrap { flex-wrap: nowrap; gap: 12px; min-height: var(--header) }
    .brand { margin-right: auto; font-size: 21px;
      svg { width: 22px; height: 22px }
    }

    /* The link to the page being read gives its room to the button. */
    nav a[aria-current=page] { display: none }
  }
  .skip-link { z-index: 301 }
  #outline-toggle { display: grid }
  .outline { display: none; position: fixed; inset: var(--header) 0 auto; z-index: 299; max-height: calc(100dvh - var(--header)); margin: 0; padding: 0 20px 24px; border: 0; border-bottom: var(--border); border-radius: 0; background: var(--page); box-shadow: 0 12px 28px #0005; overscroll-behavior: contain; font-size: 15px;
    &.open { display: block }
    a { padding-block: 7px }
  }

  /* A heading jumped to stops below the bar, not under it. */
  .prose :is(h2, h3, h4) { scroll-margin-top: calc(var(--header) + 14px) }
}