/* The docs of playphaethon.com in the website's design, from the same tokens as
   web/static/site.css: every docs page wears the site's band, frame and foot (the website's
   stylesheet, which overrides/main.html links ahead of Material's), and this file sets
   Material's own variables to the tokens and lays Material's nav, article and outline out as
   the approved docs prototype does, with dots in the frame's margins. The fonts are served
   from docs/assets/fonts, so the docs read the same even served alone (mkdocs serve). */

@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #0b1618;
  --bg-2: #0f1f22;
  --card: #122527;
  --border: #23474c;
  --text: #f0e9d8;
  --text-2: #a9bdb3;
  --gold: #f2a93b;
  --blue: #37b6e9;
  --green: #3fd97a;
  --orange: #f5c043;
  --gold-grad: linear-gradient(180deg, #f7b84a 0%, #b86b24 100%);
  --wordmark-grad: linear-gradient(180deg, #ffd566 0%, #f28a1e 100%);
  --heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --inset: clamp(24px, 4vw, 64px);
  --gutter: clamp(16px, 6vw, 96px);
  --col: min(calc(1120px + 2 * var(--inset)), calc(100% - 2 * var(--gutter)));

  /* Material appends its own fallbacks to both of these. */
  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
}

/* Material's documented selector for a custom primary and accent. */
:root > * {
  --md-primary-fg-color: var(--gold);
  --md-primary-fg-color--light: #f7b84a;
  --md-primary-fg-color--dark: #b86b24;
  --md-primary-bg-color: var(--bg);
  --md-primary-bg-color--light: rgba(11, 22, 24, 0.7);
  --md-accent-fg-color: var(--gold);
  --md-accent-fg-color--transparent: rgba(242, 169, 59, 0.1);
  --md-accent-bg-color: var(--bg);
  --md-accent-bg-color--light: rgba(11, 22, 24, 0.7);
}

[data-md-color-scheme="slate"] {
  --md-hue: 189deg;
  --md-default-bg-color: var(--bg);
  --md-default-bg-color--light: rgba(11, 22, 24, 0.54);
  --md-default-bg-color--lighter: rgba(11, 22, 24, 0.26);
  --md-default-bg-color--lightest: rgba(11, 22, 24, 0.07);
  --md-default-fg-color: var(--text);
  --md-default-fg-color--light: var(--text-2);
  --md-default-fg-color--lighter: var(--text-2);
  --md-default-fg-color--lightest: var(--border);
  --md-typeset-color: var(--text-2);
  --md-typeset-a-color: var(--gold);
  --md-typeset-table-color: var(--border);
  --md-typeset-table-color--light: rgba(35, 71, 76, 0.35);
  --md-typeset-mark-color: rgba(242, 169, 59, 0.3);
  --md-code-fg-color: var(--text);
  --md-code-bg-color: rgba(240, 233, 216, 0.07);
  --md-code-hl-color: var(--gold);
  --md-code-hl-color--light: rgba(242, 169, 59, 0.12);
  --md-code-hl-keyword-color: var(--blue);
  --md-code-hl-string-color: var(--green);
  --md-code-hl-number-color: var(--gold);
  --md-code-hl-special-color: var(--orange);
  --md-code-hl-function-color: #9be3f7;
  --md-code-hl-constant-color: #f7b84a;
  --md-code-hl-comment-color: var(--text-2);
  --md-admonition-bg-color: var(--bg-2);
  --md-footer-bg-color: var(--bg);
  --md-footer-bg-color--dark: var(--bg);
}

::selection {
  background: rgba(242, 169, 59, 0.35);
  color: var(--text);
}
body { background: var(--bg); }

/* ---- The band: Material's header element, still, with the breadcrumb and the title ---- */
/* Material's body is a flex column the height of the window, which would shrink the band and
   its bar to fit; the band keeps its own height. */
.hero.md-header {
  position: relative;
  top: auto;
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--text);
  box-shadow: none;
}
.hero.md-header.md-header--shadow { box-shadow: none; }
.hero--docs .hero__body > .crumbs { margin: 0; }
.hero--docs .hero__title { margin: 0; }
/* Material's search sits at the band's right edge on a wide screen and opens as its own
   overlay on a narrow one, where the label beside the title opens it. */
.docs__buttons { display: flex; gap: 8px; }
.docs__search, .docs__drawer { display: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: 13px; cursor: pointer; }
.docs__search svg, .docs__drawer svg { width: 16px; height: 16px; fill: currentColor; }
@media screen and (min-width: 60em) {
  .hero--docs .md-search { position: absolute; top: 24px; right: var(--inset); z-index: 5; padding: 0; }
  .hero--docs .md-search__inner { float: none; }
  .hero--docs .md-search__form { border: 1px solid var(--border); border-radius: 999px; background: rgba(11, 22, 24, 0.7); box-shadow: none; }
  .hero--docs .md-search__form:hover { border-color: var(--text-2); background: rgba(11, 22, 24, 0.7); }
  .hero--docs .md-search__input { color: var(--text); font-size: 13px; }
  .hero--docs .md-search__input::placeholder { color: var(--text-2); }
}
@media screen and (max-width: 59.984375em) {
  .docs__search { display: inline-flex; }
}
@media screen and (max-width: 76.234375em) {
  .docs__drawer { display: inline-flex; }
}

/* ---- The frame: the hairlines at the content edges and dots in the margins ---- */
.md-container { --band: min(176px, calc((100% - var(--col)) / 2 - 12px)); position: relative; }
.md-container > .frame__band { padding: 0; background-image: radial-gradient(rgba(35, 71, 76, 0.9) 1px, transparent 1.2px); background-size: 14px 14px; background-position: center top; }

/* ---- Three columns: the nav, the article, the outline ---- */
.md-main__inner.md-grid { max-width: none; width: var(--col); box-sizing: border-box; margin: 0 auto; padding: 40px var(--inset) 96px; background: var(--bg); gap: 48px; }
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: 84px; padding: 0; }
  .md-sidebar--primary { width: 220px; }
  .md-sidebar--secondary { width: 200px; }
}
.md-content { max-width: none; }
.md-content__inner { margin: 0; padding: 0; max-width: 72ch; }
.md-content__inner::before { display: none; }
/* The band carries the page's title; a wiki page that opens with its own is not said twice. */
.md-content__inner > h1:first-child { display: none; }

.md-nav { font-size: 14px; line-height: 1.5; }
/* The sidebar's look is for the wide screen; below it Material's drawer keeps its own. */
@media screen and (min-width: 76.25em) {
  .md-nav__title { display: none; }
  .md-nav--primary .md-nav__item--section > .md-nav__link,
  .md-nav--primary .md-nav__item--section > label.md-nav__link { margin: 16px 0 6px; font: 600 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
  .md-nav--primary .md-nav__link { margin-top: 0; padding: 5px 10px; margin-left: -10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; color: var(--text-2); }
  .md-nav--primary .md-nav__link:hover { color: var(--text); background: rgba(240, 233, 216, 0.04); }
  .md-nav--primary .md-nav__link--active { color: var(--gold); border-left-color: var(--gold); }
}
.md-nav--primary .md-nav__title[for="__drawer"] { background: var(--bg-2); color: var(--text); }
.md-nav--primary .md-nav__link--active { color: var(--gold); }
/* The pinned wordmark and the bar share the band's stacking with Material's search, which covers
   the window on a narrow screen. */
[data-md-toggle="search"]:checked ~ .md-header .bar__brand,
[data-md-toggle="search"]:checked ~ .md-header .bar { visibility: hidden; }
.md-sidebar--secondary .md-nav--secondary { padding-left: 14px; border-left: 1px solid var(--border); }
.md-sidebar--secondary .md-nav--secondary::before { content: "on this page"; display: block; margin-bottom: 8px; font: 600 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.md-nav--secondary .md-nav__link { margin-top: 0; padding: 4px 0; font-size: 13px; color: var(--text-2); }
.md-nav--secondary .md-nav__link:hover, .md-nav--secondary .md-nav__link--active { color: var(--text); }

/* ---- The article, in the prototype's doc styles ---- */
.md-typeset { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.md-typeset > :first-child { margin-top: 0; }
.md-typeset h2 { position: relative; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); font: 800 26px/1.1 var(--heading); letter-spacing: -0.01em; color: var(--text); }
.md-typeset h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 1px; background: var(--gold); }
.md-typeset h3 { margin: 28px 0 10px; font: 800 19px/1.2 var(--heading); color: var(--text); }
.md-typeset h4 { margin: 22px 0 8px; font: 700 16px/1.3 var(--heading); color: var(--text); }
.md-typeset p { margin: 0 0 16px; }
.md-typeset a { color: var(--gold); }
.md-typeset a:hover, .md-typeset a:focus { color: #ffbd52; text-decoration: underline; text-underline-offset: 4px; }
.md-typeset strong { color: var(--text); }
.md-typeset code { font: 500 0.88em var(--mono); color: var(--text); background: rgba(240, 233, 216, 0.07); padding: 1px 6px; border-radius: 4px; }
.md-typeset pre > code { padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); font-size: 13px; line-height: 1.6; }
.md-typeset ul, .md-typeset ol { margin: 0 0 16px; padding-left: 22px; }
.md-typeset li { margin-bottom: 8px; }
.md-typeset li::marker { color: var(--gold); font-weight: 600; }
.md-typeset table:not([class]) { width: 100%; margin: 0 0 20px; border: 0; border-radius: 0; background: none; font-size: 14px; }
.md-typeset table:not([class]) th { padding: 10px 12px; border-bottom: 1px solid var(--border); background: none; font: 600 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.md-typeset table:not([class]) td { padding: 10px 12px; border-top: 0; border-bottom: 1px solid rgba(35, 71, 76, 0.6); vertical-align: top; }
.md-typeset table:not([class]) td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.md-typeset .admonition, .md-typeset details { margin: 0 0 18px; padding: 14px 18px 4px; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--bg-2); box-shadow: none; font-size: 15px; }
.md-typeset .admonition-title, .md-typeset summary { margin: 0 0 8px; padding: 0; background: none; font: 600 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.md-typeset .admonition-title::before, .md-typeset summary::before { display: none; }
.md-typeset hr { border-bottom-color: var(--border); }
.md-typeset .headerlink { color: var(--text-2); }
.doc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font: 500 12px/1.6 var(--mono); color: var(--text-2); }
.doc__foot a { color: var(--gold); }

/* ---- Buttons ---- */
.md-typeset .md-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; border: 1px solid var(--border); border-radius: 999px; background: rgba(11, 22, 24, 0.55); color: var(--text); font: 700 15px var(--heading); }
.md-typeset .md-button:hover, .md-typeset .md-button:focus { border-color: var(--text-2); background: rgba(11, 22, 24, 0.55); color: var(--text); text-decoration: none; }
.md-typeset .md-button--primary, .md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus { border-color: transparent; background: var(--gold); color: var(--bg); }
.md-typeset .md-button--primary:hover { background: #ffbd52; }

/* ---- The docs landing page (docs/index.md): the tagline, the download button, the four
   sections as a strip of cells, the two changelogs ---- */
.ph-hero { margin: 0 0 32px; }
.md-typeset .ph-hero__tagline { margin: 0; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--heading); color: var(--text); }
.md-typeset .ph-hero__actions, .md-typeset .ph-changelogs > p { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.md-typeset .ph-hero__actions .md-button, .md-typeset .ph-changelogs .md-button { margin: 0; }
.ph-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 24px; border: 1px solid var(--border); }
.ph-card { padding: 26px 26px 22px; background: var(--bg); }
.ph-card:nth-child(even) { border-left: 1px solid var(--border); }
.ph-card:nth-child(n + 3) { border-top: 1px solid var(--border); }
.md-typeset .ph-card h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 20px; }
.md-typeset .ph-card h2::before { display: none; }
.md-typeset .ph-card h2 a { color: var(--text); }
.md-typeset .ph-card h2 .headerlink { display: none; }
.md-typeset .ph-card p { margin: 0 0 10px; font-size: 15px; }
.md-typeset .ph-card ul { margin: 0; padding: 0; list-style: none; }
.md-typeset .ph-card ul li { margin: 4px 0; }
@media screen and (max-width: 44.984375em) {
  .ph-sections { grid-template-columns: 1fr; }
  .ph-card:nth-child(even) { border-left: 0; }
  .ph-card + .ph-card { border-top: 1px solid var(--border); }
}