@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* ==========================================================================
   Pokedex chassis for Material for MkDocs
   --------------------------------------------------------------------------
   The whole site is framed as a Pokedex device: the header is the top of the
   red shell, the main area is the screen, and the footer is the control deck.
   Everything below skins Material's own elements rather than replacing them,
   so search, the mobile drawer and dark mode keep working untouched.

   Deliberate readability rules:
     - the reading surface is a neutral panel, never saturated green;
     - the pixel font is used for device chrome only, never for prose or code;
     - below 768px the chassis flattens so content gets the full width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */

:root {
  --dex-shell: #c62828;
  --dex-shell-dark: #8e1c1c;
  --dex-shell-light: #ef5350;
  --dex-hinge: #a02020;
  --dex-led-amber: #f5d547;

  --dex-bezel: #dcdcdc;
  --dex-bezel-shadow: rgba(0, 0, 0, 0.35);
  --dex-screen: #fbfbfb;
  --dex-screen-glow: #7bc96f;

  /* Game Boy green, reserved for the home device readout only. */
  --dex-readout: #9bbc0f;
  --dex-readout-dark: #0f380f;

  --dex-pad: #2b2b2b;
  --dex-pad-edge: #171717;

  --dex-font-pixel: "Press Start 2P", "Courier New", monospace;

  /* Horizontal room reserved in the header for the version chip, which is
     fixed-positioned and therefore out of flow. Search is pushed left by this
     much so the two never overlap. */
  --dex-version-slot: 5.4rem;
}

/* Custom light scheme, selected in mkdocs.yml as `scheme: pokedex`. */
[data-md-color-scheme="pokedex"] {
  --md-primary-fg-color: #c62828;
  --md-primary-fg-color--light: #ef5350;
  --md-primary-fg-color--dark: #8e1c1c;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #2e86de;
  --md-accent-fg-color--transparent: rgba(46, 134, 222, 0.1);

  --md-default-fg-color: rgba(0, 0, 0, 0.87);
  --md-default-fg-color--light: rgba(0, 0, 0, 0.54);
  --md-default-fg-color--lighter: rgba(0, 0, 0, 0.32);
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.07);
  --md-default-bg-color: var(--dex-screen);

  --md-typeset-a-color: #1565c0;
  --md-code-bg-color: #f1f3f5;
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
}

/* Night mode: the shell darkens, the screen turns off-black. */
[data-md-color-scheme="slate"] {
  --dex-shell: #7f1d1d;
  --dex-shell-dark: #4a1010;
  --dex-shell-light: #a33232;
  --dex-hinge: #611515;
  --dex-bezel: #2a2a2a;
  --dex-bezel-shadow: rgba(0, 0, 0, 0.6);
  --dex-screen: #14161a;
  --dex-screen-glow: #4caf50;
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
}

/* --------------------------------------------------------------------------
   2. The shell
   -------------------------------------------------------------------------- */

body {
  background:
    radial-gradient(circle at 12% 0%, var(--dex-shell-light) 0%, transparent 45%),
    linear-gradient(160deg, var(--dex-shell) 0%, var(--dex-shell-dark) 100%);
  background-attachment: fixed;
}

/* Header = top of the shell, with the hinge line running under it. */
.md-header {
  background: transparent;
  box-shadow: none;
  border-bottom: 4px solid var(--dex-hinge);
  transition: background-color 200ms, border-color 200ms, color 200ms;
}

/* Material adds .md-header--shadow once the page is scrolled. Re-pointing
   --md-primary-bg-color flips every child's foreground in one go, so the bar
   turns into a neutral surface without restyling each element. */
.md-header--shadow {
  --md-primary-bg-color: var(--md-default-fg-color);
  --md-primary-bg-color--light: var(--md-default-fg-color--light);
  background-color: var(--md-default-bg-color);
  border-bottom-color: transparent;
  box-shadow:
    0 0 0.2rem rgba(0, 0, 0, 0.1),
    0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
}

.md-header__inner {
  position: relative;
}

.md-header__title {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Logo stays the plain project PNG - no lens, no chrome around it. */
.md-logo img,
.md-logo svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Section tabs read as shell-mounted buttons. */
.md-tabs {
  background: transparent;
  border-bottom: 2px solid rgba(0, 0, 0, 0.18);
}

.md-tabs__link {
  opacity: 0.85;
  font-weight: 700;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* Version chip, pinned to the top-right of the page. Rendered as a sibling of
   the header (see overrides/main.html) rather than inside it, so no Material
   partial has to be forked. `right` only has to clear the repository link,
   which Material itself hides below 76.25em. */
.dex-version {
  position: fixed;
  top: 0;
  right: 0.8rem;
  z-index: 6;
  display: flex;
  align-items: center;
  height: 2.4rem;
  pointer-events: none;
}

.dex-version__chip {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-family: var(--dex-font-pixel);
  font-size: 0.5rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-decoration: none;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}

.dex-version__chip:hover,
.dex-version__chip:focus-visible {
  border-color: var(--dex-led-amber);
}

/* Matches the header's scrolled state. */
.md-header--shadow ~ .dex-version .dex-version__chip {
  border-color: var(--md-default-fg-color--lighter);
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

@media screen and (min-width: 76.25em) {
  /* Clear of .md-header__source (11.7rem wide plus the header's own padding). */
  .dex-version {
    right: 12.3rem;
  }
}

/* Push the search box out of the chip's way. Above 60em search is an inline
   input floated right; below it collapses to an icon button. Both need the
   same clearance. */
@media screen and (min-width: 60em) {
  .md-search__inner {
    margin-right: var(--dex-version-slot);
  }
}

@media screen and (max-width: 59.9375em) {
  .md-header__button[for="__search"] {
    margin-right: var(--dex-version-slot);
  }
}

/* --------------------------------------------------------------------------
   3. The screen
   -------------------------------------------------------------------------- */

.md-main {
  margin: 1.2rem clamp(0.6rem, 3vw, 3rem) 0;
  background: var(--md-default-bg-color);
  border: 0.3rem solid var(--dex-bezel);
  border-radius: 1.1rem;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    inset 0 0.4rem 1.2rem rgba(0, 0, 0, 0.06),
    0 1rem 2.4rem var(--dex-bezel-shadow);
  /* Deliberately NOT `overflow: hidden`: an ancestor that clips overflow kills
     `position: sticky` on its descendants, and Material relies on it for the
     table of contents. The rounded corners are handled per-element instead. */
}

/* Thin power line along the top edge of the screen. */
.md-main::before {
  content: "";
  display: block;
  height: 0.18rem;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
  background: linear-gradient(90deg, transparent, var(--dex-screen-glow), transparent);
  opacity: 0.85;
}

.md-content {
  padding-bottom: 1.2rem;
}

/* Code must stay maximally legible: neutral surface, never the shell colours. */
.md-typeset pre > code {
  border-radius: 0.5rem;
}

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

/* Headings borrow the shell red without borrowing the pixel font. */
.md-typeset h1 {
  color: var(--dex-shell);
  font-weight: 800;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--dex-shell-light);
}

.md-typeset h2 {
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   4. Control deck (footer)
   -------------------------------------------------------------------------- */

.dex-deck {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  max-width: 61rem;
  margin: 0 auto;
  padding: 1.4rem clamp(0.6rem, 3vw, 3rem);
}

.dex-dpad {
  position: relative;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
}

/* The cross is two bars; the arms are the four links laid on top. */
.dex-dpad::before,
.dex-dpad::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--dex-pad);
  border: 2px solid var(--dex-pad-edge);
  border-radius: 0.3rem;
}

.dex-dpad::before {
  width: 100%;
  height: 1.6rem;
}

.dex-dpad::after {
  width: 1.6rem;
  height: 100%;
}

.dex-dpad__btn {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  line-height: 1;
  text-decoration: none;
  transition: color 120ms, transform 120ms;
}

.dex-dpad__btn:hover,
.dex-dpad__btn:focus-visible {
  color: var(--dex-led-amber);
  transform: scale(1.2);
}

.dex-dpad__btn--up    { top: 0; left: 50%; margin-left: -0.8rem; }
.dex-dpad__btn--down  { bottom: 0; left: 50%; margin-left: -0.8rem; }
.dex-dpad__btn--left  { left: 0; top: 50%; margin-top: -0.8rem; }
.dex-dpad__btn--right { right: 0; top: 50%; margin-top: -0.8rem; }

.dex-deck__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dex-deck__links a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.dex-deck__links a:hover,
.dex-deck__links a:focus-visible {
  background: rgba(0, 0, 0, 0.34);
  border-color: var(--dex-led-amber);
}

.md-footer,
.md-footer-meta {
  background: transparent;
}

.md-footer__inner {
  margin: 0 auto;
  max-width: 61rem;
}

/* --------------------------------------------------------------------------
   5. Home device readout
   -------------------------------------------------------------------------- */

.dex-home {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 0 2.5rem;
}

.dex-readout {
  position: relative;
  padding: 1.6rem;
  border-radius: 0.6rem;
  background: var(--dex-readout);
  color: var(--dex-readout-dark);
  box-shadow: inset 0 0 0 0.35rem #486b18, inset 0 0 2.5rem rgba(15, 56, 15, 0.35);
}

/* Faint scanlines, the one place the device look wins over neutrality. */
.dex-readout::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.6rem;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(15, 56, 15, 0.09) 0 2px,
    transparent 2px 4px
  );
}

.dex-readout__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--dex-font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

.dex-readout__name {
  margin: 0.7rem 0 0.2rem;
  font-family: var(--dex-font-pixel);
  font-size: clamp(1rem, 4.5vw, 1.6rem);
  line-height: 1.35;
  color: var(--dex-readout-dark);
}

.dex-readout__desc {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.65;
}

.dex-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.dex-type {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 56, 15, 0.55);
  background: rgba(15, 56, 15, 0.12);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dex-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0 0;
}

.dex-stats div {
  padding: 0.6rem 0.7rem;
  border-radius: 0.4rem;
  background: rgba(15, 56, 15, 0.12);
}

.dex-stats dt {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.dex-stats dd {
  margin: 0.2rem 0 0;
  font-family: var(--dex-font-pixel);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.dex-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
}

.dex-home__actions a {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--dex-hinge);
  background: var(--dex-shell);
  color: #fff;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0.2rem 0 var(--dex-hinge);
}

.dex-home__actions a:hover,
.dex-home__actions a:focus-visible {
  background: var(--dex-shell-light);
  transform: translateY(-1px);
}

.dex-home__actions a.dex-home__actions--ghost {
  background: transparent;
  color: var(--md-default-fg-color);
  border-color: var(--md-default-fg-color--lighter);
  box-shadow: none;
}

.dex-home__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.4rem 0 0;
}

.dex-home__prose {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   6. Entity dex cards
   -------------------------------------------------------------------------- */

.dex-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.7rem;
  border: 2px solid var(--md-default-fg-color--lightest);
  border-left: 0.45rem solid var(--dex-shell);
  background: var(--md-code-bg-color);
}

.dex-entry__icon {
  font-size: 1.6rem;
  line-height: 1;
}

.dex-entry__no {
  display: block;
  font-family: var(--dex-font-pixel);
  font-size: 0.55rem;
  color: var(--md-default-fg-color--light);
}

.dex-entry__name {
  display: block;
  font-weight: 800;
  font-size: 1rem;
}

.dex-entry__count {
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--dex-shell);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Overview grid of every entity group.
   md_in_html wraps each Markdown link in a <p>, so the <p> is the grid item and
   the link stretches to fill it. Keeps the links validated by `--strict`. */
.dex-grid > p {
  margin: 0;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.dex-grid a {
  display: block;
  padding: 1rem;
  border-radius: 0.7rem;
  border: 2px solid var(--md-default-fg-color--lightest);
  background: var(--md-code-bg-color);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms, transform 120ms;
}

.dex-grid a {
  height: 100%;
}

.dex-grid a:hover,
.dex-grid a:focus-visible {
  border-color: var(--dex-shell);
  transform: translateY(-2px);
}

.dex-entry__sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.dex-grid .dex-entry__no {
  margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   7. Responsive: below 768px the chassis flattens and content goes full width
   -------------------------------------------------------------------------- */

@media screen and (min-width: 60em) {
  /* Material already makes the sidebars sticky; this only pins the table of
     contents directly under the 2.4rem header instead of leaving the gap the
     `navigation.tabs` feature reserves for tabs that have scrolled away. */
  .md-sidebar--secondary {
    top: 2.4rem;
  }
}

@media screen and (min-width: 76.25em) {
  /* The site is small enough to navigate from the tabs and the API Reference
     overview, so the left sidebar only stole reading width. It is hidden rather
     than removed from the DOM: below this breakpoint the same element IS the
     mobile drawer, which must keep working. */
  .md-sidebar--primary {
    display: none;
  }
}

@media screen and (max-width: 47.9375em) {
  .md-main {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .dex-deck {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .dex-readout {
    padding: 1.1rem;
  }
}

/* Respect users who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .dex-dpad__btn,
  .dex-grid a,
  .dex-home__actions a {
    transition: none;
  }

  .dex-dpad__btn:hover,
  .dex-grid a:hover,
  .dex-home__actions a:hover {
    transform: none;
  }
}