/* RonDB theme, after www.rondb.com: RonDB yellow #FFDF00 on near-black #1a1b1f, Roboto. A deck links engine/slides.css, then this.
   Every slide carries a black header bar with the yellow RonDB logo (the site's navigation bar) and a yellow rule at its foot.
   Yellow is a fill, never text on white: the accent's text uses (kicker, marked words) become ink on a yellow highlighter strip.
   The deck names itself once, for the bar: :root { --module: 'RONDB TRAINING · 03 · CREATING TABLES'; } */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=JetBrains+Mono:wght@400;600;800&display=swap');

:root {
  --ink: #1a1b1f;
  --ink-2: #43464d;
  --mute: #8d9096;
  --line: #e2e2e2;
  --paper: #ffffff;
  --wash: #f4f4f4;
  /* RonDB yellow and its light and pale tints */
  --rondb: #ffdf00;
  --rondb-light: #fee640;
  --rondb-wash: #fff6bf;
  /* functional colours: flows and right (green), read flows (blue), annotations (orange), wrong (red-orange) */
  --green: #179c6c;
  --green-deep: #117350;
  --green-wash: #e3f4ec;
  --blue: #0082f3;
  --orange: #fe8c00;
  --orange-ink: #b35a00;
  --band: #fff8e0;
  --red: #fe4300;
  --red-ink: #c23400;
  --red-wash: #ffe6dc;
  /* brand accent: progress bar, bullets, link underlines, highlighter, f-accent / s-accent paints */
  --accent: var(--rondb);
  --accent-deep: #8f7600;
  --accent-wash: var(--rondb-wash);
  /* dark surfaces: the header bar, code, terminals, black boxes */
  --dark: #1a1b1f;
  --dark-2: #26272c;
  --dark-edge: #000000;
  --dark-line: #45474d;
  --dark-fg: #ededed;
  --dark-out: #c8c8c8;
  --dark-mute: #8a8a8a;
  --dark-green: #65d3af;
  --dark-orange: var(--rondb-light);
  /* deck chrome: the stage around the slide, HUD and overview outlines */
  --stage: #0d0d0d;
  --stage-line: #444444;
  --lift: 0 6px 10px rgb(0 0 0 / .12);
  --sans: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --module: '';
  /* the header bar's height, and the room a slide's content leaves for it */
  --bar-h: calc(var(--u) * 4);
}

/* ---------- chrome: header bar with the logo and the module name, yellow rule at the foot ---------- */
.slide::before {
  content: ''; position: absolute; z-index: 2; left: 0; top: 0; right: 0; height: var(--bar-h);
  background: var(--dark) url('rondb.svg') no-repeat calc(var(--u) * 2.4) center / auto calc(var(--u) * 2.2);
}
.slide::after {
  content: var(--module); position: absolute; z-index: 2; right: calc(var(--u) * 2.4); top: calc(var(--bar-h) / 2); transform: translateY(-50%);
  font: 600 calc(var(--u) * .95) var(--mono); letter-spacing: .08em; color: var(--rondb-light); white-space: pre;
}
.slide > .in { padding-top: calc(var(--bar-h) + var(--u) * 3.6); padding-bottom: calc(var(--u) * 4.6); }
.slide > .in::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * .5); background: var(--accent); }
.slide.bare::before, .slide.bare::after, .slide.bare > .in::before { display: none; }
/* with <html data-menu> the module name is the menu link: icon and name, the name where the plain label stands */
.slide > a.menu {
  right: calc(var(--u) * 1.6); top: calc(var(--bar-h) / 2); transform: translateY(-50%);
  font: 600 calc(var(--u) * .95) var(--mono); letter-spacing: .08em; color: var(--rondb-light); white-space: pre;
}
.slide > a.menu::after { content: var(--module); }
.slide > a.menu:hover, .slide > a.menu:focus-visible { color: var(--ink); background: var(--rondb); outline: 0; }
.slide:has(> a.menu)::after, .slide.bare > a.menu { display: none; }

/* ---------- type ---------- */
h1, h2 { letter-spacing: -.02em; }
h1 { font-weight: 900; }
h2 { font-size: calc(var(--u) * 3.1); font-weight: 700; max-width: 34ch; }
.sl { color: var(--ink); }
.kicker { font-size: calc(var(--u) * 1.1); }
.kicker b { color: var(--ink); background: var(--accent); padding: .12em .45em; font-weight: 700; }
mark, .hl { background: var(--accent); color: var(--ink); padding: 0 .18em; }
em { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, var(--rondb-light) 62%); }
.slide.dark em { color: var(--rondb); background: none; border: 0; }
a { border-bottom-width: 2px; }
a:hover { color: var(--ink); background: var(--rondb-wash); }
/* bullets: small yellow squares edged in ink */
ul.list li::before { width: .5em; height: .5em; top: .45em; background: var(--accent); outline: 1.5px solid var(--ink); }
.slide.dark ul.list li::before { outline-color: var(--accent); }

/* ---------- slide variants ---------- */
/* hero: the site's yellow banner, for module title slides */
.slide.hero { background: var(--rondb); color: var(--ink); }
.slide.hero > .in::before { background: var(--ink); }
.slide.hero .kicker { color: var(--ink); }
.slide.hero .kicker b { background: var(--ink); color: var(--rondb); }
.slide.hero h1 { font-size: calc(var(--u) * 6); max-width: 18ch; line-height: 1.02; }
.slide.hero .sub { font-size: calc(var(--u) * 2.3); font-weight: 500; margin-top: calc(var(--u) * 2.2); max-width: 46ch; }
/* section divider: black, the number in yellow */
.slide.sec { background: var(--dark); color: var(--paper); }
.slide.sec .num { font: 700 calc(var(--u) * 1.4) var(--mono); color: var(--rondb); letter-spacing: .08em; margin-bottom: calc(var(--u) * 1.6); }
.slide.sec h1 { font-size: calc(var(--u) * 5.6); max-width: 20ch; }
.slide.sec .sub { font-size: calc(var(--u) * 2); color: var(--dark-out); margin-top: calc(var(--u) * 1.8); max-width: 52ch; }
.slide.dark { background: var(--dark); }
.slide.dark .kicker b { color: var(--ink); }

/* ---------- boxes: yellow with a heavy ink edge, or ink with yellow type (the site's stat boxes) ---------- */
.ybox, .kbox { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); border: 3px solid var(--ink); }
.ybox { background: var(--rondb); color: var(--ink); }
.kbox { background: var(--ink); color: var(--rondb); }
.ybox .stat, .kbox .stat { font-size: calc(var(--u) * 4.2); }
.ybox p, .kbox p { font-weight: 700; margin-top: calc(var(--u) * .5); }
.obox { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); border: 2px solid var(--ink); background: var(--paper); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); }
.chip { font: 600 calc(var(--u) * 1) var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .35em .8em; border: 1.5px solid var(--ink); }
.chip.y { background: var(--rondb); }
.chip.k { background: var(--ink); color: var(--rondb); border-color: var(--ink); }

/* ---------- tables ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 1.45); }
table.t th { text-align: left; font: 700 calc(var(--u) * .95) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); padding: calc(var(--u) * .5) calc(var(--u) * .8); background: var(--rondb); border-bottom: 2px solid var(--ink); }
table.t td { padding: calc(var(--u) * .75) calc(var(--u) * .8); border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td:first-child { font-weight: 700; }
table.t.plain td:first-child { font-weight: 400; }
table.t code { font-size: .85em; }
table.t tr.hi td { background: var(--rondb-wash); }

/* ---------- source line under a slide's content ---------- */
.src { margin-top: auto; padding-top: calc(var(--u) * 1); font: 500 calc(var(--u) * .95) var(--mono); color: var(--ink-2); }
.src code { background: none; padding: 0; }

/* ---------- layout helpers shared by the training decks ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4); align-items: start; }
/* a caption under a diagram: two lines tall, so a swapset of them never moves the slide */
.cap { font-size: calc(var(--u) * 1.75); line-height: 1.4; max-width: 64ch; min-height: 2.8em; }
.cap b { background: var(--rondb); padding: 0 .15em; }
.next { margin-top: auto; font: 700 calc(var(--u) * 1.3) var(--mono); letter-spacing: .04em; }
.next a::after { content: '\a0→'; }
/* the closing slide of a training deck: the next module as a yellow link, then every module by block,
   the current one black, linking to its own first slide; written by 2026-10/rondb-training/nav.py */
a.go { border: 0; background: var(--rondb); padding: 0 .25em; }
a.go::after { content: '\a0→'; }
a.go:hover { color: var(--ink); background: var(--rondb-light); }
.modules { columns: 4; column-gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 2.6); }
.modules > div { break-inside: avoid; margin-bottom: calc(var(--u) * 1.6); }
.modules h3 { font-size: calc(var(--u) * 1.3); margin-bottom: calc(var(--u) * .4); padding-bottom: calc(var(--u) * .3); border-bottom: 3px solid var(--rondb); }
.modules ol { list-style: none; padding: 0; margin: 0; }
.modules li { font-size: calc(var(--u) * 1.22); line-height: 1.3; }
.modules li > a, .modules li > span { display: block; border: 0; padding: calc(var(--u) * .28) calc(var(--u) * .45); }
.modules li b { font-family: var(--mono); margin-right: .45em; }
.modules li.up > a { background: var(--rondb); font-weight: 700; }
.modules li[aria-current] > a { background: var(--ink); color: var(--paper); font-weight: 700; }
.modules li[aria-current] > a:hover { color: var(--rondb); }
html:not(.deck) .modules { columns: 12em 4; } /* doc mode: one column on a phone */
/* a phone sideways: each module link a thumb's height (WCAG 2.5.8), as the engine does for buttons */
@media (max-height: 500px) { html.deck .modules li > a { display: flex; align-items: center; min-height: 24px; } }
/* SQL beside an explanation: pre.sql with .k keywords and .c comments; .idx puts code left, .gets panels right */
pre.sql { font-size: calc(var(--u) * 1.5); line-height: 1.55; }
pre .k { color: var(--rondb); }
pre .c, pre .dim { color: var(--dark-mute); }
.idx { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * 3.4); align-items: start; margin-top: calc(var(--u) * 2.4); }
.gets { display: grid; gap: calc(var(--u) * .8); }
.gets > div { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); border: 2px solid var(--ink); font-size: calc(var(--u) * 1.45); }
.gets > div.y { background: var(--rondb); }
.gets > div.k { background: var(--ink); color: var(--paper); }
.gets b { font-size: calc(var(--u) * 1.5); }
/* numbered steps: yellow number squares; a two-column checklist */
.steps { counter-reset: s; list-style: none; padding: 0; margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.6); }
.steps li { counter-increment: s; display: grid; grid-template-columns: calc(var(--u) * 3.4) 1fr; align-items: baseline; margin-bottom: calc(var(--u) * 1.1); }
.steps li::before { content: counter(s); font: 800 calc(var(--u) * 1.5) var(--mono); background: var(--rondb); border: 2px solid var(--ink); width: calc(var(--u) * 2.4); text-align: center; }
.steps code { font-size: .9em; }
.check { columns: 2; column-gap: calc(var(--u) * 4); font-size: calc(var(--u) * 1.55); margin-top: calc(var(--u) * 2.4); }
.check li { break-inside: avoid; margin-bottom: calc(var(--u) * 1); }
/* a real terminal beside a reading guide */
.desc { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(var(--u) * 3); align-items: start; margin-top: calc(var(--u) * 1.6); }
.desc .term { font-size: calc(var(--u) * .98); }
.term .body { white-space: pre; }
.term .hd { color: var(--rondb-light); }
.term .hl { background: none; color: var(--rondb); padding: 0; }
/* continuation lines of a multi-line command, as in the RonSQL examples; bold marks where a CTE or the main query starts */
.term .cont::before { content: '> '; color: var(--dark-mute); }
.term .cont { color: var(--paper); }
.term .cont b { font-weight: 800; color: var(--rondb); }

/* ---------- diagrams ---------- */
svg.dia text { font-size: 20px; }
/* diagram labels in mixed case: easier to read than the engine's spaced capitals, and identifiers keep their case */
svg.dia .lbl { font-size: 15px; letter-spacing: .01em; text-transform: none; }
svg.dia .t { font-weight: 700; }
svg.dia .box.y { fill: var(--rondb); stroke: var(--ink); }
svg.dia .box.k { fill: var(--ink); }
svg.dia .w { fill: var(--paper); }
svg.dia .wy { fill: var(--rondb); }

/* ---------- motion: one curve and one clock, as in the FSS theme ----------
   .rise  a block settling in from a short drop and a blur. Deck mode only; doc mode, print, overview and reduced motion show end states. */
:root { --expo: cubic-bezier(.16, 1, .3, 1); }
html.deck .slide .rise { opacity: 0; }
html.deck .slide.here .rise { animation: rise 1s var(--expo) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(calc(var(--u) * 1.2)); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { html.deck .slide .rise { opacity: 1; animation: none; } }
html.deck.overview .slide .rise { opacity: 1; animation: none; }