/* The terminal edition. The dark palette is the console look coletebou.com wore in 2026 (master's
   global.css tokens: #080b09 ground, #4ade80 phosphor, JetBrains Mono); the light one is the same
   screen printed on paper. Both keep body text above 7:1 and links above 4.5:1. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #080b09;
  --bg-2: #101512;
  --rule: #29342c;
  --rule-2: #415246;
  --accent: #4ade80;
  --accent-2: #31b765;
  --amber: #d6b35c;
  --red: #ff8f8f;
  --text: #edf3ee;
  --text-2: #b7c2ba;
  --muted: #919d94;
  --select: rgba(74, 222, 128, 0.3);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6f1;
    --bg-2: #e9ede6;
    --rule: #c9d3cb;
    --rule-2: #9fb0a3;
    --accent: #1a7f42;
    --accent-2: #166b38;
    --amber: #7a5c0c;
    --red: #b3261e;
    --text: #0e1a12;
    --text-2: #2c3a30;
    --muted: #4a5a4f;
    --select: rgba(26, 127, 66, 0.22);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f4f6f1;
  --bg-2: #e9ede6;
  --rule: #c9d3cb;
  --rule-2: #9fb0a3;
  --accent: #1a7f42;
  --accent-2: #166b38;
  --amber: #7a5c0c;
  --red: #b3261e;
  --text: #0e1a12;
  --text-2: #2c3a30;
  --muted: #4a5a4f;
  --select: rgba(26, 127, 66, 0.22);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.65 var(--mono);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
}

::selection {
  background: var(--select);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: 0.4rem 0.8rem;
  background: var(--accent);
  color: var(--bg);
  z-index: 10;
}

.skip:focus {
  top: 0.8rem;
}

/* The title bar: who and where, and the other editions. */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding: 0.7rem max(1rem, env(safe-area-inset-left)) 0.7rem max(1rem, env(safe-area-inset-right));
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.8125rem;
}

.who {
  margin: 0;
  color: var(--text-2);
}

.who b {
  color: var(--accent);
  font-weight: 700;
}

.editions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0;
  color: var(--muted);
}

.editions a[aria-current="page"] {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.editions a[aria-current="page"]::before {
  content: "› ";
  color: var(--accent);
}

main {
  max-width: 100ch;
  margin: 0 auto;
  padding: 1.6rem max(1rem, env(safe-area-inset-left)) 6rem max(1rem, env(safe-area-inset-right));
}

.entry {
  margin: 0 0 1.6rem;
}

.cmd {
  margin: 0 0 0.6rem;
  color: var(--text);
}

.ps1 {
  color: var(--accent);
  font-weight: 700;
}

h1,
.h {
  margin: 0.2rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

h1 {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.h .dim,
h1 + p {
  font-weight: 400;
}

p {
  margin: 0 0 0.5rem;
  color: var(--text-2);
  max-width: 78ch;
}

.dim,
.dim a {
  color: var(--muted);
}

.err {
  color: var(--red);
}

kbd {
  font: inherit;
  color: var(--text);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: 0 0.3em;
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1.4rem;
  margin: 0.4rem 0 0.8rem;
}

.kv > div {
  display: contents;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.sep {
  color: var(--muted);
}

.summary {
  color: var(--text);
}

.sec {
  margin: 0.9rem 0 0;
}

.sec-h {
  margin: 0 0 0.25rem;
  font-size: inherit;
  font-weight: 700;
  color: var(--amber);
}

.bullets {
  margin: 0.2rem 0 0;
  padding-left: 2ch;
  color: var(--text-2);
}

.bullets li::marker {
  content: "- ";
  color: var(--muted);
}

/* ls: four columns on a wide screen, two lines a work on a phone. */
.ls {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.ls li {
  display: grid;
  grid-template-columns: 4ch 21ch 10ch minmax(0, 1fr);
  gap: 0 1.2ch;
  padding: 0.05rem 0;
}

.ls .mark {
  color: var(--muted);
}

.ls .id a {
  font-weight: 700;
}

.st {
  color: var(--text-2);
}

.st-live,
.st-operated {
  color: var(--accent);
}

.st-beta,
.st-building {
  color: var(--amber);
}

.one {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 47.99rem) {
  html {
    font-size: 14px;
  }

  .ls li {
    grid-template-columns: 4ch minmax(0, 1fr) max-content;
    grid-template-areas:
      "mark id st"
      ". one one";
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .ls .mark { grid-area: mark; }
  .ls .id { grid-area: id; }
  .ls .st { grid-area: st; }
  .ls .one { grid-area: one; white-space: normal; }

  .kv {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kv dd {
    margin-bottom: 0.4rem;
  }
}

/* Without JavaScript every work is still here: the list links to #open/<id>, and that page shows. */
.page {
  display: none;
  scroll-margin-top: 4rem;
}

.page:target {
  display: block;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule-2);
}

.js .pages {
  display: none;
}

/* The prompt, after the last line, as in a shell. */
.prompt {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  margin: 0.4rem 0 0;
  scroll-margin-bottom: 2rem;
}

.prompt[hidden] {
  display: none;
}

.prompt label {
  color: var(--accent);
  font-weight: 700;
}

.prompt input {
  flex: 1;
  min-width: 0;
  padding: 0.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
  color: var(--text);
  font: inherit;
  caret-color: var(--accent);
}

.prompt input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.hint {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.arrived {
  margin-bottom: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .bar,
  .prompt,
  .skip {
    display: none;
  }

  .pages,
  .page {
    display: block !important;
  }
}