/* All Corners of Raku — book theme. Light by default, dark under
   [data-theme-active="dark"], which the head script sets before first paint. */

:root {
  --paper: #fbfaf6;
  --paper-2: #f3f1ea;
  --ink: #1f2328;
  --ink-2: #4a5058;
  --ink-3: #737a83;
  --rule: #e2ded3;
  --accent: #b4235a;
  --accent-ink: #ffffff;
  --link: #1d5fa8;
  --code-bg: #f1eee6;
  --code-ink: #24292f;
  --out-bg: #ffffff;
  --out-rule: #d9d4c7;
  --note-bg: #fff6e0;
  --note-rule: #e9c46a;
  --engine-bg: #f4f1fb;
  --engine-rule: #c9bfe6;

  --tag-trap: #b45309;        --tag-trap-bg: #fdf0dc;
  --tag-quirk: #6d44b8;       --tag-quirk-bg: #efe8fb;
  --tag-bug: #b42318;         --tag-bug-bg: #fde7e4;
  --tag-undocumented: #0f766e; --tag-undocumented-bg: #dff3f0;
  --tag-unasserted: #3b5b8c;  --tag-unasserted-bg: #e5ecf7;
  --tag-6e: #2f7d32;          --tag-6e-bg: #e3f3e3;

  /* token colours for the baked rakupp highlighting (Pygments classes) */
  --tk-k: #a626a4; --tk-nb: #0f6fb3; --tk-nv: #9a3412; --tk-s: #2f7d32;
  --tk-mi: #b45309; --tk-c: #8a8f98; --tk-sr: #0e7490; --tk-o: #4a5058;

  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* raku.online's site bar (/theme/shell.css) sits above the book's own bar and
     draws with these names; they map onto the book's palette. */
  --bar-h: 48px;
  --top: calc(var(--shell-h, 0px) + var(--bar-h));
  --bg: var(--paper); --fg: var(--ink); --muted: var(--ink-3);
  --border: var(--rule); --sidebar: var(--paper-2);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

html[data-theme-active="dark"] {
  --paper: #16181c;
  --paper-2: #1d2025;
  --ink: #e6e3dc;
  --ink-2: #b9b5ac;
  --ink-3: #8b877f;
  --rule: #2e3238;
  --accent: #f06292;
  --accent-ink: #1a0b12;
  --link: #7fb2ee;
  --code-bg: #1f2329;
  --code-ink: #e2e0da;
  --out-bg: #111316;
  --out-rule: #353a42;
  --note-bg: #2a2416;
  --note-rule: #8a6d2a;
  --engine-bg: #221f2d;
  --engine-rule: #4d4470;

  --tag-trap: #f0a453;        --tag-trap-bg: #3a2a14;
  --tag-quirk: #b69cf0;       --tag-quirk-bg: #2c2340;
  --tag-bug: #f08a80;         --tag-bug-bg: #3d1d1a;
  --tag-undocumented: #5fd0c3; --tag-undocumented-bg: #14322f;
  --tag-unasserted: #92b1e0;  --tag-unasserted-bg: #1d2a3d;
  --tag-6e: #86cf88;          --tag-6e-bg: #1c321d;

  --tk-k: #d68fe0; --tk-nb: #6cb6f0; --tk-nv: #f0a070; --tk-s: #8fcf7f;
  --tk-mi: #f0b060; --tk-c: #7d828a; --tk-sr: #5cc8d8; --tk-o: #b9b5ac;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.62 var(--serif);
  font-optical-sizing: auto;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ---------- top bar ---------- */
header.top {
  position: sticky; top: var(--shell-h, 0px); z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: var(--bar-h); padding: 0 16px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 14px;
}
header.top .brand { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: .01em; }
header.top .spacer { flex: 1; }
header.top .corners-link { color: var(--ink-2); }
.nav-toggle { display: none; background: none; border: 0; font-size: 20px; color: var(--ink); cursor: pointer; padding: 4px; }
.predict { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; user-select: none; }
.predict input { accent-color: var(--accent); }
.theme-switch { position: relative; }
.theme-btn { background: none; border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); width: 32px; height: 30px; cursor: pointer; }
.theme-menu { position: absolute; right: 0; top: 36px; margin: 0; padding: 4px; list-style: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12); min-width: 130px; }
.theme-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; color: var(--ink); cursor: pointer; border-radius: 5px; font: inherit; }
.theme-menu button:hover, .theme-menu button[aria-checked="true"] { background: var(--paper-2); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
nav.toc {
  position: sticky; top: var(--top); align-self: start;
  height: calc(100vh - var(--top)); overflow-y: auto;
  padding: 18px 14px 40px 18px;
  border-right: 1px solid var(--rule);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.4;
}
.toc-home { display: block; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.toc-part { margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.toc-list, .toc-corners { list-style: none; margin: 0; padding: 0; }
.toc-list > li > a { display: flex; gap: 8px; padding: 4px 6px; border-radius: 6px; color: var(--ink-2); }
.toc-list > li > a:hover { background: var(--paper-2); text-decoration: none; }
.toc-list > li.current > a { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.toc-list .n { color: var(--ink-3); min-width: 1.4em; font-variant-numeric: tabular-nums; }
.toc-list > li.done > a::after { content: "✓"; margin-left: auto; color: var(--tag-undocumented); }
.toc-corners { margin: 4px 0 8px 10px; border-left: 1px solid var(--rule); }
/* The current chapter's corners fold away with the ▾ beside its title. */
.toc-list > li { position: relative; }
.toc-list > li.has-corners > a { padding-right: 32px; }
.toc-fold {
  position: absolute; top: 1px; right: 2px; width: 28px; height: 28px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--ink-2); font-size: 17px; line-height: 28px; padding: 0;
  transition: transform .15s ease;
}
.toc-fold:hover { background: var(--rule); color: var(--ink); }
.toc-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html.toc-folded .toc-list > li.has-corners > .toc-corners { display: none; }
html.toc-folded .toc-fold { transform: rotate(-90deg); }
.toc-corners a { display: flex; gap: 6px; padding: 3px 8px; color: var(--ink-3); font-size: 12.5px; }
.toc-corners a code { font-size: 11.5px; }
.toc-corners a.active { color: var(--accent); }
.toc-corners .n { min-width: 2.4em; }

main.page { padding: 36px 48px 80px; min-width: 0; }
main.page > * { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ---------- chapter ---------- */
.chapter-head { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.kicker { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.chapter-head h1 { font-size: 40px; line-height: 1.15; margin: 8px 0 12px; letter-spacing: -.01em; }
.chapter-head .summary { font-size: 20px; color: var(--ink-2); margin: 0 0 10px; font-style: italic; }
.chapter-head .meta { font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin: 0; }

article.chapter > p, section.corner > p, section.corner > ul, section.corner > ol { hyphens: auto; }
section.corner { margin: 44px 0 0; scroll-margin-top: calc(var(--top) + 18px); }
section.corner > h2 {
  font-size: 25px; line-height: 1.3; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
section.corner > h2 .num { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); min-width: 2.6em; }
section.corner > h2 .t { flex: 1 1 60%; }
section.corner > h2 code, section.corner > h3 code { font-size: .86em; }
section.corner h3 { font-size: 19px; margin: 26px 0 8px; }
p code, li code, td code, aside code {
  font-size: .84em; background: var(--code-bg); padding: .08em .32em; border-radius: 4px; white-space: nowrap;
}
.tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tag { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag-trap { color: var(--tag-trap); background: var(--tag-trap-bg); }
.tag-quirk { color: var(--tag-quirk); background: var(--tag-quirk-bg); }
.tag-bug { color: var(--tag-bug); background: var(--tag-bug-bg); }
.tag-undocumented { color: var(--tag-undocumented); background: var(--tag-undocumented-bg); }
.tag-unasserted { color: var(--tag-unasserted); background: var(--tag-unasserted-bg); }
.tag-6e { color: var(--tag-6e); background: var(--tag-6e-bg); }

aside.note { margin: 18px 0; padding: 12px 16px; background: var(--note-bg); border-left: 3px solid var(--note-rule); border-radius: 0 8px 8px 0; font-size: 16.5px; }
aside.note p { margin: 0; }
pre.plain { background: var(--code-bg); padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 14px; }
.table-wrap { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; font-size: 15.5px; width: 100%; }
th, td { border-bottom: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
th { font-family: var(--sans); font-size: 13px; color: var(--ink-2); }

/* ---------- examples ---------- */
figure.ex { margin: 18px 0 22px; }
figure.ex .code { position: relative; }
figure.ex pre.src {
  margin: 0; padding: 14px 16px; padding-right: 86px;
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 10px 10px 0 0; border: 1px solid var(--out-rule); border-bottom: 0;
  font-size: 14.5px; line-height: 1.55; overflow-x: auto; white-space: pre;
}
figure.ex-local pre.src, figure.ex-nocheck pre.src { padding-right: 120px; }
figure.ex .run {
  position: absolute; top: 9px; right: 9px;
  font: 600 12.5px var(--sans); color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 6px; padding: 5px 11px; cursor: pointer;
}
figure.ex .run:hover { filter: brightness(1.08); }
figure.ex .local-label { position: absolute; top: 11px; right: 12px; font: 600 11px var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
figure.ex .code.live pre.src { display: none; }
/* A runnable example is a live editor from the start. Until raku.js takes
   it over, the highlighted code shows as a complete box of its own, and the
   reference output below stands apart from it. */
figure.ex .code.embed pre.src { border-radius: 10px; border-bottom: 1px solid var(--out-rule); padding-right: 16px; }
figure.ex .code.embed ~ .out { border-radius: 10px; border-top: 1px solid var(--out-rule); margin-top: 8px; }
figure.ex .code.embed ~ .out .reveal { border-radius: 10px; }
figure.ex .engine-cap { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 5px 2px; }
figure.ex .code.live { margin-bottom: 0; }
figure.ex .stdin { background: var(--code-bg); border: 1px solid var(--out-rule); border-top: 1px dashed var(--out-rule); border-bottom: 0; padding: 6px 16px 8px; }
figure.ex .stdin pre { margin: 2px 0 0; font-size: 13.5px; }
figure.ex .lbl { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
figure.ex .out {
  position: relative;
  background: var(--out-bg); border: 1px solid var(--out-rule); border-radius: 0 0 10px 10px;
  padding: 8px 16px 12px;
}
figure.ex .out pre { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
figure.ex .out .empty { color: var(--ink-3); font-style: italic; font-family: var(--serif); }
figure.ex .out .lbl.err { margin-top: 8px; color: var(--tag-bug); }
figure.ex .out .err-text { color: var(--tag-bug); }
figure.ex .reveal { display: none; }
html.predict-on figure.ex .out:not(.revealed) pre { filter: blur(7px); user-select: none; pointer-events: none; }
html.predict-on figure.ex .out:not(.revealed) .lbl.err { visibility: hidden; }
html.predict-on figure.ex .out:not(.revealed) .reveal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: absolute; inset: 0; width: 100%;
  background: color-mix(in srgb, var(--out-bg) 55%, transparent);
  border: 0; border-radius: 0 0 10px 10px; cursor: pointer;
  font: 600 14px var(--sans); color: var(--ink-2);
}
html.predict-on figure.ex .reveal span { color: var(--accent-ink); background: var(--accent); padding: 3px 10px; border-radius: 6px; }
details.engine-note { margin: 8px 0 0; padding: 8px 14px; background: var(--engine-bg); border: 1px solid var(--engine-rule); border-radius: 8px; font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); }
details.engine-note summary { cursor: pointer; }
details.engine-note pre { font-size: 13.5px; background: var(--out-bg); padding: 8px 12px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; margin: 8px 0; }
details.engine-note p { margin: 4px 0 2px; font-size: 12.5px; color: var(--ink-3); }
html.predict-on figure.ex .out:not(.revealed) ~ details.engine-note { display: none; }

/* baked highlighting */
pre.src .k, pre.src .kd, pre.src .kn { color: var(--tk-k); }
pre.src .nb, pre.src .nf, pre.src .nc, pre.src .nt { color: var(--tk-nb); }
pre.src .nv, pre.src .na { color: var(--tk-nv); }
pre.src .s, pre.src .s1, pre.src .s2, pre.src .sx, pre.src .se, pre.src .si { color: var(--tk-s); }
pre.src .mi, pre.src .mf, pre.src .mh, pre.src .mo, pre.src .m { color: var(--tk-mi); }
pre.src .c, pre.src .c1, pre.src .cm { color: var(--tk-c); font-style: italic; }
pre.src .sr { color: var(--tk-sr); }
pre.src .o, pre.src .p { color: var(--tk-o); }

/* ---------- chapter foot ---------- */
.chapter-foot { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 14px; }
.chapter-foot .done { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); cursor: pointer; }
.chapter-foot .done input { accent-color: var(--accent); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; }
.pager a { max-width: 48%; }
.pager .next { text-align: right; margin-left: auto; }

/* ---------- home ---------- */
.cover { text-align: center; padding: 40px 0 30px; }
.cover h1 { font-size: 58px; line-height: 1.05; margin: 0 0 14px; letter-spacing: -.02em; }
.cover .subtitle { font-size: 22px; font-style: italic; color: var(--ink-2); margin: 0 auto 14px; max-width: 560px; }
.cover .byline { font-family: var(--sans); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px auto 40px; }
.stats div { background: var(--paper-2); border-radius: 10px; padding: 14px 16px; font-family: var(--sans); }
.stats b { display: block; font-size: 28px; font-family: var(--serif); color: var(--accent); }
.stats span { font-size: 13px; color: var(--ink-2); }
.contents .part { margin-bottom: 34px; }
.contents h2 { font-size: 13px; font-family: var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.contents .part-intro { margin: 0 0 10px; color: var(--ink-2); font-size: 16.5px; }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li { border-top: 1px solid var(--rule); padding: 10px 0; }
.chapters li a { display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
.chapters li a:hover { text-decoration: none; }
.chapters li a:hover .t { color: var(--link); }
.chapters .n { font-family: var(--mono); font-size: 14px; color: var(--ink-3); min-width: 1.6em; }
.chapters .t { font-size: 20px; font-weight: 600; flex: 1; }
.chapters .c { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.chapters li.done .c::after { content: " ✓"; color: var(--tag-undocumented); }
.chapters li p { margin: 2px 0 0 calc(1.6em + 12px); font-size: 15.5px; color: var(--ink-2); }

/* ---------- corners index ---------- */
.filters { position: sticky; top: var(--top); z-index: 5; background: var(--paper); padding: 10px 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.filters input { width: 100%; font: 16px var(--sans); padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--out-bg); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font: 600 12px var(--sans); border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.chip span { opacity: .7; font-weight: 400; }
.chip.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.ci-chapter h2 { font-size: 20px; margin: 26px 0 6px; }
.ci-chapter ul { list-style: none; padding: 0; margin: 0; }
.ci-chapter li { padding: 5px 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ci-chapter li a { color: var(--ink); flex: 1 1 60%; }
.ci-chapter li .n { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-right: 6px; }
.ci-chapter li[hidden], .ci-chapter[hidden] { display: none; }

/* ---------- narrow screens ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  nav.toc { position: fixed; left: 0; top: var(--top); height: calc(100vh - var(--top)); z-index: 30; width: 300px; max-width: 86vw; background: var(--paper); transform: translateX(-102%); transition: transform .18s ease; box-shadow: 0 0 30px rgba(0,0,0,.18); }
  body.nav-open nav.toc { transform: none; }
  .nav-toggle { display: inline-block; }
  main.page { padding: 24px 16px 60px; }
  header.top { gap: 10px; }
  header.top .corners-link { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .chapter-head h1 { font-size: 31px; }
  .cover h1 { font-size: 40px; }
  .stats { grid-template-columns: 1fr; }
  section.corner > h2 { font-size: 21px; }
  header.top .brand { font-size: 16px; }
  .predict .wide { display: none; }
  figure.ex pre.src { font-size: 13.5px; }
}

/* once the editor has replaced the static code, the output box stands alone */
figure.ex .code.live ~ .out, figure.ex .code.live ~ .stdin { border-radius: 10px; border-top: 1px solid var(--out-rule); margin-top: 8px; }
figure.ex .code.live ~ .out .reveal { border-radius: 10px; }

/* ---------- cover editor line, site footer ---------- */
.cover .editor { font-family: var(--serif); font-size: 17px; color: var(--ink-2); margin: 6px 0 0; }
.site-foot { margin-top: 70px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }
.site-foot p { margin: 0 0 4px; }
.site-foot b { color: var(--ink-2); }

/* The site bar moves the theme switcher into itself; until it does, keep it in place. */
header.top .theme-switch { top: auto; }