/*
 * The documentation pages, generated into /docs/ by scripts/build-docs.mjs.
 *
 * Loaded after style.css and only by those pages, so every rule here can lean
 * on the landing page's colour tokens and its header and footer without
 * changing either. The landing page is being polished separately; nothing in
 * this file may reach it.
 *
 * The page is two columns on a wide screen — a sidebar of topics and a column
 * of prose — and one column below 60rem, where the sidebar becomes a short
 * scrollable box above the article rather than a wall of links.
 */

.docs-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

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

/* The list of topics is a <details> written open. On a wide screen the
   disclosure is meaningless, so the summary is not drawn at all and the
   element behaves like the plain nav it used to be. */

.docs-topics > summary {
  display: none;
}

.docs-sidebar {
  position: sticky;
  top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.docs-group {
  margin: 1.4rem 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.docs-group a {
  color: var(--muted);
  text-decoration: none;
}

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

.docs-sidebar li a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.docs-sidebar li a:hover {
  color: var(--ink);
}

/* The current page is the one thing the sidebar has to say clearly, so it
   gets the accent rule as well as the weight — colour alone is not enough. */
.docs-sidebar a[aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
  border-left-color: var(--accent);
}

.docs-group a[aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
}

/* -------------------------------------------------------------- search */

/*
 * The search field at the top of the sidebar, built by docs.js and therefore
 * absent from a page whose JavaScript never ran. It is set in the sidebar's
 * own face — Source Sans 3, the same size as the links below it — because it
 * is part of that column rather than a widget dropped into it.
 */

.docs-search {
  margin: 0 0 1.4rem;
}

.docs-search-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.docs-search-field {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.docs-search-field::placeholder {
  color: var(--muted);
}

/* The count is small and quiet, and it is empty until there is something to
   count — an empty paragraph must not push the list down a line. */
.docs-search-count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* It is also the live region, so it is clipped rather than hidden while it is
   empty: `display: none` takes it out of the accessibility tree, and a region
   that enters the tree with its first content is one several screen readers
   never announce. Clipped, it takes no room and stays where it was. */
.docs-search-count:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.docs-search-count:not(:empty) {
  margin: 0.4rem 0 0.2rem;
}

.docs-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}

.docs-search-results li a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
}

.docs-search-results li a:hover {
  border-left-color: var(--accent);
}

.docs-search-title {
  display: block;
}

/* The heading under the page name is the line that says which part of the
   page the hit is in, so it is the quieter of the two, not the smaller one
   of two equals. */
.docs-search-heading {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

.docs-search-results li a:hover .docs-search-heading {
  color: var(--ink);
}

/* ---------------------------------------------------------------- body */

/* The column holds the wide things — a table, a slab of code — and the prose
   inside it is capped narrower, at about 75 characters of Source Sans 3. A
   documentation line that runs the full width of the column is one the eye
   loses its place in on the way back. */

.docs-body {
  max-width: 52rem;
}

.docs-eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.docs-body h1 {
  max-width: 22ch;
  margin-bottom: 1.6rem;
}

.docs-body h2 {
  margin: 2.4rem 0 0.9rem;
  max-width: 30ch;
  scroll-margin-top: 1.5rem;
}

.docs-body h3 {
  margin: 1.8rem 0 0.5rem;
  font-size: 1.0625rem;
  scroll-margin-top: 1.5rem;
}

.docs-lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 34rem;
}

/* Visible on hover and to a keyboard, never in a screenshot or in print. */
.anchor {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

h2:hover > .anchor,
h3:hover > .anchor,
.anchor:focus-visible {
  opacity: 1;
}

.docs-body p,
.docs-body li {
  max-width: 33rem;
}

.docs-body ul,
.docs-body ol {
  padding-left: 1.2rem;
}

.docs-body li {
  margin-bottom: 0.35rem;
}

.docs-body blockquote {
  margin: 1.2rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.docs-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.docs-body th,
.docs-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.docs-body th {
  font-weight: 650;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A wide table must scroll inside its wrapper rather than push the page
   sideways; the wrapper is focusable so a keyboard can scroll it. */
.docs-body .table-wrap {
  overflow-x: auto;
}

.docs-body .table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.docs-body details {
  margin: 1.2rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
}

.docs-body summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------- on this page */

/* A ruled column, not a card. It is a list of the headings a reader is about
   to scroll past; a bordered box gives it the weight of a callout and puts a
   second frame on a page that already has the sidebar. The rule is the same
   one the sidebar hangs its links off, so the two read as one system. */
.docs-toc {
  font-family: var(--sans);
  font-size: 0.9375rem;
  margin: 0 0 2.25rem;
  max-width: 26rem;
}

.docs-toc p {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.docs-toc li a {
  color: var(--muted);
  text-decoration: none;
  display: block;
  margin-left: -1px;
  padding: 0.16rem 0 0.16rem 0.85rem;
  border-left: 2px solid transparent;
}

.docs-toc li a:hover {
  color: var(--ink);
}

/* The heading the reader is inside, marked by docs.js. It carries the accent
   rule as well as the ink, because colour on its own is not a signal. */
.docs-toc a[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent);
}

/* ------------------------------------------------------- code and copy */

.docs-body .slab {
  margin: 1.2rem 0;
  position: relative;
}

.docs-body .slab pre {
  padding-right: 5.5rem;
}

/* Added by docs.js, so a browser without JavaScript never shows a button
   that cannot do anything. */
.copy {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  color: var(--slab-ink);
  background: transparent;
  border: 1px solid var(--slab-rule);
  border-radius: var(--radius);
  cursor: pointer;
}

.copy:hover {
  color: var(--slab-key);
  border-color: var(--slab-key);
}

.copy[data-done="yes"] {
  color: var(--slab-key);
  border-color: var(--slab-key);
}

/* ---------------------------------------------------- edit, prev, next */

.docs-edit {
  margin-top: 2.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--muted);
}

.docs-edit a {
  color: var(--muted);
}

.docs-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}

.docs-pager a {
  display: block;
  flex: 1 1 12rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
}

.docs-pager a:hover {
  border-color: var(--accent);
}

.docs-pager a span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

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

/* --------------------------------------------------------- index page */

.docs-index {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}

.docs-index h2 {
  margin: 0 0 0.3rem;
  font-size: 1.25rem;
}

.docs-index section > p {
  margin: 0 0 0.8rem;
  color: var(--muted);
}

.docs-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.docs-index li {
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.6rem;
  max-width: 44rem;
}

.docs-index li a {
  font-weight: 650;
  text-decoration: none;
}

.docs-index li a:hover {
  text-decoration: underline;
}

.docs-index li span {
  display: block;
  color: var(--muted);
  font-size: 0.9375rem;
  font-family: var(--sans);
  line-height: 1.5;
}

/* -------------------------------------------------------- standalone */

/*
 * The comparison pages: the same prose column, without the sidebar the
 * documentation has. They are wider than a documentation page because the
 * table is six columns of other people's products, and narrower than the
 * page, because it is still prose.
 */

.docs-standalone {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* The prose keeps the 40rem measure it has everywhere, from the rules on
   `.docs-body p` and `.docs-body li`; the cap comes off the column itself so
   the one table on the page can use the full page width. It is six columns of
   other people's products and it is the point of the page, not a detail in
   it. */
.docs-standalone .docs-body {
  max-width: none;
}

.docs-standalone .docs-body .table-wrap {
  width: 100%;
}

.docs-standalone .docs-body > table td,
.docs-standalone .docs-body > table th {
  min-width: 8.5rem;
  padding-right: 1rem;
}

.docs-standalone .docs-body > table td:first-child,
.docs-standalone .docs-body > table th:first-child {
  min-width: 7rem;
}

/* ------------------------------------------------------------ narrow */

@media (max-width: 60rem) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.5rem;
  }

  /* Closed by docs.js, so the article starts at the top of the screen rather
     than below a scrolling box of twenty-eight links. Open, the list is as
     long as it needs to be: a box that scrolls inside a page that scrolls is
     two scrollbars for one list. */
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
  }

  /* The sidebar is a bordered box here and the search sits inside it, above
     the topic list — so on a phone the field is directly under the header,
     which is where a reader who came to search will look for it. */
  .docs-search {
    margin: 0;
    padding: 1.1rem;
    border-bottom: 1px solid var(--rule);
  }

  .docs-topics {
    padding: 0 1.1rem;
  }

  .docs-topics > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 -1.1rem;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
  }

  .docs-topics > summary::-webkit-details-marker {
    display: none;
  }

  /* A chevron drawn from a border, so there is no glyph to go missing and no
     icon font to fetch. */
  .docs-topics > summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-0.15em) rotate(45deg);
  }

  .docs-topics[open] > summary::after {
    transform: translateY(0.1em) rotate(-135deg);
  }

  .docs-topics[open] {
    padding-bottom: 1rem;
  }

  .docs-toc {
    max-width: none;
  }

  .docs-body h1 {
    max-width: none;
  }
}

/* ------------------------------------------------- the theme playground */

/* Written into /docs/languages-and-branding/ by scripts/build-docs.mjs and made
   visible by site/playground.js once it has mounted a panel. Everything the
   playground needs is here rather than in a style attribute: the page's
   Content-Security-Policy allows inline style only because the panel itself
   needs it, and the page has never had any. */

.playground {
  margin: 2rem 0;
  padding: 1.4rem 1.4rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.playground > h3 {
  margin-top: 0;
}

.pg-grid {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 1.2rem 0;
}

.pg-controls {
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.pg-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
}

.pg-field label {
  flex: 1;
  color: var(--muted);
}

.pg-field input,
.pg-field select,
.pg-field button {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.25rem 0.35rem;
  max-width: 9rem;
}

.pg-field input[type="color"] {
  width: 2.75rem;
  height: 1.9rem;
  padding: 0.15rem;
  cursor: pointer;
}

.pg-field input[type="range"] {
  padding: 0;
  border: 0;
  width: 6rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.pg-field output {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 3rem;
}

.pg-field button {
  cursor: pointer;
  padding: 0.35rem 0.7rem;
}

.pg-field button:hover {
  border-color: var(--ink);
}

.pg-field :focus-visible {
  outline: 2px solid var(--accent-mark);
  outline-offset: 2px;
}

/* The panel is mounted in here with its fixed positioning taken off, so the
   stage is what the corner would be. `data-pos` is copied onto it by
   playground.js: the panel's own stylesheet handles left and right, and this
   handles top and bottom, which a box in an article has to decide for itself. */
.pg-stage {
  display: flex;
  align-items: flex-end;
  min-height: 26rem;
  padding: 1rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--rule-soft);
  overflow: hidden;
}

.pg-stage[data-pos^="top"] {
  align-items: flex-start;
}

.pg-stage > [data-bugbottle="ui"] {
  flex: 1;
}

@media (max-width: 48rem) {
  .pg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-stage {
    min-height: 0;
  }
}

/* On a phone the panel is wider than the column it is standing in — it sizes
   itself against the viewport, which is the right answer in an application and
   too wide for a box inside an article. Zoomed rather than scrolled: a
   scrollable box inside an inert stage is one nobody can reach with a
   keyboard. */
@media (max-width: 30rem) {
  .pg-stage {
    padding: 0.5rem;
  }

  .pg-stage > [data-bugbottle="ui"] {
    zoom: 0.72;
  }
}

@media print {
  .docs-sidebar,
  .docs-toc,
  .docs-pager,
  .playground,
  .copy {
    display: none;
  }
}