/* Amber, from the wooden mannequin in the logo and the hero shot.
   Hover is the same amber one step along - not a second hue, which is what
   Material's own accent palettes give and what reads as the colour changing
   rather than the button lighting up. */
/* Two attributes plus the tag, because the theme pairs them: slate with a
   black primary has a rule of its own setting the link colour, and anything
   weaker than it is simply ignored. */
body[data-md-color-scheme="slate"][data-md-color-primary] {
  --bx-btn: #b7813a;
  --bx-btn-hover: #d9a75e;
  --bx-btn-label: #1a1a1a;
  --md-typeset-a-color: #e0a45e;
  --md-accent-fg-color: #ffd19b;
  --md-accent-fg-color--transparent: #ffd19b1a;
  --md-accent-bg-color: #1a1a1a;
}
body[data-md-color-scheme="default"][data-md-color-primary] {
  --bx-btn: #c08e42;
  --bx-btn-hover: #d9a75e;
  /* White here, not the dark label the slate theme uses: on the white page
     the filled button is the block of colour, and a white label is what
     tells it apart from the outlined one beside it. */
  --bx-btn-label: #ffffff;
  --md-typeset-a-color: #9a6210;
  --md-accent-fg-color: #6b430b;
  --md-accent-fg-color--transparent: #6b430b1a;
  /* Not the theme's near-black: at this size solid black on white is harsh
     to read for long. Dark slate keeps the contrast well past the standard. */
  --md-default-fg-color: #2f353b;
  --md-default-fg-color--light: #5b636b;
}
/* Buttons carry three states and both themes move the same way: hover
   lights the button up, press pushes it into the deep brown. Only the
   starting amber differs, one step deeper on the white page so the button
   still reads as a block of colour there. */
.md-typeset .md-button--primary,
.md-typeset .md-button:not(.md-button--primary) {
  transition: background-color 125ms, border-color 125ms, color 125ms;
}
.md-typeset .md-button--primary {
  background-color: var(--bx-btn);
  border-color: var(--bx-btn);
  color: var(--bx-btn-label);
}
.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--bx-btn);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus {
  background-color: var(--bx-btn-hover);
  border-color: var(--bx-btn-hover);
  color: var(--bx-btn-label);
}
.md-typeset .md-button--primary:active,
.md-typeset .md-button:not(.md-button--primary):active {
  background-color: #8f6329;
  border-color: #8f6329;
  color: #ffffff;
}

/* One size runs through the whole site - menus, page list, table of
   contents and body copy all read at the same weight, the way a wiki does.
   Material ships the chrome a size larger than the text, which is what made
   the pages feel like separate pieces bolted together. */
.md-tabs__link,
.md-nav,
.md-nav__title,
.md-footer__title,
.md-footer__direction {
  font-size: 0.6rem;
}
.md-typeset code,
.md-typeset pre > code {
  font-size: 0.55rem;
}

/* The header, sized for the text under it. Material builds it for 16px body
   copy - a 2.4rem title row and a 2.4rem tab row, 104px of chrome above a
   page set at 12px. Every piece here is one measurement of that: the row
   heights, the padding inside the buttons, and the tab link's own offset,
   which has to be re-centred by hand once its bar is shorter. */
.md-header__title {
  height: 1.75rem;
  line-height: 1.75rem;
}
.md-header__topic {
  font-size: 0.8rem;
}
.md-header__button {
  margin: 0.1rem;
}
/* The tallest thing in the top row, and so the one that decides its height:
   the logo button is the image plus its own padding. */
.md-header__button.md-logo {
  padding: 0.25rem;
  margin: 0.1rem;
}
.md-search {
  padding: 0.1rem 0;
}
.md-tabs {
  height: 1.6rem;
}
.md-tabs__link {
  margin-top: 0.4rem;
}

/* Search box and the theme switch, brought down to the scale the rest of
   the site reads at. Material sizes them for 16px body copy and they tower
   over 12px text. */
.md-search__form {
  height: 1.4rem;
}
.md-search__input {
  font-size: 0.62rem;
  height: 1.4rem;
}
.md-search__icon svg,
.md-header__button svg {
  width: 0.9rem;
  height: 0.9rem;
}
.md-header__button {
  padding: 0.3rem;
}

/* Pixel-art logo stays crisp at any size */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  image-rendering: pixelated;
  height: 1.15rem;
  width: 1.15rem;
}

/* Sized off a wiki that reads well at a glance (the MythicMobs one):
   small text, ordinary leading, and lines left to run the width of the
   column. Bigger text in a narrow column turns every paragraph into a tall
   block, which is what made this page feel heavy. */
.md-typeset {
  font-size: 0.6rem;
  line-height: 1.62;
}

/* Bold marks a word, it does not shout */
.md-typeset strong,
.md-typeset b {
  font-weight: 600;
}

/* Room between the items of a list, which are read one at a time */
.md-typeset li + li {
  margin-top: 0.35em;
}
/* One family down the page, weight doing the work - the shape the wikis
   that read easily all share. Material's own h1 is grey and oversized next
   to body text this small, so both are brought in. */
.md-typeset h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
  margin-bottom: 0.8rem;
}
/* Spacing measured against the text, not the theme's default rhythm: at
   12px body copy, Material's gaps run to nearly three blank lines and the
   page falls apart into islands. A heading sits close to what it names. */
.md-typeset h2 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 1.1rem 0 0.4rem;
}
.md-typeset h3 {
  font-size: 0.7rem;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
}
/* Lines of text sit closer to each other than to the heading above them,
   so a heading and its paragraphs read as one block. The space that
   separates sections is the one above the heading, nowhere else. */
.md-typeset p {
  margin: 0.2rem 0;
}
.md-typeset p + p,
.md-typeset ul + p,
.md-typeset p + ul {
  margin-top: 0.2rem;
}

/* Tables carry key names and short answers - one step down and tighter
   keeps a row on one line for longer. */
.md-typeset table:not([class]) {
  font-size: 0.6rem;
  line-height: 1.55;
}
.md-typeset table:not([class]) th {
  font-weight: 600;
}

/* Text over the page background, at the contrast the body copy needs */
[data-md-color-scheme="slate"] {
  --md-default-fg-color: hsla(var(--md-hue), 15%, 95%, 0.92);
}

/* Feature cards on the landing page */
.bx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0;
}
.bx-cards > div {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  background: var(--md-code-bg-color);
}
.bx-cards h3 {
  margin: 0 0 0.25rem 0;
  font-size: 0.68rem;
  font-weight: 700;
}
.bx-cards p {
  margin: 0;
  font-size: 0.6rem;
  color: var(--md-default-fg-color--light);
}

/* Cleaner tables */
.md-typeset table:not([class]) {
  border-radius: 0.4rem;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
}

/* Code blocks a touch softer */
.md-typeset pre > code {
  border-radius: 0.4rem;
}

/* One row of the GUI, cut out of the same screenshot and blown up, with a
   name written under each icon. Nothing is drawn over the picture: the crop
   is a background window onto it, sized in per cent so it scales with the
   column, and the names line up because each cell is exactly one slot wide.

   The numbers come from the screenshot's own geometry (1920x1080, GUI scale
   4, window centred): slot pitch 72px, first slot centre at x 672, rows at
   y 344 and 416. */
.bx-strip {
  width: 100%;
  aspect-ratio: 648 / 72;
  background-image: url(img/gui.png);
  background-repeat: no-repeat;
  background-size: 296.296% auto;
  image-rendering: pixelated;
  margin-top: 0.9rem;
}
/* The two windows are the same width and sit one slot-pitch apart, so the
   rows stack exactly as they do on screen and their names line up. */
.bx-strip-slots { background-position: 50% 30.556%; }
.bx-strip-buttons { background-position: 50% 37.698%; }
/* The part selector is a one-row window, so its row sits lower on screen. */
.bx-strip-parts {
  background-image: url(img/pose-page.png);
  background-position: 50% 34.127%;
}
.bx-legend {
  display: grid;
  gap: 0 0.1rem;
  margin: 0.4rem 0 1.2rem;
  text-align: center;
  font-size: 0.6rem;
  line-height: 1.25;
  color: var(--md-default-fg-color--light);
}
.bx-legend-9 { grid-template-columns: repeat(9, 1fr); }

/* Screenshots and clips: crisp pixels, full column width */
.md-typeset img.bx-hero,
.md-typeset img.bx-shot-img,
.md-typeset video.bx-clip {
  image-rendering: pixelated;
  width: 100%;
  border-radius: 0.5rem;
  display: block;
  margin: 1.2rem 0;
}

/* A clip has no size until its metadata arrives - hold the box open so the
   page never jumps and the element is never invisible. */
.md-typeset video.bx-clip {
  aspect-ratio: 16 / 9;
  background: var(--md-code-bg-color);
  object-fit: contain;
}

/* Sound button. The wrapper is added by clips.js, so it carries the spacing
   the clip used to have and the clip sits flush inside it. */
.md-typeset .bx-clip-wrap {
  position: relative;
  margin: 1.2rem 0;
}
.md-typeset .bx-clip-wrap video.bx-clip {
  margin: 0;
}
.md-typeset .bx-clip-sound {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  /* Out of the way until wanted - except while it is on, when it is the only
     sign of which clip is the one making noise. */
  opacity: 0;
  transition: opacity 125ms, background-color 125ms;
}
.md-typeset .bx-clip-wrap:hover .bx-clip-sound,
.md-typeset .bx-clip-sound:focus-visible,
.md-typeset .bx-clip-sound[data-muted="false"] {
  opacity: 1;
}
.md-typeset .bx-clip-sound:hover {
  background: rgba(0, 0, 0, 0.78);
}
.md-typeset .bx-clip-sound[data-muted="false"] {
  background: var(--bx-btn);
  color: var(--bx-btn-label);
}
.md-typeset .bx-clip-sound svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* The table of contents is a list of what is on the page, not a position
   marker. Highlighting one entry only invites the question of why it is that
   one - the answer being a scroll threshold nobody can see - so no entry is
   marked at all. The page list on the left still shows the page you are on. */
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--passed,
.md-sidebar--secondary .md-nav__link:not(:hover) {
  color: var(--md-default-fg-color);
}
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

/* Arriving from a link. The heading turns the site's amber for a moment and
   settles back to its own colour - enough to answer "what was I sent here
   for" without a box drawn round it. The amber is the one links already use,
   so the page gains no new colour. */
@keyframes bx-arrive {
  0%, 30% { color: var(--md-typeset-a-color); }
  100% { color: var(--md-default-fg-color); }
}
.md-typeset .bx-arrived {
  animation: bx-arrive 1.8s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .bx-arrived { animation-duration: 0.01ms; }
}