/* Dense API reference. The guide's 46rem/17px reading column is the wrong
   shape for a reference: the page needs a wider measure, smaller type, and
   rows that put the name, signature, kind, and source on one line. */

body.api-body {
  max-width: 86rem;
  font-size: 15px;
  line-height: 1.5;
}

.layout.has-api {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

.layout.has-api main {
  max-width: none;
}

.dx-api {
  max-width: 70rem;
}

/* The top padding matches the sidebar's, so the title clears the header rule
   and lines up with the filter box. Two classes, to outrank style.css's
   h1:first-child, which zeroes the padding. */
.dx-api > .dx-title {
  margin: 0 0 0.5rem;
  padding-top: 1rem;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.dx-warning {
  padding: 0.5rem 0.7rem;
  background: color-mix(in srgb, var(--heat) 15%, transparent);
  border-left: 3px solid var(--heat);
}

.dx-intro {
  max-width: 78ch;
  margin-bottom: 1.5rem;
  font-size: 0.93rem;
}

.dx-type,
.dx-member,
.dx-field {
  scroll-margin-top: 1rem;
}

/* Modules open a band. A type nests under its parent with a hairline down
   its left edge, so the depth reads without counting indents. */
.dx-d0 {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.dx-d0:first-of-type {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

/* A folded module is one line, so a fully folded page reads as an index. */
.dx-d0:has(> details:not([open])) {
  margin-top: 0;
  padding-top: 0.35rem;
}

.dx-d0:has(> details:not([open])) h2 {
  font-size: 1.1rem;
}

.dx-type .dx-type {
  margin: 1rem 0 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
}

/* The type's title is the summary of its details. The marker is a quiet
   [-] or [+] ahead of the title, as docs.rs does it. */
.dx-type > details > summary {
  list-style: none;
  cursor: pointer;
}

.dx-type > details > summary::-webkit-details-marker {
  display: none;
}

.dx-type > details > summary::before {
  flex: none;
  color: var(--muted);
  font:
    0.75rem ui-monospace,
    monospace;
  content: "[-]";
}

.dx-type > details:not([open]) > summary::before {
  content: "[+]";
}

.dx-type > details > summary:hover::before {
  color: var(--link-hover);
}

/* A group label inside a type: Fields, Constants, Functions, Types. */
.dx-group {
  margin: 1.1rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dx-member {
  margin-top: 0.75rem;
}

.dx-group + .dx-member {
  margin-top: 0;
}

.dx-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.dx-head h2,
.dx-head h3,
.dx-head h4 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.dx-d0 .dx-head h2 {
  font-size: 1.4rem;
}

.dx-type .dx-name {
  font-family: ui-monospace, monospace;
}

/* A member's heading is its signature. The name carries the weight and the
   link, and the rest of the declaration stays in the muted text color. The
   signature keeps the newlines zig fmt gave it. */
.dx-member h4 {
  font-weight: 400;
}

.dx-member h4 > code {
  display: block;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dx-name {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.dx-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--heat);
}

.dx-elided {
  color: var(--muted);
}

.dx-kind {
  margin-right: 0.35rem;
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 400;
}

/* The declaration of a type: its own block under the title, as docs.rs
   does, so a long parameter list has the full width to wrap in. */
.dx-decl {
  margin: 0.35rem 0 0.5rem;
  padding: 0.45rem 0.7rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dx-decl code {
  font-size: 0.82rem;
}

.dx-src {
  flex: none;
  color: var(--muted);
  font:
    0.72rem ui-monospace,
    monospace;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.7;
}

.dx-src:hover {
  color: var(--link-hover);
  opacity: 1;
}

.dx-docs {
  max-width: 78ch;
  margin: 0.25rem 0 0 2ch;
  font-size: 0.92rem;
  line-height: 1.55;
}

.dx-type > details > .dx-docs {
  margin-left: 0;
}

.dx-docs p {
  margin: 0.3rem 0;
}

.dx-docs h2,
.dx-docs h3,
.dx-docs h4,
.dx-docs h5,
.dx-docs h6 {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.95rem;
}

.dx-docs pre {
  margin: 0.5rem 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
}

/* A folded constant value. Closed by default: the declaration and type are
   the reference, and the initializer is source. */
.dx-value {
  margin: 0.1rem 0 0 2ch;
  font-size: 0.78rem;
}

.dx-value > summary,
.dx-more > summary {
  width: fit-content;
  color: var(--muted);
  cursor: pointer;
}

.dx-value > summary:hover,
.dx-more > summary:hover {
  color: var(--link-hover);
}

.dx-value pre {
  margin: 0.3rem 0 0.4rem;
  padding: 0.45rem 0.7rem;
  white-space: pre-wrap;
}

.dx-more > summary {
  font-size: 0.8rem;
}

.dx-more[open] > summary {
  margin-bottom: 0.3rem;
}

/* Fields are rows: the declaration on the left, the docs on the right. */
.dx-fields {
  border-left: 2px solid var(--rule);
}

.dx-field {
  display: grid;
  grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr);
  gap: 0.15rem 1.25rem;
  align-items: baseline;
  padding: 0.3rem 0 0.3rem 0.8rem;
}

.dx-field-sig {
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dx-field-docs {
  font-size: 0.88rem;
  line-height: 1.45;
}

.dx-field-docs p {
  margin: 0 0 0.2rem;
}

.dx-nav {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-top: 1rem;
  font-size: 0.8rem;
}

.dx-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dx-nav li {
  margin: 0.2rem 0;
}

.dx-nav a {
  color: var(--muted);
  text-decoration: none;
}

.dx-nav a:hover {
  color: var(--link-hover);
}

.dx-nav-mod > a {
  color: var(--fg);
}

/* The parts api.js adds. Without the script, none of them exist. */
.dx-toggle {
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--muted);
  font:
    0.75rem ui-monospace,
    monospace;
  background: none;
  border: 0;
  cursor: pointer;
}

.dx-toggle:hover {
  color: var(--link-hover);
}

.dx-filter {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.5rem;
  color: var(--fg);
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.dx-filter:focus {
  outline: 2px solid color-mix(in srgb, var(--heat) 60%, transparent);
  outline-offset: -1px;
}

.dx-results a {
  display: block;
  overflow: hidden;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dx-path,
.dx-none {
  color: var(--muted);
}

@media (max-width: 55.99rem) {
  .layout.has-api {
    display: block;
    padding: 0 1rem 3rem;
  }

  .dx-nav {
    position: static;
    max-height: none;
  }

  .dx-field {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0.6rem;
  }

  .dx-field-docs {
    padding-left: 2ch;
  }

  .dx-type .dx-type {
    padding-left: 0.6rem;
  }
}