/* Pyxel shared shell: tokens, header, footer and page containers for every page except the console homepage.
   The world is the homepage's desk: a green cutting mat, a paper card, tangerine plastic, pixel headings.
   Everything is namespaced px-* so it can load next to console.css without clashing. */

@font-face { font-family: "Silkscreen"; src: url("/assets/site/fonts/silkscreen-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --px-mat: #2c6a4b;
  --px-mat-line: rgba(214, 245, 226, .09);
  --px-mat-line-2: rgba(214, 245, 226, .2);
  --px-on-mat: #f1f4f0;
  --px-shell: #fb6f0e;
  --px-shell-lo: #e85d05;
  --px-print: #2a0f02;
  --px-paper: #f1f4f0;
  --px-ink: #22130a;
  --px-muted: #4a554c;
  --px-line: #c9d3cb;
  --px-link: #0b5f9e;
  --px-bar: #1e2a12;
  --px-on-bar: #e6ebd6;
  --px-pixel: "Silkscreen", ui-monospace, monospace;
  --px-sans: "Archivo", system-ui, sans-serif;
  --px-ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --px-mat: #17281f;
    --px-mat-line: rgba(214, 245, 226, .06);
    --px-mat-line-2: rgba(214, 245, 226, .14);
    --px-paper: #1c2822;
    --px-ink: #eef2ec;
    --px-muted: #b6c2b8;
    --px-line: #33443a;
    --px-link: #8fcdf5;
    --px-bar: #0f1810;
  }
}

.px-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--px-mat);
  background-image:
    linear-gradient(var(--px-mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-mat-line) 1px, transparent 1px),
    linear-gradient(var(--px-mat-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-mat-line-2) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
  color: var(--px-ink);
  font: 400 17px/1.65 var(--px-sans);
  -webkit-text-size-adjust: 100%;
  caret-color: var(--px-shell);
  scrollbar-color: var(--px-shell) var(--px-bar);
}
.px-body *, .px-body *::before, .px-body *::after { box-sizing: border-box; }
.px-body ::selection { background: var(--px-shell); color: var(--px-print); }
:where(.px-body) a:not(.px-btn) { color: var(--px-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
/* Two-tone ring: the orange band keeps the brand, the outer ring carries the 3:1 contrast (orange alone is 2.3-2.6:1 on paper and mat). */
.px-body :focus-visible { outline: 3px solid var(--px-print); outline-offset: 2px; box-shadow: 0 0 0 5px var(--px-shell); }
@media (prefers-color-scheme: dark) {
  .px-body :focus-visible { outline-color: var(--px-on-mat); }
}
.px-body img { max-width: 100%; height: auto; }

.px-kb { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 1em; font-size: 15px; color: var(--px-muted); cursor: pointer; }
.px-kb input { width: 1.15em; height: 1.15em; accent-color: var(--px-shell); }

.px-skip { position: absolute; left: 12px; top: -64px; z-index: 10; padding: 10px 16px; background: var(--px-shell); color: var(--px-print); font: 700 15px var(--px-sans); }
.px-skip:focus { top: 12px; }

/* Header: wordmark, section switch, one primary action. Sits on the mat. */
.px-header { background: rgba(0, 0, 0, .18); border-bottom: 1px solid var(--px-mat-line-2); }
.px-header-bar { max-width: 1040px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.px-brand { display: inline-flex; align-items: center; min-height: 44px; }
.px-brand img { display: block; height: 40px; width: auto; }
.px-nav { margin-left: auto; }
.px-nav ul, .px-subnav ul, .px-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.px-nav a, .px-subnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--px-on-mat); text-decoration: none; font: 600 16px var(--px-sans);
  border-bottom: 3px solid transparent;
}
.px-nav a:hover, .px-subnav a:hover { border-bottom-color: var(--px-mat-line-2); }
.px-nav a[aria-current], .px-subnav a[aria-current] { border-bottom-color: var(--px-shell); }
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  background: var(--px-shell); color: var(--px-print); text-decoration: none;
  font: 700 16px var(--px-sans); border-radius: 2px;
  box-shadow: 0 2px 0 rgba(42, 15, 2, .55), 0 6px 14px -6px rgba(0, 0, 0, .5);
  transition: transform .18s var(--px-ease), background-color .18s;
}
.px-btn:hover { background: var(--px-shell-lo); transform: translateY(-1px); }
.px-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(42, 15, 2, .55); }

/* Pyxel Learn gets a second row under the same header. */
.px-subnav { max-width: 1040px; margin: 0 auto; padding: 0 20px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.px-subnav-title { font: 400 14px/1 var(--px-pixel); letter-spacing: .04em; color: var(--px-on-mat); padding-right: 6px; }

/* Page and paper card */
.px-page { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(20px, 4vw, 44px) 20px 56px; }
.px-card {
  background: var(--px-paper); color: var(--px-ink); border-top: 6px solid var(--px-shell); border-radius: 0;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 18px 40px -18px rgba(0, 0, 0, .6);
}
.px-reading { max-width: 46rem; margin-inline: auto; }
.px-reading h1, .px-title { font: 400 clamp(28px, 5vw, 42px)/1.15 var(--px-pixel); letter-spacing: .01em; margin: 0 0 .6em; text-wrap: balance; }
.px-reading h2 { font: 800 1.45rem/1.25 var(--px-sans); margin: 2em 0 .5em; text-wrap: balance; }
.px-reading h3 { font: 700 1.15rem/1.3 var(--px-sans); margin: 1.6em 0 .4em; }
.px-reading p, .px-reading li { max-width: 68ch; }
.px-reading ul, .px-reading ol { padding-left: 1.3em; }
.px-lede { font-size: 1.15rem; color: var(--px-muted); max-width: 60ch; }
.px-muted { color: var(--px-muted); }

.px-crumbs { margin: 0 0 18px; font: 500 15px var(--px-sans); }
.px-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.px-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--px-muted); }
.px-crumbs a { color: var(--px-link); }

/* A tool sits on the card like the LCD sits on the console: its own light screen, same in both colour schemes. */
/* The light "screen" inside a card. One token set (--g-*) for both tools; always light, even in the dark scheme. */
.px-screen {
  --g-bg: #f4f6f2; --g-ink: #1d2a22; --g-muted: #4a554c; --g-line: #c9d3cb; --g-edge: #76867a;
  --g-ok: #3b5a14; --g-ok-bg: #e9f0d8; --g-ok-line: #6c8f2e;
  --g-bad: #9b2c1a; --g-bad-bg: #fbe9e4; --g-bad-line: #b8503a;
  --g-tint: #e9eee6;
  background: var(--g-bg); color: var(--g-ink); border: 1px solid #0003; border-radius: 2px;
}

/* Footer: the same links on every page. */
.px-footer { background: var(--px-bar); color: var(--px-on-bar); border-top: 1px solid var(--px-mat-line-2); }
.px-footer-inner { max-width: 1040px; margin: 0 auto; padding: 28px 20px 32px; display: grid; gap: 18px; }
.px-footer nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 28px; }
.px-footer h2 { margin: 0 0 6px; font: 400 14px/1.2 var(--px-pixel); letter-spacing: .04em; color: var(--px-on-bar); }
.px-footer ul { flex-direction: column; gap: 0; }
.px-footer a { display: inline-flex; align-items: center; min-height: 36px; color: var(--px-on-bar); text-underline-offset: .2em; }
.px-footer a:hover { color: var(--px-shell); }
.px-footer-note, .px-footer-copy { margin: 0; font-size: 14px; line-height: 1.55; max-width: 70ch; opacity: .92; }

@media (max-width: 640px) {
  .px-header-bar { gap: 4px 12px; }
  .px-nav { margin-left: 0; width: 100%; order: 3; }
  .px-nav a, .px-subnav a { padding: 0 10px; }
  .px-btn { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .px-btn { transition: none; } }