/* ═══════════════════════════════════════════════════════════
   DRAVEN AI DOCS — docs.dravenai.lat
   Same brand tokens as console.dravenai.lat / dravenai.lat so the
   three properties feel like one product. Plain CSS, no build step.
═══════════════════════════════════════════════════════════ */

:root{
  --bg:          #0d0e11;
  --surface:     #131418;
  --surface-2:   #1b1c21;
  --surface-3:   #202024;
  --border:      #26282e;
  --border-soft: #1d1e22;

  --text:        #f5f5f6;
  --text-2:      #9a9ba1;
  --text-3:      #6c6d73;

  --accent:      #e0672b;
  --accent-2:    #ff7a47;
  --accent-dim:  rgba(224,103,43,0.12);
  --accent-dim-2:rgba(224,103,43,0.22);

  --danger:      #e5484d;
  --danger-soft: #e5484d1a;
  --ok:          #4ade80;

  --get:    #4ade80;
  --post:   #e0672b;
  --radius: 10px;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html,body{margin:0; min-height:100vh;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;}
img,svg{display:block; max-width:100%;}

/* ── Top bar ─────────────────────────────────────────────── */
.navbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.navbar .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:19px; letter-spacing:-0.4px;
  text-decoration:none; color:var(--text);
}
.navbar .brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-dim);
}
.brand-logo{
  width:24px; height:24px; border-radius:7px;
  flex:0 0 auto; object-fit:cover;
  box-shadow:0 0 0 1px var(--border-soft);
}
.navbar .brand small{
  font-weight:500; color:var(--text-3); font-size:13px; margin-left:2px;
}
.navbar-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:transparent; border:none; color:var(--text-2);
  cursor:pointer; border-radius:8px;
}
.icon-btn:active{ background:var(--surface-2); }

.menu-btn{
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.menu-btn span{
  width:22px; height:2px; background:var(--text);
  display:block; transition:transform .2s, opacity .2s;
}
.menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Sidebar drawer (mobile-first; becomes a static rail on wide screens) ── */
.sidebar-overlay{
  position:fixed; inset:0; z-index:45;
  background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sidebar-overlay.open{ opacity:1; pointer-events:auto; }

.sidebar{
  position:fixed; top:0; bottom:0; left:0; z-index:46;
  width:86%; max-width:340px;
  background:var(--surface);
  border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:transform .22s ease;
  display:flex; flex-direction:column;
  overflow-y:auto;
  padding:18px 14px 40px;
}
.sidebar.open{ transform:translateX(0); }

.sidebar-head{
  display:flex; align-items:center;
  padding:6px 8px 18px;
}
.sidebar-head .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:19px; letter-spacing:-0.4px;
  text-decoration:none; color:var(--text);
}
.side-group-title{
  font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-3);
  padding:18px 12px 8px;
}
.side-group-title:first-of-type{ padding-top:8px; }
.sidebar-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; margin:1px 0;
  border-radius:8px;
  color:var(--text-2); text-decoration:none;
  font-size:14.5px; font-weight:500;
}
.sidebar-item svg{ flex:0 0 auto; opacity:.85; }
.sidebar-item:active{ background:var(--surface-2); }
.sidebar-item.active{
  background:var(--accent-dim);
  color:var(--text);
}
.sidebar-item.active svg{ color:var(--accent); opacity:1; }
.side-div{ height:1px; background:var(--border-soft); margin:12px 4px; }

/* ── Page shell ──────────────────────────────────────────── */
.page{
  display:flex;
}
.content{
  flex:1;
  max-width:760px;
  margin:0 auto;
  padding:36px 20px 100px;
  min-width:0;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:10px;
}
h1{ font-size:29px; font-weight:800; letter-spacing:-0.5px; margin:0 0 10px; }
h2{ font-size:21px; font-weight:700; letter-spacing:-0.3px; margin:44px 0 14px; scroll-margin-top:80px; }
h2:first-of-type{ margin-top:34px; }
h3{ font-size:16.5px; font-weight:700; margin:26px 0 10px; scroll-margin-top:80px; }
.lede{ font-size:16.5px; color:var(--text-2); max-width:560px; margin:0 0 8px; }
p{ font-size:15px; color:var(--text-2); margin:0 0 14px; }
p strong{ color:var(--text); font-weight:600; }
p code, li code{
  font-family:var(--mono); font-size:.88em;
  background:var(--surface-2); border:1px solid var(--border-soft);
  padding:1.5px 6px; border-radius:5px; color:var(--accent-2);
  word-break:break-word;
}
ul,ol{ padding-left:20px; margin:0 0 16px; color:var(--text-2); font-size:15px; }
li{ margin:6px 0; }
li strong{ color:var(--text); }
hr{ border:none; border-top:1px solid var(--border-soft); margin:36px 0; }

/* ── Callouts ────────────────────────────────────────────── */
.callout{
  display:flex; gap:11px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px; margin:18px 0;
  font-size:14px; color:var(--text-2);
}
.callout svg{ flex:0 0 auto; margin-top:2px; color:var(--accent); }
.callout.warn svg{ color:#f5b942; }
.callout.warn{ border-color:#f5b94233; }
.callout.danger svg{ color:var(--danger); }
.callout.danger{ border-color:var(--danger-soft); }
.callout b{ color:var(--text); }

/* ── Code blocks ─────────────────────────────────────────── */
.code-block{
  position:relative;
  background:#0a0b0d;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:16px 0 20px;
  overflow:hidden;
}
.code-block .code-label{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px;
  font-size:12px; color:var(--text-3);
  border-bottom:1px solid var(--border-soft);
  font-family:var(--mono);
}
.code-block pre{
  margin:0; padding:16px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:13px; line-height:1.65;
  color:#e7e7ea;
  -webkit-overflow-scrolling:touch;
}
.code-block code{ background:none; border:none; padding:0; color:inherit; font-size:inherit; }
.copy-btn{
  background:transparent; border:none; color:var(--text-3);
  cursor:pointer; padding:4px; display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-family:var(--sans);
}
.copy-btn:active{ color:var(--text); }

/* ── Tabbed code examples (cURL / Python / JavaScript switcher) ───── */
.code-tabs{
  position:relative;
  background:#0a0b0d;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:16px 0 20px;
  overflow:hidden;
}
.code-tabs-header{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border-soft);
  padding:0 10px;
}
.code-tabs-list{ display:flex; gap:4px; overflow-x:auto; }
.code-tab{
  background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  color:var(--text-3); padding:11px 12px 9px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.code-tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.code-tabs-header .copy-btn{ padding:8px; flex:0 0 auto; }
.code-tab-panel{ display:none; margin:0; padding:16px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.65; color:#e7e7ea; -webkit-overflow-scrolling:touch; }
.code-tab-panel.active{ display:block; }
.code-tab-panel code{ background:none; border:none; padding:0; color:inherit; font-size:inherit; }

/* token colors (very small hand-rolled highlighter, applied via spans) */
.tok-key{ color:#7dc4ff; }
.tok-str{ color:#9ee89e; }
.tok-num{ color:#ffb86b; }
.tok-cmt{ color:var(--text-3); }
.tok-const{ color:var(--accent-2); }

/* ── HTTP method + endpoint header ──────────────────────────*/
.endpoint{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:8px 0 18px;
}
.method{
  font-family:var(--mono); font-weight:700; font-size:12.5px;
  padding:4px 9px; border-radius:6px; letter-spacing:.02em;
}
.method.get{ background:rgba(74,222,128,.12); color:var(--get); }
.method.post{ background:var(--accent-dim); color:var(--accent-2); }
.endpoint-path{
  font-family:var(--mono); font-size:14.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border-soft);
  padding:5px 10px; border-radius:6px;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; margin:16px 0 20px; border:1px solid var(--border); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:13.8px; min-width:480px; }
thead th{
  text-align:left; color:var(--text-3); font-weight:600; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:11px 14px; border-bottom:1px solid var(--border);
  background:var(--surface);
}
tbody td{ padding:12px 14px; border-bottom:1px solid var(--border-soft); color:var(--text-2); vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody td:first-child{ color:var(--text); font-family:var(--mono); font-size:13px; white-space:nowrap; }
tbody code{ font-family:var(--mono); font-size:.9em; color:var(--accent-2); }

/* ── Badges / pills ──────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:100px;
  border:1px solid var(--border);
  color:var(--text-2);
}
.badge.required{ color:var(--danger); border-color:var(--danger-soft); background:var(--danger-soft); }
.badge.optional{ color:var(--text-3); }
.badge.free{ color:var(--get); border-color:rgba(74,222,128,.25); background:rgba(74,222,128,.08); }

/* ── Live /v1/models catalog ────────────────────────────────── */
.model-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 14px; }
.model-tab{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  color:var(--text-2); background:var(--surface); border:1px solid var(--border);
  border-radius:100px; padding:6px 12px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.model-tab-count{ color:var(--text-3); font-weight:500; }
.model-tab.active{ color:var(--text); background:var(--accent-dim); border-color:var(--accent-dim-2); }
.model-tab.active .model-tab-count{ color:var(--accent-2); }
.model-id-cell{ display:flex; align-items:center; gap:8px; }
.model-id-inline{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle; margin:2px 0; }
.model-icon{ border-radius:5px; flex:0 0 auto; background:var(--surface-2); }
.model-icon-fallback{
  width:20px; height:20px; border-radius:5px; background:var(--surface-3);
  color:var(--text-3); font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--sans);
}
.model-loading{
  display:flex; align-items:center; gap:10px; color:var(--text-2);
  font-size:13.8px; padding:24px 0;
}
.spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:drv-spin .7s linear infinite; flex:0 0 auto;
}
@keyframes drv-spin{ to{ transform:rotate(360deg); } }
.model-count-note{ font-size:12.5px; color:var(--text-3); margin-top:-6px; }
.link-btn{
  background:none; border:none; color:var(--accent-2); font-weight:600;
  cursor:pointer; padding:0; font-size:inherit; text-decoration:underline;
}

/* ── Param list ──────────────────────────────────────────── */
.param{
  padding:14px 0; border-bottom:1px solid var(--border-soft);
}
.param:last-child{ border-bottom:none; }
.param-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:4px; }
.param-name{ font-family:var(--mono); font-size:14px; color:var(--text); font-weight:600; }
.param-type{ font-family:var(--mono); font-size:12.5px; color:var(--text-3); }
.param p{ margin:4px 0 0; font-size:13.8px; }

/* ── Prev/next footer nav ───────────────────────────────────*/
.pager{
  display:flex; justify-content:space-between; gap:14px;
  margin-top:52px; padding-top:24px; border-top:1px solid var(--border-soft);
}
.pager a{
  flex:1; text-decoration:none;
  border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; color:var(--text-2);
  display:flex; flex-direction:column; gap:4px;
}
.pager a:active{ background:var(--surface); }
.pager .pager-dir{ font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.pager .pager-title{ font-size:14.5px; color:var(--text); font-weight:600; }
.pager .next{ text-align:right; align-items:flex-end; }

/* ── Card grid (index page) ──────────────────────────────── */
.card-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:22px 0 8px; }
.card{
  display:block; text-decoration:none;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
}
.card:active{ border-color:var(--accent); }
.card .card-title{ display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:700; color:var(--text); margin-bottom:4px; }
.card .card-title svg{ color:var(--accent); }
.card .card-desc{ font-size:13.8px; color:var(--text-2); margin:0; }

@media (min-width:860px){
  .sidebar{
    position:sticky; left:0; top:57px;
    transform:none; width:264px; height:calc(100vh - 57px);
    border-right:1px solid var(--border);
    flex:0 0 264px;
  }
  .sidebar-overlay{ display:none; }
  .menu-btn{ display:none; }
  .content{ padding:44px 48px 120px; max-width:720px; }
  .card-grid{ grid-template-columns:1fr 1fr; }
}