/* Yggdryl: black, white, and one red.
 *
 * Material's black primary already gives the header and sidebar their weight;
 * everything here is the accent, the code surface, and the small amount of
 * shaping that makes a technical page easy to scan.
 */

:root {
  --yggdryl-red: #d81e28;
  --yggdryl-red-bright: #ff4a52;
  --md-accent-fg-color: var(--yggdryl-red);
  --md-accent-fg-color--transparent: rgba(216, 30, 40, 0.1);
  --md-typeset-a-color: var(--yggdryl-red);
}

/* Dark mode leans on a brighter red so it survives the darker ground. */
[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-accent-fg-color: var(--yggdryl-red-bright);
  --md-accent-fg-color--transparent: rgba(255, 74, 82, 0.14);
  --md-typeset-a-color: var(--yggdryl-red-bright);
  --md-default-bg-color: #0d0f12;
  --md-code-bg-color: #15181d;
  --md-code-fg-color: #e6e9ef;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-code-bg-color: #f5f6f8;
}

/* The header keeps a hairline of red, which is the only chrome that needs it. */
.md-header {
  border-bottom: 2px solid var(--yggdryl-red);
  box-shadow: none;
}

.md-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Headings: tighter tracking, and a red rule under the page title. */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--yggdryl-red);
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
}

.md-typeset h3 {
  font-weight: 600;
}

/* The lead sentence under an H1 carries the page, so it reads a size up. */
.md-typeset h1 + p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
}

/* Code: a defined surface rather than a floating block. */
.md-typeset pre > code {
  border-radius: 0.3rem;
}

.md-typeset .highlight {
  border-radius: 0.3rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset code {
  border-radius: 0.2rem;
  font-size: 0.85em;
}

/* Language tabs read as a real switch, with the active one marked in red. */
.md-typeset .tabbed-set > input:checked + label {
  color: var(--md-accent-fg-color);
  border-bottom-color: var(--md-accent-fg-color);
  font-weight: 650;
}

.md-typeset .tabbed-labels > label {
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 120ms ease;
}

.md-typeset .tabbed-content {
  padding-top: 0.4rem;
}

/* Tables: header rules instead of fills, which keeps the page quiet. */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: transparent;
  border-bottom: 2px solid var(--yggdryl-red);
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* Admonitions: a red bar for notes, since the palette has one colour to spend. */
.md-typeset .admonition,
.md-typeset details {
  border-width: 0 0 0 3px;
  border-radius: 0.3rem;
  box-shadow: none;
  border-left-color: var(--md-accent-fg-color);
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--md-accent-fg-color);
}

/* Navigation: the active page is the only red item in the sidebar. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

.md-nav__title {
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* Links underline on hover rather than by default, so prose stays readable. */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.md-typeset a:hover {
  border-bottom-color: var(--md-accent-fg-color);
}

/* The search field picks up the accent when focused. */
.md-search__form:focus-within {
  box-shadow: 0 0 0 2px var(--md-accent-fg-color);
}

/* Footer: a thin red rule to close the page. */
.md-footer-meta {
  border-top: 2px solid var(--yggdryl-red);
}

/* The playground: docs/assets/playground.js renders the generated manifest into
 * these containers. Everything here is Material's own custom properties, so the
 * light and dark schemes both work without a second palette.
 */
.ygg-pg {
  margin: 1em 0 1.6em;
}

.ygg-pg__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.8em;
}

.ygg-pg__select,
.ygg-pg__input,
.ygg-pg__value,
.ygg-pg__step {
  font: inherit;
  font-size: 0.75rem;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  padding: 0.3em 0.6em;
}

.ygg-pg__value,
.ygg-pg__step {
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.ygg-pg__step[disabled] {
  cursor: default;
  color: var(--md-default-fg-color--lighter);
}

.ygg-pg__value[aria-pressed="true"] {
  border-color: var(--md-accent-fg-color);
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  font-weight: 650;
}

.ygg-pg__select:focus-visible,
.ygg-pg__input:focus-visible,
.ygg-pg__value:focus-visible,
.ygg-pg__step:focus-visible,
.ygg-pg .ygg-pg__calls summary:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 1px;
}

/* Material styles every list in the content, so the chip row has to outrank
 * `.md-typeset ul` to be a flex row instead of a bulleted stack. */
.md-typeset .ygg-pg__values:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0 0 0.8em;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset .ygg-pg__values li {
  margin: 0;
}

.ygg-pg__tag {
  margin-left: 0.5em;
  color: var(--md-default-fg-color--light);
  font-size: 0.9em;
}

.ygg-pg__counter {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* The tables carry a class, so Material's own table rules do not reach them. */
.ygg-pg table {
  border-collapse: collapse;
  font-size: 0.75rem;
  margin: 0 0 0.8em;
}

.ygg-pg table th,
.ygg-pg table td {
  text-align: left;
  vertical-align: top;
  padding: 0.35em 0.8em 0.35em 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.ygg-pg__detail th {
  width: 10em;
  color: var(--md-default-fg-color--light);
  font-weight: 500;
}

/* A wide row scrolls inside the table rather than widening the page. */
.ygg-pg__widths {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.ygg-pg__widths thead th {
  border-bottom: 2px solid var(--yggdryl-red);
  font-weight: 650;
}

.ygg-pg__code {
  overflow-wrap: anywhere;
}

.ygg-pg__call {
  margin: 0 0 0.8em;
  padding: 0.5em 0.7em;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ygg-pg__counter,
.ygg-pg__hit {
  font-size: 0.75rem;
}

.ygg-pg__after h3 {
  margin-top: 1.2em;
  font-size: 0.85rem;
}

.ygg-pg__lookup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.8em;
}

.ygg-pg__error,
.ygg-pg__miss {
  padding: 0.5em 0.8em;
  font-size: 0.75rem;
  border-left: 3px solid var(--md-accent-fg-color);
  background-color: var(--md-accent-fg-color--transparent);
  border-radius: 0.3rem;
}