/* =========================================================================
   MyNEX Platform Documentation — shared design system
   Dark-first fintech theme. "Indian Ocean premium": lagoon teal brand,
   silver for NAQD, ocean blue for USD, abyss neutrals. Mirrors the actual
   design tokens in mynex_mobile/lib/core/theme so the docs and the product
   feel like one family. System fonts only — fully offline-capable.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- palette (Indian Ocean premium) ---- */
  --bg:            #05090f;   /* abyss950 */
  --bg-elevated:   #0a0f17;
  --bg-surface:    #0d1420;   /* card surface */
  --bg-surface-2:  #111a27;   /* nested / hovered surface */
  --bg-code:       #0a1119;
  --border:        #1d2938;
  --border-strong: #2a3b4d;
  --border-faint:  #141d29;

  --text:          #eef3f8;   /* abyss50 */
  --text-secondary:#c3d0dc;
  --text-muted:    #8496a6;
  --text-faint:    #556676;

  --brand:         #22c9d8;   /* lagoon400 */
  --brand-strong:  #4fe0ec;
  --brand-dim:     #144957;   /* lagoon900 */
  --brand-wash:    rgba(34, 201, 216, 0.10);
  --brand-wash-strong: rgba(34, 201, 216, 0.18);

  --naqd:          #d8dee6;   /* silver */
  --naqd-dim:      #7d8794;
  --naqd-wash:     rgba(196, 205, 216, 0.10);

  --usd:           #6c9bff;   /* ocean400 */
  --usd-wash:      rgba(108, 155, 255, 0.10);

  --mvr:           #22c9d8;

  --success:       #34d399;
  --success-wash:  rgba(52, 211, 153, 0.12);
  --warning:       #fbbf24;
  --warning-wash:  rgba(251, 191, 36, 0.12);
  --danger:        #f87171;
  --danger-wash:   rgba(248, 113, 113, 0.12);
  --info:          #60a5fa;
  --info-wash:     rgba(96, 165, 250, 0.12);

  /* ---- type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* ---- shape ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --sidebar-w: 268px;

  --shadow-lg: 0 20px 50px -20px rgba(0,0,0,0.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
}

/* light-mode override, respected if a viewer forces it */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7f9;
  --bg-elevated: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-2: #eef2f5;
  --bg-code: #0d1420;
  --border: #dde4ea;
  --border-strong: #c7d1da;
  --border-faint: #e7ecf0;
  --text: #0e1620;
  --text-secondary: #33414d;
  --text-muted: #5b6b78;
  --text-faint: #85929d;
  --brand-dim: #dff7f9;
  --brand-wash: rgba(23, 168, 181, 0.08);
  --brand-wash-strong: rgba(23, 168, 181, 0.14);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f7f9;
    --bg-elevated: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-2: #eef2f5;
    --bg-code: #0d1420;
    --border: #dde4ea;
    --border-strong: #c7d1da;
    --border-faint: #e7ecf0;
    --text: #0e1620;
    --text-secondary: #33414d;
    --text-muted: #5b6b78;
    --text-faint: #85929d;
    --brand-dim: #dff7f9;
    --brand-wash: rgba(23, 168, 181, 0.08);
    --brand-wash-strong: rgba(23, 168, 181, 0.14);
  }
}

/* =========================================================================
   Reset
   ========================================================================= */
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: 0.35em; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
h2 {
  font-size: 1.4rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-faint);
}
h2:first-of-type, .content > section:first-of-type h2, .no-rule { border-top: none; padding-top: 0; }
h3 { font-size: 1.1rem; margin-top: 2.2rem; color: var(--text); }
h4 { font-size: 0.95rem; margin-top: 1.6rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
p { margin: 0 0 1rem; }
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--brand-strong);
  white-space: nowrap;
}
strong { color: var(--text); font-weight: 650; }

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

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 22px 16px 40px;
  scrollbar-width: thin;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
}
.brand-mark__logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dim) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #052229; font-size: 15px; letter-spacing: -0.03em;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(34,201,216,0.5);
}
.brand-mark__text { line-height: 1.15; }
.brand-mark__name { color: var(--text); font-weight: 750; font-size: 15px; letter-spacing: -0.01em; }
.brand-mark__sub { color: var(--text-faint); font-size: 11px; letter-spacing: 0.03em; }

.nav-group { margin-top: 18px; }
.nav-group__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 10px 6px;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 500;
  border-left: 2px solid transparent;
}
.nav-link:hover { background: var(--bg-surface-2); color: var(--text); text-decoration: none; }
.nav-link.active {
  background: var(--brand-wash);
  color: var(--brand-strong);
  font-weight: 650;
  border-left: 2px solid var(--brand);
}
.nav-link__num {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
  width: 16px; flex-shrink: 0;
}
.nav-link.active .nav-link__num { color: var(--brand); }

.sidebar-foot {
  margin-top: 28px; padding: 14px 10px 0; border-top: 1px solid var(--border-faint);
  font-size: 11.5px; color: var(--text-faint); line-height: 1.6;
}
.sidebar-foot code { white-space: normal; }

/* content column */
.content-wrap { flex: 1 1 auto; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 40px;
  background: rgba(10, 15, 23, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .topbar, @media (prefers-color-scheme: light) { }
.topbar__crumb { font-size: 12.5px; color: var(--text-faint); }
.topbar__crumb b { color: var(--text-muted); font-weight: 600; }
.topbar__meta { display: flex; align-items: center; gap: 10px; }
.pill {
  font-size: 11px; font-weight: 650; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.pill--brand { color: var(--brand-strong); border-color: rgba(34,201,216,0.35); background: var(--brand-wash); }

.content { max-width: 900px; margin: 0 auto; padding: 44px 40px 120px; }

.page-hero { margin-bottom: 2.6rem; }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-strong); margin-bottom: 12px;
}
.page-hero__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.page-hero h1 { margin-bottom: 0.5rem; }
.page-hero__lede { font-size: 1.05rem; color: var(--text-secondary); max-width: 68ch; }

.page-footer {
  max-width: 900px; margin: 0 auto; padding: 0 40px 60px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--border-faint); padding-top: 24px;
}
.page-footer a { font-size: 13px; color: var(--text-muted); }
.page-footer a:hover { color: var(--brand-strong); }

/* =========================================================================
   Prose helpers
   ========================================================================= */
.lede { font-size: 1.05rem; color: var(--text-secondary); }
.section-intro { color: var(--text-secondary); max-width: 74ch; }
.small-caps {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint);
}

.two-col {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px;
}
.three-col {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
}
@media (max-width: 760px) { .two-col, .three-col { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.card h3 { margin-top: 0; }
.card h3:first-child { margin-top: 0; }

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stat-card__label { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.stat-card__value { font-family: var(--font-mono); font-size: 1.3rem; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-card__hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 1.5rem 0 2rem; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  position: relative; overflow: hidden;
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.pillar--wallet::before { background: var(--brand); }
.pillar--naqd::before { background: linear-gradient(90deg, var(--naqd), var(--naqd-dim)); }
.pillar--rails::before { background: var(--usd); }
.pillar__num { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.pillar h3 { margin-top: 0; font-size: 1.02rem; }
.pillar p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 0; }

/* =========================================================================
   Tables
   ========================================================================= */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 1.2rem 0 1.8rem; }
table { border-collapse: collapse; width: 100%; font-size: 13.3px; min-width: 560px; }
thead th {
  text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
  background: var(--bg-surface-2);
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-faint); vertical-align: top; color: var(--text-secondary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-surface-2); }
td code, th code { white-space: normal; }
table td:first-child, table th:first-child { padding-left: 16px; }
.table-wrap.compact table { min-width: 0; }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* =========================================================================
   Badges
   ========================================================================= */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 5px; line-height: 1.6;
  border: 1px solid transparent;
}
.badge--get    { background: rgba(96,165,250,0.14); color: #7fb4ff; border-color: rgba(96,165,250,0.3); }
.badge--post   { background: rgba(52,211,153,0.14); color: #4fdba6; border-color: rgba(52,211,153,0.3); }
.badge--put    { background: rgba(251,191,36,0.14); color: #ffcf5c; border-color: rgba(251,191,36,0.3); }
.badge--delete { background: rgba(248,113,113,0.14); color: #ff9494; border-color: rgba(248,113,113,0.3); }
.badge--ws     { background: rgba(196,181,253,0.14); color: #c9b7ff; border-color: rgba(196,181,253,0.3); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap;
}
.tag--public  { color: var(--text-muted); }
.tag--jwt     { color: var(--brand-strong); border-color: rgba(34,201,216,0.35); background: var(--brand-wash); }
.tag--admin   { color: #ffb46b; border-color: rgba(255,180,107,0.35); background: rgba(255,180,107,0.1); }
.tag--webhook { color: #c9b7ff; border-color: rgba(201,183,255,0.35); background: rgba(201,183,255,0.1); }

/* =========================================================================
   Callouts
   ========================================================================= */
.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--info);
  background: var(--bg-surface); border-radius: var(--radius-md);
  padding: 14px 18px; margin: 1.3rem 0; font-size: 13.8px;
}
.callout p:last-child { margin-bottom: 0; }
.callout__title { font-weight: 700; color: var(--text); font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.callout--info    { border-left-color: var(--info); }
.callout--info .callout__title { color: var(--info); }
.callout--warn    { border-left-color: var(--warning); }
.callout--warn .callout__title { color: var(--warning); }
.callout--danger  { border-left-color: var(--danger); }
.callout--danger .callout__title { color: var(--danger); }
.callout--success { border-left-color: var(--success); }
.callout--success .callout__title { color: var(--success); }
.callout--gap     { border-left-color: #c9b7ff; }
.callout--gap .callout__title { color: #c9b7ff; }

/* =========================================================================
   Code blocks
   ========================================================================= */
.code-block { margin: 1.2rem 0 1.6rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.code-block__title {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-surface-2); color: var(--text-faint);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
}
pre.code {
  margin: 0; padding: 14px 18px; overflow-x: auto;
  background: var(--bg-code); color: #cfe3ea;
  font-family: var(--font-mono); font-size: 12.6px; line-height: 1.62;
}
pre.code code { background: none; border: none; padding: 0; color: inherit; white-space: pre; }
.tok-key   { color: #7fb4ff; }
.tok-str   { color: #7edcb0; }
.tok-num   { color: #ffcf5c; }
.tok-com   { color: #5c7386; font-style: italic; }
.tok-type  { color: #c9b7ff; }
.tok-fn    { color: #22c9d8; }

/* =========================================================================
   Diagrams
   ========================================================================= */
.diagram-frame {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px; margin: 1.4rem 0 1.8rem;
  overflow-x: auto;
}
.diagram-frame__caption {
  font-size: 12px; color: var(--text-faint); margin-top: 10px; text-align: center;
}
.diagram-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-faint); }
.diagram-legend__item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); }
.diagram-legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* svg helpers (classes used inside inline <svg>) */
svg text { font-family: var(--font-sans); }
.svg-box { fill: var(--bg-surface-2); stroke: var(--border-strong); stroke-width: 1.2; }
.svg-box-brand { fill: var(--brand-wash-strong); stroke: var(--brand); stroke-width: 1.3; }
.svg-box-naqd { fill: var(--naqd-wash); stroke: var(--naqd-dim); stroke-width: 1.3; }
.svg-box-usd { fill: var(--usd-wash); stroke: var(--usd); stroke-width: 1.3; }
.svg-box-dim { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.svg-title { fill: var(--text); font-weight: 700; font-size: 12.5px; }
.svg-sub { fill: var(--text-muted); font-size: 10.5px; }
.svg-label { fill: var(--text-muted); font-size: 10px; }
.svg-arrow { stroke: var(--text-faint); stroke-width: 1.4; fill: none; }
.svg-arrow-brand { stroke: var(--brand); stroke-width: 1.6; fill: none; }
.svg-lane { fill: var(--bg-elevated); stroke: var(--border-faint); stroke-width: 1; }
.svg-actor { fill: var(--text); font-weight: 700; font-size: 12px; }
.svg-life { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.svg-msg { stroke: var(--brand); stroke-width: 1.4; fill: none; }
.svg-msg-return { stroke: var(--text-faint); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
.svg-msg-text { fill: var(--text-secondary); font-size: 10.6px; }
.svg-note { fill: var(--bg-surface); stroke: var(--border); stroke-width: 1; }
.svg-note-text { fill: var(--text-muted); font-size: 9.8px; }

/* =========================================================================
   Misc components
   ========================================================================= */
.kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13.5px; }
.kv-grid dt { color: var(--text-faint); }
.kv-grid dd { margin: 0; color: var(--text-secondary); }

.step-list { list-style: none; margin: 1.2rem 0; padding: 0; counter-reset: step; }
.step-list > li {
  counter-increment: step; position: relative; padding: 2px 0 18px 38px; border-left: 1px solid var(--border);
  margin-left: 13px;
}
.step-list > li::before {
  content: counter(step);
  position: absolute; left: -13px; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-surface-2); border: 1px solid var(--border-strong); color: var(--brand-strong);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-list > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.step-list strong { display: block; color: var(--text); margin-bottom: 2px; }

.env-var { font-family: var(--font-mono); color: var(--brand-strong); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
.chip {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--text-secondary); background: var(--bg-surface);
}

.toc {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 20px; margin: 1.4rem 0 2rem; font-size: 13px;
}
.toc__title { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 24px; }
.toc li { margin-bottom: 4px; break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

.limitation-list { list-style: none; padding: 0; margin: 1rem 0; }
.limitation-list li {
  padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm); background: var(--bg-surface); margin-bottom: 10px; font-size: 13.5px;
}
.limitation-list strong { color: var(--warning); }

@media (max-width: 980px) {
  .sidebar { position: static; height: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .layout { flex-direction: column; }
  .content, .page-footer, .topbar { padding-left: 20px; padding-right: 20px; }
}