/* ================================================================
   SYRID — API Documentation
   ================================================================ */

:root, [data-theme="dark"] {
    --ground:    #1A1A22;
    --surface:   #222230;
    --surface-2: #1E1E28;
    --border:    #2E2E34;
    --border-hi: #424249;
    --border-sub:#191920;
    --text:      #F2F2F5;
    --text-sub:  #B0B0C2;
    --accent:    #09C43A;
    --accent-dim:#07AA32;
    --accent-ink:#030E07;   /* text/icon sitting ON an accent fill */
    --sky:       #38BDF8;
    --green:     #3FB950;
    --yellow:    #D29922;
    --red:       #FF4545;
    --syrid-red: #CC2020;
    --grid:      rgba(46,46,52,0.45);
    --glow:      rgba(9,196,58,0.20);
    --sidebar-w: 240px;
    --font-body: 'Space Grotesk', 'Cairo', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --ease:      .16s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="light"] {
    --ground:    #CDD8E8;
    --surface:   #BFCDE0;
    --surface-2: #DBE4F2;
    --border:    #94AABF;
    --border-hi: #6880A0;
    --border-sub:#D5DEEC;
    --text:      #060B1C;
    --text-sub:  #1A2C46;
    --accent:    #0C4EA6;
    --accent-dim:#072C84;
    --accent-ink:#FFFFFF;
    --sky:       #2563EB;
    --green:     #2E9E5B;
    --yellow:    #B8860B;
    --red:       #C01818;
    --syrid-red: #CC2020;
    --grid:      rgba(12,78,166,0.10);
    --glow:      rgba(12,78,166,0.14);
}

/* ── Light-mode heading font (blueprint techy mono) ── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .card-title,
[data-theme="light"] .card-num,
[data-theme="light"] .topbar-title,
[data-theme="light"] .brand-name,
[data-theme="light"] .nav-item,
[data-theme="light"] .page-header h1,
[data-theme="light"] .hero h1,
[data-theme="light"] .hero .eyebrow,
[data-theme="light"] h2.sec,
[data-theme="light"] .nv-card h1,
[data-theme="light"] .badge,
[data-theme="light"] th,
[data-theme="light"] .btn,
[data-theme="light"] .kyc-h {
    font-family: 'IBM Plex Mono', 'Cairo', monospace;
    letter-spacing: .04em;
}

/* ── Theme toggle button (shared) ── */
.theme-toggle {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-sub); cursor: pointer;
    transition: border-color .12s, color .12s;
    font-size: 15px; line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .tt-icon-light { display: none; }
.theme-toggle .tt-icon-dark  { display: block; }
[data-theme="light"] .theme-toggle .tt-icon-light { display: block; }
[data-theme="light"] .theme-toggle .tt-icon-dark  { display: none; }

/* ── Language pill toggle (shared) ── */
.lang-pill {
    display: inline-flex; align-items: center;
    height: 32px; border: 1px solid var(--border);
    background: transparent; overflow: hidden;
}
.lang-pill .lp-seg {
    display: inline-flex; align-items: center; justify-content: center;
    height: 100%; padding: 0 11px; margin: 0;
    border: none; -webkit-appearance: none; appearance: none;
    font-family: 'Space Grotesk', 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: .06em; line-height: 1; text-decoration: none;
    transition: background .12s, color .12s;
    cursor: pointer;
}
.lang-pill .lp-seg.lp-active {
    background: var(--accent); color: var(--accent-ink);
}
.lang-pill .lp-seg.lp-inactive {
    background: transparent; color: var(--text-sub);
}
.lang-pill .lp-seg.lp-inactive:hover {
    color: var(--accent);
}
.lang-pill .lp-div {
    width: 1px; height: 60%; background: var(--border); flex-shrink: 0;
}

/* Arabic body font when in RTL */
[dir="rtl"] body { font-family: 'Cairo', 'Space Grotesk', sans-serif; }


*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,nav,.label,.badge,th{font-family:'Space Grotesk',sans-serif;font-weight:700;}
code,pre,.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--sky);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:0 20px;
  background:color-mix(in srgb,var(--ground) 85%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .brand{
  display:flex;align-items:center;gap:14px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
.topbar .brand .dot{
  width:46px;height:46px;border:2px solid var(--accent);
  display:grid;place-items:center;
  transition:border-color .2s;
}
.topbar .brand .dot img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.topbar .spacer{flex:1;}
.topbar .top-link{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-sub);
  border:1px solid var(--border);padding:6px 14px;
}
.topbar .top-link:hover{color:var(--accent);border-color:var(--accent);text-decoration:none;}
.hamburger{
  display:none;background:transparent;border:1px solid var(--border);
  color:var(--text);width:36px;height:34px;cursor:pointer;font-size:17px;line-height:1;
}

/* ---------- LAYOUT ---------- */
.layout{display:flex;padding-top:56px;}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  position:sticky;top:56px;align-self:flex-start;
  height:calc(100vh - 56px);overflow-y:auto;
  border-right:1px solid var(--border);
  padding:24px 10px 60px;
  background:var(--ground);
}
.sidebar .nav-title{
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-sub);padding:10px 10px 5px;
}
.sidebar a{
  display:block;color:var(--text-sub);font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 12px;border-left:2px solid transparent;margin-bottom:2px;
}
.sidebar a:hover{color:var(--text);background:rgba(9,196,58,0.04);text-decoration:none;}
.sidebar a.active{
  background:rgba(9,196,58,.08);color:var(--accent);
  border-left:2px solid var(--accent);
}
.content{
  flex:1;min-width:0;display:flex;justify-content:center;
  padding:0 28px 120px;
}
.content-inner{max-width:820px;width:100%;}
section{padding-top:64px;margin-top:-24px;}
section:first-child{padding-top:40px;}

h2.sec{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:400;margin:0 0 6px;
}
h3{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px;}
h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:28px 0 10px;}
p{color:var(--text);margin:0 0 14px;}
p.muted,.muted{color:var(--text-sub);}

/* ---------- HERO ---------- */
.hero{
  border:1px solid var(--border);background:var(--surface);
  padding:46px 40px;position:relative;overflow:hidden;
}
.hero::before{ content:'';position:absolute;top:-1px;left:-1px;width:16px;height:16px;border-top:2px solid var(--accent);border-left:2px solid var(--accent); }
.hero::after{ content:'';position:absolute;bottom:-1px;right:-1px;width:16px;height:16px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent); }
.hero-glow{position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(9,196,58,.10),transparent 70%);pointer-events:none;}
.hero .eyebrow{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(9,196,58,.35);padding:4px 12px;margin-bottom:20px;
}
.hero h1{
  font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;line-height:1.08;
  margin:0 0 16px;letter-spacing:.02em;text-transform:uppercase;max-width:14ch;
}
.hero .sub{font-size:16px;color:var(--text-sub);max-width:54ch;margin-bottom:28px;}
.hero .cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

.btn{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 20px;cursor:pointer;border:none;display:inline-block;
}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:#07AA32;text-decoration:none;color:var(--accent-ink);box-shadow:0 0 14px rgba(9,196,58,.2);}
.btn-secondary{
  background:transparent;border:1px solid var(--border);color:var(--text);
  padding:9px 20px;
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}

/* ---------- CARDS ---------- */
.card{background:var(--surface);border:1px solid var(--border);padding:20px 22px;}

/* ---------- FLOW ---------- */
.flow{display:flex;align-items:stretch;gap:0;margin-top:8px;}
.flow-step{
  flex:1;background:var(--surface);border:1px solid var(--border);
  padding:18px 16px;position:relative;
}
.flow-step .num{
  width:28px;height:28px;border:1px solid var(--accent);background:rgba(9,196,58,.08);
  color:var(--accent);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;
  display:grid;place-items:center;margin-bottom:10px;
}
.flow-step h4{margin:0 0 6px;font-size:14px;}
.flow-step p{font-size:13px;color:var(--text-sub);margin:0;}
.flow-step code{font-size:12px;color:var(--accent);}
.flow-arrow{flex:0 0 38px;display:grid;place-items:center;color:var(--accent);font-size:22px;}

/* ---------- METHOD BADGES ---------- */
.badge{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11px;
  letter-spacing:.04em;padding:3px 9px;min-width:54px;text-align:center;
}
.m-get{background:rgba(63,185,80,.14);color:var(--green);border:1px solid rgba(63,185,80,.35);}
.m-post{background:rgba(9,196,58,.14);color:var(--accent);border:1px solid rgba(9,196,58,.35);}
.m-delete{background:rgba(248,81,73,.14);color:var(--red);border:1px solid rgba(248,81,73,.35);}

.pill{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.04em;padding:2px 9px;
}
.pill-auth{background:rgba(56,189,248,.12);color:var(--sky);border:1px solid rgba(56,189,248,.25);}
.pill-public{background:rgba(139,148,158,.14);color:var(--text-sub);border:1px solid var(--border);}

/* ---------- CODE BLOCKS ---------- */
.code{
  position:relative;background:var(--surface-2);border:1px solid var(--border);
  margin:14px 0;overflow:hidden;
}
.code .code-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 8px 14px;border-bottom:1px solid var(--border);
}
.code .lang{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-sub);
}
.copy-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-sub);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;cursor:pointer;
}
.copy-btn:hover{color:var(--accent);border-color:var(--accent);}
.copy-btn.copied{color:var(--green);border-color:var(--green);}
pre{
  margin:0;padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.6;
  color:var(--text);font-family:'IBM Plex Mono',monospace;
}
pre .c-key{color:var(--sky);}
pre .c-str{color:var(--green);}
pre .c-com{color:var(--text-sub);}
pre .c-met{color:var(--accent);}

p code,td code,li code{
  background:var(--surface-2);border:1px solid var(--border);
  padding:1px 6px;font-size:12px;color:var(--accent);
  font-family:'IBM Plex Mono',monospace;
}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);margin:14px 0;}
table{width:100%;border-collapse:collapse;min-width:640px;}
th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-sub);font-weight:400;padding:11px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(9,196,58,.025);}
td .path{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);white-space:nowrap;}
td.desc{color:var(--text-sub);}

/* ---------- STATUS LIFECYCLE ---------- */
.status-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 22px;}
.status-node{
  display:inline-block;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  padding:5px 12px;border:1px solid var(--border);
}
.s-created{color:var(--text-sub);border-color:var(--border);}
.s-pending{color:var(--yellow);border-color:rgba(210,153,34,.4);background:rgba(210,153,34,.08);}
.s-processing{color:var(--sky);border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.08);}
.s-approved{color:var(--green);border-color:rgba(63,185,80,.4);background:rgba(63,185,80,.08);}
.s-rejected{color:var(--red);border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.08);}
.s-expired{color:var(--text-sub);border-color:var(--border);background:var(--surface);}
.status-arrow{color:var(--accent);font-size:15px;}

.status-list{display:grid;gap:10px;}
.status-row{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);padding:14px 16px;
}
.status-row .lbl{flex:0 0 110px;}
.status-row p{margin:0;font-size:13px;color:var(--text-sub);}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:0;margin:8px 0 0;border-bottom:1px solid var(--border);}
.tab{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-sub);background:transparent;border:none;border-bottom:2px solid transparent;
  padding:9px 16px;cursor:pointer;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.note{
  border-left:3px solid var(--accent);background:rgba(9,196,58,.06);
  padding:12px 16px;margin:16px 0;font-size:13px;color:var(--text-sub);
}
.note strong{color:var(--text);}

/* ---------- BIG PICTURE FLOW ---------- */
.bigpic{
  display:flex;align-items:stretch;flex-wrap:wrap;gap:0;
  margin:24px 0 0;border:1px solid var(--border);background:var(--surface);
}
.bp-actor{
  flex:1 1 120px;padding:18px 14px;text-align:center;
  border-right:1px solid var(--border);
}
.bp-actor:last-child{border-right:none;}
.bp-actor--orch{background:rgba(9,196,58,.04);}
.bp-icon{font-size:22px;margin-bottom:6px;}
.bp-label{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:4px;
}
.bp-note{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.04em;}
.bp-arr{
  flex:0 0 24px;display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:16px;padding:0 2px;
}

/* ---------- WHAT YOU BUILD ---------- */
.whatyoubuild{margin:18px 0 0;border:1px solid var(--border);}
.wyb-head{
  padding:10px 16px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--border);background:var(--surface-2);
}
.wyb-row{display:flex;}
.wyb-item{flex:1;padding:16px 18px;}
.wyb-item ul{margin:8px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:5px;}
.wyb-item li{font-size:13px;color:var(--text-sub);}
.wyb-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.wyb-yours{border-right:1px solid var(--border);}
.wyb-yours .wyb-title{color:var(--accent);}
.wyb-ours .wyb-title{color:var(--text-sub);}
.wyb-divider{
  flex:0 0 80px;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-sub);border-right:1px solid var(--border);
  writing-mode:vertical-lr;
}

.scrim{display:none;position:fixed;inset:56px 0 0;background:rgba(0,0,0,.5);z-index:25;}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .hamburger{display:inline-block;}
  .sidebar{
    position:fixed;top:56px;left:0;z-index:30;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.4);
  }
  .sidebar.open{transform:translateX(0);}
  .scrim.open{display:block;}
  .content{padding:0 18px 100px;}
  .hero h1{font-size:30px;}
  .flow{flex-direction:column;}
  .flow-arrow{transform:rotate(90deg);height:34px;}
  .status-row .lbl{flex-basis:90px;}
  .bigpic{flex-direction:column;}
  .bp-actor{border-right:none;border-bottom:1px solid var(--border);}
  .bp-actor:last-child{border-bottom:none;}
  .bp-arr{transform:rotate(90deg);height:24px;padding:0;}
  .wyb-row{flex-direction:column;}
  .wyb-yours{border-right:none;border-bottom:1px solid var(--border);}
  .wyb-divider{writing-mode:initial;border-right:none;border-bottom:1px solid var(--border);padding:8px;flex-basis:auto;}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important;}}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] body,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .brand,[dir="rtl"] .sidebar a,[dir="rtl"] .nav-title,
[dir="rtl"] .btn,[dir="rtl"] .badge,[dir="rtl"] th{ font-family:'Cairo',sans-serif; }

[dir="rtl"] .sidebar{ border-right:none; border-left:1px solid var(--border); }
[dir="rtl"] .sidebar a{ border-left:2px solid transparent; }
[dir="rtl"] .sidebar a.active{ border-left-color:var(--accent); }
[dir="rtl"] .bp-actor{ border-right:none; border-left:1px solid var(--border); }
[dir="rtl"] .bp-actor:last-child{ border-left:none; }
[dir="rtl"] .bp-arr{ transform:scaleX(-1); }
[dir="rtl"] .wyb-yours{ border-right:none; border-left:1px solid var(--border); }
[dir="rtl"] .wyb-divider{ border-right:none; border-left:1px solid var(--border); }
[dir="rtl"] .wyb-item ul{ padding-left:0; padding-right:16px; }

[dir="rtl"] pre,[dir="rtl"] .code,[dir="rtl"] code,[dir="rtl"] .path{ direction:ltr; text-align:left; unicode-bidi:isolate; }
[dir="rtl"] .note{ border-left:none; border-right:3px solid var(--accent); }
[dir="rtl"] th,[dir="rtl"] td{ text-align:right; }
[dir="rtl"] .flow-arrow,[dir="rtl"] .status-arrow{ transform:scaleX(-1); }