/* =====================================================================
   NGENT — shared design system
   Canonical source: index.html (the approved v1 landing).
   One stylesheet for index / setup / docs so the whole site reads as
   ONE cohesive thing. Brutalist / flat / hard edges / mobile-first.
   noid theme — bg #171717, fg #dedede, muted #a8a39b, accent ONLY #f25623.
   Fonts: Ugocranis (the >NGENT_ wordmark), Space Grotesk (headings/body),
   JetBrains Mono (code / labels / eyebrows).
   ===================================================================== */

/* the real noid.gg logo font — keeps the >NGENT_ wordmark on-brand.
   pages all live at the site ROOT, so the path is fonts/… (NOT ../fonts/…) */
@font-face{
  font-family:'Ugocranis';
  src:url('fonts/ugocranis.woff2') format('woff2'),
      url('fonts/ugocranis.woff') format('woff'),
      url('fonts/ugocranis.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* ---- design tokens ---- */
:root{
  --bg:#171717;
  --fg:#dedede;
  --muted:#a8a39b;
  --faint:#857f76;        /* dimmer than muted — hints, captions */
  --accent:#f25623;       /* the ONLY accent. no gold/green/blue. */
  --line:#2a2a2a;         /* hairline dividers / quiet borders */
  --line-strong:#333333;  /* component borders (cards, code) */
  --card:#1d1d1d;         /* raised surface */
  --code-bg:#141414;      /* code / command wells */
  --sel:#222;             /* :active / pressed wells */

  --mark:'Ugocranis','Space Grotesk',sans-serif;  /* the >NGENT_ wordmark */
  --sans:'Space Grotesk',system-ui,sans-serif;    /* headings + body prose */
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* code/labels */
}

/* ---- reset / base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--mono);
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--muted);text-decoration:none;transition:color .12s ease}
a:hover{color:var(--fg)}

/* =====================================================================
   HEADER / TOPBAR  — identical chrome on every page.
   Small "ngent / noid.gg" mark left, mono nav links right with active state.
   ===================================================================== */
.topbar{
  flex:none;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.brand .n{color:var(--fg);font-weight:500}
.brand .sep{color:var(--accent);margin:0 9px}

.topnav{display:flex;align-items:center;gap:4px}
.topnav a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border:1px solid transparent;
  transition:color .12s ease,border-color .12s ease;
}
.topnav a:hover{color:var(--fg);border-color:var(--line)}
.topnav a.active{color:var(--accent);border-color:var(--accent)}

/* =====================================================================
   THE >NGENT_ WORDMARK  — orange '>' prompt, WHITE 'N', ORANGE 'GENT',
   blinking '_' cursor. Sized by ctx (.hero is the big landing version).
   ===================================================================== */
.mark{
  font-family:var(--mark);
  font-weight:normal;
  letter-spacing:0.01em;
  line-height:0.9;
  color:var(--fg);
}
.mark .p{color:var(--accent)}        /* > terminal prompt */
.mark .nn{color:#ffffff}             /* N — white */
.mark .gent{color:var(--accent)}     /* GENT — orange */
.mark .cur{color:var(--accent);animation:blink 1.1s step-end infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* =====================================================================
   EYEBROW / SECTION LABELS — mono, uppercase, orange.
   .eyebrow = a standalone section label; .cmd-label uses orange 01/02 nums.
   ===================================================================== */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:10px;
}
.eyebrow.rule::before{content:"";width:24px;height:1px;background:var(--accent)}

/* numbered label — ONE treatment for the "01 INSTALL / 02 CONFIGURE" pattern
   everywhere it appears: index .cmd-label, setup .step .title, and the docs
   numbered section headings. The NUMBER is orange (.n), the LABEL is white
   (--fg). This is the single shared rule so the numbered-label never reads
   muted on one page, fully-orange on another, and white on a third. */
.cmd-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg);
  text-align:left;
  margin-bottom:8px;
}
.cmd-label .n{color:var(--accent)}

/* =====================================================================
   COMMAND BLOCK  — $ cmd well + COPY button. The signature component.
   ===================================================================== */
.cmd{
  display:flex;
  align-items:stretch;
  border:1px solid var(--line-strong);
  background:var(--card);
  text-align:left;
  transition:border-color .12s ease;
}
.cmd:hover{border-color:#3d3d3d;border-left-color:var(--accent)}
.cmd-code{
  flex:1;
  min-width:0;
  padding:14px 15px;
  font-family:var(--mono);
  font-size:clamp(11.5px,3.3vw,13.5px);
  line-height:1.5;
  color:var(--fg);
  overflow-x:auto;
  white-space:nowrap;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.cmd-code::-webkit-scrollbar{display:none}
.cmd-code .p{color:var(--accent);user-select:none}

.copy{
  flex:none;
  width:78px;
  border:none;
  border-left:1px solid var(--line-strong);
  background:transparent;
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .12s ease,background .12s ease,border-color .12s ease;
}
.copy:hover{color:var(--accent);border-left-color:var(--accent)}
.copy:active{background:var(--sel)}
/* success state — solid orange fill + dark text. Shared by BOTH the inline
   .cmd COPY cell and the docs .codeblock COPY chip, so the same Copy action
   gives identical feedback everywhere. */
.copy.ok{color:#171717;background:var(--accent);border-left-color:var(--accent)}

/* multi-line code well (docs): same skin, block layout + scroll.
   Shares the inline .cmd rhythm — same border, same #1d1d1d surface, same
   tight 14px vertical padding — so a single-line command reads identically
   whether it sits in a .cmd row or a .codeblock well. The only intentional
   difference is the COPY placement (inline-right cell vs top-right chip). */
.codeblock{
  position:relative;
  background:var(--card);
  border:1px solid var(--line-strong);
  margin:16px 0;
  max-width:100%;
  transition:border-color .12s ease;
}
.codeblock:hover{border-color:#3d3d3d;border-left-color:var(--accent)}
.codeblock pre{
  margin:0;
  padding:14px 64px 14px 15px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:clamp(11.5px,3.3vw,13.5px);
  line-height:1.5;
  color:var(--fg);
  white-space:pre;
  -ms-overflow-style:none;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.codeblock.softwrap pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.codeblock pre::-webkit-scrollbar{height:7px}
.codeblock pre::-webkit-scrollbar-thumb{background:var(--line-strong)}
.codeblock .p,.codeblock .prompt{color:var(--accent);user-select:none}
.codeblock .cmt{color:var(--faint)}
.codeblock .copy{
  position:absolute;
  top:8px;
  right:8px;
  width:auto;
  border:1px solid var(--line-strong);
  border-left:1px solid var(--line-strong);
  background:var(--card);
  padding:5px 10px;
  font-size:11px;
}
.codeblock .copy:hover{color:var(--accent);border-color:var(--accent)}
.codeblock .copy.ok{color:#171717;background:var(--accent);border-color:var(--accent)}

/* inline code — ONE component, ONE treatment everywhere.
   Prose tokens (code.ic / .doc-intro code), note/callout code (.note code),
   and step-description code (.step .desc code) ALL render orange-on-#141414
   so the inline-code chip never flips color between pages/contexts.
   NOTE the :not(.cmd-code) guard: the command-well <code class="cmd-code"> also
   lives inside .step .desc, but it is NOT an inline chip — it must keep the
   shared .cmd-code nowrap + horizontal-scroll behavior so the install command
   wraps IDENTICALLY on setup as it does on index/docs (single scroll line on
   mobile, not a 3-line word-broken block). Without this guard the chip rule's
   white-space:normal/word-break leaked onto the well and made setup wrap. */
code.ic,
.doc-intro code,
.note code,
.step .desc code:not(.cmd-code){
  font-family:var(--mono);
  font-size:.86em;
  color:var(--accent);
  background:var(--code-bg);
  border:1px solid var(--line-strong);
  padding:1px 6px;
  word-break:break-word;
  white-space:normal;
}

/* =====================================================================
   CARD / ROW  — generic raised surface with orange-on-hover left edge.
   .step (numbered guide row) and .opt-rows / .stages are built on this.
   ===================================================================== */
.card{
  border:1px solid var(--line);
  background:var(--card);
  transition:border-color .12s ease;
}
.card:hover{border-color:#3d3d3d;border-left-color:var(--accent)}

/* numbered step row (setup guide) */
.step{
  display:flex;
  gap:16px;
  align-items:flex-start;
  border:1px solid var(--line);
  background:var(--card);
  padding:18px 18px 18px 16px;
  transition:border-color .12s ease;
}
.step:hover{border-color:#3d3d3d;border-left-color:var(--accent)}
.step .num{
  flex:none;
  font-family:var(--mono);
  font-weight:500;
  font-size:15px;
  color:var(--accent);
  width:30px;
  text-align:right;
  line-height:1.5;
  user-select:none;
}
.step .body{flex:1;min-width:0}
.step .title{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--fg);
  font-weight:500;
  margin-bottom:6px;
}
.step .desc{
  font-family:var(--sans);
  font-size:clamp(12.5px,3.4vw,14px);
  color:var(--muted);
  line-height:1.6;
}
.step .desc b{color:var(--fg);font-weight:500}
.step .desc .hint{display:block;margin-top:7px;font-size:.86em;color:var(--faint)}
/* .step .desc code is styled by the unified inline-code rule above (orange). */

/* key/value option rows (CLI flags, etc.) */
.opts{border:1px solid var(--line-strong);margin:16px 0;max-width:66ch}
.opt{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:none}
.opt .k{font-family:var(--mono);font-size:.84rem;color:var(--accent);word-break:break-word}
.opt .v{font-family:var(--sans);color:var(--muted);font-size:.92rem}

/* lifecycle stages */
.stages{display:flex;flex-direction:column;border:1px solid var(--line-strong);margin:18px 0;max-width:66ch}
.stage{display:flex;gap:14px;align-items:flex-start;padding:16px;border-bottom:1px solid var(--line)}
.stage:last-child{border-bottom:none}
/* lifecycle stage badge — all three rungs of the ladder share ONE solid
   orange fill so the three-step rhythm reads as a single component repeated,
   not a broken/odd-one-out. (Graduation is communicated by the row's text,
   not by de-emphasizing the badge.) */
.stage .badge{
  flex:0 0 auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:#171717;background:var(--accent);padding:3px 8px;margin-top:2px;min-width:74px;text-align:center;
}
.stage .s-body strong{color:var(--fg);font-weight:600;font-family:var(--sans);display:block;margin-bottom:2px}
.stage .s-body span{font-family:var(--sans);color:var(--muted);font-size:.92rem}

/* =====================================================================
   CALLOUT / NOTE  — quiet panel with orange left rule.
   ===================================================================== */
.note{
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  background:#1a1a1a;
  padding:14px 16px;
  margin:18px 0;
  font-family:var(--sans);
  font-size:.94rem;
  color:var(--muted);
  line-height:1.65;
  max-width:66ch;
}
.note .k{
  font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}
.note .strong,.note b{color:var(--fg);font-weight:500}
.note p + p{margin-top:8px}
/* .note code is styled by the unified inline-code rule above (orange). */

/* =====================================================================
   TYPE SCALE  — headings/body prose use Space Grotesk.
   ===================================================================== */
.lede{
  font-family:var(--sans);
  font-size:clamp(13px,3.6vw,15px);
  color:var(--muted);
  margin-top:16px;
  max-width:48ch;
  text-wrap:balance;
}
.lede b{color:var(--fg);font-weight:500}

.tag{
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(13px,3.7vw,16px);
  line-height:1.65;
  color:var(--muted);
  max-width:42ch;
  text-wrap:balance;
}
.tag b{color:var(--fg);font-weight:500}

/* =====================================================================
   FOOTER  — quiet one-line footer, identical everywhere.
   ===================================================================== */
footer{
  flex:none;
  position:relative;
  z-index:1;
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:16px 22px;
  text-align:center;
}
.foot-line{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.foot-line .dot{color:var(--accent);margin:0 9px}
.foot-line a{color:var(--muted);text-decoration:none}
.foot-line a:hover{color:var(--fg)}

/* =====================================================================
   SHARED LAYOUT  — column body + centered content well.
   Interior pages (setup + docs) share ONE column width (640px) so body-text
   line lengths and left/right edges line up exactly when toggling pages.
   ===================================================================== */
.col{display:flex;flex-direction:column;min-height:100vh}
.wrap{width:100%;max-width:640px;margin:0 auto;padding:46px 22px 30px;flex:1}

/* =====================================================================
   DOCS — section type + sticky table-of-contents.
   Lives in the shared sheet so docs reads as the SAME page family as
   index / setup: same centered 640px column, same uppercase mono section
   markers (01 INSTALL …), same eyebrow rhythm. The TOC turns the long
   reference into a navigable page instead of one uninterrupted scroll.
   ===================================================================== */
.doc-intro{
  font-family:var(--sans);color:var(--muted);
  font-size:clamp(13px,3.6vw,15px);max-width:60ch;margin:16px 0 8px;line-height:1.65;
}
.doc-intro b,.doc-intro .strong{color:var(--fg);font-weight:500}

/* sticky on-page table of contents — quick-jump nav, mono uppercase to
   match the topnav / eyebrow language. Sits at the top of the column on
   mobile, becomes a left rail on wide desktops. */
.doc-toc{
  border:1px solid var(--line);
  background:var(--card);
  padding:16px 18px;
  margin:0 0 8px;
}
.doc-toc .k{
  font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.doc-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.doc-toc a{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.06em;
  color:var(--muted);padding:5px 2px;border-left:2px solid transparent;
  transition:color .12s ease,border-color .12s ease,padding-left .12s ease;
}
.doc-toc a:hover{color:var(--fg);border-left-color:var(--accent);padding-left:8px}
.doc-toc a.active{color:var(--fg);border-left-color:var(--accent);padding-left:8px}
.doc-toc a .tn{color:var(--accent);flex:none;min-width:20px}

/* a docs section. Marker = the SHARED numbered-label component (orange number +
   white label, with the eyebrow hairline rule), identical to the index
   .cmd-label and setup .step .title pattern — NOT a fully-orange eyebrow and
   NOT a '# Title' h2. The number is the orange .n span; the label is white. */
.doc-section{padding:36px 0 6px;border-top:1px solid var(--line);margin-top:30px}
.doc-section:first-of-type{border-top:none;margin-top:18px;padding-top:6px}
.doc-section .eyebrow{margin-bottom:14px;scroll-margin-top:96px;color:var(--fg)}
.doc-section .eyebrow .n{color:var(--accent)}
.doc-section h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;margin:24px 0 8px;color:var(--fg)}
.doc-section p{font-family:var(--sans);color:var(--muted);margin:12px 0;max-width:66ch;line-height:1.65}
.doc-section p .strong{color:var(--fg);font-weight:500}
.doc-section ul,.doc-section ol{font-family:var(--sans);color:var(--muted);max-width:66ch;padding-left:22px;margin:12px 0}
.doc-section li{margin:7px 0;line-height:1.6}
.doc-section li .strong{color:var(--fg);font-weight:500}
/* back-to-top affordance so the footer is always one click away mid-page */
.doc-totop{
  display:inline-flex;align-items:center;gap:7px;margin:6px 0 2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--faint);
}
.doc-totop:hover{color:var(--accent)}
.doc-totop::before{content:"\2191";color:var(--accent)}

/* =====================================================================
   DOCS DESKTOP  — promote the TOC into a sticky left rail beside the
   column on wide screens, so the long reference is navigable without
   scrolling and the page no longer reads as one uninterrupted column.
   ===================================================================== */
@media(min-width:1000px){
  .wrap.docs-wrap{
    /* rail (200) + gap (48) + reading column (640) = the exact same 640px
       reading measure as the setup column, so body-text line lengths match
       and the reading column's left/right edges align with setup when the
       container is centered. The TOC rail is docs-specific chrome to the
       left of that shared column. */
    max-width:888px;
    display:grid;
    grid-template-columns:200px 640px;
    column-gap:48px;
    justify-content:center;
    align-items:start;
  }
  .wrap.docs-wrap .head,
  .wrap.docs-wrap .doc-col{grid-column:2;min-width:0}   /* body in the 640 column */
  .doc-toc{
    grid-column:1;grid-row:2;
    position:sticky;top:88px;
    margin:0;background:transparent;border:none;border-left:1px solid var(--line);
    padding:2px 0 2px 16px;
  }
}

/* =====================================================================
   MOBILE  — shared responsive tightening.
   ===================================================================== */
@media(max-width:430px){
  .topbar{padding:16px 18px}
  .topnav a{padding:6px 7px;letter-spacing:0.1em}
  .copy{width:64px}
  .wrap{padding:34px 18px 24px}
  .step{padding:15px 15px 15px 13px;gap:12px}
  .step .num{width:22px}
  .doc-section .eyebrow{flex-wrap:wrap}
}