/* Demotron: playful Picotron colours, professional presentation.
   Layout: a pink desktop (a faint tiled pixel-glyph wallpaper); everything to read
   sits in cream panels with pink title strips, black outlines and small radii;
   "Try this" is a yellow note; pixel headings and chunky buttons carry the fun. */
:root {
  --desk: #ffacc5;          /* Picotron soft pink (colour 23) */
  --desk-ink: #1d2b53;      /* text written straight on the desktop */
  --paper: #fff1e8;         /* colour 7: window body */
  --paper-2: #ffe4d2;
  --ink: #1d2b53;           /* colour 1: text */
  --ink-soft: #5f574f;      /* colour 5 */
  --line: #000000;          /* window outlines */
  --pink: #ff77a8;          /* colour 14: title bars */
  --red: #ff004d;           /* colour 8 */
  --yellow: #ffec27;        /* colour 10: sticky notes */
  --blue: #29adff;          /* colour 12 */
  --green: #00e436;         /* colour 11 */
  --shadow: rgba(0, 0, 0, 0.45);
  --link: #c4006e;
  --magenta: #e40dab;       /* colour 30 */
  --code-ink: #fff1e8;

  --r: 4px;                 /* corner radius for every box */
  --pixel: "Jersey 10", "Arial Narrow", sans-serif;   /* headings and titles; one weight, always 400 */
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: var(--body);
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #2b0d22; --desk-ink: #ffccdd;
    --paper: #23122a; --paper-2: #331a3b; --ink: #fff1e8; --ink-soft: #d9c3cf;
    --shadow: rgba(0, 0, 0, 0.75); --link: #ff9cc2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #2b0d22; --desk-ink: #ffccdd;
  --paper: #23122a; --paper-2: #331a3b; --ink: #fff1e8; --ink-soft: #d9c3cf;
  --shadow: rgba(0, 0, 0, 0.75); --link: #ff9cc2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--desk); }
body {
  margin: 0;
  font: 17px/1.6 var(--body);
  color: var(--ink);
  background-color: var(--desk);
  /* the wallpaper: tiny pixel glyphs, like Picotron's desktop */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Cg fill='%23ff004d' fill-opacity='.22'%3E%3Crect x='6' y='4' width='2' height='6'/%3E%3Crect x='4' y='6' width='6' height='2'/%3E%3Crect x='30' y='8' width='6' height='6' fill-opacity='.08'/%3E%3Crect x='32' y='10' width='2' height='2' fill-opacity='0'/%3E%3Crect x='20' y='28' width='2' height='2'/%3E%3Crect x='24' y='28' width='2' height='2'/%3E%3Crect x='22' y='30' width='2' height='2'/%3E%3Crect x='40' y='34' width='4' height='2'/%3E%3Crect x='38' y='36' width='2' height='4'/%3E%3Crect x='8' y='38' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}
::selection { background: var(--magenta); color: #fff; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-style: wavy; }
:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 2px; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
/* no ligatures: JetBrains Mono would draw >= as one glyph, and readers type what they see
   (font-feature-settings, unlike font-variant-ligatures, survives the font shorthand) */
body { font-feature-settings: "liga" 0, "calt" 0; }
code { background: var(--paper-2); padding: 0.05em 0.35em; border-radius: 2px; }
pre { border-radius: var(--r); background: var(--paper-2); padding: 0.8em 1em; overflow-x: auto; }
pre code { background: none; padding: 0; }
/* a key to press: [[O]] / [[X]] / [[Ctrl+Z]] in lesson.md; title= gives Picotron's button name */
kbd.key {
  font: 700 0.82em/1 var(--mono); display: inline-block; min-width: 1.6em; text-align: center;
  padding: 0.2em 0.4em 0.15em; border: 1.5px solid var(--line); border-bottom-width: 3px;
  border-radius: var(--r); background: var(--paper); color: var(--ink); vertical-align: 0.08em;
}
kbd.key[title] { cursor: help; }
.try kbd.key { background: #fff1e8; color: #1d2b53; border-color: #1d2b53; }
:root[data-theme="dark"] kbd.key { border-color: var(--ink-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) kbd.key { border-color: var(--ink-soft); } }

/* ---- page frame */
header.site, footer.site, main {
  max-width: 1000px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body.wide header.site, body.wide footer.site, body.wide main { max-width: 1480px; }
/* slideshows: room for a 600px text column beside a 2x demo on big screens */
body.slides header.site, body.slides footer.site, body.slides main { max-width: 1660px; }

/* the site header is Picotron's toolbar: a cream strip with the menu at left */
header.site {
  border-radius: var(--r);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-block: 6px;
  background: var(--paper);
}
header.site .brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
header.site .brand span { font: 400 2rem/1 var(--pixel); letter-spacing: 0; }
header.site .brand:hover .mascot { }
.mascot { image-rendering: pixelated; transition: transform 0.15s; flex: none; }
header.site .tag { font-size: 0.95rem; color: var(--ink-soft); }

/* ---- windows */
.window {
  border-radius: var(--r); overflow: hidden;
  background: var(--paper); color: var(--ink);
}
.titlebar {
  display: flex; align-items: center; gap: 10px;
  background: var(--pink); color: #000;
  padding: 2px 8px; font: 400 1.25rem/1.2 var(--pixel); letter-spacing: 0.01em;
}
.titlebar .tb-title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-body { padding: 18px clamp(16px, 4vw, 34px) 22px; overflow-x: auto; }

/* ---- buttons */
.px-btn, .controls button, button.copy, div.embed button {
  font: 400 1.3rem/1.1 var(--pixel); color: #000; cursor: pointer; text-decoration: none; border: 0;
  background: var(--pink);
  padding: 4px 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r);
  transition: background 0.1s;
}
.px-btn:hover, .controls button:hover, button.copy:hover, div.embed button:hover { background: var(--yellow); text-decoration: none; }
.px-btn:active, .controls button:active, button.copy:active, div.embed button:active { background: #e8508a; }
.controls button:disabled { opacity: 0.4; cursor: default; background: var(--pink); }

/* ---- headings */
h1, h2, h3 { text-wrap: balance; }
h1 { font: 400 clamp(2.6rem, 6.5vw, 4rem)/1 var(--pixel); margin: 0.15em 0 0.15em; letter-spacing: 0; }
.summary { font-size: 1.12em; margin: 0; }

/* ---- lesson heading: a label on the desktop */
.lesson-head {
  border-radius: var(--r);
  display: inline-block; max-width: 100%; margin: 26px 0 6px;
  background: var(--paper);
  padding: 10px 22px 14px;
}
.crumbs { margin: 0; font: 0.9rem var(--mono); color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.lnum {
  border-radius: 3px;
  display: inline-block; font: 700 0.85rem/1 var(--mono); color: #000;
  background: var(--yellow); padding: 2px 5px;
}

/* ---- slideshow lessons: code window left, demo window right */
.workbench { display: grid; grid-template-columns: minmax(600px, 1fr) auto; gap: 20px; justify-content: center; margin: 22px 0 10px; }
.workbench > * { min-width: 0; }
.codepane { position: relative; min-height: 0; }
.codepane-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.code { border-radius: var(--r); display: flex; flex-direction: column; height: 100%; min-height: 0; background: #0f1424; overflow: hidden; }
.code[hidden] { display: none; }
.codehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px;
  background: var(--pink); color: #000; font: 0.85rem var(--mono); }
.codehead .file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.copy { font: 700 0.8rem var(--mono); padding: 1px 10px; background: var(--paper); }
pre.lua { flex: 1; margin: 0; padding: 10px 0; overflow: auto; background: none; border: 0; font-size: 14px; line-height: 1.5; color: var(--code-ink); }
pre.lua .line { white-space: pre; }
pre.lua .ln { display: inline-block; width: 3.2em; padding-right: 1em; text-align: right; color: #5f574f; user-select: none; }
/* Picotron's own code editor colours, so the page matches what learners see */
pre.lua .kw { color: #ff77a8; }
pre.lua .bi { color: #00e436; }
pre.lua .num { color: #29adff; }
pre.lua .str { color: #29adff; }
pre.lua .com { color: #83769c; }
pre.lua .op { color: #c2c3c7; }
/* the lines a slide is about: highlighted in the line-number gutter, the code itself untouched */
pre.lua .line.hl .ln { background: #ffec27; color: #000; }

.cartwin { overflow: hidden; width: fit-content; }   /* shrink-wraps the cart, which pixelfit.js sizes */
.cart { position: relative; width: 480px; height: 270px; background: #000; }   /* pixelfit.js picks the whole-number scale */
.cart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.controls button { font-size: 1.6rem; padding: 0 18px; }
#count { border-radius: var(--r); font: 700 1rem var(--mono); color: #000; background: var(--paper); padding: 1px 10px; font-variant-numeric: tabular-nums; }

.captions { max-width: 820px; margin: 22px auto 0; }
.caption h2 { font: 400 2.1rem/1.1 var(--pixel); margin: 0.1em 0 0.45em; }
/* numbers in a plain bold mono: Pixelify's 5 reads like an S */
.caption h2 .num { border-radius: 3px; display: inline-block; min-width: 1.6em; text-align: center; margin-right: 0.3em; font: 700 0.6em/1.5 var(--mono); vertical-align: 0.2em;
  background: var(--yellow); color: #000; }
.caption figure.shot { margin: 1.2em 0; }
.caption h3 { font: 400 1.55rem/1.1 var(--pixel); margin: 1.3em 0 0.3em; }

/* ---- "Try this": a yellow note */
.try {
  border-radius: var(--r);
  position: relative; margin: 1.6em 0 0.6em; padding: 0.9em 1.3em 0.8em;
  background: var(--yellow); color: #1d2b53;
}
.try h3 { font: 400 1.6rem/1.1 var(--pixel); margin: 0 0 0.35em; color: #1d2b53; }
.try ul { padding-left: 1.2em; margin: 0.3em 0; }
.try li { margin: 0.4em 0; }
.win-body .try li::marker, .try li::marker { content: "\25B8  "; color: #ff004d; font-size: 1em; }
.try code { background: rgba(255, 255, 255, 0.55); color: #1d2b53; }
.try a { color: #9e004a; }

/* ---- lists */
.win-body ul > li::marker { content: "\25A0  "; color: var(--pink); font-size: 0.8em; }
.win-body ol > li::marker { font-family: var(--pixel); color: var(--magenta); }

/* ---- article lessons */
/* wide enough for a 2x (960px) Picotron screen; the text keeps its 720px column */
article.article .paper { max-width: 1040px; margin: 22px auto 0; }
.article-section { max-width: 720px; margin: 0 auto; }
.article-section h2 { font: 400 2.2rem/1.1 var(--pixel); margin: 1.3em 0 0.35em; }
.article-section:first-child h2 { margin-top: 0.2em; }
.article-section h3 { font: 400 1.6rem/1.1 var(--pixel); margin: 1.1em 0 0.3em; }
/* pixelfit.js sizes these to 480x270 x a whole number and places them; until it runs
   they sit at 1x, which is always a correct scale */
figure.shot, div.embed { width: 480px; margin: 1.6em 0; }
figure.shot img { border-radius: var(--r); display: block; max-width: 100%; height: auto; image-rendering: pixelated; background: #000; }
figure.shot figcaption { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.6em; text-align: center; }
div.embed { border-radius: var(--r); height: 270px; background: #0f1424; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #c2c3c7; }
div.embed button { font-size: 1.5rem; padding: 4px 24px; }
div.embed span { font-size: 0.95rem; }
div.embed.running iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
div.code.snippet { height: auto; margin: 1.2em 0; }
div.code.snippet pre.lua { flex: none; }

/* ---- index: a welcome window and a desktop of track folders */
.hero { margin: 28px 0 0; }
.hero-body { display: flex; align-items: center; gap: 4px clamp(16px, 4vw, 40px); flex-wrap: wrap; }
.hero .summary { flex: 1 1 100%; text-align: center; margin: 0 0 6px; }
/* the logo (art/demotron-logo.py, 290x50) in whole-number steps so its pixels stay even */
.hero h1.logo { flex: 1 1 100%; display: flex; justify-content: center; margin: 4px 0 8px; line-height: 0; }
.hero h1.logo img { image-rendering: pixelated; display: block; width: 915px; max-width: 100%; height: auto; }
@media (max-width: 960px) { .hero h1.logo img { width: 610px; } }
@media (max-width: 660px) { .hero h1.logo img { width: 305px; } }
.desktop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; margin: 30px 0 0; align-items: start; }
/* the first track is the one to start with: it gets the whole width, its files in columns */
.desktop > .track:first-child { grid-column: 1 / -1; }
.desktop > .track:first-child ol.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 18px; }
.track .blurb { margin: 0 0 0.8em; color: var(--ink-soft); }
ol.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ol.files a { border-radius: var(--r); display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
  color: var(--ink); text-decoration: none; padding: 6px 8px; }
ol.files a:hover, ol.files a:focus-visible { background: var(--yellow); color: #000; border-color: #000; outline: none; }
ol.files .lnum { grid-row: span 2; align-self: center; }
ol.files .ftitle { font: 400 1.5rem/1.05 var(--pixel); }
ol.files .fsum { font-size: 0.92em; color: var(--ink-soft); grid-column: 2; }
ol.files a:hover .fsum { color: #1d2b53; }
.soon { margin: 0.4em 0 0.2em; }
.soon::before { border-radius: 3px; content: ""; display: block; height: 10px; margin-bottom: 8px;
  background: repeating-linear-gradient(-45deg, #ffec27 0 10px, #000 10px 20px); }
.soon span { border-radius: 3px; display: inline-block; font: 700 0.8rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: #000; background: #ffec27; padding: 2px 10px; }
.track.empty { opacity: 0.92; }

/* ---- lesson footer bits */
nav.lessons { max-width: 820px; margin: 26px auto 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.built { max-width: 820px; margin: 12px auto 0; color: var(--desk-ink); font: 0.85rem var(--mono); }

/* ---- footer */
footer.site { margin-top: 48px; padding-block: 18px 34px; color: var(--desk-ink); }
footer.site a { color: var(--desk-ink); font-weight: 700; }
footer.site p { margin: 0.4em 0; }
footer.site .small { font-size: 0.85em; opacity: 0.9; }

/* ---- slideshow lessons: the slide's text on the left, the demo held on the right */
.workbench { align-items: start; }
.workbench .captions { max-width: none; margin: 0; }
.cartcol { position: sticky; top: 12px; }
/* the demo's code runs to the edges of the text window, so 52 columns fit beside a 2x demo */
div.code.slidecode { height: auto; margin: 1.2em calc(-1 * clamp(16px, 4vw, 34px)); border-radius: 0; }
div.code.slidecode pre.lua { flex: none; max-height: 70vh; font-size: 13px; }

/* ---- narrow screens: the demo on top, the text underneath */
@media (max-width: 1160px) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .cartcol { order: -1; position: static; }
  pre.lua { max-height: 60vh; }
}
@media (max-width: 600px) {
  .lesson-head { transform: none; }
  header.site .tag { display: none; }
}

/* ---- tables (| pipe | rows | in lesson.md): reference tables in "Picotron in depth" */
div.table { overflow-x: auto; margin: 1em 0; }
div.table table { border-collapse: collapse; width: 100%; font-size: 0.92em; background: var(--paper); }
div.table th, div.table td { text-align: left; vertical-align: top; padding: 0.35em 0.7em; border: 1px solid var(--line); }
div.table th { background: var(--pink); color: #1d2b53; font-weight: 700; }
div.table tr:nth-child(even) td { background: var(--paper-2); }
div.table code { white-space: nowrap; }

/* ---- a lesson not published yet (DRAFT file): shown only in the local build */
.draft-tag { display: inline-block; vertical-align: 0.3em; margin-left: 0.4em; padding: 0.15em 0.45em 0.1em;
  border-radius: 3px; background: var(--yellow); color: #000; font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; }
h1 .draft-tag { font-size: 0.8rem; }

/* a code name in a heading or title (# `spr` and `sspr`): code style, so lowercase reads as code */
h1 code, h2 code, h3 code, .ftitle code { font-family: var(--mono); font-size: 0.72em; font-weight: 700;
  padding: 0.05em 0.25em; vertical-align: 0.08em; }
/* reference tables beside the demo: use the window's full width and let code in cells wrap */
.workbench .captions div.table { margin-left: calc(-1 * clamp(16px, 4vw, 34px)); margin-right: calc(-1 * clamp(16px, 4vw, 34px)); }
.workbench .captions div.table table { font-size: 0.85em; }
.workbench .captions div.table code { white-space: normal; overflow-wrap: anywhere; }

/* ---- @layout scroll: one long page, every section showing; the demo follows the reading */
.workbench.scroll .captions section.caption {
  padding: 1.4em 0 2.2em; border-bottom: 2px dashed var(--pink); position: relative;
}
.workbench.scroll .captions section.caption:last-child { border-bottom: 0; }
.workbench.scroll .captions section.caption::before {
  content: ""; position: absolute; left: calc(-1 * clamp(16px, 4vw, 34px)); top: 1.2em; bottom: 2em;
  width: 5px; border-radius: 0 3px 3px 0; background: transparent; transition: background 0.2s;
}
.workbench.scroll .captions section.caption.current::before { background: var(--pink); }
.workbench.scroll p.whole { margin: 1.6em 0 0; font-weight: 700; }
div.code.excerpt { margin: 0.9em 0; border-radius: var(--r); background: #0f1424; overflow-x: auto; }
div.code.excerpt pre.lua { margin: 0; padding: 0.7em 1em; font-size: 13px; max-height: none; background: none; }
@media (max-width: 1160px) {
  /* the demo stays in view while the text scrolls under it */
  .workbench.scroll .cartcol { position: sticky; top: 0; z-index: 5; background: var(--desk); padding-bottom: 6px; }
}
div.code.excerpt .ln { display: none; }