/* ============================================================
   NIWO docs — layout only. Palette, type and components come from
   app.css, which already carries the Discord system.
   ============================================================ */

.doc-wrap{ display:flex; min-height:100vh; }

/* ---------- sidebar ---------- */
.doc-side{
  width:268px; flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--panel); padding:26px 16px 40px;
  display:flex; flex-direction:column; gap:22px;
}
.doc-side .brand{
  display:flex; align-items:center; gap:10px; padding:0 8px 4px;
  font-family:var(--font-display); font-weight:800; font-size:19px;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--text);
}
/* The logo's own black-and-red badge, not the app's blurple. */
.doc-side .brand .mk{
  width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:#000;
}
.doc-side .brand .mk svg{ width:16px; height:16px; }
.doc-side .brand small{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.08em;
  color:var(--muted-2); text-transform:uppercase; display:block; margin-top:1px;
}
.doc-sec{
  font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2); padding:0 8px; margin:0 0 8px;
}
.doc-nav{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:2px; }
.doc-nav a{
  display:block; padding:9px 12px; border-radius:12px; font-size:14.5px;
  color:var(--muted); transition:background .16s var(--ease), color .16s var(--ease);
}
.doc-nav a:hover{ background:var(--elev); color:var(--text); }
.doc-nav a.on{ background:var(--blue); color:#fff; font-weight:500; }

/* ---------- content ---------- */
.doc-main{
  flex:1; min-width:0; background:var(--elev);
  border:1px solid var(--line-soft); border-right:0; border-bottom:0;
  border-radius:18px 0 0 0; padding:48px 56px 90px;
}
.doc-body{ max-width:760px; }
.doc-kick{
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-bright); margin:0 0 12px;
}
.doc-body h1{ font-size:clamp(30px,4vw,44px); line-height:1.08; margin:0 0 16px; }
.doc-body h2{
  font-size:clamp(21px,2.4vw,27px); line-height:1.15; margin:52px 0 14px;
  padding-top:26px; border-top:1px solid var(--line-soft);
}
.doc-body h3{ font-size:17px; line-height:1.25; margin:28px 0 10px; }
.doc-body p{ font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 16px; }
.doc-body .lede{ font-size:18px; line-height:1.6; color:var(--muted); margin-bottom:8px; }
.doc-body strong{ color:var(--text); font-weight:700; }
.doc-body a:not(.btn){ color:var(--blue-bright); text-decoration:underline; text-underline-offset:3px; }
.doc-body ul,.doc-body ol{ margin:0 0 18px; padding-left:22px; color:var(--muted); font-size:16px; line-height:1.65; }
.doc-body li{ margin-bottom:8px; }
.doc-body li::marker{ color:var(--muted-2); }
.doc-body code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:2px 6px; color:var(--text);
}

/* numbered steps */
.steps-d{ list-style:none; margin:0 0 20px; padding:0; counter-reset:sd; }
.steps-d li{
  position:relative; padding:0 0 0 46px; margin-bottom:20px;
  counter-increment:sd; color:var(--muted); font-size:16px; line-height:1.6;
}
.steps-d li::before{
  content:counter(sd); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  background:var(--blue); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:14px;
}
.steps-d li b{ display:block; color:var(--text); font-weight:700; margin-bottom:3px; }

/* callout */
.note{
  border-radius:16px; padding:18px 20px; margin:0 0 22px;
  background:var(--panel); border-left:3px solid var(--blue);
}
.note.warn{ border-left-color:var(--amber,#fda220); }
.note.good{ border-left-color:var(--green); }
.note p{ margin:0; font-size:15px; }
.note b{ color:var(--text); }

/* spec table */
.spec{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15px; }
.spec th,.spec td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.spec th{
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2);
}
.spec td{ color:var(--muted); }
.spec td:first-child{ color:var(--text); font-weight:600; white-space:nowrap; }

/* next/prev */
.doc-foot{ display:flex; gap:14px; margin-top:60px; padding-top:26px; border-top:1px solid var(--line-soft); }
.doc-foot a{
  flex:1; padding:16px 18px; border-radius:16px; background:var(--panel);
  border:1px solid var(--line); text-decoration:none !important;
  transition:border-color .18s var(--ease);
}
.doc-foot a:hover{ border-color:var(--blue); }
.doc-foot .d{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px; }
.doc-foot .t{ font-size:15.5px; font-weight:700; color:var(--text); }
.doc-foot a.nx{ text-align:right; }

@media (max-width:900px){
  .doc-wrap{ flex-direction:column; }
  .doc-side{ width:auto; position:static; height:auto; }
  .doc-main{ border-radius:18px 18px 0 0; padding:32px 22px 60px; border-right:1px solid var(--line-soft); }
  .doc-nav{ flex-direction:row; flex-wrap:wrap; }
}