/* Copied from nixarchy's docs/assets/style.css, deliberately and not by
   reference: a stylesheet cannot be shared between two repositories without a
   build step, and this site is meant to build on Pages exactly as it sits in
   the directory. So this is a FORK -- a fix made over there does not arrive
   here, and one made here should be offered back. Said out loud rather than
   left for somebody to discover.

   One value is changed from the original, and it is marked below: the .logo
   font-size clamp. Everything else is byte-identical on purpose, so a diff
   against nixarchy's copy shows only what this site actually needed. */

/* nixarchy.flatsnap site — 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);
  /* CHANGED FROM NIXARCHY'S COPY. Theirs is clamp(0.3rem, 1.05vw, 0.88rem),
     tuned to a wordmark 92 columns wide. This one is PKG at 38 columns, so
     the same apparent width takes those numbers scaled by 92/38 -- then
     checked by eye at a phone width and a wide desktop, because the ceiling
     exists to stop the mark dominating a large screen and the floor to keep
     it legible on a small one. The letter-spacing and line-height below are
     NOT rescaled: they are properties of the font's block glyphs rather than
     of the word, and the comment under them says why they are what they
     are. */
  font-size: clamp(0.6rem, 2.4vw, 1.6rem);
  /* 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; }
}