/* ==========================================================================
   Root documentation

   Type matches the app: Manrope for headings, Hanken Grotesk for body copy,
   JetBrains Mono for labels and figures. The previous sheet set the page title
   at 62px Manrope with -3.72px tracking over 14px body copy, which made the
   header shout and the prose unreadable.

   Surfaces follow the app's rule, not their own: a surface separates from the
   one behind it by FILL, never by an outline drawn around it. Static
   containers therefore carry no border and no shadow — the only hairlines left
   are the ones doing real work (dividers between rows, table rules, focus
   rings, the sticky header's seam), and the only shadow left is on the mobile
   drawer, which genuinely floats over the page.
   ========================================================================== */

:root {
  /* The surface ladder, four rungs, the app's values.

     In LIGHT a surface gets DARKER as it comes forward. That is the opposite
     of the usual instinct and the opposite of what this sheet used to do — it
     ran page #f2efec -> card #fffdfb, i.e. lighter as it advanced, so beside
     the app every card read as a white slab punched into the page. Nothing is
     pure white, so a card never blows out against the paper it sits on. */
  --bg:     #fdfcf9;   /* the page itself */
  --panel:  #f5f1e9;   /* the rail, the sticky mobile header */
  --paper:  #ece7dd;   /* a card sitting on the page */
  --sunk:   #e3ddd1;   /* a band recessed inside a card */

  --ink:        #201b17;
  --ink-2:      #3a322c;
  /* Deliberately darker than the ink ramp this sheet used to carry. Secondary
     prose (section decks, notice bodies, FAQ answers) now sits on --paper
     rather than on near-white paper, and the old #756d68 fell to 3.9:1 there.
     These clear 7:1 on every rung a paragraph can land on. */
  --muted:      #56483f;
  --faint:      #74655a;
  /* Hairlines, darkest first. --line rules between cells and under a table
     head; --line-soft is the quieter row rule; --line-strong is the scrollbar
     thumb. All three have to read against --paper now that a card is no longer
     near-white. */
  --line:        #ddd6c9;
  --line-soft:   #e6e0d4;
  --line-strong: #d5cabc;

  --orange: #c05f42;
  --orange-deep: #a94c38;
  /* An interaction surface, not a tint: the active nav item. On the inverted
     ladder something that comes forward gets darker, so this is a warm
     mid-tone at roughly --paper's lightness rather than the near-white
     (#fff0ea) it used to be, which read as a hole in the rail. */
  --orange-soft: #ebdbd0;
  --green:  #4f6642;
  --yellow: #7a6229;
  --danger: #96382c;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  /* Same display face the app uses for every heading. The docs had no Manrope
     at all, so side by side they read as a different product. */
  --display: "Manrope", "Hanken Grotesk", system-ui, sans-serif;
  --orange-line: #d9b5a6;
  /* The sticky mobile header sits over scrolling copy, so it is the one
     surface that stays translucent — a solid band would hide the fact that
     content is passing under it. */
  --panel-glass: rgba(245, 241, 233, .93);
  /* The only elevation in the sheet, and only for the mobile drawer, which is
     the only thing here that genuinely floats. Wide, soft, low alpha: a tight
     shadow at high alpha reads as a ring drawn around the panel. */
  --drawer-shadow: 0 26px 60px -18px rgba(54, 38, 29, .28);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
code { font-family: var(--mono); font-size: .88em; }

.skip-link {
  position: fixed; z-index: 100; top: 8px; left: 8px;
  padding: 10px 14px; border-radius: 5px;
  background: var(--ink); color: var(--bg); transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.mono { font-family: var(--mono); font-size: .9em; }
.ta-r { text-align: right; }

/* ------------------------------------------------------------- Sidebar --- */

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: -.035em;
}
.brand img { width: 26px; height: 26px; object-fit: contain; }

/* The rail is fixed but it is not floating: it is always there, in the same
   place, under nothing. So it separates from the page by fill alone — no
   border, no shadow. */
.docs-sidebar {
  position: fixed;
  inset: 14px auto 14px 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 262px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--panel);
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 14px;
}
.docs-label {
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* A field, so it is recessed into the rail rather than outlined on it. The
   focus ring is one of the hairlines that earns its keep and stays. */
.docs-search {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px;
  margin: 0 14px 10px; padding: 0 11px; min-height: 38px;
  border-radius: 6px;
  background: var(--paper); color: var(--faint);
}
.docs-search:focus-within { box-shadow: 0 0 0 2px var(--orange); }
.docs-search input {
  width: 100%; min-width: 0; border: 0; outline: 0;
  background: transparent; color: var(--ink); font-size: 13px;
}
.docs-search input::placeholder { color: var(--faint); }

.docs-nav {
  flex: 1; overflow-y: auto; padding: 4px 10px 18px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.nav-group-label {
  margin: 16px 10px 5px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nav-group-label:first-child { margin-top: 4px; }
.docs-nav a {
  display: block; padding: 6px 10px; border-radius: 5px;
  color: var(--ink-2); font-size: 13.5px; line-height: 1.45;
  transition: background-color .14s ease, color .14s ease;
}
/* Hover and selection both come forward off the rail, which on this ladder
   means darker in light and lighter in dark. */
.docs-nav a:hover { background: var(--paper); }
.docs-nav a.is-active {
  background: var(--orange-soft);
  color: var(--orange-deep);
  font-weight: 600;
}

.sidebar-foot { padding: 13px 18px; border-top: 1px solid var(--line); }
.primary-link { color: var(--orange-deep); font-size: 13.5px; font-weight: 600; }
.primary-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Live Root token CA, painted by site-config.js once a value is configured
   via /api/config ([data-root-ca] starts hidden). "CA:" is plain text, not
   a chip/badge, so it reads as a label prefix next to the hex string. */
.root-ca-surface { display: flex; align-items: center; gap: 8px; min-width: 0; }
.root-ca-surface::before {
  content: "CA:";
  flex: none;
  color: var(--orange-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.root-ca-label { display: none; }
.root-ca-value {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.root-ca-value:hover { color: var(--orange-deep); }
.root-ca-copy {
  flex: none;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color .14s ease;
}
.root-ca-copy:hover { color: var(--orange-deep); }

/* Sidebar-foot variant: a plain inline row above "Open app", full width of
   the 262px rail. The rail is narrow enough that the long label text
   ("Root token CA" / "Contract address") would crowd the address, so it
   is hidden here — the "CA:" prefix already identifies the row. */
.root-ca-sidebar {
  margin-bottom: 12px;
  min-width: 0;
  overflow: hidden;
}
.root-ca-sidebar .root-ca-label { display: none; }
.root-ca-sidebar .root-ca-value { flex: 1 1 auto; }

.mobile-header { display: none; }
/* The UA gives a bare <button> a 2px outset border and a `buttonface` fill
   (#f0f0f0 light, #6b6b6b dark) — neither of which is on this ladder. The
   control lives inside a header that only exists below 900px, but it is in
   the DOM at every width, so it is defined here rather than in the media
   query: that block is then only ever about layout. */
.mobile-menu {
  border: 0;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- Shell -- */

.docs-shell { margin-left: 290px; padding: 56px 40px 96px; }
/* Centred in the space beside the sidebar. Left-aligned it sat at 330px with
   220px of dead margin to its right, which read as broken rather than as a
   measure. */
.docs-main { max-width: 730px; margin-inline: auto; }

/* ----------------------------------------------------------- Page head --- */

.document-head { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.eyebrow {
  margin: 0 0 14px;
  color: var(--orange-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.document-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.14;
}
.lede {
  margin: 16px 0 0;
  color: var(--ink-2);
  font-size: 17.5px;
  line-height: 1.62;
}
.version {
  margin: 20px 0 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
}

.search-empty {
  margin: 32px 0 0; padding: 18px 20px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
  font-size: 14.5px;
}

/* -------------------------------------------------------------- Section -- */

.doc-section {
  padding-top: 52px;
  scroll-margin-top: 28px;
}
/* One marker per group. Printing the group name above every section repeated
   "Reference" seven times down the page. */
.group-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
}
.group-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.group-divider span {
  color: var(--orange-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* The first section after a divider sits closer to it than to the section above. */
.group-divider + .doc-section { padding-top: 26px; }
.doc-section h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.25;
}
.summary {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.doc-section h3 {
  margin: 32px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.008em;
}
.doc-section p { margin: 16px 0 0; }
.doc-section h3 + p,
.summary + p { margin-top: 12px; }
.doc-section strong { font-weight: 600; }
.doc-section a:not(.primary-link) {
  color: var(--orange-deep);
  text-decoration: underline;
  text-decoration-color: var(--orange-line);
  text-underline-offset: 3px;
}
.doc-section a:not(.primary-link):hover { text-decoration-color: currentColor; }

/* A quote rule, not a container outline: one edge marking an aside off from
   the prose it interrupts. */
.aside {
  margin-top: 20px !important;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

/* ---------------------------------------------------------- Fact grid ---- */

/* The 1px gaps show the backing colour through as rules between cells, which
   is the divider doing real work. The outer border is gone: the cells' own
   fill is what separates the grid from the page. */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
}
.fact-grid > div { padding: 15px 18px; background: var(--paper); }
.fact-grid dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}
.fact-grid dd {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------------- Notices --- */

/* A labelled card on its own fill, not a tinted alert box. The previous
   treatment filled four of these with a pale yellow and a 3px brown bar,
   which sat on the cream page like a stain. The label carries the emphasis
   instead of the background — which is also why the warn variant no longer
   recolours a border it does not have. */
.notice {
  margin: 26px 0 0;
  padding: 18px 20px 19px;
  border-radius: 6px;
  background: var(--paper);
}
.notice::before {
  content: "Note";
  display: block;
  margin-bottom: 10px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.notice strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.notice p {
  margin: 8px 0 0 !important;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.notice-warn::before { content: "Important"; color: var(--yellow); }

/* --------------------------------------------------------------- Steps --- */

.steps { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 24px 44px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--orange-deep);
  font-family: var(--mono);
  font-size: 11px;
}
/* Connecting rule between the markers. */
.steps li::after {
  content: "";
  position: absolute; left: 13px; top: 31px; bottom: 8px;
  width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin: 3px 0 0 !important; font-size: 14.5px; }
.steps p { margin: 5px 0 0 !important; color: var(--muted); font-size: 15px; }
.steps-compact li { padding-bottom: 18px; }

/* -------------------------------------------------------- Requirements --- */

.requirements { margin: 14px 0 0; padding: 0; list-style: none; }
.requirements li {
  position: relative;
  padding: 6px 0 6px 26px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.requirements li::before {
  content: "";
  position: absolute; left: 3px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
/* Deny-list: these are the conditions that must fail, not steps to follow. */
.requirements-deny li::before {
  top: 17px; height: 2px; width: 9px; left: 2px;
  border-radius: 1px; background: var(--danger);
}

/* ---------------------------------------------------------------- Code --- */

.code {
  position: relative;
  margin: 24px 0 0;
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
}
/* The caption band is recessed into the card, so its own fill is the seam.
   A hairline under it as well would be drawing the same boundary twice. */
.code figcaption {
  padding: 10px 16px;
  background: var(--sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
}
.code code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
  white-space: pre;
}
.copy-code {
  position: absolute; top: 7px; right: 10px;
  padding: 4px 10px;
  border: 0;
  border-radius: 5px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}
.copy-code:hover { background: var(--orange-soft); color: var(--orange-deep); }

/* -------------------------------------------------------------- Tables --- */

.table-wrap {
  margin: 24px 0 0;
  border-radius: 6px;
  background: var(--paper);
  overflow-x: auto;
}
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-wrap th.ta-r { text-align: right; }
.table-wrap td {
  padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.55;
  vertical-align: top;
}
.table-wrap tbody tr:first-child td { border-top: 0; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--faint);
}
.status.is-live::before { background: var(--green); }
.status.is-defined::before { background: var(--yellow); }
.status.is-pending::before { background: var(--orange); }
.status.is-none::before { background: var(--faint); }

/* -------------------------------------------------------- Control list --- */

.control-list { margin: 24px 0 0; display: grid; gap: 1px; border-radius: 6px; background: var(--line); overflow: hidden; }
.control-list > div { padding: 15px 18px; background: var(--paper); }
.control-list dt { font-size: 14.5px; font-weight: 600; }
.control-list dd { margin: 5px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ----------------------------------------------------------------- FAQ --- */

.faq { margin: 24px 0 0; border-radius: 6px; background: var(--paper); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color .14s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  float: right;
  color: var(--faint);
  font-family: var(--mono);
  font-weight: 400;
}
.faq details[open] summary { color: var(--orange-deep); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--orange-deep); }
.faq details p {
  margin: 0 !important;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* -------------------------------------------------------- Source list ---- */

.source-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; border-radius: 6px; background: var(--line); overflow: hidden; }
.source-list li { padding: 14px 18px; background: var(--paper); }
.source-list strong { display: block; font-size: 14.5px; font-weight: 600; }
.source-list span { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* -------------------------------------------------------------- Footer --- */

.docs-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.docs-footer p { margin: 0; }

/* ---------------------------------------------------------- Responsive --- */

@media (max-width: 1080px) {
  .docs-shell { padding: 48px 32px 88px; }
}

@media (max-width: 900px) {
  /* The seam under a sticky header is a real divider: it is the only thing
     saying that copy is passing beneath the bar rather than ending at it. */
  .mobile-header {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-glass);
    backdrop-filter: blur(8px);
  }
  .mobile-menu { padding: 8px 14px; }

  .docs-sidebar {
    inset: 0 auto 0 0;
    width: min(300px, 84vw);
    border-radius: 0;
    transform: translateX(-102%);
    transition: transform .24s ease;
  }
  /* Open, the rail is a drawer laid over the page — the one element in this
     sheet that is actually floating, so the one that keeps a shadow. */
  .docs-sidebar.is-open { transform: none; box-shadow: var(--drawer-shadow); }

  .docs-shell { margin-left: 0; padding: 34px 20px 72px; }
  .document-head h1 { font-size: 28px; }
  .lede { font-size: 16.5px; }
  /* The sticky header is ~64px tall, and the desktop scroll-margin of 28px
     parked the heading 10px BEHIND it: follow a nav link and you landed on a
     section whose title you could not see. Clear the bar instead. */
  .doc-section { padding-top: 44px; scroll-margin-top: 56px; }
  .doc-section h2 { font-size: 22px; }
  .fact-grid { grid-template-columns: 1fr; }
  /* .table-wrap already scrolls; without a floor the table simply squeezed
     instead, and a three-column table at 375px turned every cell into a
     one-word-per-line column. The card scrolls sideways, the page does not. */
  .table-wrap table { min-width: 520px; }
  .docs-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   Dark theme — same preference key as the app, so moving between them keeps
   one palette. The ladder mirrors light: forward is LIGHTER here, and nothing
   is pure black, so the page never bottoms out behind the cards on it.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg:     #18181b;
  --panel:  #1f1f23;
  --paper:  #27272a;
  --sunk:   #2e2e33;

  --ink:        #fafafa;
  --ink-2:      #e4e4e7;
  /* Lifted off the app's #a1a1aa for the same reason light's --muted was
     pushed down: secondary prose here sits on --paper, where #a1a1aa measured
     5.8:1. The docs are a reading surface, so the ramp is tuned to keep every
     paragraph at 7:1 or better on the rung it actually lands on. */
  --muted:      #b4b4bd;
  --faint:      #8b8b94;
  --line:       #3f3f46;
  --line-soft:  #35353b;
  --line-strong:#52525b;

  --orange:      #e0805f;
  --orange-deep: #f0a184;
  /* Mirrors light: a warm interaction surface a visible step forward of
     --paper. #2b2321 was fractionally darker than the card it sat on, so the
     active nav item barely moved. */
  --orange-soft: #3a2b22;
  --orange-line: #6b4b3c;

  --green:  #93b57f;
  --yellow: #cbab6a;
  --danger: #ef7059;

  --panel-glass:    rgba(31, 31, 35, .93);
  --drawer-shadow:  0 26px 60px -18px rgba(0, 0, 0, .72);

  color-scheme: dark;
}

/* Scrollbars, matching the app. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--line-strong);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }