/* huta.run: a Markdown document, typeset.
   The Markdown marks (#, **, `, >, -, ```, ---) are drawn by CSS as generated content in a
   soft "mark" colour, with empty alt text so screen readers skip them. No JS, no web fonts. */

:root {
  color-scheme: light dark;

  /* cool paper, ink, and the brand's pine (#243E38) and sage (#90AEA0), tuned for text */
  --bg: #f5f7f5;
  --fg: #19241f;
  --muted: #55645d;
  --accent: #24594d;      /* pine, lifted a little for links */
  --accent-ink: #163d34;
  --mark: #6a9283;        /* # ## > - 1. ``` : sage, deepened to stay readable */
  --mark-faint: #adc4b9;  /* ** ` [ ] : barely there */
  --code-bg: #e8eee9;
  --code-fg: #1f3530;
  --rule: #d4ddd7;
  --card: #ffffff;
  --quote-bg: #eaf1ec;
  --now: #24594d;
  --coming: #955700;
  --planned: #58539f;
  --sel: #c9dfd3;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Charter", "Bitstream Charter",
    "Sitka Text", "Source Serif Pro", "Book Antiqua", Cambria, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Mono",
    "Roboto Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --s: 1.75rem;           /* one line of body text: the rhythm unit */
  --measure: 41rem;
  --toc: 12rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1513;
    --fg: #e4e9e3;
    --muted: #97a69e;
    --accent: #a3cdbb;
    --accent-ink: #c7e3d6;
    --mark: #628a7b;
    --mark-faint: #36493f;
    --code-bg: #16201c;
    --code-fg: #cfddd5;
    --rule: #24302b;
    --card: #141d19;
    --quote-bg: #142019;
    --now: #a3cdbb;
    --coming: #e2b25b;
    --planned: #aaa5f2;
    --sel: #2a4a3e;
  }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: var(--s);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
::selection { background: var(--sel); color: var(--fg); }

main, .doc { display: block; }
/* plain pages (404) without the .page wrapper */
body > main:not(.doc) { max-width: calc(var(--measure) + 32px); margin: 0 auto; padding: 0 16px var(--s); }
.page, .foot, .filebar {
  max-width: calc(var(--measure) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

p { margin: 0 0 calc(var(--s) * .75); }
em { font-style: italic; }
b { font-weight: 650; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--mark-faint);
  text-underline-offset: .2em;
}
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  a { transition: color .15s ease, text-decoration-color .15s ease; }
}

.skip {
  position: absolute;
  left: 16px;
  top: -3rem;
  padding: .3rem .7rem;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mono);
  font-size: .85rem;
  z-index: 10;
}
.skip:focus { top: .5rem; }

.mono { font-family: var(--mono); font-size: .86em; }
.dim { color: var(--muted); }
.small { font-size: .92rem; line-height: 1.6; }

/* ---------- the file bar: "huta.run/index.md   view as markdown" ---------- */

.filebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
}
.filebar a { color: var(--muted); text-decoration-color: transparent; }
.filebar a:hover { color: var(--accent); text-decoration-color: currentColor; }
.filebar .sep { color: var(--mark); padding: 0 .15em; }
.filebar .raw a::before { content: "["; content: "[" / ""; color: var(--mark-faint); }
.filebar .raw a::after { content: "]"; content: "]" / ""; color: var(--mark-faint); }

/* ---------- headings: mono, with their # marks ---------- */

h1, h2, h3 {
  position: relative;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -.01em;
  margin: 0;
}
h1::before, h2::before, h3::before {
  color: var(--mark);
  font-weight: 400;
  letter-spacing: 0;
}
h1::before { content: "# "; content: "# " / ""; }
h2::before { content: "## "; content: "## " / ""; }
h3::before { content: "### "; content: "### " / ""; }

h1 {
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -.035em;
  margin: calc(var(--s) * 1.5) 0 calc(var(--s) * .75);
  display: flex;
  align-items: center;
}
h1::before { font-weight: 300; padding-right: .25em; content: "#"; content: "#" / ""; }

h2 {
  font-size: 1.28rem;
  line-height: var(--s);
  margin: calc(var(--s) * 2) 0 calc(var(--s) * .75);
}
h3 {
  font-size: 1rem;
  line-height: var(--s);
  margin: calc(var(--s) * 1.25) 0 calc(var(--s) * .5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6rem;
}
h3::before { margin-right: -.6rem; }

/* The wordmark. No size attributes on the <img>: if the file is missing, its alt text
   ("huta") is drawn in the heading's own type instead. */
.wordmark {
  display: block;
  max-height: .95em;
  max-width: 100%;
  width: auto;
  height: auto;
  font: inherit;
  color: var(--fg);
}

/* Hang the marks in the margin once there is a margin to hang them in. */
@media (min-width: 54rem) {
  h1::before, h2::before, h3::before {
    position: absolute;
    right: 100%;
    top: 0;
    padding-right: .55em;
    margin-right: 0;
    white-space: pre;
  }
  h2::before, h3::before { content: "##"; content: "##" / ""; }
  h3::before { content: "###"; content: "###" / ""; }
  h1::before { top: 50%; transform: translateY(-50%); padding-right: .3em; }
}

.lede {
  font-size: 1.32rem;
  line-height: calc(var(--s) * 1.25);
  color: var(--fg);
  margin-bottom: calc(var(--s) * .75);
}
.masthead p:not(.lede) { color: var(--muted); }

/* ---------- inline marks ---------- */

strong { font-weight: 650; }
.doc strong::before, .doc strong::after {
  content: "**";
  content: "**" / "";
  font-family: var(--mono);
  font-weight: 400;
  font-size: .78em;
  color: var(--mark-faint);
  letter-spacing: -.05em;
}
.doc em::before, .doc em::after {
  content: "_";
  content: "_" / "";
  font-family: var(--mono);
  font-style: normal;
  font-size: .82em;
  color: var(--mark-faint);
}

code {
  font-family: var(--mono);
  font-size: .84em;
  color: var(--code-fg);
  background: var(--code-bg);
  border-radius: 3px;
  padding: .08em .3em;
  overflow-wrap: anywhere;
}
:not(pre) > code::before, :not(pre) > code::after {
  content: "`";
  content: "`" / "";
  color: var(--mark);
  opacity: .7;
}
.doc p > a::before, .doc .note a::before { content: "["; content: "[" / ""; color: var(--mark-faint); }
.doc p > a::after, .doc .note a::after { content: "]"; content: "]" / ""; color: var(--mark-faint); }

/* ---------- fenced code ---------- */

pre {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--code-fg);
  background: var(--code-bg);
  margin: 0 0 var(--s);
  padding: .7rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}
pre code { background: none; padding: 0; font-size: 1em; color: inherit; overflow-wrap: normal; }
pre.fence::before, pre.fence::after {
  display: block;
  color: var(--mark);
  font-size: .95em;
}
pre.fence::before { content: "```" attr(data-lang); content: "```" attr(data-lang) / ""; margin-bottom: .25rem; }
pre.fence::after { content: "```"; content: "```" / ""; margin-top: .25rem; }
pre .c { color: var(--muted); }
pre .p { color: var(--mark); user-select: none; -webkit-user-select: none; }
pre .who { color: var(--accent); font-weight: 600; }
.diagram { line-height: 1.45; }

/* ---------- the agent box: a blockquote ---------- */

blockquote {
  position: relative;
  margin: calc(var(--s) * 1.25) 0 calc(var(--s) * 1.5);
  padding: 1rem 1.1rem .4rem 2.2rem;
  background: var(--quote-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
blockquote::before {
  content: ">";
  content: ">" / "";
  position: absolute;
  left: .75rem;
  top: 1rem;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
  line-height: var(--s);
}
blockquote pre { background: var(--bg); margin-bottom: calc(var(--s) * .6); }
.agent-q {
  font-family: var(--mono);
  font-size: 1.12rem;
  line-height: var(--s);
  margin-bottom: .5rem;
}
.agent-q strong::before, .agent-q strong::after { font-size: .9em; }
.agent-q a { font-weight: 600; }
.agent .small { color: var(--muted); }

/* ---------- lists with literal marks ---------- */

ul, ol {
  list-style: none;
  margin: 0 0 var(--s);
  padding: 0 0 0 2.1rem;
}
li { position: relative; margin: 0 0 calc(var(--s) * .4); }
ul > li::before {
  content: "-";
  content: "-" / "";
  position: absolute;
  left: -1.35rem;
  font-family: var(--mono);
  color: var(--mark);
}
ol { counter-reset: step; }
ol > li { counter-increment: step; }
ol > li::before {
  content: counter(step) ".";
  content: counter(step) "." / "";
  position: absolute;
  left: -2.1rem;
  width: 1.6rem;
  text-align: right;
  font-family: var(--mono);
  font-size: .9em;
  color: var(--mark);
}

.steps .who {
  display: inline-block;
  min-width: 3.6em;
  font-family: var(--mono);
  font-size: .78em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .02em;
}
.steps .who::after { content: ":"; content: ":" / ""; color: var(--mark-faint); }

.note {
  color: var(--muted);
  font-size: .98rem;
  border-left: 1px solid var(--rule);
  padding-left: 1rem;
}

.ideas li { margin-bottom: calc(var(--s) * .55); }

/* task lists: - [x] / - [ ] */
.tasks { padding-left: 3.6rem; }
.tasks > li::before {
  left: -3.6rem;
  white-space: pre;
}
.tasks.done > li::before { content: "- [x]"; content: "- [x]" / ""; color: var(--now); }
.tasks.todo > li::before { content: "- [ ]"; content: "- [ ]" / ""; color: var(--mark); }
#status-coming + .tasks > li::before { color: var(--coming); }
#status-now::after, #status-coming::after, #status-planned::after {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 0 .45em;
  border: 1px solid currentColor;
  border-radius: 3px;
  line-height: 1.5;
}
#status-now::after { content: "v0"; content: "v0" / ""; color: var(--now); }
#status-coming::after { content: "being built"; content: "being built" / ""; color: var(--coming); }
#status-planned::after { content: "not yet"; content: "not yet" / ""; color: var(--planned); }

.links > li .dim { font-size: .92rem; }
.links > li .dim::before { content: ": "; content: ": " / ""; color: var(--mark); }

/* ---------- badges ---------- */

.badge {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 0 .45em;
  border: 1px solid currentColor;
  border-radius: 3px;
  line-height: 1.5;
}
.badge.now { color: var(--now); }
.badge.coming { color: var(--coming); }

/* ---------- rules: --- ---------- */

hr {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: auto;
  border: 0;
  margin: calc(var(--s) * 2) 0 0;
  color: var(--mark);
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1;
  overflow: visible;
}
hr::before { content: "---"; content: "---" / ""; letter-spacing: .12em; }
hr::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
hr + section > h2 { margin-top: calc(var(--s) * 1.25); }

/* ---------- the Telegram mock ---------- */

.chat {
  margin: 0 0 var(--s);
  max-width: 27rem;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.5;
}
.chat figcaption {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--muted);
  margin-bottom: .45rem;
}
.chat figcaption::before { content: "<!-- "; content: "<!-- " / ""; color: var(--mark-faint); }
.chat figcaption::after { content: " -->"; content: " -->" / ""; color: var(--mark-faint); }
.bubble {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px 14px 14px 4px;
  padding: .7rem .95rem .55rem;
}
.bubble p { margin: 0 0 .25rem; }
.bubble code { font-size: .86em; }
.chat code::before, .chat code::after { content: none; }
.bubble .from { color: var(--accent); font-weight: 600; font-size: .85rem; }
.bubble .meta { text-align: right; color: var(--muted); font-size: .76rem; margin: 0; }
.keys { display: flex; gap: .35rem; margin-top: .35rem; }
.key {
  flex: 1 1 0;
  text-align: center;
  padding: .45rem .5rem;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--fg);
  font-weight: 600;
}
.key.go { color: var(--accent); border-color: var(--mark); }

/* ---------- table of contents, in the right margin on wide screens ---------- */

.toc { display: none; }
@media (min-width: 76rem) {
  .page, .foot, .filebar { max-width: calc(var(--measure) + var(--toc) + 5rem + 32px); }
  .page {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) var(--toc);
    column-gap: 5rem;
  }
  .foot { padding-right: calc(var(--toc) + 5rem + 16px); }
  .toc {
    display: block;
    position: sticky;
    top: 2rem;
    align-self: start;
    margin-top: calc(var(--s) * 2.2);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.5;
  }
  .toc-h { color: var(--muted); margin: 0 0 .4rem; }
  .toc-h::before { content: "<!-- "; content: "<!-- " / ""; color: var(--mark-faint); }
  .toc-h::after { content: " -->"; content: " -->" / ""; color: var(--mark-faint); }
  .toc ul { padding-left: 1.1rem; margin-bottom: 1.4rem; }
  .toc li { margin-bottom: .3rem; }
  .toc li::before { left: -1.1rem; }
  .toc a { color: var(--muted); text-decoration-color: transparent; }
  .toc a:hover { color: var(--accent); text-decoration-color: currentColor; }
}

/* ---------- footer ---------- */

.foot {
  padding-bottom: calc(var(--s) * 2);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.foot hr { margin-bottom: var(--s); }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--accent); }

/* ---------- small screens ---------- */

@media (max-width: 30rem) {
  body { font-size: 1rem; }
  :root { --s: 1.65rem; }
  pre { font-size: .78rem; padding: .6rem .8rem; }
  blockquote { padding: .9rem .8rem .3rem 1.8rem; }
  blockquote::before { left: .55rem; top: .9rem; }
  ul, ol { padding-left: 1.6rem; }
  ul > li::before { left: -1.1rem; }
  ol > li::before { left: -1.7rem; }
  .tasks { padding-left: 3.2rem; }
  .tasks > li::before { left: -3.2rem; }
  .lede { font-size: 1.18rem; }
}

@media print {
  .filebar, .toc, .skip { display: none; }
  body { background: #fff; color: #000; }
  pre { white-space: pre-wrap; }
}