/* fol theme: Future Office Labs.
   Paper and ink, a line-printer for code and the log, Smalltalk window chrome for the
   project browser, outline numbers in the margin. Light by default; html[data-theme=dark]
   is the switch. Every colour is a custom property, so site.toml [vars.colours] /
   [vars.colours_dark] can change them (e.g. accent = "#E0186C"). */

:root {
  --paper: #F6F2F1;   /* page */
  --sheet: #FFFDFC;   /* windows, printouts */
  --ink: #1E191B;
  --soft: #4B4347;
  --dim: #6C6266;
  --rule: #DDD3D3;
  --link: #1D4E7A;
  --accent: #E0186C;      /* lamps, cursor, selection, rules: a fill colour */
  --accent-ink: #B3155A;  /* the accent as text (§ labels), dark enough to read */
  --sel-fg: #FFFFFF;      /* text on an --accent fill */
  --shadow: #1E191B;      /* hard window shadows */
  --band: #ECE5E4;        /* the dotted desk */
  --dots: #CBBFBF;
  --bar: #E4F0DC;         /* green-bar stripes */
  --lift: rgba(40, 35, 25, .10);

  /* Code. WCHNT hues (wchnt site, live.css) darkened for paper; Pygments tokens share them. */
  --tok-comment: #6E737A;
  --tok-string: #3D7A0F;
  --tok-number: #B8471E;
  --tok-keyword: #7B3FC4;
  --tok-class: #2D5BD8;
  --tok-type: #0A7AA0;
  --tok-method: #2D5BD8;
  --tok-name: #C2364A;
  --tok-path: #565C7A;
  --tok-sigil: #8A6500;
  --tok-rel-context: #8A6500;
  --tok-rel-delegate: #00796B;
  --tok-rel-reactive: #8E3FA0;
  --tok-rel-external: #C62828;
  --tok-rel-mailbox: #B05A00;
  --code-ink: #1C1A17;

  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --term: "VT323", "IBM Plex Mono", monospace;
  --display: "Major Mono Display", "IBM Plex Mono", monospace;
  /* Titles (page h1, the browser's project name, headings in text). VT323 is sized up
     about a quarter to match the serif; --title-scale does that. */
  --title: var(--term);
  --title-weight: 400;
  --title-scale: 1.25;
  --measure: 36em;
  --wide: 1180px;
  color-scheme: light;
}

:root[data-theme=dark] {
  --paper: #15130F;
  --sheet: #1D1A15;
  --ink: #EFE7DA;
  --soft: #D2C9BA;
  --dim: #A39A8A;
  --rule: #3A3328;
  --link: #8EC5FF;
  --accent: #FF7A3D;
  --accent-ink: #FF7A3D;
  --sel-fg: #15130F;
  --shadow: #000;
  --band: #1A1713;
  --dots: #312A21;
  --bar: #1E2A1C;
  --lift: rgba(0, 0, 0, .5);

  /* The WCHNT site's own colours, unchanged. */
  --tok-comment: #c4c7cc;
  --tok-string: #c3e88d;
  --tok-number: #f78c6c;
  --tok-keyword: #c792ea;
  --tok-class: #82aaff;
  --tok-type: #89ddff;
  --tok-method: #82aaff;
  --tok-name: #f07178;
  --tok-path: #babed8;
  --tok-sigil: #ffcb6b;
  --tok-rel-context: #ffcb6b;
  --tok-rel-delegate: #64ffda;
  --tok-rel-reactive: #ce93d8;
  --tok-rel-external: #ff8a80;
  --tok-rel-mailbox: #ffab40;
  --code-ink: #E6DFD2;
  color-scheme: dark;
}

/* -- accents ------------------------------------------------------------------------
   The page script picks one accent per visit for each mode from site.toml
   accents_light / accents_dark, and sets html[data-accent-light] / [data-accent-dark].
   Without the script: magenta in light, orange in dark (the defaults above). */
:root[data-accent-light=magenta]:not([data-theme=dark]) {
  --paper: #F6F2F1;
  --sheet: #FFFDFC;
  --ink: #1E191B;
  --soft: #4B4347;
  --dim: #6C6266;
  --rule: #DDD3D3;
  --band: #ECE5E4;
  --dots: #CBBFBF;
  --accent: #E0186C;
  --accent-ink: #B3155A;
  --sel-fg: #FFFFFF;
  --link: #1D4E7A;
  --shadow: #1E191B;
}
:root[data-accent-light=cobalt]:not([data-theme=dark]) {
  --paper: #F3F3EF;
  --sheet: #FFFFFD;
  --ink: #16171C;
  --soft: #43454D;
  --dim: #61636B;
  --rule: #D6D7D8;
  --band: #E7E7E3;
  --dots: #C2C3C4;
  --accent: #2F54FF;
  --accent-ink: #2340D8;
  --sel-fg: #FFFFFF;
  --link: #2340D8;
  --shadow: #16171C;
}
:root[data-accent-light=phosphor]:not([data-theme=dark]) {
  --paper: #F2F4F0;
  --sheet: #FDFFFC;
  --ink: #18201D;
  --soft: #3F4A45;
  --dim: #5F6A64;
  --rule: #D2D9D3;
  --band: #E5EAE5;
  --dots: #BFC9C2;
  --accent: #00C08B;
  --accent-ink: #007A5A;
  --sel-fg: #0B1A14;
  --link: #24448F;
  --shadow: #18201D;
}
:root[data-accent-light=orange]:not([data-theme=dark]) {
  --paper: #F4F2EC;
  --sheet: #FFFEFA;
  --ink: #1C1A17;
  --soft: #4A463E;
  --dim: #6B665C;
  --rule: #D8D3C8;
  --band: #E9E6DE;
  --dots: #C6C0B4;
  --accent: #FF5A1F;
  --accent-ink: #C43C00;
  --sel-fg: #1C1A17;
  --link: #1D4E7A;
  --shadow: #1C1A17;
}
:root[data-theme=dark][data-accent-dark=orange] {
  --paper: #15130F;
  --sheet: #1D1A15;
  --ink: #EFE7DA;
  --soft: #D2C9BA;
  --dim: #A39A8A;
  --rule: #3A3328;
  --band: #1A1713;
  --dots: #312A21;
  --accent: #FF7A3D;
  --accent-ink: #FF7A3D;
  --sel-fg: #15130F;
  --link: #8EC5FF;
}
:root[data-theme=dark][data-accent-dark=phosphor] {
  --paper: #0E1412;
  --sheet: #141C19;
  --ink: #DDF3EA;
  --soft: #BCD3C9;
  --dim: #8FA59B;
  --rule: #2C3A34;
  --band: #111916;
  --dots: #22302A;
  --accent: #3DFFB8;
  --accent-ink: #3DFFB8;
  --sel-fg: #0E1412;
  --link: #7FD4FF;
}
:root[data-theme=dark][data-accent-dark=magenta] {
  --paper: #151114;
  --sheet: #1D171B;
  --ink: #F2E6EC;
  --soft: #D3C3CB;
  --dim: #A4949C;
  --rule: #3B2F36;
  --band: #191418;
  --dots: #33272E;
  --accent: #FF5FA2;
  --accent-ink: #FF5FA2;
  --sel-fg: #151114;
  --link: #8EC5FF;
}
:root[data-theme=dark][data-accent-dark=cobalt] {
  --paper: #10121A;
  --sheet: #171A24;
  --ink: #E4E8F5;
  --soft: #C3C8D8;
  --dim: #959BB0;
  --rule: #2E3346;
  --band: #13151E;
  --dots: #262B3B;
  --accent: #8FA2FF;
  --accent-ink: #8FA2FF;
  --sel-fg: #10121A;
  --link: #FFB86B;
}

/* -- base ---------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}
a { color: var(--link); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--sheet); padding: 4px 10px; z-index: 10; }

/* -- masthead ------------------------------------------------------------------------ */

.mast {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 26px 24px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px;
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.mark { width: 54px; height: 54px; flex: none; color: var(--ink); }
.word { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: -1px; }
.cur {
  display: inline-block; width: .42em; height: .78em; margin-left: 6px;
  background: var(--accent); vertical-align: -3px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-family: var(--mono); font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink); padding-bottom: 1px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--accent); color: var(--ink); }
.nav a.on { border-bottom-color: var(--accent); }
.nav b { font-weight: 400; color: var(--accent-ink); }
.theme-toggle {
  font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ink); background: var(--sheet);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow);
  padding: 1px 9px;
}
.theme-toggle::before { content: "◐ "; color: var(--accent-ink); }
.theme-toggle:active { transform: translate(2px, 2px); box-shadow: none; }

/* -- shared pieces ------------------------------------------------------------------- */

.lamp {
  display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid currentColor; vertical-align: 1px;
}
.lamp.lit { background: var(--accent); border-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 15px; line-height: 1.4;
  color: var(--ink); background: var(--sheet); text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow);
  padding: 6px 14px;
}
.btn:hover { color: var(--ink); background: var(--paper); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn-ink { background: var(--ink); color: var(--sheet); }
.btn-ink:hover { background: var(--ink); color: var(--sheet); text-decoration: underline; }

.num, .eyebrow, .printout-head h2, .win-bar h2 { font-family: var(--term); font-weight: 400; }
.eyebrow { margin: 0 0 6px; font-size: 24px; line-height: 1.1; color: var(--accent-ink); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* Outline layout: a number in the left margin, content beside it. */
.outline { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
.outline > .num { margin: 0; font-size: 30px; line-height: 1.25; color: var(--accent-ink); text-align: right; }
@media (max-width: 700px) {
  .outline { grid-template-columns: minmax(0, 1fr); }
  .outline > .num { text-align: left; font-size: 24px; }
}

/* The routing-slip grid, used for post and project metadata. */
.slipbox {
  display: inline-grid; grid-template-columns: auto auto; margin: 6px 0 30px;
  font-family: var(--mono); font-size: 13px; background: var(--sheet); border: 1px solid var(--rule);
}
.slipbox > span { padding: 5px 12px; border-bottom: 1px solid var(--rule); }
.slipbox > span:nth-last-child(-n+2) { border-bottom: 0; }
.slipbox .k { color: var(--dim); border-right: 1px solid var(--rule); letter-spacing: 1px; }
.slipbox .btn { font-size: 13px; padding: 1px 10px; box-shadow: 2px 2px 0 var(--shadow); }

/* -- Smalltalk window and the project browser ---------------------------------------- */

.win {
  background: var(--sheet); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--shadow);
  font-family: var(--mono); font-size: 15px; line-height: 1.5;
}
.win-bar {
  display: flex; align-items: center; gap: 12px; padding: 5px 10px;
  border-bottom: 2px solid var(--ink);
  background-image: repeating-linear-gradient(180deg, var(--ink) 0, var(--ink) 1.5px, var(--sheet) 1.5px, var(--sheet) 4px);
}
.win-box { width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--sheet); flex: none; }
.win-pad { width: 14px; flex: none; }
.win-bar h2 { margin: 0 auto; padding: 0 12px; background: var(--sheet); font-size: 24px; line-height: 1.2; }

.panes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 2px solid var(--ink); min-height: 200px;
}
.pane { position: relative; display: flex; flex-direction: column; padding: 4px 0; }
.pane-cats, .pane-projs { border-right: 1px solid var(--ink); padding-right: 10px; }
.pane-cats::after, .pane-projs::after {     /* scroll bar hint */
  content: ""; position: absolute; top: 6px; right: 2px; bottom: 6px; width: 6px;
  border-left: 1px solid var(--ink);
  background: repeating-linear-gradient(180deg, var(--dots) 0, var(--dots) 1px, transparent 1px, transparent 3px);
}
.pane .item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; color: var(--ink); text-decoration: none; cursor: pointer;
}
.pane .item:hover { background: var(--band); color: var(--ink); }
.pane-cats .item.on { background: var(--ink); color: var(--sheet); }
.pane-projs .item.on { background: var(--accent); color: var(--sel-fg); }
.pane-projs .item.on .lamp { border-color: var(--sel-fg); }
.pane-projs .item.on .lamp.lit { background: var(--sel-fg); }
.pane-links { padding: 6px 12px; gap: 2px; }
.pane-head { color: var(--dim); font-size: 13px; }
.plist, .llist, .desc { display: none; }
.plist.on, .llist.on { display: flex; flex-direction: column; }
.desc.on { display: block; }
.desc { padding: 18px 24px 22px; font-family: var(--serif); }
.desc h3 { margin: 0 0 8px; font-family: var(--title); font-weight: var(--title-weight); font-size: calc(30px * var(--title-scale)); line-height: 1; }
.desc p { margin: 0 0 12px; max-width: 40em; }
.desc .desc-links { display: none; font-family: var(--mono); font-size: 14px; }
.desc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px !important; }

/* -- green-bar printouts (the log) --------------------------------------------------- */

.printout { display: flex; background: var(--sheet); box-shadow: 0 1px 0 var(--rule), 0 10px 22px var(--lift); font-family: var(--mono); font-size: 14px; line-height: 1.45; }
.holes {
  flex: none; width: 20px; border-right: 1px dashed var(--rule);
  background-image: radial-gradient(circle at 10px 12px, var(--paper) 4px, transparent 4.5px);
  background-size: 20px 24px;
}
.desk .holes { background-image: radial-gradient(circle at 10px 12px, var(--band) 4px, transparent 4.5px); }
.printout-body { flex: 1 1 auto; min-width: 0; position: relative; }
.printout-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 6px; }
.printout-head h2 { margin: 0; font-size: 26px; line-height: 1.1; color: var(--accent-ink); }
.printout-head a { font-size: 13px; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li:nth-child(odd) { background: var(--bar); }
.bars li > a { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.bars .date { display: block; color: var(--dim); font-size: 12px; }
.bars .t { font-weight: 600; color: var(--link); }
.bars li > a:hover .t { color: var(--accent-ink); text-decoration: underline; }
.bars li > p { margin: 0; padding: 0 14px 12px; font-family: var(--serif); font-size: 17px; color: var(--soft); }
.printout-more { margin: 0; padding: 10px 14px; }
.torn {
  height: 10px;
  background-image: linear-gradient(135deg, var(--paper) 5px, transparent 5px), linear-gradient(225deg, var(--paper) 5px, transparent 5px);
  background-size: 10px 10px; background-position: 0 5px;
}
/* ... and the log is ruled lines rather than green-bar paper with sprocket holes. */
:root[data-theme=dark] .printout .holes, :root[data-theme=dark] .torn { display: none; }
:root[data-theme=dark] .printout { border: 1px solid var(--rule); }
:root[data-theme=dark] .bars li:nth-child(odd) { background: none; }
:root[data-theme=dark] .bars li { border-top: 1px solid var(--rule); }
.desk .torn {
  background-image: linear-gradient(135deg, var(--band) 5px, transparent 5px), linear-gradient(225deg, var(--band) 5px, transparent 5px);
}

/* -- home ---------------------------------------------------------------------------- */

.intro { max-width: var(--wide); margin: 26px auto 0; padding: 0 24px; font-size: 21px; line-height: 1.5; }
.intro p { max-width: 44em; margin: 0 0 .6em; }
.intro p:last-child { margin-bottom: 0; }

.desk {
  margin-top: 30px; padding: 40px 0 48px;
  background-color: var(--band);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.3px);
  background-size: 5px 5px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.desk-in {
  max-width: var(--wide); margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start;
}
.desk-in > .browser { flex: 999 1 640px; min-width: 0; }
.desk-in > .logstrip { flex: 1 1 290px; min-width: 0; }

.apps { max-width: var(--wide); margin: 0 auto; padding: 44px 24px 0; }
.apps-intro { margin: 4px 0 14px; font-family: var(--mono); font-size: 14px; color: var(--dim); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.app { justify-content: space-between; padding: 12px 14px; box-shadow: 4px 4px 0 var(--shadow); }
.app > span { display: inline-flex; align-items: center; gap: 10px; }

/* -- documents (pages, posts, projects) ---------------------------------------------- */

.doc { max-width: var(--wide); margin: 0 auto; padding: 48px 24px 0; }
.doc h1 { margin: 0 0 18px; font-family: var(--title); font-weight: var(--title-weight); font-size: calc(50px * var(--title-scale)); line-height: 1; max-width: 18em; }
.doc.outline h1 { margin-bottom: 14px; }
/* The measure limits the text, not the column: code blocks can be wider (see pre.code). */
.prose > * { max-width: var(--measure); }
.doc.wide .prose > * { max-width: 44em; }
.doc.full .prose > * { max-width: none; }   /* full_width: true, e.g. an app page */
.prose h2, .prose h3, .prose h4 { font-family: var(--title); font-weight: var(--title-weight); line-height: 1.05; margin: 1.5em 0 .45em; }
.prose h2 { font-size: calc(30px * var(--title-scale)); } .prose h3 { font-size: calc(24px * var(--title-scale)); } .prose h4 { font-size: calc(20px * var(--title-scale)); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table { margin: 0 0 1em; }
.prose li { margin: .25em 0; }
.prose blockquote { border-left: 2px solid var(--accent); margin-left: 0; padding: 2px 0 2px 18px; color: var(--soft); font-style: italic; }
.prose hr { border: 0; border-top: 1px dashed var(--rule); margin: 2em 0; }
.prose img { display: block; margin: 1.2em 0; border: 1px solid var(--rule); }
.prose table { border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 4px 10px; text-align: left; }
.prose :not(pre) > code {
  font-family: var(--mono); font-size: .84em;
  background: var(--sheet); border: 1px solid var(--rule); padding: .05em .3em;
}

/* Paragraph numbers in the margin (NLS-style), on screens wide enough to have a margin. */
@media (min-width: 900px) {
  .prose.numbered { counter-reset: para; }
  .prose.numbered > p { counter-increment: para; position: relative; }
  .prose.numbered > p::before {
    content: counter(para);
    position: absolute; left: -44px; width: 30px; text-align: right; top: .35em;
    font-family: var(--mono); font-size: 12px; color: var(--dim); opacity: .7;
  }
  /* A paragraph that is only a picture doesn't get a number. */
  .prose.numbered > p:has(> img:only-child) { counter-increment: none; }
  .prose.numbered > p:has(> img:only-child)::before { content: none; }
  .post { padding-left: 48px; }
}

.prevnext { max-width: var(--measure); margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-family: var(--mono); font-size: 14px; }
.prevnext a { display: block; text-decoration: none; border: 1px solid var(--rule); background: var(--sheet); padding: 12px 14px; font-weight: 600; }
.prevnext a span { display: block; font-weight: 400; color: var(--accent-ink); }
.prevnext .next { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .prevnext { grid-template-columns: 1fr; } .prevnext .next { grid-column: 1; } }

.related { margin-top: 36px; max-width: var(--measure); }
.loglist { margin-top: 10px; max-width: 52em; }

/* The Projects page catalogue. */
.catalogue { max-width: var(--wide); margin: 0 auto; padding: 20px 24px 0; }
.catalogue section { margin-top: 30px; }
.cat-title { margin: 0 0 8px; font-family: var(--mono); font-weight: 600; font-size: 18px; text-transform: lowercase; letter-spacing: 1px; }
.entry { position: relative; max-width: 44em; padding: 10px 0 12px; border-top: 1px dashed var(--rule); }
.entry h3 { margin: 0 0 4px; font-family: var(--title); font-weight: var(--title-weight); font-size: calc(22px * var(--title-scale)); line-height: 1.1; }
.entry p { margin: 0 0 4px; }
.entry .num.small { position: absolute; left: -54px; top: 12px; width: 40px; text-align: right; font-size: 20px; color: var(--accent-ink); }
.entry-links { font-family: var(--mono); font-size: 14px; }
.desk-in.solo > .browser { flex: 1 1 auto; }
@media (max-width: 700px) { .entry .num.small { position: static; display: block; text-align: left; } }

/* -- code: line-printer paper ----------------------------------------------------------- */

pre.code {
  position: relative;
  margin: 1.4em 0 1.6em;
  /* As wide as its longest line: at least the text's width, at most the whole column
     (then it scrolls). The bottom padding keeps a scroll bar off the last line. */
  width: max-content;
  padding: 0 18px 12px 40px;
  overflow-x: auto;
  font-family: var(--mono); font-size: 14.5px; line-height: 24px;
  color: var(--code-ink);
  background-color: var(--sheet);
  background-image:
    radial-gradient(circle at 11px 12px, var(--paper) 4px, transparent 4.5px),
    repeating-linear-gradient(180deg, var(--rule) 0 4px, transparent 4px 8px),
    linear-gradient(var(--sheet), var(--sheet)),
    repeating-linear-gradient(180deg, var(--bar) 0 48px, transparent 48px 96px);
  background-size: 22px 24px, 1px 100%, 22px 100%, 100% 100%;
  background-position: 0 0, 22px 0, 0 0, 0 0;
  background-repeat: repeat-y, no-repeat, no-repeat, no-repeat;
  background-attachment: local;
  box-shadow: 0 1px 0 var(--rule), 0 10px 22px var(--lift);
}
.prose > pre.code { min-width: min(100%, var(--measure)); max-width: 100%; }
.doc.wide .prose > pre.code { min-width: min(100%, 44em); max-width: 100%; }
pre.code code { font: inherit; background: none; border: 0; padding: 0; white-space: pre; }
/* The language as a print-job tag, on a line of its own so it never covers code. */
pre.code[data-lang] { padding-top: 24px; }
pre.code[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 0; right: 0;
  padding: 0 8px; font-family: var(--term); font-size: 18px; line-height: 22px;
  background: var(--ink); color: var(--sheet);
}

/* Dark mode is a screen, not paper: code is a plain terminal panel with an accent rule. */
:root[data-theme=dark] pre.code {
  background-image: none; padding-left: 18px; border-left: 3px solid var(--accent);
}

pre.code .tok-comment { color: var(--tok-comment); font-style: italic; }
pre.code .tok-string { color: var(--tok-string); }
pre.code .tok-number, pre.code .tok-constant { color: var(--tok-number); }
pre.code .tok-keyword { color: var(--tok-keyword); font-weight: 600; }
pre.code .tok-class { color: var(--tok-class); }
pre.code .tok-type, pre.code .tok-builtin { color: var(--tok-type); }
pre.code .tok-method, pre.code .tok-function { color: var(--tok-method); }
pre.code .tok-name, pre.code .tok-tag, pre.code .tok-variable { color: var(--tok-name); }
pre.code .tok-path { color: var(--tok-path); }
pre.code .tok-sigil, pre.code .tok-attr { color: var(--tok-sigil); }
pre.code .tok-rel-context { color: var(--tok-rel-context); }
pre.code .tok-rel-delegate { color: var(--tok-rel-delegate); }
pre.code .tok-rel-reactive { color: var(--tok-rel-reactive); }
pre.code .tok-rel-external { color: var(--tok-rel-external); }
pre.code .tok-rel-mailbox { color: var(--tok-rel-mailbox); }
pre.code .tok-punct, pre.code .tok-operator { color: inherit; }

/* -- footer: a routing slip ------------------------------------------------------------- */

.slip {
  max-width: var(--wide); margin: 64px auto 0; padding: 0 24px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  font-family: var(--mono); font-size: 13px; color: var(--dim);
}
.slip > span { padding: 8px 12px; border: 1px solid var(--rule); margin: 0 -1px -1px 0; }

/* -- phones ------------------------------------------------------------------------------ */

@media (max-width: 760px) {
  body { font-size: 18px; }
  .mast { padding: 18px 16px 0; flex-direction: column; align-items: flex-start; }
  .mark { width: 40px; height: 40px; }
  .word { font-size: 20px; letter-spacing: -1.5px; }
  .nav { width: 100%; gap: 0; flex-wrap: nowrap; border: 2px solid var(--ink); font-size: 13px; }
  .nav a { flex: 1 1 auto; text-align: center; padding: 9px 2px; border-bottom: 0; white-space: nowrap; }
  .nav a b { display: none; }
  .nav a + a { border-left: 2px solid var(--ink); }
  .nav a.on { background: var(--ink); color: var(--sheet); }
  .nav a.on b { color: var(--accent); }
  .nav .theme-toggle { flex: none; border: 0; border-left: 2px solid var(--ink); box-shadow: none; align-self: stretch; padding: 0 12px; font-size: 0; }
  .nav .theme-toggle::before { content: "◐"; font-size: 16px; }
  .apps { padding-top: 32px; }
  .apps.outline { row-gap: 2px; }
  .intro, .apps, .doc, .catalogue { padding-left: 16px; padding-right: 16px; }
  .intro { font-size: 18px; }
  .doc h1 { font-size: calc(36px * var(--title-scale)); }
  .desk { padding: 24px 0 28px; }
  .desk-in { padding: 0 16px; gap: 28px; }
  .desk-in > .browser { flex-basis: 100%; }
  .win { box-shadow: 5px 5px 0 var(--shadow); font-size: 14px; }
  .win-bar h2 { font-size: 21px; }
  .panes { display: block; min-height: 0; }
  .pane-cats { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ink); padding: 0; }
  .pane-cats .item { flex: none; padding: 9px 14px; }
  .pane-cats .item + .item { border-left: 1px solid var(--ink); }
  .pane-projs { border-right: 0; padding: 0; }
  .pane-projs .item { padding: 9px 14px; }
  .pane-cats::after, .pane-projs::after, .pane-links { display: none; }
  .desc { padding: 16px; }
  .desc h3 { font-size: calc(26px * var(--title-scale)); }
  .desc .desc-links { display: block; }
  .desc-btns .btn { flex: 1 1 100%; justify-content: center; }
  .logstrip .bars li:nth-child(n+4) { display: none; }
  .slip { padding: 0 16px 32px; }
  pre.code { font-size: 13px; margin-left: -16px; margin-right: -16px; }
}

/* -- The Layla web app (Layla's conjunto kit, ```layla): its --layla-* colours ------ */
.layla-app {
  --layla-font: var(--serif);
  --layla-mono: var(--mono);
  --layla-heading-font: var(--title);
  --layla-heading-weight: var(--title-weight);
  --layla-ink: var(--ink);
  --layla-soft: var(--soft);
  --layla-rule: var(--rule);
  --layla-panel: var(--sheet);
  --layla-panel-border: 1px solid var(--rule);
  --layla-panel-shadow: 4px 4px 0 var(--lift);
  --layla-radius: 0;
  --layla-field: var(--paper);
  --layla-field-radius: 0;
  --layla-output-bg: var(--paper);
  --layla-focus: var(--accent);
  --layla-link: var(--accent-ink);
  --layla-tint: var(--band);
  --layla-tab: var(--paper);
  --layla-tab-hover: var(--band);
  --layla-button: var(--ink);
  --layla-button-hover: var(--accent);
  --layla-button-ink: var(--sheet);
  --layla-button-off: var(--rule);
  --layla-ok: var(--soft);
}
.layla-app h2 { font-size: calc(22px * var(--title-scale)); margin: 0 0 10px; }
.layla-app h2:not(:first-child) { margin-top: 20px; }
.layla-app h3 { font-family: var(--mono); font-size: 14px; margin: 15px 0 10px; }
.layla-examples h3 { margin-top: 0; }
.layla-examples code.layla-example { border: 0; padding: 0; }
.layla-examples { --layla-tint: var(--band); --layla-panel: var(--sheet); --layla-link: var(--accent-ink); --layla-link-hover: var(--paper); --layla-mono: var(--mono); }

/* -- template: app.html (a page given over to an app): no masthead or footer ------------ */
body.app { margin: 0; padding: 0; overflow: hidden; }
body.app main { margin: 0; padding: 0; max-width: none; }

/* -- dagedit, the keyboard DAG editor (dagedit's conjunto kit): its --dagedit-* colours */
.dagedit-wrap {
  --dagedit-bg: var(--paper);
  --dagedit-fg: var(--ink);
  --dagedit-dim: var(--dim);
  --dagedit-seq: var(--dim);
  --dagedit-link: var(--accent-ink);
  --dagedit-clip: var(--tok-sigil);
  --dagedit-message: var(--accent-ink);
  --dagedit-box: var(--tok-type);
  --dagedit-deleted: var(--tok-rel-external);
  --dagedit-header-bg: var(--ink);
  --dagedit-header-fg: var(--paper);
  --dagedit-sel-bg: var(--accent);
  --dagedit-sel-fg: var(--sel-fg);
  --dagedit-cursor: var(--accent);
  --dagedit-rule: var(--rule);
  --dagedit-panel-bg: #fffdfc;
  --dagedit-font: var(--mono);
  --dagedit-ui-font: var(--mono);
}