/* nixarchy manual — dark, monospace, sidebar. No framework, no theme gem. */

:root {
  --bg:        #22242e;
  --fg:        #c9cddb;
  --dim:       #6b7089;
  --accent:    #a5cf5d;   /* the wordmark green */
  --link:      #8ab4f8;
  --rule:      #333747;
  --code-bg:   #1a1c24;
  /* JetBrains Mono first, and not only for looks: the wordmark is built from
     block-drawing characters, and it only reads as solid in a font that draws
     them edge to edge. A stack that falls through to a system mono can render
     it with hairline seams. */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Fira Code",
          "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.masthead { padding: 3.5rem 1.5rem 2.5rem; text-align: center; }

/* The wordmark is 92 columns of block characters (see _includes/logo.html).
   Its width is therefore font-size * column count, with nothing to reflow, so
   the size is driven off the viewport and clamped: the ceiling keeps it from
   dominating a wide screen, the floor keeps it legible on a phone. Regenerate
   the art at a different width and these numbers need redoing. */
.logo {
  display: block;
  /* Not a code block: undo the pre rule further down, which would otherwise
     sit the wordmark on a grey card. */
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: visible;

  color: var(--accent);
  font-size: clamp(0.3rem, 1.05vw, 0.88rem);
  /* These two are not arbitrary and are not cosmetic. JetBrains Mono's full
     block glyph does not quite meet its neighbours at fractional advances, so
     at the honest values (0 and 1) the wordmark renders shot through with
     hairline seams. The slight negative tracking and the over-1 line-height
     pull the cells together until the strokes read as solid. Measured against
     three alternatives; these are the only ones with no seams. Omarchy uses
     the same pair, for the same reason. */
  letter-spacing: -0.0425em;
  line-height: 1.09375;
  white-space: pre;
  transition: color 0.15s ease;
}

.logo-link { display: inline-block; text-decoration: none; }
.logo-link:hover { text-decoration: none; }
.logo-link:hover .logo { color: var(--link); }

.tagline { margin: 0.6rem 0 0; color: var(--link); font-size: 1rem; }

/* ---------- layout ---------- */

.page {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 3rem;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

/* ---------- sidebar ---------- */

.sidebar { position: relative; align-self: start; position: sticky; top: 1.5rem; }

.filter {
  width: 100%;
  padding: 0.4rem 1.5rem 0.6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  font: inherit;
}
.filter::placeholder { color: var(--dim); }
.filter:focus { outline: none; border-bottom-color: var(--link); }

.filter-hint {
  position: absolute;
  top: 0.4rem;
  right: 0;
  color: var(--dim);
  pointer-events: none;
}

.toc {
  list-style: none;
  counter-reset: item;
  margin: 1.6rem 0 0;
  padding: 0;
  max-height: 68vh;
  overflow-y: auto;
}

/* The default scrollbar renders as a bright bar against the dark theme, and
   the nav is the one place here tall enough to show one. */
.toc { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.toc::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-track { background: transparent; }
.toc::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.toc li { counter-increment: item; margin: 0 0 0.35rem; }

/* The 01, 02, 03 gutter. Numbering follows the DOM, so a filtered list
   keeps each page's real number rather than renumbering as you type. */
.toc li::before {
  content: counter(item, decimal-leading-zero);
  display: inline-block;
  width: 2.2rem;
  color: var(--dim);
}

.toc li.current > a { color: var(--fg); font-weight: 700; }
.toc li[hidden] { display: none; }

.offsite { margin-top: 1.8rem; color: var(--dim); font-size: 0.85rem; }

/* ---------- content ---------- */

.content { min-width: 0; padding-top: 0.2rem; }

.content--centred {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

.content h1 { font-size: 1.9rem; margin: 0 0 1.6rem; }
.content h2 { font-size: 1.35rem; margin: 2.6rem 0 1rem; }
.content h3 { font-size: 1.1rem; margin: 2rem 0 0.8rem; }
.content h1, .content h2, .content h3 { line-height: 1.3; }

.content p, .content li { max-width: 46rem; }
.content ul, .content ol { padding-left: 1.4rem; }
.content li { margin: 0.3rem 0; }

/* Blockquotes here are callouts, not asides -- they carry the sentence the
   page most wants read, so they are marked out rather than dimmed down. */
.content blockquote {
  margin: 1.4rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 2px solid var(--accent);
}

.content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

code {
  background: var(--code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.9em;
  /* Inline code is often a long path or attribute with no space in it, which
     on a phone is wide enough to push the whole page sideways. It has no
     scroller of its own, so it has to be allowed to break. */
  overflow-wrap: anywhere;
}

pre {
  background: var(--code-bg);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;      /* wide code scrolls itself, never the page */
  line-height: 1.45;
}
pre code { background: none; padding: 0; font-size: 0.88rem; }

/* Tables can be wide; give them their own scroller too. */
.content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.92rem;
}
.content th, .content td {
  border: 1px solid var(--rule);
  padding: 0.45rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.content th { color: var(--fg); background: var(--code-bg); }

.content img { max-width: 100%; height: auto; }

/* ---------- narrow screens ---------- */

@media (max-width: 62rem) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .sidebar { position: static; }
  .toc { max-height: none; }
}