/* VHRD brand look for the docs site: colours from vhrd_brand web/tokens.css (palette 0.5.0), IBM Plex type.
   Red is the accent (buttons, active navigation, hover), text stays black; dark mode uses the brand dark palette. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500;600&display=swap");

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #c8141c;
  --md-primary-fg-color--light: #e0484e;
  --md-primary-fg-color--dark: #9e1016;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: #c8141c;
  --md-accent-fg-color--transparent: #c8141c1a;
  --md-accent-bg-color: #ffffff;
  --md-default-fg-color: #1a1a1a;
  --md-default-bg-color: #ffffff;
  --md-code-bg-color: #f6f6f6;
  --md-typeset-a-color: #1a1a1a;
  --md-footer-bg-color: #1a1a1a;
  --md-footer-bg-color--dark: #0f0f10;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #f24c44;
  --md-primary-fg-color--light: #f6766f;
  --md-primary-fg-color--dark: #c8141c;
  --md-primary-bg-color: #0f0f10;
  --md-primary-bg-color--light: #0f0f10b3;
  --md-accent-fg-color: #f24c44;
  --md-accent-fg-color--transparent: #f24c441a;
  --md-accent-bg-color: #0f0f10;
  --md-default-fg-color: #ececec;
  --md-default-bg-color: #0f0f10;
  --md-code-bg-color: #161617;
  --md-typeset-a-color: #ececec;
  --md-footer-bg-color: #161617;
  --md-footer-bg-color--dark: #0f0f10;
}

/* Serif headings, as on the brand web pages */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 500;
  color: var(--md-default-fg-color);
}

/* Logo in the header and the mobile nav drawer: the small W icon, graphite wire on dark */
[data-md-color-scheme="slate"] .md-logo img {
  content: url("../assets/wire_weaver_icon_small-dark.svg");
}

/* Links as on the brand web pages: text colour, a quiet underline that turns red on hover */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--md-default-fg-color--lighter);
  text-underline-offset: 3px;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--md-accent-fg-color);
  text-decoration-color: var(--md-accent-fg-color);
}
.md-typeset a.md-button {
  text-decoration: none;
}

/* A heading kept for screen readers and search, not shown: the home page lets the logo's wordmark be the title */
.md-typeset .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reading level badge above a page title (overrides/partials/level.html, docs/levels.md): graphite for Basic, red for
   Advanced, solid graphite for Nomicon; the signal bars of the icon fill up with the level */
.md-typeset .ww-level {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 0.6rem;
  padding: 0.15em 0.65em 0.15em 0.5em;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
}
.md-typeset .ww-level + h1 {
  margin-top: 0;
}
/* A level badge heading a part of a page that spans levels (docs/articles/): the badge, then the part's h2 */
.md-typeset .ww-level-part {
  margin: 2.5em 0 0;
}
.md-typeset .ww-level-part p,
.md-typeset .ww-level-part .ww-level {
  margin: 0;
}
.md-typeset .ww-level-part + h2 {
  margin-top: 0.4em;
}
.md-typeset .ww-level__icon {
  width: 1.05em;
  height: 0.9em;
  fill: currentColor;
}
.md-typeset .ww-level__icon .ww-level__off {
  opacity: 0.25;
}
.md-typeset .ww-level:hover,
.md-typeset .ww-level:focus {
  text-decoration: none;
}

[data-md-color-scheme="default"] .md-typeset .ww-level--basic {
  color: #4a4a4c;
  border-color: #4a4a4c59;
}
[data-md-color-scheme="default"] .md-typeset .ww-level--advanced {
  color: #c8141c;
  border-color: #c8141c66;
  background-color: #c8141c0d;
}
[data-md-color-scheme="default"] .md-typeset .ww-level--nomicon {
  color: #ffffff;
  border-color: #4a4a4c;
  background-color: #4a4a4c;
}
[data-md-color-scheme="default"] .md-typeset .ww-level--nomicon .ww-level__icon {
  color: #f6766f;
}

[data-md-color-scheme="slate"] .md-typeset .ww-level--basic {
  color: #c4c4c6;
  border-color: #c4c4c659;
}
[data-md-color-scheme="slate"] .md-typeset .ww-level--advanced {
  color: #f24c44;
  border-color: #f24c4466;
  background-color: #f24c4414;
}
[data-md-color-scheme="slate"] .md-typeset .ww-level--nomicon {
  color: #ececec;
  border-color: #4a4a4c;
  background-color: #4a4a4c;
}
[data-md-color-scheme="slate"] .md-typeset .ww-level--nomicon .ww-level__icon {
  color: #f24c44;
}
.md-typeset .ww-level:hover {
  border-color: var(--md-accent-fg-color);
}

/* The three levels side by side on docs/levels.md */
@media screen and (min-width: 60em) {
  .md-typeset .grid.ww-level-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.md-typeset .ww-level-cards .ww-level {
  margin-bottom: 0.2rem;
}

/* docs/features_today.md (generated by tests/features_page): a level badge above each group of features, a pill
   on features that work only in part, the tracker links of an area in small type */
.md-typeset .ww-features__level {
  margin: 1.2em 0 0.2em;
}
.md-typeset .ww-features__level .ww-level {
  margin: 0;
}
.md-typeset .ww-features__level + ul {
  margin-top: 0.4em;
}
.md-typeset .ww-status {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.5em;
  border: 1px dashed var(--md-default-fg-color--light);
  border-radius: 999px;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  line-height: 1.5;
  white-space: nowrap;
}
.md-typeset .ww-features__more {
  margin-top: 1em;
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
}

/* Bit layouts, the `bits` fence (docs_ext/ww_docs_ext/bits.py, docs/levels.md "For writers"): every bit in its byte's
   cell, coloured by the kind of its field, a bar where a field starts, each byte's hex below; then a key and a table
   of the fields with their bit offsets. One colour pair per kind, for each scheme. */
[data-md-color-scheme="default"] .md-typeset .ww-bits {
  --ww-head-bg: #dbe7f6; --ww-head-fg: #2f5f9e;
  --ww-run-bg: #ece0f5; --ww-run-fg: #7a3fa0;
  --ww-value-bg: #dcefe0; --ww-value-fg: #2e7d43;
  --ww-delta-bg: #fbecd2; --ww-delta-fg: #96570a;
  --ww-width-bg: #d7efef; --ww-width-fg: #1f7070;
  --ww-pad-bg: #efefef; --ww-pad-fg: #7a7a7a;
}
[data-md-color-scheme="slate"] .md-typeset .ww-bits {
  --ww-head-bg: #1d2c42; --ww-head-fg: #9cc0ee;
  --ww-run-bg: #2e2240; --ww-run-fg: #cdaeea;
  --ww-value-bg: #1c3324; --ww-value-fg: #8fd6a1;
  --ww-delta-bg: #3a2c14; --ww-delta-fg: #ecbd6a;
  --ww-width-bg: #163434; --ww-width-fg: #86d6d6;
  --ww-pad-bg: #232325; --ww-pad-fg: #8f8f8f;
}
.md-typeset .ww-bits {
  margin: 1em 0;
}
.md-typeset .ww-bit--head { --ww-bg: var(--ww-head-bg); --ww-fg: var(--ww-head-fg); }
.md-typeset .ww-bit--run { --ww-bg: var(--ww-run-bg); --ww-fg: var(--ww-run-fg); }
.md-typeset .ww-bit--value { --ww-bg: var(--ww-value-bg); --ww-fg: var(--ww-value-fg); }
.md-typeset .ww-bit--delta { --ww-bg: var(--ww-delta-bg); --ww-fg: var(--ww-delta-fg); }
.md-typeset .ww-bit--width { --ww-bg: var(--ww-width-bg); --ww-fg: var(--ww-width-fg); }
.md-typeset .ww-bit--pad,
.md-typeset .ww-bit--none { --ww-bg: var(--ww-pad-bg); --ww-fg: var(--ww-pad-fg); }
.md-typeset .ww-bits__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-family: var(--md-code-font-family);
  font-size: 0.75rem;
}
.md-typeset .ww-bits__byte {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 3px;
  overflow: hidden;
}
.md-typeset .ww-bits__cells {
  display: flex;
}
.md-typeset .ww-bit {
  width: 1.15em;
  line-height: 1.8;
  text-align: center;
  background: var(--ww-bg);
  color: var(--ww-fg);
}
.md-typeset .ww-bit--start {
  box-shadow: inset 2px 0 0 var(--ww-fg);
}
.md-typeset .ww-bit--none {
  opacity: 0.5;
}
.md-typeset .ww-bits__hex {
  border-top: 1px solid var(--md-default-fg-color--lighter);
  text-align: center;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}
.md-typeset .ww-bits__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}
.md-typeset .ww-bits__key .ww-bit {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  border-radius: 2px;
  vertical-align: -0.1em;
  box-shadow: inset 0 0 0 1px var(--ww-fg);
}
.md-typeset table.ww-bits__fields {
  border-collapse: collapse;
  font-size: 0.75rem;
}
.md-typeset table.ww-bits__fields th,
.md-typeset table.ww-bits__fields td {
  padding: 0.15em 0.8em 0.15em 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  text-align: left;
  vertical-align: top;
}
.md-typeset table.ww-bits__fields th {
  font-weight: 600;
}
.md-typeset table.ww-bits__fields td.ww-bits__at {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--md-default-fg-color--light);
}
.md-typeset .ww-bits__chip {
  padding: 0 0.3em;
  border-radius: 3px;
  font-family: var(--md-code-font-family);
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--ww-bg);
  color: var(--ww-fg);
}