/* ==========================================================================
   Binance World Assets — documentation chrome
   --------------------------------------------------------------------------
   This sheet loads AFTER ../css/theme.css and adds only what a documentation
   site needs on top of it: the two column shell, the section navigation, the
   in-page contents, long-form prose rhythm and a few table modifiers.

   It deliberately does NOT restyle body, headings, links, lists, tables,
   panels, stats, callouts, badges or the empty state. Those come from
   theme.css so the docs and the app stay identical. Colours are referenced
   only through the theme tokens.
   ========================================================================== */

:root{
  --doc-nav: 252px;
  --doc-toc: 236px;
  --doc-gutter: var(--s-5, 24px);
}

/* skip link ------------------------------------------------------------- */
.skip{
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--gold); color: var(--bg);
  padding: 10px 14px;
  font-family: var(--mono); font-size: 13px; line-height: 1;
}
.skip:focus{ left: 8px; top: 8px; text-decoration: none; }

/* shell ----------------------------------------------------------------- */
.shell{
  display: grid;
  grid-template-columns: var(--doc-nav) minmax(0, 1fr) var(--doc-toc);
  max-width: 1560px;
  margin: 0 auto;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* section navigation ---------------------------------------------------- */
.sidenav{
  position: sticky;
  top: var(--nav-h, 60px);
  align-self: start;
  height: calc(100vh - var(--nav-h, 60px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5) var(--s-3) var(--s-7) var(--s-5);
  border-right: 1px solid var(--line);
  min-width: 0;
}
.sidenav h4{
  margin: var(--s-5) 0 6px;
  padding: 0 var(--s-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidenav h4:first-child{ margin-top: 0; }
.sidenav ul{ list-style: none; margin: 0 0 4px; padding: 0; }
.sidenav li{ margin: 0; }
.sidenav a{
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 6px var(--s-2);
  border-left: 2px solid transparent;
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.sidenav a:hover{
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
}
.sidenav .idx{
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--line);
  min-width: 15px;
}
.sidenav a[aria-current="page"]{
  color: var(--gold);
  background: var(--gold-dim);
  border-left-color: var(--gold);
  font-weight: 500;
}
.sidenav a[aria-current="page"] .idx{ color: var(--gold); }
.navfoot{
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* the mobile contents button, hidden on desktop ------------------------- */
.docnav-toggle{ display: none; }

/* the page -------------------------------------------------------------- */
.doc-main{
  min-width: 0;
  max-width: 880px;
  padding: var(--s-6) var(--doc-gutter) var(--s-8);
}
.doc-main p,
.doc-main li{ line-height: 1.68; }
.doc-main p,
.doc-main ul,
.doc-main ol{ max-width: 72ch; }

.crumb{
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb b{ color: var(--gold); font-weight: 500; }

.lede{
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 68ch;
  margin-bottom: var(--s-5);
}
.lede b{ color: var(--ink); font-weight: 500; }

/* long-form rhythm. Sizes stay theme's, only the spacing changes. */
.doc-main h2{
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h, 60px) + 16px);
}
.doc-main h3{
  margin-top: var(--s-5);
  scroll-margin-top: calc(var(--nav-h, 60px) + 16px);
}
.doc-main h2 .badge{ vertical-align: middle; margin-left: var(--s-2); }

/* inline code. Matches theme's .code, but wraps instead of clipping. */
.doc-main code{
  font-family: var(--mono);
  font-size: .875em;
  color: var(--gold);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
.doc-main a code{ color: var(--gold-hi); }

.formula{ margin: 0 0 var(--s-3); }
.formula-note{ margin: calc(var(--s-2) * -1) 0 var(--s-4); white-space: pre; overflow-x: auto; }

/* table modifiers ------------------------------------------------------- */
.table-wrap{ margin-bottom: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); }

/* Reference tables carry sentences, not just figures, so they wrap. */
.table-prose{ min-width: 0; font-family: var(--sans); font-size: 13.5px; }
.table-prose tbody td,
.table-prose tbody th{ white-space: normal; vertical-align: top; }
.table-prose .u-mono,
.table-prose .num,
.table-prose .tbd,
.table-prose code{ font-family: var(--mono); }
.table-prose .num{ white-space: nowrap; }

.table caption{
  caption-side: top;
  text-align: left;
  padding: var(--s-3) var(--s-3);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.table tbody th{
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  vertical-align: top;
}
.table tbody tr:nth-child(even) th{ background: rgba(30, 35, 41, .42); }
.table tbody tr:hover th{ background: var(--panel-2); }
.table tbody tr:last-child td,
.table tbody tr:last-child th{ border-bottom: 0; }
.table tfoot td,
.table tfoot th{
  padding: 10px var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-weight: 500;
  text-align: left;
  color: var(--ink);
}
.table tfoot .num{ text-align: right; }

/* checklist tables get a box to tick in the left column */
.checklist tbody td:first-child{ width: 38px; text-align: center; }
.checklist tbody td:first-child::before{
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  border: 1px solid var(--muted);
  border-radius: var(--r);
  background: var(--bg);
  transform: translateY(3px);
}

/* callout tones. Only the marker edge changes. */
.callout{ margin-bottom: var(--s-4); }
.callout p:last-child{ margin-bottom: 0; }
.callout-plain{ border-left-color: var(--line); }
.callout-green{ border-left-color: var(--green); }
.callout-green .callout-title{ color: var(--green); }
.callout-red{ border-left-color: var(--red); }
.callout-red .callout-title{ color: var(--red); }

/* numbered flow rail ---------------------------------------------------- */
.rail{
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  counter-reset: step;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.rail li{
  counter-increment: step;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  margin: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.rail li:nth-child(even){ background: rgba(30, 35, 41, .42); }
.rail li:last-child{ border-bottom: 0; }
.rail li::before{
  content: counter(step, decimal-leading-zero);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  color: var(--gold);
}
.rail li > div{ padding: var(--s-3) var(--s-4) var(--s-3) 6px; min-width: 0; }
.rail b{ display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.rail p{ margin: 0; font-size: 13.5px; color: var(--muted); max-width: 66ch; }

/* key / value plates ---------------------------------------------------- */
.kv{
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 var(--s-4);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.kv dt{
  background: var(--panel);
  padding: 10px var(--s-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.kv dd{
  background: var(--panel);
  margin: 0;
  padding: 10px var(--s-3);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  word-break: break-all;
  min-width: 0;
}

/* read next ------------------------------------------------------------- */
.next{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.next a{
  display: block;
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--ink);
}
.next a:hover{
  border-color: var(--gold);
  background: var(--panel-2);
  text-decoration: none;
}
.next span{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 4px;
}
.next b{ display: block; font-size: 14px; font-weight: 500; }

/* in-page contents ------------------------------------------------------ */
.toc{
  position: sticky;
  top: var(--nav-h, 60px);
  align-self: start;
  height: calc(100vh - var(--nav-h, 60px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-6) var(--s-4) var(--s-7) 4px;
  min-width: 0;
}
.toc h4{
  margin: 0 0 var(--s-2);
  padding-left: 11px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}
.toc li{ margin: 0; }
.toc a{
  display: block;
  padding: 5px 10px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.toc a:hover{ color: var(--ink); text-decoration: none; }
.toc a.sub{ padding-left: 22px; font-size: 12px; }
.toc a.on{ color: var(--gold); border-left-color: var(--gold); }

/* responsive ------------------------------------------------------------ */
@media (max-width: 1180px){
  .shell{ grid-template-columns: var(--doc-nav) minmax(0, 1fr); }
  .toc{ display: none; }
}

@media (max-width: 880px){
  :root{ --doc-gutter: var(--s-4, 16px); }
  .shell{ grid-template-columns: minmax(0, 1fr); }

  .docnav-toggle{
    display: inline-flex;
    margin: var(--s-4) var(--doc-gutter) 0;
  }
  .sidenav{
    display: none;
    position: static;
    height: auto;
    width: 100%;
    padding: var(--s-4) var(--doc-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .sidenav.is-open{ display: block; }
  .doc-main{ padding-top: var(--s-4); }
  .lede{ font-size: 15.5px; }
}

@media (max-width: 420px){
  .rail li{ grid-template-columns: 36px minmax(0, 1fr); }
  .kv{ grid-template-columns: minmax(0, 1fr); }
  .kv dt{ padding-bottom: 2px; }
  .kv dd{ padding-top: 2px; }
}