/* AI Game Modding Guides — theme for MkDocs Material.

   Design notes
   - Body face is Atkinson Hyperlegible Next, built for legibility. Code is JetBrains Mono.
     Both are self-hosted from assets/fonts (no Google Fonts request).
   - One neutral cool grey palette, one link blue. The two project routes each get a
     colour (teal = link two games, ochre = rebuild an engine) and that colour is used
     only to mark the route, so it carries meaning wherever it appears.
   - Material's "primary" slot is the header background and "primary-bg" is the header
     text, so both are mapped explicitly below. */

@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/atkinson-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/atkinson-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/atkinson-600.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/atkinson-700.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 800; font-style: normal; font-display: swap; src: url(fonts/atkinson-800.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/jetbrains-mono-700.woff2) format("woff2"); }

:root {
  --md-text-font: "Atkinson Hyperlegible Next";
  --md-code-font: "JetBrains Mono";
}

/* ---------- Tokens ---------- */

[data-md-color-scheme="default"] {
  --bg: #fbfcfd;  --sunk: #f0f3f7;  --line: #dde3ea;  --line-2: #c4ccd8;
  --ink: #1a2230; --soft: #465366;  --faint: #5f6d82;
  --accent: #1f4fd1;  --on-accent: #ffffff;
  --route-link: #0b7a66;  --route-engine: #a15c00;
}
[data-md-color-scheme="slate"] {
  --bg: #11151b;  --sunk: #1a2029;  --line: #28313c;  --line-2: #3a4655;
  --ink: #e8ecf2; --soft: #b0bac8;  --faint: #8995a6;
  --accent: #8fb0ff;  --on-accent: #0b1020;
  --route-link: #4cc9ae;  --route-engine: #e8ad4a;
}
[data-md-color-scheme="default"], [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--bg);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--soft);
  --md-default-fg-color--lighter: var(--faint);
  --md-default-fg-color--lightest: var(--line);
  --md-primary-fg-color: var(--bg);
  --md-primary-bg-color: var(--ink);
  --md-primary-bg-color--light: var(--soft);
  --md-accent-fg-color: var(--accent);
  --md-accent-bg-color: var(--on-accent);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--accent) 12%, transparent);
  --md-typeset-a-color: var(--accent);
  --md-code-bg-color: var(--sunk);
  --md-code-fg-color: var(--ink);
  --md-footer-bg-color: var(--bg);
  --md-footer-bg-color--dark: var(--sunk);
  --md-footer-fg-color: var(--ink);
  --md-footer-fg-color--light: var(--soft);
  --md-footer-fg-color--lighter: var(--faint);
}

/* ---------- Reading typography ---------- */

.md-grid { max-width: 64rem; }

.md-typeset { font-size: 0.875rem; line-height: 1.7; color: var(--ink); }
/* One centred reading column (about 70 characters wide). The home page gets a wider
   column so the two routes can sit side by side. */
.md-content .md-content__inner { max-width: 35rem; margin-inline: auto; }
.md-content .md-content__inner:has(.hero) { max-width: 52rem; }
.md-typeset :is(h1, h2, h3, h4) { color: var(--ink); }

.md-typeset h1 { margin: 0 0 1rem; font-size: 1.9rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.md-typeset h2 { margin: 2.6em 0 0.6em; font-size: 1.35rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; }
.md-typeset h3 { margin: 2em 0 0.5em; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.md-typeset h4 { margin: 1.6em 0 0.4em; font-size: 0.9rem; font-weight: 700; color: var(--soft); }
.md-typeset strong { font-weight: 700; }
.md-typeset li { margin-bottom: 0.35em; }

.md-typeset a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.md-typeset a:hover { text-decoration-color: currentColor; }
.md-typeset :is(.md-button, .headerlink, .md-nav__link, .md-annotation__index) { text-decoration: none; }
.md-typeset .headerlink { color: var(--faint); }

:is(a, button, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.md-typeset hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line); }
.md-typeset sub { vertical-align: baseline; font-size: 0.8rem; color: var(--faint); }

/* Notes: blockquotes in the guides are asides, so they read as callouts. */
.md-typeset blockquote {
  margin: 1.4em 0; padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  background: var(--sunk); color: var(--ink); font-style: normal;
}
.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }

/* ---------- Code ---------- */

.md-typeset :not(pre) > code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--sunk); font-size: 0.84em; }
.md-typeset pre { border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); }
/* The long code blocks are prompts to copy, which are prose, so they wrap instead of scrolling sideways. */
.md-typeset pre > code {
  padding: 1rem 1.1rem; border-radius: 8px;
  font-size: 0.74rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- Tables ---------- */

.md-typeset__scrollwrap { margin: 1.4em 0; }
.md-typeset__table { display: block; padding: 0; }
.md-typeset table:not([class]) {
  display: table; width: 100%; min-width: 34rem;
  border: 0; border-top: 2px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  box-shadow: none; font-size: 0.78rem; line-height: 1.55;
}
.md-typeset table:not([class]) th {
  min-width: 0; padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--line-2); background: none;
  color: var(--ink); font-weight: 700;
}
.md-typeset table:not([class]) td { padding: 0.65em 0.8em; border-top: 1px solid var(--line); vertical-align: top; }
.md-typeset table:not([class]) tbody tr:first-child td { border-top: 0; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--sunk); }

/* ---------- Checklists ---------- */

.md-typeset .task-list-indicator::before { background-color: var(--faint); }
.md-typeset [type="checkbox"]:checked + .task-list-indicator::before { background-color: var(--route-link); }

/* ---------- Buttons ---------- */

.md-typeset .md-button {
  padding: 0.5em 1.2em; border: 1px solid var(--line-2); border-radius: 6px;
  background: none; color: var(--ink); font-size: 0.8rem; font-weight: 600;
}
.md-typeset .md-button:is(:hover, :focus) { border-color: var(--accent); background: none; color: var(--accent); }
.md-typeset .md-button--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.md-typeset .md-button--primary:is(:hover, :focus) { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ---------- Header, tabs, navigation, footer ---------- */

.md-header, .md-header[data-md-state="shadow"] { box-shadow: none; }
.md-header__title { font-weight: 700; letter-spacing: -0.01em; }
.md-search__form { border-radius: 6px; background: var(--sunk); }
.md-tabs { border-bottom: 1px solid var(--line); }
.md-tabs__link { font-size: 0.68rem; font-weight: 600; opacity: 0.75; }
.md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--accent); }
.md-tabs__item--active .md-tabs__link, .md-tabs__link:hover { opacity: 1; }

.md-nav { font-size: 0.7rem; }
.md-nav__title, .md-nav__item--section > .md-nav__link { color: var(--ink); font-weight: 700; }
.md-nav__link { color: var(--soft); }
.md-nav__link:is(:hover, :focus) { color: var(--accent); }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--accent); font-weight: 600; }

.md-top { border: 1px solid var(--line); background: var(--bg); color: var(--ink); box-shadow: none; }
.md-footer { border-top: 1px solid var(--line); }

/* ---------- Home page ---------- */

.hero { padding: 1rem 0 1.5rem; }
.hero h1 { max-width: 16ch; margin-bottom: 1rem; font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.025em; }
.hero > p { max-width: 36rem; font-size: 1.05rem; color: var(--soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.hero-actions p { margin: 0; }
.hero .fine { margin-top: 1.4rem; font-size: 0.8rem; color: var(--faint); }

/* Collapsed copy-paste prompt at the top of the home page. */
.md-typeset details.quick { margin: 0 0 2.5rem; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--sunk); box-shadow: none; }
.md-typeset details.quick > summary { margin: 0; padding: 0.8rem 2.6rem 0.8rem 2.6rem; border: 0; background: none; color: var(--ink); font-weight: 700; }
.md-typeset details.quick > summary::before { background-color: var(--accent); }
.md-typeset details.quick > :not(summary) { margin-inline: 1.1rem; }
.md-typeset details.quick[open] > summary { border-bottom: 1px solid var(--line); }
.md-typeset details.quick > pre:last-child { margin-bottom: 1.1rem; }

/* Two routes: separate columns, each marked in its own colour. */
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2.5rem; margin: 1.5rem 0 3rem; }
.route { padding-top: 1.1rem; border-top: 3px solid var(--c); }
.route.link { --c: var(--route-link); }
.route.engine { --c: var(--route-engine); }
.route h3 { margin: 0 0 0.5rem; color: var(--c); }
.route svg { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 0 1rem; color: var(--c); }
.route svg text { fill: currentColor; stroke: none; font: 600 12px var(--md-text-font-family); }
.route p { margin: 0 0 0.8em; }
.route .lead { font-weight: 700; }

/* The guides in the order you need them: a real sequence, so it is numbered. */
.stages { margin: 1.5rem 0 3rem; border-top: 1px solid var(--line); }
.stage { display: grid; grid-template-columns: 13rem 1fr; gap: 0.4rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.stage p { margin: 0; }
@media screen and (max-width: 44.98em) { .stage { grid-template-columns: 1fr; } }

.template-list ul { columns: 2 18rem; column-gap: 2.5rem; margin: 1rem 0 3rem; padding: 0; list-style: none; }
.template-list li { break-inside: avoid; margin: 0 0 1rem; padding: 0; }

@media print {
  .md-header, .md-tabs, .md-sidebar, .md-footer, .hero-actions { display: none !important; }
  .md-typeset { font-size: 11pt; }
}