/* --- self-hosted IBM Plex (latin) -------------------------------------------
   Served from this origin rather than fonts.googleapis.com. The Google
   stylesheet was render-blocking and cross-origin, so every visitor waited on
   a third-party round trip before anything painted. Firefox does not hold the
   previous page's paint during navigation, so that wait showed as a blank --
   dark, on a dark-themed browser -- between pages.
   IBM Plex is SIL OFL 1.1, so redistribution is permitted.
   font-display: swap renders text in the fallback face immediately and
   restyles when the webfont lands, so fonts never block paint at all. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/IBMPlexMono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/IBMPlexSans-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   PolyDataFeed — Polymarket on-chain trade feed
   ----------------------------------------------------------------------------
   Design note: the page descends from continuous-form greenbar paper, the
   stock financial data was printed on for decades. Two rules follow from that,
   and everything else is downstream of them:
     1. Banded rows appear ONLY on tabular data -- that is what greenbar was
        for. Never as background texture.
     2. Monospace carries anything that is, or represents, machine output;
        the sans face carries human explanation. No exceptions either way.
   IBM Plex is the pairing because IBM mainframes printed those reports.
   ========================================================================= */

:root {
  --paper:     #f4f6f1;  /* printout stock */
  --bar:       #dde8dc;  /* the greenbar band */
  --ink:       #131a16;  /* near-black, green cast */
  --ink-soft:  #55625b;  /* secondary prose */
  --rule:      #c3cfc2;  /* hairlines, sprockets */
  --flag:      #b23a2b;  /* ledger red -- ONLY for a detected gap / errors */
  --measure:   68rem;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* The page is light-only. Saying so stops a dark-mode browser painting its
   default dark canvas during navigation and repainting when this file lands --
   which reads as a black flash between pages. Backgrounding <html> as well as
   <body> means the very first paint is already paper. */
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
}

/* --- the sprocket margin ---------------------------------------------------
   Continuous-form paper is fed by holes punched down both edges. Here it is a
   single left rail, drawn with a repeating gradient so it never breaks across
   sections -- the page is one continuous strip. Hidden on narrow screens where
   the horizontal budget is better spent on the text. */
.sheet {
  position: relative;
  padding-left: 3.25rem;
}
.sheet::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3.25rem;
  border-right: 1px solid var(--rule);
  background-image: radial-gradient(circle at 1.625rem 0.75rem,
                    var(--rule) 0 3.5px, transparent 3.5px);
  background-size: 3.25rem 1.5rem;
  background-repeat: repeat-y;
  opacity: .55;
  pointer-events: none;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

/* --- type roles ----------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

h1 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

h2 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h3 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}

p { margin: 0 0 1.15rem; max-width: 60ch; }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; }
.muted { color: var(--ink-soft); }

a { color: var(--ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--flag); }

/* --- header --------------------------------------------------------------- */
.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.75rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-family: var(--mono); font-weight: 600; font-size: 1rem;
  letter-spacing: -.02em; text-decoration: none;
}
.brand span { color: var(--ink-soft); font-weight: 400; }
.top nav { display: flex; gap: 1.5rem; font-family: var(--mono); font-size: .84rem; }
.top nav a { text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { text-decoration: underline; }

/* --- sections ------------------------------------------------------------- */
.band { padding: 4.5rem 0; border-bottom: 1px solid var(--rule); }
.band:last-of-type { border-bottom: 0; }
.band > .wrap > .eyebrow:first-child { margin-bottom: .9rem; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; gap: 2rem; } }

/* --- buttons -------------------------------------------------------------- */
.actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 2rem; }
.btn {
  font-family: var(--mono); font-size: .9rem; font-weight: 500;
  padding: .8rem 1.4rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  text-decoration: none; display: inline-block;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { background: var(--flag); border-color: var(--flag); color: var(--paper); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--flag); outline-offset: 3px;
}

/* --- the tape: the signature element --------------------------------------
   A strip of real trade frames with their sequence numbers running unbroken
   down the left edge. The product's whole claim is that this column never
   skips, so the column is the argument. */
.tape {
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.5;
  overflow: hidden;
}
.tape-head {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--rule);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.tape-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  border-bottom: 1px solid var(--rule);
}
.tape-row:last-child { border-bottom: 0; }
.tape-row:nth-child(even) { background: var(--bar); }
.tape-seq {
  padding: .5rem .9rem;
  border-right: 1px solid var(--rule);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tape-body { padding: .5rem .9rem; overflow-x: auto; white-space: nowrap; }
.tape-row.is-gap .tape-seq,
.tape-row.is-gap .tape-body { color: var(--flag); }
.tape-row.is-new { animation: tick .5s ease-out; }
@keyframes tick { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.k-side { font-weight: 600; }
.k-num { font-variant-numeric: tabular-nums; }

/* --- data table (greenbar, where it belongs) ------------------------------ */
.scroll { overflow-x: auto; border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
thead th {
  font-family: var(--mono); font-weight: 500;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  text-align: left; color: var(--ink-soft);
  padding: .7rem .9rem; border-bottom: 1px solid var(--rule);
  white-space: nowrap; background: var(--paper);
}
tbody td { padding: .6rem .9rem; vertical-align: top; }
tbody tr:nth-child(even) { background: var(--bar); }
tbody td:first-child { font-family: var(--mono); white-space: nowrap; font-size: .82rem; }
td .type { font-family: var(--mono); color: var(--ink-soft); font-size: .78rem; }

/* --- code ----------------------------------------------------------------- */
pre {
  font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  background: var(--ink); color: #dfe7e0;
  padding: 1.1rem 1.2rem; overflow-x: auto; margin: 0 0 1.25rem;
  border: 1px solid var(--ink);
}
pre .c { color: #8fa396; }      /* comment */
pre .s { color: #b8d6bd; }      /* string  */
code:not(pre code) {
  font-family: var(--mono); font-size: .88em;
  background: var(--bar); padding: .1em .35em; border: 1px solid var(--rule);
}

/* --- misc ----------------------------------------------------------------- */
.facts { list-style: none; padding: 0; margin: 1.5rem 0 0; }
/* Narrow label column: the labels are one or two short words, so 9rem was
   stealing width from the values and wrapping them onto a second line, which
   made the list run past the bottom of the prose beside it. */
.facts li { display: grid; grid-template-columns: 7rem 1fr; gap: .9rem; padding: .65rem 0; border-top: 1px solid var(--rule); }
.facts li span:first-child { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding-top: .25rem; }
/* Slightly down from body size: these are captions beside prose, not prose,
   and it buys the ~5 characters per line that keep each value on one line. */
.facts li span:last-child { font-size: .95rem; line-height: 1.5; }
@media (max-width: 620px) { .facts li { grid-template-columns: 1fr; gap: .2rem; } }

.note {
  border-left: 2px solid var(--flag);
  padding: .2rem 0 .2rem 1rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

.foot {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .78rem; color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.foot a { color: var(--ink-soft); }

/* --- docs layout: content + sticky contents rail ----------------------------
   The rail tracks the reader rather than sitting at the top and being
   forgotten. Because the sections it lists ARE the page's structure, the
   active marker is real information -- where you are in the document -- not
   decoration. */
.doc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 3.5rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.doc-main { min-width: 0; }
/* Sections already centre themselves; inside the column that would double the
   gutters, so neutralise it here. */
.doc-main .wrap { max-width: none; padding: 0; margin: 0; }

.doc-nav {
  position: sticky;
  top: 2.5rem;
  align-self: start;
  padding-top: 4.9rem; /* aligns the rail with the first eyebrow */
}
.doc-nav-title {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .9rem;
}

.toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: .45rem 0 .45rem .9rem;
  margin-left: -1px;                 /* sit the marker on top of the rail */
  border-left: 2px solid transparent;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease;
}
.toc a:hover { color: var(--ink); border-left-color: var(--rule); }
.toc a.is-active { color: var(--flag); border-left-color: var(--flag); }

/* Anchor jumps should not land flush against the viewport edge. */
.doc-main section[id] { scroll-margin-top: 2rem; }

/* Below the width that fits a rail, it becomes a tile grid above the content —
   same markup, no duplicate list. */
@media (max-width: 1080px) {
  .doc-shell { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .doc-main .wrap { max-width: var(--measure); padding: 0 1.5rem; margin: 0 auto; }
  .doc-nav {
    position: static;
    order: -1;
    padding: 2rem 1.5rem 0;
    max-width: var(--measure);
    margin: 0 auto;
    width: 100%;
  }
  .toc {
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .5rem;
  }
  .toc a {
    border: 1px solid var(--rule);
    margin-left: 0;
    padding: .7rem .9rem;
    color: var(--ink);
  }
  .toc a.is-active { border-color: var(--flag); }
}

@media (max-width: 700px) {
  .sheet { padding-left: 0; }
  .sheet::before { display: none; }
  body { font-size: 16px; }
  .band { padding: 3rem 0; }
  .tape-row { grid-template-columns: 5.5rem 1fr; }
  .tape { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}