/* ==========================================================================
   AtomOwn API reference — brand-aligned with atomafrica.tech
   Ink #07090B · paper #EDEFEA · teal-green accent · Archivo + JetBrains Mono
   ========================================================================== */
:root {
  --ink:        #07090B;
  --ink-2:      #0C0F12;
  --ink-hair:   #1B2226;
  --paper:      #EDEFEA;
  --paper-2:    #E2E5DE;
  --white:      #FFFFFF;
  --accent:     #0F7A68;
  --accent-2:   #14A08A;
  --teal:       #64E0C5;
  --green:      #4EAA38;
  --blue:       #3B7CE2;
  --amber:      #C98A1B;
  --red:        #C0392B;
  --text:       #14181A;
  --muted:      #5A625F;
  --muted-2:    #8A928E;
  --border:     #DBE0D8;
  --gradient:   linear-gradient(100deg, #4EAA38, #64E0C5, #3B7CE2, #365E8E);
  --font-head:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sidebar-w:  272px;
  --radius:     12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); color: var(--text);
  background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; /* fintech: figures align in columns */
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
code, pre, .mono { font-family: var(--font-mono); }

/* ---- Layout ---- */
.layout { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w); flex: none; background: var(--ink-2); color: #C6CFCB;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  border-right: 1px solid var(--ink-hair);
}
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 22px 22px 16px; flex: none; }
.sidebar__logo { height: 24px; width: auto; display: block; }
.sidebar__brand b { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -.02em; display: block; }
.sidebar__brand span { color: var(--muted-2); font-size: 12px; }
.sidebar__search { padding: 4px 16px 12px; flex: none; }
.sidebar__search input {
  width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--ink-hair);
  background: #0A0D0F; color: #E7ECEA; font-size: 13px; font-family: var(--font-body);
}
.sidebar__search input::placeholder { color: #6B7772; }
.sidebar__search input:focus { outline: none; border-color: var(--accent); }
.nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 24px; scrollbar-width: thin; scrollbar-color: #2a3236 transparent; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: #2a3236; border-radius: 3px; }
.nav__group { margin-top: 4px; }
.nav__title { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #8A928E; font-weight: 700; padding: 8px 10px; border-radius: 6px; transition: color .14s ease, background .14s ease; user-select: none; }
.nav__title:hover { color: #c0cac6; background: rgba(255,255,255,.06); }
.nav__title:active { background: rgba(255,255,255,.04); }
.nav__chev { font-size: 11px; transition: transform .22s cubic-bezier(.4,0,.2,1); display: inline-block; flex: none; opacity: .7; }
.nav__title[aria-expanded="false"] .nav__chev { transform: rotate(-90deg); }
.nav__items { overflow: hidden; transition: max-height .24s cubic-bezier(.4,0,.2,1), opacity .2s ease; max-height: 1200px; opacity: 1; pointer-events: auto; }
.nav__items.is-collapsed { max-height: 0 !important; opacity: 0; pointer-events: none; }
/* Collapse items immediately before JS runs (aria-expanded set in HTML) */
.nav__title[aria-expanded="false"] + .nav__items { max-height: 0; opacity: 0; pointer-events: none; }
.nav__link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #AEB8B4; font-size: 13.5px; }
.nav__link:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav__link.is-active { background: rgba(20,160,138,.16); color: #fff; box-shadow: inset 2px 0 0 var(--teal); }
.nav__m { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; font-family: var(--font-mono); }
.nav__link.hide { display: none; }

/* ---- Main ---- */
.main { flex: 1; min-width: 0; background: radial-gradient(1100px 460px at 100% -6%, rgba(20,160,138,.06), transparent 60%), var(--paper); }
.topbar { display: none; }
.content { max-width: 940px; margin: 0 auto; padding: 40px 40px 120px; }

/* ---- Hero ---- */
.hero { background: var(--ink); color: #EAF7F3; border-radius: 18px; padding: 44px 40px; margin-bottom: 40px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.hero::before { content: ""; position: absolute; right: -130px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); background: url(atom-orbit.svg) center/contain no-repeat; opacity: .07; pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--gradient); opacity: .10; }
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.hero h1 { font-family: var(--font-head); font-weight: 700; font-size: 34px; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 12px; color: #fff; }
.hero p { color: #CAD5D0; font-size: 16px; max-width: 60ch; margin: 0; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__chip { font-family: var(--font-mono); font-size: 12px; padding: 7px 12px; border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.16); color: #F0F5F3; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.hero__chip b { color: var(--teal); font-weight: 500; }

/* ---- Sections ---- */
section { scroll-margin-top: 24px; margin-bottom: 44px; }
h2.sec { font-family: var(--font-head); font-weight: 700; font-size: 25px; letter-spacing: -.02em; margin: 8px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
section:first-of-type h2.sec { border-top: 0; padding-top: 0; }
h3.sub { font-family: var(--font-head); font-weight: 600; font-size: 18px; letter-spacing: -.01em; margin: 26px 0 8px; }
p.lead { color: var(--muted); font-size: 15.5px; }
.content p { color: #3A423F; }
.content ul { color: #3A423F; padding-left: 20px; }
.content li { margin: 4px 0; }

/* ---- Callouts ---- */
.note { border-radius: 10px; padding: 14px 16px; margin: 18px 0; font-size: 14px; border: 1px solid; }
.note b { font-weight: 700; }
.note--info { background: #EAF6F3; border-color: #BEE3DA; color: #124f43; }
.note--warn { background: #FBF1DD; border-color: #ECD3A0; color: #7a5410; }
.note code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

/* ---- Endpoint card ---- */
.ep { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); margin: 18px 0; overflow: hidden; box-shadow: 0 1px 2px rgba(7,9,11,.03); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.ep:hover { box-shadow: 0 8px 28px rgba(7,9,11,.08); transform: translateY(-1px); border-color: #C7D4CD; }
.ep__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #FBFCFA, #F6F8F4); flex-wrap: wrap; }
.ep__path { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-weight: 500; word-break: break-all; }
.ep__auth { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ep__auth .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ep__body { padding: 16px; }
.ep__desc { margin: 0 0 14px; color: #3A423F; font-size: 14.5px; }

/* Method badges */
.m { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; color: #fff; flex: none; box-shadow: 0 1px 2px rgba(7,9,11,.16), inset 0 1px 0 rgba(255,255,255,.22); }
.m--get { background: linear-gradient(180deg, #5cbf44, var(--green)); }
.m--post { background: linear-gradient(180deg, #14A08A, var(--accent)); }
.m--patch { background: linear-gradient(180deg, #4f8ce8, var(--blue)); }
.m--delete { background: linear-gradient(180deg, #cf4c3e, var(--red)); }
.nav__m.m--get { background: rgba(78,170,56,.18); color: #7ee06a; }
.nav__m.m--post { background: rgba(20,160,138,.2); color: var(--teal); }
.nav__m.m--patch { background: rgba(59,124,226,.2); color: #8bb4ff; }
.nav__m.m--delete { background: rgba(192,57,43,.22); color: #F19A90; }

/* ---- Tables ---- */
.tbl { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 700; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid #EDF0EC; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.k { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.tbl .req { color: var(--red); font-weight: 700; font-size: 11px; }
.tbl .opt { color: var(--muted-2); font-size: 11px; }
.tbl .ty { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }

/* ---- Code blocks ---- */
.block { margin: 14px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--ink-hair); }
.block__bar { display: flex; align-items: center; gap: 8px; background: #0A0D0F; padding: 8px 12px; border-bottom: 1px solid var(--ink-hair); }
.block__label { font-family: var(--font-mono); font-size: 11px; color: #7E8A86; letter-spacing: .04em; }
.tabs { display: flex; gap: 4px; }
.tab { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 10px; border-radius: 6px; color: #8A928E; cursor: pointer; border: 1px solid transparent; background: none; }
.tab.is-active { color: var(--teal); background: rgba(20,160,138,.12); }
.copy { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: #8A928E; cursor: pointer; background: none; border: 1px solid var(--ink-hair); border-radius: 6px; padding: 4px 9px; }
.copy:hover { color: var(--teal); border-color: var(--accent); }
.copy.copied { color: var(--green); }
pre { margin: 0; background: var(--ink-2); color: #DCE6E2; padding: 14px 16px; overflow-x: auto; font-size: 12.8px; line-height: 1.6; }
pre .cm { color: #6B7772; }
pre[hidden] { display: none; }
/* naive JSON/token coloring via spans emitted in HTML */
.t-str { color: #7BE86A; }
.t-key { color: #64E0C5; }
.t-num { color: #6FA8FF; }
.t-punc { color: #8A928E; }
.t-url { color: #F4EFE5; }
.t-verb { color: #C98A1B; }

/* ---- Status/response labels ---- */
.rlabel { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; margin: 16px 0 2px; color: var(--muted); }
.rlabel .code { font-family: var(--font-mono); padding: 2px 7px; border-radius: 5px; font-size: 11.5px; }
.rlabel .code--ok { background: #E4F5E0; color: #2c6e1c; }
.rlabel .code--err { background: #FBEAE7; color: #973124; }

/* ---- Endpoint quick-index table ---- */
.epindex { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.epindex th { background: #FafBf9; text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); }
.epindex td { padding: 9px 12px; border-bottom: 1px solid #EDF0EC; vertical-align: top; }
.epindex tbody tr { transition: background .12s ease; }
.epindex tbody tr:hover td { background: #F5F8F4; }
.epindex tr:last-child td { border-bottom: 0; }
.epindex td.p { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.epindex td.perm code { font-family: var(--font-mono); font-size: 12px; background: #EEF1EC; padding: 1px 6px; border-radius: 5px; color: #3A423F; }

/* ---- Footer ---- */
.foot { border-top: 1px solid var(--border); margin-top: 50px; padding-top: 22px; color: var(--muted); font-size: 13px; }
.foot a { font-weight: 600; }

/* ---- Mobile ---- */
.backdrop { display: none; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
  body.nav-open .sidebar { transform: none; }
  .backdrop { display: block; position: fixed; inset: 0; background: rgba(7,9,11,.5); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .backdrop { opacity: 1; pointer-events: auto; }
  .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ink-2); color: #fff; position: sticky; top: 0; z-index: 30; }
  .topbar__burger { background: none; border: 1px solid var(--ink-hair); color: #fff; border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }
  .topbar b { font-family: var(--font-head); font-size: 15px; }
  .topbar__logo { height: 20px; width: auto; }
  .content { padding: 24px 18px 100px; }
  .hero { padding: 32px 24px; }
  .hero h1 { font-size: 27px; }
}