/* Dev Guides — ndgold.com/guides
   Terminal-native design system. Every text role is monospaced; the page reads
   like a manpage on a warm cream canvas. ASCII bracket markers stand in for
   icons, hairline rules separate blocks, and a single dark surface is reserved
   for the TUI mockup. Mobile-first, WCAG AA contrast, reduced-motion aware. */

:root {
  /* ---- Ink & neutrals (the brand is near-black on cream) ---- */
  --ink:            #201d1d;   /* headlines, body, primary fill */
  --ink-deep:       #0f0000;   /* pressed primary */
  --charcoal:       #302c2c;
  --body:           #424245;   /* paragraph text */
  --mute:           #646262;   /* metadata, captions, footer */
  --stone:          #6e6e73;
  --ash:            #9a9898;   /* disabled, dark-surface secondary */

  /* ---- Surfaces ---- */
  --canvas:         #fdfcfc;   /* the only body background */
  --surface-soft:   #f8f7f7;   /* inputs, alt rows, callout fills */
  --surface-card:   #f1eeee;   /* code snippets, slightly elevated rows */
  --surface-dark:   #201d1d;   /* the single dark moment: TUI mockup */
  --surface-dark-2: #302c2c;   /* inset prompt row inside the mockup */

  /* ---- Lines ---- */
  --hairline:       rgba(15, 0, 0, 0.12);
  --hairline-strong:#646262;

  /* ---- On-dark text ---- */
  --on-dark:        #fdfcfc;
  --on-dark-mute:   #9a9898;

  /* ---- Semantic (reserved for in-content callouts / TUI syntax) ---- */
  --accent:         #007aff;
  --success:        #30d158;
  --warn:           #ff9f0a;
  --danger:         #ff3b30;

  /* ---- Radius: 0 for containers, 4px for interactive ---- */
  --radius:         0;
  --radius-int:     4px;

  /* ---- Measure ---- */
  --maxw:           60rem;   /* ~960px content column */
  --readw:          46rem;   /* mono is wide; give prose room */

  /* ---- Type: one monospaced face carries everything ---- */
  --mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", "Geist Mono",
          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
  --font: var(--mono);

  /* ---- Legacy aliases kept so inline var() refs still resolve ---- */
  --ink-soft:       #424245;
  --muted:          #646262;
  --line:           rgba(15, 0, 0, 0.12);
  --line-soft:      rgba(15, 0, 0, 0.12);
  --bg:             #fdfcfc;
  --bg-card:        #f8f7f7;
  --bg-soft:        #f1eeee;
  --bg-sunk:        #f1eeee;
  --brand:          #201d1d;
  --brand-deep:     #0f0000;
  --brand-tint:     #f1eeee;
  --good:           #30d158;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;            /* 16px body-md */
  line-height: 1.5;
  color: var(--body);
  background: var(--canvas);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 0;  /* keep ligatures off — terminal feel */
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-dark);
  padding: 0.5rem 1rem; border-radius: 0; text-decoration: none;
  font-weight: 500;
}
.skip-link:focus { left: 0; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.wrap-narrow { max-width: var(--readw); }

section { padding-block: 4.5rem; border-top: 1px solid var(--hairline); }
section:first-of-type { border-top: none; }

@media (min-width: 56rem) { section { padding-block: 6rem; } }  /* 96px rhythm */

/* ---- Eyebrow → bracketed section label ---- */
.eyebrow {
  display: inline-block;
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); margin: 0 0 0.75rem;
}
.eyebrow::before { content: "[ "; color: var(--ash); }
.eyebrow::after  { content: " ]"; color: var(--ash); }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  line-height: 1.5; color: var(--ink); letter-spacing: 0; font-weight: 700;
}
h2 { font-size: 1.5rem; margin: 0 0 1rem; }
h3 { font-size: 1.0625rem; margin: 2rem 0 0.5rem; }
h3::before { content: "## "; color: var(--ash); font-weight: 400; }
h4 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
p { margin: 0 0 1rem; }
strong, b { font-weight: 700; color: var(--ink); }
a {
  color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong);
}
a:hover { text-decoration-color: var(--ink); }

code {
  font-family: var(--mono); font-size: 0.9375em;
  background: var(--surface-card); padding: 0.1em 0.35em;
  border-radius: var(--radius-int); border: 1px solid var(--hairline);
  color: var(--ink);
}
pre {
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.55;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-int); padding: 1rem; overflow-x: auto;
  margin: 1rem 0; color: var(--ink);
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }

blockquote {
  border-left: 2px solid var(--ink);
  background: var(--surface-soft);
  padding: 1rem 1.25rem;
  border-radius: 0;
  margin: 1.5rem 0;
}
blockquote p:last-child { margin-bottom: 0; }

/* ---- Lists: ASCII bracket markers instead of bullets ---- */
.faq-body ul, .wrap-narrow ul,
.faq-body ol, .wrap-narrow ol {
  list-style: none; padding-left: 0; margin: 1rem 0;
}
.faq-body ul li, .wrap-narrow ul li {
  position: relative; padding-left: 2.25rem; margin-bottom: 0.4rem; color: var(--body);
}
.faq-body ul li::before, .wrap-narrow ul li::before {
  content: "[+]"; position: absolute; left: 0; color: var(--ash); font-weight: 500;
}
.faq-body ol, .wrap-narrow ol { counter-reset: item; }
.faq-body ol li, .wrap-narrow ol li {
  position: relative; padding-left: 2.5rem; margin-bottom: 0.4rem; color: var(--body);
  counter-increment: item;
}
.faq-body ol li::before, .wrap-narrow ol li::before {
  content: "[" counter(item) "]"; position: absolute; left: 0; color: var(--ash); font-weight: 500;
}

/* ---- Focus ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-int);
}

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.5rem; gap: 1rem;
}
.brandmark {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--ink); text-decoration: none;
  font-size: 0.9375rem;
}
.brandmark:hover { color: var(--ink); }
.brandmark svg { display: none; }           /* no vector icons — type only */
.brandmark::before { content: "~/"; color: var(--ash); font-weight: 500; }
.topnav { display: none; gap: 1.25rem; }
.topnav a {
  color: var(--mute); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
}
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { color: var(--ink); }
@media (min-width: 56rem) { .topnav { display: flex; } }

/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden;
  padding-block: 4rem 3rem; background: var(--canvas);
}
.hero-glow { display: none; }               /* no gradients / atmospherics */
.hero > .wrap { position: relative; z-index: 1; }
.hero .release-line {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.875rem; font-weight: 500; color: var(--mute);
  background: var(--surface-card); border: 1px solid var(--hairline);
  padding: 0.25rem 0.6rem; border-radius: var(--radius-int); margin-bottom: 1.25rem;
}
.release-line .dot { width: 0.5rem; height: 0.5rem; border-radius: 0; background: var(--success); }
.release-line .dot-warn { background: var(--warn); }
.hero h1 {
  font-size: clamp(1.75rem, 5vw, 2.375rem);  /* 28 → 38px display-xl */
  line-height: 1.5; margin: 0 0 1rem; max-width: 24ch; font-weight: 700;
}
.hero .lede {
  font-size: 1.0625rem; line-height: 1.5; color: var(--body);
  max-width: 60ch; margin-bottom: 1.5rem;
}

/* ---- Hero TUI mockup (index): the single dark visual moment ---- */
.tui {
  margin: 2.25rem 0 0;
  background: var(--surface-dark);
  border: 1px solid var(--surface-dark);
  border-radius: 0;
  color: var(--on-dark);
  overflow: hidden;
}
.tui-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--surface-dark-2);
  font-size: 0.8125rem; color: var(--on-dark-mute);
}
.tui-bar .tui-dot { width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: var(--surface-dark-2); }
.tui-bar .tui-path { margin-left: 0.5rem; }
.tui-body { padding: 2.25rem 1.5rem 1.5rem; }
.tui-art {
  margin: 0 0 1.5rem; padding: 0; border: 0; background: none;
  font-size: 0.5rem; line-height: 1.05;
  color: var(--on-dark); white-space: pre; overflow-x: auto;
  letter-spacing: 0;
}
@media (min-width: 40rem) { .tui-art { font-size: 0.72rem; } }
.tui-prompt {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: var(--surface-dark-2); border-radius: var(--radius-int);
  padding: 0.6rem 0.85rem; font-size: 0.9375rem;
}
.tui-prompt .tui-pipe { color: var(--success); }
.tui-prompt .tui-cmd { color: var(--on-dark); font-weight: 500; }
.tui-prompt .tui-model { color: var(--accent); }
.tui-prompt .tui-cursor {
  display: inline-block; width: 0.5rem; height: 1.05rem; margin-left: -0.25rem;
  background: var(--on-dark); vertical-align: text-bottom;
  animation: tui-blink 1.1s steps(1) infinite;
}
@keyframes tui-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.tui-hints {
  margin: 1rem 0 0; display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--on-dark-mute);
}
.tui-hints span b { color: var(--ash); font-weight: 700; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-weight: 500; font-size: 1rem; line-height: 2;
  padding: 0.125rem 1.25rem; min-height: 2.25rem; border-radius: var(--radius-int);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-primary { background: var(--ink); color: var(--on-dark); }
.btn-primary:hover { background: var(--ink-deep); color: var(--on-dark); }
.btn-primary:active { background: var(--ink-deep); }
.btn-secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Stats → dark TUI readout panel (the single dark moment) ---- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 2rem 0 0; padding: 2.75rem 1.5rem 1.5rem;
  background: var(--surface-dark); border: 1px solid var(--surface-dark);
  border-radius: 0; position: relative;
}
.stats::before {
  content: "── spec ──────────────────────────────";
  position: absolute; top: 0; left: 0; right: 0;
  padding: 0.5rem 1.5rem; font-size: 0.8125rem; color: var(--on-dark-mute);
  white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--surface-dark-2);
}
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-label { font-size: 0.8125rem; text-transform: none; letter-spacing: 0; color: var(--on-dark-mute); }
.stat-label::before { content: "  "; }
.stat-value { font-weight: 500; color: var(--on-dark); }

/* ---- Tables ---- */
table {
  width: 100%; border-collapse: collapse;
  font-size: 0.875rem; margin: 1.25rem 0;
  border: 1px solid var(--hairline);
}
th, td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--hairline); }
th {
  font-weight: 700; font-size: 0.8125rem; text-transform: none; letter-spacing: 0;
  color: var(--ink); background: var(--surface-card);
}
td { color: var(--body); }
tr:last-child td { border-bottom: none; }

.row-good td { color: var(--success); }
.row-bad td { color: var(--danger); }

/* ---- Callouts: hairline blocks with bracketed titles ---- */
.trap {
  border: 1px solid var(--hairline); border-left: 2px solid var(--danger);
  background: var(--surface-soft);
  padding: 1rem 1.25rem; border-radius: 0; margin: 1.5rem 0;
}
.trap-title { font-weight: 700; font-size: 0.9375rem; color: var(--danger); margin-bottom: 0.3rem; }
.trap-title::before { content: "[!] "; }
.trap p:last-child { margin-bottom: 0; }

.warning-block {
  border: 1px solid var(--hairline); border-left: 2px solid var(--warn);
  background: var(--surface-soft);
  padding: 1rem 1.25rem; border-radius: 0; margin: 1.5rem 0;
}
.warning-title { font-weight: 700; font-size: 0.9375rem; color: var(--warn); margin-bottom: 0.3rem; }
.warning-title::before { content: "[!] "; }

.info-block {
  border: 1px solid var(--hairline); border-left: 2px solid var(--ink);
  background: var(--surface-soft);
  padding: 1rem 1.25rem; border-radius: 0; margin: 1.5rem 0;
}
.info-block > :last-child { margin-bottom: 0; }

/* ---- Image grid ---- */
.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.img-grid figure {
  margin: 0; border-radius: 0; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--hairline);
}
.img-grid figure img { width: 100%; height: auto; display: block; }
.img-grid figcaption {
  padding: 0.55rem 0.8rem; font-size: 0.8125rem; color: var(--mute);
  border-top: 1px solid var(--hairline);
}
.img-grid figcaption::before { content: "// "; color: var(--ash); }

/* ---- Card grid (index page) ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;                                  /* hairline seams between cells */
  margin: 2rem 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.card {
  background: var(--canvas); border: 0;
  border-radius: 0; padding: 1.5rem;
  text-decoration: none; color: inherit;
  transition: background-color 0.12s ease;
  display: flex; flex-direction: column; gap: 0.5rem;
}
a.card:hover { background: var(--surface-soft); }
.card-icon { display: none; }   /* brackets are the only iconography */
.card h3 { margin: 0; font-size: 1.0625rem; }
.card h3::before { content: "[+] "; color: var(--ash); font-weight: 400; }
.card p { font-size: 0.9375rem; color: var(--body); margin: 0; line-height: 1.5; }
.card-tag {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0;
  padding: 0.1rem 0.5rem; border-radius: var(--radius-int);
  align-self: flex-start; margin-top: auto;
}
.card-tag-live { background: var(--surface-dark); color: var(--on-dark); }
.card-tag-live::before { content: "● "; color: var(--success); font-size: 0.7em; }
.card-tag-draft {
  background: var(--surface-card); color: var(--mute);
  border: 1px solid var(--hairline);
}
.card-tag-draft::before { content: "○ "; font-size: 0.7em; }

/* ---- Comparison side-by-side ---- */
.comp-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.comp-col { background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 0; padding: 1.25rem; }
.comp-col h4 { margin: 0 0 0.6rem; font-size: 1rem; }
.comp-col ul { margin: 0; padding-left: 0; list-style: none; }
.comp-col li { margin-bottom: 0.4rem; color: var(--body); font-size: 0.9375rem; padding-left: 1.75rem; position: relative; }
.comp-col li::before { content: "[+]"; position: absolute; left: 0; color: var(--ash); }
.comp-good { border-left: 2px solid var(--success); }
.comp-good li::before { content: "[+]"; color: var(--success); }
.comp-bad { border-left: 2px solid var(--danger); }
.comp-bad li::before { content: "[x]"; color: var(--danger); }
.comp-warn { border-left: 2px solid var(--warn); }
.comp-warn li::before { content: "[-]"; color: var(--warn); }

/* ---- Download box ---- */
.download-box {
  background: var(--surface-soft); border: 1px dashed var(--hairline-strong);
  border-radius: 0; padding: 1.5rem;
  text-align: center; margin: 1.5rem 0;
}
.download-box code { font-size: 0.9375rem; background: var(--surface-card); }
.download-box p:last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.footer {
  padding: 2rem 0; border-top: 1px solid var(--hairline);
  text-align: center; color: var(--mute); font-size: 0.875rem;
}
.footer a { color: var(--mute); text-decoration-color: var(--hairline); }
.footer a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---- FAQ "accordion" → flat bracketed rows ---- */
details.faq-item {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  background: var(--canvas);
}
details.faq-item:first-of-type { border-top: 1px solid var(--hairline); }
details.faq-item summary {
  padding: 0.85rem 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  user-select: none;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::before {
  content: "[+]";
  color: var(--ash);
  flex-shrink: 0;
  font-weight: 500;
}
details.faq-item[open] summary::before { content: "[-]"; color: var(--ink); }
details.faq-item summary:hover { color: var(--ink); }
details.faq-item summary:hover::before { color: var(--ink); }
details.faq-item .faq-body {
  padding: 0.25rem 0 1rem 2.25rem;
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.6;
}
details.faq-item .faq-body > :first-child { margin-top: 0; }
details.faq-item .faq-body > :last-child { margin-bottom: 0; }
details.faq-item .faq-body code { font-size: 0.875rem; }
details.faq-item .faq-body pre { margin: 0.75rem 0; }
details.faq-item .faq-body pre code { font-size: 0.8125rem; }

/* ---- Responsive helpers ---- */
@media (max-width: 40rem) {
  .stats { grid-template-columns: 1fr; }
  .img-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}